/* intrexx-ki Weboberfläche, Richtung „Leitsystem“ (beschrieben in DESIGN.md).
   Die Portalübersicht liest sich wie eine Abfahrtstafel: tafelblaue Flächen mit weißer Schrift,
   der Normalbetrieb bleibt leise, jede Abweichung steht als Schild (gelb: Hinweis, rot: Störung).
   Gelb gibt es nur für Abweichungen, Fokus und Markierung.

   Tokens (hell / dunkel)
     --grund        Seitengrund               #eef2f7 / #070d1a
     --flaeche      Karten                    #ffffff / #0e182b
     --feld         Eingabefelder             #ffffff / #0a1222
     --text         Schrift                   #0e1a2e / #e7edf6
     --leise        Nebentext                 #4b5b75 / #9cadc8
     --rand         Feldrand                  #6a7a94 / #6f83a6
     --verweis      Links                     #1b4a91 / #9cc0ff
     --primaer      Primärknopf               #0f2d5c / #3567ba
     --gefahr       roter Text                #b8332b / #ff9a8f
     --tafel        Tafelblau (beide Modi)    #0f2d5c, darauf --tafel-text #ffffff, --tafel-leise #b3c2db
     --signal       Signalgelb (Schild, Fokus) #ffd400, darauf --signal-text #0e1a2e
     --stoerung     Signalrot gedämpft        #b8332b, darauf --stoerung-text #ffffff
   Auf Tafel, Kopfleiste und Befehlsblock gelten die Tafelwerte für --text, --leise usw.
   Schrift: Barlow 400/500/600, selbst gehostet (SIL OFL 1.1, schrift/OFL.txt), Ziffern tabellarisch;
   Monospace nur für Host:Port, Fingerprints, Tokens und Befehle.
   Ecken: 4 px Bedienelemente, 6 px Tafeln und Karten. Schatten nur als flache Tafelkante.
   Bewegung: nur das Umschalten der Hinweiszellen (180 ms, ease-out), sonst keine. */

@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("schrift/Barlow-Regular.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("schrift/Barlow-Medium.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("schrift/Barlow-SemiBold.woff2") format("woff2"); }

:root {
  color-scheme: light dark;
  --grund: #eef2f7; --flaeche: #ffffff; --feld: #ffffff;
  --text: #0e1a2e; --leise: #4b5b75; --linie: #cfd8e4; --rand: #6a7a94;
  --verweis: #1b4a91; --akzent: #0f2d5c; --caret: #0f2d5c;
  --primaer: #0f2d5c; --primaer-hover: #1a3f7a; --primaer-text: #ffffff;
  --gefahr: #b8332b; --hauch: rgb(15 45 92 / 0.07); --code-grund: rgb(15 45 92 / 0.08);
  --tafel: #0f2d5c; --tafel-text: #ffffff; --tafel-leise: #b3c2db; --tafel-linie: #284673;
  --tafel-feld: #0a2148; --tafel-rand: #7f98c2; --tafel-gefahr: #ffb3aa; --tafel-rahmen: #0f2d5c;
  --tafel-kante: 0 1px 2px rgb(14 26 46 / 0.18), 0 4px 10px -6px rgb(14 26 46 / 0.4);
  --signal: #ffd400; --signal-text: #0e1a2e;
  --stoerung: #b8332b; --stoerung-text: #ffffff;
  --fokus: #ffd400; --fokus-kante: #0e1a2e;
  --schrift: "Barlow", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", "Noto Sans", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
  --breite: 76rem; --r-klein: 4px; --r-gross: 6px;
  --aus: cubic-bezier(0.16, 1, 0.3, 1);
  /* Schriftstufen: 13 · 14 · 16 · 18 · 21 · 28 px, dazu 26 px für die Uhrzeit der Tafel */
  --s1: 0.8125rem; --s2: 0.875rem; --s3: 1rem; --s4: 1.125rem; --s5: 1.3125rem; --s6: 1.75rem; --s-uhr: 1.625rem;
  --haken: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #070d1a; --flaeche: #0e182b; --feld: #0a1222;
    --text: #e7edf6; --leise: #9cadc8; --linie: #22314b; --rand: #6f83a6;
    --verweis: #9cc0ff; --akzent: #9cc0ff; --caret: #ffd400;
    --primaer: #3567ba; --primaer-hover: #4272c2; --primaer-text: #ffffff;
    --gefahr: #ff9a8f; --hauch: rgb(156 192 255 / 0.1); --code-grund: rgb(156 192 255 / 0.12);
    --tafel-rahmen: #2b4a7d; --tafel-kante: none; --haken: #0a1222;
    --fokus-kante: #070d1a;
  }
}

