/* LOEWE Versicherungs-Dashboard — Farbwelt und Bausteine aus der PSA-Lager-App,
   aber als Desktop-Oberflaeche: Navigation oben statt unten, breite Tabellen,
   zweispaltige Formulare. Kein Handy-Layout (bewusst, laut Konzept). */
* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }

:root {
  --beton:       #f2f3f0;
  --etikett:     #ffffff;
  --feld:        #f7f8f5;
  --linie:       rgba(29, 29, 27, 0.12);
  --linie-sanft: rgba(29, 29, 27, 0.07);
  --linie-stark: rgba(29, 29, 27, 0.28);
  --tinte:       #1d1d1b;
  --tinte-2:     #5c5f58;
  /* Von #90938b auf #6e7269 nachgedunkelt (28.08.2026).
     Der alte Wert erreichte 3,12:1 gegen Weiss und 2,93:1 gegen --feld - AA verlangt 4,5:1
     fuer Text. Solange damit nur Tabellenkoepfe beschriftet waren, war das vertretbar. Seit
     der Umbau die Schrittkoepfe, die Leer-Hinweise und den KI-Haftungssatz darauf legt, ist
     es das nicht mehr.
     Neu #6a6e65: 5,21:1 gegen Weiss, 4,89:1 gegen --feld, 4,68:1 gegen --beton. Der erste
     Versuch (#6e7269) reichte gegen Weiss und --feld, blieb auf dem Seitenhintergrund
     --beton aber bei 4,41:1 - nachgerechnet, nicht geschaetzt. */
  --tinte-3:     #6a6e65;

  --loewe:        #008639;
  --loewe-dunkel: #006e2f;
  --loewe-hell:   #e6f2ea;
  --signal:       #c23a1d;
  --signal-dunkel:#a52f15;
  --signal-hell:  #faeae5;
  --warn:         #a05a0a;
  --warn-hell:    #fbf1df;

  --radius: 10px;
  --schatten: 0 0 0 1px rgba(29,29,27,0.06), 0 1px 2px -1px rgba(29,29,27,0.08), 0 4px 12px rgba(29,29,27,0.08);
  --schnell: 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

body {
  font-family: "Bahnschrift", "DIN Alternate", "Segoe UI", system-ui, sans-serif;
  background: var(--beton);
  color: var(--tinte);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
}

/* ---------- Anmeldung ---------- */
.anmeldung { min-height: 100vh; display: grid; place-items: center; padding: 2rem; }
.anmeldung-box { width: 340px; text-align: center; }
.anmeldung-logo { height: 30px; margin-bottom: 0.5rem; }
.anmeldung-app {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tinte-2); margin-bottom: 1.6rem;
}

/* ---------- Kopf & Navigation ---------- */
header {
  position: sticky; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center; gap: 2rem;
  background: rgba(255,255,255,0.94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie); padding: 0.55rem 1.5rem;
}
.marke { display: flex; align-items: center; gap: 0.75rem; }
.marke img { height: 22px; }
.marke span {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tinte-2); border-left: 1px solid var(--linie); padding-left: 0.75rem;
}
nav { display: flex; gap: 0.15rem; margin-right: auto; }
.nav-btn {
  border: 0; background: none; font-family: inherit; font-size: 0.9rem; font-weight: 600;
  color: var(--tinte-3); padding: 0.5rem 0.85rem; border-radius: 7px; cursor: pointer;
  transition: color var(--schnell), background var(--schnell);
}
.nav-btn:hover { color: var(--tinte); background: var(--feld); }
.nav-btn.aktiv { color: var(--loewe); background: var(--loewe-hell); }
.kopf-rechts { display: flex; align-items: center; gap: 0.9rem; font-size: 0.85rem; color: var(--tinte-2); }

