/* =============================================================================
   Myra — Landing. Stand 28.08.2026.
   Ersetzt die deutsche Fassung vollstaendig (gesichert als Tag
   `website/stand-20260828`). Text: web/COPY_EN_2026-08.md, acht Bloecke.
   Bauplan: web/REFERENZ_VERTUS.md.

   -----------------------------------------------------------------------------
   1 · DIE MARKE — Joels Festlegung vom 28.08.2026
   -----------------------------------------------------------------------------
   Weiss, Schwarz, Blau. Kein Gold, kein Beige. Das Blau ist aus Joels
   Referenzbild GEMESSEN, nicht gewaehlt: Farbton 219-223 Grad, volle Saettigung,
   helle Kerne kippen Richtung Cyan.

     Rolle                    Wert       Farbton   Kontrast
     Seitengrund hell         #FFFFFF    --        --
     Buehne dunkel            #05070E    226,7     --
     Blau fuer Text auf Weiss #0A2E9E    225,4     11,07:1 auf Weiss
     Blau kraeftig            #0B3FD1    224,2      7,94:1 auf Weiss
     Flow-Tiefe   (P25)       #001A4D    219,7      --
     Flow-Mitte   (P50)       #002887    222,2      --
     Flow-Koerper (P75)       #074AC7    219,1      2,70:1 auf der Buehne
     Flow-Kern    (P95)       #3795EF    209,3      6,43:1 auf der Buehne
     Flow-Spitzlicht (P99)    #43CFFF    195,3     11,13:1 auf der Buehne
     Tinte                    #0F1115    220,0     18,90:1 auf Weiss

   Auch die Grautoene sind dieses Blau, nur entsaettigt: --gedaempft 219,3 ·
   --linie-stark 220,0 · --buehne-gedaempft 220,6 · --linie 220,0. Die Seite hat
   keinen einzigen neutralen Grauwert; jede Flaeche liegt im gemessenen Band.

   NACHGERECHNET, NICHT BEHAUPTET: jede Zahl oben steht so in kontrast.py und
   wird bei jedem Lauf neu gerechnet. `python3 web/landing-neu/kontrast.py`
   muss mit 0 zurueckkommen. Kommentare luegen, das Skript nicht.

   -----------------------------------------------------------------------------
   2 · TIEFE — benannte Stufen
   -----------------------------------------------------------------------------
   Die alte Regel aus docs/marke.md ("eine Schattenfamilie, weich und flach —
   Papier, kein Startup-Gluehen") ist am 28.08.2026 gefallen. Joel ausdruecklich:
   "die Buttons mit Schatten in Farbverlaeufen." vertus.ai traegt gemessen 194
   border-radius, 42 Verlaeufe, 40 Schatten, 30 Weichzeichner. Tiefe ist gewollt.

   An ihre Stelle treten FUENF benannte Stufen. Mehr gibt es nicht; wer eine
   sechste braucht, hat ein Layoutproblem, kein Schattenproblem.

     --tiefe-1  KANTE    Karte in Ruhe. Haarlinie plus ein Hauch Streuung.
                         Sie hebt die Karte vom Grund ab, nicht von der Seite.
     --tiefe-2  ABHEBEN  Karte unter dem Zeiger, Produktausschnitt, Portraet.
                         Doppelt so weit gestreut, immer noch blau statt schwarz.
     --tiefe-3  KNOPF    Primaerknopf in Ruhe. Drei Lagen: Innenlicht oben
                         (die Kante faengt Licht), harter Nahschatten (er liegt
                         auf), farbiger Fernschatten (er leuchtet).
     --tiefe-4  GRIFF    Primaerknopf unter dem Zeiger. Dieselben drei Lagen,
                         weiter und farbiger. Der Knopf kommt entgegen.
     --tiefe-glut GLUT   Nur auf der dunklen Buehne. Kein Umgebungsschatten —
                         auf Schwarz sieht man keinen Schatten, nur Licht.
                         Ein blauer Rand plus ein weiter, tiefer Schein.

   Alle Schattenfarben sind das Blau (10 46 158 / 11 63 209 / 7 74 199), nie
   Schwarz. Ein schwarzer Schatten unter einer blauen Flaeche wird grau und
   schmutzig; ein blauer bleibt Farbe.

   -----------------------------------------------------------------------------
   3 · DIE NAHT ZUM FLOW (web/landing-neu/flow.js, anderer Bau)
   -----------------------------------------------------------------------------
   Vollstaendiger Vertrag: web/landing-neu/FLOW_KONTRAKT.md. Kurzfassung:

     <div class="buehne" data-flow="ruhig|stroemung|strom">
       <div class="buehne-ersatz" aria-hidden="true"></div>   Ersatzverlauf, CSS
       <canvas class="buehne-flow" data-flow-canvas aria-hidden="true"></canvas>
       <div class="buehne-inhalt"> ... </div>
     </div>

   · Drei Buehnen, drei benannte Zustaende: ruhig (Kopf) · stroemung
     (Zwischenruf) · strom (Abschluss und Aufforderung).
   · Der Ersatzverlauf liegt IMMER darunter und ist der Grund. Er greift ohne
     JavaScript, vor dem Laden von flow.js und bei prefers-reduced-motion.
     Die Seite ist ohne flow.js vollstaendig und schoen — das ist die Bedingung,
     unter der die Naht ueberhaupt erlaubt ist.
   · Das Canvas liegt IM MARKUP und gehoert der Huelle. flow.js erzeugt keines,
     es zeichnet in das vorhandene. Es startet auf opacity 0; erst wenn flow.js
     sein erstes Bild gezeichnet hat, setzt es .flow-laeuft auf die Buehne, und
     dann blendet das Canvas ueber den Ersatzverlauf. Kein Aufblitzen, kein
     leeres Schwarz. Beim Abbau nimmt flow.js die Klasse wieder herunter.
   · Bei prefers-reduced-motion nimmt CSS das Canvas hart aus dem Fluss.
   · SECHS Farbmerkmale, nicht drei (Token-Block unten): flow.js liest die
     ganze Rampe --flow-grund … --flow-spitze. kontrast.py vergleicht die Liste
     mit der in flow.js — ein Name, zwei Farben ist genau der Fehler, den hier
     am 28.08. niemand gesehen haette (FLOW_KONTRAKT.md §3).
   · Lesbarkeit: die Huelle legt ihren Text OHNE Schleier auf die Buehne.
     Deshalb misst flow.js die Textkaesten in .buehne-inhalt und deckelt dort
     seine Helligkeit auf #043AA9 — weiss 9,6:1, --buehne-gedaempft 5,3:1.
     Gemessen mit flow-messen.py, nicht behauptet.

   -----------------------------------------------------------------------------
   4 · SCHRIFT
   -----------------------------------------------------------------------------
   Aspekta Variable 2.100 (Ivo Dolenc), SIL Open Font License 1.1, Reserved Font
   Name "Aspekta" — Lizenztext liegt bei: fonts/OFL-Aspekta.txt. Dieselbe Schrift
   wie vertus.ai, ein Achsengewicht 100-900, 30 KB fuer die ganze Familie.
   Unveraendert uebernommen; der Reserved Font Name verbietet Aenderung unter
   diesem Namen, und wir aendern nichts.

   Aspekta 2.100 hat kein Paragraphenzeichen (U+00A7) und keine Tilde (U+007E).
   Beide stehen auf der Seite ("§ 7 UWG") und massenhaft auf Impressum und
   Datenschutzerklaerung. Dafuer liegt ein 1,8-KB-Ausschnitt aus Inter daneben
   (fonts/ergaenzung-latin.woff2, OFL 1.1 ohne Reserved Font Name, Lizenztext
   fonts/OFL-Inter.txt), per unicode-range auf genau diese zwei Zeichen begrenzt.
   Der Browser laedt ihn nur, wenn eines davon vorkommt.

   BEIDE liegen lokal in fonts/. Kein CDN, kein fremder Host — das ist keine
   Geschmacksfrage, sondern die Zusage im Fuss der Seite: "This page loads no
   script, no font and no image from a third-party server."

   -----------------------------------------------------------------------------
   5 · BEWEGUNG
   -----------------------------------------------------------------------------
   Handgeschrieben: IntersectionObserver plus CSS-Uebergaenge, main.js, rund
   siebzig Zeilen. Keine Bibliothek. vertus laedt GSAP, Lenis, Swiper und jQuery
   von fremden Servern und braucht deshalb ein Einwilligungsbanner. Wir nicht.

   prefers-reduced-motion: reduce schaltet ALLES ab — Einblenden, Flow,
   Wortwechsel. Und ohne JavaScript ist nichts verborgen: jede Regel, die etwas
   unsichtbar macht, haengt an .js am <html>.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Schrift
   --------------------------------------------------------------------------- */

