/* Mitarbeiterportal Bernhard Böckmann GmbH
   Designbasis: KUNDENPORTAL (Vorgabe Jerome 18.08.2026 – „einheitlicher
   Look nach außen"). Farben, Schriften und Radien sind ab v068 aus
   D:\Projekt - Kundenportal Bernhard Böckmann GmbH/assets/portal.css
   übernommen, damit beide Portale wie ein System wirken.

   ZUM BLAU: Bis v067 stand hier #1D4F91 (Pantone 7686 C aus
   logo_farbwerte.pdf). Das Kundenportal führt #173e79, und auf Jeromes
   Entscheidung gilt jetzt dieser Wert für beide. Die Datei
   assets/DESIGN-TOKENS.md ist entsprechend nachgezogen – wer dort noch
   den alten Wert liest, hat eine veraltete Fassung.

   Die VARIABLENNAMEN bleiben, wie sie waren. Rund 1600 Zeilen Regeln
   greifen darauf zu; ein Umbenennen hätte jede davon angefasst, ohne
   dass sich optisch etwas ändert. Getauscht sind nur die Werte. */

:root {
  /* Gemeinsame Arbeitsbreite von Kopfzeile, Navigation und Inhalt.
     War 1100px – zu schmal: Die Navigationsleiste schnitt bei zwoelf
     Punkten "Personal" ab und "Verwaltung" fiel ganz heraus, und im
     Fuhrpark stand die Tabelle ueber den Rand (Screenshots Jerome
     18.08.2026). An EINER Stelle gepflegt, damit die drei nicht wieder
     auseinanderlaufen. */
  --breite: 1440px;
  /* Blau des Kundenportals (--blue / --blue-dark / --blue-mid) */
  --navy:        #173e79;
  --navy-dunkel: #0e2a56;
  --navy-tief:   #0a1f42;
  --navy-hell:   #1a4a8f;
  --bb-blau:     var(--navy);
  --aktion:      var(--navy);
  --verlauf-hero: linear-gradient(160deg, #1a4a8f 0%, #173e79 45%, #0a1f42 100%);

  /* Statusfarben des Kundenportals */
  --gruen:       #10b981;
  --gruen-fond:  #E7F7EF;
  --rot:         #ef4444;
  --rot-fond:    #FDECEA;
  --gelb:        #C77700;
  --gelb-fond:   #FBF1E2;

  --ampel-ueberfaellig: var(--rot);
  --ampel-kritisch:     var(--gelb);
  --ampel-hinweis:      #8a7400;
  --ampel-ok:           var(--gruen);
  --erfolg:             var(--gruen);
  --warnung:            var(--gelb);
  --fehler:             var(--rot);

  /* Flächen und Text (--bg / --surface / --bg-inset / --surface-border) */
  --seite:      #F8F9FB;
  --flaeche:    #FFFFFF;
  --flaeche-2:  #F2F4F7;
  --rand:       #E2E5EB;
  --text:       #4A5468;
  --text-schwach: #8892A4;
  --text-invers: #FFFFFF;
  --text-stark: #0C1222;

  --luft-1: 4px;  --luft-2: 8px;  --luft-3: 12px;
  --luft-4: 16px; --luft-5: 24px; --luft-6: 32px;

  --radius:    10px;
  --radius-kl: 6px;
  --radius-gr: 16px;
  --linie:     1px solid var(--rand);
  /* Schatten des Kundenportals (--shadow-md) */
  --schatten:  0 4px 16px rgba(27,58,107,.06), 0 1px 3px rgba(0,0,0,.03);

  /* Outfit für Titel und Beschriftungen, Plus Jakarta Sans für Fließtext –
     dieselbe Paarung wie im Kundenportal. */
  --schrift:       'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif;
  --schrift-titel: 'Outfit', 'Segoe UI', Arial, sans-serif;
  --gr-mini:  0.78rem;
  --gr-klein: 0.9rem;
  --gr-basis: 1rem;
  --gr-gross: 1.25rem;
  --gr-titel: 1.9rem;
}

/* Dunkles Thema, ebenfalls aus dem Kundenportal übernommen. */
[data-theme="dunkel"] {
  --navy:       #4B82D1;
  --navy-dunkel: #3A6DBB;
  --navy-hell:  #5A91E0;
  --seite:      #0C1222;
  --flaeche:    #161E2E;
  --flaeche-2:  #0F1520;
  --rand:       rgba(255,255,255,.07);
  --text:       #9BA4B8;
  --text-schwach: #6B7690;
  --text-stark: #EDF0F7;
  --bb-blau:    #4B82D1;
  --aktion:     #3A6DBB;
  --gruen-fond: rgba(16, 185, 129, .12);
  --rot-fond:   rgba(239, 68, 68, .14);
  --gelb-fond:  rgba(199, 119, 0, .14);
  --schatten:   0 8px 32px rgba(0,0,0,.25);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }

body {
  background: var(--seite);
  color: var(--text);
  font-family: var(--schrift);
  font-size: var(--gr-basis);
  line-height: 1.65;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Als App vom Startbildschirm beginnt die Seite ganz oben am Rand –
     ohne diesen Abstand liegt die erste Zeile unter der Statusleiste
     bzw. hinter der Dynamic Island des iPhones. */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ============ Kopfleiste (weiß, wie Kundenportal-Dashboard) ============ */
.kopfleiste {
  background: var(--flaeche);
  color: var(--text);
  border-bottom: var(--linie);
}
.kopfleiste-innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 12px var(--luft-5);
  display: flex;
  align-items: center;
  gap: var(--luft-4);
  flex-wrap: wrap;
}
.marke { display: flex; align-items: center; gap: var(--luft-3); }
.marke img { height: 40px; width: 40px; border-radius: 10px; display: block; }
.marke span {
  font-weight: 600;
  font-size: var(--gr-klein);
  color: var(--bb-blau);
  letter-spacing: .02em;
}
.hauptnav { display: flex; gap: var(--luft-2); margin-left: auto; }
.hauptnav a {
  color: var(--text-schwach);
  text-decoration: none;
  font-size: var(--gr-klein);
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
}
.hauptnav a:hover { color: var(--bb-blau); background: var(--flaeche-2); }
.hauptnav a.aktiv { color: var(--text-invers); background: var(--aktion); }
/* margin-left:auto schiebt die Bedienelemente nach rechts. Stand bis v031
   nur in der Handy-Regel – am Desktop klebte deshalb alles links an der
   Marke, während rechts die halbe Leiste leer blieb (Screenshot Jerome). */
.kopf-rechts { display: flex; align-items: center; gap: var(--luft-3); margin-left: auto; }
.kopf-link {
  color: var(--text-schwach);
  text-decoration: none;
  font-size: var(--gr-klein);
  font-weight: 500;
  padding: 8px 14px;
  border: var(--linie);
  border-radius: 999px;
}
.kopf-link:hover { color: var(--bb-blau); border-color: var(--bb-blau); }
.thema-knopf {
  background: var(--flaeche);
  color: var(--text);
  border: var(--linie);
  border-radius: 50%;
  width: 40px; height: 40px;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: var(--schatten);
}
.verbindung {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--gr-mini); font-weight: 500;
  color: var(--text-schwach);
}
.verbindung::before {
  content: '';
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gruen);
}
.verbindung.ist-offline { color: var(--gelb); }
.verbindung.ist-offline::before { background: var(--gelb); }

/* ============ Inhalt ============ */
.inhalt {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--luft-6) var(--luft-5);
}
/* Listenseiten mit vielen Spalten dürfen breiter laufen – die Flotte hat
   acht Spalten und wurde sonst gequetscht (Wunsch Jerome 17.08.2026).
   Am Handy greift ohnehin die Kartendarstellung. */
body[data-breit="1"] .inhalt { max-width: 1500px; }

/* Zurück zur Liste, über dem Kennzeichen. In der App vom Startbildschirm
   gibt es keine Adresszeile und damit keinen Browser-Zurück. */
.zurueck {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--luft-3);
  color: var(--text-schwach);
  text-decoration: none;
  font-size: var(--gr-klein);
  font-weight: 600;
}
.zurueck:hover { color: var(--navy); }
.zurueck span { font-size: 1.1em; line-height: 1; }

/* Zahlen rechtsbündig und mit gleich breiten Ziffern – so stehen
   Kilometerstände untereinander vergleichbar. */
.spalte-zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ============ Kennzeichen als Schild ============
   Ein Kennzeichen ist im Fuhrpark der Name des Fahrzeugs – als Schild
   dargestellt findet man es in einer langen Liste schneller (Wunsch
   Jerome 17.08.2026). Die Farben sind bewusst FEST und folgen keinem
   Thema: Ein Nummernschild ist weiß mit schwarzer Schrift und blauem
   Feld, auch bei dunkler Oberfläche. */
.kennzeichen {
  display: inline-flex;
  align-items: stretch;
  background: #ffffff;
  color: #14161a;
  border: 2px solid #14161a;
  border-radius: 5px;
  overflow: hidden;
  font-weight: 700;
  letter-spacing: .05em;
  white-space: nowrap;
  text-decoration: none;
  vertical-align: middle;
  line-height: 1.75;
  /* Beim Drucken nicht als graue Fläche ausgeben. */
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}
/* Das blaue Feld links – bei echten Schildern das EU-Feld. */
.kennzeichen::before {
  content: 'D';
  background: #003399;
  color: #ffffff;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 5px 2px;
  font-size: .68em;
  font-weight: 700;
  letter-spacing: 0;
}
.kennzeichen-text { padding: 0 var(--luft-2); }
a.kennzeichen:hover { border-color: var(--navy); }
a.kennzeichen:hover .kennzeichen-text { color: var(--navy); }
/* In Listen etwas kleiner, damit die Zeilen nicht auseinanderlaufen. */
table.liste .kennzeichen, .zugliste .kennzeichen { font-size: var(--gr-klein); }
/* Auf der Karteikarte trägt die Überschrift das Schild. */
h1 .kennzeichen { font-size: 1.6rem; letter-spacing: .06em; }

/* Kran- und Staplerkennungen sind KEINE Kennzeichen – als Chip
   unterscheidbar, damit in der Zugliste klar ist, was Fahrzeug ist
   und was Aufbau. */
.geraetecode {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px var(--luft-2);
  border: 1.5px dashed var(--rand);
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--gr-mini);
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
}
.geraetecode:hover { border-color: var(--navy); border-style: solid; }
/* Palettenbuchungen: Der Stand einer Buchung muss auf einen Blick lesbar
   sein – wartend, gezählt oder abgelehnt. */
.buchung-wartet      { color: var(--ampel-hinweis); font-weight: 600; }
.buchung-freigegeben { color: var(--gruen); font-weight: 600; }
.buchung-abgelehnt   { color: var(--text-schwach); text-decoration: line-through; }
.freigabe-zeile {
  border: var(--linie);
  border-radius: var(--radius);
  padding: var(--luft-3) var(--luft-4);
  margin-bottom: var(--luft-3);
  background: var(--flaeche-2);
}
.freigabe-zeile p { margin: 0 0 var(--luft-2); display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--luft-3); }
.kachelreihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--luft-4); margin: var(--luft-4) 0; }

/* Verschuldensrichtung im Schadensfall – auf einen Blick erkennbar, ob wir
   zahlen oder Geld bekommen. */
.richtung-marke {
  display: inline-block;
  padding: 2px var(--luft-3);
  border-radius: 999px;
  font-size: var(--gr-mini);
  font-weight: 600;
  white-space: nowrap;
}
.richtung-wir_verursacht { background: var(--rot-fond); color: var(--rot); }
.richtung-uns_zugefuegt  { background: var(--gruen-fond); color: var(--gruen); }
.richtung-eigenschaden   { background: var(--gelb-fond); color: var(--ampel-hinweis); }
.richtung-unklar         { background: var(--flaeche-2); color: var(--text-schwach); }

/* Standortkarte: Das Bild kommt vom eigenen Server, nicht von einem
   fremden Kartendienst. */
.kartenbild { margin: var(--luft-4) 0 0; }
.kartenbild img {
  display: block;
  width: 100%;
  max-width: 768px;
  height: auto;
  border: var(--linie);
  border-radius: var(--radius);
}
.kartenbild figcaption { margin-top: 4px; }

/* Zugzeilen: Schilder brauchen etwas Luft und dürfen am Handy umbrechen. */
.zugliste li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--luft-2); }
.zug-plus { color: var(--text-schwach); font-weight: 600; }
.karte {
  background: var(--flaeche);
  border: var(--linie);
  border-radius: var(--radius-gr);
  padding: var(--luft-6);
  margin-bottom: var(--luft-5);
  box-shadow: var(--schatten);
}
.karte-schmal { max-width: 460px; margin-left: auto; margin-right: auto; }

/* Titel in Outfit, Text in Plus Jakarta Sans – die Paarung des
   Kundenportals (v068). Titel bekommen die kräftigeren Schnitte und
   etwas engere Laufweite, so wie dort. */
