/* BWRA-Portal · Komponenten
   Setzt tokens.css voraus. Maße und Regeln: .interface-design/system.md. */

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--papier);color:var(--tinte);font:400 var(--t-text)/1.5 var(--f-text);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--f-display);font-weight:600;letter-spacing:-.015em;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--signal);text-underline-offset:2px}
a:hover{color:var(--signal-tief)}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.mono{font-family:var(--f-mono);font-size:var(--t-klein)}
.eyebrow{font:500 var(--t-beschriftung)/1.2 var(--f-text);text-transform:uppercase;letter-spacing:.18em;color:var(--tinte-3)}
.gedaempft{color:var(--tinte-3)}
.nur-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Sprunglink ---------- */
.sprunglink{position:absolute;left:var(--r4);top:-48px;z-index:100;background:var(--tinte);color:var(--papier);padding:8px 12px;border-radius:var(--radius);text-decoration:none}
.sprunglink:focus{top:var(--r2)}

/* ---------- Kopf ---------- */
.testbetrieb{margin:0;padding:6px var(--r4);background:var(--signal-hauch);color:var(--tinte);font-size:var(--t-klein);text-align:center;border-bottom:1px solid var(--linie)}
.kopf{display:flex;align-items:center;gap:var(--r5);padding:0 var(--r5);height:var(--kopf-hoehe);border-bottom:1px solid var(--linie);background:var(--papier)}
.wortmarke{font:600 22px/1 var(--f-display);letter-spacing:-.03em;color:var(--tinte);text-decoration:none}
.wortmarke b{color:var(--signal);font-weight:600}
.produkt{font:500 13px var(--f-text);color:var(--tinte-3);padding-left:var(--r4);border-left:1px solid var(--linie)}
.hauptnav{display:flex;gap:var(--r5);margin-left:var(--r5)}
.hauptnav a{color:var(--tinte-2);text-decoration:none;font-weight:500;padding:16px 0;border-bottom:2px solid transparent}
.hauptnav a:hover{color:var(--tinte)}
.hauptnav a[aria-current="page"]{color:var(--tinte);border-bottom-color:var(--tinte)}
.nutzer{margin-left:auto;display:flex;align-items:center;gap:var(--r3);color:var(--tinte-2);font-size:13px}
.rolle{font:500 var(--t-beschriftung) var(--f-text);letter-spacing:.06em;text-transform:uppercase;color:var(--tinte-3);border:1px solid var(--linie-mittel);border-radius:var(--radius);padding:2px 6px}

/* ---------- Statuszeile ---------- */
.statuszeile{display:grid;grid-template-columns:1fr auto;gap:var(--r5);align-items:end;padding:var(--r5) var(--r5) var(--r4);border-bottom:1px solid var(--linie)}
.statuszeile h1{font-size:var(--t-h1);line-height:1.15}
.metaliste{display:flex;flex-wrap:wrap;gap:var(--r2) var(--r5);margin:var(--r2) 0 0;color:var(--tinte-2);font-size:13px}
.metaliste dt{display:inline;color:var(--tinte-3)}
.metaliste dd{display:inline;margin:0 0 0 4px;font-weight:500;color:var(--tinte)}
.statuskette{display:flex;align-items:center;list-style:none;margin:0;padding:0;font-size:var(--t-klein)}
.statuskette li{display:flex;align-items:center;color:var(--tinte-3)}
.statuskette li+li::before{content:"";width:18px;height:1px;background:var(--linie-mittel);margin:0 6px}
.statuskette.senkrecht{flex-direction:column;align-items:flex-start;gap:6px}
.statuskette.senkrecht li+li::before{display:none}
.statuskette .erledigt{color:var(--tinte-2)}
.statuskette .aktuell{color:var(--tinte);font-weight:600}
.statuskette .ruecklauf{color:var(--tinte);font-weight:600}
.marke{display:inline-block;width:8px;height:8px;margin-right:6px;border:1px solid currentColor;border-radius:1px;flex:none}
.erledigt .marke{background:var(--tinte-2);border-color:var(--tinte-2)}
.aktuell .marke{background:var(--signal);border-color:var(--signal)}
.ruecklauf .marke{background:var(--blatt);border:2px solid var(--signal)}