/* ---------- Layout ---------- */
.ansicht { max-width: 1440px; margin: 0 auto; padding: 1.6rem 1.5rem 5rem; }
.ansicht-kopf {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
  margin-bottom: 1.1rem;
}
.ansicht-kopf h2 {
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tinte-2);
}
.werkzeuge { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

.karte {
  background: var(--etikett); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
}
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.8rem; margin-bottom: 1.6rem; }
.kachel { background: var(--etikett); border: 1px solid var(--linie); border-radius: var(--radius); padding: 0.9rem 1.1rem; }
.kachel b { display: block; font-size: 1.8rem; font-weight: 700; line-height: 1.1; }
.kachel span { font-size: 0.78rem; color: var(--tinte-2); letter-spacing: 0.02em; }
.kachel.rot b { color: var(--signal); }
.kachel.gelb b { color: var(--warn); }
.kachel.gruen b { color: var(--loewe); }

/* ---------- Tabellen ---------- */
.tabelle-rahmen {
  background: var(--etikett); border: 1px solid var(--linie); border-radius: var(--radius);
  overflow: hidden;
}
.tabelle-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
th {
  text-align: left; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--tinte-3); padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--linie); white-space: nowrap; background: var(--etikett);
}
td { padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--linie-sanft); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.klickbar { cursor: pointer; transition: background var(--schnell); }
tbody tr.klickbar:hover { background: var(--feld); }
/* Ein Vorgang, der ueberfaellig ist, traegt links einen roten Balken - beim Ueberfliegen der
   Liste sieht man ohne Lesen, wo etwas liegen geblieben ist. */
