/* ViaGuardium KRITIS – zentrales Stylesheet.
   CSP: keine Inline-Styles und keine <style>-Blöcke in Templates; alle Seitenstile liegen hier.
   Aufbau: 1. Design-Tokens (hell/dunkel)  2. Grundlayout  3. Formulare, Knöpfe, Tabellen
           4. Gemeinsame Bausteine (Hinweise, Marken, Status-Chips)  5. Modulstile
           (Präfix bzw. Namensraum je Modul)  6. Bewegung und Druck. */

/* ==== 1. Design-Tokens ================================================================= */

:root {
  /* Grundfarben */
  --farbe-text: #1b1f24;
  --farbe-text-leise: #57606a;
  --farbe-hintergrund: #f6f7f9;
  --farbe-flaeche: #ffffff;
  --farbe-flaeche-abgesetzt: #eef1f4;
  --farbe-rand: #d0d7de;
  --farbe-akzent: #0b5394;
  --farbe-akzent-dunkel: #073763;
  --farbe-auf-akzent: #ffffff;
  --farbe-fokus: #ffbf47;
  --farbe-fokus-text: #1b1f24;

  /* Signalfarben (Text/Rahmen) und helle Flächen dazu */
  --farbe-erfolg: #1a7f37;
  --farbe-warnung: #9a6700;
  --farbe-fehler: #b42318;
  --farbe-auf-signal: #ffffff;
  --farbe-akzent-flaeche: #eaf2fb;
  --farbe-erfolg-flaeche: #eef8f0;
  --farbe-warnung-flaeche: #fff8e6;
  --farbe-fehler-flaeche: #fdf1f0;

  /* Risikostufen (§ 12-Matrix) */
  --stufe-gering-flaeche: #dafbe1;
  --stufe-gering-text: #116329;
  --stufe-mittel-flaeche: #fff8c5;
  --stufe-mittel-text: #7d4e00;
  --stufe-hoch-flaeche: #ffd8b5;
  --stufe-hoch-text: #8a3a00;
  --stufe-sehr-hoch-flaeche: #ffd6d3;
  --stufe-sehr-hoch-text: #8c1d18;

  /* Schutzbedarf nach DIN SPEC 14027 Bild 1: Signalfarben bleiben in beiden Modi gleich,
     die Kategorie steht immer zusätzlich als Text da. */
  --bild1-rot: #b42318;
  --bild1-rot-text: #ffffff;
  --bild1-gelb: #f2c200;
  --bild1-gelb-text: #1b1f24;
  --bild1-gelb-rand: #9a6700;
  --bild1-gruen: #6cc070;
  --bild1-gruen-text: #1b1f24;
  --bild1-gruen-rand: #1a7f37;
  --bild1-dunkelgruen: #14532d;
  --bild1-dunkelgruen-text: #ffffff;

  /* Mandantenleiste */
  --farbe-leiste: #073763;
  --farbe-leiste-text: #ffffff;

  /* Onboarding-Tour: Abdunkelung außerhalb des hervorgehobenen Elements */
  --farbe-tour-abdeckung: rgba(13, 17, 23, .55);
  --farbe-tour-abdeckung-leicht: rgba(13, 17, 23, .25);
  --tour-schatten: 0 .5rem 1.5rem rgba(13, 17, 23, .25);

  /* Maße */
  --radius: 6px;
  --radius-chip: 999px;
  --abstand: 1rem;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --farbe-text: #e6edf3;
    --farbe-text-leise: #9da7b3;
    --farbe-hintergrund: #0d1117;
    --farbe-flaeche: #161b22;
    --farbe-flaeche-abgesetzt: #1f2630;
    --farbe-rand: #3d444d;
    --farbe-akzent: #58a6ff;
    --farbe-akzent-dunkel: #8cc4ff;
    --farbe-auf-akzent: #0d1117;
    --farbe-fokus: #ffbf47;
    --farbe-fokus-text: #0d1117;

    --farbe-erfolg: #3fb950;
    --farbe-warnung: #d29922;
    --farbe-fehler: #f85149;
    --farbe-auf-signal: #0d1117;
    --farbe-akzent-flaeche: #10233a;
    --farbe-erfolg-flaeche: #12261a;
    --farbe-warnung-flaeche: #2b2111;
    --farbe-fehler-flaeche: #2d1214;

    --stufe-gering-flaeche: #12361f;
    --stufe-gering-text: #7ee2a0;
    --stufe-mittel-flaeche: #3a2f05;
    --stufe-mittel-text: #f2cc60;
    --stufe-hoch-flaeche: #47240a;
    --stufe-hoch-text: #ffa657;
    --stufe-sehr-hoch-flaeche: #4a1414;
    --stufe-sehr-hoch-text: #ff9b95;

    --farbe-leiste: #1f3a5f;
    --farbe-leiste-text: #ffffff;

    --farbe-tour-abdeckung: rgba(0, 0, 0, .7);
    --farbe-tour-abdeckung-leicht: rgba(0, 0, 0, .4);
    --tour-schatten: 0 .5rem 1.5rem rgba(0, 0, 0, .6);
  }
}

