:root {
  --hintergrund: #f4f5f7;
  --flaeche: #ffffff;
  --rand: #dfe2e8;
  --text: #1c2128;
  --text-leise: #5c6672;
  --akzent: #14496b;
  --ok: #1a7f4b;
  --fehler: #b4232c;

  /* Der dritte Signalton neben --ok und --fehler: "bald faellig". Der Wert
     stand bis zum 25.09.2026 an sechs Stellen hartkodiert im Stylesheet
     (#8a6508) und war als Variable nur ein Ersatzwert - siehe
     .vorschlag-unklar. */
  --warn: #8a6508;

  /* ALIASE, keine eigenen Farben. Beide Namen stammen aus dem
     Dokumentfenster und waren bis zum 25.09.2026 NIRGENDS definiert -
     jede Benutzung trug einen Ersatzwert, der ausserhalb der Palette
     lag. GEMESSEN: .dokumentfenster blieb dadurch im Dunkelmodus weiss.

     Als Alias geschrieben folgen sie dem Farbschema von selbst und
     brauchen keine dunkle Entsprechung - es gibt genau EINE Randfarbe
     und EINE Kartenflaeche. */
  --rahmen: var(--rand);
  --karte: var(--flaeche);

  /* Die Seitenleiste ist in BEIDEN Farbschemata dunkel - so zeigt es das
     Vorbild. Sie braucht deshalb eigene Token: mit --flaeche wuerde sie im
     Dunkelmodus in der Seite verschwinden. */
  --nav-breite: 15rem;
  --nav-flaeche: #16202b;
  --nav-text: #c9d3de;
  --nav-text-leise: #8494a6;
  --nav-aktiv: #2563a8;
}

