/* Bausteine. Jede hier definierte Klasse wird von src/core/ui.js oder den
   Ansichten verwendet. Wer eine Klasse benutzt, die hier fehlt, bekommt ein
   kaputtes Bild - vor dem Einsatz immer gegen diese Datei pruefen. */

/* ---------------------------------------------------------------- Knoepfe */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--raum-2);
  height: var(--steuer-hoehe);
  padding: 0 var(--raum-4);
  /* Neugestaltung 24.09.2026: Knopfrundung als Token (limou 8px, VHV 4px). */
  border-radius: var(--rund-knopf);
  border: 1px solid var(--linie);
  background: var(--flaeche-karte);
  color: var(--schrift-stark);
  font-size: var(--grad-2);
  font-weight: var(--fett-halb);
  white-space: nowrap;
  transition: background var(--dauer-schnell) var(--kurve),
              border-color var(--dauer-schnell) var(--kurve),
              color var(--dauer-schnell) var(--kurve);
}
.knopf:hover { background: var(--flaeche-vertieft); border-color: var(--ton-400); }
.knopf:active { background: var(--flaeche-still); }
/* Schalterknopf (.knopf-schalter) im Zustand "an" (aria-pressed). Stille Flaeche, starke
   Schrift, dunklere Kante und ein Haken davor - erkennbar ohne Farbe.
   schrift-stark auf flaeche-still: limou hell 13.17, dunkel 11.56. */
.knopf-schalter[aria-pressed="true"] {
  background: var(--flaeche-still);
  border-color: var(--schrift-leise);
  color: var(--schrift-stark);
  font-weight: var(--fett-halb);
}
.knopf-schalter[aria-pressed="true"]::before {
  content: "";
  width: 9px;
  height: 5px;
  margin: -3px 2px 0 0;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.knopf svg { width: 16px; height: 16px; flex: none; }

/* Hauptknopf: --akzent mit --akzent-schrift, die Schrift nie fest.
   limou hell Petrol mit Weiss 7.83:1, dunkel Petrol hell mit Tinte 8.73:1;
   VHV Orange mit dunkler Schrift 5.49:1 (Weiss kaeme dort auf 3.13:1).
   Hover auf --akzent-schwach: limou 10.44 / 10.93, VHV 6.50 / 6.50. */
.knopf-haupt {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--akzent-schrift);
  font-weight: var(--fett-halb);
}
.knopf-haupt:hover { background: var(--akzent-schwach); border-color: var(--akzent-schwach); }
.knopf-haupt:active { background: var(--akzent-schwach); }

/* Stiller Knopf in --schrift-akzent (Figma 46:2 "Knopf/still"): ein Verweis
   in Knopfform. Auf der Karte limou hell 7.83 / dunkel 8.90, VHV 6.30 / 5.97. */
.knopf-still {
  border-color: transparent;
  background: transparent;
  color: var(--schrift-akzent);
}
.knopf-still:hover { background: var(--flaeche-still); border-color: transparent; color: var(--schrift-akzent); }

.knopf-gefahr {
  border-color: var(--gefahr-linie);
  color: var(--gefahr-schrift);
  background: var(--flaeche-karte);
}
.knopf-gefahr:hover { background: var(--gefahr-flaeche); border-color: var(--gefahr-schrift); }

/* Deaktiviert wird die FLAECHE gedaempft, nicht das ganze Element - wie
   bei .fp-taste-haupt:disabled. Mit opacity 0.45 kam die Beschriftung auf
   1.93 bis 3.25:1. Fuer jede Knopfart gleich, auch beim Ueberfahren.
   schrift-leise auf flaeche-still, gerechnet 15.09.2026: limou hell 5.91 /
   dunkel 6.20, VHV hell 4.95 / dunkel 5.45. */
.knopf:disabled,
.knopf:disabled:hover,
.knopf:disabled:active,
.knopf-haupt:disabled,
.knopf-haupt:disabled:hover,
.knopf-still:disabled,
.knopf-still:disabled:hover,
.knopf-gefahr:disabled,
.knopf-gefahr:disabled:hover {
  background: var(--flaeche-still);
  border-color: var(--linie);
  color: var(--schrift-leise);
  cursor: not-allowed;
}
.knopf:disabled .knopf-pfeil { color: currentColor; }

.knopf-klein { height: var(--steuer-hoehe-klein); padding: 0 var(--raum-3); font-size: var(--grad-1); }
.knopf-klein svg { width: 13px; height: 13px; }
.knopf-gross { height: var(--steuer-hoehe-gross); padding: 0 var(--raum-5); font-size: var(--grad-3); }

.knopf-zeichen { width: var(--steuer-hoehe); padding: 0; flex: none; }
.knopf-zeichen.knopf-klein { width: var(--steuer-hoehe-klein); }

/* Ein Knopf kann auch ein Verweis sein (ui.verweis mit alsKnopf). */
a.knopf:hover { text-decoration: none; }

/* Nachgestellter Pfeil nach rechts (ui.knopf mit pfeil, ui.verweis).
   Auf Knoepfen in --schrift-akzent, je hell / dunkel: auf der Karte
   limou 7.83 / 8.90, VHV 6.30 / 5.97; auf der Hover-Flaeche (vertieft)
   limou 7.40 / 9.46, VHV 6.08 / 6.88. Auf dem Hauptknopf und dem
   Gefahrknopf in der Schriftfarbe, sonst verschwaende er in der
   Knopfflaeche. */
.knopf .knopf-pfeil { color: var(--schrift-akzent); }
.knopf-haupt .knopf-pfeil,
.knopf-gefahr .knopf-pfeil { color: currentColor; }

/* Verweis als Text mit Pfeil ("Zur Flotte", "Alle Fahrten").
   --schrift-akzent je hell / dunkel: auf der Karte limou 7.83 / 8.90,
   VHV 6.30 / 5.97; auf dem Grund limou 6.98 / 9.89, VHV 5.82 / 7.63. */
.verweis {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-1);
  color: var(--schrift-akzent);
  font-weight: var(--fett-mittel);
}
.verweis svg { width: 15px; height: 15px; flex: none; }

/* Knopfgruppe als Segment (Figma 46:2 "Segment"): stille Flaeche, der
   gewaehlte Eintrag liegt als Karte darauf. Erkennbar auch ohne Farbe am
   Gewicht. schrift-stark auf Karte limou 16.26 / 13.84. */
.knopf-gruppe {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 0;
  border-radius: var(--rund-knopf);
  background: var(--flaeche-still);
}
.knopf-gruppe .knopf {
  border: none;
  border-radius: calc(var(--rund-knopf) - 2px);
  background: transparent;
  color: var(--schrift-normal);
  font-weight: var(--fett-mittel);
  height: calc(var(--steuer-hoehe) - 6px);
  padding: 0 var(--raum-3);
}
.knopf-gruppe .knopf:hover { color: var(--schrift-stark); background: transparent; }
.knopf-gruppe .knopf[aria-pressed="true"] {
  background: var(--flaeche-karte);
  color: var(--schrift-stark);
  font-weight: var(--fett-halb);
  box-shadow: var(--schatten-1);
}

/* ----------------------------------------------------------------- Karten */

/* Karten tragen eine Linie statt eines Schattens und --rund-3 (limou 6px,
   VHV 3px). Die Linie gliedert nur, sie traegt keine Aussage: gegen die
   Karte 1.30 bis 1.51 in allen vier Zustaenden. */
/* Neugestaltung 24.09.2026: Rundung --rund-karte (limou 12px, VHV 6px),
   leise Linie und ein leichter Schatten (--schatten-karte, im dunklen Thema
   keiner). Die Linie gliedert nur, sie traegt keine Aussage. */
.karte {
  background: var(--flaeche-karte);
  border: 1px solid var(--linie-leise);
  border-radius: var(--rund-karte);
  box-shadow: var(--schatten-karte);
  overflow: hidden;
}

/* Band "Zum Tagesbeginn" in der Uebersicht: Akzentlinie oben statt einer
   eigenen Flaeche. Linie, Grenze 3:1 gegen Karte / Grund, gerechnet mit
   --akzent-linie: limou hell 7.83 / 6.98, dunkel 8.90 / 9.89; VHV hell
   4.32 / 3.99, dunkel 3.88 / 4.96. */
.karte.tagesbeginn { border-top: 2px solid var(--akzent-linie); }

.karte-kopf {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  padding: var(--raum-4) var(--raum-5);
  border-bottom: 1px solid var(--linie-leise);
  min-height: 48px;
}

.karte-titel {
  font-size: var(--grad-3);
  font-weight: var(--gewicht-abschnitt);
  color: var(--schrift-stark);
}

.karte-unter {
  font-size: var(--grad-1);
  color: var(--schrift-leise);
}

.karte-koerper { padding: var(--raum-5); }
.karte-koerper-eng { padding: var(--raum-4); }
.karte-koerper-blank { padding: 0; }

.karte-fuss {
  padding: var(--raum-3) var(--raum-5);
  border-top: 1px solid var(--linie-leise);
  background: var(--flaeche-vertieft);
  display: flex;
  align-items: center;
  gap: var(--raum-3);
}

.karte-verweis { display: block; color: inherit; }
.karte-verweis:hover { text-decoration: none; border-color: var(--linie-stark); }

/* -------------------------------------------------------------- Kennzahl */

.kennzahl {
  background: var(--flaeche-karte);
  border: 1px solid var(--linie-leise);
  border-radius: var(--rund-karte);
  box-shadow: var(--schatten-karte);
  padding: var(--raum-4) var(--raum-5);
  display: flex;
  flex-direction: column;
  gap: var(--raum-1);
  min-width: 0;
}

.kennzahl-marke {
  font-size: var(--grad-1);
  color: var(--schrift-leise);
  font-weight: var(--fett-mittel);
  display: flex;
  align-items: center;
  gap: var(--raum-2);
}
.kennzahl-marke svg { width: 14px; height: 14px; flex: none; }
.kennzahl-marke > span { min-width: 0; overflow-wrap: anywhere; }

/* Zahl gross und schwer (Figma 46:2 "Kachel": 34px ExtraBold). */
.kennzahl-wert {
  font-size: 34px;
  font-weight: var(--gewicht-titel);
  color: var(--schrift-stark);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.kennzahl-einheit {
  font-size: var(--grad-3);
  font-weight: var(--fett-normal);
  color: var(--schrift-leise);
  margin-left: 2px;
}

.kennzahl-fuss {
  font-size: var(--grad-1);
  color: var(--schrift-leise);
}

.kennzahl-warnung .kennzahl-wert { color: var(--gefahr-schrift); }
.kennzahl-achtung .kennzahl-wert { color: var(--warn-schrift); }
.kennzahl-gut .kennzahl-wert { color: var(--gut-schrift); }

/* -------------------------------------------------------------- Abzeichen */

.abzeichen {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-1);
  height: 22px;
  padding: 0 var(--raum-2);
  border-radius: var(--rund-2);
  font-size: var(--grad-0);
  font-weight: var(--fett-halb);
  white-space: nowrap;
  /* Flaeche ohne Rahmen (Figma 46:2 "Abzeichen"); die Schrift traegt den Ton. */
  border: 0;
  background: var(--neutral-flaeche);
  color: var(--neutral-schrift);
}
.abzeichen-gut { background: var(--gut-flaeche); color: var(--gut-schrift); }
.abzeichen-info { background: var(--info-flaeche); color: var(--info-schrift); }
.abzeichen-warnung { background: var(--warn-flaeche); color: var(--warn-schrift); }
.abzeichen-gefahr { background: var(--gefahr-flaeche); color: var(--gefahr-schrift); }