/* ---------- Rahmen: Schritte | Dokument | Rand ---------- */
.rahmen{display:grid;grid-template-columns:var(--spalte-schritte) minmax(0,1fr) var(--spalte-rand);min-height:calc(100vh - 160px)}
.schritte{border-right:1px solid var(--linie);padding:var(--r5) 0}
.schritte ol{list-style:none;margin:0;padding:0}
.schritte a{display:grid;grid-template-columns:28px 1fr auto;align-items:baseline;gap:var(--r2);padding:7px var(--r5);color:var(--tinte-2);text-decoration:none;border-left:2px solid transparent}
.schritte a .nr{font:500 var(--t-klein) var(--f-mono);color:var(--tinte-3)}
.schritte a .zustand{font-size:var(--t-beschriftung);color:var(--tinte-3);white-space:nowrap}
.schritte a:hover{background:var(--grau-hauch);color:var(--tinte)}
.schritte a[aria-current="step"]{color:var(--tinte);font-weight:600;border-left-color:var(--signal);background:var(--blatt)}
.schritte a[aria-disabled="true"]{color:var(--tinte-3);pointer-events:none}
.schritte .gruppe{margin:var(--r4) var(--r5) var(--r2)}
.dokument{padding:var(--r6) var(--r6) var(--r7);min-width:0;max-width:var(--dokumentbreite)}
.rand{border-left:1px solid var(--linie);padding:var(--r6) var(--r5);font-size:13px}
.rand h3{font:600 13px var(--f-text);letter-spacing:0;margin-bottom:var(--r3)}
.rand h3+*{margin-top:0}
.rand section+section{margin-top:var(--r5)}
@media (max-width:1180px){
  .rahmen{grid-template-columns:200px minmax(0,1fr)}
  .rand{grid-column:2;border-left:none;border-top:1px solid var(--linie)}
}

/* ---------- Blatt und Abschnitt ---------- */
.blatt{background:var(--blatt);border:1px solid var(--linie);border-radius:var(--radius)}
.blatt.eng{padding:0 var(--r4)}
.blatt.weit{padding:var(--r4) var(--r5)}
.abschnittskopf{display:flex;align-items:baseline;justify-content:space-between;gap:var(--r4);margin-bottom:var(--r4)}
.abschnittskopf h2{font-size:var(--t-h2)}
.einleitung{color:var(--tinte-2);max-width:var(--lesebreite);margin-bottom:var(--r5)}

/* ---------- Kennzeichen ---------- */
.quelle{display:inline-block;font:500 10.5px/1 var(--f-mono);letter-spacing:.02em;padding:3px 5px;border:1px solid var(--linie-mittel);border-radius:var(--radius-klein);color:var(--tinte-2);vertical-align:1px;white-space:nowrap}
.quelle.entwurf{border-style:dashed}
.vorlaeufig{font-size:var(--t-beschriftung);color:var(--vorbehalt);background:var(--vorbehalt-hauch);border-radius:var(--radius-klein);padding:1px 5px;white-space:nowrap}
.entwurfshinweis{display:flex;gap:var(--r3);align-items:baseline;padding:var(--r3) var(--r4);border:1px dashed var(--tinte-4);border-radius:var(--radius);color:var(--tinte-15);font-size:13px;margin-bottom:var(--r5);max-width:880px}

