/* Anwendungsrahmen: helle Seitennavigation links, Kopfzeile, Inhaltsflaeche.
   Raster- und Abstandshelfer fuer alle Ansichten.

   Neugestaltung 24.09.2026 (Figma "limou - Neugestaltung", Seite
   "Neugestaltung 24.09.", 46:2): Die Navigation ist hell (Papier), Nacht
   bleibt dem Wandportal. Vier Bereiche: Heute, Planen, Bestand, Verwaltung.
   Die Kopfzeile traegt das Befehlsfeld, die Glocke fuer Hinweise, "Neue
   Fahrt" und das Konto. Am Handy liegt die Navigation unten.

   Kontraste (gerechnet 24.09.2026, limou/VHV x hell/dunkel, gegen die
   naechste deckende Flaeche): Eintraege --schrift-normal auf --flaeche-karte
   limou 11.02 / 9.90, VHV 9.85 / 9.61; Gruppentitel --schrift-leise 6.50 /
   7.42, VHV 5.33 / 6.53; aktiver Eintrag --band-schrift auf --band-flaeche
   limou 13.29, VHV 8.57 (beide Themen gleich). */

.rahmen {
  display: grid;
  grid-template-columns: var(--navigation-breite) minmax(0, 1fr);
  min-height: 100vh;
}

/* --- Seitennavigation --- */

.navigation {
  grid-column: 1;
  background: var(--flaeche-karte);
  color: var(--schrift-normal);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid var(--linie-leise);
}

/* Markenzeile: Kombination (Bildmarke plus Wortmarke) als eingebettetes
   SVG in currentColor, darunter der Name des Fahrdienstes. Die Marke ist
   in beiden Erscheinungsbildern dieselbe, in Zeichnung UND Farbe: Sie ist
   das Produkt, nicht der Kunde. Auf heller Navigation traegt sie
   --produktmarke-auf-hell (limou-Tinte, im dunklen Thema Nacht-Schrift),
   nie eine Kundenfarbe. */
.navigation-marke {
  display: flex;
  align-items: center;
  padding: var(--raum-5) var(--raum-5) var(--raum-4);
}

.navigation-marke-text { min-width: 0; }

/* Kombination 28px hoch (Rastereinheit 1.75px, Mindestgroesse 24px).
   Schutzraum eine halbe Kachelhoehe nach unten zum Namen (--raum-3). */
.navigation-marke-bild {
  display: block;
  width: auto;
  height: 28px;
  color: var(--produktmarke-auf-hell);
}

/* Name des Fahrdienstes; --schrift-leise auf der Karte. */
.navigation-marke-unter {
  margin-top: var(--raum-3);
  font-size: var(--grad-1);
  font-weight: var(--fett-mittel);
  line-height: var(--zeile-eng);
  color: var(--schrift-leise);
  overflow-wrap: anywhere;
}

.navigation-liste {
  padding: var(--raum-2) var(--raum-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

/* Gruppentitel in normaler Schreibung (DESIGN.md 6). */
.navigation-gruppe-titel {
  font-size: var(--grad-0);
  color: var(--schrift-leise);
  padding: var(--raum-4) var(--raum-3) var(--raum-1);
  font-weight: var(--fett-halb);
}
.navigation-gruppe-titel:first-child { padding-top: var(--raum-1); }

.navigation-eintrag {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  min-height: 38px;
  padding: var(--raum-1) var(--raum-3);
  border-radius: var(--rund-knopf);
  color: var(--schrift-normal);
  font-size: var(--grad-2);
  font-weight: var(--fett-mittel);
  transition: background var(--dauer-schnell) var(--kurve),
              color var(--dauer-schnell) var(--kurve);
}
.navigation-eintrag:hover {
  background: var(--flaeche-vertieft);
  color: var(--schrift-stark);
  text-decoration: none;
}
/* Aktiver Eintrag: Band-Flaeche, starke Schrift, mehr Gewicht - erkennbar
   auch ohne Farbe am Gewicht. Zeichen in --band-schrift, damit es im
   Kunden-Erscheinungsbild (Lindgruen) nicht Orange auf Gruen wird. */
.navigation-eintrag[aria-current="page"] {
  background: var(--band-flaeche);
  color: var(--band-schrift);
  font-weight: var(--fett-halb);
}
.navigation-eintrag[aria-current="page"] .navigation-eintrag-zeichen {
  color: var(--band-schrift);
}
.navigation-eintrag[aria-current="page"]:hover { background: var(--band-flaeche); }

.navigation-eintrag-zeichen {
  width: 20px; height: 20px;
  flex: none;
  color: var(--schrift-leise);
}

.navigation-eintrag-marke {
  margin-left: auto;
  min-width: 22px;
  padding: 0 6px;
  height: 20px;
  /* Keine Pille (DESIGN.md 8): Kennungen haben 4px. */
  border-radius: var(--rund-2);
  /* Eigene Marken, in beiden Themen gleich. Zahlen in tokens.css. */
  background: var(--marke-warnung-flaeche);
  color: var(--marke-warnung-schrift);
  font-size: var(--grad-0);
  font-weight: var(--fett-halb);
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}

/* Fuss: Konto-Karte (Rolle, "Mein Dienst") und Bestand, darunter der
   Themenschalter. Die Konto-Karte baut src/app.js (navigationKonto). */
.navigation-fuss {
  padding: var(--raum-3);
  border-top: 1px solid var(--linie-leise);
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
}

.navigation-fuss-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-2);
  font-size: var(--grad-0);
  color: var(--schrift-leise);
  padding: 0 var(--raum-2);
}