.abzeichen-punkt {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* Fahne fuer Kategorien (Fahrtart, Mietwagen) ueber --fahne-*: limou
   Petrol-Hauch mit Tinte 13.29:1, VHV Lindgruen hell mit dunkler Schrift
   12.26:1, jeweils in beiden Themen gleich. Status bleibt beim
   Abzeichen mit seinen Bedeutungsfarben - die Fahne sagt "welche Art",
   nie "wie steht es". */
.fahne {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--raum-2);
  border-radius: var(--rund-2);
  background: var(--fahne-flaeche);
  color: var(--fahne-schrift);
  font-size: var(--grad-0);
  font-weight: var(--fett-halb);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- Tabelle */

.tabelle-huelle {
  width: 100%;
  overflow-x: auto;
}
/* Eine Tabelle, die frei in der Ansicht steht (Fahrer, Flotte), bekommt
   dieselbe Flaeche und Kante wie eine Karte. Vorher lag sie ohne Rahmen
   auf dem Grund und lief bei 1440px rechts ins Leere. In einer Karte
   bleibt es bei der Karte. Kante --linie, nur Gliederung. */
.tabelle-huelle:not(.karte .tabelle-huelle) {
  background: var(--flaeche-karte);
  border: 1px solid var(--linie-leise);
  border-radius: var(--rund-karte);
  box-shadow: var(--schatten-karte);
}

.tabelle { font-size: var(--grad-2); }

.tabelle thead th {
  text-align: left;
  padding: var(--raum-3) var(--raum-4);
  font-size: var(--grad-1);
  font-weight: var(--fett-halb);
  color: var(--schrift-leise);
  background: var(--flaeche-vertieft);
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

.tabelle tbody td {
  padding: var(--raum-3) var(--raum-4);
  line-height: 1.4;
  border-bottom: 1px solid var(--linie-leise);
  color: var(--schrift-normal);
  vertical-align: middle;
}

.tabelle tbody tr:last-child td { border-bottom: none; }

.tabelle tbody tr.anklickbar { cursor: pointer; }
.tabelle tbody tr.anklickbar:hover td { background: var(--flaeche-vertieft); }

.tabelle .stark { color: var(--schrift-stark); font-weight: var(--fett-mittel); }
.tabelle .leise { color: var(--schrift-leise); }
.tabelle .rechts { text-align: right; }
.tabelle .mitte { text-align: center; }
.tabelle .eng { width: 1%; white-space: nowrap; }
/* Kopf einer engen Spalte darf umbrechen ("Fahrten / heute"), der Inhalt
   nicht. Sonst bestimmt die Beschriftung die Breite der Spalte. */
.tabelle thead th.eng { white-space: normal; min-width: 4.5rem; }
/* Spalte mit Namen und Zusatz: breit genug, dass "Fachbereich A" nicht in
   drei Zeilen zerfaellt, wenn eine Nachbarspalte viel Text traegt. */
.tabelle .spalte-breit { min-width: 13rem; }
/* Zuteilung: Fahrer ueber dem Kennzeichen, beide links buendig. */
.zuteilung-zelle { align-items: flex-start; white-space: nowrap; }

.tabelle-zelle-haupt {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tabelle-zelle-haupt strong {
  font-weight: var(--fett-mittel);
  color: var(--schrift-stark);
}
.tabelle-zelle-haupt span {
  font-size: var(--grad-1);
  color: var(--schrift-leise);
}

.tabelle-aktionen {
  display: flex;
  align-items: center;
  gap: var(--raum-1);
  justify-content: flex-end;
}

.kennzeichen {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--raum-2);
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund-2);
  background: var(--flaeche-vertieft);
  font-family: var(--schriftfamilie-fest);
  /* Mono erst ab 14px (DESIGN.md 5). */
  font-size: var(--grad-2);
  font-weight: var(--fett-halb);
  letter-spacing: 0.04em;
  color: var(--schrift-stark);
  white-space: nowrap;
}

/* --------------------------------------------------------------- Formular */

.formular { display: flex; flex-direction: column; gap: var(--raum-4); }

.formular-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--raum-4);
}
.formular-raster-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--raum-4);
}
.formular-voll { grid-column: 1 / -1; }

/* Zwischenueberschrift im Formular (ui.feld, art 'abschnitt'). Gliedert von
   oben nach unten: Auftrag, Wann, Wer, Strecke, Zuteilung, Weiteres. Farben
   nur aus Tokens (--schrift-stark auf der Modalflaeche, --linie als Trenner). */
.formular-abschnitt {
  font-size: var(--grad-3);
  font-weight: var(--fett-mittel);
  color: var(--schrift-stark);
  padding-top: var(--raum-2);
  border-top: 1px solid var(--linie);
}
.formular-abschnitt:first-child { padding-top: 0; border-top: 0; }

.feld { display: flex; flex-direction: column; gap: var(--raum-2); min-width: 0; }

.feld-marke {
  font-size: var(--grad-1);
  font-weight: var(--fett-mittel);
  color: var(--schrift-normal);
  display: flex;
  align-items: center;
  gap: var(--raum-2);
}

.feld-pflicht { color: var(--gefahr-schrift); }

.feld-hilfe { font-size: var(--grad-1); color: var(--schrift-leise); }

.feld-fehler {
  font-size: var(--grad-1);
  color: var(--gefahr-schrift);
  font-weight: var(--fett-mittel);
}

.eingabe,
.auswahl,
.textfeld {
  width: 100%;
  min-height: 40px;
  padding: var(--raum-2) var(--raum-3);
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund-knopf);
  background: var(--flaeche-karte);
  color: var(--schrift-stark);
  font-size: var(--grad-3);
  transition: border-color var(--dauer-schnell) var(--kurve);
}
/* Platzhalter in schrift-leise auf der Feldflaeche (Karte), 13px. Vorher
   ton-400: hell nur 2.86:1 (limou) und 2.41:1 (VHV). Jetzt, gerechnet
   15.09.2026: limou hell 7.29 / dunkel 7.42, VHV hell 5.76 / dunkel 6.53.
   opacity 1, weil Firefox Platzhalter sonst zusaetzlich abdunkelt. */
.eingabe::placeholder,
.textfeld::placeholder { color: var(--schrift-leise); opacity: 1; }
.eingabe:hover,
.auswahl:hover,
.textfeld:hover { border-color: var(--ton-400); }
.eingabe:disabled,
.auswahl:disabled,
.textfeld:disabled {
  background: var(--flaeche-still);
  color: var(--schrift-leise);
  cursor: not-allowed;
}

.textfeld { min-height: 76px; resize: vertical; line-height: var(--zeile-normal); }

.auswahl {
  appearance: none;
  padding-right: var(--raum-8);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.feld-fehlerhaft .eingabe,
.feld-fehlerhaft .auswahl,
.feld-fehlerhaft .textfeld { border-color: var(--gefahr-schrift); }

.eingabe-gruppe { display: flex; align-items: stretch; gap: var(--raum-2); }
.eingabe-gruppe .eingabe { flex: 1; }

.eingabe-nachsatz {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--raum-3);
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund-2);
  background: var(--flaeche-vertieft);
  color: var(--schrift-leise);
  font-size: var(--grad-2);
  white-space: nowrap;
}

.wahlfeld {
  display: flex;
  align-items: flex-start;
  gap: var(--raum-3);
  padding: var(--raum-3);
  border: 1px solid var(--linie);
  border-radius: var(--rund-2);
  cursor: pointer;
}
.wahlfeld:hover { background: var(--flaeche-vertieft); }
.wahlfeld input { margin-top: 3px; flex: none; accent-color: var(--akzentton-500); }
.wahlfeld-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wahlfeld-titel { font-size: var(--grad-2); font-weight: var(--fett-mittel); color: var(--schrift-stark); }
.wahlfeld-unter { font-size: var(--grad-1); color: var(--schrift-leise); }

.schalter {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-3);
  cursor: pointer;
  font-size: var(--grad-2);
}
.schalter input { accent-color: var(--akzentton-500); width: 16px; height: 16px; }

.formular-fuss {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  padding-top: var(--raum-4);
  border-top: 1px solid var(--linie);
}

/* ------------------------------------------------------------ Filterleiste */

.filterleiste {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  flex-wrap: wrap;
  padding: var(--raum-3) var(--raum-4);
  background: var(--flaeche-karte);
  border: 1px solid var(--linie);
  border-radius: var(--rund-3);
  margin-bottom: var(--raum-4);
}

.filterleiste .eingabe,
.filterleiste .auswahl { width: auto; min-width: 150px; height: var(--steuer-hoehe); min-height: var(--steuer-hoehe); }

.filter-suche { position: relative; flex: 1 1 220px; max-width: 340px; }
.filter-suche .eingabe { width: 100%; padding-left: var(--raum-8); }
.filter-suche svg {
  position: absolute;
  left: var(--raum-3);
  top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  color: var(--schrift-leise);
  pointer-events: none;
}

.filter-marke {
  font-size: var(--grad-1);
  color: var(--schrift-leise);
  font-weight: var(--fett-mittel);
}

.filter-anzahl {
  font-size: var(--grad-1);
  color: var(--schrift-leise);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- Leerzustand */

.leerzustand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--raum-3);
  padding: var(--raum-12) var(--raum-6);
  text-align: center;
}

.leerzustand-zeichen {
  width: 40px; height: 40px;
  color: var(--ton-300);
}

.leerzustand-titel {
  font-size: var(--grad-4);
  font-weight: var(--fett-halb);
  color: var(--schrift-stark);
}

.leerzustand-text {
  font-size: var(--grad-2);
  color: var(--schrift-leise);
  max-width: 40ch;
}

/* ------------------------------------------------------------------ Modal */

.modal-hintergrund {
  position: fixed;
  inset: 0;
  background: rgba(18, 18, 16, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--raum-8) var(--raum-4);
  overflow-y: auto;
  z-index: 60;
}

.modal {
  background: var(--flaeche-karte);
  border: 1px solid var(--linie);
  border-radius: var(--rund-4);
  box-shadow: var(--schatten-3);
  width: 100%;
  max-width: 620px;
  margin: auto;
}
.modal-schmal { max-width: 420px; }
.modal-breit { max-width: 880px; }

.modal-kopf {
  display: flex;
  align-items: flex-start;
  gap: var(--raum-4);
  padding: var(--raum-5) var(--raum-5) var(--raum-4);
  border-bottom: 1px solid var(--linie);
}

.modal-titel {
  font-size: var(--grad-4);
  font-weight: var(--fett-halb);
  color: var(--schrift-stark);
}

.modal-unter {
  font-size: var(--grad-2);
  color: var(--schrift-leise);
  margin-top: 2px;
}

.modal-koerper {
  padding: var(--raum-5);
  max-height: calc(100vh - 260px);
  overflow-y: auto;
}

.modal-fuss {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--raum-2);
  padding: var(--raum-4) var(--raum-5);
  border-top: 1px solid var(--linie);
  background: var(--flaeche-vertieft);
  border-radius: 0 0 var(--rund-4) var(--rund-4);
}

/* ----------------------------------------------------------------- Hinweis */

.hinweis-bereich {
  position: fixed;
  bottom: var(--raum-5);
  right: var(--raum-5);
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
  z-index: 80;
  pointer-events: none;
}
/* Mit offenem Dialog nach links unten. Rechts unten deckte der Hinweis
   "Selbst ausgefuellt ... Rueckgaengig" die Knoepfe im Fuss des
   Fahrtformulars zu (gemessen 1440x900: "Anlegen und naechste" halb
   verdeckt). Links unten liegt im Dialogfuss nichts, die Knoepfe stehen
   rechts. */