@media (prefers-color-scheme: dark) {
  :root {
    --hintergrund: #14171c;
    --flaeche: #1c2027;
    --rand: #2d333d;
    --text: #e6e9ee;
    --text-leise: #98a1ad;
    --akzent: #6ea8d0;
    --ok: #4cc38a;
    --fehler: #e5646d;
    --warn: #e0b341;
    --nav-flaeche: #10161e;
    --nav-aktiv: #1e5fa8;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 3rem;
  background: var(--hintergrund);
  color: var(--text);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* 96rem statt der frueheren 62rem. GRUND: die Akte hat sechsspaltige Tabellen,
   und die Aktionsspalte mit "Beleg fehlt" stand ausserhalb - man musste
   waagerecht scrollen, um sie zu erreichen. Der Auftraggeber hat das am
   14.08.2026 gemeldet.

   Die Lesbarkeit von Fliesstext haengt nicht hieran: die Rechtstexte tragen
   ihre eigene Grenze (.textseite, 68 Zeichen), Anmeldung und Registrierung
   ebenfalls (.schmal, 24rem). Was hier breiter wird, sind Tabellen und
   Kartenraster - genau das, was Breite braucht. */
main { max-width: 96rem; margin: 0 auto; padding: 1.5rem 1.5rem 0; }

/* Nur für Screenreader - visuell entfernt, aber weiterhin vorgelesen. */
.visuell-versteckt {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Seitenleiste ---------- */

/* Sprungmarke fuer die Tastatur: sichtbar erst beim Fokus. Ohne sie muesste
   sich jeder Tastaturnutzer auf jeder Seite erst durch das ganze Menue
   tabben. */
.sprungmarke {
  position: absolute;
  left: -100vw;
  z-index: 60;
  padding: .6rem 1rem;
  background: var(--flaeche);
  color: var(--akzent);
  border: 1px solid var(--akzent);
  border-radius: 0 0 7px 0;
}

.sprungmarke:focus { left: 0; top: 0; }

/* Grundzustand ist das schmale Fenster: die Leiste liegt ausserhalb und
   schiebt sich bei Bedarf UEBER den Inhalt. Der Inhalt rueckt nicht - auf
   einem 375px-Geraet muesste man sonst waagerecht scrollen. */
.seitenleiste {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--nav-breite);
  display: flex;
  flex-direction: column;
  background: var(--nav-flaeche);
  color: var(--nav-text);
  transform: translateX(-100%);
  transition: transform .2s ease;
  z-index: 40;
}

body.nav-offen .seitenleiste,
#hauptmenue:target { transform: none; }

.nav-schleier { display: none; }

body.nav-offen .nav-schleier {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgb(0 0 0 / .45);
}

.seitenleiste-kopf {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 1rem .9rem;
  border-bottom: 1px solid rgb(255 255 255 / .08);
}

.seitenleiste .marke {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #fff;
  text-decoration: none;
  min-width: 0;
}

.marke-text { display: flex; flex-direction: column; min-width: 0; }

.marke-name {
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.2;
}

.marke-unter {
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nav-text-leise);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-schliessen {
  margin-left: auto;
  color: var(--nav-text-leise);
  display: flex;
}

/* Eigener Rollbereich: bei vielen Menuepunkten bleiben Konto und Abmelden
   unten stehen. */
.seitenleiste-rollen {
  flex: 1;
  overflow-y: auto;
  padding: .75rem 0;
}

.menue-gruppe {
  margin: 1rem .9rem .35rem;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--nav-text-leise);
}

.menue-liste { list-style: none; margin: 0; padding: 0 .5rem; }

.menuepunkt {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  padding: .55rem .65rem;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--nav-text);
  font: inherit;
  font-size: .9rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.menuepunkt:hover { background: rgb(255 255 255 / .07); color: #fff; }

.menuepunkt.aktiv {
  background: var(--nav-aktiv);
  color: #fff;
  font-weight: 600;
}

.menue-symbol { flex: none; }

.seitenleiste-fuss {
  padding: .5rem;
  border-top: 1px solid rgb(255 255 255 / .08);
}

.menue-konto { display: flex; flex-direction: column; min-width: 0; }

.menue-name {
  font-size: .875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menue-unter {
  font-size: .7rem;
  color: var(--nav-text-leise);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menuepunkt-knopf:hover { border-color: transparent; }

/* Der globale Fokusring ist --akzent, im Hellmodus ein dunkles Blau - auf der
   dunklen Leiste praktisch unsichtbar. Das ist die Stelle, an der der Umbau
   der Tastaturbedienung am ehesten geschadet haette. */
.seitenleiste a:focus-visible,
.seitenleiste button:focus-visible { outline-color: #fff; }

/* Der schmale Balken ueber dem Inhalt: Burger links. */
.kopfbalken {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0;
  padding: .55rem 1rem;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
}

.burger {
  display: flex;
  align-items: center;
  padding: .35rem;
  border-radius: 7px;
  color: var(--text-leise);
  text-decoration: none;
}

.burger:hover { color: var(--akzent); background: var(--hintergrund); }

.kopfbalken-marke { font-weight: 600; font-size: .95rem; }

/* --- Ab 60rem steht die Leiste dauerhaft ---------------------------------
   Derselbe Wert, den das CSS fuer die Rechtstextseiten schon benutzt. Damit
   bleibt es bei zwei Zahlen in der ganzen Datei - das ist der Grund fuer die
   Wahl, nicht ein Geschmack in Pixeln. */
@media (min-width: 60rem) {
  /* Paarweise, damit :target (hoehere Spezifitaet) die Einklapp-Regel am
     breiten Bildschirm nicht ueberstimmt. */
  .seitenleiste,
  #hauptmenue:target { transform: none; }

  body.nav-zu .seitenleiste,
  body.nav-zu #hauptmenue:target { transform: translateX(-100%); }

  /* BEWUSST OHNE Übergang. margin-left zu animieren heisst, den Browser 200 ms
     lang bei jedem Einzelbild neu umbrechen zu lassen - und die Inhaltsspalte
     enthaelt die grossen Tabellen der Akte. Die Leiste selbst gleitet ueber
     transform, das kostet nichts; der Inhalt rueckt in einem Schritt nach.
     Bei einem Klick, den man selten macht, ist das der bessere Tausch. */
  body.mit-nav .inhaltsspalte { margin-left: var(--nav-breite); }

  body.nav-zu .inhaltsspalte { margin-left: 0; }

  .nav-schliessen,
  .kopfbalken-marke,
  .nav-schleier { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .seitenleiste { transition: none; }
}

.brotkrumen { margin: 0 0 1rem; font-size: .875rem; }
.brotkrumen a { color: var(--akzent); text-decoration: none; }

/* Anmeldeseite: schmaler und vertikal etwas eingerueckt. */
.schmal { max-width: 24rem; margin: 0 auto; padding-top: 3vh; }

header { margin-bottom: 1.75rem; }

.kopfleiste {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.kopfleiste h1 { margin: 0; }

.phase {
  margin: 0 0 .4rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--akzent);
}

h1 { margin: 0; font-size: 1.7rem; letter-spacing: -.01em; }

.untertitel { margin: .25rem 0 0; color: var(--text-leise); }

.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 1.5rem;
}

h2 { margin: 0 0 .5rem; font-size: 1.05rem; }

.hinweis { margin: 0 0 1.25rem; color: var(--text-leise); font-size: .9rem; }

code {
  padding: .1em .35em;
  border-radius: 4px;
  background: var(--hintergrund);
  font-size: .875em;
}

dl { margin: 0 0 1.5rem; }

.zeile {
  display: flex;
  gap: 1rem;
  padding: .6rem 0;
  border-top: 1px solid var(--rand);
}

.zeile:last-child { border-bottom: 1px solid var(--rand); }

dt { flex: 0 0 8.5rem; color: var(--text-leise); font-size: .9rem; }

dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

dd.ok { color: var(--ok); font-weight: 600; }
dd.fehler { color: var(--fehler); font-weight: 600; }

button {
  padding: .55rem 1.1rem;
  border: 1px solid var(--rand);
  border-radius: 7px;
  background: var(--hintergrund);
  color: var(--text);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
}

button:hover { border-color: var(--akzent); color: var(--akzent); }
button:disabled { opacity: .55; cursor: progress; }

/* Sichtbarer Fokus - fuer die Bedienung per Tastatur unverzichtbar. */
button:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}

.feld { margin-bottom: 1rem; }

.feld label {
  display: block;
  margin-bottom: .35rem;
  font-size: .875rem;
  color: var(--text-leise);
}

.feld input {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--rand);
  border-radius: 7px;
  background: var(--hintergrund);
  color: var(--text);
  font: inherit;
}

.feld input:focus { border-color: var(--akzent); }

button.haupt {
  width: 100%;
  margin-top: .5rem;
  padding: .65rem 1.1rem;
  border-color: var(--akzent);
  background: var(--akzent);
  color: #fff;
  font-weight: 600;
}

button.haupt:hover { opacity: .9; color: #fff; }

@media (prefers-color-scheme: dark) {
  /* Im Dunkelmodus ist --akzent ein helles Blau. Weisser Text darauf kaeme
     nur auf rund 2:1 Kontrast und waere schlecht lesbar - deshalb dunkler. */
  button.haupt,
  button.haupt:hover { color: var(--hintergrund); }
}

.meldung-fehler {
  margin: 0 0 1.25rem;
  padding: .7rem .85rem;
  border: 1px solid var(--fehler);
  border-radius: 7px;
  color: var(--fehler);
  font-size: .9rem;
}

/* Gleiche Form wie die Fehlermeldung, nur in der Akzentfarbe: fuer
   Bestaetigungen und Hinweise, die keine Warnung sind - etwa "Das Konto wurde
   angelegt" auf der Anmeldeseite. Rot waere dort irrefuehrend. Beide Farbtoken
   folgen der Systemeinstellung, die Meldung passt damit in hell und dunkel. */
.meldung-hinweis {
  margin: 0 0 1.25rem;
  padding: .7rem .85rem;
  border: 1px solid var(--akzent);
  border-radius: 7px;
  color: var(--akzent);
  font-size: .9rem;
}

/* Die Bestaetigung NACH einer erfolgreichen Handlung - "Die Akte wurde
   geloescht", "Der Mandant wurde entfernt". Sie erscheint ueber jeder Seite,
   sobald ein Hinweiscode in der Adresse steht (basis.html).

   BEFUND vom 19.08.2026: die Klasse wurde seit jeher benutzt und war NIE
   definiert. Die Meldung stand damit als nackter Text ueber der Seite - ohne
   Rahmen, ohne Farbe, ohne Abstand -, waehrend Fehler und Hinweise daneben
   einen ordentlichen Kasten bekamen. Gefunden hat es
   tests/test_kein_toter_code_ausgeliefert.py, nachdem dieselbe Suche schon
   .hilfetext, .vorgangsfrage und .knopf-artig zutage gefoerdert hatte.

   Gruen statt Akzentfarbe: eine Bestaetigung ist etwas anderes als ein
   Hinweis, und --ok folgt wie die uebrigen Token der Systemeinstellung. */
.meldung {
  margin: 0 0 1.25rem;
  padding: .7rem .85rem;
  border: 1px solid var(--ok);
  border-radius: 7px;
  background: color-mix(in srgb, var(--ok) 7%, transparent);
  color: var(--ok);
  font-size: .9rem;
}

/* Ein Wert, der zum Kopieren gedacht ist. Bricht um, damit eine lange
   Zeichenkette die Karte nicht sprengt. */
.kopierfeld {
  display: block;
  margin-top: .5rem;
  padding: .5rem .6rem;
  border: 1px solid var(--rand);
  border-radius: 6px;
  background: var(--hintergrund);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem;
  overflow-wrap: anywhere;
}

footer { margin-top: 1.5rem; font-size: .875rem; }

footer a { color: var(--akzent); }

/* ---------- Phase 4: Listen, Tabellen, Ampel ---------- */

.karte + .karte { margin-top: 1.25rem; }

h3 {
  margin: 1.75rem 0 .75rem;
  font-size: .95rem;
  color: var(--text-leise);
  border-bottom: 1px solid var(--rand);
  padding-bottom: .35rem;
}

h3:first-of-type { margin-top: 0; }

.suchleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
}

.suchleiste input[type="search"] {
  flex: 1 1 18rem;
  padding: .5rem .7rem;
  border: 1px solid var(--rand);
  border-radius: 7px;
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
}

.ankreuz {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .875rem;
  color: var(--text-leise);
  /* KEIN white-space: nowrap.

     FUND DES AUFTRAGGEBERS vom 18.08.2026, mit Bildschirmfoto: im
     Registrierungsformular lief der Zustimmungstext ("Ich habe den
     Nutzungsvertrag und die Allgemeinen Geschäftsbedingungen in der
     Fassung ... gelesen") in EINER Zeile aus dem Kasten heraus - die
     Seite bekam einen waagerechten Rollbalken, und der Text stand neben
     dem Formular statt daneben.

     nowrap war für die kurzen Kästchen gedacht (A1, A2, "in Gebrauch").
     Die tragen jetzt .ankreuz-kurz. */
  line-height: 1.45;
}

/* Kurze Kästchen, die nebeneinander in einer Reihe stehen sollen -
   Klassenkästchen der Urkunde, "in Gebrauch" im Katalog. */
.ankreuz-kurz {
  align-items: center;
  white-space: nowrap;
}

/* Das Kästchen selbst darf nicht mitschrumpfen, wenn der Text umbricht. */
.ankreuz input[type="checkbox"],
.ankreuz input[type="radio"] {
  flex: none;
  margin-top: .15rem;
}

/* Breite Tabellen scrollen in sich selbst - die Seite bleibt ruhig. */
.tabelle-umbruch {
  overflow-x: auto;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 10px;
}

table { width: 100%; border-collapse: collapse; font-size: .9rem; }

th, td {
  padding: .65rem .85rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rand);
}

/* KEIN white-space: nowrap mehr. Zusammen mit Grossbuchstaben und Sperrung
   erzwangen die Koepfe "LETZTE ÜBERPRÜFUNG" und "NÄCHSTE ÜBERPRÜFUNG" mehrere
   hundert Pixel, obwohl darunter nur ein Datum steht - und schoben die
   Aktionsspalte aus dem Bild. Fuer .mandantentabelle war genau dieser Fehler
   schon einmal einzeln behoben worden (siehe dort); jetzt gilt es ueberall. */
th {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-leise);
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--hintergrund); }

