@import url('../fonts/fonts.css');

/* ==================== BRAND TOKENS (Styleguide) ==================== */
:root {
    color-scheme: light only;
    --yellow: #ffe276;
    --cyan: #66c9db;
    --coral: #ff8587;
    --dark: #082430;
    --dark-mid: #0c3242;
    --dark-deep: #061c26;
    --text-dark: #082430;
    --text-dark-muted: rgba(8,36,48,0.6);
    --text-white: #ffffff;
    --text-white-muted: rgba(255,255,255,0.7);
    --border-dark: rgba(8,36,48,0.12);
    --border-light: rgba(255,255,255,0.15);
    /* Type scale (2026-05-08: konsolidiert, fluid via clamp) */
    --fs-xs:   0.75rem;                          /* 12px           Meta, Quellen, Copyright */
    --fs-sm:   0.875rem;                         /* 14px           Labels, Buttons, Footer */
    --fs-base: 1.125rem;                         /* 18px           Body, Cards, FAQ, Quotes */
    --fs-md:   clamp(1.125rem, 1.6vw, 1.25rem);  /* 18 - 20px      Sublines (Hero + klein) */
    --fs-lg:   clamp(1.25rem, 1.7vw, 1.5rem);    /* 20 - 24px      Card-Titles, Section-Sub */
    --fs-xl:   clamp(1.5rem, 2.2vw, 1.75rem);    /* 24 - 28px      Timeline H3, Story H3 */
    --fs-2xl:  clamp(2rem, 4vw, 3rem);           /* 32 - 48px      Section-Titles */
    --fs-hero: clamp(2.5rem, min(7vw, 8.5vh), 5.5rem); /* 40-88px Hero H1; 8.5vh = schrumpft auf niedrigen Schirmen, hohe bleiben am 88px-Cap */

    /* Spacing scale (2026-05-08: Section paddings, fluid mobile→desktop) */
    --space-x:       clamp(1.5rem, 3vw, 4rem);   /* 24 - 64px      Horizontales Section-Padding */
    --space-y:       clamp(2.5rem, 5vw, 6rem);   /* 40 - 96px      Vertikales Standard-Padding */
    --space-y-lg:    clamp(2.5rem, 7vw, 8rem);   /* 40 - 128px     Vertikal für prominente Sektionen */
    --min-h-feature: clamp(45vh, 60vh, 70vh);    /* Section-Höhe Pull-Quote, KPI etc. */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

@media (prefers-color-scheme: dark) {
    html, body { background: #ffffff !important; color: var(--text-dark) !important; }
}

html { scroll-behavior: smooth; background: #ffffff !important; font-size: 16px; }

body {
    font-family: 'Lexend Deca', -apple-system, sans-serif;
    color: var(--text-dark) !important;
    background: #ffffff !important;
    line-height: 1.55; font-size: var(--fs-base); text-wrap: pretty;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}


/* ==================== SKIP LINK ==================== */
.skip-link {
    position: absolute; top: -100%; left: 50%; transform: translateX(-50%);
    background: var(--dark); color: #fff; padding: 0.75rem 1.5rem;
    border-radius: 0 0 8px 8px; font-size: var(--fs-base); font-weight: 600;
    z-index: 200; text-decoration: none; transition: top 0.2s;
}
.skip-link:focus {
    top: 0;
}

/* ==================== NAV ==================== */
.site-header {
    position: fixed; top: 0; width: 100%; z-index: 110;
    padding: 0 4rem; height: 80px;
    display: flex; justify-content: space-between; align-items: center;
    background: var(--yellow) !important;
    transition: box-shadow 0.4s;
}
.site-header.scrolled { box-shadow: 0 2px 24px rgba(8,36,48,0.08); }

.logo {
    font-weight: 700; font-size: var(--fs-md); letter-spacing: 0.02em;
    color: var(--text-dark); text-decoration: none;
    display: flex; align-items: center; gap: 0.4rem;
    position: relative; z-index: 110;
}
.logo-svg { width: 38px; height: 38px; }
.logo img { height: 54px; width: auto; }

.nav-links { display: flex; gap: 2.5rem; list-style: none; align-items: center; }
.nav-links a {
    text-decoration: none; color: var(--text-dark);
    font-size: var(--fs-base); font-weight: 500; transition: opacity 0.3s;
    position: relative;
}
.nav-links a:not(.nav-cta)::after {
    content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px;
    background: var(--coral); transition: width 0.3s;
}
.nav-links a:not(.nav-cta):hover::after { width: 100%; }
.nav-links a:not(.nav-cta):hover { opacity: 0.8; }
.nav-cta {
    border: 2px solid var(--coral) !important; color: var(--dark) !important;
    padding: 0.5rem 1.3rem !important; border-radius: 6px; transition: all 0.3s !important;
}
.nav-cta:hover { background: var(--coral) !important; color: var(--dark) !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(8,36,48,0.15); }

/* Hamburger */
.hamburger {
    display: none; background: none; border: none; cursor: pointer;
    width: 32px; height: 24px; position: relative; z-index: 110;
}
.hamburger span {
    display: block; width: 100%; height: 2.5px; background: var(--text-dark);
    border-radius: 2px; position: absolute; left: 0; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hamburger span:nth-child(3) { bottom: 0; }
.hamburger.active span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

.mobile-menu {
    position: fixed; top: 0; right: -100%; width: 100%; height: 100vh;
    background: var(--yellow); z-index: 105;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 2rem; transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.mobile-menu.open { right: 0; }
.mobile-menu a {
    text-decoration: none; color: var(--text-dark);
    font-size: var(--fs-md); font-weight: 600; transition: opacity 0.3s;
}
.mobile-menu a:hover { opacity: 0.6; }
.mobile-menu .nav-cta { font-size: var(--fs-md) !important; padding: 0.7rem 2rem !important; }

/* ==================== GRAIN ==================== */
.has-grain { position: relative; }
.has-grain::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}

/* ==================== HERO ==================== */
.ct-hero {
    min-height: 100vh; min-height: 100svh;
    display: flex; align-items: center;
    /* Symmetrisches vertikales Padding: hält den Inhalt auf hohen Schirmen exakt
       mittig (kein Versatz), schiebt ihn auf niedrigen Schirmen aber unter dem
       fixierten 80px-Header heraus, statt ihn zu verdecken. */
    padding: 6rem 4rem; background: var(--cyan) !important;
    position: relative; overflow: hidden;
}

/* Bubbles background */
.bubbles-bg { position: relative; overflow: hidden; }
.bubbles-bg .bg-circles { position: absolute; inset: 0; pointer-events: none; }
.bubbles-bg .bg-circles span {
    position: absolute; border-radius: 50%;
    top: 50%; transform: translateY(-50%);
}
.bubbles-bg-dark .bg-circles span { background: rgba(255,255,255,0.045); }
.bubbles-bg-light .bg-circles span { background: rgba(8,36,48,0.03); }

.bubbles-pos-center .bg-circles { --o: min(45vw, 550px); --m: min(56vw, 688px); }
.bubbles-pos-center .bg-circles span:nth-child(1) { width: var(--o); height: var(--o); left: calc(50% - var(--o)); animation: bgPulseLeft 17s ease-in-out infinite; transform-origin: right center; }
.bubbles-pos-center .bg-circles span:nth-child(2) { width: var(--m); height: var(--m); left: calc(50% - var(--m) / 2); animation: bgPulseMid 23s ease-in-out infinite; }
.bubbles-pos-center .bg-circles span:nth-child(3) { width: var(--o); height: var(--o); left: 50%; animation: bgPulseRight 19s ease-in-out infinite; transform-origin: left center; }

.bubbles-pos-right .bg-circles { --o: min(38vw, 480px); --m: min(48vw, 600px); }
.bubbles-pos-right .bg-circles span:nth-child(1) { width: var(--o); height: var(--o); left: calc(85% - var(--o)); animation: bgPulseLeft 17s ease-in-out infinite; transform-origin: right center; }
.bubbles-pos-right .bg-circles span:nth-child(2) { width: var(--m); height: var(--m); left: calc(85% - var(--m) / 2); animation: bgPulseMid 23s ease-in-out infinite; }
.bubbles-pos-right .bg-circles span:nth-child(3) { width: var(--o); height: var(--o); left: 85%; animation: bgPulseRight 19s ease-in-out infinite; transform-origin: left center; }

.bubbles-pos-left .bg-circles { --o: min(36vw, 450px); --m: min(45vw, 563px); }
.bubbles-pos-left .bg-circles span:nth-child(1) { width: var(--o); height: var(--o); left: calc(15% - var(--o)); animation: bgPulseLeft 17s ease-in-out infinite; transform-origin: right center; }
.bubbles-pos-left .bg-circles span:nth-child(2) { width: var(--m); height: var(--m); left: calc(15% - var(--m) / 2); animation: bgPulseMid 23s ease-in-out infinite; }
.bubbles-pos-left .bg-circles span:nth-child(3) { width: var(--o); height: var(--o); left: 15%; animation: bgPulseRight 19s ease-in-out infinite; transform-origin: left center; }

.bubbles-sm .bg-circles { --o: min(22vw, 270px) !important; --m: min(28vw, 338px) !important; }

@keyframes bgPulseLeft {
    0%, 100% { transform: translateY(-50%) scale(0.98); }
    40% { transform: translateY(-51.5%) scale(1.02); }
    75% { transform: translateY(-49%) scale(0.99); }
}
@keyframes bgPulseMid {
    0%, 100% { transform: translateY(-50%) scale(1.01); }
    33% { transform: translateY(-51%) scale(0.98); }
    66% { transform: translateY(-49%) scale(1.01); }
}
@keyframes bgPulseRight {
    0%, 100% { transform: translateY(-50%) scale(1.02); }
    35% { transform: translateY(-49%) scale(0.97); }
    70% { transform: translateY(-51%) scale(1.01); }
}

/* Scroll indicator */
.scroll-hint {
    position: absolute; bottom: 2.5rem; left: 0; right: 0;
    display: flex; flex-direction: column;
    align-items: center; gap: 0.6rem;
    opacity: 0; animation: fadeUp 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 1.2s forwards;
    transition: bottom 0.4s ease;
}
body.cc-active .scroll-hint { bottom: 6rem; }
.scroll-hint span {
    font-size: var(--fs-sm); letter-spacing: 0.15em; text-transform: uppercase;
    font-weight: 500; color: rgba(8,36,48,0.4);
}
.scroll-arrow {
    width: 24px; height: 24px;
    border-right: 2.5px solid rgba(8,36,48,0.35);
    border-bottom: 2.5px solid rgba(8,36,48,0.35);
    transform: rotate(45deg); animation: scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce {
    0%, 100% { transform: rotate(45deg) translate(0,0); opacity: 0.5; }
    50% { transform: rotate(45deg) translate(4px,4px); opacity: 1; }
}

.hero-grid {
    max-width: 1200px; margin: 0 auto; width: 100%;
    position: relative; z-index: 2;
}

.hero-label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dark);
    opacity: 0.7;
    margin-bottom: 1rem;
}
.ct-hero h1 {
    font-size: var(--fs-hero); line-height: 1.05; font-weight: 700;
    margin-bottom: 1.5rem; color: var(--dark) !important; letter-spacing: -0.025em;
    text-shadow: 0 1px 16px rgba(102,201,219,0.45);
    max-width: 1100px;
    text-wrap: balance;
}
.ct-hero h1 em { font-style: normal; color: #fff; }
.ct-hero .subline {
    font-size: var(--fs-lg); font-weight: 400; color: rgba(8,36,48,0.75) !important;
    max-width: 620px; line-height: 1.55;
    text-wrap: pretty;
}
.ct-hero .subline strong { color: var(--dark) !important; font-weight: 600; }
.hero-cta { margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.ct-hero .subline { margin-top: 0; }

.hero-visual {
    position: absolute; inset: 0; z-index: 1;
    pointer-events: none; overflow: visible;
}
.hero-bubbles { width: 100%; height: 100%; position: relative; }

/* Hero bubbles — rechts positioniert, volle Deckkraft */
.ct-hero-v2 { overflow-x: clip; overflow-y: visible; }
.ct-hero-v2 h1 { max-width: 640px; }
.ct-hero-v2 .subline { max-width: 520px; }
.bubble-v2 {
    position: absolute; border-radius: 50%; aspect-ratio: 1;
    top: 50%; transform: translateY(-50%);
}
.bubble-label-svg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    overflow: visible;
}
.bubble-label {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 7.5px;
    font-weight: 600;
    letter-spacing: 1px;
}
.bubble-v2-yellow .bubble-label { fill: var(--yellow); }
.bubble-v2-coral .bubble-label { fill: var(--coral); }
.bubble-v2-cyan .bubble-label { fill: var(--cyan); }
/* Hero-Bubble-Geometrie: zentral gesteuert, höhenunabhängig, überlappungssicher.
   --bw  = Bubble-Durchmesser (breitenbasiert, zusätzlich auf die rechts neben dem
           Text verfügbare Spalte begrenzt, damit nie Text überdeckt wird).
   --cx  = Cluster-Anker. Normal bei 73%, wird aber nach rechts geschoben, sobald
           die linke Coral-Bubble sonst in die Textspalte (Rechtskante ~760px) liefe. */
.ct-hero-v2 .hero-bubbles {
    --bw: min( clamp(150px, 16vw, 560px), max(56px, calc((100vw - 856px) / 2)) );
    --cx: max( calc(840px + var(--bw)), 73% );
}
.bubble-v2-yellow {
    width: calc(var(--bw) * 1.25);
    left: calc(var(--cx) - var(--bw) * 0.625);
    background: rgba(255,226,118,0.55);
    z-index: 1;
    animation: bv2Yellow 18s ease-in-out infinite;
}
.bubble-v2-coral {
    width: var(--bw);
    left: calc(var(--cx) - var(--bw));
    background: rgba(255,133,135,0.45);
    transform-origin: right center;
    animation: bv2Coral 14s ease-in-out infinite;
}
.bubble-v2-cyan {
    width: var(--bw);
    left: var(--cx);
    background: rgba(8,36,48,0.35);
    transform-origin: left center;
    animation: bv2Cyan 16s ease-in-out infinite;
}
@keyframes bv2Yellow {
    0%, 100% { transform: translateY(-50%) scale(1); }
    25% { transform: translateY(-50%) scale(1.08); }
    50% { transform: translateY(-50%) scale(0.92); }
    75% { transform: translateY(-50%) scale(1.05); }
}
@keyframes bv2Coral {
    0%, 100% { transform: translateY(-50%) scale(1); }
    30% { transform: translateY(-50%) scale(1.12); }
    60% { transform: translateY(-50%) scale(0.9); }
    85% { transform: translateY(-50%) scale(1.06); }
}
@keyframes bv2Cyan {
    0%, 100% { transform: translateY(-50%) scale(1.05); }
    20% { transform: translateY(-50%) scale(0.88); }
    50% { transform: translateY(-50%) scale(1.1); }
    80% { transform: translateY(-50%) scale(0.95); }
}

.hero-content { position: relative; z-index: 2; }
.hero-stats { display: none; }
.hero-stat .value { font-size: var(--fs-md); font-weight: 700; color: var(--dark); }
.hero-stat .label { font-size: var(--fs-sm); color: rgba(8,36,48,0.35); margin-top: 0.1rem; font-weight: 400; letter-spacing: 0.02em; }

/* ==================== BUTTONS ==================== */
.btn-coral {
    display: inline-block; border: 2px solid var(--coral); color: var(--dark);
    padding: 0.75rem 1.5rem; text-decoration: none; font-weight: 600;
    font-size: var(--fs-sm); border-radius: 6px; transition: all 0.3s;
    background: var(--coral); position: relative;
}
.btn-coral:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(8,36,48,0.15); }
.btn-ghost {
    display: inline-block; color: var(--dark);
    padding: 0.75rem 1.5rem; text-decoration: none;
    font-weight: 600; font-size: var(--fs-sm); transition: all 0.3s;
    border: 2px solid rgba(8,36,48,0.25); border-radius: 6px;
    background: transparent;
}
.btn-ghost:hover { border-color: var(--dark); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(8,36,48,0.1); }

/* ==================== SCROLL ANIMATIONS ==================== */
.reveal {
    opacity: 0; transform: translateY(28px);
    transition: opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }

/* ==================== SECTIONS ==================== */
.s-cyan { background: var(--cyan) !important; padding: var(--space-y) var(--space-x); position: relative; }
.s-white { background: #ffffff !important; padding: var(--space-y) var(--space-x); }
.s-dark { background: var(--dark-mid) !important; padding: var(--space-y) var(--space-x); position: relative; }
.s-yellow { background: var(--yellow) !important; padding: var(--space-y) var(--space-x); text-align: center; }

.inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }

.section-label {
    font-size: var(--fs-sm); letter-spacing: 0.25em; text-transform: uppercase;
    font-weight: 600; margin-bottom: 1rem;
    display: flex; align-items: center; gap: 0.5rem;
}
.section-label::before { content: ''; width: 24px; height: 2px; flex-shrink: 0; }
.lbl-coral { color: var(--coral); }
.lbl-coral::before { background: var(--coral); }
.lbl-yellow { color: var(--yellow); }
.lbl-yellow::before { background: var(--yellow); }
.lbl-dark { color: var(--dark); }
.lbl-dark::before { background: var(--dark); }
.lbl-white { color: var(--yellow); }
.lbl-white::before { background: var(--yellow); }

.section-title {
    font-size: var(--fs-2xl); font-weight: 600;
    line-height: 1.15; margin-bottom: 1rem; max-width: 720px;
    letter-spacing: -0.015em; text-wrap: balance;
    overflow-wrap: break-word; hyphens: auto;
}
.section-sub { font-size: var(--fs-lg); max-width: 640px; line-height: 1.55; margin-bottom: 2.5rem; font-weight: 400; text-wrap: pretty; }
.t-white { color: var(--text-white); }
.t-wmuted { color: var(--text-white-muted); }
.t-muted { color: var(--text-dark-muted); }

/* ==================== PROBLEM CARDS ==================== */
.pgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem; margin-top: 2.5rem; }
.pcard {
    padding: 2.2rem 2.2rem 2.2rem 2.5rem; background: #f8fafa;
    border: 1px solid rgba(8,36,48,0.04); border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative; overflow: hidden;
}
.pcard::before {
    content: ''; position: absolute; top: 1.5rem; bottom: 1.5rem; left: 0;
    width: 3px; background: rgba(255,133,135,0.2); border-radius: 0 2px 2px 0;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.pcard:hover::before { background: var(--coral); top: 0; bottom: 0; }
.pcard:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(8,36,48,0.08); background: #fff; }
.pcard .num { font-size: 3.5rem; font-weight: 700; color: rgba(255,133,135,0.12); line-height: 1; margin-bottom: 0.3rem; } /* display number, bewusst hardcoded */
/* Dimension colors for problem cards (pale) */
.pcard--yellow::before { background: rgba(255,226,118,0.5); }
.pcard--yellow:hover::before { background: var(--yellow); }
.pcard--yellow .num { color: rgba(200,168,48,0.3); }
.pcard--cyan::before { background: rgba(102,201,219,0.35); }
.pcard--cyan:hover::before { background: var(--cyan); }
.pcard--cyan .num { color: rgba(70,160,180,0.28); }
.pcard--coral::before { background: rgba(255,133,135,0.25); }
.pcard--coral:hover::before { background: var(--coral); }
.pcard--coral .num { color: rgba(220,100,100,0.28); }

/* Dimension-colored expand triggers */
.pcard--yellow .expand-trigger { color: #c9a830; }
.pcard--cyan .expand-trigger { color: var(--cyan); }
.pcard--coral .expand-trigger { color: var(--coral); }

.pcard-label {
    font-size: var(--fs-sm); letter-spacing: 0.25em; text-transform: uppercase;
    font-weight: 600; margin-bottom: 0.8rem;
}
.pcard-label--yellow { color: rgba(200,168,48,0.3); }
.pcard-label--cyan { color: rgba(70,160,180,0.28); }
.pcard-label--coral { color: rgba(220,100,100,0.28); }
.pcard h3 { font-size: var(--fs-lg); font-weight: 600; margin-bottom: 0.8rem; line-height: 1.3; text-wrap: balance; }
.pcard p { font-size: var(--fs-base); color: var(--text-dark-muted); line-height: 1.6; font-weight: 400; text-wrap: pretty; }

/* Desktop horizontal expand */
@media (min-width: 901px) {
    .pcard.pcard-open {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 0 3rem;
        align-items: start;
        background: #fff;
        box-shadow: 0 8px 24px rgba(8,36,48,0.08);
        overflow: visible;
    }
    .pcard.pcard-open:hover { transform: none; }
    .pcard.pcard-open .num { grid-column: 1; grid-row: 1; }
    .pcard.pcard-open .pcard-label { grid-column: 1; grid-row: 2; }
    .pcard.pcard-open h3 { grid-column: 1; grid-row: 3; }
    .pcard.pcard-open .expand-trigger { grid-column: 1; grid-row: 4; }
    .pcard.pcard-open .expand-body {
        grid-column: 2;
        grid-row: 1 / 5;
        max-height: none;
        overflow: visible;
        opacity: 1;
        padding-top: 0.5rem;
        border-left: 1px solid rgba(8,36,48,0.06);
        padding-left: 3rem;
    }
    .pcard .expand-body {
        opacity: 0;
        transition: opacity 0.35s ease, max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    .pcard.pcard-open .expand-trigger span:first-child::after { content: ' (schließen)'; }
    .pcard.pcard-open::before { position: absolute; }
}

/* Team card desktop horizontal expand */
@media (min-width: 901px) {
    .tc.tc-open {
        flex: 0 0 480px;
        display: grid;
        grid-template-columns: 180px 1fr;
        grid-template-rows: auto auto auto auto 1fr;
        gap: 0 1.5rem;
        align-items: start;
        background: rgba(255,255,255,0.06);
        border-radius: 12px;
        padding: 1rem;
        scroll-snap-align: start;
    }
    .tc.tc-open:hover .tp { transform: none; }
    .tc.tc-open .tp {
        grid-column: 1; grid-row: 1 / 6;
        width: 180px; height: 240px;
        aspect-ratio: auto;
    }
    .tc.tc-open h3 { grid-column: 2; grid-row: 1; margin-top: 0.25rem; }
    .tc.tc-open .role { grid-column: 2; grid-row: 2; }
    .tc.tc-open .expand-trigger { grid-column: 2; grid-row: 3; }
    .tc.tc-open .expand-body {
        grid-column: 2;
        grid-row: 4 / 6;
        max-height: none;
        overflow: visible;
        opacity: 1;
        padding-top: 0.5rem;
    }
    .tc .expand-body {
        opacity: 0;
        transition: opacity 0.35s ease, max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    .tc.tc-open .expand-trigger span:first-child::after { content: ' (schließen)'; }
}

.stat-callout {
    font-size: var(--fs-base); color: var(--text-dark-muted); line-height: 1.6;
    margin-top: 1rem; padding-top: 1rem;
    border-top: 1px solid rgba(8,36,48,0.06);
}
.stat-callout strong { color: var(--text-dark); font-style: normal; }
.expand-body p:not(.stat-callout) strong { color: var(--text-dark); font-weight: 600; }
.stat-source { font-size: var(--fs-sm); color: rgba(8,36,48,0.3); font-style: normal; }
.sources { margin-top: 1.25rem; padding-top: 0.75rem; border-top: 1px solid var(--border-dark); font-size: var(--fs-xs); color: rgba(8,36,48,0.2); font-weight: 400; line-height: 1.5; }

/* ==================== TIMELINE ==================== */
.timeline { margin-top: 3rem; position: relative; }
.tl-line {
    position: absolute; left: 24px; top: 0; bottom: 0; width: 2px;
    background: rgba(255,226,118,0.15); transform-origin: top;
}
.tl-line-fill {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    background: var(--yellow);
    transform: scaleY(0); transform-origin: top;
    will-change: transform;
}
.tl-step { display: grid; grid-template-columns: 50px 1fr; gap: 2rem; margin-bottom: 2.5rem; position: relative; }
.tl-marker {
    width: 50px; height: 50px; border-radius: 50%;
    background: var(--yellow); display: flex; align-items: center;
    justify-content: center; font-weight: 700; font-size: var(--fs-base);
    color: var(--dark); position: relative; z-index: 2; flex-shrink: 0;
    box-shadow: 0 0 0 6px rgba(255,226,118,0.15); transition: box-shadow 0.3s;
}
.tl-step:hover .tl-marker { box-shadow: 0 0 0 10px rgba(255,226,118,0.2); }
.tl-content {
    padding: 2.5rem; border: 1px solid var(--border-light);
    border-radius: 12px; background: rgba(255,255,255,0.04); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative;
}
.tl-content::before { content: ''; position: absolute; top: 24px; left: -12px; width: 12px; height: 2px; background: rgba(255,226,118,0.3); }
.tl-content:hover { border-color: rgba(255,226,118,0.35); background: rgba(255,255,255,0.06); }
.tl-content .phase { font-size: var(--fs-sm); letter-spacing: 0.2em; text-transform: uppercase; color: var(--yellow); font-weight: 600; margin-bottom: 0.6rem; }
.tl-content h3 { font-size: var(--fs-xl); font-weight: 600; margin-bottom: 0.8rem; color: var(--text-white); text-wrap: balance; }
.tl-content p { color: var(--text-white-muted); line-height: 1.6; font-size: var(--fs-base); margin-bottom: 1rem; font-weight: 400; text-wrap: pretty; }
.tl-content ul { list-style: none; padding: 0; }
.tl-content ul li { color: var(--text-white-muted); font-size: var(--fs-base); padding: 0.35rem 0 0.35rem 1.2rem; position: relative; font-weight: 400; }
.tl-content ul li::before { content: '-'; position: absolute; left: 0; color: var(--yellow); }
.tl-step:last-child .tl-content { opacity: 0.88; }

/* ==================== TESTIMONIALS ==================== */
/* ── Testimonial Scroll Container ── */
.proof-scroll {
    display: flex; gap: 1.5rem; margin-top: 2.5rem;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: rgba(8,36,48,0.2) transparent;
    padding-bottom: 1rem;
}
.proof-scroll::-webkit-scrollbar { height: 14px; }
.proof-scroll::-webkit-scrollbar-track { background: rgba(8,36,48,0.08); border-radius: 7px; }
.proof-scroll::-webkit-scrollbar-thumb { background: rgba(8,36,48,0.25); border-radius: 7px; border: 3px solid transparent; background-clip: padding-box; }
.proof-scroll::-webkit-scrollbar-thumb:hover { background: rgba(8,36,48,0.4); background-clip: padding-box; }
.proof-scroll .proof-card,
.proof-scroll .proof-toggle { flex: 0 0 calc((100% - 3rem) / 3); min-width: 0; scroll-snap-align: start; }
/* Desktop/Tablet: alle Cards direkt sichtbar, Toggle versteckt */
.proof-scroll .proof-toggle { display: none; }

/* ── Proof CTA (in expand-body) ── */
.proof-cta {
    margin-top: 1rem; font-size: var(--fs-sm); font-style: normal;
    color: rgba(8,36,48,0.5); line-height: 1.5;
}
.proof-cta a {
    color: rgba(8,36,48,0.7); text-decoration: underline;
    text-underline-offset: 2px; font-weight: 500;
    transition: color 0.2s;
}
.proof-cta a:hover { color: var(--dark); }

/* Problemkarten-Variante — erhöhte Spezifität wegen .pcard p */
.pcard p.proof-cta--dark { color: rgba(8,36,48,0.4); font-size: var(--fs-sm); margin-bottom: 1rem; }
.pcard p.proof-cta--dark a { color: rgba(8,36,48,0.6); }
.pcard p.proof-cta--dark a:hover { color: var(--dark); }

/* ── Toggle-Karte ── */
.proof-toggle {
    background: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.5);
    border-radius: 12px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 0.5rem;
    cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    color: var(--text-dark); font-family: inherit;
}
.proof-toggle:hover { background: rgba(255,255,255,0.55); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(8,36,48,0.08); }
.proof-toggle .pt-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--yellow); display: flex; align-items: center; justify-content: center; font-size: var(--fs-lg); font-weight: 700; color: var(--dark); }
.proof-toggle .pt-label { font-size: var(--fs-sm); font-weight: 600; text-align: center; line-height: 1.3; }
/* ── Case Study Cards ── */
.cs-cards {
    display: flex; gap: 1.5rem; margin-top: 2.5rem;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: rgba(8,36,48,0.2) transparent;
    padding-bottom: 1rem;
}
.cs-cards::-webkit-scrollbar { height: 14px; }
.cs-cards::-webkit-scrollbar-track { background: rgba(8,36,48,0.08); border-radius: 7px; }
.cs-cards::-webkit-scrollbar-thumb { background: rgba(8,36,48,0.25); border-radius: 7px; border: 3px solid transparent; background-clip: padding-box; }
.cs-cards::-webkit-scrollbar-thumb:hover { background: rgba(8,36,48,0.4); background-clip: padding-box; }
.cs-cards .cs-card,
.cs-cards .cs-toggle {
    flex: 0 0 calc((100% - 1.5rem) / 2);
    min-width: 0;
    scroll-snap-align: start;
}
/* Desktop/Tablet: alle Cards direkt sichtbar, Toggle versteckt */
.cs-cards .cs-toggle { display: none; }
/* Toggle: gleicher Look wie proof-toggle */
.cs-toggle {
    background: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.5);
    border-radius: 12px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 0.5rem;
    cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    color: var(--text-dark); font-family: inherit;
    padding: 2rem;
}
.cs-toggle:hover { background: rgba(255,255,255,0.55); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(8,36,48,0.08); }
.cs-toggle .cs-toggle-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--yellow); display: flex; align-items: center; justify-content: center; font-size: var(--fs-lg); font-weight: 700; color: var(--dark); }
.cs-toggle .cs-toggle-label { font-size: var(--fs-sm); font-weight: 600; text-align: center; line-height: 1.3; }
.cs-card--teaser {
    background: rgba(255,255,255,0.15);
    border-style: dashed;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 320px;
}
.cs-card--teaser .cs-teaser-icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--coral); color: var(--dark);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-xl); font-weight: 700;
    margin-bottom: 1.2rem;
}
.cs-card--teaser h3 { font-size: var(--fs-lg); font-weight: 600; color: var(--dark); margin-bottom: 0.6rem; }
.cs-card--teaser p { color: var(--text-dark-muted); margin-bottom: 1.4rem; max-width: 320px; }
.cs-card--teaser .btn-coral { font-size: var(--fs-sm); padding: 0.6rem 1.2rem; }
.cs-card {
    background: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.5);
    border-radius: 12px; padding: 2rem; display: flex; flex-direction: column;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.cs-card:hover { background: rgba(255,255,255,0.55); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(8,36,48,0.08); }
