/* Fahrerportal. Eigenes Stilblatt, baut auf tokens.css auf.
 *
 * Gebaut fuer den FINGER auf einem Tablet, nicht fuer die Maus am
 * Schreibtisch. Deshalb andere Masse als in components.css:
 *   - jede Beruehrflaeche mindestens 48px hoch, Zifferntasten 64px
 *   - Grundschriftgrad 17px statt 14px
 *   - grosszuegige Abstaende, weil daneben tippen teurer ist als scrollen
 *
 * Muss bei 390px Breite (Handy hochkant) genauso tragen wie bei 1024px
 * (Tablet quer).
 */

:root {
  --fp-grad-1: 14px;   /* kleinste erlaubte Groesse: Marken */
  --fp-grad-2: 15px;   /* Zusatzangaben */
  --fp-grad-3: 17px;   /* Grundschriftgrad */
  --fp-grad-4: 19px;   /* betonte Zeilen */
  --fp-grad-5: 23px;   /* Kartentitel, Ortsangaben */
  --fp-grad-6: 30px;   /* Tagesueberschrift */
  --fp-grad-7: 38px;   /* Abholzeit auf der Karte */

  --fp-flaeche: 48px;  /* kleinste Beruehrflaeche */
  --fp-taste: 64px;    /* Zifferntaste */
  --fp-rand: clamp(14px, 4vw, 32px);

  /* Die Kopfzeile sitzt in BEIDEN Themen auf der dunklen
     Navigationsflaeche, ihre Schrift ist deshalb nicht themenabhaengig.
     Die Tokens verweisen nur auf tokens.css und folgen damit dem Mandanten.
     Gerechnet hell / dunkel (Navigation limou #0f2127 / #061013; die Zahlen
     fuer das Kunden-Erscheinungsbild VHV stehen in mandant-vhv.css):
       Name ton-050           14.77:1 / 17.15:1
       Datum ton-300           8.36:1 /  9.71:1
       Rand Abmelden ton-400   5.79:1 /  6.73:1
       Fokus navigation-fokus 14.77:1 / 17.15:1
     VHV (Stand vor dem 15.09.2026): Name 11.23 / 15.89, Datum 6.53 / 9.23,
     Rand 5.05 / 7.14, Fokus Lindgruen 6.06 / 8.57. */
  --fp-kopf-schrift: var(--ton-050);
  --fp-kopf-leise: var(--ton-300);
  --fp-kopf-rand: var(--ton-400);
  --fp-kopf-fokus: var(--navigation-fokus);
  /* Hover auf Abmelden: ton-050 auf ton-800 limou 12.00:1 (VHV 9.38:1). */
  --fp-kopf-hover: var(--ton-800);
  /* Kuerzel in der Kopfzeile. Vorher --akzent: limou Petrol mass gegen die
     Navigation 2.12:1 (DESIGN.md 4.1: Petrol auf Nacht verboten).
     akzentton-300 ist in beiden Themen hell und traegt Tinte.
     Gerechnet hell / dunkel:
       Kreis gegen Navigation  limou 8.90 / 10.33   VHV 5.97 / 8.44
       Tinte auf dem Kreis     limou 8.73           VHV 5.97
     Im VHV-Erscheinungsbild ist der Kreis damit hellorange (#fc9f6a) statt
     Orange (#fa5f07). In der Fahrerliste der Anmeldung steht das Kuerzel
     auf der Karte und behaelt --akzent. */
  --fp-kopf-zeichen-flaeche: var(--akzentton-300);
  --fp-kopf-zeichen-schrift: var(--ton-900);

  /* Leiste der Vorschlagskarte. limou primaerton-700 ist Petrol: gegen die
     Karte 7.83:1, gegen den Grund 6.98:1. VHV primary--120: 5.18 / 4.78. */
  --fp-vorschlag-leiste: var(--primaerton-700);
}

:root[data-thema="dunkel"] {
  /* Hover auf Abmelden: ton-050 auf ton-900 limou 14.49:1 (VHV 11.23:1). */
  --fp-kopf-hover: var(--ton-900);
  /* Petrol hell auf der dunklen Karte 8.90:1, gegen den Grund 9.89:1
     (VHV Lindgruen 6.06 / 7.75). */
  --fp-vorschlag-leiste: var(--primaerton-500);
}

/* Diese Seite laedt base.css nicht mit, also steht der Umschalter hier -
   genau wie in tv.css und abholung.css, die aus demselben Grund eigenstaendig
   sind. Gemessen ohne ihn bei 390px Fenster: .fp-inhalt wird 421px breit
   (width:100% plus zweimal --fp-rand), die Seite scrollt 31px zur Seite und
   die Fahrtkarten stehen 16px ueber den rechten Rand hinaus. */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--schriftfamilie);
  font-size: var(--fp-grad-3);
  line-height: var(--zeile-normal);
  color: var(--schrift-normal);
  background: var(--flaeche-grund);
  -webkit-font-smoothing: antialiased;
  /* Kein Doppeltipp-Zoom, aber Kneifen bleibt erlaubt. */
  touch-action: manipulation;
}

.fp {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------------------------ Ruhezustand */

.fp-ruhe {
  padding: var(--raum-10) var(--fp-rand);
  max-width: 44ch;
  margin: 0 auto;
}

.fp-ruhe-titel {
  font-size: var(--fp-grad-5);
  font-weight: var(--gewicht-titel, 900);
  color: var(--schrift-stark);
  margin-bottom: var(--raum-3);
}

.fp-ruhe-text {
  font-size: var(--fp-grad-3);
  color: var(--schrift-leise);
  margin: 0;
}

.fp-ruhe-text code {
  font-family: var(--schriftfamilie-fest);
  background: var(--flaeche-still);
  padding: 2px 6px;
  border-radius: var(--rund-1);
}

/* --------------------------------------------------------------- Anmeldung */

.fp-anmeldung {
  flex: 1;
  padding: var(--raum-8) var(--fp-rand) var(--raum-10);
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}

/* Kopf der Anmeldung: oben die Kombination von limou, darunter der Name
   des Fahrdienstes. Name schrift-leise auf dem Grund: limou 6.50:1,
   VHV 5.33:1, in Versalien wie bisher. */
.fp-anmeldung-marke {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Schutzraum der Kombination: eine halbe Kachelhoehe, hoechstens 16px.
     --raum-4 ist 16px. */
  gap: var(--raum-4);
  color: var(--schrift-leise);
}

.fp-anmeldung-marke-name {
  font-size: var(--fp-grad-1);
  font-weight: var(--fett-halb);
}

/* Kombination (Bildmarke und Wortmarke als Pfade, Fassung hell, Markup in
   portal.js). 32px hoch: Mindestgroesse ist 24px, und bei 32px liegt eine
   Rastereinheit der Kachel auf genau 2px. Der Schutzraum (halbe Hoehe) muss
   auch zum Seitenrand halten; --fp-rand ist am Handy nur 14px. Deshalb
   hoechstens doppelt so hoch wie der Rand: gemessen bei 303px Fenster
   vorher 32px hoch und 14px Rand (2px zu wenig), jetzt 28px. Ab 400px
   Fensterbreite sind es 32px. Breite aus der viewBox 612 x 160 (3.825).
   Farben fest aus der Marke, gerechnet gegen den Grund der Anmeldung
   (flaeche-grund, das Portal ist nur hell):
     Kachel Petrol     limou 6.98:1   VHV 7.24:1   (Grenze 3:1)
     Wortmarke Tinte   limou 14.49:1  VHV 15.02:1
     Einsatz Papier auf der Kachel 7.83:1, Strich Petrol hell 4.20:1 */
.fp-kombination {
  --fp-kombination-hoehe: min(32px, calc(2 * var(--fp-rand)));
  display: block;
  flex: none;
  height: var(--fp-kombination-hoehe);
  width: calc(var(--fp-kombination-hoehe) * 3.825);
}

.fp-anmeldung-titel {
  font-size: var(--fp-grad-6);
  font-weight: var(--gewicht-titel, 900);
  color: var(--schrift-stark);
  line-height: var(--zeile-eng);
  margin: var(--raum-1) 0 var(--raum-6);
}

.fp-anmeldung-frage {
  font-size: var(--fp-grad-4);
  color: var(--schrift-normal);
  margin-bottom: var(--raum-4);
}

/* Fahrerauswahl: grosse Flaechen, eine je Zeile. */
.fp-fahrerliste {
  display: flex;
  flex-direction: column;
  gap: var(--raum-3);
}

.fp-fahrer {
  display: flex;
  align-items: center;
  gap: var(--raum-4);
  min-height: 72px;
  padding: var(--raum-3) var(--raum-4);
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund-3);
  background: var(--flaeche-karte);
  text-align: left;
  width: 100%;
  transition: border-color var(--dauer-schnell) var(--kurve),
              background var(--dauer-schnell) var(--kurve);
}
.fp-fahrer:hover { background: var(--flaeche-vertieft); border-color: var(--ton-400); }
.fp-fahrer:active { background: var(--flaeche-still); }

.fp-fahrer-zeichen {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  background: var(--akzent);
  color: var(--akzent-schrift);
  display: grid;
  place-items: center;
  font-size: var(--fp-grad-4);
  font-weight: var(--fett-halb);
  letter-spacing: 0.02em;
}

/* Die Kinder sind span-Elemente. Ohne Blocksatz kleben Name und
   Personalnummer aneinander. */
.fp-fahrer-text {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fp-fahrer-name {
  display: block;
  font-size: var(--fp-grad-4);
  font-weight: var(--fett-mittel);
  color: var(--schrift-stark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fp-fahrer-unter {
  display: block;
  font-size: var(--fp-grad-2);
  color: var(--schrift-leise);
}

.fp-fahrer-pfeil {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--schrift-leise);
}

/* Ziffernfeld. Drei Spalten, damit die Tasten auch bei 390px breit bleiben. */
.fp-tastenfeld {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--raum-3);
  margin-top: var(--raum-6);
}

.fp-taste {
  min-height: var(--fp-taste);
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund-3);
  background: var(--flaeche-karte);
  color: var(--schrift-stark);
  font-size: var(--fp-grad-6);
  font-weight: var(--fett-mittel);
  font-variant-numeric: tabular-nums;
  transition: background var(--dauer-schnell) var(--kurve);
}
.fp-taste:hover { background: var(--flaeche-vertieft); }
.fp-taste:active { background: var(--flaeche-still); }

.fp-taste-breit { font-size: var(--fp-grad-3); font-weight: var(--fett-halb); }
.fp-taste-haupt {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--akzent-schrift);
}
/* Hover ueber --akzent-schwach, seit Stufe 2 akzentton-400: dunkle Schrift
   darauf 6.50:1 (vorher akzentton-600 mit 3.98:1). */
.fp-taste-haupt:hover { background: var(--akzent-schwach); border-color: var(--akzent-schwach); }

/* Deaktiviert wird die FLAECHE gedaempft, nicht das ganze Element.
   Mit opacity kam die Beschriftung auf 2.29:1 und war kaum zu lesen -
   ausgerechnet an dem Knopf, auf den alles hinauslaeuft. So sind es
   7.87:1, und inaktiv sieht er trotzdem aus. */
.fp-taste-haupt:disabled {
  background: var(--ton-200);
  border-color: var(--ton-200);
  color: var(--ton-700);
}
.fp-taste-haupt:disabled:hover { background: var(--ton-200); }

/* Vier Punkte zeigen, wie viele Stellen eingegeben sind. */
.fp-punkte {
  display: flex;
  justify-content: center;
  gap: var(--raum-4);
  margin: var(--raum-6) 0 var(--raum-2);
}