body:has(.modal-hintergrund) .hinweis-bereich {
  right: auto;
  left: var(--raum-5);
}

.hinweis {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  padding: var(--raum-3) var(--raum-4);
  border-radius: var(--rund-3);
  background: var(--ton-900);
  color: var(--ton-050);
  font-size: var(--grad-2);
  box-shadow: var(--schatten-3);
  max-width: 380px;
  pointer-events: auto;
}
.hinweis svg { width: 16px; height: 16px; flex: none; }
/* Zeichen im Hinweis. Die Flaeche ist in beiden Themen --ton-900, Grenze
   3:1, Zahlen limou / VHV: gut --primaerton-400 10.80 / 7.54; gefahr
   --marke-warnung-flaeche 9.41 / 6.20 (das helle Rot fuer dunkle Flaechen,
   themenunabhaengig; vorher fest #e8a79e); warnung --akzentton-300
   8.73 / 5.97. */
.hinweis-gut svg { color: var(--primaerton-400); }
.hinweis-gefahr svg { color: var(--marke-warnung-flaeche); }
.hinweis-warnung svg { color: var(--akzentton-300); }

/* Hinweis mit Rueckgaengig-Knopf (ui.rueckgaengigHinweis). Die Flaeche
   ist in beiden Themen --ton-900. Gemessen darauf, limou / VHV: Text
   ton-050 14.49 / 11.23, Restzeit ton-300 8.20 / 6.53. Knopf
   --primaerton-500 (limou Petrol hell, VHV Lindgruen) mit --band-schrift
   8.73 / 8.57, Hover --primaerton-400 10.80 / 10.66, Knopfflaeche gegen
   den Hinweis 8.73 / 6.06. Fokus in --primaerton-500 8.73 / 6.06 - der
   Standard-Fokus des hellen Themas kaeme auf der dunklen Flaeche nur auf
   2.08 (Petrol) und 2.81 (Orange). */
.hinweis-rueckgaengig { max-width: 460px; }
.hinweis-rueckgaengig svg { color: var(--primaerton-400); }
.hinweis-text { flex: 1; min-width: 0; }
.hinweis-restzeit {
  flex: none;
  font-size: var(--grad-1);
  color: var(--ton-300);
  font-variant-numeric: tabular-nums;
}
.hinweis-knopf {
  flex: none;
  height: 27px;
  padding: 0 var(--raum-3);
  border-radius: var(--rund-2);
  background: var(--primaerton-500);
  color: var(--band-schrift);
  font-size: var(--grad-1);
  font-weight: var(--fett-halb);
  white-space: nowrap;
}
.hinweis-knopf:hover { background: var(--primaerton-400); }
/* Deaktiviert ohne opacity (vorher 0.6: 3.41:1 limou, 3.53:1 VHV). Die
   Flaeche wird zu ton-700, die Schrift zu ton-200 - der Hinweis ist in
   beiden Themen dunkel. Gerechnet 15.09.2026: limou 7.50:1, VHV 5.77:1. */
.hinweis-knopf:disabled,
.hinweis-knopf:disabled:hover {
  background: var(--ton-700);
  color: var(--ton-200);
  cursor: not-allowed;
}
.hinweis :focus-visible { outline-color: var(--primaerton-500); }

/* ---------------------------------------------------------- Vorschlagskarte */

/* Ein Vorschlag des Assistenten am Ort der Arbeit (ui.vorschlagKarte).
   Titel, Text, Begruendung, Aktionsknoepfe. Die erste Begruendung steht
   immer sichtbar da; nur weitere Gruende klappen auf. Das Aufklappen ist
   ein natives details-Element und braucht kein Skript.
   Der Ton steht als Zeichen vor dem Inhalt, nicht als farbiger Seitenrand
   (Zeichen gegen die Karte, Grenze 3:1, hell/dunkel limou | VHV:
   warnung 7.30/8.55 | 6.30/5.97, gefahr 7.72/8.58 | 8.63/6.05,
   info 7.83/8.90 | 10.15/6.53, gut 6.52/9.25 | 6.84/7.54). */
.vorschlag {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--raum-3);
  padding: var(--raum-4);
  background: var(--flaeche-karte);
  border: 1px solid var(--linie);
  border-radius: var(--rund-3);
}
/* Waehrend ein Vorschlag angewendet wird: gestrichelter Rahmen und
   Wartezeiger statt opacity. Mit 0.75 fiel die Begruendung auf 3.93:1
   (limou hell) und 3.36:1 (VHV hell); ohne Deckungsgrad bleiben die
   Schriftpaare der Karte unveraendert. */
.vorschlag[aria-busy="true"] { border-style: dashed; cursor: progress; }

.vorschlag-zeichen {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--schrift-leise);
}
.vorschlag-gut .vorschlag-zeichen { color: var(--gut-schrift); }
.vorschlag-info .vorschlag-zeichen { color: var(--info-schrift); }
.vorschlag-warnung .vorschlag-zeichen { color: var(--warn-schrift); }
.vorschlag-gefahr .vorschlag-zeichen { color: var(--gefahr-schrift); }

.vorschlag-inhalt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
}

.vorschlag-kopf {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  flex-wrap: wrap;
}

/* Titel auf der Karte, hell / dunkel: limou 16.26 / 13.84,
   VHV 8.14 / 11.23. */
.vorschlag-titel {
  font-size: var(--grad-3);
  font-weight: var(--gewicht-abschnitt);
  line-height: var(--zeile-eng);
  color: var(--schrift-stark);
}

/* Text auf der Karte, hell / dunkel: limou 10.78 / 10.67,
   VHV 5.76 / 8.61. */
.vorschlag-text {
  margin: 0;
  font-size: var(--grad-2);
  color: var(--schrift-normal);
}

.vorschlag-aktion-text {
  margin: 0;
  font-size: var(--grad-2);
  color: var(--schrift-stark);
  font-weight: var(--fett-mittel);
}

/* Begruendung: --schrift-leise, hell / dunkel. Auf der Karte limou
   7.29 / 7.42, VHV 5.76 / 5.05; auf der vertieften Flaeche limou
   6.89 / 7.89, VHV 5.56 / 5.82. */
.vorschlag-grund,
.vorschlag-begruendung {
  margin: 0;
  font-size: var(--grad-1);
  color: var(--schrift-leise);
}
.vorschlag-grund-marke {
  font-weight: var(--fett-halb);
  margin-right: var(--raum-1);
}
.vorschlag-begruendung > summary {
  cursor: pointer;
  border-radius: var(--rund-2);
}
.vorschlag-grund-mehr {
  margin-left: var(--raum-1);
  color: var(--schrift-akzent);
  font-weight: var(--fett-mittel);
  white-space: nowrap;
}
.vorschlag-begruendung[open] .vorschlag-grund-mehr { display: none; }
.vorschlag-gruende {
  margin-top: var(--raum-2);
  padding: var(--raum-2) var(--raum-3);
  background: var(--flaeche-vertieft);
  border: 1px solid var(--linie-leise);
  border-radius: var(--rund-2);
  display: flex;
  flex-direction: column;
  gap: var(--raum-1);
}
.vorschlag-gruende li { padding-left: var(--raum-3); position: relative; }
.vorschlag-gruende li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

.vorschlag-aktionen {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  flex-wrap: wrap;
  margin-top: var(--raum-1);
}

/* --------------------------------------------------------------- Meldungen */

.meldung {
  display: flex;
  align-items: flex-start;
  gap: var(--raum-3);
  padding: var(--raum-3) var(--raum-4);
  border: 1px solid var(--neutral-linie);
  border-radius: var(--rund-2);
  background: var(--neutral-flaeche);
  color: var(--neutral-schrift);
  font-size: var(--grad-2);
}
.meldung svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.meldung-inhalt { min-width: 0; flex: 1; }
.meldung-titel { font-weight: var(--fett-halb); }
.meldung-gut { background: var(--gut-flaeche); border-color: var(--gut-linie); color: var(--gut-schrift); }
.meldung-info { background: var(--info-flaeche); border-color: var(--info-linie); color: var(--info-schrift); }
.meldung-warnung { background: var(--warn-flaeche); border-color: var(--warn-linie); color: var(--warn-schrift); }
.meldung-gefahr { background: var(--gefahr-flaeche); border-color: var(--gefahr-linie); color: var(--gefahr-schrift); }

/* Leiste "Neue Fassung verfuegbar" (layout.css, src/app.js). Der Knopf steht
   rechts auf Hoehe des Textes; bei schmalem Fenster rutscht er unter den
   Text statt ihn zusammenzudruecken.
   Gemessen 15.09.2026 im Browser, gegen die naechste deckende Flaeche,
   limou hell / limou dunkel / VHV hell / VHV dunkel:
   Titel, Text und Zeichen auf .meldung-info 6.40 / 8.08 / 8.62 / 7.83;
   "Neu laden" auf dem Hauptknopf 7.83 / 8.73 / 5.49 / 5.49.
   Rand des Knopfs in --akzent-linie gegen die Meldungsflaeche: das volle
   Orange kam in VHV hell nur auf 2.66:1, --akzent-linie (#d44d00) haelt dort
   3.67:1; in den anderen drei ist --akzent-linie dieselbe Farbe wie die
   Knopfflaeche, 6.40 / 8.08 / 4.66. */
.fassung-leiste .meldung { align-items: center; flex-wrap: wrap; }
.fassung-leiste .meldung-inhalt { flex: 1 1 260px; }
.fassung-leiste .knopf-haupt { border-color: var(--akzent-linie); }

/* Nummerierte Schritte einer Anleitung (Einstellungen, "Als App
   installieren"). base.css nimmt Listen die Zaehlung; hier kommt sie zurueck.
   Schrift wie der umgebende Text, keine eigene Farbe. */
.anleitung-schritte {
  list-style: decimal;
  padding-left: var(--raum-5);
  display: flex;
  flex-direction: column;
  gap: var(--raum-1);
}

/* ------------------------------------------------------------ Beschreibung */

.beschreibungsliste {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
  gap: var(--raum-2) var(--raum-4);
  font-size: var(--grad-2);
}
.beschreibungsliste dt { color: var(--schrift-leise); }
.beschreibungsliste dd { margin: 0; color: var(--schrift-stark); }

.datenpaare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--raum-4);
}
.datenpaar { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.datenpaar-marke {
  font-size: var(--grad-1);
  color: var(--schrift-leise);
  font-weight: var(--fett-halb);
}
.datenpaar-wert {
  font-size: var(--grad-3);
  color: var(--schrift-stark);
  font-weight: var(--fett-mittel);
}

/* ----------------------------------------------------------------- Reiter */

.reiter {
  display: flex;
  align-items: center;
  gap: var(--raum-1);
  border-bottom: 1px solid var(--linie);
  margin-bottom: var(--raum-5);
  overflow-x: auto;
}

.reiter-knopf {
  padding: var(--raum-3) var(--raum-4);
  font-size: var(--grad-2);
  font-weight: var(--fett-mittel);
  color: var(--schrift-leise);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.reiter-knopf:hover { color: var(--schrift-normal); }
.reiter-knopf[aria-selected="true"] {
  color: var(--schrift-stark);
  border-bottom-color: var(--akzentton-500);
}

/* ------------------------------------------------------------- Zeitstrahl */

.zeitstrahl { display: flex; flex-direction: column; }

.zeitstrahl-eintrag {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--raum-3);
  padding-bottom: var(--raum-4);
  position: relative;
}
.zeitstrahl-eintrag:last-child { padding-bottom: 0; }

.zeitstrahl-marke {
  width: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--raum-1);
}

