/* Finanzen — iOS-nahes, responsives Design für iPhone, iPad und Mac. */

:root {
  --ui: 1;
  /* Bewegung: Kurven und Dauern (Skill apple-design / improve-animations, plans/000) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.16, 0.64, 1);
  --dur-press: 160ms; --dur-fast: 150ms; --dur-ui: 250ms; --dur-chart: 300ms; --dur-explain: 500ms;
  --bg: var(--foundation-bg-light, #f2f2f7);
  --card: var(--foundation-card-light, #ffffff);
  --text: #1c1c1e;
  --text2: #6e6e73;
  --border: rgba(0, 0, 0, 0.08);
  --accent: var(--accent-light, var(--foundation-accent-light, #af52de));
  --green: #34c759;
  --red: #ff3b30;
  --orange: #ff9500;
  /* Beträge als Text: dunklere Töne für ausreichenden Kontrast (WCAG AA) */
  --green-text: #1f7a36;
  --red-text: #d70015;
  /* Klar/Getönt-Regler (Einstellungen → Personalisieren), von theme.js gesetzt: 0,45 = klar … 0,93 = stark getönt.
     Alle Glas-Tokens (hell und dunkel) stehen gesammelt im Abschnitt „Liquid Glass“ weiter unten. */
  --glass-opacity: 0.86;
  /* Akzent als Fläche (mit Text darauf), als Text und Text auf der Fläche: aus der gewählten Akzentfarbe
     abgeleitet, damit jeder Akzent in Hell und Dunkel lesbar bleibt (mind. 4,5:1). */
  --accent-fill: var(--accent);
  --on-accent: #fff;
  --accent-on-light: var(--accent); /* Akzent als Text auf hellem Grund */
  --accent-on-dark: var(--accent); /* Akzent als Text auf dunklem Grund */
  --accent-text: var(--accent-on-light);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* True Black (UI-Runde): echtes Schwarz als Basis - OLED-freundlich; Karten
       kaum darueber (#0f0f10), Glaskante macht die Tiefe. Akzent knallt (Violett). */
    --bg: var(--foundation-bg-dark, #000000);
    --card: var(--foundation-card-dark, #0f0f10);
    --text: #f5f5f7;
    --text2: #9898a0;
    --border: rgba(255, 255, 255, 0.1);
    --accent: var(--accent-dark, var(--foundation-accent-dark, #bf5af2));
    --green: #30d158;
    --red: #ff453a;
    --orange: #ff9f0a;
    --green-text: #30d158;
    --red-text: #ff6961;
    --accent-text: var(--accent-on-dark);
  }
}

/* Relative Farben (iOS 18+): Fläche im Hellmodus abgedunkelt für weißen Text; im Dunkelmodus schwarzer oder weißer Text
   je nach Helligkeit des Akzents; Akzent als Text hell auf Dunkel bzw. dunkel auf Hell. */
@supports (color: oklch(from red l c h)) {
  :root {
    --accent-fill: oklch(from var(--accent) min(l, 0.5) c h);
    --accent-on-light: oklch(from var(--accent) min(l, 0.48) c h);
    --accent-on-dark: oklch(from var(--accent) max(l, 0.72) c h);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --accent-fill: var(--accent);
      --on-accent: oklch(from var(--accent) clamp(0, (0.58 - l) * 1000, 1) 0 0);
      --accent-text: var(--accent-on-dark);
    }
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Author-Stylesheet-Regeln mit "display" (z. B. .form label, .cat-grid) würden
   sonst das native [hidden]-Attribut überstimmen — Author-Origin schlägt die
   UA-Regel [hidden]{display:none} unabhängig von der Spezifität. */
[hidden] { display: none !important; }

/* Festes App-Gerüst: Das Dokument selbst scrollt nie, nur der Inhaltsbereich
   (#view). Sonst ändert iOS je nach Seitenlänge die Größe des sichtbaren
   Bereichs (Safari-Leiste/Statusbereich), und die unten fixierte Tab-Leiste
   springt beim Tab-Wechsel mal höher, mal tiefer. */
html { font: -apple-system-body; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; height: 100%; overflow: hidden; overscroll-behavior: none; touch-action: pan-y; background: var(--bg); }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  position: fixed;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  /* pan-x/pan-y statt "auto": normales Scrollen bleibt erlaubt, Pinch- und
     Doppeltipp-Zoom werden unterbunden (siehe app.js für die JS-Ergänzung,
     da iOS touch-action bei Pinch-Gesten nicht immer vollständig respektiert).
     Nur vertikal: seitliches Verschieben der Seite oder von Sheets unterbinden. */
  touch-action: pan-y;
}

.app-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  min-height: calc(env(safe-area-inset-top) + 50px * var(--ui));
  padding: calc(env(safe-area-inset-top) + 3px) max(12px, env(safe-area-inset-right)) 3px max(12px, env(safe-area-inset-left));
  /* Bewusst deckend, ohne Verlauf und ohne backdrop-filter: iOS 26/27 legt in
     installierten Web-Apps sonst einen eigenen Liquid-Glass-Weichzeichner unter
     die Statusleiste, der ein Stück in die Seite hineinreicht. Eine einfarbige,
     fest am oberen Rand liegende Leiste kann WebKit als Randfarbe übernehmen.
     Der Titel und die Aktionen stehen in dieser Leiste. */
  background-color: var(--bg);
}

.view {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  --view-max: 680px;
  /* FAB reicht bis safe-area + 78px + 56px Höhe = 134px vom unteren Rand;
     150px lassen etwas Luft, damit letzte Inhalte (z. B. ein Hinweistext am
     Ende) nie darunter/dahinter landen. */
  overflow-x: hidden;
  padding: calc(env(safe-area-inset-top) + 52px) max(16px, calc((100% - var(--view-max)) / 2))
    calc(env(safe-area-inset-bottom) + 110px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: calc(env(safe-area-inset-bottom) + 120px);
}

/* ---------- Karten & Listen ---------- */

.card {
  /* Deckend und ohne backdrop-filter: Glas nur für Dock, Sheets und Menüs (flüssiges Scrollen, nichts scheint durch). */
  background: var(--card);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  padding: 16px;
  box-shadow: var(--glass-shadow), var(--glass-edge);
}

.card h3 { font-size: var(--foundation-size-subhead); margin-bottom: 12px; }

.card.list { padding: 4px 0; overflow: hidden; }

.section-title {
  font-size: var(--foundation-size-footnote);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text2);
  margin: 6px 4px 8px;
}

.hero { text-align: left; }
.hero-label { color: var(--text2); font-size: var(--foundation-size-footnote); }
.hero-fresh { float: right; margin-left: 8px; }

/* Ziehen zum Aktualisieren (Übersicht): liegt hinter der Kopfzeile und kommt beim Ziehen darunter hervor. */
.pull-refresh {
  position: fixed; z-index: 9; left: 50%; top: calc(env(safe-area-inset-top) + 8px);
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--card); color: var(--accent-text); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  transform: translate(-50%, 0); opacity: 0; pointer-events: none;
}
.pull-refresh svg { transition: transform var(--dur-ui) var(--ease-in-out); }
.pull-refresh.ready svg { transform: rotate(180deg); }
.pull-refresh.busy svg { animation: scan-spin 0.8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .pull-refresh.busy svg { animation: none; } }
.hero-value { font-weight: 700; letter-spacing: -0.02em; margin: 2px 0 10px; font-variant-numeric: tabular-nums; font-size: clamp(1.6rem, 8vw, 2rem); }
.hero-month { display: flex; gap: 18px; flex-wrap: wrap; row-gap: 8px; }
.hero-month > div { display: flex; flex-direction: column; gap: 2px; }
.hero-month small { color: var(--text2); font-size: var(--foundation-size-caption2); }
.pill { font-weight: 600; font-size: 0.824rem; font-variant-numeric: tabular-nums; }
.income { color: var(--green-text); }
.expense { color: var(--red-text); }
.neutral { color: var(--text2); }

/* ---------- Buchungsliste ---------- */

.tx-date { font-size: var(--foundation-size-footnote); color: var(--text2); margin: 10px 4px 6px; }
.tx-list { display: flex; flex-direction: column; }

.tx-item, .budget-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tx-swipe:last-child .tx-item, .budget-item:last-child { border-bottom: none; }
.tx-item:active, .budget-item:active { background: var(--border); }
.tx-item.inactive { opacity: 0.5; }

/* ---------- Wisch-Aktionen (Buchungszeile) ---------- */

.tx-swipe { position: relative; overflow: hidden; }
.tx-swipe .tx-item {
  background: var(--card);
  position: relative;
  z-index: 1;
  touch-action: pan-y; /* Wisch-Geste horizontal an JS, vertikales Scrollen bleibt nativ */
}
/* filter statt background: das :active-Feedback darf die Zeile beim Ziehen
   nicht durchsichtig machen — sonst scheinen die Wisch-Aktionen dahinter durch,
   obwohl die Zeile sie geometrisch korrekt verdeckt (die Maus/der Finger gilt
   während des ganzen Ziehens als "aktiv", nicht nur beim reinen Antippen). */
.tx-swipe .tx-item:active { filter: brightness(0.96); }

/* Geplante (zukünftige) Buchungen: nur den Inhalt abblenden, nicht den
   Button selbst — sonst würde "opacity" auch dessen deckenden Hintergrund
   durchsichtig machen und die Wisch-Aktionen dahinter schimmern durch. */
.tx-item.planned .tx-icon,
.tx-item.planned .tx-text,
.tx-item.planned .tx-amount { opacity: 0.55; }

.tx-actions { position: absolute; top: 0; bottom: 0; width: 164px; display: flex; visibility: hidden; }
.tx-swipe.swiping-left .tx-actions-right, .tx-swipe.swiping-right .tx-actions-left { visibility: visible; }
/* Compositor: Wischzeilen als eigener Layer nur waehrend der Bewegung (Klasse von gestures.js) - Glasflaechen bekommen bewusst kein will-change (glasscss-Test: backdrop-filter ist bereits ein Layer, dauerhafte Layers kosten Speicher). */
.tx-swipe.swiping .tx-item { background: var(--card) !important; filter: none; will-change: transform; }
.tx-swipe.full-swipe .swipe-action.edit { flex: 0 0 0; padding: 0; overflow: hidden; opacity: 0; } /* Breite sofort, nur die Deckkraft blendet */
.tx-swipe.full-swipe .tx-actions-right { width: 100%; }
.swipe-action .icon { width: 20px; height: 20px; }
.tx-actions-left { left: 0; }
.tx-actions-right { right: 0; }
.swipe-action {
  flex: 1; transition: opacity var(--dur-fast) var(--ease-out);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: none; font: inherit; font-size: 0.588rem; font-weight: 600; color: #fff; cursor: pointer;
}
.swipe-action.edit { background: #8e8e93; }
.swipe-action.delete { background: var(--red); }
/* Nach rechts: Vermutung übernehmen — grüne Fläche über die ganze Zeile, Text links */
.tx-actions-left:has(.accept) { width: 100%; }
.swipe-action.accept { background: var(--green, #34c759); flex-direction: row; justify-content: flex-start; gap: 8px; padding: 0 18px; font-size: 0.8rem; }
.tx-swipe:not(.full-swipe-right) .swipe-action.accept { background: color-mix(in srgb, var(--green, #34c759) 70%, #8e8e93); }
/* Ungeordnet: grauer Chip statt Kategoriename */
.tx-unsorted { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; padding: 0 7px; border-radius: 8px; line-height: 1.5; color: var(--text2);
  background: color-mix(in srgb, var(--text) 9%, transparent); }

.tx-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.118rem;
  background: color-mix(in srgb, var(--dot, var(--accent)) 18%, transparent);
}

.tx-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tx-title { font-size: var(--foundation-size-subhead); font-weight: 500; overflow-wrap: anywhere; }
.tx-sub { font-size: 0.735rem; color: var(--text2); overflow-wrap: anywhere; }
.tx-amount { font-weight: 600; font-size: var(--foundation-size-subhead); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chevron { font-size: var(--foundation-size-title3); color: var(--text2); opacity: 0.6; }

.empty-state { padding: 26px 16px; text-align: center; color: var(--text2); font-size: 0.824rem; }

/* ---------- Monatsnavigation & Suche ---------- */

.month-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; touch-action: pan-y; }
.month-label { font-size: var(--foundation-size-body); font-weight: 600; display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.nav-btn {
  width: 38px; height: 38px;
  border-radius: 12px;
  border: none;
  background: var(--card);
  color: var(--accent-text);
  font-size: var(--foundation-size-title2);
  cursor: pointer;
}

.search {
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: var(--foundation-size-subhead);
}

.month-summary { text-align: center; font-size: 0.824rem; font-weight: 600; color: var(--text2); }

/* ---------- Donut & Balken ---------- */

.donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.donut { position: relative; width: 124px; flex: none; }
.donut svg { width: 100%; transform: rotate(-90deg); }
.donut-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.donut-value { font-size: var(--foundation-size-body); font-weight: 700; font-variant-numeric: tabular-nums; }
.donut-label { font-size: var(--foundation-size-caption2); color: var(--text2); }

/* Donut und Legende nebeneinander (29.10.2026, weniger Scrollen): kleinerer Ring, schmalere Mindestbreite der Legende;
   bei großer Schrift (--ui) bricht die Legende weiterhin unter den Ring. */
.donut-legend { list-style: none; flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 7px; }
.donut-legend li { display: flex; align-items: center; gap: 8px; font-size: 0.794rem; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.legend-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.legend-value { color: var(--text2); font-variant-numeric: tabular-nums; }
.legend-value.expense { color: var(--red-text); }

.chart-empty { color: var(--text2); font-size: 0.824rem; padding: 18px 0; text-align: center; }

/* Diagramme mit Y-Achse (charts.js) */
.ychart { --line: var(--accent); display: flex; flex-direction: column; gap: 4px; font-variant-numeric: tabular-nums; }
.ychart-tip { font-size: 0.72rem; color: var(--text2); min-height: 1.2em; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ychart-row { display: flex; align-items: stretch; }
.ychart-axis { position: relative; flex: none; height: 132px; font-size: 0.62rem; color: var(--text2); }
.ychart-axis span { position: absolute; right: 6px; transform: translateY(50%); white-space: nowrap; line-height: 1; }
.ychart-plot { position: relative; flex: 1; min-width: 0; height: 132px; cursor: pointer; }
.ychart-grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed color-mix(in srgb, var(--text2) 22%, transparent); }
.ychart-grid.zero { border-top: 1px solid color-mix(in srgb, var(--text2) 45%, transparent); }
.ychart-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ychart-line { stroke: var(--line); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ychart-area { fill: color-mix(in srgb, var(--line) 14%, transparent); stroke: none; }
/* Einmaliges Zeichnen beim ersten Aufbau der Jahresansicht (yearly.js): --len = Länge in Bildschirm-Pixeln */
.ychart-line.draw { stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); }
.ychart-line.drawn { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-explain) var(--ease-drawer); }
.ychart-dot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--line); box-shadow: 0 0 0 3px color-mix(in srgb, var(--line) 25%, transparent); pointer-events: none; transition: transform var(--dur-fast) var(--ease-out); } /* Ort bleibt, Bewegung per translate (charts.js) */
.ychart-x { display: flex; font-size: 0.62rem; color: var(--text2); }
.ychart-x span { flex: 1; text-align: center; white-space: nowrap; overflow: hidden; }
.ychart-x.line { justify-content: space-between; }
.ychart-x.line span { flex: none; }

.bars { position: absolute; inset: 0; display: flex; gap: 4px; align-items: stretch; }
.bar-group { flex: 1; display: flex; align-items: flex-end; justify-content: center; height: 100%; padding: 0; border: 0; background: none; border-radius: 8px; cursor: pointer; font: inherit; color: inherit; }
.bar-group.sel { background: color-mix(in srgb, var(--text2) 10%, transparent); }
.bar-pair { height: 100%; width: 100%; display: flex; gap: 3px; align-items: flex-end; justify-content: center; }
.bar { width: min(12px, 34%); border-radius: 4px 4px 2px 2px; min-height: 0; display: block; }
.bar-income { background: var(--green); }
.bar-expense { background: var(--red); }
.bars-legend { display: flex; gap: 16px; margin-top: 10px; font-size: var(--foundation-size-caption); color: var(--text2); }
.bars-legend span { display: flex; align-items: center; gap: 5px; }

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

.budget-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
/* Budget-Zeilen: Betrag bleibt einzeilig, Name wird gekürzt */
.budget-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; row-gap: 2px; }
.budget-nums { color: var(--text2); font-variant-numeric: tabular-nums; font-size: 0.8rem; }
.progress { height: 7px; border-radius: 4px; background: var(--border); overflow: hidden; }
/* Füllung per scaleX (--v 0…1) statt width: nur transform bewegt sich. */
.progress-fill { height: 100%; width: 100%; border-radius: 4px; transform-origin: left center; transform: scaleX(var(--v, 0)); transition: transform var(--dur-chart) var(--ease-drawer); }
@media (prefers-reduced-motion: reduce) { .progress-fill { transition: none; } }

/* ---------- Formulare & Sheets ---------- */

/* Die Überlagerung behält Deckkraft 1 und bewegt sich nicht: ein Vorfahr des Glases mit opacity < 1 wäre Backdrop-Root
   und schaltete den Blur des Sheets ab. Die Abdunkelung ist ein eigenes Element (::before) mit --scrim (0…1, von
   glass.js aus der Sheet-Position gesetzt). Das Sheet selbst fährt per transform/opacity (glass.js). */
.sheet-overlay {
  position: fixed; inset: 0; z-index: 50;
  --scrim: 0;
  display: flex; justify-content: center;
}
.sheet-overlay::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(0, 0, 0, 0.28); opacity: var(--scrim);
}
/* Nur das aktive oberste Sheet nimmt Berührungen an: ein ausfahrendes (.closing) fängt keine mehr ab, und ein noch
   nicht eingefahrenes (vor .open, bis zum nächsten Bild) noch nicht — sonst schlösse ein Tipp in diesem Bild das Sheet
   über dem Hintergrund oder träfe ein ✕ darunter. */
.sheet-overlay.closing { pointer-events: none; }
.sheet-overlay:not(.open) { pointer-events: none; }

/* Sheet: Gestaltung unter „Bildschirmfüllende Ansichten“ am Dateiende. Vor dem ersten Bild steht das Sheet unter dem Rand bereit; danach setzt glass.js die Werte. */
.sheet-overlay:not(.open) .sheet { transform: translateY(100%); }


.form { display: flex; flex-direction: column; gap: 14px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.794rem; font-weight: 500; color: var(--text2); }
.form label.check { align-items: center; gap: 10px; color: var(--text); font-size: var(--foundation-size-subhead); min-height: 44px; padding: 4px 0; justify-content: space-between; flex-direction: row-reverse; }

.form input, .form select {
  font: inherit;
  font-size: var(--foundation-size-callout); /* verhindert Auto-Zoom auf iOS */
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  width: 100%;
}
.form input[type="color"] { padding: 4px; height: 44px; }
/* Datumsfelder (29.10.2026, Export-Screenshot): iOS gibt input[type=date] eine eigene Mindestbreite und zentriert den
   Wert — das Feld ragte rechts aus der Karte. Ohne Systemoptik, Breite aus dem Raster, Wert links. */
.form input[type="date"], .form input[type="month"] { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; display: block; box-sizing: border-box; }
.form input[type="date"]::-webkit-date-and-time-value, .form input[type="month"]::-webkit-date-and-time-value { text-align: left; }
/* Zwei Felder nebeneinander (Von | Bis): spart eine Bildschirmhöhe. */
.form .form-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.form .form-pair > label { min-width: 0; }
/* Symbol-Feld im Kategorie-Editor: Vorschau (Noun-Symbol bzw. Zeichen) links, Eingabe daneben. */
.form .icon-field { display: flex; align-items: center; gap: 10px; }
.form .icon-preview { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--glass-control); font-size: 22px; }
.form input[type="checkbox"] { width: 22px; height: 22px; flex-shrink: 0; }

.input-row { display: flex; gap: 8px; }
.input-row input { flex: 1; }

.form label.amount-field, .amount-field {
  display: flex; flex-direction: row; align-items: baseline; gap: 8px;
  padding: 0 16px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--border);
}
.amount-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.form .amount-field input, .amount-field input {
  flex: 1; min-width: 0;
  font-size: var(--foundation-size-title1); font-weight: 700; padding: 14px 0; text-align: right; font-variant-numeric: tabular-nums;
  border: none !important; background: transparent !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important; outline: none;
}
.amount-field span { flex: none; white-space: nowrap; font-size: var(--foundation-size-body); color: var(--text2); font-weight: 600; }

.segmented {
  display: flex;
  background: var(--card);
  border-radius: 12px;
  padding: 3px;
  border: 1px solid var(--border);
}
.segmented button {
  flex: 1; padding: 9px 4px;
  border: none; border-radius: 9px;
  background: none; color: var(--text2);
  font: inherit; font-size: 0.824rem; font-weight: 600;
  cursor: pointer;
}
.segmented button.active { background: var(--accent-fill); color: var(--on-accent); }

.cat-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  border-radius: 20px;
  border: 1.5px solid color-mix(in srgb, var(--chip-color, var(--accent)) 45%, transparent);
  background: color-mix(in srgb, var(--chip-color, var(--accent)) 10%, var(--card));
  color: var(--text);
  font: inherit; font-size: 0.794rem; font-weight: 500;
  cursor: pointer;
}
.cat-chip.active {
  /* Text nach Helligkeit der Chipfarbe: helle Farben (Gelb, Orange …) tragen dunkle Schrift */
  color: #fff;
  color: oklch(from var(--chip-color, var(--accent-fill)) clamp(0, (0.58 - l) * 1000, 1) 0 0);
  border-color: transparent;
  background: linear-gradient(180deg, color-mix(in srgb, var(--chip-color, var(--accent-fill)) 80%, white), var(--chip-color, var(--accent-fill))); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 4px 12px color-mix(in srgb, var(--chip-color, var(--accent)) 35%, transparent);
}

.form-actions { display: flex; gap: 10px; margin-top: 4px; }
.form-actions .primary { flex: 1; }

.btn {
  font: inherit; font-size: 0.912rem; font-weight: 600;
  padding: 13px 18px;
  border-radius: 13px;
  border: none;
  cursor: pointer;
}
.btn.primary { background: var(--accent-fill); color: var(--on-accent); }
.btn.secondary { background: var(--card); color: var(--accent-text); }
.btn.danger { color: var(--red); background: color-mix(in srgb, var(--red) 16%, var(--glass-control)); border: 1px solid color-mix(in srgb, var(--red) 28%, transparent); box-shadow: var(--glass-edge); }
.btn.full { width: 100%; }
.btn.tiny { padding: 8px 12px; font-size: 0.794rem; border-radius: 10px; }
.btn.ghost { background: transparent; color: var(--text2); }
.btn:active { opacity: 0.75; }
/* Druck-Feedback: sofort drücken, weich loslassen (160 ms ease-out), dezent (0,97) — Ziffernfeld, Chips, ⓘ, Karten,
   Monatspfeile, Balken, Gruppenköpfe, Toast-Knopf, Stepper. Hintergrund- und Deckkraftwechsel der Einzelregeln bleiben. */
.numpad button, .sort-chip, .cat-chip, .chip-select, .toast-action, .auto-summary, .inbox-more-toggle, .nav-btn, .bar-group, .mc-row, .kind-head, .card-button, .info-btn {
  transition: transform var(--dur-press) var(--ease-out), background var(--dur-fast) ease, opacity var(--dur-fast) ease; }
.numpad button:active, .sort-chip:active, .cat-chip:active, .chip-select:active, .toast-action:active, .auto-summary:active, .inbox-more-toggle:active, .nav-btn:active, .bar-group:active, .mc-row:active, .kind-head:active, .card-button:active {
  transform: scale(0.97); transition-duration: 0s; }
.info-btn:active { transform: scale(0.95); transition-duration: 0s; }

.glass-slider-row { display: flex; align-items: center; gap: 10px; font-size: 0.735rem; color: var(--text2); margin-bottom: 4px; }
.glass-slider-row input[type="range"] { flex: 1; accent-color: var(--accent); }

.abo-list { display: flex; flex-direction: column; gap: 12px; }
.abo-item { display: flex; align-items: center; gap: 10px; }
.abo-icon { font-size: var(--foundation-size-title2); width: 34px; text-align: center; flex-shrink: 0; }
.abo-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.abo-name { font-weight: 600; }
.abo-sub { font-size: 0.735rem; color: var(--text2); }
.abo-actions { display: flex; gap: 6px; flex-shrink: 0; }

.photo-field { display: flex; flex-direction: column; gap: 8px; }
.tx-item.static { cursor: default; }
.photo-field-label { font-size: 0.794rem; font-weight: 500; color: var(--text2); }
/* Platz für die überstehende Entfernen-Marke */
.photo-grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 8px 0 0; }
.photo-thumb { position: relative; width: 64px; height: 64px; border-radius: 10px; }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 10px; }
.photo-remove {
  position: absolute; top: -8px; right: -8px; width: 22px; height: 22px;
  border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.55); color: #fff;
  font-size: 0.588rem; line-height: 22px; padding: 0; cursor: pointer;
}
.photo-actions { display: flex; gap: 10px; }
.photo-actions .btn { flex: 1; }
.photo-full { width: 100%; border-radius: 12px; display: block; }