.fp-punkt {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--linie-stark);
}
.fp-punkt-voll { background: var(--akzent); border-color: var(--akzent); }

.fp-anmeldung-fehler {
  margin-top: var(--raum-4);
  padding: var(--raum-3) var(--raum-4);
  border: 1px solid var(--gefahr-linie);
  border-radius: var(--rund-2);
  background: var(--gefahr-flaeche);
  color: var(--gefahr-schrift);
  font-size: var(--fp-grad-3);
}

.fp-anmeldung-fuss {
  margin-top: var(--raum-8);
  padding-top: var(--raum-5);
  border-top: 1px solid var(--linie);
  font-size: var(--fp-grad-2);
  color: var(--schrift-leise);
}

.fp-zurueck {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  min-height: var(--fp-flaeche);
  padding: 0 var(--raum-3);
  margin-bottom: var(--raum-4);
  color: var(--schrift-leise);
  font-size: var(--fp-grad-3);
}
.fp-zurueck svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- Kopfzeile */

/* Kopfzeile und Reiterleiste kleben GEMEINSAM oben. Beide einzeln auf
   top: 0 zu setzen ergab genau das Gegenteil: gemessen nach 900px Scrollen
   stand die Kopfzeile auf 0..99, die Reiterleiste ebenfalls auf 0..55 und
   damit vollstaendig hinter ihr - die Reiter waren beim Scrollen weg. Die
   Hoehe der Kopfzeile wechselt mit der Fensterbreite (99px bei 390px, weil
   das Datum umbricht), ein fester top-Wert fuer die Reiterleiste waere also
   auch falsch. Deshalb klebt die Klammer, nicht die Teile. */
.fp-kopfbereich {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--flaeche-karte);
}

/* Kopfzeile auf der Navigationsflaeche wie am Arbeitsplatz. Farben und
   gerechnete Werte stehen oben bei --fp-kopf-*, auch die des Kuerzels.
   Keine Unterkante: die Reiterleiste darunter ist weiss, die Grenze traegt
   der Flaechenwechsel (Navigation gegen Weiss: limou 16.57:1, VHV 12.15:1). */
.fp-kopf .fp-fahrer-zeichen {
  background: var(--fp-kopf-zeichen-flaeche);
  color: var(--fp-kopf-zeichen-schrift);
}

.fp-kopf {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  padding: var(--raum-3) var(--fp-rand);
  padding-top: max(var(--raum-3), env(safe-area-inset-top));
  background: var(--flaeche-navigation);
  color: var(--fp-kopf-schrift);
  border-bottom: 0;
}

.fp-kopf :focus-visible { outline-color: var(--fp-kopf-fokus); }

.fp-kopf-text { min-width: 0; flex: 1; }

.fp-kopf-name {
  font-size: var(--fp-grad-4);
  font-weight: var(--fett-halb);
  color: var(--fp-kopf-schrift);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fp-kopf-datum {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--raum-3);
  font-size: var(--fp-grad-2);
  color: var(--fp-kopf-leise);
}

/* "Im Dienst seit 07:58" / "Kein Dienst" neben dem Datum, gleiche Farbe wie
   das Datum (ton-300 auf Navigation, Werte oben bei --fp-kopf-leise). */
.fp-kopf-dienst {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.fp-abmelden {
  flex: none;
  min-height: var(--fp-flaeche);
  padding: 0 var(--raum-4);
  border: 1px solid var(--fp-kopf-rand);
  border-radius: var(--rund-2);
  background: transparent;
  color: var(--fp-kopf-schrift);
  font-size: var(--fp-grad-2);
  font-weight: var(--fett-mittel);
}
.fp-abmelden:hover { background: var(--fp-kopf-hover); }

/* Verweis "Arbeitsplatz" neben "Abmelden" (Doppelrolle, 17.09.2026): nur fuer
   Disposition und Verwaltung, die hier ihren eigenen Dienst fuehren. Dieselben
   Token wie .fp-abmelden, also dieselben gerechneten Kontraste (Schrift
   --fp-kopf-schrift auf --flaeche-navigation, Rand --fp-kopf-rand); ein
   Verweis statt eines Knopfs, weil er die Seite wechselt. */
.fp-kopf-wechsel {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--fp-flaeche);
  padding: 0 var(--raum-3);
  border: 1px solid var(--fp-kopf-rand);
  border-radius: var(--rund-2);
  color: var(--fp-kopf-schrift);
  font-size: var(--fp-grad-2);
  font-weight: var(--fett-mittel);
  text-decoration: none;
  white-space: nowrap;
}
.fp-kopf-wechsel:hover { background: var(--fp-kopf-hover); color: var(--fp-kopf-schrift); text-decoration: none; }
/* Mit dem Verweis sind es zwei Knoepfe rechts. Der Text behaelt mindestens
   180px; reicht die Breite nicht (Handy), rutschen beide Knoepfe in eine
   zweite Zeile, rechtsbuendig. Ohne Verweis (Rolle fahrer) bleibt der Kopf,
   wie er war. */
.fp-kopf-mit-wechsel { flex-wrap: wrap; }
.fp-kopf-mit-wechsel .fp-kopf-text { flex: 1 1 180px; }
.fp-kopf-mit-wechsel .fp-kopf-wechsel { margin-left: auto; }

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

/* Die Zahl der Reiter haengt an den Befugnissen (drei oder vier). Deshalb
   keine feste Spaltenzahl: jeder Reiter bekommt eine gleich breite Spalte.
   Beschriftungen seit 15.09.2026 einwortig (Heute, Woche, Zeit, Ich), damit
   sie bei 360px einzeilig bleiben. */
.fp-reiter {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  background: var(--flaeche-karte);
  border-bottom: 1px solid var(--linie);
}

.fp-reiter-knopf {
  min-height: 54px;
  line-height: var(--zeile-eng);
  padding: 0 var(--raum-2);
  font-size: var(--fp-grad-3);
  font-weight: var(--fett-mittel);
  color: var(--schrift-leise);
  border-bottom: 3px solid transparent;
}
.fp-reiter-knopf[aria-selected="true"] {
  color: var(--schrift-stark);
  font-weight: var(--fett-halb);
  border-bottom-color: var(--akzent);
}

/* Unter 640px liegt die Reiterleiste unten am Rand, wo der Daumen ist. Sie
   bleibt im Dokument ein Kind der Kopfklammer (Reihenfolge fuer Tastatur und
   Vorleseprogramm: Kopf, Reiter, Inhalt); position: sticky am Elternteil
   bildet keinen Bezugsrahmen fuer fixed, die Leiste haengt also am Fenster.
   Die Markierung wandert an die Oberkante. z-index 10 wie die Kopfklammer,
   unter dem Fenster-Overlay (50). Der Inhalt bekommt unten so viel Platz,
   wie die Leiste hoch ist, dazu die Sicherheitszone des Geraets. */
@media (max-width: 639.98px) {
  .fp-reiter {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    border-bottom: 0;
    border-top: 1px solid var(--linie);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .fp-reiter-knopf {
    border-bottom: 0;
    border-top: 3px solid transparent;
  }
  .fp-reiter-knopf[aria-selected="true"] { border-top-color: var(--akzent); }
  .fp-inhalt {
    padding-bottom: calc(54px + var(--raum-6) + env(safe-area-inset-bottom, 0px));
  }
}

/* ------------------------------------------------------------------ Inhalt */

.fp-inhalt {
  flex: 1;
  padding: var(--raum-5) var(--fp-rand);
  padding-bottom: max(var(--raum-8), env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--raum-5);
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

/* ------------------------------------------------------------- Fahrtkarte */

.fp-fahrt {
  border: 1px solid var(--linie);
  border-radius: var(--rund-3);
  background: var(--flaeche-karte);
  overflow: hidden;
}

.fp-fahrt-kopf {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  flex-wrap: wrap;
  padding: var(--raum-4) var(--raum-5);
  border-bottom: 1px solid var(--linie);
}

/* Losfahrt ueber der Abholzeit (22.09.2026): Der Fahrer muss wissen, wann
   er losfaehrt, nicht nur, wann er da sein soll. Steht nur mit gepflegter
   Anfahrt - geschaetzt wird nichts. */
.fp-fahrt-los {
  font-size: var(--fp-grad-3);
  font-weight: var(--fett-halb);
  color: var(--schrift-akzent);
  font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
}

/* Abholung unter der Abfahrt in der Wochenzeile (28.09.2026). */
.fp-woche-abholung {
  font-size: var(--fp-grad-1);
  font-weight: var(--fett-normal);
  color: var(--schrift-leise);
  white-space: nowrap;
}

.fp-fahrt-zeit {
  font-size: var(--fp-grad-7);
  font-weight: var(--fett-halb);
  color: var(--schrift-stark);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.fp-fahrt-dauer {
  font-size: var(--fp-grad-2);
  color: var(--schrift-leise);
}

/* Hinweis auf einen nicht uebernommenen Schritt mit Knopf darunter (29.09.2026). */
.fp-wartend-abgewiesen {
  display: grid;
  gap: var(--raum-2);
}

/* Zeitstreifen (28.09.2026): Abfahrt, Abholung, Ankunft mit Wort, die Dauer
   dazwischen auf der Linie; der Punkt, der jetzt zaehlt, in Akzentfarbe. */
.fp-zeiten {
  display: flex;
  align-items: flex-end;
  gap: var(--raum-1);
  margin-top: var(--raum-2);
  font-variant-numeric: tabular-nums;
}

.fp-zeiten-punkt {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  min-width: 0;
}

.fp-zeiten-marke {
  font-size: var(--fp-grad-1);
  color: var(--schrift-leise);
  white-space: nowrap;
}

.fp-zeiten-wert {
  font-size: var(--fp-grad-4);
  font-weight: var(--fett-halb);
  color: var(--schrift-stark);
  line-height: 1.15;
}

.fp-zeiten-punkt-jetzt .fp-zeiten-wert {
  color: var(--schrift-akzent);
}

.fp-zeiten-strecke {
  display: flex;
  flex: 1 1 24px;
  flex-direction: column;
  align-items: center;
  min-width: 24px;
  padding-bottom: 7px;
}

.fp-zeiten-strecke::after {
  content: "";
  display: block;
  width: 100%;
  margin-top: 2px;
  border-top: 2px solid var(--linie-stark);
}

.fp-zeiten-dauer {
  font-size: var(--fp-grad-1);
  color: var(--schrift-leise);
  white-space: nowrap;
}

.fp-fahrt-marken {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  flex-wrap: wrap;
}

.fp-fahrt-koerper {
  padding: var(--raum-5);
  display: flex;
  flex-direction: column;
  gap: var(--raum-5);
}

/* Strecke untereinander, nicht nebeneinander: lange Ortsnamen brechen sonst
   mitten im Wort um. */
.fp-strecke {
  display: flex;
  flex-direction: column;
  gap: var(--raum-1);
}

.fp-strecke-ort {
  font-size: var(--fp-grad-5);
  font-weight: var(--fett-mittel);
  color: var(--schrift-stark);
  line-height: var(--zeile-eng);
}

.fp-strecke-pfeil {
  width: 20px;
  height: 20px;
  color: var(--schrift-leise);
  margin-left: 2px;
}

.fp-block-titel {
  font-size: var(--fp-grad-1);
  font-weight: var(--fett-halb);
  color: var(--schrift-leise);
  margin-bottom: var(--raum-2);
}

.fp-zeile {
  display: flex;
  align-items: baseline;
  gap: var(--raum-3);
  padding: var(--raum-2) 0;
  border-bottom: 1px solid var(--linie-leise);
}
.fp-zeile:last-child { border-bottom: none; }

.fp-zeile-marke {
  flex: none;
  width: 40%;
  max-width: 190px;
  font-size: var(--fp-grad-2);
  color: var(--schrift-leise);
}

.fp-zeile-wert {
  flex: 1;
  min-width: 0;
  font-size: var(--fp-grad-3);
  color: var(--schrift-stark);
}

/* --------------------------------------------------------------- Flugblock */

.fp-flug {
  border: 1px solid var(--info-linie);
  border-radius: var(--rund-3);
  background: var(--info-flaeche);
  padding: var(--raum-4);
}

.fp-flug-kopf {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  flex-wrap: wrap;
  margin-bottom: var(--raum-3);
}

.fp-flug-nummer {
  font-family: var(--schriftfamilie-fest);
  font-size: var(--fp-grad-5);
  font-weight: var(--fett-halb);
  color: var(--info-schrift);
  letter-spacing: 0.04em;
}

.fp-flug-richtung {
  font-size: var(--fp-grad-2);
  color: var(--info-schrift);
}

.fp-flug-felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--raum-3);
}

.fp-flug-feld {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Beschriftung ohne opacity, wie bei .fp-taste-haupt:disabled: mit 0.8
   kam limou auf 4.16:1 (14px). Leiser als der Wert wirkt sie ueber Grad,
   Grossbuchstaben und Gewicht. info-schrift auf info-flaeche, gerechnet
   15.09.2026: limou 6.40:1, VHV 8.62:1 (Portal nur hell). */
.fp-flug-marke {
  font-size: var(--fp-grad-1);
  font-weight: var(--fett-normal);
  color: var(--info-schrift);
}

.fp-flug-wert {
  font-size: var(--fp-grad-5);
  font-weight: var(--fett-halb);
  color: var(--info-schrift);
  font-variant-numeric: tabular-nums;
}

/* Der Zeitpunkt der letzten Pflege. Steht IMMER unter den Flugangaben -
   ein Stand von gestern darf nicht wie ein Live-Stand aussehen. */
.fp-flug-stand {
  margin-top: var(--raum-3);
  padding-top: var(--raum-3);
  border-top: 1px solid var(--info-linie);
  font-size: var(--fp-grad-2);
  color: var(--info-schrift);
}

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

.fp-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(--fp-grad-2);
}
.fp-meldung svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.fp-meldung-warnung {
  background: var(--warn-flaeche);
  border-color: var(--warn-linie);
  color: var(--warn-schrift);
}
.fp-meldung-gefahr {
  background: var(--gefahr-flaeche);
  border-color: var(--gefahr-linie);
  color: var(--gefahr-schrift);
}
.fp-meldung-info {
  background: var(--info-flaeche);
  border-color: var(--info-linie);
  color: var(--info-schrift);
}
/* Rueckmeldung nach dem Speichern. Gerechnet aus den Tokenwerten:
   gut-schrift auf gut-flaeche 5.99:1. */
.fp-meldung-gut {
  background: var(--gut-flaeche);
  border-color: var(--gut-linie);
  color: var(--gut-schrift);
}

/* ------------------------------------------------------------- Kartenfuss */

.fp-fahrt-fuss {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--raum-3);
  padding: var(--raum-4) var(--raum-5);
  border-top: 1px solid var(--linie);
  background: var(--flaeche-vertieft);
}

