/* Q4 Taxi — Komponenten der Kundenstrecke und des Praxis-Portals.
   (Visuelles Redesign, _docs/ux/redesign-kunde.md §2.4.2–2.4.11)

   Ladereihenfolge: style.css → schale.css → tokens.css → DIESE DATEI →
   Seiten-CSS → <style>-Branding. assets/style.css bleibt unangetastet, das
   Backoffice haengt daran.

   Zwei Regeln tragen alles:
     · Karten haben eine FLAECHE und einen Schatten, keinen Umriss.
     · --akzent ist ausschliesslich Hintergrund/Fuellung. Marke als Schrift
       oder Linie heisst --akzent-text; Kontrast traegt immer --ink. */

/* ── Layout ───────────────────────────────────────────────────────────── */

.wrap { width: min(var(--spalte-breit), 100%); margin: 0 auto; padding: 0 var(--s4); }
.eng  { max-width: var(--spalte); margin: 0 auto; }

main { padding: 0 0 var(--s10); }
main > .wrap { padding-top: var(--s5); }

/* ── Kopf ─────────────────────────────────────────────────────────────── */

.kopf {
  position: sticky; top: 0; z-index: 40;
  background: var(--karte);
  border-bottom: 0;
  box-shadow: 0 1px 0 var(--linie);
  padding-top: var(--safe-t);
}
@supports (backdrop-filter: blur(1px)) {
  .kopf {
    background: color-mix(in srgb, var(--karte) 88%, transparent);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
  }
}

.kopf-in {
  display: flex; align-items: center; gap: var(--s4);
  width: min(var(--spalte-breit), 100%); margin: 0 auto;
  padding: var(--s3) var(--s4); min-height: 64px;
}

.marke {
  display: flex; align-items: center; gap: var(--s3);
  text-decoration: none; color: var(--ink); min-width: 0; font-weight: 700;
}
.marke img { max-height: 36px; width: auto; display: block; }
.marke-text { min-width: 0; }

/* Dachzeichen, wenn kein Logo hinterlegt ist: die eine Stelle, an der die
   Markenfarbe als FLAECHE wirkt — deshalb darf sie hier auch hell sein. */
.marke-zeichen {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--akzent); color: var(--akzent-ink);
  border: 2px solid var(--ink); border-radius: var(--r-s);
  font-size: .72rem; font-weight: 800; letter-spacing: .14em;
  padding: 5px 9px; flex: none;
}
.marke-name {
  display: block; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.025em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.marke .zusatz {
  display: block; font-size: .62rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-mute); margin-top: 2px;
}

.kopf .nav { margin-left: auto; display: flex; gap: var(--s1); flex-wrap: nowrap; }
.kopf .nav a {
  padding: var(--s2) var(--s4); border-radius: var(--r-voll);
  color: var(--ink-soft); font-size: var(--t-s); font-weight: 550; text-decoration: none;
}
.kopf .nav a:hover { background: var(--flaeche); color: var(--ink); }
.kopf .nav a[aria-current="page"] { background: var(--ink); color: var(--karte); }

.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }
.kopf .nav + .kopf-rechts { margin-left: var(--s2); }

/* Telefon-Pille — die eine Pflichtangabe (Kontrakt §6.9). */
.tel-pille {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: var(--tap); padding: 0 var(--s4);
  border: 1.5px solid var(--linie-stark); border-radius: var(--r-voll);
  color: var(--ink); font-weight: 600; font-size: var(--t-s);
  font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap;
}
.tel-pille:hover { background: var(--flaeche); border-color: var(--ink); }
.tel-pille svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 420px) {
  .tel-pille .nr { position: absolute; width: 1px; height: 1px; overflow: hidden;
                   clip: rect(0 0 0 0); white-space: nowrap; }
  .tel-pille { padding: 0 var(--s3); min-width: var(--tap); justify-content: center; }
}

/* ── Seitenkopf ───────────────────────────────────────────────────────── */

.seitenkopf { margin: var(--s6) 0 var(--s8); }
.seitenkopf .eyebrow {
  font-size: var(--t-caps); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-mute); margin: 0 0 var(--s3);
}
.seitenkopf h1 { margin: 0; }
.seitenkopf .unter {
  font-size: 1.0625rem; color: var(--ink-soft); margin: var(--s3) 0 0; max-width: 46ch;
}