.cs-card-img {
    width: calc(100% + 4rem); margin: -2rem -2rem 1.2rem;
    aspect-ratio: 16/9; overflow: hidden;
    border-radius: 12px 12px 0 0;
}
.cs-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-card-title { font-size: var(--fs-lg); font-weight: 600; color: var(--dark); margin-bottom: 1.4rem; line-height: 1.3; text-wrap: balance; }
.cs-card-section { margin-bottom: 1.2rem; }
.cs-card-label { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.6rem; }
.cs-card-label--coral { color: #d4565a; }
.cs-card-label--yellow { color: #3a8a9a; }
.cs-card-text { font-size: var(--fs-base); line-height: 1.65; color: var(--text-dark); }
.cs-card-list { list-style: none; padding: 0; margin: 0; }
.cs-card-list li { position: relative; padding-left: 1.2rem; font-size: var(--fs-base); line-height: 1.5; color: var(--text-dark); margin-bottom: 0.5rem; }
.cs-card-list li:last-child { margin-bottom: 0; }
.cs-card-list li::before { content: "→"; position: absolute; left: 0; color: #3a8a9a; font-weight: 700; }
.cs-card-meta { font-size: var(--fs-sm); color: var(--text-dark-muted); margin-top: auto; padding-top: 1rem; }
.cs-cta { text-align: center; margin-top: 2.5rem; }
.cs-cta-text { font-size: var(--fs-base); color: var(--text-dark-muted); margin-bottom: 1rem; }
@media (max-width: 900px) {
    .cs-cards { flex-direction: column; gap: 1.2rem; overflow-x: hidden; padding-bottom: 0; }
    .cs-cards .cs-card,
    .cs-cards .cs-toggle { flex: 0 0 auto; width: 100%; }
    .cs-card--teaser { min-height: auto; padding: 2rem; }
    /* Mobile: 2 Karten sichtbar + Toggle, Rest hinter Toggle */
    .cs-cards .cs-card:nth-child(n+4) { display: none; }
    .cs-cards .cs-toggle { display: flex; min-height: 56px; flex-direction: row; gap: 0.6rem; padding: 0.8rem 1.2rem; }
    .cs-cards .cs-toggle .cs-toggle-icon { width: 36px; height: 36px; font-size: 1.1rem; }
    .cs-cards.cs-expanded .cs-card:nth-child(n+4) { display: flex; }
    .cs-cards.cs-expanded .cs-toggle { display: none; }
}

.proof-card {
    padding: 2rem; background: rgba(255,255,255,0.4);
    border: 1px solid rgba(255,255,255,0.5); border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); display: flex; flex-direction: column; position: relative;
}
.proof-card:hover { background: rgba(255,255,255,0.55); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(8,36,48,0.08); }
.proof-card .quote-deco { font-size: 4rem; font-weight: 700; line-height: 1; color: rgba(255,133,135,0.18); margin-bottom: -0.5rem; font-family: Georgia, serif; } /* display deco */
.proof-card .ci { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid rgba(8,36,48,0.08); margin-bottom: 0; }
.proof-card .av { width: 48px; height: 48px; background: var(--yellow); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; font-size: var(--fs-base); color: var(--dark); }
.proof-card img.av-img { object-fit: cover; }
.proof-card .cn { font-weight: 600; font-size: var(--fs-base); line-height: 1.3; }
.proof-card .cr { font-size: var(--fs-sm); color: var(--text-dark); font-weight: 400; line-height: 1.4; }
.proof-card .co { font-size: var(--fs-xs); color: var(--text-dark-muted); font-weight: 400; margin-top: 0.15rem; }
.proof-card .q { font-size: var(--fs-base); line-height: 1.65; font-style: italic; font-weight: 400; text-wrap: pretty; }
.proof-card > .q { flex: none; }
.proof-card .ci { margin-top: auto; }

/* Desktop horizontal expand for proof cards */
@media (min-width: 901px) {
    .proof-card.proof-card-open {
        flex: 0 0 100% !important;
        display: grid;
        grid-template-columns: 1fr 1.4fr;
        grid-template-rows: auto auto 1fr auto;
        gap: 0 2.5rem;
        background: rgba(255,255,255,0.6);
        box-shadow: 0 8px 24px rgba(8,36,48,0.08);
        overflow: visible;
        min-height: auto;
    }
    .proof-card.proof-card-open:hover { transform: none; }
    .proof-card.proof-card-open .quote-deco { grid-column: 1 / -1; grid-row: 1; }
    .proof-card.proof-card-open > .q { grid-column: 1; grid-row: 2; flex: none; }
    .proof-card.proof-card-open .expand-trigger { grid-column: 1; grid-row: 3; align-self: start; }
    .proof-card.proof-card-open .ci { grid-column: 1; grid-row: 4; align-self: end; }
    .proof-card.proof-card-open .expand-body {
        grid-column: 2;
        grid-row: 2 / 5;
        max-height: none;
        overflow: visible;
        opacity: 1;
        border-left: 1px solid rgba(8,36,48,0.08);
        padding-left: 2.5rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    .proof-card.proof-card-open .expand-body > .q { margin-top: 0 !important; }
    .proof-card .expand-body {
        opacity: 0;
        transition: opacity 0.35s ease, max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    .proof-card.proof-card-open .expand-trigger span:first-child::after { content: ' (schließen)'; }
}

/* ==================== DIAGNOSE / KURZANALYSE ==================== */
.da-layout { max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.da-text { text-align: left; }
.da-chart { display: flex; align-items: center; justify-content: center; }
.da-chart canvas { width: 100%; max-width: 380px; height: auto; aspect-ratio: 1; }
.da-chart--mobile { display: none; }
.dm { margin-top: 0.8rem; font-size: var(--fs-sm); color: rgba(8,36,48,0.35); font-weight: 400; }

/* Start button (Teaser on index.html) */
.da-btn--start {
    display: inline-block; margin-top: 1.5rem; padding: 1rem 2.5rem;
    font-size: var(--fs-base); font-weight: 600; border: none; border-radius: 8px;
    background: var(--dark); color: var(--yellow); cursor: pointer;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.da-btn--start:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(8,36,48,0.18); }

/* ==================== TEAM ==================== */
.tgrid {
    display: flex; gap: 1.5rem; margin-top: 2.5rem;
    align-items: flex-start;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem;
}
.tgrid::-webkit-scrollbar { height: 14px; }
.tgrid::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); border-radius: 7px; }
.tgrid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 7px; border: 3px solid transparent; background-clip: padding-box; }
.tgrid::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.35); background-clip: padding-box; }
.tc,
.tgrid .tc-toggle {
    flex: 0 0 220px;
    min-width: 0;
    scroll-snap-align: start;
}
/* Desktop/Tablet: Toggle versteckt, alle Team-Karten direkt sichtbar */
.tgrid .tc-toggle { display: none; }
/* Toggle-Style analog zu proof-/cs-toggle, aber für dunklen BG */
.tc-toggle {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 0.5rem;
    cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    color: var(--text-white); font-family: inherit;
    padding: 2rem;
}
.tc-toggle:hover { background: rgba(255,255,255,0.1); border-color: var(--yellow); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.tc-toggle .tc-toggle-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--yellow); display: flex; align-items: center; justify-content: center; font-size: var(--fs-lg); font-weight: 700; color: var(--dark); }
.tc-toggle .tc-toggle-label { font-size: var(--fs-sm); font-weight: 600; text-align: center; line-height: 1.3; color: var(--text-white); }
.tp {
    width: 100%; aspect-ratio: 3/4;
    background: rgba(255,255,255,0.06); border: 1px solid var(--border-light);
    border-radius: 12px; margin-bottom: 0.8rem;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; overflow: hidden;
}
.tp img:not(.tp-logo) { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.tc:hover .tp img:not(.tp-logo) { transform: scale(1.05); }
.tc:hover .tp { border-color: var(--yellow); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }

/* LinkedIn icon on team photos */
.tp-li {
    position: absolute; bottom: 10px; right: 10px;
    width: 32px; height: 32px; border-radius: 6px;
    background: rgba(6,28,38,0.7); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.5); text-decoration: none;
    transition: all 0.3s; opacity: 0;
    z-index: 2;
}
.tc:hover .tp-li { opacity: 1; }
.tp-li:hover { color: #0a66c2; background: rgba(255,255,255,0.9); }
/* Connecteer logogramm on team photos */
.tp-logo {
    position: absolute; bottom: 12px; left: 10px;
    width: auto; height: 28px;
    object-fit: contain;
    opacity: 0.45;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
    transition: opacity 0.3s;
    z-index: 2;
    pointer-events: none;
}
.tc:hover .tp-logo { opacity: 0.8; }
.tc h3 { font-size: var(--fs-base); font-weight: 600; color: var(--text-white); }
.tc .role { font-size: var(--fs-sm); color: var(--text-white-muted); font-weight: 400; }
/* Team card expand trigger + body */
.tc .expand-trigger { color: var(--yellow); border-color: rgba(255,226,118,0.25); margin-top: 0.5rem; font-size: var(--fs-sm); }
.tc .expand-trigger:hover { border-color: var(--yellow); }
.tc .expand-body { color: var(--text-white-muted); }
.tc .expand-body p { font-size: var(--fs-sm); line-height: 1.6; }
.tc-linkedin { font-size: var(--fs-sm); color: var(--yellow); text-decoration: none; font-weight: 500; display: inline-block; margin-top: 0.75rem; transition: opacity 0.2s; }
.tc-linkedin:hover { opacity: 0.7; }
/* Summary card at end of team scroll */
.tc--summary { flex: 0 0 220px; }
.tp--summary {
    background: linear-gradient(135deg, rgba(255,226,118,0.08), rgba(102,201,219,0.08));
    border-color: rgba(255,226,118,0.25);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 0.2rem;
}
.tp--summary:hover { border-color: var(--yellow); }
/* Reuse proof-toggle icon/label pattern for dark backgrounds */
.pt-icon--dark { width: 48px; height: 48px; border-radius: 50%; background: var(--yellow); display: flex; align-items: center; justify-content: center; font-size: var(--fs-lg); font-weight: 700; color: var(--dark); }
.pt-label--dark { font-size: var(--fs-sm); font-weight: 600; text-align: center; line-height: 1.4; color: rgba(255,255,255,0.85); }
.tc-stat { font-size: 2.2rem; font-weight: 700; color: var(--yellow); line-height: 1.1; } /* display number */
.tc-stat-label { font-size: var(--fs-sm); color: rgba(255,255,255,0.5); font-weight: 500; letter-spacing: 0.02em; }
.tc-stat-plus { font-size: var(--fs-base); color: rgba(255,255,255,0.2); margin: 0.4rem 0; }
.tc-stat-icon { font-size: var(--fs-lg); margin-bottom: 0.1rem; }


/* ==================== STORY ==================== */
.story { display: grid; grid-template-columns: 0.85fr 1fr; gap: 3.5rem; align-items: center; margin-top: 2rem; }
.story-text p { color: var(--text-dark-muted); margin-bottom: 1rem; line-height: 1.65; font-size: var(--fs-base); font-weight: 400; text-wrap: pretty; }
.story-text p:first-of-type::first-line { color: var(--text-dark); font-weight: 500; }

.model-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin: 2.5rem 0; }
.model-card {
    padding: 1.8rem 1.5rem; background: rgba(255,255,255,0.35);
    border: 1px solid rgba(255,255,255,0.5); border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.model-card:hover { background: rgba(255,255,255,0.5); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(8,36,48,0.08); }
.model-card .model-num { font-size: 2.441rem; font-weight: 700; color: rgba(255,133,135,0.15); line-height: 1; margin-bottom: 0.6rem; } /* display number */
.model-card h4 { font-size: var(--fs-base); font-weight: 700; margin-bottom: 0.5rem; color: var(--text-dark); }
.model-card p { font-size: var(--fs-sm); color: var(--text-dark-muted); line-height: 1.65; font-weight: 400; }

.principle {
    margin: 2rem 0 2.5rem; padding: 1.5rem 2rem;
    background: rgba(8,36,48,0.06); border-radius: 10px;
    font-size: var(--fs-base); font-weight: 600; color: var(--text-dark);
    line-height: 1.5;
}
.simg {
    width: 100%; aspect-ratio: 4/3;
    border-radius: 12px; overflow: hidden;
    position: relative;
}
.simg img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.simg:hover img { transform: scale(1.03); }
.simg-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(8,36,48,0.06), rgba(8,36,48,0.12));
    display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.5rem;
}
.simg-placeholder svg { opacity: 0.2; }
.simg-placeholder span { font-size: var(--fs-sm); color: rgba(8,36,48,0.25); font-weight: 500; }
.simg-caption { font-size: var(--fs-sm); color: rgba(8,36,48,0.5); margin-top: 0.75rem; font-weight: 400; }

