/* ==========================================================================
   Einheitliche Bausteine: eine Form für alles, in jedem Bereich gleich.
   Lädt als letzte Stildatei und legt Knöpfe, Felder, Chips, Reiter, Segment,
   Leisten und Markierungen verbindlich fest. Rundungen nur über die Skala aus
   css/app.css (--r-gross, --r-mittel, --r-klein, --r-rund), nie feste px-Werte.
   Bereiche ändern nur Farben (css/bereiche.css).
   ========================================================================== */
:root {
  --luft-leiste: 12px;
}

/* ---------- Knopf (.btn) ---------- */
.btn {
  height: 40px; padding: 0 16px; gap: 8px; border-radius: var(--r-mittel);
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0; box-shadow: none;
  transition: transform var(--dauer-mikro) ease, background-color var(--dauer-1), border-color var(--dauer-1), color var(--dauer-1), box-shadow var(--dauer-1);
}
.btn:hover { background: var(--inset); box-shadow: none; }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:active { transform: scale(.98); }
.btn .ic { width: 18px; height: 18px; }
.btn.sm { height: 32px; padding: 0 12px; gap: 6px; border-radius: var(--r-mittel); font-size: 13px; }
.btn.sm .ic { width: 16px; height: 16px; }
.btn.icon-only { width: 40px; padding: 0; }
.btn.sm.icon-only { width: 32px; padding: 0; }
.btn.primary { background: var(--btn-primary); border-color: var(--btn-primary); color: var(--btn-primary-ink); box-shadow: none; }
.btn.primary:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); }
.btn.accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.soft { background: var(--inset); border-color: transparent; color: var(--ink); }
.btn.soft:hover { background: var(--track); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--hover); color: var(--ink); }
.btn.danger { color: var(--crit-text); }
.btn.danger.solid { background: var(--crit-solid); border-color: var(--crit-solid); color: #fff; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
/* Handy: mindestens 44 px Tippfläche (kleine Knöpfe über eine unsichtbare Fläche) */
@media (max-width: 1023.98px) {
  .btn { min-height: 44px; }
  .btn.sm { min-height: 0; }
  /* :where() hat keine Spezifität: absolut gesetzte kleine Knöpfe behalten ihre Lage */
  :where(.btn.sm) { position: relative; }
  .btn.sm::before { content: ""; position: absolute; inset: -6px 0; }
  .btn.icon-only { width: 44px; }
}

/* Sonderknöpfe wie .btn bzw. .btn.sm */
.mehr-schalter { height: 32px; padding: 0 12px; gap: 6px; border-radius: var(--r-mittel); font-size: 13px; font-weight: 600; }

/* Runde Symbol-Knöpfe */
.iconbtn { width: 36px; height: 36px; border-radius: var(--r-rund); }
.iconbtn:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---------- Felder ---------- */
.input, .select, .textarea { border-radius: var(--r-mittel); }
.input:focus, .select:focus, .textarea:focus { box-shadow: var(--ring); }

/* ---------- Chips, Etiketten, Tooltips ---------- */
.chip { border-radius: var(--r-klein); }
.tip, .art, .kbd { border-radius: var(--r-klein); }

/* ---------- Segment-Umschalter: konzentrisch (außen 12, Abstand 4, innen 8) ---------- */
.seg { padding: 4px; border-radius: var(--r-mittel); }
.seg button { height: 30px; padding: 0 12px; border-radius: var(--r-klein); font-weight: 600; }
.seg .thumb { top: 4px; bottom: 4px; border-radius: var(--r-klein); }
.seg.sm button { height: 26px; padding: 0 10px; border-radius: var(--r-klein); }

/* ---------- Reiter (Unterfunktionen einer Maske): keine Kästen, das aktive Wort in Blau mit leichtem Übergang.
   Gilt für Bereichsreiter, Reiter der Immobilie und die Reiter in Listen (.ml-tab), in allen Bereichen gleich. ---------- */
.tabs { gap: 4px; border-bottom: 0; box-shadow: none; }
.tabs a { height: 36px; padding: 0 12px; border-radius: var(--r-mittel); background: transparent; box-shadow: none; color: var(--ink-2); font-size: 13.5px; font-weight: 600; transition: color var(--dauer-2) ease, background-color var(--dauer-2) ease; }
.tabs a:hover { background: transparent; color: var(--ink); }
.tabs a.active { background: transparent; color: var(--accent-text); box-shadow: none; }
.tabs a.active::after { display: none; }
/* Immobilie hat neun Reiter (mit Kontakte): am Desktop etwas enger, damit sie in eine Zeile passen */
@media (min-width: 1024px) { .content > .tabs { gap: 2px; } .content > .tabs a { padding: 0 9px; } }
.ml-tab { border-radius: var(--r-mittel); }
@media (max-width: 1023.98px) {
  /* feste Höhe mit Platz für den Schatten der Pille, senkrecht abgeschnitten (nur seitlich wischbar) */
  .content > .tabs { height: 44px; padding: 4px 0; box-shadow: none; align-items: center; }
  .content > .tabs a { height: 36px; }
}

/* ---------- Leisten: Seitenleiste, Kopfleiste, Handy-Leiste ---------- */
@media (min-width: 1024px) {
}
/* Einträge und Markierung konzentrisch zur Leiste (20 − 8 = 12) */
@media (max-width: 1023.98px) {
  .tabbar {
    --tb-p: 8px; left: var(--luft-leiste); right: var(--luft-leiste); bottom: calc(var(--luft-leiste) + env(safe-area-inset-bottom, 0px));
    border-radius: var(--r-gross);
    box-shadow: inset 0 1px 0 var(--tb-rand), inset 0 0 0 1px var(--tb-linie), var(--shadow-leiste);
  }
}

/* ---------- Container ---------- */
.card, .widget, .modal, .pop, .menu, .palette, .toast, .table-wrap { border-radius: var(--r-gross); }
@media (max-width: 640px) {
  .modal, .modal.wide, .modal.xwide { border-radius: var(--r-gross) var(--r-gross) 0 0; }
}

/* ---------- Diagramme: Säulenecken überall gleich ---------- */
.dg-balken, .wf-b { rx: calc(var(--balken-radius) * 1px); }

/* ---------- Tarif: Pro-Etikett und Pro-Karte (js/tarif.js) ---------- */
.pro-chip { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--r-klein); background: var(--marke-soft); color: var(--marke-text); font-size: 10.5px; font-weight: 700; letter-spacing: .02em; line-height: 1; vertical-align: middle; flex: none; }
.btn .pro-chip, .pop-item .pro-chip, .side .nav a .pro-chip { margin-left: 4px; }
.pro-karte { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: var(--r-gross); background: var(--card); box-shadow: var(--shadow); border: 1px solid var(--line); }
.pro-karte .pro-k-kopf { display: flex; align-items: center; gap: 10px; }
.pro-karte .pro-k-kopf b { font-size: 15px; font-weight: 650; }
.pro-karte p { margin: 0; color: var(--ink-2); }
.pro-karte .pro-k-aktion { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pro-karte .pro-k-aktion .label { font-size: 12.5px; }
.pro-karte .btn.primary { background: var(--marke); border-color: var(--marke); color: var(--marke-on); }
.pro-karte .btn.primary:hover { background: var(--marke-light); border-color: var(--marke-light); }
/* Beispiel-Vorschau hinter der Pro-Karte: ruhig, nicht bedienbar */
.pro-vorschau { position: relative; margin-top: 14px; pointer-events: none; -webkit-user-select: none; user-select: none; opacity: .55; filter: saturate(.6); }
.pro-vorschau::after { content: "Beispiel"; position: absolute; top: 10px; right: 12px; padding: 2px 8px; border-radius: var(--r-klein); background: var(--inset); color: var(--ink-3); font-size: 11px; font-weight: 600; }
/* Seitenleiste: „Pro testen“ statt Einrichtung */
/* Wortmarke mit „pro“ */
.wortmarke .wm-pro { margin-left: .18em; font-size: .5em; font-weight: 700; letter-spacing: 0; color: var(--ink-3); align-self: flex-start; margin-top: .1em; }
/* Tarif-Karten (Konto) */
.tarif-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .tarif-raster { grid-template-columns: minmax(0, 1fr); } }
.tarif-karte { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: var(--r-gross); background: var(--card); box-shadow: var(--shadow); border: 1px solid var(--line); }
.tarif-karte.empfohlen { border: 1.5px solid var(--ink-3); }
.tarif-karte .tk-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tarif-karte .tk-name { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.tarif-karte .tk-preis { font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
.tarif-karte .tk-preis small { font-size: 13px; font-weight: 500; color: var(--ink-3); }
.tarif-karte ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.tarif-karte li { display: flex; gap: 8px; align-items: flex-start; }
.tarif-karte li .ic { flex: none; color: var(--marke-text); margin-top: 2px; }
.tarif-karte.empfohlen .btn.primary { background: var(--marke); border-color: var(--marke); color: var(--marke-on); }
.tarif-aktuell { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-klein); background: var(--inset); color: var(--ink-2); font-size: 11.5px; font-weight: 650; }
/* Profil-Menü mit Tarif */
.profil-menu .pm-kopf { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 6px; }
.profil-menu .pm-kopf b { font-weight: 650; }
.profil-menu .pm-tarif { align-self: flex-start; margin-top: 6px; padding: 2px 8px; border-radius: var(--r-klein); background: var(--marke-soft); color: var(--marke-text); font-size: 12px; font-weight: 650; }
@media (max-width: 1023.98px) { .wortmarke .wm-pro { display: none; } }
.profil-menu .pm-demo { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 4px 10px 8px; padding: 10px 12px; border-radius: var(--r-mittel); background: var(--inset); }

/* ---------- Handy: ein gemeinsamer Seitenrand (--rand) ----------
   Kopfleiste, Inhalt (Widgets, Dashboard-Leiste) und untere Leiste haben exakt dieselben Außenkanten. */
:root { --rand: 16px; }
@media (max-width: 1023.98px) {
  :root { --rand: max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); }
  .content { padding-left: var(--rand); padding-right: var(--rand); }
  /* randlose Elemente gehen genau bis an den Bildschirmrand */
  .bereich-reiter { margin-left: calc(-1 * var(--rand)); margin-right: calc(-1 * var(--rand)); padding-left: var(--rand); padding-right: var(--rand); scroll-padding: 0 var(--rand); }
  .ob-kopf { margin-left: calc(-1 * var(--rand)); margin-right: calc(-1 * var(--rand)); padding-left: var(--rand); padding-right: var(--rand); }
  .ob-kpis { margin-left: calc(-1 * var(--rand)); margin-right: calc(-1 * var(--rand)); padding-left: var(--rand); padding-right: var(--rand); }
}
@media (max-width: 640px) {
  html[data-seite="neu"] .content > .page-head, html[data-seite="neu"] .content > .steps, html[data-seite="neu"] .wiz-grid { margin-left: calc(-1 * var(--rand)); margin-right: calc(-1 * var(--rand)); }
}