.fp-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--raum-2);
  min-height: var(--fp-flaeche);
  padding: 0 var(--raum-4);
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund-2);
  background: var(--flaeche-karte);
  color: var(--schrift-normal);
  font-size: var(--fp-grad-3);
  font-weight: var(--fett-mittel);
  text-align: center;
}
.fp-knopf:hover { background: var(--flaeche-vertieft); text-decoration: none; }
.fp-knopf svg { width: 19px; height: 19px; flex: none; }

/* Hauptknopf in --akzent mit --akzent-schrift, Gewicht 600, Rundung
   --rund-2 (limou 4px, VHV 3px). Schrift auf der Flaeche / auf dem Hover
   (--akzent-schwach): limou Weiss auf Petrol 7.83 / 10.44, VHV dunkle
   Schrift auf Orange 5.49 / 6.50 (Weiss kaeme bei VHV auf 3.13). */
.fp-knopf-haupt {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--akzent-schrift);
  font-weight: var(--fett-halb);
}
.fp-knopf-haupt:hover { background: var(--akzent-schwach); border-color: var(--akzent-schwach); }

/* Deaktiviert wie bei der Anmeldetaste: die Flaeche wird gedaempft, nicht
   das ganze Element. Gerechnet aus den Tokenwerten: ton-700 auf ton-200
   5.77:1, schrift-leise auf flaeche-still 4.95:1. */
.fp-knopf:disabled {
  background: var(--flaeche-still);
  border-color: var(--linie);
  color: var(--schrift-leise);
  cursor: default;
}
.fp-knopf-haupt:disabled,
.fp-knopf-haupt:disabled:hover {
  background: var(--ton-200);
  border-color: var(--ton-200);
  color: var(--ton-700);
}

/* Kennzeichen in fester Laufweite, damit sich O und 0 unterscheiden. */
.fp-kennzeichen {
  font-family: var(--schriftfamilie-fest);
  color: var(--schrift-stark);
}

/* ------------------------------------------------------------ Wochenliste */

.fp-tag {
  border: 1px solid var(--linie);
  border-radius: var(--rund-3);
  background: var(--flaeche-karte);
  overflow: hidden;
}

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

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

.fp-tag-anzahl {
  font-size: var(--fp-grad-2);
  color: var(--schrift-leise);
  margin-left: auto;
}

.fp-tag-heute {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--raum-2);
  border-radius: var(--rund-1);
  background: var(--info-flaeche);
  border: 1px solid var(--info-linie);
  color: var(--info-schrift);
  font-size: var(--fp-grad-1);
  font-weight: var(--fett-halb);
}

.fp-woche-zeile {
  display: flex;
  align-items: center;
  gap: var(--raum-4);
  width: 100%;
  min-height: 64px;
  padding: var(--raum-3) var(--raum-5);
  border-bottom: 1px solid var(--linie-leise);
  text-align: left;
}
.fp-woche-zeile:last-child { border-bottom: none; }
.fp-woche-zeile:hover { background: var(--flaeche-vertieft); }

.fp-woche-zeit {
  flex: none;
  display: flex;
  flex-direction: column;
  width: 62px;
  font-size: var(--fp-grad-4);
  font-weight: var(--fett-halb);
  color: var(--schrift-stark);
  font-variant-numeric: tabular-nums;
}

.fp-woche-strecke {
  flex: 1;
  min-width: 0;
  font-size: var(--fp-grad-3);
  color: var(--schrift-normal);
}

/* Blaettern ueber Wochen: Titel mit KW und Zeitraum, darunter die Knoepfe.
   Unter 480px brechen die Knoepfe in zwei Reihen, jeder bleibt 48px hoch. */
.fp-woche-steuerung {
  display: grid;
  gap: var(--raum-3);
  padding: var(--raum-4) var(--raum-5);
  border: 1px solid var(--linie);
  border-radius: var(--rund-3);
  background: var(--flaeche-karte);
}

.fp-woche-titel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--raum-2) var(--raum-4);
  font-size: var(--fp-grad-3);
  color: var(--schrift-normal);
}
.fp-woche-titel strong {
  font-size: var(--fp-grad-4);
  color: var(--schrift-stark);
}
.fp-woche-summe {
  margin-left: auto;
  color: var(--schrift-leise);
}

.fp-woche-knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-2);
}

.fp-woche-sprung-marke {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  margin-left: auto;
  font-size: var(--fp-grad-2);
  color: var(--schrift-leise);
}

@media (max-width: 559px) {
  .fp-woche-knoepfe {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 56px;
  }
  /* Nur der Pfeil sichtbar, der Text bleibt vorlesbar (wie .nur-vorlesen) */
  .fp-woche-pfeil span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .fp-woche-knoepfe .fp-knopf {
    justify-content: center;
    padding-inline: var(--raum-2);
  }
  .fp-woche-sprung-marke {
    grid-column: 1 / -1;
    margin-left: 0;
  }
  .fp-woche-sprung {
    flex: 1;
    min-width: 0;
  }
}

.fp-woche-sprung {
  min-height: 48px;
  padding: 0 var(--raum-3);
  border: 1px solid var(--ton-550);
  border-radius: var(--rund-2);
  background: var(--flaeche-karte);
  color: var(--schrift-stark);
  font: inherit;
  font-size: var(--fp-grad-3);
}

.fp-woche-frei {
  padding: var(--raum-4) var(--raum-5);
  font-size: var(--fp-grad-3);
  color: var(--schrift-leise);
}

/* Ausgeklappte Karte innerhalb der Wochenliste. */
.fp-woche-detail {
  padding: 0 var(--raum-4) var(--raum-4);
}

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

.fp-abzeichen {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-1);
  min-height: 28px;
  padding: 0 var(--raum-3);
  border-radius: var(--rund-1);
  border: 1px solid var(--neutral-linie);
  background: var(--neutral-flaeche);
  color: var(--neutral-schrift);
  font-size: var(--fp-grad-1);
  font-weight: var(--fett-halb);
  white-space: nowrap;
}
.fp-abzeichen-gut { background: var(--gut-flaeche); border-color: var(--gut-linie); color: var(--gut-schrift); }
.fp-abzeichen-info { background: var(--info-flaeche); border-color: var(--info-linie); color: var(--info-schrift); }
.fp-abzeichen-warnung { background: var(--warn-flaeche); border-color: var(--warn-linie); color: var(--warn-schrift); }
.fp-abzeichen-gefahr { background: var(--gefahr-flaeche); border-color: var(--gefahr-linie); color: var(--gefahr-schrift); }

/* -------------------------------------------------------------- Kennzahlen */

.fp-zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--raum-4);
}

.fp-zahl {
  padding: var(--raum-4);
  border: 1px solid var(--linie);
  border-radius: var(--rund-3);
  background: var(--flaeche-karte);
}

.fp-zahl-marke {
  font-size: var(--fp-grad-1);
  color: var(--schrift-leise);
  font-weight: var(--fett-halb);
}

.fp-zahl-wert {
  font-size: var(--fp-grad-6);
  font-weight: var(--fett-halb);
  color: var(--schrift-stark);
  line-height: 1.1;
  margin-top: var(--raum-1);
  font-variant-numeric: tabular-nums;
}

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

.fp-leer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--raum-3);
  padding: var(--raum-12) var(--raum-5);
  text-align: center;
  border: 1px solid var(--linie);
  border-radius: var(--rund-3);
  background: var(--flaeche-karte);
}

/* Zeichen, Grenze 3:1. ton-300 kam auf der Karte auf 1.98:1 (limou). */
.fp-leer-zeichen { width: 44px; height: 44px; color: var(--schrift-leise); }

.fp-leer-titel {
  font-size: var(--fp-grad-5);
  font-weight: var(--fett-halb);
  color: var(--schrift-stark);
}

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

/* ------------------------------------------------------------------ Karte */

.fp-karte {
  border: 1px solid var(--linie);
  border-radius: var(--rund-3);
  background: var(--flaeche-karte);
  overflow: hidden;
}

.fp-karte-kopf {
  padding: var(--raum-4) var(--raum-5);
  border-bottom: 1px solid var(--linie);
  font-size: var(--fp-grad-4);
  font-weight: var(--fett-halb);
  color: var(--schrift-stark);
}

.fp-karte-koerper { padding: var(--raum-4) var(--raum-5); }

/* Sichtbarer Tastaturfokus, auch am Tablet mit angesteckter Tastatur. */
:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
  border-radius: var(--rund-1);
}
:focus:not(:focus-visible) { outline: none; }