/* ==================== PULL QUOTES ==================== */
.sticky-scroll { position: relative; }
.sticky-scroll:has(.pq-coral) { background: rgba(255,133,135, 0.08); }
.sticky-scroll:has(.pq-dark) { background: #fff; }
.sticky-scroll:has(.pq-yellow) { background: rgba(255,226,118, 0.12); }
.pull-quote .pq-inner {
    max-width: 800px; margin: 0 auto;
    display: flex;
    opacity: 0;
    will-change: opacity, transform;
}
.pull-quote .pq-text {
    margin: 0;
    opacity: 0; transform: translateY(10px);
    will-change: opacity, transform;
}
.pull-quote .pq-text em {
    font-style: normal;
    background-image: linear-gradient(var(--underline-color, currentColor), var(--underline-color, currentColor));
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 3px;
    padding-bottom: 2px;
    transition: color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.pq-coral .pq-text em { --underline-color: var(--coral); color: var(--dark); }
.pq-dark .pq-text em { --underline-color: var(--cyan); color: var(--dark); }
.pq-yellow .pq-text em { --underline-color: var(--coral); color: var(--dark); }
.pq-coral .pq-text em.highlighted { color: var(--coral); }
.pq-dark .pq-text em.highlighted { color: var(--dark); }
.pq-yellow .pq-text em.highlighted { color: var(--coral); }
.pull-quote .pq-source {
    font-size: var(--fs-sm); margin-top: 0.8rem;
    text-transform: uppercase; letter-spacing: 0.15em; font-weight: 500;
    opacity: 0; will-change: opacity;
}
.pq-counter { font-variant-numeric: tabular-nums; }
.pq-coral .pq-counter { color: var(--coral); }
.pq-dark .pq-counter { color: var(--cyan); }
.pq-yellow .pq-counter { color: var(--coral); }
.hero-counter { font-variant-numeric: tabular-nums; }

.dqi-reveal {
    opacity: 0; transform: translateX(-20px);
    transition: opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.dqi-reveal.visible { opacity: 1; transform: translateX(0); }

.pq-coral .pq-text { color: var(--dark); }
.pq-coral .pq-source { color: rgba(8,36,48,0.35); }

.pq-dark .pq-text { color: var(--dark); }
.pq-dark .pq-source { color: rgba(8,36,48,0.25); }

.pq-yellow .pq-text { color: var(--dark); }
.pq-yellow .pq-source { color: rgba(8,36,48,0.35); }

/* --- .pq-compact: Zahl als Hero, kein Sticky, scrollt mit --- */
.pq-compact { height: auto !important; }
.pq-compact .pull-quote {
    position: relative; top: auto;
    padding: var(--space-y-lg) var(--space-x);
    min-height: var(--min-h-feature);
    display: flex; align-items: center; justify-content: center;
}
.pq-compact .pq-inner {
    flex-direction: column; align-items: center; text-align: center; gap: 0;
    transform: translateY(20px);
}
.pq-num {
    margin: 0 0 1.8rem; line-height: 1;
    font-size: clamp(6rem, 16vw, 10.5rem); font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    opacity: 0; transform: scale(0.85);
    will-change: opacity, transform;
}
.pq-compact .pq-text {
    font-size: var(--fs-lg); font-weight: 400;
    max-width: 560px; line-height: 1.55;
    text-wrap: pretty;
}

/* ==================== STATEMENT ==================== */
.statement { padding: var(--space-y-lg) var(--space-x); }
.statement-inner { max-width: 660px; margin: 0 auto; text-align: center; }
.statement-grid {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 3.5rem; align-items: center;
    padding-bottom: 1rem;
}
.statement-text { text-align: left; }
.statement-text .section-title { margin-bottom: 1rem; }
.statement-text .section-sub { margin-bottom: 0.75rem; }
.statement-text .section-sub:last-child { margin-bottom: 0; }
.statement-media { width: 100%; }
.statement-img {
    aspect-ratio: 4/3;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.15);
    overflow: hidden;
}
.statement-img img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.statement-img:hover img { transform: scale(1.03); }
.statement-caption {
    display: block; margin-top: 0.5rem;
    font-size: var(--fs-xs); color: rgba(255,255,255,0.4);
    font-weight: 400;
}
/* Statement: statische Venn-Bubbles (ersetzt Bild) */
.statement-bubbles {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
}
.statement-bubbles .bubble-v2 {
    animation: none !important;
    top: 50%;
    transform: translateY(-50%);
}
.statement-bubbles .bubble-v2-yellow {
    width: 60%;
    left: 20%;
}
.statement-bubbles .bubble-v2-coral {
    width: 48%;
    left: 2%;
}
.statement-bubbles .bubble-v2-cyan {
    width: 48%;
    left: 50%;
    background: rgba(102,201,219,0.55);
}

/* ==================== IMAGE BREAK ==================== */
.img-break {
    width: 100%; height: 50vh; overflow: hidden;
    position: relative;
    background-size: cover; background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-color: var(--dark);
}
/* iOS: fixed attachment nicht unterstützt */
@supports (-webkit-touch-callout: none) {
    .img-break { background-attachment: scroll; background-size: auto calc(100% + 200px); }
}
@media (max-width: 768px) {
    .img-break { height: 35vh; background-attachment: scroll; background-size: auto calc(100% + 200px); }
}
.img-break-placeholder {
    width: 100%; height: 120%;
    background: linear-gradient(135deg, var(--dark) 0%, var(--dark-mid) 50%, rgba(8,36,48,0.85) 100%);
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: -10%; left: 0;
    overflow: hidden; will-change: transform;
}
.img-break-placeholder .ib-bubbles { position: absolute; inset: 0; }
.img-break-placeholder .ib-bubbles span {
    position: absolute; border-radius: 50%; background: rgba(255,255,255,0.04);
    top: 50%; transform: translateY(-50%);
}
.img-break-placeholder .ib-bubbles span:nth-child(1) { width: 300px; height: 300px; left: 15%; }
.img-break-placeholder .ib-bubbles span:nth-child(2) { width: 375px; height: 375px; left: calc(15% + 150px); }
.img-break-placeholder .ib-bubbles span:nth-child(3) { width: 300px; height: 300px; left: calc(15% + 450px); }
.img-break-label { font-size: var(--fs-sm); color: rgba(255,255,255,0.2); letter-spacing: 0.2em; text-transform: uppercase; z-index: 1; }
/* img tag hidden — image via CSS background for parallax */
.img-break > .img-break-photo { display: none; }

.tp-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.08));
    display: flex; align-items: center; justify-content: center;
}
.tp-placeholder svg { opacity: 0.15; }