.navigation-konto {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  padding: var(--raum-2) var(--raum-3);
  border-radius: var(--rund-knopf);
  background: var(--flaeche-vertieft);
  min-width: 0;
}
.navigation-konto-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.navigation-konto-titel {
  font-size: var(--grad-1);
  font-weight: var(--fett-halb);
  color: var(--schrift-stark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.navigation-konto-unter {
  font-size: var(--grad-0);
  color: var(--schrift-leise);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.navigation-konto-unter a { color: var(--schrift-akzent); }

/* Kuerzel-Kreis fuer Konto und Personen: --band-schrift auf --band-flaeche. */
.kuerzel-kreis {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--band-flaeche);
  color: var(--band-schrift);
  font-size: var(--grad-1);
  font-weight: var(--fett-stark);
  letter-spacing: 0.01em;
}
.kuerzel-kreis-klein { width: 28px; height: 28px; font-size: var(--grad-0); }

/* --- Hauptbereich --- */

.haupt {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Kopfzeile 60px: Befehlsfeld links, rechts Glocke, "Neue Fahrt", Konto.
   Bricht der Platz weg (schmale Fenster), bricht sie um statt abzuschneiden. */
.kopfzeile {
  min-height: var(--kopf-hoehe);
  flex: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--raum-2) var(--raum-3);
  padding: var(--raum-2) var(--raum-6);
  background: var(--flaeche-karte);
  border-bottom: 1px solid var(--linie-leise);
  position: sticky;
  top: 0;
  z-index: 20;
}

/* Bildmarke in der Kopfzeile: nur am Handy sichtbar (dort ist die
   Navigation unten), am Schreibtisch steht die Kombination in der Rail. */
.kopfzeile-marke { display: none; }
.kopfzeile-marke svg { display: block; width: 26px; height: 26px; color: var(--produktmarke-auf-hell); }

/* Pfad "Gruppe / Ansicht": am Schreibtisch nicht sichtbar, der Titel steht
   einmal gross im Seitenkopf. Am Handy zeigt die Kopfzeile den Titel. */
.kopfzeile-pfad {
  display: none;
  align-items: baseline;
  gap: var(--raum-2);
  min-width: 0;
  font-size: var(--grad-3);
}
.kopfzeile-gruppe { display: none; }
.kopfzeile-trenner { display: none; }
.kopfzeile-titel {
  font-size: var(--grad-4);
  font-weight: var(--fett-stark);
  color: var(--schrift-stark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Befehlsfeld: sieht aus wie ein Suchfeld, ist ein Knopf (Strg K, /).
   --schrift-leise auf --flaeche-vertieft: limou hell 6.89, dunkel 7.89. */
.kopfzeile-suche { display: flex; flex: 1 1 200px; max-width: 420px; min-width: 140px; }
.kopfzeile-suche:empty { display: none; }
.suche-ausloeser {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  width: 100%;
  min-height: var(--steuer-hoehe);
  padding: 0 var(--raum-2) 0 var(--raum-3);
  border: 1px solid transparent;
  border-radius: var(--rund-knopf);
  background: var(--flaeche-vertieft);
  color: var(--schrift-leise);
  font-size: var(--grad-2);
  text-align: left;
}
.suche-ausloeser:hover { border-color: var(--linie-stark); color: var(--schrift-normal); }
.suche-ausloeser svg { width: 18px; height: 18px; flex: none; }
.suche-ausloeser-text { flex: 1; }

.kopfzeile-rechts {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--raum-2);
  min-width: 0;
}

.kopfzeile-datum {
  font-size: var(--grad-2);
  color: var(--schrift-leise);
  font-variant-numeric: tabular-nums;
}

/* Glocke: Verweis zur Hinweisseite mit der Zahl der Punkte, die heute eine
   Entscheidung brauchen (dieselbe Zahl wie frueher an "Hinweise" in der
   Navigation). Ohne Punkte ohne Zaehler. */
.kopfzeile-hinweise { display: flex; }
.kopfzeile-hinweise:empty { display: none; }
.kopfzeile-glocke {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--steuer-hoehe);
  height: var(--steuer-hoehe);
  border-radius: var(--rund-knopf);
  color: var(--schrift-normal);
}
.kopfzeile-glocke:hover { background: var(--flaeche-vertieft); color: var(--schrift-stark); text-decoration: none; }
.kopfzeile-glocke[aria-current="page"] { background: var(--band-flaeche); color: var(--band-schrift); }
.kopfzeile-glocke svg { width: 20px; height: 20px; }
.glocke-zaehler {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--rund-2);
  background: var(--marke-warnung-flaeche);
  color: var(--marke-warnung-schrift);
  font-size: 11px;
  font-weight: var(--fett-halb);
  line-height: 17px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.glocke-zaehler[hidden] { display: none; }

/* Feste Hauptaktion rechts in der Kopfzeile ("Neue Fahrt", Taste N). */
.kopfzeile-aktion { display: flex; align-items: center; }
.kopfzeile-aktion:empty { display: none; }
.taste-hinweis {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  margin-left: var(--raum-1);
  border-radius: var(--rund-1);
  border: 1px solid currentColor;
  /* Kein Mono: DESIGN.md 5 laesst Mono erst ab 14px zu. */
  font-size: var(--grad-0);
  font-weight: var(--fett-mittel);
  line-height: 1;
}

/* --- Kontextzeile / Konto ---
   Derselbe Baustein in der Kopfzeile des Arbeitsplatzes (index.html) und im
   Kopf der Konto-Seiten (.kt-kopf-rechts). Am Arbeitsplatz seit 24.09.2026
   als Konto-Menue: der Ausloeser ist der Kuerzel-Kreis, das Menue traegt
   Unternehmen, Rolle, E-Mail (oder den Vorfuehr-Hinweis), die anderen
   Oberflaechen und "Abmelden". Auf den Konto-Seiten bleibt die Zeile.
   Erzeugt wird sie von ui.kontextzeile; ohne Skript ist der Behaelter leer. */

.kopfzeile-kontext { display: flex; min-width: 0; }

.kontextzeile {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--raum-1) var(--raum-3);
  min-width: 0;
}

.kontextzeile-unternehmen {
  font-size: var(--grad-2);
  font-weight: var(--fett-halb);
  color: var(--schrift-stark);
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kontextzeile-rolle,
.kontextzeile-hinweis,
.kontextzeile-email {
  font-size: var(--grad-1);
  color: var(--schrift-leise);
  min-width: 0;
}

.kontextzeile-email {
  max-width: 28ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Menue als <details>: ohne Skript auf- und zuklappbar, mit der Tastatur
   bedienbar. Der Ausloeser ist ein <summary> - deshalb eigene Regeln. */
.kontextzeile-wechsel { position: relative; }

.kontextzeile-wechsel-knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  min-height: 28px;
  padding: var(--raum-1) var(--raum-2);
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund-knopf);
  background: var(--flaeche-karte);
  color: var(--schrift-normal);
  font-size: var(--grad-1);
  font-weight: var(--fett-mittel);
  cursor: pointer;
  list-style: none;
}
.kontextzeile-wechsel-knopf::-webkit-details-marker { display: none; }
/* Dreieck aus Raendern statt eines Zeichens: keine Schrift, kein Bild. */
.kontextzeile-wechsel-knopf::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}
.kontextzeile-wechsel-knopf:hover { background: var(--flaeche-still); color: var(--schrift-stark); }
.kontextzeile-wechsel[open] > .kontextzeile-wechsel-knopf { background: var(--flaeche-still); }
.kontextzeile-wechsel[open] > .kontextzeile-wechsel-knopf::after { border-top-color: transparent; border-bottom: 5px solid currentColor; border-top-width: 0; }