@font-face {
  font-family: "Aspekta";
  src: url("fonts/aspekta-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Nur U+007E und U+00A7. Aspekta 2.100 hat beide nicht; ohne diese Zeile
   springt der Browser fuer jedes Paragraphenzeichen in die Systemschrift und
   das Impressum bekommt acht fremde Glyphen. */
@font-face {
  font-family: "Ergaenzung";
  src: url("fonts/ergaenzung-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+007E, U+00A7;
}

/* ---------------------------------------------------------------------------
   Token
   --------------------------------------------------------------------------- */

:root {
  /* Flaechen */
  --grund: #ffffff;
  --flaeche: #f1f5fd;
  --flaeche-2: #e2eaf8;
  --buehne: #05070e;

  /* Schrift auf hellem Grund */
  --tinte: #0f1115;
  /* vertus faerbt seinen Fliesstext #808080. Das sind auf Weiss 3,95:1 und
     reisst SC 1.4.3. #5B6577 ist der hellste Ton, der auf ALLEN drei hellen
     Gruenden traegt — auch auf --flaeche-2 (#E2EAF8), dem dunkelsten davon:
     5,88 / 5,38 / 4,86:1. Von #4B5568 aus ein sichtbarer Schritt Richtung
     vertus, ohne die Schwelle zu reissen. kontrast.py rechnet es nach. */
  --gedaempft: #5b6577;
  --akzent: #0a2e9e;
  --akzent-stark: #0b3fd1;
  --akzent-licht: #1350d8;

  /* Linien auf hellem Grund */
  --linie: #dde4f2;
  --linie-stark: #6e7686;

  /* Auf der dunklen Buehne */
  --buehne-tinte: #ffffff;
  --buehne-gedaempft: #b6c1d7;
  --buehne-linie: #1b2436;
    --knopf-hell: #1e63e8;

  /* Flow — die SECHS Stufen der Rampe, von flow.js ueber getComputedStyle
     gelesen. EINE Quelle fuer Shader und Ersatzverlauf; Reihenfolge und Namen
     stehen genauso in flow.js (FARBEN) und werden von kontrast.py verglichen.
     Die Werte sind Joels Perzentile aus dem Referenzbild: P25 / P50 / P75 /
     P95 / P99, dazu der Grund aus den Ecken.
     --flow-koerper ist und bleibt #074AC7 (P75) — die dunklere P50-Stufe
     heisst --flow-mitte. Warum das wichtig ist: FLOW_KONTRAKT.md §3. */
  --flow-grund: #05070e;
  --flow-tiefe: #001a4d;
  --flow-mitte: #002887;
  --flow-koerper: #074ac7;
  --flow-kern: #3795ef;
  --flow-spitze: #43cfff;

  /* Schriftgroessen — gemessen an vertus.ai (28.08.2026), nicht geschaetzt:
     H1 48 px / Gewicht 500 / Laufweite -1,44 px, H2 40 px / -1,2 px,
     Fliesstext 16 px. Myra stand vorher bei 100 px H1 und 18 px Text.
     Die Riesenzeile DARF jetzt kleiner werden, weil ein Bild die Seite
     traegt — das ist der ganze Grund, warum vertus mit 48 px auskommt.
     clamp-Deckel so gesetzt, dass 1440 px Fensterbreite genau die
     gemessenen Werte ergibt: 3,35vw = 48,2 px, 2,8vw = 40,3 px. */
  --t-riese: clamp(2.125rem, 3.35vw, 3.25rem);
  --t-gross: clamp(1.625rem, 2.8vw, 2.5rem);
  --t-mittel: clamp(1.125rem, 1.35vw, 1.375rem);
  --t-text: 1rem;
  --t-klein: 0.9375rem;
  --t-mikro: 0.8125rem;

  /* Raster */
  --breit: 1180px;
  --schmal: 720px;
  --luft: clamp(20px, 4vw, 40px);
  --abschnitt-luft: clamp(76px, 9vw, 148px);

  /* Radien — vertus benutzt ELF verschiedene Werte, bis 60 px und 500 px.
     Myra hatte vier. Rund ist hier kein Zierrat, sondern das, was die Seite
     von einem Formular unterscheidet. Jeder Wert unten kommt im Blatt
     mindestens einmal vor; ein Token, das nichts faerbt, waere gelogen. */
  --r-mikro: 4px;
  --r-fein: 6px;
  --r-klein: 10px;
  --r: 14px;
  --r-mittel: 18px;
  --r-gross: 24px;
  --r-weit: 32px;
  --r-schale: 40px;
  --r-buehne: 60px;
  --r-band: 500px;
  --r-voll: 999px;

  /* Tiefe. Fuenf Stufen, benannt im Kopf dieser Datei. */
  --tiefe-1:
    0 1px 2px rgb(10 46 158 / 0.06),
    0 8px 20px -12px rgb(10 46 158 / 0.22);
  --tiefe-2:
    0 2px 4px rgb(10 46 158 / 0.08),
    0 22px 48px -20px rgb(10 46 158 / 0.34);
  --tiefe-3:
    inset 0 1px 0 rgb(255 255 255 / 0.24),
    0 1px 2px rgb(7 20 60 / 0.30),
    0 12px 26px -12px rgb(11 63 209 / 0.62);
  --tiefe-4:
    inset 0 1px 0 rgb(255 255 255 / 0.30),
    0 2px 5px rgb(7 20 60 / 0.32),
    0 20px 44px -14px rgb(11 63 209 / 0.78);
  --tiefe-glut:
    0 0 0 1px rgb(55 149 239 / 0.30),
    0 28px 80px -26px rgb(7 74 199 / 0.90);

  /* Innenfase — das Detail, an dem vertus teuer aussieht: eine 1 px feine
     helle Kante oben links auf jeder Flaeche, als saesse Licht darauf.
     vertus traegt drei solche Schatten, Myra hatte einen. Jetzt drei
     eigenstaendige, plus die Innenkante in --tiefe-3 und --tiefe-4. */
  --fase: inset 1px 1px 0 rgb(255 255 255 / 0.65);
  --fase-blau:
    inset 1px 1px 0 rgb(255 255 255 / 0.9),
    inset 0 -1px 0 rgb(10 46 158 / 0.09);
  --fase-dunkel:
    inset 1px 1px 0 rgb(255 255 255 / 0.16),
    inset -1px -1px 0 rgb(255 255 255 / 0.05);

  /* Bewegung */
  --kurve: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dauer: 0.24s;
  --dauer-lang: 0.72s;
}

/* ---------------------------------------------------------------------------
   Grundlagen
   --------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* scroll-padding: sonst verschwindet das Sprungziel unter der Kopfleiste. */
  scroll-padding-top: 84px;
  /* clip statt hidden: `overflow-x: hidden` macht aus <body> einen eigenen
     Scroll-Behaelter — ScrollTrigger und Lenis rechnen dann am falschen
     Element. `clip` schneidet ab, ohne einen Behaelter aufzumachen. */
  overflow-x: clip;
}

/* ---------------------------------------------------------------------------
   Lenis — weiches Scrollen
   ---------------------------------------------------------------------------
   Die vier Regeln, die die Bibliothek braucht. Sie stehen HIER und nicht in
   einer zweiten Datei, weil die Seite genau ein Stylesheet laedt. Die Klassen
   setzt Lenis selbst; ohne Lenis greift keine davon.
   --------------------------------------------------------------------------- */

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: "Aspekta", "Ergaenzung", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--t-text);
  font-weight: 380;
  /* vertus setzt 16/20 (1,25). Auf Absaetze mit 60 Zeichen Zeilenmass ist das
     eine Wand — WCAG SC 1.4.8 nennt 1,5 als Richtwert fuer Textbloecke. 1,45
     ist der Schritt, den die Seite vertraegt: von 1,62 spuerbar dichter,
     ohne dass die langen Absaetze zulaufen. Bewusst NICHT auf 1,25. */
  line-height: 1.45;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1,
h2,
h3 {
  margin: 0;
  /* vertus: Gewicht 500, Laufweite -1,44 px auf 48 px = -0,03em. */
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

p {
  margin: 0 0 1.05em;
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--akzent);
  text-decoration-color: rgb(10 46 158 / 0.35);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--dauer) var(--kurve),
    text-decoration-color var(--dauer) var(--kurve);
}

