:root {
  color-scheme: light dark;
  --bg: #f6f6f4; --karte: #fff; --text: #1b1b1a; --leise: #6b6b66;
  --rand: #e2e2dd; --akzent: #b4341f; --gruen: #1f7a4d; --gelb: #9a6a00;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#161614; --karte:#1f1e1c; --text:#eceae5; --leise:#9b988f;
          --rand:#33312d; --akzent:#e8674c; --gruen:#5ec48d; --gelb:#d6a63a; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; }
.huelle { max-width: 1180px; margin: 0 auto; padding: 28px 20px 64px; }
.huelle.schmal { max-width: 380px; padding-top: 15vh; }
h1 { font-size: 26px; margin: 0 0 4px; letter-spacing: -.02em; }
h2 { font-size: 17px; margin: 28px 0 10px; }
.stand { color: var(--leise); font-size: 13px; margin-bottom: 22px; }
.karte { background: var(--karte); border: 1px solid var(--rand); border-radius: 10px; padding: 16px; }
label { display:block; margin-bottom: 12px; font-size: 13px; color: var(--leise); }
input[type=text], input[type=password], input[type=search], input[type=number], select {
  display:block; width:100%; font:inherit; margin-top:4px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--rand); background: var(--bg); color: var(--text); }
button { font: inherit; font-weight: 600; padding: 8px 16px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--rand); background: var(--karte); color: var(--text); }
button.haupt { background: var(--akzent); border-color: var(--akzent); color: #fff; }
button.gefahr { color: var(--akzent); border-color: var(--akzent); }
.meldung { border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; font-size: 14px;
  border: 1px solid var(--rand); background: var(--karte); }
.meldung.gut { border-color: var(--gruen); }
.meldung.warnung { border-color: var(--gelb); }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 12px; margin-bottom: 22px; }
.kachel { background: var(--karte); border: 1px solid var(--rand); border-radius: 10px; padding: 12px 14px; }
.kachel .wert { font-size: 21px; font-weight: 650; letter-spacing: -.02em; }
.kachel .titel { color: var(--leise); font-size: 12px; text-transform: uppercase; letter-spacing:.05em; }
.werkzeug { display:flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 8px; }
.werkzeug .feld { flex: 1 1 320px; }
.werkzeug label { margin: 0; }
.hinweis { color: var(--leise); font-size: 12.5px; margin: 6px 0 22px; }
.reiter { display:flex; gap:4px; margin-bottom:18px; border-bottom:1px solid var(--rand); }
.reiter a { text-decoration:none; font-weight:600; padding:8px 16px; color:var(--leise);
  border-bottom:2px solid transparent; margin-bottom:-1px; }
.reiter a.aktiv { color:var(--text); border-bottom-color:var(--akzent); }
.monat { background:var(--karte); border:1px solid var(--rand); border-radius:10px; padding:14px 16px; margin-bottom:12px; }
.monat h3 { margin:0 0 10px; font-size:15px; display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.monat h3 .bilanz { font-weight:400; font-size:13px; color:var(--leise); font-variant-numeric:tabular-nums; }
.balken { height:4px; border-radius:99px; background:var(--rand); margin:-4px 0 12px; overflow:hidden; }
.balken i { display:block; height:100%; background:var(--akzent); }
.posten { display:grid; grid-template-columns:auto auto 1fr auto; gap:7px 12px; align-items:baseline; }
.posten .hk { align-self:center; display:flex; }
.posten .p { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.posten .g { color:var(--leise); font-size:12px; text-align:right; white-space:nowrap; }
.termin { color:var(--akzent); font-weight:600; }
.posten .erledigt { opacity:.45; text-decoration:line-through; }
input[type=checkbox] { width:16px; height:16px; cursor:pointer; accent-color:var(--akzent); margin:0; }
table { border-collapse:collapse; width:100%; font-size:14px; }
.tabellenrahmen { overflow-x:auto; background:var(--karte); border:1px solid var(--rand); border-radius:10px; }
th, td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--rand); vertical-align:top; }
th { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--leise); white-space:nowrap; }
tbody tr:last-child td { border-bottom:none; }
td.preis { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
tr.gekauft td:not(.hk) { opacity:.45; text-decoration:line-through; }
td.hk, th.hk { width:28px; padding-right:0; padding-top:11px; }
.reihe { color:var(--leise); font-size:13px; }
.notiz { color:var(--leise); font-size:12px; margin-top:3px; max-width:420px; }
a { color: var(--akzent); }
.marke { display:inline-block; padding:1px 7px; border-radius:99px; font-size:12px; border:1px solid var(--rand); white-space:nowrap; }
.fuss { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; }
.fuss form { display:flex; gap:8px; align-items:flex-end; }
.fuss input[type=number] { width: 90px; }
/* Aus dem Blickfeld, aber im Formular - sonst findet der Schlüsselbund die
   Kennung nicht. display:none wäre für manche Passwortverwaltungen zu wenig. */
.versteckt { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }