/* Öffentliche Seiten. Eigene Datei, damit das App-Stylesheet nicht für
   Besucher mitgeladen wird, die es nie brauchen — und damit Änderungen hier
   die angemeldete Oberfläche nicht anfassen können.
   Farben und Typografie sind bewusst identisch zu style.css. */
:root {
  --accent: #0071e3;
  --accent-dark: #0060c0;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --green: #1d7a3d;
  --hairline: rgba(60, 60, 67, .12);
  --glass: rgba(255, 255, 255, .72);
  --shadow: 0 10px 34px rgba(24, 39, 75, .09), 0 2px 8px rgba(24, 39, 75, .05);
  --radius: 22px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    Roboto, "Helvetica Neue", sans-serif;
  font-size: 17px; line-height: 1.55;
  background:
    radial-gradient(1100px 700px at 12% -10%, rgba(0, 113, 227, .16), transparent 60%),
    radial-gradient(900px 600px at 105% 8%, rgba(175, 82, 222, .13), transparent 55%),
    #f4f5f7;
  background-attachment: fixed;
}
img { max-width: 100%; }
a { color: var(--accent); }

/* Seitenrand in rem, nicht px: stellt jemand die Systemschrift größer, wächst
   der Rand mit — sonst drängt der größere Text noch enger an den Bildschirm.
   `max()` mit der Safe Area hält den Text im Querformat aus der Notch. */
.bahn {
  max-width: 1080px; margin: 0 auto;
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(1.5rem, env(safe-area-inset-right));
}
@media (min-width: 600px) {
  .bahn { padding-left: max(2rem, env(safe-area-inset-left));
          padding-right: max(2rem, env(safe-area-inset-right)); }
}
.schmal { max-width: 720px; }
.mitte { text-align: center; }
.klein { font-size: .88rem; color: var(--muted); }
.liste-blank { list-style: none; margin: 8px 0 0; padding: 0; }
.liste-blank li { margin-bottom: 6px; }

/* Tracking wird mit der Schriftgröße enger: große Buchstaben stehen sonst
   optisch zu weit auseinander. Leading umgekehrt — je größer, desto enger.
   `text-wrap: balance` verteilt Überschriften auf gleich lange Zeilen, statt
   ein einzelnes Wort oder einen Gedankenstrich hängen zu lassen. */
h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1;
     letter-spacing: -.03em; margin: 0 0 18px; text-wrap: balance; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.2;
     letter-spacing: -.02em; margin: 0 0 14px; text-wrap: balance; }
h3 { font-size: 1.25rem; letter-spacing: -.01em; margin: 0 0 10px;
     text-wrap: balance; }
/* `pretty` verhindert einzelne Wörter in der letzten Zeile. */
.fuehrung { font-size: 1.13rem; color: #3c3c43; text-wrap: pretty; }
p { text-wrap: pretty; }

/* ------------------------------------------------------------------ Kopf */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 250, 252, .8);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid var(--hairline);
}
.kopf .bahn { display: flex; align-items: center; justify-content: space-between;
              gap: 12px; padding-top: 11px; padding-bottom: 11px; }
.marke { display: inline-flex; align-items: center; gap: 9px;
         font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em;
         color: var(--text); text-decoration: none; }
.marke img { border-radius: 7px; }
.kopf-nav { display: flex; align-items: center; gap: 4px; }
.nav-link { color: var(--text); text-decoration: none; white-space: nowrap;
            padding: 8px 12px; border-radius: 999px; font-size: .95rem;
            transition: background .18s; }
.nav-link:hover { background: rgba(120, 120, 128, .14); }
.nav-link:active { opacity: .6; }
.nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Standard ist die lange Beschriftung; die kurze erscheint erst schmal. */
.nur-schmal { display: none; }