/* ── Karten und Bloecke ───────────────────────────────────────────────── */
/* Der zentrale Umbau: Flaeche + Schatten statt Rand. `.karte` bleibt als
   Alias, damit noch nicht umgebaute Portalseiten weiterlaufen. */

/* Abstand ZWISCHEN Bloecken ist --s8 (mobil) bzw. --s10 ab 720 px — deutlich
   mehr als die --s5 zwischen zwei Feldern INNERHALB eines Blocks. Genau
   dieser Unterschied macht aus einer Liste von Kaesten eine Gliederung. */
.block, .karte {
  background: var(--karte);
  border: 0; border-radius: var(--r-l);
  box-shadow: var(--sch-1);
  padding: var(--s6);
  margin: 0 0 var(--s8);
}
@media (min-width: 560px) { .block, .karte { padding: var(--s8); } }
@media (min-width: 720px) { .block, .karte { margin-bottom: var(--s10); } }

.block > :first-child, .karte > :first-child { margin-top: 0; }
.block > :last-child,  .karte > :last-child  { margin-bottom: 0; }

.block-kopf { display: flex; align-items: center; gap: var(--s3); margin: 0 0 var(--s5); }
.block-kopf h2, .block-kopf h3 { margin: 0; }
.block-kopf .zaehler {
  margin-left: auto; font-size: var(--t-xs); color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.block-ico {
  width: 38px; height: 38px; flex: none; border-radius: var(--r-s);
  display: flex; align-items: center; justify-content: center;
  background: var(--akzent); color: var(--akzent-ink);
}
.block-ico svg { width: 20px; height: 20px; }

/* Abstand ZWISCHEN Sektionen — ersetzt die handgesetzten margin-top:32px. */
.abschnitt { margin: var(--s12) 0 0; }
.abschnitt > .block-kopf { margin-bottom: var(--s4); }
@media (max-width: 559px) { .abschnitt { margin-top: var(--s10); } }

/* ── Knoepfe ──────────────────────────────────────────────────────────── */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--h-knopf); padding: 0 var(--s6);
  font: inherit; font-size: var(--t-m); font-weight: 600; letter-spacing: -.01em;
  border: 1.5px solid transparent; border-radius: var(--r-voll);
  background: var(--btn); color: var(--btn-ink);
  text-decoration: none; cursor: pointer; text-align: center;
  transition: transform .14s ease, background .18s ease, border-color .18s ease;
}
.knopf:hover { background: color-mix(in srgb, var(--btn) 88%, var(--ink)); opacity: 1; }
.knopf:active { transform: scale(.975); }
.knopf svg { width: 20px; height: 20px; flex: none; }

/* Sekundaer: eigener Rahmen statt „dasselbe ohne Fuellung". */
.knopf.leer {
  background: var(--karte); color: var(--ink); border-color: var(--linie-stark);
  font-weight: 550;
}
.knopf.leer:hover { background: var(--flaeche); border-color: var(--ink); }

/* Tertiaer: fast nur Text. */
.knopf.leise {
  background: transparent; border-color: transparent; color: var(--ink-soft);
  font-weight: 550; padding: 0 var(--s3);
}
.knopf.leise:hover { color: var(--ink); background: var(--flaeche); }

.knopf.gross { width: 100%; min-height: var(--h-knopf-gross); font-size: 1.0625rem; }
.knopf.klein { min-height: var(--tap); padding: 0 var(--s4); font-size: var(--t-s); }
.knopf.gefahr {
  background: transparent; color: var(--fehler);
  border-color: color-mix(in srgb, var(--fehler) 35%, var(--karte));
}
.knopf.gefahr:hover { background: var(--fehler-flaeche); border-color: var(--fehler); }
.knopf[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.knopf[disabled]:hover { background: var(--btn); }
.knopf.leer[disabled]:hover, .knopf.leise[disabled]:hover, .knopf.gefahr[disabled]:hover {
  background: transparent;
}

/* ── Felder ───────────────────────────────────────────────────────────── */

.feld { margin: 0 0 var(--s5); }
.feld > label {
  display: block; font-size: var(--t-s); font-weight: 600; color: var(--ink);
  margin: 0 0 var(--s2); letter-spacing: -.005em;
}
.feld > label .leise { font-weight: 400; color: var(--ink-mute); }

.feld input[type=text], .feld input[type=tel], .feld input[type=email],
.feld input[type=date], .feld input[type=time], .feld input[type=password],
.feld input[type=number], .feld select, .feld textarea {
  width: 100%; min-height: var(--h-feld); padding: 0 var(--s4);
  font: inherit; font-size: max(16px, 1rem); color: var(--ink);
  background: var(--karte); border: 1.5px solid var(--linie-stark);
  border-radius: var(--r-m);
  transition: border-color .16s ease, box-shadow .16s ease;
  appearance: none; -webkit-appearance: none;
}
.feld textarea { padding: var(--s3) var(--s4); min-height: 96px; line-height: 1.5; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--ink-soft); }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 10%, transparent);
}
.feld input::placeholder, .feld textarea::placeholder { color: var(--ink-mute); }
.feld [aria-invalid="true"] { border-color: var(--fehler); }
.feld input[readonly] { background: var(--flaeche); color: var(--ink-soft); }

