/* Dreamteam WEB-Register. Alle Farben aus der Tokenliste von
   `dreamteam-design-system`, jeder Abstand ein Vielfaches von 4.

   EIN Stilblatt fuer ZWEI Seiten (Wurzel und Impressum). Der Kino-Entwurf vom
   15.10.2026 brachte 42 verschiedene Hex-Werte mit, davon NULL aus dem Haus,
   dazu 4 Glows, 2 Weichzeichner und 4 Deko-Verlaeufe. Nichts davon steht hier.

   Die Tiefe kommt stattdessen aus drei Dingen, die dieses System erlaubt:
   Flaechen, Haarlinien und Ebenen, die sich verschieden schnell bewegen.

   ⛔ KEINE DECKKRAFT AUF TEXT, NIRGENDS - weder als Startzustand noch als
   Zwischenwert einer Blende. Uebernommen von dataprospect.de, wo es teuer
   bezahlt wurde: axe meldete am 04.08.2026 einundzwanzig Kontrastverstoesse
   auf der Startseite, alle aus halbdurchsichtigem Text. Nachgerechnet steht
   Text bei Deckkraft 0,55 auf 2,6:1, und fuer 4,5:1 braeuchte es 0,79 - das
   ist keine Blende mehr. Geblendet wird deshalb mit `transform` (bewegen) oder
   `clip-path` (abdecken; der verdeckte Teil wird gar nicht erst gezeichnet).
   `check-blenden.py` misst das an jeder Rollposition. */
@font-face{font-family:Geist;src:url(/Geist-Variable.woff2) format("woff2");
           font-weight:100 900;font-display:swap}

:root{
  --ink:#0D1117; --ink-2:#151A21;
  --muted:#666D78; --divider:#E2E5EA; --border:#848C99;
  --mint:#00E5A0; --mint-text:#006B47;
  /* Blau kommt genau an EINER Stelle vor: als Flaeche hinter einem der drei
     Menschen. Die Seite faehrt sonst Tinte und Mint - drei Menschen brauchen
     aber drei Flaechen, sonst traegt einer die Farbe eines anderen. Ein
     Markentoken des Hauses, kein loser Hex; Text steht nie darauf. */
  --blue:#4D7CFE;
  --bg:#F6F7F9; --surface:#FCFCFD; --on-dark:#F6F7F9;

  /* Die Bahn des Hausregisters. Der Hero bekommt seine eigene, breitere -
     siehe .herobahn, dort steht auch der Grund. */
  --bahn:1200px; --rand:48px; --sektion:96px; --kopf:64px;

  /* Der Verbindungspunkt. Im Standbild (bruecke, 2688x1520) liegt er bei
     57,4 % / 45,8 %, im SCHLUSSBILD des geschnittenen Films bei 59,3 % /
     47,7 % - dort zuendet der gruene Punkt. Bildausschnitt, Kamerafahrt und
     die Einfahrt ins Licht haengen an diesen Zahlen; wird das Material je
     ersetzt, aendern sie sich hier an einer Stelle. `check-scrub.py` haelt
     den Ursprung der Einfahrt gegen den gemessenen Punkt. */
  --px:57.4%; --py:45.8%;
  --lx:59.3%; --schnitt:48%;

  /* Die zwei Bewegungs-Tokens von dataprospect.de. Mehr Kurven gibt es nicht:
     eine Seite mit vier Easings wirkt zusammengesetzt. */
  --mo-quick:220ms; --mo-out:cubic-bezier(.22,.61,.36,1);
}
.dark{--bg:#0D1117; --surface:#151A21; --muted:#9BA2AD;
      --divider:#252B33; --border:#5A6372}
/* Die Textfarbe gehoert dazu. Ohne diese Zeile setzt `section{color:var(--ink)}`
   Tinte auf Tinte - der Text steht da, ist aber unsichtbar, und weder tsc noch
   eine Layoutmessung sieht das. Am 14.10.2026 im ersten Bild gefunden. */
section.dark,header.dark,footer.dark,body.dark{color:var(--on-dark)}

/* ---- Der Schriftboden: 14px ---------------------------------------------
   Roland am 16.10.2026: „kein text darf so klein sein wie im header."
   Kleinster sichtbarer Text war 10px (die Rollmarke), dann 11px (Feldname und
   Chips im Track Record), die Kopfleiste 13px.

   ⚠ Das weicht vom Caption-Tier des Designsystems ab, das 12px vorsieht.
   Die Abweichung steht hier, damit sie nicht stillschweigend geschieht: auf
   einem Bildschirm, der aus zwei Metern Abstand gezeigt wird, ist 11px keine
   Beschriftung mehr, sondern eine Behauptung. `check-passform.py` misst den
   Boden an JEDEM sichtbaren Textknoten beider Seiten - eine Regel, die nur im
   Stilblatt steht, haelt bis zur naechsten neuen Klasse. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--ink);
     font-family:Geist,"Geist Variable",system-ui,sans-serif;
     font-size:16px;line-height:1.55;letter-spacing:-.011em;
     -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
::selection{background:var(--mint);color:var(--ink)}

/* Keine Hurenkinder: `balance` verteilt eine Ueberschrift auf gleich lange
   Zeilen, `pretty` haelt im Fliesstext das letzte Wort bei seinem Satz.
   Browser ohne die Eigenschaft brechen wie bisher - das ist kein Defekt,
   sondern der Stand vor dieser Zeile. `check-waisen.py` misst das Ergebnis. */
h1,h2,h3{text-wrap:balance}
p,li,.belegzeile>span{text-wrap:pretty}

/* Fokus: auf hell Tinte, auf dunkel Mint. outline:none gibt es nicht. */
:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.dark :focus-visible,.hero :focus-visible{outline-color:var(--mint)}

/* Der Sprung ueber die Kopfleiste. Sichtbar, sobald er den Fokus hat. */
.sprung{position:absolute;left:-9999px;top:0;z-index:30;
  background:var(--mint);color:var(--ink);padding:12px 16px;
  font-weight:700;font-size:14px;text-decoration:none}
.sprung:focus{left:16px;top:16px}

.bahn{width:min(100%,var(--bahn));margin:0 auto;
  padding-left:var(--rand);padding-right:var(--rand)}

/* ------------------------------------------------------- wiederkehrende Teile */

.zaehler{display:flex;align-items:center;gap:12px;
  font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)}