tbody tr.hakt td:first-child { box-shadow: inset 3px 0 0 var(--signal); }
tbody tr.hakt td { background: var(--signal-hell); }
tbody tr.hakt.klickbar:hover td { background: #f6ded6; }
/* Zweite Zeile in der Status-Spalte: worauf der Vorgang gerade wartet. */
.wartet { display: block; font-size: 0.72rem; color: var(--tinte-3); margin-top: 0.2rem; }
.wartet.rot { color: var(--signal); font-weight: 600; }
td.nr { font-weight: 700; white-space: nowrap; }
td.rechts, th.rechts { text-align: right; }
.leer { padding: 2.5rem 1rem; text-align: center; color: var(--tinte-3); font-size: 0.9rem; }

/* ---------- Marken ---------- */
.marker {
  display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 0.16rem 0.5rem; border-radius: 5px; white-space: nowrap;
  background: var(--feld); color: var(--tinte-2); border: 1px solid var(--linie);
}
.marker.offen  { background: var(--feld);        color: var(--tinte-2); }
.marker.warten { background: var(--warn-hell);   color: var(--warn);   border-color: transparent; }
.marker.fertig { background: var(--loewe-hell);  color: var(--loewe-dunkel); border-color: transparent; }
.marker.rot    { background: var(--signal-hell); color: var(--signal); border-color: transparent; }

/* ---------- Buttons ---------- */
.btn {
  border: 0; border-radius: 8px; font-family: inherit; font-size: 0.9rem; font-weight: 600;
  padding: 0.55rem 0.95rem; cursor: pointer; color: var(--tinte);
  transition: background var(--schnell), transform var(--schnell), filter var(--schnell);
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn-primaer { background: var(--loewe); color: #fff; }
.btn-primaer:hover:not(:disabled) { background: var(--loewe-dunkel); }
/* Zurueckgenommenes Gruen: der Knopf steht in einer langen Liste neben dem Status und
   soll ihn nicht ueberstrahlen. ECHTE Transparenz ging nicht - weisse Schrift auf
   rgba(0,134,57,0.72) kommt auf 2,98:1 und faellt damit unter WCAG AA (4,5:1); selbst
   das volle Gruen liegt nur bei 4,71:1, jede Abschwaechung reisst es also. Deshalb der
   helle Grund mit dunkelgruener Schrift - dieselbe Paarung wie bei .btn-gefahr, rund
   6,5:1. Beim Zeigen wird er wieder voll (Codex, 31.08.2026). */
.btn-primaer.btn-leise { background: var(--loewe-hell); color: var(--loewe-dunkel); }
.btn-primaer.btn-leise:hover:not(:disabled) { background: var(--loewe); color: #fff; }
/* Status und Knopf in der Maschinenliste. Umbrechend, weil die Spalte schmal ist - und
   der Abstand kommt aus "gap", damit beide in der zweiten Zeile buendig links stehen
   statt versetzt (Screenshot 31.08.2026). */
.maschine-status {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
}
.btn-schlicht { background: var(--etikett); border: 1px solid var(--linie); }
.btn-schlicht:hover:not(:disabled) { background: var(--feld); }
.btn-gefahr { background: var(--signal-hell); color: var(--signal-dunkel); }
.btn-gefahr:hover:not(:disabled) { background: #f5ddd5; }
.btn-klein { font-size: 0.8rem; padding: 0.35rem 0.65rem; }
.btn-gross { font-size: 1rem; padding: 0.75rem 1.1rem; width: 100%; }

/* ---------- Formulare ---------- */
label {
  display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--tinte-2); margin-bottom: 0.3rem;
}
input, select, textarea {
  width: 100%; font-family: inherit; font-size: 0.92rem; color: var(--tinte);
  background: var(--feld); border: 1px solid var(--linie); border-radius: 8px;
  padding: 0.5rem 0.65rem; transition: border-color var(--schnell), background var(--schnell);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--loewe); background: var(--etikett);
}
textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.raster2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem 1.1rem; }
.raster3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.85rem 1.1rem; }
.breit { grid-column: 1 / -1; }
.feldgruppe { margin-bottom: 0.85rem; }
.suchfeld { width: 260px; }
.filter { width: auto; min-width: 150px; }
.fehler { color: var(--signal); font-size: 0.85rem; margin-top: 0.6rem; }

/* Zahl am Reiter: wie viel im Eingangskorb liegt. */
.nav-zahl {
  display: inline-block; margin-left: 0.35rem; padding: 0.05rem 0.4rem; border-radius: 999px;
  background: var(--signal); color: #fff; font-size: 0.7rem; font-weight: 700;
  vertical-align: middle;
}

/* ---------- Aus dem Beleg gelesene Rechnungsdaten ---------- */
.anhang-block {
  border: 1px solid var(--linie-sanft); border-radius: 8px; margin-bottom: 0.45rem;
  background: var(--etikett);
}
.anhang-block[open] { border-color: var(--linie); }
.anhang-block > summary {
  cursor: pointer; padding: 0.5rem 0.7rem; list-style: none;
  display: flex; align-items: center; gap: 0.45rem;
}
.anhang-block > summary::-webkit-details-marker { display: none; }
/* Eigenes Dreieck, damit es links steht und beim Aufklappen dreht. */
.anhang-block > summary::before {
  content: "\25B8"; color: var(--tinte-3); font-size: 0.7rem;
  transition: transform var(--schnell); flex: 0 0 auto;
}
.anhang-block[open] > summary::before { transform: rotate(90deg); }
.anhang-block > summary:hover { background: var(--feld); border-radius: 8px; }
/* FESTE Breite: sonst verschieben sich die Marken und Knoepfe je nach Laenge des Dateinamens
   von Zeile zu Zeile (Fund 27.08.2026). */
.anhang-name {
  flex: 0 1 22rem; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 0.88rem;
}
/* Abstand nach oben und eine Trennlinie: die Knoepfe klebten sonst am Dateinamen
   (27.08.2026). */
/* Ankreuzfeld mit Beschriftung in einer Zeile. */
.kasten { display: flex; align-items: center; gap: 0.55rem; cursor: pointer; font-weight: 400; }
.kasten input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--loewe); }

/* Anmeldung ueber Entra. */
.an-trenner {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 1.1rem 0 0.9rem; color: var(--tinte-3); font-size: 0.8rem;
}
.an-trenner::before, .an-trenner::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--linie);
}
/* Zweiter Faktor in der Anmeldemaske. */
.an-2fa-text { font-size: 0.85rem; color: var(--tinte-3); margin: 0.4rem 0; }
.an-2fa-qr { display: block; margin: 0.6rem auto; width: 200px; height: 200px; image-rendering: pixelated; }
.an-2fa-geheimnis {
  display: block; margin-bottom: 0.9rem; padding: 0.4rem 0.6rem; font-size: 0.85rem;
  letter-spacing: 0.08em; word-break: break-all; background: var(--feld); border-radius: 6px;
}

/* Der Weg zurueck, direkt unter dem Workflow-Streifen. */
.zurueck {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem;
  margin: 0.75rem 0 0.2rem; padding: 0.6rem 0.8rem;
  border: 1px solid var(--linie-sanft); border-radius: 8px; background: var(--feld);
}
.zurueck-text { flex: 1 1 16rem; font-size: 0.85rem; color: var(--tinte-2); }

/* Die Dateien, die beim Anlegen mitgegeben werden. */
.dateiliste { margin-top: 0.55rem; display: flex; flex-direction: column; gap: 0.35rem; }
.dateizeile {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.4rem 0.65rem; border: 1px solid var(--linie-sanft); border-radius: 8px;
  background: var(--feld);
}
.dateizeile .anhang-name { flex: 1 1 auto; min-width: 0; }
.dateigroesse { flex: 0 0 auto; font-size: 0.8rem; color: var(--tinte-3); font-variant-numeric: tabular-nums; }

.anhang-innen {
  padding: 0.75rem 0.7rem 0.7rem;
  margin: 0 0.7rem; border-top: 1px solid var(--linie-sanft);
}
.anhang-knoepfe { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.anhang-knoepfe + * { margin-top: 0.7rem; }
/* Die Kopfzeile bekommt unten etwas Luft, damit die Linie nicht am Text sitzt. */
.anhang-block[open] > summary { padding-bottom: 0.65rem; }
.beleg {
  margin: 0.4rem 0 0.2rem; padding: 0.6rem 0.75rem; border-radius: 8px;
  background: var(--feld); border: 1px solid var(--linie-sanft);
}
.beleg-kopf {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  font-size: 0.72rem; color: var(--tinte-3); margin-bottom: 0.4rem;
}
.beleg-zeit { margin-left: auto; }
.beleg-paar { font-size: 0.85rem; }
.beleg-paar dd { font-variant-numeric: tabular-nums; }
/* Was am Ende an uns haengenbleibt, soll man sofort sehen. */
/* Der Wortlaut einer Nachricht: Zeilenumbrueche wie im Original, aber umbrechend statt
   waagerecht scrollend - eine Mail liest man nicht seitwaerts. */
.mailtext {
  white-space: pre-wrap; word-break: break-word; font-family: inherit;
  font-size: 0.88rem; line-height: 1.55; color: var(--tinte);
  background: var(--feld); border: 1px solid var(--linie-sanft); border-radius: 8px;
  padding: 0.8rem 0.9rem; max-height: 32rem; overflow-y: auto; margin: 0;
}
.betrag-offen { font-weight: 700; color: var(--signal); }
.betrag-gut { font-weight: 700; color: var(--loewe-dunkel); }
.beleg-einordnen {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.4rem;
}
.beleg-frage { font-size: 0.8rem; font-weight: 600; color: var(--tinte-2); margin-right: 0.2rem; }
.beleg-art { font-size: 0.8rem; color: var(--tinte-2); margin-right: 0.2rem; }
.beleg-warnung {
  margin-top: 0.45rem; font-size: 0.8rem; font-weight: 600; color: var(--signal);
}

/* ---------- Weiche: meldepflichtig oder nicht ---------- */
.weiche { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
/* Schmales Fenster: die Karten untereinander statt gequetscht nebeneinander. */
@media (max-width: 700px) { .weiche { grid-template-columns: 1fr; } }
.weiche-karte {
  display: flex; flex-direction: column; gap: 0.4rem; text-align: left; cursor: pointer;
  border: 1px solid var(--linie); border-radius: 10px; padding: 1.1rem 1.2rem;
  background: var(--etikett); font-family: inherit; color: var(--tinte);
  transition: border-color var(--schnell), background var(--schnell);
}
.weiche-karte:hover { border-color: var(--loewe); background: var(--loewe-hell); }
.weiche-titel { font-size: 1rem; font-weight: 700; }
.weiche-text { font-size: 0.85rem; color: var(--tinte-2); line-height: 1.5; }

/* ---------- Dialoge ---------- */
dialog {
  border: 0; border-radius: 12px; padding: 0; background: var(--etikett); color: var(--tinte);
  box-shadow: var(--schatten); width: min(900px, 92vw); max-height: 90vh;
  /* Der Stern-Reset oben setzt margin:0 und nimmt dem Dialog damit die Zentrierung des Browsers. */
  margin: auto;
}
dialog::backdrop { background: rgba(29,29,27,0.42); backdrop-filter: blur(2px); }
.dialog-kopf {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1rem 1.4rem; border-bottom: 1px solid var(--linie); position: sticky; top: 0;
  background: var(--etikett); border-radius: 12px 12px 0 0;
}
.dialog-kopf h3 { font-size: 1.05rem; font-weight: 700; }
.dialog-inhalt { padding: 1.3rem 1.4rem; overflow-y: auto; max-height: calc(90vh - 130px); }
/* Die Vorgangsansicht traegt zwei Spalten samt Verlauf und Meldungen - sie bekommt mehr Platz. */
#dlg-detail { width: min(1320px, 96vw); max-height: 94vh; }
#dlg-detail .dialog-inhalt { max-height: calc(94vh - 130px); }
.dialog-fuss {
  display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.9rem 1.4rem;
  border-top: 1px solid var(--linie); position: sticky; bottom: 0; background: var(--etikett);
  border-radius: 0 0 12px 12px;
}
.schliessen {
  border: 0; background: none; font-size: 1.4rem; line-height: 1; color: var(--tinte-3);
  cursor: pointer; padding: 0 0.2rem;
}
.schliessen:hover { color: var(--tinte); }

/* ---------- Vorgangsansicht ---------- */
.detail { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); gap: 1.1rem; }
.block + .block { margin-top: 1.1rem; }
.block h4 {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--tinte-3); margin-bottom: 0.7rem;
}
/* Erklaerender Text in Karten (Profil): kleiner und grau, damit er sich von Eingaben abhebt,
   und mit Luft zum naechsten Feld. */
