/* Kernprobe — Design-System v0.2 (11.10.2026). Quelle und Regeln: design/mockups/kernprobe.css, design/direction.md */
/* Schriften selbst gehostet, nie von Google Fonts (sonst Anfrage an Google vor Einwilligung). Bis die Plex-Dateien
   unter static/fonts liegen, greift der Systemschrift-Fallback aus --font-sans/--font-mono. */

:root{
  /* Marke */
  --tanne-900:#0F2A1F; --tanne-800:#163A2B; --tanne-700:#1F4D3A; --tanne-600:#2A6249; --tanne-100:#DCE9E2; --tanne-50:#EEF4F0;
  --pink-600:#D6336C; --pink-700:#B8285A; --pink-100:#FBE3EC;

  /* Zustand */
  --gesund:#2F8F5B; --gesund-bg:#E3F1E8; --gesund-text:#1D5A39;
  --beobachten:#D99A1E; --beobachten-bg:#FBF0D9; --beobachten-text:#7A5208;
  --handeln:#C8372D; --handeln-bg:#F9E1DF; --handeln-text:#7E2019;
  --unbekannt:#8A938E; --unbekannt-bg:#ECEFED; --unbekannt-text:#4A524D;

  /* Flächen und Text (hell) */
  --bg:#F4F6F4; --surface:#FFFFFF; --surface-sunken:#EDF0EE; --surface-hover:#F7F9F8;
  --border:#DDE3DF; --border-strong:#C3CCC6;
  --text:#17211C; --text-secondary:#4E5A53; --text-muted:#7A857F;
  --primary:var(--tanne-700); --primary-hover:var(--tanne-800); --on-primary:#FFFFFF;
  --mark:var(--pink-600); --mark-bg:var(--pink-100);
  --focus:0 0 0 2px var(--bg), 0 0 0 4px var(--tanne-600);

  /* Schrift */
  --font-sans:'IBM Plex Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:28px; --fs-3xl:40px;

  /* Raster */
  --r:4px; --r-lg:6px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --line:1px solid var(--border);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1512; --surface:#161E1A; --surface-sunken:#121915; --surface-hover:#1C2621;
    --border:#26312B; --border-strong:#37443C;
    --text:#E6ECE8; --text-secondary:#A9B5AE; --text-muted:#7D8A83;
    --primary:#7FC2A0; --primary-hover:#9BD3B5; --on-primary:#0F1512;
    --mark:#F0679A; --mark-bg:#3A1624;
    --gesund:#4FB77F; --gesund-bg:#163325; --gesund-text:#9FDDB9;
    --beobachten:#E8B04A; --beobachten-bg:#3A2C0E; --beobachten-text:#F2D08E;
    --handeln:#EB6A5F; --handeln-bg:#3D1714; --handeln-text:#F6ADA6;
    --unbekannt:#7D8A83; --unbekannt-bg:#222B26; --unbekannt-text:#C2CCC6;
    --focus:0 0 0 2px var(--bg), 0 0 0 4px #7FC2A0;
  }
}
:root[data-theme="dark"]{
  --bg:#0F1512; --surface:#161E1A; --surface-sunken:#121915; --surface-hover:#1C2621;
  --border:#26312B; --border-strong:#37443C;
  --text:#E6ECE8; --text-secondary:#A9B5AE; --text-muted:#7D8A83;
  --primary:#7FC2A0; --primary-hover:#9BD3B5; --on-primary:#0F1512;
  --mark:#F0679A; --mark-bg:#3A1624;
  --gesund:#4FB77F; --gesund-bg:#163325; --gesund-text:#9FDDB9;
  --beobachten:#E8B04A; --beobachten-bg:#3A2C0E; --beobachten-text:#F2D08E;
  --handeln:#EB6A5F; --handeln-bg:#3D1714; --handeln-text:#F6ADA6;
  --unbekannt:#7D8A83; --unbekannt-bg:#222B26; --unbekannt-text:#C2CCC6;
  --focus:0 0 0 2px var(--bg), 0 0 0 4px #7FC2A0;
}

