:root { --bg:#F4F5F2; --karte:#fff; --ink:#161A17; --leise:#5E6862; --linie:#DBDFD6; --akzent:#15625A; --fehler:#A33A24; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#121513; --karte:#1C201D; --ink:#E8EBE6; --leise:#9AA49D; --linie:#2E3430; --akzent:#5FB3A8; --fehler:#E07A62; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
.schmal { max-width:32rem; margin:0 auto; padding:2rem 16px; }
h1 { font-size:1.6rem; margin:0 0 1.2rem; }
label { display:block; font-weight:600; margin-bottom:.8rem; }
input { display:block; width:100%; margin-top:.3rem; font:inherit; padding:.6rem .7rem; border:1px solid var(--linie); border-radius:10px; background:var(--karte); color:var(--ink); }
button { font:inherit; font-weight:600; padding:.6rem 1.1rem; border:0; border-radius:10px; background:var(--akzent); color:#fff; cursor:pointer; }
button.leise { background:transparent; color:var(--leise); padding:.4rem 0; margin-top:1.5rem; }
.fehler { color:var(--fehler); }
.kacheln { display:grid; gap:.8rem; }
.kachel { display:flex; justify-content:space-between; align-items:baseline; padding:1.1rem 1.2rem; background:var(--karte); border:1px solid var(--linie); border-radius:14px; color:inherit; text-decoration:none; }
.kachel b { font-size:1.15rem; }
.kachel span { color:var(--leise); font-size:.9rem; }
a.kachel:active { transform:scale(.99); }
.kachel.aus { opacity:.55; }
a.leise { color:var(--leise); font-size:.9rem; }