.profil-hinweis { font-size: 0.8rem; line-height: 1.45; color: var(--tinte-3); margin: 0 0 0.9rem; }
.feldgruppe + .profil-hinweis { margin: -0.3rem 0 0; }
.paar { display: grid; grid-template-columns: 130px 1fr; gap: 0.35rem 0.9rem; font-size: 0.9rem; }
.paar dt { color: var(--tinte-3); font-size: 0.8rem; padding-top: 0.1rem; }
.paar dd { color: var(--tinte); }
/* Ein einzelnes langes Wort aus fremder Hand - eine 90-Zeichen-Absenderadresse, ein Pfad -
   bricht sonst nicht um und schiebt den Dialoginhalt auseinander. .mailtext machte es schon
   richtig; die drei hier nicht (28.08.2026). */
.hergang, .verlauf-text, .ki-p, .ki-liste li { overflow-wrap: anywhere; }

.hergang { white-space: pre-wrap; line-height: 1.55; font-size: 0.92rem; }

/* Hier stand bis zum 28.08.2026 die alte Schrittleiste (.schritte/.schritt/.schritt-zeit).
   Sie wird von nichts mehr erzeugt: ihr einziger Erzeuger war schritteFuer(), das seinerseits
   tot ist. Der Kommentar weiter unten behauptete noch, sie werde "an anderer Stelle noch
   gebraucht" - das stimmte nicht und haette den naechsten Leser vom Aufraeumen abgehalten. */

.verlauf-eintrag { padding: 0.6rem 0; border-bottom: 1px solid var(--linie-sanft); font-size: 0.88rem; }
.verlauf-eintrag:last-child { border-bottom: 0; }
.verlauf-kopf { display: flex; gap: 0.5rem; align-items: center; font-size: 0.72rem; color: var(--tinte-3); margin-bottom: 0.15rem; }
.verlauf-text { white-space: pre-wrap; line-height: 1.5; }