/* ==== 2. Grundlayout =================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; }

body {
  margin: 0;
  font-family: var(--schrift);
  line-height: 1.55;
  color: var(--farbe-text);
  background: var(--farbe-hintergrund);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.rahmen {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 var(--abstand);
}

main { flex: 1; padding-top: 2rem; padding-bottom: 3rem; }
main:focus { outline: none; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .75rem; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
p { margin: 0 0 1rem; }

a { color: var(--farbe-akzent); text-underline-offset: .15em; }
a:hover { color: var(--farbe-akzent-dunkel); }

/* Fokus: immer sichtbar, kontraststark, auch auf farbigen Flächen */
:focus-visible {
  outline: 3px solid var(--farbe-fokus);
  outline-offset: 2px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-offset: 0;
  border-color: var(--farbe-akzent);
}
button:focus-visible, .knopf:focus-visible {
  outline-offset: 3px;
  box-shadow: 0 0 0 1px var(--farbe-flaeche);
}

.sprunglink {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--farbe-flaeche);
  color: var(--farbe-akzent);
  padding: .5rem 1rem;
  z-index: 10;
}
.sprunglink:focus { left: 1rem; top: 1rem; }

.kopfzeile {
  background: var(--farbe-flaeche);
  border-bottom: 1px solid var(--farbe-rand);
}
.kopfzeile__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand);
  min-height: 3.5rem;
}
.kopfzeile nav ul {
  list-style: none; display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; padding: 0;
}
/* Aktiver Menüpunkt (aria-current, web/navigation.py) */
.hauptnavigation a[aria-current="page"] {
  font-weight: 700; text-decoration-thickness: 2px; color: var(--farbe-text);
}
/* Menü-Knopf: nur mit JavaScript (app.js setzt .kopfzeile--js) und nur auf schmalen
   Bildschirmen; ohne JavaScript bleibt die Navigation ausgeklappt. */
.menue-knopf { display: none; }
@media (max-width: 40rem) {
  .kopfzeile__innen { flex-wrap: wrap; }
  .kopfzeile--js .menue-knopf { display: inline-block; margin-left: auto; }
  .kopfzeile--js .hauptnavigation { flex-basis: 100%; padding-bottom: .75rem; }
  .kopfzeile--js .hauptnavigation:not(.hauptnavigation--offen) { display: none; }
  .kopfzeile--js .hauptnavigation ul { flex-direction: column; }
}
/* Brotkrumen „Sie sind hier“ (basis.html) */
.brotkrumen { font-size: .875rem; color: var(--farbe-text-leise); margin: 0 0 1rem; }
.brotkrumen ol { display: inline; list-style: none; margin: 0; padding: 0; }
.brotkrumen li { display: inline; }
.brotkrumen__titel { margin-right: .25rem; }
.brotkrumen__trenner { margin: 0 .25rem; }
.brotkrumen [aria-current="page"] { color: var(--farbe-text); font-weight: 600; }

.marke {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--farbe-text);
  text-decoration: none;
}
.marke span { color: var(--farbe-akzent); }

.fusszeile {
  border-top: 1px solid var(--farbe-rand);
  color: var(--farbe-text-leise);
  font-size: .875rem;
  padding: 1rem 0;
}

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

.fehlercode { color: var(--farbe-text-leise); font-size: .875rem; margin-bottom: .25rem; }

.meldungen { margin-bottom: 1.5rem; }
.meldung {
  border-left: 4px solid var(--farbe-akzent);
  background: var(--farbe-flaeche);
  padding: .75rem 1rem;
  border-radius: var(--radius);
}
.meldung--erfolg { border-color: var(--farbe-erfolg); }
.meldung--warnung { border-color: var(--farbe-warnung); }
.meldung--fehler { border-color: var(--farbe-fehler); }

/* Mandantenleiste (Berater, unter der Kopfzeile) */
.mandant-leiste { background: var(--farbe-leiste); color: var(--farbe-leiste-text); font-size: .875rem; }
.mandant-leiste__innen {
  display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
  padding-top: .35rem; padding-bottom: .35rem;
}
.mandant-leiste a { color: var(--farbe-leiste-text); }
.mandant-leiste a:hover { color: var(--farbe-fokus); }

