/* ============================================================================
   Haushaltsbuch — Gestaltung

   Zwei Dinge, die zusammenkommen müssen:
   1. Die Ruhe einer guten Finanz-App: eine große Zahl, viel Luft, kaum Rahmen.
   2. Die Übersichtlichkeit der Numbers-Vorlage: Bereiche farbig getrennt,
      Plan und Ist nebeneinander, alles auf einen Blick.

   Farben der Bereiche stammen aus einer geprüften kategorialen Palette
   (Slots 1–5 in fester Reihenfolge). Sie sind auf Farbfehlsichtigkeit
   geprüft; die Reihenfolge ist der Prüfmechanismus und wird nicht geändert.
   ========================================================================= */

:root{
  color-scheme: light;

  /* Flächen */
  --bg:#ffffff;
  --surface:#ffffff;
  --raised:#f5f6f5;
  --sunken:#fafbfa;
  --hairline:#e7e9e7;
  --hairline-strong:#d3d7d4;

  /* Schrift */
  --ink:#0b0f0d;
  --ink-2:#3a423e;
  --muted:#6b7370;
  --faint:#98a09c;

  /* Zustand — reserviert, nie als Bereichsfarbe */
  --good:#0e9e68;
  --good-soft:#e6f5ee;
  --bad:#c8372c;
  --bad-soft:#fbeae8;
  --warn:#b4700d;
  --warn-soft:#fbf1e0;

  /* Bedienelemente */
  --accent:#0b0f0d;
  --on-accent:#ffffff;

  /* Bereiche (geprüfte kategoriale Palette, feste Reihenfolge) */
  --area-1:#2a78d6;   /* Einnahmen */
  --area-2:#eb6834;   /* Fixkosten */
  --area-3:#1baf7a;   /* Budgets   */
  --area-4:#eda100;   /* Investitionen */
  --area-5:#e87ba4;   /* Privat    */

  --r:14px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#0b0c0b;
    --surface:#101210;
    --raised:#191c19;
    --sunken:#0e100e;
    --hairline:#232622;
    --hairline-strong:#333833;
    --ink:#fafbfa;
    --ink-2:#d4d9d6;
    --muted:#8b938e;
    --faint:#6a726e;
    --good:#2fd79a;
    --good-soft:#0f2b21;
    --bad:#ff6b5e;
    --bad-soft:#2c1512;
    --warn:#e5a84a;
    --warn-soft:#2a1f0e;
    --accent:#fafbfa;
    --on-accent:#0b0c0b;
    --area-1:#3987e5;
    --area-2:#d95926;
    --area-3:#199e70;
    --area-4:#c98500;
    --area-5:#d55181;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0b0c0b; --surface:#101210; --raised:#191c19; --sunken:#0e100e;
  --hairline:#232622; --hairline-strong:#333833;
  --ink:#fafbfa; --ink-2:#d4d9d6; --muted:#8b938e; --faint:#6a726e;
  --good:#2fd79a; --good-soft:#0f2b21; --bad:#ff6b5e; --bad-soft:#2c1512;
  --warn:#e5a84a; --warn-soft:#2a1f0e;
  --accent:#fafbfa; --on-accent:#0b0c0b;
  --area-1:#3987e5; --area-2:#d95926; --area-3:#199e70; --area-4:#c98500; --area-5:#d55181;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-bottom:calc(92px + var(--safe-b));
}


.loading{padding:40vh 20px;text-align:center;color:var(--muted)}

/* ---------------------------------------------------------------- Kopfzeile */

.top{
  position:sticky;top:0;z-index:30;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--hairline);
  display:flex;align-items:center;gap:10px;
  padding:calc(10px + var(--safe-t)) 20px 10px;
}
.sphere{
  appearance:none;border:0;background:var(--raised);color:var(--ink);
  font-family:inherit;font-weight:600;font-size:14px;line-height:1;letter-spacing:-.01em;
  padding:9px 30px 9px 14px;border-radius:999px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 16px) 15px,calc(100% - 11px) 15px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.sphere.private{box-shadow:inset 0 0 0 1.5px var(--area-5)}
.top .spacer{flex:1}
.iconbtn{
  border:0;background:var(--raised);color:var(--muted);
  width:34px;height:34px;border-radius:999px;font-size:14px;cursor:pointer;
  display:grid;place-items:center;
}
.iconbtn:hover{color:var(--ink)}