/* ---------- Klassen ---------- */
.klasse{display:inline-grid;grid-template-columns:auto auto;align-items:center;gap:8px;white-space:nowrap}
.klasse .leiste{display:inline-grid;grid-template-columns:repeat(4,7px);gap:2px}
.klasse .leiste i{height:12px;border:1px solid var(--tinte-4);border-radius:1px}
.klasse .leiste i.an{background:var(--tinte-15);border-color:var(--tinte-15)}
.klasse.k4 .leiste i.an{background:var(--gravitas);border-color:var(--gravitas)}
.klasse b{font-weight:600}
.klasse small{color:var(--tinte-3);font-size:var(--t-klein)}
.kontrollklasse{display:inline-block;min-width:22px;text-align:center;font:600 13px/20px var(--f-display);border:1px solid var(--tinte);border-radius:var(--radius-klein)}
.kontrollklasse.c,.kontrollklasse.d{background:var(--tinte);color:var(--papier)}

/* ---------- Tabelle ---------- */
.tabelle{border-collapse:collapse;width:100%}
.tabelle caption{text-align:left}
.tabelle th,.tabelle td{padding:10px var(--r3);border-bottom:1px solid var(--linie);text-align:left;vertical-align:top}
.tabelle thead th{font:500 var(--t-beschriftung)/1.3 var(--f-text);letter-spacing:.06em;text-transform:uppercase;color:var(--tinte-3);border-bottom:1px solid var(--tinte);padding-top:var(--r3)}
.tabelle tbody th[scope="row"]{font-weight:600;width:24%}
.tabelle .zahl{text-align:right}
.tabelle tbody tr:hover td,.tabelle tbody tr:hover th{background:var(--zeile-hover)}
.tabelle tfoot td{border-top:1px solid var(--tinte);border-bottom:none;font-weight:600}
.tabelle td.geaendert{background:var(--signal-hauch)}
.tabelle-rahmen{overflow-x:auto;position:relative}  /* Bezug für .nur-sr in Kopfzellen */
.ueberschritten{font-weight:600;color:var(--tinte)}
.ueberschritten::before{content:"▲ ";font-size:9px;vertical-align:1px}
.tabelle .leer td{text-align:center;color:var(--tinte-3);padding:var(--r6) var(--r3)}

/* ---------- Hinweise ---------- */
.hinweis{display:grid;grid-template-columns:auto 1fr;gap:var(--r3);padding:var(--r3) var(--r4);border-left:2px solid var(--tinte);background:var(--grau-hauch);margin:var(--r4) 0;max-width:880px}
.hinweis .eyebrow{color:var(--tinte-15)}
.hinweis.sperre{border-left-color:var(--gravitas);background:var(--gravitas-hauch)}
.hinweis.sperre .eyebrow{color:var(--gravitas)}

/* ---------- Herleitung ---------- */
details.herleitung{margin-top:var(--r5);border-top:1px solid var(--linie)}
details.herleitung summary{cursor:pointer;padding:var(--r3) 0;font-weight:600;list-style:none}
details.herleitung summary::-webkit-details-marker{display:none}
details.herleitung summary::before{content:"+ ";font-family:var(--f-mono);color:var(--tinte-3)}
details.herleitung[open] summary::before{content:"− "}
details.herleitung ol{margin:0 0 var(--r4);padding-left:20px;color:var(--tinte-15)}
details.herleitung li{padding:3px 0}

