:root {
  --bg:#0F1720; --karte:#16212D; --karte2:#1C2A38; --text:#EAF1F6; --leise:#93A4B3; --rand:#2A3A4A;
  --akzent:#18C7C9; --auf-akzent:#0F1720; --warn:#E5A94B; --gefahr:#E05252; --ok:#4CAF8A;
  --fuss:64px; color-scheme:dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:#F3F6F9; --karte:#FFFFFF; --karte2:#EAF0F5; --text:#16212D; --leise:#5B6B7A; --rand:#D3DDE6;
    --akzent:#0E8A8C; --auf-akzent:#FFFFFF; color-scheme:light;
  }
}
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--text); font:16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { min-height:100dvh; }
#app { max-width:640px; margin:0 auto; min-height:100dvh; display:flex; flex-direction:column; padding-top:env(safe-area-inset-top); }
header.kopf { display:flex; align-items:center; gap:10px; padding:14px 16px 10px; position:sticky; top:0; background:var(--bg); z-index:5; }
header.kopf h1 { font-size:18px; margin:0; flex:1; }
header.kopf .zurueck { background:none; border:0; color:var(--akzent); font-size:15px; padding:6px 0; cursor:pointer; }
main { flex:1; padding:4px 16px calc(var(--fuss) + 24px + env(safe-area-inset-bottom)); }
nav.tabs { position:fixed; bottom:0; left:0; right:0; background:var(--karte); border-top:1px solid var(--rand);
  display:flex; justify-content:center; padding-bottom:env(safe-area-inset-bottom); z-index:6; }
nav.tabs .innen { display:flex; width:100%; max-width:640px; }
nav.tabs button { flex:1; height:var(--fuss); background:none; border:0; color:var(--leise); font:inherit; font-size:13px; cursor:pointer; position:relative; }
nav.tabs button[aria-current="page"] { color:var(--akzent); font-weight:600; }
.punkt { position:absolute; top:10px; left:calc(50% + 10px); min-width:18px; height:18px; border-radius:9px; background:var(--gefahr);
  color:#fff; font-size:11px; line-height:18px; padding:0 5px; text-align:center; }
.karte { background:var(--karte); border:1px solid var(--rand); border-radius:14px; padding:14px 16px; margin:0 0 12px; }
.karte h2 { font-size:17px; margin:0 0 4px; }
.karte p { margin:6px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.meta { color:var(--leise); font-size:13px; }
.marke { display:inline-block; font-size:12px; border-radius:8px; padding:1px 8px; margin-right:6px; background:var(--karte2); color:var(--leise); }
.marke.wichtig { background:var(--warn); color:#1a1200; font-weight:600; }
.marke.neu { background:var(--akzent); color:var(--auf-akzent); font-weight:600; }
button.primaer, button.zweit { font:inherit; border-radius:12px; padding:12px 18px; border:1px solid var(--akzent); cursor:pointer; min-height:46px; }
button.primaer { background:var(--akzent); color:var(--auf-akzent); font-weight:600; }
button.zweit { background:none; color:var(--akzent); }
button.gefahr { border-color:var(--gefahr); color:var(--gefahr); }
button[disabled] { opacity:.5; cursor:default; }
input, textarea, select { width:100%; font:inherit; color:var(--text); background:var(--karte2); border:1px solid var(--rand); border-radius:12px; padding:12px; }
textarea { min-height:110px; resize:vertical; }
label { display:block; font-size:14px; color:var(--leise); margin:14px 0 6px; }
.wahl { display:flex; gap:10px; margin:6px 0; }
.wahl button { flex:1; text-align:left; background:var(--karte2); border:2px solid var(--rand); border-radius:12px; padding:12px; color:var(--text); font:inherit; cursor:pointer; }
.wahl button[aria-pressed="true"] { border-color:var(--akzent); }
.wahl small { display:block; color:var(--leise); margin-top:2px; }
.liste-gp { display:block; width:100%; text-align:left; font:inherit; color:var(--text); cursor:pointer; }
.zeile { display:flex; align-items:center; gap:10px; }
.zeile .platz { flex:1; min-width:0; }
.zeile .vorschau { color:var(--leise); font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.blasen { display:flex; flex-direction:column; gap:8px; margin:8px 0 16px; }
.blase { max-width:86%; padding:10px 14px; border-radius:16px; white-space:pre-wrap; overflow-wrap:anywhere; background:var(--karte2); align-self:flex-start; }
.blase.ich { align-self:flex-end; background:var(--akzent); color:var(--auf-akzent); }
.blase .w { display:block; font-size:12px; opacity:.75; margin-bottom:2px; }
.blase time { display:block; font-size:11px; opacity:.65; margin-top:4px; }
.senden { position:sticky; bottom:calc(var(--fuss) + env(safe-area-inset-bottom)); background:var(--bg); padding:8px 0; display:flex; gap:8px; }
.senden textarea { min-height:48px; height:48px; }
.hinweisbox { background:var(--karte2); border-left:4px solid var(--akzent); border-radius:8px; padding:10px 12px; font-size:14px; margin:10px 0; }
.fehler { color:var(--gefahr); font-size:14px; margin:8px 0; }
.mitte { text-align:center; padding:48px 8px; color:var(--leise); }
.willkommen { padding:32px 20px; }
.willkommen h1 { font-size:26px; margin:0 0 6px; }
.offline { background:var(--warn); color:#1a1200; text-align:center; font-size:13px; padding:4px; }
.wahlzeile { display:flex; align-items:center; gap:10px; margin:0; padding:10px 12px; background:var(--karte2); border-radius:12px; margin-bottom:6px; color:var(--text); font-size:16px; }
.wahlzeile input { width:22px; height:22px; flex:none; }
.umschalter { display:flex; gap:6px; margin:0 0 12px; background:var(--karte2); border-radius:12px; padding:4px; }
.umschalter button { flex:1; border:0; border-radius:9px; padding:10px; background:none; color:var(--leise); font:inherit; cursor:pointer; }
.umschalter button[aria-pressed="true"] { background:var(--akzent); color:var(--auf-akzent); font-weight:600; }
a { color:var(--akzent); }

/* Einrichtung */
.einrichten { background:var(--karte); border:2px solid var(--akzent); border-radius:16px; padding:14px 16px; margin:0 0 14px; }
.einrichten h2 { font-size:17px; margin:0 0 8px; }
.schritte { list-style:none; counter-reset:s; margin:0; padding:0; }
.schritte > li { counter-increment:s; position:relative; padding:10px 0 10px 42px; border-top:1px solid var(--rand); }
.schritte > li:first-child { border-top:0; }
.schritte > li::before { content:counter(s); position:absolute; left:0; top:10px; width:30px; height:30px; border-radius:50%; background:var(--akzent); color:var(--auf-akzent); font-weight:700; text-align:center; line-height:30px; }
.schritte > li.fertig::before { content:"✓"; background:var(--ok); color:#fff; }
.schritte > li.wartet::before { background:var(--rand); color:var(--leise); }
.schritte p { margin:4px 0 8px; }
.anleitung { margin:6px 0 0; padding-left:20px; font-size:15px; }
.anleitung li { margin:4px 0; }
.symbol { display:inline-block; border:1px solid var(--leise); border-radius:6px; padding:0 6px; }
.code { font:700 24px/1.2 ui-monospace, monospace; letter-spacing:3px; background:var(--karte2); border-radius:12px; padding:12px; text-align:center; user-select:all; }
@media (max-width:480px) { main { padding-left:12px; padding-right:12px; } button.primaer, button.zweit { width:100%; } .senden button { width:auto; } header.kopf h1 { font-size:20px; } }
button, [data-tab], [data-gp] { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
body { overscroll-behavior-y:none; -webkit-text-size-adjust:100%; }
.wahl-spalte { flex-direction:column; } .wahl button[disabled] { opacity:.55; }