/* Tafelblaue Flächen: dieselben Komponenten, nur mit den Tafelwerten */
.kopf, .tafel, .karte-kopf, pre.befehl {
  --text: var(--tafel-text); --leise: var(--tafel-leise); --linie: var(--tafel-linie);
  --feld: var(--tafel-feld); --rand: var(--tafel-rand); --verweis: var(--tafel-text);
  --gefahr: var(--tafel-gefahr); --akzent: var(--tafel-text); --haken: var(--tafel); --caret: var(--signal);
  --primaer: #ffffff; --primaer-hover: #dfe7f3; --primaer-text: var(--tafel);
  --hauch: rgb(255 255 255 / 0.09); --code-grund: rgb(255 255 255 / 0.12); --fokus-kante: var(--tafel);
  background: var(--tafel); color: var(--text);
}

/* Grundlagen und Browser-Flächen */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--grund); scrollbar-color: var(--rand) var(--grund); -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--grund);
  color: var(--text); font: 400 var(--s3)/1.5 var(--schrift); font-kerning: normal; }
::selection { background: var(--signal); color: var(--signal-text); }
input, select, textarea { caret-color: var(--caret); }
a { color: var(--verweis); text-decoration-line: underline; text-decoration-thickness: 1px;
  text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--fokus-kante); }
h1, h2 { text-wrap: balance; }
h1 { font-size: var(--s6); line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
h2 { font-size: var(--s4); line-height: 1.3; font-weight: 600; margin: 2.5rem 0 0.75rem; }
p { margin: 0 0 0.875rem; max-width: 68ch; }
small { font-size: var(--s2); }
strong { font-weight: 600; }
code { font-family: var(--mono); font-size: 0.875em; background: var(--code-grund); padding: 0.0625rem 0.3125rem;
  border-radius: 3px; }
.mono { font-family: var(--mono); font-size: var(--s2); }
.leise { color: var(--leise); font-size: var(--s2); }
.sr-nur { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Kopfleiste */
.kopf { border-bottom: 1px solid var(--tafel-rahmen); }
.kopf-innen { max-width: var(--breite); margin: 0 auto; padding: 0 1.25rem; min-height: 3.5rem; display: flex;
  flex-wrap: wrap; align-items: center; gap: 0 1.75rem; }
.marke { font-weight: 600; font-size: var(--s4); letter-spacing: 0.01em; padding: 0.875rem 0; }
.kopf nav { display: flex; flex-wrap: wrap; flex: 1; gap: 0 0.25rem; }
.kopf nav a { position: relative; color: var(--leise); font-weight: 500; text-decoration: none;
  padding: 1rem 0.625rem; }
.kopf nav a:hover { color: var(--text); }
.kopf nav a[aria-current="page"] { color: var(--text); }
.kopf nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0.625rem; right: 0.625rem;
  bottom: 0; height: 3px; border-radius: 2px 2px 0 0; background: var(--text); }
.kopf-konto { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; padding: 0.5rem 0; }
.wer { color: var(--leise); margin-right: 0.25rem; }
.kopf .formular.klein > button { color: var(--leise); }
.kopf .formular.klein > button:hover { color: var(--text); }
.kopf-konto > a { display: inline-flex; align-items: center; min-height: 2rem; padding: 0.25rem 0.5rem;
  color: var(--leise); font-weight: 500; text-decoration-color: var(--linie); border-radius: var(--r-klein); }
.kopf-konto > a:hover { color: var(--text); background: var(--hauch); text-decoration-color: currentColor; }
.kopf-innen > .marke + .kopf-konto { margin-left: auto; }

/* Seitenrahmen */
main { flex: 1; width: 100%; max-width: var(--breite); margin: 0 auto; padding: 2rem 1.25rem 4rem; }
main.schmal { max-width: 33rem; padding-top: 3rem; }
.titelzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem 1.5rem; margin: 0 0 1.5rem; }
.werkzeuge, .knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.knoepfe { margin: 1.5rem 0 0; }
.knoepfe .formular { margin: 0; }
.knoepfe + p { margin-top: 1.5rem; }
.fuss { margin-top: 2rem; }

