/* ─────────────────────────────────────────────────────────────────────────────
   Fahrdienst Dispo

   Gestaltet für zehn Stunden am Stück — an Tagen, an denen wenig nach Plan
   läuft. Der Disponent telefoniert dabei, tippt nebenher und überfliegt
   Spalten voller Zeiten und Kilometer.

   Drei Entscheidungen tragen das Ganze:

   Schrift — IBM Plex, weil sie für technische Anwendungen gezeichnet wurde:
   eindeutige Null, klare Eins, echte Tabellenziffern. Alle Zahlen, Zeiten,
   Kennzeichen und Nummern stehen in Plex Mono, damit sie stellenweise
   untereinander fallen. In einer Dispo ist das kein Detail — es ist der
   Unterschied zwischen Scannen und Lesen.

   Farbe — seit der UI-Entscheidung vom 31.08.2026 (#60, shadcn-Designsprache)
   ruhig und neutral: Zinkgraue Flächen tragen die Tiefe (Grund, Karten, feine
   Ränder), nicht mehr die frühere warme Sandpalette. Der Akzent bleibt das
   tiefe Petrol, nah an der Signalfarbe des Rettungsdienstes — jetzt zugleich
   die Primärfarbe der Bedienelemente. Die Statusfarben folgen unverändert dem
   Funkmeldesystem: grün einsatzbereit, bernstein im Einsatz, rot nicht bereit.

   Alle Farben laufen über die semantischen Token unten (--background, --card,
   --primary …, Muster shadcn/ui); die historischen Namen (--grund, --flaeche,
   --akzent …) sind Aliase darauf, damit der Bestand ohne Umbau mitzieht.

   Bewusst keine Zebrastreifen: Bei tabellarischen Ziffern und klarer
   Ausrichtung führt die Zeile sich selbst, und ein Balken links am Rand trägt
   weiter als abwechselnde Flächen — gerade über vierzehn Spalten.

   Kontraste sind nachgerechnet, nicht geschätzt: Fließtext ab 4,5:1,
   Bedienelemente ab 3:1. Ein Grauton, den man nur bei gutem Licht liest, ist
   in einer Anwendung für Zehnstundenschichten kein Stilmittel.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* ── Semantische Farbtoken (shadcn-Muster, #60) ── */
  --background: #fafafa;
  --foreground: #1b1b1f;
  --card: #ffffff;
  --card-foreground: #1b1b1f;
  --popover: #ffffff;
  --popover-foreground: #1b1b1f;
  --primary: #0f6478;            /* Petrol — Markenanker, kontrastgeprüft */
  --primary-hover: #0c5567;
  --primary-foreground: #ffffff;
  --secondary: #f4f4f5;
  --secondary-foreground: #27272a;
  --muted: #f4f4f5;
  --muted-foreground: #6b6b74;
  --accent: #e3eef0;             /* Petrol-getönte Hover-/Auswahlfläche */
  --accent-foreground: #0a4a5a;
  --destructive: #a83a26;
  --destructive-foreground: #ffffff;
  --border: #e4e4e7;
  --border-subtle: #ececee;
  --input: #8b8b94;              /* Bedienelemente brauchen 3:1 gegen ihre Fläche */
  --ring: #0f6478;

  /* Seitenleiste/Navigation */
  --sidebar: #f4f4f5;
  --sidebar-foreground: #3f3f46;
  --sidebar-border: #e4e4e7;
  --sidebar-accent: #e3eef0;
  --sidebar-accent-foreground: #0a4a5a;

  /* Fachliche Statusfarben nach Funkmeldesystem — Semantik bleibt */
  --success: #1e764f;
  --success-subtle: #e4efe2;
  --success-border: #b7d4b0;
  --warning: #8a5410;
  --warning-subtle: #fdf1dc;
  --warning-border: #ecd9b0;
  --destructive-subtle: #fbe8e3;

  /* ── Radius-Skala (shadcn-Anatomie) ── */
  --radius-sm: 4px;    /* Marken, Kürzel, kleine Kästchen */
  --radius-md: 6px;    /* Felder, Knöpfe, Trefferlisten */
  --radius-lg: 10px;   /* Karten, Masken, Kacheln */
  --radius-xl: 14px;   /* große Dialoge */

  /* ── Abstände: 4-px-Raster ── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* ── Schatten: drei Stufen statt neun Einzelwerten ── */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .05);
  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / .10);
  --shadow-lg: 0 12px 32px -8px rgb(0 0 0 / .20);

  /* ── Historische Token als Aliase — der Bestand zieht ohne Umbau mit ── */
  --grund: var(--background);
  --flaeche: var(--card);
  --erhoben: var(--muted);
  --leiste: var(--sidebar);
  --leiste-rand: var(--sidebar-border);
  --rand: var(--border);
  --rand-fein: var(--border-subtle);
  --rand-feld: var(--input);
  --rundung-klein: var(--radius-sm);
  --rundung: var(--radius-md);
  --rundung-gross: var(--radius-lg);
  --spur: var(--muted);
  --zeile-gerade: var(--card);
  --text: var(--foreground);
  --text-zweit: #52525b;
  --gedaempft: var(--muted-foreground);
  --schwach: #77777f;
  --platzhalter: #9a9aa3;
  --akzent: var(--primary);
  --akzent-stark: var(--primary-hover);
  --akzent-hell: var(--accent);
  --akzent-rand: #bcdbe2;
  --gut: var(--success);
  --gut-hell: var(--success-subtle);
  --gut-rand: var(--success-border);
  --achtung: var(--warning);
  --achtung-hell: var(--warning-subtle);
  --warnung: var(--destructive);
  --warnung-hell: var(--destructive-subtle);

  --schrift: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --schrift-zahl: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* Dunkel: dieselbe semantische Struktur, nur die Werte drehen. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --background: #131316;
    --foreground: #ececef;
    --card: #1b1b1f;
    --card-foreground: #ececef;
    --popover: #1f1f24;
    --popover-foreground: #ececef;
    --primary: #6fc0d0;
    --primary-hover: #8ed3e0;
    --primary-foreground: #0c2930;
    --secondary: #26262c;
    --secondary-foreground: #d4d4da;
    --muted: #222227;
    --muted-foreground: #a3a3ad;
    --accent: #14333b;
    --accent-foreground: #9fd4df;
    --destructive: #e8907c;
    --destructive-foreground: #321d18;
    --border: #2e2e35;
    --border-subtle: #26262c;
    --input: #6a6a74;
    --ring: #6fc0d0;

    --sidebar: #18181c;
    --sidebar-foreground: #b9b9c1;
    --sidebar-border: #26262c;
    --sidebar-accent: #14333b;
    --sidebar-accent-foreground: #9fd4df;

    --success: #7cc98d;
    --success-subtle: #172a1a;
    --success-border: #24401f;
    --warning: #e0a94a;
    --warning-subtle: #2e2412;
    --warning-border: #4a3a1a;
    --destructive-subtle: #321d18;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / .35);
    --shadow-md: 0 4px 12px -2px rgb(0 0 0 / .45);
    --shadow-lg: 0 12px 32px -8px rgb(0 0 0 / .6);

    --text-zweit: #cdcdd4;
    --schwach: #96969f;
    --platzhalter: #83838c;
    --akzent-rand: #1f4550;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font: 400 14px/1.45 var(--schrift);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'tnum' 1;   /* Tabellenziffern überall */
}

/* Alles, was gezählt oder abgelesen wird, steht in der Monoschrift: Zeiten,
   Kilometer, Kennzeichen, Nummern. Gleiche Zeichenbreite heißt, dass Spalten
   stellenweise übereinander stehen. */
.zeitknopf, .uhrzeit, .tage-marke, .fms, .auftragsnr,
input[type=time], input[type=date], input[type=datetime-local], input[type=number],
.streckentabelle td, .ablauf b, .tagknopf {
  font-family: var(--schrift-zahl);
  font-variant-numeric: tabular-nums;
}
.gedaempft { color: var(--gedaempft); }
.klein { font-size: .78rem; font-weight: 400; }
.versteckt { display: none !important; }

header {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .6rem 1rem; background: var(--flaeche); border-bottom: 1px solid var(--rand);
}
header h1 { font-size: .95rem; margin: 0 .5rem 0 0; font-weight: 600; }
header .wer { margin-left: auto; color: var(--gedaempft); font-size: .8rem; }

button, input, select {
  font: inherit; color: inherit; background: var(--card);
  border: 1px solid var(--input); border-radius: var(--radius-md); padding: .35rem .6rem;
}
input, select { box-shadow: var(--shadow-sm); }
input::placeholder { color: var(--platzhalter); }
input[type=checkbox], input[type=radio] { accent-color: var(--primary); box-shadow: none; }
button { cursor: pointer; transition: background-color .12s, border-color .12s, color .12s; }
button:hover { background: var(--muted); border-color: var(--input); }

/* Sichtbarer Tastaturfokus — die Anwendung wird ohne Maus bedient. */
:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 1px;
}
input:focus, select:focus { border-color: var(--ring); box-shadow: 0 0 0 3px var(--akzent-hell); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 40%, transparent); outline: none; }
/* Native Checkboxen/Radios ignorieren border und Halo — sie brauchen den Umriss. */
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible {
  outline: 2px solid var(--ring); outline-offset: 1px;
}

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