/* Konto-Ausloeser: der Kuerzel-Kreis selbst, ohne Rahmen und Dreieck. */
.kontextzeile-wechsel-knopf.konto-knopf {
  padding: 0;
  border: 0;
  background: none;
  min-height: 0;
  border-radius: 50%;
}
.kontextzeile-wechsel-knopf.konto-knopf::after { display: none; }
.kontextzeile-wechsel-knopf.konto-knopf:hover .kuerzel-kreis,
.kontextzeile-wechsel[open] > .konto-knopf .kuerzel-kreis { box-shadow: 0 0 0 2px var(--linie-stark); }

.kontextzeile-menue {
  position: absolute;
  right: 0;
  top: calc(100% + var(--raum-2));
  z-index: 30;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  padding: var(--raum-1);
  background: var(--flaeche-erhoben);
  border: 1px solid var(--linie);
  border-radius: var(--rund-karte);
  box-shadow: var(--schatten-3);
}

/* Kopf des Konto-Menues: fuer wen gearbeitet wird. */
.kontextzeile-menue-kopf {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--raum-3) var(--raum-3) var(--raum-3);
  margin-bottom: var(--raum-1);
  border-bottom: 1px solid var(--linie-leise);
}
.kontextzeile-menue-kopf .kontextzeile-unternehmen { max-width: none; white-space: normal; }

