/* Laufweiten: Ziffern eng, Woerter luftiger.

   Die grossen Zahlen bleiben auf den Werten des Entwurfs — Kapitelziffer
   -0,07em, Riesenzahl -0,06em, Kennzahlen -0,045em. Dort ist die Enge
   Absicht und traegt.

   Der Fliesstext in Displaygroesse bekommt je 0,01em mehr Luft: bei 89 px
   sind -0,04em rund 3,6 px, und in Gewicht 800 beruehren sich die
   Buchstaben dann sichtbar. */

/* Version 2 — Bänder, Video-Hero, Laufbänder.
   Konzept: docs/konzept-v2.md

   Der Bandwechsel ist Gliederung: Rot fuer Menschen und Alltag,
   Ink fuer die harten Vergleiche, Weiss fuer die Daten. */

/* ---------- Display-Grade ---------- */

.t-display,
.t-heading-lg,
.t-heading {
  font-weight: var(--weight-display);
}

/* ---------- Vollflaechige Baender ---------- */

/* Rhythmus der Baender. Der Entwurf setzt 120 oben und 96 unten; hier
   etwas enger, weil die Seite sonst auseinanderfaellt — dieselbe Ordnung,
   nur dichter. Das Aussageband setzt seinen eigenen, flacheren Wert. */
.sektion {
  padding-block: clamp(56px, 7.4vw, 104px) clamp(48px, 6.2vw, 88px);
}

/* Auf dem Akzentband steht der Text dunkel — Weiss erreicht auf diesem
   Orange nur 3,13:1. Das dreht die Logik gegenueber DB Rot um. */
.sektion--akzent {
  background: var(--akzent);
  color: var(--akzent-text);
}
.sektion--ink {
  background: var(--band-ink);
  color: var(--band-ink-text);
}
.sektion--weiss { background: var(--color-canvas); }

/* Auf farbigen Baendern erbt alles die Bandfarbe. Nur die leisen Toene
   werden gesetzt — sonst bliebe Graphit auf Rot stehen, und das faellt
   mit 4,12:1 durch. */
.sektion--akzent :is(h1,h2,h3,h4,p,span,li,td,th,strong,figcaption),
.sektion--ink :is(h1,h2,h3,h4,p,span,li,td,th,strong,figcaption) {
  color: inherit;
}
/* Kein Leiseton auf dem Band: zwischen Textdunkel und Orange bleibt kein
   Ton, der sich abhebt und 4,5:1 haelt. Zuruecknahme laeuft deshalb ueber
   Groesse und Gewicht, nicht ueber Farbe. */
/* 0,84 statt 0,78: nachgerechnet ergab 0,78 nur 4,38:1 gegen das Band und
   verfehlte damit die 4,5 fuer kleinen Text. 0,84 liegt bei 4,84:1 und
   nimmt die Zeile immer noch sichtbar zurueck. */
.sektion--akzent :is(.t-caption, .leise, .quellen__eintrag, .kpi__kontext,
                     .chart-karte__quelle, .quellenzeile, .kapitel__nummer) {
  color: var(--akzent-text);
  opacity: 0.84;
}
.sektion--ink :is(.t-caption, .leise, .quellen__eintrag, .kpi__kontext,
                  .chart-karte__quelle, .quellenzeile, .kapitel__nummer) {
  color: var(--band-ink-leise);
}
.sektion--akzent .t-kicker { color: var(--akzent-text); }
.sektion--ink .t-kicker { color: var(--band-ink-leise); }

/* Karten auf farbigem Grund: keine weisse Flaeche, sondern eine
   Abstufung der Bandfarbe. Sonst zerfaellt das Band in Kaesten. */
/* Karten werden auf dem Band aufgehellt, nicht abgedunkelt — sonst
   verliert der dunkle Text seinen Grund. Weiss auf 24 Prozent ergibt
   #f28e54, der Text darauf 7,75:1. */
/* Keine gefuellten Kaesten mehr, auf keinem Band. Der Entwurf kennt nur
   offene Bloecke unter einer Linie und Kacheln mit 2-px-Kontur; eine
   aufgehellte Flaeche ohne Seitenpolsterung liess den Text an der Kante
   kleben. Die Linien tragen die Bandfarbe. */
.sektion--akzent :is(.karte, .block, .chart-karte, .kartenblock, .prozesskette,
                     .zusatzblock, .kpi, .fussnote, .kachel, .stat),