button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
a { color: var(--schrift-akzent); text-decoration: none; }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* Ab Tablet quer: die Fahrtkarten duerfen nebeneinander. */
@media (min-width: 900px) {
  .fp-inhalt { max-width: 1100px; }
  .fp-zeile-marke { max-width: 220px; }
}

/* ---------------------------------------------------------- Positionsliste
 * Besorgungen und Transporte tragen eine Liste. Abgehakt wird sie mit dem
 * FINGER, oft im Stehen neben dem Wagen. Deshalb sitzt das 28px grosse
 * Ankreuzfeld in einer 48px hohen Flaeche: wer danebengreift, trifft immer
 * noch dieselbe Zeile statt der darueber.
 */

/* Der Umschalter auf border-box steht jetzt ganz oben und gilt fuer die
   ganze Seite; die frueher hier stehende Teilloesung nur fuer diese beiden
   Bloecke ist damit ueberfluessig. */

.fp-liste {
  border: 1px solid var(--linie);
  border-radius: var(--rund-3);
  background: var(--flaeche-vertieft);
  overflow: hidden;
}

.fp-liste-kopf {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  flex-wrap: wrap;
  padding: var(--raum-3) var(--raum-4);
  border-bottom: 1px solid var(--linie);
}

.fp-liste-stand {
  font-size: var(--fp-grad-3);
  font-weight: var(--fett-halb);
  color: var(--schrift-stark);
  font-variant-numeric: tabular-nums;
}

/* Der Balken traegt keine Aussage, die nicht auch daneben steht - er ist
   das schnelle Bild zur Zahl, nicht ihr Ersatz. */
.fp-liste-balken {
  flex: 1;
  min-width: 120px;
  height: 10px;
  border-radius: var(--rund-voll);
  background: var(--flaeche-still);
  overflow: hidden;
}

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

.fp-liste-hinweis {
  padding: var(--raum-3) var(--raum-4);
  border-bottom: 1px solid var(--linie-leise);
  font-size: var(--fp-grad-3);
  color: var(--schrift-normal);
}

/* Die Belegpflicht wird sonst vergessen. Sie steht deshalb als eigene,
   abgesetzte Zeile ueber der Liste und nicht als Nebensatz im Hinweis.
   Gemessen: warn-schrift auf warn-flaeche ergibt 5.28:1. */
.fp-liste-beleg {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  padding: var(--raum-3) var(--raum-4);
  border-bottom: 1px solid var(--warn-linie);
  background: var(--warn-flaeche);
  color: var(--warn-schrift);
  font-size: var(--fp-grad-3);
  font-weight: var(--fett-mittel);
}
.fp-liste-beleg svg { width: 20px; height: 20px; flex: none; }

.fp-liste-zeilen {
  display: flex;
  flex-direction: column;
  background: var(--flaeche-karte);
}

/* ------------------------------------------------------------- Position */

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

/* Der Schalter ist die Beruehrflaeche, das Ankreuzfeld sitzt darin. */
.fp-position-schalter {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--fp-flaeche);
  min-height: var(--fp-flaeche);
  align-self: flex-start;
  cursor: pointer;
}

.fp-position-kasten {
  width: 28px;
  height: 28px;
  margin: 0;
  accent-color: var(--akzent);
  cursor: pointer;
}
.fp-position-kasten:disabled { cursor: default; }

/* 11px oben setzt die erste Textzeile auf dieselbe Hoehe wie die Mitte des
   48px hohen Schalters daneben. */
.fp-position-koerper {
  flex: 1;
  min-width: 0;
  padding: 11px 0;
}

.fp-position-text {
  font-size: var(--fp-grad-3);
  color: var(--schrift-stark);
  line-height: var(--zeile-normal);
}

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

/* Erledigt tritt zurueck, verschwindet aber nicht: schrift-leise misst auf
   der Kartenflaeche 5.37:1. Was abgehakt ist, muss nachher noch lesbar
   sein - sonst laesst sich nicht pruefen, was besorgt wurde. */
.fp-position-erledigt .fp-position-text {
  text-decoration: line-through;
  color: var(--schrift-leise);
}
.fp-position-erledigt .fp-position-menge { color: var(--schrift-leise); }

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

/* Eine Abweichung ist der Fall, den eine blosse Haken-Liste verschweigt:
   besorgt, aber anders. Sie bleibt deshalb hervorgehoben - auch dann, wenn
   die Position darueber schon durchgestrichen ist. */
.fp-position-abweichung {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--raum-2);
  margin-top: var(--raum-2);
  padding: var(--raum-2) var(--raum-3);
  border: 1px solid var(--warn-linie);
  border-radius: var(--rund-2);
  background: var(--warn-flaeche);
  color: var(--warn-schrift);
  font-size: var(--fp-grad-2);
}
.fp-position-erledigt .fp-position-abweichung { text-decoration: none; }

.fp-position-abweichung-marke {
  font-size: var(--fp-grad-1);
  font-weight: var(--fett-halb);
}

/* Auch der kleine Knopf bleibt eine Fingerflaeche. */
.fp-position-knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  min-height: var(--fp-flaeche);
  margin-top: var(--raum-1);
  padding: 0 var(--raum-3);
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund-2);
  background: var(--flaeche-karte);
  color: var(--schrift-normal);
  font-size: var(--fp-grad-2);
  font-weight: var(--fett-mittel);
}
.fp-position-knopf:hover { background: var(--flaeche-vertieft); }
.fp-position-knopf svg { width: 17px; height: 17px; flex: none; }

/* --------------------------------------------- Offene Listen am Morgen
   Die Zeile ganz oben im Reiter "Heute". Gemessen: info-schrift auf
   info-flaeche ergibt 7.41:1. */

.fp-liste-offen {
  display: flex;
  align-items: flex-start;
  gap: var(--raum-3);
  padding: var(--raum-4);
  border: 1px solid var(--info-linie);
  border-radius: var(--rund-3);
  background: var(--info-flaeche);
  color: var(--info-schrift);
}
.fp-liste-offen svg { width: 22px; height: 22px; flex: none; margin-top: 2px; }

.fp-liste-offen-zahl {
  font-size: var(--fp-grad-4);
  font-weight: var(--fett-halb);
  font-variant-numeric: tabular-nums;
}

.fp-liste-offen-text {
  font-size: var(--fp-grad-2);
  margin-top: 2px;
}

/* Bei 390px hat der Balken neben der Zahl keinen Platz mehr - dann steht
   er in einer eigenen Zeile, statt auf 20px zusammenzuschrumpfen. */
@media (max-width: 420px) {
  .fp-liste-balken { flex: 1 0 100%; }
}

/* ------------------------------------------------------------- Kennzahlen
   Zusatzzeile unter einer Kennzahl, etwa "an 3 Tagen erfasst". */

.fp-zahl-fuss {
  font-size: var(--fp-grad-1);
  color: var(--schrift-leise);
  margin-top: var(--raum-1);
}

/* ------------------------------------------------------ Karten mit Aktion */

/* Karte Benachrichtigungen (22.09.2026): Text, Meldung, Knopf untereinander. */
.fp-benachrichtigung {
  display: grid;
  gap: var(--raum-3);
  justify-items: start;
}
.fp-benachrichtigung .fp-karte-text { margin: 0; }
.fp-benachrichtigung .fp-meldung { justify-self: stretch; }

/* Hinweis oben im Reiter Heute, bis das Geraet angemeldet ist (22.09.2026). */
.fp-push-hinweis {
  display: grid;
  gap: var(--raum-2);
  margin-bottom: var(--raum-3);
}
.fp-push-hinweis-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2);
}

.fp-karte-text {
  margin: 0 0 var(--raum-3);
  font-size: var(--fp-grad-3);
  color: var(--schrift-normal);
}

.fp-erklaerung {
  margin: var(--raum-3) 0 var(--raum-4);
  padding-left: var(--raum-5);
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
  font-size: var(--fp-grad-2);
  color: var(--schrift-normal);
}

.fp-karte-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-3);
  margin-top: var(--raum-4);
}

/* ---------------------------------------------------------------- Fenster
 * Overlay fuer Statuswechsel, Verlaengerung, Schaden und Erinnerung.
 * Am Handy haengt es unten wie ein Blatt, weil der Daumen dort sitzt; ab
 * 640px steht es in der Mitte. Der Grund darunter ist ton-900 zu 60 Prozent;
 * Browser ohne color-mix bekommen ihn deckend, das Fenster bleibt lesbar.
 */

.fp-fenster-grund {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--raum-4) var(--fp-rand) 0;
  background: var(--ton-900);
  background: color-mix(in srgb, var(--ton-900) 60%, transparent);
}

.fp-fenster {
  width: 100%;
  max-width: 640px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--flaeche-karte);
  border-radius: var(--rund-4) var(--rund-4) 0 0;
  box-shadow: var(--schatten-3);
  overflow: hidden;
}
.fp-fenster:focus { outline: none; }

@media (min-width: 640px) {
  .fp-fenster-grund { align-items: center; padding: var(--raum-6) var(--fp-rand); }
  .fp-fenster { border-radius: var(--rund-4); }
}

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

.fp-fenster-kopftext { flex: 1; min-width: 0; }

.fp-fenster-titel {
  margin: 0;
  font-size: var(--fp-grad-5);
  font-weight: var(--fett-halb);
  line-height: var(--zeile-eng);
  color: var(--schrift-stark);
}

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

.fp-fenster-zu {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--fp-flaeche);
  height: var(--fp-flaeche);
  margin: calc(-1 * var(--raum-2)) calc(-1 * var(--raum-2)) 0 0;
  border-radius: var(--rund-2);
  color: var(--schrift-normal);
}
.fp-fenster-zu:hover { background: var(--flaeche-vertieft); }
.fp-fenster-zu svg { width: 22px; height: 22px; }

/* Nur der Koerper rollt. Kopf und Knoepfe bleiben stehen, auch wenn die
   Schadensmeldung laenger ist als der Bildschirm. */
.fp-fenster-koerper {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--raum-5);
  display: flex;
  flex-direction: column;
  gap: var(--raum-5);
}

.fp-fenster-fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--raum-3);
  padding: var(--raum-4) var(--raum-5);
  padding-bottom: max(var(--raum-4), env(safe-area-inset-bottom));
  border-top: 1px solid var(--linie);
  background: var(--flaeche-vertieft);
}
.fp-fenster-fuss .fp-knopf { flex: 1 1 160px; }

.fp-fenster-text {
  margin: 0;
  font-size: var(--fp-grad-4);
  color: var(--schrift-stark);
}

/* Gerechnet aus den Tokenwerten: schrift-leise auf der Kartenflaeche 5.76:1. */
.fp-fenster-leise {
  margin: 0;
  font-size: var(--fp-grad-2);
  color: var(--schrift-leise);
}

/* ----------------------------------------------------------------- Felder */

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

.fp-feld-marke {
  padding: 0;
  font-size: var(--fp-grad-3);
  font-weight: var(--fett-halb);
  color: var(--schrift-stark);
}

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

/* Gerechnet aus den Tokenwerten: gefahr-schrift auf gefahr-flaeche 7.35:1. */
.fp-feld-fehler {
  padding: var(--raum-3) var(--raum-4);
  border: 1px solid var(--gefahr-linie);
  border-radius: var(--rund-2);
  background: var(--gefahr-flaeche);
  color: var(--gefahr-schrift);
  font-size: var(--fp-grad-3);
}

/* Der Rand eines Eingabefelds muss als Grenze erkennbar sein. linie-stark
   misst auf Weiss nur 1.86:1; ton-550 haelt 4.76:1 (gerechnet). */