.kontextzeile-menue-eintrag {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--raum-3);
  min-height: 36px;
  padding: var(--raum-2) var(--raum-3);
  border-radius: var(--rund-knopf);
  color: var(--schrift-normal);
  font-size: var(--grad-2);
}
.kontextzeile-menue-eintrag:hover {
  background: var(--flaeche-vertieft);
  color: var(--schrift-stark);
  text-decoration: none;
}
.kontextzeile-menue-eintrag[aria-current="page"] {
  background: var(--flaeche-vertieft);
  color: var(--schrift-stark);
  font-weight: var(--fett-halb);
}

.kontextzeile-menue-zusatz {
  font-size: var(--grad-0);
  color: var(--schrift-leise);
  white-space: nowrap;
}

.kontextzeile-abmelden { white-space: nowrap; }
.kontextzeile-menue .kontextzeile-abmelden { justify-content: flex-start; margin-top: var(--raum-1); }

.inhalt {
  flex: 1;
  padding: var(--raum-6) var(--raum-8) var(--raum-12);
  max-width: var(--inhalt-max);
  width: 100%;
}

/* Leiste "Neue Fassung verfuegbar" zwischen Kopfzeile und Inhalt (src/app.js
   fassungHinweis). Gleiche Breite und Seitenraender wie .inhalt. */
.fassung-leiste {
  flex: none;
  padding: var(--raum-6) var(--raum-8) 0;
  max-width: var(--inhalt-max);
  width: 100%;
}

/* --- Seitenkopf innerhalb einer Ansicht --- */

/* Titel links, Aktionen rechts. */
.seitenkopf {
  display: flex;
  align-items: flex-start;
  gap: var(--raum-3) var(--raum-6);
  margin-bottom: var(--abstand-block);
  flex-wrap: wrap;
}

.seitenkopf-text { min-width: 0; flex: 1 1 320px; }

/* Oberzeile ueber dem Titel: nur auf Seiten ohne Kopfzeile (Konto,
   Unternehmen, Betrieb). --schrift-leise auf dem Grund, je hell / dunkel:
   limou 6.50 / 8.25, VHV 5.33 / 6.45. */
.seitenkopf-oberzeile {
  margin-bottom: var(--raum-1);
  font-size: var(--grad-2);
  font-weight: var(--fett-halb);
  line-height: var(--zeile-eng);
  color: var(--schrift-leise);
}

.seitenkopf-titel {
  font-size: var(--grad-6);
  font-weight: var(--gewicht-titel);
  line-height: 1.15;
  color: var(--schrift-stark);
  letter-spacing: -0.015em;
}

.seitenkopf-beschreibung {
  margin-top: var(--raum-1);
  color: var(--schrift-leise);
  font-size: var(--grad-2);
  max-width: 72ch;
}

.seitenkopf-zusatz { margin-top: var(--raum-3); }

/* Band im Seitenkopf ueber --band-* (limou Petrol-Hauch, VHV Lindgruen).
   Gemessen limou / VHV, gilt hell und dunkel: Titel, Verweise und die
   geerbte Zeile im Zusatz 13.29 / 8.57, Oberzeile, Beschreibung und
   leise 5.96 / 6.06, Fokusrahmen 6.40 / 8.57. */
.seitenkopf-band {
  align-items: center;
  padding: var(--raum-5) var(--raum-6);
  background: var(--band-flaeche);
  color: var(--band-schrift);
  border-radius: var(--rund-karte);
}
.seitenkopf-band .seitenkopf-titel { color: var(--band-schrift); }
.seitenkopf-band .seitenkopf-oberzeile,
.seitenkopf-band .seitenkopf-beschreibung,
.seitenkopf-band .leise { color: var(--band-schrift-leise); }
.seitenkopf-band a:not(.knopf) {
  color: var(--band-schrift);
  text-decoration: underline;
}
.seitenkopf-band :focus-visible { outline-color: var(--band-fokus); }
.seitenkopf-band .knopf { border-color: var(--band-schrift-leise); }
.seitenkopf-band .knopf-haupt { border-color: var(--band-schrift); }
.seitenkopf-band .knopf-still {
  border-color: transparent;
  color: var(--band-schrift);
}
.seitenkopf-band .knopf-still:hover {
  background: var(--band-knopf-hover);
  color: var(--band-schrift);
}

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