.zeitstrahl-punkt {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2px solid var(--ton-400);
  background: var(--flaeche-karte);
  margin-top: 5px;
  flex: none;
}
.zeitstrahl-punkt-gut { border-color: var(--gut-schrift); background: var(--gut-schrift); }
.zeitstrahl-punkt-info { border-color: var(--info-schrift); background: var(--info-schrift); }
.zeitstrahl-punkt-warnung { border-color: var(--warn-schrift); background: var(--warn-schrift); }
.zeitstrahl-punkt-gefahr { border-color: var(--gefahr-schrift); background: var(--gefahr-schrift); }
/* Der fuenfte Ton. schema.ton() liefert fuer Status ohne eigenen Ton
   'neutral' zurueck - eine Fahrt mit Status "Angefragt" zum Beispiel. Ohne
   diese Regel landete `zeitstrahl-punkt-neutral` ohne Entsprechung im
   Dokument, und zwei Ansichten filterten den Wert vorsorglich heraus. Ein
   ungefuellter Punkt in der Linienfarbe ist die richtige Darstellung fuer
   "noch nichts entschieden". */
.zeitstrahl-punkt-neutral { border-color: var(--neutral-schrift); background: var(--flaeche-karte); }

.zeitstrahl-linie {
  flex: 1;
  width: 1px;
  background: var(--linie);
  min-height: 12px;
}
.zeitstrahl-eintrag:last-child .zeitstrahl-linie { display: none; }

.zeitstrahl-inhalt { min-width: 0; padding-bottom: var(--raum-1); }
.zeitstrahl-zeit {
  font-size: var(--grad-1);
  color: var(--schrift-leise);
  font-variant-numeric: tabular-nums;
}
.zeitstrahl-titel {
  font-size: var(--grad-2);
  font-weight: var(--fett-mittel);
  color: var(--schrift-stark);
}
.zeitstrahl-text { font-size: var(--grad-2); color: var(--schrift-leise); }

/* --------------------------------------------------------- Einsatzstreifen */

.einsatz {
  display: flex;
  align-items: stretch;
  gap: var(--raum-3);
  padding: var(--raum-3) var(--raum-4);
  border: 1px solid var(--linie);
  border-radius: var(--rund-2);
  background: var(--flaeche-karte);
}

/* Status wird ueber einen Punkt vor der Uhrzeit gezeigt, nicht ueber einen
   farbigen Seitenrand. Der Punkt traegt zusaetzlich ein title-Attribut. */
.einsatz-status-punkt {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: none;
  margin-top: 6px;
  background: var(--ton-400);
}
.einsatz-geplant .einsatz-status-punkt { background: var(--ton-400); }
.einsatz-disponiert .einsatz-status-punkt { background: var(--info-schrift); }
.einsatz-unterwegs .einsatz-status-punkt { background: var(--akzentton-500); }
.einsatz-abgeschlossen .einsatz-status-punkt { background: var(--gut-schrift); }
.einsatz-storniert .einsatz-status-punkt { background: var(--gefahr-schrift); }
/* Storniert ist Inhalt, kein deaktiviertes Element: nicht ueber opacity
   daempfen (mit 0.6 fiel die Zusatzzeile auf 2.52 bis 3.55:1). Gedaempft
   wird ueber die leise Schrift, den gestrichelten Rahmen und die
   durchgestrichene Strecke. schrift-leise auf der Karte, gerechnet
   15.09.2026: limou hell 7.29 / dunkel 7.42, VHV hell 5.76 / dunkel 6.53. */
.einsatz-storniert { border-style: dashed; }
.einsatz-storniert .einsatz-zeit,
.einsatz-storniert .einsatz-strecke { color: var(--schrift-leise); }
.einsatz-storniert .einsatz-strecke { text-decoration: line-through; }
.einsatz-unterwegs { background: var(--flaeche-vertieft); }

.einsatz-zeit {
  flex: none;
  width: 52px;
  font-variant-numeric: tabular-nums;
  font-size: var(--grad-2);
  font-weight: var(--fett-halb);
  color: var(--schrift-stark);
}
.einsatz-zeit span {
  display: block;
  font-size: var(--grad-0);
  font-weight: var(--fett-normal);
  color: var(--schrift-leise);
}

.einsatz-koerper { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.einsatz-strecke {
  font-size: var(--grad-2);
  font-weight: var(--fett-mittel);
  color: var(--schrift-stark);
}
.einsatz-unter {
  font-size: var(--grad-1);
  color: var(--schrift-leise);
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  flex-wrap: wrap;
}
.einsatz-rechts {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--raum-2);
}

/* Der Pfeil traegt Bedeutung (von -> nach) und muss lesbar bleiben.
   ton-400 kam auf 2.83:1. */
.strecke-pfeil { color: var(--schrift-leise); margin: 0 var(--raum-1); }

/* Einsaetze in der Fahrerkarte der Disposition (seit 21.09.2026): Zeilen
   mit Trennlinie statt Karten in der Karte. Jede Zeile ist weiter ein
   .einsatz mit Punkt, Zeit, Strecke und Status; nur Rahmen und Rundung
   fallen weg. Hover und Fokus zeigen, dass die Zeile anklickbar ist.
   Linie --linie-leise gliedert nur. */
.dispo-einsaetze > * { padding: var(--raum-2) var(--raum-5); }
.dispo-einsaetze > * + * { border-top: 1px solid var(--linie-leise); }
.dispo-einsaetze .einsatz {
  border: none;
  border-radius: 0;
  padding: var(--raum-2) 0;
  background: transparent;
}
.dispo-einsaetze .einsatz[role="button"]:hover { background: var(--flaeche-vertieft); }
.dispo-einsaetze .einsatz-storniert { border: none; }
.dispo-einsaetze .einsatz-unterwegs { background: transparent; }
.dispo-einsaetze .einsatz-unterwegs .einsatz-zeit { color: var(--schrift-akzent); }

/* Abschnitte innerhalb einer Karte (Fahrt: Wer, Strecke, Verrechnung,
   Hinweise). Getrennt durch eine Linie, Titel klein und stark.
   schrift-leise auf der Karte: limou hell 7.29, dunkel 7.42. */
.karte-abschnitte > .karte-abschnitt + .karte-abschnitt {
  margin-top: var(--raum-5);
  padding-top: var(--raum-5);
  border-top: 1px solid var(--linie-leise);
}
.karte-abschnitt-titel {
  margin-bottom: var(--raum-3);
  font-size: var(--grad-2);
  font-weight: var(--fett-halb);
  color: var(--schrift-leise);
}

/* Fahrzeugakte in zwei Spalten (views/flotte.js zeichneDetail). Die rechte
   Spalte steht im DOM zuerst und wird auf breiten Schirmen nach rechts
   gesetzt; unter 1200px eine Spalte in DOM-Reihenfolge. */
.fahrzeug-akte {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--raum-6);
  align-items: start;
}
@media (min-width: 1201px) {
  .fahrzeug-akte { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); }
  .fahrzeug-akte-haupt { grid-column: 1; grid-row: 1; }
  .fahrzeug-akte-seite { grid-column: 2; grid-row: 1; }
}
/* In der schmalen Spalte stehen Bild und Angaben untereinander, nicht
   nebeneinander - nebeneinander liefen "Erkennungsmerkmal" und der Text
   unter dem Ersatzbild aus der Karte (gemessen 1440px). */
.fahrzeug-akte-seite .raster-breit-schmal,
.fahrzeug-akte-seite .raster-schmal-breit { grid-template-columns: minmax(0, 1fr); }

/* Leerzustand innerhalb einer Karte: kleiner als auf einer leeren Seite.
   Vorher 48px Rand oben und unten plus 40px Zeichen - in der Fahrzeugakte
   standen vier davon untereinander, zusammen rund 800px fast leere Flaeche. */
.karte .leerzustand { padding: var(--raum-6) var(--raum-5); gap: var(--raum-2); }
.karte .leerzustand-zeichen { width: 28px; height: 28px; }
.karte .leerzustand-titel { font-size: var(--grad-3); }

/* Einstellungen: Inhaltsverzeichnis links, das beim Rollen stehen bleibt;
   rechts die Gruppen. Unter 1200px steht das Verzeichnis als Umbruchliste
   oben. Eintraege --schrift-normal, aktiv/hover --schrift-stark auf
   --flaeche-still (limou hell 13.17). */
.einst-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-6); }
.einst-verzeichnis { display: flex; flex-wrap: wrap; gap: var(--raum-1) var(--raum-2); }
.einst-verzeichnis-gruppe {
  flex-basis: 100%;
  margin-top: var(--raum-2);
  font-size: var(--grad-1);
  font-weight: var(--fett-halb);
  color: var(--schrift-leise);
}
.einst-verzeichnis-gruppe:first-child { margin-top: 0; }
.einst-verzeichnis-eintrag {
  min-height: 32px;
  padding: var(--raum-1) var(--raum-3);
  border-radius: var(--rund-2);
  text-align: left;
  font-size: var(--grad-2);
  color: var(--schrift-normal);
}
.einst-verzeichnis-eintrag:hover { background: var(--flaeche-still); color: var(--schrift-stark); }
.einst-gruppe-titel { margin-top: var(--raum-2); }
.einst-inhalt .karte { scroll-margin-top: calc(var(--kopf-hoehe) + var(--raum-4)); }
@media (min-width: 1201px) {
  .einst-raster { grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
  .einst-verzeichnis {
    position: sticky;
    top: calc(var(--kopf-hoehe) + var(--raum-4));
    flex-direction: column;
    flex-wrap: nowrap;
    max-height: calc(100vh - var(--kopf-hoehe) - var(--raum-8));
    overflow-y: auto;
  }
  .einst-verzeichnis-gruppe { flex-basis: auto; margin-top: var(--raum-4); padding: 0 var(--raum-3); }
}

/* Wochenraster der Disposition: sieben gleich breite Tage plus Fahrerspalte.
   Eintraege brechen um statt die Spalte zu verbreitern. Unter 900px darf
   das Raster seitlich rollen - sieben Tage passen dort nicht nebeneinander. */
.dispo-woche .tabelle { table-layout: fixed; min-width: 860px; }
.dispo-woche .tabelle th:first-child,
.dispo-woche .tabelle td:first-child { width: 150px; }
/* Silbentrennung nach Deutsch (html lang=de) statt Umbruch an beliebiger
   Stelle - sonst stand dort "Hauptverwaltu / ng". */
.dispo-woche .tabelle td { vertical-align: top; white-space: normal; hyphens: auto; overflow-wrap: break-word; }
.dispo-woche .tabelle thead th { white-space: normal; }
/* Eintraege in der Zelle (Knoepfe ohne Rahmen, Abzeichen) duerfen umbrechen
   und bleiben links buendig; vorher liefen "16:00 Nebenstelle Nord" und der
   Eintrag der Nachbarzelle ineinander. */
.dispo-woche .tabelle td .knopf {
  height: auto;
  min-height: var(--steuer-hoehe-klein);
  padding: var(--raum-1) var(--raum-2);
  white-space: normal;
  text-align: left;
  justify-content: flex-start;
  width: 100%;
}
.dispo-woche .tabelle td .abzeichen { height: auto; white-space: normal; padding-block: 2px; }

/* ---------------------------------------------------------- Schnellsuche
   views/schnellsuche.js, Entwurf "App / Schnellsuche" in Figma. Der Dialog
   liegt oben in der Mitte, damit die Treffer nach unten Platz haben. Farben
   nur aus Tokens: Treffer im Fokus auf --info-flaeche mit --schrift-stark
   (limou hell 13.29, dunkel ueber --info-flaeche 12.9), Nebentext
   --schrift-leise auf der Karte (7.29 / 7.42). */
.schnellsuche-hintergrund { align-items: flex-start; padding-top: 12vh; }
.schnellsuche {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  max-height: 72vh;
  background: var(--flaeche-karte);
  border: 1px solid var(--linie);
  border-radius: var(--rund-4);
  box-shadow: var(--schatten-3);
  overflow: hidden;
}
.schnellsuche-feld {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  padding: var(--raum-3) var(--raum-5);
  border-bottom: 1px solid var(--linie);
  color: var(--schrift-leise);
}
.schnellsuche-feld svg { width: 18px; height: 18px; flex: none; }
.schnellsuche-eingabe {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  border: none;
  background: transparent;
  font-size: var(--grad-4);
  font-weight: var(--fett-halb);
  color: var(--schrift-stark);
}
.schnellsuche-eingabe::placeholder { color: var(--schrift-leise); font-weight: var(--fett-normal); opacity: 1; }
.schnellsuche-eingabe:focus-visible { outline: none; }
.schnellsuche-feld:focus-within { box-shadow: inset 0 -2px 0 var(--fokus); }
.schnellsuche-eingabe::-webkit-search-cancel-button { display: none; }
.schnellsuche-liste { overflow-y: auto; padding: var(--raum-2); }
.schnellsuche-gruppe {
  padding: var(--raum-3) var(--raum-3) var(--raum-1);
  font-size: var(--grad-1);
  font-weight: var(--fett-halb);
  color: var(--schrift-leise);
}
.schnellsuche-treffer {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--raum-1) var(--raum-3);
  padding: var(--raum-2) var(--raum-3);
  border-radius: var(--rund-2);
  cursor: pointer;
}
.schnellsuche-treffer .kennzeichen { align-self: center; }
.schnellsuche-treffer[aria-selected="true"] { background: var(--info-flaeche); }
.schnellsuche-haupt { font-size: var(--grad-3); font-weight: var(--fett-halb); color: var(--schrift-stark); }
.schnellsuche-neben { font-size: var(--grad-1); color: var(--schrift-leise); }
.schnellsuche-leer { padding: var(--raum-5) var(--raum-3); color: var(--schrift-leise); }
.schnellsuche-fuss {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2) var(--raum-5);
  padding: var(--raum-3) var(--raum-5);
  border-top: 1px solid var(--linie);
  background: var(--flaeche-vertieft);
  font-size: var(--grad-1);
  color: var(--schrift-leise);
}
@media (max-width: 640px) {
  .schnellsuche-hintergrund { padding: var(--raum-3); }
  .schnellsuche { max-height: 86vh; }
  .schnellsuche-fuss span:not(.schub) { display: none; }
}