/* ---------- Formular ---------- */
.formularzeile{display:grid;grid-template-columns:44px minmax(0,1.4fr) 180px 150px 120px;gap:var(--r4);padding:var(--r4) 0;border-bottom:1px solid var(--linie);align-items:start}
.formularzeile:last-of-type{border-bottom:none}
.formularzeile .nr{font:500 var(--t-klein) var(--f-mono);color:var(--tinte-3);padding-top:9px}
.formularzeile label,.formularzeile .label{font-weight:600;display:block}
.formularzeile .definition{color:var(--tinte-3);font-size:var(--t-definition);margin-top:2px;max-width:60ch}
.formularzeile .breit{grid-column:2 / -1}
.formularzeile .wertbreit{grid-column:3 / -1}
.unterlabel{font-size:var(--t-beschriftung);color:var(--tinte-3);margin-bottom:4px;display:block}
.feld{width:100%;min-height:var(--feld-hoehe);font:400 var(--t-text) var(--f-text);color:var(--tinte);background:var(--blatt);border:1px solid var(--tinte-4);border-radius:var(--radius);padding:7px 9px;transition:border-color var(--dauer)}
.feld:hover{border-color:var(--tinte-3)}
.feld:focus{outline:2px solid var(--signal);outline-offset:0;border-color:var(--signal)}
.feld.zahl{text-align:right;font-variant-numeric:tabular-nums}
.feld[disabled]{background:var(--grau-hauch);color:var(--tinte-3);cursor:not-allowed}
.feld[aria-invalid="true"]{border-color:var(--gravitas)}
textarea.feld{min-height:76px;resize:vertical}
select.feld{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--tinte-3) 50%),linear-gradient(135deg,var(--tinte-3) 50%,transparent 50%);background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:24px}
.lesewert{padding-top:7px;font-weight:500}
.datenschutz{font-size:var(--t-klein);color:var(--tinte-2);margin-top:6px}
.fehlermeldung{margin-top:6px;font-size:13px;color:var(--gravitas)}
.fehlermeldung b{font-weight:600}
.aktionen{display:flex;gap:var(--r3);justify-content:flex-end;padding-top:var(--r5)}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-flex;align-items:center;min-height:var(--feld-hoehe);font:500 var(--t-text) var(--f-text);border-radius:var(--radius);padding:8px 16px;cursor:pointer;border:1px solid var(--tinte);background:var(--blatt);color:var(--tinte);text-decoration:none;transition:background-color var(--dauer)}
.knopf:hover{background:var(--grau-hauch)}
.knopf:active{background:var(--linie)}
.knopf.primaer{background:var(--signal);border-color:var(--signal);color:#fff}
.knopf.primaer:hover{background:var(--signal-tief);border-color:var(--signal-tief)}
.knopf[disabled],.knopf[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.knopf.leise{border-color:transparent;background:none;color:var(--tinte-2);padding-inline:8px}
.knopf.leise:hover{color:var(--tinte);background:var(--grau-hauch)}

/* ---------- Marginalien ---------- */
.marginalie{border-top:1px solid var(--linie);padding:var(--r3) 0}
.marginalie .kopfzeile{display:flex;justify-content:space-between;gap:var(--r2);font-size:var(--t-klein);color:var(--tinte-3);margin-bottom:4px}
.marginalie .bezug{font:400 11.5px var(--f-mono);color:var(--tinte-3)}
.marginalie .antwort{margin-top:var(--r2);padding-left:var(--r3);border-left:1px solid var(--linie-mittel);color:var(--tinte-2)}
.status-offen,.status-beantwortet,.status-erledigt{font:500 var(--t-beschriftung) var(--f-text);text-transform:uppercase;letter-spacing:.06em}
.status-offen{color:var(--tinte)}
.status-offen::before{content:"● ";color:var(--signal)}
.status-beantwortet{color:var(--tinte-2)}
.status-beantwortet::before{content:"◐ "}
.status-erledigt{color:var(--tinte-3)}
.status-erledigt::before{content:"○ "}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px var(--r3);font-size:13px;margin:0}
.kv dt{color:var(--tinte-3)}
.kv dd{margin:0;overflow-wrap:anywhere}

/* ---------- Review: Lesezeile mit Randnotiz (gewählt 21.10.2026) ---------- */
.lesezeile{display:grid;grid-template-columns:44px minmax(0,1.5fr) 170px 120px 110px;gap:var(--r4);padding:var(--r4) var(--r5);align-items:start}
.lesezeile .nr{font:500 var(--t-klein) var(--f-mono);color:var(--tinte-3);padding-top:2px}
.lesezeile .label{font-weight:600}
.lesezeile .definition{color:var(--tinte-3);font-size:var(--t-definition);margin-top:2px}
.lesezeile .wert{font-weight:500}
.lesezeile .breit{grid-column:2 / -1}
.anmerkungszeile{display:grid;grid-template-columns:minmax(0,1fr) 300px;border-bottom:1px solid var(--linie)}
.anmerkungszeile:last-child{border-bottom:none}
.anmerkungszeile.hat-offene>.lesezeile{box-shadow:inset 2px 0 0 var(--signal)}
.randzelle{border-left:1px solid var(--linie);padding:var(--r2) var(--r4)}
.randzelle .marginalie{border-top:none}
.randzelle .marginalie+.marginalie{border-top:1px solid var(--linie)}
.verfassen .knoepfe,.marginalie .knoepfe{display:flex;flex-wrap:wrap;gap:var(--r2);margin-top:var(--r2)}
.randzelle .knopf{min-height:32px;padding:5px 10px;font-size:13px;white-space:nowrap}
.sperrgrund{text-align:right;font-size:13px;color:var(--tinte-3);margin-top:6px}
@media (max-width:1180px){.anmerkungszeile{grid-template-columns:1fr}.randzelle{border-left:none;border-top:1px dashed var(--linie);padding-left:calc(44px + var(--r5) + var(--r4))}}

/* ---------- Prüfliste ---------- */
.pruefliste{list-style:none;padding:0;margin:0}
.pruefliste li{display:grid;grid-template-columns:22px 1fr auto;gap:var(--r2);padding:10px 0;border-bottom:1px solid var(--linie)}
.pruefliste li:last-child{border-bottom:none}
.pruefliste .ok>span:first-child::before{content:"✓";font-weight:600}
.pruefliste .nein>span:first-child::before{content:"✕";color:var(--gravitas);font-weight:600}

/* ---------- Laden und leer ---------- */
.laedt{display:none;color:var(--tinte-3);font-size:13px}
.htmx-request .laedt,.htmx-request.laedt{display:inline}
.leerzustand{padding:var(--r6) var(--r5);text-align:left;max-width:var(--lesebreite)}
.leerzustand h3{font-size:var(--t-h3);margin-bottom:var(--r2)}
.leerzustand p{color:var(--tinte-2);margin-bottom:var(--r4)}

/* ---------- Berichtsvorschau ---------- */
.berichtsvorschau{background:var(--grau-hauch);padding:var(--r5);border-radius:var(--radius);overflow:auto}
.berichtsseite{width:595px;aspect-ratio:210/297;margin:0 auto;background:var(--blatt);border:1px solid var(--linie);padding:72px 62px 56px;display:flex;flex-direction:column;font-size:9.5px;line-height:1.5}
.berichtsseite .bkopf{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--linie);padding-bottom:8px;margin-bottom:18px}
.berichtsseite .bkopf .wortmarke{font-size:14px}
.berichtsseite h3{font:600 15px/1.2 var(--f-display);letter-spacing:-.01em;margin:0 0 4px}
.berichtsseite h4{font:600 11px var(--f-display);margin:14px 0 4px}
.berichtsseite .tabelle th,.berichtsseite .tabelle td{padding:4px 6px;font-size:9px}
.berichtsseite .tabelle thead th{font-size:7.5px}
.berichtsseite .bfuss{margin-top:auto;border-top:1px solid var(--linie);padding-top:6px;color:var(--tinte-3);font-size:7.5px;display:flex;justify-content:space-between;gap:12px}
/* ---------- Kennzeichen als abbr (Makro quelle) ---------- */
abbr.quelle{text-decoration:none;cursor:help}
/* ---------- HTMX-Indikator (includeIndicatorStyles ist wegen CSP aus) ---------- */
.htmx-indicator{opacity:0}
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{opacity:1}