/* Knöpfe: primär (Fläche), zweitrangig (Rand), Textknopf (klein), Gefahr (roter Textknopf) */
.knopf, .formular > button, button.zweit { display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.5rem; padding: 0.4375rem 1rem; font: 500 var(--s3)/1.2 var(--schrift); color: var(--primaer-text);
  background: var(--primaer); border: 1px solid var(--primaer); border-radius: var(--r-klein);
  text-decoration: none; white-space: nowrap; cursor: pointer; justify-self: start; }
.knopf:hover, .formular > button:hover { background: var(--primaer-hover); border-color: var(--primaer-hover); }
.knopf.zweit, button.zweit { color: var(--text); background: transparent; border-color: var(--rand); }
.knopf.zweit:hover, button.zweit:hover { background: var(--hauch); border-color: var(--rand); }
.knopf:active, .formular > button:active, button.zweit:active { transform: translateY(1px); }
.formular.klein > button, .formular.gefahr > button, .aktionen > a {
  display: inline-flex; align-items: center; min-height: 2rem; padding: 0.25rem 0.5rem; font: 500 var(--s3)/1.2 var(--schrift);
  color: var(--verweis); background: transparent; border: 0; border-radius: var(--r-klein); cursor: pointer;
  white-space: nowrap; text-decoration: underline; text-decoration-color: var(--linie); text-decoration-thickness: 1px;
  text-underline-offset: 0.2em; }
.formular.klein > button:hover, .formular.gefahr > button:hover, .aktionen > a:hover {
  background: var(--hauch); border: 0; text-decoration-color: currentColor; }
.formular.gefahr > button { color: var(--gefahr); text-decoration-color: currentColor; font-weight: 600; }
button:disabled, button:disabled:hover { opacity: 0.55; cursor: not-allowed; transform: none; }
#neu-pruefen:disabled { cursor: progress; }

/* Formulare: Beschriftung über dem Feld, Hilfe- und Fehlertext darunter */
.formular { display: grid; gap: 1.25rem; max-width: 26rem; margin: 0 0 1rem; }
.formular.klein, .formular.gefahr { display: inline-flex; gap: 0.5rem; max-width: none; margin: 0; }
.feld { display: grid; gap: 0.375rem; }
.feld label { font-weight: 500; font-size: var(--s3); }
.feld small { color: var(--leise); line-height: 1.4; }
.feldfehler { display: flex; gap: 0.5rem; align-items: baseline; margin: 0; color: var(--gefahr);
  font-size: var(--s2); font-weight: 600; line-height: 1.4; }
.feldfehler::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 1px;
  background: currentColor; }
input[type=text], input[type=password], input[type=number], select, textarea { width: 100%; min-height: 2.75rem;
  padding: 0.5rem 0.75rem; font: inherit; color: var(--text); background: var(--feld);
  border: 1px solid var(--rand); border-radius: var(--r-klein); }
input[type=number] { font-variant-numeric: tabular-nums; }
input:hover, select:hover { border-color: var(--leise); }
input:focus-visible, select:focus-visible { border-color: var(--text); }
input[aria-invalid=true] { border-color: var(--gefahr); box-shadow: inset 0 0 0 1px var(--gefahr); }
input[aria-invalid=true]:focus-visible { box-shadow: inset 0 0 0 1px var(--gefahr), 0 0 0 2px var(--fokus-kante); }
.feld.haken label { display: flex; gap: 0.625rem; align-items: flex-start; font-weight: 400; font-size: var(--s3); }
.feld.haken small, .feld.haken .feldfehler { margin-left: 1.75rem; }
/* Kontrollkästchen mit Feldrand und Feldgrund (sonst nativ grau im Dunkelmodus), Haken per CSS */
input[type=checkbox] { appearance: none; flex: none; display: inline-grid; place-content: center;
  width: 1.125rem; height: 1.125rem; margin: 0.1875rem 0 0; background: var(--feld);
  border: 1px solid var(--rand); border-radius: var(--r-klein); cursor: pointer; }
