/* ==========================================================================
   TrendShip — Blau-Schicht "Tiefsee" (2026-08-28)
   Liegt ueber dem Inline-CSS der Seite. Aendert nur Farbe, Tiefe und
   Kontrast-Regie — keine Struktur. Reihenfolge: nach dem <style> laden.
   ========================================================================== */

:root{
  /* Helle Flaechen: Papier mit Blau-Bias statt Creme */
  --ink:#F5F7FC; --ink-2:#EDF1FA; --surface:#E5EBF6; --surface-2:#DCE4F2;
  --line:rgba(9,16,32,.14); --line-2:rgba(9,16,32,.26);
  --text:#091020; --muted:rgba(9,16,32,.70); --faint:rgba(9,16,32,.45);
  /* Ultramarin traegt, Xenon leuchtet auf dunklem Grund */
  --accent:#1D39A5; --accent-2:#284EC7; --accent-deep:#93B2ED;
  /* Zaesur-Flaechen: Tiefsee */
  --cream:#050A14; --cream-ink:#E9F0FA;
  --cream-muted:rgba(233,240,250,.72); --cream-line:rgba(147,178,237,.18);
  /* neu */
  --abyss:#050A14; --abyss-2:#0A1424; --xenon:#93B2ED; --ice:#C7D9F5;
  --glow:rgba(40,78,199,.55);
}

/* Chrome-Auto-Dark darf die Seite nicht kippen — sie regelt beide Welten selbst */
:root{color-scheme:only light}

/* ============================================================ HERO: TIEFSEE */
.hero{
  background:var(--abyss);
  color:var(--cream-ink);
  isolation:isolate;
}
/* Der Grund ist nicht flach: zwei sehr weite Lichter geben Raumtiefe */
.hero::marker{content:""}
.hero .aurora{opacity:.9;mix-blend-mode:screen}
.hero::before{
  background:
    radial-gradient(620px circle at var(--mx,30%) var(--my,18%),rgba(40,78,199,.22),transparent 62%),
    radial-gradient(120% 80% at 78% -10%,rgba(29,57,165,.28),transparent 60%),
    radial-gradient(90% 70% at 8% 110%,rgba(10,20,40,.9),transparent 55%);
}
.hero::after{
  background:linear-gradient(90deg,transparent,rgba(147,178,237,.55) 22%,rgba(147,178,237,.55) 78%,transparent);
}
.hero h1{color:var(--cream-ink)}
.hero h1 em,.hero h1 em.hero-accent{color:var(--xenon)}
.hero .tw__text{color:var(--xenon)}
.hero .tw-verb{color:var(--cream-ink)}
.hero .lead{color:var(--cream-muted)}
.hero .eyebrow{color:var(--xenon)}
.hero .eyebrow::before{background:linear-gradient(90deg,var(--xenon),transparent)}
.hero .hero-trust li{color:var(--cream-muted);border-color:var(--cream-line)}
.hero .hero-trust li::before,.hero .hero-trust li::marker{color:var(--xenon)}
.hero-status{color:var(--cream-muted);border-color:var(--cream-line);background:rgba(147,178,237,.06)}

/* Knopf-Regie auf dunklem Grund: das Ultramarin darf leuchten */
.hero .btn{
  --bg:var(--accent-2);
  color:#fff;
  box-shadow:0 18px 44px -18px var(--glow),0 0 0 1px rgba(147,178,237,.20) inset;
}
.hero .btn:hover{box-shadow:0 26px 60px -20px var(--glow),0 0 0 1px rgba(147,178,237,.34) inset}
.hero .btn-ghost{background:transparent;color:var(--cream-ink);border-color:rgba(147,178,237,.30);box-shadow:none}
.hero .btn-ghost:hover{background:rgba(147,178,237,.10);border-color:var(--xenon)}

/* Foto: kuehler Rahmen, kuehler Schatten, blaue Ecken */
.hero-photo{border-color:rgba(147,178,237,.22);
  box-shadow:0 2px 4px rgba(0,0,0,.4),0 26px 60px -26px rgba(0,0,0,.8),0 80px 130px -60px rgba(40,78,199,.35)}
.hero-photo::after{background:linear-gradient(180deg,transparent 48%,rgba(5,10,20,.62))}
.hero-visual::before{border-top-color:var(--xenon);border-left-color:var(--xenon)}
.hero-visual::after{border-bottom-color:var(--xenon);border-right-color:var(--xenon)}

