/* ==========================================================================
   Fotorallye zur Modellbahn-Ausstellung
   Farbschema: Rot, Schwarz, Blau auf hellem Grund. Rahmen sind rot oder
   schwarz, Texte überwiegend schwarz, Blau dient als Hervorhebung.
   ========================================================================== */

:root {
  --rot: #d42a26;        /* RGB 212, 42, 38 */
  --rot-dunkel: #941d1b;
  --rot-hell: #f9ebe9;

  --blau: #1f4fbf;
  --blau-dunkel: #163a8c;
  --blau-hell: #e7eefb;

  /* Neutrale helle Flächen (Antworten, Bildgrund, Balken) */
  --hell: #f2f3f5;
  --hell-dunkel: #dfe2e7;

  --schwarz: #111111;
  --text: #111111;
  --grau: #333333;
  --gedimmt: #8a8a8a;
  --linie: #111111;
  --seite: #f2f3f5;
  --karte: #ffffff;
  --gruen: #2e7d32;
  --gruen-hell: #e6f2e6;

  --schrift: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --signage: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Courier New", "Lucida Console", monospace;
  --radius: 4px;
  --schatten: 0 1px 4px rgba(22, 21, 19, 0.16);

  /* Wie klein das Suchbild auf der Stationskarte höchstens werden darf,
     wenn ihm der Platz ausgeht (siehe .suchbild in body.spielseite).
     0 = darf beliebig klein werden; z. B. 160px setzt eine Untergrenze. */
  --suchbild-min-hoehe: 250px;
  --suchbild-max-hoehe: 50vh;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  background: var(--seite);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.6;
}

/* --- Kopfbereich: Wagen-Streifen-Look (Elfenbein + Orientrot) -------------- */
/* Nach Referenzfoto 1 (BR 103): heller Wagenkasten, dunkler Zierstreifen. */

.kopf {
  background: var(--hell);
  padding: 16px 20px 0;
}

.kopf__zeile {
  max-width: 1024px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
}

/* Pillenform nach dem DB-Logo auf dem Kursbuch-Cover (Referenzfoto 4):
   weißer Grund, roter Rand, stadionförmig abgerundet. */
.kopf__schild {
  flex: 0 0 auto;
  background: #fff;
  border: 3px solid var(--rot);
  border-radius: 999px;
  padding: 6px 16px;
}

.kopf__tafel { min-width: 0; }

.kopf__linie {
  margin: 0 0 2px;
  font-family: var(--signage);
  font-size: 21px;
  font-weight: 700;
  color: var(--schwarz);
}

.kopf__claim {
  margin: 0;
  font-family: var(--signage);
  font-size: 13px;
  color: var(--grau);
}

/* Zierstreifen unten am Wagenkasten: schwarze Trennlinie, dann Orientrot */
.kopf__streifen {
  height: 13px;
  background: var(--rot);
  border-top: 2px solid var(--schwarz);
}

/* --- Navigation ------------------------------------------------------------ */
/* Dunkle Leiste, Gleisnummern als rot umrandete Pillen (Logo-Motiv wieder
   aufgegriffen) statt einer erfundenen Blau-Palette. */

.navi {
  background: var(--schwarz);
  padding: 10px 20px;
}

.navi__liste {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.navi__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.navi__gleis {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--rot);
  color: var(--rot);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
}

.navi__ziel { white-space: nowrap; }

.navi__link:hover,
.navi__link:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.32);
}

.navi__link[aria-current="page"] {
  background: var(--rot);
  border-color: var(--rot);
  color: #fff;
}
.navi__link[aria-current="page"] .navi__gleis {
  background: #fff;
  border-color: #fff;
  color: var(--rot);
}

/* --- Inhalt --------------------------------------------------------------- */

.inhalt {
  max-width: 1024px;
  margin: 26px auto;
  padding: 0 20px;
}

/* Startseite hat keinen Kopfbereich - etwas Luft nach oben */
.inhalt--oben { margin-top: 34px; }

.karte {
  position: relative;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-top: 5px solid var(--rot);
  border-radius: 2px;
  box-shadow: var(--schatten);
  padding: 28px 30px 32px;
  margin-bottom: 26px;
}

#mit-lauf, #ohne-lauf { border-top-color: var(--schwarz); }

h1, h2, h3 {
  font-family: var(--signage);
  color: var(--schwarz);
  line-height: 1.25;
  margin-top: 0;
}

h1 {
  font-size: 30px;
  font-weight: 700;
  border-bottom: 3px solid var(--rot);
  padding-bottom: 10px;
  margin-bottom: 18px;
}

h2 { font-size: 22px; margin-bottom: 10px; font-weight: 700; }
h3 { font-size: 18px; margin-bottom: 6px; font-weight: 700; }

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

a { color: var(--blau); }
a:hover { color: var(--blau-dunkel); }

