/* Halte der Kamerafahrt und Stimmen nach der Fahrt.
   Ohne Skript und bei reduzierter Bewegung: je Station eine Karte im Fluss der Seite, alles untereinander.
   Mit Gleitfahrt (html.halte-an): Der Halt liegt als dunkle Tafel fest über dem Bild und erscheint nur am Halt
   (Klasse an). Ein weicher Verlauf oben und das Dunkel der Tafel halten den Text auf jedem Bild lesbar, rundherum
   bleibt das Motiv frei. Zwischen den Halten ist das Bild leer, ausser Gebäudeplan und Buchen-Leiste.
   Lage der Tafel nach der Gestaltung im Gestaltungsbogen, je Format eine Regel:
   - Hochformat und schmale Bildschirme: voll breit, mittig zwischen Plan (oben) und Buchen-Leiste (unten).
   - Querformat ab 64rem: schwebend, rund 77 % breit (höchstens 84rem), mittig, auf sehr breiten Bildschirmen links
     der Mitte; Unterkante bei 80 % der Bildhöhe, auf niedrigen Bildschirmen tiefer bis knapp über die Leiste.
   - Niedrige Querformate (Handy quer): Band am unteren Rand wie bisher, dort zählt jede Zeile.
   Die Tafel endet immer vor dem Gebäudeplan und über der Buchen-Leiste.
   Bewegung nur über opacity und transform. */

:root {
  --halt-grund: 8, 12, 20;
  --halt-verlauf: 4rem;
  /* Oberer Rand des freien Bereichs für die Tafel: unter dem Plan, mindestens ein Zehntel der Bildhöhe. */
  --tafel-oben: max(var(--oben-frei), 10vh);
}

/* ---------- Halt als Karte (ohne Skript, reduzierte Bewegung) ---------- */

.halt {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'ort' 'titel' 'punkte' 'zahl' 'quelle';
  gap: 0.75rem;
  max-width: 52rem;
  margin: 0 var(--rand);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: var(--karte);
  border-radius: 16px;
}

@media (min-width: 77rem) {
  .halt {
    margin-left: calc((100% - var(--breite)) / 2 + var(--rand));
  }
}

.halt-ort {
  grid-area: ort;
  margin: 0;
}

/* Schriftstufe des Halts: 1, ausser der Halt passt bei grosser Systemschrift nicht zwischen Gebäudeplan und
   Buchen-Leiste. Dann setzt halte.mjs --halt-skala je Halt kleiner, bis der ganze Text sichtbar ist. */
.halt .halt-ort {
  font-size: calc(var(--halt-skala, 1) * 0.8125rem);
}

.halt-titel {
  grid-area: titel;
  margin: 0;
  max-width: 40rem;
  font-size: calc(var(--halt-skala, 1) * clamp(1.5rem, 1.05rem + 2.2vw, 2.875rem));
  line-height: 1.12;
  color: var(--text);
}

.halt-punkte {
  grid-area: punkte;
  margin: 0;
  padding-left: 1.2em;
  font-size: calc(var(--halt-skala, 1) * clamp(1rem, 0.95rem + 0.25vw, 1.1875rem));
  line-height: 1.45;
}

.halt-punkte li {
  margin: 0.3rem 0 0;
  padding-left: 0.2em;
}

.halt-punkte li:first-child {
  margin-top: 0;
}

.halt-punkte li::marker {
  color: var(--akzent-hell);
}

/* Kennzahl: grosse Zahl links, Text und Vergleich rechts daneben, darunter der Anteil als Balken. */
.halt-kennzahl {
  grid-area: zahl;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: 'wert text' 'wert basis' 'balken balken';
  column-gap: 1rem;
  row-gap: 0.2rem;
  align-items: end;
}

.halt-vergleich {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'text' 'basis';
}

/* Spanne ("30 bis 60 %") ist doppelt so breit wie ein Wert: auf schmalen Bildschirmen steht sie über dem Text,
   sonst bleibt für den Text nur ein schmaler Streifen. */
