/* =========================================================================
   FLOW-LANDING (index2.php / index6.php) - 2026-09-24
   Laedt NACH landing.css + blog.css und legt sich nur ueber body.flow.
   Idee: ein durchgehender Himmel statt Sektionshintergruenden, ein Punkte-
   Netzwerk dahinter (.flow-net) und eine Netzwerk-Szene als Hauptmoment.
   Tagmodus: --flow-light (0 = dunkel, 1 = hell) blendet die helle Schicht
   ein; Hero und Footer bekommen dort eine eigene dunkle Flaeche (s. u.).
   ========================================================================= */

html.landing:has(body.flow) {
    background-color: #0d1c27;
    --flow-light: 0;
    --flow-p: 0;
}
html[data-theme="light"].landing:has(body.flow) {
    background-color: #eef4f0;
}

/* landing.css setzt overflow-x:hidden auf html UND body - dadurch wird body
   zum Scroll-Container und position:sticky (Netzwerk-Buehne) greift nicht.
   clip schneidet genauso ab, ohne Scroll-Container zu sein. */
html.landing:has(body.flow),
body.flow.landing {
    overflow-x: clip !important;
}

/* Sektionen durchsichtig -> der Himmel darunter traegt die ganze Seite */
body.flow.landing {
    background: transparent !important;
}
body.flow :is(.hero, .backbone, .how-it-works, .features, .pricing, .benefits,
              .faq, .blog-teaser, .cta, .footer, .flow-network, .flow-save) {
    background: transparent;
}