td a { color: var(--akzent); text-decoration: none; font-weight: 500; }
td a:hover { text-decoration: underline; }

/* Ziffern in gleicher Laufweite, damit untereinander stehende Werte fluchten.
   BEWUSST linksbuendig: .zahl traegt in der Lokfuehrerliste die
   Fuehrerscheinnummer - eine Kennung, keine Menge. Rechtsbuendige Kennungen
   liest niemand besser. */
td.zahl { font-variant-numeric: tabular-nums; }

/* Mengen dagegen gehoeren nach rechts: nur so stehen Einer unter Einern und
   Zehner unter Zehnern, und das Auge vergleicht Spalten ohne zu rechnen.
   Eigene Klasse statt .zahl, siehe oben. */
th.anzahl, td.anzahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- Mandantentabelle der Betreibersicht ----------
   Acht Spalten in 62 rem Satzbreite. Ohne Steuerung entscheidet der Browser
   allein nach Inhalt, und das ging hier dreifach schief:

   1. th traegt global white-space:nowrap. Die Ueberschriften "Ansprechpartner"
      und "Bescheinigungen" konnten deshalb nicht umbrechen und zwangen ihren
      Spalten eine Mindestbreite auf, die die Zahl darunter (ein bis drei
      Ziffern) nie braucht.
   2. Ein langer Firmenname nahm sich so viel Platz, wie er wollte.
   3. Zusammen wurde die Tabelle breiter als der Rahmen, .tabelle-umbruch
      schaltete auf waagerechtes Scrollen - und die Aktionsspalte mit dem
      Knopf "Hineinschalten" lag ausserhalb des Sichtfelds.

   table-layout:fixed dreht das um: die Breiten stehen vorher fest, der Inhalt
   richtet sich danach. min-width haelt die Tabelle lesbar; erst darunter
   scrollt sie, dann aber als Ganzes und nicht schleichend. */
.mandantentabelle {
  table-layout: fixed;
  min-width: 54rem;
}

/* Die Ueberschriften waren das eigentliche Mass der Tabelle, nicht die Daten:
   in sieben von acht Spalten ist der Kopf breiter als jeder Inhalt darunter -
   "ANSPRECHPARTNER" verlangt rund 162 px fuer Werte von hoechstens 86 px.
   Versalien allein kosten dabei etwa 98 px ueber die ganze Zeile. Hier also
   umbrechen duerfen, gemischt schreiben, ohne Sperrsatz; die uebrigen zehn
   Tabellen der Anwendung behalten ihren Kopfstil. */
.mandantentabelle th {
  white-space: normal;
  text-transform: none;
  letter-spacing: 0;
}

.mandantentabelle .sp-unternehmen { width: 21%; }
.mandantentabelle .sp-sitz        { width: 14%; }
.mandantentabelle .sp-ansprechpartner    { width: 16%; }
.mandantentabelle .sp-agb         { width: 11%; }
.mandantentabelle .sp-anzahl      { width: 8%; }
.mandantentabelle .sp-aktion      { width: 14%; }

/* Lange Firmennamen und Anschriften umbrechen lassen - auch dann, wenn sie
   kein Leerzeichen enthalten. Ohne overflow-wrap laeuft ein Wort wie
   "Eisenbahnverkehrsunternehmensgesellschaft" aus seiner Spalte heraus und
   ueber die Nachbarspalte. hyphens:auto setzt dabei einen Trennstrich, wo die
   Sprache ihn erlaubt - lang="de" steht in basis.html. */