/* Schrittfolge des Status (views/fahrten.js schrittfolge). Erledigt: gefuellter
   Punkt in --gut-schrift und Verbindungslinie in derselben Farbe; jetzt:
   Punkt in --akzent mit Ring, Text stark; offen: leerer Ring, Text leise.
   Punkte und Linien sind Zeichen mit Bedeutung: --gut-schrift gegen die Karte
   limou hell 6.52, dunkel 9.25; --linie-stark (offen) traegt keine Aussage
   allein, der Zustand steht zusaetzlich im Text fuer Vorleser. */
.schrittfolge {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--raum-3) var(--raum-5);
  padding: var(--raum-3) var(--raum-5);
  background: var(--flaeche-karte);
  border: 1px solid var(--linie);
  border-radius: var(--rund-3);
}
.schrittfolge-liste { display: flex; align-items: center; flex-wrap: wrap; gap: var(--raum-1) 0; flex: 1; min-width: 0; }
.schritt { display: flex; align-items: center; }
.schritt + .schritt::before {
  content: "";
  width: 36px;
  height: 2px;
  margin: 0 var(--raum-2);
  background: var(--linie);
  flex: none;
}
.schritt-erledigt + .schritt::before { background: var(--gut-schrift); }
.schritt-knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  min-height: var(--steuer-hoehe-klein);
  padding: 0 var(--raum-2);
  border-radius: var(--rund-2);
  font-size: var(--grad-2);
  color: var(--schrift-leise);
}
button.schritt-knopf:hover { background: var(--flaeche-vertieft); color: var(--schrift-stark); }
.schritt-punkt {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--linie-stark);
  flex: none;
}
.schritt-erledigt .schritt-knopf { color: var(--schrift-normal); }
.schritt-erledigt .schritt-punkt { background: var(--gut-schrift); border-color: var(--gut-schrift); }
.schritt-jetzt .schritt-knopf { color: var(--schrift-stark); font-weight: var(--fett-halb); }
.schritt-jetzt .schritt-punkt {
  background: var(--akzent);
  border-color: var(--akzent);
  box-shadow: 0 0 0 3px var(--info-flaeche);
}
.schritt-seit { font-size: var(--grad-1); font-weight: var(--fett-normal); color: var(--schrift-leise); }
/* Beschriftung der Stufe: darf in schmalen Zeilen kuerzen statt ueberzulaufen. */
.schritt-text { min-width: 0; }
.schrittfolge-storno { color: var(--gefahr-schrift); }
@media (max-width: 640px) {
  .schrittfolge-liste { flex-direction: column; align-items: flex-start; }
  .schritt + .schritt::before { display: none; }
}

/* Menue "Weitere" im Seitenkopf (Fahrt): seltene Handlungen. */
.mehr-menue { position: relative; }
.mehr-menue-knopf { list-style: none; cursor: pointer; }
.mehr-menue-knopf::-webkit-details-marker { display: none; }
.mehr-menue-knopf::after {
  content: "";
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}
.mehr-menue[open] > .mehr-menue-knopf { background: var(--flaeche-still); }
.mehr-menue-liste {
  position: absolute;
  right: 0;
  top: calc(100% + var(--raum-1));
  z-index: 30;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  padding: var(--raum-1);
  background: var(--flaeche-erhoben);
  border: 1px solid var(--linie);
  border-radius: var(--rund-3);
  box-shadow: var(--schatten-2);
}
.mehr-menue-liste .knopf { justify-content: flex-start; width: 100%; color: var(--schrift-normal); }
.mehr-menue-liste .mehr-menue-gefahr { color: var(--gefahr-schrift); }
.mehr-menue-liste .mehr-menue-gefahr:hover { background: var(--gefahr-flaeche); color: var(--gefahr-schrift); }
.schrittfolge-storno:hover { color: var(--gefahr-schrift); background: var(--gefahr-flaeche); }

/* -------------------------------------------------------------- Fortschritt */

.balken {
  height: 5px;
  border-radius: var(--rund-voll);
  background: var(--flaeche-still);
  overflow: hidden;
}
.balken-fuellung {
  height: 100%;
  background: var(--akzentton-500);
  border-radius: var(--rund-voll);
}
.balken-fuellung-gut { background: var(--gut-schrift); }
.balken-fuellung-warnung { background: var(--warn-schrift); }
.balken-fuellung-gefahr { background: var(--gefahr-schrift); }

/* -------------------------------------------------------------- Sonstiges */

.trennlinie { height: 1px; background: var(--linie); border: none; margin: var(--raum-4) 0; }

.leise { color: var(--schrift-leise); }
.stark { color: var(--schrift-stark); }
.klein { font-size: var(--grad-1); }
.mono { font-family: var(--schriftfamilie-fest); }
.rechts { text-align: right; }
.mitte { text-align: center; }
.umbruch { white-space: normal; }
.kein-umbruch { white-space: nowrap; }

.person {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  min-width: 0;
}
.person-zeichen {
  width: 26px; height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--flaeche-still);
  color: var(--schrift-normal);
  display: grid;
  place-items: center;
  font-size: var(--grad-0);
  font-weight: var(--fett-halb);
  letter-spacing: 0.02em;
}
.person-name {
  font-size: var(--grad-2);
  color: var(--schrift-stark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.liste-teiler > * + * {
  border-top: 1px solid var(--linie-leise);
}

/* Zeile der Fahrtenliste (Figma-Baustein "Zeile", 24.09.2026): Zeit in Mono,
   Titel und Meta, Status, Pfeil. Am Handy die Vorgabe statt der gestapelten
   Tabelle. Kein Unterstrich, die ganze Zeile ist der Verweis. */
.fahrt-zeilen { display: block; }

.fahrt-zeile {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: var(--raum-3);
  padding: var(--raum-3) var(--raum-4);
  color: inherit;
  text-decoration: none;
  min-height: 56px;
}

.fahrt-zeile:hover,
.fahrt-zeile:focus-visible {
  background: var(--flaeche-vertieft);
}

.fahrt-zeile-zeit {
  display: flex;
  flex-direction: column;
  font-family: var(--schriftfamilie-fest);
  font-size: var(--grad-2);
  line-height: var(--zeile-eng);
}

.fahrt-zeile-datum {
  font-size: var(--grad-0);
  color: var(--schrift-leise);
}

.fahrt-zeile-uhr {
  font-weight: var(--fett-halb);
  color: var(--schrift-stark);
}

/* Ende der Belegung unter der Abfahrt (28.09.2026). */
.fahrt-zeile-bis {
  font-size: var(--grad-0);
  color: var(--schrift-leise);
  white-space: nowrap;
}

.fahrt-zeile-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.fahrt-zeile-titel {
  font-weight: var(--fett-halb);
  color: var(--schrift-stark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fahrt-zeile-meta {
  font-size: var(--grad-1);
  color: var(--schrift-leise);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fahrt-zeile-status { display: inline-flex; }

.fahrt-zeile-pfeil {
  width: 20px;
  height: 20px;
  color: var(--schrift-leise);
}

@media (max-width: 639.98px) {
  .fahrt-zeile {
    grid-template-columns: 56px minmax(0, 1fr) 20px;
    grid-template-areas: 'zeit text pfeil' 'zeit status pfeil';
    row-gap: var(--raum-1);
  }
  .fahrt-zeile-zeit { grid-area: zeit; }
  .fahrt-zeile-text { grid-area: text; }
  .fahrt-zeile-status { grid-area: status; }
  .fahrt-zeile-pfeil { grid-area: pfeil; }
  .fahrt-zeile-meta { white-space: normal; }
}

.warnzeile {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  padding: var(--raum-3) var(--raum-4);
}
.warnzeile-zeichen { width: 16px; height: 16px; flex: none; }
.warnzeile-inhalt { flex: 1; min-width: 0; }
.warnzeile-titel {
  font-size: var(--grad-2);
  font-weight: var(--fett-mittel);
  color: var(--schrift-stark);
}
.warnzeile-text { font-size: var(--grad-1); color: var(--schrift-leise); }
.warnzeile-gefahr .warnzeile-zeichen { color: var(--gefahr-schrift); }
.warnzeile-warnung .warnzeile-zeichen { color: var(--warn-schrift); }
.warnzeile-info .warnzeile-zeichen { color: var(--info-schrift); }

@media (max-width: 700px) {
  .formular-raster,
  .formular-raster-3 { grid-template-columns: minmax(0, 1fr); }
  .modal-koerper { max-height: calc(100vh - 200px); }
}

/* ======================================================================
   Fahrzeugbilder, Positionslisten und Ansichtswahl
   ====================================================================== */

/* ------------------------------------------------------- Ansichtswahl */

.formwahl {
  display: inline-flex;
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund-2);
  overflow: hidden;
  background: var(--flaeche-karte);
}

.formwahl-knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  height: 32px;
  padding: 0 var(--raum-3);
  border-right: 1px solid var(--linie);
  color: var(--schrift-leise);
  font-size: var(--grad-2);
  font-weight: var(--fett-mittel);
  white-space: nowrap;
}
.formwahl-knopf:last-child { border-right: none; }
.formwahl-knopf:hover { background: var(--flaeche-vertieft); color: var(--schrift-normal); }
.formwahl-knopf[aria-pressed="true"] {
  background: var(--flaeche-still);
  color: var(--schrift-stark);
  font-weight: var(--fett-halb);
}
.formwahl-knopf svg { width: 15px; height: 15px; flex: none; }

/* -------------------------------------------------- Fahrzeug als Kachel */

.fahrzeugkarte {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linie);
  border-radius: var(--rund-3);
  background: var(--flaeche-karte);
  overflow: hidden;
  color: inherit;
}
.fahrzeugkarte:hover { border-color: var(--linie-stark); text-decoration: none; }

/* Fester Bildausschnitt: sonst springt das Raster, weil Fotos
   unterschiedliche Seitenverhaeltnisse haben. */
.fahrzeugbild {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--flaeche-vertieft);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.fahrzeugbild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Ersatzdarstellung, wenn kein Foto hinterlegt ist. Sie zeigt die Bauform
   der Klasse, nicht das Fahrzeug - deshalb immer mit Vermerk darunter. */
.fahrzeugbild-ersatz {
  width: 62%;
  max-width: 220px;
  /* Grafik mit Bedeutung (Bauform), Grenze 3:1. ton-400 kam auf 2.70:1
     (limou hell) und 2.32:1 (VHV hell). */
  color: var(--schrift-leise);
}

.fahrzeugbild-vermerk {
  position: absolute;
  left: var(--raum-2);
  bottom: var(--raum-2);
  padding: 2px var(--raum-2);
  border-radius: var(--rund-1);
  background: var(--flaeche-karte);
  border: 1px solid var(--linie);
  color: var(--schrift-leise);
  font-size: var(--grad-0);
}

.fahrzeugbild-marke {
  position: absolute;
  right: var(--raum-2);
  top: var(--raum-2);
}

.fahrzeugkarte-koerper {
  padding: var(--raum-4);
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
  flex: 1;
}

.fahrzeugkarte-kopf {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  flex-wrap: wrap;
}

.fahrzeugkarte-name {
  font-size: var(--grad-4);
  font-weight: var(--fett-halb);
  color: var(--schrift-stark);
}

.fahrzeugkarte-zeilen {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--grad-2);
  color: var(--schrift-leise);
}

/* --------------------------------------------------- Rundum-Betrachter */

.rundum {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--flaeche-vertieft);
  border: 1px solid var(--linie);
  border-radius: var(--rund-3);
  overflow: hidden;
  display: grid;
  place-items: center;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.rundum:active { cursor: grabbing; }

.rundum img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.rundum-leer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--raum-3);
  padding: var(--raum-6);
  text-align: center;
  color: var(--schrift-leise);
  font-size: var(--grad-2);
}
/* Zeichen, Grenze 3:1. ton-300 kam auf 1.87:1 (limou hell), 1.80:1 (VHV hell). */
.rundum-leer svg { width: 92px; height: 92px; color: var(--schrift-leise); }