a:hover {
  color: var(--akzent-stark);
  text-decoration-color: currentColor;
}

strong {
  font-weight: 640;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

::selection {
  background: rgb(11 63 209 / 0.16);
}

:focus-visible {
  outline: 2px solid var(--tinte);
  outline-offset: 3px;
  border-radius: var(--r-mikro);
}

.buehne :focus-visible {
  outline-color: var(--flow-spitze);
}

/* Sprunglink — erste Taste auf jeder Seite. */
.sprung {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 99;
  padding: 12px 18px;
  border-radius: var(--r-klein);
  background: var(--grund);
  color: var(--akzent);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dauer) var(--kurve);
}

/* Der Schatten erst im Fokus. Ohne diese Trennung ragte der Schein des
   ausgeblendeten Sprunglinks oben links sichtbar in die Buehne — auf dem
   dunklen Kopf war das ein heller Fleck ohne Ursache. */
.sprung:focus {
  top: 12px;
  box-shadow: var(--fase), var(--tiefe-2);
}

.sr-only,
.nur-lesen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: 100%;
  max-width: var(--breit);
  margin-inline: auto;
  padding-inline: var(--luft);
}

.wrap-schmal {
  max-width: var(--schmal);
}

/* ---------------------------------------------------------------------------
   Knoepfe — Joels Satz: "die Buttons mit Schatten in Farbverlaeufen"
   --------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border: 0;
  border-radius: var(--r-voll);
  font: inherit;
  font-size: var(--t-klein);
  font-weight: 600;
  letter-spacing: -0.006em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dauer) var(--kurve),
    box-shadow var(--dauer) var(--kurve),
    background-color var(--dauer) var(--kurve),
    color var(--dauer) var(--kurve);
}

/* Der Pfeil ist gezeichnet, kein Zeichensatz-Glyph und kein Bild:
   ein 8x8-Quadrat, um 45 Grad gedreht, zwei Kanten sichtbar. */
.btn::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 1.6px solid currentColor;
  border-right: 1.6px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.9;
  transition: transform var(--dauer) var(--kurve);
}

.btn:hover::after {
  transform: rotate(45deg) translate(2px, -2px);
}

.btn-primaer {
  /* Zwei Stops, beide gemessen: #0B3FD1 traegt weissen Text mit 7,94:1,
     #0A2E9E mit 11,07:1. Ein hellerer Stop waere huebscher und wuerde die
     4,5:1 reissen — deshalb steht er nicht hier. */
  background-image: linear-gradient(178deg, var(--akzent-stark) 0%, var(--akzent) 100%);
  color: #fff;
  box-shadow: var(--tiefe-3);
}

.btn-primaer:hover {
  background-image: linear-gradient(178deg, var(--akzent-licht) 0%, var(--akzent-stark) 100%);
  box-shadow: var(--tiefe-4);
  transform: translateY(-1px);
}

.btn-primaer:active {
  transform: translateY(0);
  box-shadow: var(--tiefe-3);
}

/* Auf dunklem Grund — Buehne und Kopfleiste — traegt der Knopf von oben mit
   2,54:1 gegen Schwarz keine erkennbare Grenze (SC 1.4.11 will 3:1). Zwei
   hellere Stops: #1E63E8 liegt bei 3,84:1 gegen die Buehne, #1350D8 bei
   3,04:1; weisser Text steht mit 5,24:1 bzw. 6,63:1 darauf.

   Und ein DURCHGEHENDER Rand im Spitzlicht. Er ist nicht Zierrat, er ist die
   Erfuellung: sobald der Flow hinter dem Knopf hell wird, faellt die Grenze
   Fuellung-gegen-Grund unter 3:1 — rechnerisch bei JEDER Aufhellung, weil der
   untere Stop schon auf blankem Schwarz nur 3,04:1 hat. Der Rand haelt
   dagegen: #43CFFF steht ueber der hellsten Mischung der drei Buehnen noch
   mit 5,4 bis 6,0:1. kontrast.py rechnet beides nach. */
.buehne .btn-primaer,
.leiste .btn-primaer {
  background-image: linear-gradient(178deg, var(--knopf-hell) 0%, var(--akzent-licht) 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.30),
    0 0 0 2px var(--flow-spitze),
    0 16px 46px -14px rgb(30 99 232 / 0.85);
}

.buehne .btn-primaer:hover,
.leiste .btn-primaer:hover {
  /* NICHT heller als --knopf-hell: weisser Text auf --flow-kern haette
     3,13:1. Der Zeiger-Zustand wird ueber Rand und Schein heller, nicht
     ueber die Fuellung. */
  background-image: linear-gradient(178deg, var(--knopf-hell) 0%, var(--akzent-stark) 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.36),
    0 0 0 2px #fff,
    0 24px 60px -14px rgb(55 149 239 / 0.95);
}

.btn-still {
  background: var(--grund);
  color: var(--akzent);
  box-shadow: var(--fase), inset 0 0 0 1px var(--linie-stark);
}