.wuerfel{width:8px;height:8px;background:var(--mint-text);flex:none}
.dark .wuerfel,.hero .wuerfel,footer .wuerfel{background:var(--mint)}

/* Der grosse Satz. Zwei Zeilen, die zweite in Mint - genau eine Hervorhebung
   je Flaeche. Mint als TEXT gilt nur auf dunkel: auf hell waere der Kontrast
   1,54. `.dark` gehoert dafuer in den SELEKTOR, im Elternelement sieht es
   kein Pruefer. */
.grossatz{font-size:clamp(42px,6.2vw,104px);font-weight:650;
  line-height:.98;letter-spacing:-.04em;margin-top:24px}
.grossatz span,.grossatz em{display:block}
.grossatz em{font-style:normal;color:var(--mint-text)}
.dark .grossatz em{color:var(--mint)}

/* ------------------------------------------------------------------- Logo */

/* Zwei schraege Balken, der zweite kuerzer und leiser. Vorbild ist der
   Entwurf vom 15.10.2026 (7/23/14px, skew -23deg); hier liegen die Masse auf
   dem 4er-Raster und die Farbe auf dem Haus-Mint. Zwei leere Elemente - kein
   SVG (verboten auf dieser Seite), kein Bild, kein Zeichen aus einer Schrift.
   Der zweite Balken ist nicht halbdurchsichtig, sondern eine eigene Farbe:
   Deckkraft auf einer Markenflaeche waere derselbe Fehler wie auf Text. */
.zeichen{display:inline-flex;align-items:flex-end;gap:4px;flex:none;
  width:24px;height:24px}
.zeichen span{display:block;width:8px;background:var(--mint);
  transform:skew(-23deg)}
.zeichen span:first-child{height:24px}
/* Beide Balken in derselben Farbe - die Form traegt der Hoehenunterschied.
   Der Entwurf machte den zweiten mit Deckkraft .56 leiser; Deckkraft waere
   hier derselbe Fehler wie auf Text, und Roland hat ausdruecklich ZWEI gruene
   Balken gelobt. */
.zeichen span:last-child{height:16px}

/* ------------------------------------------------------------------ Knopf */

.knopf{display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 28px;background:var(--mint);color:var(--ink);
  font-size:14px;font-weight:700;letter-spacing:-.01em;text-decoration:none;
  border:0;cursor:pointer;
  transition:transform var(--mo-quick) var(--mo-out),
             background-color var(--mo-quick) var(--mo-out)}
.knopf-klein{min-height:44px;padding:0 16px;font-size:14px}

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

.kopf{position:fixed;top:0;left:0;right:0;z-index:20;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease}
/* Gesetzt von bewegung.js, sobald gerollt wurde. Ohne JavaScript bleibt die
   Leiste durchsichtig - der Hero traegt seinen eigenen Schleier. */
.kopf.fest{background:var(--ink);border-bottom-color:var(--divider)}
.kopfbahn{display:flex;align-items:center;justify-content:space-between;
  gap:24px;height:var(--kopf)}
.marke{display:inline-flex;align-items:center;gap:12px;
  font-size:15px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap}
.kopf nav{display:flex;gap:32px}
.kopf nav a{font-size:15px;text-decoration:none;color:var(--on-dark);
  transition:color var(--mo-quick) var(--mo-out)}

/* -------------------------------------------------------------- Scroll-Hero */

/* Der Hero ist HOCH, seine Buehne klebt darin. Die Hoehe ist der Rollweg,
   den die Reise zum Erzaehlen hat - 400vh fuer sechs Sekunden Film, nach
   `10k-websites/references/scrub-pipeline.md`. Angepinnt wird mit nativem
   `position:sticky`, nicht mit einem abgefangenen Scrollrad. */
/* Ohne Film ist der Hero genau einen Bildschirm hoch. Die 400svh gibt es
   erst, wenn die Maschine wirklich scrubbt - sonst rollte der Besucher
   drei Bildschirme durch ein Standbild. Die Klasse setzt `scrub.js`, und
   zwar erst NACH seinen fuenf Toren. */
.hero{position:relative;z-index:0;height:100svh;background:var(--ink)}
.hero.scrubt{height:600svh}
.buehne{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;
  display:flex;align-items:stretch}

/* Am Ende der Reise geht die Kamera noch ein Stueck naeher an den Punkt
   heran, an dem der gruene Funke zuendet - 12 Prozent, eine Regung, keine
   Fahrt.

   ⛔ Hier stand Faktor 8, und das war der dritte verworfene Versuch an
   derselben Stelle. Roland am 16.10.2026: „jetzt wird komisch reingezoomt
   super schnell und qualitaet ist scheisse von der naehe." Achtfach
   vergroessert ist jedes Material Brei; was man dann sieht, ist nicht mehr
   der Film, sondern seine Pixel. */
/* Das Endbild liegt deckungsgleich ueber dem Film und uebernimmt, sobald die
   Reise steht. Es ist dasselbe Einzelbild aus derselben Quelle, also gibt es
   nichts zu ueberblenden - die kurze Rampe faengt nur einen Versatz von einem
   Bild ab, falls das Video eine Spur weiter steht. Deckkraft auf einer
   FLAECHE ist erlaubt; auf Text waere sie es nicht. */
.endbild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 120ms linear;pointer-events:none}
.film.amende .endbild{opacity:1}
.film{position:absolute;inset:0;
  transform:scale(calc(1 + var(--riss,0) * 0.12));
  transform-origin:var(--lx) var(--schnitt)}
