/* BALM-Fallverwaltung — Anwendungsstile auf Basis des SVG-Designsystems (svg-design.css) und des Claude-Design-Entwurfs. */
@font-face { font-family: "News Cycle"; src: url("fonts/NewsCycle-Regular.44558bf38e51.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "News Cycle"; src: url("fonts/NewsCycle-Bold.9d4de6d7842e.ttf") format("truetype"); font-weight: 700; font-display: swap; }
:root {
  --gelb: #FFD700; --gelb-hover: #EBC600; --dunkel: #484848; --text: #212529; --muted: #5C636A;
  --bg: #F2F2F2; --border: #EEEEEE; --input-border: #707070;
  --ok-fg: #085229; --ok-bg: #E7FAF0; --err-fg: #661D1D; --err-bg: #FFEDED;
  --klaer-fg: #8A3A00; --klaer-bg: #FEF0E7; --info-fg: #1F4E86; --info-bg: #E8F1FC; --hell-gelb: #FFF3B0;
}
html, body { margin: 0; padding: 0; background: var(--bg); }
body { font-family: "News Cycle", Arial, sans-serif; color: var(--dunkel); font-size: 16px; line-height: 1.4; }
* { box-sizing: border-box; }
a { color: var(--dunkel); text-decoration: underline; } a:hover { color: var(--text); }
button, input, select, textarea { font-family: inherit; font-size: 16px; }
:focus-visible { outline: 3px solid var(--dunkel); outline-offset: 2px; }
.dunkel :focus-visible, .kontext :focus-visible, .thead-dark :focus-visible { outline-color: var(--gelb); }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--gelb); color: var(--dunkel); padding: 8px 16px; font-weight: 700; z-index: 3000; }
.skip:focus { left: 8px; }
.sr-only { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Header */
.kopf { background: #fff; border-bottom: 3px solid var(--gelb); height: 64px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; position: sticky; top: 0; z-index: 1000; }
.kopf .marke { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 0; text-decoration: none; }
.kopf .marke img { width: 40px; height: 40px; flex-shrink: 0; }
.kopf .marke .titel { font-size: 18px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.kopf .marke .sub { font-size: 14px; color: var(--muted); line-height: 1.2; white-space: nowrap; }
.hauptnav { display: flex; gap: 2px; align-self: stretch; flex-shrink: 0; }
.hauptnav a { display: flex; align-items: center; height: 100%; padding: 0 16px; border-bottom: 4px solid transparent; text-decoration: none; font-size: 16px; color: var(--dunkel); white-space: nowrap; }
.hauptnav a:hover { background: #F9F9F9; }
.hauptnav a[aria-current="page"] { border-bottom-color: var(--gelb); font-weight: 700; }
.hauptnav a:focus-visible { outline-offset: -3px; }
.kopf .benutzer { display: flex; align-items: center; gap: 10px; flex: 1 1 0; justify-content: flex-end; min-width: 0; text-align: right; line-height: 1.2; white-space: nowrap; }
.kopf .benutzer .n { font-size: 16px; font-weight: 700; } .kopf .benutzer .r { font-size: 14px; color: var(--muted); }
.umgebung { background: var(--dunkel); color: #fff; padding: 6px 32px; font-size: 14px; display: flex; gap: 16px; align-items: center; }
.umgebung .badge { background: var(--gelb); color: var(--dunkel); font-weight: 700; padding: 2px 10px; border-radius: 48px; }
/* Unten Platz bis über den Meldeknopf (DEV-Prüfung 07.11.2026: bei 628px verdeckte er den letzten Link).
   Knopf: 76px über dem Rand + rund 42px hoch; ab 720px Breite 120px über dem Rand. */
main { max-width: 1382px; margin: 0 auto; padding: 24px 32px 140px; }
@media (max-width: 1100px) { .kopf, .umgebung { padding-left: 16px; padding-right: 16px; } .hauptnav a { padding: 0 10px; } main { padding: 16px 16px 140px; } .kopf .marke .sub { display: none; } }
@media (max-width: 720px) { main { padding-bottom: 184px; } }
/* R5.2 (Browserprobe 390 px): Kopfzeile lief auf jeder Seite 72 px seitlich über. Auf schmalem
   Bildschirm bricht sie um; die Hauptbereiche stehen in einer eigenen Zeile, die in sich scrollt,
   statt die ganze Seite zu verbreitern. */
@media (max-width: 720px) {
  .kopf { height: auto; flex-wrap: wrap; padding-top: 8px; gap: 8px 12px; }
  .kopf .marke .titel { font-size: 16px; }
  .hauptnav { order: 3; flex: 1 0 100%; overflow-x: auto; height: 44px; }
  .hauptnav a { padding: 0 10px; }
  .kopf .benutzer > span:first-child { display: none; } /* Name steht im Profil; sonst über dem Titel */
}

h1 { font-size: 32px; font-weight: 700; line-height: 1.15; margin: 0 0 8px; }
h2 { font-size: 22px; font-weight: 700; margin: 0 0 12px; }
h3 { font-size: 18px; font-weight: 700; margin: 0 0 6px; }
p { color: var(--text); margin: 0 0 12px; }
.muted { color: var(--muted); font-size: 14px; }
.label { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-bottom: 4px; }
.kopfzeile { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.aktionen { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.breadcrumb { font-size: 15px; margin-bottom: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.breadcrumb strong { font-weight: 700; }

/* Buttons */
.btn, .btn-outline, .btn-danger, .btn-blocked, .btn-klein { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; border-radius: 48px; cursor: pointer; text-decoration: none; line-height: 1.2; }
.btn { font-size: 16px; padding: 10px 22px; border: none; background: var(--gelb); color: var(--dunkel); }
.btn:hover { background: var(--gelb-hover); }
.btn-outline { font-size: 16px; padding: 8px 20px; border: 2px solid var(--dunkel); background: transparent; color: var(--dunkel); }
.btn-outline:hover { background: var(--dunkel); color: #fff; }
.btn-klein { font-size: 14px; padding: 5px 14px; border: 2px solid var(--dunkel); background: #fff; color: var(--dunkel); }
.btn-klein:hover { background: var(--dunkel); color: #fff; }
.btn-danger { font-size: 16px; padding: 10px 22px; border: none; background: var(--err-fg); color: #fff; }
.btn-blocked, .btn[disabled], .btn-outline[disabled], .btn-danger[disabled] { font-size: 16px; padding: 8px 20px; border: 2px solid var(--input-border); background: var(--border); color: var(--dunkel); cursor: not-allowed; }
.link-btn { background: none; border: none; padding: 0; font-size: 15px; color: var(--dunkel); text-decoration: underline; cursor: pointer; }

/* Chips */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.chip { font-size: 15px; font-weight: 700; padding: 6px 16px; border-radius: 48px; border: 2px solid var(--dunkel); background: #fff; color: var(--dunkel); text-decoration: none; }
.chip[aria-pressed="true"], .chip.aktiv { background: var(--gelb); }

/* Cards */
.card { background: #fff; border: 1.5px solid var(--border); padding: 20px 24px; margin-bottom: 16px; }
.card-accent { border-top: 6px solid var(--gelb); }
.card-head-dark { background: var(--dunkel); color: #fff; padding: 12px 24px; border-bottom: 4px solid var(--gelb); margin: -20px -24px 16px; }
.card-leer { border: 1.5px dashed var(--input-border); padding: 32px; text-align: center; background: #fff; margin-bottom: 16px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 16px; }
dl.fakten { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
dl.fakten dt { font-weight: 700; } dl.fakten dd { margin: 0; color: var(--text); }

/* Tabellen */
.table-wrap { background: #fff; border: 1.5px solid var(--border); overflow-x: auto; margin-bottom: 16px; }
.table { width: 100%; border-collapse: collapse; min-width: 720px; }
.table th { text-align: left; background: var(--dunkel); color: #fff; padding: 12px 16px; font-weight: 700; }
.table th a { color: #fff; text-decoration: none; display: block; } .table th .sort { color: var(--gelb); }
.table tr { border-bottom: 1px solid var(--border); } .table tbody tr:hover { background: #F9F9F9; }
.table td { padding: 12px 16px; vertical-align: top; }

/* Formulare */
.field { margin-bottom: 14px; }
.field label, .field .lbl { display: block; font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.field input[type=text], .field input[type=search], .field input[type=email], .field input[type=password], .field input[type=date], .field input[type=number], .field select, .field input[type=file] { width: 100%; color: var(--text); background: #fff; border: 1px solid var(--input-border); border-radius: 50px; padding: 10px 18px; }
.field textarea { width: 100%; border: 1px solid var(--input-border); border-radius: 16px; padding: 10px 16px; resize: vertical; }
.field .hilfe { font-size: 14px; color: var(--muted); margin-top: 4px; }
/* Im Raster nebeneinander: Infotexte sind verschieden lang. Das Eingabefeld rutscht ans untere Ende der Zelle,
   damit die Felder einer Reihe auf einer Linie stehen (Chris, 04.10.2026). */
.grid > .field { display: flex; flex-direction: column; }
.grid > .field > .hilfe { margin-bottom: 6px; }
.grid > .field > input, .grid > .field > select, .grid > .field > textarea { margin-top: auto; }
.grid > .field > input[type=checkbox] { align-self: flex-start; }
.field .fehler, .errorlist { color: var(--err-fg); font-size: 15px; margin: 4px 0 0; padding-left: 0; list-style: none; font-weight: 700; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border: 2px solid var(--err-fg); }
fieldset { border: 1.5px solid var(--border); padding: 12px 16px; margin: 0 0 14px; min-width: 0; } legend { font-weight: 700; padding: 0 6px; }
.radio-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; }
.radio-kacheln label { display: flex; justify-content: space-between; gap: 12px; padding: 8px 14px; border: 2px solid var(--border); background: #fff; cursor: pointer; font-weight: 700; align-items: center; }
.radio-kacheln label:has(input:checked) { border-color: var(--dunkel); background: var(--hell-gelb); }
.radio-kacheln input { width: 18px; height: 18px; }
.radio-kacheln .hinweis { font-size: 14px; color: var(--muted); font-weight: 400; }
.suche { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 8px; } .suche .field { flex: 1 1 320px; margin: 0; }

/* Pills und Meldungen */
.pill { display: inline-flex; align-items: center; gap: 7px; border-radius: 48px; font-weight: 700; white-space: nowrap; line-height: 1.4; vertical-align: middle; }
.pill [aria-hidden] { font-size: 0.8em; line-height: 1; }
.pill + .pill { margin-left: 8px; }
.kontext .w .pill { margin-top: 1px; }
.kontext .z .pill { margin-top: 6px; }
.table td .pill, .fakten dd .pill { margin: 2px 0; }
.kopf-z .pill { margin-left: 10px; }
.alert { padding: 12px 16px; color: var(--text); margin-bottom: 16px; }
.alert strong { display: block; margin-bottom: 4px; }
.alert-klaerung { background: var(--klaer-bg); border-left: 4px solid var(--klaer-fg); } .alert-klaerung strong { color: var(--klaer-fg); }
.alert-fehler { background: var(--err-bg); border-left: 4px solid var(--err-fg); } .alert-fehler strong { color: var(--err-fg); }
.alert-erfolg { background: var(--ok-bg); color: var(--ok-fg); border-left: 4px solid var(--ok-fg); }
.alert-info { background: var(--info-bg); color: var(--info-fg); border-left: 4px solid var(--info-fg); }
.alert-sperre { background: var(--border); border-left: 4px solid var(--dunkel); }
.alert ul { margin: 6px 0 0; padding-left: 20px; }
.meldungen { margin-bottom: 16px; }
/* Fehler einer einzelnen Eingangszeile stehen in der Karte, nicht am Seitenanfang. */
.eingang-karte .alert-fehler p { margin: 0; } .eingang-karte .alert-fehler p + p { margin-top: 4px; }
.spinner { display: inline-block; width: 22px; height: 22px; border: 3px solid var(--border); border-top-color: var(--dunkel); border-radius: 50%; animation: balm-spin 0.9s linear infinite; vertical-align: middle; }
@keyframes balm-spin { to { transform: rotate(360deg); } }

/* Kontextleiste Fall */
.kontext { background: var(--dunkel); color: #fff; padding: 14px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 24px; margin-bottom: 20px; border-bottom: 4px solid var(--gelb); }
.kontext .l { font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gelb); font-weight: 700; }
.kontext .w { font-size: 18px; font-weight: 700; } .kontext .z { font-size: 14px; color: var(--border); }
.kontext a { color: #fff; }
.tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--border); margin-bottom: 20px; flex-wrap: wrap; }
.tabs a { padding: 10px 18px; text-decoration: none; border-bottom: 4px solid transparent; margin-bottom: -2px; font-weight: 700; color: var(--dunkel); }
.tabs a[aria-current="page"] { border-bottom-color: var(--gelb); }

/* Aufgaben */
.aufgaben { background: #fff; border: 1.5px solid var(--border); padding: 8px 24px; margin-bottom: 16px; }
.aufgabe { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.aufgabe:last-child { border-bottom: none; }
.kasten { width: 26px; height: 26px; border: 2px solid var(--input-border); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 15px; background: #fff; }
.kasten.erledigt { background: var(--ok-fg); } .kasten.klaerung { background: var(--klaer-fg); }
button.kasten { padding: 0; cursor: pointer; } button.kasten:hover, button.kasten:focus-visible { border-color: var(--text, #333); }
.aufgabe .t { font-weight: 700; } .aufgabe.erledigt .t { color: var(--muted); text-decoration: line-through; }
.aufgabe .m { font-size: 14px; color: var(--muted); }
.aufgabe .abhaken { margin-top: 6px; } .aufgabe .abhaken summary { cursor: pointer; font-size: 14px; font-weight: 700; }
.aufgabe .abhaken form { margin-top: 8px; align-items: center; } .aufgabe .abhaken input[type=text] { flex: 1 1 260px; }

/* Zwei-Spalten-Prüfansicht */
.pruef { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
@media (max-width: 1100px) { .pruef { grid-template-columns: 1fr; } }
.pdf-pane { background: var(--bg); padding: 16px; min-height: 420px; display: flex; flex-direction: column; gap: 12px; }
.pdf-pane img { width: 100%; background: #fff; border: 1px solid var(--border); }
.feld { border-bottom: 1px solid var(--border); padding: 10px 0; }
.feld .kopf-z { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.feld .quelle { font-size: 14px; color: var(--muted); }
.konflikt { background: var(--klaer-bg); padding: 10px 14px; margin-top: 8px; }
.konflikt strong { color: var(--klaer-fg); }
.abgleich-ok { background: var(--ok-bg); padding: 10px 14px; margin-top: 8px; }
.abgleich-ok strong { color: var(--ok-fg); }
.vergleich { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; border: 1.5px solid var(--border); }
.vergleich > div { padding: 8px 12px; border-bottom: 1px solid var(--border); } .vergleich .k { background: var(--dunkel); color: #fff; font-size: 14px; font-weight: 700; }

/* Dialog */
dialog { border: none; border-top: 6px solid var(--gelb); padding: 28px 32px; max-width: 600px; width: calc(100% - 32px); background: #fff; color: var(--dunkel); }
dialog::backdrop { background: rgba(72,72,72,0.6); }
dialog.gefahr { border-top-color: var(--err-fg); } dialog.klaerung { border-top-color: var(--klaer-fg); }
dialog h2 { font-size: 22px; }
.fuss { background: var(--gelb); padding: 14px 32px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--dunkel); position: fixed; bottom: 0; left: 0; right: 0; }
.fuss strong { font-weight: 700; }
.zahl { font-variant-numeric: tabular-nums; }
.jahr-badge { background: var(--gelb); padding: 0 12px; font-weight: 700; display: inline-block; }
.hinweise { margin: 6px 0 0; padding-left: 18px; font-size: 15px; } .hinweise.warn li { color: var(--klaer-fg); } .hinweise.ok li { color: var(--ok-fg); }
.tn-tabelle td input { width: 100%; border: 1px solid var(--input-border); border-radius: 8px; padding: 4px 8px; font-size: 15px; }
.anmelde { max-width: 440px; margin: 48px auto; }
.dropzone { border: 2px dashed var(--input-border); padding: 24px; background: #fff; text-align: center; }
/* R5.2: die ganze Fläche nimmt Dateien an; während des Ziehens sichtbar, danach die gewählten Dateien */
.dropzone[data-ablage] { cursor: copy; }
.dropzone.dropzone-aktiv { border-color: var(--ok-fg); background: #f3faf3; }
.dropzone input[type="file"] { max-width: 100%; }
.dateiliste { list-style: none; margin: 12px 0 0; padding: 0; text-align: left; overflow-wrap: anywhere; }
.dateiliste li { padding: 4px 0; border-top: 1px solid var(--border); }
.dateiliste .dateiliste-problem { color: var(--err-fg); }

/* Eingang: je Datei eine Karte mit Ampel, Begründung und einem Klick zur Aufnahme */
.eingang-karte { border-left: 6px solid var(--input-border); }
.eingang-karte.eingang-gruen { border-left-color: var(--ok-fg); }
.eingang-karte.eingang-gelb { border-left-color: var(--klaer-fg); }
.eingang-karte.eingang-rot { border-left-color: var(--err-fg); }
.eingang-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.eingang-kopf .dateiname { font-size: 17px; margin: 0 0 2px; overflow-wrap: anywhere; }
.eingang-kopf .muted { display: block; font-size: 14px; }
/* Kleine Belegvorschau in Dateilisten: ein Blick genügt, der Klick zeigt die ganze Seite */
.beleg-zeile { display: flex; gap: 12px; align-items: flex-start; }
.beleg-mini { flex: 0 0 64px; display: block; border: 1.5px solid var(--border); background: #fff; line-height: 0; }
.beleg-mini img { width: 64px; height: auto; display: block; }
.beleg-mini:hover { border-color: var(--dunkel); }

/* Beleg und Werte nebeneinander: der Vorschlag ist nur so gut wie die Sicht aufs Dokument */
.eingang-split { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; align-items: start; }
.eingang-beleg { position: sticky; top: 84px; }
.eingang-beleg img { width: 100%; border: 1.5px solid var(--border); background: #fff; display: block; }
.eingang-beleg .aktionen { margin-top: 8px; align-items: center; }
.eingang-werte { min-width: 0; }
@media (max-width: 900px) { .eingang-split { grid-template-columns: 1fr; } .eingang-beleg { position: static; max-width: 320px; } }
.eingang-vorschlag { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: 8px 20px; margin: 0 0 14px; }
.eingang-vorschlag dd { margin: 0; }
.eingang-form { margin-top: 16px; }
.eingang-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0 20px; }
.eingang-felder .field select { max-width: 460px; }
.eingang-form .feld-inline { margin: 12px 0 16px; }
.eingang-form .aktionen { gap: 12px; }
.feld-inline { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 15px; }
/* Nebenaktionen deutlich von der Hauptaktion trennen und leiser setzen */
.aktionen-leise { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.aktionen-leise form { margin: 0; }
.aktionen-leise .verwerfen { border-color: var(--err-fg); color: var(--err-fg); }
.aktionen-leise .verwerfen:hover { background: var(--err-fg); color: #fff; }
.neue-akte { display: flex; flex-direction: column; gap: 4px; }
.neue-akte .muted { margin: 0 0 2px; font-size: 14px; }
.neue-akte .feld-inline { margin: 0; font-size: 14px; }
.neue-akte .btn-klein { align-self: flex-start; margin-top: 6px; }
.eingang-erledigt summary { cursor: pointer; font-size: 17px; }
.eingang-erledigt .table-wrap { margin-top: 14px; }
@media (max-width: 720px) {
  .eingang-vorschlag { grid-template-columns: 1fr; gap: 0; }
  .eingang-vorschlag dt { margin-top: 12px; }
}
/* Befund A12: von Hand gewählte Zuordnung ist nicht dasselbe wie „von der App sicher erkannt". */
.eingang-karte.eingang-hand { border-left-color: var(--info-fg); }
/* Antragsstrecke: neun Stationen, kein Fortschrittsbalken (siehe balm/faelle/strecke.py). */
ol.strecke { list-style: none; margin: 0; padding: 0; }
.strecke-schritt { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid #E4E4E4; }
.strecke-schritt:first-child { border-top: 0; }
.strecke-nummer { flex: 0 0 28px; height: 28px; border-radius: 50%; background: #EFEFEF; color: #484848;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.strecke-erledigt .strecke-nummer { background: var(--ok-bg); color: var(--ok-fg); }
.strecke-laeuft .strecke-nummer { background: var(--hell-gelb); color: #484848; box-shadow: 0 0 0 2px #484848; }
.strecke-entfaellt { opacity: .6; }
.strecke-marke { margin-left: 8px; font-size: 14px; border-radius: 50px; padding: 2px 10px; }
.strecke-marke.ok { background: var(--ok-bg); color: var(--ok-fg); }
.strecke-marke.jetzt { background: var(--hell-gelb); color: #484848; font-weight: 700; }
.strecke-marke.offen, .strecke-marke.aus { background: #EFEFEF; color: #6B6B6B; }
/* K3: Ein Knopf, der ein leeres Archiv liefern würde, sagt lieber, dass nichts da ist. */
.btn-aus, .btn-aus:hover { background: #EFEFEF; color: #6B6B6B; border-color: #D5D5D5; cursor: not-allowed; }

/* ── Förderfall-Liste ─────────────────────────────────────────────────────────────────────────────
   Die Phase ist kein Status: Sie bewertet nicht, sie sagt, wo in der Strecke der Fall steht. Deshalb
   eine eigene Gestalt — weißer Grund, Ring, vorn die Nummer — und drei Stufen einer Farbe statt neun.
   Die Nummer steht immer dabei; die Farbe allein trägt nie die Aussage (K4/K5, 27.09.2026). */
.phase-pille { display: inline-flex; align-items: center; gap: 8px; max-width: 250px; padding: 3px 14px 3px 3px; border: 1px solid #DCDCDC; border-radius: 24px; background: #fff; font-size: 14px; line-height: 1.3; }
.phase-nr { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 700; font-size: 14px; background: #EEEEEE; color: #484848; flex-shrink: 0; }
.phase-stufe-mitte .phase-nr { background: var(--hell-gelb); }
.phase-stufe-spaet .phase-nr { background: var(--gelb); }
.phase-stufe-fertig { border-color: #BCE3CE; }
.phase-stufe-fertig .phase-nr { background: var(--ok-bg); color: var(--ok-fg); }

/* Mehrere Fälle einer Firma stehen als Gruppe untereinander: der Name einmal, die weiteren eingerückt
   an einer Linie. Zwei gleiche Namen untereinander sahen vorher wie ein Fehler aus. */
.tabelle-faelle .zelle-firma { min-width: 210px; }
.tabelle-faelle tr.fall-weiterer > td { border-top: 1px solid #F4F4F4; }
.tabelle-faelle .weiterer-fall { display: inline-block; position: relative; padding-left: 20px; }
.tabelle-faelle .weiterer-fall::before { content: ""; position: absolute; left: 2px; top: -6px; width: 10px; height: 14px; border-left: 1px solid #B9B9B9; border-bottom: 1px solid #B9B9B9; }
.marke-gruppe { display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 48px; background: var(--hell-gelb); color: #484848; font-size: 13px; font-weight: 700; white-space: nowrap; }
.tabelle-faelle .zusatz { margin-top: 4px; }
.tabelle-faelle .fall-art { white-space: nowrap; }
.tabelle-faelle .zelle-fall, .tabelle-faelle .zelle-termin { min-width: 160px; }

/* Der nächste Termin trägt immer seinen Namen: VWN-Frist, BWZ-Ende und Wiedervorlage sind sehr
   verschieden schwer. Überfällig und „bald" werden gefärbt, alles andere bleibt ruhig. */
.termin { display: inline-block; font-size: 15px; }
.termin .zahl { white-space: nowrap; }
.termin-name { display: block; font-size: 14px; font-weight: 400; color: var(--dunkel); }
.termin-ueberfaellig { color: var(--err-fg); font-weight: 700; }
/* Fachseite 13.11.2026: ein vergangener selbst gesetzter Termin ist nur „fällig“ – auffällig, aber nicht rot. */
.termin-faellig { color: var(--dunkel); font-weight: 700; }
.termin-bald { color: var(--klaer-fg); font-weight: 700; }
.termin-ohne { color: var(--klaer-fg); }
.sortierkopf { color: inherit; text-decoration: none; white-space: nowrap; }
.sortierkopf:hover { color: inherit; text-decoration: underline; }
.sortierkopf-hinweis { opacity: 0.45; font-weight: 400; }
.seitenweg { align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
/* Ein zweizeiliger Knopf sieht immer nach Versehen aus (Chris, 27.09.2026). */
.table .btn-klein { white-space: nowrap; }

/* Entwurf 3: Befunde einer Teilnehmerliste — was zu tun ist, steht vor dem, was in Ordnung ist. */
.befund { background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--klaer-fg); padding: 12px 16px; margin-bottom: 10px; }
.befund.befund-fehler { border-left-color: var(--err-fg); }
.befund p { margin: 6px 0 8px; }
.befund .aktionen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.feld-zeile { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.feld-zeile label { flex: 0 0 170px; font-weight: 700; font-size: 15px; }
.feld-zeile input, .feld-zeile select { flex: 1 1 320px; min-width: 0; max-width: 100%; border: 1px solid var(--input-border); border-radius: 8px; padding: 7px 10px; }

/* Meldeknopf („Problem melden“) — auf jeder Seite unten rechts, ohne JavaScript.
   Ein Verweis, kein Fenster: BALM enthält kein JavaScript, und ein überlagertes Fenster liesse
   sich ohne eines nicht schliessen, ohne die Seite darunter zu verlieren. */
.meldeknopf {
  position: fixed;
  right: 1.5rem;
  /* Über der Fusszeile, nicht in ihr: die ist fest unten verankert (.fuss, position: fixed) und rund
     48px hoch. Mit 1.5rem sass der Knopf mitten darin und verdeckte ihren Text — am 01.10.2026 von
     Chris im ersten Testlauf bemerkt. Bricht die Fusszeile auf schmalen Schirmen um, wird sie höher;
     dafür die Medienabfrage weiter unten. */
  bottom: 76px;
  z-index: 50;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  background: var(--gelb, #ffd700);
  color: #1a1a1a;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.meldeknopf:hover,
.meldeknopf:focus {
  filter: brightness(.94);
  text-decoration: none;
}
@media print {
  .meldeknopf { display: none; }
}
/* Schmale Schirme: die Fusszeile bricht um und wird höher. Im Browser nachgemessen (01.10.2026):
   1024px breit → 48px hoch, 375px breit → 95px hoch. Die Werte halten darüber je rund 28px Abstand. */
@media (max-width: 720px) {
  .meldeknopf { bottom: 120px; right: 1rem; }
}

/* R5.3: Weg durch die Ablage auf der Prüfseite */
.ablage-weg { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 12px 16px; }
.tn-tabelle tr:target { outline: 3px solid var(--gelb); outline-offset: -3px; }
.strecke-belege { margin: 4px 0 0; padding-left: 18px; font-size: 15px; overflow-wrap: anywhere; }
.feld-mit-leeren { white-space: nowrap; }
.feld-leeren { margin-left: 4px; border: 1px solid var(--input-border); background: #fff; border-radius: 50%; width: 28px; height: 28px; cursor: pointer; }

/* Aufgabenübergabe (Fachtest 02.11.2026, Punkt 1): deutlich, ohne Mail und ohne blockierendes Fenster. */
.alert-uebergabe { background: var(--hell-gelb); border-left: 6px solid var(--gelb-hover); color: var(--text); }
.alert-uebergabe strong { font-size: 1.15em; color: var(--text); }
.alert-uebergabe ul { margin: 8px 0 0; padding-left: 20px; }
.alert-uebergabe p { margin: 0; }
.uebergabe-marke { display: inline-block; background: var(--gelb); color: var(--dunkel); font-weight: 700; font-size: 0.85em; padding: 1px 10px; border-radius: 48px; margin-left: 6px; white-space: nowrap; }
tr.neu-uebergeben > td, .aufgabe.neu-uebergeben { background: var(--hell-gelb); }
.aufgabe.neu-uebergeben { border-left: 6px solid var(--gelb-hover); padding-left: 8px; }
.hauptnav .zaehler { display: inline-block; min-width: 1.5em; margin-left: 6px; padding: 0 6px; text-align: center; background: var(--gelb); color: var(--dunkel); border: 2px solid var(--dunkel); border-radius: 48px; font-size: 0.8em; font-weight: 700; line-height: 1.5; }

/* Usability-Paket 01 (07.11.2026) */
/* W7: Karten der Fallseite sind H2 (Fall-H1 → Karte), sehen aber aus wie bisher. */
h2.kartentitel { font-size: 18px; margin: 0 0 6px; }
/* A9: sichtbare Beschriftung neben einem Feld in einer Aktionszeile. */
.feld-inline { font-weight: 700; font-size: 15px; align-self: center; }
/* A15: je Konflikt eine Gruppe mit Frage; ohne Rahmen, damit der Kasten aussieht wie zuvor. */
.konflikt-wahl { border: 0; padding: 0; margin: 6px 0 0; min-width: 0; }
.konflikt-wahl legend { padding: 0; font-weight: 700; font-size: 15px; }
/* A11: Das Aufklapp-Element „Erledigt“ bleibt der skriptfreie Weg in der Tabfolge und wird sichtbar,
   sobald es den Tastaturfokus hat – wie „Zum Inhalt springen“. */
.aufgabe .abhaken > summary.sr-only:focus-visible { position: static; left: auto; width: auto; height: auto; overflow: visible; display: inline-block; }
/* W6: Ein fokussiertes Element liegt nie unter dem klebenden Kopf, der festen Fußzeile oder dem Meldeknopf.
   Im Browser gemessen (07.11.2026): Kopf 64px (≤720px: 103px); Meldeknopf-Oberkante 118px über dem Rand
   (≤720px: 162px), die Fußzeile ist niedriger. Je rund 8–12px Luft. Gilt auch für Sprunglinks (#einreichung). */
html { scroll-padding-top: 72px; scroll-padding-bottom: 128px; }
@media (max-width: 720px) { html { scroll-padding-top: 116px; scroll-padding-bottom: 172px; } }

/* Usability-Paket 03: eine Farbe je Fristenstufe, gleich in „Meine Arbeit“, Reiter Aufgaben und Aufgabenseite
   (vorher Inline-Farben nur in „Meine Arbeit“). */
.frist { font-size: 14px; color: var(--dunkel); }
.frist-ueberfaellig { color: var(--err-fg); }
.frist-faellig { color: var(--dunkel); font-weight: 700; }
.frist-fehlt, .frist-heute, .frist-klaerung { color: var(--klaer-fg); }

/* Usability-Paket 04: „Meine Arbeit“ nach Fall – je Fall eine aufklappbare Zeile, ohne Skript. */
.darstellung { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; }
.darstellung-titel { font-weight: 700; font-size: 15px; }
button.chip { cursor: pointer; font-family: inherit; line-height: inherit; }
.fallgruppen { display: flex; flex-direction: column; gap: 8px; }
.fallgruppe { background: #fff; border: 1.5px solid var(--border); }
.fallgruppe > summary { cursor: pointer; padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; }
.fallgruppe > summary::marker { content: ""; }
.fallgruppe > summary::before { content: "▸"; font-weight: 700; }
.fallgruppe[open] > summary::before { content: "▾"; }
.fallgruppe[open] > summary { border-bottom: 1.5px solid var(--border); }
.fallgruppe .fg-firma { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.fallgruppe .fg-frist, .fallgruppe .fg-zahl { white-space: nowrap; }
.fallgruppe .fg-marken { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.fallgruppe .table-wrap { border: none; margin: 0; }
.marke { display: inline-block; font-size: 0.85em; font-weight: 700; padding: 1px 10px; border-radius: 48px; white-space: nowrap; }
.marke-klaerung { color: var(--klaer-fg); background: var(--klaer-bg); }
.marke-ueberfaellig { color: var(--err-fg); background: var(--err-bg); }
.fallhinweis { margin: -4px 0 4px; padding: 6px 16px; background: var(--klaer-bg); color: var(--klaer-fg); font-size: 15px; }
.fallhinweis a { color: var(--klaer-fg); }
@media (max-width: 720px) { .fallgruppe .fg-frist { white-space: normal; } }
.fallgruppe > summary::-webkit-details-marker { display: none; }

/* Usability-Paket 05: Fallseite ordnen */
.einreichung > summary, .strecke-dateien > summary { cursor: pointer; }
.einreichung > summary h2 { display: inline; }
.strecke-dateien > summary { font-size: 15px; margin-top: 4px; }
.nh-herkunft { font-size: 14px; margin: 4px 0 8px; }
.nh-weiter { font-size: 15px; color: var(--klaer-fg); background: var(--klaer-bg); padding: 6px 10px; margin: 0 0 8px; }

/* Usability 10: Kundenseite – je offenem Fall eine Karte (A14), Rückfrage beim Eröffnen (A9). */
/* Hinweiskästen: Nur die ausdrückliche Überschrift (.alert-titel) steht als Block. Ein Kasten, der seine
   Überschrift so auszeichnet, setzt jedes weitere strong in den Satz zurück („ist inaktiv der richtige Zustand“
   stand vorher auf drei Zeilen). Die ältere Regel `.alert strong` bleibt für Kästen anderer Seiten, die ihre
   Überschrift noch nicht auszeichnen – sie sehen aus wie bisher. */
.alert .alert-titel { display: block; margin-bottom: 4px; }
.alert:has(.alert-titel) strong:not(.alert-titel) { display: inline; margin-bottom: 0; }
.fallkarte .fallkarte-kopf { margin-bottom: 8px; }
.fallkarte-label { font-weight: 700; }
.fallkarte-zeile { margin: 0 0 4px; overflow-wrap: anywhere; }
.fallkarte-erklaerung { font-size: 14px; margin: 0 0 10px; }
.fallkarte-herkunft { font-size: 14px; }
.fallkarte-fehlt-titel { margin: 10px 0 0; }
.fallkarte-fehlt { margin-bottom: 12px; overflow-wrap: anywhere; }
.fallkarte-strecke > summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.fallkarte-strecke[open] > summary { margin-bottom: 8px; }
.fallkarte-strecke > .card { margin-bottom: 0; }
.rueckfrage-faelle { list-style: none; margin: 0; padding: 0; }
.rueckfrage-faelle li + li { border-top: 1px solid #E4E4E4; margin-top: 12px; padding-top: 12px; }
.rueckfrage-faelle .muted { overflow-wrap: anywhere; }
.rueckfrage-wege { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
/* Usability 07: EAB gegen den Fall – Abgleichkasten über den Werten der EAB-Prüfseite */
.eab-abgleich { padding: 12px 16px; margin: 0 0 16px; border-left: 4px solid var(--input-border); background: #fff; }
.eab-abgleich h3 { margin: 0 0 8px; font-size: 17px; }
.eab-abgleich-widerspruch { background: var(--klaer-bg); border-left-color: var(--klaer-fg); }
.eab-abgleich-widerspruch h3 { color: var(--klaer-fg); }
.eab-abgleich-offen { background: var(--info-bg); border-left-color: var(--info-fg); }
.eab-abgleich-zeile + .eab-abgleich-zeile { margin-top: 10px; }
.eab-abgleich-zeile p { margin: 0; }
.eab-abgleich-werte { margin: 4px 0 0; padding-left: 20px; }
.eab-abgleich-werte li { overflow-wrap: anywhere; }
.eab-abgleich-bestaetigung { margin-top: 8px; }
.eab-abgleich-bestaetigung label { font-weight: 700; }
.eab-abgleich-bestaetigung .hilfe { font-size: 14px; color: var(--muted); margin: 4px 0 0; }
/* Die Seitenvorschau hält ihren Platz frei, bevor sie geladen ist (A4 hochkant; danach gilt das echte Seitenformat).
   Sonst schob das nachgeladene Bild den Fokus nach einer Ablehnung (Pflichthäkchen, `autofocus`) bei 1024 px aus dem
   Bild – im Browser gemessen: Seite wuchs um 1056 px, nachdem der Fokus schon gesetzt war. */
.pdf-pane img { aspect-ratio: auto 595 / 842; height: auto; }
/* Usability 06: Eingang sichtbar – Frist je Datei, Zähler im Menü, Zeile in „Meine Arbeit“, externe Texterkennung als eigene Entscheidung */
.eingang-kopf .bereinigung-ab { white-space: nowrap; }
.eingang-extern { margin-top: 18px; padding: 12px 16px; border: 1.5px solid var(--border); background: var(--bg); }
.eingang-extern h4 { margin: 0 0 6px; font-size: 16px; }
.eingang-extern-stand { margin: 0 0 8px; font-size: 15px; }
.eingang-extern form { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin: 0; }
.eingang-extern select { max-width: min(100%, 460px); }
.eingang-extern form .muted { margin: 0; font-size: 14px; }
.eingang-hinweis { margin: 0 0 12px; padding: 8px 14px; background: var(--info-bg); color: var(--info-fg); border-left: 4px solid var(--info-fg); font-size: 15px; }
.eingang-hinweis a { color: var(--info-fg); }
@media (max-width: 720px) { .eingang-kopf .bereinigung-ab { white-space: normal; } }
/* Usability 11: Dokumenttypen in Gruppen entlang der Antragsstrecke (B3). Die offenen Gruppen ohne eigenen
   Rahmen, damit die Kacheln so breit bleiben wie vorher; seltene Gruppen klappen ohne Skript mit <details> auf.
   Die Kachelspalte wird nie breiter als ihre Gruppe (schmal kein seitliches Überlaufen). */
.typgruppe { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.typwahl > .typgruppe:last-child { margin-bottom: 0; }
fieldset.typgruppe > legend { padding: 0; margin: 0 0 6px; font-size: 15px; }
.typgruppe .radio-kacheln { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
details.typgruppe { border: 1.5px solid var(--border); background: #fff; }
details.typgruppe > summary { cursor: pointer; padding: 8px 12px; font-weight: 700; font-size: 15px; display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; }
details.typgruppe > summary::marker { content: ""; }
details.typgruppe > summary::-webkit-details-marker { display: none; }
details.typgruppe > summary::before { content: "▸"; }
details.typgruppe[open] > summary::before { content: "▾"; }
details.typgruppe[open] > summary { border-bottom: 1.5px solid var(--border); margin-bottom: 8px; }
details.typgruppe > .radio-kacheln { padding: 0 12px 12px; }
.typgruppe-zeile { font-weight: 400; font-size: 14px; color: var(--muted); }
.typgruppe-verweis { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
/* Schmal ist die Kachel in einer aufgeklappten Gruppe enger: Der Hinweis rutscht unter den Namen, wenn beide
   nebeneinander nicht passen, und lange Wörter („Gesundheitsdaten“) laufen nie über den Kachelrand
   (gesehen bei 375 px). */
.typgruppe .radio-kacheln .hinweis { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 720px) {
  .typgruppe .radio-kacheln label { flex-wrap: wrap; row-gap: 2px; }
  details.typgruppe > summary { padding: 8px; }
  details.typgruppe > .radio-kacheln { padding: 0 8px 8px; }
}
/* Usability 09: Sprache und Rückwege – „Technische Angaben“ der Prüfseite zugeklappt unter der Statuszeile (A12). */
.technik { margin: 0 0 16px; font-size: 14px; }
.technik > summary { cursor: pointer; color: var(--muted); }
.technik dl.fakten { margin: 6px 0 0; }
.technik dd { overflow-wrap: anywhere; }
/* Usability 08: Prüfseiten und Dokumentliste (A6, A8, W8) */
/* A6: Die drei Karten „Falsch hochgeladen“, „Zu den Dokumenten“, „Typ korrigieren“ stehen in einer Zeile, schmal
   untereinander. Eine aufgeklappte Karte nimmt die ganze Zeile, damit ihr Formular Platz hat. Warnungen liegen
   nie darin (tests/test_usability_08.py). */
.pruef-aktionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 16px; }
.pruef-aktionen > details[open] { grid-column: 1 / -1; }
.pruef-aktionen .aktionen input[type=text] { min-width: 0 !important; max-width: 100%; flex: 1 1 260px; }
/* Lange Dateinamen (Titel, Kopf des PDF) brechen um, statt die Seite schmal seitlich zu verbreitern. */
.pruefseite h1, .pruefseite .pdf-pane .kopfzeile, .breadcrumb > strong { overflow-wrap: anywhere; min-width: 0; }
.pruef.pruef-dokument { grid-template-columns: minmax(0, 1fr); }
.sprunglink { font-size: 15px; font-weight: 700; }
.pruef-original > .sprunglink { display: inline-block; margin: 0 0 8px; }
.sprungzeile { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 0 0 8px; }
/* A6 · W-4: Zweispaltig ab 900 px, PDF zu Werten 3 : 2. Im Browser gemessen (08.11.2026, Datenabfrage und EAB,
   tests/test_usability_08_browser.py): bei 1093 px PDF 590 px / Felder 415 px, bei 1024 px 549 / 387, bei 900 px
   474 / 338 – das PDF ist dabei nie kleiner als bisher im schmalsten Zweispalter (475 px bei 1101 px). Bei 860 px
   wäre es 450 px, und Beschriftung mit Quelle bricht beim EAB auf drei Zeilen: darunter eine Spalte. */
@media (min-width: 900px) {
  .pruef.pruef-dokument { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  /* Das PDF bleibt beim Scrollen stehen; ist es höher als der Platz zwischen Kopf und Fußzeile, scrollt es in sich. */
  .pruef-dokument > .pruef-original { position: sticky; top: 72px; align-self: start; max-height: calc(100vh - 72px - 64px); overflow-y: auto; }
}
/* A8: Prüfstand neben dem Dokumentstatus; die Angabe darf umbrechen statt die Tabelle zu verbreitern. */
.pruefstand { display: inline-block; }
.pruefstand .pill { white-space: normal; }
.pruefstand > .muted { display: block; margin-top: 2px; }
.tn-stand { display: flex; flex-wrap: wrap; gap: 4px 8px; justify-content: flex-end; align-items: flex-start; }
.tn-stand .pill + .pill { margin-left: 0; }
/* W8: Formularvorschau – Wertefelder füllen ihre Spalte (vorher 161 px bei jeder Breite). Schmal (bis 720 px) steht
   je Feld Beschriftung, Wert und Herkunft untereinander in einem Block statt in einer 720 px breiten Tabelle, die
   seitlich gescrollt werden musste. Leer bleibt leer: kein Platzhalter, kein Ersatzwert. */
.formular-werte th:nth-child(1) { width: 30%; }
.formular-werte th:nth-child(2) { width: 45%; }
.formular-werte .feldfehler { color: var(--err-fg); font-weight: 700; }
.formular-werte input[type=text], .formular-werte select { width: 100%; max-width: 100%; color: var(--text); background: #fff; border: 1px solid var(--input-border); border-radius: 8px; padding: 7px 10px; }
@media (max-width: 720px) {
  .formular-werte { min-width: 0; }
  .formular-werte thead { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .formular-werte tr { display: block; padding: 10px 12px; }
  .formular-werte td { display: block; padding: 2px 0; }
  .formular-werte td[data-titel="Feld"] { font-weight: 700; }
  .formular-werte td[data-titel="Herkunft"] { font-size: 14px; color: var(--muted); }
  .formular-werte td[data-titel="Herkunft"]::before { content: "Herkunft: "; }
}
/* Meldung 11 und 12 (12.11.2026): alle Seiten eines Schreibens untereinander; der Sprung von „Quelle: Seite 2“ landet unter der Kopfzeile. */
.pdf-seite { margin: 0; display: flex; flex-direction: column; gap: 4px; scroll-margin-top: 80px; }
.pdf-seite:target > figcaption { color: var(--text, #111); font-weight: 700; }
.neue-akte .btn-outline { align-self: flex-start; margin-top: 6px; }
/* Schmale Fenster (eine Spalte): Die Seiten scrollen in ihrem Kasten, damit die Werte darunter erreichbar bleiben. */
@media (max-width: 899px) { .pdf-pane-alle { max-height: 85vh; overflow-y: auto; } }