.umschalter { display: flex; }
.umschalter button { border-radius: 0; margin-left: -1px; }
.umschalter button:first-child { border-radius: var(--rundung) 0 0 var(--rundung); margin-left: 0; }
.umschalter button:last-child { border-radius: 0 var(--rundung) var(--rundung) 0; }
.umschalter button.aktiv { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }

.karte {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Anmeldung */
#anmeldung { max-width: 25rem; margin: 4rem auto; padding: 1.75rem; }
#anmeldung h2 { margin: 0 0 .35rem; font-size: 1.15rem; }
#anmeldung p.hinweis { margin: 0 0 1.25rem; color: var(--gedaempft); font-size: .875rem; }
#anmeldung label { display: block; margin-bottom: .85rem; font-size: .82rem; color: var(--gedaempft); }
#anmeldung input { width: 100%; margin-top: .25rem; }
#anmeldung button { width: 100%; margin-top: .5rem; }

/* Rumpf: Arbeitsbereich + Statusleiste */
.rumpf { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: .75rem; padding: .75rem 1rem; }
@media (max-width: 70rem) { .rumpf { grid-template-columns: minmax(0, 1fr); } }
main { min-width: 0; }

.block { margin-bottom: .75rem; }
.blockkopf {
  margin: 0; padding: .55rem .8rem; font-size: .82rem; font-weight: 600;
  border-bottom: 1px solid var(--border); background: var(--muted);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.tabellenrahmen { overflow-x: auto; }

/* Tabellen */
table.raster { width: 100%; border-collapse: collapse; font-size: .8rem; }
table.raster th {
  text-align: left; font-weight: 500; font-size: .78rem;
  color: var(--muted-foreground);
  padding: .5rem .6rem .4rem; border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.raster td {
  padding: .42rem .6rem; border-bottom: 1px solid var(--rand-fein); white-space: nowrap;
}
table.raster tbody tr { cursor: pointer; }

/* Kein Zebra: Bei ausgerichteten Ziffern führt die Zeile sich selbst. Der Balken
   beim Überfahren trägt weiter — auch über vierzehn Spalten. */
table.raster tbody tr:hover td { background: var(--akzent-hell); }
table.raster tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--akzent); }
table.raster tbody tr.gewaehlt td { background: var(--akzent-hell); }
table.raster tbody tr.gewaehlt td:first-child { box-shadow: inset 3px 0 0 var(--akzent); }
table.raster td.leer { color: var(--gedaempft); text-align: center; padding: 1.25rem; }
.ta {
  display: inline-block; min-width: 1.7rem; text-align: center;
  padding: .05rem .3rem; border-radius: var(--rundung-klein);
  font-family: var(--schrift-zahl); font-weight: 500; font-size: .72rem;
  background: var(--gut-hell); color: var(--gut);
}
.zeitknopf {
  padding: .12rem .45rem; font-size: .78rem; border-radius: var(--rundung-klein); min-width: 3.4rem;
  background: var(--flaeche);
}
.zeitknopf.gesetzt { background: var(--akzent-hell); border-color: var(--akzent); color: var(--akzent); font-variant-numeric: tabular-nums; }
.zeitknopf.offen { color: var(--gedaempft); border-style: dashed; }
.ueberfaellig { background: var(--warnung-hell); color: var(--warnung); font-weight: 600; padding: 0 .25rem; border-radius: var(--rundung-klein); }

/* Statusleiste */
.statusleiste { align-self: start; position: sticky; top: .75rem; }
.statusleiste table.raster { font-size: .76rem; }
.statusleiste td { padding: .25rem .5rem; }
/* Die FMS-Ziffer ist das Vokabular der Leitstelle — sie steht für sich. */
.fms {
  display: inline-block; min-width: 1.5rem; text-align: center; border-radius: var(--rundung-klein);
  font-weight: 600; font-size: .82rem; padding: .05rem .25rem;
}
.fms.bereit { background: var(--gut-hell); color: var(--gut); }
.fms.einsatz { background: var(--achtung-hell); color: var(--achtung); }
.fms.aus { background: var(--warnung-hell); color: var(--warnung); }
.fms.unbekannt { background: var(--spur); color: var(--gedaempft); }

/* Zeitstrahl */
.tafel { overflow-x: auto; padding-bottom: .5rem; }
.gitter { min-width: 60rem; }
.zeitleiste, .zeile { display: grid; grid-template-columns: 11rem 1fr; }
.zeitleiste { border-bottom: 1px solid var(--rand); }
.zeitleiste .stunden { display: flex; }
.zeitleiste .stunde { flex: 1; font-size: .7rem; color: var(--gedaempft);
  padding: .3rem 0 .3rem .35rem; border-left: 1px solid var(--rand); }
.zeitleiste .ecke { padding: .3rem .75rem; font-size: .7rem; color: var(--gedaempft); }
.zeile { border-bottom: 1px solid var(--rand); min-height: 3.4rem; }
.zeile:last-child { border-bottom: none; }
.fahrzeug { padding: .5rem .75rem; border-right: 1px solid var(--rand); }
.fahrzeug b { display: block; font-size: .82rem; font-weight: 600; }
.fahrzeug span { font-size: .7rem; color: var(--gedaempft); }
.spur { position: relative; background: repeating-linear-gradient(
    to right, transparent 0, transparent calc(100% / 14 - 1px),
    var(--rand) calc(100% / 14 - 1px), var(--rand) calc(100% / 14)); }
.fahrt { position: absolute; top: .3rem; bottom: .3rem;
  background: var(--akzent-hell); border: 1px solid var(--akzent); border-left: 3px solid var(--akzent);
  border-radius: var(--rundung); padding: .2rem .4rem; overflow: hidden; font-size: .72rem;
  cursor: pointer; text-align: left; }
.fahrt:hover { background: var(--accent); border-color: var(--primary); }
.fahrt.gewaehlt { outline: 2px solid var(--akzent); outline-offset: 1px; }
.fahrt b, .fahrt span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fahrt span { color: var(--gedaempft); }
.fahrt[data-status="GEPLANT"] { border-style: dashed; background: transparent; }
.fahrt[data-status="GEPLANT"]:hover { background: var(--accent); }
.fahrt[data-status="ABGESCHLOSSEN"] { opacity: .6; }
.fahrt[data-status="STORNIERT"] { opacity: .45; text-decoration: line-through; }
.unverplant { padding: .8rem 1rem; }
.unverplant h3 { margin: 0 0 .5rem; font-size: .8rem; color: var(--gedaempft); font-weight: 600; }
.unverplant ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .5rem; flex-wrap: wrap; }

/* Detailbereich */
#detail { position: fixed; inset: 0 0 0 auto; width: min(25rem, 100vw);
  background: var(--flaeche); border-left: 1px solid var(--rand); padding: 1.25rem;
  overflow-y: auto; transform: translateX(100%); transition: transform .18s ease; z-index: 10; }
#detail.offen { transform: none; }
#detail h3 { margin: 0 0 .2rem; font-size: 1rem; }
#detail .zeit { color: var(--gedaempft); font-size: .8rem; margin-bottom: 1rem; }
#detail label { display: block; margin-bottom: .8rem; font-size: .76rem; color: var(--gedaempft); }
#detail select, #detail input { width: 100%; margin-top: .25rem; }
#detail .schliessen { position: absolute; top: .8rem; right: .9rem; padding: .15rem .45rem; }
.kette { display: grid; grid-template-columns: 1fr auto; gap: .3rem .5rem; align-items: center;
  margin: 0 0 1rem; font-size: .78rem; }
.verlauf { margin-top: 1.25rem; border-top: 1px solid var(--rand); padding-top: .9rem; }
.verlauf h4 { margin: 0 0 .5rem; font-size: .76rem; color: var(--gedaempft); font-weight: 600; }
.verlauf ol { list-style: none; margin: 0; padding: 0; font-size: .76rem; }
.verlauf li { padding: .28rem 0; border-bottom: 1px solid var(--spur); }
.verlauf li:last-child { border: none; }
.verlauf .wann { color: var(--gedaempft); }

.meldung { padding: .55rem .75rem; border-radius: var(--rundung); font-size: .8rem; margin-bottom: .8rem; }
.meldung.fehler { background: var(--warnung-hell); color: var(--warnung); border: 1px solid var(--warnung); }
.meldung.gut { background: var(--gut-hell); color: var(--gut); border: 1px solid var(--gut); }

/* Zustellung an das Fahrzeug (G / E) */
.zustellung { display: inline-block; min-width: 1.1rem; text-align: center; font-weight: 700; }
.zustellung.ja   { color: var(--gut); }
.zustellung.nein { color: var(--gedaempft); font-weight: 400; }
/* Gesendet, aber nicht quittiert: das Fahrzeug hat sich nicht gemeldet. */
.zustellung.wartet { color: var(--warnung); }
tr.nicht_quittiert td { background: var(--warnung-hell); }

/* Patient in Listen und Detail */
.patient { font-weight: 600; }

/* Formular für neue Fahrt */
dialog { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card);
  color: var(--card-foreground); padding: 1.5rem; width: min(30rem, 92vw); box-shadow: var(--shadow-lg); }