input[type=checkbox]:hover { border-color: var(--leise); }
input[type=checkbox]:checked { background: var(--akzent); border-color: var(--akzent); }
input[type=checkbox]:checked::before { content: ""; width: 0.3125rem; height: 0.625rem; margin-top: -0.125rem;
  border: solid var(--haken); border-width: 0 2px 2px 0; transform: rotate(45deg); }
input[type=checkbox][aria-invalid=true] { border-color: var(--gefahr); box-shadow: inset 0 0 0 1px var(--gefahr); }

/* Karte: helle Fläche mit tafelblauer Kopfzeile (Formulare, Fehlerseiten) */
.karte-kopf { margin: 0; padding: 0.875rem 1.5rem; border-radius: var(--r-gross) var(--r-gross) 0 0;
  font-size: var(--s5); line-height: 1.25; font-weight: 600; letter-spacing: -0.005em; }
h2.karte-kopf { font-size: var(--s4); padding: 0.75rem 1.25rem; }
.karte-inhalt { padding: 1.5rem; background: var(--flaeche); border: 1px solid var(--linie); border-top: 0;
  border-radius: 0 0 var(--r-gross) var(--r-gross); }
.karte-inhalt > :last-child { margin-bottom: 0; }
.karte .formular { max-width: none; }
.gefahrzone { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); }
.gefahrzone h2 { margin: 0 0 0.5rem; font-size: var(--s4); }
.gefahrzone .formular.gefahr > button { margin-left: -0.5rem; }

/* Tafel */
.tafel { border: 1px solid var(--tafel-rahmen); border-radius: var(--r-gross); box-shadow: var(--tafel-kante);
  margin: 0 0 1.5rem; }
.tafel-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0;
  padding: 0.875rem 1.25rem; font-size: var(--s4); border-bottom: 1px solid var(--linie); }
.tafel-leer { margin: 0; padding: 1.25rem; }
.tafel.leer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 2rem; padding: 1.5rem 1.25rem; }
.tafel.leer p { margin: 0; }
.tafel.leer p + p { margin-top: 0.25rem; }
.tafel.leer strong { font-size: var(--s4); }
.tabelle { position: relative; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--rand) transparent; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; vertical-align: top; padding: 0.75rem 1rem; }
th:first-child, td:first-child { padding-left: 1.25rem; }
th:last-child, td:last-child { padding-right: 1.25rem; }
thead th { padding-top: 0.75rem; padding-bottom: 0.5rem; font-size: var(--s1); font-weight: 500;
  letter-spacing: 0.02em; color: var(--leise); white-space: nowrap; border-bottom: 1px solid var(--linie); }
tbody tr + tr > td { border-top: 1px solid var(--linie); }
td.mono, td.eng { white-space: nowrap; }
td.rechts { text-align: right; }
.tafel td small { display: block; color: var(--leise); line-height: 1.4; }
/* Textknöpfe und Aufklapper in Zellen auf die Schriftlinie der Zeile setzen: als Block (sonst richtet die
   Zeilenbox sie an der Grundlinie aus und rückt sie tiefer), um das Innenpolster nach oben versetzt */
td > details { margin-top: 0; }
td > .formular.klein { display: flex; }
td.rechts > .formular.klein { justify-content: flex-end; }
td > details > summary { display: flex; width: fit-content; }
td > details:first-child > summary, td > .formular.klein > button { margin-top: -0.25rem; margin-bottom: -0.25rem; }
.tafel td > strong { font-weight: 600; }

/* Portaltafel wie eine Abfahrt: Zeit, Ziel, Gleis, Hinweis, Aktionen */
.abfahrt td { padding-top: 1rem; padding-bottom: 1rem; vertical-align: baseline; }
.abfahrt .zeit, .abfahrt .ziel, .abfahrt .gleis, .abfahrt td.rechts { width: 1%; white-space: nowrap; }
.abfahrt .zeit { min-width: 10rem; }
.abfahrt td { padding-left: 0.875rem; padding-right: 0.875rem; }
.abfahrt td:first-child { padding-left: 1.25rem; }
.abfahrt td:last-child { padding-right: 1.25rem; }
.uhr { display: block; font-size: var(--s-uhr); line-height: 1.1; font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums; margin-bottom: 0.25rem; }
.aus { color: var(--leise); }
.ziel strong { font-size: var(--s5); line-height: 1.2; font-weight: 600; white-space: nowrap; }
.zusatz { display: inline-block; margin-left: 0.375rem; padding: 0 0.375rem; font-size: var(--s1); font-weight: 500;
  line-height: 1.4; letter-spacing: 0.02em; color: var(--leise); border: 1px solid var(--rand);
  border-radius: var(--r-klein); vertical-align: 0.2em; }