*{box-sizing:border-box}
/* hidden muss gewinnen, auch gegen .note{display:flex} u. ä. */
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font:400 var(--fs-md)/1.55 var(--font-sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em}
h1{font-size:var(--fs-2xl);line-height:1.2} h2{font-size:var(--fs-xl)} h3{font-size:var(--fs-lg)} h4{font-size:var(--fs-md)}
p{margin:0}
a{color:var(--primary);text-underline-offset:2px}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r)}
.mono,.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--text-muted)} .secondary{color:var(--text-secondary)}
.label{font-size:var(--fs-xs);color:var(--text-muted);text-transform:none;letter-spacing:.02em}

/* App-Rahmen */
.app{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:100vh}
.side{border-right:var(--line);background:var(--surface);padding:var(--s4) var(--s3);display:flex;flex-direction:column;gap:var(--s1)}
.brand{display:flex;align-items:center;gap:var(--s2);font-weight:600;font-size:var(--fs-lg);padding:var(--s2) var(--s2) var(--s4)}
.brand svg{width:22px;height:22px;color:var(--primary)}
.nav a{display:flex;align-items:center;gap:var(--s2);padding:7px var(--s2);border-radius:var(--r);color:var(--text-secondary);text-decoration:none;font-size:var(--fs-md)}
.nav a:hover{background:var(--surface-hover);color:var(--text)}
.nav a[aria-current="page"]{background:var(--tanne-50);color:var(--tanne-800);font-weight:500}
:root[data-theme="dark"] .nav a[aria-current="page"]{background:#1C2B23;color:var(--primary)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .nav a[aria-current="page"]{background:#1C2B23;color:var(--primary)}}
.nav .count{margin-left:auto;font:500 var(--fs-xs) var(--font-mono);color:var(--text-muted)}
.side .tenant{margin-top:auto;border-top:var(--line);padding:var(--s3) var(--s2) 0;font-size:var(--fs-sm)}
.main{padding:var(--s5) var(--s6);min-width:0}
.topbar{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5)}
.topbar .grow{flex:1}
.crumb{font-size:var(--fs-sm);color:var(--text-muted)} .crumb a{color:inherit;text-decoration:none}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 var(--s3);border-radius:var(--r);border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font:500 var(--fs-sm) var(--font-sans);cursor:pointer;text-decoration:none}
.btn:hover{background:var(--surface-hover)}
.btn-primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.btn-ghost{border-color:transparent;background:transparent}
.btn-sm{height:26px;padding:0 var(--s2);font-size:var(--fs-xs)}
.btn svg{width:16px;height:16px}

/* Felder */
.field{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm)}
.input,.select{height:34px;padding:0 var(--s3);border:1px solid var(--border-strong);border-radius:var(--r);background:var(--surface);color:var(--text);font:inherit;font-size:var(--fs-md)}
.toggle{appearance:none;width:34px;height:20px;border-radius:10px;background:var(--border-strong);position:relative;cursor:pointer;flex:none;margin:0}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.toggle:checked{background:var(--primary)} .toggle:checked::after{left:16px}

/* Karten und Kennzahlen */
.card{background:var(--surface);border:var(--line);border-radius:var(--r-lg)}
.card-h{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-bottom:var(--line)}
.card-h h2,.card-h h3{font-size:var(--fs-md)}
.card-b{padding:var(--s4)}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3);margin-bottom:var(--s5)}
.kpi{background:var(--surface);border:var(--line);border-radius:var(--r-lg);padding:var(--s3) var(--s4)}
.kpi .v{font:500 var(--fs-2xl)/1.1 var(--font-mono);margin-top:var(--s1)}
.kpi .d{font-size:var(--fs-xs);color:var(--text-muted);margin-top:2px}
.kpi.is-handeln{border-top:3px solid var(--handeln);border-radius:0 0 var(--r-lg) var(--r-lg)}
.kpi.is-beobachten{border-top:3px solid var(--beobachten);border-radius:0 0 var(--r-lg) var(--r-lg)}
.kpi.is-mark{border-top:3px solid var(--mark);border-radius:0 0 var(--r-lg) var(--r-lg)}