.savings-rate-value { font-size: 1.765rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.emergency-fund { margin-top: 14px; }
.emergency-fund-row { display: flex; justify-content: space-between; gap: 10px; font-size: var(--foundation-size-footnote); color: var(--text2); margin-bottom: 6px; white-space: nowrap; }

.goal-card { margin-bottom: 12px; }
.goal-actions { display: flex; gap: 8px; margin-top: 10px; }
.goal-actions .btn { flex: 1; }

/* Was wäre wenn … (Auswertung → Planen): klebender Ergebnisblock, Sparrate-Stepper, Abo-Schalter */
/* im Sheet sind Karten sonst durchscheinend: der klebende Block muss deckend sein, sonst schimmert die Liste durch */

/* Rechenweg „So kommt die Zahl zustande“ (ⓘ auf Start) */
.info-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -13px -10px; vertical-align: middle; flex: none;
  border: none; background: none; color: var(--text2); cursor: pointer; }
.info-btn:active { opacity: 0.6; }
.info-row { display: flex; align-items: center; gap: 4px; }
.info-row > :first-child { min-width: 0; }
.ex-total { font-size: 1.765rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ex-meta { margin-top: 4px; }
.ex-row { min-height: 52px; }
.ex-row.static { cursor: default; }
.ex-row.dim .tx-title, .ex-row.dim .tx-amount { color: var(--text2); }
.ex-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 14px; font-weight: 700; border-top: 1px solid var(--border); }
.ex-sum span:last-child { font-variant-numeric: tabular-nums; }
.ex-group { margin: 14px 4px 6px; }
.ex-warn { color: var(--red-text); }
@media (prefers-reduced-motion: reduce) { .info-btn { transition: none; transition-duration: 0.12s; transition-timing-function: ease-out; } }

.hint { font-size: 0.735rem; color: var(--text2); line-height: 1.45; }
.hint.center { text-align: center; margin-top: 8px; }
.preview { font-size: var(--foundation-size-footnote); color: var(--text2); background: var(--card); border-radius: 12px; padding: 12px; line-height: 1.5; }
.preview-rows { max-height: 260px; overflow-y: auto; margin-top: 8px; display: flex; flex-direction: column; gap: 1px; }
.preview-row {
  display: grid; grid-template-columns: 52px 1fr auto auto; align-items: center; gap: 8px;
  padding: 6px 0; border-top: 1px solid var(--border); font-size: var(--foundation-size-caption);
}
.preview-row:first-child { border-top: none; }
.preview-date { color: var(--text2); }
.preview-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-cat { color: var(--text2); white-space: nowrap; }
.preview-amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.preview-amount.income { color: var(--green-text); }
.preview-amount.expense { color: var(--red-text); }

/* ---------- Tab-Bar ---------- */

/* ---------- Monospace, Schrittlisten ---------- */

.mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--foundation-size-footnote);
  word-break: break-all;
}
.steps { margin: 4px 0 0 18px; display: flex; flex-direction: column; gap: 9px; font-size: 0.794rem; line-height: 1.5; }
.steps li { padding-left: 2px; }
.steps .mono { color: var(--accent-text); }

.tab-bar {
  position: fixed;
  left: 50%;
  bottom: max(12px, calc(env(safe-area-inset-bottom) - 8px));
  transform: translateX(-50%);
  z-index: 20;
  display: inline-flex;
  gap: 2px;
  padding: 7px;
  border-radius: 999px;
  /* Glas (Stufe „Voll“): Blur mit Sättigung, Tönung mindestens 40 %, dunkle Außenkante, helle Spekularkante. Unter dem
     Dock löst ein Scroll-Edge-Verlauf (body::after) den Inhalt in die Hintergrundfarbe auf — so scheint nie lesbarer Text
     durch (früher Befund bei 3 % Durchlässigkeit). „Sparsam“, „Aus“, mehr Kontrast: deckend (Tokens). */
  background: var(--lg-sheen), var(--lg-fill-dock);
  border: var(--lg-frame);
  isolation: isolate;
  backdrop-filter: var(--lg-bf-dock);
  -webkit-backdrop-filter: var(--lg-bf-dock);
  box-shadow: var(--lg-edge), var(--lg-rim), var(--lg-shadow-s);
  max-width: calc(100vw - 24px);
}

.tab-bar button {
  position: relative; z-index: 1; /* über der Linse; Zähler rechts oben am Symbol */
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  /* Fünf gleich breite Felder über die ganze Leiste */
  min-width: 44px; flex: 1 1 0;
  border: none; background: none;
  color: var(--lg-label);
  font: inherit; font-size: 0.618rem; font-weight: 600; letter-spacing: 0.01em;
  padding: 7px 2px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.25s;
  -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
}
.tab-bar button.active { color: var(--lg-accent-text); }
.tab-icon { display: grid; place-items: center; height: 26px; font-size: 1.235rem; line-height: 1; }
/* Beschriftung der Tab-Leiste wächst wie bei iOS nicht mit der Textgröße mit (sonst schnitte die feste Höhe sie ab
   oder die Leiste würde zu breit); die Höhe folgt der Schrift, nichts wird abgeschnitten. Kein Zustand ändert
   Höhe oder Abstand — deshalb keine Transition. */
.tab-label {
  max-height: 1.5em; max-width: 100%; opacity: 1;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: min(0.62rem, 10.5px); /* fünf Tabs: wie iOS höchstens ≈ 10 pt, wächst nicht mit */
}

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 96px);
  transform: translate(-50%, 16px) scale(0.96);
  z-index: 60;
  background: var(--text);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: var(--bg);
  padding: 11px 18px;
  border-radius: 22px;
  font-size: 0.824rem;
  font-weight: 500;
  width: max-content; /* sonst bricht längerer Text schon bei halber Breite um (left: 50 %) */
  max-width: 86vw;
  opacity: 0;
  pointer-events: none;
  /* Bewegung als Feder (glass.js toastMotion, setzt opacity/transform je Bild); ohne JS-Bewegung (Bewegung reduzieren) blendet .show über. */
}

@media (min-width: 900px) {
  .view { --view-max: 760px; }
}

/* ========== Mac-Modus: Maus oder Trackpad (Runde 13 · W1) ==========
   Gilt für @media (hover: hover) and (pointer: fine) — Mac/PC; iPhone und iPad (Finger) bleiben unverändert. Grundschrift
   20 px statt -apple-system-body (Safari am Mac: 13 px, Chromium kennt es nicht: 16 px); der Regler in Personalisieren
   setzt --mac-size je Gerät (theme.js). --ui = Grundschrift / 17 (iPhone-Standard): Abstände, Radien, Symbol- und
   Zeilengrößen der wichtigsten Bausteine wachsen wie die Schrift — die Seite wirkt wie die iPhone-Fassung, nur größer.
   Kein zoom (Gesten, Diagramme und spring.js messen mit getBoundingClientRect/clientX). Die Regeln stehen vor den
   späteren Abschnitten der Datei und tragen deshalb :root vor dem Selektor (eine Klasse mehr), sonst gälte die Grundregel.
   Ab 1000 px Fensterbreite (Seitenleiste ≈ 290 px + Inhaltsspalte breiter als ein großes iPhone bei 20 px): Seitenleiste
   statt Dock (dieselben Knöpfe), Werkzeugleiste über dem Inhalt, Start zweispaltig, Konten und Auswertung im Raster.
   Schmalere Fenster behalten den Aufbau mit Dock, nur mit der großen Schrift. */

/* Nur am Mac: „Neue Buchung“ in der Seitenleiste; Hüllen für Spalten (Start, Jahresdiagramme) sonst ohne eigenes Layout */
.tab-bar .side-new { display: none; }
.ov-col, .chart-pair { display: contents; }
.ov-col > *, .chart-pair > * { flex-shrink: 0; }