/* ==== 3. Formulare, Knöpfe, Tabellen =================================================== */

label { display: block; font-weight: 600; margin-bottom: .25rem; }
input, select, textarea {
  font: inherit;
  width: 100%;
  max-width: 32rem;
  padding: .5rem .625rem;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--farbe-akzent); }
[aria-invalid="true"] { border-color: var(--farbe-fehler); }
.feld { margin-bottom: 1rem; }
.feld__fehler { color: var(--farbe-fehler); font-size: .875rem; margin-top: .25rem; }

fieldset {
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  margin: 0 0 1rem;
  padding: .5rem 1rem;
  min-width: 0;
}
legend { font-weight: 600; padding: 0 .25rem; }

.feldgruppe { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 1rem; }
.formular-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 1rem; }

button, .knopf {
  font: inherit;
  display: inline-block;
  padding: .5rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--farbe-akzent);
  background: var(--farbe-akzent);
  color: var(--farbe-auf-akzent);
  cursor: pointer;
  text-decoration: none;
}
button:hover, .knopf:hover {
  background: var(--farbe-akzent-dunkel);
  border-color: var(--farbe-akzent-dunkel);
  color: var(--farbe-auf-akzent);
}
.knopf--leise { background: transparent; color: var(--farbe-akzent); }
.knopf--leise:hover { background: var(--farbe-akzent-flaeche); color: var(--farbe-akzent-dunkel); }
.knopf--gross { padding: .75rem 1.25rem; font-size: 1.0625rem; }

/* Knopfgruppen */
.knopfreihe, .knopfzeile, .zeilenaktionen {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
}
.knopfreihe form, .zeilenaktionen form { margin: 0; }
.knopfreihe input[type="date"] { width: auto; }

/* Tabellen */
table { width: 100%; border-collapse: collapse; background: var(--farbe-flaeche); }
th, td { text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--farbe-rand); }
th { font-weight: 600; }
.tabelle-scroll, .tabelle-rollbar, .tabelle-rahmen { overflow-x: auto; margin-bottom: 1.5rem; }
.tabelle-rahmen caption { text-align: left; font-weight: 600; padding: .5rem 0; }

/* Definitionslisten mit Spalten */
.stichtage, .angaben {
  display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0 0 1rem;
}
.stichtage dt, .angaben dt { font-weight: 600; }
.stichtage dd, .angaben dd { margin: 0; }