.standbild,.scrubfilm{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% var(--py)}
/* Eigene Compositor-Ebene, damit das Neuzeichnen des Films den Rest der
   Seite nicht mitzieht. */
.scrubfilm{opacity:0;transform:translateZ(0);will-change:transform}
/* Erst wenn die Maschine den ersten Frame wirklich stehen hat. Ein Video,
   das sichtbar wird, bevor es springen kann, blitzt schwarz auf. */
.film.bereit .scrubfilm{opacity:1}

/* Der Grundschleier liegt IMMER ueber dem Bild, damit kein Einzelbild je
   roh hinter der Seite steht. Linear aus der Tinte, kein zweiter Farbwert. */
.schleier{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(13,17,23,.80) 0%,rgba(13,17,23,.50) 34%,
                    rgba(13,17,23,.14) 62%,rgba(13,17,23,.04) 100%),
    linear-gradient(to top,var(--ink) 0%,rgba(13,17,23,.58) 8%,
                    rgba(13,17,23,.05) 24%,rgba(13,17,23,0) 100%)}

/* ---- Die Einfahrt ins Licht --------------------------------------------

   ⛔ Zweimal gefallen, beide Male aus demselben Grund. Erst eine Mintscheibe
   (`clip-path:ellipse`), die aus dem Beruehrungspunkt wuchs - Roland am
   16.10.2026: „der gruene effekt was rauskommt aus dem touching, ist super
   amateurhaft ... nicht nur ein kreis was sich groesser macht." Dann eine
   harte Mintflaeche, die an der Beruehrungslinie aufging - derselbe Befund:
   „dieser effekt ist wirklich ekelhaft was rauskommt aus light."

   Was beide gemeinsam hatten: eine FLAECHE in einer Hausfarbe legte sich
   ueber ein gedrehtes Bild. Jetzt gibt es keine Flaeche mehr. Der Schirm
   fuellt sich mit dem Licht, das im Film wirklich zuendet - die Kamera
   faehrt hinein. Das steht als `scale` am Film oben, nicht als eigener
   Baustein; es gibt hier nichts mehr zu zeichnen. */

/* ---- Die Baender ------------------------------------------------------- */

.baender{position:relative;z-index:2;width:min(100%,1440px);margin:0 auto;
  padding:calc(var(--kopf) + 48px) var(--rand) 56px;flex:1}
/* Jedes Band belegt dieselbe Flaeche; sichtbar ist immer nur, was sein
   Rollabschnitt erlaubt. Die Deckkraft schreibt die Maschine, nicht CSS -
   deshalb steht hier kein Uebergang, der sie verschleifen wuerde. */
/* Der Gegenlauf: das Band wandert ueber seinen Abschnitt 56px gegen den
   Film. Zwei Ebenen mit verschiedener Geschwindigkeit sind die Tiefe, die
   dieses System erlaubt - nie ein Weichzeichner, nie ein Schein.
   `--lauf` schreibt `scrub.js`, und zwar nur fuer die Takte: der letzte Takt
   IST die Ankunft und bleibt ruhig. */
.band{position:absolute;inset:calc(var(--kopf) + 48px) var(--rand) 56px;
  display:flex;flex-direction:column;justify-content:flex-end;
  pointer-events:none;
  transform:translate3d(0,calc((.5 - var(--lauf,.5)) * 56px),0)}
/* Kein `opacity` am Band. Es faerbt sonst jede Zeile darin halbdurchsichtig,
   und genau das ist hier verboten. Was den Takt kommen und gehen laesst, ist
   die Fahrt seiner Zeilen aus ihren Kaesten - `--ein` und `--aus` schreibt
   `scrub.js`. */
.hero.scrubt .band{--ein:0}
.maske,.hero h1 .z1,.hero h1 .z2{display:block;overflow:hidden;
  padding-bottom:.14em;margin-bottom:-.14em}
/* Derselbe Kasten, aber um EIN Wort. Der Satz baut sich damit Wort fuer Wort
   auf, statt als ein Block zu erscheinen - Rolands „more depth" vom
   16.10.2026. `inline-block`, sonst sitzen alle Woerter untereinander. */
.wort{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.14em;margin-bottom:-.14em}
/* 135 %, nicht 118 %. Der Kasten ist um .14em hoeher als die Zeile (Platz
   fuer Unterlaengen), und bei 118 % blieb von „ways." ein Streifen im
   Kasten stehen - gemessen am 16.10.2026, Tinte auf Tinte, 1,00:1. Die
   Zeile muss den Kasten ganz verlassen, nicht fast. */
/* `--versatz` staffelt die Zeilen eines Takts: die zweite faehrt los, wenn
   die erste schon unterwegs ist. Ohne das landet der ganze Satz als EIN
   waagerechter Schnitt, und das sieht nach Fehler aus statt nach Ankunft.
   Bei `--versatz:0` ist der Nenner 1, die Rechnung also die unveraenderte. */
.fahrt,.hero h1 i{display:block;
  --e:clamp(0, (var(--ein,1) - var(--versatz,0))
               / (1 - var(--versatz,0)), 1);
  transform:translate3d(0,calc((1 - var(--e)) * 135%
                               - var(--aus,0) * 135%),0)}
/* Die Zeile kommt von unten und geht nach OBEN weiter - sie kehrt nicht um.
   Rueckwaerts gerollt laeuft beides sauber zurueck, weil beide Zahlen am
   Rollweg haengen und nicht an einer Uhr. */
/* Ein Fluchtweg: wer mit der Tastatur auf den Ruf im Hero springt, soll ihn
   sehen, auch wenn sein Takt gerade nicht laeuft. */
.fahrt:focus-within{transform:none}
.band.an{pointer-events:auto}
/* Ohne Scrub traegt nur der Ruhepunkt den Hero. Die Takte der Reise haben
   dort keinen Rollweg, auf dem sie erscheinen koennten. */