/* Native Selects und Datums-/Zeitfelder bekommen dieselbe Metrik wie
   Textfelder — sonst stehen drei verschiedene Hoehen untereinander. */
.feld select {
  padding-right: var(--s10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2340454D' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--s4) center;
  background-size: 20px 20px;
}
.feld input[type=date], .feld input[type=time] { padding-right: var(--s3); }
.feld input::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }

.feld .hilfe, .hilfe {
  display: block; font-size: var(--t-xs); color: var(--ink-mute);
  margin: var(--s2) 0 0; line-height: 1.5;
}
.feld-paar { display: grid; gap: var(--s4); grid-template-columns: 1fr 1fr; }
@media (max-width: 460px) { .feld-paar { grid-template-columns: 1fr; } }

/* ── Auswahl (Checkbox-/Radio-Karten) ─────────────────────────────────── */
/* Zusatzoptionen sind nie vorangekreuzt (§ 312a Abs. 3 BGB) — die Optik
   aendert daran nichts, sie macht die Kaesten nur treffbar. */

.wahl { display: block; margin: 0 0 var(--s3); }
.wahl:last-child { margin-bottom: 0; }
.wahl label {
  display: flex; align-items: flex-start; gap: var(--s3);
  min-height: var(--tap); padding: var(--s4); margin: 0;
  background: var(--karte); border: 1.5px solid var(--linie);
  border-radius: var(--r-m); cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.wahl label:hover { border-color: var(--linie-stark); }
.wahl input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--ink); }
/* min-width:0 nimmt dem Textblock die Mindestbreite seines laengsten Wortes —
   sonst sprengt „Rollstuhlgerechtes" bei 200 % Zoom die Karte. */
.wahl label > span:last-child { min-width: 0; }
.wahl .titel {
  display: block; font-size: var(--t-m); font-weight: 600; letter-spacing: -.01em;
  line-height: 1.35;
}
.wahl .zusatz {
  display: block; font-size: var(--t-xs); color: var(--ink-mute);
  margin-top: 2px; line-height: 1.5;
}
.wahl-ico { width: 26px; height: 26px; flex: none; color: var(--ink-soft); margin-top: 1px; }

/* Gewaehlt: der Ink-Rahmen traegt den Kontrast, der Akzent traegt die Marke.
   Nie Farbe allein — Rahmenstaerke UND Fuellung aendern sich. */
.wahl:has(input:checked) label {
  border-color: var(--ink); border-width: 2px; padding: calc(var(--s4) - .5px);
  background: color-mix(in srgb, var(--akzent) 12%, var(--karte));
}

/* Auswahlkaesten in einem Block liegen direkt auf der Karte: dann bekommen
   sie die eingelassene Flaeche, sonst verschwindet Weiss auf Weiss. */
.block .wahl label, .karte .wahl label { background: var(--karte); }

/* Segmentwahl „Sofort / Zeitpunkt". Die Radios BLEIBEN Radios
   (kunde.js liest [name=zeitwahl]) — nur die Optik ist neu. */
/* Bewusst auf `fieldset.segment` verengt: das Praxis-Portal hat eine eigene
   `.segment`-Gruppe aus <div> + <button>, die davon unberuehrt bleibt. */
fieldset.segment {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2);
  padding: var(--s1); background: var(--flaeche); border-radius: var(--r-m);
  border: 0; margin: 0 0 var(--s5); min-width: 0;
}
/* Die Legende traegt die Ueberschrift nur fuer Vorlesesoftware — sichtbar
   steht sie im .block-kopf darueber. Ein <legend> wird von den Engines
   gesondert gerendert und ignoriert `width:1px` aus .sr, wenn es nicht
   ausdruecklich absolut gesetzt wird. */
