/* Kontor — Designsystem nach CLAUDE.md und E23.
   Zwei gepflegte Fassungen: dunkel ist die Identität und der Ausgangszustand,
   hell die gleichwertige Tageslichtfassung. Keine Umkehrung, eigene Stufen. */

:root {
  --ground:#141210;  --surface:#1c1917;  --surface-2:#232019;
  --hairline:#302a25; --rule:#3f372f;
  --ink:#f4efe6;     --ink-2:#a89f92;    --ink-3:#7f766c;
  --copper:#c2703d;  --copper-dim:#7d4526;  --btn-ink:#17110c;  --copper-hover:#d47f48;
  --s-world:#3987e5; --s-players:#199e70;
  --good:#0ca30c;    --warning:#fab219;  --critical:#d03b3b;
  --aus:.35;

  --mono: ui-monospace,"JetBrains Mono","SFMono-Regular",Menlo,"DejaVu Sans Mono",Consolas,monospace;
  --sans: system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
}

:root[data-thema="hell"] {
  --ground:#f0ebe2;  --surface:#faf7f1;  --surface-2:#f4efe5;
  --hairline:#e0d7ca; --rule:#c4b8a6;
  --ink:#1c1917;     --ink-2:#57503f;    --ink-3:#6e6455;
  --copper:#b8431a;  --copper-dim:#d99a72;  --btn-ink:#fff6ef;  --copper-hover:#9c3612;
  --s-world:#215ca8; --s-players:#00794a;
  --good:#1a7a1a;    --warning:#7a5100;  --critical:#a82020;
  --aus:.55;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

/* ─── Kopfzeile, klebend (E27) ─────────────────────────────── */

.kopf {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .7rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}

.marke {
  font-family: var(--mono);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--copper);
}

.thema {
  font-family: var(--mono);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: .3rem .6rem;
  cursor: pointer;
}
.thema:hover { color: var(--copper-hover); border-color: var(--copper-dim); }

/* ─── Inhalt ───────────────────────────────────────────────── */

main {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

.tafel {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 1.1rem 1.1rem 1rem;
}

.tafelkopf {
  margin: 0 0 .9rem;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--copper);
}

.werte {
  display: grid;
  grid-template-columns: minmax(6.5rem, auto) 1fr;
  gap: .05rem 1rem;
  margin: 0;
}

.werte dt {
  font-size: .82rem;
  color: var(--ink-3);
  padding: .35rem 0;
  border-top: 1px solid var(--hairline);
}
.werte dd {
  margin: 0;
  padding: .35rem 0;
  border-top: 1px solid var(--hairline);
  overflow-wrap: anywhere;
}
.werte dt:first-of-type, .werte dd:first-of-type { border-top: 0; }

/* Alle Zahlen in Mono mit gleichbreiten Ziffern. */
.zahl {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.klein { font-size: .78rem; color: var(--ink-2); }

.lage {
  margin: .9rem 0 0;
  padding-top: .7rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--ink-3);
}
.lage[data-zustand="gut"]    { color: var(--good); }
.lage[data-zustand="fehler"] { color: var(--critical); }

/* ─── Fußnote ──────────────────────────────────────────────── */

.fuss {
  margin-top: 1.4rem;
  color: var(--ink-3);
  font-size: .8rem;
}
.fuss p { margin: 0 0 .6rem; }
.fuss strong { color: var(--ink-2); font-weight: 600; }

/* ─── Handybreite (390 px) ─────────────────────────────────── */

@media (max-width: 30rem) {
  main { padding: 1rem .8rem 2rem; }
  .tafel { padding: .9rem .8rem; }
  /* Zweispaltig bricht hier um und schiebt die Werte auseinander —
     untereinander bleibt jede Zahl an ihrer Beschriftung. */
  .werte { grid-template-columns: 1fr; gap: 0; }
  .werte dd { padding-top: 0; border-top: 0; }
  .werte dt { padding-bottom: .1rem; }
  .werte dd:first-of-type { border-top: 0; }
}