/* nono — Betreiber-Dashboard
   Hell wie die Website, aber dicht wie ein Werkzeug: viele Zeilen auf einen
   Blick, keine Luft zum Scrollen. Farben aus web/landing/style.css.

   Zu den Zustandsfarben, das ist hier die eigentliche Arbeit:
   Auf dunklem Grund leuchtet jede Signalfarbe von allein. Auf Weiß tut sie
   das nicht — und die Apple-Systemfarben Grün #34c759 und Orange #ff9500
   haben zueinander ein Kontrastverhältnis von 1,01:1. Sie unterscheiden sich
   praktisch nur im Farbton. In den schmalen Balken der Verlaufsgrafik wäre
   eine Störung damit von „alles in Ordnung" kaum zu unterscheiden, und für
   eine Rot-Grün-Schwäche gar nicht.

   Deshalb tragen die Zustände hier ZWEI Unterschiede, nicht einen: Farbton
   und Helligkeit. Die Helligkeitsleiter ist absichtlich monoton — je
   schlimmer, desto dunkler:

       Trog 242  >  in Ordnung 180  >  Lücke 155  >  Warnung 141  >  Störung 94

   In Graustufen gedruckt, bei Sonne auf dem Bildschirm oder mit jeder Form
   von Farbenblindheit bleibt der Alarm der dunkelste Balken der Zeile.
   Zusätzlich hat die Lücke ein Streifenmuster statt einer Fläche — zwei
   verschiedene Fehler dürfen nicht gleich aussehen.

   Alle Textfarben liegen über 4,5:1 gegenüber ihrem Grund (WCAG AA). */

:root {
  /* Marke (identisch mit der Website) */
  --ink:      #111011;   /* Markenschwarz aus dem Logo */
  --ink-2:    #4a4a4d;
  --linie:    #e6e6e8;
  --grund:    #ffffff;
  --grund-2:  #f5f5f7;
  --akzent:   #007aff;   /* Systemblau — für Flächen und Fokus */

  /* Flächen des Werkzeugs */
  --bg:       var(--grund-2);  /* Seite: leicht grau, damit Tafeln Tafeln sind */
  --surface:  var(--grund);    /* Tafeln, Tabellen, Karten */
  --surface2: #ececed;         /* Zeilen-Hover, Schienen von Umschaltern */
  --line:     #e3e3e6;
  --einleger: #f2f2f4;         /* Trog unter Balken und Verlaufsgrafiken */
  --leer:     #e4e4e8;         /* Balken ohne Wert */

  /* Text. --muted ist bewusst dunkler als das Marken-Grau #86868b:
     das erreicht auf Weiß nur 3,6:1, und im Dashboard trägt die graue
     Schrift echte Information (Zeitstempel, „zuletzt gesehen"). */
  --muted:    #6e6e73;

  /* Zustände: Textfassung (kontrastreich) und Füllfassung (Flächen) */
  --ok:        #16713a;  --ok-fuell:   #5ec97f;  --ok-bg:   #e3f7ea;  --ok-text:   #0e6b33;
  --warn:      #8f4e00;  --warn-fuell: #cc7a00;  --warn-bg: #fff0da;  --warn-text: #7d4400;
  --bad:       #c9000f;  --bad-fuell:  #c00011;  --bad-bg:  #ffe4e1;  --bad-text:  #b80011;
  --luecke:    #9a9aa2;  --luecke-bg:  #dedee3;
  --akzent-text: #0069d9;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
          Inter, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font);
  font-size:14px; -webkit-font-smoothing:antialiased; letter-spacing:-.006em; }
a { color:var(--akzent-text); text-decoration:none; }
a:hover { text-decoration:underline; }
.hidden { display:none !important; }