main{max-width:560px;margin:0 auto;padding:0 20px}

/* ------------------------------------------------------------- Kernzahlen */

.hero{padding:34px 0 6px;text-align:center}
.hero .label{
  font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px;
}
.hero .amount{
  font-size:clamp(30px,11vw,58px);font-weight:600;letter-spacing:-.035em;
  line-height:1;margin:0 0 8px;font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.hero .amount.negative{color:var(--bad)}
.hero .sub{font-size:14.5px;color:var(--muted)}
.hero .delta{font-size:14.5px;font-weight:500;font-variant-numeric:tabular-nums}
.hero .delta.up{color:var(--good)}
.hero .delta.down{color:var(--bad)}
.hero .flag{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-size:12.5px;padding:5px 12px;border-radius:999px;
  background:var(--raised);color:var(--muted);
}
.hero .flag.warn{background:var(--warn-soft);color:var(--warn)}
.hero .flag.bad{background:var(--bad-soft);color:var(--bad)}

/* Aufteilung des Monats als ein Balken — ersetzt das Kreisdiagramm der Vorlage */
.split{margin:22px 0 6px}
.split .track{
  display:flex;gap:2px;height:10px;border-radius:999px;overflow:hidden;
  background:var(--raised);
}
.split .track i{display:block;height:100%}
.split .keys{
  display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;
  font-size:13px;color:var(--muted);justify-content:center;
}
.split .keys b{
  display:inline-flex;align-items:center;gap:7px;font-weight:400;
}
.split .keys b::before{
  content:"";width:8px;height:8px;border-radius:2px;background:var(--c);
}
.split .keys span{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:500}

/* Kennzahlen nebeneinander */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:26px;
  background:var(--hairline);border-radius:var(--r);overflow:hidden}
.tile{background:var(--surface);padding:14px 12px;text-align:center}
.tile .k{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.tile .v{font-size:19px;font-weight:600;letter-spacing:-.02em;margin-top:5px;
  font-variant-numeric:tabular-nums;white-space:nowrap;min-width:0}
.tile .v.up{color:var(--good)} .tile .v.down{color:var(--bad)}
.report-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}

/* -------------------------------------------------------------- Abschnitte */

.section-title{
  font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin:32px 0 4px;display:flex;align-items:baseline;gap:10px;
}
.section-title .sum{margin-left:auto;font-weight:500;color:var(--faint);
  letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
.section-title[style*="--c"]::before{
  content:"";width:8px;height:8px;border-radius:2px;background:var(--c);
  display:inline-block;flex:none;
}

/* Listen ohne Rahmen; Trennlinien eingerückt wie in nativen Apps */
.list{display:flex;flex-direction:column}
.row{
  position:relative;display:block;width:100%;text-align:left;
  border:0;background:none;color:inherit;font:inherit;
  padding:13px 0;cursor:pointer;
}
.row+.row::before{
  content:"";position:absolute;left:var(--inset,0);right:0;top:0;
  height:1px;background:var(--hairline);
}
.row:active{background:var(--sunken)}
.row .line{display:flex;align-items:center;gap:12px}
.row .dot{
  width:10px;height:10px;border-radius:3px;flex:none;background:var(--c,var(--hairline-strong));
}
.row .name{font-weight:500;letter-spacing:-.01em;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.row .val{
  margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600;
  letter-spacing:-.02em;white-space:nowrap;
}
.row .val.muted{font-weight:400;color:var(--muted)}
.row .val.up{color:var(--good)} .row .val.down{color:var(--bad)}
.row .meta{
  display:flex;gap:14px;flex-wrap:wrap;margin:6px 0 0 22px;
  font-size:12.5px;color:var(--muted);
}
.row .meta .warn{color:var(--warn)} .row .meta .bad{color:var(--bad)}
.row .chev{color:var(--faint);margin-left:auto;font-size:15px}
.section-help{font-size:13.5px;color:var(--muted);margin:2px 0 14px;line-height:1.6}
.mini-heading{
  display:flex;align-items:center;gap:8px;margin:18px 0 5px;
  font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;
}
.mini-heading::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--c)}
.mini-heading span{margin-left:auto;font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0}

