/* ============================================================
   Fixum – Stylesheet (Banking-Look)
   Schriften: IBM Plex Sans / IBM Plex Mono (Google Fonts)
   ============================================================ */

:root{
  --accent:#0f766e;
  --accent-soft:#2dd4bf;
  --bg:#f5f7f8;
  --card:#ffffff;
  --border:#e6eaee;
  --line:#f1f4f6;
  --text:#0f172a;
  --muted:#64748b;
  --faint:#94a3b8;
  --sb-bg:#0c2826;
  --sb-border:rgba(255,255,255,.07);
  --sb-text:#a7c0bc;
  --sb-sub:#7d9b97;
  --radius:14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;
  font-size:15px;line-height:1.45;color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
svg.lucide{width:1.1em;height:1.1em;stroke-width:1.75;vertical-align:middle;display:block}
i[data-lucide]{display:inline-flex;align-items:center;justify-content:center}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#d4dade;border-radius:6px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#bcc4ca;background-clip:content-box}

/* ---------- App-Layout ---------- */
.app{display:flex;height:100vh;overflow:hidden}

/* ---------- Sidebar ---------- */
.sidebar{width:258px;flex:none;display:flex;flex-direction:column;padding:22px 16px;background:var(--sb-bg);border-right:1px solid var(--sb-border)}
.brand{display:flex;align-items:center;gap:11px;padding:6px 10px 22px}
.brand-mark{width:34px;height:34px;border-radius:9px;background:var(--accent);display:flex;align-items:center;justify-content:center;flex:none;color:#fff;font-size:18px}
.brand-name{font-size:17px;font-weight:700;letter-spacing:-.02em;color:#fff;line-height:1.1}
.brand-ver{font-size:10px;font-weight:500;color:var(--sb-sub);opacity:.85;font-family:'IBM Plex Mono',ui-monospace,monospace;margin-top:2px}
.nav{display:flex;flex-direction:column;gap:3px;margin-top:6px}
.nav-item{position:relative;width:100%;display:flex;align-items:center;gap:12px;padding:11px 14px 11px 16px;border:none;border-radius:10px;background:transparent;color:var(--sb-text);font-size:14.5px;font-weight:500;cursor:pointer;text-align:left;transition:background .15s}
.nav-item:hover{background:rgba(255,255,255,.05)}
.nav-item .ico{font-size:18px}
.nav-item .lbl{flex:1}
.nav-item.active{background:rgba(45,212,191,.18);color:#fff}
.nav-item.active::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--accent-soft)}
.nav-badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:#fff;font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:14px}
.side-search{display:none}
.side-card{padding:16px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--sb-border)}
.side-card .k{font-size:12px;font-weight:600;color:var(--sb-sub);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.side-card .v{font-size:22px;font-weight:700;letter-spacing:-.02em;color:#fff}
.side-card .s{font-size:12.5px;color:var(--sb-sub);margin-top:2px}
.side-activity{padding:14px}
.side-activity-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.side-activity-empty{font-size:12.5px;color:var(--sb-sub);padding:4px 0 6px}
.side-activity-list{display:flex;flex-direction:column;gap:2px;margin:0 -8px}
.side-activity-row{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;text-decoration:none;transition:background .12s}
.side-activity-row:hover{background:rgba(255,255,255,.05)}
.side-activity-row .ico{width:14px;height:14px;flex:none}
.side-activity-txt{min-width:0;flex:1}
.side-activity-row .t{font-size:12.5px;font-weight:600;color:var(--sb-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-activity-row.is-unread .t{color:#fff}
.side-activity-row .ts{font-size:11px;color:var(--sb-sub);margin-top:1px}
.side-activity-row .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-soft);flex:none}
.side-activity-all{display:block;text-align:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--sb-border);font-size:12px;font-weight:600;color:var(--sb-sub);text-decoration:none}
.side-activity-all:hover{color:#fff}
.side-user{display:flex;align-items:center;gap:11px;padding:8px 8px 4px}
.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-soft));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:13.5px;flex:none}
.side-user .nm{font-size:13.5px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-user .rl{font-size:12px;color:var(--sb-sub)}
.side-user a{margin-left:auto;color:var(--sb-sub);font-size:18px;display:flex}
.side-user a:hover{color:#fff}

/* ---------- Main / Topbar ---------- */
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{flex:none;height:74px;display:flex;align-items:center;gap:18px;padding:0 32px;background:#fff;border-bottom:1px solid var(--border)}
.topbar h1{margin:0;font-size:20px;font-weight:700;letter-spacing:-.02em}
.topbar .sub{font-size:13px;color:var(--muted)}
.topbar .right{margin-left:auto;display:flex;align-items:center;gap:12px;min-width:0}
.topbar .right>*{white-space:nowrap;flex-shrink:0}
/* Bei wenig Platz gibt das Suchfeld nach – nicht die Buttons, nicht der Titel. */
.topbar .right>.search{flex:0 1 260px;width:auto;min-width:150px}
.topbar>div:first-child{flex:0 1 auto;min-width:190px}
@media (max-width:1200px){
  .topbar .right .js-new span,.topbar .right label.btn-secondary span{display:none}
  .topbar .right .js-new{padding:0 13px}
  .topbar .right label.btn-secondary{padding:6px 10px!important}
  .topbar .search .search-spotlight-hint{display:none}
}
.search{display:flex;align-items:center;gap:9px;width:260px;height:42px;padding:0 14px;background:#f3f5f7;border:1px solid var(--border);border-radius:10px}
.search i{color:var(--faint);font-size:17px}
.search input{flex:1;border:none;background:transparent;font-size:14px;color:var(--text);min-width:0;outline:none}
.icon-btn{position:relative;width:42px;height:42px;border-radius:10px;border:1px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#475569;font-size:18px}
.icon-btn:hover{background:#f3f5f7}
.icon-btn .pip{position:absolute;top:9px;right:9px;width:8px;height:8px;border-radius:50%;background:#e11d48;border:2px solid #fff}
.fx-rate-btn{color:#0f766e;border-color:#99f6e4;background:#f0fdfa}
.fx-rate-btn:hover{background:#ccfbf1}
html.dark .fx-rate-btn{color:#5eead4;border-color:#115e59;background:rgba(94,234,212,.08)}
html.dark .fx-rate-btn:hover{background:rgba(94,234,212,.14)}
.btn-primary{height:42px;padding:0 18px;display:inline-flex;align-items:center;gap:8px;border:none;border-radius:10px;background:var(--accent);color:#fff;font-size:14.5px;font-weight:600;cursor:pointer;box-shadow:0 1px 2px rgba(15,118,110,.25)}
.btn-primary:hover{filter:brightness(.93)}
.btn-ghost{height:42px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:10px;background:#fff;color:#475569;font-size:14.5px;font-weight:600;cursor:pointer}
.btn-ghost:hover{background:#f3f5f7}

.content{flex:1;overflow-y:auto;padding:30px 32px 48px}
.wrap{max-width:1280px;margin:0 auto}
.wrap-stack{display:flex;flex-direction:column;gap:18px}
.wrap-stack>.two-col{margin-top:0}
.wrap-stack>.flash{margin-bottom:0}
.wrap-narrow{max-width:860px;margin:0 auto}

.flash{margin:0 auto 18px;max-width:1280px;background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;padding:12px 16px;border-radius:10px;font-size:14px;font-weight:500}

/* ---------- Karten / Panels ---------- */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 1px 2px rgba(16,24,40,.04)}
.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 1px 2px rgba(16,24,40,.04)}
.panel-pad{padding:18px 22px 22px}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}
.panel-head h2{margin:0;font-size:16px;font-weight:600}
.link-btn{border:none;background:transparent;color:var(--accent);font-size:13.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:5px}

/* ---------- Stat-Karten ---------- */
.grid-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.stat .k{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.stat .k i{font-size:16px}
.stat .v{font-size:30px;font-weight:700;letter-spacing:-.03em;margin-top:12px}
.stat .v.sm{font-size:22px;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .s{font-size:13px;color:var(--muted);margin-top:4px}

.two-col{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;margin-top:18px}

/* ---------- Anstehende Zahlungen ---------- */
.up-row{display:flex;align-items:center;gap:16px;padding:14px 22px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:background .15s}
.up-row:hover{background:var(--bg)}
.up-row:last-child{border-bottom:none}
.up-date{width:50px;height:52px;border-radius:10px;background:#f5f7f8;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none}
.up-date .d{font-size:18px;font-weight:700;line-height:1}
.up-date .m{font-size:11px;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.04em}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.up-row .nm{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-row .meta{font-size:12.5px;color:var(--faint)}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:20px;white-space:nowrap}
.up-amt{font-size:15px;font-weight:600;min-width:78px;text-align:right}

/* ---------- Balken (Kategorie) ---------- */
.bars{display:flex;flex-direction:column;gap:16px}
.bar-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.bar-name{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500}
.bar-name .sq{width:9px;height:9px;border-radius:3px}
.bar-val{display:flex;align-items:center;gap:8px}
.bar-val .a{font-size:13.5px;font-weight:600}
.bar-val .p{font-size:12px;color:var(--faint);min-width:34px;text-align:right}
.bar-track{height:7px;border-radius:4px;background:var(--line);overflow:hidden}
.bar-fill{height:100%;border-radius:4px}

/* ---------- Chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:20px;border:1px solid var(--border);background:#fff;color:#475569;font-size:13.5px;font-weight:500;cursor:pointer}
.filterbar{display:flex;flex-direction:column;gap:14px;margin-bottom:20px}
.filterbar .chips{width:100%}
.filter-controls{display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap}
.pm-filter{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:1px solid var(--border);border-radius:10px;background:#fff;flex:none}
.pm-filter i{color:var(--faint);font-size:16px;flex:none}
.pm-filter select{border:none;background:transparent;font-size:13.5px;font-weight:500;color:#475569;cursor:pointer;outline:none;max-width:200px}
.chip .c{font-size:12px;opacity:.7}
.chip.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---------- Tabelle ---------- */
.table{overflow:hidden}
.thead,.trow{display:grid;grid-template-columns:2.25fr .8fr .85fr .95fr .9fr 148px;gap:12px;align-items:center;padding:14px 24px}
.thead{padding:13px 24px;background:#fafbfc;border-bottom:1px solid var(--line);font-size:12px;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.05em}
.thead .r{text-align:right}
.sort-head{display:inline-flex;align-items:center;gap:5px;color:var(--faint);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;user-select:none}
.sort-head:hover{color:var(--muted)}
.sort-head.active{color:var(--accent)}
.sort-head.r{justify-content:flex-end;justify-self:end}
.sort-arrow{font-size:12px;line-height:1;min-width:8px}
.trow{border-bottom:1px solid var(--line);transition:background .12s}
.trow:hover{background:#fafbfc}
@keyframes sub-highlight {
  0% { background-color: rgba(15, 118, 110, 0.22); }
  100% { background-color: transparent; }
}
.trow:target {
  animation: sub-highlight 2.5s ease-out;
}
.sub-cell{display:flex;align-items:center;gap:13px;min-width:0}
.sub-ava{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none;font-weight:700;font-size:15px;overflow:hidden}
.sub-cell .nm{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub-cell .cat{display:flex;align-items:center;gap:6px;margin-top:1px;font-size:12.5px;color:var(--faint)}
.sub-cell .cat .dot{width:7px;height:7px}
.cell-muted{font-size:13.5px;color:#475569}
.cell-amt{font-size:15px;font-weight:600;text-align:right}
.accrued{display:flex;flex-direction:column}
.accrued .mono{font-size:14.5px;font-weight:600}
.accrued-sub{font-size:11.5px;color:var(--faint);margin-top:1px}
.cur-select{border:none;background:transparent;font-weight:600;color:var(--muted);cursor:pointer;outline:none;font-size:13.5px;max-width:84px}
.row-actions{display:flex;gap:2px;justify-content:flex-end;align-items:center}
.row-actions .act-btn{width:28px;height:28px;border-radius:6px}
.row-actions .act-btn i,.row-actions .act-btn svg{width:14px;height:14px}
.act-btn{width:34px;height:34px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--faint);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px}
.act-btn:hover{background:#f3f5f7;color:#475569}
.act-btn.danger:hover{background:#fef2f2;color:#e11d48;border-color:#fecaca}
.btn-ghost.danger{background:#fef2f2;color:#e11d48;border-color:#fecaca}
.btn-ghost.danger:hover{background:#fee2e2;color:#be123c;border-color:#fda4af}
.trow.paused{background:#fbfcfd}
.trow.paused .sub-ava,.trow.paused .cell-amt,.trow.paused .accrued,.trow.paused .cell-muted,.trow.paused .cat{opacity:.5}
.trow.paused .row-link{color:var(--muted)}
.trow.archived{background:#f8fafc}
.trow.archived .sub-ava,.trow.archived .cell-amt,.trow.archived .accrued,.trow.archived .cell-muted,.trow.archived .cat{opacity:.4}
.trow.archived .row-link{color:var(--muted)}
.pause-badge{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:2px 9px;border-radius:14px;background:#fef3c7;color:#b45309;font-size:11.5px;font-weight:600;vertical-align:middle}
.pause-badge i{font-size:13px}
.archive-badge{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:2px 9px;border-radius:14px;background:#f1f5f9;color:#475569;font-size:11.5px;font-weight:600;vertical-align:middle}
.archive-badge i{font-size:13px}
.once-badge{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:2px 9px;border-radius:14px;background:#eef2ff;color:#4f46e5;font-size:11.5px;font-weight:600;vertical-align:middle}
.once-badge i{font-size:13px}
.rep-once{font-weight:600}
.rep-once.active{background:#4f46e5;border-color:#4f46e5;color:#fff}
.rep-once-hint{margin-top:10px;font-size:12.5px;color:var(--muted);background:#eef2ff;border:1px solid #c7d2fe;border-radius:10px;padding:10px 12px}

/* ---------- Notiz ---------- */
.sub-notes{font-size:14px;color:#334155;line-height:1.6;white-space:pre-wrap}

/* ---------- Pivot-Builder ---------- */
.pivot-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;padding:18px 22px;border-bottom:1px solid var(--line)}
.pv-ctl{display:flex;flex-direction:column;gap:6px}
.pv-ctl label{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.pv-ctl select{height:40px;min-width:170px;padding:0 12px;border:1px solid #d8dee4;border-radius:9px;font-size:14px;background:#fff;color:var(--text);cursor:pointer}
.pv-ctl select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(15,118,110,.16);outline:none}
.pv-toggle{display:flex;align-items:center;gap:7px;font-size:13.5px;color:#475569;font-weight:500;height:40px;cursor:pointer}
.pivot-quick{display:flex;flex-wrap:wrap;gap:7px}
.pv-chip{height:30px;padding:0 12px;border:1px solid #d8dee4;border-radius:16px;background:#fff;color:#475569;font-size:12.5px;font-weight:600;cursor:pointer}
.pv-chip:hover{background:#f3f5f7;border-color:#cbd5e1}
.pivot-scroll{overflow-x:auto;padding:6px 6px 0}
.pivot-table{border-collapse:collapse;width:100%;font-size:13.5px}
.pivot-table th,.pivot-table td{padding:9px 14px;text-align:right;white-space:nowrap;border-bottom:1px solid #f1f4f6}
.pivot-table thead th{position:sticky;top:0;background:#fafbfc;color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;text-align:right;border-bottom:1px solid #eef1f4}
.pivot-table thead th.pv-corner{text-align:left}
.pivot-table th.pv-rowhead{text-align:left;font-weight:600;color:var(--text);background:#fff}
.pivot-table td.pv-empty{color:#cbd5e1}
.pivot-table td.pv-total,.pivot-table th.pv-total{font-weight:700;color:var(--text);background:#fafbfc}
.pivot-table tr.pv-foot th,.pivot-table tr.pv-foot td{background:#f3f5f7;font-weight:700;border-top:2px solid #e6eaee;border-bottom:none}
.pivot-table td.pv-grand{background:rgba(15,118,110,.12);color:var(--accent)}
.pivot-table tbody tr:hover td:not(.pv-total):not(.pv-grand){background:rgba(15,118,110,.05)}
.pivot-empty{padding:30px 22px;text-align:center;color:var(--faint);font-size:14px}

/* ---------- KI: Frag deine Abos / Sparpotenzial ---------- */
.ai-suggest{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}

/* ---------- KI: Vorbefüllung im Modal (PDF/Mail) ---------- */
.ki-badge{display:inline-flex;align-items:center;gap:5px;flex:none;font-size:11px;font-weight:700;letter-spacing:.04em;padding:4px 9px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#2dd4bf);color:#fff}
.ki-badge i{width:13px;height:13px}
.ai-prefill{border:1px solid rgba(15,118,110,.28);background:rgba(15,118,110,.045);border-radius:13px;padding:14px 16px;margin-bottom:20px}
.ai-prefill-head{display:flex;align-items:flex-start;gap:11px}
.ai-prefill-title{flex:1;min-width:0}
.ai-prefill-title .t{font-size:14.5px;font-weight:600}
.ai-prefill-title .d{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.45}
.ai-prefill-collapse{flex:none;width:30px;height:30px;border:none;background:transparent;color:var(--faint);cursor:pointer;border-radius:7px;display:flex;align-items:center;justify-content:center}
.ai-prefill-collapse:hover{background:rgba(15,118,110,.10);color:var(--accent)}
.ai-prefill-collapse i{width:18px;height:18px}
.ai-prefill-body{margin-top:13px}
.ai-tabs{display:flex;gap:7px;margin-bottom:12px}
.ai-tab{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border:1px solid #d8dee4;background:#fff;border-radius:9px;font-size:13.5px;font-weight:500;color:var(--muted);cursor:pointer}
.ai-tab i{width:15px;height:15px}
.ai-tab:hover{border-color:var(--accent);color:var(--accent)}
.ai-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.ai-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:22px 16px;border:1.5px dashed #b7c2c7;border-radius:11px;background:#fff;cursor:pointer;text-align:center;transition:border-color .15s,background .15s}
.ai-drop:hover,.ai-drop.drag{border-color:var(--accent);background:rgba(15,118,110,.05)}
.ai-drop.has-file{border-style:solid;border-color:var(--accent)}
.ai-drop i{width:26px;height:26px;color:var(--accent)}
.ai-drop-main{font-size:14px;font-weight:600;word-break:break-all}
.ai-drop-sub{font-size:12px;color:var(--faint)}
.ai-pane textarea{width:100%;padding:11px 13px;border:1px solid #d8dee4;border-radius:10px;font-size:14px;font-family:inherit;background:#fff;outline:none;resize:vertical;line-height:1.5}
.ai-pane textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(15,118,110,.16)}
.ai-go{margin-top:12px;height:44px}
.ai-go:disabled{opacity:.5;cursor:not-allowed}
.ai-go i{width:17px;height:17px}
.ai-prefill-status{margin-top:12px;padding:11px 13px;border-radius:10px;font-size:13.5px;line-height:1.5;display:flex;align-items:flex-start;gap:8px}
.ai-prefill-status i{width:16px;height:16px;flex:none;margin-top:2px}
.ai-prefill-status.loading{background:rgba(15,118,110,.08);color:var(--accent)}
.ai-prefill-status.ok{background:#ecfdf5;color:#047857}
.ai-prefill-status.err{background:#fef2f2;color:#b91c1c}
@keyframes ai-spin{to{transform:rotate(360deg)}}
.ai-prefill-status.loading i,.ai-go i[data-lucide=loader]{animation:ai-spin 1s linear infinite}
#ai-q {
  flex: 1;
  min-width: 240px;
  height: 46px;
  border: 1px solid #d8dee4;
  border-radius: 10px;
  padding: 0 14px;
  font-size: 14.5px;
  background: #fff;
  outline: none;
}
.ai-answer{margin-top:14px;padding:14px 18px;border-radius:11px;background:rgba(15,118,110,.06);border:1px solid rgba(15,118,110,.18);font-size:14.5px;line-height:1.55;color:var(--text)}
.ai-answer.loading{color:var(--muted);font-style:italic;white-space:pre-wrap}
.ai-answer.err{background:#fef2f2;border-color:#fecaca;color:#b91c1c;font-style:normal;white-space:pre-wrap}
.ai-answer p{margin:0 0 10px}
.ai-answer p:last-child{margin-bottom:0}
.ai-answer strong{font-weight:700;color:var(--text)}
.ai-answer ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.ai-answer li{position:relative;padding-left:20px;line-height:1.5}
.ai-answer li::before{content:"";position:absolute;left:4px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.ai-answer .ai-eur{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}

.leadtime{display:flex;flex-direction:column;gap:10px}
.leadtime-mode{height:46px;padding:0 12px;border:1px solid #d8dee4;border-radius:10px;font-size:14.5px;background:#fff;color:#0f172a;cursor:pointer;outline:none}
.leadtime-custom{display:flex;align-items:center;gap:10px}
.leadtime-custom input{width:110px;height:46px;padding:0 14px;border:1px solid #d8dee4;border-radius:10px;font-size:14.5px;background:#fff;outline:none;text-align:center}
.leadtime-custom input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(15,118,110,.16)}
.leadtime-suffix{font-size:14px;color:var(--muted)}
.top-list{display:flex;flex-direction:column}.top-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.top-row:last-child{border-bottom:none}
.top-rank{width:24px;font-size:15px;font-weight:700;color:var(--faint);text-align:center;flex:none}
.top-name{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-meta{font-size:12.5px;color:var(--faint)}
.table-foot{display:flex;align-items:center;justify-content:space-between;padding:15px 24px;background:#fafbfc}
.table-foot .sum{font-size:14px;color:var(--muted)}
.table-foot .sum b{font-size:16px;font-weight:700;color:var(--text)}
.empty{padding:48px 24px;text-align:center;color:var(--muted);font-size:14.5px}
/* ---------- Kalender ---------- */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.cal-nav{display:flex;align-items:center;gap:12px}
.cal-nav h2{margin:0;font-size:19px;font-weight:700;min-width:180px;text-align:center}
.cal-today{height:38px}
.cal-today.is-current{opacity:.5;pointer-events:none}
.cal-cell.is-today{position:relative;z-index:1;box-shadow:inset 0 0 0 2px var(--accent);border-radius:4px}
.cal-day.today{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:var(--accent);color:#fff;font-weight:700}
.cal-arrow{width:38px;height:38px;border-radius:9px;border:1px solid var(--border);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#475569;font-size:18px}
.cal-arrow:hover{background:#f3f5f7}
.cal-total{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:9px 16px}
.cal-total .l{font-size:13px;color:var(--muted)}
.cal-total .v{font-size:16px;font-weight:700}
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#fafbfc;border-bottom:1px solid var(--line)}
.cal-weekdays div{padding:11px 14px;font-size:12px;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.05em}
.cal-week{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--line)}
.cal-week:last-child{border-bottom:none}
.cal-cell{min-height:116px;padding:9px 10px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:5px;background:#fff}
.cal-cell.is-empty{background:#fafbfc}
.cal-cell.is-today{background:rgba(15,118,110,0.07)}
.cal-cell:last-child{border-right:none}
.cal-day{font-size:13px;font-weight:500}
.cal-event{display:flex;align-items:center;gap:6px;padding:3px 7px;border-radius:6px;min-width:0}
.cal-event .dot{width:6px;height:6px}
.cal-event .nm{font-size:11.5px;font-weight:500;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-more{font-size:11px;color:var(--faint);padding-left:2px}
.cal-cell.has-events{cursor:pointer}
.cal-cell.has-events:hover{background:rgba(15,118,110,0.05)}
.cal-cell.is-selected{position:relative;z-index:2;border-radius:4px}

.cal-day-details{margin:16px 22px 22px;padding:18px 20px;background:#fafbfc;border:1px solid var(--line);border-radius:12px}
.cal-day-details-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.cal-day-details-head h3{margin:0;font-size:15.5px;font-weight:700;color:var(--text)}
.cal-day-details-head span{font-size:16px;font-weight:700;color:#2563eb}
.cal-day-details-list{display:flex;flex-direction:column;gap:2px}
.cal-day-details-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:5px 12px;background:#fff;border:1px solid var(--line);border-radius:9px}
.cal-day-details-row .left{display:flex;align-items:center;gap:10px;min-width:0}
.cal-day-details-row .dot{width:9px;height:9px;border-radius:50%;flex:none}
.cal-day-details-row .nm{font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-day-details-row .right{display:flex;flex-direction:column;align-items:flex-end;flex:none}
.cal-day-details-row .amt{font-size:14px;font-weight:700;color:var(--text)}
.cal-day-details-row .amt-eur{font-size:11.5px;color:var(--muted);margin-top:1px}
.cal-day-details-row .my-share{font-size:11px;color:var(--muted);margin-top:1px}

/* ---------- Benachrichtigungen ---------- */
.notif{display:flex;gap:15px;padding:16px 22px;border-bottom:1px solid var(--line)}
.notif:last-child{border-bottom:none}
.notif-ico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none;font-size:19px}
.notif .t{font-size:14.5px;font-weight:600}
.notif .d{font-size:13.5px;color:var(--muted);margin-top:2px}
.notif .ts{font-size:12px;color:var(--faint);margin-top:6px}
.notif .unread{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none;margin-top:6px}
.notif form{margin-left:auto}
.notif-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.notif-actions form{margin-left:0}
.notif .mark{border:none;background:transparent;color:var(--faint);font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.notif .mark:hover{color:var(--accent)}
.notif .del{border:none;background:transparent;color:var(--faint);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:6px;border-radius:8px}
.notif .del svg{width:16px;height:16px}
.notif .del:hover{color:#d9534f;background:rgba(217,83,79,.1)}
/* ---------- Einstellungen: Tabs ---------- */
.set-tabs{display:inline-flex;gap:4px;padding:5px;background:#eef1f4;border-radius:12px;width:max-content;max-width:100%}
button.set-tab{border:0;font-family:inherit}
.set-tab{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;border-radius:9px;background:transparent;color:var(--muted);font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none;transition:background .15s,color .15s}
.set-tab i{width:16px;height:16px;flex:none}
.set-tab:hover{color:var(--text)}
.set-tab.active{background:#fff;color:var(--accent);box-shadow:0 1px 2px rgba(16,24,40,.10)}
.set-section[hidden]{display:none}
@media(max-width:560px){.set-tabs{display:flex;width:100%}.set-tab{flex:1;justify-content:center;padding:0 10px}.set-tab span{display:none}}
.set-row{display:flex;align-items:center;gap:16px;padding:16px 22px;border-bottom:1px solid var(--line)}

/* ---------- Benutzerverwaltung ---------- */
.role-badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:12px;background:#eef2f4;color:#64748b}
.role-badge i{width:13px;height:13px}
.role-badge.admin{background:rgba(15,118,110,.12);color:var(--accent)}
.role-badge.off{background:#fef2f2;color:#dc2626}
.user-row{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid #f1f4f6}
.user-row.inactive{opacity:.6}
.user-avatar{width:40px;height:40px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:15px;color:#fff;background:linear-gradient(135deg,var(--accent),#2dd4bf)}
.user-info{flex:1;min-width:0}
.user-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14.5px;font-weight:600}
.user-sub{font-size:12.5px;color:var(--faint);margin-top:2px}
.tag-you{font-size:11px;font-weight:600;color:var(--accent);background:rgba(15,118,110,.10);padding:1px 7px;border-radius:9px}
.user-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.user-self-hint{font-size:12px;color:var(--faint)}
.opt-row{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:#475569;line-height:1.45;cursor:pointer}
.opt-row input{margin-top:2px;flex:none}
.orphan-stat{display:inline-flex;align-items:center;gap:7px;margin-top:10px;font-size:13px;font-weight:600;color:#b45309;background:#fffbeb;border:1px solid #fde68a;padding:5px 11px;border-radius:9px}
.orphan-stat i{width:15px;height:15px}
.orphan-stat.clean{color:var(--accent);background:rgba(15,118,110,.10);border-color:rgba(15,118,110,.25)}
a.btn-ghost{text-decoration:none}
.set-row:last-of-type{border-bottom:none}
.set-row .t{font-size:14.5px;font-weight:600}
.set-row .d{font-size:13px;color:var(--muted);margin-top:2px}
.set-foot{display:flex;align-items:center;gap:14px;padding:16px 22px;background:#fafbfc}
.test-btns{display:flex;flex-wrap:wrap;gap:9px}
.test-btns .btn-ghost{height:38px}
.test-result{font-size:13.5px;padding:11px 14px;border-radius:10px;line-height:1.45}
.test-result[hidden]{display:none}
.set-foot + .test-result{margin:0 22px 18px}
.test-result.pending{background:#f1f5f9;color:#475569}
.test-result.ok{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}
.test-result.err{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}

/* ---------- Schalter (Switch) ---------- */
.switch{position:relative;display:inline-block;width:44px;height:26px;flex:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{position:absolute;inset:0;border-radius:14px;background:#cbd5e1;transition:background .18s;cursor:pointer}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .18s}
.switch input:checked + .track{background:var(--accent)}
.switch input:checked + .track::after{left:21px}
.pause-edit-fields{display:none}
.pause-box:has(#pause-edit-toggle:checked) .pause-edit-fields,
.pause-edit-fields.is-open{display:block!important}

/* ---------- Modal (per :target, ohne JS bedienbar) ---------- */
.modal-overlay{display:none;position:fixed;inset:0;z-index:50;align-items:center;justify-content:center;padding:24px}
.modal-overlay:target{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.42);backdrop-filter:blur(2px)}
.modal{position:relative;width:960px;max-width:100%;max-height:92vh;overflow-y:auto;background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(15,23,42,.28)}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 26px 16px}
.modal-head > div:first-child{flex:1;min-width:0}
.modal-head h2{margin:0;font-size:19px;font-weight:700;letter-spacing:-.02em}
.modal-head p{margin:3px 0 0;font-size:13.5px;color:var(--muted)}
.modal-close{width:36px;height:36px;border-radius:9px;border:none;background:#f3f5f7;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:19px}
.modal-close:hover{background:#e8ebee}
.modal-body{padding:6px 26px 4px;display:flex;flex-direction:column;gap:18px}
.modal-foot{display:flex;gap:12px;padding:20px 26px 24px;margin-top:6px}
.modal-foot .btn-primary{flex:1.4;height:48px;justify-content:center;border-radius:11px;font-size:15px}
.modal-foot .btn-ghost{flex:1;height:48px;justify-content:center;border-radius:11px;font-size:15px}

.field label{display:block;font-size:13px;font-weight:600;color:#475569;margin-bottom:7px}
.field input[type=text],.field input[type=date],.field input[type=password],.field select{width:100%;height:46px;padding:0 14px;border:1px solid #d8dee4;border-radius:10px;font-size:14.5px;background:#fff;color:var(--text);outline:none}
.field select{cursor:pointer}
.field input:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(15,118,110,.16)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.modal-columns{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.modal-col{display:flex;flex-direction:column;gap:18px;min-width:0}

.more-options{border:1px solid var(--line);border-radius:12px;background:#fafbfc;overflow:hidden}
.more-options summary{list-style:none;display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;user-select:none;font-size:14px;font-weight:600;color:var(--text)}
.more-options summary::-webkit-details-marker{display:none}
.more-options summary i:first-child{width:18px;height:18px;color:var(--accent);flex:none}
.more-options-sub{flex:1;font-size:12.5px;font-weight:400;color:var(--muted);min-width:0}
.more-options summary .chev{width:18px;height:18px;color:var(--faint);flex:none;transition:transform .15s ease}
.more-options[open] summary .chev{transform:rotate(180deg)}
.more-options[open] summary{border-bottom:1px solid var(--line)}
.more-options-body{padding:16px;display:flex;flex-direction:column;gap:16px}

.dup-warning{display:flex;align-items:flex-start;gap:10px;margin-top:9px;padding:11px 13px;border-radius:10px;background:#fff7ed;border:1px solid #fed7aa;color:#7c2d12;font-size:13px}
.dup-warning i:first-child{width:16px;height:16px;flex:none;margin-top:1px;color:#ea580c}
.dup-warning-t{font-weight:600;margin-bottom:3px}
.dup-warning-list{display:flex;flex-direction:column;gap:2px;color:#7c2d12}
.dup-warning-list span{opacity:.85}
.amount-wrap{display:flex;align-items:center;height:46px;padding:0 14px;border:1px solid #d8dee4;border-radius:10px;background:#fff}
.amount-wrap input{flex:1;border:none;font-size:14.5px;min-width:0;background:transparent;outline:none}
.amount-wrap .cur{color:var(--faint);font-weight:600}
.amount-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(15,118,110,.16)}

/* Segmented control (Radios) */

.reminder-box{display:flex;align-items:center;gap:14px;padding:14px 16px;background:#fafbfc;border:1px solid var(--line);border-radius:12px}
.reminder-box i{font-size:19px;color:var(--accent)}
.reminder-box .t{font-size:14px;font-weight:600}
.reminder-box .d{font-size:12.5px;color:var(--muted)}

/* ---------- Login / Setup ---------- */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(1200px 600px at 70% -10%,#13433d 0%,#0c2826 55%)}
.auth-card{width:420px;max-width:100%;background:#fff;border-radius:18px;box-shadow:0 24px 70px rgba(8,30,28,.45);padding:34px 32px}
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.auth-brand .brand-mark{width:40px;height:40px;font-size:20px}
.auth-brand .nm{font-size:20px;font-weight:700;letter-spacing:-.02em}
.auth-brand .tg{font-size:12.5px;color:var(--muted)}
.auth-brand .brand-ver{font-size:11px;color:var(--muted);opacity:.85;font-family:'IBM Plex Mono',ui-monospace,monospace;margin-top:2px}
.auth h1{margin:0 0 4px;font-size:22px;font-weight:700;letter-spacing:-.02em}
.auth .lead{margin:0 0 22px;font-size:14px;color:var(--muted)}
.auth .field{margin-bottom:16px}
.auth .btn-primary{width:100%;height:50px;justify-content:center;border-radius:11px;font-size:15.5px;margin-top:6px}
.auth .err{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;padding:11px 14px;border-radius:10px;font-size:13.5px;margin-bottom:18px}
.auth .hint{font-size:12.5px;color:var(--faint);margin-top:18px;text-align:center}

/* ---------- Mobil-Navigation (Basis: nur < Breakpoint sichtbar) ---------- */
.nav-toggle-cb{display:none}
.nav-backdrop{display:none}
.mobile-bar{display:none}
.bottom-tabbar{display:none}

@media (max-width:1080px){
  .grid-stats{grid-template-columns:repeat(2,1fr) !important}
  .two-col{grid-template-columns:1fr !important}
}

@media (max-width:860px){
  .filter-controls{justify-content:flex-start}
  /* Sidebar wird zur Schublade */
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:262px;z-index:70;transform:translateX(-100%);transition:transform .25s ease;will-change:transform;padding-top:calc(22px + env(safe-area-inset-top))}
  .nav-toggle-cb:checked ~ .app .sidebar{transform:none;box-shadow:0 18px 50px rgba(0,0,0,.4)}
  .nav-toggle-cb:checked ~ .app .nav-backdrop{display:block;position:fixed;inset:0;background:rgba(8,30,28,.45);z-index:65}

  /* Mobile Kopfzeile - padding-top reserviert Platz für die iOS-Statusleiste/Notch
     im Standalone-Modus (viewport-fit=cover rendert sonst dahinter) */
  .mobile-bar{display:flex;align-items:center;gap:12px;min-height:60px;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;background:var(--sb-bg);flex:none}
  .mobile-bar .brand-mark{width:30px;height:30px;font-size:16px}
  .hamburger{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:10px;color:#fff;cursor:pointer;flex:none;font-size:22px}
  .hamburger:hover{background:rgba(255,255,255,.08)}
  .mobile-brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;letter-spacing:-.02em;color:#fff}
  .mobile-add{width:42px;height:42px;padding:0;justify-content:center;margin-left:auto;flex:none}
  .mobile-bar .icon-btn{flex:none}

  /* Suche in der Schublade */
  .side-search{display:flex;align-items:center;gap:9px;height:42px;margin:0 0 6px;padding:0 14px;background:rgba(255,255,255,.06);border:1px solid var(--sb-border);border-radius:10px}
  .side-search i{color:var(--sb-sub);font-size:17px;flex:none}
  .side-search input{flex:1;border:none;background:transparent;font-size:14px;color:#fff;min-width:0;outline:none}
  .side-search input::placeholder{color:var(--sb-sub)}

  /* Topbar kompakter, eigene Aktionen ausblenden (in mobile-bar enthalten) */
  .topbar{height:auto;min-height:60px;padding:14px 18px}
  .topbar h1{font-size:18px}
  .topbar .right{display:none}

  .content{padding:20px 18px calc(60px + 58px + env(safe-area-inset-bottom))}
  .grid-stats{gap:14px}
  .flash{margin-left:0;margin-right:0}

  /* Native-artige iOS-Bottom-Tabbar (ersetzt die Schublade als primäre Navigation) */
  .bottom-tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--sb-bg);border-top:1px solid var(--sb-border);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .bt-item{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:6px 2px;border-radius:10px;color:var(--sb-sub);text-decoration:none;
    font-size:10.5px;font-weight:600;letter-spacing:-.01em;
  }
  .bt-item i{width:22px;height:22px}
  .bt-item.active{color:#fff}
  .bt-item.active i{color:var(--accent-soft)}
  .bt-item:active{background:rgba(255,255,255,.06)}

  /* Tabelle -> Karten */
  .table .thead{display:none}
  .trow{grid-template-columns:1fr auto !important;column-gap:12px;row-gap:8px;padding:16px 18px}
  .trow .sub-cell{grid-column:1;grid-row:1;min-width:0}
  .trow .cat{flex-wrap:wrap;row-gap:3px;min-width:0}
  .trow .cell-amt{grid-column:2;grid-row:1;justify-self:end;align-self:start;white-space:nowrap}
  .trow .c-cycle,.trow .c-next,.trow .accrued{grid-column:1/-1;display:flex;align-items:baseline;gap:6px;font-size:13px}
  .trow .c-cycle::before,.trow .c-next::before,.trow .accrued::before{content:attr(data-mlabel) ":";color:var(--faint);font-size:12px;font-weight:600;flex:none;min-width:118px}
  .trow .accrued{flex-wrap:wrap}
  .trow .accrued-sub{color:var(--faint)}
  .trow .row-actions{grid-column:1/-1;justify-content:flex-start;gap:8px;margin-top:4px;padding-top:10px;border-top:1px solid var(--line)}

  /* Detailseite */
  .detail-head{flex-direction:column}
  .detail-actions{width:100%;margin-left:0}
  .detail-actions .btn-ghost, .detail-actions form{flex:1;min-width:120px}
  .detail-actions form .btn-ghost{width:100%}

  /* Kalender kompakt */
  .cal-head{flex-wrap:wrap;gap:12px}
  .cal-cell{min-height:74px;padding:6px 7px}
  .cal-event .nm{display:none}
  .cal-event{justify-content:center;padding:3px}
  .cal-more{font-size:10px}

  /* ICS */
  .ics-url{flex-direction:column}
  .ics-url .btn-primary{width:100%}
  .ics-actions{gap:8px}
  .ics-actions form{margin-left:0 !important;width:100%}
  .ics-actions .btn-ghost{width:100%;justify-content:center}

  /* Statistik / Detail: inline-Grids aufbrechen */
  .grid-stats{grid-template-columns:repeat(2,1fr) !important}

  /* Modal */
  .field-row{grid-template-columns:1fr}
  .modal-columns{grid-template-columns:1fr;gap:18px}
  .logo-grid{grid-template-columns:repeat(4,1fr)}

  /* Zahlungsmethoden- & Kategorie-Zeilen */
  .pm-row{flex-wrap:wrap}
  .cat-usage{margin-left:0}
}

@media (max-width:560px){
  .grid-stats{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px}
  .grid-stats .stat{padding:14px}
  .grid-stats .stat .k{font-size:10.5px;gap:6px;letter-spacing:.03em;line-height:1.3;padding-right:14px}
  .grid-stats .stat .v{font-size:19px !important;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .grid-stats .stat .s{font-size:11.5px}
  .content{padding:16px 14px 56px}
  .chips{gap:7px}
  .trow .c-cycle::before,.trow .c-next::before,.trow .accrued::before{min-width:96px}
  .cal-weekdays div{padding:8px 4px;font-size:11px}
  .cal-cell{min-height:60px;padding:4px}
  .cal-day{font-size:12px}
  .logo-grid{grid-template-columns:repeat(3,1fr)}
  .modal-head,.modal-body,.modal-foot{padding-left:18px;padding-right:18px}
  .auth-card{padding:26px 22px}

  /* Übersicht: "Anstehende Zahlungen" schmaler machen, damit nicht seitlich
     gescrollt werden muss - die "in X Tagen"-Pille entfällt (redundant zum
     Datum links) und Abstände/Mindestbreiten werden reduziert. */
  .up-row{gap:8px;padding:12px 14px}
  .up-row .badge{display:none}
  .up-row .cell-amt{min-width:0 !important}
  .panel-head{padding:16px 14px}

  /* Übersicht: "Nach Kategorie" - lange Kategorienamen abschneiden statt
     den Balken-Container zu sprengen. */
  .panel-pad{padding:16px 14px 18px}
  .bar-name{min-width:0}
  .bar-name-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .bar-val{flex:none}

  /* Auswertungen: Liquiditäts-Roadmap ist als horizontal scrollbares
     12-Monats-Balkendiagramm auf dem Handy wenig hilfreich - auf Wunsch
     ausgeblendet, statt seitliches Scrollen zu erzwingen. */
}

/* ---------- Logo-Avatare ---------- */
.sub-ava img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:cover;border-radius:10px;display:block}
.sub-ava.has-logo{border:1px solid var(--border)}
.sub-ava.sm{width:36px;height:36px;border-radius:9px;font-size:14px;flex:none}
.sub-ava.sm img{border-radius:9px}

/* ---------- Wiederholungs-Control ---------- */
.rep-presets{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:11px}
.rep-preset{height:32px;padding:0 13px;border-radius:18px;border:1px solid #d8dee4;background:#fff;color:#475569;font-size:13px;font-weight:500;cursor:pointer}
.rep-preset:hover{background:#f3f5f7}
.rep-preset.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.rep-custom{display:flex;align-items:center;gap:10px}
.rep-custom .rep-lbl{font-size:14px;color:var(--muted)}
.rep-custom input[type=number]{width:84px;height:46px;padding:0 12px;border:1px solid #d8dee4;border-radius:10px;font-size:14.5px;background:#fff;outline:none}
.rep-custom input[type=number]:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(15,118,110,.16)}
.rep-custom select{flex:1;height:46px;padding:0 12px;border:1px solid #d8dee4;border-radius:10px;font-size:14.5px;background:#fff;color:var(--text);cursor:pointer;outline:none}
.rep-custom select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(15,118,110,.16)}

/* ---------- Logo-Upload ---------- */
.logo-upload{display:flex;align-items:center;gap:16px}
.logo-prev{width:60px;height:60px;border-radius:12px;border:1px dashed #cfd6dd;background:#fafbfc;display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:22px;flex:none;overflow:hidden}
.logo-prev img{width:100%;height:100%;object-fit:cover}
.logo-ctl{display:flex;flex-direction:column;gap:4px;min-width:0}
.logo-pick{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;height:38px;padding:0 14px;border:1px solid #d8dee4;border-radius:9px;background:#fff;color:#475569;font-size:13.5px;font-weight:600;cursor:pointer}
.logo-pick:hover{background:#f3f5f7}
.logo-pick i{font-size:16px}
.logo-hint{font-size:12px;color:var(--faint)}
.logo-remove{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);cursor:pointer;margin-top:2px}
.logo-remove input{width:15px;height:15px;accent-color:var(--accent)}

/* ---------- Auto-Logo-Suche ---------- */
.logo-btns{display:flex;gap:8px;flex-wrap:wrap}
#logo-auto{cursor:pointer}
.logo-results{margin-top:14px;border:1px solid var(--border);border-radius:12px;background:#fafbfc;padding:12px}
.logo-results-head{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:10px}
.logo-results-close{border:none;background:transparent;color:var(--faint);font-size:12.5px;font-weight:600;cursor:pointer}
.logo-results-close:hover{color:var(--accent)}
.logo-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.logo-cand{padding:0;width:100%;aspect-ratio:1;border:1px solid var(--border);border-radius:10px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden}
.logo-cand:hover{border-color:var(--accent)}
.logo-cand.sel{border-color:var(--accent);box-shadow:0 0 0 2px rgba(15,118,110,.25)}
.logo-cand img{width:100%;height:100%;object-fit:contain;padding:8px}
.logo-none{grid-column:1/-1;padding:14px 4px;font-size:13px;color:var(--muted);text-align:center}
.field-sub{margin-top:6px;font-size:12.5px}
.field-sub a{color:var(--accent);font-weight:600}

/* ---------- Geteilt ---------- */
.shared-box{border:1px solid var(--line);border-radius:12px;background:#fafbfc;overflow:hidden}
.shared-head{display:flex;align-items:center;gap:14px;padding:14px 16px}
.shared-head i{font-size:19px;color:var(--accent)}
.shared-head .t{font-size:14px;font-weight:600}
.shared-head .d{font-size:12.5px;color:var(--muted)}
.shared-detail{padding:0 16px 16px;display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--line);margin-top:0;padding-top:14px}

/* ---------- Laufzeit-Ende / Kündigungserinnerung ---------- */
.endterm-box{border:1px solid var(--line);border-radius:12px;background:#fafbfc;overflow:hidden}
.endterm-head{display:flex;align-items:center;gap:14px;padding:14px 16px}
.endterm-head i{font-size:19px;color:var(--accent)}
.endterm-head .t{font-size:14px;font-weight:600}
.endterm-head .d{font-size:12.5px;color:var(--muted)}
.endterm-body{padding:0 16px 16px;border-top:1px solid var(--line);padding-top:14px}
.end-remind-opt{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:13px;color:#475569;cursor:pointer}
.end-remind-opt input{flex:none}
.linklike{border:none;background:none;padding:0;font:inherit;color:var(--accent);font-weight:600;cursor:pointer}
.linklike:hover{text-decoration:underline}
.share-badge{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:2px 9px;border-radius:14px;background:rgba(15,118,110,.10);color:var(--accent);font-size:11.5px;font-weight:600;vertical-align:middle}
.share-badge i{font-size:13px}
.share-amt{font-size:11.5px;color:var(--muted);margin-top:2px;text-align:right}
.cell-amt{display:flex;flex-direction:column;align-items:flex-end}
.cell-since{font-size:11.5px;color:var(--faint);margin-top:2px}
.amt-eur{font-size:12px;color:#475569;margin-top:2px}
.amt-rate{font-size:10.5px;color:var(--faint);margin-top:1px;white-space:nowrap}

/* ---------- Zahlungsmethoden-Chip ---------- */

/* ---------- Zahlungsmethoden-Seite ---------- */
.pm-drag{flex:none;display:flex;align-items:center;justify-content:center;width:26px;align-self:stretch;color:var(--faint);cursor:grab;border-radius:7px;margin:-2px 0}
.pm-drag:hover{background:var(--line);color:var(--muted)}
.pm-drag:active{cursor:grabbing}
.pm-drag i{width:18px;height:18px}
.pm-row.pm-dragging{opacity:.55;background:var(--accent-soft,rgba(15,118,110,.06));border-radius:10px}
.pm-reorder-status{margin:2px 22px 16px;font-size:12.5px;font-weight:500;color:var(--muted)}
.pm-reorder-status.ok{color:var(--accent)}
.pm-reorder-status.err{color:#dc2626}
.pm-reorder-status.pending{color:var(--faint)}
.pm-row{display:flex;align-items:flex-start;gap:15px;padding:16px 22px;border-bottom:1px solid var(--line)}
.pm-row:last-child{border-bottom:none}
.pm-edit{display:flex;align-items:flex-start;gap:14px;flex:1;min-width:0}
.pm-logo-pick{cursor:pointer;flex:none}
.pm-ico{position:relative;width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:none;font-size:21px;overflow:hidden}
.pm-ico img{width:100%;height:100%;object-fit:contain;padding:5px}
.pm-ico.has-logo{border:1px solid var(--border)}
.pm-logo-edit{position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #fff}
.pm-logo-edit i{font-size:10px}
.pm-fields{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.pm-fields-row{display:flex;gap:8px}
.pm-input{height:38px;padding:0 11px;border:1px solid #d8dee4;border-radius:9px;font-size:14px;background:#fff;color:var(--text);outline:none}
.pm-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(15,118,110,.16)}
.pm-input-label{font-weight:600;width:100%}
.pm-fields-row .pm-input{flex:1;min-width:0}
.pm-fields-row select.pm-input{cursor:pointer;max-width:170px}
.pm-remove-logo{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);cursor:pointer}
.pm-remove-logo input{width:14px;height:14px;accent-color:var(--accent)}
.pm-meta-line{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.pm-actions{flex:none}
.pm-side{display:flex;align-items:center;gap:8px;flex:none;padding-top:3px}
.pm-mark-img{box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.pm-default{font-size:11px;font-weight:600;color:var(--accent);background:rgba(15,118,110,.10);padding:2px 9px;border-radius:12px}
.btn-sm{height:36px;padding:0 14px;font-size:13px}
.chip-shared.active{background:var(--accent);border-color:var(--accent)}

/* ---------- Kategorien-Seite ---------- */
.cat-drag{flex:none;display:flex;align-items:center;justify-content:center;width:26px;align-self:stretch;color:var(--faint);cursor:grab;border-radius:7px}
.cat-drag:hover{background:var(--line);color:var(--muted)}
.cat-drag:active{cursor:grabbing}
.cat-drag i{width:18px;height:18px}
.cat-row.pm-dragging{opacity:.55;background:rgba(15,118,110,.06);border-radius:10px}
.cat-row{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--line)}
.cat-row:last-child{border-bottom:none}
.cat-edit{display:flex;align-items:center;gap:12px;flex:1;min-width:0;flex-wrap:wrap}
.cat-dot{width:14px;height:14px;border-radius:5px;flex:none}
.cat-name-input{height:40px;padding:0 12px;border:1px solid #d8dee4;border-radius:9px;font-size:14.5px;font-weight:600;background:#fff;outline:none;min-width:150px}
.cat-name-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(15,118,110,.16)}
.cat-emoji-input{width:48px;height:40px;padding:0;text-align:center;border:1px solid #d8dee4;border-radius:9px;font-size:18px;background:#fff;outline:none}
.cat-emoji-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(15,118,110,.16)}
.cat-usage{font-size:13px;color:var(--muted);white-space:nowrap;margin-left:auto}
.swatches{display:flex;flex-wrap:wrap;gap:7px}
.swatch{position:relative;width:26px;height:26px;border-radius:7px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.swatch input{position:absolute;opacity:0;width:0;height:0}
.swatch-check{width:11px;height:11px;border-radius:3px;background:#fff;opacity:0;box-shadow:0 0 0 2px rgba(0,0,0,.15);transition:opacity .12s}
.swatch input:checked + .swatch-check{opacity:1}

/* ---------- ICS-Kalender-Abo ---------- */
.ics-card{margin-top:18px}
.ics-sync{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--accent)}
.ics-sync i{font-size:15px}
.ics-lead{margin:0 0 16px;font-size:13.5px;color:var(--muted);max-width:680px}
.ics-url{display:flex;gap:10px}
.ics-url input{flex:1;height:46px;padding:0 14px;border:1px solid #d8dee4;border-radius:10px;font-size:13.5px;font-family:'IBM Plex Mono',monospace;color:#475569;background:#fafbfc;outline:none}
.ics-url .btn-primary{height:46px;border-radius:10px}
.ics-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.ics-actions .btn-ghost{height:40px}
.ics-hint{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:12.5px;color:var(--faint)}
.ics-hint i{font-size:15px;flex:none}

/* ---------- Abo-Detail / Kostenverlauf ---------- */
.back-link{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--muted)}
.back-link:hover{color:var(--accent)}
.row-link{color:inherit}
.row-link:hover{color:var(--accent)}
.detail-head{display:flex;flex-direction:column;gap:16px;padding:20px 22px}
.detail-head-main{display:flex;align-items:center;gap:18px;width:100%}
.detail-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0;width:100%}
.sub-ava.lg{width:60px;height:60px;border-radius:14px;font-size:24px;flex:none}
.sub-ava.lg img{border-radius:14px}
.detail-name{font-size:20px;font-weight:700;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.detail-meta{display:flex;flex-wrap:wrap;gap:16px;margin-top:6px;font-size:13px;color:var(--muted)}
.detail-meta span{display:inline-flex;align-items:center;gap:6px}
.detail-meta .dot{width:8px;height:8px}

.price-chart{display:flex;align-items:flex-end;gap:14px;height:200px;padding-top:20px;border-bottom:1px solid var(--line)}
.pc-col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:8px}
.pc-val{font-size:12.5px;font-weight:600;color:#475569}
.pc-bar{width:100%;max-width:64px;border-radius:7px 7px 0 0;min-height:6px;transition:height .3s}
.pc-date{font-size:11.5px;color:var(--faint);white-space:nowrap}

.timeline{padding:8px 22px 18px}

/* ============================================================
   Fixum – Premium Dark Mode Overrides
   ============================================================ */
html.dark {
  --bg: #0b0f19;
  --card: #141b2d;
  --border: #222f47;
  --line: #1b263b;
  --text: #f8fafc;
  --muted: #94a3b8;
  --faint: #64748b;
  
  --sb-bg: #091211;
  --sb-border: rgba(255, 255, 255, 0.05);
  --sb-text: #9cb3b0;
  --sb-sub: #6b8480;
}

html.dark .topbar, html.dark .icon-btn, html.dark .btn-ghost, html.dark .chip, html.dark .pm-filter,
html.dark .pv-ctl select, html.dark .pv-chip, html.dark .ai-tab, html.dark .ai-drop,
html.dark .ai-pane textarea, html.dark .cal-arrow, html.dark .cal-total, html.dark .modal,
html.dark .field input[type=text], html.dark .field input[type=date],
html.dark .field input[type=password], html.dark .field select, html.dark .amount-wrap,
html.dark .auth-card, html.dark .rep-preset, html.dark .rep-custom input[type=number],
html.dark .rep-custom select, html.dark .logo-pick, html.dark .logo-cand, html.dark .table-foot {
  background: var(--card) !important;
  color: var(--text) !important;
}

html.dark .topbar {
  background: var(--card) !important;
}

html.dark .btn-ghost.danger {
  background: rgba(225, 29, 72, 0.14) !important;
  color: #fca5a5 !important;
  border-color: rgba(225, 29, 72, 0.35) !important;
}

html.dark .btn-ghost.danger:hover {
  background: rgba(225, 29, 72, 0.24) !important;
  color: #fecdd3 !important;
}

html.dark .search {
  background: #192239 !important;
}

html.dark .up-date {
  background: #192239 !important;
  border-color: var(--border) !important;
}

html.dark .up-date .m {
  color: var(--muted) !important;
}

html.dark .flash {
  background: #0e2926 !important;
  border-color: #0f766e !important;
  color: #2dd4bf !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: var(--faint) !important;
}

html.dark select {
  color-scheme: dark;
}

html.dark .trow:hover {
  background: rgba(255, 255, 255, 0.02) !important;
}

html.dark .panel.table .thead {
  background: rgba(255, 255, 255, 0.01) !important;
}

html.dark .cal-cell {
  background: var(--card) !important;
}
html.dark .cal-cell.is-empty {
  background: rgba(255, 255, 255, 0.01) !important;
}
html.dark .cal-cell.is-today {
  background: rgba(20, 184, 166, 0.15) !important;
}
html.dark .cal-weekdays {
  background: #192239 !important;
  border-color: var(--border) !important;
}
html.dark .cal-event .nm {
  color: var(--text) !important;
}
html.dark .cal-cell.has-events:hover {
  background: rgba(45, 212, 191, 0.08) !important;
}
html.dark .cal-day-details {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--border);
}
html.dark .cal-day-details-row {
  background: var(--card);
  border-color: var(--border);
}

html.dark #ai-q {
  border-color: var(--border) !important;
  background: var(--card) !important;
  color: var(--text) !important;
}

html.dark .pivot-table th,
html.dark .pivot-table td {
  border-bottom-color: var(--border) !important;
}
html.dark .pivot-table thead th {
  background: #192239 !important;
  border-bottom-color: var(--border) !important;
}
html.dark .pivot-table th.pv-rowhead {
  background: var(--card) !important;
  color: var(--text) !important;
}
html.dark .pivot-table td.pv-empty {
  color: var(--faint) !important;
}
html.dark .pivot-table td.pv-total,
html.dark .pivot-table th.pv-total {
  background: rgba(255, 255, 255, 0.01) !important;
  color: var(--text) !important;
}
html.dark .pivot-table tr.pv-foot th,
html.dark .pivot-table tr.pv-foot td {
  background: #192239 !important;
  border-top-color: var(--border) !important;
  border-bottom-color: var(--border) !important;
}

html.dark .trow.paused {
  background: rgba(255, 255, 255, 0.01) !important;
}
html.dark .trow.archived {
  background: rgba(0, 0, 0, 0.15) !important;
}

html.dark .set-tabs {
  background: #192239 !important;
}
html.dark .set-tab.active {
  background: var(--card) !important;
  color: var(--accent) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
}
html.dark .set-foot {
  background: rgba(255, 255, 255, 0.01) !important;
  border-top-color: var(--border) !important;
}
html.dark .set-row input[type=text],
html.dark .set-row input[type=password],
html.dark .set-row input[type=number],
html.dark .set-row select {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
html.dark .user-row {
  border-bottom-color: var(--border) !important;
}
html.dark .orphan-stat {
  background: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
  color: #fbbf24 !important;
}

/* Sun / Moon icon visibility based on theme */
html.dark .theme-sun { display: block; }
html.dark .theme-moon { display: none; }
html .theme-sun { display: none; }
html .theme-moon { display: block; }

/* Stat card configuration dropdown */
.stat-config-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.stat-config-btn:hover {
  background: var(--bg);
  color: var(--text);
}
.stat-dropdown {
  position: absolute;
  top: 38px;
  right: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: 6px;
  min-width: 230px;
}
.stat-dropdown-item {
  background: none;
  border: none;
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  width: 100%;
}
.stat-dropdown-item:hover {
  background: var(--bg);
}
.stat-dropdown-item.active {
  font-weight: 600;
  color: var(--accent);
}

/* Global Zero-Click Dropzone Overlay */
.global-dropzone {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.global-dropzone-inner {
  border: 3px dashed var(--acc);
  background: rgba(8, 145, 178, 0.12);
  border-radius: 20px;
  padding: 50px 40px;
  text-align: center;
  max-width: 520px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
  animation: dropPulse 1.5s infinite alternate ease-in-out;
}
@keyframes dropPulse {
  0% { transform: scale(0.98); border-color: var(--acc); }
  100% { transform: scale(1.02); border-color: #38bdf8; }
}
.drop-icon-anim {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  background: var(--acc);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

/* Radar Scan Animation */
@keyframes scanSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Panel-Header-Icon-Buttons (z. B. Sparpotenzial neu laden/löschen) - global,
   da sowohl auf stats.php als auch im globalen "Frag deine Abos"-Popup genutzt. */
.panel-head-action-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.panel-head-action-btn:hover {
  background: rgba(15, 118, 110, 0.08);
  color: var(--accent) !important;
}
html.dark .panel-head-action-btn:hover {
  background: rgba(45, 212, 191, 0.08);
  color: var(--accent-soft) !important;
}

/* "Sparpotenzial (KI)"-Button - andersfarbig (Bernstein statt Teal-Akzent)
   hervorgehoben, da er absichtlich aus dem übrigen Farbschema heraussticht.
   Global, da sowohl auf stats.php als auch im globalen "Frag deine Abos"-Popup genutzt. */
.btn-ai-savings {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #fcd34d;
  background: #fffbeb;
  color: #92400e;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn-ai-savings:hover:not(:disabled) { background: #fef3c7; }
.btn-ai-savings:disabled { opacity: 0.6; cursor: default; }
html.dark .btn-ai-savings {
  background: rgba(217, 119, 6, 0.14);
  border-color: rgba(217, 119, 6, 0.4);
  color: #fbbf24;
}
html.dark .btn-ai-savings:hover:not(:disabled) { background: rgba(217, 119, 6, 0.22); }

/* Cashflow: eigener HTML-Hover-Tooltip fürs gestapelte Balkendiagramm (ein
   einziger Tooltip für den gesamten Balken, Kategorien darin farbig
   hinterlegt - siehe cashflow.php, JS-Handler am Seitenende). */
.cf-tooltip {
  position: fixed;
  z-index: 500;
  display: none;
  min-width: 220px;
  max-width: 320px;
  max-height: 360px; /* Fallback - wird bei jedem Anzeigen dynamisch an den Viewport angepasst (siehe JS) */
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 28px -10px rgba(0,0,0,.35);
  padding: 8px;
  pointer-events: none;
  font-size: 0.78rem;
  line-height: 1.3;
}
.cf-tt-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text);
  padding: 2px 4px 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 5px;
  position: sticky;
  top: 0;
  background: var(--card);
}
.cf-tt-total { color: var(--accent); white-space: nowrap; }
.cf-tt-cat {
  border-radius: 7px;
  padding: 4px 7px;
  margin-bottom: 3px;
}
.cf-tt-cat:last-child { margin-bottom: 0; }
.cf-tt-cat-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--text);
}
.cf-tt-sub {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.74rem;
  color: var(--muted);
  padding: 1px 0 0 4px;
}

.cf-tt-note { font-size: 0.74rem; color: var(--muted); padding: 2px 4px 5px; }
.cf-tt-foot { font-size: 0.72rem; color: var(--faint); padding: 6px 4px 1px; border-top: 1px solid var(--line); margin-top: 5px; }

/* ---------- Cashflow-Seite ---------- */
.cf-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.cf-controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cf-seg-tabs { height: 36px; margin: 0; display: inline-flex; align-items: center; }
.cf-seg-tabs .set-tab { height: 28px; padding: 0 12px; font-size: 13px; font-weight: 600; }
.cf-seg-tabs .set-tab span { display: inline-block !important; }
.cf-seg-tabs .set-tab span::first-letter { text-transform: uppercase; }
.cf-seg-tabs .set-tab i, .cf-seg-tabs .set-tab svg { width: 14px; height: 14px; }
.cf-filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.cf-select { padding: 6px 12px; font-size: 0.86rem; border-radius: 8px; width: auto; }
.cf-ics { height: 36px; display: inline-flex; align-items: center; gap: 6px; }
.cf-ics i, .cf-ics svg { width: 15px; height: 15px; }

.cf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 22px; }
.cf-kpi { padding: 16px 18px; }
.cf-kpi-label { font-size: 0.76rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.cf-kpi-value { font-size: 1.65rem; font-weight: 800; color: var(--text); margin-top: 4px; }
.cf-kpi-value.cf-accent { color: var(--accent); }
.cf-kpi-value.cf-warn { color: #f59e0b; }
.cf-kpi-note { font-size: 0.78rem; color: var(--muted); margin-top: 3px; }
.cf-kpi-note strong { color: var(--text); }

.cf-chart-card, .cf-detail-card { padding: 22px; margin-bottom: 24px; }
.cf-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
.cf-card-head h2 { font-size: 1.15rem; font-weight: 700; display: flex; align-items: center; gap: 8px; margin: 0; flex-wrap: wrap; }
.cf-muted { color: var(--muted); font-size: 0.82rem; font-weight: 400; }
.cf-small { font-size: 0.76rem; }
.cf-xsmall { font-size: 0.72rem; margin-top: 1px; }

.cf-chart-scroll { width: 100%; overflow-x: auto; }
.cf-chart { width: 100%; min-width: 680px; height: auto; display: block; font-family: inherit; }
.cf-grid { stroke: var(--border); stroke-width: 1; }
.cf-axis { fill: var(--muted); font-size: 10px; font-family: ui-monospace, monospace; }
.cf-axis-cum { fill: var(--accent); }
.cf-marker { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 3 3; }
.cf-marker-label { fill: var(--muted); font-size: 10px; font-weight: 600; }
.cf-bar { cursor: pointer; outline: none; }
.cf-hit { fill: transparent; }
.cf-bar:hover .cf-hit, .cf-bar:focus-visible .cf-hit { fill: var(--accent); fill-opacity: 0.06; }
.cf-seg { opacity: 0.9; pointer-events: none; }
.cf-partial .cf-seg { opacity: 0.55; }
.cf-hatch { fill: url(#cf-hatch-pat); pointer-events: none; }
.cf-hatch-line { stroke: var(--card); stroke-width: 2.5; stroke-opacity: 0.7; }
.cf-bar-total { fill: var(--text); font-size: 11px; font-weight: 800; pointer-events: none; paint-order: stroke; stroke: var(--card); stroke-width: 3px; stroke-linejoin: round; }
.cf-chart-card [hidden], .cf-detail-card [hidden] { display: none !important; }
.cf-bar-total.cf-zero { fill: var(--faint); font-weight: 600; }
.cf-bar-label { fill: var(--text); font-size: 11px; font-weight: 700; pointer-events: none; }
.cf-bar-sublabel { fill: var(--muted); font-size: 9px; pointer-events: none; }
.cf-cum { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; pointer-events: none; }
.cf-cum-pt { fill: var(--card); stroke: var(--accent); stroke-width: 2; pointer-events: none; }

.cf-legend { display: flex; gap: 6px 8px; flex-wrap: wrap; justify-content: center; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.cf-leg { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 0.82rem; color: var(--text); background: none; border: 1px solid transparent; border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.cf-leg:hover { border-color: var(--border); }
.cf-leg[aria-pressed="false"] { opacity: 0.45; text-decoration: line-through; }
.cf-leg-reset { color: var(--accent); font-weight: 600; }
.cf-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.cf-footnotes { display: flex; gap: 6px 18px; flex-wrap: wrap; justify-content: center; margin-top: 10px; font-size: 0.76rem; color: var(--muted); }
.cf-footnotes > span { display: inline-flex; align-items: center; gap: 6px; }
.cf-key-line { display: inline-block; width: 16px; height: 2px; background: var(--accent); border-radius: 1px; }
.cf-key-hatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: repeating-linear-gradient(45deg, var(--faint) 0 2px, transparent 2px 5px); }
.cf-key-marker { display: inline-block; width: 0; height: 12px; border-left: 1px dashed var(--faint); }

.cf-detail-actions { display: flex; gap: 6px; }
.cf-empty { padding: 16px 0; color: var(--muted); }
.cf-month { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.cf-month > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; cursor: pointer; background: var(--bg); font-weight: 700; }
.cf-month > summary::-webkit-details-marker { display: none; }
.cf-month-label { display: inline-flex; align-items: center; gap: 6px; }
.cf-chev, svg.cf-chev { width: 16px; height: 16px; transition: transform .15s; }
.cf-month[open] .cf-chev { transform: rotate(90deg); }
.cf-month-meta { font-size: 0.86rem; font-weight: 500; color: var(--muted); }
.cf-month-meta strong { color: var(--accent); font-weight: 800; }
.cf-month[open] > summary { border-bottom: 1px solid var(--border); }
.cf-day { padding: 12px 16px; border-bottom: 1px solid var(--line); scroll-margin-top: 80px; transition: background .4s; }
.cf-day:last-child { border-bottom: 0; }
.cf-day.cf-flash { animation: cf-flash 1.6s ease-out; }
@keyframes cf-flash { 0%, 30% { background: rgba(15, 118, 110, 0.14); } 100% { background: transparent; } }
.cf-day-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.cf-day-date { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 0.96rem; flex-wrap: wrap; }
.cf-day-sum { font-weight: 700; font-size: 0.95rem; }
.cf-day-total { color: var(--accent); }
.cf-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; }
.cf-item-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.cf-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.cf-item-name { font-weight: 700; color: var(--text); text-decoration: none; }
.cf-item-name:hover { text-decoration: underline; }
.cf-chip { font-size: 0.76rem; color: var(--muted); background: var(--bg); border: 1px solid var(--line); padding: 1px 6px; border-radius: 4px; }
.cf-item-amount { text-align: right; flex: none; margin-left: auto; }
.cf-item-price { font-weight: 700; font-size: 0.95rem; white-space: nowrap; }
.cf-item .badge, .cf-day-date .badge { font-size: 0.72rem; padding: 2px 8px; }
.cf-item .badge i, .cf-item .badge svg { width: 12px; height: 12px; }
.cf-badge-muted { background: var(--line); color: var(--muted); }
.cf-badge-today { background: rgba(16, 185, 129, 0.14); color: #047857; }
.cf-badge-soon { background: rgba(245, 158, 11, 0.16); color: #b45309; }
.cf-badge-week { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }
.cf-badge-info { background: rgba(99, 102, 241, 0.12); color: #4338ca; }
.cf-badge-up { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }
.cf-badge-down { background: rgba(16, 185, 129, 0.14); color: #047857; }
.cf-badge-end { background: rgba(100, 116, 139, 0.14); color: var(--text); }
html.dark .cf-badge-today, html.dark .cf-badge-down { color: #34d399; }
html.dark .cf-badge-soon { color: #fbbf24; }
html.dark .cf-badge-week { color: #93c5fd; }
html.dark .cf-badge-info { color: #a5b4fc; }
html.dark .cf-badge-up { color: #fca5a5; }
@media (max-width: 640px) {
  .cf-item { flex-direction: column; align-items: flex-start; gap: 2px; }
  .cf-item-amount { text-align: left; padding-left: 18px; }
  .cf-chart-card, .cf-detail-card { padding: 16px; }
}

/* Cashflow-Reiter (Vorschau · Rücklagen · Konten · Rückblick) */
.cf-view-tabs { margin: 0; }
.cf-view-tabs .set-tab i, .cf-view-tabs .set-tab svg { width: 15px; height: 15px; }
.cf-neg { color: #dc2626 !important; }
html.dark .cf-neg { color: #f87171 !important; }
.cf-pos { color: #16a34a; }
html.dark .cf-pos { color: #4ade80; }
.cf-muted-value { color: var(--faint); }
.cf-alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 12px; margin-bottom: 22px; font-size: 0.9rem; line-height: 1.45; border: 1px solid; }
.cf-alert i, .cf-alert svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.cf-alert-ok { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.cf-alert-bad { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.cf-alert-warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.cf-alert a { color: inherit; font-weight: 700; }
html.dark .cf-alert-ok { background: rgba(16, 185, 129, .12); border-color: rgba(16, 185, 129, .35); color: #6ee7b7; }
html.dark .cf-alert-bad { background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .35); color: #fca5a5; }
html.dark .cf-alert-warn { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .35); color: #fcd34d; }
.cf-two { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); gap: 0 24px; align-items: start; }
@media (max-width: 980px) { .cf-two { grid-template-columns: 1fr; } }
.cf-form { display: grid; gap: 12px; }
.cf-check { display: flex; gap: 8px; align-items: center; font-size: 0.86rem; color: var(--text); }
.cf-form-note { font-size: 0.78rem; color: var(--muted); line-height: 1.45; }
.cf-form-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cf-table-wrap { overflow-x: auto; }
.cf-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.cf-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.cf-table td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cf-table tfoot td { font-weight: 700; border-bottom: 0; border-top: 1px solid var(--border); }
.cf-table .num { text-align: right; white-space: nowrap; }
.cf-table a { color: var(--text); font-weight: 600; text-decoration: none; }
.cf-table a:hover { color: var(--accent); }
.cf-row-past td { color: var(--faint); }
.cf-zero-line { stroke: var(--muted); stroke-width: 1.2; }
.cf-today-line { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; }
.cf-today-label { fill: var(--accent); font-size: 10px; font-weight: 700; }
.cf-limit-line { stroke-width: 1; stroke-dasharray: 6 4; opacity: .6; }
.cf-balance-line { fill: none; stroke-width: 2.2; stroke-linejoin: round; }
.cf-balance-pt { stroke: var(--card); stroke-width: 1.5; }
.cf-key-balance { background: #0f766e; }
/* Was wäre wenn */
.cf-scenario { padding: 20px 22px; margin-bottom: 22px; border-color: rgba(15, 118, 110, .35); background: linear-gradient(rgba(15, 118, 110, .05), rgba(15, 118, 110, .05)), var(--card); }
.cf-scenario[hidden] { display: none; }
.cf-scenario .cf-card-head { margin-bottom: 10px; }
.cf-scn-reset { height: 34px; font-size: 13px; }
.cf-scn-reset i, .cf-scn-reset svg { width: 15px; height: 15px; }
.cf-scn-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.cf-scn-chip { border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; text-decoration: line-through; text-decoration-color: var(--faint); }
.cf-scn-chip:hover { border-color: var(--accent); text-decoration: none; }
.cf-scn-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 20px; margin-bottom: 12px; }
.cf-scn-val { font-size: 1.25rem; font-weight: 800; margin-top: 3px; font-variant-numeric: tabular-nums; }
.cf-scn-val span { color: var(--muted); font-weight: 600; font-size: 1rem; }
.cf-scn-hint { display: inline-flex; align-items: center; gap: 4px; }
.cf-scn-hint i, .cf-scn-hint svg { width: 13px; height: 13px; }
.cf-drop { flex: none; width: 30px; height: 30px; margin-left: 6px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--faint); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; order: 3; }
.cf-drop i, .cf-drop svg { width: 15px; height: 15px; }
.cf-drop:hover { color: var(--accent); border-color: var(--border); }
.cf-drop[aria-pressed="true"] { color: #fff; background: var(--accent); border-color: var(--accent); }
.cf-item.cf-excluded .cf-item-main, .cf-item.cf-excluded .cf-item-amount { opacity: .45; text-decoration: line-through; }
/* Konten */
.cf-acct { border: 1px solid var(--line); border-left: 4px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.cf-acct-ok { border-left-color: #16a34a; }
.cf-acct-warn { border-left-color: #f59e0b; }
.cf-acct-bad { border-left-color: #dc2626; }
.cf-acct-head { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.cf-acct-head .cf-swatch { flex: none; }
.cf-acct-sums { margin-left: auto; }
.cf-acct-msg { font-size: 0.84rem; color: var(--muted); margin: 6px 0 10px; }
.cf-acct-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: end; }
.cf-acct-form .field input { height: 40px; }
.cf-acct-form .btn-primary, .cf-acct-form .btn-ghost { height: 40px; }
@media (max-width: 760px) { .cf-acct-form { grid-template-columns: 1fr 1fr; } .cf-acct-form .cf-form-actions { grid-column: 1 / -1; } }
.cf-row-actions { display: flex; gap: 4px; justify-content: flex-end; }
.cf-inline-form { display: inline; margin: 0; }
.cf-icon-btn { height: 32px; width: 32px; padding: 0; justify-content: center; }
.cf-icon-btn i, .cf-icon-btn svg { width: 15px; height: 15px; }
.cf-refunds { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.cf-refunds .cf-check i, .cf-refunds .cf-check svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.cf-refunds .btn-ghost { height: 36px; font-size: 13px; }
/* Rückblick */
.cf-rv-item { display: flex; align-items: center; gap: 10px; padding: 6px 0 6px 10px; border-left: 3px solid var(--border); margin: 2px 0; }
.cf-rv-ok { border-left-color: #16a34a; }
.cf-rv-diff, .cf-rv-missing { border-left-color: #dc2626; }
.cf-rv-open { border-left-color: #f59e0b; }
.cf-rv-item .cf-item-amount { margin-left: auto; }
.cf-rv-ok .cf-item-main, .cf-rv-ok .cf-item-amount { opacity: .7; }
.cf-rv-actions { display: flex; gap: 4px; align-items: center; justify-content: flex-end; flex: none; position: relative; min-width: 108px; }
.cf-rv-actions .cf-inline-form { display: inline-flex; gap: 4px; }
.cf-rv-okbtn { color: #16a34a; }
.cf-rv-okbtn:hover { background: #ecfdf5; border-color: #a7f3d0; }
details.cf-rv-diff { border: 0; }
details.cf-rv-diff > summary { list-style: none; cursor: pointer; }
details.cf-rv-diff > summary::-webkit-details-marker { display: none; }
.cf-rv-diff-form { position: absolute; right: 0; top: 38px; z-index: 5; display: flex; gap: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 8px; box-shadow: 0 10px 24px -10px rgba(0,0,0,.35); }
.cf-rv-diff-form input { width: 110px; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); font: inherit; }
.cf-rv-diff-form .btn-primary { height: 36px; font-size: 13px; }
.cf-rv-price { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 8px 13px; padding: 8px 12px; border-radius: 10px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 0.84rem; }
.cf-rv-price i, .cf-rv-price svg { width: 16px; height: 16px; flex: none; }
.cf-rv-price .btn-ghost { height: 32px; font-size: 13px; margin-left: auto; }
html.dark .cf-rv-price { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .35); color: #fcd34d; }
.cf-rv-exp { fill: var(--border); }
.cf-rv-act { fill: var(--accent); }
.cf-rv-exp-key { background: var(--border); }
.cf-rv-act-key { background: var(--accent); }
.cf-kpi-sub { font-size: 0.9rem; font-weight: 600; color: var(--muted); }
@media (max-width: 640px) { .cf-rv-item { flex-wrap: wrap; } .cf-rv-item .cf-item-amount { margin-left: 0; } }
.cf-legend-static { display: flex; gap: 8px 16px; flex-wrap: wrap; justify-content: center; margin-top: 10px; font-size: 0.8rem; }
.cf-legend-static > span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Auswertungen (stats) ---------- */
.st-panel h2 { margin: 0; font-size: 16px; font-weight: 600; }
.st-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.st-head-ico { display: flex; align-items: center; gap: 11px; }
.st-ico { width: 34px; height: 34px; border-radius: 9px; background: rgba(15, 118, 110, .12); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: none; }
.st-ico i, .st-ico svg { width: 18px; height: 18px; }
.st-ico-green { background: rgba(22, 163, 74, .14); color: #16a34a; }
.st-sub { font-size: 13px; color: var(--muted); margin-top: 3px; max-width: 70ch; }
.st-faint { font-size: 12.5px; color: var(--faint); font-weight: 400; }
.st-small { font-size: 12px; }
.st-toggles { display: flex; gap: 8px; flex-wrap: wrap; }
.st-toggles .set-tab { border: 0; font: inherit; font-size: 13px; }
.st-note { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-top: 12px; line-height: 1.45; }
.st-note i, .st-note svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.st-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; margin-top: 4px; }
.st-up { color: #dc2626; font-weight: 700; }
.st-down, .st-green { color: #15803d; font-weight: 700; }
html.dark .st-up { color: #f87171; }
html.dark .st-down, html.dark .st-green { color: #4ade80; }

.st-trend-svg { width: 100%; min-width: 680px; height: auto; display: block; overflow: visible; }
.st-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.st-prev { fill: none; stroke: var(--faint); stroke-width: 1.5; stroke-dasharray: 4 4; }
.st-area { fill: var(--accent); fill-opacity: .08; }
.st-dot { fill: var(--card); stroke: var(--accent); stroke-width: 2; pointer-events: none; }
.st-dot-cur { stroke-dasharray: 2 2; }
.st-hit { fill: transparent; cursor: pointer; }
.st-hit:hover, .st-hit.on { fill: var(--accent); fill-opacity: .06; }
.st-mark-up { fill: #dc2626; pointer-events: none; }
.st-mark-dn { fill: #16a34a; pointer-events: none; }
.st-month { font-size: 10px; }
.st-key-prev { display: inline-block; width: 16px; border-top: 2px dashed var(--faint); }
.st-key-up { display: inline-block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #dc2626; }
.st-key-cur { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 2px dashed var(--accent); }
.st-legend [hidden] { display: none; }

.st-pc-sum { display: grid; gap: 4px; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.st-pc-list { display: grid; gap: 2px; max-height: 360px; overflow-y: auto; }
.st-pc-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 9px 6px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; border-radius: 6px; }
.st-pc-row:hover { background: var(--bg); }
.st-pc-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.st-pc-name { font-weight: 600; font-size: 13.5px; }
.st-pc-vals { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.st-pc-vals .badge, .st-pc-main .badge { font-size: 11px; padding: 1px 7px; }
.st-badge-up { background: rgba(239, 68, 68, .12); color: #b91c1c; }
.st-badge-down { background: rgba(16, 185, 129, .14); color: #047857; }
.st-badge-plan { background: rgba(99, 102, 241, .12); color: #4338ca; }
html.dark .st-badge-up { color: #fca5a5; }
html.dark .st-badge-down { color: #34d399; }
html.dark .st-badge-plan { color: #a5b4fc; }

.st-budgets { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.st-budget { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--bg); }
.st-budget-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.st-budget-name { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13.5px; }
.st-budget-bars { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 56px; margin-bottom: 6px; }
.st-budget-bars::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--budget); border-top: 1.5px dashed var(--muted); pointer-events: none; }
.st-budget-bar { flex: 1; min-height: 2px; background: var(--accent); opacity: .75; border-radius: 3px 3px 0 0; }
.st-budget-bar.over { background: #dc2626; opacity: .85; }

.st-res-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.st-res-kpi { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.st-kpi-label { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.st-kpi-value { font-size: 20px; font-weight: 800; color: var(--text); margin: 4px 0 2px; }
.st-kpi-value.st-green { color: #15803d; }
html.dark .st-kpi-value.st-green { color: #4ade80; }
.st-res-cal, .st-fc-years { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; margin-bottom: 16px; }
.st-fc-years { grid-template-columns: repeat(5, 1fr); margin: 14px 0 0; }
.st-res-month, .st-fc-year { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.st-res-val { font-size: 10.5px; color: var(--muted); min-height: 14px; white-space: nowrap; }
.st-res-track { width: 100%; height: 70px; display: flex; align-items: flex-end; }
.st-fc-years .st-res-track { height: 48px; }
.st-res-bar { width: 100%; background: var(--accent); opacity: .8; border-radius: 4px 4px 0 0; min-height: 0; }
.st-res-label { font-size: 11px; color: var(--muted); white-space: nowrap; }
.st-table-wrap { overflow-x: auto; }
.st-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.st-table th { text-align: left; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.st-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.st-table .num { text-align: right; white-space: nowrap; }
.st-table a { color: var(--text); font-weight: 600; text-decoration: none; }
.st-table a:hover { text-decoration: underline; }

.st-saved { background: rgba(34, 197, 94, .06); border-color: rgba(34, 197, 94, .3); }
.st-saved-list { display: grid; gap: 8px; }
.st-saved-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 10px 14px; background: var(--card); border: 1px solid rgba(34, 197, 94, .25); border-radius: 8px; color: var(--text); text-decoration: none; }
.st-saved-row:hover { border-color: rgba(34, 197, 94, .6); }
.st-saved-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; }
.st-saved-name i, .st-saved-name svg { width: 16px; height: 16px; color: #16a34a; flex: none; }
.st-saved-row .st-faint { grid-column: 1; }
.st-saved-val { grid-column: 2; grid-row: 1 / span 2; font-size: 13.5px; text-align: right; }
@media (max-width: 640px) {
  .st-res-cal { grid-template-columns: repeat(6, 1fr); }
  .st-saved-row { grid-template-columns: 1fr; }
  .st-saved-val { grid-column: 1; grid-row: auto; text-align: left; }
}

/* ---------- Auswertungen: Grundgerüst (vorher Inline-Styles in stats.html) ---------- */
.st-mt { margin-top: 18px; }
.st-mb { margin-bottom: 18px; }
.st-grow { flex: 1; min-width: 0; }
.st-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-muted { color: var(--muted); }
.st-text { color: var(--text); }
.st-accent { color: var(--accent); }
.st-strong { font-weight: 700; }
.st-normal { font-weight: 400; }
.st-empty { padding: 12px 0; }
.st-per { font-size: 12px; color: var(--faint); font-weight: 400; }
.st-inline-ico, svg.st-inline-ico { width: 16px; height: 16px; color: var(--accent); display: inline-block; vertical-align: middle; margin: -2px 6px 0 0; }
.st-ico-sm { width: 28px; height: 28px; border-radius: 7px; }
.st-ico-sm i, .st-ico-sm svg { width: 16px; height: 16px; }

.st-stat-v { font-size: 28px; }
.st-ic-wallet { color: #0f766e; }
.st-ic-calendar { color: #2563eb; }
.st-ic-divide { color: #7c3aed; }
.st-ic-users { color: #be185d; }

.st-fair-list { display: flex; flex-direction: column; gap: 12px; }
.st-fair-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.st-fair-name { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; font-size: 13.5px; color: var(--text); }
.st-fair-count { font-weight: 400; font-size: 12px; color: var(--muted); flex: none; }
.st-flag-ico, .st-info-ico, svg.st-flag-ico, svg.st-info-ico { width: 13px; height: 13px; flex: none; color: #d97706; }
.st-info-ico, svg.st-info-ico { color: var(--muted); }
.st-fair-val { text-align: right; flex: none; }
.st-fair-val .mono { font-weight: 700; }
.st-flag { color: #d97706; }
.st-fill-accent { background: #0f766e; }
.st-fill-flag { background: #d97706; }
.st-fair-total { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.st-fair-total .st-fair-name { font-weight: 700; }

.st-ai-title { display: flex; align-items: center; gap: 10px; }
.st-ai-title h2 { margin: 0; font-size: 16px; font-weight: 600; }
.st-ai-body { padding: 16px 22px 20px; }
.st-ai-off { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 12px; border: 1px dashed rgba(15, 118, 110, .25); background: linear-gradient(135deg, rgba(15, 118, 110, .04), rgba(45, 212, 191, .04)); }
.st-ai-off h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--text); }
.st-ai-off p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.st-ai-off-ico { width: 40px; height: 40px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: rgba(15, 118, 110, .1); color: #0f766e; }
.st-ai-off-ico i, .st-ai-off-ico svg { width: 18px; height: 18px; }
.st-ai-off-btn { flex: none; height: 34px; padding: 0 12px; font-size: 12.5px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.st-ai-off-btn i, .st-ai-off-btn svg { width: 14px; height: 14px; }
.st-ai-hint { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.st-ai-form { display: flex; gap: 10px; flex-wrap: wrap; }
.st-ai-form .btn-primary, .st-ai-form .btn-ai-savings { height: 46px; }
.st-ai-form .btn-ai-savings i, .st-ai-form .btn-ai-savings svg { width: 15px; height: 15px; }
.st-ai-results { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.st-ai-meta { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 8px; }
.st-ai-meta .panel-head-action-btn i, .st-ai-meta .panel-head-action-btn svg { width: 16px; height: 16px; }

/* KI-Ergebnisse (Vorlage ai_savings_content und JS-Rendering) */
.ai-res-list { display: flex; flex-direction: column; gap: 10px; }
.ai-res-item { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.ai-res-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.ai-res-title { font-weight: 600; font-size: 14px; color: var(--text); }
.ai-res-detail { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.ai-res-item .badge { font-size: 10px; padding: 1px 6px; font-weight: 600; }
.ai-sev { text-transform: uppercase; }
.ai-sev-high { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.ai-sev-mid { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.ai-sev-low { background: #f1f5f9; color: #334155; border: 1px solid #cbd5e1; }
.ai-save { background: #ecfdf5; color: #065f46; border: 1px solid #6ee7b7; }
html.dark .ai-sev-high { background: rgba(239, 68, 68, .15); color: #fca5a5; border-color: rgba(239, 68, 68, .35); }
html.dark .ai-sev-mid { background: rgba(245, 158, 11, .15); color: #fcd34d; border-color: rgba(245, 158, 11, .35); }
html.dark .ai-sev-low { background: rgba(148, 163, 184, .15); color: #cbd5e1; border-color: rgba(148, 163, 184, .35); }
html.dark .ai-save { background: rgba(16, 185, 129, .15); color: #6ee7b7; border-color: rgba(16, 185, 129, .35); }
.ai-res-list + .ai-res-alt { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.ai-res-alt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ai-res-alt-head i, .ai-res-alt-head svg { width: 14px; height: 14px; color: var(--accent); }
.ai-res-alt-head h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--text); }
.ai-res-src { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 11.5px; color: var(--accent); text-decoration: none; }
.ai-res-src i, .ai-res-src svg { width: 11px; height: 11px; }
.ai-empty { text-align: center; padding: 16px 0; }
.ai-empty-ico { width: 40px; height: 40px; border-radius: 50%; margin-bottom: 10px; display: inline-flex; align-items: center; justify-content: center; background: #ecfdf5; color: #10b981; }
html.dark .ai-empty-ico { background: rgba(16, 185, 129, .15); }
.ai-empty-ico i, .ai-empty-ico svg { width: 20px; height: 20px; }
.ai-empty-title { font-weight: 600; font-size: 14px; color: var(--text); }
.ai-empty-desc { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.ai-loading { text-align: center; padding: 24px 0; }
.ai-loading .ai-prefill-status { display: inline-flex; align-items: center; margin-top: 0; }
.ai-err { display: flex; align-items: flex-start; gap: 8px; padding: 12px 16px; border-radius: 10px; font-size: 13px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
html.dark .ai-err { background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .35); color: #fca5a5; }
.ai-err i, .ai-err svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.ai-err-title { font-weight: 600; margin-bottom: 2px; }

.st-pivot-head { flex-wrap: wrap; gap: 10px; }
.st-bar-top { align-items: flex-start; }
.st-bar-val { display: flex; flex-direction: column; align-items: flex-end; gap: 0; }
.st-bar-main { display: flex; align-items: center; gap: 8px; }
.st-bar-mine { font-size: 10.5px; color: var(--muted); white-space: nowrap; margin-top: 2px; }
a.bar-link-row { display: block; color: inherit; text-decoration: none; }
.bar-link-row:hover .bar-name { color: var(--accent); text-decoration: underline; }
a.st-top-row { color: inherit; text-decoration: none; }
a.st-top-row:hover .top-name { color: var(--accent); }
.st-top-val { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }

.st-settle-list { display: grid; gap: 12px; margin-top: 4px; }
.st-settle { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 16px 20px; }
.st-settle-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.st-settle-who { font-size: 14px; color: var(--text); }
.st-settle-who .badge { font-weight: 600; margin: 0 8px; }
.st-settle-who .badge:first-child { margin-left: 0; }
.st-debtor { background: #fee2e2; color: #b91c1c; }
.st-creditor { background: #dcfce7; color: #15803d; }
html.dark .st-debtor { background: rgba(239, 68, 68, .15); color: #fca5a5; }
html.dark .st-creditor { background: rgba(34, 197, 94, .15); color: #86efac; }
.st-settle-amt { font-size: 18px; font-weight: 700; color: var(--accent); }
.st-settle-details { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); display: grid; gap: 6px; }
.st-settle-label { font-size: 12px; color: var(--muted); font-weight: 500; }
.st-settle-label:not(:first-child) { margin-top: 4px; }
.st-settle-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--faint); padding-left: 10px; }

.st-sim-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; margin-top: 20px; align-items: stretch; }
.st-sim-list { max-height: 360px; overflow-y: auto; padding-right: 10px; border-right: 1px solid var(--border); }
.st-sim-items { display: grid; gap: 10px; }
.st-sim-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; user-select: none; transition: all .15s ease; }
.st-sim-item.off { opacity: .5; background: var(--line); border-color: var(--border); }
.st-sim-left { display: flex; align-items: center; gap: 12px; min-width: 0; font-weight: 600; font-size: 13.5px; }
.st-sim-left input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; flex: none; }
.st-sim-amt { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.st-sim-result { display: flex; flex-direction: column; justify-content: space-between; padding: 20px; border-radius: 12px; background: rgba(15, 118, 110, .05); border: 1px solid rgba(15, 118, 110, .15); }
.st-sim-big { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 12px; }
.st-sim-big .mono { font-size: 32px; font-weight: 800; color: var(--accent); }
.st-sim-unit { font-size: 14.5px; font-weight: 600; color: var(--muted); }
.st-sim-line { font-size: 14px; font-weight: 500; color: var(--text); margin-bottom: 8px; }
.st-sim-line strong { font-size: 18px; }
.st-sim-total { margin-top: 10px; padding-top: 14px; border-top: 1px solid rgba(15, 118, 110, .15); }
.st-sim-total-label { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.st-sim-total-row { display: flex; justify-content: space-between; align-items: baseline; }
.st-sim-total-row .mono { font-size: 20px; font-weight: 700; color: var(--text); }
.st-sim-foot { margin-top: 20px; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.st-sim-foot i, .st-sim-foot svg { width: 13px; height: 13px; display: inline-block; vertical-align: middle; margin-right: 4px; }
@media (max-width: 768px) {
  .st-sim-grid, .st-fc-grid { grid-template-columns: 1fr !important; }
  .st-sim-list { border-right: 0; border-bottom: 1px solid var(--border); padding-bottom: 16px; }
}

.st-opt { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; padding: 14px 16px; font-size: 13px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
.st-opt:first-of-type { margin-top: 6px; }
.st-opt-label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); cursor: pointer; }
.st-opt-label input { cursor: pointer; }
.st-opt-rate { align-items: center; gap: 8px; }
.st-opt-rate input { width: 64px; padding: 6px 8px; text-align: right; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); }
.st-opt-desc { flex: 1; min-width: 220px; font-size: 12px; color: var(--muted); }

.fc-filter-details { margin-bottom: 18px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
.fc-filter-details summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 12px 16px; cursor: pointer; font-weight: 700; font-size: 13px; color: var(--text); }
.fc-filter-details summary > i, .fc-filter-details summary > svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.fc-filter-details summary::-webkit-details-marker { display: none; }
.fc-filter-details summary::marker { content: ""; }
.fc-filter-details summary .fc-filter-chev { margin-left: auto; transition: transform .15s ease; }
.fc-filter-details[open] summary .fc-filter-chev { transform: rotate(180deg); }
.fc-filter-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.fc-filter-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.fc-links { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--border); }
.fc-links button { border: 0; background: transparent; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--accent); cursor: pointer; padding: 0; }
.fc-links button.muted { color: var(--muted); font-weight: 500; }
.fc-search { position: relative; max-width: 320px; }
.fc-search i, .fc-search svg { position: absolute; left: 10px; top: 9px; width: 14px; height: 14px; color: var(--muted); }
.fc-search input { width: 100%; padding: 8px 10px 8px 30px; font-size: 12.5px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); }
.fc-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 4px; }
.fc-cat-group { display: grid; gap: 0; align-content: start; }
.fc-cat-row { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; padding: 7px 4px; font-weight: 600; font-size: 12.5px; color: var(--text); border-bottom: 1px solid var(--line); cursor: pointer; transition: background .15s; }
.fc-cat-row:hover { background: var(--bg); }
.fc-cat-row input { cursor: pointer; flex: none; }
.fc-cat-arrow, svg.fc-cat-arrow { width: 14px; height: 14px; color: var(--muted); transition: transform .2s; flex: none; }
.fc-cat-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.fc-cat-count { font-weight: 400; font-size: 11px; color: var(--muted); flex: none; }
.fc-sub-list { border-left: 2px solid var(--line); margin-left: 8px; padding: 7px 0 2px 12px; gap: 5px; }
.fc-sub { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 0; font-size: 12px; color: var(--faint); cursor: pointer; }
.fc-sub-name { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.fc-sub-name input { cursor: pointer; flex: none; }
.fc-sub-ico, svg.fc-sub-ico { width: 11px; height: 11px; color: #d97706; flex: none; }
.fc-sub-price { font-size: 11px; color: var(--muted); flex: none; }
.fc-sub-price.is-share { color: var(--accent); }

.st-fc-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: stretch; }
.st-fc-chart { display: flex; flex-direction: column; justify-content: center; padding: 16px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; }
.st-fc-chart-head { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 12.5px; color: var(--muted); }
.st-fc-svg { overflow: visible; display: block; }
.st-fc-area { fill: var(--accent); fill-opacity: .1; }
.st-fc-base { stroke: var(--border); stroke-width: 1.5; }
.st-fc-gridline { stroke: var(--border); stroke-width: 1; stroke-dasharray: 4 4; }
.st-fc-axis { font-size: 10px; fill: var(--faint); }
.st-fc-line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.fc-svg-dot { fill: var(--card); stroke: var(--accent); stroke-width: 2; }
.fc-svg-dot-minor { opacity: .5; }
.st-fc-year-label { font-size: 10px; fill: var(--muted); }
.st-fc-side { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.st-fc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fc-tile { border-radius: 10px; padding: 12px; text-align: center; }
.fc-tile-1 { background: var(--bg); border: 1px solid var(--line); }
.fc-tile-3 { background: rgba(15, 118, 110, .05); border: 1px solid rgba(15, 118, 110, .16); }
.fc-tile-5 { background: rgba(15, 118, 110, .10); border: 1px solid rgba(15, 118, 110, .28); }
.fc-tile-k { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--muted); }
.fc-tile-val { font-size: 14.5px; font-weight: 700; color: var(--text); margin-top: 4px; }
.fc-tile-5 .fc-tile-val { color: var(--accent); }
.st-fc-info { flex: 1; display: flex; align-items: center; padding: 16px; font-size: 13px; line-height: 1.5; color: var(--text); background: rgba(15, 118, 110, .04); border: 1px solid rgba(15, 118, 110, .12); border-radius: 10px; }

/* ---------- Zahlungsverlauf-Tabelle ---------- */
.pay-table-wrap { max-height: 540px; overflow: auto; }
.pay-table { width: 100%; border-collapse: collapse; font-size: 13.5px; text-align: left; }
.pay-table th { padding: 11px 18px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); background: #fafbfc; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; }
.pay-table td { padding: 12px 18px; border-bottom: 1px solid var(--line); }
.pay-table tfoot td { padding: 13px 18px; font-weight: 600; background: var(--bg); border-top: 2px solid var(--line); position: sticky; bottom: 0; z-index: 2; }
.pay-table tr.pay-fut { background: rgba(248, 250, 252, 0.7); }
.pay-table tr.pay-paused { background: #fffdf5; }
.pay-pause-banner { padding: 12px 22px; background: #fffbeb; border-bottom: 1px solid #fef3c7; color: #92400e; font-size: 13px; display: flex; align-items: center; gap: 8px; }

html.dark .pay-table th { background: #1a2231 !important; color: var(--faint); border-color: var(--line); }
html.dark .pay-table tfoot td { background: #161e2e !important; border-color: var(--line); }
html.dark .pay-table tr.pay-fut { background: rgba(255, 255, 255, 0.02) !important; }
html.dark .pay-table tr.pay-paused { background: rgba(245, 158, 11, 0.07) !important; }
html.dark .pay-pause-banner { background: rgba(245, 158, 11, 0.12) !important; border-color: rgba(245, 158, 11, 0.25) !important; color: #fbbf24 !important; }

/* Status-Badges im Zahlungsverlauf */
.pay-status-upcoming { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 12px; background: #e0f2fe; color: #0369a1; font-size: 11.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.pay-status-upcoming svg, .pay-status-upcoming i { width: 12px; height: 12px; flex: none; }
.pay-status-paused { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 12px; background: #fef3c7; color: #b45309; font-size: 11.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.pay-status-paused svg, .pay-status-paused i { width: 12px; height: 12px; flex: none; }
.pay-status-paid { display: inline-flex; align-items: center; gap: 5px; color: #059669; font-size: 12.5px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.pay-status-paid svg, .pay-status-paid i { width: 13px; height: 13px; flex: none; }

html.dark .pay-status-upcoming { background: rgba(14, 165, 233, 0.16) !important; color: #38bdf8 !important; }
html.dark .pay-status-paused { background: rgba(245, 158, 11, 0.16) !important; color: #fbbf24 !important; }
html.dark .pay-status-paid { color: #34d399 !important; }

.pay-status-upcoming svg, .pay-status-upcoming i,
.pay-status-paused svg, .pay-status-paused i,
.pay-status-paid svg, .pay-status-paid i {
  display: inline-block !important;
  vertical-align: middle;
}

/* Zahlungszeile in der Vertragszelle */
.sub-cell .sub-pm { display: flex; align-items: center; gap: 5px; margin: 1px 0 0 0; padding: 0; border: none; font-size: 12px; font-weight: 500; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sub-cell .sub-pm .pm-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-cell .sub-pm i, .sub-cell .sub-pm svg.lucide { width: 13px; height: 13px; flex: none; }
.sub-cell .sub-pm .pm-mark-img { flex: none; }

/* ---------- Spotlight Command Palette (CMD+K) ---------- */
.spotlight-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 16px 24px;
}
.spotlight-backdrop {
  position: absolute; inset: 0;
}
.spotlight-dialog {
  position: relative; width: 100%; max-width: 580px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
  display: flex; flex-direction: column; overflow: hidden; max-height: 72vh;
}
.spotlight-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.spotlight-search-icon {
  width: 20px; height: 20px; color: var(--muted); flex: none;
}
.spotlight-header input {
  flex: 1; border: none; background: transparent; font-size: 15.5px;
  color: var(--text); outline: none; font-family: inherit;
}
.spotlight-esc {
  font-size: 11px; padding: 2px 6px; border-radius: 4px;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--muted); font-family: monospace; font-weight: 600; cursor: pointer;
}
.spotlight-body {
  overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px;
}
.spotlight-group { margin-bottom: 8px; }
.spotlight-group:last-child { margin-bottom: 0; }
.spotlight-group-title {
  padding: 6px 12px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--faint);
}
.spotlight-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: 8px; text-decoration: none;
  color: var(--text); transition: background 0.1s ease; cursor: pointer;
}
.spotlight-item:hover, .spotlight-item.is-active {
  background: var(--bg);
}
.spotlight-item-logo {
  width: 28px; height: 28px; border-radius: 6px; object-fit: contain; flex: none;
}
.spotlight-item-initial {
  width: 28px; height: 28px; border-radius: 6px; display: flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: none;
}
.spotlight-item-main { flex: 1; min-width: 0; }
.spotlight-item-name {
  font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px;
}
.spotlight-item-sub {
  font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-top: 2px;
}
.spotlight-item-price { text-align: right; flex: none; }
.spotlight-item-price .mono { font-weight: 600; font-size: 13.5px; }
.spotlight-item-monthly { font-size: 11.5px; color: var(--muted); }
.spotlight-action-ico {
  width: 28px; height: 28px; border-radius: 6px; background: rgba(15, 118, 110, 0.10);
  color: var(--accent); display: flex; align-items: center; justify-content: center; flex: none;
}
.spotlight-action-ico i, .spotlight-action-ico svg { width: 15px; height: 15px; }
.spotlight-tag {
  font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 4px;
}
.spotlight-tag.tag-paused { background: #fef3c7; color: #b45309; }
.spotlight-empty {
  padding: 32px 20px; text-align: center; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 14px;
}
.spotlight-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px; border-top: 1px solid var(--line);
  background: var(--bg); font-size: 11.5px; color: var(--muted);
}
.spotlight-footer-keys { display: flex; align-items: center; gap: 12px; }
.spotlight-footer-keys kbd {
  font-size: 10.5px; padding: 1px 5px; border-radius: 3px;
  background: var(--card); border: 1px solid var(--border); font-family: monospace;
}
.spotlight-footer-brand { font-size: 11px; font-weight: 600; color: var(--faint); }

/* Spotlight hint in search inputs */
.search-spotlight-hint {
  display: inline-flex; align-items: center; padding: 2px 5px;
  border-radius: 4px; background: var(--bg); border: 1px solid var(--border);
  color: var(--muted); font-size: 11px; font-family: monospace;
  font-weight: 600; cursor: pointer; margin-right: 6px; flex: none;
}
html.dark .spotlight-dialog { background: #161e2e; border-color: var(--border); }
html.dark .spotlight-item:hover, html.dark .spotlight-item.is-active { background: #1e293b; }
html.dark .spotlight-footer { background: #111827; }
html.dark .spotlight-tag.tag-paused { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
html.dark .spotlight-action-ico { background: rgba(45, 212, 191, 0.12); color: var(--accent-soft); }
.side-search .search-spotlight-hint { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.2); color: var(--sb-sub); }

/* Kündigungsradar Status */
html.dark .cancel-radar-card.ok-state {
  background: rgba(22, 163, 74, 0.12) !important;
  border-color: rgba(22, 163, 74, 0.3) !important;
}
html.dark .cancel-radar-card.ok-state span {
  color: #86efac !important;
}
html.dark .cancel-radar-card.ok-state a {
  color: #86efac !important;
}

/* Detailseite: Archivdatum nachtragen */
.archived-at-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.archived-at-form label { font-weight: 600; }
.archived-at-form input[type=date] { padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); }

/* KI-Popup "Frag deine Abos" (vorher Inline-Styles in modal_ai.html) */
.ai-modal { width: 100%; max-width: 600px; }
.ai-modal-title { margin: 0; font-size: 16px; font-weight: 600; }
.ai-modal-body { padding: 16px 22px 20px; }
.ai-modal-hint { font-size: 13.5px; color: var(--muted); margin-bottom: 12px; }
.ai-modal-form { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
.ai-modal-form input { flex: 1; min-width: 200px; height: 42px; padding: 0 14px; font-size: 14px; border: 1px solid var(--border); border-radius: 10px; outline: none; background: var(--bg); color: var(--text); }
.ai-modal-form .btn-primary, .ai-modal-form .btn-ai-savings { height: 42px; }
.ai-modal-form .btn-ai-savings i, .ai-modal-form .btn-ai-savings svg { width: 15px; height: 15px; }
.ai-modal-answer { margin-top: 16px; max-height: 300px; overflow-y: auto; padding: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.ai-modal-scroll { max-height: 300px; overflow-y: auto; }

/* Einstellungen → Zeitplan */
.sched-stack { display: grid; gap: 18px; }
.sched-flash { margin: 0; }
.sched-flash-err { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.sched-tz { font-size: 12.5px; color: var(--faint); }
.sched-intro { padding: 14px 22px 4px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.sched-job { display: flex; gap: 14px; align-items: flex-start; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.sched-ico { width: 34px; height: 34px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(15, 118, 110, .12); color: var(--accent); }
.sched-ico i, .sched-ico svg { width: 18px; height: 18px; }
.sched-main { flex: 1; min-width: 0; }
.sched-title { font-weight: 600; font-size: 14.5px; color: var(--text); }
.sched-desc { font-size: 12.5px; line-height: 1.45; color: var(--muted); margin-top: 2px; max-width: 70ch; }
.sched-status { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 8px; font-size: 12.5px; }
.sched-last { color: var(--muted); }
.sched-result { color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; }
.sched-result.err { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
html.dark .sched-result.err { color: #fca5a5; background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .35); }
.sched-badge-run { background: rgba(15, 118, 110, .1); color: var(--accent); }
.sched-badge-run i, .sched-badge-run svg { width: 12px; height: 12px; animation: ai-spin 1s linear infinite; }
.sched-next { margin-top: 4px; font-size: 12.5px; color: var(--faint); }
.sched-controls { display: flex; align-items: center; gap: 10px; flex: none; }
.sched-time { height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--card); color: var(--text); font: inherit; font-size: 14px; }
.sched-run { height: 38px; display: inline-flex; align-items: center; gap: 6px; }
.sched-run i, .sched-run svg { width: 14px; height: 14px; }
.sched-foot { display: flex; justify-content: flex-end; }
@media (max-width: 720px) {
  .sched-job { flex-wrap: wrap; }
  .sched-controls { width: 100%; padding-left: 48px; flex-wrap: wrap; }
}
/* Einstellungen: mit dem Zeitplan-Tab ist die Tab-Leiste breiter als die
   Inhaltsspalte – die Spalte darf nicht mitwachsen, die Tabs brechen um. */
.wrap-narrow, .set-wrap { grid-template-columns: minmax(0, 1fr); }
.wrap-narrow > .set-tabs, .set-wrap > .set-tabs { width: auto; flex-wrap: wrap; }

/* ---------- Kalender (Überarbeitung: Filter, Summen, Markierungen, Agenda) ---------- */
.cal-wrap { max-width: 1180px; }
.cal-head { flex-wrap: wrap; gap: 12px; }
.cal-filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.cal-workday { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; background: var(--card); }
.cal-workday i, .cal-workday svg { width: 15px; height: 15px; }
.cal-workday.on { color: var(--accent); border-color: rgba(15, 118, 110, .4); }
.cal-sums { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.cal-sum { display: flex; flex-direction: column; gap: 2px; padding: 11px 16px; border-radius: 10px; background: var(--card); border: 1px solid var(--border); }
.cal-sum .l { font-size: 12px; color: var(--muted); }
.cal-sum .v { font-size: 17px; font-weight: 700; color: var(--text); }
.cal-sum .s { font-size: 11.5px; color: var(--faint); }
.cal-sum-open .v { color: var(--accent); }

.cal-cell.is-weekend { background: rgba(148, 163, 184, .06); }
.cal-cell.is-past .cal-day { color: var(--faint); }
.cal-event { background: color-mix(in srgb, var(--c) 12%, transparent); }
.cal-event .dot { background: var(--c); border-radius: 50%; flex: none; }
.cal-event.is-paid { opacity: .55; }
.cal-up { margin-left: auto; font-size: 9px; color: #dc2626; flex: none; }
.cal-up.down { color: #16a34a; }
.cal-mark { display: flex; align-items: center; gap: 5px; padding: 2px 6px; border-radius: 6px; font-size: 11px; font-weight: 600; min-width: 0; }
.cal-mark i, .cal-mark svg { width: 12px; height: 12px; flex: none; }
.cal-mark .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-mark-deadline { background: rgba(239, 68, 68, .1); color: #b91c1c; }
.cal-mark-end { background: rgba(100, 116, 139, .12); color: #475569; }
html.dark .cal-mark-deadline { color: #fca5a5; }
html.dark .cal-mark-end { color: #cbd5e1; }
.cal-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Ausgewählter Tag in der Akzentfarbe statt Blau */
.cal-cell.is-selected { background: rgba(15, 118, 110, .08) !important; box-shadow: inset 0 0 0 2px var(--accent); }
.cal-cell.is-selected .cal-day { background: var(--accent); color: #fff; border-radius: 12px; padding: 0 7px; }
.cal-cell.is-selected.is-today { box-shadow: inset 0 0 0 2px var(--accent); }
html.dark .cal-cell.is-selected { background: rgba(45, 212, 191, .1) !important; }

.cal-day-details[hidden] { display: none; }
.cal-dd-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.cal-dd-head h3 { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--text); }
.cal-dd-total { font-size: 16px; font-weight: 700; color: var(--accent); }
.cal-badge-today { background: rgba(15, 118, 110, .12); color: var(--accent); font-size: 11px; padding: 1px 8px; vertical-align: middle; }
.cal-dd-list { display: flex; flex-direction: column; gap: 6px; }
.cal-dd-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 9px 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); color: inherit; text-decoration: none; }
.cal-dd-row:hover { border-color: var(--border); }
.cal-dd-row:hover .nm { color: var(--accent); }
.cal-dd-row .left { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.cal-dd-row .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; margin-top: 6px; background: var(--c); }
.cal-dd-row .left > i, .cal-dd-row .left > svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.cal-dd-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-dd-row .nm { font-size: 13.5px; font-weight: 600; color: var(--text); }
.cal-dd-row .meta { font-size: 12px; color: var(--muted); }
.cal-dd-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.cal-dd-badges:empty { display: none; }
.cal-dd-badges .badge { font-size: 10.5px; padding: 1px 7px; }
.cal-dd-row .right { display: flex; flex-direction: column; align-items: flex-end; flex: none; text-align: right; font-size: 12.5px; color: var(--muted); }
.cal-dd-row .amt { font-size: 14px; font-weight: 700; color: var(--text); }
.cal-dd-row .amt-eur, .cal-dd-row .my-share { font-size: 11.5px; color: var(--muted); }
.cal-dd-row.is-paid { opacity: .75; }
.cal-dd-mark.cal-mark-deadline { background: rgba(239, 68, 68, .06); border-color: rgba(239, 68, 68, .25); }
.cal-dd-mark .right { font-weight: 600; color: inherit; }
.cal-b-paid { background: rgba(100, 116, 139, .14); color: var(--muted); }
.cal-b-info { background: rgba(99, 102, 241, .12); color: #4338ca; }
.cal-b-up { background: rgba(239, 68, 68, .12); color: #b91c1c; }
.cal-b-down { background: rgba(16, 185, 129, .14); color: #047857; }
.cal-b-end { background: rgba(100, 116, 139, .14); color: var(--text); }
html.dark .cal-b-info { color: #a5b4fc; }
html.dark .cal-b-up { color: #fca5a5; }
html.dark .cal-b-down { color: #34d399; }

.cal-agenda { display: none; }
.cal-agenda-day { padding: 14px 16px; border-bottom: 1px solid var(--line); scroll-margin-top: 80px; }
.cal-agenda-day:last-child { border-bottom: 0; }
.cal-agenda-day.is-past { opacity: .7; }
.cal-agenda-day.is-today { background: rgba(15, 118, 110, .05); }
.cal-flash { animation: cf-flash 1.6s ease-out; }

.ics-body { padding: 18px 22px; }
.ics-flash { margin: 0 0 16px; }
.ics-reset { margin-left: auto; }

@media (max-width: 720px) {
  .cal-agenda { display: block; margin-top: 18px; }
  .cal-day-details { display: none !important; }
  .cal-nav { width: 100%; justify-content: space-between; gap: 8px; }
  .cal-nav h2 { min-width: 0; font-size: 17px; }
  .cal-today span { display: none; }
  .cal-today { width: 38px; padding: 0; justify-content: center; }
  .cal-filter { width: 100%; }
  .cal-filter .cf-select { flex: 1; min-width: 0; }
  .cal-mark .nm { display: none; }
  .cal-mark { justify-content: center; padding: 2px; }
  .cal-sums { grid-template-columns: repeat(2, 1fr); }
  .cal-dd-row { flex-direction: column; }
  .cal-dd-row .right { align-items: flex-start; text-align: left; padding-left: 19px; }
}
.cal-cell .cal-day { align-self: flex-start; }

/* Einstellungen → Telegram */
.set-grow { flex: 1; min-width: 0; }
.tg-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 13px; background: var(--line); color: var(--faint); }
.tg-state i, .tg-state svg { width: 14px; height: 14px; }
.tg-state.on { background: rgba(15, 118, 110, .12); color: var(--accent); }
.tg-input { width: 240px; height: 42px; border: 1px solid var(--border); border-radius: 9px; padding: 0 12px; font-size: 14px; background: var(--card); color: var(--text); outline: none; }
.tg-chat { display: flex; gap: 8px; }
.tg-chat .tg-input { width: 150px; }
.tg-chat .btn-ghost { height: 42px; }
.tg-foot { display: flex; justify-content: space-between; align-items: center; }
@media (max-width: 640px) { .tg-input, .tg-chat { width: 100%; } .tg-chat .tg-input { flex: 1; width: auto; } }

/* ---------- Abo-Liste (Überarbeitung) ---------- */
.sl-flash { margin: 0 0 16px; }
.sl-flash-err { margin: 0 0 16px; background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.sl-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.sl-tabs { margin: 0; }
.sl-count { font-size: 11.5px; opacity: .65; margin-left: 6px; font-weight: 400; font-family: var(--font-mono, monospace); }
.sl-top-actions { display: flex; align-items: center; gap: 10px; }
.sl-search-note { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.sl-search-note a { display: inline-flex; color: var(--faint); }
.sl-search-note i, .sl-search-note svg { width: 14px; height: 14px; }
.sl-export { height: 36px; display: inline-flex; align-items: center; gap: 6px; }
.sl-export i, .sl-export svg { width: 15px; height: 15px; }
.sl-controls { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.sl-flags .chip { height: 32px; font-size: 12.5px; }
.sl-flags .chip i, .sl-flags .chip svg { width: 14px; height: 14px; }
.sl-flag-deadline.active { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.sl-flag-price.active { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.sl-controls .filter-controls { margin-left: auto; }
.sl-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.sl-pmform { margin: 0; }
.sl-hidepaid { margin: 0; }
.sl-hidepaid label { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--muted); cursor: pointer; user-select: none; }
.sl-hidepaid input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.sl-reset { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.sl-reset i, .sl-reset svg { width: 14px; height: 14px; }
.sl-inline { display: inline; }

.sl-bulk { position: sticky; top: 8px; z-index: 20; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; padding: 10px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--accent); box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .3); }
.sl-bulk[hidden] { display: none; }
.sl-bulk-count { font-weight: 700; font-size: 13.5px; margin-right: 6px; }
.sl-bulk .btn-ghost { height: 34px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.sl-bulk .btn-ghost i, .sl-bulk .btn-ghost svg { width: 14px; height: 14px; }
.sl-bulk-select { height: 34px; border: 1px solid var(--border); border-radius: 9px; padding: 0 8px; background: var(--card); color: var(--text); font: inherit; font-size: 13px; }
.sl-bulk-clear { margin-left: auto; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; }
.sl-head-name { display: inline-flex; align-items: center; gap: 10px; }
.sl-check { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; flex: none; }
.trow.is-selected { background: rgba(15, 118, 110, .06); }

.trow .sub-ava:not(.has-logo) { background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c); }
.trow .sub-ava.has-logo { background: #fff; }
.sl-main { min-width: 0; }
.sl-hints { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.sl-hint { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 6px; background: var(--line); color: var(--muted); white-space: nowrap; }
.sl-hint-deadline { background: rgba(245, 158, 11, .14); color: #b45309; }
.sl-hint-deadline-soon { background: rgba(239, 68, 68, .12); color: #b91c1c; }
.sl-hint-end { background: rgba(100, 116, 139, .14); color: var(--text); }
.sl-hint-price-up { background: rgba(239, 68, 68, .1); color: #b91c1c; }
.sl-hint-price-down { background: rgba(16, 185, 129, .12); color: #047857; }
.sl-hint-paused { background: rgba(245, 158, 11, .12); color: #b45309; }
html.dark .sl-hint-deadline, html.dark .sl-hint-paused { color: #fbbf24; }
html.dark .sl-hint-deadline-soon, html.dark .sl-hint-price-up { color: #fca5a5; }
html.dark .sl-hint-price-down { color: #34d399; }
.sl-paid { color: var(--faint); }
.sl-rel { font-size: 11.5px; color: var(--accent); font-weight: 600; }
.cell-amt .amt-month { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.cell-amt .share-amt { white-space: nowrap; font-size: 11px; font-weight: 500; color: var(--muted); }
.sl-sum { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sl-sum-sub { flex-basis: 100%; text-align: right; font-size: 12px; color: var(--faint); }
@media (max-width: 860px) {
  .trow .row-actions .act-btn { width: 38px; height: 38px; }
  .trow .row-actions .act-btn i, .trow .row-actions .act-btn svg { width: 16px; height: 16px; }
  .sl-controls .filter-controls { margin-left: 0; }
  .table-foot { flex-wrap: wrap; gap: 8px; }
  .sl-sum, .sl-sum-sub { justify-content: flex-start; text-align: left; }
}
@media (max-width: 600px) {
  .sl-pmform { height: auto; width: 100%; flex-wrap: wrap; row-gap: 6px; padding: 6px 12px; }
  .sl-pmform select { flex: 1; min-width: 0; max-width: none; }
  .sl-pmform .sl-sep { display: none; }
  .sl-pmform select + .sl-sep + i, .sl-pmform select + i { margin-left: 0; }
}

/* ---- Detailseite: Kündigung, Dokumente, Änderungsverlauf ---- */
.flash.flash-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.cancel-badge, .trial-badge { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 2px 9px; border-radius: 14px; font-size: 11.5px; font-weight: 600; vertical-align: middle; }
.cancel-badge { background: rgba(220, 38, 38, .1); color: #b91c1c; }
.trial-badge { background: rgba(124, 58, 237, .1); color: #6d28d9; }
.cancel-badge i, .trial-badge i { font-size: 13px; }
html.dark .cancel-badge { color: #fca5a5; }
html.dark .trial-badge { color: #c4b5fd; }
.detail-hint { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; border: 1px solid; }
.detail-hint > i { flex: none; font-size: 18px; margin-top: 1px; }
.detail-hint strong { display: block; margin-bottom: 2px; }
.detail-hint a { color: inherit; font-weight: 600; }
.hint-trial { background: rgba(124, 58, 237, .07); border-color: rgba(124, 58, 237, .25); color: #5b21b6; }
.hint-increase { background: rgba(245, 158, 11, .08); border-color: rgba(245, 158, 11, .3); color: #92400e; }
html.dark .hint-trial { color: #ddd6fe; }
html.dark .hint-increase { color: #fde68a; }
.dx-h { margin: 0 0 10px; font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.dx-h i { font-size: 18px; }
.dx-count { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 0 8px; }
.dx-p { margin: 0 0 12px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.dx-inline { display: inline; margin: 0; }
.dx-cancel-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; align-items: start; }
.dx-cancel-form .field { margin: 0; }
.dx-actions { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; }
.dx-docs { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.dx-docs li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.dx-kind { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: rgba(15, 118, 110, .1); color: var(--accent); white-space: nowrap; }
.dx-doc-name { font-weight: 600; font-size: 13.5px; color: var(--text); text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dx-doc-name:hover { text-decoration: underline; }
.dx-meta { font-size: 12px; color: var(--faint); }
.dx-doc-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.dx-doc-actions form { margin: 0; }
.dx-doc-actions a, .dx-doc-actions button { display: inline-flex; padding: 5px; border: 0; background: transparent; color: var(--muted); cursor: pointer; border-radius: 6px; }
.dx-doc-actions button { color: #ef4444; }
.dx-doc-actions i { width: 15px; height: 15px; }
.dx-upload { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dx-upload select, .dx-upload input[type=text] { height: 38px; padding: 0 12px; border: 1px solid #d8dee4; border-radius: 10px; background: var(--card); color: var(--text); font: inherit; font-size: 13.5px; outline: none; }
.dx-upload select { padding-right: 28px; cursor: pointer; }
.dx-upload select:focus, .dx-upload input[type=text]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(15, 118, 110, .16); }
.dx-upload input[type=file] { color: var(--muted); }
.dx-upload input[type=file]::file-selector-button { margin-right: 10px; height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--card); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.dx-upload input[type=file]::file-selector-button:hover { border-color: var(--accent); color: var(--accent); }
.dx-upload .btn-ghost { height: 38px; }
html.dark .dx-upload select, html.dark .dx-upload input[type=text] { border-color: var(--border); }
.dx-upload input[type=text] { flex: 1 1 160px; min-width: 0; }
.dx-upload input[type=file] { flex: 1 1 200px; min-width: 0; font-size: 13px; }
.dx-changes { list-style: none; margin: 0; padding: 6px 22px 16px; }
.dx-changes li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.dx-changes li:last-child { border-bottom: 0; }
.dx-changes li.undone { opacity: .55; }
.dx-ch-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.dx-undo { height: 28px; padding: 0 10px; font-size: 12px; margin-left: auto; }
.dx-ch-fields { margin-top: 4px; display: grid; gap: 2px; font-size: 12.5px; color: var(--muted); }
.dx-ch-label { color: var(--text); font-weight: 500; }
.dx-ch-old { text-decoration: line-through; color: var(--faint); }
.dx-ch-new { color: var(--text); }
@media (max-width: 560px) { .dx-undo { margin-left: 0; } }
.sl-hint-cancelled { background: rgba(220, 38, 38, .1); color: #b91c1c; }
.sl-hint-trial { background: rgba(124, 58, 237, .1); color: #6d28d9; }
html.dark .sl-hint-cancelled { color: #fca5a5; }
html.dark .sl-hint-trial { color: #c4b5fd; }
/* ---- Datenqualität (/checks) ---- */
.chk-summary { display: flex; gap: 12px; align-items: flex-start; }
.chk-summary > i { font-size: 22px; flex: none; }
.chk-summary strong { display: block; font-size: 15px; }
.chk-summary span { font-size: 13px; color: var(--muted); }
.chk-h { display: flex; align-items: center; gap: 8px; }
.chk-h i { font-size: 17px; color: var(--accent); }
.chk-desc { padding: 12px 22px 0; }
.chk-list { list-style: none; margin: 0; padding: 0 22px 12px; }
.chk-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 0; border-bottom: 1px solid var(--line); }
.chk-list li:last-child { border-bottom: 0; }
.chk-list li > a { font-weight: 600; color: var(--text); text-decoration: none; }
.chk-list li > a:hover { text-decoration: underline; }
.chk-actions { margin-left: auto; display: flex; gap: 6px; }
.chk-btn { height: 30px; padding: 0 10px; font-size: 12px; text-decoration: none; }
.sl-checks-link.has { color: #b45309; border-color: rgba(245, 158, 11, .4); }
/* ---- Haushaltsabrechnung: bezahlt markieren ---- */
.st-settle-status { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.st-settle-month { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px dashed var(--border); border-radius: 10px; font-size: 12.5px; }
.st-settle-month.paid { border-style: solid; border-color: rgba(5, 150, 105, .35); background: rgba(5, 150, 105, .06); }
.st-settle-mlabel { font-weight: 600; }
.st-settle-ok { display: inline-flex; align-items: center; gap: 5px; color: #047857; }
.st-settle-ok i { width: 14px; height: 14px; }
html.dark .st-settle-ok { color: #6ee7b7; }
.st-settle-btn { height: 28px; padding: 0 10px; font-size: 12px; }
.st-settle-hist { margin-top: 14px; font-size: 13px; }
.st-settle-hist summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.st-settle-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12.5px; }
.st-settle-table th { text-align: left; font-weight: 600; color: var(--faint); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.st-settle-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.st-settle-del { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 3px; display: inline-flex; }
.st-settle-del i { width: 14px; height: 14px; }
/* ---- Fixkostenquote im Verlauf ---- */
.sal-trend { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; margin-top: 16px; align-items: end; }
.sal-col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.sal-val { font-size: 11px; color: var(--muted); white-space: nowrap; }
.sal-track { width: 100%; max-width: 34px; height: 120px; display: flex; align-items: flex-end; background: var(--bg); border-radius: 6px; overflow: hidden; }
.sal-bar { width: 100%; background: rgba(15, 118, 110, .55); border-radius: 6px 6px 0 0; }
.sal-col.cur .sal-bar { background: var(--accent); }
.sal-col.cur .sal-val { color: var(--text); font-weight: 600; }
.sal-lbl { font-size: 10.5px; color: var(--faint); white-space: nowrap; }
@media (max-width: 560px) { .sal-trend { gap: 3px; } .sal-val { font-size: 9.5px; } .sal-lbl { font-size: 9.5px; } }

/* ---------- Aktivität ---------- */
.act-wrap{display:grid;gap:14px}
.act-tabs{margin:0}
.act-tabs .nav-badge{margin-left:-2px;font-weight:600}
.act-head{flex-wrap:wrap;gap:12px}
.act-chips .chip{height:32px;padding:0 12px;font-size:13px}
.act-bulk{display:flex;gap:16px;align-items:center;margin-left:auto}
.act-bulk svg{width:15px;height:15px}
.act-danger{color:#d9534f}
.act-day{padding:14px 22px 6px;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--line)}
.act-more{display:block;padding:14px;text-align:center;font-size:13.5px;font-weight:600;color:var(--accent);border-top:1px solid var(--line)}
.act-panel .notif{scroll-margin-top:90px}
.notif.is-unread{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.notif-main{flex:1;min-width:0}
.notif .t a{color:inherit}
.notif .t a:hover{color:var(--accent);text-decoration:underline}
.notif .d{white-space:pre-line}
.notif-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px}
.notif-meta .ts{margin-top:0}
.notif-snz,.notif-dlv{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--faint)}
.notif-snz svg,.notif-dlv svg{width:13px;height:13px}
.notif-dlv{color:var(--accent)}
.notif-dlv.err{color:#d9534f}
.notif-quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.notif-quick form{margin:0}
.notif-btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--text);font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.notif-btn svg{width:14px;height:14px}
.notif-btn:hover{border-color:var(--accent);color:var(--accent)}
.notif-ico.tone-reminder{background:color-mix(in srgb,#0f766e 13%,transparent);color:#0f766e}
.notif-ico.tone-price{background:color-mix(in srgb,#d97706 13%,transparent);color:#d97706}
.notif-ico.tone-fx{background:color-mix(in srgb,#7c3aed 13%,transparent);color:#7c3aed}
.notif-ico.tone-info{background:color-mix(in srgb,#2563eb 13%,transparent);color:#2563eb}
.notif-ico.tone-pos{background:color-mix(in srgb,#16a34a 13%,transparent);color:#16a34a}
html.dark .notif-ico.tone-reminder{color:#2dd4bf}
html.dark .notif-ico.tone-price{color:#fbbf24}
html.dark .notif-ico.tone-fx{color:#a78bfa}
html.dark .notif-ico.tone-info{color:#60a5fa}
html.dark .notif-ico.tone-pos{color:#4ade80}
html.dark .notif-dlv{color:var(--accent-soft)}
.side-activity-row .ico.tone-reminder{color:#2dd4bf}
.side-activity-row .ico.tone-price{color:#f0b429}
.side-activity-row .ico.tone-fx{color:#a78bfa}
.side-activity-row .ico.tone-info{color:#60a5fa}
.notif-snooze{position:relative}
.notif-snooze summary{list-style:none}
.notif-snooze summary::-webkit-details-marker{display:none}
.notif-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:20;min-width:190px;padding:6px;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(15,23,42,.12)}
.notif-menu form{margin:0}
.notif-menu button{display:block;width:100%;text-align:left;padding:8px 10px;border:none;border-radius:7px;background:transparent;color:var(--text);font-size:13.5px;cursor:pointer}
.notif-menu button:hover{background:var(--line)}
.log-act{font-weight:500;color:var(--muted)}
.log-undone{font-size:11.5px;font-weight:600;color:var(--faint);border:1px solid var(--border);border-radius:6px;padding:1px 6px}
.log-row.is-undone .notif-main{opacity:.65}
.log-fields{margin-top:6px;font-size:13px;color:var(--muted);display:grid;gap:2px}
.log-fields .k{color:var(--text);font-weight:500}
.log-fields .b{text-decoration:line-through;text-decoration-color:var(--faint)}
.log-fields .arr{color:var(--faint)}
.log-fields .a{color:var(--text)}
.log-fields .more{font-size:12px;color:var(--faint)}
@media (max-width:700px){
  .act-day{padding:12px 14px 6px}
  .act-panel .notif{padding:14px;gap:12px}
  .act-panel .notif-ico{width:34px;height:34px}
  .act-bulk{margin-left:0}
  .act-panel .notif{flex-wrap:wrap}
  .act-panel .notif-main{flex:1 1 0}
  .act-panel .notif-actions{order:3;width:100%;justify-content:flex-end;margin-top:-4px;gap:2px}
}
.notif-menu.up{top:auto;bottom:calc(100% + 4px)}
.notif .mark{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;padding:0}
.notif .mark .unread{display:block;margin:0}
.notif .mark:hover{background:var(--line)}
.notif-actions .del{width:30px;height:30px}
.sl-flags .chip .sl-flag-x, .sl-flags .chip .sl-flag-x svg { width: 13px; height: 13px; margin-left: -2px; opacity: .8; }

/* ---- Abo-Liste: Filterleiste (Kategorien in einer Zeile, Rest unter „Mehr“) ---- */
.sl-catrow { display: flex; align-items: center; gap: 9px; min-width: 0; }
.filterbar .sl-cats, .filterbar .sl-flags { width: auto; }
.sl-cats { flex: 0 1 auto; min-width: 0; }
.sl-controls .sl-pmform select { max-width: 165px; }
.sl-cats.is-fit { flex-wrap: nowrap; overflow: hidden; }
.sl-cats.is-fit .chip { flex: none; }
.sl-cats .chip[hidden], .sl-menu a[hidden], .sl-drop[hidden] { display: none; }
.sl-drop { position: relative; flex: none; }
.sl-drop > summary { list-style: none; cursor: pointer; }
.sl-drop > summary::-webkit-details-marker { display: none; }
.sl-drop .sl-chev, .sl-drop .sl-chev svg { width: 14px; height: 14px; transition: transform .15s; }
.sl-drop[open] .sl-chev, .sl-drop[open] .sl-chev svg { transform: rotate(180deg); }
.sl-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 220px; max-height: 60vh; overflow: auto; padding: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(15, 23, 42, .14); }
.sl-menu-right { left: auto; right: 0; }
.sl-menu a { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; color: var(--text); }
.sl-menu a:hover { background: var(--line); }
.sl-menu a.active { background: var(--accent); color: #fff; }
.sl-menu a .c { font-size: 12px; opacity: .65; }
.sl-menu .sl-hidepaid { padding: 8px 10px; white-space: nowrap; }
.sl-opts > summary.icon-btn { width: 36px; height: 36px; position: relative; }
.sl-opts > summary.has-dot::after { content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.sl-mobile-filters { display: none; }
.sl-ft-btn { height: 36px; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.sl-ft-btn i, .sl-ft-btn svg { width: 16px; height: 16px; }
.sl-ft-btn .nav-badge { height: 18px; min-width: 18px; font-size: 10.5px; }
.sl-af { height: 32px; font-size: 12.5px; }
.sl-af i, .sl-af svg { width: 14px; height: 14px; }
.sl-af .sl-flag-x, .sl-af .sl-flag-x svg { width: 13px; height: 13px; }
.chip-shared .sl-flag-x, .chip-shared .sl-flag-x svg { width: 13px; height: 13px; margin-left: -2px; opacity: .8; }
@media (max-width: 700px) {
  .sl-mobile-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
  .filterbar { display: none; }
  .sl-ft-cb:checked ~ .filterbar { display: flex; }
  .sl-catrow { flex-wrap: wrap; }
}
.st-top { margin-bottom: 0; }
.stats-tab-content > .st-mt:first-child { margin-top: 0; }
/* Handy (schmal): Kopfzeile passt samt „+“ in die Breite */
@media (max-width: 480px) {
  .mobile-bar { gap: 6px; padding-left: 8px; padding-right: 10px; }
  .mobile-bar .hamburger { width: 38px; }
  .mobile-bar .icon-btn, .mobile-bar .mobile-add { width: 36px; height: 36px; }
  .mobile-bar .brand-ver { display: none !important; }
  .mobile-brand { gap: 8px; }
}

/* ---- Formulare als eigene Seite (Neue Ausgabe ohne Pop-up, KI-Erfassung) ---- */
.form-page { display: flex; flex-direction: column; gap: 18px; }
.form-page .field { margin: 0; }
.form-page .field input[type=number], .form-page .field input[type=email], .form-page .field input[type=url] {
  width: 100%; height: 46px; padding: 0 14px; border: 1px solid #d8dee4; border-radius: 10px; font-size: 14.5px; background: #fff; color: var(--text); outline: none;
}
.form-page textarea { width: 100%; padding: 11px 14px !important; border: 1px solid #d8dee4 !important; border-radius: 10px !important; font: inherit; font-size: 14.5px !important; background: #fff; color: var(--text); outline: none; resize: vertical; }
.form-page .field input:focus, .form-page textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(15, 118, 110, .16); }
.form-page input[type=file] { font: inherit; font-size: 13.5px; color: var(--muted); }
.form-page input[type=file]::file-selector-button { margin-right: 10px; height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--card); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.form-page input[type=file]::file-selector-button:hover { border-color: var(--accent); color: var(--accent); }
.form-page input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); }
.form-page > label { margin-bottom: 0 !important; }
.form-page details > summary { list-style-position: inside; }
html.dark .form-page .field input[type=number], html.dark .form-page .field input[type=email], html.dark .form-page .field input[type=url], html.dark .form-page textarea {
  background: var(--card) !important; color: var(--text) !important; border-color: var(--border) !important;
}
/* Betragsfeld: das Eingabefeld im Rahmen hat keinen eigenen Rahmen (sonst doppelt) */
.amount-wrap input, .field .amount-wrap input[type=text] { height: 100%; padding: 0; border: none; border-radius: 0; box-shadow: none !important; background: transparent; }
/* Detailseite, Handy: Zahlungstabelle ohne #, Turnus und Kumuliert – passt ohne Querscrollen */
@media (max-width: 600px) {
  .pay-table th, .pay-table td { padding-left: 10px; padding-right: 10px; }
  .pay-table thead th:nth-child(1), .pay-table tbody td:nth-child(1),
  .pay-table thead th:nth-child(3), .pay-table tbody td:nth-child(3),
  .pay-table thead th:nth-child(6), .pay-table tbody td:nth-child(6),
  .pay-table tfoot { display: none; } /* Summe steht schon über der Tabelle („Aufgelaufen“) */
}
/* Cashflow: Auswahllisten im Stil der übrigen Filter */
.cf-controls select { height: 38px; padding: 0 30px 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; }
.cf-controls select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(15, 118, 110, .16); }
/* Einstellungen → Import: Titel/Text wie in den übrigen Zeilen */
.set-import .t { font-size: 14.5px; font-weight: 600; }
.set-import .d { font-size: 13px; color: var(--muted); margin-top: 2px; }
.set-import .opt-row { font-size: 13.5px; color: var(--text); }
/* Abo-Liste, Handy: kompakte Karten – Name, Betrag, nächste Zahlung; Details und Aktionen auf der Detailseite */
@media (max-width: 600px) {
  .trow { position: relative; padding: 12px 14px; row-gap: 4px; }
  .trow .c-cycle, .trow .accrued, .trow .row-actions { display: none !important; }
  .trow .c-next { font-size: 12.5px; padding-left: 58px; }
  .trow .c-next::before { min-width: 0 !important; }
  .trow .c-next .sl-rel { display: inline; margin-left: 4px; }
  .trow .row-link::after { content: ""; position: absolute; inset: 0; }
  .trow .sl-check { position: relative; z-index: 1; }
  .trow .sl-hints { position: relative; z-index: 0; }
}
.st-hint-panel { display: flex; gap: 12px; align-items: flex-start; }
.st-hint-panel > i, .st-hint-panel > svg { width: 18px; height: 18px; color: var(--faint); flex: none; margin-top: 2px; }
.st-hint-panel b { font-size: 14.5px; }
/* Datenqualität: Sammelaktionen */
.chk-head-actions { display: inline-flex; align-items: center; gap: 12px; }
.chk-fill { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 22px 12px; font-size: 13px; color: var(--muted); }
.chk-dates input[type=date] { height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); font: inherit; font-size: 13px; }
.chk-save { padding: 14px 22px 18px; border-top: 1px solid var(--line); }
.price-known { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.price-known .price-stale { color: #b45309; }
.sched-backup { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.sched-backup i, .sched-backup svg { width: 13px; height: 13px; }
.sched-backup.err { color: #b91c1c; font-weight: 600; }
/* Datei-Auswahl überall im selben Stil (Kündigungsbestätigung, Dokumente, Formulare, KI-Scan) */
input[type=file] { font: inherit; font-size: 13.5px; color: var(--muted); max-width: 100%; }
input[type=file]::file-selector-button { margin-right: 10px; height: 36px; padding: 0 14px; border: 1px solid var(--border); border-radius: 9px; background: var(--card); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s; }
input[type=file]::file-selector-button:hover { border-color: var(--accent); color: var(--accent); }
/* Spar-Simulator: Suche, Sortierung, Kategorie, Abgewählt-Liste */
.st-sim-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.st-sim-search { flex: 1 1 200px; height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--card); color: var(--text); font: inherit; font-size: 13.5px; }
.st-sim-controls select { height: 36px; padding: 0 28px 0 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--card); color: var(--text); font: inherit; font-size: 13.5px; }
.st-sim-btn { height: 36px; font-size: 13px; }
.st-sim-share { margin: 0 0 0 auto; }
.st-sim-item[hidden] { display: none; }
.st-sim-namecol { display: flex; flex-direction: column; min-width: 0; }
.st-sim-cat { font-size: 11.5px; font-weight: 500; color: var(--faint); }
.st-sim-quote { margin-top: 8px; }
.st-sim-off { margin-top: 14px; }
.st-sim-off ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; display: grid; gap: 3px; }
.st-sim-off a { color: var(--accent); }

/* ---- Detailseite: Jahresabrechnung & Steuer ---- */
.dx-fold > summary { list-style: none; cursor: pointer; }
.dx-fold > summary::-webkit-details-marker { display: none; }
.dx-fold:not([open]) > summary { margin-bottom: 0; }
.dx-sum-hint { font-size: 12.5px; font-weight: 500; color: var(--faint); margin-left: 6px; }
.dx-table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 6px 0 4px; }
.dx-table th { text-align: left; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.dx-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.dx-table .num { text-align: right; white-space: nowrap; }
.dx-neg { color: #b91c1c; font-weight: 600; }
.dx-pos { color: #047857; font-weight: 600; }
html.dark .dx-neg { color: #fca5a5; } html.dark .dx-pos { color: #34d399; }
.icon-btn-sm { border: none; background: transparent; color: var(--faint); cursor: pointer; padding: 4px; border-radius: 6px; display: inline-flex; }
.icon-btn-sm:hover { color: #b91c1c; background: rgba(185, 28, 28, .08); }
.icon-btn-sm svg { width: 15px; height: 15px; }
.dx-suggest { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 4px; padding: 10px 12px; border-radius: 10px; background: rgba(245, 158, 11, .1); color: #92400e; font-size: 13px; }
html.dark .dx-suggest { color: #fbbf24; }
.dx-suggest svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.dx-stmt-form { display: grid; gap: 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.dx-stmt-title { font-size: 14px; font-weight: 600; }
.dx-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) { .dx-grid-4 { grid-template-columns: 1fr 1fr; } .dx-grid-4 .field[style] { grid-column: 1 / -1 !important; } }
.dx-stmt-result { padding: 10px 12px; border-radius: 10px; background: var(--line); font-size: 14px; font-weight: 600; }
.dx-stmt-result.neg { background: rgba(185, 28, 28, .08); color: #b91c1c; }
.dx-stmt-result.pos { background: rgba(4, 120, 87, .08); color: #047857; }
.dx-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.dx-check input { width: 16px; height: 16px; accent-color: var(--accent); }
.dx-tax-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.dx-tax-form .field { margin: 0; min-width: 220px; }
.dx-tax-form .field:nth-of-type(2) { min-width: 120px; width: 140px; }
.dx-tax-form .btn-ghost { height: 46px; }
.dx-link { display: inline-flex; align-items: center; gap: 6px; height: 46px; font-size: 13.5px; font-weight: 600; color: var(--accent); }
.dx-link svg { width: 15px; height: 15px; }
.dx-badge { margin-left: 8px; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 12px; background: rgba(15, 118, 110, .1); color: var(--accent); }
/* ---- Steuerübersicht ---- */
.tx-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.tx-actions { display: flex; align-items: center; gap: 10px; }
.tx-year { height: 36px; padding: 0 30px 0 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--card); color: var(--text); font: inherit; font-weight: 600; }
.tx-btn { height: 36px; padding: 0 14px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.tx-btn svg { width: 15px; height: 15px; }
.tx-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; }
.tx-head h1 { margin: 0; font-size: 22px; }
.tx-head p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.tx-total { text-align: right; }
.tx-total-label { font-size: 12px; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; }
.tx-total-value { font-size: 26px; font-weight: 700; }
.tx-total-sub { font-size: 12px; color: var(--muted); }
.tx-group-sum { font-weight: 700; }
.tx-table a { color: var(--text); font-weight: 600; }
.tx-note { font-size: 12.5px; color: var(--faint); margin: 0; }