/* ============================================================
   BLUEBIRD CONSULTING — GLOBAL STYLESHEET v20
   Pilot: Oracle TRCS (Technologie-Seiten-Template)
   Basis: Ocean Theme v53 + Bluebird Custom-Modules
   Stand: April 2026
   ============================================================
   
   ÄNDERUNGEN IN v20 (Konsolidierung):
   - v18-Patches (v18 + v18.1–v18.8) → ein Block für Sektion 3
     "Ausgangslage" mit Line-Box-Modul, 2-Spalten-Layout,
     dunklem Hintergrund mit dezentem Glanz
   - v19-Patches (v19 + v19.1) → ein Block für die geschwungenen
     Pfeile in Sektion 6 (Mehrwert)
   - v20-Patches (v20 + v20.1–v20.6) → ein Block für Sektion 9
     Alternative "Warum BLUEBIRD" mit Bild oben, asymmetrischem
     2-Spalten-Layout (40/60), Schluss-Satz vollbreit
   - Tippfehler in v20.6 behoben (Komma-Position)
   - Obsolete Zwischenschritte entfernt
   
   ÄNDERUNGEN IN v16 (Bestand):
   - 16.1 Bullet-Style global von Strich (─) auf Chevron (›)
   - 16.2 / 16.4 Sektion 8 "Ehrliche Einordnung" — alle Schriften weiß
   - 16.5 Chevron-Bullets im Content-Columns-Modul +
          Bluebird-Look-Override für das Glas-Modul
   
   ÄNDERUNGEN IN v15 (Bestand):
   - 12px Headline-Versatz Sektion 2 & 9 behoben via
     transform: translateX(12px) auf .oc__row__text
   ============================================================ */


/* ============================================================
   0. DESIGN TOKENS
   ============================================================ */
:root {
    /* Bluebird-Farben */
    --bb-primary:        #0b5fa5;
    --bb-primary-light:  #006ba7;
    --bb-primary-hover:  #0d73c7;
    --bb-dark:           #0b1f3a;
    --bb-dark-2:         #1a2d42;
    --bb-dark-3:         #2d3748;
    --bb-off-white:      #f5f6f7;
    --bb-slate:          #5a6776;
    --bb-slate-2:        #8a96a6;
    --bb-slate-3:        #a8b0ba;
    --bb-slate-light:    #99acc2;
    --bb-white:          #ffffff;
    --bb-border:         #e1e4e8;

    /* Typografie */
    --bb-font-headline:  'Poppins', sans-serif;
    --bb-font-body:      'Inter', sans-serif;

    /* Layout */
    --bb-container-max:  1200px;
    --bb-container-pad:  30px;

    /* Spacings */
    --bb-section-pad:    80px;
    --bb-module-gap:     24px;
    --bb-section-gap:    0px;

    /* Typo-Größen */
    --bb-h2-size:        42px;
    --bb-h2-size-tablet: 34px;
    --bb-h2-size-mobile: 30px;

    /* Transitions */
    --bb-trans-fast:     0.2s ease;
    --bb-trans:          0.35s ease;
}


/* ============================================================
   1. BASIS / RESET / TYPOGRAFIE GLOBAL
   ============================================================ */
.body-wrapper,
main,
.dnd-section {
    overflow-x: hidden;
}

body, p, span, li {
    font-family: var(--bb-font-body) !important;
    line-height: 1.6;
    color: var(--bb-slate);
}

h1, h2, h3, h4, h5, h6,
.bb-headline, .bb-matrix-title, .bb-cta-headline {
    font-family: var(--bb-font-headline) !important;
    font-weight: 400 !important;
    color: var(--bb-dark) !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
}

h2, .bb-matrix-title, .bb-cta-headline {
    font-size: var(--bb-h2-size) !important;
    margin-bottom: 30px !important;
}

h3 {
    font-size: 22px !important;
    margin-bottom: 16px !important;
}

h6 {
    font-size: 20px !important;
    font-weight: 500 !important;
    margin-bottom: 12px !important;
}

/* Ausnahme: Hero-Headline bleibt weiß */
.bb-hero .bb-headline {
    color: var(--bb-white) !important;
    font-weight: 400 !important;
}


/* ============================================================
   2. LAYOUT-CONTAINER
   ============================================================ */
.bb-container {
    max-width: var(--bb-container-max) !important;
    margin: 0 auto !important;
    padding: 0 var(--bb-container-pad) !important;
    width: 100%;
    box-sizing: border-box;
}

/* Bluebird-Sektions-Hintergründe */
.bb-section-white {
    background-color: var(--bb-white) !important;
    padding: var(--bb-section-pad) 0;
}

.bb-section-grey {
    background-color: var(--bb-off-white) !important;
    padding: var(--bb-section-pad) 0;
    border-top: 1px solid var(--bb-border);
}

.bb-section-dark {
    background-color: var(--bb-dark) !important;
    padding: var(--bb-section-pad) 0;
    color: var(--bb-white);
}

.bb-section-dark h1,
.bb-section-dark h2,
.bb-section-dark h3,
.bb-section-dark h4,
.bb-section-dark h5,
.bb-section-dark h6 {
    color: var(--bb-white) !important;
}

.bb-section-dark p,
.bb-section-dark li {
    color: rgba(255, 255, 255, 0.85);
}

/* Erste weiße Sektion bekommt Abstand zum Hero */
.bb-section-white:first-of-type {
    margin-top: 60px;
}


/* ============================================================
   3. HEADER & NAVIGATION
   ============================================================ */
body header#header,
body .header {
    position: absolute !important;
    width: 100% !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 9999 !important;
    background: transparent !important;
    transition: background 0.4s ease, transform 0.3s ease !important;
}

.header--container--right {
    background-color: var(--bb-dark) !important;
    padding: 8px 5% !important;
}

.header__navigation {
    display: flex !important;
    justify-content: flex-end !important;
    padding-right: 5% !important;
    padding-top: 35px !important;
}

body #header.header--scrolled,
body .header.header--scrolled {
    position: fixed !important;
    background-color: var(--bb-dark) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

.hs-menu-children-wrapper,
.submenu {
    background-color: var(--bb-dark) !important;
    border-top: 2px solid var(--bb-primary) !important;
    min-width: 250px !important;
}


/* ============================================================
   4. HERO
   ============================================================ */
.bb-hero {
    padding-top: 160px !important;
}

.bb-hero-bg-image {
    background-position: 65% center;
}


/* ============================================================
   5. BUTTONS (Bluebird-Standard mit Wipe-Effekt)
   ============================================================ */
.bb-btn-primary,
.hs-button,
#bb-button-powerfix {
    display: inline-block !important;
    padding: 16px 40px !important;
    background-color: var(--bb-primary) !important;
    color: var(--bb-white) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
    transition: color var(--bb-trans) !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
}

.bb-btn-primary::before,
.hs-button::before,
#bb-button-powerfix::before {
    content: '' !important;
    position: absolute !important;
    top: -100% !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--bb-dark) !important;
    transition: top var(--bb-trans) !important;
    z-index: -1 !important;
}

.bb-btn-primary:hover::before,
.hs-button:hover::before,
#bb-button-powerfix:hover::before {
    top: 0 !important;
}

.bb-btn-primary:hover,
.hs-button:hover,
#bb-button-powerfix:hover {
    color: var(--bb-white) !important;
    transform: none !important;
    box-shadow: none !important;
    background-color: var(--bb-primary) !important;
}

/* Hero/QM spezifische Buttons */
#bb-qm-cta-btn,
#bb-hero-cta-btn {
    display: inline-block !important;
    padding: 14px 32px !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    color: var(--bb-white) !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    background: #2f6fa3 !important;
    border: none !important;
    box-shadow: none !important;
}

#bb-qm-cta-btn::before,
#bb-hero-cta-btn::before {
    content: '' !important;
    position: absolute !important;
    top: -100% !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--bb-dark) !important;
    transition: top var(--bb-trans) !important;
    z-index: -1 !important;
}

#bb-qm-cta-btn:hover::before,
#bb-hero-cta-btn:hover::before {
    top: 0 !important;
}

#bb-qm-cta-btn:hover,
#bb-hero-cta-btn:hover {
    color: var(--bb-white) !important;
    background: #2f6fa3 !important;
}


/* ============================================================
   6. OCEAN-CONTENT-MODULE
   Globale Vereinheitlichung aller Ocean-Module auf Bluebird-Raster
   ============================================================ */

/* ---- 6.0 ALLE OCEAN-MODULE: Container-Breite vereinheitlichen ---- */
.hs_cos_wrapper_type_module,
.hs_cos_wrapper_widget,
.dnd-module > div {
    max-width: 100%;
    box-sizing: border-box;
}

.dnd-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.dnd-section > .row-fluid-wrapper > .row-fluid,
.dnd-section > .row-fluid {
    max-width: var(--bb-container-max);
    margin: 0 auto !important;
    padding: 0 var(--bb-container-pad) !important;
    box-sizing: border-box;
    width: 100%;
}