.btn-still:hover {
  background: var(--flaeche);
  box-shadow: inset 0 0 0 1px var(--akzent-stark), var(--tiefe-1);
}

/* Zusatz hinter der Beschriftung: "45 minutes, free" traegt weniger Gewicht
   als "Pick a time", steht aber im selben Knopf. */
.btn-zusatz {
  font-weight: 420;
  opacity: 0.82;
}

/* ---------------------------------------------------------------------------
   Kopfleiste
   --------------------------------------------------------------------------- */

.leiste {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Dunkles Glas — IMMER, nicht erst nach dem Scrollen. Ueber der Buehne
     verschwindet die Leiste im Grund, ueber den weissen Abschnitten steht sie
     als schwarzer Balken. Beides ist beabsichtigt, und beides funktioniert
     ohne JavaScript: eine Leiste, die ihre Farbe erst per Skript findet, ist
     ohne Skript weisse Schrift auf weissem Grund. */
  background: rgb(5 7 14 / 0.92);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid rgb(255 255 255 / 0.07);
  transition: background-color var(--dauer) var(--kurve),
    border-color var(--dauer) var(--kurve);
}

@supports not (backdrop-filter: blur(4px)) {
  .leiste {
    background: rgb(5 7 14 / 0.96);
  }
}

/* main.js setzt das, sobald der Waechter oben aus dem Bild ist. Reine Zugabe. */
.leiste.ist-gescrollt {
  background: rgb(5 7 14 / 0.95);
  border-bottom-color: rgb(55 149 239 / 0.28);
}

.leiste-innen {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 68px;
}

.waechter {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
}

.marke-wort {
  margin: 0;
  margin-right: auto;
  color: var(--buehne-tinte);
  text-decoration: none;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.marke-wort:hover {
  color: var(--flow-spitze);
}

.leiste-nav {
  display: flex;
  gap: 26px;
}

.leiste-nav a {
  color: var(--buehne-gedaempft);
  font-size: var(--t-klein);
  font-weight: 480;
  text-decoration: none;
}

.leiste-nav a:hover {
  color: var(--buehne-tinte);
}

.leiste-rechts {
  display: flex;
  align-items: center;
  gap: 18px;
}

.leiste-anmelden {
  color: var(--buehne-tinte);
  font-size: var(--t-klein);
  font-weight: 560;
  text-decoration: none;
}

.leiste-anmelden:hover {
  color: var(--flow-spitze);
}

.leiste-btn {
  padding: 11px 20px;
  font-size: var(--t-mikro);
}

/* ---------------------------------------------------------------------------
   Abschnitte und Rhythmus
   --------------------------------------------------------------------------- */

.abschnitt {
  padding-block: var(--abschnitt-luft);
}

/* Bandabschnitt: dieselbe Blaufläche, die auf Weiss eine Karte ist. Damit
   liegen nie zwei helle Abschnitte mit demselben Grund nebeneinander, und
   Karten sind auf dem Band weiss statt blau — sie kehren sich um. */
.band {
  background: var(--flaeche);
}

/* ---------------------------------------------------------------------------
   Die dunkle Buehne — Naht zu flow.js
   --------------------------------------------------------------------------- */

.buehne {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--buehne);
  color: var(--buehne-tinte);
}

.buehne h1,
.buehne h2,
.buehne h3 {
  color: var(--buehne-tinte);
}

.buehne p {
  color: var(--buehne-gedaempft);
}

.buehne a:not(.btn) {
  color: var(--flow-spitze);
  text-decoration-color: rgb(67 207 255 / 0.45);
}

.buehne a:not(.btn):hover {
  color: #fff;
}

.buehne-ersatz {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.buehne-inhalt {
  position: relative;
  z-index: 2;
}

/* Zustand "ruhig" — der Kopf.
   Zwei Aufgaben, und die erste ist neu: die NAHT. Ueber der Bildbahn steht der
   blanke Buehnengrund #05070E, die oberste Bildzeile von flow-3 misst #081225.
   Nebeneinander ist das eine sichtbare Kante. Der senkrechte Verlauf hebt den
   Grund nach unten hin genau auf diesen Ton — dann geht die Buehne ohne Kante
   ins Bild ueber. Die zwei Lichtkoerper liegen jetzt UNTER dem unteren Rand
   (bei 112 und 118 % Hoehe): sichtbar sind sie nur, wenn das Bild fehlt, denn
   sonst deckt die Bahn sie zu. Das ist der Sinn des Ersatzes — er zeigt, was
   dastuende, wenn nichts laedt, und draengt sich sonst nicht vor. */
.buehne[data-flow="ruhig"] .buehne-ersatz {
  background:
    radial-gradient(150% 62% at 50% 118%, rgb(7 74 199 / 0.34) 0%, rgb(7 74 199 / 0) 68%),
    radial-gradient(92% 40% at 50% 112%, rgb(55 149 239 / 0.20) 0%, rgb(55 149 239 / 0) 70%),
    linear-gradient(180deg, rgb(10 19 34 / 0) 18%, rgb(10 19 34 / 0.95) 56%),
    var(--buehne);
}

/* Zustand "stroemung" — der Zwischenruf. Die Bildbahn liegt in der unteren
   Haelfte; darueber steht die Zeile. Der senkrechte Verlauf hebt den Grund
   nach unten hin auf den Ton der obersten sichtbaren Bildzeile von flow-1 —
   sonst steht dort eine Kante quer durch die Buehne. Das Licht liegt unter
   dem unteren Rand und ist nur zu sehen, wenn das Bild fehlt. */
.buehne[data-flow="stroemung"] .buehne-ersatz {
  background:
    radial-gradient(124% 56% at 50% 116%, rgb(7 74 199 / 0.34) 0%, rgb(7 74 199 / 0) 66%),
    radial-gradient(70% 30% at 50% 112%, rgb(55 149 239 / 0.18) 0%, rgb(55 149 239 / 0) 70%),
    linear-gradient(180deg, rgb(4 12 32 / 0) 6%, rgb(4 12 32 / 0.94) 38%),
    var(--buehne);
}

/* Zustand "strom" — Abschluss und Aufforderung. Das Licht liegt jetzt um das
   gerahmte Bild herum und ist an BEIDEN Enden der Buehne bei null: oben trifft
   sie auf einen weissen Abschnitt, unten auf den Fuss, der denselben Grund
   hat. Ein Verlauf, der bis zur Unterkante leuchtet, zog dort eine sichtbare
   Linie zwischen Buehne und Fuss. */
.buehne[data-flow="strom"] .buehne-ersatz {
  background:
    radial-gradient(84% 34% at 50% 44%, rgb(7 74 199 / 0.32) 0%, rgb(7 74 199 / 0) 72%),
    radial-gradient(50% 20% at 50% 44%, rgb(55 149 239 / 0.18) 0%, rgb(55 149 239 / 0) 74%),
    radial-gradient(28% 12% at 50% 44%, rgb(67 207 255 / 0.12) 0%, rgb(67 207 255 / 0) 76%),
    var(--buehne);
}

/* Die Naht nach oben und unten: eine Haarlinie aus dem Flow-Kern, damit die
   Buehne nicht als abgeschnittener Kasten auf Weiss klebt. */
.buehne::before,
.buehne::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 3;
  background: linear-gradient(90deg, rgb(55 149 239 / 0) 0%, rgb(55 149 239 / 0.5) 50%,
    rgb(55 149 239 / 0) 100%);
  pointer-events: none;
}

