/* ══ FLUSS — der durchlaufende Verlauf, für ALLE Seiten ════════════════════ 23.07.2026 · herausgelöst aus _entwurf_drohnen_apple.css, damit Drohne, Webdesign, Event, Immobilien und Schulung denselben Grund tragen. Nutzung: + diese Datei nach site.css laden. Das Karussell (.hl-*) blieb bewusst in _entwurf_drohnen_apple.css — es gehört nur der Drohnenseite. */ /* ══ VARIANTE B2 — hell, aber EIN Fluss ═══════════════════════════════════ Der Verlauf gehört der SEITE, nicht den Sektionen. Schwarz hinter dem Hero, dann über eine lange Strecke (~700px) nach Sand — danach nur noch minimal waermer. Keine Flaeche malt mehr selbst, also kann keine Naht entstehen. */ html{background:#050505} /* Der Uebergang haengt an der FENSTERHOEHE, nicht an der Seitenlaenge: Verlaufsflaeche = Hero (100svh) + 420px Nachlauf. So beginnt der Sand immer erst UNTER dem Hero — egal wie hoch oder flach das Fenster ist. */ body.flussB{ /* ══ APPLE-PRINZIP: EIN Verlauf ueber die GANZE Seitenhoehe ══════════════ Oben reines Schwarz, unten reines Weiss. Weil sich die Aufhellung ueber die komplette Dokumenthoehe verteilt, aendert sich die Farbe pro Bild- schirm nur minimal — man kann nirgends zeigen, wo etwas "anfaengt". Keine Zone, kein Uebergang, kein Loch. */ background-color:#ffffff; background-image:linear-gradient(to bottom, #000000 0%, #040404 4%, #121210 8%, #2b2823 12%, #565146 16%, #8d8779 20%, #b8b3a3 24%, #d4d0c2 29%, #e6e3d9 36%, #f0eee7 46%, #f6f5f0 60%, #fbfaf7 78%, #fefefd 90%, #ffffff 100%); background-repeat:no-repeat; background-position:top center; background-size:100% 100%; background-attachment:scroll} /* Feines Rauschen gegen Streifenbildung: ueber 7.800px wuerde ein reiner 8-Bit-Verlauf sichtbare Baender zeigen. Apple dithert aus demselben Grund. */ body.flussB::after{content:'';position:fixed;inset:0;z-index:1;pointer-events:none; opacity:.035;mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,")} /* Alle Flaechen transparent — keine eigenen Hintergruende, keine Kanten */ body.flussB .lp-sec, body.flussB .lp-sec.alt, body.flussB .lp-cta-band, body.flussB .site-footer, body.flussB .ft-bottom{ background:transparent !important;background-image:none !important; border-top:0 !important;border-bottom:0 !important; backdrop-filter:none !important;-webkit-backdrop-filter:none !important} /* Uebergangsraum: die erste Sektion beginnt tiefer, damit der Verlauf Platz hat */ body.flussB .lp-hero + .lp-sec{padding-top:clamp(90px,10vw,150px)} /* Hero-Film blendet ueber eine lange Maske spurlos aus */ body.flussB .site-reel{position:absolute;top:0;left:0;right:0;height:112svh;bottom:auto; -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 34%,rgba(0,0,0,.92) 46%,rgba(0,0,0,.72) 58%,rgba(0,0,0,.48) 70%,rgba(0,0,0,.26) 82%,rgba(0,0,0,.09) 92%,transparent 100%); mask-image:linear-gradient(to bottom,#000 0%,#000 34%,rgba(0,0,0,.92) 46%,rgba(0,0,0,.72) 58%,rgba(0,0,0,.48) 70%,rgba(0,0,0,.26) 82%,rgba(0,0,0,.09) 92%,transparent 100%)} body.flussB .lp-hero{background:transparent} /* ── Schrift auf Sand ── */ body.flussB .lp-sec .sec-h,body.flussB .lp-sec h2, body.flussB .lp-sec h3,body.flussB .lp-sec h4{color:#15140e} body.flussB .lp-sec p,body.flussB .lp-sec .lead{color:#4f4c42} body.flussB .lp-sec strong{color:#15140e} body.flussB .sec-eyebrow{color:#6f6b5e} body.flussB .sec-eyebrow::before{background:#15140e;box-shadow:none} body.flussB .lp-sec *{text-shadow:none} /* Lime bleibt CI — Leuchtstift, der nach rechts weich auslaeuft */ body.flussB .lp-sec .acc{color:#15140e; background:linear-gradient(90deg,rgba(232,255,0,.95),rgba(232,255,0,.7) 65%,rgba(232,255,0,0)); background-repeat:no-repeat;background-size:100% .36em;background-position:0 88%} /* Karten schweben im Verlauf — weicher Rand, kein harter Kasten */ body.flussB .card,body.flussB .step, body.flussB .preis,body.flussB .price-box{ background:linear-gradient(165deg,rgba(255,255,255,.85),rgba(255,255,255,.5)); border:1px solid rgba(0,0,0,.055);box-shadow:0 18px 44px rgba(0,0,0,.07)} body.flussB .card h3,body.flussB .step h4, body.flussB .price-box h3,body.flussB .preis-wert{color:#15140e} body.flussB .card p,body.flussB .step p, body.flussB .price-box p,body.flussB .preis-was{color:#57544a} body.flussB .num{color:#a8a46a} body.flussB .more,body.flussB .preis-name, body.flussB .preis-vgl b,body.flussB .check .mk{color:#5c6a00} body.flussB .preis-vgl{color:#7b7768;border-top:0} body.flussB .check h4{color:#15140e} body.flussB .check p{color:#57544a} /* FAQ-Trenner: Pinselstrich, an beiden Enden ausgefranst */ body.flussB .faq details{border-top:0 !important;position:relative} body.flussB .faq details::before{content:'';position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(0,0,0,.10) 14%,rgba(0,0,0,.10) 86%,transparent)} body.flussB .faq summary{color:#15140e} body.flussB .faq p{color:#57544a} /* Knoepfe mit echtem Kontrast */ body.flussB .lp-sec .btn-acc,body.flussB .lp-cta-band .btn-acc{background:#15140e;border-color:#15140e;color:#f5f5f0} body.flussB .lp-sec .btn-acc .wa-core,body.flussB .lp-cta-band .btn-acc .wa-core{background:var(--acc);color:#15140e} body.flussB .lp-sec .btn-lnk{border-color:rgba(0,0,0,.18);color:#15140e} /* CTA + Fusszeile: nur Schrift, keine Flaeche */ body.flussB .lp-cta-band h2{color:#15140e} body.flussB .lp-cta-band h2 em{color:#15140e; background:linear-gradient(90deg,rgba(232,255,0,.95),rgba(232,255,0,0)); background-repeat:no-repeat;background-size:100% .36em;background-position:0 88%} body.flussB .lp-cta-band p{color:#4f4c42} body.flussB .site-footer,body.flussB .site-footer a,body.flussB .site-footer p{color:#4f4c42} body.flussB .ft-brand .ft-logo{color:#15140e} body.flussB .ft-brand .ft-logo b{color:#5c6a00} body.flussB .ft-col h5{color:#15140e} /* ══ SCHRIFTFARBE FOLGT DEM VERLAUF ═══════════════════════════════════════ Obere Seitenhaelfte liegt auf Dunkel -> helle Schrift. Untere Haelfte liegt auf Hell -> dunkle Schrift. Der Wechsel passiert zwischen Recht&Sicherheit und Preisen, wo der Grund neutral ist — dort faellt er am wenigsten auf. */ body.flussB section:nth-of-type(-n+2) .sec-h, body.flussB section:nth-of-type(-n+2) h2, body.flussB section:nth-of-type(-n+2) h3, body.flussB section:nth-of-type(-n+2) h4{color:#f7f7f2} body.flussB section:nth-of-type(-n+2) p, body.flussB section:nth-of-type(-n+2) .lead{color:rgba(247,247,242,.82)} body.flussB section:nth-of-type(-n+2) strong{color:#ffffff} body.flussB section:nth-of-type(-n+2) .sec-eyebrow{color:rgba(247,247,242,.62)} body.flussB section:nth-of-type(-n+2) .sec-eyebrow::before{background:var(--acc)} body.flussB section:nth-of-type(-n+2) .acc{color:#f7f7f2;background:none; box-shadow:inset 0 -.30em 0 rgba(232,255,0,.85)} body.flussB section:nth-of-type(-n+2) .card, body.flussB section:nth-of-type(-n+2) .step{ background:linear-gradient(165deg,rgba(255,255,255,.09),rgba(255,255,255,.035)); border-color:rgba(255,255,255,.10)} body.flussB section:nth-of-type(-n+2) .card h3, body.flussB section:nth-of-type(-n+2) .step h4{color:#f7f7f2} body.flussB section:nth-of-type(-n+2) .card p, body.flussB section:nth-of-type(-n+2) .step p{color:rgba(247,247,242,.78)} body.flussB section:nth-of-type(-n+2) .check h4{color:#f7f7f2} body.flussB section:nth-of-type(-n+2) .check p{color:rgba(247,247,242,.78)} body.flussB section:nth-of-type(-n+2) .num{color:rgba(232,255,0,.75)} body.flussB section:nth-of-type(-n+2) .more{color:var(--acc)} body.flussB section:nth-of-type(-n+2) .check .mk{color:var(--acc)} body.flussB section:nth-of-type(-n+2) .btn-lnk{border-color:rgba(255,255,255,.22);color:#f7f7f2} /* ══ NEON-DUNKEL HOVER · ACID-LIME #E8FF00 ══════════════════════════════ NUR NOCH FUER DIE PREIS-KACHELN (22.07.2026, Ansage Dominik: ueberall sonst raus). Dort ist das Umkippen auf Schwarz gewollt: Lime leuchtet auf hellem Grund physikalisch nicht — erst der dunkle Grund macht den Markenton zum echten Neon, und genau die Preise sollen den Blick holen. WICHTIG: Die Schrift muss in BEIDEN Seitenhaelften hell werden, weil die Kachel dunkel wird — unten steht sie sonst dunkel auf dunkel. */ body.flussB .preis{transition:transform .45s var(--ease),box-shadow .45s var(--ease), border-color .45s var(--ease),background .45s var(--ease)} body.flussB .preis:hover, body.flussB .preis.neon-demo{ transform:translateY(-8px) scale(1.02); border-color:var(--acc); background:linear-gradient(165deg,#1a1512,#0c0908 70%,#080606); box-shadow: inset 0 0 0 1px rgba(232,255,0,.32), inset 0 0 34px rgba(232,255,0,.26), 0 0 0 1.5px var(--acc), 0 0 10px rgba(250,255,205,.95), 0 0 22px rgba(232,255,0,1), 0 0 48px rgba(224,250,0,.9), 0 0 100px rgba(205,235,0,.55), 0 0 190px rgba(190,220,0,.3)} /* Schrift in der gekippten Kachel — gilt fuer beide Seitenhaelften */ body.flussB .preis:hover .preis-wert,body.flussB .preis.neon-demo .preis-wert{color:#eaff7a;text-shadow:0 0 18px rgba(232,255,0,.85)} body.flussB .preis:hover .preis-name,body.flussB .preis.neon-demo .preis-name{color:var(--acc);text-shadow:0 0 12px rgba(232,255,0,.75)} body.flussB .preis:hover .preis-was,body.flussB .preis.neon-demo .preis-was{color:rgba(247,247,242,.84)} body.flussB .preis:hover .preis-vgl,body.flussB .preis.neon-demo .preis-vgl{color:rgba(247,247,242,.58);border-top-color:rgba(232,255,0,.2)} body.flussB .preis:hover .preis-vgl b,body.flussB .preis.neon-demo .preis-vgl b{color:rgba(232,255,0,.92)} /* ══ HELLER HOVER fuer Ablauf- und Inhaltskacheln ═════════════════════════ Kein Umkippen auf Schwarz mehr. Die Kachel bleibt, was sie ist, und hebt sich nur an: etwas heller, etwas hoeher, ein weicherer und tieferer Schatten, der Rand nimmt einen Hauch Lime auf. Ruhig statt laut — das Neon bleibt den Preisen vorbehalten. */ body.flussB .card, body.flussB .step{transition:transform .45s var(--ease),box-shadow .45s var(--ease), border-color .45s var(--ease),background .45s var(--ease)} body.flussB .card:hover, body.flussB .step:hover{ transform:translateY(-5px); background:linear-gradient(165deg,rgba(255,255,255,.95),rgba(255,255,255,.68)); border-color:rgba(140,155,0,.34); box-shadow:0 24px 54px rgba(0,0,0,.11)} /* In der dunklen oberen Seitenhaelfte liegen dieselben Kacheln auf Schwarz — dort waere „heller werden" ein weisser Klotz. Also nur leicht aufhellen. */ body.flussB section:nth-of-type(-n+2) .card:hover, body.flussB section:nth-of-type(-n+2) .step:hover{ background:linear-gradient(165deg,rgba(255,255,255,.15),rgba(255,255,255,.06)); border-color:rgba(232,255,0,.34); box-shadow:0 24px 54px rgba(0,0,0,.28)}