/* Harte Kante zum hellen Teil — die Seite taucht auf, statt zu verlaufen */
.hero{border-bottom:1px solid rgba(147,178,237,.22)}

/* ============================================================ KOPFZEILE */
.site-header:not(.scrolled) .nav-links a,
.site-header:not(.scrolled) .nav-cta .btn-ghost{color:var(--cream-ink)}
.site-header:not(.scrolled) .nav-links a::after{background:var(--xenon)}
.site-header:not(.scrolled) .nav-cta .btn-ghost{border-color:rgba(147,178,237,.26)}
.site-header:not(.scrolled) .nav-cta .btn-ghost:hover{background:rgba(147,178,237,.12);border-color:var(--xenon)}
.site-header:not(.scrolled) .burger span{background:var(--cream-ink)}
/* Wortmarke: Gold-PNG in die Blau-Welt drehen; ueber dem Hero invertiert */
.brand-logo{filter:hue-rotate(188deg) saturate(1.15)}
.site-header:not(.scrolled) .brand-logo{filter:invert(1)}
.site-header.scrolled{background:rgba(245,247,252,.84)}

/* ============================================================ INTRO */
.intro{background:var(--abyss)}
.intro,.intro *{color:var(--cream-ink)}
.intro .accent,.intro em{color:var(--xenon)}

/* ============================================================ DUNKLE ZAESUREN */
.tone-dark{background:var(--abyss)}
.tone-dark .eyebrow{color:var(--xenon)}
.tone-dark .eyebrow::before{background:linear-gradient(90deg,var(--xenon),transparent)}
.tone-dark h2 em,.tone-dark h3 em{color:var(--xenon)}
/* Helle Akzentflaeche traegt keinen weissen Text — das stand auf Kontrast
   1,9:1 und war auf dem Handy praktisch nicht zu lesen. Dunkel gesetzt
   sind es 8,9:1. */
.tone-dark .btn{--bg:var(--accent-2);color:#050A14;box-shadow:0 18px 44px -20px var(--glow)}

/* ============================================================ AKZENT-DETAILS */
.scroll-progress{background:linear-gradient(90deg,var(--accent),var(--xenon))}
::selection{background:rgba(40,78,199,.22);color:var(--text)}
.tone-dark ::selection,.hero ::selection{background:rgba(147,178,237,.28);color:#fff}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}

/* ============================================================ TIEFE (Loop 2) */
.starfield{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero .aurora{z-index:1}
.hero::before{z-index:1}
.hero-grid{z-index:3}

/* Vignette: der Rand faellt ab, die Mitte traegt */
.hero{position:relative}
.hero .hero-vignette,.hero::marker{display:none}
.hero > .wrap{position:relative}
.section.hero::before{mix-blend-mode:screen}

/* Motiv statt Bildkasten: das Foto bricht nach rechts aus dem Raster */
@media(min-width:1100px){
  .hero-grid{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(2rem,3.4vw,3.4rem)}
  .hero-visual{margin-right:calc(-1 * clamp(1.15rem,4.4vw,4rem));}
  .hero-photo{aspect-ratio:4/3.4;border-radius:0}
  .hero-photo::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:2;
    background:linear-gradient(90deg,transparent,var(--xenon),transparent);opacity:.7}
}

/* Scroll-Hinweis */
.scroll-cue{position:absolute;left:50%;bottom:clamp(1.2rem,3vh,2.4rem);transform:translateX(-50%);
  z-index:4;display:flex;flex-direction:column;align-items:center;gap:.7rem;
  transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.scroll-cue.gone{opacity:0;transform:translate(-50%,14px)}
.cue-label{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(233,240,250,.45)}
.cue-rail{position:relative;width:1px;height:46px;background:linear-gradient(180deg,rgba(147,178,237,.05),rgba(147,178,237,.45),rgba(147,178,237,.05));overflow:hidden}
.cue-dot{position:absolute;left:-1px;width:3px;height:10px;background:var(--xenon);border-radius:2px;
  animation:cueRun 2.4s var(--ease) infinite}
@keyframes cueRun{0%{top:-12px;opacity:0}18%{opacity:1}82%{opacity:1}100%{top:46px;opacity:0}}
@media(prefers-reduced-motion:reduce){.cue-dot{animation:none;top:18px}}

/* Wachsende Linien */
.line-grow{position:relative}
.line-grow::before{content:"";position:absolute;left:0;top:0;height:1px;width:100%;
  background:linear-gradient(90deg,var(--accent),transparent 62%);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.05s var(--ease)}
.line-grow.line-in::before{transform:scaleX(1)}
.tone-dark .line-grow::before{background:linear-gradient(90deg,var(--xenon),transparent 62%)}
.s-head.line-grow::before{top:-1.6rem}

/* Weiches Scrollen: der native Anker-Sprung darf nicht dagegenarbeiten */
html.smooth-on{scroll-behavior:auto}

/* ============================================== AUFTRITTE (Loop 3) */

/* --- Prinzipien: aus der Liste wird ein Kapitel ------------------- */
.principles-index{display:grid;gap:0}
.pr-row{position:relative;display:grid;grid-template-columns:clamp(4.5rem,9vw,9rem) 1fr;
  gap:clamp(1.4rem,4vw,4rem);align-items:start;
  padding:clamp(2rem,4.5vh,3.4rem) 0;border-top:1px solid var(--line);
  transition:background .5s var(--ease)}
.pr-row:last-child{border-bottom:1px solid var(--line)}
.pr-no{font-size:clamp(2.6rem,6.5vw,5.4rem);line-height:.82;font-weight:800;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px rgba(147,178,237,.45);
  transition:color .55s var(--ease),-webkit-text-stroke-color .55s var(--ease)}
.pr-row:hover .pr-no,.pr-row:focus-within .pr-no{color:var(--xenon);-webkit-text-stroke-color:var(--xenon)}
.pr-main b{display:block;font-size:clamp(1.25rem,2.4vw,1.9rem);letter-spacing:-.02em;margin-bottom:.6rem;color:var(--cream-ink)}
.pr-main span{display:block;max-width:62ch;color:var(--cream-muted)}
.pr-row::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,var(--xenon),transparent 55%);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--ease)}
.pr-row:hover::after{transform:scaleX(1)}
@media(max-width:700px){.pr-row{grid-template-columns:1fr;gap:.5rem}}