.buehne::before {
  top: 0;
}

.buehne::after {
  bottom: 0;
}

/* Kein Strich am Seitenanfang und keiner zwischen Schlussbuehne und Fuss —
   beide traefen auf Schwarz und waeren ein Strich im Nichts. */
.kopf::before,
.schluss::after {
  display: none;
}

/* ---------------------------------------------------------------------------
   Bildbahnen — Joels Bild, nicht nachgebaut
   ---------------------------------------------------------------------------
   Drei Szenen, drei Motive aus seinen sechs Dateien: flow-3 im Kopf, flow-4
   im Zwischenruf, flow-5 am Schluss. Alle 1400x519 (Verhaeltnis 2,7:1) — ein
   Band, kein Vollbild. Deshalb wird die HOEHE geplant, nicht gestreckt: die
   Bahn traegt ihr Seitenverhaeltnis selbst (aspect-ratio), das Bild sitzt mit
   object-fit: cover darin und wird auf jedem Fenster unter 1400 px VERKLEINERT.
   Verkleinern ist scharf, Vergroessern ist weich — das ist der ganze Punkt.

   Was hier NICHT passiert: kein filter, kein backdrop-filter, kein Verlauf
   ueber dem Bild, keine Umfaerbung, kein zusaetzlicher Schein auf der Flaeche.
   Was hier passiert: Groesse, Ausschnitt, Rundung an der Kante, Verschiebung.
   --------------------------------------------------------------------------- */

.bild-band {
  position: relative;
  z-index: 1;
  width: 100%;
  pointer-events: none;
}

.bild-rahmen {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--buehne);
}

.bild-grund,
.bild-lage {
  position: absolute;
  /* Ein Pixel Ueberstand nach allen Seiten. Ohne ihn steht in der obersten
     Zeile des Rahmens eine halbdurchsichtige Bildzeile — und weil die drei
     Lagen additiv blenden, wird aus dem halben Pixel eine sichtbare helle
     Linie quer ueber die Buehne. Gemessen: #282A34 statt #070F1F. Der Rahmen
     schneidet den Ueberstand weg. */
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  /* GSAP schreibt hier translate/scale hinein. Ohne Skript steht alles auf
     Null — dann liegen die Lagen deckungsgleich und ergeben genau das
     Original zurueck. */
  will-change: transform;
}

.bild-grund {
  object-fit: cover;
  object-position: var(--bild-x, 50%) var(--bild-y, 50%);
}

/* Die drei Leuchtdichte-Baender ---------------------------------------------
   flow-3 ist in drei Dateien zerlegt: dunkler Grund, Koerper, helle Kerne.
   Die Gewichte sind eine Zerlegung der EINS (Summe der drei = 1), die Dateien
   tragen deshalb zusammen exakt das Original — mit plus-lighter addiert der
   Browser sie linear zurueck. Gemessene Flaechenanteile: 31,0 / 38,1 / 30,9 %.
   Nachgemessen gegen das Original: 24 % der Pixel identisch, 92 % innerhalb
   von 8/255, groesste Einzelabweichung an einer Kante.

   Warum das ueberhaupt: aus EINEM Standbild wird damit echte Tiefe. Die drei
   Lagen laufen beim Scrollen und unter dem Zeiger verschieden schnell; die
   Kerne bleiben dabei ungeskaliert, damit sie so scharf bleiben wie im
   Original. Vergroessert wird nur, was ohnehin weich ist (Grund und Koerper).

   Geladen wird das NUR ueber 1000 px und nur bei erlaubter Bewegung: die
   url() steht ausschliesslich in diesem Block, ausserhalb holt sie kein
   Browser. Darunter traegt das <img> allein, und die Seite sieht gleich aus. */
.bild-lage {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--bild-x, 50%) var(--bild-y, 50%);
  mix-blend-mode: plus-lighter;
  opacity: 0;
}

@supports (mix-blend-mode: plus-lighter) {
  @media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
    .bild-band--kopf .bild-grund {
      opacity: 0;
    }

    .bild-band--kopf .bild-lage {
      opacity: 1;
    }

    .bild-lage--grund {
      background-image: url("bilder/flow-3-grund.webp");
    }

    .bild-lage--koerper {
      background-image: url("bilder/flow-3-koerper.webp");
    }

    .bild-lage--kern {
      background-image: url("bilder/flow-3-kern.webp");
    }
  }
}

/* Die Bahn im Kopf: volle Breite, oben um 7 % der Fensterbreite unter den
   Text gezogen. Das ist keine Zierde — der Knopf steht dadurch AUF dem Bild.
   Erlaubt ist es, weil die obersten ~150 Bildzeilen von flow-3 gemessen ein
   Zeilenmaximum von 0,012 Leuchtdichte haben (weisser Text: 16:1). 7 % der
   Breite sind bei jedem Fenster weniger als diese 150 Zeilen, weil beides
   mit der Breite skaliert. Das haelt auch bei 2560 px. */
.bild-band--kopf {
  margin-top: -7%;
}

/* Die Bahnen sind FLACHER als das Bild. Das ist Absicht: der Ueberschuss ist
   der Weg, den die Parallaxe zurueckstellt, ohne dass irgendetwas vergroessert
   werden muesste. Kopf 460 statt 519 — 59 Zeilen Luft, alle unten, weil
   --bild-y: 0% den dunklen Bildkopf oben festhaelt (dort steht der Knopf).
   Zwischenruf 430 — 89 Zeilen, mittig geteilt: sichtbar bleiben die
   Quellzeilen 45 bis 475, und genau dort ist flow-1 an beiden Enden dunkel
   (Median 0,004, Maximum 0,023). Die Bahn hat deshalb keine sichtbare Kante. */
.bild-band--kopf .bild-rahmen {
  aspect-ratio: 1400 / 460;
  /* 7 % statt 0: die allererste Bildzeile von flow-3 traegt einen
     Kodierungssaum (Median 0,0162 gegen 0,0039 in Zeile 20). 7 % des
     Ueberschusses schneiden gut vier Quellzeilen oben weg — der Rest bleibt
     unten, wo das Bild ohnehin schwarz ist. */
  --bild-y: 7%;
}

.bild-band--ruf .bild-rahmen {
  aspect-ratio: 1400 / 430;
  --bild-y: 50%;
}

.bild-rahmung .bild-rahmen {
  --bild-y: 34%;
}

/* Schmales Fenster: ein 2,7:1-Streifen waere 145 px hoch und damit kein Bild
   mehr, sondern eine Linie. Also Ausschnitt statt Streifen — hochkantiger
   Rahmen, cover schneidet seitlich zu, und weil dabei VERKLEINERT wird,
   bleibt es scharf. */
@media (max-width: 719px) {
  .bild-band--kopf .bild-rahmen {
    aspect-ratio: 4 / 3;
    --bild-x: 46%;
    --bild-y: 6%;
  }

  .bild-band--ruf .bild-rahmen {
    aspect-ratio: 6 / 5;
    --bild-x: 52%;
  }
}

/* Die dritte Szene ist die einzige gerahmte. flow-5 hat oben eine helle Kante
   (#1E3A6E) — randlos wuerde es als Schnitt enden. Also ein echter Rahmen:
   60 px Radius, helle Innenfase, weiter Schein nach aussen. */