dialog::backdrop { background: rgb(0 0 0 / .4); }
dialog h3 { margin: 0 0 1rem; font-size: 1.05rem; }
dialog label { display: block; margin-bottom: .7rem; font-size: .78rem; color: var(--gedaempft); }
dialog input { width: 100%; margin-top: .25rem; }
.paar { display: grid; grid-template-columns: 2fr 1fr; gap: .6rem; }
/*
 * Speichern und Abbrechen bleiben stehen.
 *
 * Die Masken scrollen, wenn der Inhalt länger ist als der Schirm — und dabei
 * verschwand die Knopfleiste nach unten aus dem Bild. Wer nicht speichern kann,
 * für den ist die Maske unbrauchbar; bei einer Fahrtaufnahme, die nebenher am
 * Telefon läuft, ist das der Punkt, an dem die Arbeit verloren geht.
 *
 * Sticky statt eines Flex-Umbaus: Es wirkt in jeder Maske gleich, unabhängig
 * davon, wie tief die Leiste im Aufbau steckt.
 */
.knopfleiste, .maskenfuss {
  display: flex; gap: .5rem; justify-content: flex-end;
  position: sticky; bottom: 0; z-index: 5;
  margin-top: 1rem;
  padding: .7rem 0 .2rem;
  background: var(--flaeche);
  /* Der Verlauf zeigt, dass darunter noch etwas weitergeht — eine harte Kante
     sähe aus wie das Ende des Formulars. */
  box-shadow: 0 -12px 12px -12px rgb(0 0 0 / .18);
}
.treffer { list-style: none; margin: -.4rem 0 .7rem; padding: 0; max-height: 11rem; overflow-y: auto;
  border: 1px solid var(--rand); border-radius: var(--rundung); }
.treffer:empty { display: none; }
.treffer li { padding: .35rem .6rem; cursor: pointer; font-size: .8rem; border-bottom: 1px solid var(--spur); }
.treffer li:last-child { border: none; }
.treffer li:hover, .treffer li.aktiv { background: var(--akzent-hell); }
.treffer .neben { color: var(--gedaempft); font-size: .74rem; }
.gewaehlter { padding: .5rem .7rem; border-radius: var(--rundung); background: var(--akzent-hell);
  border: 1px solid var(--akzent); font-size: .8rem; margin-bottom: .7rem; }
.gewaehlter .bedarf { display: block; margin-top: .25rem; color: var(--gedaempft); font-size: .74rem; }
.kontingent { display: block; margin-top: .3rem; font-size: .76rem; }
.kontingent.knapp { color: var(--warnung); font-weight: 600; }

/* Abrechnungstakt am Schein — steht neben dem Kontingent, nicht darüber:
   Er entscheidet nicht, ob gefahren wird, sondern nur, wie abgerechnet wird. */
.kontingent.takt { display: flex; align-items: center; gap: .35rem; margin-top: .35rem; }
.kontingent.takt label { color: var(--gedaempft); }
.taktwahl {
  /* Nur so breit wie die längste Vorgabe — im Patientenkasten ist Platz knapp. */
  width: auto;
  flex: 0 1 auto;
  font: inherit;
  font-size: .76rem;
  padding: .1rem .3rem;
  border: 1px solid var(--rand-feld);
  border-radius: var(--rundung-klein);
  background: var(--flaeche);
  color: var(--text);
}

/* Fahrtaufnahme: auf Tastaturbedienung ausgelegt */
#fahrtDialog, #patientDialog, #serieDialog {
  width: min(58rem, 96vw); max-height: 92vh; overflow-y: auto;
}
/* Die Fahrtaufnahme läuft nebenher zum Telefonat: Wer dabei scrollen muss, verliert
   den Überblick über das, was er gerade abfragt. Zwei Spalten bringen sie auf einen
   Schirm — die Breite ist dafür der geringere Preis. */
/* Breiter, weil rechts die Tagesliste steht: Ohne sie war die Maske zweispaltig
   auf einem Schirm, mit ihr braucht sie den Platz daneben. */
#fahrtDialog { width: min(104rem, 97vw); }
.maskenkopf { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin-bottom: .9rem; }
.maskenkopf h3 { margin: 0; }
fieldset { border: 1px solid var(--rand); border-radius: var(--rundung-gross); padding: .6rem .8rem .3rem;
  margin: 0 0 .7rem; }
legend { font-size: .74rem; font-weight: 600; color: var(--gedaempft); padding: 0 .35rem; }
.feldreihe { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; }
.feldreihe > label { margin-bottom: .55rem; }
/* Beschriftung über das Feld, nicht daneben. Ohne diese Regel entscheidet die
   natürliche Breite des Feldes darüber, ob es umbricht — ein Auswahlfeld mit
   kurzen Einträgen rutschte neben seine Beschriftung und überdeckte sie. */
.feldreihe > label:not(.kasten) > input,
.feldreihe > label:not(.kasten) > select {
  display: block; width: 100%; margin-top: .2rem;
}
/* Knapp bemessen, damit Feldreihen erst spät umbrechen — bei mittleren Breiten
   sonst eine Zeile je Feld, und die Maske wird doppelt so hoch. */
.wachsend { flex: 1 1 8rem; min-width: 8rem; }
label.kasten { display: flex; align-items: center; gap: .35rem; font-size: .8rem;
  color: var(--text); margin-bottom: .95rem; white-space: nowrap; }
label.kasten input { width: auto; margin: 0; }
kbd { font: inherit; font-size: .72rem; padding: 0 .25rem; border-radius: var(--rundung-klein);
  border: 1px solid currentColor; opacity: .65; margin-left: .3rem; }
.zufahrt { font-size: .76rem; color: var(--akzent); background: var(--akzent-hell);
  border-radius: var(--rundung); padding: .3rem .55rem; margin-bottom: .55rem; }

/* Trefferlisten schweben über den Feldern, damit die Maske nicht springt */
label { position: relative; }
.treffer { position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
  background: var(--popover); box-shadow: var(--shadow-md); margin: 0; }
.treffer[hidden] { display: none; }

/* Dublettenwarnung beim Neuanlegen */
.dubletten { border: 1px solid var(--achtung); background: var(--achtung-hell);
  border-radius: var(--rundung); padding: .5rem .7rem; margin-bottom: .7rem; font-size: .78rem; }
.dubletten b { color: var(--achtung); }
.dubletten ul { list-style: none; margin: .35rem 0 0; padding: 0; }
.dubletten li { padding: .2rem 0; cursor: pointer; }
.dubletten li:hover { text-decoration: underline; }

/* Treffer aus der externen Kartensuche vom eigenen Katalog unterscheiden */
.treffer li.extern { border-left: 3px solid var(--achtung); }
.treffer li.extern .neben { color: var(--achtung); }

/* Routenangabe */
.route { display: inline-flex; align-items: baseline; gap: .35rem; font-size: .78rem; }
.route.unsicher { color: var(--warnung); }

/* Uhr in der Kopfzeile */
.uhrzeit {
  font-size: 1.2rem; font-weight: 500; letter-spacing: -.01em;
  padding: .12rem .7rem; border-radius: var(--rundung);
  background: var(--text); color: var(--flaeche);
}

/* Tagesnavigation — das Datum steht nur hier, mit Wochentag und Kalenderwoche */
.tagesnav { display: flex; }
.tagesnav button { border-radius: 0; margin-left: -1px; }
.tagesnav button:first-child { border-radius: var(--rundung) 0 0 var(--rundung); margin-left: 0; }
.tagesnav button:last-child { border-radius: 0 var(--rundung) var(--rundung) 0; }
.tagesnav button:not(.tagknopf) { padding: .35rem .55rem; }

/* Der Datumsknopf öffnet den eigenen Kalender (kalender.js, kalender.css). */
.tagknopf { min-width: 14.5rem; font-size: .82rem; }
#tagHeute.hervor { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }

/* Hinweis, wenn ein anderer als der heutige Tag gezeigt wird */
.tagslage { font-size: .76rem; padding: .15rem .5rem; border-radius: var(--rundung);
  background: var(--achtung-hell); color: var(--achtung); border: 1px solid var(--achtung);
  white-space: nowrap; }
.tagslage.vorschau { background: var(--akzent-hell); color: var(--akzent); border-color: var(--akzent); }

/* Bearbeitungsmaske */
.auftragsnr { margin-left: auto; font-variant-numeric: tabular-nums; }
.strecke { font-size: .78rem; align-self: center; margin-bottom: .55rem; }
.strecke.unsicher { color: var(--warnung); }
#zeitkette { gap: .5rem; }
#zeitkette .stempel { display: flex; flex-direction: column; gap: .15rem; margin-bottom: .5rem; }
#zeitkette .stempel span { font-size: .7rem; color: var(--gedaempft); }
.verlaufAufklapp { margin: 0 0 .7rem; font-size: .78rem; }
.verlaufAufklapp summary { cursor: pointer; color: var(--gedaempft); font-weight: 600;
  font-size: .76rem; padding: .2rem 0; }
.verlaufAufklapp ol { list-style: none; margin: .4rem 0 0; padding: 0; }
.verlaufAufklapp li { padding: .25rem 0; border-bottom: 1px solid var(--spur); }
.verlaufAufklapp li:last-child { border: none; }

/* Verschiebbare Spaltenbreiten */
table.raster th { position: relative; }
.spaltengriff {
  position: absolute; top: 0; right: -3px; bottom: 0; width: 7px;
  cursor: col-resize; touch-action: none; z-index: 2;
}
.spaltengriff::after {
  content: ''; position: absolute; top: 20%; bottom: 20%; left: 3px; width: 1px;
  background: var(--rand);
}
.spaltengriff:hover::after { background: var(--akzent); width: 2px; }
body.zieht-spalte { cursor: col-resize; user-select: none; }

