/* KI-Zentrale – schlicht, mobil brauchbar, Tag/Nacht per prefers-color-scheme. Kein externes CSS/JS. */
:root {
  --bg: #f4f6f8; --flaeche: #ffffff; --flaeche2: #eef1f4; --text: #1b2127; --leise: #58636f; --linie: #d5dbe1;
  --akzent: #1c5fc2; --akzent-text: #ffffff; --ok: #17803d; --warn: #a65a00; --fehler: #b42318; --balken: #3b82f6; --balken-leer: #dbe4ef;
  --radius: 10px; --abstand: 16px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1317; --flaeche: #171c22; --flaeche2: #1e252c; --text: #e8ecf0; --leise: #99a4b0; --linie: #2e3740;
    --akzent: #6aa6ff; --akzent-text: #0b1220; --ok: #4cc17a; --warn: #f0a24a; --fehler: #ff7b72; --balken: #5b9cff; --balken-leer: #26303b;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.02rem; }
a { color: var(--akzent); }
p { margin: 0 0 .75em; }
.leise, .meta { color: var(--leise); font-size: .9rem; }

.kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px var(--abstand); background: var(--flaeche); border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 5; }
.marke { font-weight: 700; text-decoration: none; color: var(--text); }
.kopf nav { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; }
.kopf nav a { padding: 8px 12px; border-radius: 8px; text-decoration: none; color: var(--text); min-height: 40px; display: inline-flex; align-items: center; }
.kopf nav a[aria-current="page"] { background: var(--akzent); color: var(--akzent-text); }
.abmelden { margin: 0; }

main { max-width: 72rem; margin: 0 auto; padding: var(--abstand); }
main.schmal { max-width: 26rem; padding-top: 12vh; }
.schlicht main { max-width: 26rem; padding-top: 10vh; }

.karte, section.bereich { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: var(--abstand); margin: 0 0 var(--abstand); }
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 12px; margin-bottom: var(--abstand); }
.kennzahl { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px 14px; min-width: 0; }
.kennzahl .wert { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kennzahl .name { color: var(--leise); font-size: .85rem; }
.kennzahl .zusatz { color: var(--leise); font-size: .8rem; }
progress, meter { width: 100%; height: 14px; accent-color: var(--akzent); }
.zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.zeile.gross { gap: 12px; }
.abstand-oben { margin-top: var(--abstand); }

.tabelle { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 var(--abstand); }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--linie); white-space: nowrap; }
th { color: var(--leise); font-weight: 600; font-size: .85rem; }
td.zahl, th.zahl { text-align: right; }
tbody tr:hover { background: var(--flaeche2); }

.formular, form.raster { display: grid; gap: 12px; max-width: 34rem; }
.feld { display: grid; gap: 4px; font-size: .95rem; }
.feld .hilfe { color: var(--leise); font-size: .82rem; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  font: inherit; color: var(--text); background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: 9px 11px; min-height: 44px; width: 100%; max-width: 100%;
}
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--akzent); }
.haken { display: flex; align-items: center; gap: 10px; min-height: 36px; }
fieldset { border: 1px solid var(--linie); border-radius: 8px; padding: 10px 14px; margin: 0; }
legend { padding: 0 6px; color: var(--leise); font-size: .9rem; }

.knopf, button { font: inherit; cursor: pointer; min-height: 44px; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--akzent); background: var(--akzent); color: var(--akzent-text); }
.knopf.leise, button.leise { background: transparent; color: var(--text); border-color: var(--linie); }
.knopf.gefahr, button.gefahr { background: transparent; color: var(--fehler); border-color: var(--fehler); }
button[disabled] { opacity: .55; cursor: progress; }

.meldung { padding: 10px 14px; border-radius: 8px; border: 1px solid var(--linie); background: var(--flaeche2); margin: 0 0 12px; }
.meldung.ok { border-color: var(--ok); color: var(--ok); }
.meldung.fehler { border-color: var(--fehler); color: var(--fehler); }
.meldung.warn { border-color: var(--warn); color: var(--warn); }
.hinweis { color: var(--leise); }
.laden { color: var(--leise); }
.marke-pause { font-weight: 700; }

.reiter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--abstand); }
.reiter a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linie); text-decoration: none; color: var(--text); background: var(--flaeche); min-height: 40px; display: inline-flex; align-items: center; }
.reiter a[aria-current="page"] { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }

.person { border: 1px solid var(--linie); border-radius: 8px; padding: 12px; margin: 0 0 10px; background: var(--flaeche); }
.person h3 { margin-bottom: 2px; }
.liste { list-style: none; margin: 0; padding: 0; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
.geheim { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }

svg.diagramm { width: 100%; height: auto; display: block; }
svg.diagramm .balken { fill: var(--balken); }
svg.diagramm .leer { fill: var(--balken-leer); }
svg.diagramm text { fill: var(--leise); font-size: 11px; }
svg.diagramm line { stroke: var(--linie); }

@media (max-width: 40rem) {
  main { padding: 12px; }
  .kopf { padding: 8px 12px; gap: 4px 12px; }
  .marke { order: 1; }
  .abmelden { order: 2; margin-left: auto; }
  .abmelden .knopf { min-height: 38px; padding: 4px 12px; }
  .kopf nav { order: 3; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .kopf nav a { white-space: nowrap; padding: 6px 8px; min-height: 38px; font-size: .95rem; }
  th, td { padding: 6px 8px; }
  .kennzahl .wert { font-size: 1.3rem; }
}