/* ==================== EXPANDABLE SECTIONS ==================== */
.expand-trigger {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: none; border: none; cursor: pointer;
    font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
    color: var(--yellow); padding: 0.6rem 0; transition: all 0.3s;
}
.expand-trigger:hover { opacity: 0.7; }
.expand-trigger .expand-icon {
    width: 20px; height: 20px; border-radius: 50%;
    border: 1.5px solid currentColor;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.3s;
}
.expand-trigger .expand-icon::before {
    content: '+'; font-size: var(--fs-sm); line-height: 1;
}
.expand-trigger.open .expand-icon { transform: rotate(45deg); }
.expand-body {
    max-height: 0; overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.expand-body.open { max-height: 2000px; }

.expand-trigger-dark { color: var(--coral); }

/* ==================== KPI BAR ==================== */
.kpi-bar {
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-y-lg) var(--space-x); background: var(--dark);
    min-height: var(--min-h-feature);
}
.kpi-grid {
    max-width: 1200px; margin: 0 auto; width: 100%;
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 3rem; text-align: center;
}
.kpi { position: relative; }
.kpi::after {
    content: ''; position: absolute; right: 0; top: 15%; height: 70%;
    width: 1px; background: rgba(255,255,255,0.08);
}
.kpi:last-child::after { display: none; }
.kpi .kpi-val {
    font-size: clamp(3rem, 5.5vw, 4.5rem); font-weight: 700;
    color: var(--yellow); line-height: 1; margin-bottom: 0.9rem;
}
.kpi .kpi-label {
    font-size: var(--fs-base); color: rgba(255,255,255,0.7);
    line-height: 1.4; font-weight: 400;
}
.kpi .kpi-source {
    font-size: var(--fs-sm); color: rgba(255,255,255,0.25);
    margin-top: 0.6rem; font-weight: 400;
}