.dnd-section .row-fluid-wrapper .row-fluid {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

.dnd-section .row-fluid > [class*="span"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.dnd-section .dnd-module + .dnd-module,
.dnd-section .dnd-row + .dnd-row {
    margin-top: var(--bb-module-gap);
}

.dnd-section {
    padding-top: var(--bb-section-pad);
    padding-bottom: var(--bb-section-pad);
}

/* Hero-Section: Full-Width-Padding-Override */
.dnd-section.dnd_area-row-0-force-full-width-section,
.dnd-section.dnd_area-row-0-padding,
.row-fluid-wrapper.dnd-section[class*="force-full-width"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* ---- 6.1 FANCY RICH TEXT ---- */
.fn__rich_text {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.fn__rich_text-el {
    max-width: 100% !important;
    width: 100% !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.fn__rich_text_int {
    max-width: 100% !important;
    width: 100% !important;
}

.fn__rich_text-el.ft--dark {
    color: var(--bb-white);
}

.fn__rich_text-el.ft--dark p {
    color: rgba(255, 255, 255, 0.85) !important;
}

.fn__rich_text-el.ft--dark h1,
.fn__rich_text-el.ft--dark h2,
.fn__rich_text-el.ft--dark h3 {
    color: var(--bb-white) !important;
}


/* ---- 6.2 LINE BOX — TITLE CONTENT ---- */
.fn__line__box {
    max-width: 100% !important;
    width: 100% !important;
}

.fn__line__box-el.light {
    background: transparent !important;
    padding: 0 !important;
}

.fn__line__box_wrapper {
    display: grid !important;
    gap: 40px !important;
}

.fn__line-title {
    position: relative;
    padding-top: 0;
    margin-bottom: 14px;
}

.fn__line-title::before {
    display: none !important;
    content: none !important;
}

.fn__line-title-el {
    font-family: var(--bb-font-headline) !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    color: var(--bb-dark) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.fn__line-content {
    color: var(--bb-slate);
    font-size: 15px;
    line-height: 1.6;
}

.fn__line-content p {
    margin-bottom: 10px;
}

/* Bullets innerhalb von Line-Box-Content */
.fn__line-content ul,
.fn__line-content ol,
.fn__line__box-el ul,
.fn__line__box-el ol,
.fn__line__box ul,
.fn__line__box ol,
.bb-core-areas ul,
.bb-trcs-capabilities ul {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
    list-style-position: outside !important;
    padding: 0 !important;
    margin: 0 !important;
}

.fn__line-content ul li,
.fn__line-content ol li,
.fn__line__box-el ul li,
.fn__line__box-el ol li,
.fn__line__box ul li,
.fn__line__box ol li,
.bb-core-areas ul li,
.bb-trcs-capabilities ul li {
    position: relative !important;
    padding-left: 22px !important;
    margin-bottom: 10px !important;
    line-height: 1.55 !important;
    color: var(--bb-slate) !important;
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
    background: none !important;
    background-image: none !important;
}

.fn__line-content ul li::marker,
.fn__line-content ol li::marker,
.fn__line__box-el ul li::marker,
.fn__line__box-el ol li::marker,
.fn__line__box ul li::marker,
.fn__line__box ol li::marker,
.bb-core-areas ul li::marker,
.bb-trcs-capabilities ul li::marker {
    content: none !important;
    display: none !important;
    font-size: 0 !important;
}

/* Eigener Bluebird-Bullet via ::before
   HINWEIS: Wird durch Block 16.1 (Chevron) überschrieben. */
.fn__line-content ul li::before,
.fn__line-content ol li::before,
.fn__line__box-el ul li::before,
.fn__line__box-el ol li::before,
.fn__line__box ul li::before,
.fn__line__box ol li::before,
.bb-core-areas ul li::before,
.bb-trcs-capabilities ul li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 12px !important;
    width: 10px !important;
    height: 2px !important;
    background: var(--bb-primary) !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
}

/* Falls Ocean zusätzliche Icon/SVG/Span-Elemente als Bullet rendert */
.fn__line-content ul li > svg,
.fn__line-content ul li > i,
.fn__line-content ul li > .check,
.fn__line-content ul li > span.icon,
.fn__line-content ul li > [class*="bullet"],
.fn__line-content ul li > [class*="check"],
.fn__line-content ul li > [class*="icon"]:first-child,
.fn__line__box-el ul li > svg,
.fn__line__box-el ul li > i,
.fn__line__box-el ul li > .check,
.fn__line__box-el ul li > [class*="bullet"],
.fn__line__box-el ul li > [class*="check"],
.fn__line__box-el ul li > [class*="icon"]:first-child {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}


/* ---- 6.3 FANCY LIST (Before/After Layout) ---- */
.fn__list__ba_before .fn__list__ba_header,
.fn__list__ba_before h2,
.fn__list__ba_before h3,
.fn__list__ba_before h4,
.fn__list__ba_before h5,
.fn__list__ba_before h6,
.fn__list .ba__header,
.fn__list .ba__header.before__header {
    font-family: var(--bb-font-body) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: var(--bb-slate) !important;
    margin-bottom: 20px !important;
}

.fn__list__ba_after .fn__list__ba_header,
.fn__list__ba_after h2,
.fn__list__ba_after h3,
.fn__list__ba_after h4,
.fn__list__ba_after h5,
.fn__list__ba_after h6,
.fn__list .ba__header.after__header {
    font-family: var(--bb-font-body) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: var(--bb-primary) !important;
    margin-bottom: 20px !important;
}

.fn__list__ba_before_item,
.ba__before__item {
    background: var(--bb-white) !important;
    border: 1px solid rgba(168, 176, 186, 0.3) !important;
    box-shadow: none !important;
    color: var(--bb-slate) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    padding: 18px 22px !important;
}

.fn__list__ba_after_item,
.ba__after__item {
    background: var(--bb-dark) !important;
    color: var(--bb-white) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    padding: 18px 22px !important;
    border: none !important;
}

/* Pfeil zwischen den Spalten — Ocean-Default ausblenden */
.fn__list .ba__arrow img,
.fn__list__ba_arrow img,
.fn__list .ba__arrow svg,
.fn__list__ba_arrow svg {
    display: none !important;
}

.fn__list .ba__arrow,
.fn__list__ba_arrow {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' fill='none'><path d='M2 10 H34 M28 4 L34 10 L28 16' stroke='%230b5fa5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 40px 20px !important;
    min-width: 40px !important;
    min-height: 20px !important;
    width: 40px !important;
    height: 20px !important;
    display: inline-block !important;
    color: transparent !important;
}

.fn__list .ba__arrow::before,
.fn__list .ba__arrow::after,
.fn__list__ba_arrow::before,
.fn__list__ba_arrow::after {
    display: none !important;
    content: none !important;
}

.fn__list .list__icon {
    color: var(--bb-primary) !important;
    fill: var(--bb-primary) !important;
}


/* ---- 6.4 TILES FLEX ---- */
.tiles__container,
.bb-challenges-tiles.tiles__container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    counter-reset: tile;
}

.bb-challenges-tiles .tile_wrapper,
.tiles__container .tile_wrapper {
    background: var(--bb-dark-2) !important;
    padding: 36px 32px !important;
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    min-height: 180px;
    counter-increment: tile;
}

.bb-challenges-tiles .tiles__step_number,
.tiles__container .tiles__step_number {
    display: none !important;
}

.bb-challenges-tiles .tile_wrapper::before,
.tiles__container .tile_wrapper::before {
    content: counter(tile, decimal-leading-zero);
    display: block !important;
    font-family: var(--bb-font-headline) !important;
    font-size: 40px !important;
    font-weight: 400 !important;
    color: var(--bb-primary-light) !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.bb-challenges-tiles .tile.front__face,
.bb-challenges-tiles .tile.front__face.rx,
.tiles__container .tile.front__face {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
}

.bb-challenges-tiles .tile.front__face p,
.tiles__container .tile.front__face p {
    color: rgba(255, 255, 255, 0.88) !important;
    margin: 0 !important;
    text-align: left !important;
}


/* ---- 6.5 CONTENT COLUMN(S) ---- */
.content__columns,
.fn__content__columns {
    max-width: 100% !important;
    width: 100% !important;
}

.content__columns .row-fluid,
.fn__content__columns .row-fluid {
    display: flex;
    align-items: flex-start;
    gap: 48px;
}

.content__columns img,
.fn__content__columns img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

.content__columns .rich-text,
.fn__content__columns .rich-text {
    line-height: 1.65;
}


/* ---- 6.6 ACCORDION ---- */
.fn__accordion {
    max-width: 100% !important;
    width: 100% !important;
}

.fn__accordion__wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid rgba(90, 103, 118, 0.15);
}

.fn__ac__single {
    border-bottom: 1px solid rgba(90, 103, 118, 0.15);
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.fn__ac__question {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
    padding: 22px 0 !important;
    text-align: left !important;
    cursor: pointer;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 24px !important;
    color: var(--bb-dark) !important;
    font-family: var(--bb-font-headline) !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    transition: color var(--bb-trans-fast) !important;
}

.fn__ac__question:hover {
    color: var(--bb-primary) !important;
}

.fn__ac__question_heading {
    margin: 0 !important;
    padding: 0 !important;
}

.fn__ac__question_heading h6 {
    font-size: 17px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
}

.ac__arrow {
    flex-shrink: 0 !important;
    color: var(--bb-primary) !important;
    transition: transform var(--bb-trans-fast) !important;
}

.ac__arrow svg {
    stroke: var(--bb-primary) !important;
    fill: none !important;
    width: 20px !important;
    height: 20px !important;
}

.fn__ac__active .ac__arrow,
.fn__ac__single[aria-expanded="true"] .ac__arrow {
    transform: rotate(45deg);
}

.fn__ac__answer {
    overflow: hidden;
    background: transparent !important;
    padding: 0 !important;
}

.fn__ac__answer > * {
    padding: 4px 0 22px 0 !important;
    color: var(--bb-slate) !important;
    line-height: 1.65 !important;
    font-size: 15px !important;
    max-width: 90%;
}

.fn__ac__active,
.fn__ac__single.fn__ac__active {
    background: transparent !important;
}


/* ---- 6.7 GALLERY IMAGES/VIDEOS ---- */
.fn__gallery,
.fn__gallery__classic,
.fn__gallery__square {
    max-width: 100% !important;
    width: 100% !important;
}

.fn__gallery__wrapper {
    display: grid !important;
    gap: 16px !important;
}

.fn__gallery__item {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 4px;
    background: var(--bb-off-white);
}

.fn__gallery__item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s ease;
}

.fn__gallery__item:hover img {
    transform: scale(1.03);
}


/* ---- 6.8 TEAM MEMBER ---- */
.fn__team,
.fn__team__fancy,
.fn__team__plain {
    max-width: 100% !important;
    width: 100% !important;
}

.fn__team__wrapper {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px !important;
}

.fn__team__item {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.fn__team__item img,
.fn__team__image img {
    width: 100% !important;
    aspect-ratio: 3 / 4 !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 4px !important;
    margin-bottom: 18px !important;
    filter: grayscale(30%);
    transition: filter var(--bb-trans);
}

.fn__team__item:hover img {
    filter: grayscale(0%);
}

.fn__team__name,
.fn__team__item h3,
.fn__team__item h4 {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--bb-dark) !important;
    margin-bottom: 4px !important;
}

.fn__team__title,
.fn__team__job {
    font-size: 14px !important;
    color: var(--bb-slate) !important;
    margin-bottom: 14px !important;
}

.fn__team__social,
.fn__team__socials {
    display: flex;
    gap: 12px;
}

.fn__team__social a,
.fn__team__socials a {
    color: var(--bb-primary) !important;
    transition: color var(--bb-trans-fast);
}

.fn__team__social a:hover,
.fn__team__socials a:hover {
    color: var(--bb-primary-hover) !important;
}


/* ---- 6.9 OCEAN CTA ---- */
.fn__cta,
.fn__cta_wrapper {
    max-width: 100% !important;
    width: 100% !important;
}

.fn__cta.cta__dark,
.fn__cta[data-bg="dark"] {
    background: var(--bb-dark) !important;
    color: var(--bb-white) !important;
    padding: 80px var(--bb-container-pad) !important;
    text-align: center;
}

.fn__cta.cta__dark h1,
.fn__cta.cta__dark h2,
.fn__cta.cta__dark h3 {
    color: var(--bb-white) !important;
}

.fn__cta.cta__dark p {
    color: rgba(255, 255, 255, 0.82) !important;
    max-width: 720px;
    margin: 0 auto 32px auto;
    font-size: 17px;
    line-height: 1.6;
}


/* ---- 6.10 META-LABELS / TAG-LABELS ---- */
.hdg__ocean_content-title-tag {
    font-family: var(--bb-font-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: var(--bb-primary) !important;
    margin-bottom: 8px !important;
}

.hdg__ocean_content-divider {
    width: 40px !important;
    height: 2px !important;
    background-color: var(--bb-primary) !important;
    border: none !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
}

.bb-section-dark .hdg__ocean_content-title-tag,
section[style*="0b1f3a"] .hdg__ocean_content-title-tag,
section[style*="#0b1f3a"] .hdg__ocean_content-title-tag {
    color: var(--bb-slate-light) !important;
}

.bb-section-dark .hdg__ocean_content-divider,
section[style*="0b1f3a"] .hdg__ocean_content-divider,
section[style*="#0b1f3a"] .hdg__ocean_content-divider {
    background-color: var(--bb-slate-light) !important;
}

.hdg__ocean_wrap,
.hdg__ocean_content,
.hdg__ocean_content-title,
.hdg__ocean_content_head {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ============================================================
   7. BLUEBIRD-DESIGN-PATTERNS
   ============================================================ */

/* ---- 7.1 KICKER ---- */

/* === DOM-Typ B: Content Columns mit oc__row__text-tag === */
.oc__row__text-tag,
span.oc__row__text-tag {
    font-family: var(--bb-font-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: var(--bb-primary) !important;
    display: block !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

.ft--dark .oc__row__text-tag,
.oc__row__text-cont.ft--dark .oc__row__text-tag,
[class*="cc__dark"] .oc__row__text-tag {
    color: var(--bb-slate-light) !important;
}


/* === DOM-Typ A: Fancy Rich Text, erstes <p> === */
.fn__rich_text_int > p:first-child,
.fn__rich_text-el > p:first-child,
.fn__rich_text > .fn__rich_text-el > .fn__rich_text_int > p:first-child {
    font-family: var(--bb-font-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: var(--bb-primary) !important;
    display: block !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

.fn__rich_text_int > p:first-child > span,
.fn__rich_text_int > p:first-child span[style],
.fn__rich_text-el > p:first-child > span,
.fn__rich_text-el > p:first-child span[style] {
    font-family: var(--bb-font-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: inherit !important;
    background: transparent !important;
}

.ft--dark .fn__rich_text_int > p:first-child,
.ft--dark .fn__rich_text-el > p:first-child,
.fn__rich_text-el.ft--dark > p:first-child,
.fn__rich_text-el.ft--dark > .fn__rich_text_int > p:first-child {
    color: var(--bb-slate-light) !important;
}

.ft--dark .fn__rich_text_int > p:first-child > span,
.ft--dark .fn__rich_text_int > p:first-child span[style],
.ft--dark .fn__rich_text-el > p:first-child > span,
.fn__rich_text-el.ft--dark > p:first-child > span,
.fn__rich_text-el.ft--dark > p:first-child span[style] {
    color: var(--bb-slate-light) !important;
}


/* === Schutz: Nur wenn Fancy-Rich-Text mehr als einen Absatz hat === */
.fn__rich_text_int > p:only-child,
.fn__rich_text-el > p:only-child {
    font-family: var(--bb-font-body) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--bb-slate) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.fn__rich_text_int > p:only-child > span,
.fn__rich_text_int > p:only-child span[style],
.fn__rich_text-el > p:only-child > span,
.fn__rich_text-el > p:only-child span[style] {
    font-family: var(--bb-font-body) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}


/* === Explizite .kicker-Klasse (Legacy-Weg, Fallback) === */
.kicker,
p.kicker,
.fn__rich_text .kicker {
    font-family: var(--bb-font-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: var(--bb-primary) !important;
    margin: 0 0 14px 0 !important;
    display: block !important;
    line-height: 1.4 !important;
}

.ft--dark .kicker {
    color: var(--bb-slate-light) !important;
}


/* === Kicker → H2 Abstand einheitlich === */
.oc__row__text-tag + h2,
.oc__row__text-tag + .oc__row__text-h,
.fn__rich_text_int > p:first-child + h2,
.fn__rich_text-el > p:first-child + h2,
.kicker + h2 {
    margin-top: 0 !important;
}


/* ---- 7.2 BLUEBIRD-BULLETS ---- */

.bb-intro ul, .bb-intro ol,
.bb-what-is-trcs ul, .bb-what-is-trcs ol,
.bb-relevance ul, .bb-relevance ol,
.bb-why-bluebird ul, .bb-why-bluebird ol,
.bb-limits ul, .bb-limits ol,
.bb-trcs-capabilities ul, .bb-trcs-capabilities ol,
.bb-core-areas ul, .bb-core-areas ol,
.fn__rich_text ul,
.fn__rich_text ol,
.content__columns ul,
.content__columns ol,
.fn__content__columns ul,
.fn__content__columns ol,
.bb-list {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
}

.bb-intro ul li, .bb-intro ol li,
.bb-what-is-trcs ul li, .bb-what-is-trcs ol li,
.bb-relevance ul li, .bb-relevance ol li,
.bb-why-bluebird ul li, .bb-why-bluebird ol li,
.bb-limits ul li, .bb-limits ol li,
.bb-trcs-capabilities ul li, .bb-trcs-capabilities ol li,
.bb-core-areas ul li, .bb-core-areas ol li,
.fn__rich_text ul li,
.fn__rich_text ol li,
.content__columns ul li,
.content__columns ol li,
.fn__content__columns ul li,
.fn__content__columns ol li,
.bb-list li {
    position: relative !important;
    padding-left: 22px !important;
    margin-bottom: 10px !important;
    line-height: 1.55 !important;
    color: var(--bb-slate) !important;
    list-style: none !important;
    background: none !important;
    background-image: none !important;
}

.bb-intro ul li::marker, .bb-intro ol li::marker,
.bb-what-is-trcs ul li::marker, .bb-what-is-trcs ol li::marker,
.bb-relevance ul li::marker, .bb-relevance ol li::marker,
.bb-why-bluebird ul li::marker, .bb-why-bluebird ol li::marker,
.bb-limits ul li::marker, .bb-limits ol li::marker,
.fn__rich_text ul li::marker,
.fn__rich_text ol li::marker,
.content__columns ul li::marker,
.content__columns ol li::marker,
.fn__content__columns ul li::marker,
.fn__content__columns ol li::marker,
.bb-list li::marker {
    content: none !important;
    display: none !important;
}

/* Bluebird-Strich als Bullet (wird in Block 16.1 durch Chevron überschrieben) */
.bb-intro ul li::before, .bb-intro ol li::before,
.bb-what-is-trcs ul li::before, .bb-what-is-trcs ol li::before,
.bb-relevance ul li::before, .bb-relevance ol li::before,
.bb-why-bluebird ul li::before, .bb-why-bluebird ol li::before,
.bb-trcs-capabilities ul li::before, .bb-trcs-capabilities ol li::before,
.bb-core-areas ul li::before, .bb-core-areas ol li::before,
.fn__rich_text ul li::before,
.fn__rich_text ol li::before,
.content__columns ul li::before,
.content__columns ol li::before,
.fn__content__columns ul li::before,
.fn__content__columns ol li::before,
.bb-list li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 12px !important;
    width: 10px !important;
    height: 2px !important;
    background: var(--bb-primary) !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.bb-section-dark .bb-list li::before,
.bb-section-dark .fn__rich_text ul li::before,
.bb-section-dark .fn__rich_text ol li::before,
.bb-limits ul li::before,
.bb-limits ol li::before,
.ft--dark ul li::before,
.ft--dark ol li::before {
    background: var(--bb-primary-light) !important;
}

.bb-section-dark .fn__rich_text ul li,
.bb-section-dark .fn__rich_text ol li,
.bb-limits ul li,
.bb-limits ol li,
.ft--dark ul li,
.ft--dark ol li {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Alternative: Check-Variante */
.bb-list-check {
    list-style: none !important;
    padding: 0 !important;
}

.bb-list-check li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
}

.bb-list-check li::before {
    content: "✓" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    color: var(--bb-primary) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
}


/* ---- 7.3 CHECKMARK-ICONS ---- */
.bb-check-item {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 15px !important;
    transition: all 0.3s ease !important;
}

.bb-check-icon {
    background-color: var(--bb-primary) !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 15px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 10px rgba(11, 95, 165, 0.2) !important;
    transition: transform 0.3s ease !important;
}

.bb-check-icon svg {
    fill: var(--bb-white) !important;
    width: 16px !important;
    height: 16px !important;
}

.bb-check-item:hover .bb-check-icon {
    transform: scale(1.15) !important;
    background-color: var(--bb-primary-hover) !important;
}

.bb-check-item span {
    font-weight: 600 !important;
    color: var(--bb-dark) !important;
}


/* ============================================================
   8. SEKTIONS-SPEZIFISCHE REGELN (TRCS-Seite)
   ============================================================ */

/* ---- 8.1 MODULABSTAND ZWISCHEN SECTIONS ---- */

.dnd-section:has(.bb-what-is-trcs-intro),
.dnd-section:has(.bb-challenges-intro),
.dnd-section:has(.bb-trcs-capabilities-intro),
.dnd-section:has(.bb-core-areas-intro),
.dnd-section:has(.bb-benefits-intro),
.dnd-section:has(.bb-faq-intro),
.dnd-section:has(.bb-how-we-work-intro),
.dnd-section:has(.bb-experts-intro) {
    padding-bottom: 80px !important;
}

.dnd-section:has(.bb-what-is-trcs-intro) + .dnd-section,
.dnd-section:has(.bb-challenges-intro) + .dnd-section,
.dnd-section:has(.bb-trcs-capabilities-intro) + .dnd-section,
.dnd-section:has(.bb-core-areas-intro) + .dnd-section,
.dnd-section:has(.bb-benefits-intro) + .dnd-section,
.dnd-section:has(.bb-faq-intro) + .dnd-section,
.dnd-section:has(.bb-how-we-work-intro) + .dnd-section,
.dnd-section:has(.bb-experts-intro) + .dnd-section {
    padding-top: 80px !important;
}

.bb-intro,
.bb-what-is-trcs-intro,
.bb-challenges-intro,
.bb-trcs-capabilities-intro,
.bb-core-areas-intro,
.bb-benefits-intro,
.bb-faq-intro,
.bb-how-we-work-intro,
.bb-experts-intro,
.bb-relevance,
.bb-limits,
.bb-why-bluebird,
.bb-what-is-trcs {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.bb-faq,
.bb-challenges-tiles,
.bb-trcs-capabilities,
.bb-core-areas,
.bb-benefits-list,
.bb-how-we-work-gallery,
.bb-experts {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.dnd-section .fn__rich_text,
.dnd-section .fn__line__box,
.dnd-section .fn__accordion,
.dnd-section .fn__list,
.dnd-section .fn__gallery,
.dnd-section .fn__team,
.dnd-section .content__columns,
.dnd-section .oc__row__columns-wpp,
.dnd-section .tiles__container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* ---- 8.2 SEKTION 2 "Was ist TRCS" ---- */
.bb-what-is-trcs .row-fluid,
.bb-what-is-trcs .content__columns .row-fluid,
.bb-what-is-trcs .oc__row__columns-wpp .row-fluid,
.bb-what-is-trcs .oc__row__wrapper {
    align-items: flex-start !important;
}

.bb-what-is-trcs .oc__row__image {
    align-self: flex-start !important;
    margin-top: 0 !important;
}

.bb-what-is-trcs .oc__row__image-container {
    aspect-ratio: 3 / 4 !important;
    overflow: hidden !important;
    border-radius: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
}

.bb-what-is-trcs .oc__row__image-container-el {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 4px !important;
}


/* ---- 8.2b GLOBAL: Content Columns Spaltenabstand ---- */
.bb-what-is-trcs .oc__row__columns-wpp,
.bb-relevance .oc__row__columns-wpp,
.bb-why-bluebird .oc__row__columns-wpp,
.bb-what-is-trcs .oc__row__wrapper,
.bb-relevance .oc__row__wrapper,
.bb-why-bluebird .oc__row__wrapper,
.bb-what-is-trcs .content__columns,
.bb-relevance .content__columns,
.bb-why-bluebird .content__columns {
    gap: 48px !important;
    column-gap: 48px !important;
}

.bb-what-is-trcs .row-fluid,
.bb-relevance .row-fluid,
.bb-why-bluebird .row-fluid {
    gap: 48px !important;
    column-gap: 48px !important;
}


/* ---- 8.3 SEKTION 3 (Tiles-Variante — Legacy-Fallback) ----
   HINWEIS: Sektion 3 nutzt aktuell das Line-Box-Modul
   (siehe Block 18). Dieser Block bleibt für Kompatibilität,
   falls auf einer anderen Seite das Tiles-Modul genutzt wird.
*/
.tiles__container,
.bb-challenges-tiles.tiles__container {
    background: var(--bb-dark) !important;
    gap: 1px !important;
}

.bb-challenges-tiles .tile_wrapper,
.tiles__container .tile_wrapper {
    background: var(--bb-dark-2) !important;
    padding: 40px 36px !important;
    box-shadow: inset 0 0 0 0 transparent;
}

.bb-challenges-intro .fn__rich_text_int > p:first-child,
.bb-challenges-intro .fn__rich_text-el > p:first-child,
.bb-challenges-intro p:first-of-type,
.bb-challenges-intro .fn__rich_text_int > p:first-child > span,
.bb-challenges-intro p:first-of-type > span {
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    line-height: 1.4 !important;
}


/* ---- 8.4 SEKTION 6 "Mehrwert" Before/After ----
   HINWEIS: Pfeil-SVG wurde in Block 19 (geschwungener Pfeil) ersetzt.
*/

.bb-benefits-list,
.before__after_list,
.before__after_wrapper,
.bb-benefits-list .before__after_wrapper,
.bb-benefits-list .before__after_wrapper.arrow {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
}

.bb-benefits-list .before__after_item,
.before__after_item {
    background: transparent !important;
    display: flex !important;
    align-items: stretch !important;
    gap: 56px !important;
    margin-bottom: 14px !important;
    position: relative;
}

.bb-benefits-list .before__after_before,
.before__after_before {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: var(--bb-slate) !important;
    border: 1px solid var(--bb-border) !important;
    border-radius: 6px !important;
    padding: 20px 24px !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    min-height: 76px !important;
}

.bb-benefits-list .before__after_before *,
.before__after_before * {
    color: var(--bb-slate) !important;
    background: transparent !important;
}

.bb-benefits-list .before__after_after,
.before__after_after {
    background: var(--bb-dark-2) !important;
    background-color: var(--bb-dark-2) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 20px 24px !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    min-height: 76px !important;
}

.bb-benefits-list .before__after_after *,
.before__after_after * {
    color: #ffffff !important;
    background: transparent !important;
}

.bb-benefits-list .before__after_before::before,
.bb-benefits-list .before__after_before::after,
.bb-benefits-list .before__after_after::before,
.bb-benefits-list .before__after_after::after,
.before__after_before::before,
.before__after_before::after,
.before__after_after::before,
.before__after_after::after {
    display: none !important;
    content: none !important;
}

.bb-benefits-list .before__after_item::after,
.before__after_item::after {
    content: none !important;
    display: none !important;
}

/* Pfeil-Container — Pfeil-SVG kommt aus Block 19 (geschwungen) */
.bb-benefits-list .before__after_item:has(.before__after_before)::after,
.before__after_item:has(.before__after_before)::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.bb-benefits-list .before__after_item:has(.before__after_heading),
.before__after_item:has(.before__after_heading) {
    margin-bottom: 8px !important;
}

.bb-benefits-list .before__after_item:has(.before__after_heading) .before__after_heading,
.before__after_item:has(.before__after_heading) .before__after_heading {
    flex: 1 !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    min-height: auto !important;
}

.bb-benefits-list .before__after_heading h2,
.bb-benefits-list .before__after_heading h3,
.bb-benefits-list .before__after_heading h4,
.before__after_heading h2,
.before__after_heading h3,
.before__after_heading h4 {
    font-family: var(--bb-font-body) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: var(--bb-slate) !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.bb-benefits-list .before__after_header,
.before__after_header,
.bb-benefits-list [class*="__header"] {
    color: var(--bb-slate) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 20px !important;
    background: transparent !important;
}

.fn__list__ba_before,
.fn__list__ba_after,
.fn__list .ba__before,
.fn__list .ba__after,
.fn__list_ba_before,
.fn__list_ba_after {
    all: unset;
}


/* ---- 8.5 SEKTION 4 "Funktionsumfang" ---- */
.bb-what-is-trcs-intro .row-fluid,
.bb-what-is-trcs-intro .oc__row__columns-wpp .row-fluid,
.bb-what-is-trcs-intro .oc__row__wrapper,
.bb-trcs-capabilities-intro .row-fluid,
.bb-trcs-capabilities-intro .oc__row__columns-wpp .row-fluid,
.bb-trcs-capabilities-intro .oc__row__wrapper {
    align-items: flex-start !important;
}

.bb-what-is-trcs-intro img,
.bb-trcs-capabilities-intro img {
    margin-top: 0 !important;
    align-self: flex-start !important;
    object-fit: cover !important;
}

.bb-what-is-trcs-intro .oc__row__image,
.bb-what-is-trcs-intro .oc__row__image-container,
.bb-trcs-capabilities-intro .oc__row__image,
.bb-trcs-capabilities-intro .oc__row__image-container {
    align-self: flex-start !important;
    margin-top: 0 !important;
}

.dnd-section:has(.bb-trcs-capabilities) {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.dnd-section:has(.bb-trcs-capabilities-intro) + .dnd-section:has(.bb-trcs-capabilities) {
    padding-top: 50px !important;
}

.dnd-section:has(.bb-trcs-capabilities) + .dnd-section:has(.bb-trcs-capabilities) {
    padding-bottom: 100px !important;
}


/* === Content-Columns-Module — 12px-Versatz Korrektur === */

.bb-what-is-trcs.oc__row__columns-wpp,
.bb-relevance.oc__row__columns-wpp,
.bb-why-bluebird.oc__row__columns-wpp,
.bb-trcs-capabilities-intro.oc__row__columns-wpp {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.bb-what-is-trcs .oc__row__text,
.bb-why-bluebird .oc__row__text,
.bb-relevance .oc__row__text,
.bb-trcs-capabilities-intro .oc__row__text {
    transform: translateX(12px) !important;
}

.bb-relevance .oc__row__image {
    transform: translateX(12px) !important;
}

.bb-what-is-trcs .oc__row__image,
.bb-relevance .oc__row__image,
.bb-why-bluebird .oc__row__image {
    align-self: flex-start !important;
    margin-top: 0 !important;
}

.bb-what-is-trcs .oc__row__image-container,
.bb-relevance .oc__row__image-container,
.bb-why-bluebird .oc__row__image-container {
    aspect-ratio: 3 / 4 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
    border-radius: 4px !important;
    display: block !important;
}

.bb-what-is-trcs .oc__row__image-container img,
.bb-what-is-trcs .oc__row__image-container-el,
.bb-relevance .oc__row__image-container img,
.bb-relevance .oc__row__image-container-el,
.bb-why-bluebird .oc__row__image-container img,
.bb-why-bluebird .oc__row__image-container-el {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 4px !important;
}

.bb-what-is-trcs .oc__row__columns-wpp,
.bb-relevance .oc__row__columns-wpp,
.bb-why-bluebird .oc__row__columns-wpp,
.bb-what-is-trcs .oc__row__wrapper,
.bb-relevance .oc__row__wrapper,
.bb-why-bluebird .oc__row__wrapper,
.bb-what-is-trcs .content__columns,
.bb-relevance .content__columns,
.bb-why-bluebird .content__columns {
    gap: 64px !important;
    column-gap: 64px !important;
}

.bb-what-is-trcs .row-fluid,
.bb-relevance .row-fluid,
.bb-why-bluebird .row-fluid {
    gap: 64px !important;
    column-gap: 64px !important;
}

.bb-why-bluebird img {
    flex: 0 0 auto !important;
    min-height: unset !important;
}


/* ---- 8.7 SEKTION 8 "Grenzen" ---- */
.dnd-section:has(.bb-limits) {
    padding-top: 170px !important;
    padding-bottom: 170px !important;
}


/* ---- 8.8 SEKTION 8b FAQ ---- */
.bb-faq .fn__accordion__wrapper {
    border-top: 1px solid rgba(90, 103, 118, 0.15);
}

.bb-faq .fn__ac__single {
    padding: 0 !important;
    border-bottom: 1px solid rgba(90, 103, 118, 0.15);
}

.bb-faq .fn__ac__question {
    padding: 24px 0 !important;
}

.bb-faq .fn__ac__active .fn__ac__answer > *,
.bb-faq .fn__ac__single[aria-expanded="true"] .fn__ac__answer > * {
    padding: 0 0 28px 0 !important;
}


/* ---- 8.10 SEKTION 10 Gallery ---- */
.bb-how-we-work-gallery,
.bb-how-we-work-gallery .fn__gallery,
.bb-how-we-work-gallery .fn__gallery__wrapper {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.bb-how-we-work-gallery .fn__gallery__item,
.dnd-section:has(.bb-how-we-work-intro) + .dnd-section .fn__gallery__item {
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
}

.bb-how-we-work-gallery .fn__gallery__item img,
.dnd-section:has(.bb-how-we-work-intro) + .dnd-section .fn__gallery__item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.fn__gallery__wrapper .fn__gallery__item {
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
}

.dnd-section:has(.bb-how-we-work-intro) {
    padding-bottom: 0 !important;
}

.dnd-section:has(.bb-how-we-work-intro) + .dnd-section {
    padding-top: 24px !important;
}


/* ---- 8.11 SEKTION 11 Experten ---- */
.bb-experts .fn__team__member__image,
.bb-experts .fn__team__member .fn__team__member__image {
    aspect-ratio: 5 / 7 !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    overflow: hidden !important;
    border-radius: 4px !important;
    display: block !important;
}

.bb-experts .fn__team__member__image-el,
.bb-experts .fn__team__member__image img,
.bb-experts .fn__team__member img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    aspect-ratio: 5 / 7 !important;
    display: block !important;
    filter: grayscale(100%) !important;
    transition: filter 0.4s ease !important;
    border-radius: 4px !important;
}

.bb-experts .fn__team__member__a:hover img,
.bb-experts .fn__team__member__a:hover .fn__team__member__image-el,
.bb-experts .fn__team__member__a:hover .fn__team__member__image img {
    filter: grayscale(0%) !important;
}

.bb-experts .fn__team__member:hover .fn__team__member__a:not(:hover) img,
.bb-experts .fn__team__member:hover .fn__team__member__a:not(:hover) .fn__team__member__image-el,
.bb-experts .fn__team__member:hover .fn__team__member__a:not(:hover) .fn__team__member__image img {
    filter: grayscale(100%) !important;
}


/* ---- 8.12 SEKTION 12 CTA ---- */
.fn__cta.cta__dark,
.fn__cta[data-bg="dark"],
.bb-final-cta {
    background: var(--bb-dark) !important;
    background-color: var(--bb-dark) !important;
    background-image: none !important;
    padding-top: 100px !important;
    padding-bottom: 100px !important;
    border-bottom: none !important;
    margin-bottom: 0;
}

.bb-final-cta::before,
.fn__cta.cta__dark::before,
.bb-final-cta > div::before {
    display: none !important;
    content: none !important;
    background: none !important;
}

.bb-final-cta *,
.fn__cta.cta__dark *,
.fn__cta[data-bg="dark"] * {
    color: #ffffff !important;
}

.bb-final-cta .fn__rich_text_int > p:first-child,
.bb-final-cta p:first-of-type,
.bb-final-cta .fn__rich_text_int > p:first-child > span {
    color: rgba(255, 255, 255, 0.75) !important;
}

.bb-final-cta .btn,
.bb-final-cta a.btn,
.bb-final-cta button,
.bb-final-cta .fn__cta_button,
.bb-final-cta [class*="button"],
.fn__cta.cta__dark .btn,
.fn__cta.cta__dark a.btn {
    background: var(--bb-primary) !important;
    background-color: var(--bb-primary) !important;
    color: #ffffff !important;
    border: 2px solid var(--bb-primary) !important;
    padding: 12px 32px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.bb-final-cta .btn *,
.bb-final-cta a.btn *,
.bb-final-cta button *,
.fn__cta.cta__dark .btn *,
.fn__cta.cta__dark a.btn * {
    color: #ffffff !important;
}

.bb-final-cta .btn:hover,
.bb-final-cta a.btn:hover,
.fn__cta.cta__dark .btn:hover,
.fn__cta.cta__dark a.btn:hover {
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

.bb-final-cta .btn:hover *,
.bb-final-cta a.btn:hover *,
.fn__cta.cta__dark .btn:hover * {
    color: #ffffff !important;
}


/* ---- 8.13 FOOTER ---- */
footer,
.footer,
[class*="footer"]:not([class*="wrapper"]):not([class*="item"]) {
    background: #080f21 !important;
    background-color: #080f21 !important;
}


/* ---- 8.14 BREADCRUMB ---- */
.link__breadcrumb {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.link__breadcrumb {
    margin-left: -8px !important;
}

.link__breadcrumb ol,
.link__breadcrumb ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.link__breadcrumb li,
.link__breadcrumb a,
.link__breadcrumb span {
    font-family: var(--bb-font-body) !important;
    font-size: 13px !important;
    color: var(--bb-slate) !important;
}

.link__breadcrumb a:hover {
    color: var(--bb-primary) !important;
}

.hs-breadcrumb-menu,
.hs-breadcrumb-menu-wrapper,
.breadcrumb,
nav[aria-label="breadcrumb"] {
    max-width: var(--bb-container-max) !important;
    margin: 0 auto !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
    padding-left: var(--bb-container-pad) !important;
    padding-right: var(--bb-container-pad) !important;
    box-sizing: border-box;
    width: 100%;
}


/* ---- 8.15 ABSCHLUSSSÄTZE näher an Content (Sektion 3 und 5) ---- */

.dnd-section:has(.bb-challenges-outro),
.dnd-section:has(.bb-core-areas-outro) {
    padding-top: 20px !important;
}

.dnd-section:has(.tiles__container):has(+ .dnd-section:has(.bb-challenges-outro)),
.dnd-section:has(.bb-cards-image-top):has(+ .dnd-section:has(.bb-core-areas-outro)) {
    padding-bottom: 20px !important;
}

.dnd-section + .dnd-section:has(.bb-challenges-outro),
.dnd-section + .dnd-section:has(.bb-core-areas-outro) {
    padding-top: 20px !important;
}


/* ============================================================
   9. CUSTOM-MODUL: BLUEBIRD CARDS WITH IMAGE TOP
   ============================================================ */

.bb-cards-image-top {
    width: 100%;
}

.bb-cards-image-top__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.bb-cards-image-top__card {
    background: var(--bb-off-white);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.bb-cards-image-top__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.bb-cards-image-top__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bb-cards-image-top__body {
    padding: 28px 32px 32px;
    flex: 1;
}

.bb-cards-image-top__title {
    font-family: var(--bb-font-headline);
    font-size: 20px;
    font-weight: 500;
    color: var(--bb-dark);
    margin: 0 0 16px 0;
    line-height: 1.3;
}

.bb-cards-image-top__bullets ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.bb-cards-image-top__bullets ul li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 10px;
    line-height: 1.55;
    color: var(--bb-slate);
    list-style: none;
}

.bb-cards-image-top__bullets ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 10px;
    height: 2px;
    background: var(--bb-primary);
}

.bb-cards-image-top__bullets ul li::marker {
    content: none;
    display: none;
}

@media (max-width: 767px) {
    .bb-cards-image-top__grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .bb-cards-image-top__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .bb-cards-image-top__card:nth-child(3) {
        grid-column: 1 / -1;
    }
}


/* ============================================================
   9b. CUSTOM-HTML-MODULE (Legacy)
   ============================================================ */

/* ---- 9.1 Plattform-Karten ---- */
.bb-platform-comparison-grid {
    display: flex;
    gap: 25px;
    padding-top: 40px;
    align-items: stretch;
}

.bb-card {
    flex: 1;
    background: var(--bb-white) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease !important;
    border: 1px solid #f0f0f0 !important;
}

.bb-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1) !important;
}

.bb-card h3 {
    font-weight: 600 !important;
}

.bb-card-accent { height: 6px; width: 100%; }
.bb-card-accent.green  { background: #76c043; }
.bb-card-accent.blue   { background: var(--bb-primary); }
.bb-card-accent.purple { background: #a64d79; }

.bb-card-body {
    padding: 30px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.bb-vendor-label {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--bb-dark);
    font-size: 13px;
    margin-bottom: 15px;
}

.bb-card-intro {
    font-size: 14px;
    color: var(--bb-slate);
    line-height: 1.5;
    margin-bottom: 25px;
}

.bb-feature-set { margin-bottom: 20px; }

.bb-feature-title {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--bb-primary);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.bb-feature-set ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.bb-feature-set li {
    font-size: 13px !important;
    color: #33475b !important;
    padding-left: 20px !important;
    position: relative !important;
    margin-bottom: 10px !important;
    line-height: 1.4 !important;
}

.bb-feature-set li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--bb-primary);
    font-weight: bold;
}

.bb-card-footer {
    margin-top: auto;
    padding: 20px;
    border-top: 1px solid var(--bb-off-white);
    font-size: 11px;
    color: var(--bb-slate-light);
    font-weight: 600;
    text-align: center;
}


/* ---- 9.2 Weitere Lösungen ---- */
.bb-single-solutions {
    margin-top: 60px;
    padding: 40px;
    background: var(--bb-white);
    border-radius: 12px;
    border: 1px solid var(--bb-border);
    text-align: center;
}

.bb-single-title {
    font-size: 13px;
    text-transform: uppercase;
    color: var(--bb-slate-light);
    letter-spacing: 2px;
    margin-bottom: 30px;
    font-weight: 700;
}

.bb-single-grid {
    display: flex;
    justify-content: space-around;
    gap: 30px;
}

.bb-single-item strong {
    display: block;
    color: var(--bb-dark);
    font-size: 18px;
    margin-bottom: 5px;
}

.bb-single-item span {
    font-size: 13px;
    color: var(--bb-slate);
}


/* ---- 9.3 Trust-Bar ---- */
.bb-trust-bar {
    padding: 60px 0;
    text-align: center;
}

.bb-trust-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--bb-slate-light);
    font-weight: 700;
    margin-bottom: 40px;
}

.bb-logo-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
    filter: grayscale(1);
    opacity: 0.7;
    transition: all 0.4s ease;
}

.bb-logo-grid:hover {
    filter: grayscale(0);
    opacity: 1;
}

.bb-trust-logo {
    max-height: 45px;
    width: auto;
    display: block;
}


/* ---- 9.4 Matrix-Tabelle ---- */
.bb-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.bb-matrix-table {
    min-width: 650px;
}

.bb-table-wrapper::after {
    content: "→ wischen für mehr";
    display: block;
    text-align: right;
    font-size: 12px;
    color: var(--bb-slate-light);
    margin-top: 5px;
}


/* ---- 9.5 Final CTA (Custom-HTML-Variante) ---- */
.bb-final-cta-container {
    text-align: left !important;
}

.bb-cta-headline {
    margin-bottom: 45px !important;
}

.bb-cta-paragraph {
    margin-bottom: 25px !important;
    font-size: 20px !important;
    color: var(--bb-slate) !important;
    max-width: 750px !important;
}

.bb-cta-footer-note {
    display: block !important;
    margin-bottom: 25px !important;
    margin-top: 0 !important;
    font-size: 13px !important;
    color: var(--bb-slate-light) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 600 !important;
}

.bb-cta-button-row {
    margin-top: 0 !important;
}


/* ---- 9.6 Finance-Transformation-Module ---- */
.finance-process__inner,
.finance-architecture__inner,
.contact-cta__inner {
    max-width: var(--bb-container-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

.finance-process,
.finance-architecture,
.contact-cta {
    padding-top: var(--bb-section-pad) !important;
    padding-bottom: var(--bb-section-pad) !important;
}

.finance-process,
.contact-cta {
    background-color: var(--bb-off-white) !important;
}

.finance-architecture {
    background-color: var(--bb-white) !important;
}

.finance-process__intro {
    margin-bottom: 32px !important;
}

.finance-architecture__inner {
    gap: 40px !important;
}

.contact-cta__header {
    margin-bottom: 36px !important;
}


/* ============================================================
   10. RESPONSIVE OPTIMIERUNG
   ============================================================ */

/* ---- 10.1 TABLET (768px – 1024px) ---- */
@media (min-width: 768px) and (max-width: 1024px) {
    .bb-hero {
        padding-top: 120px !important;
        padding-bottom: 80px !important;
    }

    .bb-hero .bb-headline {
        font-size: 36px !important;
        line-height: 1.2 !important;
    }

    .bb-hero .bb-subline {
        font-size: 16px !important;
        max-width: 600px;
    }

    .bb-section-white,
    .bb-section-grey,
    .dnd-section {
        padding: 60px 0 !important;
    }

    h2,
    .bb-matrix-title,
    .bb-cta-headline {
        font-size: var(--bb-h2-size-tablet) !important;
    }

    .bb-platform-comparison-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }

    .bb-matrix-table {
        font-size: 14px;
    }

    .bb-cta-paragraph {
        font-size: 18px !important;
    }

    .bb-challenges-tiles .fn__tiles__flex_wrapper,
    .bb-challenges-tiles > .row-fluid {
        grid-template-columns: repeat(2, 1fr);
    }

    .fn__team__wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ---- 10.2 HERO TABLET ---- */
@media (min-width: 769px) and (max-width: 1024px) {
    .bb-hero {
        padding-top: 140px !important;
        padding-bottom: 120px !important;
    }

    .bb-hero-text {
        max-width: 460px;
    }

    .bb-hero-content-wrapper {
        max-width: 520px;
    }

    .bb-hero .bb-headline {
        font-size: 36px !important;
        line-height: 1.2 !important;
        margin-top: 30px;
    }

    .bb-btn-primary {
        padding: 18px 50px !important;
        font-size: 16px !important;
    }

    .bb-hero .bb-subline {
        font-size: 16px !important;
        max-width: 500px;
    }
}


/* ---- 10.3 MOBILE (max 991px) ---- */
@media (max-width: 991px) {
    .bb-platform-comparison-grid {
        flex-direction: column;
        gap: 30px;
    }

    .bb-single-grid {
        flex-direction: column;
        gap: 30px;
    }

    .bb-logo-grid {
        gap: 40px;
        flex-wrap: wrap;
    }

    .bb-matrix-title,
    .bb-cta-headline {
        font-size: 32px !important;
    }

    .bb-challenges-tiles .fn__tiles__flex_wrapper,
    .bb-challenges-tiles > .row-fluid,
    .fn__line__box_wrapper,
    .fn__team__wrapper {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .content__columns .row-fluid,
    .fn__content__columns .row-fluid {
        flex-direction: column;
        gap: 24px;
    }
}


/* ---- 10.4 MOBILE HERO (max 768px) ---- */
@media (max-width: 768px) {
    .bb-hero {
        padding-top: 120px !important;
        padding-bottom: 60px !important;
        text-align: center;
    }

    .bb-hero .bb-container {
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .bb-hero-content-wrapper {
        max-width: 100% !important;
        padding: 0 10px;
    }

    .bb-hero .bb-headline {
        font-size: var(--bb-h2-size-mobile) !important;
        line-height: 1.2 !important;
        margin-top: 30px;
        margin-bottom: 5px;
    }

    .bb-hero .bb-subline {
        font-size: 15px !important;
        line-height: 1.6;
        margin-bottom: 25px;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .bb-hero-cta {
        display: flex;
        justify-content: center;
    }

    .bb-btn-primary {
        width: 100%;
        max-width: 280px;
    }

    .bb-card {
        margin-bottom: 20px;
    }

    .bb-card:hover {
        transform: none !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    }

    .finance-process,
    .finance-architecture,
    .contact-cta {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .finance-process__inner,
    .finance-architecture__inner,
    .contact-cta__inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .dnd-section > .row-fluid-wrapper > .row-fluid,
    .dnd-section > .row-fluid {
        padding: 0 20px !important;
    }

    .dnd-section {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .fn__ac__question {
        font-size: 15px !important;
        padding: 18px 0 !important;
    }

    .bb-challenges-tiles .fn__tile,
    .bb-challenges-tiles [class*="span"] > div {
        padding: 32px 24px !important;
    }
}


/* ---- 10.5 DnD PADDING FIX (Edge-Case) ---- */
.dnd-section.dnd_area-row-0-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

[class*="force-full-width-section"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.dnd_area-row-0-force-full-width-section > .row-fluid,
[class*="force-full-width-section"] > .row-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* ============================================================
   ============================================================
   16. v16-UPDATES (Bullets, Sektion 8, Glas-Modul)
   ============================================================
   ============================================================ */


/* ---- 16.1 BULLETS GLOBAL: STRICH → CHEVRON ----
   Wirkt für: Sektion 2 (bb-what-is-trcs), 4 (bb-trcs-capabilities),
   5 (bb-core-areas), 7 (bb-relevance), 8 (bb-limits),
   10 (bb-experts) sowie alle Fancy-Rich-Text- und 
   Content-Columns-Listen.
*/

.fn__line-content ul li::before,
.fn__line-content ol li::before,
.fn__line__box-el ul li::before,
.fn__line__box-el ol li::before,
.fn__line__box ul li::before,
.fn__line__box ol li::before,
.bb-core-areas ul li::before,
.bb-trcs-capabilities ul li::before,
.bb-intro ul li::before, .bb-intro ol li::before,
.bb-what-is-trcs ul li::before, .bb-what-is-trcs ol li::before,
.bb-relevance ul li::before, .bb-relevance ol li::before,
.bb-why-bluebird ul li::before, .bb-why-bluebird ol li::before,
.fn__rich_text ul li::before,
.fn__rich_text ol li::before,
.content__columns ul li::before,
.content__columns ol li::before,
.fn__content__columns ul li::before,
.fn__content__columns ol li::before,
.bb-list li::before,
.bb-cards-image-top__bullets ul li::before {
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;

    content: "\203A" !important;
    font-family: var(--bb-font-body) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: var(--bb-primary) !important;
    
    position: absolute !important;
    left: 2px !important;
    top: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
}

.fn__line-content ul li,
.fn__line-content ol li,
.fn__line__box-el ul li,
.fn__line__box-el ol li,
.fn__line__box ul li,
.fn__line__box ol li,
.bb-core-areas ul li,
.bb-trcs-capabilities ul li,
.bb-intro ul li, .bb-intro ol li,
.bb-what-is-trcs ul li, .bb-what-is-trcs ol li,
.bb-relevance ul li, .bb-relevance ol li,
.bb-why-bluebird ul li, .bb-why-bluebird ol li,
.fn__rich_text ul li,
.fn__rich_text ol li,
.content__columns ul li,
.content__columns ol li,
.fn__content__columns ul li,
.fn__content__columns ol li,
.bb-list li,
.bb-cards-image-top__bullets ul li {
    padding-left: 20px !important;
}


/* ---- 16.2 / 16.4 SEKTION 8 "Ehrliche Einordnung" ---- */

.bb-limits,
.bb-limits p,
.bb-limits span,
.bb-limits li,
.bb-limits div,
.bb-limits .fn__rich_text,
.bb-limits .fn__rich_text-el,
.bb-limits .fn__rich_text_int,
.bb-limits .fn__rich_text p,
.bb-limits .fn__rich_text span,
.bb-limits .fn__rich_text li,
.bb-limits .fn__rich_text_int p,
.bb-limits .fn__rich_text_int span,
.bb-limits .fn__rich_text_int li,
.bb-limits .fn__rich_text_int p > span,
.bb-limits .fn__rich_text_int p span[style] {
    color: var(--bb-white) !important;
}

.bb-limits ul li,
.bb-limits ol li,
.bb-limits .fn__rich_text ul li,
.bb-limits .fn__rich_text ol li {
    color: var(--bb-white) !important;
}

.bb-limits ul li::before,
.bb-limits ol li::before,
.bb-limits .fn__rich_text ul li::before,
.bb-limits .fn__rich_text ol li::before {
    color: var(--bb-white) !important;
}

.bb-limits .fn__rich_text_int > p:first-child,
.bb-limits .fn__rich_text-el > p:first-child,
.bb-limits .fn__rich_text_int > p:first-child > span,
.bb-limits .fn__rich_text_int > p:first-child span[style],
.bb-limits .fn__rich_text-el > p:first-child > span,
.bb-limits .fn__rich_text-el > p:first-child span[style],
.bb-limits p:first-of-type,
.bb-limits .kicker {
    color: var(--bb-white) !important;
}

.bb-limits h1,
.bb-limits h2,
.bb-limits h3,
.bb-limits h4,
.bb-limits h5,
.bb-limits h6 {
    color: var(--bb-white) !important;
}


/* ---- 16.5 CHEVRON-BULLETS im Content-Columns-Modul +
        Bluebird-Look-Override für das Glas-Modul ---- */

.oc__row__text-content ul li::before,
.oc__row__text-content ol li::before {
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;

    content: "\203A" !important;
    font-family: var(--bb-font-body) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: var(--bb-primary) !important;

    position: absolute !important;
    left: 2px !important;
    top: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
}

.oc__row__text-content ul,
.oc__row__text-content ol {
    list-style: none !important;
    list-style-type: none !important;
    list-style-image: none !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
}

.oc__row__text-content ul li,
.oc__row__text-content ol li {
    position: relative !important;
    padding-left: 20px !important;
    margin-bottom: 10px !important;
    line-height: 1.55 !important;
    color: var(--bb-slate) !important;
    list-style: none !important;
    background: none !important;
    background-image: none !important;
}

.oc__row__text-content ul li::marker,
.oc__row__text-content ol li::marker {
    content: none !important;
    display: none !important;
    font-size: 0 !important;
}


/* --- 16.5.2 BLUEBIRD-LOOK FÜR DAS GLAS-MODUL --- */

.bb-glass-section .oc__row__text-tag {
    font-family: var(--bb-font-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: var(--bb-primary) !important;
    display: block !important;
    margin: 0 0 14px 0 !important;
    line-height: 1.4 !important;
}

.bb-glass-section .oc__row__text-h {
    font-family: var(--bb-font-headline) !important;
    font-size: var(--bb-h2-size) !important;
    font-weight: 400 !important;
    color: var(--bb-dark) !important;
    line-height: 1.2 !important;
    margin: 0 0 24px 0 !important;
}

.bb-glass-section .oc__row__text-content,
.bb-glass-section .oc__row__text-content p,
.bb-glass-section .oc__row__text-content span,
.bb-glass-section .oc__row__text-content li {
    color: var(--bb-slate) !important;
    line-height: 1.65 !important;
}

.bb-glass-section .oc__row__text-content ul li::before,
.bb-glass-section .oc__row__text-content ol li::before {
    color: var(--bb-primary) !important;
}


/* ============================================================
   ============================================================
   18. SEKTION 3 "AUSGANGSLAGE" — Line-Box mit dezentem Glanz
   (konsolidiert aus v18, v18.4, v18.5, v18.6, v18.8)
   ============================================================
   ============================================================
   
   HUBSPOT-STRUKTUR:
   <Section>
     ├── Modul 1: Fancy Rich Text (Klasse: bb-challenges-intro)
     │     - Kicker "AUSGANGSLAGE" + H2 + Intro-Absatz
     ├── Modul 2: Line-Box (Klasse: bb-challenges-list)
     │     - 6 Items: Title (Kategorie) + Content (Beschreibung)
     └── Modul 3: Fancy Rich Text (Klasse: bb-challenges-outro)
           - Italic-Schlusssatz
   
   TRIGGER: Die Section wird über :has(.bb-challenges-list)
   gefunden — das Line-Box-Modul ist die einzige sichere
   Bluebird-Klasse, die HubSpot durchträgt.
   
   STYLE:
   - Dunkler Hintergrund mit dezentem Glanz (zwei weiche Lichter)
   - Headline + Intro linksbündig, weiß
   - 6 Items in 2-Spalten-Grid auf Modul-Ebene
   - Outro italic, gedämpftes Weiß
*/


/* ---- 18.1 SECTION-WRAPPER ---- */

.dnd-section:has(.bb-challenges-list) {
    background-color: var(--bb-dark) !important;
    position: relative !important;
    overflow: hidden !important;
    padding-top: 140px !important;
    padding-bottom: 100px !important;
}

.dnd-section:has(.bb-challenges-list) > .row-fluid-wrapper,
.dnd-section:has(.bb-challenges-list) > .row-fluid {
    position: relative !important;
    z-index: 2 !important;
}


/* ---- 18.2 LICHTER (dezenter Glanz) ---- */

.dnd-section:has(.bb-challenges-list)::before {
    content: "" !important;
    position: absolute !important;
    top: 20% !important;
    left: -300px !important;
    width: 900px !important;
    height: 900px !important;
    background: radial-gradient(
        circle,
        rgba(0, 107, 167, 0.35) 0%,
        rgba(74, 159, 209, 0.18) 40%,
        transparent 70%
    ) !important;
    filter: blur(100px) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    border-radius: 50% !important;
}

.dnd-section:has(.bb-challenges-list)::after {
    content: "" !important;
    position: absolute !important;
    bottom: 10% !important;
    right: -250px !important;
    width: 800px !important;
    height: 800px !important;
    background: radial-gradient(
        circle,
        rgba(74, 159, 209, 0.30) 0%,
        rgba(11, 95, 165, 0.18) 40%,
        transparent 70%
    ) !important;
    filter: blur(100px) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    border-radius: 50% !important;
}


/* ---- 18.3 TYPOGRAFIE — alles weiß auf dunklem Hintergrund ---- */

.bb-challenges-intro,
.bb-challenges-intro p,
.bb-challenges-intro span,
.bb-challenges-intro h1,
.bb-challenges-intro h2,
.bb-challenges-intro h3,
.bb-challenges-intro .fn__rich_text,
.bb-challenges-intro .fn__rich_text p,
.bb-challenges-intro .fn__rich_text span,
.bb-challenges-intro .fn__rich_text_int,
.bb-challenges-intro .fn__rich_text_int p,
.bb-challenges-intro .fn__rich_text_int span,
.bb-challenges-intro .fn__rich_text-el,
.bb-challenges-intro .fn__rich_text-el p,
.bb-challenges-intro .fn__rich_text-el span {
    color: var(--bb-white) !important;
}

.bb-challenges-intro .fn__rich_text_int > p:first-child,
.bb-challenges-intro .fn__rich_text-el > p:first-child,
.bb-challenges-intro .fn__rich_text_int > p:first-child > span,
.bb-challenges-intro .fn__rich_text_int > p:first-child span[style],
.bb-challenges-intro .fn__rich_text-el > p:first-child > span,
.bb-challenges-intro .fn__rich_text-el > p:first-child span[style],
.bb-challenges-intro p:first-of-type {
    color: rgba(74, 159, 209, 0.95) !important;
}


/* ---- 18.4 LINE-BOX als 2-Spalten-Grid auf Modul-Ebene ----
   Die Klasse bb-challenges-list sitzt auf dem .fn__line__box-Modul.
   Es enthält 6 .fn__line__box-el (eines pro Item) als Kinder.
*/

.bb-challenges-list,
.bb-challenges-list.fn__line__box {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 80px !important;
    row-gap: 40px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

.bb-challenges-list > .fn__line__box-el,
.bb-challenges-list.fn__line__box > .fn__line__box-el {
    align-self: start !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Inneren Wrapper auf Block-Layout (kein Grid mehr — pro Item
   nur 1 Title + 1 Content, brauchen kein eigenes Grid) */
.bb-challenges-list .fn__line__box_wrapper,
.bb-challenges-list.fn__line__box .fn__line__box_wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Wenn das Line-Box-Modul in einem schmalen HubSpot-Container
   liegt, dessen Container hochbrechen */
.dnd-section:has(.bb-challenges-list) .span12,
.dnd-section:has(.bb-challenges-list) [class*="span"]:has(.bb-challenges-list),
.dnd-section:has(.bb-challenges-list) .dnd-column,
.dnd-section:has(.bb-challenges-list) .dnd-row {
    width: 100% !important;
    max-width: 100% !important;
}


/* ---- 18.5 TITLE + CONTENT pro Item ---- */

.bb-challenges-list .fn__line-title,
.bb-challenges-list.fn__line__box .fn__line-title {
    margin: 0 0 8px 0 !important;
}

.bb-challenges-list .fn__line-title-el,
.bb-challenges-list.fn__line__box .fn__line-title-el {
    font-family: var(--bb-font-body) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: rgba(74, 159, 209, 0.95) !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.4 !important;
}

.bb-challenges-list .fn__line-content,
.bb-challenges-list.fn__line__box .fn__line-content {
    margin: 0 !important;
}

.bb-challenges-list .fn__line-content,
.bb-challenges-list .fn__line-content p,
.bb-challenges-list .fn__line-content span,
.bb-challenges-list.fn__line__box .fn__line-content,
.bb-challenges-list.fn__line__box .fn__line-content p {
    color: var(--bb-white) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}


/* ---- 18.6 OUTRO — italic, gedämpftes Weiß ---- */

.bb-challenges-outro,
.bb-challenges-outro p,
.bb-challenges-outro span,
.bb-challenges-outro em,
.bb-challenges-outro i,
.bb-challenges-outro .fn__rich_text,
.bb-challenges-outro .fn__rich_text p,
.bb-challenges-outro .fn__rich_text_int p,
.bb-challenges-outro .fn__rich_text_int em,
.bb-challenges-outro .fn__rich_text_int span {
    color: rgba(255, 255, 255, 0.72) !important;
    font-style: italic !important;
}

.bb-challenges-outro {
    padding-top: 30px !important;
}


/* ---- 18.7 OUTRO-PADDING-KONFLIKT (Block 8.15) auflösen ----
   Wenn Outro in derselben Section wie Line-Box liegt, soll
   die 20px-Outro-Regel aus 8.15 NICHT greifen — stattdessen
   bleibt das Section-Top-Padding bei 140px.
*/

.dnd-section:has(.bb-challenges-outro):has(.bb-challenges-list) {
    padding-top: 140px !important;
}

.dnd-section + .dnd-section:has(.bb-challenges-outro):has(.bb-challenges-list),
body .dnd-section:has(.bb-challenges-outro):has(.bb-challenges-list) {
    padding-top: 140px !important;
}


/* ---- 18.8 RESPONSIVE ---- */

@media (max-width: 991px) {
    /* Line-Box auf 1 Spalte */
    .bb-challenges-list,
    .bb-challenges-list.fn__line__box {
        grid-template-columns: 1fr !important;
        row-gap: 32px !important;
    }

    /* Lichter etwas kleiner */
    .dnd-section:has(.bb-challenges-list)::before,
    .dnd-section:has(.bb-challenges-list)::after {
        width: 600px !important;
        height: 600px !important;
        filter: blur(80px) !important;
    }

    /* Section etwas weniger Vertikal-Padding */
    .dnd-section:has(.bb-challenges-list) {
        padding-top: 90px !important;
        padding-bottom: 70px !important;
    }
}


/* ============================================================
   ENDE 18 — Sektion 3 Line-Box
   ============================================================ */


/* ============================================================
   ============================================================
   19. SEKTION 6 "MEHRWERT" — geschwungene Pfeile
   (konsolidiert aus v19, v19.1)
   ============================================================
   ============================================================
   
   Die Pfeile zwischen Before- und After-Boxen sind geschwungene,
   handgezeichnete Bögen mit eleganter Pfeilspitze.
   
   TWEAK-WERTE im SVG-Pfad:
   - Bogenstärke: "Q 28 8" — erste Zahl (8) erhöhen für flacher
   - Spitze: "M45 9 L 51 14 L 46 19" — Werte 9 und 19 zur Mitte
     14 verschieben für noch schmalere Spitze
*/

.bb-benefits-list .before__after_item:has(.before__after_before)::after,
.before__after_item:has(.before__after_before)::after {
    width: 56px !important;
    height: 22px !important;
    background-size: 56px 22px !important;
    
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 22' fill='none'><path d='M3 16 Q 28 8, 50 14' stroke='%230b5fa5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><path d='M45 9 L 51 14 L 46 19' stroke='%230b5fa5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") !important;
}


/* ============================================================
   ENDE 19 — Pfeile
   ============================================================ */

/* ============================================================
   v19.2 — Patch zu v19 (Pfeil schlanker, Variante C)
   ============================================================
   
   ÄNDERUNGEN:
   - Pfeil als ein zusammenhängender Pfad (Linie + Spitze)
     mit marker-end → Spitze sitzt mathematisch sauber am
     Linien-Endpunkt
   - Stroke-Width: 1.5 für die Linie, 1.2 für die Spitze
     (statt 2.0 / 1.6) → schlanker, eleganter
   
   ANPASSEN falls nötig:
   - stroke-width im ersten <path> = Linien-Stärke
   - stroke-width im <path> innerhalb von <marker> = Spitzen-Stärke
   - markerWidth/markerHeight = Spitzen-Größe (kleiner = filigraner)
*/

.bb-benefits-list .before__after_item:has(.before__after_before)::after,
.before__after_item:has(.before__after_before)::after {
    width: 56px !important;
    height: 22px !important;
    background-size: 56px 22px !important;
    
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 22' fill='none'><defs><marker id='ah' markerWidth='6' markerHeight='6' refX='5' refY='3' orient='auto'><path d='M0,0 L6,3 L0,6' fill='none' stroke='%230b5fa5' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/></marker></defs><path d='M3 16 Q 28 8, 50 14' stroke='%230b5fa5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' marker-end='url(%23ah)'/></svg>") !important;
}


/* ============================================================
   ENDE v19.2
   ============================================================ */


/* ============================================================
   ============================================================
   20. SEKTION 9 ALTERNATIVE "WARUM BLUEBIRD"
   Bild oben, asymmetrisches 2-Spalten-Layout
   (konsolidiert aus v20, v20.2, v20.3, v20.4, v20.5, v20.6)
   ============================================================
   ============================================================
   
   ANSATZ:
   Geklonte Sektion 9 nutzt das Ocean Content-Columns-Modul
   mit Layout "Content || Image or Video" (60% / 40%). Per CSS
   wird das Rendering umgebogen:
   
   ORIGINAL-LAYOUT (Flex-Row, vom Modul):
     [Text 60% | Bild 40%]
   
   ZIEL-LAYOUT (per CSS):
     [Bild flach oben, vollbreit]
     [Kicker + Headline]
     [Beschreibung 40% | Sub-Headline + Bullets 60%]
     [Schluss-Satz vollbreit mit Trennlinie]
   
   TRIGGER: Klasse .bb-why-bluebird-alt am Modul-Wrapper
   (zusätzlich zu bb-why-bluebird).
   
   STRUKTUR (Geschwister in .oc__row__text-content):
     1. <p>  Beschreibungstext   → linke Spalte
     2. <p>  Sub-Headline        → rechte Spalte oben
     3. <ul> Bullet-Liste        → rechte Spalte unten
     4. <p>  Schluss-Satz        → vollbreit unten
   
   TWEAK-WERTE (siehe inline):
   - Bildhöhe: 450px (Werte 350-550px sinnvoll)
   - Spalten-Verhältnis: 40fr 60fr (alternativ 30fr 70fr etc.)
   - Spalten-Abstand: column-gap 80px
*/


/* ---- 20.1 ELTERN-CONTAINER auf volle Breite ----
   Wichtig: Ohne diese Regel ist der Text-Content nur 900px breit
   (globale Begrenzung), und die rechte Spalte endet vor der
   Bildkante.
*/

body .bb-why-bluebird-alt,
body .bb-why-bluebird-alt .oc__row__columns,
body .bb-why-bluebird-alt .oc__row__wrapper,
body .bb-why-bluebird-alt .oc__row__text,
body .bb-why-bluebird-alt .oc__row__text.w_60,
body .bb-why-bluebird-alt .oc__row__text-cont {
    width: 100% !important;
    max-width: 100% !important;
}


/* ---- 20.2 FLEX-RICHTUNG: Spalten statt Reihen, Bild oben ---- */

.bb-why-bluebird-alt .oc__row__wrapper {
    flex-direction: column !important;
    gap: 24px !important;        /* Abstand Bild → Text */
    align-items: stretch !important;
}


/* ---- 20.3 BILD: vollbreit, Höhe begrenzt (Banner-Look) ---- */

.bb-why-bluebird-alt .oc__row__image,
.bb-why-bluebird-alt .oc__row__image.w_40 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    order: -1 !important;          /* Bild nach oben */
    margin: 0 !important;
    padding: 0 !important;
}

.bb-why-bluebird-alt .oc__row__image-container {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 450px !important;   /* Bildhöhe — hier tweaken */
    overflow: hidden !important;
}

.bb-why-bluebird-alt .oc__row__image-container img,
.bb-why-bluebird-alt .oc__row__image-container-el {
    width: 100% !important;
    height: 450px !important;       /* gleiche Höhe wie max-height */
    max-width: 100% !important;
    max-height: 450px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}


/* ---- 20.4 TEXT-SPALTE auf volle Breite ---- */

.bb-why-bluebird-alt .oc__row__text,
.bb-why-bluebird-alt .oc__row__text.w_60 {
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* ---- 20.5 KICKER + HEADLINE: Lese-Breite begrenzt ---- */

.bb-why-bluebird-alt .oc__row__text-cont {
    margin-bottom: 40px !important;
}

body .bb-why-bluebird-alt .oc__row__text-h,
body .bb-why-bluebird-alt h2.oc__row__text-h {
    max-width: 900px !important;
}


/* ---- 20.6 INHALT als Grid: 40/60 mit gezielter Item-Platzierung ---- */

.bb-why-bluebird-alt .oc__row__text-content {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    
    display: grid !important;
    grid-template-columns: 40fr 60fr !important;     /* Spalten-Verhältnis */
    grid-template-rows: auto auto !important;
    column-gap: 80px !important;
    row-gap: 0 !important;
}

/* Item 1 (Beschreibungstext) → linke Spalte, spannt 2 Reihen */
.bb-why-bluebird-alt .oc__row__text-content > *:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    align-self: start !important;
}

/* Item 2 (Sub-Headline "Das bedeutet für Sie") → rechte Spalte oben */
.bb-why-bluebird-alt .oc__row__text-content > *:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
}

/* Item 3 (Bullet-Liste) → rechte Spalte unten */
.bb-why-bluebird-alt .oc__row__text-content > *:nth-child(3) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start !important;
}

/* Item 4 (Schluss-Satz) → vollbreit unten mit Trennlinie */
.bb-why-bluebird-alt .oc__row__text-content > *:last-child {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    margin-top: 40px !important;
    padding-top: 30px !important;
    border-top: 1px solid rgba(11, 31, 58, 0.15) !important;
    font-style: italic !important;
}


/* ---- 20.7 RESPONSIVE: Mobile auf 1 Spalte ---- */

@media (max-width: 991px) {
    .bb-why-bluebird-alt .oc__row__wrapper {
        gap: 40px !important;
    }
    
    .bb-why-bluebird-alt .oc__row__text-cont {
        margin-bottom: 24px !important;
    }
    
    .bb-why-bluebird-alt .oc__row__text-content {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
    }
    
    /* Auto-Placement: alle Items in 1 Spalte untereinander */
    .bb-why-bluebird-alt .oc__row__text-content > *:nth-child(1),
    .bb-why-bluebird-alt .oc__row__text-content > *:nth-child(2),
    .bb-why-bluebird-alt .oc__row__text-content > *:nth-child(3),
    .bb-why-bluebird-alt .oc__row__text-content > *:last-child {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
}


/* ============================================================
   ENDE 20 — Sektion 9 Alternative
   ============================================================ */

/* ============================================================
   ============================================================
   21. TECH-BADGE — Sticky Hersteller-Logo (KONSOLIDIERT)
   ============================================================
   ============================================================
   
   ZIEL:
   - Auf Technologie-Seiten (Oracle, OneStream, CCH Tagetik)
     ein dezentes Hersteller-Logo immer sichtbar als
     Bereichs-Indikator
   - Position: links oben am Viewport (außerhalb des
     1200px-Containers, in der toten Zone)
   - Im Hero-Bereich noch unsichtbar (nicht störend),
     erscheint sobald Hero weggescrollt
   - Glas-Look: funktioniert auf hellem, grauem und
     dunklem Hintergrund gleichermaßen
   - Mobile (<768px): ausgeblendet
   
   ANSATZ:
   - position: fixed (nicht sticky, nicht absolute)
     → keine Anker-Probleme, keine Overflow-Konflikte
   - Sichtbarkeit per .is-visible Klasse, gesetzt durch
     Mini-JS am Seitenende (siehe HubSpot-Modul oder
     globales Script)
   - Pure-CSS-Fallback: Logo ist immer sichtbar, nur etwas
     dezenter solange noch oben am Hero
   
   EINBINDUNG:
   1) Diesen Block im globalen Stylesheet
   2) HTML-Snippet auf jeder Tech-Seite (kann auch ein
      Custom-Module sein — siehe bb-tech-badge Module)
   3) JS-Snippet im Footer der Seite ODER als
      Custom-HTML-Modul mit <script>-Tag
*/


/* ============================================================
   21.1 BADGE-CONTAINER
   ============================================================ */

.bb-tech-badge {
    /* Position: fest am Viewport */
    position: fixed !important;
    top: 100px !important;
    left: max(24px, calc(50vw - 760px)) !important;
    bottom: auto !important;
    right: auto !important;
    transform: none !important;
    
    /* Layout */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 14px !important;
    margin: 0 !important;
    
    /* Glas-Look */
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
    border: 1px solid rgba(11, 31, 58, 0.12) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08),
                0 1px 3px rgba(0, 0, 0, 0.06) !important;
    
    text-decoration: none !important;
    
    /* Stack über fast allem */
    z-index: 100 !important;
    pointer-events: auto !important;
    
    /* Sichtbarkeits-Default: erstmal sichtbar
       JS togglet .is-hidden-in-hero um es im Hero auszublenden
       Pure-CSS-Fallback: ohne JS einfach immer sichtbar */
    opacity: 1 !important;
    transition: opacity 0.3s ease,
                transform 0.3s ease,
                background 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease !important;
}


/* ============================================================
   21.2 LOGO-IMAGE
   ============================================================ */

.bb-tech-badge img {
    display: block !important;
    height: 22px !important;
    width: auto !important;
    max-height: 22px !important;
    max-width: 100px !important;
    object-fit: contain !important;
    
    /* Default ausgegraut + leicht abgedunkelt
       für Sichtbarkeit auf hellen UND dunklen Hintergründen */
    filter: grayscale(100%) brightness(0.6) contrast(1.1) !important;
    opacity: 1 !important;
    transition: filter 0.3s ease !important;
}


/* ============================================================
   21.3 HOVER-ZUSTAND
   ============================================================ */

.bb-tech-badge:hover {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(11, 95, 165, 0.30) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12),
                0 2px 6px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-1px) !important;
}

.bb-tech-badge:hover img {
    filter: grayscale(0%) brightness(1) contrast(1) !important;
}


/* ============================================================
   21.4 HERO-AUSBLENDUNG (per JS-Klasse)
   ============================================================
   
   JS togglet .is-hidden-in-hero auf <body> oder direkt auf
   .bb-tech-badge sobald wir noch im Hero-Bereich sind
   (scrollY < HeroHöhe). Beim Runterscrollen verschwindet
   die Klasse → Badge wird sichtbar.
   
   OPTIONAL: ohne JS bleibt Badge immer sichtbar.
*/

body.bb-in-hero .bb-tech-badge,
.bb-tech-badge.is-hidden-in-hero {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-12px) !important;
}


/* ============================================================
   21.5 RECHTS-VARIANTE
   ============================================================ */

.bb-tech-badge.bb-tech-badge--right {
    left: auto !important;
    right: max(24px, calc(50vw - 720px)) !important;
}


/* ============================================================
   21.6 RESPONSIVE
   ============================================================ */

/* Auf engeren Bildschirmen am Viewport-Rand kleben */
@media (max-width: 1280px) {
    .bb-tech-badge {
        left: 24px !important;
    }
    .bb-tech-badge.bb-tech-badge--right {
        left: auto !important;
        right: 24px !important;
    }
}

/* Mobile: ausblenden */
@media (max-width: 767px) {
    .bb-tech-badge {
        display: none !important;
    }
}


/* ============================================================
   21.7 PRINT
   ============================================================ */

@media print {
    .bb-tech-badge {
        display: none !important;
    }
}


/* ============================================================
   ENDE BLOCK 21 — Tech-Badge
   ============================================================ */

/* ============================================================
   ============================================================
   22. POST-LAUNCH-REVIEW PATCHES (Dennis-Review)
   Stand: Mai 2026
   ============================================================
   ============================================================
   
   ENTHÄLT:
   - 22.1 Tech-Badge: Default farbig, Hover grau (Punkt 1)
   - 22.2 Line-Box Content-Farbe: Ocean-Default überschreiben
          (Punkt 3 + 6 — gilt für Sektion 4 UND Sektion 9 FAQ)
   - 22.3 Sektion 6 "Mehrwert": mehr Abstand vor Heading-Zeile
          (Punkt 4)
   - 22.4 Sektion 10 "Beratungsansatz": Text-Bild-Abstand
          (Punkt 7)
   
   NOCH OFFEN (kommen separat):
   - Punkt 5: Sektion 8 "Grenzen" rot + X-Bullets
   - Punkt 8: CTA mit HubSpot-Meetings-Embed
*/


/* ============================================================
   22.1 TECH-BADGE — Logo-Verhalten umgekehrt
   ============================================================
   
   ÄNDERUNG vs. Block 21.2 / 21.3:
   - Default: Logo voll farbig (filter: none)
   - Hover:   Logo grau + abgedunkelt (vorher Default)
   
   Glas-Look-Container bleibt unverändert.
*/

.bb-tech-badge img {
    /* Default: voll farbig */
    filter: none !important;
    opacity: 1 !important;
}

.bb-tech-badge:hover img {
    /* Hover: ausgegraut + abgedunkelt */
    filter: grayscale(100%) brightness(0.6) contrast(1.1) !important;
}


/* ============================================================
   22.2 LINE-BOX CONTENT-FARBE
   ============================================================
   
   PROBLEM:
   Ocean-Theme setzt auf .fn__line-content-el die Farbe
   var(--primaryColor) = #0b1f3a (Dark Navy). Das überschreibt
   unsere .fn__line-content-Regel mit --bb-slate.
   
   Wirkung sichtbar in:
   - Sektion 4 "Funktionsumfang" — Beschreibungstexte unter
     den Headlines wirken zu dunkel und dadurch optisch wie
     andere Schriftart
   - Sektion 9 / FAQ — gleiches Modul-Pattern
   
   FIX: Selektor eine Stufe spezifischer setzen.
   
   TWEAK: Falls Texte in einer Sektion DOCH dunkel bleiben
   sollen, betroffene Sektion mit eigenem Selektor whitelist'en.
*/

.fn__line__box .fn__line-content-el,
.fn__line__box-el .fn__line-content-el,
.fn__line-content .fn__line-content-el,
.fn__line-content-el {
    color: var(--bb-slate) !important;
}

.fn__line__box .fn__line-content-el p,
.fn__line__box .fn__line-content-el span,
.fn__line__box-el .fn__line-content-el p,
.fn__line__box-el .fn__line-content-el span,
.fn__line-content-el p,
.fn__line-content-el span {
    color: var(--bb-slate) !important;
}

/* Ausnahme: Sektion 3 "Ausgangslage" bleibt weiß auf dunkel
   (Block 18 setzt das, hier nicht überschreiben) */
.bb-challenges-list .fn__line-content-el,
.bb-challenges-list .fn__line-content-el p,
.bb-challenges-list .fn__line-content-el span,
.bb-challenges-list.fn__line__box .fn__line-content-el,
.bb-challenges-list.fn__line__box .fn__line-content-el p {
    color: var(--bb-white) !important;
}


/* ============================================================
   22.3 SEKTION 6 "MEHRWERT" — mehr Abstand vor Header-Zeile
   ============================================================
   
   PROBLEM: "Heutige Situation" / "Mit Oracle TRCS" klebt
   zu nah am Intro-Text darüber.
   
   FIX: 28px zusätzlicher Top-Abstand auf der Header-Zeile
   (Zeile, die .before__after_heading enthält).
   
   TWEAK: Wert in margin-top anpassen (24-32px Spielraum).
*/

.bb-benefits-list .before__after_item:has(.before__after_heading),
.before__after_item:has(.before__after_heading) {
    margin-top: 28px !important;
}


/* ============================================================
   22.4 SEKTION 10 "BERATUNGSANSATZ" — Text-Bild-Abstand
   ============================================================
   
   PROBLEM: Text klebt zu nah am Bild.
   
   FIX: Spalten-Gap von 64px auf 88px erhöhen (+24px).
   
   TWEAK: column-gap-Wert anpassen falls zu viel/wenig.
*/

.bb-why-bluebird .oc__row__columns-wpp,
.bb-why-bluebird .oc__row__wrapper,
.bb-why-bluebird .content__columns,
.bb-why-bluebird .row-fluid {
    gap: 88px !important;
    column-gap: 88px !important;
}


/* ============================================================
   ENDE BLOCK 22
   ============================================================ */


/* ============================================================
   22.2b LINE-BOX HEADLINES — Farbe + Abstand zum Content
   ============================================================
   
   Ergänzung zu 22.2. Wirkt überall, wo Line-Box eingesetzt wird
   (Sektion 4 "Funktionsumfang" usw.) — AUSSER Sektion 3
   "Ausgangslage" (eigenes dunkles Styling über Block 18).
   
   TWEAK-WERTE:
   - Headline-Farbe:  color-Wert
   - Abstand unten:   margin-bottom-Wert (aktuell 16px)
*/

.fn__line__box .fn__line-title-el,
.fn__line__box-el .fn__line-title-el,
.fn__line-title .fn__line-title-el,
.fn__line-title-el {
    color: var(--bb-primary) !important;
    margin-bottom: 0px !important;   /* <-- HIER Abstand tweaken */
}

.fn__line__box .fn__line-title,
.fn__line__box-el .fn__line-title,
.fn__line-title {
    margin-bottom: 0 !important;
}

/* Ausnahme: Sektion 3 "Ausgangslage" behält eigenes Styling */
.bb-challenges-list .fn__line-title-el,
.bb-challenges-list.fn__line__box .fn__line-title-el {
    color: rgba(74, 159, 209, 0.95) !important;
    margin-bottom: 8px !important;
}


/* ============================================================
   ENDE 22.2b
   ============================================================ */

/* ============================================================
   22.2c LINE-BOX ITEM-ABSTAND (row-gap)
   ============================================================
   
   Vergrößert den vertikalen Abstand zwischen den 6 Items im
   Line-Box-Modul (Sektion 4 "Funktionsumfang"), damit sich
   Headline + Content visuell als zusammengehörige Einheit
   lesen.
   
   TWEAK: row-gap-Wert anpassen (aktuell 64px, ursprünglich 40px).
   - Mehr Abstand zwischen Items = stärkere Gruppierung
   - Weniger = enger zusammen
   
   Ausnahme: Sektion 3 "Ausgangslage" (.bb-challenges-list)
   hat eigenes row-gap aus Block 18, bleibt unangetastet.
*/

.fn__line__box .fn__line__box_wrapper {
    row-gap: 14px !important;
}

/* Ausnahme: Sektion 3 behält eigenen Wert (40px aus Block 18) */
.bb-challenges-list .fn__line__box_wrapper,
.bb-challenges-list.fn__line__box .fn__line__box_wrapper {
    row-gap: 40px !important;
}


/* ============================================================
   ENDE 22.2c
   ============================================================ */


/* ============================================================
   22.5 v3 SEKTION 6 "MEHRWERT" — mehr Abstand über der Liste
   ============================================================
   
   ERSETZT 22.5 v2.
   
   PROBLEM: Block 8.1 hat eine triple-:has-Kette die hohe
   Spezifität hat (drei :has(...)-Pseudo-Klassen verkettet).
   Unsere einfache Regel verliert.
   
   FIX: Selektor mit drei Klassen-Stufen aufpumpen, damit er
   den Block-8.1-Selektor in der Spezifität schlägt.
   
   TWEAK: padding-top-Wert anpassen (aktuell 60px).
*/

html body .dnd-section.dnd-section.dnd-section:has(.bb-benefits-list) {
    padding-top: 60px !important;
}


/* ============================================================
   ENDE 22.5 v3
   ============================================================ */



/* ============================================================
   22.6 FAQ-ANTWORTEN — Schriftfarbe auf Slate
   ============================================================
   
   PROBLEM: Wolters-Kluwer-Theme setzt mit ID-Selektor
   (#hs_cos_wrapper_widget_...) color: rgba(0,0,0,1.0) auf
   .fn__ac__answer p — ID-Selektor schlägt unsere
   Klassen-Regel aus Block 6.6.
   
   FIX: Spezifität mit body + doppelter Klasse hochziehen.
   
   TWEAK: color-Wert anpassen falls anderer Slate-Ton gewünscht.
*/

html body .fn__accordion .fn__ac__single .fn__ac__answer,
html body .fn__accordion .fn__ac__single .fn__ac__answer p,
html body .fn__accordion .fn__ac__single .fn__ac__answer span,
html body .bb-faq .fn__ac__answer,
html body .bb-faq .fn__ac__answer p,
html body .bb-faq .fn__ac__answer span {
    color: var(--bb-slate) !important;
}


/* ============================================================
   ENDE 22.6
   ============================================================ */


/* ============================================================
   ============================================================
   23. CTA-SEKTION mit MEETING-MODUL (Bluebird-Look)
   Stand: Mai 2026
   ============================================================
   ============================================================
   
   STRUKTUR:
   - Spalte 1: Heading + Person-Card (.bb-cta-person, plain)
   - Spalte 2: HubSpot-Meetings-Modul (.bb-cta-meeting)
   
   ZIEL:
   - Person-Foto größer + zentriert, Name + Rolle darunter
   - Beide Spalten vertikal mittig zueinander
   - Kalender behält HubSpot-Look, nur Container-Anpassung
   
   TWEAK-WERTE:
   - Foto-Größe: width / height bei .fn__card__member__image-el
   - Vertikale Ausrichtung: align-items
*/


/* ---- 23.1 PERSON-CARD: Foto größer + zentriert ---- */

.bb-cta-person.fn__card__member__wrapper,
.bb-cta-person {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    height: 100% !important;
}

.bb-cta-person .fn__card__member__wp,
.bb-cta-person .fn__card__member,
.bb-cta-person .fn__card__member__a,
.bb-cta-person .fn__card__member__el {
    width: 100% !important;
    text-align: center !important;
    background: transparent !important;
}

/* Foto-Wrapper (head + image) — kein Hintergrund, zentriert */
.bb-cta-person .fn__card__member__head {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 auto 24px auto !important;
    width: auto !important;
    display: flex !important;
    justify-content: center !important;
}

.bb-cta-person .fn__card__member__image {
    width: 220px !important;          /* <-- Foto-Größe hier tweaken */
    height: 220px !important;
    border-radius: 50% !important;    /* rund, falls bevorzugt: 8px für eckig-rund */
    overflow: hidden !important;
    margin: 0 auto !important;
}

.bb-cta-person .fn__card__member__image-el,
.bb-cta-person img.fn__card__member__image-el {
    width: 220px !important;          /* <-- gleicher Wert wie oben */
    height: 220px !important;
    max-width: 220px !important;
    max-height: 220px !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    border-radius: 50% !important;
}

/* Name + Rolle — Bluebird-Typografie auf Dunkel */
.bb-cta-person .fn__card__member__member {
    text-align: center !important;
    width: 100% !important;
}

.bb-cta-person .fn__card__member__cont-title,
.bb-cta-person h4.fn__card__member__cont-title {
    color: var(--bb-white) !important;
    font-family: var(--bb-font-headline) !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.2 !important;
}

.bb-cta-person .fn__card__member__cont-jtitle,
.bb-cta-person h5.fn__card__member__cont-jtitle {
    color: var(--bb-slate-light) !important;
    font-family: var(--bb-font-body) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}


/* ---- 23.2 SPALTEN-AUSRICHTUNG (Person + Kalender vertikal mittig) ---- */

/* Section, die Meeting-Modul enthält */
body .dnd-section:has(.meetings-iframe-container) > .row-fluid-wrapper > .row-fluid,
body .dnd-section:has(.meetings-iframe-container) > .row-fluid {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}


/* ---- 23.3 MEETING-CONTAINER (Bluebird-Look-Wrapper) ---- */

.meetings-iframe-container {
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.meetings-iframe-container iframe {
    width: 100% !important;
    min-height: 720px !important;     /* <-- Höhe tweaken falls Termin-Slots abgeschnitten */
    border: none !important;
    background: transparent !important;
}


/* ============================================================
   ENDE BLOCK 23
   ============================================================ */

/* ============================================================
   23.4 Person-Card Layout-Fix + Meeting-iframe Höhe
   ============================================================
   
   PROBLEM 1: Person-Card rendert Foto und Text horizontal
   nebeneinander statt vertikal gestapelt — weil
   .fn__card__member__a oder __el ein eigenes display: flex
   mitbringt, das wir nicht überschrieben haben.
   
   PROBLEM 2: iframe-Höhe 720px reicht nicht für die
   Termin-Slot-Liste.
*/

.bb-cta-person .fn__card__member,
.bb-cta-person .fn__card__member__a,
.bb-cta-person .fn__card__member__el,
.bb-cta-person .fn__card__member__el.plain {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0 !important;
}

/* iframe-Höhe erhöhen */
.meetings-iframe-container iframe {
    min-height: 880px !important;     /* <-- bei Bedarf weiter erhöhen */
}


/* ============================================================
   ENDE 23.4
   ============================================================ */


/* ============================================================
   23.5 Person-Foto rechteckig hoch (Portrait 3:4)
   ============================================================
   
   ÜBERSCHREIBT die runde Variante aus 23.1.
   
   TWEAK:
   - Breite: width
   - Höhe: height (für 3:4 = 1.33x Breite)
   - Border-Radius: 0 = scharfe Kante, 8px = leicht abgerundet
*/

.bb-cta-person .fn__card__member__image {
    width: 200px !important;          /* <-- Breite tweaken */
    height: 260px !important;         /* <-- Höhe tweaken (3:4 = 200x267) */
    border-radius: 8px !important;    /* <-- 0 für scharfe Kante */
}

.bb-cta-person .fn__card__member__image-el,
.bb-cta-person img.fn__card__member__image-el {
    width: 200px !important;
    height: 260px !important;
    max-width: 200px !important;
    max-height: 260px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    object-position: center top !important;
}


/* ============================================================
   ENDE 23.5
   ============================================================ */


/* ============================================================
   23.6 CTA-Abstände + Headline-Breite
   ============================================================
   
   PROBLEM 1: Die beiden Sections (Ocean CTA oben +
   Person/Kalender unten) haben zusammen 160px vertikalen
   Abstand → zu viel.
   
   PROBLEM 2: Headline "Strukturieren Sie Ihren steuerlichen
   Abschluss" bricht in 2 Zeilen, obwohl Platz da ist.
   
   FIX:
   - Beide Sections näher zusammenrücken
   - Headline-Container voll breit, Headline läuft auf 1 Zeile
*/

/* Sektion mit Ocean CTA — weniger Abstand nach unten */
html body .dnd-section:has(.bb-final-cta) {
    padding-bottom: 30px !important;   /* <-- TWEAK */
}

/* Sektion mit Meetings — weniger Abstand nach oben */
html body .dnd-section:has(.meetings-iframe-container) {
    padding-top: 30px !important;      /* <-- TWEAK */
}

/* Headline + Untertext-Container voll breit */
.bb-final-cta,
.bb-final-cta .fn__cta_wrapper,
.bb-final-cta .fn__cta__inner,
.bb-final-cta > * {
    max-width: 100% !important;
    width: 100% !important;
}

/* Headline soll nicht umbrechen */
.bb-final-cta h1,
.bb-final-cta h2,
.bb-final-cta h3,
.bb-final-cta .bb-cta-headline {
    max-width: 100% !important;
    white-space: normal !important;
}


/* ============================================================
   ENDE 23.6
   ============================================================ */

/* ============================================================
   23.7 Ocean-CTA Wrapper auf volle Breite
   ============================================================
   
   PROBLEM: Ocean-CTA-Modul hat intern .ocean_cta__content
   und .ocean_cta__content-title als 570px-Container — daher
   bricht die Headline.
   
   FIX: Beide Wrapper auf volle Breite zwingen.
*/

.bb-final-cta .ocean_cta__content,
.bb-final-cta .ocean_cta__content-title,
.bb-final-cta .ocean_cta__wraper-el {
    max-width: 100% !important;
    width: 100% !important;
}


/* ============================================================
   ENDE 23.7
   ============================================================ */

/* ============================================================
   23.8 Kalender-Höhe + Vertikale Ausrichtung oben
   ============================================================
   
   ÄNDERUNGEN:
   - Kalender (iframe) niedriger
   - Person und Kalender oben bündig statt mittig
   
   ÜBERSCHREIBT 23.2 (align-items: center) und 23.4 (min-height).
   
   TWEAK:
   - min-height am iframe → Kalender-Höhe
   - align-items am Section-Wrapper → flex-start = oben,
     center = mittig, flex-end = unten
*/

/* Person + Kalender oben bündig */
body .dnd-section:has(.meetings-iframe-container) > .row-fluid-wrapper > .row-fluid,
body .dnd-section:has(.meetings-iframe-container) > .row-fluid {
    align-items: flex-start !important;
}

/* Kalender niedriger */
.meetings-iframe-container iframe {
    min-height: 540px !important;     /* <-- TWEAK */
}


/* ============================================================
   ENDE 23.8
   ============================================================ */


/* ============================================================
   25.9 "NÄCHSTER SCHRITT"-SEKTION — mehr Höhe
   ============================================================
   
   ÜBERSCHREIBT 23.9 (padding 30px oben/unten).
   
   Aktuell wirkt die Heading-Sektion wie ein schmaler Banner-
   Strip. Mehr Höhe macht sie zu einer eigenständigen Sektion
   im Bluebird-Standard-Rhythmus.
   
   TWEAK: padding-Werte anpassen.
*/

html body .bb-final-cta {
    padding-top: 100px !important;       /* <-- TWEAK */
    padding-bottom: 100px !important;    /* <-- TWEAK */
}


/* ============================================================
   ENDE 25.9
   ============================================================ */


/* ============================================================
   23.10 Kalender-iframe weniger hoch
   ============================================================
   
   ÜBERSCHREIBT min-height aus 23.8.
   
   TWEAK: Bei Bedarf weiter runter (440-500px).
   Achtung: Wenn HubSpot das Logo entfernt wird, muss der Wert
   ggf. nochmal angepasst werden.
*/

.meetings-iframe-container iframe {
    min-height: 480px !important;     /* <-- TWEAK */
}


/* ============================================================
   ENDE 23.10
   ============================================================ */

/

/* ============================================================
   ============================================================
   24. SEKTION 8 "EHRLICHE EINORDNUNG" — Grenzen-Styling
   Stand: Mai 2026
   ============================================================
   ============================================================
   
   ÄNDERUNGEN:
   - Wort "Grenzen" (.bb-limit-word) rot unterstrichen
   - Bullets als roter X-Kreis (Outline) statt Chevron
   
   FARBE: --bb-limit-red (Bluebird-konform gedämpftes Rot)
   
   TWEAK-WERTE:
   - --bb-limit-red: Rot-Ton anpassen
   - text-decoration-thickness: Strichstärke
   - text-underline-offset: Abstand Strich zur Schrift
   - X-Kreis: width/height für Größe
*/


/* ---- 24.1 ROT-TOKEN ---- */

:root {
    --bb-limit-red: #c02222;        /* <-- Rot-Ton tweaken */
}


/* ---- 24.2 WORT "GRENZEN" — rot unterstrichen ---- */

.bb-limits .bb-limit-word,
.bb-limit-word {
    color: var(--bb-limit-red) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--bb-limit-red) !important;
    text-decoration-thickness: 1.5px !important;   /* <-- Strichstärke */
    text-underline-offset: 4px !important;         /* <-- Abstand */
    text-decoration-skip-ink: none !important;
}


/* ---- 24.3 BULLETS als X-Kreis (Outline) ---- */

/* Block 16.1 / 7.2 setzen Chevron als Pseudo-Element ::before.
   Wir überschreiben das spezifisch für .bb-limits — der
   Chevron-Inhalt wird leer, dafür gibt's eine SVG-Background-Image
   mit X im Kreis. */

.bb-limits ul li::before,
.bb-limits ol li::before,
.bb-limits .fn__rich_text ul li::before,
.bb-limits .fn__rich_text ol li::before,
.bb-limits .fn__rich_text_int ul li::before,
.bb-limits .fn__rich_text_int ol li::before {
    content: "" !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><circle cx='8' cy='8' r='7' stroke='%23c02222' stroke-width='1.4'/><path d='M5.5 5.5 L10.5 10.5 M10.5 5.5 L5.5 10.5' stroke='%23c02222' stroke-width='1.4' stroke-linecap='round'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px 16px !important;
    background-color: transparent !important;
    
    width: 16px !important;
    height: 16px !important;
    
    position: absolute !important;
    left: 0 !important;
    top: 6px !important;            /* <-- vertikale Position tweaken */
    
    /* Chevron-Werte aus 16.1 neutralisieren */
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
}

.bb-limits ul li,
.bb-limits ol li,
.bb-limits .fn__rich_text ul li,
.bb-limits .fn__rich_text ol li {
    padding-left: 28px !important;     /* <-- mehr Platz für 16px-Icon */
}


/* ============================================================
   ENDE BLOCK 24
   ============================================================ */

/* ============================================================
   ============================================================
   25. ZWEITER REVIEW-PASS
   Stand: Mai 2026
   ============================================================
   ============================================================
   
   ENTHÄLT:
   - 25.1 Sektion 4 + 5 (Funktionsumfang / Kernbereiche):
          mehr Abstand über der Sektions-Headline
   - 25.2 Sektion 11 (Experten): Bilder rund + farbig,
          kein Hover-Effekt mehr
   - 25.3 CTA-Bereich: Lücke Subline → Kalender weg
*/


/* ============================================================
   25.1 SEKTION 4 + 5 — mehr Abstand über Headline
   ============================================================
   
   Aktueller padding-top der Intro-Sections: 80px
   Neuer Wert: 120px (+40px wie gewünscht)
   
   TWEAK: padding-top-Wert.
*/

html body .dnd-section:has(.bb-trcs-capabilities-intro),
html body .dnd-section:has(.bb-core-areas-intro) {
    padding-top: 120px !important;     /* <-- TWEAK */
}




/* ============================================================
   25.2 v2 — Experten-Bilder rund + farbig (Spezifitäts-Boost)
   ============================================================
   
   ERSETZT 25.2 v1 komplett.
   
   PROBLEM: Block 8.11 (.bb-experts .fn__team__member__image-el)
   hat dieselbe Spezifität wie 25.2 v1, aber durch
   Cascade-Reihenfolge / Theme-Injection greift 8.11 weiterhin.
   Computed-Style zeigt: filter: grayscale(1), border-radius: 4px,
   aspect-ratio: 5/7 — alles aus 8.11.
   
   FIX: Spezifität mit "html body" hochziehen (gleicher Trick
   wie in 22.6 für FAQ-Antworten).
   
   TWEAK:
   - max-width: 220px → Foto-Größe anpassen
   - border-radius: 50% → für eckig: 8px
*/

html body .bb-experts .fn__team__member__image,
html body .bb-experts .fn__team__member .fn__team__member__image {
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    width: 100% !important;
    max-width: 220px !important;       /* <-- Foto-Größe tweaken */
    height: auto !important;
    margin: 0 auto !important;
}

html body .bb-experts .fn__team__member__image-el,
html body .bb-experts .fn__team__member__image img,
html body .bb-experts .fn__team__member img {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    filter: none !important;           /* <-- Farbe statt Grayscale */
    object-fit: cover !important;
    object-position: center top !important;
    transition: none !important;
}

/* Hover-Effekt komplett deaktivieren */
html body .bb-experts .fn__team__member__a:hover img,
html body .bb-experts .fn__team__member__a:hover .fn__team__member__image-el,
html body .bb-experts .fn__team__member__a:hover .fn__team__member__image img,
html body .bb-experts .fn__team__member:hover .fn__team__member__a:not(:hover) img,
html body .bb-experts .fn__team__member:hover .fn__team__member__a:not(:hover) .fn__team__member__image-el,
html body .bb-experts .fn__team__member:hover .fn__team__member__a:not(:hover) .fn__team__member__image img {
    filter: none !important;
}


/* ============================================================
   ENDE 25.2 v2
   ============================================================ */




/* ============================================================
   25.3 CTA-BEREICH — Lücke Subline → Kalender entfernen
   ============================================================
   
   PROBLEM: Ocean-Theme setzt min-height: 300px mit ID-Selektor
   (#hs_cos_wrapper_widget_XXX) auf .ocean_cta__wraper-el.
   
   FIX: ID-Selektor matchen mit attribute-Selektor [id*=...]
   damit Spezifität gleich hoch ist und !important durchgreift.
*/
html body .dnd-section:has(.bb-final-cta) {
    padding-top: 30px !important;      /* <-- TWEAK */
    padding-bottom: 30px !important;   /* <-- TWEAK */
}
[id*="hs_cos_wrapper"] .bb-final-cta .ocean_cta__wraper-el,
[id*="hs_cos_wrapper"] .bb-final-cta .ocean_cta__wrap {
    min-height: 0 !important;
    height: auto !important;
}


/* ============================================================
   ENDE BLOCK 25
   ============================================================ */

/* ============================================================
   25.4 v3 — Akzentlinie nur unter Text-Breite
   ============================================================
   
   ERSETZT 25.4 v2.
   
   ÄNDERUNG: display: inline-block, damit ::after nur die
   Text-Breite umspannt statt den ganzen Container.
   text-align: center bleibt am Eltern-Container erhalten.
*/

/* Beide Header — Basis-Styling */
html body .bb-benefits-list .before__after_heading h2,
html body .bb-benefits-list .before__after_heading h3,
html body .bb-benefits-list .before__after_heading h4,
html body .before__after_heading h2,
html body .before__after_heading h3,
html body .before__after_heading h4 {
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    color: var(--bb-dark) !important;
    margin: 0 0 14px 0 !important;
    position: relative !important;
    padding-bottom: 14px !important;
    display: inline-block !important;       /* <-- nur Text-Breite */
}

/* Akzentlinie unter Text */
html body .bb-benefits-list .before__after_heading h2::after,
html body .bb-benefits-list .before__after_heading h3::after,
html body .bb-benefits-list .before__after_heading h4::after,
html body .before__after_heading h2::after,
html body .before__after_heading h3::after,
html body .before__after_heading h4::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    width: 100% !important;
    height: 2px !important;
    background: var(--bb-primary) !important;
}

/* Rechte Spalte ("Mit Oracle TRCS"): Header in Primary-Blau */
html body .bb-benefits-list .before__after_item:has(.before__after_heading) > *:last-child h2,
html body .bb-benefits-list .before__after_item:has(.before__after_heading) > *:last-child h3,
html body .bb-benefits-list .before__after_item:has(.before__after_heading) > *:last-child h4,
html body .before__after_item:has(.before__after_heading) > *:last-child h2,
html body .before__after_item:has(.before__after_heading) > *:last-child h3,
html body .before__after_item:has(.before__after_heading) > *:last-child h4 {
    color: var(--bb-primary) !important;
}


/* ============================================================
   ENDE 25.4 v3
   ============================================================ */

/* ============================================================
   25.5 SEKTION 8 — "Grenzen" wieder rot
   ============================================================
   
   PROBLEM: Block 16.2 setzt mit weiter Selektor-Liste
   .bb-limits .fn__rich_text span { color: white } — das
   überschreibt Block 24.2 (.bb-limit-word).
   
   FIX: Spezifität mit "html body" + Selektor-Tiefe hochziehen.
   
   TWEAK: --bb-limit-red in Block 24.1 falls Farbe geändert
   werden soll. Hier bleibt's beim aktuellen Token-Wert.
*/

html body .bb-limits .bb-limit-word,
html body .bb-limits .fn__rich_text .bb-limit-word,
html body .bb-limits .fn__rich_text_int .bb-limit-word,
html body .bb-limits span.bb-limit-word {
    color: var(--bb-limit-red) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--bb-limit-red) !important;
    text-decoration-thickness: 1.5px !important;
    text-underline-offset: 4px !important;
    text-decoration-skip-ink: none !important;
}


/* ============================================================
   ENDE 25.5
   ============================================================ */

/* ============================================================
   25.5 v2 — "Grenzen" rot: Inline-Style überschreiben
   ============================================================
   
   ERSETZT 25.5 v1.
   
   PROBLEM: Eltern-Span hat style="color: #ffffff" (Inline aus
   HubSpot-Editor). Block 16.2 setzt zusätzlich auf
   .bb-limits span { color: var(--bb-white) }.
   
   Unsere Regel mit var(--bb-limit-red) wird durch nachfolgende
   Regel-Reihenfolge oder Token-Resolution überschrieben.
   
   FIX: 
   1) Hardcoded Farbwert statt CSS-Variable (kein Token-Risiko)
   2) Maximale Spezifität: html body + Tag + Klasse
   3) span.bb-limit-word direkt addressieren — nicht die
      Eltern-Spans
*/

html body .bb-limits span.bb-limit-word,
html body .bb-limits .fn__rich_text span.bb-limit-word,
html body .bb-limits .fn__rich_text_int span.bb-limit-word,
html body .bb-limits h1 span.bb-limit-word,
html body .bb-limits h2 span.bb-limit-word,
html body .bb-limits h3 span.bb-limit-word,
html body .bb-limits p span.bb-limit-word {
    color: #c02222 !important;
    text-decoration: underline !important;
    text-decoration-color: #c02222 !important;
    text-decoration-thickness: 1.5px !important;
    text-underline-offset: 4px !important;
    text-decoration-skip-ink: none !important;
}


/* ============================================================
   ENDE 25.5 v2
   ============================================================ */

/* ============================================================
   25.6 CTA-BEREICH — dezenter Glanz (gegen "Wand"-Wirkung)
   ============================================================
   
   Die finale CTA-Sektion (Heading + Person + Kalender) wirkt
   durch den großen weißen Kalender-Block auf reinem Navy zu
   schwer. Lösung: gleiche Glanz-Lichter wie Sektion 3
   "Ausgangslage" einsetzen — gibt der Sektion Tiefe ohne
   den Navy-Rhythmus zu brechen.
   
   ANSATZ: Die beiden Sections (Ocean CTA mit Heading + Section
   mit Meeting-iframe) bekommen einen gemeinsamen "Glanz" via
   Pseudo-Elementen. Da es zwei separate Sections sind,
   setzen wir die Lichter pro Section.
   
   TWEAK:
   - Lichter-Position: top/left/bottom/right
   - Lichter-Größe: width/height
   - Intensität: rgba-Alpha-Werte
*/


/* ---- 25.6.1 Section mit Heading (oben) ---- */

html body .dnd-section:has(.bb-final-cta) {
    position: relative !important;
    overflow: hidden !important;
}

html body .dnd-section:has(.bb-final-cta) > .row-fluid-wrapper,
html body .dnd-section:has(.bb-final-cta) > .row-fluid {
    position: relative !important;
    z-index: 2 !important;
}

html body .dnd-section:has(.bb-final-cta)::before {
    content: "" !important;
    position: absolute !important;
    top: -10% !important;
    left: -200px !important;
    width: 700px !important;
    height: 700px !important;
    background: radial-gradient(
        circle,
        rgba(0, 107, 167, 0.30) 0%,
        rgba(74, 159, 209, 0.15) 40%,
        transparent 70%
    ) !important;
    filter: blur(100px) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    border-radius: 50% !important;
}


/* ---- 25.6.2 Section mit Kalender (unten) ---- */

html body .dnd-section:has(.meetings-iframe-container) {
    position: relative !important;
    overflow: hidden !important;
}

html body .dnd-section:has(.meetings-iframe-container) > .row-fluid-wrapper,
html body .dnd-section:has(.meetings-iframe-container) > .row-fluid {
    position: relative !important;
    z-index: 2 !important;
}

html body .dnd-section:has(.meetings-iframe-container)::after {
    content: "" !important;
    position: absolute !important;
    bottom: -10% !important;
    right: -200px !important;
    width: 800px !important;
    height: 800px !important;
    background: radial-gradient(
        circle,
        rgba(74, 159, 209, 0.25) 0%,
        rgba(11, 95, 165, 0.15) 40%,
        transparent 70%
    ) !important;
    filter: blur(100px) !important;
    z-index: 0 !important;
    pointer-events: none !important;
    border-radius: 50% !important;
}


/* ---- 25.6.3 Responsive: Lichter kleiner auf Tablet/Mobile ---- */

@media (max-width: 991px) {
    html body .dnd-section:has(.bb-final-cta)::before,
    html body .dnd-section:has(.meetings-iframe-container)::after {
        width: 500px !important;
        height: 500px !important;
        filter: blur(80px) !important;
    }
}


/* ============================================================
   ENDE 25.6
   ============================================================ */


/* ============================================================
   25.7 CTA-RHYTHMUS — Kalender-Sektion off-white
   ============================================================
   
   ÄNDERUNG:
   - "Nächster Schritt" + Heading bleiben dunkel (Navy)
   - Kalender-Sektion (Person + iframe) wird off-white
   - Person-Card-Texte wechseln auf dark/slate
   
   Damit zerbricht der große Navy-Block in zwei Sektionen
   und der Hell-/Dunkel-Rhythmus der Seite bleibt erhalten.
   
   ÜBERSCHREIBT:
   - Block 23 (Person-Card-Texte weiß)
   - Block 25.6 (Glanz-Lichter — werden nicht mehr gebraucht)
*/


/* ---- 25.7.1 Glanz-Lichter aus 25.6 deaktivieren ---- */

html body .dnd-section:has(.bb-final-cta)::before,
html body .dnd-section:has(.meetings-iframe-container)::after {
    display: none !important;
    content: none !important;
}


/* ---- 25.7.2 Kalender-Sektion: Hintergrund off-white ---- */

html body .dnd-section:has(.meetings-iframe-container) {
    background-color: var(--bb-off-white) !important;
}


/* ---- 25.7.3 Person-Card: Texte auf dunkel/slate ---- */

html body .bb-cta-person .fn__card__member__cont-title,
html body .bb-cta-person h4.fn__card__member__cont-title {
    color: var(--bb-dark) !important;
}

html body .bb-cta-person .fn__card__member__cont-jtitle,
html body .bb-cta-person h5.fn__card__member__cont-jtitle {
    color: var(--bb-slate) !important;
}


/* ============================================================
   ENDE 25.7
   ============================================================ */

/* ============================================================
   25.8 KALENDER-SEKTION — mehr Abstand oben
   ============================================================
   
   ÜBERSCHREIBT 23.8 (padding-top: 30px).
   
   TWEAK: padding-top-Wert anpassen.
*/

html body .dnd-section:has(.meetings-iframe-container) {
    padding-top: 100px !important;     /* <-- TWEAK */
}


/* ============================================================
   ENDE 25.8
   ============================================================ */

/* ============================================================
   25.10 v2 — Experten Text + Social mittig
   ============================================================
   
   ERSETZT 25.10 v1.
   
   ÄNDERUNG: zusätzlicher Klassenname .fn__team__member__cont-social
   für die Social-Icons-Zeile (echter DOM-Name).
*/

html body .bb-experts .fn__team__member,
html body .bb-experts .fn__team__member__a,
html body .bb-experts .fn__team__member__cont,
html body .bb-experts .fn__team__member__info {
    text-align: center !important;
}

html body .bb-experts .fn__team__member__name,
html body .bb-experts .fn__team__member__title,
html body .bb-experts .fn__team__member__job,
html body .bb-experts .fn__team__member h3,
html body .bb-experts .fn__team__member h4 {
    text-align: center !important;
}

/* Social-Icons zentrieren */
html body .bb-experts .fn__team__member__cont-social,
html body .bb-experts .fn__team__member__social,
html body .bb-experts .fn__team__member__socials,
html body .bb-experts .fn__team__social,
html body .bb-experts .fn__team__socials {
    display: flex !important;
    justify-content: center !important;
}


/* ============================================================
   ENDE 25.10 v2
   ============================================================ */

/* ============================================================
   26. SEKTION "PLATTFORM-VORTEILE" — 3×2 Line-Box auf Dark Navy
   v8 — Outro-Satz weiß + Abstand zum Grid
   ============================================================

   Tweak-Werte:
   - padding-top Section: 260px
   - padding-bottom Section: 100px
   - Outro margin-top: 56px (Abstand Grid → Schluss-Satz)
   - column-gap: 60px / row-gap: 48px
*/

.dnd-section:has(.bb-platform-benefits) {
    background-color: var(--bb-dark) !important;
    padding-top: 80px !important;
    padding-bottom: 100px !important;
}

.dnd-section:has(.bb-platform-benefits) .dnd-row {
    margin-top: 0 !important;
}

/* Meta-Label "PLATTFORM-VORTEILE" */
.dnd-section:has(.bb-platform-benefits) p span[style*="color"] {
    color: var(--bb-white) !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

.dnd-section:has(.bb-platform-benefits) h2 {
    color: var(--bb-white) !important;
    margin-bottom: 24px !important;
}
.dnd-section:has(.bb-platform-benefits) h2 span[style*="color"] {
    color: var(--bb-white) !important;
}

.dnd-section:has(.bb-platform-benefits) p {
    margin-bottom: 12px !important;
}

/* ----- Grid ----- */
.bb-platform-benefits,
.bb-platform-benefits.fn__line__box {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    column-gap: 60px !important;
    row-gap: 48px !important;
}

.bb-platform-benefits > .fn__line__box-el {
    width: auto !important;
    min-width: 0 !important;
    flex: none !important;
    display: block !important;
}

.bb-platform-benefits .fn__line__box_wrapper {
    display: block !important;
    width: 100% !important;
}

.bb-platform-benefits .fn__line-title-el {
    font-family: var(--bb-font-headline) !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    color: var(--bb-white) !important;
    margin: 0 0 8px 0 !important;
}

.bb-platform-benefits .fn__line-content-el,
.bb-platform-benefits .fn__line-content-el p,
.bb-platform-benefits .fn__line-content {
    color: var(--bb-white) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

/* ----- Outro-Satz "Entscheidend ist nicht..." -----
   Sitzt in einem Rich-Text-Modul NACH dem Grid-Modul,
   innerhalb derselben dnd-section.
   Wir greifen das letzte Rich-Text-Modul der Section.

   Tweak: margin-top am Modul-Wrapper für Abstand zum Grid
*/
.dnd-section:has(.bb-platform-benefits) .widget-type-rich_text:last-of-type {
    margin-top: 56px !important;
}

/* Outro-Text auf weiß */
.dnd-section:has(.bb-platform-benefits) em,
.dnd-section:has(.bb-platform-benefits) em span,
.dnd-section:has(.bb-platform-benefits) em span[style*="color"] {
    color: var(--bb-white) !important;
}

@media (max-width: 991px) {
    .bb-platform-benefits,
    .bb-platform-benefits.fn__line__box {
        grid-template-columns: 1fr !important;
        row-gap: 32px !important;
    }
    .dnd-section:has(.bb-platform-benefits) {
        padding-top: 100px !important;
        padding-bottom: 60px !important;
    }
    .dnd-section:has(.bb-platform-benefits) .widget-type-rich_text:last-of-type {
        margin-top: 40px !important;
    }
}


/* ============================================================
   23. BB-INTRO-SPLIT — generischer 2-Spalten-Intro-Block
   ============================================================
   Ziel:
   - Wiederverwendbarer Intro-Block in 2 Spalten (Text links,
     Text + Visual rechts) für Technologie-/Themenseiten.
   - Eigene Klasse, damit wir uns nicht mit dem bestehenden
     .bb-intro (Bullet-Styling) ins Gehege kommen.
   - Anwendung: Klasse "bb-intro-split" auf den Fancy-Rich-Text-
     Modulen (links + rechts) bzw. auf dem umgebenden Section-
     Container vergeben.

   Was dieser Block macht:
   - Listen bekommen Trennstriche zwischen den Items (siehe
     Referenz Screenshot 3 – "ZIELGRUPPEN & EINORDNUNG"-Sektion).
   - Etwas mehr Atemraum zwischen Tag, Headline und Body.
   - Optionaler "NEU"-Pill direkt neben dem Tag (Markup:
     <span class="bb-tag-badge">NEU</span> im Rich-Text-Editor
     direkt hinter dem Tag-Text einfügen).
   - Image-/Visual-Platzhalter mit dezenten abgerundeten Ecken.
   ============================================================ */

/* ---- 23.1 Spaltenabstand: HubSpot D&D-Spalten zu Flex umbauen ----
   HubSpot baut die Spalten als Bootstrap-Floats (.row-fluid > .span6).
   column-gap greift dort nicht. Wir machen den row-fluid Container
   innerhalb der bb-intro-split-Section zu Flex und geben sauberen Gap.
   Reicht, wenn die Klasse bb-intro-split auf EINEM Modul der Section
   sitzt – die ganze Section wird über :has() zur 2-Spalten-Sektion. */

.dnd-section:has(.bb-intro-split) > .row-fluid {
    display: flex !important;
    column-gap: 48px !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    box-sizing: border-box !important;
}

.dnd-section:has(.bb-intro-split) > .row-fluid > .span6.dnd-column,
.dnd-section:has(.bb-intro-split) > .row-fluid > .widget-span.dnd-column {
    float: none !important;
    margin-left: 0 !important;
    width: auto !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

/* ---- 23.2 Tag + Headline / Headline + Body Abstände ---- */
.bb-intro-split .oc__row__text-tag,
.bb-intro-split .kicker,
.bb-intro-split .fn__rich_text_int > p:first-child,
.bb-intro-split .fn__rich_text-el > p:first-child {
    margin-bottom: 18px !important;
}

.bb-intro-split h2,
.bb-intro-split .oc__row__text-h {
    margin-bottom: 24px !important;
    line-height: 1.15 !important;
}

.bb-intro-split p {
    margin-bottom: 16px !important;
}

/* ---- 23.3 Listen mit feiner Trennlinie zwischen den Items ---- */
.bb-intro-split ul,
.bb-intro-split ol {
    margin: 8px 0 24px 0 !important;
}

.bb-intro-split ul li,
.bb-intro-split ol li {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid var(--bb-border) !important;
}

.bb-intro-split ul li:first-child,
.bb-intro-split ol li:first-child {
    padding-top: 0 !important;
}

.bb-intro-split ul li:last-child,
.bb-intro-split ol li:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* Chevron-Position nach unten anpassen, damit er optisch mittig
   zur ersten Textzeile sitzt (Bullets aus Block 16.1 sind oben
   auf top: 1px positioniert – mit dem neuen Padding sieht das
   sonst zu hoch aus). */
.bb-intro-split ul li::before,
.bb-intro-split ol li::before {
    top: 15px !important;
}

.bb-intro-split ul li:first-child::before,
.bb-intro-split ol li:first-child::before {
    top: 1px !important;
}

/* ---- 23.4 Optionaler "NEU"-Pill neben dem Tag ----
   Markup im Rich-Text-Editor direkt nach dem Tag einsetzen:
     ZIELGRUPPEN & EINORDNUNG <span class="bb-tag-badge">NEU</span>
*/
.bb-intro-split .bb-tag-badge,
.bb-tag-badge {
    display: inline-block !important;
    margin-left: 10px !important;
    padding: 2px 8px !important;
    border: 1px solid #d6c060 !important;
    border-radius: 4px !important;
    font-family: var(--bb-font-body) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    color: #8c7320 !important;
    background: #fcf7df !important;
    vertical-align: middle !important;
    line-height: 1.4 !important;
}

/* ---- 23.5 Visual-/Image-Platzhalter rechts ----
   Greift in der gesamten Section (über :has) und nicht nur im
   Modul mit der Klasse, weil das Image in der ZWEITEN Spalte
   sitzt und dort eigene Module hat. */
.dnd-section:has(.bb-intro-split) img,
.dnd-section:has(.bb-intro-split) .hs_cos_wrapper_type_linked_image,
.dnd-section:has(.bb-intro-split) .hs_cos_wrapper_type_image_src,
.dnd-section:has(.bb-intro-split) .hs-image-widget,
.bb-intro-split img {
    border-radius: 12px !important;
}

/* ---- 23.6 Responsive ----
   Tablet/Mobile: Spalten untereinander statt nebeneinander. */
@media (max-width: 991px) {
    .dnd-section:has(.bb-intro-split) > .row-fluid {
        flex-direction: column !important;
        column-gap: 0 !important;
        row-gap: 40px !important;
    }
    .dnd-section:has(.bb-intro-split) > .row-fluid > .span6.dnd-column,
    .dnd-section:has(.bb-intro-split) > .row-fluid > .widget-span.dnd-column {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    .bb-intro-split h2,
    .bb-intro-split .oc__row__text-h {
        margin-bottom: 18px !important;
    }
}

/* ============================================================
   ENDE BLOCK 23 — bb-intro-split
   ============================================================ */


/* ============================================================
   ENDE DES STYLESHEETS v20
   ============================================================ */



/* ============================================================
   PATCH — bb-platform-tabs CTA: Wasserfall-Hover (Standard)
   v1 (Oracle-Stylesheet) — gleicher Effekt wie bb-cta-onestream:
   Weiss laeuft von oben rein, blauer Rand bleibt, Text weiss->blau,
   keine Unterstreichung.
   ============================================================ */

body .bb-platform-tabs__cta {
    position: relative !important;      /* fuer ::before-Wasserfall */
    overflow: hidden !important;
    z-index: 1 !important;
    background-color: var(--bb-primary) !important;
    color: #ffffff !important;
    padding: 10px 26px !important;      /* -2px ggue. Border, Groesse bleibt gleich */
    border: 2px solid var(--bb-primary) !important;   /* blauer Rand bleibt beim Hover */
    transition: color 0.35s ease !important;
    text-decoration: none !important;
}

/* Wasserfall-Layer: Weiss startet oberhalb, faehrt bei Hover rein */
body .bb-platform-tabs__cta::before {
    content: '' !important;
    position: absolute !important;
    top: -100% !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: #ffffff !important;
    transition: top 0.35s ease !important;
    z-index: -1 !important;
}

body .bb-platform-tabs__cta:hover::before {
    top: 0 !important;
}

body .bb-platform-tabs__cta:hover {
    background-color: var(--bb-primary) !important;
    color: var(--bb-primary) !important;   /* Text wird blau */
    text-decoration: none !important;
}



/* ---- Utility: padding-bottom 0 (opt-in pro Section) ---- */
.dnd-section.bb-pb-0,
.dnd-section:has(.bb-pb-0) {
  padding-bottom: 0 !important;
}




/* =========================================================
   BLOCK 24 — Mehrwert-Kacheln (.bb-benefits-list)
   v1.0 · 14.10.2026 · Pilot: Oracle ARCS
   Ocean "Fancy List" im Modus "Numbers" (Counter: Decimal leading zero)
   → 2-spaltige Navy-Kacheln laut Mockup (Sektion 6)
   Ablage: Stylesheet_allgemein_fuer-ocean-module.css (Ende anhängen)

   TWEAK-WERTE
   Kachel-Hintergrund ... #1a2d42 (Navy 2)
   Grid-Abstand ......... 14px (Zeile) / 24px (Spalte)
   Kachel-Padding ....... 18px 22px · Radius 6px
   Text ................. #ffffff · 15px · 500 · line-height 1.5
   Ziffer ............... Poppins 14px · 600 · rgba(74,159,209,.95)
   Breakpoint mobil ..... 767px → 1 Spalte
   ========================================================= */

.bb-benefits-list .fn__fancy__list-ol {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px 24px !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.bb-benefits-list .fn__fancy__list-li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 18px 22px !important;
  background: #1a2d42 !important;
  border-radius: 6px !important;
}

.bb-benefits-list .fn__fancy__list-li::before {
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  color: rgba(74, 159, 209, 0.95) !important;
  flex-shrink: 0 !important;
  padding-top: 1px !important;
  margin: 0 !important;
  position: static !important;
  min-width: 0 !important;
  width: auto !important;
}

.bb-benefits-list .fn__fancy__list-li,
.bb-benefits-list .fn__fancy__list-li div,
.bb-benefits-list .fn__fancy__list-label {
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

@media (max-width: 767px) {
  .bb-benefits-list .fn__fancy__list-ol {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   BLOCK 25 — Textlinks auf hellen Sektionen
   v1.0 · 15.10.2026 · Pilot: Oracle ARCS
   Problem: Theme-Linkfarbe ist global #FFFFFF (Ocean text.links)
   → Links im Fließtext auf weißem/grauem Grund unsichtbar.
   Gilt für: Content Column(s) "Was ist …" (.bb-what-is-trcs)
             FAQ-Accordion (.bb-faq)
   Werte aus Mockup (.bb-inline-link)

   TWEAK-WERTE
   Linkfarbe ........ #0b5fa5 (--bb-primary)
   Hover ............ #0b1f3a (--bb-primary-hover)
   Unterstreichung .. Abstand 3px
   ========================================================= */

.bb-what-is-trcs .oc__row__text-content a,
.bb-what-is-trcs .oc__row__text-content a strong,
.bb-faq a,
.bb-faq a strong {
  color: #0b5fa5 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

.bb-what-is-trcs .oc__row__text-content a:hover,
.bb-what-is-trcs .oc__row__text-content a:hover strong,
.bb-faq a:hover,
.bb-faq a:hover strong {
  color: #0b1f3a !important;
}


/* =========================================================
   BLOCK 26 — Textlinks auf hellen Sektionen
   v1.1 · 15.10.2026 · Oracle ARCS / Hyperion DRM
   Problem: Theme-Linkfarbe ist global #FFFFFF (Ocean text.links)
   → Links im Fließtext auf weißem/grauem Grund unsichtbar.
   Gilt für: Content Column(s) "Was ist …" (.bb-what-is-trcs)
             FAQ-Accordion (.bb-faq)
             jedes Modul mit Zusatzklasse .bb-light-links  (NEU v1.1)
   Werte aus Mockup (.bb-inline-link)

   TWEAK-WERTE
   Linkfarbe ........ #0b5fa5 (--bb-primary)
   Hover ............ #0b1f3a (--bb-primary-hover)
   Unterstreichung .. Abstand 3px
   ========================================================= */

.bb-what-is-trcs .oc__row__text-content a,
.bb-what-is-trcs .oc__row__text-content a strong,
.bb-faq a,
.bb-faq a strong,
.bb-light-links a,
.bb-light-links a strong {
  color: #0b5fa5 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

.bb-what-is-trcs .oc__row__text-content a:hover,
.bb-what-is-trcs .oc__row__text-content a:hover strong,
.bb-faq a:hover,
.bb-faq a:hover strong,
.bb-light-links a:hover,
.bb-light-links a:hover strong {
  color: #0b1f3a !important;
}



/* =========================================================
   BLOCK 27 — Vergleichs-Sektion (Fancy List Before/After + Intro)
   v1.0 · 15.10.2026 · Pilot: Oracle Hyperion DRM (Abgrenzung zu EDMCS)
   Problem: Regel ":has(.bb-benefits-list) { padding-top: 60px !important }"
   (template_St…le.css:3767) greift auch hier, weil die Liste die Klasse
   bb-benefits-list trägt. Hier steht das Intro aber in DERSELBEN Sektion
   → Sektion braucht normales Padding oben.
   Gilt nur für Sektionen mit .bb-drm-vs-edmcs.

   TWEAK-WERTE
   padding-top ...... var(--bb-section-pad)  (= 80px, globaler Standard)
   ========================================================= */

html body .dnd-section.dnd-section.dnd-section.dnd-section:has(.bb-drm-vs-edmcs) {
  padding-top: var(--bb-section-pad) !important;
}



.bb-challenges-list.bb-grid-3x2,
.bb-challenges-list.bb-grid-3x2.fn__line__box {
    grid-template-columns: 1fr 1fr 1fr !important;
}

@media (max-width: 991px) {
    .bb-challenges-list.bb-grid-3x2,
    .bb-challenges-list.bb-grid-3x2.fn__line__box {
        grid-template-columns: 1fr !important;
        row-gap: 32px !important;
    }
}


/* =========================================================
   BLOCK 28 — Weiterführende Seiten (Cross-Link Cards) im Mockup-Look
   v1.0 · 16.10.2026 · Pilot: Oracle HFM
   Werte 1:1 aus Mockup (.bb-card-3 / .bb-cards-3-grid / .bb-meta-label).
   Greift NUR, wenn im Modul "Bluebird Cross-Link Cards" das Feld
   Anker-ID = weiterfuehrende-seiten gesetzt ist.
   Feld "Untertitel" der Karte = kleines graues Label über dem Titel.
   Alle anderen Cross-Link-Module bleiben unverändert.

   TWEAK-WERTE
   Spalten ............ 3 (≤ 991px: 1)
   Kartenabstand ...... 25px
   Karte .............. weiß, Radius 12px, Rand 1px #f0f0f0,
                        Schatten 0 10px 30px rgba(0,0,0,.05), Innenabstand 30px
   Hover .............. -8px, Schatten 0 15px 40px rgba(0,0,0,.1)
   Label .............. Poppins 14px/600, #99acc2
   Titel .............. Poppins 20px/600, #0b5fa5
   Linktext ........... "Zur Seite ›" 14px/600, #0b5fa5
   ========================================================= */

#weiterfuehrende-seiten.bb-crosslink-cards .bb-crosslink-cards__header {
    margin-bottom: 30px;
}

#weiterfuehrende-seiten .bb-crosslink-cards__tag {
    position: relative;
    font-size: 12px;
    letter-spacing: 1.5px;
    padding-bottom: 8px;
    margin-bottom: 14px;
}

#weiterfuehrende-seiten .bb-crosslink-cards__tag::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background: var(--bb-primary, #0b5fa5);
}

#weiterfuehrende-seiten .bb-crosslink-cards__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

#weiterfuehrende-seiten .bb-crosslink-cards__card,
#weiterfuehrende-seiten .bb-crosslink-cards__card--nolink:hover {
    display: flex;
    flex-direction: column;
    background-color: #fff !important;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    padding: 30px;
    transform: none;
}

#weiterfuehrende-seiten .bb-crosslink-cards__card:not(.bb-crosslink-cards__card--nolink):hover {
    background-color: #fff !important;
    border-left-width: 1px;
    border-left-color: #f0f0f0;
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

/* Untertitel als Label über dem Titel */
#weiterfuehrende-seiten .bb-crosslink-cards__subtitle {
    order: -1;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #99acc2;
    margin: 0 0 14px 0;
}

#weiterfuehrende-seiten .bb-crosslink-cards__title {
    font-family: 'Poppins', sans-serif;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--bb-primary, #0b5fa5) !important;
    line-height: 1.3;
    margin: 0 0 16px 0;
}

#weiterfuehrende-seiten a.bb-crosslink-cards__card::after {
    content: 'Zur Seite \203A';
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--bb-primary, #0b5fa5);
}

@media (max-width: 991px) {
    #weiterfuehrende-seiten .bb-crosslink-cards__grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   BLOCK 29 — Feinschliff Module bb-text-two-col + bb-kernbereiche
   v1.0 · 16.10.2026 · Pilot: Oracle Hyperion Planning
   ========================================================= */

/* ---- A) bb-text-two-col: beide feinen grauen Striche entfernen (alle Seiten)
   1. Strich oben in grauen Sektionen (.bb-ttc--grey)
   2. Strich über der Schlusszeile (.bb-ttc__fin)
   TWEAK: Abstand über der Schlusszeile bleibt 36px, Innenabstand oben 0 */

.bb-ttc.bb-ttc--grey {
    border-top: none !important;
}

.bb-ttc .bb-ttc__fin {
    border-top: none !important;
    padding-top: 0 !important;
}

/* ---- B) bb-kernbereiche: Kartentitel blau wie im Mockup
   Wird aktuell von einer globalen h3-Regel übersteuert.
   TWEAK: Farbe #0b5fa5, Poppins 20px / 600 */

.bb-kernbereiche .bb-card-3 h3 {
    color: var(--bb-primary, #0b5fa5) !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}