/* ---------- Symbole und Symbol-Kacheln ---------- */
/* Zweitonfläche der Symbole (App.u.icon), in Kacheln etwas kräftiger, im Dunkelmodus heller */
:root { --ic-d: .16; --ic-d-kachel: .26; --kachel-glanz: rgba(255, 255, 255, .7); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ic-d: .22; --ic-d-kachel: .3; --kachel-glanz: rgba(255, 255, 255, .06); } }
:root[data-theme="dark"] { --ic-d: .22; --ic-d-kachel: .3; --kachel-glanz: rgba(255, 255, 255, .06); }
.ic .ic-d { opacity: var(--ic-d); }
.icon-tile .ic-d, .wk-ic .ic-d { opacity: var(--ic-d-kachel); }
/* Kachel: flache Fläche ohne Verlauf und Glanz (Design-Politur, siehe unten) */
.icon-tile, .wk-ic { background: var(--inset); box-shadow: none; }

/* ==========================================================================
   System der Design-Politur (Oktober 2026)
   Maßstab: Taste-Skill, references/app-screens.md. Fundament bleibt CLAUDE.md
   (Rundungsskala, Knöpfe, eine Akzentfarbe, Wortmarke, Inter).
   - Schrift: wenige Stufen 12 · 13 · 15 · 17 · 22 · 28 · 34 (Knöpfe 14 laut CLAUDE.md),
     drei Gewichte 400 · 500 · 600. Große Zahlen mit Tabellenziffern, leicht eng, € und % kleiner und grau.
   - Abstände: 4er/8er-Skala als Variablen.
   - Flächen: ruhende Karten nur mit 1-px-Rand (kein Schatten), Schatten nur für Schwebendes
     (Kopf- und Seitenleiste, Dialoge, Menüs, Tooltips).
   - Farbe: drei Grautöne für Text, die eine Akzentfarbe sparsam, Grün/Rot gedämpft und nur für Plus/Minus.
   - Symbole: ein Satz, grau, ohne getönte Kacheln, Verläufe und Glanzkanten.
   ========================================================================== */
/* Tokens (Schrift, Abstände, Farben) stehen nur in css/app.css */