@media (hover: hover) and (pointer: fine) {
  :root { --mac-size: 20; --ui: calc(var(--mac-size) / 17); font-size: calc(var(--mac-size) * 1px); }

  /* Gerüst: Kopfzeile, Inhalt, Dock (schmales Fenster), Hinweis */
  :root .app-header { height: calc(env(safe-area-inset-top) + 50px * var(--ui)); padding: env(safe-area-inset-top) calc(12px * var(--ui)) 0; gap: calc(4px * var(--ui)); }
  :root .app-header::after { height: calc(14px * var(--ui)); }
  :root .nav-title { font-size: calc((min(1.06rem, calc(16px * var(--ui))) + 2px) * 1.2); }
  :root .header-actions { gap: calc(6px * var(--ui)); }
  :root .header-actions.hdr-capsule { gap: 0; }
  :root .hdr-btn { width: calc(44px * var(--ui)); height: calc(44px * var(--ui)); }
  :root .sync-dot { top: calc(-6px * var(--ui)); right: calc(-6px * var(--ui)); width: calc(24px * var(--ui)); height: calc(24px * var(--ui)); }
  :root .hdr-capsule .sync-dot { top: calc(-2px * var(--ui)); right: calc(-4px * var(--ui)); }
  :root .sync-dot::after { width: calc(11px * var(--ui)); height: calc(11px * var(--ui)); }
  :root .view {
    --view-max: calc(760px * var(--ui)); gap: calc(14px * var(--ui));
    padding: calc(env(safe-area-inset-top) + 52px * var(--ui)) max(calc(16px * var(--ui)), calc((100% - var(--view-max)) / 2)) calc(env(safe-area-inset-bottom) + 120px * var(--ui));
  }
  :root .dock { left: calc(16px * var(--ui)); right: calc(16px * var(--ui)); bottom: max(calc(12px * var(--ui)), calc(env(safe-area-inset-bottom) - 8px)); max-width: calc(560px * var(--ui)); }
  :root .tab-bar { gap: calc(2px * var(--ui)); padding: calc(7px * var(--ui)); }
  :root .tab-bar button { gap: calc(2px * var(--ui)); padding: calc(7px * var(--ui)) calc(2px * var(--ui)); min-width: calc(44px * var(--ui)); }
  :root .tab-icon { height: calc(26px * var(--ui)); }
  :root .tab-label { font-size: min(0.62rem, calc(10.5px * var(--ui))); }
  :root .tab-bar .badge { min-width: calc(18px * var(--ui)); height: calc(18px * var(--ui)); padding: 0 calc(5px * var(--ui)); border-radius: calc(9px * var(--ui));
    line-height: calc(18px * var(--ui)); top: calc(1px * var(--ui)); left: calc(50% + 4px * var(--ui)); }
  :root body::after { height: calc(80px * var(--ui)); }
  :root .toast { bottom: calc(96px * var(--ui)); padding: calc(11px * var(--ui)) calc(18px * var(--ui)); border-radius: calc(22px * var(--ui)); }
  :root .toast.has-action { gap: calc(14px * var(--ui)); }
  /* Symbole: Größe aus dem width-Attribut (icons.js), mitgewachsen; eigene Größen späterer Regeln bleiben vorrangig */
  :where(:root) .icon[width="12"] { width: calc(12px * var(--ui)); height: calc(12px * var(--ui)); }
  :where(:root) .icon[width="14"] { width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); }
  :where(:root) .icon[width="16"] { width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); }
  :where(:root) .icon[width="18"] { width: calc(18px * var(--ui)); height: calc(18px * var(--ui)); }
  :where(:root) .icon[width="19"] { width: calc(19px * var(--ui)); height: calc(19px * var(--ui)); }
  :where(:root) .icon[width="20"] { width: calc(20px * var(--ui)); height: calc(20px * var(--ui)); }
  :where(:root) .icon[width="22"] { width: calc(22px * var(--ui)); height: calc(22px * var(--ui)); }
  :where(:root) .icon[width="24"] { width: calc(24px * var(--ui)); height: calc(24px * var(--ui)); }
  :where(:root) .icon[width="30"] { width: calc(30px * var(--ui)); height: calc(30px * var(--ui)); }

  /* Karten und Abschnitte */
  :root .card { border-radius: calc(22px * var(--ui)); padding: calc(16px * var(--ui)); }
  :root .card.list { padding: calc(4px * var(--ui)) 0; }
  :root .card h3 { margin-bottom: calc(12px * var(--ui)); }
  :root .card-head h3 { margin: 0; }
  :root .section-title { margin: calc(6px * var(--ui)) calc(4px * var(--ui)) calc(8px * var(--ui)); }
  :root .card-head { gap: calc(8px * var(--ui)); margin-bottom: calc(8px * var(--ui)); }
  :root .card.list .card-head { padding: calc(12px * var(--ui)) calc(14px * var(--ui)) calc(4px * var(--ui)); margin: 0; }
  :root .card-foot { padding: calc(12px * var(--ui)) calc(14px * var(--ui)); }
  :root .stack, :root .accounts-view { gap: calc(14px * var(--ui)); }
  :root .hero-fresh { margin-left: calc(8px * var(--ui)); }
  :root .hero-value { margin: calc(2px * var(--ui)) 0 calc(10px * var(--ui)); }
  :root .acc-hero .hero-value { margin-bottom: calc(12px * var(--ui)); }
  :root .hero-month { gap: calc(8px * var(--ui)) calc(18px * var(--ui)); }
  :root .hero-spend { margin: calc(-4px * var(--ui)) 0 calc(8px * var(--ui)); }
  :root .card-head-actions { gap: calc(12px * var(--ui)); }
  :root .mf-card .card-head { margin-bottom: calc(10px * var(--ui)); }
  :root .clarify-card { padding-top: calc(4px * var(--ui)); padding-bottom: calc(4px * var(--ui)); }
  :root .inbox > .section-title { margin-top: calc(6px * var(--ui)); }
  :root .sheet-body .hint + .section-title, :root .sheet-body .card + .section-title { margin-top: calc(16px * var(--ui)); }
  :root .hint.center { margin-top: calc(8px * var(--ui)); }
  :root .hint-count { min-width: calc(20px * var(--ui)); height: calc(20px * var(--ui)); padding: 0 calc(6px * var(--ui)); margin-left: calc(4px * var(--ui)); border-radius: calc(10px * var(--ui)); }
  :root .empty-state { padding: calc(26px * var(--ui)) calc(16px * var(--ui)); }
  :root .kv { padding: calc(6px * var(--ui)) 0; }
  :root .stat-row { grid-template-columns: repeat(auto-fit, minmax(calc(118px * var(--ui)), 1fr)); gap: calc(12px * var(--ui)) calc(10px * var(--ui)); }
  :root .wealth-deltas { gap: calc(8px * var(--ui)); margin-top: calc(8px * var(--ui)); }
  :root .wealth-delta { padding: calc(8px * var(--ui)) calc(10px * var(--ui)); border-radius: calc(12px * var(--ui)); }
  :root .wealth-bar { height: calc(12px * var(--ui)); border-radius: calc(6px * var(--ui)); margin: calc(4px * var(--ui)) calc(16px * var(--ui)) calc(10px * var(--ui)); }

  /* Listenzeilen, Kontozeilen mit Symbol */
  :root .tx-item, :root .budget-item { gap: calc(12px * var(--ui)); padding: calc(11px * var(--ui)) calc(14px * var(--ui)); }
  :root .tx-icon { width: calc(38px * var(--ui)); height: calc(38px * var(--ui)); border-radius: calc(12px * var(--ui)); }
  :root .tx-unsorted { padding: 0 calc(7px * var(--ui)); border-radius: calc(8px * var(--ui)); }
  :root .tx-date { margin: calc(10px * var(--ui)) calc(4px * var(--ui)) calc(6px * var(--ui)); }
  :root .tx-day { gap: calc(10px * var(--ui)); padding: calc(9px * var(--ui)) calc(14px * var(--ui)) calc(3px * var(--ui)); }
  :root .tmh-io { gap: 0 calc(6px * var(--ui)); }
  :root .tx-select { gap: calc(8px * var(--ui)); padding: 0 0 calc(6px * var(--ui)); }
  :root:root[data-density="compact"] .tx-card .tx-item { padding: calc(8px * var(--ui)) calc(14px * var(--ui)); gap: calc(10px * var(--ui)); }
  :root:root[data-density="compact"] .tx-card .tx-icon { width: calc(32px * var(--ui)); height: calc(32px * var(--ui)); border-radius: calc(10px * var(--ui)); }
  :root:root[data-density="comfortable"] .tx-card .tx-item { padding: calc(12px * var(--ui)) calc(14px * var(--ui)); }
  :root .tx-months { gap: calc(6px * var(--ui)); }
  :root .tx-month-head { margin: calc(10px * var(--ui)) calc(-4px * var(--ui)) calc(6px * var(--ui)); padding: calc(8px * var(--ui)) calc(12px * var(--ui));
    border-radius: calc(14px * var(--ui)); column-gap: calc(10px * var(--ui)); }
  :root .tx-filters { gap: calc(10px * var(--ui)); }
  :root .chip-row, :root .cat-grid { gap: calc(8px * var(--ui)); }
  :root .settings-row { gap: calc(12px * var(--ui)); }
  :root .settings-icon { width: calc(30px * var(--ui)); height: calc(30px * var(--ui)); border-radius: calc(8px * var(--ui)); }
  :root .pref-row { gap: calc(12px * var(--ui)); padding: calc(11px * var(--ui)) calc(14px * var(--ui)); }
  :root .pref-row select { padding: calc(6px * var(--ui)) calc(10px * var(--ui)); border-radius: calc(10px * var(--ui)); }
  :root .kind-head { gap: calc(10px * var(--ui)); padding: calc(10px * var(--ui)) calc(14px * var(--ui)); }
  :root .kind-dot, :root .legend-dot { width: calc(10px * var(--ui)); height: calc(10px * var(--ui)); }
  :root .acc-group-head { gap: calc(10px * var(--ui)); padding: calc(12px * var(--ui)) calc(14px * var(--ui)) calc(6px * var(--ui)); }
  :root .acc-group-head .kind-name { margin: 0; }
  :root .acc-item .acc-main { min-height: calc(60px * var(--ui)); }
  :root .acc-main { row-gap: calc(4px * var(--ui)); }
  :root .acc-diff { gap: calc(10px * var(--ui)); margin: 0 calc(14px * var(--ui)) calc(12px * var(--ui)); border-radius: calc(14px * var(--ui));
    padding: calc(8px * var(--ui)) calc(8px * var(--ui)) calc(8px * var(--ui)) calc(12px * var(--ui)); }
  :root .acc-empty { padding: calc(26px * var(--ui)) calc(20px * var(--ui)); }
  :root .acc-empty-icon { width: calc(56px * var(--ui)); height: calc(56px * var(--ui)); }
  :root .inbox-hint { gap: calc(10px * var(--ui)); min-height: calc(48px * var(--ui)); }
  :root .mc-row { gap: calc(4px * var(--ui)) calc(10px * var(--ui)); padding: calc(6px * var(--ui)) 0; min-height: calc(44px * var(--ui)); }
  :root .mc-bar { height: calc(6px * var(--ui)); border-radius: calc(3px * var(--ui)); }
  :root .wealth-row { gap: calc(10px * var(--ui)); min-height: calc(48px * var(--ui)); }
  :root .today-up { gap: calc(10px * var(--ui)); padding-top: calc(7px * var(--ui)); padding-bottom: calc(7px * var(--ui)); }
  :root .today-date { width: calc(58px * var(--ui)); }
  :root .today-more { padding: calc(8px * var(--ui)) calc(14px * var(--ui)) calc(4px * var(--ui)); }
  :root .today-foot { gap: calc(10px * var(--ui)); padding: calc(10px * var(--ui)) calc(14px * var(--ui)) calc(4px * var(--ui)); }
  :root .hint-item { grid-template-columns: calc(34px * var(--ui)) minmax(0, 1fr); gap: calc(10px * var(--ui)); padding: calc(12px * var(--ui)) 0; }
  :root .hint-actions { gap: calc(8px * var(--ui)); margin-top: calc(8px * var(--ui)); }
  :root .sort-row { gap: calc(10px * var(--ui)); }
  :root .sort-chip { min-height: calc(44px * var(--ui)); padding: calc(6px * var(--ui)) calc(10px * var(--ui)); border-radius: calc(14px * var(--ui)); }
  :root .thin-head { gap: calc(4px * var(--ui)); padding: calc(12px * var(--ui)) calc(14px * var(--ui)); }
  :root .inbox-more-toggle { gap: calc(8px * var(--ui)); min-height: calc(44px * var(--ui)); margin-top: calc(6px * var(--ui)); padding: calc(10px * var(--ui)) calc(4px * var(--ui)); }
  :root .auto-summary { margin-top: calc(6px * var(--ui)); padding: calc(10px * var(--ui)) calc(4px * var(--ui)); }

  /* Knöpfe, Felder, Segmente, Schalter */
  :root .btn { padding: calc(13px * var(--ui)) calc(18px * var(--ui)); border-radius: calc(13px * var(--ui)); min-height: calc(44px * var(--ui)); gap: calc(8px * var(--ui)); }
  :root .btn.tiny { padding: calc(8px * var(--ui)) calc(12px * var(--ui)); border-radius: calc(10px * var(--ui)); min-width: calc(44px * var(--ui)); min-height: calc(44px * var(--ui)); }
  :root .btn.secondary { border-radius: calc(14px * var(--ui)); }
  :root .form-actions { gap: calc(10px * var(--ui)); margin-top: calc(4px * var(--ui)); }
  :root .link-btn { gap: calc(4px * var(--ui)); min-height: calc(44px * var(--ui)); min-width: calc(44px * var(--ui)); }
  :root .nav-btn, :root .icon-btn, :root .glass-round { width: calc(44px * var(--ui)); height: calc(44px * var(--ui)); }
  :root .nav-btn { border-radius: calc(14px * var(--ui)); }
  :root .icon-btn { border-radius: calc(10px * var(--ui)); }
  :root .info-btn { width: calc(44px * var(--ui)); height: calc(44px * var(--ui)); margin: calc(-13px * var(--ui)) calc(-10px * var(--ui)); }
  :root .month-nav { gap: calc(8px * var(--ui)); }
  :root .search { padding: calc(10px * var(--ui)) calc(14px * var(--ui)); border-radius: calc(14px * var(--ui)); min-height: calc(44px * var(--ui)); }
  :root .form { gap: calc(14px * var(--ui)); }
  :root .form label { gap: calc(6px * var(--ui)); }
  :root .form label.check { gap: calc(10px * var(--ui)); min-height: calc(44px * var(--ui)); padding: calc(4px * var(--ui)) 0; }
  :root .form input, :root .form select, :root .form textarea { padding: calc(11px * var(--ui)) calc(12px * var(--ui)); border-radius: calc(12px * var(--ui)); }
  :root .form input:not([type="checkbox"]):not([type="color"]):not([type="range"]), :root .form select, :root .pref-row select { min-height: calc(44px * var(--ui)); }
  :root .input-row { gap: calc(8px * var(--ui)); }
  :root .form label.amount-field, :root .amount-field { gap: calc(8px * var(--ui)); padding: 0 calc(16px * var(--ui)); border-radius: calc(16px * var(--ui)); }
  :root .form .amount-field input, :root .amount-field input { padding: calc(14px * var(--ui)) 0; }
  :root .form input[type="checkbox"], :root .switch-visual { width: calc(51px * var(--ui)); height: calc(31px * var(--ui)); }
  :root .form input[type="checkbox"]::after, :root .switch-visual::after { top: calc(2px * var(--ui)); left: calc(2px * var(--ui)); width: calc(25px * var(--ui)); height: calc(25px * var(--ui)); }
  :root .form input[type="checkbox"]:checked::after, :root .switch-visual.on::after { transform: translateX(calc(20px * var(--ui))); }
  :root .segmented { padding: calc(3px * var(--ui)); border-radius: calc(14px * var(--ui)); }
  :root .segmented button { padding: calc(9px * var(--ui)) calc(3px * var(--ui)); border-radius: calc(11px * var(--ui)); min-height: calc(44px * var(--ui)); }
  :root .segmented::before { top: calc(3px * var(--ui)); bottom: calc(3px * var(--ui)); left: calc(3px * var(--ui)); border-radius: calc(11px * var(--ui));
    width: calc((100% - 6px * var(--ui)) / var(--seg-n, 3)); }
  :root .stats-toolbar { gap: calc(10px * var(--ui)); }
  :root .stats-toolbar .segmented button { padding: calc(9px * var(--ui)) calc(2px * var(--ui)); }
  :root .segmented.stats-segments button { padding: calc(9px * var(--ui)) calc(5px * var(--ui)); min-width: calc(44px * var(--ui)); }
  :root .cat-chip, :root .chip-select { gap: calc(6px * var(--ui)); padding: calc(8px * var(--ui)) calc(12px * var(--ui)); border-radius: calc(20px * var(--ui)); min-height: calc(44px * var(--ui)); }
  :root .glass-slider-row { gap: calc(10px * var(--ui)); }
  :root .card.list .glass-slider-row { padding: calc(10px * var(--ui)) calc(14px * var(--ui)) 0; }
  :root .card.list > .hint { padding: calc(2px * var(--ui)) calc(14px * var(--ui)) calc(12px * var(--ui)); }
  :root input[type="range"], :root summary, :root .toast-action, :root .cal-cell { min-height: calc(44px * var(--ui)); }
  :root .accent-swatches { gap: calc(10px * var(--ui)); padding: calc(12px * var(--ui)) calc(14px * var(--ui)); }
  :root .accent-swatches button, :root .accent-swatches .cat-color { width: calc(44px * var(--ui)); height: calc(44px * var(--ui)); }
  :root .numpad { gap: calc(6px * var(--ui)); }
  :root .numpad button { height: calc(44px * var(--ui)); border-radius: calc(14px * var(--ui)); }
  :root .more-details, :root .trail-details, :root .cat-details { border-radius: calc(18px * var(--ui)); }
  :root .more-details summary, :root .trail-details summary, :root .cat-details summary { padding: calc(14px * var(--ui)) calc(16px * var(--ui)); }
  :root .more-details-body { gap: calc(14px * var(--ui)); padding: 0 calc(12px * var(--ui)) calc(14px * var(--ui)); }
  :root .amount-scan { gap: calc(5px * var(--ui)); padding: calc(7px * var(--ui)) calc(11px * var(--ui)) calc(7px * var(--ui)) calc(9px * var(--ui)); border-radius: calc(12px * var(--ui)); min-height: calc(44px * var(--ui)); }
  :root .date-field, :root .split-field, :root .photo-field, :root .photo-grid { gap: calc(8px * var(--ui)); }
  :root .photo-grid { padding: calc(8px * var(--ui)) calc(8px * var(--ui)) 0 0; }
  :root .photo-actions { gap: calc(10px * var(--ui)); }
  :root .photo-thumb { width: calc(64px * var(--ui)); height: calc(64px * var(--ui)); }
  :root .mac-size-big { font-size: 1.3em; }
  :root .mac-size-row output { flex: none; min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }

  :root .ctx-menu { min-width: calc(220px * var(--ui)); padding: calc(6px * var(--ui)); border-radius: calc(18px * var(--ui)); }
  :root .ctx-menu button { gap: calc(12px * var(--ui)); padding: calc(11px * var(--ui)) calc(12px * var(--ui)); border-radius: calc(12px * var(--ui)); }
  :root .import-kind-btn { gap: calc(8px * var(--ui)); min-height: calc(44px * var(--ui)); }

  /* Diagramme */
  :root .donut-wrap { gap: calc(18px * var(--ui)); }
  :root .donut { width: calc(150px * var(--ui)); }
  :root .donut-legend { min-width: calc(180px * var(--ui)); gap: calc(7px * var(--ui)); } /* Mac/PC: Platz genug, Raster der Analyse unverändert */
  :root .donut-legend li { gap: calc(8px * var(--ui)); }
  :root .ychart-axis, :root .ychart-plot, :root .cd-plot { height: calc(132px * var(--ui)); }
  :root .ychart-axis span { right: calc(6px * var(--ui)); }
  :root .bars { gap: calc(4px * var(--ui)); }
  :root .bar-group { border-radius: calc(8px * var(--ui)); }
  :root .bar { width: min(calc(12px * var(--ui)), 34%); }
  :root .bars-legend { gap: calc(16px * var(--ui)); margin-top: calc(10px * var(--ui)); }
  :root .bars-legend span { gap: calc(5px * var(--ui)); }
  :root .progress { height: calc(7px * var(--ui)); }
  :root .tx-item.static .tx-text .progress { margin-top: calc(6px * var(--ui)); }
  :root .mf-strip { height: calc(10px * var(--ui)); border-radius: calc(5px * var(--ui)); margin-bottom: calc(10px * var(--ui)); }
  /* Geldfluss: Beschriftungen stehen in SVG-Einheiten und wachsen mit der Breite — Breite so begrenzen, dass sie im
     Verhältnis zur Schrift so groß wirken wie am iPhone */
  :root .mf-diagram { padding: calc(12px * var(--ui)) calc(8px * var(--ui)); }
  :root .mf-svg { max-width: calc(420px * var(--ui)); margin-inline: auto; }

  /* Sheets: Inhalt mit der Mac-Schrift skaliert (die Hülle ist bildschirmfüllend, siehe Dateiende) */
  :root .sheet .photo-field, :root .sheet .split-field { padding: calc(12px * var(--ui)); border-radius: calc(18px * var(--ui)); }
  :root .sheet .split-field:not(:has(.split-row)), :root .sheet .more-details .photo-field, :root .sheet .more-details .split-field { padding: 0; }
  :root .lock-card, :root .onboarding-card { max-width: calc(420px * var(--ui)); padding: calc(28px * var(--ui)) calc(22px * var(--ui)); gap: calc(14px * var(--ui)); border-radius: calc(28px * var(--ui)); }

  /* Zeiger: dezente Hover-Zustände (am iPhone gibt es kein Hover) */
  :root button.tx-item:not(:disabled):not(.selected):hover, :root .budget-item:hover, :root .mc-row:hover, :root .kind-head:hover,
  :root .inbox-more-toggle:hover, :root .auto-summary:hover, :root .btn.ghost:not(:disabled):hover, :root .hdr-capsule .hdr-btn:hover {
    background: color-mix(in srgb, var(--text) 6%, transparent); }
  :root .tx-swipe .tx-item:not(.selected):hover { background: color-mix(in srgb, var(--text) 5%, var(--card)); }
  :root .card-button:hover { background-color: color-mix(in srgb, var(--text) 4%, var(--card)); }
  :root .btn.secondary:not(:disabled):hover, :root .nav-btn:hover, :root .chip-select:hover, :root .cat-chip:not(.active):hover {
    background-color: color-mix(in srgb, var(--text) 7%, var(--card)); }
  :root .btn.primary:not(:disabled):hover, :root #fab:hover { filter: brightness(1.07); }
  :root .segmented button:not(.active):hover { color: var(--text); }
}

/* Breites Mac-Fenster: Seitenleiste links (eine Glasfläche wie das Dock: dieselbe .tab-bar mit „Neue Buchung“ und den
   fünf Bereichen), Werkzeugleiste mit Titel und Kapsel über der Inhaltsspalte, Inhalt scrollt allein. */