.fp-eingabe {
  width: 100%;
  min-height: var(--fp-flaeche);
  padding: var(--raum-2) var(--raum-3);
  border: 1px solid var(--ton-550);
  border-radius: var(--rund-2);
  background: var(--flaeche-karte);
  color: var(--schrift-stark);
  font: inherit;
  font-size: var(--fp-grad-3);
  line-height: var(--zeile-normal);
}
textarea.fp-eingabe { resize: vertical; }

/* ------------------------------------------------------------ Wahlflaechen
 * Das Optionsfeld liegt unsichtbar in der Flaeche; gezeichnet wird die
 * Flaeche daneben. Gewaehlt traegt sie das Akzentorange mit dunkler Schrift
 * (5.49:1 laut tokens.css) und wird zusaetzlich fett - der Zustand haengt
 * damit nicht an der Farbe allein.
 */

.fp-wahl {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.fp-wahl > legend { margin-bottom: var(--raum-2); }

.fp-wahl-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--raum-2);
}

.fp-wahl-option {
  position: relative;
  display: block;
}

.fp-wahl-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.fp-wahl-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--fp-flaeche);
  padding: var(--raum-2) var(--raum-3);
  border: 1px solid var(--ton-550);
  border-radius: var(--rund-2);
  background: var(--flaeche-karte);
  color: var(--schrift-stark);
  font-size: var(--fp-grad-3);
  font-weight: var(--fett-mittel);
  line-height: var(--zeile-eng);
  text-align: center;
  cursor: pointer;
}
.fp-wahl-option span:hover { background: var(--flaeche-vertieft); }

.fp-wahl-option input:checked + span,
.fp-wahl-option input:checked + span:hover {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--akzent-schrift);
  font-weight: var(--fett-stark);
}

.fp-wahl-option input:focus-visible + span {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ Fotos */

.fp-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--raum-2);
}

.fp-foto {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--linie);
  border-radius: var(--rund-2);
  background: var(--flaeche-still);
  overflow: hidden;
}

.fp-foto-bild {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fp-foto-weg {
  position: absolute;
  top: var(--raum-1);
  right: var(--raum-1);
  display: grid;
  place-items: center;
  width: var(--fp-flaeche);
  height: var(--fp-flaeche);
  border: 1px solid var(--ton-550);
  border-radius: var(--rund-voll);
  background: var(--flaeche-karte);
  color: var(--schrift-stark);
}
.fp-foto-weg svg { width: 20px; height: 20px; }

/* ------------------------------------------------------- Ueberschneidungen */

.fp-konflikte {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
}

.fp-konflikt {
  padding: var(--raum-3) var(--raum-4);
  border: 1px solid var(--gefahr-linie);
  border-radius: var(--rund-2);
  background: var(--flaeche-karte);
}

.fp-konflikt-titel {
  font-size: var(--fp-grad-4);
  font-weight: var(--fett-halb);
  color: var(--schrift-stark);
  font-variant-numeric: tabular-nums;
}

.fp-konflikt-text {
  margin-top: 2px;
  font-size: var(--fp-grad-2);
  color: var(--schrift-normal);
}

/* --------------------------------------------------------------- Standort
   Gerechnet aus den Tokenwerten: schrift-leise auf flaeche-vertieft 5.56:1. */

.fp-standort {
  display: flex;
  flex-direction: column;
  gap: var(--raum-3);
  padding: var(--raum-4);
  border: 1px solid var(--linie);
  border-radius: var(--rund-3);
  background: var(--flaeche-vertieft);
}
.fp-standort .fp-block-titel { margin-bottom: 0; }

.fp-standort-stand {
  font-size: var(--fp-grad-3);
  font-weight: var(--fett-mittel);
  color: var(--schrift-stark);
}

.fp-standort-hinweis {
  font-size: var(--fp-grad-2);
  color: var(--schrift-leise);
}

/* ----------------------------------------------------------- Erinnerungen
   Gerechnet aus den Tokenwerten: warn-schrift auf der Kartenflaeche 6.30:1. */

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

.fp-erinnerung-text {
  flex: 1 1 240px;
  min-width: 0;
}

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

.fp-erinnerung-fahrzeug {
  margin-top: 2px;
  font-size: var(--fp-grad-2);
  color: var(--schrift-normal);
}

.fp-erinnerung-stand {
  margin-top: var(--raum-1);
  font-size: var(--fp-grad-2);
  color: var(--warn-schrift);
}

/* ---------------------------------------------------------- Dienst-Dialog
 * dienst.js oeffnet Km-Abfrage, Dienstende und Abwesenheit im eingebauten
 * <dialog>: Abdunklung, Fokusfalle und Escape kommen vom Browser. Gestaltet
 * wie .fp-fenster, damit beide Arten von Fenster im Portal gleich aussehen.
 * Der Grund dahinter ist ton-900 zu 60 Prozent, ohne color-mix deckend.
 * Kontraste gerechnet aus den Tokenwerten, hell / dunkel:
 *   schrift-stark auf flaeche-karte   8.14:1 / 11.23:1
 *   schrift-normal auf flaeche-karte  5.76:1 /  8.61:1
 *   schrift-leise auf flaeche-karte   5.76:1 /  5.05:1
 */

.fp-dialog {
  width: min(640px, calc(100vw - 2 * var(--fp-rand)));
  max-width: none;
  max-height: calc(100vh - 2 * var(--fp-rand));
  padding: 0;
  border: 0;
  border-radius: var(--rund-4);
  background: var(--flaeche-karte);
  color: var(--schrift-normal);
  box-shadow: var(--schatten-3);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.fp-dialog::backdrop {
  background: var(--ton-900);
  background: color-mix(in srgb, var(--ton-900) 60%, transparent);
}

.fp-dialog-kopf {
  padding: var(--raum-4) var(--raum-5);
  border-bottom: 1px solid var(--linie);
}

.fp-dialog-titel {
  font-size: var(--fp-grad-5);
  font-weight: var(--fett-halb);
  line-height: var(--zeile-eng);
  color: var(--schrift-stark);
}

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

.fp-dialog-koerper {
  padding: var(--raum-5);
  display: flex;
  flex-direction: column;
  gap: var(--raum-4);
}

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

/* Laufend aktualisierte Liste der betroffenen Fahrten. */
.fp-dialog-abschnitt {
  display: flex;
  flex-direction: column;
  gap: var(--raum-3);
}

/* Die Knoepfe bleiben beim Rollen am unteren Rand des Dialogs stehen. */
.fp-dialog-fuss {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-3);
  padding: var(--raum-4) var(--raum-5);
  padding-bottom: max(var(--raum-4), env(safe-area-inset-bottom));
  border-top: 1px solid var(--linie);
  background: var(--flaeche-vertieft);
}
.fp-dialog-fuss .fp-knopf { flex: 1 1 140px; }

/* Zwei Felder nebeneinander (erster und letzter Tag, von und bis); bei
   390px stehen sie untereinander. */
.fp-feld-paar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--raum-3);
}

/* Kilometerstand am Tagesende: gross, weil er vom Tacho abgelesen und am
   Tablet mit dem Daumen getippt wird. */
.fp-eingabe-gross {
  min-height: var(--fp-taste);
  font-size: var(--fp-grad-6);
  font-weight: var(--fett-halb);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* Umschalter Ganztags / Stundenweise. Der gewaehlte Knopf traegt
   fp-knopf-haupt und aria-pressed; zusaetzlich fett, damit der Zustand nicht
   an der Farbe allein haengt. Eigene Klasse, weil .fp-wahl die Wahlflaechen
   mit Optionsfeld gestaltet. */
.fp-umfang {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--raum-2);
}
.fp-umfang [aria-pressed='true'] { font-weight: var(--fett-stark); }

/* Dienstleiste oben im Reiter Heute. Der farbige Rand steht nur zusaetzlich
   zum Text "Im Dienst seit" bzw. "In Pause seit", er traegt keine eigene
   Aussage. */
/* Randfarben gerechnet auf flaeche-karte, hell / dunkel: ton-550 4.76:1 /
   2.56:1, gut-schrift 6.84:1 / 7.54:1, warn-schrift 6.30:1 / 5.97:1. Die
   Linientoene (gut-linie 1.50:1, warn-linie 1.30:1 im dunklen Thema) waeren
   neben der Karte kaum zu sehen. */
.fp-dienst { border-left: 4px solid var(--ton-550); }
.fp-dienst-laeuft { border-left-color: var(--gut-schrift); }
.fp-dienst-pause { border-left-color: var(--warn-schrift); }

.fp-dienst-text {
  margin: var(--raum-1) 0 0;
  font-size: var(--fp-grad-2);
  color: var(--schrift-leise);
}

/* Vermerke: keine Rechtsberatung, Daten nur auf diesem Geraet. */
.fp-fussnote {
  margin: 0;
  font-size: var(--fp-grad-2);
  color: var(--schrift-leise);
}

/* ------------------------------------------------------------- Vorschlag
 * Karte fuer Hinweise, die das Portal von sich aus zeigt: "Naechste Fahrt
 * in 25 Min", "Dienst beenden und Km eintragen", Pause, faellige
 * Erinnerung. Aufbau:
 *   .fp-vorschlag
 *     .fp-vorschlag-titel   was ansteht
 *     .fp-vorschlag-text    was zu tun ist
 *     .fp-vorschlag-grund   worauf der Hinweis beruht (Pflicht, sichtbar)
 *     .fp-vorschlag-aktion  Behaelter fuer einen oder zwei .fp-knopf
 * Die Karte ist Ruhezustand, keine Einblendung: sie steht, sobald sie im
 * Dokument ist. Die Leiste links traegt keine eigene Aussage.
 * Kontraste gerechnet, hell / dunkel, jeweils auf flaeche-karte:
 *   Titel schrift-stark    8.14:1 / 11.23:1
 *   Text  schrift-normal   5.76:1 /  8.61:1
 *   Grund schrift-leise    5.76:1 /  5.05:1
 *   Leiste                 5.18:1 /  6.06:1 (siehe --fp-vorschlag-leiste)
 */

.fp-vorschlag {
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
  padding: var(--raum-4) var(--raum-5);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--fp-vorschlag-leiste);
  border-radius: var(--rund-2);
  background: var(--flaeche-karte);
  color: var(--schrift-normal);
}

.fp-vorschlag-titel {
  margin: 0;
  font-size: var(--fp-grad-4);
  font-weight: var(--gewicht-abschnitt, 700);
  line-height: var(--zeile-eng);
  color: var(--schrift-stark);
  font-variant-numeric: tabular-nums;
}

.fp-vorschlag-text {
  margin: 0;
  font-size: var(--fp-grad-3);
  color: var(--schrift-normal);
  font-variant-numeric: tabular-nums;
}

/* Die Begruendung steht abgesetzt unter einer leisen Linie, damit sie als
   Grundlage erkennbar ist und nicht als Teil der Aufforderung. */
.fp-vorschlag-grund {
  margin: 0;
  padding-top: var(--raum-2);
  border-top: 1px solid var(--linie-leise);
  font-size: var(--fp-grad-2);
  color: var(--schrift-leise);
}

.fp-vorschlag-aktion {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-3);
  margin-top: var(--raum-2);
}

/* Bei 390px steht jeder Knopf in voller Breite, am Tablet nebeneinander. */
.fp-vorschlag-aktion .fp-knopf { flex: 1 1 200px; }

/* Ton des Hinweises als Leiste links (data-ton aus dienst.hinweisKarte).
   'info' behaelt --fp-vorschlag-leiste. Grafik, Grenze 3:1, gerechnet gegen
   die Karte innen und den Grund aussen:
     limou warnung  hell 7.30 / 6.51   dunkel 8.55 / 9.51
     limou gefahr   hell 7.72 / 6.88   dunkel 8.58 / 9.54
     VHV   warnung  hell 6.30 / 5.82   dunkel 5.97 / 7.63
     VHV   gefahr   hell 8.63 / 7.98   dunkel 6.05 / 7.74
   Die Leiste allein traegt keine Aussage: Titel und Text sagen, was ansteht. */