.bild-rahmung {
  margin: clamp(40px, 5vw, 68px) auto 0;
  width: 100%;
  max-width: calc(1000px + 2 * var(--luft));
  padding-inline: var(--luft);
}

.bild-rahmung .bild-rahmen {
  aspect-ratio: 1000 / 340;
  border-radius: var(--r-buehne);
  box-shadow:
    var(--fase-dunkel),
    0 0 0 1px rgb(55 149 239 / 0.20),
    0 40px 96px -34px rgb(7 74 199 / 0.85);
}

@media (max-width: 719px) {
  .bild-rahmung .bild-rahmen {
    aspect-ratio: 4 / 3;
    border-radius: var(--r-weit);
  }
}

/* ---------------------------------------------------------------------------
   1 · Kopf
   --------------------------------------------------------------------------- */

.kopf .buehne-inhalt {
  /* Unten wenig: die Bildbahn zieht sich um 7 % der Breite hier herein, und
     genau diese Ueberlappung ist gewollt. */
  padding-block: clamp(56px, 9vh, 116px) clamp(28px, 3.6vw, 54px);
}

.riese {
  font-size: var(--t-riese);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.03em;
  max-width: 17ch;
}

.riese-fest {
  color: var(--buehne-tinte);
}

/* Das wechselnde Wort ------------------------------------------------------
   inline-grid, alle drei Woerter uebereinander in derselben Zelle. Die Breite
   ist die des laengsten Wortes ("addressable"), und sie aendert sich nie —
   ohne das springt die ganze Zeile bei jedem Wechsel um.
   Die drei Woerter sind aria-hidden; den Satz fuer Screenreader traegt EINMAL
   .nur-lesen in derselben Ueberschrift. Kein Live-Bereich: WCAG 2.2 SC 2.2.2
   behandelt sich selbst wechselnden Text als auto-updating, und ein
   Live-Bereich wuerde ihn zusaetzlich vorlesen. */
.wort,
.wort-knopf {
  display: inline-grid;
  vertical-align: baseline;
  color: var(--flow-spitze);
}

.wort-lage {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(0.14em);
  transition: opacity 0.42s var(--kurve), transform 0.42s var(--kurve);
  white-space: nowrap;
}

.wort-lage.ist-da {
  opacity: 1;
  transform: none;
}

/* Ohne JavaScript zeigt nur das erste Wort — die Uebergaenge oben laufen nie,
   weil niemand die Klasse umsetzt. Steht "automated", wie festgelegt. */
html:not(.js) .wort-lage:first-child {
  opacity: 1;
  transform: none;
}

/* Nach dem einen Durchlauf ersetzt main.js den <span> durch diesen <button>.
   Vorher gibt es ihn nicht — ein Bedienelement, das ohne Skript nichts tut,
   ist schlechter als keines. */
.wort-knopf {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--flow-spitze);
  cursor: pointer;
  border-radius: var(--r-fein);
  transition: color var(--dauer) var(--kurve),
    text-shadow var(--dauer) var(--kurve);
}

.wort-knopf:hover {
  color: #fff;
  text-shadow: 0 0 38px rgb(67 207 255 / 0.75);
}

.kopf-satz {
  max-width: 52ch;
  margin-top: clamp(20px, 2.4vw, 30px);
  font-size: clamp(1rem, 0.9vw, 1.125rem);
  line-height: 1.5;
}

/* Aus dem Zusatzsatz wird eine Plakette: 500 px Radius, dunkles Glas,
   Innenfase. Genau die Sorte Detail, die vertus teuer aussehen laesst — und
   sie kostet kein Wort mehr, als vorher dastand. */