.hero:not(.scrubt) .band{display:none}
.hero:not(.scrubt) .band:last-child{display:flex;--ein:1;--aus:0;--auf:1}
/* Der Bandschleier senkt das Bild genau dort, wo gerade Text steht, und
   stirbt bei 76 % aus, damit die Ecken lebendig bleiben.
   Ein radialer Verlauf ist hier KEINE Zier: er ist das Mittel, mit dem Text
   ueber bewegtem Bild lesbar wird. Die Hausregel verbietet radiale Verlaeufe
   als Deko; dieser traegt nur Alphawerte derselben Tinte und keinen zweiten
   Farbwert, und `pruefe_dreamteam.py` misst genau diesen Unterschied. */
.band::before{content:"";position:absolute;inset:-6%;pointer-events:none;
  opacity:calc(var(--auf,1) * (.25 + .75*var(--k,1))
               * var(--tiefe,1) * var(--schleier,1));
  background:radial-gradient(ellipse 84% 60% at 28% 78%,
    rgba(13,17,23,.94) 0%,rgba(13,17,23,.70) 44%,rgba(13,17,23,0) 78%)}
/* `--tiefe` steht je Takt im Markup. Der Skill verlangt ausdruecklich, die
   Tiefe gegen die EIGENEN Bilder des Takts zu stellen, nicht einmal fuer
   alle: bei Rollstand 0 liegt unter der Unterschrift ruhiges Wasser, bei
   0,34 die Bernstein-Spiegelung. Eine Zahl fuer beide ist an einer Stelle
   zu dunkel und an der anderen zu duenn.
   `--schleier` ist der Griff der Pruefung: sie duennt BEIDE Schichten der
   Lesbarkeit um ein Fuenftel aus, nicht nur eine davon. */

/* ⛔ Die Taktnummer trug bis zum 16.10.2026 ein scharfes Rechteck in der
   Tinte. Es loeste den Kontrast - als freie MINT-Schrift hielt sie nur
   3,78:1, und fuer 14px verlangt WCAG 4,5:1 - und es war am Ende das, was
   Roland auf dem Bild gesehen hat: "behind eyebrow im hero wo die texte
   sind ist ein black box dahinten, loeschen."
   Die Flaeche war die bequeme Antwort auf einen Kontrastbefund. Die
   richtige ist die Farbe: der Film ist an dieser Stelle dunkel, und heller
   Text darauf traegt ohne jede Flaeche. Mint bleibt dort, wo es ohnehin
   keine Schrift ist - auf dem Strich daneben. */
.taktnr{display:inline-flex;align-items:center;gap:12px;
  font-size:14px;font-weight:600;letter-spacing:.16em;
  color:var(--ink);font-variant-numeric:tabular-nums;margin-bottom:16px;
  position:relative}
/* Die Nummer reitet auf einer Linie, die mit dem Takt waechst. Eine Flaeche
   darf wachsen; Text darf es nicht, der faehrt. */
.taktstrich{display:block;width:40px;height:1px;background:var(--mint-text);
  transform:scaleX(var(--ein,1));transform-origin:left}
.dark .taktstrich{background:var(--mint)}
.dark .taktnr{color:var(--on-dark)}
/* 15ch, nicht 18ch. Gemessen am 16.10.2026: bei 18ch reicht
   „We work on both sides of it." bis x=1022, und dort liegt die
   Bernstein-Spiegelung der ukrainischen Skulptur im Wasser - weisser Text
   darauf hielt 1,65:1. Die ruhige Spur ist links; der Text bleibt darin,
   statt dass mehr Schwarz ueber das Bild gelegt wird. */
.band>p{position:relative;max-width:15ch;
  font-size:clamp(34px,5.4vw,78px);font-weight:700;line-height:1.02;
  letter-spacing:-.04em;color:var(--on-dark)}

/* ---- Der Ruhepunkt ----------------------------------------------------- */

.herosatz{position:relative}
/* 7.9vw, nicht 8.6vw. Gemessen am 15.10.2026: der gruene Lichtstrahl des
   Bildes macht die Spalte ab x 45 % der Breite unlesbar (2,3:1 gegen weisse
   Schrift). Die Einheit ist Absicht - der Strahl sitzt bei jeder
   Fensterbreite an derselben relativen Stelle. */
.hero h1{font-size:clamp(50px,7.9vw,136px);font-weight:700;
  line-height:.94;letter-spacing:-.052em}
/* Die Maske des Auftakts: die Zeile faehrt aus ihrem eigenen Kasten herauf.
   `overflow:hidden` wuerde die Unterlaengen abschneiden, deshalb bekommt der
   Kasten unten Luft und holt sie als negativen Aussenabstand wieder zurueck. */
.hero h1 .z1,.hero h1 .z2{display:block;overflow:hidden;
  padding-bottom:.1em;margin-bottom:-.1em}
.hero h1 i{display:block;font-style:normal}
.hero h1 .z2{font-size:.64em;letter-spacing:-.04em;margin-top:8px}
.hero.dark h1 em{font-style:normal;color:var(--mint)}
/* Der Fuss des Satzes: Unterzeile links, Ruf rechts, eine Haarlinie darueber.
   Bis zum 16.10.2026 stand beides untereinander am linken Rand, und die
   rechte Haelfte der Lichtflaeche war leer - Rolands zweiter Befund an
   dieser Stelle. */
/* Die Haarlinie waechst mit dem Satz, statt vor ihm dazustehen. Sie ist ein
   `::before` mit `scaleX`, kein `border-top`: eine Kante kann nicht wachsen,
   eine Flaeche schon - und Deckkraft ist hier wie ueberall verboten. */
/* ⚠ Untereinander und links, immer. Rechts liegt im Bild das helle Amber der
   ukrainischen Skulptur: nebeneinander hielt der Ruf dort 4,32:1 und spaeter
   3,48:1 statt 4,5 - zweimal am 16.10.2026 gemessen, und derselbe Grund, aus
   dem er am 15.10. schon einmal unter die Zeile gewandert ist. Die Fassung
   nebeneinander gab es nur, solange der Satz auf einer Mintflaeche stand;
   mit ihr ist auch sie gefallen. */