legend.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.segment-teil { position: relative; display: flex; }
.segment-teil input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.segment-teil label {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--tap); padding: 0 var(--s3); border-radius: calc(var(--r-m) - 4px);
  font-size: var(--t-s); font-weight: 600; color: var(--ink-soft); text-align: center;
  line-height: 1.25;
}
.segment-teil input:checked + label {
  background: var(--karte); color: var(--ink); box-shadow: var(--sch-1);
}
.segment-teil input:focus-visible + label { outline: 3px solid var(--fokus); outline-offset: 2px; }

/* ── Route: Start und Ziel als ein Zusammenhang ───────────────────────── */

.route { padding-left: var(--s8); }
.route-zeile { position: relative; }

/* `right: calc(100% + 8px)` haengt den Punkt an die linke Kante SEINES
   Eingabefeldes und `top:50%` an dessen Mitte. Beides bleibt richtig, egal
   wie lang die Beschriftung darueber wird oder wie hoch der Hilfetext
   darunter ausfaellt — ein gerechneter Abstand vom Blockrand war genau daran
   gescheitert. */
.route-punkt {
  position: absolute; right: calc(100% + 8px); top: 50%;
  width: 16px; height: 16px; transform: translateY(-50%);
}
.route-punkt.start { border-radius: 50%; background: var(--ink); }
.route-punkt.ziel  { background: var(--akzent); border: 2px solid var(--ink); }
.route > .feld:last-child { margin-bottom: 0; }
@media (max-width: 400px) { .route { padding-left: var(--s6); } }

/* ── Adress-Autocomplete ──────────────────────────────────────────────── */

.suchfeld { position: relative; }
.suchfeld .liste {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  margin: 0; padding: var(--s1); list-style: none; max-height: 300px; overflow-y: auto;
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-m);
  box-shadow: var(--sch-2);
}
.suchfeld .liste:empty, .suchfeld .liste[hidden] { display: none; }
.suchfeld .liste li {
  padding: var(--s3) var(--s4); min-height: var(--tap); border-radius: var(--r-s);
  cursor: pointer; display: flex; flex-direction: column; justify-content: center;
}
.suchfeld .liste li[aria-selected=true], .suchfeld .liste li:hover { background: var(--flaeche); }
.suchfeld .liste .haupt { display: block; font-weight: 600; }
.suchfeld .liste .kontext { display: block; font-size: var(--t-xs); color: var(--ink-mute); }
.suchfeld .liste .leer { color: var(--ink-mute); cursor: default; }

/* Stammadressen als Abkuerzung ueber dem Startfeld */
.adr-pillen { display: flex; gap: var(--s2); flex-wrap: wrap; margin: 0 0 var(--s3); }
.adr-pille {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: var(--tap); padding: 0 var(--s4);
  border: 1.5px solid var(--linie); border-radius: var(--r-voll);
  background: var(--karte); color: var(--ink); font: inherit; font-size: var(--t-s);
  font-weight: 550; cursor: pointer;
}
.adr-pille:hover, .adr-pille:focus-visible { border-color: var(--ink); }
.adr-pille svg { width: 16px; height: 16px; color: var(--ink-mute); }

/* ── Meldungen und Rechtstext ─────────────────────────────────────────── */

.meldung {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s4) var(--s5); border-radius: var(--r-m);
  border: 0; margin: 0 0 var(--s5); font-size: var(--t-s); line-height: 1.55;
  background: var(--flaeche); color: var(--ink-soft);
}
.meldung svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.meldung.ok      { background: var(--gut-flaeche);    color: var(--gut); }
.meldung.hinweis { background: var(--warn-flaeche);   color: var(--warn); }
.meldung.fehler  { background: var(--fehler-flaeche); color: var(--fehler); }
.meldung strong, .meldung a { color: inherit; }
.meldung p { margin: 0; }

/* Der Rechtstext („ca."-Klausel) — eine ruhige eingelassene Flaeche statt
   einer Grauwand mitten im Fluss. Wortlaut unveraendert (Kontrakt §6.1). */
.rechtstext {
  background: var(--flaeche); border-radius: var(--r-m);
  padding: var(--s4) var(--s5); margin: 0 0 var(--s5);
  font-size: var(--t-xs); color: var(--ink-soft); line-height: 1.6; max-width: 62ch;
}
.rechtstext strong { color: var(--ink); font-weight: 600; }
.rechtstext p:last-child { margin-bottom: 0; }