/* Login */
.login { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login form { background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:34px; width:100%; max-width:380px; box-shadow:0 1px 3px rgba(17,16,17,.05); }
.login .marke { display:block; margin:0 0 8px; }
.login .marke img { height:26px; display:block; }
.login p { margin:0 0 24px; color:var(--muted); font-size:.9rem; }
label { display:block; font-size:.82rem; color:var(--muted); margin:14px 0 6px; }
input, select { width:100%; background:var(--grund); border:1px solid #d7d7db; color:var(--ink);
  padding:11px 13px; border-radius:9px; font-size:.95rem; font-family:inherit; }
select { cursor:pointer; }
input:focus, select:focus { outline:none; border-color:var(--akzent);
  box-shadow:0 0 0 3px rgba(0,122,255,.18); }
button { background:var(--ink); color:#fff; border:0; padding:11px 20px; border-radius:9px;
  font-weight:600; cursor:pointer; font-size:.92rem; font-family:inherit; }
button:hover { opacity:.86; }
button.ghost { background:var(--surface); color:var(--ink); border:1px solid #d7d7db; }
button.ghost:hover { background:var(--surface2); opacity:1; }
button:disabled { opacity:.4; cursor:not-allowed; }
.err { color:var(--bad); font-size:.85rem; margin-top:14px; min-height:1.2em; }

/* Shell */
.top { border-bottom:1px solid var(--line); background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(20px);
  display:flex; align-items:center; justify-content:space-between; padding:0 24px; height:60px;
  position:sticky; top:0; z-index:10; }
.top .marke { display:flex; align-items:center; }
.top .marke img { height:18px; display:block; }
.top nav { display:flex; gap:2px; }
.top nav a { color:var(--muted); font-weight:500; padding:8px 14px; border-radius:8px;
  font-size:.92rem; text-decoration:none; }
.top nav a:hover { color:var(--ink); text-decoration:none; background:var(--grund-2); }
.top nav a.on { background:var(--surface2); color:var(--ink); }
.top .who { color:var(--muted); font-size:.85rem; display:flex; gap:14px; align-items:center; }
main { padding:26px 24px 80px; max-width:1500px; margin:0 auto; }

/* Kennzahlen */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:26px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 18px; }
.card b { display:block; font-size:1.75rem; letter-spacing:-.03em; line-height:1.2; }
.card span { color:var(--muted); font-size:.8rem; }
.card.accent b { color:var(--akzent-text); }
.card.warn b { color:var(--warn); }
.card.bad b { color:var(--bad); }

h1.titel { font-size:1.35rem; margin:0 0 4px; letter-spacing:-.022em; font-weight:650; }
h2 { font-size:1.05rem; margin:26px 0 14px; letter-spacing:-.015em; font-weight:650; }
h2:first-child { margin-top:0; }
h3 { font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted);
  margin:0 0 12px; font-weight:600; }

.bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:12px; flex-wrap:wrap; }
.bar h2 { margin:0; }
.werkzeuge { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.werkzeuge input { max-width:260px; }
.werkzeuge select { width:auto; padding:9px 11px; font-size:.88rem; }

/* Brotkrumen und Kopfzeile der Detailansichten */
.crumb { color:var(--muted); font-size:.85rem; margin-bottom:12px; display:flex;
  gap:8px; align-items:center; flex-wrap:wrap; }
.crumb a { color:var(--muted); }
.crumb a:hover { color:var(--akzent-text); }
.kopf { display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.kopf .unter { color:var(--muted); font-size:.88rem; margin-top:4px; }

/* Tabellen */
table { width:100%; border-collapse:collapse; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; overflow:hidden; }
th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); padding:10px 14px; border-bottom:1px solid var(--line); font-weight:600;
  white-space:nowrap; background:var(--grund-2); }