/* Bei festen Breiten darf langer Text nicht überlaufen */
table.raster[style*="fixed"] td { overflow: hidden; text-overflow: ellipsis; }

/* Geprüfte Adresse: aus dem Ortskatalog oder der Kartensuche übernommen.
   Grün heißt hier nicht "ausgefüllt", sondern "verortet" — nur solche Adressen
   ergeben verlässliche Kilometer. Wer von Hand ändert, verliert die Markierung.
   Die Bezeichnung bleibt bewusst ungefärbt: Sie ist ein frei gewählter Name und
   sagt über die Verortbarkeit nichts. */
input.gefunden, input.gefunden:focus {
  background: var(--gut-hell);
  border-color: var(--gut);
}
@media (prefers-color-scheme: dark) {
  input.gefunden { color: var(--text); }
}
.adressquelle { font-size: .72rem; color: var(--gut); margin: -.35rem 0 .5rem; }
.adressquelle.ungeprueft { color: var(--gedaempft); }

/* Kilometerkette: Anfahrt, Besetztfahrt, Gesamt */
.streckentabelle { border-collapse: collapse; font-size: .78rem; margin: 0 0 .6rem; width: 100%; }
.streckentabelle th { text-align: left; font-weight: 600; color: var(--gedaempft);
  padding: .18rem .6rem .18rem 0; width: 5rem; }
.streckentabelle td { padding: .18rem .8rem .18rem 0; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.streckentabelle td:first-of-type { text-align: right; width: 5rem; font-weight: 600; }
.streckentabelle tr.summe th, .streckentabelle tr.summe td {
  border-top: 1px solid var(--rand); padding-top: .3rem; }

/* Zeitplan als Kette */
.ablauf { display: flex; flex-wrap: wrap; gap: .2rem .5rem; font-size: .76rem;
  padding: .4rem .6rem; background: var(--spur); border-radius: var(--rundung); margin-bottom: .6rem; }
.ablauf .schritt { display: flex; gap: .3rem; align-items: baseline; }
.ablauf .schritt b { font-variant-numeric: tabular-nums; }
.ablauf .pfeil { color: var(--gedaempft); }

/* Berechnete Dauer statt Eingabefeld */
.dauer-anzeige { display: flex; flex-direction: column; gap: .05rem; margin-bottom: .55rem;
  padding: .2rem .6rem; border-left: 2px solid var(--rand); min-width: 11rem; }
.dauer-anzeige b { font-size: .95rem; font-variant-numeric: tabular-nums; }
.dauer-anzeige.geschaetzt b { color: var(--gut); }
.dauer-anzeige.unbekannt b { color: var(--gedaempft); }

/* Top-Bar: Kontext-Header ueber dem Fachinhalt */
.topbar { display: flex; align-items: center; gap: .6rem;
  padding: .35rem .75rem; background: var(--card); border-bottom: 1px solid var(--border);
  position: relative; }
.topbar-titel { font-size: .85rem; font-weight: 600; }
#menueKnopf kbd { border: 1px solid var(--border); opacity: .6; }

/* Menüleiste mit Aufklappmenüs — als Overlay unter der Top-Bar.
   Sichtbar bei gedrücktem Alt (Desktop-Muster: Alt zeigt das Menü), solange ein
   Menü offen oder ein Titel fokussiert ist, oder nach Klick auf den Menü-Knopf.
   Aufbau und Verhalten (menue.js) sind unverändert. */
.menueleiste { display: none; align-items: center; gap: .1rem;
  position: absolute; z-index: 45; left: .5rem; top: 2.3rem;
  padding: .25rem .4rem; background: var(--popover);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); }
body.alt-gedrueckt .menueleiste,
.menueleiste:focus-within,
.menueleiste:has(.menue.offen),
.menueleiste.sichtbar { display: flex; }
/* Der Anker fuer das Overlay ist die Top-Bar davor. */
.topbar:has(+ .menueleiste) { position: relative; }

.menue { position: relative; }
.menuetitel { background: transparent; border: 1px solid transparent; border-radius: var(--rundung-klein);
  padding: .25rem .65rem; font-size: .82rem; }
.menuetitel:hover, .menue.offen .menuetitel { background: var(--flaeche); border-color: var(--rand); }
.menuetitel u { text-decoration: none; }
/* Zugriffstasten erst zeigen, wenn Alt gedrückt ist — wie in Desktopanwendungen */
body.alt-gedrueckt .menuetitel u { text-decoration: underline; }

.menueliste { display: none; position: absolute; top: calc(100% + 2px); left: 0; z-index: 40;
  min-width: 14rem; margin: 0; padding: .25rem; list-style: none;
  background: var(--popover); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); }
.menue.offen .menueliste { display: block; }
.menueliste li.trenner { height: 1px; background: var(--rand); margin: .25rem .3rem; }
.menueliste button { display: flex; align-items: baseline; gap: .75rem; width: 100%;
  text-align: left; background: transparent; border: 0; border-radius: var(--rundung-klein);
  padding: .32rem .55rem; font-size: .82rem; }
.menueliste button:hover, .menueliste button:focus { background: var(--akzent-hell); outline: none; }
.menueliste kbd { margin-left: auto; opacity: .5; border: 0; }
.menueliste .bald { margin-left: auto; font-size: .68rem; color: var(--gedaempft);
  border: 1px solid var(--rand); border-radius: var(--rundung-klein); padding: 0 .25rem; }
.menueliste button:has(.bald) { opacity: .65; }

.bereich { padding: .9rem 1rem; }

/* Wochentagsauswahl */
.wochentage { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .7rem; }
.wochentage label.kasten { border: 1px solid var(--rand); border-radius: var(--rundung);
  padding: .25rem .5rem; margin: 0; }
.wochentage label.kasten:has(input:checked) { background: var(--akzent-hell);
  border-color: var(--akzent); font-weight: 600; }

/* Serienliste */
.tage-marke { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.serie-inaktiv td { opacity: .5; }

/* Kontaktpersonen: eine Person je Zeile, Reihenfolge ist Anrufreihenfolge.
   Als Raster statt Flexbox, damit die Spalten untereinander bleiben und die Zeile
   nicht bei jeder Fensterbreite anders umbricht. */
.kontaktzeile {
  display: grid;
  grid-template-columns: minmax(9rem, 1.4fr) minmax(7rem, 1fr) 9rem 9rem 2rem;
  gap: .4rem; align-items: end; margin-bottom: .5rem;
}
.kontaktzeile label { width: auto !important; margin-bottom: 0; }
.kontaktzeile + .kontaktzeile { border-top: 1px dashed var(--rand-fein); padding-top: .5rem; }
/* Beschriftungen nur über der ersten Zeile — darunter wären sie Wiederholung. */
.kontaktzeile + .kontaktzeile label { font-size: 0; }
.kontaktzeile + .kontaktzeile label input { font-size: 14px; margin-top: 0; }
.kontaktzeile .zeitknopf { min-width: 0; margin-bottom: 0; }
@media (max-width: 46rem) {
  .kontaktzeile { grid-template-columns: 1fr 1fr; }
}



/* ── Flotte: Register, Besatzungsplan, Fristen ────────────────────────────── */

/* Register statt eigener Bereiche: Fahrzeug, Fahrer und Schicht gehören zusammen,
   und beim Einteilen springt man ständig zwischen ihnen hin und her. */
.reiter { display: flex; gap: .25rem; border-bottom: 1px solid var(--rand); margin-bottom: 1rem; }
.reiter button { background: none; border: none; border-bottom: 2px solid transparent;
  padding: .5rem .9rem; font-size: .82rem; color: var(--gedaempft); border-radius: 0;
  margin-bottom: -1px; cursor: pointer; }
.reiter button:hover { color: var(--text); }
.reiter button.aktiv { color: var(--akzent); border-bottom-color: var(--akzent); font-weight: 600; }

/* Der Plan zeigt volle 24 Stunden — Nachtschichten gehören sichtbar dazu. */
.besatzungsspur { background: repeating-linear-gradient(
    to right, transparent 0, transparent calc(100% / 12 - 1px),
    var(--rand) calc(100% / 12 - 1px), var(--rand) calc(100% / 12)); }
.schicht { position: absolute; top: .35rem; bottom: .35rem;
  background: var(--gut-hell); border: 1px solid var(--gut); border-left: 3px solid var(--gut);
  border-radius: var(--rundung); padding: .2rem .45rem; overflow: hidden; font-size: .72rem;
  cursor: pointer; text-align: left; }
.schicht:hover { background: var(--success-subtle); border-color: var(--success); }
.schicht b, .schicht span { display: block; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; font-weight: 600; }
.schicht span { color: var(--gedaempft); font-weight: 400; font-variant-numeric: tabular-nums; }
/* Eine Schicht ohne Fahrer ist ein Loch im Plan und soll auch so aussehen. */
.schicht.unbesetzt { background: var(--warnung-hell); border-color: var(--warnung);
  border-style: dashed; }
.schicht.unbesetzt b { color: var(--warnung); }

/* Fristen: abgelaufen und "läuft bald ab" sind zwei verschiedene Dinge. */
.frist { font-variant-numeric: tabular-nums; }
.frist.faellig { color: var(--achtung); font-weight: 600; }
.frist.abgelaufen { color: var(--warnung); font-weight: 600; }
.frist.abgelaufen::after { content: ' ⚠'; }

.vorlagen { display: flex; flex-direction: column; gap: .2rem; padding-bottom: .7rem; }
.vorlagen > div { display: flex; gap: .3rem; }

dialog.breit { width: min(58rem, 94vw); max-width: 94vw; }

/* Die Schichtmaske hat drei Auswahlfelder nebeneinander — schmaler bricht sie um. */
#schichtDialog { min-width: min(42rem, 94vw); }

/* Besatzung in der Statusübersicht — der Name trägt, die Uhrzeit ergänzt. */
.besetzung { font-weight: 600; color: var(--text); }
.unbesetzt-hinweis { color: var(--warnung); font-weight: 600; }
.besetzung, .unbesetzt-hinweis { display: block; }
.schichtende { display: block; font-variant-numeric: tabular-nums; }

/* ── Kontextmenü ─────────────────────────────────────────────────────────── */

.kontextmenue { position: fixed; z-index: 40; min-width: 15rem;
  background: var(--popover); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: .3rem; box-shadow: var(--shadow-lg); }
.kontextmenue button { display: flex; width: 100%; gap: 1rem; align-items: baseline;
  background: none; border: none; border-radius: var(--rundung); text-align: left;
  padding: .34rem .55rem; font-size: .8rem; color: var(--text); cursor: pointer; }
.kontextmenue button .text { flex: 1; }
.kontextmenue button .zusatz { color: var(--gedaempft); font-size: .74rem;
  font-variant-numeric: tabular-nums; }
.kontextmenue button:hover:not(:disabled), .kontextmenue button:focus-visible {
  background: var(--akzent-hell); outline: none; }
.kontextmenue button:disabled { color: var(--gedaempft); opacity: .55; cursor: default; }
/* Der naheliegende nächste Schritt der Zeitkette. */
.kontextmenue button.hervor { font-weight: 600; }
.kontextmenue button.hervor .zusatz { color: var(--akzent); font-weight: 600; }
.kontextmenue button.gefahr { color: var(--warnung); background: none; }
.kontextmenue hr { border: none; border-top: 1px solid var(--rand); margin: .3rem .2rem; }

/* Zeilen sind anfokussierbar, damit die Menütaste greift. */
.raster tbody tr:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }

/* Zeiten nachtragen */
.zeitzeile { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .5rem; }
.zeitzeile label { flex: 1; display: flex; align-items: baseline; gap: .6rem;
  margin: 0; font-size: .8rem; color: var(--text); }
.zeitzeile label input { width: 7rem; margin: 0; }

/* ── Nachbearbeitung ─────────────────────────────────────────────────────── */

.blockzahl { display: inline-block; min-width: 1.4rem; padding: 0 .35rem; margin-left: .2rem;
  border-radius: var(--rundung-gross); background: var(--spur); color: var(--gedaempft);
  font-size: .72rem; font-weight: 600; text-align: center; }
.blockzahl:empty { display: none; }
.erledigt-marke { font-size: .72rem; padding: .05rem .35rem; border-radius: var(--rundung-klein);
  background: var(--gut-hell); color: var(--gut); font-weight: 600; }
.erledigt-marke.abgesagt { background: var(--spur); color: var(--gedaempft); }
/* Was die Abrechnung später aufhalten würde. */
.fehlt { color: var(--achtung); font-weight: 600; font-size: .74rem; }

/* ── Fahrzeugleiste ──────────────────────────────────────────────────────── */

/* Die Fahrzeugleiste ist der Blick, den der Disponent den ganzen Tag hält.
   Sie bekommt einen eigenen, wärmeren Grund — die weißen Karten darauf treten
   dadurch hervor, ohne dass es einen dunklen Rahmen bräuchte. */
.statusleiste { background: var(--leiste); border-color: var(--leiste-rand); }
#fahrzeugleiste { display: flex; flex-direction: column; gap: .5rem; padding: .1rem; }
.fahrzeugkarte { border: 1px solid var(--rand); border-radius: var(--rundung-gross); padding: .5rem .6rem;
  background: var(--flaeche); cursor: default; }
.fahrzeugkarte:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
/* Ein Fahrzeug ohne Schicht ist nicht disponierbar — das soll man sehen, ohne zu lesen. */
.fahrzeugkarte.ausser-dienst { opacity: .6; background: transparent; }

.fk-kopf { display: flex; align-items: baseline; gap: .45rem; }
.fk-ruf { font-size: .88rem; font-weight: 600; }
.fk-dienst { margin-left: auto; font-size: .72rem; color: var(--gedaempft);
  font-variant-numeric: tabular-nums; }
.fk-besatzung { display: flex; align-items: baseline; gap: .4rem; margin-top: .15rem;
  font-size: .78rem; }
.fk-fahrten { margin-left: auto; font-size: .7rem; color: var(--gedaempft); }
.fk-bemerkung { margin-top: .15rem; font-size: .72rem; color: var(--gedaempft); }

.fk-knoepfe { display: flex; gap: .35rem; margin-top: .45rem; }
.fk-knopf { display: inline-flex; align-items: center; gap: .3rem;
  padding: .18rem .5rem; font-size: .73rem; border: 1px solid var(--rand);
  border-radius: var(--rundung); background: var(--grund); color: var(--text); cursor: pointer; }
.fk-knopf:hover { border-color: var(--akzent); color: var(--akzent); }
.fk-knopf.hat-neues { border-color: var(--akzent); color: var(--akzent); font-weight: 600; }
.fk-zahl { min-width: 1.05rem; padding: 0 .25rem; border-radius: var(--rundung-gross);
  background: var(--primary); color: var(--primary-foreground); font-size: .66rem; text-align: center; }
/* Gesendet, aber noch nicht auf dem Gerät — anderer Sachverhalt als ungelesen. */
.fk-zahl.wartet { background: var(--spur); color: var(--gedaempft); }

.fms.sprechwunsch { background: var(--warnung-hell); color: var(--warnung);
  animation: pochen 1.6s ease-in-out infinite; }
@keyframes pochen { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .fms.sprechwunsch { animation: none; } }

.sw-knopf { float: right; border: none; background: none; padding: 0; cursor: pointer; }
.sw-knopf:hover { background: none; border-color: transparent; }
#sprechwunschZahl { display: inline-block; min-width: 1.2rem; padding: 0 .3rem;
  border-radius: var(--rundung-gross); background: var(--destructive); color: var(--destructive-foreground);
  font-size: .7rem; font-weight: 600; text-align: center; }
#sprechwunschZahl:empty { display: none; }

/* ── Chat ────────────────────────────────────────────────────────────────── */

dialog.chat { width: min(34rem, 94vw); max-height: 80vh; }
dialog.chat[open] { display: flex; flex-direction: column; }
.chat-verlauf { flex: 1; overflow-y: auto; min-height: 12rem; max-height: 46vh;
  padding: .3rem .1rem; display: flex; flex-direction: column; gap: .4rem; }
.chat-tag { align-self: center; font-size: .68rem; color: var(--gedaempft);
  padding: .1rem .5rem; background: var(--spur); border-radius: var(--rundung-gross); }
.chat-blase { max-width: 80%; padding: .35rem .55rem; border-radius: var(--rundung-gross);
  font-size: .8rem; display: flex; flex-direction: column; gap: .1rem; }
/* Vom Disponenten nach rechts, vom Fahrzeug nach links — die gewohnte Leserichtung. */
.chat-blase.raus { align-self: flex-end; background: var(--akzent-hell);
  border: 1px solid var(--akzent); }
.chat-blase.rein { align-self: flex-start; background: var(--spur); border: 1px solid var(--rand); }
.chat-blase.sprechwunsch { background: var(--warnung-hell); border-color: var(--warnung); }
.chat-befehl { font-size: .64rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--gedaempft); }
.chat-fuss { font-size: .66rem; color: var(--gedaempft); font-variant-numeric: tabular-nums; }
.chat-befehle { display: flex; gap: .3rem; flex-wrap: wrap; padding: .5rem 0 .4rem;
  border-top: 1px solid var(--rand); margin-top: .5rem; }
.chat-eingabe { display: flex; gap: .4rem; }
.chat-eingabe input { flex: 1; margin: 0; }
dialog .schliessen { margin-left: auto; border: none; background: none;
  color: var(--gedaempft); cursor: pointer; padding: 0 .2rem; }

/* ── Sprechwunsch ────────────────────────────────────────────────────────── */

dialog.sprechwunsch { width: min(24rem, 92vw); border-color: var(--warnung); border-width: 2px; }
.sw-kopf { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .5rem; }
.sw-kopf strong { font-size: 1.15rem; }
.sw-marke { font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--warnung); background: var(--warnung-hell); padding: .12rem .4rem; border-radius: var(--rundung-klein); }
.sw-besatzung { margin: 0 0 .3rem; font-size: .85rem; font-weight: 600; }
.sw-text { margin: 0 0 .5rem; font-size: .82rem; color: var(--gedaempft); }

/* ── Kurzbefehle verwalten ───────────────────────────────────────────────── */