.gleis { font-family: var(--mono); font-size: var(--s2); color: var(--leise); white-space: nowrap; }
.hinweis > span { display: block; color: var(--leise); }
.hinweis > span + span { margin-top: 0.375rem; }
.aktionen { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.125rem 0.25rem; }
.abfahrt .aktionen { flex-wrap: nowrap; margin: -0.25rem 0; }
/* Aktionen auf Tafeln ruhig: Nebentextfarbe, erst bei Hover und Fokus weiß */
.abfahrt .aktionen > a, .tafel .formular.klein > button { color: var(--leise); font-weight: 400; }
.abfahrt .aktionen > a:hover, .abfahrt .aktionen > a:focus-visible,
.tafel .formular.klein > button:hover, .tafel .formular.klein > button:focus-visible { color: var(--text); }

/* Status: Normalfall leise, Abweichung als Schild */
.status { font-size: var(--s2); }
.status.ok, .status.neutral { color: var(--leise); }
.status.warn, .status.fehler { display: inline-block; padding: 0.125rem 0.5rem; border-radius: var(--r-klein);
  font-weight: 600; line-height: 1.4; white-space: nowrap; text-decoration: none; }
.status.warn { background: var(--signal); color: var(--signal-text); }
.status.fehler { background: var(--stoerung); color: var(--stoerung-text); }
a.status.warn { text-decoration-line: underline; text-decoration-color: transparent; }
a.status.warn:hover { text-decoration-color: currentColor; }
.hinweis small { margin-top: 0.25rem; overflow-wrap: anywhere; }
.umschalten { animation: umschalten 180ms var(--aus); }
@keyframes umschalten {
  from { opacity: 0.3; transform: translateY(-0.45em); clip-path: inset(0 0 55% 0); }
  to { opacity: 1; transform: none; clip-path: inset(0); }
}

/* Meldungen nach Post-Redirect-Get */
.meldung { position: relative; max-width: none; margin: 0 0 1.5rem; padding: 0.75rem 1rem 0.75rem 2.25rem;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-gross); }
.meldung::before { content: ""; position: absolute; left: 1rem; top: 1.25rem; width: 0.5rem; height: 0.5rem;
  border-radius: 50%; background: var(--verweis); }
.meldung.warn { background: var(--signal); color: var(--signal-text); border-color: var(--signal); }
.meldung.fehler { background: var(--stoerung); color: var(--stoerung-text); border-color: var(--stoerung); }
.meldung.warn::before, .meldung.fehler::before { background: currentColor; border-radius: 1px; }
.karte-inhalt .meldung { margin-bottom: 1.25rem; }