.fp-vorschlag[data-ton="warnung"] { border-left-color: var(--warn-schrift); }
.fp-vorschlag[data-ton="gefahr"] { border-left-color: var(--gefahr-schrift); }

/* Pausenhinweis in der Dienstleiste, abgesetzt vom Stand darueber. */
.fp-dienst-hinweis { margin-top: var(--raum-4); }

/* ---------------------------------------------------------- Neue Fassung
 * Hinweis ueber dem Portal, wenn installation.updateBereit() meldet. Steht
 * im Fluss vor #fp, nicht fest am Rand: er verdeckt weder Kopfzeile noch
 * Tastenfeld. Neu geladen wird nur auf den Knopf. Farben info-schrift auf
 * info-flaeche, Kontraste siehe Messung im Bericht zu dieser Aenderung.
 */

.fp-fassung {
  padding: var(--raum-3) var(--fp-rand);
  padding-top: max(var(--raum-3), env(safe-area-inset-top));
  border-bottom: 1px solid var(--info-linie);
  background: var(--info-flaeche);
  color: var(--info-schrift);
}

.fp-fassung-innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-3) var(--raum-4);
  max-width: 1100px;
  margin: 0 auto;
}

.fp-fassung-text {
  flex: 1 1 220px;
  min-width: 0;
}

.fp-fassung-titel {
  font-size: var(--fp-grad-3);
  font-weight: var(--fett-halb);
}

.fp-fassung-zusatz {
  font-size: var(--fp-grad-2);
}

.fp-fassung .fp-knopf { flex: 0 0 auto; }

/* ------------------------------------------------------ Als App installieren
 * Ruhiger Bereich unten auf der Anmeldeseite, unter dem Fuss. Keine Flaeche,
 * keine Akzentfarbe: er soll die Anmeldung nicht ueberstimmen. Der Verweis
 * ist unterstrichen, weil er sonst nur ueber die Farbe vom Text abwiche.
 */

.fp-installation {
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
  margin-top: var(--raum-6);
  padding-top: var(--raum-5);
  border-top: 1px solid var(--linie);
}

.fp-installation-titel {
  margin: 0;
  font-size: var(--fp-grad-3);
  font-weight: var(--fett-halb);
  color: var(--schrift-normal);
}

.fp-installation-text {
  margin: 0;
  font-size: var(--fp-grad-2);
  color: var(--schrift-normal);
}

.fp-installation-leise {
  margin: 0;
  font-size: var(--fp-grad-2);
  color: var(--schrift-leise);
}

.fp-installation-aktion {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-3);
  margin: var(--raum-1) 0;
}

.fp-installation-verweis {
  margin: 0;
  font-size: var(--fp-grad-2);
}

/* Eigene Zeile mit Fingerhoehe, damit der Verweis auch am Handy sicher
   getroffen wird. */
.fp-installation-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--fp-flaeche);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* ------------------------------------------------------------- Jetzt-Karte
 * Massnahme G2 (15.09.2026): die Fahrt, die jetzt zaehlt, steht im Reiter
 * "Heute" zuerst, mit dem Hauptknopf in Tastenhoehe. Aufbau:
 *   .fp-fahrt.fp-jetzt
 *     .fp-fahrt-kopf        Vorzeile "Jetzt" / "Naechste Fahrt", Uhrzeit gross
 *     .fp-fahrt-koerper     Strecke, Auftrag, Flug als Zeile, Hinweis
 *     .fp-jetzt-aktionen    Hauptknopf (64px), darunter .fp-jetzt-neben
 *     details.fp-mehr       Flug im Ganzen, Standort, Liste, Wuensche, weitere Knoepfe
 * Der Rahmen ist 2px in --akzent-linie (Grafik, Grenze 3:1). --akzent
 * selbst mass im VHV-Erscheinungsbild hell nur 2.89:1 gegen den Grund;
 * --fp-vorschlag-leiste waere im VHV dunkel Lindgruen und saehe wie eine
 * Warnung aus. Gemessen Grund / Karte, hell und dunkel:
 *   limou 6.98 / 7.83 und 9.89 / 8.90
 *   VHV   3.99 / 4.32 und 4.96 / 3.88
 * Vorzeile in --schrift-akzent, gerechnet auf flaeche-karte:
 *   limou hell Petrol #0e5a68 7.83:1, dunkel #9cc5cc 8.90:1
 *   VHV   hell akzentton-700 6.30:1, dunkel akzentton-300 5.97:1
 */

.fp-jetzt { border: 2px solid var(--akzent-linie); }

/* Neugestaltung 23.09.2026 (Figma "Fahrerportal Entwurf 23.09.").
   Vorzeile: "Naechste Fahrt" und die Zeitanzeige nebeneinander. */
.fp-jetzt-vorzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-2) var(--raum-3);
  margin-bottom: var(--raum-2);
}
.fp-jetzt-vorzeile .fp-jetzt-titel { margin-bottom: 0; }

/* "Losfahren 13:45" ist laenger als eine Uhrzeit: eine Stufe kleiner, damit
   es bei 360px in einer Zeile steht. */
.fp-fahrt-zeit-los { font-size: var(--fp-grad-6); }

/* Schrittfolge: Stufen als Schilder in einer Reihe, jede mit Text. Farben
   aus den gemessenen Paaren (gut, akzent, vertieft mit schrift-leise). */
.fp-schritte {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fp-schritt {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--raum-3);
  border-radius: var(--rund-1);
  font-size: var(--fp-grad-2);
  font-weight: var(--fett-mittel);
}
.fp-schritt-erledigt { background: var(--gut-flaeche); color: var(--gut-schrift); }
.fp-schritt-jetzt { background: var(--akzent); color: var(--akzent-schrift); font-weight: var(--fett-halb); }
.fp-schritt-offen { background: var(--flaeche-vertieft); color: var(--schrift-leise); border: 1px solid var(--linie); }
.fp-schritt-name { display: inline; }
/* Zeitchip "Losfahren in 25 min" (zeitchip in portal.js): ein Abzeichen, das
   der Minutentakt austauscht; hier nur der Abstand zum Titel. */
.fp-zeitchip { flex: none; }
/* Am Handy vier gleich breite Felder in einer Reihe; bei 390px rutschte
   "Fertig" sonst allein in eine zweite Zeile. Lange Namen brechen im Feld. */
@media (max-width: 639.98px) {
  .fp-schritte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--raum-1); }
  .fp-schritt { justify-content: center; text-align: center; padding: var(--raum-1); line-height: var(--zeile-eng); overflow-wrap: anywhere; }
}

/* Der Ort, zu dem es jetzt geht: gross, Navigation als Hauptknopf. Der
   andere Ort steht darunter kleiner, seine Verweise bleiben erreichbar. */
.fp-ziel-jetzt .fp-strecke-ort {
  font-size: var(--fp-grad-5);
  font-weight: var(--fett-halb);
  color: var(--schrift-stark);
  line-height: var(--zeile-eng);
}
.fp-ziel-jetzt .fp-ort-verweise > .fp-knopf:first-child {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--akzent-schrift);
  font-weight: var(--fett-halb);
  flex: 1 1 180px;
}
.fp-ziel-jetzt .fp-ort-verweise > .fp-knopf:first-child:hover { background: var(--akzent-schwach); border-color: var(--akzent-schwach); }
.fp-ziel-danach {
  padding-top: var(--raum-3);
  border-top: 1px solid var(--linie);
}
.fp-ziel-danach .fp-strecke-ort {
  font-size: var(--fp-grad-3);
  font-weight: var(--fett-mittel);
  color: var(--schrift-normal);
}

/* Nur fuer Vorleseprogramme, wie .nur-vorlesen am Arbeitsplatz. */
.fp-nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Auf dem Handy bleibt der naechste Schritt unten am Daumen stehen, solange
   die Karte der Fahrt zu sehen ist (sticky im Artikel, ueber der
   Reiterleiste). Er steht nur einmal im Dokument. */
/* overflow: clip statt hidden: schneidet an den runden Ecken genauso ab,
   bildet aber keinen Scrollbereich - sonst liefe der Knopf nicht mit. */
.fp-jetzt { overflow: clip; }

/* Datum im Kopf: lang ab 640px, kurz darunter. */
.fp-kopf-datum-kurz { display: none; }
@media (max-width: 639.98px) {
  .fp-kopf-datum-lang { display: none; }
  .fp-kopf-datum-kurz { display: inline; }
}

/* Der naechste Schritt bleibt beim Rollen unten sichtbar, auch auf dem
   Tablet (24.09.2026): bei 1024x768 lag "Fahrt abschliessen" sonst unter dem
   Rand. Am Handy ueber der Reiterleiste. */
.fp-jetzt-aktionen {
  position: sticky;
  bottom: 0;
  z-index: 5;
  box-shadow: 0 -1px 0 var(--linie);
}
@media (max-width: 639.98px) {
  .fp-jetzt-aktionen {
    bottom: calc(54px + env(safe-area-inset-bottom, 0px));
  }
}

.fp-jetzt-titel {
  font-size: var(--fp-grad-1);
  font-weight: var(--fett-halb);
  color: var(--schrift-akzent);
  margin-bottom: var(--raum-1);
}

/* Flug als eine Zeile. Der Pflegestand steht leise, aber immer dabei
   (schrift-leise auf Karte, gemessen hell / dunkel: limou 7.29 / 7.42,
   VHV 5.76 / 6.53; gilt auch fuer .fp-mehr-inhalt, .fp-kompakt-gast,
   .fp-erledigt-zeiten). */
.fp-jetzt-flug {
  font-size: var(--fp-grad-3);
  color: var(--schrift-stark);
  font-variant-numeric: tabular-nums;
}
.fp-jetzt-flug-text { font-weight: var(--fett-mittel); }
.fp-jetzt-flug-stand {
  font-size: var(--fp-grad-2);
  color: var(--schrift-leise);
}

/* Der eine grosse Knopf: Hoehe der Zifferntaste, Schrift eine Stufe groesser. */
.fp-knopf-gross {
  min-height: var(--fp-taste);
  font-size: var(--fp-grad-4);
  width: 100%;
}
.fp-knopf-gross svg { width: 24px; height: 24px; }

.fp-jetzt-aktionen {
  display: flex;
  flex-direction: column;
  gap: var(--raum-3);
  padding: var(--raum-4) var(--raum-5);
  border-top: 1px solid var(--linie);
  background: var(--flaeche-vertieft);
}

.fp-jetzt-neben {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--raum-3);
}
/* Abholschild steht seit 23.09.2026 im Abschnitt des Abholorts. */
.fp-ziel-jetzt .fp-jetzt-neben,
.fp-ziel-danach .fp-jetzt-neben { margin-top: var(--raum-3); }

.fp-jetzt-weitere {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--raum-3);
}

/* Aufklappbare Bloecke: kein Browser-Dreieck, eigener Pfeil, der sich im
   offenen Zustand dreht. Die Schalterzeile hat Fingerhoehe. */
.fp-mehr-schalter,
.fp-kompakt-zeile,
.fp-erledigt-schalter {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.fp-mehr-schalter::-webkit-details-marker,
.fp-kompakt-zeile::-webkit-details-marker,
.fp-erledigt-schalter::-webkit-details-marker { display: none; }

.fp-mehr-pfeil,
.fp-kompakt-pfeil,
.fp-erledigt-pfeil {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--schrift-leise);
  transition: transform 150ms ease;
}
details[open] > summary .fp-mehr-pfeil,
details[open] > summary .fp-kompakt-pfeil,
details[open] > summary .fp-erledigt-pfeil { transform: rotate(180deg); }