th.sort { cursor:pointer; user-select:none; }
th.sort:hover { color:var(--ink); }
th.sort.an { color:var(--akzent-text); }
td { padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
tr:last-child td { border-bottom:0; }
tbody tr:hover td { background:var(--grund-2); }
tr.klick { cursor:pointer; }
.mono { font-family:var(--mono); font-size:.85rem; }
.dim { color:var(--muted); }
.nowrap { white-space:nowrap; }
.rechts { text-align:right; }

.pill { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px;
  font-size:.78rem; font-weight:600; background:var(--surface2); color:var(--ink-2);
  white-space:nowrap; }
.pill.ok   { background:var(--ok-bg);   color:var(--ok-text); }
.pill.bad  { background:var(--bad-bg);  color:var(--bad-text); }
.pill.warn { background:var(--warn-bg); color:var(--warn-text); }
.dot { width:7px; height:7px; border-radius:50%; background:currentColor; }

.empty { padding:34px; text-align:center; color:var(--muted); background:var(--surface);
  border:1px solid var(--line); border-radius:12px; }
.new { background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:20px; margin-top:20px; }
.new code { display:block; font-family:var(--mono); background:var(--einleger); padding:10px 12px;
  border-radius:8px; margin:6px 0; font-size:.84rem; word-break:break-all; white-space:pre-wrap; }

.merken { display:flex; align-items:center; gap:9px; margin-top:18px;
  color:var(--muted); font-size:.88rem; cursor:pointer; }
.merken input { width:auto; accent-color:var(--akzent); cursor:pointer; }

/* Tafeln (Panels) */
.tafeln { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; }
.tafel { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 18px; }
.tafel.weit { grid-column:1/-1; }

/* Beschreibungsliste Schlüssel/Wert */
dl.kv { margin:0; display:grid; grid-template-columns:minmax(120px,auto) 1fr; gap:7px 16px; }
dl.kv dt { color:var(--muted); font-size:.82rem; }
dl.kv dd { margin:0; font-size:.88rem; word-break:break-word; }

/* Verlaufsgrafik Gesundheit — siehe Helligkeitsleiter im Kopf der Datei */
.spark { display:grid; grid-template-columns:190px 1fr 92px; align-items:center;
  gap:12px; padding:7px 0; border-bottom:1px solid var(--line); }
.spark:last-child { border-bottom:0; }
.spark .name { color:var(--muted); font-size:.8rem; line-height:1.35; }
.spark .wert { font-size:.82rem; text-align:right; font-family:var(--mono); }
.streifen { display:flex; gap:1px; height:30px; align-items:flex-end;
  background:var(--einleger); border:1px solid var(--line); border-radius:5px;
  padding:2px; overflow:hidden; }
.streifen i { flex:1 1 0; min-width:1px; border-radius:1px; background:var(--leer); display:block; }
.streifen i.ok   { background:var(--ok-fuell); }
.streifen i.warn { background:var(--warn-fuell); }
.streifen i.bad  { background:var(--bad-fuell); }
/* Kein Heartbeat: volle Höhe und schraffiert. Das Streifenmuster ist der
   zweite Unterschied neben der Helligkeit — eine Lücke ist ein anderer
   Fehler als eine Störung und darf nicht wie eine aussehen. */
.streifen i.luecke { height:100%;
  background:repeating-linear-gradient(45deg,
    var(--luecke) 0 3px, var(--luecke-bg) 3px 6px); }
.achse { display:flex; justify-content:space-between; color:var(--muted);
  font-size:.74rem; margin-top:4px; }

/* Balkendiagramm für Zähler */
.balken { display:flex; gap:3px; align-items:flex-end; height:90px;
  background:var(--einleger); border:1px solid var(--line); border-radius:8px; padding:8px; }
.balken .saeule { flex:1 1 0; display:flex; flex-direction:column; justify-content:flex-end;
  height:100%; min-width:2px; }
.balken .saeule i { display:block; background:var(--leer); border-radius:2px 2px 0 0; }
.balken .saeule i.haupt { background:var(--akzent); }
.balken .saeule i.roh { background:var(--bad-fuell); border-radius:0 0 2px 2px; }

/* Verteilung als Liste mit Anteilsbalken */
.verteilung { display:grid; gap:8px; }
.verteilung .zeile { display:grid; grid-template-columns:150px 1fr 74px; gap:12px; align-items:center; }
.verteilung .schiene { background:var(--einleger); border-radius:999px; height:9px; overflow:hidden; }
.verteilung .schiene b { display:block; height:100%; background:var(--akzent); border-radius:999px; }
.verteilung .schiene b.bad { background:var(--bad-fuell); }
.verteilung .schiene b.warn { background:var(--warn-fuell); }
.verteilung .schiene b.grau { background:var(--luecke); }
.verteilung .zahl { text-align:right; font-family:var(--mono); font-size:.84rem; }

/* Segmentierte Umschalter */
.segmente { display:inline-flex; background:var(--surface2); border-radius:9px; padding:3px; gap:2px; }
.segmente button { background:transparent; color:var(--muted); padding:6px 12px;
  font-size:.83rem; border-radius:7px; font-weight:550; }
.segmente button.on { background:var(--surface); color:var(--ink);
  box-shadow:0 1px 2px rgba(17,16,17,.12); }
.segmente button:hover { opacity:1; color:var(--ink); }

/* Seitenweise Blättern */
.seiten { display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:12px; color:var(--muted); font-size:.84rem; flex-wrap:wrap; }
.seiten .knoepfe { display:flex; gap:8px; }
.seiten button { padding:7px 14px; font-size:.85rem; }

/* Hinweise */
.hinweis { background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--akzent);
  border-radius:8px; padding:12px 16px; color:var(--ink-2); font-size:.85rem; margin:14px 0;
  line-height:1.5; }
