/* =========================================================
   BB BRANDS — PREMIUM CLEANUP
   Color-discipline pass. Sits on top of premium-overlay.css
   and premium-overlay-v2.css. Same goal: editorial, mono-blue,
   premium — for ambitious D2C brands.

   Rules:
     • One brand color: blue (#5B6BFF + tonal range)
     • Headlines: white (#FAFAFA). Italic accents: same color
       as their parent headline (no rainbow gradients)
     • Magenta/Pink (#FF21A6, #FF66C4): GONE everywhere
     • Yellow (#FFDE59): GONE everywhere
     • Orange (#FB923C): RESERVED for *one* thing only —
       the giant money result number in calculators (the single
       eye-catch on the page)
     • Card thumbnails: a single blue family
     • All gradient meshes / strokes / shadows: blue tones only
   ========================================================= */

/* ---------- 0. TOKEN OVERRIDES ---------- */
:root {
    /* Kill the magenta/yellow tokens by aliasing them back to blue. */
    --bb-pink:        #5B6BFF !important;
    --bb-pink-light:  #7E8BFF !important;
    --bb-yellow:      #FAFAFA !important;
    --bb-magenta:     #5B6BFF !important;
    --pv2-magenta:    #5B6BFF !important;
    --pv2-orange:     #FB923C !important; /* kept, but used very sparingly */
    --accent:         #5B6BFF !important;
    --accent-text:    #FAFAFA !important;

    /* Brand-glow gradient — blue only */
    --bb-gradient-glow: linear-gradient(90deg, #5B6BFF, #7E8BFF, #3D4FE6) !important;

    /* Premium gradient stroke — pure blue range */
    --pv2-grad-stroke: linear-gradient(135deg,
        rgba(126, 139, 255, 0.55) 0%,
        rgba(91, 107, 255, 0.42) 35%,
        rgba(61, 79, 230, 0.32) 70%,
        rgba(126, 139, 255, 0.50) 100%) !important;
}

/* ---------- 1. HEADLINES — single white tone everywhere ---------- */
h1, h2, h3,
.hero h1, .hero--split h1, header.hero h1,
.section-title,
.hub-hero h1, .article-header h1,
.bottom-cta h2,
.form-card h2,
.calc-result h2 {
    color: #FAFAFA !important;
}

/* h3 / sub headings — slightly softer */
h4, h5, h6,
.card h3, .card-body h3,
.problem-card h3, .service-card h3, .guarantee-card h3,
.resource-card h3, .about-card h3, .tool-card h3, .step-card h3,
.layer h3, .lever h3, .phase h3 {
    color: #FAFAFA !important;
}

/* ---------- 2. ITALIC DISPLAY ACCENTS — match parent (white) ---------- */
/* Strip the orange gradient set up in premium-overlay.css and
   recolor every italic display accent to plain white. The italic
   serif font is enough — color noise gone. */
.hero h1 .accent,
.hero--split h1 .accent,
header.hero h1 .accent,
.section-title .accent,
.hub-hero h1 .accent,
.article-header h1 .accent,
.bottom-cta h2 .accent,
h1 .accent,
h2 .accent {
    background-image: none !important;
    background: none !important;
    background-color: transparent !important;
    color: #FAFAFA !important;
    -webkit-text-fill-color: #FAFAFA !important;
    -webkit-background-clip: initial !important;
            background-clip: initial !important;
}

/* ---------- 3. EYEBROWS — neutral chip with blue dot ---------- */
.eyebrow,
.crumbs {
    color: #A1A1AA !important;
}
.eyebrow::before,
.crumbs::before {
    background: #5B6BFF !important;
}

/* ---------- 4. STAT NUMBERS ---------- */
/* The big numbers stay blue. Their italic suffix is now ALSO blue
   (was orange) so the stat reads as a single coherent unit. */
.stat-card .stat-num,
.stat-num {
    color: #5B6BFF !important;
}
.stat-card .stat-num .stat-suffix,
.stat-num .stat-suffix,
.stat-suffix {
    color: #5B6BFF !important;
    opacity: 0.85;
}

/* ---------- 5. THE ONE ORANGE — calculator money result ---------- */
/* The giant result number on each calculator is the *only* place
   we use orange. It's the eye-catch that says "this is the answer". */
.result-big,
.calc-result .result-big,
.calc-result strong.result-big {
    color: #FB923C !important;
}
.result-big .pct,
.result-big .x,
.result-big .unit,
.result-big small {
    color: #FB923C !important;
    opacity: 0.85;
}

/* But: the smaller ranking colors inside calculators that used
   yellow/magenta now collapse to blue + white. */
.waterfall-row.total .waterfall-value,
.result-cell-value.warn,
.result-cell-value.danger {
    color: #FB923C !important; /* keep emphasis, but in our one accent */
}
.result-cell-value {
    color: #FAFAFA !important;
}

/* ---------- 6. CARD THUMBNAILS — mono blue family ---------- */
/* Replaces the multi-color thumbnails on wissen.html with a
   tonal blue range. Each card still has its own personality
   via direction + lightness, just without rainbow noise. */
.card-thumb.t1 { background-image: linear-gradient(135deg, #3D4FE6 0%, #7E8BFF 100%) !important; }
.card-thumb.t2 { background-image: linear-gradient(135deg, #5B6BFF 0%, #9CA8FF 100%) !important; }
.card-thumb.t3 { background-image: linear-gradient(135deg, #1E2A78 0%, #5B6BFF 100%) !important; }
.card-thumb.t4 { background-image: linear-gradient(135deg, #7E8BFF 0%, #3D4FE6 100%) !important; }
.card-thumb.t5 { background-image: linear-gradient(135deg, #5B6BFF 0%, #2A3499 100%) !important; }
.card-thumb.t6 { background-image: linear-gradient(135deg, #3D4FE6 0%, #9CA8FF 100%) !important; }
.card-thumb.t7 { background-image: linear-gradient(135deg, #5B6BFF 0%, #7E8BFF 100%) !important; }

/* Resource thumbnails on the index page (r1..r4) — same family. */
.resource-thumb.r1 { background: linear-gradient(135deg, #3D4FE6, #7E8BFF) !important; }
.resource-thumb.r2 { background: linear-gradient(135deg, #5B6BFF, #9CA8FF) !important; }
.resource-thumb.r3 { background: linear-gradient(135deg, #1E2A78, #5B6BFF, #7E8BFF) !important; }
.resource-thumb.r4 { background: linear-gradient(135deg, #7E8BFF, #3D4FE6) !important; }

/* ---------- 7. HERO MESH — blue-only blobs ---------- */
.hero::before,
.hero--split::before,
header.hero::before {
    background-image:
        radial-gradient(40% 50% at 20% 30%, rgba(91, 107, 255, 0.30) 0%, transparent 70%),
        radial-gradient(35% 45% at 78% 18%, rgba(126, 139, 255, 0.18) 0%, transparent 70%),
        radial-gradient(45% 55% at 60% 75%, rgba(61, 79, 230, 0.20) 0%, transparent 70%),
        radial-gradient(30% 35% at 12% 80%, rgba(91, 107, 255, 0.16) 0%, transparent 70%) !important;
}

/* ---------- 8. BUTTONS — kill magenta hover ---------- */
/* premium-overlay.css line 158 swaps to magenta on hover.
   Force blue-on-blue hover instead. */
.btn-primary,
.nav-cta,
.lm-submit,
.cta-primary,
.bottom-cta-btn,
.bottom-strip-btn,
.submit-btn {
    background: linear-gradient(180deg, #7E8BFF 0%, #5B6BFF 55%, #3D4FE6 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        inset 0 -1px 0 rgba(0, 0, 0, 0.28),
        0 1px 2px rgba(91, 107, 255, 0.55),
        0 10px 28px -8px rgba(91, 107, 255, 0.50),
        0 24px 64px -20px rgba(91, 107, 255, 0.42) !important;
}
.btn-primary:hover,
.nav-cta:hover,
.lm-submit:hover,
.cta-primary:hover,
.bottom-cta-btn:hover,
.bottom-strip-btn:hover,
.submit-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(180deg, #9CA8FF 0%, #7E8BFF 55%, #5B6BFF 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.36),
        inset 0 -1px 0 rgba(0, 0, 0, 0.26),
        0 1px 2px rgba(91, 107, 255, 0.55),
        0 14px 36px -8px rgba(126, 139, 255, 0.6),
        0 30px 80px -22px rgba(91, 107, 255, 0.5) !important;
}

/* CTA hover glow ring — pure blue */
.btn-primary::after,
.nav-cta::after,
.lm-submit::after,
.bottom-cta-btn::after,
.bottom-strip-btn::after,
.cta-primary::after,
.submit-btn::after {
    background: linear-gradient(135deg,
        rgba(126, 139, 255, 0.0) 0%,
        rgba(126, 139, 255, 0.55) 35%,
        rgba(91, 107, 255, 0.55) 65%,
        rgba(126, 139, 255, 0.0) 100%) !important;
}

/* Stack-card / hero-showcase shadow — strip the magenta layer */
.stack-card,
.hs-card {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 50px 120px -30px rgba(91, 107, 255, 0.32),
        0 24px 60px -20px rgba(0, 0, 0, 0.7),
        0 10px 30px -12px rgba(91, 107, 255, 0.22) !important;
}

/* ---------- 9. PHASE / LAYER / LEVER blocks — mono blue tints ---------- */
.phase,
.phase-header {
    background: linear-gradient(135deg, rgba(91, 107, 255, 0.10) 0%, rgba(91, 107, 255, 0.04) 100%) !important;
}
.phase-tag {
    background: rgba(91, 107, 255, 0.14) !important;
    color: #7E8BFF !important;
    border: 1px solid rgba(91, 107, 255, 0.30) !important;
}

.layer {
    background: linear-gradient(135deg, rgba(91, 107, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
}
.layer-num {
    color: #7E8BFF !important;
}

.lever-icon {
    background: rgba(91, 107, 255, 0.14) !important;
    color: #7E8BFF !important;
}

/* ---------- 10. BOTTOM-CTA panels — mono blue gradient ---------- */
.bottom-cta,
.bottom-strip {
    background: linear-gradient(135deg, #16161A 0%, #1B2363 100%) !important;
    border: 1px solid rgba(91, 107, 255, 0.32) !important;
}
.bottom-cta-eyebrow,
.bottom-strip-eyebrow {
    color: #7E8BFF !important;
}

/* ---------- 11. WISSEN-AI-CHECK hero gradient — blue range ---------- */
.ai-hero,
.ai-check-hero,
.check-hero {
    background: linear-gradient(135deg, #3D4FE6 0%, #5B6BFF 50%, #7E8BFF 100%) !important;
}
/* Selected option border — was magenta, now blue */
.check-grid label.option.checked,
.check-grid label.option[data-checked="true"],
.check-grid label.option:has(input:checked) {
    border-color: #5B6BFF !important;
    background: rgba(91, 107, 255, 0.10) !important;
}

/* ---------- 12. FOOTER hairline — mono blue ---------- */
footer::before {
    background: linear-gradient(90deg,
        transparent,
        rgba(91, 107, 255, 0.45),
        rgba(126, 139, 255, 0.35),
        transparent) !important;
}

/* ---------- 13. SECTION dividers — already blue, just enforce ---------- */
.problem::after,
.solution::after,
.services::after,
.guarantees::after,
.about::after,
.resources::after,
.faq::after,
.stats-row::after,
.leadmagnet::after {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.04) 12%,
        rgba(91, 107, 255, 0.42) 50%,
        rgba(255, 255, 255, 0.04) 88%,
        transparent 100%) !important;
}

/* ---------- 14. WHATSAPP — green stays (functional, brand-of-platform) ---------- */
/* No change. */

/* ---------- 15. MICRO POLISH ---------- */
/* Card-step badge keeps neutral dark, but ensure no warm tints */
.card-step,
.card-tag {
    background: rgba(20, 20, 23, 0.78) !important;
    color: #FAFAFA !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Selection — pure blue */
::selection { background: rgba(91, 107, 255, 0.45); color: #FFFFFF; }

/* Code blocks — neutral with subtle blue accent */
.code-block,
pre, code {
    color: #E4E4E7 !important;
}

/* ---------- 16. FINAL-CTA (Index "Letzter Schritt") — full mono-blue ---------- */
/* The final-cta block on index.html ships with a magenta/yellow/blue
   radial mesh on both the section background and the side card image
   tint. Strip everything that isn't blue. */

/* Section ambient glow — blue only */
.final-cta::before,
.final-cta--split::before {
    background: radial-gradient(ellipse,
        rgba(91, 107, 255, 0.10) 0%,
        rgba(91, 107, 255, 0.05) 40%,
        transparent 70%) !important;
}

/* Italic accent in the headline ("Marke") — already covered by §2,
   but enforce again for the specific cascade */
.final-cta h2 .accent,
.final-cta--split h2 .accent {
    background: none !important;
    background-image: none !important;
    color: #FAFAFA !important;
    -webkit-text-fill-color: #FAFAFA !important;
    -webkit-background-clip: initial !important;
            background-clip: initial !important;
}

/* Bullet checkmark icon — magenta tint → blue */
.final-cta-bullets .b-icon {
    background: rgba(91, 107, 255, 0.16) !important;
    color: #9CA8FF !important;
}
.final-cta-bullets li strong {
    color: #9CA8FF !important;
}

/* Side card — was linear-gradient(--primary, --accent) where --accent
   is magenta. Force a deep mono-blue gradient. */
.final-cta-side {
    background: linear-gradient(145deg, #3D4FE6 0%, #1E2A78 100%) !important;
    box-shadow:
        0 28px 72px rgba(91, 107, 255, 0.32),
        0 0 0 1px rgba(126, 139, 255, 0.25) inset !important;
}

/* Side card image tint — was a 3-stop magenta+yellow+blue mesh.
   Replace with a clean two-stop blue wash so the screenshot inside
   reads as blue, not pink. */
.final-cta-side::before {
    background:
        radial-gradient(circle at 30% 20%, rgba(126, 139, 255, 0.30) 0%, transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(61, 79, 230, 0.45) 0%, transparent 60%),
        linear-gradient(160deg,
            rgba(91, 107, 255, 0.55) 0%,
            rgba(30, 42, 120, 0.45) 50%,
            rgba(15, 23, 78, 0.65) 100%) !important;
}

/* Floater "ROAS 4.8 / Launch in 14 Tagen" — kill the magenta box-shadow
   and recolor the ROAS pill to mono-blue. */
.final-cta-side-floater {
    box-shadow:
        0 22px 44px -10px rgba(91, 107, 255, 0.45),
        0 8px 20px -4px rgba(61, 79, 230, 0.30) !important;
    color: #FAFAFA !important;
}
.final-cta-side-floater .fc-roas {
    background: linear-gradient(180deg, #7E8BFF 0%, #3D4FE6 100%) !important;
    color: #FFFFFF !important;
}

/* "LIVE · Kalender offen" tag — dot was bb-yellow, now blue */
.final-cta-side-tag .dot {
    background: #9CA8FF !important;
    box-shadow: 0 0 10px rgba(156, 168, 255, 0.85) !important;
}

/* Eyebrow "Letzter Schritt" — make sure it follows the neutral chip rule */
.final-cta .eyebrow,
.final-cta--split .eyebrow {
    color: #9CA8FF !important;
    border-color: rgba(91, 107, 255, 0.32) !important;
    background: rgba(91, 107, 255, 0.08) !important;
}