/* ============================================================
   Finanzen – gemeinsames App-Design
   Eine Farbwelt und Schrift für alle Seiten (abgeleitet vom Cockpit),
   untere Tab-Leiste, Schnell-Erfassen, App-Sperre, Toasts.
   ============================================================ */
:root{
  --app-bg:#f3f5fa; --app-bg2:#eaeef6; --app-panel:#ffffff; --app-panel2:#eef1f8;
  --app-line:#dde3ef; --app-line2:#c9d2e3;
  --app-fg:#111a2e; --app-muted:#4f5b75; --app-dim:#78839b;
  --app-accent:#d9620a; --app-accent-ink:#ffffff; --app-accent-soft:rgba(217,98,10,.10);
  --app-in:#0f9f6e; --app-in-soft:rgba(15,159,110,.12); --app-out:#d64545; --app-out-soft:rgba(214,69,69,.10);
  --app-blue:#3157c8; --app-blue-soft:rgba(49,87,200,.10); --app-warn:#b7791f; --app-warn-soft:rgba(183,121,31,.12);
  --app-grid:rgba(17,26,46,.05); --app-bar:rgba(255,255,255,.9); --app-scrim:rgba(8,12,24,.45);
  --app-shadow:0 12px 32px rgba(17,26,46,.14);
  --app-f-display:"Unbounded","Arial Black",system-ui,sans-serif;
  --app-f-body:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --app-f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --app-bar-h:62px;
  color-scheme:light;

  /* Abbildung für die Kontoanalyse */
  --font-anthropic-sans:var(--app-f-body); --font-anthropic-serif:var(--app-f-display);
  --color-fg:var(--app-fg); --color-fg-muted:var(--app-muted); --color-bg:var(--app-bg); --color-panel:var(--app-panel);
  --color-border-line:var(--app-line); --color-ok:var(--app-in); --color-bad:var(--app-out);
  --cds-gap-xs:4px; --cds-gap-sm:8px; --cds-gap-md:14px; --cds-gap-lg:22px;
  --cds-pad-xs:4px; --cds-pad-sm:8px; --cds-pad-md:16px; --cds-pad-lg:22px;
  --cds-font-size-caption:.8125rem; --cds-font-size-body:.9375rem; --cds-font-size-title:1.55rem; --cds-font-size-heading:1.06rem;
  --cds-font-weight-medium:600; --cds-radius:16px;
  --cds-chart-grid:var(--app-line); --cds-chart-muted:var(--app-line2); --cds-chart-axis:var(--app-dim); --cds-chart-reference:var(--app-dim);
  --cds-chart-status-critical:var(--app-out); --cds-text-secondary:var(--app-muted);
  --cds-surface-popover:var(--app-panel); --cds-shadow-popover:var(--app-shadow); --cds-border:var(--app-line); --cds-dur-slow:.35s;
}
@media (prefers-color-scheme:dark){
  :root{
    --app-bg:#070b16; --app-bg2:#0b1222; --app-panel:#111a2e; --app-panel2:#172139;
    --app-line:#1f2a44; --app-line2:#2c3958;
    --app-fg:#eaeef8; --app-muted:#a3aec6; --app-dim:#6b7792;
    --app-accent:#ff8a2a; --app-accent-ink:#1a0c00; --app-accent-soft:rgba(255,138,42,.13);
    --app-in:#34d399; --app-in-soft:rgba(52,211,153,.13); --app-out:#f87171; --app-out-soft:rgba(248,113,113,.12);
    --app-blue:#8aa5ff; --app-blue-soft:rgba(138,165,255,.13); --app-warn:#fbbf24; --app-warn-soft:rgba(251,191,36,.12);
    --app-grid:rgba(255,255,255,.04); --app-bar:rgba(9,14,27,.9); --app-scrim:rgba(0,0,0,.6);
    --app-shadow:0 12px 32px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}

/* Geldplan und Wohnung übernehmen die App-Farben und -Schrift */
html[data-page="plan"]:root:root{
  --bg:var(--app-bg); --paper:var(--app-panel); --ink:var(--app-fg); --muted:var(--app-muted);
  --line:var(--app-line); --grid:var(--app-grid);
  --blue:var(--app-blue); --blue-soft:var(--app-blue-soft); --orange:var(--app-accent); --orange-soft:var(--app-accent-soft);
  --good:var(--app-in); --good-soft:var(--app-in-soft); --warn:var(--app-warn); --warn-soft:var(--app-warn-soft);
  --bad:var(--app-out); --bad-soft:var(--app-out-soft);
  --display:var(--app-f-body); --body:var(--app-f-body); --mono:var(--app-f-mono);
}
html[data-page="plan"] h1,html[data-page="plan"] h2,html[data-page="plan"] h3{letter-spacing:-.02em!important;font-weight:700!important}

/* ---------- Grundlagen ---------- */
*{box-sizing:border-box}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0}
body{background:var(--app-bg);color:var(--app-fg);font-family:var(--app-f-body)}
body{padding-bottom:calc(var(--app-bar-h) + env(safe-area-inset-bottom,0px) + 20px)}
button,input,select,a{touch-action:manipulation}
[hidden]{display:none!important}
.app-main{max-width:1100px;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 14px) max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px))}
html[data-page="analyse"] body{background:radial-gradient(circle,var(--app-grid) 1px,transparent 1.2px) 0 0/22px 22px,var(--app-bg)}
html[data-page="analyse"] #dash-root .ka-head h1{font-weight:700;letter-spacing:-.03em;font-size:clamp(1.3rem,5.6vw,1.9rem)}
html[data-page="analyse"] #dash-root .ka-tile .val{font-weight:700;letter-spacing:-.03em;font-size:clamp(1.15rem,5vw,1.5rem)}
html[data-page="analyse"] #dash-root .ka-tile,html[data-page="analyse"] #dash-root .ka-card{box-shadow:0 1px 0 var(--app-line)}

