/* Leitstand v0: mobil zuerst, hell und dunkel, Farbe nie allein (immer mit Wort). */
:root {
  --grund: #f6f5f2; --flaeche: #ffffff; --text: #1d1f23; --leise: #5d6470; --linie: #e3e1dc;
  --gruen: #1f8a4c; --gelb: #b88a00; --orange: #d0631b; --rot: #c62f2f; --grau: #8a909a;
  --gruen-g: #e7f4ec; --gelb-g: #fbf3dc; --orange-g: #fcebdf; --rot-g: #fbe5e5; --grau-g: #eff0f2;
  --radius: 14px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #121417; --flaeche: #1b1e23; --text: #eceef1; --leise: #a1a8b3; --linie: #2b3038;
    --gruen: #4cc27e; --gelb: #e2b93b; --orange: #f08a4b; --rot: #f06464; --grau: #8a909a;
    --gruen-g: #15291e; --gelb-g: #2b2512; --orange-g: #2e1d12; --rot-g: #2f1616; --grau-g: #22262c;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 0 16px calc(24px + env(safe-area-inset-bottom));
}
main, .kopf, .hinweis, .fuss, #pausen { max-width: 760px; margin-left: auto; margin-right: auto; }
.kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 20px 0 12px; }
h1 { font-size: 1.6rem; margin: 0; letter-spacing: -0.01em; }
.unterzeile { margin: 2px 0 0; color: var(--leise); font-size: .9rem; }
.live { margin: 0; font-size: .85rem; color: var(--leise); display: flex; align-items: center; gap: 6px; text-align: right; max-width: 55%; }
.live .punkt { background: var(--grau); }
.live[data-zustand="ok"] .punkt { background: var(--gruen); animation: puls 2.4s ease-in-out infinite; }
.live[data-zustand="weg"] .punkt { background: var(--rot); }
@keyframes puls { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .live .punkt { animation: none !important; } }

.hinweis { background: var(--gelb-g); border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; margin-top: 8px; margin-bottom: 8px; font-size: .95rem; }
.hinweis.fehler { background: var(--rot-g); }
.hinweis.pause { background: var(--orange-g); font-weight: 600; }

section { margin-top: 28px; }
h2 { font-size: 1.15rem; margin: 0 0 10px; }
h3 { font-size: 1rem; margin: 0; }
.summe { margin: -4px 0 10px; color: var(--leise); }

.punkt { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--grau); }
.f-gruen .punkt, .punkt.f-gruen { background: var(--gruen); }
.f-gelb .punkt, .punkt.f-gelb { background: var(--gelb); }
.f-orange .punkt, .punkt.f-orange { background: var(--orange); }
.f-rot .punkt, .punkt.f-rot { background: var(--rot); }

.kacheln { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .kacheln { grid-template-columns: 1fr 1fr; } }
.kachel { background: var(--flaeche); border: 1px solid var(--linie); border-left: 5px solid var(--grau); border-radius: var(--radius); padding: 12px 14px; }
.kachel.f-gruen { border-left-color: var(--gruen); }
.kachel.f-gelb { border-left-color: var(--gelb); }
.kachel.f-orange { border-left-color: var(--orange); }
.kachel.f-rot { border-left-color: var(--rot); background: var(--rot-g); }
.kachel-kopf { display: flex; align-items: center; gap: 8px; }
.zustand { margin: 4px 0 2px; font-weight: 650; font-size: 1.05rem; }
.satz { margin: 0; }
.kachel .satz, .nebensatz { color: var(--leise); font-size: .92rem; }

.liste { list-style: none; margin: 0; padding: 0; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.zeile, .leer { padding: 11px 14px; border-top: 1px solid var(--linie); }
.zeile:first-child, .leer:first-child { border-top: 0; }
.leer { color: var(--leise); }
.zeile-kopf { display: flex; align-items: center; gap: 8px; }
.titel { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.mandant { margin-left: auto; font-size: .8rem; color: var(--leise); background: var(--grau-g); border-radius: 999px; padding: 1px 9px; white-space: nowrap; }
.zeile > .satz { margin: 3px 0 0 19px; }
.nebensatz { margin: 2px 0 0 19px; }
.zeile.f-rot > .satz { color: var(--rot); font-weight: 600; }
.kompakt .zeile { padding-top: 8px; padding-bottom: 8px; }

.erklaer { margin-top: 8px; color: var(--leise); font-size: .93rem; }
.erklaer summary { cursor: pointer; color: var(--text); font-weight: 550; padding: 11px 0; }
.erklaer p { margin: 0 0 4px; }

.fuss { margin-top: 32px; color: var(--leise); font-size: .85rem; }
/* Anmeldung und Abmelden */
.anmelden { max-width: 420px; }
.knopf { font: inherit; font-weight: 600; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--linie);
  background: var(--text); color: var(--grund); width: 100%; margin: 8px 0; cursor: pointer; }
.knopf:disabled { opacity: .5; cursor: default; }
.leise-knopf { font: inherit; font-size: .85rem; background: none; border: 0; color: var(--leise); text-decoration: underline;
  padding: 0; cursor: pointer; }