.anhang { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0; border-bottom: 1px solid var(--linie-sanft); font-size: 0.86rem; }
.anhang:last-child { border-bottom: 0; }
.anhang a { color: var(--loewe-dunkel); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anhang a:hover { text-decoration: underline; }
.anhang .weg { margin-left: auto; }

pre.vorschau {
  background: var(--feld); border: 1px solid var(--linie); border-radius: 8px;
  padding: 0.9rem 1rem; white-space: pre-wrap; font-family: inherit; font-size: 0.88rem;
  line-height: 1.55; max-height: 45vh; overflow-y: auto;
}

/* ---------- Hinweis ---------- */
.hinweis {
  border-left: 3px solid var(--warn); background: var(--warn-hell);
  padding: 0.7rem 1rem; border-radius: 0 8px 8px 0; font-size: 0.86rem; margin-bottom: 1rem;
}

/* ---------- Toast ---------- */
/* Der Hinweis liegt als Popover in der TOP-LAYER. Mit z-index allein stand er hinter jedem
   geoeffneten Dialog - modale <dialog> liegen ueber allem, was z-index kann (Fund 26.08.2026).
   Die Regeln danach setzen die Vorgaben des Browsers fuer [popover] zurueck (inset/margin/border). */
#toast {
  position: fixed; inset: auto; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  margin: 0; border: 0; width: fit-content; max-width: min(560px, 80vw); overflow: visible;
  background: var(--tinte); color: #fff; padding: 0.75rem 1.25rem; border-radius: 8px;
  font-size: 0.92rem; font-weight: 600; box-shadow: 0 8px 28px rgba(29,29,27,0.35);
  text-align: center; line-height: 1.45;
}
#toast:popover-open { display: block; }
#toast.fehler { background: var(--signal-dunkel); }

:focus-visible { outline: 2px solid var(--loewe); outline-offset: 2px; }

/* ---------- Die Schrittfolge im Vorgang (28.08.2026) ----------
   Fabian: "es muss wirklich step fuer step sein."

   Jeder Schritt ein aufklappbarer Abschnitt, der traegt, was zu ihm gehoert. Der aktuelle
   steht offen, die erledigten sind zu. Die alte Zierleiste ist ersatzlos entfallen. */
.sschritte { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 1.1rem; }

.sschritt {
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--etikett); overflow: hidden;
}
/* Der senkrechte Balken links traegt den Zustand. Farbe allein genuegt nicht: der Haken,
   der Punkt und der leere Kreis im Kopf sagen dasselbe noch einmal. */
.sschritt.erledigt { border-left: 4px solid var(--loewe); }
.sschritt.offen    { border-left: 4px solid var(--linie); background: var(--feld); }
.sschritt.jetzt    { border-left: 4px solid var(--loewe); box-shadow: var(--schatten); }
.sschritt.jetzt.haengt { border-left-color: var(--signal); }

.sschritt-kopf {
  display: flex; align-items: center; gap: 0.6rem; cursor: pointer;
  padding: 0.7rem 0.9rem; list-style: none; user-select: none;
  font-size: 0.92rem; color: var(--tinte);
}
.sschritt-kopf::-webkit-details-marker { display: none; }
.sschritt-kopf:hover { background: var(--feld); }
.sschritt.jetzt > .sschritt-kopf { font-weight: 700; }
.sschritt.offen > .sschritt-kopf { color: var(--tinte-3); }

.sschritt-marke { font-size: 0.95rem; line-height: 1; width: 1rem; text-align: center; }
.sschritt.erledigt .sschritt-marke { color: var(--loewe); }
.sschritt.jetzt .sschritt-marke { color: var(--loewe); }
.sschritt.jetzt.haengt .sschritt-marke { color: var(--signal); }
.sschritt.offen .sschritt-marke { color: var(--tinte-3); }

.sschritt-nr { color: var(--tinte-3); font-size: 0.8rem; font-weight: 400; }
/* min-width:0 allein genuegt nicht: der Titel schrumpft damit zwar auf null Breite, sein
   Text laeuft aber weiter und ueberlagert den rechten Text, bis .sschritt ihn abschneidet.
   Erst overflow+ellipsis kuerzt ihn sichtbar (28.08.2026). */
