/* ===== Farben & Grundwerte (hell / dunkel automatisch) ===== */
:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --border: #e2e5ea;
  --text: #1b2330;
  --muted: #687284;
  --accent: #0f766e;
  --accent-hover: #0d5f59;
  --accent-soft: #e2f3f0;
  --accent-soft-strong: #9fd8cf;
  --on-accent: #ffffff;
  --pos: #15803d;
  --neg: #c2410c;
  --warn-bg: #fff6e5;
  --warn-text: #8a5300;
  --date: #7c3aed;
  /* Feste Farbe je Schritt (Symbol, Markierung, Vorschlag): Name · Preis · Datum · Kategorie · Art */
  --c-name: #ca8a04;
  --c-amount: #2563eb;
  --c-date: var(--date);
  --c-cat: #16a34a;
  --c-kind: #dc2626;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 2px 8px rgba(16, 24, 40, 0.05);
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1217;
    --surface: #161b22;
    --surface-2: #1e252e;
    --border: #2a323d;
    --text: #e6e9ee;
    --muted: #96a0ae;
    --accent: #2cc4b0;
    --accent-hover: #4fd6c4;
    --accent-soft: #123630;
    --accent-soft-strong: #1f6a60;
    --on-accent: #04201c;
    --pos: #4ade80;
    --neg: #fb923c;
    --warn-bg: #3a2b0e;
    --warn-text: #fbd38d;
    --date: #c4b5fd;
    --c-name: #facc15;
    --c-amount: #60a5fa;
    --c-cat: #4ade80;
    --c-kind: #f87171;
    --shadow: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 var(--font);
  padding-bottom: 90px;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h2, h3, h4 { margin: 0; line-height: 1.25; }
h3 { font-size: 16px; }
h4 { font-size: 14px; margin: 14px 0 6px; }
hr { border: 0; border-top: 1px solid var(--border); margin: 14px 0; }
small, .small { font-size: 12.5px; }
.muted { color: var(--muted); }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.ok { color: var(--pos); margin: 0 0 10px; }
.warn { color: var(--warn-text); background: var(--warn-bg); padding: 8px 10px; border-radius: 8px; margin: 0 0 10px; }
.empty { color: var(--muted); text-align: center; padding: 18px 8px; margin: 0; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--dot, var(--accent)); margin-right: 6px; vertical-align: 0; flex: none; }
.tag { display: inline-block; font-size: 11px; font-weight: 500; padding: 1px 6px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); vertical-align: 1px; }

/* ===== Kopfzeile & Navigation ===== */
.app-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: 10px max(16px, calc((100vw - 960px) / 2));
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.brand { font-weight: 700; font-size: 17px; color: var(--text); white-space: nowrap; }
.brand:hover { text-decoration: none; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 10px; color: var(--muted); font-weight: 500;
}
.nav a:hover { background: var(--surface-2); text-decoration: none; }
.nav a.on { background: var(--accent-soft); color: var(--accent); }
.nav-ico { font-size: 16px; }

/* ===== Rechtliches (datenschutz.html, impressum.html) ===== */
.legal { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }
.legal h1 { font-size: 26px; margin: 12px 0 8px; }
.legal h2 { font-size: 17px; margin: 22px 0 6px; }
.legal p, .legal li { line-height: 1.6; }