.satzfuss{position:relative;display:flex;flex-direction:column;
  align-items:flex-start;gap:0;margin-top:40px;padding-top:24px}
.satzfuss::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--border);transform:scaleX(var(--ein,1));transform-origin:left}
.unter{font-size:clamp(16px,1.4vw,20px);line-height:1.6;
  max-width:46ch;color:var(--on-dark)}
/* Der Ruf steht UNTER der Zeile, nicht rechts daneben. Rechts liegt im Bild
   das helle Amber der ukrainischen Skulptur, und Mint darauf hielt 1,9:1. */
/* EINE Linie, nicht zwei. Bis zum 16.10.2026 trug der Ruf eine Unterkante
   UND einen Pfeilstrich: zwei Striche verschiedener Laenge auf verschiedener
   Hoehe, und Roland hat genau das als Fehler gesehen. Geblieben ist der
   Strich, und er waechst beim Ueberfahren. */
.dark .textruf{display:inline-flex;align-items:center;gap:20px;
  margin-top:28px;padding:12px 0;
  color:var(--mint);font-size:15px;font-weight:700;text-decoration:none;
  transition:gap var(--mo-quick) var(--mo-out)}
.rufpfeil{width:56px;height:1px;background:var(--mint);flex:none;
  transition:width var(--mo-quick) var(--mo-out)}

/* ---- Der Satz IM Licht --------------------------------------------------
   Auf dem Scrub-Weg erscheint der letzte Takt erst, wenn die Flut den Schirm
   schon fuellt (sein Band beginnt bei FLUT_BIS). Er steht also immer auf
   Mint, und dort traegt nur Tinte: 16,56:1 gegen 1,54:1 fuer Hellgrau.
   Es gibt deshalb keinen Zwischenzustand, in dem die Farbe falsch waere. */
/* Der Satz steht IN der Lichtflaeche, nicht auf der ganzen Buehne: oben vom
   Schnitt, unten vom Buehnenrand. Damit bleibt das Bildband darueber sichtbar
   und die Flaeche ist gefuellt statt leer - genau der Befund vom 16.10.2026
   („ist einfach leer und Hintergrund nicht so schoen"). */
/* Der Satz steht auf dem Schlussbild des Films - hell auf dunkel wie die
   Takte davor, mit demselben Bandschleier. Dass er eine Zeitlang in Tinte
   auf einer Mintflaeche stand, war die Folge zweier verworfener Fassungen
   des Lichts; mit ihnen ist auch die Farbe zurueckgegangen. */
.hero.scrubt .band:last-child{justify-content:flex-end}
/* ⛔ KEINE eigene Groesse fuer den Satz auf dem Scrub-Weg. Hier stand
   `clamp(56px,9.4vw,168px)`, solange er auf einer Mintflaeche stand. Auf dem
   Schlussbild des Films reicht er damit in den gruenen Lichtausbruch hinein,
   und „Opportunity" hielt dort 2,64:1 - genau der Grund, aus dem die 7,9vw
   oben ueberhaupt dastehen. */

.rollmarke{position:absolute;right:var(--rand);bottom:28px;z-index:3;
  display:flex;align-items:center;gap:12px;
  font-size:14px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dark)}
.rollstrich{width:1px;height:24px;background:var(--mint);flex:none}
/* Am Ende der Reise hat der Hinweis seine Arbeit getan. */
.hero.unten .rollmarke{opacity:0}

/* ------------------------------------------------------------ Blatt / Naht */

/* Die hellen Blaetter liegen ueber dem klebenden Hero. `z-index:1` ist die
   ganze Mechanik der Blattwirkung - kein Pin, kein abgefangener Scroll. */
.blatt,.belege,.schluss{position:relative;z-index:1}
.blatt{background:var(--bg);color:var(--ink);padding:var(--sektion) 0}
/* Die Naht waechst beim Hereinrollen aus der Mitte nach aussen. Eine Flaeche,
   kein Text - hier ist `transform` das Mittel, nicht Deckkraft. */
.blatt::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--mint);transform:scaleX(var(--naht,1))}
.belege{background:var(--ink);padding:var(--sektion) 0}
.schluss{background:var(--ink-2);padding:120px 0 144px}

/* -------------------------------------------------------------- Die Felder */

/* Vier Kaertchen, zwei mal zwei. Roland am 16.10.2026: „ich meinte, es
   koennte lieber als kaertchen oder so dargestellt werden statt einfach
   text."

   ⛔ Kein laufender Marker hinter der Schrift. Die Fassung davor liess einen
   Mintkasten durch jede Zeile fahren; Roland: „die laufenden highlighting
   behind text bei den 4 pillars ekelhaft." Die Karte traegt ihre Farbe als
   Balken an der Oberkante - das ist die Callout-Mechanik des Designsystems,
   ein scharfes Rechteck mit 4px Balken, und sie steht still. */
.feld{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:64px}
.karte{position:relative;background:var(--surface);
  border:1px solid var(--divider);padding:32px 32px 36px;
  transition:transform var(--mo-quick) var(--mo-out),
             border-color var(--mo-quick) var(--mo-out)}
.karte::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--mint)}
.karte .nr{display:block;font-size:14px;font-weight:600;letter-spacing:.16em;
  color:var(--mint-text);font-variant-numeric:tabular-nums;margin-bottom:20px}
.dark .karte .nr{color:var(--mint)}
.karte h3{font-size:clamp(20px,2vw,26px);font-weight:650;letter-spacing:-.025em;
  line-height:1.15}
.karte p{margin-top:12px;font-size:15px;line-height:1.55;color:var(--muted);
  max-width:38ch}

/* ------------------------------------------------------------ Track Record */

.belegzahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
  margin-top:64px;padding-bottom:16px}
