:root { --blau:#1f5f8b; --text:#1b1f24; --grau:#5b6470; --linie:#d5dae0; --gruen:#1e7b3a; --gelb:#8a6100; --bg:#f5f7f9; --karte:#fff; }
@media (prefers-color-scheme: dark) { :root { --text:#e8ecf0; --grau:#a3adb8; --linie:#3a424c; --bg:#14181d; --karte:#1e242b; --blau:#5aa3d6; --gruen:#5cc77d; --gelb:#e2b44a; } }
* { box-sizing:border-box; }
body { margin:0; font:17px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--text); background:var(--bg); }
main { max-width:640px; margin:0 auto; padding:16px 16px 110px; }
h1 { font-size:1.5rem; margin:.4em 0 .6em; } h2 { font-size:1.1rem; margin:1.4em 0 .5em; }
button, .knopf { font:inherit; border-radius:10px; padding:12px 16px; border:1px solid var(--linie); background:var(--karte); color:var(--text); cursor:pointer; display:inline-block; text-align:center; text-decoration:none; }
.haupt { background:var(--blau); color:#fff; border-color:var(--blau); font-weight:600; }
.gross { width:100%; padding:16px; font-size:1.1rem; margin:8px 0; }
.zweit { width:100%; margin:8px 0; } .klein { padding:8px 12px; }
button:disabled { opacity:.4; }
.feld { display:block; margin:10px 0; } .feld > span:first-child { display:block; font-size:.9rem; color:var(--grau); margin-bottom:4px; }
input, textarea, select { font:inherit; width:100%; padding:11px 12px; border:1px solid var(--linie); border-radius:8px; background:var(--karte); color:var(--text); }
input[type=checkbox], input[type=radio] { width:auto; transform:scale(1.4); margin:0 10px 0 4px; }
.zeile { display:flex; gap:6px; } .zwei { display:grid; grid-template-columns:1fr 1fr; gap:0 10px; } .zwei .zweit, .zwei .haupt { width:100%; }
.wahl { display:block; border:2px solid var(--linie); border-radius:12px; padding:12px; margin:8px 0; background:var(--karte); }
.wahl.an { border-color:var(--blau); } .wahl input { display:none; } .wahl small { display:block; color:var(--grau); }
.raumzeile, .schl { display:flex; align-items:center; gap:8px; margin:6px 0; } .schl input[type=number] { width:110px; }
fieldset { border:1px solid var(--linie); border-radius:10px; margin:10px 0; padding:4px 12px 8px; } legend input, legend select { border:none; font-weight:600; padding:4px; background:transparent; }
.haken-liste { display:grid; gap:10px; margin:6px 0 10px; } .haken { display:flex; align-items:center; background:var(--karte); padding:12px; border-radius:10px; border:1px solid var(--linie); }
.fotos { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:10px; } .fotos figure { margin:0; position:relative; }
.fotos img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:6px; } .weg { position:absolute; top:2px; right:2px; padding:2px 9px; background:#000a; color:#fff; border:none; }
.pad { width:100%; height:200px; background:#fff; border:2px dashed var(--linie); border-radius:10px; touch-action:none; }
.hinweis { color:var(--grau); font-size:.95rem; } .gruen { color:var(--gruen); font-weight:600; } .gelb { color:var(--gelb); font-weight:600; }
#meldung { position:sticky; top:0; margin:0; padding:10px 16px; background:var(--karte); border-bottom:1px solid var(--linie); z-index:5; }
.leiste { display:flex; justify-content:space-between; align-items:center; color:var(--grau); font-size:.9rem; } .zurueck-start { border:none; background:none; padding:6px 0; color:var(--blau); }
.fortschritt { height:6px; background:var(--linie); border-radius:3px; margin:6px 0 4px; } .fortschritt i { display:block; height:100%; background:var(--blau); border-radius:3px; }
.fuss { position:fixed; left:0; right:0; bottom:0; display:flex; gap:10px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:var(--karte); border-top:1px solid var(--linie); max-width:640px; margin:0 auto; }
.fuss button { flex:1; }
.kopf { display:flex; align-items:center; gap:12px; } .logo { max-height:48px; max-width:160px; display:block; margin:8px 0; }
.liste { list-style:none; padding:0; } .liste li { display:flex; gap:6px; margin:6px 0; } .eintrag { flex:1; text-align:left; } .eintrag small { display:block; color:var(--grau); }
.unten { text-align:center; font-size:.85rem; color:var(--grau); padding:0 0 90px; } .unten a { color:var(--grau); }
.ds { background:var(--karte); border:1px solid var(--linie); border-radius:10px; padding:10px 12px; margin:10px 0; } .ds p { white-space:pre-wrap; font-size:.9rem; }
.ordner { text-align:left; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:4px; } .ordner small { width:100%; color:var(--grau); }
.reiterzeile { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; } .reiter { padding:8px 12px; font-size:.9rem; } .reiter.an { background:var(--blau); color:#fff; border-color:var(--blau); }
.aus input:first-child { flex:2; } .aus input:last-child { flex:2; } .aus input[type=number] { width:70px; flex:none; }
#wolke { margin:0; padding:6px 16px; font-size:.85rem; text-align:center; } .code { font:600 1.3rem/1.6 ui-monospace, monospace; letter-spacing:.05em; background:var(--karte); border:2px dashed var(--blau); border-radius:10px; padding:14px; text-align:center; word-break:break-all; }
.recht h2 { font-size:1.05rem; margin-top:1.4em; } .recht p { margin:.5em 0; }