.sektion--ink :is(.karte, .block, .chart-karte, .kartenblock, .prozesskette,
                  .zusatzblock, .kpi, .fussnote, .kachel, .stat) {
  background: transparent;
  border-color: currentColor;
}
.sektion--akzent :is(.karte, .block, .prozesskette, .zusatzblock, .kpi),
.sektion--ink :is(.karte, .block, .prozesskette, .zusatzblock, .kpi) {
  border-top-color: currentColor;
}

/* Der dunkle Block setzt sich auf dem Akzentband durch einen echten
   Sprung ab, nicht durch Abdunkeln der Flaeche. */
.sektion--akzent .highlight {
  background: var(--band-ink);
  color: var(--band-ink-text);
}
.sektion--akzent .highlight :is(h1,h2,h3,p,span) { color: var(--band-ink-text); }
.sektion--ink .highlight { background: rgba(0, 0, 0, 0.34); }
.sektion--akzent .legende__zeile,
.sektion--ink .legende__zeile { border-bottom-color: currentColor; }

/* ---------- Filmbuehne ---------- */

/* Ein hoher Abschnitt mit klebendem Kern. Die Hoehe ist der Weg, den die
   drei Zustaende zum Ablaufen brauchen — bei weniger als 260svh geht das
   Oeffnen in einem Wisch vorbei, bei mehr klebt der Film zu lange. */
.filmbuehne {
  position: relative;
  height: 300svh;
  background: var(--band-ink);
}

.filmbuehne__kleber {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--band-ink);
  color: var(--band-ink-text);
}

/* Nur dieser Traeger wird skaliert. Schleier und Text behalten ihre
   Groesse, sonst wuerde die Headline mitwachsen. */
.filmbuehne__bild {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform-origin: 50% 50%;
  will-change: transform;
}

.filmbuehne__film,
.filmbuehne__standbild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.filmbuehne__standbild { display: none; }

/* Wie stark das Bild beim Oeffnen waechst. Steht hier, weil die Regel
   vom Seitenverhaeltnis abhaengt — parallax.js liest den Wert aus. */
.filmbuehne { --film-wachstum: 0.075; }

/* Zwei Filmebenen uebereinander: die stumme Schleife und der ganze Film.
   Der Wechsel laeuft ueber Deckkraft — beide Ebenen bleiben an ihrem
   Platz, es wird nichts umgehaengt und nichts neu geladen. */
.filmbuehne__film--voll { opacity: 0; }
.filmbuehne--offen .filmbuehne__film--voll { opacity: 1; }
.filmbuehne--offen .filmbuehne__film--schleife { opacity: 0; }
/* Nach dem Abspann zurueck auf die Schleife, ohne den Zustand zu verlassen. */
.filmbuehne--offen.filmbuehne--zuende .filmbuehne__film--voll { opacity: 0; }
.filmbuehne--offen.filmbuehne--zuende .filmbuehne__film--schleife { opacity: 1; }

.filmbuehne__film { transition: opacity 420ms ease; }
@media (prefers-reduced-motion: reduce) {
  .filmbuehne__film { transition: none; }
}

/* Der grosse Schleier gibt dem Bild nur noch Tiefe. Den Grund fuer den
   Text traegt der Verlauf am Textblock selbst — er muss dort sitzen, wo
   der Text steht, und der wandert je nach Fenster zwischen 3 und 40
   Prozent der Hoehe. Ein bildschirmbezogener Verlauf kann das nicht
   bedienen: er waere oben zu dunkel oder unten zu hell. */
.filmbuehne__schleier {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(17,17,17,0.26) 0%,
    rgba(17,17,17,0.10) 30%,
    rgba(17,17,17,0.16) 100%);
}

/* Auf hochkant stehenden Schirmen wird aus dem vollflaechigen Film ein
   Ausschnitt: bei 375 x 812 sind von einem 16:9-Bild noch 26 Prozent zu
   sehen, drei Viertel liegen ausserhalb. Sobald das Fenster schmaler ist
   als 4:3, laeuft der Film deshalb in seinem eigenen Format, mittig auf
   dunklem Grund.

   Die Schleife im ersten Zustand bleibt formatfuellend — sie ist
   Hintergrund hinter der Headline, dort ist der Ausschnitt richtig.

   Das Wachsen beim Oeffnen entfaellt: es wuerde den nun vollstaendig
   sichtbaren Film wieder an den Seiten beschneiden. */
@media (max-aspect-ratio: 4 / 3) {
  .filmbuehne { --film-wachstum: 0; }
  .filmbuehne--offen .filmbuehne__film--voll { object-fit: contain; }
}