/* Zertifikat: Angaben als Tafel, Fingerprint in Gruppen zu je 8 (24ch = 8 × „AB:“) */
.nebeneinander { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.nebeneinander .tafel, .einzeln .tafel { margin: 0; }
.einzeln { max-width: 34rem; }
.angaben { display: grid; margin: 0; padding: 1rem 1.25rem 1.25rem; }
.angaben dt { margin-top: 0.875rem; font-size: var(--s1); color: var(--leise); }
.angaben dt:first-child { margin-top: 0; }
.angaben dd { margin: 0.125rem 0 0; overflow-wrap: anywhere; }
.fp { display: block; width: 24ch; max-width: 100%; font-family: var(--mono); font-size: var(--s4); line-height: 1.6;
  word-break: break-all; }

/* Befehl und Token: ein Monospace-Block auf Tafelblau */
pre { font-family: var(--mono); font-size: var(--s2); line-height: 1.6; margin: 0 0 1rem; padding: 1rem 1.25rem;
  border: 1px solid var(--tafel-rahmen); border-radius: var(--r-gross); box-shadow: var(--tafel-kante);
  overflow-x: auto; white-space: pre-wrap; word-break: break-all; }

/* Aufklappbares (Versionsverlauf, Löschen mit Rückfrage, Kontoaktionen): ohne Skript bedienbar */
details { margin-top: 0.375rem; }
summary { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: -0.5rem; padding: 0.25rem 0.5rem;
  list-style: none; color: var(--verweis); font-weight: 500; font-size: var(--s3); border-radius: var(--r-klein);
  cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary::before { content: ""; width: 0.375rem; height: 0.375rem; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: translateY(-0.1em) rotate(-45deg); }
details[open] > summary::before { transform: translateY(-0.2em) rotate(45deg); }
summary:hover { background: var(--hauch); }
details[open] > summary { margin-bottom: 0.5rem; }
.verlauf, .hinweise { margin: 0 0 0.875rem; padding-left: 1.125rem; max-width: 68ch; }
.verlauf { font-size: var(--s2); color: var(--leise); }
.verlauf li, .hinweise li { margin: 0.125rem 0 0.375rem; }
.verlauf .mono { color: var(--text); }
.verwalten { display: grid; gap: 1rem; min-width: 17rem; padding: 0.25rem 0 0.5rem; }
.verwalten .formular { margin: 0; }
.verwalten .formular.gefahr { display: grid; gap: 0.5rem; max-width: 26rem; }
.verwalten .formular.gefahr > button { justify-self: start; margin-left: -0.5rem; }
.verwalten .aktionen { justify-content: flex-start; margin-left: -0.5rem; }
details .formular.gefahr > button { margin-left: -0.5rem; }

/* Breite Seiten mit Karte und Erläuterung nebeneinander (Einrichten, Konten) */
.zweispaltig { display: grid; grid-template-columns: minmax(0, 28rem) minmax(0, 1fr); gap: 1.5rem 2.5rem;
  align-items: start; margin-top: 2rem; }
.zweispaltig .karte, .zweispaltig .hinweise-block { min-width: 0; }
.hinweise-block h2 { margin-top: 0.5rem; }

/* Hilfe: Leseseite mit Sprungleiste, Rollen als Tafel, Verbindungen und Schritte als Strecke wie im
   Liniennetzplan (Halte und Linie nur per CSS, der Endhalt gefüllt) */
.hilfe-link { margin: 1.25rem 0 0; font-size: var(--s2); }
.tafel.leer .hilfe-link { margin-top: 0.5rem; }
.hilfe > section, .hilfe h3[id] { scroll-margin-top: 1.5rem; }
/* Stufen auf der Leseseite: h2 21 px, h3 18 px, Begriff (dt) 16 px halbfett */
.hilfe h2 { font-size: var(--s5); line-height: 1.25; margin-top: 3rem; }
.hilfe h3 { font-size: var(--s4); font-weight: 600; line-height: 1.35; margin: 2.25rem 0 0.625rem; }
.einleitung { font-size: var(--s4); line-height: 1.5; max-width: 62ch; }
.betrieb { color: var(--leise); }
.sprungleiste { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 1.75rem 0 0; padding: 0.75rem 0;
  border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.sprungleiste a { font-weight: 500; padding: 0.25rem 0; }
.hilfe .tafel + p { margin-top: 1.25rem; }
.hilfe ul, .hilfe ol.ablauf { max-width: 68ch; margin: 0 0 0.875rem; padding-left: 1.25rem; }
.hilfe ul > li + li, .ablauf > li + li { margin-top: 0.375rem; }
.hilfe ul > li::marker, .ablauf > li::marker { color: var(--leise); }
.ablauf { font-variant-numeric: tabular-nums; }
.ablauf li { padding-left: 0.25rem; }

.rollen tbody th { width: 15rem; font-weight: 400; }
.rollen tbody th strong { display: block; font-size: var(--s5); line-height: 1.2; font-weight: 600; }
.rollen tbody th small { display: block; margin-top: 0.375rem; color: var(--leise); line-height: 1.4; }
.rollen tbody tr + tr > th { border-top: 1px solid var(--linie); }
.rollen td, .rollen tbody th { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.rollen td.nie { width: 32%; }
.rollen ul { margin: 0; }

.strecke { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  column-gap: 1.5rem; margin: 0; padding: 1.75rem 1.25rem 1.5rem; }
.strecke > li { position: relative; min-width: 0; margin: 0; padding-top: 3.5rem; }
.strecke > li::before { content: ""; position: absolute; z-index: 1; left: 0; top: 1.75rem; width: 1.25rem;
  height: 1.25rem; border: 3px solid var(--text); border-radius: 50%; background: var(--tafel); }
.strecke > li:last-child::before { background: var(--text); }
.strecke > li:not(:last-child)::after { content: ""; position: absolute; left: 1rem; right: -1.75rem;
  top: calc(2.375rem - 1.5px); height: 3px; background: var(--text); }
.strecke strong { display: block; font-size: var(--s4); line-height: 1.3; font-weight: 600; }
.strecke small { display: block; margin-top: 0.25rem; color: var(--leise); line-height: 1.4; overflow-wrap: anywhere; }
.strecke .weg { position: absolute; left: 2rem; right: 0; bottom: calc(100% - 1.75rem); font-size: var(--s2);
  font-weight: 500; line-height: 1.3; }
.schritte > li { padding-top: 2.75rem; }
.schritte > li::before { display: none; }
.schritte > li:not(:last-child)::after { left: 1.75rem; top: calc(1rem - 1.5px); }
.schritte .nr { position: absolute; z-index: 1; left: 0; top: 0; display: grid; place-content: center;
  width: 2rem; height: 2rem; border: 3px solid var(--text); border-radius: 50%; background: var(--tafel);
  font-size: var(--s2); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.schritte > li:last-child .nr { background: var(--text); color: var(--tafel); }
.strecke code { overflow-wrap: anywhere; }

.regeln { margin: 0 0 0.5rem; max-width: 68ch; }
.regeln dt { font-weight: 600; margin-top: 1.25rem; }
.regeln dt:first-child { margin-top: 0; }
.regeln dd { margin: 0.25rem 0 0; }
.fehlerfang td small { margin-top: 0.25rem; }
.fehlerfang td:first-child { width: 36%; }

@media (max-width: 79.99rem) {
  /* schmalere Fenster: Aktionen untereinander, damit die Tafel ohne Querscrollen auskommt */
  .abfahrt .aktionen { flex-direction: column; align-items: flex-end; }
}

@media (max-width: 47.99rem) {
  main { padding-top: 1.5rem; }
  main.schmal { padding-top: 1.5rem; }
  .nebeneinander, .zweispaltig { grid-template-columns: 1fr; }
}

@media (max-width: 63.99rem) {
  .kopf-innen { gap: 0 1rem; }
  .kopf nav { order: 3; flex-basis: 100%; margin: 0 -0.625rem; }
  .kopf nav a { padding: 0.625rem; }
  .kopf-konto { margin-left: auto; }
  /* Portaltafel: jede Abfahrt als Block, Zeit links neben Ziel und Gleis */
  .abfahrt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .abfahrt, .abfahrt tbody { display: block; }
  .abfahrt tr { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); column-gap: 1rem;
    row-gap: 0.25rem; padding: 1rem 1.25rem; }
  .abfahrt tbody tr + tr { border-top: 1px solid var(--linie); }
  .abfahrt td, .abfahrt tbody tr + tr > td, .abfahrt td:first-child, .abfahrt td:last-child {
    display: block; width: auto; padding: 0; border: 0; }
  .abfahrt .zeit, .abfahrt .ziel, .abfahrt .gleis, .abfahrt td.rechts { width: auto; }
  .abfahrt .zeit, .abfahrt .uhr, .abfahrt .ziel, .abfahrt .gleis { white-space: normal; overflow-wrap: anywhere; }
  .abfahrt .zeit { grid-column: 1; grid-row: 1 / span 2; min-width: 0; }
  .abfahrt .ziel, .abfahrt .gleis { grid-column: 2; }
  .abfahrt .hinweis { grid-column: 1 / -1; margin-top: 0.5rem; }
  .abfahrt td.rechts { grid-column: 1 / -1; text-align: left; }
  .abfahrt .aktionen { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start;
    margin: 0.25rem 0 0 -0.5rem; }
  .ziel strong { white-space: normal; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .umschalten { animation: none; }
}