/* Seitenwechsel wie in einer App */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.16s}
.appbar{view-transition-name:appbar}

/* ---------- Tab-Leiste unten ---------- */
.appbar{position:fixed;left:0;right:0;bottom:0;z-index:30;font-family:var(--app-f-body);
  background:var(--app-bar);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);
  border-top:1px solid var(--app-line);padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.appbar-in{max-width:560px;margin:0 auto;height:var(--app-bar-h);display:grid;grid-template-columns:repeat(5,1fr);align-items:stretch}
.appbar a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;
  color:var(--app-dim);font:500 10.5px/1 var(--app-f-body);letter-spacing:.01em;user-select:none;-webkit-user-select:none}
.appbar a svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.appbar a:active svg{transform:scale(.88)}
.appbar a[aria-current="page"]{color:var(--app-accent)}
.appbar a[aria-current="page"]::before{content:"";position:absolute;top:-1px;left:30%;right:30%;height:2.5px;border-radius:0 0 3px 3px;background:var(--app-accent)}
.appbar .badge{position:absolute;top:7px;left:calc(50% + 7px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--app-out);color:#fff;font:700 10px/16px var(--app-f-body);text-align:center}
.app-plus{justify-self:center;align-self:center;width:52px;height:52px;margin-top:-18px;border:0;border-radius:18px;cursor:pointer;
  background:var(--app-accent);color:var(--app-accent-ink);display:grid;place-items:center;
  box-shadow:0 8px 20px color-mix(in srgb,var(--app-accent) 40%,transparent),0 0 0 4px var(--app-bg);transition:transform .15s}
.app-plus svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.app-plus:active{transform:scale(.92)}
.app-plus .q{position:absolute;margin:-30px 0 0 34px;min-width:18px;height:18px;border-radius:9px;background:var(--app-blue);color:#fff;font:700 10px/18px var(--app-f-body);padding:0 5px}
@media (min-width:900px){
  .appbar{left:50%;right:auto;bottom:18px;width:min(520px,calc(100% - 32px));transform:translateX(-50%);border:1px solid var(--app-line);border-radius:22px;box-shadow:var(--app-shadow);padding:0}
  .appbar a[aria-current="page"]::before{display:none}
  body{padding-bottom:110px}
}

/* Geldplan / Wohnung Umschalter */
.app-seg{position:sticky;top:0;z-index:25;display:flex;justify-content:center;padding:calc(env(safe-area-inset-top,0px) + 10px) 16px 10px;
  background:color-mix(in srgb,var(--app-bg) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--app-line)}
.app-seg div{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;border-radius:12px;background:var(--app-panel2);width:min(360px,100%)}
.app-seg a{text-align:center;text-decoration:none;color:var(--app-muted);font:600 13.5px/1 var(--app-f-body);padding:9px 8px;border-radius:9px}
.app-seg a[aria-current="page"]{background:var(--app-panel);color:var(--app-fg);box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* ---------- Bottom-Sheets (Erfassen, Einstellungen) ---------- */
.app-sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;font-family:var(--app-f-body);color:var(--app-fg)}
.app-sheet .scrim{position:absolute;inset:0;background:var(--app-scrim);animation:app-fade .2s ease-out}
.app-sheet .card{position:relative;width:100%;max-width:520px;max-height:94dvh;overflow:auto;overscroll-behavior:contain;
  background:var(--app-panel);border-radius:24px 24px 0 0;border:1px solid var(--app-line);border-bottom:0;
  padding:8px max(16px,env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  animation:app-up .26s cubic-bezier(.2,.8,.2,1)}
@media (min-width:700px){.app-sheet{align-items:center}.app-sheet .card{border-radius:24px;border-bottom:1px solid var(--app-line);padding-bottom:16px}}
.app-sheet .grab{width:40px;height:5px;border-radius:3px;background:var(--app-line2);margin:2px auto 10px}
.app-sheet .head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.app-sheet h2{margin:0;font:700 17px var(--app-f-display);letter-spacing:-.01em}
.app-x{width:34px;height:34px;border-radius:50%;border:0;background:var(--app-panel2);color:var(--app-muted);font-size:20px;line-height:1;cursor:pointer}
@keyframes app-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes app-fade{from{opacity:0}to{opacity:1}}
.app-sheet.closing .card{transform:translateY(105%);transition:transform .2s ease-in}
.app-sheet.closing .scrim{opacity:0;transition:opacity .2s}

.seg2{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;border-radius:12px;background:var(--app-panel2)}
.seg2 button{border:0;background:transparent;color:var(--app-muted);font:600 14px var(--app-f-body);padding:9px;border-radius:9px;cursor:pointer}
.seg2 button[aria-pressed="true"]{background:var(--app-panel);color:var(--app-fg);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.seg2 button[data-v="Ausgabe"][aria-pressed="true"]{color:var(--app-out)}
.seg2 button[data-v="Einnahme"][aria-pressed="true"]{color:var(--app-in)}

/* Schnell-Erfassen */
.qa-amt{display:flex;align-items:baseline;justify-content:center;gap:6px;margin:14px 0 6px;font:700 clamp(40px,13vw,54px)/1 var(--app-f-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--app-out)}
.qa-amt.in{color:var(--app-in)}
.qa-amt .cur{font-size:.55em;color:var(--app-dim)}
.qa-amt.zero output{color:var(--app-line2)}
.qa-text{width:100%;border:1px solid var(--app-line);background:var(--app-bg);color:var(--app-fg);border-radius:14px;padding:12px 14px;font:500 16px var(--app-f-body);outline:none}
.qa-text:focus{border-color:var(--app-accent)}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:8px 0 2px;margin:0 -2px}
.chips::-webkit-scrollbar{display:none}
.chips.two{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);justify-content:start}
.chip{flex:none;border:1px solid var(--app-line);background:var(--app-panel);color:var(--app-fg);border-radius:999px;padding:7px 12px;font:500 13.5px var(--app-f-body);white-space:nowrap;cursor:pointer}
.chip.m{background:var(--app-panel2);border-color:transparent;color:var(--app-muted)}
.chip.m b{color:var(--app-fg);font-weight:600}
.chip[aria-pressed="true"]{background:var(--app-fg);border-color:var(--app-fg);color:var(--app-bg)}
.chip.sug:not([aria-pressed="true"]){border-color:var(--app-accent);color:var(--app-accent)}
.qa-meta{display:flex;gap:6px;align-items:center;margin-top:8px;flex-wrap:wrap}
.qa-meta select,.qa-meta input{border:1px solid var(--app-line);background:var(--app-panel);color:var(--app-fg);border-radius:10px;padding:7px 9px;font:500 13.5px var(--app-f-body);min-width:0}
.qa-meta .day[aria-pressed="true"]{background:var(--app-fg);color:var(--app-bg);border-color:var(--app-fg)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.pad button{border:0;background:var(--app-panel2);color:var(--app-fg);font:600 22px var(--app-f-body);height:52px;border-radius:14px;cursor:pointer;user-select:none;-webkit-user-select:none}
.pad button:active{background:var(--app-line)}
.pad button.fn{background:transparent;color:var(--app-muted)}
.app-btn{width:100%;margin-top:12px;border:0;border-radius:16px;padding:15px;font:700 16px var(--app-f-body);background:var(--app-accent);color:var(--app-accent-ink);cursor:pointer}
.app-btn:disabled{opacity:.45}
.app-btn.ghost{background:var(--app-panel2);color:var(--app-fg)}
.app-btn.danger{background:var(--app-out-soft);color:var(--app-out)}
.qa-err{color:var(--app-out);font-size:13px;min-height:1em;margin:6px 2px 0;text-align:center}

/* ---------- Toasts ---------- */
.app-toasts{position:fixed;left:0;right:0;bottom:calc(var(--app-bar-h) + env(safe-area-inset-bottom,0px) + 14px);z-index:70;display:grid;justify-items:center;gap:8px;pointer-events:none;padding:0 16px}
.app-toast{pointer-events:auto;display:flex;align-items:center;gap:12px;max-width:480px;width:100%;background:var(--app-fg);color:var(--app-bg);border-radius:14px;padding:11px 14px;font:500 14px var(--app-f-body);box-shadow:var(--app-shadow);animation:app-pop .22s ease-out}
.app-toast span{flex:1}
.app-toast button{border:0;background:transparent;color:var(--app-accent);font:700 14px var(--app-f-body);cursor:pointer;padding:4px}
@keyframes app-pop{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}

/* ---------- App-Sperre ---------- */
html.app-locked body>*:not(.app-lock){visibility:hidden!important}
html.app-locked{overflow:hidden}
.app-lock{display:none}
html.app-locked .app-lock{display:flex}
.app-lock{position:fixed;inset:0;z-index:100;align-items:center;justify-content:center;background:var(--app-bg);color:var(--app-fg);font-family:var(--app-f-body);
  padding:calc(env(safe-area-inset-top,0px) + 20px) 24px calc(env(safe-area-inset-bottom,0px) + 20px)}
.app-lock .in{width:min(320px,100%);display:grid;justify-items:center;gap:10px;text-align:center}
.app-lock .ic{width:64px;height:64px;border-radius:20px;background:var(--app-accent);color:var(--app-accent-ink);display:grid;place-items:center;margin-bottom:6px}
.app-lock .ic svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.app-lock h2{margin:0;font:700 20px var(--app-f-display);letter-spacing:-.02em}
.app-lock p{margin:0;color:var(--app-muted);font-size:14px;min-height:1.3em}
.dots{display:flex;gap:12px;margin:8px 0 4px}
.dots i{width:13px;height:13px;border-radius:50%;border:2px solid var(--app-line2)}
.dots i.on{background:var(--app-fg);border-color:var(--app-fg)}
.dots.shake{animation:app-shake .35s}
@keyframes app-shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.app-lock .pad{width:100%}
.app-lock .pad button{height:58px;border-radius:50%;width:58px;justify-self:center;font-size:24px}
.app-lock .pad button.fn{font-size:14px;font-weight:600}
.link-btn{border:0;background:none;color:var(--app-accent);font:600 14px var(--app-f-body);cursor:pointer;padding:8px}

/* ---------- Einstellungen ---------- */
.set-list{display:grid;gap:2px;margin:6px 0 4px;border-radius:16px;overflow:hidden;background:var(--app-line)}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--app-panel2);padding:13px 14px;font-size:15px}
.set-row small{display:block;color:var(--app-muted);font-size:12.5px;margin-top:2px}
.set-row select{border:1px solid var(--app-line);background:var(--app-panel);color:var(--app-fg);border-radius:10px;padding:6px 8px;font:500 14px var(--app-f-body)}
.set-h{margin:16px 4px 4px;font:600 12px var(--app-f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--app-dim)}
.switch{position:relative;width:50px;height:30px;flex:none;border:0;border-radius:15px;background:var(--app-line2);cursor:pointer;transition:background .2s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.switch[aria-checked="true"]{background:var(--app-in)}
.switch[aria-checked="true"]::after{transform:translateX(20px)}
.set-note{color:var(--app-muted);font-size:12.5px;line-height:1.45;margin:8px 4px 0}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Kontoanalyse: Reiter in einer Zeile, seitlich wischbar */
html[data-page="analyse"] #dash-root .ka-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
html[data-page="analyse"] #dash-root .ka-tabs::-webkit-scrollbar{display:none}
html[data-page="analyse"] #dash-root .ka-tab{flex:none;white-space:nowrap}

/* ---------- Finanz-Umschalter (4) ---------- */
.app-seg.four div{grid-template-columns:repeat(4,1fr);width:min(460px,100%)}
.app-seg.four a{font-size:12.5px;padding:9px 4px}
.app-seg.static{position:relative;border-bottom:0;padding-bottom:4px}

/* ---------- +-Menü ---------- */
.add-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 6px;padding:6px 0 4px}
.add-it{display:grid;justify-items:center;gap:6px;border:0;background:none;color:var(--app-fg);font:500 12px/1.2 var(--app-f-body);cursor:pointer;padding:6px 2px;border-radius:14px;text-align:center}
.add-it:active{background:var(--app-panel2)}
.add-it .ic{width:50px;height:50px;border-radius:16px;display:grid;place-items:center}
.add-it .ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.c0{background:var(--app-panel2);color:var(--app-muted)}
.c1{background:var(--app-accent-soft);color:var(--app-accent)} .c2{background:var(--app-blue-soft);color:var(--app-blue)}
.c3{background:var(--app-in-soft);color:var(--app-in)} .c4{background:var(--app-warn-soft);color:var(--app-warn)}
.c5{background:color-mix(in srgb,#8b5cf6 13%,transparent);color:#8b5cf6}
@media (prefers-color-scheme:dark){.c5{color:#b69cff}}

/* ---------- Formulare ---------- */
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 10px}
.f{grid-column:1/-1;display:grid;gap:5px;min-width:0}
.f.half{grid-column:span 1}
.f.row{display:flex;align-items:center;justify-content:space-between;background:var(--app-panel2);border-radius:12px;padding:8px 12px}
.f label{font:600 12.5px var(--app-f-body);color:var(--app-muted)}
.f small{color:var(--app-dim);font-size:12px}
.f input,.f select,.f textarea{width:100%;min-width:0;border:1px solid var(--app-line);background:var(--app-bg);color:var(--app-fg);border-radius:12px;padding:11px 12px;font:500 16px var(--app-f-body);outline:none;-webkit-appearance:none;appearance:none}
.f select{background-image:linear-gradient(45deg,transparent 50%,var(--app-dim) 50%),linear-gradient(135deg,var(--app-dim) 50%,transparent 50%);background-position:calc(100% - 17px) 52%,calc(100% - 12px) 52%;background-size:5px 5px;background-repeat:no-repeat;padding-right:30px}
.f textarea{resize:vertical;line-height:1.45}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--app-accent)}
.chips.wrap{flex-wrap:wrap;overflow:visible;padding:2px 0}
.f-form .app-btn.danger{margin-top:8px}