/* ===== Anmeldeseite ===== */
body.auth-mode .app-header .nav, body.auth-mode .sync-pill, body.auth-mode #banner, body.auth-mode main { display: none; }
body.auth-mode { padding-bottom: 24px; }
.auth { max-width: 440px; margin: 0 auto; padding: 24px 16px; }
.auth-card h2 { font-size: 22px; margin: 6px 0 14px; }
.auth-brand { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.auth-brand img { border-radius: 12px; flex: none; }
.auth-brand div { display: flex; flex-direction: column; }
.auth-brand b { font-size: 18px; }
.auth-form .btn-block { margin-top: 4px; }
.auth-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 14px; font-size: 14px; }
.auth-legal { text-align: center; color: var(--muted); margin-top: 14px; }
.auth-legal a { color: var(--muted); }
.auth-ok { color: var(--text); background: var(--accent-soft); padding: 8px 10px; border-radius: 8px; margin: 0 0 12px; }
.auth-choice { display: grid; gap: 8px; margin-bottom: 14px; }
.auth-choice .choice { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.auth-choice small { color: var(--muted); }
.recovery-code { font-size: 20px; font-weight: 700; letter-spacing: 0.06em; text-align: center; padding: 14px; border: 2px dashed var(--accent); border-radius: 12px; background: var(--accent-soft); margin: 12px 0; word-break: break-all; user-select: all; }
.mono { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; }
.share-box { font-size: 14px; word-break: break-all; }
.danger-text { color: var(--neg); }

.sync-pill { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.sync-pill:hover { text-decoration: none; }
.sync-pill.ok { color: var(--pos); }
.sync-pill.offline, .sync-pill.login { color: var(--warn-text); background: var(--warn-bg); }
.sync-pill.error { color: var(--neg); background: color-mix(in srgb, var(--neg) 12%, var(--surface)); }

@media (max-width: 720px) {
  /* iOS zoomt bei Eingabefeldern unter 16px – deshalb mindestens 16px */
  .input, .input-sm, select.input, textarea.input { font-size: 16px; }
  .app-header { padding-top: calc(10px + env(safe-area-inset-top)); justify-content: space-between; }
  /* backdrop-filter würde die feste Navigation unten an den Header binden */
  .app-header { padding: 10px 16px; backdrop-filter: none; background: var(--surface); }
  .nav {
    position: fixed; left: 0; right: 0; bottom: 0; margin: 0;
    background: var(--surface); border-top: 1px solid var(--border);
    justify-content: space-around; padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .nav a { flex-direction: column; gap: 0; font-size: 11px; padding: 4px 8px; }
  .nav-ico { font-size: 20px; }
}

main { max-width: 960px; margin: 0 auto; padding: 16px; }
#banner { max-width: 960px; margin: 0 auto; padding: 0 16px; }
.banner {
  margin-top: 12px; padding: 10px 14px; border-radius: 12px;
  background: var(--accent-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.banner.warn { background: var(--warn-bg); color: var(--warn-text); }

/* ===== Karten ===== */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px; margin-bottom: 14px;
}
.card.highlight { border-color: var(--accent); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
details.card > summary { cursor: pointer; list-style: none; margin-bottom: 0; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary h3::after { content: ' ▸'; color: var(--muted); }
details.card[open] > summary h3::after { content: ' ▾'; }
details.card[open] > summary { margin-bottom: 12px; }

/* ===== Formulare ===== */
.input {
  width: 100%; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 11px; outline: none; transition: border-color 0.11s, box-shadow 0.11s;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input-sm { padding: 6px 10px; font-size: 14px; }
select.input { cursor: pointer; }
textarea.input { resize: vertical; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; font-size: 13px; font-weight: 500; color: var(--muted); min-width: 0; }
.field > label { font-size: 13px; font-weight: 600; color: var(--muted); }
.field.check { flex-direction: row; align-items: center; gap: 8px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.form-grid .span2 { grid-column: span 2; }
.form-grid .field { color: var(--muted); }
.created-hint { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.amount-wrap { position: relative; }
.amount-wrap span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 18px; pointer-events: none; }
.amount-wrap .input { padding-right: 34px; font-weight: 600; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 10px; padding: 9px 16px; transition: background 0.11s, border-color 0.11s;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-danger { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 40%, var(--border)); }
.btn-danger:hover { background: color-mix(in srgb, var(--neg) 10%, var(--surface)); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-sm { padding: 5px 11px; font-size: 13px; border-radius: 8px; }
.btn-lg { padding: 13px 18px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.push-left { margin-right: auto; }
.icon-btn {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  width: 32px; height: 32px; border-radius: 8px; font-size: 15px; flex: none;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn.lg { width: 40px; height: 40px; font-size: 24px; }
.icon-btn:disabled { opacity: 0.3; cursor: default; background: transparent; }

/* ===== Segment-Umschalter ===== */
.seg { display: inline-flex; background: var(--surface-2); border-radius: 11px; padding: 3px; gap: 2px; max-width: 100%; overflow-x: auto; }
.seg button {
  font: inherit; font-weight: 600; font-size: 14px; border: 0; background: transparent; color: var(--muted);
  padding: 7px 14px; border-radius: 9px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center;
}
.seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-bottom: 8px; }

/* ===== Chips ===== */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font: inherit; font-size: 14px; cursor: pointer; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); border-radius: 99px; padding: 6px 12px;
  display: inline-flex; align-items: center; gap: 5px; transition: border-color 0.11s, background 0.11s;
}
.chip:hover { border-color: var(--accent); }
.chip.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.chip small { color: var(--muted); font-weight: 600; }
.chip-due { border-color: var(--accent); background: var(--accent-soft); }
.chip-due.late { border-color: #f59e0b; background: color-mix(in srgb, #f59e0b 14%, var(--surface)); }
.link-hint { margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, #f59e0b 12%, var(--surface)); border: 1px solid color-mix(in srgb, #f59e0b 45%, var(--border)); color: var(--text); font-weight: 400; font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.link-hint.ok { background: var(--accent-soft); border-color: transparent; }
.month-pick { width: auto; min-width: 0; font-weight: 700; font-size: 18px; text-align: center; padding: 6px 12px; }
.recap-banner { margin: 0 0 14px; }
.recap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 20px; }
.recap-grid > div { display: flex; flex-direction: column; gap: 2px; }
.recap-grid b { font-size: 17px; font-variant-numeric: tabular-nums; }
.chip.archived { opacity: 0.5; text-decoration: line-through; }
[data-slot='kind'] .seg { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; }
[data-slot='kind'] .seg button { justify-content: center; white-space: normal; text-align: center; padding: 7px 6px; }
@media (max-width: 860px) { [data-slot='kind'] .seg { grid-template-columns: 1fr 1fr; } }
.tag.kind-einmalig { background: var(--surface-2); color: var(--muted); }
.cat-match:not(:empty) { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.cat-match-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.btn-match { border-color: var(--accent); background: var(--accent-soft); color: var(--text); font-size: 15px; }
.btn-match:hover { background: var(--accent); color: var(--on-accent); }
.btn-new-cat { color: var(--accent); border: 1px dashed var(--accent); }
.icon-picker { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.icon-list { max-height: 230px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.icon-group { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.icon-group > span { width: 100%; font-weight: 600; }
.icon-pick { font-size: 20px; padding: 3px 8px; line-height: 1.3; }
.icon-pick.icon-auto { font-size: 13px; font-weight: 600; padding: 6px 12px; }
.icon-pick.on { background: var(--accent-soft); border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 2px var(--accent); }
.move-btn { width: auto; padding: 0 6px; display: inline-flex; align-items: center; gap: 2px; }
/* Kleine Zahl am Namen: so viele Einträge wurden zu dieser Person verschoben */
.seg-badge {
  display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 5px; margin-left: 5px; border-radius: 99px;
  background: var(--neg); color: #fff; font-size: 10.5px; font-weight: 800; line-height: 1; animation: pop 0.34s ease-out;
}
.shake { animation: shake 0.3s; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* Automatische Änderungen sanft sichtbar machen (UI.flash) */
.flash { animation: flash 0.75s ease-out; }
@keyframes flash { from { background-color: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); } }
.pop { animation: pop 0.34s ease-out; }
@keyframes pop { 35% { transform: scale(1.07); box-shadow: 0 0 0 3px var(--accent-soft); } }
.appear { animation: appear 0.22s ease-out; }
@keyframes appear { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .flash, .pop, .appear, .shake { animation: none; }
}

/* ===== Erfassen ===== */
.who { display: flex; flex-direction: column; gap: 4px; }
.who .seg button { font-size: 15px; padding: 8px 18px; }
.entry-form [data-slot="type"] { margin-bottom: 12px; }
/* Vorschläge beim Tippen: eine Reihe Chips direkt unter Zeile 1 – liegt nicht über dem Rest */
.name-box { border: 2px solid var(--border); border-radius: 12px; background: var(--surface); transition: border-color 0.15s, box-shadow 0.15s; }
.name-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.name-box .input-hero, .name-box .input-hero:focus { border: 0; box-shadow: none; background: transparent; }
/* Das Feld wächst weich um die Vorschlagsreihe und schrumpft wieder (0fr → 1fr) */
.ac-shell { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.21s cubic-bezier(.2,.8,.2,1); }
.ac-shell.open { grid-template-rows: 1fr; }
.ac-clip { min-height: 0; overflow: hidden; }
.ac { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 0 10px 10px; opacity: 0; transform: translateY(-6px); transition: opacity 0.15s, transform 0.21s; }
.ac-shell.open .ac { opacity: 1; transform: none; }
.ac::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .ac-shell, .ac { transition: none; } }
/* Ein Vorschlag = zwei klar getrennte Teile: links 🏷️ Name, rechts (farbig) 🗂️ Kategorie */
.ac-item {
  flex: none; display: inline-flex; align-items: stretch; padding: 0; font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap;
  border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.ac-name, .ac-cat { display: inline-flex; align-items: center; padding: 6px 11px; }
.ac-name { font-weight: 700; }
.ac-cat { font-weight: 600; color: var(--c-cat); background: color-mix(in srgb, var(--c-cat) 12%, var(--surface)); border-left: 1px solid color-mix(in srgb, var(--c-cat) 30%, var(--border)); }
.ac-onlycat .ac-cat, .ac-maybe .ac-cat { border-left: 0; }
.ac-maybe { border-style: dashed; border-color: var(--c-cat); }
.ac-label { flex: none; align-self: center; font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
/* Der Vorschlag zum Getippten: Kategorie als „Vorschlag“ gekennzeichnet, antippen = andere wählen */
.ac-current { border-color: var(--accent); }
.ac-current .ac-cat { background: transparent; border-left: 1px dashed var(--c-cat); }
.ac-item { cursor: pointer; }
.ac-item.settled { cursor: default; }
.ac-item > .act { align-self: center; margin: 0 6px 0 2px; }
/* Nie aus dem Feld laufen: der eigene Vorschlag bricht bei Platzmangel in zwei Zeilen um
   (Name, Kategorie, ✓ und 🔍 bleiben ganz sichtbar); andere Vorschläge kürzen lange Namen mit "…" */
.ac-item { max-width: 100%; }
.ac-name, .ac-cat { min-width: 0; gap: 4px; }
.ac-txt { min-width: 3em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-cat small, .ac-name .sym, .ac-cat .sym { flex: none; }
/* Der eigene Vorschlag als kleine Karte:   🏷️ Name ……………… VORSCHLAG
                                            🗂️ Kategorie ………… 🔍 ✓ */
.ac-current { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; border-radius: 14px; width: max-content; min-width: min(100%, 230px); }
.ac-current .ac-name { grid-row: 1; grid-column: 1; padding-bottom: 0; }
.ac-current .ac-tag { grid-row: 1; grid-column: 2 / -1; justify-self: end; margin-right: 10px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-cat); opacity: 0.8; }
.ac-current .ac-cat { grid-row: 2; grid-column: 1; border-left: 0; padding-top: 0; align-items: flex-start; }
.ac-current .ac-cat .sym { margin-top: 2px; }
.ac-current .ac-txt { min-width: 0; white-space: normal; overflow: visible; }
.ac-current > .act-find { grid-row: 2; grid-column: 2; }
.ac-current > .act-ok { grid-row: 2; grid-column: 3; }
.ac-current.settled { display: inline-flex; border-radius: 99px; min-width: 0; }

/* ✓ übernehmen · ✕ nicht übernehmen · 🔍 andere auswählen – überall gleich */
.act { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; padding: 0; margin-left: 4px; border: 0; border-radius: 50%; vertical-align: middle; }
button.act { cursor: pointer; transition: transform 0.08s; }
button.act:hover { transform: scale(1.1); }
.act-ico { width: 13px; height: 13px; }
.act-ok { background: var(--pos); color: #fff; }
.act-no { background: color-mix(in srgb, var(--neg) 14%, var(--surface)); color: var(--neg); }
.act-find { background: color-mix(in srgb, var(--muted) 16%, var(--surface)); color: var(--text); }
.btn .act-ico { width: 15px; height: 15px; }
@media (hover: none) { .act { width: 26px; height: 26px; } .act-ico { width: 14px; height: 14px; } } /* am Handy größer zum Tippen */
.hint-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.ac-cat small { margin-left: 6px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.7; }

/* Farbige Symbole: kleine Linien-Icons in der Farbe ihres Schritts */
.sym { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.18em; flex: none; color: var(--sym-c, currentColor); }
.sym-name { --sym-c: var(--c-name); }
.sym-amount { --sym-c: var(--c-amount); }
.sym-date { --sym-c: var(--c-date); }
.sym-cat { --sym-c: var(--c-cat); }
.sym-kind { --sym-c: var(--c-kind); }
/* Schritt-Titel in derselben Farbe */
.ac-name, .tok-word { color: color-mix(in srgb, var(--c-name) 70%, var(--text)); }

/* Schritte 1–5: ein gemeinsamer Rahmen, jeder Schritt eine eigene Fläche, 1 + 2 im Vordergrund */
.step {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; margin-bottom: 8px;
  border: 2px solid var(--border); border-radius: 14px; background: var(--surface);
  transition: background-color 0.3s, border-color 0.3s, box-shadow 0.19s;
}
.step:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Der äußere Rahmen um 1–5 (schlicht, ohne Überschrift) */
.flow {
  padding: 10px; margin-bottom: 12px; border-radius: 20px;
  border: 2px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 85%, var(--surface)) 0, var(--surface) 60%);
  transition: border-color 0.3s 0.45s;
}
@media (max-width: 560px) { .flow { padding: 7px; border-radius: 18px; } }

/* 1 + 2: erhobene Karten mit größerem Kreis; 3–5: flache Flächen */
.flow .step:focus-within { border-color: var(--accent); }

/* 1 → 5 als ein Weg: Kreise in einer eigenen Spalte links, Linie von Kreismitte zu Kreismitte,
   wird grün, sobald ein Schritt erledigt ist */
.flow .step { padding-left: 50px; }
.flow .step::after {
  content: ''; position: absolute; z-index: 1; left: 23.5px; width: 3px; border-radius: 2px;
  top: 36px; bottom: -22px; /* vom Kreis bis zum Kreis des nächsten Schritts (Rand 2 + Abstand 8 + Rand 2 + 10) */
  background: var(--border); transition: background 0.22s;
}
@media (max-width: 560px) {
  .flow .step { padding-left: 42px; padding-right: 12px; }
  .flow .step::after { left: 19.5px; }
}
.flow > .step:last-child { margin-bottom: 0; }
.flow > .step:last-child::after { display: none; }
.flow .step.done::after { background: var(--pos); }
.flow .step:focus-within::after { background: linear-gradient(var(--accent), var(--border)); }
.flow .step.done:focus-within::after { background: var(--pos); }

/* Alles drin: die Felder werden nacheinander grün (1 → 5), zuletzt der Rahmen */
.flow.complete { border-color: color-mix(in srgb, var(--pos) 60%, var(--border)); }
.flow.complete .step {
  background: color-mix(in srgb, var(--pos) 9%, var(--surface)); border-color: color-mix(in srgb, var(--pos) 55%, var(--border));
  transition-delay: calc(var(--i, 0) * 120ms);
  animation: go-green 0.38s ease-out calc(var(--i, 0) * 120ms);
}
.flow.complete .step .input, .flow.complete .cat-field, .flow.complete .name-box { border-color: color-mix(in srgb, var(--pos) 55%, var(--border)); transition: border-color 0.3s; transition-delay: inherit; }
@keyframes go-green { 40% { transform: scale(1.012); } }
@media (prefers-reduced-motion: reduce) { .flow.complete .step { animation: none; transition-delay: 0s; } }
.input-hero { font-size: 20px; font-weight: 600; padding: 11px 14px; border-radius: 12px; border-width: 2px; }
.stage:empty { display: none; }

/* 2 „Wie viel?“ und 3 „Wann?“ nebeneinander, wenn Platz ist – sonst untereinander */
.amount-hero { border-radius: 12px; }
.amount-hero .input { font-size: 26px; font-weight: 800; padding: 7px 44px 7px 14px; border-width: 2px; border-radius: 12px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--c-amount); }
.amount-hero span { font-size: 22px; font-weight: 700; right: 16px; }
.price-context { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.price-context:not(:has(:not(:empty))) { display: none; }
.amount-badge:empty { display: none; }
.amount-badge { align-self: flex-start; font-size: 12.5px; font-weight: 700; color: var(--c-amount); background: color-mix(in srgb, var(--c-amount) 12%, var(--surface)); padding: 2px 9px; border-radius: 99px; }

/* Kategorie: im Feld als Text, darunter als Zeichen */
.cat-field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); min-height: 48px; }
.cat-field:focus-within { border-color: var(--accent); }
.cat-search { flex: 1; min-width: 130px; border: 0; outline: none; background: transparent; font: inherit; font-size: 16px; color: var(--text); padding: 6px; }
.cat-find { display: inline-grid; place-items: center; padding-left: 4px; color: var(--muted); }
.cat-find .act-ico { width: 17px; height: 17px; }
.cat-pill .act { margin-left: 0; }
.cat-pill.on .act-no { background: rgba(255, 255, 255, 0.25); color: #fff; }
.cat-pill { font: inherit; font-size: 15px; font-weight: 700; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; max-width: 100%; text-align: left; padding: 7px 12px; border-radius: 10px; border: 2px solid var(--c-cat); background: var(--c-cat); color: #fff; }
.cat-pill .cp-name { white-space: nowrap; }
.cat-pill small { font-weight: 600; opacity: 0.85; }
.cat-pill.suggested { background: color-mix(in srgb, var(--c-cat) 12%, var(--surface)); color: var(--text); border-style: dashed; }
.cat-pill.suggested small { color: var(--c-cat); }
.cat-pill.suggested.taken { border-style: solid; }
.cat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; }
@media (max-width: 560px) {
  /* Handy: eine Reihe zum Wischen – spart Platz, häufigste zuerst */
  .cat-tiles { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 2px; }
  .cat-tiles::-webkit-scrollbar { display: none; }
  .cat-tile { flex: 0 0 78px; scroll-snap-align: start; }
  .cat-tile .tl { word-break: normal; overflow-wrap: anywhere; }
}
.cat-tile {
  font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 6px 4px; min-height: 54px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  transition: border-color 0.11s, background 0.11s, transform 0.08s;
}
.cat-tile:hover { border-color: var(--accent); }
.cat-tile:active { transform: scale(0.95); }
.cat-tile .ti { font-size: 20px; line-height: 1; }
.cat-tile .tl { font-size: 11.5px; font-weight: 600; line-height: 1.2; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.cat-tile.on { background: var(--c-cat); border-color: var(--c-cat); color: #fff; }
.cat-tile.suggested { border: 2px dashed var(--c-cat); background: color-mix(in srgb, var(--c-cat) 12%, var(--surface)); }
.cat-tile.more { color: var(--muted); border-style: dashed; }

/* Speichern: großer grüner Knopf; sobald etwas eingegeben ist, sitzt darüber schlicht eine Zeile mit dem, was gespeichert wird */
.commit { border-radius: 14px; overflow: hidden; border: 2px solid transparent; transition: border-color 0.19s; }
.commit.has-receipt { border-color: var(--accent); }
.commit .save-btn { margin: 0; border: 0; border-radius: 12px; gap: 12px; padding: 15px 18px; font-size: 17px; }
.commit.has-receipt .save-btn { border-radius: 0; }
.save-btn kbd { font: inherit; font-size: 12px; font-weight: 600; opacity: 0.8; padding: 1px 7px; border-radius: 6px; border: 1px solid currentColor; }
@media (hover: none) { .save-btn kbd { display: none; } } /* Handy: keine Enter-Taste anzeigen */
.receipt:empty { display: none; }
.receipt { padding: 8px 12px; background: var(--surface); }
.rc-main { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.rc-ico { width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); display: grid; place-items: center; font-size: 17px; }
.rc-what { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.rc-name { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-tags { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-tags span { display: inline-block; }
.rc-amount { display: inline-block; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--c-amount); }
.rc-amount.income { color: var(--pos); }
.rc-missing { color: var(--muted); font-weight: 500; font-style: italic; }

/* Neuer Eintrag in der Liste: gleitet hinein, leuchtet grün, trägt kurz „Neu“ */
.entry-row.row-pending { opacity: 0; }
.row-new { animation: row-new 2.6s ease-out; }
@keyframes row-new {
  0% { opacity: 0; transform: translateY(-14px) scale(0.98); background: color-mix(in srgb, var(--pos) 24%, transparent); }
  14% { opacity: 1; transform: none; background: color-mix(in srgb, var(--pos) 24%, transparent); }
  100% { background: transparent; }
}
/* Gerade verschoben (24 Std.): Markierung am Eintrag, ⇄ farbig zum schnellen Zurückschieben */
.moved-tag { display: inline-block; margin-right: 2px; padding: 0 7px; border-radius: 99px; font-size: 10.5px; font-weight: 800; vertical-align: 1px; color: var(--neg); background: color-mix(in srgb, var(--neg) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--neg) 35%, transparent); }
.entry-row.moved .move-btn { color: var(--neg); font-weight: 800; }
.new-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 99px; background: var(--pos); color: #fff; font-size: 11px; font-weight: 800; vertical-align: 2px; animation: badge-in 0.26s cubic-bezier(.2,.9,.3,1.4); }
.fly-ghost.rc-main { display: grid; padding: 6px 12px; border-radius: 12px; border: 2px solid var(--accent); background: var(--surface); color: var(--text); white-space: normal; font-weight: 400; }

/* Vorschläge ganz oben */

/* Animationen: wohin etwas geht und dass etwas passiert */
.fly-ghost {
  position: fixed; z-index: 100; pointer-events: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 3px 10px; border-radius: 10px; font-weight: 700; font-size: 15px; white-space: nowrap;
  background: var(--accent); color: var(--on-accent); box-shadow: 0 8px 24px rgba(15, 118, 110, 0.35);
}
.fly-ghost.tok-amount { background: var(--c-amount); color: #fff; }
.fly-ghost.tok-date { background: var(--c-date); color: #fff; }
.fly-ghost.tok-cat, .fly-ghost.ac-cat, .fly-ghost.cat-tile { background: var(--c-cat); color: #fff; }
.fly-ghost .sym { color: #fff; } /* auf farbigem Hintergrund weiß */
.fly-ghost .act { display: none; }
.fly-ghost.cat-tile { flex-direction: row; }
.fly-ghost .tl, .fly-ghost small, .fly-ghost .ripple { display: none; }
.land { animation: land 0.45s cubic-bezier(.2,.9,.3,1.2); }
@keyframes land {
  0% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  30% { transform: scale(1.045); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 30%, transparent); background-color: var(--accent-soft); }
  100% { transform: scale(1); box-shadow: 0 0 0 14px transparent; }
}
.amount-hero.land .input { animation: shine 0.52s ease-out; }
@keyframes shine { 0% { background: linear-gradient(100deg, var(--surface) 30%, color-mix(in srgb, var(--c-amount) 22%, var(--surface)) 50%, var(--surface) 70%) -100% 0 / 250% 100%; } 100% { background: linear-gradient(100deg, var(--surface) 30%, color-mix(in srgb, var(--c-amount) 22%, var(--surface)) 50%, var(--surface) 70%) 150% 0 / 250% 100%; } }
.tick { animation: tick 0.19s ease-out; }
@keyframes tick { 40% { transform: scale(1.02); } }
.badge-in { animation: badge-in 0.26s cubic-bezier(.2,.9,.3,1.4); }
@keyframes badge-in { from { opacity: 0; transform: translateX(-8px) scale(0.8); } }
.saved { animation: saved 0.68s ease-out; }
/* Speichern ist dran (z. B. nach Antippen eines Vorschlags mit Betrag): Rahmen innen + zweimal sanft pulsieren */
.save-btn:focus { outline: 3px solid color-mix(in srgb, #fff 75%, transparent); outline-offset: -7px; }
.nudge { animation: nudge 0.52s ease-in-out 2; }
@keyframes nudge { 50% { box-shadow: inset 0 0 0 999px color-mix(in srgb, #fff 16%, transparent); } }
@keyframes saved { 0% { transform: scale(0.97); } 25% { transform: scale(1.02); background: var(--pos); border-color: var(--pos); } 100% { transform: scale(1); } }
.btn, .chip, .cat-tile, .cat-pill, button.tok, .seg button, .ac-item { position: relative; overflow: hidden; }
.ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: 0.18; transform: scale(0); animation: ripple 0.38s ease-out forwards; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .land, .tick, .badge-in, .saved, .nudge, .amount-hero.land .input, .row-new, .new-tag { animation: none; }
}
.ac-item:hover, .ac-item.on { border-color: var(--accent); }
.ac-item.on { box-shadow: 0 0 0 2px var(--accent); }
details.note { margin-bottom: 14px; }

/* Zeilen-Erkennung unter dem Namen */
.parse-bar { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.tok { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 14px; padding: 3px 9px; border-radius: 8px; border: 1px solid transparent; line-height: 1.4; }
.tok .act { margin-left: 2px; margin-right: -4px; }
.tok-word { background: color-mix(in srgb, var(--c-name) 10%, var(--surface)); }
.tok-cur { color: var(--muted); padding-left: 2px; padding-right: 2px; }
button.tok { cursor: pointer; }
.tok-amount { background: color-mix(in srgb, var(--c-amount) 12%, var(--surface)); color: var(--c-amount); border-color: var(--c-amount); font-weight: 700; }
.tok-num { background: var(--surface); color: var(--text); border: 1px dashed var(--muted); }
.tok-num:hover { border-color: var(--pos); color: var(--pos); }
.tok-cat { background: color-mix(in srgb, var(--c-cat) 12%, var(--surface)); color: var(--c-cat); border-color: var(--c-cat); font-weight: 600; }
.tok-date { background: color-mix(in srgb, var(--c-date) 12%, var(--surface)); color: var(--c-date); border-color: var(--c-date); font-weight: 600; }

/* Noch ergänzen / Ergänzen-Modus */
.todo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; margin-bottom: 12px; font-size: 14px; background: var(--warn-bg); color: var(--warn-text); }
.todo-bar span { flex: 1; min-width: 160px; }
.entry-row.incomplete .cat-ico { background: var(--warn-bg); }
.todo-text { color: var(--warn-text); font-weight: 600; }
.kind-reason { color: var(--c-kind); font-weight: 600; }
[data-slot='kindhint']:empty, [data-slot='linkhint']:empty, [data-slot='catmatch']:empty { display: none; }
details.note summary { cursor: pointer; color: var(--muted); font-size: 13px; margin-bottom: 6px; }

/* ===== Eintragslisten ===== */
.day + .day { margin-top: 10px; }
.day-head { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; padding: 4px 2px; }
.entry-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-top: 1px solid var(--border); }
.cat-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; font-size: 17px; flex: none; }
.entry-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.entry-main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-main small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-amount { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.entry-amount.income { color: var(--pos); }
.entry-row.editable { cursor: pointer; border-radius: 8px; }
.entry-row.editable:hover { background: var(--surface-2); }

/* Suche in den Einträgen */
.search-wrap { margin-bottom: 10px; }
.search-wrap .input { font-size: 16px; }
.search-info { margin: 0 0 8px; }
.flat-list .entry-row:first-child { border-top: 0; }
.list-foot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.list-foot a.btn { color: var(--accent); font-weight: 600; text-decoration: none; }

/* ===== Seite „Einträge“ ===== */
.tabs { margin-bottom: 14px; }
.tabs .seg { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; }
.tabs .seg button { justify-content: center; }
@media (max-width: 560px) { .tabs .seg { grid-template-columns: 1fr 1fr; } }
.filters { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; }
@media (max-width: 720px) { .filters { grid-template-columns: 1fr 1fr; }  }
.month-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 2px solid var(--border); }
.month-head h3 { font-size: 18px; }
.month-sums { display: flex; gap: 12px; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.neg-text { color: var(--neg); }
.pos-text { color: var(--pos); }
.rec-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--border); }
.rec-row.done { opacity: 0.7; }
.rec-amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rec-amount.income { color: var(--pos); }
.rec-actions { display: flex; gap: 4px; align-items: center; justify-content: flex-end; }
@media (max-width: 560px) {
  .rec-row { grid-template-columns: 34px minmax(0, 1fr) auto; row-gap: 6px; }
  .rec-actions { grid-column: 3; }
}
.rec-help { margin: 4px 4px 16px; }

/* ===== Seite „Konto“: Was habe ich am Monatsende? ===== */
.bal-hero { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px; text-align: center; border: 2px solid color-mix(in srgb, var(--pos) 45%, var(--border)); background: linear-gradient(180deg, color-mix(in srgb, var(--pos) 9%, var(--surface)), var(--surface)); }
.bal-hero.neg { border-color: color-mix(in srgb, var(--neg) 45%, var(--border)); background: linear-gradient(180deg, color-mix(in srgb, var(--neg) 9%, var(--surface)), var(--surface)); }
.bal-label { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.bal-end { font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--pos); line-height: 1.1; }
.bal-hero.neg .bal-end { color: var(--neg); }
.bal-sub { font-size: 14px; color: var(--muted); }
.bal-missing { margin: 0 0 14px; }
.bal-persons { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 12px; }
.bal-persons > div { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); font-size: 14px; }
.bal-persons b { margin-left: auto; font-variant-numeric: tabular-nums; }
.bal-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.bal-row:first-of-type { border-top: 0; }
.bal-sign { font-weight: 800; color: var(--muted); text-align: center; }
.bal-what small { color: var(--muted); }
.bal-row.sum { border-top: 2px solid var(--text); font-weight: 700; }
.bal-row.end { border-top: 2px solid var(--text); font-size: 17px; }
.bal-row.end b { color: var(--pos); font-size: 19px; }
.bal-row.start b { color: var(--c-amount); }
.bal-list { padding: 0 0 8px 34px; }
.bal-plan { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); }
.bal-plan.overdue .cat-ico { background: var(--warn-bg); }
.bal-hist { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); }
.bal-hist .entry-main b { font-variant-numeric: tabular-nums; }
.bal-hist.current .entry-main b { color: var(--c-amount); }
.bal-empty { text-align: center; padding: 28px 18px; }
.bal-empty-ico { font-size: 44px; }
.bal-empty h3 { font-size: 19px; margin: 6px 0 8px; }
.bal-empty p { max-width: 460px; margin: 0 auto 16px; }
.bal-help { margin: 4px 4px 16px; }
.link-btn { font: inherit; font-size: 12.5px; font-weight: 700; color: var(--accent); background: none; border: 0; padding: 0 2px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
/* Startseite: Monatsende auf einen Blick */

/* ===== Kennzahlen ===== */
.period { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 6px 0 14px; }
.period h2 { min-width: 190px; text-align: center; font-size: 22px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.kpis.small { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .kpis, .kpis.small { grid-template-columns: 1fr 1fr; } }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--shadow); min-width: 0; }
.card .kpi { background: var(--surface-2); border: 0; box-shadow: none; }
.kpi-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.kpi b { font-size: 21px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi.pos b { color: var(--pos); }
.kpi.neg b { color: var(--neg); }
.kpi-sub { font-size: 12px; color: var(--muted); }
.badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 99px; background: var(--surface-2); color: var(--muted); }
.badge.up { background: color-mix(in srgb, var(--neg) 15%, transparent); color: var(--neg); }
.badge.down { background: color-mix(in srgb, var(--pos) 15%, transparent); color: var(--pos); }

/* ===== Balken ===== */
.hbar { height: 10px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.hbar-fill { height: 100%; display: flex; border-radius: 99px; overflow: hidden; }
.hbar-fill span { height: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }

.persons { display: flex; flex-direction: column; gap: 4px; }
.person-row { display: grid; grid-template-columns: 130px 1fr 150px; gap: 12px; align-items: center; padding: 6px 0; }
.person-row.total { border-top: 1px solid var(--border); padding-top: 10px; font-weight: 600; }
.person-name { font-weight: 600; display: flex; align-items: center; overflow: hidden; }
.num { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-variant-numeric: tabular-nums; }
.num small { color: var(--muted); white-space: nowrap; }

.cat-table { display: flex; flex-direction: column; }
.cat-row {
  font: inherit; color: inherit; text-align: left; background: transparent; border: 0; border-top: 1px solid var(--border);
  display: grid; grid-template-columns: 34px minmax(110px, 1.1fr) 1.4fr minmax(120px, auto); gap: 12px; align-items: center;
  padding: 9px 2px; cursor: pointer; width: 100%;
}
.cat-row:hover { background: var(--surface-2); }
.cat-name { display: flex; flex-direction: column; font-weight: 600; min-width: 0; }
.cat-name small { color: var(--muted); font-weight: 400; }
.cat-detail { padding: 2px 0 10px 46px; }
@media (max-width: 560px) {
  .person-row { grid-template-columns: 1fr auto; }
  .person-row .hbar { grid-column: span 2; grid-row: 2; }
  .cat-row { grid-template-columns: 34px 1fr auto; }
  .cat-bar { grid-column: 2 / span 2; grid-row: 2; }
  .cat-detail { padding-left: 0; }
}
.mini-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 6px 0; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.mini-row b { min-width: 80px; text-align: right; }
.mini-row.paid { opacity: 0.65; }

/* Säulen */
.cols { display: flex; gap: 4px; align-items: stretch; }
.col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; background: transparent; border: 0; padding: 4px 0; cursor: pointer; font: inherit; color: var(--muted); border-radius: 8px; }
.col:hover { background: var(--surface-2); }
.col-area { height: var(--h); width: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.col-val { font-size: 10.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.col-bar { width: 68%; max-width: 44px; min-height: 0; display: flex; flex-direction: column-reverse; border-radius: 6px 6px 2px 2px; overflow: hidden; opacity: 0.55; }
.col-bar span { min-height: 0; }
.col.active .col-bar, .col:hover .col-bar { opacity: 1; }
.col.active { color: var(--text); font-weight: 700; }
.col-label { font-size: 11.5px; }
@media (max-width: 560px) { .col-val { display: none; } }

.col.static { cursor: default; }
.col.static:hover { background: transparent; }
.col.static .col-bar { opacity: 1; }

/* Ausblick */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin-top: 4px; }
@media (max-width: 720px) { .two-col { grid-template-columns: 1fr; } }
.check { border-collapse: collapse; width: 100%; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.check th, .check td { padding: 7px 8px; text-align: right; border-top: 1px solid var(--border); white-space: nowrap; }
.check th:first-child { text-align: left; }
.check thead th { color: var(--muted); font-weight: 600; font-size: 12px; border-top: 0; }
.check td.pos { color: var(--pos); font-weight: 600; }
.check td.neg { color: var(--neg); font-weight: 600; }

/* Hinweise */
.insights { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.insights li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; background: var(--surface-2); border-radius: 10px; }

/* Jahresmatrix */
.table-scroll { overflow-x: auto; margin: 0 -4px; }
.matrix { border-collapse: separate; border-spacing: 2px; font-size: 12.5px; font-variant-numeric: tabular-nums; width: 100%; }
.matrix th, .matrix td { padding: 5px 6px; text-align: right; white-space: nowrap; }
.matrix thead th { color: var(--muted); font-weight: 600; }
.matrix tbody th { text-align: left; font-weight: 600; position: sticky; left: 0; background: var(--surface); }
.matrix td { border-radius: 5px; background: color-mix(in srgb, var(--accent) calc(var(--heat, 0) * 70%), transparent); }
.matrix tr.sum th, .matrix tr.sum td { border-top: 1px solid var(--border); font-weight: 700; background: transparent; }

.payee-year { display: grid; grid-template-columns: minmax(120px, 1fr) auto 80px; gap: 12px; align-items: center; padding: 6px 0; border-top: 1px solid var(--border); }
.payee-year b { text-align: right; font-variant-numeric: tabular-nums; }
.py-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.months { display: flex; gap: 2px; }
.months i { font-style: normal; width: 17px; height: 20px; border-radius: 4px; display: grid; place-items: center; font-size: 10px; background: var(--surface-2); color: var(--muted); }
.months i.on { background: var(--accent); color: var(--on-accent); font-weight: 700; }
@media (max-width: 560px) {
  .payee-year { grid-template-columns: 1fr auto; }
  .payee-year .months { grid-column: span 2; grid-row: 2; }
  .months i { width: auto; flex: 1; }
}

/* ===== Einstellungen ===== */
.person-edit { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.goal-edit .person-name { width: 130px; flex: none; }
.goal-edit .amount-wrap { flex: 1; max-width: 220px; }
.goal-edit .amount-wrap span { font-size: 15px; }
.goal-ok { color: var(--pos); font-weight: 600; }
.goal-miss { color: var(--neg); font-weight: 600; }
.person-edit input[type='color'] { width: 42px; height: 40px; border: 1px solid var(--border); border-radius: 10px; padding: 3px; background: var(--surface); cursor: pointer; flex: none; }
.payee-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.payee-item { font: inherit; color: inherit; text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.payee-item:hover { border-color: var(--accent); }
.payee-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Dialog ===== */
.modal-back { position: fixed; inset: 0; z-index: 50; background: rgba(10, 14, 20, 0.45); display: grid; place-items: center; padding: 16px; animation: fade 0.11s; }
.modal { background: var(--surface); border-radius: 16px; width: 100%; max-width: 520px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 6px; }
.modal-body { padding: 8px 16px; overflow-y: auto; }
.modal-body p { margin: 0 0 12px; }
.modal-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 16px 16px; border-top: 1px solid var(--border); }
@keyframes fade { from { opacity: 0; } }

/* ===== Toasts ===== */
.toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center; width: max-content; max-width: calc(100vw - 32px); }
@media (max-width: 720px) { .toasts { bottom: 84px; } }
.toast { background: #1b2330; color: #fff; padding: 10px 14px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); display: flex; gap: 12px; align-items: center; animation: up 0.15s; font-size: 14px; }
.toast.out { opacity: 0; transition: opacity 0.19s; }
.toast-btn { font: inherit; font-weight: 700; color: #5eead4; background: transparent; border: 0; cursor: pointer; padding: 0; }
@keyframes up { from { transform: translateY(10px); opacity: 0; } }

/* ===== Bezahlt mit (gehört zum Preis → blau) ===== */
.sym-pay { --sym-c: var(--c-amount); }
.pay-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; }
.pay-label { font-size: 12.5px; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.pay-row .seg { padding: 2px; border-radius: 9px; }
.pay-row .seg button { padding: 3px 9px; font-size: 13px; border-radius: 7px; }
.pay-row.other .seg button.on { color: var(--c-amount); box-shadow: 0 0 0 1.5px var(--c-amount); }
.tok-pay { background: color-mix(in srgb, var(--c-amount) 8%, var(--surface)); color: var(--c-amount); border: 1px dashed var(--c-amount); font-weight: 600; }

/* ===== 🔔 Schon abgebucht? ===== */
.due-card { padding: 10px 12px; margin-bottom: 14px; border: 1px solid color-mix(in srgb, var(--c-kind) 35%, var(--border)); }
.due-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; font-size: 15px; }
.due-head .badge { background: color-mix(in srgb, var(--c-kind) 14%, transparent); color: var(--c-kind); font-size: 12px; padding: 1px 8px; }
.due-sub { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 8px 0 0; }
.due-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border); transition: opacity 0.17s, transform 0.17s; }
.due-sub + .due-row { border-top: 0; }
.due-what { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; font: inherit; color: inherit; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; }
.due-what .entry-amount { margin-left: auto; }
.due-row.late .cat-ico { background: var(--warn-bg); }
.due-row.late small { color: var(--warn-text); }
.due-row.soon .entry-amount { opacity: 0.75; }
.due-acts { display: inline-flex; gap: 4px; flex: none; }
.due-ok { background: var(--pos); color: #fff; border-color: transparent; font-weight: 700; }
.due-ok:hover { background: var(--pos); filter: brightness(1.08); }
.due-row.done { background: color-mix(in srgb, var(--pos) 12%, transparent); transform: translateX(6px); opacity: 0.4; }
.due-row.gone, .check-card.gone { opacity: 0; transform: scale(0.97); transition: opacity 0.15s, transform 0.15s; }
.bal-list .due-row { padding: 7px 0; }
@media (max-width: 480px) { .due-ok span { display: none; } }

/* ===== Wochen-Check ===== */
.check-card { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; margin-bottom: 14px; border: 1px solid color-mix(in srgb, var(--c-amount) 40%, var(--border)); background: color-mix(in srgb, var(--c-amount) 5%, var(--surface)); }
.check-text { flex: 1 1 220px; display: flex; gap: 8px; align-items: flex-start; font-size: 15px; }
.check-text span { display: flex; flex-direction: column; }
.check-text small { color: var(--muted); font-size: 13px; }
.check-text small b { color: var(--c-amount); }
.check-acts { display: flex; flex-wrap: wrap; gap: 6px; }

/* ===== Weitere Konten, Werkzeuge ===== */
.acc-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
.acc-value { font-variant-numeric: tabular-nums; white-space: nowrap; }
.acc-value.neg { color: var(--neg); }
.acc-empty { margin: 0 0 8px; }
.acc-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
.modal .seg { flex-wrap: wrap; } /* viele Konten zur Auswahl */
.tools-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; padding: 10px; }
.tool { display: flex; gap: 10px; align-items: flex-start; text-align: left; font: inherit; color: inherit; background: var(--surface-2); border: 1px solid transparent; border-radius: 12px; padding: 10px 12px; cursor: pointer; transition: border-color 0.11s, transform 0.08s; }
.tool:hover { border-color: var(--accent); }
.tool:active { transform: scale(0.98); }
.tool span { display: flex; flex-direction: column; gap: 2px; }
.tool small { color: var(--muted); font-size: 12.5px; }
.tool-ico { font-size: 22px; line-height: 1; }

/* ===== Abweichung im Kontostand-Dialog ===== */
.expect p { margin: 4px 0; }
.expect-ok { color: var(--pos); font-weight: 700; }
.expect-diff b { color: var(--neg); }
.expect-hints { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; animation: appear 0.19s ease-out; }
.hint-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px; }
.hint-row > span { flex: 1 1 180px; }

/* ===== Kontoauszug-Abgleich ===== */
.bal-row.overdue .bal-what { color: var(--warn-text); }

/* ===== Kontoauszug: Start-Hinweis, Schnell-Check, Einmalig?, Rückblick ===== */
.start-import { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; }
.start-import span { flex: 1 1 220px; }
.bal-or { margin: 12px 0 0; }
.imp-lead { margin: 4px 0 10px; font-size: 14.5px; }
.grp { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--border); }
.grp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.grp-top { display: flex; align-items: center; gap: 8px; }
.grp-top .entry-amount { white-space: nowrap; font-weight: 700; }
@keyframes grow { from { transform: scaleY(0); } }
@keyframes widen { from { width: 0; } }
.guide { margin: 4px 0 12px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
.guide-safe { margin: 8px 0 0; font-size: 13px; color: var(--pos); font-weight: 600; }

/* ===== Regelmäßig (eigene Seite) ===== */
a.rec-row { color: inherit; text-decoration: none; grid-template-columns: 34px minmax(0, 1fr) auto auto; }
a.rec-row:hover { background: var(--surface-2); }
.rg-sum { padding: 12px 14px; }
.rg-next small { color: var(--muted); font-size: 12px; }
.rg-sum p { margin: 8px 0 0; }
.rg-next { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 13.5px; }
.rg-item { border-top: 1px solid var(--border); }
.rg-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 0; font: inherit; color: inherit; text-align: left; background: none; border: 0; cursor: pointer; }
.rg-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.rg-chev { color: var(--muted); font-size: 20px; transition: transform 0.15s; flex: none; }
.rg-item.open .rg-chev { transform: rotate(90deg); }
.rg-item.open > .rg-head { padding-bottom: 6px; }
.rg-detail { padding: 0 0 12px; display: flex; flex-direction: column; gap: 10px; }
.rg-replace { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 9px 11px; border-radius: 10px; background: var(--warn-bg); color: var(--warn-text); font-size: 13.5px; }
.rg-replace > span:first-of-type { flex: 1 1 200px; }
.rg-strip { display: flex; gap: 6px; overflow-x: auto; padding: 2px 1px 4px; scrollbar-width: thin; }
.rg-chip { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 52px; padding: 6px 6px 5px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 12.5px; color: inherit; cursor: pointer; position: relative; }
.rg-chip i { font-style: normal; font-weight: 800; font-size: 13px; line-height: 1.2; }
.rg-chip small { font-size: 10.5px; color: var(--c-amount); font-weight: 700; }
.rg-chip em { position: absolute; top: 2px; right: 4px; font-size: 9px; font-style: normal; color: var(--muted); }
.rg-chip.paid { background: color-mix(in srgb, var(--pos) 10%, var(--surface)); border-color: color-mix(in srgb, var(--pos) 45%, var(--border)); }
.rg-chip.paid i { color: var(--pos); }
.rg-chip.late { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn-text) 40%, var(--border)); }
.rg-chip.late i { color: var(--warn-text); }
.rg-chip.skip { opacity: 0.6; border-style: dashed; }
.rg-chip.open i { color: var(--muted); }
.rg-chip.now span { font-weight: 800; }
.rg-chip.sel { box-shadow: 0 0 0 2px var(--accent); border-color: var(--accent); }
.rg-chip.end { cursor: default; opacity: 0.7; border-style: dashed; }
.rg-month { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; animation: appear 0.15s ease-out; }
.rg-month-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.rg-month-head .rec-amount { margin-left: auto; font-size: 17px; }
.rg-state { margin: 0; font-weight: 600; font-size: 14px; }
.rg-state.paid { color: var(--pos); }
.rg-state.skip { color: var(--muted); }
.rg-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.rg-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.rg-inline .amount-wrap { width: 120px; }
.rg-inline .amount-wrap .input { padding: 6px 28px 6px 8px; }
.rg-inline select.input { width: auto; padding: 6px 8px; }
.rg-note { padding: 6px 9px; font-size: 13.5px; }
.rg-settings { border: 1px solid var(--border); border-radius: 12px; padding: 0 12px; }
.rg-settings summary { cursor: pointer; padding: 10px 0; font-weight: 600; font-size: 14px; }
.rg-settings[open] { padding-bottom: 12px; }
.rg-changes { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.rg-change { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; }
.rg-foot { display: flex; flex-wrap: wrap; gap: 6px; justify-content: space-between; margin-top: 10px; }
.rg-card.ended .card-head { margin-bottom: 0; }
.due-manage { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--accent); text-decoration: none; }
.due-row .due-acts .btn { white-space: nowrap; }
.due-row.replace small b { color: var(--text); }
/* Sechs Seiten: unten auf dem Handy etwas enger */
@media (max-width: 720px) {
  .nav a { flex: 1 1 0; min-width: 0; padding: 4px 2px; font-size: 10px; }
  .nav-t { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0; }
  .nav-t::after { content: attr(data-short); font-size: 10px; }
}
.due-row.replace { flex-wrap: wrap; }
.due-row.replace .entry-main small { white-space: normal; }
.due-row.replace .due-acts { width: 100%; justify-content: flex-end; }
.rec-row.editable { grid-template-columns: 34px minmax(0, 1fr) auto auto; cursor: pointer; }
.rec-row.editable:hover { background: var(--surface-2); }
/* Regelmäßig: beim Darüberfahren hervorheben – wie die Zeilen auf "Einträge" */
.rg-head { border-radius: 10px; padding: 9px 6px; margin: 0 -6px; width: calc(100% + 12px); transition: background 0.11s; }
.rg-head:hover, .rg-head:focus-visible { background: var(--surface-2); }
.rg-item.open > .rg-head { background: var(--surface-2); }
.rg-chip { transition: border-color 0.11s, box-shadow 0.11s; }
.rg-chip:not(.end):hover { border-color: var(--accent); }
.rg-state.last { color: var(--c-kind); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }

/* ===== Vorgemerkt (bei der Bank noch nicht gebucht) ===== */
.pend-tag { color: var(--c-date); font-weight: 600; white-space: nowrap; }
.booked-tag { color: var(--pos); font-weight: 600; white-space: nowrap; }
/* Bearbeiten: Bei der Bank ✓ abgebucht am … / ⏳ vorgemerkt */
.bank-state { display: flex; flex-direction: column; gap: 8px; }
.bank-state .seg { align-self: flex-start; }
.bank-date { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.bank-date[hidden] { display: none; }
.bank-date .input { flex: 1; max-width: 220px; }
.bank-hint { line-height: 1.35; }
.pend-toggle { font: inherit; font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 99px; border: 1px dashed var(--border); background: var(--surface); color: var(--muted); cursor: pointer; transition: background 0.11s, color 0.11s, border-color 0.11s; }
.pend-toggle:hover { border-color: var(--c-date); color: var(--c-date); }
.pend-toggle.on { border-style: solid; border-color: var(--c-date); background: color-mix(in srgb, var(--c-date) 12%, var(--surface)); color: var(--c-date); }
.bal-now { display: block; margin-top: 4px; font-size: 14px; }
.bal-now b { font-variant-numeric: tabular-nums; }
.bal-row.pend .bal-what, .bal-row.pend b { color: var(--c-date); }
.rg-state.pend { color: var(--c-date); }
.rg-chip.pend { background: color-mix(in srgb, var(--c-date) 10%, var(--surface)); border-color: color-mix(in srgb, var(--c-date) 45%, var(--border)); }
.rg-chip.pend i { color: var(--c-date); }

/* ===== Kontoauszug: welches Konto? / Kreditkarte ===== */
.imp-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 10px; margin-bottom: 8px; border-radius: 10px; background: var(--surface-2); font-size: 14px; font-weight: 600; }
.imp-acc:empty { display: none; }
.imp-acc .link-btn { margin-left: auto; }
.imp-accname { margin-top: 12px; }
[data-seg="impacc"] { flex-wrap: wrap; }
.acc-row .icon-btn { flex: none; }

/* ===== Aufräumen ===== */
.toolbar-acts { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.dup-bar { background: color-mix(in srgb, var(--c-kind) 10%, var(--surface)); color: var(--text); }
.cl-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.cl-pick .input { padding: 5px 8px; font-size: 13.5px; }
.cl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.cl-grp.done, .dup-pair.done { opacity: 0.35; transition: opacity 0.15s; }
.cl-nameless { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 14px; }
.cl-nameless span { flex: 1 1 180px; }
.cl-rest { display: block; margin: 12px auto 0; }
.dup-pair { padding: 10px 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.dup-head { display: flex; align-items: center; gap: 8px; }
.dup-line { font-size: 14px; }
.dup-line small { color: var(--muted); margin-left: 4px; }
.dup-line.drop { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--neg) 60%, transparent); }
.dup-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.tool.danger b { color: var(--neg); }
.modal-body .tool { width: 100%; margin-bottom: 8px; text-decoration: none; }

/* ===== Hintergrundwissen aus dem Kontoauszug ===== */
.learn-box { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); margin: 6px 0 10px; }
.learn-box p { margin: 0 0 6px; }
.learn-list { margin: 0 0 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.learn-bar { background: color-mix(in srgb, var(--c-amount) 9%, var(--surface)); color: var(--text); }
.ac-bank { color: var(--c-amount); font-weight: 700; white-space: nowrap; }
.bank-card .card-head h3 { color: var(--c-amount); }
.bank-row { grid-template-columns: 34px minmax(0, 1fr) auto auto; }
.bank-row .rec-actions { display: inline-flex; gap: 4px; }
/* ⏳ vormerken (nur letzte Woche, blass) · ✓ Abgebucht bei vorgemerkten Einträgen */
.pend-btn { opacity: 0.4; filter: grayscale(1); transition: opacity 0.11s, filter 0.11s; }
.pend-btn:hover { opacity: 0.9; filter: none; }
.booked-btn { white-space: nowrap; padding: 4px 9px; font-size: 12.5px; flex: none; }
@media (max-width: 420px) { .booked-btn span { display: none; } }
.entry-amount.pend { color: var(--c-date); }
.entry-amount.pend i { font-style: normal; font-size: 0.85em; }
.due-card .due-manage { display: block; margin: 8px 0 0; text-align: right; }
.due-head { flex-wrap: wrap; row-gap: 2px; }
.due-head > b { white-space: nowrap; }
/* "Schon abgebucht?": je Zahlung ✓ · ⏰ später · 🔕 ausblenden */
.due-head .badge { white-space: nowrap; }
.due-quiet { width: 30px; height: 30px; font-size: 15px; opacity: 0.55; transition: opacity 0.11s; }
.due-quiet:hover { opacity: 1; }
.due-acts { align-items: center; }

/* ===== Regelmäßig: Suche + Einfügen ===== */
.rg-search { margin-bottom: 12px; }
.rg-search .input { width: 100%; }
.rg-hits:empty { display: none; }
.rg-hits { margin: 6px 4px 0; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.modal.modal-wide { max-width: 640px; }
.pi-format { display: block; padding: 8px 10px; margin: 0 0 8px; border-radius: 8px; background: var(--surface-2); font-size: 12.5px; overflow-x: auto; white-space: nowrap; }
.modal-body p code { font-size: 12px; background: var(--surface-2); padding: 1px 4px; border-radius: 4px; word-break: break-word; }
.pi-steps { margin: 0 0 10px; padding-left: 20px; display: flex; flex-direction: column; gap: 2px; }
.pi-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 10px; }
.pi-help { margin: 0 0 10px; padding: 10px; border-radius: 8px; background: var(--surface-2); font-size: 12px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; max-height: 240px; overflow-y: auto; user-select: text; }
.pi-text { width: 100%; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; resize: vertical; min-height: 96px; }
.pi-sum { margin: 10px 0 6px; }
.pi-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.pi-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.pi-row input { margin-top: 3px; width: 17px; height: 17px; }
.pi-row .entry-main small { display: block; white-space: normal; overflow: visible; text-overflow: clip; }
.pi-row .badge { font-size: 11px; vertical-align: 1px; }
.pi-row .rec-amount { white-space: nowrap; }
.pi-row.off { opacity: 0.55; }
.pi-row.bad { border-color: color-mix(in srgb, var(--neg) 45%, var(--border)); background: color-mix(in srgb, var(--neg) 5%, var(--surface)); cursor: default; }
.pi-raw { word-break: break-all; }
.pi-err { color: var(--neg); }
.pi-warn { color: var(--warn-text); }

/* ===== Startseite: die Bühne – schlicht, eine Akzentfarbe, Zeile 1 im Mittelpunkt ===== */
/* Schritt-Farben hier schlicht grau – Akzent nur für Aktionen und die Kategorie */
.entry-page, .fly-ghost { --c-name: var(--muted); --c-amount: var(--text); --c-date: var(--muted); --c-cat: var(--accent); --c-kind: var(--muted); }
.fly-ghost.tok-amount, .fly-ghost.tok-date, .fly-ghost.tok-pay { background: var(--accent); color: var(--on-accent); }

/* Bühne: füllt den ersten Bildschirm, die Liste liegt darunter */
.hero { --hero-off: 154px; position: relative; min-height: calc(100vh - var(--hero-off)); min-height: calc(100svh - var(--hero-off)); display: flex; flex-direction: column; max-width: 660px; margin: 0 auto; }
@media (max-width: 720px) { .hero { --hero-off: 204px; } }
.hero-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; min-height: 36px; }
.hero-top .who .seg button { font-size: 14px; padding: 6px 14px; }
.hero-main { display: flex; flex-direction: column; }

/* Der Himmel über dem Formular: die Zahl steht mittig in der freien Fläche.
   Feste Mindesthöhe (aus der Fensterhöhe) → wächst das Formular beim Tippen, bleibt hier alles stehen. */
.hero-sky { position: relative; z-index: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 0 16px; min-height: clamp(96px, calc(100svh - 740px), 320px); }
.bell-slot:not(:empty) { margin-top: 8px; }
.sky-hints .hints.open { margin-top: 12px; }
@media (max-width: 720px) {
  .hero-sky { position: static; min-height: 0; padding: 4px 0 12px; } /* Glocke richtet sich dann an der Bühne aus (oben rechts) */
  .hero-sky::before { display: none; }
  .hero-sky .free-now b { font-size: 36px; margin: 0; }
}
.hero-sky::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(520px, 100%); height: 75%; transform: translate(-50%, -55%); z-index: -1; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 9%, transparent), transparent); }

/* Bleibt übrig – groß, zählt mit */
.free-now { display: flex; flex-direction: column; align-items: center; line-height: 1.12; text-decoration: none; color: var(--text); padding: 6px 20px; border-radius: 20px; text-align: center; transition: background-color 0.19s; }
.free-now:hover { text-decoration: none; background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.free-now small { color: var(--muted); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.free-now b { font-size: clamp(40px, 3.2vw + 2.6vh, 60px); font-weight: 850; font-variant-numeric: tabular-nums; letter-spacing: -0.025em; margin: 2px 0; }
.free-now b.pos { color: var(--pos); }
.free-now b.neg { color: var(--neg); }
.free-now .free-day { font-size: 13px; font-weight: 600; }
.free-now .pend-tag { font-size: 12px; }
.free-set { margin-top: 2px; font-size: 16px; font-weight: 750; color: var(--accent); white-space: nowrap; }

/* 🔔 Was offen ist: eine ruhige Zeile unter der Zahl – antippen klappt alles darunter auf */
.bell { display: inline-flex; align-items: center; gap: 8px; max-width: min(520px, 100%); padding: 6px 12px 6px 8px; border-radius: 999px; border: 0; background: color-mix(in srgb, var(--surface-2) 85%, transparent); color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer; transition: background-color 0.19s, box-shadow 0.19s; animation: bell-in 0.38s cubic-bezier(.2,.8,.2,1); }
.bell:hover { background: var(--accent-soft); }
.bell-i { position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); font-size: 13px; box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1); }
.bell b { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 12px; display: inline-grid; place-items: center; }
.bell-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-weight: 600; }
.bell-s { display: none; color: var(--muted); font-weight: 600; }
.bell-c { flex: none; color: var(--muted); font-size: 16px; line-height: 1; transition: transform 0.22s; }
.bell.open { background: var(--accent-soft); }
.bell.open .bell-c { transform: rotate(90deg); }
/* Überfällig: roter Punkt pulsiert sanft, die Glocke wackelt anfangs zweimal */
.bell.urgent b { background: var(--neg); }
.bell.urgent .bell-i { animation: ring 2.4s ease-in-out 0.6s 2; }
.bell.urgent .bell-i::after { content: ""; position: absolute; top: 0; right: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--neg); box-shadow: 0 0 0 2px var(--surface); animation: dot 2.4s ease-in-out infinite; }
@keyframes ring { 0%, 20%, 100% { transform: rotate(0); } 5% { transform: rotate(-12deg); } 10% { transform: rotate(10deg); } 15% { transform: rotate(-5deg); } }
@keyframes dot { 50% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 5px color-mix(in srgb, var(--neg) 20%, transparent); } }
@keyframes bell-in { from { opacity: 0; transform: translateY(6px); } }
/* Handy: die Glocke kompakt oben rechts neben der Person – die Fläche dort ist knapp */
@media (max-width: 720px) {
  .bell { padding: 5px 10px 5px 6px; }
  .bell-t { display: none; }
  .bell-s { display: inline; }
  .bell-c { display: none; }
}
.hints { display: none; width: min(560px, 100%); margin-left: auto; margin-right: auto; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); text-align: left; }
.hints.open { display: block; animation: soft-in 0.26s ease-out; }
.sky-hints { align-self: stretch; }
@media (min-width: 721px) { .sky-hints .hints-sum { display: none; } } /* steht schon in der Glocken-Zeile */
@keyframes soft-in { from { opacity: 0; transform: translateY(-4px); } }
.hints.urgent { border-color: color-mix(in srgb, var(--neg) 35%, var(--border)); }
.hints-sum { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.hints-sum b { color: var(--text); }
.hints-body > * { margin: 0 !important; }
.hints-body > * + * { margin-top: 10px !important; }
.hints-body .card { border: 0; box-shadow: none; padding: 10px 0 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; }

/* Formular: eine ruhige Karte */
.entry-form { padding: 16px; border-radius: 22px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px rgba(16, 24, 40, 0.07); }
.ef-guide { list-style: none; counter-reset: g; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 12px; padding: 0; font-size: 13px; color: var(--muted); }
.ef-guide li { counter-increment: g; display: flex; align-items: center; gap: 6px; }
.ef-guide li::before { content: counter(g); flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-size: 12px; font-weight: 800; }

/* Zeile 1: das Feld der Seite – mit sanftem Leuchten dahinter */
.zeile1 { position: relative; isolation: isolate; margin: 0 0 14px; padding: 14px; border-radius: 18px; background: var(--accent-soft); overflow: hidden; }
.zeile1::before { content: ""; position: absolute; inset: -40%; z-index: -1; will-change: transform; background: radial-gradient(closest-side at 30% 40%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), radial-gradient(closest-side at 75% 65%, color-mix(in srgb, var(--pos) 16%, transparent), transparent 70%); animation: aurora 14s ease-in-out infinite alternate; opacity: 0.8; transition: opacity 0.3s; }
.zeile1:focus-within::before { opacity: 1; animation-duration: 7s; }
@keyframes aurora { 0% { transform: translate(-6%, -4%) rotate(0deg); } 100% { transform: translate(6%, 5%) rotate(12deg); } }
.zeile1-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.zeile1-label { display: block; min-width: 0; margin: 0 0 0 2px; font-size: 16px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zeile1-label .sym { width: 18px; height: 18px; --sym-c: var(--accent); vertical-align: -3px; }
.zeile1-head .seg { padding: 2px; background: color-mix(in srgb, var(--surface) 70%, transparent); }
.zeile1-head .seg button { padding: 4px 11px; font-size: 13px; }
.entry-form .zeile1-head [data-slot="type"] { margin: 0; }
.zeile1 .name-box { border-width: 2px; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 16%, transparent); }
.zeile1 .name-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent), 0 10px 28px color-mix(in srgb, var(--accent) 22%, transparent); }
.zeile1 .input-hero { font-size: 22px; padding: 13px 16px; }
.zeile1 .stage, .zeile1 [data-slot="linkhint"]:not(:empty) { margin-top: 10px; }
@media (max-width: 420px) {
  .zeile1 { padding: 11px; }
  .zeile1-label { font-size: 15px; }
  .zeile1-label .sym { display: none; }
  .zeile1-head .seg button { padding: 4px 8px; font-size: 12.5px; }
  .hero-top .who .seg button { padding: 6px 10px; }
  .bell-t { display: none; }
}

/* Felder, die sich beim Tippen füllen – nur Anzeige + Antippen, symmetrisch:
   PC eine Reihe mit 5 gleich breiten Feldern, Handy 3 oben + 2 mittig darunter */
.ef-fields { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
@media (max-width: 699px) {
  .ef-fields { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ef-fields .ef-field { grid-column: span 2; }
  .ef-fields .ef-field:nth-child(4) { grid-column: 2 / span 2; }
  .ef-fields .ef-field:nth-child(5) { grid-column: 4 / span 2; }
}
.ef-field { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 58px; padding: 7px 8px 9px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; text-align: center; cursor: pointer; overflow: hidden; transition: border-color 0.19s, background-color 0.26s, box-shadow 0.19s, transform 0.11s; }
.ef-field:active { transform: scale(0.97); }
/* angetippt: kleiner Strich unten – „die Eingabe dazu ist darunter offen“ */
.ef-mark { position: absolute; left: 50%; bottom: 4px; width: 18px; height: 3px; border-radius: 2px; background: var(--accent); transform: translateX(-50%) scaleX(0); transition: transform 0.22s cubic-bezier(.2,.8,.2,1); }
.ef-field.open .ef-mark { transform: translateX(-50%) scaleX(1); }
.ef-field small { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.ef-field small .sym { width: 13px; height: 13px; }
.ef-v { display: block; max-width: 100%; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.ef-v i { font-style: normal; }
.ef-v em { font-style: normal; color: var(--accent); }
.ef-field:hover { border-color: var(--accent); }
.ef-field[data-field="amount"] .ef-v { font-size: 16px; font-variant-numeric: tabular-nums; }
/* leer: gestrichelt · Standard: ruhig grau · ausgefüllt: Akzent */
.ef-field[data-state="empty"] { border-style: dashed; background: var(--surface); }
.ef-field[data-state="maybe"] { border-style: dashed; border-color: var(--accent); background: var(--surface); }
.ef-field[data-state="maybe"] .ef-v { color: var(--text); }
.ef-field[data-state="filled"] { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); background: var(--accent-soft); }
.ef-field[data-state="filled"] .ef-v { color: var(--text); }
.ef-field[data-state="filled"] small { color: var(--accent); }
.ef-field[data-state="filled"]::after { content: "✓"; position: absolute; bottom: 5px; right: 6px; width: 15px; height: 15px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 10px; font-weight: 900; display: grid; place-items: center; animation: check-in 0.26s cubic-bezier(.2,.9,.3,1.4); }
.ef-field.open { border-color: var(--accent); border-style: solid; box-shadow: 0 0 0 3px var(--accent-soft); }
@keyframes check-in { from { transform: scale(0); } }
/* Ausgefüllt: Farbe läuft einmal durch, das Feld hüpft */
.ef-field.fill-in { animation: fill-in 0.52s cubic-bezier(.2,.9,.3,1.2); }
.ef-field.fill-in::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--accent) 30%, transparent) 50%, transparent 80%); transform: translateX(-100%); animation: sweep 0.52s ease-out; pointer-events: none; }
.ef-field.fill-in .ef-v { animation: value-in 0.34s cubic-bezier(.2,.9,.3,1.3); }
@keyframes fill-in { 30% { transform: scale(1.05); box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 28%, transparent); } 100% { transform: scale(1); } }
@keyframes sweep { to { transform: translateX(100%); } }
@keyframes value-in { from { transform: translateY(8px); opacity: 0; } }

/* Kategorien: eine Reihe Symbole – ein Tipp */
.entry-page .cat-tiles { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px 2px 4px; margin: 0 -2px; }
.entry-page .cat-tiles::-webkit-scrollbar { display: none; }
@media (min-width: 700px) { .entry-page .cat-tiles { flex-wrap: wrap; overflow: visible; justify-content: center; } }
.entry-page .cat-tile { flex: 0 0 74px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 2px; border: 0; background: none; border-radius: 14px; box-shadow: none; }
.entry-page .cat-tile .ti { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; background: var(--surface-2); border: 2px solid transparent; transition: transform 0.11s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s; }
.entry-page .cat-tile .tl { font-size: 11px; color: var(--muted); max-width: 72px; -webkit-line-clamp: 2; overflow-wrap: normal; word-break: normal; hyphens: auto; }
.entry-page .cat-tile:hover { background: none; }
.entry-page .cat-tile:hover .ti { border-color: var(--accent); transform: translateY(-2px); }
.entry-page .cat-tile:active .ti { transform: scale(0.9); }
.entry-page .cat-tile.on, .entry-page .cat-tile.suggested { background: none; border: 0; }
.entry-page .cat-tile.on .ti { background: var(--accent); border-color: var(--accent); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent); transform: scale(1.06); }
.entry-page .cat-tile.on .tl { color: var(--accent); font-weight: 800; }
.entry-page .cat-tile.suggested .ti { border: 2px dashed var(--accent); background: var(--accent-soft); animation: breathe 2s ease-in-out infinite; }
.entry-page .cat-tile.suggested .tl { color: var(--text); }
.entry-page .cat-tile.more .ti { font-size: 18px; color: var(--muted); }
@keyframes breathe { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent); } }

/* Die Eingabe unter den Feldern (immer nur eine offen, zu Beginn Kategorie) – alles mittig.
   .ef-main: das Wichtigste · .ef-more: klein darunter, Platz für weitere Funktionen je Feld */
.ef-panel { display: none; padding: 4px 0 8px; text-align: center; }
.ef-panel.open { display: block; animation: soft-in 0.26s ease-out; }
.ef-main { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px; }
.ef-more { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 16px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.ef-more:not(:has(:not(:empty), input)) { display: none; }
.ef-more a, .ef-more .link { color: var(--muted); font: inherit; font-weight: 600; text-decoration: none; background: none; border: 0; padding: 2px 0; cursor: pointer; }
/* Viele Konten: die Auswahl bricht mittig um statt seitlich herauszuragen */
.ef-panel .pay-row .seg { flex-wrap: wrap; justify-content: center; max-width: 100%; }
.ef-more a:hover, .ef-more .link:hover { color: var(--accent); }
/* Preis: groß und mittig */
.ef-panel .amount-hero { width: min(260px, 100%); }
.ef-panel .amount-hero .input { text-align: center; font-size: 28px; padding: 9px 40px; }
.ef-panel .price-context { min-height: 18px; }
.ef-panel .price-context small { font-size: 12.5px; font-weight: 600; }
.ef-panel .amount-badge { font-size: 11.5px; padding: 1px 8px; }
/* Datum, Art, Bezahlt */
.date-quick { gap: 6px; }
.ef-panel[data-panel="date"] .input { width: auto; max-width: 200px; padding: 6px 10px; font-size: 14px; }
.ef-panel .pay-row { margin-top: 0; }
.ef-panel .pay-row .pay-label { display: none; } /* steht schon auf dem Feld oben */
/* Kategorie: Symbole, darunter klein die Suche */
.ef-panel .cat-field { width: min(380px, 100%); min-height: 40px; padding: 4px 6px; text-align: left; }
.ef-panel .cat-match:not(:empty) { margin-top: 8px; }
.ef-panel[data-panel="note"] .input { max-width: 420px; text-align: center; }

/* Gleitende Höhe (siehe glide() in entry.js): nur während des Gleitens wird unten abgeschnitten */
.glide-in { display: flow-root; }
.glide.gliding { overflow-y: clip; }
.ef-note { display: flex; margin: 0 auto 4px; padding: 2px 6px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.ef-note:hover, .ef-note.set, .ef-note.open { color: var(--text); }

/* Speichern: klebt unten, sobald etwas getippt ist – leuchtet, wenn alles da ist */
.entry-page .commit { position: relative; margin-top: 8px; overflow: visible; border: 0; }
.entry-page .commit .save-btn { border-radius: 16px; padding: 16px 18px; font-size: 17.5px; transition: box-shadow 0.22s, transform 0.11s; }
.entry-page .commit.has-receipt { position: sticky; bottom: 12px; z-index: 6; border: 0; box-shadow: none; }
.entry-page .commit.has-receipt .save-btn { border-radius: 16px; box-shadow: 0 10px 26px rgba(16, 24, 40, 0.22); }
@media (max-width: 720px) { .entry-page .commit.has-receipt { bottom: calc(70px + env(safe-area-inset-bottom)); } }
.save-btn.ready { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent), 0 10px 28px color-mix(in srgb, var(--accent) 35%, transparent) !important; }
.save-btn.ready::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%); transform: translateX(-100%); animation: sheen 2.6s ease-in-out infinite; pointer-events: none; }
@keyframes sheen { 60%, 100% { transform: translateX(100%); } }
/* Zusammenfassung bleibt unsichtbar – sie fliegt nach dem Speichern in die Liste */
.entry-page .receipt { position: absolute; left: 0; right: 0; bottom: 100%; opacity: 0; pointer-events: none; }