/* ── Preis-Karte ──────────────────────────────────────────────────────── */

.preis {
  position: relative; overflow: hidden;
  background: var(--karte); border: 0; border-radius: var(--r-xl);
  box-shadow: var(--sch-3); padding: var(--s6); margin: 0 0 var(--s5);
}
.preis::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--akzent);
}
.preis .label {
  display: block; font-size: var(--t-caps); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-mute);
}
.preis .betrag {
  display: block; font-size: 2.25rem; font-weight: 700; letter-spacing: -.03em;
  line-height: 1.1; margin-top: var(--s1); font-variant-numeric: tabular-nums;
}
.preis .wichtig { font-weight: 600; color: var(--warn); }
.preis .hinweis { display: block; font-size: var(--t-xs); color: var(--ink-soft); }
.preis dl {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s4);
  margin: var(--s4) 0 0; padding-top: var(--s4); border-top: 1px solid var(--linie);
  font-size: var(--t-xs); color: var(--ink-mute);
}
.preis dt { margin: 0; }
.preis dd { margin: 0; text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ── Bestell-Leiste ───────────────────────────────────────────────────── */
/* Klebt ueber der Tab-Leiste: Preis und Hauptaktion bleiben erreichbar,
   ohne dass man 2000 px zurueckscrollt. */

.absenden {
  position: sticky; bottom: calc(var(--nav-h) + var(--safe-b));
  z-index: 30; margin: var(--s8) calc(var(--s4) * -1) 0;
  padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2);
  background: var(--karte);
  border-top: 1px solid var(--linie); box-shadow: var(--sch-2);
}
@supports (backdrop-filter: blur(1px)) {
  .absenden {
    background: color-mix(in srgb, var(--karte) 92%, transparent);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  }
}
.absenden .zeile {
  display: flex; align-items: baseline; gap: var(--s2);
  font-size: var(--t-s); color: var(--ink-mute); margin: 0;
}
.absenden .zeile strong {
  margin-left: auto; font-size: var(--t-l); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.absenden .fein { margin: 0; font-size: var(--t-xs); color: var(--ink-mute); line-height: 1.5; }
@media (min-width: 900px) {
  .absenden {
    position: static; background: none; backdrop-filter: none; box-shadow: none;
    border-top: 0; margin: var(--s8) 0 0; padding: 0;
  }
}

/* ── Listen (Fahrten, Patienten, Serien, Adressen) ────────────────────── */

.liste-karten { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.liste-karten > li {
  background: var(--karte); border: 0; border-radius: var(--r-l);
  box-shadow: var(--sch-1); padding: var(--s5);
}
.zeile { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.zeile .rechts { margin-left: auto; display: flex; gap: var(--s2); flex-wrap: wrap; }

.fahrt-karte .zeile { gap: var(--s2); }
.fahrt-nr { font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.fahrt-karte .strecke { margin: var(--s3) 0 0; }
.fahrt-karte .meta { margin: var(--s1) 0 0; font-size: var(--t-xs); color: var(--ink-mute); }
.fahrt-karte .stufe { margin: var(--s3) 0 0; font-size: var(--t-l); font-weight: 650;
                      letter-spacing: -.01em; }

/* Die aktive Fahrt: Ink-Rahmen fuer den Kontrast, Akzentkante fuer die Marke.
   Ein 2-px-Rahmen in --akzent waere bei hellem Gelb faktisch unsichtbar. */
.fahrt-karte.aktiv {
  position: relative; overflow: hidden;
  border: 1.5px solid var(--ink); box-shadow: var(--sch-2);
  padding-left: calc(var(--s5) + 5px);
}
.fahrt-karte.aktiv::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--akzent);
}

.aktionen { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s4); align-items: center; }
.aktionen > :first-child { flex: 1; }
.aktionen form { margin: 0; }
.aktionen .knopf { flex-shrink: 0; }

/* ── Status-Chips ─────────────────────────────────────────────────────── */
/* Zustand nie nur ueber Farbe: der Punkt kommt zum Text dazu. */

.status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px var(--s3); border-radius: var(--r-voll);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: -.005em;
  background: var(--flaeche); color: var(--ink-soft); border: 0;
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
                  background: currentColor; flex: none; }