.kb-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  gap: 1.4rem; padding: .2rem; }
.kb-kopf { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  padding-bottom: .45rem; margin-bottom: .5rem; border-bottom: 1px solid var(--rand); }
.kb-kopf button { margin-left: auto; }
.kb-zeile { display: flex; align-items: center; gap: .5rem; padding: .2rem 0; }
.kb-kuerzel { flex: 0 0 7.5rem; font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  color: var(--gedaempft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-text { flex: 1; margin: 0; font-size: .8rem; }
/* Stillgelegt heißt: verschwindet aus der Auswahl, bleibt aber nachvollziehbar. */
.kb-zeile.stillgelegt { opacity: .5; }
.kb-zeile.stillgelegt .kb-text { text-decoration: line-through; }

/* Antworten des Fahrers heben sich von den Anweisungen ab. */
.chat-befehlreihe { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap;
  margin-bottom: .3rem; }
.chat-befehlkopf { flex: 0 0 7.5rem; font-size: .66rem; color: var(--gedaempft);
  text-transform: uppercase; letter-spacing: .04em; }
.zeitknopf.antwort { border-style: dashed; }

/* ── Gefahrene Orte als Vorschlag ────────────────────────────────────────── */

/* Ein Dialysepatient fährt jahrelang dasselbe Ziel an. Statt es jedes Mal zu
   suchen, steht es hier als Knopf — mit der Zahl der bisherigen Fahrten. */
.verlauf-leiste { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
  margin: -.3rem 0 .5rem; }
.verlauf-kopf { font-size: .66rem; color: var(--gedaempft); text-transform: uppercase;
  letter-spacing: .04em; margin-right: .15rem; }
.verlauf-knopf { display: inline-flex; align-items: baseline; gap: .3rem;
  padding: .16rem .45rem; font-size: .74rem; border: 1px solid var(--rand);
  border-radius: var(--rundung); background: var(--grund); color: var(--text); cursor: pointer;
  max-width: 17rem; }
.verlauf-knopf > span:first-child { overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.verlauf-knopf:hover, .verlauf-knopf:focus-visible { border-color: var(--akzent);
  color: var(--akzent); outline: none; }
.verlauf-zahl { font-size: .66rem; color: var(--gedaempft); font-variant-numeric: tabular-nums; }
/* Aus alter Freitexteingabe: hilft beim Tippen, taugt aber nicht für Kilometer. */
.verlauf-knopf.ungeprueft { border-style: dashed; }

/* ── Besatzung aus dem Schichtplan ───────────────────────────────────────── */

.besatzung-hinweis { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: -.2rem 0 .5rem; padding: .3rem .55rem; border-radius: var(--rundung);
  font-size: .76rem; background: var(--gut-hell); color: var(--gut); }
/* Kein Fahrer eingeteilt heißt: Diese Fahrt fährt niemand. */
.besatzung-hinweis.ohne-schicht { background: var(--warnung-hell); color: var(--warnung); }
/* Von Hand gesetzt und weicht vom Plan ab — sichtbar, aber nicht überschrieben. */
.besatzung-hinweis.abweichend { background: var(--achtung-hell); color: var(--achtung); }

/* ── Orte und Besteller ──────────────────────────────────────────────────── */

/* Die Einrückung zeigt die Zugehörigkeit — dafür braucht es keine eigene Spalte. */
.baum { white-space: nowrap; }
.baum-strich { color: var(--gedaempft); font-size: .74rem; }
/* Der Besteller trägt die Kosten selbst — die Rechnung geht nicht an die Kasse. */

.katalog-anhang { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--rand); }
.katalog-anhang h4 { margin: 0 0 .5rem; font-size: .76rem; color: var(--gedaempft);
  font-weight: 600; }
.anhang-liste { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .9rem; }

.wochentage { display: flex; gap: .25rem; margin-top: .25rem; }
.wochentage .tag { display: flex; align-items: center; gap: .15rem; margin: 0;
  font-size: .72rem; color: var(--text); }
.wochentage .tag input { width: auto; margin: 0; }

/* ── Anrufererkennung ────────────────────────────────────────────────────── */

.anruf-knopf #anrufZahl { background: var(--akzent); }
.anruf-knopf #anrufZahl:not(:empty) { animation: pochen 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .anruf-knopf #anrufZahl { animation: none; } }

dialog.anruf { width: min(26rem, 92vw); border-color: var(--akzent); border-width: 2px; }
.anruf-kopf { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .7rem; }
.anruf-kopf strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.anruf-marke { font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--akzent); background: var(--akzent-hell); padding: .12rem .4rem; border-radius: var(--rundung-klein); }

.anruf-wer { display: flex; flex-direction: column; gap: .15rem; padding: .6rem .7rem;
  border-radius: var(--rundung); background: var(--gut-hell); margin-bottom: .6rem; }
.anruf-wer strong { font-size: .95rem; color: var(--gut); }
/* Treffer über die Anlagennummer statt über die Durchwahl — ein Hinweis, keine Aussage. */
.anruf-wer.vermutet { background: var(--achtung-hell); }
.anruf-wer.vermutet strong { color: var(--achtung); }
.anruf-wer.unbekannt { background: var(--spur); }
.anruf-wer.unbekannt strong { color: var(--gedaempft); }
.anruf-kontakt { font-size: .8rem; }
.anruf-hinweis { font-size: .74rem; color: var(--gedaempft); }
.anruf-vorschlaege { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap;
  margin-bottom: .6rem; }

/* ── Listen nach Tag ─────────────────────────────────────────────────────── */

/* Eine Liste, die zum gewählten Tag eigentlich nicht gehört, aber Einträge hat.
   Sie bleibt stehen, weil genau das der Fall ist, den man finden muss. */
.karte.block.nachzuegler { border-color: var(--achtung); }
.karte.block.nachzuegler .blockkopf::after {
  content: ' — offen von diesem Tag';
  font-size: .72rem; font-weight: 400; color: var(--achtung);
}
.tag-hinweis { font-size: .76rem; font-weight: 600; color: var(--achtung);
  background: var(--achtung-hell); padding: .12rem .45rem; border-radius: var(--rundung-klein); }

/* ── Nummernkreise ───────────────────────────────────────────────────────── */

.nk-karte { padding: .6rem .2rem; border-bottom: 1px solid var(--rand); }
.nk-karte:last-child { border-bottom: none; }
.nk-kopf { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .4rem; }
.nk-fuss { display: flex; align-items: center; gap: .5rem; }
/* Zeigt, wie die nächste Nummer aussähe — ohne sie zu verbrauchen. */
.nk-vorschau { padding: .1rem .4rem; border-radius: var(--rundung-klein); background: var(--spur);
  font-family: var(--schrift-zahl); font-size: .8rem; }
.nk-fuss button { margin-left: auto; }

/* ── Stornierte Fahrten ──────────────────────────────────────────────────── */

.storno-grund { max-width: 16rem; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
/* Der Platz auf dem Fahrzeug ist inzwischen vergeben — das entscheidet, ob die
   Reaktivierung ohne neue Zeit durchgeht. */
.menueliste li.trenner { border-top: 1px solid var(--rand); margin: .25rem 0; height: 0; }

/* ── Beförderungsarten am Fahrzeug ───────────────────────────────────────── */

/* Eine Zeile je Art statt vier fester Felder — nur so lassen sich zwei
   Tragestuhlplätze oder ein XXL-Rollstuhl überhaupt erfassen. */
.bef-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .35rem .8rem; width: 100%; }
.bef-zelle { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .78rem; }
.bef-kuerzel { flex: 0 0 2.6rem; font-size: .7rem; font-weight: 700; letter-spacing: .03em;
  color: var(--gedaempft); }
.bef-name { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.bef-zelle input { width: 3.4rem; margin: 0; }

.bef-zeile { display: flex; align-items: center; gap: .5rem; padding: .22rem 0; }
.bef-zeile.stillgelegt { opacity: .5; }
.bef-zeile.stillgelegt input { text-decoration: line-through; }
.bef-anzahl { flex: 0 0 4rem; text-align: right; font-size: .7rem; color: var(--gedaempft); }

/* ── Schließkreuz an jeder Maske ─────────────────────────────────────────── */

/* Escape allein reicht nicht: Wer die Anwendung neu bedient, sucht das Kreuz. */
dialog { position: relative; }
.dialog-schliessen { position: absolute; top: .55rem; right: .7rem; z-index: 2;
  border: none; background: none; color: var(--gedaempft); cursor: pointer;
  padding: .1rem .35rem; border-radius: var(--rundung); font-size: .95rem; line-height: 1; }
.dialog-schliessen:hover { background: var(--spur); color: var(--text); }
/* Platz für das Kreuz, damit es nicht auf der Überschrift liegt. */
.maskenkopf { padding-right: 2rem; }

/* ── Spalten sortieren und verschieben ───────────────────────────────────── */

.raster th.sortierbar { cursor: pointer; user-select: none; }
.raster th.sortierbar:hover { color: var(--akzent); }
/* Die Richtung als Pfeil am Kopf — ohne eigene Spalte und ohne Legende. */
.raster th.sortiert-auf::after,
.raster th.sortiert-ab::after {
  margin-left: .25rem; font-size: .7rem; color: var(--akzent);
}
.raster th.sortiert-auf::after { content: '▲'; }
.raster th.sortiert-ab::after { content: '▼'; }
.raster th.wird-verschoben { opacity: .4; }
.raster th.ablageziel { box-shadow: inset 2px 0 0 var(--akzent); }

/* ── Zweispaltige Masken ─────────────────────────────────────────────────── */

.maske-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.1rem;
  align-items: start; }
.maske-spalte { min-width: 0; }
/* Fieldsets bringen einen Außenabstand mit, der zwischen den Spalten doppelt zählt. */
.maske-spalte > fieldset { margin-left: 0; margin-right: 0; }

/* Schmale Fenster und Hochformat: lieber untereinander als gequetscht. Unter etwa
   64rem bleibt für zwei Spalten mit Adressfeldern kein sinnvoller Platz. */
@media (max-width: 64rem) {
  .maske-spalten { grid-template-columns: 1fr; }
}

/* ── Verortung und Karte ─────────────────────────────────────────────────── */

.verortung-zeile { display: flex; align-items: center; gap: .5rem; margin: -.2rem 0 .4rem; }
.verortung { font-size: .74rem; font-weight: 600; }
.verortung.sicher { color: var(--gut); }
/* Ungefähr heißt: Der Ort stimmt, das Haus vielleicht nicht. */
.verortung.wahrscheinlich { color: var(--achtung); }
.verortung.unsicher { color: var(--warnung); }
.adressquelle.ungeprueft { color: var(--warnung); }

dialog.karten-dialog { width: min(46rem, 94vw); }
#kartenFlaeche { position: relative; height: min(26rem, 52vh); overflow: hidden;
  border: 1px solid var(--rand); border-radius: var(--rundung-gross); background: var(--spur);
  cursor: grab; touch-action: none; }