/* ==================== FAQ ==================== */
.faq-list { margin-top: 2rem; }
.faq-item { border-bottom: 1px solid rgba(8,36,48,0.06); }
.faq-q {
    width: 100%; background: none; border: none;
    padding: 1.5rem 0; display: flex; justify-content: space-between;
    align-items: center; cursor: pointer; font-family: inherit;
    font-size: var(--fs-md); font-weight: 600; color: var(--text-dark);
    text-align: left; line-height: 1.35; gap: 1.5rem; transition: color 0.3s;
    text-wrap: balance;
}
.faq-q:hover { color: var(--coral); }
.faq-q .faq-text { display: flex; align-items: baseline; gap: 1rem; min-width: 0; overflow-wrap: anywhere; }
.faq-q .faq-num { font-size: var(--fs-sm); font-weight: 700; color: rgba(255,133,135,0.3); flex-shrink: 0; min-width: 1.5rem; }
.faq-icon {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(8,36,48,0.04); display: flex; align-items: center;
    justify-content: center; font-size: var(--fs-md); font-weight: 300;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); flex-shrink: 0;
}
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
.faq-a-inner { padding: 0 0 1.5rem 2.5rem; font-size: var(--fs-base); color: var(--text-dark-muted); line-height: 1.65; max-width: 660px; font-weight: 400; text-wrap: pretty; }
.faq-item.open .faq-a { max-height: 1000px; }
.faq-item.open .faq-icon { background: var(--coral); color: var(--dark); transform: rotate(45deg); }
.faq-item.open .faq-num { color: var(--coral); }