/* ---------- Himmel ---------- */
.flow-sky {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
}
.flow-sky::before,
.flow-sky::after {
    content: "";
    position: absolute;
    inset: -30vh -10vw;
    will-change: transform, opacity;
}
/* Nacht: Aurora-Flecken wandern langsam mit dem Scrollfortschritt */
.flow-sky::before {
    background:
        radial-gradient(ellipse 60% 45% at 22% 18%, rgba(26, 68, 94, 0.85) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 82% 62%, rgba(141, 224, 168, 0.11) 0%, transparent 70%),
        radial-gradient(ellipse 70% 50% at 40% 95%, rgba(22, 58, 78, 0.9) 0%, transparent 70%),
        #0d1c27;
    transform: translate3d(calc(var(--flow-p) * -6vw), calc(var(--flow-p) * -24vh), 0);
}
/* Tag: helle Schicht, per --flow-light eingeblendet */
.flow-sky::after {
    background:
        radial-gradient(ellipse 60% 45% at 78% 20%, rgba(141, 224, 168, 0.28) 0%, transparent 70%),
        radial-gradient(ellipse 55% 45% at 15% 75%, rgba(111, 207, 151, 0.16) 0%, transparent 70%),
        linear-gradient(180deg, #f7faf8 0%, #e9f2ec 100%);
    opacity: var(--flow-light);
    transform: translate3d(calc(var(--flow-p) * 5vw), calc(var(--flow-p) * -18vh), 0);
}

/* Tagmodus: Hero und Footer bleiben dunkel. Die dunkle Flaeche haengt an
   den Sektionen selbst und scrollt ohne JS mit (eine per JS nachgefuehrte
   Maske am fixen Himmel hinkte beim Scrollen hinterher). Ebene: ueber dem
   Himmel (z -2, steht im DOM davor), unter dem Stroemungsfeld (z -1).
   Kante 400px, mittig auf der Sektionsgrenze, Deckkraft nach smoothstep;
   obere Haelfte im Hero (overflow hidden), untere in der Sektion danach. */
html[data-theme="light"] body.flow .hero + section {
    position: relative;
}
html[data-theme="light"] body.flow :is(.hero, .hero + section)::before,
html[data-theme="light"] body.flow .footer::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: -2;
    pointer-events: none;
}
html[data-theme="light"] body.flow .hero::before {
    top: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 60% 45% at 22% 18%, rgba(20, 58, 82, 0.85) 0%, transparent 70%),
        #08121a;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 200px), rgba(0, 0, 0, 0.972) calc(100% - 160px), rgba(0, 0, 0, 0.896) calc(100% - 120px), rgba(0, 0, 0, 0.784) calc(100% - 80px), rgba(0, 0, 0, 0.648) calc(100% - 40px), rgba(0, 0, 0, 0.500) 100%);
            mask-image: linear-gradient(180deg, #000 calc(100% - 200px), rgba(0, 0, 0, 0.972) calc(100% - 160px), rgba(0, 0, 0, 0.896) calc(100% - 120px), rgba(0, 0, 0, 0.784) calc(100% - 80px), rgba(0, 0, 0, 0.648) calc(100% - 40px), rgba(0, 0, 0, 0.500) 100%);
}
html[data-theme="light"] body.flow .hero + section::before {
    top: 0;
    height: 200px;
    background: #08121a;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.500) 0px, rgba(0, 0, 0, 0.352) 40px, rgba(0, 0, 0, 0.216) 80px, rgba(0, 0, 0, 0.104) 120px, rgba(0, 0, 0, 0.028) 160px, transparent 200px);
            mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.500) 0px, rgba(0, 0, 0, 0.352) 40px, rgba(0, 0, 0, 0.216) 80px, rgba(0, 0, 0, 0.104) 120px, rgba(0, 0, 0, 0.028) 160px, transparent 200px);
}
html[data-theme="light"] body.flow .footer::after {
    top: -200px;
    bottom: 0;
    background:
        radial-gradient(ellipse 70% 50% at 40% 95%, rgba(16, 48, 66, 0.9) 0%, transparent 70%),
        #08121a;
    -webkit-mask-image: linear-gradient(180deg, transparent 0px, rgba(0, 0, 0, 0.028) 40px, rgba(0, 0, 0, 0.104) 80px, rgba(0, 0, 0, 0.216) 120px, rgba(0, 0, 0, 0.352) 160px, rgba(0, 0, 0, 0.500) 200px, rgba(0, 0, 0, 0.648) 240px, rgba(0, 0, 0, 0.784) 280px, rgba(0, 0, 0, 0.896) 320px, rgba(0, 0, 0, 0.972) 360px, #000 400px);
            mask-image: linear-gradient(180deg, transparent 0px, rgba(0, 0, 0, 0.028) 40px, rgba(0, 0, 0, 0.104) 80px, rgba(0, 0, 0, 0.216) 120px, rgba(0, 0, 0, 0.352) 160px, rgba(0, 0, 0, 0.500) 200px, rgba(0, 0, 0, 0.648) 240px, rgba(0, 0, 0, 0.784) 280px, rgba(0, 0, 0, 0.896) 320px, rgba(0, 0, 0, 0.972) 360px, #000 400px);
}

/* ---------- Punkte-Netzwerk im Hintergrund ---------- */
.flow-net {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    display: block;
}

/* ---------- Hero ---------- */
/* Die Szene aus landing.js dunkelt unten selbst ab - hier laeuft sie weich
   in den Himmel aus statt an einer Kante zu enden. */
body.flow .hero .bt-particle-canvas {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}
/* .hero-bg wandert per Parallaxe (landing.js) nach unten und wuerde an der
   Hero-Unterkante hart abgeschnitten - der Himmel uebernimmt seine Aufgabe. */
body.flow .hero-bg {
    display: none;
}

/* Footer ohne eigene Flaeche; die Linie oben weich statt hart */
body.flow .footer {
    position: relative;
    border-top: 0;
}
body.flow .footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(141, 224, 168, 0.25), transparent);
}

/* ---------- Weiches Auftauchen ---------- */
.flow-in {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: var(--flow-d, 0s);
}
.flow-in.is-in {
    opacity: 1;
    transform: none;
}

/* =========================================================================
   NETZWERK-SZENE
   ========================================================================= */
.flow-network {
    position: relative;
    padding-top: var(--bt-section-y);
    color: var(--bt-text);
}
.fn-intro {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--bt-pad-x);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: end;
}
.fn-intro h2 {
    font-family: var(--bt-font-display);
    font-size: clamp(40px, 4.4vw, 64px);
    font-weight: 500;
    letter-spacing: -1.5px;
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
}
.fn-intro p {
    font-size: 17px;
    color: var(--bt-text-2);
    line-height: 1.6;
    margin: 0;
    max-width: 480px;
}