.zurueck-verweis {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  font-size: var(--grad-2);
  color: var(--schrift-leise);
  margin-bottom: var(--raum-3);
}
.zurueck-verweis:hover { color: var(--schrift-normal); text-decoration: none; }
.zurueck-verweis svg { width: 14px; height: 14px; }

/* Bereichsreiter (ui.bereichsreiter): Unterseiten eines Bereichs als
   Segment - Planen: Disposition / Kalender / Fahrten, Verwaltung: Nachweise /
   Zugaenge / Einstellungen. Verweise, keine Knoepfe: sie wechseln die Route.
   Aktiv: Karte auf stiller Flaeche mit starker Schrift (limou hell 13.17). */
.bereichsreiter {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: var(--rund-knopf);
  background: var(--flaeche-still);
}
.bereichsreiter a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 var(--raum-3);
  border-radius: calc(var(--rund-knopf) - 2px);
  color: var(--schrift-normal);
  font-size: var(--grad-1);
  font-weight: var(--fett-mittel);
  white-space: nowrap;
}
.bereichsreiter a:hover { color: var(--schrift-stark); text-decoration: none; }
.bereichsreiter a[aria-current="page"] {
  background: var(--flaeche-karte);
  color: var(--schrift-stark);
  font-weight: var(--fett-halb);
  box-shadow: var(--schatten-1);
}

/* --- Raster --- */

.raster { display: grid; gap: var(--raum-4); }
.raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.raster-auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.raster-breit-schmal { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.raster-schmal-breit { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }

.stapel { display: flex; flex-direction: column; gap: var(--raum-4); }
.stapel-eng { display: flex; flex-direction: column; gap: var(--raum-2); }
.stapel-weit { display: flex; flex-direction: column; gap: var(--raum-6); }

.reihe {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  flex-wrap: wrap;
}
.reihe-eng { display: flex; align-items: center; gap: var(--raum-2); flex-wrap: wrap; }
.reihe-verteilt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-3);
}
.reihe-oben { align-items: flex-start; }
.schub { margin-left: auto; }

.abschnitt { margin-bottom: var(--raum-8); }
.abschnitt:last-child { margin-bottom: 0; }

.abschnitt-kopf {
  display: flex;
  align-items: baseline;
  gap: var(--raum-3);
  margin-bottom: var(--raum-3);
}

/* Abschnittstitel in normaler Schreibung (DESIGN.md 6). --schrift-stark
   auf dem Grund, je hell / dunkel: limou 14.49 / 15.56. */
.abschnitt-titel {
  font-size: var(--grad-3);
  font-weight: var(--gewicht-abschnitt);
  color: var(--schrift-stark);
}

/* --- Anpassung an schmale Fenster --- */

/* Tastenhinweis nur, wo es eine Tastatur gibt. */
@media (hover: none), (max-width: 900px) {
  .taste-hinweis { display: none; }
}

/* Das Datum steht im Seitenkopf jeder Tagesansicht; in der Kopfzeile erst
   ab 1600px. */
@media (max-width: 1599px) {
  .kopfzeile-datum { display: none; }
}

@media (max-width: 1200px) {
  .raster-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raster-breit-schmal,
  .raster-schmal-breit { grid-template-columns: minmax(0, 1fr); }
}

/* Tablet (641 bis 900px): schmale Rail nur mit Zeichen, der Inhalt behaelt
   die volle Breite. Der Name eines Eintrags steht im title. */