/* ---------- Schrift: Überschriften und große Zahlen ---------- */
.h2 { font-size: var(--t-28); font-weight: var(--w-fett); letter-spacing: -.022em; }
.card-head .h3, .w-head .h3 { font-size: var(--t-15); font-weight: var(--w-fett); letter-spacing: -.01em; }
/* Große Zahlen: Gewicht 500, eng, tabellarisch; die optische Größe von Inter wählt den Display-Schnitt */
.big, .hero-num, .wk-wert, .kpi-kachel b, .metric-tile .big, .dq-top .big, .eck-haupt {
  font-variant-numeric: tabular-nums; font-feature-settings: var(--zahl-features); font-weight: var(--w-mittel); letter-spacing: -.03em; line-height: 1.04;
}
/* Nachkommastellen und € / % neben großen Zahlen: kleiner und leiser (App.u.einheit setzt .nk und .einh) */
.einh, .nk { font-size: .62em; font-weight: var(--w-mittel); color: var(--ink-3); letter-spacing: -.01em; }
.einh { margin-left: .08em; }
.neg > .einh, .neg .einh, .neg > .nk, .neg .nk { color: inherit; opacity: .7; }

/* ---------- Eyebrows: keine gesperrten Versalien mehr, sondern Satzanfang, klein und grau ---------- */
.eyebrow, .pop-label, .palette-group, .wk-sub, .tb-label, .fr-gruppe, .tour-kapitel, .wk-datum span {
  text-transform: none; letter-spacing: 0; font-size: var(--t-12); font-weight: var(--w-mittel);
}
.nav-group { text-transform: none; letter-spacing: 0; font-size: var(--t-12); font-weight: var(--w-mittel); }

/* ---------- Tabellen: Kopf in Satzanfang ohne Band, keine Zebra-Streifen, Zahlen rechtsbündig mit Tabellenziffern ---------- */
table.t th {
  text-transform: none; letter-spacing: 0; font-size: var(--t-12); font-weight: var(--w-mittel); color: var(--ink-3);
  background: transparent; border-bottom: 1px solid var(--line);
}
table.t thead th { border-bottom: 1px solid var(--line); }
table.t thead tr th:first-child, table.t thead tr th:last-child { border-radius: 0; }
table.t td { font-variant-numeric: tabular-nums; }
table.t tr.click:hover td, table.t tbody tr:hover td { background: var(--hover); }

/* ---------- Status und Veränderungen: Farbe nur auf dem Wort, keine gefüllten Pillen ---------- */
.kpi-badge { background: transparent !important; padding: 0; height: auto; gap: 2px; font-weight: var(--w-mittel); }
.kpi-badge:not(.good):not(.bad) { color: var(--ink-3); }
/* „in Ordnung“ (bezahlt, gebucht, erledigt) ohne Fläche: grünes Häkchen, Wort in Grau */
.chip.good { background: transparent; color: var(--ink-2); padding-left: 0; padding-right: 0; }
.chip.good .ic { color: var(--pos); }

/* ---------- Symbole: grau, ohne getönte Kachel, ohne Verlauf und Glanz ---------- */
.icon-tile, .wk-ic, .icon-tile.accent {
  background: var(--inset); box-shadow: none; color: var(--ink-2);
}
.icon-tile.warn { background: var(--inset); box-shadow: none; color: var(--warn); }
.icon-tile.crit { background: var(--inset); box-shadow: none; color: var(--crit-text); }
.icon-tile.good { background: var(--inset); box-shadow: none; color: var(--pos); }
.icon-tile .ic-d, .wk-ic .ic-d { opacity: var(--ic-d); }
/* Widget-Kopf: Symbol weg, der Titel trägt */
.wk-ic { display: none; }

/* ==========================================================================
   Diagramme (js/charts.js) im Stil von Apple Aktien
   Dünne Linie mit runden Enden, höchstens eine ganz blasse Fläche, 2–3 Hilfslinien,
   Achsenwerte klein und grau (y rechts), letzter Wert als Punkt. Scrubben: senkrechte Linie,
   Datum und Wert in der Lesezeile (.chart-lese) bzw. oben in der Kennzahl, keine Tooltip-Box.
   Bereiche ändern nur die Farbe; Fläche, Linie und Säulenecken sind überall gleich.
   ========================================================================== */