/* ---------- Seiten: Anmeldung (schmales Blatt) und Arbeitsseite (Item 2b) ---------- */
.anmeldeseite{max-width:480px;margin:var(--r7) auto;padding:0 var(--r4)}
.anmeldeseite.breit{max-width:640px}
.anmeldeseite h1,.seite h1{font-size:var(--t-h1);line-height:1.15;margin:var(--r2) 0 var(--r3)}
.anmeldeseite .einleitung{margin-bottom:var(--r5)}
.anmeldeseite .blatt+.einleitung{margin-top:var(--r5);margin-bottom:var(--r3)}  /* zweiter Weg (Passkey, Item 2c) */
.anmeldeseite .blatt{padding:var(--r5)}
.anmeldeseite .aktionen{justify-content:flex-start;padding-top:var(--r2)}
.anmeldeseite details.herleitung{margin-top:var(--r5)}
.anmeldeseite .abbruch{margin-top:var(--r4)}
.anmeldeseite>.aktionen{padding-top:var(--r4)}
.anmeldeseite .abstand{margin-top:var(--r4);font-size:13px}
.seite{max-width:var(--dokumentbreite);margin:0 auto;padding:var(--r6) var(--r5) var(--r7)}
.seite section+section{margin-top:var(--r6)}
.seite h2{font-size:var(--t-h2);margin-bottom:var(--r3)}
/* ---------- Feldgruppe: Beschriftung über dem Feld ---------- */
.feldgruppe{margin-bottom:var(--r4)}
.feldgruppe label{display:block;font-weight:600;margin-bottom:4px}
.feldgruppe .hilfe{font-size:var(--t-definition);color:var(--tinte-3);margin-top:4px}
.blatt>.fehlermeldung:first-child{margin:0 0 var(--r4)}
.feld.code{font-family:var(--f-mono);letter-spacing:.2em;max-width:14ch}
/* ---------- Einrichtung zweiter Faktor, Wiederherstellungscodes ---------- */
.einrichtungsschritte{margin:0;padding-left:20px}
.einrichtungsschritte>li+li{margin-top:var(--r5)}
.einrichtungsschritte p{margin-bottom:var(--r2)}
.qr{display:block;width:180px;height:180px;border:1px solid var(--linie);background:var(--blatt)}
.geheimnis{font:500 14px/1.6 var(--f-mono);letter-spacing:.06em;word-break:break-all}
.codes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--r2) var(--r5)}
.codes code{font:500 15px/1.6 var(--f-mono);letter-spacing:.04em}
/* ---------- Kopf: Abmelden ---------- */
.kopf form.abmelden{display:inline;margin:0}
.kopf .nutzer .knopf.leise{min-height:32px;padding:4px 8px;font-size:13px}
@media (max-width:560px){
  .codes{grid-template-columns:1fr}
  .kopf{height:auto;min-height:var(--kopf-hoehe);flex-wrap:wrap;row-gap:var(--r2);padding:var(--r2) var(--r4)}
  .kopf .produkt{display:none}
}
/* ---------- Verwaltung (Item 2d) ---------- */
.seite .blatt.formular-blatt{max-width:640px;padding:var(--r5)}
.seite .blatt.formular-blatt.editor{max-width:none}
.editor textarea.feld{min-height:480px;white-space:pre;overflow-x:auto}
.seite .abstand-oben{margin-top:var(--r3)}
.seite section .hinweis{margin-top:0}
.tabelle form.inline{display:inline;margin:0}
.tabelle .aktionszelle{white-space:nowrap;text-align:right}
.tabelle .aktionszelle .knopf.leise{min-height:28px;padding:2px 6px;font-size:13px}
.formularreihe{display:flex;flex-wrap:wrap;gap:var(--r3) var(--r4);align-items:flex-end;margin-top:var(--r4)}
.formularreihe .feldgruppe{margin-bottom:0;min-width:160px}
fieldset.auswahlgruppe{border:0;padding:0;margin:0 0 var(--r4)}
.auswahlgruppe legend{font-weight:600;margin-bottom:4px;padding:0}
.auswahlgruppe label{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:baseline;margin:8px 0;cursor:pointer}
.auswahlgruppe label>span{display:flex;flex-direction:column}
.auswahlgruppe .hilfe{font-size:var(--t-definition);color:var(--tinte-3)}
.aktionen.links{justify-content:flex-start}