.status.neu, .status.angeboten {
  color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, var(--karte));
}
.status.zugewiesen, .status.anfahrt, .status.eingetroffen, .status.besetzt {
  color: var(--ink); background: color-mix(in srgb, var(--akzent) 22%, var(--karte));
}
.status.abgeschlossen {
  color: var(--gut); background: color-mix(in srgb, var(--gut) 10%, var(--karte));
}
.status.storniert, .status.no_show {
  color: var(--fehler); background: color-mix(in srgb, var(--fehler) 8%, var(--karte));
}

.marke-mob {
  display: inline-flex; align-items: center; padding: 4px var(--s3);
  border-radius: var(--r-voll); font-size: var(--t-xs); font-weight: 600;
  background: var(--flaeche); color: var(--ink-soft); border: 0;
}

/* ── Leerzustand ──────────────────────────────────────────────────────── */

.leer-zustand { text-align: center; padding: var(--s10) var(--s5); }
.leer-zustand .ico {
  width: 56px; height: 56px; margin: 0 auto var(--s5); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--flaeche); color: var(--ink-soft);
}
.leer-zustand .ico svg { width: 28px; height: 28px; }
.leer-zustand h2 { font-size: var(--t-l); margin: 0 0 var(--s2); }
.leer-zustand p { color: var(--ink-mute); margin: 0 auto var(--s6); max-width: 38ch; }

/* ── Live-Tracking ────────────────────────────────────────────────────── */

.kartenfeld { position: relative; }
#karte {
  height: clamp(320px, 56vh, 480px); border: 0; border-radius: var(--r-xl);
  box-shadow: var(--sch-2); background: var(--flaeche); margin: 0 0 var(--s5);
  overflow: hidden;
}
.karte-folgen {
  position: absolute; z-index: 500; right: var(--s3); bottom: calc(var(--s5) + var(--s3));
  min-height: var(--tap); padding: 0 var(--s4);
  border: 1.5px solid var(--linie-stark); border-radius: var(--r-voll);
  background: var(--karte); color: var(--ink); font: inherit;
  font-size: var(--t-s); font-weight: 600; box-shadow: var(--sch-2); cursor: pointer;
}

/* Kartenmarker (Leaflet divIcon; iconSize [1,1], die Marker zentrieren sich
   hier selbst). */
.pin { position: absolute; transform: translate(-50%, -50%); }
.pin-start {
  width: 16px; height: 16px; border-radius: 50%; background: var(--ink);
  border: 3px solid var(--karte); box-shadow: var(--sch-1);
}
.pin-ziel {
  width: 14px; height: 14px; background: var(--gut);
  border: 3px solid var(--karte); box-shadow: var(--sch-1);
}
.pin-wagen {
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--akzent); color: var(--akzent-ink);
  border: 2px solid var(--ink); box-shadow: var(--sch-2);
  transform: translate(-50%, -50%) rotate(var(--drehung, 0deg));
}
.pin-wagen svg { width: 20px; height: 20px; }

/* Sticky-Kopf im Tracking — eigene Kartenflaeche. Frueher stand hier
   `background: var(--flaeche)` bei einem Seitengrund, der GENAU dieselbe
   Farbe hatte: der Text schob sich unsichtbar uebereinander. */
.fahrt-kopf {
  position: sticky; top: 72px; z-index: 20; margin: 0 0 var(--s5);
  padding: var(--s5); background: var(--karte);
  border-radius: var(--r-l); box-shadow: var(--sch-2);
}
.fahrt-kopf .zeile { gap: var(--s2); }
.fahrt-kopf .satz {
  font-size: var(--t-xl); font-weight: 650; letter-spacing: -.02em; margin: var(--s3) 0 0;
}
.fahrt-kopf .eta { margin: var(--s2) 0 0; font-size: var(--t-s); color: var(--ink-soft); }
.eta { font-variant-numeric: tabular-nums; }

.zeitleiste { list-style: none; margin: 0 0 var(--s5); padding: 0; }
.zeitleiste li { display: flex; gap: var(--s4); align-items: flex-start; }
.zeitleiste .punkt {
  flex: none; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%;
  background: var(--karte); border: 2px solid var(--linie-stark); position: relative;
}
.zeitleiste li:not(:last-child) .punkt::after {
  content: ""; position: absolute; left: 50%; top: 20px; width: 2px; height: 34px;
  margin-left: -1px; background: var(--linie-stark); opacity: .5;
}
.zeitleiste li.erledigt .punkt { border-color: var(--gut); background: var(--gut); }
.zeitleiste li.erledigt:not(:last-child) .punkt::after { background: var(--gut); opacity: 1; }
/* „jetzt": der Ink-Ring traegt den Kontrast, der Akzent fuellt. */
.zeitleiste li.jetzt .punkt {
  border-color: var(--ink); background: var(--akzent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--akzent) 30%, transparent);
}
.zeitleiste li.jetzt .text { font-weight: 650; }
.zeitleiste .text { padding-bottom: var(--s6); }
.zeitleiste li:last-child .text { padding-bottom: 0; }
.zeitleiste .zeit { display: block; font-size: var(--t-xs); color: var(--ink-mute); }