@media (hover: hover) and (pointer: fine) and (min-width: 1000px) {
  /* Ein fester Inhaltsbereich (88 rem, mittig rechts der Seitenleiste) für alle Bereiche: Titel links und Kapsel rechts an
     seinen Kanten — beim Bereichswechsel springt nichts. Darin steht jeder Inhalt linksbündig an derselben Kante mit eigener
     Breite (wie eine macOS-Quellliste: der Inhalt beginnt unter dem Titel): Start 70 rem (zwei Spalten), Eingang 46 rem,
     Auswertung 70 rem, Buchungen/Konten 88 rem (Liste + Detail, W3) bzw. 46 rem ohne Detail. */
  :root { --side-w: calc(250px * var(--ui)); --bar-h: calc(76px * var(--ui)); --content-max: 88rem; --bar-max: 88rem; }
  :root .inbox { max-width: 46rem; }

  :root .dock { top: 0; bottom: 0; left: 0; right: auto; width: var(--side-w); max-width: none; margin: 0; padding: calc(10px * var(--ui)); }
  :root .dock .tab-bar {
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: calc(2px * var(--ui)); padding: calc(12px * var(--ui)) calc(10px * var(--ui)); border-radius: calc(24px * var(--ui));
    overflow-y: auto; touch-action: auto;
    /* Kein Blur: Unter der Seitenleiste scrollt nichts, die Tönung reicht — und WebKit tut sich mit overflow + backdrop-filter
       + Radius schwer. Das Dock (schmales Fenster, iPhone) bleibt Glas. */
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  :root .tab-bar .lg-lens { display: none; }
  :root .tab-bar button[data-view] {
    flex: none; flex-direction: row; align-items: center; justify-content: flex-start; gap: calc(10px * var(--ui));
    min-height: calc(44px * var(--ui)); padding: calc(8px * var(--ui)) calc(12px * var(--ui)); border-radius: calc(12px * var(--ui));
    font-size: 0.94rem; font-weight: 600; letter-spacing: 0; text-align: left;
  }
  :root .tab-bar .tab-label { flex: 1; min-width: 0; max-height: none; font-size: inherit; text-overflow: ellipsis; }
  :root .tab-bar .tab-icon { flex: none; height: auto; }
  :root .tab-bar button[data-view].active { background: var(--lg-lens-fill); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 0.5px rgba(255, 255, 255, 0.25); }
  :root .tab-bar button[data-view]:not(.active):hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
  :root .tab-bar .badge { position: static; flex: none; margin-left: auto; box-shadow: none; font-size: 0.72rem;
    min-width: calc(22px * var(--ui)); height: calc(22px * var(--ui)); line-height: calc(22px * var(--ui)); border-radius: calc(11px * var(--ui)); }
  :root .tab-bar .side-new {
    display: flex; flex: none; flex-direction: row; align-items: center; justify-content: center; gap: calc(8px * var(--ui));
    min-height: calc(44px * var(--ui)); margin-bottom: calc(14px * var(--ui)); padding: calc(8px * var(--ui)) calc(14px * var(--ui));
    border-radius: 999px; font-size: 0.94rem; font-weight: 600; color: var(--on-accent);
    background: var(--glass-sheen), linear-gradient(180deg, color-mix(in srgb, var(--accent-fill) 78%, white), var(--accent-fill));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 3px 10px color-mix(in srgb, var(--accent) 30%, transparent);
  }
  :root .tab-bar .side-new .icon { stroke-width: 2.3; }
  :root .tab-bar .side-new:hover { filter: brightness(1.07); }
  :root body::after { display: none; } /* kein Dock unten: kein Verlauf über dem Inhalt */

  /* Werkzeugleiste über der Inhaltsspalte: dauerhafter Titel links, Kapsel rechts. */
  :root .app-header {
    left: var(--side-w); height: calc(env(safe-area-inset-top) + var(--bar-h)); grid-template-columns: minmax(0, 1fr) auto;
    padding: env(safe-area-inset-top) max(calc(28px * var(--ui)), calc((100% - var(--side-w) - var(--bar-max)) / 2));
  }
  :root #fab { display: grid; }
  :root .app-header .nav-title, :root .app-header.compact .nav-title {
    visibility: visible; opacity: 1; transform: none; transition: none;
    text-align: left; font-size: calc((1.7rem + 2px) * 1.2); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
  }
  :root .view {
    left: var(--side-w);
    padding: calc(env(safe-area-inset-top) + var(--bar-h) + 6px * var(--ui)) max(calc(28px * var(--ui)), calc((100% - var(--side-w) - var(--content-max)) / 2)) calc(40px * var(--ui));
    /* Monat: feste Plätze, sobald zwei Spalten in den Inhalt passen (Container-Abfrage, rem = Grundschrift) — Kennzahlen | Geldfluss, Donut | Kategorienliste (zwei Zeilen hoch), „Budgets bearbeiten“ | …, … | „Exportieren“: jeder Knopf direkt unter seiner Karte. Die DOM-Reihenfolge (stats.js) bleibt wie am iPhone. */
    container: content / inline-size;
  }
  :root .toast { left: calc(50% + var(--side-w) / 2); bottom: calc(32px * var(--ui)); }

  /* Start: zwei Spalten, sobald zwei je ≥ 21 rem passen (sonst untereinander), zusammen höchstens 70 rem, linksbündig */
  :root body[data-view="overview"] .view { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 35rem)); justify-content: start; align-items: start; align-content: start; }
  :root .ov-col { display: flex; flex-direction: column; gap: calc(14px * var(--ui)); min-width: 0; }

  /* Alle Konten (Sheet): Summe oben, Kontoarten im Raster */
  :root .accounts-view { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); align-items: start; }
  :root .accounts-view > .acc-hero, :root .accounts-view > .acc-empty, :root .accounts-view > [data-role="add-account"] { grid-column: 1 / -1; }
  :root .accounts-view > [data-role="add-account"] { justify-self: start; width: auto; }
  :root .acc-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: calc(16px * var(--ui)); }
  :root .acc-hero > .hero-label, :root .acc-hero > .hero-value { grid-column: 1; }
  :root .acc-hero > .hero-value { margin-bottom: 0; }
  :root .acc-hero > [data-role="balance-check"] { grid-column: 2; grid-row: 1 / span 2; width: auto; }

  /* Auswertung (höchstens 70 rem): Diagrammkarten nebeneinander, wo zwei Spalten ≥ 24 rem passen */
  :root .stats-toolbar { max-width: 32rem; }
  :root .stats-toolbar + .stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); grid-auto-flow: row dense; align-items: start; max-width: 70rem; }
  :root .stats-toolbar + .stack > .month-nav { grid-column: 1 / -1; width: min(100%, 32rem); }
  :root .stats-toolbar + .stack:has(> .chart-pair) > .btn:first-child { grid-column: 1 / -1; } /* Jahresrückblick */
  :root .stats-toolbar + .stack > :is(.section-title, .hint) { grid-column: 1 / -1; } /* Planen: Kopf der Sparziele */
  :root .stats-toolbar + .stack > .hint + .stack { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; }
  :root .stats-toolbar + .stack > .hint + .stack > :not(.goal-card) { grid-column: 1 / -1; justify-self: start; width: auto; }
  :root .chart-pair { display: flex; flex-direction: column; gap: calc(10px * var(--ui)); min-width: 0; }
  :root .stats-toolbar + .stack > .btn:last-child { grid-column: 1 / -1; justify-self: start; width: auto; } /* Jahr: Exportieren unter dem Raster */
  @container content (min-width: 49rem) {
    /* Zeile 4 ist flexibel (1fr): Sie nimmt den Überhang der zwei Zeilen hohen Liste auf, Zeile 3 bleibt so hoch wie der Donut —
       „Budgets bearbeiten“ sitzt direkt darunter (ohne 1fr verteilte das Raster den Überhang auf beide Zeilen). */
    :root .stats-toolbar + .stack:has(> .month-nav) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr auto; grid-auto-flow: row; }
    :root .stats-toolbar + .stack:has(> .month-nav) > .month-nav { grid-row: 1; }
    :root .stats-toolbar + .stack:has(> .month-nav) > .month-nav + .card { grid-column: 1; grid-row: 2; }
    :root .stats-toolbar + .stack:has(> .month-nav) > .mf-card { grid-column: 2; grid-row: 2; }
    :root .stats-toolbar + .stack:has(> .month-nav) > .card:has(.donut-wrap) { grid-column: 1; grid-row: 3; }
    :root .stats-toolbar + .stack:has(> .month-nav) > .card.list { grid-column: 2; grid-row: 3 / span 2; }
    :root .stats-toolbar + .stack:has(> .month-nav) > .btn:not(:last-child) { grid-column: 1; grid-row: 4; }
    :root .stats-toolbar + .stack:has(> .month-nav) > .btn:last-child { grid-column: 2; grid-row: 5; justify-self: stretch; width: 100%; }
  }
}

/* ---------- W3: Liste + Detail (Runde 13) ----------
   Buchungen und Konten wie Mail: links die Liste, rechts die Details — derselbe Editor bzw. dasselbe Konto-Detail wie im
   Sheet (components/detailpane.js, views/transactions.js, views/accountsview.js). Nur, wenn Liste (≥ 28 rem) und Details
   (≥ 34 rem) nebeneinander in den Inhalt passen: Container-Abfrage ab 64 rem Inhaltsbreite (rem = Grundschrift; bei 20 px
   ab etwa 1640 px Fensterbreite — 1440 × 900 bleibt bei Sheets). iPhone und iPad: Sheets wie bisher, der Detailbereich bleibt
   verborgen. Der Detailbereich ist Inhalt (Karten, kein Glas), klebt unter der Werkzeugleiste und scrollt für sich; die Liste
   scrollt mit dem Inhalt. Ein Wechsel der Auswahl blendet nur kurz über (swapIn, --dur-fast), keine Feder. */
.detail-pane { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1000px) {
  /* Ohne Detailbereich bleibt die Buchungsliste in Lesebreite (wie W1), linksbündig wie die anderen Bereiche */
  :root .tx-view { width: 100%; max-width: 46rem; }
  @container content (min-width: 64rem) {
    :root .tx-view {
      max-width: none; display: grid; grid-template-columns: minmax(28rem, 1fr) minmax(34rem, 40rem);
      column-gap: calc(24px * var(--ui)); align-items: start;
      grid-template-rows: auto auto 1fr;
    }
    :root .tx-view > .tx-filters, :root .tx-view > .tx-select, :root .tx-view > .tx-months { grid-column: 1; min-width: 0; }
    :root .detail-pane {
      display: block; grid-column: 2; grid-row: 1 / span 3; min-width: 0; align-self: start;
      position: sticky; top: 0; /* Abstand zählt ab der Innenkante (nach padding-top) des Scrollbereichs — wie .tx-month-head */
      max-height: calc(100dvh - env(safe-area-inset-top) - var(--bar-h) - 46px * var(--ui));
      padding: 0 calc(4px * var(--ui)) calc(12px * var(--ui));
      overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin;
    }
    :root .detail-pane > .detail-empty { padding-top: calc(72px * var(--ui)); }
    :root .detail-title { margin: calc(4px * var(--ui)) calc(4px * var(--ui)) calc(12px * var(--ui)); font-size: 1.2rem; font-weight: 700; }
    :root .acc-detail { display: flex; flex-direction: column; }
    /* Ausgewählte Zeile (aria-current): Akzent-Tönung, auch unter dem Zeiger */
    :root .tx-swipe .tx-item[aria-current="true"], :root .tx-swipe .tx-item[aria-current="true"]:hover,
    :root .acc-main[aria-current="true"], :root .acc-main[aria-current="true"]:hover { background: color-mix(in srgb, var(--accent) 20%, var(--card)); }
    /* Fläche des Editors wie die des Sheets (dort scheint die Seite getönt durch): etwas dunkler als der Hintergrund, sonst wären
       die Glas-Kontrollen (Felder, Ziffernfeld, Aufklappbereiche — im Hell-Modus halb deckend weiß mit weißem Rand) auf einer
       weißen Karte unsichtbar. Deckend, kein Glas. */
    :root .detail-pane > .card { background: color-mix(in srgb, var(--text) 5%, var(--bg)); }
    :root .detail-pane > .detail-hint { margin: 0 calc(4px * var(--ui)) calc(10px * var(--ui)); }
  }
}
@media (prefers-reduced-motion: reduce) { .detail-pane .swap-target { transition: none; } } /* W3: Detailwechsel ohne Überblenden */

/* ========== Kategorielisten (Runde 13 · K) ==========
   Gruppenüberschrift („Ausgaben“, „Einnahmen“, „Beides“, „Vermutung“) im Chip-Raster: eigene Zeile
   im Flex-Umbruch, Optik wie .section-title. */
.cat-grid .cat-group-title {
  flex-basis: 100%;
  margin: 6px 4px 0;
  font-size: var(--foundation-size-footnote);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text2);
}
.cat-grid .cat-group-title:first-child { margin-top: 0; }
/* Dieselbe Kategorie wie in der Zeile „Vermutung“: im Raster nur dezent (kräftigerer Rand), nicht noch einmal gestrichelt. */
.cat-chip.hinted { border-color: color-mix(in srgb, var(--chip-color, var(--accent)) 85%, transparent); }

/* ========== Liquid Glass ==========
   Ebenen: M0 Inhalt (Karten, Listen, Felder) deckend oder nur Füllung, nie backdrop-filter · M1 kleine Fläche (Dock)
   · M2 Kontextmenü · M3 Sheet (eine große Schicht) · M4 Sperre/Einführung. Nie Glas auf Glas; nie opacity, filter
   oder mask auf einem Vorfahren von Glas (Backdrop-Root); Karten bleiben ohne backdrop-filter (Scroll-Leistung).
   Jeder backdrop-filter der App hängt an einem --lg-bf-*-Token: html[data-glass] (theme.js) schaltet sie an
   EINER Stelle auf none — „Sparsam“ (nur Dock deckend), „Aus“, reduzierte Transparenz, mehr Kontrast, Browser
   ohne backdrop-filter. Zahlen sind Entwurfswerte (Chromium gemessen, nicht am iPhone). */
:root {
  /* Reglerstellung Klar … Getönt (theme.js, --glass-opacity 0,45 … 0,93) als 0 … 1 */
  --lg-k: calc((var(--glass-opacity) - 0.45) / 0.48);
  --lg-blur-s: 24px; --lg-blur-m: 28px; --lg-blur-l: 36px; --lg-blur-xl: 40px;
  --lg-bright: 1.04;
  --lg-bf-dock: blur(var(--lg-blur-s)) saturate(1.8) brightness(var(--lg-bright));
  --lg-bf-sheet: blur(var(--lg-blur-l)) saturate(2.1);
  --lg-bf-menu: blur(var(--lg-blur-m)) saturate(2.1);
  --lg-bf-veil: blur(var(--lg-blur-xl)) saturate(1.8);
  /* Sheet, Menü, Karte auf Sperrbildschirm: Tönung 50 … 86 %. Die Untergrenze hält Zweittext auch bei „Klar“ über 4,5:1. */
  --glass-tint-strong: color-mix(in srgb, var(--card) calc((0.5 + var(--lg-k) * 0.36) * 100%), transparent);
  --lg-veil-fill: color-mix(in srgb, var(--bg) 55%, transparent);
  /* Dock (kleine Fläche): Tönung 40 … 70 % — auch bei „Klar“ nie durchsichtiger */
  --lg-fill-dock: color-mix(in srgb, var(--card) calc((0.4 + var(--lg-k) * 0.3) * 100%), transparent);
  /* iOS-27-Merkmale: dunklere Außenkante und hellere Spekularkante (Licht von links oben) */
  --lg-edge: 0 0 0 0.5px rgba(0, 0, 0, 0.1);
  --lg-rim: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 1px 0 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.18);
  --lg-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.12) 30%, rgba(255, 255, 255, 0) 58%);
  --lg-shadow-s: 0 8px 24px rgba(20, 24, 60, 0.14), 0 1px 3px rgba(0, 0, 0, 0.1);
  --lg-frame: 0 solid transparent;
  --lg-lens-fill: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), color-mix(in srgb, var(--accent) 16%, transparent);
  --glass-highlight: rgba(255, 255, 255, 0.5);
  --glass-control: color-mix(in srgb, var(--card) 52%, transparent);
  --glass-border: rgba(255, 255, 255, 0.62);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 0.5px rgba(255, 255, 255, 0.35);
  --glass-shadow: 0 10px 34px rgba(40, 50, 120, 0.13), 0 2px 6px rgba(0, 0, 0, 0.05);
  --glass-sheen: linear-gradient(140deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.08) 32%, rgba(255, 255, 255, 0) 55%);
  /* Beschriftung auf Glas: feste, dunkle Vordergrundfarbe (nie --text2) und Zweittext in Sheets */
  --lg-label: color-mix(in srgb, var(--text) 90%, var(--card));
  --lg-accent-text: color-mix(in srgb, var(--accent) 48%, #000);
  --lg-text2-sheet: color-mix(in srgb, var(--text) 86%, var(--card));
}
@media (prefers-color-scheme: dark) {
  :root {
    /* True Black (UI-Runde): Glaeskanten deutlich - auf echtem Schwarz machen sie
       die Tiefe; Konturen staerker als im bisherigen Grau-Dunkelmodus. */
    --glass-highlight: rgba(255, 255, 255, 0.18);
    --glass-control: color-mix(in srgb, var(--card) 52%, transparent);
    --glass-border: rgba(255, 255, 255, 0.18);
    --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -1px 0 rgba(255, 255, 255, 0.06), inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
    --glass-sheen: linear-gradient(140deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 30%, rgba(255, 255, 255, 0) 55%);
    --lg-bright: 0.7;
    --lg-lens-fill: linear-gradient(rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0.36)), color-mix(in srgb, var(--accent) 10%, transparent);
    --lg-edge: 0 0 0 0.5px rgba(0, 0, 0, 0.6);
    --lg-rim: inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 1px 0 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.06);
    --lg-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 30%, rgba(255, 255, 255, 0) 58%);
    --lg-shadow-s: 0 10px 28px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
    --lg-label: color-mix(in srgb, var(--text) 94%, var(--card));
    --lg-accent-text: color-mix(in srgb, var(--accent) 60%, #fff);
    --lg-text2-sheet: color-mix(in srgb, var(--text) 90%, var(--card));
  }
}

/* Modi (theme.js setzt html[data-glass] = full | lite | solid und html[data-contrast="more"]).
   solid = „Transparenz reduzieren“ (eigener Schalter, Systemeinstellung, mehr Kontrast, kein backdrop-filter):
   kein Filter, Flächen deckend, kein Glanzverlauf; Fenster liegen wie Karten auf dem Hintergrund. */
:root[data-glass="solid"] {
  --lg-bf-dock: none; --lg-bf-sheet: none; --lg-bf-menu: none; --lg-bf-veil: none;
  --lg-fill-dock: var(--card);
  --lg-sheen: none;
  --glass-tint-strong: var(--bg);
  --lg-veil-fill: var(--bg);
  --glass-control: var(--card);
  --glass-sheen: none;
}
/* „Sparsam“: nur das Dock deckend (kleine Fläche über Scrollinhalt), Fenster bleiben Glas */
:root[data-glass="lite"] {
  --lg-bf-dock: none;
  --lg-fill-dock: var(--card);
  --lg-sheen: none;
}
/* Mehr Kontrast: deckend mit klarer Kante, Text ohne Abstufung */
:root[data-contrast="more"] {
  --lg-frame: 1px solid var(--glass-border);
  --lg-edge: none;
  --lg-rim: none;
  --lg-shadow-s: none;
  --glass-border: color-mix(in srgb, var(--text) 55%, transparent);
  --glass-edge: none;
  --glass-shadow: none;
  --text2: color-mix(in srgb, var(--text) 80%, var(--card));
  --lg-text2-sheet: var(--text);
  --lg-label: var(--text);
}

.card.hero {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), var(--card);
}
.tx-item, .budget-item { border-bottom-color: color-mix(in srgb, var(--text) 8%, transparent); }
.tx-item:active, .budget-item:active { background: color-mix(in srgb, var(--text) 7%, transparent); }

/* Aktiver Tab: die Linse (glass.js) liegt hinter den Tabs und wandert als Feder; der Tab selbst trägt nur die Beschriftungsfarbe. */
.tab-bar .lg-lens {
  position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 0; opacity: 0;
  border-radius: 999px; pointer-events: none;
  background: var(--lg-lens-fill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 0.5px rgba(255, 255, 255, 0.4), 0 2px 10px color-mix(in srgb, var(--accent) 22%, transparent);
}

.sheet .card { background: var(--glass-sheen), linear-gradient(var(--glass-control), var(--glass-control)); }

.nav-btn, .search, .segmented, .btn.secondary,
.form input:not([type="checkbox"]):not([type="color"]), .form select, .split-row select, .split-row input {
  background: var(--glass-control);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-edge);
}
.nav-btn, .search, .btn.secondary { border-radius: 14px; }
.segmented { border-radius: 14px; }
.segmented button { border-radius: 11px; transition: background 0.25s, color 0.25s; }
.segmented button.active, .btn.primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-fill) 78%, white), var(--accent-fill));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 6px 18px color-mix(in srgb, var(--accent) 38%, transparent);
}
.cat-chip {
  background: color-mix(in srgb, var(--chip-color, var(--accent)) 12%, var(--glass-control));
  box-shadow: var(--glass-edge);
}

/* ---------- Glas-Schalter statt nativer Checkbox ---------- */
.form input[type="checkbox"], .switch-visual {
  -webkit-appearance: none; appearance: none;
  flex: none;
  width: 51px; height: 31px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 16%, transparent);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
  position: relative;
  cursor: pointer;
  transition: background 0.25s;
}
.form input[type="checkbox"]::after, .switch-visual::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 25px; height: 25px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff, #f1f1f4);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18), inset 0 1px 0 #fff;
  transition: transform var(--dur-ui) var(--ease-spring);
}
.form input[type="checkbox"]:checked, .switch-visual.on { background: linear-gradient(180deg, color-mix(in srgb, var(--green) 80%, white), var(--green)); }
.form input[type="checkbox"]:checked::after, .switch-visual.on::after { transform: translateX(20px); }
.form input[type="checkbox"]:disabled { opacity: 0.4; }

/* ---------- Segment-Umschalter mit gleitender Glas-Linse ---------- */
.segmented { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; isolation: isolate; }
.segmented button, .segmented button.active { background: none !important; box-shadow: none !important; position: relative; z-index: 1; }
.segmented button.active { color: var(--on-accent); }
.segmented::before {
  content: '';
  position: absolute; top: 3px; bottom: 3px; left: 3px;
  width: calc((100% - 6px) / var(--seg-n, 3));
  transform: translateX(calc(100% * var(--seg-i, 0)));
  border-radius: 11px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-fill) 78%, white), var(--accent-fill));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 4px 14px color-mix(in srgb, var(--accent) 38%, transparent);
  transition: transform var(--dur-ui) var(--ease-spring);
  z-index: 0;
}
.segmented:has(> button:nth-child(2):last-child) { --seg-n: 2; }
.segmented:has(> button:nth-child(4):last-child) { --seg-n: 4; }
.segmented:has(> button.active:nth-child(2)) { --seg-i: 1; }
.segmented:has(> button.active:nth-child(3)) { --seg-i: 2; }
.segmented:has(> button.active:nth-child(4)) { --seg-i: 3; }
.segmented:not(:has(> button.active))::before { opacity: 0; }