/* Der Hinweis zum Ziehen steht im Ruhezustand da und verschwindet beim
   ersten Ziehen - nicht umgekehrt. */
.rundum-hinweis {
  position: absolute;
  left: 50%;
  bottom: var(--raum-3);
  transform: translateX(-50%);
  padding: var(--raum-1) var(--raum-3);
  border-radius: var(--rund-2); /* keine Pille, DESIGN.md 8 */
  background: var(--flaeche-karte);
  border: 1px solid var(--linie);
  color: var(--schrift-leise);
  font-size: var(--grad-1);
  white-space: nowrap;
}

.rundum-marke {
  position: absolute;
  left: var(--raum-3);
  top: var(--raum-3);
}

.rundum-zaehler {
  position: absolute;
  right: var(--raum-3);
  top: var(--raum-3);
  padding: 2px var(--raum-2);
  border-radius: var(--rund-1);
  background: var(--flaeche-karte);
  border: 1px solid var(--linie);
  color: var(--schrift-leise);
  font-size: var(--grad-0);
  font-variant-numeric: tabular-nums;
}

/* Streifen mit allen Ansichten unter dem Betrachter. */
.bildstreifen {
  display: flex;
  gap: var(--raum-2);
  overflow-x: auto;
  padding: var(--raum-2) 0;
}

.bildstreifen-eintrag {
  flex: none;
  width: 92px;
  border: 2px solid transparent;
  border-radius: var(--rund-2);
  overflow: hidden;
  background: var(--flaeche-vertieft);
  padding: 0;
  line-height: 0;
}
.bildstreifen-eintrag[aria-pressed="true"] { border-color: var(--akzent); }
.bildstreifen-eintrag img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.bildstreifen-marke {
  display: block;
  padding: 3px var(--raum-1);
  font-size: var(--grad-0);
  line-height: 1.3;
  color: var(--schrift-leise);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------ Positionsliste */

.positionsliste {
  display: flex;
  flex-direction: column;
}

.position {
  display: flex;
  align-items: flex-start;
  gap: var(--raum-3);
  padding: var(--raum-3) var(--raum-4);
  border-bottom: 1px solid var(--linie-leise);
}
.position:last-child { border-bottom: none; }

.position-kasten {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--akzent);
}

.position-koerper { flex: 1; min-width: 0; }

.position-text {
  font-size: var(--grad-3);
  color: var(--schrift-stark);
}
.position-erledigt .position-text {
  text-decoration: line-through;
  color: var(--schrift-leise);
}

.position-menge {
  font-variant-numeric: tabular-nums;
  font-weight: var(--fett-halb);
  color: var(--schrift-stark);
  margin-right: var(--raum-2);
}

.position-unter {
  font-size: var(--grad-1);
  color: var(--schrift-leise);
  margin-top: 2px;
}

/* Eine Abweichung ist der Fall, den eine blosse Haken-Liste verschweigt:
   besorgt, aber anders. Sie steht deshalb hervorgehoben. */
.position-abweichung {
  margin-top: var(--raum-2);
  padding: var(--raum-2) var(--raum-3);
  background: var(--warn-flaeche);
  border: 1px solid var(--warn-linie);
  color: var(--warn-schrift);
  font-size: var(--grad-1);
  border-radius: var(--rund-1);
}

.position-aktionen {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--raum-1);
}

/* Fortschritt der Liste im Kartenkopf. */
.listenstand {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  font-size: var(--grad-2);
  color: var(--schrift-leise);
}

.listenstand-balken {
  width: 120px;
  height: 6px;
  border-radius: var(--rund-voll);
  background: var(--flaeche-still);
  overflow: hidden;
  flex: none;
}

.listenstand-fuellung {
  height: 100%;
  background: var(--gut-schrift);
  border-radius: var(--rund-voll);
}

/* Zeile zum schnellen Anlegen einer Position. */
.position-neu {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  padding: var(--raum-3) var(--raum-4);
  border-top: 1px solid var(--linie);
  background: var(--flaeche-vertieft);
  flex-wrap: wrap;
}
.position-neu .eingabe { flex: 1 1 200px; min-width: 0; }
.position-neu .eingabe-menge { flex: 0 0 88px; }
.position-neu .auswahl { flex: 0 0 140px; }

/* ------------------------------------------------------- Wiederfinden */

/* Die Angaben, die einem Externen helfen, den Wagen auf dem Hof zu finden.
   Bewusst groesser gesetzt als die uebrigen Stammdaten. */
.wiederfinden {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--raum-4);
  padding: var(--raum-4);
  border: 1px solid var(--info-linie);
  border-radius: var(--rund-3);
  background: var(--info-flaeche);
}

.wiederfinden-feld { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.wiederfinden-marke {
  font-size: var(--grad-1);
  color: var(--info-schrift);
  font-weight: var(--fett-halb);
}

.wiederfinden-wert {
  font-size: var(--grad-4);
  font-weight: var(--fett-mittel);
  color: var(--info-schrift);
}

@media (max-width: 700px) {
  .rundum { aspect-ratio: 4 / 3; }
  .listenstand-balken { width: 80px; }
}

/* ============================================ Betrieb mit Anmeldung (v3 6.6)
 * Drei Bausteine, die es nur dort gibt, wo ein Server antwortet:
 * die Gegenueberstellung bei einem Versionskonflikt (4.8), der Hinweis auf
 * verdichtete Zeitraeume (4.10) und die Liste "Konto und Abgleich".
 *
 * Nur Token aus tokens.css, kein eigener Farbwert. KONTRASTE, gerechnet
 * gegen die naechste DECKENDE Flaeche (Reihenfolge je Zeile: limou hell /
 * limou dunkel / VHV hell / VHV dunkel; Zahlen aus tokens.css):
 *   .konflikt-satz    --schrift-stark auf --flaeche-karte   16.26 / 13.84 / 8.14 / 11.23
 *   Stand auf dem Server: --neutral-schrift auf --neutral-flaeche  5.91 / 6.99 / 4.95 / 5.45
 *   Ihre Eingabe:         --info-schrift auf --info-flaeche        6.40 / 8.08 / 8.62 / 7.83
 *   .konto-marke      --schrift-leise auf --flaeche-karte     7.29 /  7.42 / 5.76 /  6.53
 *   .konto-wert       --schrift-stark auf --flaeche-karte    wie .konflikt-satz
 * Raender sind reine Trennung, keine Bedeutung: die Herkunft eines Wertes
 * steht als Wort darueber, nicht als Farbe.
 * Signalgelb kommt hier nicht vor - es steht allein fuer Ueberschneidungen. */

.konflikt-satz {
  margin: 0;
  color: var(--schrift-stark);
  font-weight: var(--fett-halb);
}

.konflikt-liste {
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
}

.konflikt-zeile {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr) minmax(0, 2fr);
  gap: var(--raum-2) var(--raum-3);
  align-items: start;
  padding: var(--raum-3);
  border: 1px solid var(--linie);
  border-radius: var(--rund-3);
}

.konflikt-feld {
  color: var(--schrift-stark);
  font-weight: var(--fett-halb);
  min-width: 0;
  overflow-wrap: anywhere;
}

.konflikt-wert {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--raum-2) var(--raum-3);
  border-radius: var(--rund-2);
  overflow-wrap: anywhere;
}

.konflikt-wert-server {
  background: var(--neutral-flaeche);
  border: 1px solid var(--neutral-linie);
  color: var(--neutral-schrift);
}

.konflikt-wert-meins {
  background: var(--info-flaeche);
  border: 1px solid var(--info-linie);
  color: var(--info-schrift);
}

/* Die Marke benennt die Herkunft in Worten - wer die Farben nicht
   unterscheidet, liest sie trotzdem. */
.konflikt-marke {
  font-size: var(--grad-1);
  font-weight: var(--fett-halb);
}

.konflikt-text {
  font-size: var(--grad-3);
  font-weight: var(--fett-mittel);
}

/* Ein geaendertes Feld bekommt einen kraeftigeren Rand, damit sich beim
   Ueberfliegen erkennen laesst, wo die Abweichung herkommt. */
.konflikt-wert[data-geaendert='ja'] {
  border-width: 2px;
}