@media (max-width: 40rem) {
  .halt-kennzahl:has(.kennzahl-bis) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'wert' 'text' 'basis' 'balken';
  }
}

.kennzahl-wert {
  grid-area: wert;
  align-self: center;
  margin: 0;
  font-family: var(--schrift-titel);
  font-size: calc(var(--halt-skala, 1) * clamp(2.5rem, 1.7rem + 3.2vw, 4.25rem));
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--akzent-hell);
  white-space: nowrap;
}

.kennzahl-rund {
  display: block;
  font-size: 0.3em;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}

/* Spanne: zwei Zahlen brauchen fast doppelt so viel Breite wie eine. Kleinere Stufe, damit sie in die Kennzahlspalte
   der Tafel (höchstens 19rem) passt; niedrige Bildschirme setzen weiter unten ihre eigene, kleinere Stufe. */
.kennzahl-wert:has(.kennzahl-bis) {
  font-size: calc(var(--halt-skala, 1) * clamp(2.25rem, 1.4rem + 2.4vw, 3.25rem));
}

/* Spanne "30 bis 60": das Wort klein zwischen den Zahlen, damit die Kennzahl schmal bleibt. */
.kennzahl-bis {
  font-size: 0.42em;
  font-weight: 650;
  color: var(--text);
}

.kennzahl-text {
  grid-area: text;
  margin: 0;
  font-family: var(--schrift-titel);
  font-size: calc(var(--halt-skala, 1) * 1.0625rem);
  font-weight: 650;
  line-height: 1.25;
  color: var(--text);
}

.kennzahl-basis {
  grid-area: basis;
  margin: 0;
  font-size: calc(var(--halt-skala, 1) * 0.9375rem);
  line-height: 1.35;
  color: var(--text-leise);
}

.kennzahl-balken {
  grid-area: balken;
  position: relative;
  display: block;
  height: 6px;
  margin-top: 0.6rem;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(169, 184, 204, 0.3);
}

.kennzahl-balken::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--akzent);
  box-shadow: 0 0 10px rgba(204, 51, 0, 0.8);
  transform-origin: left center;
  transform: scaleX(var(--anteil, 1));
}

/* Ruhende Textfassung der Kennzahl für Screenreader (halte.mjs). */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.halt-quelle {
  grid-area: quelle;
  margin: 0;
  font-size: calc(var(--halt-skala, 1) * 0.875rem);
  line-height: 1.4;
  color: var(--text-leise);
}

.halt-quelle .quelle-betrieb {
  font-weight: 650;
  color: var(--text);
}

/* ---------- Halt mit Gleitfahrt ---------- */

/* Tafel mittig im freien Bereich: Ränder oben und unten gesetzt, Höhe nach Inhalt, Aussenabstand automatisch.
   Höchstens so hoch wie der freie Bereich; reicht er bei grosser Systemschrift nicht, verkleinert halte.mjs die
   Schrift dieses Halts. Senkrechte Masse in vh, nicht in Prozent: halte.mjs liest max-height als Pixelwert. */