h1, h2, h3, .zwischentitel, .zwischentitel-klein, .karte-titel {
  font-family: var(--schrift-titel);
}
h1 {
  font-size: var(--gr-titel);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 var(--luft-2);
  color: var(--text-stark);
}
.unterzeile { color: var(--text-schwach); margin: 0 0 var(--luft-4); font-size: var(--gr-basis); }
.titel-neben { font-size: var(--gr-klein); font-weight: 500; color: var(--text-schwach); margin-left: var(--luft-2); }
.zwischentitel {
  font-size: var(--gr-gross);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text-stark);
  margin: var(--luft-6) 0 var(--luft-3);
  padding-top: var(--luft-4);
  border-top: var(--linie);
}
.karte h1 + .zwischentitel, .karte .meldung + .zwischentitel { border-top: 0; padding-top: 0; margin-top: var(--luft-4); }

.rollen-marke {
  display: inline-block;
  font-size: var(--gr-mini);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bb-blau);
  background: var(--flaeche-2);
  border-radius: 999px;
  padding: 5px 14px;
}

/* Statusbanner (wie „Alles erledigt" im Kundenportal) */
.banner {
  border-radius: var(--radius);
  padding: var(--luft-4) var(--luft-5);
  font-weight: 600;
  text-align: center;
  margin-bottom: var(--luft-5);
}
.banner-gruen { background: var(--gruen-fond); color: var(--gruen); }
.banner-rot   { background: var(--rot-fond);   color: var(--rot); }

/* ============ KPI-Kacheln (Topline + große Zahl) ============ */
.kachel-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--luft-4);
}
.kachel {
  position: relative;
  background: var(--flaeche);
  border: var(--linie);
  border-radius: 14px;
  padding: var(--luft-5);
  min-height: 116px;
  text-align: center;
  color: var(--text);
}
.kachel::before {
  content: '';
  position: absolute; top: -1px; left: -1px; right: -1px; height: 5px;
  border-radius: 14px 14px 0 0;
  background: var(--navy);
}
.kachel span { display: block; }
.kachel .kachel-titel {
  font-size: var(--gr-mini);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-schwach);
}
.kachel .kachel-zahl {
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--bb-blau);
  margin-top: var(--luft-1);
}
.kachel span:not(.kachel-titel):not(.kachel-zahl) {
  font-size: var(--gr-mini);
  color: var(--text-schwach);
  margin-top: var(--luft-1);
}
a.kachel-link { display: block; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; }
a.kachel-link:hover { transform: translateY(-2px); box-shadow: var(--schatten); }
.kachel-gruen::before { background: var(--gruen); }
.kachel-gruen .kachel-zahl { color: var(--gruen); }
.kachel-warnung::before { background: var(--rot); }
.kachel-warnung .kachel-zahl { color: var(--rot); }
.kachel-inaktiv { opacity: .55; }
.kachel-inaktiv::before { background: var(--rand); }

/* ============ Formulare ============ */
label {
  display: block;
  font-size: var(--gr-klein);
  font-weight: 500;
  color: var(--text-schwach);
  margin: var(--luft-4) 0 6px;
}
input[type="text"], input[type="password"], input[type="date"], textarea, select {
  width: 100%;
  padding: 13px 15px;
  font-family: var(--schrift);
  font-size: var(--gr-basis);
  color: var(--text);
  background: var(--flaeche);
  border: 1.5px solid var(--rand);
  border-radius: var(--radius);
}
/* Passwortfeld mit Schalter „Zeigen": Der Knopf sitzt im Feld, damit die
   Maske gleich hoch bleibt. Der Platz rechts wird freigehalten, sonst
   läuft ein langes Passwort unter den Knopf. */
.passwortfeld { position: relative; display: block; }
.passwortfeld input[type="password"], .passwortfeld input[type="text"] { padding-right: 108px; }
.passwort-schalter {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  min-height: 38px;
  padding: 0 var(--luft-3);
  background: var(--flaeche-2);
  color: var(--navy);
  border: 1.5px solid var(--rand);
  border-radius: var(--radius);
  font-family: var(--schrift);
  font-size: var(--gr-mini);
  font-weight: 600;
  cursor: pointer;
}
.passwort-schalter:hover { border-color: var(--navy); }

input:focus-visible, textarea:focus-visible, select:focus-visible,
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--navy-hell);
  outline-offset: 2px;
}
.knopf {
  display: block;
  width: 100%;
  margin-top: var(--luft-5);
  min-height: 50px;
  background: var(--aktion);
  color: var(--text-invers);
  border: 0;
  border-radius: var(--radius);
  font-family: var(--schrift);
  font-size: var(--gr-basis);
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 8px 18px -10px rgba(29, 79, 145, .6);
}
.knopf:hover { background: var(--navy-dunkel); }
/* Verweise, die als Knopf auftreten: ohne diese Regel bleibt die
   Unterstreichung stehen und der Text sitzt oben links statt mittig. */
a.knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  padding: 0 var(--luft-4);
}
.knopf-klein { width: auto; margin-top: 0; min-height: 44px; padding: 0 var(--luft-5); display: inline-block; }
.knopf-halb { max-width: 340px; }
.knopf-zweit {
  background: var(--flaeche);
  color: var(--navy);
  border: 1.5px solid var(--navy);
  box-shadow: none;
  margin-top: var(--luft-3);
}
.knopf-zweit:hover { background: var(--flaeche-2); color: var(--navy); }

.meldung {
  padding: var(--luft-3) var(--luft-4);
  border-radius: var(--radius);
  background: var(--flaeche-2);
  font-size: var(--gr-klein);
  font-weight: 500;
}
.meldung-fehler { background: var(--rot-fond); color: var(--rot); }
.meldung-erfolg { background: var(--gruen-fond); color: var(--gruen); }
.hinweis-leise { color: var(--text-schwach); font-size: var(--gr-klein); margin-top: var(--luft-3); }

.schluessel-anzeige {
  font-size: var(--gr-gross);
  font-weight: 600;
  letter-spacing: .1em;
  background: var(--flaeche-2);
  border-radius: var(--radius);
  padding: var(--luft-3) var(--luft-4);
  overflow-wrap: anywhere;
  user-select: all;
}
.code-liste {
  list-style: none; margin: var(--luft-4) 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--luft-2);
}
.code-liste li {
  background: var(--flaeche-2); border-radius: var(--radius);
  padding: var(--luft-2) var(--luft-3); letter-spacing: .06em; text-align: center;
  font-weight: 500;
}
.aufklapp { margin-top: var(--luft-4); }
.aufklapp summary { cursor: pointer; color: var(--text-schwach); font-size: var(--gr-klein); }

/* ============ Anmeldung mit Hero (wie Kundenportal-Login) ============ */
body[data-anmeldung="1"] { background: var(--flaeche); }
.hero {
  position: relative;
  background: var(--verlauf-hero);
  color: var(--text-invers);
  text-align: center;
  padding: 64px var(--luft-5) 72px;
  overflow: hidden;
}
.hero-b {
  position: absolute;
  left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  width: 320px; height: 320px;
  opacity: .10;
  filter: brightness(0) invert(1);
  pointer-events: none;
}
.hero::before, .hero::after {
  content: '';
  position: absolute; left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}
.hero::before { width: 360px; height: 360px; border: 1.5px solid rgba(255,255,255,.28); }
.hero::after  { width: 480px; height: 480px; border: 1.5px dashed rgba(255,255,255,.16); }
.hero > * { position: relative; }
.hero h1 { color: var(--text-invers); font-size: 2rem; margin-bottom: var(--luft-2); }
.hero-leise { color: rgba(255,255,255,.75); margin: 0; line-height: 1.5; }
.hero-punkte {
  margin-top: var(--luft-4);
  color: rgba(255,255,255,.7);
  font-size: var(--gr-klein);
  font-weight: 500;
}
.hero-punkte b { color: rgba(255,255,255,.9); font-weight: 500; }
.hero .thema-knopf {
  position: absolute; top: 18px; right: 18px;
  background: var(--flaeche); color: var(--navy);
  border: 0; z-index: 2;
}
.anmelde-bereich { max-width: 460px; margin: 0 auto; padding: var(--luft-6) var(--luft-5) var(--luft-6); }
.anmelde-bereich h1 { margin-bottom: var(--luft-1); }
.anmelde-logo { display: none; }

/* ============ Filter & Listen ============ */
.filterleiste { display: flex; flex-wrap: wrap; gap: var(--luft-3); align-items: end; margin-bottom: var(--luft-4); }
.filter-feld { display: flex; flex-direction: column; gap: 6px; font-size: var(--gr-mini); font-weight: 500; color: var(--text-schwach); }
.filter-feld select { min-height: 44px; width: auto; padding: 8px 12px; font-size: var(--gr-klein); }

.tabellen-rahmen { overflow-x: auto; }
table.liste { width: 100%; border-collapse: collapse; font-size: var(--gr-klein); }
table.liste th {
  text-align: left; padding: var(--luft-3);
  border-bottom: 2px solid var(--rand);
  font-size: var(--gr-mini); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-schwach);
}
table.liste td { padding: var(--luft-3); border-bottom: var(--linie); vertical-align: top; }
table.liste tbody tr:hover { background: var(--flaeche-2); }
table.liste a { color: var(--bb-blau); font-weight: 600; text-decoration: none; }
table.liste a:hover { text-decoration: underline; }
.marke-status { font-size: var(--gr-mini); font-weight: 500; color: var(--text-schwach); margin-left: var(--luft-2); }

/* Ampel: Farbpunkt + Text */
.ampel { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.ampel::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--rand); flex: none; }
.ampel-ueberfaellig::before { background: var(--ampel-ueberfaellig); }
.ampel-kritisch::before { background: var(--ampel-kritisch); }
.ampel-hinweis::before { background: var(--ampel-hinweis); }
.ampel-ok::before { background: var(--ampel-ok); }
.ampel-text { font-size: var(--gr-mini); font-weight: 600; color: var(--text-schwach); }
.ampel-ueberfaellig .ampel-text { color: var(--ampel-ueberfaellig); }
.ampel-kritisch .ampel-text { color: var(--ampel-kritisch); }
.ampel-ok .ampel-text { color: var(--ampel-ok); }
/* Welche Prüfung als Nächstes ansteht – ohne diese Zeile stand in der
   Flotte nur ein Datum, ohne zu sagen wofür (Frage Jerome 17.08.2026). */
.frist-art {
  display: block;
  font-size: var(--gr-mini);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-schwach);
  margin-bottom: 2px;
}
/* Zweiter Block in derselben Zelle: die Frist des angehängten
   Aufliegers. Er hat seit v045 keine eigene Zeile mehr, deshalb steht
   sein Kennzeichen als Herkunft darüber und eine feine Linie trennt
   beide Fristen (Rückmeldung Jerome 17.08.2026). */
.frist-block { display: block; }
.frist-block + .frist-block {
  margin-top: var(--luft-3);
  padding-top: var(--luft-3);
  border-top: var(--linie);
}
.frist-quelle {
  display: inline-block;
  margin-bottom: 4px;
  padding: 1px 7px;
  border: 1px solid var(--rand);
  border-radius: 5px;
  font-size: var(--gr-mini);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text-schwach);
  white-space: nowrap;
}

/* Auslandsfahrten: Haken oder Kreuz. Die Form trägt die Aussage, die
   Farbe verstärkt sie nur – der Klartext hängt als aria-label daran. */
.ausland { font-size: 1.15rem; font-weight: 700; line-height: 1; }
.ausland-ja   { color: var(--ampel-ok); }
.ausland-nein { color: var(--ampel-ueberfaellig); }
/* Kontrollkästchen stehen neben ihrer Beschriftung, nicht darüber.
   Der Selektor nennt bewusst .formular-klein mit: „.formular-klein label"
   weiter unten setzt column und wäre sonst spezifischer als diese Regel. */
.formular-klein label.feld-kaestchen { flex-direction: row; align-items: center; gap: var(--luft-2); }
.formular-klein label.feld-kaestchen input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; flex: none; }

/* ============ Karteikarte ============ */
.feldliste { margin: 0; }
.feldzeile { display: flex; flex-wrap: wrap; gap: 4px var(--luft-4); padding: 10px 0; border-bottom: 1px solid var(--flaeche-2); }
.feldzeile dt { flex: 0 0 220px; font-size: var(--gr-mini); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-schwach); padding-top: 4px; }
.feldzeile dd { margin: 0; flex: 1 1 240px; }
.zugliste { list-style: none; margin: 0; padding: 0; }
.zugliste li { padding: 10px 0; border-bottom: 1px solid var(--flaeche-2); }
.zugliste a { color: var(--bb-blau); font-weight: 600; text-decoration: none; }
.zug-vergangen { opacity: .55; }
.kommende-bereiche { margin-top: var(--luft-5); border-top: var(--linie); padding-top: var(--luft-3); }