/* Grenzfälle Verwaltung (break, 22.10.2026): unbrechbare Zeichenketten, lange Namen im Kopf, Meldung vor Abschnitt */
.tabelle th,.tabelle td{overflow-wrap:break-word}
.tabelle tbody th[scope="row"],.tabelle td.lang{overflow-wrap:anywhere}
.kopf .produkt{white-space:nowrap}
.kopf .nutzer>span:first-child{max-width:32ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seite>.fehlermeldung{margin:var(--r3) 0 var(--r5)}

/* Zurücksetzen mit Vier-Augen (Item 2e): kompakte Auswahl des Grundes in der Aktionszelle */
.tabelle .feld.klein{width:auto;min-height:28px;padding:2px 24px 2px 6px;font-size:13px}
@media (max-width:40rem){.tabelle .feld.klein{font-size:16px}}  /* iOS zoomt unter 16px */
.antrag{margin-bottom:var(--r4)}
.antrag>h2{font-size:var(--t-h3, 1.0625rem);margin:0 0 var(--r3)}
.angaben{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--r2) var(--r4);margin:0 0 var(--r4)}
.angaben dt{color:var(--tinte-3)}
.angaben dd{margin:0}
.angaben dd.lang{overflow-wrap:anywhere}
@media (max-width:30rem){.angaben{grid-template-columns:minmax(0,1fr);row-gap:0}.angaben dd{margin-bottom:var(--r2)}}