.scheduled-list{display:flex;flex-direction:column;gap:7px}
.scheduled-item{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;
  border-radius:12px;background:var(--raised);overflow:hidden;
}
.scheduled-item.paid{background:var(--good-soft)}
.scheduled-main{
  min-width:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;
  display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:9px;align-items:center;padding:11px 10px;
}
.status-dot{
  display:grid;place-items:center;width:22px;height:22px;border-radius:999px;
  border:1.5px solid var(--hairline-strong);color:var(--surface);font-size:12px;font-weight:800;
}
.paid .status-dot{border-color:var(--good);background:var(--good)}
.scheduled-copy{min-width:0}
.scheduled-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.scheduled-copy small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.scheduled-amount{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;font-size:clamp(11px,3.4vw,14px)}
.paid .scheduled-amount{color:var(--good)}
.status-action{
  border:0;border-left:1px solid var(--hairline);background:none;color:var(--ink-2);
  font:600 11.5px/1 system-ui,-apple-system,"Segoe UI",sans-serif;padding:0 11px;cursor:pointer;
}
.paid .status-action{border-left-color:color-mix(in srgb,var(--good) 20%,transparent);color:var(--good)}
.status-action:disabled{opacity:.45}

/* Fortschrittsbalken: Fläche ist die Bedeutung, kein Rahmen */
.meter{height:4px;border-radius:999px;background:var(--hairline);
  margin:9px 0 0 22px;overflow:hidden}
.meter i{display:block;height:100%;border-radius:999px;background:var(--c,var(--good))}
.meter.amber i{background:var(--warn)}
.meter.red i{background:var(--bad)}

/* --------------------------------------------------------------- Tabellen */

.table-scroll{width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
.sheet-table{
  width:100%;min-width:max-content;border-collapse:collapse;font-variant-numeric:tabular-nums;
  table-layout:auto;font-size:14.5px;
}
/* Zahlenspalten fest, die Bezeichnung bekommt den Rest — sonst wird
   „Investitionen" zu „Inv", was schlimmer ist als eine schmale Zahlenspalte. */
.sheet-table th:not(:first-child),.sheet-table td:not(:first-child){min-width:9ch;white-space:nowrap}
.sheet-table th+th,.sheet-table td+td{padding-left:8px}
/* Vier Zahlenspalten brauchen mehr Luft als drei. */
.sheet-table.compact{font-size:13.5px}
.sheet-table.compact th:not(:first-child),
.sheet-table.compact td:not(:first-child){min-width:10ch}
.sheet-table.compact td:first-child{font-size:13.5px}
.sheet-table th{
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);text-align:right;padding:0 0 10px;
}
.sheet-table th:first-child{text-align:left}
.sheet-table td{
  padding:11px 0;border-top:1px solid var(--hairline);text-align:right;
  font-weight:500;letter-spacing:-.01em;
}
.sheet-table td:first-child{
  text-align:left;font-weight:400;color:var(--ink-2);font-size:14px;
  display:flex;align-items:center;gap:8px;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.sheet-table td .dot{width:8px;height:8px;border-radius:2px;flex:none;background:var(--c)}
.sheet-table td.plan{color:var(--muted);font-weight:400}
.sheet-table td.delta.up{color:var(--good)} .sheet-table td.delta.down{color:var(--bad)}
.sheet-table tr.total td{
  border-top:1.5px solid var(--hairline-strong);font-weight:700;font-size:15.5px;
  letter-spacing:-.02em;padding-top:14px;
}
.sheet-table tr.total td:first-child{font-weight:600;color:var(--ink)}

/* --------------------------------------------------------- Bedienelemente */

.seg{
  display:inline-flex;gap:2px;background:var(--raised);border-radius:999px;
  padding:3px;margin:0 auto;
}
.segwrap{display:flex;justify-content:center;margin:18px 0 4px}
.seg button{
  border:0;background:none;color:var(--muted);font-family:inherit;font-weight:500;font-size:13px;line-height:1;
  padding:8px 15px;border-radius:999px;cursor:pointer;white-space:nowrap;
}
.seg button.on{background:var(--surface);color:var(--ink);
  box-shadow:0 1px 3px rgba(0,0,0,.10)}
:root[data-theme="dark"] .seg button.on,
:root:not([data-theme="light"]) .seg button.on{box-shadow:none;background:var(--hairline-strong)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  border:0;background:var(--raised);color:var(--ink-2);
  border-radius:999px;padding:9px 15px;font-family:inherit;font-weight:500;font-size:14px;line-height:1;cursor:pointer;
}
.chip.on{background:var(--accent);color:var(--on-accent)}
.chip.tag{font-size:13px;padding:7px 13px}
/* Sekundäre Aktion in einer Chip-Reihe: sichtbar, aber nicht wie eine Auswahl. */
.chip.ghost{background:none;color:var(--muted);box-shadow:inset 0 0 0 1px var(--hairline-strong)}
.chip.ghost:hover{color:var(--ink)}
/* Der leise Zusatz an einer Feldbeschriftung, der sagt, wofür das Feld da ist. */
label.f .dim{color:var(--faint);font-weight:400;text-transform:none;letter-spacing:0}
#tagsug:empty,#catkids:empty{display:none}
#tagsug{margin-top:10px}
#catbrowse{margin-top:12px;display:grid;gap:10px}

.btn{
  width:100%;padding:15px;border:0;border-radius:12px;
  background:var(--accent);color:var(--on-accent);
  font-family:inherit;font-weight:600;font-size:16px;line-height:1;letter-spacing:-.01em;cursor:pointer;margin-top:18px;
}
.btn[disabled]{opacity:.4}
.btn.ghost{background:var(--raised);color:var(--ink)}

label.f{
  display:block;font-size:12px;font-weight:500;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);margin:22px 0 8px;
}
input[type=search],input[type=text],input[type=date],input[type=month],input[type=password],input[type=file],select,textarea{
  width:100%;padding:13px 14px;border:0;border-radius:12px;
  background:var(--raised);color:var(--ink);font-family:inherit;font-weight:400;font-size:16px;line-height:1.3;
}
.toggle-row{
  display:flex;align-items:center;gap:16px;margin:22px 0 8px;padding:13px 14px;
  border-radius:12px;background:var(--raised);cursor:pointer;
}
.toggle-row>span{flex:1}
.toggle-row strong{display:block;font-size:14px}
.toggle-row small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.toggle-row input{width:22px;height:22px;accent-color:var(--good)}
.btn.danger{color:var(--bad)}
.split-edit{display:grid;grid-template-columns:minmax(0,1fr) 9ch;gap:8px;margin-bottom:8px}
.split-edit input{text-align:right;font-variant-numeric:tabular-nums}
input:focus-visible,select:focus-visible,textarea:focus-visible,
button:focus-visible,a:focus-visible{
  outline:2px solid var(--good);outline-offset:2px;
}
details.more{margin-top:20px}
details.more summary{color:var(--muted);font-size:14.5px;cursor:pointer;
  list-style:none;padding:6px 0}