/* --- Laufband: die Branchen ziehen durch -------------------------- */
.ticker{position:relative;overflow:hidden;background:var(--abyss);
  border-top:1px solid rgba(147,178,237,.16);border-bottom:1px solid rgba(147,178,237,.16);
  padding:clamp(1.1rem,2.4vh,1.9rem) 0}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:14vw;z-index:2;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--abyss),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--abyss),transparent)}
.ticker-track{display:flex;width:max-content;gap:0;
  animation:tickerRun 42s linear infinite;
  animation-play-state:running}
.ticker-group{display:flex;align-items:center;gap:clamp(1.6rem,3.4vw,3.2rem);padding-right:clamp(1.6rem,3.4vw,3.2rem)}
.ticker-item{font-size:clamp(1.15rem,2.6vw,2.1rem);font-weight:700;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1px rgba(233,240,250,.42);white-space:nowrap}
.ticker-item.on{color:var(--xenon);-webkit-text-stroke-color:transparent}
.ticker-dot{width:6px;height:6px;flex:none;border-radius:50%;background:rgba(147,178,237,.5)}
@keyframes tickerRun{to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* --- Kapitelmarke am Rand ---------------------------------------- */
.chapters{position:fixed;left:clamp(.9rem,1.9vw,1.9rem);top:50%;transform:translateY(-50%);
  z-index:60;display:none;flex-direction:column;gap:.85rem;pointer-events:auto}
@media(min-width:1280px){.chapters{display:flex}}
.chapters a{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit}
.ch-tick{width:14px;height:1px;background:currentColor;opacity:.32;transition:width .45s var(--ease),opacity .45s}
.ch-name{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;opacity:0;
  transform:translateX(-6px);transition:opacity .45s var(--ease),transform .45s var(--ease);white-space:nowrap}
.chapters a:hover .ch-name,.chapters a.on .ch-name{opacity:.85;transform:none}
.chapters a.on .ch-tick{width:30px;opacity:1;background:var(--accent)}
.chapters{color:var(--text)}
.chapters.on-dark{color:var(--cream-ink)}
.chapters.on-dark a.on .ch-tick{background:var(--xenon)}

/* --- Vorgehen: die Schritte bekommen eine Linie, die mitwaechst ---- */
.process-track{position:relative}
.process-track::after{content:"";position:absolute;left:0;top:0;height:1px;width:100%;
  background:linear-gradient(90deg,var(--accent),var(--accent-deep));
  transform:scaleX(var(--p,0));transform-origin:0 50%;transition:transform .25s linear}

/* --- Scroll-Hinweis: raus aus der Mitte, an die rechte Kante ------ */
.scroll-cue{left:auto;right:clamp(1.15rem,4.4vw,4rem);transform:none;flex-direction:row;align-items:center;gap:.9rem}
.scroll-cue.gone{transform:translateY(14px)}
.cue-rail{width:46px;height:1px;background:linear-gradient(90deg,rgba(147,178,237,.05),rgba(147,178,237,.45),rgba(147,178,237,.05))}
.cue-dot{top:-1px;left:0;width:10px;height:3px;animation:cueRunX 2.4s var(--ease) infinite}
@keyframes cueRunX{0%{left:-12px;opacity:0}18%{opacity:1}82%{opacity:1}100%{left:46px;opacity:0}}
@media(prefers-reduced-motion:reduce){.cue-dot{animation:none;left:18px}}
@media(max-width:900px){.scroll-cue{display:none}}
.ticker-link{display:block;text-decoration:none;color:inherit}
.ticker-link:focus-visible{outline:2px solid var(--xenon);outline-offset:-4px}

/* ============================================== KINO (Loop 4) */

/* Jede Referenz bekommt Raum: der Text bleibt stehen, die Buehne zieht durch */
@media(min-width:1000px){
  .ref-list{gap:clamp(6rem,12vw,11rem)}
  .ref{align-items:start;min-height:min(76vh,780px)}
  .ref-body{position:sticky;top:min(26vh,230px)}
}
/* Eintritt: die Buehne kommt aus der Tiefe */
.ref-stagecol{opacity:0;transform:translate3d(0,42px,0) scale(.965);
  transition:opacity 1.1s var(--ease),transform 1.25s var(--ease)}
.ref-stagecol.stage-in{opacity:1;transform:none}
html.no-js .ref-stagecol,.no-reveal .ref-stagecol{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.ref-stagecol{opacity:1;transform:none;transition:none}}

/* Laufband: mehr Luft, damit die Zeile atmet */
.ticker{padding:clamp(1.6rem,3.6vh,2.8rem) 0}
.ticker-item{line-height:1.25;padding:.1em 0}

/* Hero-Fliesstext etwas zurueckgenommen — die Headline soll fuehren */
.hero .lead{font-size:clamp(1rem,1.35vw,1.09rem);max-width:44ch;color:rgba(233,240,250,.68)}
.hero-trust li{font-size:.83rem}

/* ============================================== FEINSCHLIFF (Loop 5) */

/* Kapitelmarke: ganz an den Rand, Namen erst auf Zuruf — sonst laeuft sie
   bei 1400px in den Fliesstext. */
.chapters{left:12px;gap:.7rem}
@media(min-width:1280px){.chapters{display:flex}}
.chapters .ch-name{opacity:0;pointer-events:none}
.chapters a:hover .ch-name{opacity:.9;transform:none}
.chapters a.on .ch-name{opacity:0}
.chapters a:hover .ch-name{opacity:.9}
@media(min-width:1620px){
  .chapters{left:clamp(1rem,2.4vw,2.6rem)}
  .chapters a.on .ch-name{opacity:.8;transform:none}
}
.ch-tick{width:12px}
.chapters a.on .ch-tick{width:26px}

/* Leistungszeilen bekommen Zug: die Zeile ruckt an, die Nummer zieht Farbe */
.svc-row{transition:background .45s var(--ease),padding-left .45s var(--ease)}
.svc-row:hover{background:linear-gradient(90deg,rgba(29,57,165,.06),transparent 60%);padding-left:.9rem}
.svc-row:hover .svc-index,.svc-row:focus-within .svc-index{color:var(--accent)}
.svc-index{transition:color .4s var(--ease)}
.svc-row:hover .svc-main b{color:var(--accent)}
.svc-main b{transition:color .4s var(--ease)}

/* Seitenuebergang */
html.pt-ready body{animation:ptIn .5s cubic-bezier(.22,1,.36,1) both}
html.pt-out body{opacity:0;transform:translateY(-8px);transition:opacity .22s ease,transform .22s ease}
@keyframes ptIn{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){html.pt-ready body{animation:none}}
/* Wortmarke in die Blau-Welt drehen (Gold-PNG) */
.brand-logo{filter:hue-rotate(188deg) saturate(1.15)}

/* ==========================================================================
   KINO 2.0 — Vollbild-Momente statt Sektionswurst
   ========================================================================== */

/* ---- ARBEITEN: die drei Referenzen stapeln sich uebereinander -------------
   Jede Karte klebt am oberen Rand, die naechste schiebt sich darueber.
   Aus drei gleichen Bloecken werden drei Auftritte. */
@media(min-width:1000px){
  .work .ref-list{gap:0;perspective:1400px}
  .work .ref{
    position:sticky;top:0;min-height:100svh;
    align-content:center;align-items:center;
    background:var(--abyss);
    padding:clamp(4rem,10vh,7rem) 0 clamp(3rem,7vh,5rem);
    border-top:1px solid rgba(147,178,237,.14);
    transform-origin:50% 0;
    transition:transform .6s var(--ease),filter .6s var(--ease)
  }
  /* Die Karte darunter tritt zurueck, sobald die naechste kommt */
  .work .ref.behind{transform:scale(.955) translateY(-14px);filter:brightness(.55) saturate(.8)}
  /* der zuvor gesetzte Sticky-Text muss weichen: sticky im sticky geht nicht */
  .work .ref-body{position:static;top:auto}
  /* Kapitelzahl gross an den Rand, wie eine Filmrolle */
  .work .ref-body .ref-idx{font-size:.7rem}
  .work .ref::before{
    content:attr(data-chapter);
    position:absolute;left:0;top:clamp(2rem,6vh,4.5rem);
    font-size:clamp(3rem,7vw,6.5rem);line-height:.8;font-weight:800;letter-spacing:-.05em;
    color:transparent;-webkit-text-stroke:1px rgba(147,178,237,.22);
    pointer-events:none;z-index:0
  }
  .work .ref > *{position:relative;z-index:1}
}

/* ---- MANIFEST: eine Vollbild-Zaesur, in der die Worte angehen ------------- */
.manifesto{min-height:100svh;display:grid;align-content:center;background:var(--abyss)}
.manifesto p{font-size:clamp(1.7rem,4.4vw,3.7rem);line-height:1.14;letter-spacing:-.03em;
  max-width:20ch;margin-inline:auto;text-align:center}
.manifesto .sw{color:rgba(233,240,250,.14);transition:color .5s var(--ease)}
.manifesto .sw.lit{color:var(--cream-ink)}
.manifesto cite,.manifesto .sig{color:var(--xenon);opacity:.7}

/* ---- HERO: verabschiedet sich, statt einfach wegzuscrollen ---------------- */
.hero-grid{will-change:transform,opacity}
html.hero-scrub .hero-grid{
  transform:translate3d(0,calc(var(--hp,0) * -60px),0) scale(calc(1 - var(--hp,0) * .04));
  opacity:calc(1 - var(--hp,0) * .85)
}
@media(prefers-reduced-motion:reduce){
  html.hero-scrub .hero-grid{transform:none;opacity:1}
  .work .ref{position:static;min-height:0}
  .manifesto{min-height:0}
}

/* ---- ARBEITEN 2.0: die Buehne fuellt den Schirm, jede Referenz hat ihr Licht */
@media(min-width:1000px){
  .work .ref{
    grid-template-columns:minmax(0,1.62fr) minmax(0,.72fr);
    gap:clamp(1.8rem,3.4vw,4rem);
    padding:clamp(3rem,7vh,5rem) 0 clamp(2.5rem,5vh,4rem);
    overflow:hidden
  }
  .work .ref:nth-child(even){grid-template-columns:minmax(0,.72fr) minmax(0,1.62fr)}
  /* Das Licht der jeweiligen Kundenseite faerbt den Raum */
  .work .ref::after{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(80% 70% at var(--gx,72%) 42%,var(--refglow,rgba(40,78,199,.30)),transparent 62%);
    opacity:0;transition:opacity 1.2s var(--ease)
  }
  .work .ref.stage-lit::after{opacity:.9}
  .work .ref:nth-child(even)::after{--gx:28%}
  /* Kapitelzahl als Wasserzeichen hinter der Buehne */
  .work .ref::before{
    top:auto;bottom:-.14em;left:-.03em;
    font-size:clamp(9rem,19vw,18rem);
    -webkit-text-stroke:1px rgba(147,178,237,.20)
  }
  .work .ref:nth-child(even)::before{left:auto;right:-.03em}
  /* Textspalte: kompakter, damit die Buehne fuehrt */
  .work .ref-body h3{font-size:clamp(1.6rem,2.7vw,2.4rem)}
  .work .ref-body .ref-result{margin-top:1.3rem;padding-top:1.2rem}
  .work .ref-body .ref-line{font-size:.9rem}
  /* Die Buehne kommt beim Eintritt aus der Tiefe heran */
  .work .ref-stagecol{transform:translate3d(0,54px,0) scale(.94)}
  .work .ref-stagecol.stage-in{transform:none;transition:opacity 1.2s var(--ease),transform 1.5s var(--ease)}
}

/* ==========================================================================
   NACHT-VARIANTE — die ganze Startseite als eine durchgehende Tiefsee.
   Aktiv ueber ?nacht=1 (oder html.allnight). Die Unterseiten bleiben hell.
   ========================================================================== */
html.allnight{
  --ink:#050A14; --ink-2:#080F1C; --surface:#0C1524; --surface-2:#111C2F;
  --text:#E9F0FA; --muted:rgba(233,240,250,.70); --faint:rgba(233,240,250,.48);
  --line:rgba(147,178,237,.13); --line-2:rgba(147,178,237,.24);
  --accent:#93B2ED; --accent-2:#284EC7; --accent-deep:#C7D9F5;
  --cream:#0C1524; --cream-ink:#E9F0FA;
}
html.allnight body{background:var(--ink);color:var(--text)}
html.allnight .site-header.scrolled{background:rgba(8,15,28,.86);border-color:var(--line)}
html.allnight .site-header.scrolled .nav-links a,
html.allnight .site-header.scrolled .nav-cta .btn-ghost{color:var(--text)}
html.allnight .brand-logo{filter:invert(1)}
html.allnight .section{background:transparent}
/* Zaesuren duerfen nicht verschwinden: sie werden eine Spur heller */
html.allnight .tone-dark{background:#0C1524}
html.allnight .manifesto{background:#050A14}
html.allnight .work .ref{background:#050A14}
/* Formular und Eingaben */
html.allnight form.lead-form{background:linear-gradient(168deg,#0D1728,#080F1C);border-color:var(--line-2)}
html.allnight input,html.allnight textarea,html.allnight select{
  background:rgba(147,178,237,.05);color:var(--text);border-color:var(--line-2)}
html.allnight input::placeholder,html.allnight textarea::placeholder{color:rgba(233,240,250,.38)}
html.allnight .btn-ghost{color:var(--text);border-color:var(--line-2)}
html.allnight .btn-ghost:hover{background:rgba(147,178,237,.10);border-color:var(--accent)}
html.allnight .btn{--bg:var(--accent-2);color:#fff}
html.allnight .tone-dark .btn{--bg:var(--accent-deep);color:#050A14}
html.allnight .chapters{color:var(--cream-ink)}
html.allnight .site-footer{background:#050A14}
/* helle Karten- und Kastenflaechen */
html.allnight .card,html.allnight .box,html.allnight .faq-item,
html.allnight .svc-row,html.allnight .step,html.allnight .contact-item{background:transparent}

/* Kopfzeile in der Nacht-Variante: die helle Pille wuerde alles zerschneiden */
html.allnight .site-header.scrolled,
html.allnight .site-header.scrolled .wrap.nav{
  background:rgba(8,15,28,.88)!important;
  -webkit-backdrop-filter:saturate(150%) blur(14px);backdrop-filter:saturate(150%) blur(14px);
  border-color:rgba(147,178,237,.18)!important}
html.allnight .site-header.scrolled .nav-links a,
html.allnight .site-header.scrolled .nav-cta .btn-ghost,
html.allnight .site-header.scrolled .burger span{color:var(--text)}
html.allnight .site-header.scrolled .burger span{background:var(--text)}
html.allnight .site-header .brand-logo{filter:invert(1)}