/* Freitextfeld (Item 13): Datenschutzhinweis dauerhaft, Treffer als Liste, Begründung nur nach Treffern */
.freitext .hilfe.datenschutz{margin:0 0 6px;color:var(--tinte-2)}
.freitext .hilfe.datenschutz .quelle{margin-right:4px}
.freitext .fehlermeldung.treffer p{margin:0 0 4px}
.freitext .fehlermeldung.treffer ul{margin:0 0 4px;padding-left:18px}
.freitext .begruendung{margin:var(--r3) 0 0;padding:var(--r3);border:1px solid var(--linie);background:var(--papier)}
.freitext .begruendung label{font-size:var(--t-text)}

/* BWRA-Erfassung (Item 4): Versionskopf mit senkrechter Statuskette, Liste der Erfassungsschritte */
.versionskopf h1{margin:0 0 var(--r2)}
.erfassungsliste{list-style:none;margin:0;padding:0;border:1px solid var(--linie);background:var(--blatt);border-radius:var(--radius)}
.erfassungsliste li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:var(--r3);align-items:baseline;padding:10px var(--r4);border-bottom:1px solid var(--linie)}
.erfassungsliste li:last-child{border-bottom:none}
.erfassungsliste .nr{font:500 var(--t-klein) var(--f-mono);color:var(--tinte-3)}
.erfassungsliste .stand{font-size:var(--t-beschriftung);color:var(--tinte-3);white-space:nowrap}
.erfassungsliste .gedaempft{color:var(--tinte-3)}
.ergebniszeile{display:flex;flex-wrap:wrap;gap:var(--r2) var(--r4);align-items:baseline;padding:var(--r3) var(--r4);border:1px solid var(--linie);background:var(--papier);margin:var(--r4) 0}
.ergebniszeile .wert{font-weight:600}

/* Scope-Matrix (Item 5): Formularzeile mit Statusgruppe, Mandatszahl und Begründung über die volle Breite */
.seite.breit{max-width:1180px}
.scopezeile{grid-template-columns:44px minmax(0,1.4fr) 200px 180px}
.scopezeile .wertbreit{grid-column:2 / -1}
.scopezeile.fehlerhaft{border-left:2px solid var(--gravitas);padding-left:var(--r3)}
.auswahlgruppe.status{margin:0}
.auswahlgruppe.status label{display:inline-flex;margin-right:var(--r3)}
.scopezeile .freitext .feld{min-height:56px}