#kartenFlaeche:active { cursor: grabbing; }
.karte-flaeche { position: absolute; inset: 0; }
.karte-flaeche img { position: absolute; width: 256px; height: 256px; user-select: none;
  pointer-events: none; }
/* Der Punkt bleibt in der Mitte, die Karte wandert darunter — so verdeckt der
   Finger nicht das, was man treffen will. */
.karte-punkt { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 3px solid var(--warnung); border-radius: 50%; background: rgb(255 255 255 / .5);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .25); pointer-events: none; z-index: 2; }
.karte-punkt::after { content: ''; position: absolute; inset: 5px; border-radius: 50%;
  background: var(--warnung); }
.karte-knoepfe { position: absolute; top: .5rem; right: .5rem; display: flex;
  flex-direction: column; gap: .25rem; z-index: 3; }
.karte-knoepfe button { width: 1.8rem; height: 1.8rem; padding: 0; font-size: 1rem;
  border: 1px solid var(--rand); border-radius: var(--rundung); background: var(--flaeche);
  color: var(--text); cursor: pointer; }
.karte-nachweis { position: absolute; bottom: .3rem; right: .4rem; z-index: 3;
  font-size: .62rem; color: #52525b; background: rgb(255 255 255 / .75);
  padding: 0 .25rem; border-radius: var(--rundung-klein); text-decoration: none; }

/* ── Betreiber-Dashboard ──────────────────────────────────────────────────── */

/* Die Leiste, die sagt: Das hier sind nicht deine Daten. Sie sitzt unter dem
   Menü, über allem anderen, und ist absichtlich nicht zu übersehen — wer im
   falschen Mandanten disponiert, merkt es sonst erst am Anruf. */
.fremdleiste {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem 1rem;
  background: var(--achtung-hell); color: var(--achtung);
  border-bottom: 2px solid var(--achtung);
  font-size: .85rem; font-weight: 600;
}
.fremdleiste button {
  margin-left: auto; font-size: .8rem; font-weight: 500;
  border-color: var(--achtung); color: var(--achtung); background: var(--flaeche);
}

/* Die Betriebsampel. Ihre Farbe ist die erste Antwort auf die Frage, warum man
   das Dashboard geöffnet hat. */
.ampel { border-left: 4px solid var(--rand); }
.ampel-gut { border-left-color: var(--gut); }
.ampel-achtung { border-left-color: var(--achtung); }
.ampel-kritisch { border-left-color: var(--warnung); }

.ampelkopf { font-size: .95rem; margin-bottom: .6rem; }
.ampel-gut .ampelkopf { color: var(--gut); }
.ampel-achtung .ampelkopf { color: var(--achtung); }
.ampel-kritisch .ampelkopf { color: var(--warnung); }

.ampelliste { list-style: none; margin: 0; padding: 0; }
.ampelpunkt {
  display: grid;
  grid-template-columns: 3.5rem minmax(14rem, auto) 1fr;
  gap: .6rem; align-items: baseline;
  padding: .3rem 0; border-top: 1px solid var(--rand-fein);
  font-size: .82rem;
}
.ampelpunkt:first-child { border-top: none; }
.ampelzahl {
  font-family: var(--schrift-zahl); font-variant-numeric: tabular-nums;
  font-weight: 600; text-align: right;
}
.ampelpunkt.gut .ampelzahl { color: var(--gedaempft); }
.ampelpunkt.achtung .ampelzahl { color: var(--achtung); }
.ampelpunkt.kritisch .ampelzahl { color: var(--warnung); }
.ampelhinweis { color: var(--gedaempft); font-size: .78rem; }

/* Bei schmalem Fenster bricht der Hinweis unter den Titel, statt die Zahl zu
   quetschen — die Zahl ist die Information, die man im Vorbeigehen liest. */
@media (max-width: 60rem) {
  .ampelpunkt { grid-template-columns: 3.5rem 1fr; }
  .ampelhinweis { grid-column: 2; }
}

/* Einladung einlösen — eine eigene Seite ohne Menü und Tafel. Bewusst schmal:
   Es sind drei Schritte hintereinander, keine Arbeitsfläche. */
#einrichtung {
  max-width: 34rem; margin: 3rem auto; padding: 1.75rem;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--rundung-gross);
}
#einrichtung h2 { margin: 0 0 1rem; font-size: 1.15rem; }
#einrichtung h3 { margin: 0 0 .6rem; font-size: 1rem; color: var(--gut); }
#einrichtung fieldset { margin-bottom: 1rem; }
#einrichtung #secret {
  font-family: var(--schrift-zahl); letter-spacing: .06em;
}
/* Die Wiederherstellungscodes sollen abschreibbar sein — Monospace, luftig. */
#codes {
  font-family: var(--schrift-zahl); font-size: .9rem; line-height: 1.7;
  background: var(--spur); border: 1px solid var(--rand); border-radius: var(--rundung);
  padding: .8rem 1rem; margin: .8rem 0; white-space: pre;
}

/* Die Wohnung unter den Zielvorschlägen: abgesetzt, damit auf einen Blick klar
   ist, was Wohnanschrift und was Einrichtung ist. Kein zweiter Akzentton, nur
   eine ruhigere Fläche — die Einrichtungen sollen die Aufmerksamkeit behalten. */
.verlauf-knopf.zuhause {
  background: var(--spur);
  border-style: dashed;
}
.verlauf-knopf.zuhause .verlauf-zahl {
  font-family: var(--schrift); font-variant-numeric: normal;
  color: var(--gedaempft);
}

/* Kopfzeile im Patientenkasten: Name links, der Weg in die Akte rechts. */
.patientkopf { display: flex; align-items: baseline; gap: .6rem; }
.patientkopf button { margin-left: auto; padding: .15rem .45rem; }

/* "Neu anlegen" am Ende einer leeren Trefferliste: abgesetzt, damit es nicht
   wie ein Suchtreffer aussieht — es ist eine andere Art von Handlung. */
.treffer li.anlegen {
  border-top: 1px solid var(--rand);
  color: var(--akzent);
  font-weight: 500;
}

/* Die drei Merkzeichen, an denen die Genehmigungsfreiheit hängt, stehen vorn und
   tragen einen Rahmen — im Anruf muss man sie finden, nicht suchen. */
label.kasten.merkzeichen-wichtig {
  border: 1px solid var(--rand-feld);
  border-radius: var(--rundung);
  padding: .1rem .4rem;
}

/* Was ein Merkzeichen bedeutet, steht beim Zeigen darauf — ohne die Sekunde
   Wartezeit des Browser-Tooltips. Zwei Buchstaben sind im Anruf nicht genug,
   und wer sie nachschlagen muss, hat den Anrufer schon warten lassen. */
#pMerkzeichenFeld label { position: relative; }
#pMerkzeichenFeld label[data-bedeutung]::after {
  content: attr(data-bedeutung);
  position: absolute; left: 0; top: calc(100% + .3rem);
  z-index: 10; white-space: nowrap;
  padding: .3rem .55rem; border-radius: var(--rundung);
  background: var(--text); color: var(--flaeche);
  font-size: .75rem; font-weight: 400;
  opacity: 0; pointer-events: none;
  transition: opacity .1s;
}
#pMerkzeichenFeld label:hover::after { opacity: 1; }
/* Nicht focus-within: Ein angeklicktes Kästchen behält den Fokus, und sein
   Tooltip bliebe stehen — mitten über dem Hinweis darunter. Bei Bedienung über
   die Tastatur soll er dagegen erscheinen, denn dort gibt es kein Hovern. */
#pMerkzeichenFeld label:has(input:focus-visible)::after { opacity: 1; }

/* Die letzten Kästchen laufen sonst über den rechten Rand hinaus. */
#pMerkzeichenFeld label:nth-last-child(-n+3)[data-bedeutung]::after {
  left: auto; right: 0;
}