.kopf-band {
  display: inline-block;
  margin-top: clamp(18px, 2vw, 24px);
  padding: 8px 18px 9px;
  border-radius: var(--r-band);
  background: rgb(255 255 255 / 0.06);
  box-shadow:
    var(--fase-dunkel),
    0 0 0 1px rgb(255 255 255 / 0.10);
  color: var(--buehne-tinte);
  font-size: var(--t-klein);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.kopf-knopf {
  margin-top: clamp(26px, 3vw, 38px);
}

/* ---------------------------------------------------------------------------
   2 · Haken
   --------------------------------------------------------------------------- */

.haken-raster {
  display: grid;
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}

@media (min-width: 1000px) {
  .haken-raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}

.haken-titel {
  font-size: var(--t-gross);
  max-width: 17ch;
}

.haken-text {
  margin-top: 26px;
  max-width: 54ch;
  color: var(--gedaempft);
}

/* ---------------------------------------------------------------------------
   3 · Drei Saeulen · 5 · Drei Angebote · 6 · Drei Zielgruppen
   Ein Kartensystem, drei Auspraegungen.
   --------------------------------------------------------------------------- */

.drei {
  display: grid;
  gap: clamp(18px, 2vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.karte {
  position: relative;
  padding: clamp(24px, 2.4vw, 34px);
  border-radius: var(--r-weit);
  background: var(--grund);
  border: 1px solid var(--linie);
  box-shadow: var(--fase), var(--tiefe-1);
  transition: transform var(--dauer) var(--kurve),
    box-shadow var(--dauer) var(--kurve),
    border-color var(--dauer) var(--kurve);
}

/* Auf Weiss ist die Karte blau getoent, auf dem Band ist sie weiss. Die
   Umkehr haelt den Abstand zum Grund konstant, ohne eine zweite Farbe.
   Auf der Blauflaeche traegt die Innenfase sichtbar — dort ist sie das
   Detail, das die Karte aus dem Papier hebt. */
.abschnitt:not(.band) .karte {
  background: var(--flaeche);
  box-shadow: var(--fase-blau), var(--tiefe-1);
}

.karte:hover {
  transform: translateY(-3px);
  border-color: rgb(11 63 209 / 0.34);
  box-shadow: var(--fase), var(--tiefe-2);
}

/* Der Lichtstrich am oberen Rand: der einzige Ort, an dem der Flow-Kern auf
   hellem Grund vorkommt. Rein dekorativ, deshalb ohne Kontrastanforderung. */
.karte::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  border-radius: var(--r-weit) var(--r-weit) 0 0;
  background: linear-gradient(90deg, rgb(11 63 209 / 0) 0%, rgb(11 63 209 / 0.55) 42%,
    rgb(55 149 239 / 0.35) 78%, rgb(55 149 239 / 0) 100%);
  opacity: 0;
  transition: opacity var(--dauer) var(--kurve);
}

.karte:hover::before {
  opacity: 1;
}

.karte-titel {
  font-size: var(--t-mittel);
  letter-spacing: -0.022em;
}

.karte p {
  margin-top: 13px;
  color: var(--gedaempft);
  font-size: var(--t-text);
  line-height: 1.45;
}

/* Das Zeichen ueber jedem Saeulentitel: drei gezeichnete Bilder, kein Text.
   Sie erzaehlen, wovon der Block handelt — Raster, Stufen, Verzweigung — und
   kosten kein einziges Wort. */
/* Das Zeichen sitzt jetzt in einer eigenen Kachel: 14 px Radius, blau
   getoent, mit der hellen Innenfase. Aus einem Strich wird damit ein
   Gegenstand — dieselbe Bewegung, die vertus mit seinen Flaechen macht. */
.karte-zeichen {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  border-radius: var(--r);
  background: rgb(11 63 209 / 0.07);
  box-shadow: var(--fase-blau);
  color: var(--akzent-stark);
}

.karte-zeichen svg {
  width: 40px;
  height: 40px;
}

/* Angebotskarte: der Titel ist ein Wort mit Punkt ("Build."), er steht
   deshalb groesser und blau — sonst liest er sich als Satzanfang. */
.angebot .karte-titel {
  color: var(--akzent);
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  letter-spacing: -0.03em;
}

/* Der Nachsatz nach einer Dreiergruppe — Mitwirkungspflichten, und der Satz,
   der Leute wegschickt. Eine Linie LINKS, nicht darueber: eine Haarlinie ueber
   einem Absatz mit Zeilenmass endet mitten im Weiss und sieht aus wie ein
   Fehler. Die senkrechte Linie sagt dasselbe und ist so lang wie der Text. */
.nachsatz {
  margin-top: clamp(30px, 3.4vw, 44px);
  padding-left: clamp(18px, 2vw, 24px);
  border-left: 2px solid var(--akzent-stark);
  border-radius: 0 var(--r-mikro) var(--r-mikro) 0;
  max-width: 74ch;
  color: var(--gedaempft);
  font-size: var(--t-text);
}

.nachsatz strong {
  color: var(--tinte);
}

/* ---------------------------------------------------------------------------
   4 · Zwischenruf
   --------------------------------------------------------------------------- */

.zwischenruf .buehne-inhalt {
  padding-block: clamp(72px, 9vw, 124px) clamp(40px, 5vw, 72px);
}

.zwischenruf-zeile {
  margin: 0;
  max-width: 22ch;
  color: var(--buehne-tinte);
  font-size: var(--t-gross);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* ---------------------------------------------------------------------------
   7 · Abschluss  ·  8 · Aufforderung
   Eine Buehne, zwei Abschnitte. Der Flow laeuft durch.
   --------------------------------------------------------------------------- */

.schluss .buehne-inhalt > .wrap {
  padding-block: clamp(76px, 9vw, 132px) clamp(48px, 5vw, 68px);
}

.schluss-zeile {
  max-width: 24ch;
  font-size: var(--t-gross);
  font-weight: 500;
  letter-spacing: -0.03em;
}

.schluss-text {
  margin-top: 26px;
  max-width: 56ch;
}

/* Das Portraet kommt am 30.08.2026. Bis dahin steht die Textspalte allein —
   KEIN grauer Kasten, kein "Foto folgt": eine Leerstelle, die sich selbst
   ankuendigt, ist schlechter als keine. Der fertige <img>-Aufruf steht als
   Kommentar im Markup; der Tausch ist eine Zeile. */
.person {
  margin-top: clamp(38px, 4.6vw, 60px);
  padding-top: clamp(28px, 3vw, 38px);
  border-top: 1px solid var(--buehne-linie);
  max-width: 62ch;
}

.person-name {
  color: var(--buehne-tinte);
  font-weight: 620;
}

.person p + p {
  margin-top: 14px;
}

.cta-block {
  padding-block: clamp(48px, 5vw, 68px) clamp(84px, 10vw, 140px);
}

.cta-titel {
  font-size: var(--t-gross);
  max-width: 16ch;
}

.cta-text {
  margin-top: 26px;
  max-width: 56ch;
}

.cta-knopf {
  margin-top: clamp(30px, 3.4vw, 44px);
}

.cta-knopf .btn {
  padding: 18px 34px;
  font-size: 1.0625rem;
}

/* ---------------------------------------------------------------------------
   Produktausschnitte — gestaltete Platzhalter, keine grauen Kaesten
   ---------------------------------------------------------------------------
   Joel am 28.08.2026: "keine grauen Kaesten". Also ein Rahmen in Blau, Weiss
   und Schwarz, der wie ein Ausschnitt aus der eigenen Anwendung liest — Leiste,
   Seitenschiene, Kurve, Spalten. Er traegt KEIN Wort: erstens zaehlt jedes
   Wort auf dieser Seite (809 sind gesetzt), zweitens waeren erfundene Zahlen
   in einem Produktbild genau die Behauptung, die diese Seite nicht macht.
   Echte Bildschirmfotos kommen, wenn die App ueberarbeitet ist. Der Tausch ist
   dann ein <img> an derselben Stelle — die Groesse steht schon.
   --------------------------------------------------------------------------- */

.ausschnitt {
  margin: 0;
  border-radius: var(--r-schale);
  background: linear-gradient(160deg, #0a1024 0%, var(--buehne) 62%);
  border: 1px solid rgb(55 149 239 / 0.22);
  box-shadow: var(--tiefe-2);
  overflow: hidden;
}

.ausschnitt-leiste {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 16px;
  border-bottom: 1px solid rgb(255 255 255 / 0.07);
}

.ausschnitt-punkt {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.16);
}

.ausschnitt-punkt:first-child {
  background: var(--flow-kern);
}

.ausschnitt-adresse {
  flex: 1;
  height: 9px;
  margin-left: 10px;
  border-radius: var(--r-voll);
  background: rgb(255 255 255 / 0.07);
}

.ausschnitt-koerper {
  display: grid;
  border-radius: 0 0 var(--r-gross) var(--r-gross);
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 2px;
  background: rgb(255 255 255 / 0.06);
}

.ausschnitt-schiene,
.ausschnitt-feld {
  background: linear-gradient(180deg, rgb(10 16 36 / 0.9), rgb(5 7 14 / 0.9));
  padding: 18px 16px;
}

.ausschnitt-schiene {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.schiene-strich {
  height: 7px;
  border-radius: var(--r-voll);
  background: rgb(255 255 255 / 0.12);
}

.schiene-strich.ist-aktiv {
  background: linear-gradient(90deg, var(--flow-kern), var(--flow-spitze));
  box-shadow: 0 0 16px rgb(55 149 239 / 0.55);
}

.schiene-strich:nth-child(2) {
  width: 74%;
}

.schiene-strich:nth-child(3) {
  width: 88%;
}

.schiene-strich:nth-child(4) {
  width: 62%;
}

.schiene-strich:nth-child(5) {
  width: 80%;
}

.ausschnitt-feld {
  padding: 22px 22px 26px;
}

.feld-kopf {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.feld-kachel {
  flex: 1;
  height: 46px;
  border-radius: var(--r-klein);
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.07);
  position: relative;
  overflow: hidden;
}

.feld-kachel::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 13px;
  width: 42%;
  height: 6px;
  border-radius: var(--r-voll);
  background: rgb(255 255 255 / 0.22);
}

.feld-kachel::after {
  content: "";
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 26%;
  height: 8px;
  border-radius: var(--r-voll);
  background: var(--flow-kern);
}

.feld-kachel:nth-child(2)::after {
  width: 34%;
  background: var(--flow-spitze);
}

.feld-kachel:nth-child(3)::after {
  width: 20%;
}

.kurve {
  display: block;
  width: 100%;
  height: auto;
}

/* Spaltentafel — der zweite Ausschnitt, unter den drei Angeboten. */
.tafel {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  background: rgb(255 255 255 / 0.06);
}

.tafel-spalte {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 18px 14px 24px;
  background: linear-gradient(180deg, rgb(10 16 36 / 0.92), rgb(5 7 14 / 0.92));
}

.tafel-kopf {
  height: 7px;
  margin-bottom: 6px;
  border-radius: var(--r-voll);
  background: rgb(255 255 255 / 0.2);
}

.tafel-spalte.ist-aktiv .tafel-kopf {
  background: linear-gradient(90deg, var(--flow-kern), var(--flow-spitze));
  box-shadow: 0 0 18px rgb(67 207 255 / 0.5);
}

.tafel-karte {
  height: 34px;
  border-radius: var(--r-klein);
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.07);
  position: relative;
}

.tafel-karte::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 10px;
  width: 58%;
  height: 5px;
  border-radius: var(--r-voll);
  background: rgb(255 255 255 / 0.2);
}

.tafel-karte::after {
  content: "";
  position: absolute;
  left: 9px;
  bottom: 9px;
  width: 32%;
  height: 5px;
  border-radius: var(--r-voll);
  background: rgb(55 149 239 / 0.75);
}

.tafel-spalte.ist-aktiv .tafel-karte {
  border-color: rgb(55 149 239 / 0.4);
  box-shadow: 0 0 24px -6px rgb(55 149 239 / 0.55);
}

.tafel-karte.ist-kurz {
  height: 26px;
}

.ausschnitt--tafel {
  margin-top: clamp(34px, 4vw, 52px);
}

/* ---------------------------------------------------------------------------
   Fuss
   --------------------------------------------------------------------------- */

.fuss {
  background: var(--buehne);
  color: var(--buehne-gedaempft);
  border-top: 1px solid var(--buehne-linie);
  padding-block: clamp(48px, 6vw, 72px);
  font-size: var(--t-klein);
}

.fuss-raster {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}

.fuss-spalte {
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: flex-start;
}

.fuss-marke {
  max-width: 34ch;
  color: var(--buehne-gedaempft);
  font-size: var(--t-klein);
}

.fuss .marke-wort {
  display: block;
  margin-right: 0;
  margin-bottom: 6px;
  font-size: 1.25rem;
}

.fuss-kopf {
  margin: 0 0 4px;
  color: var(--buehne-tinte);
  font-size: var(--t-mikro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fuss a {
  color: var(--buehne-gedaempft);
  text-decoration: none;
}

.fuss a:hover {
  color: var(--buehne-tinte);
  text-decoration: underline;
}

.fuss p {
  margin: 0;
}

.fuss-hinweis {
  max-width: 42ch;
  line-height: 1.55;
}

.klein {
  font-size: var(--t-klein);
}

/* ---------------------------------------------------------------------------
   Einblenden beim Scrollen
   ---------------------------------------------------------------------------
   Jede verbergende Regel haengt an .js. Ohne Skript ist nichts unsichtbar —
   das ist die harte Bedingung, nicht die Kür. --verzug staffelt Geschwister;
   main.js setzt ihn als Inline-Stil.
   --------------------------------------------------------------------------- */

/* Szenentexte auf den drei Buehnen. Verborgen wird NUR, wenn szene.js
   bestaetigt hat, dass GSAP und ScrollTrigger stehen und die Zeitleisten
   gebaut sind (.hat-szenen am <html>). Ohne Skript, ohne Bewegung, bei einem
   fehlgeschlagenen Nachladen: nichts ist unsichtbar. */
.hat-szenen [data-szene-text] {
  opacity: 0;
}

.js [data-zeig] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  will-change: opacity, transform;
}

.js [data-zeig].ist-da {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dauer-lang) var(--kurve) var(--verzug, 0ms),
    transform var(--dauer-lang) var(--kurve) var(--verzug, 0ms);
  will-change: auto;
}

/* ---------------------------------------------------------------------------
   Rechtsseiten — Impressum und Datenschutzerklaerung
   ---------------------------------------------------------------------------
   Der TEXT dieser beiden Seiten bleibt unangetastet und deutsch. Hier steht
   nur ihre Gestaltung, in der neuen Palette.
   --------------------------------------------------------------------------- */

.rechtsseite {
  padding-block: clamp(40px, 5vw, 72px) clamp(64px, 8vw, 108px);
}

.rechtsseite h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  margin-bottom: 28px;
}