/* Risikodatenpunkte (Item 6): Formularzeile mit Wert, Datenqualität, Stufe und Annahme */
.datenzeile{grid-template-columns:44px minmax(0,1.4fr) 180px 200px 80px}
.datenzeile .wertbreit{grid-column:2 / -1}
.datenzeile.fehlerhaft{border-left:2px solid var(--gravitas);padding-left:var(--r3)}
.datenzeile .stufe-zelle{padding-top:26px}
.datenzeile .unterlabel{margin-top:var(--r2)}
.datenzeile .unterlabel:first-child{margin-top:0}
.datenzeile .freitext .feld{min-height:56px}
details.annahme>summary{cursor:pointer;font-size:var(--t-klein);color:var(--tinte-2);padding:2px 0}
details.annahme[open]>summary{margin-bottom:var(--r2)}

/* Kontrollinventar (Item 7): Block je Kontrollbereich, Raster für Kurzfelder und Ebenen */
.kontrollblock{margin-bottom:var(--r5)}
.kontrollblock.fehlerhaft{border-left:2px solid var(--gravitas)}
.kontrollkopf{display:flex;justify-content:space-between;gap:var(--r4);align-items:baseline;flex-wrap:wrap;margin-bottom:var(--r3)}
.kontrollkopf h2{font-size:var(--t-h3);margin:0}
.klassenstand{font-size:var(--t-klein);white-space:nowrap}
.kontrollraster{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--r3) var(--r4)}
.kontrollraster .feldgruppe{margin-bottom:0}
.auswahlgruppe.ebenen{margin:var(--r3) 0}
.auswahlgruppe.evidenzarten label{display:inline-flex;margin-right:var(--r3)}
.kontrollblock h3{font-size:var(--t-text);margin:var(--r4) 0 var(--r2)}
.statusform{white-space:nowrap}
.feststellung-neu{margin-bottom:var(--r3)}

/* Bewertung und Steuerung (Item 9a) */
.bewertungsmatrix tr.markiert th,.bewertungsmatrix tr.markiert td{background:var(--signal-hauch)}
.herleitung{margin:var(--r2) 0 0;padding-left:20px;font-size:var(--t-klein)}
.herleitung li{margin-bottom:4px}

/* Freigabe (Item 9b) */
.sperrgruende{margin:var(--r1) 0 0;padding-left:20px}
.sperrgruende li{margin-bottom:4px}

/* Review-Ansicht: Randnotiz (Item 10) */
.tabelle.review td.rand{min-width:360px;width:55%}
.anmerkung{margin:0 0 10px;padding:4px 0 4px 10px;border-left:3px solid var(--rahmen)}
.anmerkung.rueckfrage.offen,.anmerkung.rueckfrage.beantwortet{border-left-color:var(--signal)}
.anmerkung-kopf{margin:0 0 2px;font-size:var(--t-klein);color:var(--text-leise)}
.anmerkung .lang{margin:0 0 4px}
.antworten{margin:4px 0 6px;padding-left:18px;font-size:var(--t-klein)}
.randform{margin-top:6px}
.randform .feld{width:100%}
.randform label{display:block;font-size:var(--t-klein);margin-bottom:2px}
.randform .formularreihe{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:8px;margin:0;align-items:start}
.randform .formularreihe .feldgruppe{margin:0;min-width:0}
.randform textarea.feld{min-height:0}
.randform .knopf{margin-top:4px}
.aktionen.klein{margin:4px 0 0;gap:6px}
/* Import aus Tool 2 (Item 15): Vergleichstabellen scrollen auf schmalen Bildschirmen im Rahmen, statt Wörter zu brechen */
.tabelle.vergleich{min-width:760px}
.tabelle.breit{min-width:640px}
.tabelle .person{min-width:11rem}  /* Name und Adresse untereinander; bricht sonst je Buchstabe (Item 2f) */