.halte-an .halt {
  position: fixed;
  top: var(--tafel-oben);
  right: 0;
  bottom: var(--unten-frei);
  left: 0;
  /* Über allen Ebenen der eigenen Station, auch über dem Dunkel-Verlauf am Ende der Chefetage. */
  z-index: 1;
  max-width: none;
  height: fit-content;
  max-height: calc(100vh - var(--tafel-oben) - var(--unten-frei));
  margin: auto 0;
  padding: var(--halt-verlauf) calc(var(--rand) + var(--rechts-frei)) max(1.25rem, var(--halt-verlauf) * 0.6) var(--rand);
  align-content: end;
  background: linear-gradient(180deg, rgba(var(--halt-grund), 0) 0, rgba(var(--halt-grund), 0.86) var(--halt-verlauf), rgba(var(--halt-grund), 0.92) 100%);
  border-radius: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.halte-an .halt.an {
  opacity: 1;
  transition: opacity 0.6s ease 0.05s;
}

.halte-an .halt > * {
  transform: translateY(0.75rem);
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.halte-an .halt.an > * {
  transform: none;
}

.halte-an .halt .kennzahl-balken::before {
  transform: scaleX(0);
  transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s;
}

.halte-an .halt.an .kennzahl-balken::before {
  transform: scaleX(var(--anteil, 1));
}

/* Vor dem Start: Halte schon ausserhalb des Flusses, Sprungmarken landen schon am Halt. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  html:not(.buehne-an) .halt {
    position: fixed;
    opacity: 0;
    pointer-events: none;
  }

  html:not(.buehne-ruhig) .station,
  html:not(.buehne-ruhig) .station:nth-of-type(even) {
    scroll-margin-top: calc(50vh - var(--strecke) - 3.75rem);
  }
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (min-width: 80rem) {
  html:not(.buehne-ruhig) .station,
  html:not(.buehne-ruhig) .station:nth-of-type(even) {
    scroll-margin-top: calc(50vh - var(--strecke) - 1rem);
  }
}

/* Während einer Gleitfahrt blendet auch die Startkarte aus; zurück am Start erscheint sie wieder. */
.halte-an .hero > .rahmen {
  transition: opacity 0.4s ease;
}

.gleitet .hero > .rahmen {
  opacity: 0;
}

/* Sprungmarken landen genau am Halt: Kopfkarte der Station in der Bildschirmmitte. */
.halte-an .station {
  scroll-margin-top: calc(50vh - var(--strecke) - 3.75rem);
}

@media (min-width: 80rem) {
  .halte-an .station {
    scroll-margin-top: calc(50vh - var(--strecke) - 1rem);
  }
}

/* Breite Bildschirme: Überschrift über die ganze Breite des Bands, darunter Punkte links und Kennzahl rechts. */
@media (min-width: 64rem) {
  .halte-an .halt {
    --halt-verlauf: 5rem;
    grid-template-columns: minmax(0, 38rem) minmax(0, 19rem);
    grid-template-areas: 'ort ort' 'titel titel' 'punkte zahl' 'quelle zahl';
    column-gap: 3rem;
    row-gap: 0.85rem;
  }

  .halte-an .halt-titel {
    max-width: 52rem;
  }

  .halte-an .halt-kennzahl {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'wert' 'text' 'basis' 'balken';
    align-self: end;
  }
}

/* Querformat ab 64rem: schwebende Tafel. Breite rund 77 % (mindestens 60rem für die zwei Spalten, höchstens 84rem),
   waagrecht mittig, auf sehr breiten Bildschirmen höchstens 27rem vom linken Rand. Unterkante bei 80 % der Bildhöhe;
   ist das Bild für Tafel und Abstand zu niedrig (Platz für rund 36rem Tafel), rückt sie tiefer, nie unter die Leiste.
   Rechts endet sie vor dem Gebäudeplan, der Platz des Plans gehört deshalb nicht mehr in den Innenabstand. */
@media (min-width: 64rem) and (min-aspect-ratio: 1/1) and (min-height: 30.01rem) {
  .halte-an .halt {
    --tafel-breite: min(100% - 2 * var(--rand), max(77%, 60rem), 84rem);
    --tafel-boden: clamp(var(--unten-frei), 100vh - var(--tafel-oben) - 36rem, 20vh);
    right: auto;
    bottom: var(--tafel-boden);
    left: min(27rem, (100% - var(--tafel-breite)) / 2);
    width: var(--tafel-breite);
    max-height: calc(100vh - var(--tafel-oben) - var(--tafel-boden));
    margin: auto 0 0;
    padding-right: var(--rand);
  }
}

/* Niedrige Bildschirme im Querformat: zwei Spalten, kleinere Schrift, kurzer Verlauf, Band am unteren Rand über die
   ganze Breite (unter der Buchen-Leiste liegt nur der Innenabstand, kein Text).
   rem in Medienabfragen wächst mit der Systemschrift: Bei 150 % wären 36rem schon 864 px, ein Handy quer fiele in die
   einspaltige Regel für Hochformat. Deshalb gilt die Regel auch nach Seitenverhältnis (ab 6:5, wie 36 zu 30). */
@media (max-height: 30rem) and (min-width: 36rem), (max-height: 30rem) and (min-aspect-ratio: 6/5) {
  .halte-an .halt {
    --halt-verlauf: 1.25rem;
    top: auto;
    bottom: 0;
    height: auto;
    max-height: calc(100vh - var(--oben-frei));
    margin: 0;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-areas: 'ort zahl' 'titel zahl' 'punkte zahl' 'punkte quelle';
    column-gap: 1.5rem;
    row-gap: 0.4rem;
    padding-bottom: calc(var(--unten-frei) + 0.5rem);
  }

  .halte-an .halt-titel {
    font-size: calc(var(--halt-skala, 1) * 1.125rem);
  }

  .halte-an .halt-punkte {
    font-size: calc(var(--halt-skala, 1) * 0.875rem);
    line-height: 1.35;
  }

  .halte-an .halt-punkte li {
    margin-top: 0.15rem;
  }

  .halte-an .kennzahl-wert {
    font-size: calc(var(--halt-skala, 1) * 2.125rem);
  }

  .halte-an .kennzahl-text,
  .halte-an .kennzahl-basis,
  .halte-an .halt-quelle {
    font-size: calc(var(--halt-skala, 1) * 0.8125rem);
  }

  .halte-an .halt-quelle {
    align-self: end;
  }
}

/* Kleine Handys im Hochformat: etwas kleinere Schrift, damit alles über der Buchen-Leiste Platz hat.
   Niedrige Querformate stehen in der Regel davor, nicht hier. */
@media (max-height: 44rem) and (max-width: 35.99rem) and (max-aspect-ratio: 6/5), (min-height: 30.01rem) and (max-height: 44rem) and (max-width: 35.99rem) {
  .halte-an .halt {
    --halt-verlauf: 2.5rem;
    row-gap: 0.55rem;
  }

  .halte-an .halt-titel {
    font-size: calc(var(--halt-skala, 1) * 1.3125rem);
  }

  .halte-an .halt-punkte {
    font-size: calc(var(--halt-skala, 1) * 0.9375rem);
    line-height: 1.38;
  }

  .halte-an .kennzahl-wert {
    font-size: calc(var(--halt-skala, 1) * 2.25rem);
  }

  .halte-an .kennzahl-text {
    font-size: calc(var(--halt-skala, 1) * 0.9375rem);
  }

  .halte-an .kennzahl-basis,
  .halte-an .halt-quelle {
    font-size: calc(var(--halt-skala, 1) * 0.8125rem);
  }
}

@media (forced-colors: active) {
  .halt {
    border: 1px solid CanvasText;
  }
}

/* ---------- Stimmen nach der Fahrt ---------- */

.stimmen-zeilen {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  margin: 2.25rem 0 3.5rem;
}

.stimme-zeile {
  display: grid;
  gap: 1.25rem;
  align-items: center;
}

.stimme-zeile > .stimme {
  margin: 0;
  padding: 0;
  background: none;
  border-left: 0;
  border-radius: 0;
}

.stimme-zeile > .stimme blockquote {
  margin-top: 0.25rem;
  padding-left: 1rem;
  border-left: 3px solid var(--akzent);
}

.zeile-text .dachzeile {
  margin-bottom: 0.4rem;
}

.zeile-text h3 {
  margin-bottom: 0.6rem;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height: 1.2;
}

.zeile-erklaerung {
  margin-bottom: 0.9rem;
}

.zeile-text .liste {
  margin: 0;
}

.zeile-text .liste li:last-child {
  margin-bottom: 0;
}

.stimmen-weitere {
  margin-bottom: 1rem;
}

@media (min-width: 56rem) {
  .stimme-zeile {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }

  /* Abwechselnd: in jeder zweiten Zeile steht das Video rechts. Im Dokument bleibt es vorne. */
  .stimme-zeile:nth-child(even) > .stimme {
    order: 2;
  }
}