details.bearbeiten { margin: var(--luft-3) 0; }
details.bearbeiten > summary {
  cursor: pointer;
  display: inline-block;
  border: 1.5px solid var(--navy);
  color: var(--navy);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: var(--gr-klein);
  font-weight: 600;
  list-style: none;
}
details.bearbeiten > summary::-webkit-details-marker { display: none; }
details.bearbeiten[open] > summary { background: var(--navy); color: var(--text-invers); }
.bearbeiten-eng > summary { padding: 4px 14px; font-size: var(--gr-mini); }
/* Knöpfe INNERHALB einer Karteikartenzeile gehören hinter den Wert, nicht
   als eigener Block darunter – sonst hängen sie eingerückt in der Luft
   (Screenshot Jerome 17.08.2026). Aufgeklappt steht das Formular wieder
   in voller Breite unter der Zeile. */
.feldzeile dd > details.bearbeiten { display: inline-block; margin: 0 0 0 var(--luft-3); vertical-align: baseline; }
.feldzeile dd > details.bearbeiten[open] { display: block; margin: var(--luft-3) 0 0; }
.feldzeile dd > details.bearbeiten + details.bearbeiten { margin-left: var(--luft-2); }
.formular-klein { margin-top: var(--luft-3); display: grid; gap: var(--luft-3); max-width: 460px; }
.formular-klein label { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.formular-klein .knopf { margin-top: 0; }

/* ============ Fußzeile ============ */
.fussleiste {
  flex: none;
  border-top: var(--linie);
  color: var(--text-schwach);
  font-size: var(--gr-mini);
  padding: var(--luft-4) var(--luft-5);
  text-align: center;
}

/* ============ Handy ============ */
@media (max-width: 960px) {
  .verbindung:not(.ist-offline) .verbindung-text { display: none; }
  .marke span { display: none; }
  .kopfleiste-innen, .hauptnav { gap: var(--luft-2); }
}
@media (max-width: 760px) {
  .inhalt { padding: var(--luft-4) var(--luft-3); }
  .kopfleiste-innen { padding: 10px var(--luft-3); }
  .karte { padding: var(--luft-5) var(--luft-4); }
  .hauptnav { order: 3; flex-basis: 100%; margin-left: 0; overflow-x: auto; }
  body { font-size: 1.05rem; }
  .hero { padding: 48px var(--luft-4) 56px; }
  table.liste thead { display: none; }
  table.liste, table.liste tbody, table.liste tr, table.liste td { display: block; width: 100%; }
  table.liste tr { border: var(--linie); border-radius: 14px; margin-bottom: var(--luft-3); background: var(--flaeche); padding: var(--luft-3) var(--luft-4); box-shadow: var(--schatten); }
  table.liste tbody tr:hover { background: var(--flaeche); }
  table.liste td { border: 0; padding: 4px 0; }
  table.liste td::before { content: attr(data-spalte) ': '; font-size: var(--gr-mini); font-weight: 600; color: var(--text-schwach); margin-right: 6px; }
  .feldzeile dt { flex-basis: 100%; }
}

/* Abfahrtkontrolle: große Ankreuzpunkte fürs Handy */
.kontrollliste { list-style: none; margin: var(--luft-4) 0; padding: 0; }
.kontrollpunkt {
  display: flex; align-items: center; gap: var(--luft-3);
  padding: var(--luft-3) var(--luft-4);
  border: 1.5px solid var(--rand); border-radius: var(--radius);
  margin: 0 0 var(--luft-2); font-size: 1.05rem; color: var(--text);
  text-transform: none; letter-spacing: 0; cursor: pointer;
}
.kontrollpunkt input { width: 24px; height: 24px; accent-color: var(--rot); flex: none; }
.kontrollpunkt:has(input:checked) { border-color: var(--rot); background: var(--rot-fond); }
/* Formulare, die in einer Tabellenzelle nebeneinander stehen (Rolle
   ändern, Konto aktivieren, Zugang zurücksetzen). Als inline-flex bleiben
   Auswahlfeld und Knopf auf einer Linie; ohne die Breitenbegrenzung nimmt
   das Auswahlfeld die 100 % aus der Eingabefeld-Regel und drängt den Knopf
   in die nächste Zeile (Screenshot Jerome 17.08.2026).
   Achtung: Es gab bis v031 eine zweite Definition weiter unten, die diese
   hier überschrieben hat – beide sind jetzt hier zusammengeführt. */
.formular-inline {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--luft-2);
  margin: 0 var(--luft-3) var(--luft-2) 0;
}
.formular-inline select, .formular-inline input[type="text"] { width: auto; min-width: 150px; }

/* Zug-Zeile: Auflieger und Kran/Stapler klar beschriftet */
.zug-teil { display: inline-block; margin-right: var(--luft-4); }
.zug-label {
  font-size: var(--gr-mini);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-schwach);
  margin-right: 4px;
}

/* Handy-Kopf entzerren: Zeile 1 Signet links / Bedienung rechts, Zeile 2 Navigation */
@media (max-width: 760px) {
  .kopfleiste-innen { padding: 12px var(--luft-3); row-gap: 10px; }
  .kopf-rechts { margin-left: auto; gap: var(--luft-2); }
  .kopf-link { padding: 7px 12px; }
  .thema-knopf { width: 36px; height: 36px; }
  .hauptnav { padding-top: 2px; border-top: 1px solid var(--flaeche-2); width: 100%; }
  .hauptnav a { padding: 7px 14px; }
}

/* ============ Reihenfolge im Feldkatalog ============ */
.ziehgriff {
  display: inline-block;
  color: var(--text-schwach);
  margin-right: 8px;
  letter-spacing: -2px;
  user-select: none;
}
.sortierzeile {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  margin-left: 4px;
}
.sortierzeile .knopf-leise {
  border: 1px solid var(--rand);
  border-radius: 999px;
  padding: 3px 10px;
  color: var(--text-schwach);
  font-size: 0.82rem;
}
.sortierzeile .knopf-leise:hover { border-color: var(--navy); color: var(--navy); text-decoration: none; }
.sortierbar-gruppe.wird-gezogen,
.sortierbares-feld.wird-gezogen {
  opacity: .65;
  outline: 2px dashed var(--navy);
  outline-offset: 3px;
}

/* ============ Menü in der Kopfzeile ============ */
.menue { position: relative; }
.menue > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--rand);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--navy);
  background: var(--flaeche);
  white-space: nowrap;
}
.menue > summary::-webkit-details-marker { display: none; }
.menue > summary:hover { border-color: var(--navy); }
.menue[open] > summary { background: var(--navy); border-color: var(--navy); color: var(--text-invers); }
/* Drei Striche als Menüzeichen – ohne Bilddatei, skaliert mit der Schrift. */
.menue-strich, .menue-strich::before, .menue-strich::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.menue-strich { position: relative; }
.menue-strich::before, .menue-strich::after { content: ''; position: absolute; left: 0; }
.menue-strich::before { top: -6px; }
.menue-strich::after { top: 6px; }

.menue-inhalt {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  min-width: 232px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(16, 32, 56, .16);
}
.menue-inhalt a {
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
}
.menue-inhalt a:hover { background: var(--flaeche-2); color: var(--navy); }

/* Monteurssicht, erweitert (v126). Der Tagesplan hebt die Uhrzeit
   hervor - sie ist das, wonach man sucht, wenn man wissen will, was als
   Naechstes dran ist. Blau statt der Dringlichkeitsfarben: Ein
   Plantermin ist keine Dringlichkeit, sondern eine Verabredung. */
.plan-eintrag { border-left-color: var(--navy) !important; }
.plan-eintrag > strong {
  display: inline-block; min-width: 3.4rem;
  font-variant-numeric: tabular-nums;
}
/* Wartet auf Material: gedaempft, nicht alarmierend. Es ist nichts
   falsch - es geht nur gerade nicht weiter. */
.prio-wartet { border-left-color: var(--gelb); opacity: .85; }

/* Zwei Kacheln nebeneinander statt der vollen Reihe: Waesche und Fahrt
   ohne Fahrerkarte sind Nebensachen, die man nebenbei eintraegt. */
.kachel-reihe-schmal { margin-top: 14px; }

/* Monteurssicht: Auftragsliste mit Dringlichkeit am linken Rand (v125).
   Dieselbe Sprache wie die uebrigen Listen im Portal - ein Streifen
   links, dessen Farbe man liest, ohne hinzusehen.

   STILLSTAND heisst: Das Fahrzeug steht und verdient kein Geld. Das ist
   die einzige Stufe, die wirklich rot sein darf; wenn alles rot ist,
   ist nichts mehr dringend. */
.auftragsliste > li {
  border-left: 4px solid var(--rand);
  padding: 8px 0 8px 12px;
  margin-bottom: 10px;
}
.auftragsliste a { text-decoration: none; }
.auftragsliste a:hover strong { text-decoration: underline; }
.auftragsliste .hinweis-leise { display: block; margin-top: 3px; }
.prio-stillstand { border-left-color: var(--rot); }
.prio-hoch       { border-left-color: var(--gelb); }
.prio-normal     { border-left-color: var(--rand); }
.prio-niedrig    { border-left-color: var(--rand); }

/* Fahreransicht: "Was ich gemeldet habe" (v125). Derselbe Streifen
   links wie bei "Was noch fehlt" - wer beide Seiten kennt, liest die
   Farbe ohne nachzudenken.

   Gruen heisst hier NICHT "gut", sondern "abgeschlossen". Eine Kontrolle
   ohne Beanstandung und ein erledigter Schaden sind beide fertig; was
   noch offen ist, faellt durch die waermere Farbe auf. */
.meldungsliste > li {
  border-left: 4px solid var(--rand);
  padding: 8px 0 8px 12px;
  margin-bottom: 10px;
}
.meldung-erledigt { border-left-color: var(--gruen); }
.meldung-gesehen  { border-left-color: var(--rand); }
.meldung-neu      { border-left-color: var(--gelb); }
.meldungsliste .hinweis-leise { display: block; margin-top: 3px; }

/* "Was noch fehlt" (v124). Ein farbiger Streifen links statt eines
   Symbols: Er zeigt den Rang, ohne Platz zu kosten, und er bleibt
   lesbar, wenn jemand das Portal in Graustufen ausdruckt - dann
   unterscheidet ihn die Helligkeit.

   Zwei Stufen reichen. Mehr Abstufungen laden dazu ein, alles auf die
   mittlere zu setzen. */
.bereit-liste > li {
  border-left: 4px solid var(--rand);
  padding: 10px 0 10px 12px;
  margin-bottom: 10px;
}
.bereit-schwer { border-left-color: var(--rot); }
.bereit-leicht { border-left-color: var(--gelb); }
.bereit-liste .knopf { margin-top: 8px; }

/* Erfassen in der Offline-Huelle (ab v123). Zwei Aufklapper, damit die
   Seite im Funkloch nicht als lange Formularwand beginnt - der Fahrer
   sucht meist nur eines von beidem.

   Grosse Tippflaechen: Das wird mit Arbeitshandschuhen bedient, im
   Stehen, oft bei schlechtem Licht. Was hier zu klein ist, wird nicht
   benutzt. */
.erfassen-block { margin-top: 12px; }
.erfassen-block > summary {
  display: inline-flex; align-items: center;
  cursor: pointer; list-style: none;
  min-height: 44px;
}
.erfassen-block > summary::-webkit-details-marker { display: none; }
.erfassen-block > form { margin-top: 12px; }
.erfassen-block label { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; }
.erfassen-block textarea,
.erfassen-block select { width: 100%; }
.erfassen-block .kontrollpunkt {
  flex-direction: row; align-items: center; gap: 10px;
  min-height: 44px;
}
.erfassen-meldung { margin-bottom: 12px; }

/* Tankung umbuchen (Auftrag Jerome 26.08.2026): ein aufklappbares
   Formular je Tabellenzeile. <details> statt JavaScript - die
   Inhaltsrichtlinie sperrt Inline-Skripte, und ein Aufklapper, den der
   Browser selbst kann, geht auch offline.

   Das Formular bricht aus der Zelle aus (position: absolute), sonst
   zoege es die ganze Tabellenzeile auf und die Liste waere nicht mehr
   ueberfliegbar. */
.umbuchen { position: relative; }
.umbuchen > summary { list-style: none; cursor: pointer; display: inline-flex; }
.umbuchen > summary::-webkit-details-marker { display: none; }
.umbuchen[open] > form {
  position: absolute; right: 0; z-index: 20;
  min-width: 260px;
  padding: 12px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  display: flex; flex-direction: column; gap: 8px;
}
.umbuchen[open] > form label { display: flex; flex-direction: column; gap: 3px;
                               font-size: .82rem; }
.umbuchen[open] > form select,
.umbuchen[open] > form input { width: 100%; }

@media (max-width: 700px) {
  /* Auf dem Telefon ist rechts kein Platz - dann lieber unter der Zeile
     als halb aus dem Bild heraus. */
  .umbuchen[open] > form { position: static; min-width: 0; box-shadow: none; }
}

/* Abmelden ist seit v121 ein Formular, kein Link (Sicherheitsreview
   4.19) - ein GET-Aufruf meldet niemanden mehr ab. Für den Benutzer
   soll sich nichts ändern: Der Knopf sieht aus wie die Punkte daneben
   und sitzt an derselben Stelle. Sicherheit, die man sieht, wird
   umgangen; diese hier sieht man nicht. */