/* ==================== FINAL CTA ==================== */
.final-cta {
    background: var(--dark-mid) !important;
    min-height: 100vh; min-height: 100svh;
    display: flex; align-items: center; justify-content: center;
    padding: 4rem; text-align: center; position: relative; overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.final-cta .inner { max-width: 600px; position: relative; z-index: 1; width: 100%; }
.final-cta .btn-coral { color: var(--yellow); }
.final-cta .btn-coral:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.25); }

/* ==================== MAP ==================== */
.map-section { line-height: 0; position: relative; }
.map-section::after {
    content: ''; position: absolute; inset: 0;
    background: rgba(255,133,135,0.25);
    mix-blend-mode: multiply; pointer-events: none;
}
.map-section iframe { display: block; width: 100%; filter: grayscale(100%); }

/* -- Map Consent Placeholder -- */
.map-placeholder {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 400px;
    background: var(--dark); color: #fff;
    position: relative; z-index: 1;
    text-align: center; line-height: 1.6;
}
.map-placeholder-inner { max-width: 420px; padding: 2rem; }
.map-placeholder-inner svg { opacity: 0.5; margin-bottom: 0.75rem; }
.map-placeholder-title {
    font-size: var(--fs-md); font-weight: 600;
    margin: 0 0 0.5rem; letter-spacing: 0.02em;
}
.map-placeholder-text {
    font-size: var(--fs-sm); opacity: 0.7;
    margin: 0 0 1.25rem; line-height: 1.5;
}
.map-placeholder-text a { color: var(--yellow); text-decoration: underline; }
.map-placeholder-text a:hover { opacity: 0.8; }
.map-placeholder-btn {
    display: inline-block; padding: 0.65rem 1.6rem;
    background: var(--coral); color: #fff;
    border: none; border-radius: 6px;
    font-family: inherit; font-size: var(--fs-base); font-weight: 600;
    cursor: pointer; transition: all 0.3s;
}
.map-placeholder-btn:hover { background: #ff6e70; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }

/* -- Calendly Consent Dialog -- */
.calendly-consent-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.calendly-consent-box {
    background: var(--dark); color: var(--text-white);
    border-radius: 12px; padding: 2rem;
    max-width: 400px; width: 100%;
    text-align: center; line-height: 1.6;
}
.calendly-consent-title {
    font-size: var(--fs-md); font-weight: 600;
    margin: 0 0 0.5rem; letter-spacing: 0.02em;
}
.calendly-consent-text {
    font-size: var(--fs-sm); opacity: 0.7;
    margin: 0 0 1.25rem; line-height: 1.5;
}
.calendly-consent-text a { color: var(--yellow); text-decoration: underline; }
.calendly-consent-text a:hover { opacity: 0.8; }
.calendly-consent-buttons { display: flex; gap: 0.75rem; justify-content: center; }
.calendly-consent-btn {
    padding: 0.6rem 1.4rem;
    border: none; border-radius: 6px;
    font-family: inherit; font-size: var(--fs-base); font-weight: 600;
    cursor: pointer; transition: all 0.3s;
}
.calendly-consent-btn--cancel {
    background: rgba(255,255,255,0.12); color: var(--text-white);
}
.calendly-consent-btn--cancel:hover {
    background: rgba(255,255,255,0.2);
}
.calendly-consent-btn--accept {
    background: var(--coral); color: #fff;
}
.calendly-consent-btn--accept:hover {
    background: #ff6e70; transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* -- Calendly Popup Close Override -- */
.calendly-popup > .calendly-popup-close {
    top: 12px !important; right: 12px !important;
    width: 32px !important; height: 32px !important;
    background-color: rgba(255,255,255,0.12) !important;
    background-size: 14px !important; background-position: center !important;
    border-radius: 50%;
    transition: background-color 0.2s;
}
.calendly-popup > .calendly-popup-close:hover {
    background-color: rgba(255,255,255,0.25) !important;
}

/* ==================== FOOTER ==================== */
.site-footer {
    background: var(--dark-deep) !important; color: var(--text-white-muted);
    padding: 3.5rem 4rem; border-top: 1px solid rgba(255,226,118,0.1);
}
.fi { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: start; }
.footer-logo-img { height: 54px; width: auto; opacity: 0.7; transition: opacity 0.3s; }
.footer-logo-img:hover { opacity: 1; }
.footer-social { display: flex; gap: 0.75rem; margin-top: 1rem; }
.footer-social a {
    color: var(--text-white-muted); transition: color 0.3s, transform 0.2s;
    display: flex; align-items: center;
}
.footer-social a:hover { color: var(--yellow); transform: translateY(-2px); }
.fc span { display: block; color: var(--text-white-muted); font-size: var(--fs-sm); margin-bottom: 0.35rem; font-weight: 400; }
.fl { display: flex; gap: 3rem; }
.fc-title { color: var(--text-white); font-size: var(--fs-sm); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.7rem; font-weight: 600; }
.fc a { display: block; color: var(--text-white-muted); text-decoration: none; font-size: var(--fs-sm); margin-bottom: 0.35rem; transition: all 0.3s; font-weight: 400; }
.fc a:hover { color: var(--text-white); padding-left: 3px; }


/* Newsletter-Link in footer */
.fn { margin-top: 0.8rem; }
.fn-hint { font-size: var(--fs-xs); color: rgba(255,255,255,0.55); margin-top: 0.35rem; display: block; }
.fn-link {
    display: inline-flex; align-items: center;
    color: var(--yellow); text-decoration: none;
    font-size: var(--fs-sm); font-weight: 600;
    padding: 0.55rem 0.9rem;
    border: 1px solid rgba(255,226,118,0.3); border-radius: 6px;
    transition: all 0.3s;
}
.fn-link:hover { background: rgba(255,226,118,0.1); border-color: var(--yellow); }
/* ==================== ANIMATIONS ==================== */
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.hero-content > * { opacity: 0; animation: fadeUp 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) forwards; }
.hero-content > *:nth-child(1) { animation-delay: 0.1s; }
.hero-content > *:nth-child(2) { animation-delay: 0.2s; }
.hero-content > *:nth-child(3) { animation-delay: 0.35s; }
.hero-content > *:nth-child(4) { animation-delay: 0.5s; }
.hero-content > *:nth-child(5) { animation-delay: 0.65s; }
.hero-visual { opacity: 0; animation: fadeIn 1.5s ease 0.2s forwards; }
@keyframes fadeIn { to { opacity: 1; } }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1024px) {
    .hero-grid { max-width: 800px; }
    .proof-card { flex: 0 0 calc((100% - 1.5rem) / 2); }
}