/* Glas-Felder im Editor */
.amount-field {
  background: var(--glass-sheen), linear-gradient(var(--glass-control), var(--glass-control));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-edge), 0 6px 20px rgba(0, 0, 0, 0.06);
}
.sheet .photo-field, .sheet .split-field {
  padding: 12px;
  border-radius: 18px;
  background: var(--glass-control);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-edge);
}
.sheet .split-field:not(:has(.split-row)) { padding: 0; background: none; border: none; box-shadow: none; }
.sheet .photo-field .btn.secondary { background: color-mix(in srgb, var(--card) 70%, transparent); }

/* ========== Neues App-Gerüst (Kopfzeile, Dock, Einstellungen …) ========== */
.app-header { gap: 4px; transition: box-shadow var(--dur-ui) var(--ease-out); }
.app-header.compact { box-shadow: 0 0.5px 0 var(--glass-border); }
/* Weicher Übergang unter der Leiste, sobald Inhalt darunter scrollt */
.app-header::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px;
  background: linear-gradient(var(--bg), transparent);
  opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.app-header.compact::after { opacity: 1; }
/* Ein dauerhaft sichtbarer Titel; bei großer Schrift bricht die gesamte Leiste um. */
.nav-title {
  flex: 1 0 auto; max-width: 100%; min-width: 0; margin: 0;
  text-align: left; font-size: calc((clamp(1rem, 4.8vw, 1.5rem) + 2px) * 1.2);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.2;
  overflow-wrap: anywhere;
}
.header-actions { display: flex; gap: 6px; flex: none; justify-self: end; }
/* Rechts EINE Glaskapsel (iOS 26/27) für Suchen, Beträge ausblenden und Einstellungen: je Knopf 44 × 44 pt Treffer-
   fläche ohne Zwischenraum, gemeinsame Glasfläche. Die Kante ist eine eigene Umrandung nach innen (outline, keine
   zusätzliche Breite) — getrennt von --glass-edge, das „Mehr Kontrast“ auf none setzt. Kein overflow: der Sync-Punkt
   sitzt außen an der Ecke des Zahnrads und bleibt sichtbar. */
.header-actions.hdr-capsule {
  gap: 0; border-radius: 999px;
  background: var(--glass-sheen), linear-gradient(var(--glass-control), var(--glass-control));
  outline: 1px solid var(--glass-border); outline-offset: -1px;
  box-shadow: var(--glass-edge);
}
:root[data-contrast="more"] .header-actions.hdr-capsule { outline-width: 2px; outline-offset: -2px; }
.hdr-capsule .hdr-btn { background: none; border: none; box-shadow: none; transition: background-color var(--dur-fast) var(--ease-out); }
.hdr-capsule .hdr-btn:active { transform: none; background: color-mix(in srgb, var(--text) 9%, transparent); transition-duration: 0s; }
.hdr-capsule .hdr-btn:focus-visible { outline-offset: -3px; }
.hdr-capsule .sync-dot { top: -2px; right: -4px; } /* Punkt auf dem Kapselrand am Zahnrad, ganz im Bild */
.hdr-btn {
  position: relative;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--text);
  background: var(--glass-control);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-edge);
  cursor: pointer;
}
.hdr-btn:active { transform: scale(0.94); }
/* „+“ (Neue Buchung) zwischen Suche und Auge: runder Glasknopf wie .hdr-btn, aber Akzentfläche mit hellem Symbol; gleiche
   Glas-Tokens (Glanz, Spekularkante), kein backdrop-filter (die Kopfzeile ist deckend). */
#fab {
  justify-self: start;
  color: var(--on-accent);
  background: none; border: none; box-shadow: none;
  transition: transform var(--dur-press) var(--ease-out);
  -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
}
/* Akzentkreis 15 % kleiner, die Trefferfläche bleibt so groß wie die anderen Knöpfe. */
#fab::before {
  content: ''; position: absolute; inset: 7.5%; border-radius: inherit; pointer-events: none;
  background: var(--glass-sheen), linear-gradient(180deg, color-mix(in srgb, var(--accent-fill) 78%, white), var(--accent-fill));
  border: 1px solid color-mix(in srgb, var(--accent-fill) 60%, var(--glass-highlight));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 3px 10px color-mix(in srgb, var(--accent) 30%, transparent);
}
#fab .icon { position: relative; z-index: 1; stroke-width: 2.3; }
#fab:active { transform: scale(0.94); transition-duration: 0s; }
@media (prefers-reduced-motion: reduce) { #fab, #fab:active { transform: none; transition: none; } #fab:active { filter: brightness(0.92); } }
/* Zahnrad mit Sync-Punkt (Farben wie früher der Wolken-Knopf); der Punkt ist ein
   eigener Knopf mit größerer Trefferfläche an der Ecke. */
.settings-btn { position: relative; flex: none; }
#settings-btn { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.sync-dot {
  position: absolute; top: -6px; right: -6px; z-index: 1;
  width: 24px; height: 24px; padding: 0; border: none; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.sync-dot::after {
  content: ''; width: 11px; height: 11px; border-radius: 50%;
  background: var(--text2); box-shadow: 0 0 0 2px var(--bg);
}
.sync-dot[data-state="ok"]::after { background: var(--green); }
.sync-dot[data-state="syncing"]::after { background: var(--accent); }
.sync-dot[data-state="error"]::after, .sync-dot[data-state="offline"]::after { background: var(--orange); }
.tab-bar .badge {
  position: absolute; top: 1px; right: auto; left: calc(50% + 4px); /* Zähler am Eingang: rechts oben am Symbol */
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--red); color: #fff;
  font-size: 0.65rem; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--card);
  /* Zähler tickt bei neuer Zahl (sofort groß, in 160 ms zurück) und schrumpft bei 0 weg (danach hidden, app.js). */
  transition: transform var(--dur-press) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.icon { display: block; flex: none; }
.tab-bar .badge.tick { transform: scale(1.18); transition-duration: 0s; }
.tab-bar .badge.gone { transform: scale(0.9); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .tab-bar .badge { transition: none; } }

/* Dock: Tab-Leiste über die volle Breite (16 pt Rand, höchstens 560 pt, zentriert) */
.dock {
  position: fixed; z-index: 20;
  left: max(16px, env(safe-area-inset-left)); right: max(16px, env(safe-area-inset-right));
  bottom: max(12px, calc(env(safe-area-inset-bottom) - 8px));
  width: auto; max-width: 560px; margin-inline: auto;
  display: flex;
}
.dock .tab-bar { position: relative; transform: none; left: auto; bottom: auto; max-width: none; touch-action: none; display: flex; flex: 1 1 auto; min-width: 0; }
/* Scroll-Edge-Verlauf unter dem Dock (statt harter Kante oder Blur auf Inhalten): der Inhalt löst sich in die
   Hintergrundfarbe auf; er verdunkelt nichts und liegt unter dem Dock (z-index 19 < 20), über dem Inhalt. Setzt einen
   einfarbigen Hintergrund voraus. */
body::after {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0; z-index: 19; pointer-events: none;
  height: calc(env(safe-area-inset-bottom) + 80px);
  background: linear-gradient(to top, color-mix(in srgb, var(--bg) 62%, transparent) 0%, color-mix(in srgb, var(--bg) 40%, transparent) 45%, transparent 100%);
}

/* Einstellungen im iOS-Stil */
.settings-row { gap: 12px; }
.settings-icon {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  display: grid; place-items: center; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.settings-row .form { display: contents; }

/* Karten-Bausteine */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.card.list .card-head { padding: 12px 14px 4px; margin: 0; }
.card-head h3 { margin: 0; }
.link-btn {
  display: inline-flex; align-items: center; gap: 4px;
  border: none; background: none; color: var(--accent-text);
  font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
  min-height: 44px; min-width: 44px; justify-content: center;
}
.card-button { display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.card-foot { display: flex; justify-content: space-between; padding: 12px 14px; font-size: 0.9rem; border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.hero-fixed { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 0.8rem; color: var(--text2); }
.hero-fixed strong { color: var(--text); }
.kind-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 14px; border: none; background: none; color: inherit; font: inherit; cursor: pointer;
  border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  min-height: 44px;
}
.kind-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.kind-name { flex: 1; text-align: left; font-weight: 600; font-size: 0.85rem; color: var(--text2); text-transform: uppercase; letter-spacing: 0.03em; }
.kind-sum { font-weight: 700; font-variant-numeric: tabular-nums; }
.kind-chevron { color: var(--text2); transition: transform var(--dur-ui) var(--ease-in-out); }
.kind-head.collapsed .kind-chevron { transform: rotate(-90deg); }
/* Kontogruppe klappt per grid-template-rows (1fr → 0fr), synchron zum Pfeil; das Kind schneidet ab. */
.kind-rows { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur-ui) var(--ease-out); }
.kind-rows.collapsed { grid-template-rows: 0fr; }
.kind-rows > div { overflow: clip; overflow-clip-margin: 6px; min-height: 0; }
.icon-btn {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center; border: none; background: none; color: var(--text2); cursor: pointer;
}
.icon-btn:disabled { opacity: 0.25; }
.glass-round {
  border-radius: 50%; color: var(--accent-text);
  background: var(--glass-control); border: 1px solid var(--glass-border); box-shadow: var(--glass-edge);
  width: 44px; height: 44px;
}
.layout-row { gap: 4px; }
.layout-row .form { display: contents; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.view > *, .stack > *, .sheet-body > * { flex-shrink: 0; }
.kv { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.9rem; }
.kv span { color: var(--text2); }

/* Statistik */
.stats-toolbar { display: flex; align-items: center; gap: 10px; }
.stats-toolbar .segmented { flex: 1; }
.stats-toolbar .segmented button { font-size: 0.8rem; padding: 9px 2px; }
/* Inhalt gleitet in Wischrichtung ein (components/motion.js enterFrom): Startzustand ohne Transition, die Bewegung
   läuft erst mit .enter-done beim Entfernen des Startzustands; danach werden die Klassen abgeräumt (kein Vorfahren-Transform). */
.enter-right { transform: translateX(10%); opacity: 0; }
.enter-left { transform: translateX(-10%); opacity: 0; }
.enter-done { transition: transform var(--dur-ui) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
/* Kennzahlen-Zeile (Statistik): Spalten nie schmaler als ein Betrag */
.stat-row { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); row-gap: 12px; }
.stat-row > div { display: flex; flex-direction: column; gap: 3px; }
.stat-row small { color: var(--text2); font-size: 0.7rem; }
.tx-item.static .tx-text .progress { margin-top: 6px; }

/* Buchungen: Filter & Monats-Trenner */
.tx-filters { display: flex; flex-direction: column; gap: 10px; }
.chip-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; touch-action: pan-x pan-y; }
.chip-row::-webkit-scrollbar { display: none; }
.chip-row .cat-chip { flex: none; }
.chip-select {
  flex: none; max-width: 48%;
  font: inherit; font-size: 0.8rem; font-weight: 500;
  padding: 8px 12px; border-radius: 20px; color: var(--text);
  background: var(--glass-control); border: 1px solid var(--glass-border); box-shadow: var(--glass-edge);
  -webkit-appearance: none; appearance: none;
}
.chip-select.active { background: var(--accent-fill); color: var(--on-accent); border-color: transparent; }
/* Filter-/Suchwechsel (transactions.js list-swap): die neue Liste blendet ein — nur Deckkraft */
.tx-months { display: flex; flex-direction: column; gap: 6px; transition: opacity var(--dur-fast) var(--ease-out); }
.tx-months.list-swap { opacity: 0; transition: none; }
.tx-month-head {
  /* Sticky-Abstand zählt ab der Innenkante (nach padding-top) des Scrollbereichs:
     -2px = direkt unter der Kopfzeile (safe-area + 50px). */
  position: sticky; top: -2px; z-index: 3;
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin: 10px -4px 6px; padding: 8px 12px; border-radius: 14px;
  font-weight: 700; font-size: var(--foundation-size-body);
  /* nahezu deckend: darunter scrollende Zeilen dürfen nicht durchscheinen */
  background: linear-gradient(color-mix(in srgb, var(--card) 55%, var(--bg)), color-mix(in srgb, var(--card) 55%, var(--bg)));
  border: 1px solid var(--glass-border); box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.35);
}
.tx-month-head > span:first-child { display: flex; flex-direction: column; }
.tx-month-head small { font-size: 0.68rem; font-weight: 500; color: var(--text2); }
.tx-month-sum { display: flex; flex-direction: column; align-items: flex-end; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.tx-month-sum small span { font-weight: 500; }
.tx-sentinel { height: 1px; }

/* Buchungs-Editor */
/* Halbhoch; das Aufziehen läuft als Feder über transform (modal.js expand / glass.js expandBy) — keine Höhen-Transition
   auf dem Glas (Layout je Bild). */
/* Inhalt, der neu erscheint (aufgezogenes Sheet, Typwechsel im Editor): nur Deckkraft überblenden */
.swap-target { transition: opacity var(--dur-fast) var(--ease-out); }
.swap-in { opacity: 0; transition: none; } /* Start ohne Übergang — erst das Entfernen der Klasse blendet ein */
.numpad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.numpad button {
  font: inherit; font-size: 1.2rem; font-weight: 500;
  height: 44px; border-radius: 14px; cursor: pointer; color: var(--text);
  background: var(--glass-control); border: 1px solid var(--glass-border); box-shadow: var(--glass-edge);
}
.numpad button.op { color: var(--accent-text); font-weight: 600; }
.numpad button[data-key="="] { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-fill) 78%, white), var(--accent-fill)); color: var(--on-accent); }
.numpad button:active { background: color-mix(in srgb, var(--text) 10%, var(--glass-control)); }
.date-field { display: flex; flex-direction: column; gap: 8px; }
/* Editor kompakter (Nutzerwunsch 29.10.2026, weniger Scrollen): Beschriftung und Feld in einer Zeile — Konto links
   beschriftet, Datum mit seitlich wischbarer Chip-Reihe; „Anderes …“ öffnet das Datumsfeld in einer eigenen Zeile. */
.form label.inline-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
.form label.inline-row[hidden] { display: none; }
.date-field.inline-date { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; }
.date-field.inline-date > [data-role=date-chips] { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.date-field.inline-date > [data-role=date-chips]::-webkit-scrollbar { display: none; }
.date-field.inline-date > [data-role=date-chips] > .cat-chip { flex: none; }
.date-field.inline-date > input[type=date] { flex-basis: 100%; }
.cat-chip.suggested { outline: 2px dashed color-mix(in srgb, var(--chip-color, var(--accent)) 60%, transparent); outline-offset: 2px; }
.more-details, .trail-details, .cat-details {
  border-radius: 18px; background: var(--glass-control);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-edge);
}
.more-details summary, .trail-details summary, .cat-details summary {
  position: relative;
  list-style: none; cursor: pointer; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 2px; font-weight: 600; color: var(--text);
}
.more-details summary::-webkit-details-marker, .trail-details summary::-webkit-details-marker, .cat-details summary::-webkit-details-marker { display: none; }
/* Kategorie-Aufklappzeile im Editor (components/txeditor.js, 29.10.2026): die gewählte Kategorie als Chip in der Zeile. */
.cat-details > summary { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; padding-right: 48px; }
.cat-details > .cat-grid { padding: 0 12px 12px; }
/* Zeile gleich hoch mit und ohne gewählte Kategorie — sonst rückt die Schnellzeile darunter zwischen zwei Tipps. */
.cat-details > summary { min-height: 52px; }
.cat-summary-chip { pointer-events: none; padding: 3px 10px; min-height: 0; }
/* Schnellzeile unter der Kategorie-Zeile: eine Reihe, seitlich wischbar statt umzubrechen (nimmt nie mehr als eine Zeile). */
.cat-quick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-top: 8px; padding-bottom: 2px; }
.cat-quick::-webkit-scrollbar { display: none; }
.cat-quick > .cat-chip { flex: none; }
.more-details summary::after, .trail-details summary::after, .cat-details summary::after { content: '›'; position: absolute; right: 30px; transform: rotate(90deg); color: var(--text2); }
.more-details[open] summary::after, .trail-details[open] summary::after { transform: rotate(-90deg); }
/* Zahlungsweg im Editor: Inhalt direkt im aufgeklappten Feld, ohne zweite Karte und Überschrift */
.trail-details .trail { margin: 0; padding: 0 12px 14px; background: none; border: none; box-shadow: none; }
.trail-details .trail .card-head h3 { display: none; }
.amount-field.readonly input { color: var(--text2); }
.recent-merchants .cat-chip { max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
.more-details-body { display: flex; flex-direction: column; gap: 14px; padding: 0 12px 14px; }
.sheet .more-details .photo-field, .sheet .more-details .split-field { background: none; border: none; box-shadow: none; padding: 0; }

/* Kontextmenü */
/* Nur abdunkeln (dim to focus): ein Vollbild-Blur wäre die teuerste Schicht der App */
.ctx-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, 0); transition: background 0.2s; }
.ctx-backdrop.open { background: rgba(0, 0, 0, 0.18); }
.ctx-menu {
  position: fixed; z-index: 71; min-width: 220px;
  display: flex; flex-direction: column; padding: 6px;
  border-radius: 18px;
  background: var(--glass-sheen), linear-gradient(var(--glass-tint-strong), var(--glass-tint-strong));
  backdrop-filter: var(--lg-bf-menu); -webkit-backdrop-filter: var(--lg-bf-menu);
  border: 1px solid var(--glass-border); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28), var(--glass-edge);
  opacity: 0; transform-origin: top left; /* Feder aus dem Berührpunkt: glass.js popMenu */
  /* Keine kleinen abgeschnittenen Menüs bei Tastatur oder im Querformat. */
  max-width: calc(var(--screen-width, 100vw) - 24px); max-height: calc(var(--screen-height, 100dvh) - 24px); overflow: auto;
}
.ctx-menu.open { opacity: 1; }
.ctx-menu.closing { pointer-events: none; }
.ctx-menu button {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px;
  border: none; background: none; color: var(--text); font: inherit; font-size: 0.95rem; text-align: left; border-radius: 12px; cursor: pointer;
}
.ctx-menu button:active { background: color-mix(in srgb, var(--text) 8%, transparent); }
.ctx-menu button.danger { color: var(--red); }
.tx-item.lifted { transform: scale(1.02); position: relative; z-index: 72; background: var(--card); border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); }
/* Transition nur beim Anheben/Absenken (.unlifting setzt txlist.js kurz beim Entfernen von .lifted) */
.tx-item.lifted, .tx-item.unlifting { transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-fast) ease; }
.tx-item.unlifting { position: relative; z-index: 72; border-radius: 14px; background: var(--card); }

/* Toast mit Aktion */
.toast.has-action { display: flex; align-items: center; gap: 14px; }
/* Nur sichtbar antippbar — ausgeblendet fing der Hinweis sonst Tipps auf Knöpfe darunter ab. */
.toast.has-action.show { pointer-events: auto; }
.toast-action { flex: none; border: none; background: none; color: var(--accent-on-dark); font: inherit; font-weight: 700; cursor: pointer; padding: 0; min-height: 44px; }
/* Langer Text (modal.js setzt long): Knopf unter dem Text, rechtsbündig, 44 pt hoch */
.toast.has-action.long { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 4px; }
.toast.has-action.long .toast-action { align-self: flex-end; padding: 0 2px; }

@media (prefers-color-scheme: dark) { .toast-action { color: var(--accent-on-light); } } /* im Dunkelmodus ist die Meldung hell */