/* Filterleisten */
.filter, .vf-filter { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filter [aria-current="page"], .vf-filter [aria-current="page"] { font-weight: 700; text-decoration: none; }
.filterleiste { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.filterleiste .feld { margin: 0; }

/* HTMX-Ladeanzeige (htmx: includeIndicatorStyles=false) */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

.nur-screenreader {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ==== 4. Gemeinsame Bausteine ========================================================== */

/* Leise Texte */
.leise { color: var(--farbe-text-leise); }
.warntext { color: var(--farbe-warnung); }
.zertifikat-zuordnung { margin: 0.25rem 0 0; padding-left: 1.1rem; }
.hinweis, .ue-leise, .vf-klein, .portfolio-hinweis { color: var(--farbe-text-leise); font-size: .875rem; }
.vf-klein { margin: .25rem 0; }
.zeilen-id, .gap-zeile__nr { font-family: var(--schrift-mono); color: var(--farbe-text-leise); }

/* Hinweiskästen (linke Kante = Art des Hinweises) */
.hinweisbox, .hinweis-box, .vorbehalt, .haftung {
  border-left: 4px solid var(--farbe-akzent);
  background: var(--farbe-flaeche);
  padding: .75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
}
.hinweisbox--warnung, .hinweis-box, .vorbehalt { border-left-color: var(--farbe-warnung); }
.hinweis-box { margin-bottom: 1rem; }
.vorbehalt { padding: .5rem 1rem; margin-bottom: 1rem; }
/* Haftungshinweis bei rechtlichen Einschätzungen: immer gut sichtbar */
.haftung { border-left-color: var(--farbe-warnung); background: var(--farbe-warnung-flaeche); margin: 1rem 0; }

/* Kennzahlen-Kacheln */
.kennzahlen, .ue-kennzahlen, .vf-kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: .75rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.kennzahlen > li, .ue-kennzahlen > li, .vf-kennzahlen > li, .kennzahl {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  padding: .5rem .75rem;
}
.kennzahl strong { display: block; font-size: 1.5rem; }

/* Marken und Abzeichen (Rechtsstand, Entwurf, Simulation) */
.badges { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.badge, .abzeichen, .marke-klein, .marke-kritisv {
  display: inline-block;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.3;
  padding: .125rem .5rem;
  border-radius: var(--radius-chip);
  border: 1px solid var(--farbe-rand);
  background: var(--farbe-flaeche-abgesetzt);
  color: var(--farbe-text);
  vertical-align: middle;
}
.marke-klein, .marke-kritisv { font-size: .75rem; padding: .05rem .45rem; }
.marke-klein { margin-left: .25rem; background: transparent; }
.badge--entwurf, .abzeichen--entwurf, .marke-kritisv {
  border-color: var(--farbe-warnung); color: var(--farbe-warnung); background: var(--farbe-warnung-flaeche);
}
.marke-klein--muss { border-color: var(--farbe-fehler); color: var(--farbe-fehler); }
.marke-entwurf, .marke-simulation, .portfolio .aktuell-marke {
  display: inline-block;
  font-size: .8125rem;
  font-weight: 700;
  padding: .1rem .5rem;
  border: 2px solid var(--farbe-warnung);
  color: var(--farbe-warnung);
  border-radius: var(--radius);
}
.marke-simulation {
  background: var(--farbe-warnung); color: var(--farbe-auf-signal);
  letter-spacing: .05em; text-transform: uppercase;
}
.portfolio .aktuell-marke { border-color: var(--farbe-akzent); color: var(--farbe-akzent); }

/* Status-Chips: einheitliche Form, Bedeutung über Farbe UND Text.
   info = offen/geplant, warnung = bald/dringend, fehler = überfällig (gefüllt),
   erfolg = erledigt, neutral = unbestimmt (gestrichelt). */
.frist-status, .ue-stand, .vf-chip {
  display: inline-block;
  font-weight: 600;
  font-size: .875rem;
  line-height: 1.4;
  padding: .05rem .5rem;
  border-radius: var(--radius-chip);
  border: 2px solid var(--farbe-rand);
  color: var(--farbe-text);
  white-space: nowrap;
}
.frist-status--offen, .ue-stand--geplant, .ue-stand--gueltig, .vf-chip--offen, .vf-chip--entwurf {
  border-color: var(--farbe-akzent); color: var(--farbe-akzent);
}
.frist-status--bald, .ue-stand--auswertung, .ue-stand--bald, .vf-chip--dringend {
  border-color: var(--farbe-warnung); color: var(--farbe-warnung);
}
.frist-status--ueberfaellig, .ue-stand--ueberfaellig, .ue-stand--abgelaufen, .ue-stand--fehlt,
.vf-chip--ueberfaellig {
  border-color: var(--farbe-fehler); color: var(--farbe-auf-signal); background: var(--farbe-fehler);
}
.frist-status--erledigt, .ue-stand--durchgefuehrt, .vf-chip--gemeldet, .vf-chip--abgesendet {
  border-color: var(--farbe-erfolg); color: var(--farbe-erfolg);
}
.frist-status--unbestimmt, .ue-stand--abgesagt, .ue-stand--unbefristet, .vf-chip--nicht_begonnen {
  color: var(--farbe-text-leise); border-style: dashed;
}

/* Ampel (Dashboard): Form unterscheidet zusätzlich (rot = eckig) */
.ampel { display: inline-flex; align-items: baseline; gap: .4rem; }
.ampel__punkt {
  flex: none; width: .8rem; height: .8rem; border-radius: 50%;
  border: 2px solid var(--farbe-rand); transform: translateY(.1rem);
}
.ampel--gruen .ampel__punkt { background: var(--farbe-erfolg); border-color: var(--farbe-erfolg); }
.ampel--gelb .ampel__punkt { background: var(--farbe-warnung); border-color: var(--farbe-warnung); }
.ampel--rot .ampel__punkt { background: var(--farbe-fehler); border-color: var(--farbe-fehler); border-radius: 2px; }
.ampel--info .ampel__punkt { background: var(--farbe-akzent); border-color: var(--farbe-akzent); }
.ampel__wort { font-weight: 600; }

/* Erfüllungsgrad (Gap) */
.erfuellung--erfuellt { color: var(--farbe-erfolg); font-weight: 600; }
.erfuellung--teilweise { color: var(--farbe-warnung); font-weight: 600; }
.erfuellung--offen { color: var(--farbe-fehler); font-weight: 600; }

/* Risikostufen § 12 */
.stufe {
  display: inline-block; padding: .125rem .5rem; border-radius: var(--radius);
  font-weight: 600; font-size: .875rem;
}
.stufe--gering { background: var(--stufe-gering-flaeche); color: var(--stufe-gering-text); }
.stufe--mittel { background: var(--stufe-mittel-flaeche); color: var(--stufe-mittel-text); }
.stufe--hoch { background: var(--stufe-hoch-flaeche); color: var(--stufe-hoch-text); }
.stufe--sehr_hoch { background: var(--stufe-sehr-hoch-flaeche); color: var(--stufe-sehr-hoch-text); }

/* Schutzbedarf nach DIN SPEC 14027 Bild 1 */
.sb {
  display: inline-block; padding: .125rem .5rem; border-radius: var(--radius);
  font-weight: 600; border: 1px solid transparent; white-space: nowrap;
}
.sb--rot { background: var(--bild1-rot); color: var(--bild1-rot-text); }
.sb--gelb { background: var(--bild1-gelb); color: var(--bild1-gelb-text); border-color: var(--bild1-gelb-rand); }
.sb--gruen { background: var(--bild1-gruen); color: var(--bild1-gruen-text); border-color: var(--bild1-gruen-rand); }
.sb--dunkelgruen { background: var(--bild1-dunkelgruen); color: var(--bild1-dunkelgruen-text); }
.niveau {
  display: inline-block; padding: .125rem .5rem; border-radius: var(--radius);
  border: 1px solid var(--farbe-rand); background: var(--farbe-flaeche); font-weight: 600;
}
.legende { list-style: none; padding: 0; display: flex; gap: .75rem; flex-wrap: wrap; }

/* ==== 5. Modulstile ==================================================================== */

/* --- Betroffenheits-Check und Startseite (Namensraum .seite-check) --- */
.seite-check .hinweis { font-size: .9375rem; }
.seite-check .buehne { padding: 2.5rem 1.5rem; }
.seite-check .buehne h1 { font-size: 2.125rem; max-width: 40rem; }
.seite-check .buehne p.einleitung { font-size: 1.125rem; max-width: 42rem; }
.seite-check .aktionen,
.seite-check .check-aktionen { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1.25rem; }
.seite-check .raster { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.seite-check .raster .karte { margin-bottom: 0; }
.seite-check .raster h3 { font-size: 1.0625rem; }

.seite-check .check-schritte {
  display: flex; flex-wrap: wrap; gap: .25rem 1rem; list-style: none; padding: 0;
  margin: 0 0 1.25rem; font-size: .875rem; color: var(--farbe-text-leise); counter-reset: schritt;
}
.seite-check .check-schritte li { counter-increment: schritt; }
.seite-check .check-schritte li::before { content: counter(schritt) ". "; }
.seite-check .check-schritte li.aktiv { color: var(--farbe-text); font-weight: 700; }
.seite-check .check-schritte li.erledigt { color: var(--farbe-erfolg); }
.seite-check .check-assistent fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; }
.seite-check .check-assistent legend { padding: 0; margin-bottom: .5rem; }
.seite-check .check-assistent legend h2 { margin-bottom: 0; }
.seite-check .check-assistent h2:focus { outline: none; }
.seite-check .check-assistent h2:focus-visible { outline: 3px solid var(--farbe-fokus); }
.seite-check .auswahl { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.seite-check .auswahl li {
  display: flex; align-items: flex-start; gap: .625rem; padding: .5rem .75rem;
  border: 1px solid var(--farbe-rand); border-radius: var(--radius); background: var(--farbe-flaeche);
}
.seite-check .auswahl li:focus-within { border-color: var(--farbe-akzent); }
.seite-check .auswahl input[type="radio"],
.seite-check .auswahl input[type="checkbox"],
.seite-check .einwilligung input[type="checkbox"] { width: auto; margin: .3rem 0 0; flex: none; }
.seite-check .auswahl label, .seite-check .einwilligung label { font-weight: 400; margin: 0; }
.seite-check .auswahl .nr { font-variant-numeric: tabular-nums; color: var(--farbe-text-leise); margin-right: .25rem; }
.seite-check .ja-nein { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.seite-check .ja-nein label { display: inline-flex; align-items: center; gap: .375rem; font-weight: 400; }
.seite-check .ja-nein input { width: auto; }
.seite-check .kriterium {
  border: 1px solid var(--farbe-rand); border-radius: var(--radius); padding: .75rem 1rem; margin-bottom: 1rem;
}
.seite-check .fehlerliste {
  border-left: 4px solid var(--farbe-fehler); background: var(--farbe-fehler-flaeche);
  padding: .75rem 1rem; border-radius: var(--radius); margin-bottom: 1.25rem;
}
.seite-check .fehlerliste h3 { font-size: 1rem; margin-bottom: .25rem; }
.seite-check .fehlerliste ul { margin: 0; padding-left: 1.25rem; }
.seite-check .ergebnis {
  border: 2px solid var(--farbe-rand); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 1rem 0;
}
.seite-check .ergebnis__titel { font-size: 1.375rem; font-weight: 700; margin-bottom: .25rem; }
.seite-check .ergebnis--voraussichtlich_kritisch { border-color: var(--farbe-fehler); background: var(--farbe-fehler-flaeche); }
.seite-check .ergebnis--nicht_kritisch { border-color: var(--farbe-erfolg); background: var(--farbe-erfolg-flaeche); }
.seite-check .ergebnis--unklar { border-color: var(--farbe-warnung); background: var(--farbe-warnung-flaeche); }
.seite-check .anfrage { border-top: 1px solid var(--farbe-rand); margin-top: 2rem; padding-top: 1.5rem; }
.seite-check .einwilligung { display: flex; align-items: flex-start; gap: .625rem; }
.seite-check .hp-feld { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* --- Asset-Register und Heatmap --- */
.stufenhilfe { font-size: .875rem; color: var(--farbe-text-leise); margin: .25rem 0 0; }
.stufenhilfe dt { font-weight: 600; float: left; margin-right: .5rem; }
.stufenhilfe dd { margin: 0 0 .25rem; }
.heatmap { width: auto; }
.heatmap th, .heatmap td { text-align: center; min-width: 6.5rem; }
.heatmap td { font-size: 1.25rem; font-weight: 700; }
.heatmap td.sb { display: table-cell; border-radius: 0; white-space: normal; }
.heatmap td small { display: block; font-size: .75rem; font-weight: 400; }

/* --- Risikoanalyse § 12 --- */
.schritte {
  list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0 0 1.5rem;
  counter-reset: schritt;
}
.schritte li { counter-increment: schritt; }
.schritte a {
  display: inline-block; padding: .25rem .75rem; border: 1px solid var(--farbe-rand);
  border-radius: var(--radius); background: var(--farbe-flaeche); text-decoration: none;
}
.schritte a::before { content: counter(schritt) ". "; font-weight: 600; }
.risikomatrix { table-layout: fixed; max-width: 40rem; }
.risikomatrix th, .risikomatrix td { text-align: center; border: 1px solid var(--farbe-rand); }
.risikomatrix td.stufe--gering, .risikomatrix td.stufe--mittel,
.risikomatrix td.stufe--hoch, .risikomatrix td.stufe--sehr_hoch {
  display: table-cell; border-radius: 0; font-weight: 400;
}
.risikomatrix .zelle__zahl { font-size: 1.25rem; font-weight: 700; display: block; }
.risikomatrix .zelle__stufe { font-size: .75rem; display: block; }
.gefaehrdung {
  border: 1px solid var(--farbe-rand); border-radius: var(--radius); padding: .75rem 1rem;
  margin-bottom: .75rem; background: var(--farbe-flaeche);
}
.gefaehrdung summary { cursor: pointer; font-weight: 600; }
.gefaehrdung--offen { border-left: 4px solid var(--farbe-fehler); }

/* --- Gap und Maßnahmen § 13 --- */
.stand { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.stand meter { width: 10rem; height: 1rem; }
.gap-punkt > summary { cursor: pointer; font-weight: 600; padding: .5rem 0; }
.gap-punkt > summary .stand, .gap-punkt > summary .fehlercode { font-weight: 400; }
.gap-liste { list-style: none; margin: 0; padding: 0; }
.gap-zeile { border-top: 1px solid var(--farbe-rand); padding: .75rem 0; }
.gap-zeile__kopf { display: flex; gap: .5rem; flex-wrap: wrap; align-items: baseline; }
.gap-zeile dl { display: grid; grid-template-columns: max-content 1fr; gap: .1rem 1rem; margin: .5rem 0; font-size: .9375rem; }
.gap-zeile dt { color: var(--farbe-text-leise); }
.gap-zeile dd { margin: 0; white-space: pre-line; }
.gap-zeile fieldset label { display: inline-flex; align-items: center; gap: .35rem; font-weight: 400; margin-right: 1rem; }
.gap-zeile fieldset input { width: auto; }
.niveau--aktiv { font-weight: 700; text-decoration: underline; }
.niveau--aus { color: var(--farbe-text-leise); text-decoration: line-through; }

/* --- Fristen-Cockpit --- */
.simulation {
  border: 3px dashed var(--farbe-warnung); border-radius: var(--radius); padding: 1rem;
  background: var(--farbe-flaeche);
}

/* --- Dashboard und Pflichten-Matrix --- */
.anlagen-karten {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
  gap: 1rem; margin-bottom: 2rem;
}
.anlagen-karte { border: 1px solid var(--farbe-rand); border-radius: var(--radius); background: var(--farbe-flaeche); padding: 1rem; }
.anlagen-karte h3 { margin-top: 0; display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.anlagen-karte dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: 0; }
.anlagen-karte dt { color: var(--farbe-text-leise); }
.anlagen-karte dd { margin: 0; }
.anlagen-karte ul { margin: .25rem 0 0; padding-left: 1.1rem; }
.matrix td, .matrix th { vertical-align: top; font-size: .9375rem; }
.matrix ul { margin: 0; padding-left: 1rem; }
@media (max-width: 40rem) { .anlagen-karte dl { grid-template-columns: 1fr; } }

/* --- Übungen und Schulungen (Präfix ue-) --- */
.ue-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 1rem; }
.ue-knoepfe { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.ue-knoepfe form { margin: 0; }
.ue-scroll, .vf-tabelle, .portfolio-scroll { overflow-x: auto; margin-bottom: 1.5rem; }
.ue-text { white-space: pre-wrap; }

/* --- Vorfälle und Meldungen (Präfix vf-) --- */
.countdown { font-weight: 700; font-variant-numeric: tabular-nums; }
.countdown--dringend { color: var(--farbe-warnung); }
.countdown--ueberfaellig { color: var(--farbe-fehler); }
.vf-stufen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem;
  list-style: none; padding: 0; margin: 0 0 1.5rem;
}
.vf-stufen li { background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand); border-radius: var(--radius); padding: .75rem 1rem; }
.vf-stufen h3 { margin: 0 0 .25rem; font-size: 1rem; }
.vf-ketten { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; }
.vf-ketten label { font-weight: 600; }
.vf-ketten input[type="checkbox"], .vf-bestaetigung input[type="checkbox"] { width: auto; margin-right: .5rem; }
.vf-vorlage {
  width: 100%; max-width: none; min-height: 22rem; font-family: var(--schrift-mono); font-size: .875rem;
}
.vf-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0 1.5rem; }
.vf-felder textarea { min-height: 5rem; }
.vf-pflicht { color: var(--farbe-fehler); }

/* --- Berater: Mandantenportfolio --- */
.portfolio td.zahl, .portfolio th.zahl { text-align: right; white-space: nowrap; }
.portfolio tr[aria-current="true"] { background: var(--farbe-akzent-flaeche); }
.portfolio form { margin: 0; }
.portfolio .ueberfaellig { color: var(--farbe-fehler); font-weight: 600; }

/* --- Onboarding-Tour und Hilfe (Präfix tour-, hilfe-; Skript static/tour.js) --- */
.tour-angebot { border-left: 4px solid var(--farbe-akzent); }
.tour-angebot[hidden] { display: none; }
.tour-angebot .knopfreihe, .hilfe-liste .knopfreihe { align-items: center; }
.abzeichen--demo { border-color: var(--farbe-akzent); color: var(--farbe-akzent); margin-left: .25rem; }
.demo-projekt form { margin-bottom: .75rem; }
.hilfe-liste { list-style: none; padding: 0; margin: 1.5rem 0 0; counter-reset: hilfe; }
.hilfe-liste > li { counter-increment: hilfe; }
.hilfe-liste > li > h2::before { content: counter(hilfe) ". "; color: var(--farbe-text-leise); }
.hilfe-weg { border-left: 3px solid var(--farbe-rand); padding-left: .75rem; }
.hilfe-weg__trenner { color: var(--farbe-text-leise); }
.tour-abdeckung { position: fixed; inset: 0; z-index: 1000; background: transparent; }
.tour-abdeckung--dunkel { background: var(--farbe-tour-abdeckung); }
.tour-rahmen {
  position: fixed; z-index: 1001; pointer-events: none;
  border-radius: var(--radius);
  outline: 3px solid var(--farbe-fokus);
  box-shadow: 0 0 0 100vmax var(--farbe-tour-abdeckung);
  transition: top .2s ease, left .2s ease, width .2s ease, height .2s ease;
}
.tour-ziel { scroll-margin: 6rem 1rem; }
.tour-dialog {
  position: fixed; z-index: 1002;
  width: min(28rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem); overflow-y: auto;
  background: var(--farbe-flaeche); color: var(--farbe-text);
  border: 1px solid var(--farbe-rand); border-radius: var(--radius);
  box-shadow: var(--tour-schatten);
  padding: 1.25rem 1.25rem 1rem;
}
.tour-dialog:focus-visible { outline: 3px solid var(--farbe-fokus); }
.tour-dialog--mitte { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.tour-dialog--unten, .tour-dialog--oben {
  left: .5rem; right: .5rem; width: auto; max-height: 45vh;
  padding: 1rem 1rem .75rem;
}
.tour-dialog--unten { top: auto; bottom: .5rem; }
.tour-dialog--oben { top: .5rem; bottom: auto; }
.tour-dialog--unten .tour-dialog__knoepfe, .tour-dialog--oben .tour-dialog__knoepfe {
  position: sticky; bottom: -.75rem; background: var(--farbe-flaeche); padding: .5rem 0 .75rem;
}
.tour-dialog__fortschritt { margin: 0 0 .25rem; font-size: .875rem; color: var(--farbe-text-leise); }
.tour-dialog__titel { font-size: 1.25rem; margin-bottom: .5rem; }
.tour-dialog__recht { border-left: 3px solid var(--farbe-akzent); padding-left: .75rem; }
.tour-dialog__demo { font-size: .875rem; color: var(--farbe-akzent); }
.tour-dialog__hinweis { font-size: .8125rem; color: var(--farbe-text-leise); margin-bottom: .75rem; }
.tour-dialog__knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.tour-dialog__beenden { margin-left: auto; }
.tour-leiste {
  position: fixed; z-index: 1002; right: 1rem; bottom: 1rem;
  width: min(24rem, calc(100vw - 2rem));
  background: var(--farbe-flaeche); border: 1px solid var(--farbe-akzent);
  border-radius: var(--radius); box-shadow: var(--tour-schatten); padding: .75rem 1rem;
}
.tour-leiste p { margin-bottom: .5rem; }
/* Geführte Navigation: Hinweis am echten Link (Seite bleibt klickbar) */
.tour-rahmen--klick {
  outline-width: 4px;
  box-shadow: 0 0 0 100vmax var(--farbe-tour-abdeckung-leicht);
}
.tour-ziel--klick { position: relative; }
.tour-dialog__anweisung { font-size: 1.0625rem; font-weight: 600; }
.tour-dialog__weg { margin: 0 0 1rem; }
.tour-dialog__weg-titel { margin: 0 0 .25rem; font-weight: 600; font-size: .875rem; }
.tour-weg { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .125rem .25rem; font-size: .875rem; }
.tour-weg__schritt + .tour-weg__schritt::before { content: "› "; color: var(--farbe-text-leise); }
.tour-weg__schritt--erledigt { color: var(--farbe-text-leise); }
.tour-weg__schritt--jetzt {
  font-weight: 700; color: var(--farbe-akzent);
  text-decoration: underline; text-underline-offset: .2em;
}
/* Übersicht aller Schritte im Tour-Dialog */
.tour-dialog--uebersicht { width: min(34rem, calc(100vw - 2rem)); }
.tour-uebersicht, .tour-uebersicht__liste { list-style: none; margin: 0; padding: 0; }
.tour-uebersicht__gruppe { margin-bottom: .75rem; }
.tour-uebersicht__titel { font-size: .875rem; margin: 0 0 .25rem; color: var(--farbe-text-leise); }
.tour-uebersicht__eintrag { border-left: 3px solid transparent; padding-left: .5rem; }
.tour-uebersicht__eintrag--aktuell { border-left-color: var(--farbe-akzent); background: var(--farbe-akzent-flaeche); }
.tour-uebersicht__knopf {
  text-align: left; border-color: transparent; padding: .25rem .25rem; min-height: 2.75rem;
}
.tour-uebersicht__eintrag--aktuell .tour-uebersicht__knopf { font-weight: 700; }
.tour-uebersicht__weg { margin: 0 0 .25rem; font-size: .8125rem; color: var(--farbe-text-leise); }
.tour-dialog__knoepfe button { min-height: 2.75rem; } /* Touch-Ziel */
@media (max-width: 40rem) {
  .tour-ziel { scroll-margin: 4.5rem .5rem; }
  .tour-leiste { left: .5rem; right: .5rem; bottom: .5rem; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-rahmen { transition: none; }
}

/* ==== 6. Bewegung und Druck ============================================================ */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Druck (z. B. Registrierungs-Checkliste, Pflichten-Matrix): immer hell */
@media print {
  :root {
    --farbe-text: #000000;
    --farbe-text-leise: #444444;
    --farbe-hintergrund: #ffffff;
    --farbe-flaeche: #ffffff;
    --farbe-rand: #999999;
    color-scheme: light;
  }
  .kopfzeile, .fusszeile, .sprunglink, .mandant-leiste { display: none; }
  .tour-abdeckung, .tour-rahmen, .tour-dialog, .tour-leiste, .tour-angebot { display: none; }
  .karte { break-inside: avoid; border: 0; }
}