/* ============ Farben ============ */
:root {
  color-scheme: light;
  --bg: #f2f4f7;
  --surface: #ffffff;
  --surface-2: #f2f4f7;
  --border: rgba(16, 24, 40, .08);
  --border-strong: rgba(16, 24, 40, .17);
  --text: #101828;
  --text-2: #475467;
  --muted: #667085;
  --grid: #eaecf0;
  --accent: #2463d6;
  --accent-soft: rgba(36, 99, 214, .09);
  --ein: #1a9e6e;
  --aus: #e0602e;
  --ein-text: #0b7a50;
  --aus-text: #b3401a;
  --mark: rgba(250, 178, 25, .35);
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 10px 28px -18px rgba(16, 24, 40, .18);
  --radius: 14px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0c0e12; --surface: #161a20; --surface-2: #1f242c;
    --border: rgba(255, 255, 255, .08); --border-strong: rgba(255, 255, 255, .17);
    --text: #f2f4f7; --text-2: #c0c6d0; --muted: #8b93a1; --grid: #262c35;
    --accent: #5b93f0; --accent-soft: rgba(91, 147, 240, .16);
    --ein: #22b07d; --aus: #ec7442; --ein-text: #3ccf97; --aus-text: #f08a5d;
    --mark: rgba(250, 178, 25, .30);
    --shadow: 0 1px 2px rgba(0, 0, 0, .35);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c0e12; --surface: #161a20; --surface-2: #1f242c;
  --border: rgba(255, 255, 255, .08); --border-strong: rgba(255, 255, 255, .17);
  --text: #f2f4f7; --text-2: #c0c6d0; --muted: #8b93a1; --grid: #262c35;
  --accent: #5b93f0; --accent-soft: rgba(91, 147, 240, .16);
  --ein: #22b07d; --aus: #ec7442; --ein-text: #3ccf97; --aus-text: #f08a5d;
  --mark: rgba(250, 178, 25, .30);
  --shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* ============ Grundlagen ============ */
* { 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); font-variant-numeric: tabular-nums; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1 { font-size: 22px; margin: 0 0 8px; }
h2 { font-size: 15px; font-weight: 600; margin: 0; }
.muted { color: var(--muted); }
[hidden] { display: none !important; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
main { max-width: 1640px; margin: 0 auto; padding: 16px 16px 40px; }

/* ============ Kopfzeile ============ */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top));
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 17px; }
.stand { flex: 1; color: var(--muted); font-size: 13px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--text-2); }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn.sm { width: 30px; height: 30px; }
.icon-btn.sm svg { width: 17px; height: 17px; }
.icon-btn.dreht svg { animation: dreh 1s linear infinite; }
.icon-btn.hinweis { color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-soft); }
@keyframes dreh { to { transform: rotate(360deg); } }

/* ============ Knöpfe ============ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 16px; border-radius: 10px;
  border: 1px solid var(--border-strong); background: var(--surface); font-weight: 550; }
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.07); }
.btn.danger { color: var(--aus-text); }
.btn.sm { min-height: 30px; padding: 0 11px; font-size: 13px; border-radius: 8px; }
.link { border: 0; background: none; color: var(--accent); padding: 4px 2px; font-size: 14px; }
.link:hover { text-decoration: underline; }

/* ============ Start ============ */
.start { display: grid; place-items: center; min-height: 70vh; }
.start-card { max-width: 440px; padding: 28px; display: grid; gap: 12px; }
.start-card p { margin: 0 0 6px; }
.fehler { color: var(--aus-text); margin: 0; }
.start-hilfe { font-size: 13.5px; color: var(--text-2); border-top: 1px solid var(--border); padding-top: 10px; }
.start-hilfe summary { cursor: pointer; color: var(--accent); }
.start-hilfe p { margin: 8px 0 0; }
.balken { display: flex; align-items: center; gap: 14px; justify-content: space-between; margin-bottom: 12px; padding: 12px 16px; border-radius: var(--radius);
  background: var(--accent-soft); border: 1px solid var(--accent); }
.balken .klein { color: var(--text-2); margin-top: 2px; }
@media (max-width: 640px) { .balken { flex-direction: column; align-items: stretch; } }

/* ============ Suche ============ */
.suche { position: relative; }
.suche input { width: 100%; height: 52px; padding: 0 52px 0 46px; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--surface);
  font-size: 17px; box-shadow: var(--shadow); outline: none; }
.suche input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.suche input::-webkit-search-cancel-button { cursor: pointer; }
.lupe { position: absolute; left: 15px; top: 15px; width: 22px; height: 22px; color: var(--muted); pointer-events: none; }
.hilfe { position: absolute; right: 10px; top: 11px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-2); font-weight: 650; }
.suche:has(input:not(:placeholder-shown)) .hilfe { right: 40px; }
.vorschlaege { position: absolute; z-index: 15; left: 0; right: 0; top: 56px; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 12px; box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .3); max-height: 360px; overflow: auto; }
.vorschlaege li { display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.vorschlaege li[aria-selected="true"], .vorschlaege li:hover { background: var(--accent-soft); }
.vorschlaege .typ { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); width: 74px; flex: none; }
.vorschlaege .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vorschlaege .info { color: var(--muted); font-size: 13px; white-space: nowrap; }

/* ============ Filter ============ */
.filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.filter select { height: 36px; padding: 0 30px 0 11px; border-radius: 10px; border: 1px solid var(--border-strong); background-color: var(--surface); max-width: 220px; }
.filter select.aktiv { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 600; }
.filter select option { background: var(--surface); color: var(--text); font-weight: 400; }
.jahre { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.jahre button { flex: 1 1 0; min-width: 44px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); border-radius: 7px; padding: 3px 4px; font-size: 12.5px; line-height: 1.3; }
.jahre button:hover { border-color: var(--accent); color: var(--accent); }
.jahre button.an { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.seg { display: inline-flex; padding: 3px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--border); }
.seg button { border: 0; background: none; padding: 5px 12px; border-radius: 8px; font-size: 14px; color: var(--text-2); }
.seg button.an { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); font-weight: 550; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 99px; background: var(--accent-soft); color: var(--text); font-size: 13px; border: 0; }
.chip b { font-weight: 600; }
.chip .x { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--text-2); }
.chip:hover .x { background: rgba(0, 0, 0, .08); color: var(--text); }

/* ============ Kennzahlen ============ */

.pos { color: var(--ein-text); }
.neg { color: var(--aus-text); }

/* ============ Karten, Grafiken ============ */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.card-h { display: flex; align-items: center; gap: 10px; padding: 12px 12px 0 16px; min-height: 42px; }
.card-h .hint { flex: 1; font-size: 12.5px; color: var(--muted); text-align: right; }
.chart { position: relative; height: 290px; padding: 8px 12px 12px; }
.tabelle-card { margin-top: 12px; }
.tabelle-card .card-h { padding-bottom: 8px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tabs { display: flex; gap: 2px; flex: 1; }
.tabs button { border: 0; background: none; padding: 7px 12px; border-radius: 9px; color: var(--text-2); font-weight: 550; }
.tabs button:hover { background: var(--surface-2); }
.tabs button[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }
.tabs .n { font-weight: 400; color: var(--muted); font-size: 13px; margin-left: 4px; }
.dl { display: flex; gap: 6px; }

/* ============ Tabellen ============ */
.tab-scroll { overflow: hidden; }
table.t.fix { table-layout: fixed; }
.t.fix th, .t.fix td { overflow: hidden; text-overflow: ellipsis; }
.t.fix .wer { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t.fix .erste { white-space: nowrap; }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
.t th { text-align: left; font-weight: 600; font-size: 12.5px; color: var(--muted); padding: 9px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--surface); position: sticky; top: 0; }
.t th.sort { cursor: pointer; user-select: none; }
.t th.sort:hover { color: var(--text); }
.t th .pfeil { color: var(--accent); }
.t td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.t tr.klick { cursor: pointer; }
.t tbody tr:hover td { background: var(--surface-2); }
.t .r { text-align: right; white-space: nowrap; }
.t .datum { white-space: nowrap; color: var(--text-2); width: 92px; }
.t .wer { font-weight: 550; }
.t .zweck { color: var(--muted); font-size: 13px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-word; }
.t .kat { color: var(--text-2); font-size: 13px; white-space: nowrap; }
.t .kat small { color: var(--muted); display: block; }
.t .konto { color: var(--text-2); font-size: 13px; white-space: nowrap; }
.t .betrag { font-weight: 600; }
.t tr.offen .zweck { -webkit-line-clamp: unset; }
.t tr.detail td { background: var(--surface-2); font-size: 13px; color: var(--text-2); padding: 10px 12px 12px; }
.t tr.detail dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; margin: 0 0 8px; }
.t tr.detail dt { color: var(--muted); }
.t tr.detail dd { margin: 0; word-break: break-word; }
.t tfoot td { font-weight: 650; border-top: 1px solid var(--border-strong); border-bottom: 0; }
.t .erste { position: sticky; left: 0; background: var(--surface); font-weight: 550; white-space: nowrap; }
.t tbody tr:hover .erste { background: var(--surface-2); }
.t .klein { font-size: 13px; }
.t .ok { color: var(--ein-text); }
mark { background: var(--mark); color: inherit; border-radius: 3px; padding: 0 1px; }
.fix-seg { width: fit-content; flex-wrap: wrap; }
.t tr.gruppe td { background: var(--surface-2); font-weight: 650; border-top: 1px solid var(--border-strong); }
.t tr.gruppe td .muted { font-weight: 400; }
.t tbody tr.gruppe:hover td { background: var(--surface-2); }
.fixtab .zweck + .zweck { margin-top: 1px; }
.fix-bezug-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--muted); }
.fix-bezug { width: fit-content; flex-wrap: wrap; }
.fix-bezug small { color: var(--muted); font-size: 12px; margin-left: 2px; }
.fix-bezug .an small { color: inherit; opacity: .85; }
.eingang { padding: 16px 16px 8px; border-top: 1px solid var(--border-strong); margin-top: 8px; }
.eingang h3 { margin: 0 0 4px; font-size: 15.5px; font-weight: 650; }
.eingang h3 small { font-weight: 400; font-size: 12.5px; margin-left: 6px; }
.eingang p { margin: 0 0 10px; max-width: 980px; }
.eingang-t .ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eingang-t tr.eingang-fehler td { background: rgba(224, 96, 46, .06); }
/* bis 900 px nur Datei, gelesen, neu – sonst schrumpft die Spalte „Datei“ auf null (feste Tabellenbreiten) */
@media (max-width: 900px) { .eingang-t .sp-m { display: none; } .eingang-t th.r { width: 72px !important; } }
.fix-grafik-t { font-size: 13px; font-weight: 600; color: var(--text-2); }
.monate { margin-top: 6px; }
.fix-fuss { padding: 0 18px 14px; margin: 0; }
.st-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.st-label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; margin-right: 6px; }
.st-label input { height: 34px; padding: 0 8px; border-radius: 9px; border: 1px solid var(--accent); background: var(--surface); font-weight: 600; }
.st-hinweis { padding: 10px 16px 14px; }
.st-zeile .btn.an { background: var(--accent); border-color: var(--accent); color: #fff; }
.t tr.beendet td { opacity: .55; }
.t th.vj, .t td.vj { border-left: 1px solid var(--border-strong); }
.mehr { display: flex; justify-content: center; gap: 12px; align-items: center; padding: 14px; color: var(--muted); font-size: 13px; }
.leer { padding: 36px 16px; text-align: center; color: var(--muted); }
.fuss { font-size: 12.5px; text-align: center; margin-top: 18px; }

/* ============ Dialoge, Hinweise ============ */
.dlg { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); padding: 22px; width: min(560px, calc(100vw - 32px)); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .4); }
.dlg::backdrop { background: rgba(0, 0, 0, .35); }
.dlg h2 { margin: 16px 0 6px; }
.dlg h2:first-child { margin-top: 0; font-size: 18px; }
.dlg p { margin: 0 0 10px; }
.dlg form { margin-top: 18px; text-align: right; }
.hilfe-tab { width: 100%; border-collapse: collapse; font-size: 14px; margin: 6px 0 12px; }
.hilfe-tab td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.hilfe-tab td:first-child { white-space: nowrap; }
code { font-family: ui-monospace, Consolas, monospace; font-size: 13px; background: var(--surface-2); padding: 2px 6px; border-radius: 5px; }
.beispiele { display: flex; flex-wrap: wrap; gap: 6px; }
.beispiele button { border: 1px solid var(--border-strong); background: var(--surface); border-radius: 99px; padding: 4px 12px; font-size: 13px; }
.beispiele button:hover { border-color: var(--accent); color: var(--accent); }
.menu-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.toast { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50; background: var(--text); color: var(--bg);
  padding: 10px 16px; border-radius: 10px; font-size: 14px; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); max-width: calc(100vw - 32px); }