:root { --balken-radius: 4; --flaeche: .06; --linie: 2; }
.chart text { font-family: var(--font); font-size: 11px; fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.chart .gridline { stroke: var(--grid); stroke-width: 1; stroke-dasharray: none; }
.chart .gridline.zero { stroke: var(--zero); }
.chart .line { fill: none; stroke: var(--chart-farbe, var(--reihe-1)); stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; }
.chart .line.neg { stroke: var(--neg-fill); }
.chart .line.neutral { stroke: var(--ink-3); stroke-width: 1.5px; opacity: .75; }
.chart .line.neutral.gestr { stroke-dasharray: 4 4; }
.chart .line.netz { stroke: var(--ink-2); stroke-width: 1.5px; }
.chart .area { fill: var(--chart-farbe, var(--reihe-1)); fill-opacity: var(--flaeche); stroke: none; }
.chart .area.neg { fill: var(--neg-fill); }
.chart .dot { fill: var(--chart-farbe, var(--reihe-1)); stroke: var(--card); stroke-width: 2px; }
.chart .dot.neg { fill: var(--neg-fill); }
.chart .dot.neutral { fill: var(--ink-3); }
.chart .dot.netz { fill: var(--ink-2); }
.chart .cross { stroke: var(--ink-3); stroke-width: 1px; opacity: .55; }
.chart .band { fill: var(--hover); }
.chart .hit { cursor: crosshair; outline: none; }
.chart .hit:focus-visible { outline: none; }
/* Lesezeile über dem Plot: in Ruhe die Legende (mehrere Reihen), beim Scrubben Datum und Werte */
.chart-lese {
  position: absolute; top: 0; left: 0; right: 0; height: 22px; display: flex; align-items: center; gap: 14px;
  font-size: var(--t-12); color: var(--ink-3); white-space: nowrap; overflow: hidden; pointer-events: none; font-variant-numeric: tabular-nums;
}
.chart-lese .cl-datum { color: var(--ink-2); font-weight: var(--w-mittel); }
.chart-lese .cl-wert, .chart-lese .cl-extra { display: inline-flex; align-items: center; gap: 6px; }
.chart-lese em { font-style: normal; }
.chart-lese b { color: var(--ink); font-weight: var(--w-fett); }
.chart-lese b.neg { color: var(--neg); }
.cl-k { flex: none; width: 8px; height: 8px; border-radius: var(--r-rund); background: var(--k); }
.cl-k.linie { width: 12px; height: 2px; }
.cl-k.gestr { width: 12px; height: 0; background: none; border-top: 2px dashed var(--k); border-radius: 0; }
@media (max-width: 640px) { .chart-lese .cl-extra { display: none; } .chart-lese { gap: 10px; } }
/* Verlauf ohne Aussage: nur ein ruhiger Satz */
.chart.chart-ist-ruhig { display: flex; align-items: center; }
.chart-ruhig { margin: 0; font-size: var(--t-13); line-height: 1.45; color: var(--ink-3); max-width: 46ch; }
/* Sparkline */
.spark .spark-linie { fill: none; stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; }
.spark .spark-null { stroke: var(--zero); stroke-dasharray: 2 3; }
/* Tooltip (nur noch Skyline und einzelne Stellen): schlichter Kasten ohne Farbstriche */
.tip { background: var(--card); color: var(--ink); box-shadow: var(--shadow-pop); }
.tip .tip-date, .tip .tip-name { color: var(--ink-3); }
.tip .tip-key { display: none; }
@media (prefers-reduced-transparency: reduce) { .tip { background: var(--card); } }
/* Anteilsbalken in Widgets: eine Farbe plus Grau */
.wk-anteil { height: 6px; border-radius: var(--r-rund); }
.wk-anteil i { background: var(--chart-farbe, var(--reihe-1)); border-radius: var(--r-rund) 0 0 var(--r-rund); }
.wk-anteil.zt { background: var(--chart-farbe, var(--reihe-1)); }
.wk-anteil.zt i { background: var(--neutral-bar); }

/* ==========================================================================
   Rahmen (Design-Politur): Seitenleiste und Kopfleiste
   Vorbilder: Square (Einrichtung oben/unten, kleine graue Gruppentitel), Shopify (ruhige Einträge).
   ========================================================================== */
@media (min-width: 1024px) {
  /* Die Liste läuft unter Einrichtung und Terminal weg: eine Kante statt abgeschnittener Schrift */
}
/* Handy: Seitentitel höchstens zweizeilig und nie mitten im Wort getrennt */
@media (max-width: 1023.98px) {
  .head-title h1 {
    font-size: var(--t-17); line-height: 1.2; white-space: normal; overflow-wrap: normal; word-break: normal;
    -webkit-hyphens: manual; hyphens: manual; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
}

/* ==========================================================================
   Dashboard (Design-Politur)
   Vorbilder: Copilot Investments, Public Account value, Cash App Stocks: große Zahl, eine Zeile
   Veränderung, Graph über die volle Breite. Das Cashflow-Widget hat denselben Rahmen wie alle anderen.
   ========================================================================== */
.wk-cf .wk-cf-text { display: flex; flex-direction: column; }
.wk-cf .hero-satz { order: 1; margin: 0 0 6px; font-size: var(--t-15); font-weight: var(--w-mittel); letter-spacing: -.005em; color: var(--ink-2); }
.wk-cf .hero-num { order: 2; font-size: 40px; font-weight: var(--w-fett); letter-spacing: -.03em; line-height: 1.05; }
.wk-cf .hero-sub { order: 3; margin-top: 8px; font-size: var(--t-13); }
.wk-cf .eyebrow { order: 4; margin: 6px 0 0; color: var(--ink-3); }
.wk-cf .hero-chart { margin-top: 16px; }
@media (max-width: 640px) { .wk-cf .hero-num { font-size: var(--t-34); } }
/* Kennzahl-Widgets: Zahl in einer Größe, Erklärung statt leerer Fläche */
.wk-wert { font-size: var(--t-28); line-height: 1.1; }
.wk-wert.klein { font-size: var(--t-22); }
.wk-kz .wk-lang { margin-top: auto; font-size: var(--t-12); line-height: 1.4; }
/* Ringe dünn */
.wk-ring circle { stroke-width: 4px; }
/* Hinweis „Dein Dashboard gehört dir“: ohne Bildkachel */
.dash-tipp-bild { display: none; }

/* ==========================================================================
   Immobilien (Design-Politur)
   Vorbilder: Mercury Books Details und Plane Properties (Kennwerte als ruhige Liste mit Regeln),
   Rocket Money Net Worth (eine Zahl je Block, Beträge rechtsbündig).
   ========================================================================== */
/* Aufschlüsselung: Ergebnis ohne grüne/rote Fläche, nur die Zahl trägt die Bedeutung */
.flow-col.flow-ergebnis { background: var(--inset); }
/* Graph-Karte neben einer langen Liste: eigene Höhe statt Leerband (die Liste läuft rechts als Spalte weiter) */
.card.karte-oben { align-self: start; }

/* ==========================================================================
   Finanzen (Design-Politur)
   Vorbilder: Copilot Accounts (gruppierte Liste, Summen rechts, Status leise), Stripe Transactions
   (graue Kopfzeile, Status nur wo nötig), Square Loans (eine Zahl, Obergrenze grau).
   ========================================================================== */
/* Status in Tabellenzeilen: neutrale Zustände (geplant, Prognose, Kategorie) als leiser Text; Farbe nur bei Handlungsbedarf */
table.t td .chip:not(.warn):not(.crit):not(.good):not(button) { background: transparent; padding-left: 0; padding-right: 0; color: var(--ink-3); font-weight: var(--w-mittel); }
table.t td .chip:not(.warn):not(.crit):not(.good):not(button) .ic { color: var(--ink-3); }

/* ==========================================================================
   Planen (Design-Politur)
   Vorbilder: Neo Financial „How is this calculated?“ und WHOOP (Rechenweg als Zeilen mit Summe),
   Copilot „Top categories“ (sortierte Liste mit dünnem Balken statt Torte).
   ========================================================================== */
/* Wohin das Geld beim Kauf geht: Summe, darunter sortierte Teile mit 2-px-Balken (der größte im Akzent) */
.db-ring { display: block; }
.dg-teile-summe { display: flex; align-items: baseline; gap: 6px; margin-bottom: 10px; }
.dg-teile-summe b { font-size: var(--t-17); font-weight: var(--w-fett); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.dg-teile-summe span { font-size: var(--t-12); color: var(--ink-3); }
.dg-teile { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dg-teile li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 4px; font-size: var(--t-12); }
.dg-teile li span { min-width: 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-teile li b { font-weight: var(--w-mittel); font-variant-numeric: tabular-nums; }
.dg-teile li i { grid-column: 1 / -1; height: 2px; border-radius: var(--r-rund); background: var(--neutral-bar); }
.dg-teile li.erst i { background: var(--reihe-1); }
/* Kreditdeckung: Balken 0–2 mit Markierung bei 1 */
.dg-mess.dg-mess-balken { max-width: none; margin: 4px 0 0; }
.dg-mb-spur { stroke: var(--track); stroke-width: 6px; stroke-linecap: round; }
.dg-mb-wert { stroke: var(--ink-3); stroke-width: 6px; stroke-linecap: round; }
.dg-mb-wert.neg { stroke: var(--neg-fill); }
.dg-mb-wert.warn { stroke: var(--warn-fill); }
.dg-mb-wert.pos { stroke: var(--pos-fill); }
.dg-mb-ziel { stroke: var(--ink); stroke-width: 1.5px; }

/* ==========================================================================
   Verwalten (Design-Politur)
   Vorbilder: hilos Tasks (Gruppen mit kleiner Überschrift und Zahl, keine Pillen), Plane Work items
   (Priorität als leises Wort, Rot nur für Überfälliges).
   ========================================================================== */
/* Neutrale Etiketten in Listenzeilen (Priorität, „in 3 Monaten“) als leiser Text; Warnung/Überfällig bleiben farbig */
.list-item > .chip:not(.warn):not(.crit):not(.good):not(button),
.frist-zeile .chip:not(.warn):not(.crit):not(.good):not(button) { background: transparent; padding-left: 0; padding-right: 0; color: var(--ink-3); font-weight: var(--w-mittel); }

/* ==========================================================================
   Einstellungen (Design-Politur)
   Vorbilder: Binance und Copilot Settings (gruppierte Liste, kleine graue Gruppentitel in Satzanfang,
   Wert rechts), Mercury Books Details (Bezeichnung links, Wert rechts, Regeln statt Kästen).
   ========================================================================== */
.sg-titel { text-transform: none; letter-spacing: 0; font-size: var(--t-13); font-weight: var(--w-mittel); }
/* Tarif- und Pro-Karte: Rand ODER Schatten, nicht beides */
.tarif-karte, .pro-karte { box-shadow: none; }
.tarif-karte .tk-preis { font-size: var(--t-28); font-weight: var(--w-fett); letter-spacing: -.022em; }

/* ==========================================================================
   Dialoge, Formulare, Leerzustände (Design-Politur)
   Vorbilder: Meetup „Record Expense“ (Beschriftung über dem Feld, eine Höhe, ein Hauptknopf),
   Snowflake „New Resource Monitor“ (Abschnitte, Fuß mit Abbrechen und Hauptaktion),
   Quicken Watchlist (Leerzustand: ein Satz, ein Knopf, kein Bild).
   ========================================================================== */
.field { gap: 8px; }
.field > label, .field > .flabel { font-size: var(--t-13); font-weight: var(--w-mittel); color: var(--ink-2); }
.field .hint { font-size: var(--t-12); color: var(--ink-3); }
/* Leerzustand: kleines neutrales Symbol, Titel, ein Satz, eine Aktion */
.empty { padding: 32px 20px; gap: 10px; }
.empty .icon-tile, .empty .icon-tile.accent { width: 40px; height: 40px; background: var(--inset); color: var(--ink-3); box-shadow: none; }
.empty .ic { width: 20px; height: 20px; }
.empty .h3 { font-size: var(--t-15); font-weight: var(--w-fett); }
.empty .prose { color: var(--ink-2); font-size: var(--t-13); max-width: 46ch; }

/* ==========================================================================
   Prüfung (inspect.mjs --app): flache Knöpfe, leichter Leisten-Schatten, Kontrast
   ========================================================================== */
/* Knöpfe ohne Schatten (Fokusring bleibt) */
/* Kopf- und Seitenleiste schweben weiter (CLAUDE.md), aber mit einem Schatten unter 8 % Schwarz */
/* Ziffern im Inhalt gleich breit, damit Beträge, Daten und Prozente bündig stehen */
.content { font-variant-numeric: tabular-nums; }

/* ---------------- Terminal (#/daten): füllt die Fläche, Reiter nach Abschnitten ---------------- */
.btn.primary.blau { background: var(--b-primary); border-color: var(--b-primary); color: var(--b-primary-ink); }
.btn.primary.blau:hover { background: var(--b-primary-hover); border-color: var(--b-primary-hover); }
.terminal-kopf { margin-bottom: 12px; }
.terminal-kopf .prose { margin: 4px 0 0; }
.terminal-karte { display: flex; flex-direction: column; padding: 12px 14px 10px; min-height: 420px; height: calc(100dvh - var(--kopf-unten, 96px) - 150px); }
.terminal-karte .sheet { flex: 1; min-height: 0; max-height: none; }
.terminal-karte .sheet-foot { flex: none; }
.terminal-werkzeuge { margin: 10px 0; }
.terminal-werkzeuge .input { max-width: 320px; }
.terminal-tipp { margin-top: 10px; }
.sheet-tabs { flex-wrap: nowrap; overflow-x: auto; gap: 4px 0; padding: 0 0 2px; scrollbar-width: none; }
.sheet-gruppe { display: flex; align-items: center; gap: 0; flex: none; padding-right: 10px; margin-right: 10px; border-right: 1px solid var(--line); }
.sheet-gruppe:last-child { border-right: 0; margin-right: 0; }
.sheet-gruppe-name { font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; padding: 0 6px 0 2px; white-space: nowrap; }
.sheet-tabs button { height: 34px; padding: 0 8px; background: transparent; box-shadow: none; color: var(--ink-2); transition: color var(--dauer-2) ease; }
.sheet-tabs button:hover { color: var(--ink); }
.sheet-tabs button[aria-pressed="true"] { background: transparent; box-shadow: none; color: var(--accent-text); }
.sheet-tabs button[aria-pressed="true"] .cnt { color: var(--accent-text); opacity: .75; }
@media (max-width: 760px) {
  .terminal-karte { height: calc(100dvh - var(--kopf-unten, 80px) - 210px); padding: 10px; }
  .terminal-werkzeuge .input { max-width: none; flex: 1; }
  .terminal-werkzeuge .grow { display: none; }
}
/* Export-Dialog */
.export-wahl { display: flex; flex-direction: column; gap: 14px; }
.export-schnell { gap: 8px; }
.export-gruppen { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.export-gruppe { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-mittel); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.export-gruppe legend { padding: 0 4px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.export-blatt { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: 14px; cursor: pointer; }
.export-blatt input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.export-blatt .cnt { margin-left: auto; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.export-format { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.export-hinweis { margin: 0; }

/* ---------------- Fristen und Termin-Dialog ---------------- */
.fr-aktionen { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.fr-filter { padding: 14px 16px; margin-bottom: 16px; }
.fr-zeitraum + .fr-zeitraum { margin-top: 10px; }
.fr-zeiten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; grid-column: span 2; }
.fr-zeiten[hidden] { display: none; }
.fr-ganz-feld { justify-content: flex-end; }
.fr-ganztags { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-size: 14px; }
.fr-ganztags input { width: 18px; height: 18px; accent-color: var(--accent); }
@media (max-width: 640px) {
  .fr-zeiten { grid-column: auto; }
}
/* ICS-Export */
.ics-wahl { display: flex; flex-direction: column; gap: 14px; }
.ics-zeitraum { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ics-zeitraum .select, .ics-zeitraum .input { width: auto; }
.ics-auswahl { display: flex; flex-direction: column; gap: 10px; }
.ics-liste { max-height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-mittel); padding: 4px 10px; }
.ics-eintrag { display: grid; grid-template-columns: 18px 86px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 36px; font-size: 13.5px; cursor: pointer; }
.ics-eintrag input { width: 18px; height: 18px; accent-color: var(--accent); }
.ics-datum { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ics-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* .aufgabe-plus: normaler Hauptknopf wie „+ Termin“ bei den Fristen */
/* Dokumente: Ordneransicht */
.dok-pfad { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin: 4px 0 14px; }
.dok-pfad-teil { border: 0; background: transparent; padding: 4px 6px; border-radius: var(--r-klein); font: inherit; font-size: 14px; font-weight: 600; color: var(--accent-text); cursor: pointer; }
.dok-pfad-teil:hover { background: var(--accent-soft); }
.dok-pfad-teil.aktiv { color: var(--ink); cursor: default; background: transparent; }
.dok-pfad-trenner { color: var(--ink-3); display: inline-grid; }
.dok-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.dok-ordner-kachel, .dok-datei-kachel { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; min-height: 112px; border: 1px solid var(--line); border-radius: var(--r-mittel); background: var(--card); font: inherit; color: var(--ink); text-align: left; cursor: pointer; min-width: 0; transition: box-shadow var(--dauer-2) ease, border-color var(--dauer-2) ease; }
.dok-ordner-kachel:hover, .dok-datei-kachel:hover { box-shadow: var(--shadow); border-color: var(--line-2); }
.dok-ordner-kachel:focus-visible, .dok-datei-kachel:focus-visible { box-shadow: var(--ring); outline: none; }
.dok-ordner-icon { width: 40px; height: 40px; border-radius: var(--r-mittel); background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; }
.dok-datei-icon { width: 36px; height: 36px; border-radius: var(--r-mittel); background: var(--inset); color: var(--ink-2); display: grid; place-items: center; }
.dok-ordner-name { font-weight: 650; font-size: 14.5px; max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }
.dok-datei-name { font-weight: 560; font-size: 13.5px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 640px) { .dok-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
/* Freigaben */
.fg-aktionen { gap: 6px; flex-wrap: nowrap; }
.sz-select { width: auto; min-width: 150px; height: 32px; }
.gast-leiste { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; padding: 10px 14px; border-radius: var(--r-mittel); background: var(--accent-soft); color: var(--accent-text); font-size: 14px; }
.gast-leiste span { flex: 1; min-width: 180px; color: var(--ink); }
.fg-kontakt { display: flex; flex-direction: column; gap: 16px; }
.fg-liste { display: flex; flex-direction: column; }
.fg-zeile { display: flex; align-items: center; gap: 10px; min-height: 44px; border-bottom: 1px solid var(--line); }
.fg-wer { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.fg-wer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-form { display: grid; grid-template-columns: minmax(0, 1fr) 170px auto; gap: 10px; align-items: end; }
@media (max-width: 640px) { .fg-form { grid-template-columns: 1fr; } .fg-aktionen { flex-wrap: wrap; justify-content: flex-end; } }
@media (max-width: 640px) {
  .sz:has(.fg-aktionen) { flex-wrap: wrap; row-gap: 8px; }
  .sz:has(.fg-aktionen) .sz-l { flex: 1 1 100%; }
  .sz:has(.fg-aktionen) .sz-r { flex: 1 1 100%; justify-content: flex-end; }
}
/* Klebende Suchleiste: unter Kopfleiste und klebenden Bereichsreitern (--reiter-hoehe misst app.js), über dem Inhalt */
.immo-leiste { top: calc(var(--kopf-unten, 72px) + var(--reiter-hoehe, 0px) + 8px); z-index: 19; }
.content:not(:has(> .tabs)) .immo-leiste { top: calc(var(--kopf-unten, 72px) + 8px); }
/* Status-Segment in der Suchleiste */
.immo-leiste-zeile .sl-status { flex: none; }
@media (max-width: 640px) { .immo-leiste-zeile .sl-status { order: 2; } .immo-leiste-zeile .immo-filter-btn, .immo-leiste-zeile .sortier-btn { order: 3; } }
.aufgaben-karte .ml-inhalt { padding: 4px 16px 12px; }
.fr-liste.tx-liste .fr-zeitraum, .fr-liste.tx-liste > .fr-zeitraum { padding: 0 16px; }

/* ---------------- Nachrichten im Design des Finanzassistenten ---------------- */
.msg-item { color: var(--ink); }
.msg-item:hover { background: var(--hover, var(--inset)); }
.msg-item.active { background: var(--sel-bg); box-shadow: inset 2px 0 0 var(--accent); }
.msg-item .unread { background: var(--accent); }
.ungelesen-punkt { width: 8px; height: 8px; flex: none; border-radius: var(--r-rund); background: var(--accent); display: inline-block; }
/* Finanzassistent: Reiter scrollen statt abschneiden, Erledigtes ruhig */
.inbox-reiter { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 0; }
.inbox-reiter::-webkit-scrollbar { display: none; }
.inbox-reiter .ml-tab { flex: none; padding-left: 8px; padding-right: 8px; }
.inbox-haken { width: 18px; height: 18px; margin-top: 1px; flex: none; border-radius: var(--r-rund); background: var(--pos-soft, var(--inset)); color: var(--pos); display: grid; place-items: center; }
.inbox-item.ist-erledigt .inbox-titel { color: var(--ink-2); }
.inbox-karte.ist-erledigt .icon-tile { opacity: .6; }
.inbox-erledigt { margin-top: 4px; }
/* Gespeicherte Deals: Auswahl innen gezeichnet (die Liste scrollt und würde einen äußeren Schatten abschneiden) */
.deal .deal-liste .list-item.deal-item { border-radius: var(--r-mittel); }
.deal .deal-liste .list-item.deal-item.aktiv { border-color: var(--accent); background: var(--sel-bg); box-shadow: inset 0 0 0 1px var(--accent); }
.deal .deal-liste .list-item.deal-item:focus-visible, .deal .deal-liste .list-item.deal-item:focus-within { box-shadow: inset 0 0 0 1px var(--accent); border-color: var(--accent); }
.deal-rechts .deal-liste .list { padding: 2px; }

/* ---------------- Portfolio-Score: ruhig, Aspekte zum Antippen ---------------- */
.score-karte { display: flex; flex-direction: column; gap: 20px; }
.score-kopf { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.score-kopf .score-ring { flex: none; }
.score-kopf .big { font-size: 40px; }
.score-text { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 6px; }
.score-text .prose { margin: 0; }
.score-ein, .sa-ein { font-weight: 600; }
.chip.score-ein.gut, .chip.score-ein.solide, .chip.score-ein.verbesserbar { background: var(--accent-soft); color: var(--accent-text); }
.score-aspekte { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.score-aspekt { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-mittel); background: var(--card); font: inherit; color: var(--ink); text-align: left; cursor: pointer; transition: box-shadow var(--dauer-2) ease, border-color var(--dauer-2) ease; }
.score-aspekt:hover { box-shadow: var(--shadow); border-color: var(--line-2); }
.score-aspekt:focus-visible { outline: none; box-shadow: var(--ring); }
.sa-kopf, .sa-fuss { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sa-punkte { font-weight: 650; } .sa-punkte small, .aspekt-zahl small { font-weight: 500; color: var(--ink-3); font-size: 12px; }
.sa-balken { display: block; height: 6px; border-radius: var(--r-rund); background: var(--track); overflow: hidden; }
.sa-balken.gross { height: 8px; }
.sa-balken i { display: block; height: 100%; border-radius: var(--r-rund); background: var(--reihe-1); }
.sa-ein { font-size: 12px; color: var(--ink-2); }
.sa-ein.gut { color: var(--accent-text); }
.aspekt { display: flex; flex-direction: column; gap: 10px; }
.aspekt-kopf { display: flex; align-items: baseline; justify-content: space-between; }
.aspekt-zahl { font-size: 28px; font-weight: 650; }
.aspekt-h { margin: 8px 0 0; font-size: 13px; font-weight: 650; color: var(--ink-2); }
.aspekt .prose { margin: 0; }
.aspekt-tipps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.aspekt-tipps li { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

/* ---------------- Scannen (js/scan.js) ---------------- */
.modal.scan-fenster .modal-body { display: flex; flex-direction: column; gap: 12px; }
.scan-leer { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 18px 10px 6px; }
.scan-leer .prose { max-width: 460px; margin: 0; color: var(--ink-2); }
.scan-quellen { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.scan-buehne { display: grid; place-items: center; background: var(--inset); border-radius: var(--r-mittel); padding: 10px; }
.scan-bild { max-width: 100%; max-height: 58vh; touch-action: none; cursor: crosshair; border-radius: var(--r-klein); }
.scan-leiste { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.scan-seiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.scan-seite { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-mittel); background: var(--card); }
.scan-seite img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: var(--inset); border-radius: var(--r-klein); cursor: pointer; }
.scan-nr { position: absolute; top: 12px; left: 12px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-rund); background: var(--ink); color: var(--page); font-size: 12px; font-weight: 650; display: grid; place-items: center; }
.scan-seite-knoepfe { display: flex; justify-content: space-between; }
.scan-weitere { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.scan-video { width: 100%; max-height: 62vh; border-radius: var(--r-mittel); background: #000; }
@media (max-width: 640px) { .scan-seiten { grid-template-columns: repeat(2, minmax(0, 1fr)); } .scan-leiste .seg { width: 100%; } }

/* ---------------- Schäden ---------------- */
.sch-liste { padding: 4px 8px 8px; display: flex; flex-direction: column; }
.sch-zeile { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 8px; border: 0; border-bottom: 1px solid var(--line); background: transparent; font: inherit; color: var(--ink); text-align: left; cursor: pointer; border-radius: var(--r-mittel); }
.sch-zeile:hover { background: var(--hover, var(--inset)); }
.sch-zeile.neu b::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: var(--r-rund); background: var(--accent); vertical-align: 1px; }
.sch-zeile .grow { display: flex; flex-direction: column; gap: 2px; }
.sch-foto { width: 48px; height: 48px; flex: none; border-radius: var(--r-mittel); object-fit: cover; }
.sch-foto.leer { display: grid; place-items: center; background: var(--inset); color: var(--ink-3); }
.sch-status.in_bearbeitung { background: var(--accent-soft); color: var(--accent-text); }
.sch-status.erledigt { color: var(--pos); }
@media (max-width: 640px) { .sch-zeile { flex-wrap: wrap; } .sch-zeile .grow { flex: 1 1 calc(100% - 60px); } }
.sch-hinweis { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 12px 14px; border-radius: var(--r-mittel); background: var(--accent-soft); color: var(--accent-text); text-decoration: none; }
.sch-hinweis span { flex: 1; color: var(--ink); }
.sd { display: flex; flex-direction: column; gap: 12px; }
.sd-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sd-text { margin: 0; }
.sd-fotos { display: flex; gap: 8px; flex-wrap: wrap; }
.sd-fotos img { width: 140px; height: 140px; object-fit: cover; border-radius: var(--r-mittel); }
.sd-vorschlag { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-mittel); background: var(--accent-soft); }
.sd-vorschlag .grow { display: flex; flex-direction: column; }
.sd-aufgabe { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); text-decoration: none; font-weight: 600; }
.sd-antworten { display: flex; flex-direction: column; gap: 6px; }
.sd-antwort { padding: 10px 12px; border-radius: var(--r-mittel); background: var(--inset); }
.sd-antwort p { margin: 2px 0 0; }
/* Mieterschlüssel */
.mz { display: flex; flex-direction: column; gap: 12px; }
.mz-neu { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.mz-karte { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-mittel); }
.mz-qr { width: 200px; height: 200px; padding: 0; border-radius: var(--r-mittel); overflow: hidden; background: #fff; }
.mz-qr svg { width: 100%; height: 100%; display: block; }
.mz-rechts { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mz-code { font-size: 22px; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.mz-link { font-size: 12.5px; }
.mz-stand { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-mittel); background: var(--inset); }
.mz-aktionen { gap: 8px; }
@media (max-width: 640px) { .mz-karte { grid-template-columns: 1fr; justify-items: center; } }

/* Bankkonten: je Verbindung eine Gruppe mit ihren Konten (js/views/bank.js) */
.bank-verbindungen { display: flex; flex-direction: column; gap: 12px; }
.bv { border: 1px solid var(--line); border-radius: var(--r-mittel); padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.bv.abgelaufen { border-color: color-mix(in srgb, var(--neg) 40%, var(--line)); }
.bv-kopf { display: flex; align-items: center; gap: 10px; }
.bv-kopf .bank-kuerzel { flex: none; }
.bv-fehler { color: var(--warn-text, var(--warn)); }
.bv-konto { display: flex; align-items: center; gap: 10px; padding: 8px 0 0; border-top: 1px solid var(--line); margin-top: 4px; }
.bv-konto.aus > .grow, .bv-konto.aus .bv-saldo { opacity: .5; }
.bv-saldo { font-weight: 600; white-space: nowrap; }
.bv-saldo.neg { color: var(--neg); }
.bv-zuordnung { width: auto; max-width: 190px; height: 32px; font-size: 13px; }
.bv-hinweis { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-mittel); background: var(--inset); color: var(--ink-2); font-size: 13px; flex-wrap: wrap; }
.bv-hinweis > span { flex: 1; min-width: 200px; }
.bv-hinweis.crit { background: var(--neg-soft, var(--inset)); }
.bv-weitere { align-self: flex-start; }
@media (max-width: 640px) {
  .bv-konto { flex-wrap: wrap; }
  .bv-konto > .grow { flex: 1 1 0; }
  .bv-zuordnung { flex: 1 1 calc(100% - 60px); max-width: none; order: 3; }
  .bv-konto .sw-knopf { order: 4; }
  .bv-kopf .bv-text { display: none; }
}

/* Hinweis auf eine neue Version (app.js, App.updateHinweis): unten mittig, am Handy über der Leiste */
.update-leiste { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 400; display: flex; align-items: center; gap: 10px; width: min(520px, calc(100% - 2 * var(--rand, 16px))); padding: 10px 10px 10px 16px; border-radius: var(--r-gross); background: var(--card); color: var(--ink); box-shadow: var(--shadow-pop); border: 1px solid var(--line); font-size: 14px; }
@media (max-width: 1023px) { .update-leiste { bottom: calc(96px + env(safe-area-inset-bottom)); } }

/* Auswählen und Löschen (js/auswahl.js): Kästchen je Zeile, Leiste unten */
.aw-kasten { flex: none; width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: var(--r-klein); border: 1.5px solid var(--line-2); background: var(--card); color: transparent; cursor: pointer; margin-right: 10px; transition: background-color var(--dauer-1) ease, border-color var(--dauer-1) ease; }
.aw-kasten.an { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.aw-kasten:focus-visible { outline: none; box-shadow: var(--ring); }
.aw-zeile.aw-modus { cursor: pointer; user-select: none; -webkit-user-select: none; }
.aw-zeile.aw-gewaehlt { background: var(--sel-bg); }
.aw-knopf.an { background: var(--sel-bg); }
.aw-leiste { position: sticky; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 30; display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 8px 8px 8px 16px; border-radius: var(--r-gross); background: var(--card); box-shadow: var(--shadow-pop); border: 1px solid var(--line); flex-wrap: wrap; }
.aw-leiste[hidden] { display: none; }
.aw-zahl { font-size: 14px; }
@media (max-width: 1023px) { .aw-leiste { bottom: calc(92px + env(safe-area-inset-bottom)); } }
.aw-aus { opacity: .45; pointer-events: none; }
.aw-kopfzeile { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
/* Im Auswahlmodus nur das Auswahl-Kästchen: eigene Kästchen der Zeile (Erledigt, Vergleichen) treten zurück */
.aw-modus > input[type="checkbox"] { display: none; }

/* Anmeldung: drei Reiter (Anmelden, Konto erstellen, Mieterschlüssel), aktiver blau hervorgehoben */
.anm-seg { width: 100%; }
.anm-seg button { flex: 1 1 auto; min-width: 0; padding-left: 8px; padding-right: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anm-seg .thumb { background: var(--accent-soft); box-shadow: none; }
.anm-seg button[aria-pressed="true"] { color: var(--accent-text); }
.anm-scan { width: 100%; justify-content: center; }
/* Gruppenüberschriften in Karten nicht kleben lassen: Karten haben overflow: hidden, dadurch galt top: var(--head-h)
   ab der Kartenoberkante und schob die erste Überschrift über die erste Zeile (Zähler 15 px, Aufgaben 5 px). */
.card .fr-gruppe { position: static; }
.zl-karte .ml-inhalt { padding: 4px 16px 12px; }

/* Analysen: Verteilung von Wert und Schulden auf Projekte (views/misc.js). Eigenkapital = Akzent, Restschuld = Grau schraffiert */
.vw-legende { margin-left: auto; align-self: center; }
.vw-kopf { justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.vw-kopf > b { font-weight: 560; }
.vw-werte { display: flex; gap: 6px 14px; flex-wrap: wrap; }
.vw-werte b { color: var(--ink); font-weight: 600; }
.vw-werte .neg b { color: var(--neg); }
.vw-spur { height: 22px; margin-top: 8px; border-radius: var(--r-klein); background: var(--track); overflow: hidden; }
.vw-balken { display: flex; height: 100%; border-radius: var(--r-klein); overflow: hidden; }
.vw-balken > i { display: block; height: 100%; }
.vw-ek { background: var(--reihe-1); }
.vw-schuld { background: repeating-linear-gradient(135deg, var(--reihe-4) 0 5px, var(--reihe-5) 5px 8px); }
.vw-punkt { display: inline-block; width: 9px; height: 9px; border-radius: var(--r-rund); margin-right: 5px; vertical-align: 0; }

/* ---------- Neubau: Orange nur für die eine Hauptaktion einer Seite ----------
   Hauptknöpfe in Karten, Listen und Widgets sind ruhig (Fläche --inset); im Seitenkopf, in Dialogen und Leisten bleibt Orange. */
.content .card .btn.primary, .content .widget .btn.primary, .content .list .btn.primary, .content .nk-karte .btn.primary {
  background: var(--inset); border-color: var(--line); color: var(--ink);
}
.content .card .btn.primary:hover, .content .widget .btn.primary:hover, .content .list .btn.primary:hover, .content .nk-karte .btn.primary:hover { background: var(--track); border-color: var(--line-2); }
.content .card .btn.primary.wichtig { background: var(--b-primary); border-color: var(--b-primary); color: var(--b-primary-ink); }
/* Filter im Seitenkopf (App.shell.filterChips) */
.seiten-filter { display: flex; align-items: center; gap: 6px; }