:root{
  --bg:#F3F1EC; --card:#FFFFFF; --ink:#16201C; --body:#2E3833; --muted:#6E7872;
  --line:#E3E0D8; --accent:#1E5B4A; --accent-soft:#DDEAE3; --pos:#2F6B4F; --neg:#A2412F;
  --shadow:0 1px 2px rgba(22,32,28,.05),0 10px 30px -18px rgba(22,32,28,.25);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#101614; --card:#18201D; --ink:#EEF2EF; --body:#C9D2CD; --muted:#8D9993;
    --line:#27312D; --accent:#86CDB0; --accent-soft:#17312A; --pos:#86CDB0; --neg:#E4927F;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --bg:#101614; --card:#18201D; --ink:#EEF2EF; --body:#C9D2CD; --muted:#8D9993;
  --line:#27312D; --accent:#86CDB0; --accent-soft:#17312A; --pos:#86CDB0; --neg:#E4927F;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px -18px rgba(0,0,0,.8);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--body);
  font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.num,.v,.tab{font-variant-numeric:tabular-nums}

main{
  max-width:560px; margin:0 auto;
  padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 40px max(16px,env(safe-area-inset-left));
}

/* ---------- Kopfzeile ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px;
  font-size:13px;color:var(--muted)}
.top button{padding:6px 8px;margin-right:-8px;border-radius:8px;font-size:17px;line-height:1;color:var(--muted)}
.top button:active{background:var(--accent-soft)}
.top .laedt{animation:dreh 1s linear infinite;display:inline-block}
@keyframes dreh{to{transform:rotate(360deg)}}

/* ---------- Schlagzeile ---------- */
.hero{padding:28px 0 30px;text-align:center}
.big{display:inline-flex;align-items:flex-start;gap:6px;color:var(--ink)}
.big .cur{font-size:26px;font-weight:400;margin-top:14px;color:var(--muted)}
.big .num{font-size:clamp(68px,21vw,108px);font-weight:300;letter-spacing:-.03em;line-height:1}
.big .per{display:flex;flex-direction:column;align-items:flex-start;margin-top:14px;
  font-size:16px;line-height:1.25;color:var(--muted);text-align:left;white-space:nowrap}
.big .per b{font-weight:600;color:var(--accent)}
.meta{margin-top:10px;font-size:13px;color:var(--muted)}

/* ---------- Positionen ---------- */
.card{background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:4px 16px;margin-top:14px}
.kat{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0 6px;
  font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.row:first-of-type{border-top:none}
.row .l{min-width:0}
.row .n{color:var(--ink);overflow-wrap:anywhere}
.row small{display:block;font-size:13px;color:var(--muted)}
.row .r{text-align:right;white-space:nowrap}
.row .v{color:var(--ink)}
.pos{color:var(--pos)} .neg{color:var(--neg)} .warn{color:var(--neg)}

/* ---------- Summen & Fuss ---------- */
.sum{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.sum:first-child{border-top:none}
.sum .v{color:var(--ink);font-weight:600}
details{margin-top:14px}
summary{cursor:pointer;color:var(--muted);font-size:14px;padding:8px 0;list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"▸ ";}
details[open] summary::before{content:"▾ ";}
.ann{font-size:14px;width:100%;border-collapse:collapse}
.ann td{padding:5px 0;border-top:1px solid var(--line);vertical-align:top}
.ann td:last-child{text-align:right;color:var(--ink);padding-left:12px}
.aktionen{display:flex;gap:10px;margin-top:22px}
.btn{flex:1;padding:12px 14px;border-radius:12px;background:var(--card);box-shadow:var(--shadow);
  color:var(--ink);font-weight:500}
.btn.primary{background:var(--accent);color:var(--bg)}
.btn:active{transform:translateY(1px)}
.fuss{margin-top:12px;text-align:center;font-size:12px;color:var(--muted)}

/* ---------- Anmeldung ---------- */
.login{max-width:320px;margin:22vh auto 0;display:flex;flex-direction:column;gap:12px;text-align:center}
.login h1{font-size:20px;font-weight:500;color:var(--ink);margin-bottom:8px}
.login input{padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);font-size:16px}
.login .err{min-height:20px;font-size:14px;color:var(--neg)}

/* ---------- Meldung ---------- */
#toast{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translate(-50%,20px);
  max-width:calc(100% - 32px);padding:10px 16px;border-radius:12px;background:var(--ink);color:var(--bg);
  font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
#toast.an{opacity:1;transform:translate(-50%,0)}