/* ============================================================
   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: 12px !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: 12px !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
   ============================================================ */


/* ============================================================
   23.9 Ocean-CTA inneres Padding reduzieren
   ============================================================
   
   PROBLEM: Block 8.12 setzt .bb-final-cta padding 100px
   oben/unten. Das war für den eigenständigen CTA mit Button
   sinnvoll, jetzt mit Person+Kalender drunter zu viel.
   
   FIX: Padding deutlich reduzieren.
   
   TWEAK: padding-Werte anpassen.
*/

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


/* ============================================================
   ENDE 23.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
   ============================================================ */

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




/* ============================================================
   24. RECHTSTEXTE (Impressum / Datenschutzerklärung)
   v1.2 · 26.10.2026 · nur bb-legal*-Selektoren, nichts Globales · Quelle: Mockups Impressum + Datenschutzerklärung
   Am Ende von /Stylesheet_allgemein_fuer-ocean-module.css einfügen
   (nach Block 23.10). !important nötig gegen 7.2 + 16.1 (Fancy-Rich-Text-Bullets).

   Klassen (im Rich-Text-Quellcode setzen):
     .bb-legal-facts / .bb-legal-fact / .bb-legal-fact__label  Impressum, 4 Faktenkarten
     .bb-legal                                                  Rechtstext (beide Seiten)
     .bb-legal-g                                                Datenschutz: Raster TOC | Text
     .bb-legal-toc                                              Datenschutz: Inhaltsverzeichnis
     .bb-legal-addr                                             Datenschutz: Adressblock Abschnitt 2
     .bb-legal-src                                              Quellen-/Generator-Hinweis

   Tweak-Werte:
     Faktenkarten      4 Spalten · ≤960px 2 · ≤600px 1 · Gap 20px · Padding 22/22/20px
                       Top-Border 3px #0b5fa5 · Radius 0 0 10px 10px
     Rechtstext        max. 820px (Impressum) / 780px (Datenschutz)
     H3                22px · ≤600px 19px · Linie darüber 1px #e1e4e8
     Sprungziel        scroll-margin-top 90px
     TOC               260px breit · Gap 64px · sticky top 92px · ≤960px statisch darüber
   ============================================================ */