/* Platzhalter fuer den Hinweis auf verdichtete Zeitraeume. Er ist leer,
   solange nichts nachzuladen ist - dann nimmt er auch keinen Platz. */
.archiv-hinweis:empty {
  display: none;
}

/* --- Konto und Abgleich (Einstellungen, nur mit Anmeldung) --- */

.konto-liste {
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
}

.konto-zeile {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(0, 3fr);
  gap: var(--raum-1) var(--raum-4);
  align-items: baseline;
  padding-bottom: var(--raum-2);
  border-bottom: 1px solid var(--linie-leise);
}

.konto-zeile:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.konto-marke {
  color: var(--schrift-leise);
  font-size: var(--grad-2);
}

.konto-wert {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  color: var(--schrift-stark);
  font-weight: var(--fett-mittel);
  overflow-wrap: anywhere;
}

@media (max-width: 700px) {
  .konflikt-zeile,
  .konto-zeile {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------- Fahrtformular: schnell erfassen
   (16.09.2026) Schnellwahl, Aufklapper, Adressvorschlaege, Kartenverweise,
   Positionslisten und Zusatzauftraege. Farben nur aus Tokens und nur in
   Paarungen, die schon an anderer Stelle gemessen sind: gedrueckter Knopf
   wie .knopf-gruppe (schrift-stark auf flaeche-still), Nebentext wie
   .eingabe-nachsatz (schrift-leise auf flaeche-vertieft), Verweise wie
   .knopf-pfeil (schrift-akzent auf flaeche-vertieft). */
.schnellwahl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-2);
}
.schnellwahl .knopf[aria-pressed="true"] {
  background: var(--flaeche-still);
  border-color: var(--schrift-stark);
  color: var(--schrift-stark);
  font-weight: var(--fett-halb);
}

.formular-aufklapper { display: flex; align-items: center; gap: var(--raum-2); }
.listen-status { display: flex; align-items: center; flex-wrap: wrap; gap: var(--raum-2); min-width: 0; }
.listen-status-filter { font-size: var(--grad-1); color: var(--schrift-leise); overflow-wrap: anywhere; }
.listen-status .filter-anzahl { white-space: normal; }
.formular-vorbelegung { padding: var(--raum-3); border: 1px solid var(--linie); border-radius: var(--rund-2); background: var(--flaeche-vertieft); color: var(--schrift-normal); overflow-wrap: anywhere; }
.formular-vorbelegung .knopf { white-space: normal; height: auto; min-height: var(--steuer-hoehe); }
.formular-zusatz { grid-column: 1 / -1; min-width: 0; }
.formular-zusatz > summary { padding: var(--raum-3) 0; color: var(--schrift-akzent); cursor: pointer; font-weight: var(--fett-halb); }
.formular-zusatz[open] > summary { margin-bottom: var(--raum-2); }
.fahrt-zusammenfassung { padding: var(--raum-3); border: 1px solid var(--linie); border-radius: var(--rund-2); background: var(--flaeche-vertieft); color: var(--schrift-normal); overflow-wrap: anywhere; }
.fahrt-zusammenfassung p { margin: 0; }
.fahrt-zusammenfassung p + p { margin-top: var(--raum-1); }
.fahrt-zusammenfassung dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-1); }
.fahrt-zusammenfassung dt { font-weight: var(--fett-halb); }
.fahrt-zusammenfassung dd { margin: 0 0 var(--raum-2); }
/* Lange Beschriftung ("Mehr Angaben: Dringlichkeit, Telefon, ...") bricht um,
   statt am Handy ueber den Rand zu ragen (gemessen 375 px: 483 px breit). */
.formular-aufklapper .knopf { max-width: 100%; white-space: normal; text-align: left; height: auto; }

.adress-feld { position: relative; }
.adress-liste {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 5;
  margin: 0;
  padding: var(--raum-1) 0;
  list-style: none;
  max-height: 264px;
  overflow-y: auto;
  background: var(--flaeche-karte);
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund-2);
  box-shadow: var(--schatten-2);
}
.adress-option {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--raum-2) var(--raum-3);
  cursor: pointer;
}
.adress-option:hover,
.adress-option[aria-selected="true"] { background: var(--flaeche-vertieft); }
.adress-text { font-size: var(--grad-2); color: var(--schrift-stark); }
.adress-nebentext { font-size: var(--grad-1); color: var(--schrift-leise); }

.karten-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-2); }
.karten-mehr { position: relative; }
.karten-mehr > summary { list-style: none; cursor: pointer; }
.karten-mehr > summary::-webkit-details-marker { display: none; }
.karten-mehr-liste {
  position: absolute;
  top: calc(100% + var(--raum-1));
  left: 0;
  z-index: 5;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  padding: var(--raum-1) 0;
  background: var(--flaeche-karte);
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund-2);
  box-shadow: var(--schatten-2);
}
.karten-mehr-eintrag {
  padding: var(--raum-2) var(--raum-3);
  color: var(--schrift-akzent);
  font-size: var(--grad-2);
  font-weight: var(--fett-mittel);
}
.karten-mehr-eintrag:hover { background: var(--flaeche-vertieft); text-decoration: none; }

.positionen-editor { display: flex; flex-direction: column; gap: var(--raum-2); }
.positionen-zeilen { display: flex; flex-direction: column; gap: var(--raum-1); }
.position-eintrag {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  padding: var(--raum-1) var(--raum-1) var(--raum-1) var(--raum-3);
  border: 1px solid var(--linie);
  border-radius: var(--rund-2);
  background: var(--flaeche-karte);
}
.position-eintrag-menge {
  min-width: 3.5em;
  font-size: var(--grad-2);
  font-variant-numeric: tabular-nums;
  color: var(--schrift-normal);
}
.position-eintrag-text { flex: 1; min-width: 0; font-size: var(--grad-2); color: var(--schrift-stark); }
.position-eintrag-erledigt .position-eintrag-text { color: var(--schrift-leise); text-decoration: line-through; }
.positionen-neu {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6em 9em auto;
  gap: var(--raum-2);
  align-items: center;
}
.positionen-menge { text-align: right; }
.positionen-einheit { min-width: 0; }

/* Weitere Fahrgaeste im Fahrtformular (22.09.2026): je Person eine Zeile
   "Fahrgast n", Namensfeld mit Vorschlagsliste, Entfernen. */
.fahrgaeste-bereich { display: flex; flex-direction: column; align-items: flex-start; gap: var(--raum-2); }
.fahrgaeste-bereich:has(.fahrgaeste-zeile) { margin-top: calc(-1 * var(--raum-2)); }
.fahrgaeste-liste {
  align-self: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
}
.fahrgaeste-liste:empty { display: none; }
.fahrgaeste-zeile {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--raum-2);
}
.fahrgaeste-nummer {
  font-weight: var(--fett-halb);
  color: var(--schrift-normal);
  font-variant-numeric: tabular-nums;
}

.zusatz-bereich { display: flex; flex-direction: column; gap: var(--raum-3); }
.zusatz-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--raum-3);
}
.zusatz-eintrag {
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
  padding: var(--raum-3);
  border: 1px solid var(--linie);
  border-radius: var(--rund-3);
  background: var(--flaeche-karte);
}
.zusatz-kopf { display: flex; align-items: center; gap: var(--raum-2); }
.zusatz-nummer {
  font-weight: var(--fett-halb);
  font-variant-numeric: tabular-nums;
  color: var(--schrift-stark);
}
.zusatz-art { width: auto; min-width: 11em; }
.zusatz-felder {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 8em minmax(0, 2fr);
  gap: var(--raum-2);
  align-items: start;
}
.zusatz-abzeichen {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--raum-1);
  margin-left: var(--raum-2);
  vertical-align: middle;
}

@media (max-width: 640px) {
  .positionen-neu { grid-template-columns: minmax(0, 1fr) 5em; }
  .zusatz-felder { grid-template-columns: minmax(0, 1fr); }
}

/* Handy (23.09.2026): Dialoge kommen als Blatt von unten, volle Breite,
   oben gerundet. margin-top: auto statt align-items: flex-end - so bleibt
   ein langer Dialog nach oben rollbar. Der Fuss klebt unten, die Knoepfe
   bleiben beim Rollen durch ein langes Formular erreichbar. Hinweise stehen
   dann oben, unten laegen sie auf den Knoepfen; ohne Dialog ueber der Leiste
   und dem schwebenden Knopf. */
@media (max-width: 639.98px) {
  .modal-hintergrund { padding: var(--raum-6) 0 0; }
  .modal {
    margin: auto 0 0;
    max-width: none;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    border-bottom: 0;
    border-radius: var(--rund-karte) var(--rund-karte) 0 0;
  }
  .modal-koerper { overflow-y: auto; }
  .modal-fuss {
    position: sticky;
    bottom: 0;
    border-radius: 0;
    padding-bottom: calc(var(--raum-4) + env(safe-area-inset-bottom, 0px));
    flex-wrap: wrap;
  }
  /* Drei Knoepfe passen bei 390px nicht in eine Reihe ("Abbrechen" lag
     links ausserhalb): sie brechen um und teilen sich die Breite. */
  .modal-fuss > * { flex: 1 1 auto; }
  .hinweis-bereich { left: var(--raum-4); right: var(--raum-4); }
  .mit-unterleiste .hinweis-bereich,
  body:has(.mit-unterleiste) .hinweis-bereich {
    bottom: calc(var(--unterleiste-hoehe, 58px) + var(--steuer-hoehe-gross) + var(--raum-6) + env(safe-area-inset-bottom, 0px));
  }
  body:has(.modal-hintergrund) .hinweis-bereich,
  body:has(.mit-unterleiste):has(.modal-hintergrund) .hinweis-bereich {
    left: var(--raum-4);
    right: var(--raum-4);
    top: var(--raum-4);
    bottom: auto;
  }
  .hinweis { max-width: none; }
}

/* ------------------------------------------- Formular als Blatt (24.09.2026)
   ui.modal mit blatt: am Schreibtisch kommt der Dialog von rechts, volle
   Hoehe, 600px breit, der Koerper rollt, der Fuss klebt unten (Figma 46:2
   "Neue Fahrt"). Am Handy von unten (Regeln oben). Rueckfragen
   (ui.bestaetigen) bleiben in der Mitte. */
@media (min-width: 640px) {
  .modal-hintergrund-blatt { justify-content: flex-end; align-items: stretch; padding: 0; overflow: hidden; }
  .modal-hintergrund-blatt .modal-blatt {
    max-width: 600px;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    border-width: 0 0 0 1px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--schatten-3);
  }
  .modal-hintergrund-blatt .modal-blatt.modal-breit { max-width: 780px; }
  .modal-blatt .modal-koerper { flex: 1; max-height: none; overflow-y: auto; }
  .modal-blatt .modal-fuss { border-radius: 0; flex: none; }
  /* Hinweise (Rueckgaengig) neben dem Blatt links unten, nicht darunter. */
  body:has(.modal-hintergrund-blatt) .hinweis-bereich { right: auto; left: var(--raum-5); }
}

/* ------------------------------------------------- Bestand (24.09.2026)
   Einstiegskarten in src/views/bestand.js: Zeichen, Titel und Zusatz, rechts
   die Zahl. Eine Karte ist ein Verweis. */