/* PIN-Eingabe, Sperrbildschirm, Einführung */
.pin-input { letter-spacing: 0.5em; text-align: center; font-size: 1.4rem !important; font-variant-numeric: tabular-nums; }
.lock-screen, .onboarding {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: 24px;
  background: var(--lg-veil-fill);
  backdrop-filter: var(--lg-bf-veil); -webkit-backdrop-filter: var(--lg-bf-veil);
  transition: opacity 0.22s;
}
.lock-screen.closing, .onboarding.closing { opacity: 0; }
.lock-card, .onboarding-card {
  width: 100%; max-width: 420px; padding: 28px 22px;
  display: flex; flex-direction: column; gap: 14px; text-align: center;
  border-radius: 28px;
  background: var(--glass-sheen), linear-gradient(var(--glass-tint-strong), var(--glass-tint-strong));
  border: 1px solid var(--glass-border); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), var(--glass-edge);
  max-height: calc(100dvh - 48px); overflow-y: auto;
}
.onboarding-card { text-align: left; }
.lock-icon { color: var(--accent-text); display: grid; place-items: center; }
.lock-pin { display: flex; flex-direction: column; gap: 10px; }
.lock-pin input { font: inherit; padding: 12px; border-radius: 14px; border: 1px solid var(--glass-border); background: var(--glass-control); color: var(--text); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.shake { animation: shake 0.4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.onboarding-steps { display: flex; gap: 6px; }
.onboarding-steps span { flex: 1; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--text) 15%, transparent); }
.onboarding-steps span.active { background: var(--accent); }
.onboarding-body { display: flex; flex-direction: column; gap: 14px; }
.onboarding-body h2 { font-size: 1.5rem; }
.onboarding-options { display: flex; flex-direction: column; gap: 10px; }
.search-results { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }

/* ---------- Barrierefreiheit ---------- */

/* Transparenz reduzieren, mehr Kontrast: html[data-glass="solid"] und html[data-contrast="more"] (Tokens oben, theme.js
   gibt die Systemschalter weiter — Safari kennt prefers-reduced-transparency nicht). */

@media (prefers-reduced-motion: reduce) {
  .tab-bar, .tab-bar button, .tab-label {
    transition-duration: 0.01ms !important;
  }
  /* Sheets: kein Wegfahren, keine Feder — kurze Überblendung (glass.js setzt dann nur ein Ziehen des Fingers). */
  .sheet-overlay:not(.open) .sheet { transform: none; }
  .sheet { opacity: 0; transition: opacity 0.15s ease-out; }
  .sheet-overlay.open .sheet { opacity: 1; }
  .sheet-overlay.closing .sheet { opacity: 0; }
  .sheet-overlay::before { opacity: 0; transition: opacity 0.15s ease-out; }
  .sheet-overlay.open::before { opacity: 1; }
  .sheet-overlay.closing::before { opacity: 0; }
  /* „Elastische Eigenschaften abschalten“: keine Kurven mit Überschwingen, Ortswechsel als kurze Überblendung */
  .ctx-menu { transform: none; transition: opacity 0.12s ease-out; }
  .toast.show { opacity: 1; }
  .segmented::before { transition: none; }
  /* Druck-Feedback ohne Einsinken: nur Hintergrund und Deckkraft wechseln */
  .numpad button:active, .sort-chip:active, .cat-chip:active, .chip-select:active, .toast-action:active, .auto-summary:active, .inbox-more-toggle:active, .nav-btn:active, .bar-group:active, .mc-row:active, .kind-head:active, .card-button:active, .info-btn:active { transform: none; }
  .form input[type="checkbox"]::after, .switch-visual::after { transition: transform 0.12s ease-out; }
  .toast { transform: translate(-50%, 0); transition: opacity 0.15s ease-out; }
  /* Kleiner Titel: nur Überblenden, keine Bewegung */
  .nav-title { transform: none; transition: opacity var(--dur-fast) ease-out; }
}

/* ---------- PDF-Jahresbericht (Druckdialog) ---------- */
.print-report { display: none; }
@media print {
  html, body { position: static; height: auto; overflow: visible; }
  body > *:not(.print-report) { display: none !important; }
  .print-report {
    /* Feste, helle Palette unabhängig vom Systemthema — Papier/PDF soll immer lesbar sein. */
    --text: #1c1c1e; --text2: #6e6e73; --green: #34c759; --red: #ff3b30;
    display: block !important;
    background: #fff;
    color: var(--text);
    padding: 24px;
  }
  .print-report h1 { font-size: var(--foundation-size-title2); margin: 0 0 4px; }
  .print-report h2 { font-size: var(--foundation-size-subhead); margin: 22px 0 8px; }
  .print-report p { color: var(--text2); line-height: 1.6; }
  .print-report .ychart-plot, .print-report .ychart-axis { height: 160px; }
  .print-report .ychart-tip { display: none; }
  .print-table { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: var(--foundation-size-footnote); }
  .print-table th, .print-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #e5e5ea; }
}
.rule-row { margin-top: 10px; }
.rule-row small { color: var(--text2); font-weight: 400; }
.split-field { display: flex; flex-direction: column; gap: 8px; }
.split-row { display: grid; grid-template-columns: 1fr 96px 28px; gap: 8px; align-items: center; margin-bottom: 8px; }
.split-row select, .split-row input { font: inherit; font-size: var(--foundation-size-callout); padding: 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); color: var(--text); width: 100%; min-width: 0; }
.split-row .split-remove { position: static; width: 28px; height: 28px; line-height: 28px; font-size: var(--foundation-size-caption); }
.onboarding .amount-field input { font-size: 1.3rem; }

/* Bankverbindungen */
.bank-conn { display: flex; flex-direction: column; gap: 12px; }
.bank-conn-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bank-accounts { display: flex; flex-direction: column; gap: 12px; }
.bank-acc { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 0.5px solid var(--glass-border); }
.bank-acc-title { display: flex; flex-direction: column; gap: 2px; }
.bank-acc-map { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.88rem; color: var(--text2); }
.bank-acc-map select { max-width: 60%; }
/* Bank: Abweichung mit Richtung in voller Länge, Knöpfe darunter; Werkzeuge unter „Erweitert“ */
.bank-diff { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bank-conn-actions { display: flex; justify-content: flex-end; gap: 8px; }
.bank-logo { width: 30px; height: 30px; border-radius: 8px; object-fit: contain; background: #fff; display: grid; place-items: center; flex: none; }
/* Sperrbildschirm liegt immer über allem (auch über der Einführung). */
.lock-screen { z-index: 95; }

/* Hinweise: gruppiert, Text über volle Breite, Aktionen darunter */
.hint-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hint-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px;
  border-radius: 10px; background: var(--glass-control); font-size: 0.7rem; vertical-align: middle; }
.hint-list { display: flex; flex-direction: column; gap: 0; padding-top: 4px; padding-bottom: 4px; }
.hint-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 12px 0; align-items: start; }
.hint-item + .hint-item { border-top: 0.5px solid var(--glass-border); }
.hint-icon { font-size: 1.3rem; line-height: 1.4; text-align: center; }
.hint-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hint-name { font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.hint-sub { font-size: 0.8rem; color: var(--text2); overflow-wrap: anywhere; }
.hint-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.hint-list > .btn.full { margin-top: 4px; }

/* Budgetvorschläge */
.budget-sugg-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) 96px; align-items: center; gap: 10px; padding: 10px 0; }
.budget-sugg-row + .budget-sugg-row { border-top: 0.5px solid var(--glass-border); }
.budget-sugg-row input[type=checkbox] { width: 22px; height: 22px; }
.amount-field.budget-sugg-amount { padding: 0 10px; gap: 4px; border-radius: 12px; }
.amount-field.budget-sugg-amount input { font-size: var(--foundation-size-body); font-weight: 700; padding: 9px 0; }
.amount-field.budget-sugg-amount span { font-size: 0.9rem; }
.budget-sugg-list > .btn { margin-top: 10px; }
.bank-acc-tools { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.bank-acc-tools .btn { padding-left: 0; padding-right: 0; }

/* Dubletten */
.dupe-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0; }
.dupe-row + .dupe-row { border-top: 0.5px solid var(--glass-border); }
.dupe-row input[type=checkbox] { width: 22px; height: 22px; margin-top: 2px; }
.dupe-row .tx-sub { line-height: 1.45; }
.dupe-list > .btn { margin-top: 10px; }

.hero-forecast { border: none; background: none; font-family: inherit; font-size: 0.8rem; color: var(--text2); padding: 0; margin-top: 6px; cursor: pointer; text-align: left; flex-wrap: wrap; }

