/* Handy zuerst, eine Spalte. Farben als Merkmale auf :root, Dunkelmodus über prefers-color-scheme. */
:root {
  color-scheme: light dark;
  --grund: #f4f5f7;
  --karte: #ffffff;
  --text: #1b1f24;
  --leise: #4d5662;
  --linie: #d3d8de;
  --akzent: #1d4f91;
  --fokus: #1d4f91;
  --knopf: #1d4f91;
  --knopf-text: #ffffff;
  --gruen: #1b6b3a;
  --gruen-text: #ffffff;
  --gelb: #f2c230;
  --gelb-text: #1d1600;
  --rot: #b3261e;
  --rot-text: #ffffff;
  --grau: #59626d;
  --grau-text: #ffffff;
  --band: #ede1ff;
  --band-text: #2e1065;
  --fehler: #b3261e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #101317;
    --karte: #1a1f26;
    --text: #e8ebef;
    --leise: #aab3be;
    --linie: #323a45;
    --akzent: #8db8f2;
    --fokus: #8db8f2;
    --knopf: #8db8f2;
    --knopf-text: #0b1522;
    --gruen: #23774a;
    --gruen-text: #ffffff;
    --gelb: #e0b422;
    --gelb-text: #1d1600;
    --rot: #c4372f;
    --rot-text: #ffffff;
    --grau: #66707c;
    --grau-text: #ffffff;
    --band: #3b2a66;
    --band-text: #eadfff;
    --fehler: #ff8a80;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1rem 1rem 2rem;
  overflow-wrap: anywhere;
}

h1 { font-size: 1.4rem; margin: 0.5rem 0 1rem; }
h2 { font-size: 1.2rem; margin: 0 0 0.75rem; }
h3, h4 { margin: 0 0 0.35rem; font-size: 1rem; }
h3.unter { margin-top: 1.1rem; color: var(--leise); font-size: 0.9rem; text-transform: none; }
h4.kartenkopf { font-size: 0.95rem; }
p { margin: 0 0 0.6rem; }

section {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 0.75rem;
  padding: 1rem;
  margin: 0 0 1rem;
}

:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

.laden { padding: 2rem 0; text-align: center; color: var(--leise); }

/* Ampel */
.ampel {
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
  margin: 0 0 0.75rem;
}
.ampel p { margin: 0; }
.ampel-wort { font-size: 1.15rem; }
.ampel-gruende { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.ampel-gruen { background: var(--gruen); color: var(--gruen-text); }
.ampel-gelb { background: var(--gelb); color: var(--gelb-text); }
.ampel-rot { background: var(--rot); color: var(--rot-text); }
.ampel-grau { background: var(--grau); color: var(--grau-text); }

.band-beispiel {
  background: var(--band);
  color: var(--band-text);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin: 0 0 0.75rem;
  font-weight: 600;
}

.hinweis-notstand {
  border: 2px solid var(--gelb);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin: 0 0 0.75rem;
}

.kopfzeile { color: var(--leise); margin: 0 0 0.75rem; }
.kein-stand { color: var(--leise); }

/* Knopf Jetzt aktualisieren */
.aktualisieren { margin: 0 0 1rem; }
button {
  font: inherit;
  min-height: 2.75rem;
  padding: 0.5rem 1.1rem;
  border: 0;
  border-radius: 0.6rem;
  background: var(--knopf);
  color: var(--knopf-text);
  font-weight: 600;
  cursor: pointer;
}
.aktualisieren button { width: 100%; }
button:disabled { opacity: 0.55; cursor: not-allowed; }
button[aria-busy="true"] { cursor: progress; }
.vorgang-status { margin: 0.5rem 0 0; color: var(--leise); }
.vorgang-fehlgeschlagen { color: var(--fehler); }

/* Inhalte der Bereiche */
.hinweis, .klein, .zustand { color: var(--leise); }
.klein { font-size: 0.875rem; }

.werte { margin: 0 0 0.75rem; }
.werte > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--linie);
}
.werte > div:last-child { border-bottom: 0; }
.werte dt { color: var(--leise); flex: 0 1 45%; }
.werte dd { margin: 0; text-align: right; flex: 1 1 55%; }

.karten { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.6rem; }
.karte {
  border: 1px solid var(--linie);
  border-radius: 0.6rem;
  padding: 0.7rem 0.8rem;
}
.karte .werte { margin-bottom: 0; }
.kartenkopf .status { font-weight: 400; color: var(--leise); font-size: 0.875rem; }

.langtext { white-space: pre-wrap; }
details.langtext summary { cursor: pointer; }
details.langtext p { margin: 0.5rem 0 0; }

.zitat {
  margin: 0.4rem 0;
  padding: 0.1rem 0 0.1rem 0.75rem;
  border-left: 3px solid var(--linie);
  color: var(--leise);
  white-space: pre-wrap;
}
.zeitmarke { white-space: nowrap; }

.farbe { display: inline-block; padding: 0 0.5rem; border-radius: 0.4rem; font-size: 0.875rem; font-weight: 600; }
.farbe-gruen { background: var(--gruen); color: var(--gruen-text); }
.farbe-gelb { background: var(--gelb); color: var(--gelb-text); }
.farbe-rot { background: var(--rot); color: var(--rot-text); }
.abgelaufen { color: var(--fehler); font-size: 0.875rem; font-weight: 600; }

.kurve { display: block; width: 100%; height: auto; color: var(--akzent); margin: 0.5rem 0; }
.kurve-neuanlage { stroke: var(--leise); stroke-dasharray: 4 3; stroke-width: 1; }
.kurve-neuanlage-text { fill: var(--leise); }

.mac { margin: 0 0 0.3rem; }

.rechtshinweis {
  max-width: 40rem;
  margin: 1.5rem 0 0;
  color: var(--leise);
  font-size: 0.875rem;
}

/* Anmeldemaske */
.anmeldung { display: grid; gap: 0.6rem; margin-top: 3rem; }
.anmeldung label { font-weight: 600; }
.anmeldung input {
  font: inherit;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--linie);
  border-radius: 0.6rem;
  background: var(--karte);
  color: var(--text);
}
.anmeldung .fehler { color: var(--fehler); min-height: 1.5rem; margin: 0; }