/*
 * Die Gestalt des Betreiber-Dashboards (E58, Stufe 2).
 *
 * Eigene Datei statt eines <style>-Blocks, seit die Seite mehr kann als
 * drei Ampeln: sonst waere die Gestalt zwischen der Struktur verstreut.
 * Keine Schriftart von aussen - system-ui ist da, wenn sonst nichts mehr
 * laedt, und das ist hier die Anforderung.
 *
 * Hell und dunkel ueber prefers-color-scheme, ohne Schalter: dieses
 * Werkzeug macht man auf, sieht nach und macht es wieder zu.
 */

:root {
  --grund: #14171c; --karte: #1c2027; --rand: #2b313b; --rand-stark: #3a424f;
  --schrift: #e7eaef; --leise: #9aa3b0;
  --gut: #56c271; --warn: #e3b341; --schlecht: #e5534b; --akzent: #6aa9f4;
  --radius: 10px;
}
@media (prefers-color-scheme: light) {
  :root {
    --grund: #f5f6f8; --karte: #ffffff; --rand: #dde1e7; --rand-stark: #c3cad3;
    --schrift: #1b1f26; --leise: #5c6673;
    --gut: #1a7f37; --warn: #9a6700; --schlecht: #cf222e; --akzent: #0b62d1;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--grund); color: var(--schrift);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
header {
  border-bottom: 1px solid var(--rand); background: var(--karte);
  position: sticky; top: 0; z-index: 5;
}
.kopfzeile {
  max-width: 880px; margin: 0 auto; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.wer { color: var(--leise); font-size: 13px; display: flex; gap: 10px;
       align-items: center; }
main { max-width: 880px; margin: 0 auto; padding: 8px 16px 64px; }

h2 {
  font-size: 13px; margin: 28px 0 10px; color: var(--leise);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}
.zaehler { color: var(--leise); text-transform: none; letter-spacing: 0; }

.karte {
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 16px; margin-bottom: 10px;
}
.karte p { margin: 0; }
.titel { font-weight: 600; margin-bottom: 4px !important; }
.leise { color: var(--leise); font-size: 13px; }

.ampel { display: flex; align-items: center; gap: 12px; }
.ampel + .ampel { margin-top: 14px; }
.punkt { width: 12px; height: 12px; border-radius: 50%; flex: none;
         background: var(--leise); }
.punkt[data-stand="gut"] { background: var(--gut); }
.punkt[data-stand="warn"] { background: var(--warn); }
.punkt[data-stand="schlecht"] { background: var(--schlecht); }

.zahlen {
  display: grid; gap: 10px; margin-bottom: 10px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.zahl {
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 12px 14px;
}
.zahl b { display: block; font-size: 22px; font-weight: 600;
          font-variant-numeric: tabular-nums; }
.zahl span { color: var(--leise); font-size: 12px; }
.zahl[data-achtung="ja"] b { color: var(--warn); }

.reihe { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.reihe.suche { margin: 0 0 10px; }
input[type=password], input[type=search], input[type=text], input[type=date],
input[type=number] {
  padding: 8px 11px; background: var(--grund); color: var(--schrift);
  border: 1px solid var(--rand-stark); border-radius: 8px; font: inherit;
  min-width: 0;
}
input[type=password], input[type=search], input[type=text] { flex: 1 1 200px; }
input[type=number] { width: 72px; }

button, .knopf {
  padding: 8px 15px; border-radius: 8px; border: 1px solid transparent;
  background: var(--akzent); color: #fff; font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none; display: inline-block;
}
button:hover, .knopf:hover { filter: brightness(1.08); }
button:disabled { opacity: .5; cursor: default; filter: none; }
button.leise-knopf, button.rand {
  background: transparent; color: var(--leise); border-color: var(--rand-stark);
  font-weight: 400;
}
button.rand { color: var(--schrift); }

.hinweis { font-size: 13px; color: var(--leise); margin: 6px 0 0; }
.hinweis[data-art="schlecht"] { color: var(--schlecht); }
.hinweis[data-art="gut"] { color: var(--gut); }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  background: var(--grund); padding: 1px 5px; border-radius: 4px;
  border: 1px solid var(--rand);
}

/* --- Betrieb und Anfrage --------------------------------------------- */
.zeile-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.zeile-kopf b { font-size: 15px; }
.beiwerk { color: var(--leise); font-size: 12px; }

.haken {
  display: grid; gap: 6px 14px; margin: 12px 0 0;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.haken label {
  display: flex; align-items: center; gap: 8px; font-size: 14px;
  padding: 3px 0;
}
.haken input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--akzent); }
.haken .abgelaufen { color: var(--warn); font-size: 12px; }

details > summary {
  cursor: pointer; list-style: none; padding: 2px 0;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "▸ "; color: var(--leise); }
details[open] > summary::before { content: "▾ "; }