@media (max-width: 900px) and (min-width: 640px) {
  .rahmen { grid-template-columns: 64px minmax(0, 1fr); }
  /* Nur die Kachel der Kombination: der Text wird 24px breit beschnitten,
     die Kachel ist genau 160 von 612 Einheiten, bei 24px Hoehe 24px breit. */
  .navigation-marke { padding: var(--raum-4) 0 var(--raum-3); justify-content: center; }
  .navigation-marke-text { width: 24px; overflow: hidden; }
  .navigation-marke-bild { height: 24px; width: auto; max-width: none; }
  .navigation-marke-unter { display: none; }
  .navigation-liste { padding: var(--raum-2) var(--raum-2); }
  .navigation-gruppe-titel { height: 1px; padding: 0; margin: var(--raum-2) var(--raum-2); overflow: hidden; color: transparent; border-top: 1px solid var(--linie-leise); }
  .navigation-eintrag { justify-content: center; padding: var(--raum-2); }
  .navigation-eintrag > span:not(.navigation-eintrag-marke) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .navigation-eintrag-marke { position: absolute; top: 2px; right: 2px; margin: 0; min-width: 18px; height: 18px; }
  .navigation-fuss { padding: var(--raum-2); }
  .navigation-fuss-zeile,
  .navigation-konto-text,
  .navigation-fuss .navigation-eintrag > span:not(.navigation-eintrag-zeichen) { display: none; }
  .navigation-konto { justify-content: center; padding: var(--raum-2); }
  .inhalt { padding: var(--raum-5) var(--raum-5) var(--raum-10); }
  .fassung-leiste { padding: var(--raum-5) var(--raum-5) 0; }
  .raster-3, .raster-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kopfzeile { padding: var(--raum-2) var(--raum-5); }
}

@media (max-width: 640px) {
  .raster-2 { grid-template-columns: minmax(0, 1fr); }
  /* Kacheln zu zweit (Handy als App, 24.09.2026): vier Kacheln untereinander
     waren 4 x 90px, zu zweit sind es zwei Reihen. */
  .raster-3, .raster-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--raum-2); }
  /* Abschnittskopf am Handy: Titel und Verweis in einer Zeile, die
     Beschreibung darunter ueber die volle Breite. */
  .abschnitt-kopf { flex-wrap: wrap; row-gap: var(--raum-1); }
  .abschnitt-kopf .abschnitt-titel { white-space: nowrap; }
  .abschnitt-kopf > .klein { order: 3; flex-basis: 100%; }
  .kopfzeile { padding: var(--raum-2) var(--raum-4); }
  .kopfzeile-datum { display: none; }
  .seitenkopf-titel { font-size: var(--grad-5); }
  .seitenkopf-band { padding: var(--raum-4); }
  .rahmen { grid-template-columns: 1fr; }
  .navigation {
    position: static;
    height: auto;
    grid-column: 1;
    border-right: none;
    border-bottom: 1px solid var(--linie-leise);
  }
  .navigation-liste { flex-direction: row; overflow-x: auto; padding: var(--raum-2); }
  .navigation-gruppe-titel { display: none; }
  .navigation-eintrag { white-space: nowrap; }
  .navigation-fuss { flex-direction: row; }
  .haupt { grid-column: 1; }
  .inhalt { padding: var(--raum-4) var(--raum-4) var(--raum-10); }
  .fassung-leiste { padding: var(--raum-4) var(--raum-4) 0; }
}

/* ------------------------------------------------------ Handy (23./24.09.2026)
 * Unter 640px liegt die Navigation unten: Heute, Planen, Bestand und "Mehr"
 * (Verwaltung und der Rest). Oben eine Zeile: Bildmarke, Titel der Ansicht,
 * Suche als Zeichen, Glocke, Konto. "Neue Fahrt" schwebt ueber der Leiste.
 * Alles haengt an .mit-unterleiste, die erst src/app.js setzt: ohne Skript
 * steht die Navigation oben wie am Schreibtisch.
 * Kontraste: Eintraege --schrift-leise, aktiv --schrift-stark auf
 * --flaeche-karte, Kante oben --akzent (Grenze 3:1). */
.unterleiste { display: none; }