/* ----------------------------------------------------------------- Knopf */
.knopf {
  display: inline-block; background: var(--accent); color: #fff;
  text-decoration: none; font-weight: 600; font-size: 1rem;
  padding: 13px 26px; border-radius: 999px; white-space: nowrap;
  transition: background .18s, transform .18s;
}
.knopf:hover { background: var(--accent-dark); }
.knopf:active { transform: scale(.97); }
.knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.knopf-klein { padding: 9px 18px; font-size: .93rem; }
.knopf-still { background: rgba(120, 120, 128, .14); color: var(--text); }
.knopf-still:hover { background: rgba(120, 120, 128, .22); }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.mitte-reihe { justify-content: center; }

/* ---------------------------------------------------------------- Held */
.held { padding: clamp(40px, 7vw, 84px) 0 clamp(30px, 5vw, 60px); }
.held-raster { display: grid; grid-template-columns: 1.15fr .85fr;
               gap: 48px; align-items: center; }
.held-fussnote { margin-top: 18px; }

/* --------------------------------------------------------- iPhone-Rahmen */
.iphone {
  position: relative; width: 300px; max-width: 100%; margin: 0 auto;
  padding: 11px; border-radius: 46px;
  background: linear-gradient(155deg, #48484a 0%, #1c1c1e 55%, #2c2c2e 100%);
  box-shadow: 0 22px 50px rgba(24, 39, 75, .22),
              0 3px 10px rgba(24, 39, 75, .14),
              inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.iphone-schirm { display: block; width: 100%; height: auto;
                 border-radius: 36px; background: #fff; }
.iphone-insel {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  width: 78px; height: 22px; border-radius: 999px; background: #000; z-index: 2;
}

/* ------------------------------------------- Bühne: App und Browser im Wechsel
   Feste Höhe, damit beim Wechsel nichts springt. Beide Folien liegen
   übereinander und werden übergeblendet — kein Verschieben, weil hier keine
   Geste im Spiel ist, die eine Richtung vorgäbe. */
.buehne { width: 100%; max-width: 420px; margin: 0 auto; }
.buehne-flaeche { position: relative; height: 671px; }
.folie {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; transform: scale(.985);
  transition: opacity .55s ease, transform .55s ease;
  pointer-events: none;
}
.folie.an { opacity: 1; transform: none; pointer-events: auto; }

/* Seitenpunkte wie in iOS: der aktive deckend, der andere durchscheinend.
   Der Knopf ist 22 px groß, der Punkt darin 9 — anklickbar bleibt die
   ganze Fläche, sichtbar nur der Punkt. */
.punkte { display: flex; justify-content: center; gap: 4px; margin-top: 16px; }
.punkt {
  width: 22px; height: 22px; padding: 0; border: 0; background: none;
  display: grid; place-items: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.punkt::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(0, 113, 227, .26);
  transition: background .28s ease, transform .28s ease;
}
.punkt.an::after { background: var(--accent); transform: scale(1.18); }
.punkt:hover::after { background: rgba(0, 113, 227, .45); }
.punkt.an:hover::after { background: var(--accent); }
.punkt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px;
  border-radius: 50%; }

/* --------------------------------------------------------- Browserfenster */
.fenster {
  width: 100%; border-radius: 14px; overflow: hidden; background: #fff;
  border: 1px solid var(--glass-border);
  box-shadow: 0 22px 50px rgba(24, 39, 75, .18),
              0 3px 10px rgba(24, 39, 75, .10);
}
.fenster-leiste {
  display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px;
  background: rgba(120, 120, 128, .12);
  border-bottom: 1px solid var(--hairline);
}
.fenster-punkt { width: 8px; height: 8px; border-radius: 50%;
  background: rgba(60, 60, 67, .22); }
.fenster img { display: block; width: 100%; height: auto; }

/* ------------------------------------------------------- App-Store-Abzeichen
   Apples Vorgabe: unverändert übernehmen, nicht nachbauen, nicht einfärben. */
.app-store { display: inline-block; margin-top: 18px; border-radius: 9px;
  transition: transform .12s ease, opacity .18s ease; }
.app-store img { display: block; height: 50px; width: auto; }
.app-store:hover { opacity: .88; }
.app-store:active { transform: scale(.97); }
.app-store:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ------------------------------------------------------------ Abschnitte */
.abschnitt { padding: clamp(46px, 7vw, 88px) 0; }
.abschnitt-getoent { background: var(--glass);
                     border-top: 1px solid var(--hairline);
                     border-bottom: 1px solid var(--hairline); }
.abschnitt h2 + .fuehrung { margin-top: -4px; }

/* --------------------------------------------------------------- Schritt */
/* 420 statt 300: die Bühne muss neben dem Telefon auch das Browserfenster
   fassen, und darin soll man noch erkennen, was auf der Seite steht. */
.schritt { display: grid; grid-template-columns: 1fr 420px; gap: 46px;
           align-items: center; padding: 30px 0; }
.schritt-gedreht .schritt-text { order: 2; }
.schritt-gedreht .schritt-bild { order: 1; }
.ziffer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 1rem;
  margin-bottom: 12px;
}

/* --------------------------------------------------------------- Tabelle */
.tabelle-rahmen { overflow-x: auto; margin: 22px 0 14px;
                  border-radius: var(--radius); box-shadow: var(--shadow);
                  background: rgba(255, 255, 255, .85); }
.saetze { width: 100%; border-collapse: collapse; font-size: .97rem; }
.saetze th, .saetze td { padding: 0.8rem 1rem; text-align: left;
                         border-bottom: 1px solid var(--hairline); }
.saetze thead th { font-size: .82rem; text-transform: uppercase;
                   letter-spacing: .04em; color: var(--muted); }
.saetze tbody tr:last-child th, .saetze tbody tr:last-child td { border-bottom: 0; }
.saetze tbody th { font-weight: 500; }
.ja { color: var(--green); font-weight: 600; }
.nein { color: var(--muted); }

/* ------------------------------------------------------------------- FAQ */
.faq { background: rgba(255, 255, 255, .8); border-radius: 16px;
       box-shadow: var(--shadow); margin-bottom: 10px; padding: 0.125rem 1.25rem; }
.faq summary { cursor: pointer; font-weight: 600; padding: 15px 0;
               list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--muted);
                      font-weight: 400; font-size: 1.35rem; line-height: 1; }