.wagen { display: flex; gap: var(--s4); align-items: center; }
.kennz {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-weight: 700;
  border: 1.5px solid var(--linie-stark); border-radius: var(--r-s);
  padding: 6px var(--s3); white-space: nowrap; letter-spacing: .02em;
}

/* ── Zahlkarte ────────────────────────────────────────────────────────── */

.zahlbox { position: relative; overflow: hidden; }
.zahlbox::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--akzent);
}
.zahlbox .label {
  display: block; font-size: var(--t-caps); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-mute);
}
.zahlbox .betrag {
  display: block; font-size: 2.5rem; font-weight: 700; letter-spacing: -.03em;
  line-height: 1.1; font-variant-numeric: tabular-nums; margin: var(--s1) 0 0;
}
.zahlbox .knopf.gross { margin-top: var(--s5); }
.zahlbox .fein { font-size: var(--t-xs); color: var(--ink-mute); margin: var(--s2) 0 0; }
#zahlfeld:not(:empty) { margin: var(--s5) 0 0; }

/* ── Mitteilungen ─────────────────────────────────────────────────────── */

.push-karte .aktionen { margin-top: var(--s4); }

/* Statisch im Seitenfluss (kein Toast, kein Overlay): der Streifen schiebt
   sich nicht ueber etwas, das gerade gelesen wird. */
.nudge {
  display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap;
  border: 0; border-radius: var(--r-m); background: var(--flaeche);
  padding: var(--s4) var(--s5); margin: 0 0 var(--s5);
}
.nudge p { margin: 0; flex: 1 1 220px; font-weight: 600; font-size: var(--t-s); }
.nudge .knopf { min-height: var(--tap); }

/* ── Schalter (Einwilligungen) ────────────────────────────────────────── */

.schalter {
  display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4) 0;
  border-bottom: 1px solid var(--linie);
}
.schalter:last-of-type { border-bottom: 0; }
.schalter input { width: 22px; height: 22px; margin: 3px 0 0; flex: none; accent-color: var(--ink); }
.schalter label { line-height: 1.5; }

/* ── Vorlauf-Wahl im Konto (Radio-Pillen) ─────────────────────────────── */

.vorlauf { border: 0; padding: 0; margin: 0 0 var(--s4); min-width: 0; }
.vorlauf legend { padding: 0; font-size: var(--t-s); font-weight: 600; }

.vorlauf-pillen { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; }
.vorlauf-pille { position: relative; display: inline-flex; }
.vorlauf-pille input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
.vorlauf-pille label {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); min-width: 56px; padding: 0 var(--s4);
  border: 1.5px solid var(--linie); border-radius: var(--r-voll);
  background: var(--karte); color: var(--ink-soft); font-size: var(--t-s); font-weight: 550;
}
.vorlauf-pille input:checked + label {
  border-color: var(--ink); border-width: 2px; color: var(--ink); font-weight: 700;
  background: color-mix(in srgb, var(--akzent) 12%, var(--karte));
}
/* Der Fokusring lag frueher auf --akzent — bei hellem Gelb ein unsichtbarer
   Ring. Er haengt jetzt am selben --fokus wie alles andere. */
.vorlauf-pille input:focus-visible + label { outline: 3px solid var(--fokus); outline-offset: 2px; }

/* ── TOTP-Einrichtung (Portal) ────────────────────────────────────────── */

.geheim {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 1.1rem; letter-spacing: .12em; word-break: break-all;
  background: var(--flaeche); border: 0; border-radius: var(--r-m);
  padding: var(--s4); display: block;
}
.qr { background: #fff; padding: var(--s3); border: 1px solid var(--linie);
      border-radius: var(--r-m); display: inline-block; }
.code-eingabe { font-size: 1.5rem !important; letter-spacing: .3em; text-align: center; }

.mask { font-variant-numeric: tabular-nums; }