/* ── Tagesliste neben der Fahrtaufnahme ──────────────────────────────────────
   Bei fünfzig Fahrten am Tag beantwortet eine Liste in der Maske die Frage nicht
   mehr, die im Gespräch gestellt wird. Sie steht deshalb daneben und bleibt
   stehen, während getippt wird. */
#fahrtDialog .mit-tagesliste { display: flex; gap: 1rem; align-items: flex-start; }
#fahrtDialog form { flex: 1 1 auto; min-width: 0; }

#tagesliste {
  flex: 0 0 22rem;
  align-self: stretch;
  display: flex; flex-direction: column;
  border-left: 1px solid var(--rand);
  padding-left: 1rem;
  max-height: 80vh;
}
.tagesliste-kopf {
  display: flex; align-items: baseline; gap: .5rem;
  padding-bottom: .5rem; margin-bottom: .3rem;
  border-bottom: 1px solid var(--rand);
}
#tageslisteInhalt { overflow-y: auto; flex: 1 1 auto; }

.tagesliste-zeile {
  display: grid;
  grid-template-columns: 3.2rem 4rem 1fr;
  grid-template-areas: "zeit fahrzeug name" ". . strecke";
  gap: .1rem .5rem; align-items: baseline;
  padding: .3rem .35rem; border-top: 1px solid var(--rand-fein);
  font-size: .78rem;
}
.tagesliste-zeile:first-child { border-top: none; }
.tagesliste-zeit {
  grid-area: zeit;
  font-family: var(--schrift-zahl); font-variant-numeric: tabular-nums;
  color: var(--text-zweit);
}
.tagesliste-zeile .tage-marke { grid-area: fahrzeug; }
.tagesliste-name {
  grid-area: name; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tagesliste-strecke {
  grid-area: strecke; color: var(--gedaempft); font-size: .74rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Die Fahrt, die gerade entsteht — an ihrer Zeitposition zwischen den anderen,
   damit man sieht, wo sie landet. Der Akzentton, nicht Grün oder Rot: Sie ist
   weder gut noch schlecht, sie ist die eigene. */
.tagesliste-zeile.eigene {
  background: var(--akzent-hell);
  border-left: 3px solid var(--akzent);
  border-radius: var(--rundung-klein);
  margin-left: -.35rem;
}
.tagesliste-zeile.eigene .tagesliste-name { font-weight: 600; color: var(--akzent); }

/* Schmales Fenster: Die Liste rutscht unter die Maske, statt sie zu quetschen. */
@media (max-width: 88rem) {
  #fahrtDialog .mit-tagesliste { flex-wrap: wrap; }
  #tagesliste {
    flex: 1 1 100%; max-height: 14rem;
    border-left: none; padding-left: 0;
    border-top: 1px solid var(--rand); padding-top: .6rem;
  }
}

/* Die Antwort auf "bekomme ich das noch unter" — über der Liste, weil sie zuerst
   gelesen wird. Ampelfarben, aber ohne Fläche: Sie ist ein Hinweis, keine
   Warnung, und der Disponent entscheidet weiterhin selbst. */
.kapazitaet {
  padding: .35rem 0 .5rem;
  border-bottom: 1px solid var(--rand-fein);
  margin-bottom: .3rem;
}
.kapazitaet.gut { color: var(--gut); }
.kapazitaet.knapp { color: var(--achtung); font-weight: 500; }
.kapazitaet.keine { color: var(--warnung); font-weight: 600; }

/* ═══ Designsystem-Komponenten (#60, shadcn-Designsprache) ══════════════════
   Neue, benannte Bausteine. Die Referenzseite (Patienten) und die App-Shell
   verwenden sie zuerst; der Rollout stellt die übrigen Bereiche schrittweise um.
   Alte Klassen bleiben bis dahin funktionsfähig. */

/* ── App-Shell: Seitenleiste + Hauptspalte ── */
#anwendung { display: flex; min-height: 100vh; }
.hauptspalte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; position: relative; }
.hauptspalte > .bereich, .hauptspalte > .rumpf { flex: 1 1 auto; }

.seitenleiste {
  flex: 0 0 14.5rem; display: flex; flex-direction: column;
  background: var(--sidebar); color: var(--sidebar-foreground);
  border-right: 1px solid var(--sidebar-border);
  padding: var(--space-3) var(--space-2);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sl-marke { display: flex; align-items: center; gap: .5rem; font-weight: 600;
  font-size: .92rem; color: var(--foreground); padding: .35rem .55rem; margin-bottom: var(--space-3); }
.sl-marke .ikone { color: var(--primary); }
.sl-gruppe { font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted-foreground); padding: .8rem .55rem .3rem; }
.sl-eintrag {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  background: transparent; border: none; border-radius: var(--radius-md);
  padding: .42rem .55rem; font-size: .82rem; color: inherit; cursor: pointer;
  text-align: left;
}
.sl-eintrag:hover { background: color-mix(in srgb, var(--sidebar-accent) 55%, transparent); border-color: transparent; }
.sl-eintrag.aktiv { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); font-weight: 600; }
.sl-eintrag .ikone { flex: 0 0 auto; opacity: .8; }
.sl-eintrag.aktiv .ikone { opacity: 1; }
.sl-fuss { margin-top: auto; border-top: 1px solid var(--sidebar-border); padding-top: var(--space-2); }
.sl-wer { display: block; padding: .3rem .55rem; font-size: .74rem; color: var(--muted-foreground);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Lucide-Icons: Inline-SVG, 24er-Raster, 2-px-Strich */
.ikone { width: 1.05rem; height: 1.05rem; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Schmale Fenster: Seitenleiste einklappen auf Icons */
@media (max-width: 64rem) {
  .seitenleiste { flex-basis: 3.4rem; padding: var(--space-3) .35rem; }
  .seitenleiste .sl-text, .seitenleiste .sl-gruppe, .seitenleiste .sl-wer { display: none; }
  .sl-eintrag { justify-content: center; }
  .sl-marke { justify-content: center; padding: .35rem 0; }
  .sl-marke span { display: none; }
}

/* ── Knopf-Familie ── */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border-radius: var(--radius-md); border: 1px solid transparent;
  padding: .42rem .85rem; font-size: .82rem; font-weight: 500; cursor: pointer;
  transition: background-color .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.knopf:disabled { opacity: .55; cursor: default; }
.knopf-primaer { background: var(--primary); color: var(--primary-foreground); }
.knopf-primaer:hover { background: var(--primary-hover); border-color: transparent; }
.knopf-kontur { background: var(--card); border-color: var(--border); color: var(--foreground); box-shadow: var(--shadow-sm); }
.knopf-kontur:hover { background: var(--muted); border-color: var(--input); }
.knopf-still { background: transparent; color: var(--foreground); }
.knopf-still:hover { background: var(--muted); border-color: transparent; }
.knopf-gefahr { background: var(--destructive); color: var(--destructive-foreground); }
.knopf-gefahr:hover { background: color-mix(in srgb, var(--destructive) 85%, black); border-color: transparent; }
.knopf-klein { padding: .22rem .55rem; font-size: .76rem; }
.knopf-icon { padding: .42rem; }
.knopf-icon.knopf-klein { padding: .22rem; }
/* Destruktive Bestands-Knöpfe (class=gefahr) waren bislang ungestylt. */
button.gefahr { border-color: var(--destructive); color: var(--destructive); background: var(--card); }
button.gefahr:hover { background: var(--destructive-subtle); border-color: var(--destructive); }

/* ── Badge-Familie: eine Statusdarstellung statt je Bereich eigener Marken ── */
.patient .badge, span + .badge { margin-left: .3rem; }
.badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .08rem .45rem; border-radius: 999px;
  font-size: .7rem; font-weight: 500; line-height: 1.4;
  background: var(--muted); color: var(--muted-foreground);
  border: 1px solid var(--border);
}
.badge-gut { background: var(--success-subtle); color: var(--success); border-color: var(--success-border); }
.badge-achtung { background: var(--warning-subtle); color: var(--warning); border-color: var(--warning-border); }
.badge-warnung { background: var(--destructive-subtle); color: var(--destructive); border-color: color-mix(in srgb, var(--destructive) 35%, transparent); }
.badge-akzent { background: var(--accent); color: var(--accent-foreground); border-color: var(--akzent-rand); }

/* ── Seitenkopf + Werkzeugleiste: das eine Titelmuster ── */
.seitenkopf { display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-2) 0 var(--space-3); flex-wrap: wrap; }
.seitenkopf h1 { margin: 0; font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
.seitenkopf h2 { margin: 0; font-size: .95rem; font-weight: 600; }
.seitenkopf.folgeblock { margin-top: var(--space-5); }
.seitenkopf .untertitel { margin: .15rem 0 0; font-size: .8rem; color: var(--muted-foreground); }
.seitenkopf-aktionen { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.werkzeugleiste { display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-3); flex-wrap: wrap; }
.werkzeugleiste label.kasten { margin-bottom: 0; }

/* Suchfeld mit Lupe */
.suchfeld { position: relative; display: inline-flex; align-items: center; }
.suchfeld .ikone { position: absolute; left: .55rem; color: var(--muted-foreground); pointer-events: none; }
.suchfeld input { padding-left: 2rem; }

/* Leere Tabellen: ruhiger Empty State */
table.raster td.leer { color: var(--muted-foreground); text-align: center; padding: 2.2rem 1rem; }