.mandantentabelle td {
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Die Aktionsspalte: Knopf rechts, buendig mit den Zahlen darueber. */
.mandantentabelle .zeilenaktionen { text-align: right; }

.zeile-warnung { background: color-mix(in srgb, var(--fehler) 7%, transparent); }

/* Vollstaendigkeit eines Eintrags - getoent wird die ERSTE Zelle der Zeile,
   dort wo "BR 185" oder "H/V" steht. Vorgabe des Auftraggebers vom 14.08.2026.
   Vorher trug die ganze Zeile die Farbe; bei einem Fahrer ohne hinterlegte
   Belege leuchtete damit die komplette Tabelle.

   Rot deutlicher als gruen: Rot ist eine Aufgabe und soll beim Ueberfliegen
   auffallen, gruen bestaetigt nur. Beide tragen einen title mit der
   Begruendung - die Farbe steht nie allein.

   Der linke Balken markiert die Kante der Zelle, damit die Toenung auch bei
   kurzen Namen ("H/V") als Markierung lesbar bleibt und nicht wie ein
   Darstellungsfehler wirkt. */
.feld-rot,
.feld-gruen {
  border-left: 3px solid transparent;
  padding-left: calc(.6rem - 3px);
}
.feld-rot {
  background: color-mix(in srgb, var(--fehler) 10%, transparent);
  border-left-color: var(--fehler);
}
.feld-gruen {
  background: color-mix(in srgb, var(--ok) 7%, transparent);
  border-left-color: var(--ok);
}

/* Aberkannt schlaegt die Bewertung: der Eintrag ist aus dem Verkehr, nicht
   mangelhaft. */
.zeile-aberkannt .feld-rot,
.zeile-aberkannt .feld-gruen {
  background: none;
  border-left-color: transparent;
}

.leise-text { color: var(--text-leise); font-size: .85em; }

.ampel {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}

.ampel-ok           { background: color-mix(in srgb, var(--ok) 15%, transparent);     color: var(--ok); }
.ampel-einplanen    { background: color-mix(in srgb, var(--akzent) 15%, transparent); color: var(--akzent); }
.ampel-dringend     { background: color-mix(in srgb, #b8860b 20%, transparent);       color: #8a6508; }
.ampel-ueberfaellig { background: color-mix(in srgb, var(--fehler) 15%, transparent); color: var(--fehler); }
.ampel-unbekannt    { background: color-mix(in srgb, var(--text-leise) 18%, transparent); color: var(--text-leise); }
.ampel-regelverstoss{ background: color-mix(in srgb, var(--fehler) 15%, transparent); color: var(--fehler); margin-left: .3rem; }

@media (prefers-color-scheme: dark) {
  .ampel-dringend { color: #e0b341; }
}

/* Dreifarbige Fristenampel an einzelnen Eintraegen. Bewusst schlichter als
   die Pillen oben: sie sitzt in Tabellenzellen neben einem Datum, wo eine
   zweite Pille nur unruhig waere. Die Farbe steht nie allein - daneben steht
   immer das Datum oder ein Wort, sonst waere die Anzeige fuer
   Farbfehlsichtige leer. */
.frist-gruen { color: var(--ok); font-weight: 600; }
.frist-gelb  { color: #8a6508; font-weight: 600; }
.frist-rot   { color: var(--fehler); font-weight: 600; }

/* Der Zaehler in der Lokfuehrer-Uebersicht - eine einzelne Ziffer, deshalb
   als Pille, sonst ginge sie zwischen den Spalten unter. */
.fristen-zaehler { text-align: center; }

/* Fehlender Nachweis: der Knopf traegt die Luecke selbst, statt sie in einer
   eigenen Spalte zu wiederholen. Bewusst kein Rotton auf Rot - die Zeile
   bleibt lesbar, auffaellig ist nur dieser eine Link.

   SEIT DEM 17.08.2026 hat der Beleg eine eigene Spalte (.dokumentspalte
   weiter unten); diese Klasse traegt nur noch die Erkennungsseite. */
.beleg-fehlt {
  color: var(--fehler);
  font-weight: 600;
  text-decoration-style: dotted;
}

/* Die Spalte "Dokumente" in der Akte.

   DREI FARBEN - Vorgabe des Auftraggebers vom 17.08.2026: rot ohne Dokument,
   gelb bei ueberschrittener Frist, gruen sonst. Als Pille, nicht als blosser
   Link: die Spalte soll beim Ueberfliegen der Akte sofort ins Auge fallen,
   das war der ganze Zweck der Aenderung.

   Die Farbe steht nie allein - im Knopf steht die Anzahl ("2 Dokumente" oder
   "fehlt"), im title der Grund. Fuer Farbfehlsichtige ist eine Farbe ohne
   Text gar nichts. */
.dokumentspalte { white-space: nowrap; }

.dokumentknopf {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
}

.dokumentknopf:hover,
.dokumentknopf:focus-visible { text-decoration: underline; }

.dokument-gruen {
  background: color-mix(in srgb, var(--ok) 15%, transparent);
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 35%, transparent);
}

/* Der Gelbton ist derselbe wie bei .frist-gelb - eine zweite Nuance waere
   nur Unruhe, und beide meinen dasselbe: die Frist ist gerissen. */
.dokument-gelb {
  background: color-mix(in srgb, #8a6508 15%, transparent);
  color: #8a6508;
  border-color: color-mix(in srgb, #8a6508 35%, transparent);
}

.dokument-rot {
  background: color-mix(in srgb, var(--fehler) 15%, transparent);
  color: var(--fehler);
  border-color: color-mix(in srgb, var(--fehler) 35%, transparent);
}

@media (prefers-color-scheme: dark) {
  .dokument-gelb { color: #e0b341; border-color: color-mix(in srgb, #e0b341 35%, transparent); }
}

/* Das Fenster zum Ansehen eines Belegs.

   "Nicht in riesig" - Vorgabe des Auftraggebers vom 17.08.2026. Deshalb feste
   Obergrenzen statt Vollbild: breit genug fuer eine A4-Seite in lesbarer
   Groesse, schmal genug, dass die Akte dahinter sichtbar bleibt und klar ist,
   dass man nicht die Seite gewechselt hat. */
.dokumentfenster {
  width: min(52rem, 92vw);
  max-width: 92vw;
  height: min(80vh, 56rem);
  padding: 0;
  border: 1px solid var(--rahmen);
  border-radius: 10px;
  background: var(--karte);
  color: inherit;
  overflow: hidden;
}

.dokumentfenster::backdrop { background: rgba(0, 0, 0, .45); }

.dokumentfenster-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--rahmen);
}

.dokumentfenster-liste {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0;
  padding: .6rem 1rem;
  list-style: none;
  border-bottom: 1px solid var(--rahmen);
}

.dokumentfenster-liste button {
  padding: .2rem .6rem;
  font-size: .85rem;
  border-radius: 999px;
  border: 1px solid var(--rahmen);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.dokumentfenster-liste button.gewaehlt {
  background: color-mix(in srgb, var(--ok) 15%, transparent);
  border-color: color-mix(in srgb, var(--ok) 45%, transparent);
  font-weight: 600;
}

/* Der Rahmen nimmt, was Kopf, Liste und Fusszeile uebriglassen. */
.dokumentfenster-rahmen { flex: 1; height: calc(100% - 8.5rem); }

.dokumentfenster-rahmen iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.dokumentfenster-fuss {
  margin: 0;
  padding: .55rem 1rem;
  font-size: .85rem;
  border-top: 1px solid var(--rahmen);
}

.fristen-gruen,
.fristen-rot {
  display: inline-block;
  min-width: 1.7rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.fristen-gruen { background: color-mix(in srgb, var(--ok) 15%, transparent);     color: var(--ok); }
.fristen-rot   { background: color-mix(in srgb, var(--fehler) 15%, transparent); color: var(--fehler); }

@media (prefers-color-scheme: dark) {
  .frist-gelb { color: #e0b341; }
}

.marke-ok   { color: var(--ok); font-weight: 600; }
.marke-warn { color: var(--fehler); font-weight: 600; }

.knopf-link {
  display: inline-block;
  padding: .55rem 1.1rem;
  border: 1px solid var(--akzent);
  border-radius: 7px;
  background: var(--akzent);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.knopf-link:hover { opacity: .9; }

/* Sitzt .knopf-link auf einem <button> statt auf einem <a>, gewinnt die
   allgemeine Regel `button:hover { color: var(--akzent) }` weiter oben nach
   Spezifitaet (0,1,1 gegen 0,1,0). Der Text bekaeme damit dieselbe Farbe wie
   sein Hintergrund - Kontrast 1:1, die Beschriftung verschwindet beim
   Ueberfahren vollstaendig. Gemessen an "Hineinschalten" in der
   Betreibersicht, der einzigen Stelle im Projekt mit dieser Kombination.
   button.haupt und button.achtung setzen die Farbe aus demselben Grund
   ausdruecklich zurueck - hier fehlte es. */
button.knopf-link:hover { color: #fff; }

.knopf-link.leise {
  border-color: var(--rand);
  background: var(--hintergrund);
  color: var(--text);
  font-weight: 400;
}

button.leise {
  padding: .35rem .7rem;
  font-size: .825rem;
}

button.achtung {
  border-color: var(--fehler);
  background: var(--fehler);
  color: #fff;
  font-weight: 600;
}

button.achtung:hover { opacity: .9; color: #fff; }

/* Blaetterleiste unter langen Tabellen - Protokoll, spaeter auch Fristen.
   Die Seitenangabe steht in der Mitte, die Wege links und rechts davon. */
.blaetterleiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .75rem;
}
.blaetterleiste span { color: var(--text-leise); }

.karte-achtung { border-color: color-mix(in srgb, var(--fehler) 40%, var(--rand)); }

.knopfreihe {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1.5rem;
}

.knopfreihe .haupt { width: auto; margin-top: 0; }

.blaettern {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1.25rem;
  font-size: .875rem;
  color: var(--text-leise);
}

.blaettern a { color: var(--akzent); text-decoration: none; }

.feld select {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--rand);
  border-radius: 7px;
  background: var(--hintergrund);
  color: var(--text);
  font: inherit;
}

.feld-fehler input, .feld-fehler select { border-color: var(--fehler); }

.feldfehler {
  margin: .35rem 0 0;
  color: var(--fehler);
  font-size: .825rem;
}

.feldhilfe {
  margin: .35rem 0 0;
  color: var(--text-leise);
  font-size: .8rem;
}

.pflicht { color: var(--fehler); }

/* Ein Hinweis, der klein bleibt und trotzdem auffaellt.
   VORGABE DES AUFTRAGGEBERS vom 03.09.2026: "eine kleine aber ausdrueckliche
   nachricht". Deshalb kein grosser Warnkasten - der wuerde die Seite
   dominieren und nach dem dritten Mal ueberlesen.

   KORRIGIERT AM 03.09.2026: Der erste Entwurf hatte einen Streifen links
   (border-left: 3px). Genau den hat der Auftraggeber am 18.08.2026 aus
   .warnbox entfernen lassen - "der Streifen war Zierrat". Ihn hier wieder
   einzufuehren waere ein Rueckfall gegen eine ausdrueckliche Entscheidung
   gewesen; gefunden hat es die Gestaltungspruefung.

   Jetzt dieselbe Sprache wie .warnbox - Umrandung und getoenter Grund -, nur
   in klein: duennere Polsterung, kleinere Schrift, kein eigener Titelabsatz.
   Die Farbe steht nie allein: der Text beginnt mit einer fetten Aussage. */
.warnhinweis {
  padding: .55rem .75rem;
  margin: 1rem 0;
  border: 1px solid var(--fehler);
  border-radius: 6px;
  background: color-mix(in srgb, var(--fehler) 6%, var(--flaeche));
  color: var(--text);
  font-size: .85rem;
}

@media (prefers-color-scheme: dark) {
  .knopf-link { color: var(--hintergrund); }
  /* Dieselbe Falle wie im Hellmodus, siehe button.knopf-link:hover oben. */
  button.knopf-link:hover { color: var(--hintergrund); }
}

/* ---------- Phase 5: Kompetenzabschnitte ---------- */

/* Warnbox nach dem Vorbild aus KomReg: was ablaeuft, steht ganz oben. */
.warnbox {
  margin-bottom: 1.5rem;
  padding: 1rem 1.15rem;
  /* KEIN dicker Streifen links mehr - Entscheidung des Auftraggebers vom
     18.08.2026. Die Umrandung und der getoente Grund tragen die Warnung
     allein; der Streifen war Zierrat. */
  border: 1px solid var(--fehler);
  border-radius: 8px;
  background: color-mix(in srgb, var(--fehler) 6%, var(--flaeche));
}

.warnbox-titel {
  margin: 0 0 .5rem;
  font-weight: 600;
  color: var(--fehler);
}

.warnbox ul { margin: 0; padding-left: 1.2rem; }
.warnbox li { margin: .25rem 0; font-size: .9rem; }
.warnbox p:last-child { margin: 0; font-size: .9rem; }

/* Sachlicher Hinweis statt Warnung - dieselbe Bauform in der Akzentfarbe.
   Stand vorher als style="..." im Template. Inline-Stile sind kein
   Schoenheitsfehler, sondern der Grund, warum eine Content-Security-Policy
   'unsafe-inline' erlauben muesste - und damit einen Grossteil ihrer Wirkung
   verloere. Deshalb liegt hier jede Regel, die frueher im Attribut stand. */
.warnbox.hinweisbox {
  border-color: var(--akzent);
  background: color-mix(in srgb, var(--akzent) 6%, var(--flaeche));
}

.warnbox.hinweisbox .warnbox-titel { color: var(--akzent); }

/* Kleine Abstandshelfer - ebenfalls aus Inline-Stilen hervorgegangen. */
.abstand-oben { margin-top: 1.25rem; }
.abschnittskopf.abstand-knapp { margin-top: 1rem; }
.karte-achtung h3.buendig { margin-top: 0; }
.brotkrumen.mittig { text-align: center; margin-top: 1rem; }

/* Drei Spalten wie in der Vorlage, auf schmalen Fenstern untereinander. */
.raster-drei {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.raster-drei .karte { margin-top: 0; }

.abschnittskopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .85rem;
}

.abschnittskopf h2 { margin: 0; }

.knopf-link.klein {
  padding: .3rem .7rem;
  font-size: .8rem;
}

.klassen {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 .75rem;
}

/* Nicht vergebene Klassen bleiben sichtbar, aber blass - das Dokument
   druckt dort einen Strich, und man soll sehen, was moeglich waere. */
.klasse {
  padding: .2rem .55rem;
  border: 1px solid var(--rand);
  border-radius: 6px;
  font-size: .8rem;
  color: var(--text-leise);
}

.klasse.gesetzt {
  border-color: var(--akzent);
  background: color-mix(in srgb, var(--akzent) 12%, transparent);
  color: var(--akzent);
  font-weight: 600;
}

.merkmalliste {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.merkmalliste li {
  padding: .45rem 0;
  border-top: 1px solid var(--rand);
  font-size: .9rem;
}

.merkmalliste li:last-child { border-bottom: 1px solid var(--rand); }

/* Aktionen am Zeilenende.
   Die Zelle bleibt ausdruecklich eine Tabellenzelle - ein display:flex auf
   einem <td> nimmt sie aus dem Tabellenkontext heraus, und die Spalten der
   Zeile fluchten dann nicht mehr mit dem Kopf.
   Ausgerichtet wird stattdessen der INHALT: das <form> um einen Knopf ist ein
   Blockelement und sprang deshalb unter die daneben stehenden Links, obwohl
   white-space:nowrap das Gegenteil nahelegte. */
/* Die Zelle darf umbrechen - sie war mit drei Links nebeneinander die
   breiteste unteilbare Zelle der Akte. Zusammengehalten wird nur noch der
   EINZELNE Link, damit "Beleg fehlt" nicht mitten im Wort bricht. */
.zeilenaktionen a { white-space: nowrap; }

.zeilenaktionen form {
  margin: 0;
  display: inline-block;
  vertical-align: middle;
}

.zeilenaktionen a {
  margin-right: .6rem;
  font-size: .825rem;
  vertical-align: middle;
}

.zeile-aberkannt td { opacity: .55; }

.raster-drei h3 { margin-top: 1.25rem; }

/* ---------- Phase 7: Bescheinigungen ---------- */

.bescheinigung {
  padding: .85rem 0;
  border-top: 1px solid var(--rand);
  font-size: .9rem;
}

.bescheinigung:first-of-type { border-top: none; }
.bescheinigung p { margin: 0 0 .5rem; }

.dokumentlinks { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .85rem; }
.dokumentlinks a { color: var(--akzent); text-decoration: none; }
.dokumentlinks a:hover { text-decoration: underline; }

.vorgangsreihe { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.vorgangsreihe form { display: inline; }

/* Rechtliche Verweise. Muessen auf JEDER Seite stehen (§ 5 DDG), duerfen aber
   nicht mit dem Inhalt konkurrieren - deshalb klein und zurueckgenommen. */
.fusszeile {
  margin-top: 3rem;
  padding: 1.2rem 1.5rem 2rem;
  border-top: 1px solid var(--rand);
  font-size: .82rem;
}
.fusszeile nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.fusszeile a { color: var(--text-leise); text-decoration: none; }
.fusszeile a:hover { color: var(--akzent); text-decoration: underline; }

/* Ein nicht ausgefuelltes Impressumsfeld muss auffallen, nicht harmlos
   aussehen: ein unvollstaendiges Impressum ist eine Ordnungswidrigkeit. */
.platzhalter { color: var(--fehler); font-weight: 600; }

.rechtstext p { margin: .5rem 0 .9rem; line-height: 1.55; }
.rechtstext h2 { margin-top: 1.6rem; }

/* ==========================================================================
   OCR-Assistenz (app/static/ocr.js, lokfuehrer_formular.html)
   ========================================================================== */

/* [hidden] ausdruecklich durchsetzen. Ohne diese Zeile gewinnt jede spaetere
   Regel mit display: flex/block gegen das Attribut - und der gesamte
   OCR-Block waere auch ohne JavaScript sichtbar, mit Knoepfen, die nichts
   tun. Genau der Fall, den das Attribut verhindern soll. */
[hidden] { display: none !important; }

.ocr {
  padding-bottom: 1.1rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--rand);
}
.ocr-frage { margin: 0 0 .6rem; font-weight: 600; }
.ocr .knopfreihe { margin-top: 0; }

/* Ablageflaeche. Der gestrichelte Rand ist die uebliche Bildsprache fuer
   "hier darf etwas hinein" - ohne ihn wirkt die Flaeche wie ein Textkasten. */
.ocr-zone {
  margin-top: 1rem;
  padding: 1.8rem 1.2rem;
  border: 2px dashed var(--rand);
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  background: color-mix(in srgb, var(--akzent) 3%, transparent);
  transition: border-color .15s, background .15s;
}
.ocr-zone:hover,
.ocr-zone:focus-visible,
.ocr-zone-aktiv {
  border-color: var(--akzent);
  background: color-mix(in srgb, var(--akzent) 8%, transparent);
}
.ocr-zone-text { margin: 0 0 .4rem; line-height: 1.6; }
.ocr-zone .feldhilfe { margin: 0; }

/* Der Knopf in der Ablageflaeche sieht aus wie ein Link, ist aber ein
   <button> - er loest eine Aktion aus und fuehrt nirgendwohin. */
.ocr-waehlen {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--akzent);
  text-decoration: underline;
  cursor: pointer;
}

/* Lade-Indikator. Der Aufruf dauert regelmaessig mehrere Sekunden; ohne
   sichtbares Zeichen drueckt der Anwender ein zweites Mal. */
.ocr-laeuft {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: 1rem;
  color: var(--text-leise);
}
.ocr-spinner {
  width: 1.1em;
  height: 1.1em;
  border: 2px solid var(--rand);
  border-top-color: var(--akzent);
  border-radius: 50%;
  animation: ocr-dreht .8s linear infinite;
  flex: none;
}
@keyframes ocr-dreht { to { transform: rotate(360deg); } }

/* Wer "Bewegung reduzieren" eingestellt hat, bekommt keine Drehung. Der
   Indikator bleibt sichtbar - nur eben still. */
@media (prefers-reduced-motion: reduce) {
  .ocr-spinner { animation: none; border-top-color: var(--akzent); }
}

/* Warnbanner ueber der Karte. Muss auffallen: es steht fuer Felder, die ein
   Mensch nachtragen MUSS, bevor eine Urkunde daraus wird. */
.ocr-banner {
  margin-bottom: 1.2rem;
  padding: 1rem 1.2rem;
  border-radius: 8px;
  /* Umrandung statt Streifen links - siehe .warnbox. Das Banner muss
     auffallen, und das tut es ueber Farbe und Flaeche. */
  border: 1px solid var(--fehler);
  background: color-mix(in srgb, var(--fehler) 8%, var(--flaeche));
}
.ocr-banner strong { display: block; margin-bottom: .35rem; font-size: 1.05rem; }
.ocr-banner p { margin: 0 0 .4rem; line-height: 1.55; }
.ocr-banner p:last-child { margin-bottom: 0; }
.ocr-banner-fuss { font-size: .85em; color: var(--text-leise); }

/* Alles erkannt: gleiche Bauform, ruhigere Farbe - der Hinweis zum Pruefen
   bleibt, die Dringlichkeit nicht. */
.ocr-banner-hinweis {
  border-left-color: var(--akzent);
  background: color-mix(in srgb, var(--akzent) 7%, var(--flaeche));
}

/* Von der Maschine gefuellte Felder sind markiert. Der Anwender soll auf
   einen Blick unterscheiden koennen, was er selbst getippt hat und was er
   gegen das Dokument pruefen muss. Ein zusaetzlicher Rand, keine
   Farbaenderung des Textes - lesbar bleibt es in jedem Fall. */
.ocr-uebernommen {
  border-color: color-mix(in srgb, var(--akzent) 55%, var(--rand)) !important;
  background: color-mix(in srgb, var(--akzent) 5%, transparent);
}

/* Verweis auf die Registrierung unter dem Anmeldeformular. Vorher stand dort
   nur ein Hinweistext ohne Ziel - /registrieren war damit ausschliesslich
   ueber die direkt eingetippte Adresse erreichbar. */
.registrierhinweis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  margin: 1.4rem 0 .6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rand);
}

/* ==========================================================================
   Textseiten: Datenschutz, Impressum, Nutzungsvertrag
   ==========================================================================

   Vorher hingen diese drei Seiten an ".schmal" - und das ist die Breite des
   ANMELDEFORMULARS: max-width 24rem, also 384 px. Ein Formular mit zwei
   Eingabefeldern ist darin richtig aufgehoben; eine Datenschutzerklaerung mit
   zwoelf Abschnitten wurde dadurch auf einem 27-Zoll-Monitor zu einer
   fingerbreiten Papierrolle. Das war kein Feinschliff, sondern die falsche
   Klasse an der falschen Stelle.

   Die Zeilenlaenge ist in ch angegeben und nicht in px: ch ist die Breite der
   Null in der aktuellen Schrift, die Angabe skaliert also mit der
   Schriftgroesse des Nutzers mit. 68ch liegen bei etwa 66 bis 75 Zeichen je
   Zeile - der Bereich, den die Typografie fuer Lesetext empfiehlt. Eine
   Pixelangabe waere bei vergroesserter Schrift zu eng geworden. */
.textseite {
  max-width: 68ch;
  margin: 0 auto;
}

/* Auf sehr grossen Bildschirmen etwas Luft nach oben, damit der Text nicht an
   der Navigationsleiste klebt. */
@media (min-width: 60rem) {
  .textseite { padding-top: 1rem; }
}

.textseite header { margin-bottom: 1.5rem; }
.textseite h1 { margin-bottom: .35rem; }

/* Der Lesetext selbst. line-height 1.7 statt der globalen 1.55: laengere
   Zeilen brauchen mehr Durchschuss, sonst findet das Auge beim Ruecksprung
   die naechste Zeile schlechter. */
.rechtstext {
  padding: 2rem 2.25rem;
  line-height: 1.7;
  /* Deutsche Rechtstexte haben lange Komposita ("Auftragsverarbeitungs-
     vertrag"). Ohne Trennung reisst eine einzelne solche Zeile die Spalte
     auseinander. lang="de" steht in basis.html, der Browser trennt also nach
     deutschen Regeln. */
  hyphens: auto;
}

.rechtstext p {
  margin: 0 0 1.1em;
  /* Nicht im Blocksatz: ohne echte Silbentrennungsqualitaet erzeugt Blocksatz
     im Browser Flusslinien. Linksbuendig liest sich besser. */
  text-align: left;
}
.rechtstext p:last-child { margin-bottom: 0; }

/* Abschnittsueberschriften. Deutlich groesser als die globale h2-Regel
   (1.05rem) und mit viel Abstand DAVOR, wenig danach - so gehoert die
   Ueberschrift sichtbar zum folgenden Absatz und nicht zum vorangehenden. */
.rechtstext h2 {
  margin: 2.2rem 0 .6rem;
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--text);
  /* Die Abschnittsnummer haengt links in den Rand, damit die Textkante der
     Absaetze durchlaeuft und die Gliederung beim Ueberfliegen sichtbar ist. */
  text-indent: -2.2rem;
  padding-left: 2.2rem;
}
.rechtstext h2:first-child { margin-top: 0; }

/* Auf schmalen Fenstern kein haengender Einzug - dort fehlt der Platz. */
@media (max-width: 34rem) {
  .rechtstext { padding: 1.25rem; }
  .rechtstext h2 { text-indent: 0; padding-left: 0; }
}

/* Hervorhebungen im Rechtstext kommen aus dem Filter "hervorheben"
   (app/routen/__init__.py) und markieren tragende Begriffe - Fristen,
   Rechtsgrundlagen, Verneinungen. Etwas kraeftiger als normal fett, weil sie
   beim Ueberfliegen gefunden werden sollen. */
.rechtstext strong { font-weight: 650; }

/* Der Platzhalter kann im Rechtstext mitten in einem Absatz stehen (Nummer 10,
   solange die Vertragslage nicht erklaert ist). Dort muss er auffallen wie im
   Impressum. */
.rechtstext strong + em { font-style: normal; }

/* Fusszeile der Textseiten: die Querverweise zwischen den drei Dokumenten. */
.mittig { text-align: center; }
.textseite .brotkrumen { margin-top: 1.5rem; }

/* ---------- Rueckmeldungen der Anwender ---------- */

/* Der Knopf unten links, auf jeder Seite. <details> statt JavaScript: das
   Aufklappen kann der Browser selbst, es ist mit der Tastatur bedienbar und
   ein Vorleseprogramm meldet den Zustand von sich aus. */
.rueckmeldung-knopf {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 20;
  max-width: calc(100vw - 2rem);
}

.rueckmeldung-knopf > summary {
  display: inline-block;
  padding: .5rem 1rem;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--text-leise);
  font-size: .85rem;
  cursor: pointer;
  list-style: none;
  box-shadow: 0 1px 4px rgb(0 0 0 / .08);
}

.rueckmeldung-knopf > summary::-webkit-details-marker { display: none; }
.rueckmeldung-knopf > summary:hover { color: var(--akzent); border-color: var(--akzent); }

.rueckmeldung-knopf[open] > summary { color: var(--akzent); border-color: var(--akzent); }

.rueckmeldung-knopf form {
  width: 22rem;
  max-width: calc(100vw - 2rem);
  margin-top: .6rem;
  padding: 1rem;
  border: 1px solid var(--rand);
  border-radius: 10px;
  background: var(--flaeche);
  box-shadow: 0 4px 16px rgb(0 0 0 / .12);
}

.rueckmeldung-knopf label {
  display: block;
  margin-bottom: .35rem;
  font-size: .875rem;
  color: var(--text-leise);
}

.rueckmeldung-knopf textarea {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--rand);
  border-radius: 7px;
  background: var(--hintergrund);
  color: var(--text);
  font: inherit;
  font-size: .9rem;
  resize: vertical;
}

.rueckmeldung-knopf textarea:focus { border-color: var(--akzent); }

/* Die Liste in der Betreibersicht. */
.rueckmeldung {
  padding: .9rem 0;
  border-top: 1px solid var(--rand);
}

.rueckmeldung:first-of-type { border-top: none; }

.rueckmeldung-kopf {
  margin: 0 0 .35rem;
  font-size: .8rem;
  color: var(--text-leise);
}

/* Fremder Text, moeglicherweise mit sehr langen Zeichenketten ohne Leerzeichen -
   ohne diese Regel sprengt er die Karte. */
.rueckmeldung-text {
  margin: 0 0 .5rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.rueckmeldung.erledigt .rueckmeldung-text { color: var(--text-leise); }

.erledigte { margin-top: 1rem; }
.erledigte > summary { cursor: pointer; font-size: .875rem; color: var(--text-leise); }

/* ---------- Kennzahlkarten auf der Startseite ---------- */

/* Dasselbe Rasterverfahren wie .raster-drei - kein zweites Layoutmodell im
   Projekt. 15rem statt 17rem, damit in der um 15rem schmaleren Inhaltsspalte
   weiterhin drei Karten nebeneinander passen. */
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* Das ganze Kaestchen ist EIN Link, nicht Karte plus Pfeil darin: ein Ziel,
   ein Tabulatorstopp, eine grosse Treffflaeche am Handy. */
.kennzahl {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}

.kennzahl:hover { border-color: var(--akzent); }

.kennzahl-symbol {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9px;
}

.kennzahl-text { display: flex; flex-direction: column; margin-right: auto; }

.kennzahl-wert {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.kennzahl-titel { font-size: .85rem; color: var(--text-leise); }

.kennzahl-pfeil { flex: none; color: var(--text-leise); }

/* Farben ausschliesslich aus den vorhandenen Token, nach demselben Muster wie
   .ampel-* seit Phase 4 - kein neuer Hexwert. */
.kennzahl-akzent  { background: color-mix(in srgb, var(--akzent) 14%, transparent); color: var(--akzent); }
.kennzahl-ok      { background: color-mix(in srgb, var(--ok) 14%, transparent);     color: var(--ok); }
.kennzahl-warnung { background: color-mix(in srgb, var(--fehler) 14%, transparent); color: var(--fehler); }

/* Zwei gleich breite Karten nebeneinander - die Gliederung des Vorbilds unter
   den Kennzahlen. Wie .raster-drei, nur mit groesserer Mindestbreite: hier
   stehen Listen mit Namen drin, keine Kurzangaben. */
.raster-zwei {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

/* Die Überschriften der beiden Karten tragen ein Sinnbild - deshalb Flex. */
.raster-zwei h2,
.karte h2 .menue-symbol { vertical-align: middle; }

.raster-zwei h2 {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .9rem;
}

/* Knappe Liste ohne Aufzählungszeichen: Name, Einordnung, Datum. */
.knappe-liste { list-style: none; margin: 0; padding: 0; }

.knappe-liste li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  padding: .5rem 0;
  border-top: 1px solid var(--rand);
}

.knappe-liste li:first-child { border-top: none; }
.knappe-liste a { color: var(--akzent); font-weight: 600; text-decoration: none; }
.knappe-liste .leise-text { margin-right: auto; }

/* Vierte Farbe für die Kennzahlkarten: gelb wie die Fristenampel. */
.kennzahl-gelb { background: color-mix(in srgb, #b8860b 18%, transparent); color: #8a6508; }

@media (prefers-color-scheme: dark) {
  .kennzahl-gelb { color: #e0b341; }
}

/* "Ich komme nicht hinein" auf der Anmeldeseite. Zugeklappt eine Zeile,
   aufgeklappt ein schmales Formular - der Fall ist selten, soll aber ohne
   Suchen zu finden sein. */
/* Die zwei Wege hinein, wenn die Anmeldung scheitert.

   FUND DES AUFTRAGGEBERS vom 18.08.2026, mit Bildschirmfoto: "Passwort
   vergessen?" stand als violetter Browser-Standardlink da - die einzige
   Stelle der Anwendung mit dieser Farbe. Und beide Wege standen lose
   untereinander, ohne erkennbaren Zusammenhang. */
.anmeldehilfe {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rand);
}

.anmeldehilfe p { margin: 0 0 .5rem; font-size: .875rem; }

.anmeldehilfe a { color: var(--akzent); }

.melden { margin-top: 0; }

.melden > summary {
  cursor: pointer;
  font-size: .875rem;
  color: var(--text-leise);
}

.melden > summary:hover { color: var(--akzent); }

.melden form {
  margin-top: .8rem;
  padding: 1rem;
  border: 1px solid var(--rand);
  border-radius: 10px;
  background: var(--flaeche);
}

.melden textarea {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--rand);
  border-radius: 7px;
  background: var(--hintergrund);
  color: var(--text);
  font: inherit;
  font-size: .9rem;
  resize: vertical;
}

/* Ein Formular, dessen Felder nebeneinander stehen - fuer kurze Eingaben wie
   eine Abwesenheit (von, bis, Grund). Bricht auf schmalen Fenstern um. */
.reihenformular {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rand);
}

.reihenformular .feld { margin-bottom: 0; flex: 1 1 12rem; }
.reihenformular input { width: 100%; }
.reihenformular button { flex: none; }

/* --- Anlage 2 des Auftragsverarbeitungsvertrags --------------------------
   Gestapelte Eintraege statt einer Tabelle: in der Lesebreite von .textseite
   (68ch) haetten vier Spalten je rund 170 Pixel bekommen - Fliesstext in
   Einzelwortsaeulen. Eine Beschreibungsliste traegt dieselbe Information und
   bleibt auf jedem Bildschirm dieselbe. */
.avv-liste { list-style: decimal; padding-left: 1.5rem; margin: 1rem 0; }
.avv-liste > li { margin-bottom: 1.25rem; }
.avv-liste h3 { margin: 0 0 .4rem; font-size: 1rem; }
.avv-liste dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .2rem .75rem;
  margin: 0;
}
.avv-liste dt { font-weight: 600; color: var(--text-leise); }
.avv-liste dd { margin: 0; }

/* Unter 40rem wuerde die erste Spalte den Text zu stark einschnueren. */
@media (max-width: 40rem) {
  .avv-liste dl { grid-template-columns: 1fr; }
  .avv-liste dd { margin-bottom: .4rem; }
}

.marke-bedingt {
  font-size: .75rem;
  font-weight: 500;
  padding: .1rem .4rem;
  border: 1px solid currentColor;
  border-radius: .2rem;
  vertical-align: middle;
}

/* --- Erkennungs-Assistent -------------------------------------------------
   Die Vorschlagsliste. Unklares und Fehlgeschlagenes hebt sich ab, damit man
   beim Durchscrollen von 50 Karten die drei Problemfaelle nicht sucht. */
.vorschlag-unklar { border-color: color-mix(in srgb, var(--warn) 45%, var(--rand)); }
.vorschlag-abgelehnt { opacity: .55; }
.vorschlag-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Ein Dokument, das noch gelesen wird, tritt zurueck - es ist keine Aufgabe
   fuer den Anwender, sondern ein Zustand der Maschine. */
.vorschlag-wartet { opacity: .6; }
.hinweis.wartet { display: flex; align-items: center; gap: .5rem; }

/* Die Aktionsspalte der Mandantenliste.

   FUND DES AUFTRAGGEBERS vom 18.08.2026, mit Bildschirmfoto: die beiden
   Knoepfe standen untereinander und trugen die Tabelle in die Breite -
   "einmal rechts die Knoepfe verkleinern oder besser ans Layout anpassen".

   Nebeneinander statt untereinander, und beide in Zeilenhoehe. Die Spalte
   wird damit halb so hoch. */
.mandantenaktionen {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  justify-content: flex-end;
}

.mandantenaktionen form { margin: 0; }

.mandantenaktionen .knopf-link,
.mandantenaktionen button {
  padding: .25rem .6rem;
  font-size: .82rem;
  white-space: nowrap;
}

/* "Daten löschen" ROT - Vorgabe des Auftraggebers. Der Knopf ist der
   einzige auf dieser Seite, der etwas unwiederbringlich zerstoert; er soll
   nicht aussehen wie "Hineinschalten". Als Umrandung und nicht als Flaeche:
   eine volle rote Flaeche neben einer vollen blauen zoege den Blick genau
   auf den gefaehrlichen Knopf, und danach klickt man ihn aus Gewohnheit. */
.knopf-loeschen {
  background: transparent;
  color: var(--fehler);
  border: 1px solid color-mix(in srgb, var(--fehler) 45%, transparent);
}

.knopf-loeschen:hover,
.knopf-loeschen:focus-visible {
  background: color-mix(in srgb, var(--fehler) 10%, transparent);
  border-color: var(--fehler);
}

/* Der Rollbereich im Protokollfenster.

   Anders als beim Dokumentenfenster steht hier eine TABELLE, und die kann
   lang werden (bis 300 Zeilen). Sie rollt in sich selbst - das Fenster
   behält seine Höhe, Kopfzeile und Fußzeile bleiben stehen. */
.protokollfenster-rollen {
  flex: 1;
  overflow: auto;
  padding: 0 1rem;
  max-height: calc(80vh - 8rem);
}

.protokollfenster-rollen table { font-size: .85rem; }

/* Die Kopfzeile bleibt beim Rollen stehen - ohne sie weiß nach zwanzig
   Zeilen niemand mehr, welche Spalte was ist. */
.protokollfenster-rollen thead th {
  position: sticky;
  top: 0;
  background: var(--flaeche);
  z-index: 1;
}

/* Zeit und Name sollen nicht umbrechen, die Einzelheiten dürfen. */
.protokollfenster-rollen td:first-child,
.protokollfenster-rollen td:nth-child(2) { white-space: nowrap; }

/* Schmales Zahlenfeld in Tabellenzeilen - etwa die Regelfrist im
   Anforderungskatalog. Ohne das nimmt ein number-Feld die ganze Spaltenbreite
   ein und die Tabelle wird unlesbar. */
.schmales-feld { width: 6rem; }


/* Die fuenf Vorgangs-Rueckfragen in der Akte (Aussetzen, Entziehen, Verlust,
   Entwendet, Zerstoert).

   BEFUND DER OBERFLAECHENDURCHSICHT vom 19.08.2026: beide Klassen wurden in
   lokfuehrer_detail.html benutzt und waren im Stylesheet NIE definiert. Die
   fuenf Aufklapper sahen dadurch aus wie nackte Dreiecke mit Text, nicht wie
   Knoepfe - waehrend direkt daneben echte Knoepfe stehen. Kein Test kann das
   sehen; die Vorlage rendert fehlerfrei. */
.vorgangsfrage { display: inline-block; }

.knopf-artig {
  display: inline-block;
  padding: .55rem 1.1rem;
  border: 1px solid var(--akzent);
  border-radius: 7px;
  background: var(--akzent);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  /* Das Aufklapp-Dreieck entfernen - der Knopf soll ein Knopf sein. */
  list-style: none;
}

.knopf-artig::-webkit-details-marker { display: none; }

.knopf-artig.leise {
  border-color: var(--rand);
  background: var(--hintergrund);
  color: var(--text);
  font-weight: 400;
}

.knopf-artig:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}

/* Aufgeklappt sitzt die Rueckfrage direkt unter ihrem Knopf. */
.vorgangsfrage[open] > .knopf-artig { margin-bottom: .6rem; }