/* Funkenregen beim Speichern */
.burst { position: fixed; z-index: 90; width: 0; height: 0; pointer-events: none; }
.burst i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: burst 0.68s cubic-bezier(.15,.75,.3,1) var(--d) both; }
.burst i:nth-child(3n) { background: var(--pos); }
.burst i:nth-child(3n+1) { background: #f5b301; width: 6px; height: 6px; }
.burst i:nth-child(4n) { border-radius: 2px; }
@keyframes burst { 0% { transform: translate(0, 0) scale(0.6); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(0.2) rotate(180deg); opacity: 0; } }

.rc-amount.expense { color: var(--text); }

/* Bis dahin unten am Bildschirm EINE Zeile: der letzte Eintrag – „ist gespeichert“ + „darunter kommt mehr“ */
.peek { display: flex; align-items: center; gap: 8px; width: min(560px, 100%); margin: auto auto 0; padding: 10px 14px; border: 0; border-radius: 14px; background: transparent; color: var(--muted); font: inherit; font-size: 13.5px; cursor: pointer; transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.19s; }
.peek[hidden] { display: none; }
.peek:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.peek-k { flex: none; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.peek i { flex: none; font-style: normal; }
.peek b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 700; }
.peek-a { flex: none; margin-left: auto; color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.peek-d { flex: none; }
.peek-c { flex: none; font-size: 16px; line-height: 1; animation: bob 1.8s ease-in-out 1.5s 3; }
.peek-in { animation: peek-in 0.38s cubic-bezier(.2,.8,.2,1); }
@keyframes bob { 50% { transform: translateY(3px); } }
@keyframes peek-in { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 420px) { .peek-k, .peek-d { display: none; } }

/* Niedrige Fenster (kleiner Laptop, halbes Fenster): etwas dichter, damit Speichern im Bild bleibt */
@media (min-width: 721px) and (max-height: 760px) {
  .hero-sky { padding-bottom: 10px; }
  .hero-sky .free-now b { font-size: 38px; }
  .entry-form { padding: 12px 14px; }
  .zeile1 { padding: 11px 12px; margin-bottom: 10px; }
  .zeile1 .input-hero { font-size: 20px; padding: 10px 14px; }
  .ef-fields { margin-bottom: 8px; }
  .entry-page .cat-tile .ti { width: 42px; height: 42px; font-size: 20px; }
  .entry-page .commit .save-btn { padding: 12px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .zeile1::before, .bell, .bell.urgent .bell-i, .bell.urgent .bell-i::after, .hints.open, .ef-panel.open, .peek-c, .peek-in, .save-btn.ready::after, .entry-page .cat-tile.suggested .ti, .ef-field.fill-in, .ef-field.fill-in::before, .ef-field.fill-in .ef-v, .ef-field[data-state="filled"]::after { animation: none; }
  .peek, .ent-drawer, .ent-drawer-in, .ent-scrim { transition: none; }
}

/* ===== Budgets ===== */
/* Startseite: Budgets unter der großen Zahl – eine ruhige Zeile; beim Tippen nur das betroffene */
.sky-budgets { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; max-width: min(560px, 100%); margin-top: 4px; padding: 4px 10px; border-radius: 12px; color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; transition: background-color 0.19s; }
.sky-budgets[hidden] { display: none; }
.sky-budgets:hover { text-decoration: none; background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.sb { position: relative; display: inline-flex; align-items: baseline; gap: 4px; padding-bottom: 5px; white-space: nowrap; }
.sb b { color: var(--text); font-variant-numeric: tabular-nums; }
.sb.over b { color: var(--neg); }
.sb.more { color: var(--muted); }
.sb-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.sb-bar > i { display: block; height: 100%; border-radius: 2px; background: var(--accent); transition: width 0.45s cubic-bezier(.2,.8,.2,1); }
.sb.over .sb-bar > i { background: var(--neg); }
.sb.focus { padding: 2px 4px 7px; color: var(--text); }
.sb.focus .sb-bar { left: 4px; right: 4px; }
.sb.focus.over { color: var(--neg); }
@media (max-width: 720px) { .sky-budgets { margin-top: 0; padding: 2px 8px; font-size: 12.5px; } } /* Handy: wenig Platz über dem Formular */
@media (max-width: 420px) { .sky-budgets .sb:nth-child(3) { display: none; } }

/* Kategorie-Auswahl: zu welchem Budget sie zählt */
.ef-panel [data-slot="catbudget"]:empty { display: none; }

/* Konto-Seite: davon in Budgets eingeplant */
.bal-budget { display: inline-block; margin-top: 8px; font-size: 13.5px; color: var(--muted); text-decoration: none; }
.bal-budget b { color: var(--text); }

/* Seite "Budgets" */
.bud-month { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 2px 0 12px; }
.bud-month b { min-width: 150px; text-align: center; font-size: 16px; }
.bud-hero { text-align: center; padding: 20px 18px; }
.bud-hero-label { display: block; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.bud-hero-left { display: block; margin: 2px 0 10px; font-size: 38px; font-weight: 850; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--pos); }
.bud-hero-left.neg { color: var(--neg); }
.bud-hero-sub { display: block; margin-top: 8px; color: var(--muted); font-size: 13px; }
.bud-free { margin: 12px auto 0; max-width: 520px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.bud-free b.pos { color: var(--pos); }
.bud-free b.neg { color: var(--neg); }
.bud-bar { position: relative; display: flex; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: visible; }
.bud-bar.big { height: 12px; max-width: 520px; margin: 0 auto; }
.bud-bar > i { display: block; height: 100%; transition: width 0.45s cubic-bezier(.2,.8,.2,1); }
.bud-bar > i:first-child { border-radius: 99px 0 0 99px; }
.bud-bar .spent { background: var(--accent); }
.bud-bar .plan { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--accent) 45%, transparent) 0 4px, color-mix(in srgb, var(--accent) 20%, transparent) 4px 8px); }
.bud-today { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--text); opacity: 0.35; }
.bud-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 14px; }
.bud-grid .card { margin: 0; }
.bud-card { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; font: inherit; color: var(--text); cursor: pointer; transition: transform 0.11s, box-shadow 0.15s, border-color 0.15s; }
.bud-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.bud-card.over { border-color: color-mix(in srgb, var(--neg) 45%, var(--border)); }
.bud-card.over .bud-bar .spent { background: var(--neg); }
.bud-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); font-size: 22px; }
.bud-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bud-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bud-top b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bud-left { flex: none; font-weight: 800; color: var(--pos); font-variant-numeric: tabular-nums; }
.bud-card.over .bud-left { color: var(--neg); }
.bud-sub, .bud-cats, .bud-dur { color: var(--muted); font-size: 12.5px; }
.bud-fast { color: #b45309; }
.bud-nocat { color: var(--accent); font-weight: 600; }
.bud-none { text-align: center; margin: 10px 0 16px; }
.bud-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 6px; border: 0; border-bottom: 1px solid var(--border); background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.bud-row:last-child { border-bottom: 0; }
.bud-row > span { font-size: 20px; }
.bud-row small { margin-left: auto; color: var(--muted); font-size: 12.5px; text-align: right; }
.bud-row:hover { background: var(--surface-2); }
.bud-row.on { background: var(--accent-soft); }
.bud-pick { margin-bottom: 10px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.bud-empty { text-align: center; padding: 26px 18px; }
.bud-empty-ico { font-size: 40px; }
.bud-empty p { max-width: 520px; margin: 8px auto 16px; }
.bud-examples { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 16px; }
.bud-example { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 140px; padding: 12px 14px; border: 1.5px dashed var(--border); border-radius: 14px; background: var(--surface); font: inherit; color: var(--text); cursor: pointer; transition: border-color 0.15s, transform 0.11s; }
.bud-example:hover { border-color: var(--accent); transform: translateY(-1px); }
.bud-example span { font-size: 24px; }
.bud-example small { color: var(--muted); }
/* Dialog */
.bud-name { display: flex; gap: 8px; }
.bud-name .input { flex: 1; }
.bud-icon-btn { flex: none; width: 46px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface-2); font-size: 22px; cursor: pointer; }
.bud-icon-btn:hover { border-color: var(--accent); }
.bud-icons[hidden] { display: none; }
.bud-months { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; }
.bud-months[hidden] { display: none; }
.bud-months .input { width: 80px; }
.bud-form [data-dur-hint] { display: block; margin-top: 6px; }
.bud-cats-pick { margin-top: 6px; }
.bud-cats-pick .chip small { color: var(--muted); font-weight: 500; }
.bud-cats-pick .chip.hint { border-style: dashed; border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .sb-bar > i, .bud-bar > i { transition: none; } }
/* Gemeinsame Budgets */
.bud-shared { color: var(--muted); font-size: 12.5px; }
.bud-split { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.bud-split[hidden], .bud-share[hidden] { display: none; }
.bud-share { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.bud-share b { flex: none; min-width: 92px; font-weight: 700; }
.bud-share b:last-child { text-align: right; }
.bud-share input[type=range] { flex: 1; min-width: 60px; accent-color: var(--accent); }
@media (max-width: 420px) { .bud-share { flex-wrap: wrap; } .bud-share input[type=range] { order: 3; flex-basis: 100%; } }

/* ===== Konto: Monat – Rückblick & Ausblick ===== */
.bal-month .card-head { margin-bottom: 6px; }
.bm-chart { position: relative; height: 120px; margin: 4px 6px 0; }
.bm-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tl-area { fill: color-mix(in srgb, var(--accent) 12%, transparent); }
.tl-past { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.tl-future { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 5 5; stroke-linejoin: round; opacity: 0.75; }
.tl-today { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.6; }
.tl-zero { stroke: var(--neg); stroke-width: 1; stroke-dasharray: 4 4; opacity: 0.6; }
.bm-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--surface); }
.bm-dot.end { background: var(--surface); border: 2.5px solid var(--accent); }
.bm-dot.end.neg { border-color: var(--neg); }
.bm-axis { position: relative; display: flex; justify-content: space-between; margin: 6px 0 4px; min-height: 18px; font-size: 12px; color: var(--muted); }
.bm-axis b { color: var(--text); }
.bm-axis b.neg { color: var(--neg); }
.bm-now { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; padding: 0 6px; background: var(--surface); }
.bm-warn { margin: 4px 0 0; font-size: 13px; color: var(--neg); }
.bm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
@media (max-width: 640px) { .bm-cols { grid-template-columns: 1fr; } }
.bm-col h4 { margin: 0 0 6px; font-size: 14px; }
.bm-col h4 small { color: var(--muted); font-weight: 500; margin-left: 4px; }
.bm-row { display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: baseline; padding: 5px 0; font-size: 13.5px; }
.bm-row > span:first-child { color: var(--muted); font-weight: 700; text-align: center; }
.bm-row b { font-variant-numeric: tabular-nums; }
.bm-what small { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-row.in b { color: var(--pos); }
.bm-row.sum { margin-top: 4px; padding-top: 7px; border-top: 1px solid var(--border); font-weight: 700; }
.bm-row.sum.pos b { color: var(--pos); }
.bm-row.sum.neg b { color: var(--neg); }
.bm-item { display: grid; grid-template-columns: 42px 1fr auto; gap: 8px; align-items: baseline; padding: 4px 0; font-size: 13.5px; }
.bm-day { color: var(--muted); font-size: 12px; font-weight: 700; text-align: right; }
.bm-item.late .bm-day { color: var(--neg); }
.bm-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-name small { color: var(--muted); }
.bm-name small.neg { color: var(--neg); }
.bm-item b { font-variant-numeric: tabular-nums; font-weight: 700; }
.bm-item b.income { color: var(--pos); }
.bm-more { padding: 2px 0 4px 50px; font-size: 12px; color: var(--muted); }
.bm-axis .gone { visibility: hidden; }
.bm-now.left { transform: none; left: 0 !important; padding-left: 0; }
.bm-now.right { transform: none; left: auto !important; right: 0; padding-right: 0; }

/* ===== Kreditkarte: Abrechnung prüfen ===== */
.cs-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 4px; }
.cs-nav b { min-width: 170px; text-align: center; }
.cs-range { text-align: center; margin: 0 0 12px; color: var(--muted); font-size: 13.5px; }
.cs-range b { color: var(--text); }
.cs-diff { margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, #f5b301 14%, var(--surface)); font-size: 13px; }
.cs-list, .cs-more { border-top: 1px solid var(--border); }
.cs-row { display: grid; grid-template-columns: 52px 1fr auto auto; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.cs-row.off { color: var(--muted); }
.cs-date { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.cs-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-row b { font-variant-numeric: tabular-nums; }
.cs-sum { display: flex; justify-content: space-between; padding: 10px 0; font-weight: 700; }
.cs-more { margin-top: 4px; }
.cs-more summary { padding: 10px 0; cursor: pointer; color: var(--accent); font-weight: 600; font-size: 13.5px; }
.card-hint:empty { display: none; }
.card-hint { flex-basis: 100%; color: var(--muted); }
.card-hint b { color: var(--text); }
.bm-item.card .bm-day { font-size: 13px; }

/* ---------- Kreditkarte: Abrechnung in zwei Schritten (abgerechnet → abgebucht) ---------- */
.cs-stated { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.cs-stated .amount-wrap { max-width: 130px; }
.cs-stated .input { padding-top: 4px; padding-bottom: 4px; }
@media (max-width: 480px) {
  .cs-stated { flex-wrap: wrap; }
}
/* "Schon abgebucht?": Kreditkarte klar erkennbar */
.due-row.card-due .cat-ico { background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); }
.pay-card { font-weight: 700; color: var(--accent); white-space: nowrap; }

.due-row .cat-ico.via-card { position: relative; overflow: visible; }
.due-row .cat-ico.via-card::after { content: '💳'; position: absolute; right: -5px; bottom: -5px; font-size: 13px; line-height: 1; padding: 2px; border-radius: 7px; background: var(--surface); box-shadow: 0 0 0 1px var(--border); }

/* ---------- Kreditkarte: eine Ansicht (abgerechnet / abgebucht + Heute) ---------- */
.cc-steps { display: grid; gap: 8px; margin-bottom: 10px; }
.cc-step { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.cc-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); font-size: 17px; }
.cc-main { min-width: 0; display: grid; gap: 1px; }
.cc-main small { color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.cc-date { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cc-date .input { width: 150px; padding-top: 5px; padding-bottom: 5px; }
.cc-tag { flex-basis: 100%; text-align: right; font-style: normal; font-size: 11.5px; color: var(--muted); }
.cc-flow { display: grid; gap: 6px; margin-bottom: 12px; }
.cc-now { display: grid; gap: 2px; padding: 9px 12px; border-radius: 12px; font-size: 13px; }
.cc-now span { color: var(--muted); }
.cc-now.run { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.cc-now.run b { color: var(--accent); }
.cc-now.wait { background: color-mix(in srgb, #f5b301 14%, var(--surface)); }
.cc-more { border-top: 1px solid var(--border); }
.cc-more > summary { padding: 12px 0; cursor: pointer; font-weight: 700; font-size: 14px; }
.cc-more > summary small { font-weight: 500; color: var(--muted); margin-left: 4px; }
.cc-more[open] > summary { padding-bottom: 6px; }
.cc-more .cs-stated { margin: 0 0 10px; }
.cc-settings { padding-bottom: 8px; }
@media (max-width: 480px) {
  .cc-step { grid-template-columns: 32px 1fr; }
  .cc-date { grid-column: 1 / -1; justify-content: flex-start; }
  .cc-date .input { flex: 1; min-width: 0; width: auto; }
  .cc-tag { text-align: left; }
}

/* ---------- Gemeinsames Budget: nur mein Teil, das ganze erst nach Antippen ---------- */
.bud-we { font-style: normal; font-size: 13px; margin-left: 2px; }
.bud-part .bud-shared { color: var(--accent); font-weight: 600; }
.bud-part:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bud-all { display: grid; gap: 4px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); font-size: 12.5px; color: var(--muted); }
.bud-all-row { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; color: var(--text); font-size: 13px; }
.bud-all .btn { justify-self: start; margin-top: 2px; }
/* Budget bearbeiten: Kategorien suchen */
.bud-catsearch { display: block; margin: 6px 0 8px; }
.bud-catsearch .input { width: 100%; }
.chip.chip-new { border-style: dashed; color: var(--accent); }

/* Kopfzeile bei mittlerer Breite (Tablet, kleines Fenster): alle Seiten passen hinein – kurze Namen, notfalls nur Symbole */
@media (min-width: 721px) and (max-width: 1180px) {
  .nav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: none; gap: 4px; padding: 7px 9px; }
  .nav-t { font-size: 0; }
  .nav-t::after { content: attr(data-short); font-size: 14px; }
}

/* Eintragszeile: Datum vorne, später Datiertes hervorgehoben, Art nur als Symbol */
.when-tag { white-space: nowrap; }
.when-tag.future { color: var(--accent); font-weight: 600; }
.kind-ico { cursor: help; }
@media (max-width: 480px) { .when-tag .when-word { display: none; } }

/* ---------- Jährlich & seltener: Monate wählen, Betrag je Monat, Spielraum ---------- */
.rg-months { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 6px; }
.rg-mchip { font: inherit; font-size: 13px; font-weight: 600; padding: 7px 0; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; transition: background 0.11s, color 0.11s, border-color 0.11s; }
.rg-mchip:hover { border-color: var(--accent); }
.rg-mchip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.rg-quarters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.rg-quarters[hidden] { display: none; }
.rg-mamts { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 6px; }
.rg-mamts[hidden] { display: none; }
.rg-mamts label { display: grid; gap: 2px; font-size: 12.5px; color: var(--muted); }
.rg-mamts .input { padding-top: 5px; padding-bottom: 5px; }
.rg-new .check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.rg-state.moved { background: color-mix(in srgb, #f5b301 14%, var(--surface)); }
.due-moved { color: color-mix(in srgb, #b07d00 85%, var(--text)); font-weight: 600; }
.due-row.manual .cat-ico { background: color-mix(in srgb, #f5b301 18%, var(--surface-2)); }
@media (max-width: 480px) {
  .rg-months { grid-template-columns: repeat(4, 1fr); }
}

.rg-new [hidden] { display: none !important; }

/* ---------- 📆 Was kommt wann? (nächste 12 Monate, ohne Monatliches) ---------- */
.ry-card .card-head { margin-bottom: 4px; }
.ry-month { display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--border); }
.ry-month.now .ry-m b { color: var(--accent); }
.ry-m { display: grid; line-height: 1.15; }
.ry-m b { font-size: 15px; }
.ry-m small { color: var(--muted); font-size: 11.5px; }
.ry-items { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ry-item { font: inherit; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; cursor: pointer; transition: border-color 0.11s, background 0.11s; }
.ry-item:hover { border-color: var(--accent); }
.ry-item > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ry-item i { font-style: normal; }
.ry-item small { color: var(--muted); }
.ry-item b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ry-item.paid { opacity: 0.6; }
.ry-item.moved { border-color: color-mix(in srgb, #f5b301 55%, var(--border)); background: color-mix(in srgb, #f5b301 10%, var(--surface)); }
.ry-sum { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 4px; }
.ry-more { margin-top: 6px; }
@media (max-width: 480px) {
  .ry-month { grid-template-columns: 40px 1fr; }
  .ry-sum { grid-column: 2; padding-top: 0; font-size: 13px; color: var(--muted); }
}

.rg-flex-hint:not(:empty) { display: block; margin: 4px 0 2px; color: color-mix(in srgb, #b07d00 85%, var(--text)); font-weight: 600; font-size: 12.5px; }

/* ---------- Einfügen: Zeile mit ✎ aufklappen und ändern ---------- */
.pi-row { display: block; cursor: default; }
.pi-row-head { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: 8px; align-items: start; }
.pi-row-head .icon-btn { margin-top: -4px; }
.pi-row.open { border-color: var(--accent); }
.pi-row .pi-edit input:not([type="checkbox"]) { margin-top: 0; width: 100%; height: auto; }
.pi-edit { margin: 10px 0 2px 30px; padding-top: 10px; border-top: 1px dashed var(--border); }
.pi-edit .field { margin: 0; }
.pi-edit-foot { display: flex; justify-content: flex-end; }
@media (max-width: 480px) { .pi-edit { margin-left: 0; } }

/* ---------- Regelmäßig: Dieser Monat – erledigt, überfällig, kommt noch ---------- */
.rm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.rm-lines { display: grid; gap: 16px; min-width: 0; }
.rm-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.rm-bar { display: flex; height: 10px; margin: 6px 0; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); }
.rm-bar i { display: block; height: 100%; }
.rm-bar .done { background: var(--pos); }
.rm-bar .late { background: #f59e0b; }
.rm-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.rm-legend b { font-variant-numeric: tabular-nums; }
.rm-legend .done { color: var(--pos); }
.rm-legend .late { color: var(--warn-text); }
.rm-legend .coming { color: var(--accent); }
.rm-week, .rm-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.rm-week span { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); padding-bottom: 2px; }
.rm-day { position: relative; display: grid; place-items: center; height: 34px; padding: 0; border: 1px solid transparent; border-radius: 8px; font: inherit; font-size: 12.5px; color: var(--text); background: var(--surface); }
.rm-day b { font-weight: 600; }
.rm-day i { position: absolute; top: 0; right: 3px; font-style: normal; font-size: 10px; font-weight: 800; line-height: 1.5; }
.rm-day.blank { background: none; }
.rm-day.past { color: var(--muted); background: var(--surface-2); }
.rm-day.past b { font-weight: 400; }
.rm-day.future { border-color: var(--border); }
.rm-day.today { border: 2px solid var(--accent); font-weight: 800; }
.rm-day.done { background: color-mix(in srgb, var(--pos) 16%, var(--surface)); color: var(--pos); }
.rm-day.coming { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent); }
.rm-day.coming b, .rm-day.late b, .rm-day.done b { font-weight: 800; }
.rm-day.late { background: var(--warn-bg); color: var(--warn-text); }
button.rm-day { cursor: pointer; }
button.rm-day:hover, .rm-day.sel { outline: 2px solid var(--accent); outline-offset: 1px; }
.rm-key { display: flex; flex-wrap: wrap; gap: 3px 10px; margin: 8px 0 0; font-size: 11.5px; color: var(--muted); }
.rm-key .k { display: inline-flex; align-items: center; gap: 4px; }
.rm-key .past::before, .rm-key .today::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--surface-2); }
.rm-key .today::before { background: none; border: 2px solid var(--accent); }
.rm-key .done { color: var(--pos); }
.rm-key .coming { color: var(--accent); }
.rm-key .late { color: var(--warn-text); }
.rm-sel { display: grid; gap: 2px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.rm-sel-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 6px 4px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.rm-sel-row:hover { background: var(--surface-2); }
.rm-sel-row b { font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .rm-grid { grid-template-columns: minmax(0, 1fr); } }
/* Listen: getrennt nach Stand, jede Zahlung farbig am Rand */
.rg-sub { display: flex; justify-content: space-between; gap: 8px; margin: 12px 0 2px; padding: 4px 10px; border-radius: 8px; font-size: 12.5px; }
.rg-sub span { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rg-sub.done { background: color-mix(in srgb, var(--pos) 12%, transparent); color: var(--pos); }
.rg-sub.coming { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.rg-sub.late { background: var(--warn-bg); color: var(--warn-text); }
.rg-sub.off { background: var(--surface-2); color: var(--muted); }
.rg-item { box-shadow: inset 3px 0 0 transparent; }
.rg-item.st-paid, .rg-item.st-pending { box-shadow: inset 3px 0 0 var(--pos); }
.rg-item.st-late { box-shadow: inset 3px 0 0 #f59e0b; }
.rg-item.st-today, .rg-item.st-soon, .rg-item.st-ahead, .rg-item.st-flex { box-shadow: inset 3px 0 0 var(--accent); }
.rg-item.st-paid .rg-head .entry-main b, .rg-item.st-paid .rec-amount { opacity: 0.72; }
.badge.today { background: var(--accent); color: #fff; }
.badge.pend { background: var(--warn-bg); color: var(--warn-text); }
/* Budgets zum Ansehen */
.rg-bud { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 4px; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; }
.rg-bud:hover { text-decoration: none; background: var(--surface-2); }
.rg-bud .entry-main { gap: 3px; }
.rg-bud .bud-bar { margin-top: 2px; }
.rg-bud-left { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--pos); }
.rg-bud.over .rg-bud-left { color: var(--neg); }

/* ---------- Regelmäßig: die ganze Rechnung oben ---------- */
.rs-eq { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.rs-tile { flex: 1 1 120px; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); }
.rs-tile small { color: var(--muted); font-size: 12px; }
.rs-tile b { font-size: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rs-tile.in b { color: var(--pos); }
.rs-tile.total { flex-grow: 1.4; background: color-mix(in srgb, var(--pos) 14%, var(--surface)); }
.rs-tile.total b { font-size: 23px; color: var(--pos); }
.rs-tile.total.minus { background: color-mix(in srgb, var(--neg) 12%, var(--surface)); }
.rs-tile.total.minus b { color: var(--neg); }
.rs-op { align-self: center; color: var(--muted); font-size: 18px; font-weight: 700; }
/* Gesamt je Person und zusammen */
.rm-total { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.rm-total-title { display: block; margin-bottom: 6px; }
.rm-wrap { overflow-x: auto; }
.rm-total table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.rm-total th, .rm-total td { padding: 5px 8px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--border); }
.rm-total tbody th { text-align: left; font-weight: 500; color: var(--muted); white-space: normal; }
.rm-total thead th { font-size: 12.5px; }
.rm-total .on { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.rm-total .sum th, .rm-total .sum td { font-weight: 800; color: var(--text); }
.rm-total .sum td.pos { color: var(--pos); }
.rm-total .sum td.neg { color: var(--neg); }
.rm-total .real th, .rm-total .real td { border-bottom: 0; font-size: 14.5px; }
.rm-total p { margin: 6px 0 0; }
.rs-end { flex: 1.4 1 170px; display: flex; align-items: stretch; gap: 8px; min-width: 0; } /* "=" bricht mit der Summe um */
.rm-total .short { display: none; }
@media (max-width: 480px) {
  .rm-total .full { display: none; }
  .rm-total .short { display: inline; }
  .rm-total table { font-size: 12.5px; }
  .rm-total th, .rm-total td { padding: 5px 4px; }
  .rm-total .real th, .rm-total .real td { font-size: 13px; }
}

/* ---------- Unterseiten und "Wo bin ich?" ---------- */
.pagebar { position: sticky; top: var(--head-h, 56px); z-index: 15; max-width: 960px; margin: 0 auto; padding: 0 16px; background: var(--bg); }
body.auth-mode .pagebar { display: none; }
.crumbs[hidden] { display: none; }
.crumbs { display: flex; align-items: center; gap: 10px; min-height: 38px; padding-top: 8px; font-size: 13.5px; color: var(--muted); }
.crumb-back { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px 5px 9px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-weight: 700; text-decoration: none; white-space: nowrap; }
.crumb-back:hover { text-decoration: none; filter: brightness(0.96); }
.crumb-path { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumb-path b { color: var(--text); }
/* Optionen: Hauptseite */
.opt-hub { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.opt-tile { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); text-decoration: none; transition: border-color 0.11s, transform 0.11s; }
.opt-tile:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-1px); }
.opt-tile .entry-main small { white-space: normal; }
/* Einträge: regelmäßige Zahlung führt zu Regelmäßig */
.rec-go { color: var(--accent); font-weight: 650; white-space: nowrap; }
.tabs .seg { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }

/* ---------- Reiter: klar als Menü ---------- */
.subnav { position: relative; display: flex; gap: 0; margin-top: 10px; padding: 4px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-2); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--text) 7%, transparent); }
.subnav[hidden] { display: none; }
.sub-ind { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n, 2)); transform: translateX(calc(100% * var(--i, 0))); border-radius: 11px; background: var(--surface); box-shadow: 0 1px 3px color-mix(in srgb, var(--text) 16%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); transition: transform 0.18s cubic-bezier(0.3, 1.25, 0.5, 1); }
.subnav a { position: relative; z-index: 1; flex: 1; text-align: center; padding: 9px 10px; border-radius: 11px; color: var(--muted); font-weight: 650; font-size: 14.5px; text-decoration: none; cursor: pointer; transition: color 0.11s, background-color 0.11s; }
.subnav a:hover { text-decoration: none; color: var(--text); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.subnav a.on { color: var(--accent); background: none; font-weight: 750; }
/* ---------- Seitenwechsel ---------- */
.page.enter-fwd { animation: page-in-fwd 0.15s cubic-bezier(0.2, 0.75, 0.3, 1); }
.page.enter-back { animation: page-in-back 0.15s cubic-bezier(0.2, 0.75, 0.3, 1); }
@keyframes page-in-fwd { from { opacity: 0.25; transform: translateX(26px); } }
@keyframes page-in-back { from { opacity: 0.25; transform: translateX(-26px); } }
/* Grüner Strich beim Bereichswechsel: läuft in 0,26 s durch */
.page-sign { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
.ps-line { position: absolute; top: var(--head-h, 56px); left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--accent) 45%, color-mix(in srgb, var(--accent) 45%, #fff) 70%, transparent); transform-origin: left; animation: ps-line 0.26s ease-out both; }
.page-sign.back .ps-line { transform-origin: right; }
@keyframes ps-line { 0% { transform: scaleX(0); opacity: 1; } 60% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
html.no-motion .page-sign { display: none; }
.nav a.on .nav-ico { display: inline-block; animation: nav-pop 0.21s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes nav-pop { from { transform: scale(0.72); } }
html.no-motion .page, html.no-motion .nav-ico, html.no-motion .ipop { animation: none !important; }
html.no-motion .sub-ind { transition: none; }
/* ---------- Startseite: Zusammen klein über der Zahl ---------- */
.sum-pill { position: relative; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 2px; padding: 3px 11px 3px 8px; border: 1px solid var(--border); border-radius: 99px; background: color-mix(in srgb, var(--surface) 82%, transparent); color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: border-color 0.11s, transform 0.11s, box-shadow 0.11s; }
.sum-pill[hidden] { display: none; }
.sum-pill:hover, .sum-pill[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 18%, transparent); transform: translateY(-1px); }
.sum-pill b { font-weight: 800; font-variant-numeric: tabular-nums; }
.sum-pill b.pos { color: var(--pos); }
.sum-pill b.neg { color: var(--neg); }
.sum-dot { position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 2px var(--bg); }
.free-now, .sky-budgets { cursor: pointer; }
.free-now[aria-expanded="true"], .sky-budgets[aria-expanded="true"] { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
/* ---------- Kleines Info-Fenster ---------- */
.ipop { position: fixed; z-index: 50; display: flex; flex-direction: column; gap: 7px; width: min(320px, calc(100vw - 24px)); padding: 14px 16px 10px; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); border-radius: 18px; background: var(--surface); color: var(--text); text-decoration: none; font-size: 13.5px; box-shadow: 0 16px 40px color-mix(in srgb, var(--text) 18%, transparent), 0 2px 6px color-mix(in srgb, var(--text) 8%, transparent); transform-origin: var(--tip, 50%) top; animation: ipop-in 0.13s cubic-bezier(0.2, 1.1, 0.4, 1); transition: border-color 0.11s; }
.ipop.above { transform-origin: var(--tip, 50%) bottom; }
.ipop:hover { text-decoration: none; border-color: var(--accent); }
.ipop::before { content: ''; position: absolute; left: calc(var(--tip, 50%) - 7px); width: 13px; height: 13px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); transform: rotate(45deg); }
.ipop.below::before { top: -7.5px; border-right: 0; border-bottom: 0; }
.ipop.above::before { bottom: -7.5px; border-left: 0; border-top: 0; }
@keyframes ipop-in { from { opacity: 0; transform: scale(0.93) translateY(-4px); } }
.ip-title { color: var(--muted); font-size: 12.5px; font-weight: 650; }
.ip-big { margin-top: -5px; font-size: 26px; font-weight: 850; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ip-big.pos { color: var(--pos); }
.ip-big.neg { color: var(--neg); }
.ip-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; }
.ip-row b, .ip-line b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ip-row b.neg, .ip-line b.neg { color: var(--neg); }
.ip-row small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.ip-bar { grid-column: 1 / -1; display: block; height: 5px; border-radius: 99px; overflow: hidden; background: var(--surface-2); }
.ip-bar > i { display: block; height: 100%; border-radius: 99px; background: var(--pos); }
.ip-bar.neg > i { background: var(--neg); }
.ip-line { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-bottom: 1px solid var(--border); }
.ip-line span { color: var(--muted); }
.ip-note { padding: 6px 9px; border-radius: 10px; background: var(--warn-bg); color: var(--warn-text); font-size: 12.5px; font-weight: 600; }
.ip-go { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 2px; padding-top: 4px; color: var(--accent); font-size: 13px; font-weight: 750; }
.ip-go i { font-style: normal; transition: transform 0.11s; }
.ipop:hover .ip-go i { transform: translateX(3px); }

/* Treffer: Kreise kommen hinter dem Formular nach oben hervor */
.hero-main { position: relative; }
.entry-form { position: relative; z-index: 2; }
.orbs { position: absolute; z-index: 1; left: 0; right: 0; bottom: calc(100% + 6px); display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 6px 10px; pointer-events: none; }
.orb { pointer-events: auto; display: flex; flex-direction: column; align-items: center; width: 78px; text-align: center; }
.orb-in { animation: orb-in 0.26s cubic-bezier(0.2, 1, 0.3, 1.12) backwards; }
.orb.leaving { animation: orb-out 0.14s ease-in forwards; pointer-events: none; }
@keyframes orb-in { from { transform: translateY(135%) scale(0.82); } }
@keyframes orb-out { to { transform: translateY(135%) scale(0.86); } }
.orb-c { position: relative; display: grid; place-items: center; width: 58px; height: 58px; padding: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--pos) 45%, var(--border)); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; box-shadow: 0 6px 16px color-mix(in srgb, var(--text) 12%, transparent); transition: transform 0.11s, box-shadow 0.11s; }
.orb-c:hover, .orb-c[aria-expanded="true"] { transform: translateY(-2px) scale(1.04); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 26%, transparent); }
.orb-c b { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; }
.orb-c b.s { font-size: 11px; }
.orb-c b.xs { font-size: 9.5px; }
.orb-ok { position: absolute; top: -3px; right: -3px; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--pos); color: #fff; font-style: normal; font-size: 11px; font-weight: 800; border: 2px solid var(--surface); }
.orb.due .orb-c { width: 74px; height: 74px; border-color: var(--accent); background: var(--accent-soft); }
.orb.due .orb-c b { font-size: 14.5px; }
.orb.due .orb-c b.s { font-size: 12.5px; }
.orb.due .orb-c b.xs { font-size: 10.5px; }
.orb.rest .orb-c { width: 46px; height: 46px; border-color: var(--border); }
.orb-tick { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -13px; padding: 0; border-radius: 50%; border: 2px solid var(--surface); background: var(--accent); color: #fff; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; box-shadow: 0 3px 9px color-mix(in srgb, var(--accent) 40%, transparent); transition: transform 0.11s; }
.orb-tick:hover { transform: scale(1.14); }
.orb-name { max-width: 100%; margin-top: 3px; font-size: 12px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orb-day { color: var(--muted); font-size: 11px; line-height: 1.2; white-space: nowrap; }
.hero-sky > *, .hero-top { transition: opacity 0.15s; }
.hero-sky.orbs-on .bell-slot, .hero-sky.orbs-on .sky-hints, .hero-sky.orbs-on .sky-budgets, .hero-sky.orbs-over > *, .hero-top.orbs-over { opacity: 0; pointer-events: none; }
@media (max-width: 720px) {
  .orbs { gap: 4px 6px; }
  .orb { width: 70px; }
  .orb-c { width: 50px; height: 50px; }
  .orb-c b { font-size: 11px; }
  .orb-c b.s { font-size: 9.5px; }
  .orb-c b.xs { font-size: 8.5px; }
  .orb.due .orb-c { width: 62px; height: 62px; }
  .orb.due .orb-c b { font-size: 12.5px; }
  .orb.due .orb-c b.s { font-size: 11px; }
  .orb.due .orb-c b.xs { font-size: 9.5px; }
  .orb-tick { width: 28px; height: 28px; margin-top: -12px; font-size: 14px; }
}
/* Fenster zum Kreis: wie bei den Budgets, aber mit Knöpfen */
.ipop-panel { width: min(340px, calc(100vw - 24px)); padding-bottom: 14px; cursor: default; }
.ipop-panel:hover { border-color: color-mix(in srgb, var(--accent) 22%, var(--border)); }
.ip-scroll { min-height: 0; overflow-y: auto; }
.ip-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; margin: 2px 0; padding-top: 8px; border-top: 1px solid var(--border); font-size: 13px; }
.ip-facts dt { color: var(--muted); font-size: 11.5px; }
.ip-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ip-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.ip-acts:empty { display: none; }
.ip-state { display: flex; align-items: center; gap: 6px; color: var(--pos); font-weight: 700; cursor: default; }
.ip-state i { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--pos) 15%, transparent); font-style: normal; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .orb-in, .orb.leaving { animation: none; } .orb-c, .orb-tick { transition: none; } }
html.no-motion .orb-in, html.no-motion .orb.leaving { animation: none; }

/* Zahlung aufgeklappt: Monate · Historie · Einstellungen */
.rg-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--surface-2); }
.rg-tabs button { flex: 1 1 auto; min-width: 0; padding: 8px 4px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background-color 0.11s, color 0.11s; }
.rg-tabs button:hover { color: var(--text); }
.rg-tabs button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px color-mix(in srgb, var(--text) 14%, transparent); }
.rg-ask { margin: 2px 0 -2px; font-weight: 700; font-size: 14px; }
.rg-more-btn { align-self: flex-start; font-size: 13px; }
.rg-more-btn i { font-style: normal; }
.rg-history { display: flex; flex-direction: column; gap: 4px; }
.rg-hsum { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.rg-hsum > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.rg-hsum small { color: var(--muted); font-size: 12.5px; }
.rg-learn { margin: 2px 0; padding: 8px 12px; border-radius: 12px; background: var(--accent-soft); font-size: 13px; }
.rg-hrow { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rg-hrow:hover { background: var(--surface-2); }
.rg-hrow > i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-style: normal; font-size: 12.5px; font-weight: 800; }
.rg-hrow > i.paid { background: color-mix(in srgb, var(--pos) 15%, transparent); color: var(--pos); }
.rg-hrow > i.off { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.rg-hrow > i.late { background: var(--warn-bg); color: var(--warn-text); }
.rg-hmain { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rg-hmain b { font-size: 14px; }
.rg-hmain small { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.rg-hright { flex: none; display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.rg-hright b { font-size: 14px; }
.rg-hright small { color: var(--muted); font-size: 12.5px; }
@media (max-width: 420px) { .rg-tabs button { font-size: 12.5px; } }

/* Aufgeklappte Zahlung: ein Feld – Kopf, Reiter, Monate und Inhalt gehören sichtbar zusammen */
.rg-item.open[class] { margin: 10px -8px; border: 2px solid color-mix(in srgb, var(--accent) 55%, var(--border)); border-radius: 18px; background: var(--surface); overflow: hidden; box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 14%, transparent), 0 2px 6px color-mix(in srgb, var(--text) 6%, transparent); }
.rg-item.open + .rg-item { border-top: 0; }
.rg-item.open > .rg-head { margin: 0; width: 100%; padding: 12px 14px; border-radius: 0; background: var(--accent-soft); }
.rg-item.open > .rg-head .cat-ico { background: var(--surface); }
.rg-item.open .rg-detail { gap: 0; padding: 0; animation: none; }
.rg-item.open .rg-detail > .rg-replace { margin: 10px 14px 0; }
.rg-item.open .rg-tabs { gap: 0; padding: 0 6px; border-radius: 0; background: var(--accent-soft); border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); }
.rg-item.open .rg-tabs button { position: relative; border-radius: 0; padding: 10px 4px; background: none; box-shadow: none; }
.rg-item.open .rg-tabs button.on { color: var(--accent); }
.rg-item.open .rg-tabs button.on::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); }
.rg-item.open .rg-strip { padding: 12px 14px 4px; }
.rg-item.open .rg-month { padding: 8px 14px 14px; border-radius: 0; background: none; animation: none; }
.rg-item.open .rg-history { padding: 12px 14px 14px; }
.rg-item.open .rg-settings { padding: 0 14px 12px; border: 0; border-radius: 0; }
.rg-item.open .rg-detail > .muted { padding: 12px 14px; margin: 0; }
.rg-group { padding: 14px 0; border-top: 1px solid var(--border); }
.rg-group:first-child { border-top: 0; }
.rg-group h4 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 10px; font-size: 14px; font-weight: 800; }
.rg-group h4 small { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.rg-group .rg-changes { margin-top: 10px; }
.rg-group .rg-foot { justify-content: flex-start; }
/* Abhaken: geplant · heute · anderes Datum – überall gleich */
.bk-box { display: flex; flex-direction: column; gap: 8px; }
.bk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bk-row[hidden], .bk-date[hidden] { display: none; }
.bk { display: inline-flex; align-items: center; gap: 5px; }
.bk-main { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 6px 12px; line-height: 1.25; }
.bk-main small { padding-left: 15px; font-size: 11.5px; font-weight: 600; opacity: 0.8; }
.bk-i { flex: none; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font: italic 700 12.5px Georgia, 'Times New Roman', serif; cursor: help; }
.bk-i:hover { border-color: var(--accent); color: var(--accent); }
.bk-other { align-self: stretch; }
.bk-date { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.bk-date label { width: 100%; font-weight: 600; }
.bk-date input[type="date"] { width: auto; padding: 6px 8px; }
.ipop .bk { flex: 1 1 100%; }
.ipop .bk-main { flex: 1; }
.ipop .bk-other { flex: 1; }
.tipbox { position: fixed; z-index: 70; max-width: min(260px, calc(100vw - 24px)); padding: 8px 11px; border-radius: 10px; background: var(--text); color: var(--surface); font-size: 12.5px; line-height: 1.35; pointer-events: none; box-shadow: 0 6px 18px color-mix(in srgb, var(--text) 30%, transparent); }
@media (max-width: 480px) {
  .rg-item.open[class] { margin: 10px -6px; }
  .bk { flex: 1 1 100%; }
  .bk-main { flex: 1; }
  .bk-other { flex: 1; }
}

/* Stehende Leiste: Personen, Suche und Sprünge – auf allen Seiten gleich */
.page-stick { position: sticky; top: var(--stick-top, 120px); z-index: 12; margin: -4px -4px 12px; padding: 4px 4px 6px; background: var(--bg); }
.page-stick::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 10px; background: linear-gradient(var(--bg), transparent); pointer-events: none; }
.page-stick .toolbar { flex-wrap: nowrap; margin-bottom: 6px; }
.page-stick .rg-search { margin-bottom: 6px; }
.page-stick .period { margin: 0 0 6px; gap: 6px; }
.stick-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 8px; }
.stick-row .rg-search { flex: 1 1 220px; min-width: 0; }
.stick-row .period { flex: 0 1 auto; }
.stick-row .month-pick { width: auto; }
.page-stick .filters { margin-bottom: 6px; }
.jump-bar:empty { display: none; }
.rg-item { scroll-margin-top: calc(var(--stick-bottom, 260px) + 8px); }
.jump-bar { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.jump-bar::-webkit-scrollbar { display: none; }
.jump-bar button { flex: none; padding: 5px 10px; border: 0; border-radius: 99px; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color 0.11s, color 0.11s; }
.jump-bar button:hover { color: var(--text); }
.jump-bar button.on { background: var(--accent-soft); color: var(--accent); }
.searching .kpis, .searching > .muted, .searching > .bud-month { display: none; }
.month-block .month-head .sec-btn { align-self: center; }
.filter-q { position: relative; display: flex; align-items: center; gap: 4px; min-width: 0; }
.filter-q .input { flex: 1; min-width: 0; }
.filter-more { display: none; flex: none; }
/* Startseite: nur die Namen gehen mit – schweben über dem Inhalt */
.hero-top { position: sticky; top: calc(var(--stick-top, var(--head-h, 56px)) + 6px); z-index: 12; max-width: 660px; margin: 0 auto; pointer-events: none; }
.hero-top .who { display: inline-flex; pointer-events: auto; }
.hero-top .seg { background: var(--surface-2); box-shadow: 0 2px 8px color-mix(in srgb, var(--text) 10%, transparent); }
/* Lupe und Filter je Bereich */
.rg-sechead { align-items: center; }
.rg-headr { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.sec-btns { display: inline-flex; gap: 2px; }
.sec-btn { position: relative; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; transition: background-color 0.11s, color 0.11s; }
.sec-btn:hover { background: var(--surface-2); color: var(--text); }
.sec-btn.on { background: var(--accent-soft); color: var(--accent); }
.sec-btn.dot::after { content: ''; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.rg-tool { margin-bottom: 10px; }
.rg-tool .input { width: 100%; padding: 7px 10px; font-size: 14px; }
.rg-filters { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.rg-fgroup { display: flex; flex-direction: column; gap: 3px; }
.rg-fgroup small { color: var(--muted); font-size: 11.5px; }
.rg-fgroup > div { display: flex; flex-wrap: wrap; gap: 4px; }
.rg-fchip { padding: 4px 9px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.rg-fchip i { color: var(--muted); font-style: normal; font-weight: 500; }
.rg-fchip:hover { border-color: var(--accent); }
.rg-fchip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.rg-none { margin: 4px 0; }
.rg-none[hidden] { display: none; }
@media (max-width: 720px) {
  /* wenig Platz: nur die Leiste bleibt stehen */
  body[data-page="regelmaessig"] .pagebar, body[data-page="budgets"] .pagebar, body[data-page="eintraege"] .pagebar, body[data-page="konto"] .pagebar, body[data-page="vorschau"] .pagebar, body[data-page="analyse"] .pagebar { position: static; }
  .page-stick .tb-t { display: none; }
  .page-stick .toolbar { gap: 6px; }
  .page-stick .seg button { padding: 5px 9px; font-size: 13px; }
  .page-stick .toolbar-acts { flex-wrap: nowrap; gap: 2px; }
  .page-stick .toolbar-acts .btn { padding: 6px 8px; }
  .page-stick .filters { grid-template-columns: 1fr 1fr; }
  .page-stick .filter-q { grid-column: span 2; }
  .filter-more { display: grid; }
  .page-stick .filters:not(.open) select { display: none; }
}

/* Kleine Schalter: an oder aus */
.opt-btn { padding: 4px 9px; border: 1px solid var(--border); border-radius: 99px; background: none; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color 0.11s, color 0.11s, border-color 0.11s; }
.opt-btn:hover { color: var(--text); border-color: var(--accent); }
.opt-btn.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
/* Im Schnitt: Pfeile über Mehrmals & jährlich */
.rs-flip { align-self: flex-start; display: inline-flex; align-items: center; gap: 3px; margin: -2px 0 2px -4px; padding: 1px 6px; border: 0; border-radius: 99px; background: none; color: var(--accent); font: inherit; font-size: 11.5px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.rs-flip:hover { background: var(--accent-soft); }
.rs-flip i { font-style: normal; font-size: 13px; }
.rs-more { display: inline-block; margin-top: 10px; }
/* Vorschau */
.fc-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.fc-opts .seg button { padding: 4px 9px; font-size: 13px; }
.fc-hint { font-weight: 600; }
.fc-chart { position: relative; touch-action: pan-y; }
.fc-chart svg { display: block; outline-offset: 2px; }
.fc-grid { stroke: var(--border); stroke-width: 1; }
.fc-zero { stroke: var(--muted); stroke-width: 1; }
.fc-ax { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.fc-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.fc-area { opacity: 0.1; }
.fc-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.fc-dot.low { fill: var(--text); }
.fc-dot.now { fill: var(--text); }
.fc-lbl { fill: var(--text); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.fc-cross { stroke: var(--muted); stroke-width: 1; }
.fc-cross[hidden], .fc-dot[hidden] { display: none; }
.fc-tip { position: absolute; top: 0; z-index: 2; display: flex; flex-direction: column; max-width: 220px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 6px 18px color-mix(in srgb, var(--text) 14%, transparent); font-size: 12.5px; pointer-events: none; }
.fc-tip[hidden] { display: none; }
.fc-tip b { font-size: 15px; font-variant-numeric: tabular-nums; }
.fc-tip small { color: var(--muted); }
.fc-table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.fc-table th, .fc-table td { padding: 7px 8px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--border); }
.fc-table th:first-child { text-align: left; }
.fc-table thead th { color: var(--muted); font-size: 12px; font-weight: 600; }
.fc-table td small { display: block; color: var(--muted); font-size: 11.5px; }
.fc-table .fc-end { font-weight: 700; }
.fc-table tr.short td:last-child { color: var(--neg); font-weight: 700; }
@media (max-width: 720px) { .fc-opts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .fc-opts::-webkit-scrollbar { display: none; } .fc-opts > * { flex: none; } }
/* Vorschau: was eingerechnet ist */
.fc-grp { border-top: 1px solid var(--border); }
.fc-grp:first-of-type { border-top: 0; }
.fc-grp > summary, .fc-grp.plain { display: flex; align-items: center; gap: 10px; padding: 8px 2px; list-style: none; }
.fc-grp > summary { cursor: pointer; }
.fc-grp > summary::-webkit-details-marker { display: none; }
.fc-grp > summary > span:not(.fc-chev), .fc-grp.plain > span { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; }
.fc-grp small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.fc-grp > summary > b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fc-chev { color: var(--muted); transition: transform 0.15s; }
.fc-grp[open] .fc-chev { transform: rotate(180deg); }
.fc-grp .mini-row { padding-left: 34px; }
.fc-ok, .fc-no { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-size: 12px; font-weight: 800; }
.fc-ok { background: color-mix(in srgb, var(--pos) 15%, transparent); color: var(--pos); }
.fc-no { background: var(--surface-2); color: var(--muted); }
.fc-mbtn { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; white-space: nowrap; cursor: pointer; }
.fc-mbtn i { color: var(--muted); font-style: normal; }
.fc-table .fc-more td { padding: 2px 8px 10px; text-align: left; white-space: normal; background: var(--surface-2); }
/* Rausgerechnet: steht da, zählt aber nicht */
.rg-item.is-out:not(.open) .rg-head { opacity: 0.62; }
.rg-item.is-out .rec-amount { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.badge.out { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); font-weight: 700; }
.rg-replace.rg-out { background: var(--accent-soft); color: var(--text); }
.rg-sub.out b { color: var(--accent); }
.rg-out-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rg-out-text, .rg-out-now { margin: 0 0 10px; }
.out-banner > span { flex: 1 1 240px; }
.out-banner small { color: var(--muted); font-weight: 600; }
/* ===== Vorschau im Detail (großes Fenster) ===== */
.fc-head-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.fc-lupe-btn { white-space: nowrap; }
.fc-more-act { margin: 8px 0 2px; }
.fx-back { padding: 12px; grid-template-columns: minmax(0, 1fr); }
.modal-fx, .modal-fx .modal-body, .fx, .fx-bar, .fx-row { min-width: 0; }
.modal.modal-fx { max-width: 1180px; height: calc(100vh - 24px); max-height: none; }
.modal-fx .modal-body { padding: 0 16px 16px; }
.modal-fx .modal-foot { display: none; }
.fx-bar { position: sticky; top: 0; z-index: 3; background: var(--surface); padding: 6px 0 8px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.fx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.fx-row .seg button { padding: 4px 10px; font-size: 13px; }
.fx-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.fx-limit { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.fx-limit select { padding: 3px 6px; font-size: 12.5px; width: auto; }
.fx-nav { display: inline-flex; align-items: center; gap: 2px; }
.fx-nav .icon-btn, .fx-zoom .icon-btn { width: 32px; height: 32px; font-size: 18px; font-weight: 700; }
.fx-nav .icon-btn:disabled, .fx-zoom .icon-btn:disabled { opacity: 0.3; cursor: default; }
.fx-label { min-width: 150px; text-align: center; font-size: 15px; white-space: nowrap; }
.fx-zoom { display: inline-flex; gap: 2px; }
.fx-q { flex: 1 1 200px; min-width: 160px; padding: 6px 10px; font-size: 13.5px; }
.fx-months { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 2px; scrollbar-width: thin; }
.fx-mchip { flex: none; display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.fx-mchip b { font-size: 13px; }
.fx-mchip b small { margin-left: 3px; color: var(--muted); font-size: 10.5px; font-weight: 600; }
.fx-mchip span { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fx-mchip.tight { border-color: color-mix(in srgb, var(--warn-text) 45%, var(--border)); }
.fx-mchip.tight span { color: var(--warn-text); }
.fx-mchip.neg { border-color: color-mix(in srgb, var(--neg) 55%, var(--border)); background: color-mix(in srgb, var(--neg) 7%, var(--surface)); }
.fx-mchip.neg span { color: var(--neg); font-weight: 700; }
.fx-mchip.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.fx-mchip:hover { border-color: var(--accent); }
.fx-out { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 8px; border-radius: 10px; background: var(--accent-soft); font-size: 13.5px; }
.fx-out > span { flex: 1 1 240px; }
.fx-out small { color: var(--muted); }
.fx-tight { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 13px; }
.fx-tight.ok { color: var(--pos); font-weight: 600; }
.fx-tlabel { font-weight: 700; color: var(--warn-text); }
.fx-spot { padding: 3px 9px; border: 1px solid color-mix(in srgb, var(--warn-text) 40%, var(--border)); border-radius: 99px; background: var(--warn-bg); color: var(--warn-text); font: inherit; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.fx-spot.neg { border-color: color-mix(in srgb, var(--neg) 50%, transparent); background: color-mix(in srgb, var(--neg) 12%, var(--surface)); color: var(--neg); }
.fx-hits .fx-spot { border-color: var(--border); background: var(--surface-2); color: var(--text); }
.fx-main { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 16px; align-items: start; }
.fx-chartwrap { min-width: 0; }
.fx-chart { position: relative; touch-action: pan-y; border-radius: 10px; outline-offset: 3px; }
.fx-chart svg { display: block; user-select: none; -webkit-user-select: none; }
.fx-we { fill: color-mix(in srgb, var(--text) 4%, transparent); }
.fx-tz { fill: color-mix(in srgb, var(--warn-text) 10%, transparent); }
.fx-tz.neg { fill: color-mix(in srgb, var(--neg) 11%, transparent); }
.fx-msep { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 3; }
.fx-limit-line { stroke: var(--warn-text); stroke-width: 1.2; stroke-dasharray: 5 4; opacity: 0.8; }
.fx-limit-txt { fill: var(--warn-text); font-size: 10.5px; font-weight: 700; }
.fx-line { stroke-width: 2.4; }
.fx-bin { fill: var(--pos); opacity: 0.75; }
.fx-bout { fill: var(--neg); opacity: 0.75; }
.fx-bbud { fill: var(--muted); opacity: 0.45; }
.fx-hit { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.fc-dot.in { fill: var(--pos); }
.fx-evlbl { fill: var(--text); font-size: 11px; font-weight: 650; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.fx-selline { stroke: var(--accent); stroke-width: 1.5; }
.fx-hover { fill: transparent; cursor: crosshair; }
.fx-tip { pointer-events: none; }
.fx-tip span { font-size: 12.5px; }
.fx-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.fx-legend span { display: inline-flex; align-items: center; gap: 5px; }
.fx-legend i { display: inline-block; width: 14px; height: 8px; border-radius: 2px; }
.fx-legend .lg-line { height: 3px; background: var(--accent); }
.fx-legend .lg-limit { height: 0; border-top: 2px dashed var(--warn-text); }
.fx-legend .lg-in { background: var(--pos); opacity: 0.75; }
.fx-legend .lg-out { background: var(--neg); opacity: 0.75; }
.fx-legend .lg-bud { background: var(--muted); opacity: 0.45; }
.fx-side { position: sticky; top: 150px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); font-size: 13.5px; }
.fx-side h4 { margin: 0 0 8px; font-size: 14.5px; }
.fx-srow { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; font-variant-numeric: tabular-nums; }
.fx-srow.in b { color: var(--pos); }
.fx-srow.end { margin-top: 4px; padding-top: 7px; border-top: 1px solid var(--border); font-size: 15px; }
.fx-srow.end.neg b { color: var(--neg); }
.fx-low, .fx-wk { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; margin-top: 8px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; font-variant-numeric: tabular-nums; }
.fx-low small, .fx-wk small { display: block; color: var(--muted); font-size: 11.5px; }
.fx-low.tight { border-color: color-mix(in srgb, var(--warn-text) 45%, var(--border)); }
.fx-low.tight b { color: var(--warn-text); }
.fx-low.neg { border-color: color-mix(in srgb, var(--neg) 55%, var(--border)); }
.fx-low.neg b { color: var(--neg); }
.fx-low:hover, .fx-wk:hover { border-color: var(--accent); }
.fx-note { margin: 8px 0 0; font-size: 12.5px; font-weight: 600; }
.fx-note.ok { color: var(--pos); }
.fx-note.warn { color: var(--warn-text); }
.fx-help { margin-top: 10px; padding: 9px 10px; border-radius: 9px; background: var(--warn-bg); color: var(--warn-text); font-size: 13px; }
.fx-help p { margin: 4px 0 6px; }
.fx-hits { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 13px; }
.fx-list { margin-top: 16px; padding-top: 6px; border-top: 1px solid var(--border); }
.fx-list .card-head { margin-bottom: 6px; }
.fx-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.fx-week { margin-bottom: 8px; }
.fx-whead, .fx-mrow { display: grid; grid-template-columns: 56px 1fr auto auto 14px; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; margin-top: 6px; border: 0; border-radius: 9px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; font-variant-numeric: tabular-nums; }
.fx-whead:hover, .fx-mrow:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.fx-whead i, .fx-mrow i { color: var(--muted); font-style: normal; }
.fx-whead.tight .fx-lowc, .fx-mrow.tight .fx-lowc { color: var(--warn-text); font-weight: 700; }
.fx-whead.neg .fx-lowc, .fx-mrow.neg .fx-lowc { color: var(--neg); font-weight: 700; }
.fx-wsum .in, .fx-mrow .in, .fx-ev .in { color: var(--pos); }
.fx-mhead, .fx-mrow { grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr 1.1fr 14px; }
.fx-mhead.nb, .fx-mrow.nb { grid-template-columns: 1.3fr 1fr 1fr 1fr 1.1fr 14px; }
.fx-mhead { display: grid; gap: 10px; padding: 0 10px; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.fx-mrow .fx-lowc small { display: block; color: var(--muted); font-size: 11px; font-weight: 500; }
.fx-day { margin: 4px 0 0 0; padding: 6px 10px; border-left: 3px solid transparent; border-radius: 0 9px 9px 0; scroll-margin: 170px 0 40px; }
.fx-day.tight { border-left-color: var(--warn-text); }
.fx-day.neg { border-left-color: var(--neg); background: color-mix(in srgb, var(--neg) 5%, transparent); }
.fx-day.sel { background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); }
.fx-dhead { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.fx-dhead .fx-bal { margin-left: auto; }
.fx-bal { font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-day.tight .fx-bal { color: var(--warn-text); }
.fx-day.neg .fx-bal { color: var(--neg); }
.fx-ev { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 62px; align-items: center; gap: 6px; padding: 3px 0 3px 4px; font-size: 13.5px; }
.fx-ev > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-ev b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-ev b.out { color: var(--text); }
.fx-ev b.in { color: var(--pos); }
.fx-ev.bud { color: var(--muted); font-size: 12.5px; }
.fx-ev.bud b { color: var(--muted); font-weight: 600; }
.fx-ev.none { grid-template-columns: 1fr; padding-left: 30px; font-size: 12.5px; }
.fx-evacts { display: inline-flex; justify-content: flex-end; gap: 2px; }
.fx-evbtn { width: 28px; height: 26px; padding: 0; border: 1px solid transparent; border-radius: 7px; background: none; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; }
.fx-evbtn:hover { border-color: var(--border); background: var(--surface); color: var(--text); }
.fx-covered .fc-grp .mini-row { padding-left: 34px; }
@media (max-width: 860px) {
  .fx-main { grid-template-columns: 1fr; }
  .fx-side { position: static; }
}
@media (max-width: 640px) {
  .fx-back { padding: 0; }
  .modal.modal-fx { height: 100vh; height: 100dvh; border-radius: 0; }
  .modal-fx .modal-body { padding: 0 10px 14px; }
  .fx-bar { position: static; } /* Handy: oben nicht festkleben – sonst bleibt für die Tage kaum Platz */
  .fx-day { scroll-margin: 16px; }
  .fx-opts { margin-left: 0; }
  .fx-label { min-width: 0; flex: 1; font-size: 14px; }
  .fx-nav { flex: 1 1 100%; justify-content: space-between; }
  .fx-whead { grid-template-columns: 48px 1fr auto 12px; }
  .fx-whead .fx-wsum { display: none; }
  .fx-mhead { display: none; }
  .fx-mrow, .fx-mrow.nb { grid-template-columns: 1fr auto auto 12px; }
  .fx-mrow .in, .fx-mrow .out { display: none; }
  .fc-lupe-btn span { display: none; }
}
/* ===== Rückblick Tag für Tag ===== */
.ip-gos { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.ip-more { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.ip-more:hover { text-decoration: underline; }
.modal-db .modal-body { padding-top: 4px; }
.db-hint { padding: 10px 12px; margin: 6px 0 10px; border-radius: 10px; background: var(--accent-soft); font-size: 13.5px; }
.db-bar { position: sticky; top: 0; z-index: 3; background: var(--surface); padding: 6px 0 6px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.db-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.db-row .seg button { padding: 4px 10px; font-size: 13px; }
.db-delta { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 99px; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; vertical-align: 1px; }
.db-delta.up { background: color-mix(in srgb, var(--pos) 13%, transparent); color: var(--pos); }
.db-delta.down { background: color-mix(in srgb, var(--neg) 13%, transparent); color: var(--neg); }
.db-delta.same { background: var(--surface-2); color: var(--muted); }
.db-empty { padding: 20px 0; text-align: center; }
.db-wline { margin: 5px 0 0; font-size: 13px; }
.db-buds { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 16px; margin-top: 8px; }
.db-bud { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 13px; }
.db-bud-n { font-variant-numeric: tabular-nums; color: var(--muted); }
.db-bud-bar { position: relative; grid-column: 1 / -1; height: 7px; border-radius: 99px; background: var(--border); overflow: visible; }
.db-bud-bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--accent); }
.db-bud.over .db-bud-bar > i { background: var(--neg); }
.db-bud-bar em { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--text); opacity: 0.55; border-radius: 1px; }
.db-bud small { grid-column: 1 / -1; color: var(--muted); font-size: 11.5px; }
.db-note { margin: 2px 0 4px; font-size: 12px; color: var(--muted); }
.db-grp { border-top: 1px solid var(--border); }
.db-grp:first-of-type { border-top: 0; }
.db-grp > summary, .db-grp.one { display: flex; align-items: center; gap: 10px; padding: 6px 0; list-style: none; font-size: 13.5px; }
.db-grp > summary { cursor: pointer; }
.db-grp > summary::-webkit-details-marker { display: none; }
.db-grp[open] .fc-chev { transform: rotate(180deg); }
.db-glabel { flex: 0 0 auto; min-width: 150px; max-width: 45%; font-weight: 650; }
.db-glabel small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 500; }
.db-grp > summary .db-glabel { flex: 1; max-width: none; }
.db-grp > summary > b, .db-grp.one > b { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.db-grp b.in, .db-item b.in, .db-cmp td.in { color: var(--pos); }
.db-grp.one .db-item { flex: 1; min-width: 0; padding: 0; }
.db-item { display: flex; align-items: center; gap: 8px; padding: 4px 0 4px 18px; font-size: 13.5px; min-width: 0; }
.db-item > i { flex: none; font-style: normal; }
.db-item > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-item > span small { margin-left: 6px; color: var(--muted); font-size: 11.5px; }
.db-tags { display: inline-flex; gap: 4px; color: var(--muted); font-size: 12px; }
.db-who-s { padding: 0 5px; border-radius: 6px; background: var(--surface-2); }
.db-item > b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.k-budget .db-glabel { color: var(--accent); }
.k-free .db-glabel { color: var(--warn-text); }
.k-late { background: color-mix(in srgb, var(--surface-2) 60%, transparent); border-radius: 8px; padding: 0 6px; }
.db-none { margin: 2px 0; }
.db-due { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 6px 0 0; padding-top: 6px; border-top: 1px dashed var(--border); font-size: 12.5px; color: var(--muted); }
.db-due span.paid { color: var(--pos); }
.db-due span.open { color: var(--warn-text); }
.db-msec { margin-bottom: 16px; }
.db-msec .table-scroll { max-width: 760px; }
.db-msec h4 { margin: 0 0 8px; font-size: 14.5px; }
.db-msec p { margin: 4px 0; font-size: 13.5px; }
.db-line { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.db-line small { display: block; color: var(--muted); font-size: 11.5px; }
.db-line b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.db-table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.db-table th, .db-table td { padding: 7px 8px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
.db-table th:first-child { text-align: left; }
.db-table tr.sum th, .db-table tr.sum td { font-weight: 800; }
.db-table td small, .db-table th small { display: block; color: var(--muted); font-size: 11px; font-weight: 500; }
@media (max-width: 640px) {
  .db-bar { position: static; }
  .db-glabel { min-width: 0; max-width: 40%; }
  .db-item { padding-left: 4px; }
}
/* Rückblick: schlicht auf den ersten Blick, Einzelheiten auf Tipp */
.db-row-top { justify-content: space-between; }
.db-month { margin-left: auto; }
.db-cols { display: flex; justify-content: space-between; padding: 0 44px 4px 12px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.db-days { display: flex; flex-direction: column; gap: 4px; }
.db-wsep { display: flex; align-items: center; justify-content: space-between; margin: 10px 2px 2px; font-size: 12px; font-weight: 700; color: var(--muted); }
.db-wsep:first-child { margin-top: 0; }
.db-wsep .link-btn { font-size: 12px; }
.db-d { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.db-d.today { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.db-d.open { box-shadow: 0 6px 20px color-mix(in srgb, var(--text) 9%, transparent); border-color: var(--accent); }
.db-drow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.db-drow:hover { background: var(--surface-2); }
.db-dname { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.db-dname b { font-size: 15px; }
.db-dname small { flex-basis: 100%; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-dval { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.db-dval b { font-size: 17px; font-weight: 800; }
.db-dval b.neg, .db-dnums b.neg, .db-hero b.neg { color: var(--neg); }
.db-from { color: var(--muted); font-size: 13px; }
.db-chev { flex: none; color: var(--muted); font-style: normal; font-size: 18px; transition: transform 0.15s; }
.db-d.open .db-chev { transform: rotate(90deg); }
.db-ddetail { padding: 4px 14px 12px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); }
.db-ddetail h4 { margin: 10px 0 6px; font-size: 13.5px; }
.db-dnums { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 8px 0 6px; font-variant-numeric: tabular-nums; }
.db-dnums > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: 14px; }
.db-dnums small { flex-basis: 100%; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.db-dnums b { font-size: 17px; font-weight: 800; }
.db-dnums em { color: var(--muted); font-size: 11.5px; font-style: normal; }
.db-mini { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 4px; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; font-variant-numeric: tabular-nums; }
.db-mini:last-child { border-bottom: 0; }
.db-mini > span:first-child { flex: 1; }
.db-mini small { margin-left: 8px; color: var(--muted); font-size: 11.5px; }
.db-mini i { color: var(--muted); font-style: normal; }
.db-mini:hover { background: var(--surface-2); }
.db-hero { padding: 14px 16px; margin-bottom: 14px; border-radius: 14px; background: var(--surface-2); }
.db-hero-nums { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 14px; font-variant-numeric: tabular-nums; }
.db-hero-nums > span { display: flex; flex-direction: column; }
.db-hero-nums small { color: var(--muted); font-size: 12px; font-weight: 600; }
.db-hero-nums b { font-size: 24px; font-weight: 800; }
.db-hero-nums > span:first-child b { font-size: 19px; font-weight: 700; color: var(--muted); }
.db-hero-nums > i { padding-bottom: 4px; color: var(--muted); font-style: normal; font-size: 18px; }
.db-hero-nums .db-delta { margin-bottom: 6px; font-size: 13px; }
.db-hero > p { margin: 2px 0 0; }
.db-spark { margin-top: 10px; }
.db-spark svg { display: block; width: 100%; height: 70px; }
.db-sp-line { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.db-sp-area { fill: var(--accent); opacity: 0.1; }
.db-sp-zero { stroke: var(--neg); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.db-sp-lbl { display: flex; justify-content: space-between; gap: 8px; margin-top: 3px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.db-line.sum { border-bottom: 0; border-top: 2px solid var(--border); font-weight: 800; }
.db-line > span small { font-weight: 500; }
.db-more > summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; }
.db-more > summary::-webkit-details-marker { display: none; }
.db-more > summary h4 { flex: 1; margin: 0; }
.db-more > summary h4 small { color: var(--muted); font-weight: 500; font-size: 12px; margin-left: 6px; }
.db-more[open] > summary { margin-bottom: 8px; }
.db-more[open] .fc-chev { transform: rotate(180deg); }
.db-cmp tbody tr { cursor: pointer; }
.db-cmp tbody tr:hover, .db-cmp tbody tr.on { background: var(--surface-2); }
.db-cmp thead th { color: var(--muted); font-size: 12px; font-weight: 600; }
@media (max-width: 640px) {
  .db-month { margin-left: 0; flex: 1 1 100%; justify-content: space-between; }
  .db-dval b { font-size: 16px; }
  .db-dval .db-delta { display: none; }
  .db-d.open .db-dval .db-delta { display: inline-block; }
  .db-from { display: none; }
  .db-cols { padding-right: 36px; }
  .db-hero-nums b { font-size: 21px; }
}
/* Rückblick: Bühne oben und Auftritt beim Öffnen */
.db-stage { position: relative; overflow: hidden; isolation: isolate; margin: 2px 0 16px; padding: 18px 20px 14px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, #0f766e 0%, #0b5e58 48%, #134e4a 100%); box-shadow: 0 18px 40px -18px rgba(15, 118, 110, 0.75); }
.db-stage.neg { background: linear-gradient(135deg, #b45309 0%, #9a3412 50%, #7c2d12 100%); box-shadow: 0 18px 40px -18px rgba(154, 52, 18, 0.7); }
.db-st-glow { position: absolute; z-index: -1; width: 340px; height: 340px; right: -110px; top: -170px; border-radius: 50%; background: radial-gradient(circle, rgba(94, 234, 212, 0.55), rgba(94, 234, 212, 0) 65%); pointer-events: none; animation: db-drift 9s ease-in-out infinite alternate; will-change: transform; }
.db-st-glow.two { width: 260px; height: 260px; left: -120px; right: auto; top: auto; bottom: -150px; background: radial-gradient(circle, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 65%); animation-duration: 12s; animation-direction: alternate-reverse; }
.db-stage.neg .db-st-glow:not(.two) { background: radial-gradient(circle, rgba(253, 186, 116, 0.55), rgba(253, 186, 116, 0) 65%); }
@keyframes db-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-40px, 30px) scale(1.15); } }
.db-st-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; font-size: 13px; font-weight: 700; opacity: 0.92; }
.db-st-pill { padding: 3px 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.25); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; backdrop-filter: blur(4px); }
.db-st-lbl { display: block; margin-top: 12px; font-size: 12.5px; font-weight: 600; opacity: 0.8; }
.db-st-num { display: block; font-size: 44px; line-height: 1.05; font-weight: 850; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.18); }
.db-st-delta { display: inline-block; margin-top: 6px; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.db-st-delta small { font-weight: 600; font-size: 12px; opacity: 0.8; }
.db-st-chart { position: relative; height: 90px; margin: 12px -4px 0; }
.db-st-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.db-st-line { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25)); }
.db-st-zero { stroke: rgba(255, 255, 255, 0.55); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.db-st-dot { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.28); }
.db-st-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.6); animation: db-ping 2.2s ease-out infinite; }
@keyframes db-ping { from { transform: scale(0.6); opacity: 1; } to { transform: scale(2.1); opacity: 0; } }
.db-st-axis { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; font-weight: 600; opacity: 0.7; }
.db-st-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.db-st-tile { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.16); font-variant-numeric: tabular-nums; }
.db-st-tile small { font-size: 11.5px; font-weight: 600; opacity: 0.8; }
.db-st-tile b { font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-st-tile b.in { color: #bbf7d0; }
/* Auftritt (nur beim Öffnen, Personen- oder Monatswechsel) */
.modal-db { animation: db-pop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.15) both; }
.fx-back:has(.modal-db) { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
@keyframes db-pop { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
.db-intro .db-stage { animation: db-rise 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.db-intro .db-st-chart { animation: db-draw 1.15s cubic-bezier(0.45, 0, 0.2, 1) 0.15s both; }
.db-intro .db-st-dot { animation: db-dot 0.4s cubic-bezier(0.3, 1.6, 0.5, 1) 1.15s both; }
.db-intro .db-st-tile { animation: db-rise 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) both; animation-delay: calc(0.35s + var(--i) * 0.08s); }
.db-intro .db-d, .db-intro .db-wsep { animation: db-rise 0.4s cubic-bezier(0.2, 0.8, 0.3, 1) both; animation-delay: calc(0.45s + var(--i) * 0.035s); }
@keyframes db-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes db-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes db-dot { from { opacity: 0; transform: scale(0); } }
html.no-motion .modal-db, html.no-motion .db-st-glow, html.no-motion .db-st-dot::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .modal-db, .db-st-glow, .db-st-dot::after, .db-intro * { animation: none !important; } }
@media (max-width: 640px) {
  .db-stage { padding: 16px 16px 12px; border-radius: 18px; }
  .db-st-num { font-size: 36px; }
  .db-st-tile { padding: 7px 8px; }
  .db-st-tile b { font-size: 14px; }
}
/* Vorschau: Bühne oben und Auftritt beim Öffnen (Farben und Formen wie beim Rückblick) */
.fc-stage.card { border: 0; padding: 18px 20px 14px; }
.fc-st-say { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.16); font-size: 13.5px; }
.fc-st-say b { font-size: 15px; }
.fc-st-say p { margin: 3px 0 0; opacity: 0.92; }
.fc-st-say .fc-hint { font-weight: 700; opacity: 1; }
.fc-st-btn { margin-top: 8px; padding: 5px 12px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 99px; background: rgba(255, 255, 255, 0.16); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.fc-st-btn:hover { background: rgba(255, 255, 255, 0.26); }
.fc-stage .db-st-tile b small { font-size: 11px; font-weight: 600; opacity: 0.8; }
.fc-stage .db-st-tile b.neg { color: #fed7aa; }
.fc-st-foot { margin: 10px 0 0; font-size: 12.5px; opacity: 0.85; }
.fc-st-foot .link-btn { color: #fff; text-decoration: underline; font-weight: 700; }
.fc-intro .fc-stage { animation: db-rise 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.fc-intro .fc-stage .db-st-tile { animation: db-rise 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) both; animation-delay: calc(0.35s + var(--i) * 0.08s); }
.fc-intro .fc-st-say { animation: db-rise 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) 0.25s both; }
.fc-intro .fc-chart svg { animation: db-draw 1.2s cubic-bezier(0.45, 0, 0.2, 1) 0.3s both; }
.fc-intro > section.card:not(.fc-stage) { animation: db-rise 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) both; animation-delay: 0.18s; }
.fc-intro > section.card:nth-of-type(3) { animation-delay: 0.3s; }
.fc-intro > section.card:nth-of-type(4) { animation-delay: 0.4s; }
.fc-intro > section.card:nth-of-type(n + 5) { animation-delay: 0.5s; }
@media (prefers-reduced-motion: reduce) { .fc-intro * { animation: none !important; } }
/* Kurzer Auftritt (gleich wieder da, Person/Monat/Zeitraum gewechselt): nur Name, Zahl und Verlauf */
@keyframes q-swap { from { opacity: 0; transform: translateY(-7px); filter: blur(3px); } }
@media (prefers-reduced-motion: reduce) { .db-quick *, .fc-quick * { animation: none !important; } }
/* "Schon im Kontostand?" */
.bb-opts { display: grid; gap: 8px; margin: 10px 0; }
.bb-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.bb-opt:hover { border-color: var(--accent); background: var(--accent-soft); }
.bb-opt b { font-size: 14.5px; }
.bb-opt small { color: var(--muted); font-size: 12.5px; }
.bb-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.bb-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.bb-row:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.bb-row > span { flex: 1; }
.bb-row small { display: block; color: var(--muted); font-size: 12px; }
.bb-row > b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bb-row > b.in { color: var(--pos); }
/* Startseite: großer Auftritt (nach längerer Pause) */
.ef-intro, .ef-quick { overflow-x: clip; } /* Lichtwelle darf nicht seitlich überstehen */
.ef-intro .hero-top { animation: q-swap 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.ef-intro .hero-sky::before { animation: ef-glow 1.8s ease-out both; }
.ef-intro .hero-sky::after { content: ""; position: absolute; left: 50%; top: 46%; z-index: -1; width: 140px; height: 140px; margin: -70px 0 0 -70px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 38%, transparent), color-mix(in srgb, var(--pos) 12%, transparent) 45%, transparent 70%); animation: ef-halo 1.7s cubic-bezier(0.2, 0.7, 0.3, 1) 0.1s both; }
.ef-intro .free-now > small:first-child { animation: db-rise 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) 0.05s both; }
.ef-intro .free-now b { animation: ef-num 1.2s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.ef-intro .free-now .free-day, .ef-intro .free-now .pend-tag { animation: db-rise 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) 0.6s both; }
.ef-intro .sum-pill { animation: ef-pop 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) 0.7s both; }
.ef-intro .sky-budgets { animation: db-rise 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) 0.75s both; }
.ef-intro .bell-slot { animation: db-rise 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) 0.85s both; }
.ef-intro .entry-form { animation: db-rise 0.6s cubic-bezier(0.2, 0.8, 0.3, 1) 0.35s both; }
.ef-intro .cat-tiles > * { animation: ef-pop 0.42s cubic-bezier(0.3, 1.5, 0.5, 1) both; animation-delay: calc(0.65s + var(--k, 12) * 0.035s); }
.ef-intro .cat-tiles > :nth-child(1) { --k: 0; }
.ef-intro .cat-tiles > :nth-child(2) { --k: 1; }
.ef-intro .cat-tiles > :nth-child(3) { --k: 2; }
.ef-intro .cat-tiles > :nth-child(4) { --k: 3; }
.ef-intro .cat-tiles > :nth-child(5) { --k: 4; }
.ef-intro .cat-tiles > :nth-child(6) { --k: 5; }
.ef-intro .cat-tiles > :nth-child(7) { --k: 6; }
.ef-intro .cat-tiles > :nth-child(8) { --k: 7; }
.ef-intro .cat-tiles > :nth-child(9) { --k: 8; }
.ef-intro .cat-tiles > :nth-child(10) { --k: 9; }
.ef-intro .cat-tiles > :nth-child(11) { --k: 10; }
.ef-intro .cat-tiles > :nth-child(12) { --k: 11; }
@keyframes ef-num { 0% { opacity: 0; transform: scale(0.8); filter: blur(10px); } 35% { opacity: 1; filter: blur(0); } 72% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes ef-halo { from { transform: scale(0.25); opacity: 1; } to { transform: scale(5.5); opacity: 0; } }
@keyframes ef-glow { from { opacity: 0; } 40% { opacity: 1; } }
@keyframes ef-pop { from { opacity: 0; transform: scale(0.6); } }
/* Startseite: kurzer Wechsel (Person gewechselt, gleich wieder zurück) */
@media (prefers-reduced-motion: reduce) { .ef-intro *, .ef-quick *, .ef-intro .hero-sky::after, .ef-quick .hero-sky::after { animation: none !important; } }
/* Startseite – kurzer Wechsel: Klapptafel (geänderte Ziffern klappen von rechts nacheinander um),
   darunter blitzt eine feine Linie auf; der Rest blendet nur weich */
.ef-quick .sum-pill, .ef-quick .sky-budgets, .ef-quick .free-now .free-day { animation: q-fade 0.18s ease-out 0.03s both; }
@keyframes q-fade { from { opacity: 0.25; transform: translateY(3px); } }
/* Rückblick und Vorschau – kurzer Wechsel: Name, Zahl (vom zuletzt gezeigten Wert zum neuen) und Verlauf */
.db-quick .db-st-top > span:first-child, .db-quick .db-st-lbl, .fc-quick .db-st-top > span:first-child, .fc-quick .db-st-lbl { animation: q-swap 0.34s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.db-quick .db-st-num, .fc-quick .db-st-num { animation: q-num 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; transform-origin: left center; }
.db-quick .db-st-delta, .fc-quick .db-st-delta { animation: q-swap 0.34s cubic-bezier(0.2, 0.8, 0.3, 1) 0.08s both; }
.db-quick .db-st-tile b, .fc-quick .db-st-tile b { animation: q-swap 0.32s cubic-bezier(0.2, 0.8, 0.3, 1) both; animation-delay: calc(0.1s + var(--i) * 0.05s); }
.db-quick .db-st-chart { animation: q-wipe 0.6s cubic-bezier(0.45, 0, 0.2, 1) both; }
.db-quick .db-st-dot { animation: db-dot 0.3s cubic-bezier(0.3, 1.6, 0.5, 1) 0.5s both; }
.fc-quick .fc-chart svg { animation: q-wipe 0.6s cubic-bezier(0.45, 0, 0.2, 1) both; }
@keyframes q-num { 0% { opacity: 0.35; transform: scale(0.94); filter: blur(3px); } 60% { opacity: 1; filter: blur(0); } }
@keyframes q-wipe { from { clip-path: inset(0 100% 0 0); opacity: 0.4; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
.ef-quick .free-now b { position: relative; }
.free-now b .flip { display: inline-block; }
.free-now b .flip.on { animation: ef-flip 0.24s cubic-bezier(0.2, 0.75, 0.3, 1) both; animation-delay: var(--d); transform-origin: 50% 55%; backface-visibility: hidden; }
.free-now b .flip.last { animation: ef-flip-last 0.32s cubic-bezier(0.2, 0.8, 0.3, 1) both; animation-delay: var(--d); transform-origin: 50% 62%; }
.ef-quick .free-now b::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 2px; height: 3px; border-radius: 99px; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: ef-line 0.3s ease-out 0.03s both; pointer-events: none; }
@keyframes ef-flip { 0% { transform: perspective(420px) rotateX(-90deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: perspective(420px) rotateX(0); } }
@keyframes ef-flip-last { 0% { transform: perspective(420px) rotateX(-90deg); opacity: 0; } 40% { transform: perspective(420px) rotateX(0) scale(1.16); opacity: 1; color: var(--accent); text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 65%, transparent); } 100% { transform: perspective(420px) rotateX(0) scale(1); } }
@keyframes ef-line { from { transform: scaleX(0); opacity: 0.9; } 55% { transform: scaleX(1); opacity: 0.9; } to { transform: scaleX(1); opacity: 0; } }
/* Optionen › Darstellung: Auftritt je Bereich */
.look-h { margin: 16px 0 8px; font-size: 14px; }
.look-rows { display: flex; flex-direction: column; gap: 8px; }
.look-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.look-row > span { font-weight: 600; min-width: 100px; }
.look-row .seg button { padding: 5px 11px; font-size: 13px; }
/* Startseite – Personenwechsel: "Wischen" (alte Zahl raus, neue von der anderen Seite rein, Lichtstrahl in der Farbe der Person) */
.free-now { position: relative; }
.ef-swap { overflow-x: clip; }
.swap-ghost { position: absolute; left: 0; right: 0; text-align: center; white-space: nowrap; pointer-events: none; animation: sw-out 0.2s cubic-bezier(0.5, 0, 0.9, 0.6) both; }
.swap-ghost.pos { color: var(--pos); }
.swap-ghost.neg { color: var(--neg); }
.ef-swap .free-now b { animation: sw-in 0.26s cubic-bezier(0.15, 0.85, 0.25, 1) 0.04s both; }
.ef-swap .free-now > small:first-child { animation: sw-tint 0.4s ease-out both; }
.ef-swap .sum-pill, .ef-swap .sky-budgets, .ef-swap .free-now .free-day { animation: q-fade 0.18s ease-out 0.08s both; }
.ef-swap .hero-sky::after { content: ""; position: absolute; top: 28%; bottom: 28%; left: 25%; width: 50%; z-index: -1; border-radius: 99px; pointer-events: none; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--swap-color) 24%, transparent), transparent); filter: blur(12px); animation: sw-beam 0.34s cubic-bezier(0.3, 0.6, 0.3, 1) both; }
@keyframes sw-out { to { opacity: 0; transform: translateX(calc(var(--swap-dir) * -22px)) skewX(calc(var(--swap-dir) * 4deg)); filter: blur(1.5px); } }
@keyframes sw-in { from { opacity: 0; transform: translateX(calc(var(--swap-dir) * 22px)) skewX(calc(var(--swap-dir) * -4deg)); filter: blur(1.5px); } 55% { opacity: 1; filter: blur(0); } }
@keyframes sw-tint { from { color: color-mix(in srgb, var(--swap-color) 70%, var(--muted)); } }
@keyframes sw-beam { from { transform: translateX(calc(var(--swap-dir) * 90%)) scaleX(0.6); opacity: 0; } 35% { opacity: 1; } to { transform: translateX(calc(var(--swap-dir) * -90%)) scaleX(1.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ef-swap *, .ef-swap .hero-sky::after, .swap-ghost { animation: none !important; } .swap-ghost { display: none; } }
/* ===== Startseite: alles mittig – letzte Einträge als Seitenleiste am Rand (wie bei ChatGPT, Gemini) ===== */
.ent-layout { position: relative; }
.ent-main { min-width: 0; }
.hero-top > [data-slot="persons"] { grid-column: 2; display: flex; justify-content: center; }
/* Knopf: ein ruhiges Symbol – bei geschlossener Leiste oben links */
.drawer-btn { grid-column: 1; justify-self: start; pointer-events: auto; display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 11px; background: transparent; color: var(--muted); cursor: pointer; transition: color 0.15s, background-color 0.15s; }
.drawer-btn:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.drawer-btn span { display: none; }
.drawer-btn.ping, .drawer-fab.ping { animation: drawer-ping 0.5s cubic-bezier(0.3, 1.5, 0.5, 1); }
.drawer-fab { display: none; position: fixed; z-index: 14; left: 12px; top: calc(var(--head-h, 56px) + 10px); place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 11px; background: transparent; color: var(--muted); cursor: pointer; transition: color 0.15s, background-color 0.15s, opacity 0.2s; }
.drawer-fab:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
@keyframes drawer-ping { 40% { transform: scale(1.15); color: var(--accent); background: var(--accent-soft); } }
/* Inhalt der Leiste */
.ent-drawer-in { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 12px 10px 8px; background: var(--surface); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 0 8px; }
.drawer-head h3 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.drawer-x { width: 36px; height: 36px; border-radius: 10px; color: var(--muted); }
.drawer-x:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.drawer-search { margin: 0 2px; }
.drawer-search .input { padding: 9px 12px 9px 36px; border-radius: 12px; background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px 50%; border-color: transparent; font-size: 14px; }
.drawer-search .input:focus { background-color: var(--surface); border-color: var(--accent); }
.drawer-who { margin: 0 2px; }
.drawer-who .seg { display: flex; width: 100%; }
.drawer-who .seg button { flex: 1; }
.drawer-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 0 4px 6px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 18%, transparent) transparent; }
.drawer-sec { padding: 14px 10px 4px; color: var(--muted); font-size: 12px; font-weight: 700; }
.drawer-sec:first-child { padding-top: 4px; }
.drawer-list .entry-row { gap: 10px; padding: 7px 8px; border-top: 0; border-radius: 10px; }
.drawer-list .entry-row:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.drawer-list .entry-row .cat-ico { width: 30px; height: 30px; font-size: 15px; border-radius: 9px; }
.drawer-list .entry-row .entry-main b { font-size: 14px; font-weight: 650; }
.drawer-list .entry-row .entry-main small { font-size: 11.5px; }
.drawer-list .entry-amount { font-size: 13.5px; }
.drawer-list .list-foot { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.drawer-list .list-foot .btn { justify-content: flex-start; font-size: 13.5px; }
/* In der schmalen Leiste: nur ✎ – Verschieben und Vormerken gibt es im Eintrag (Antippen) und auf „Einträge“ */
.drawer-list .entry-row > .icon-btn:not([data-edit]):not(.pend-btn) { display: none; }
/* Verlauf: ⏳ vormerken klein neben dem Stift (beim Darüberfahren), "✓ Abgebucht" immer sichtbar */
.drawer-list .entry-row > .pend-btn { width: 26px; height: 26px; font-size: 13px; opacity: 0; }
.drawer-list .entry-row:hover > .pend-btn, .drawer-list .entry-row:focus-within > .pend-btn { opacity: 0.55; }
.drawer-list .entry-row > .pend-btn:hover { opacity: 1; }
@media (hover: none) { .drawer-list .entry-row > .pend-btn { opacity: 0.45; } }
.drawer-list .entry-row > .booked-btn { padding: 3px 8px; font-size: 12px; }
.drawer-list .entry-row > [data-edit] { width: 26px; height: 26px; opacity: 0; transition: opacity 0.12s; }
.drawer-list .entry-row:hover > [data-edit], .drawer-list .entry-row:focus-within > [data-edit] { opacity: 1; }
@media (hover: none) { .drawer-list .entry-row > [data-edit] { display: none; } }
.ent-scrim { display: none; }
/* PC: die Leiste liegt am linken Rand, volle Höhe – die Bühne steht mittig in der restlichen Fläche */
@media (min-width: 1100px) {
  main:has(> #page-erfassen:not([hidden])) { max-width: none; transition: padding-left 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
  main:has(> #page-erfassen.drawer-open:not([hidden])) { padding-left: calc(var(--drawer-w) + 16px); }
  :root { --drawer-w: 340px; }
  .ent-drawer { position: fixed; z-index: 15; left: 0; top: var(--head-h, 56px); bottom: 0; width: var(--drawer-w); transform: translateX(-100%); visibility: hidden; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.3s; }
  .entry-page.drawer-open .ent-drawer { transform: none; visibility: visible; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s; }
  .ent-drawer-in { border-right: 1px solid var(--border); }
  /* Leiste zu: das Symbol sitzt oben links in der Ecke (am Fenster, nicht in der Seite); offen: in der Leiste */
  .hero-top .drawer-btn { display: none; }
  body:has(#page-erfassen:not([hidden])) .drawer-fab { display: inline-grid; }
  body:has(#page-erfassen.drawer-open:not([hidden])) .drawer-fab { opacity: 0; pointer-events: none; }
  /* Beim Seitenwechsel nicht schieben – die Leiste hängt am Rand */
  .entry-page.drawer-open.enter-fwd, .entry-page.drawer-open.enter-back { animation-name: fade; }
  /* keine große Lücke: die Bühne beginnt mit etwas Luft, das Formular folgt direkt */
  .hero-sky { min-height: 0; padding-top: clamp(10px, 5vh, 56px); }
}
/* Handy und Tablet: fährt von links über den Inhalt, dahinter wird es dunkler */
@media (max-width: 1099.98px) {
  .ent-drawer { position: fixed; z-index: 75; top: 0; bottom: 0; left: 0; width: min(86vw, 340px); transform: translateX(-104%); visibility: hidden; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.3s; }
  .entry-page.drawer-open .ent-drawer { transform: none; visibility: visible; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s; }
  .ent-drawer-in { padding-top: calc(12px + env(safe-area-inset-top)); padding-bottom: calc(8px + env(safe-area-inset-bottom)); box-shadow: 10px 0 40px rgba(0, 0, 0, 0.16); }
  .ent-scrim { display: block; position: fixed; inset: 0; z-index: 74; background: rgba(10, 14, 20, 0.36); opacity: 0; pointer-events: none; transition: opacity 0.25s; }
  .entry-page.drawer-open .ent-scrim { opacity: 1; pointer-events: auto; }
}
/* Die Infos über der Eingabe: oben eine Reihe Plaketten, mittig die Zahl, darunter Monat und Budgets */
.hero-sky { gap: 4px; padding: 12px 0 24px; }
.sky-chips { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; min-height: 30px; margin-bottom: 4px; }
.sky-chips:has(.sum-pill[hidden]):has(.bell-slot:empty) { display: none; }
.sky-chips .bell-slot:not(:empty) { margin: 0; }
.sky-chips .sum-pill { margin: 0; padding: 5px 13px 5px 10px; font-size: 13px; }
.free-now { padding: 6px 28px 10px; }
.free-now > small:first-child { font-size: 11.5px; font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase; }
.free-now b { margin: 2px 0 6px; }
.free-now .free-day { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.free-now .free-day small { font-size: 13px; }
.free-track { display: block; width: 132px; height: 4px; border-radius: 99px; background: color-mix(in srgb, var(--text) 9%, transparent); overflow: hidden; }
.free-track > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, transparent), var(--accent)); }
.sky-budgets { gap: 8px; margin-top: 10px; padding: 0; }
.sky-budgets:hover { background: none; }
.sky-budgets .sb { padding: 6px 12px 9px; border-radius: 99px; background: color-mix(in srgb, var(--surface-2) 80%, transparent); border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); transition: border-color 0.15s, transform 0.15s; }
.sky-budgets:hover .sb { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.sky-budgets .sb-bar { left: 12px; right: 12px; bottom: 3px; }
.sky-budgets .sb.more { background: none; border-color: transparent; }
@media (max-width: 720px) {
  .hero-sky { gap: 2px; padding: 6px 0 14px; }
  .sky-chips { min-height: 0; margin-bottom: 2px; }
  .free-now { padding: 4px 16px 6px; }
  .free-now b { margin: 0 0 4px; }
  .free-track { width: 110px; }
  .sky-budgets { margin-top: 6px; gap: 6px; }
  .sky-budgets .sb { padding: 4px 10px 7px; }
}
/* Oberer Bereich mit mehr Luft: jedes Element steht für sich (PC und Tablet) */
@media (min-width: 721px) {
  .hero-top { margin-bottom: 6px; }
  .hero-sky { gap: 0; padding-bottom: 40px; }
  .sky-chips { margin-bottom: 22px; }
  .free-now > small:first-child { margin-bottom: 4px; }
  .free-now b { margin: 4px 0 14px; }
  .free-now .free-day { gap: 9px; }
  .free-now .pend-tag { margin-top: 12px; }
  .sky-budgets { margin-top: 26px; gap: 12px; }
}
@media (min-width: 1100px) {
  .hero-sky { padding-top: clamp(20px, 6vh, 64px); }
}
/* Handy: etwas mehr Luft, aber die Eingabe bleibt im Bild */
@media (max-width: 720px) {
  .sky-chips { margin-bottom: 8px; }
  .free-now b { margin: 2px 0 8px; }
  .free-now .pend-tag { margin-top: 6px; }
  .sky-budgets { margin-top: 12px; }
  .hero-sky { padding-bottom: 18px; }
}
/* Griff am rechten Rand der Leiste (PC): ziehen = breiter/schmaler */
.drawer-grip { display: none; }
@media (min-width: 1100px) {
  .drawer-grip { display: block; position: absolute; z-index: 2; top: 0; bottom: 0; right: -5px; width: 10px; cursor: col-resize; touch-action: none; }
  .drawer-grip::after { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; border-radius: 2px; background: var(--accent); opacity: 0; transition: opacity 0.15s; }
  .drawer-grip:hover::after, .drawer-grip:focus-visible::after, html.drawer-dragging .drawer-grip::after { opacity: 0.7; }
  .drawer-grip:focus-visible { outline: none; }
  html.drawer-dragging, html.drawer-dragging * { cursor: col-resize !important; user-select: none !important; }
  html.drawer-dragging main, html.drawer-dragging .ent-drawer { transition: none !important; }
}
/* Rückblick: "Bleibt übrig" je Tag, Woche und Monat */
.db-cols { display: grid; grid-template-columns: minmax(0, 1fr) 170px 150px 18px; gap: 12px; padding: 0 12px 4px; }
.db-cols .db-cv, .db-cols .db-cl { text-align: right; }
.db-vals { display: grid; grid-template-columns: 170px 150px; gap: 12px; align-items: baseline; }
.db-vals .db-dval { justify-content: flex-end; }
.db-lval { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.db-lval small { display: none; color: var(--muted); font-size: 11px; font-weight: 600; }
.db-lval b { font-size: 14.5px; font-weight: 750; color: var(--muted); }
.db-lval b.neg { color: var(--neg); }
.db-lval.none b { font-weight: 500; opacity: 0.6; }
.db-mini-l { margin-left: 8px; color: var(--muted); font-size: 12px; font-style: normal; font-variant-numeric: tabular-nums; }
.db-st-leftline { display: block; margin-top: 6px; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; opacity: 0.95; }
.db-st-leftline small { font-weight: 500; opacity: 0.8; }
.db-st-left { fill: none; stroke: rgba(255, 255, 255, 0.75); stroke-width: 2; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.db-st-legend { display: inline-flex; align-items: center; gap: 6px; }
.db-st-legend i { display: inline-block; width: 16px; height: 0; border-top: 2px solid #fff; }
.db-st-legend i.lg-left { border-top-style: dashed; opacity: 0.8; margin-left: 6px; }
.db-st-tiles { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.db-story { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.db-ddetail .db-story { margin: 10px 0 4px; background: var(--surface); }
.db-story h4 { margin: 0 0 8px; font-size: 14.5px; }
.db-story-nums { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 12px; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.db-story-nums > span { display: flex; flex-direction: column; }
.db-story-nums small { color: var(--muted); font-size: 11.5px; font-weight: 600; }
.db-story-nums b { font-size: 19px; font-weight: 800; }
.db-story-nums b.neg { color: var(--neg); }
.db-story-nums > span:first-child b { color: var(--muted); font-weight: 700; font-size: 16px; }
.db-story-nums > i { padding-bottom: 3px; color: var(--muted); font-style: normal; }
.db-story-nums .db-delta { margin-bottom: 4px; }
.db-story .db-line b:not(.in) { color: var(--text); }
.db-lspark { margin: 2px 0 8px; }
.db-lspark svg { height: 56px; }
@media (max-width: 640px) {
  .db-cols { grid-template-columns: minmax(0, 1fr) auto 14px; padding-right: 12px; }
  .db-cols .db-cl { display: none; }
  .db-cols .db-cv::after { content: " · übrig"; }
  .db-vals { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
  .db-lval small { display: inline; }
  .db-lval b { font-size: 12.5px; }
  .db-lval .db-delta { display: none; }
  .db-d.open .db-lval .db-delta { display: inline-block; }
  .db-mini-l { display: none; }
}
/* Zeitraum-Filter (Verlauf-Leiste, Einträge) */
.period-bar { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 1px 4px; }
.period-bar::-webkit-scrollbar { display: none; }
.period-bar .opt-btn { flex: none; }
.period-days { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 0 9px 0 4px; border: 1px solid var(--border); border-radius: 99px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.period-days.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.period-days input { width: 44px; height: 26px; padding: 2px 4px; border: 0; background: transparent; text-align: center; font-size: 13px; font-weight: 700; color: inherit; -moz-appearance: textfield; }
.period-days input::-webkit-outer-spin-button, .period-days input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.period-days input:focus { outline: none; }
.drawer-period { margin: 0 2px; }
.drawer-period .period-bar { flex-wrap: wrap; overflow: visible; }
.page-stick .period-bar { margin: 0 0 6px; }
/* Mehrere Beträge: je Zahl gefunden / nichts gefunden */
.amt-sum { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; }
.amt-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.amt-chip.ok { background: color-mix(in srgb, var(--pos) 12%, transparent); color: var(--pos); }
.amt-chip.miss { background: var(--warn-bg); color: var(--warn-text); }
.amt-chip b { font-weight: 800; }
.amt-note { margin: 0 2px 6px; }
.amt-sec { padding: 10px 8px 2px; color: var(--muted); font-size: 12px; font-weight: 700; }
.amt-sec:first-child { padding-top: 2px; }
.amt-card .card-head { align-items: center; }

/* ---------- Analyse: lernen aus dem eigenen Umgang (js/pages/analysis.js + js/core/learn.js) ---------- */
#an-plan, #an-lern, #an-check, #an-muster, #an-arten, #an-details { scroll-margin-top: 120px; }
.an-intro > summary { cursor: pointer; list-style: none; }
.an-intro > summary::-webkit-details-marker { display: none; }
.an-intro > summary h3::after { content: ' ▾'; color: var(--muted); font-size: 0.8em; }
.an-intro:not([open]) > summary h3::after { content: ' ▸'; }
.an-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 12px; }
.an-side { border-radius: 12px; padding: 10px 12px; background: var(--surface-2); }
.an-side.plan { background: var(--accent-soft); }
.an-side p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; }
.an-bridge { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 9px 12px; border: 1px dashed var(--border); border-radius: 10px; font-size: 13.5px; }
.an-why { margin: 12px 0 4px; }
.an-reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.an-reasons li { display: flex; gap: 8px; font-size: 13.5px; line-height: 1.45; }
.an-reasons li > span:first-child { flex: none; width: 1.4em; text-align: center; }
.an-plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 8px; }
.an-pnum { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.an-pnum b { font-size: 18px; font-variant-numeric: tabular-nums; }
.an-pnum.main { background: var(--accent-soft); }
.an-pnum.main b { font-size: 24px; }
.mat-list { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
.mat-row { display: grid; grid-template-columns: 1fr 180px auto; gap: 10px; align-items: center; }
.mat-row > span:first-child { display: flex; flex-direction: column; font-size: 14px; }
.mat-row small { font-size: 12px; line-height: 1.35; }
.mat-bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.mat-bar i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.mat-row .num { white-space: nowrap; color: var(--muted); }
.pc-story { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 9px 12px; border-radius: 10px; background: var(--surface-2); font-size: 14px; }
.pc-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0 8px; }
.pc-tiles > div { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 10px; background: var(--surface-2); }
.pc-tiles b { font-size: 20px; }
.pc-tiles small { color: var(--muted); font-size: 11.5px; text-align: center; }
.pc-budget { display: grid; grid-template-columns: 1fr minmax(90px, 30%); gap: 12px; align-items: center; padding: 6px 0; border-top: 1px solid var(--border); }
.pc-budget:first-of-type { border-top: 0; }
.pc-budget > span:first-child { display: flex; flex-direction: column; font-size: 14px; }
.pc-budget small { font-size: 12px; }
.pc-bbar { position: relative; height: 10px; border-radius: 99px; background: var(--surface-2); }
.pc-bbar i { display: block; height: 100%; border-radius: 99px; }
.pc-bbar em { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--text); opacity: 0.55; border-radius: 1px; }
.hb-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 6px 0 10px; }
.hb-week > div { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; }
.hb-col { display: flex; align-items: flex-end; width: 100%; max-width: 38px; height: 70px; border-radius: 8px; background: var(--surface-2); overflow: hidden; }
.hb-col i { display: block; width: 100%; background: var(--accent-soft-strong); border-radius: 8px 8px 0 0; }
.hb-week .top .hb-col i { background: var(--accent); }
.hb-week small { color: var(--muted); font-size: 11px; white-space: nowrap; }
.kind-strip { display: flex; height: 10px; border-radius: 99px; overflow: hidden; margin: 2px 0 12px; gap: 2px; }
.kind-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kind-box { border: 1px solid var(--border); border-left: 4px solid var(--kc); border-radius: 12px; padding: 10px 12px; }
.kind-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.kind-head .num { display: flex; flex-direction: column; align-items: flex-end; }
.kind-head .num small { color: var(--muted); font-size: 11.5px; }
.kind-box p { margin: 6px 0 0; line-height: 1.45; }
.an-sec { margin: 22px 2px 10px; font-size: 17px; }
.an-sec small { font-weight: 500; font-size: 12.5px; }
@media (max-width: 640px) {
  .an-two, .kind-grid { grid-template-columns: 1fr; }
  .pc-tiles { grid-template-columns: repeat(2, 1fr); }
  .mat-row { grid-template-columns: 1fr auto; }
  .mat-row .mat-bar { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- 📸 Stand als Bild (js/ui/share-image.js) ---------- */
.snap-btn { grid-column: 3; justify-self: end; pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px; border: 0; border-radius: 11px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: color 0.15s, background-color 0.15s; }
.snap-btn:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
@media (max-width: 640px) { .snap-btn span { display: none; } .snap-btn { width: 38px; padding: 0; justify-content: center; } }
.modal.snap-modal { width: min(920px, calc(100vw - 24px)); max-width: none; }
.snap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.snap-prev { display: grid; place-items: center; min-height: 240px; padding: 10px; border-radius: 14px; background: var(--surface-2); }
.snap-prev img { display: block; width: 100%; max-height: 62vh; object-fit: contain; border-radius: 10px; box-shadow: 0 6px 20px rgba(16, 24, 40, 0.14); }
.snap-prev img:not([src]) { display: none; }
.snap-opts { display: flex; flex-direction: column; gap: 12px; }
.snap-who { display: flex; flex-direction: column; gap: 6px; }
.snap-who .seg { align-self: flex-start; }
.snap-checks { display: flex; flex-direction: column; gap: 4px; }
.snap-opt { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; font-size: 14.5px; }
.snap-opt:hover { background: var(--surface-2); }
.snap-opt input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.snap-opt > span { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.snap-days { width: 64px; padding: 4px 8px; text-align: center; }
@media (max-width: 720px) { .snap { grid-template-columns: 1fr; } .snap-prev img { max-height: 46vh; } }
.snap-opt { position: relative; }
.snap-opt > span { flex: 1; min-width: 0; }
.snap-val { flex: none; margin-left: auto; font-style: normal; font-weight: 700; font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.snap-opt:has(input[data-opt]:checked) .snap-val { color: var(--text); }
.snap-val.neg, .snap-opt:has(input[data-opt]:checked) .snap-val.neg { color: var(--neg); }

/* ✨ Was ist neu (js/core/whatsnew.js) */
.news-ver + .news-ver { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.news-ver h4 { margin: 0 0 6px; }
.news-ver ul { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 6px; line-height: 1.45; }