.abmelden-form { margin: 0; display: contents; }
.menue-abmelden {
  padding: 11px 14px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 500;
  text-align: left;
  width: 100%;
  cursor: pointer;
}
.menue-abmelden:hover { background: var(--flaeche-2); color: var(--navy); }
.menue-trenner { display: block; height: 1px; background: var(--rand); margin: 6px 8px; }

@media (max-width: 560px) {
  .menue-inhalt { position: fixed; left: 12px; right: 12px; top: auto; min-width: 0; }
}

.zwischentitel-klein {
  font-size: 1rem;
  font-weight: 600;
  margin: 18px 0 8px;
  color: var(--text);
}
.punkte-liste { margin: 0 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.punkte-liste li::marker { color: var(--navy); }
.zahlenspalte { font-variant-numeric: tabular-nums; }

/* ============ Unterleiste im Fuhrpark ============ */
.unternav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rand);
}
.unternav-punkt {
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--rand);
  color: var(--text-schwach);
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 500;
  white-space: nowrap;
}
.unternav-punkt:hover { border-color: var(--navy); color: var(--navy); }
.unternav-punkt.aktiv { background: var(--navy); border-color: var(--navy); color: #fff; }
/* Zahl im Reiter (v061): sagt, wie viele Stuecke die Art in der gerade
   gewaehlten Ansicht hat. Traegt bewusst wenig Gewicht - sie ist eine
   Zusatzangabe, nicht die Beschriftung. */
.unternav-zahl {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--flaeche-2);
  color: var(--text-schwach);
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.unternav-punkt.aktiv .unternav-zahl { background: rgba(255,255,255,.22); color: #fff; }

/* ============ Wartungsschalter in der Verwaltung ============ */
.schalter-status {
  display: inline-block;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
}
.schalter-an  { background: var(--rot-fond); color: var(--rot); }
.schalter-aus { background: var(--gruen-fond); color: var(--gruen); }

/* Hinweiszeile über Formularen (Offline-Rückmeldungen) */
.meldung-hinweis { background: var(--gelb-fond); color: var(--text); }
.offline-hinweis { margin-bottom: 10px; }

/* ============ Fahrzeugfotos (v017) ============ */
.foto-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
  margin: 10px 0 4px;
}
.foto-kachel { margin: 0; }
.foto-kachel a { display: block; border-radius: 10px; overflow: hidden; background: var(--flaeche-2); }
.foto-kachel img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.foto-kachel figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-schwach);
  padding: 4px 2px 0;
}
.foto-galerie-mini {
  display: inline-flex;
  gap: 6px;
  margin: 4px 8px 0 0;
  vertical-align: middle;
}
.foto-galerie-mini .foto-kachel { display: inline-block; border-radius: 6px; overflow: hidden; }
.foto-galerie-mini img { display: block; width: 56px; height: 42px; object-fit: cover; }
.knopf-leise {
  border: none;
  background: none;
  color: var(--navy);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0;
}
.knopf-leise:hover { text-decoration: underline; }

/* Rot war hier bis v064 die Grundfarbe. Das ist falsch herum: Die Klasse
   traegt die ZURUECKHALTENDEN Aktionen - Vorschau ansehen, Zugang
   schicken, Excel-Liste, Entfernen eines Listeneintrags. Rot liest sich
   als Warnung, und wer alles rot sieht, sieht am Ende nichts mehr
   (Rueckmeldung Jerome 18.08.2026).
   Fuer Aktionen mit Folgen gibt es jetzt eine eigene Klasse. Sie ist
   bewusst umrandet statt gefuellt: Ein rot gefuellter Knopf zieht mehr
   Aufmerksamkeit auf sich als die Hauptaktion daneben. */
.knopf-gefahr {
  background: none;
  color: var(--rot);
  border: 1px solid var(--rot);
}
.knopf-gefahr:hover { background: var(--rot-fond); color: var(--rot); }

/* ============ Schlüssel & Ausweise ============ */
.inv-zustand {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: var(--gr-mini); font-weight: 600; white-space: nowrap;
}
.inv-bestand      { background: var(--flaeche-2); color: var(--text-schwach); }
.inv-draussen     { background: rgba(29, 79, 145, .12); color: var(--bb-blau); }
.inv-verloren     { background: rgba(200, 32, 32, .12); color: var(--ampel-ueberfaellig); }
.inv-gesperrt     { background: rgba(200, 32, 32, .12); color: var(--ampel-ueberfaellig); }
.inv-ausgemustert { background: var(--flaeche-2); color: var(--text-schwach); }
.inv-empfaenger { font-weight: 600; }
.inv-stelle { font-weight: 500; font-style: italic; color: var(--text-schwach); }
/* „ausgeschieden" und „ohne Quittung" sind Handlungsaufforderungen –
   sie müssen auffallen, ohne wie ein Fehler zu wirken. */
.marke-warnung {
  display: inline-block; margin-left: var(--luft-2); padding: 1px 8px;
  border-radius: 999px; background: rgba(214, 122, 0, .14);
  color: var(--ampel-kritisch); font-size: var(--gr-mini); font-weight: 700;
}
.liste-schlicht { list-style: none; margin: var(--luft-3) 0 0; padding: 0; display: grid; gap: 6px; }
.liste-schlicht li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--luft-2); }
/* Formular in einer Listenzeile (Stilllegen, Zurückbuchen): soll nicht
   umbrechen und keinen eigenen Abstand mitbringen. */
.reihenform { display: inline; margin: 0; }
.kasten-gross { width: 26px; height: 26px; }
.quittung-text { margin-top: var(--luft-5); font-size: var(--gr-klein); line-height: 1.6; }
.unterschriftsfeld {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--luft-5); margin-top: 56px;
}
.unterschrift-linie { display: block; border-top: 1px solid var(--text); height: 1px; }
.unterschrift-text { display: block; margin-top: 6px; font-size: var(--gr-mini); color: var(--text-schwach); }

/* Werkstattauftrag: Zustandsmarken. „Fahrzeug steht" muss ins Auge
   springen – ein stehender LKW kostet am meisten. */
.wa-marke {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: var(--gr-mini); font-weight: 600; white-space: nowrap;
}
.wa-offen       { background: rgba(29, 79, 145, .12); color: var(--bb-blau); }
.wa-arbeit      { background: rgba(214, 122, 0, .16); color: var(--ampel-kritisch); }
.wa-erledigt    { background: var(--gruen-fond); color: var(--gruen); }
.wa-abgebrochen { background: var(--flaeche-2); color: var(--text-schwach); }
.wa-hoch        { background: rgba(214, 122, 0, .16); color: var(--ampel-kritisch); }
.wa-stillstand  { background: var(--rot-fond); color: var(--rot); font-weight: 700; }
table.liste tfoot td { padding: var(--luft-3); border-top: 2px solid var(--rand); }

/* Vorschau einer Mail: eigener Rahmen, damit klar ist, wo der Inhalt der
   Nachricht anfängt und wo die Portalseite aufhört. */
.mail-vorschau {
  margin-top: var(--luft-4);
  padding: var(--luft-4);
  border: var(--linie);
  border-radius: 12px;
  background: #fff;
  color: #222;
  overflow-x: auto;
}
.knopfreihe { display: flex; flex-wrap: wrap; gap: var(--luft-3); margin-top: var(--luft-3); }

/* ============ Druck ============ */
@media print {
  .kopfleiste, .fussleiste, .filterleiste, .hauptnav, .thema-knopf, .verbindung,
  .kommende-bereiche, details.bearbeiten, .hero, .nicht-drucken, .zurueck { display: none !important; }
  body { background: #fff; color: #000; }
  .karte { border: none; box-shadow: none; padding: 0; }
  /* Die Quittung geht aufs Papier – dort trägt Farbe nichts, und die
     Unterschriftslinien müssen sichtbar schwarz sein. */
  .unterschrift-linie { border-top-color: #000; }
  .inv-zustand { background: none; color: #000; border: 1px solid #000; }
}

/* =====================================================================
   ANMELDESEITE – übernommen aus dem Kundenportal (v068)
   Vorgabe Jerome 18.08.2026: „Vor allem soll die Anmeldeseite gleich
   aussehen." Zweigeteilt – links das Markenpanel mit dem ruhig
   pulsierenden B, rechts das Formular.

   Zwei Unterschiede zum Original, beide notwendig:
   1. Die Variablen heißen hier anders (--navy statt --blue usw.). Werte
      und Wirkung sind dieselben.
   2. Das Kundenportal schaltet das Thema über ein inline-onclick. Das
      verbietet unsere Inhaltsrichtlinie – der vorhandene Themenknopf
      des Portals übernimmt das hier.
   ===================================================================== */

.auth-split { min-height: 100vh; display: flex; }

.auth-brand {
  flex: 0 0 42%;
  background: linear-gradient(165deg, #0e2a56 0%, #173e79 50%, #1a4a8f 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 3rem 2.5rem; position: relative; overflow: hidden;
}
.auth-brand::before {
  content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%;
  background: rgba(255,255,255,.025); top: -150px; right: -180px;
}
.auth-brand::after {
  content: ''; position: absolute; width: 350px; height: 350px; border-radius: 50%;
  background: rgba(255,255,255,.02); bottom: -100px; left: -80px;
}
.auth-brand h2 {
  color: #fff; font-family: var(--schrift-titel); font-size: 1.4rem; font-weight: 800;
  letter-spacing: .5px; margin: 0 0 .4rem; position: relative; z-index: 3;
}
.auth-brand p {
  color: rgba(255,255,255,.5); font-size: .82rem; margin: 0; position: relative;
  z-index: 3; text-align: center; line-height: 1.6;
}
.auth-brand-features { display: flex; gap: 1.2rem; margin-top: 2.5rem; position: relative; z-index: 3; }
.auth-brand-feat { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.4); font-size: .7rem; letter-spacing: .3px; }
.auth-brand-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.3); }
.auth-brand-footer {
  position: absolute; bottom: 1.5rem; left: 0; right: 0; text-align: center;
  z-index: 3; color: rgba(255,255,255,.25); font-size: .68rem;
}

.auth-form-panel {
  flex: 1; background: var(--flaeche); display: flex; flex-direction: column;
  justify-content: center; padding: 2.5rem 3.5rem; position: relative; overflow-y: auto;
}
.auth-form-inner { max-width: 420px; width: 100%; margin: 0 auto; }
.auth-form-head h1 {
  font-family: var(--schrift-titel); font-size: 1.3rem; font-weight: 800;
  color: var(--text-stark); margin: 0 0 .3rem;
}
.auth-form-head p { font-size: .82rem; color: var(--text-schwach); margin: 0 0 1.5rem; }
.auth-footer {
  margin-top: 1.5rem; padding-top: 1rem; border-top: var(--linie);
  font-size: .7rem; color: var(--text-schwach); text-align: center; line-height: 1.7;
}

/* B-Animation. Sie läuft dauerhaft – deshalb steht am Ende die
   Rücksicht auf Systeme, die Bewegung abbestellt haben. */
.auth-b-anim { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 500px; height: 500px; pointer-events: none; }
.auth-b-icon { position: absolute; top: 50%; left: 50%; width: 180px; height: 180px; transform: translate(-50%,-50%); opacity: .2; animation: bPulse 4s ease-in-out infinite; z-index: 2; }
@keyframes bPulse { 0%,100% { transform: translate(-50%,-50%) scale(1); opacity: .2; } 50% { transform: translate(-50%,-50%) scale(1.1); opacity: .4; } }
.auth-b-glow { position: absolute; top: 50%; left: 50%; width: 280px; height: 280px; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%); animation: glowPulse 4s ease-in-out infinite; z-index: 1; }
@keyframes glowPulse { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.3); } }
.auth-b-ring1 { position: absolute; top: 50%; left: 50%; width: 320px; height: 320px; margin: -160px 0 0 -160px; border: 1.5px solid rgba(255,255,255,.12); border-radius: 50%; animation: ringR1 20s linear infinite; }
.auth-b-ring1::before { content: ''; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; background: rgba(255,255,255,.25); border-radius: 50%; box-shadow: 0 0 20px rgba(255,255,255,.15), 0 0 40px rgba(255,255,255,.08); }
@keyframes ringR1 { to { transform: rotate(360deg); } }
.auth-b-ring2 { position: absolute; top: 50%; left: 50%; width: 440px; height: 440px; margin: -220px 0 0 -220px; border: 1px dashed rgba(255,255,255,.07); border-radius: 50%; animation: ringR2 30s linear infinite; }
.auth-b-ring2::before { content: ''; position: absolute; bottom: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; background: rgba(255,255,255,.18); border-radius: 50%; box-shadow: 0 0 15px rgba(255,255,255,.1); }
@keyframes ringR2 { to { transform: rotate(-360deg); } }
.auth-b-particle { position: absolute; width: 4px; height: 4px; background: rgba(255,255,255,.2); border-radius: 50%; opacity: 0; animation: particleF 6s ease-in-out infinite; }
@keyframes particleF { 0%,100% { opacity: 0; transform: translateY(0) scale(1); } 20% { opacity: .5; } 50% { opacity: .3; transform: translateY(-30px) scale(.6); } 80% { opacity: 0; } }
.auth-b-particle:nth-child(3) { top: 8%;  left: 15%; animation-delay: 0s; }
.auth-b-particle:nth-child(4) { top: 20%; left: 85%; animation-delay: 1s; }
.auth-b-particle:nth-child(5) { top: 75%; left: 12%; animation-delay: 2s; }
.auth-b-particle:nth-child(6) { top: 88%; left: 78%; animation-delay: 3s; }
.auth-b-particle:nth-child(7) { top: 45%; left: 92%; animation-delay: 4s; }
.auth-b-particle:nth-child(8) { top: 10%; left: 60%; animation-delay: .5s; }