/* Zustand */
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none;background:var(--unbekannt)}
.dot.gesund{background:var(--gesund)} .dot.beobachten{background:var(--beobachten)} .dot.handeln{background:var(--handeln)}
.state{display:inline-flex;align-items:center;gap:6px;font:500 var(--fs-xs) var(--font-mono);padding:2px 8px;border-radius:3px;background:var(--unbekannt-bg);color:var(--unbekannt-text);white-space:nowrap}
.state.gesund{background:var(--gesund-bg);color:var(--gesund-text)}
.state.beobachten{background:var(--beobachten-bg);color:var(--beobachten-text)}
.state.handeln{background:var(--handeln-bg);color:var(--handeln-text)}
.sev{font:500 11px var(--font-mono);padding:1px 6px;border-radius:3px;border:1px solid currentColor;white-space:nowrap}
.sev.hoch{color:var(--handeln)} .sev.mittel{color:var(--beobachten)} .sev.niedrig{color:var(--text-muted)}
.tag{font:400 var(--fs-xs) var(--font-mono);color:var(--text-secondary);background:var(--surface-sunken);border:var(--line);padding:1px 6px;border-radius:3px;white-space:nowrap}

/* Markierung — nur für „neu seit letzter Prüfung“ */
.mark{display:inline-flex;align-items:center;gap:4px;font:500 11px var(--font-mono);color:var(--mark);letter-spacing:.04em}
.mark::before{content:"";width:6px;height:6px;background:var(--mark);transform:rotate(45deg)}
.marked{border-left:3px solid var(--mark);border-radius:0;background:var(--mark-bg)}

/* Tabellen */
.table{width:100%;border-collapse:collapse;font-size:var(--fs-md)}
.table th{text-align:left;font:500 var(--fs-xs) var(--font-sans);color:var(--text-muted);padding:var(--s2) var(--s3);border-bottom:var(--line);background:var(--surface-sunken);white-space:nowrap}
.table td{padding:10px var(--s3);border-bottom:var(--line);vertical-align:middle}
.table tr:last-child td{border-bottom:none}
.table tbody tr:hover{background:var(--surface-hover)}
.table .r{text-align:right}
.domain{font-weight:500;color:var(--text);text-decoration:none} .domain:hover{text-decoration:underline}
.sub{display:block;font-size:var(--fs-xs);color:var(--text-muted)}

/* Befundliste */
.finding{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:var(--s3);padding:var(--s3) var(--s4);border-bottom:var(--line);align-items:start}
.finding:last-child{border-bottom:none}
.finding h4{font-weight:500}
.finding p{font-size:var(--fs-sm);color:var(--text-secondary);margin-top:2px}

/* Verlauf */
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:90px 14px minmax(0,1fr);gap:var(--s3);padding:6px 0;font-size:var(--fs-sm)}
.timeline .when{font-family:var(--font-mono);color:var(--text-muted);font-size:var(--fs-xs);padding-top:2px}
.timeline .sym{font-family:var(--font-mono);font-weight:500;text-align:center}
.timeline .neu{color:var(--mark)} .timeline .weg{color:var(--gesund)}

/* Erreichbarkeit: 30 Tagesbalken */
.uptime{display:grid;grid-template-columns:repeat(30,1fr);gap:2px;height:28px}
.uptime i{background:var(--gesund);border-radius:1px}
.uptime i.w{background:var(--beobachten)} .uptime i.x{background:var(--handeln)} .uptime i.n{background:var(--border)}

/* Filter-Chips */
.chips{display:flex;gap:var(--s2);flex-wrap:wrap}
.chip{text-decoration:none;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--border-strong);border-radius:14px;background:var(--surface);font-size:var(--fs-sm);color:var(--text-secondary);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--bg)}
.chip .num{font-size:var(--fs-xs)}

/* Hinweisbalken */
.note{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) var(--s4);border-radius:var(--r);font-size:var(--fs-sm);background:var(--surface-sunken);border:var(--line)}
.note.handeln{background:var(--handeln-bg);border-color:transparent;color:var(--handeln-text)}

/* Theme-Schalter der Mockups */