details.more summary::-webkit-details-marker{display:none}
details.more summary::before{content:"▸ ";display:inline-block;transition:transform .15s}
details.more[open] summary::before{content:"▾ "}

/* --------------------------------------------------------------- Anmeldung */

#app.login{
  min-height:100dvh;display:grid;place-items:center;
  padding:calc(28px + var(--safe-t)) 20px calc(28px + var(--safe-b));
  background:var(--sunken);
}
.login-card{
  width:100%;max-width:392px;background:var(--surface);
  border-radius:22px;padding:32px 26px 26px;
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 18px 44px -26px rgba(0,0,0,.35);
}
:root[data-theme="dark"] .login-card,
:root:not([data-theme="light"]) .login-card{box-shadow:none;border:1px solid var(--hairline)}

.login-card .brand{display:flex;align-items:center;gap:12px}
.login-card .brand svg{width:38px;height:38px;flex:none;border-radius:10px}
.login-card .brand svg rect{fill:#16624f}
.login-card .brand svg path{fill:#eff1f0}
.login-card h1{font-size:21px;font-weight:600;letter-spacing:-.02em;margin:0}
.login-card .lead{color:var(--muted);font-size:14.5px;line-height:1.45;margin:14px 0 0}
.login-card .err{margin-top:18px}
.login-card form{margin:0}
.login-card label.f:first-of-type{margin-top:18px}
/* Beim Umbruch soll der Text unter dem Text bleiben, nicht unter dem Pfeil. */
.login-card details.more summary{display:flex;gap:3px;align-items:baseline}
.login-card details.more summary::before{flex:none}
.login-card .hint{
  color:var(--faint);font-size:12.5px;line-height:1.45;text-align:center;
  margin:24px 0 0;padding-top:18px;border-top:1px solid var(--hairline);
}

/* Trenner zwischen Passkey und Rückfalltür. */
.login-card .or{display:flex;align-items:center;gap:12px;margin-top:22px}
.login-card .or::before,.login-card .or::after{content:"";flex:1;height:1px;background:var(--hairline)}
.login-card .or span{color:var(--faint);font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}

/* Passwortfeld mit Sichtbarkeitsschalter im Feld. */
.pw-field{position:relative}
.pw-field input{padding-right:88px}
.pw-field button{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  border:0;background:none;color:var(--muted);cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:600;padding:8px 10px;border-radius:8px;
}
.pw-field button:hover{color:var(--ink)}

/* --------------------------------------------------------------- Erfassen */

nav.tabs .capture{
  flex:0 0 62px;display:grid;place-items:center;padding:0;
}
nav.tabs .capture span{
  width:42px;height:42px;border-radius:999px;
  background:var(--accent);color:var(--on-accent);
  display:grid;place-items:center;font-size:23px;font-weight:300;line-height:1;
}
nav.tabs .capture:active span{transform:scale(.92)}

.sheet{
  position:fixed;inset:0;z-index:50;background:var(--bg);
  display:flex;flex-direction:column;animation:up .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes up{from{transform:translateY(14px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sheet{animation:none}}
.sheet header{
  display:flex;align-items:center;gap:12px;
  padding:calc(12px + var(--safe-t)) 20px 12px;border-bottom:1px solid var(--hairline);
}
.sheet header h2{font-size:16px;font-weight:600;margin:0;flex:1;letter-spacing:-.01em}
.sheet .body{flex:1;overflow-y:auto;padding:20px;max-width:560px;margin:0 auto;width:100%}

.amountfield{
  width:100%;border:0;background:none;color:var(--ink);
  font-family:inherit;font-weight:600;font-size:46px;line-height:1.1;letter-spacing:-.035em;text-align:center;
  padding:18px 0 22px;font-variant-numeric:tabular-nums;
}
.amountfield::placeholder{color:var(--faint)}
.amountfield:focus{outline:none}

/* ----------------------------------------------------------- Rückmeldungen */

.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(84px + var(--safe-b));z-index:60;
  background:var(--ink);color:var(--bg);padding:13px 18px;border-radius:999px;
  font-size:14.5px;font-weight:500;display:flex;gap:16px;align-items:center;
  max-width:92vw;box-shadow:0 8px 30px -10px rgba(0,0,0,.6);
}
.toast button{background:none;border:0;color:var(--good);font-family:inherit;font-weight:600;font-size:14.5px;line-height:1;cursor:pointer}
.err{background:var(--bad-soft);color:var(--bad);padding:12px 14px;
  border-radius:12px;font-size:14px;margin-top:14px}
.empty{color:var(--muted);font-size:14.5px;padding:26px 0;text-align:center}
.pending{font-size:12px;font-weight:500;color:var(--warn);background:var(--warn-soft);
  border-radius:999px;padding:5px 11px;white-space:nowrap}

/* -------------------------------------------------------------- Buchungen */

.txn{position:relative;display:flex;gap:13px;padding:13px 0;align-items:center;cursor:pointer}
.txn+.txn::before{content:"";position:absolute;left:47px;right:0;top:0;height:1px;background:var(--hairline)}
.txn .d{
  font-size:11px;font-weight:600;color:var(--muted);width:34px;flex:none;
  text-align:center;line-height:1.25;
}
.txn .d b{display:block;font-size:15px;color:var(--ink);font-weight:600}
.txn .c{flex:1;min-width:0}
.txn .c .t{font-weight:500;letter-spacing:-.01em;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.txn .c .s{font-size:12.5px;color:var(--muted);display:block;margin-top:2px}
.txn .a{font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.txn .a.income{color:var(--good)}
.pill{display:inline-block;font-size:11px;background:var(--raised);
  border-radius:5px;padding:1px 6px;margin-left:5px;color:var(--muted)}
/* Der Anlass ist die dritte Dimension und darf nicht wie ein Tag aussehen. */
.pill.occasion{background:var(--good-soft);color:var(--good);font-weight:600}

/* -------------------------------------------------------- Budget-Karten */

.budget-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;margin-top:10px}
.budget-card{
  border:0;border-radius:14px;background:var(--raised);color:inherit;text-align:left;
  padding:14px;font:inherit;cursor:pointer;min-width:0;
}
.budget-head{display:flex;gap:10px;align-items:baseline}
.budget-head strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.budget-head b{margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap;font-size:clamp(12px,3.7vw,16px)}
.budget-head b.down{color:var(--bad)}
.budget-copy,.budget-foot{display:block;color:var(--muted);font-size:12px;margin-top:5px}
.budget-card .meter{margin-left:0;margin-top:11px;height:6px}

/* -------------------------------------------------------- Kreisdiagramm */

.donut-block{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;align-items:center;margin:16px 0 24px}
.donut{width:150px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center}
.donut>div{
  width:88px;aspect-ratio:1;border-radius:50%;background:var(--bg);display:grid;place-content:center;text-align:center;
}
.donut strong{font-size:15px;max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.donut span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.donut-legend{min-width:0}
.donut-legend>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:6px 0;font-size:13px}
.donut-legend>div::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--c);grid-row:1;align-self:center}
.donut-legend span{grid-column:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:16px;margin-top:-14px}
.donut-legend strong{grid-column:2;grid-row:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.donut-legend small{grid-column:2;color:var(--muted);text-align:right}
.range-tabs{overflow-x:auto;justify-content:flex-start;padding:2px;scrollbar-width:none}
.range-tabs::-webkit-scrollbar{display:none}

@media (max-width:520px){
  .scheduled-item{grid-template-columns:minmax(0,1fr)}
  .status-action{border-left:0;border-top:1px solid var(--hairline);padding:10px;text-align:center}
  .paid .status-action{border-top-color:color-mix(in srgb,var(--good) 20%,transparent)}
}

@media (max-width:360px){
  .donut-block{grid-template-columns:minmax(0,1fr)}
  .donut{margin:0 auto}
}

/* --------------------------------------------------------------- Diagramm */

.chartwrap{margin-top:18px}
.chart{width:100%;height:auto;display:block;overflow:visible;touch-action:pan-y}
.chart .g{stroke:var(--hairline);stroke-width:1}
.chart .z{stroke:var(--hairline-strong);stroke-width:1}
.chart .ax{fill:var(--faint);font-size:11px;font-family:inherit;font-variant-numeric:tabular-nums}
.chart .endlabel{fill:var(--ink);font-size:12px;font-weight:600;font-family:inherit}
.chart .cursor{stroke:var(--hairline-strong);stroke-width:1}
.legend{
  display:flex;gap:8px 20px;flex-wrap:wrap;justify-content:center;
  padding:14px 0 0;font-size:13px;color:var(--muted);
}
.legend b{display:inline-flex;align-items:center;gap:7px;font-weight:400}
.legend i{width:14px;height:2.5px;border-radius:2px;background:var(--c);display:inline-block}
.legend i.dash{background:repeating-linear-gradient(90deg,var(--c) 0 4px,transparent 4px 7px)}
.tip{
  position:absolute;pointer-events:none;background:var(--ink);color:var(--bg);
  border-radius:10px;padding:9px 12px;font-size:12.5px;line-height:1.5;
  font-variant-numeric:tabular-nums;white-space:nowrap;z-index:5;
  box-shadow:0 6px 20px -8px rgba(0,0,0,.6);
}
.tip b{display:block;font-weight:600;margin-bottom:3px}
.tip s{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;
  text-decoration:none;background:var(--c)}
.chartbox{position:relative}

/* ------------------------------------------------------------ Navigation */

nav.tabs{
  position:fixed;bottom:0;left:0;right:0;z-index:30;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-top:1px solid var(--hairline);
  display:flex;padding-bottom:var(--safe-b);
}
nav.tabs button{
  flex:1;border:0;background:none;color:var(--faint);
  font-family:inherit;font-weight:500;font-size:10.5px;line-height:1;padding:9px 0 10px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:5px;
}
nav.tabs button .i{font-size:19px;line-height:1}
nav.tabs button.on{color:var(--ink)}

.side{display:none}

/* ------------------------------------------------------------ Grosser Schirm

   Auf dem Laptop ist der Bildschirm die eigentliche Stärke: dort darf es
   dicht und tabellarisch sein — genau das, was die Numbers-Vorlage
   übersichtlich gemacht hat. Die Seitenspalte ersetzt die Tab-Leiste.
   ------------------------------------------------------------------------ */

@media (min-width:960px){
  body{padding-bottom:0}
  /* Das Raster gehört auf #app — Seitenspalte und Inhalt sind dessen Kinder. */
  #app.authenticated{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh}
  nav.tabs{display:none}

  .side{
    display:flex;flex-direction:column;gap:2px;
    position:sticky;top:0;height:100vh;padding:22px 14px;
    border-right:1px solid var(--hairline);background:var(--bg);
  }
  .side .brand{
    font-size:15px;font-weight:700;letter-spacing:-.02em;padding:6px 12px 18px;
  }
  .side .brand small{display:block;font-weight:400;font-size:11.5px;color:var(--faint);
    letter-spacing:0;margin-top:3px}
  .side a{
    display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;
    color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:500;cursor:pointer;
  }
  .side a .i{font-size:16px;width:18px;text-align:center}
  .side a:hover{background:var(--raised);color:var(--ink)}
  .side a.on{background:var(--raised);color:var(--ink)}
  .side .grow{flex:1}
  .side .add{
    background:var(--accent);color:var(--on-accent);justify-content:center;
    margin-top:10px;font-weight:600;
  }
  .side .add:hover{background:var(--accent);color:var(--on-accent);opacity:.9}

  .top{padding:18px 32px;border-bottom:1px solid var(--hairline);
    background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
  main{max-width:1120px;padding:0 32px 72px}

  /* Zwei Spalten: links die Zahlen, rechts die Zerlegung. */
  .cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:0 48px;align-items:start}
  .cols.wide{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hero{text-align:left;padding:36px 0 4px}
  .segwrap{justify-content:flex-start}
  .hero .amount{font-size:52px}
  .split .keys{justify-content:flex-start}
  .tiles{max-width:520px}
  .report-tiles{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}
  .budget-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Am Laptop ist ein Vollbild-Dialog falsch — er wird zur Karte. */
  .sheet{
    inset:0;align-items:center;justify-content:center;
    background:rgba(0,0,0,.5);animation:fade .16s;padding:24px;
  }
  @keyframes fade{from{opacity:0}to{opacity:1}}
  .sheet>header{
    flex:none;width:100%;max-width:520px;background:var(--surface);
    border-radius:18px 18px 0 0;padding:20px 24px 16px;
    box-shadow:0 30px 80px -20px rgba(0,0,0,.55);
  }
  .sheet>header h2{font-size:19px}
  .sheet .body{
    flex:0 1 auto;width:100%;max-width:520px;background:var(--surface);
    border-radius:0 0 18px 18px;max-height:74vh;padding:20px 24px 26px;
    box-shadow:0 30px 80px -20px rgba(0,0,0,.55);margin:0;
  }
  .sheet .body>*:first-child{margin-top:0}
  /* Nur das allererste Feld im Bogen steht ohne Abstand oben an. Ohne den
     Kindselektor verlieren auch Labels in Gruppierungs-Divs ihren Abstand. */
  .sheet .body > label.f:first-child{margin-top:0}
}

@media (min-width:1280px){
  .cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 44px;align-items:start}
}

/* Readable secondary copy and keyboard-equivalent actions. */
:root { --faint:#66716b; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) { --faint:#a0aaa3; } }
:root[data-theme="dark"] { --faint:#a0aaa3; }
nav.tabs button { font-size:12px; min-height:56px; }
button.txn-button { width:100%; border:0; background:transparent; color:inherit; font:inherit; text-align:left; }
button.txn-button:hover { background:var(--raised); }
.transaction-filters { padding-top:24px; }
.filter-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:16px 0; }
.filter-grid label { font-size:14px; color:var(--muted); }
.filter-grid input,.filter-grid select { display:block; width:100%; margin-top:6px; }
.finance-details { margin:24px 0; }
.finance-details summary { cursor:pointer; font-weight:600; padding:14px 0; }
.setup { padding:24px 0; line-height:1.6; }
.outbox-item { padding:16px 0; border-bottom:1px solid var(--hairline); }
.outbox-item p { overflow-wrap:anywhere; }
.pending { cursor:pointer; border:1px solid currentColor; padding:8px; }
.urgent { margin:20px 0; }
[aria-busy="true"] { opacity:.65; }
[hidden] { display:none !important; }
@media (min-width:960px) { .filter-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }
.tiles.summary-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }