:root {
  --hintergrund: #ffffff;
  --karte: #f3f4f6;
  --schrift: #111827;
  --gedimmt: #6b7280;
  --haupt: #2563eb;
  --haupt-schrift: #ffffff;
  --ja: #15803d;
  --nein: #b91c1c;
  --warn: #b45309;
  --rand: #d1d5db;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--hintergrund); color: var(--schrift); }
body { font: 16px/1.45 -apple-system, "Segoe UI", Roboto, sans-serif; padding: 12px 12px 32px; max-width: 720px; margin: 0 auto; }
h1 { font-size: 22px; margin: 4px 0 2px; }
h2 { font-size: 17px; margin: 22px 0 8px; border-bottom: 1px solid var(--rand); padding-bottom: 4px; }
h3 { font-size: 17px; margin: 6px 0 4px; }
.wer { color: var(--gedimmt); margin: 0 0 8px; font-size: 16px; }
.zahl { color: var(--gedimmt); font-weight: normal; font-size: 15px; }
.meldung { padding: 10px 12px; border-radius: 10px; background: #dcfce7; color: #14532d; margin: 8px 0; font-size: 16px; }
.meldung.fehler { background: #fee2e2; color: #7f1d1d; }
.liste { list-style: none; margin: 0; padding: 0; }
.leer { color: var(--gedimmt); margin: 4px 0; }
.punkt { background: var(--karte); border-radius: 12px; padding: 12px; margin: 0 0 12px; }
.kopf { display: flex; gap: 10px; flex-wrap: wrap; color: var(--gedimmt); font-size: 15px; }
.nummer { font-weight: 600; color: var(--schrift); }
.bezug, .frist { color: var(--gedimmt); margin: 2px 0; font-size: 15px; }
.text { white-space: pre-wrap; margin: 6px 0; }
.frist { color: var(--warn); }
.haekchen { width: 100%; border-collapse: collapse; margin: 8px 0; }
.haekchen td { padding: 4px 0; border-top: 1px solid var(--rand); vertical-align: top; }
.haekchen td:first-child { width: 42%; color: var(--gedimmt); }
.wert-ja, .wert-gelesen { color: var(--ja); font-weight: 600; }
.wert-nein { color: var(--nein); font-weight: 600; }
.wert-bedenken, .wert-nachfrage { color: var(--warn); font-weight: 600; }
.antwort-text { color: var(--schrift); font-style: italic; }
.aktionen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.knopf { min-height: 44px; min-width: 88px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--rand); font-size: 16px; background: var(--hintergrund); color: var(--schrift); cursor: pointer; }
.knopf:disabled { opacity: 0.5; cursor: default; }
.knopf.aktuell { outline: 3px solid var(--haupt); outline-offset: 2px; opacity: 1; }
.knopf-ja, .knopf-gelesen, .knopf-haupt { background: var(--ja); border-color: var(--ja); color: #fff; }
.knopf-haupt { background: var(--haupt); border-color: var(--haupt); color: var(--haupt-schrift); }
.knopf-nein { background: var(--nein); border-color: var(--nein); color: #fff; }
.knopf-bedenken, .knopf-nachfrage { background: #fff7ed; border-color: var(--warn); color: var(--warn); }
.textfeld { margin-top: 10px; }
.textfeld label { display: block; font-size: 15px; color: var(--gedimmt); }
.textfeld textarea { display: block; width: 100%; margin-top: 4px; font: inherit; padding: 8px; border-radius: 10px; border: 1px solid var(--rand); background: var(--hintergrund); color: var(--schrift); }
.textfeld-knoepfe { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
footer { margin-top: 24px; }
.hinweis { color: var(--gedimmt); font-size: 15px; }
@media (prefers-color-scheme: dark) {
  :root { --hintergrund: #0f172a; --karte: #1e293b; --schrift: #e5e7eb; --gedimmt: #9ca3af; --rand: #334155; }
  .meldung { background: #14532d; color: #dcfce7; }
  .meldung.fehler { background: #7f1d1d; color: #fee2e2; }
  .knopf-bedenken, .knopf-nachfrage { background: #3b2a12; }
}