@media (max-width: 639.98px) {
  .mit-unterleiste {
    --unterleiste-hoehe: 58px;
  }
  .mit-unterleiste .unterleiste {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    background: var(--flaeche-karte);
    border-top: 1px solid var(--linie);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .unterleiste-eintrag {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: var(--unterleiste-hoehe);
    padding: var(--raum-1) var(--raum-1) 0;
    border: 0;
    border-top: 3px solid transparent;
    background: none;
    color: var(--schrift-leise);
    font: inherit;
    font-size: var(--grad-0);
    font-weight: var(--fett-mittel);
    line-height: var(--zeile-eng);
    text-decoration: none;
    cursor: pointer;
  }
  .unterleiste-eintrag:hover { text-decoration: none; }
  .unterleiste-eintrag[aria-current="page"],
  .unterleiste-eintrag-aktiv,
  .unterleiste-mehr[aria-expanded="true"] {
    color: var(--schrift-stark);
    font-weight: var(--fett-halb);
    border-top-color: var(--akzent);
  }
  .unterleiste-eintrag:focus-visible { outline: 2px solid var(--fokus); outline-offset: -3px; }
  .unterleiste-zeichen { width: 24px; height: 24px; }
}
/* Hover nur mit Maus: auf dem Touchgeraet bliebe er nach dem Antippen haengen. */
@media (max-width: 639.98px) and (hover: hover) {
  .unterleiste-eintrag:hover { color: var(--schrift-stark); }
}
@media (max-width: 639.98px) {
  .unterleiste-marke {
    position: absolute;
    top: 4px;
    left: calc(50% + 8px);
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--rund-2);
    background: var(--marke-warnung-flaeche);
    color: var(--marke-warnung-schrift);
    font-size: var(--grad-0);
    font-weight: var(--fett-halb);
    line-height: 18px;
    text-align: center;
  }
  .unterleiste-marke[hidden] { display: none; }

  /* Die Navigation oben verschwindet ganz; die Marke steht in der Kopfzeile. */
  .mit-unterleiste .navigation { display: none; }
  .mit-unterleiste .kopfzeile-marke { display: block; }
  .mit-unterleiste .kopfzeile { gap: var(--raum-2); flex-wrap: nowrap; min-height: 52px; padding: var(--raum-2) var(--raum-4); }
  .mit-unterleiste .kopfzeile-pfad { display: flex; flex: 1 1 0; min-width: 0; overflow: hidden; }
  .mit-unterleiste .kopfzeile-suche { flex: none; max-width: none; min-width: 0; }
  .mit-unterleiste .suche-ausloeser { width: var(--steuer-hoehe); padding: 0; justify-content: center; background: none; }
  .mit-unterleiste .suche-ausloeser-text,
  .mit-unterleiste .suche-ausloeser .taste-hinweis { display: none; }
  .mit-unterleiste .kopfzeile-rechts { margin-left: 0; flex: none; flex-wrap: nowrap; }
  .mit-unterleiste .kopfzeile-kontext .kontextzeile { flex-wrap: nowrap; }
  /* Nur Konto-Menue und "Mein Dienst" bleiben; der Dienst-Knopf zeigt am
     Handy nur sein Zeichen, der Name steht im aria-label. */
  .mit-unterleiste .kontextzeile > :not(.kontextzeile-wechsel):not(.dienst-knopf) { display: none; }
  .mit-unterleiste .dienst-knopf { width: var(--steuer-hoehe); height: var(--steuer-hoehe); padding: 0; justify-content: center; }
  .mit-unterleiste .dienst-knopf > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mit-unterleiste .dienst-knopf svg { width: 20px; height: 20px; }

  /* "Mehr": die volle Navigation als Blatt ueber dem Inhalt, bis zur Leiste. */
  .mit-unterleiste.navigation-offen .navigation {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(var(--unterleiste-hoehe) + env(safe-area-inset-bottom, 0px));
    z-index: 29;
    overflow-y: auto;
    border: 0;
  }
  .mit-unterleiste.navigation-offen .navigation-marke { padding: var(--raum-4) var(--raum-4) var(--raum-2); }
  .mit-unterleiste.navigation-offen .navigation-liste {
    display: flex;
    flex-direction: column;
    overflow: visible;
    padding: var(--raum-2) var(--raum-3);
  }
  .mit-unterleiste.navigation-offen .navigation-gruppe-titel { display: block; }
  .mit-unterleiste.navigation-offen .navigation-eintrag { min-height: 46px; font-size: var(--grad-3); }
  .mit-unterleiste.navigation-offen .navigation-fuss { display: flex; flex-direction: column; }

  /* "Neue Fahrt" schwebt rechts ueber der Leiste, wo der Daumen ist. */
  .mit-unterleiste .kopfzeile-aktion {
    position: fixed;
    right: var(--raum-4);
    bottom: calc(var(--unterleiste-hoehe) + var(--raum-4) + env(safe-area-inset-bottom, 0px));
    z-index: 30;
  }
  .mit-unterleiste .kopfzeile-aktion .knopf {
    min-height: 48px;
    padding: 0 var(--raum-5);
    border-radius: var(--rund-karte);
    box-shadow: var(--schatten-3);
    font-size: var(--grad-3);
  }

  /* Platz unten: Leiste, schwebender Knopf, Sicherheitszone. */
  .mit-unterleiste .inhalt {
    padding-bottom: calc(var(--unterleiste-hoehe) + var(--steuer-hoehe-gross) + var(--raum-8) + env(safe-area-inset-bottom, 0px));
  }
}

/* ------------------------------------------- Handy als App (24.09.2026)
 * Figma "6 Handy-App", Prinzip: kein Statusbalken (leiste.css), Kopf 56px
 * mit Bildmarke oder Zurueck-Pfeil, Titel und Unterzeile der Ansicht, kein
 * zweiter Titel im Inhalt; die Hauptaktion der Fahrt klebt ueber der
 * Unterleiste. Am Schreibtisch sind Pfeil und Unterzeile versteckt. */