/* ---------- Text im ersten Zustand ---------- */

.filmkopf {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  color: var(--band-ink-text);
  padding: clamp(28px, 5vw, 64px);
  will-change: transform, opacity;
}

/* Der Text steht ueber dem Film und muss hell bleiben. Die Typo-Rollen
   bringen ihre eigene Farbe fuer hellen Grund mit (.t-display ist
   Graphit) — hier erbt alles die Bandfarbe. Beim Umbau auf die Buehne
   hatte der Kopf diese Vererbung verloren und die Headline stand dunkel
   im Bild. */
.filmkopf :is(h1, h2, h3, h4, p, span, strong) { color: inherit; }
/* Auch die Dachzeile hell. Der graue Leiseton braeuchte ueber einem hellen
   Filmbild 0,83 Schleier fuer seine 4,5:1 — weisser Text nur 0,61. Das
   waere ein sehr dunkles Bild fuer eine Nuance. Zurueckgenommen wird die
   Zeile jetzt ueber Deckkraft statt ueber einen eigenen Ton: 0,82 ergibt
   auf dem Grund 4,92:1 und haelt damit die 4,5. Bei 0,70 waeren es 4,08. */
.filmkopf .t-kicker { color: inherit; opacity: 0.82; }

/* Der Grund fuer den Text. Er haengt am Textblock, nicht am Bildschirm —
   nur so sitzt er immer richtig, egal wie hoch der Text gerade baut.

   Ueber die volle Breite: die frueherere Fassung war auf die Inhaltsbreite
   begrenzt und stand als sichtbarer Kasten im Bild.

   Die Rampe laeuft in Pixeln, nicht in Prozent. 150 px oberhalb der
   Polsterung reichen immer aus, damit der Verlauf fertig ist, bevor die
   Dachzeile beginnt — unabhaengig davon, wie hoch der Block insgesamt ist.

   0,66 an der Dachzeile ergibt zusammen mit dem grossen Schleier 0,70 und
   damit 6,35:1 fuer den Text, selbst wenn das Filmbild dort rein weiss
   waere. Allein traegt der Verlauf immer noch 5,47:1. */
.filmkopf::before {
  content: '';
  position: absolute;
  inset: -150px 0 0 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(17,17,17,0) 0,
    rgba(17,17,17,0.66) 150px,
    rgba(17,17,17,0.72) 60%,
    rgba(17,17,17,0.78) 100%);
  pointer-events: none;
}

.filmkopf__inhalt {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(16px, 2vw, 26px);
  max-width: var(--page-max-width);
  margin-inline: auto;
  width: 100%;
}

.filmkopf__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 2px solid rgba(255,255,255,0.4);
  padding-top: 16px;
}

/* Stopp-Taste: Bewegtbild ueber fuenf Sekunden muss anhaltbar sein,
   siehe docs/barrierefreiheit.md */
.filmkopf__stopp {
  font: inherit;
  font-family: var(--font-mono);
  font-size: var(--text-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 0;
  padding: 9px 16px;
  cursor: pointer;
}
.filmkopf__stopp:hover { background: rgba(255,255,255,0.14); }

/* ---------- Hinweis im dritten Zustand ---------- */

.filmbuehne__hinweis {
  position: absolute;
  inset: auto 0 clamp(22px, 4vh, 44px) 0;
  z-index: 3;
  margin: 0;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--text-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--band-ink-text);
  pointer-events: none;
}

/* Eigener Grund, weil der grosse Schleier im dritten Zustand weg ist und
   die Zeile sonst vor jedem beliebigen Bildinhalt stuende. Die zweite
   Haelfte des Films hat unten hellen Himmel.

   0,66 ist gerechnet, nicht geschaetzt: ueber einem rein weissen Filmbild
   ergibt der Schleier rgb(98,98,98), darauf haelt der Text 5,47:1. Bei
   0,60 waeren es 4,42:1 — knapp darunter. Der Grund verblasst mit dem
   Hinweis, weil er an dessen Deckkraft haengt. */
.filmbuehne__hinweis::before {
  content: '';
  position: absolute;
  inset: -72px 0 -44px 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(17,17,17,0) 0%,
    rgba(17,17,17,0.66) 62%,
    rgba(17,17,17,0.66) 100%);
  pointer-events: none;
}

/* Auf schmalen Schirmen stossen die zentrierte Zeile und die Leiste
   rechts unten aneinander. Dann rueckt die Zeile darueber. */
@media (max-width: 760px) {
  .filmbuehne__hinweis { bottom: clamp(74px, 12vh, 96px); }
}