@media (max-width: 768px) {
  .auth-split { flex-direction: column; }
  .auth-brand { flex: none; padding: 2.5rem 1.5rem 2rem; min-height: 280px; }
  .auth-b-anim { width: 300px; height: 300px; }
  .auth-b-icon { width: 100px; height: 100px; }
  .auth-b-ring1 { width: 200px; height: 200px; margin: -100px 0 0 -100px; }
  .auth-b-ring2 { width: 270px; height: 270px; margin: -135px 0 0 -135px; }
  .auth-b-glow { width: 180px; height: 180px; }
  .auth-brand h2 { font-size: 1.1rem; }
  .auth-brand p { font-size: .75rem; }
  .auth-brand-features { margin-top: 1.2rem; gap: .8rem; }
  .auth-brand-footer { display: none; }
  .auth-form-panel { padding: 2rem 1.5rem; }
}

/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt das
   Panel ruhig – die Marke wirkt auch ohne Kreisen. */
@media (prefers-reduced-motion: reduce) {
  .auth-b-icon, .auth-b-glow, .auth-b-ring1, .auth-b-ring2, .auth-b-particle {
    animation: none;
  }
  .auth-b-particle { opacity: .25; }
}

/* =====================================================================
   BAUSTEINE DES KUNDENPORTALS (v069)
   „Zieh den Rest durch" – Jerome, 18.08.2026.

   Die Regeln stehen bewusst am ENDE der Datei und überschreiben die
   älteren, statt sie zu ersetzen. Grund: Rund 1200 Zeilen darüber
   hängen an denselben Klassen. Ein Herausoperieren hätte an vielen
   Stellen etwas verschoben, das niemand nachprüfen kann; so ist die
   Änderung an einer Stelle versammelt und im Zweifel mit einem Schnitt
   wieder zurückzunehmen.

   Übertragen aus assets/portal.css des Kundenportals: Karten (.card),
   Knöpfe (.btn), Formularfelder (.form-input), Tabellen (.tbl) und
   Meldungen (.alert).
   ===================================================================== */

/* ── Karten ───────────────────────────────────────────────────────── */
/* Das Kundenportal nimmt weniger Rundung und einen leichteren Schatten,
   der erst beim Überfahren zunimmt. */
.karte {
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 1px 3px rgba(27,58,107,.04);
  padding: 1.4rem;
  transition: box-shadow .2s ease;
}
.karte:hover { box-shadow: var(--schatten); }
.karte-druckbar:hover { box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 1px 3px rgba(27,58,107,.04); }

/* ── Knöpfe ───────────────────────────────────────────────────────── */
/* Dort sind Knöpfe inline und in Outfit gesetzt, nicht blockbreit. Die
   volle Breite bleibt dem Hauptknopf der Anmeldung vorbehalten. */
.knopf {
  display: inline-flex;
  align-items: center; justify-content: center; gap: .4rem;
  width: auto;
  min-height: 0;
  padding: .7rem 1.6rem;
  font-family: var(--schrift-titel);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .01em;
  border-radius: var(--radius-kl);
  box-shadow: none;
  transition: all .2s;
}
.knopf:hover { background: var(--navy-hell); box-shadow: 0 4px 16px rgba(23,62,121,.25); }
.knopf:active { transform: scale(.98); }
.knopf:disabled { opacity: .3; cursor: not-allowed; pointer-events: none; }
.knopf-klein { padding: .45rem 1rem; font-size: .88rem; min-height: 40px; }
.knopf-halb, .auth-form-inner .knopf { width: 100%; display: flex; }
.knopf-zweit {
  background: var(--flaeche); color: var(--navy);
  border: 1px solid var(--rand);
}
.knopf-zweit:hover { background: var(--flaeche-2); color: var(--navy); box-shadow: none; }
/* Gefahr wie .btn-danger dort: getönt statt gefüllt, erst beim
   Überfahren voll rot. */
.knopf-gefahr {
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.2);
  color: var(--rot);
}
.knopf-gefahr:hover { background: var(--rot); color: #fff; border-color: var(--rot); box-shadow: none; }

/* ── Formularfelder ───────────────────────────────────────────────── */
input[type="text"], input[type="password"], input[type="email"], input[type="url"],
input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"],
input[type="search"], select, textarea {
  border: 1px solid var(--rand);
  border-radius: var(--radius-kl);
  font-family: var(--schrift);
  font-size: .91rem;
  padding: .65rem 1rem;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(23,62,121,.06);
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--text-schwach); opacity: .6; }
label {
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--text-schwach);
  text-transform: none;
}

/* ── Tabellen ─────────────────────────────────────────────────────── */
/* border-separate statt collapse: Bei collapse brechen die Zeilenlinien
   beim seitlichen Scrollen am Handy ab (WebKit) – dieselbe Lehre wie
   im Kundenportal, dort in v678 gefunden. */
table.liste {
  border-collapse: separate;
  border-spacing: 0;
  font-size: .86rem;
}
table.liste th {
  font-family: var(--schrift-titel);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
  padding: .65rem 1rem;
  background: var(--seite);
}
table.liste td { padding: .7rem 1rem; vertical-align: middle; }
table.liste tr:last-child td { border-bottom: none; }
table.liste tbody tr:hover td { background: rgba(23,62,121,.02); }
table.liste tbody tr:hover { background: transparent; }

/* ── Meldungen ────────────────────────────────────────────────────── */
/* Getönt mit farbigem Rand statt flächig – so drängt sich eine Meldung
   weniger auf und bleibt trotzdem eindeutig. */
