/* Notfall-Konsole – Gestaltung wie docs/mockups/2026-10-10-notfall-konsole.html (Ordi-OS-Farben, hell/dunkel nach System). */
:root {
  --grund: oklch(0.975 0.004 248); --flaeche: oklch(1 0 0); --mulde: oklch(0.955 0.006 248); --linie: oklch(0.915 0.009 248);
  --tinte: oklch(0.24 0.026 248); --tinte-2: oklch(0.45 0.03 248); --tinte-3: oklch(0.52 0.03 248);
  --marke: oklch(0.54 0.1 205);
  --gut: oklch(0.54 0.115 158); --gut-hell: oklch(0.95 0.022 158); --gut-tief: oklch(0.42 0.09 158);
  --rot: oklch(0.54 0.175 27); --rot-hell: oklch(0.95 0.03 27); --rot-tief: oklch(0.45 0.15 27);
  --grau: oklch(0.55 0.02 248); --grau-hell: oklch(0.94 0.006 248); --grau-tief: oklch(0.42 0.02 248);
  --warn: oklch(0.54 0.112 75); --warn-hell: oklch(0.95 0.032 75); --warn-tief: oklch(0.42 0.088 75);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) { :root {
  --grund: oklch(0.2 0.016 248); --flaeche: oklch(0.24 0.022 248); --mulde: oklch(0.285 0.026 248); --linie: oklch(0.34 0.032 248);
  --tinte: oklch(0.96 0.008 248); --tinte-2: oklch(0.81 0.019 248); --tinte-3: oklch(0.7 0.024 248); --marke: oklch(0.75 0.11 205);
  --gut: oklch(0.73 0.13 158); --gut-hell: oklch(0.3 0.045 158); --gut-tief: oklch(0.84 0.098 158);
  --rot: oklch(0.7 0.16 27); --rot-hell: oklch(0.3 0.05 27); --rot-tief: oklch(0.84 0.1 27);
  --grau: oklch(0.62 0.02 248); --grau-hell: oklch(0.3 0.012 248); --grau-tief: oklch(0.82 0.015 248);
  --warn: oklch(0.73 0.128 75); --warn-hell: oklch(0.3 0.047 75); --warn-tief: oklch(0.84 0.092 75);
} }
* { box-sizing: border-box; }
body { margin: 0; font: 14.5px/1.45 "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif; background: var(--grund); color: var(--tinte); }
h1 { margin: 0; font-size: 21px; } h2 { margin: 0 0 10px; font-size: 15px; }
.zl { stroke: var(--tinte); } .zr { stroke: var(--marke); }
[hidden] { display: none !important; }
code { font-size: 12px; background: var(--mulde); padding: 0 4px; border-radius: 4px; word-break: break-all; }

.k-kopf { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.k-kopf b { font-size: 15.5px; }
.k-kopf .wer { margin-left: auto; font-size: 12.5px; color: var(--tinte-3); display: flex; gap: 10px; align-items: center; }
.k-kopf form { margin: 0; }
.k-inhalt { max-width: 1100px; margin: 0 auto; padding: 16px; display: grid; gap: 14px; }

.knopf { font: inherit; font-size: 13.5px; border-radius: 9px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte); padding: 8px 14px; cursor: pointer; }
.knopf.klein { font-size: 12px; padding: 4px 10px; }
.knopf.haupt { background: var(--marke); border-color: var(--marke); color: white; }
.knopf.gefahr { background: var(--rot); border-color: var(--rot); color: white; font-weight: 600; }
.knopf.gefahr-leise { color: var(--rot-tief); border-color: var(--rot); }
.knopf:disabled { opacity: .45; cursor: not-allowed; }
.zeile { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.lage { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--grau); background: color-mix(in oklab, var(--grau-hell) 60%, var(--flaeche)); }
.lage.ok { border-color: var(--gut); background: color-mix(in oklab, var(--gut-hell) 60%, var(--flaeche)); }
.lage.warnung { border-color: var(--warn); background: color-mix(in oklab, var(--warn-hell) 60%, var(--flaeche)); }
.lage.fehler { border-color: var(--rot); background: color-mix(in oklab, var(--rot-hell) 60%, var(--flaeche)); }
.lage .gross { font-size: 16px; font-weight: 650; } .lage .klein { font-size: 12.5px; color: var(--tinte-2); }
.lage .zeit { margin-left: auto; font-size: 12px; color: var(--tinte-3); white-space: nowrap; }

.ampeln { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.ampel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 9px 11px; display: grid; grid-template-columns: 12px 1fr; gap: 2px 8px; align-items: center; }
.ampel .p { width: 12px; height: 12px; border-radius: 50%; } .ampel .n { font-weight: 600; font-size: 13.5px; } .ampel .t { grid-column: 2; font-size: 12px; color: var(--tinte-2); }
.p.ok { background: var(--gut); } .p.warnung { background: var(--warn); } .p.fehler { background: var(--rot); } .p.aus { background: var(--grau-hell); border: 2px solid var(--grau); }

.aktionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.aktion { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; align-content: start; }
.aktion .n { font-weight: 650; } .aktion .t { font-size: 12.5px; color: var(--tinte-2); }
.aktion.gefahr { border-color: color-mix(in oklab, var(--rot) 55%, var(--linie)); }
.marke { display: inline-block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 5px; }
.m-warn { color: var(--warn-tief); background: var(--warn-hell); border: 1px solid var(--warn); }
.tresor { font-size: 12.5px; color: var(--tinte-2); background: var(--flaeche); border: 1px dashed var(--linie); border-radius: 10px; padding: 9px 12px; }

.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.tabelle { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; } td, th { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { color: var(--tinte-3); font-weight: 500; } td.z { color: var(--tinte-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

.schritte { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 5px; }
.schritte li { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: center; font-size: 13.5px; padding: 6px 10px; border-radius: 8px; background: var(--flaeche); border: 1px solid var(--linie); }
.schritte li .s { font-size: 11.5px; color: var(--tinte-3); }
.schritte li.fertig .i { color: var(--gut); } .schritte li.jetzt { border: 2px solid var(--marke); } .schritte li.offen, .schritte li.uebersprungen { color: var(--tinte-3); }
.schritte li.fehler { border: 2px solid var(--rot); } .schritte li.fehler .i { color: var(--rot); }
pre.ausgabe { margin: 0 0 10px; max-height: 320px; overflow: auto; font-size: 11.5px; line-height: 1.4; background: var(--mulde); border-radius: 8px; padding: 8px 10px; white-space: pre-wrap; word-break: break-word; }

.feld { display: grid; gap: 4px; } .feld label { font-size: 12.5px; color: var(--tinte-2); }
.feld input, select { font: inherit; font-size: 16px; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte); }
.feld input.code { letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.wahl { display: grid; gap: 8px; }
.wahl label { display: grid; grid-template-columns: 20px 1fr; gap: 4px 8px; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); font-size: 13.5px; cursor: pointer; }
.wahl label:has(input:checked) { border: 2px solid var(--marke); }
.wahl small { grid-column: 2; color: var(--tinte-3); font-size: 12px; }
.stufen { display: flex; gap: 6px; font-size: 12px; color: var(--tinte-3); } .stufen span { padding: 2px 8px; border-radius: 999px; background: var(--mulde); }
.stufen span.an { background: var(--marke); color: white; }
.meldung { color: var(--rot-tief); font-size: 13px; margin: 0; min-height: 1em; }

dialog { border: 1px solid var(--linie); border-radius: 14px; background: var(--grund); color: var(--tinte); padding: 16px; width: min(440px, calc(100vw - 24px)); }
dialog::backdrop { background: rgb(0 0 0 / .45); }
dialog form, .stufe { display: grid; gap: 12px; }

.anmelde-seite { min-height: 100vh; display: grid; place-items: center; }
.anmelden { width: min(360px, calc(100vw - 32px)); display: grid; gap: 14px; padding: 24px 0; }
.anmelden .zeichen { display: flex; justify-content: center; } .anmelden h1 { text-align: center; }
.anmelden form { display: grid; gap: 12px; }

@media (max-width: 640px) { .k-kopf .ablauf { display: none; } .lage { flex-wrap: wrap; } .lage .zeit { margin-left: 0; } }