/* Der Pfeil ist Dekor — der Text daneben sagt dasselbe. */
.filmbuehne__pfeil {
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -4px;
  animation: filmbuehne-tippen 1.9s ease-in-out infinite;
}

@keyframes filmbuehne-tippen {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50%      { transform: rotate(45deg) translate(3px, 3px); }
}

/* ---------- Laufleiste am unteren Rand ---------- */

/* Liegt auf der Unterkante der Buehne, ueber die ganze Breite. Nur im
   geoeffneten Zustand sichtbar — davor laeuft die stumme Schleife, deren
   Laenge niemanden interessiert. */
.filmbuehne__fortschritt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  height: 4px;
  /* Eigener Grund, weil die Leiste ohne Schleier auf beliebigem
     Bildinhalt liegt. Ueber einem rein weissen Bild ergibt 0,60
     rgb(112,112,112); die weisse Fuellung haelt dagegen 4,42:1 und damit
     die 3:1 fuer grafische Objekte. Bei 0,40 waeren es nur 2,35:1. */
  background: rgba(17, 17, 17, 0.6);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}
.filmbuehne--offen .filmbuehne__fortschritt { opacity: 1; }
/* Nach dem Abspann laeuft wieder die Schleife — dann sagt die Leiste nichts. */
.filmbuehne--offen.filmbuehne--zuende .filmbuehne__fortschritt { opacity: 0; }

.filmbuehne__fortschritt-fuellung {
  display: block;
  height: 100%;
  background: var(--band-ink-text);
  transform: scaleX(0);
  transform-origin: left center;
  /* 'timeupdate' kommt nur etwa viermal je Sekunde. Der lineare Uebergang
     fuellt die Luecken, sonst rueckt die Leiste sichtbar in Stufen vor. */
  transition: transform 280ms linear;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .filmbuehne__fortschritt { transition: none; }
  .filmbuehne__fortschritt-fuellung { transition: none; }
}

/* ---------- Bedienung rechts unten ---------- */

/* Pause und Ton fuer den ganzen Film. Nur im geoeffneten Zustand sichtbar —
   davor liegt die Stopp-Taste im Textblock. */
.filmbuehne__bedienung {
  position: absolute;
  right: clamp(16px, 3vw, 40px);
  bottom: clamp(16px, 3vh, 40px);
  z-index: 4;
  display: flex;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  /* visibility, nicht nur Deckkraft: sonst haengen die unsichtbaren Tasten
     im ersten Zustand weiter im Tabulator-Weg. Der Sprung auf hidden wird
     bis zum Ende des Ausblendens verzoegert, damit er nicht sichtbar ist. */
  visibility: hidden;
  transition: opacity 300ms ease, visibility 0s linear 300ms;
}
.filmbuehne--offen .filmbuehne__bedienung {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 300ms ease, visibility 0s;
}