/* "Mehr zur Fahrt" / "Weniger": beide Texte stehen im Dokument, sichtbar ist
   je nach Zustand einer. Dahinter leise, was darunter liegt. */
.fp-mehr { border-top: 1px solid var(--linie); }

.fp-mehr-schalter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--raum-2) var(--raum-3);
  min-height: var(--fp-flaeche);
  padding: var(--raum-3) var(--raum-5);
  font-size: var(--fp-grad-3);
  font-weight: var(--fett-mittel);
  color: var(--schrift-normal);
}
.fp-mehr-schalter:hover { background: var(--flaeche-vertieft); }
.fp-mehr-zu { display: none; }
.fp-mehr[open] > .fp-mehr-schalter .fp-mehr-auf { display: none; }
.fp-mehr[open] > .fp-mehr-schalter .fp-mehr-zu { display: inline; }

.fp-mehr-inhalt {
  font-size: var(--fp-grad-2);
  font-weight: var(--fett-normal);
  color: var(--schrift-leise);
}

.fp-mehr-koerper {
  padding: var(--raum-4) var(--raum-5) var(--raum-5);
  border-top: 1px solid var(--linie-leise);
  display: flex;
  flex-direction: column;
  gap: var(--raum-5);
}

/* ------------------------------------------------------------ Danach heute
 * Weitere Fahrten des Tages als Zeilen in einer Karte. Aufgeklappt steht die
 * volle Fahrtkarte darunter, ohne eigenen Rahmen (die Karte aussen traegt ihn).
 */

.fp-kompakt-liste { display: flex; flex-direction: column; }

/* Zeile einer noch nicht angenommenen Zuteilung (24.09.2026): Zeit und
   Strecke wie die kompakte Karte, darunter der Knopf "Fahrt annehmen". */
.fp-annahme-zeile {
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
  padding: var(--raum-3) var(--raum-5);
  border-top: 1px solid var(--linie);
}
.fp-annahme-zeile:first-child { border-top: 0; }
.fp-annahme-zeile .fp-kompakt-zeile { padding: 0; }

/* Bestaetigung beim Ablehnen (24.09.2026): Kasten und Satz nebeneinander. */
.fp-ablehnen-bestaetigung {
  display: flex;
  align-items: flex-start;
  gap: var(--raum-3);
  width: 100%;
  padding: var(--raum-3) 0;
  font-size: var(--fp-grad-3);
  line-height: var(--zeile-eng);
  color: var(--schrift-stark);
  cursor: pointer;
}
.fp-ablehnen-bestaetigung .fp-position-kasten { flex: 0 0 auto; margin-top: 2px; }
.fp-ablehnen-bestaetigung > span { flex: 1 1 auto; min-width: 0; }

.fp-fahrt-kompakt { border-bottom: 1px solid var(--linie); }
.fp-fahrt-kompakt:last-child { border-bottom: none; }

.fp-kompakt-zeile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--raum-2) var(--raum-3);
  min-height: var(--fp-flaeche);
  padding: var(--raum-3) var(--raum-5);
}
.fp-kompakt-zeile:hover { background: var(--flaeche-vertieft); }

/* Abholung unter der Abfahrt in der Kompaktkarte (28.09.2026). */
.fp-kompakt-abholung {
  font-size: var(--fp-grad-1);
  font-weight: var(--fett-normal);
  color: var(--schrift-leise);
  line-height: 1.2;
  white-space: nowrap;
}

.fp-kompakt-zeit {
  display: flex;
  flex: none;
  flex-direction: column;
  font-size: var(--fp-grad-5);
  font-weight: var(--fett-halb);
  color: var(--schrift-stark);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.fp-kompakt-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fp-kompakt-strecke {
  font-size: var(--fp-grad-3);
  color: var(--schrift-stark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fp-kompakt-gast {
  font-size: var(--fp-grad-2);
  color: var(--schrift-leise);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bei 360px passt das Statusabzeichen nicht mehr neben Zeit und Strecke;
   es rueckt in eine zweite Zeile unter den Text. Gemessen mit flex-wrap:
   der Text schrumpfte auf "H..." - deshalb ein Raster mit fester Lage. */
@media (max-width: 420px) {
  .fp-kompakt-zeile { grid-template-columns: auto minmax(0, 1fr) auto; }
  .fp-kompakt-zeit { grid-row: 1 / span 2; }
  .fp-kompakt-text { grid-column: 2; grid-row: 1; }
  .fp-kompakt-pfeil { grid-column: 3; grid-row: 1 / span 2; }
  .fp-kompakt-zeile .fp-abzeichen { grid-column: 2; grid-row: 2; justify-self: start; }
  /* Die Strecke darf hier umbrechen: "Hauptverwaltung nach Hauptbahnhof"
     wurde bei 182px Spaltenbreite sonst auf "Hauptverwaltung nach Ha..."
     gekuerzt, und der Zielort ist der Teil, der zaehlt. */
  .fp-kompakt-strecke { white-space: normal; line-height: var(--zeile-eng); }
}

.fp-kompakt-koerper {
  padding: 0 var(--raum-3) var(--raum-3);
  border-top: 1px solid var(--linie-leise);
}
.fp-kompakt-koerper > .fp-fahrt {
  border: none;
  border-radius: 0;
}

/* ---------------------------------------------------------- Erledigt heute
 * Zugeklappte Leiste mit Zahl und Uhrzeiten; offen stehen die vollen Karten
 * darunter, damit Abholschild und Schaden melden erreichbar bleiben.
 */

.fp-erledigt {
  border: 1px solid var(--linie);
  border-radius: var(--rund-3);
  background: var(--flaeche-karte);
}

.fp-erledigt-schalter {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  min-height: var(--fp-flaeche);
  padding: var(--raum-3) var(--raum-5);
  border-radius: var(--rund-3);
}
.fp-erledigt-schalter:hover { background: var(--flaeche-vertieft); }

/* Haken in gut-schrift auf der Karte, gemessen hell / dunkel:
   limou 6.52 / 9.25, VHV 6.84 / 7.54. */
.fp-erledigt-zeichen {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--gut-schrift);
}

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

.fp-erledigt-zeiten {
  flex: 1;
  min-width: 0;
  font-size: var(--fp-grad-2);
  color: var(--schrift-leise);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fp-erledigt-koerper {
  display: flex;
  flex-direction: column;
  gap: var(--raum-4);
  padding: 0 var(--raum-3) var(--raum-3);
  border-top: 1px solid var(--linie-leise);
  padding-top: var(--raum-3);
}

/* Knopf unter dem Leerzustand ("Zur Woche"), zentriert wie der Text darueber. */
.fp-leer-aktion {
  display: flex;
  justify-content: center;
  margin-top: calc(-1 * var(--raum-2));
}

/* Dienstleiste knapp: sie steht jetzt unter der Fahrtkarte, ihr Text bleibt,
   die Abstaende schrumpfen um eine Stufe. */
.fp-dienst .fp-karte-koerper { padding: var(--raum-3) var(--raum-5); }
.fp-dienst .fp-fahrt-fuss { padding: var(--raum-3) var(--raum-5); }

/* -------------------------------------------- Betrieb mit Anmeldung (F2)
 * Zwei Schirme, die es in der Vorfuehrung nicht gibt und die dort auch
 * keine Regel beruehren (eigene Klassen, kein Selektor der Anmeldung):
 *
 *   .fp-konto    statt Fahrerliste und Kennzahl. Ruhige Karte: Marke, ein
 *                Satz, ein Hauptknopf.
 *   .fp-sperre   Leerlaufsperre nach 15 Minuten. Liegt ueber allem, deckt
 *                deckend ab - ein durchscheinender Plan waere der halbe
 *                Zweck der Sperre.
 *
 * Kontraste gerechnet gegen die naechste DECKENDE Flaeche, hell und dunkel,
 * limou und VHV (Zahlen an den Zeilen).
 */

.fp-konto {
  flex: 1;
  padding: var(--raum-8) var(--fp-rand) var(--raum-10);
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}

/* GEMESSEN 16.09.2026 im Browser (getImageData-Ersatz: getComputedStyle
   gegen die naechste DECKENDE Flaeche). Titel schrift-stark auf
   flaeche-grund: limou hell 14.49:1, dunkel 15.38:1; VHV hell 7.53:1,
   dunkel 14.36:1. 30px, Grenze waere 3:1. */
.fp-konto-titel {
  font-size: var(--fp-grad-6);
  font-weight: var(--gewicht-titel, 900);
  color: var(--schrift-stark);
  line-height: var(--zeile-eng);
  margin: var(--raum-1) 0 var(--raum-4);
}

/* GEMESSEN: Fliesstext schrift-normal auf flaeche-grund, limou hell 9.61:1,
   dunkel 11.87:1; VHV hell 5.33:1, dunkel 11.01:1. Grenze 4.5:1. */
.fp-konto-text {
  font-size: var(--fp-grad-4);
  color: var(--schrift-normal);
  line-height: var(--zeile-normal);
  margin: 0 0 var(--raum-6);
  max-width: 44ch;
}

.fp-konto-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-3);
}

/* Der Hauptknopf traegt dasselbe Mass wie die Anmeldetaste: 64px, damit auf
   dem Tablet nichts danebengeht. */
.fp-konto-aktionen .fp-knopf {
  min-height: var(--fp-taste);
  padding: 0 var(--raum-6);
}

/* GEMESSEN: Fussnote schrift-leise auf flaeche-grund, limou hell 6.50:1,
   dunkel 8.25:1; VHV hell 5.33:1, dunkel 8.34:1. Grenze 4.5:1. Der
   Hauptknopf auf --akzent: limou 7.83 / 8.73, VHV 5.49 / 5.49. */
.fp-konto-fuss {
  margin: var(--raum-8) 0 0;
  padding-top: var(--raum-5);
  border-top: 1px solid var(--linie);
  font-size: var(--fp-grad-2);
  color: var(--schrift-leise);
  max-width: 52ch;
}

/* Sperrschirm. Deckende Flaeche, damit der Plan darunter nicht mehr lesbar
   ist; die Karte steht in der oberen Bildschirmhaelfte, weil ein Daumen
   dort auf einem liegenden Tablet eher hinkommt als in die Mitte. */
.fp-sperre {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--fp-rand);
  padding-top: calc(var(--fp-rand) + env(safe-area-inset-top, 0px));
  background: var(--flaeche-grund);
}

.fp-sperre-karte {
  width: 100%;
  max-width: 420px;
  padding: var(--raum-8) var(--raum-6);
  border: 1px solid var(--linie);
  border-radius: var(--rund-4);
  background: var(--flaeche-karte);
  box-shadow: var(--schatten-2);
  text-align: center;
}

/* GEMESSEN: Schloss in schrift-leise auf flaeche-karte, limou hell 7.29:1,
   dunkel 7.42:1; VHV hell 5.76:1, dunkel 6.53:1. Grenze fuer Linien 3:1. */
.fp-sperre-zeichen {
  width: 40px;
  height: 40px;
  color: var(--schrift-leise);
}

/* GEMESSEN: Titel schrift-stark auf flaeche-karte, limou hell 16.26:1,
   dunkel 13.84:1; VHV hell 8.14:1, dunkel 11.23:1. */
.fp-sperre-titel {
  font-size: var(--fp-grad-5);
  font-weight: var(--gewicht-titel, 900);
  color: var(--schrift-stark);
  margin-top: var(--raum-3);
}

/* GEMESSEN: Text schrift-normal auf flaeche-karte, limou hell 10.78:1,
   dunkel 10.67:1; VHV hell 5.76:1, dunkel 8.61:1. Knopf auf --akzent
   7.83 / 8.73 (limou) und 5.49 / 5.49 (VHV). */
.fp-sperre-text {
  font-size: var(--fp-grad-3);
  color: var(--schrift-normal);
  margin: var(--raum-3) 0 var(--raum-6);
}

.fp-sperre-aktion {
  display: flex;
  justify-content: center;
}

/* Wie auf der Kontokarte: Hauptknopf im Mass der Anmeldetaste. */
.fp-sperre-aktion .fp-knopf {
  min-height: var(--fp-taste);
  padding: 0 var(--raum-8);
}

/* Die Leisten (core/leiste.js) stehen ueber der Kopfzeile des Portals. Sie
   bringen ihre Regeln in assets/css/leiste.css mit und kleben dort oben -
   das laege ueber der ebenfalls klebenden Kopfzeile (z-index 90 gegen 10),
   und der Fahrer saehe beim Scrollen den Namen des Unternehmens statt seiner
   Reiter. Im Portal scrollen sie deshalb mit. Der Selektor traegt body>,
   damit er die Regel aus leiste.css sicher schlaegt: das Stilblatt wird
   nachgeladen und stuende sonst spaeter. */
body > .leisten { position: static; }

/* Meldung im Sperrschirm (Sitzung nicht pruefbar, Bestand nicht ladbar).
   Ohne Meldung leer und ohne Platzbedarf. */
.fp-sperre-fehler:empty { display: none; }
.fp-sperre-fehler { margin-bottom: var(--raum-5); text-align: start; }

/* ------------------------------------------- Adressen und Zusatzauftraege
   (16.09.2026) Verweise "Navigation" und "Karte" als .fp-knopf, also eine
   Fingerflaeche mit den gemessenen Farben des Knopfs. Die Positionen eines
   Zusatzauftrags ruecken um die Breite des Schalters ein. */
.fp-ort-verweise {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--raum-2);
  margin-top: var(--raum-2);
}