.meldung {
  padding: .75rem 1.1rem;
  font-size: .86rem;
  line-height: 1.5;
  border: 1px solid var(--rand);
  border-radius: var(--radius-kl);
}
.meldung-fehler  { background: rgba(239,68,68,.05);  border-color: rgba(239,68,68,.2);  color: #b91c1c; }
.meldung-erfolg  { background: rgba(16,185,129,.05); border-color: rgba(16,185,129,.2); color: #065f46; }
.meldung-hinweis { background: rgba(59,130,246,.05); border-color: rgba(59,130,246,.2); color: #1e40af; }

[data-theme="dunkel"] .meldung-fehler  { color: #fca5a5; }
[data-theme="dunkel"] .meldung-erfolg  { color: #6ee7b7; }
[data-theme="dunkel"] .meldung-hinweis { color: #93c5fd; }
[data-theme="dunkel"] table.liste th { background: var(--flaeche-2); }
[data-theme="dunkel"] table.liste tbody tr:hover td { background: rgba(75,130,209,.06); }

/* Anmeldeseite: Feinschliff nach dem Vergleich mit dem Kundenportal
   (Screenshots Jerome 18.08.2026).

   1. Der Themenknopf saß im Formularfluss und hing dadurch frei neben
      der Karte. Im Kundenportal klebt er oben rechts am Fensterrand.
   2. Titel, Untertitel und Merkmale brauchen einen eigenen Stapelplatz
      ÜBER der Animation – sonst schiebt sich das kreisende B davor.
      Die Animation liegt absolut in der Mitte, der Text im Fluss;
      ohne z-index gewinnt das später kommende Element. */
.auth-form-panel #thema,
.auth-split #thema {
  position: fixed;
  top: 1.2rem; right: 1.2rem;
  z-index: 300;
  width: 34px; height: 34px;
  margin: 0;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  color: var(--text);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 1px 3px rgba(27,58,107,.04);
}
.auth-form-panel #thema:hover,
.auth-split #thema:hover { border-color: var(--navy); color: var(--navy); }

/* Der Text gehört nach vorn, die Zier nach hinten.
   ACHTUNG: NICHT pauschal position:relative setzen – das überschrieb in
   v070 das position:absolute der Fußzeile, und "Holdorf · Niedersachsen"
   landete mitten im Logo statt am unteren Rand (Screenshot Jerome
   18.08.2026). Nur der z-index gehört hierher; wer eine eigene
   Positionierung hat, behält sie. */
.auth-brand > *:not(.auth-b-anim) { z-index: 3; }
.auth-brand h2, .auth-brand p, .auth-brand-features { position: relative; }

/* Anmeldeseite: Begrüßungskasten, Passworthinweis und Fußzeile (v071) */
.auth-info {
  background: rgba(23,62,121,.06);
  border: 1px solid var(--rand);
  border-radius: var(--radius-kl);
  padding: .75rem .9rem;
  margin-bottom: 1.2rem;
  font-size: .78rem;
  line-height: 1.55;
  color: var(--text);
}
.auth-pw-hinweis {
  display: block; text-align: center;
  margin-top: .8rem; font-size: .76rem;
  color: var(--text-schwach);
}
.auth-footer a { color: var(--navy); text-decoration: none; font-weight: 600; }
.auth-footer a:hover { text-decoration: underline; }

/* =====================================================================
   KOPFLEISTE UND KACHELN nach Kundenportal-Art (v071)
   Vorgabe Jerome 18.08.2026 – Screenshots der beiden Startseiten.
   ===================================================================== */

/* Die Leiste bleibt beim Blättern oben stehen und trägt statt eines
   Rahmens nur eine feine Linie – wie die .topbar dort. */
.kopfleiste {
  position: sticky; top: 0; z-index: 200;
  /* min-height statt height: Die feste Hoehe stammt aus v070, als die
     Leiste EINE Zeile hatte. Seit die Navigation eine zweite Zeile
     bekommen hat, ragte sie aus dem Kasten heraus und schnitt die
     Ueberschrift an (Screenshot Jerome 18.08.2026).
     Kein seitliches Padding mehr: Das gehoert in die inneren Kaesten,
     die ihre eigene Breite und Zentrierung mitbringen. Am Kopf selbst
     hielt es den Navigationsstreifen 2rem vom Rand weg, sodass sein
     weisser Grund nicht durchlief. */
  min-height: 64px;
  padding: 0;
  background: rgba(255,255,255,.96);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  border-bottom: 0;
  backdrop-filter: saturate(180%) blur(8px);
}
[data-theme="dunkel"] .kopfleiste {
  background: rgba(12,18,34,.92);
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
}
.marke { font-family: var(--schrift-titel); font-weight: 700; letter-spacing: -.01em; }

/* Bedienelemente rechts: runde Pillen statt eckiger Knöpfe. */
.kopf-rechts .kopf-link,
.kopf-rechts .thema-knopf,
.kopf-rechts .neuladen-knopf,
.menue-knopf {
  border-radius: 999px;
  border: 1px solid var(--rand);
  background: var(--flaeche);
  color: var(--text);
  font-size: .78rem;
  font-weight: 600;
  transition: background .15s, border-color .15s, color .15s;
}
.kopf-rechts .kopf-link:hover,
.kopf-rechts .thema-knopf:hover,
.menue-knopf:hover { background: var(--flaeche-2); border-color: var(--navy); color: var(--navy); }

/* Kennzahlen: viele kleine statt weniger großer. Das Kundenportal legt
   sie in eine Reihe, die je nach Platz umbricht – so passen sieben
   Zahlen auf einen Blick, statt dass fünf Kacheln die Seite füllen. */
.kachelreihe, .kachel-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .7rem;
  margin-bottom: 2rem;
}
.kachel {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-top: 3px solid var(--navy);
  border-radius: var(--radius);
  padding: 1.1rem 1.35rem;
  box-shadow: none;
  text-align: left;
}
.kachel:hover { box-shadow: var(--schatten); }
.kachel-titel, .kachel dt {
  font-size: .72rem; font-weight: 600;
  letter-spacing: .01em; color: var(--text-schwach);
  margin-bottom: .35rem; text-transform: uppercase;
}
.kachel-zahl {
  font-family: var(--schrift-titel);
  font-size: 1.45rem; font-weight: 700;
  color: var(--text-stark);
}
.kachel-gruen  { border-top-color: var(--gruen); }
.kachel-gruen .kachel-zahl { color: var(--gruen); }
.kachel-warnung { border-top-color: var(--rot); }
.kachel-warnung .kachel-zahl { color: var(--rot); }
.kachel-inaktiv { border-top-color: var(--rand); opacity: .6; }

/* „Was gerade läuft" auf der Startseite (v071).
   Eine Liste von Einstiegspunkten, keine Kachelwand: Jede Zeile führt
   direkt in die passende gefilterte Ansicht. Was dich selbst betrifft
   oder überfällig ist, steht oben und trägt einen roten Strich. */
.laufliste { list-style: none; margin: 0; padding: 0; }
.laufzeile {
  border-left: 3px solid var(--rand);
  padding: .55rem 0 .55rem .9rem;
  margin-bottom: .35rem;
  font-size: .9rem;
}
.laufzeile-hoch { border-left-color: var(--rot); }
.laufzeile a { color: var(--text); text-decoration: none; font-weight: 500; }
.laufzeile a:hover { color: var(--navy); text-decoration: underline; }
.laufzeile-hoch a { font-weight: 600; }

/* =====================================================================
   HAUPTLEISTE, BENUTZERCHIP UND ABMELDEN (v072)
   Nach dem Vorbild der Topbar im Kundenportal.

   Beides – Leiste UND Menüknopf – steht im HTML; welches erscheint,
   entscheidet allein die Breite. Damit braucht es kein JavaScript und
   die Leiste kann auf dem Handy nicht umbrechen. Genau daran war sie
   im Sommer gescheitert.
   ===================================================================== */

.kopf-navzeile { display: none; }
.hauptleiste { display: none; }
.benutzerchip { display: none; }
.abmelden-knopf { display: none; }

@media (min-width: 1024px) {
  /* Ab Tablet quer: Leiste zeigen, Menüknopf verstecken. */
  .menue { display: none; }

  /* Eigene Zeile unter Marke und Benutzer – so hält es das
     Kundenportal. In v072 lag die Leiste neben dem Logo in
     .kopf-rechts: zwölf Punkte, Chip und Abmeldeknopf in einer Zeile
     brachen um und liefen in die Überschrift (Screenshot Jerome
     18.08.2026). Der Streifen trägt oben eine feine Linie und darf
     zur Not waagerecht rollen, statt umzubrechen. */
  .kopf-navzeile {
    display: block;
    border-top: var(--linie);
    background: var(--flaeche);
  }
  .kopf-navzeile .hauptleiste {
    max-width: var(--breite);
    margin: 0 auto;
    /* Die Punkte haben selbst .7rem Innenabstand. Ohne den Abzug steht
       "Start" um genau diesen Betrag weiter rechts als die Ueberschrift
       darunter, und die Leiste fluchtet nicht mit dem Inhalt. */
    padding: 0 calc(var(--luft-5) - .7rem);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .kopf-navzeile .hauptleiste::-webkit-scrollbar { display: none; }

  .hauptleiste {
    display: flex;
    align-items: center;
    gap: .15rem;
  }
  .hauptleiste a {
    font-family: var(--schrift-titel);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--text-schwach);
    text-decoration: none;
    padding: .5rem .7rem;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color .18s, border-color .18s;
  }
  .hauptleiste a:hover { color: var(--text-stark); }
  /* Der aktive Punkt trägt den Unterstrich – wie dort. */
  .hauptleiste a.aktiv { color: var(--navy); border-bottom-color: var(--navy); }

  .benutzerchip {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--flaeche); border: 1px solid var(--rand);
    border-radius: 999px;
    padding: .22rem .7rem .22rem .28rem;
    text-decoration: none;
    transition: background .15s, border-color .15s;
  }
  .benutzerchip:hover { background: var(--flaeche-2); border-color: var(--navy); }
  .benutzerchip-kuerzel {
    width: 30px; height: 30px; border-radius: 999px;
    background: var(--navy); color: #fff;
    font-family: var(--schrift-titel); font-weight: 700; font-size: .76rem;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; letter-spacing: .2px;
  }
  .benutzerchip-text { display: flex; flex-direction: column; line-height: 1.15; }
  .benutzerchip-name { font-size: .78rem; font-weight: 600; color: var(--text-stark); }
  .benutzerchip-rolle { font-size: .66rem; color: var(--text-schwach); }

  /* Abmelden ist rot und gefüllt – die einzige Stelle, an der das
     Kundenportal eine Aktion so hervorhebt. */
  .abmelden-knopf {
    display: inline-flex; align-items: center;
    background: var(--rot); border: 1px solid var(--rot); color: #fff;
    border-radius: 9px;
    padding: .34rem .9rem;
    font-family: var(--schrift-titel);
    font-size: .78rem; font-weight: 700;
    text-decoration: none;
    transition: background .15s;
  }
  .abmelden-knopf:hover { background: #dc2626; border-color: #dc2626; color: #fff; }
  /* Als <button> bringt das Element eigene Vorgaben mit, die ein <a>
     nicht hatte: Schrift des Betriebssystems und ein Zeigefinger, der
     fehlt. Beides hier geradeziehen, sonst faellt der Knopf aus der
     Zeile. */
  .abmelden-knopf { font: inherit; font-family: var(--schrift-titel);
                    font-size: .78rem; font-weight: 700; cursor: pointer; }

  /* Die Marke braucht daneben weniger Platz. */
  .kopfleiste .marke span { font-size: .95rem; }
}

/* Auf sehr breiten Schirmen darf die Leiste großzügiger stehen. */
@media (min-width: 1400px) {
  .hauptleiste { gap: .35rem; }
  .hauptleiste a { font-size: .84rem; padding: .5rem .9rem; }
}


/* =====================================================================
   Listen auf der Startseite (v073)
   Jerome wollte sehen, WAS ansteht, nicht nur wie viel. Zwei Spalten
   nebeneinander, sobald Platz ist – darunter untereinander.
   ===================================================================== */

.start-spalten {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--luft-4);
  margin-top: var(--luft-4);
}
@media (min-width: 900px) {
  .start-spalten { grid-template-columns: 1fr 1fr; }
}

.startliste { list-style: none; margin: 0; padding: 0; }
.startliste > li { border-top: var(--linie); }
.startliste > li:first-child { border-top: 0; }

/* Die ganze Zeile ist anklickbar – auf dem Handy trifft man sonst den
   schmalen Text nicht. */
.startliste > li > a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: .7rem .2rem;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-kl);
  transition: background .15s;
}
.startliste > li > a:hover { background: var(--seite); }

.startliste-kopf {
  display: flex; align-items: baseline; gap: .6rem;
  justify-content: space-between;
}
.startliste-kopf strong {
  font-family: var(--schrift-titel);
  font-size: .95rem;
  color: var(--text-stark);
}
.startliste-status {
  font-size: .78rem;
  color: var(--text-schwach);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Heute und morgen fällig – das muss ins Auge springen. */
.startliste-status.ist-dringend { color: var(--rot); font-weight: 600; }

.startliste-text  { font-size: .88rem; color: var(--text); }
.startliste-fuss  { font-size: .78rem; color: var(--text-schwach); }


/* =====================================================================
   Werkstattplan (v073)
   Links die Aufträge ohne Termin, rechts der Tag: senkrecht die Uhrzeit,
   waagerecht die Monteure. Die Höhe einer Karte entspricht ihrer Dauer –
   so sieht man auf einen Blick, wie voll der Tag ist.
   ===================================================================== */

/* Reiter innerhalb eines Menüpunkts. */
.unterleiste {
  display: flex;
  gap: .25rem;
  margin: 0 0 var(--luft-4);
  border-bottom: var(--linie);
}
.unterleiste a {
  font-family: var(--schrift-titel);
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-schwach);
  text-decoration: none;
  padding: .55rem 1rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.unterleiste a:hover { color: var(--text-stark); }
.unterleiste a.aktiv { color: var(--navy); border-bottom-color: var(--navy); }

.kalender-kopf {
  display: flex; align-items: center; gap: var(--luft-3); flex-wrap: wrap;
}
.kalender-tag { display: flex; flex-direction: column; line-height: 1.2; }
.kalender-tag strong { font-family: var(--schrift-titel); font-size: 1.05rem; color: var(--text-stark); }
.kalender-tag span { font-size: .82rem; color: var(--text-schwach); font-variant-numeric: tabular-nums; }
.kalender-sprung { display: flex; align-items: flex-end; gap: .5rem; margin-left: auto; }

.kalender-flaeche {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--luft-4);
  align-items: start;
}
@media (min-width: 1100px) {
  /* Erst wenn wirklich Platz ist, steht der Vorrat neben dem Plan.
     Darunter liegt er darüber – zwei enge Spalten nützen niemandem. */
  .kalender-flaeche { grid-template-columns: 240px 1fr; }
}

/* Ist nichts zu verplanen, soll die leere Liste nicht so viel Platz
   einnehmen wie eine volle. */
.kalender-vorrat:has(.hinweis-leise:only-of-type) { max-height: none; }

.kalender-vorrat {
  background: var(--flaeche);
  border: var(--linie);
  border-radius: var(--radius);
  padding: var(--luft-3);
  display: flex; flex-direction: column; gap: .5rem;
  max-height: 78vh; overflow-y: auto;
}

/* Das Gitter darf waagerecht rollen: Bei acht Monteuren passt der Tag
   sonst auf keinen Laptop. */
.kalender-gitter-huelle {
  overflow-x: auto;
  background: var(--flaeche);
  border: var(--linie);
  border-radius: var(--radius);
}
.kalender-gitter {
  position: relative;
  display: grid;
  /* Spalten teilen sich den Platz, statt bei wenigen Monteuren links zu
     kleben und rechts eine leere Flaeche zu lassen. 190px Mindestbreite,
     damit Kennzeichen und Auftragstext nebeneinander lesbar bleiben. */
  /* Die Spaltenzahl kommt als Klasse (.kspalten-N), NICHT als
     CSS-Variable im style-Attribut: Die CSP dieses Portals verbietet
     Inline-Styles (style-src 'self'), ein style="--spalten: 3" wird vom
     Browser verworfen. Genau daran lag der zerfallene Kalender aus drei
     Screenshots (v073 bis v087) - lokal ohne CSP-Kopf sah alles richtig
     aus, live fiel jede Zelle in eine einzige Auto-Spalte. */
  grid-template-columns: 62px minmax(190px, 1fr);
  grid-auto-rows: 30px;
  min-width: 100%;
}
.kalender-ecke { position: sticky; top: 0; z-index: 3; background: var(--flaeche); }
.kalender-spaltenkopf {
  position: sticky; top: 0; z-index: 3;
  background: var(--flaeche);
  border-bottom: 2px solid var(--rand);
  border-left: var(--linie);
  padding: .5rem .6rem;
  font-family: var(--schrift-titel); font-size: .82rem; font-weight: 600;
  color: var(--text-stark);
  white-space: nowrap;
}
.kalender-zeit {
  font-size: .74rem; color: var(--text-schwach);
  text-align: right; padding-right: .5rem;
  font-variant-numeric: tabular-nums;
  /* Die Beschriftung sitzt AUF der Stundenlinie, nicht darunter - so
     liest man die Uhrzeit als Grenze zwischen zwei Stunden. */
  transform: translateY(-.55em);
  background: var(--flaeche);
}
.kalender-zelle {
  border-left: var(--linie);
}
/* Nur die vollen Stunden bekommen eine Linie. Vorher trug jede halbe
   Stunde eine gestrichelte - bei 24 Schritten waren das 24 Striche
   uebereinander, und das Gitter flimmerte mehr als es half. Die halben
   Stunden bleiben trotzdem Ablegepunkte. */
.kalender-zelle.ist-stunde { border-top: 1px solid var(--rand); }
.kalender-zeit.ist-stunde  { border-top: 1px solid transparent; }

/* Jede zweite Spalte leicht getoent: Bei mehreren Monteuren nebeneinander
   verrutscht man sonst beim Ablegen in die Nachbarspalte. */
.kalender-zelle:nth-child(odd) { background: color-mix(in srgb, var(--seite) 45%, transparent); }
/* Wohin die Karte fällt, wenn man jetzt loslasst. */
.kalender-zelle.ist-ziel {
  background: color-mix(in srgb, var(--navy) 12%, transparent);
  box-shadow: inset 0 0 0 2px var(--navy);
}

.plankarte {
  background: var(--flaeche);
  border: var(--linie);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius-kl);
  padding: .4rem .5rem;
  display: flex; flex-direction: column; gap: 1px;
  cursor: grab;
  font-size: .8rem;
}
.plankarte:active { cursor: grabbing; }
.plankarte.wird-gezogen { opacity: .45; }
/* Stillstand heißt: Das Fahrzeug steht und verdient nichts. Das muss
   im Plan sofort ins Auge fallen. */
.plankarte.ist-stillstand { border-left-color: var(--rot); }
.plankarte.ist-extern { border-left-color: var(--gruen); }