.hinweis {
  border-left: 5px solid var(--rot);
  background: var(--hell-dunkel);
  padding: 12px 16px;
  margin: 18px 0 0;
  font-size: 15.5px;
  color: var(--text);
}

.liste {
  margin: 0 0 14px;
  padding-left: 22px;
}
.liste li { margin-bottom: 6px; }

/* --- Startbild ------------------------------------------------------------ */

.startbild {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  margin: 0 auto 20px;
}

/* --- Schaltflächen ---------------------------------------------------------
   Nach der roten "Fahrkarten"-Box mit fetter weißer Schrift (Referenzfoto 5) */

.knopf {
  display: inline-block;
  padding: 12px 26px;
  border: 0;
  border-radius: var(--radius);
  background: var(--rot);
  color: #fff;
  font: inherit;
  font-family: var(--signage);
  font-weight: 700;
  letter-spacing: 0.3px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.knopf:hover,
.knopf:focus-visible { background: var(--rot-dunkel); color: #fff; }

.knopf:disabled {
  background: #c4c7cc;
  color: #fff;
  cursor: not-allowed;
}

/* --- Variantenwahl -------------------------------------------------------- */

.varianten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 20px 0 0;
}

.variante {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linie);
  border-top: 5px solid var(--schwarz);
  border-radius: var(--radius);
  background: var(--hell);
  padding: 18px 20px 20px;
}

.variante--schwer { border-top-color: var(--rot); }

