@font-face{font-family:Manrope;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/fonts/manrope-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Manrope;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Das Schuldenfrei-Datum ist der Rahmen, an dem alles haengt. Fast weisser Grund, eine
   Glasscheibe, Schwarz nur fuer aktive Navigation und die zwei dunklen Karten, Mint einzig
   als Marke. Typoskala: 11 · 12 · 13 · 14 · 16 · 20 · 28 · 48. */
:root{
  color-scheme: light;
  --bg:#F1F4F2;
  --frame:rgba(255,255,255,.62);
  --well:rgba(237,241,239,.78);
  --card:rgba(255,255,255,.9);
  --ink:#0A0E0D;
  --ink-2:#3F4946;
  --muted:#646E6B;
  --line:rgba(10,14,13,.08);
  --chip:rgba(10,14,13,.05);
  --mint:#25C796;
  --mint-ink:#03251A;
  --mint-deep:#0A7656;
  --night:#0B100F;
  --warn:#9A6212;
  --bad:#B3411F;
  --t-11:11px; --t-12:12px; --t-13:13px; --t-14:14px; --t-16:16px; --t-20:20px; --t-28:28px; --t-48:48px;
  --font:'Manrope',system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:var(--t-14);
  line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  caret-color:var(--mint-deep); scrollbar-color:rgba(10,14,13,.22) transparent}
::selection{background:rgba(37,199,150,.28); color:var(--ink)}
a{color:inherit; text-underline-offset:3px}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
svg.i{width:17px; height:17px; flex:none; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round}
:focus-visible{outline:2px solid var(--mint-deep); outline-offset:2px}

/* ---- Licht hinter der Scheibe ---- */
.light{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.light i{position:absolute; display:block; border-radius:50%; filter:blur(100px)}
.l1{width:760px; height:760px; left:-180px; top:-280px; background:#9DE6CB; opacity:.55}
.l2{width:600px; height:600px; right:-160px; top:34%; background:#C3EADC; opacity:.6}

/* ---- Glasrahmen ---- */
.frame{position:relative; z-index:1; margin:20px; min-height:calc(100% - 40px);
  display:grid; grid-template-columns:232px 1fr; gap:8px; padding:14px; border-radius:34px;
  background:var(--frame); border:1px solid rgba(255,255,255,.9);
  backdrop-filter:blur(40px) saturate(160%); -webkit-backdrop-filter:blur(40px) saturate(160%);
  box-shadow:inset 0 1px 0 #fff, 0 40px 90px -40px rgba(10,20,16,.2), 0 2px 6px rgba(10,20,16,.04)}

/* ---- Seitenleiste ---- */
.side{padding:12px 10px 8px; display:flex; flex-direction:column; gap:24px}
.brand{display:flex; align-items:center; gap:10px; padding:2px 6px}
.mark{width:30px; height:30px; border-radius:10px; background:var(--mint); color:var(--mint-ink);
  display:grid; place-items:center; font-weight:700; font-size:var(--t-14)}
.brand b{font-weight:700; font-size:var(--t-16); letter-spacing:-.02em}
.group{display:flex; flex-direction:column; gap:2px}
.glabel{display:flex; align-items:center; justify-content:space-between; padding:0 12px 6px;
  font-size:var(--t-12); color:var(--muted); font-weight:600}
.add{width:24px; height:24px; border-radius:50%; background:var(--chip); color:var(--ink-2);
  display:grid; place-items:center; border:0; cursor:pointer; padding:0; transition:background 160ms}
.add:hover{background:rgba(10,14,13,.09)}
.add svg.i{width:13px; height:13px; stroke-width:2.2}
.nav{display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:13px; color:var(--ink-2);
  text-decoration:none; font-weight:600; font-size:var(--t-13); transition:background 160ms ease, transform 160ms ease-out}
.nav:hover{background:var(--chip)}
.nav:active{transform:scale(.98)}
.nav.on{background:var(--ink); color:#fff}
.nav .end{margin-left:auto; color:var(--muted); font-weight:600; font-size:var(--t-12)}
.nav .lbl{white-space:nowrap}
.m-only{display:none}
.side-end{margin-top:auto}

/* ---- Kopf ---- */
main{min-width:0; display:flex; flex-direction:column; gap:10px; padding:4px 4px 4px 0}
.bar{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:4px 2px}
.m-brand{display:none}
.tabs{display:flex; gap:4px; padding:3px; border-radius:999px; background:var(--chip)}
.tab{border:0; font-family:inherit; font-weight:600; font-size:var(--t-13); padding:7px 16px; border-radius:999px;
  background:transparent; color:var(--ink-2); cursor:pointer; transition:transform 160ms ease-out, background 160ms}
.tab:hover{background:rgba(255,255,255,.7)}
.tab:active{transform:scale(.97)}
.tab[aria-selected="true"]{background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(10,30,22,.08), 0 4px 10px -6px rgba(10,30,22,.2)}
.grow{flex:1}
.mnav{display:flex; align-items:center; gap:6px; font-weight:600; font-size:var(--t-13)}
.round{width:36px; height:36px; border-radius:50%; border:0; background:var(--chip); color:var(--ink-2);
  display:grid; place-items:center; cursor:pointer; padding:0; transition:transform 160ms ease-out, background 160ms}
.round:hover{background:rgba(10,14,13,.09)}
.round:active{transform:scale(.95)}
.round.dark{background:rgba(255,255,255,.1); color:#fff}
.round.dark:hover{background:rgba(255,255,255,.18)}
.addbtn{display:inline-flex; align-items:center; gap:7px; border:0; background:var(--mint); color:var(--mint-ink);
  font-family:inherit; font-weight:600; font-size:var(--t-13); padding:9px 16px 9px 12px; border-radius:999px; cursor:pointer;
  transition:transform 160ms ease-out, background 160ms}
.addbtn:hover{background:#1FB888}
.addbtn:active{transform:scale(.97)}
.ava{width:36px; height:36px; border-radius:50%; background:var(--chip); color:var(--ink-2); display:grid; place-items:center;
  font-weight:700; font-size:var(--t-12); border:0; cursor:pointer}

/* ---- Innenbereich ---- */
.well{flex:1; border-radius:28px; background:var(--well); padding:22px; display:flex; flex-direction:column; gap:18px;
  border:1px solid rgba(255,255,255,.65)}
.head{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.head h1{margin:0; font-size:var(--t-20); font-weight:700; letter-spacing:-.025em}
.head p{margin:0; font-size:var(--t-12); color:var(--muted)}
.btn{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); background:#fff; color:var(--ink);
  font-family:inherit; font-weight:600; font-size:var(--t-12); padding:8px 14px; border-radius:999px; cursor:pointer;
  text-decoration:none; transition:transform 160ms ease-out, background 160ms}
.btn:hover{background:#F6F8F7}
.btn:active{transform:scale(.97)}
.btn svg.i{width:15px; height:15px}

.grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:14px}
.card{background:var(--card); border-radius:22px; padding:20px; border:1px solid rgba(255,255,255,.95);
  box-shadow:0 1px 2px rgba(10,30,22,.04), 0 12px 30px -16px rgba(10,20,16,.14)}
.ctitle{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px}
.ctitle h3{margin:0; font-size:var(--t-14); font-weight:700; letter-spacing:-.01em}
.chip{display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; background:var(--chip);
  font-size:var(--t-11); font-weight:600; color:var(--ink-2); white-space:nowrap}
.c-debt{grid-column:span 8}
.c-left{grid-column:span 4}
.c-dots{grid-column:span 5}
.c-net{grid-column:span 7}
.c-budget{grid-column:span 4}
.c-recent{grid-column:span 5}
.c-report{grid-column:span 3}
.c-net{display:flex; flex-direction:column}

/* ---- Schuldenfrei: der Rahmen der Seite ---- */
.c-debt{background:var(--night); color:#fff; border-color:rgba(255,255,255,.06); position:relative; overflow:hidden;
  padding:26px 28px 0; display:flex; flex-direction:column; box-shadow:0 26px 54px -26px rgba(0,0,0,.45)}
.c-debt::before{content:""; position:absolute; width:460px; height:460px; right:-140px; top:-220px; border-radius:50%;
  background:radial-gradient(circle, rgba(37,199,150,.5), rgba(37,199,150,0) 65%); pointer-events:none}
.debt-main{position:relative; display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center}
.debt-h{margin:0; font-weight:600; font-size:var(--t-16); color:rgba(255,255,255,.72); letter-spacing:-.01em}
.debt-h em{display:block; font-style:normal; font-size:var(--t-48); font-weight:800; line-height:1.02; letter-spacing:-.04em;
  color:var(--mint); margin-top:4px}
.momentum{margin:12px 0 0; font-size:var(--t-14); font-weight:600; color:#fff}
.meta{margin:4px 0 0; font-size:var(--t-13); color:rgba(255,255,255,.64); display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.how{display:inline-block}
.how summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:5px; color:rgba(255,255,255,.78);
  font-weight:600; text-decoration:underline; text-decoration-color:rgba(255,255,255,.3)}
.how summary::-webkit-details-marker{display:none}
.how summary svg.i{width:14px; height:14px}
.how p{margin:6px 0 0; max-width:46ch; color:rgba(255,255,255,.72)}
.ring{position:relative; width:112px; height:112px}
.ring svg{transform:rotate(-90deg); display:block}
.ring .mid{position:absolute; inset:0; display:grid; place-content:center; text-align:center}
.ring .mid b{font-size:var(--t-20); font-weight:700; letter-spacing:-.03em; line-height:1}
.ring .mid span{font-size:var(--t-11); color:rgba(255,255,255,.62); margin-top:3px}
.next{position:relative; margin:22px -28px 0; padding:14px 28px; border-top:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:rgba(255,255,255,.025)}
.next h3{margin:0; font-size:var(--t-13); font-weight:600; color:rgba(255,255,255,.64)}
.next ul{margin:0; padding:0; list-style:none; display:flex; gap:16px; font-size:var(--t-13); font-weight:600}
.next ul span{color:rgba(255,255,255,.64); font-weight:500; margin-right:4px}
.next .acts{margin-left:auto; display:flex; gap:8px; align-items:center}
.btn.mint{background:var(--mint); color:var(--mint-ink); border-color:transparent}
.btn.mint:hover{background:#1FB888}

/* ---- Bleibt: eine Rechnung, keine Kennzahl ---- */
.ledger{display:flex; flex-direction:column; gap:9px; font-size:var(--t-13)}
.ledger div{display:flex; justify-content:space-between; gap:12px; color:var(--ink-2)}
.ledger b{font-weight:600; color:var(--ink)}
.ledger .tot{margin-top:6px; padding-top:12px; border-top:1px solid var(--line); align-items:baseline}
.ledger .tot span{font-weight:600; color:var(--ink)}
.ledger .tot b{font-size:var(--t-28); font-weight:700; letter-spacing:-.035em}
.note{margin:12px 0 0; font-size:var(--t-12); color:var(--muted)}

/* ---- Punktraster ---- */
.sub{margin:-6px 0 14px; font-size:var(--t-12); color:var(--muted)}
.leg{display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; font-size:var(--t-11); color:var(--muted); margin:0 0 16px}
.leg span{display:flex; align-items:center; gap:7px}
.dot{width:22px; height:22px; border-radius:50%; display:block; justify-self:center}
.leg .dot{width:10px; height:10px; justify-self:start}
.d0{background:#fff; box-shadow:inset 0 0 0 1.5px #9AA4A1}
.d1{background:repeating-linear-gradient(135deg, var(--mint-deep) 0 1.6px, transparent 1.6px 4.4px); box-shadow:inset 0 0 0 1.5px var(--mint-deep)}
.d2{background:var(--mint); box-shadow:inset 0 0 0 1.5px var(--mint-deep)}
.d3{background:var(--ink)}
.matrix{display:grid; grid-template-columns:92px repeat(6,1fr); gap:12px 6px; align-items:center}
.matrix .rl{font-size:var(--t-12); color:var(--ink-2); font-weight:500}
.matrix .cl{font-size:var(--t-11); color:var(--muted); text-align:center; font-weight:600}
.matrix .cl.now{color:var(--mint-deep)}
.sum{display:flex; justify-content:space-between; gap:10px; margin-top:16px; padding-top:13px; border-top:1px solid var(--line);
  font-size:var(--t-12); color:var(--muted)}
.sum b{color:var(--ink); font-weight:600}

/* ---- Bleibt-Verlauf ---- */
.chart{position:relative; flex:1; min-height:150px; margin:26px 0 0}
.chart svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.chart .gl{position:absolute; left:0; right:0; border-top:1px solid var(--line)}
.chart .gl.base{border-top-color:rgba(10,14,13,.22)}
.chart .gl span{position:absolute; left:0; top:-17px; font-size:var(--t-11); color:var(--muted); font-weight:600}
.chart .end{position:absolute; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:var(--mint);
  box-shadow:0 0 0 2.5px #fff, 0 2px 6px rgba(10,40,30,.25)}
.chart .endlbl{position:absolute; transform:translate(-100%,0); margin:10px 0 0 -10px; font-size:var(--t-12); font-weight:700}
.months{display:grid; grid-template-columns:repeat(6,1fr); font-size:var(--t-11); color:var(--muted); text-align:center; margin-top:8px; font-weight:600}
.months .now{color:var(--mint-deep)}

/* ---- Budgets ---- */
.c-budget{display:flex; flex-direction:column}
.blist{display:flex; flex-direction:column; gap:16px}
.brow .bt{display:flex; justify-content:space-between; gap:10px; font-size:var(--t-13); font-weight:600; margin-bottom:8px}
.brow .bt span{color:var(--muted); font-weight:600}
.brow .bt span.warning{color:var(--warn)}
.brow .bt span.exceeded{color:var(--bad)}
.track{height:7px; border-radius:99px; background:#E9EEEC; overflow:hidden}
.track i{display:block; height:100%; border-radius:99px; background:var(--ink-2)}
.track i.warning{background:#C98A2E}
.track i.exceeded{background:#C9532F}
.brow small{display:block; margin-top:6px; font-size:var(--t-12); color:var(--muted)}
.btotal{margin-top:auto; padding-top:14px; border-top:1px solid var(--line); display:flex; justify-content:space-between;
  font-size:var(--t-12); color:var(--muted)}
.btotal b{color:var(--ink); font-weight:600}

/* ---- Zuletzt erfasst ---- */
.rows{display:flex; flex-direction:column}
.row{display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.ic{width:34px; height:34px; border-radius:11px; background:var(--chip); display:grid; place-items:center; color:var(--ink-2); flex:none}
.ic.in{background:rgba(37,199,150,.14); color:var(--mint-deep)}
.row .w{flex:1; min-width:0}
.row .w b{display:block; font-size:var(--t-13); font-weight:600}
.row .w span{font-size:var(--t-12); color:var(--muted)}
.row .a{font-weight:600; font-size:var(--t-13); white-space:nowrap}
.row .a.in{color:var(--mint-deep)}
.more{font-size:var(--t-12); font-weight:600; color:var(--ink-2); text-decoration:underline; text-decoration-color:var(--line)}

/* ---- Monatsbericht ---- */
.c-report{background:var(--ink); color:#fff; border-color:transparent; display:flex; flex-direction:column; justify-content:space-between;
  gap:18px; box-shadow:0 20px 40px -24px rgba(0,0,0,.55)}
.c-report .top{display:flex; justify-content:space-between; align-items:flex-start}
.c-report .top > svg.i{width:22px; height:22px; color:rgba(255,255,255,.7)}
.c-report h3{margin:0; font-size:var(--t-16); font-weight:700; letter-spacing:-.02em}
.c-report p{margin:6px 0 0; font-size:var(--t-12); color:rgba(255,255,255,.64); line-height:1.6}


/* ================= App additions (beyond the approved draft) ================= */
button{font-family:inherit}
.muted{color:var(--muted)}
.neg{color:var(--bad)}
.c-half{grid-column:span 6}
.c-wide{grid-column:span 8}
.c-full{grid-column:1 / -1}
.empty{padding:18px 4px; color:var(--muted); font-size:var(--t-13); display:flex; flex-direction:column; align-items:flex-start; gap:12px}
.empty p{margin:0}
.c-debt .empty, .c-debt .meta{color:rgba(255,255,255,.7)}
.debt-h em.unknown{color:#fff; font-size:var(--t-28)}
.c-debt .next h3{margin:0; font-size:var(--t-13); font-weight:600; color:rgba(255,255,255,.64)}
.ledger b.neg{color:var(--bad)}

/* rows are buttons: whole row opens the editor */
.row{width:100%; background:none; border:0; border-bottom:1px solid var(--line); text-align:left; color:inherit; font:inherit; cursor:pointer;
  border-radius:0; transition:background 160ms}
.row:hover{background:rgba(10,14,13,.025)}
.row.static{cursor:default}
.row.static:hover{background:none}
.row .w b, .row .w span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rows.big .day + .day{margin-top:14px}
.day h4{margin:0 0 2px; font-size:var(--t-12); font-weight:600; color:var(--muted)}
.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px}
.search{display:flex; align-items:center; gap:8px; flex:1; min-width:180px; padding:0 12px; border-radius:999px; background:var(--chip); color:var(--muted)}
.search input{flex:1; border:0; background:transparent; font:inherit; font-size:var(--t-13); padding:9px 0; color:var(--ink); outline:none}
.search:focus-within{outline:2px solid var(--mint-deep); outline-offset:2px}

/* segmented control */
.seg{display:inline-flex; gap:3px; padding:3px; border-radius:999px; background:var(--chip)}
.seg label{position:relative}
.seg input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.seg span{display:block; padding:7px 14px; border-radius:999px; font-size:var(--t-13); font-weight:600; color:var(--ink-2); transition:background 160ms}
.seg input:checked + span{background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(10,30,22,.08), 0 4px 10px -6px rgba(10,30,22,.2)}
.seg input:focus-visible + span{outline:2px solid var(--mint-deep); outline-offset:1px}

/* buttons */
.btn.danger{color:var(--bad)}
.btn.wide{width:100%; justify-content:center; margin-top:14px}
.btn.mint:hover{background:#1FB888}
a.round{text-decoration:none}

/* debts page */
.debt-card .forecast{margin:-6px 0 12px; font-size:var(--t-13); font-weight:600; color:var(--ink-2)}
.debt-card .forecast.good{color:var(--mint-deep)}
.debt-card .track{margin-bottom:16px}
.track i.paid{background:var(--mint)}
.payments{margin-top:14px; font-size:var(--t-13)}
.payments summary{cursor:pointer; font-weight:600; color:var(--ink-2)}
.payments .rows{margin-top:8px}

/* analysis bars */
.bars{display:flex; flex-direction:column; gap:14px}
.hb .bt{display:flex; justify-content:space-between; gap:10px; font-size:var(--t-13); margin-bottom:6px}
.hb .bt b{font-weight:600}
.hb .track i{background:var(--ink-2)}
.chart .area{fill:rgba(37,199,150,.16)}

/* settings */
.acts-row{display:flex; gap:8px; flex-wrap:wrap}
.split{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:16px}
.check{display:flex; align-items:center; gap:10px; font-size:var(--t-13)}
.check input{width:18px; height:18px; accent-color:var(--mint-deep)}

/* dialog */
.dlg{border:0; padding:0; border-radius:26px; width:min(460px, calc(100vw - 24px)); max-height:calc(100dvh - 24px);
  background:#fff; color:var(--ink); box-shadow:0 30px 80px -20px rgba(10,20,16,.45)}
.dlg::backdrop{background:rgba(10,14,13,.28); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.dlg[open]{display:flex; flex-direction:column}
.dlg-head{display:flex; align-items:center; justify-content:space-between; padding:20px 20px 4px 24px}
.dlg-head h2{margin:0; font-size:var(--t-20); font-weight:700; letter-spacing:-.02em}
.form{padding:12px 24px; display:flex; flex-direction:column; gap:14px; overflow:auto}
.field{display:flex; flex-direction:column; gap:6px}
.flabel{font-size:var(--t-12); font-weight:600; color:var(--ink-2)}
.field small{font-size:var(--t-12); color:var(--muted)}
.field input, .field select{font:inherit; font-size:16px; padding:11px 13px; border-radius:13px; border:1px solid rgba(10,14,13,.14); background:#fff; color:var(--ink); width:100%}
.field input:focus, .field select:focus{outline:2px solid var(--mint-deep); outline-offset:1px; border-color:transparent}
.form-msg{margin:0; min-height:1em; font-size:var(--t-13); color:var(--bad); font-weight:600}
.form-msg:empty{display:none}
.dlg-foot{display:flex; gap:8px; align-items:center; padding:12px 20px 20px}
.icons{display:grid; grid-template-columns:repeat(auto-fill, minmax(40px,1fr)); gap:6px}
.icons label{position:relative}
.icons input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.icons span{display:grid; place-items:center; height:40px; border-radius:12px; background:var(--chip); color:var(--ink-2)}
.icons input:checked + span{background:var(--ink); color:#fff}
.icons input:focus-visible + span{outline:2px solid var(--mint-deep); outline-offset:1px}

/* toast */
.toast{position:fixed; z-index:20; left:50%; bottom:28px; transform:translateX(-50%); background:var(--ink); color:#fff; padding:11px 18px;
  border-radius:999px; font-size:var(--t-13); font-weight:600; box-shadow:0 14px 30px -12px rgba(0,0,0,.5); transition:opacity 300ms, transform 300ms}
.toast.bad{background:var(--bad)}
.toast.out{opacity:0; transform:translate(-50%, 8px)}
[aria-busy="true"] > *{opacity:.55; transition:opacity 200ms}

/* ---- Laptop ---- */
@media (max-width:1280px){
  .c-debt{grid-column:span 12} .c-left{grid-column:span 5} .c-dots{grid-column:span 7}
  .c-wide{grid-column:span 7}
  .c-net{grid-column:span 7} .c-budget{grid-column:span 5} .c-recent{grid-column:span 7} .c-report{grid-column:span 5}
}
/* ---- Handy: Status zuerst, Navigation unten ---- */
@media (max-width:900px){
  .frame{display:block; margin:0; padding:12px 12px 104px; border-radius:0; border:0; min-height:100%;
    background:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none}
  .side{position:fixed; z-index:5; left:10px; right:10px; bottom:10px; padding:6px; gap:0; flex-direction:row;
    border-radius:24px; background:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.95);
    backdrop-filter:blur(30px) saturate(160%); -webkit-backdrop-filter:blur(30px) saturate(160%);
    box-shadow:0 18px 40px -18px rgba(10,20,16,.3)}
  .brand,.glabel,.d-only,.side-end{display:none}
  .group{flex-direction:row; flex:1; gap:0}
  .group + .group{flex:0 0 auto}
  .m-only{display:flex}
  .nav{flex:1; flex-direction:column; gap:3px; padding:8px 4px; font-size:var(--t-11); justify-content:center; min-height:52px}
  .nav .end{display:none}
  main{padding:0}
  .bar{padding:2px 2px 6px}
  .m-brand{display:grid}
  .ava{display:none}
  .addbtn{width:44px; height:44px; padding:0; justify-content:center}
  .addbtn span{display:none}
  .addbtn svg.i{width:20px; height:20px}
  .tabs{order:3; width:100%; justify-content:space-between}
  .tab{flex:1}
  .well{padding:14px; border-radius:24px; gap:14px}
  .grid{display:flex; flex-direction:column; gap:12px}
  .toast{bottom:96px}
  .dlg-foot{flex-wrap:wrap}
  .c-debt{order:1} .c-left{order:2} .c-net{order:3} .c-dots{order:4} .c-budget{order:5} .c-recent{order:6} .c-report{order:7}
  .c-debt{padding:22px 20px 0}
  .debt-main{grid-template-columns:1fr; gap:16px}
  .ring{width:88px; height:88px; grid-row:1}
  .ring svg{width:88px; height:88px}
  .debt-h em{font-size:40px}
  .next{margin:20px -20px 0; padding:14px 20px}
  .next .acts{margin-left:0; width:100%}
  .next .acts .btn{flex:1; justify-content:center}
  .matrix{grid-template-columns:84px repeat(6,1fr)}
  .dot{width:20px; height:20px}
}
@media (pointer:coarse){ .round,.ava{width:44px; height:44px} .add{width:32px; height:32px} }
@media (prefers-reduced-transparency:reduce){
  .frame,.side{background:#F6F8F7; backdrop-filter:none; -webkit-backdrop-filter:none}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }

.bar .set{display:none}
@media (max-width:900px){ .bar .set{display:grid} }

/* ---- login ---- */
body.login{display:grid; place-items:center; min-height:100dvh; padding:20px}
.login-card{position:relative; z-index:1; width:min(400px,100%); padding:32px 28px; border-radius:30px; background:var(--frame);
  border:1px solid rgba(255,255,255,.9); backdrop-filter:blur(40px) saturate(160%); -webkit-backdrop-filter:blur(40px) saturate(160%);
  box-shadow:inset 0 1px 0 #fff, 0 40px 90px -40px rgba(10,20,16,.2); display:flex; flex-direction:column; gap:14px}
.login-card .brand{padding:0 0 10px}
.login-card h1{margin:0; font-size:var(--t-28); font-weight:700; letter-spacing:-.03em}
.login-card p{margin:0; color:var(--muted); font-size:var(--t-14)}
.login-card .btn.wide{padding:13px 16px; font-size:var(--t-14)}