.rechtsseite h2 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  margin-top: 44px;
  margin-bottom: 14px;
}

.rechtsseite h3 {
  font-size: 1.0625rem;
  margin-top: 28px;
  margin-bottom: 10px;
}

.rechtsseite p,
.rechtsseite li {
  color: var(--gedaempft);
}

.rechtsseite li {
  margin-bottom: 8px;
}

.rechtsseite code {
  padding: 2px 6px;
  border-radius: var(--r-fein);
  background: var(--flaeche-2);
  color: var(--akzent);
  font-size: 0.9em;
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;
}

.zurueck {
  display: inline-block;
  margin-bottom: 26px;
  font-size: var(--t-klein);
  font-weight: 560;
  text-decoration: none;
}

.pruefkasten {
  margin-bottom: 36px;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--r-mittel);
  border: 1px solid rgb(11 63 209 / 0.3);
  border-left: 3px solid var(--akzent-stark);
  background: var(--flaeche);
  box-shadow: var(--tiefe-1);
}

.pruefkasten p {
  font-size: 1rem;
}

.pruefkasten p:last-child {
  margin-bottom: 0;
}

/* Offene Stelle im Rechtstext. Frueher trug sie eine eigene Signalfarbe; die
   ist mit Gold und Beige am 28.08.2026 gefallen. Jetzt traegt sie das Blau
   und eine gepunktete Unterlaenge — die Form unterscheidet, nicht eine
   vierte Farbe. */
.auszufuellen {
  color: var(--akzent);
  font-weight: 560;
  text-decoration: underline dotted var(--akzent-stark);
  text-underline-offset: 0.22em;
  background: rgb(11 63 209 / 0.07);
  padding: 1px 4px;
  border-radius: var(--r-mikro);
}

/* ---------------------------------------------------------------------------
   Schmale Schirme
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .leiste-nav {
    display: none;
  }
}

@media (max-width: 620px) {
  /* Die Beschriftung ist ueberall dieselbe und hier schlicht zu lang. Auf dem
     ersten Bildschirm steht derselbe Knopf ueber die volle Breite. */
  .leiste-btn {
    display: none;
  }

  .riese {
    max-width: none;
  }

  .kopf-knopf .btn,
  .cta-knopf .btn {
    width: 100%;
    justify-content: center;
  }

  .ausschnitt-koerper {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .tafel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tafel-spalte:nth-child(n + 4) {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   Bewegung aus
   ---------------------------------------------------------------------------
   Alles. Einblenden, Wortwechsel, Flow. vertus hat dafuer gemessen NULL
   Vorkehrungen; das ist der Punkt, an dem wir nicht kopieren.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-zeig] {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Das Canvas kommt gar nicht erst ins Bild. flow.js prueft dieselbe
     Medienabfrage und startet nicht — das hier ist der Guertel zum Hosentraeger. */
  .buehne-flow {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Druck
   --------------------------------------------------------------------------- */

@media print {
  .leiste,
  .sprung,
  .buehne-flow,
  .buehne-ersatz,
  .ausschnitt {
    display: none !important;
  }

  .buehne,
  .fuss {
    background: #fff !important;
    color: #000 !important;
  }

  .buehne p,
  .fuss {
    color: #333 !important;
  }

  body {
    font-size: 11pt;
  }
}