.sschritt-titel {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Rechts steht, WANN es passiert ist bzw. worauf gewartet wird. Nicht umbrechen -
   sonst springt der Kopf je nach Laenge des Titels in zwei Zeilen. */
.sschritt-rechts {
  font-size: 0.78rem; font-weight: 400; color: var(--tinte-3);
  white-space: nowrap;
  /* Nicht mehr "0 0 auto": dort steht freier Anwendertext - ein langer Personenname oder eine
     sechzigstellige Schadennummer draengte den Schritt-Titel sonst vollstaendig heraus. */
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; max-width: 45%;
}
.sschritt.jetzt.haengt .sschritt-rechts { color: var(--signal-dunkel); font-weight: 700; }

.sschritt-innen { padding: 0 0.9rem 0.95rem; border-top: 1px solid var(--linie-sanft); }
.sschritt-innen > *:first-child { margin-top: 0.85rem; }

/* Was jetzt zu tun ist. Steht ueber den Feldern, nicht darunter. */
.sschritt-hinweis {
  font-size: 0.85rem; line-height: 1.5; padding: 0.55rem 0.7rem; border-radius: 8px;
  background: var(--loewe-hell); color: var(--loewe-dunkel); margin-bottom: 0.85rem;
}
.sschritt-hinweis.haengt { background: var(--signal-hell); color: var(--signal-dunkel); }

/* Zwischenueberschrift innerhalb eines Schritts (etwa "Hergang"). */
.unter {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--tinte-3); margin: 0.9rem 0 0.4rem;
}

/* ---------- Eine Mail im Vorgang ----------
   Zugeklappt: Richtung, Zeit, Betreff. Aufgeklappt der Wortlaut - IMMER als Text gesetzt,
   nie als HTML. */
.mailblock { border: 1px solid var(--linie-sanft); border-radius: 8px; margin-bottom: 0.4rem; }
.mailblock-kopf {
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
  padding: 0.5rem 0.65rem; list-style: none; font-size: 0.85rem;
}
.mailblock-kopf::-webkit-details-marker { display: none; }
.mailblock-kopf:hover { background: var(--feld); }
.mailblock-pfeil { color: var(--tinte-3); font-weight: 700; flex: 0 0 auto; }
.mailblock-zeit { color: var(--tinte-3); font-size: 0.78rem; flex: 0 0 auto; }
/* Der Betreff bekommt den Rest und wird abgeschnitten. Ohne min-width:0 sprengt ein langer
   Betreff den Flex-Kasten, statt sich kuerzen zu lassen. */
.mailblock-betreff {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mailblock-innen { padding: 0 0.65rem 0.7rem; }
.mailblock-innen .mailtext { margin-top: 0.5rem; max-height: 24rem; }

/* ---------- Die Zusammenfassung ---------- */
.ki-kasten {
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--etikett); margin-bottom: 1.1rem;
}
.ki-kopf {
  display: flex; align-items: center; gap: 0.6rem; cursor: pointer;
  padding: 0.65rem 0.9rem; list-style: none;
}
.ki-kopf::-webkit-details-marker { display: none; }
.ki-kopf:hover { background: var(--feld); }
.ki-titel {
  flex: 1 1 auto; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--tinte-3);
}
.ki-stand { font-size: 0.78rem; color: var(--tinte-3); white-space: nowrap; }
.ki-innen { padding: 0.8rem 0.9rem 0.9rem; border-top: 1px solid var(--linie-sanft); }
.ki-text { margin-top: 0; }
.ki-h {
  font-size: 0.8rem; font-weight: 700; color: var(--tinte); margin: 0.9rem 0 0.3rem;
}
.ki-text > .ki-h:first-child { margin-top: 0; }
.ki-p { font-size: 0.89rem; line-height: 1.6; color: var(--tinte-2); margin-bottom: 0.35rem; }
.ki-liste { margin: 0.2rem 0 0.5rem 1.1rem; padding: 0; }
.ki-liste li { font-size: 0.89rem; line-height: 1.55; color: var(--tinte-2); margin-bottom: 0.2rem; }