/* ---------- Impressum: Faktenkarten ---------- */
.bb-legal-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.bb-legal-fact {
  background: #ffffff;
  border: 1px solid #e1e4e8;
  border-top: 3px solid #0b5fa5;
  border-radius: 0 0 10px 10px;
  padding: 22px 22px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .04);
}
.bb-legal-fact .bb-legal-fact__label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #0b5fa5;
  margin-bottom: 10px;
}
.bb-legal-fact p {
  font-size: 14px !important;
  color: #33475b !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}
.bb-legal-fact p strong { color: #0b1f3a; font-weight: 600; }
.bb-legal-fact a { color: #0b5fa5 !important; text-decoration: none !important; font-weight: 600; }

/* ---------- Rechtstext (beide Seiten) ---------- */
.bb-legal { max-width: 820px; }
.bb-legal h3 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: #0b1f3a !important;
  line-height: 1.3 !important;
  margin: 44px 0 14px !important;
  padding-top: 22px !important;
  border-top: 1px solid #e1e4e8;
  scroll-margin-top: 90px;
}
.bb-legal h3:first-of-type { margin-top: 8px !important; padding-top: 0 !important; border-top: none; }
.bb-legal h3 .no { color: #0b5fa5; margin-right: 8px; }
.bb-legal h4 {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: #0b1f3a !important;
  margin: 22px 0 6px !important;
}
.bb-legal p { font-size: 15px !important; line-height: 1.75 !important; margin: 0 0 14px !important; }
.bb-legal a { color: #0b5fa5 !important; font-weight: 600; text-decoration: none !important; word-break: break-word; }
.bb-legal ul { list-style: none !important; margin: 6px 0 16px !important; padding: 0 !important; }
.bb-legal ul li {
  list-style: none !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  padding: 6px 0 6px 22px !important;
  margin: 0 !important;
  position: relative !important;
}
.bb-legal ul li::before {
  content: '\203a' !important;
  position: absolute !important;
  left: 4px !important;
  top: 6px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  font-weight: 700 !important;
  color: #0b5fa5 !important;
}
.bb-legal .intro p { font-size: 16px !important; }
.bb-legal .bb-legal-src {
  font-size: 13px !important;
  color: #99acc2 !important;
  margin-top: 36px !important;
  padding-top: 18px;
  border-top: 1px solid #e1e4e8;
}

/* ---------- Datenschutz: Raster + Inhaltsverzeichnis ---------- */
.bb-legal-g {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.bb-legal-g .bb-legal { max-width: 780px; }
.bb-legal-g .bb-legal h3 { margin-top: 48px !important; padding-top: 24px !important; }
.bb-legal-g .bb-legal h3:first-of-type { margin-top: 8px !important; padding-top: 0 !important; }
.bb-legal-g .bb-legal .bb-legal-src { margin-top: 40px !important; }

.bb-legal-toc {
  position: sticky;
  top: 92px;
  background: #f5f6f7;
  border: 1px solid #e1e4e8;
  border-radius: 10px;
  padding: 22px 20px;
  max-height: calc(100vh - 120px);
  overflow: auto;
}
.bb-legal-toc .bb-legal-fact__label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #0b5fa5;
  margin-bottom: 12px;
}
.bb-legal-toc ol { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.bb-legal-toc li { list-style: none !important; margin: 0 !important; padding: 0 !important; border-bottom: 1px solid #e1e4e8; }
.bb-legal-toc li:last-child { border-bottom: none; }
.bb-legal-toc li::before { content: none !important; }
.bb-legal-toc a {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  font-size: 13px;
  line-height: 1.4;
  color: #33475b !important;
  text-decoration: none !important;
}
.bb-legal-toc a span { color: #0b5fa5; font-weight: 700; min-width: 20px; }
.bb-legal-toc a:hover { color: #0b5fa5 !important; }

.bb-legal-addr {
  background: #f5f6f7;
  border-left: 3px solid #0b5fa5;
  padding: 18px 22px;
  margin: 8px 0 16px;
  font-size: 15px;
  line-height: 1.7;
  color: #33475b;
}
.bb-legal-addr p { margin: 0 !important; }
.bb-legal-addr strong { color: #0b1f3a; font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .bb-legal-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bb-legal-g { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .bb-legal-toc { position: static; max-height: none; }
}
@media (max-width: 600px) {
  .bb-legal-facts { grid-template-columns: minmax(0, 1fr); }
  .bb-legal h3 { font-size: 19px !important; }
}


/* ============================================================
   24.1 DATENSCHUTZ — Sticky-Inhaltsverzeichnis freigeben
   v1.0 · 27.10.2026
   Block 1 setzt overflow-x:hidden auf .body-wrapper, main, .dnd-section
   → blockiert position:sticky. clip statt hidden, NUR auf Seiten mit
   .bb-legal-g (Datenschutz). Alle anderen Seiten unverändert.
   ============================================================ */
.body-wrapper:has(.bb-legal-g),
main:has(.bb-legal-g),
.dnd-section:has(.bb-legal-g) {
  overflow-x: clip !important;
  overflow-y: visible !important;
}



<!-- Datenschutz: Sprunglinks im Inhaltsverzeichnis (27.10.2026)
     Theme-JS scrollt #-Links sonst ohne Header-Abstand (H3 landet unter dem Header).
     Greift nur auf Links in .bb-legal-toc. -->
<script>
document.addEventListener('click',function(e){
  var a=e.target.closest&&e.target.closest('.bb-legal-toc a[href^="#"]');
  if(!a)return;
  var el=document.getElementById(a.getAttribute('href').slice(1));
  if(!el)return;
  e.preventDefault();e.stopImmediatePropagation();
  el.scrollIntoView({behavior:'smooth',block:'start'});
  history.replaceState(null,'',a.getAttribute('href'));
},true);
</script>



/* ============================================================
   25. KONTAKT — Plattform-Pills (Rich Text „Über BLUEBIRD“)
   v1.0 · 27.10.2026 · Mockup Kontakt (.pills / .pill)
   Markup im Rich-Text-Quellcode:
   <div class="bb-pills"><a class="bb-pill" href="…"><i></i>Text</a> …</div>
   Tweak: Pill 7/16px · Radius 40px · Border 1.5px #e1e4e8 · Punkt 8px #0b5fa5
   ============================================================ */
.bb-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.bb-pills a.bb-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1.5px solid #e1e4e8;
  border-radius: 40px;
  padding: 7px 16px;
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: #0b1f3a !important;
  text-decoration: none !important;
  transition: border-color .2s, color .2s;
}
.bb-pills a.bb-pill:hover { border-color: #0b5fa5; color: #0b5fa5 !important; }
.bb-pills a.bb-pill i { width: 8px; height: 8px; border-radius: 50%; background: #0b5fa5; display: inline-block; }