.belegzahl>b{display:block;font-size:clamp(32px,3.6vw,56px);font-weight:700;
  letter-spacing:-.03em;color:var(--mint-text);font-variant-numeric:tabular-nums}
.dark .belegzahl>b{color:var(--mint)}
.belegzahl>span{display:block;margin-top:8px;font-size:14px;color:var(--muted);
  letter-spacing:.02em}

.belegbloecke{margin-top:32px}
.belegblock{display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);
  gap:48px;padding:40px 0;border-top:1px solid var(--border)}
.belegkopf{display:flex;flex-direction:column;gap:8px}
.belegnr{font-size:14px;font-weight:600;letter-spacing:.16em;color:var(--mint-text);
  font-variant-numeric:tabular-nums}
.dark .belegnr{color:var(--mint)}
.belegkopf h3{font-size:clamp(19px,1.8vw,24px);font-weight:600;
  letter-spacing:-.02em;line-height:1.2}
.belegfeld{font-size:14px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}

.belegzeile{padding:16px 0;border-bottom:1px solid var(--divider);
  transition:transform var(--mo-quick) var(--mo-out)}
.belegzeile:last-child{border-bottom:0;padding-bottom:0}
/* Name links, Art des Kontakts rechts. Der Chip sagt, WAS mit dieser
   Organisation war - und jedes seiner Woerter steht in der Quellzeile, aus
   der er stammt. */
/* `.belegzeile>span` weiter unten setzt `display:block` und Nebentextfarbe -
   diese Zeile ist spezifischer und muss es sein, sonst steht der Chip unter
   dem Namen statt neben ihm. */
.belegzeile>.belegkopfzeile{display:flex;align-items:baseline;
  justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:0;color:inherit;font-size:inherit}
.belegzeile b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.art{flex:none;font-size:14px;font-weight:600;letter-spacing:.04em;
  padding:4px 8px;border:1px solid var(--mint-text);color:var(--mint-text)}
.dark .art{border-color:var(--mint);color:var(--mint)}
.belegzeile>span{display:block;margin-top:4px;font-size:14px;line-height:1.5;
  color:var(--muted);max-width:62ch}