/* ---- Niedrige Viewport-Höhen (flache/breite Fenster, Laptops): Hero so
   skalieren, dass Headline, Bubbles, Buttons UND Scroll-Hinweis IMMER
   gleichzeitig sichtbar bleiben. Die Headline schrumpft zusätzlich fluid über
   8.5vh in --fs-hero. Greift nur ab Desktop-Breite (>900px). ---- */
@media (min-width: 901px) and (max-height: 1000px) {
    .ct-hero { padding-top: 5.5rem; padding-bottom: 2.5rem; }
    .ct-hero h1 { margin-bottom: 1.1rem; }
    .ct-hero .subline { line-height: 1.45; }
    .hero-cta { margin-top: 1.4rem; }
}
@media (min-width: 901px) and (max-height: 820px) {
    .ct-hero { padding-top: 5.25rem; padding-bottom: 1.75rem; }
    .ct-hero h1 { margin-bottom: 0.75rem; }
    .ct-hero .subline { font-size: var(--fs-md); margin-top: 0; }
    .hero-cta { margin-top: 1rem; }
    .scroll-hint { bottom: 1.25rem; }
}

@media (max-width: 900px) {
    .site-header { padding: 0 1.5rem; }
    .nav-links { display: none; }
    .hamburger { display: block; }
    .ct-hero {
        min-height: 100vh; min-height: 100svh;
        height: auto; padding: 5rem 1.5rem 3rem;
    }
    .hero-visual { overflow: visible; }
    .bubble-v2 {
        top: 170px; bottom: auto;
        transform: translateY(-50%);
    }
    .bubble-v2-yellow {
        width: clamp(50px, 14vw, 65px);
        left: calc(50% - clamp(50px, 14vw, 65px) / 2);
        animation: bv2Yellow 18s ease-in-out infinite;
    }
    .bubble-v2-coral {
        width: clamp(40px, 11vw, 52px);
        left: calc(50% - clamp(40px, 11vw, 52px));
        animation: bv2Coral 14s ease-in-out infinite;
    }
    .bubble-v2-cyan {
        width: clamp(40px, 11vw, 52px);
        left: 50%;
        animation: bv2Cyan 16s ease-in-out infinite;
    }
    .ct-hero-v2 {
        padding-top: 2rem;
        align-items: flex-start;
        padding-bottom: 3rem;
    }
    .ct-hero-v2 .hero-grid {
        padding-top: calc(clamp(50px, 14vw, 65px) + 145px);
    }
    /* Statement: Padding kommt aus var(--space-*), hier nur Grid-Layout */
    .statement-grid { grid-template-columns: 1fr; gap: 2rem; }
    .statement-text { text-align: left; }
    .statement-media { margin: 0 auto; }
    .statement-caption { text-align: center; }
    .scroll-hint { bottom: 1.5rem; }
    .ct-hero h1 { margin-bottom: 1.5rem; }
    .hero-cta { margin-top: 2rem; }

    html { font-size: 15px; }
    /* Section-Paddings (.s-*, .statement, .pq-compact, .kpi-bar) skalieren via var(--space-*) */
    .pq-compact .pq-inner { align-items: center; text-align: center; }
    .pq-num { font-size: clamp(4.5rem, 20vw, 7rem); margin-bottom: 1.4rem; }

    .img-break { height: 200px; }
    .kpi-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; }
    .final-cta { min-height: 100vh; min-height: 100svh; padding: 3.5rem 1.5rem; }
    .pgrid { grid-template-columns: 1fr; }

    .tl-line { display: none; }
    .tl-step { grid-template-columns: 1fr; gap: 0; }
    .tl-marker { width: 40px; height: 40px; font-size: var(--fs-sm); margin-bottom: 1rem; }
    .tl-content { padding: 1.8rem; }
    .tl-content::before { display: none; }

    .proof-scroll { flex-direction: column; gap: 1rem; overflow-x: hidden; }
    .proof-scroll .proof-card,
    .proof-scroll .proof-toggle { flex: 0 0 auto; width: 100%; }
    /* Mobile: 2 Karten sichtbar + Toggle, Rest hinter Toggle */
    .proof-scroll .proof-card:nth-child(n+3) { display: none; }
    .proof-scroll .proof-toggle {
        display: flex;
        min-height: 56px; flex-direction: row; gap: 0.6rem; padding: 0.8rem 1.2rem;
    }
    .proof-scroll.proof-expanded .proof-card:nth-child(n+3) { display: flex; }
    .proof-scroll.proof-expanded .proof-toggle { display: none; }
    .proof-toggle .pt-icon { width: 36px; height: 36px; font-size: 1.1rem; }
    .proof-toggle .pt-label { font-size: var(--fs-sm); }

    .da-layout { grid-template-columns: 1fr; gap: 0; text-align: center; }
    .da-text { text-align: center; display: flex; flex-direction: column; align-items: center; }
    .da-chart--desktop { display: none; }
    .da-chart--mobile { display: flex; margin: -1rem 0 -0.5rem; }
    .da-chart--mobile canvas { max-width: 280px; aspect-ratio: 1 / 0.8; }

    .story { grid-template-columns: 1fr; gap: 2rem; }
    .model-grid { grid-template-columns: 1fr 1fr; }
    /* Team Mobile: alle Karten vertikal gestapelt (kein Toggle mehr) */
    .tgrid { flex-direction: column; gap: 1rem; overflow-x: hidden; padding-bottom: 0; }
    .tc { flex: 0 0 auto; width: 100%; }
    .tp-logo { height: 20px; bottom: 8px; left: 8px; }
    .tp-li { width: 26px; height: 26px; bottom: 8px; right: 8px; }
    .tp-li svg { width: 12px; height: 12px; }
    .hero-cta { gap: 0.75rem; }
    .hero-cta .btn-coral, .hero-cta .btn-ghost { font-size: var(--fs-sm); padding: 0.75rem 1.5rem; }
    .site-footer { padding: 2.5rem 1.5rem; }
    .fi { flex-direction: column; gap: 2rem; }
    .fl { flex-wrap: wrap; gap: 2rem; }
    .faq-a-inner { padding-left: 0; }
    .section-label::before { width: 16px; }
}