@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{display:none}
  .main{padding:var(--s4)}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hide-sm{display:none}
}

/* ── v0.2 (11.10.2026): Bausteine für Phase 1 ───────────────────────── */

/* Freigabe des Prüfprotokolls: Entwurf → freigegeben → versendet */
.flow{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0;font-size:var(--fs-sm)}
.flow li{display:flex;align-items:center;gap:var(--s2);color:var(--text-muted)}
.flow li+li::before{content:"";width:32px;height:1px;background:var(--border-strong);margin:0 var(--s2)}
.flow .step{width:20px;height:20px;border-radius:50%;border:1px solid var(--border-strong);display:grid;place-items:center;font:500 11px var(--font-mono)}
.flow .done{color:var(--text-secondary)} .flow .done .step{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.flow .now{color:var(--text);font-weight:500} .flow .now .step{border:2px solid var(--primary);color:var(--primary)}

/* Einwilligungsprüfung: Anfragen vor dem Klick auf den Banner */
.req{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 120px 90px;gap:var(--s3);padding:8px var(--s4);border-bottom:var(--line);font-size:var(--fs-sm);align-items:center}
.req:last-child{border-bottom:none}
.req.head{font-size:var(--fs-xs);color:var(--text-muted);background:var(--surface-sunken)}
.req .host{font-family:var(--font-mono);font-size:var(--fs-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phase{font:500 11px var(--font-mono);padding:1px 6px;border-radius:3px;white-space:nowrap}
.phase.vor{background:var(--handeln-bg);color:var(--handeln-text)}
.phase.nach{background:var(--gesund-bg);color:var(--gesund-text)}

/* Befund in drei Teilen (Prüfprotokoll): was ist · was es heißt · was zu tun ist */
.f3{border:var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.f3-h{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-bottom:var(--line)}
.f3-h h4{flex:1}
.f3-b{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.f3-b>div{padding:var(--s3) var(--s4);font-size:var(--fs-sm)}
.f3-b>div+div{border-left:var(--line)}
.f3-b .label{display:block;margin-bottom:4px}

/* Formulierung: technische Tatsache statt rechtlicher Wertung (RDG) */
.wording{display:grid;grid-template-columns:1fr 1fr;border:var(--line);border-radius:var(--r-lg);overflow:hidden;font-size:var(--fs-sm)}
.wording>div{padding:8px var(--s4);border-bottom:var(--line)}
.wording>div:nth-child(odd){border-right:var(--line)}
.wording .yes::before{content:"✓ ";color:var(--gesund);font-weight:600}
.wording .no{color:var(--text-muted)} .wording .no::before{content:"✗ ";color:var(--handeln);font-weight:600}
.wording .hd{background:var(--surface-sunken);font-size:var(--fs-xs);color:var(--text-muted)}

/* Alarmregel */
.rule{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;gap:var(--s3);align-items:center;padding:var(--s3) var(--s4);border-bottom:var(--line)}
.rule:last-child{border-bottom:none}
.rule h4{font-weight:500} .rule p{font-size:var(--fs-xs);color:var(--text-muted)}

/* Leerer Zustand */
.empty{text-align:center;padding:var(--s7) var(--s5);border:1px dashed var(--border-strong);border-radius:var(--r-lg);background:var(--surface)}
.empty svg{width:40px;height:40px;color:var(--text-muted);margin-bottom:var(--s3)}
.empty h3{margin-bottom:var(--s1)} .empty p{color:var(--text-secondary);font-size:var(--fs-sm);max-width:32em;margin:0 auto var(--s4)}

/* Kernprobe läuft */
.running{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);font-size:var(--fs-sm)}
.running .bar{flex:1;height:4px;background:var(--surface-sunken);border-radius:2px;overflow:hidden}
.running .bar i{display:block;height:100%;width:45%;background:var(--primary);animation:probe 1.6s ease-in-out infinite}
@keyframes probe{0%{transform:translateX(-100%)}100%{transform:translateX(230%)}}
@media (prefers-reduced-motion:reduce){.running .bar i{animation:none;width:60%}}

/* Ausfall-Eintrag */
.incident{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding:var(--s2) var(--s4);border-bottom:var(--line);font-size:var(--fs-sm)}
.incident:last-child{border-bottom:none}

/* Prüfprotokoll als Seite (A4) */
.report{max-width:794px;margin:0 auto;background:#fff;color:#17211C;padding:56px 64px;border:var(--line)}
.report .r-head{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:var(--s4);border-bottom:2px solid #1F4D3A;margin-bottom:var(--s5)}
.report .agency{font-weight:600;font-size:var(--fs-lg)}
.report .r-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin:var(--s4) 0 var(--s5)}
.report .r-sum>div{border:1px solid #DDE3DF;border-radius:var(--r);padding:var(--s3)}
.report .r-foot{margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid #DDE3DF;font-size:var(--fs-xs);color:#7A857F}
@media print{
  body{background:#fff}
  .theme-switch,.side,.topbar,.no-print{display:none!important}
  .app{display:block} .main{padding:0}
  .report{border:none;padding:0;max-width:none}
  .f3,.card{break-inside:avoid}
}

@media (max-width:900px){
  .f3-b{grid-template-columns:1fr} .f3-b>div+div{border-left:none;border-top:var(--line)}
  .req{grid-template-columns:minmax(0,1fr) 90px} .req>:nth-child(2),.req>:nth-child(3){display:none}
  .report{padding:var(--s5)} .report .r-sum{grid-template-columns:1fr}
  .wording{grid-template-columns:1fr} .wording>div:nth-child(odd){border-right:none}
}

/* Prüfprotokoll bleibt immer hell (Papier), auch im Dunkelmodus */
.report{
  --bg:#F4F6F4; --surface:#FFFFFF; --surface-sunken:#EDF0EE; --surface-hover:#F7F9F8;
  --border:#DDE3DF; --border-strong:#C3CCC6; --line:1px solid #DDE3DF;
  --text:#17211C; --text-secondary:#4E5A53; --text-muted:#7A857F;
  --primary:#1F4D3A; --on-primary:#fff; --mark:#D6336C; --mark-bg:#FBE3EC;
  --gesund:#2F8F5B; --gesund-bg:#E3F1E8; --gesund-text:#1D5A39;
  --beobachten:#D99A1E; --beobachten-bg:#FBF0D9; --beobachten-text:#7A5208;
  --handeln:#C8372D; --handeln-bg:#F9E1DF; --handeln-text:#7E2019;
}
.report h2{font-size:var(--fs-lg);margin:var(--s5) 0 var(--s3)}
.report .changes{list-style:none;margin:0;padding:0;font-size:var(--fs-sm)}
.report .changes li{display:grid;grid-template-columns:20px 1fr;padding:4px 0}
.agency-note{width:100%;min-height:72px;padding:var(--s2) var(--s3);border:1px solid var(--border-strong);border-radius:var(--r);background:var(--surface);color:var(--text);font:inherit;font-size:var(--fs-sm);resize:vertical}
.cols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--s4);align-items:start}
.stack{display:grid;gap:var(--s4)}
.facts{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}
@media (max-width:900px){.cols{grid-template-columns:1fr}}

/* Korrekturen nach Sichtprüfung 11.10.: mittlere Breiten */
.domain{white-space:nowrap}
.incident{display:flex;flex-wrap:wrap;column-gap:var(--s3);row-gap:2px}
.incident>:nth-child(2){flex:1 1 180px;min-width:0}
.incident>:last-child{margin-left:auto}
.timeline li{grid-template-columns:auto 14px minmax(0,1fr)}
@media (max-width:1180px){.cols{grid-template-columns:1fr}}
.field .input{width:100%;min-width:0} .row>.field{min-width:120px}
.card:has(>.table){overflow-x:auto}

/* Druck/PDF: A4 ist schmaler als 900 px – trotzdem die Spalten wie am Bildschirm, nicht die Handy-Ansicht */
@media print{
  .report .r-sum{grid-template-columns:repeat(3,1fr)}
  .f3-b{grid-template-columns:repeat(3,minmax(0,1fr))}
  .f3-b>div+div{border-top:none;border-left:var(--line)}
}