.kopfzeile-zurueck { display: none; }
.kopfzeile-unter { display: none; }

@media (max-width: 639.98px) {
  .mit-unterleiste .kopfzeile { min-height: 56px; }
  .mit-unterleiste .kopfzeile-pfad { flex-direction: column; align-items: flex-start; gap: 0; }
  .mit-unterleiste .kopfzeile-titel {
    max-width: 100%;
    font-size: var(--grad-4);
    font-weight: var(--fett-stark);
    color: var(--schrift-stark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mit-unterleiste .kopfzeile-unter {
    display: block;
    max-width: 100%;
    font-size: var(--grad-0);
    color: var(--schrift-leise);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mit-unterleiste .kopfzeile-unter:empty { display: none; }
  .mit-unterleiste .kopfzeile-zurueck {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--steuer-hoehe);
    height: var(--steuer-hoehe);
    margin-left: calc(-1 * var(--raum-2));
    border-radius: var(--rund-knopf);
    color: var(--schrift-stark);
  }
  .mit-unterleiste .kopfzeile-zurueck[hidden] { display: none; }
  .mit-unterleiste .kopfzeile-zurueck svg { width: 24px; height: 24px; }
  .mit-unterleiste .kopfzeile-mit-zurueck .kopfzeile-marke { display: none; }

  /* Der Kopf traegt den Titel: im Inhalt faellt der zweite weg. */
  .mit-unterleiste .seitenkopf-titel,
  .mit-unterleiste .seitenkopf-beschreibung,
  .mit-unterleiste .seitenkopf-oberzeile,
  .mit-unterleiste .zurueck-verweis { display: none; }
  .mit-unterleiste .seitenkopf { margin-bottom: var(--raum-3); gap: var(--raum-2); }
  .mit-unterleiste .seitenkopf-text { flex: 1 1 100%; min-width: 0; }
  .mit-unterleiste .seitenkopf-text:empty { display: none; }
  .mit-unterleiste .seitenkopf-aktionen { flex: 1 1 100%; flex-wrap: wrap; }

  /* Fahrt-Detail: Hauptschritt und "Weitere" kleben unten ueber der Leiste
     (views/fahrten.js baut .fahrt-detail-aktionen nur am Handy); der
     schwebende "Neue Fahrt" weicht ihnen. */
  .mit-unterleiste .fahrt-detail-aktionen {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--unterleiste-hoehe) + env(safe-area-inset-bottom, 0px));
    z-index: 28;
    display: flex;
    align-items: center;
    gap: var(--raum-2);
    padding: var(--raum-3) var(--raum-4);
    background: var(--flaeche-karte);
    border-top: 1px solid var(--linie-leise);
  }
  .mit-unterleiste .fahrt-detail-aktionen .knopf-haupt { flex: 1 1 auto; min-height: 48px; }
  .mit-unterleiste .fahrt-detail-aktionen .mehr-menue-liste { bottom: calc(100% + var(--raum-2)); top: auto; }
  .mit-unterleiste:has(.fahrt-detail-aktionen) .kopfzeile-aktion { display: none; }
}

/* Handy (16.10.2026): Kopf- und Kontoelemente brauchen dieselbe
   Trefferflaeche wie die Aktionen im Inhalt. Der Titel darf Platz abgeben. */
@media (max-width: 639.98px), (pointer: coarse) {
  .suche-ausloeser,
  .kopfzeile-glocke,
  .kontextzeile-wechsel-knopf,
  .kontextzeile-wechsel-knopf.konto-knopf,
  .kontextzeile-menue-eintrag,
  .bereichsreiter a { min-height: 44px; }
  .kopfzeile-glocke,
  .kontextzeile-wechsel-knopf.konto-knopf { min-width: 44px; justify-content: center; }
}

@media (max-width: 639.98px) {
  .mit-unterleiste .suche-ausloeser,
  .mit-unterleiste .dienst-knopf,
  .mit-unterleiste .kopfzeile-zurueck { width: 44px; height: 44px; min-height: 44px; }
  .kontextzeile-menue { min-width: min(260px, calc(100vw - 24px)); max-width: calc(100vw - 24px); }
  .kontextzeile-menue-eintrag { align-items: center; flex-wrap: wrap; }
  .bereichsreiter { flex-wrap: wrap; max-width: 100%; }
  .bereichsreiter a { justify-content: center; flex: 1 1 auto; white-space: normal; }
}