.variante__name {
  font-size: 19px;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.variante__text {
  font-size: 15.5px;
  color: var(--grau);
  flex: 1 1 auto;
  margin-bottom: 16px;
}

.variante .knopf { align-self: flex-start; }

/* Auswählbare Varianten-Knöpfe auf der Startseite */
.variante--wahl {
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.variante--wahl:hover { background: var(--hell-dunkel); }

.variante--wahl .variante__name {
  display: block;
  font-family: var(--signage);
  font-size: 19px;
  font-weight: 700;
  color: var(--schwarz);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.variante--wahl .variante__text {
  display: block;
  font-size: 15.5px;
  color: var(--grau);
}

.variante--wahl[aria-pressed="true"] {
  border-color: var(--schwarz);
  background: var(--blau-hell);
  box-shadow: inset 0 0 0 2px var(--schwarz);
}
.variante--wahl.variante--schwer[aria-pressed="true"] {
  border-color: var(--rot);
  background: var(--rot-hell);
  box-shadow: inset 0 0 0 2px var(--rot);
}

.knopf--abfahrt {
  font-size: 18px;
  padding: 14px 34px;
}
.knopf--abfahrt::before {
  content: "\25B6";
  font-size: 13px;
  margin-right: 8px;
}

.knopf--zweit {
  background: transparent;
  border: 1px solid var(--schwarz);
  color: var(--schwarz);
}
.knopf--zweit:hover,
.knopf--zweit:focus-visible { background: var(--schwarz); color: #fff; }

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

/* --- Station ---------------------------------------------------------------
   Anzeigen im Fahrplan-Duktus: schwarze, fette, groß geschriebene Kopfzeile,
   wie die Stundenbalken der Aushangfahrpläne (Referenzfotos 6, 7). */

.fortschritt__kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}

.fortschritt__text {
  font-family: var(--signage);
  font-weight: 700;
  color: var(--schwarz);
  font-size: 15px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.fortschritt__zaehler { color: var(--grau); font-size: 15px; }

.fortschritt__balken {
  height: 10px;
  background: var(--hell-dunkel);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 24px;
}

.fortschritt__fuellung {
  height: 100%;
  width: 0;
  background: var(--rot);
  transition: width 0.4s ease;
}

.suchbild {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--hell);
}

.frage {
  font-size: 21px;
  font-weight: 700;
  color: var(--schwarz);
  margin: 0 0 16px;
}

/* --- Antworten ------------------------------------------------------------ */

.antworten {
  display: grid;
  gap: 10px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.antwort {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--hell);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.antwort:hover:not(:disabled),
.antwort:focus-visible:not(:disabled) {
  background: #fff;
  border-color: var(--schwarz);
}

.antwort__marke {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--schwarz);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}

/* Angetippt, aber noch nicht ausgewertet: neutrale Markierung.
   Doppelte Klasse, damit der Hover-Zustand sie nicht überschreibt. */
.antwort.antwort--gewaehlt,
.antwort.antwort--gewaehlt:hover {
  background: #d6e2f7;
  border-color: var(--blau-dunkel);
  box-shadow: inset 0 0 0 1px var(--blau-dunkel);
}

.antwort--richtig {
  background: var(--gruen-hell);
  border-color: var(--gruen);
}
.antwort--richtig .antwort__marke { background: var(--gruen); }

.antwort--falsch {
  background: var(--rot-hell);
  border-color: var(--rot);
}
.antwort--falsch .antwort__marke { background: var(--rot); }

.antwort:disabled { cursor: default; opacity: 1; }

.bilanz {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.bilanz li {
  flex: 1 1 190px;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--hell);
  padding: 14px 16px;
}

.bilanz b {
  display: block;
  font-size: 26px;
  color: var(--blau);
  line-height: 1.2;
}

.bilanz span { font-size: 14.5px; color: var(--grau); }

/* --- Zuganzeiger: weißes Raster, schwarzer Kopfbalken, blauer Zugname ------ */

.anzeiger {
  background: #fff;
  border: 2px solid var(--schwarz);
  border-radius: 2px;
  margin-bottom: 26px;
  overflow: hidden;
  font-family: var(--signage);
}

.anzeiger--ankunft { background: #fff; }

.anzeiger__titel {
  margin: 0;
  padding: 7px 14px;
  background: var(--schwarz);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.anzeiger__kopf,
.anzeiger__zeile {
  display: grid;
  grid-template-columns: 4.2em 1fr 3em 7em;
  gap: 10px;
  align-items: center;
  padding: 7px 14px;
}

.anzeiger__kopf {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--grau);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

.anzeiger__zeile {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--schwarz);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.anzeiger__zeile:last-child { border-bottom: 0; }

.anzeiger__zeile > span:first-child { color: var(--blau); }

.anzeiger__gleis { font-weight: 700; text-align: right; }

.anzeiger__status {
  color: var(--grau);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12.5px;
}

@media (max-width: 640px) {
  .anzeiger__kopf,
  .anzeiger__zeile { grid-template-columns: 3.4em 1fr 2.2em; font-size: 13.5px; }
  .anzeiger__kopf span:nth-child(4),
  .anzeiger__zeile .anzeiger__status { display: none; }
}

/* --- Fußzeile --------------------------------------------------------------
   Wie ein Stundenbalken des Aushangfahrplans: schwarz, weiße Schrift. */

.fuss {
  border-top: 5px solid var(--rot);
  background: var(--seite);
  padding: 20px 20px 26px;
  text-align: center;
  font-size: 14.5px;
  color: var(--grau);
}

.fuss__liste {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
}

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

.fuss p {
  font-family: var(--signage);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 13px;
}

/* --- Barrierefreiheit ----------------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--schwarz);
  outline-offset: 2px;
}

.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Kleine Bildschirme ---------------------------------------------------- */

@media (max-width: 640px) {
  body { font-size: 16px; }
  .karte { padding: 20px 18px 24px; }
  h1 { font-size: 24px; }
  .frage { font-size: 19px; }
  .knopfreihe .knopf { flex: 1 1 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Spielseite (index.html): möglichst alles auf einem Bildschirm
   --------------------------------------------------------------------------
   Start-, Stations- und Endekarte füllen die volle Bildschirmhöhe. Abstände
   und Schriftgrößen skalieren über clamp() mit vh, damit auf niedrigen
   Bildschirmen (z. B. Handy quer) möglichst wenig fehlt. Das Suchbild darf
   dabei bis zu --suchbild-min-hoehe schrumpfen (siehe :root). Reicht das
   Schrumpfen trotzdem nicht aus, ist body.spielseite .inhalt der einzige
   Scrollbereich - er enthält die jeweils sichtbare Karte UND den Footer
   (der Footer steht darum bewusst im HTML innerhalb von <main>, siehe
   index.html). So scrollt der Footer mit dem restlichen Inhalt statt fest
   an einer Bildschirmstelle zu kleben; die Seite (body) selbst bleibt aber
   immer fix auf Bildschirmhöhe. Der Streckenplan (Overlay) ist davon
   ausgenommen: er soll grundsätzlich nie scrollen, sondern immer
   vollständig sichtbar sein - seine Zeilen schrumpfen darum stärker mit.
   ========================================================================== */

body.spielseite {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}

body.spielseite .inhalt {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: clamp(6px, 1.6vh, 20px) clamp(12px, 3vw, 20px);
}

/* Kein min-height:0 und kein max-height hier (bewusst!): die Karte soll nie
   unter ihre natürliche Inhaltshöhe schrumpfen oder abgeschnitten werden -
   passt alles nicht in den sichtbaren Bereich, übernimmt stattdessen
   body.spielseite .inhalt oben das Scrollen (Karte + Footer gemeinsam). */
body.spielseite .karte {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 0;
  padding: clamp(10px, 2.2vh, 28px) clamp(14px, 3vw, 30px) clamp(12px, 2.4vh, 32px);
}
/* Ohne diese Zeile würde die explizite display:flex oben eine per
   [hidden]-Attribut ausgeblendete Karte (Start-/Stations-/Endekarte) wieder
   sichtbar machen - Autor-Regeln schlagen sonst die UA-Regel für [hidden]. */
body.spielseite .karte[hidden] { display: none; }

/* Steht jetzt innerhalb von .inhalt (siehe index.html) und ist damit Teil
   des einen Scrollbereichs - kein flex:0 0 auto direkt auf body mehr. */
body.spielseite .fuss {
  flex: 0 0 auto;
  padding: clamp(6px, 1vh, 16px) 20px;
}

/* Überschriften, Absätze, Abstände: mit der Höhe mitschrumpfen */
body.spielseite h1 {
  font-size: clamp(19px, 3.4vh, 30px);
  padding-bottom: clamp(4px, 0.8vh, 10px);
  margin-bottom: clamp(6px, 1.2vh, 18px);
}
body.spielseite h2 { font-size: clamp(16px, 2.2vh, 22px); margin-bottom: clamp(4px, 0.8vh, 10px); }
body.spielseite p { margin-bottom: clamp(6px, 1.2vh, 14px); }

/* Vereinslogo oben auf der Startkarte; wächst mit der Bildschirmhöhe mit */
.logo {
  display: block;
  width: 100%;
  height: auto;
  max-height: clamp(105px, 22.5vh, 240px);
  object-fit: contain;
  margin: 0 auto clamp(8px, 1.6vh, 26px);
}

body.spielseite .anzeiger { margin-bottom: clamp(8px, 1.6vh, 26px); }
body.spielseite .anzeiger__titel,
body.spielseite .anzeiger__kopf,
body.spielseite .anzeiger__zeile { padding-top: clamp(4px, 0.8vh, 7px); padding-bottom: clamp(4px, 0.8vh, 7px); }

/* Variantenwahl: immer zweispaltig, damit sie nicht doppelt so hoch wird */
body.spielseite .varianten {
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1.4vh, 16px);
  margin-top: clamp(8px, 1.6vh, 20px);
  margin-bottom: 0;
}
/* Fester Abstand zwischen Variantenwahl und "2 · Die Strecke" */
body.spielseite .varianten + h2 { margin-top: 24px; }
body.spielseite .variante {
  padding: clamp(10px, 1.6vh, 18px) clamp(10px, 2vw, 20px) clamp(12px, 1.8vh, 20px);
}
body.spielseite .variante__name { margin-bottom: clamp(4px, 0.8vh, 8px); }
body.spielseite .variante__text {
  margin-bottom: clamp(6px, 1.2vh, 16px);
  font-size: clamp(12.5px, 1.8vh, 15.5px);
}

/* Streckenvorschau: wächst in übrigen Platz hinein, damit die Buttons unten
   in der Karte landen - schrumpft dabei aber nie unter ihre natürliche
   Höhe (kein min-height:0!). Reicht der Platz nicht, scrollt die Startkarte
   selbst (siehe body.spielseite .karte), statt die Liste zu stauchen. */
body.spielseite .strecke--vorschau {
  flex: 1 1 auto;
}
body.spielseite .halt__knopf { padding: clamp(4px, 0.8vh, 9px) 8px; }

/* align-items:stretch ist zwar der Flex-Standard, wird hier aber bewusst
   noch einmal explizit gesetzt: zusammen mit flex:1 1 0 auf den Knöpfen
   sorgt das dafür, dass z. B. "Auswerten"/"Zurück" (mit/ohne Rahmen) immer
   gleich breit UND gleich hoch nebeneinanderstehen. */
body.spielseite .knopfreihe {
  margin-top: clamp(8px, 1.6vh, 20px);
  align-items: stretch;
}
body.spielseite .knopfreihe .knopf { flex: 1 1 0; text-align: center; }

/* Station: Bild übernimmt den restlichen Platz, statt die Karte zu sprengen */
body.spielseite .fortschritt__kopf { margin-bottom: clamp(4px, 0.8vh, 8px); }
body.spielseite .fortschritt__balken { margin-bottom: clamp(10px, 1.8vh, 24px); }
body.spielseite .suchbild {
  flex: 1 1 auto;
  min-height: var(--suchbild-min-hoehe);
  max-height: var(--suchbild-max-hoehe);
  width: 100%;
  object-fit: contain;
  margin-bottom: clamp(8px, 1.6vh, 22px);
}
body.spielseite .frage { font-size: clamp(16px, 2.4vh, 21px); margin-bottom: clamp(8px, 1.4vh, 16px); }

/* Antworten zu zweit nebeneinander, damit das Bild oben mehr Platz bekommt.
   grid-auto-rows: 1fr macht alle Zeilen gleich hoch (an der Zeile mit dem
   längsten Text orientiert), grid-template-columns: 1fr 1fr alle Spalten
   gleich breit - macht zusammen mit height:100% auf dem Knopf unten alle
   vier Antwort-Buttons gleich breit UND gleich hoch, unabhängig vom
   jeweiligen Antworttext. */
body.spielseite .antworten {
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: clamp(6px, 1vh, 10px) clamp(8px, 2vw, 12px);
  margin-bottom: clamp(4px, 0.8vh, 8px);
}
body.spielseite .antwort {
  height: 100%;
  padding: clamp(9px, 1.6vh, 14px) clamp(10px, 2vw, 16px);
  gap: clamp(8px, 1.4vw, 12px);
}
body.spielseite .antwort__marke {
  width: clamp(24px, 3.6vh, 30px);
  height: clamp(24px, 3.6vh, 30px);
  font-size: clamp(12px, 1.6vh, 14px);
}

@media (max-width: 640px) {
  body.spielseite .knopfreihe .knopf { flex: 1 1 0; text-align: center; }
}

/* Auf sehr niedrigen Bildschirmen (Handy quer, kleine Tablets) reicht
   Schrumpfen allein nicht mehr aus: erst die reine Deko weglassen, dann bei
   noch weniger Höhe auch erklärenden Fließtext - damit die Streckenvorschau
   nicht auf eine winzige Scroll-Ritze zusammenschrumpft. Die eigentliche
   Bedienung (Überschriften, Variantenwahl, Stationsliste, Abfahrt-Knopf)
   bleibt dabei immer vollständig sichtbar. */
@media (max-height: 700px) {
  body.spielseite .anzeiger { display: none; }
}
@media (max-height: 560px) {
  body.spielseite .logo,
  body.spielseite #startkarte > p,
  body.spielseite .variante__text { display: none; }
}

/* Streckenplan-Overlay: Kopf-/Fußbereich und Aktionsknöpfe bleiben fix
   sichtbar; Zeilen, Punkte und Schrift der Liste schrumpfen zunächst mit
   der Bildschirmhöhe mit, damit möglichst viel ohne Scrollen passt. Reicht
   das trotzdem nicht, scrollt die Liste selbst (siehe .strecke--tafel
   overflow-y unten) - beim Öffnen wird dabei automatisch auf die aktuelle
   Station zentriert (aktuelleStationZentrieren() in js/fotorallye.js). */
body.spielseite .plan__karte {
  max-height: 94vh;
  max-height: 94dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(12px, 2.4vh, 20px) clamp(14px, 3vw, 22px) clamp(14px, 2.6vh, 24px);
}
body.spielseite .plan__kopf { margin-bottom: clamp(4px, 1vh, 6px); }
body.spielseite .plan__stand { font-size: clamp(14px, 2.2vh, 18px); }

/* Streckenplan_Linie_Animation: Dieser Container ist jetzt scrollbar
   (overflow-y: auto). Der animierte Balken (.fuell) und der Punktabstand
   werden per JS über getBoundingClientRect() gemessen und sind daher
   scrollposition-abhängig - js/fotorallye.js muss vor jeder Messung
   scrollTop auf 0 zurücksetzen und darf erst danach zentrieren/scrollen
   (siehe fahrt()/aufStationZentrieren() dort). Einziger Scrollbereich im
   Overlay: wächst zuerst mit dem verfügbaren Platz, scrollt bei Überlauf
   aber innerhalb der Karte statt die Seite zu sprengen (Kopf/Fuß/Knöpfe
   bleiben davon unberührt). */
body.spielseite .strecke--tafel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: clamp(8px, 1.6vh, 14px);
}
body.spielseite .strecke--tafel .halt__knopf { gap: clamp(6px, 1.2vh, 14px); }
/* [PUNKT] Größe im Overlay schrumpft hier zusätzlich mit der Bildschirmhöhe
   (Basis-Ø 26px, siehe [PUNKT]-Grundform oben, kann bis auf 14px sinken). */
body.spielseite .strecke--tafel .halt__punkt {
  width: clamp(14px, 2.6vh, 26px);
  height: clamp(14px, 2.6vh, 26px);
  font-size: clamp(9px, 1.4vh, 13px);
}
body.spielseite .strecke--tafel .halt__text b { font-size: clamp(11px, 1.9vh, 16px); }
body.spielseite .strecke--tafel .halt__text small { font-size: clamp(9px, 1.4vh, 13px); }

body.spielseite .plan__fuss {
  margin-top: clamp(6px, 1.4vh, 14px);
  font-size: clamp(11px, 1.6vh, 13.5px);
}
body.spielseite .plan__aktionen { margin-top: clamp(6px, 1.4vh, 14px); }

/* ==========================================================================
   Streckenplan (U-Bahn-Ansicht)
   ========================================================================== */

/* --- Schwebende Knöpfe oben rechts: Streckenplan + Hinweis --------------- */

.schwebeknoepfe {
  position: fixed;
  top: 68px;
  right: 16px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.planknopf,
.hinweisknopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-family: var(--signage);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(22, 21, 19, 0.35);
  transition: background 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
}

.planknopf:active,
.hinweisknopf:active { transform: translateY(1px); }

.planknopf { background: var(--rot); color: #fff; }
.planknopf:hover,
.planknopf:focus-visible { background: var(--rot-dunkel); }

.planknopf__symbol {
  width: 20px;
  height: 20px;
  fill: #fff;
  stroke: #fff;
}

.hinweisknopf { background: var(--blau); color: #fff; }
.hinweisknopf:hover,
.hinweisknopf:focus-visible { background: var(--blau-dunkel); }

.hinweisknopf__symbol {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #fff;
}

.hinweisknopf__zahl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #fff;
  color: var(--blau);
  font-size: 12px;
  font-weight: 700;
}
.hinweisknopf__zahl[hidden] { display: none; }

/* Alle 5 Hinweise verbraucht: ausgegraut und inaktiv */
.hinweisknopf:disabled {
  background: #c4c7cc;
  color: rgba(17, 17, 17, 0.55);
  cursor: not-allowed;
  box-shadow: none;
}
.hinweisknopf:disabled:hover { background: #c4c7cc; }
.hinweisknopf:disabled .hinweisknopf__symbol { stroke: rgba(17, 17, 17, 0.4); }
.hinweisknopf:disabled .hinweisknopf__zahl { background: rgba(255, 255, 255, 0.6); color: rgba(17, 17, 17, 0.55); }

.planknopf[hidden],
.hinweisknopf[hidden] { display: none; }

/* --- Overlay -------------------------------------------------------------- */

.plan {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 14, 30, 0.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.plan[hidden] { display: none; }

.plan__karte {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--karte);
  border: 2px solid var(--schwarz);
  border-top: 5px solid var(--rot);
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(10, 14, 30, 0.5);
  padding: 20px 22px 24px;
}

.plan__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.plan__titel {
  margin: 0 0 2px;
  font-family: var(--signage);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--grau);
}

.plan__stand {
  margin: 2px 0 0;
  font-family: var(--signage);
  font-size: 18px;
  font-weight: 700;
  color: var(--schwarz);
}

.plan__schliessen {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid var(--schwarz);
  border-radius: 8px;
  background: #fff;
  color: var(--schwarz);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.plan__schliessen:hover,
.plan__schliessen:focus-visible { background: var(--rot); border-color: var(--rot); color: #fff; }
.plan__schliessen[hidden] { display: none; }

.plan__fuss {
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--grau);
}

/* Aktionen unten rechts im Streckenplan */
.plan__aktionen {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

#planNeu[hidden] { display: none; }

/* --- Die Linie mit Halten (gemeinsame Grundform) --------------------------- */

.strecke {
  position: relative;
  margin-top: 14px;
  padding-left: 4px;
}

.halte {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 2;
}

.halt { margin: 0; padding: 0; }

.halt__knopf {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 9px 8px;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  border-radius: 8px;
}

/* [PUNKT] Grundform des Haltepunkt-Kreises: Größe (26px = Ø) und Radius
   hier ändern. Die Farbe je Zustand (gefunden/aktuell/gesperrt/Ziel) wird
   weiter unten separat für Vorschau und Overlay gesetzt (siehe [PUNKT]). */
.halt__punkt {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.halt__text { display: flex; flex-direction: column; line-height: 1.3; }

/* --- Vorschau auf der Startseite ------------------------------------------- */

/* [STRICH] Startseite-Vorschau: dünne, statische Hintergrundlinie hinter
   allen Punkten (Position/Länge). Läuft "top" bis "bottom" hinter der
   gesamten Haltestellen-Liste durch. */
.strecke--vorschau::before {
  content: "";
  position: absolute;
  left: calc(var(--linie-mitte, 25px) - 3px);
  top: 26px;
  bottom: 26px;
  width: 6px;
  border-radius: 999px;
  background: var(--hell-dunkel);
  z-index: 0;
}
/* [STRICH] Farbe des animierten Fortschrittsbalkens (Startseite-Vorschau);
   Form/Position kommt aus der gemeinsamen .fuell-Regel weiter unten. */
.strecke--vorschau .fuell { background: var(--rot); }
.strecke--vorschau .halt__knopf { cursor: default; color: var(--text); }
/* [PUNKT] Grundfarbe/-rand der Kreise (Startseite-Vorschau) */
.strecke--vorschau .halt__punkt { background: #fff; border: 4px solid var(--schwarz); color: #fff; }
.strecke--vorschau .halt__text b { color: var(--schwarz); }
.strecke--vorschau .halt__text small { color: var(--grau); }

/* [PUNKT] Farbe je Zustand - gefunden/aktuell/gesperrt/Ziel (Startseite-Vorschau) */
.strecke--vorschau .halt--erledigt .halt__punkt { background: var(--rot); border-color: var(--rot); }
.strecke--vorschau .halt--aktuell .halt__punkt {
  background: var(--blau);
  border-color: var(--schwarz);
  box-shadow: 0 0 0 3px var(--blau-hell);
}
.strecke--vorschau .halt--aktuell .halt__text b,
.strecke--vorschau .halt--aktuell .halt__text small { color: var(--blau); }
.strecke--vorschau .halt--gesperrt .halt__text b,
.strecke--vorschau .halt--gesperrt .halt__text small { color: var(--gedimmt); }
.strecke--vorschau .halt--ziel .halt__punkt { background: var(--schwarz); border-color: var(--schwarz); font-size: 14px; }
.strecke--vorschau .halt--ziel .halt__text b { color: var(--schwarz); }

/* --- Streckenplan-Overlay: rote Fortschrittslinie, Blau für die aktuelle
   Station ------------------------------------------------------------------ */

/* [STRICH] Streckenplan_Linie_Animation: dünne, statische Hintergrundlinie
   hinter allen Punkten. top/height kommen NICHT aus top+bottom (das würde
   sich nur auf die sichtbare/geclippte Höhe von .strecke--tafel beziehen,
   nicht auf die volle scrollbare Listenlänge), sondern aus den Custom
   Properties --linie-oben/--linie-hoehe. Die setzt linieVermessen() in
   js/fotorallye.js per mitte() - von der Mitte des ersten bis zur Mitte
   des letzten Haltepunkts (Ziel inklusive) -, damit die Linie genauso lang
   ist wie bei vollständig sichtbarem Streckenplan, auch wenn nur ein Teil
   davon im Ausschnitt zu sehen ist. Fallback (26px/100%-52px) greift nur,
   solange JS die Werte noch nicht gesetzt hat. */
.strecke--tafel::before {
  content: "";
  position: absolute;
  left: calc(var(--linie-mitte, 25px) - 3px);
  top: var(--linie-oben, 26px);
  height: var(--linie-hoehe, calc(100% - 52px));
  width: 6px;
  border-radius: 999px;
  background: var(--hell-dunkel);
  z-index: 0;
}
/* [STRICH] Farbe des animierten Fortschrittsbalkens (Overlay); Form/Position
   kommt aus der gemeinsamen .fuell-Regel weiter unten. */
.strecke--tafel .fuell { background: var(--rot); }

.strecke--tafel .halt__text b { color: var(--schwarz); }
.strecke--tafel .halt__text small { color: var(--grau); }

/* [PUNKT] Grundfarbe/-rand der Kreise (Overlay) */
.strecke--tafel .halt__punkt {
  background: #fff;
  border: 3px solid var(--schwarz);
  color: #fff;
}

/* [PUNKT] Farbe je Zustand - gefunden/aktuell/gesperrt/Ziel (Overlay) */
.strecke--tafel .halt--erledigt .halt__punkt { background: var(--rot); border-color: var(--rot); }
.strecke--tafel .halt--erledigt .halt__knopf { cursor: pointer; }
.strecke--tafel .halt--erledigt .halt__knopf:hover,
.strecke--tafel .halt--erledigt .halt__knopf:focus-visible { background: var(--hell); }

.strecke--tafel .halt--aktuell .halt__knopf { background: var(--blau-hell); }
.strecke--tafel .halt--aktuell .halt__punkt { background: var(--blau); border-color: var(--schwarz); }
.strecke--tafel .halt--aktuell .halt__text b,
.strecke--tafel .halt--aktuell .halt__text small { color: var(--blau); font-weight: 700; }

.strecke--tafel .halt--gesperrt .halt__text b,
.strecke--tafel .halt--gesperrt .halt__text small { color: var(--gedimmt); }

.strecke--tafel .halt--ziel .halt__punkt { background: var(--schwarz); border-color: var(--schwarz); font-size: 14px; color: #fff; }

/* --- Fortschritts-Füllung (gemeinsame Grundform, Farbe siehe oben) --------- */

/* [STRICH] Streckenplan_Linie_Animation: Animierter Fortschrittsbalken -
   Grundform (Breite 6px). "left" zentriert ihn auf --linie-mitte, die
   waagerechte Kreismitte aus linieVermessen(). Die
   tatsächliche Höhe und der "top" werden nicht hier, sondern live per JS
   gesetzt (mitte()/fahrt() in js/fotorallye.js schreiben style.top/
   style.height anhand der echten Punkt-Positionen - dafür muss dort
   ctx.strecke.scrollTop bei der Messung 0 sein, siehe Kommentar oben bei
   body.spielseite .strecke--tafel). */
.fuell {
  position: absolute;
  left: calc(var(--linie-mitte, 25px) - 3px);
  top: 0;
  width: 6px;
  height: 0;
  z-index: 1;
  border-radius: 999px;
  pointer-events: none;
}

/* [STRICH] Leuchteffekt am Balken während der Fahrt-Animation */
.strecke--faehrt .fuell { box-shadow: 0 0 7px 1px rgba(212, 42, 38, 0.6); }

@media (max-width: 640px) {
  .planknopf__text,
  .hinweisknopf__text { display: none; }
  .planknopf,
  .hinweisknopf { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .plan { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* --- Hinweis-Info-Overlay (einmalige Erklärung pro Fahrt) ------------------ */

.hinweisinfo {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 14, 30, 0.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.hinweisinfo[hidden] { display: none; }

.hinweisinfo__karte {
  width: 100%;
  max-width: 420px;
  background: var(--karte);
  border-radius: 4px;
  border: 2px solid var(--schwarz);
  border-top: 5px solid var(--rot);
  box-shadow: 0 12px 40px rgba(10, 14, 30, 0.5);
  padding: 22px 24px 24px;
}
.hinweisinfo__titel { margin: 0 0 10px; }

/* --- Hinweisbild-Overlay ---------------------------------------------------- */

.hinweisbild {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 14, 30, 0.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.hinweisbild[hidden] { display: none; }

.hinweisbild__karte {
  position: relative;
  width: 100%;
  max-width: 640px;
  background: var(--karte);
  border: 2px solid var(--schwarz);
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(10, 14, 30, 0.5);
  padding: 16px;
}

.hinweisbild__bild {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--hell);
}

.hinweisbild__schliessen {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: #fff;
  color: var(--schwarz);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--schatten);
}
.hinweisbild__schliessen:hover,
.hinweisbild__schliessen:focus-visible { background: var(--rot); border-color: var(--rot); color: #fff; }

/* --- Eingangsseite (index.html): Logo + ein zentraler Knopf --------------- */

body.eingang {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 24px 0 0;
  background: #fff;
}
/* Logo + Login bleiben in der Mitte, der Footer sitzt ganz unten
   und geht über die volle Breite */
.eingang__logo {
  display: block;
  width: calc(100% - 32px);
  max-width: 720px;
  height: auto;
  margin-top: auto;
}
body.eingang .login { width: calc(100% - 32px); }
body.eingang .fuss {
  align-self: stretch;
  margin-top: auto;
}
.eingang__knopf { font-size: 22px; padding: 18px 40px; }

/* --- Ladeanzeige auf der Startkarte (steuert js/offline.js) --------------- */
/* Steht anstelle der Streckenvorschau, bis alle Inhalte geladen sind. */

.strecke[hidden],
.knopf[hidden],
.laden[hidden] { display: none; }

.laden {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  min-height: 160px;
  margin-top: 14px;
  padding: 20px;
  border: 2px solid var(--schwarz);
  border-radius: var(--radius);
  background: #fff;
  text-align: center;
}
body.spielseite #startkarte .laden p { margin: 0; }

.laden__text { font-weight: 700; }

/* Gleis: graue Bahn mit roter Füllung, darüber laufende "Schwellen" */
.laden__gleis {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: var(--hell-dunkel);
  overflow: hidden;
}
.laden__fuellung {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: var(--rot);
  transition: width 0.3s ease;
}
.laden__gleis::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 14px, rgba(255, 255, 255, 0.45) 14px 18px);
  animation: laden-fahrt 0.8s linear infinite;
}
@keyframes laden-fahrt {
  from { background-position: 0 0; }
  to { background-position: 18px 0; }
}

.laden__prozent {
  font-family: var(--signage);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: var(--rot);
  font-variant-numeric: tabular-nums;
}
.laden__zahl { font-size: 14.5px; color: var(--grau); font-variant-numeric: tabular-nums; }
.laden--hinweis { flex: 0 0 auto; min-height: 0; padding: 10px 14px; }
.laden--hinweis .laden__text { color: var(--rot); font-size: 14.5px; }
.laden--hinweis .laden__gleis,
.laden--hinweis .laden__prozent,
.laden--hinweis .laden__zahl { display: none; }

@media (prefers-reduced-motion: reduce) {
  .laden__gleis::after { animation: none; }
  .laden__fuellung { transition: none; }
}

/* --- Ladekreis neben "2 · Die Strecke": Anteil offline gespeicherter Bilder */

.streckenkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ladekreis {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 400;
  color: var(--grau);
  font-variant-numeric: tabular-nums;
}
.ladekreis[hidden] { display: none; }
/* Kuchen-Kreis: --anteil (0-100) setzt js/offline.js */
.ladekreis__kreis {
  --anteil: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--gruen);
  background: conic-gradient(var(--gruen) calc(var(--anteil) * 1%), #fff 0);
}

/* --- Passwort auf der Startseite (js/zugang.js) --------------------------- */

.login {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 340px;
}
.login__label {
  font-family: var(--signage);
  font-weight: 700;
  font-size: 18px;
}
.login__feld {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 2px solid #c4c7cc;
  border-radius: var(--radius);
  font: inherit;
  font-size: 18px;
  text-align: center;
}
.login__feld:focus { outline: none; border-color: var(--rot); }
.login__meldung {
  min-height: 1.4em;
  margin: 0;
  color: var(--rot-dunkel);
  font-weight: 700;
  text-align: center;
}