:root { color-scheme: light dark; --grund: #f6f3ee; --karte: #ffffff; --text: #1b2430; --leise: #6b7280; --akzent: #1f6f78; --warn: #b4452b; --rand: #e4dfd6; }
@media (prefers-color-scheme: dark) { :root { --grund: #141a22; --karte: #1b2430; --text: #eef0f3; --leise: #9aa3ad; --akzent: #5cc2cc; --rand: #2a3440; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--grund); color: var(--text); font: 16px/1.45 -apple-system, "Segoe UI", Roboto, sans-serif; padding-bottom: env(safe-area-inset-bottom); }
.kopf { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; padding-top: calc(14px + env(safe-area-inset-top)); border-bottom: 1px solid var(--rand); }
.titel b { font-size: 18px; } .titel small { display: block; color: var(--leise); }
.blatt { max-width: 560px; margin: 0 auto; padding: 18px; }
h1 { margin: 8px 0 4px; } h2 { font-size: 17px; margin: 0 0 10px; }
p { margin: 6px 0 14px; } .klein { color: var(--leise); font-size: 14px; }
form { display: flex; flex-direction: column; gap: 12px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--leise); }
label.zeile { flex-direction: row; align-items: center; gap: 8px; color: var(--text); }
input, textarea { font: inherit; color: var(--text); background: var(--karte); border: 1px solid var(--rand); border-radius: 10px; padding: 10px 12px; }
input#code { text-align: center; font-size: 22px; letter-spacing: 2px; text-transform: uppercase; }
button { font: inherit; border: 1px solid var(--rand); background: var(--karte); color: var(--text); border-radius: 10px; padding: 10px 14px; cursor: pointer; }
button.ja { background: var(--akzent); color: #fff; border-color: var(--akzent); }
button.leise { color: var(--leise); }
.karte { background: var(--karte); border: 1px solid var(--rand); border-radius: 14px; padding: 16px; }
.arten { display: flex; gap: 8px; margin-bottom: 12px; }
.arten button { flex: 1; } .arten button.an { background: var(--akzent); color: #fff; border-color: var(--akzent); }
.fehler { color: var(--warn); } .stand { color: var(--akzent); }
section { margin-top: 22px; }
.liste .eintrag { background: var(--karte); border: 1px solid var(--rand); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.liste .eintrag small { color: var(--leise); display: block; }
.liste .eintrag.neu { border-color: var(--akzent); }
.leer { color: var(--leise); }
[hidden] { display: none !important; }