.faq[open] summary::after { content: "–"; }
.faq p { margin: 0 0 16px; color: #3c3c43; }

/* ----------------------------------------------------------------- Karten */
.karten { list-style: none; margin: 24px 0 0; padding: 0;
          display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.karte { background: rgba(255, 255, 255, .85); border-radius: var(--radius);
         box-shadow: var(--shadow); padding: 1.25rem 1.4rem; }
.karte h3 { font-size: 1.05rem; margin-bottom: 6px; }
.karte h3 a { text-decoration: none; }
.karte h3 a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ Fuß */
.fuss { border-top: 1px solid var(--hairline); padding: 44px 0 30px;
        background: rgba(250, 250, 252, .7); }
.fuss-inhalt { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.fuss a { color: var(--text); text-decoration: none; font-size: .92rem; }
.fuss a:hover { text-decoration: underline; }
.fuss .hinweis { margin-top: 30px; padding-top: 18px;
                 border-top: 1px solid var(--hairline); }

/* ------------------------------------------------------------- Ratgeber */
.artikel { padding: clamp(32px, 5vw, 60px) 0; }
.artikel .bahn { max-width: 720px; }
.artikel h2 { margin-top: 34px; }
.artikel li { margin-bottom: 8px; }
.artikel blockquote { margin: 22px 0; padding: 0.9rem 1.25rem;
                      border-left: 3px solid var(--accent);
                      background: rgba(255, 255, 255, .7);
                      border-radius: 0 12px 12px 0; }
.brotkrumen { font-size: .88rem; color: var(--muted); margin-bottom: 18px; }
.brotkrumen a { color: var(--muted); }
.artikel-schluss { margin-top: 40px; padding: 1.5rem; border-radius: var(--radius);
                   background: rgba(255, 255, 255, .85); box-shadow: var(--shadow);
                   text-align: center; }

/* ------------------------------------------------------------ Einblenden */
/* Nur wenn JavaScript läuft. Ohne JS bleibt alles sichtbar — der Inhalt
   steht ohnehin vollständig im HTML, Suchmaschinen sehen ihn immer. */
.js .enthuellen { opacity: 0; transform: translateY(20px);
                  transition: opacity .65s ease, transform .65s ease; }
.js .enthuellen.sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .enthuellen { opacity: 1; transform: none; transition: none; }
  /* Kein Selbstlauf (das regelt das Skript) und kein Maßstabswechsel — die
     Überblendung der Deckkraft bleibt, sie hilft beim Verstehen und ist
     nicht vestibulär. */
  .folie { transform: none; transition: opacity .25s ease; }
  .folie.an { transform: none; }
  .app-store:active { transform: none; }
}

/* ------------------------------------------------------------ Schmal */
@media (max-width: 860px) {
  .held-raster { grid-template-columns: 1fr; gap: 34px; }
  .held-raster .held-text { text-align: center; }
  .held-raster .knopf-reihe { justify-content: center; }
  .schritt { grid-template-columns: 1fr; gap: 26px; text-align: center; }
  .schritt-gedreht .schritt-text { order: 0; }
  .schritt-gedreht .schritt-bild { order: 0; }
  .karten { grid-template-columns: 1fr; }
  .fuss-inhalt { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 560px) {
  /* Auf schmalen Geräten haben nur "Anmelden" und der Knopf Platz. Der
     Ratgeber bleibt über den Fuß erreichbar — Bestandsnutzer brauchen den
     Weg zur Anmeldung dringender als die Navigation. Der Knopf verkürzt
     sich auf "Starten", damit der Markenname stehen bleiben kann. */
  .nav-weit, .nur-weit { display: none; }
  .nur-schmal { display: inline; }
  .nav-link { padding: 8px 10px; }
  .knopf-klein { padding: 9px 16px; }
  .marke { font-size: 1rem; gap: 7px; }
}

/* ------------------------------------------------------------- Rechner */
.rechner { margin-top: 26px; display: grid; gap: 16px; }
.rechner label { display: block; font-size: .92rem; font-weight: 600; }
.rechner input[type=text], .rechner input[type=time], .rechner select {
  width: 100%; margin-top: 5px; padding: 11px 13px; font: inherit;
  font-weight: 400; border: 1px solid var(--hairline); border-radius: 12px;
  background: rgba(255,255,255,.9); color: var(--text);
}
/* Ohne das ignoriert iOS Safari `width` bei Zeit- und Datumsfeldern
   vollstaendig: es behandelt sie als Widget mit eigener, vom Inhalt
   bestimmter Groesse. Auf dem iPhone stand „Hinfahrt ab" deshalb NEBEN
   einem winzigen Feld, waehrend „Von" und „Nach" ordentlich darueber
   sassen — zwei Bauweisen in einem Formular.
   `display: block` gehoert dazu: das Feld bleibt sonst inline und laesst
   die Beschriftung neben sich stehen. Nachgemessen am 16.08.2026 in
   Safari auf einem iPhone 15 Plus. */
.rechner input[type=time], .rechner input[type=date] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  /* Die Standardhoehe kommt sonst vom Widget und weicht von den
     Textfeldern daneben ab. */
  min-height: 46px;
}
.rechner input:focus-visible, .rechner select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* `1fr` heisst in Wahrheit `minmax(auto, 1fr)`: ein Kind darf seine Spalte
   ueber den Anteil hinaus aufblaehen, wenn sein Inhalt breiter ist. Bei
   `input[type=time]` bringt iOS Safari genau so eine intrinsische
   Mindestbreite mit — die Spalten wurden dadurch ungleich breit und die
   Luecke dazwischen verschwand. In Chrome faellt das nicht auf; dort sind
   beide Paare exakt 14px auseinander. `style.css` kennt die Zeile laengst,
   der Landing-Seite fehlte sie. */
.feld-paar > * { min-width: 0; }
.feld { border: 0; padding: 0; margin: 0; }
.feld legend { font-size: .92rem; font-weight: 600; padding: 0 0 8px; }
/* Chips — dieselbe Form wie in der App (`Chip` in src/components/ui.tsx):
   Pille mit 1px Rand, ausgewählt getönt statt gefüllt, Text im Akzent.
   Kästchen und Auswahllisten wären auf dem Handy zu klein zum Treffen. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; margin: 0; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span {
  display: block; padding: 8px 13px; border-radius: 999px;
  border: 1px solid transparent; background: rgba(120, 120, 128, .12);
  font-size: .9rem; font-weight: 500; line-height: 1.3;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.chip input:checked + span { background: rgba(0, 113, 227, .12);
                             border-color: rgba(0, 113, 227, .45);
                             color: var(--accent); }
.chip input:active + span { transform: scale(.94); }
.chip input:focus-visible + span { outline: 2px solid var(--accent);
                                   outline-offset: 2px; }
.wahl { display: flex; gap: 9px; align-items: flex-start; font-weight: 400;
        padding: 7px 0; cursor: pointer; }
.wahl input { margin-top: 3px; }
/* Vorschlagsliste der Bahnhofssuche */
label:has(.vorschlag) { position: relative; }
.vorschlag { position: absolute; z-index: 20; left: 0; right: 0; margin: 2px 0 0;
             padding: 5px; list-style: none; background: #fff;
             border-radius: 12px; box-shadow: var(--shadow);
             max-height: 240px; overflow-y: auto; }
.vorschlag li { padding: 9px 11px; border-radius: 8px; cursor: pointer;
                font-weight: 400; font-size: .95rem; }
.vorschlag li:hover, .vorschlag li[aria-selected=true] {
  background: rgba(0,113,227,.12); }
.ergebnis { margin-top: 22px; padding: 24px; border-radius: var(--radius);
            background: rgba(255,255,255,.9); box-shadow: var(--shadow);
            text-align: center; }
.ergebnis .betrag { font-size: clamp(2.2rem, 7vw, 3.2rem); font-weight: 700;
                    letter-spacing: -.03em; color: var(--accent);
                    line-height: 1.1; }
.ergebnis .zeile { color: var(--muted); font-size: .95rem; margin-top: 8px; }
.ergebnis .hinweis { margin-top: 14px; font-size: .9rem; }
@media (max-width: 560px) { .feld-paar { grid-template-columns: 1fr; } }

/* Segmentierte Auswahl — wenige, sich ausschliessende Optionen, alle
   sichtbar und mit einem Griff erreichbar. Der Schalter reagiert auf den
   Druck, nicht erst aufs Loslassen. */
.segmente { display: flex; gap: 4px; padding: 4px;
            background: rgba(120, 120, 128, .12); border-radius: 14px; }
.segment { flex: 1; position: relative; margin: 0; }
.segment input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.segment span {
  display: block; text-align: center; padding: 10px 8px;
  border-radius: 11px; font-size: .92rem; font-weight: 600;
  color: var(--muted); background: transparent; white-space: nowrap;
  transition: background .18s, color .18s, transform .12s;
}
.segment input:checked + span { background: #fff; color: var(--text);
                                box-shadow: 0 1px 3px rgba(24,39,75,.14); }
.segment input:active + span { transform: scale(.97); }
.segment input:focus-visible + span { outline: 2px solid var(--accent);
                                      outline-offset: 2px; }
.feld-hinweis { margin: 9px 2px 0; }

/* Pop-up-Knopf nach Apple-Muster. Der gewählte Wert ist die Aussage und
   steht im Akzent; das Doppelzeichen rechts ist das Versprechen, dass es
   mehr davon gibt. Darunter liegt ein natives <select> — es öffnet auf dem
   iPhone das Rad und auf dem Mac das Menü, also genau die Auswahl, die der
   Nutzer schon kennt. Ein nachgebautes Listenfeld wäre fremd, schwerer
   bedienbar und für Tastatur und Screenreader ein Rückschritt. */
.popup { position: relative; }
.popup select {
  appearance: none; -webkit-appearance: none;
  width: 100%; margin: 0; padding: 11px 40px 11px 14px;
  border: 0; border-radius: 12px;
  background: rgba(120, 120, 128, .12);
  color: var(--accent); font: inherit; font-size: .95rem; font-weight: 500;
  cursor: pointer; text-overflow: ellipsis;
  transition: background .15s, transform .1s;
}
/* Rückmeldung auf den Druck, nicht erst aufs Loslassen. */
.popup select:active { transform: scale(.985); background: rgba(120,120,128,.2); }
.popup select:focus-visible { outline: 2px solid var(--accent);
                              outline-offset: 2px; }
.popup::after {
  content: ""; position: absolute; right: 14px; top: 50%;
  width: 12px; height: 18px; margin-top: -9px; pointer-events: none;
  background: var(--accent);
  -webkit-mask: var(--chevron) center / contain no-repeat;
  mask: var(--chevron) center / contain no-repeat;
}
:root {
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' \
viewBox='0 0 12 18'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.9' \
stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.2 6 3.7l3.5 \
3.5'/%3E%3Cpath d='M2.5 10.8 6 14.3l3.5-3.5'/%3E%3C/g%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) {
  .popup select:active { transform: none; }
}

/* Zugliste — eine eingefasste Gruppe wie in den Systemeinstellungen: eine
   Karte, Zeilen durch Haarlinien getrennt, die Trennlinie am Text ausgerichtet
   statt über die ganze Breite. Angehakt ist der Ausgangszustand; abwählen ist
   die Handlung, deshalb bleibt die abgewählte Zeile lesbar und rückt nur
   zurück. */
.zuggruppe { min-width: 0; }
.zugkopf { display: flex; align-items: baseline; justify-content: space-between;
           gap: 10px; font-size: .92rem; font-weight: 600; padding: 0 2px 8px; }
.zugspanne { font-weight: 400; color: var(--muted); font-size: .88rem;
             font-variant-numeric: tabular-nums; }
.umschalten { border: 0; background: none; padding: 0; cursor: pointer;
              font: inherit; font-weight: 500; font-size: .88rem;
              color: var(--accent); }
.umschalten:hover { text-decoration: underline; }
.umschalten:focus-visible { outline: 2px solid var(--accent);
                            outline-offset: 3px; border-radius: 4px; }

.zugliste { list-style: none; margin: 0; padding: 0; background: #fff;
            border-radius: 14px; overflow: hidden;
            box-shadow: 0 1px 3px rgba(24, 39, 75, .10);
            max-height: 19rem; overflow-y: auto;
            -webkit-overflow-scrolling: touch; }
.zugliste li + li > label { border-top: 1px solid var(--hairline); }
.zugliste label {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  margin: 0 0 0 12px; padding: 11px 12px 11px 0;
  font-size: .92rem; font-weight: 400; transition: opacity .18s;
}
.zugliste input { flex: none; width: 20px; height: 20px; margin: 0;
                  accent-color: var(--accent); }
.zugzeit { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; }
.zugname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
           white-space: nowrap; }
.zugwert { flex: none; color: var(--muted); font-size: .84rem;
           font-variant-numeric: tabular-nums; }
/* Abgewählt: gedämpft, aber nicht unlesbar — man muss ja wiederfinden, was
   man gerade weggeklickt hat. */
.zugliste label:has(input:not(:checked)) { opacity: .45; }
.zugleer { padding: 13px 14px; color: var(--muted); font-size: .9rem; }

@media (max-width: 520px) {
  .segmente { flex-wrap: wrap; }
  .segment { flex: 1 1 calc(50% - 4px); }
  .segment span { font-size: .88rem; padding: 10px 6px; }
  /* Auf schmalen Geräten fällt die Statistik weg: Uhrzeit und Zugnummer
     sind, was man zum Abwählen braucht. */
  .zugwert { display: none; }
}

/* Kündigungsformular. Bewusst schmal und ohne Ablenkung — hier soll niemand
   aufgehalten werden. */
.kuendigen-form { display: grid; gap: 4px; margin-top: 18px; max-width: 520px; }
.kuendigen-form label { font-size: .92rem; font-weight: 600; margin-top: 12px; }
.kuendigen-form input, .kuendigen-form select, .kuendigen-form textarea {
  width: 100%; padding: 11px 14px; border: 1px solid var(--hairline);
  border-radius: 12px; font: inherit; font-size: .95rem; background: #fff;
}
.kuendigen-form textarea { resize: vertical; }
.kuendigen-form .knopf { margin-top: 20px; justify-self: start; }
.hinweis-kasten {
  margin: 24px 0; padding: 18px 20px; border-radius: var(--radius);
  background: rgba(120, 120, 128, .1);
}
.hinweis-kasten h2 { font-size: 1.05rem; margin-bottom: 6px; }
.hinweis-kasten p { margin: 0; font-size: .95rem; }

/* Tarife. Zwei Karten nebeneinander, die bezahlte hervorgehoben — aber ohne
   die kostenlose kleinzureden: sie ist ein echtes Angebot, kein Köder. */
.tarife { display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
          margin: 30px 0 26px; align-items: start; }
.tarif { position: relative; padding: 26px 24px; border-radius: var(--radius);
         background: #fff; box-shadow: var(--shadow); }
.tarif-hervor { box-shadow: 0 14px 40px rgba(0, 113, 227, .16),
                            0 2px 8px rgba(24, 39, 75, .06);
                border: 1px solid rgba(0, 113, 227, .3); }
.tarif-marke { position: absolute; top: -11px; left: 24px;
               background: var(--accent); color: #fff; font-size: .75rem;
               font-weight: 600; letter-spacing: .02em;
               padding: 4px 11px; border-radius: 999px; }
.tarif h3 { margin: 0 0 10px; }
.tarif-preis { font-size: 2.1rem; font-weight: 700; letter-spacing: -.02em;
               line-height: 1.1; margin: 0; }
.tarif-preis span { display: block; font-size: .9rem; font-weight: 400;
                    color: var(--muted); letter-spacing: 0; margin-top: 2px; }
.tarif-alternativ { margin: 6px 0 0; }
.tarif-liste { list-style: none; margin: 18px 0 14px; padding: 0;
               font-size: .95rem; }
.tarif-liste li { position: relative; padding-left: 24px; margin-bottom: 9px; }
.tarif-liste li::before { content: "✓"; position: absolute; left: 0;
                          color: var(--green); font-weight: 700; }
@media (max-width: 700px) {
  .tarife { grid-template-columns: 1fr; }
  .tarif-hervor { margin-top: 12px; }
}

/* ------------------------------------------------------ Streckenseiten */
/* Die Zahlen sind hier der Inhalt, nicht die Illustration. Deshalb tragen
   sie Gewicht: grosse Ziffern, ruhige Beschriftung darunter, und Balken,
   die man vergleichen kann, ohne sie zu lesen. */

.zahlenband {
  display: grid; gap: 12px; margin: 28px 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.zahl {
  padding: 16px 18px; border-radius: 16px;
  background: rgba(255, 255, 255, .85); box-shadow: var(--shadow);
}
.zahl strong {
  display: block; font-size: 1.6rem; line-height: 1.1;
  /* Negative Laufweite: grosse Ziffern stehen sonst zu weit auseinander. */
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.zahl span { display: block; margin-top: 4px; font-size: .84rem;
             color: var(--muted); }
/* Nur dort rot, wo die Zahl wirklich ein Befund ist — sonst nutzt sich die
   Farbe ab und sagt am Ende gar nichts mehr. */
.zahl-warn strong { color: #b3261e; }

.verteilung { width: 100%; border-collapse: collapse; margin: 18px 0; }
.verteilung th[scope="row"] { text-align: left; font-weight: 500;
                              padding: 7px 12px 7px 0; white-space: nowrap; }
.verteilung thead th { text-align: left; font-size: .82rem; font-weight: 500;
                       color: var(--muted); padding-bottom: 6px;
                       border-bottom: 1px solid var(--hairline); }
.verteilung td { padding: 7px 0; }
.verteilung .wert { text-align: right; padding-left: 14px;
                    font-variant-numeric: tabular-nums; white-space: nowrap; }
.verteilung .schwach { color: var(--muted); font-size: .88rem; }
.balken-zelle { width: 100%; position: relative; }
.balken {
  display: inline-block; height: 10px; border-radius: 5px;
  background: var(--accent); vertical-align: middle;
  /* Ein Balken von 0 % waere unsichtbar — und dann sieht die Zeile aus wie
     ein Fehler statt wie eine kleine Zahl. */
  min-width: 3px;
}
.balken-wert { margin-left: 8px; font-size: .84rem; color: var(--muted);
               font-variant-numeric: tabular-nums; }
.stundentabelle th[scope="row"] { font-variant-numeric: tabular-nums;
                                  color: var(--muted); font-size: .9rem; }
.stundentabelle .hervor th[scope="row"] { color: var(--text); font-weight: 600; }
.stundentabelle .hervor .balken { background: #b3261e; }
/* Streckennamen bleiben auf breiten Schirmen in einer Zeile. Mit
   `normal` brach „Köln Hbf → Düsseldorf Hbf" dreizeilig um, obwohl die
   Tabelle 720 px breit ist: Die Balkenzelle nimmt sich den Rest, und die
   erste Spalte wurde auf Wortbreite gequetscht. Im Blocklayout unten gilt
   ohnehin wieder `normal`. */
.streckenuebersicht th[scope="row"] { white-space: nowrap;
                                      padding-right: 20px; }

.geldtabelle .betrag { font-weight: 600; font-size: 1.05rem; }
.geldtabelle th[scope="row"] { white-space: normal; }

.methodenkasten {
  margin-top: 40px; padding: 1.25rem 1.5rem; border-radius: var(--radius);
  background: rgba(255, 255, 255, .6);
  border: 1px solid var(--hairline);
}
.methodenkasten h2 { margin-top: 0; font-size: 1.05rem; }
.methodenkasten ul { margin: 10px 0 0; padding-left: 1.1rem; }
.methodenkasten li { font-size: .92rem; }
.hinweis { font-size: .9rem; color: var(--muted); }
.streckenliste { padding-left: 1.1rem; }

/* Auf schmalen Geraeten wird aus jeder Tabellenzeile ein Block: Beschriftung
   oben, Balken darunter, Werte rechts daneben.

   Als Spalten gemessen (375 px): „bis 5 Minuten" brach dreizeilig um,
   waehrend der Balken auf Daumenbreite zusammenschrumpfte — die Zahl war
   noch da, der Vergleich aber nicht mehr ablesbar. Genau dafuer ist der
   Balken da. */
@media (max-width: 560px) {
  .verteilung, .verteilung tbody, .verteilung tr { display: block; }
  .verteilung thead { display: none; }
  .verteilung tr { padding: 10px 0; border-bottom: 1px solid var(--hairline); }
  .verteilung tr:last-child { border-bottom: none; }
  .verteilung th[scope="row"] {
    display: block; white-space: normal; font-size: .95rem; padding: 0 0 6px;
  }
  .verteilung td { display: inline-block; vertical-align: middle; padding: 0; }
  .verteilung .balken-zelle { width: 55%; }
  .verteilung .wert { width: 20%; text-align: right; padding-left: 8px; }
  .verteilung .balken { height: 12px; }
  /* Die Uebersicht traegt in der ersten Spalte einen Link — der bekommt
     hier die volle Breite, sonst klebt er am Balken. */
  .streckenuebersicht th[scope="row"] { font-weight: 600;
                                       white-space: normal;
                                       padding-right: 0; }
  .zahl strong { font-size: 1.4rem; }
}

/* Weniger Bewegung, weniger Transparenz — dieselben Regeln wie im Rest der
   Seite, damit die Zahlen auch bei hohem Kontrastbedarf lesbar bleiben. */
@media (prefers-contrast: more) {
  .zahl, .geldtabelle .betrag { font-weight: 600; font-size: 1.05rem; }
.geldtabelle th[scope="row"] { white-space: normal; }

.methodenkasten { background: #fff; border: 1px solid var(--text); }
}

/* Eine Zuggattung, die zur gewaehlten Fahrkarte nicht passt: sichtbar, aber
   nicht waehlbar. Ausblenden waere schlechter — dann waere unklar, warum
   die Auswahl je nach Karte anders aussieht. */
.segment-aus { opacity: .38; }
.segment-aus span { cursor: not-allowed; }