.marken{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.marke-chip{display:inline-block;padding:4px 8px;font-size:14px;font-weight:600;
  letter-spacing:.06em;color:var(--on-dark);border:1px solid var(--border)}

.einschraenkung{margin-top:64px;max-width:76ch;
  font-size:14px;line-height:1.6;color:var(--muted);
  padding-top:16px;border-top:1px solid var(--divider)}

/* ----------------------------------------------------------------- Menschen */

.leute{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:64px}
/* Die drei stehen frueher untereinander als der Rest der Seite umbricht. Die
   Hausbruchstelle liegt bei 760px; dort ist eine der drei Spalten aber nur
   181px breit, und darin passt "Market access and partnerships" nicht mehr in
   eine Zeile. Gerechnet: fuer 14px Schrift braucht die laengste Zeile rund
   205px, also 3*205 + 2*32 Luecke + 2*48 Rand = 775px. Die Zahl unten hat
   dazu etwas Luft, und `check-passform.py` misst beide Seiten der Grenze. */
@media (max-width:860px){
  .leute{grid-template-columns:1fr;gap:0;margin-top:40px}
  /* Bild links ueber beide Zeilen, Name und Zeile rechts daneben. Ohne die
     ausdrueckliche Platzierung fuellt das Raster von selbst auf, und die
     Rollenzeile landet UNTER dem Bild in der 88px-Spalte - dort bricht
     „Institutions and strategic cooperation" auf drei Zeilen mit einem Wort
     allein am Ende. Am 16.10.2026 vom Satzpruefer gefunden, nachdem das
     Bild sein richtiges Seitenverhaeltnis bekommen hatte. */
  .mensch{padding:24px 0;display:grid;grid-template-columns:88px 1fr;
    gap:4px 16px;align-items:center;border-top:1px solid var(--divider)}
  .mensch img{grid-column:1;grid-row:1 / span 2;align-self:start}
  /* Beide Zeilen oben ausrichten. Ohne das teilen sich Name und Zeile die
     Hoehe des Bildes untereinander auf, und die Zeile steht 60px unter dem
     Namen statt unter ihm. */
  .mensch h3{grid-column:2;grid-row:1;align-self:center}
  /* Die Zeile laeuft ueber die GANZE Breite, nicht nur neben dem Bild.
     Bei 360px bleiben neben einer 88px-Spalte 216px, und darin bricht
     "Commercial development and capital" um. Unter Bild und Name stehen
     320px zur Verfuegung - und "unter dem Menschen" ist genau dort. */
  .mensch p{grid-column:1 / -1;grid-row:3;align-self:start;max-width:none;
    margin-top:12px}
  .mensch:last-child{border-bottom:1px solid var(--divider)}
  .platzhalter{height:auto;font-size:40px;align-items:center}
  .mensch h3{margin-top:0;font-size:22px}
  .mensch-nr{top:24px}
}
.mensch{position:relative;padding-top:28px;border-top:1px solid var(--divider);
  transition:transform var(--mo-quick) var(--mo-out)}
/* Fehlt das Portrait, steht hier eine Flaeche mit den Initialen. Nie ein
   erzeugtes Gesicht, nie ein Stockfoto. */
.platzhalter{display:flex;align-items:flex-end;height:180px;
  background:var(--surface);border:1px solid var(--divider);
  padding:16px;font-size:48px;font-weight:700;letter-spacing:-.04em;
  color:var(--border)}
/* `height:auto` ist hier kein Beiwerk. Die Attribute `width`/`height` am
   Bild sind praesentationale Hinweise und setzen eine feste Hoehe; ohne diese
   Zeile gewinnt sie gegen `aspect-ratio`, und am Telefon stand das Portrait
   88px breit und 550px hoch in seiner Spalte - gemessen am 16.10.2026.
   `check-portraits.py` misst seitdem das Seitenverhaeltnis der Box. */
/* Der Mensch steht freigestellt auf einer Flaeche, die UNTER seinem Scheitel
   beginnt - der Kopf steht also frei darueber. Die 18 % sind gemessen und
   nicht gewaehlt: `portraits.py` setzt den Scheitel auf 12,5 % der Bildhoehe,
   die Flaeche beginnt dahinter, und `check-portraits.py` misst, dass oberhalb
   der Kante wirklich Kopf steht und keine leere Flaeche. */
.portraet{position:relative;display:block}
.portraet::before{content:"";position:absolute;left:0;right:0;top:18%;bottom:0;
  background:var(--ink)}
.portraet[data-farbe="mint"]::before{background:var(--mint)}
.portraet[data-farbe="blue"]::before{background:var(--blue)}
.portraet[data-farbe="ink"]::before{background:var(--ink)}
.mensch img{position:relative;display:block;
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.mensch h3{margin-top:40px;font-size:clamp(20px,2.2vw,30px);font-weight:600;
  letter-spacing:-.025em}
.grad{font-size:14px;font-weight:500;color:var(--muted)}
.mensch p{margin-top:8px;font-size:14px;color:var(--muted);max-width:26ch}
.mensch-nr{position:absolute;top:28px;right:0;font-size:14px;color:var(--muted)}

/* ------------------------------------------------------------------ Schluss */

.schluss .grossatz{max-width:18ch}
.tat{margin-top:48px}

/* ---------------------------------------------------------- Impressum-Seite */

.rechtsseite{background:var(--ink)}
.rechtsbahn{padding-top:calc(var(--kopf) + 96px);padding-bottom:var(--sektion)}
.rechtsbahn .grossatz{margin-top:0;font-size:clamp(36px,4.4vw,64px)}
.rechtsbloecke{display:grid;grid-template-columns:repeat(2,1fr);gap:48px;
  margin-top:64px}
.rechtsblock{border-top:1px solid var(--border);padding-top:20px}
/* Der Datenschutz ist der fuenfte Block in einem zweispaltigen Raster.
   Ohne diese Zeile stuende er allein links und die halbe Zeile leer. */
.rechtsblock.breit{grid-column:1 / -1}
.rechtsblock h2{font-size:14px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mint-text);margin-bottom:12px}
.dark .rechtsblock h2{color:var(--mint)}
.rechtsblock p{font-size:15px;line-height:1.6;color:var(--on-dark);max-width:58ch}
.rechtsblock p+p{margin-top:8px}
.rechtszurueck{margin-top:64px;font-size:14px;font-weight:600}

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

footer{background:var(--ink);padding:32px 0;
  font-size:14px;letter-spacing:.04em;color:var(--muted)}
.fussbahn{display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap}
.fussbahn .marke{display:inline-flex;align-items:center;gap:12px;
  color:var(--on-dark)}
.fussbahn a{text-decoration:none}

/* ----------------------------------------------------------------- Blenden */

/* Der Startzustand steht NUR unter `.bewegt`, und die Klasse setzt
   bewegung.js. Ohne JavaScript, bei Datensparmodus und bei abbestellter
   Bewegung gibt es keinen Startzustand, also auch nichts, worin die Seite
   haengenbleiben koennte. Verschoben wird, nicht ausgeblendet. */
.bewegt .stufe{transform:translate3d(0,24px,0)}
/* Dieselbe Mechanik quer: die Belegzeilen kommen von links nach. Der
   Startzustand steht im Stilblatt und NICHT in einem `gsap.from()` - das setzt
   ihn sofort fuer alle, und wer per Anker oder Ende-Taste in die Seite
   springt, findet die Liste dauerhaft 16px neben ihrer Spalte. Am 15.10.2026
   im Telefonbild gesehen, nicht von einem Pruefer. */
.bewegt .schub{transform:translate3d(-16px,0,0)}

/* Der Fluchtweg beim Tabben. Auf dataprospect.de landeten 6 von 44
   Tabulator-Stopps auf einem Element, das noch in seinem Startzustand stand.
   Wer mit der Tastatur hineinfaehrt, bekommt die Flaeche sofort fertig. */
.stufe:focus-within,.schub:focus-within{transform:none!important}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bewegt .stufe,.bewegt .schub{transform:none}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* Hover nur dort, wo es einen Zeiger gibt - sonst bleibt die Hervorhebung auf
   dem Telefon nach dem Antippen haengen. */
@media (hover:hover) and (pointer:fine){
  .knopf:hover{transform:translateY(-2px);background:var(--on-dark)}
  .karte:hover{transform:translateY(-3px);border-color:var(--mint-text)}
  .belegzeile:hover{transform:translateX(4px)}
  .kopf.dark nav a:hover{color:var(--mint)}
  .dark .textruf:hover .rufpfeil{width:80px}
  .dark .fussbahn a:hover{color:var(--mint)}
}

/* ------------------------------------------------------------------- Telefon */

@media (max-width:760px){
  :root{--rand:20px; --sektion:64px}

  /* Die Leiste klebt, statt zu schweben. Fest ueber dem Bild verdeckte sie
     106 von 320 Pixeln des Bildbands - gemessen am 15.10.2026. */
  .kopf{position:sticky;background:var(--ink);border-bottom-color:var(--divider)}
  .kopfbahn{flex-wrap:wrap;height:auto;gap:8px;
    padding-top:12px;padding-bottom:12px}
  .kopf nav{order:3;width:100%;gap:20px;padding-top:8px;
    border-top:1px solid var(--divider)}
  .kopftat{margin-left:auto}

  /* Kein Scroll-Hero am Telefon. Ueber einem 16:9-Bild im Hochformat gibt es
     keine dunkle Flaeche, auf der Text 4,5:1 haelt (1,46:1 gemessen am
     14.10.2026), und ein Video waere auf einem Mobilnetz ohnehin der falsche
     Preis. Das Bild steht als eigenes Band ueber dem Satz - genau das meint
     der Skill mit "phone visitors see a beautifully designed still image".
     `scrub.js` steigt bei dieser Breite aus, also gibt es auch keine
     Anfrage an die Videodatei. */
  .hero,.hero.scrubt{height:auto;min-height:0}
  .buehne{position:relative;height:auto;min-height:0;display:block;
    overflow:visible}
  .film{position:relative;height:auto;aspect-ratio:39/32;overflow:hidden}
  /* Das Bild bleibt absolut im Band. Relativ gesetzt bestimmt SEIN
     Seitenverhaeltnis (16:9) die Hoehe, und das `aspect-ratio:39/32` des
     Bandes verpufft - gemessen am 15.10.2026: 220px statt 320px, und der
     Verbindungspunkt lag zu hoch. */
  .standbild{object-position:var(--px) var(--py)}
  .schleier{background:linear-gradient(to top,var(--ink) 2%,
            rgba(13,17,23,.5) 22%,rgba(13,17,23,0) 54%)}
  .baender{position:static;width:100%;padding:28px var(--rand) 40px}
  .hero:not(.scrubt) .band:last-child{position:static;inset:auto;display:block}
  .band::before{display:none}
  .hero h1{font-size:clamp(44px,11.5vw,76px);letter-spacing:-.045em}
  .unter{margin-top:24px}
  .rollmarke{display:none}

  .grossatz{font-size:clamp(34px,8.6vw,56px)}
  .feld{grid-template-columns:1fr;gap:16px;margin-top:40px}
  .karte{padding:24px 24px 28px}
  .belegzahlen{grid-template-columns:1fr;gap:24px;margin-top:40px}
  .belegblock{grid-template-columns:1fr;gap:20px;padding:28px 0}
  .belegkopf{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:12px}
  .belegfeld{width:100%}
  .belegzeile>span{font-size:14px}
  .einschraenkung{margin-top:40px}

  .schluss{padding:72px 0}
  .tat{margin-top:32px}

  .rechtsbahn{padding-top:48px}
  .rechtsbloecke{grid-template-columns:1fr;gap:32px;margin-top:40px}

  .fussbahn{flex-wrap:wrap;gap:12px}
}

/* Ein kurzes, breites Fenster (Laptop im Zug, geteilter Bildschirm). */
@media (min-width:761px) and (max-height:760px){
  .hero{min-height:560px}
  .hero h1{font-size:clamp(48px,6.6vw,104px)}
  .herobahn{padding-top:calc(var(--kopf) + 24px)}
  .herounten{margin-top:24px}
  .herosatz{padding-bottom:24px}
}

/* ---- Der Kontaktdialog ------------------------------------------------
   `<dialog>` bringt Fokusfalle, Escape und den Hintergrund-Riegel selbst mit.
   Nichts davon wird nachgebaut - ein eigener Nachbau hat genau die Fehler,
   die der Browser hier schon geloest hat.
   ⛔ Keine runde Ecke, kein Schatten: dieselbe Haerte wie der Rest. Tiefe
   entsteht ueber die Flaeche und die Haarlinie, nie ueber Weichzeichnung. */
.tafel{border:0;padding:0;width:min(560px,calc(100vw - 32px));
  max-height:min(86svh,780px);background:var(--surface);color:var(--ink)}
.tafel::backdrop{background:rgba(13,17,23,.72)}
.tafel form{display:block;padding:32px}
.tafelkopf{display:flex;align-items:flex-start;gap:16px;
  justify-content:space-between}
.tafel h2{font-size:clamp(22px,3.4vw,30px);font-weight:700;letter-spacing:-.02em;
  line-height:1.15;max-width:22ch}
/* 44px Trefferflaeche, ohne die Ausrichtung zu verlieren: ein blankes
   `display:inline-flex` schiebt das Zeichen nach links. */
.tafelzu{width:44px;height:44px;flex:0 0 44px;display:inline-flex;
  align-items:center;justify-content:center;border:1px solid var(--divider);
  background:var(--surface);color:var(--ink);font-size:22px;line-height:1;
  cursor:pointer}
.tafelzu:hover{background:var(--bg)}
.tafelunter{margin-top:12px;font-size:14px;color:var(--muted);max-width:46ch}
.tafelfelder{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.tafelfeld{display:flex;flex-direction:column;gap:8px}
.tafelfeld-weit{grid-column:1 / -1;margin-top:16px}
.tafelfeld label{font-size:14px;font-weight:500;color:var(--ink)}
.tafelfeld label span{color:var(--mint-text);margin-left:4px}
.tafelfeld input,.tafelfeld textarea{font:inherit;font-size:16px;color:var(--ink);
  background:var(--bg);border:1px solid var(--border);padding:12px;
  width:100%;min-height:44px}
.tafelfeld textarea{resize:vertical;min-height:96px;line-height:1.5}
.tafelfeld input:focus-visible,.tafelfeld textarea:focus-visible{outline:2px solid var(--ink);
  outline-offset:2px}
.tafelfeld .falsch{border-color:var(--risk)}
.tafelfehler{font-size:13px;color:var(--risk);min-height:0}
.tafelfehler:empty{display:none}
/* Der Honigtopf. NICHT `display:none` - manche Skripte ueberspringen genau
   das. Er steht ausserhalb des Bildes und ist fuer die Vorlesehilfe
   versteckt. */
.tafelfalle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.tafelfuss{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:28px;padding-top:24px;border-top:1px solid var(--divider)}
.tafelmeldung{font-size:14px;margin:0}
.tafelmeldung:empty{display:none}
.tafelmeldung.gut{color:var(--good)}
.tafelmeldung.schlecht{color:var(--risk)}
.tafelmeldung a{color:inherit}

@media (max-width:560px){
  .tafel form{padding:24px 20px}
  /* Zwei Spalten auf 320px Breite heisst zwei halbe Felder. */
  .tafelfelder{grid-template-columns:1fr;gap:16px}
  .tafelfuss{margin-top:24px;padding-top:20px}
}