/* ============ Steuer ============ */
.st-kopf { display: grid; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.st-jahre { display: flex; flex-wrap: wrap; gap: 4px; }
.st-jahre button { border: 1px solid var(--border-strong); background: var(--surface); border-radius: 7px; padding: 4px 12px; font-size: 13.5px; color: var(--text-2); }
.st-jahre button.an { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.st-aktionen { display: flex; flex-wrap: wrap; gap: 6px; }
.st-filter { flex-wrap: wrap; width: fit-content; }
.st-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; padding: 14px 16px; }
.st-karte { display: grid; gap: 2px; text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: 10px 12px; }
.st-karte:hover { border-color: var(--accent); }
.st-karte .l { font-size: 12.5px; color: var(--muted); }
.st-karte b { font-size: 19px; font-weight: 650; }
.st-liste { padding: 0 12px 10px; }
.st-abschnitt { border-top: 1px solid var(--border-strong); }
.st-abschnitt-kopf { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; text-align: left; padding: 12px 6px; font-size: 15.5px; font-weight: 650; }
.st-abschnitt-kopf .name { flex: 1; min-width: 0; }
.st-abschnitt-kopf small { font-weight: 400; font-size: 12.5px; }
.st-abschnitt-kopf .pfeil { width: 16px; height: 16px; color: var(--muted); transition: transform .15s; flex: none; }
.st-abschnitt.offen .pfeil { transform: rotate(90deg); }
.st-info { color: var(--text-2); background: var(--accent-soft); border-radius: 8px; padding: 8px 12px; margin: 0 6px 8px; }
.st-posten { margin: 4px 0 10px 12px; }
.st-posten-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 6px; border-bottom: 1px solid var(--border); }
.st-posten-kopf .betrag, .st-abschnitt-kopf .betrag { margin-left: auto; font-weight: 650; white-space: nowrap; }
.st-zeile { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 12px; padding: 8px 6px; border-bottom: 1px solid var(--border); align-items: start; }
.st-zeile.aus { opacity: .5; }
.st-datum { color: var(--text-2); font-size: 13px; padding-top: 2px; }
.st-text .titel { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-text .unter { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-hinweis, .st-notiz { font-size: 12.5px; margin-top: 3px; }
.st-pruef-t { color: var(--aus-text); }
.st-rechts { display: grid; justify-items: end; gap: 4px; }
.st-rechts .betrag { font-weight: 600; white-space: nowrap; }
.st-badge { font-size: 11.5px; padding: 1px 8px; border-radius: 99px; white-space: nowrap; }
.st-ok { background: rgba(26, 158, 110, .14); color: var(--ein-text); }
.st-vor { background: var(--accent-soft); color: var(--accent); }
.st-buhl { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border-strong); }
.st-rueck { display: flex; align-items: center; gap: 14px; }
.st-rueck .link { color: inherit; font-weight: 700; text-decoration: underline; }
.st-pruef { background: rgba(224, 96, 46, .14); color: var(--aus-text); }
.st-aus { background: var(--surface-2); color: var(--muted); }
.st-anzahl { display: inline-block; font-size: 12.5px; font-weight: 650; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 99px; padding: 0 8px; }
.st-gruppe .st-text .titel { font-weight: 650; }
.st-gruppe-einzeln { margin-left: 22px; border-left: 2px solid var(--border-strong); }
.st-knoepfe { display: flex; gap: 2px; align-items: center; }
.st-knoepfe select { max-width: 190px; height: 28px; border-radius: 7px; border: 1px solid var(--border-strong); background: var(--surface); font-size: 12.5px; }
.st-rat { font-size: 13px; margin: 6px 0 2px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); color: var(--text-2); display: grid; gap: 4px; white-space: normal; }
.st-rat.pruef { background: rgba(224, 96, 46, .08); border-left: 3px solid var(--aus); border-radius: 0 8px 8px 0; }
.st-rat b { color: var(--text); font-weight: 600; }
.st-rat-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.st-posten-info { color: var(--text-2); }
.st-text[data-sdetail] { cursor: pointer; }
.st-text[data-sdetail]:hover .titel { color: var(--accent); }
.st-detail { grid-column: 1 / -1; background: var(--surface-2); border-radius: 10px; padding: 10px 14px; margin-top: 2px; }
.st-felder { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 16px; margin: 0 0 6px; font-size: 13px; }
.st-felder dt { color: var(--muted); }
.st-felder dd { margin: 0; word-break: break-word; }
.st-verlauf { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
.st-vtab { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 4px 0; table-layout: fixed; }
.st-vtab td { padding: 3px 6px; border-bottom: 1px solid var(--border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-vtab td:nth-child(1) { width: 82px; } .st-vtab td:nth-child(2) { width: 90px; } .st-vtab td:nth-child(4) { width: 34%; }
.st-dlg { width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 40px); padding: 0; display: flex; flex-direction: column; }
.st-dlg[open] { display: flex; }
.st-dlg-kopf { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.st-dlg-kopf .klein { flex: 1; }
.st-dlg-haupt { padding: 14px 18px; overflow-y: auto; }
.st-dlg-betrag { display: flex; align-items: center; gap: 10px; }
.st-dlg-betrag .betrag { font-size: 26px; font-weight: 650; }
.st-dlg-titel { font-size: 17px; font-weight: 600; margin-top: 4px; }
.st-dlg-zweck { color: var(--text-2); margin: 2px 0 12px; word-break: break-word; }
.st-dlg-fuss { display: grid; gap: 10px; padding: 12px 18px 16px; border-top: 1px solid var(--border); background: var(--surface-2); }
.st-dlg-fuss select { height: 34px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); margin-left: 8px; max-width: 100%; }
.st-dlg-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.st-zuordnen { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; }
.st-zuordnen select { max-width: 260px; height: 28px; border-radius: 7px; border: 1px solid var(--border-strong); background: var(--surface); }
@media (max-width: 640px) {
  .st-zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .st-datum { grid-column: 1 / -1; padding: 0; }
  .st-knoepfe select { max-width: 130px; }
}

/* ============ Chat ============ */
.chat-knopf { position: fixed; right: 20px; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 30; display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: 99px; border: 0; background: var(--accent); color: #fff; font-weight: 600; box-shadow: 0 10px 28px -8px rgba(42, 120, 214, .6); }
.chat-knopf svg { width: 20px; height: 20px; }
.chat-knopf:hover { filter: brightness(1.07); }
body.chat-offen .chat-knopf { display: none; }
.chat { position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; width: min(460px, 100vw); display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--border-strong); box-shadow: -12px 0 40px -20px rgba(0, 0, 0, .35); }
@media (min-width: 1200px) { body.chat-offen main, body.chat-offen .top { margin-right: 460px; } body.chat-offen main { max-width: none; } }
.chat-kopf { display: flex; align-items: center; gap: 4px; padding: 10px 10px 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); border-bottom: 1px solid var(--border); }
.chat-kopf b { flex: 1; }
.chat-haupt { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-liste { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.chat-leer p { color: var(--text-2); margin: 4px 0 12px; }
.chat-leer .beispiele { flex-direction: column; align-items: flex-start; }
.chat-leer .beispiele button { text-align: left; border-radius: 12px; padding: 7px 12px; }
.msg { max-width: 100%; font-size: 14.5px; }
.msg.user { align-self: flex-end; max-width: 85%; background: var(--accent); color: #fff; padding: 9px 13px; border-radius: 14px 14px 4px 14px; }
.msg.ai { align-self: stretch; }
.msg .md > :first-child { margin-top: 0; }
.msg .md > :last-child { margin-bottom: 0; }
.msg .md p { margin: 0 0 8px; }
.msg .md h1, .msg .md h2, .msg .md h3 { font-size: 15px; margin: 12px 0 6px; }
.msg .md ul, .msg .md ol { margin: 0 0 8px; padding-left: 20px; }
.msg .md table { border-collapse: collapse; width: 100%; font-size: 12.5px; margin: 6px 0 10px; }
.msg .md th, .msg .md td { border-bottom: 1px solid var(--border); padding: 4px 6px; text-align: left; word-break: break-word; }
.msg .md th { color: var(--muted); font-weight: 600; }
.msg .md code { font-size: 12.5px; }
/* Statuszeilen der Werkzeuge im Chat (.werkzeug, künftig .chat-status); die Filterkarte heißt nur #werkzeug */
.werkzeug, .chat-status { font-size: 12px; color: var(--muted); margin: 2px 0 6px; }
.chat-aktion { margin: 4px 6px 4px 0; }
.chat-chart { border: 1px solid var(--border); border-radius: 12px; padding: 10px; margin: 6px 0 10px; }
.chat-chart-t { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.chat-chart-c { position: relative; height: 220px; }
.msg .fehler { color: var(--aus-text); font-size: 14px; }
.denkt { display: inline-flex; gap: 5px; padding: 8px 2px; }
.denkt span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: puls 1.2s infinite ease-in-out; }
.denkt span:nth-child(2) { animation-delay: .15s; }
.denkt span:nth-child(3) { animation-delay: .3s; }
@keyframes puls { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
.chat-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; padding-bottom: max(10px, env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
.chat-form textarea { flex: 1; resize: none; min-height: 42px; max-height: 160px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--bg); font: inherit; outline: none; }
.chat-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.chat-form .btn { min-height: 42px; padding: 0 14px; }
.chat-setup { padding: 16px; overflow-y: auto; display: grid; gap: 10px; align-content: start; }
.chat-setup h2 { font-size: 17px; }
.chat-setup p { margin: 0; font-size: 14px; }
.chat-setup a { color: var(--accent); }
.feld { display: grid; gap: 4px; font-size: 13px; color: var(--text-2); }
.feld input, .feld select { height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--bg); }

/* ============ Schmale Bildschirme ============ */

@media (max-width: 640px) {
  main { padding: 12px 12px 32px; }
  .stand { font-size: 12px; }
  .card-h .hint { visibility: hidden; }
  .filter select { flex: 1 1 calc(50% - 8px); max-width: none; }
  .chart { height: 240px; }
  .t .sp-m { display: none; }
  .t .datum { width: auto; font-size: 13px; }
  .tabs { flex: 1 1 100%; flex-wrap: wrap; }
  .tabs button { padding: 6px 8px; font-size: 14px; }
  .tabs .n { display: none; }
  .chat-knopf span { display: none; }
  .chat-knopf { padding: 14px; }
}
@media print {
  .top, .suche, .filter, .dl, .icon-btn, .mehr, .chat-knopf, .chat { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; }
}

/* ======================================================================
   Neugestaltung (Oktober 2026): Navigation oben, Filterkarte, Zeitraum-Menü
   ====================================================================== */
main { max-width: 1600px; padding: 18px 20px 48px; }
.top { gap: 14px; padding: 8px 20px; padding-top: max(8px, env(safe-area-inset-top)); background: color-mix(in srgb, var(--surface) 88%, transparent); }
.brand { flex: none; }
.stand { flex: 0 1 auto; max-width: 300px; }

/* Hauptnavigation */
.nav { display: flex; gap: 2px; margin: 0 auto; padding: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 13px; }
.nav button { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; padding: 7px 14px; border-radius: 9px; color: var(--text-2); font-weight: 560; font-size: 14px; white-space: nowrap; transition: background .12s, color .12s; }
.nav button svg { width: 18px; height: 18px; flex: none; }
.nav button:hover { color: var(--text); background: color-mix(in srgb, var(--surface) 65%, transparent); }
.nav button[aria-selected="true"] { background: var(--surface); color: var(--accent); box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 3px 10px -5px rgba(16, 24, 40, .18); }
.nav .n { font-size: 11.5px; font-weight: 650; color: var(--muted); background: var(--surface); border-radius: 99px; padding: 0 7px; line-height: 18px; }
.nav button[aria-selected="true"] .n { background: var(--accent-soft); color: var(--accent); }

/* Filterkarte */
#werkzeug { display: grid; gap: 10px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
#werkzeug .suche input { height: 46px; font-size: 16px; box-shadow: none; background: var(--surface-2); border-color: transparent; }
#werkzeug .suche input:hover { border-color: var(--border-strong); }
#werkzeug .suche input:focus { background: var(--surface); border-color: var(--accent); }
#werkzeug .lupe { top: 12px; }
#werkzeug .hilfe { top: 8px; }
#werkzeug .vorschlaege { top: 50px; }
.filter { margin-top: 0; gap: 8px; }
.filter select { height: 36px; }
.luecke { flex: 1; }
.chips { margin-top: 0; }

.auswahl { position: relative; }
.auswahl-knopf { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 11px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); font-weight: 600; }
.auswahl-knopf:hover { border-color: var(--accent); }
.auswahl-knopf svg { width: 17px; height: 17px; color: var(--muted); flex: none; }
.auswahl-knopf .pfeil-unten { width: 15px; height: 15px; transition: transform .15s; }
.auswahl-knopf[aria-expanded="true"] .pfeil-unten { transform: rotate(180deg); }
.auswahl-knopf.aktiv { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
.auswahl-knopf.aktiv svg { color: var(--accent); }
.auswahl-liste { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 250px; padding: 6px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 18px 44px -14px rgba(16, 24, 40, .32); }
.auswahl-alle { display: flex; justify-content: space-between; align-items: baseline; width: 100%; border: 0; background: none; padding: 8px 10px; border-radius: 8px; font-weight: 650; text-align: left; }
.auswahl-alle small { color: var(--muted); font-weight: 400; font-size: 12px; }
.auswahl-alle:hover, .auswahl-alle.an { background: var(--accent-soft); color: var(--accent); }
.auswahl-jahre { max-height: 330px; overflow: auto; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); }
.auswahl-zeile { display: flex; align-items: center; gap: 10px; padding: 2px 10px; border-radius: 8px; }
.auswahl-zeile:hover { background: var(--surface-2); }
.auswahl-zeile input { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); cursor: pointer; flex: none; }
.auswahl-zeile button { flex: 1; border: 0; background: none; padding: 6px 0; text-align: left; font-weight: 560; }
.auswahl-zeile button:hover { color: var(--accent); }
.auswahl-zeile small { color: var(--muted); font-size: 12px; }
.auswahl-fuss { margin-top: 4px; padding: 8px 10px 4px; border-top: 1px solid var(--border); font-size: 12px; line-height: 1.5; color: var(--muted); }

.schalter { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 0 4px; font-size: 14px; color: var(--text-2); cursor: pointer; user-select: none; }
.schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schalter .spur { position: relative; width: 34px; height: 20px; flex: none; border-radius: 99px; background: var(--border-strong); transition: background .15s; }
.schalter .spur::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.schalter input:checked + .spur { background: var(--accent); }
.schalter input:checked + .spur::after { transform: translateX(14px); }
.schalter input:focus-visible + .spur { outline: 2px solid var(--accent); outline-offset: 2px; }
.schalter.an { color: var(--text); font-weight: 560; }
.schalter .info { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--border-strong); font-size: 11px; font-weight: 700; color: var(--muted); }

.jahre.monate { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 0; }
.jahre.monate button { flex: 1 1 0; min-width: 40px; padding: 5px 4px; border-radius: 8px; border: 1px solid transparent; background: var(--surface-2); color: var(--text-2); font-size: 13px; }
.jahre.monate button:first-child { flex: 1.7 1 0; }
.jahre.monate button:hover { border-color: var(--accent); background: var(--surface); color: var(--accent); }
.jahre.monate button.an { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

/* Kennzahlen */

/* Karten */

.card-h { padding: 14px 14px 0 18px; min-height: 46px; }
.card-h h2 { font-size: 15px; font-weight: 650; }
.chart { height: 300px; padding: 10px 14px 14px; }
.tabelle-card { margin-top: 14px; }
.tabelle-card .card-h { padding: 14px 14px 12px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tabelle-card .card-h h2 { font-size: 16.5px; }
.tabelle-card .card-h .hint { text-align: left; }

/* Konten */

.stichtag { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.stichtag label { font-weight: 650; }
.stichtag input { height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); font-weight: 560; }
.stichtag input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.stichtag .seg { flex-wrap: wrap; }
.kg { display: grid; gap: 8px; align-content: start; min-width: 0; }
.kg-c { position: relative; height: 220px; min-width: 0; overflow: hidden; }
.kg-ring { position: relative; height: 220px; }
.eingang { margin-top: 0; padding: 12px 18px 12px; border-top: 1px solid var(--border-strong); }
.eingang summary { cursor: pointer; font-size: 14.5px; padding: 2px 0; }
.eingang[open] summary { margin-bottom: 8px; }

@media (max-width: 1180px) {
  .nav button { padding: 7px 10px; }
  .stand { display: none; }
}
@media (max-width: 960px) {
  .luecke { display: none; }
}
/* Handy und schmale Fenster: Navigation als Leiste unten */
@media (max-width: 900px) {
  .nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; margin: 0; justify-content: space-around; gap: 0; padding: 4px 4px max(4px, env(safe-area-inset-bottom));
    border: 0; border-top: 1px solid var(--border); border-radius: 0; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px); }
  .nav button { flex: 1; flex-direction: column; gap: 2px; padding: 6px 2px; font-size: 11px; }
  .nav button svg { width: 21px; height: 21px; }
  .nav button[aria-selected="true"] { box-shadow: none; background: var(--accent-soft); }
  .nav .n { display: none; }
  .top { justify-content: space-between; }
  main { padding-bottom: 96px; }
  .chat-knopf { bottom: calc(78px + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
  main { padding: 12px 12px 96px; }
  #werkzeug { padding: 10px; }
  .filter select, .auswahl { flex: 1 1 calc(50% - 8px); max-width: none; }
  .auswahl-knopf { width: 100%; }
  .auswahl-knopf span { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .jahre.monate button { min-width: calc(16.66% - 4px); flex: 0 0 calc(16.66% - 4px); }
  .jahre.monate button:first-child { flex: 1 1 100%; }
  .chart { height: 250px; }
}

.kg-vert-inhalt { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; align-items: center; }
.kg-vert-inhalt .kg-ring { height: 170px; }
.kg-leg { display: grid; min-width: 0; }
.kg-leg-z { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; border-bottom: 1px solid var(--border); background: none; padding: 5px 4px; text-align: left; font-size: 13px; }
.kg-leg-z:last-child { border-bottom: 0; }
.kg-leg-z:not([disabled]):hover { background: var(--surface-2); }
.kg-leg-z[disabled] { cursor: default; color: var(--text-2); }
.kg-leg-z .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kg-leg-z .betrag { font-weight: 600; white-space: nowrap; }
.kg-leg-z .anteil { width: 38px; text-align: right; color: var(--muted); font-size: 12px; }
/* Jahresknöpfe im Steuerbereich im Stil der übrigen Umschalter */
.st-jahre { display: inline-flex; flex-wrap: wrap; gap: 2px; width: fit-content; padding: 3px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--border); }
.st-jahre button { border: 0; background: none; padding: 5px 12px; border-radius: 8px; font-size: 14px; color: var(--text-2); }
.st-jahre button:hover { color: var(--text); }
.st-jahre button.an { background: var(--surface); color: var(--accent); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); font-weight: 600; }
@media (max-width: 640px) { .kg-vert-inhalt { grid-template-columns: 1fr; } .kg-vert-inhalt .kg-ring { height: 190px; } }
/* Handy: Kopfzeile ohne Weichzeichner, sonst hängt die untere Navigationsleiste an der Kopfzeile statt am Bildschirmrand */
@media (max-width: 900px) {
  .top { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); }
}
@media (max-width: 640px) {
  .filter select, .auswahl { min-width: 0; }
  .filter .seg { flex: 1 1 100%; }
  .filter .seg button { flex: 1; }
}

/* Knopf „Daten einlesen“ */
.einlesen-knopf { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.einlesen-knopf:hover { border-color: var(--accent); color: var(--accent); }
.einlesen-knopf svg { width: 17px; height: 17px; }
.einlesen-knopf.dreht svg { animation: dreh 1s linear infinite; }
.einlesen-knopf[disabled] { cursor: progress; color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.einlesen-knopf.hinweis { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.dlg-knoepfe { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.hilfe-tab .r { text-align: right; white-space: nowrap; }
/* Dateilisten im Einlesen-Dialog: lange Dateinamen brechen um (kein seitliches Scrollen am Handy) */
.datei-tab td:first-child { white-space: normal; overflow-wrap: anywhere; }
.nachpruefung { margin: 4px 0 12px; color: var(--muted); }
.nachpruefung summary { cursor: pointer; }
.nachpruefung ul { margin: 6px 0; padding-left: 18px; color: var(--text-2); }
@media (max-width: 640px) { .einlesen-knopf span { display: none; } .einlesen-knopf { padding: 0 9px; } }

/* Durchschnitt und Quoten */

.schnitt { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; padding: 10px 6px 14px; }
.sw { font-size: 22px; font-weight: 650; letter-spacing: -.01em; margin: 2px 0 1px; white-space: nowrap; }
.sv { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.55; }
/* Wohin das Geld geht */
.wohin { padding: 14px 18px 12px; }
.wohin p { margin: 8px 0 0; }
/* Kategorien: Anteil und Durchschnitt */

@media (max-width: 1280px) { .schnitt { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; } }
@media (max-width: 640px) { .schnitt { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sw { font-size: 19px; } }

@media (max-width: 900px) { .nav button { font-size: 10.5px; padding: 6px 1px; } .nav button svg { width: 20px; height: 20px; } }
@media (max-width: 380px) { .nav button span:not(.n) { font-size: 9.5px; } }

/* ============ Fixkosten: Überblick, Kalender, Rechner ============ */
.pp-sparen { display: grid; gap: 6px; padding: 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); font-size: 13.5px; }
.pp-sparen label { font-weight: 600; }
.pp-sparen-z { display: grid; grid-template-columns: minmax(120px, 1fr) auto; gap: 12px; align-items: center; }
.pp-sparen-z input { width: 100%; accent-color: var(--accent); }
.pp-sparen-z span { font-size: 13px; color: var(--text-2); white-space: nowrap; }
.pp-kats { display: grid; gap: 5px; padding: 10px 10px 4px; }
.pk { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(50px, 1.2fr) 70px; gap: 10px; align-items: center; font-size: 13px; }
.pk-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-b { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.pk-b i { display: block; height: 100%; border-radius: 4px; background: var(--variabel); }
.pk b { text-align: right; font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) { .pp-sparen-z { grid-template-columns: 1fr; } .pp-sparen-z span { white-space: normal; } }
.fix-einst { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; }
.fix-eigen { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.fix-eigen input { width: 96px; height: 32px; padding: 0 8px; border-radius: 9px; border: 1px solid var(--accent); background: var(--surface); font: inherit; font-weight: 600; text-align: right; }
.bb-fix { background: var(--fest); }
.bb-leben { background: var(--variabel); color: var(--variabel-text); }
.bb-rest { background: var(--ein); }
.bb-minus { background: repeating-linear-gradient(135deg, var(--aus) 0 5px, rgba(224, 96, 46, .35) 5px 10px); }
.bb { display: grid; gap: 10px; }
.bb-zeile { display: grid; grid-template-columns: auto; gap: 4px; }
.bb-t { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.bb-balken { position: relative; display: flex; height: 34px; border-radius: 9px; background: var(--surface-2); overflow: visible; }
.bb-balken > i { display: flex; align-items: center; justify-content: center; height: 100%; min-width: 0; overflow: hidden; }
.bb-balken > i:first-child { border-radius: 9px 0 0 9px; }
.bb-balken > i:last-of-type { border-radius: 0 9px 9px 0; }
.bb-balken > i + i { border-left: 2px solid var(--surface); }
.bb-balken > i span { color: #fff; font-size: 13px; font-weight: 650; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); padding: 0 6px; }
.bb-balken > .bb-leben span { color: var(--variabel-text); text-shadow: none; }
.bb-balken > b.bb-minus { position: absolute; top: 0; bottom: 0; border-radius: 0 9px 9px 0; }
.bb-balken > b.bb-linie { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--text); border-radius: 1px; }
.ks { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 10px; border: 1px solid var(--border); border-radius: 10px; font-size: 13.5px; cursor: pointer; }
.ks:hover { background: var(--surface-2); }
.fix-plan { padding: 16px 18px 18px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--accent-soft), transparent 140px); }
.plan-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.plan-kopf h3 { margin: 0; font-size: 17px; font-weight: 680; }
.plan-kopf p { margin: 2px 0 0; }
.plan-vorlagen { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 14px; }
.chip-knopf { border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); border-radius: 999px; padding: 6px 12px; font-size: 13.5px; font-weight: 550; }
.chip-knopf:hover { border-color: var(--accent); color: var(--accent); }
.plan-inhalt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 18px 26px; align-items: start; }
.plan-eingabe { display: grid; gap: 8px; }
.plan-leer { padding: 14px; border: 1px dashed var(--border-strong); border-radius: 12px; font-size: 13.5px; }
.pp { display: grid; grid-template-columns: minmax(0, 1fr) 120px 112px 34px; grid-template-areas: "name betrag rh x" "ersetzt ersetzt ersetzt x"; gap: 6px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.pp.pp-weg { grid-template-columns: minmax(0, 1fr) 34px; grid-template-areas: "name x" "ersetzt x"; }
.pp .pp-name { grid-area: name; }
.pp .pp-betrag { grid-area: betrag; }
.pp select[data-feld="rh"] { grid-area: rh; }
.pp .pp-ersetzt { grid-area: ersetzt; }
.pp .pp-x { grid-area: x; align-self: start; }
.pp input, .pp select, .pp-einmal input { height: 36px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--bg); font: inherit; font-size: 14px; min-width: 0; width: 100%; }
.pp input:focus, .pp select:focus, .pp-einmal input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pp-betrag { position: relative; display: block; }
.pp-betrag input { text-align: right; padding-right: 26px; font-weight: 650; }
.pp-betrag span { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px; pointer-events: none; }
.pp-ersetzt { color: var(--text-2); }
.pp-x { width: 34px; height: 36px; border: 0; background: none; border-radius: 9px; font-size: 20px; color: var(--muted); }
.pp-x:hover { background: var(--surface-2); color: var(--aus-text); }
.pp-einmal { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; border: 1px dashed var(--border-strong); font-size: 13.5px; }
.plan-erg { display: grid; gap: 12px; min-width: 0; }
.plan-start p { margin: 10px 0 0; }
.plan-urteil { padding: 12px 14px; border-radius: 12px; border: 1px solid; display: grid; gap: 3px; font-size: 14px; }
.plan-urteil > b { font-size: 16px; }
.plan-urteil.gut { background: rgba(26, 158, 110, .1); border-color: rgba(26, 158, 110, .35); }
.plan-urteil.gut > b { color: var(--ein-text); }
.plan-urteil.knapp { background: rgba(237, 161, 0, .12); border-color: rgba(237, 161, 0, .45); }
.plan-urteil.knapp > b { color: #a86f00; }
.plan-urteil.nein { background: rgba(224, 96, 46, .1); border-color: rgba(224, 96, 46, .4); }
.plan-urteil.nein > b { color: var(--aus-text); }
.plan-tab { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.plan-tab th { font-size: 12px; font-weight: 600; color: var(--muted); padding: 4px 6px; border-bottom: 1px solid var(--border); text-align: left; }
.plan-tab td { padding: 6px; border-bottom: 1px solid var(--border); }
.plan-tab .r { text-align: right; white-space: nowrap; }
.plan-erg > p { margin: 0; }
.plan-grenzen { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; }
.plan-einmal { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); font-size: 13.5px; display: grid; gap: 4px; }
.plan-einmal.gut { border-color: rgba(26, 158, 110, .35); }
.plan-einmal.knapp { border-color: rgba(237, 161, 0, .5); }
.plan-einmal.nein { border-color: rgba(224, 96, 46, .45); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .plan-urteil.knapp > b { color: #f0b93a; } }
:root[data-theme="dark"] .plan-urteil.knapp > b { color: #f0b93a; }
@media (max-width: 1180px) {
  .plan-inhalt { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .fix-plan { padding-left: 12px; padding-right: 12px; }
  .pp { grid-template-columns: minmax(0, 1fr) 110px 34px; grid-template-areas: "name name x" "betrag rh x" "ersetzt ersetzt x"; }
  .pp-einmal { grid-template-columns: 1fr; }
  .bb-balken > i span { font-size: 11.5px; padding: 0 3px; }
}

/* ============ Einfacher und grafischer (Okt 2026) ============ */
/* Filter: Konto, Kategorie, Art, Umbuchungen eingeklappt */
.filter-mehr { display: contents; }
.filter-mehr[hidden] { display: none; }
.f-zahl { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 700; }

/* Kategorien: Wärmekarte */

/* Konten: große Summe */

/* Fixkosten: ein Satz, ein Balken */

.kb { display: grid; gap: 4px; }
.kb-klammern { display: flex; font-size: 13px; }
.kb-k { display: grid; align-content: end; padding: 0 2px 6px; border-bottom: 3px solid; margin-right: 2px; min-width: 0; white-space: nowrap; }
.kb-k b { font-weight: 650; }
.kb-k span { color: var(--muted); font-size: 12px; }
.kb-k-fix { border-color: #2a78d6; }
.kb-k-leben { border-color: #eda100; }
.kb-k-rest { border-color: var(--ein); justify-items: end; text-align: right; margin-right: 0; }
.kb-balken { position: relative; display: flex; height: 56px; border-radius: 10px; background: var(--surface-2); }
.kb-balken > i { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; min-width: 0; overflow: hidden; color: #fff; text-align: center; line-height: 1.15; }
.kb-balken > i + i { border-left: 2px solid var(--surface); }
.kb-balken > i:first-child { border-radius: 10px 0 0 10px; }
.kb-balken > i:last-of-type { border-radius: 0 10px 10px 0; }
.kb-balken span { font-size: 11.5px; opacity: .95; padding: 0 3px; max-width: 100%; overflow: hidden; }
.kb-balken b { font-size: 13px; font-weight: 700; white-space: nowrap; }
.kb-fix { background: #2a78d6; cursor: pointer; }
.kb-fix:hover { background: #1c5cab; }
.kb-leben { background: #eda100; color: #3b2a00 !important; }
.kb-rest { background: var(--ein); }
.kb-minus { position: absolute; top: 0; bottom: 0; border-radius: 0 10px 10px 0; background: repeating-linear-gradient(135deg, rgba(224, 96, 46, .9) 0 6px, rgba(224, 96, 46, .3) 6px 12px); }
.kb-linie { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--text); border-radius: 1px; }
.kb-unten { position: relative; height: 18px; font-size: 12px; color: var(--muted); }
.kb-100 { position: absolute; top: 2px; padding-right: 6px; white-space: nowrap; }
.kb-fehlt { position: absolute; right: 0; top: 2px; color: var(--aus-text); font-weight: 650; white-space: nowrap; }
.fix-grundlage { font-size: 13px; color: var(--text-2); }
.fix-grundlage > summary { cursor: pointer; list-style: none; width: fit-content; }
.fix-grundlage > summary::-webkit-details-marker { display: none; }
.fix-grundlage[open] > summary { margin-bottom: 10px; }
.fix-grundlage .fix-einst { margin-bottom: 8px; }
.fix-grundlage p { margin: 0; }

/* Steuer */
.st-kopf { gap: 14px; padding: 14px 18px 16px; border-bottom: 0; }
.seg.st-jahre { display: flex; flex-wrap: wrap; gap: 4px; padding: 0; background: none; border: 0; }
.st-held { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px 28px; align-items: center; padding: 14px 18px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(180deg, var(--accent-soft), transparent); }
.st-stand { display: flex; gap: 14px; align-items: center; min-width: 0; }
.st-stand > div { display: grid; gap: 2px; }
.st-stand b { font-size: 18px; font-weight: 700; }
.st-stand .muted { font-size: 13px; }
.st-ring { width: 72px; height: 72px; flex: none; }
.st-ring-spur { fill: none; stroke: var(--surface-2); stroke-width: 9; }
.st-ring-wert { fill: none; stroke: var(--ein); stroke-width: 9; stroke-linecap: round; }
.st-ring text { font-size: 16px; font-weight: 700; fill: var(--text); }
.st-held-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.st-los { font-size: 15px; padding: 0 20px; min-height: 42px; }
.st-export { display: grid; gap: 5px; justify-items: start; padding-left: 22px; border-left: 1px solid var(--border); }
.st-export-k { display: flex; gap: 6px; }
.st-geltend { display: grid; gap: 2px; padding: 4px 18px 12px; border-bottom: 1px solid var(--border); }
.st-geltend-t { margin-bottom: 6px; font-size: 14.5px; }
.st-ab { display: grid; grid-template-columns: minmax(170px, 1.1fr) minmax(120px, 1.6fr) 90px minmax(170px, 1.6fr); gap: 14px; align-items: center; width: 100%; border: 0; background: none; text-align: left; padding: 9px 8px; border-radius: 10px; font-size: 14px; }
.st-ab:hover { background: var(--surface-2); }
.st-ab.an { background: var(--accent-soft); }
.st-ab-n { font-weight: 600; }
.st-offen { font-size: 11.5px; font-weight: 650; color: var(--aus-text); background: rgba(224, 96, 46, .12); border-radius: 99px; padding: 1px 7px; margin-left: 4px; white-space: nowrap; }
.st-ab-balken { position: relative; height: 12px; border-radius: 6px; background: var(--surface-2); }
.st-ab-balken i { display: block; height: 100%; border-radius: 6px; background: var(--accent); }
.st-pausch { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--text); border-radius: 1px; }
.st-ab-b { text-align: right; font-weight: 700; white-space: nowrap; }
.st-ab-w { font-size: 12.5px; color: var(--text-2); }
.st-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 18px 6px; }
.st-leiste-hinweis { margin-left: auto; }
.st-zeile { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto auto; align-items: center; gap: 6px 14px; padding: 10px 6px; }
.st-betrag { font-weight: 650; white-space: nowrap; text-align: right; }
.st-knoepfe { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; max-width: 340px; }
.st-ja { border-color: rgba(26, 158, 110, .55); color: var(--ein-text); font-weight: 650; }
.st-ja:hover { background: rgba(26, 158, 110, .12); border-color: var(--ein); }
.st-nein { color: var(--text-2); }
.st-nein:hover { color: var(--aus-text); border-color: var(--aus); }
.st-kurz { font-size: 12.5px; margin-top: 4px; color: var(--text-2); white-space: normal; }
.st-kurz.ok { color: var(--ein-text); }
.st-kurz.pruef { background: rgba(224, 96, 46, .08); border-left: 3px solid var(--aus); padding: 5px 9px; border-radius: 0 7px 7px 0; color: var(--text); }
.st-warum { display: inline; }
.st-warum > summary { display: inline; cursor: pointer; color: var(--accent); font-size: 12px; margin-left: 4px; list-style: none; }
.st-warum > summary::-webkit-details-marker { display: none; }
.st-warum[open] { display: block; margin-top: 4px; color: var(--text-2); }
.st-auf { font-size: 11.5px; font-weight: 500; color: var(--accent); margin-left: 6px; }
.st-mehr { position: relative; }
.st-mehr > summary { list-style: none; cursor: pointer; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--muted); font-size: 18px; line-height: 1; }
.st-mehr > summary::-webkit-details-marker { display: none; }
.st-mehr > summary:hover, .st-mehr[open] > summary { background: var(--surface-2); color: var(--text); }
.st-mehr-box { position: absolute; right: 0; top: 34px; z-index: 20; display: grid; gap: 8px; padding: 12px; width: 300px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 8px 28px rgba(0, 0, 0, .16); }
.st-mehr-box label { display: grid; gap: 4px; color: var(--text-2); min-width: 0; }
.st-mehr-box > * { min-width: 0; }   /* lange Auswahltexte dürfen das Menü nicht verbreitern */
.st-knoepfe .st-mehr-box select { max-width: none; width: 100%; height: 34px; font-size: 13.5px; border-radius: 8px; }
.st-mehr-box .btn { justify-self: start; }

@media (max-width: 1100px) {
  .st-held { grid-template-columns: minmax(0, 1fr) auto; }
  .st-export { grid-column: 1 / -1; padding-left: 0; border-left: 0; grid-auto-flow: column; justify-content: start; align-items: center; gap: 12px; }
  .st-ab { grid-template-columns: minmax(150px, 1fr) minmax(100px, 1.4fr) 84px; }
  .st-ab-w { grid-column: 1 / -1; margin-top: -6px; }
}
@media (max-width: 640px) {
  .kb-balken { height: 46px; }
  .kb-balken span { display: none; }
  .kb-balken b { font-size: 11.5px; }
  .kb-klammern { font-size: 12px; }
  .kb-k span { display: none; }
  .st-kopf, .st-geltend, .st-leiste { padding-left: 12px; padding-right: 12px; }
  .st-held { grid-template-columns: 1fr; padding: 12px; }
  .st-export { grid-auto-flow: row; }
  .st-ab { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
  .st-ab-balken { grid-column: 1 / -1; }
  .st-ab-w { margin-top: 0; }
  .st-leiste-hinweis { margin-left: 0; }
  .st-zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .st-datum { grid-column: 1 / -1; padding: 0; }
  .st-knoepfe { grid-column: 1 / -1; justify-content: flex-start; max-width: none; }
  /* am Handy als festes Blatt (wie .kw-liste), sonst ragt es rechts aus dem Bild und die Seite scrollt seitlich */
  .st-mehr-box { position: fixed; left: 12px; right: 12px; top: 70px; width: auto; max-height: calc(100vh - 160px); overflow: auto; z-index: 35; }
}
.st-dlg:not([open]) { display: none; }
@media (max-width: 640px) { .card-h .hint { max-height: 0; overflow: hidden; } }
@media (max-width: 640px) { .kb-unten { height: 34px; } .kb-fehlt { top: 18px; } .kb-balken b { font-size: 10.5px; letter-spacing: -.02em; } }
@media (max-width: 640px) { .st-ab-balken { order: 3; } .st-ab-w { order: 4; grid-column: 1 / -1; } }

/* ============ Übersicht: alles auf einem Bildschirm ============ */

.ue { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 12px; height: calc(100dvh - var(--kopf, 58px) - 28px); min-height: 460px; }
/* zu klein für eine Seite: dann normal untereinander und scrollen */
@media (max-width: 900px), (max-height: 500px) {
  .ue { height: auto; min-height: 0; grid-template-rows: none; }
}
/* Übersicht: Mitte und unten teilen sich die Höhe, Listen kürzen sich selbst */
.ue { grid-template-rows: auto auto minmax(0, 1.75fr) minmax(150px, 1fr); }
@media (max-height: 820px) { .ue { gap: 10px; } }
@media (max-width: 900px), (max-height: 500px) { .ue { grid-template-rows: none; } }

/* ============ Übersicht „Monate“: aktueller Stand ============ */

.ue[hidden] { display: none; }

/* ============ Übersicht „Monate“ mit Grafik – passt auch auf niedrige Bildschirme ============ */

@media (max-height: 780px) {
  .ue { gap: 8px; height: calc(100dvh - var(--kopf, 58px) - 20px); }
}

/* Fixkosten vom Gehalt (Startseite) */

/* Fixkosten: Wann abgebucht wird */
.ab-satz { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.ab-satz b { color: var(--text); }

/* Monatsstrahl */

/* Fixkosten: Zahlungskalender (12 Monate × Tage) */
.fix-zk { border-bottom: 1px solid var(--border); }
.zk-leg { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--text-2); align-items: center; }
.zk-leg span { display: inline-flex; align-items: center; gap: 6px; }
.zk-leg .zk-k { position: static; transform: none; width: 10px; height: 10px; display: inline-block; }
.zk { display: grid; gap: 0; }
.zk-zeile { display: grid; grid-template-columns: 56px minmax(0, 1fr) 150px; gap: 12px; align-items: center; min-height: 30px; border-bottom: 1px solid var(--border); }
.zk-zeile:last-child { border-bottom: 0; }
.zk-zeile.jetzt { background: var(--accent-soft); border-radius: 8px; }
.zk-m { font-size: 12.5px; color: var(--muted); padding-left: 6px; white-space: nowrap; }
.zk-m b { color: var(--text); font-weight: 650; }
.zk-spur { position: relative; height: 30px; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 31 - 1px), var(--border) calc(100% / 31 - 1px) calc(100% / 31)); background-size: 100% 100%; }
.zk-kopf { min-height: 22px; border-bottom: 1px solid var(--border-strong); }
.zk-kopf .zk-spur { height: 22px; background: none; }
.zk-kopf .zk-spur span { position: absolute; top: 4px; transform: translateX(-50%); font-size: 11px; color: var(--muted); }
.zk-kopf .zk-s { font-size: 11.5px; color: var(--muted); text-align: right; display: block; }
.zk-k { position: absolute; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; cursor: pointer; }
.zk-k.mon { background: rgba(184, 70, 27, .82); }
.zk-k.mon.vorbei { background: rgba(184, 70, 27, .35); }
.zk-k.extra { background: #6d5bd0; box-shadow: 0 0 0 2px var(--surface); z-index: 2; }
.zk-k.lohn { background: rgba(26, 158, 110, .85); }
.zk-l { position: absolute; top: 50%; transform: translate(10px, -50%); z-index: 3; font-size: 11.5px; color: #5442b8; white-space: nowrap; background: var(--surface); padding: 0 5px; border-radius: 5px; border: 1px solid rgba(109, 91, 208, .35); cursor: pointer; line-height: 18px; }
.zk-l b { font-weight: 700; }
.zk-l:hover { border-color: #6d5bd0; }
.zk-heute { position: absolute; top: 2px; bottom: 2px; width: 0; border-left: 1.5px dashed var(--text-2); }
.zk-s { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12.5px; padding-right: 6px; }
.zk-s i { display: block; height: 8px; border-radius: 4px; background: rgba(184, 70, 27, .55); }
.zk-s b { font-weight: 700; white-space: nowrap; text-align: right; }
.zk-s small { grid-column: 1 / -1; justify-self: end; margin-top: -4px; font-size: 11px; color: #5442b8; font-weight: 650; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .zk-l, :root:not([data-theme="light"]) .zk-s small { color: #a99cf2; } }
:root[data-theme="dark"] .zk-l, :root[data-theme="dark"] .zk-s small { color: #a99cf2; }
@media (max-width: 640px) {
  .zk-zeile { grid-template-columns: 44px minmax(0, 1fr) 70px; gap: 6px; }
  .zk-s i { display: none; }
  .zk-l { font-size: 10.5px; }
}
.zk-zeile { min-height: 34px; } .zk-spur { height: 34px; }
.zk-l.links { transform: translate(calc(-100% - 10px), -50%); }
.fix-zk { overflow-x: hidden; }
@media (max-width: 640px) { .zk-s small { display: none; } }

/* Handy und kleine Fenster: Startseite normal untereinander und scrollbar – die Ein-Seiten-Regeln gelten nur am PC */
/* Übersicht „Monate“: Monatsrechnung (Wasserfall) */

/* Kategorien: Anteil und Summe */

/* Nächste 30 Tage: Gruppen je Monat, Laufsumme */

/* Keine Treffer: Hinweis auf Treffer in anderen Jahren / ohne Filter */
.leer.kt { display: grid; gap: 10px; justify-items: start; text-align: left; max-width: 720px; margin: 0 auto; }
.leer.kt p { margin: 0; }
.kt-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; width: 100%; }
.kt-l li { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto 100px; gap: 12px; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); font-size: 13.5px; color: var(--text); }
.kt-l li span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-l li b { text-align: right; white-space: nowrap; }
@media (max-width: 640px) { .kt-l li { grid-template-columns: 78px minmax(0, 1fr) auto; } .kt-l li span:nth-child(3) { display: none; } }

/* Kopfzeile bei mittlerer Breite: nichts darf über den Rand ragen */
@media (min-width: 901px) and (max-width: 1360px) { .stand { display: none; } .einlesen-knopf span { display: none; } .einlesen-knopf { padding: 0 9px; } }
@media (min-width: 901px) and (max-width: 1180px) { .nav button { padding: 7px 9px; gap: 5px; font-size: 13.5px; } .nav .n { display: none; } .top .brand span { display: none; } }
@media (min-width: 901px) and (max-width: 1020px) { .nav button span:not(.n) { display: none; } .nav button { padding: 7px 11px; } .top .brand span { display: inline; } }

/* ===== Seiten: Kopf mit Antwortsatz ===== */
.tabelle-card.frei { background: none; border: 0; box-shadow: none; padding: 0; }
.tabelle-card.frei #tab-inhalt { padding: 0; }
.schnell { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }

/* Kennzahlen */

/* Kategorien */

/* Konten */

/* Fixkosten: eine Ansicht zur Wahl */
.fix-tabs { margin: 16px 0 10px; }
.fix-tabs small { font-size: 11.5px; color: var(--muted); margin-left: 3px; }
.fix-tabs .seg { flex-wrap: wrap; }
details.fix-fuss { margin-top: 14px; }
details.fix-fuss summary { cursor: pointer; }

/* ===== Seiten v3: schlichte Karten und Tabellen ===== */
.kopf-zurueck { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; }
.k3 { padding: 14px 16px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.t3-rahmen { overflow-x: auto; }
.t3 { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.t3 th { font-size: 12px; font-weight: 600; color: var(--muted); text-align: left; padding: 4px 8px 6px; border-bottom: 1px solid var(--border-strong); white-space: nowrap; }
.t3 td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.t3 .r { text-align: right; white-space: nowrap; }
.t3 td small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.t3 td small .ok { color: var(--ein-text); }
.t3 tfoot td { font-weight: 700; border-top: 1.5px solid var(--border-strong); border-bottom: 0; }
.t3 tfoot tr + tr td { border-top: 0; font-weight: 600; color: var(--text-2); }
.t3 tr.klick, .t3 td.klick { cursor: pointer; }
.t3 tr.klick:hover td, .t3 td.klick:hover { background: var(--surface-2); }
.t3 tr.aus td { color: var(--muted); }
.t3 tr.aus td b { font-weight: 500; }
.t3 tr.an td { background: var(--accent-soft); }
.t3-eng td, .t3-eng th { padding-left: 6px; padding-right: 6px; }
.t3-eng td { padding-top: 5px; padding-bottom: 5px; }
.t3-n { white-space: nowrap; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.t3 td.hoch { font-weight: 700; color: var(--aus-text); }
.fv-titel { font-weight: 600; }
.k3 .seg { flex-wrap: wrap; max-width: 100%; }
.k3 .seg button { white-space: normal; }
.fix-zk.k3, .fix-plan.k3 { padding: 16px 18px; }
/* Kontenauswahl */
.kw { position: relative; }
.kw-liste { position: absolute; right: 0; left: auto; width: auto; top: calc(100% + 6px); z-index: 30; min-width: 270px; max-height: 70vh; overflow: auto; }
.kw-platz .kw-liste { left: 0; right: auto; }
.kw-t { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 10px 12px 4px; }
.kw-z { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 14px; cursor: pointer; }
.kw-z:hover { background: var(--surface-2); }
.kw-z input { width: 16px; height: 16px; accent-color: var(--accent); }
@media (max-width: 900px) { .t3 .m-alt { display: none; } }
@media (max-width: 640px) {
  .t3 .sp-m { display: none; }
  .t3 { font-size: 13px; }
  .t3 th { white-space: normal; }
  .t3 td, .t3 th { padding-left: 5px; padding-right: 5px; }
  .k3 { padding: 12px; }
  .kopf-zurueck span { display: none; }
  .kw-liste { position: fixed; left: 12px; right: 12px; top: 70px; min-width: 0; }
}

/* ===== Seiten d5: überall dasselbe Muster – Satz, Kennzahlen, wenige beschriftete Grafiken, Ausblick ===== */
:root { --fest: #b8461b; --variabel: #f0a27e; --variabel-text: #3b1a0c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fest: #ec7442; --variabel: #9a5233; --variabel-text: #fff; } }
:root[data-theme="dark"] { --fest: #ec7442; --variabel: #9a5233; --variabel-text: #fff; }
.s5 { display: grid; gap: 12px; min-width: 0; }
.s5-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px 20px; flex-wrap: wrap; }
.s5-kopf-t { flex: 1 1 560px; min-width: 0; }
.s5-kopf h1 { margin: 0; font-size: 23px; font-weight: 750; letter-spacing: -.015em; display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.s5-stand { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.s5-satz { margin: 5px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--text-2); max-width: 1040px; }
.s5-satz b { color: var(--text); font-weight: 700; }
.s5-satz b.pos { color: var(--ein-text); }
.s5-satz b.neg, .s5-satz .neg { color: var(--aus-text); }
.s5-kopf-r { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.s5-zeit { flex-wrap: wrap; }
.s5-zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.s5-z { display: grid; gap: 3px; align-content: start; text-align: left; padding: 12px 15px 13px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; font: inherit; color: inherit; }
button.s5-z { cursor: pointer; transition: border-color .15s; }
button.s5-z:hover { border-color: var(--accent); }
.s5-z-t { font-size: 13px; font-weight: 600; color: var(--muted); }
.s5-z-w { font-size: 26px; font-weight: 750; letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s5-z-u { font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
.s5-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.s5-b2 { grid-column: span 2; }
.s5-spalte { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* Nebeneinanderstehende Kästen sind immer gleich hoch: die Spalte rechts füllt die Höhe mit ihrer letzten Karte */
.s5-spalte > .s5-karte { flex: 0 0 auto; }
.s5-spalte > .s5-karte:last-child { flex: 1 1 auto; }
.s5-karte { padding: 14px 16px 15px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.s5-kt { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.s5-kt-t { min-width: 0; }
.s5-kt h2 { margin: 0; font-size: 15.5px; font-weight: 700; }
.s5-erkl { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.s5-erkl b { color: var(--text-2); }
.s5-wert { font-weight: 700; font-size: 15px; white-space: nowrap; }
.s5-chart { position: relative; height: 260px; min-height: 0; }
.s5-chart.klein { height: 210px; }
/* füllt die Karte, wenn die Nachbarkarte höher ist (Leinwand absolut, damit nichts mitwächst) */
.s5-chart.fuell { flex: 1 1 0; height: auto; min-height: 250px; }
.s5-chart.klein.fuell { min-height: 190px; }
.s5-chart canvas { position: absolute; inset: 0; }   /* Leinwand wächst nie über die Karte hinaus */
.s5-teil h3 { margin: 0 0 4px; font-size: 13px; font-weight: 650; color: var(--text-2); }
.s5-teil + .s5-teil { margin-top: 4px; }
.s5-tipp { margin: 0; padding: 8px 11px; border-radius: 9px; background: var(--accent-soft); font-size: 13px; line-height: 1.45; color: var(--text-2); }
.s5-tipp b { color: var(--text); }
.s5-tipp .link { padding: 0; font-size: inherit; font-weight: 650; }
.s5-dl { margin: 0; display: grid; }
.s5-dl > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--border); }
.s5-dl > div:last-child { border-bottom: 0; }
.s5-dl dt { font-size: 13.5px; color: var(--text-2); }
.s5-dl dd { margin: 0; font-weight: 650; text-align: right; font-size: 14px; }
.s5-dl dd small { display: block; font-weight: 400; font-size: 11.5px; color: var(--muted); }
.s5-hinweis { display: flex; gap: 6px; align-items: center; justify-content: space-between; text-align: left; border: 1px solid var(--border); background: var(--surface-2); border-radius: 9px; padding: 8px 11px; font: inherit; font-size: 13.5px; color: var(--text); cursor: pointer; margin-top: auto; }
.s5-hinweis:hover { border-color: var(--accent); }
.s5-details { padding: 0; }
.s5-details > summary { cursor: pointer; padding: 12px 16px; font-weight: 650; font-size: 14.5px; }
.s5-details > summary .muted { font-weight: 400; font-size: 13px; }
.s5-details[open] > summary { border-bottom: 1px solid var(--border); }
.s5-details > .t3-rahmen { padding: 4px 12px 12px; }
/* Balkenliste: Name | Balken | Betrag | Anteil */
.bl { display: grid; gap: 1px; }
.bl-z { display: grid; grid-template-columns: minmax(96px, 1.25fr) minmax(50px, 1fr) auto 38px; gap: 10px; align-items: center; padding: 4px; border-radius: 7px; text-align: left; font: inherit; font-size: 13.5px; color: inherit; background: none; border: 0; width: 100%; min-width: 0; }
button.bl-z { cursor: pointer; }
button.bl-z:hover { background: var(--surface-2); }
.bl-kopf { font-size: 11.5px; color: var(--muted); font-weight: 600; padding-top: 0; padding-bottom: 0; }
.bl-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-n small { display: block; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.bl-b { position: relative; height: 10px; border-radius: 5px; background: var(--surface-2); }
.bl-b i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--accent); }
.bl-m { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--text); border-radius: 1px; }
.bl-w { text-align: right; white-space: nowrap; font-weight: 650; }
.bl-p { text-align: right; font-size: 12px; color: var(--muted); white-space: nowrap; }
.bl-z.neg .bl-w { color: var(--aus-text); }
/* Geld-Balken: Einkommen als Strich, Fixkosten | Lebenshaltung | bleibt, was fehlt rot schraffiert */
.gb { display: grid; gap: 7px; padding-top: 4px; }
.gb-balken { position: relative; display: flex; height: 42px; border-radius: 8px; background: var(--surface-2); }
.gb-t { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 0; flex: 0 1 auto; min-width: 0; overflow: hidden; color: #fff; font-style: normal; border-right: 2px solid var(--surface); }
.gb-t:first-child { border-radius: 8px 0 0 8px; }
.gb-t.lbl { padding: 0 8px; }
.gb-t[data-geh] { cursor: pointer; }
.gb-t[data-geh]:hover { filter: brightness(1.08); }
.gb-t span { font-size: 11px; line-height: 1.15; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gb-t b { font-size: 13px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gb-fest { background: var(--fest); }
.gb-leben { background: var(--variabel); color: var(--variabel-text); }
.gb-rest { background: var(--ein); border-radius: 0 8px 8px 0; border-right: 0; }
.gb-minus { position: absolute; top: -4px; bottom: -4px; border-radius: 0 8px 8px 0; background: repeating-linear-gradient(135deg, rgba(210, 45, 20, .5) 0 3px, transparent 3px 7px); border: 1.5px solid var(--aus-text); border-left: 0; pointer-events: none; }
.gb-linie { position: absolute; top: -8px; bottom: -8px; width: 3px; margin-left: -1.5px; background: var(--text); border-radius: 2px; }
.gb-skala { display: flex; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); }
.gb-skala span { display: inline-flex; align-items: center; gap: 6px; }
.gb-sym { display: inline-block; width: 3px; height: 13px; background: var(--text); border-radius: 2px; }
.gb-sym-f { display: inline-block; width: 14px; height: 11px; border: 1.5px solid var(--aus-text); background: repeating-linear-gradient(135deg, rgba(210, 45, 20, .5) 0 2px, transparent 2px 5px); border-radius: 2px; }
.gb-f { font-weight: 700; color: var(--aus-text); }
.gb-b { font-weight: 700; color: var(--ein-text); }
/* Dieser Monat */
.mb { display: grid; gap: 5px; }
.mb-l { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.mb-l span:first-child { font-weight: 650; }
.mb-l.klein span:first-child { font-weight: 400; }
.mb-b { position: relative; height: 12px; border-radius: 6px; background: var(--surface-2); }
.mb-b i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--aus); }
.mb-b b { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--text); }
/* Nächste Abbuchungen: Tag als Kopf, Verträge eingerückt */
.nt { display: grid; gap: 6px; }
.nt-tag { display: grid; }
.nt-k { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 3px 4px; border-bottom: 1px solid var(--border); font-size: 13px; }
.nt-d { font-weight: 700; white-space: nowrap; }
.nt-a { color: var(--muted); font-size: 12px; }
.nt-k b { white-space: nowrap; }
.nt-z { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 4px 4px 4px 22px; border: 0; background: none; border-radius: 6px; text-align: left; font: inherit; font-size: 13px; color: inherit; cursor: pointer; }
.nt-z::before { content: ''; position: absolute; left: 9px; top: 0; bottom: 0; width: 2px; background: var(--border-strong); }
.nt-z:last-child::before { bottom: 50%; }
.nt-z::after { content: ''; position: absolute; left: 9px; top: 50%; width: 8px; height: 2px; background: var(--border-strong); }
.nt-z:hover { background: var(--surface-2); }
.nt-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-n small { color: var(--muted); font-size: 11.5px; }
.nt-z b { white-space: nowrap; font-weight: 600; }
.nt-lohn { color: var(--ein-text); }
.nt-lohn b { color: var(--ein-text); font-weight: 700; }
.nt-mehr { font-size: 12.5px; color: var(--muted); padding: 2px 4px 0; }
/* Was sich verändert hat */
.vd { display: grid; }
.vd-z { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 4px; border: 0; border-bottom: 1px solid var(--border); background: none; text-align: left; font: inherit; font-size: 13.5px; color: inherit; cursor: pointer; }
.vd-z:last-child { border-bottom: 0; }
.vd-z:hover { background: var(--surface-2); }
.vd-p { font-size: 11px; }
.vd-n { min-width: 0; }
.vd-n small { display: block; font-size: 11.5px; color: var(--muted); }
.vd-z b { white-space: nowrap; }
/* Kategorien: Liste und Einzelheiten */
.kl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.kl-liste { gap: 2px; }
.kl-liste .s5-kt { margin-bottom: 6px; }
.kl-z, .kl-summe { display: grid; grid-template-columns: minmax(100px, 1.3fr) minmax(50px, 1fr) 74px 44px 66px; gap: 8px; align-items: center; padding: 5px 6px; border: 0; background: none; border-radius: 7px; text-align: left; font: inherit; font-size: 13.5px; color: inherit; width: 100%; }
.kl-z { cursor: pointer; }
.kl-z:hover { background: var(--surface-2); }
.kl-z.an { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.kl-b { position: relative; height: 10px; border-radius: 5px; background: var(--surface-2); }
.kl-b i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--variabel); }
.kl.ein .kl-b i { background: var(--ein); }
.kl-b b { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--text-2); }
.kl-d { text-align: right; font-size: 12.5px; white-space: nowrap; }
.kl-summe { border-top: 1.5px solid var(--border-strong); border-radius: 0; font-weight: 700; margin-top: 4px; padding-top: 8px; }
.kl-detail .s5-chart.fuell { max-height: 380px; }   /* die Grafik nimmt die freie Höhe auf, wenn die Liste länger ist */
.kl-d-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.kl-d-kopf h2 { margin: 0; font-size: 19px; }
.kl-d-kopf b { font-size: 20px; white-space: nowrap; }
.kl-d-kopf small { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.kl-detail .s5-erkl { margin-top: -6px; }
.kl-d-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 16px; }
/* Konten */
.ko { display: grid; }
.ko-z { display: grid; grid-template-columns: minmax(110px, 1.3fr) minmax(40px, 1fr) auto 72px; gap: 10px; align-items: center; padding: 6px 4px; border: 0; border-bottom: 1px solid var(--border); background: none; text-align: left; font: inherit; font-size: 13.5px; color: inherit; width: 100%; cursor: pointer; }
.ko-z:last-child { border-bottom: 0; }
.ko-z:hover { background: var(--surface-2); }
.ko-b { position: relative; height: 10px; border-radius: 5px; background: var(--surface-2); }
.ko-b i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--accent); }
.ko-z.minus .ko-b i { background: var(--aus); }
.ko-z.aus { opacity: .5; }
.kon5-tag { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kon5-tag input { font: inherit; font-size: 14px; padding: 5px 8px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); color: var(--text); }
.kon5-tag .seg { flex-wrap: wrap; }
/* Fixkosten */
.fix5-balken .fix-grundlage { margin: 2px 0 0; }
.fix5 .fix-seg { flex-wrap: wrap; align-self: flex-start; }
.fix-tabs .seg { flex-wrap: wrap; }

@media (max-width: 1180px) {
  .s5-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fix5 > .s5-spalte { position: static; }
  .s5-b2 { grid-column: 1 / -1; }
  /* einzelne Karte ohne Partner (s5-solo, setzt app.js) über die volle Breite – keine halbe Leerfläche; eine Spalte mit Karten legt diese dann nebeneinander */
  .s5-raster > .s5-solo { grid-column: 1 / -1; }
  .s5-raster > .s5-spalte.s5-solo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .s5-raster > .s5-spalte.s5-solo > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kl { grid-template-columns: minmax(0, 1fr); }
  .kl-detail { position: static; }
}
@media (max-width: 900px) {
  .s5, .s5-raster { gap: 10px; }
  .s5-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .s5-raster { grid-template-columns: minmax(0, 1fr); }
  .s5-spalte { gap: 10px; }
  .s5-raster > .s5-spalte.s5-solo { display: flex; }
  .s5-start .s5-mr { order: -1; }
  .s5-kopf h1 { font-size: 21px; }
  .s5-satz { font-size: 14.5px; }
  .s5-kopf-r { justify-content: flex-start; }
  .s5-z { padding: 10px 12px; }
  .s5-z-w { font-size: 21px; }
  .s5-z-u { font-size: 12px; }
  .s5-karte { padding: 12px; }
  .s5-chart { height: 230px; }
  .s5-chart.klein { height: 190px; }
  .kl-z, .kl-summe { grid-template-columns: minmax(90px, 1.2fr) minmax(40px, 1fr) 64px 34px; }
  .kl-d, .kl-summe span:last-child { display: none; }
  .ko-z { grid-template-columns: minmax(100px, 1.4fr) minmax(30px, .8fr) auto 64px; gap: 8px; }
}
@media (max-width: 640px) {
  .gb-t.lbl:not(.gross) { padding: 0; }
  .gb-t.lbl:not(.gross) > * { display: none; }
}
@media (max-width: 420px) {
  .s5-z-w { font-size: 19px; }
  .bl-z { grid-template-columns: minmax(80px, 1.2fr) minmax(30px, .8fr) auto 34px; gap: 7px; }
  .gb-t span { display: none; }
}

/* Kopfzeile: links Name und Zurück, in der Mitte die Reiter, rechts Datenstand und Knöpfe */
.top-l, .top-r { display: flex; align-items: center; gap: 10px; min-width: 0; }
.top-r { justify-content: flex-end; }
@media (min-width: 901px) {
  .top { display: grid; grid-template-columns: 1fr auto 1fr; }
  .top .nav { margin: 0; }
}
/* Verweise: Zahlen im Text, Zeilen und Summen führen zu den Einzelheiten */
.s5-kt-r { flex: none; white-space: nowrap; font-size: 13px; }
.zl { display: inline; border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dotted 1.5px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; border-radius: 3px; }
.zl:hover { background: var(--accent-soft); text-decoration-color: var(--accent); }
.s5-dl > .klick { cursor: pointer; border-radius: 6px; }
.s5-dl > .klick:hover { background: var(--surface-2); }
.s5-dl > .klick { padding-left: 4px; padding-right: 4px; }
button.mb { display: grid; gap: 5px; width: 100%; padding: 4px; margin: -4px; width: calc(100% + 8px); background: none; border: 0; border-radius: 8px; font: inherit; color: inherit; text-align: left; cursor: pointer; }
button.mb:hover { background: var(--surface-2); }
.mb-b { display: block; }
button.kl-summe { cursor: pointer; }
button.kl-summe:hover { background: var(--surface-2); }
.gb-t[data-springe] { cursor: pointer; }
.gb-t[data-springe]:hover { filter: brightness(1.08); }
/* Sprungziele nicht unter der festen Kopfzeile verstecken */
.s5-karte, .s5-details, .fv-g, .vg, .vgs, .ko, main [id] { scroll-margin-top: 84px; }
@keyframes blink5 { 0%, 60% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: 0 0 0 3px transparent; } }
.blink { animation: blink5 1.8s ease-out; }
tr.blink td { animation: blink5td 1.8s ease-out; }
@keyframes blink5td { 0%, 60% { background: var(--accent-soft); } 100% { background: transparent; } }
/* Verträge: je Art ein Block, Kopf mit Summe, Verträge eingerückt mit Verbindungslinie */
.vgs { display: grid; gap: 8px; }
.vg-kopf, .vg-k, .vg-z, .vg-summe { display: grid; grid-template-columns: minmax(150px, 1.5fr) minmax(90px, 1fr) 84px 58px; gap: 10px; align-items: center; }
.vg-kopf { font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 0 12px; }
.vg-kopf span:nth-child(3), .vg-kopf span:nth-child(4) { text-align: right; }
.vg { border: 1px solid var(--border); border-left: 5px solid var(--vg); border-radius: 10px; overflow: hidden; background: var(--surface); }
.vg-k { padding: 9px 12px; background: color-mix(in srgb, var(--vg) 9%, var(--surface)); }
.vg-n { min-width: 0; }
.vg-n b { font-size: 14.5px; }
.vg-n small, .vg-zn small, .vg-zr small, .vg-summe small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-b { position: relative; height: 8px; border-radius: 4px; background: var(--surface-2); }
.vg-b i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--vg); }
.vg-w { text-align: right; font-size: 15px; white-space: nowrap; }
.vg-p, .vg-zp { text-align: right; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.vg-l { display: grid; padding: 2px 0 4px; }
.vg-z { position: relative; padding: 6px 12px 6px 38px; border: 0; background: none; text-align: left; font: inherit; font-size: 13.5px; color: inherit; cursor: pointer; width: 100%; }
.vg-z::before { content: ''; position: absolute; left: 20px; top: 0; bottom: 0; width: 2px; background: color-mix(in srgb, var(--vg) 55%, transparent); }
.vg-z:last-child::before { bottom: 50%; }
.vg-z::after { content: ''; position: absolute; left: 20px; top: 50%; width: 11px; height: 2px; background: color-mix(in srgb, var(--vg) 55%, transparent); }
.vg-z:hover { background: var(--surface-2); }
.vg-z.beendet { opacity: .55; }
.vg-zn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.vg-zr { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-zw { text-align: right; font-weight: 600; white-space: nowrap; }
.vg-mobil { display: none !important; }
.vg-summe { padding: 8px 12px 0; border-top: 1.5px solid var(--border-strong); font-weight: 700; }
.vg-summe b { text-align: right; font-size: 16px; }
.vg-summe span:last-child { text-align: right; font-size: 12.5px; color: var(--muted); }
.vg.blink { animation: blink5 2.2s ease-out; }
.vg.blink .vg-k { animation: blink5td 2.2s ease-out; }
/* Wofür: ein Balken = 100 % Fixkosten, darunter die Arten */
.wf5-b { display: flex; height: 22px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--surface); }
.wf5-b i { min-width: 3px; cursor: pointer; }
.wf5-b i:hover { filter: brightness(1.1); }
.wf5 { display: grid; }
.wf5-z { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 38px; gap: 9px; align-items: center; padding: 5px 4px; border: 0; border-bottom: 1px solid var(--border); background: none; text-align: left; font: inherit; font-size: 13.5px; color: inherit; cursor: pointer; }
.wf5-z:last-child { border-bottom: 0; }
.wf5-z:hover { background: var(--surface-2); }
.wf5-z > i { width: 12px; height: 12px; border-radius: 3px; }
.wf5-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf5-n small { display: block; font-size: 11.5px; color: var(--muted); }
.wf5-z b { white-space: nowrap; }
.wf5-p { text-align: right; font-size: 12.5px; color: var(--muted); }
@media (max-width: 640px) {
  .vg-kopf, .vg-k, .vg-z, .vg-summe { grid-template-columns: minmax(0, 1fr) auto 46px; gap: 8px; }
  .vg-b, .vg-zr, .vg-kopf span:nth-child(2), .vg-summe span:nth-child(2) { display: none; }
  .vg-mobil { display: block !important; }
  .kg .ko-b { display: none; }
  .vg-z { padding-left: 32px; }
  .vg-z::before, .vg-z::after { left: 16px; }
}
/* Konten: Gruppen wie bei den Verträgen; Konten, die nicht mitzählen, blasser und gestrichelt */
.kg .ko-b { position: relative; height: 8px; border-radius: 4px; background: var(--surface-2); }
.kg .ko-b i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--vg); }
.kg .ko-z.minus .ko-b i { background: var(--aus); }
.kg .ko-z { cursor: pointer; }
.kg .ko-z.aus { opacity: .45; }
.kg.fremd { border-style: dashed; border-left-style: solid; background: color-mix(in srgb, var(--surface-2) 40%, var(--surface)); }
.kg.fremd .vg-k { background: transparent; }
.kg.fremd .vg-w, .kg.fremd .vg-zw { color: var(--text-2); font-weight: 600; }
.vg-b.leer { background: none; }
/* Monatsenden */
.me { display: grid; }
.me-z { display: grid; grid-template-columns: minmax(0, 1fr) auto 76px; gap: 10px; align-items: baseline; padding: 6px 4px; border: 0; border-bottom: 1px solid var(--border); background: none; text-align: left; font: inherit; font-size: 13.5px; color: inherit; cursor: pointer; }
.me-z:last-child { border-bottom: 0; }
.me-z:first-child { font-weight: 650; }
.me-z:hover { background: var(--surface-2); }
.me-z b { white-space: nowrap; text-align: right; }
.me-z span:last-child { text-align: right; font-size: 12.5px; white-space: nowrap; }
/* Kennzahlen: Durchschnittsmonat (Blöcke wie die Verträge), Jahr für Jahr als Tabelle, Leiste mit Auffälligem */
.dm .dm-z { grid-template-columns: minmax(150px, 1.6fr) 100px 100px 96px; }
.dm .vg-kopf.dm-z span:not(:first-child) { text-align: right; }
button.vg-k { width: 100%; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
button.vg-k:hover { filter: brightness(.97); }
.dm-w { text-align: right; white-space: nowrap; }
.dm .vg-k .dm-w { font-size: 15px; }
.dm .vg-z .dm-w { font-weight: 600; }
.dm-v { text-align: right; color: var(--text-2); font-size: 13px; white-space: nowrap; }
.dm-d { text-align: right; font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.jt { display: grid; }
.jt-z { display: grid; grid-template-columns: 62px 1fr 1fr minmax(100px, 1.3fr); gap: 8px; align-items: center; padding: 8px 6px; border: 0; border-bottom: 1px solid var(--border); background: none; font: inherit; font-size: 13.5px; color: inherit; text-align: right; cursor: pointer; }
.jt-z:last-child { border-bottom: 0; }
.jt-z > span:first-child { text-align: left; }
.jt-kopf { cursor: default; font-size: 11.5px; font-weight: 600; color: var(--muted); padding-top: 0; }
button.jt-z:hover { background: var(--surface-2); }
.jt-z.an { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.jt-j { font-weight: 700; }
.jt-j small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); }
.jt-e { display: grid; justify-items: end; gap: 3px; }
.jt-e i { display: block; height: 5px; border-radius: 3px; min-width: 2px; }
.jt-e i.plus { background: var(--ein); }
.jt-e i.minus { background: var(--aus); }
.fl { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.fl-z { display: grid; gap: 3px; align-content: start; padding: 10px 13px; text-align: left; font: inherit; color: inherit; }
button.fl-z { cursor: pointer; }
button.fl-z:hover { border-color: var(--accent); }
.fl-z > span { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.fl-z > b { font-size: 15px; }
.fl-z > b small { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); }
@media (max-width: 640px) {
  .dm .dm-z { grid-template-columns: minmax(0, 1fr) auto 66px; }
  .dm .dm-v, .dm .vg-kopf.dm-z span:nth-child(3) { display: none; }
  .jt-z { grid-template-columns: 50px 1fr 1fr 1fr; gap: 6px; font-size: 12.5px; }
  .fl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}
/* Kategorien: Blöcke „überwiegend fest“ / „frei gestaltbar“ wie die Verträge, rechts Einzelheiten */
.vgs .kz { grid-template-columns: minmax(110px, 1.3fr) minmax(50px, 1fr) 76px 44px 68px; }
.vg-kopf.kz span:nth-child(n+3) { text-align: right; }
.vg-kopf.kz span:nth-child(2) { font-weight: 400; }
.vg-z.kz { border-radius: 0; }
.vg-z.kz.an { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.vg-k.kz .kl-d { font-weight: 650; }
.vgs .kz .kl-d { display: block; }   /* Veränderung zum Vorjahr auch auf dem Handy */
.kb .kl-b i { background: var(--vg); }
.kb .kl-b b { background: var(--text); }
button.vg-summe.kz { width: 100%; background: none; border: 0; border-top: 1.5px solid var(--border-strong); font: inherit; font-weight: 700; color: inherit; cursor: pointer; text-align: left; border-radius: 0; margin-top: 2px; }
button.vg-summe.kz:hover { background: var(--surface-2); }
.vg-summe.kz > :nth-child(n+3) { text-align: right; }
.kd-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kd-stats > div { background: var(--surface-2); border-radius: 9px; padding: 7px 10px; display: grid; gap: 1px; min-width: 0; }
.kd-stats span { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.kd-stats b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kl-d-kopf .zl { font-size: 13px; color: var(--accent); }
@media (max-width: 640px) {
  .vgs .kz { grid-template-columns: minmax(0, 1fr) 70px 38px 62px; gap: 6px; }
  .vgs .kz > .kl-b, .vg-kopf.kz > span:nth-child(2), .vg-k.kz > span:nth-child(2), .vg-summe.kz > span:nth-child(2) { display: none; }
  .kd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Buchungen: Treffer in Zahlen, Monatsgrafik, Liste je Tag */
.bt { display: grid; gap: 12px; padding: 12px 14px 14px; }
.bt .s5-z { box-shadow: none; background: var(--surface-2); border-color: transparent; }
.bt-grafik { display: grid; gap: 4px; }
.bt-g-t { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 13.5px; }
.bt-chart { height: 130px; }
.bt-leiste { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.bt-liste { display: grid; }
.bz.tag-anfang { border-top: 1.5px solid var(--border-strong); }
.bz-tagsumme { text-align: right; font-size: 12px; color: var(--muted); padding: 3px 8px 6px; border-bottom: 1px solid var(--border); }
.bz-tagsumme b { color: var(--text); }
.bz { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) 116px; gap: 12px; align-items: center; padding: 7px 8px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 13.5px; }
.bz.mit-datum { grid-template-columns: 92px minmax(0, 2fr) minmax(0, 1.1fr) 116px; }
.bz:hover { background: var(--surface-2); }
.bz.offen { background: var(--accent-soft); }
.bz-d { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.bz-n, .bz-k { min-width: 0; }
.bz-n b { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-n small, .bz-k small { display: block; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-k > span { display: block; font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-b { text-align: right; white-space: nowrap; font-weight: 650; }
.bz-detail { padding: 8px 12px 12px; background: var(--accent-soft); border-bottom: 1px solid var(--border); display: grid; gap: 8px; }
.bz-detail dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 14px; margin: 0; font-size: 13px; }
.bz-detail dt { color: var(--muted); }
.bz-detail dd { margin: 0; overflow-wrap: anywhere; }
.bz-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bt-summe { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 8px 0; border-top: 1.5px solid var(--border-strong); font-weight: 700; }
.bt-summe small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.bt-summe b { font-size: 16px; white-space: nowrap; }
@media (max-width: 640px) {
  .bt { padding: 10px; }
  .bz, .bz.mit-datum { grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px; padding: 7px 4px; }
  .bz-d { grid-column: 1 / -1; grid-row: 1; font-size: 11.5px; font-weight: 650; color: var(--text-2); margin-bottom: 2px; }
  .bz-d:empty { display: none; }
  .bz-n { grid-column: 1; grid-row: 2; }
  .bz-b { grid-column: 2; grid-row: 2; }
  .bz-k { grid-column: 1 / -1; grid-row: 3; }
  .bz-k > span { font-size: 11.5px; color: var(--muted); }
  .bz-k small { display: none; }
}
/* Steuer im Muster der anderen Seiten */
.st5 .st-export-k { display: flex; gap: 6px; margin: 4px 0 2px; }
.st5 button.s5-z { cursor: pointer; }
.st5 .s5-z .link { padding: 0; }
.st-geltend5 { display: grid; gap: 2px; }
.st5-eck .klein-b { font-size: 12.5px; white-space: normal; }
.st5-h { font-size: 13px; }
.st5-h .st-off-l { margin: 4px 0 0; }
.st5-mehr > summary { cursor: pointer; color: var(--accent); font-size: 13px; }
.st5-mehr[open] > summary { margin-bottom: 6px; }
.st5-liste { gap: 8px; }
.st5-liste .st-leiste { margin: 0; }
@media (max-width: 640px) { .st5 .st-jahre { flex-wrap: wrap; } }
/* Übersicht: der normale Monat als Blöcke */
.nm { gap: 6px; }
.nm .nm-z { grid-template-columns: minmax(0, 1fr) auto; }
.nm .vg-k { padding-top: 7px; padding-bottom: 7px; }
.nm .vg-z { padding-top: 5px; padding-bottom: 5px; }
.nm-w { text-align: right; white-space: nowrap; }
.nm .vg-k .nm-w { font-size: 15px; }
.nm .vg-z .nm-w { font-weight: 600; }
@media (max-width: 900px), (max-height: 500px) {
  .ue { height: auto !important; min-height: 0 !important; grid-template-rows: none !important; }
}

/* API-Schlüssel verdeckt anzeigen, ohne echtes Passwortfeld (sonst bieten Browser beim Suchen gespeicherte Passwörter an) */
.geheim { -webkit-text-security: disc; text-security: disc; font-family: var(--font); }

/* Steuer: offizielle Unterlagen */
.st-off { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 12px 16px; margin: 0 0 14px; display: grid; gap: 10px; }
.st-off > summary { cursor: pointer; font-size: 14.5px; list-style: none; }
.st-off > summary::-webkit-details-marker { display: none; }
.st-off > summary::before { content: "▸ "; color: var(--muted); }
.st-off[open] > summary::before { content: "▾ "; }
.st-off-kopf { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.st-off-kopf > div { display: grid; gap: 2px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); }
.st-off-kopf span { font-size: 12px; color: var(--muted); }
.st-off-kopf b { font-size: 18px; font-weight: 700; }
.st-off-kopf b.klein-b { font-size: 13.5px; font-weight: 600; }
.st-off-t { width: 100%; border-collapse: collapse; font-size: 13px; }
.st-off-t td { padding: 4px 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
.st-off-t td.r { text-align: right; white-space: nowrap; font-weight: 600; }
.st-off-t td.muted { font-size: 12px; }
.st-off-t tr.sum td { font-weight: 700; border-top: 1.5px solid var(--border-strong); }
.st-off-h b { font-size: 13px; }
.st-off-l { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; color: var(--text-2); }
.st-offiz { font-size: 12px; color: #5442b8; }
:root[data-theme="dark"] .st-offiz { color: #a99cf2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .st-offiz { color: #a99cf2; } }
.st-offmarke { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; background: #6d5bd0; border-radius: 2px; }
.st-offmarke-i { display: inline-block; width: 3px; height: 11px; background: #6d5bd0; border-radius: 2px; vertical-align: -1px; }
@media (max-width: 640px) { .st-off-t td.muted { display: none; } }
/* Freie Fläche: Zusatzinhalte, die nur gezeigt werden, wenn sie hineinpassen */
.fuell-aus { display: none !important; }
.s5-karte > .s5-teil[data-fuell], .s5-karte > [data-fuell] { margin-top: 6px; }
.mj { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; align-items: end; height: 96px; }
.mj-s { display: grid; grid-template-rows: auto 1fr auto; height: 100%; gap: 2px; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.mj-b { display: flex; flex-direction: column-reverse; justify-content: flex-start; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.mj-b i { display: block; background: var(--fest); }
.mj-b i.mj-x { background: #7a5af5; }
.mj-s:hover .mj-b { outline: 2px solid var(--accent); }
.mj-m { font-size: 10.5px; color: var(--muted); text-align: center; }
.bw-z .nt-n { font-size: 13px; }
.st5-vgl th.an, .st5-vgl td.an { background: var(--accent-soft); }
.st5-vgl th .link { padding: 0; font-size: 12px; font-weight: 700; }
.st5-vgl tr.st5-erg td { border-top: 1.5px solid var(--border-strong); }
.st5-gz { cursor: default; }
.st5-gz:hover { background: none; }

.bw-z::before, .bw-z::after, .st5-gz::before, .st5-gz::after { display: none; }
.bw-z, .st5-gz { padding-left: 4px; border-bottom: 1px solid var(--border); border-radius: 0; }
.s5-dl dd small.inl { display: inline; margin-left: 6px; }
.mj-w { font-size: 9.5px; color: var(--text-2); text-align: center; white-space: nowrap; min-height: 12px; }
.mj-b { justify-content: flex-start; }

/* ===== Gehaltsentwicklung ===== */
:root { --g-steuer: #d4572b; --g-bav: #2463d6; --g-rv: #7ea4ea; --g-kv: #2f9fb2; --g-auto: #d39a12; --g-sach: #9085e9; --g-sonst: #98a2b3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --g-steuer: #ec7442; --g-bav: #5b93f0; --g-rv: #9dbcf5; --g-kv: #3cb7cb; --g-auto: #e0ad35; --g-sach: #a79ef0; --g-sonst: #7d8696; } }
:root[data-theme="dark"] { --g-steuer: #ec7442; --g-bav: #5b93f0; --g-rv: #9dbcf5; --g-kv: #3cb7cb; --g-auto: #e0ad35; --g-sach: #a79ef0; --g-sonst: #7d8696; }
.ge-wahl { display: flex; align-items: center; gap: 8px; }
.ge-wahl select { height: 34px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--surface); font-size: 14px; }
.ge-fehlt { display: block; margin-top: 4px; color: var(--aus-text); font-weight: 600; font-size: 14px; }
.ge-text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.ge-text b { color: var(--text); }
.ge-text b.pos, .ge-bz b.pos, .ge-jd.pos { color: var(--ein-text); }
.ge-text b.neg, .ge-bz b.neg, .ge-jd.neg, .ge5 .neg { color: var(--aus-text); }
/* 100 Kästchen = 100 % */
.ge-waffel { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; }
.ge-waffel i { aspect-ratio: 1; border-radius: 3px; }
.ge-legende { display: grid; }
.ge-jfluss { display: grid; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--border-strong); }
.ge-jfluss h3 { margin: 0; font-size: 13.5px; font-weight: 700; }
.ge-jfluss .s5-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.ge-jfluss .s5-dl > div { padding: 3px 0; border-bottom: 1px solid var(--border); }
.ge-jfluss .s5-dl dt { font-size: 12.5px; }
.ge-jfluss .s5-dl dd { font-size: 13px; }
.ge-lg { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 36px; gap: 8px; align-items: center; font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.ge-lg:last-child { border-bottom: 0; }
.ge-lg > i { width: 12px; height: 12px; border-radius: 3px; }
.ge-lg small { display: block; font-size: 11.5px; color: var(--muted); }
.ge-lg b { white-space: nowrap; }
.ge-lg > span:last-child { text-align: right; font-size: 12px; }
/* Warum die Auszahlung anders ist */
.ge-bruecke { gap: 8px; }
.ge-br { display: grid; }
.ge-bz { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(50px, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.ge-bz b { white-space: nowrap; text-align: right; }
.ge-bsum { font-weight: 700; }
.ge-bsum:last-child { border-bottom: 0; border-top: 1.5px solid var(--border-strong); }
.ge-bb { position: relative; height: 12px; }
.ge-bb::before { content: ''; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px; background: var(--border-strong); }
.ge-bb i { position: absolute; top: 0; bottom: 0; min-width: 2px; }
.ge-bb i.plus { left: 50%; background: var(--ein); border-radius: 0 4px 4px 0; }
.ge-bb i.minus { right: 50%; background: var(--aus); border-radius: 4px 0 0 4px; }
.ge-chronik { display: grid; margin-top: 4px; }
.ge-chronik h3 { margin: 0 0 2px; font-size: 13.5px; font-weight: 700; }
.ge-cz { display: grid; grid-template-columns: 52px minmax(0, 1fr) 62px 72px; gap: 8px; align-items: baseline; padding: 4px 2px; border: 0; border-bottom: 1px solid var(--border); background: none; font: inherit; font-size: 12.5px; color: inherit; text-align: left; cursor: pointer; }
.ge-cz:hover { background: var(--surface-2); }
.ge-cz.an { background: var(--accent-soft); }
.ge-cz > span.muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ge-cz b { text-align: right; white-space: nowrap; }
.ge-cz b.pos { color: var(--ein-text); }
.ge-cz b.neg { color: var(--aus-text); }
.ge-rechner { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--border-strong); display: grid; gap: 6px; }
.ge-rechner h3 { margin: 0; font-size: 13.5px; font-weight: 700; }
.ge-regler { display: grid; grid-template-columns: auto minmax(80px, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; color: var(--text-2); }
.ge-regler input { width: 100%; accent-color: var(--accent); }
.ge-regler b { color: var(--text); min-width: 58px; text-align: right; }
.ge-regler span small { display: block; font-size: 11px; color: var(--muted); }
/* Betriebsrente */
.ge-bav { display: flex; height: 44px; border-radius: 8px; overflow: hidden; gap: 2px; }
.ge-bav i { display: flex; flex-direction: column; justify-content: center; padding: 0 8px; color: #fff; min-width: 0; font-style: normal; overflow: hidden; }
.ge-bav span { font-size: 11px; line-height: 1.15; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ge-bav b { font-size: 13px; line-height: 1.2; white-space: nowrap; }
.ge-bav .du { background: var(--g-bav); }
.ge-bav .fa { background: var(--ein); }
.ge-bav .ag { background: var(--g-kv); }
.ge5 .s5-dl dd.neg { color: var(--aus-text); }
.ge-autoerg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ge-autoerg > div { background: var(--surface-2); border-radius: 9px; padding: 8px 10px; display: grid; gap: 1px; }
.ge-autoerg span { font-size: 12px; color: var(--muted); font-weight: 600; }
.ge-autoerg b { font-size: 19px; }
.ge-autoerg b.neg { color: var(--aus-text); }
.ge-autoerg small { font-size: 11px; color: var(--muted); }
.ge-autoregler { display: grid; gap: 8px; }
.ge-schnell { display: flex; flex-wrap: wrap; gap: 6px; }
.ge-schnell .chip.an { background: var(--accent-soft); border-color: var(--accent); }
.ge-satz button { padding: 4px 10px; font-size: 13px; }
.ge-autok .link { padding: 0; font-size: inherit; }
/* Gehaltsentwicklung (Grafik) */
.ge-chart { height: 330px; }
.ge-erhs { display: flex; flex-wrap: wrap; gap: 6px 8px; font-size: 12.5px; align-items: center; }
.ge-erh { padding: 2px 9px; border-radius: 999px; background: var(--surface-2); white-space: nowrap; }
.ge-erh b { color: var(--ein-text); }
.ge-erh.wechsel { box-shadow: inset 0 0 0 1px var(--border-strong); }
/* Jeder Monat auf einen Blick */
.ge-heat { display: grid; grid-template-columns: 40px repeat(12, minmax(0, 1fr)) 78px; gap: 4px; align-items: center; font-size: 12px; }
.ge-hk { text-align: center; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.ge-hk.r, .ge-hs { text-align: right; }
.ge-hj { font-weight: 700; }
.ge-hs { font-size: 12.5px; white-space: nowrap; }
.ge-hz { height: 32px; border-radius: 6px; border: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ein) var(--x, 10%), var(--surface-2)); color: var(--text); font: inherit; font-size: 11.5px; font-weight: 600; padding: 0; min-width: 0; overflow: hidden; white-space: nowrap; }
button.ge-hz { cursor: pointer; }
button.ge-hz:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
.ge-hz.dunkel { color: #fff; }
.ge-hz.an { outline: 2.5px solid var(--text); outline-offset: 1px; }
.ge-hz.leer { background: transparent; }
.ge-hz.plan { background-image: repeating-linear-gradient(135deg, rgba(128, 128, 128, .28) 0 2px, transparent 2px 6px); color: var(--text-2); cursor: default; }
.ge-hz.fehlt { background: var(--surface); color: var(--aus-text); box-shadow: inset 0 0 0 1.5px var(--aus-text); font-weight: 800; }
.ge-hz .kurz { display: none; }
/* Jahr für Jahr */
.ge-jahre { display: grid; }
.ge-jz { display: grid; grid-template-columns: 58px minmax(40px, 1fr) auto 50px; gap: 10px; align-items: center; padding: 6px 4px; border: 0; border-bottom: 1px solid var(--border); background: none; font: inherit; font-size: 13.5px; color: inherit; text-align: left; cursor: pointer; width: 100%; }
.ge-jz:last-child { border-bottom: 0; }
.ge-jz:hover { background: var(--surface-2); }
.ge-jj { font-weight: 700; }
.ge-jj small { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
.ge-jb { position: relative; height: 14px; border-radius: 5px; background: var(--surface-2); }
.ge-jb i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; }
.ge-jb i.b { background: color-mix(in srgb, var(--accent) 28%, var(--surface-2)); }
.ge-jb i.k { background: var(--ein); }
.ge-jz > b { text-align: right; white-space: nowrap; }
.ge-jz > b small { display: block; font-weight: 400; font-size: 11.5px; color: var(--muted); }
.ge-jd { text-align: right; font-size: 12.5px; white-space: nowrap; }
/* Rente */
.ge-rbalken { display: flex; height: 46px; border-radius: 8px; overflow: hidden; gap: 2px; }
.ge-rbalken i { display: flex; flex-direction: column; justify-content: center; padding: 0 9px; color: #fff; min-width: 0; font-style: normal; overflow: hidden; }
.ge-rbalken span { font-size: 11px; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ge-rbalken b { font-size: 14px; white-space: nowrap; }
.ge-rvgl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ge-rvgl > div { background: var(--surface-2); border-radius: 9px; padding: 8px 10px; display: grid; gap: 1px; }
.ge-rvgl span { font-size: 12px; color: var(--muted); font-weight: 600; }
.ge-rvgl b { font-size: 18px; }
.ge-rvgl b.pos { color: var(--ein-text); } .ge-rvgl b.neg { color: var(--aus-text); }
.ge-rvgl small { font-size: 11px; color: var(--muted); }
.ge-annahmen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; padding-top: 8px; border-top: 1px dashed var(--border-strong); }
.ge-check { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-2); }
.ge-check input { accent-color: var(--accent); }
.ge-rzus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.ge-rteil h3 { margin: 0 0 2px; font-size: 13.5px; font-weight: 700; }
.ge-rteil dt small { display: block; font-size: 11px; color: var(--muted); }
.ge-gp { display: grid; grid-template-columns: 70px minmax(0, 1fr) 70px; gap: 8px; align-items: center; font-size: 12.5px; margin: 4px 0; }
.ge-gp i { height: 14px; border-radius: 4px; background: var(--g-rv); }
.ge-gp i.p { background: repeating-linear-gradient(135deg, var(--g-bav) 0 4px, color-mix(in srgb, var(--g-bav) 55%, var(--surface)) 4px 8px); }
.ge-gp b { text-align: right; }
@media (max-width: 700px) { .ge-rzus { grid-template-columns: minmax(0, 1fr); } }
.ge-rliste { display: grid; }
.ge-rz { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 6px 2px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.ge-rz > i { width: 10px; height: 26px; border-radius: 3px; }
.ge-rz small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; }
.ge-rz > b { text-align: right; white-space: nowrap; }
.ge-rsum { border-bottom: 0; border-top: 1.5px solid var(--border-strong); font-weight: 700; }
.ge-rh { margin: -2px 0 4px 19px; font-size: 11.5px; color: var(--text-2); line-height: 1.4; }
@media (max-width: 700px) {
  .ge-rvgl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ge-annahmen { grid-template-columns: minmax(0, 1fr); }
}
/* Versorgungsausgleich */
.ge-vat td small { display: block; font-size: 11px; color: var(--muted); }
.ge-vat td.neg { color: var(--aus-text); } .ge-vat td.pos { color: var(--ein-text); }
.ge-vat .ge-sum td { font-weight: 700; border-top: 1.5px solid var(--border-strong); }
@media (max-width: 700px) { .ge-vat { font-size: 12px; } .ge-vat td, .ge-vat th { padding: 4px 3px; } .ge-vat td small { display: none; } }
/* Brutto, Abgaben, Netto – Jahr für Jahr */
.ge-yleg { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--text-2); }
.ge-yleg span { display: inline-flex; align-items: center; gap: 5px; }
.ge-yleg i { width: 11px; height: 11px; border-radius: 3px; }
.ge-ytab { display: grid; }
.ge-yt { display: grid; grid-template-columns: 92px minmax(80px, 1fr) 96px 78px 78px 104px; gap: 12px; align-items: center; padding: 7px 4px; border: 0; border-bottom: 1px solid var(--border); background: none; font: inherit; font-size: 13.5px; color: inherit; text-align: left; width: 100%; cursor: pointer; }
.ge-yt:last-child { border-bottom: 0; }
.ge-yt:hover { background: var(--surface-2); }
.ge-ykopf { cursor: default; font-size: 11.5px; font-weight: 600; color: var(--muted); padding-top: 0; }
.ge-ykopf:hover { background: none; }
.ge-ykopf span:nth-child(n+3) { text-align: right; }
.ge-yj { font-weight: 700; }
.ge-yj small, .ge-yw small { display: block; font-weight: 400; font-size: 11px; color: var(--muted); }
.ge-yb { display: flex; height: 18px; border-radius: 5px; overflow: hidden; gap: 1px; background: var(--surface-2); }
.ge-yb i { min-width: 1px; }
.ge-yw { text-align: right; white-space: nowrap; }
.ge-yw.neg b { color: var(--aus-text); }
.ge-yw.pos b { color: var(--ein-text); }
@media (max-width: 700px) {
  .ge-yt { grid-template-columns: 58px minmax(40px, 1fr) 62px 62px; gap: 8px; }
  .ge-yt > span:nth-child(3), .ge-yt > span:nth-child(6) { display: none; }
  .ge-yj small { display: none; }
}
/* Abrechnung heute und künftig */
.ge-zt td:first-child { color: var(--text-2); }
.ge-zt td small, .ge-zt th small { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
.ge-zt td small.pos { color: var(--ein-text); font-weight: 600; }
.ge-zt td small.neg { color: var(--aus-text); font-weight: 600; }
.ge-zt .ge-sum td { font-weight: 700; border-top: 1.5px solid var(--border-strong); }
.ge-zt .kurz { display: none; }
@media (max-width: 700px) {
  .ge-zt { font-size: 12px; }
  .ge-zt td, .ge-zt th { padding: 4px 3px; }
  .ge-zt .lang, .ge-zt th small, .ge-zt td:first-child small { display: none; }
  .ge-zt .kurz { display: inline; }
  .ge-zt td:first-child { white-space: normal; }
  .ge-zt td.r small { white-space: normal; }
  .ge-zt td:first-child { hyphens: auto; overflow-wrap: anywhere; }
}
@media (max-width: 420px) {
  .ge-zt { font-size: 11px; }
  .ge-zt td, .ge-zt th { padding: 3px 2px; }
}
/* Abgleich mit den Jahresbescheinigungen */
.ge-bel td small { display: block; font-size: 11px; color: var(--muted); }
.ge-bel td.pos { color: var(--ein-text); font-weight: 600; }
.ge-bel td.ge-abw, .ge-meld .ge-abw { color: #b7791f; font-weight: 600; }
.ge-bel td.ge-erkl { color: var(--ein-text); font-weight: 600; }
.ge-bel td.ge-erkl small { font-weight: 400; }
.ge-tun { margin-top: 10px; font-size: 13.5px; }
.ge-tun summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.ge-tun ol { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; line-height: 1.4; }
.ge-bel-h { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 14px 0 6px; }
.ge-meld { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
.ge-meld li { display: grid; grid-template-columns: 190px minmax(0, 1fr) 90px 120px; gap: 10px; align-items: baseline; border-bottom: 1px solid var(--border); padding: 3px 0; }
.ge-meld li b { text-align: right; font-variant-numeric: tabular-nums; }
.ge-meld .pos { color: var(--ein-text); font-weight: 600; }
@media (max-width: 700px) { .ge-meld li { grid-template-columns: minmax(0, 1fr) auto; } .ge-meld li > span.muted { grid-column: 1 / -1; } .ge-bel { font-size: 12px; } }
/* Abgleich am Handy: je Jahr ein Block, Spaltenname vor jedem Wert – kein seitliches Scrollen */
@media (max-width: 700px) {
  .ge-bel, .ge-bel tbody, .ge-bel tr, .ge-bel td { display: block; width: 100%; }
  .ge-bel thead { display: none; }
  .ge-bel tr { padding: 6px 0; border-bottom: 1px solid var(--border); }
  .ge-bel td { border: 0; padding: 3px 0; }
  .ge-bel td[data-l] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; text-align: right; }
  .ge-bel td[data-l]::before { content: attr(data-l); text-align: left; color: var(--muted); font-weight: 400; }
}
/* Alle Daten der Abrechnungen */
.ge-tab td:first-child { color: var(--text-2); white-space: nowrap; }
.ge-tab td.ge-txt { white-space: normal; font-size: 12px; line-height: 1.3; }
.ge-tab td, .ge-tab th { padding: 4px 8px; }
.ge-tab th small { display: block; font-weight: 400; font-size: 10.5px; color: var(--muted); }
.ge-tab .ge-th th { padding-top: 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--border); }
.ge-tab .ge-sum td { font-weight: 700; color: var(--text); border-top: 1.5px solid var(--border-strong); }
.ge-tab td.neg { color: var(--aus-text); }
.ge-tab td.ge-ber:not(.neg) { color: var(--text-2); }
.ge-tab td.ge-ber sup, .s5-erkl sup { font-size: 9px; color: var(--accent); font-weight: 700; margin-left: 2px; }
.ge-tab .ge-js { background: var(--surface-2); color: var(--text-2); }
.ge-mk { border: 0; background: none; font: inherit; font-weight: 650; color: var(--accent); cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.ge-mk.an { background: var(--accent-soft); color: var(--text); }
.ge-mk small { display: block; font-weight: 400; font-size: 10.5px; color: var(--muted); }
.ge-tfilter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.ge-tfilter select { font: inherit; font-size: 14px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.ge-tjahr { display: inline-flex; gap: 4px; align-items: center; }
.ge-tfilter #ge-excel { margin-left: auto; }
.ge-tab th.ge-leer { font-weight: 500; }
.ge-tab td.ge-leer { background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--border) 45%, transparent) 6px 7px); }
.ge-tab.ohne-cent td.r { padding-left: 4px; padding-right: 5px; }
@media (max-width: 900px) {
  .ge-chart { height: 270px; }
  .ge-wahl { width: 100%; }
}
@media (max-width: 700px) {
  .ge-heat { grid-template-columns: 30px repeat(12, minmax(0, 1fr)); gap: 2px; font-size: 11px; }
  .ge-hs, .ge-hk.r { display: none; }
  .ge-hz { height: 26px; font-size: 9.5px; border-radius: 4px; }
  .ge-hz .lang { display: none; }
  .ge-hz .kurz { display: inline; }
  .ge-hk { font-size: 9.5px; }
  .ge-tab { font-size: 12.5px; }
  .ge-tab td:first-child { white-space: normal; }
  .ge-tab td, .ge-tab th { padding: 4px 4px; }
  .ge-tab td:first-child, .ge-tab td.ge-txt { hyphens: auto; overflow-wrap: anywhere; }
  .ge-tteil { flex: 1 1 100%; } .ge-tteil button { flex: 1; padding: 5px 4px; font-size: 13px; }
}

/* Kategorien prüfen (js/pruefen.js): eine Zeile je Buchung */
.pr-zahl { font-size: 11px; font-weight: 700; background: var(--aus-text); color: #fff; border-radius: 9px; padding: 1px 6px; margin-left: 3px; }
.pc-leiste { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 10px; }
.pc-fort { width: 160px; height: 8px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.pc-fort i { display: block; height: 100%; background: var(--ein); }
.pc-leiste input, .pc-leiste select, .pc-a select { font: inherit; font-size: 14px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.pc-leiste input { width: 180px; }
.pc-speicher { margin-left: auto; }
.pc-liste { display: grid; }
.pc { display: grid; grid-template-columns: 96px minmax(0, 1fr) 110px minmax(240px, 300px); gap: 6px 14px; align-items: start; padding: 12px 4px; border-bottom: 1px solid var(--border); }
.pc.fertig { background: color-mix(in srgb, var(--ein) 5%, transparent); }
.pc-l { display: grid; font-size: 13.5px; }
.pc-l small, .pc-m small { color: var(--muted); font-size: 12px; }
.pc-m { display: grid; gap: 2px; min-width: 0; }
.pc-m b { font-size: 15px; overflow-wrap: anywhere; }
.pc-z { font-size: 14px; color: var(--text-2); overflow-wrap: anywhere; line-height: 1.35; }
.pc-m small { overflow-wrap: anywhere; }
.pc-m .link { justify-self: start; text-align: left; }
.pc-b { text-align: right; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-b.neg { color: var(--aus-text); } .pc-b.pos { color: var(--ein-text); }
.pc-a { display: grid; gap: 5px; }
.pc-a select { width: 100%; }
.pc-ok { text-align: left; white-space: normal; }
.pc-grund { color: var(--muted); font-size: 12px; margin-top: -3px; }
.pc-umb { justify-self: start; font-size: 13px; }
.pc-alle { display: flex; gap: 6px; align-items: baseline; font-size: 12.5px; color: var(--text-2); }
.pc-ist { font-weight: 600; color: var(--ein-text); }
@media (max-width: 900px) {
  .pc { grid-template-columns: minmax(0, 1fr) auto; }
  .pc-l { grid-column: 1; grid-row: 1; display: flex; gap: 8px; align-items: baseline; }
  .pc-b { grid-column: 2; grid-row: 1; }
  .pc-m { grid-column: 1 / -1; }
  .pc-a { grid-column: 1 / -1; }
  .pc-leiste input { flex: 1; width: auto; min-width: 120px; }
  .pc-speicher { margin-left: 0; }
}

/* Minuswerte überall rot (Klasse setzt minusRot() in app.js; eigener Name, damit Balkenklassen wie i.minus erhalten bleiben) */
.ist-minus, .ist-minus * { color: var(--aus-text) !important; }
.btn.primary .ist-minus { color: inherit !important; }
.pc-bereich button small { font-size: 11px; color: var(--muted); margin-left: 3px; }
.pc-links { font-size: 13px; }

/* Einlesen: Fortschritt unten */
.einlesen-balken { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 60; width: min(560px, calc(100vw - 24px));
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 12px 14px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border-strong); box-shadow: 0 8px 28px rgba(0, 0, 0, .18); font-size: 14px; }
.einlesen-balken[hidden] { display: none; }
.einlesen-balken > div:first-child { display: grid; gap: 2px; }
.einlesen-balken .klein { color: var(--muted); }
.einlesen-balken .eb-fort { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.einlesen-balken .eb-fort i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 1s linear; }
.einlesen-balken .eb-zeit { grid-column: 2; grid-row: 1; font-variant-numeric: tabular-nums; font-weight: 700; }
@media (max-width: 900px) { .einlesen-balken { bottom: 76px; } }

/* pruefen */
/* Entscheidungen ohne Buchung (Bereich Erledigt) */
.pc-leer { margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); font-size: 13.5px; }
.pc-leer summary { cursor: pointer; font-weight: 600; }
.pc-leer p { margin: 6px 0; }
.pc-leer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pc-leer li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; justify-content: space-between; min-width: 0; }
.pc-leer li > span { min-width: 0; overflow-wrap: anywhere; }
.pc-leer .neg { color: var(--aus-text); } .pc-leer .pos { color: var(--ein-text); }
.pc-leer-link { font-size: 12.5px; }

/* gehalt */
:root { --g-vor: #a0785a; --g-korr: #6b7a99; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --g-vor: #c49d7c; --g-korr: #93a1bf; } }
:root[data-theme="dark"] { --g-vor: #c49d7c; --g-korr: #93a1bf; }
.ge-hinweis { display: block; margin-top: 4px; font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.ge-fehlt { overflow-wrap: anywhere; }
.ge-lg > i.ge-lg-minus { box-sizing: border-box; background: none; border: 2px dashed; }
.ge-lg b.neg { color: var(--aus-text); }
.ge-bav-luecke { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); font-size: 13px; line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; }
.ge-bav-luecke b { color: var(--text); }
.ge-tab td.ge-hw { color: var(--accent); cursor: help; font-size: 14px; }
.ge-tab td.ge-abw { color: #b7791f; font-weight: 600; cursor: help; }

/* steuer */
/* Prüfmodus: letzte Entscheidung mit „Rückgängig“ (die Leiste unten liegt hinter dem Fenster) */
.st-dlg-rueck { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 8px 18px; background: var(--surface-2); border-bottom: 1px solid var(--border); color: var(--text-2); }
.st-dlg-rueck span { min-width: 0; overflow-wrap: anywhere; }
.st-dlg-haupt .st-dlg-rueck { margin: 0 0 12px; padding: 8px 10px; border: 0; border-radius: 8px; }
.st-dlg-haupt > .st-dlg-knoepfe { margin-top: 12px; }
/* Prüfmodus am Handy: Auswahl „Steuerposten“ und Knöpfe bleiben in der Fensterbreite (kein seitliches Scrollen) */
.st-dlg-fuss > * { min-width: 0; }
.st-dlg-fuss label { display: flex; align-items: center; gap: 8px; }
.st-dlg-fuss label select { flex: 1; min-width: 0; margin-left: 0; }