/* "Andere Karte": weitere Kartendienste zum Aufklappen. Der Ausloeser ist
   eine volle Beruehrflaeche (48px), sieht aber leiser aus als die beiden
   Knoepfe davor. Schrift --schrift-akzent auf dem Grund der Karte, wie ein
   Verweis. Ohne Skript auf- und zuklappbar (<details>). */
/* In derselben Reihe wie Navigation und Karte; aufgeklappt waechst er
   nach unten. Passt die Reihe nicht, bricht er um wie ein Knopf. */
.fp-ort-mehr { align-self: center; }
.fp-ort-mehr > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  min-height: var(--fp-flaeche);
  padding: 0 var(--raum-2);
  font-size: var(--fp-grad-2);
  font-weight: var(--fett-halb);
  color: var(--schrift-akzent);
  cursor: pointer;
  list-style: none;
}
.fp-ort-mehr > summary::-webkit-details-marker { display: none; }
.fp-ort-mehr > summary::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
}
.fp-ort-mehr[open] > summary::after { border-top: 0; border-bottom: 6px solid currentColor; }
.fp-ort-mehr-liste { display: flex; flex-wrap: wrap; gap: var(--raum-2); padding-top: var(--raum-1); }

.fp-zusatz-positionen {
  padding-left: var(--fp-flaeche);
  border-bottom: 1px solid var(--linie-leise);
  background: var(--flaeche-karte);
}
.fp-zusatz-positionen:last-child { border-bottom: none; }

/* ------------------------------------- Kopf am Handy als App (24.09.2026)
 * Figma "6 Handy-App", Abschnitt 6d: heller Kopf auf Papier mit Kuerzel-Kreis,
 * Name und Dienststand; die Nacht bleibt dem Wandportal. Farben sind die
 * bekannten Paare (schrift-stark auf flaeche-karte, band-schrift auf
 * band-flaeche 13.29), keine neuen Tokens. Ab 640px bleibt der Kopf dunkel. */
@media (max-width: 639.98px) {
  .fp-kopf {
    background: var(--flaeche-karte);
    color: var(--schrift-stark);
    border-bottom: 1px solid var(--linie-leise);
  }
  .fp-kopf .fp-fahrer-zeichen { background: var(--band-flaeche); color: var(--band-schrift); }
  .fp-kopf-name { color: var(--schrift-stark); }
  .fp-kopf-datum { color: var(--schrift-leise); }
  .fp-abmelden,
  .fp-kopf-wechsel { border-color: var(--linie-stark); color: var(--schrift-stark); }
  .fp-abmelden:hover,
  .fp-kopf-wechsel:hover { background: var(--flaeche-vertieft); color: var(--schrift-stark); }
  .fp-kopf :focus-visible { outline-color: var(--fokus); }
}

/* --------------------------------------- Diensteinstieg und Uebertragung
 * Die vorhandenen Farbpaare der Tokens gelten auch hier. Auf kleinen
 * Geraeten bleibt der Dienstbeginn vor der ersten Fahrt; spaeter fuehrt
 * wieder die laufende Fahrt. Keine neue Farb- oder Mandantenwelt. */
.fp-tagesstand {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--raum-5);
  padding: var(--raum-2) 0;
}
.fp-tagesstand-titel h1 {
  margin: 0;
  color: var(--schrift-stark);
  font-size: var(--fp-grad-6);
  line-height: var(--zeile-eng);
  font-weight: var(--gewicht-titel, 900);
}
.fp-tagesstand-titel p {
  margin: var(--raum-1) 0 0;
  font-size: var(--fp-grad-2);
  color: var(--schrift-leise);
}
.fp-tagesstand-zahlen {
  display: flex;
  align-items: center;
  gap: var(--raum-5);
  margin: 0;
}
.fp-tagesstand-zahlen > div {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--raum-1);
  min-width: 55px;
}
.fp-tagesstand-zahlen dt { font-size: var(--fp-grad-1); color: var(--schrift-leise); }
.fp-tagesstand-zahlen dd {
  margin: 0;
  color: var(--schrift-stark);
  font-family: var(--schriftfamilie-fest);
  font-size: var(--fp-grad-5);
  font-weight: var(--fett-halb);
  line-height: var(--zeile-eng);
}
.fp-dienst-kopf { display: flex; justify-content: space-between; gap: var(--raum-5); }
.fp-dienst-status { flex: 1; min-width: 0; }
.fp-dienst-status .fp-zahl-wert { font-size: var(--fp-grad-5); }
.fp-dienst-fahrzeuge {
  display: flex;
  flex-direction: column;
  gap: var(--raum-1);
  max-width: 42%;
  border-left: 1px solid var(--linie);
  padding-left: var(--raum-5);
}
.fp-dienst-fahrzeuge strong { color: var(--schrift-stark); overflow-wrap: anywhere; }
.fp-vorbereitung-fahrzeug { border: 1px solid var(--linie); border-radius: var(--rund-2); padding: var(--raum-4); }
.fp-vorbereitung-fahrzeug h3 { margin: 0; font-family: var(--schriftfamilie-fest); color: var(--schrift-stark); }
.fp-vorbereitung-fahrzeug > p { margin: var(--raum-2) 0; }
.fp-vorbereitung-fahrzeug .fp-meldung { margin-top: var(--raum-3); }
.fp-vorbereitung-gelesen {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  min-height: var(--fp-flaeche);
  padding: var(--raum-3) 0;
  cursor: pointer;
}
.fp-vorbereitung-gelesen input { width: 24px; height: 24px; flex: 0 0 24px; accent-color: var(--akzent); }
.fp-uebertragungen { width: 100%; min-width: 0; border: 1px solid var(--linie); border-radius: var(--rund-2); background: var(--flaeche-karte); }
.fp-uebertragungen > summary {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--raum-3);
  min-height: var(--fp-flaeche);
  padding: var(--raum-3) var(--raum-4);
  color: var(--schrift-stark);
  font-weight: var(--fett-halb);
  cursor: pointer;
}
.fp-uebertragungen > summary > svg { width: 20px; height: 20px; flex: 0 0 20px; max-width: none; }
.fp-uebertragungen > summary > span:first-of-type { min-width: 0; line-height: var(--zeile-eng); overflow-wrap: anywhere; }
.fp-uebertragungen > summary > .fp-abzeichen { white-space: nowrap; }
.fp-uebertragungen-koerper { min-width: 0; border-top: 1px solid var(--linie); padding: var(--raum-4); overflow-wrap: anywhere; }
.fp-uebertragungen-liste { list-style: none; padding: 0; margin: 0 0 var(--raum-4); }
.fp-uebertragungen-liste li { display: flex; flex-direction: column; gap: var(--raum-1); padding: var(--raum-3) 0; border-bottom: 1px solid var(--linie); }
.fp-uebertragungen-liste strong { color: var(--schrift-stark); }
.fp-uebertragungen-liste [data-ergebnis="bestaetigt"] strong { color: var(--gut-schrift); }
.fp-uebertragungen-liste [data-ergebnis="abgelehnt"] strong,
.fp-uebertragungen-liste [data-ergebnis="abgelaufen"] strong { color: var(--gefahr-schrift); }

/* Standortsender: Zustand und echte Empfangsbelege statt Aktivitaetsanimation. */
.fp-webortung { min-width: 0; }
.fp-webortung-kopf { display: flex; align-items: center; gap: var(--raum-3); flex-wrap: wrap; }
.fp-webortung-kopf > svg { width: 20px; height: 20px; flex: 0 0 20px; }
.fp-webortung-kopf > span:first-of-type { flex: 1; min-width: 140px; }
.fp-webortung-status { margin: 0 0 var(--raum-3); color: var(--schrift-normal); }
.fp-webortung-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--raum-3); margin: 0 0 var(--raum-3); }
.fp-webortung-zahlen > div { display: flex; flex-direction: column-reverse; gap: var(--raum-1); }
.fp-webortung-zahlen dt { color: var(--schrift-leise); font-size: var(--fp-grad-1); }
.fp-webortung-zahlen dd { color: var(--schrift-stark); font-family: var(--schriftfamilie-fest); font-size: var(--fp-grad-5); font-weight: var(--fett-halb); margin: 0; }
.fp-webortung .fp-fussnote { overflow-wrap: anywhere; }
.fp-webortung-verlust { color: var(--gefahr-schrift); font-size: var(--fp-grad-2); }
.fp-webortung[data-aktiv="true"] { border-left: 4px solid var(--gut-schrift); }
.fp-webortung[data-zustand="fehler"], .fp-webortung[data-zustand="verweigert"] { border-left: 4px solid var(--gefahr-schrift); }
@media (max-width: 639.98px) {
  .fp-tagesstand { align-items: flex-start; gap: var(--raum-3); flex-direction: column; }
  .fp-tagesstand-titel { display: flex; align-items: baseline; justify-content: space-between; gap: var(--raum-3); width: 100%; }
  .fp-tagesstand-titel h1 { font-size: var(--fp-grad-5); }
  .fp-tagesstand-titel p { font-size: var(--fp-grad-1); }
  .fp-tagesstand-zahlen { width: 100%; gap: var(--raum-3); }
  .fp-tagesstand-zahlen > div { flex: 1; }
  .fp-tagesstand-zahlen dd { font-size: var(--fp-grad-4); }
  .fp-dienst-kopf { flex-direction: column; gap: var(--raum-3); }
  .fp-dienst-fahrzeuge { max-width: none; border-left: 0; border-top: 1px solid var(--linie); padding: var(--raum-3) 0 0; }
  .fp-dienst-fahrzeuge .fp-dienst-text { display: none; }
}