.plankarte-objekt { font-family: var(--schrift-titel); font-weight: 600; color: var(--text-stark); }
.plankarte-titel  { color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.plankarte-fuss   { font-size: .72rem; color: var(--text-schwach); }
.plankarte-zeit   { font-size: .72rem; color: var(--text-schwach); font-variant-numeric: tabular-nums; }

/* Geplante Karten liegen über dem Gitter; Lage und Höhe kommen aus
   Beginn und Dauer. */
.plankarte-geplant {
  position: relative;
  /* Lage kommt jetzt als fertiger inline-Stil vom Server - siehe
     kalender.php. Hier steht sie bewusst NICHT mehr, sonst ueberschreibt
     das Stylesheet die berechnete Zeile wieder. */
  margin: 1px 2px;
  overflow: hidden;
}
.plankarte-geplant .plankarte-link {
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 1px;
}
.plankarte-weg { position: absolute; top: 2px; right: 2px; }
.plankarte-weg button {
  border: 0; background: transparent; cursor: pointer;
  color: var(--text-schwach); font-size: 1rem; line-height: 1;
  padding: 0 .2rem; border-radius: var(--radius-kl);
}
.plankarte-weg button:hover { color: var(--rot); background: var(--seite); }

.plankarte-handisch { margin-top: .3rem; }
.plankarte-handisch summary {
  font-size: .74rem; color: var(--navy); cursor: pointer;
}
.plankarte-handisch form { display: flex; flex-direction: column; gap: .35rem; margin-top: .4rem; }

/* Wer nicht ziehen kann oder will, sieht dasselbe Ergebnis über die
   Formulare. Auf dem Handy ist das ohnehin der Normalfall. */
@media (pointer: coarse) {
  .plankarte { cursor: default; }
}


/* Warnbalken mit Weg zum Ziel (v073).
   Der Balken sagte, wo man nachsehen soll, führte aber nicht hin. */
.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--luft-3);
  flex-wrap: wrap;
}
.banner .knopf { flex: 0 0 auto; }

/* =====================================================================
   Werkstatt: eigenes Fahrzeug oder Kundenfahrzeug (v077)
   Zwei verschiedene Betriebe unter einem Dach – hier entstehen Kosten,
   dort ein Erlös. Der Monteur in der Halle muss das sehen, ohne den
   Auftrag zu öffnen.
   ===================================================================== */

.anlegewege { display: grid; grid-template-columns: 1fr; gap: var(--luft-3); margin-bottom: var(--luft-4); }
@media (min-width: 900px) { .anlegewege { grid-template-columns: 1fr 1fr; } }

/* Der farbige Rand trägt die Unterscheidung, nicht nur die Überschrift. */
.anlegeweg { border-left: 3px solid var(--navy); }
.anlegeweg-extern { border-left-color: var(--gruen); }

.unterblock { margin: .4rem 0; padding-left: .6rem; border-left: 2px solid var(--rand); }
.unterblock > summary { font-size: .85rem; color: var(--navy); cursor: pointer; }

.wa-marke {
  display: inline-block;
  font-family: var(--schrift-titel);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: .1rem .4rem; border-radius: var(--radius-kl);
  margin-left: .4rem; white-space: nowrap;
}
/* Bewusst gedeckt, nicht knallig: Die Marke steht in jeder Zeile, und
   was in jeder Zeile schreit, liest am Ende niemand mehr. */