.hinweis.warn { border-left-color:var(--warn-fuell); background:var(--warn-bg);
  border-color:#f0dcc0; color:var(--warn-text); }
.hinweis.bad { border-left-color:var(--bad-fuell); background:var(--bad-bg);
  border-color:#f5cdc9; color:var(--bad-text); }
.hinweis strong { color:var(--ink); }
.hinweis.warn strong { color:#5f3400; }
.hinweis.bad strong { color:#8f000d; }

.laedt { padding:40px; text-align:center; color:var(--muted); }

/* ── Hilfsklassen
   Das Dashboard läuft unter einer strengen Content-Security-Policy ohne
   'unsafe-inline' für Stile. style-Attribute im gelieferten HTML würde der
   Browser verwerfen — deshalb steht hier alles, was sonst inline stünde.
   Maße (Balkenhöhen, Anteilsbreiten) reisen als data-h/data-w im Markup und
   werden nach dem Zeichnen per Skript gesetzt, siehe masseSetzen(). */
.rot   { color:var(--bad); }
.gelb  { color:var(--warn); }
.gruen { color:var(--ok); }
.eng   { margin:0; }
.eng-unten { margin-bottom:0; }
.klein  { font-size:.8rem; }
.winzig { font-size:.78rem; }
.voll   { width:100%; }
.schmal { max-width:100px; }
.fliess { max-width:64ch; margin:8px 0 0; }
.unterzeile { margin:0 0 20px; }
.luft-oben { margin-top:26px; }
.luft-oben-klein { margin-top:18px; }
h3.luft-oben-klein { margin-top:22px; }
.fussnote { margin:10px 0 0; font-size:.82rem; color:var(--muted); line-height:1.5; }
.fussnote.weit { margin:14px 0 0; }
.fussnote strong { color:var(--ink); }

/* ── Rückfrage vor gefährlichen Aktionen */
.modal-hg { position:fixed; inset:0; background:rgba(17,16,17,.38); display:grid;
  place-items:center; padding:24px; z-index:100; }
.modal { background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:24px; width:100%; max-width:520px; max-height:86vh; overflow:auto;
  box-shadow:0 24px 60px rgba(17,16,17,.22); }
.modal-titel { font-size:1.05rem; text-transform:none; letter-spacing:-.015em;
  color:var(--ink); margin:0 0 16px; font-weight:650; }
.modal .kv { margin-bottom:16px; }
.modal-fuss { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }

/* Knopf für alles, was man nicht aus Versehen anklicken darf. */
button.gefahr { background:var(--bad); color:#fff; }
button.gefahr:hover { opacity:.86; }

/* Ankreuzfelder in Werkzeugleisten */
.ankreuz { display:inline-flex; align-items:center; gap:7px; margin:0;
  color:var(--muted); font-size:.85rem; cursor:pointer; white-space:nowrap; }
.ankreuz input { width:auto; accent-color:var(--akzent); cursor:pointer; }

/* Formular für ein neues Release */
.formraster { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:2px 16px; }
.formraster label { margin-top:0; }
.formraster label.weit { grid-column:1/-1; }
textarea { width:100%; background:var(--grund); border:1px solid #d7d7db; color:var(--ink);
  padding:10px 13px; border-radius:9px; font-size:.9rem; font-family:inherit; resize:vertical; }
textarea:focus { outline:none; border-color:var(--akzent);
  box-shadow:0 0 0 3px rgba(0,122,255,.18); }

/* Sehr schmale Segmentschalter, z. B. der Rollout-Anteil in der Tabelle */
.segmente.klein-seg button { padding:4px 8px; font-size:.76rem; }

/* Tafeln dürfen sich schachteln (Firmware: installiert | neuestes) */
.tafel .tafeln { gap:20px; }
.tafel .tafeln > div { min-width:0; }

/* ── Formulare im Regelwerk und im Bestätigungsdialog ──────────────── */
/* `label` traegt schon Abstand und Schriftgroesse (Zeile 73). `.feld` fasst
   Beschriftung und Eingabe zu einer Einheit zusammen, damit mehrere
   nebeneinander passen, ohne dass die Abstaende springen. */
.feld { display:block; margin:14px 0 0; }
.feld > span { display:block; font-size:.82rem; color:var(--muted); margin:0 0 6px; }
.feld input, .feld select { margin:0; }

/* Mehrere Felder in einer Zeile, bei schmalem Fenster untereinander. */
.formreihe { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:0 16px; }

.knopfreihe { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }

/* Im Dialog sitzt das Feld zwischen Text und Knopfleiste. */
.modal .feld { margin-top:16px; }