@media (max-width: 480px) {
    .ct-hero h1 { max-width: 100%; }
    .hero-cta .btn-coral, .hero-cta .btn-ghost { font-size: var(--fs-sm); padding: 0.5rem 1rem; }
    /* section-title + tl-content h3 skalieren via clamp — keine Overrides nötig */
    .model-grid { grid-template-columns: 1fr; }
    .tl-content { padding: 1.5rem; }
    .pcard { padding: 2rem; }
    /* Team auch hier vertikal stacken (override gegen alte 140px-Regel) */
    .tc { flex: 0 0 auto; width: 100%; }
}

/* ==================== COOKIE CONSENT BANNER ==================== */
.cc-banner {
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 9999;
    background: var(--dark);
    color: var(--text-white);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    font-size: var(--fs-base);
}
.cc-banner.cc-visible { transform: translateY(0); }

.cc-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.25rem 2rem;
}

.cc-main {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.cc-text { flex: 1 1 300px; }
.cc-text p { margin: 0; line-height: 1.5; color: var(--text-white-muted); }
.cc-text a { color: var(--text-white); text-decoration: underline; text-underline-offset: 2px; }
.cc-text a:hover { color: var(--coral); }

.cc-buttons {
    display: flex;
    gap: 0.6rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.cc-btn {
    font-family: 'Lexend Deca', sans-serif;
    font-size: var(--fs-sm);
    font-weight: 500;
    padding: 0.55rem 1.2rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s, box-shadow 0.3s;
    white-space: nowrap;
}
.cc-btn--primary {
    background: var(--coral);
    color: var(--dark);
}
.cc-btn--primary:hover { background: #e87072; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.cc-btn--secondary {
    background: transparent;
    color: var(--text-white);
    border: 1px solid var(--border-light);
}
.cc-btn--secondary:hover {
    border-color: var(--text-white);
    transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Story-Headline (im Fließtext, eigene Größe weil zwischen Paragraphen) */
.story-text h3 {
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: 1.25;
    text-wrap: balance;
}

/* settings view */
.cc-settings-head {
    font-weight: 600;
    font-size: var(--fs-base);
    margin-bottom: 0.8rem;
}

.cc-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0;
    cursor: pointer;
}
.cc-toggle--disabled { opacity: 0.6; cursor: default; }

.cc-toggle input { display: none; }

.cc-toggle-slider {
    position: relative;
    width: 40px; height: 22px;
    background: rgba(255,255,255,0.15);
    border-radius: 11px;
    flex-shrink: 0;
    transition: background 0.3s;
}
.cc-toggle-slider::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s;
}
.cc-toggle input:checked + .cc-toggle-slider {
    background: var(--coral);
}
.cc-toggle input:checked + .cc-toggle-slider::after {
    transform: translateX(18px);
}

.cc-toggle-label { color: var(--text-white); }
.cc-toggle-hint { color: var(--text-white-muted); font-size: var(--fs-sm); }

.cc-settings .cc-buttons { margin-top: 1rem; }

/* responsive */
@media (max-width: 640px) {
    .cc-inner { padding: 0.75rem 1rem; }
    .cc-main { flex-direction: column; align-items: stretch; gap: 0.6rem; }
    .cc-text { flex: none; }
    .cc-text p { font-size: var(--fs-sm); }
    .cc-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
    .cc-btn { text-align: center; font-size: var(--fs-sm); padding: 0.45rem 0.8rem; }
    .cc-btn--primary { grid-column: 1 / -1; }
    .cc-settings .cc-buttons { grid-template-columns: 1fr 1fr; }
    .cc-toggle { padding: 0.25rem 0; }
    .cc-settings-head { font-size: var(--fs-base); margin-bottom: 0.4rem; }
}

/* ==================== REDUCED MOTION ==================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
    .reveal-d1, .reveal-d2, .reveal-d3, .reveal-d4 { transition-delay: 0ms !important; }
    .bubble-v2-yellow, .bubble-v2-coral, .bubble-v2-cyan, .bubbles-bg span { animation: none !important; }
}