/* ---------- Mail zuordnen, aus dem Vorgang heraus ---------- */
.zuordnen {
  margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px dashed var(--linie);
}

/* Nebensaechliches: Hinweise, die nicht mit dem Inhalt konkurrieren sollen. */
.schwach { color: var(--tinte-3); }

/* Der Verlauf ist jetzt zugeklappt - er ist Nachschlagewerk, nicht Aufmacher. */
.verlauf-summary {
  cursor: pointer; list-style: none;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--tinte-3);
}
.verlauf-summary::-webkit-details-marker { display: none; }
.verlauf-kasten[open] > .verlauf-summary { margin-bottom: 0.7rem; }


/* Nur fuer Vorleseprogramme: das Zeichen im Schrittkopf (✓/●/○) traegt aria-hidden, daneben
   steht das Wort. Sichtbar ist es nicht - aber es wird gelesen. */
.nur-vorleser {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Ein Feld, dessen Inhalt einen Neuaufbau des Dialogs ueberlebt hat und noch nicht
   gespeichert ist. Es soll auffallen, ohne wie ein Fehler auszusehen. */
.ungespeichert {
  border-color: var(--warn) !important;
  background: var(--warn-hell) !important;
}

/* Ein Feld, in das jemand anderes zwischenzeitlich gespeichert hat. Die eigene, noch nicht
   gespeicherte Eingabe wurde dort NICHT wiederhergestellt - es gilt der Stand vom Server.
   Das muss auffallen, sonst tippt man dieselbe Zahl noch einmal, ohne zu wissen warum. */
.fremd-geaendert {
  border-color: var(--signal) !important;
  background: var(--signal-hell) !important;
}

/* Ein Feld, das dieser Anwender nicht speichern darf. Lesbar und kopierbar, aber sichtbar
   nicht zum Ausfüllen gedacht - vorher waren die Felder beschreibbar und der Speichern-Knopf
   fehlte, was in eine Sackgasse führte (28.08.2026). */
.nur-lesen {
  background: var(--beton);
  color: var(--tinte-2);
  cursor: default;
}


/* ---------- Benutzerverwaltung: die Aktionsspalte ----------
   Drei feste Spalten - Rolle, Zugang, Kennwort -, damit die Schaltflaechen ueber alle Zeilen
   hinweg untereinander stehen. Vorher waren es rechtsbuendige Inline-Elemente unterschiedlicher
   Breite; in der eigenen Zeile fehlen zwei davon, und der Kennwort-Knopf sass dann allein links
   von seiner Spalte (28.08.2026). */
.benutzer-aktionen {
  display: grid;
  /* Rolle, Zugang, Signatur, Kennwort, zweiter Faktor - feste Spalten, damit die Knoepfe ueber
     alle Zeilen untereinander stehen (Signatur kam am 31.08.2026 dazu, 2FA am 24.09.2026). */
  grid-template-columns: 8.5rem 7rem 6.5rem 9.5rem 8.5rem;
  gap: 0.4rem;
  justify-content: end;
  align-items: center;
}

/* Jede Schaltflaeche fuellt ihre Spalte - gleiche Breite, gleiche Kante. */
.benutzer-aktionen > .btn,
.benutzer-aktionen > .rollen-wahl {
  width: 100%;
  height: 2rem;
  margin: 0;
  text-align: center;
}

/* Das Auswahlfeld bekommt dasselbe Mass wie ein kleiner Knopf - vorher stand es einen Hauch
   hoeher und mit anderem Rahmen daneben. */
.rollen-wahl {
  font-size: 0.8rem;
  padding: 0 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--linie);
  background: var(--feld);
  color: var(--tinte);
  font-family: inherit;
  cursor: pointer;
}
.rollen-wahl:hover { border-color: var(--linie-stark); }

/* Leerer Platz in der eigenen Zeile. Haelt die Spalte, zeigt nichts. */
.benutzer-aktionen > .platzhalter { display: block; }