/* ── Fuss ─────────────────────────────────────────────────────────────── */

.fuss {
  background: transparent; border-top: 1px solid var(--linie);
  padding: var(--s8) 0 var(--s10); margin-top: var(--s12);
}
.fuss .wrap { display: flex; gap: var(--s4); flex-wrap: wrap; justify-content: space-between; }
.fuss, .fuss a { color: var(--ink-mute); font-size: var(--t-xs); }
.fuss a { text-decoration: underline; text-underline-offset: 3px; }

/* ── Kleinteile ───────────────────────────────────────────────────────── */

.fein { font-size: var(--t-xs); color: var(--ink-mute); line-height: 1.6; margin: var(--s3) 0 0; }
.eyebrow-klein {
  font-size: var(--t-caps); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-mute); margin: 0 0 var(--s1);
}
.gross-nr {
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 var(--s5);
  font-variant-numeric: tabular-nums;
}
.tat { margin: var(--s5) 0 0; }
.vorbelegt-hinweis { margin: 0 0 var(--s3); }

/* Angaben als Beschreibungsliste statt „<strong>Label:</strong> Wert" —
   der Wert steht damit auf einer eigenen Kante und die Liste ist lesbar. */
dl.daten { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s5); margin: 0; }
dl.daten dt { font-size: var(--t-s); color: var(--ink-mute); }
dl.daten dd { margin: 0; font-weight: 550; }
@media (max-width: 420px) {
  dl.daten { grid-template-columns: 1fr; gap: 0; }
  dl.daten dd { margin: 0 0 var(--s3); }
}

/* Fieldsets tragen im Redesign keine eigene Optik mehr — die Ueberschrift
   sitzt im .block-kopf darueber, die Legende bleibt fuer Vorlesesoftware. */
.feld-blank { border: 0; padding: 0; margin: 0; min-width: 0; }
.preis-hinweis { margin: var(--s2) 0 0; }
.betrag-zeile { margin: var(--s2) 0 0; display: flex; gap: var(--s2); align-items: baseline;
                flex-wrap: wrap; }
.betrag-zeile strong { font-variant-numeric: tabular-nums; }
.betrag-zeile .meta { margin: 0; }
.bezahlt-satz { display: flex; gap: var(--s2); align-items: flex-start; margin: 0;
                color: var(--gut); }
.bezahlt-satz svg { flex: none; margin-top: 3px; }
.knopf-stapel { display: grid; gap: var(--s2); }
.knopf-reihe { display: flex; gap: var(--s2); flex-wrap: wrap; }
.storno { margin: var(--s5) 0 0; }
.storno .hilfe { margin-top: var(--s2); }
.vorlauf-karte { margin-top: var(--s3); }
.adressform { margin-top: var(--s3); }

/* Ueberschrift und „Abmelden" auf einer Grundlinie. */
.konto-kopf { display: flex; align-items: flex-start; gap: var(--s4); }
.konto-kopf .seitenkopf { flex: 1; min-width: 0; }
.konto-kopf .abmelden { margin: var(--s6) 0 0; flex: none; }

/* <details>-Aufklapper: der Sommary IST der Knopf — der Marker davor wuerde
   ihn nur schief machen. */
summary.knopf { display: inline-flex; cursor: pointer; list-style: none; }
summary.knopf::-webkit-details-marker { display: none; }

/* ── Desktop ──────────────────────────────────────────────────────────── */

@media (min-width: 720px) {
  .karten.zwei { grid-template-columns: 1fr 1fr; }
}

/* Auf dem Handy loest sich die rechte Gruppe auf: die Bestell-Leiste bekommt
   damit das FORMULAR als Bezugsbox und klebt ueber die ganze Laenge, statt nur
   im letzten Kasten. */
.buchen-seite { display: contents; }

/* Ab 900 px zwei Spalten beim Buchen: Formular links, Preis und Hauptaktion
   rechts. Reine CSS-Umordnung — das Markup bleibt eine Spalte, die
   Tabreihenfolge aendert sich nicht. */
@media (min-width: 900px) {
  .eng.weit { max-width: var(--spalte-breit); }
  .buchen-gitter {
    display: grid; grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--s8); align-items: start;
  }
  .buchen-haupt { min-width: 0; }
  .buchen-seite { display: grid; gap: var(--s4); position: sticky; top: 96px; }
  .buchen-seite .preis, .buchen-seite .rechtstext { margin-bottom: 0; }
}