/* ---------- Personalisierung ---------- */
.card-head-actions { display: flex; align-items: center; gap: 12px; }
.arrange-row { gap: 10px; }
.arrange-toggles { display: flex; flex-direction: column; gap: 4px; flex: none; }
.arrange-toggles label { display: flex; align-items: center; gap: 5px; font-size: 0.68rem; color: var(--text2); min-height: 44px; min-width: 44px; }
.arrange-toggles input { width: 16px; height: 16px; accent-color: var(--accent); }
.arrange-arrows { display: flex; flex-direction: column; flex: none; }
.arrange-arrows .icon-btn { padding: 2px 4px; }
.pref-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.pref-row:last-child { border-bottom: none; }
.pref-row > span:first-child { flex: 1; min-width: 0; }
.pref-row > .form { flex: none; display: block; }
.pref-row small { display: block; color: var(--text2); font-size: 0.72rem; margin-top: 2px; }
.pref-row select { font: inherit; font-size: 0.85rem; max-width: 52%; padding: 6px 10px; border-radius: 10px; color: var(--text); background: var(--glass-control, var(--card)); border: 1px solid var(--border); }
.pref-row .switch { flex: none; }
.accent-swatches { display: flex; flex-wrap: wrap; padding: 12px 14px; gap: 10px; }
.accent-swatches button, .accent-swatches .cat-color { width: 34px; height: 34px; border-radius: 50%; border: 3px solid transparent; background: var(--sw); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.accent-swatches button.active, .accent-swatches .cat-color.active { border-color: var(--card); outline: 2px solid var(--sw); }
.color-field { display: block; }
.color-field .color-label { display: block; }
.color-field .color-swatches { padding: 8px 0 2px; }
.cat-color.custom { position: relative; overflow: hidden; }
.cat-color.custom input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* ---------- Buchungen: kompakte Kopfzeile & Liste ---------- */
.tx-chips .chip-select { position: relative; display: inline-flex; align-items: center; max-width: 62%; white-space: nowrap; cursor: pointer; }
.tx-chips .chip-select span { overflow: hidden; text-overflow: ellipsis; }
.tx-chips .chip-select select { position: absolute; inset: 0; width: 100%; opacity: 0; font-size: 16px; cursor: pointer; }
.tx-chips .chip-select:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.tx-chips .cat-chip { white-space: nowrap; }
.tx-month-head[role=button] { cursor: pointer; }
.tx-card { padding: 0; }
.tx-day { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 14px 3px; font-size: 0.72rem; font-weight: 600;
  color: var(--text2); text-transform: none; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.tx-day:not(:first-child) { border-top: 1px solid var(--border); margin-top: 2px; }
.tx-card .tx-swipe:has(+ .tx-day) .tx-item { border-bottom: none; }
.tx-card .tx-item { border-bottom-color: color-mix(in srgb, var(--text) 5%, transparent); }
.tx-list + .tx-list { margin-top: 8px; }
/* Dichte: kompakt (Standard) oder großzügig */
:root[data-density="compact"] .tx-card .tx-item { padding: 8px 14px; gap: 10px; }
:root[data-density="compact"] .tx-card .tx-icon { width: 32px; height: 32px; border-radius: 10px; font-size: 0.95rem; }
:root[data-density="comfortable"] .tx-card .tx-item { padding: 12px 14px; }

/* Abstände in Sheets: Hinweistext direkt vor Feldern/Abschnitten */
.sheet-body .hint + label, .sheet-body .hint + .form, .form .hint + label { margin-top: 10px; }
.sheet-body .hint + .section-title, .sheet-body .card + .section-title { margin-top: 16px; }
.sheet-body > .section-title:first-child { margin-top: 2px; }

/* ---------- Zahlen: nicht umbrechen, nicht überlappen (auch iPhone SE, große Beträge) ---------- */
.pill, .tx-amount, .kind-sum, .budget-nums, .legend-value, .hero-value, .savings-rate-value, .tmh-net, .tmh-io span { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Monatskopf Buchungen: 2 × 2 Raster statt gequetschter Zeile */
.tx-month-head { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; column-gap: 10px; row-gap: 1px; }
.tmh-month { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tmh-net { text-align: right; font-size: 0.95rem; }
.tmh-count { font-size: 0.68rem; font-weight: 500; color: var(--text2); white-space: nowrap; }
.tmh-io { text-align: right; font-size: 0.68rem; font-weight: 500; display: flex; flex-wrap: wrap; gap: 0 6px; justify-content: flex-end; }
.stat-row .pill, .stat-row strong { font-size: clamp(0.78rem, 3.6vw, 0.9rem); }
/* Segment-Umschalter: Breite nach Inhalt, Text nie über den Rand */
.segmented button { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 3px; padding-right: 3px; font-size: clamp(0.68rem, 3.1vw, 0.824rem); letter-spacing: -0.01em; }
.stats-toolbar .segmented button { font-size: clamp(0.64rem, 2.9vw, 0.8rem); padding-left: 2px; padding-right: 2px; }
.budget-row-top > :first-child { min-width: 0; }
.budget-row-top > :last-child { flex: none; margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 360px) {
  .budget-nums { font-size: 0.72rem; }
  .tx-amount { font-size: 0.82rem; }
}
.lbl-short { display: none; }
@media (max-width: 380px) { .lbl-full { display: none; } .lbl-short { display: inline; } }

/* ---------- Tagesbudget ---------- */
.daily-card .card-head { margin-bottom: 4px; }
.daily-card .card-head .tx-sub { display: inline-flex; align-items: center; gap: 2px; }
.daily-left { font-size: clamp(1.5rem, 7vw, 1.8rem); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.daily-card .progress { margin: 10px 0 6px; }
.daily-meta { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.daily-row { padding: 5px 0; font-size: 0.88rem; }
.daily-sep { border-top: 1px solid var(--border); margin: 6px 0; }

/* ---------- Kalender ---------- */
.cal-summary { display: flex; gap: 12px; align-items: baseline; justify-content: center; margin: 10px 0 8px; font-weight: 600; font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-wd { text-align: center; font-size: 0.68rem; color: var(--text2); font-weight: 600; padding-bottom: 2px; }
.cal-cell { position: relative; aspect-ratio: 1 / 1.08; min-width: 0; border-radius: 10px; border: 1px solid transparent; background: var(--card);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 5px 1px 2px; gap: 2px; font: inherit; color: inherit; cursor: pointer; overflow: hidden;
  min-height: 44px;
  }
.cal-cell.empty { background: none; cursor: default; }
.cal-cell.future { background: color-mix(in srgb, var(--card) 60%, transparent); }
.cal-cell.today .cal-day { background: var(--accent-fill); color: var(--on-accent); border-radius: 10px; padding: 0 6px; }
.cal-cell.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.cal-day { font-size: 0.82rem; font-weight: 600; line-height: 1.35; }
.cal-amt { font-size: clamp(0.52rem, 2.3vw, 0.64rem); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: clip; letter-spacing: -0.02em; }
.cal-dot { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); display: inline-block; }
.cal-legend .cal-dot { position: static; margin-right: 4px; vertical-align: middle; }
.cal-dayhead { display: flex; flex-direction: column; gap: 2px; margin: 14px 4px 8px; }
.goal-auto { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.goal-rule-accs { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Rückblick ---------- */
.rv-lead { font-size: var(--foundation-size-body); font-weight: 600; margin: 12px 4px 10px; line-height: 1.35; }
.rv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.rv-grid > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rv-grid small { color: var(--text2); font-size: 0.72rem; }
.rv-grid strong { font-size: clamp(0.95rem, 4.4vw, 1.1rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rv-delta { font-size: 0.7rem; font-weight: 600; color: var(--text2); }
.rv-pct { display: block; font-size: 0.66rem; font-weight: 500; color: var(--text2); text-align: right; }
.rv-facts { display: flex; flex-direction: column; gap: 8px; font-size: 0.86rem; }

/* ---------- Kündigungsassistent ---------- */
.form textarea { font: inherit; font-size: var(--foundation-size-callout); padding: 11px 12px; border-radius: 12px; width: 100%; color: var(--text); resize: vertical;
  background: var(--glass-control, var(--card)); border: 1px solid var(--glass-border, var(--border)); box-shadow: var(--glass-edge, none); }
.month-range { font-size: 0.7rem; font-weight: 500; color: var(--text2); }

.list > .tx-item:last-child { border-bottom: none; }
.own-acc .error-text, [data-role=extern-form] .error-text { color: var(--red); margin: 0; }
.btn .icon { vertical-align: -4px; }
/* Einstellungszeilen: Untertitel (oft mit Beträgen) lieber zweizeilig als abgeschnitten. */
.settings-list .tx-sub { line-height: 1.35; }
.settings-group > .export-reminder { margin: 2px 4px 8px; }

/* ---------- Kassenbon scannen ---------- */
.amount-scan { align-self: center; flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px 7px 9px; border: none; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-text); font: inherit; font-size: 0.8rem; cursor: pointer;
  min-height: 44px;
  }
.amount-scan b { font-weight: 700; }
.amount-scan[hidden] { display: none; }
.amount-scan:disabled { opacity: 0.5; }
.scan-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: -6px; padding: 0 4px; font-size: 0.8rem; color: var(--text2); line-height: 1.4; }
.scan-status[hidden] { display: none; }
.scan-status.ok { color: var(--text); }
.scan-status.warn { color: color-mix(in srgb, var(--orange) 85%, var(--text)); }
.scan-status.busy::before { content: ''; flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); border-top-color: var(--accent); animation: scan-spin 0.8s linear infinite; }
.scan-status button { font: inherit; font-weight: 600; color: var(--accent-text); background: none; border: none; padding: 2px 0; cursor: pointer; }
.scan-text { white-space: pre-wrap; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.78rem; line-height: 1.45; color: var(--text); padding: 4px 2px 20px; overflow-wrap: anywhere; }
@keyframes scan-spin { to { transform: rotate(360deg); } }

/* ---------- Doppelte Einträge ---------- */
.dupe-group { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.dupe-head { display: flex; flex-direction: column; gap: 2px; }
.dupe-txs { border-radius: 14px; overflow: hidden; background: color-mix(in srgb, var(--text) 4%, transparent); }
.dupe-tx { padding: 9px 12px; }
.dupe-role { display: inline-block; align-self: flex-start; margin-top: 3px; font-size: 0.68rem; font-weight: 700; padding: 1px 7px; border-radius: 8px; }
.dupe-role.keep { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.dupe-role.drop { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
.dupe-type { display: flex; flex-direction: column; gap: 6px; }
.dupe-other { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dupe-other[hidden] { display: none; }
.dupe-other .chip-select { max-width: 60%; }
.dupe-role.merge { color: var(--accent-text); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* ---------- Diagnose ---------- */
.diag-chips { margin-bottom: 10px; }
.diag-row { align-items: flex-start; }
.diag-row .tx-title { font-size: 0.86rem; line-height: 1.35; }
.diag-icon { flex: none; width: 24px; text-align: center; font-size: var(--foundation-size-body); line-height: 1.4; }
.diag-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }

/* ---------- Start ---------- */
.hero-spend { font-size: 0.8rem; color: var(--text2); margin: -4px 0 8px; }
.hero-spend strong { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.acc-row .acc-warn { flex: none; font-size: 0.8rem; }
.acc-iban { font-variant-numeric: tabular-nums; }
.inbox-hint { display: flex; align-items: center; gap: 10px; min-height: 48px; font-size: 0.82rem; font-weight: 600; color: var(--accent-text); }
.inbox-hint[hidden] { display: none; }
.inbox-hint > span { flex: 1; min-width: 0; }
.month-card { cursor: pointer; }
.mc-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: baseline; width: 100%; padding: 6px 0; font: inherit; color: inherit; text-align: left;
  background: none; border: none; cursor: pointer;
  min-height: 44px; align-content: center;
  }
.mc-name { min-width: 0; overflow-wrap: anywhere; font-size: 0.88rem; }
.mc-amount { font-size: 0.86rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mc-amount small { color: var(--text2); font-size: 0.74rem; }
.mc-unsorted .mc-name, .mc-unsorted .mc-amount { color: var(--text2); }
.mc-unsorted .mc-amount .icon { display: inline-block; vertical-align: -1px; }
.mc-bar { grid-column: 1 / -1; position: relative; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--text) 8%, transparent); }
.mc-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 3px; transform-origin: left center; transform: scaleX(var(--v, 0)); transition: transform var(--dur-chart) var(--ease-drawer); }
@media (prefers-reduced-motion: reduce) { .mc-bar i { transition: none; } }
.mc-budget { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--text); opacity: 0.55; }

/* ---------- Kategorie-Detail (Sheet) ---------- */
.cd { display: flex; flex-direction: column; gap: 14px; }
.cd-nav .month-label { text-align: center; }
.nav-btn[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.cd-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 12px 10px; }
.cd-tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cd-tile small { color: var(--text2); font-size: 0.7rem; }
.cd-tile strong { font-size: clamp(0.92rem, 4.2vw, 1.06rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cd-tile .tx-sub { font-size: 0.66rem; }
.cd-note { margin-top: 10px; }
.cd-plot { position: relative; height: 132px; margin-top: 10px; }
.cd-bars { position: absolute; inset: 0; display: flex; }
.cd-col { flex: 1; min-width: 0; position: relative; padding: 0; border: none; border-radius: 6px; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cd-col.sel { background: color-mix(in srgb, var(--dot, var(--accent)) 10%, transparent); }
 /* Balken: volle Höhe als Hülle (Druck-Feedback), die Füllung wächst per scaleY — kein Layout je Bild. */
.cd-bar { position: absolute; left: 16%; right: 16%; bottom: 0; height: 100%; background: none; transition: transform var(--dur-press) var(--ease-out); transform-origin: 50% 100%; }
.cd-fill { position: absolute; inset: 0; border-radius: 4px 4px 2px 2px;
  background: color-mix(in srgb, var(--dot, var(--accent)) 45%, transparent);
  transform: scaleY(var(--v, 0)); transform-origin: 50% 100%; transition: transform var(--dur-chart) var(--ease-drawer), background-color 0.2s; }
.cd-col.sel .cd-fill { background: var(--dot, var(--accent)); }
.cd-col.over .cd-fill { background: color-mix(in srgb, var(--red) 50%, transparent); }
.cd-col.over.sel .cd-fill { background: var(--red); }
.cd-col:active .cd-bar { transform: scaleX(1.12) scaleY(1.02); transition-duration: 0s; } /* Druck sofort, Loslassen federt (Plan 006) */
/* Linien fahren per translateY (Pixel aus JS: --px); erster Aufbau (.cd-explain) langsamer aus der Grundlinie */
.cd-limit { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; margin-bottom: -1px; border-radius: 1px; background: var(--text); opacity: 0.6; transform: translateY(calc(-1px * var(--px, 0))); transition: transform var(--dur-chart) var(--ease-drawer); }
.cd-median { position: absolute; left: 0; right: 0; bottom: 0; height: 0; border-top: 1.5px dashed var(--text2); pointer-events: none; transform: translateY(calc(-1px * var(--px, 0))); transition: transform var(--dur-chart) var(--ease-drawer); }
.cd-explain .cd-fill, .cd-explain .cd-limit, .cd-explain .cd-median { transition-duration: var(--dur-explain), 0.2s; }
.cd-median span { position: absolute; right: 0; bottom: 2px; padding: 0 4px; border-radius: 4px; font-size: 0.62rem; color: var(--text2); background: color-mix(in srgb, var(--card) 85%, transparent); font-variant-numeric: tabular-nums; }
.cd-x { display: flex; margin-top: 4px; font-size: 0.62rem; color: var(--text2); }
.cd-x span { flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: visible; }
.cd-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 0.7rem; color: var(--text2); }
.cd-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cd-key { display: inline-block; width: 14px; }
.cd-key-bar { height: 8px; border-radius: 2px; background: var(--dot, var(--accent)); }
.cd-key-median { border-top: 1.5px dashed var(--text2); }
.cd-key-limit { height: 2px; background: var(--text); opacity: 0.6; }
.cd-streak { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.cd-streak strong { display: block; font-size: 0.95rem; }
.cd-streak-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
  color: var(--text2); background: color-mix(in srgb, var(--text) 8%, transparent); }
.cd-streak-icon.ok { color: var(--green-text); background: color-mix(in srgb, var(--green) 18%, transparent); }
.cd-now { margin-bottom: 6px; font-size: 0.82rem; color: var(--text2); }
.cd-rank { font-size: 0.8rem; font-weight: 600; color: var(--text2); }
.budget-line { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); }
.budget-line:last-child { border-bottom: none; }
.budget-line .budget-item { flex: 1; min-width: 0; border-bottom: none; }
.budget-trend { flex: none; width: 48px; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; color: var(--accent); cursor: pointer; }
.budget-trend:active { background: var(--border); }

/* ---------- Geldfluss ---------- */
.mf-card .card-head { margin-bottom: 10px; }
.mf-chev { display: inline-flex; color: var(--accent); }
button.tx-item .tx-amount .icon { display: inline-block; vertical-align: -1px; margin-left: 4px; color: var(--text2); opacity: 0.7; }
.mf-strip { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; margin-bottom: 10px; }
.mf-strip i { display: block; min-width: 3px; }
.mf-sentence { font-size: 0.86rem; line-height: 1.4; color: var(--text); }
.mf-lead { margin: 4px 2px 0; font-size: 0.92rem; font-weight: 500; line-height: 1.4; }
.mf-content { display: block; } /* eigener Kasten: gleitet beim Blättern ein (enterFrom) */
.mf-diagram { padding: 12px 8px; }
.mf-svg { display: block; width: 100%; height: auto; overflow: visible; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.mf-band { opacity: 0.32; transition: opacity 0.18s ease-out; }
.mf-svg.hl .mf-band { opacity: 0.1; }
.mf-svg.hl .mf-band.on { opacity: 0.7; }
.mf-hit { fill: transparent; }
.mf-node.tap { cursor: pointer; }
.mf-node:focus-visible { outline: none; }
.mf-node:focus-visible .mf-bar { stroke: var(--text); stroke-width: 2; }
.mf-node.tap:active .mf-bar { filter: brightness(1.12); }
.mf-name { font-size: 11px; font-weight: 600; fill: var(--text); }
.mf-pct { font-size: 10px; fill: var(--text2); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .cd-fill, .cd-limit, .cd-median, .mf-band, .progress-fill { transition: none; }
  .enter-left, .enter-right { transform: none; }
  .ychart-dot { transition: none; }
  .ychart-line.drawn { transition: none; }
}
.wealth-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; font-weight: 600; }
.wealth-row strong { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.today-abos { width: 100%; border: none; border-top: 0.5px solid color-mix(in srgb, var(--text) 8%, transparent); margin-top: 8px; background: none; font: inherit; font-size: 0.86rem; cursor: pointer; text-align: left; min-height: 44px; }
.today-abos strong { display: inline-flex; align-items: center; gap: 4px; }

/* ---------- Start: Anstehend ---------- */
.today-card .card-head h3 { display: flex; align-items: center; gap: 8px; }
.today-card .card-head .tx-sub { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.today-up { gap: 10px; padding-top: 7px; padding-bottom: 7px; }
.today-date { flex: none; width: 58px; font-size: 0.74rem; color: var(--text2); font-variant-numeric: tabular-nums; }
.today-more { padding: 8px 14px 4px; }
.today-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 14px 4px; font-size: 0.86rem; color: var(--text2); }
.today-foot strong { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Eingang: Zu ordnen, Zu klären, Gut zu wissen, Automatik ---------- */
.inbox > .section-title { margin-top: 6px; }
/* Eingang als eine ruhige Liste (Runde 18): eine Kopfzeile, dezentere Zwischenüberschriften */
.inbox-head { display: flex; align-items: center; gap: 6px; margin: 2px 4px 2px; font-size: 1.05rem; font-weight: 700; color: var(--text); }
.inbox-sub { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text2); opacity: 0.85; margin: 8px 4px 6px; }
.sort-all { margin-bottom: 2px; }
.sort-list { isolation: isolate; } /* Wisch-Hintergrund an den runden Ecken mit abschneiden */
.sort-row { gap: 10px; }
.sort-row .tx-text { flex: 1; min-width: 0; }
.sort-why { font-size: 0.74rem; }
.sort-chip { flex: none; max-width: 46%; min-height: 44px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 1px; font: inherit; font-size: 0.78rem; font-weight: 600;
  padding: 6px 10px; border-radius: 14px; color: var(--text); cursor: pointer; text-align: right;
  border: 1px solid color-mix(in srgb, var(--chip-color, var(--accent)) 45%, transparent); background: color-mix(in srgb, var(--chip-color, var(--accent)) 12%, transparent); }
.sort-chip-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sort-chip small { font-size: 0.68rem; font-weight: 500; color: var(--text2); }
.sort-chip.none { border-style: dashed; color: var(--text2); }
.sort-chip.transfer { --chip-color: #5e5ce6; }
.sort-chip.dupe { --chip-color: #ff9f0a; } /* Eingang „Dopplungen“: Zusammenführen */
/* Hülle der Eingangszeile als Grid mit einer Zeile: erledigt (collapsing) läuft grid-template-rows 1fr → 0fr
   (interpolierbar, eine Layout-Zeile) und blendet aus — die Zeilen darunter rutschen weich nach statt zu
   springen. min-height: 0 am Kind (.sort-swipe, ohne Polster), damit die Zeile wirklich auf 0 schrumpft;
   die .tx-swipe selbst wäre als Grid-Kind durch Polster + Rahmen der Zeile auf 23 px begrenzt. Nur Eingang:
   Buchungszeilen (.tx-swipe) bleiben stehen (federn zurück) und brauchen das nicht. */
.sort-collapse { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur-ui) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
.sort-collapse > .sort-swipe { min-height: 0; }
/* Trennlinie wie ohne Hülle: nur die letzte Zeile der Karte ohne */
.sort-collapse:not(:last-child) > .sort-swipe .tx-item { border-bottom: 1px solid var(--border); }
/* --i: Staffelung bei „Sichere Vermutungen übernehmen“ (components/collapse.js setzt sie je Zeile) */
.sort-collapse.collapsing { grid-template-rows: 0fr; opacity: 0; transition-delay: calc(var(--i, 0) * 40ms); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  /* kein Zusammenklappen: nur ausblenden, die Höhe springt erst, wenn die Zeile entfernt ist */
  .sort-collapse { transition: none; }
  .sort-collapse.collapsing { grid-template-rows: 1fr; transition: opacity 0.15s ease-out; }
}
.sort-swipe .tx-actions { width: 100%; }
.sort-swipe .swipe-action { flex-direction: row; gap: 6px; font-size: 0.8rem; padding: 0 20px; }
.sort-swipe .tx-actions-left .swipe-action { justify-content: flex-start; }
.sort-swipe .tx-actions-right .swipe-action { justify-content: flex-end; }
.swipe-action.pick { background: var(--accent-fill, var(--accent)); }
.sort-help { margin: 2px 4px 6px; }
/* Karte „N Buchungen von … ohne Angaben“ (Runde 20 · A3): Kopf mit Text und Knöpfen, aufgeklappt darunter die Zeilen */
.thin-head { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; }
.thin-head:not(:last-child) { border-bottom: 1px solid var(--border); }
.clarify-card { padding-top: 4px; padding-bottom: 4px; }
.inbox-more-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; margin-top: 6px; padding: 10px 4px;
  background: none; border: none; font: inherit; font-weight: 600; color: var(--text); cursor: pointer; text-align: left; }
.auto-summary { display: flex; flex-direction: column; gap: 2px; width: 100%; margin-top: 6px; padding: 10px 4px; text-align: left; font: inherit; font-weight: 600;
  background: none; border: none; border-top: 0.5px solid var(--glass-border); color: var(--text); cursor: pointer; }
.auto-summary .icon { display: inline-block; vertical-align: -1px; }
/* ---------- Mehrfachauswahl (Kategorie-Detail, Buchungen mit Kategorie-Filter) ---------- */
.cd-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cd-list-head .section-title { margin-bottom: 0; }
.select-toggle { margin: 6px 0; }
.tx-select { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; padding: 0 0 6px; }
.tx-select .select-bar { width: 100%; }
.select-bar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.select-bar-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.select-bar-top strong { flex: 1; font-size: 0.9rem; white-space: nowrap; }
.select-bar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.select-bar-actions .btn { flex: 1 1 45%; }
.tx-item.selectable { gap: 10px; }
.tx-check { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--text2); display: inline-flex; align-items: center; justify-content: center; color: transparent; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.tx-check .icon { width: 14px; height: 14px; }
.tx-item.selected { background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.tx-item.selected .tx-check { background: var(--accent); border-color: var(--accent); color: #fff; }
.cd-auto { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; margin: 0 0 8px; padding: 10px 14px; border-radius: 14px;
  background: var(--glass-control); border: 1px solid var(--glass-border); box-shadow: var(--glass-edge); font: inherit; font-size: 0.86rem; font-weight: 600; color: var(--text); cursor: pointer; text-align: left; }
.cd-auto-act { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); white-space: nowrap; }
.cd-auto:disabled { opacity: 0.5; }

.auto-row { align-items: flex-start; gap: 10px; }
.auto-row .tx-title { font-size: 0.88rem; line-height: 1.35; }
.auto-row.undone { opacity: 0.55; }
.auto-row .btn { flex: none; align-self: center; }

/* ---------- Schnellerfassung ---------- */
.quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 8px; }
.quick-actions button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: 18px; border: 1px solid var(--glass-border, var(--border));
  background: var(--glass-control, var(--card)); color: var(--accent-text); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.quick-actions button span { color: var(--text); }

/* ---------- Vermögensentwicklung ---------- */
.wealth-head { display: flex; flex-direction: column; gap: 4px; }
.wealth-total { font-size: var(--foundation-size-large-title); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.wealth-deltas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5em), 1fr)); gap: 8px; margin-top: 8px; }
.wealth-delta { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--text) 7%, transparent); min-width: 0; }
.wealth-delta span { font-size: .75rem; color: var(--text2); }
.wealth-delta strong { font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wealth-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin: 4px 16px 10px; gap: 2px; }
.wealth-bar i { display: block; min-width: 3px; }

/* ---------- Fixkosten-Analyse ---------- */
.fixed-analysis { margin-top: 12px; }
.fixed-analysis h4 { margin: 16px 0 8px; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text2); font-weight: 600; }
.fa-quota-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fa-quota-head strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.fa-quota-head span { color: var(--text2); font-size: .85rem; }
.fa-meter { position: relative; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--text) 9%, transparent); margin: 8px 0 6px; }
.fa-meter i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--green); }
.fa-meter b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text2); opacity: .6; }
.fa-quota.ok .fa-meter i { background: var(--orange); }
.fa-quota.high .fa-meter i { background: var(--red); }
.fa-cats { display: flex; flex-direction: column; gap: 8px; }
.fa-cat { display: grid; grid-template-columns: minmax(0, 7.5em) 1fr 5.6em; gap: 10px; align-items: center; font-size: .9rem; }
.fa-cat-name { overflow-wrap: anywhere; }
.fa-bar { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--text) 7%, transparent); overflow: hidden; }
.fa-bar i { display: block; height: 100%; border-radius: 4px; }
.fa-val { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.fixed-analysis .hint + .fa-list { margin-top: 8px; }
.fa-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .9rem; }
.fa-list li { display: flex; justify-content: space-between; gap: 12px; }
.fa-list li span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-list li span:last-child { color: var(--text2); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- Suche in Worten ---------- */
.search-examples { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.search-examples .hint { width: 100%; }
.search-answer { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.search-answer strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }

/* ---------- Barrierefreiheit ---------- */
/* Sichtbarer Fokus für Tastatur/Schaltersteuerung (nicht bei Fingertipp). */
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 80%, var(--text));
  outline-offset: 2px;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.switch-visual { display: inline-block; box-sizing: border-box; }
.plain-list { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 6px; font-size: .92rem; }
.capital-row { margin: 8px 0 10px; }
.warn-text { color: var(--red-text); }
.settings-search { margin-bottom: 4px; }
.settings-search .empty-state { margin-top: 12px; }

.sheet-overlay.open ~ .sheet-overlay::before { background: rgba(0, 0, 0, 0.4); }
/* ---------- Vermögen & Import ---------- */
.wealth-add { margin-top: 10px; flex-wrap: wrap; }
.wealth-add .btn { flex: 1 1 140px; }
.wealth-networth .card + .card { margin-top: 10px; }
.import-kinds { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.import-kind.active { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); }
.import-q { margin: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.import-q.unknown { outline: 1px dashed color-mix(in srgb, var(--orange) 60%, transparent); }
.import-back { margin-bottom: 8px; }
.import-preview .preview-rows { margin-top: 8px; }
.import-hist .btn { flex: none; }
.pdf-structure { margin-top: 12px; }
.pdf-structure-text { white-space: pre-wrap; font-size: .7rem; max-height: 40vh; overflow: auto; color: var(--text2); }
.import-understood summary { cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.import-understood h4 { margin: 12px 0 6px; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text2); }
.import-cols { display: flex; flex-direction: column; gap: 6px; }
.import-col { display: flex; flex-direction: column; }
.import-col.missing .tx-title { color: var(--text2); }
.dupe-cands { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.dupe-cand { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--text) 5%, transparent); }
.dupe-no { font-weight: 700; color: var(--accent-text); flex: none; }
.abo-dupe-warn { display: flex; flex-direction: column; gap: 4px; text-align: left; margin-top: 12px; outline: 1px solid color-mix(in srgb, var(--orange) 50%, transparent); }

.open-tr > div { flex: 1; min-width: 0; }
.open-tr select { width: 100%; margin-top: 6px; }
.import-rows { margin-top: 10px; }
.import-rows summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.import-rows li { padding: 4px 0; }
.fin-row > div { flex: 1; min-width: 0; }
.fin-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; font-size: 14px; }
.fin-cmp span { padding: 6px 8px; border-radius: 10px; background: color-mix(in srgb, var(--text) 5%, transparent); }
.fin-act { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.fin-act label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text2); }
.fin-act input, .fin-act select { width: 100%; }
.fin-ok { opacity: .75; }
.fin-diff .tx-sub strong, .fin-missing .tx-sub strong, .fin-extra .tx-sub strong { color: var(--orange, #ff9f0a); }
.open-sug { color: var(--accent, #0a84ff); }
.open-sug.s1 { color: var(--text2); font-style: italic; }
.open-tr .check.tiny { font-size: 13px; margin-top: 6px; }
.fin-read { margin-top: 6px; }
.fin-trail { margin-top: 6px; font-size: 13px; }
.fin-trail summary { cursor: pointer; color: var(--text2); }
.fin-trail li { padding: 2px 0; }
.trail { margin-bottom: 12px; }
.trail-side { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--text) 5%, transparent); }
.trail-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text2); }
.trail-iban { font-variant-numeric: tabular-nums; font-size: 14px; }
.trail-iban.missing { color: var(--orange, #ff9f0a); }
.trail-arrow { text-align: center; color: var(--text2); line-height: 1.4; }
.trail-info { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; word-break: break-word; }

/* el() mit mehreren Wurzelelementen: Rahmen ohne eigenes Layout */
.el-group { display: contents; }

/* ---------- Bedienbarkeit: Touch-Ziele ≥ 44 pt, Kontrast, Sheets (Review ux-4..ux-10) ---------- */
/* Kopfzeile, Navigation, kleine Knöpfe, Chips, Segmente, Auswahlfelder */
.btn, .search, .form input:not([type="checkbox"]):not([type="color"]):not([type="range"]) { min-height: 44px; }
button.hero-fixed { min-height: 44px; margin-top: 2px; }
.arrange-toggles { gap: 0; }
.nav-btn, .icon-btn { width: 44px; height: 44px; }
.btn.tiny { min-height: 44px; min-width: 44px; }
.cat-chip, .segmented button, .chip-select { min-height: 44px; }
.cat-chip { justify-content: center; }
.accent-swatches button { width: 44px; height: 44px; }
.pref-row select, .form select { min-height: 44px; }
label.pref-row { cursor: pointer; }
summary { min-height: 44px; display: list-item; padding: 12px 0; cursor: pointer; }
input[type="range"] { min-height: 44px; }
/* Zweittext in Glas-Sheets und der Einstellungsliste: fest dunkler bzw. heller (≥ 4,5:1 auch bei „Klar“ über kontrastreicher Unterlage) */
.sheet, .settings-list { --text2: var(--lg-text2-sheet); }
@media (max-width: 360px) {
  .tab-bar { padding: 5px; gap: 0; }
  .tab-bar button { padding-inline: 1px; }
  .tab-label { font-size: min(0.58rem, 9.5px); letter-spacing: -0.02em; }
}
/* Kopfzeile auf schmalen Bildschirmen: weniger Abstand, damit der Titel Platz behält */
@media (max-width: 360px) {
  .app-header { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
}
/* Einstellungen: ganzhohes Sheet, Häufig genutzt als Chips, Gefahrenzone */
.settings-frequent .chip-row { padding: 2px 0 6px; }
.frequent-chip .icon { color: var(--accent-text); }
.settings-row.danger-row .tx-title { color: var(--red); }
.settings-results:not([hidden]) { margin-top: 12px; }
/* Auswertung: Spalten nach Textbreite (sonst „Vermög…“ auf 320 pt); aktiver Reiter mit eigener Fläche statt gleitender Linse */
.segmented.stats-segments { grid-auto-columns: auto; overflow-x: auto; scrollbar-width: none; }
.segmented.stats-segments::before { display: none; }
.segmented.stats-segments button { font-size: 0.76rem; padding: 9px 5px; white-space: nowrap; min-width: 44px; }
.segmented.stats-segments button.active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-fill) 78%, white), var(--accent-fill)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 4px 14px color-mix(in srgb, var(--accent) 38%, transparent) !important;
}
.bank-diff .bank-diff-text, .bank-diff-text { white-space: normal; overflow: visible; flex-basis: 100%; }
details.bank-acc-tools { display: block; }
details.bank-acc-tools summary { color: var(--text2); font-size: 0.8rem; font-weight: 600; }
details.bank-acc-tools[open] { display: flex; flex-direction: column; gap: 8px; }
details.bank-acc-tools .btn { padding-left: 12px; padding-right: 12px; text-align: left; }
.diag-diff { white-space: normal; }
/* Import: jede Art ist ein Knopf */
.import-kind-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px;
  border: none; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; padding: 0; }