.bestand-liste { max-width: 720px; }
.bestand-karte {
  display: flex;
  align-items: center;
  gap: var(--raum-4);
  padding: var(--raum-4) var(--raum-5);
  color: inherit;
  min-height: 72px;
}
.bestand-karte:hover { text-decoration: none; border-color: var(--linie); background: var(--flaeche-vertieft); }
.bestand-karte-zeichen {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--rund-knopf);
  background: var(--band-flaeche);
  color: var(--band-schrift);
}
.bestand-karte-zeichen svg { width: 22px; height: 22px; }
.bestand-karte-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bestand-karte-titel { font-size: var(--grad-4); font-weight: var(--fett-stark); color: var(--schrift-stark); }
.bestand-karte-unter { font-size: var(--grad-1); color: var(--schrift-leise); }
.bestand-karte-zahl { display: flex; align-items: baseline; gap: var(--raum-1); flex: none; }
.bestand-karte-wert { font-size: var(--grad-6); font-weight: var(--gewicht-titel); color: var(--schrift-stark); letter-spacing: -0.02em; }
.bestand-karte-einheit { font-size: var(--grad-1); color: var(--schrift-leise); }
.bestand-karte-pfeil { width: 18px; height: 18px; flex: none; color: var(--linie-stark); }

/* ------------------------------------------- Filter und Tabellen am Handy
   (24.09.2026). Die Filterleiste zeigt unter 640px nur die Suche und den
   Knopf "Filter"; die uebrigen Filter klappen darunter auf (ui.filterleiste
   setzt .filterleiste-offen). Am Schreibtisch gibt es den Knopf nicht.
   Tabellen werden unter 640px zu Karten: eine Zeile je Datensatz, die Zelle
   nennt ihren Spaltenkopf aus data-marke davor (ui.tabelle). Zellen ohne
   Marke (Aktionen) stehen ohne Beschriftung. */
.filterleiste-schalter { display: none; }
.filterleiste-mehr { display: contents; }
@media (max-width: 639.98px) {
  .filterleiste { padding: var(--raum-2) var(--raum-3); gap: var(--raum-2); }
  .filterleiste-schalter { display: inline-flex; }
  .filterleiste .filter-suche { flex: 1 1 140px; max-width: none; }
  .filterleiste-mehr {
    display: none;
    flex-basis: 100%;
    flex-wrap: wrap;
    gap: var(--raum-2);
    padding-top: var(--raum-2);
    border-top: 1px solid var(--linie-leise);
  }
  .filterleiste-offen .filterleiste-mehr { display: flex; }
  .filterleiste-mehr .eingabe,
  .filterleiste-mehr .auswahl { flex: 1 1 45%; min-width: 0; }

  .tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabelle, .tabelle tbody { display: block; }
  .tabelle tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--raum-1) var(--raum-3);
    padding: var(--raum-3) var(--raum-4);
    border-bottom: 1px solid var(--linie-leise);
  }
  .tabelle tbody tr:last-child { border-bottom: 0; }
  .tabelle tbody td {
    display: flex;
    align-items: baseline;
    gap: var(--raum-2);
    padding: 0;
    border: 0;
    min-width: 0;
  }
  .tabelle tbody td[data-marke]::before {
    content: attr(data-marke);
    flex: none;
    width: 34%;
    max-width: 120px;
    font-size: var(--grad-0);
    font-weight: var(--fett-mittel);
    color: var(--schrift-leise);
  }
  .tabelle tbody td:empty { display: none; }
  .tabelle tbody td.rechts { text-align: left; }
  .tabelle tbody td.eng { white-space: normal; width: auto; }
  .tabelle tbody td.spalte-breit { min-width: 0; }
  .tabelle-huelle { overflow-x: visible; }
}

/* ------------------------------------------------- Strecke (24.09.2026)
   Karte "Strecke" der Fahrt-Detailseite (views/fahrten.js streckeKarte):
   Abholort und Ziel gross mit Kartenverweisen, darunter die Zeiten als
   Kacheln. Der Punkt vor dem Ort: erledigt gruen mit Haken, jetzt in
   --akzent mit Standortzeichen, sonst leise Linie. */
.strecke { display: flex; flex-direction: column; gap: var(--raum-4); }
.strecke-ort { display: flex; gap: var(--raum-3); align-items: flex-start; }
.strecke-ort-punkt {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid var(--linie-stark);
  color: var(--akzent-schrift);
}
.strecke-ort-punkt svg { width: 14px; height: 14px; }
.strecke-ort-jetzt .strecke-ort-punkt { background: var(--akzent); border-color: var(--akzent); }
.strecke-ort-erledigt .strecke-ort-punkt { background: var(--gut-schrift); border-color: var(--gut-schrift); color: var(--flaeche-karte); }
.strecke-ort-text { min-width: 0; display: flex; flex-direction: column; gap: var(--raum-1); }
.strecke-ort-marke { font-size: var(--grad-1); font-weight: var(--fett-mittel); color: var(--schrift-leise); }
.strecke-ort-name { font-size: var(--grad-4); font-weight: var(--fett-stark); color: var(--schrift-stark); overflow-wrap: anywhere; }
.strecke-ort-jetzt .strecke-ort-name { font-size: var(--grad-5); }
.strecke-zeiten { display: flex; flex-wrap: wrap; gap: var(--raum-3); padding-top: var(--raum-3); border-top: 1px solid var(--linie-leise); }
.strecke-zeit { display: flex; flex-direction: column; gap: 1px; min-width: 96px; }
.strecke-zeit-marke { font-size: var(--grad-0); font-weight: var(--fett-mittel); color: var(--schrift-leise); }
.strecke-zeit-wert { font-family: var(--schriftfamilie-fest); font-size: var(--grad-5); font-weight: var(--fett-halb); color: var(--schrift-stark); font-variant-numeric: tabular-nums; }
.strecke-zeit-unter { font-size: var(--grad-0); color: var(--schrift-leise); }

/* ------------------------------------------- Handy als App (24.09.2026)
   Figma "6 Handy-App": Agenda (views/agenda.js) mit Tagesstreifen Mo bis So,
   Wochenkopf mit Pfeilen, leere Tage als leiser Satz; "Mehr" (views/mehr.js)
   mit Konto-Karte. Die Zeilen sind .fahrt-zeile (oben), die Listen von
   Bestand und Mehr sind .bestand-karte. Kontraste: schrift-leise auf
   flaeche-karte 7.29, akzent-schrift auf akzent 7.83. */
.tagstreifen {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--raum-1);
}
.tagstreifen-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 56px;
  padding: var(--raum-2) 0;
  border: 0;
  border-radius: var(--rund-karte);
  background: none;
  color: var(--schrift-leise);
  font: inherit;
  font-size: var(--grad-0);
  font-weight: var(--fett-mittel);
  cursor: pointer;
}
.tagstreifen-tag b { font-size: var(--grad-3); font-weight: var(--fett-stark); color: var(--schrift-stark); }
.tagstreifen-tag i { display: block; width: 4px; height: 4px; border-radius: 50%; background: transparent; }
.tagstreifen-tag[data-belegt="ja"] i { background: var(--akzent); }
.tagstreifen-tag[aria-current="date"] { background: var(--akzent); color: var(--akzent-schrift); }
.tagstreifen-tag[aria-current="date"] b { color: var(--akzent-schrift); }
.tagstreifen-tag[aria-current="date"][data-belegt="ja"] i { background: var(--akzent-schrift); }
.tagstreifen-tag:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }

.agenda-wochenkopf { display: flex; align-items: center; gap: var(--raum-2); }
.agenda-wochenkopf-text { flex: 1; text-align: center; font-weight: var(--fett-halb); color: var(--schrift-stark); font-size: var(--grad-2); }
.agenda-kopf { margin-bottom: 0; }
.agenda-leer {
  padding: var(--raum-3) var(--raum-4);
  border: 1px solid var(--linie-leise);
  border-radius: var(--rund-karte);
  background: var(--flaeche-vertieft);
  color: var(--schrift-leise);
  font-size: var(--grad-1);
}
.dispo-agenda .auswahl { width: 100%; }

.mehr-konto { display: flex; align-items: center; gap: var(--raum-4); padding: var(--raum-4) var(--raum-5); }
.mehr-konto .kuerzel-kreis { width: 44px; height: 44px; font-size: var(--grad-3); }
.mehr-konto .bestand-karte-text { flex: 1; }
.mehr-stand { text-align: center; }

/* Kompakte Fahrerzeile am Handy (24.09.2026): Kuerzel und Name in der ersten
   Zeile, die Abzeichen darunter - in einer Zeile ueberlappten sie bei 390px. */
@media (max-width: 639.98px) {
  .warnzeile { flex-wrap: wrap; gap: var(--raum-1) var(--raum-2); }
  .warnzeile-inhalt { flex: 1 1 100%; min-width: 0; }
}
.agenda,
.kalender-agenda { min-width: 0; }

/* Handy (16.10.2026): mindestens 44 px fuer die bedienbare Flaeche.
   Texte und Farben bleiben an die bestehenden Tokens gebunden. Native
   Eingaben mit 16 px loesen beim Fokussieren keinen iOS-Textzoom aus. */
@media (max-width: 639.98px), (pointer: coarse) {
  .knopf,
  .knopf-klein,
  .knopf-gruppe .knopf,
  .formwahl-knopf,
  .reiter-knopf,
  .hinweis-knopf,
  .adress-option,
  .karten-mehr-eintrag,
  .schalter,
  .wahlfeld {
    min-height: 44px;
  }
  .knopf,
  .knopf-klein,
  .knopf-gruppe .knopf,
  .formwahl-knopf,
  .hinweis-knopf { height: auto; }
  .knopf-zeichen,
  .knopf-zeichen.knopf-klein { width: 44px; min-width: 44px; height: 44px; }
  .eingabe,
  .auswahl,
  .textfeld,
  .filterleiste .eingabe,
  .filterleiste .auswahl {
    min-height: 44px;
    font-size: 16px;
    min-width: 0;
  }
  .filterleiste .eingabe,
  .filterleiste .auswahl { height: auto; }
  .textfeld { min-height: 88px; }
  .formular-zusatz > summary { min-height: 44px; }
  .schalter { padding-block: var(--raum-2); }
  .reiter-knopf { flex: none; }
  .adress-option,
  .karten-mehr-eintrag { justify-content: center; }
}

@media (max-width: 639.98px) {
  .knopf-gruppe,
  .formwahl { flex-wrap: wrap; max-width: 100%; }
  .knopf-gruppe .knopf,
  .formwahl-knopf { flex: 1 1 auto; white-space: normal; justify-content: center; }
  .seitenkopf-aktionen .knopf { white-space: normal; }
  .eingabe-gruppe { min-width: 0; }
  .eingabe-gruppe .eingabe { min-width: 0; }
  .modal-hintergrund {
    top: var(--dialog-sichtoben, 0px);
    bottom: auto;
    height: var(--dialog-sichthoehe, 100dvh);
    overscroll-behavior: contain;
  }
  .modal-kopf > :first-child { min-width: 0; overflow-wrap: anywhere; }
  .modal-koerper {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overscroll-behavior: contain;
    scroll-padding-block: var(--raum-4);
  }
  .modal-koerper input,
  .modal-koerper select,
  .modal-koerper textarea { scroll-margin-block: var(--raum-4); }
  .modal-kopf,
  .modal-fuss { flex: none; }
  .modal-fuss .knopf { white-space: normal; overflow-wrap: anywhere; }
  .hinweis { flex-wrap: wrap; }
  .hinweis > span { min-width: 0; overflow-wrap: anywhere; }
  .hinweis-text { flex-basis: 45%; }
  .tabelle tbody td:not([data-marke]) { flex-wrap: wrap; }
  .tabelle tbody td > * { min-width: 0; }
}