/* Laenge der Scrollstrecke = Anzahl Schritte x 90vh + eine Buehne */
.fn-track {
    position: relative;
    height: calc(var(--fn-steps, 4) * 90vh + 100vh);
}
.fn-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}
.fn-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.fn-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    left: max(var(--bt-pad-x), calc((100vw - 1440px) / 2 + var(--bt-pad-x)));
    top: 50%;
    width: min(400px, 34vw);
    height: 280px;
    transform: translateY(-50%);
}
.fn-step {
    position: absolute;
    inset: 0 0 auto 0;
    opacity: 0;
    transform: translateY(22px);
    /* raus: schnell - rein: etwas spaeter, damit sich die Texte nicht ueberlagern */
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
    pointer-events: none;
}
.fn-step.is-active {
    opacity: 1;
    transform: none;
    transition:
        opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s,
        transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s;
}
.fn-step.is-past {
    transform: translateY(-22px);
}
.fn-step-kicker {
    display: block;
    font-family: var(--bt-font-mono);
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--bt-mint);
    margin-bottom: 14px;
}
.fn-step-n {
    color: var(--bt-text-3);
    margin-right: 6px;
}
.fn-step h3 {
    font-family: var(--bt-font-display);
    font-size: clamp(22px, 2.1vw, 30px);
    overflow-wrap: break-word;
    hyphens: auto;
    font-weight: 500;
    letter-spacing: -0.5px;
    line-height: 1.1;
    text-transform: uppercase;
    margin: 0 0 18px;
    color: var(--bt-text);
}
.fn-step p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--bt-text-2);
    margin: 0;
}
/* Schritt 1 (Chaos): Kicker warm statt Mint */
.fn-step[data-step="0"] .fn-step-kicker {
    color: #f0b36a;
}

.fn-progress {
    position: absolute;
    left: max(var(--bt-pad-x), calc((100vw - 1440px) / 2 + var(--bt-pad-x)));
    bottom: 48px;
    width: min(400px, 34vw);
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
}
.fn-progress span {
    display: block;
    height: 100%;
    width: 100%;
    transform-origin: left center;
    transform: scaleX(var(--fn-p, 0));
    background: var(--bt-grad-mint);
}

/* =========================================================================
   ERSPARNIS
   ========================================================================= */
.flow-save {
    position: relative;
    padding: 40px var(--bt-pad-x) var(--bt-section-y);
    color: var(--bt-text);
}
.fs-inner {
    max-width: 1440px;
    margin: 0 auto;
}
.fs-lead {
    font-family: var(--bt-font-mono);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--bt-mint);
    margin: 0 0 28px;
}
.fs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--bt-line);
}
.fs-item {
    padding: 36px 40px 0 0;
}
.fs-item + .fs-item {
    padding-left: 40px;
    border-left: 1px solid var(--bt-line);
}
.fs-word {
    font-family: var(--bt-font-display);
    font-size: clamp(40px, 4.6vw, 76px);
    font-weight: 500;
    letter-spacing: -1.5px;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 22px;
}
.fs-item p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--bt-text-2);
    margin: 0;
    max-width: 380px;
}

/* ---------- Tablet / Mobil ---------- */
@media (max-width: 900px) {
    .fn-intro {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .fn-track {
        height: calc(var(--fn-steps, 4) * 80vh + 100vh);
    }
    .fn-steps {
        left: var(--bt-pad-x);
        right: var(--bt-pad-x);
        top: auto;
        bottom: 72px;
        width: auto;
        height: 230px;
        transform: none;
    }
    .fn-step h3 { font-size: 22px; margin-bottom: 12px; }
    .fn-step p { font-size: 15px; }
    .fn-progress {
        left: var(--bt-pad-x);
        right: var(--bt-pad-x);
        width: auto;
        bottom: 36px;
    }
    .fs-grid { grid-template-columns: 1fr; }
    .fs-item,
    .fs-item + .fs-item {
        padding: 32px 0;
        border-left: 0;
    }
    .fs-item + .fs-item { border-top: 1px solid var(--bt-line); }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
    .flow-sky::before,
    .flow-sky::after { transform: none; }
    .flow-in { opacity: 1; transform: none; transition: none; }
    .fn-track { height: auto; }
    .fn-stage {
        position: relative;
        height: auto;
        min-height: 70vh;
        padding: 48px 0;
    }
    .fn-canvas { position: relative; height: 60vh; margin-bottom: 32px; }
    .fn-steps {
        position: relative;
        inset: auto;
        transform: none;
        width: auto;
        height: auto;
        padding: 0 var(--bt-pad-x);
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
        gap: 32px;
        max-width: 1440px;
        margin: 0 auto;
    }
    .fn-step { position: static; opacity: 1; transform: none; transition: none; }
    .fn-progress { display: none; }
}