.filmbuehne__taste {
  font: inherit;
  font-family: var(--font-mono);
  font-size: var(--text-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  /* Eigener Grund statt nur eines Rahmens: die Leiste steht ohne Schleier
     auf beliebigem Bildinhalt. 0,72 ergibt ueber einem rein weissen Bild
     rgb(84,84,84), darauf haelt der Text 6,82:1.
     Der Rand ist ein Bedienelement und braucht 3:1 gegen die Flaeche —
     bei 0,42 waeren es nur 2,75:1, bei 0,55 sind es 3,57:1. */
  color: var(--band-ink-text);
  background: rgba(17, 17, 17, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 0;
  padding: 9px 16px;
  cursor: pointer;
  min-width: 92px;
}
.filmbuehne__taste:hover { background: rgba(17, 17, 17, 0.88); }

@media (prefers-reduced-motion: reduce) {
  .filmbuehne__bedienung { transition: none; }
}

/* ---------- Ruhige Fassung ---------- */

/* Ohne Choreografie ist die Buehne ein gewoehnlicher Kopf in voller Hoehe:
   gleicher Text, gleiches Bild, nur unbewegt. */
@media (prefers-reduced-motion: reduce) {
  .filmbuehne { height: 100svh; }
  .filmbuehne__kleber { position: relative; }
  .filmbuehne__film { display: none; }
  .filmbuehne__standbild { display: block; }
  .filmkopf__stopp { display: none; }
  .filmbuehne__hinweis { display: none; }
  .filmbuehne__bedienung { display: none; }
  .filmbuehne__fortschritt { display: none; }
  .filmbuehne__film--voll { display: none; }
  .filmbuehne__pfeil { animation: none; }
}
[data-statisch] .filmbuehne { height: 100svh; }
[data-statisch] .filmbuehne__kleber { position: relative; }
[data-statisch] .filmbuehne__film { display: none; }
[data-statisch] .filmbuehne__standbild { display: block; }
[data-statisch] .filmkopf__stopp { display: none; }
[data-statisch] .filmbuehne__hinweis { display: none; }
[data-statisch] .filmbuehne__bedienung { display: none; }
[data-statisch] .filmbuehne__fortschritt { display: none; }
[data-statisch] .filmbuehne__film--voll { display: none; }

/* ---------- Laufband ---------- */

.laufband {
  display: flex;
  overflow: hidden;
  padding-block: clamp(10px, 1.4vw, 18px);
  border-block: 2px solid currentColor;
  background: var(--band-ink);
  color: var(--band-ink-text);
}
.laufband--akzent { background: var(--akzent); color: var(--akzent-text); }

/* Die Dauer setzt src/js/laufband.js aus der Spurlaenge, damit das Tempo
   unabhaengig von der Wortlaenge gleich bleibt. */
.laufband__spur {
  display: flex;
  flex: none;
  animation: laufband-schieben 30s linear infinite;
  will-change: transform;
}

.laufband__gruppe { display: flex; flex: none; }

.laufband__wort {
  font-family: var(--font-display);
  font-weight: var(--weight-laut);
  /* Groesse aus dem Entwurf. */
  font-size: clamp(30px, 4.4vw, 68px);
  line-height: 1;
  letter-spacing: -0.03em;
  padding-inline: 0.34em;
  white-space: nowrap;
}
/* Trenner wie im Entwurf: ein kleines Quadrat, kein Mittelpunkt. */
.laufband__wort::after { content: '▪'; padding-left: 0.62em; opacity: 0.55; }

@keyframes laufband-schieben { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .laufband__spur { animation: none; }
}
[data-statisch] .laufband__spur { animation: none; }

/* ---------- Vollbildaussage ---------- */

.aussage {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  margin: 0;
}

/* ---------- Kennzahlen als Bloecke statt Kaertchen ---------- */

.zahlenband {
  display: grid;
  gap: clamp(24px, 3vw, 48px);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.zahlenblock {
  display: grid;
  gap: 10px;
  align-content: start;
  border-top: 3px solid currentColor;
  padding-top: clamp(14px, 1.6vw, 22px);
}
.zahlenblock .kpi__wert {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: 0;
}
.zahlenblock .kpi__label {
  font-size: var(--text-subheading);
  color: inherit;
}

/* ---------- Kapitelkopf ---------- */

/* Raster aus dem Entwurf. minmax(0, …) auf beiden Spalten ist noetig:
   mit 'auto 1fr' konnte die Textspalte nicht unter ihre Inhaltsbreite
   schrumpfen und schob 133 px ueber den rechten Rand hinaus. */
.kapitelkopf {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr);
  gap: clamp(16px, 3.4vw, 48px);
  align-items: start;
}
.kapitelkopf__text { display: grid; gap: clamp(12px, 1.4vw, 20px); min-width: 0; }
.kapitelkopf__nr {
  font-family: var(--font-display);
  font-weight: var(--weight-laut);
  /* Werte aus dem Entwurf. Der negative linke Rand haengt die Ziffer
     optisch an die Kante — sonst steht sie durch ihre Seitenlager
     eingerueckt. */
  font-size: clamp(160px, 20vw, 300px);
  line-height: 0.8;
  letter-spacing: -0.07em;
  margin-left: -0.05em;
  color: var(--akzent);
}

/* Kapitelheadline, Werte aus dem Entwurf. */
.kapitelkopf__text > .t-heading-lg {
  font-size: clamp(38px, 6.2vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  font-weight: var(--weight-display);
}

/* Grosse Displaytypo und deutsche Komposita vertragen sich schlecht:
   "Schienenverkehrsleistung" ist bei 89 px breiter als die Spalte und
   schob 127 px ueber den rechten Rand.

   Getrennt wird deshalb — aber nur, wo es noetig ist. 'anywhere' zusammen
   mit 'hyphens: auto' liess den Browser auch dann im Wort trennen, wenn
   direkt daneben ein Leerzeichen lag: aus "Wer hinter diesen Zahlen"
   wurde "Zah-len". 'break-word' greift erst, wenn ein Wort allein nicht
   in die Zeile passt, und die Mindestlaenge haelt kurze Woerter ganz.
   14 Zeichen trennt "Schienenverkehrsleistung" (24), aber nie "Zahlen". */
:is(.kapitelkopf__text > .t-heading-lg,
    .aussageband__satz,
    .prozessband__satz,
    .video__headline,
    .seitenkopf__titel,
    .hero__einheit) {
  hyphens: auto;
  /* 10 statt 14: "Treibhausgase" hat 13 Zeichen und lag damit unter der
     Schwelle — die Trennung war verboten, der harte Umbruch griff und
     liess ein einzelnes "e" auf der naechsten Zeile stehen. Mit 4 statt
     6 und 5 als Mindestrest ist auch "Treibhaus-gase" erlaubt. */
  hyphenate-limit-chars: 10 4 4;
  overflow-wrap: break-word;
  text-wrap: pretty;
}
/* 0,62 statt 0,55: die Ziffer ist gross, braucht also nur 3:1 — bei 0,55
   waren es 2,81:1. 0,62 liegt bei 3,24:1 und bleibt zurueckgenommen. */
.sektion--akzent .kapitelkopf__nr { color: var(--akzent-text); opacity: 0.62; }
.sektion--ink .kapitelkopf__nr { color: var(--band-ink-leise); }

@media (max-width: 720px) {
  .kapitelkopf { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- Fussbereich ---------- */

/* Die Seite endete bisher ohne Abschluss. Signal-Band mit dem Namen
   links und der Einordnung rechts, wie im Entwurf. */
.seitenfuss {
  background: var(--akzent);
  color: var(--akzent-text);
  border-top: 3px solid var(--akzent-text);
  padding-block: clamp(26px, 3vw, 40px);
}
.seitenfuss__raster {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: clamp(14px, 2vw, 24px);
  flex-wrap: wrap;
}

/* Impressum und Kontakt mittig zwischen Name und Einordnung. */
.seitenfuss__nav {
  display: flex;
  gap: clamp(18px, 2.4vw, 32px);
  flex: 1 1 auto;
  justify-content: center;
}
.seitenfuss__link {
  font-family: var(--font-mono);
  font-size: var(--text-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.seitenfuss__link:hover { text-decoration-thickness: 2px; }

/* Auf schmalen Schirmen bricht die Zeile; dann sollen die Verweise nicht
   halb links kleben, sondern die eigene Zeile fuellen. */
@media (max-width: 700px) {
  .seitenfuss__raster { justify-content: flex-start; }
  .seitenfuss__nav { flex-basis: 100%; justify-content: flex-start; }
}

/* ---------- Seitenleiste rechts ---------- */

/* Fest am rechten Rand, mittig in der Hoehe. Aufrecht gedreht, damit sie
   schmal bleibt und dem Inhalt keine Breite nimmt. */
.nebennav {
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 40;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
}
.nebennav__liste {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nebennav__link {
  display: block;
  padding: clamp(14px, 1.6vw, 20px) clamp(9px, 0.9vw, 12px);
  font-family: var(--font-mono);
  font-size: var(--text-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  text-decoration: none;
  /* Eigener Grund, weil die Leiste ueber Baendern jeder Farbe steht —
     ueber dem Film genauso wie ueber Weiss. Heller Text auf Ink
     traegt 16,26:1, die aktive Seite auf Signal 5,93:1. */
  color: var(--band-ink-text);
  background: var(--band-ink);
}
.nebennav__link:hover,
.nebennav__link[aria-current='page'] {
  background: var(--akzent);
  color: var(--akzent-text);
}
.nebennav__link:focus-visible { outline-offset: -4px; }

/* Unter 1100 px ist zu wenig Platz — dort tragen die Verweise im Fuss. */
@media (max-width: 1100px) {
  .nebennav { display: none; }
}
.seitenfuss__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: -0.03em;
}
.seitenfuss__zusatz {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
}

/* ---------- Fotostreifen ---------- */

/* Ein Foto ueber die volle Breite als Pause zwischen zwei Abschnitten.
   Der Entwurf setzt 56vh mit 360 px Mindesthoehe. */
.fotostreifen {
  position: relative;
  height: 56svh;
  min-height: 300px;
  max-height: 620px;
  overflow: hidden;
  background: var(--band-ink);
}
.fotostreifen__bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Kennzahlenband ---------- */

/* Drei Zahlen unter einer durchgehenden Linie, durch feine Striche
   getrennt. Im Kapitel standen sie als Kaertchen und gingen unter. */
.kennzahlenband { padding-block: clamp(48px, 5.6vw, 80px) clamp(48px, 6.2vw, 88px); }

.zahlenraster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 3px solid currentColor;
}
.zahlenraster__feld {
  padding: clamp(18px, 2vw, 28px) clamp(18px, 2.2vw, 32px) 0 0;
  border-right: 1px solid var(--color-mist);
}
.zahlenraster__feld:last-child { border-right: 0; padding-right: 0; }
.zahlenraster__feld:not(:first-child) { padding-left: clamp(18px, 2.2vw, 32px); }

.zahlenraster__wert {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(38px, 4.6vw, 72px);
  line-height: 0.9;
  letter-spacing: -0.045em;
}
.zahlenraster__label {
  display: block;
  margin-top: clamp(10px, 1.1vw, 14px);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: var(--weight-medium);
  line-height: 1.35;
}
.zahlenraster__kontext {
  display: block;
  margin-top: 6px;
  font-size: var(--text-caption);
  line-height: 1.45;
  color: var(--color-slate);
}

/* Der Zusatzblock ist eine zweite Reihe mit eigener Dachzeile und
   Signal-Linie — im Entwurf klar vom ersten Raster abgesetzt. */
.kennzahlenband__zusatz { margin-top: clamp(40px, 5vw, 72px); }
.kennzahlenband__zusatz .t-kicker { margin-bottom: clamp(14px, 1.6vw, 22px); }
.zahlenraster--zweite {
  border-top-color: var(--akzent);
  gap: clamp(18px, 2.2vw, 32px);
}
.zahlenraster--zweite .zahlenraster__feld { border-right: 0; padding-inline: 0; }
.zahlenraster--zweite .zahlenraster__wert { font-size: clamp(32px, 3.8vw, 60px); }

@media (max-width: 760px) {
  .zahlenraster { grid-template-columns: 1fr; }
  .zahlenraster__feld {
    border-right: 0;
    padding-inline: 0;
    padding-block: clamp(16px, 3vw, 24px);
    border-bottom: 1px solid var(--color-mist);
  }
  .zahlenraster__feld:last-child { border-bottom: 0; }
}

/* ---------- Prozessband ---------- */

.prozessband { padding-block: clamp(52px, 6.4vw, 88px); }
.prozessband__satz {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(32px, 4.8vw, 76px);
  line-height: 0.94;
  letter-spacing: -0.03em;
  max-width: 20ch;
}
.prozessband__reihe {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: clamp(32px, 4.4vw, 60px);
  border-top: 1px solid var(--band-ink-linie);
  list-style: none;
  padding: 0;
}
.prozessband__schritt {
  padding: clamp(16px, 1.8vw, 24px) clamp(12px, 1.4vw, 20px) 0;
  border-right: 1px solid var(--band-ink-linie);
}
.prozessband__schritt:first-child { padding-left: 0; }
.prozessband__schritt:last-child { border-right: 0; padding-right: 0; }

.prozessband__nr {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--akzent);
}
.prozessband__titel {
  display: block;
  margin-top: clamp(10px, 1.2vw, 16px);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: var(--weight-medium);
}
.prozessband__text {
  display: block;
  margin-top: 8px;
  font-size: var(--text-caption);
  line-height: 1.5;
  color: var(--band-ink-leise);
}

/* Fuenf Spalten tragen unter 1000 px keine lesbare Zeile mehr. */
@media (max-width: 1000px) {
  .prozessband__reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prozessband__schritt { padding-inline: 0 clamp(12px, 2vw, 20px); }
}
@media (max-width: 560px) {
  .prozessband__reihe { grid-template-columns: 1fr; }
  .prozessband__schritt { border-right: 0; padding-inline: 0; padding-block: 20px 0; }
}

/* ---------- Videoabschnitt auf Ink ---------- */

/* Der Film steht am Ende auf dunklem Grund, wie im Entwurf — auf Weiss
   sass der schwarze Spieler als Fremdkoerper in der Flaeche.

   Zwei Klassen, weil '.video' in sections.css spaeter geladen wird und
   den Bandhintergrund sonst wieder auf Weiss zieht: heller Text stand
   dann mit 1,12:1 auf weissem Grund. */
.video.sektion--ink {
  background: var(--band-ink);
  color: var(--band-ink-text);
}
/* Der Videokopf hat eine Textbreite von 68ch geerbt — gemessen 653 von
   1200 px. Die Headline stand dadurch in einer schmalen Spalte und
   trennte sich zu einem Turm, waehrend rechts alles frei blieb. */
.video.sektion--ink .video__kopf { max-width: none; }
.video.sektion--ink .video__headline { margin-block: 0; }

/* Headline und Lead nebeneinander auf einer Grundlinie. */
.video__kopfzeile {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(20px, 3.2vw, 48px);
  align-items: end;
}
.video__headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(34px, 5.6vw, 92px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.video__lead {
  margin: 0 0 clamp(4px, 0.8vw, 10px);
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.45;
  color: var(--band-ink-leise);
  max-width: 38ch;
}
@media (max-width: 860px) {
  .video__kopfzeile { grid-template-columns: 1fr; align-items: start; }
}

/* Die Buehne laeuft ueber die volle Breite und traegt zuerst nur das
   Standbild mit dem Abspielknopf — wie im Entwurf. */
.video.sektion--ink .video__rahmen {
  position: relative;
  margin-top: clamp(34px, 4.6vw, 64px);
  /* Ohne das leitet das Seitenverhaeltnis aus sections.css die Breite aus
     der Hoehe ab — die Buehne war dadurch genau 1280 statt 1440 px. */
  aspect-ratio: auto;
  width: 100%;
  height: 80svh;
  min-height: 380px;
  max-height: 860px;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--band-ink);
}
.video.sektion--ink .video__player {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Signal-Kreis mit Dreieck. Der Knopf ist gross genug fuers Antippen und
   liegt mittig auf dem Standbild. */
.video__start {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(76px, 8vw, 112px);
  height: clamp(76px, 8vw, 112px);
  border: 0;
  border-radius: 50%;
  background: var(--akzent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.video__start:hover { background: var(--akzent-tief); }
.video__startpfeil {
  width: 0;
  height: 0;
  border-left: clamp(22px, 2.4vw, 34px) solid var(--band-ink);
  border-top: clamp(13px, 1.4vw, 20px) solid transparent;
  border-bottom: clamp(13px, 1.4vw, 20px) solid transparent;
  margin-left: clamp(5px, 0.6vw, 8px);
}
.video__start:hover .video__startpfeil { border-left-color: var(--color-canvas); }

/* ---------- Aussageband ---------- */

/* Ein Satz oder eine Zahl, vollflaechig, zwischen zwei Kapiteln. Vorher
   stand derselbe Text als dunkler Kasten im Kapitel und ging darin unter.

   Das Band traegt nur diese eine Sache und ist deshalb flacher als ein
   Kapitel: 88 statt 100 px Polsterung. */
.aussageband { padding-block: clamp(52px, 6.4vw, 88px); }

.aussageband__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(20px, 3.4vw, 64px);
  align-items: end;
}

.aussageband__satz {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(34px, 6.2vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.aussageband__text {
  margin: 0 0 clamp(4px, 0.8vw, 12px);
  max-width: 46ch;
  font-size: clamp(14.5px, 1.15vw, 17px);
  line-height: 1.5;
}

/* Unter 900 px untereinander — nebeneinander bliebe fuer die Einordnung
   keine lesbare Zeilenlaenge. */
@media (max-width: 900px) {
  .aussageband__raster { grid-template-columns: 1fr; align-items: start; }
}

/* ---------- Zug als Abschluss ---------- */

/* Version 1 hatte sieben gepinnte Sequenzen. Hier tritt die Lok noch
   einmal auf, am Seitenende, ohne Pinning und ohne Titelblock. */
.zugsequenz--abschluss { height: auto; background: var(--color-ash); }
.zugsequenz--abschluss .zugsequenz__buehne {
  position: static;
  height: auto;
  padding-block: clamp(40px, 6vw, 90px);
}
.zugsequenz--abschluss .zugsequenz__titel { display: none; }
.zugsequenz--abschluss .zug { position: relative; bottom: auto; }
.zugsequenz--abschluss .zugsequenz__gleis { display: none; }

/* ---------- Video hochkant ---------- */

/* Der Videoabschnitt am Seitenende: statt fester Hoehe das Format des
   Films. Bei 80svh und 375 px Breite waren nur 32 Prozent des Bildes zu
   sehen — mit 16:9 ist es vollstaendig da und ohne schwarze Balken.

   Muss ans Dateiende: die Grundregel fuer .video.sektion--ink
   .video__rahmen steht weiter oben mit derselben Spezifitaet, und bei
   Gleichstand gewinnt die spaetere Regel. Weiter vorne blieb diese hier
   wirkungslos. */
@media (max-aspect-ratio: 4 / 3) {
  .video.sektion--ink .video__rahmen {
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 16 / 9;
  }
  .video.sektion--ink .video__player { object-fit: contain; }
}