.import-kind-btn .icon { color: var(--text2); }

/* ---------- Touch-Ziele mindestens 44 × 44 pt ---------- */
/* Kleine runde Knöpfe behalten ihre Optik; die unsichtbare Trefferfläche reicht auf 44 pt. */
.photo-remove, .split-row .split-remove { position: relative; }
.photo-remove { position: absolute; }
.photo-remove::after, .split-row .split-remove::after { content: ''; position: absolute; inset: -12px; }
.split-row .split-remove::after { inset: -9px; }
.mc-row.mc-unsorted { min-height: 44px; align-content: center; align-items: center; }
/* Schalter in „Weitere Karten auf Start“: die Zeile um den Schalter ist die Trefferfläche */
.layout-row .switch-hit { display: flex; align-items: center; align-self: stretch; padding: 7px 0 7px 6px; min-height: 44px; }
.card.list .glass-slider-row { padding: 10px 14px 0; }
.card.list > .hint { padding: 2px 14px 12px; margin: 0; }

/* ---------- Alle Konten (Sheet, views/accountsview.js; früher Tab „Konten“) ---------- */
.accounts-view { display: flex; flex-direction: column; gap: 14px; }
.acc-hero .hero-value { margin-bottom: 12px; }
.acc-group-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 6px; }
.acc-group-head .kind-name { margin: 0; font-size: 0.78rem; }
.acc-item { border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.acc-item:last-child { border-bottom: none; }
.acc-item .acc-main { border-bottom: none; min-height: 60px; }
/* Eigene Ansicht mit Platz: Name und IBAN brechen um statt zu kürzen (große Schrift, 320 pt) */
/* Wird es eng (große Schrift), rutscht der Betrag rechtsbündig in eine eigene Zeile, statt den Namen zu zerteilen */
.acc-main { flex-wrap: wrap; row-gap: 4px; }
.acc-main .tx-text { flex: 1 1 5.5em; }
.acc-main .tx-amount { margin-left: auto; }
.acc-main > .icon:last-child { color: var(--text2); opacity: 0.6; margin-left: -4px; }
.acc-bank-ok .icon { display: inline-block; vertical-align: -1px; margin-right: 2px; color: var(--green-text); }
/* Abweichung zum Bankstand: deutlich sichtbarer Hinweis unter der Zeile, „Prüfen“ rechts (Saldo-Analyse) */
.acc-diff {
  display: flex; align-items: center; gap: 10px;
  margin: 0 14px 12px; padding: 8px 8px 8px 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--orange) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--orange) 30%, transparent);
}
.acc-diff-icon { flex: none; color: var(--orange); font-size: var(--foundation-size-body); line-height: 1; }
.acc-diff-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 0.8rem; line-height: 1.3; }
.acc-diff .btn { flex: none; }
.acc-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 26px 20px; }
.acc-empty-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 4px;
  color: var(--accent-text); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.acc-empty .hint { max-width: 32em; }

/* ---------- Große Schrift: Tab-Leiste nur mit Symbolen, Halten zeigt den Namen (components/tabhud.js) ---------- */
:root[data-bigtype] .tab-bar .tab-label { display: none; }
:root[data-bigtype] .tab-bar .tab-icon { height: 34px; }
:root[data-bigtype] .tab-bar .tab-icon .icon { width: 30px; height: 30px; }
:root[data-bigtype] .tab-bar button { min-height: 52px; justify-content: center; }
/* Glas-Blase über dem gehaltenen Tab (M2-Ebene wie das Kontextmenü): Symbol und Name groß */
.tab-hud {
  position: fixed; z-index: 70; left: 50%; bottom: 120px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: max-content; min-width: 132px; max-width: calc(100vw - 32px); padding: 16px 22px 14px; border-radius: 26px;
  color: var(--text); font-size: 1.25rem; font-weight: 700; text-align: center;
  background: var(--glass-sheen), linear-gradient(var(--glass-tint-strong), var(--glass-tint-strong));
  backdrop-filter: var(--lg-bf-menu); -webkit-backdrop-filter: var(--lg-bf-menu);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-edge);
  pointer-events: none; opacity: 0;
  transform: translateX(-50%) scale(0.92);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-ui) var(--ease-spring);
}
.tab-hud.show { opacity: 1; transform: translateX(-50%) scale(1); }
.tab-hud:not(.show) { backdrop-filter: none; -webkit-backdrop-filter: none; } /* in Ruhe keine zweite Glasfläche */
.tab-hud-icon .icon { width: 44px; height: 44px; color: var(--accent-text); }
.tab-hud-label { overflow-wrap: break-word; }
@media (prefers-reduced-motion: reduce) { .tab-hud, .tab-hud.show { transform: translateX(-50%); transition: opacity var(--dur-fast) ease-out; } }

/* ---------- Lernrunde (views/learnround.js), Angebot im Eingang, Problemfälle (views/localaisheet.js) ---------- */
.learn-offer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.learn-offer-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.learn-step { display: flex; flex-direction: column; gap: 12px; animation: learn-in var(--dur-ui) var(--ease-out) both; }
@keyframes learn-in { from { opacity: 0; transform: translateY(10px); } }
.learn-progress { display: flex; flex-direction: column; gap: 6px; }
.learn-card { display: flex; flex-direction: column; gap: 6px; }
.learn-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.learn-name { font-size: 1.12rem; overflow-wrap: anywhere; }
.learn-meta, .learn-why { white-space: normal; }
.learn-purpose { margin: 0; font-size: 0.85rem; color: var(--text2); overflow-wrap: anywhere; }
.learn-chips { margin-top: 6px; }
.learn-more { margin-top: 2px; }
.learn-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.learn-actions .btn { padding-inline: 8px; white-space: normal; }
.learn-big { margin: 0 0 6px; font-size: 1.05rem; }
.learn-stages { margin-top: 10px; }
.problem-row { gap: 12px; }
.problem-row .btn { flex: none; max-width: 48%; white-space: normal; text-align: center; }
@media (prefers-reduced-motion: reduce) { .learn-step { animation: none; } }

/* ========== Mac-Extras (Runde 13 · W2) ========== */
/* Ablagefläche beim Hineinziehen einer Datei (components/desktop.js): dezent getönt mit Rahmen und deckender Karte — kein
   Glas (sie liegt über Sheets und Menü, unter Sperre/Einführung). Nimmt keine Zeigerereignisse an: Ziel bleibt das Dokument. */
.drop-zone {
  position: fixed; inset: 0; z-index: 80; pointer-events: none;
  display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}
.drop-zone::before {
  content: ""; position: absolute; inset: 10px; border-radius: 24px;
  border: 3px solid color-mix(in srgb, var(--accent) 65%, transparent);
}
.drop-zone.show { opacity: 1; visibility: visible; transition: opacity var(--dur-fast) var(--ease-out); }
.drop-zone-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 100%;
  padding: 22px 28px; border-radius: 22px; text-align: center;
  background: var(--card); color: var(--text); box-shadow: var(--glass-shadow);
  transform: scale(0.96); transition: transform var(--dur-ui) var(--ease-out);
}
.drop-zone.show .drop-zone-card { transform: none; }
.drop-zone-card .icon { color: var(--accent-text); }
.drop-zone-card strong { font-size: 1.06rem; }
.drop-zone-card span { font-size: 0.82rem; color: var(--text2); }
@media (prefers-reduced-motion: reduce) { .drop-zone-card { transform: none; transition: none; } }

/* Kontextmenü mit Maus und Tastatur (components/txlist.js): Eintrag unter dem Zeiger bzw. im Fokus hervorgehoben */
@media (hover: hover) and (pointer: fine) { .ctx-menu button:hover { background: color-mix(in srgb, var(--text) 8%, transparent); } }
.ctx-menu button:focus-visible { outline-offset: -2px; background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* Übersicht der Tastenkürzel (Einstellungen → Bedienung → Tastenkürzel) */
.shortcut-keys { flex: none; display: inline-flex; gap: 4px; }
.shortcut-keys kbd {
  min-width: 1.9em; padding: 2px 7px; border-radius: 7px; text-align: center;
  font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--text);
  background: var(--card); border: 1px solid var(--border); box-shadow: 0 1px 0 var(--border);
}
.shortcut-gesture { font-size: 0.82rem; color: var(--text2); }
/* Mac-Modus (W1, --ui = Grundschrift / 17): Ablagefläche, Karte und Tastenkappen wachsen mit der Schrift */
@media (hover: hover) and (pointer: fine) {
  .drop-zone { padding: calc(16px * var(--ui)); }
  .drop-zone::before { inset: calc(10px * var(--ui)); border-radius: calc(24px * var(--ui)); border-width: calc(3px * var(--ui)); }
  .drop-zone-card { gap: calc(6px * var(--ui)); padding: calc(22px * var(--ui)) calc(28px * var(--ui)); border-radius: calc(22px * var(--ui)); }
  .drop-zone-card .icon { width: calc(34px * var(--ui)); height: calc(34px * var(--ui)); }
  .shortcut-keys { gap: calc(4px * var(--ui)); }
  .shortcut-keys kbd { padding: calc(2px * var(--ui)) calc(7px * var(--ui)); border-radius: calc(7px * var(--ui)); }
}

/* ---------- Start-Animation (Kaltstart, js/splash.js) ----------
   Überbrückt das Öffnen der Daten: Hinter dem Logo gleiten Heikin-Ashi-Kerzen nacheinander diagonal nach oben an ihren Platz.
   Das Logo (Scheibe mit drei Ringen, design/logo) springt mit einer Feder auf
   (--ease-spring), das f zeichnet sich selbst — Stamm (--ease-drawer), dann Querstrich —, danach laufen zwei Wellen kurz
   nacheinander in der Akzentfarbe nach außen — nach einer Pause wieder ein Paar —, bis die erste Ansicht steht (als
   installierte App mindestens 2 s, js/splash.js). Zum Schluss zoomt das Zeichen heran, während das Overlay ausblendet
   (--dur-chart) und Eingaben sofort durchlässt. Das Heranzoomen sitzt auf der Hülle (.splash-mark), damit laufende
   Animationen nicht springen. Bewegt werden transform/opacity und die Strichlänge des f. Farben aus den Tokens (hell/dunkel,
   Akzentfarbe); das App-Symbol selbst bleibt im festen Blau des Logos. */
#splash-screen { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: var(--bg);
  transition: opacity var(--dur-chart) var(--ease-out), visibility 0s linear var(--dur-chart); }
#splash-screen.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-mark { transition: transform var(--dur-chart) var(--ease-out); }
#splash-screen.is-hidden .splash-mark { transform: scale(1.25); }
#splash-screen svg { display: block; width: calc(130px * var(--ui, 1)); height: calc(130px * var(--ui, 1)); overflow: visible; }
.splash-base, .splash-pulse { transform-box: fill-box; transform-origin: center; }
.splash-base { opacity: 0; transform: scale(0.5); animation: splash-pop 560ms var(--ease-spring) forwards; }
.splash-disc { fill: var(--card); opacity: 0.6; }
.splash-ring { fill: none; stroke: var(--text2); stroke-width: 1.5; opacity: 0.3; }
/* Drei Ringe des Logos um die Scheibe — springen mit der Scheibe auf; zurückhaltend, damit die Kerzen dahinter wirken */
.splash-orbit { fill: none; stroke: var(--accent); }
.splash-orbit-1 { stroke-width: 1.7; opacity: 0.15; }
.splash-orbit-2 { stroke-width: 2.2; opacity: 0.25; }
.splash-orbit-3 { stroke-width: 1.4; opacity: 0.1; }
/* Heikin-Ashi-Kerzen: gleiten nacheinander (--delay je Kerze, 0–480 ms) von links unten an ihren Platz und bleiben als
   dezenter Hintergrund stehen (Deckkraft 0,35). Steigend in der Akzentfarbe, fallend in --text2. */
.splash-candle { color: var(--accent); opacity: 0; transform: translate(-15px, 15px);
  animation: splash-candle 500ms var(--ease-out) var(--delay, 0ms) forwards; }
.splash-candle.down { color: var(--text2); }
.splash-candle line { stroke: currentColor; stroke-width: 6; stroke-linecap: round; }
.splash-candle rect { fill: currentColor; }
/* Das f (Breite im 512er-Raster des Logos): Stamm zeichnet sich, dann der Querstrich von links */
.splash-stem, .splash-bar { fill: none; stroke: var(--accent); stroke-width: 18; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; }
.splash-stem { animation: splash-draw 600ms var(--ease-drawer) 260ms forwards; }
.splash-bar { animation: splash-draw 300ms var(--ease-out) 760ms forwards; }
/* Zwei Wellen: dieselbe Bewegung, die zweite 300 ms später; je Durchgang 1 s Ausbreiten, 1 s Pause (Keyframes 0–50 %).
   Gleichmäßig auslaufend (ease-out statt der stark vorgezogenen Token-Kurve), damit beide Ringe gleichzeitig sichtbar sind. */
.splash-pulse { fill: none; stroke: var(--accent); stroke-width: 3; opacity: 0; animation: splash-pulse 2000ms ease-out 650ms infinite; }
.splash-pulse-2 { animation-delay: 950ms; }
@keyframes splash-pop { to { opacity: 1; transform: scale(1); } }
@keyframes splash-draw { to { stroke-dashoffset: 0; } }
@keyframes splash-candle { to { opacity: 0.35; transform: none; } }
@keyframes splash-pulse { 0% { opacity: 0.85; transform: scale(1); } 50%, 100% { opacity: 0; transform: scale(1.75); } }
@keyframes splash-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  /* Nur Überblenden: kein Aufspringen, kein Zeichnen, keine Wellen, kein Heranzoomen */
  #splash-screen svg { opacity: 0; animation: splash-fade 150ms ease-out forwards; }
  .splash-base { opacity: 1; transform: none; animation: none; }
  .splash-stem, .splash-bar { stroke-dashoffset: 0; animation: none; }
  .splash-candle { opacity: 0.35; transform: none; animation: none; }
  .splash-pulse { display: none; }
  #splash-screen.is-hidden .splash-mark { transform: none; }
}

/* ---------- Bildschirmfüllende Ansichten mit Zurück-Navigation ---------- */
:root .app-header {
  height: auto; gap: 4px 8px;
  padding-top: calc(env(safe-area-inset-top) + 3px); padding-bottom: 3px;
}
:root .app-header .nav-title { visibility: visible; opacity: 1; transform: none; }
:root .header-actions { margin-inline-start: auto; }
:root .view { padding-top: calc(var(--app-header-height, 56px) + 10px * var(--ui)); }
:root .hdr-capsule #fab { flex: none; }
:root .tab-bar .side-new { display: none; }
:root .sheet-overlay {
  inset: auto; top: var(--screen-top, 0px); left: var(--screen-left, 0px);
  width: var(--screen-width, 100%); height: var(--screen-height, 100dvh);
  align-items: stretch;
}
:root .sheet-overlay .sheet {
  display: flex; flex-direction: column; transform-origin: 50% 100%; overflow-x: hidden; touch-action: pan-y;
  width: 100%; max-width: none; height: 100%; max-height: none;
  min-height: 0; border: none; border-radius: 0; box-shadow: none;
  background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* Übereinander geöffnete Sheets: das obere deckend, damit das untere nicht durchscheint. */
:root .sheet-overlay.open ~ .sheet-overlay .sheet { background: var(--glass-sheen), linear-gradient(var(--bg), var(--bg)); }
:root .sheet-drag { flex: none; touch-action: pan-y; cursor: auto; }
:root .sheet-header {
  display: flex; align-items: center; gap: 8px; justify-content: flex-start;
  padding: calc(env(safe-area-inset-top) + 6px) max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--glass-border);
}
:root .sheet-header h2 { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 1.059rem; }
/* Art der Buchung in der Kopfzeile des Editors (components/txeditor.js, 29.10.2026): die Segmente stehen bei einer
   neuen Buchung an Stelle des Titels — volle Breite, Knöpfe 44 px hoch (Touch-Ziel), nichts abgeschnitten. */
:root .sheet-header.mit-art h2 { flex: 0 0 auto; width: 0; min-width: 0; overflow: hidden; position: relative; }
:root .sheet-header.mit-art .segmented { flex: 1; min-width: 0; padding: 2px; border-radius: 12px; }
:root .sheet-header.mit-art .segmented button { min-width: 0; padding: 4px 2px; min-height: max(44px, 44px * var(--ui)); font-size: 0.794rem; border-radius: 10px; overflow: hidden; }
:root .sheet-header h2:focus { outline: none; }
:root .sheet-header .sheet-close {
  flex: none; margin: 0; width: max(44px, 44px * var(--ui)); height: max(44px, 44px * var(--ui)); padding: 0;
  display: grid; place-items: center; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-radius: 8px; color: var(--accent-text); background: var(--glass-control); font-size: 0.824rem; cursor: pointer;
}
:root .sheet-body {
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y;
  flex: 1; min-height: 0; min-width: 0;
  padding: 16px max(18px, env(safe-area-inset-right), calc((100% - 58rem) / 2))
    calc(env(safe-area-inset-bottom) + 24px) max(18px, env(safe-area-inset-left), calc((100% - 58rem) / 2));
  mask-image: none; -webkit-mask-image: none;
  scroll-padding-block: 16px;
}
:root .lock-screen, :root .onboarding {
  inset: auto; top: var(--screen-top, 0px); left: var(--screen-left, 0px);
  width: var(--screen-width, 100%); height: var(--screen-height, 100dvh);
  place-items: start center;
  overflow-y: auto;
  padding: max(24px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}
:root .lock-card, :root .onboarding-card { flex-shrink: 0; margin-block: auto; }
@media print { :root .view { padding-top: 0; } }

.integration-link { padding: 16px; border: 1px solid var(--border); border-radius: var(--foundation-radius-card); margin-top: 12px; }
.integration-link h3 { font-size: var(--foundation-size-body); margin-bottom: 8px; }
.integration-link .btn, .integration-link-form .btn { min-height: var(--foundation-touch); margin-top: 8px; }
.integration-link-form { gap: 12px; }