.wa-marke-eigen { background: color-mix(in srgb, var(--navy) 12%, transparent); color: var(--navy); }
.wa-marke-kunde { background: color-mix(in srgb, var(--gruen) 16%, transparent); color: #0a7355; }

.wa-zeile-kunde td:first-child { box-shadow: inset 3px 0 0 var(--gruen); }
.wa-zeile-eigen td:first-child { box-shadow: inset 3px 0 0 var(--navy); }


/* =====================================================================
   Stammdaten der Betriebsstätte (v078)
   Zugänge, Codes, Schlüssel, Notfallnummern – mit Freigabe je Punkt.
   ===================================================================== */

.bs-zeile { display: flex; flex-direction: column; gap: .3rem; padding: .2rem 0; }
.bs-kopf { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.bs-kopf strong { font-family: var(--schrift-titel); font-size: .95rem; color: var(--text-stark); }

.bs-wert { font-size: 1rem; font-variant-numeric: tabular-nums; }
.bs-wert-geheim { display: flex; align-items: center; gap: .6rem; letter-spacing: .15em; }
.bs-notiz { font-size: .82rem; color: var(--text-schwach); }

/* Der abgerufene Code gross und ruhig – er wird abgetippt oder
   abgeschrieben, nicht überflogen. */
.geheimwert {
  font-family: var(--schrift-titel);
  font-size: 1.8rem; font-weight: 700;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: var(--text-stark);
  padding: .6rem 0;
}

.wa-marke-geheim { background: color-mix(in srgb, var(--rot) 14%, transparent); color: #b3261e; }

.bs-freigaben { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .82rem; }
.bs-freigaben-titel { color: var(--text-schwach); }
.bs-freigabe {
  display: inline-flex; align-items: center; gap: .2rem;
  background: var(--seite); border: var(--linie);
  border-radius: var(--radius-kl); padding: .1rem .2rem .1rem .5rem;
}
.bs-weg { display: inline; }
.bs-weg button {
  border: 0; background: transparent; cursor: pointer;
  color: var(--text-schwach); font-size: .95rem; line-height: 1; padding: 0 .25rem;
}
.bs-weg button:hover { color: var(--rot); }

.feld-haken { display: flex; align-items: center; gap: .5rem; }
.feld-haken input { width: auto; }

/* Rechtekatalog (v081): schmale Häkchenspalten, damit der Punktname Platz
   behält – bei 47 Zeilen entscheidet die Lesbarkeit der ersten Spalte. */
.rechte-tabelle th:nth-child(2), .rechte-tabelle th:nth-child(3),
.rechte-tabelle td:nth-child(2), .rechte-tabelle td:nth-child(3) {
  width: 5.5rem; text-align: center;
}
.rechte-tabelle input[type="checkbox"] { width: 1.15rem; height: 1.15rem; }
.rechte-hinweis { display: block; font-size: .78rem; color: var(--text-schwach); }

/* Fahrzeugwäsche (v083): Liste zum Abhaken – lange Liste, deshalb ruhig
   und mit klarer Trennung zwischen erledigt und offen. */
.waesche-liste { list-style: none; margin: 0; padding: 0; }
.waesche-zeile { border-top: var(--linie); }
.waesche-zeile:first-child { border-top: 0; }
.waesche-zeile label {
  display: flex; align-items: center; gap: .7rem;
  padding: .5rem .2rem; cursor: pointer;
}
.waesche-zeile label:hover { background: var(--seite); }
.waesche-zeile input[type="checkbox"] { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
.waesche-name { font-family: var(--schrift-titel); font-weight: 600; min-width: 8rem; }
.waesche-zusatz { color: var(--text-schwach); font-size: .85rem; flex: 1 1 auto; }
.waesche-betrag { font-variant-numeric: tabular-nums; color: var(--text-schwach); }
/* Erledigtes bleibt sichtbar, tritt aber zurück. */
.waesche-zeile.ist-erledigt { background: color-mix(in srgb, var(--gruen) 8%, transparent); }
.waesche-zeile.ist-erledigt .waesche-name { color: var(--text-stark); }
.waesche-wer { display: flex; align-items: flex-end; gap: var(--luft-4); flex-wrap: wrap; }

/* Lageklassen fuer den Werkstattplan (v088). Generiert statt von
   Hand: Zeilen bis 50 (6-18 Uhr im 15-Minuten-Raster = 48 Schritte
   plus Kopfzeile), Spalten bis 18, Spannen bis 48. */
.kspalten-1 { grid-template-columns: 62px repeat(1, minmax(190px, 1fr)); }
.kspalten-2 { grid-template-columns: 62px repeat(2, minmax(190px, 1fr)); }
.kspalten-3 { grid-template-columns: 62px repeat(3, minmax(190px, 1fr)); }
.kspalten-4 { grid-template-columns: 62px repeat(4, minmax(190px, 1fr)); }
.kspalten-5 { grid-template-columns: 62px repeat(5, minmax(190px, 1fr)); }
.kspalten-6 { grid-template-columns: 62px repeat(6, minmax(190px, 1fr)); }
.kspalten-7 { grid-template-columns: 62px repeat(7, minmax(190px, 1fr)); }
.kspalten-8 { grid-template-columns: 62px repeat(8, minmax(190px, 1fr)); }
.kspalten-9 { grid-template-columns: 62px repeat(9, minmax(190px, 1fr)); }
.kspalten-10 { grid-template-columns: 62px repeat(10, minmax(190px, 1fr)); }
.kspalten-11 { grid-template-columns: 62px repeat(11, minmax(190px, 1fr)); }
.kspalten-12 { grid-template-columns: 62px repeat(12, minmax(190px, 1fr)); }
.kspalten-13 { grid-template-columns: 62px repeat(13, minmax(190px, 1fr)); }
.kspalten-14 { grid-template-columns: 62px repeat(14, minmax(190px, 1fr)); }
.kspalten-15 { grid-template-columns: 62px repeat(15, minmax(190px, 1fr)); }
.kspalten-16 { grid-template-columns: 62px repeat(16, minmax(190px, 1fr)); }
.kz-1 { grid-row-start: 1; }
.kz-2 { grid-row-start: 2; }
.kz-3 { grid-row-start: 3; }
.kz-4 { grid-row-start: 4; }
.kz-5 { grid-row-start: 5; }
.kz-6 { grid-row-start: 6; }
.kz-7 { grid-row-start: 7; }
.kz-8 { grid-row-start: 8; }
.kz-9 { grid-row-start: 9; }
.kz-10 { grid-row-start: 10; }
.kz-11 { grid-row-start: 11; }
.kz-12 { grid-row-start: 12; }
.kz-13 { grid-row-start: 13; }
.kz-14 { grid-row-start: 14; }
.kz-15 { grid-row-start: 15; }
.kz-16 { grid-row-start: 16; }
.kz-17 { grid-row-start: 17; }
.kz-18 { grid-row-start: 18; }
.kz-19 { grid-row-start: 19; }
.kz-20 { grid-row-start: 20; }
.kz-21 { grid-row-start: 21; }
.kz-22 { grid-row-start: 22; }
.kz-23 { grid-row-start: 23; }
.kz-24 { grid-row-start: 24; }
.kz-25 { grid-row-start: 25; }
.kz-26 { grid-row-start: 26; }
.kz-27 { grid-row-start: 27; }
.kz-28 { grid-row-start: 28; }
.kz-29 { grid-row-start: 29; }
.kz-30 { grid-row-start: 30; }
.kz-31 { grid-row-start: 31; }
.kz-32 { grid-row-start: 32; }
.kz-33 { grid-row-start: 33; }
.kz-34 { grid-row-start: 34; }
.kz-35 { grid-row-start: 35; }
.kz-36 { grid-row-start: 36; }
.kz-37 { grid-row-start: 37; }
.kz-38 { grid-row-start: 38; }
.kz-39 { grid-row-start: 39; }
.kz-40 { grid-row-start: 40; }
.kz-41 { grid-row-start: 41; }
.kz-42 { grid-row-start: 42; }
.kz-43 { grid-row-start: 43; }
.kz-44 { grid-row-start: 44; }
.kz-45 { grid-row-start: 45; }
.kz-46 { grid-row-start: 46; }
.kz-47 { grid-row-start: 47; }
.kz-48 { grid-row-start: 48; }
.kz-49 { grid-row-start: 49; }
.kz-50 { grid-row-start: 50; }
.ksp-1 { grid-column-start: 1; }
.ksp-2 { grid-column-start: 2; }
.ksp-3 { grid-column-start: 3; }
.ksp-4 { grid-column-start: 4; }
.ksp-5 { grid-column-start: 5; }
.ksp-6 { grid-column-start: 6; }
.ksp-7 { grid-column-start: 7; }
.ksp-8 { grid-column-start: 8; }
.ksp-9 { grid-column-start: 9; }
.ksp-10 { grid-column-start: 10; }
.ksp-11 { grid-column-start: 11; }
.ksp-12 { grid-column-start: 12; }
.ksp-13 { grid-column-start: 13; }
.ksp-14 { grid-column-start: 14; }
.ksp-15 { grid-column-start: 15; }
.ksp-16 { grid-column-start: 16; }
.ksp-17 { grid-column-start: 17; }
.ksp-18 { grid-column-start: 18; }
.kspann-1 { grid-row-end: span 1; }
.kspann-2 { grid-row-end: span 2; }
.kspann-3 { grid-row-end: span 3; }
.kspann-4 { grid-row-end: span 4; }
.kspann-5 { grid-row-end: span 5; }
.kspann-6 { grid-row-end: span 6; }
.kspann-7 { grid-row-end: span 7; }
.kspann-8 { grid-row-end: span 8; }
.kspann-9 { grid-row-end: span 9; }
.kspann-10 { grid-row-end: span 10; }
.kspann-11 { grid-row-end: span 11; }
.kspann-12 { grid-row-end: span 12; }
.kspann-13 { grid-row-end: span 13; }
.kspann-14 { grid-row-end: span 14; }
.kspann-15 { grid-row-end: span 15; }
.kspann-16 { grid-row-end: span 16; }
.kspann-17 { grid-row-end: span 17; }
.kspann-18 { grid-row-end: span 18; }
.kspann-19 { grid-row-end: span 19; }
.kspann-20 { grid-row-end: span 20; }
.kspann-21 { grid-row-end: span 21; }
.kspann-22 { grid-row-end: span 22; }
.kspann-23 { grid-row-end: span 23; }
.kspann-24 { grid-row-end: span 24; }
.kspann-25 { grid-row-end: span 25; }
.kspann-26 { grid-row-end: span 26; }
.kspann-27 { grid-row-end: span 27; }
.kspann-28 { grid-row-end: span 28; }
.kspann-29 { grid-row-end: span 29; }
.kspann-30 { grid-row-end: span 30; }
.kspann-31 { grid-row-end: span 31; }
.kspann-32 { grid-row-end: span 32; }
.kspann-33 { grid-row-end: span 33; }
.kspann-34 { grid-row-end: span 34; }
.kspann-35 { grid-row-end: span 35; }
.kspann-36 { grid-row-end: span 36; }
.kspann-37 { grid-row-end: span 37; }
.kspann-38 { grid-row-end: span 38; }
.kspann-39 { grid-row-end: span 39; }
.kspann-40 { grid-row-end: span 40; }
.kspann-41 { grid-row-end: span 41; }
.kspann-42 { grid-row-end: span 42; }
.kspann-43 { grid-row-end: span 43; }
.kspann-44 { grid-row-end: span 44; }
.kspann-45 { grid-row-end: span 45; }
.kspann-46 { grid-row-end: span 46; }
.kspann-47 { grid-row-end: span 47; }
.kspann-48 { grid-row-end: span 48; }

/* Zugang an der Person (v089): Die Verwaltungsformulare nebeneinander,
   damit der Abschnitt nicht zur Bleiwueste wird. */
.zugang-verwaltung {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--luft-4);
  align-items: end;
  margin-top: var(--luft-3);
  padding-top: var(--luft-3);
  border-top: var(--linie);
}

/* Bahnen fuer gleichzeitige Eintraege (v091): kv-N-I = Fenster in N
   Bahnen geteilt, diese Karte in Bahn I. width+margin statt
   style-Attribut - die CSP laesst nur Klassen zu. */
.kv-2-1 { width: calc(50.0% - 4px); margin-left: calc(0.0% + 2px); }
.kv-2-2 { width: calc(50.0% - 4px); margin-left: calc(50.0% + 2px); }
.kv-3-1 { width: calc(33.33% - 4px); margin-left: calc(0.0% + 2px); }
.kv-3-2 { width: calc(33.33% - 4px); margin-left: calc(33.33% + 2px); }
.kv-3-3 { width: calc(33.33% - 4px); margin-left: calc(66.67% + 2px); }
.kv-4-1 { width: calc(25.0% - 4px); margin-left: calc(0.0% + 2px); }
.kv-4-2 { width: calc(25.0% - 4px); margin-left: calc(25.0% + 2px); }
.kv-4-3 { width: calc(25.0% - 4px); margin-left: calc(50.0% + 2px); }
.kv-4-4 { width: calc(25.0% - 4px); margin-left: calc(75.0% + 2px); }

/* Kalenderkopf aufgeraeumt (v091): der Tag ist die Hauptsache, die
   Pfeile sind runde Tasten daneben, der Datumssprung steht rechts. */
.kalender-kopf { justify-content: flex-start; }
.kalender-kopf > .knopf-leise {
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--linie); background: var(--flaeche);
  font-size: 1.05rem; text-decoration: none;
}
.kalender-kopf > .knopf-leise:hover { background: var(--seite); }
.kalender-tag strong { font-size: 1.25rem; }
.kalender-tag span { font-size: .9rem; }

/* Karten mit etwas Tiefe, damit sie ueber dem Raster liegen statt darin
   zu kleben. */
.plankarte-geplant {
  background: var(--flaeche);
  box-shadow: 0 1px 3px rgba(12, 18, 34, .12);
  border: var(--linie);
  border-left-width: 3px;
}
.plankarte-geplant:hover { box-shadow: 0 3px 8px rgba(12, 18, 34, .18); }


/* Kalender-Politur (v093): Kopfzeile hoeher, damit die 06:00-Marke nicht
   in die Namen laeuft; Vorratskarte kompakt; Kartentext bricht sauber. */
.kalender-gitter { grid-template-rows: 44px; }
.kalender-spaltenkopf { display: flex; align-items: center; }
.kalender-vorrat { max-height: none; }
.kalender-vorrat .zwischentitel { margin: 0 0 .5rem; }
.plankarte-geplant .plankarte-titel {
  white-space: normal; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; overflow: hidden; line-height: 1.25;
}
.plankarte-geplant .plankarte-zeit { position: absolute; top: .35rem; right: 1.6rem; }
.waesche-betrag.ist-vorschau { color: var(--text-schwach); }

/* Auftragsfotos (v095): Kacheln, Handy-tauglich. */
.foto-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--luft-3); margin-bottom: var(--luft-3); }
.foto-kachel { position: relative; margin: 0; }
.foto-kachel img { width: 100%; height: 110px; object-fit: cover; border-radius: var(--radius-kl); border: var(--linie); }
.foto-kachel figcaption { font-size: .75rem; color: var(--text-schwach); padding-top: 2px; }
.foto-weg { position: absolute; top: 4px; right: 4px; }
.foto-weg button { border: 0; border-radius: 50%; width: 1.5rem; height: 1.5rem; background: rgba(12,18,34,.55); color: #fff; cursor: pointer; line-height: 1; }
.foto-weg button:hover { background: var(--rot); }

/* Zurueck-Knopf auf Detailseiten (v096). */
.zurueckleiste { margin: 0 0 var(--luft-3); }
.zurueckleiste .zurueck {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .85rem; font-weight: 600; text-decoration: none;
  color: var(--text-schwach);
}
.zurueckleiste .zurueck:hover { color: var(--navy); }

/* Sitzungsuhr im Kopf (v096). */
.sitzungsuhr {
  font-size: .78rem; color: var(--text-schwach);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sitzungsuhr.ist-knapp { color: var(--rot); font-weight: 700; }

/* "Heute"-Knopf (v097): eine erkennbare Taste statt eines Textlinks -
   sie wird oft geklickt. Steht man schon auf heute, ist sie ruhig
   gefuellt statt umrandet: kein Angebot, das nichts aendert. */
.heute-knopf {
  display: inline-flex; align-items: center;
  padding: .45rem 1rem; border-radius: 999px;
  border: 1.5px solid var(--navy); color: var(--navy);
  background: var(--flaeche);
  font-family: var(--schrift-titel); font-size: .85rem; font-weight: 600;
  text-decoration: none; transition: background .15s, color .15s;
}
.heute-knopf:hover { background: var(--navy); color: #fff; }
.heute-knopf.ist-heute {
  background: color-mix(in srgb, var(--navy) 10%, transparent);
  border-color: transparent; color: var(--text-schwach); cursor: default;
}
.heute-knopf.ist-heute:hover { background: color-mix(in srgb, var(--navy) 10%, transparent); color: var(--text-schwach); }

/* 24-Stunden-Plan (v099): eigener Rollbereich statt endloser Seite.
   Die Spaltenkoepfe stehen beim Rollen still (position: sticky war
   schon da und wirkt jetzt, wo der Rahmen selbst rollt), und die
   Zeitspalte bleibt beim Querrollen sichtbar - sonst weiss man bei
   acht Monteuren nicht mehr, welche Stunde man gerade ansieht. */
.kalender-gitter-huelle {
  max-height: 72vh;
  overflow: auto;
  overscroll-behavior: contain;
}
.kalender-zeit, .kalender-ecke {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--flaeche);
}
.kalender-ecke { z-index: 4; }
.kalender-spaltenkopf { z-index: 3; }

/* Die Nachtstunden ruhiger als der Arbeitstag - so findet das Auge
   den Bereich, in dem tatsaechlich gearbeitet wird. */
.kalender-zelle.ist-nacht { background: color-mix(in srgb, var(--seite) 70%, transparent); }

/* Jetzt-Linie im Werkstattplan (v109). Liegt ueber dem Gitter, aber
   UNTER den Karten (z-index 1 gegen 2) - sie soll orientieren, nicht
   verdecken. Die Lage kommt ueber Klassen, weil die CSP style-Attribute
   verwirft; jetzt-vN schiebt sie um N Minuten in die Zeile hinein
   (1 Minute = 1 Pixel bei 30 Pixel je Halbstunde). */
.jetzt-linie {
  grid-column: 2 / -1;
  align-self: start;
  position: relative;
  height: 0;
  border-top: 2px solid var(--rot);
  z-index: 1;
  pointer-events: none;
}
.jetzt-marke {
  position: absolute;
  top: -0.62rem;
  left: -3.4rem;
  font-size: .68rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--flaeche);
  background: var(--rot);
  border-radius: 999px;
  padding: .05rem .35rem;
}
.jetzt-v0  { margin-top: 0; }
.jetzt-v5  { margin-top: 5px; }
.jetzt-v10 { margin-top: 10px; }
.jetzt-v15 { margin-top: 15px; }
.jetzt-v20 { margin-top: 20px; }
.jetzt-v25 { margin-top: 25px; }

/* Datumskopf gestrafft (v109): Der Tag ist die Ueberschrift, die Pfeile
   sitzen direkt daneben, und der Sprung zu einem anderen Datum steht
   rechts abgesetzt - vorher standen alle fuenf Bedienelemente
   gleichberechtigt nebeneinander und der Kopf baute 91 Pixel hoch. */
.kalender-kopf {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  row-gap: .4rem;
}
.kalender-tag { display: flex; align-items: baseline; gap: .5rem; }
.kalender-tag strong { font-family: var(--schrift-titel); font-size: 1.15rem; }
.kalender-tag span   { color: var(--text-schwach); font-variant-numeric: tabular-nums; }
.kalender-kopf .kalender-sprung { margin-left: auto; display: flex; align-items: center; gap: .4rem; }
/* Beschriftung NEBEN das Datumsfeld statt darueber: Der Kopf baute
   dadurch 91 Pixel hoch, obwohl nur eine Zeile drinsteht. Sichtbar
   bleibt sie - ein Eingabefeld ohne Beschriftung ist fuer
   Vorleseprogramme wertlos. */
.kalender-sprung .filter-feld { flex-direction: row; align-items: center; gap: .4rem; margin: 0; }
.kalender-sprung .filter-feld input { margin: 0; }
.kalender-kopf .heute-knopf {
  border: var(--linie); border-radius: 999px; padding: .25rem .7rem;
  text-decoration: none; color: var(--text); background: var(--flaeche);
}
.kalender-kopf .heute-knopf.ist-heute { border-color: var(--akzent); color: var(--akzent); }

/* Papierleiste auf der Fahrzeugkarte (v111): Fahrzeugschein und
   Unterlagenordner als Knoepfe direkt unter dem Kennzeichen. Vorher
   standen sie als kleines "Oeffnen" in einer Feldliste weiter unten -
   niemand hat sie dort gesucht (Wunsch Jerome 21.08.2026). */
.papierleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: .2rem 0 .9rem;
}
.papierleiste .hinweis-leise { flex-basis: 100%; }

/* Unterlagen-Merkmal in der Fahrzeugliste: ein ruhiges Zeichen, das
   nur auffaellt, wenn etwas fehlt. */
.schein-marke { font-variant-emoji: text; }
.schein-marke.fehlt { opacity: .45; }

/* ============ Tankdaten (v115) ============ */

/* Zeile, die auffaellt, ohne zu schreien. Gebraucht fuer Chips, deren
   Sperre an der Anlage nicht vollzogen ist, und fuer Meldungen mit
   kritischer oder unbekannter Schwere. Nur ein Fond und ein Balken links
   - die Zeile bleibt lesbar, das ist wichtiger als Alarmwirkung. */
tr.zeile-warnung { background: var(--gelb-fond); }
tr.zeile-warnung td:first-child { box-shadow: inset 3px 0 0 var(--gelb); }

/* Eine einzelne Zahl, die den Blick zuerst bekommt: Fuellstand,
   Meldungszahl, Litersummen. */
.kennzahl { font-size: var(--gr-gross); margin: var(--luft-3) 0; }
.kennzahl strong { font-variant-numeric: tabular-nums; }

/* Wege zu den Unterseiten, direkt unter der Ueberschrift. */
.unterseiten { margin: 0 0 var(--luft-4); font-size: var(--gr-klein); }

/* ============ Sprungleiste der Karteikarte (v129) ============
   Eine Zeile Abschnittsnamen unter dem Titel; springt per Anker. Bewusst
   nicht klebend: Die Kopfleiste ist schon sticky, zwei klebende Leisten
   fressen auf dem Handy die halbe Hoehe. Damit ein Anker nicht unter der
   Kopfleiste landet, bekommen die Zwischentitel scroll-margin-top. */
.sprungleiste {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin: var(--luft-3) 0 var(--luft-4);
  padding: 8px 0;
  border-top: 1px solid var(--flaeche-2);
  font-size: .85rem;
}
.sprungleiste a { color: var(--text-schwach); text-decoration: none; font-weight: 600; white-space: nowrap; }
.sprungleiste a:hover, .sprungleiste a:focus-visible { color: var(--navy); text-decoration: underline; }
.zwischentitel[id] { scroll-margin-top: 84px; }
@media print { .sprungleiste { display: none !important; } }