/* AUTO-GENERATED FILE. DO NOT EDIT.
 * Source: public/css/app/manifest.json
 * Regenerate: node scripts/build-css-bundle.js
 */

/* ═══════════════════════════════════════════════════════════════════════════
   TAXTELLO DESIGN TOKENS
   ───────────────────────────────────────────────────────────────────────────
   Zentrale Quelle für Farben, Typografie, Spacing, Radien, Schatten und
   Transitions. Alle neuen Features sollten var(--*) statt hart kodierter
   Werte nutzen. Doku + Nutzungsregeln: docs/design/TOKENS.md

   Die älteren Tokens (--bg, --text, --radius, --shadow etc.) bleiben aus
   Kompatibilitätsgründen erhalten; neue Arbeit nutzt bevorzugt die unten
   strukturierten Scale-Tokens.
   ═══════════════════════════════════════════════════════════════════════════ */
/* stylelint-disable color-no-hex -- Token-Definitionen: hier sind Hex-Werte
   explizit gewollt. Die Regel gilt nur für Component-Rules. */
:root {
  /* ── Color-Scheme (B11 Mobile-Picker-Kontrast Fix, 2026-05-28) ──────────────
     Native UI-Controls (form-control popups inkl. iOS `<select>`-Popover,
     Scrollbars, Caret) müssen wissen, dass die App im Dark-Mode rendert,
     sonst zeigt iOS die Picker-Optionen in light-default (graue Schrift auf
     hellem Grund → kaum lesbar auf unserem dunklen Surface). Light-Override
     im html[data-theme="light"]-Block weiter unten. */
  color-scheme: dark;

  /* ── Layout: Topbar (initial value, JS überschreibt mit gemessenem Wert via router.js#_measureTopbarAndRail) ── */
  /* 2026-05-03 Sweep Q (Opus-Review WARN-2 auf #1422): Initial-Wert für sticky-Top-Offsets vor JS-Init.
     Tatsächliche Höhe wird durch router.js dynamisch gesetzt (.topbar getBoundingClientRect().bottom).
     64px = Default-.nav-primary-height (52px) + .topbar-padding/border. */
  --topbar-height:64px;

  /* ── Colors: Surfaces & Neutrals ──────────────────────────────────── */
  --bg:#0c0f1a;--bg2:#111525;--bg3:#171c2f;--card:#131722;--card2:#1a2032;
  --border:#2a3354;--border2:#3a4570;--text:#e8eaf2;--text2:#8b93b5;--text3:#7580a5;

  /* ── Colors: Brand Accent ─────────────────────────────────────────── */
  --accent:#e8b84b;--accent2:#c99830;--accent3:#f5d07a;--accent-deep:#9b6d18;--accent-ink:#0c0f1a;
  --accent-rgba-base:232,184,75;

  /* ── Colors: Semantic (good/warn/poor) ────────────────────────────── */
  --green:#34d399;--green2:rgba(52,211,153,.12);--green3:rgba(52,211,153,.25);
  --red:#f87171;--red2:rgba(248,113,113,.12);--red3:rgba(248,113,113,.25);
  --blue:#60a5fa;--purple:#a78bfa;

  /* ── Tone Scale (Ampel): fg/bg/border pairs for cards, badges, pills ─ */
  --tone-good-fg:#7be0c3;
  --tone-good-bg:rgba(83,214,179,.06);
  --tone-good-border:rgba(83,214,179,.16);
  --tone-warn-fg:#f0cf77;
  /* Dark: --tone-warn-fg ist als Text auf dunklem Grund bereits AA → die
     Text-Variante zeigt auf denselben Wert. Light überschreibt --tone-warn-text
     mit einem dunkleren Wert (siehe _10-shell-views.css, A11y FM10-b). */
  --tone-warn-text:var(--tone-warn-fg);
  --tone-warn-bg:rgba(232,184,75,.07);
  --tone-warn-border:rgba(232,184,75,.18);
  /* Dark-Mode body-text auf Warn-Surfaces: in Dark ist --tone-warn-fg bereits
     hell-warm und gut lesbar — Strong-Variante = identisch. Body.light hat den
     dunkleren Wert fuer WCAG AA. */
  --tone-warn-fg-strong:var(--tone-warn-fg);
  --tone-poor-fg:#ff9b9b;
  --tone-poor-bg:rgba(248,113,113,.07);
  --tone-poor-border:rgba(248,113,113,.18);
  --tone-info-fg:#8fc6ff;
  --tone-info-bg:rgba(123,176,255,.07);
  --tone-info-border:rgba(123,176,255,.16);

  /* ── Quiet Note Surface (2026-06-30): verbindliche Hinweisbox-Familie ── */
  --tx-note-bg:rgba(var(--surface-rgba-base),.035);
  --tx-note-border:rgba(var(--surface-rgba-base),.095);
  --tx-note-border-strong:rgba(var(--surface-rgba-base),.14);
  --tx-note-radius:10px;
  --tx-note-padding:12px 14px;
  --tx-note-gap:10px;
  --tx-note-title-color:var(--text);
  --tx-note-text-color:var(--text2);
  --tx-note-muted-color:var(--text3);
  --tx-note-info-bg:var(--tone-info-bg);
  --tx-note-info-border:var(--tone-info-border);
  --tx-note-warn-bg:var(--tone-warn-bg);
  --tx-note-warn-border:var(--tone-warn-border);
  --tx-note-danger-bg:var(--tone-poor-bg);
  --tx-note-danger-border:var(--tone-poor-border);
  --tx-note-success-bg:var(--tone-good-bg);
  --tx-note-success-border:var(--tone-good-border);

  /* ── Invoice UI Semantic Tokens (Design-System Foundation 2026-05) ─── */
  --invoice-bg:var(--bg);
  --invoice-surface:var(--card);
  --invoice-surface-elevated:var(--card2);
  --invoice-border:var(--border);
  --invoice-border-strong:var(--border2);
  --invoice-text-primary:var(--text);
  --invoice-text-secondary:var(--text2);
  --invoice-text-muted:var(--text3);
  --invoice-accent:var(--accent);
  --invoice-accent-ink:var(--accent-ink);
  --invoice-focus-ring:rgba(232,184,75,.2);
  --invoice-danger:var(--tone-poor-fg);
  --invoice-danger-bg:var(--tone-poor-bg);
  --invoice-danger-border:var(--tone-poor-border);
  --invoice-warning:var(--tone-warn-fg);
  --invoice-warning-bg:var(--tone-warn-bg);
  --invoice-warning-border:var(--tone-warn-border);
  --invoice-success:var(--tone-good-fg);
  --invoice-success-bg:var(--tone-good-bg);
  --invoice-success-border:var(--tone-good-border);
  --invoice-info:var(--tone-info-fg);
  --invoice-info-bg:var(--tone-info-bg);
  --invoice-info-border:var(--tone-info-border);
  --invoice-canceled:var(--text3);
  --invoice-canceled-bg:rgba(117,128,165,.12);
  --invoice-canceled-border:rgba(117,128,165,.24);

  /* ── Action-Menu Pop-Out Surface (app-weiter Standard) ─────────── */
  /* Geteilte Dark-Mode-Fläche für alle 3-Punkte-/Dropdown-Aktionsmenüs
     (inv3-doc-menu, tx-dropdown, dn-row-menu): historisch ~10% heller als
     --card2 angesetzt (damals #1f2641), damit das Menü klar über der Liste
     „schwebt". Nach Phase-D-Card-Surface-Migration (--card2 → #1a2032)
     bleibt der Pop-Out-Hex absichtlich unverändert: Optisch funktioniert
     #262d4a weiterhin als deutliches Anhebungs-Layer gegenüber den neuen
     dunkleren Card-Surfaces. Light-Mode bleibt token-getrieben über die
     jeweilige body.light-Regel. */
  --inv3-doc-menu-bg:#262d4a;

  /* ── Booking Entry Composer Tokens ─────────────────────────────── */
  --entry-composer-surface:var(--card);
  --entry-composer-surface-muted:var(--bg2);
  --entry-composer-surface-strong:var(--card2);
  --entry-composer-border:rgba(var(--surface-rgba-base),.08);
  --entry-composer-border-strong:rgba(var(--surface-rgba-base),.16);
  --entry-composer-field-bg:var(--bg2);
  --entry-composer-shadow:0 20px 48px rgba(0,0,0,.42);
  --entry-composer-expense-bg:var(--red2);
  --entry-composer-expense-border:var(--red3);
  --entry-composer-income-bg:var(--green2);
  --entry-composer-income-border:var(--green3);
  --entry-composer-info-bg:rgba(96,165,250,.08);
  --entry-composer-info-border:rgba(96,165,250,.22);
  --entry-composer-info-fg:var(--tone-info-fg);
  --entry-composer-warning-bg:var(--tone-warn-bg);
  --entry-composer-warning-border:var(--tone-warn-border);
  --entry-composer-warning-fg:var(--tone-warn-fg);
  --entry-composer-success-bg:var(--tone-good-bg);
  --entry-composer-success-border:var(--tone-good-border);
  --entry-composer-success-fg:var(--tone-good-fg);

  /* ── Soft-Tokens für Pill-Backgrounds (Safari-15-safe) ────────────── */
  /* Precomputed rgba mit höherer Opacity als die tone-bg-Tokens, gedacht
     für eigenständige Status-Pills (Header-Status, Form-Hint-Borders,
     Inline-Error-Backdrops). Stärker als --tone-*-bg, weniger ornamental
     als --tone-*-border. Bewusst kein color-mix(): ältere iOS/Safari
     vor 16.2 würden die ganze background-Rule dropfen. */
  --accent-soft:rgba(232,184,75,.16);
  --green-soft:rgba(52,211,153,.16);
  --red-soft:rgba(248,113,113,.10);
  --text3-soft:rgba(117,128,165,.18);
  /* Subtler Accent-Background für selected-states / leichte Highlights, unter
     --accent-soft (.05 vs .16). Ledger-Row.is-selected nutzt das, ohne dass
     der Selected-State so laut wirkt wie ein aktiver Filter-Pill. */
  --accent-bg-soft:rgba(232,184,75,.05);
  /* A11y: sichtbarer Fokus-Ring (box-shadow) für Formularfelder, die
     outline:none setzen. Bewusst etwas kräftiger (.45) als der globale
     :focus-visible-outline (.3), damit der Ring auf dunklem UND hellem
     Surface klar erkennbar ist. */
  --accent-focus-ring:rgba(232,184,75,.45);

  /* ── Bank Logo Tokens ─────────────────────────────────────────────── */
  /* Real-world brand chips for bank-account detection. Kept as tokens so
     component CSS stays free of ad hoc hex values while preserving recognisable
     logo colors in both themes. */
  --bank-logo-canvas:#fff;
  --bank-logo-light-ink:#fff;
  --bank-logo-commerzbank-a:#f5d36b;
  --bank-logo-commerzbank-b:#9d7a14;
  --bank-logo-commerzbank-ink:#171404;
  --bank-logo-deutsche-bank-a:#2b8bff;
  --bank-logo-deutsche-bank-b:#073f86;
  --bank-logo-sparkasse-a:#ff5b5b;
  --bank-logo-sparkasse-b:#b30818;
  --bank-logo-n26-a:#f7fbff;
  --bank-logo-n26-b:#9eb4c8;
  --bank-logo-n26-ink:#142033;

  /* ── Typography ───────────────────────────────────────────────────── */
  --font-sans:'Plus Jakarta Sans',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --mono:'JetBrains Mono',monospace; /* legacy alias — prefer --font-mono */

  /* Text-RGBA-Base: Triplet für Text-Farben mit variabler Opacity.
     Dark-Mode nutzt warm-off-white (246,244,235), Light-Mode eine dunkle
     Neutral-Farbe (26,30,46). Komponenten nutzen rgba(var(--text-rgba-base),.X)
     statt hart kodierter rgba-Tripel und bekommen dadurch automatisch
     korrekten Kontrast in beiden Themes. */
  --text-rgba-base:246,244,235;
  /* Ink-RGBA-Base: Light-Mode-spezifisches Navy-Grau-Triplet (19,32,66) für
     Invoice-/Form-Oberflächen-Borders, -Schatten und subtile Text-Tints. Ein
     EIGENER, bläulicherer Neutral-Ton als --text-rgba-base (15,23,42) — von
     Light-Mode-Komponenten als rgba(var(--ink-rgba-base),.X) genutzt statt
     hart kodierter rgba(19,32,66,…). Dark-Default ist hier nur ein Fallback;
     alle Konsumenten leben in body.light-Selektoren (siehe _10-shell.css). */
  --ink-rgba-base:19,32,66;
  /* Surface-RGBA-Base: Triplet für subtile Surface-Overlays (Backgrounds,
     Borders, Hover-Tints). Dark-Mode nutzt pure-white als Aufhellung auf
     dunklem Grund, Light-Mode pure-black als Abdunklung auf weißem Grund. */
  --surface-rgba-base:255,255,255;
  /* Solid-white triplet for high-alpha (≥.5) tints — always white regardless
     of mode. Light-mode may override --surface-rgba-base to 0,0,0 but opaque
     white surfaces must stay white. */
  --surface-solid-rgba-base:255,255,255;
  /* Strong Text: solide Haupt-Textfarbe für Überschriften, Hero-Titel,
     starke Labels. Dark-Mode nutzt warm-off-white (#f6f4eb), Light-Mode
     eine dunkle Neutral-Farbe (#1c2030). Phase D Schritt 2: Migration
     der 35 hartkodierten #f6f4eb in Component-Rules auf var(--text-strong),
     damit Light-Mode automatisch korrekten Kontrast bekommt. */
  --text-strong:#f6f4eb;

  --fs-xs:10px;     /* Kicker, Micro-Labels, Badge-Text */
  --fs-sm:11px;     /* Fine print, Meta-Zeilen */
  --fs-base:13px;   /* Tabellen-Text, Section-Sub */
  --fs-body:15px;   /* Body-Default */
  --fs-md:17px;     /* Subcard-Titel */
  --fs-lg:19px;     /* Modul-Titel */
  --fs-xl:22px;     /* Section-H2 */
  --fs-hero:32px;   /* Hero-H1 */

  /* font-weights — folgen der Standard-CSS-Benennung (400 normal, 500 medium,
     600 semibold, 700 bold, 800 extrabold, 900 black) */
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-heavy:800;   /* Alt-Alias für --fw-extrabold, behalten wegen Bestands-Uses */
  --fw-extrabold:800;
  --fw-black:900;

  --lh-tight:1.15;
  --lh-base:1.55;
  --lh-relaxed:1.65;

  /* ── Spacing Scale ────────────────────────────────────────────────── */
  --space-xs:4px;
  --space-sm:8px;
  --space-md:12px;
  --space-lg:16px;
  --space-xl:24px;
  --space-2xl:36px;
  --space-3xl:56px;

  /* ── Radius ───────────────────────────────────────────────────────── */
  --radius:10px;    /* legacy alias for --radius-md */
  --radius2:6px;    /* legacy alias for --radius-sm */
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;
  --radius-xl:18px;
  --radius-2xl:28px;
  --radius-hero:22px;
  --radius-pill:999px;

  /* ── Shadows ──────────────────────────────────────────────────────── */
  --shadow:0 4px 24px rgba(0,0,0,.5); /* legacy alias */
  --shadow-sm:0 4px 14px rgba(0,0,0,.08);
  --shadow-md:0 10px 30px rgba(0,0,0,.18);
  --shadow-lg:0 16px 40px rgba(0,0,0,.24);

  /* ── Transitions ──────────────────────────────────────────────────── */
  --tr-fast:120ms ease;
  --tr-base:160ms ease;
  --tr-slow:240ms ease;

  /* ── Mobile-Listen-Refactor Stage 2 (PR-A Defensiv) ───────────────── */
  /* Breakpoints fuer Page-Level (nicht Container-Queries). 600px ist der
     primaere Mobile-Switch, 480px Feinjustierung kleiner Phones. */
  --bp-mobile:600px;
  --bp-mobile-tight:480px;
  /* WCAG 2.1 AA fordert min 44x44px Tap-Targets. -comfy fuer primaere CTAs. */
  --tap-target-min:44px;
  --tap-target-comfy:48px;
  /* Bottom-Sheet (geteilt mit F-MOB-007 Month-Picker): top-radius matcht
     inv3-form-card (22px), max-height 80dvh laesst Scroll-Hint sichtbar. */
  --sheet-radius-top:22px;
  --sheet-backdrop:rgba(0,0,0,.55);
  --sheet-handle:rgba(var(--surface-rgba-base),.25);
  --sheet-max-height:80dvh;
  /* Compact-Row Mindesthoehe (PR-B nutzt das, hier kodifiziert). */
  --row-compact-min-h:96px;

  /* ── Shell v2 (2026-05-05 PR-1) ─────────────────────────────────────── */
  /* Sidebar-Breiten: expanded 240px wie Mockup-1, collapsed 64px Icon-Rail.
     Drawer auf Mobile nimmt fixe 280px (Slide-from-left). */
  --shell-sidebar-w-expanded:240px;
  --shell-sidebar-w-collapsed:64px;
  --shell-sidebar-w-drawer:280px;
  /* Topbar v2 ist 4px schlanker als v1 (52→56 wäre symmetrischer, aber
     bestehende Sticky-Offsets nutzen --topbar-height; v2 setzt eigene). */
  --shell-topbar-h:56px;
  /* Mobile AppShell-Topbar: sticky bei top:0, aber Inhalt unter iOS/PWA-
     Safe-Area. Desktop nutzt weiter --shell-topbar-h ohne Inset. */
  --shell-mobile-topbar-h:calc(var(--shell-topbar-h) + env(safe-area-inset-top,0px));
  /* Z-Index-Skala: zentralisiert, damit Sticky-Komponenten nicht
     mit Magic-Numbers (90, 100, …) kollidieren.
     Live-Smoke 2026-05-06 (User-Feedback): der Mobile-Drawer (z=90) und die
     `.page-filter-bar` (z=90, hard-coded) hatten gleiche z-index. Bei
     gleicher Specificity gewinnt das später-im-DOM-Element — die
     Filter-Bar peekte durch den geöffneten Drawer hindurch.
     Fix: Drawer-Tokens deutlich erhöhen, sodass der Drawer ÜBER allem
     Page-Content (`page-filter-bar` z=90, `_30-documents-shell` z=200/260,
     `.tip`/`.sort-drop` z=300) liegt, aber UNTER Toast (1100), Modal (1200)
     und Tooltip (1300) bleibt. Toasts und Modals sollen weiter über dem
     offenen Drawer angezeigt werden. */
  --z-base:1;
  --z-sticky:50;
  --z-sidebar:60;
  --z-topbar:70;
  --z-drawer-backdrop:1050;
  --z-drawer:1060;
  --z-toast:1100;
  --z-modal:1200;
  --z-tooltip:1300;
  /* Sidebar-Farben & Hover-States. Phase 2 AppShell 2026-05-26: Sidebar-BG
     konsumiert das neue --surface-sidebar Token (PR #2612), das in beiden
     Themes definiert ist (Dark #0f131a, Light #f8fafc). Damit fällt die alte
     Light-Mode-Override `--shell-sidebar-bg:var(--card)` in _10-shell.css weg. */
  --shell-sidebar-bg:var(--surface-sidebar);
  /* RGB tuple matching --surface-sidebar Dark — used by
     .shell-sidebar @supports (backdrop-filter) for a translucent background
     so the blur is actually visible. Solid fallback uses --shell-sidebar-bg.
     Light-Override im body.light-Block in _10-shell.css.
     Phase 2.5 Hotfix 2026-05-27: 15,19,26 (near-black) → 38,48,80 (Modern
     Slate Navy), 1:1 zu Antigravity rgba(38,48,80,.65). Daniel-Befund:
     "App-Shell hat falsche Farbe (schwarz anstatt Antigravity-Slate-Navy)". */
  --shell-sidebar-bg-rgb:38,48,80;
  --shell-sidebar-border:var(--border);
  --shell-sidebar-item-hover:rgba(var(--surface-rgba-base),.04);
  --shell-sidebar-item-active-bg:rgba(232,184,75,.12);
  --shell-sidebar-item-active-fg:var(--accent);
  --shell-sidebar-item-active-bar:var(--accent);
  --shell-ref-max-width:1440px;
  --shell-ref-pad-top:2px;
  --shell-ref-frame-gutter:8px;
  --shell-ref-pad-x:16px;
  --shell-ref-pad-bottom:80px;
  --shell-ref-header-gap:18px;
  --shell-ref-header-stack-gap:12px;
  --shell-ref-header-stack-gap-tight:8px;
  --shell-ref-header-bottom:20px;
  --shell-ref-title-size:30px;
  --shell-ref-title-size-mobile:24px;
  --shell-ref-subtitle-size:13px;
  --shell-ref-subtitle-margin-top:6px;
  --shell-ref-tax-pad-bottom:64px;
  --shell-ref-mobile-pad-x:12px;
  --shell-ref-mobile-pad-bottom:72px;
  --shell-ref-header-gap-mobile:10px;
  --shell-ref-header-bottom-mobile:18px;

  /* Sticky-Offset für Page-internal Sticky-Elemente
     (Layout-Refactor 2026-05-06).
     - v1 Default + v2 Mobile: Topbar-Höhe (56–64px) — sticky relativ zu Body
     - v2 Desktop: 0px — `.shell-main` ist der scroll-container, sticky
       elements kleben direkt am Top der Scroll-Area (= unter Topbar).
     v2-Desktop-Wert wird in _05-shell-v2.css überschrieben. */
  --page-sticky-top:var(--topbar-height);

  /* ── Analyse-Skeleton-Tokens (Sweep CC, 2026-05-06) ──────────────────
     Vorher: hardcoded RGBAs in _50-import-belege-export.css:55-70 ohne
     body.light-Override → Skeleton-Doc-Block blieb dunkel im Light-Mode.
     Refactor: Tokens hier, body.light-Overrides in _10-shell.css. */
  --analysis-skeleton-panel-bg: rgba(8,12,24,.24);
  --analysis-skeleton-doc-bg: rgba(15,20,38,.72);
  /* Schimmer-Tints: --surface-rgba-base ist 255,255,255 (Dark) bzw. 0,0,0 (Light)
     — die Skeleton-Token im body.light-Block überschreiben passend. */
  --analysis-skeleton-row-bg: rgba(var(--surface-rgba-base),.08);
  --analysis-skeleton-row-shimmer: rgba(var(--surface-rgba-base),.09);
  --analysis-skeleton-ledger-bg: rgba(var(--surface-rgba-base),.045);
  --analysis-skeleton-ledger-border: rgba(var(--surface-rgba-base),.08);

  /* Zeiterfassung Cloud-Pro-Gate Scrim (Dark-Default). Light-Wert im
     body.light-Block — vorher Hardcoded-Fallback + Override, jetzt Token
     (analog Skeleton-Tokens, vermeidet die dort dokumentierte
     Light-Mode-Bug-Klasse). */
  --tt-gate-scrim: rgba(12,15,26,.62);

  /* ── Cockpit Hero v3 (PR 2 — Decision D9 + D10, 2026-05-07) ───────── */
  /* Hero-Background-Gradient (--cockpit-hero-bg) — D9: token statt hardcoded.
     Light-Mode-Override im body.light-Block weiter unten. */
  --cockpit-hero-bg: linear-gradient(135deg, #1c2440 0%, #161c30 60%);
  --cockpit-hero-glow: radial-gradient(circle at center, rgba(232,184,75,.10), transparent 60%);
  --tax-surface-hero-bg:linear-gradient(150deg,var(--card2),var(--bg2));
  --tax-surface-hero-glow:radial-gradient(circle at top right,var(--tone-info-bg),transparent 36%);
  --tax-surface-hero-overlay:radial-gradient(circle at 82% 14%,rgba(var(--surface-rgba-base),.05),transparent 18%);
  --tax-surface-hero-border:rgba(var(--surface-rgba-base),.08);
  --tax-surface-hero-radius:var(--radius-hero);
  --tax-surface-hero-padding:34px 30px 26px;
  --tax-surface-hero-padding-tablet:28px 24px 24px;
  --tax-surface-hero-padding-mobile:24px 18px 22px;
  --tax-surface-side-width:360px;
  --tax-surface-badge-gap:7px;
  --tax-surface-badge-fg:rgba(var(--text-rgba-base),.82);
  --tax-surface-badge-padding:6px 10px;
  --tax-surface-badge-dot-size:8px;
  --tax-surface-badge-bg:rgba(var(--surface-rgba-base),.05);
  --tax-surface-badge-border:rgba(var(--surface-rgba-base),.08);
  --tax-surface-figure-gap:4px;
  --tax-surface-figure-size:56px;
  --tax-surface-figure-size-mobile:40px;
  --tax-surface-figure-border-width:3px;
  --tax-surface-figure-border:rgba(var(--surface-rgba-base),.12);
  --tax-surface-figure-border-empty:rgba(var(--surface-rgba-base),.08);

  /* Chart-Linien-Farben (--chart-line-*) — D10: token statt hardcoded.
     Light-Mode-Override im body.light-Block. taxtello-Gelb bleibt unverändert. */
  --chart-line-gewinn: var(--accent);
  --chart-line-einnahmen: var(--green);
  --chart-line-ausgaben: var(--red);
  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
  --chart-line-future-band-dark: rgba(255,255,255,.025);
  --chart-line-future-band-light: rgba(15,23,42,.025);

  /* ── Cockpit Foundation Tokens (NEW — additive, 2026-05-26) ─────────
     Vorbereitung fuer Codex Phase 1: Demo-tier Cockpit-Surfaces sollen
     ein eigenes Sidebar-Token und moderne Alpha-Borders konsumieren
     koennen, ohne den globalen --card/--bg/--border anzufassen. Die
     globale Card-Surface-Migration (#1a2035 -> #131722) ist absichtlich
     in einen separaten Phase-D-Sweep-PR ausgelagert. */
  /* Sidebar-Surface als explizites Token (ersetzt langfristig die
     body.light .shell-sidebar=var(--card)-Overrideregel).
     Phase 2.5 Hotfix 2026-05-27: solid #0f131a (near-black) → #262e50
     (Modern Slate Navy, opaque equivalent von Antigravity rgba(38,48,80,.65)).
     Browser ohne backdrop-filter sehen das solide Slate-Navy als Fallback;
     mit backdrop-filter wird auf rgba via --shell-sidebar-bg-rgb gewechselt.
     Daniel-Befund 2026-05-27: bisheriges #0f131a war "schwarz" statt
     Antigravity-Slate-Navy. */
  --surface-sidebar: #262e50;
  /* Topbar-Surface (Phase 2.5 Antigravity-Port 2026-05-27): eigenes Token,
     damit die Topbar in beiden Themes eine leicht hellere Surface als der
     Page-BG haben kann (Antigravity: hsl(224,25%,5.5%) Dark / #F8FAFC Light).
     Bisher las die Topbar `var(--bg)` direkt — neuer Token erlaubt den
     subtilen Höhen-Unterschied ohne weitere Globals zu shiften. */
  --surface-topbar: hsl(224, 25%, 5.5%);
  /* Stronger accent glow (~0.18 alpha) for active sidebar item background.
     `--accent-soft` (.16) ist zu laut für volle Item-Backplates,
     `--accent-bg-soft` (.05) zu schwach — .18 ist der Antigravity-Wert. */
  --accent-glow-strong: rgba(232, 184, 75, 0.18);
  /* Border-Tint für aktive Sidebar-Items (subtiler Gold-Rand zusätzlich
     zum Indicator-Bar links). Antigravity: rgba(232,184,75,.15). */
  --accent-border-soft: rgba(232, 184, 75, 0.15);
  /* Modern alpha-border (legacy --border bleibt fuer Tabellen unangetastet).
     Bewusste Hardcoded-rgba: das Dark-Token ist alpha-white-on-card, das
     Light-Override (#e2e8f0) ist solid-slate — kein gemeinsamer alpha-Faktor,
     daher kein rgba(var(--surface-rgba-base), .X)-Refactor moeglich. */
  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
  --border-alpha: rgba(255,255,255,0.08);
  /* Drawer/modal transition curve (PR-spezifisch, ergaenzt --tr-fast/base/slow). */
  --tr-drawer: 350ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Hint-Pattern-Family Tokens (NEW for .app-hint) ────────────────
     Konsumiert von public/css/app/_47-app-hint.css und CoreUI.hint().
     Die Family hat drei Varianten: inline, floating (Pille), toast. */
  --hint-bg: var(--card);
  --hint-border: rgba(232, 184, 75, 0.22);
  --hint-radius: 22px;
  --hint-radius-floating: 28px;
  --hint-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
  --hint-icon-color: var(--accent);
  --hint-keyword-color: var(--accent);
  --hint-text-color: var(--text);
  --hint-padding-inline: 14px 18px;
  --hint-padding-floating: 18px 22px;
  --hint-icon-size: 16px;
  --hint-gap: 10px;

  /* ── Toast-Größenklassen (2026-06-04 Vereinheitlichung) ──────────────
     Zentrale Breiten-Decken pro Toast-Typ. Toast/floating-Pillen
     schrumpfen auf Inhalt (max-content), gedeckelt durch die Größenklasse
     → laufen nie über die volle Fläche. Konsumiert von _47-app-hint.css
     (.is-compact/.is-medium/.is-action/.is-wide). */
  --toast-max-compact: 480px;
  --toast-max-medium: 680px;
  --toast-max-action: 920px;
  --toast-max-wide: 960px;
  --toast-padding-x: 22px;
  --toast-padding-y: 18px;
  --toast-radius: 20px;
  --toast-gap: 16px;
  --toast-button-height: 36px;
  --toast-button-padding-x: 14px;
  --toast-button-font-size: var(--fs-base);

  /* ── Hint-Pattern Undo-Toast Tokens (NEW for .app-hint--undo-toast) ──
     Konsumiert von public/css/app/_47-app-hint.css (Variant --undo-toast).
     Timer-Bar laeuft als CSS-Animation (countdown 100% -> 0%) ueber
     --tr-undo-default; Hover/Focus pausiert via animation-play-state. */
  --hint-timer-bar-color: var(--accent);
  --hint-timer-bar-height: 2px;
  --hint-timer-bar-bg: rgba(232, 184, 75, 0.12);
  --hint-undo-position-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  --tr-undo-default: 5000ms;
}

/* Cockpit Hero v3 Light-Mode-Overrides (PR 2 — D9 + D10).
   theme-sync.js's LIGHT_TOKENS_CSS injiziert primitives wie --card/--bg —
   die Composite-Tokens für Cockpit-Hero/Chart bekommen hier ihren
   Light-Wert. Sätze sind höher gesättigt für AA-Kontrast auf weiß. */
html[data-theme="light"], html[data-tx-theme="light"] {
  /* Light-Mode-Override (B11): native UI-Controls (iOS-Select-Popover,
     Scrollbars, Caret) auf light umstellen, damit Picker-Optionen wieder
     dunkle Schrift auf weißem Grund zeigen. */
  color-scheme: light;
  /* Phase M Round 10 (2026-05-27, Daniel-Spec): Light-Mode-Hero auf neutrales
     Slate-Offwhite — Cream/Gold (#f9f6ed + gold-radial) wirkte "wie
     Vanillepudding mit Umsatzsteuer". Hintergrund cool/neutral via Slate-50
     (#f8fafc); permanenter goldener Glow entfernt (none). Dark-Mode bleibt
     dezent gold-getintet. Diese Restaurierung ging beim Integrator-Reconcile
     von PR #2754 verloren (B11-color-scheme-Merge übernahm main's Cream-Seite). */
  --cockpit-hero-bg: linear-gradient(135deg, #ffffff 0%, #f8fafc 80%);
  --cockpit-hero-glow: none;
  --chart-line-gewinn: #b58d2c;
  --chart-line-einnahmen: #0a8f5a;
  --chart-line-ausgaben: #c63a32;
  --tax-surface-hero-bg:linear-gradient(150deg,var(--card),var(--bg3));

  /* Foundation tokens — Light overrides (2026-05-26)
     Phase 2.5 Hotfix 2026-05-27: Sidebar #f8fafc → #ffffff (Antigravity Light
     = pure white). RGB-Tupel für backdrop-filter ebenfalls auf 255,255,255. */
  --surface-sidebar: #ffffff;
  --shell-sidebar-bg-rgb: 255, 255, 255;
  --border-alpha: #e2e8f0;
  --hint-border: rgba(196, 139, 26, 0.28);
  --hint-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  /* Topbar/active-glow Light overrides (Phase 2.5, 2026-05-27)
     Hotfix: #ffffff → #F8FAFC (Antigravity "Cool light grey Topbar"). */
  --surface-topbar: #F8FAFC;
  --accent-glow-strong: rgba(232, 184, 75, 0.10);
  --accent-border-soft: rgba(232, 184, 75, 0.20);
}
/* B11 Hinweis: `color-scheme` ist in :root (dark) und html[data-theme="light"]
   (light) gesetzt — body.light braucht keine eigene Override, weil
   theme-sync.js parallel zum html[data-theme]-Attribut feuert. Ohne separaten
   body.light{color-scheme:…} bleibt der bestehende body.light-Block in
   _10-shell.css unverschattet (Sidebar-Light-Mode-Build-Pin). */
/* stylelint-enable color-no-hex */
*{box-sizing:border-box;margin:0;padding:0;}
.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;}
/* Fachkürzel-Schutz (P2 #17): innerhalb eines uppercase-transformierten
   Labels (z. B. .cockpit-beta-hero-taxlaw, .kpi-label) verhindert diese
   Klasse, dass CSS-Uppercase Kürzel wie "USt"/"EStG" zu "UST"/"ESTG"
   entstellt. Quelltext bleibt korrekt geschrieben ("EStG"), nur die
   Text-Transform wird lokal auf dem Kürzel-Element zurückgesetzt. */
.no-caps{text-transform:none;}
:focus-visible{outline:1.5px solid rgba(232,184,75,.3);outline-offset:2px;}
/* A11y FM3-a: outline:none entfernte den sichtbaren Keyboard-Fokus auf
   Formularfeldern; die einzige Kompensation (_10-shell.css :focus) war ein
   reiner border-color-Wechsel = kein wahrnehmbarer Ring. Ersatz: sichtbarer
   box-shadow-Ring über --accent-focus-ring (auf hell UND dunkel sichtbar).
   Component-spezifische :focus-Regeln (z.B. .kon-modal input:focus) bringen
   ihren eigenen Ring mit; diese globale Regel deckt nur die generische Lücke. */
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:0 0 0 2px var(--accent-focus-ring);}
/* Autofill: Browser-Autofill überschreibt Dark-Mode-Hintergrund — DR-4 */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,
select:-webkit-autofill,textarea:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px var(--bg2) inset!important;
  -webkit-text-fill-color:var(--text)!important;
  caret-color:var(--text);transition:background-color 5000s ease-in-out 0s;
}
body.light input:-webkit-autofill,body.light input:-webkit-autofill:hover,body.light input:-webkit-autofill:focus,
body.light select:-webkit-autofill,body.light textarea:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px var(--card2) inset!important;
  -webkit-text-fill-color:var(--text)!important;
}
/* Phase 2.5 Round-4 2026-05-27: font-smoothing aktivieren — ohne diese
   3 Properties rendert macOS Plus Jakarta Sans im Dark- UND Light-Mode
   merklich fetter als gewünscht. Antigravity-Reference-Spec von Daniel
   2026-05-27 markiert das als "Kritisch!" für die richtige Schrift-
   wahrnehmung. Mit antialiased rendert 600-weight korrekt als Semi-Bold
   statt visuell ~700. text-rendering:optimizeLegibility aktiviert
   kerning + ligatures bei Plus Jakarta Sans. */
body{font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-base);background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
#app{display:flex;flex-direction:column;min-height:100vh;}

/* ═══════════════════════════════════════════════════════════════════════════
   MITOSIS LOADER — Taxtello design-system loading indicator
   ───────────────────────────────────────────────────────────────────────────
   Zwei Kreis-„Zellen" sitzen am selben Mittelpunkt, splitten sich rhythmisch
   nach außen und schnappen wieder zusammen — ein SVG-Gooey-Filter
   (feGaussianBlur + feColorMatrix-Alpha-Threshold) bindet sie mit einer
   weichen, flüssigen Brücke, solange sie auseinanderziehen. Ersetzt den
   früheren Ledger-Rows-Loader an exakt denselben Stellen; Klasse
   `.tx-loading-spinner` bleibt die API-Oberfläche.

   Filter-ID: Die Filter-Definition lebt EINMAL pro Page am App-Root
   (`<svg class="tx-loader-defs">` direkt nach `<body>` in EUER.html +
   admin.html). Alle Loader-Instanzen referenzieren `url(#tx-loader-goo)`.
   Damit kein Per-Instance-ID-Counter im JS nötig ist (SVG-Filter-IDs sind
   document-global).

   Markup-Vorlage (Inline-SVG, kein Asset, kein JS-Init nötig):

     <svg class="tx-loading-spinner" width="32" height="32"
          viewBox="0 0 200 200" aria-hidden="true">
       <g filter="url(#tx-loader-goo)">
         <circle class="tx-loading-spinner__cell tx-loading-spinner__cell--left"
                 cx="100" cy="100" r="22" fill="currentColor"/>
         <circle class="tx-loading-spinner__cell tx-loading-spinner__cell--right"
                 cx="100" cy="100" r="22" fill="currentColor"/>
       </g>
     </svg>

   Theming: --loader-color erbt im Dark-Mode --accent (Taxtello-Gelb).
   Light-Mode-Override unten setzt ihn auf --text (near-black) — analog
   dem Design-Handoff (Dark→Yellow, Light→Black).

   Reduced-Motion: Animation aus, Zellen bleiben am Mittelpunkt verschmolzen
   (visuell ein einzelner Kreis).
   ═══════════════════════════════════════════════════════════════════════════ */

:root{--loader-color:var(--accent);}
/* Hidden filter container — keine Layout-Wirkung dank position:absolute. */
.tx-loader-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none;}
.tx-loading-spinner{display:inline-block;vertical-align:middle;overflow:visible;flex:0 0 auto;color:var(--loader-color);}
.tx-loading-spinner__cell{transform-box:fill-box;transform-origin:center;}
.tx-loading-spinner__cell--left{animation:tx-mitosis-left 1.6s ease-in-out infinite;}
.tx-loading-spinner__cell--right{animation:tx-mitosis-right 1.6s ease-in-out infinite;}
@keyframes tx-mitosis-left{0%,100%{transform:translateX(0) scale(1,1);}50%{transform:translateX(-22px) scale(.85,1);}}
@keyframes tx-mitosis-right{0%,100%{transform:translateX(0) scale(1,1);}50%{transform:translateX(22px) scale(.85,1);}}
/* Light-Mode: Loader folgt der Text-Token-Farbe (near-black auf weiß).
   Drei Selektoren decken die in der Codebase verwendeten Light-Trigger
   ab (theme-sync.js setzt data-theme/data-tx-theme; router/auth toggeln
   body.light). */
body.light,html[data-theme="light"],html[data-tx-theme="light"]{--loader-color:var(--text);}
@media (prefers-reduced-motion: reduce){.tx-loading-spinner__cell{animation:none;}}

/* Bare-span fallback (TxLoader unavailable). When the markup is just an empty
   `<span class="tx-loading-spinner"></span>` (no SVG children), provide a
   visible ring-spinner via pseudo-element so the loader stays functional in
   the fallback path. Gemini HIGH on #2443 — restores visibility for
   public/js/invoice-ui-components.js, public/js/lazy-loader.js. */
span.tx-loading-spinner:empty{position:relative;width:1em;height:1em;}
span.tx-loading-spinner:empty::after{content:"";position:absolute;inset:0;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:tx-loading-spinner-fallback .8s linear infinite;}
@keyframes tx-loading-spinner-fallback{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){span.tx-loading-spinner:empty::after{animation:none;opacity:.6;}}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE WIDTH TOKENS  (Shell v2 PR-1, 2026-05-05)
   ───────────────────────────────────────────────────────────────────────────
   Vier Page-Width-Tokens für die neue Shell. Jede Seite deklariert ihre
   Breite per `data-width="…"` am Page-Root (oder via JS-Setter).

     narrow   720px   Settings-Forms, Auth, Onboarding
     default 1180px   Cockpit, Steuergesundheit, Kontakte, Detail-Seiten
     wide    1440px   Jahresübersicht, Vorjahresvergleich, Berichte,
                      Monatsansicht (Start), Fahrten, Anlageverzeichnis
     full     100%    Belege, Offene Posten, Editoren

   Default = `default`. Bestehende Seiten ohne data-width-Attribut bekommen
   automatisch 1180px. Damit ist die Migration auf das Token-System
   schmerzfrei: setzt eine Seite kein data-width, ändert sich am Layout
   gegenüber heute (1420px max-width) wenig.

   Doku: docs/architecture/SHELL_V2_KONZEPT.md §5
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --page-width-narrow: 720px;
  --page-width-default: 1180px;
  --page-width-wide: 1440px;
  --page-pad-x: 32px;
  --page-pad-x-narrow: 24px;
  --page-pad-x-full: 24px;
}

/* Page-Shell: aktiviert Width-Tokens.
   Wird von der neuen Shell um den Inhalt von #mc gewickelt. */
.page-shell {
  width: 100%;
  margin: 0 auto;
  max-width: var(--page-width-default);
  padding-left: var(--page-pad-x);
  padding-right: var(--page-pad-x);
}

.page-shell[data-width="narrow"] {
  max-width: var(--page-width-narrow);
  padding-left: var(--page-pad-x-narrow);
  padding-right: var(--page-pad-x-narrow);
}

.page-shell[data-width="default"] {
  max-width: var(--page-width-default);
}

.page-shell[data-width="wide"] {
  max-width: var(--page-width-wide);
}

.page-shell[data-width="full"] {
  max-width: none;
  padding-left: var(--page-pad-x-full);
  padding-right: var(--page-pad-x-full);
}

/* Auf Mobile (<768px) verlieren die Page-Shells ihre Max-Width: dort
   gewinnt der Viewport, und der Inner-Padding wird auf den Mobile-Wert
   gedrückt. So wirkt sich das Token-System auf Mobile nicht aus. */
@media (max-width: 768px) {
  .page-shell,
  .page-shell[data-width="narrow"],
  .page-shell[data-width="default"],
  .page-shell[data-width="wide"],
  .page-shell[data-width="full"] {
    max-width: none;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   APP-SHELL v2 — Adaptive Sidebar + neue Topbar
   ───────────────────────────────────────────────────────────────────────────
   2026-05-05 PR-1 (docs/architecture/SHELL_V2_KONZEPT.md)

   Aktiv wenn body[data-shell="v2"]. Default ist v2; ?shell=v1 schaltet auf
   die Legacy-Topbar zurück (1-Zeilen-Hotfix-Notausgang bis PR-4-Cleanup).

   Breakpoints (Plan §2):
     >=1280px   Sidebar expanded (240px) — MacBook = expanded
     1024–1279  Sidebar collapsed (64px Icon-Rail)
     <1024      Drawer (Slide-from-left)

   User-Override-Modi (Plan §4): expanded | collapsed | auto.
   Modus wird in body[data-shell-sidebar="…"] gespiegelt; CSS reagiert auf
   das Attribut (statt direkt auf Viewport — so übersteuert User-Wahl).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Mode-Scoping (Codex-Review 2026-05-05 P1-1) ─────────────────────────
   Default ist v2. Aber wenn ?shell=v1 oder data-shell="v1" gesetzt ist,
   muss v2-Markup komplett verschwinden — sonst rendern beide Shells
   parallel und der Hotfix-Notausgang liefert eine doppelte Navigation.

   Strategie: alle v2-Elemente sind per Default NICHT sichtbar, und nur
   unter body[data-shell="v2"] werden sie zur Layout-Komponente. Damit
   ist v1-Fallback strukturell isoliert. */
[data-shell-v2],
.shell-drawer-backdrop {
  display: none !important;
}

/* Bei v2: Legacy-Topbar + Legacy-Mob-FS verstecken, v2-Markup wieder anzeigen. */
body[data-shell="v2"] > #app > .topbar { display: none !important; }
body[data-shell="v2"] > #app > .mob-fs { display: none !important; }
body[data-shell="v2"] .shell-sidebar[data-shell-v2] { display: flex !important; }
body[data-shell="v2"] header.shell-topbar[data-shell-v2] { display: flex !important; }
body[data-shell="v2"] .shell-drawer-backdrop { display: block !important; }

/* Heutiger Quick-Stats-FAB unten rechts — kollidiert mit „+ Beleg erfassen"
   Topbar-CTA. In v2 versteckt; Stats-Panel ist in PR-3 vorgesehen, aktuell
   wird der Toggle nur ausgeblendet, der Code bleibt aber arbeitsfähig. */
body[data-shell="v2"] #qs-toggle,
body[data-shell="v2"] #qs-panel { display: none !important; }

/* ── App-Shell-Layout v2 (Layout-Refactor 2026-05-06) ───────────────────
   Desktop ≥1024px: Body fixed full-height, kein body-scroll. `.shell-main`
   ist die einzige Scroll-Area. Sidebar + Topbar sind Grid-Items, brauchen
   kein `position: sticky` mehr.

   Mobile <1024px: Body scrollt weiter (Webseiten-Pattern), Topbar bleibt
   sticky relativ zu Body. Damit ändert sich Mobile-UX nicht.

   Page-internal Sticky-Elemente (page-filter-bar, sett-sidebar etc.)
   nutzen --page-sticky-top, das in v2-Desktop auf 0px kippt (sticky relativ
   zu .shell-main = direkt unter Topbar) und in v2-Mobile bei Topbar-Höhe
   bleibt (sticky relativ zu Body = unter sticky-Topbar). v1 nutzt das
   default --page-sticky-top: var(--topbar-height) (= 64px). */

body[data-shell="v2"] {
  /* Fixed full-height, single-scroll-container (Desktop). */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  /* v2-Desktop: Sticky-Elemente kleben am .shell-main-Top (= unter Topbar). */
  --page-sticky-top: 0px;
}

body[data-shell="v2"] #app {
  display: grid;
  grid-template-columns: var(--shell-sidebar-w-current, var(--shell-sidebar-w-expanded)) 1fr;
  grid-template-rows: var(--shell-topbar-h) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  height: 100%;
  min-height: 0;
}

/* Mit Page-Sub-Header: zusätzliche Zeile zwischen Topbar und Main.
   Aktiviert über `body[data-shell-subheader]` (Wildcard-Attribut-Selektor)
   durch shell.js. PR-3 (2026-05-06) führte den Slot ursprünglich nur für
   Months-Bar ein (`="months"`); Refresh II (2026-05-09) erweiterte die
   Selektoren auf Wildcard für künftige Subheader-Modi — aktuell nutzt
   shell.js den Slot ausschließlich für Monatsseiten („months"). */
body[data-shell="v2"][data-shell-subheader] #app {
  grid-template-rows: var(--shell-topbar-h) auto 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar subheader"
    "sidebar main";
}

/* Mobile <1024px: Body scrollt weiter, kein Fixed-App-Shell. */
@media (max-width: 1023px) {
  body[data-shell="v2"] {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
    /* `overflow-x:hidden` promotes overflow-y to auto in Chromium/WebKit and
       breaks sticky positioning for the grid-row Topbar. `clip` prevents
       horizontal bleed without turning body into a scroll container. */
    overflow-x: clip;
    /* Mobile: Sticky relativ zu Body, also Offset = Topbar-Höhe inkl. iOS/PWA-Safe-Area. */
    --page-sticky-top: var(--shell-mobile-topbar-h);
  }
  body[data-shell="v2"] #app {
    grid-template-columns: 1fr;
    grid-template-rows: var(--shell-mobile-topbar-h) 1fr;
    grid-template-areas:
      "topbar"
      "main";
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
  }
  body[data-shell="v2"][data-shell-subheader] #app {
    grid-template-rows: var(--shell-mobile-topbar-h) auto 1fr;
    grid-template-areas:
      "topbar"
      "subheader"
      "main";
  }
}

/* ── Topbar v2 ──────────────────────────────────────────────────────────── */
/* Layout-Refactor 2026-05-06: kein `position: sticky` mehr auf Desktop —
   die Topbar ist eine Grid-Row und liegt deshalb dauerhaft am Top, weil
   nur `.shell-main` scrollt. Auf Mobile (<1024px) bleibt body-scroll
   aktiv → sticky-Mode wird unten wieder aktiviert. */
.shell-topbar {
  grid-area: topbar;
  /* Stacking-Fix 2026-05-18: z=1000 auf ALLEN Viewports (vorher nur Desktop
     via @media min-width:1024). Auf Mobile blieb die Topbar auf
     var(--z-topbar)=70 → der fixed-positionierte Dropdown-Subtree
     (Neu/Hilfe/Konto/Glocke, intern z=1300) war im Topbar-Stacking-Context
     gefangen und verschwand hinter `.page-filter-bar` (z=90) /
     `.sort-drop` (z=300). 1000 liegt über allem Page-Content (max ~300),
     aber unter Drawer-Backdrop (--z-drawer-backdrop=1050) und Drawer
     (--z-drawer=1060), die die Topbar bei offenem Mobile-Menü weiterhin
     überdecken. */
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: 100vw;
  /* Live-Smoke 2026-05-06: `overflow: hidden` (eingeführt mit b9615e78
     für Settings-Layout) clippte alle absolute-positioned Dropdowns
     (Avatar/Konto, Quick-Create aus PR #1506). Asymmetrisch auflösen:
     X-Axis weiterhin clippen (Tenant-Label-Overflow auf schmalen
     Desktops), Y-Axis offen lassen, damit Dropdowns nach unten
     entkommen können. `overflow-x: clip; overflow-y: visible` ist
     spec-konform und nicht durch die hidden→auto-Promotion-Regel
     betroffen (anders als overflow-x: hidden). */
  overflow-x: clip;
  overflow-y: visible;
  padding: 0 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  height: var(--shell-topbar-h);
}
@media (max-width: 1023px) {
  .shell-topbar {
    position: sticky;
    top: 0;
    height: var(--shell-mobile-topbar-h);
    padding-top: env(safe-area-inset-top, 0px);
  }
}
/* z-index der Topbar wird jetzt unconditional in der Base-Rule gesetzt
   (siehe Stacking-Fix-Kommentar dort). Modal/Toast/Tooltip (1100/1200/1300)
   überlagern weiterhin korrekt; Drawer-Backdrop/Drawer (1050/1060) decken
   die Topbar bei offenem Mobile-Menü weiterhin ab. */
.shell-topbar-burger {
  /* Plan v4 §1: Hamburger ist IMMER sichtbar in Topbar.
     - Desktop ≥1024: togglet Sidebar expanded ↔ collapsed (Shell.toggleSidebar)
     - Mobile  <1024: öffnet Drawer (Shell.toggleDrawer)
     Routing in shell.js handleHamburger().
     Live-Smoke 2026-05-06: vorher versteckter Default + Mobile-Override
     → unsichtbar auf Desktop, kein Sidebar-Toggle möglich. */
  background: transparent;
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.shell-topbar-burger:hover { background: var(--shell-sidebar-item-hover); }

/* Touch-Target-Floor (WCAG 2.5.5 / Apple HIG 44×44px) auf coarse Pointern.
 * WebKit-Render-Audit (iPhone 13, ergänzend zu PR #3721): der Topbar-Burger
 * maß 36×36px. Reiner Icon-Button → feste 44×44 ist visuell ok. */
@media (pointer: coarse) {
  .shell-topbar-burger {
    width: 44px;
    height: 44px;
  }
}

/* Mobile <600px (User-Feedback 2026-05-06): Topbar war auf 390px-Viewport
   überfüllt — Theme-Toggle wurde abgeschnitten. Auf schmalen Mobile-
   Viewports nur ≡ Burger, Logo, CTA, Theme-Toggle, Avatar zeigen.
   Mandant ist read-only (Info im Drawer-Footer geplant), Suche + Notif
   wandern in den Drawer-Footer in PR-B. Theme-Toggle bleibt sichtbar,
   weil User Hell/Dunkel-Wechsel sofort sehen will. */
@media (max-width: 599px) {
  /* 2026-05-18: `.shell-notif-wrap` NICHT mehr ausblenden. Die Glocke war
     auf Mobile komplett versteckt → das fertige Mobile-Notification-Sheet
     (notifications.js _openSheet, <dialog showModal>) war unerreichbar,
     es gibt keinen Drawer-Footer-Ersatz. Suche bleibt versteckt (⌘K +
     Such-Overlay decken den Flow ab). */
  body[data-shell="v2"] .shell-topbar-tenant,
  body[data-shell="v2"] .shell-topbar [data-action="shell-open-search"] {
    display: none !important;
  }
  body[data-shell="v2"] .shell-topbar {
    gap: 8px;
    padding: env(safe-area-inset-top, 0px) 12px 0;
  }
}

.shell-topbar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
/* User-Feedback 2026-05-06: Logo war "fast etwas klein" auf Mobile + Desktop.
   Topbar (Mobile-Drawer-Mode) bumped 16px → 20px. Sidebar-Wordmark
   (separater Selector unten) ebenfalls 16/18px → 20/22px. SaaS-Industrie-
   Standard für Topbar-Logos liegt bei 22-28px; 20px ist konservativer
   Mittelwert ohne Layout-Risiko in der schmalen <600px-Topbar.
   `width: auto` ist Pflicht: das `<img>` hat HTML-Attribute `width="73"
   height="16"`. Setzt CSS nur die Höhe, behält das Bild seine 73px Breite
   und wird vertikal gestreckt — Brand-Verzerrung (User-Feedback 2026-05-06). */
.shell-topbar-logo img { height: 20px; width: auto; display: block; }

/* User-Feedback 2026-05-06: Topbar-Logo nur sichtbar im Drawer-Mode
   (<1024px). Auf Desktop trägt die Sidebar das Logo — sonst doppeltes
   Wordmark nebeneinander. */
.shell-topbar-logo--mobile-only { display: none; }
@media (max-width: 1023px) {
  .shell-topbar-logo--mobile-only { display: flex; }
}

/* Mandant-Switch (Platzhalter — echte Logic in PR-2/3) */
.shell-topbar-tenant {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-base);
  cursor: pointer;
  white-space: nowrap;
}
.shell-topbar-tenant:hover { background: var(--shell-sidebar-item-hover); }
.shell-topbar-tenant svg { color: var(--text2); }

.shell-topbar-spacer { flex: 1; min-width: 0; }

/* User-Feedback 2026-05-06: Such-Bar (wide-Form-Field) wurde durch
   einen reinen Icon-Button ersetzt — siehe `.shell-topbar-icon-btn[
   data-action="shell-open-search"]`. Die alten Such-Klassen bleiben
   nur noch für Legacy-Compat (falls woanders referenziert). */
.shell-topbar-search,
.shell-topbar-search-kbd {
  display: none !important;
}

/* Topbar-Icon-Button (Suche, Notif, Theme-Toggle) */
.shell-topbar-icon-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 0;
  color: var(--text2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* background-COLOR (nicht die background-Shorthand) — sonst würde das
   background-clip:padding-box aus _05d (kleinerer 32px-Hover-Kreis) auf
   border-box zurückgesetzt und der Hover füllte die vollen 40px. */
.shell-topbar-icon-btn:hover { background-color: var(--shell-sidebar-item-hover); color: var(--text); }
.shell-topbar-icon-btn[aria-expanded="true"] { background-color: var(--shell-sidebar-item-hover); color: var(--text); }

/* Theme-Toggle (User-Feedback 2026-05-06): Sonne wenn Dark aktiv (Klick
   wechselt zu Light), Mond wenn Light aktiv. Steuerung via body.light-
   Klasse — kein zusätzliches data-theme-Attribut nötig, weil body.light
   die kanonische Source-of-Truth aus _10-shell.css ist. */
.shell-theme-icon { display: none; }
.shell-theme-icon--sun { display: block; }                /* Default = Dark-Mode */
body.light .shell-theme-icon--sun { display: none; }      /* Light: Sonne weg */
body.light .shell-theme-icon--moon { display: block; }    /* Light: Mond zeigen */

/* Notification-Dropdown-Panel (Empty-State PR-1) */
.shell-notif-wrap { position: relative; }
.shell-notif-panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: min(92vw, 460px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 16px;
  z-index: var(--z-tooltip);
  display: none;
}
.shell-notif-wrap.open .shell-notif-panel { display: block; }
.shell-notif-empty {
  text-align: center;
  padding: 24px 8px;
  color: var(--text3);
  font-size: var(--fs-base);
}
.shell-notif-empty-icon { margin-bottom: 8px; color: var(--text3); opacity: .6; }

/* Quick-Create CTA */
.shell-topbar-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: var(--radius-sm);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--tr-fast);
}
.shell-topbar-cta:hover { background: var(--accent3); }
.shell-topbar-cta-icon { font-size: 16px; line-height: 1; font-weight: var(--fw-bold); }
@media (max-width: 600px) {
  .shell-topbar {
    gap: 6px;
    padding: env(safe-area-inset-top, 0px) 10px 0;
  }
  .shell-topbar-tenant,
  .shell-topbar-icon-btn[data-action="shell-open-search"] {
    display: none;
  }
  .shell-topbar-cta { padding: 8px 10px; }
}

/* Avatar / Konto-Dropdown */
.shell-topbar-avatar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text);
  cursor: pointer;
  font-size: var(--fs-base);
}
.shell-topbar-avatar:hover { background: var(--shell-sidebar-item-hover); }
.shell-avatar-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: var(--fw-bold);
}
.shell-avatar-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.shell-avatar-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: 240px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: var(--z-tooltip);
  display: none;
}
.shell-avatar-wrap { position: relative; }
.shell-avatar-wrap.open .shell-avatar-menu { display: block; }
.shell-avatar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  text-align: left;
  color: var(--text);
  font-size: var(--fs-base);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
}
.shell-avatar-item:hover { background: var(--shell-sidebar-item-hover); }
.shell-avatar-sep { height: 1px; background: var(--border); margin: 4px 0; }
.shell-avatar-logout { color: var(--red); }

/* Sehr kleine Phones (<375px): globale Hilfe bleibt erreichbar, nimmt aber
   keinen eigenen Topbar-Slot mehr ein. Konto-Menü zeigt dann Mobile-Hilfe-
   Items; + Neu, Theme und Konto bleiben direkt sichtbar. Diese Regeln müssen
   NACH `.shell-avatar-item { display:flex }` stehen, sonst gewinnt die
   Basiskaskade und die Mobile-Hilfe ist auf allen Viewports sichtbar. */
.shell-avatar-item--mobile-help {
  display: none;
}
@media (max-width: 374px) {
  body[data-shell="v2"] .shell-help-wrap {
    display: none !important;
  }
  body[data-shell="v2"] .shell-avatar-item--mobile-help {
    display: flex;
  }
}

/* ── Mandant read-only (PR-B 2026-05-06, User-Wahl Variante A) ──────────
   Ehemals Button mit Chevron — jetzt `<a>` ohne Chevron, klar als Link
   zu /einstellungen erkennbar. */
a.shell-topbar-tenant {
  text-decoration: none;
  font-weight: var(--fw-medium);
}
a.shell-topbar-tenant:hover {
  background: var(--shell-sidebar-item-hover);
  border-color: var(--border2);
  text-decoration: none;
}

/* ── Notification-Badge (PR-B 2026-05-06) ────────────────────────────────
   Sichtbar wenn unreadCount > 0. shell.js togglet hidden + setzt textContent. */
.shell-notif-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--red);
  color: rgb(255, 255, 255);
  border-radius: 8px;
  font-size: 10px;
  font-weight: var(--fw-bold);
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}
.shell-notif-badge[hidden] { display: none !important; }

/* ── Generisches Dropdown-Item (Quick-Action + Hilfe) ───────────────────
   Geteilte Struktur, keine Code-Duplikation. */
.shell-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  text-align: left;
  color: var(--text);
  font-size: var(--fs-base);
  font-family: inherit;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.shell-dropdown-item:hover {
  background: var(--shell-sidebar-item-hover);
  text-decoration: none;
}
/* User-Feedback 2026-05-06: Quickaction-Dropdown Light+Dark prüfen.
   Tab-Navigation hatte nur Browser-Default-Outline (kaum sichtbar in Light-
   Mode). Expliziter Focus-Ring + Hintergrund-Hervorhebung — konsistent zu
   anderen `:focus-visible`-Patterns in der App (vgl. .shell-sidebar-brand). */
.shell-dropdown-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: var(--shell-sidebar-item-hover);
}
.shell-dropdown-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text2);
  flex-shrink: 0;
}
.shell-dropdown-item:hover .shell-dropdown-icon,
.shell-dropdown-item:focus-visible .shell-dropdown-icon {
  color: var(--text);
}
.shell-dropdown-label { flex: 1; min-width: 0; }

/* ── Quick-Action „+ Neu" Dropdown (PR-B 2026-05-06) ────────────────────── */
.shell-quickaction-wrap { position: relative; }
.shell-quickaction-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: var(--z-tooltip);
  display: none;
}
.shell-quickaction-wrap.open .shell-quickaction-menu { display: block; }

/* ── Hilfe-Dropdown (PR-B 2026-05-06) ────────────────────────────────── */
.shell-help-wrap { position: relative; }
.shell-help-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: var(--z-tooltip);
  display: none;
}
.shell-help-wrap.open .shell-help-menu { display: block; }

/* ── Mobile-Overrides für Topbar-Dropdowns (≤600px) ─────────────────────
   Live-Smoke 2026-05-06 (PR #1533): Diese @media-Regeln müssen NACH den
   Base-Rules stehen (avatar L364, quickaction L494, help L511), sonst
   verlieren sie bei gleicher Specificity gegen die später deklarierten
   Base-Rules — Folge: `position: absolute; right: 0` aus Base wird auf
   Mobile NICHT durch `position: fixed; right: 10px` aus Mobile überschrieben,
   das Dropdown landet links über dem Viewport-Rand abgeschnitten.
   Symptom vor Fix (Live, viewport 390px): Quickaction-Menu hatte
   computed `position: absolute; left: -200px` statt fixed/right:10px. */
@media (max-width: 600px) {
  .shell-topbar-avatar {
    gap: 5px;
    padding: 4px 7px 4px 4px;
  }
  /* Konto-Label auf Mobile verstecken — User-Feedback 2026-05-06:
     "Auf dem Desktop ok, mobil nimmt es zu viel Platz. Nur Initialien
      sind dort genug." Initial-Kreis (.shell-avatar-circle) + Chevron
     bleiben sichtbar; Klick öffnet weiterhin das Konto-Dropdown. */
  .shell-avatar-label {
    display: none;
  }
  .shell-avatar-menu {
    position: fixed;
    top: calc(var(--shell-mobile-topbar-h) + 6px);
    right: 10px;
    width: min(260px, calc(100vw - 20px));
  }
  .shell-quickaction-menu,
  .shell-help-menu {
    position: fixed;
    top: calc(var(--shell-mobile-topbar-h) + 6px);
    right: 10px;
    width: min(260px, calc(100vw - 20px));
    min-width: 0;
  }
}

/* ── Mobile + Page-Subheader: Dropdowns bleiben am Trigger-Button ────────
   2026-05-06 (User-Feedback): die ehemalige Override-Regel, die Dropdowns
   bei `data-shell-subheader="months"` um die Subheader-Höhe nach unten
   schob, wurde entfernt. User: „die Menüs rutschen zu weit nach unten
   (durch die extra Zeile)". Dropdowns bleiben jetzt nahe am Trigger-Button
   (Top-Offset = `--shell-topbar-h + 6px`, wie auf Subheader-freien Seiten).
   Sie ragen visuell auf die Months-Bar — z-index 1300 hält sie über allem
   Page-Content, also funktional korrekt. */

/* ── Schnellzugriff-Overlay / Command-Palette (PR-B 2026-05-06) ──────── */
.shell-search-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(15vh, 60px) 16px 16px;
}
.shell-search-overlay[hidden] { display: none !important; }
.shell-search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}
.shell-search-modal {
  position: relative;
  width: 100%;
  /* Unified global search (2026-06-05): roomier than the old 560px palette so
     grouped results, descriptions and the inline answer panel breathe. */
  max-width: 920px;
  max-height: min(720px, calc(100vh - 96px));
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
/* Mobile: full-width with a small inset; header/input + footer stay put, only
   the results / answer panel scroll (keyboard must not break the modal). */
@media (max-width: 600px) {
  .shell-search-overlay { padding: 12px; align-items: flex-start; }
  .shell-search-modal { max-width: 100%; max-height: calc(100dvh - 24px); }
}
.shell-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.shell-search-input-icon { color: var(--text2); flex-shrink: 0; }
.shell-search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--text);
  font-size: var(--fs-md);
  font-family: inherit;
  padding: 0;
}
/* A11y FM3-b: .shell-search-input setzt outline:0 ohne Focus-Ersatz. Bei
   Keyboard-Fokus jetzt sichtbarer Ring über --accent-focus-ring, konsistent
   zur globalen Input-Focus-Regel (FM3-a). */
.shell-search-input:focus-visible { box-shadow: 0 0 0 2px var(--accent-focus-ring); border-radius: var(--radius-sm, 6px); }
.shell-search-input::placeholder { color: var(--text3); }
/* ── X-Close button (search palette) ──────────────────────── */
.shell-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text2);
  cursor: pointer;
  transition: color 0.1s, background 0.1s;
}
.shell-search-clear:hover { background: var(--shell-sidebar-item-hover); color: var(--text); }
.shell-search-clear:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (max-width: 600px) {
  .shell-search-clear { min-height: 44px; min-width: 44px; width: 44px; height: 44px; }
}
.shell-search-esc {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text3);
  flex-shrink: 0;
}
.shell-search-results {
  flex: 1;
  overflow-y: auto;
  padding: 8px 6px;
  min-height: 100px;
}
.shell-search-section-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 10px 10px 4px;
}
.shell-search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  text-align: left;
  color: var(--text);
  font-size: var(--fs-base);
  font-family: inherit;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
}
.shell-search-item:hover,
.shell-search-item.highlighted {
  background: var(--shell-sidebar-item-hover);
}
.shell-search-item-icon {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text2); flex-shrink: 0;
}
.shell-search-item-label { flex: 1; min-width: 0; }
.shell-search-item-kind {
  font-size: var(--fs-xs);
  color: var(--text3);
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
/* ── Invoice search result item ────────────────────────────── */
.shell-search-item--invoice { align-items: flex-start; padding: 8px 12px; }
.shell-search-item--invoice .shell-search-item-icon { margin-top: 2px; }
.shell-search-item--invoice .shell-search-item-label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.shell-search-item-primary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-base);
  color: var(--text);
  min-width: 0;
}
.shell-search-item-primary-num {
  font-weight: var(--fw-semibold);
  flex-shrink: 0;
}
.shell-search-item-primary-cust {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text2);
}
.shell-search-item-secondary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--text3);
  flex-wrap: nowrap;
  min-width: 0;
}
.shell-search-item-secondary-amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text2);
}
/* Reuse tx-invoice-status-badge inside palette results */
.shell-search-item-secondary .tx-invoice-status-badge {
  font-size: var(--fs-xs);
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
}
/* ── Loading state ──────────────────────────────────────────── */
.shell-search-loading {
  padding: 16px;
  text-align: center;
  color: var(--text3);
  font-size: var(--fs-sm);
}
.shell-search-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--text3);
  font-size: var(--fs-base);
}
.shell-search-footer {
  border-top: 1px solid var(--border);
  padding: 8px 16px;
  background: var(--bg2);
}
.shell-search-hint {
  font-size: var(--fs-xs);
  color: var(--text3);
}
@media (max-width: 600px) {
  .shell-search-overlay { padding: 8vh 8px 8px; }
  .shell-search-modal { max-height: calc(100vh - 16vh); }
}

/* ── Tastenkürzel-Modal (PR-B 2026-05-06) ────────────────────────────── */
.shell-shortcuts-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.shell-shortcuts-overlay[hidden] { display: none !important; }
.shell-shortcuts-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.shell-shortcuts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.shell-shortcuts-header h2 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.shell-shortcuts-close {
  width: 28px; height: 28px;
  border: 0; background: transparent; border-radius: var(--radius-sm);
  color: var(--text2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.shell-shortcuts-close:hover { background: var(--shell-sidebar-item-hover); color: var(--text); }
.shell-shortcuts-list {
  list-style: none;
  margin: 0;
  padding: 12px 18px 18px;
}
.shell-shortcuts-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: var(--fs-base);
}
.shell-shortcuts-list li:last-child { border-bottom: 0; }
.shell-shortcuts-list kbd {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  padding: 2px 6px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  min-width: 24px;
  text-align: center;
}
.shell-shortcuts-list span { flex: 1; color: var(--text2); }

/* ── Light-Mode-Tweaks (PR-B Audit 2026-05-06) ──────────────────────────
   Die Token-Vererbung deckt das meiste ab. Diese Overrides nur für
   Backdrop-Opazitäten + spezifische rgba-Werte die im Light-Mode subtiler
   wirken müssen. */
body.light .shell-search-backdrop {
  background: rgba(0, 0, 0, 0.35);
}
body.light .shell-search-input::placeholder {
  color: var(--text3);
}
/* Notif-Badge: nutzt var(--red) für Background — Light-Mode-Override
   kommt automatisch aus body.light-Token-Block. Color bleibt
   rgb(255,255,255) (weiß) in beiden Modi für Kontrast auf rot. */

/* ── Sidebar v2 ─────────────────────────────────────────────────────────── */
/* Sidebar 2026-05-06: Grid-Item, volle Grid-Höhe. Body ist fixed full-height,
   nur `.shell-main` scrollt, Sidebar bleibt sichtbar. Mobile-Drawer-Mode
   überschreibt das mit `position: fixed` weiter unten. */
.shell-sidebar {
  grid-area: sidebar;
  height: 100%;
  /* Phase 2 AppShell 2026-05-26: solid sidebar surface as default — works on
     every browser, no blur. Hotfix-Round 2026-05-26 (Codex-Review-Finding):
     when the browser supports backdrop-filter, we switch the background to a
     translucent variant so the blur is actually visible (previously the blur
     was being applied to an opaque background, making it visually inert). */
  background: var(--shell-sidebar-bg);
  border-right: 1px solid var(--shell-sidebar-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: var(--z-sidebar);
}
@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
  .shell-sidebar {
    background: rgba(var(--shell-sidebar-bg-rgb), 0.72);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
}
/* Sidebar-Header (Logo + Collapse-Toggle). Logo links, Toggle direkt
   daneben mit gap; Spacer zieht alles links zusammen. */
.shell-sidebar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--shell-sidebar-border);
  height: var(--shell-topbar-h);
  flex-shrink: 0;
}
/* Sidebar-Brand: einziger Inhalt im Header, kein Toggle/Pfeil daneben. Brand-
   Anker führt zum Cockpit; swap Wordmark↔T-Mark je expand/collapsed-Mode. */
.shell-sidebar-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  /* Outline für Tastatur-Focus, ohne Layout-Shift */
  outline-offset: 2px;
}
.shell-sidebar-brand:focus-visible {
  outline: 2px solid var(--accent);
}
/* Wordmark-Höhe: Desktop 20px (Mobile-Sidebar bumpt zusätzlich auf 22px,
   siehe @media max-width:1023px unten). `width: auto` Pflicht — sonst
   stretcht HTML-Attribut `width="73"` das Logo bei Höhen-Bump. */
.shell-sidebar-brand-wordmark {
  height: 20px;
  width: auto;
  display: block;
}
/* Brand-Mark (T-Logo): nur im collapsed-Mode auf Desktop sichtbar.
   Default versteckt — die collapsed-Mode-Regeln unten swappen Wordmark
   gegen Mark via display-Toggle. */
.shell-sidebar-brand-mark {
  display: none;
  flex-shrink: 0;
}

/* Drawer-Close-Button (User-Feedback 2026-05-11 reactivated): explizites
   X-Schließ-Control rechts im Drawer-Header. „X" ist die mentale Convention
   für „schließen" — der Sidebar-Burger links toggelt zwar auch, aber User
   suchen das X rechts. Per CSS nur auf Mobile (<1024px) sichtbar; auf Desktop
   übernimmt der Sidebar-Burger expanded↔collapsed via handleHamburger().
   `margin-left: auto` schiebt den Button an die rechte Header-Kante. */
.shell-sidebar-close {
  display: none;
  width: 36px;
  height: 36px;
  margin-left: auto;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 0;
  color: var(--text2);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.shell-sidebar-close:hover { background: var(--shell-sidebar-item-hover); color: var(--text); }
.shell-sidebar-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (max-width: 1023px) {
  .shell-sidebar-close { display: inline-flex; }
}
/* Touch-Target-Floor (WCAG 2.5.5 / Apple HIG 44×44px) auf coarse Pointern.
 * WebKit-Render-Audit (iPhone 13, ergänzend zu PR #3721): der Sidebar-Close
 * maß 36×36px. Reiner Icon-Button → feste 44×44 ist visuell ok. Nur width/
 * height — das display bleibt vom max-width-Block oben gesteuert. */
@media (pointer: coarse) {
  .shell-sidebar-close {
    width: 44px;
    height: 44px;
  }
}

/* Sidebar Body (scrollable Mitte) */
.shell-sidebar-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 8px;
  scrollbar-width: thin;
}
.shell-sidebar-body::-webkit-scrollbar { width: 4px; }
.shell-sidebar-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* Gruppe + Section-Label */
.shell-sidebar-group { margin-bottom: 6px; }
.shell-sidebar-group-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 8px 10px 6px;
}

/* Sidebar-Item (Link/Button) */
.shell-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: background var(--tr-fast), color var(--tr-fast);
}
.shell-sidebar-item:hover { background: var(--shell-sidebar-item-hover); }
.shell-sidebar-item.active {
  background: var(--shell-sidebar-item-active-bg);
  color: var(--shell-sidebar-item-active-fg);
  font-weight: var(--fw-semibold);
}
.shell-sidebar-item.active::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--shell-sidebar-item-active-bar);
  border-radius: 0 2px 2px 0;
}
.shell-sidebar-item-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text2);
}
.shell-sidebar-item.active .shell-sidebar-item-icon { color: var(--shell-sidebar-item-active-fg); }
.shell-sidebar-item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shell-sidebar-item-badge {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  background: var(--accent-soft);
  color: var(--accent);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.shell-sidebar-item-meta {
  font-size: var(--fs-xs);
  color: var(--text3);
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
/* Refresh XVI 2026-05-11: Indicator-Dot für Parent-Items mit offenen
   Hinweisen (z.B. Steuergesundheit → offene Prüfen-Issues vorhanden,
   aber Numeric-Badge bleibt beim Sub-Item „Prüfen"). User-Wunsch: kein
   doppeltes 999+-Badge auf Parent + Sub. */
.shell-sidebar-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
/* Aktiver Parent: dezenter Ring um den Dot, damit er sich vom
   accent-soft Hintergrund abhebt. */
body[data-shell="v2"] .shell-sidebar-item.active .shell-sidebar-item-dot {
  box-shadow: 0 0 0 2px var(--shell-sidebar-item-active-bg);
}
/* Collapsed-Mode (64px Sidebar): Dot wird Marker oben rechts auf dem
   Icon (sonst geht er beim center-aligned Item verloren). */
body[data-shell-sidebar="collapsed"] .shell-sidebar-item-dot {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 6px;
  height: 6px;
}
@media (min-width: 1024px) and (max-width: 1279px) {
  body[data-shell-sidebar="auto"] .shell-sidebar-item-dot {
    position: absolute;
    top: 8px;
    right: 12px;
    width: 6px;
    height: 6px;
  }
}

/* Sidebar-Footer (Export / Settings / Hilfe & Support) */
.shell-sidebar-footer {
  border-top: 1px solid var(--shell-sidebar-border);
  padding: 8px;
  flex-shrink: 0;
}
.shell-sidebar-footer .shell-sidebar-item { color: var(--text2); }
.shell-sidebar-footer .shell-sidebar-item:hover { color: var(--text); }

/* ── Collapsed-Mode (64px Icon-Rail) ────────────────────────────────────── */
body[data-shell-sidebar="collapsed"] {
  --shell-sidebar-w-current: var(--shell-sidebar-w-collapsed);
}
/* Sidebar-Brand im collapsed-Mode (User-Feedback 2026-05-06): Wordmark
   versteckt, kompaktes T-Mark als Brand-Anker sichtbar. Vorher (Sweep PP):
   Logo komplett versteckt → leerer Header. Jetzt: T-Mark zentriert,
   Klick → Cockpit (data-action="shell-nav" data-view="dashboard"). */
body[data-shell-sidebar="collapsed"] .shell-sidebar-brand-wordmark { display: none; }
body[data-shell-sidebar="collapsed"] .shell-sidebar-brand-mark { display: block; }
body[data-shell-sidebar="collapsed"] .shell-sidebar-header {
  justify-content: center;
  padding: 14px 8px;
}
body[data-shell-sidebar="collapsed"] .shell-sidebar-group-label { display: none; }
body[data-shell-sidebar="collapsed"] .shell-sidebar-item-label,
body[data-shell-sidebar="collapsed"] .shell-sidebar-item-badge,
body[data-shell-sidebar="collapsed"] .shell-sidebar-item-meta {
  display: none;
}
body[data-shell-sidebar="collapsed"] .shell-sidebar-item {
  justify-content: center;
  padding: 10px;
}
body[data-shell-sidebar="collapsed"] .shell-sidebar-item.active::before {
  left: 0;
  top: 4px;
  bottom: 4px;
}
body[data-shell-sidebar="collapsed"] .shell-sidebar-body { padding: 12px 8px; }
body[data-shell-sidebar="collapsed"] .shell-sidebar-group { margin-bottom: 2px; }

/* Tooltip im Collapsed-Mode (Hover-Verzögerung 300ms via JS opacity) */
.shell-sidebar-tooltip {
  position: fixed;
  z-index: var(--z-tooltip);
  background: var(--card);
  color: var(--text);
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  box-shadow: var(--shadow-sm);
}
.shell-sidebar-tooltip.visible { opacity: 1; }

/* ── Auto-Mode an Breakpoint koppeln (nur wenn User noch nichts gewählt) ── */
@media (min-width: 1280px) {
  body[data-shell-sidebar="auto"] {
    --shell-sidebar-w-current: var(--shell-sidebar-w-expanded);
  }
}
@media (max-width: 1279px) and (min-width: 1024px) {
  body[data-shell-sidebar="auto"] {
    --shell-sidebar-w-current: var(--shell-sidebar-w-collapsed);
  }
  /* Auto-Mode (1024-1279px = collapsed): Wordmark raus, T-Mark rein,
     gleiche Logik wie explizit-collapsed. Header bleibt zentriert. */
  body[data-shell-sidebar="auto"] .shell-sidebar-brand-wordmark { display: none; }
  body[data-shell-sidebar="auto"] .shell-sidebar-brand-mark { display: block; }
  body[data-shell-sidebar="auto"] .shell-sidebar-header {
    justify-content: center;
    padding: 14px 8px;
  }
  body[data-shell-sidebar="auto"] .shell-sidebar-group-label,
  body[data-shell-sidebar="auto"] .shell-sidebar-item-label,
  body[data-shell-sidebar="auto"] .shell-sidebar-item-badge,
  body[data-shell-sidebar="auto"] .shell-sidebar-item-meta { display: none; }
  body[data-shell-sidebar="auto"] .shell-sidebar-item {
    justify-content: center;
    padding: 10px;
  }
}

/* Manuell expanded: Sidebar bleibt voll (auch auf 1024–1279px) */
body[data-shell-sidebar="expanded"] {
  --shell-sidebar-w-current: var(--shell-sidebar-w-expanded);
}

/* ── Mobile Drawer (<1024px) — Full-Screen Polish (User-Feedback 2026-05-06) ─
   User wollte das alte `.mob-fs` Mobile-Menü-Feeling zurück: Full-Screen
   statt 280px Slide, größere Touch-Targets, klare Sektions-Titles, mehr
   Atemraum. Wir behalten nav-config.js als Single-Source-Of-Truth und
   polishen nur die Mobile-Darstellung. */
@media (max-width: 1023px) {
  /* Mobile Drawer = die Sidebar ist `position:fixed` (translateX(-100%)) und
     belegt KEINE Layout-Breite mehr. Die `data-shell-sidebar=expanded|collapsed`
     Setter oben publizieren `--shell-sidebar-w-current` aber ohne Media-Query-
     Guard, also bleibt der Desktop-Wert (240px/64px) aktiv. Bottom-zentrierte
     Overlays (`#toasts`, `.app-hint--floating/--undo-toast/--toast`) rechnen
     `left:calc(50% + var(--shell-sidebar-w-current,0px)/2)` und werden dadurch
     mobil nach rechts versetzt (User-Report: „Toggle/Toast klebt rechtsbündig").
     Genau eine Stelle neutralisiert alle Konsumenten: die Sidebar nimmt mobil
     keinen Platz ein → die effektive aktuelle Breite ist 0. */
  body[data-shell-sidebar] {
    --shell-sidebar-w-current: 0px;
  }
  .shell-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    max-width: 480px;       /* Tablets nicht breiter als nötig */
    height: 100vh;
    height: 100dvh;
    transform: translateX(-100%);
    transition: transform 240ms ease;
    z-index: var(--z-drawer);
    border-right: 1px solid var(--shell-sidebar-border);
    background: var(--shell-sidebar-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body[data-shell-drawer="open"] .shell-sidebar {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }
  /* Sidebar-Header: mehr Atemraum, Wordmark etwas größer auf Mobile */
  .shell-sidebar-header {
    padding: 18px 20px;
    height: 64px;
  }
  .shell-sidebar-brand-wordmark { height: 22px; width: auto; }
  /* Body: viel mehr Padding, klare Section-Trennung */
  .shell-sidebar-body {
    padding: 16px 12px 24px;
  }
  .shell-sidebar-group {
    margin-bottom: 20px;
  }
  .shell-sidebar-group-label {
    font-size: 11px;
    padding: 12px 12px 8px;
    letter-spacing: .08em;
  }

  /* Items: größere Touch-Targets (≥44px), mehr Atemraum */
  .shell-sidebar-item {
    padding: 14px 14px;
    min-height: 44px;
    font-size: 15px;
    border-radius: var(--radius-md);
    gap: 14px;
  }
  .shell-sidebar-item-icon {
    width: 22px;
    height: 22px;
  }
  .shell-sidebar-item.active::before {
    left: -4px;
    width: 4px;
  }

  /* Footer: User-Feedback 2026-05-06: zwei separate Scroll-Areas (.body
     mit overflow-y:auto, .footer als flex-shrink:0) erzeugten "unsichtbares
     Scrollen" im Footer-Bereich auf Mobile — iOS Safari rubber-band-Effekt
     fing Touch-Gesten ab, danach reagierte der Body-Scroll nicht mehr. Fix:
     auf Mobile beide Bereiche im einheitlichen Scroll-Container der Sidebar
     selbst anzeigen, Footer-Border weg (User: "alle Menüelemente mobil als
     eine Einheit gestalten ohne die Abgrenzung"). overscroll-behavior:contain
     verhindert Scroll-Chaining zum Body unter dem Drawer. */
  .shell-sidebar {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .shell-sidebar-body {
    overflow-y: visible;     /* Inner scroll deaktivieren — Sidebar scrollt */
    flex: 0 0 auto;
  }
  .shell-sidebar-footer {
    padding: 0 12px 12px;
    border-top: 0;            /* Abgrenzung weg, Footer ist visuell Teil der Liste */
    flex-shrink: 0;
  }
  .shell-sidebar-footer .shell-sidebar-item {
    padding: 12px 14px;
  }

  /* Mobile = Drawer immer expanded-Stil (Collapsed-Mode existiert nicht
     im Drawer). Wordmark zurück, T-Mark weg, auch wenn body-Attribut auf
     "collapsed" stehen sollte (Desktop-Wahl, die Mobile-Drawer ignoriert). */
  body[data-shell-sidebar="collapsed"] .shell-sidebar-brand-wordmark { display: block; }
  body[data-shell-sidebar="collapsed"] .shell-sidebar-brand-mark { display: none; }
  body[data-shell-sidebar="collapsed"] .shell-sidebar-header {
    justify-content: space-between;
    padding: 18px 20px;
  }
  body[data-shell-sidebar="collapsed"] .shell-sidebar-group-label,
  body[data-shell-sidebar="collapsed"] .shell-sidebar-item-label,
  body[data-shell-sidebar="collapsed"] .shell-sidebar-item-badge,
  body[data-shell-sidebar="collapsed"] .shell-sidebar-item-meta { display: revert; }
  body[data-shell-sidebar="collapsed"] .shell-sidebar-item {
    justify-content: flex-start;
    padding: 14px 14px;
  }
}

.shell-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
  z-index: var(--z-drawer-backdrop);
}
body[data-shell-drawer="open"] .shell-drawer-backdrop {
  opacity: 1;
  pointer-events: auto;
}
/* A11y FM9-a: bei offenem Mobile-Drawer scrollte der Hintergrund weiter.
   Body-Scroll-Lock analog zum Vorbild body.mob-fs-open (_10a-shell-inline-
   fixes.css). Bewusst nur overflow:hidden (kein position:fixed) wie das
   Vorbild, um Layout-Sprünge zu vermeiden. */
body[data-shell-drawer="open"] {
  overflow: hidden;
}

/* Touch-Target-Floor (WCAG 2.5.5 / Apple HIG) auf coarse Pointern — app-weiter
   WebKit-Sweep (iPhone 13, ergänzend zu #3721): shell-sidebar-brand 101×22.
   Der Brand ist ein <a data-action="shell-nav"> (Home-Link, echtes Tap-Ziel) —
   das Wordmark bleibt 20px hoch, nur die Klick-Box wächst via min-height; das
   display:flex+align-items:center zentriert das Logo vertikal. */
@media (pointer: coarse) {
  .shell-sidebar-brand {
    min-height: 44px;
  }
}

/* ── Main Content Area ──────────────────────────────────────────────────── */
/* Codex-Review 2026-05-05 P2-2: Legacy-`.main`-Constraint NICHT zerstören.
   Pages, die noch keinen `.page-shell[data-width]`-Wrapper haben, sollen
   weiter ihre 1420-px-Max-Width + 26-18-18-Padding aus _10-shell.css
   bekommen. PR-2/3 legt page-by-page entweder `data-width` auf
   `.shell-main` oder einen expliziten `.page-shell`-Wrapper, der die
   Constraints pro Seite überschreibt. */
.shell-main {
  grid-area: main;
  min-width: 0;
}

/* Layout-Refactor 2026-05-06: in v2-Desktop ist `.shell-main` der einzige
   Scroll-Container. Body hat `overflow: hidden`, also würde sonst Content
   abgeschnitten. `min-height: 0` ist Pflicht, sonst stretcht das Grid-Item
   über den Container hinaus. Mobile (Body-Scroll) bekommt diesen Block
   nicht — `.shell-main` ist dort einfach Content im Body-Flow.

   Live-Smoke 2026-05-06: Legacy `.main { max-width: 1420px; margin: 0 auto }`
   aus _10-shell.css matcht hier mit, weil `<main class="main shell-main">`.
   Folge: `.shell-main` war auf 1420 gekappt + zentriert → User-Klick
   außerhalb der zentrierten Spalte hatte keinen Scroll-Listener
   ("scrolle nur innerhalb des Containers"). Fix: `.shell-main` nimmt in v2
   die volle Grid-Cell-Breite (max-width:none, margin:0). Die Content-Breite
   kommt von den inneren Page-Wrappern (`.app-page` 1220 / `.app-page--wide`
   1320 / `.report-page` 1240) — die zentrieren sich via `margin: 0 auto`
   selbst und bleiben optisch identisch. */
body[data-shell="v2"] .shell-main {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  max-width: none;
  margin: 0;
  width: auto;
  /* 2026-05-27 (Settings-Polish): browser scroll-anchoring kann nach
     in-place DOM-Mutations (addI/delI im Stammdaten-Tab) den scroll
     unerwartet verschieben, weil das Anker-Element nicht stabil ist.
     ScrollKeep restored manuell — anchoring abschalten verhindert,
     dass der Browser danach „korrigiert". */
  overflow-anchor: none;
}
@media (max-width: 1023px) {
  body[data-shell="v2"] .shell-main {
    overflow: visible;
    min-height: auto;
  }
}

/* Pro-Seiten-Override: `.shell-main[data-width=…]` (in PR-2/3 via JS oder
   per-page-Markup gesetzt) überschreibt die Legacy-`.main`-Padding-
   Constraints. Wichtig: Padding-Y wird hier explizit gesetzt (26px top /
   18px bottom matcht Legacy-`.main` aus _10-shell.css), sonst würde die
   Legacy-Shorthand-Padding-Regel die hier deklarierten Padding-X wieder
   torpedieren. Specificity (0,0,3,1) sticht (0,0,1,0).

   Live-Smoke 2026-05-06: KEIN max-width mehr auf den `[data-width]`-
   Varianten. Wenn `.shell-main` selbst gekappt wäre, wäre der Scroll-
   Container schmaler als die Grid-Cell und der Bereich daneben hätte
   keinen Scroll-Listener (gleicher Bug wie zuvor mit Legacy 1420).
   Inner-Wrapper (`.app-page`, `.kon-page`, `.report-page` etc.) cappen
   den Content selbst und zentrieren via `margin: 0 auto`. */
body[data-shell="v2"] .shell-main[data-width] {
  padding-top: 26px;
  padding-bottom: 18px;
  padding-left: var(--page-pad-x);
  padding-right: var(--page-pad-x);
}
body[data-shell="v2"] .shell-main[data-width="narrow"] {
  padding-left: var(--page-pad-x-narrow);
  padding-right: var(--page-pad-x-narrow);
}
body[data-shell="v2"] .shell-main[data-width="full"] {
  padding-left: var(--page-pad-x-full);
  padding-right: var(--page-pad-x-full);
}

@media (max-width: 768px) {
  body[data-shell="v2"] .shell-main[data-width],
  body[data-shell="v2"] .shell-main[data-width="narrow"],
  body[data-shell="v2"] .shell-main[data-width="default"],
  body[data-shell="v2"] .shell-main[data-width="wide"],
  body[data-shell="v2"] .shell-main[data-width="full"] {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
}

/* ── Inner Page-Shell-Caps respektieren das äußere Width-Token ──────────
   Codex-Review 2026-05-06 P1: Pages rendern ihren Content in inneren
   Wrappern (`.app-page`, `.app-page--wide`, `.app-page--xwide`,
   `.report-page`, `.report-page--pruefen`) die in _12-page-shell.css
   eigene `max-width`-Caps tragen (1180–1280px). Ohne diese Overrides
   sieht eine `wide` (1440) oder `full` (100%) Seite zwar einen breiteren
   `.shell-main`, der Content bleibt aber bei 1220–1240px gequetscht.

   Strategie: für `wide` und `full` werden die inneren Caps explizit auf
   den jeweiligen Token-Wert gehoben. Für `default`/`narrow` ist nichts
   nötig — die inneren Caps sind bereits ≥ 1180px, und der äußere
   1180/720er Constraint dominiert ohnehin via Content-Box-Begrenzung.

   `.report-page--month` (1500px) ist absichtlich NICHT in den Listen —
   die Monatsansicht ist PR-3 mit eigenem R8-Browser-Smoke.

   v1-Rollback (`?shell=v1`): die Override-Selektoren sind unter
   `body[data-shell="v2"]` gescoped und greifen unter v1 NICHT — Inner-Caps
   dominieren wie früher. Das ist gewünscht: v1 ist der Notausgang und muss
   identisch zur Pre-v2-Welt aussehen. NIT-3 aus Sweep JJ Opus-Review. */

/* full: kein Inner-Cap (Page nutzt den ganzen Shell-Main).
   Liste enthält:
     - generische Page-Shells (.app-page*, .report-page*) aus _12-page-shell.css
     - page-spezifische View-Klassen mit eigenen Caps:
       - .op-view (1220 in _35-receivables.css)
       - .afa-view (1220 in _90-responsive-overrides.css)
       - .trips-view (1180/1220 in _90)
       - .import-view (1220 in _50-import-belege-export.css)
       - .kon-page (1180/1220 in _41-recurrences.css)
     - Composer/Editor-Shells (PR-3 Codex-P1, _30-documents-shell.css):
       - .inv-page  (1100 hard-coded)
       - .inv3-page (1240 hard-coded)
     - Recurrences/Composer-V2-Shells (PR-3, _41-recurrences.css):
       - .inv2-page (1200 hard-coded)
   Wenn neue Page-View-Klassen mit eigenem Cap dazukommen, MÜSSEN sie hier
   ergänzt werden — der Pin-Test in tests/shell-width-tokens.test.js
   überprüft die Liste gegen die tatsächlichen Cap-Vorkommen im CSS
   (var()-basiert UND px-hardcoded). */
body[data-shell="v2"] .shell-main[data-width="full"] .app-page,
body[data-shell="v2"] .shell-main[data-width="full"] .app-page--tool,
body[data-shell="v2"] .shell-main[data-width="full"] .app-page--wide,
body[data-shell="v2"] .shell-main[data-width="full"] .app-page--xwide,
body[data-shell="v2"] .shell-main[data-width="full"] .report-page,
body[data-shell="v2"] .shell-main[data-width="full"] .report-page--pruefen,
body[data-shell="v2"] .shell-main[data-width="full"] .op-view,
body[data-shell="v2"] .shell-main[data-width="full"] .afa-view,
body[data-shell="v2"] .shell-main[data-width="full"] .trips-view,
body[data-shell="v2"] .shell-main[data-width="full"] .import-view,
body[data-shell="v2"] .shell-main[data-width="full"] .settings-page,
body[data-shell="v2"] .shell-main[data-width="full"] .kon-page,
body[data-shell="v2"] .shell-main[data-width="full"] .inv-page,
body[data-shell="v2"] .shell-main[data-width="full"] .inv2-page,
body[data-shell="v2"] .shell-main[data-width="full"] .inv3-page {
  max-width: none;
}

/* wide: Inner-Cap = wide-Token (1440px), damit innere Wrapper nicht
   bei 1100/1180/1200/1220/1240/1280 abschneiden */
body[data-shell="v2"] .shell-main[data-width="wide"] .app-page,
body[data-shell="v2"] .shell-main[data-width="wide"] .app-page--tool,
body[data-shell="v2"] .shell-main[data-width="wide"] .app-page--wide,
body[data-shell="v2"] .shell-main[data-width="wide"] .app-page--xwide,
body[data-shell="v2"] .shell-main[data-width="wide"] .report-page,
body[data-shell="v2"] .shell-main[data-width="wide"] .report-page--pruefen,
body[data-shell="v2"] .shell-main[data-width="wide"] .op-view,
body[data-shell="v2"] .shell-main[data-width="wide"] .afa-view,
body[data-shell="v2"] .shell-main[data-width="wide"] .trips-view,
body[data-shell="v2"] .shell-main[data-width="wide"] .import-view,
body[data-shell="v2"] .shell-main[data-width="wide"] .settings-page,
body[data-shell="v2"] .shell-main[data-width="wide"] .kon-page,
body[data-shell="v2"] .shell-main[data-width="wide"] .inv-page,
body[data-shell="v2"] .shell-main[data-width="wide"] .inv2-page,
body[data-shell="v2"] .shell-main[data-width="wide"] .inv3-page {
  max-width: var(--page-width-wide);
}

/* ── Page-Sub-Header (PR-3, 2026-05-06) ─────────────────────────────────
   Trägt aktuell die Monatsleiste auf monats-/jahresgebundenen Seiten.
   Lebt zwischen Topbar und Main, sticky direkt unter der Topbar. Sichtbar
   nur wenn `body[data-shell-subheader="months"]` (gesetzt von shell.js).

   shell.js spiegelt den von router.js in `#nav-months-bar` (Legacy-Topbar)
   gerenderten HTML-Output in `#shell-months-bar` — kein duplizierter
   Render-Pfad. Click-Delegation funktioniert weiter, weil die data-action-
   Attribute der Tabs unverändert mitgeklont werden. */
/* Layout-Refactor 2026-05-06: kein `position: sticky` auf Desktop —
   Subheader ist Grid-Row zwischen Topbar und Main. Auf Mobile (Body-
   Scroll) wieder sticky relativ zu Body unter der ebenfalls sticky
   Topbar. */
.shell-page-subheader {
  grid-area: subheader;
  z-index: var(--z-sticky);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 0;
  margin: 0;
  display: none; /* default; visible nur unter [data-shell-subheader="months"] */
}
@media (max-width: 1023px) {
  .shell-page-subheader {
    position: sticky;
    top: var(--shell-mobile-topbar-h);
  }
}

body[data-shell="v2"][data-shell-subheader] .shell-page-subheader {
  /* !important nötig: Z.29 hat `[data-shell-v2] { display:none !important; }`
     für default-hidden v2-Elemente. Ohne !important hier verliert Specificity
     0,3,0 gegen 0,1,0+!important. Sweep LL Opus B1, 2026-05-06.
     2026-05-09: Wildcard-Subheader-Attr (statt nur =„months") — gleicher
     Slot wird jetzt auch von Hub-Tab-Bar genutzt. */
  display: block !important;
}

/* Den geclonten Months-Bar-Inhalt im v2-Mount platzieren — nutzt die
   bestehende `.nav-months-bar`-Klasse aus _10-shell.css für Tab-Styling.
   Hier nur Container-Padding + horizontaler Scroll-Behavior. */
.shell-months-bar {
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 8px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.shell-months-bar::-webkit-scrollbar { display: none; }
@media (max-width: 768px) {
  .shell-months-bar { padding: 6px 12px; }
}

/* ── Print: Shell weg, Body druckbar ───────────────────────────────────── */
/* Layout-Refactor 2026-05-06: Body fixed full-height + overflow:hidden würde
   im Druck nur den Viewport-Bereich erfassen. Print-Override löst Body und
   .shell-main wieder zu Auto-Höhe + visible-Overflow auf, damit der ganze
   Content gedruckt wird. */
@media print {
  body[data-shell="v2"] {
    height: auto !important;
    overflow: visible !important;
  }
  body[data-shell="v2"] .shell-sidebar,
  body[data-shell="v2"] .shell-sidebar[data-shell-v2],
  body[data-shell="v2"] .shell-topbar,
  body[data-shell="v2"] header.shell-topbar[data-shell-v2],
  body[data-shell="v2"] .shell-page-subheader,
  body[data-shell="v2"] .shell-drawer-backdrop {
    display: none !important;
  }
  body[data-shell="v2"] #app {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
  }
  body[data-shell="v2"] .shell-main {
    padding: 0 !important;
    overflow: visible !important;
    min-height: auto !important;
    height: auto !important;
  }
}

/* ── Reduced Motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .shell-sidebar,
  .shell-drawer-backdrop,
  .shell-sidebar-tooltip {
    transition: none !important;
    animation: none !important;
  }
}

/* Shell-Topbar Persistenz-Status bleibt entfernt; Speichern laeuft still. */

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ App-Shell-Refresh 2026-05-09 — Mockup-Annäherung                     ║
   ║ ──────────────────────────────────────────────────────────────────── ║
   ║ Lokal-only-Iteration. Keine Token-Werte überschrieben, keine         ║
   ║ taxtello-Gelb-Änderungen, keine Architektur-Umbauten. Punkte:        ║
   ║   1. Burger sitzt links im Sidebar-Header (statt rechts in Topbar).  ║
   ║   2. Trennlinie zwischen Logo und Menü entfernt.                     ║
   ║   3. Item-Schrift größer (14.5px) und kräftiger (semibold).          ║
   ║   4. Group-Labels subtiler (mehr letter-spacing, gedämpfter).        ║
   ║   5. Account-Block in Sidebar-Footer oberhalb von Export/Settings.   ║
   ║   6. Topbar-Avatar nur noch Mobile (<1024) als Fallback.             ║
   ║   7. Sub-Item-Style für "Erinnerungen unter Offene Posten".          ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ── Sidebar-Header: Burger links, Brand daneben, KEINE Trennlinie ───── */
body[data-shell="v2"] .shell-sidebar-header {
  border-bottom: 0;            /* Trennlinie weg (User-Wunsch 2026-05-09) */
  gap: 10px;
  padding: 14px 14px;
}
body[data-shell="v2"] .shell-sidebar-burger {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 0;
  color: var(--text2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--tr-fast), color var(--tr-fast);
}
body[data-shell="v2"] .shell-sidebar-burger:hover {
  background: var(--shell-sidebar-item-hover);
  color: var(--text);
}
body[data-shell="v2"] .shell-sidebar-burger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Touch-Target-Floor (WCAG 2.5.5 / Apple HIG 44×44px) auf coarse Pointern.
 * WebKit-Render-Audit (iPhone 13, ergänzend zu PR #3721): der Sidebar-Burger
 * maß 36×36px. Reiner Icon-Button → feste 44×44 ist visuell ok. Der Override
 * trägt dieselbe body[data-shell="v2"]-Scope wie die Basis-Regel, sonst
 * würde die spezifischere Basis (0,2,1) gewinnen. */
@media (pointer: coarse) {
  body[data-shell="v2"] .shell-sidebar-burger {
    width: 44px;
    height: 44px;
  }
}

/* Topbar-Burger auf Desktop verstecken — Sidebar-Burger übernimmt.
   Auf Mobile bleibt Topbar-Burger sichtbar als Drawer-Open. */
@media (min-width: 1024px) {
  body[data-shell="v2"] #shell-topbar-burger { display: none !important; }
}

/* Refresh III 2026-05-09: Im collapsed-Mode (Sidebar 64px breit) zeigen
   wir NUR den Burger zentriert — kein Stacking mehr. Brand-T-Mark wird
   ausgeblendet, weil Burger und T-Mark beim Stapeln unprofessionell
   wirkten. Die Brand/Home-Funktion bleibt über das „Dashboard"-Item in
   der Liste erreichbar.
   Bugfix Refresh VI 2026-05-10: `[data-shell-sidebar="auto"]` darf NICHT
   im Default-Block stehen. „auto" ist der initial-State und der Selektor
   würde sonst auch bei Viewport ≥1280px greifen, wo die Sidebar in
   Wirklichkeit expanded ist — das hat das Logo/Wordmark im normalen
   Desktop-State unsichtbar gemacht. „auto" wird nur im 1024–1279px-
   Bereich wirklich zu collapsed, deshalb gehört der Override in den
   entsprechenden @media-Block. */
body[data-shell-sidebar="collapsed"] .shell-sidebar-header {
  flex-direction: row;
  justify-content: center;
  gap: 0;
  padding: 8px;
  height: var(--shell-topbar-h);
  min-height: var(--shell-topbar-h);
}
body[data-shell-sidebar="collapsed"] .shell-sidebar-brand {
  display: none;
}
@media (min-width: 1024px) and (max-width: 1279px) {
  body[data-shell-sidebar="auto"] .shell-sidebar-header {
    flex-direction: row;
    justify-content: center;
    gap: 0;
    padding: 8px;
    height: var(--shell-topbar-h);
    min-height: var(--shell-topbar-h);
  }
  body[data-shell-sidebar="auto"] .shell-sidebar-brand {
    display: none;
  }
}
@media (max-width: 1023px) {
  /* Mobile = Drawer; ignoriert collapsed-Override und zeigt Wordmark +
     Burger horizontal wie ein normaler Drawer-Header. */
  body[data-shell-sidebar="collapsed"] .shell-sidebar-header {
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    padding: 18px 20px;
    height: 64px;
    min-height: 64px;
  }
  body[data-shell-sidebar="collapsed"] .shell-sidebar-brand {
    display: flex;
  }
}

/* ── Sidebar-Items: balanciert (Refresh III 2026-05-09) ─────────────────
   Etwas mehr Luft als Refresh II (das wirkte gequetscht), aber immer
   noch deutlich kompakter als der erste Refresh. Item-Höhe ≈ 40px. */
/* Refresh XIII 2026-05-10: minimal mehr Atemraum, ohne Sidebar zu
   verlängern. Items bekommen +2px padding, +2px margin, Header-Body
   +2px, Sektions-Trenner +2px Atmen je Seite. Trenner-Optik unverändert
   (subtiler Tint). */
body[data-shell="v2"] .shell-sidebar-body {
  padding: 12px 8px;
}
body[data-shell="v2"] .shell-sidebar-group { margin-bottom: 4px; }
body[data-shell="v2"] .shell-sidebar-group:last-child { margin-bottom: 0; }
body[data-shell="v2"] .shell-sidebar-group-label {
  font-size: 10.5px;
  font-weight: var(--fw-semibold);
  letter-spacing: .09em;
  color: var(--text3);
  padding: 10px 12px 6px;
  opacity: .85;
}
body[data-shell="v2"] .shell-sidebar-group--flat + .shell-sidebar-group--flat {
  /* Phase 2 AppShell 2026-05-26: subtle section separator via --border-alpha
     token (PR #2612). Replaces ad-hoc rgba(surface-rgba-base,.08) — same
     visual subtlety, mode-aware token. */
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-alpha);
}
body[data-shell="v2"] .shell-sidebar-item {
  padding: 10px 12px;
  font-size: 14.5px;
  font-weight: var(--fw-semibold);
  gap: 12px;
  border-radius: 8px;
  margin: 2px 0;
}
body[data-shell="v2"] .shell-sidebar-item-icon {
  width: 20px;
  height: 20px;
}
body[data-shell="v2"] .shell-sidebar-item-icon svg {
  width: 18px;
  height: 18px;
}
/* Active-Bar dezenter (User-Feedback): 3px → 2px, weniger klobig.
   Refresh XIII: top/bottom mit dem neuen +2px-Item-Padding gleich
   mitgewachsen, damit die Bar mittig zur Höhe sitzt. */
body[data-shell="v2"] .shell-sidebar-item.active::before {
  left: -8px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 0 2px 2px 0;
}

/* Refresh V 2026-05-10: `.is-subitem`-Styles entfernt. Unterseiten
   leben jetzt ausschließlich als Page-Pills im Hub-Header (siehe
   .page-hub-* unten); die Sidebar zeigt nur Hauptbereiche. Der
   `subItem`-Render-Pfad in shell.js bleibt für rückwärts-kompatible
   Configs erhalten — wenn keine Items mehr `subItem: true` haben,
   ist die Klasse einfach ungenutzt. */

/* ── Account-Block in Sidebar-Footer (oberhalb Export/Settings) ──────── */
body[data-shell="v2"] .shell-sidebar-account {
  flex-shrink: 0;                 /* sticky am Boden — scrollt nicht mit */
  padding: 6px 8px;
  border-top: 1px solid var(--shell-sidebar-border);
  position: relative;
}
body[data-shell="v2"] .shell-sidebar-account-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;              /* effektive Höhe ≈ 8+8+40 = 56px Trigger */
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  transition: background var(--tr-fast);
}
body[data-shell="v2"] .shell-sidebar-account-trigger:hover {
  background: var(--shell-sidebar-item-hover);
}
body[data-shell="v2"] .shell-sidebar-account-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
body[data-shell="v2"] .shell-sidebar-account-avatar {
  /* Refresh IV 2026-05-10: Avatar 40px für mehr Präsenz im Account-Block
     (User-Wunsch). Hintergrund bleibt dezenter gold-Tint, Letter in
     --accent. */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 15px;
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}
body[data-shell="v2"] .shell-sidebar-account-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
body[data-shell="v2"] .shell-sidebar-account-name {
  font-weight: var(--fw-semibold);
  color: var(--text);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
body[data-shell="v2"] .shell-sidebar-account-sub {
  font-size: 12px;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
/* Refresh IV: Sub-Zeile leer → Element gar nicht rendern (HTML-Conditional
   in shell.js). Wenn doch leer ankommt: hide via :empty. */
body[data-shell="v2"] .shell-sidebar-account-sub:empty { display: none; }
body[data-shell="v2"] .shell-sidebar-account-chev {
  flex-shrink: 0;
  color: var(--text3);
}

/* Account-Dropdown-Menü, ähnlich wie .shell-avatar-menu, aber nach OBEN
   öffnend (Sidebar-Footer hat den Mount unten). */
body[data-shell="v2"] .shell-sidebar-account-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 10px;
  right: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: var(--z-tooltip);
  display: none;
}
body[data-shell="v2"] .shell-sidebar-account.open .shell-sidebar-account-menu {
  display: block;
}
/* Refresh XV 2026-05-10: Bugfix collapsed-Mode — bei Sidebar-Width 64px
   wird das Account-Menü mit left:10/right:10 auf ~44px gequetscht und
   schneidet alle Items ab. Im collapsed-Mode rechts neben der Sidebar
   ausklappen, gleiches Pattern wie Submenu-Flyout.
   Refresh XV.1: `.shell-sidebar { overflow: visible }` im collapsed-
   Mode für den Account-Menü-Flyout (sitzt direkt in `.shell-sidebar`).
   Refresh XV.2 (Codex P2): `.shell-sidebar-body { overflow: visible }`
   im collapsed-Mode — Submenu-Flyouts (Rechnungen / Forderungen /
   Betrieb / Steuergesundheit) sitzen INNERHALB von `.shell-sidebar-body`,
   das eigenes `overflow-x: hidden` hat. Ohne diesen Override wurden
   Sub-Items im 1024–1279px-Default-Range geclippt → User konnten
   Angebote / Erinnerungen / Anlagen / Prüfen aus der Sidebar nicht
   öffnen. Im collapsed-Mode mit 11 Items passt alles ohne Body-Scroll;
   `overflow: visible` ist sicher. */
/* Bugfix 2026-05-17: Nur ab Desktop (≥1024px) — analog zum Submenu-
   Flyout-Guard weiter unten. Unter 1023px ist die Sidebar ein Mobile-
   Drawer; ohne Guard floss `overflow: visible` (killt Drawer-Scroll bei
   langer Liste) und das Account-Menü-Flyout (`left: calc(100% + 8px)`,
   ~off-screen) in den Drawer, sobald eine Route — z.B. Einstellungen —
   `collapsed` erzwingt. */
@media (min-width: 1024px) {
  body[data-shell-sidebar="collapsed"] .shell-sidebar {
    overflow: visible;
  }
  body[data-shell-sidebar="collapsed"] .shell-sidebar-body {
    overflow: visible;
  }
  body[data-shell-sidebar="collapsed"] .shell-sidebar-account-menu {
    bottom: 0;
    left: calc(100% + 8px);
    right: auto;
    min-width: 220px;
  }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  body[data-shell-sidebar="auto"] .shell-sidebar {
    overflow: visible;
  }
  body[data-shell-sidebar="auto"] .shell-sidebar-body {
    overflow: visible;
  }
  body[data-shell-sidebar="auto"] .shell-sidebar-account-menu {
    bottom: 0;
    left: calc(100% + 8px);
    right: auto;
    min-width: 220px;
  }
}
body[data-shell="v2"] .shell-sidebar-account-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13.5px;
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
body[data-shell="v2"] .shell-sidebar-account-item:hover {
  background: var(--shell-sidebar-item-hover);
}
body[data-shell="v2"] .shell-sidebar-account-item--logout { color: var(--red); }
body[data-shell="v2"] .shell-sidebar-account-item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-shell="v2"] .shell-sidebar-account-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* Refresh IV 2026-05-10: Status-Badge im Account-Dropdown neben „Mein Konto"
   Tone-Variants:
     accent  → Pro / Pro-Test (gold-Tint, ruhig)
     neutral → Solo (grau, nicht laut)
     warn    → Zahlung offen / Abo gekündigt (rot-Tint, sichtbar)
   Klein gehalten — Status soll lesbar sein, aber nicht von „Mein Konto"
   ablenken. */
.shell-sidebar-account-plan-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: var(--fw-semibold);
  letter-spacing: .02em;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  margin-left: auto;              /* nach rechts schieben */
  flex-shrink: 0;
  line-height: 1.4;
  white-space: nowrap;
}
.shell-sidebar-account-plan-badge[data-tone="accent"] {
  background: var(--accent-soft);
  color: var(--accent);
}
.shell-sidebar-account-plan-badge[data-tone="neutral"] {
  background: rgba(var(--surface-rgba-base), .08);
  color: var(--text2);
}
.shell-sidebar-account-plan-badge[data-tone="warn"] {
  background: var(--red2, rgba(220, 69, 69, .12));
  color: var(--red);
}

/* Collapsed-Mode: Account zeigt nur Avatar, Text + Chevron weg.
   Bugfix Refresh VI 2026-05-10: `[data-shell-sidebar="auto"]` darf NICHT
   im Default-Block stehen, weil "auto" der Default-State ist und der
   Selector dann auch bei Viewport ≥1280px greifen würde, wo die Sidebar
   in Wirklichkeit expanded ist. „auto" wird nur im 1024–1279px-Bereich
   wirklich zu collapsed (siehe Sidebar-Width-Auto-Mode-Block oben);
   die Account-Override muss demselben Viewport-Bound folgen. */
body[data-shell-sidebar="collapsed"] .shell-sidebar-account-trigger {
  justify-content: center;
  padding: 8px;
}
body[data-shell-sidebar="collapsed"] .shell-sidebar-account-text,
body[data-shell-sidebar="collapsed"] .shell-sidebar-account-chev {
  display: none;
}
@media (min-width: 1024px) and (max-width: 1279px) {
  body[data-shell-sidebar="auto"] .shell-sidebar-account-trigger {
    justify-content: center;
    padding: 8px;
  }
  body[data-shell-sidebar="auto"] .shell-sidebar-account-text,
  body[data-shell-sidebar="auto"] .shell-sidebar-account-chev {
    display: none;
  }
}
/* Mobile (<1024): Drawer ist immer expanded-Style. „collapsed" als
   User-Wahl wird im Drawer ignoriert (siehe Drawer-Block weiter unten);
   hier nur sicherstellen, dass auch der Account expanded gerendert wird,
   selbst wenn data-shell-sidebar="collapsed" gesetzt war. */
@media (max-width: 1023px) {
  body[data-shell-sidebar="collapsed"] .shell-sidebar-account-trigger {
    justify-content: flex-start;
    padding: 10px 10px;
  }
  body[data-shell-sidebar="collapsed"] .shell-sidebar-account-text,
  body[data-shell-sidebar="collapsed"] .shell-sidebar-account-chev {
    display: revert;
  }
}

/* Mobile-Drawer: Account-Block bekommt mehr Atemraum, kein Border. */
@media (max-width: 1023px) {
  body[data-shell="v2"] .shell-sidebar-account {
    border-top: 0;
    padding: 8px 12px 4px;
  }
  body[data-shell="v2"] .shell-sidebar-account-trigger {
    padding: 12px 12px;
    font-size: 14.5px;
  }
  body[data-shell="v2"] .shell-sidebar-account-avatar {
    width: 40px;
    height: 40px;
    font-size: 15px;
  }
}

/* ── Topbar-Avatar nur Mobile (Account ist primär in Sidebar) ────────── */
@media (min-width: 1024px) {
  body[data-shell="v2"] .shell-avatar-wrap--mobile-only { display: none !important; }
}

/* ── Footer kompakter (App-Shell-Refresh II 2026-05-09) ────────────────
   Refresh X 2026-05-10: Footer (Export/Einstellungen) sitzt jetzt
   ZWISCHEN Body und Account (Mockup-Angleich) — daher Border-Top als
   Trennung zum Body. Account selbst hat seinen eigenen Border-Top
   (Trennung zwischen Footer und Account, weiter unten definiert). */
body[data-shell="v2"] .shell-sidebar-footer {
  flex-shrink: 0;                 /* sticky am Boden, schrumpft nicht */
  padding: 4px 8px;               /* Refresh XIV: kompakter, keine border-top mehr */
  border-top: 0;                  /* Refresh XIV: User-Wunsch — Linie über Export weg */
}
body[data-shell="v2"] .shell-sidebar-footer .shell-sidebar-item {
  font-size: 13.5px;
  font-weight: var(--fw-medium);
  padding: 6px 10px;              /* Refresh XIV: kompakter (Export/Einstellungen näher) */
  margin: 0;
}

/* ── Compact-Mode bei niedrigen Viewport-Höhen (≤720px) ──────────────────
   Refresh III 2026-05-09: nur padding/spacing wird reduziert, Avatar
   bleibt 36px (User-Wunsch: aussagekräftig, nicht kindisch klein),
   Account-Block 56-64px, Name + Sub bleiben sichtbar. */
@media (max-height: 720px) and (min-width: 1024px) {
  body[data-shell="v2"] .shell-sidebar-header {
    padding: 8px 12px;
  }
  body[data-shell="v2"] .shell-sidebar-body {
    padding: 6px 6px;
  }
  body[data-shell="v2"] .shell-sidebar-item {
    padding: 8px 12px;
  }
  body[data-shell="v2"] .shell-sidebar-group--flat + .shell-sidebar-group--flat {
    margin-top: 6px;
    padding-top: 6px;
  }
  body[data-shell="v2"] .shell-sidebar-account {
    padding: 4px 8px;
  }
  body[data-shell="v2"] .shell-sidebar-footer {
    padding: 2px 8px 6px;
  }
  body[data-shell="v2"] .shell-sidebar-footer .shell-sidebar-item {
    padding: 6px 12px;
    font-size: 13px;
  }
}
/* Sehr niedrige Höhen: Sub-Zeile (User-Name) ausblenden, sonst läuft
   Account aus dem Block. Avatar + Firmenname reichen. */
@media (max-height: 620px) and (min-width: 1024px) {
  body[data-shell="v2"] .shell-sidebar-account-sub {
    display: none;
  }
}

/* ── Sidebar-Submenu (Refresh VIII 2026-05-10) ─────────────────────────
   Klickbare Untermenüs an Sidebar-Items mit `children`. Page-Hub-Tabs
   (alter `.page-hub-*`-Block) sind komplett entfernt — die zweite
   Navigationsebene unter der Topbar fühlte sich störend an.
   Layout-Modi:
     • Expanded Sidebar (Desktop ≥1280): Submenu inline unter Parent
     • Collapsed Sidebar (1024–1279 oder explicit collapsed): Flyout
       rechts neben dem Item (absolute positioned)
     • Mobile Drawer (<1024): Submenu inline unter Parent
*/

/* Wrap container — position relative, damit das Submenu (absolute im
   collapsed Flyout-Mode) anchorn kann. */
.shell-sidebar-item-wrap {
  position: relative;
  display: block;
}

/* Chevron rechts auf Items mit children — klein und dezent. Rotiert um
   180°, wenn Submenu offen ist (zeigt nach oben). */
.shell-sidebar-item-chev {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--text3);
  transition: transform var(--tr-fast), color var(--tr-fast);
}
.shell-sidebar-item.has-children:hover .shell-sidebar-item-chev,
.shell-sidebar-item.has-children.active .shell-sidebar-item-chev {
  color: var(--text2);
}
.shell-sidebar-item-wrap.open > .shell-sidebar-item .shell-sidebar-item-chev {
  transform: rotate(180deg);
  color: var(--text2);
}

/* Submenu — Inline default (Expanded + Mobile), Flyout in collapsed Modi.
   Bugfix Refresh VIII.1: `display: flex` überschreibt das HTML-Default
   für `[hidden]` (display:none), deshalb war das Submenu immer sichtbar.
   `[hidden]`-Override mit !important erzwingt das Verstecken — JS togglet
   weiter via removeAttribute/setAttribute('hidden'). */
.shell-sidebar-submenu {
  margin: 2px 0 4px;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.shell-sidebar-submenu[hidden] {
  display: none !important;
}
.shell-sidebar-submenu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px 8px 42px;     /* eingerückt unter Parent-Icon (20px+gap) — Refresh XIII +1px */
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--text2);
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--fw-medium);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--tr-fast), background var(--tr-fast);
}
.shell-sidebar-submenu-item:hover {
  color: var(--text);
  background: var(--shell-sidebar-item-hover);
}
.shell-sidebar-submenu-item.active {
  color: var(--accent);
  font-weight: var(--fw-semibold);
}
.shell-sidebar-submenu-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.shell-sidebar-submenu-badge {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: var(--fw-semibold);
  background: rgba(var(--surface-rgba-base), .08);
  color: var(--text2);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  min-width: 16px;
  text-align: center;
}
.shell-sidebar-submenu-item.active .shell-sidebar-submenu-badge {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Collapsed-Mode (Sidebar 64px breit): Submenu wird zum Flyout rechts
   neben dem Item. Chevron + Inline-Layout fallen weg (Items zeigen nur
   Icons im Collapsed-State, Chevron wäre nicht sichtbar weil Item
   center-aligned ist).
   Bugfix 2026-05-17: Nur ab Desktop (≥1024px). Unter 1023px ist die
   Sidebar ein Mobile-Drawer mit vollem Inline-Layout — auch wenn eine
   Route (z.B. Einstellungen) `data-shell-sidebar="collapsed"` erzwingt.
   Ohne diesen Guard floss das Flyout-Positioning in den Drawer: Submenüs
   landeten `position:absolute` ~off-screen und der Chevron war versteckt,
   sodass z.B. die Rechnungen-Unterpunkte unerreichbar waren. */
@media (min-width: 1024px) {
  body[data-shell-sidebar="collapsed"] .shell-sidebar-item-chev {
    display: none;
  }
  body[data-shell-sidebar="collapsed"] .shell-sidebar-submenu {
    position: absolute;
    left: calc(100% + 8px);
    top: 0;
    min-width: 200px;
    margin: 0;
    padding: 6px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: var(--z-tooltip);
    /* Viewport-sicher: bei kleiner Höhe nicht unten herauslaufen. top wird
       von positionFlyout() (shell.js) gegen den Viewport geklemmt. */
    max-height: calc(100vh - 24px);
    overflow-y: auto;
  }
  body[data-shell-sidebar="collapsed"] .shell-sidebar-submenu-item {
    padding: 8px 12px;              /* kein Indent, weil Flyout schon abgesetzt */
  }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  body[data-shell-sidebar="auto"] .shell-sidebar-item-chev {
    display: none;
  }
  body[data-shell-sidebar="auto"] .shell-sidebar-submenu {
    position: absolute;
    left: calc(100% + 8px);
    top: 0;
    min-width: 200px;
    margin: 0;
    padding: 6px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: var(--z-tooltip);
    max-height: calc(100vh - 24px);
    overflow-y: auto;
  }
  body[data-shell-sidebar="auto"] .shell-sidebar-submenu-item {
    padding: 8px 12px;
  }
}

/* Mobile-Drawer (<1024): Inline-Layout wie Default, aber etwas mehr
   Atemraum (touch-tauglich). */
@media (max-width: 1023px) {
  .shell-sidebar-submenu-item {
    padding: 10px 14px 10px 50px;
    font-size: 14px;
    min-height: 40px;
  }
}

/* ── Dynamische Shortcuts-Sektion im Tastenkürzel-Modal ──────────────── */
.shell-shortcuts-dynamic { padding: 0 18px 14px; }
.shell-shortcuts-dynamic[hidden] { display: none !important; }
.shell-shortcuts-dynamic-title {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text3);
  margin: 14px 0 8px;
}
.shell-shortcuts-dynamic-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.shell-shortcuts-dynamic-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-base);
  color: var(--text);
}
.shell-shortcuts-dynamic-list li:last-child { border-bottom: 0; }
.shell-shortcuts-dynamic-keys {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.shell-shortcuts-dynamic-keys kbd {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  padding: 2px 6px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  min-width: 24px;
  text-align: center;
}
.shell-shortcuts-dynamic-label {
  flex: 1;
  min-width: 0;
  color: var(--text2);
}
.shell-shortcuts-dynamic-scope {
  font-size: var(--fs-xs);
  color: var(--text3);
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

/* Touch-Target-Floor (WCAG 2.5.5 / Apple HIG) auf coarse Pointern — app-weiter
   WebKit-Sweep (iPhone 13, ergänzend zu #3721): shell-sidebar-submenu-item
   360×41 (der @media(max-width:1023px)-Block oben setzt min-height:40px). Hier
   auf 44px gehoben — steht am Dateiende, gewinnt bei gleicher Spezifität. */
@media (pointer: coarse) {
  .shell-sidebar-submenu-item {
    min-height: 44px;
  }
}

/* ── Mobile-Topbar-Overrides (PR „Optimize mobile topbar spacing") ──────
   Greift NACH _05-shell-v2.css (siehe manifest.json) → kann dortige
   Base-Rules ohne !important überschreiben. Ziel: schmale Phone-Breiten
   (≈390–430px) bekommen weniger Topbar-Gedränge, ohne die Desktop-
   Struktur anzufassen.

   Änderungen (Topbar):
     • „+ Neu"-Button schrumpft zu reinem „+"-Icon-Button (Label aus).
     • Help, Theme und Account verlassen die Mobile-Topbar; die Ziele bleiben
       über den Sidebar-Drawer erreichbar.
     • Notification-Glocke nur sichtbar, wenn ungelesene Hinweise
       vorhanden sind (Klassen-Toggle in shell-notif.js#applyNotifBadge).
     • Sidebar-Footer-Item „Erscheinungsbild" ist Mobile-only — auf
       Desktop bleibt das Sun/Moon-Icon weiterhin in der Topbar. */

/* Sidebar-Drawer-Eintrag „Erscheinungsbild": Mobile-only.
   Auf Desktop hat die Topbar das Theme-Icon → Doppelung vermeiden. */
@media (min-width: 1024px) {
  body[data-shell="v2"] .shell-sidebar-item[data-action="toggleTheme"] {
    display: none !important;
  }
}

/* Mobile <600px: Topbar-Slim-Mode. */
@media (max-width: 600px) {
  /* „+ Neu" → kompakter „+"-Button. Label aus, Icon vergrößert,
     Button-Form quadratisch passend zum primären Akzent-Stil. */
  body[data-shell="v2"] .shell-topbar-cta {
    padding: 0;
    width: 36px;
    height: 36px;
    justify-content: center;
    gap: 0;
  }
  body[data-shell="v2"] .shell-topbar-cta-label {
    display: none;
  }
  body[data-shell="v2"] .shell-topbar-cta-icon {
    font-size: 20px;
    line-height: 1;
  }

  /* Utility- und Account-Slots aus Mobile-Topbar entfernen — Konto,
     Verwaltung, Hilfe und Theme bleiben über den Sidebar-Drawer erreichbar. */
  body[data-shell="v2"] .shell-help-wrap,
  body[data-shell="v2"] .shell-avatar-wrap--mobile-only,
  body[data-shell="v2"] #shell-theme-toggle {
    display: none !important;
  }

  /* Benachrichtigungs-Glocke nur zeigen, wenn unread > 0.
     shell-notif.js#applyNotifBadge() pflegt die Marker-Klasse. */
  body[data-shell="v2"] .shell-notif-wrap:not(.shell-notif-wrap--has-unread) {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Shell v2 — Trial-Banner Layout-Fit (Bug 2026-05-22)
   ─────────────────────────────────────────────────────────────────────
   `body[data-shell="v2"]` (siehe _05-shell-v2.css) ist height:100vh +
   overflow:hidden (Single-Scroll-Container-Pattern, nur .shell-main
   scrollt) und hatte Default-Block-Layout; `#app` lag mit height:100%
   als Grid darin, also starr 100vh. Sichtbarer Trial-Banner (#trial-
   banner.show, ≈44 px) und/oder Pastdue-Banner (#pastdue-banner) im
   in-flow-Body drückten #app um die Banner-Höhe nach unten — die
   unteren 44+ px wurden durch overflow:hidden geclipt. Sichtbare
   Folgen: Sidebar-Footer (Firmen-Menü / Account-Block) und Bulk-Bar
   am unteren .shell-main-Rand verschwanden hinter dem Viewport-Rand.

   Fix: Body wird Flex-Column-Container, #app bekommt flex:1, damit es
   den verbleibenden Viewport unter den Bannern füllt — Banner bleiben
   in Flow, App schluckt den Rest. Overlay-Geschwister (#loading,
   #trial-expired, #account-suspended, #maintenance-banner) sind alle
   position:fixed; inset:0 → außerhalb des Flex-Flows, unbeeinflusst.

   Override sitzt in einer eigenen Partial statt direkt in
   _05-shell-v2.css, weil das Original-Partial die 800-LOC-Soft-Freeze
   bereits weit überschreitet (CLAUDE.md File-Size-Limit).
   ───────────────────────────────────────────────────────────────────── */
body[data-shell="v2"] {
  display: flex;
  flex-direction: column;
}
body[data-shell="v2"] #app {
  /* flex:1 + auto-Höhe ersetzt das vorherige height:100% aus
     _05-shell-v2.css. min-height:0 ist dort bereits gesetzt (Grid-in-
     Flex-Schrumpfung) und wird hier nicht erneut deklariert. */
  flex: 1 1 0;
  height: auto;
}

/* ════════════════════════════════════════════════════════════════════════
   AppShell — Topbar Visual Polish (Phase 2.5, 2026-05-27)
   ──────────────────────────────────────────────────────────────────────
   1:1 Port der visuellen Antigravity-Topbar-Polish auf taxtello.
   Reference: topbar visual-polish rules (.shell-topbar + .shell-topbar-icon-btn).
   Scope:
     - Topbar bekommt eigene Surface (subtle Höhen-Differenz vs Page-BG)
     - Icon-Buttons (Suche / Glocke / Hilfe / Theme) mit Premium Focus-Ring
       (doppelter Ring: Surface + Accent) und Theme-Icon-Hover-Rotation
     - Notification-Badge mit Surface-Ring (lifted look)
   PRESERVES (per Daniel-Decision 2026-05-27):
     - .shell-topbar-cta (der gelb-gold "+Neu"-Button bleibt unverändert)
     - .shell-topbar-burger / .shell-topbar-logo / .shell-topbar-tenant
   ════════════════════════════════════════════════════════════════════════ */

/* Topbar-Surface: subtle hellere Fläche vs. --bg, damit die Topbar gegen
   den Page-Hintergrund leicht "schwebt". Der bisherige `background:
   var(--bg)` in _05-shell-v2.css wird hier überschrieben.
   Phase 2.5 Hotfix 2026-05-27: + backdrop-filter blur(30px) + shadow-sm
   für die Antigravity-"Glass"-Optik (vorher: opaque, kein Tiefen-Effekt).
   `box-shadow: 0 4px 18px rgba(0,0,0,.35)` matcht Antigravity --shadow-sm. */
body[data-shell="v2"] .shell-topbar {
  background: var(--surface-topbar);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
  padding-left: 28px;
  padding-right: 28px;
  transition: background var(--tr-base, .25s) ease,
              border-color var(--tr-base, .25s) ease;
}

html[data-theme="light"] body[data-shell="v2"] .shell-topbar,
body.light[data-shell="v2"] .shell-topbar {
  box-shadow: 0 4px 16px rgba(15, 23, 42, .04);
}

/* ── Mobile: kein backdrop-filter auf der Topbar ───────────────────────────
   Bug 2026-05-30 (User-Report iPhone Safari): Die Topbar-Dropdowns
   (+ Neu / Hilfe / Konto) wurden oben abgeschnitten. Ursache: der oben
   gesetzte `backdrop-filter: blur(30px)` macht die Topbar laut CSS-Spec zum
   Containing-Block für `position: fixed`-Nachfahren UND klippt diese an der
   Topbar-Box (Filter-Rasterisierungs-Grenze, in WebKit/iOS Safari aktiv). Die
   Mobile-Dropdowns sind genau solche fixed-Nachfahren der Topbar
   (`.shell-quickaction-menu` / `.shell-help-menu` / `.shell-avatar-menu` mit
   `position: fixed; top: calc(var(--shell-mobile-topbar-h) + 6px)`), öffnen
   direkt unter der Topbar und bekamen dadurch ihre obersten Zeilen an der
   Topbar-Unterkante weggeschnitten.

   Fix: auf Drawer-Viewports (≤1023px, wo die Dropdowns in den fixed-Modus
   kippen) den Filter abschalten. `--surface-topbar` ist in Dark UND Light
   opak (hsl(224,25%,5.5%) / #F8FAFC), die Topbar bleibt also voll deckend —
   kein Durchscheinen, nur der subtile Blur-Tiefeneffekt entfällt auf Mobile.
   Ohne Filter ist die Topbar kein fixed-Containing-Block mehr → die Dropdowns
   ankern wieder am Viewport und werden nicht mehr geklippt. Desktop behält die
   „Glass"-Optik unverändert. */
@media (max-width: 1023px) {
  body[data-shell="v2"] .shell-topbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Icon-Button (Such-/Glocken-/Hilfe-/Theme-Toggle) — Premium States.
   `--surface-rgba-base` ist im Dark-Mode der weiße Hover-Tint, im Light
   das slate-Pendant. Die bestehende `.shell-topbar-icon-btn:hover`-Regel
   in _05-shell-v2.css nutzt schon `--shell-sidebar-item-hover`; hier nur
   ergänzen wir die Focus-Ring- und Theme-Icon-Animation.

   Round 42 (2026-05-28, Daniel-Spec): Icon-only Topbar-Actions bekommen
   eine echte runde Hit-Area. Vorher: 36×36 mit radius-sm (≈8px) — unter
   Apple-HIG-Min und visuell nicht rund. Jetzt 40×40 mit border-radius
   999px. Hover/Active/Focus erben die Form automatisch (alle anderen
   States setzen nur background/box-shadow, nicht border-radius). Regel
   ist in docs/architecture/DESIGN.md §4.2.1 dokumentiert. */
body[data-shell="v2"] .shell-topbar-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  /* Vorbereitung für den Doppel-Ring (siehe :focus-visible unten). */
  outline: none;
  /* User-Feedback 2026-06-04: Hit-Area bleibt 40px (Apple-HIG / Touch, Round 42),
     aber der SICHTBARE Hover-/Active-Kreis wirkte zu groß ums kleine Glyph.
     4px transparenter Rand + background-clip:padding-box → Hover-/Active-BG wird
     nur im inneren 32px-Kreis gezeichnet, während der Button voll 40px klickbar
     bleibt. Betrifft alle Topbar-Icons (Suche/Glocke/Hilfe/Theme/Assistant). */
  border: 4px solid transparent;
  background-clip: padding-box;
}

/* Doppelter Focus-Ring: 2px Surface-Topbar als "Spalt", dann 2px Accent.
   Optisch wirkt das wie ein abgesetzter Ring statt direkt am Glyph-Rand.
   Antigravity-Original nutzt einfaches box-shadow + 2px accent — wir
   layern den --surface-topbar darüber, damit auch auf kontrastreichen
   Backgrounds der Ring "atmet". */
body[data-shell="v2"] .shell-topbar-icon-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--surface-topbar),
    0 0 0 4px var(--accent);
}

/* ── KI-Assistent: dezent gold hervorgehoben (User-Wunsch 2026-06-04) ───────
   Der KI-Assistent wird eine zentrale taxtello-Funktion → stärker als die
   normalen Utility-Icons, aber NICHT wie ein zweiter „+Neu". Icon-only.
   NUR Gold-Tint-Fläche + Gold-Icon — KEINE Border, KEIN Glow/Shadow
   (User-Wunsch 2026-06-04: „nur Symbol + runder Button").
   Höhe: erbt die 40px-Hit-Area + den 4px transparenten Rand + background-clip:
   padding-box der Basis-Regel → der sichtbare Gold-Tint ist nur 32px hoch =
   „+Neu" (32px). WICHTIG: `background-color` (NICHT die `background`-Shorthand)
   verwenden — die Shorthand würde `background-clip` auf border-box zurücksetzen
   und der Tint füllte die vollen 40px (Button wirkte größer als +Neu). */
body[data-shell="v2"] .shell-topbar-ai {
  background-color: rgba(232, 184, 75, 0.16);
  color: var(--accent);
}
body[data-shell="v2"] .shell-topbar-ai:hover {
  background-color: rgba(232, 184, 75, 0.24);
  color: var(--accent3);
}
/* Active/Open: stärkerer Tint, kein Schein. */
body[data-shell="v2"] .shell-topbar-ai[aria-expanded="true"] {
  background-color: rgba(232, 184, 75, 0.30);
  color: var(--accent3);
}

/* Light-Mode: der gleiche Gold-Tint ist auf der weißen Topbar (#F8FAFC) zu
   blass und das helle --accent (#e8b84b) als Icon schlecht lesbar. Darum
   kräftigerer Tint + DUNKLERES Gold (--accent2 #c99830 / --accent-deep) fürs
   Icon → klarer Kontrast, Hover deutlich sichtbar. (User-Feedback 2026-06-04.)
   Beide Theme-Schalter abdecken: body.light UND html[data-theme=light]. */
body.light[data-shell="v2"] .shell-topbar-ai,
html[data-theme="light"] body[data-shell="v2"] .shell-topbar-ai {
  background-color: rgba(201, 152, 48, 0.18);
  color: var(--accent2);
}
body.light[data-shell="v2"] .shell-topbar-ai:hover,
html[data-theme="light"] body[data-shell="v2"] .shell-topbar-ai:hover {
  background-color: rgba(201, 152, 48, 0.30);
  color: var(--accent-deep);
}
body.light[data-shell="v2"] .shell-topbar-ai[aria-expanded="true"],
html[data-theme="light"] body[data-shell="v2"] .shell-topbar-ai[aria-expanded="true"] {
  background-color: rgba(201, 152, 48, 0.36);
  color: var(--accent-deep);
}
/* Focus-Ring des KI-Buttons: erbt den Doppel-Ring der Basis-Regel. */

/* ── Separator zwischen KI-Button und Utility-Gruppe ───────────────────────
   Gruppiert, stört nicht: kurz (18px) + dezent (Border-Farbe, halbe Deckkraft).
   Größerer Abstand zur Utility-Gruppe via margin rechts; kleiner Abstand zum
   KI-Button via margin links (Topbar-gap=12px liefert den Rest). */
body[data-shell="v2"] .shell-topbar-sep {
  flex: 0 0 auto;
  width: 1px;
  height: 18px;
  background: var(--border);
  opacity: 0.6;
  margin: 0 10px 0 4px;
}

/* Mobile Calm Topbar (2026-06-06): Phone-Header zeigt links Burger + Logo
   und rechts nur die primären Actions. Voice steht visuell vor Plus, beide
   teilen sich eine 44px-Touchfläche; der Desktop-Flow bleibt unverändert. */
@media (max-width: 600px) {
  body[data-shell="v2"] .shell-topbar {
    gap: 8px;
    /* Bugfix (2026-07-11, User-Feedback): padding-left blieb hier auf dem
       Desktop-Wert 28px (Zeile ~27), während padding-right auf 14px sank
       — der Burger-Button wirkte dadurch fast doppelt so weit vom linken
       Rand entfernt wie der "+Neu"-CTA vom rechten. Beide Seiten jetzt
       gleich, damit Burger und CTA symmetrisch zum Viewport-Rand sitzen. */
    padding-left: 14px;
    padding-right: 14px;
  }

  body[data-shell="v2"] .shell-topbar-ai {
    order: 20;
    width: 44px;
    height: 44px;
  }

  body[data-shell="v2"] .shell-quickaction-wrap {
    order: 30;
    margin-left: -2px;
  }

  body[data-shell="v2"] .shell-topbar-cta {
    width: 44px;
    height: 44px;
    border: 4px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
  }

  body[data-shell="v2"] .shell-notif-wrap {
    order: 18;
  }

  body[data-shell="v2"] .shell-topbar-sep {
    display: none;
  }
}

/* Theme-Icon Hover-Animation (User-Wunsch Daniel 2026-05-27, explicit:
   "leichte Animation auf das Sonne/Mond-Icon"). Antigravity rotiert
   das Glyph um 15deg beim Hover des Buttons; transition auf das SVG. */
body[data-shell="v2"] .shell-theme-icon {
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
  transform-origin: center;
}
body[data-shell="v2"] .shell-topbar-icon-btn:hover .shell-theme-icon {
  transform: rotate(15deg);
}
/* Reduced motion: keine Rotation. */
@media (prefers-reduced-motion: reduce) {
  body[data-shell="v2"] .shell-theme-icon,
  body[data-shell="v2"] .shell-topbar-icon-btn:hover .shell-theme-icon {
    transition: none;
    transform: none;
  }
}

/* Notification-Badge "lifted" gegen den Topbar-Surface (Ring im
   Surface-Color macht den Glow optisch detached). Selektor matcht den
   Original-Topbar-Notif-Dot, falls vorhanden (taxtello hat unread-dot
   im Notif-Wrapper über .shell-notif-wrap). */
body[data-shell="v2"] .shell-notif-badge,
body[data-shell="v2"] .shell-notif-wrap[data-unread="true"] > .shell-topbar-icon-btn::after {
  box-shadow: 0 0 0 2px var(--surface-topbar);
}

/* ────────────────────────────────────────────────────────────────────────
   Round 44 Hotfix 2026-05-28 — Topbar-Dropdown-Clipping
   ──────────────────────────────────────────────────────────────────────
   Bug (User-Report iPhone Safari + Desktop reproduced):
   Dropdowns (Avatar, Help, Notif, Quickaction) öffneten sich auf
   absolute-mode (Desktop) mit `top: calc(100% + 6px)` — wobei `100%` die
   Höhe des `.shell-XXX-wrap` ist. Die Wraps werden vom Topbar-Flex
   (`align-items: center`) vertikal zentriert → wrap.h = 40px (Icon-Btn
   nach Round 42) bzw. 32px (Quickaction-CTA). In einer 56px-Topbar landet
   wrap.bottom bei `(56 - 40)/2 + 40 = 48px` bzw. `(56 - 32)/2 + 32 = 44px`
   — beides VOR dem Topbar-Boden (56px). `top: calc(100% + 6px)` liefert
   damit 54px bzw. 50px → **Dropdown-Top liegt 2-6px hinter Topbar-Boden**
   → erste Menu-Zeile wirkt clipped hinter der Topbar-Border.
   Mobile (≤600px) ist nicht betroffen — dort kickt `position: fixed` mit
   `top: calc(var(--shell-mobile-topbar-h) + 6px)` (Viewport-Anchor).
   Round-42-Hintergrund: 36×36 → 40×40 hat den Clip um 2px reduziert (was
   den Bug subtiler machte), aber nicht behoben. Notif war schon vorher
   clipped (immer 40×40-Icon mit gleicher Math).
   Fix-Strategie: Wraps strecken sich auf volle Topbar-Höhe
   (`align-self: stretch`) und positionieren den Icon-Button intern
   zentriert (`display:flex; align-items:center`). `100%` ist dann
   topbar-h, `top: calc(100% + 6px)` = topbar.bottom + 6 ✓. Mobile-fixed-
   Override bleibt unverändert (greift weiter mit `--shell-mobile-topbar-h`).
   Bonus: gleichzeitig wird `.shell-notif-panel` in den Mobile-fixed-Mode
   einbezogen (war bisher nur via JS-Sheet auf <640px abgefangen; auf
   640-1023px-Viewports stand sie noch im Desktop-Absolute-Mode mit dem
   gleichen Wrap-Math-Bug).
   ──────────────────────────────────────────────────────────────────────── */
body[data-shell="v2"] .shell-avatar-wrap,
body[data-shell="v2"] .shell-help-wrap,
body[data-shell="v2"] .shell-notif-wrap,
body[data-shell="v2"] .shell-quickaction-wrap {
  align-self: stretch;
  display: flex;
  align-items: center;
}

/* Mobile-fixed-Override für die Notification-Panel: bisher nur Sheet auf
   <640px (notifications.js _isMobile); Tablet-Viewports 640–1023 fielen in
   den Desktop-Absolute-Mode zurück und zeigten denselben Clip. */
@media (max-width: 768px) {
  body[data-shell="v2"] .shell-notif-panel {
    position: fixed;
    top: calc(var(--shell-mobile-topbar-h) + 6px);
    right: 10px;
    width: min(460px, calc(100vw - 20px));
  }
}

/* ════════════════════════════════════════════════════════════════════════
   AppShell — Sidebar Visual Polish (Phase 2.5, 2026-05-27)
   ──────────────────────────────────────────────────────────────────────
   1:1 Port der visuellen Antigravity-Sidebar-Polish auf taxtello.
   Reference: sidebar visual-polish rules (.shell-sidebar + children).
   Scope:
     - Item-Hover/Active mit Accent-Glow-Backplate + dezenter Gold-Border
     - Active-Indicator-Bar (Indicator links neben aktivem Item, abgerundet)
     - Section-Labels (UPPERCASE, kräftiger letter-spacing/weight)
     - Submenu Open/Close Animation (max-height + opacity)
     - Item-Badge: gold-Pille mit Shadow-Glow (für die "15" bei Prüfen)
     - Divider zwischen Gruppen
     - Brand-Wordmark Höhe + Hover-States
   PRESERVES (per DESIGN.md §3.5 / PR #2661 / Daniel-Decision 2026-05-26):
     - .shell-sidebar-account / .nav-avatar / .nav-user-info — unverändert.
       Selektoren tauchen hier NICHT auf. Profile-Block in
       _05-shell-v2.css:1750–1996 bleibt intact.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Sidebar Container: bump backdrop-blur 20px → 30px ────────────────
   Antigravity nutzt `--glass-blur: blur(30px)` Dark und `blur(20px)` Light.
   _05-shell-v2.css macht den 20px-Fallback; hier überschreiben wir Dark
   auf 30px für die Antigravity-"Editorial SaaS"-Tiefe. */
@supports (backdrop-filter: blur(30px)) or (-webkit-backdrop-filter: blur(30px)) {
  body[data-shell="v2"] .shell-sidebar {
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
  }
  /* Phase 2.5 Round-4 2026-05-27: Antigravity-Spec Light-Sidebar = pure
     #FFFFFF SOLID. _05-shell-v2.css setzt im selben @supports-Block
     `background: rgba(var(--shell-sidebar-bg-rgb), 0.72)` — selbst mit
     RGB 255,255,255 ergibt das nur 72% Weiß über #f5f7fa-bg, also
     ~#fcfdfd (subtle gray tint). Override auf SOLID var(--surface-sidebar)
     = #ffffff für 1:1 Antigravity-Match. Hohe Specificity nötig damit
     wir das @supports-Override aus _05-shell-v2.css schlagen. */
  html[data-theme="light"] body[data-shell="v2"] .shell-sidebar,
  body.light[data-shell="v2"] .shell-sidebar {
    background: var(--surface-sidebar);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
}

/* Sidebar-Header Border per Antigravity-Spec: fluchtet mit Topbar bei
   height 52px, border-bottom 1px solid var(--border-shell)=#e2e8f0 Light
   bzw. rgba(255,255,255,.08) Dark. Bestehende _05-shell-v2.css setzt
   ein anderes border-bottom über `--border` — wir spiegeln das auf
   --border-alpha für visuelle Konsistenz mit der Topbar. */
body[data-shell="v2"] .shell-sidebar-header {
  border-bottom-color: var(--border-alpha);
}

/* ── Sidebar-Item: Hover + Active Polish ────────────────────────────── */

/* Smoother Transition als die bestehende background-only-Regel — Border
   wird mit-animiert, damit der active-Border nicht hart einsnappt.
   Phase 2.5 Hotfix 2026-05-27: padding/gap/border-radius auf
   Antigravity-Spec (8px 12px / 10px / 14px statt 10px 12px / 12px / 8px).
   Daniel-Befund: "auch font, abstände anders". */
body[data-shell="v2"] .shell-sidebar-item {
  border: 1px solid transparent;
  padding: 8px 12px;
  gap: 10px;
  border-radius: 14px;
  font-size: 14.5px;
  font-weight: 600;
  /* Phase 2.5 Round-4 2026-05-27: Antigravity-Spec letter-spacing -0.01em
     für Plus Jakarta Sans bei 14.5px — straffer, premium-look. */
  letter-spacing: -0.01em;
  transition: background var(--tr-fast),
              color var(--tr-fast),
              border-color var(--tr-fast);
}

/* Phase 2.5 Round-4 2026-05-27: Submenu-Items per Antigravity-Spec:
   13.5px, weight 500 default / 700 active. */
body[data-shell="v2"] .shell-sidebar-submenu-item {
  font-size: 13.5px;
  font-weight: 500;
}
body[data-shell="v2"] .shell-sidebar-submenu-item.active {
  font-weight: 700;
}

/* Sidebar Body: Antigravity gap zwischen Gruppen + horizontales Padding.
   Antigravity: padding 14px 12px 8px, gap 12px zwischen Gruppen. */
body[data-shell="v2"] .shell-sidebar-body {
  padding: 14px 12px 8px;
  gap: 12px;
}

/* Sidebar Group: kleinerer gap zwischen Items innerhalb einer Gruppe
   (Antigravity: 2px) — kompakter look. */
body[data-shell="v2"] .shell-sidebar-group {
  gap: 2px;
}

/* Active-Item: Accent-Glow-Backplate (statt nur .12 alpha) + dezenter
   Gold-Border. Bestehende `.shell-sidebar-item.active`-Regel in
   _05-shell-v2.css setzt background, color, font-weight. Wir layern
   hier nur Border + verstärken Background. */
body[data-shell="v2"] .shell-sidebar-item.active {
  background: var(--accent-glow-strong);
  border-color: var(--accent-border-soft);
}

/* Indicator-Bar (gold Strich). Round 43 (2026-05-28, Daniel-Spec):
   Indicator wandert von OUTSIDE (left:-6px, halb-Pill border-radius
   0 4px 4px 0, blutete links aus der Active-Fläche raus) auf INSIDE
   (left:8px, voll innerhalb der Pill, beidseitig abgerundet als kleine
   Mini-Pille). Antigravity-Referenz zeigt den Indicator INNERHALB der
   aktiven Markierung — sauberere "hugged"-Variante. Höhe leicht
   reduziert auf 50% damit er optisch kompakt bleibt. Bestehende
   _05-shell-v2.css setzt left:-8px; hier überschreiben mit positivem
   Offset + voller Pill-Form. */
body[data-shell="v2"] .shell-sidebar-item.active::before {
  left: 8px;
  top: 25%;
  bottom: auto;
  height: 50%;
  width: 3px;
  background: var(--accent);
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(232, 184, 75, 0.45);
}

/* Collapsed-Sidebar: 64px schmal, da gibt es kein Platz für left:8px-
   Indicator + zentriertes Icon. Indicator-Bar deshalb im Collapsed-
   Modus ausblenden — die Active-Background-Pille bleibt sichtbar. */
body[data-shell="v2"][data-shell-sidebar="collapsed"] .shell-sidebar-item.active::before {
  display: none;
}

/* ── Sidebar Collapse/Expand Motion (Round 43, 2026-05-28) ────────────
   Bestehende Sidebar snappte hart beim Collapse/Expand, weil das App-
   Grid `grid-template-columns: var(--shell-sidebar-w-current,...) 1fr`
   keine Transition hatte. Modern Browsers (Chrome 111+, Firefox 117+,
   Safari 17+) können grid-template-columns animieren. Bei älteren
   Browsern ist das Fallback das aktuelle Snap-Verhalten — kein
   Functional-Loss.

   Easing matches die bestehenden Chevron/Brand-Transitions in dieser
   Datei (cubic-bezier(.16,1,.3,1)). Duration 0.28s liegt zwischen
   tr-fast (0.15s) und tr-drawer (0.4s) — weich, aber nicht träge. */
body[data-shell="v2"] #app {
  transition: grid-template-columns 0.28s cubic-bezier(.16, 1, .3, 1);
}

/* Item-Label fade-out beim Collapse — Labels selbst gehen weiterhin
   `display: none` (sonst nehmen sie im 64px-Rail Platz weg), aber
   während sie sichtbar sind kriegen sie eine subtle opacity-Transition
   für expand-Richtung. */
body[data-shell="v2"] .shell-sidebar-item-label,
body[data-shell="v2"] .shell-sidebar-item-badge {
  transition: opacity 0.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  body[data-shell="v2"] #app,
  body[data-shell="v2"] .shell-sidebar-item-label,
  body[data-shell="v2"] .shell-sidebar-item-badge {
    transition: none;
  }
}

/* Active-Item-Icon: NUR accent-coloured (Farbe kommt aus der .active-Regel).
   Feinschliff 2026-06-06: drop-shadow-„glow" entfernt — er verdickte die
   Linien optisch und ließ das aktive Icon schwerer wirken als inaktive. Der
   aktive Zustand kommt über Farbe + linke Goldmarkierung + Hintergrundfläche,
   NICHT über mehr Icon-Gewicht. */

/* ── Section-Labels (Bank/Rechnungen, Prüfen/Betrieb) ───────────────── */

/* Kräftiger UPPERCASE-Look statt der bisherigen halb-uppercase. */
body[data-shell="v2"] .shell-sidebar-group-label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 8px 12px 6px;
  margin-bottom: 2px;
}

/* ── Divider zwischen Gruppen ──────────────────────────────────────── */

/* Optional einsetzbar via JS, falls die Sidebar-Renderer Divider-Nodes
   ausgibt. Antigravity nutzt das zwischen Section-Gruppen. */
body[data-shell="v2"] .shell-sidebar-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 16px;
  opacity: .4;
  border: 0;
}
body[data-shell="v2"][data-shell-sidebar="collapsed"] .shell-sidebar-divider {
  margin: 10px 8px;
}

/* ── Item-Badge (z.B. "15" bei Prüfen) ─────────────────────────────── */

/* Premium Gold-Pille mit Shadow-Glow. Bestehende Regel in
   _05-shell-v2.css nutzt `--accent-soft` Background + `--accent`-Color
   (dezenter Pillen-Look). Antigravity-Original: solides --accent
   Background mit dunklem Ink-Text und Shadow. Beides ist valide —
   Daniel wünscht "1:1 Antigravity": wir gehen auf solides accent. */
body[data-shell="v2"] .shell-sidebar-item-badge {
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  min-width: 20px;
  text-align: center;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(232, 184, 75, 0.25);
}

/* Aktives Item mit Badge: Badge bleibt solid (kein Conflict mit der
   accent-glow-Backplate dahinter). */
body[data-shell="v2"] .shell-sidebar-item.active .shell-sidebar-item-badge {
  box-shadow: 0 2px 8px rgba(232, 184, 75, 0.40);
}

/* Collapsed-Mode: Badge wird kleiner Marker oben rechts. Bestehende
   Regel in _05-shell-v2.css zeigt Badge nicht im collapsed-Mode
   (display:none) — wir respektieren das und ergänzen nur den Style,
   falls eine zukünftige Version das Badge im Rail behält. */
body[data-shell="v2"][data-shell-sidebar="collapsed"] .shell-sidebar-item-badge {
  font-size: 8px;
  padding: 1px 4px;
  min-width: 14px;
}

/* ── Submenu Open/Close Animation ──────────────────────────────────── */

/* taxtello toggled Submenüs via `[hidden]`-Attribut (siehe _05-shell-v2.css
   .shell-sidebar-submenu[hidden] {display:none!important}). Eine echte
   max-height-Transition zwischen hidden/visible greift nicht (display:none
   skipped Layout). Wir verstärken hier nur die sichtbare Variante mit
   einer subtilen fade-in-Animation, sodass beim Aufklappen ein weicher
   Übergang entsteht — und nicht so hartes "pop". */
body[data-shell="v2"] .shell-sidebar-submenu:not([hidden]) {
  animation: shellSidebarSubmenuFadeIn .25s cubic-bezier(.16, 1, .3, 1);
}
@keyframes shellSidebarSubmenuFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-shell="v2"] .shell-sidebar-submenu:not([hidden]) {
    animation: none;
  }
}

/* Chevron-Rotation beim aufgeklappten Parent. taxtello nutzt
   `.shell-sidebar-item-chev` (NICHT `-chevron`) und togglet
   aria-expanded am Parent-Item statt einer `.open`-Klasse. */
body[data-shell="v2"] .shell-sidebar-item-chev {
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
body[data-shell="v2"] .shell-sidebar-item[aria-expanded="true"] .shell-sidebar-item-chev {
  transform: rotate(180deg);
  color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  body[data-shell="v2"] .shell-sidebar-item-chev,
  body[data-shell="v2"] .shell-sidebar-item[aria-expanded="true"] .shell-sidebar-item-chev {
    transition: none;
  }
}

/* ── Brand-Wordmark Hover/Sizing ───────────────────────────────────── */

/* Antigravity setzt Wordmark auf 20px Höhe mit `width:auto !important`
   (überschreibt HTML width-attribute). taxtello hat schon Höhe in
   _05-shell-v2.css; hier ergänzen wir nur eine smooth-Transition für
   den Theme-Wechsel + Focus-Visible Indikator (a11y). */
body[data-shell="v2"] .shell-sidebar-brand-wordmark {
  transition: opacity var(--tr-base, .25s) ease;
}
body[data-shell="v2"] .shell-sidebar-brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Brand-Mark (T-Logo) im collapsed-Mode bekommt smoother Hover. */
body[data-shell="v2"] .shell-sidebar-brand-mark {
  transition: transform var(--tr-fast) ease;
}
body[data-shell="v2"] .shell-sidebar-brand:hover .shell-sidebar-brand-mark {
  transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
  body[data-shell="v2"] .shell-sidebar-brand-mark,
  body[data-shell="v2"] .shell-sidebar-brand:hover .shell-sidebar-brand-mark {
    transition: none;
    transform: none;
  }
}

/* ── Mobile-Drawer: Safe-Area-Inset respektieren (Notch / Dynamic Island) ──
   Bug 2026-05-30 (User-Report „Mobile schneidet die App-Shell oben alle Menüs
   ab"): Die App läuft als installierte PWA (`display: standalone` in
   manifest.json, `viewport-fit=cover` in EUER.html), daher liegt der
   Web-Content unter Notch/Dynamic-Island. Die sticky Topbar gleicht das
   bereits aus — über `--shell-mobile-topbar-h` (= 56px +
   env(safe-area-inset-top)) plus eigenes `padding-top` — und die Topbar-
   Dropdowns öffnen über demselben Token unterhalb der Notch.

   Der Mobile-Drawer (`.shell-sidebar` als `position: fixed; top: 0;
   height: 100dvh` in _05-shell-v2.css) tat das NICHT: Drawer-Header (Logo +
   Schließen-X) und die ersten Nav-Items rutschten hinter Statusbar/Notch und
   waren oben abgeschnitten. Wir reservieren den Inset als Container-Padding —
   der Sidebar-Hintergrund füllt den Notch-Bereich, der Menü-Inhalt liegt
   darunter. Bottom-Inset hält das letzte Footer-Item über dem Home-Indicator.
   Der Container scrollt (`overflow-y: auto`), Border-Box hält die Gesamthöhe
   bei 100dvh — nichts wird abgeschnitten. Scope `max-width: 1023px`, damit die
   Grid-Sidebar auf Desktop unberührt bleibt. */
@media (max-width: 1023px) {
  body[data-shell="v2"] .shell-sidebar {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

.shell-shortcuts-dynamic-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: var(--fs-xs);
  color: var(--text2);
  user-select: none;
}

.shell-shortcuts-dynamic-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ───────────────────────────────────────────────────────────────────
 * Unified global search (Command Palette + Help layer) — 2026-06-05
 *
 * Renders inside #shell-search-overlay (markup in EUER.html, behaviour in
 * public/js/global-search.js). Replaces the former help-search overlay CSS.
 * The overlay shell itself (.shell-search-overlay / -modal / -input / -clear /
 * -esc / -results / -footer base) lives in _05-shell-v2-sidebar.css; this file
 * adds the unified states: empty/chips, result rows + badges, no-match, and the
 * inline answer panel. Tokens only — no hard-coded colours.
 * ─────────────────────────────────────────────────────────────────── */

/* The results list is hidden in the answer state so the answer panel replaces
   it exclusively (markup base lives in _05-shell-v2-sidebar.css). */
.shell-search-results.is-hidden { display: none; }

/* ── Empty-State: explanation + suggestion chips ──────────────────── */
.global-search-empty { padding: 14px 18px 4px; }
.global-search-empty.is-hidden { display: none; }
.gs-empty-lead {
  color: var(--text2);
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0 0 10px;
}
.gs-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 12px; }
.gs-chip {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text2);
  font-size: 12px;
  font-family: inherit;
  padding: 6px 13px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.gs-chip:hover { border-color: var(--border2); color: var(--text); background: var(--bg2); }
.gs-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Result groups + rows ─────────────────────────────────────────── */
.gs-section-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 10px 12px 5px;
}
.gs-item {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 11px 13px;
  background: transparent;
  border: 0;
  text-align: left;
  color: var(--text);
  font-size: 13.5px;
  font-family: inherit;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.gs-item:hover,
.gs-item.is-highlighted { background: var(--shell-sidebar-item-hover); }
.gs-item.is-highlighted { box-shadow: inset 0 0 0 1px var(--border2); }
.gs-item-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--text2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gs-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gs-item-title { color: var(--text); line-height: 1.3; }
.gs-item-desc {
  font-size: 11.5px;
  color: var(--text3);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Type badges (dezente Outline-Pills, kein Ampel-Look) ─────────── */
.gs-badge {
  font-size: var(--fs-xs);
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text3);
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
/* Badge tints reuse the design-system tone tokens: action = gold accent,
   page = info (blue), help = good (green), data = neutral. Borders use the
   matching tone-border so the pills stay quiet outlines, not filled chips. */
.gs-badge--action { color: var(--accent); border-color: var(--accent-deep); }
.gs-badge--page   { color: var(--tone-info-fg); border-color: var(--tone-info-border); }
.gs-badge--help   { color: var(--tone-good-fg); border-color: var(--tone-good-border); }
.gs-badge--data   { color: var(--text2); }

/* ── No-match state ───────────────────────────────────────────────── */
.gs-nomatch { padding: 22px 16px; text-align: center; }
.gs-nomatch-msg { color: var(--text2); font-size: 13px; margin: 0 0 4px; }
.gs-nomatch-sub { color: var(--text3); font-size: 12px; margin: 0; }
/* Explicit opt-in KI deep-search button (no-match, help-intent only). */
.gs-ai-search {
  margin-top: 14px;
  background: var(--card2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12.5px;
  font-family: inherit;
  padding: 8px 16px;
  cursor: pointer;
}
.gs-ai-search:hover { border-color: var(--accent); }
.gs-ai-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Inline answer panel (help detail) ────────────────────────────── */
/* Scrolls independently so long KI answers never get clipped in the modal. */
.global-search-answer { padding: 16px 18px; overflow-y: auto; flex: 1; min-height: 0; }
.global-search-answer.is-hidden { display: none; }
.gs-answer-back {
  background: transparent;
  border: 0;
  color: var(--text2);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  padding: 0 0 10px;
}
.gs-answer-back:hover { color: var(--text); }
.gs-answer-title { font-size: var(--fs-md); color: var(--text); margin: 0 0 4px; }
.gs-answer-path { font-size: 11.5px; color: var(--text3); margin: 0 0 12px; }
.gs-answer-text { font-size: 13.5px; color: var(--text); line-height: 1.6; margin: 0 0 14px; }
.gs-answer-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 12.5px;
  font-family: inherit;
  padding: 8px 14px;
  cursor: pointer;
}
.gs-answer-cta:hover { border-color: var(--accent); }
.gs-answer-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gs-answer-taxnote {
  font-size: 11.5px;
  color: var(--text3);
  line-height: 1.5;
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* ── Footer hints (contextual: list vs answer) ────────────────────── */
.shell-search-footer { display: flex; align-items: center; gap: 8px; }
.gs-hint { color: var(--text3); font-size: 11.5px; }
.gs-hint-sep { color: var(--border2); font-size: 11.5px; }

@media (max-width: 600px) {
  .gs-chip { padding: 8px 14px; min-height: 36px; }
}

/* ===== TRIAL BANNER ===== */
#trial-banner{display:none;align-items:center;justify-content:center;gap:10px;padding:8px 18px;background:linear-gradient(90deg,rgba(var(--accent-rgba-base),.08) 0%,rgba(var(--accent-rgba-base),.04) 100%);border-bottom:1px solid rgba(var(--accent-rgba-base),.22);font-size:12.5px;flex-wrap:wrap;row-gap:var(--space-xs);}
#trial-banner.show{display:flex;}
.trial-banner-text{color:var(--text2);}
.trial-banner-days{font-weight:var(--fw-bold);color:var(--accent);}
.trial-banner-days.urgent{color:var(--red);}
.trial-banner-cta{background:var(--accent);color:var(--accent-ink);border:none;border-radius:var(--radius-sm);padding:4px 12px;font-size:12px;font-weight:var(--fw-bold);cursor:pointer;font-family:inherit;text-decoration:none;transition:background .15s;white-space:nowrap;}
.trial-banner-cta:hover{background:var(--accent2);}
.trial-banner-dismiss{margin-left:4px;background:none;border:none;color:var(--text3);cursor:pointer;font-size:14px;padding:2px 4px;line-height:1;opacity:.7;transition:opacity .15s;}
.trial-banner-dismiss:hover{opacity:1;}
/* ===== PAST_DUE BANNER ===== */
#pastdue-banner{display:none;align-items:center;justify-content:center;gap:10px;padding:9px 18px;background:linear-gradient(90deg,rgba(248,113,113,.1) 0%,rgba(248,113,113,.05) 100%);border-bottom:1px solid rgba(248,113,113,.28);font-size:12.5px;flex-wrap:wrap;row-gap:var(--space-xs);}
#pastdue-banner.show{display:flex;}
.pastdue-text{color:var(--text2);}
.pastdue-highlight{font-weight:var(--fw-bold);color:var(--red);}
.pastdue-cta{background:var(--red);color:white;border:none;border-radius:var(--radius-sm);padding:4px 12px;font-size:12px;font-weight:var(--fw-bold);cursor:pointer;font-family:inherit;text-decoration:none;transition:background .15s;white-space:nowrap;}
.pastdue-cta:hover{background:var(--red);}
/* Maintenance Overlay extrahiert nach _15-maintenance.css (LOC-Budget). */
/* Onboarding-Checkliste: siehe _15-onboarding.css */
.native-date-proxy{position:fixed;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none;z-index:-1;}
/* ===== TOPBAR ===== */
/* ── Two-level navigation ──────────────────────────── */
.topbar{background:var(--bg2);position:sticky;top:0;z-index:100;border-bottom:1px solid rgba(var(--surface-rgba-base),.05);}
.nav-primary{display:flex;align-items:center;padding:0 18px;height:52px;}
.topbar-logo{display:flex;align-items:center;gap:14px;margin-right:22px;white-space:nowrap;flex-shrink:0;cursor:default;user-select:none;}
/* Wordmark PNG statt Text. 2x retina (183×40 source, 91×20 display). */
.topbar-logo-wordmark{
  height:16px;width:auto;
  display:block;
  opacity:.92;
  transition:opacity .2s ease,filter .2s ease;
  flex-shrink:0;
}
.topbar-logo:hover .topbar-logo-wordmark{
  opacity:1;
  filter:brightness(.88);
}
/* Legacy fallback — Text-Brand verborgen wenn Wordmark vorhanden.
   Bleibt im HTML als alt-Text-Quelle erhalten, aber CSS versteckt es. */
.topbar-logo-brand{font-size:16px;font-weight:var(--fw-heavy);color:var(--accent);letter-spacing:-.4px;line-height:1;}
.topbar-logo-sub{display:none;}
.yr-lbl-btn{display:inline-flex;align-items:center;gap:6px;background:var(--bg2);border:1px solid var(--border);color:var(--text2);font:inherit;font-size:13px;font-weight:var(--fw-semibold);cursor:pointer;padding:5px 10px 5px 11px;border-radius:8px;transition:all .15s;line-height:1.2;letter-spacing:.01em;flex-shrink:0;}
.yr-lbl-btn:hover{color:var(--accent);border-color:rgba(240,193,95,.4);background:rgba(240,193,95,.08);}
.yr-lbl-btn .yr-lbl-icon{opacity:.65;flex-shrink:0;}
.yr-lbl-btn:hover .yr-lbl-icon{opacity:1;}
.yr-lbl-btn .yr-lbl-chev{opacity:.55;flex-shrink:0;margin-left:1px;}
.yr-picker-ov{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999;display:flex;align-items:center;justify-content:center;}
.yr-picker-dlg{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);width:440px;max-width:94vw;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.4);}
.yr-picker-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 14px;border-bottom:1px solid var(--border);}
.yr-picker-title{font-size:15px;font-weight:var(--fw-bold);color:var(--text);letter-spacing:.01em;}
.yr-picker-section{font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.1em;text-transform:uppercase;color:var(--text3);padding:16px 20px 2px;}
.yr-picker-hint{font-size:var(--fs-sm);color:var(--text3);padding:0 20px 10px;line-height:1.4;}

/* ── Chip timeline ── */
/* padding-top must clear .yr-chip-badge{top:-7px}; dlg has overflow:hidden */
.yr-chip-strip{display:flex;gap:10px;padding:14px 20px 10px;overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
.yr-chip-strip::-webkit-scrollbar{height:6px;}
.yr-chip-strip::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
.yr-chip{position:relative;flex:0 0 auto;min-width:96px;border:1px solid var(--border);border-radius:12px;background:var(--card2);transition:background .14s,border-color .14s,transform .14s,box-shadow .14s;}
.yr-chip:hover{border-color:rgba(240,193,95,.35);transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.18);}
.yr-chip.is-current{border-color:rgba(240,193,95,.55);background:rgba(240,193,95,.08);box-shadow:0 0 0 1px rgba(240,193,95,.25) inset;}
.yr-chip.has-data::before{content:"";position:absolute;top:8px;right:8px;width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.75;}
.yr-chip.is-current.has-data::before{display:none;}
.yr-chip-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:10px 12px 11px;background:none;border:none;color:var(--text2);cursor:pointer;font-family:inherit;text-align:left;border-radius:12px;}
.yr-chip-btn:hover{color:var(--text);}
.yr-chip-year{font-size:17px;font-weight:var(--fw-bold);color:var(--text);letter-spacing:.01em;line-height:1.1;}
.yr-chip.is-current .yr-chip-year{color:var(--accent);}
.yr-chip-meta{font-size:11px;color:var(--text3);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.yr-chip-badge{position:absolute;top:-7px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:var(--fw-bold);background:var(--accent);color:var(--accent-ink);border-radius:4px;padding:1px 6px;letter-spacing:.08em;text-transform:uppercase;pointer-events:none;box-shadow:0 2px 6px rgba(240,193,95,.3);}
.yr-chip-del{position:absolute;top:6px;right:6px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:rgba(127,29,29,.12);border:1px solid transparent;border-radius:6px;color:var(--tone-poor-fg);cursor:pointer;transition:background .14s,border-color .14s,color .14s;padding:0;opacity:0;}
.yr-chip:hover .yr-chip-del{opacity:1;}
.yr-chip-del:hover{background:rgba(127,29,29,.3);border-color:rgba(127,29,29,1);color:rgba(254,202,202,1);}
.yr-chip-del:focus-visible{opacity:1;outline:2px solid rgba(248,113,113,.45);outline-offset:1px;}

/* ── Neues Jahr anlegen ── */
.yr-picker-new{display:flex;flex-direction:column;gap:10px;padding:4px 20px 18px;}
.yr-quick-group{display:flex;gap:8px;}
.yr-quick-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 10px;background:var(--card2);border:1px solid var(--border);border-radius:8px;color:var(--text2);font-size:12px;font-weight:var(--fw-semibold);cursor:pointer;font-family:inherit;transition:background .14s,border-color .14s,color .14s;}
.yr-quick-btn:hover{background:var(--card);border-color:rgba(240,193,95,.35);color:var(--text);}
.yr-quick-btn:focus-visible{outline:2px solid rgba(240,193,95,.4);outline-offset:1px;}
.yr-new-row{display:flex;gap:10px;align-items:stretch;}
.yr-new-input{flex:1;font-size:15px;}
.yr-new-input>input[type=number]{font-size:15px;font-weight:var(--fw-semibold);}
.yr-new-input:focus-within{border-color:rgba(232,184,75,.45);box-shadow:0 0 0 3px rgba(232,184,75,.12);}
.yr-new-btn{display:flex;align-items:center;gap:6px;padding:0 16px;font-weight:var(--fw-semibold);flex:0 0 auto;}
.yr-picker-footnote{font-size:11px;color:var(--text3);line-height:1.3;padding:0 2px;}
.yr-new-err{font-size:12px;color:var(--red);min-height:18px;display:flex;align-items:center;gap:6px;padding:0 2px;line-height:1.3;}
.yr-new-err svg{flex-shrink:0;}
/* native spinner already removed globally by input[type=number] rule */
.nav-main{display:flex;flex:1;gap:0;}
.nav-main-tab{padding:0 11px;height:52px;display:flex;align-items:center;gap:5px;font-size:13.5px;font-weight:var(--fw-medium);color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;border-top:none;border-left:none;border-right:none;white-space:nowrap;transition:color .15s,border-color .15s;user-select:none;background:none;font-family:inherit;}
.nav-main-tab:hover{color:var(--text);}
.nav-main-tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:var(--fw-bold);}
.nav-main-tab.settings-tab{margin-left:4px;}
/* ── Grouped dropdown navigation ── */
.nav-group{position:relative;display:flex;align-items:center;}
.nav-group-trigger{padding:0 12px;height:52px;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:var(--fw-medium);color:var(--text3);cursor:pointer;border:none;border-bottom:2px solid transparent;white-space:nowrap;transition:color .15s,border-color .15s,background .15s;user-select:none;background:none;font-family:inherit;border-radius:0;}
.nav-group-trigger:hover{color:var(--text);background:rgba(var(--text-rgba-base),.04);}
.nav-group-trigger.has-active{color:var(--accent);font-weight:var(--fw-bold);border-bottom-color:var(--accent);}
.nav-group-label{letter-spacing:.01em;}
.nav-group-chevron{opacity:.4;transition:transform .2s ease,opacity .15s;margin-left:0;}
.nav-group.open .nav-group-chevron,.nav-group:hover .nav-group-chevron{transform:rotate(180deg);opacity:.7;}
/* Hover-open: visibility+opacity with delay-on-hide prevents jitter when crossing gap */
.nav-group-panel{visibility:hidden;opacity:0;pointer-events:none;transform:translateY(-5px);transition:opacity .14s ease,transform .14s ease,visibility 0s linear .2s;position:absolute;top:100%;left:0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 12px 32px rgba(0,0,0,.25),0 2px 8px rgba(0,0,0,.1);min-width:190px;padding:5px;z-index:200;}
.nav-group-panel--sectioned{min-width:268px;padding:7px;}
/* Bridge: invisible area above panel so :hover never breaks when crossing the gap */
.nav-group-panel::before{content:'';position:absolute;top:-8px;left:0;right:0;height:8px;}
.nav-group:hover>.nav-group-panel,.nav-group.open .nav-group-panel{visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0);transition:opacity .14s ease,transform .14s ease;}
.nav-group-section{padding:2px 0;}
.nav-group-section+.nav-group-section{border-top:1px solid var(--border);margin-top:6px;padding-top:8px;}
.nav-group-section-label{padding:4px 10px 6px;font-size:10px;font-weight:var(--fw-bold);line-height:1.2;color:var(--text3);text-transform:uppercase;}
.nav-group-item{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:var(--radius2);font-size:13px;font-weight:var(--fw-medium);color:var(--text2);cursor:pointer;transition:all .12s;border:none;background:none;width:100%;text-align:left;font-family:inherit;white-space:nowrap;}
.nav-group-item:hover{background:var(--card2);color:var(--text);}
.nav-group-item.active{color:var(--accent);font-weight:var(--fw-bold);background:rgba(var(--text-rgba-base),.04);}
.nav-group-item-strong{font-weight:var(--fw-bold);color:var(--text);}
.nav-group-item-label{min-width:0;}
.nav-item-meta-badge{display:inline-flex;align-items:center;justify-content:center;margin-left:2px;padding:2px 6px;border-radius:5px;background:rgba(232,184,75,.1);color:var(--accent);font-size:9px;font-weight:var(--fw-bold);letter-spacing:0;text-transform:uppercase;line-height:1.2;}
.nav-group-item .nav-badge{margin-left:auto;}
.nav-group-quick{display:flex;align-items:center;gap:6px;margin:7px 0 9px 31px;padding:7px 10px;border-radius:var(--radius2);border:none;background:rgba(232,184,75,.1);color:var(--accent);font-size:12px;font-weight:var(--fw-semibold);font-family:inherit;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s;}
.nav-group-quick:hover{background:rgba(232,184,75,.16);color:var(--accent2);}
.nav-group-quick.active{background:rgba(232,184,75,.16);color:var(--accent2);}
.nav-group-quick span{font-size:14px;line-height:1;}
.nav-group-badge{margin-left:-2px;}
@media(prefers-reduced-motion:reduce){.nav-group-panel{transition:none;}}
.nav-badge{display:inline-flex;align-items:center;justify-content:center;background:var(--red);color:white;font-size:var(--fs-xs);font-weight:var(--fw-bold);min-width:16px;height:16px;border-radius:8px;padding:0 3px;line-height:1;}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:6px;flex-shrink:0;padding-left:12px;border-left:1px solid var(--border);}
/* Month bar */
.nav-months-bar-wrap{position:relative;}
.nav-months-bar-wrap::after{content:'';position:absolute;top:0;right:0;bottom:0;width:28px;background:linear-gradient(to right,transparent,var(--bg));pointer-events:none;z-index:1;display:none;}
@media(max-width:768px){.nav-months-bar-wrap::after{display:block;}}
.nav-months-bar{display:flex;align-items:center;padding:6px 18px;height:auto;min-height:44px;background:var(--bg);border-top:1px solid var(--border);gap:var(--space-xs);overflow-x:auto;scrollbar-width:none;}
.nav-months-bar::-webkit-scrollbar{display:none;}
.nav-month-tab{padding:4px 12px;height:30px;display:flex;align-items:center;font-size:12.5px;font-weight:var(--fw-medium);color:var(--text3);opacity:.6;cursor:pointer;border-radius:var(--radius2);white-space:nowrap;transition:all .15s;user-select:none;border:1px solid transparent;background:none;font-family:inherit;}
.nav-month-tab:hover{color:var(--text);opacity:1;background:rgba(var(--surface-rgba-base),.06);}
.nav-month-tab.active{color:var(--accent);opacity:1;background:rgba(232,184,75,.12);border-color:rgba(232,184,75,.3);font-weight:var(--fw-bold);box-shadow:0 0 0 1px rgba(232,184,75,.08);}
/* Mobile */
@media(max-width:768px){
  .nav-primary{flex-wrap:wrap;height:auto;padding:8px 12px 6px;}
  .topbar-logo{margin-right:auto;gap:10px;}
  .yr-lbl-btn{padding:4px 9px;font-size:12.5px;gap:5px;}
  .yr-lbl-btn .yr-lbl-icon{width:12px;height:12px;}
  .nav-right{border-left:none;padding-left:0;margin-left:0;gap:var(--space-xs);}
  .nav-right .btn-tb{padding:3px 7px;font-size:var(--fs-xs);}
  .nav-right .server-status{font-size:9px;}
  /* Hide nav tabs — hamburger menu takes over at ≤768px */
  .nav-main{display:none!important;}
  .mob-hamburger{display:flex!important;}
  .nav-sep{display:none;}
  .nav-months-bar{padding:5px 12px;min-height:40px;}
  .nav-month-tab{padding:3px 10px;height:28px;font-size:11.5px;}
}
/* Legacy alias – keeps old .nav-tabs / .nav-tab refs working (print CSS etc.) */
.nav-tabs{display:none;}
.nav-tab{display:none;}
/* ── Nav-right groups & user-area buttons ── */
.nav-sep{width:1px;height:16px;background:var(--border);margin:0 4px;flex-shrink:0;opacity:.5;}
.btn-nav-lbl{display:inline-flex!important;align-items:center;gap:5px;}
.btn-nav-konto{color:var(--text)!important;font-weight:var(--fw-semibold);}
/* ── Trial-Chip ── */
.trial-chip{display:inline-flex;align-items:center;gap:var(--space-xs);padding:3px 10px;border-radius:var(--radius2);font-size:10.5px;font-weight:var(--fw-bold);color:var(--accent);background:rgba(240,193,95,.08);border:1px solid rgba(240,193,95,.25);white-space:nowrap;transition:all .15s;letter-spacing:.01em;}
.trial-chip:hover{background:rgba(240,193,95,.14);border-color:rgba(240,193,95,.4);color:var(--accent);}
.trial-chip.urgent{color:var(--red);background:rgba(248,113,113,.06);border-color:rgba(248,113,113,.25);}
.trial-chip.urgent:hover{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.4);}
/* ── Konto-Dropdown ── */
.nav-account{position:relative;}
.nav-account-chevron{opacity:.5;transition:transform .15s;margin-left:-1px;}
.nav-account.open .nav-account-chevron{transform:rotate(180deg);}
.nav-account-menu{display:none;position:absolute;top:calc(100% + 6px);right:0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.2);min-width:220px;padding:var(--space-xs);z-index:200;animation:navAccountIn .12s ease;}
.nav-account.open .nav-account-menu{display:block;}
@keyframes navAccountIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}
.nav-account-item{display:flex;align-items:center;gap:var(--space-sm);padding:8px 12px;border-radius:var(--radius2);font-size:12.5px;font-weight:var(--fw-medium);color:var(--text2);cursor:pointer;transition:all .12s;border:none;background:none;width:100%;text-align:left;text-decoration:none;font-family:inherit;white-space:nowrap;}
.nav-account-item:hover{background:var(--card2);color:var(--text);}
/* Header-Item (Mein Konto): Label dehnt sich, Plan-Badge floatet rechts.
   Audit-Refactor 2026-04-29: Plan-Badge aus Topbar ins Konto-Menü verschoben. */
.nav-account-item-label{flex:1 1 auto;min-width:0;}
.nav-account-item-header .plan-badge{margin-left:auto;flex:0 0 auto;}
.nav-account-logout{color:var(--text3);}
.nav-account-logout:hover{color:var(--red);background:rgba(248,113,113,.06);}
.nav-account-sep{height:1px;background:var(--border);margin:4px 8px;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.5;}}
.btn-tb{background:transparent;border:1px solid transparent;color:var(--text2);padding:4px 10px;border-radius:var(--radius2);font-size:11.5px;cursor:pointer;transition:all .15s;font-family:inherit;white-space:nowrap;}
.btn-tb:hover{border-color:var(--border);background:rgba(var(--surface-rgba-base),.04);color:var(--text);}

/* ── Sticky Filter Bar — List pages (Belege, Rechnungen, AfA) ── */
/* Layout-Refactor 2026-05-06: --page-sticky-top kippt auf 0 in v2-Desktop
   (sticky relativ zu .shell-main) und auf --shell-topbar-h in v2-Mobile
   (sticky relativ zu Body unter Topbar). v1 nutzt weiter --topbar-height. */
.page-filter-bar{position:sticky;top:var(--page-sticky-top);z-index:90;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;height:44px;margin-bottom:14px;transition:box-shadow .15s;}
.page-filter-bar.is-stuck{box-shadow:0 2px 8px rgba(0,0,0,.15);}
.filter-bar-sentinel{height:1px;pointer-events:none;}
@media(max-width:640px){.page-filter-bar{overflow-x:auto;gap:6px;}.page-filter-bar .seg-ctrl{flex-shrink:0;}}
@media(prefers-reduced-motion:reduce){.page-filter-bar{transition:none;}}

/* ===== LAYOUT ===== */
.main{flex:1;padding:26px 18px 18px;max-width:1420px;margin:0 auto;width:100%;}
/* `.context-target` Scroll-Margin: 2026-05-06 nach Removal der
   `.context-rail-shell` Page-Anchor-Pill orientiert sich der Offset
   nur noch an der AppShell-v2-Topbar. */
.context-target{scroll-margin-top:calc(var(--shell-topbar-h, 56px) + 18px);}
/* `.context-rail*` Selectoren wurden 2026-05-06 entfernt — die schwebende
   Page-Anchor-Pill war redundant zur AppShell-v2-Topbar und überlagerte auf
   1024-1279px-Tablets die Sidebar. JS-Funktionen `_renderContextRail`,
   `_syncContextRail`, `_initContextRail`, `_contextRailScrollTo` etc. sowie
   die `contextJump`/`contextTop` actionMap-Einträge sind ebenfalls weg. */
/* ── Hero Zone ── */
.dash-hero{margin-bottom:14px;}
.hero-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;display:flex;flex-direction:column;position:relative;overflow:hidden;}
.hero-card.hero-primary{padding:26px 28px;border-color:rgba(232,184,75,.2);background:linear-gradient(135deg,var(--card) 0%,rgba(232,184,75,.03) 100%);}
/* Hero two-column inner layout */
.hero-primary-inner{display:flex;gap:32px;align-items:flex-start;}
.hero-primary-left{flex:1;min-width:0;}
.hero-primary-right{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--space-md);padding:8px 0 0;border-left:1px solid var(--border);padding-left:28px;min-width:180px;}
.hero-side-kpi{}
.hero-side-label{font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;}
.hero-side-val{font-family:var(--mono);font-size:18px;font-weight:var(--fw-semibold);line-height:1.2;}
.hero-card.hero-primary.hero-alert{border-color:rgba(248,113,113,.25);background:linear-gradient(135deg,var(--card) 0%,rgba(248,113,113,.03) 100%);}
.hero-card.hero-primary.hero-action{border-color:rgba(96,165,250,.2);background:linear-gradient(135deg,var(--card) 0%,rgba(96,165,250,.03) 100%);}
.hero-card.hero-primary.hero-ok{border-color:rgba(52,211,153,.2);background:linear-gradient(135deg,var(--card) 0%,rgba(52,211,153,.03) 100%);}
.hero-label{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;}
.hero-val{font-family:var(--mono);font-size:var(--fs-hero);font-weight:var(--fw-bold);color:var(--text);line-height:1.1;margin-bottom:8px;letter-spacing:-.02em;}
.hero-primary .hero-val{font-size:36px;}
.hero-sub{font-size:12px;color:var(--text2);line-height:var(--lh-base);}
.hero-context{font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--text2);line-height:1.45;margin-bottom:4px;}
/* Hero structured meta (replaces Fließtext) */
.hero-meta{display:flex;flex-direction:column;gap:var(--space-xs);margin-top:2px;max-width:340px;}
.hero-meta-row{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--text2);}
.hero-meta-lbl{font-size:var(--fs-sm);color:var(--text3);}
.hero-meta-val{font-family:var(--mono);font-weight:var(--fw-semibold);font-size:12.5px;}
.hero-meta-frist{font-size:10.5px;color:var(--text3);margin-top:6px;padding-top:8px;border-top:1px solid var(--border);}
.hero-cta{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.hero-cta .btn{font-size:12px;padding:8px 18px;}
.hero-trend{display:inline-flex;align-items:center;gap:var(--space-xs);font-size:var(--fs-sm);font-weight:var(--fw-semibold);padding:2px 8px;border-radius:12px;margin-left:10px;vertical-align:middle;}
.hero-trend.up{background:rgba(52,211,153,.12);color:var(--green);}
.hero-trend.down{background:rgba(248,113,113,.12);color:var(--red);}
.hero-trend.flat{background:rgba(99,120,166,.1);color:var(--text3);}
/* ── Status Panel (below hero) ── */
.status-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:14px;}
.status-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column;}
.status-label{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--text3);text-transform:uppercase;letter-spacing:.09em;margin-bottom:6px;}
.status-val{font-family:var(--mono);font-size:21px;font-weight:var(--fw-semibold);color:var(--text);line-height:1.1;margin-bottom:4px;}
.status-sub{font-size:var(--fs-sm);color:var(--text3);line-height:1.5;flex:1;font-weight:var(--fw-medium);}
@media(max-width:880px){.status-grid{grid-template-columns:repeat(2,1fr);}.hero-primary .hero-val{font-size:30px;}.hero-primary-inner{flex-direction:column;gap:var(--space-lg);}.hero-primary-right{border-left:none;padding-left:0;border-top:1px solid var(--border);padding-top:14px;flex-direction:row;flex-wrap:wrap;gap:var(--space-lg);min-width:0;}.hero-side-kpi{flex:1;min-width:120px;}}
@media(max-width:480px){.status-grid{grid-template-columns:1fr;}.hero-card{padding:16px 18px;}.hero-val{font-size:24px;}.hero-primary .hero-val{font-size:26px;}.hero-cta{margin-top:10px;padding-top:10px;}.hero-cta .btn{font-size:11.5px;padding:7px 14px;}.hero-trend{display:flex;margin-left:0;margin-top:6px;}}
/* ── KPI Grid (hierarchized) ── */
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px;}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;}
.kpi-label{font-size:11.5px;font-weight:var(--fw-semibold);color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;}
.kpi-val{font-family:var(--mono);font-size:24px;font-weight:var(--fw-semibold);color:var(--text);}
.kpi-sub{font-size:10.5px;color:var(--text3);margin-top:3px;font-weight:var(--fw-medium);line-height:1.4;}
.kpi-grid-secondary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-sm);margin-bottom:14px;}
.kpi-grid-secondary .kpi{padding:12px 14px;background:var(--bg2);}
.kpi-grid-secondary .kpi-label{font-size:10.5px;}
.kpi-grid-secondary .kpi-val{font-size:18px;}
.kpi-grid-secondary .kpi-sub{font-size:var(--fs-xs);}
@media(max-width:700px){.kpi-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.kpi-grid{grid-template-columns:1fr;}}
/* ── Progressive Disclosure ── */
.dash-expand{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:var(--fw-semibold);color:var(--text3);cursor:pointer;background:none;border:none;padding:8px 0;font-family:inherit;transition:color .15s;width:100%;letter-spacing:.01em;}
.dash-expand:hover{color:var(--text);}
.dash-expand-chevron{font-size:var(--fs-xs);transition:transform .2s;display:inline-block;}
.dash-expand.is-open .dash-expand-chevron{transform:rotate(90deg);}
.dash-expand-section{overflow:hidden;transition:max-height .25s ease;}
/* ── Empty State (Hero context) ── */
.hero-empty{text-align:center;padding:36px 24px;grid-column:1/-1;}
.hero-empty-icon{font-size:var(--fs-hero);margin-bottom:12px;opacity:.6;}
.hero-empty-title{font-size:16px;font-weight:var(--fw-bold);color:var(--text);margin-bottom:8px;letter-spacing:-.01em;}
.hero-empty-sub{font-size:12.5px;color:var(--text3);line-height:var(--lh-relaxed);margin-bottom:18px;max-width:380px;margin-left:auto;margin-right:auto;}
/* ── Dashboard Insight Notices ── */
.insight-zone{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;}
.insight-zone-head{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px;}
.insight-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--radius);border:1px solid var(--border);border-left:3px solid var(--accent);background:var(--card);transition:opacity .18s,background .18s;}
/* ── Severity: Red (Alarm) — prominent bg tint ── */
.insight-item.sev-red{border-left-color:var(--red);background:rgba(248,113,113,.05);border-color:var(--tone-poor-border);}
/* ── Severity: Yellow (Warning) — subtle amber ── */
.insight-item.sev-yellow{border-left-color:var(--accent);background:rgba(232,184,75,.04);border-color:rgba(232,184,75,.15);}
/* ── Severity: Blue (Insight/Info) — very subtle ── */
.insight-item.sev-blue{border-left-color:var(--blue);border-color:var(--border);}
/* ── Severity: Green ── */
.insight-item.sev-green{border-left-color:var(--green);border-color:var(--border);}
.insight-ico{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-top:1px;color:var(--text2);}
.insight-body{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs) 16px;}
.insight-title{font-size:12px;font-weight:var(--fw-bold);line-height:1.35;letter-spacing:.01em;}
.insight-item.sev-red .insight-title{color:var(--red);}
.insight-item.sev-yellow .insight-title{color:var(--accent);}
.insight-item.sev-blue .insight-title{color:var(--blue);}
.insight-item.sev-green .insight-title{color:var(--green);}
.insight-text{font-size:var(--fs-sm);color:var(--text3);line-height:var(--lh-base);}
.insight-sev-badge{display:inline-block;font-size:9px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.06em;padding:1px 5px;border-radius:3px;margin-left:6px;vertical-align:middle;line-height:1.4;}
.insight-sev-badge.b-red{background:rgba(248,113,113,.15);color:var(--red);}
.insight-sev-badge.b-yellow{background:rgba(232,184,75,.15);color:var(--accent);}
.insight-sev-badge.b-blue{background:rgba(96,165,250,.12);color:var(--blue);}
/* ── Dismiss button — pill style ── */
.insight-dismiss{background:none;border:1px solid transparent;color:var(--text3);cursor:pointer;font-size:var(--fs-base);line-height:1;padding:3px 6px;border-radius:4px;flex-shrink:0;opacity:.35;transition:opacity .15s,background .15s,border-color .15s;margin-top:1px;}
.insight-dismiss:hover{opacity:.8;background:rgba(99,120,166,.08);border-color:rgba(99,120,166,.12);}
.insight-dismiss:focus-visible{opacity:1;outline:2px solid var(--accent);outline-offset:1px;}
/* ── More toggle ── */
.insight-more{font-size:var(--fs-sm);color:var(--text3);cursor:pointer;background:none;border:none;padding:4px 0;font-family:inherit;transition:color .15s;letter-spacing:.01em;}
.insight-more:hover{color:var(--text);}
@media(max-width:560px){.insight-item{padding:10px 12px 10px 11px;gap:var(--space-sm);}.insight-title{font-size:11.5px;}.insight-text{font-size:10.5px;}.insight-dismiss{padding:2px 5px;font-size:12px;}}
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);margin-bottom:14px;align-items:start;}
@media(max-width:880px){.charts-grid{grid-template-columns:1fr;}}
.chart-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;}
.chart-card canvas{max-height:185px;}
/* ── Custom chart legend toggles ── */
.ch-leg{display:flex;flex-wrap:wrap;gap:var(--space-xs) 10px;margin-top:9px;padding-top:8px;border-top:1px solid var(--border);}
.ch-leg-item{display:inline-flex;align-items:center;gap:5px;background:none;border:none;padding:3px 7px;border-radius:20px;cursor:pointer;transition:background .15s,opacity .15s;font-size:var(--fs-sm);color:var(--text2);line-height:1.4;font-family:inherit;}
.ch-leg-item:hover{background:rgba(99,120,166,.1);}
.ch-leg-item:active{background:rgba(99,120,166,.18);}
.ch-leg-dot{width:9px;height:9px;flex-shrink:0;}
.ch-leg-lbl{transition:color .15s,opacity .15s;}
.ch-leg-item.off .ch-leg-lbl{color:var(--text3);opacity:.6;text-decoration:line-through;text-decoration-color:rgba(139,147,181,.4);}
/* ── Kategorie Donut Layout ── */
.ccat-layout{display:flex;gap:var(--space-lg);align-items:flex-start;}
.ccat-chart-side{flex-shrink:0;width:190px;}
.ccat-wrap{position:relative;height:190px;width:100%;}
#ccat{position:absolute;inset:0;width:100%!important;height:100%!important;max-height:none!important;}
.ccat-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;line-height:1.35;width:86px;}
.ccat-center-val{display:block;font-size:18px;font-weight:var(--fw-bold);font-family:var(--mono);color:var(--text);}
.ccat-center-lbl{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ccat-leg-side{flex:1;min-width:0;padding-top:2px;}
.ccat-leg-row{display:flex;align-items:center;gap:7px;padding:3px 4px;border-radius:4px;font-size:11.5px;line-height:1.4;}
.ccat-leg-dot{width:8px;height:8px;flex-shrink:0;}
.ccat-leg-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2);}
.ccat-leg-pct{font-family:var(--mono);font-size:10.5px;color:var(--accent);flex-shrink:0;min-width:28px;text-align:right;font-weight:var(--fw-semibold);}
.ccat-leg-amt{font-family:var(--mono);font-size:var(--fs-xs);color:var(--text3);flex-shrink:0;text-align:right;padding-left:4px;}
.ccat-leg-more{font-size:10.5px;color:var(--text3);padding:3px 4px;font-style:italic;}
.ccat-insights{margin-top:12px;padding-top:10px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:var(--space-xs);}
.ccat-empty{padding-top:12px;}
.ccat-empty-copy{font-size:11px;color:var(--text3);}
.ccat-insight-row{font-size:var(--fs-sm);color:var(--text2);line-height:1.45;}
.ccat-insight-row strong{color:var(--text);font-weight:var(--fw-semibold);}
/* Top-Kostenarten expandable card */
.topcat-card{display:flex;flex-direction:column;}
.v3-topcat-empty{min-height:116px;display:flex;align-items:center;color:var(--text3);font-size:14px;line-height:1.55;}
.v3-topcat-empty span{display:block;max-width:360px;}
.topcat-toggle-btn{display:block;width:calc(100% + 32px);margin:10px -16px -16px;padding:8px 16px;background:none;border:none;border-top:1px solid var(--border);border-radius:0 0 var(--radius) var(--radius);font-size:var(--fs-sm);color:var(--text3);cursor:pointer;text-align:center;transition:background .15s,color .15s;font-family:inherit;}
.topcat-toggle-btn:hover{background:rgba(var(--surface-rgba-base),.04);color:var(--text2);}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-lg);}
.card-title{font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;}
/* ── Custom Tooltip ── */
.tip-wrap{position:relative;display:inline-flex;align-items:center;vertical-align:middle;}
.tip-ico{cursor:help;font-size:9.5px;color:var(--text3);opacity:.6;margin-left:4px;line-height:1;user-select:none;transition:opacity .15s;}
.tip-wrap:hover .tip-ico{opacity:1;}
.tip{position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);background:var(--card2);border:1px solid var(--border2);color:var(--text2);font-size:var(--fs-sm);font-weight:var(--fw-regular);line-height:var(--lh-base);padding:8px 12px;border-radius:9px;white-space:normal;width:max-content;max-width:220px;box-shadow:var(--shadow);pointer-events:none;opacity:0;transition:opacity .15s;z-index:300;text-transform:none;letter-spacing:0;}
.tip-wrap:hover .tip{opacity:1;}
.tip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--card2);}

/* ===== TABLE ===== */
.table-wrap{overflow-x:auto;position:relative;}
.table-wrap::after{content:'';position:absolute;top:0;right:0;bottom:0;width:24px;background:linear-gradient(to right,transparent,var(--bg));pointer-events:none;opacity:0;transition:opacity .2s;}
/* table-wrap gradient removed on mobile — it obscures content and action buttons */
.table-wrap:not([style])::after{right:0;} /* fade shown only when scrollable */
table{width:100%;border-collapse:collapse;font-size:var(--fs-base);}
th{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text3);text-transform:uppercase;letter-spacing:.05em;padding:9px 12px;text-align:right;border-bottom:2px solid var(--border);white-space:nowrap;position:sticky;top:0;background:var(--card);z-index:2;}
th.l{text-align:left;}
td{padding:9px 12px;text-align:right;border-bottom:1px solid rgba(42,51,84,.3);font-family:var(--mono);font-size:12.5px;color:var(--text2);vertical-align:middle;}
td.l{text-align:left;font-family:var(--font-sans);font-size:var(--fs-base);color:var(--text);}
td.m{color:var(--text3);}
tr:hover td{background:rgba(var(--surface-rgba-base),.02);}
tr.tot td{border-top:2px solid var(--border2);font-weight:var(--fw-semibold);color:var(--text);}
.vp{color:var(--green)!important;}.vn{color:var(--red)!important;}.va{color:var(--accent)!important;}.vb{color:var(--blue)!important;}.vpu{color:var(--purple)!important;}

/* Enhanced transaction table */
.tx-row{border-left:3px solid transparent;transition:background .1s;}
.tx-row td{padding-top:8px;padding-bottom:8px;}
.tx-row.tx-einnahme{border-left-color:var(--green);}
.tx-row.tx-ausgabe{border-left-color:var(--red);}
.tx-row.tx-privat{border-left-color:var(--blue);opacity:.75;}
.tx-row:hover td{background:rgba(var(--surface-rgba-base),.025);}
.tx-row:hover .row-actions,.tx-row:focus-within .row-actions{opacity:1;}
.tx-primary{font-weight:var(--fw-medium);line-height:1.45;font-size:12.5px;}
.tx-secondary{font-size:10.5px;color:var(--text3);margin-top:2px;opacity:.8;}
.tx-beleg{font-size:10.5px;color:var(--accent);margin-top:2px;cursor:pointer;text-decoration:none;}
.tx-beleg:hover{text-decoration:underline;}
.row-actions{display:flex;gap:var(--space-xs);justify-content:flex-end;opacity:0;transition:opacity .15s;}
.row-action-btn{display:inline-flex;align-items:center;justify-content:center;min-width:30px;min-height:28px;padding:5px 7px;}.row-action-btn svg{flex-shrink:0;}
.tx-row.filtered-out{display:none;}
.gobd-badge{display:inline-flex;align-items:center;gap:var(--space-xs);font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--green);background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.15);border-radius:4px;padding:2px 7px;letter-spacing:.01em;white-space:nowrap;line-height:1.4;}

/* ===== MONTH VIEW ===== */
.month-title{font-size:var(--fs-xl);font-weight:var(--fw-heavy);letter-spacing:-.02em;line-height:1.2;}
.month-meta{font-size:10.5px;color:var(--text3);margin-top:3px;letter-spacing:.01em;}
/* ── Standard page headline (SVG + Seitenname) ── */
.page-hdl{font-size:20px;font-weight:var(--fw-bold);color:var(--text-strong);margin:0 0 4px;letter-spacing:-.01em;line-height:1.2;display:flex;align-items:center;}
.page-hdl svg{margin-right:4px;flex-shrink:0;}
/* ── Belegarchiv page wrapper ── */
.bel-page{padding:20px 16px;}

/* ── Month Header (redesigned) ───────────────────────────────────────── */
.mh-header{display:flex;justify-content:space-between;align-items:flex-start;margin-top:20px;margin-bottom:16px;flex-wrap:wrap;gap:10px;}
.mh-title-area{}
/* mh-title: gleiches Flex-Layout wie .page-hdl, damit inline-SVG-Icons
   (Monatsname "Januar 2026", "Zu prüfen" etc.) mittig zur Caps-Höhe der
   Textzeile sitzen statt auf der x-Höhen-Baseline.
   `vertical-align:middle` alleine reicht nicht — flex + align-items:center
   macht den SVG zu einem echten Flex-Item und zentriert es optisch korrekt.
   Identische Regel wie .page-hdl, damit Belegarchiv (h1.page-hdl) und
   Monatsheader (h2.mh-title) visuell konsistent wirken. */
.mh-title{font-size:20px;font-weight:var(--fw-bold);letter-spacing:-.01em;line-height:1.2;margin:0;display:flex;align-items:center;}
.mh-title svg{flex-shrink:0;}
.mh-year{font-weight:var(--fw-regular);color:var(--text2);margin-left:6px;}
.mh-meta{font-size:var(--fs-sm);color:var(--text3);margin-top:4px;letter-spacing:.01em;}
.mh-actions{display:flex;align-items:center;gap:var(--space-sm);}
/* Secondary: icon-only, subtle, grouped */
.mh-secondary{display:flex;gap:3px;align-items:center;padding-right:10px;border-right:1px solid var(--border);margin-right:2px;}
.mh-icon-btn{background:none;border:1px solid transparent;border-radius:var(--radius-sm);padding:6px;cursor:pointer;color:var(--text3);transition:all .15s;display:inline-flex;align-items:center;justify-content:center;}
.mh-icon-btn:hover{color:var(--text);background:var(--bg2);border-color:var(--border);}
.mh-icon-danger:hover{color:var(--red);background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.2);}
/* Lock: status-action, distinct from both secondary and primary */
.mh-lock-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:8px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);font-size:12px;font-weight:var(--fw-medium);cursor:pointer;transition:all .15s;white-space:nowrap;}
.mh-lock-btn:hover{border-color:var(--green);color:var(--green);background:rgba(34,197,94,.06);}
.mh-lock-btn svg{flex-shrink:0;}
/* Primary: larger, stands out */
.mh-primary{font-size:var(--fs-base);padding:8px 20px;font-weight:var(--fw-semibold);border-radius:8px;white-space:nowrap;}
/* Touch-target sizing for coarse pointers (mobile/tablet) */
@media(pointer:coarse){.mh-icon-btn{min-width:44px;min-height:44px;padding:10px;}.mh-lock-btn{min-height:44px;padding:10px 16px;}.mh-primary{min-height:44px;padding:12px 24px;}
/* Lift interaction targets to a >=44x44px touch area on coarse pointers (WCAG 2.5.5). Use min-width/min-height + padding so visual size stays compact while the hit area grows. */
.row-action-btn{min-width:44px;min-height:44px;padding:10px;}
.nav-month-tab{min-height:44px;padding:10px 14px;}
.yr-chip-del{min-width:44px;min-height:44px;}
.btn-icon{min-width:44px;min-height:44px;width:44px;height:44px;}
.qs-toggle{min-width:44px;min-height:44px;width:44px;height:44px;}
.kon-modal-row__remove{min-width:44px;min-height:44px;width:44px;height:44px;}}
.month-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm);margin-bottom:12px;}
.month-kpis .kpi-hero{border-color:rgba(232,184,75,.25);}
@media(max-width:880px){.month-kpis{grid-template-columns:repeat(3,1fr);}}
.tx-wrap{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:visible;margin-bottom:12px;}
.tx-head{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);flex-wrap:wrap;}
.tx-head h3{font-size:12px;font-weight:var(--fw-bold);color:var(--text2);letter-spacing:.02em;}

/* Filter bar — compact single-row on desktop, wraps on mobile */
.tx-filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm);padding:8px 14px;border-bottom:1px solid var(--border);background:var(--bg2);}
.filter-search{flex:1 1 180px;min-width:120px;position:relative;}
.filter-search input{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius2);padding:6px 10px 6px 30px;font-size:12.5px;color:var(--text);width:100%;font-family:inherit;outline:none;transition:border-color .15s;}
.filter-search input:focus{border-color:var(--accent2);}
.filter-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--text3);pointer-events:none;line-height:1;z-index:1;}
.filter-pills{display:flex;gap:var(--space-xs);flex-shrink:0;}
.filter-pill{padding:4px 10px;border-radius:20px;font-size:var(--fs-sm);font-weight:var(--fw-semibold);cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text3);font-family:inherit;transition:all .15s;}
.filter-pill:hover{color:var(--text);border-color:var(--border2);}
.filter-pill.active{background:rgba(232,184,75,.15);color:var(--accent);border-color:rgba(232,184,75,.3);}
.filter-secondary{display:flex;align-items:center;gap:6px;margin-left:auto;}
.za-filter-select{padding:4px 8px;border-radius:20px;font-size:10.5px;font-weight:var(--fw-semibold);cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text3);font-family:inherit;min-width:0;appearance:none;-webkit-appearance:none;padding-right:18px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237580a5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;background-size:8px;}
.za-filter-select:focus{border-color:var(--accent);color:var(--text);outline:none;}
.za-badge{font-size:var(--fs-xs);margin-left:4px;opacity:.7;cursor:default;}
.sort-btn-wrap{position:relative;flex-shrink:0;}
.sort-btn{display:flex;align-items:center;gap:3px;padding:4px 9px;border-radius:20px;font-size:10.5px;font-weight:var(--fw-semibold);cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text3);font-family:inherit;transition:all .15s;white-space:nowrap;}
.sort-btn:hover{color:var(--text);border-color:var(--border2);}
.sort-btn.sorted{background:rgba(96,165,250,.1);color:var(--blue);border-color:rgba(96,165,250,.28);}
.sort-btn-icon{font-size:var(--fs-xs);opacity:.7;}
.sort-btn-caret{font-size:7px;opacity:.5;margin-left:1px;}
.sort-drop{position:absolute;top:calc(100% + 6px);right:0;min-width:240px;background:var(--card);border:1px solid var(--border2);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.45);z-index:300;overflow:hidden;display:none;}
.sort-drop.open{display:block;}
.sort-opt{display:block;width:100%;text-align:left;padding:8px 14px;font-size:12px;color:var(--text2);background:none;border:none;cursor:pointer;font-family:inherit;transition:background .12s;letter-spacing:.01em;}
.sort-opt:hover{background:var(--bg2);}
.sort-opt.active{color:var(--blue);font-weight:var(--fw-bold);}
.sort-drop-sep{height:1px;background:var(--border);margin:3px 0;}
/* Table header sort — stronger affordance */
.th-sort{cursor:pointer;user-select:none;transition:color .12s;position:relative;}
.th-sort:hover{color:var(--text);}
.th-sort::after{content:'';position:absolute;inset:-4px -6px;border-radius:4px;transition:background .12s;}
.th-sort:hover::after{background:rgba(139,147,181,.06);}
.th-sort-ind{font-size:9px;margin-left:3px;opacity:.4;transition:opacity .12s;}
.th-sort.th-active{color:var(--blue);}
/* Wiederkehrende Buchungen */
.rec-interval-badge{display:inline-flex;align-items:center;padding:1px 6px;border-radius:3px;font-size:var(--fs-xs);font-weight:var(--fw-semibold);background:rgba(96,165,250,.1);color:var(--blue);border:1px solid rgba(96,165,250,.2);}
.rec-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius2);padding:11px 13px;display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.rec-card-info{flex:1;}
.rec-card-title{font-size:var(--fs-base);font-weight:var(--fw-medium);color:var(--text);}
.rec-card-sub{font-size:var(--fs-sm);color:var(--text3);margin-top:3px;}
.rec-note-row{grid-column:1;}
.rec-active-row{grid-column:2;align-self:end;min-height:42px;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--space-sm);margin-bottom:0;}
.rec-active-row label{margin:0;}
.rec-active-row input[type="checkbox"]{width:16px;height:16px;flex:0 0 16px;accent-color:var(--accent);cursor:pointer;}
.th-sort.th-active .th-sort-ind{opacity:1;color:var(--blue);}
.filter-count{font-size:var(--fs-xs);color:var(--text3);padding:0 4px;}
.filter-kbd{font-size:9px;color:var(--text3);padding:1px 4px;border:1px solid var(--border);border-radius:3px;font-family:var(--mono);margin-left:4px;}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;gap:5px;padding:8px 16px;border-radius:var(--radius2);font-size:var(--fs-base);font-weight:var(--fw-semibold);cursor:pointer;border:none;font-family:inherit;transition:all .15s;}
.btn-ghost{background:rgba(var(--surface-rgba-base),.04);color:var(--text);border:1px solid rgba(var(--surface-rgba-base),.12);backdrop-filter:blur(10px);}
.btn-ghost:hover{border-color:rgba(232,184,75,.3);background:rgba(232,184,75,.12);color:var(--text-strong);}
.btn-ghost:disabled{opacity:.48;cursor:not-allowed;}
.btn-ghost:disabled:hover{border-color:rgba(var(--surface-rgba-base),.12);background:rgba(var(--surface-rgba-base),.04);color:var(--text);}
.btn-p{background:var(--accent);color:var(--accent-ink);}
.btn-p:hover{background:var(--accent3);}
.btn-p:disabled{opacity:.4;cursor:not-allowed;}
.btn-p:disabled:hover{background:var(--accent);}
.btn-g{background:transparent;color:var(--text2);border:1px solid var(--border);}
.btn-g:hover{border-color:var(--border2);color:var(--text);}
.btn-g:disabled{opacity:.45;cursor:not-allowed;}
.btn-g:disabled:hover{border-color:var(--border);color:var(--text2);}
.btn-d{background:rgba(248,113,113,.1);color:var(--red);border:1px solid rgba(248,113,113,.22);}
.btn-d:hover{background:rgba(248,113,113,.2);}
.btn-ok{background:rgba(52,211,153,.1);color:var(--green);border:1px solid rgba(52,211,153,.22);}
.btn-sm{padding:6px 10px;font-size:var(--fs-sm);min-height:32px;min-width:32px;}

/* ===== MODAL ===== */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:1000;display:flex;align-items:center;justify-content:center;padding:14px;backdrop-filter:blur(4px);animation:fadeIn .15s ease;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{background:var(--bg3);border:1px solid var(--border2);border-radius:12px;width:100%;max-width:680px;max-height:92vh;overflow-y:auto;box-shadow:var(--shadow);animation:modalIn .2s ease;-webkit-overflow-scrolling:touch;transition:border-color .2s;}
@keyframes modalIn{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
/* Export-Center: ausgelagert nach _13-export-center.css (File-Size-Freeze).
 * Cascade-Position via public/css/app/manifest.json (nach _11). */
/* Modal type theming */
.modal.mode-ausgabe{border-color:rgba(248,113,113,.25);}
.modal.mode-einnahme{border-color:rgba(52,211,153,.25);}
.modal.mode-ausgabe .mh{border-bottom-color:rgba(248,113,113,.15);background:rgba(248,113,113,.04);}
.modal.mode-einnahme .mh{border-bottom-color:rgba(52,211,153,.15);background:rgba(52,211,153,.04);}
.modal.mode-ausgabe .mh h2{color:var(--red);}
.modal.mode-einnahme .mh h2{color:var(--green);}
.modal-subtitle{font-size:var(--fs-sm);font-weight:var(--fw-regular);color:var(--text3);margin-top:1px;}
.modal.mode-ausgabe .mf{border-top-color:rgba(248,113,113,.15);}
.modal.mode-einnahme .mf{border-top-color:rgba(52,211,153,.15);}
.modal.mode-ausgabe .btn-p{background:var(--red);color:white;}
.modal.mode-ausgabe .btn-p:hover{filter:brightness(1.12);}
.modal.mode-einnahme .btn-p{background:var(--green);color:black;}
.modal.mode-einnahme .btn-p:hover{filter:brightness(1.1);}
.modal.mode-ausgabe input:focus,.modal.mode-ausgabe select:focus{border-color:rgba(232,184,75,.3);box-shadow:0 0 0 2px rgba(232,184,75,.08);}
.modal.mode-einnahme input:focus,.modal.mode-einnahme select:focus{border-color:rgba(232,184,75,.3);box-shadow:0 0 0 2px rgba(232,184,75,.08);}
.mh{padding:15px 20px 11px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;border-radius:12px 12px 0 0;transition:background .2s,border-color .2s;}
.mh h2{font-size:14px;font-weight:var(--fw-bold);transition:color .2s;}
.mb{padding:20px 22px;}
.mf{padding:11px 20px;border-top:1px solid var(--border);display:flex;gap:7px;justify-content:flex-end;transition:border-color .2s;}
/* Booking-Modal-Footer (2026-05-11 v2): Action-Buttons immer in EINER Reihe,
   nowrap pro Button (kein Mehrzeilen-Text in Vorlage/Einnahme). Auf Mobile
   reduzieren wir Padding/Font, damit alle 4 Buttons in die Aktions-Zeile
   passen ohne dass „Einnahme speichern" auf die nächste Zeile springt. */
.mf-actions{display:flex;gap:7px;flex-wrap:nowrap;justify-content:flex-end;align-items:center;min-width:0;}
.mf-actions > .btn{flex:0 1 auto;min-width:0;}
.mf .btn{white-space:nowrap;}
/* btn-with-mobile-icon (User-Feedback 2026-05-11): Buttons mit langem Text auf
   Desktop (z.B. „Vorlage speichern"), die auf Mobile zu einem Icon kollabieren,
   damit mehr Platz für den primären CTA bleibt. Default desktop: Icon hidden,
   Text sichtbar. Mobile-Override unten in @media. */
.btn-mobile-icon{display:none;}
.btn-with-mobile-icon{display:inline-flex;align-items:center;gap:5px;}
/* Icon-Only-Button-Variante (Trash, X, etc.): quadratisch, Icon zentriert.
   Höhe matched .btn (8px+8px padding + ~22px line-height ≈ 38px). Auf Mobile
   greift die Touch-Target-Regel `.btn-d{min-height:44px;min-width:44px}` →
   Trash bleibt automatisch quadratisch 44×44, gleich hoch wie die Geschwister. */
.btn-icon{padding:0;width:38px;height:38px;min-width:38px;justify-content:center;flex:0 0 auto;}
.xbtn{background:none;border:none;color:var(--text3);font-size:var(--fs-lg);cursor:pointer;line-height:1;padding:1px 5px;border-radius:4px;}
.xbtn:hover{color:var(--text);background:var(--border);}

/* Type toggle */
.type-toggle{display:flex;gap:var(--space-sm);margin-bottom:18px;}
.type-btn{flex:1;padding:14px 16px;border-radius:var(--radius);border:2px solid var(--border);background:var(--bg2);color:var(--text3);cursor:pointer;font-family:inherit;font-size:var(--fs-base);font-weight:var(--fw-semibold);transition:all .2s;display:flex;align-items:center;justify-content:center;gap:var(--space-sm);outline:none;}
.type-btn:hover{border-color:var(--border2);color:var(--text);}
.type-btn:focus-visible{box-shadow:0 0 0 2px var(--accent);}
.type-btn .type-icon{font-size:18px;transition:transform .2s;}
.type-btn.sel-ausgabe{border-color:var(--red3);background:var(--red2);color:var(--red);}
.type-btn.sel-ausgabe .type-icon{transform:rotate(-45deg);}
.type-btn.sel-einnahme{border-color:var(--green3);background:var(--green2);color:var(--green);}
.type-btn.sel-einnahme .type-icon{transform:rotate(45deg);}

/* Booking fields */
.booking-fields{display:none;animation:slideDown .2s ease;}
.booking-fields.visible{display:block;}
@keyframes slideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* Calc summary – type themed */
.calc-summary{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;margin-top:14px;transition:border-color .2s,background .2s;}
.calc-summary-label{font-size:9.5px;font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;color:var(--text3);transition:color .2s;}
.modal.mode-ausgabe .calc-summary{border-color:rgba(248,113,113,.2);background:rgba(248,113,113,.03);}
.modal.mode-ausgabe .calc-summary-label{color:var(--red);}
.modal.mode-einnahme .calc-summary{border-color:rgba(52,211,153,.2);background:rgba(52,211,153,.03);}
.modal.mode-einnahme .calc-summary-label{color:var(--green);}
.calc-row{display:flex;justify-content:space-between;font-size:12px;padding:3px 0;color:var(--text2);}
.calc-row .calc-val{font-family:var(--mono);font-weight:var(--fw-medium);color:var(--text2);}
.calc-row.calc-total{border-top:1px solid var(--border);margin-top:6px;padding-top:8px;}
.calc-row.calc-total span{font-weight:var(--fw-bold);color:var(--text);}
.calc-row.calc-total .calc-val{color:var(--text);font-size:14px;}

/* Form fields */
.fg{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.fg.fg-3{grid-template-columns:1fr 1fr 1fr;}
@media(max-width:560px){.fg{grid-template-columns:1fr;}.fg.fg-3{grid-template-columns:1fr;}}
.fgrp{display:flex;flex-direction:column;gap:3px;margin-bottom:12px;position:relative;}
.fgrp.full{grid-column:1/-1;}
.fgrp:last-child{margin-bottom:0;}
label{font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--text3);text-transform:uppercase;letter-spacing:.06em;}
label .optional{font-weight:var(--fw-regular);text-transform:none;font-size:9.5px;opacity:.7;}
input,select,textarea{background:var(--bg2);border:1px solid var(--border);color:var(--text);padding:9px 12px;border-radius:var(--radius2);font-size:13.5px;font-family:inherit;width:100%;transition:border-color .15s;outline:none;}
input:focus,select:focus,textarea:focus{border-color:rgba(var(--accent-rgba-base),.3);}
/* ── Number inputs: kill native browser spinners app-wide ── */
input[type=number]{font-family:var(--mono);-moz-appearance:textfield;appearance:textfield;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0;}
/* ── Custom num-stepper: wraps a number input + two ▲▼ buttons ── */
.num-stepper{display:flex;align-items:stretch;gap:0;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius2);overflow:hidden;transition:border-color .15s;width:100%;}
.num-stepper:focus-within{border-color:var(--accent2);}
.num-stepper>input[type=number]{background:none;border:none;outline:none;flex:1;min-width:0;border-radius:0;padding:9px 10px;}
.num-stepper-btns{display:flex;flex-direction:column;flex-shrink:0;border-left:1px solid var(--border);width:24px;}
.num-stepper-btns button{flex:1;background:none;border:none;color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;font-family:inherit;line-height:1;transition:background .12s,color .12s;}
.num-stepper-btns button svg{width:8px;height:8px;fill:currentColor;}
.num-stepper-btns button:hover{background:rgba(var(--surface-rgba-base),.07);color:var(--text);}
.num-stepper-btns button:first-child{border-bottom:1px solid var(--border);}
input[readonly]{color:var(--text2);cursor:default;background:rgba(0,0,0,.18);}
input.field-error{border-color:var(--red)!important;}
select option{background:var(--bg2);}
.field-hint{font-size:9.5px;color:var(--text3);margin-top:1px;}

/* Date preview */
.date-input-wrap{position:relative;}
.date-input-wrap input{padding-right:110px;font-family:var(--mono);}
.date-parsed{position:absolute;right:30px;top:50%;transform:translateY(-50%);font-size:var(--fs-xs);color:var(--green);pointer-events:none;font-family:var(--mono);white-space:nowrap;}
.date-picker-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text3);cursor:pointer;padding:var(--space-xs);line-height:0;border-radius:4px;transition:color .15s;}
.date-picker-btn:hover{color:var(--accent);}
.date-parsed.err{color:var(--red);}

/* Inline date editing */
.date-cell{position:relative;cursor:text;}
.date-cell .date-display{font-family:var(--mono);font-size:var(--fs-sm);color:var(--text3);}
.date-cell input.date-input{
  font-family:var(--mono);font-size:var(--fs-sm);background:var(--bg2);
  border:1px solid var(--accent2);color:var(--text);
  padding:2px 5px;border-radius:4px;width:70px;outline:none;
}

/* Dividers & section labels */
hr.dv{border:none;border-top:1px solid var(--border);margin:14px 0;}
.slbl{font-size:9.5px;font-weight:var(--fw-bold);color:var(--text3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid var(--border);}

/* ===== BADGES ===== */
.badge{display:inline-block;padding:1px 5px;border-radius:20px;font-size:9px;font-weight:var(--fw-bold);font-family:var(--mono);}
.b19{background:rgba(167,139,250,.1);color:var(--purple);border:1px solid rgba(167,139,250,.2);}
.b7{background:rgba(96,165,250,.1);color:var(--blue);border:1px solid rgba(96,165,250,.2);}
.b0{background:rgba(139,147,181,.06);color:var(--text3);border:1px solid var(--border);}
.type-badge{display:inline-block;padding:1px 6px;border-radius:20px;font-size:9px;font-weight:var(--fw-bold);font-family:var(--mono);}
.type-badge.einnahme{background:var(--green2);color:var(--green);border:1px solid var(--green3);}
.type-badge.ausgabe{background:var(--red2);color:var(--red);border:1px solid var(--red3);}

/* ===== SETTINGS ===== */
.sg{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:680px){.sg{grid-template-columns:1fr;}}
/* ===== SETTINGS TOP-NAV (horizontale Pill-Bar) =====
   Umbau 2026-05-22 (User-Request): die frühere vertikale .sett-sidebar wird
   durch eine horizontale Cluster-Pill-Navigation oben in den Einstellungen
   ersetzt. Gleicher Aufbau auf Desktop und Mobile, nur Scroll-Verhalten
   passt sich an. Gruppen-Labels sind via CSS visuell ausgeblendet (a11y im
   DOM erhalten), Cluster werden durch dezente vertikale Trennlinien
   abgegrenzt. Keine neuen Tokens — Borders/Hintergründe nutzen --border,
   --bg2, --accent. */
.settings-page.app-page--xwide{max-width:var(--page-width-wide,1480px);padding-top:20px;}
.sett-layout{display:flex;flex-direction:column;gap:18px;align-items:stretch;min-width:0;}
.sett-sidebar{position:sticky;top:var(--page-sticky-top);z-index:2;display:flex;flex-wrap:nowrap;align-items:center;width:100%;min-width:0;padding:6px 0 10px;background:linear-gradient(to bottom,var(--bg) 0,var(--bg) 85%,rgba(0,0,0,0));overflow-x:auto;overflow-y:visible;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;}
.sett-sidebar::-webkit-scrollbar{display:none;}
.sett-sidebar-group{display:flex;flex-direction:row;align-items:center;gap:6px;flex-shrink:0;padding:0 12px 0 0;margin:0;position:relative;}
.sett-sidebar-group:first-of-type{padding-left:0;}
.sett-sidebar-group+.sett-sidebar-group{padding-left:12px;border-left:1px solid var(--border);}
.sett-sidebar-group-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;}
.sett-sidebar-item{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;min-height:36px;padding:7px 13px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-pill);font-family:inherit;font-size:13px;font-weight:var(--fw-medium);color:var(--text2);cursor:pointer;white-space:nowrap;text-align:left;transition:color var(--tr-fast),background var(--tr-fast),border-color var(--tr-fast);}
.sett-sidebar-item svg{flex-shrink:0;width:15px;height:15px;opacity:.65;transition:opacity var(--tr-fast),color var(--tr-fast);}
.sett-sidebar-item:hover{color:var(--text);background:var(--bg3);border-color:var(--border2);}
.sett-sidebar-item:hover svg{opacity:.95;}
.sett-sidebar-item.active{color:var(--text);background:rgba(232,184,75,.12);border-color:rgba(232,184,75,.42);box-shadow:inset 0 0 0 1px rgba(232,184,75,.18);}
.sett-sidebar-item.active svg{opacity:1;color:var(--accent);}
.sett-sidebar-item:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(232,184,75,.5);}
.sett-sidebar-divider{flex-shrink:0;width:1px;height:24px;background:var(--border);margin:0 4px;align-self:center;}
.sett-sidebar-item--danger{color:var(--text3);background:var(--bg2);border-color:var(--border);}
.sett-sidebar-item--danger svg{opacity:.6;color:var(--text3);}
.sett-sidebar-item--danger:hover{background:rgba(248,113,113,.07);color:var(--red);border-color:rgba(248,113,113,.28);}
.sett-sidebar-item--danger:hover svg{opacity:1;color:var(--red);}
.sett-sidebar-item--danger.active{background:rgba(248,113,113,.09);color:var(--red);border-color:rgba(248,113,113,.4);box-shadow:inset 0 0 0 1px rgba(248,113,113,.2);}
.sett-sidebar-item--danger.active svg{opacity:1;color:var(--red);}
.sett-sidebar-item--danger:focus-visible{color:var(--red);box-shadow:0 0 0 2px rgba(248,113,113,.5);}
.sett-sidebar-item--danger:focus-visible svg{color:var(--red);opacity:1;}
/* Edge-Fade als Scroll-Hint, wenn die Pill-Reihe horizontal überläuft.
   Sticky-positioniertes ::after rutscht beim Scrollen und blendet die
   rechten 24px in den Page-Background aus (vgl. inv3-filter-row-Pattern). */
.sett-sidebar::after{content:"";flex:0 0 24px;align-self:stretch;position:sticky;right:-1px;margin-left:-24px;background:linear-gradient(to right,transparent,var(--bg));pointer-events:none;}
.sett-content{flex:1;min-width:0;}
.sett-content-inner{width:100%;min-width:0;}
.sett-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin:0 0 16px;}
.sett-page-title{padding-top:0!important;margin:0!important;letter-spacing:0;}
.sett-page-sub{margin:6px 0 0;color:var(--text3);font-size:13px;line-height:1.45;}
.sett-page-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;}
.sett-save-pill{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border:1px solid var(--border);border-radius:12px;background:rgba(var(--surface-rgba-base),.04);color:var(--text3);font-size:12px;font-weight:var(--fw-semibold);white-space:nowrap;}
.sett-save-pill svg{width:14px;height:14px;}
.sett-save-pill--dirty{border-color:rgba(232,184,75,.28);background:rgba(232,184,75,.08);color:var(--accent);}
.sett-save-pill--saving{border-color:rgba(96,165,250,.26);background:rgba(96,165,250,.08);color:var(--blue);}
.sett-save-pill--saved{border-color:rgba(52,211,153,.2);background:rgba(52,211,153,.08);color:var(--green);}
.sett-save-pill--error{border-color:rgba(248,113,113,.28);background:rgba(248,113,113,.08);color:var(--red);}
.sett-head-save{min-height:34px;}
.sett-head-save:disabled,.sett-card-head .btn:disabled,.sett-form-actions .btn:disabled{opacity:.52;cursor:not-allowed;}
.sett-status-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 18px;}
.sett-status-card{display:grid;grid-template-columns:20px minmax(0,1fr);gap:11px;align-items:start;min-height:86px;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--card);box-shadow:inset 0 1px 0 rgba(var(--surface-rgba-base),.04);}
.sett-status-icon{display:flex;align-items:center;justify-content:center;margin-top:2px;color:var(--text3);}
.sett-status-body{display:block;min-width:0;}
.sett-status-label{display:block;font-size:10px;font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--text3);margin-bottom:5px;}
.sett-status-value{display:block;font-size:15px;font-weight:var(--fw-bold);line-height:1.2;color:var(--text);white-space:normal;}
.sett-status-sub{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:var(--text3);line-height:1.35;}
.sett-status-dot{width:6px;height:6px;border-radius:50%;background:var(--text3);flex:0 0 6px;}
.sett-tone-ok .sett-status-dot,.sett-tone-ok .sett-status-icon{color:var(--green);background:var(--green);}
.sett-tone-warn .sett-status-dot,.sett-tone-warn .sett-status-icon{color:var(--accent);background:var(--accent);}
.sett-tone-info .sett-status-dot,.sett-tone-info .sett-status-icon{color:var(--blue);background:var(--blue);}
.sett-tone-error .sett-status-dot,.sett-tone-error .sett-status-icon{color:var(--red);background:var(--red);}
.sett-tone-ok .sett-status-icon,.sett-tone-warn .sett-status-icon,.sett-tone-info .sett-status-icon,.sett-tone-error .sett-status-icon{background:none;}
.sett-status-cta{display:block;margin-top:8px;font-size:11px;font-weight:var(--fw-semibold);color:var(--accent);letter-spacing:.01em;}
.sett-tone-ok .sett-status-cta{color:var(--text3);font-size:10.5px;opacity:0;transform:translateY(-1px);transition:opacity .16s ease,transform .16s ease;}
button.sett-status-card:hover .sett-status-cta,button.sett-status-card:focus-visible .sett-status-cta{opacity:1;transform:translateY(0);}
button.sett-status-card{background:var(--card);color:inherit;border:1px solid var(--border);border-radius:14px;text-align:left;font-family:inherit;font-size:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;}
button.sett-status-card:hover{background:var(--card2);border-color:var(--border2);}
button.sett-status-card.sett-tone-warn:hover{border-color:rgba(232,184,75,.35);}
button.sett-status-card.sett-tone-error:hover{border-color:rgba(248,113,113,.4);}
button.sett-status-card:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(232,184,75,.5);}
.mfa-hint-pill--ok{background:rgba(52,211,153,.14)!important;color:var(--tone-good-fg)!important;border:1px solid var(--tone-good-border);}
/* A11y: Base behält --tone-warn-fg (in Dark als Text bereits AA); der Light-
   Kontrast wird durch die eigene body.light-Override unten (#7a5200 ≈6.9:1)
   gelöst — diese Pill NICHT auf --tone-warn-text umstellen (settings-mfa-hint
   pinnt genau diese Struktur). */
.mfa-hint-pill--warn{background:var(--tone-warn-bg)!important;color:var(--tone-warn-fg)!important;border:1px solid var(--tone-warn-border);}
body.light .mfa-hint-pill--warn{background:rgba(232,184,75,.16)!important;color:rgb(122,90,26)!important;border-color:rgba(122,90,26,.22);}
.sett-company-shell{display:grid;grid-template-columns:minmax(720px,1fr) minmax(240px,300px);gap:14px;align-items:start;}
.sett-company-shell--solo{grid-template-columns:minmax(0,1fr);}
.sett-company-main{min-width:0;}
.sett-company-card{padding:0;overflow:hidden;}
.sett-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:18px 20px 0;}
.sett-card-title{font-size:17px;font-weight:var(--fw-bold);color:var(--text);letter-spacing:0;margin-bottom:3px;}
.sett-card-head p{margin:0;color:var(--text3);font-size:12px;line-height:1.45;}
.sett-company-tabs{display:flex;align-items:center;gap:18px;margin:16px 20px 0;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none;}
.sett-company-tabs::-webkit-scrollbar{display:none;}
.sett-company-tab{position:relative;min-height:38px;padding:0 0 10px;border:0;background:none;color:var(--text3);font-family:inherit;font-size:12px;font-weight:var(--fw-semibold);cursor:pointer;white-space:nowrap;}
.sett-company-tab:hover{color:var(--text2);}
.sett-company-tab.is-active{color:var(--accent);}
.sett-company-tab.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--accent);}
.sett-form-section{padding:18px 20px;border-bottom:1px solid var(--border);}
.sett-form-section:last-of-type{border-bottom:none;}
.sett-form-title{font-size:13px;font-weight:var(--fw-bold);color:var(--text);margin-bottom:11px;}
/* InfoHint-Primitive: neutraler, tastatur-fokussierbarer „?“-Hinweis neben
   einem Label. Erklärtext liegt in title/aria-label (native Tooltip). */
.info-hint{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;margin-left:5px;padding:0;border:1px solid var(--border2);border-radius:50%;background:transparent;color:var(--text3);font-family:var(--font-sans)!important;font-size:10px;font-weight:var(--fw-bold);line-height:1;cursor:help;vertical-align:middle;}
.info-hint:hover,.info-hint:focus-visible{color:var(--text2);border-color:var(--text3);}
.info-hint:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
.sett-form-section .fg{grid-template-columns:repeat(2,minmax(240px,1fr));gap:12px;}
.sett-form-section .fg.fg-3{grid-template-columns:repeat(3,minmax(190px,1fr));}
.sett-form-section input,.sett-form-section select{min-height:42px;background:var(--bg);border-color:var(--border);border-radius:10px;}
.sett-form-section input:focus,.sett-form-section select:focus{border-color:rgba(232,184,75,.55);box-shadow:0 0 0 2px rgba(232,184,75,.12);}
.sett-form-section label{letter-spacing:.04em;}
.fg-address{grid-template-columns:minmax(260px,2fr) minmax(96px,.7fr) minmax(180px,1.3fr);}
.fgrp-street{grid-column:auto;}
.sett-inline-control{display:flex;align-items:center;gap:8px;min-height:42px;padding:0 0;}
.sett-inline-control span{flex:1;color:var(--text);font-size:13.5px;}
.sett-inline-control small{font-size:12px;color:var(--text3);}
.sett-check{display:flex;align-items:center;gap:8px;min-height:42px;text-transform:none;letter-spacing:0;color:var(--text2);font-size:13px;cursor:pointer;}
.sett-check input{width:16px;height:16px;min-height:auto;accent-color:var(--accent);padding:0;}
.sett-form-actions{display:flex;justify-content:flex-end;padding:0 20px 18px;}
.sett-hint-rail{display:flex;flex-direction:column;gap:10px;}
.sett-hint-card{padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--card);box-shadow:inset 0 1px 0 rgba(var(--surface-rgba-base),.04);}
.sett-hint-head{display:flex;align-items:center;gap:8px;color:var(--text);font-size:13px;}
.sett-hint-head svg{width:15px;height:15px;color:var(--text3);}
.sett-hint-card p{margin:8px 0 12px;color:var(--text3);font-size:12px;line-height:1.45;}
.sett-hint-link{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:0 10px;border:1px solid rgba(232,184,75,.28);border-radius:9px;background:transparent;color:var(--accent);font-family:inherit;font-size:12px;font-weight:var(--fw-semibold);cursor:pointer;}
.sett-hint-link:hover{background:rgba(232,184,75,.08);}
.sett-quick-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:10px;}
.sett-quick-link{display:flex;align-items:flex-start;gap:8px;min-width:0;padding:11px 12px;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);font-family:inherit;text-align:left;cursor:pointer;}
.sett-quick-link:hover{border-color:var(--border2);background:var(--bg2);}
.sett-quick-icon{display:flex;color:var(--accent);margin-top:1px;}
.sett-quick-link strong{display:block;font-size:12.5px;font-weight:var(--fw-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sett-quick-link small{display:block;margin-top:2px;color:var(--text3);font-size:10.5px;line-height:1.3;}
@media(max-width:767px){
  .settings-page.app-page--xwide{padding-top:14px;}
  .settings-page .sett-page-head{flex-direction:row;align-items:center;margin:14px 0 12px;}
  .sett-page-sub{display:none;}
  .settings-page .sett-page-actions{width:auto;margin-left:auto;justify-content:flex-end;gap:8px;}
  .sett-save-pill{display:none;}
  .sett-head-audit{display:none;}
  .sett-status-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px;}
  .sett-status-card{min-height:92px;padding:12px;grid-template-columns:18px minmax(0,1fr);}
  /* Top-Nav: kompaktere Pills + dünnere Cluster-Trenner, kein Sticky auf
     Mobile (iOS-Toolbar interagiert sonst unruhig). */
  .sett-sidebar{position:static;padding:4px 0 12px;background:none;}
  .sett-sidebar-group+.sett-sidebar-group{padding-left:8px;}
  .sett-sidebar-group{padding-right:8px;}
  .sett-sidebar-item{font-size:12.5px;padding:6px 11px;min-height:34px;gap:6px;}
  .sett-sidebar-item svg{width:14px;height:14px;}
  .sett-content{margin-top:4px;}
  .sett-content-inner{max-width:none;}
  .sett-company-shell{grid-template-columns:1fr;}
  .sett-hint-rail{display:none;}
  .sett-card-head{padding:16px 14px 0;}
  .sett-card-head>div{min-width:0;}
  .sett-company-tabs{margin:14px 14px 0;gap:16px;}
  .sett-form-section{padding:16px 14px;}
  .sett-form-section .fg,.sett-form-section .fg.fg-3,.fg-address{grid-template-columns:1fr;}
  /* Mobile sticky-Save-Bar lebt in _60a-settings-mobile-shell.css (Freeze). */
  .sett-quick-links{grid-template-columns:1fr 1fr;}
}
@media(min-width:768px) and (max-width:1360px){
  .sett-status-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sett-company-shell{grid-template-columns:1fr;}
  .sett-hint-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(min-width:768px) and (max-width:1180px){
  .sett-hint-rail{grid-template-columns:1fr;}
  .sett-form-section .fg,.sett-form-section .fg.fg-3,.fg-address{grid-template-columns:1fr;}
}
.s-hint{font-size:11.5px;color:var(--text3);line-height:1.6;margin-bottom:10px;}
.s-action-list{display:flex;flex-direction:column;gap:7px;}
.s-action-btn{display:flex;align-items:flex-start;gap:10px;padding:10px 13px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius2);cursor:pointer;font-family:inherit;text-align:left;transition:border-color .15s,background .15s;width:100%;}
.s-action-btn:hover{border-color:var(--border2);background:var(--bg2);}
.s-action-btn .s-action-icon{flex-shrink:0;margin-top:2px;color:var(--text2);}
.s-action-btn .s-action-body{flex:1;min-width:0;}
.s-action-btn .s-action-title{font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--text);margin-bottom:2px;}
.s-action-btn .s-action-sub{font-size:var(--fs-sm);color:var(--text3);}
/* Settings section info row */
.s-info{display:flex;align-items:center;gap:var(--space-sm);font-size:12px;color:var(--text2);padding:8px 11px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius2);margin-bottom:12px;}
.s-info .s-badge{font-size:10.5px;font-weight:var(--fw-semibold);padding:2px 8px;border-radius:4px;white-space:nowrap;}
.s-badge.plan-trial{background:rgba(232,184,75,.12);color:var(--accent);}
.s-badge.plan-solo{background:rgba(96,165,250,.12);color:var(--blue);}
.s-badge.plan-pro{background:rgba(167,139,250,.12);color:var(--purple);}
.s-badge.plan-free{background:rgba(52,211,153,.12);color:var(--green);}
.s-badge.status-active{background:rgba(52,211,153,.12);color:var(--green);}
.s-badge.status-past_due{background:rgba(248,113,113,.12);color:var(--red);}
.s-badge.status-expired{background:rgba(248,113,113,.12);color:var(--red);}
.s-badge.status-cancelled{background:rgba(248,113,113,.12);color:var(--red);}
/* ── Settings section labels ──────────────────────────────────────────── */
.s-section{font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin:20px 0 10px;padding-left:2px;}
.s-section:first-child{margin-top:0;}
/* ── Tag chips for compact lists ─────────────────────────────────────── */
.tag-list{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px;}
.tag-item{display:inline-flex;align-items:center;gap:var(--space-xs);font-size:11.5px;padding:4px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);color:var(--text2);}
.tag-item .lid{font-size:var(--fs-sm);padding:0 1px;margin-left:2px;}
/* ── Empty state (settings) ──────────────────────────────────────────── */
.s-empty{text-align:center;padding:20px 16px;color:var(--text3);font-size:12px;line-height:1.6;}
.s-empty svg{display:block;margin:0 auto 8px;opacity:.35;}
/* ── Std category compact grid ───────────────────────────────────────── */
.cat-grid{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-bottom:10px;}
.cat-chip{font-size:10.5px;padding:3px 8px;background:var(--bg2);border:1px solid var(--border);border-radius:4px;color:var(--text3);}
.cat-chip.warn{border-color:rgba(232,184,75,.2);color:var(--accent);opacity:.7;}
/* Danger zone card */
.card-danger{border:1px solid rgba(248,113,113,.2);background:rgba(248,113,113,.03);}
.lm{display:flex;flex-direction:column;gap:var(--space-xs);max-height:220px;overflow-y:auto;}
.li{display:flex;align-items:center;justify-content:space-between;padding:5px 8px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius2);font-size:12px;gap:var(--space-sm);}
.li>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lid{background:none;border:none;color:var(--text3);cursor:pointer;line-height:0;padding:var(--space-xs);flex-shrink:0;border-radius:4px;transition:color .15s;}
.lid:hover{color:var(--red);}
.alr{display:flex;gap:6px;margin-top:8px;}
.alr input{flex:1;}
.alr .btn{min-width:36px;min-height:36px;display:flex;align-items:center;justify-content:center;font-size:16px;padding:0;}

/* ===== NOTIFICATIONS ===== */
.sbn{border-radius:var(--tx-note-radius);padding:var(--tx-note-padding);margin-bottom:12px;display:flex;align-items:flex-start;gap:var(--tx-note-gap);font-size:11.5px;line-height:1.6;background:var(--tx-note-bg);border:1px solid var(--tx-note-border);color:var(--tx-note-text-color);}
.sbn.green{background:var(--tx-note-success-bg);border-color:var(--tx-note-success-border);color:var(--text2);}
.sbn.yellow{background:var(--tx-note-warn-bg);border-color:var(--tx-note-warn-border);color:var(--text2);}
.sbn.red{background:var(--tx-note-danger-bg);border-color:var(--tx-note-danger-border);color:var(--text2);}
/* Buchungstext autocomplete */
.bt-wrap{position:relative;}
.bt-drop{position:absolute;top:100%;left:0;right:0;background:var(--card);border:1px solid var(--border2);border-top:none;border-radius:0 0 8px 8px;max-height:210px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;z-index:2000;display:none;box-shadow:var(--shadow);}
.bt-drop.is-open{display:block;}
.bt-drop.up{top:auto;bottom:100%;border-top:1px solid var(--border2);border-bottom:none;border-radius:8px 8px 0 0;}
.bt-sug{padding:7px 12px;cursor:pointer;font-size:12.5px;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--border);color:var(--text);-webkit-text-fill-color:var(--text);}
.bt-sug:last-child{border-bottom:none;}
.bt-sug:hover{background:var(--bg2);}
.bt-sug.ac-active{background:var(--card2);outline:2px solid var(--accent);outline-offset:-2px;}
.bt-sug-meta{font-size:var(--fs-xs);opacity:.5;margin-left:auto;white-space:nowrap;color:var(--text3);}
.bt-sug-type{font-size:9px;padding:1px 5px;border-radius:3px;background:var(--bg2);color:var(--text3);}
.app-dialog-ov{position:fixed;inset:0;background:rgba(6,10,22,.68);z-index:9990;display:flex;align-items:center;justify-content:center;padding:20px;animation:si .15s ease;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);overflow:auto;}
.app-dialog{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(27,33,55,.98),rgba(19,25,43,.98));border:1px solid var(--tx-note-border-strong);border-radius:16px;padding:0;min-width:300px;max-width:520px;width:calc(100% - 40px);box-shadow:0 24px 70px rgba(0,0,0,.42);color:var(--text);}
.app-dialog::before{content:none;display:none;}
.app-dialog-title{margin:0;padding:24px 28px 0;font-size:20px;line-height:1.25;font-weight:var(--fw-bold);letter-spacing:0;color:var(--text);}
.app-dialog-body{margin:0;padding:12px 28px 0;font-size:15px;color:var(--text2);line-height:1.6;white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;}
.app-dialog > .sbn,
.app-dialog > .app-dialog-section,
.app-dialog > .app-dialog-links,
.app-dialog > .app-dialog-consent,
.app-dialog > .app-dialog-body + div:not(.app-dialog-actions),
.app-dialog > .app-dialog-input,
.app-dialog > div:not(.app-dialog-title):not(.app-dialog-body):not(.app-dialog-actions):not(.app-dialog-input),
.app-dialog > p{margin-left:28px;margin-right:28px;}
.app-dialog-title + .sbn,
.app-dialog-title + .app-dialog-section,
.app-dialog-title + .app-dialog-input,
.app-dialog-title + p,
.app-dialog-title + div:not(.app-dialog-body):not(.app-dialog-actions){margin-top:16px;}
.app-dialog > .app-dialog-section:first-of-type{margin-top:14px;}
.app-dialog-input{margin-top:16px;}
.app-dialog-input input{width:100%;background:rgba(var(--surface-rgba-base),.04);border:1px solid rgba(var(--surface-rgba-base),.12);border-radius:10px;color:var(--text);padding:11px 13px;font-size:14px;line-height:1.35;outline:none;font-family:inherit;box-sizing:border-box;}
.app-dialog-input input:focus{border-color:rgba(var(--accent-rgba-base),.38);box-shadow:0 0 0 3px rgba(var(--accent-rgba-base),.09);}
.app-dialog-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:0;padding:24px 28px 24px;}
.app-dialog-actions button{min-height:48px;border-radius:10px;padding:10px 14px;white-space:normal;line-height:1.25;font-size:var(--fs-base);font-weight:var(--fw-semibold);cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s,color .15s,opacity .15s,box-shadow .15s;}
.app-dialog-cancel{background:rgba(var(--surface-rgba-base),.03);border:1px solid rgba(var(--surface-rgba-base),.1);color:var(--text2);}
.app-dialog-cancel:hover{background:rgba(var(--surface-rgba-base),.07);color:var(--text);}
.app-dialog-ok{background:var(--accent);border:1px solid transparent;color:var(--accent-ink);box-shadow:0 10px 26px rgba(var(--accent-rgba-base),.16);}
.app-dialog-ok:hover{opacity:.94;}
.app-dialog-ok.danger{background:rgba(248,113,113,.06);border:1px solid rgba(248,113,113,.22);color:var(--tone-poor-fg);box-shadow:none;}
.app-dialog-ok.danger:hover{background:rgba(248,113,113,.1);opacity:1;}
.app-dialog--warning,.app-dialog--destructive,.app-dialog--success{border-color:var(--tx-note-border-strong);}
.afa-dispose-dialog{max-width:460px;max-height:min(90vh,680px);overflow:auto;}
.afa-dispose-copy{white-space:normal;margin-bottom:18px;}
.afa-dispose-dialog > .afa-dispose-label,
.afa-dispose-dialog > .afa-dispose-conditional{margin-left:28px;margin-right:28px;}
.afa-dispose-label{display:block;margin-bottom:14px;font-size:12px;font-weight:var(--fw-semibold);letter-spacing:0;text-transform:none;color:var(--text3);}
.afa-dispose-field{display:block;width:100%;margin-top:8px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:10px 12px;font:inherit;font-size:14px;line-height:1.35;outline:none;transition:border-color .15s,box-shadow .15s;}
.afa-dispose-field:focus{border-color:rgba(var(--accent-rgba-base),.35);box-shadow:0 0 0 2px rgba(var(--accent-rgba-base),.08);}
.afa-dispose-field::placeholder{color:var(--text3);}
.afa-dispose-country{text-transform:uppercase;max-width:104px;}
.afa-dispose-conditional .afa-dispose-label{margin-bottom:14px;}
.afa-dispose-actions{margin-top:18px;}
.afa-dispose-ok{color:var(--accent-ink);}
body.light .app-dialog-ov{background:rgba(var(--ink-rgba-base),.34);}
body.light .app-dialog{background:var(--card);border-color:rgba(180,127,24,.24);box-shadow:0 20px 54px rgba(var(--ink-rgba-base),.18);}
body.light .app-dialog-cancel{background:var(--card);border-color:rgba(var(--ink-rgba-base),.14);color:var(--text2);}
body.light .app-dialog-cancel:hover{background:rgba(var(--ink-rgba-base),.04);color:var(--text);}
body.light .app-dialog-ok.danger{background:rgba(220,38,38,.045);border-color:rgba(220,38,38,.2);/* stylelint-disable-next-line color-no-hex */color:rgba(185,28,28,1);}
@media(max-width:560px){
  .app-dialog-ov{padding:12px;}
  .app-dialog{width:calc(100% - 24px);max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
  .app-dialog-title{padding:22px 22px 0;font-size:19px;}
  .app-dialog-body{padding:10px 22px 0;font-size:14px;}
  .app-dialog > .sbn,
  .app-dialog > .app-dialog-section,
  .app-dialog > .app-dialog-links,
  .app-dialog > .app-dialog-consent,
  .app-dialog > .app-dialog-body + div:not(.app-dialog-actions),
  .app-dialog > .app-dialog-input,
  .app-dialog > div:not(.app-dialog-title):not(.app-dialog-body):not(.app-dialog-actions):not(.app-dialog-input),
  .app-dialog > p{margin-left:22px;margin-right:22px;}
  .afa-dispose-dialog > .afa-dispose-label,
  .afa-dispose-dialog > .afa-dispose-conditional{margin-left:22px;margin-right:22px;}
  .app-dialog-actions{grid-template-columns:1fr;padding:20px 22px 22px;}
}
/* ── Plan/Role Badge (Topbar) ─────────────────────────────────────────── */
.plan-badge{font-size:9.5px;font-weight:var(--fw-semibold);letter-spacing:.05em;padding:3px 9px;border-radius:var(--radius-md);border:none;color:var(--text3);white-space:nowrap;line-height:1;text-transform:uppercase;}
.plan-badge.plan-solo{color:var(--text3);background:rgba(139,147,181,.08);}
.plan-badge.plan-pro{color:var(--accent);background:rgba(232,184,75,.1);}
.plan-badge.plan-member{color:var(--text3);background:rgba(139,147,181,.08);font-weight:var(--fw-medium);}
.plan-badge.plan-trial{color:var(--green);background:rgba(52,211,153,.08);}
/* ── Custom Dropdown (reusable, replaces native <select>) ────────────── */
.cd-trigger{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:8px 12px;font-size:14px;outline:none;font-family:inherit;box-sizing:border-box;cursor:pointer;text-align:left;display:flex;align-items:center;justify-content:space-between;transition:border-color .15s;}
.cd-trigger:focus,.cd-trigger.open{border-color:rgba(232,184,75,.3);}
.cd-trigger svg{flex-shrink:0;margin-left:8px;transition:transform .15s;}
.bt-sug.cd-selected{background:rgba(99,130,200,.22);color:var(--text);-webkit-text-fill-color:var(--text);font-weight:var(--fw-semibold);}
.cd-trigger.open svg{transform:rotate(180deg);}
/* ── Custom Datepicker (reusable, replaces native <input type=date>) ── */
.dp-anchor{position:relative;}
.dp-panel{position:absolute;top:calc(100% + 4px);left:0;z-index:10020;background:var(--bg2);background-color:var(--bg2);border:1px solid rgba(var(--surface-rgba-base),.12);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:10px;min-width:300px;animation:si .12s ease;}
.dp-panel.up{top:auto;bottom:calc(100% + 4px);}
.dp-anchor--end .dp-panel{left:auto;right:0;}
.dp-anchor--end .dp-panel.up{left:auto;right:0;}
.dp-panel.dp-panel-fixed{position:fixed;top:50%!important;left:50%!important;bottom:auto!important;transform:translate(-50%,-50%);width:min(312px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;}
.dp-panel.dp-panel-fixed.dp-panel-anchored{top:auto!important;left:auto!important;bottom:auto!important;transform:none!important;width:min(312px,calc(100vw - 32px));max-height:min(420px,calc(100dvh - 32px));overflow:auto;}
.dp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:6px;}
.dp-nav-btn,.dp-title-btn,.dp-footer-btn{font-family:var(--font-sans)!important;}.dp-nav-btn{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;background:var(--bg2);border:1px solid rgba(var(--surface-rgba-base),.08);color:var(--text2);cursor:pointer;padding:0;border-radius:var(--radius-md);line-height:1;transition:background var(--tr-fast),border-color var(--tr-fast),color var(--tr-fast),transform var(--tr-fast);}
.dp-nav-btn:hover{background:var(--card2);border-color:rgba(var(--surface-rgba-base),.16);color:var(--text);transform:translateY(-1px);}.dp-nav-btn:focus-visible,.dp-title-btn:focus-visible,.dp-footer-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.dp-title-split{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);min-width:0;padding:3px;background:rgba(var(--surface-rgba-base),.05);border:1px solid rgba(var(--surface-rgba-base),.08);border-radius:var(--radius-lg);}
.dp-title-split--range{padding:6px 12px;}.dp-title-static{font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--text);}
.dp-title-btn{display:inline-flex;align-items:center;gap:5px;min-height:28px;padding:5px 9px;background:transparent;border:1px solid transparent;border-radius:var(--radius-md);color:var(--text);cursor:pointer;font-size:var(--fs-base);font-weight:var(--fw-semibold);line-height:1;transition:background var(--tr-fast),border-color var(--tr-fast),color var(--tr-fast);}
.dp-title-btn:hover{background:var(--card2);border-color:rgba(var(--surface-rgba-base),.12);color:var(--text-strong);}.dp-title-chev{color:var(--text3);transition:transform var(--tr-fast),color var(--tr-fast);}
.dp-title-btn:hover .dp-title-chev{color:var(--accent);transform:translateY(1px);}.dp-month{font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--text);}
.dp-weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;text-align:center;font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--text3);text-transform:uppercase;letter-spacing:.04em;margin:0 0 4px;}
.dp-weekdays span{display:flex;align-items:center;justify-content:center;min-height:16px;}.dp-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:36px;column-gap:2px;row-gap:2px;}
.dp-grid.dp-grid-4{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:42px;gap:6px;}.dp-cell{padding:0;font-size:var(--fs-base);width:100%;height:100%;}
.dp-day{background:transparent;border:1px solid transparent;color:var(--text2);font-size:12px;font-family:var(--font-sans)!important;width:36px;height:36px;border-radius:var(--radius-md);cursor:pointer;display:flex;align-items:center;justify-content:center;justify-self:center;align-self:center;line-height:1;transition:background var(--tr-fast),border-color var(--tr-fast),color var(--tr-fast),transform var(--tr-fast),box-shadow var(--tr-fast);padding:0;}
.dp-grid.dp-grid-4 .dp-day{width:100%;height:100%;border-radius:var(--radius-md);}.dp-day:hover:not(.disabled):not(.empty){background:var(--bg2);border-color:rgba(var(--surface-rgba-base),.10);color:var(--text);transform:translateY(-1px);}
.dp-day.today{box-shadow:inset 0 0 0 1px var(--accent);color:var(--text);}.dp-day.selected{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:var(--fw-bold);box-shadow:0 8px 20px rgba(232,184,75,.22);}
.dp-day.disabled{color:var(--border);cursor:not-allowed;opacity:.35;}.dp-day.empty{cursor:default;visibility:hidden;pointer-events:none;}.dp-day.outside{color:var(--border);opacity:.3;}
.dp-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);margin-top:8px;padding-top:8px;border-top:1px solid rgba(var(--surface-rgba-base),.08);}
.dp-footer-btn{min-height:30px;padding:6px 10px;border-radius:var(--radius-md);background:transparent;border:1px solid transparent;color:var(--text2);cursor:pointer;font-size:var(--fs-sm);font-weight:var(--fw-semibold);transition:background var(--tr-fast),border-color var(--tr-fast),color var(--tr-fast);}
.dp-footer-btn:hover:not(:disabled){background:var(--bg2);border-color:rgba(var(--surface-rgba-base),.10);color:var(--text);}.dp-footer-btn--today{color:var(--accent);background:var(--tone-warn-bg);border-color:var(--tone-warn-border);}
.dp-footer-btn--today:hover:not(:disabled){background:rgba(232,184,75,.12);border-color:rgba(232,184,75,.26);color:var(--accent3);}.dp-footer-btn:disabled{opacity:.45;cursor:not-allowed;}
body.light .dp-panel{background:var(--card);background-color:var(--card);box-shadow:var(--shadow-md);border-color:var(--border-alpha);}
body.light .dp-title-split{background:rgba(var(--surface-rgba-base),.04);border-color:var(--border-alpha);}body.light .dp-nav-btn,body.light .dp-footer-btn:hover:not(:disabled){border-color:var(--border-alpha);}
@media(max-width:600px){.dp-panel{position:fixed;top:50%!important;left:50%!important;bottom:auto!important;transform:translate(-50%,-50%);width:min(100vw - 32px,320px);min-width:auto;max-width:320px;}.dp-grid{grid-auto-rows:40px;row-gap:3px;}.dp-grid.dp-grid-4{grid-auto-rows:44px;}.dp-day{width:38px;height:38px;font-size:14px;}.dp-grid.dp-grid-4 .dp-day{width:100%;height:100%;}}
@media(max-height:860px){.dp-panel{max-height:calc(100dvh - 24px);overflow:auto;}}
/* ── Consent / Info-Box Dialog ─────────────────────────────────────────── */
.app-dialog-desc{font-size:12.5px;color:var(--text2);line-height:1.7;margin-bottom:14px;}
.app-dialog-infobox{font-size:12px;color:var(--text2);line-height:1.75;margin-bottom:14px;padding:12px 14px;background:var(--bg);border-radius:8px;border:1px solid var(--border);}
.app-dialog-infobox-title{font-weight:var(--fw-semibold);margin-bottom:6px;font-size:12.5px;color:var(--text);}
.app-dialog-infobox ul{list-style:none;margin:0;padding:0;}
.app-dialog-infobox li{padding:2px 0;padding-left:18px;position:relative;}
.app-dialog-infobox li::before{content:"•";position:absolute;left:2px;color:var(--text3);}
.app-dialog-links{font-size:var(--fs-sm);color:var(--text3);margin-bottom:16px;line-height:1.5;}
.app-dialog-links a{color:var(--accent);}
.app-dialog-links a:hover{text-decoration:underline;}
.app-dialog-consent{display:flex;gap:10px;align-items:flex-start;margin-bottom:18px;padding:10px 12px;background:var(--bg);border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:border-color .15s;}
.app-dialog-consent:hover{border-color:rgba(232,184,75,.25);}
.app-dialog-consent input[type="checkbox"]{flex-shrink:0;width:18px;height:18px;margin-top:1px;accent-color:var(--accent);cursor:pointer;}
.app-dialog-consent span{font-size:12.5px;color:var(--text2);line-height:1.6;font-weight:var(--fw-regular);word-break:break-word;overflow-wrap:break-word;}
.app-dialog-ok:disabled{opacity:.45;cursor:not-allowed;}
/* ── KI Feature Card ── */
.ai-feature-card{border-radius:var(--radius);border:1px solid var(--border);background:var(--card);overflow:hidden;transition:border-color .2s;}
.ai-feature-card.is-active{border-color:rgba(52,211,153,.3);}
.ai-feature-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;gap:14px;}
/* Inline-Hinweis-Box (.sbn) im Card-Body braucht horizontale Margins,
   damit sie mit dem Header-Padding (20px) visuell fluchtet — sonst klebt
   sie flush an den Card-Rändern. Plus etwas großzügigeres Innen-Padding
   für Lesbarkeit (das globale 9px 11px wirkt auf einer breiten Settings-
   Card zu eng). Scoped auf Kinder der Feature-Card, um andere .sbn-
   Kontexte (Modals, Toasts, Empty-States) nicht zu berühren.
   Bug-Report 2026-04-19: „KI-Funktionen gesperrt" Hinweis ohne Padding. */
.ai-feature-card>.sbn{margin:0 20px 16px;padding:12px 14px;}
@media(max-width:640px){
  .ai-feature-card>.sbn{margin:0 14px 12px;padding:10px 12px;}
}
.ai-feature-header-left{display:flex;align-items:center;gap:14px;min-width:0;}
.ai-feature-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:transparent;border:none;color:var(--text2);transition:color .2s;}
.ai-feature-card.is-active .ai-feature-icon{background:transparent;border:none;color:var(--accent);}
.ai-feature-title{font-size:14px;font-weight:var(--fw-semibold);color:var(--text);}
.ai-feature-status{font-size:10.5px;color:var(--text3);margin-top:2px;}
.ai-feature-card.is-active .ai-feature-status{color:var(--green);}
/* Toggle switch */
.ai-toggle{position:relative;width:44px;height:24px;flex-shrink:0;cursor:pointer;background:none;border:none;padding:0;}
.ai-toggle-track{width:44px;height:24px;border-radius:12px;background:var(--bg2);border:1.5px solid var(--border);transition:background .2s,border-color .2s;display:block;}
.ai-toggle.is-on .ai-toggle-track{background:var(--green);border-color:var(--green);}
.ai-toggle-thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:white;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s;}
.ai-toggle.is-on .ai-toggle-thumb{transform:translateX(20px);}
/* Benefits */
.ai-benefits{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 20px 16px;}
.ai-benefit{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;line-height:1.5;color:var(--text2);padding:6px 10px;border-radius:var(--radius-sm);background:var(--bg);border:1px solid transparent;}
.ai-feature-card.is-active .ai-benefit{border-color:rgba(52,211,153,.12);background:rgba(52,211,153,.04);}
.ai-benefit-ico{flex-shrink:0;line-height:0;padding-top:2px;}
.ai-benefit-text{min-width:0;}
/* Footer */
.ai-feature-footer{padding:12px 20px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:var(--fs-sm);color:var(--text3);}
.ai-feature-footer a{color:var(--accent);}
.ai-feature-footer a:hover{text-decoration:underline;}
@media(max-width:560px){.ai-benefits{grid-template-columns:1fr;}}
/* Dialog enhancements */
.app-dialog-section{margin-bottom:16px;}
.app-dialog-section-title{font-size:12px;font-weight:var(--fw-bold);color:var(--text);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;}
.app-dialog-benefits{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:16px;}
.app-dialog-benefit{font-size:11.5px;color:var(--text2);display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:5px;background:var(--bg);}
.app-dialog-benefit-ico{font-size:12px;flex-shrink:0;}
@media(max-width:480px){.app-dialog-benefits{grid-template-columns:1fr;}}
/* ── Toast (modern, minimal) — 2026-05-28 bottom-center (s. _47-app-hint.css) ── */
#toasts{position:fixed;bottom:20px;left:calc(50% + var(--shell-sidebar-w-current, 0px) / 2);transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column-reverse;align-items:center;gap:var(--space-sm);pointer-events:none;}
/* 2026-05-28 Design-Angleich an .app-hint--toast via --hint-*-Tokens (kein backdrop-filter); Farb-Badge-Icons .ts/.te/.tw/.ti bleiben. */
.toast{pointer-events:auto;background:var(--hint-bg);border:1px solid var(--hint-border);border-radius:var(--hint-radius);padding:var(--hint-padding-inline);font-size:var(--fs-base);font-weight:var(--fw-medium);color:var(--hint-text-color);box-shadow:var(--hint-shadow);display:flex;align-items:center;gap:var(--hint-gap);max-width:var(--toast-max-medium);animation:toast-in .25s cubic-bezier(.2,.9,.3,1);}
.toast.toast-bump{animation:toast-bump .18s ease;}
.toast.toast-out{animation:toast-out .2s ease forwards;}
.toast-icon{flex-shrink:0;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:var(--fw-bold);line-height:1;}
.toast-icon svg{width:12px;height:12px;display:block;}
.ts .toast-icon{background:rgba(52,211,153,.15);color:var(--green);}
.te .toast-icon{background:rgba(248,113,113,.15);color:var(--red);}
.tw .toast-icon{background:rgba(232,184,75,.15);color:var(--accent);}
.ti .toast-icon{background:rgba(96,165,250,.12);color:var(--blue);}.toast-undo{background:none;border:1px solid rgba(var(--surface-rgba-base),.15);border-radius:var(--radius-sm);padding:3px 10px;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--accent);cursor:pointer;margin-left:auto;flex-shrink:0;transition:background .15s,border-color .15s;font-family:inherit;}.toast-undo:hover{background:rgba(232,184,75,.1);border-color:rgba(232,184,75,.3);}.toast-undo:disabled{opacity:.5;cursor:default;}
/* Toast consent action surface (preference learning). Fixed host → no page
   reflow; the toast box itself grows downward off the fixed corner. */
.toast--actions{align-items:flex-start;flex-wrap:wrap;}
.toast-body{display:flex;flex-direction:column;gap:var(--space-sm);min-width:0;}
.toast-actions{display:flex;gap:var(--space-sm);margin-top:2px;}
.toast-action{background:none;border:1px solid rgba(var(--surface-rgba-base),.15);border-radius:var(--radius-pill);min-height:var(--toast-button-height);padding:0 var(--toast-button-padding-x);display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text2);cursor:pointer;transition:background .15s,border-color .15s,color .15s;font-family:inherit;}
.toast-action:hover{background:rgba(var(--surface-rgba-base),.08);color:var(--text);}
.toast-action:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.toast-action--primary{color:var(--accent);border-color:rgba(232,184,75,.32);}
.toast-action--primary:hover{background:rgba(232,184,75,.12);border-color:rgba(232,184,75,.5);}
.toast-close{background:none;border:none;padding:2px;cursor:pointer;color:var(--text2);opacity:.5;flex-shrink:0;align-self:flex-start;margin-left:auto;display:flex;align-items:center;transition:opacity .15s;font-family:inherit;border-radius:2px;}
.toast-close:hover{opacity:1;}
.toast-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.toast-close svg{width:11px;height:11px;display:block;}
@media(pointer:coarse){.toast-close{padding:12px;}}
@keyframes toast-in{from{transform:translateY(8px);opacity:0;}to{transform:translateY(0);opacity:1;}}
@keyframes toast-bump{50%{transform:translateY(-2px);border-color:rgba(232,184,75,.32);}}
@keyframes toast-out{to{transform:translateY(8px);opacity:0;}}
/* ── Inline field validation ─────────────────────────────────────────────── */
.field-error{border-color:var(--red)!important;box-shadow:0 0 0 2px var(--tone-poor-border)!important;}
.field-error-hint{position:absolute;bottom:-14px;left:0;font-size:10.5px;color:var(--red);line-height:1.3;animation:si .15s ease;pointer-events:none;z-index:1;white-space:nowrap;}
.modal-error-banner{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;align-items:center;gap:7px;background:rgba(30,20,20,.94);border:1px solid rgba(248,113,113,.2);border-radius:var(--radius);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:9px 18px;font-size:12px;color:var(--tone-poor-fg);font-weight:var(--fw-medium);box-shadow:0 4px 20px rgba(0,0,0,.4);animation:meb-in .25s ease;opacity:1;transition:opacity .4s ease,transform .4s ease;}
.modal-error-banner.fade-out{opacity:0;transform:translateX(-50%) translateY(8px);pointer-events:none;}
@keyframes meb-in{from{transform:translateX(-50%) translateY(12px);opacity:0;}to{transform:translateX(-50%) translateY(0);opacity:1;}}
@keyframes si{from{transform:translateY(7px);opacity:0;}to{transform:translateY(0);opacity:1;}}

/* ===== EMPTY STATE ===== */
.empty{text-align:center;padding:32px 16px;color:var(--text3);}
.empty-i{font-size:28px;margin-bottom:8px;}

/* ── Month Empty State Module ───────────────────────────────────────── */
.mes-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:44px 32px 36px;text-align:center;display:flex;flex-direction:column;align-items:center;animation:mesFadeIn .4s ease;}
@keyframes mesFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.mes-icon{color:var(--accent);opacity:.6;margin-bottom:18px;}
.mes-title{font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--text);margin-bottom:6px;letter-spacing:-.01em;}
.mes-sub{font-size:var(--fs-base);color:var(--text3);max-width:420px;line-height:var(--lh-base);margin-bottom:22px;}
.mes-ctas{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.mes-cta-primary{font-size:14px!important;padding:11px 24px!important;border-radius:10px!important;font-weight:var(--fw-bold);display:inline-flex;align-items:center;gap:6px;}
.mes-cta-secondary{font-size:12.5px!important;padding:9px 18px!important;border-radius:8px!important;font-weight:var(--fw-semibold);display:inline-flex;align-items:center;gap:5px;background:transparent;border:1px solid var(--border2);color:var(--text2);transition:border-color .15s,color .15s,background .15s;}
.mes-cta-secondary:hover{border-color:var(--accent);color:var(--text);background:rgba(232,184,75,.04);}
.mes-tip{margin-top:22px;padding-top:16px;border-top:1px solid rgba(var(--surface-rgba-base),.05);font-size:11.5px;color:var(--text3);max-width:400px;line-height:1.5;}
/* Table entrance animation: slides up when transitioning from empty state */
.mes-table-enter{animation:mesTableIn .45s ease;}
@keyframes mesTableIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
/* Light mode */
body.light .mes-card{background:var(--card);border-color:rgba(0,0,0,.08);box-shadow:0 1px 3px rgba(0,0,0,.05);}
body.light .mes-cta-secondary{border-color:rgba(0,0,0,.12);color:var(--text2);}
body.light .mes-cta-secondary:hover{border-color:var(--accent);background:rgba(232,184,75,.04);}
body.light .mes-tip{border-top-color:rgba(0,0,0,.06);}
@media(max-width:640px){
  .mes-card{padding:32px 20px 28px;}
  .mes-ctas{flex-direction:column;align-items:stretch;}
  .mes-cta-primary,.mes-cta-secondary{justify-content:center;}
}

/* ===== LOADING ===== */
#loading{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:9999;flex-direction:column;gap:var(--space-md);}
/* .spinner durch Ledger-Rows-Loader ersetzt (public/css/app/_03-ledger-loader.css). */

/* ===== SERVER STATUS ===== */
.server-status{display:none;align-items:center;gap:5px;padding:2px 0;font-size:var(--fs-xs);font-weight:var(--fw-semibold);border:none;background:none;white-space:nowrap;}
.server-status.online{color:var(--green);}
.server-status.offline{display:flex;color:var(--red);}
.server-status.expired{display:flex;color:var(--tone-poor-fg);}
.server-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0;}

#session-expired-banner{
  position:fixed;
  /* B02-Fix (2026-05-28, nach Codex-Review): am UNTEREN Rand verankern statt
     unter der Topbar. Vermeidet das Erraten der Topbar-Höhe (Desktop nutzt
     --shell-topbar-h, Mobile --shell-mobile-topbar-h + safe-area — ein fester
     top-Offset würde auf iPhone/PWA die sticky Topbar überlappen). Bottom-
     Anchor überlappt auf keinem Viewport die Topbar und verdrängt auch die
     Sidebar nicht (das war der ursprüngliche B02-Bug). */
  left:0;
  right:0;
  bottom:0;
  z-index:calc(var(--z-toast, 1100) + 100);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 18px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(90deg,rgba(248,113,113,.12),rgba(248,113,113,.06));
  border-top:1px solid rgba(248,113,113,.2);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.session-expired-banner-copy{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.session-expired-banner-copy strong{
  font-size:12.5px;
  font-weight:var(--fw-heavy);
  /* stylelint-disable-next-line color-no-hex */
  color:rgba(254,202,202,1);
}
.session-expired-banner-copy span{
  font-size:12px;
  line-height:1.5;
  color:var(--text2);
}
.session-expired-banner-cta{
  border:none;
  border-radius:8px;
  background:var(--tone-poor-border);
  /* stylelint-disable-next-line color-no-hex */
  color:rgba(255,226,226,1);
  padding:8px 12px;
  font-size:12px;
  font-weight:var(--fw-bold);
  cursor:pointer;
  font-family:inherit;
  white-space:nowrap;
}
.session-expired-banner-cta:hover{background:rgba(248,113,113,.24);}

.tx-session-note{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-md);
  margin-top:12px;
  padding:11px 12px;
  border-radius:var(--radius-md);
  border:1px solid rgba(248,113,113,.2);
  background:rgba(248,113,113,.08);
}
.tx-session-note-copy{
  display:flex;
  flex-direction:column;
  gap:var(--space-xs);
  min-width:0;
}
.tx-session-note-copy strong{
  font-size:12px;
  font-weight:var(--fw-heavy);
  /* stylelint-disable-next-line color-no-hex */
  color:rgba(254,202,202,1);
}
.tx-session-note-copy span{
  font-size:11.5px;
  line-height:1.5;
  color:var(--text2);
}
.tx-session-note-btn{
  flex-shrink:0;
  white-space:nowrap;
}

/* ===== KEYBOARD HINTS ===== */
.kbd{display:inline-block;padding:0 4px;border-radius:3px;font-size:9px;font-family:var(--mono);background:var(--bg);border:1px solid var(--border);color:var(--text3);line-height:1.6;}
/* ── Shortcuts hint — compact, non-intrusive ── */
.shortcuts-hint{
  position:fixed;bottom:12px;left:12px;font-size:9px;color:var(--text3);z-index:50;
  display:flex;gap:6px;opacity:.3;transition:opacity .2s;
  background:rgba(0,0,0,.15);backdrop-filter:blur(4px);
  padding:4px 8px;border-radius:var(--radius-sm);
}
.shortcuts-hint:hover{opacity:.7;}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;}

/* ===== RESPONSIVE ===== */
/* ===== LIGHT THEME ===== */
/* stylelint-disable color-no-hex -- Token-Definitionen im Light-Theme-Block */
body.light{
  /* Phase G 2026-05-27 (Antigravity-Spec): Light-Theme-Tokens auf
     pixel-perfect Antigravity-Werte gehoben (gleiche Werte wie
     theme-sync.js LIGHT_TOKENS_CSS — beide müssen synchron bleiben). */
  --bg:#F4F6F8;--bg2:#eef1f4;--bg3:white;--card:white;--card2:#f8fafc;
  /* A11y FM10-a: --text3 #64748b war 4.39:1 auf --bg #F4F6F8 (knapp unter AA
     4.5:1 für Normaltext). Minimal abgedunkelt auf #616f86 → 4.70:1. Erbt
     direkt an --invoice-canceled (FM10-d miterledigt). */
  --border:#e2e8f0;--border2:#cbd5e1;--text:#0f172a;--text2:#475569;--text3:#616f86;
  --accent:#e8b84b;--accent2:#c99830;--accent3:#f5d07a;--accent-ink:#0c0f1a;
  --green:#16a362;--green2:rgba(22,163,98,.1);--green3:rgba(22,163,98,.22);
  --red:#dc4545;--red2:rgba(220,69,69,.08);--red3:rgba(220,69,69,.2);
  --blue:#3b82f6;--purple:#7c5afa;
  --shadow:0 4px 24px rgba(0,0,0,.08);
  /* Text-RGBA-Base für Light-Mode: dunkle Neutral-Farbe für Text auf weißem Grund.
     Phase G 2026-05-27: 26,30,46 → 15,23,42 (matches new --text Light #0f172a). */
  --text-rgba-base:15,23,42;--ink-rgba-base:19,32,66; /* ink = Light navy-gray für Invoice/Form-Surfaces (≠ --text-rgba-base); Doku in _00-tokens.css */
  /* Surface-RGBA-Base für Light-Mode: pure-black für subtile Abdunklung auf weißem Grund */
  --surface-rgba-base:0,0,0;
  /* Drag-Handle (Bottom-Sheets): 25% schwarz auf weißem Card-Grund war zu
     subtil — User berichtete 2026-04-30 dass Handle in Light-Mode unsichtbar
     wirkt. Auf 42% angehoben für klare Affordance-Wahrnehmung. Dark-Mode
     bleibt bei .25 (weiß auf navy ist bereits gut sichtbar). */
  --sheet-handle:rgba(0,0,0,.42);
  /* Analyse-Skeleton-Tokens (Sweep CC, 2026-05-06): hell-Werte fuer
     Light-Mode. Doc-Block weiss (=var(--card)), Panel hellblau-grau,
     Schimmer-Tints via --surface-rgba-base (= 0,0,0 in Light-Mode).
     :root-Werte (Dark-Mode-Default) leben in _00-tokens.css. */
  --analysis-skeleton-panel-bg:rgba(245,247,252,.92);
  --analysis-skeleton-doc-bg:var(--card);
  --analysis-skeleton-row-bg:rgba(var(--surface-rgba-base),.07);
  --analysis-skeleton-row-shimmer:rgba(var(--surface-rgba-base),.08);
  --analysis-skeleton-ledger-bg:rgba(var(--surface-rgba-base),.04);
  --analysis-skeleton-ledger-border:rgba(var(--surface-rgba-base),.08);
  /* Solide Surface-Base für helle Elevated-Cards. Bleibt weiß, auch wenn
     --surface-rgba-base im Light-Mode bewusst auf schwarz kippt. */
  --surface-solid-rgba-base:255,255,255;
  /* Strong Text für Light-Mode: dunkle Neutral-Farbe statt warm-off-white.
     Paart sich mit --text-strong aus dem :root-Block (Phase D Schritt 2). */
  --text-strong:#1c2030;
  /* Tone-Scale für Light-Mode: dunklere FG-Farben für Kontrast auf weißem Grund,
     hellere BG/Border für subtile Flächentöne. Ohne diese Overrides blieben die
     Tone-Tokens auf Dark-Mode-Werten und wären im Light-Mode unsichtbar. */
  --tone-good-fg:#2d7a48;
  --tone-good-bg:rgba(58,138,86,.06);
  --tone-good-border:rgba(58,138,86,.16);
  /* A11y FM10-b: --tone-warn-fg #b08a30 ist als TEXT nur 3.22:1 auf weiß (AA-
     Fail), wird aber zugleich an ~30 Stellen als Akzent (Dot/Balken/Gradient/
     Border) genutzt, wo das warme Gold gewollt ist. Derselbe Token kann nicht
     beides sein → getrennt: --tone-warn-fg bleibt der Akzent-Wert (#b08a30,
     Optik unverändert), Text-color nutzt das neue --tone-warn-text (#7a5200,
     ~6.9:1 auf weiß — AA für Normaltext). Dark: dort ist --tone-warn-fg
     (#f0cf77) als Text bereits AA, daher --tone-warn-text = --tone-warn-fg. */
  --tone-warn-fg:#b08a30;
  --tone-warn-text:#7a5200;
  --tone-warn-bg:rgba(232,184,75,.08);
  --tone-warn-border:rgba(232,184,75,.18);
  /* Body-Text-Variante fuer Warn-Surfaces: noch dunkler (~6.9:1) fuer dichte
     Body-Copy auf Warn-Surfaces. */
  --tone-warn-fg-strong:#7a5200;
  --tone-poor-fg:#a04848;
  --tone-poor-bg:rgba(184,88,88,.06);
  --tone-poor-border:rgba(184,88,88,.18);
  --tone-info-fg:#2f5f98;
  --tone-info-bg:rgba(47,95,152,.06);
  --tone-info-border:rgba(47,95,152,.16);
  /* Invoice-Design-System-Tokens im Light-Scope vollständig neu binden.
     Rechnungs-v2-Komponenten dürfen keine Dark-Surfaces behalten; sie lesen
     ausschließlich diese semantischen Tokens für Page/Card/Menu/Sheet-Kontrast. */
  --invoice-bg:var(--bg);
  --invoice-surface:var(--card);
  --invoice-surface-elevated:var(--bg3);
  --invoice-border:var(--border);
  --invoice-border-strong:var(--border2);
  --invoice-text-primary:var(--text);
  --invoice-text-secondary:var(--text2);
  --invoice-text-muted:var(--text3);
  --invoice-accent:var(--accent);
  --invoice-accent-ink:var(--accent-ink);
  --invoice-danger:var(--tone-poor-fg);
  --invoice-danger-bg:var(--tone-poor-bg);
  --invoice-danger-border:var(--tone-poor-border);
  --invoice-warning:var(--tone-warn-fg);
  --invoice-warning-bg:var(--tone-warn-bg);
  --invoice-warning-border:var(--tone-warn-border);
  --invoice-success:var(--tone-good-fg);
  --invoice-success-bg:var(--tone-good-bg);
  --invoice-success-border:var(--tone-good-border);
  --invoice-info:var(--tone-info-fg);
  --invoice-info-bg:var(--tone-info-bg);
  --invoice-info-border:var(--tone-info-border);
  --invoice-canceled:var(--text3);
  --invoice-canceled-bg:rgba(139,147,181,.12);
  --invoice-canceled-border:rgba(139,147,181,.24);
  --entry-composer-surface:var(--card);
  --entry-composer-surface-muted:var(--card2);
  --entry-composer-surface-strong:var(--bg3);
  --entry-composer-border:rgba(15,23,42,.08);
  --entry-composer-border-strong:rgba(15,23,42,.14);
  --entry-composer-field-bg:var(--bg3);
  --entry-composer-shadow:0 16px 40px rgba(15,23,42,.12);
  --entry-composer-expense-bg:var(--red2);
  --entry-composer-expense-border:var(--red3);
  --entry-composer-income-bg:var(--green2);
  --entry-composer-income-border:var(--green3);
  --entry-composer-info-bg:rgba(59,130,246,.06);
  --entry-composer-info-border:rgba(59,130,246,.18);
  /* Soft-Tokens für Pill-Backgrounds — Light-Mode-Werte (siehe :root). */
  --accent-soft:rgba(196,139,26,.14);
  --green-soft:rgba(22,163,98,.14);
  --red-soft:rgba(220,69,69,.10);
  --text3-soft:rgba(139,147,181,.18);
  /* --accent-bg-soft Light-Override: leicht höhere Opacity als Dark
     (.06 vs .05), weil helle Surfaces mehr Kontrast brauchen. */
  --accent-bg-soft:rgba(196,139,26,.06);
  /* Sidebar-Surface: Phase 2 AppShell 2026-05-26 konsumiert
     --surface-sidebar (PR #2612, Light=#f8fafc). Der alte
     --shell-sidebar-bg:var(--card) Override entfällt — Token-Mode-aware,
     keine doppelte Definition. Hover-Affordance im Light-Mode bleibt
     etwas stärker als Dark (.06 vs .04), Active-FG wechselt auf --text. */
  --shell-sidebar-item-hover:rgba(0,0,0,.06);
  --shell-sidebar-item-active-fg:var(--text);
  /* RGB tuple matching --surface-sidebar Light. Phase 2.5 Round-4
     2026-05-27: --surface-sidebar Light wurde von #f8fafc auf #ffffff
     geändert (Antigravity-Spec pure white sidebar). RGB-Tupel muss
     mitziehen, sonst rendert die @supports (backdrop-filter) Light-
     Sidebar als rgba(248,250,252, 0.72) über var(--bg)=#f5f7fa und
     wirkt grayish statt pure-white. */
  --shell-sidebar-bg-rgb:255,255,255;
}
/* stylelint-enable color-no-hex */
body.light input,body.light select,body.light textarea{background:var(--card);border-color:var(--border);}
body.light .num-stepper{background:var(--card);}
body.light .num-stepper>input[type=number]{background:none;}
body.light .num-stepper-btns button:hover{background:rgba(0,0,0,.05);}
body.light .topbar{background:var(--card);}
body.light .nav-months-bar{background:var(--bg);}
body.light .nav-months-bar-wrap::after{background:linear-gradient(to right,transparent,var(--bg));}
body.light .nav-main-tab{color:var(--text2);}

body.light .nav-main-tab:hover{color:var(--text);}
body.light .nav-group-trigger{color:var(--text2);}
body.light .nav-group-trigger:hover{color:var(--text);background:var(--card2);}
body.light .nav-group-trigger.has-active{color:var(--accent);}
body.light .nav-group-panel{background:var(--card);border-color:var(--border);box-shadow:var(--shadow);}
body.light .nav-group-item{color:var(--text2);}
body.light .nav-group-item:hover{background:var(--card2);color:var(--text);}
body.light .nav-group-item.active{color:var(--accent);background:rgba(var(--text-rgba-base),.04);}
body.light .nav-group-item.active{color:var(--accent);}
body.light .nav-month-tab{color:var(--text2);}
body.light .nav-month-tab:hover{color:var(--text);background:rgba(0,0,0,.05);}
body.light .nav-month-tab.active{background:rgba(232,184,75,.12);border-color:rgba(232,184,75,.3);color:var(--accent2);}
body.light .nav-right{border-left-color:var(--border);}
body.light .btn-tb:hover{background:rgba(0,0,0,.03);border-color:var(--border);}
/* Light-Mode Button-Hover: auf weißem Hintergrund wirkt der helle
   accent3-Hover (#f5d07a) verwaschen. Stattdessen gehen wir dunkler
   (accent2) — gleicher visueller Feedback-Effekt wie dark-mode-lighter,
   nur invertiert für den hellen Hintergrund. */
body.light .btn-p:hover{background:var(--accent2);}
body.light .pruef-page-btn.active{box-shadow:0 4px 12px rgba(232,184,75,.22);}
body.light .pruef-page-btn:hover:not(.active){background:rgba(232,184,75,.12);border-color:rgba(232,184,75,.4);}
body.light .plan-badge.plan-solo{background:rgba(100,110,140,.07);}
body.light .plan-badge.plan-pro{background:rgba(200,150,30,.1);}
body.light .plan-badge.plan-member{background:rgba(100,110,140,.07);}
body.light th{background:var(--card);}
body.light .tx-filter-bar{background:var(--card2);}
body.light .modal{background:var(--card);}
body.light .modal.mode-ausgabe .mh{background:rgba(248,113,113,.06);}
body.light .modal.mode-einnahme .mh{background:rgba(52,211,153,.06);}
body.light .modal.mode-ausgabe .calc-summary{background:rgba(248,113,113,.04);}
body.light .modal.mode-einnahme .calc-summary{background:rgba(52,211,153,.04);}
body.light ::-webkit-scrollbar-thumb{background:var(--border);}
body.light .card{border-color:var(--border);}
/* --- Suggestion/Autocomplete-Dropdowns --- */
body.light .bt-drop{box-shadow:0 8px 24px rgba(0,0,0,.1);}
/* --- Sort-Dropdown --- */
body.light .sort-drop{box-shadow:0 8px 24px rgba(0,0,0,.1);}
/* --- Tabelle: Trennlinie --- */
body.light td{border-bottom-color:rgba(0,0,0,.07);}
/* --- Error Toast --- */
.terror{background:rgba(40,8,8,.92);backdrop-filter:blur(12px);border-color:rgba(248,113,113,.25);color:var(--text);}
/* --- Quickstats-Panel --- */
body.light .qs-panel{box-shadow:0 4px 20px rgba(0,0,0,.1);}
/* --- Donut Legende --- */
body.light .ccat-leg-name{color:var(--text2);}
/* --- Rec-interval badge im Light Mode --- */
body.light .rec-interval-badge{background:rgba(59,130,246,.1);}
/* --- Table header Hintergrund --- */
body.light .tx-table-wrap thead th,.tx-table-wrap th{background:var(--card);}

/* --- Hero-Zone --- */
body.light .hero-zone{box-shadow:0 2px 12px rgba(0,0,0,.04);}
/* --- Chart cards --- */
body.light .chart-card{background:var(--card);border-color:var(--border);}
/* --- Status cards (KPI) --- */
body.light .status-card{box-shadow:0 1px 4px rgba(0,0,0,.04);}
body.light .kpi{background:var(--card);box-shadow:0 1px 4px rgba(0,0,0,.04);}
/* --- Bulk action bar --- */
body.light #bulk-bar{background:var(--card);border-color:var(--border);box-shadow:0 -2px 12px rgba(0,0,0,.06);}
/* --- Year picker --- */
body.light .yr-picker-dlg{background:var(--card);border-color:var(--border);box-shadow:0 8px 32px rgba(0,0,0,.12);}
body.light .yr-chip{background:rgba(247,247,250,1);border-color:rgba(0,0,0,.08);}
body.light .yr-chip:hover{border-color:rgba(232,184,75,.5);box-shadow:0 6px 18px rgba(0,0,0,.08);}
body.light .yr-chip.is-current{background:rgba(232,184,75,.1);border-color:rgba(232,184,75,.55);box-shadow:0 0 0 1px rgba(232,184,75,.3) inset;}
body.light .yr-chip-del{background:rgba(220,38,38,.08);color:rgba(192,57,43,1);}
body.light .yr-chip-del:hover{background:rgba(220,38,38,.18);border-color:rgba(220,38,38,.4);color:rgba(169,50,38,1);}
body.light .yr-quick-btn{background:rgba(247,247,250,1);}
body.light .yr-quick-btn:hover{background:var(--card);border-color:rgba(232,184,75,.5);}
body.light .yr-new-err{color:rgba(192,57,43,1);}
body.light .yr-card{background:var(--card2);border-color:var(--border);}
body.light .yr-card:hover{border-color:var(--accent);}
/* --- Beleg chips, badges, cards (light mode) --- */
body.light .bc-chip{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.1);color:var(--text3);}
body.light .bc-meta span:not(.bc-chip)+.bc-chip::before{color:var(--text3);}
body.light .beleg-badge{border-color:rgba(0,0,0,.1);}
body.light .beleg-badge.unlinked{background:rgba(232,184,75,.1);border-color:rgba(232,184,75,.3);}
body.light .beleg-badge.linked{background:rgba(74,222,128,.08);border-color:rgba(74,222,128,.25);}
body.light .beleg-badge.error{background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.25);}
body.light .beleg-card{box-shadow:0 1px 3px rgba(0,0,0,.06);border-color:rgba(0,0,0,.08);}
body.light .beleg-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.1);border-color:rgba(0,0,0,.12);}
body.light .bc-actions{border-top-color:rgba(0,0,0,.06);}
/* body.light .issue-card* → _53-pruefen.css */
/* --- Beleg preview --- */
body.light .beleg-preview-ov{background:rgba(0,0,0,.3);}
body.light .beleg-preview-fallback{background:var(--card);border-top-color:rgba(0,0,0,.08);}
.beleg-pdf-canvas-wrap{min-height:56vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;padding:18px 12px;background:var(--bg2);border-radius:0;}
body.light .beleg-pdf-canvas-wrap{background:var(--card);}
.beleg-pdf-canvas-stage{display:flex;align-items:flex-start;justify-content:center;max-width:100%;}
.beleg-pdf-canvas{display:block;max-width:100%;height:auto;border:0;border-radius:8px;background:var(--bank-logo-canvas);box-shadow:0 12px 32px rgba(0,0,0,.22);}
.beleg-pdf-canvas-status{min-height:18px;font-size:12px;font-weight:var(--fw-semibold);color:var(--text2);text-align:center;}
.beleg-pdf-canvas-status[data-tone="success"]{color:var(--green);}
.beleg-pdf-canvas-status[data-tone="error"]{color:var(--red);}
@media(max-width:600px){.beleg-pdf-canvas-wrap{min-height:52vh;padding:14px 10px;}.beleg-pdf-canvas-stage{width:100%!important;}.beleg-pdf-canvas{width:100%!important;height:auto!important;}}
/* --- SBN (status banner) --- */
body.light .sbn{box-shadow:0 1px 4px rgba(0,0,0,.04);}
/* Toast: kein body.light .toast Override mehr — --hint-*-Tokens decken light-mode ab (siehe _00-tokens.css). */
body.light .server-status.expired{color:var(--tone-poor-fg);}
body.light #session-expired-banner{background:linear-gradient(90deg,rgba(176,80,80,.11),rgba(176,80,80,.05));border-bottom-color:rgba(176,80,80,.14);}
body.light .session-expired-banner-copy strong{color:rgba(142,63,63,1);}
body.light .session-expired-banner-copy span{color:var(--text2);}
body.light .session-expired-banner-cta{background:rgba(176,80,80,.12);color:rgba(142,63,63,1);}
body.light .session-expired-banner-cta:hover{background:rgba(176,80,80,.18);}
body.light .tx-session-note{background:rgba(176,80,80,.06);border-color:rgba(176,80,80,.14);}
body.light .tx-session-note-copy strong{color:rgba(142,63,63,1);}
body.light .tx-session-note-copy span{color:var(--text2);}
body.light .terror{background:rgba(255,245,245,.95);border-color:rgba(220,69,69,.2);color:var(--text);}

/* ===== THEME TOGGLE ===== */
.theme-toggle{background:none;border:none;color:var(--text3);width:28px;height:28px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .15s,background .15s;padding:0;line-height:0;}
.theme-toggle:hover{color:var(--text);background:rgba(var(--surface-rgba-base),.06);}
body.light .theme-toggle:hover{background:rgba(0,0,0,.04);}

/* ===== MARKED BOOKING ===== */
/* ── Marking (ELSTER checkbox) — clean minimal checkbox ── */
.tx-row.marked td{background:rgba(52,211,153,.04);}
.tx-row.marked{border-left-color:var(--green)!important;}
.mark-btn{
  background:none;border:1.5px solid var(--border);border-radius:4px;
  width:18px;height:18px;min-width:18px;min-height:18px;
  cursor:pointer;font-size:0;color:transparent;display:flex;align-items:center;justify-content:center;
  padding:0;transition:border-color .15s, background .15s;position:relative;flex-shrink:0;
}
.mark-btn:hover{border-color:var(--green);background:rgba(52,211,153,.08);}
.mark-btn.is-marked{
  background:var(--green);border-color:var(--green);color:transparent;
}
.mark-btn.is-marked::after{
  content:'';display:block;width:5px;height:9px;
  border:solid white;border-width:0 2px 2px 0;
  transform:rotate(45deg);margin-top:-1px;
}

/* ===== BULK ACTIONS ===== */
.bulk-bar{display:none;padding:8px 14px;background:rgba(232,184,75,.08);border-bottom:1px solid rgba(232,184,75,.2);align-items:center;gap:10px;font-size:12px;color:var(--text);}
.bulk-bar.visible{display:flex;}
.bulk-cb{width:20px;height:20px;accent-color:var(--accent);cursor:pointer;flex-shrink:0;}
.tx-cb{width:20px;height:20px;accent-color:var(--accent);cursor:pointer;}

/* Sweep BB: Dark-mode checkboxes stay real inputs, but no longer render as loud white system boxes. */
body.dark .tx-cb,
body.dark .bulk-cb,
.tx-cb,
.bulk-cb{
  appearance:none;
  -webkit-appearance:none;
  width:18px;
  height:18px;
  border:1.5px solid var(--border2);
  border-radius:999px;
  background:var(--bg2);
  cursor:pointer;
  transition:background .12s,border-color .12s;
  display:inline-block;
  position:relative;
  vertical-align:middle;
  flex-shrink:0;
  box-sizing:border-box;
  padding:0;
}
.tx-cb:hover,
.bulk-cb:hover{border-color:var(--text3);background:var(--bg3);}
.tx-cb:focus-visible,
.bulk-cb:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(232,184,75,.18);}
.tx-cb:checked,
.bulk-cb:checked{background:var(--accent);border-color:var(--accent);}
.tx-cb:checked::after,
.bulk-cb:checked::after{
  content:"";
  position:absolute;
  left:50%;
  top:45%;
  width:5px;
  height:9px;
  border:solid var(--bg);
  border-width:0 2px 2px 0;
  transform:translate(-50%,-50%) rotate(45deg);
}
body.light .tx-cb,
body.light .bulk-cb{
  border-color:var(--border2);
  background:var(--card);
}
body.light .tx-cb:hover,
body.light .bulk-cb:hover{border-color:var(--text3);background:var(--bg2);}
body.light .tx-cb:checked,
body.light .bulk-cb:checked{background:var(--accent);border-color:var(--accent);}
body.light .tx-cb:checked::after,
body.light .bulk-cb:checked::after{
  border:solid var(--accent-ink);
  border-width:0 2px 2px 0;
}

/* ── Saldo column calibration ── */
.tx-saldo{font-size:12px;opacity:.75;}
/* ── Monthly tax summary block ── */
.month-tax-summary{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-sm);margin-top:12px;}
.month-tax-summary-head{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;margin-top:4px;}
@media(max-width:560px){.month-tax-summary{grid-template-columns:1fr;}}
/* ── Month header action groups ── */
.month-actions{display:flex;gap:6px;align-items:center;}
.month-actions-util{display:flex;gap:var(--space-xs);align-items:center;padding-right:8px;border-right:1px solid var(--border);margin-right:2px;}
/* ===== NOTES ===== */
.tx-note{font-size:var(--fs-xs);color:var(--text3);font-style:italic;margin-top:1px;max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tx-km-meta{font-size:10.5px;color:var(--text3);margin-top:2px;font-style:normal;letter-spacing:.01em;white-space:nowrap;}
.tx-km-meta strong{font-weight:var(--fw-semibold);color:var(--text2);}
.tx-km-badge{display:inline-block;font-size:8px;font-weight:var(--fw-bold);letter-spacing:.04em;text-transform:uppercase;color:var(--text3);background:rgba(99,120,166,.1);border-radius:3px;padding:1px 4px;margin-right:4px;vertical-align:1px;}
.tx-km-compact{font-size:var(--fs-xs);}
.tx-km-compact .tx-km-badge{font-size:7.5px;padding:0.5px 3px;margin-right:3px;}

/* ===== QUICK ENTRY ===== */
.quick-toggle{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--text3);cursor:pointer;user-select:none;}
.quick-toggle input{width:14px;height:14px;accent-color:var(--accent);cursor:pointer;}

/* ===== JAHRESÜBERSICHT ===== */
.year-overview-filters{display:flex;gap:var(--space-sm);align-items:center;flex-wrap:wrap;margin-bottom:10px;}
.year-kpi-mini{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.year-kpi-mini .kpi{padding:10px 14px;min-width:140px;}

/* ── Jahresübersicht v2: Accordion Cockpit ── */
.jr-header{margin-bottom:16px;}
.jr-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:18px;}
.jr-kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;}
.jr-kpi-label{font-size:10.5px;font-weight:var(--fw-semibold);color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px;}
.jr-kpi-val{font-family:var(--mono);font-size:var(--fs-xl);font-weight:var(--fw-semibold);}
.jr-kpi-primary{border-color:rgba(240,193,95,.25);background:rgba(240,193,95,.04);}

/* Toolbar */
.jr-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:var(--space-sm);flex-wrap:wrap;}
.jr-toolbar-left{display:flex;gap:2px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius2);padding:3px;}
.jr-toolbar-right{display:flex;gap:6px;align-items:center;}
.jr-q-btn{background:none;border:none;color:var(--text3);font-family:var(--mono);font-size:11.5px;font-weight:var(--fw-semibold);padding:5px 14px;border-radius:calc(var(--radius2) - 2px);cursor:pointer;transition:all .15s;}
.jr-q-btn:hover{color:var(--text);background:var(--card);}
.jr-q-btn.active{color:var(--accent);background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.2);}
.jr-expand-btn{background:none;border:none;color:var(--text3);font-size:var(--fs-sm);font-weight:var(--fw-medium);cursor:pointer;font-family:inherit;padding:4px 8px;border-radius:var(--radius2);transition:color .15s;display:inline-flex;align-items:center;gap:var(--space-xs);}
.jr-expand-btn:hover{color:var(--text);}

/* Quarter */
.jr-quarter{margin-bottom:12px;}
.jr-q-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:6px;flex-wrap:wrap;gap:var(--space-sm);}
.jr-q-title{font-size:12.5px;font-weight:var(--fw-bold);color:var(--text2);letter-spacing:.04em;text-transform:uppercase;}
.jr-q-stats{display:flex;gap:var(--space-lg);align-items:center;flex-wrap:wrap;}
.jr-q-stat{font-size:12px;font-family:var(--mono);font-weight:var(--fw-medium);color:var(--text3);}
.jr-q-stat-label{font-size:9.5px;color:var(--text3);font-family:inherit;font-weight:var(--fw-semibold);margin-right:3px;text-transform:uppercase;letter-spacing:.04em;}
.jr-q-stat-saldo{font-weight:var(--fw-bold);font-size:var(--fs-base);color:var(--text);}
.jr-q-stat-saldo .vp,.jr-q-stat-saldo .vn{font-size:var(--fs-base);}

/* Month accordion */
.jr-month{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:4px;overflow:hidden;background:var(--card);transition:border-color .15s;}
.jr-month:last-child{margin-bottom:0;}
.jr-month-open{border-color:rgba(240,193,95,.2);}
.jr-month-loss{border-left:3px solid rgba(248,113,113,.45);}
.jr-month-header{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;background:none;border:none;cursor:pointer;font-family:inherit;text-align:left;transition:background .12s;color:var(--text);}
.jr-month-header:hover{background:var(--bg2);}
.jr-month-chevron{flex-shrink:0;color:var(--text3);transition:transform .2s;display:flex;align-items:center;}
.jr-month-open .jr-month-chevron{transform:rotate(90deg);}
.jr-month-name{font-size:13.5px;font-weight:var(--fw-semibold);min-width:85px;}
.jr-month-count{font-size:var(--fs-sm);color:var(--text3);font-weight:var(--fw-medium);min-width:90px;}
.jr-month-vals{display:flex;gap:18px;margin-left:auto;align-items:center;flex-wrap:wrap;}
.jr-month-val{font-family:var(--mono);font-size:12px;font-weight:var(--fw-medium);white-space:nowrap;}
.jr-mv-label{font-size:9.5px;color:var(--text3);font-weight:var(--fw-semibold);margin-right:3px;text-transform:uppercase;}
.jr-month-val-s{font-weight:var(--fw-bold);font-size:12.5px;}
.jr-month-flag{flex-shrink:0;display:flex;align-items:center;margin-left:6px;}
.jr-flag-loss{color:rgba(248,113,113,.75);}
.jr-flag-warn{color:rgba(240,193,95,.7);}

/* Month body (expanded) */
.jr-month-body{border-top:1px solid var(--border);background:var(--bg);}
.jr-month-body .table-wrap{margin:0;}
.jr-table{width:100%;}
.jr-table th{font-size:10.5px;color:var(--text3);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.05em;padding:8px 10px;border-bottom:1px solid var(--border);}
.jr-table td{padding:10px 10px;font-size:12.5px;border-bottom:1px solid var(--border);vertical-align:top;}
.jr-table tr:last-child td{border-bottom:none;}
.jr-table .tx-row:hover{background:rgba(240,193,95,.03);}

/* Month footer summary */
.jr-month-footer{display:flex;align-items:center;gap:14px;padding:8px 14px;background:var(--bg2);border-top:1px solid var(--border);font-size:var(--fs-sm);color:var(--text3);font-weight:var(--fw-medium);flex-wrap:wrap;}
.jr-mf-spacer{flex:1;}
.jr-mf-val{font-family:var(--mono);font-size:var(--fs-sm);white-space:nowrap;}
.jr-mf-label{font-size:9.5px;font-weight:var(--fw-semibold);margin-right:2px;}

/* Bottom spacer */
.jr-end{height:24px;}

/* Responsive */
@media(max-width:700px){
  .jr-kpis{grid-template-columns:1fr 1fr;}
  .jr-month-vals{gap:10px;}
  .jr-month-val-e,.jr-month-val-a{display:none;}
  .jr-q-stats{gap:10px;}
  .jr-q-stat-saldo{font-size:12px;}
}
@media(max-width:480px){
  .jr-kpis{grid-template-columns:1fr;}
  .jr-kpi-val{font-size:18px;}
  .jr-month-header{padding:10px 12px;gap:var(--space-sm);}
  .jr-month-name{font-size:12.5px;min-width:70px;}
  .jr-month-vals{gap:6px;}
  .jr-month-val{font-size:var(--fs-sm);}
  .jr-month-val-s{font-size:11.5px;}
  .jr-q-header{padding:10px 12px;}
  .jr-q-stats{gap:var(--space-sm);}
  .jr-q-stat{font-size:var(--fs-sm);}
  .jr-q-stat-saldo{font-size:11.5px;}
  .jr-table td{padding:8px 8px;font-size:12px;}
  .jr-month-footer{padding:6px 12px;gap:var(--space-sm);}
  .jr-toolbar-left{padding:2px;}
  .jr-q-btn{padding:5px 10px;font-size:var(--fs-sm);}
}

/* ===== YEAR SELECTOR ===== */
.year-sel{background:var(--card);border:1px solid var(--border);color:var(--text);padding:2px 6px;border-radius:var(--radius2);font-size:12px;font-family:var(--mono);cursor:pointer;outline:none;font-weight:var(--fw-semibold);}
.year-sel:focus{border-color:var(--accent2);}

/* ===== QUICK STATS PANEL ===== */
.qs-toggle{position:fixed;bottom:16px;right:16px;width:36px;height:36px;border-radius:var(--radius-md);background:var(--card2);color:var(--accent);border:1px solid rgba(240,193,95,0.25);font-size:16px;cursor:pointer;z-index:90;box-shadow:0 2px 12px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s,transform .15s;}
.qs-toggle:hover{background:rgba(240,193,95,0.12);border-color:rgba(240,193,95,0.5);transform:translateY(-1px);}
.qs-toggle.active{background:rgba(240,193,95,0.15);border-color:rgba(240,193,95,0.55);}
.qs-panel{position:fixed;bottom:60px;right:16px;width:280px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);z-index:90;padding:14px;display:none;animation:modalIn .2s ease;max-height:70vh;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.qs-panel.open{display:block;}
.qs-row{display:flex;justify-content:space-between;padding:4px 0;font-size:11.5px;color:var(--text2);}
.qs-row .qs-val{font-family:var(--mono);font-weight:var(--fw-semibold);color:var(--text);}
.qs-section{font-size:9.5px;font-weight:var(--fw-bold);color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin:10px 0 4px;padding-top:8px;border-top:1px solid var(--border);}
.qs-section:first-child{margin-top:0;padding-top:0;border-top:none;}
.qs-warn{background:rgba(232,184,75,.1);border:1px solid rgba(232,184,75,.2);border-radius:var(--radius2);padding:6px 9px;font-size:12px;font-weight:var(--fw-semibold);color:var(--accent);margin-top:8px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

@media(max-width:768px){
  .type-toggle{flex-direction:column;gap:6px;}
  .row-actions{opacity:1;}
  .shortcuts-hint{display:none;}
  .filter-kbd{display:none;}
  .qs-panel{right:8px;left:8px;width:auto;bottom:56px;}
  #session-expired-banner{align-items:flex-start;flex-direction:column;}
  .tx-session-note{flex-direction:column;}
}

/* ===== IMPORT PREVIEW ===== */
.imp-row{display:flex;align-items:center;gap:var(--space-sm);padding:7px 10px;border-radius:var(--radius2);margin-bottom:3px;font-size:12px;}
.imp-row.imp-ok{background:rgba(52,211,153,.06);border:1px solid rgba(52,211,153,.15);}
.imp-row.imp-warn{background:rgba(232,184,75,.08);border:1px solid rgba(232,184,75,.2);}
.imp-row.imp-err{background:rgba(248,113,113,.06);border:1px solid rgba(248,113,113,.2);opacity:.7;}
.imp-row.imp-dup{background:rgba(232,184,75,.08);border:1px solid rgba(232,184,75,.2);}
.imp-cb{width:15px;height:15px;accent-color:var(--accent);cursor:pointer;flex-shrink:0;}
.imp-summary{display:flex;gap:var(--space-md);flex-wrap:wrap;margin-bottom:10px;font-size:12px;}
.imp-summary span{display:flex;align-items:center;gap:var(--space-xs);}
.imp-dot{display:inline-block;width:8px;height:8px;border-radius:50%;}
.imp-dot.g{background:var(--green);}.imp-dot.y{background:var(--accent);}.imp-dot.r{background:var(--red);}
.imp-msgs{padding:2px 10px 6px 33px;font-size:10.5px;line-height:1.8;}

/* ===== PRÜFEN VIEW ===== */
/* ── Prüfen: Segmented Control ──────────────────────────────────────── */
.seg-ctrl{display:inline-flex;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-md);padding:3px;gap:2px;}
.seg-ctrl button{border:none;background:none;color:var(--text2);font-family:inherit;font-size:12px;font-weight:var(--fw-medium);padding:5px 14px;border-radius:7px;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap;}
.seg-ctrl button:hover{background:var(--card2);color:var(--text);}
.seg-ctrl button.active{background:var(--card);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.18);}
.seg-ctrl .seg-cnt{display:inline-block;background:var(--bg3,rgba(var(--surface-rgba-base),.07));border-radius:var(--radius-md);padding:0 6px;font-size:var(--fs-xs);margin-left:4px;font-weight:var(--fw-semibold);min-width:18px;text-align:center;}
.seg-ctrl button.active .seg-cnt{background:var(--accent);color:black;}

/* Prüfen-Fortschritt/Bulk/Divider/Issue-Cards/Hero → ausgelagert nach
   public/css/app/_53-pruefen.css (File-Size-Freeze). Geteilte Klassen
   (.seg-ctrl unten, .pruef-pagination*/.pruef-page-* danach) bleiben
   hier, weil auch Belege/Settings sie nutzen. */

/* ── Prüfen: Page Info + Pagination (User-Feedback 2026-05-11) ──────────
   Genutzt in: Dashboard "Zu prüfen", Belege-Liste, Settings-Audit-Log.
   Eine zentrale CSS-Klasse — Fixes hier wirken überall.
   Desktop: square Page-Buttons (38×38), Zurück/Weiter kompakter ohne Fix-Width.
   Mobile: noch enger, Page-Buttons 40×40 für Touch-Target, Digit-Font dominiert
   die Button-Fläche („Zahlen besser ausfüllen"). Active-Shadow toned down,
   damit der aktive Button nicht visuell aus der Reihe springt. */
.pruef-page-info{font-size:var(--fs-sm);color:var(--text3);white-space:nowrap;}
.pruef-sort-label{font-size:var(--fs-xs);color:var(--text3);white-space:nowrap;}
.pruef-pagination-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 0 8px;}
.pruef-pagination{display:flex;align-items:center;gap:8px;justify-content:center;flex-wrap:wrap;}
.pruef-pagination-pages{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;padding:6px 10px;border:1px solid rgba(var(--surface-rgba-base),.08);border-radius:999px;background:rgba(var(--surface-rgba-base),.03);box-shadow:0 4px 14px rgba(0,0,0,.06);}
.pruef-page-nav,.pruef-page-btn{border-radius:12px;height:38px;min-height:38px;font-weight:var(--fw-semibold);display:inline-flex;align-items:center;line-height:1;}
.pruef-page-nav{min-width:0;padding:0 14px;justify-content:center;font-size:13px;}
.pruef-page-btn{width:38px;min-width:38px;padding-inline:0;justify-content:center;font-size:15px;font-variant-numeric:tabular-nums;}
.pruef-page-gap{display:inline-flex;align-items:center;justify-content:center;min-width:14px;color:var(--text3);font-size:13px;font-weight:var(--fw-semibold);}
.pruef-page-btn.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);box-shadow:0 2px 8px rgba(232,184,75,.22);}
.pruef-page-info-bottom{text-align:center;margin-bottom:0;}

/* Settings activity log */
.settings-activity-row{
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  gap:12px;
  padding:9px 0;
  border-bottom:1px solid var(--border);
  font-size:12px;
}
.settings-activity-time{
  color:var(--text3);
  font-family:var(--font-mono);
  font-size:11px;
  line-height:1.45;
  white-space:nowrap;
}
.settings-activity-copy{min-width:0;display:flex;flex-direction:column;gap:2px;}
.settings-activity-action{font-weight:var(--fw-semibold);color:var(--text1);line-height:1.35;}
.settings-activity-detail{
  color:var(--text3);
  line-height:1.45;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media(max-width:560px){
  .settings-activity-row{grid-template-columns:1fr;gap:3px;}
  .settings-activity-detail{white-space:normal;}
}
.pruef-page-nav[disabled],.pruef-page-btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;}
body.light .pruef-pagination-pages{background:rgba(var(--surface-rgba-base),.02);box-shadow:0 12px 24px rgba(15,23,42,.06);}

@media (max-width:720px){
  .pruef-pagination-wrap{padding:12px 0 6px;gap:8px;}
  .pruef-pagination{gap:6px;}
  .pruef-pagination-pages{gap:4px;padding:5px 8px;max-width:100%;}
  .pruef-page-nav{padding:0 10px;font-size:13px;height:40px;min-height:40px;}
  .pruef-page-btn{width:40px;min-width:40px;height:40px;min-height:40px;font-size:15px;}
  .pruef-page-gap{min-width:12px;}
}

@media (max-width:480px){
  .pruef-pagination{gap:5px;}
  .pruef-pagination-pages{gap:3px;padding:4px 6px;}
  .pruef-page-nav{padding:0 8px;font-size:12.5px;height:40px;min-height:40px;}
  .pruef-page-btn{width:38px;min-width:38px;height:40px;min-height:40px;font-size:14.5px;}
}

/* ===== BELEGE ARCHIVE ===== */
/* Upload-Panel-Basis (.beleg-upload-panel, .bup- Klassen, .beleg-upload-item) nach _52-belegarchiv.css migriert (T-001/PR3, Plan Paragraph 3.3 / D3). Restliche Beleg-Klassen (Card, Badge, Match, Preview, PDF-Canvas) bleiben hier — Pre-Launch-Migrations-Backlog. */ .beleg-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:18px 20px 14px;margin-bottom:10px;transition:background .2s,border-color .2s,box-shadow .2s;box-shadow:0 1px 3px rgba(0,0,0,.08),0 0 0 0 transparent;}.beleg-card:hover{background:var(--card2);border-color:rgba(var(--surface-rgba-base),.1);box-shadow:0 2px 8px rgba(0,0,0,.12),0 0 0 1px rgba(var(--surface-rgba-base),.04);}.beleg-card.beleg-open{border-left:3px solid rgba(232,184,75,.5);}.beleg-card.beleg-error{border-left:3px solid rgba(248,113,113,.5);}.beleg-card.beleg-linked{border-left:3px solid rgba(74,222,128,.35);}.bc-header{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}.bc-name{font-size:13.5px;font-weight:var(--fw-semibold);color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.01em;}.bc-amount{font-family:var(--mono);font-size:14px;color:var(--accent);font-weight:var(--fw-bold);flex-shrink:0;letter-spacing:-.02em;}.bc-meta{font-size:var(--fs-sm);color:var(--text3);margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}.bc-meta span:not(.bc-chip){color:var(--text2);}.bc-chip{background:rgba(var(--surface-rgba-base),.04);border:1px solid rgba(var(--surface-rgba-base),.06);border-radius:var(--radius-sm);padding:2px 8px;font-size:var(--fs-xs);color:var(--text3);}.bc-chip.bc-income{color:var(--green);background:rgba(74,222,128,.06);border-color:rgba(74,222,128,.12);}.bc-chip.bc-expense{color:var(--text3);}.bc-status{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px;}.bc-link-target{font-size:var(--fs-xs);color:var(--text3);}.bc-actions{display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm);margin-top:12px;padding-top:10px;border-top:1px solid rgba(var(--surface-rgba-base),.04);flex-wrap:wrap;}.bc-actions-primary{display:flex;gap:6px;}.bc-actions-primary .btn{border-radius:20px;padding:5px 14px;font-size:var(--fs-sm);}.bc-actions-secondary{display:flex;gap:5px;}.bc-actions-secondary .btn{font-size:10.5px;padding:5px 12px;border-radius:20px;}.bc-delete{color:var(--text3)!important;opacity:.5;transition:opacity .15s;}.bc-delete:hover{opacity:1;color:var(--red)!important;}.beleg-badge{display:inline-block;padding:3px 9px;border-radius:var(--radius-sm);font-size:9.5px;font-weight:var(--fw-bold);letter-spacing:.02em;}.beleg-badge.linked{background:rgba(74,222,128,.1);color:var(--green);border:1px solid rgba(74,222,128,.2);}.beleg-badge.unlinked{background:rgba(232,184,75,.1);color:var(--accent);border:1px solid rgba(232,184,75,.25);}.beleg-badge.error{background:rgba(248,113,113,.08);color:var(--red);border:1px solid rgba(248,113,113,.2);}.beleg-badge.no-key{background:rgba(148,163,184,.08);color:var(--text3);border:1px solid rgba(148,163,184,.2);}.beleg-match-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-md);padding:10px 12px;margin-bottom:6px;cursor:pointer;transition:border-color .15s,background .15s;display:flex;align-items:center;gap:10px;}.beleg-match-card:hover{border-color:var(--accent);}.beleg-match-score{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);font-weight:var(--fw-bold);font-family:var(--mono);flex-shrink:0;}.beleg-match-link{display:inline-flex;align-items:center;gap:var(--space-xs);color:var(--green);font-size:var(--fs-sm);font-weight:var(--fw-semibold);flex-shrink:0;white-space:nowrap;}.beleg-match-score.high{background:rgba(74,222,128,.12);color:var(--green);border:1px solid rgba(74,222,128,.25);}.beleg-match-score.med{background:rgba(232,184,75,.1);color:var(--accent);border:1px solid rgba(232,184,75,.25);}.beleg-match-score.low{background:rgba(148,163,184,.08);color:var(--text3);border:1px solid rgba(148,163,184,.2);}.beleg-preview-frame{width:100%;height:70vh;border:none;border-radius:8px 8px 0 0;background:white;display:block;}.beleg-preview-fallback{display:flex;justify-content:flex-end;padding:10px 12px;border-top:1px solid var(--border);background:var(--bg2);}.beleg-card-compact{display:flex;align-items:center;gap:var(--space-sm);padding:6px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;margin-bottom:3px;transition:background .15s;}.beleg-card-compact:hover{background:var(--card2);}.beleg-link-icon{display:inline-flex;align-items:center;gap:2px;font-size:var(--fs-xs);color:var(--green);cursor:pointer;}.beleg-link-icon:hover{text-decoration:underline;}.beleg-link-icon:hover{opacity:1;}
.beleg-link-icon.has-beleg{opacity:1;color:var(--accent);}

/* ── Upload Quota Meter ─────────────────────────────────────────────── */
.uq-meter{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-md);padding:10px 14px;margin-bottom:14px;transition:border-color .2s;}
.uq-meter.uq-ok{border-left:3px solid var(--green);}
.uq-meter.uq-warn{border-left:3px solid var(--accent);}
.uq-meter.uq-crit{border-left:3px solid var(--red);}
.uq-meter.uq-ok .uq-value,.uq-meter.uq-ok .uq-status{color:var(--green);}
.uq-meter.uq-warn .uq-value,.uq-meter.uq-warn .uq-status{color:var(--accent);}
.uq-meter.uq-crit .uq-value,.uq-meter.uq-crit .uq-status{color:var(--red);}
.uq-row{display:flex;justify-content:space-between;align-items:center;}
.uq-label{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text2);letter-spacing:.01em;}
.uq-value{font-family:var(--mono);font-size:var(--fs-base);font-weight:var(--fw-bold);letter-spacing:-.02em;}
.uq-sep{color:var(--text3);font-weight:var(--fw-regular);}
.uq-bar-track{display:block;width:100%;height:4px;background:var(--border);overflow:hidden;margin:7px 0 6px;}
.uq-bar-fill{transition:width .5s ease,fill .3s;}
.uq-meter.uq-ok .uq-bar-fill{fill:var(--green);}
.uq-meter.uq-warn .uq-bar-fill{fill:var(--accent);}
.uq-meter.uq-crit .uq-bar-fill{fill:var(--red);}
.uq-status{font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:.01em;}
.uq-pct{font-size:var(--fs-xs);font-family:var(--mono);color:var(--text3);}
body.light .uq-meter{background:var(--card);border-color:var(--border);}
body.light .uq-bar-track{background:var(--border);}

/* ── Upload Module ──────────────────────────────────────────────────── */
.um-module{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 20px;margin-bottom:16px;transition:border-color .3s,box-shadow .3s;}
.um-module:not(.um-done){border-color:rgba(232,184,75,.25);box-shadow:0 0 0 1px rgba(232,184,75,.08);}
.um-module.um-done{border-color:rgba(74,222,128,.25);box-shadow:0 0 0 1px rgba(74,222,128,.06);}
.um-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
.um-header-left{display:flex;align-items:center;gap:var(--space-sm);}
.um-title{font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--text);}
.um-cancel{min-height:30px;background:var(--tone-poor-bg);border:1px solid var(--tone-poor-border);cursor:pointer;color:var(--tone-poor-fg);padding:0 10px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:var(--fw-semibold);white-space:nowrap;transition:color .15s,background .15s,border-color .15s;}
.um-cancel:hover{color:var(--red);border-color:var(--red);background:var(--tone-poor-bg);}
.um-bar-track{display:block;width:100%;height:4px;background:var(--border);overflow:hidden;margin-bottom:12px;}
.um-bar-fill{fill:var(--accent);transition:width .35s ease,fill .35s ease;}
.um-bar-done{fill:var(--green);}
.um-active{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);padding:8px 12px;background:rgba(232,184,75,.04);border:1px solid rgba(232,184,75,.12);border-radius:8px;margin-bottom:10px;}
.um-active-name{font-size:11.5px;font-weight:var(--fw-medium);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.um-active-status{font-size:var(--fs-xs);color:var(--accent);flex-shrink:0;font-weight:var(--fw-semibold);}
.um-counters{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:6px;}
.um-counter{display:inline-flex;align-items:center;gap:var(--space-xs);font-size:11.5px;font-weight:var(--fw-semibold);}
.um-counter-muted{color:var(--text3);}
.um-c-ok{color:var(--green);}
.um-c-dup{color:var(--text3);}
.um-c-err{color:var(--red);}
.um-c-cancel{color:var(--text3);}
.um-toggle{background:none;border:none;cursor:pointer;color:var(--text3);font-size:var(--fs-sm);padding:4px 0;transition:color .15s;}
.um-toggle:hover{color:var(--text);}
.um-toggle-count{font-family:var(--mono);font-size:var(--fs-xs);opacity:.6;}
.um-detail-list{max-height:240px;overflow-y:auto;margin-top:6px;border:1px solid var(--border);border-radius:8px;background:var(--bg3);}
.um-detail-row{display:flex;align-items:center;gap:var(--space-sm);padding:5px 10px;font-size:var(--fs-sm);border-bottom:1px solid rgba(var(--surface-rgba-base),.03);}
.um-detail-row:last-child{border-bottom:none;}
.um-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.um-dot-ok{background:var(--green);}
.um-dot-dup{background:var(--text3);opacity:.5;}
.um-dot-err{background:var(--red);}
.um-dot-pending{background:var(--accent);animation:um-pulse 1s infinite;}
.um-dot-cancel{background:var(--text3);opacity:.35;}
@keyframes um-pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.um-detail-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2);}
.um-detail-info{font-size:var(--fs-xs);color:var(--text3);flex-shrink:0;max-width:40%;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.um-retry{background:none;border:none;cursor:pointer;color:var(--accent);padding:2px;border-radius:4px;display:flex;align-items:center;transition:color .15s,background .15s;flex-shrink:0;}
.um-retry:hover{color:var(--green);background:rgba(74,222,128,.08);}
.um-footer{display:flex;justify-content:flex-end;margin-top:10px;padding-top:8px;border-top:1px solid rgba(var(--surface-rgba-base),.04);}
/* .um-spin und Keyframes entfernt — Belege-Upload nutzt jetzt den
   Ledger-Rows-Loader (public/css/app/_03-ledger-loader.css). */
/* Light mode */
body.light .um-module{background:var(--card);border-color:var(--border);}
body.light .um-module:not(.um-done){border-color:rgba(201,152,48,.2);box-shadow:0 1px 3px rgba(0,0,0,.06);}
body.light .um-module.um-done{border-color:rgba(74,222,128,.2);}
body.light .um-active{background:rgba(232,184,75,.04);border-color:rgba(232,184,75,.12);}
body.light .um-detail-list{background:var(--bg2);border-color:var(--border);}
body.light .um-detail-row{border-bottom-color:rgba(0,0,0,.04);}
body.light .um-footer{border-top-color:rgba(0,0,0,.06);}

.upload-global-wrap{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:1200;width:min(420px,calc(100vw - 32px));display:none;pointer-events:none;}
.upload-global-wrap.is-visible{display:block;pointer-events:auto;}
.um-module--global{margin:0;background:var(--card);box-shadow:var(--shadow-md);border-color:var(--accent);padding:14px 16px;}
.um-module--global .um-header{margin-bottom:8px;}
.um-module--global .um-title{font-size:var(--fs-sm);}
.um-module--global .um-bar-track{height:5px;border-radius:var(--radius-pill);}
.um-module--global .um-active{padding:7px 10px;}
.um-module--global .um-detail-list{max-height:180px;}
@media (max-width:720px){.upload-global-wrap{left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));width:auto;}.um-module--global{padding:12px;}.um-module--global .um-header{align-items:flex-start;}.um-module--global .um-cancel{margin-left:auto;}}

/* ===== LOGIN SCREEN ===== */
#login-screen{position:fixed;inset:0;z-index:9999;background:var(--bg);display:none;align-items:center;justify-content:center;}
.login-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:40px 36px;width:100%;max-width:360px;box-shadow:var(--shadow);}
.login-logo{font-size:30px;font-weight:var(--fw-heavy);color:var(--accent);text-align:center;margin-bottom:4px;letter-spacing:-1px;}
.login-sub{font-size:12px;color:var(--text3);text-align:center;margin-bottom:28px;}
.login-card input[type=password]{width:100%;padding:11px 13px;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius2);color:var(--text);font-size:14px;font-family:inherit;margin-bottom:12px;outline:none;transition:border-color .15s;box-sizing:border-box;}
.login-card input[type=password]:focus{border-color:var(--accent);}
.login-btn{width:100%;padding:11px;background:var(--accent);color:var(--accent-ink);border:none;border-radius:var(--radius2);font-size:14px;font-weight:var(--fw-bold);cursor:pointer;font-family:inherit;transition:opacity .15s;}
.login-btn:hover{opacity:.88;}.login-btn:disabled{opacity:.5;cursor:not-allowed;}
#login-error{font-size:12px;color:var(--red);text-align:center;margin-top:10px;min-height:18px;}

/* ===== TRIAL EXPIRED OVERLAY ===== */
#trial-expired{position:fixed;inset:0;z-index:9998;background:rgba(11,17,32,.85);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:var(--space-xl);}
#trial-expired.show{display:flex;}
.trial-expired-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:44px 40px;width:100%;max-width:420px;box-shadow:var(--shadow);text-align:center;}
.trial-expired-icon{font-size:44px;margin-bottom:16px;}
.trial-expired-title{font-size:var(--fs-xl);font-weight:var(--fw-heavy);letter-spacing:-.5px;margin-bottom:8px;}
.trial-expired-sub{font-size:14px;color:var(--text2);line-height:1.6;margin-bottom:28px;}
.trial-expired-cta{display:inline-block;background:var(--accent);color:var(--accent-ink);font-size:14px;font-weight:var(--fw-bold);padding:12px 28px;border-radius:8px;text-decoration:none;transition:background .15s;margin-bottom:12px;}
.trial-expired-cta:hover{background:var(--accent2);}
.trial-expired-logout{display:block;font-size:12px;color:var(--text3);cursor:pointer;background:none;border:none;font-family:inherit;margin:0 auto;padding:4px 8px;}
.trial-expired-logout:hover{color:var(--text2);}
/* Trial feedback buttons */
.trial-fb-btn{background:var(--card);border:1px solid var(--border);color:var(--text2);font-size:var(--fs-sm);font-weight:var(--fw-semibold);padding:6px 12px;border-radius:var(--radius-sm);cursor:pointer;font-family:inherit;transition:border-color .15s,color .15s;}
.trial-fb-btn:hover{border-color:var(--accent);color:var(--accent);}
/* ── Trial Read-only: disable ALL mutation UI ── */
body.trial-readonly .btn-add,
body.trial-readonly .btn-primary:not(.trial-upgrade-btn):not(.yr-chip-btn),
body.trial-readonly .btn-p:not(.trial-upgrade-btn),
body.trial-readonly [data-action="add"],
body.trial-readonly [data-action="delete"],
body.trial-readonly [data-action="duplicate"],
body.trial-readonly .beleg-upload-panel,
body.trial-readonly [onclick*="openImportM"],
body.trial-readonly [onclick*="openBM"],
body.trial-readonly [onclick*="openTxM"],
body.trial-readonly [onclick*="delTx"],
body.trial-readonly [onclick*="dupTx"],
body.trial-readonly [onclick*="reanalyzeBeleg"],
body.trial-readonly [onclick*="saveTx"],
body.trial-readonly [onclick*="linkBeleg"],
body.trial-readonly [onclick*="unlinkBeleg"],
body.trial-readonly [onclick*="deleteBeleg"],
body.trial-readonly [onclick*="_closeMonth"],
body.trial-readonly [onclick*="_reopenMonth"],
body.trial-readonly [onclick*="resetAllMarks"],
body.trial-readonly [onclick*="bulkDelete"],
body.trial-readonly [onclick*="deleteMonth"],
body.trial-readonly [onclick*="editTx"],
body.trial-readonly [onclick*="dismissIssue"],
body.trial-readonly [onclick*="unignoreIssue"],
body.trial-readonly .import-drop-zone,
body.trial-readonly .import-file-label,
body.trial-readonly #import-file-input,
body.trial-readonly [onclick*="importJSON"],
body.trial-readonly .import-hub-card input[type="file"],
body.trial-readonly [onclick*="_importReset"],
body.trial-readonly [onclick*="_importSelectAll"],
body.trial-readonly [onclick*="_importSelectNone"],
body.trial-readonly [onclick*="_importConfirm"],
body.trial-readonly [onclick*="_handleImportFile"],
body.trial-readonly [onclick*="_deleteYear"],
body.trial-readonly [onclick*="_addYear"],
body.trial-readonly .yr-chip-del,
body.trial-readonly .yr-quick-btn,
body.trial-readonly .yr-new-btn,
body.trial-readonly .yr-picker-new{opacity:.45;pointer-events:none;cursor:not-allowed;}
body.trial-readonly .tx-row[onclick]{pointer-events:none;cursor:default;}

/* ===== MOBILE NAVIGATION ===== */
/* Hamburger button — hidden on desktop, shown on ≤480px */
.mob-hamburger{display:none;align-items:center;justify-content:center;width:40px;height:40px;background:none;border:1px solid var(--border);border-radius:var(--radius2);color:var(--text2);cursor:pointer;transition:all .15s;padding:0;flex-shrink:0;-webkit-tap-highlight-color:transparent;}
.mob-hamburger:active{background:rgba(232,184,75,.08);border-color:rgba(232,184,75,.3);color:var(--accent);}
.mob-hamburger.active{background:rgba(232,184,75,.1);border-color:rgba(232,184,75,.3);color:var(--accent);}
/* Full-screen overlay menu — lives OUTSIDE topbar, no overflow issues */
.mob-fs{display:none;position:fixed;inset:0;z-index:9998;background:var(--bg);overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:env(safe-area-inset-bottom,0px);}
.mob-fs.open{display:flex;flex-direction:column;animation:mobFsIn .2s ease;}
@keyframes mobFsIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
/* FS header */
.mob-fs-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);flex-shrink:0;}
.mob-fs-brand{font-size:18px;font-weight:var(--fw-heavy);color:var(--accent);letter-spacing:-.4px;}
.mob-fs-brand-img{height:18px;width:auto;display:block;opacity:.92;}
.mob-fs-close{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:none;border:1px solid var(--border);border-radius:var(--radius2);color:var(--text2);cursor:pointer;transition:all .12s;padding:0;-webkit-tap-highlight-color:transparent;}
.mob-fs-close:active{color:var(--text);border-color:var(--border2);}
/* FS primary nav (Dashboard, Jahresübersicht etc.) */
.mob-fs-nav{padding:12px 14px;flex-shrink:0;}
.mob-fs-nav-item{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;background:none;border:none;border-radius:var(--radius);color:var(--text2);font-size:16px;font-weight:var(--fw-medium);font-family:inherit;cursor:pointer;text-decoration:none;transition:all .1s;-webkit-tap-highlight-color:transparent;}
.mob-fs-nav-item:active{background:rgba(232,184,75,.06);}
.mob-fs-nav-item.active{color:var(--accent);font-weight:var(--fw-bold);background:rgba(232,184,75,.06);}
.mob-fs-nav-item svg{color:inherit;flex-shrink:0;opacity:.6;}
.mob-fs-nav-item.active svg{opacity:1;}
.mob-fs-nav-meta-badge{display:inline-flex;align-items:center;justify-content:center;margin-left:-6px;padding:2px 7px;border-radius:5px;background:rgba(232,184,75,.1);color:var(--accent);font-size:10px;font-weight:var(--fw-bold);letter-spacing:0;text-transform:uppercase;line-height:1.2;}
.mob-fs-nav-badge{margin-left:auto;background:var(--red);color:white;font-size:var(--fs-sm);font-weight:var(--fw-bold);min-width:20px;height:20px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;padding:0 5px;}
/* FS secondary items */
.mob-fs-section{padding:4px 14px;}
.mob-fs-item{display:flex;align-items:center;gap:14px;width:100%;padding:13px 16px;background:none;border:none;border-radius:var(--radius2);color:var(--text2);font-size:var(--fs-body);font-family:inherit;cursor:pointer;text-decoration:none;transition:all .1s;-webkit-tap-highlight-color:transparent;}
.mob-fs-item:active{background:rgba(232,184,75,.06);}
.mob-fs-item svg{color:var(--text3);flex-shrink:0;}
.mob-fs-badge{margin-left:auto;font-size:12px;color:var(--text3);font-weight:var(--fw-medium);}
.mob-fs-logout{color:var(--text3);}
.mob-fs-logout:active{color:var(--red);background:rgba(248,113,113,.06);}
.mob-fs-sep{height:1px;background:var(--border);margin:6px 20px;flex-shrink:0;}

/* ===== MOBILE / RESPONSIVE HARDENING ===== */

/* ── Global mobile foundations ─────────────────────────────────────────────── */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden;}
*{-webkit-tap-highlight-color:transparent;}

/* ── Safe-area padding for fixed elements ── */
.modal-error-banner{bottom:calc(16px + env(safe-area-inset-bottom,0px));}
.shortcuts-hint{bottom:calc(16px + env(safe-area-inset-bottom,0px));left:calc(16px + env(safe-area-inset-left,0px));}
.qs-toggle{bottom:calc(16px + env(safe-area-inset-bottom,0px));right:calc(16px + env(safe-area-inset-right,0px));}
.qs-panel{bottom:calc(60px + env(safe-area-inset-bottom,0px));}
#toasts{bottom:calc(20px + env(safe-area-inset-bottom,0px));}
#login-screen,#trial-expired,.ov,.yr-picker-ov{padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);}
.app-dialog-ov{padding:calc(20px + env(safe-area-inset-top,0px)) calc(20px + env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) calc(20px + env(safe-area-inset-left,0px));}

/* ── Touch targets — minimum 44px ── */
@media(pointer:coarse){
  .btn,.btn-sm,.btn-tb,.btn-g,.btn-d,.btn-ok,.btn-p{min-height:44px;min-width:44px;}
  .btn-sm{min-height:36px;min-width:36px;padding:6px 10px;}
  .nav-main-tab{min-height:44px;}
  .nav-group-trigger{min-height:44px;}
  .nav-group-item{min-height:40px;padding:10px 14px;}
  .nav-month-tab{min-height:36px;padding:0 12px;}
  .filter-pill{min-height:36px;padding:8px 14px;}
  /* App-weiter WebKit-Sweep (iPhone 13, ergänzend zu #3721): sort-btn war hier
     trotz "minimum 44px"-Blocktitel auf 36px gepinnt → die Monatsansicht-
     Sortier-Dropdowns (_25h .filter-secondary .sort-btn, ohne eigene Höhe)
     erbten 36px. Auf 44px gehoben; dieser Block wird nach _10-shell gebündelt
     und gewinnt damit für ALLE .sort-btn-Kontexte (Codex-P2 #3749). */
  .sort-btn{min-height:44px;}
  .mark-btn{width:22px;height:22px;min-width:22px;min-height:22px;}
  .xbtn{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;}
  .sett-sidebar-item{min-height:44px;}
  .seg-ctrl button{min-height:40px;padding:8px 16px;}
  .type-btn{min-height:52px;}
  .num-stepper-btns{width:32px;}
  .num-stepper-btns button{min-height:22px;}
  select{min-height:44px;}
  .yr-chip{min-width:112px;}
  .yr-chip-btn{min-height:52px;}
  .yr-chip-del{width:28px;height:28px;opacity:1;}
  .yr-quick-btn{min-height:44px;}
  .yr-new-btn{min-height:44px;}
  .bt-sug{min-height:44px;padding:10px 14px;}
  .beleg-card{padding:16px 18px;}
  .issue-item{padding:14px 16px;}
  .rec-card{padding:14px 16px;}
  .sort-opt{min-height:44px;padding:12px 16px;}
  .ch-leg-item{min-height:36px;padding:6px 10px;}
}

/* ── Word-break for long text ── */
.tx-primary,.tx-secondary,.issue-title,.issue-sub,.bc-name,.s-action-title,.s-action-sub,.s-hint,.app-dialog-body,.trial-expired-sub,.beleg-card,.field-hint,.field-error-hint{overflow-wrap:break-word;word-break:break-word;}

/* ── Modal footer: always wrap buttons ── */
.mf{flex-wrap:wrap;}
.app-dialog-actions{flex-wrap:wrap;}

/* ── Filter bar: wrap on smaller screens ── */
.tx-filter-bar{flex-wrap:wrap;}

/* ── Donut chart: stack on narrow ── */
@media(max-width:520px){
  .ccat-layout{flex-direction:column;}
  .ccat-chart-side{width:100%;max-width:220px;margin:0 auto;}
}

/* ────────────────────────────────────────────────────────────────────────────
   TABLET BREAKPOINT (≤768px)
   ──────────────────────────────────────────────────────────────────────────── */
@media(max-width:768px){
  /* ── Prevent horizontal overflow ── */
  .topbar,.main{max-width:100vw;overflow-x:hidden;}
  .nav-months-bar{max-width:100vw;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .nav-primary{flex-wrap:wrap;}
  .nav-right{flex-wrap:wrap;justify-content:flex-end;}

  /* ── Main layout ── */
  .main{padding:12px 10px;}

  /* ── Charts grid single column ── */
  .charts-grid{grid-template-columns:1fr;}

  /* ── Modal → near-fullscreen bottom sheet ── */
  .ov{padding:var(--space-sm);align-items:flex-end;}
  .modal{max-width:100%;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);border-radius:14px 14px 0 0;width:100%;}
  .mb{padding:16px 16px;}
  .mh{padding:12px 16px 10px;}
  .mf{padding:10px 16px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));}

  /* ── Booking modal inputs: fluid ── */
  .modal input[style*="width:140px"],
  .modal input[style*="width:80px"],
  .modal input[style*="width:70px"]{width:100%!important;max-width:100%!important;}

  /* ── App dialog ── */
  .app-dialog{min-width:0;max-width:100%;width:calc(100% - 24px);padding:0;}

  /* ── Year picker ── */
  .yr-picker-dlg{width:calc(100% - 24px);}

  /* ── Month KPIs: 2 columns ── */
  .month-kpis{grid-template-columns:repeat(2,1fr);}

  /* ── KPI grid: 2 columns ── */
  .kpi-grid{grid-template-columns:repeat(2,1fr);}

  /* ── Prüfen KPIs ── */
  .pruef-kpi{grid-template-columns:repeat(2,1fr);}

  /* ── Bulk bar ── */
  .bulk-bar{flex-wrap:wrap;gap:6px;}

  /* ── Filter pills: scroll horizontal ── */
  .filter-pills{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:6px;}
  .filter-pills::-webkit-scrollbar{display:none;}

  /* ── Year overview filters ── */
  .year-overview-filters{gap:6px;}
  .year-kpi-mini{gap:6px;}
  .year-kpi-mini .kpi{min-width:120px;padding:8px 12px;}

  /* ── Belege upload panel ── */
  .beleg-upload-panel{padding:14px 16px;gap:10px;}

  /* ── Quickstats full width ── */
  .qs-panel{right:8px;left:8px;width:auto;bottom:calc(56px + env(safe-area-inset-bottom,0px));}

  /* ── Login card ── */
  .login-card{padding:32px 24px;max-width:100%;}
  #login-screen{padding:var(--space-lg);}

  /* ── Trial expired ── */
  .trial-expired-card{padding:32px 24px;}

  /* ── Toast max width ── */
  .toast{max-width:calc(100vw - 32px);}

  /* ── Import preview rows ── */
  .imp-row{flex-wrap:wrap;gap:var(--space-xs);}
  .imp-msgs{padding-left:10px;}
}

@media(max-width:640px){
  .qs-toggle,
  .qs-panel{display:none!important;}
}

/* Booking-Modal-Footer auf Mobile (≤640px): User-Feedback 2026-05-11 v4 —
   Action-Bar wird zur „icon-icon-icon-text"-Reihe:
     [🗑 Trash]  [✕ Abbrechen]  [🔖 Vorlage]  [Einnahme speichern ………]
       48×48        48×48          48×48      flex:1 1 auto, einheitl. 48 hoch
   Einheitliche Höhe 48px für alle Buttons (visuell saubere Action-Bar).
   Primary-CTA bekommt den meisten Platz via flex:1. Trash-Button (falls
   sichtbar, nur beim Edit-Modus) und beide Icon-Buttons sind quadratisch
   48×48 — über Touch-Target-Minimum (44) hinaus für klare optische Hierarchie
   neben dem dominanten Speichern-Button. Schnelleingabe-Toggle wird per
   `.mf{flex-wrap:wrap}` automatisch in eine eigene Zeile geschoben. */
@media(max-width:640px){
  /* Safe-area-Bottom kommt bereits aus den vorhandenen .mf-Mobile-Regeln
     (Zeile 2103/2207/2357) — hier nur Gap der Action-Bar. */
  .mf--booking{gap:10px;}
  .mf-actions{gap:10px;flex:1 1 auto;align-items:stretch;}
  /* Einheitliche Höhe — Primary-CTA matched die Icon-Squares. */
  .mf-actions > .btn{height:48px;min-height:48px;padding:0 16px;font-size:14px;}
  /* Icon-Buttons (Trash + Cancel-via-mobile-icon + Vorlage-via-mobile-icon)
     werden quadratisch 48×48. flex:0 0 48px verhindert dass sie shrinken. */
  .mf-actions > .btn-icon,
  .mf-actions > .btn-with-mobile-icon{
    width:48px;min-width:48px;flex:0 0 48px;
    padding:0;
    justify-content:center;
  }
  .btn-with-mobile-icon .btn-mobile-icon{display:inline-flex;align-items:center;justify-content:center;}
  .btn-with-mobile-icon .btn-mobile-label{display:none;}
  /* Primary-CTA „Einnahme/Ausgabe speichern" füllt den Rest, Text bleibt
     mittig zentriert (horizontal + vertikal). */
  .mf-actions > .btn-p{flex:1 1 auto;justify-content:center;text-align:center;}
}
/* Sehr schmale Phones (≤380px, iPhone SE / mini): Icons leicht kleiner auf
   44×44 (= Touch-Target-Minimum), Gap enger, damit der Primary-CTA noch
   genug Lesebreite behält. */
@media(max-width:380px){
  .mf--booking{gap:8px;}
  .mf-actions{gap:6px;}
  .mf-actions > .btn{height:44px;min-height:44px;padding:0 12px;font-size:13.5px;}
  .mf-actions > .btn-icon,
  .mf-actions > .btn-with-mobile-icon{width:44px;min-width:44px;flex-basis:44px;}
}

/* ────────────────────────────────────────────────────────────────────────────
   PHONE BREAKPOINT (≤480px)
   ──────────────────────────────────────────────────────────────────────────── */
@media(max-width:480px){
  /* ── Layout ── */
  .main{padding:8px 8px;}
  body{font-size:14px;}

  /* ── Mobile header: ultra-minimal — only Brand+Year and Hamburger ── */
  .nav-primary{padding:10px 14px;gap:var(--space-sm);flex-wrap:nowrap;height:auto;align-items:center;}
  .topbar{position:sticky;top:0;}
  .topbar-logo{gap:8px;flex-shrink:0;align-items:center;}
  .topbar-logo-wordmark{height:14px;}
  .topbar-logo-brand{font-size:var(--fs-body);}
  .topbar-logo-sub{font-size:10.5px;margin-left:4px;}
  .yr-lbl-btn{padding:5px 10px 5px 11px;}
  /* Nav-right: only hamburger */
  .nav-right{gap:var(--space-sm);padding-left:0;border-left:none;margin-left:auto;flex-wrap:nowrap;align-items:center;}
  /* .nav-sep, .mob-hamburger, .nav-main already handled at ≤768px */
  .shortcuts-hint{display:none;}
  /* Hide ALL desktop-only nav-right items */
  .nav-right .server-status,
  .nav-right [title="Exportoptionen"],
  .nav-right [title*="Hilfe"],
  .nav-right .nav-account,
  .nav-right .theme-toggle,
  .nav-right #trial-badge,
  .nav-right .plan-badge{display:none!important;}
  /* Month bar: compact for phones */
  .nav-months-bar{padding:0 12px;height:36px;gap:1px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:none;touch-action:pan-x;}

  /* ── KPIs: single column ── */
  .month-kpis{grid-template-columns:1fr;}
  .pruef-kpi{grid-template-columns:1fr;}

  /* ── Modal fullscreen ── */
  .ov{padding:0;align-items:stretch;}
  .modal{max-width:100%;max-height:100vh;max-height:100dvh;border-radius:0;height:100%;display:flex;flex-direction:column;}
  .mb{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 14px;}
  .mh{border-radius:0;padding:10px 14px 8px;flex-shrink:0;}
  .mf{flex-shrink:0;padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));background:var(--bg3);border-top:1px solid var(--border);}

  /* ── Form fields: single column ── */
  .fg{grid-template-columns:1fr;}

  /* ── Type toggle: stack vertical ── */
  .type-toggle{flex-direction:column;gap:6px;}

  /* ── Calc summary ── */
  .calc-row{font-size:var(--fs-sm);}

  /* ── Cards: tighter padding ── */
  .card{padding:var(--space-md);}
  .chart-card{padding:10px;}
  .kpi{padding:12px 14px;}
  .status-card{padding:10px 12px;}

  /* ── Tables: smaller font, tighter padding ── */
  table{font-size:11.5px;}
  th{font-size:9.5px;padding:7px 8px;}
  td{padding:7px 8px;font-size:var(--fs-sm);}
  td.l{font-size:11.5px;}

  /* ── Transaction table: hide secondary columns on mobile ── */
  /* Hide: Checkbox(1), Mark(2), Beleg#(3), Steuer(8), Netto(9), Saldo(10) */
  .tx-wrap th:nth-child(1),.tx-wrap td:nth-child(1),
  .tx-wrap th:nth-child(2),.tx-wrap td:nth-child(2),
  .tx-wrap th:nth-child(3),.tx-wrap td:nth-child(3),
  .tx-wrap th:nth-child(8),.tx-wrap td:nth-child(8),
  .tx-wrap th:nth-child(9),.tx-wrap td:nth-child(9),
  .tx-wrap th:nth-child(10),.tx-wrap td:nth-child(10){display:none;}
  /* Keep: Datum(4), Beschreibung(5), Typ(6), Brutto(7), Actions(11) */
  .tx-wrap table .tx-cb,.tx-wrap table .bulk-cb{width:18px;height:18px;}
  .tx-pagination{gap:4px!important;flex-wrap:wrap;justify-content:center!important;}
  .tx-pagination .btn-sm{min-width:44px!important;min-height:44px!important;}
  .bulk-bar{display:none!important;}

  /* ── Quartalstabelle (Regelbesteuerung, 6 Spalten): USt(4) + VSt(5) verstecken ── */
  /* Keep: Q(1), Einnahmen(2), Ausgaben(3), Zahllast(6) */
  .card-qtable th:nth-child(4),.card-qtable td:nth-child(4),
  .card-qtable th:nth-child(5),.card-qtable td:nth-child(5){display:none;}

  /* ── Beleg cards: compact ── */
  .beleg-card{padding:18px 18px 16px;}
  .bc-warning-banner{margin-top:10px;gap:8px;}
  .bc-warning{padding:9px 12px;border-radius:10px;line-height:1.5;}
  .bc-meta{margin-top:12px;align-items:flex-start;gap:8px 7px;}
  .bc-meta span:first-child:not(.bc-chip){flex-basis:100%;margin-bottom:2px;}
  .bc-chip{padding:3px 9px;}
  .bc-status{margin-top:12px;gap:7px;}
  .bc-actions{flex-direction:column;gap:6px;}
  .bc-actions-primary,.bc-actions-secondary{width:100%;}
  .bc-actions-primary{display:flex;gap:var(--space-xs);}
  .bc-actions-secondary{display:flex;gap:var(--space-xs);justify-content:flex-end;}

  /* ── Issue items: tighter ── */
  .issue-item{padding:10px 12px;gap:var(--space-sm);}
  .issue-icon{font-size:14px;}

  /* ── Filter bar: stack ── */
  .tx-filter-bar{flex-direction:column;gap:6px;padding:8px 10px;}
  .filter-search{width:100%;flex:none;}
  .filter-search input{padding:10px 12px 10px 36px;}
  .filter-search-icon{left:12px;}
  .filter-pills{width:100%;}
  .filter-secondary{width:100%;margin-left:0;}
  .sort-btn-wrap{flex:1;width:100%;align-self:stretch;}
  .sort-btn{width:100%;justify-content:center;}
  .sort-drop{right:0;left:0;width:100%;min-width:0;}

  /* ── Year overview ── */
  .year-overview-filters{flex-direction:column;align-items:stretch;}
  .year-kpi-mini .kpi{min-width:0;flex:1;}

  /* ── Settings ── */
  .sg{grid-template-columns:1fr;}


  /* ── Segment control (Prüfen) ── */
  .seg-ctrl{width:100%;display:flex;}
  .seg-ctrl button{flex:1;padding:6px 8px;font-size:var(--fs-sm);}

  /* ── Rec cards ── */
  .rec-card{padding:10px 12px;gap:var(--space-sm);}
  .rec-card-title{font-size:12px;}

  /* ── Trial banner ── */
  #trial-banner{padding:6px 12px;font-size:11.5px;}
  #pastdue-banner{padding:6px 12px;font-size:11.5px;}

  /* ── Login ── */
  .login-card{padding:28px 18px;}
  .login-logo{font-size:26px;}

  /* ── Trial expired ── */
  .trial-expired-card{padding:28px 20px;}
  .trial-expired-title{font-size:18px;}
  .trial-expired-sub{font-size:var(--fs-base);}

  /* ── Chart legend ── */
  .ch-leg{gap:2px 6px;}
  .ch-leg-item{font-size:var(--fs-xs);}

  /* ── Top categories card toggle ── */
  .topcat-toggle-btn{margin:8px -12px -12px;}

  /* ── Tooltip responsive ── */
  .tip{max-width:180px;font-size:var(--fs-xs);}

  /* ── Notifications ── */
  .sbn{padding:8px 10px;font-size:var(--fs-sm);}

  /* ── Quick entry toggle ── */
  .quick-toggle{font-size:var(--fs-xs);}

  /* ── Import preview ── */
  .imp-summary{font-size:var(--fs-sm);gap:var(--space-sm);}

  /* ── Month actions: uniform button sizing (Problem 1) ── */
  .month-actions{flex-wrap:wrap;gap:var(--space-xs);justify-content:flex-end;width:100%;}
  .month-actions-util{flex-wrap:wrap;gap:var(--space-xs);padding-right:0;border-right:none;margin-right:0;}
  .month-actions .btn{font-size:var(--fs-sm)!important;padding:8px 12px;min-width:0;white-space:nowrap;flex:0 0 auto;}
  .month-actions .btn-sm{padding:8px 10px;}
  .month-actions .btn-p{flex:1 1 100%;justify-content:center;}
  .mh-actions{flex-wrap:wrap;gap:6px;justify-content:flex-end;width:100%;}
  .mh-secondary{padding-right:0;border-right:none;margin-right:0;}
  .mh-primary{flex:1 1 100%;justify-content:center;text-align:center;}
  .mh-lock-btn{font-size:var(--fs-sm);padding:6px 10px;}

  /* ── Row actions: always visible, bigger touch targets (Problem 2) ── */
  .row-actions{opacity:1;gap:var(--space-xs);flex-wrap:nowrap;}
  .row-actions .btn-sm{min-width:40px;min-height:40px;padding:var(--space-sm);font-size:var(--fs-base);display:flex;align-items:center;justify-content:center;}
}

/* ────────────────────────────────────────────────────────────────────────────
   VERY SMALL PHONES (≤360px, iPhone SE / mini)
   ──────────────────────────────────────────────────────────────────────────── */
@media(max-width:360px){
  .nav-primary{padding:6px 8px;}
  .topbar-logo-wordmark{height:12px;}
  .topbar-logo-brand{font-size:var(--fs-base);}
  .topbar-logo-sub{display:none;}
  .nav-main-tab{padding:0 5px;font-size:var(--fs-xs);}
  .nav-month-tab{padding:0 5px;font-size:9.5px;}
  .main{padding:6px 6px;}
  .mb{padding:10px 10px;}
  .mh{padding:8px 10px 6px;}
  .mf{padding:8px 10px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));}
  .kpi-val{font-size:20px;}
  .status-val{font-size:18px;}
  td{font-size:var(--fs-xs);padding:5px 6px;}
  th{font-size:8.5px;padding:5px 6px;}
}

/* ── Landscape small devices ── */
@media(max-height:500px) and (orientation:landscape){
  .modal{max-height:100dvh;border-radius:0;}
  .ov{padding:0;}
  .mb{max-height:calc(100dvh - 100px);overflow-y:auto;}
}

/* ────────────────────────────────────────────────────────────────────────────
   iOS SAFARI AUTO-ZOOM FIX (Problem 4 — CRITICAL)
   iOS zooms into any input with font-size < 16px. We fix this for touch
   devices only, keeping the tighter 13.5px on desktop.
   ──────────────────────────────────────────────────────────────────────────── */
@media(pointer:coarse){
  input,select,textarea{font-size:16px;}
  .filter-search input{font-size:16px;}
  .za-filter-select{font-size:16px;}
  .date-cell input.date-input{font-size:16px;}
  .import-cat-select{font-size:16px;}
  .num-stepper>input[type=number]{font-size:16px;}
  .app-dialog-input input{font-size:16px;}
  .login-card input[type=password]{font-size:16px;}
  .inv-form-row input,
  .inv-form-row select,
  .inv-form-row textarea,
  .inv-inp{font-size:16px;}
}

/* ────────────────────────────────────────────────────────────────────────────
   MOBILE SCROLL & OVERFLOW FIX (Problem 3)
   Ensure all content areas are scrollable and nothing gets cut off.
   ──────────────────────────────────────────────────────────────────────────── */
@media(max-width:768px){
  /* Main content area: ensure scrollable */
  .main{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;min-height:0;}
  #app{min-height:100vh;min-height:100dvh;overflow:visible;}

  /* Transaction table wrapper: horizontal scroll with momentum */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;max-width:100vw;}

  /* tx-wrap: ensure it doesn't clip content vertically */
  .tx-wrap{overflow:visible;max-width:100vw;}

  /* Month KPIs: horizontal scroll if needed */
  .month-kpis{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .month-kpis::-webkit-scrollbar{display:none;}

  /* Status grid: wrap properly */
  .status-grid{overflow:visible;}

  /* Quartals-/Jahresübersicht table: scrollable (Problem 5) */
  /* .card.card-* uses higher specificity to beat generic .card{overflow:visible} */
  .card.card-qtable,.card.card-mtable{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .card.card-qtable table{min-width:520px;}
  .card.card-mtable table{min-width:400px;}
  .card{overflow:visible;}

  /* ── Dashboard detail grid: stack on mobile ── */
  .dash-expand-section>[style*="grid-template-columns"]{grid-template-columns:1fr!important;}

  /* ── Import-History: table → stacked cards ── */
  .import-history{overflow-x:visible;}
  .import-history-table{min-width:0;}
  .import-history-table thead{display:none;}
  .import-history-table tbody{display:flex;flex-direction:column;gap:var(--space-sm);}
  .import-history-table tr{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto;gap:2px 8px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius2);padding:10px 12px;}
  .import-history-table td{padding:0;border:none;}
  /* Row 1: Datum + Bank */
  .import-history-table td:nth-child(1){grid-column:1;grid-row:1;font-weight:var(--fw-semibold);color:var(--text);font-size:12px;}
  .import-history-table td:nth-child(3){grid-column:2;grid-row:1;color:var(--accent);font-weight:var(--fw-semibold);font-size:var(--fs-sm);text-align:right;}
  /* Row 2: Datei (volle Breite) */
  .import-history-table td:nth-child(2){grid-column:1/3;grid-row:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:none;font-size:var(--fs-sm);color:var(--text2);}
  /* Row 3: Buchungen + Button */
  .import-history-table td:nth-child(4){grid-column:1;grid-row:3;font-size:var(--fs-xs);color:var(--text3);padding-top:4px;}
  .import-history-table td:nth-child(5){grid-column:2;grid-row:3;justify-self:end;align-self:center;padding-top:4px;}
  .import-history-file{max-width:none;}
}

/* ===== PRINT ===== */
@media print{
  body{background:white!important;color:black!important;font-size:var(--fs-xs);}
  .topbar,.nav-right,.nav-months-bar,.shortcuts-hint,.qs-toggle,.qs-panel,#ver-label,.row-actions,.bulk-bar,.tx-filter-bar,.mark-btn,.tx-cb,.bulk-cb,#toasts,.sbn,.btn,.issue-meta button{display:none!important;}
  .main{padding:10px!important;max-width:100%!important;}
  .kpi{border:1px solid rgba(204,204,204,1)!important;background:rgba(249,249,249,1)!important;}
  .kpi-val,.kpi-label,.kpi-sub{color:black!important;}
  .card,.tx-wrap,.chart-card{border:1px solid rgba(204,204,204,1)!important;background:white!important;break-inside:avoid;}
  table{font-size:9px;}th,td{border:1px solid rgba(221,221,221,1)!important;padding:4px 6px!important;}
  th{background:rgba(240,240,240,1)!important;color:rgba(51,51,51,1)!important;}
  td{color:rgba(51,51,51,1)!important;}
  .tx-row{border-left:none!important;}
  .vp{color:rgba(22,163,74,1)!important;}.vn{color:rgba(220,38,38,1)!important;}.va{color:rgba(180,83,9,1)!important;}.vb{color:rgba(37,99,235,1)!important;}
  .badge,.type-badge{border:1px solid rgba(153,153,153,1)!important;color:rgba(51,51,51,1)!important;background:rgba(238,238,238,1)!important;}
  canvas{max-height:200px!important;}
  @page{margin:15mm;size:A4 landscape;}
}

.login-logo-img{display:block;}
.loading-copy{color:var(--text3);font-size:13px;}
.tx-lazy-loading{padding:48px 24px;text-align:center;color:var(--text3);}
.tx-lazy-retry{margin-top:12px;}
#loading[hidden],#login-screen[hidden]{display:none!important;}
.auth-login-screen--visible{display:flex!important;}
.auth-preline{white-space:pre-line;}
.account-suspended-overlay{position:fixed;inset:0;z-index:99999;background:var(--bg);align-items:center;justify-content:center;padding:20px;display:flex;}
.account-suspended-overlay[hidden]{display:none!important;}
.trial-expired-card--suspended{max-width:440px;}
.account-suspended-icon{margin-bottom:12px;}
.account-suspended-actions{display:flex;gap:8px;margin-top:16px;justify-content:center;flex-wrap:wrap;}
.account-suspended-link{text-decoration:none;font-size:12px;padding:8px 18px;}
.trial-chip[hidden],.plan-badge[hidden],#app[hidden],#ver-label[hidden],#maintenance-banner[hidden]{display:none!important;}
/* .tag-item sets an explicit display:inline-flex (author origin) which beats
 * the UA [hidden]{display:none} rule. The settings chip live-filter toggles
 * chip.hidden, so restore hidden semantics here. Regression from 2d9c453b2
 * (chip.style.display='none' → chip.hidden=true). */
.tag-item[hidden]{display:none!important;}
.shell-notif-empty-subcopy{font-size:var(--fs-xs);color:var(--text3);margin-top:4px;}
.nav-account-icon,.mob-fs-nav-icon{flex-shrink:0;}
body.mob-fs-open{overflow:hidden;}
.dp-month-actionable{cursor:pointer;}
#sync-badge[hidden],.bt-drop[hidden]{display:none!important;}
#sync-badge.sync-badge--visible{display:inline-block;}
.dp-panel.is-positioning{visibility:hidden;}
.app-dialog[data-max-width="420"]{max-width:420px;}
.shell-navcfg-fatal{position:fixed;left:0;right:0;top:0;z-index:100000;display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 16px;background:var(--red);color:var(--text);font:500 13px/1.4 system-ui,sans-serif;}
.shell-navcfg-fatal__message{min-width:0;}
.shell-navcfg-fatal__reload{background:var(--card);color:var(--red);border:1px solid var(--red3);border-radius:6px;padding:6px 14px;font-weight:700;cursor:pointer;font:inherit;}

.trial-interstitial{
  position:fixed;
  inset:0;
  z-index:9998;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.trial-interstitial-card{
  width:calc(100% - 32px);
  max-width:460px;
  padding:36px 32px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  text-align:center;
}

.trial-interstitial-title{
  margin-bottom:8px;
  font-size:20px;
  font-weight:var(--fw-heavy);
  color:var(--text1);
}

.trial-interstitial-data,
.trial-expired-data{
  margin-bottom:20px;
  font-size:13px;
  font-weight:var(--fw-semibold);
  color:var(--accent);
}

.trial-interstitial-data{margin-bottom:8px;}

.trial-interstitial-copy,
.trial-expired-copy{
  margin-bottom:28px;
  font-size:14px;
  line-height:1.6;
  color:var(--text2);
}

.trial-interstitial-copy{margin-bottom:24px;}

.trial-interstitial-cta-wrap,
.trial-expired-pricing-wrap{
  margin-bottom:12px;
}

.trial-interstitial-cta-wrap{margin-bottom:16px;}

.trial-interstitial-cta{
  display:inline-block;
  padding:14px 36px;
  background:var(--accent);
  color:var(--accent-ink);
  border-radius:10px;
  font-size:15px;
  font-weight:var(--fw-bold);
  text-decoration:none;
  transition:opacity .15s;
}

.trial-interstitial-cta:hover{opacity:.88;}

.trial-interstitial-pricing,
.trial-expired-pricing{
  font-size:13px;
  color:var(--text3);
}

.trial-interstitial-actions{
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
  margin-top:20px;
}

.trial-secondary-btn{
  padding:8px 18px;
  background:none;
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text3);
  font-size:12px;
  cursor:pointer;
  font-family:inherit;
}

.trial-secondary-btn:hover,
.trial-expired-link:hover{
  border-color:var(--accent);
  color:var(--accent);
}

.trial-interstitial-export-hint{
  margin-top:14px;
  font-size:11px;
  color:var(--text3);
}

.trial-readonly-toast{
  position:fixed;
  left:50%;
  bottom:24px;
  z-index:9999;
  padding:12px 24px;
  background:var(--card);
  border:1px solid var(--red3);
  border-radius:10px;
  color:var(--red);
  font-size:13px;
  font-weight:var(--fw-semibold);
  opacity:0;
  transform:translateX(-50%);
  transition:opacity .3s;
  pointer-events:auto;
  cursor:pointer;
}

.trial-readonly-toast.is-visible{opacity:1;}

.trial-chip.readonly{
  color:var(--red);
  background:rgba(248,113,113,.06);
  border-color:rgba(248,113,113,.3);
}

.trial-chip.readonly:hover{
  color:var(--red);
  background:rgba(248,113,113,.12);
  border-color:rgba(248,113,113,.4);
}

.trial-app-hard-lock{
  pointer-events:none;
  filter:blur(2px);
  opacity:.6;
}

.trial-app-hard-lock--expired{filter:blur(4px);}

.trial-scroll-lock{overflow:hidden;}

.trial-inline-link{
  color:var(--accent);
  text-decoration:underline;
}

.trial-inline-link--offset{margin-left:4px;}

.trial-expired-card--wide{max-width:480px;}

.trial-expired-sub--compact{margin-bottom:12px;}

.trial-expired-feedback{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--border);
}

.trial-expired-feedback-title{
  margin-bottom:10px;
  font-size:12px;
  color:var(--text3);
}

.trial-expired-feedback-btns{
  display:flex;
  justify-content:center;
  gap:6px;
  flex-wrap:wrap;
}

.trial-expired-feedback-response{
  margin-top:10px;
  font-size:12px;
  color:var(--text2);
}

.trial-expired-links{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:16px;
  font-size:12px;
}

.trial-expired-link,
.trial-expired-separator{
  color:var(--text3);
}

.trial-expired-link{
  text-decoration:none;
  cursor:pointer;
}

.trial-widget-card{
  position:relative;
  margin-bottom:16px;
  padding:20px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
}

.trial-widget-dismiss{
  position:absolute;
  top:8px;
  right:12px;
  background:none;
  border:none;
  color:var(--text3);
  cursor:pointer;
  font-size:16px;
}

.trial-widget-title{
  margin-bottom:4px;
  font-size:13px;
  font-weight:var(--fw-bold);
  color:var(--accent);
}

.trial-widget-title--urgent{color:var(--red);}

.trial-widget-stats{
  margin:8px 0;
  font-size:13px;
  color:var(--text2);
}

.trial-widget-copy{
  margin-bottom:12px;
  font-size:13px;
  color:var(--text3);
}

.trial-widget-cta{
  display:inline-block;
  padding:8px 20px;
  background:var(--accent);
  color:var(--accent-ink);
  border-radius:6px;
  font-size:13px;
  font-weight:var(--fw-bold);
  text-decoration:none;
}

@media(max-width:640px){
  .trial-interstitial-card,
  .trial-expired-card--wide{
    width:100%;
    padding:28px 20px;
  }

  .trial-interstitial-actions{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }

  .trial-secondary-btn{
    width:100%;
  }
}

.router-inline-icon{flex-shrink:0;}
.router-lazy-state{padding:48px 24px;text-align:center;color:var(--tx-text-muted,var(--text3));}
.router-lazy-retry{margin-top:12px;}
.router-modal--search{max-width:620px;}
.router-search-title-icon{margin-right:4px;vertical-align:-2px;}
.router-search-input{width:100%;margin-bottom:10px;font-size:14px;}
.router-search-empty{padding:20px;text-align:center;font-size:12px;color:var(--text3);}
.router-modal .xbtn{display:inline-flex;align-items:center;justify-content:center;}
.router-modal .xbtn svg{display:block;flex-shrink:0;pointer-events:none;}
.router-search-count{margin-bottom:7px;font-size:10.5px;color:var(--text3);}
.router-search-result{cursor:pointer;}
.router-search-result__body{flex:1;min-width:0;}
.router-search-result__title{font-size:12px;font-weight:500;}
.router-search-result__meta{font-size:10px;color:var(--text3);}
.router-search-result__amount{font-family:var(--mono);font-size:12px;}
.router-search-result__amount.is-income{color:var(--green);}
.router-search-result__amount.is-expense{color:var(--red);}
.router-modal--backup-empty{max-width:420px;}
.router-modal--backup-list{max-width:520px;}
.router-backup-state{text-align:center;padding:20px;}
.router-backup-state__icon{margin-bottom:12px;}
.router-backup-state__message{margin-bottom:8px;font-size:13px;color:var(--text2);}
.router-backup-state__hint{font-size:11px;color:var(--text3);}
.router-backup-state__actions{margin-top:16px;}
.router-backup-list{max-height:60vh;overflow-y:auto;}
.router-backup-list__intro{margin-bottom:10px;font-size:11px;color:var(--text3);}
.router-backup-row{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;margin-bottom:4px;border:1px solid var(--border);border-radius:var(--radius2);background:var(--bg2);font-size:12px;}
.router-backup-row__name{font-family:var(--mono);font-size:11px;color:var(--text2);}
.router-backup-row__status{font-size:10px;color:var(--text3);}
.router-scroll-highlight{outline:2px solid var(--accent);}
/* SPA 404 / not-found view (Link-Nav-Audit Finding 2) — friendly fallback
   for unknown routes instead of a blank/frozen screen. */
.router-not-found{display:flex;align-items:center;justify-content:center;min-height:50vh;padding:48px 24px;}
.router-not-found__inner{max-width:420px;text-align:center;}
.router-not-found__icon{color:var(--text3);margin-bottom:16px;}
.router-not-found__title{margin:0 0 10px;font-size:20px;font-weight:var(--fw-semibold,600);color:var(--text);}
.router-not-found__text{margin:0 0 24px;font-size:13px;line-height:1.5;color:var(--text2);}
.router-not-found__cta{display:inline-flex;}

/* Light-only shell token extracted from _10-shell.css to avoid growing an
   already over-budget module. Dark default lives in _00-tokens.css. */
body.light{
  --tt-gate-scrim:rgba(244,245,248,.74);
}

/* Export-Center components; cascade order is defined in manifest.json. */
.modal-export{max-width:1080px;}
.modal-export .mh{position:sticky;top:0;z-index:3;background:var(--bg3);padding:18px 24px 14px;}
.modal-export .mh h2{font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--text-strong);letter-spacing:-.01em;}
.modal-export .modal-subtitle{font-size:var(--fs-sm);color:var(--text3);margin-top:3px;}
.modal-export .xbtn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:4px;font-size:var(--fs-lg);color:var(--text3);transition:background var(--tr-fast),color var(--tr-fast);}
.modal-export .xbtn:hover{background:var(--border);color:var(--text);}
.modal-export .xbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.export-body{padding:24px 28px 26px;}

/* Hero — primäre Empfehlung */
.ex-hero{display:block;width:100%;background:linear-gradient(135deg,rgba(var(--accent-rgba-base),.07),rgba(var(--accent-rgba-base),.02) 60%),var(--card);border:1px solid rgba(var(--accent-rgba-base),.30);border-radius:var(--radius-lg);cursor:pointer;transition:transform var(--tr-base),border-color var(--tr-base),box-shadow var(--tr-base);margin-bottom:12px;text-align:left;font-family:inherit;color:var(--text);padding:0;overflow:hidden;box-shadow:inset 0 1px 0 rgba(var(--surface-rgba-base),.04);}
.ex-hero:hover{transform:translateY(-1px);border-color:var(--accent);box-shadow:0 6px 22px rgba(var(--accent-rgba-base),.14),inset 0 1px 0 rgba(var(--surface-rgba-base),.05);}
.ex-hero:active{transform:translateY(0);}
.ex-hero:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.ex-hero-inner{display:flex;align-items:center;gap:22px;padding:22px 24px;width:100%;}
.ex-hero-ico{flex-shrink:0;width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:rgba(var(--accent-rgba-base),.12);border:1px solid rgba(var(--accent-rgba-base),.18);border-radius:var(--radius-md);color:var(--accent);}
.ex-hero-content{flex:1;min-width:0;}
.ex-hero-title{font-size:var(--fs-md);font-weight:var(--fw-bold);line-height:1.25;color:var(--text-strong);display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.ex-hero-badge{font-size:10px;font-weight:var(--fw-bold);letter-spacing:.07em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent);padding:3px 9px;border-radius:var(--radius-pill);}
.ex-hero-desc{font-size:var(--fs-base);color:var(--text2);line-height:1.45;margin-top:5px;}
.ex-hero-includes{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px;}
.ex-hero-includes span{font-size:10.5px;font-weight:var(--fw-semibold);color:var(--text2);background:rgba(var(--surface-rgba-base),.05);border:1px solid var(--border);border-radius:var(--radius-pill);padding:3px 10px;line-height:1.3;}
.ex-hero-aside{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:11px;}
.ex-hero-cta{display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:var(--accent-ink);font-size:var(--fs-base);font-weight:var(--fw-bold);padding:10px 18px;border-radius:var(--radius-md);white-space:nowrap;transition:filter var(--tr-fast),transform var(--tr-fast);}
.ex-hero-cta svg{transition:transform var(--tr-fast);}
.ex-hero:hover .ex-hero-cta{filter:brightness(1.05);}
.ex-hero:hover .ex-hero-cta svg{transform:translateY(1px);}

/* Format-Badge — Metadaten, kein Button */
.ex-fmt{display:inline-flex;align-items:center;height:22px;font-size:10px;font-weight:var(--fw-bold);letter-spacing:.05em;text-transform:uppercase;font-family:var(--font-mono);color:var(--text2);background:rgba(var(--surface-rgba-base),.06);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 9px;white-space:nowrap;flex-shrink:0;}

/* Kontext-Callout — informativ, keine Warnung */
.ex-scope{display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:1.5;color:var(--text2);background:rgba(var(--surface-rgba-base),.03);border:1px solid var(--border);border-radius:var(--radius-md);padding:13px 15px;margin-bottom:20px;}
.ex-scope-ico{flex-shrink:0;color:var(--text3);margin-top:1px;}

/* Gruppen */
.ex-section-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;}
.ex-section{margin-bottom:14px;}.ex-section-last{margin-bottom:2px;}
.ex-section-title{font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--text3);text-transform:uppercase;letter-spacing:.09em;padding:0 2px 10px;}
.ex-list{display:flex;flex-direction:column;gap:10px;}

/* Einzel-Export-Rows */
.ex-row{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:15px;min-height:64px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:15px 17px;cursor:pointer;transition:transform var(--tr-fast),border-color var(--tr-fast),background var(--tr-fast),box-shadow var(--tr-fast);text-align:left;text-decoration:none;font-family:inherit;color:var(--text);}
.ex-row:hover{transform:translateY(-1px);border-color:var(--border2);background:var(--card2);}
.ex-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.ex-row-ico{width:42px;height:42px;display:flex;align-items:center;justify-content:center;color:var(--text2);background:rgba(var(--surface-rgba-base),.04);border:1px solid var(--border);border-radius:var(--radius-md);transition:color var(--tr-fast),border-color var(--tr-fast);}
.ex-row:hover .ex-row-ico{color:var(--text);border-color:var(--border2);}
.ex-row-body{flex:1;min-width:0;}
.ex-row-titleline{display:flex;align-items:center;gap:8px;min-width:0;}
.ex-row-title{min-width:0;font-size:var(--fs-base);font-weight:var(--fw-bold);line-height:1.25;color:var(--text);}
.ex-row-desc{font-size:12.5px;color:var(--text3);line-height:1.45;margin-top:4px;max-width:36em;}
.ex-row-fmt{margin-left:auto;}

/* Pro-gated Row — ruhiger Upgrade-Hinweis, kein Fehlerzustand */
.ex-row-pro{cursor:default;background:rgba(var(--accent-rgba-base),.028);border-color:rgba(var(--accent-rgba-base),.14);}
.ex-row-pro:hover{transform:none;background:rgba(var(--accent-rgba-base),.028);border-color:rgba(var(--accent-rgba-base),.14);}
.ex-row-pro .ex-row-ico{color:var(--text3);background:rgba(var(--surface-rgba-base),.04);border-color:var(--border);}
.ex-row-pro .ex-row-title{color:var(--text2);}
.ex-pro-badge{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:var(--fw-bold);letter-spacing:.04em;background:rgba(var(--accent-rgba-base),.14);color:var(--accent);padding:2px 7px;border-radius:var(--radius-pill);margin-left:5px;vertical-align:middle;}
.ex-pro-link{font-size:11px;color:var(--accent);text-decoration:none;font-weight:var(--fw-semibold);transition:color var(--tr-fast);}
.ex-pro-link:hover{color:var(--accent3);text-decoration:underline;}

/* Footer — kompakte Secondary-Row */
.ex-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 0 2px;border-top:1px solid var(--border);margin-top:18px;}
.ex-footer-link{display:flex;flex-direction:column;gap:1px;background:none;border:none;cursor:pointer;font-family:inherit;padding:5px 7px;margin-left:-7px;border-radius:var(--radius-sm);text-align:left;}
.ex-footer-link-main{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--accent);}
.ex-footer-link-main svg{transition:transform var(--tr-fast);}
.ex-footer-link:hover .ex-footer-link-main{text-decoration:underline;}
.ex-footer-link:hover .ex-footer-link-main svg{transform:translateX(2px);}
.ex-footer-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.ex-footer-link-sub{font-size:var(--fs-sm);color:var(--text3);}
.ex-footer-ro{font-size:var(--fs-sm);color:var(--text3);}

/* Inline-style cleanup helpers */
.export-warning-more{color:var(--text3);font-style:italic;}
.export-warning-note{font-size:12px;color:var(--text2);}
.export-range-dialog{max-width:380px;}
.export-range-row{display:flex;gap:10px;align-items:center;}
.export-range-field{flex:1;margin:0;}
.export-range-label{font-size:12px;}
.export-range-select{width:100%;}
.export-range-error{font-size:12px;color:var(--red);margin-top:4px;min-height:18px;}

/* Light-Mode — Tints flippen token-getrieben; nur Tiefe ergänzen */
body.light .ex-hero{box-shadow:var(--shadow-sm);}
body.light .ex-hero:hover{box-shadow:0 6px 20px rgba(var(--accent-rgba-base),.16);}
body.light .ex-row:hover{box-shadow:var(--shadow-sm);}

/* Responsive */
@media(max-width:860px){.ex-section-grid{grid-template-columns:1fr;gap:6px;}.modal-export{max-width:100%;}}
@media(max-width:600px){
  .export-body{padding:18px 16px 20px;}
  .modal-export .mh{padding:14px 16px 11px;}
  .ex-hero-inner{flex-wrap:wrap;gap:14px;padding:18px;}
  .ex-hero-ico{width:48px;height:48px;}
  .ex-hero-content{flex:1 1 100%;order:1;}
  .ex-hero-aside{order:2;flex-direction:column;align-items:stretch;width:100%;gap:10px;}
  .ex-hero-aside .ex-fmt{align-self:flex-start;}
  .ex-hero-cta{justify-content:center;padding:13px 18px;}
  .ex-row{padding:13px;min-height:64px;}
  .ex-row-ico{width:40px;height:40px;}
  .ex-footer{flex-direction:column;align-items:flex-start;gap:8px;}
}
@media(pointer:coarse){.modal-export .xbtn{width:44px;height:44px;}.ex-row{min-height:56px;}}

/* ===== ONBOARDING-CHECKLISTE =====
   Geführte Einrichtung (Cockpit). Ersetzt die alten .first-run/.fr-* Karten.
   Tokens: _00-tokens.css. Desktop-Basis + Mobile-Overrides (Codebase-Konvention). */

.onb{
  background:linear-gradient(135deg,rgba(232,184,75,.07) 0%,rgba(99,120,166,.04) 100%);
  border:1px solid rgba(232,184,75,.18);
  border-radius:var(--radius-lg);
  padding:var(--space-xl) var(--space-xl) var(--space-lg);
  margin-bottom:var(--space-lg);
}
.onb--done{
  background:linear-gradient(135deg,rgba(74,222,128,.07) 0%,rgba(99,120,166,.03) 100%);
  border-color:rgba(74,222,128,.20);
}

.onb-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-md);margin-bottom:var(--space-md);}
.onb-title{font-size:var(--fs-md);font-weight:var(--fw-extrabold);color:var(--text);letter-spacing:-.3px;margin-bottom:3px;}
.onb-sub{font-size:var(--fs-base);color:var(--text2);}

.onb-close{
  flex:0 0 auto;background:none;border:1px solid var(--border);
  color:var(--text3);cursor:pointer;font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  padding:6px 12px;border-radius:var(--radius-pill);transition:color .15s,border-color .15s;
}
.onb-close:hover{color:var(--text);border-color:var(--text3);}
.onb-close--done{color:var(--tone-good-fg);border-color:var(--tone-good-border);}
.onb-close--done:hover{color:var(--tone-good-fg);border-color:var(--tone-good-fg);}
.onb-actions{display:flex;gap:var(--space-sm);flex:0 0 auto;}
.onb-close--mute{border-color:transparent;color:var(--text3);}
.onb-close--mute:hover{color:var(--text2);border-color:var(--border);}

.onb-progress{height:6px;background:var(--card);overflow:hidden;margin-bottom:var(--space-lg);}
.onb-progress-meter{display:block;width:100%;height:100%;}
.onb-progress-fill{fill:var(--accent);}

.onb-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-sm);}
.onb-step{
  display:flex;align-items:center;gap:var(--space-md);
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:var(--space-md) var(--space-lg);
  transition:border-color .15s,background .15s;
}
.onb-step:not(.is-done):hover{border-color:rgba(232,184,75,.4);background:var(--card2);}
.onb-step.is-done{opacity:.62;}

.onb-ind{
  flex:0 0 auto;width:30px;height:30px;border-radius:var(--radius-pill);
  display:flex;align-items:center;justify-content:center;
  background:var(--bg2);color:var(--text3);
  border:1px solid var(--border);
}
.onb-ind--done{background:var(--tone-good-bg);color:var(--tone-good-fg);border-color:var(--tone-good-border);}

.onb-step-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;}
.onb-step-title{font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--text);}
.onb-step.is-done .onb-step-title{text-decoration:line-through;text-decoration-color:var(--text3);}
.onb-step-sub{font-size:var(--fs-sm);color:var(--text3);line-height:1.45;}

.onb-cta{
  flex:0 0 auto;background:var(--accent);color:var(--accent-ink);
  font-size:var(--fs-sm);font-weight:var(--fw-bold);
  padding:8px 16px;border-radius:var(--radius-sm);border:none;cursor:pointer;
  transition:background .15s;white-space:nowrap;
  /* Einheitliche CTA-Spaltenbreite: linke Kante aller Buttons fluchtet. */
  min-width:11rem;text-align:center;
}
.onb-cta:hover{background:var(--accent2);}

/* Collapsed → kompakte Progress-Pille (immer reversibel) */
.onb--pill{
  display:inline-flex;align-items:center;gap:var(--space-sm);
  background:var(--card);border:1px solid rgba(232,184,75,.25);
  border-radius:var(--radius-pill);padding:8px 16px;margin-bottom:var(--space-lg);
  cursor:pointer;color:var(--text2);font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  transition:border-color .15s,color .15s;
}
.onb--pill:hover{border-color:var(--accent);color:var(--text);}
.onb-pill-prog{
  background:var(--accent);color:var(--accent-ink);font-weight:var(--fw-bold);
  font-size:var(--fs-xs);padding:2px 8px;border-radius:var(--radius-pill);
}
.onb-pill-arrow{color:var(--accent);font-weight:var(--fw-bold);}

/* ── Mobile <600px: Zeilen stapeln, CTA full-width, große Tap-Targets ── */
@media(max-width:600px){
  .onb{padding:var(--space-lg) var(--space-md) var(--space-md);margin-bottom:var(--space-md);}
  .onb-title{font-size:var(--fs-body);}
  .onb-step{flex-wrap:wrap;padding:var(--space-md);}
  .onb-step-text{flex:1 1 calc(100% - 42px);}
  .onb-cta{
    flex:1 1 100%;margin-top:var(--space-sm);text-align:center;
    min-height:var(--tap-target-comfy,48px);
    /* Mobile: CTA full-width, Desktop-Spaltenbreite zurücksetzen. */
    min-width:0;
  }
  .onb-close{min-height:var(--tap-target-min,44px);display:flex;align-items:center;justify-content:center;}
  .onb-actions{flex:1 1 100%;flex-wrap:wrap;margin-top:var(--space-sm);}
  .onb-actions .onb-close{flex:1 1 calc(50% - var(--space-sm));}
  .onb--pill{
    width:100%;justify-content:center;
    padding-bottom:calc(8px + env(safe-area-inset-bottom));
  }
}
@media(max-width:480px){
  .onb-title{font-size:var(--fs-base);}
  .onb-step-title{font-size:var(--fs-sm);}
  .onb-step-sub{font-size:var(--fs-xs);}
}

@media(prefers-reduced-motion:reduce){
  .onb-progress-fill,.onb-step,.onb-cta,.onb-close,.onb--pill{transition:none;}
}

/* ===== POST-LOGIN IMPORT-HINT-KACHEL (Onboarding-Wizard PR5, Task 5.1) =====
   Dezente, einzeilige, wegklickbare Kachel oben im Dashboard. Erscheint nur,
   wenn der User im Wizard angegeben hat, Daten mitzubringen. Bewusst leiser als
   .onb (kein Gradient, nur Hairline + dezenter Surface). */
.import-hint-tile{
  display:flex;align-items:center;gap:var(--space-sm);
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:10px var(--space-md);
  margin-bottom:var(--space-md);
  font-size:var(--fs-sm);color:var(--text2);
}
.import-hint-tile__text{flex:1 1 auto;min-width:0;}
.import-hint-tile__cta{
  flex:0 0 auto;background:none;border:none;padding:0;cursor:pointer;
  color:var(--accent);font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  text-decoration:underline;text-underline-offset:2px;
  transition:color .15s;
}
.import-hint-tile__cta:hover{color:var(--text);}
.import-hint-tile__close{
  flex:0 0 auto;background:none;border:none;cursor:pointer;
  color:var(--text3);font-size:var(--fs-md);line-height:1;
  padding:2px 6px;border-radius:var(--radius-sm);
  transition:color .15s;
}
.import-hint-tile__close:hover{color:var(--text);}

@media(max-width:600px){
  .import-hint-tile{flex-wrap:wrap;}
  .import-hint-tile__text{flex:1 1 100%;}
  .import-hint-tile__cta{min-height:var(--tap-target-min,44px);display:flex;align-items:center;}
  .import-hint-tile__close{min-height:var(--tap-target-min,44px);display:flex;align-items:center;}
}

@media(prefers-reduced-motion:reduce){
  .import-hint-tile__cta,.import-hint-tile__close{transition:none;}
}

/* ===== ERSTNUTZER-WIZARD (Onboarding/Demo-Maschine PR3) =====
   Modaler 3-Schritte-Wizard nach Signup + Demo-Frage. CSP-konform: keine
   Inline-Styles; Sichtbarkeit/State ausschließlich über Klassen + [hidden]. */
.onbw-overlay{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  padding:var(--space-lg);
  background:rgba(8,12,20,.62);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.onbw-overlay[hidden]{display:none;}
.onbw-card{
  width:100%;max-width:520px;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--space-xl) var(--space-xl) var(--space-lg);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.onbw-prog{display:flex;gap:6px;margin-bottom:var(--space-lg);}
.onbw-prog-seg{flex:1 1 0;height:4px;border-radius:2px;background:var(--border);}
.onbw-prog-seg.is-active{background:var(--accent);}
.onbw-step-label{font-size:var(--fs-xs);color:var(--text3);margin-bottom:6px;}
.onbw-title{font-size:var(--fs-lg);font-weight:var(--fw-extrabold);color:var(--text);letter-spacing:-.3px;margin-bottom:4px;}
.onbw-sub{font-size:var(--fs-sm);color:var(--text2);line-height:1.5;margin-bottom:var(--space-lg);}
.onbw-opts{display:flex;flex-direction:column;gap:var(--space-sm);margin-bottom:var(--space-lg);}
.onbw-opt{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--border);border-radius:var(--radius-md);
  padding:11px var(--space-md);cursor:pointer;
  font-size:var(--fs-sm);color:var(--text);
  background:none;text-align:left;width:100%;
  transition:border-color .15s,background .15s;
}
.onbw-opt:hover{border-color:var(--text3);}
/* Sichtbarer Fokusring für die Pfeiltasten-Navigation der radiogroup
   (Roving-Tabindex). Konsistent mit dem App-Fokusring (--accent). */
.onbw-opt:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-focus-ring);}
.onbw-opt.is-selected{border-color:var(--accent);background:rgba(232,184,75,.07);}
.onbw-opt-dot{
  flex:0 0 auto;width:16px;height:16px;border-radius:50%;
  border:1px solid var(--text3);transition:border-color .15s,border-width .15s;
}
.onbw-opt.is-selected .onbw-opt-dot{border:5px solid var(--accent);}
.onbw-actions{display:flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-md);}
.onbw-btn{
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  padding:9px var(--space-lg);border-radius:var(--radius-md);
  border:1px solid var(--border);background:none;color:var(--text);cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.onbw-btn:hover{border-color:var(--text3);}
.onbw-btn--primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.onbw-btn--primary:hover{filter:brightness(1.05);}
.onbw-skip{margin-left:auto;background:none;border:none;cursor:pointer;color:var(--text3);font-size:var(--fs-sm);transition:color .15s;}
.onbw-skip:hover{color:var(--text);}

/* ===== DEMO-BEREICH-BANNER (Onboarding/Demo-Maschine PR3) =====
   Dauerhaftes, prominentes Banner solange die Session im Beispiel-Bereich ist. */
.demo-banner{
  display:flex;align-items:center;gap:var(--space-md);
  background:linear-gradient(135deg,rgba(99,120,166,.16) 0%,rgba(99,120,166,.06) 100%);
  border:1px solid rgba(99,120,166,.34);
  border-radius:var(--radius-md);
  padding:10px var(--space-md);
  margin-bottom:var(--space-md);
  font-size:var(--fs-sm);color:var(--text);
}
.demo-banner[hidden]{display:none;}
.demo-banner__icon{flex:0 0 auto;display:flex;color:var(--accent);}
.demo-banner__text{flex:1 1 auto;min-width:0;}
.demo-banner__text strong{font-weight:var(--fw-bold);}
.demo-banner__actions{flex:0 0 auto;display:flex;gap:var(--space-sm);}
.demo-banner__btn{
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  padding:7px var(--space-md);border-radius:var(--radius-pill);
  border:1px solid var(--border);background:none;color:var(--text);cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.demo-banner__btn:hover{border-color:var(--text3);}
.demo-banner__btn--danger{border-color:var(--red3);color:var(--red);}
.demo-banner__btn--danger:hover{border-color:var(--red);background:var(--red2);}

/* ===== CAPABILITY-WIZARD (Stufe 1b) — additive, gleiche .onbw-*-Optik =====
   Erklärender Hilfetext unter einer Frage + die Ergebnis-Hinweis-Boxen. Nutzt
   ausschließlich vorhandene DESIGN-Tokens (nahtlos). Gesperrt = neutral gerahmt
   (RA: Produktentscheidung, kein Alarm-Rot), Hinweis = info, erlaubt = good. */
.onbw-tooltip{
  font-size:var(--fs-xs);color:var(--text3);line-height:1.5;
  margin:calc(-1 * var(--space-sm)) 0 var(--space-lg);
}
.onbw-result{
  border:1px solid var(--border);border-radius:var(--radius-md);
  padding:var(--space-md);margin-bottom:var(--space-sm);
}
.onbw-result-key{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text);margin-bottom:4px;}
.onbw-result-msg{font-size:var(--fs-sm);color:var(--text2);line-height:1.5;}
.onbw-result--ok{border-color:var(--tone-good-border);background:var(--tone-good-bg);}
.onbw-result--ok .onbw-result-key{color:var(--tone-good-fg);}
.onbw-result--hint{border-color:var(--border);background:var(--card2);}
.onbw-result--blocked{border-color:var(--border);background:var(--bg2);}
.onbw-result-disclaimer{margin-top:var(--space-md);}

/* ===== §19-ONBOARDING-WIZARD (Stufe 1c, TAX-01 P0-5/6) — additiv, gleiche
   .onbw-*-Optik. Jahr-Eingabe im Wizard-Kontext bleibt kompakt (nicht card-breit);
   Datum-Trigger (.tx-storno-date-trigger) ist bereits global in
   _23b-bookings-modal-hints.css gestylt, hier keine Neudefinition nötig. ===== */
#vonb-year-input{max-width:140px;}

@media(max-width:600px){
  .onbw-card{padding:var(--space-lg) var(--space-md) var(--space-md);}
  .demo-banner{flex-wrap:wrap;}
  .demo-banner__text{flex:1 1 100%;}
  .demo-banner__btn{min-height:var(--tap-target-min,44px);}
}
@media(prefers-reduced-motion:reduce){
  .onbw-opt,.onbw-btn,.onbw-skip,.demo-banner__btn,.onbw-opt-dot{transition:none;}
}

/* Steuerberater-Pro-Hub (cv 'steuerberater-hub')
 * IA-Konsolidierung der Steuerberater-Funktionen. Nutzt die bestehenden
 * .tx-tabs (siehe _31-invoices.css) + .card; hier nur Hub-spezifische Klassen.
 * Tokens aus _00-tokens.css — keine Hardcodes. */

.sbh-frame { width: 100%; }

@media (min-width: 769px) {
  body[data-shell="v2"] .shell-main:not([data-width]):has(.sbh-frame) {
    padding: 26px var(--page-pad-x) 18px;
  }
}

.sbh-head { margin-bottom: var(--shell-ref-header-bottom); }

.sbh-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sbh-pro {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--radius-pill, 999px);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
}

/* Mobile-Fix (2026-07-16, User-Live-Fund @390px): die 5 Hub-Tabs (~668px
   Inhalt) liefen rechts aus dem Viewport und wurden vom html/body-
   overflow-clip hart abgeschnitten — Tabs 3-5 unerreichbar. `.tx-tabs`
   bekommt erst ≤640px ein overflow-x:auto (_31-invoices.css); der Bereich
   641-~700px blieb ungeschützt. Basisregel statt Media-Query: bei Platz
   ist overflow-x:auto ein No-Op. Items dürfen nicht schrumpfen/umbrechen,
   sonst quetscht flex-shrink die Labels mehrzeilig statt zu scrollen.
   Scroll-Affordanz: .is-scrollable-Maske via scroll-fade-sync.js in
   _99i-ui-scroll-fade.css (kanonisches Muster, #4925). */
.sbh-tabs {
  margin-bottom: 16px;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* Touch: Scrollbar aus, der Fade ist die Affordanz; Maus-Geräte behalten
   den ziehbaren Balken (Muster wie .bm-tabs, _23g-bookings-month-list.css). */
@media (pointer: coarse) {
  .sbh-tabs { scrollbar-width: none; }
  .sbh-tabs::-webkit-scrollbar { display: none; }
}

.sbh-tabs .tx-tabs__item {
  flex: 0 0 auto;
  white-space: nowrap;
}

.sbh-panel { display: block; }

.sbh-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.sbh-card { display: flex; flex-direction: column; gap: 8px; }

.sbh-card-title {
  font-weight: var(--fw-semibold);
  color: var(--text);
}

.sbh-card-desc {
  margin: 0;
  flex: 1 1 auto;
  color: var(--text2);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}

.sbh-card-cta { align-self: flex-start; }

.sbh-ph, .sbh-help { display: flex; flex-direction: column; gap: 10px; }

.sbh-list {
  margin: 4px 0 8px;
  padding-left: 18px;
  color: var(--text2);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}

.sbh-list li { margin: 2px 0; }

@media (max-width: 640px) {
  .sbh-cards { grid-template-columns: 1fr; }
}

/* PR2: Übergabe-Check-Panel (Score + Checkliste) */
.sbh-handover { display: flex; flex-direction: column; gap: 10px; }

.sbh-score {
  font-size: var(--fs-xl, 1.5rem);
  font-weight: var(--fw-bold);
  color: var(--text);
}

.sbh-score-status {
  margin-left: 8px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text2);
}

.sbh-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sbh-check {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 3px solid var(--border);
  padding: 6px 10px;
  border-radius: var(--radius-sm, 6px);
  background: var(--bg2);
}

.sbh-check--ok { border-left-color: var(--green); }
.sbh-check--warning {
  border-left-color: transparent;
  box-shadow: inset 0 0 0 1px var(--border);
}
.sbh-check--blocker { border-left-color: var(--red); }

.sbh-check-title { font-weight: var(--fw-medium); color: var(--text); font-size: var(--fs-sm); }
.sbh-check-hint { color: var(--text2); font-size: var(--fs-sm); }

/* PR3: Freigaben- & Export-Paket-Listen (read-only Übersicht + CTA) */
.sbh-shares, .sbh-packages { display: flex; flex-direction: column; gap: 10px; }

.sbh-shares-list, .sbh-pkg-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sbh-share, .sbh-pkg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  border-radius: var(--radius-sm, 6px);
  background: var(--bg2);
}

.sbh-share-name, .sbh-pkg-period { font-weight: var(--fw-medium); color: var(--text); font-size: var(--fs-sm); }
.sbh-share-meta, .sbh-pkg-meta { color: var(--text2); font-size: var(--fs-sm); }

/* ───────────────────────────────────────────────────────────────────────────
   Maintenance Overlay — full-screen blocker during deploy/migration windows.
   Wird via /api/maintenance-status (Poll 30 s) durch maintenance-status.js
   sichtbar geschaltet; deploy.sh schreibt + entfernt das Flag-File.

   Vollbild-Lösung statt schmaler Banner, damit Nutzer keinen halben
   Dashboard-State sehen während Migrationen laufen. ID bleibt
   `maintenance-banner` für Backward-Compat (Tests, Poller-JS).

   Extrahiert aus _10-shell.css (LOC-Budget) in eigenes Partial; in
   manifest.json zwischen _10-shell.css und _12-page-shell.css verkabelt.
   ─────────────────────────────────────────────────────────────────────── */
#maintenance-banner{display:none;position:fixed;inset:0;z-index:99999;align-items:center;justify-content:center;padding:var(--space-xl);background:radial-gradient(circle at 50% 0%,rgba(232,184,75,.08) 0%,rgba(12,15,26,.96) 50%),rgba(12,15,26,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:maintenance-fade-in .3s ease-out;}
#maintenance-banner.is-visible{display:flex;}
.maintenance-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-lg);max-width:480px;width:100%;padding:var(--space-3xl) var(--space-2xl);background:var(--card);border:1px solid rgba(232,184,75,.22);border-radius:var(--radius-xl);box-shadow:0 24px 64px rgba(0,0,0,.5),0 0 0 1px rgba(232,184,75,.08);text-align:center;animation:maintenance-card-rise .35s cubic-bezier(.2,.8,.2,1);}
.maintenance-spinner{display:flex;align-items:center;justify-content:center;width:128px;height:128px;border-radius:50%;background:radial-gradient(circle,rgba(232,184,75,.12) 0%,transparent 70%);color:var(--accent);}
/* Inhalt ist jetzt der Ledger-Rows-Loader (public/css/app/_03-ledger-loader.css). */
.maintenance-title{font-size:var(--fs-xl);font-weight:var(--fw-extrabold);color:var(--text);letter-spacing:-.3px;line-height:1.2;}
.maintenance-text{font-size:var(--fs-body);color:var(--text2);font-weight:var(--fw-medium);line-height:1.55;max-width:380px;}
.maintenance-meta{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--fs-sm);color:var(--text3);font-weight:var(--fw-medium);margin-top:var(--space-sm);padding-top:var(--space-md);border-top:1px solid rgba(var(--surface-rgba-base),.06);width:100%;justify-content:center;}
.maintenance-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:maintenance-pulse 1.6s ease-in-out infinite;flex-shrink:0;}
@keyframes maintenance-fade-in{from{opacity:0;}to{opacity:1;}}
@keyframes maintenance-card-rise{from{opacity:0;transform:translateY(12px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes maintenance-pulse{0%,100%{opacity:.4;transform:scale(1);}50%{opacity:1;transform:scale(1.4);}}
@media (max-width: 600px){
  #maintenance-banner{padding:var(--space-lg);}
  .maintenance-card{padding:var(--space-2xl) var(--space-xl);gap:var(--space-md);}
  .maintenance-title{font-size:var(--fs-lg);}
  .maintenance-text{font-size:var(--fs-base);}
}
@media (prefers-reduced-motion: reduce){
  #maintenance-banner,.maintenance-card{animation:none;}
  .maintenance-dot{animation:none;opacity:1;}
}
/* Body-Scroll-Lock wenn Overlay aktiv ist (vom JS via class auf <html> gesetzt). */
html.is-maintenance-active{overflow:hidden;}
html.is-maintenance-active body{overflow:hidden;}

/* Impersonation Badge (Feature 3)
 *
 * Schmales persistentes Banner oben, sichtbar geschaltet von
 * /public/js/impersonation-badge.js wenn die Sitzung eine read-only
 * Support-Sicht ist. Bewusst auffällig (Accent-Rand), damit der Support
 * jederzeit sieht, dass er aus Kundensicht schaut.
 */
#impersonation-badge {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99998;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 8px var(--space-md);
  background: linear-gradient(90deg, rgba(232,184,75,.18), rgba(232,184,75,.10));
  border-bottom: 2px solid var(--accent);
  color: var(--accent3);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
#impersonation-badge.is-visible { display: flex; }
.impersonation-badge-lock { font-size: 14px; }
.impersonation-badge-timer-wrap {
  color: var(--text2);
  font-weight: 500;
}
#impersonation-badge-timer { font-variant-numeric: tabular-nums; }

/* Wenn aktiv, die App leicht nach unten schieben, damit das Banner nichts
 * verdeckt. Nur ein kleiner Top-Spacer am Shell-Root. */
html.is-impersonating #app { padding-top: 34px; }

@media (max-width: 640px) {
  #impersonation-badge { font-size: 12px; padding: 6px var(--space-sm); flex-wrap: wrap; }
}

/* Nav-Misc-Residuum (extrahiert aus _20-dashboard.css in PR-S1.6b' / Z. 10-29).
   Nav-Group-Separators, Settings-Utility-Button, Utility-Separator,
   Mobile-Menu-Group-Labels. Liegt direkt nach _15-maintenance.css damit
   die Nav-Base-Cascade (PR-S1.6a-Codex-[P1]-Lehre: Light-Override muss
   nach Base laden) erhalten bleibt. Original-Reihenfolge 1:1.
   Plan-Doc: docs/architecture/2026-05-16-dashboard-css-split-plan.md */

/* ── Nav Group Separators ── */
.nav-group-sep{width:1px;height:22px;background:var(--border);margin:0 4px;align-self:center;flex-shrink:0;}
body.light .nav-group-sep{background:rgba(26,30,46,.1);}
@media(max-width:768px){.nav-group-sep{display:none;}}

/* ── Settings Utility Button in nav-right ── */
.nav-settings-btn{padding:6px;border-radius:var(--radius-sm);color:var(--text3);transition:color .15s,background .15s;margin-right:2px;}
.nav-settings-btn:hover{color:var(--text);background:rgba(99,120,166,.1);}
.nav-settings-btn.active{color:var(--accent);background:rgba(232,184,75,.08);}
body.light .nav-settings-btn:hover{background:rgba(26,30,46,.06);}
body.light .nav-settings-btn.active{background:rgba(232,184,75,.06);}

/* ── Utility Separator (between Settings and Theme) ── */
.nav-util-sep{width:1px;height:18px;background:var(--border);margin:0 4px;align-self:center;flex-shrink:0;opacity:.5;}
body.light .nav-util-sep{background:rgba(26,30,46,.08);}
@media(max-width:768px){.nav-util-sep,.nav-settings-btn{display:none;}}

/* ── Mobile Menu Group Labels ── */
.mob-fs-group-label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:1.2px;color:var(--text3);font-weight:var(--fw-semibold);padding:16px 20px 6px;margin-top:4px;}
.mob-fs-group-label:first-child{margin-top:0;padding-top:8px;}

/* Shared page shells for administration and reporting views. */

:root{
  --app-page-max-width:1180px;
  --app-page-max-width-wide:1220px;
  --app-page-max-width-xwide:1280px;
  --report-page-max-width:1240px;
  --app-page-pad-top:2px;
  --app-page-pad-x:8px;
  --app-page-pad-bottom:80px;
}

.app-page,
.report-page{
  width:100%;
  box-sizing:border-box;
  margin:0 auto;
  padding:var(--app-page-pad-top) var(--app-page-pad-x) var(--app-page-pad-bottom);
}
.app-page{max-width:var(--app-page-max-width);}
.app-page--tool{max-width:var(--app-page-max-width);}
.app-page--wide{max-width:var(--app-page-max-width-wide);}
.app-page--xwide{max-width:var(--app-page-max-width-xwide);}
.report-page{max-width:var(--report-page-max-width);}
.report-page--pruefen{max-width:var(--app-page-max-width-wide);}
/* Sweep U (2026-05-03): Monatsansicht braucht mehr Breite als der
   Standard-1240px-Cap, weil sie die Buchungstabelle (11 Spalten,
   ~1000px Mindestbreite) UND das Inspector-Panel (320px) nebeneinander
   zeigt. Bei 1240px Cap blieb der Tabelle nur ~870px → Spalten scrollten
   horizontal innerhalb des Wrappers, was vom User als "abgeschnitten"
   wahrgenommen wurde. 1440px gibt der Tabelle weiterhin genug Platz,
   Spalten passen ohne horizontalen Scroll. Auf schmaleren Viewports
   greift max-width nicht (Page nutzt verfügbaren Platz). */
.report-page--month{max-width:1440px;}

body[data-shell="v2"] .shell-main[data-width="full"] .app-page,
body[data-shell="v2"] .shell-main[data-width="full"] .report-page{
  padding-left:16px;
  padding-right:16px;
}

.app-page-header,
.report-page-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:20px;
}
/* Legacy mh-header sets margin-top:20px which stacks on top of the
   .report-page padding and makes month pages feel pushed-down compared
   to the year overview. Zero it when the new shell is active so month
   header spacing matches Jahresübersicht. */
.mh-header.report-page-header{margin-top:0;}
.app-page-header__body,
.report-page-header__body{
  min-width:0;
  flex:1 1 auto;
}
.app-page-eyebrow,
.report-page-eyebrow,
.sbh-eyebrow{
  margin-bottom:5px;
  color:var(--text3);
  font-size:12px;
  font-weight:var(--fw-semibold);
  letter-spacing:.08em;
  line-height:1.2;
  text-transform:uppercase;
}
.app-page-title,
.report-page-title{
  margin:0;
  color:var(--text-strong);
  font-size:30px;
  font-weight:var(--fw-bold);
  letter-spacing:-0.025em;
  line-height:1.15;
}
.app-page-description,
.report-page-description{
  max-width:62ch;
  margin:6px 0 0;
  color:var(--text2);
  font-size:13px;
  line-height:1.45;
}
.app-page-actions,
.report-page-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:0 0 auto;
  flex-wrap:wrap;
}
.app-page-content,
.report-page-content{
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:0;
}
.annual-search__form-row{display:flex;align-items:stretch;gap:8px;}
.annual-search__form-row input{flex:1;min-width:0;}
.annual-search__form-row .btn{flex:0 0 auto;}
.report-page-summary{
  display:grid;
  gap:12px;
}
.report-page-toolbar{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  min-width:0;
}

.app-icon{
  display:inline-block;
  flex-shrink:0;
  vertical-align:-.15em;
  pointer-events:none;
}
.app-action-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  white-space:nowrap;
}
.app-action-button .app-icon{
  vertical-align:0;
}
.app-action-button__label{
  min-width:0;
}
.app-icon-button{
  aspect-ratio:1;
  min-width:32px;
  min-height:32px;
  padding:6px;
}
.app-action-button--ghost{
  background:transparent;
}
/* App-weiter Standard für das 3-Punkte-Aktionsmenü. Optik 1:1 wie das
   Buchungs-Kontextmenü (.bm-row-menu in _23-bookings-month.css):
   quadratischer 36px-Trigger ohne Border, vertikale Ellipsis, 230px-
   Popover (card2, Radius 10, weicher Schatten), 34px-Items, Danger rot.
   Markup/JS unverändert — nur Darstellung vereinheitlicht. */
.app-action-menu{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.app-action-menu__trigger{
  list-style:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  min-width:36px;
  min-height:36px;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--text3);
  cursor:pointer;
  transition:background var(--tr-fast),color var(--tr-fast);
}
.app-action-menu__trigger::-webkit-details-marker{
  display:none;
}
.app-action-menu__trigger:hover,
.app-action-menu[open] .app-action-menu__trigger{
  color:var(--text);
  background:rgba(var(--surface-rgba-base),.08);
}
body.light .app-action-menu__trigger:hover,
body.light .app-action-menu[open] .app-action-menu__trigger{
  background:rgba(15,23,42,.06);
}
.app-action-menu__trigger:focus-visible{
  outline:2px solid rgba(var(--accent-rgba-base),.55);
  outline-offset:1px;
}
.app-action-menu__panel{
  position:absolute;
  top:calc(100% + 4px);
  right:8px;
  z-index:200;
  display:flex;
  width:230px;
  flex-direction:column;
  gap:1px;
  padding:6px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--card2);
  box-shadow:0 16px 40px rgba(0,0,0,.35);
}
body.light .app-action-menu__panel{
  background:var(--card);
  box-shadow:0 12px 28px rgba(15,23,42,.14);
}
.app-action-menu:not([open]) .app-action-menu__panel{
  display:none;
}
/* Item-Selektor mit erhöhter Spezifität, schlägt .btn.btn-g aus _10-shell
   (gleiche Klassenzahl, _12 lädt später → Quellordnung + button-Tag). */
.app-action-menu__panel button.app-action-menu__item,
.app-action-menu__panel .app-action-menu__item{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  width:100%;
  height:34px;
  min-height:34px;
  padding:0 10px;
  margin:0;
  border:0;
  border-radius:6px;
  background:transparent;
  box-shadow:none;
  text-align:left;
  font-family:var(--font-sans);
  font-size:13px;
  font-weight:var(--fw-medium);
  color:var(--text);
  transition:background var(--tr-fast),color var(--tr-fast);
}
.app-action-menu__panel .app-action-menu__item:hover{
  background:rgba(var(--surface-rgba-base),.06);
  color:var(--text);
}
body.light .app-action-menu__panel .app-action-menu__item:hover{
  background:rgba(15,23,42,.04);
}
.app-action-menu__panel .app-action-menu__item .app-icon{
  flex-shrink:0;
  color:var(--text2);
}
.app-action-menu__panel .app-action-menu__item:hover .app-icon{
  color:var(--text);
}
.app-action-menu__panel .app-action-menu__item[disabled],
.app-action-menu__panel .app-action-menu__item[aria-disabled="true"]{
  opacity:.42;
  cursor:not-allowed;
}
.app-action-menu__panel .app-action-menu__item[disabled]:hover,
.app-action-menu__panel .app-action-menu__item[aria-disabled="true"]:hover{
  background:transparent;
}
.app-action-menu__panel .app-action-menu__item.app-action-button--danger{
  color:var(--red);
}
.app-action-menu__panel .app-action-menu__item.app-action-button--danger .app-icon{
  color:var(--red);
  opacity:.8;
}
.app-action-menu__panel .app-action-menu__item.app-action-button--danger:hover{
  background:rgba(248,113,113,.1);
  color:var(--red);
}
.app-action-menu__separator{
  display:block;
  height:1px;
  margin:4px 0;
  background:var(--border);
}

/* ── Einheitlicher 3-Punkte-Trigger (EINE Quelle der Wahrheit) ────────
   Gilt für ALLE Aktionsmenü-Trigger appweit: Prüfen/CoreUI
   (.app-action-menu__trigger), Buchungen (.bm-row__menu-btn). Box-Maße
   sind in den jeweiligen Dateien bereits identisch (36×36, Radius 8,
   transparent) — hier verbindlich die exakte Zentrierung + sichtbare
   Icon-Größe. Vertikale Ellipsis als echtes SVG (kein typografisches
   „…"). */
.app-action-menu__trigger,
.bm-row__menu-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  min-width:36px;
  min-height:36px;
  padding:0;
  line-height:0;
}
.app-action-menu__trigger > svg,
.bm-row__menu-btn > svg,
.app-action-menu__trigger .app-icon{
  display:block;
  width:20px;
  height:20px;
  vertical-align:0;
  flex-shrink:0;
}
.app-page-title .app-icon,
.report-page-title .app-icon{
  display:none;
}

@media(max-width:768px){
  .app-page,
  .report-page{
    padding:16px 12px 72px;
  }
  .app-page-header,
  .report-page-header{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .app-page-actions,
  .report-page-actions{
    justify-content:flex-start;
    width:100%;
  }
  .app-page-title,
  .report-page-title{
    font-size:24px;
  }
}

@media(max-width:430px){
  .app-page-actions .btn,
  .report-page-actions .btn{
    min-height:44px;
  }
  .report-page-actions .mh-icon-btn,
  .report-page .row-actions .btn-sm{
    min-width:44px;
    min-height:44px;
  }
  .report-page-actions .mh-icon-btn{
    padding:0;
  }
  .app-icon-button{
    min-width:44px;
    min-height:44px;
  }
  .app-action-menu__panel{
    right:auto;
    left:0;
    max-width:calc(100vw - 24px);
  }
}

/* ════════════════════════════════════════════════════════════════════
   APP FOOTER — minimal legal links
   Verschoben aus _20-dashboard.css (PR-S1.2, 2026-05-24).
   Quelle bei Schreibung dieses Headers: _20-dashboard.css Z. 1549–1560.
   Plan: docs/architecture/2026-05-16-dashboard-css-split-plan.md
   ════════════════════════════════════════════════════════════════════ */
/* ─── App Footer (minimal legal links) ─────────────────────────────── */
.app-footer{margin-top:32px;padding:16px 0 48px;border-top:1px solid rgba(42,51,84,.35);display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);font-size:12px;color:var(--text3);user-select:none;}
.app-footer a{color:var(--text3);text-decoration:none;transition:color .15s;}
.app-footer a:hover{color:var(--text);}
.app-footer-links{display:flex;gap:6px;flex-wrap:wrap;}
.app-footer-sep{opacity:.4;}
.app-footer-version{font-size:var(--fs-sm);opacity:.5;font-family:var(--mono);}
@media(max-width:768px){
  .app-footer{flex-direction:column;align-items:center;text-align:center;gap:var(--space-sm);}
  .inv3-form-page + .app-footer{padding-bottom:calc(48px + var(--inv3-mobile-bar-offset,142px) + env(safe-area-inset-bottom,0px));}
}
body.light .app-footer{border-top-color:rgba(26,30,46,.1);}

/* ═══════════════════════════════════════════════════════════════════════════
   IMPORT VIEW
   ═══════════════════════════════════════════════════════════════════════════ */
.import-view{--import-upload-width:min(100%,960px);max-width:var(--app-page-max-width-wide,1220px);margin:0 auto;padding:var(--app-page-pad-top,20px) var(--app-page-pad-x,16px) var(--app-page-pad-bottom,80px);}
.import-page-header{margin-bottom:16px;}
/* ── Locked / Upgrade Card (reusable) ── */
.locked-card{display:flex;align-items:flex-start;gap:20px;background:var(--card);border:1px solid var(--border2);border-radius:12px;padding:28px 32px;margin-top:28px;max-width:520px;margin-left:auto;margin-right:auto;}
.locked-card-icon{font-size:var(--fs-hero);flex-shrink:0;line-height:1;margin-top:2px;}
.locked-card-title{font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--text);margin-bottom:6px;}
.locked-card-text{font-size:var(--fs-base);color:var(--text2);line-height:1.6;margin-bottom:16px;}
.locked-card-cta{font-size:var(--fs-base);padding:9px 24px;}
@media(max-width:480px){.locked-card{flex-direction:column;align-items:center;text-align:center;padding:24px 20px;gap:var(--space-md);}.locked-card-icon{margin-top:0;}}
/* ── Import Hub Grid ── */
.import-hub-grid{display:grid;grid-template-columns:1fr;gap:var(--space-lg);margin-top:20px;align-items:stretch;max-width:var(--import-upload-width);}
.import-hub-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;display:flex;flex-direction:column;}
.import-hub-card-header{display:flex;align-items:flex-start;gap:var(--space-md);margin-bottom:16px;color:var(--text2);}
.import-hub-card-title{font-size:14px;font-weight:var(--fw-semibold);color:var(--text);margin-bottom:2px;}
.import-hub-card-sub{font-size:11.5px;color:var(--text3);line-height:1.4;}
@media(max-width:680px){.import-hub-grid{grid-template-columns:1fr;}}
/* ── Upload family (shared base for Belege + Import) ── */
.upload-icon-box{width:44px;height:44px;border-radius:12px;background:rgba(232,184,75,.06);border:1px solid rgba(232,184,75,.15);display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0;transition:border-color .25s,background .25s,color .25s;}
.import-drop-zone:hover .upload-icon-box,.import-drop-zone.drag-over .upload-icon-box{border-color:rgba(232,184,75,.3);background:rgba(232,184,75,.06);color:var(--accent);}
/* ── Drop zone (shared upload family) ── */
.import-drop-zone{background:var(--bg2);border:1px dashed rgba(var(--surface-rgba-base),.08);border-radius:var(--radius-lg);padding:32px 20px;text-align:center;transition:border-color .25s,background .25s,box-shadow .25s;cursor:pointer;margin:0;box-shadow:0 1px 2px rgba(0,0,0,.06);min-height:300px;display:flex;align-items:center;justify-content:center;}
.import-drop-zone:hover{border-color:rgba(232,184,75,.4);background:rgba(232,184,75,.03);box-shadow:0 2px 12px rgba(232,184,75,.06),0 0 0 1px rgba(232,184,75,.12);}
.import-drop-zone.drag-over{border-color:var(--accent);background:rgba(232,184,75,.06);border-style:solid;box-shadow:0 4px 20px rgba(232,184,75,.1),0 0 0 2px rgba(232,184,75,.2);}
.import-drop-zone.is-processing{cursor:wait;border-style:solid;border-color:rgba(232,184,75,.22);background:linear-gradient(135deg,rgba(232,184,75,.055),rgba(96,165,250,.04) 48%,rgba(34,197,94,.045));box-shadow:0 14px 36px rgba(0,0,0,.18),0 0 0 1px rgba(232,184,75,.08);}
.import-drop-content{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;}
.import-drop-text{font-size:12.5px;color:var(--text2);}
.import-drop-hint{font-size:10.5px;color:var(--text3);}
/* Sentence-Case-Button wie "Dateien wählen" (Belege) statt Uppercase — das
   Element ist ein <label>, der globale label{text-transform:uppercase}
   (_10-shell.css, Formularfeld-Labels) uppercased es sonst zu "DATEI
   WÄHLEN" (P2 #17, Review-Fund "Button-Casing"). */
.import-file-label{cursor:pointer;text-transform:none;letter-spacing:normal;}
.import-banks-hint{font-size:10.5px;color:var(--text3);text-align:center;margin-top:10px;}
.import-error{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.22);color:var(--red);padding:10px 14px;border-radius:8px;font-size:var(--fs-base);line-height:1.45;margin-top:12px;max-width:var(--import-upload-width);box-sizing:border-box;}
body.light .import-error{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.26);color:var(--red);}
/* .import-spinner war Legacy (Ring-Spinner ohne aktive Call-Site) — entfernt.
   Bei Bedarf hier `<svg class="tx-loading-spinner"…>` inline rendern. */
.import-analysis{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,330px);gap:24px;align-items:center;text-align:left;}
.import-analysis-copy{min-width:0;}
.import-analysis-kicker{font-size:10.5px;font-weight:var(--fw-bold);color:var(--accent);text-transform:uppercase;letter-spacing:0;margin-bottom:6px;}
.import-analysis-title{font-size:18px;font-weight:var(--fw-bold);color:var(--text);line-height:1.2;margin-bottom:12px;}
.import-analysis-file{display:flex;align-items:center;gap:9px;min-width:0;color:var(--text2);font-size:12.5px;margin-bottom:10px;}
.import-analysis-file-icon{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(232,184,75,.09);border:1px solid rgba(232,184,75,.18);color:var(--accent);flex-shrink:0;}
.import-analysis-file-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.import-analysis-chips{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:16px;}
.import-analysis-chips span{display:inline-flex;align-items:center;border:1px solid rgba(var(--surface-rgba-base),.1);background:rgba(var(--surface-rgba-base),.045);border-radius:8px;padding:4px 8px;font-size:10.5px;color:var(--text3);line-height:1;}
.import-analysis-steps{display:grid;gap:9px;margin:0 0 13px;}
.import-analysis-step{display:grid;grid-template-columns:16px minmax(0,1fr);gap:8px;align-items:center;color:var(--text3);font-size:11.5px;}
.import-analysis-step span{width:8px;height:8px;border-radius:50%;background:rgba(var(--surface-rgba-base),.18);box-shadow:0 0 0 4px rgba(var(--surface-rgba-base),.04);justify-self:center;}
.import-analysis-step strong{font-weight:var(--fw-medium);min-width:0;}
.import-analysis-step.is-done{color:var(--text2);}
.import-analysis-step.is-done span{background:var(--green);box-shadow:0 0 0 4px rgba(34,197,94,.1);}
.import-analysis-step.is-active{color:var(--text);}
.import-analysis-step.is-active span{background:var(--accent);box-shadow:0 0 0 4px rgba(232,184,75,.12);animation:importAnalysisPulse 1.8s ease-in-out infinite;}
.import-analysis-note{font-size:11.5px;color:var(--text3);line-height:1.45;max-width:520px;}
/* Sweep CC: hardcoded RGBAs zu --analysis-skeleton-* Tokens migriert. body.light
   Overrides leben in _10-shell.css. Vorher blieb der Doc-Block dunkel im Light-Mode. */
.import-analysis-panel{position:relative;min-height:210px;border:1px solid rgba(var(--surface-rgba-base),.09);border-radius:8px;background:var(--analysis-skeleton-panel-bg);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.import-analysis-panel:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(232,184,75,.07),transparent 36%,rgba(34,197,94,.06));opacity:.8;}
.import-analysis-doc{position:relative;width:min(78%,235px);height:156px;border:1px solid rgba(var(--surface-rgba-base),.14);border-radius:8px;background:var(--analysis-skeleton-doc-bg);box-shadow:0 18px 40px rgba(0,0,0,.25);overflow:hidden;padding:17px 15px;}
body.light .import-analysis-doc{box-shadow:0 12px 24px rgba(15,23,42,.10);border-color:rgba(15,23,42,.10);}
.import-analysis-doc-head{display:flex;gap:6px;margin-bottom:18px;}
.import-analysis-doc-head span{height:7px;border-radius:8px;background:rgba(232,184,75,.24);}
.import-analysis-doc-head span:nth-child(1){width:42px;}
.import-analysis-doc-head span:nth-child(2){width:26px;background:rgba(96,165,250,.18);}
.import-analysis-doc-head span:nth-child(3){width:34px;background:rgba(34,197,94,.16);}
.import-analysis-scan-line{position:absolute;left:12px;right:12px;top:18px;height:2px;border-radius:8px;background:linear-gradient(90deg,transparent,rgba(232,184,75,.88),rgba(96,165,250,.55),transparent);box-shadow:0 0 16px rgba(232,184,75,.34);animation:importAnalysisScan 2.45s ease-in-out infinite;}
.import-analysis-row{height:10px;border-radius:8px;background:var(--analysis-skeleton-row-bg);margin-bottom:11px;position:relative;overflow:hidden;}
.import-analysis-row:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--analysis-skeleton-row-shimmer),transparent);transform:translateX(-100%);animation:importAnalysisShimmer 2.1s ease-in-out infinite;}
.import-analysis-row-wide{width:92%;}
.import-analysis-row:not(.import-analysis-row-wide):not(.import-analysis-row-short){width:74%;}
.import-analysis-row-short{width:54%;}
.import-analysis-ledger{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin-top:16px;}
.import-analysis-ledger i{height:32px;border-radius:8px;border:1px solid var(--analysis-skeleton-ledger-border);background:var(--analysis-skeleton-ledger-bg);}
@keyframes importAnalysisPulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.18);opacity:.72;}}
@keyframes importAnalysisScan{0%,100%{transform:translateY(0);opacity:.35;}50%{transform:translateY(112px);opacity:.9;}}
@keyframes importAnalysisShimmer{0%{transform:translateX(-110%);}55%,100%{transform:translateX(110%);}}
@media(max-width:760px){
  .import-view{--import-upload-width:100%;padding-left:14px;padding-right:14px;}
  .import-drop-zone{min-height:280px;padding:24px 16px;}
  .import-analysis{grid-template-columns:1fr;gap:18px;}
  .import-analysis-panel{min-height:180px;order:-1;}
  .import-analysis-title{font-size:16px;}
}
@media(prefers-reduced-motion:reduce){
  .import-analysis-step.is-active span,.import-analysis-scan-line,.import-analysis-row:after{animation:none;}
  .import-drop-zone,.import-drop-zone:hover,.import-drop-zone.drag-over{transition:none;}
}
/* ── Import Header (redesigned) ──────────────────────────────────────── */
.import-header{background:var(--card-bg,var(--bg2));border:1px solid var(--border);border-radius:12px;padding:22px 26px;margin-bottom:16px;}
.import-header-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-md);margin-bottom:18px;}
.import-back-link{background:none;border:none;color:var(--text3);font-size:12px;cursor:pointer;padding:2px 0;transition:color .15s;}
.import-back-link:hover{color:var(--accent);}
.import-header-source{text-align:right;}
.import-header-bank{font-size:16px;font-weight:var(--fw-bold);color:var(--text);}
.import-header-meta{font-size:var(--fs-sm);color:var(--text3);margin-top:3px;}
.import-header-kpis{display:flex;gap:28px;flex-wrap:wrap;margin-bottom:14px;}
.import-kpi{min-width:0;}
.import-kpi-value{font-size:16px;font-weight:var(--fw-bold);font-family:var(--mono);color:var(--text);}
.import-kpi-label{font-size:9.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;margin-top:3px;}
.import-header-badges{display:flex;gap:7px;flex-wrap:wrap;}
/* Fokus 2: Badges kompakter — gleiche Sprache wie Filter-Tabs */
.import-badge{display:inline-flex;align-items:center;gap:var(--space-xs);padding:4px 11px;border-radius:var(--radius-sm);font-size:var(--fs-sm);font-weight:var(--fw-medium);line-height:1;}
.import-badge-ok{background:rgba(34,197,94,.1);color:var(--green);}
.import-badge-warn{background:rgba(234,179,8,.1);color:var(--accent);}
.import-badge-dup{background:rgba(236,72,153,.1);color:var(--purple);}
.import-badge-info{background:rgba(99,102,241,.1);color:var(--blue);}
/* Fokus 2: Warnleisten kompakter — inline statt breite Banner */
.import-warning{background:rgba(234,179,8,.05);border:1px solid rgba(234,179,8,.12);color:var(--accent);padding:7px 14px;border-radius:8px;font-size:11.5px;margin-bottom:6px;line-height:1.4;}

/* ── Filter Bar ──────────────────────────────────────────────────────── */
.import-filter-bar{display:flex;align-items:center;gap:7px;margin-bottom:14px;flex-wrap:wrap;}
/* Desktop: .import-filter-tabs ist transparent (display:contents) — Pills bleiben
   direkte Flex-Children der .import-filter-bar, damit margin-left:auto auf
   .import-filter-actions weiterhin den Bulk-Actions-Block nach rechts schiebt.
   Mobile-Override unten macht daraus einen eigenen Scroll-Container. */
.import-filter-tabs{display:contents;}
.import-filter-tab{background:none;border:1px solid var(--border);border-radius:8px;padding:6px 14px;font-size:11.5px;color:var(--text2);cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:5px;}
.import-filter-tab:hover{border-color:var(--accent);color:var(--text);}
.import-filter-tab.active{background:var(--accent);color:var(--bg);border-color:var(--accent);font-weight:var(--fw-semibold);}
.import-filter-count{font-size:var(--fs-xs);opacity:.65;font-weight:var(--fw-semibold);}
.import-filter-actions{margin-left:auto;display:flex;gap:5px;}
.import-filter-actions .btn-sm{font-size:10.5px;padding:4px 10px;}

/* ── Table ───────────────────────────────────────────────────────────── */
.import-table-wrapper{overflow-x:auto;margin-bottom:16px;}
.import-table{width:100%;border-collapse:collapse;font-size:12.5px;}
/* Fokus 3: Mehr Luft — padding erhoeht, Zeilen atmen */
.import-table th{text-align:left;padding:10px 12px;font-size:var(--fs-xs);color:var(--text3);border-bottom:2px solid var(--border);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.5px;}
.import-table td{padding:10px 12px;border-bottom:1px solid rgba(var(--border-rgb,100,100,100),.2);}
/* Fokus 1: Checkbox + Status Spalte breiter fuer bessere Bedienbarkeit */
.import-th-cb{width:36px;}.import-th-status{width:36px;}
.import-td-cb{width:36px;text-align:center;vertical-align:middle;}
.import-td-status{width:36px;text-align:center;vertical-align:middle;}
/* Fokus 1: Checkboxen groesser */
.import-td-cb input[type="checkbox"]{width:16px;height:16px;cursor:pointer;accent-color:var(--accent);}

/* Row states — subtle left-border accent, no opacity change for readability */
.import-row{transition:background .1s;}
.import-row:hover{background:rgba(var(--accent-rgb,232,184,75),.03);}
.import-row-ok{}
.import-row-warn{border-left:3px solid rgba(234,179,8,.5);}
.import-row-dup{border-left:3px solid rgba(236,72,153,.4);}
.import-row-err{border-left:3px solid rgba(239,68,68,.5);opacity:.55;}

/* Fokus 4: Status-Dots groesser, selbsterklaerend, Tooltip per title-Attribut */
.import-status-dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:var(--fs-xs);font-weight:var(--fw-bold);flex-shrink:0;}
.import-dot-ok{background:rgba(34,197,94,.12);color:var(--green);}
.import-dot-warn{background:rgba(234,179,8,.15);color:var(--accent);}
.import-warn-btn{border:none;cursor:pointer;background:rgba(234,179,8,.15);padding:0;position:relative;}
.import-warn-count{font-size:9px;font-weight:700;margin-left:2px;line-height:1;}
.import-dot-dup{background:rgba(236,72,153,.12);color:var(--purple);font-size:9px;}
.import-dot-err{background:rgba(239,68,68,.15);color:var(--red);}

.import-date{white-space:nowrap;font-family:var(--mono);font-size:var(--fs-sm);color:var(--text2);}
.import-payee{max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.import-row-reason{margin-top:4px;font-size:10.5px;line-height:1.35;color:var(--text3);white-space:normal;}
/* Bug triage TT-20260420-3B79D519 — show warning/error text inline so users
   on touch devices (no hover, no title-attr) can see what's wrong without
   having to tap a 22x22 status indicator below the 44x44 touch-target threshold. */
/* Bug B28 — Duplikat-/Warn-Hinweis als eigener Block mit Border + Background,
   damit er sich vom Buchungstext absetzt statt visuell hineinzulaufen. */
/* Row-level problem note. Redesigned 2026-07: dropped the left accent bar
   (the "AI-slop" marker retired from the hint boxes) for a flat, quiet card —
   a full soft border all around, neutral body text, and the ⚠ icon as the ONLY
   colour accent (it carries the warn/err meaning). Uses the semantic tone-*
   tokens so it stays correct in light + dark without per-mode overrides. */
.import-row-problem{
  display:flex;
  align-items:flex-start;
  gap:7px;
  margin-top:6px;
  padding:7px 10px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--bg2);
  font-size:11px;
  line-height:1.4;
  font-weight:var(--fw-medium);
  color:var(--text2);
  white-space:normal;
  word-break:break-word;
}
/* ⚠ icon rendered as a flex child (was a ::before glyph glued to the text) so it
   stays put on the first line and can carry the status colour on its own. */
.import-row-problem::before{
  content:"\26A0";
  flex:0 0 auto;
  font-weight:normal;
  line-height:1.3;
  color:var(--text3);
}
.import-row-problem[data-status="warn"]{
  border-color:var(--tone-warn-border);
  background:var(--tone-warn-bg);
}
.import-row-problem[data-status="warn"]::before{color:var(--tone-warn-fg);}
.import-row-problem[data-status="err"]{
  border-color:var(--red-soft);
  background:var(--red-soft);
}
.import-row-problem[data-status="err"]::before{color:var(--red);}
.import-amount{white-space:nowrap;font-family:var(--mono);font-weight:var(--fw-semibold);}
.import-edit{width:100%;min-height:32px;border:1px solid transparent;border-radius:6px;background:transparent;color:inherit;font:inherit;padding:4px 6px;transition:border-color .15s,background .15s;}
.import-edit:hover,.import-edit:focus{border-color:var(--border);background:var(--bg);}
.import-edit:focus{outline:none;border-color:var(--accent);}
.import-edit-date{min-width:100px;font-family:var(--mono);}
.import-date-wrap{display:flex;align-items:center;gap:2px;}
.import-date-pick{flex-shrink:0;background:none;border:1px solid transparent;border-radius:4px;color:var(--text3);cursor:pointer;padding:4px 5px;line-height:0;transition:color .15s,border-color .15s;}
.import-date-pick:hover{color:var(--text);border-color:var(--border);}
.import-edit-text{min-width:220px;max-width:320px;}
.import-edit-amount{min-width:110px;text-align:right;font-family:var(--mono);font-weight:var(--fw-semibold);}
.text-expense{color:var(--red);}
.text-income{color:var(--green);}
.import-tax{font-size:var(--fs-sm);color:var(--text3);white-space:nowrap;}
.import-cat-select{font-size:var(--fs-sm);padding:4px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);max-width:170px;color:var(--text);transition:border-color .15s;}
.import-cat-select:focus{border-color:var(--accent);outline:none;}
.import-cat-empty{border-color:rgba(234,179,8,.35);color:var(--text3);border-style:dashed;}

/* ── Fokus 5: Confirm Footer (sticky within import flow; never covers legal footer) ─ */
/* Bug triage TT-20260420-3B79D519 — sticky bar must respect iOS home-indicator
   safe area (env(safe-area-inset-bottom)). Without this, on iPhones with the
   home indicator the buttons land underneath it and look "übereinander" /
   unreachable. Pattern matches .modal-error-banner (line ~1982) which already
   uses the same env() trick. */
.import-confirm-bar{position:sticky;bottom:0;background:var(--bg);border:1px solid var(--border);border-top:2px solid var(--border);border-radius:12px 12px 0 0;padding:16px 24px;padding-bottom:max(16px, calc(16px + env(safe-area-inset-bottom, 0px)));display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);z-index:20;max-width:960px;margin:16px auto 0;box-shadow:0 -4px 16px rgba(0,0,0,.15);}
.import-confirm-left{display:flex;flex-direction:column;gap:3px;}
.import-confirm-count{font-size:14px;color:var(--text);font-weight:var(--fw-semibold);}
.import-confirm-note{font-size:var(--fs-sm);color:var(--text3);}
.import-confirm-note-detail{max-width:560px;line-height:1.35;}
.import-confirm-hint{font-size:var(--fs-sm);color:var(--accent);margin-top:2px;}
/* Bug B09c — Buttons gleich hoch + Pfeil bricht nicht um. */
.import-confirm-actions{display:flex;align-items:stretch;gap:8px;flex-shrink:0;}
.import-confirm-actions > .btn,
.import-confirm-actions .import-confirm-btn,
.import-confirm-actions .import-confirm-cancel{
  min-height:44px;
  min-width:180px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}
/* Fokus 5: CTA Button staerker — groesser, praesenter */
.import-confirm-btn{min-width:240px;text-align:center;font-size:14px;padding:12px 24px;font-weight:var(--fw-bold);border-radius:var(--radius-md);letter-spacing:-.2px;white-space:nowrap;}
.import-confirm-btn:not(:disabled){box-shadow:0 2px 8px rgba(232,184,75,.25);}
/* Bug B09b — Disabled-State sichtbar (vorher: nur opacity, auf dunkler Card unsichtbar). */
.import-confirm-btn:disabled,
.import-confirm-btn[disabled]{
  background:var(--bg2);
  color:var(--text3);
  border:1px solid var(--border);
  opacity:1;
  cursor:not-allowed;
  box-shadow:none;
}
body.light .import-confirm-btn:disabled,
body.light .import-confirm-btn[disabled]{
  background:var(--bg2);
  color:var(--text3);
  border:1px solid var(--border);
}
/* Bug B09-Wall — Details/Summary für lange "Nicht gezählt"-Texte. */
.import-confirm-note-details > summary{cursor:pointer;color:var(--text2);list-style:none;padding:4px 0;}
.import-confirm-note-details > summary::-webkit-details-marker{display:none;}
.import-confirm-note-details > summary::before{content:'\25B8  ';display:inline-block;transition:transform .15s;}
.import-confirm-note-details[open] > summary::before{transform:rotate(90deg);}
.import-confirm-note-details[open] > * + *{margin-top:6px;}
@media(max-width:540px){
  .import-confirm-bar{flex-direction:column;align-items:stretch;gap:8px;padding:12px 16px;padding-bottom:max(12px, calc(12px + env(safe-area-inset-bottom, 0px)));}
  .import-confirm-left{width:100%;order:0;}
}
.import-errors-details{margin:12px 0;font-size:12px;}
.import-errors-details summary{cursor:pointer;color:var(--text3);font-size:var(--fs-sm);}
.import-error-list{margin:8px 0;padding-left:20px;font-size:var(--fs-sm);color:var(--text3);}
.import-error-list li{margin:2px 0;}
.import-result{text-align:center;padding:60px 20px;}
.import-result-icon{width:52px;height:52px;margin:0 auto 16px;color:var(--green);display:flex;align-items:center;justify-content:center;}
.import-result-icon svg{width:100%;height:100%;display:block;}
.import-result h2{margin-bottom:12px;}
.import-result-details{font-size:var(--fs-base);color:var(--text2);margin-bottom:24px;line-height:1.8;}
.import-result-actions{display:flex;gap:var(--space-md);justify-content:center;}
.import-history{margin-top:24px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.import-history-details{font-size:12px;color:var(--text3);}
.import-history-summary{cursor:pointer;font-size:var(--fs-sm);color:var(--text3);padding:4px 0;}
.import-history-summary:hover{color:var(--text2);}
.import-history-table{width:100%;border-collapse:collapse;margin-top:8px;font-size:var(--fs-sm);min-width:420px;}
.import-history-table th,.import-history-table td{text-align:left;padding:4px 8px;vertical-align:middle;}
.import-history-table th{font-weight:var(--fw-medium);color:var(--text3);border-bottom:1px solid var(--border);text-transform:uppercase;font-size:var(--fs-xs);letter-spacing:0.3px;}
.import-history-table td{border-bottom:1px solid var(--border-light,var(--border));color:var(--text2);}
.import-history-date{white-space:nowrap;}
.import-history-file{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.import-history-range{color:var(--text3);font-size:var(--fs-xs);}

/* ═══════════════════════════════════════════════════════════════════════════
   ROLE-BASED UI GATING
   body.not-admin: member + viewer (no admin/owner rights)
   body.role-viewer: read-only (no mutations at all)

   Member CAN: create/edit/delete bookings, upload belege
   Member CANNOT: lock months, change settings, manage KI
   Viewer CANNOT: any mutations
   ═══════════════════════════════════════════════════════════════════════════ */
/* Admin-only actions: lock month (not bookings, not uploads) */
body.not-admin .mh-lock-btn{
  opacity:.35;pointer-events:none;cursor:not-allowed;
}
/* Viewer: all mutations disabled (read-only everything) */
body.role-viewer .btn-p,
body.role-viewer .btn-ok,
body.role-viewer .mh-lock-btn,
body.role-viewer .mh-primary,
body.role-viewer [data-action="openTxM"],
body.role-viewer [data-action="importCSV"],
body.role-viewer [data-action="showImportHub"],
body.role-viewer [data-action="saveSt"]{
  opacity:.35;pointer-events:none;cursor:not-allowed;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SWEEP CC (2026-05-06) — Mobile-Card-Layout + MwSt-Edit-Pille + Picker-Sheet
   Plan: docs/architecture/2026-05-06-import-mobile-redesign-plan.md
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 16% / 5% Corona-2020-Sätze (Plan Spec 2 — fehlten bisher im CSS) ───── */
.badge.b16{background-color:rgba(168,85,247,.12);color:rgba(192,132,252,1);border-color:rgba(168,85,247,.28);}
.badge.b5 {background-color:rgba(244,114,182,.12);color:rgba(244,114,182,1);border-color:rgba(244,114,182,.28);}
body.light .badge.b16{color:rgba(126,34,206,1);}
body.light .badge.b5 {color:rgba(219,39,119,1);}

/* ── MwSt-Edit-Pille (Desktop <select>-as-pill, Plan Spec 2) ───────────── */
.import-vat-select{
  appearance:none;-webkit-appearance:none;
  border:1px solid var(--border2);
  padding:3px 18px 3px 10px;border-radius:9px;
  font-size:11px;font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums;
  background-color:var(--bg3);color:var(--text2);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' stroke='%23808080' stroke-width='1.5' fill='none'/></svg>");
  background-repeat:no-repeat;background-position:right 6px center;
  cursor:pointer;
  font-family:inherit;
}
.import-vat-select.b19{background-color:rgba(96,165,250,.12);color:var(--blue);border-color:rgba(96,165,250,.28);}
.import-vat-select.b7 {background-color:rgba(52,211,153,.10);color:var(--green);border-color:rgba(52,211,153,.26);}
.import-vat-select.b0 {background-color:var(--bg3);color:var(--text3);}
.import-vat-select.b16{background-color:rgba(168,85,247,.12);color:rgba(192,132,252,1);border-color:rgba(168,85,247,.28);}
.import-vat-select.b5 {background-color:rgba(244,114,182,.12);color:rgba(244,114,182,1);border-color:rgba(244,114,182,.28);}
.import-vat-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(232,184,75,.18);}
/* Privat-Lock: Pille wird als nicht-editierbares Span gerendert (Plan Spec 2 Domain-Lock) */
.import-vat-pill.is-disabled{
  display:inline-block;padding:3px 10px;border-radius:9px;
  font-size:11px;font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums;
  background:var(--bg3);color:var(--text3);border:1px dashed var(--border2);
  cursor:not-allowed;
}

/* ── Mobile Card-Layout (<640px) — Plan Spec 1 ─────────────────────────── */
.imp-card-list{display:none;padding:0 0 100px;}
.imp-card{
  display:grid;grid-template-columns:auto 1fr;gap:10px;column-gap:12px;
  padding:11px 12px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);margin:8px 12px;
  transition:border-color .15s,background .15s;
  cursor:pointer; /* Tap-to-Edit signal */
}
.imp-card:hover{border-color:rgba(232,184,75,.32);}
.imp-card.is-selected{border-color:rgba(232,184,75,.45);background:rgba(232,184,75,.03);}
.imp-card.is-duplicate{opacity:.7;}
.imp-card.is-error{opacity:.55;border-left:3px solid var(--red);cursor:not-allowed;}
.imp-card-cb{align-self:start;padding-top:2px;}
.imp-card-cb input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:999px;
  border:1.5px solid var(--border2);background:var(--bg2);position:relative;cursor:pointer;box-sizing:border-box;padding:0;flex-shrink:0;margin:0;
}
.imp-card-cb input[type="checkbox"]:checked{background:var(--accent);border-color:var(--accent);}
.imp-card-cb input[type="checkbox"]:checked::after{
  content:"";position:absolute;left:50%;top:50%;width:5px;height:10px;
  border:2px solid var(--accent-ink);border-top:0;border-left:0;
  transform:translate(-50%,-62%) rotate(45deg);
}
.imp-card-body{min-width:0;} /* Sweep-V Overflow-Guard */
.imp-card-row1{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:4px;}
.imp-card-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--text2);font-family:var(--mono);}
.imp-card-amount{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:var(--fw-semibold);white-space:nowrap;font-size:14px;}
.imp-card-amount.text-income{color:var(--green);}
.imp-card-amount.text-expense{color:var(--red);}
.imp-card-text{font-size:13.5px;font-weight:500;color:var(--text);line-height:1.35;margin:0 0 8px;word-break:break-word;}
.imp-card-pills{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
/* Pillen in der Card: 32px hoch + 6px y-padding = 44px tap-target */
.imp-card-pills .imp-cat-pill,
.imp-card-pills .vat-pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:6px 10px;border-radius:9px;
  font-size:11.5px;font-weight:var(--fw-medium);
  background:var(--bg3);color:var(--text2);border:1px solid var(--border2);
  cursor:pointer;font-family:inherit;min-height:32px;
  font-variant-numeric:tabular-nums;
}
.imp-card-pills .imp-cat-pill svg,
.imp-card-pills .vat-pill svg{width:9px;height:9px;flex-shrink:0;opacity:.6;}
.imp-card-pills .imp-cat-pill.is-empty{
  border-style:dashed;border-color:rgba(232,184,75,.4);color:var(--accent);background:rgba(232,184,75,.06);
}
.imp-card-pills .imp-cat-pill{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.imp-card-pills .vat-pill.b19{background-color:rgba(96,165,250,.12);color:var(--blue);border-color:rgba(96,165,250,.28);}
.imp-card-pills .vat-pill.b7 {background-color:rgba(52,211,153,.10);color:var(--green);border-color:rgba(52,211,153,.26);}
.imp-card-pills .vat-pill.b0 {background-color:var(--bg3);color:var(--text3);}
.imp-card-pills .vat-pill.b16{background-color:rgba(168,85,247,.12);color:rgba(192,132,252,1);border-color:rgba(168,85,247,.28);}
.imp-card-pills .vat-pill.b5 {background-color:rgba(244,114,182,.12);color:rgba(244,114,182,1);border-color:rgba(244,114,182,.28);}
.imp-card-pills .vat-pill.is-disabled{cursor:not-allowed;opacity:.7;}

/* Status-Chips in Mobile-Card (Plan Spec 1) */
.imp-card-row1 .row-chip{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:9px;font-size:10px;font-weight:600;line-height:1.4;}
.imp-card-row1 .row-chip svg{width:9px;height:9px;}
.imp-card-row1 .row-chip.warn{background:rgba(232,184,75,.12);color:var(--accent);border:1px solid rgba(232,184,75,.28);}
.imp-card-row1 .row-chip.dup{background:rgba(236,72,153,.12);color:rgba(236,72,153,1);border:1px solid rgba(236,72,153,.28);}
.imp-card-row1 .row-chip.err{background:rgba(248,113,113,.12);color:var(--red);border:1px solid rgba(248,113,113,.28);}
.imp-card-row1 .row-chip.miss-cat{background:rgba(232,184,75,.10);color:var(--accent);border:1px dashed rgba(232,184,75,.4);}

/* Inline-Reason in Mobile-Card */
/* Mobile-card twin of .import-row-problem — same 2026-07 redesign: neutral body
   text, the ⚠ icon is the only colour accent (no full-width amber text). */
.imp-card-problem{display:flex;align-items:flex-start;gap:7px;margin-top:4px;font-size:11px;line-height:1.4;font-weight:var(--fw-medium);color:var(--text2);white-space:normal;word-break:break-word;}
.imp-card-problem::before{content:"\26A0";flex:0 0 auto;font-weight:normal;line-height:1.3;color:var(--text3);}
.imp-card-problem[data-status="warn"]::before{color:var(--tone-warn-fg);}
.imp-card-problem[data-status="err"]::before{color:var(--red);}

/* ── Mobile Filter-Bar — Plan Spec 1 ───────────────────────────────────── */
.imp-segment{display:none;background:var(--card);border-radius:8px;padding:3px;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.imp-segment::-webkit-scrollbar{display:none;}
.imp-segment .imp-seg-btn{
  flex:0 0 auto;background:transparent;border:none;color:var(--text2);
  padding:6px 12px;font-size:11.5px;border-radius:6px;cursor:pointer;
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font-weight:var(--fw-medium);
  min-height:32px;font-family:inherit;
}
.imp-segment .imp-seg-btn.active{background:var(--accent);color:var(--accent-ink);font-weight:var(--fw-semibold);}
.imp-segment .imp-seg-count{font-size:10px;background:rgba(0,0,0,.18);padding:1px 5px;border-radius:6px;font-weight:var(--fw-semibold);}
.imp-segment .imp-seg-btn:not(.active) .imp-seg-count{background:var(--bg3);color:var(--text3);}

/* ──────────────────────────────────────────────────────────────────────
   Mobile Mockup-C-Alignment (Sweep CC Follow-up, 2026-05-07)

   Ziel: Mobile-Header/Summary/Filter/Bulk werden kompakt nach Variante C
   (mobile-variants-compare.html). Vorherige Sweep-CC-Mobile-Override hat
   Filter-Bar zu `flex-direction:column` umgebaut — falsch, das machte aus
   horizontalen Pills vertikale Full-width-Zeilen. Korrektur unten.

   Desktop (≥640px) bleibt unveraendert via @media(min-width:640px) Guard.
   ────────────────────────────────────────────────────────────────────── */
@media(max-width:639px){
  /* Tabelle aus, Card-Liste an */
  .import-table-wrapper{display:none;}
  .imp-card-list{display:block;}

  /* Import-Header kompakter — weniger Padding, klare Hierarchie */
  .import-header{padding:14px 12px 10px;margin-bottom:8px;}
  .import-header-top{margin-bottom:10px;}
  .import-header-bank{font-size:18px;}
  .import-header-meta{font-size:11px;margin-top:2px;}

  /* KPIs: 2x2 Grid mit echten Cards (Border + Padding statt nur Typo) */
  .import-header-kpis{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:10px;
  }
  .import-kpi{
    padding:9px 12px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    min-width:0;
  }
  .import-kpi-value{
    font-size:14px;
    font-weight:var(--fw-bold);
    font-family:var(--mono);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .import-kpi-label{
    font-size:9px;
    margin-top:2px;
  }
  .import-header-badges{margin-top:2px;}
  .import-badge{font-size:11px;padding:3px 9px;}

  /* Warnungen kompakter — Padding reduziert; dritter "Bitte jede Zeile pruefen"-
     Banner wird in import.js Mobile-Branch nicht gerendert (User-Decision 2). */
  .import-warning{padding:7px 11px;font-size:11.5px;margin-bottom:5px;}

  /* Filter-Bar: zwei Reihen — oben horizontal scrollbare Pills,
     drunter eigene Reihe fuer Bulk-Aktionen.
     Pills duerfen ueber den Bildschirmrand scrollen, Bulk-Aktionen NICHT
     (deshalb eigener Container, kein gemeinsames overflow-x:auto). */
  .import-filter-bar{
    flex-direction:column;
    align-items:stretch;
    flex-wrap:nowrap;
    gap:8px;
    margin-bottom:8px;
  }
  .import-filter-tabs{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:6px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin:0 -12px;
    padding:0 12px 4px;
  }
  .import-filter-tabs::-webkit-scrollbar{display:none;}
  .import-filter-tab{
    flex:0 0 auto;
    padding:5px 12px;
    font-size:11.5px;
    min-height:32px;
    white-space:nowrap;
  }

  /* Bulk-Aktionen: eigene Reihe unter den Pills, im Viewport begrenzt */
  .import-filter-actions{
    margin-left:0;
    margin-top:0;
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    align-items:center;
  }
  .import-filter-actions .btn-sm{
    flex:0 1 auto;
    font-size:10.5px;
    padding:5px 10px;
    min-height:30px;
  }

  /* Sticky Footer kompakter — weniger Padding, kleinerer CTA */
  .import-confirm-bar{
    padding:10px 14px;
    padding-bottom:max(10px, calc(10px + env(safe-area-inset-bottom, 0px)));
    gap:8px;
    margin-top:8px;
  }
  .import-confirm-count{font-size:13px;}
  .import-confirm-note,.import-confirm-note-detail{font-size:10.5px;}
  .import-confirm-actions{width:100%;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:8px;}
  .import-confirm-actions>.btn{width:100%;min-width:0;justify-content:center;min-height:44px;}
  .import-confirm-btn{
    font-size:13px;
    padding:9px 8px;
    box-shadow:none;
  }
}
@media(min-width:640px){
  .imp-card-list{display:none;}
  .imp-segment{display:none;}
}

/* ── Light-Mode-Kontrast-Fix fuer Warnungen (Sweep CC Follow-up) ────────
   Vorher: amber Text (rgb(232,184,75)) auf rgba(234,179,8,.05) — ~2.1:1.
   PR #1648: Switch auf var(--tone-warn-fg) #b08a30 + tint rgba(180,100,0,.08)
   ergab nur ~2.9:1 (rechnerisch verifiziert 2026-05-07 nach QA-Befund).
   Final-Fix: var(--tone-warn-fg-strong) #7a5200 → ~6:1 ✓ AA. Token in
   _10-shell.css body.light + _00-tokens.css :root definiert (Dark = identisch
   zu --tone-warn-fg, da dort schon hell-warm und lesbar). Strikt body.light
   scoped — Dark-Mode unveraendert.
*/
body.light .import-warning{
  color:var(--tone-warn-fg-strong);
  background:rgba(180,100,0,.08);
  border-color:rgba(180,100,0,.25);
}
body.light .import-warning strong,body.light .import-warning span{
  color:var(--tone-warn-fg-strong);
}
/* .import-row-problem / .imp-card-problem no longer tint their body text
   (2026-07 redesign): the text stays neutral (--text2) and only the ⚠ icon
   carries the warn colour, so the old light-mode text-colour overrides are gone. */

/* ── PickerSheet (<dialog>-basiert, --sheet-* Tokens reused) ───────────── */
.picker-sheet{
  border:none;padding:0;margin:0;background:transparent;
  position:fixed;left:0;right:0;bottom:0;top:auto;
  width:100%;max-width:100%;max-height:var(--sheet-max-height);
}
.picker-sheet::backdrop{background:var(--sheet-backdrop);}
.picker-sheet-panel{
  background:var(--card);
  border-top-left-radius:var(--sheet-radius-top);
  border-top-right-radius:var(--sheet-radius-top);
  padding:14px 16px;
  padding-bottom:max(14px, calc(14px + env(safe-area-inset-bottom, 0px)));
  box-shadow:0 -8px 32px rgba(0,0,0,.4);
  max-height:var(--sheet-max-height);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  /* The engine transforms .picker-sheet-panel (attachVerticalDrag(dialog,panel)),
     so the compositor layer + shadow isolation belong HERE, not on .picker-sheet. */
  transform:translateZ(0);
}
/* will-change only while a finger drags. The engine sets data-rsr-drag-active on
   the dialog (.picker-sheet); the moved node is the panel inside it. */
.picker-sheet[data-rsr-drag-active] .picker-sheet-panel{will-change:transform;}
.picker-sheet-handle{
  width:34px;height:3px;background:var(--sheet-handle);
  border-radius:2px;margin:2px auto 10px;opacity:.5;
  touch-action:none;
}
.picker-sheet-header{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px;}
.picker-sheet-title{font-size:13px;font-weight:var(--fw-semibold);color:var(--text);margin:0;}
.picker-sheet-hint{font-size:10.5px;color:var(--text3);font-weight:normal;}
.picker-sheet-search{
  width:100%;background:var(--bg2);border:1px solid var(--border);color:var(--text);
  padding:10px 12px;border-radius:8px;font-size:13px;font-family:inherit;
  margin-bottom:10px;min-height:44px;
}
.picker-sheet-search:focus{outline:none;border-color:var(--accent);}
.picker-sheet-options{display:grid;gap:6px;}
.picker-sheet-options.is-grid-3{grid-template-columns:repeat(3,1fr);}
.picker-sheet-options.is-grid-5{grid-template-columns:repeat(5,1fr);}
.picker-sheet-options.is-list{grid-template-columns:1fr;}
.picker-sheet-opt{
  background:var(--bg2);border:1px solid var(--border2);color:var(--text2);
  padding:14px 8px;border-radius:8px;font-size:14px;font-weight:var(--fw-semibold);
  font-variant-numeric:tabular-nums;cursor:pointer;text-align:center;line-height:1.2;
  font-family:inherit;min-height:56px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
}
.picker-sheet-options.is-list .picker-sheet-opt{
  flex-direction:row;align-items:center;justify-content:flex-start;text-align:left;padding:12px 14px;min-height:48px;gap:8px;
}
.picker-sheet-opt:hover{border-color:var(--accent);}
.picker-sheet-opt.is-active{background:rgba(96,165,250,.15);border-color:var(--blue);color:var(--blue);}
.picker-sheet-opt.is-active.is-list{background:rgba(232,184,75,.10);border-color:var(--accent);color:var(--accent);}
.picker-sheet-opt-sub{display:block;font-size:9.5px;color:var(--text3);font-weight:var(--fw-medium);letter-spacing:0;text-transform:none;}
.picker-sheet-options.is-list .picker-sheet-opt-sub{margin-left:auto;text-align:right;white-space:nowrap;}
.picker-sheet-opt.is-active .picker-sheet-opt-sub{color:var(--blue);opacity:.85;}
.picker-sheet-opt-check{margin-left:auto;color:var(--accent);}
.picker-sheet-opt-sub + .picker-sheet-opt-check{margin-left:8px;flex:0 0 auto;}
.picker-sheet-empty{padding:24px 8px;text-align:center;color:var(--text3);font-size:12px;}
.picker-sheet-more{
  display:block;background:transparent;border:none;color:var(--text2);font-size:12px;
  margin-top:10px;cursor:pointer;padding:8px;text-align:right;width:100%;font-family:inherit;
}
.picker-sheet-more:hover{color:var(--accent);}

/* PickerSheet Drawer-Mode (für Card-Tap → Edit-Drawer, Plan Spec 5) */
.picker-sheet-drawer{display:flex;flex-direction:column;gap:12px;}
.picker-sheet-field{display:flex;flex-direction:column;gap:4px;}
.picker-sheet-field label{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);font-weight:var(--fw-semibold);}
.picker-sheet-field input,.picker-sheet-field textarea{
  background:var(--bg2);border:1px solid var(--border2);color:var(--text);
  padding:10px 12px;border-radius:6px;font-size:13px;font-family:inherit;min-height:40px;
}
.picker-sheet-field input:focus{outline:none;border-color:var(--accent);}
/* Sweep CC Follow-up: Date-Trigger-Button (statt nativer <input type=date>).
   Auf iOS triggerte focus() auf type=date den nativen Picker beim Drawer-Open.
   Jetzt: Button mit dem aktuellen Wert als Label, Tap oeffnet _pickDate (core.js). */
.picker-sheet-date-btn{
  background:var(--bg2);border:1px solid var(--border2);color:var(--text);
  padding:10px 12px;border-radius:6px;font-size:13px;font-family:inherit;min-height:40px;
  text-align:left;cursor:pointer;width:100%;
}
.picker-sheet-date-btn:hover,.picker-sheet-date-btn:focus{outline:none;border-color:var(--accent);}
.picker-sheet-field-input--amount{text-align:right;font-family:var(--mono);}
.picker-sheet-opt--list{text-align:left;}
.picker-sheet-field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.picker-sheet-actions{display:flex;gap:8px;margin-top:12px;}
.picker-sheet-actions button{flex:1;padding:11px 14px;border-radius:8px;font-size:13.5px;font-weight:var(--fw-semibold);min-height:44px;cursor:pointer;font-family:inherit;}
.picker-sheet-cancel{background:transparent;border:1px solid var(--border2);color:var(--text2);}
.picker-sheet-save{background:var(--accent);border:none;color:var(--accent-ink);}

/* Reduced-Motion: keine Slide-Animation (Plan Spec 7) */
@media(prefers-reduced-motion:reduce){
  .picker-sheet,.picker-sheet-panel{transition:none!important;animation:none!important;}
}

/* ==========================================================================
   Booking Attachments V1 — PR 2/5
   Badges (Hauptbeleg / Zusatzbeleg), Konflikt-Dialog, Rollen-Picker
   ========================================================================== */

/* ── Attachment Badges ─────────────────────────────────────────────────────
   Erweitern das bestehende .beleg-badge-System (definiert in _10-shell.css).
   .ba-badge-primary    → Hauptbeleg (grün, analog zu .linked)
   .ba-badge-supporting → Zusatzbeleg (blau/info-Ton, abgesetzt)
   .ba-badge-count      → n-Belege-Zähler (PR 3: 0/1/n-Badge, neutral-Ton)
   ─────────────────────────────────────────────────────────────────────── */
.beleg-badge.ba-badge-primary{background:rgba(52,211,153,.12);color:var(--green);border:1px solid rgba(52,211,153,.28);font-weight:var(--fw-bold);}
.beleg-badge.ba-badge-supporting{background:rgba(96,165,250,.09);color:var(--blue);border:1px solid rgba(96,165,250,.22);}
.beleg-badge.ba-badge-count{background:var(--bg-2);color:var(--text-2);border:1px solid var(--border);font-weight:var(--fw-bold);}

/* Light-mode overrides */
body.light .beleg-badge.ba-badge-primary{background:rgba(52,211,153,.08);border-color:rgba(52,211,153,.25);color:var(--tone-good-fg);}
body.light .beleg-badge.ba-badge-supporting{background:rgba(96,165,250,.07);border-color:rgba(96,165,250,.22);color:var(--tone-info-fg);}

/* ── Konflikt-Dialog ───────────────────────────────────────────────────────
   Overlay + Modal für "Beleg bereits verknüpft — umlinken oder Zusatzbeleg?"
   Verwendet das globale .ov / .modal-Pattern (definiert in _10-shell.css).
   ─────────────────────────────────────────────────────────────────────── */
.ba-conflict-overlay{background:rgba(0,0,0,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.ba-conflict-modal{max-width:520px;}
.ba-conflict-body{padding:0 0 4px;}
.ba-conflict-desc{font-size:13.5px;color:var(--text2);line-height:1.55;margin:0 0 16px;}
.ba-conflict-desc strong{color:var(--text);font-weight:var(--fw-semibold);}
.ba-conflict-closed-note{background:rgba(232,184,75,.08);border:1px solid rgba(232,184,75,.22);border-radius:8px;padding:10px 14px;font-size:12px;color:var(--tone-warn-text);margin-bottom:14px;line-height:1.45;}
body.light .ba-conflict-closed-note{background:rgba(232,184,75,.07);border-color:rgba(232,184,75,.3);color:var(--tone-warn-fg-strong);}
.ba-conflict-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px;}
.ba-conflict-btn{flex:1;min-width:140px;justify-content:center;}
.ba-conflict-btn-disabled{opacity:.38;cursor:not-allowed;}
.ba-conflict-btn-disabled:hover{opacity:.38;}

/* ── Rollen-Picker (<select>) ──────────────────────────────────────────────
   Einheitliche select-Optik passend zum Rest des Formulars.
   ─────────────────────────────────────────────────────────────────────── */
.ba-role-picker{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius2);color:var(--text);font-size:13px;font-family:inherit;padding:7px 10px;width:100%;outline:none;cursor:pointer;transition:border-color .15s;}
.ba-role-picker:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(232,184,75,.12);}
body.light .ba-role-picker{background:var(--card);border-color:var(--border2);color:var(--text);}
body.light .ba-role-picker:focus{box-shadow:0 0 0 2px rgba(201,152,48,.14);}

/* Closed-month indicator for disabled actions */
.ba-action-disabled{opacity:.45;cursor:not-allowed;pointer-events:none;}
.ba-closed-note{font-size:11px;color:var(--tone-warn-text);display:inline-flex;align-items:center;gap:4px;margin-left:6px;}
body.light .ba-closed-note{color:var(--tone-warn-fg-strong);}

/* v3 Beleg-detection hint (Task 7): amber "looks like a single receipt" card in
   the bank-PDF Import-Preview. Mirrors the .ba-conflict-closed-note warn tokens.
   Soft hint, not a blocker — keeps all rows selectable. */
.import-beleg-hint{background:rgba(232,184,75,.08);border:1px solid rgba(232,184,75,.22);border-radius:10px;padding:12px 14px;margin-bottom:14px;display:flex;flex-direction:column;gap:10px;}
body.light .import-beleg-hint{background:rgba(232,184,75,.07);border-color:rgba(232,184,75,.3);}
.import-beleg-hint__body{display:flex;align-items:flex-start;gap:10px;}
.import-beleg-hint__icon{flex:0 0 auto;color:var(--tone-warn-text);margin-top:1px;}
body.light .import-beleg-hint__icon{color:var(--tone-warn-fg-strong);}
.import-beleg-hint__text{margin:0;font-size:13px;line-height:1.45;color:var(--tone-warn-text);}
body.light .import-beleg-hint__text{color:var(--tone-warn-fg-strong);}
.import-beleg-hint__actions{display:flex;flex-wrap:wrap;gap:8px;}
.import-beleg-hint__actions button[disabled]{opacity:.5;cursor:not-allowed;}

.import-link-plain{text-decoration:none;}
.import-file-input-hidden{display:none;}
.import-inline-note{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;margin-bottom:10px;border:1px solid rgba(232,184,75,.25);border-radius:8px;background:rgba(232,184,75,.08);font-size:11.5px;color:var(--text2);}
.import-inline-note__icon{flex-shrink:0;}
.import-inline-note__icon--offset{margin-top:1px;}
.import-inline-note__copy{min-width:0;line-height:1.45;}
.import-inline-note__title{color:var(--orange);}
.import-inline-note__link{color:var(--accent);text-decoration:underline;}
.import-warning--year-switch{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.import-warning__action{flex-shrink:0;}
.import-private-note{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;margin-bottom:10px;border:1px solid rgba(232,184,75,.25);border-radius:8px;background:rgba(232,184,75,.08);}
.import-private-note__copy{display:flex;align-items:center;gap:8px;min-width:0;font-size:12px;color:var(--text2);}
.import-private-note__icon{flex-shrink:0;}
.import-private-note__action{flex-shrink:0;}
.import-muted-inline-sm{font-size:11px;}
.import-badge--baseline{vertical-align:middle;}
.import-undo-btn--compact{padding:2px 8px;font-size:11px;}
@media(max-width:640px){
  .import-private-note{align-items:flex-start;flex-wrap:wrap;}
}

/* PR 4 (Kontoauszug-Import-Fix-Plan, Coverage-Sicherheitsnetz): prominent
   "Import möglicherweise unvollständig" card in the bank-PDF Import-Preview.
   Consumes meta.importCoverage.likelyIncomplete (broader signal than the
   balanceCheck badge). More prominent than the soft .import-beleg-hint amber
   card because it gates the "Übernehmen" action — uses the red warn tone.
   Markup owned by public/js/import-coverage-warning.js. No inline styles
   (CSP freeze). */
.import-coverage-warn{
  background:var(--red2);
  border:1px solid var(--red3);
  border-radius:var(--radius-md);
  padding:14px 16px;
  margin-bottom:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.import-coverage-warn__body{display:flex;align-items:flex-start;gap:12px;}
.import-coverage-warn__icon{flex:0 0 auto;color:var(--red);margin-top:1px;}
.import-coverage-warn__text{display:flex;flex-direction:column;gap:4px;}
.import-coverage-warn__title{margin:0;font-size:14px;font-weight:var(--fw-semibold);color:var(--text);}
.import-coverage-warn__msg{margin:0;font-size:13px;line-height:1.5;color:var(--text2);}

/* Acknowledge checkbox — gates the confirm button (no silent auto-takeover).
   The ack row is a <label>; a global `label{text-transform:uppercase;
   letter-spacing:.06em;font-weight:var(--fw-semibold)}` form-default would
   otherwise SHOUT the sentence and space it out (live-found 2026-06-08). Reset
   those three props to the running-text values this sentence needs. */
.import-coverage-warn__ack{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:13px;
  line-height:1.4;
  color:var(--text);
  cursor:pointer;
  text-transform:none;
  letter-spacing:normal;
  font-weight:var(--fw-regular);
}
/* The checkbox is an <input>; a global `input{width:100%;padding;border;
   background}` form-default would otherwise stretch it to the card width and
   give it text-field chrome (live-found 2026-06-08: width 1170px). Pin it to a
   real checkbox box. `flex:0 0 auto` alone does not win against width:100%. */
.import-coverage-warn__ack input{
  flex:0 0 auto;
  width:16px;
  height:16px;
  margin-top:1px;
  padding:0;
  cursor:pointer;
  accent-color:var(--accent);
}

/* Collapsible Debug-Report — technical codes only. */
.import-coverage-warn__debug{font-size:12px;color:var(--text3);}
.import-coverage-warn__debug-summary{cursor:pointer;color:var(--text2);}
.import-coverage-warn__debug-list{
  list-style:none;
  margin:8px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.import-coverage-warn__debug-item{display:flex;justify-content:space-between;gap:12px;}
.import-coverage-warn__debug-key{color:var(--text3);}
.import-coverage-warn__debug-val{color:var(--text2);font-variant-numeric:tabular-nums;}

/* ============================================================
   Belegarchiv — T-001 / PR1 (Hero + Status-Pills + Attention +
   Monats-Activity-Rail + Upload-Zustände).
   Plan: .story/sessions/2026-05-17-belegarchiv-modernisierung/plan.md
   Tokens-only (docs/design/TOKENS.md). Kein color-mix (Safari<16.2),
   keine neuen Hex/RGBA (Debt-Freeze). Container nutzen var(--card) —
   in Dark wie Light korrekte Fläche, kein --bg2-Light-Override nötig.
   .cockpit-year-control bleibt in _20-dashboard.css (DR2-Reuse).
   ============================================================ */

/* ── Hero ───────────────────────────────────────────────── */
/* Zweispaltiges Dashboard-Panel (wie .bm-page-header): links
   Titel/Meta/Pills, rechts die Offene-Belege-CTA. Volle Breite. */
.belege-archive-hero{
  width:100%;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:var(--space-xl);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-md);
  padding:var(--space-xl);
  margin-bottom:var(--space-lg);
}
.belege-archive-hero .bah-top{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--space-lg);min-width:0;
}
.belege-archive-hero .belege-attention-card{align-self:center;}
.belege-archive-hero .bah-headline{min-width:0;}
.belege-archive-hero .bah-eyebrow{
  font-size:var(--fs-xs);font-weight:var(--fw-bold);
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--text3);margin-bottom:var(--space-xs);
}
.belege-archive-hero .app-page-title{margin:0;}
.belege-archive-hero .bah-summary{
  margin:var(--space-xs) 0 0;
  font-size:var(--fs-base);color:var(--text2);
  line-height:var(--lh-base);
}
/* Onboarding-Variante (0 Belege): schlichter Flow-Header wie AfA/Fahrten/
   Kontakte statt Card — kein Background/Border/Shadow, kein Card-Padding —
   damit darunter genau EINE Card (die Onboarding-Drop-Zone) steht und der
   obere Abstand mit den anderen Empty-States übereinstimmt. Rechts der
   Jahres-Wechsler (im 0-Fall entfällt die Rail, die ihn sonst trägt). */
.belege-archive-hero--onb{
  background:none;border:none;box-shadow:none;
  padding:0;border-radius:0;
  align-items:start;
}
.belege-archive-hero--onb .bah-year{align-self:start;justify-self:end;flex-shrink:0;}

/* ── Status-Pills ───────────────────────────────────────── */
.belege-archive-pills{
  display:flex;gap:var(--space-sm);flex-wrap:wrap;align-items:center;
}
.belege-archive-pills .bah-pill{
  font-family:var(--font-sans);
  display:inline-flex;align-items:center;gap:var(--space-sm);
}
.belege-archive-pills .bah-pill[data-active="true"]{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--text);
}
.belege-archive-pills .bah-pill[data-active="true"] .filter-count{
  color:var(--accent);font-weight:var(--fw-bold);
}
/* Tone-Akzent nur dezent auf dem Count (taxtello: ruhig, Gelb=Akzent) */
.belege-archive-pills .bah-pill--warn .filter-count{color:var(--tone-warn-text);}
.belege-archive-pills .bah-pill--good .filter-count{color:var(--tone-good-fg);}
.belege-archive-pills .bah-pill--poor .filter-count{color:var(--tone-poor-fg);}

/* ── Attention-Card ─────────────────────────────────────── */
.belege-attention-card{
  display:flex;align-items:center;gap:var(--space-md);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--space-md) var(--space-lg);
  background:var(--card);width:max-content;max-width:420px;
}
.belege-attention-card .bac-body{min-width:0;}
.belege-attention-card .bac-icon{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--radius-md);
}
.belege-attention-card .bac-title{
  font-size:var(--fs-md);font-weight:var(--fw-extrabold);color:var(--text);
}
.belege-attention-card .bac-sub{
  font-size:var(--fs-base);color:var(--text2);margin-top:2px;
}
.belege-attention-card--warn{
  background:var(--tone-warn-bg);border-color:var(--tone-warn-border);
}
.belege-attention-card--warn .bac-icon{color:var(--tone-warn-text);}
.belege-attention-card--calm .bac-icon{color:var(--text3);}

/* ── Monats-Activity-Rail ───────────────────────────────── */
.belege-month-rail{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:var(--space-lg);
  margin-bottom:var(--space-lg);
}
.belege-month-rail .bmr-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-md);margin-bottom:var(--space-md);
}
/* Leerer Zustand: nur Header (Jahr-Wechsler) — kompakt, kein
   hoher Leerkasten ohne Track (T-001/PR3 User-Fix). */
.belege-month-rail--empty{padding:var(--space-md) var(--space-lg);}
.belege-month-rail--empty .bmr-head{margin-bottom:0;}
.belege-month-rail .bmr-label{
  font-size:var(--fs-xs);font-weight:var(--fw-bold);
  letter-spacing:.14em;text-transform:uppercase;color:var(--text3);
}
.belege-month-rail .bmr-track{
  display:flex;gap:var(--space-sm);
  overflow-x:auto;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  padding-bottom:2px;
}
.belege-month-rail .bmr-cell{
  position:relative;flex:0 0 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;min-width:60px;padding:var(--space-sm) var(--space-md);
  border:1px solid var(--border);border-radius:var(--radius-md);
  background:var(--card);color:var(--text2);
  font-family:var(--font-sans);cursor:pointer;
  scroll-snap-align:center;transition:background var(--tr-fast),border-color var(--tr-fast);
}
.belege-month-rail .bmr-cell:hover{border-color:var(--border2);color:var(--text);}
.belege-month-rail .bmr-cell-name{
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);
}
.belege-month-rail .bmr-cell-count{
  font-size:var(--fs-base);font-weight:var(--fw-bold);
  font-family:var(--font-mono);
}
.belege-month-rail .bmr-cell.is-active{
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
}
.belege-month-rail .bmr-cell.is-active .bmr-cell-count{color:var(--accent-ink);}
.belege-month-rail .bmr-cell.is-empty{opacity:.42;}
.belege-month-rail .bmr-cell.is-active.is-empty{opacity:1;}
.belege-month-rail .bmr-cell-dot{
  position:absolute;top:6px;right:8px;
  width:6px;height:6px;border-radius:var(--radius-pill);
  background:var(--tone-warn-fg);
}
.belege-month-rail .bmr-cell.is-active .bmr-cell-dot{background:var(--accent-ink);}
.belege-month-rail .bmr-cell--all{border-style:dashed;}
.belege-month-rail .bmr-cell:focus-visible,
.belege-archive-pills .bah-pill:focus-visible,
.beleg-upload-panel:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}
.belege-rail-hint{
  font-size:var(--fs-sm);color:var(--text3);
  padding:var(--space-md) 0;margin-bottom:var(--space-sm);
}

/* ── Upload-Panel Basis + Zustaende (T6 · T-001/PR3 T12-Migration) ──
   Basis fuer .beleg-upload-panel, die .bup- Klassen und
   .beleg-upload-item aus _10-shell.css hierher migriert (Plan
   Paragraph 3.3 / D3 — Beleg-CSS raus aus dem globalen Fehl-Ort).
   VERBATIM uebernommen + danach unveraendert die bestehenden
   _52-Overrides/Zustaende → identische Kaskade wie zuvor (_10 dann
   _52), keine visuelle Aenderung. Leeres .beleg-upload-progress
   wurde entfernt. */
.beleg-upload-panel{background:var(--bg2);border:1px dashed rgba(var(--surface-rgba-base),.08);border-radius:var(--radius-lg);padding:18px 22px;display:flex;align-items:center;gap:var(--space-md);cursor:pointer;transition:border-color .25s,background .25s,box-shadow .25s;margin-bottom:16px;box-shadow:0 1px 2px rgba(0,0,0,.06);max-width:860px;}.beleg-upload-panel:hover{border-color:rgba(232,184,75,.4);background:rgba(232,184,75,.03);box-shadow:0 2px 12px rgba(232,184,75,.06),0 0 0 1px rgba(232,184,75,.12);}.beleg-upload-panel.drag-over{border-color:var(--accent);background:rgba(232,184,75,.06);border-style:solid;box-shadow:0 4px 20px rgba(232,184,75,.1),0 0 0 2px rgba(232,184,75,.2);}.bup-icon{width:44px;height:44px;border-radius:12px;background:rgba(232,184,75,.06);border:1px solid rgba(232,184,75,.15);display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0;transition:border-color .25s,background .25s;}.beleg-upload-panel:hover .bup-icon,.beleg-upload-panel.drag-over .bup-icon{border-color:rgba(232,184,75,.35);background:rgba(232,184,75,.1);}.bup-title{font-size:13.5px;font-weight:var(--fw-semibold);color:var(--text);}.bup-sub{font-size:var(--fs-sm);color:var(--text3);margin-top:2px;}.beleg-upload-item{display:flex;align-items:center;gap:var(--space-sm);padding:6px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;margin-bottom:4px;font-size:var(--fs-sm);}.beleg-upload-item progress{flex:1;height:4px;}
/* Volle Content-Breite wie Liste/Rail (gemeinsames Seitenraster) —
   überschreibt die migrierte max-width:860px. */
.beleg-upload-panel{transition:border-color var(--tr-fast),background var(--tr-fast);cursor:pointer;max-width:none;width:100%;}
.beleg-upload-panel:hover{border-color:var(--accent);}
.beleg-upload-panel.drag-over{
  border:2px dashed var(--accent);
  background:var(--accent-soft);
}
.beleg-upload-panel.is-uploading{
  border-color:var(--accent);background:var(--accent-soft);cursor:default;
}
.beleg-upload-panel.is-success{border-color:var(--tone-good-border);background:var(--tone-good-bg);}
.beleg-upload-panel.is-error{border-color:var(--tone-poor-border);background:var(--tone-poor-bg);}
.beleg-upload-panel .bup-btn{font-family:var(--font-sans);white-space:nowrap;}
/* Saubere Action-Zeile: Text links (flex:1), Actions rechts, vertikal
   zentriert. Der per scanner-entry.js INS Panel angehängte
   .beleg-scan-action soll NICHT als gestackter Block mit margin-top
   schweben, sondern als zweiter Button im rechten Action-Cluster
   sitzen (höhere Spezifität schlägt _51-scanner.css). */
.beleg-upload-panel .bup-text{flex:1;min-width:0;}
.beleg-upload-panel .beleg-scan-action{
  margin-top:0;align-self:center;flex-shrink:0;
}
/* „Scannen" als sauberer Sekundär-Peer neben „Dateien wählen"
   (gleiche Höhe/Radius/Font wie .btn-g.btn-sm) — nicht schwebend,
   nicht größer als der Primär-Button. */
.beleg-upload-panel .beleg-scan-btn{
  padding:6px 10px;min-height:32px;border-radius:var(--radius2);
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  background:transparent;color:var(--text2);border:1px solid var(--border);
  gap:6px;
}
.beleg-upload-panel .beleg-scan-btn:hover{
  background:rgba(var(--surface-rgba-base),.06);
  color:var(--text);border-color:var(--border2);
}
.beleg-upload-panel .bup-btn{align-self:center;}
.belege-upload-readonly{padding:var(--space-md) var(--space-lg);margin-bottom:var(--space-md);}
.belege-upload-readonly .bur-title{
  font-size:var(--fs-base);font-weight:var(--fw-semibold);
  display:flex;align-items:center;gap:var(--space-xs);margin-bottom:var(--space-xs);
}
.belege-upload-readonly .bur-sub{font-size:var(--fs-sm);color:var(--text3);}

/* ── Responsive (mobil = bewusstes Layout, kein Quetschen) ── */
@media (max-width:720px){
  .belege-archive-hero{
    grid-template-columns:1fr;padding:var(--space-lg);
    align-items:stretch;gap:var(--space-lg);
  }
  .belege-archive-hero .bah-top{align-items:stretch;}
  .belege-archive-pills{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;}
  .belege-attention-card{width:auto;max-width:none;}
  .belege-month-rail .bmr-cell{min-width:56px;}
  /* Upload-Panel: Basis-Flexrow (_10-shell, Desktop) auf Mobile
     stapeln, damit der neue "Dateien wählen"-Button (T6) nicht klemmt. */
  .beleg-upload-panel{
    flex-direction:column;align-items:stretch;gap:var(--space-md);
  }
  .beleg-upload-panel .bup-btn{width:100%;justify-content:center;}
}

/* ============================================================
   T-001 / PR2 — Toolbar-Erweiterung, Erweitert-Filter-Drawer,
   produktive Listenzeile (.beleg-row), Empty-States.
   Tokens-only; .kon-filter-chip (_41) / .app-status-chip (_60) sind
   global definiert — hier nur Belege-Kontext-Tuning + neue Bausteine.
   ============================================================ */

/* ── Toolbar: Status-Chips + Erweitert-Trigger ────────────── */
.belege-toolbar__status{
  display:flex;gap:var(--space-sm);flex-wrap:wrap;align-items:center;
  background:none;border:0;padding:0;height:auto;
}
.belege-toolbar__advbtn .count{
  font-family:var(--font-mono);
}
.belege-toolbar__advicon{
  vertical-align:-2px;
  margin-right:4px;
}
.belege-toolbar__search{
  max-width:200px;
}

/* Belegarchiv-Toolbar: nicht sticky; sie scrollt mit dem Inhalt weg, damit
   kein dunkler Balken unter der App-Shell über Belegkarten liegt. */
.page-filter-bar--belege{
  position:static;top:auto;z-index:auto;
  background:transparent;
  border-bottom:0;
  height:auto;min-height:44px;
  padding:var(--space-sm) 0;
  margin-bottom:var(--space-md);
  box-shadow:none;
}
.page-filter-bar--belege.is-stuck{
  background:transparent;
  box-shadow:none;
}

/* ── Konsistenz mit „Monatliche Buchungen" (.bm-*) ──────────────
   Scoped auf den Belege-Toolbar-Kontext (+ Hero-Pills), damit die
   geteilten _41-Generics (.kon-filter-chip/.sort-btn/.month-btn/
   .sort-drop/.month-drop) andere Seiten NICHT verändern. Werte 1:1
   aus _23-bookings-month.css (bm-btn--secondary/sm, bm-filter-pill,
   bm-row-menu) — keine neue Variante, gleicher Produktbereich. */

/* Status-Pills (Toolbar + Hero) = .bm-filter-pill */
.page-filter-bar--belege .kon-filter-chip,
.belege-archive-pills .bah-pill{
  height:30px;padding:0 12px;gap:7px;
  border:1px solid var(--border);background:transparent;
  color:var(--text2);border-radius:var(--radius-pill);
  font-size:12px;font-weight:var(--fw-semibold);
  transition:background var(--tr-fast),color var(--tr-fast),border-color var(--tr-fast);
}
.page-filter-bar--belege .kon-filter-chip:hover,
.belege-archive-pills .bah-pill:hover{
  background:rgba(var(--surface-rgba-base),.045);color:var(--text);
}
.page-filter-bar--belege .kon-filter-chip.is-active,
.belege-archive-pills .bah-pill[data-active="true"]{
  background:rgba(var(--accent-rgba-base),.12);color:var(--accent);
  border-color:rgba(var(--accent-rgba-base),.32);
}
body.light .page-filter-bar--belege .kon-filter-chip.is-active,
body.light .belege-archive-pills .bah-pill[data-active="true"]{
  background:rgba(var(--accent-rgba-base),.14);
}
.page-filter-bar--belege .kon-filter-chip .count,
.belege-archive-pills .bah-pill .filter-count{font-family:var(--font-mono);}
.belege-archive-pills .bah-pill[data-active="true"] .filter-count{color:var(--accent);}

/* Sort-/Monat-/Erweitert-Buttons = .bm-btn--secondary.bm-btn--sm */
.page-filter-bar--belege .sort-btn,
.page-filter-bar--belege .month-btn,
.belege-toolbar__advbtn{
  display:inline-flex;align-items:center;gap:7px;
  height:34px;padding:0 12px;border-radius:10px;
  font-size:13px;font-weight:var(--fw-semibold);line-height:1;
  background:rgba(var(--surface-rgba-base),.035);
  color:var(--text);border:1px solid var(--border);
  transition:background var(--tr-fast),border-color var(--tr-fast),color var(--tr-fast);
}
body.light .page-filter-bar--belege .sort-btn,
body.light .page-filter-bar--belege .month-btn,
body.light .belege-toolbar__advbtn{background:var(--card);}
.page-filter-bar--belege .sort-btn:hover,
.page-filter-bar--belege .month-btn:hover,
.belege-toolbar__advbtn:hover{
  background:rgba(var(--surface-rgba-base),.065);border-color:var(--border2);
}
.page-filter-bar--belege .sort-btn.sorted,
.page-filter-bar--belege .month-btn.active,
.belege-toolbar__advbtn.is-open,
.belege-toolbar__advbtn.has-active{
  background:rgba(var(--accent-rgba-base),.07);
  border-color:rgba(var(--accent-rgba-base),.42);color:var(--accent);
}
.page-filter-bar--belege .sort-btn:focus-visible,
.page-filter-bar--belege .month-btn:focus-visible,
.belege-toolbar__advbtn:focus-visible{
  outline:2px solid rgba(var(--accent-rgba-base),.55);outline-offset:2px;
}

/* Sort-/Monat-Dropdown = .bm-row-menu Popover */
.page-filter-bar--belege .sort-drop,
.page-filter-bar--belege .month-drop{
  background:var(--card2);border:1px solid var(--border);
  border-radius:10px;box-shadow:0 16px 40px rgba(0,0,0,.35);
  padding:6px;overflow:visible;min-width:220px;
}
body.light .page-filter-bar--belege .sort-drop,
body.light .page-filter-bar--belege .month-drop{
  background:var(--card);box-shadow:0 12px 28px rgba(15,23,42,.14);
}
.page-filter-bar--belege .sort-opt,
.page-filter-bar--belege .month-opt{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  height:34px;padding:0 10px;border-radius:6px;
  font-size:13px;font-weight:var(--fw-medium);color:var(--text);
  transition:background var(--tr-fast),color var(--tr-fast);
}
.page-filter-bar--belege .sort-opt:hover,
.page-filter-bar--belege .month-opt:hover{
  background:rgba(var(--surface-rgba-base),.06);color:var(--text);
}
body.light .page-filter-bar--belege .sort-opt:hover,
body.light .page-filter-bar--belege .month-opt:hover{
  background:rgba(15,23,42,.04);
}
.page-filter-bar--belege .sort-opt.active,
.page-filter-bar--belege .month-opt.active{
  background:rgba(var(--accent-rgba-base),.12);color:var(--accent);
}

/* Monats-Dropdown = kompaktes 3×4-Raster (gleiche Designsprache wie
   die Monats-Rail/Monatsbuchungen) statt langer hängender Liste.
   display:grid nur im .open-Zustand — Toggle (_41 display:none/.open)
   bleibt intakt. „Alle Monate" spannt die Kopfzeile. */
.page-filter-bar--belege .month-drop.open{
  display:grid;grid-template-columns:repeat(3,minmax(66px,1fr));
  gap:6px;min-width:252px;
}
.page-filter-bar--belege .month-opt{
  flex-direction:column;justify-content:center;align-items:center;gap:2px;
  height:auto;padding:8px 6px;border:1px solid var(--border);
  border-radius:var(--radius-md);background:var(--card);color:var(--text2);
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);
}
.page-filter-bar--belege .month-opt:hover{
  border-color:var(--border2);background:rgba(var(--surface-rgba-base),.06);
  color:var(--text);
}
.page-filter-bar--belege .month-opt.active{
  background:rgba(var(--accent-rgba-base),.12);color:var(--accent);
  border-color:rgba(var(--accent-rgba-base),.32);
}
.page-filter-bar--belege .month-opt.is-empty{opacity:.45;}
.page-filter-bar--belege .month-opt-count{
  font-family:var(--font-mono);font-size:var(--fs-base);font-weight:var(--fw-bold);
}
.page-filter-bar--belege .month-drop.open > .month-opt:first-child{
  grid-column:1 / -1;flex-direction:row;justify-content:center;
  height:32px;padding:0 12px;border-radius:var(--radius-pill);
}

/* Warnungen sichtbar, aber NICHT lauter als der Belegtitel
   (User-Hierarchie-Fix): kleinere, ruhigere Chips. */
.beleg-row--card .brow-warn .app-status-chip{
  font-size:var(--fs-xs);font-weight:var(--fw-medium);
  padding:3px 8px;
  /* Lange Validierungs-Hinweise sind ganze Sätze: umbrechen statt
     über den Bildschirm hinausragen (User-Report). Basis-Chip hat
     white-space:nowrap + feste Höhe — hier bewusst gelöst. */
  white-space:normal;height:auto;max-width:100%;
  line-height:var(--lh-base);text-align:left;overflow-wrap:anywhere;
}

/* ── Erweitert-Filter-Drawer ──────────────────────────────── */
.beleg-adv-drawer{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:var(--space-lg);
  margin-bottom:var(--space-lg);
}
.beleg-adv-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--space-md);
  align-items:end;
}
.beleg-adv-field{display:flex;flex-direction:column;gap:var(--space-xs);min-width:0;}
.beleg-adv-label{
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);
  letter-spacing:.06em;text-transform:uppercase;color:var(--text3);
}
.beleg-adv-input{
  height:36px;padding:0 var(--space-sm);
  font-family:var(--font-sans);font-size:var(--fs-sm);
  color:var(--text);background:var(--bg2);
  border:1px solid var(--border);border-radius:var(--radius-md);
}
.beleg-adv-input:focus-visible{
  outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);
}
.beleg-adv-checks{
  grid-column:1 / -1;
  display:flex;flex-wrap:wrap;gap:var(--space-md);
  padding-top:var(--space-xs);
}
.beleg-adv-check{
  display:inline-flex;align-items:center;gap:var(--space-xs);
  font-size:var(--fs-sm);color:var(--text2);cursor:pointer;
}
.beleg-adv-check input{accent-color:var(--accent);width:15px;height:15px;}
.beleg-adv-foot{
  display:flex;justify-content:flex-end;gap:var(--space-sm);
  margin-top:var(--space-md);
}

/* ── Produktive Listenzeile (.beleg-row) ──────────────────── */
.beleg-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  grid-template-areas:"main status side";
  align-items:center;gap:var(--space-md);
  padding:var(--space-md) var(--space-lg);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--card);
  margin-bottom:var(--space-sm);
  transition:border-color var(--tr-fast),background var(--tr-fast);
}
.beleg-row:hover{border-color:var(--border2);}
.beleg-row.is-linked{background:var(--card2);}

/* Keine farbige Aussenkante: Status lebt in Chips und ruhigen Hinweiszeilen,
   nicht als Alarmstreifen an der Belegkarte. */
.beleg-row--card{border-color:var(--border);}

/* ── Informationsreiche Belegkarte (.beleg-row--card) ──────────
   Hybrid: alte _belegCardFull-Dichte + neue Tokens. Alles pro Beleg
   sofort sichtbar; Hauptaktionen nicht hinter Menü versteckt. */
.beleg-row--card{
  display:flex;flex-direction:column;align-items:stretch;
  gap:var(--space-sm);
  grid-template-columns:none;grid-template-areas:none;
  padding:var(--space-md) var(--space-lg);
}
.beleg-row--card .brow-head{display:flex;align-items:flex-start;gap:var(--space-md);}
.beleg-row--card .brow-file,
.beleg-row--card .brow-index{
  flex-shrink:0;width:34px;height:34px;display:flex;
  align-items:center;justify-content:center;border-radius:var(--radius-sm);
  background:rgba(var(--surface-rgba-base),.05);color:var(--text3);
}
.beleg-row--card .brow-index{
  color:var(--text2);font-family:var(--font-mono);font-size:12px;
  font-variant-numeric:tabular-nums;font-weight:var(--fw-semibold);
  letter-spacing:0;
}
.beleg-row--card .brow-id{flex:1;min-width:0;}
.beleg-row--card .brow-name{
  font-size:15px;font-weight:var(--fw-semibold);color:var(--text);
  letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.beleg-row--card .brow-meta{
  margin-top:3px;font-size:var(--fs-sm);color:var(--text3);
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
}
.beleg-row--card .brow-party{color:var(--text2);font-weight:var(--fw-medium);}
.beleg-row--card .brow-sep{color:var(--text3);opacity:.55;}
.beleg-row--card .brow-date.is-upload{font-style:italic;opacity:.8;}
.beleg-row--card .brow-amount{
  flex-shrink:0;font-family:var(--font-mono);font-size:18px;
  font-weight:var(--fw-bold);color:var(--text);letter-spacing:-.02em;
  text-align:right;line-height:1.2;min-width:108px;
}
.beleg-row--card .brow-amount.is-fx{color:var(--tone-info-fg);}
.beleg-row--card .brow-warn{display:flex;flex-wrap:wrap;gap:6px;}
.beleg-row--card .brow-badges{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm);
}
.beleg-row--card .brow-tag{
  font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--text3);
  background:rgba(var(--surface-rgba-base),.045);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:2px 8px;
}
.beleg-row--card .brow-tag--in{
  color:var(--tone-good-fg);border-color:var(--tone-good-border);
  background:var(--tone-good-bg);
}
/* Eigene ruhige Action-Zeile: links Hauptaktionen, rechts
   belegbezogen — klar vom Inhalt getrennt (eigene Border-Top). */
.beleg-row--card .brow-actions{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-md);flex-wrap:wrap;
  padding-top:var(--space-sm);border-top:1px solid var(--border);
}
.beleg-row--card .brow-actions-main{
  display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap;
}
/* Rechte Aktionsgruppe: reine Icon-Buttons (Vorschau · Download ·
   Löschen). Rechtsbündig, eng beieinander (2px) — die 40px-Buttons
   tragen genug eigene Innenluft, ein größerer Gap wirkt auseinander-
   gerissen. */
.beleg-row--card .brow-actions-side{
  display:flex;align-items:center;gap:2px;flex-wrap:wrap;
  margin-left:auto;
}
/* Kompakter, zurückhaltender Icon-Button für die rechte Aktionsgruppe
   (Vorschau, Download, Löschen, Verknüpfung lösen). Token-basiert,
   dark/light-fähig. Touch-Targets via @media (pointer:coarse) 44×44. */
.beleg-row--card .brow-icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;
  border:1px solid transparent;background:transparent;
  border-radius:var(--radius-md);color:var(--text3);
  cursor:pointer;
  transition:background var(--tr-fast),color var(--tr-fast),
    border-color var(--tr-fast);
}
.beleg-row--card .brow-icon-btn svg{flex-shrink:0;opacity:.85;}
.beleg-row--card .brow-icon-btn:hover{
  background:rgba(var(--surface-rgba-base),.08);color:var(--text2);
}
body.light .beleg-row--card .brow-icon-btn:hover{
  background:rgba(15,23,42,.05);color:var(--text);
}
.beleg-row--card .brow-icon-btn:focus-visible{
  outline:2px solid rgba(var(--accent-rgba-base),.55);outline-offset:1px;
}
.beleg-row--card .brow-icon-btn:disabled,
.beleg-row--card .brow-icon-btn[aria-disabled="true"]{
  opacity:.5;cursor:not-allowed;
}
.beleg-row--card .brow-icon-btn.brow-del:hover{
  color:var(--red);background:rgba(248,113,113,.08);
}
@media (max-width:720px){
  .beleg-row--card{padding:var(--space-md);}
  .beleg-row--card .brow-amount{font-size:16px;}
  .beleg-row--card .brow-actions-spacer{display:none;}
  .beleg-row--card .brow-actions{gap:var(--space-xs);}
}
.beleg-row__main{
  grid-area:main;display:flex;align-items:center;gap:var(--space-md);min-width:0;
}
.beleg-row__icon{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:30px;height:30px;border-radius:var(--radius-sm);
  background:var(--bg2);color:var(--text3);
}
.beleg-row__index{
  color:var(--text2);font-family:var(--font-mono);font-size:12px;
  font-variant-numeric:tabular-nums;font-weight:var(--fw-semibold);
  letter-spacing:0;
}
.beleg-row__ident{min-width:0;display:flex;flex-direction:column;gap:2px;}
.beleg-row__name{
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.beleg-row__meta{
  display:flex;flex-wrap:wrap;gap:var(--space-sm);
  font-size:var(--fs-xs);color:var(--text3);
}
.beleg-row__party{color:var(--text2);font-weight:var(--fw-medium);}
.beleg-row__date.is-upload{font-style:italic;opacity:.85;}
.beleg-row__rgnr{font-family:var(--font-mono);}
.beleg-row__status{
  grid-area:status;display:flex;align-items:center;gap:var(--space-sm);
  flex-wrap:wrap;justify-content:flex-end;
}
.beleg-row__taxrate{
  font-size:var(--fs-xs);color:var(--text3);font-family:var(--font-mono);
}
.beleg-row__side{
  grid-area:side;display:flex;align-items:center;gap:var(--space-md);
}
.beleg-row__amount{
  font-family:var(--font-mono);font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);color:var(--text);
  white-space:nowrap;text-align:right;min-width:0;
}
.beleg-row__amount.is-fx{color:var(--tone-info-fg);}
.beleg-row__actions{
  display:flex;align-items:center;gap:var(--space-sm);
  align-self:center;flex:0 0 auto;
}
.beleg-row__icon-btn{padding:4px 8px;color:var(--text3);}
/* Verknüpft visuell leiser als Offen (Plan-Abnahme) */
.beleg-row--compact{
  display:flex;align-items:center;gap:var(--space-sm);
  padding:var(--space-sm) var(--space-lg);
  border-left-width:1px;background:var(--card2);
}
.beleg-row--compact .beleg-row__name{
  flex:1;font-weight:var(--fw-regular);color:var(--text2);
}
.beleg-row--compact .beleg-row__date{
  font-size:var(--fs-xs);color:var(--text3);flex:0 0 auto;
}
.beleg-row--compact .beleg-row__amount{
  font-size:var(--fs-xs);color:var(--text3);
}
.beleg-row--compact .beleg-row__actions{margin-left:auto;}

/* ── Empty-States (DESIGN §4.6) ───────────────────────────── */
.beleg-empty{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--space-sm);padding:var(--space-3xl) var(--space-xl);
}
.beleg-empty__icon{color:var(--text3);}
.beleg-empty--open .beleg-empty__icon{color:var(--tone-good-fg);}
.beleg-empty__title{font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--text);}
.beleg-empty__copy{
  font-size:var(--fs-sm);color:var(--text3);max-width:42ch;
  line-height:var(--lh-base);
}
.beleg-empty__cta{margin-top:var(--space-sm);}

/* ── Responsive (mobil = bewusstes Layout) ────────────────── */
@media (max-width:720px){
  .beleg-row{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"main side" "status status";
    row-gap:var(--space-sm);
  }
  .beleg-row__status{justify-content:flex-start;}
  .beleg-row__side{align-self:center;}
  /* Kompakt-Zeile (Verknüpft) bricht auf Mobil um statt zu klippen:
     Name füllt Zeile 1, Betrag/Chips/Aktionen rutschen in Zeile 2.
     Betrag darf nie schrumpfen (sonst abgeschnitten – User-Report). */
  .beleg-row--compact{flex-wrap:wrap;row-gap:var(--space-xs);}
  .beleg-row--compact .beleg-row__name{flex:1 1 100%;}
  .beleg-row--compact .beleg-row__amount{flex:0 0 auto;}
  .beleg-row--card{padding:var(--space-md);}
  .beleg-row--card .brow-head{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:var(--space-sm);row-gap:var(--space-xs);}
  .beleg-row--card .brow-file,
  .beleg-row--card .brow-index{grid-row:1 / span 2;}
  .beleg-row--card .brow-amount{grid-column:2;text-align:left;min-width:0;font-size:16px;}
  .beleg-row--card .brow-actions{gap:var(--space-xs);}
  .beleg-row--card .brow-actions-main{width:100%;margin-left:0;}
  /* Icon-Gruppe rutscht unter die Hauptaktionen, bleibt rechtsbündig. */
  .beleg-row--card .brow-actions-side{width:100%;margin-left:0;justify-content:flex-end;}
  .beleg-adv-grid{grid-template-columns:1fr;}
}
@media (max-width:520px){
  /* Primäre Wort-Buttons (Buchung erstellen + Zuordnen): einzeln
     vollbreit, zu zweit gleich stark — nie gequetscht. */
  .beleg-row--card .brow-actions-main{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(144px,1fr));
  }
  .beleg-row--card .brow-actions-main > .btn{width:100%;}
  /* Icon-Gruppe (Vorschau · Download · Löschen) bleibt eine ruhige,
     rechtsbündige Reihe kompakter Icon-Buttons — kein Umbruch in
     gestreckte Vollbreit-Zellen (User-Report „Nebenaktionen zu
     dominant"). 40×40-Targets, klar unter den Hauptaktionen. */
  .beleg-row--card .brow-actions-side{
    width:100%;justify-content:flex-end;margin-top:2px;
    gap:var(--space-xs);
  }
}
/* Sort als Bottom-Sheet auf Mobile (keine gequetschten Dropdowns) */
@media (max-width:640px){
  .page-filter-bar--belege .sort-drop.open{
    position:fixed;left:0;right:0;
    bottom:calc(env(safe-area-inset-bottom,0px));
    top:auto;border-radius:var(--radius-xl) var(--radius-xl) 0 0;
    max-height:60vh;overflow-y:auto;z-index:var(--z-modal);
    padding:var(--space-sm);
  }
}

/* Reduced-Motion: keine Cell-/Panel-Transitions */
@media (prefers-reduced-motion:reduce){
  .belege-month-rail .bmr-cell,
  .beleg-row,
  .beleg-upload-panel{transition:none;}
}

/* ============================================================
   T-001 / PR3 — States & A11y (T10): Skeleton-Ladezustand,
   GoBD-Menühinweis, Touch-Targets ≥44px. Tokens-only.
   ============================================================ */

/* ── Skeleton (Load) ──────────────────────────────────────── */
.beleg-skeleton{display:flex;flex-direction:column;gap:var(--space-sm);margin-top:var(--space-sm);}
.beleg-skeleton__row{
  display:flex;align-items:center;gap:var(--space-md);
  padding:var(--space-md);background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius-lg);
}
.beleg-skeleton__ident{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-xs);}
.beleg-skeleton__icon{width:28px;height:28px;border-radius:var(--radius-sm);flex-shrink:0;}
.beleg-skeleton__line{height:11px;border-radius:var(--radius-sm);display:block;}
.beleg-skeleton__line--sub{height:9px;}
.beleg-skeleton__line--w28{width:28%;}
.beleg-skeleton__line--w38{width:38%;}
.beleg-skeleton__line--w52{width:52%;}
.beleg-skeleton__line--w64{width:64%;}
.beleg-skeleton__line--w76{width:76%;}
.beleg-skeleton__chip{width:68px;height:20px;border-radius:999px;flex-shrink:0;}
.beleg-skeleton__btn{width:104px;height:28px;border-radius:var(--radius-sm);flex-shrink:0;}
.sk-shimmer{
  background:linear-gradient(90deg,
    var(--bg2) 0%,
    rgba(var(--surface-rgba-base),.07) 50%,
    var(--bg2) 100%);
  background-size:200% 100%;
  animation:belegeSkeletonShimmer 1.4s ease-in-out infinite;
}
@keyframes belegeSkeletonShimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}

/* ── Touch-Targets ≥44px (Coarse-Pointer / DESIGN §3.4-C) ─── */
@media (pointer:coarse){
  .beleg-row__actions .btn{min-height:44px;}
  .beleg-row--card .brow-icon-btn{min-width:44px;min-height:44px;}
  .beleg-upload-panel{min-height:44px;}
}

/* Skeleton-Shimmer respektiert Reduced-Motion (statisch). */
@media (prefers-reduced-motion:reduce){
  .sk-shimmer{animation:none;background:var(--bg2);}
}

/* Upload-Status = moderne, ruhige Result-Card (User-Fix). Scoped auf
   .belege-page (schlägt _10-shell-.um-* per Spezifität, _10 unberührt):
   dunkles Panel, dezente Border, Grün nur Akzent, „Schließen"=dezentes X. */
.belege-page .um-module{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:none;padding:var(--space-md) var(--space-lg);margin-bottom:var(--space-md);}
.belege-page .um-module:not(.um-done){border-color:rgba(var(--accent-rgba-base),.28);}
.belege-page .um-module.um-done{border-color:var(--tone-good-border);padding:var(--space-sm) var(--space-lg);}
.belege-page .um-header{margin-bottom:var(--space-sm);}
.belege-page .um-title{font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--text);}
.belege-page .um-close{width:30px;height:30px;border:0;background:transparent;color:var(--text3);border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background var(--tr-fast),color var(--tr-fast);}
.belege-page .um-cancel{flex-shrink:0;}
.belege-page .um-close:hover{background:rgba(var(--surface-rgba-base),.08);color:var(--text);}
body.light .belege-page .um-close:hover{background:rgba(15,23,42,.05);}
.belege-page .um-cancel:hover{background:rgba(248,113,113,.1);color:var(--red);}
.belege-page .um-close:focus-visible,.belege-page .um-cancel:focus-visible{outline:2px solid rgba(var(--accent-rgba-base),.55);outline-offset:1px;}
.belege-page .um-bar-track{height:3px;background:rgba(var(--surface-rgba-base),.08);margin-bottom:var(--space-sm);}
.belege-page .um-bar-fill{background:var(--accent);}
.belege-page .um-bar-fill.um-bar-done{background:var(--tone-good-fg);}
.belege-page .um-module.um-done .um-bar-track{display:none;}
.belege-page .um-active{background:rgba(var(--accent-rgba-base),.06);border:1px solid rgba(var(--accent-rgba-base),.18);border-radius:var(--radius-sm);}
.belege-page .um-counters{gap:var(--space-md);margin-bottom:0;}
.belege-page .um-counter{font-size:var(--fs-xs);}
.belege-page .um-c-ok{color:var(--tone-good-fg);}
.belege-page .um-toggle{display:inline-flex;align-items:center;gap:6px;color:var(--text3);font-size:var(--fs-sm);font-weight:var(--fw-medium);padding:0;margin-top:var(--space-sm);background:none;border:0;cursor:pointer;transition:color var(--tr-fast);}
.belege-page .um-toggle:hover{color:var(--text);}
.belege-page .um-toggle-count{font-family:var(--font-mono);font-size:var(--fs-xs);opacity:.6;}
.belege-page .um-detail-list{margin-top:var(--space-sm);max-height:200px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius-md);background:rgba(var(--surface-rgba-base),.03);}
body.light .belege-page .um-detail-list{background:rgba(15,23,42,.025);}
.belege-page .um-detail-row{display:flex;align-items:center;gap:var(--space-sm);padding:7px 12px;font-size:var(--fs-sm);border-bottom:1px solid var(--border);}
.belege-page .um-detail-row:last-child{border-bottom:none;}
.belege-page .um-detail-name{flex:1;min-width:0;color:var(--text2);font-weight:var(--fw-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.belege-page .um-detail-info{flex-shrink:0;font-size:var(--fs-xs);color:var(--text3);text-transform:uppercase;letter-spacing:.04em;font-weight:var(--fw-semibold);}

.beleg-preview-fallback--actions{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.beleg-preview-fallback__copy{
  font-size:12px;
  color:var(--text2);
  line-height:1.45;
}

.beleg-preview-fallback__actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.beleg-preview-modal--pdf{max-width:960px;}

.beleg-preview-modal--image{max-width:800px;}

.beleg-preview-modal-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}

.beleg-preview-modal-actions--tight{gap:6px;}

.beleg-pdf-canvas-wrap--modal{padding-bottom:0;}

.beleg-pdf-preview-stage{
  display:flex;
  width:100%;
  max-height:72vh;
  overflow:auto;
  justify-content:flex-start;
  padding:2px 2px 12px;
}

.beleg-pdf-preview-pages{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  width:100%;
}

.beleg-pdf-page{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:100%;
}

.beleg-pdf-page-label{
  font-size:11px;
  font-weight:600;
  color:var(--text2);
  text-align:center;
}

.beleg-preview-download-btn{font-size:11px;}

.beleg-preview-download-icon{vertical-align:-1px;}

.beleg-preview-image{
  display:block;
  max-width:100%;
  max-height:70vh;
  margin:0 auto;
  border-radius:0 0 12px 12px;
}

.belege-hero-status{font-weight:600;}
.belege-hero-status--open{color:var(--accent);}
.belege-hero-status--good{color:var(--green);}
.belege-hero-status--error{color:var(--red);}
.belege-empty-inline-card{margin-top:10px;padding:12px 14px;}
.belege-empty-inline-copy{font-size:12px;color:var(--text2);line-height:1.6;}
.belege-inline-link,.belege-inline-link-btn{color:var(--accent);}
.belege-inline-link-btn{background:none;border:none;padding:0;cursor:pointer;font:inherit;text-decoration:underline;}
.belege-env-block{margin-top:6px;padding:8px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius2);font-family:var(--mono);font-size:11px;color:var(--text3);}
.belege-env-hint{margin-top:6px;font-size:10.5px;color:var(--text3);}
.belege-flat-sort-hint{display:flex;align-items:center;gap:6px;margin-bottom:10px;font-size:10.5px;color:var(--text3);}
.belege-flat-sort-hint-icon{flex-shrink:0;}
.belege-linked-divider{display:flex;align-items:center;gap:8px;margin:14px 0 8px;cursor:pointer;}
.belege-linked-divider-line{flex:1;height:1px;background:var(--border);}
.belege-linked-divider-label{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;user-select:none;}
.belege-load-more-wrap{display:flex;justify-content:center;margin:14px 0 4px;}
.belege-load-more[aria-busy="true"]{opacity:.7;cursor:progress;}
.belege-month-chart-bar[data-height-pct="4"]{height:4%}.belege-month-chart-bar[data-height-pct="5"]{height:5%}.belege-month-chart-bar[data-height-pct="6"]{height:6%}.belege-month-chart-bar[data-height-pct="7"]{height:7%}.belege-month-chart-bar[data-height-pct="8"]{height:8%}.belege-month-chart-bar[data-height-pct="9"]{height:9%}.belege-month-chart-bar[data-height-pct="10"]{height:10%}.belege-month-chart-bar[data-height-pct="11"]{height:11%}.belege-month-chart-bar[data-height-pct="12"]{height:12%}.belege-month-chart-bar[data-height-pct="13"]{height:13%}.belege-month-chart-bar[data-height-pct="14"]{height:14%}.belege-month-chart-bar[data-height-pct="15"]{height:15%}.belege-month-chart-bar[data-height-pct="16"]{height:16%}.belege-month-chart-bar[data-height-pct="17"]{height:17%}.belege-month-chart-bar[data-height-pct="18"]{height:18%}.belege-month-chart-bar[data-height-pct="19"]{height:19%}.belege-month-chart-bar[data-height-pct="20"]{height:20%}.belege-month-chart-bar[data-height-pct="21"]{height:21%}.belege-month-chart-bar[data-height-pct="22"]{height:22%}.belege-month-chart-bar[data-height-pct="23"]{height:23%}.belege-month-chart-bar[data-height-pct="24"]{height:24%}.belege-month-chart-bar[data-height-pct="25"]{height:25%}.belege-month-chart-bar[data-height-pct="26"]{height:26%}.belege-month-chart-bar[data-height-pct="27"]{height:27%}.belege-month-chart-bar[data-height-pct="28"]{height:28%}.belege-month-chart-bar[data-height-pct="29"]{height:29%}.belege-month-chart-bar[data-height-pct="30"]{height:30%}.belege-month-chart-bar[data-height-pct="31"]{height:31%}.belege-month-chart-bar[data-height-pct="32"]{height:32%}.belege-month-chart-bar[data-height-pct="33"]{height:33%}.belege-month-chart-bar[data-height-pct="34"]{height:34%}.belege-month-chart-bar[data-height-pct="35"]{height:35%}.belege-month-chart-bar[data-height-pct="36"]{height:36%}.belege-month-chart-bar[data-height-pct="37"]{height:37%}.belege-month-chart-bar[data-height-pct="38"]{height:38%}.belege-month-chart-bar[data-height-pct="39"]{height:39%}.belege-month-chart-bar[data-height-pct="40"]{height:40%}.belege-month-chart-bar[data-height-pct="41"]{height:41%}.belege-month-chart-bar[data-height-pct="42"]{height:42%}.belege-month-chart-bar[data-height-pct="43"]{height:43%}.belege-month-chart-bar[data-height-pct="44"]{height:44%}.belege-month-chart-bar[data-height-pct="45"]{height:45%}.belege-month-chart-bar[data-height-pct="46"]{height:46%}.belege-month-chart-bar[data-height-pct="47"]{height:47%}.belege-month-chart-bar[data-height-pct="48"]{height:48%}.belege-month-chart-bar[data-height-pct="49"]{height:49%}.belege-month-chart-bar[data-height-pct="50"]{height:50%}.belege-month-chart-bar[data-height-pct="51"]{height:51%}.belege-month-chart-bar[data-height-pct="52"]{height:52%}.belege-month-chart-bar[data-height-pct="53"]{height:53%}.belege-month-chart-bar[data-height-pct="54"]{height:54%}.belege-month-chart-bar[data-height-pct="55"]{height:55%}.belege-month-chart-bar[data-height-pct="56"]{height:56%}.belege-month-chart-bar[data-height-pct="57"]{height:57%}.belege-month-chart-bar[data-height-pct="58"]{height:58%}.belege-month-chart-bar[data-height-pct="59"]{height:59%}.belege-month-chart-bar[data-height-pct="60"]{height:60%}.belege-month-chart-bar[data-height-pct="61"]{height:61%}.belege-month-chart-bar[data-height-pct="62"]{height:62%}.belege-month-chart-bar[data-height-pct="63"]{height:63%}.belege-month-chart-bar[data-height-pct="64"]{height:64%}.belege-month-chart-bar[data-height-pct="65"]{height:65%}.belege-month-chart-bar[data-height-pct="66"]{height:66%}.belege-month-chart-bar[data-height-pct="67"]{height:67%}.belege-month-chart-bar[data-height-pct="68"]{height:68%}.belege-month-chart-bar[data-height-pct="69"]{height:69%}.belege-month-chart-bar[data-height-pct="70"]{height:70%}.belege-month-chart-bar[data-height-pct="71"]{height:71%}.belege-month-chart-bar[data-height-pct="72"]{height:72%}.belege-month-chart-bar[data-height-pct="73"]{height:73%}.belege-month-chart-bar[data-height-pct="74"]{height:74%}.belege-month-chart-bar[data-height-pct="75"]{height:75%}.belege-month-chart-bar[data-height-pct="76"]{height:76%}.belege-month-chart-bar[data-height-pct="77"]{height:77%}.belege-month-chart-bar[data-height-pct="78"]{height:78%}.belege-month-chart-bar[data-height-pct="79"]{height:79%}.belege-month-chart-bar[data-height-pct="80"]{height:80%}.belege-month-chart-bar[data-height-pct="81"]{height:81%}.belege-month-chart-bar[data-height-pct="82"]{height:82%}.belege-month-chart-bar[data-height-pct="83"]{height:83%}.belege-month-chart-bar[data-height-pct="84"]{height:84%}.belege-month-chart-bar[data-height-pct="85"]{height:85%}.belege-month-chart-bar[data-height-pct="86"]{height:86%}.belege-month-chart-bar[data-height-pct="87"]{height:87%}.belege-month-chart-bar[data-height-pct="88"]{height:88%}.belege-month-chart-bar[data-height-pct="89"]{height:89%}.belege-month-chart-bar[data-height-pct="90"]{height:90%}.belege-month-chart-bar[data-height-pct="91"]{height:91%}.belege-month-chart-bar[data-height-pct="92"]{height:92%}.belege-month-chart-bar[data-height-pct="93"]{height:93%}.belege-month-chart-bar[data-height-pct="94"]{height:94%}.belege-month-chart-bar[data-height-pct="95"]{height:95%}.belege-month-chart-bar[data-height-pct="96"]{height:96%}.belege-month-chart-bar[data-height-pct="97"]{height:97%}.belege-month-chart-bar[data-height-pct="98"]{height:98%}.belege-month-chart-bar[data-height-pct="99"]{height:99%}.belege-month-chart-bar[data-height-pct="100"]{height:100%}

.bc-action-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
}

.bc-action-icon{
  flex-shrink:0;
  opacity:.85;
}

.beleg-card-compact__file{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  color:var(--text2);
}

.beleg-card-compact__amount{
  flex-shrink:0;
  font-family:var(--mono);
  font-size:11px;
  color:var(--text3);
}

.beleg-card-compact__badge{
  flex-shrink:0;
}

.beleg-card-compact__linked{
  flex-shrink:0;
  max-width:160px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
  color:var(--green);
}

.beleg-card-compact__preview{
  flex-shrink:0;
  padding:2px 8px;
}

.beleg-card-compact__unlink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  padding:2px 8px;
  color:var(--text3);
}

.beleg-preview-iframe{width:100%;height:75vh;border:0;display:block;background:var(--bg3);border-radius:0 0 12px 12px;}
.beleg-preview-modal-body{padding:0;}
.app-dialog.beleg-modal--match{max-width:760px;min-width:0;width:min(760px,calc(100vw - 40px));max-height:calc(100vh - 36px);max-height:calc(100dvh - 36px);display:flex;flex-direction:column;}
.app-dialog.beleg-modal--match::before{content:none;display:none;}
.app-dialog.beleg-modal--match .app-dialog-title{padding:28px 70px 0 28px;font-size:28px;line-height:1.2;}
.app-dialog.beleg-modal--match .app-dialog-body{padding:18px 28px 0;font-size:18px;line-height:1.65;color:var(--text2);}
.beleg-match-close{position:absolute;top:15px;right:17px;z-index:2;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;border-radius:10px;color:var(--text3);font-size:24px;line-height:1;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s;}
.beleg-match-close:hover{background:rgba(var(--surface-rgba-base),.06);color:var(--text);}
.beleg-match-close:focus-visible{outline:2px solid rgba(232,184,75,.45);outline-offset:2px;}
.app-dialog.beleg-modal--match > .beleg-match-body{flex:1 1 auto;min-height:0;margin:0;padding:16px 28px 24px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.app-dialog.beleg-modal--match > .app-dialog-body + .beleg-match-body{margin:0;padding-top:20px;}
body.light .beleg-match-close:hover{background:rgba(var(--ink-rgba-base),.05);}
.beleg-modal--picker{max-width:600px;}
.beleg-match-info{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius2);padding:8px 10px;margin-bottom:12px;font-size:11.5px;}
.beleg-match-caption{font-size:10px;color:var(--text3);margin-bottom:8px;}
.beleg-match-fx-warn{margin-top:6px;border:1px solid var(--tx-note-warn-border);background:var(--tx-note-warn-bg);color:var(--text2);border-radius:var(--tx-note-radius);font-size:10.5px;}
.beleg-match-main{flex:1;min-width:0;}
.beleg-match-title{font-size:12.5px;font-weight:600;}
.beleg-match-title--relink{font-size:12px;font-weight:500;}
.beleg-match-meta{font-size:10.5px;color:var(--text3);margin-top:1px;}
.beleg-match-meta--compact{font-size:10px;margin-top:0;}
.beleg-match-reasons{font-size:9.5px;color:var(--text3);margin-top:2px;}
.beleg-match-empty-note{font-size:10px;color:var(--text3);padding:6px 0;}
.beleg-match-status{font-size:11px;color:var(--text2);margin:0 0 8px;font-weight:500;}
.beleg-match-score.none{background:rgba(148,163,184,.06);color:var(--text3);border:1px solid rgba(148,163,184,.14);font-weight:var(--fw-semibold);}
.beleg-match-card--high{border-color:var(--tone-good-border);background:var(--tone-good-bg);}
.beleg-match-card--med{border-color:var(--tone-warn-border);background:var(--tone-warn-bg);}
.beleg-match-card--low,.beleg-match-card--none{border-color:var(--border);background:rgba(var(--surface-rgba-base),.04);}
.beleg-match-card--top{box-shadow:0 0 0 1px var(--tone-good-border),0 8px 22px rgba(var(--surface-rgba-base),.14);}
.beleg-match-link--high{color:var(--tone-good-fg);}
.beleg-match-link--med{color:var(--tone-warn-text);}
.beleg-match-link--low,.beleg-match-link--none{color:var(--text3);}
.beleg-match-top-label{display:inline-flex;align-items:center;width:max-content;margin-top:4px;padding:2px 7px;border-radius:var(--radius-sm);border:1px solid var(--tone-good-border);background:var(--tone-good-bg);color:var(--tone-good-fg);font-size:9px;font-weight:var(--fw-bold);}
.beleg-match-empty-state{text-align:center;padding:22px 16px;border:1px dashed var(--border);border-radius:var(--radius2);background:var(--bg2);}
.beleg-match-empty-title{font-size:12.5px;font-weight:600;color:var(--text);margin-bottom:4px;}
.beleg-match-empty-hint{font-size:11px;color:var(--text3);margin-bottom:10px;}
.beleg-match-card--relink{border-color:rgba(248,113,113,.25);background:rgba(248,113,113,.04);}
.beleg-match-relink-btn{background:rgba(248,113,113,.12);color:var(--red);border:1px solid rgba(248,113,113,.3);flex-shrink:0;}
.beleg-match-note{font-size:9px;color:var(--text3);margin-bottom:4px;}
.beleg-match-note--linked{font-size:9.5px;color:var(--red);margin-top:2px;margin-bottom:0;}
.beleg-match-pane{max-height:50vh;overflow-y:auto;}
.beleg-match-pane--tall{max-height:60vh;}
.beleg-match-search{margin-bottom:10px;}
.beleg-match-count{font-size:10px;color:var(--text3);margin-bottom:6px;}
.beleg-match-linked-shell{padding-top:8px;border-top:1px solid var(--border);margin-top:10px;}
.beleg-match-toggle{font-size:10px;width:100%;}
.beleg-match-linked-rows{margin-top:6px;}
@media(max-width:640px){.app-dialog.beleg-modal--match{width:calc(100vw - 24px);max-width:none;max-height:calc(100vh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));}.app-dialog.beleg-modal--match .app-dialog-title{padding:24px 58px 0 22px;font-size:26px;}.app-dialog.beleg-modal--match .app-dialog-body{padding:14px 22px 0;font-size:16px;}.beleg-match-close{top:13px;right:14px;width:40px;height:40px;}.app-dialog.beleg-modal--match > .beleg-match-body{padding:14px 22px 22px;}.app-dialog.beleg-modal--match .beleg-match-pane{max-height:none;overflow:visible;}}

/* FX-Banner-Residuum (extrahiert aus _20-dashboard.css in PR-S1.6b' / Z. 30-39).
   Fremdwährungs-Belege Warning-Banner + Currency-Badge auf Beleg-Cards.
   Liegt direkt nach _52d-belege-inline-fixes.css als logischer Belege-
   Domain-Block. Reuses --tone-warn-* semantic tokens; kein neues Hex.
   Original-Reihenfolge 1:1.
   Plan-Doc: docs/architecture/2026-05-16-dashboard-css-split-plan.md */

/* ── Fremdwährungs-Belege (FX): warning banner + currency badge ──
 * Shown on beleg cards when extracted_data.currency != EUR. Reuses the
 * existing --tone-warn-* semantic tokens so light/dark themes match and
 * no new hex is added (keeps stylelint warning count stable). */
.bc-warning-banner{margin-top:8px;display:flex;flex-direction:column;gap:4px;}
.bc-warning{background:var(--tx-note-warn-bg);color:var(--text2);border:1px solid var(--tx-note-warn-border);border-radius:var(--tx-note-radius);font-size:var(--fs-sm);line-height:1.4;}
.bc-amount-fx{color:var(--tone-warn-text);}
.bc-fx-badge{display:inline-block;margin-left:4px;padding:1px 6px;background:var(--tone-warn-bg);color:var(--tone-warn-text);border:1px solid var(--tone-warn-border);border-radius:var(--radius-sm);font-size:9.5px;font-weight:var(--fw-bold);letter-spacing:.04em;font-family:var(--mono);vertical-align:1px;}

/* ============================================================
 * E-Rechnung Inbound UI — Spec 4 PR3
 * Status-Badge (Beleg-Liste + Detail) + XML-Viewer-Modal.
 * Tone-Skala aus _00-tokens.css (good/warn/poor/info) — keine
 * eigenen Farbliterale, damit Dark/Light automatisch greifen.
 * ============================================================ */

/* ── Status-Badge ──────────────────────────────────────────── */
.e-invoice-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
}
.e-invoice-badge:focus-visible {
  outline: 2px solid var(--tone-info-fg);
  outline-offset: 1px;
}
.e-invoice-badge--valid {
  background: var(--tone-good-bg);
  border-color: var(--tone-good-border);
  color: var(--tone-good-fg);
}
.e-invoice-badge--warning {
  background: var(--tone-warn-bg);
  border-color: var(--tone-warn-border);
  color: var(--tone-warn-fg-strong);
}
.e-invoice-badge--error {
  background: var(--tone-poor-bg);
  border-color: var(--tone-poor-border);
  color: var(--tone-poor-fg);
}
.e-invoice-badge--pdf_only,
.e-invoice-badge--skipped {
  background: var(--tone-info-bg);
  border-color: var(--tone-info-border);
  color: var(--tone-info-fg);
}
.e-invoice-badge__dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* ── XML-Viewer-Modal ──────────────────────────────────────── */
.e-invoice-modal {
  max-width: 720px;
  width: 100%;
}
.e-invoice-modal__sub {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.e-invoice-modal__format {
  font-weight: 600;
  color: var(--fg);
}
.e-invoice-section {
  margin-bottom: 1rem;
}
.e-invoice-section__title {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.e-invoice-empty {
  padding: 1rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ── Feld-Tabelle (BT-Codes / Lines / VAT) ─────────────────── */
.e-invoice-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.e-invoice-table th,
.e-invoice-table td {
  padding: 0.3rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.e-invoice-table th {
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.e-invoice-table td.e-invoice-cell--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.e-invoice-row--required th {
  font-weight: 700;
  color: var(--fg);
}
.e-invoice-bt-code {
  font-size: 0.7rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ── Fehler-/Hinweis-Liste ─────────────────────────────────── */
.e-invoice-issues {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.e-invoice-issue {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 0.8rem;
}
.e-invoice-issue--blocker,
.e-invoice-issue--error {
  background: var(--tone-poor-bg);
  border-color: var(--tone-poor-border);
  color: var(--tone-poor-fg);
}
.e-invoice-issue--warning {
  background: var(--tone-warn-bg);
  border-color: var(--tone-warn-border);
  color: var(--tone-warn-fg-strong);
}
.e-invoice-issue__code {
  font-weight: 700;
  font-size: 0.7rem;
  white-space: nowrap;
}
.e-invoice-issue__msg {
  flex: 1;
}

/* ── Footer / Re-Validate ──────────────────────────────────── */
.e-invoice-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.e-invoice-modal__validated {
  font-size: 0.75rem;
  color: var(--muted);
}
.e-invoice-modal__error {
  margin: 0.5rem 0;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  background: var(--tone-poor-bg);
  border: 1px solid var(--tone-poor-border);
  color: var(--tone-poor-fg);
  font-size: 0.8rem;
}

/* ════════════════════════════════════════════════════════════════════════
   _53-pruefen.css — „Zu prüfen" (Plausibilitätsprüfung)
   ────────────────────────────────────────────────────────────────────────
   Aus _10-shell.css extrahiert (File-Size-Freeze: _10-shell war weit über
   Limit). Reiner Darstellungs-Layer der Prüfen-Ansicht; nutzt bewusst die
   Belegarchiv-Komponentenfamilie aus _52-belegarchiv.css (deshalb in der
   Kaskade NACH _52 geladen — siehe manifest.json). Token-only, keine
   Logik. Geteilte Klassen (.seg-ctrl, .pruef-pagination*/.pruef-page-*)
   bleiben in _10-shell.css, weil sie auch Belege/Settings nutzen.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Prüfen: Fortschritt — deutlicher Block IM Hero (User-Wunsch:
   nicht als kaum sichtbare Linie). Gelb = Fortschritt, Track dezent. */
.pruef-progress-block{display:flex;flex-direction:column;gap:8px;}
.pruef-progress-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);}
.pruef-progress-label{font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.12em;text-transform:uppercase;color:var(--text3);}
.pruef-progress-value{font-size:var(--fs-sm);color:var(--text2);font-weight:var(--fw-medium);}
.pruef-progress-value .pruef-open-cnt{color:var(--text3);}
.pruef-done{color:var(--tone-good-fg);font-weight:var(--fw-semibold);}
.pruef-progress-bar{height:10px;background:rgba(var(--surface-rgba-base),.08);overflow:hidden;}
body.light .pruef-progress-bar{background:rgba(15,23,42,.07);}
.pruef-progress-fill{height:100%;background:var(--accent);transition:width .3s ease;min-width:3px;}

/* ── Prüfen: Bulk-Aktion (Toolbar) = Belege-Sekundärbutton-Optik ───── */
.pruef-bulk-btn{display:inline-flex;align-items:center;height:34px;padding:0 12px;border:1px solid var(--border);border-radius:10px;font-size:13px;font-weight:var(--fw-semibold);background:rgba(var(--surface-rgba-base),.035);color:var(--text2);cursor:pointer;font-family:var(--font-sans);transition:background var(--tr-fast),border-color var(--tr-fast),color var(--tr-fast);white-space:nowrap;text-decoration:none;}
body.light .pruef-bulk-btn{background:var(--card);}
.pruef-bulk-btn:hover{color:var(--text);border-color:var(--border2);background:rgba(var(--surface-rgba-base),.065);}
.pruef-bulk-btn--selected{border-color:var(--accent);color:var(--accent);background:rgba(232,184,75,.08);}
.pruef-bulk-btn--selected:hover{border-color:var(--accent);color:var(--accent-strong);background:rgba(232,184,75,.12);}
.pruef-selection-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);margin:0 0 var(--space-sm);padding:10px 12px;border:1px solid rgba(232,184,75,.28);background:rgba(232,184,75,.075);border-radius:var(--radius-md);}
.pruef-selection-bar[hidden]{display:none!important;}
.pruef-selection-count{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text);}
.pruef-selection-actions{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap;}
.pruef-selection-clear{height:34px;border:0;background:transparent;color:var(--text3);font-size:var(--fs-sm);font-weight:var(--fw-semibold);cursor:pointer;font-family:var(--font-sans);}
.pruef-selection-clear:hover{color:var(--text);}

/* ── Prüfen: Gruppen-Divider — ruhig, Akzent je Typ ────────────────── */
.pruef-section-divider{font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.12em;color:var(--text3);padding:var(--space-lg) 0 var(--space-sm);margin:0 0 var(--space-sm);border-bottom:1px solid var(--border);}
.pruef-section-divider--error{color:var(--tone-poor-fg);border-bottom-color:var(--border);}
.pruef-section-divider--warn{color:var(--text3);border-bottom-color:var(--border);}
.pruef-section-divider--info{color:var(--text3);}

/* ── Prüfen: Issue-Cards = Belegkarten-Familie (.beleg-row--card-Optik):
   var(--card)-Panel, ruhige 1px-Rundum-Kontur, radius-md, Meta leise.
   Severity lebt in Chip, Text und Gruppierung — keine Alarmkante links. */
.issue-card{display:flex;flex-direction:column;gap:var(--space-sm);background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:var(--space-sm);padding:var(--space-md) var(--space-lg);transition:border-color var(--tr-fast),background var(--tr-fast);}
.issue-card:hover{border-color:var(--border2);}
.issue-card[data-sev="error"]{border-color:var(--tone-poor-border);}
.issue-card[data-sev="warn"]{border-color:var(--border);}
.issue-card[data-sev="info"]{border-color:var(--border);}
.issue-card[data-ignored]{opacity:.55;}
.issue-card.is-selected{border-color:rgba(232,184,75,.42);background:rgba(232,184,75,.045);}
body.light .issue-card{border-color:rgba(0,0,0,.08);}
body.light .issue-card:hover{border-color:rgba(0,0,0,.12);}
.issue-card-select{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin-right:2px;}
.issue-card-select .tx-cb{margin:0;}
.issue-card-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);}
.issue-card-left{display:flex;align-items:center;gap:var(--space-sm);flex:1;min-width:0;overflow:hidden;}
.issue-card-title{font-size:14.5px;font-weight:var(--fw-semibold);color:var(--text);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.issue-card-actions{display:flex;align-items:center;gap:var(--space-sm);flex-shrink:0;}
.issue-card-actions .btn-sm{font-size:var(--fs-sm);padding:6px 12px;border-radius:var(--radius2);}
.issue-card-meta{font-size:var(--fs-sm);color:var(--text3);margin-top:2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.issue-card-meta .im-loc{background:rgba(var(--surface-rgba-base),.045);border:1px solid var(--border);border-radius:var(--radius-sm);padding:2px 8px;font-weight:var(--fw-medium);color:var(--text3);}
body.light .issue-card-meta .im-loc{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.1);}
.issue-ignored-badge{font-size:var(--fs-xs);color:var(--text3);background:rgba(var(--surface-rgba-base),.045);border:1px solid var(--border);padding:2px 8px;border-radius:var(--radius-sm);}
.issue-tx-name{color:var(--text2);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.issue-tx-amt{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--text2);font-weight:var(--fw-semibold);}
.issue-sev{display:inline-flex;align-items:center;padding:3px 9px;border-radius:var(--radius-sm);font-size:var(--fs-xs);font-weight:var(--fw-bold);flex-shrink:0;letter-spacing:.02em;}
.issue-sev.s-warn{background:var(--tone-warn-bg);color:var(--tone-warn-text);border:1px solid var(--tone-warn-border);}
.issue-sev.s-error{background:var(--tone-poor-bg);color:var(--tone-poor-fg);border:1px solid var(--tone-poor-border);}
.issue-sev.s-info{background:rgba(96,165,250,.08);color:var(--blue);border:1px solid rgba(96,165,250,.2);}

/* ── Prüfen: Hero = Belegarchiv-Komponentenfamilie ──────────────────
   .belege-archive-hero / .bah-* / .belege-archive-pills / .belege-
   attention-card kommen aus _52-belegarchiv.css (NICHT auf .belege-
   page gescoped → greifen hier 1:1). Hier nur: Fortschritt als dritte
   voll-breite Grid-Reihe IM selben Card + Sub-Pill-Größe. */
.pruef-archive-hero.has-progress{grid-template-areas:"head aside" "prog prog";align-items:start;row-gap:var(--space-lg);}
.pruef-archive-hero.has-progress .bah-top{grid-area:head;}
.pruef-archive-hero.has-progress .belege-attention-card{grid-area:aside;align-self:start;}
.pruef-archive-hero .pruef-progress-block{grid-area:prog;}
.pruef-attention{min-width:200px;}

/* Sekundäre Sub-Pills (Schweregrad) — gleiche Pill-Familie, kleiner. */
.belege-archive-pills--sub{gap:var(--space-xs);}
.belege-archive-pills--sub .bah-pill{height:26px;font-size:11px;padding:0 10px;}
.belege-archive-pills--sub .bah-pill--poor[data-active="true"]{background:var(--tone-poor-bg);border-color:var(--tone-poor-border);color:var(--tone-poor-fg);}
.belege-archive-pills--sub .bah-pill--poor[data-active="true"] .filter-count{color:var(--tone-poor-fg);}
.belege-archive-pills--sub .bah-pill--warn[data-active="true"]{background:var(--tone-warn-bg);border-color:var(--tone-warn-border);color:var(--tone-warn-text);}
.belege-archive-pills--sub .bah-pill--warn[data-active="true"] .filter-count{color:var(--tone-warn-text);}
.belege-archive-pills--sub .bah-pill--info[data-active="true"]{background:rgba(96,165,250,.12);border-color:rgba(96,165,250,.32);color:var(--blue);}
.belege-archive-pills--sub .bah-pill--info[data-active="true"] .filter-count{color:var(--blue);}

/* Prüfen-Toolbar = Belege-Toolbar (page-filter-bar--belege liefert
   Sort-Button/Drop bereits); nur Severity-Sub-Pills links. */
.pruef-filter-bar{flex-wrap:wrap;}

/* 3-Punkte-Menü (.app-action-menu) wird app-weit in _12-page-shell.css
   normalisiert — KEINE prüfen-scoped Sondervariante mehr. */

/* ── Prüfen: Ergebniszähler optisch sekundär (nicht zwischen Buttons) */
.pruef-page-info{color:var(--text3);font-weight:var(--fw-medium);}

/* ── Prüfen: Responsive ────────────────────────────────────────────── */
@media(max-width:720px){
  .pruef-archive-hero.has-progress{grid-template-columns:1fr;grid-template-areas:"head" "aside" "prog";}
  .pruef-archive-hero.has-progress .belege-attention-card{align-self:stretch;}
  .belege-archive-pills--sub{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;}
  /* Toolbar sauber stapeln: Sortierung + „Alle ignorieren" in einer
     Aktionszeile, der Ergebniszähler rutscht als dezenter Text in eine
     eigene volle Zeile rechts — schwebt NICHT mehr zwischen Buttons. */
  .pruef-filter-bar .belege-filter-actions{flex-wrap:wrap;row-gap:8px;}
  .pruef-filter-bar .belege-filter-actions .sort-btn-wrap{order:1;}
  .pruef-filter-bar .belege-filter-actions .pruef-bulk-btn{order:2;margin-left:auto;}
  .pruef-filter-bar .belege-filter-actions .pruef-page-info{order:3;flex-basis:100%;width:100%;text-align:right;margin:0;}
  .pruef-selection-bar{align-items:stretch;flex-direction:column;}
  .pruef-selection-actions{display:grid;grid-template-columns:1fr auto;}
}
@media(max-width:480px){
  .pruef-progress-head{flex-wrap:wrap;gap:4px;}
  .pruef-filter-bar .belege-filter-actions .pruef-bulk-btn{margin-left:0;}
  .pruef-filter-bar .belege-filter-actions .sort-btn-wrap,
  .pruef-filter-bar .belege-filter-actions .pruef-bulk-btn{flex:1 1 auto;}
}

/* Touch-Target-Floor (WCAG 2.5.5 / Apple HIG) auf coarse Pointern — app-weiter
   WebKit-Sweep (iPhone 13, ergänzend zu #3721): pruef-bulk-btn 147×34.
   min-height schlägt das feste height:34px, padding hält die Optik kompakt. */
@media (pointer: coarse) {
  .pruef-bulk-btn { min-height: 44px; padding-block: 11px; }
}

/* _54-nav-back-breadcrumb.css
 *
 * App-weite Navigations-Bausteine (public/js/nav-back-breadcrumb.js):
 *   .app-back-btn   — sicherer "Zurück"-Button (CoreUI.backButton)
 *   .app-breadcrumb — Brotkrumen-Pfad mit klickbaren Parent-Links
 *                     (CoreUI.breadcrumb)
 *
 * Bewusst eigene, klar abgegrenzte Klassen statt Wiederverwendung von
 * `.inv3-builder-breadcrumbs` (Editor-Form-Header, eigene Layout-Order) oder
 * `.a-breadcrumb` (Admin-Surface, eigene admin.css-Welt). Diese hier ist die
 * app-weite Standard-Variante für List-/Detail-Views.
 *
 * Alle Werte über Tokens (docs/design/TOKENS.md). Keine hardcoded Hex/RGBA.
 */

/* ---- Zurück-Button -------------------------------------------------------- */
/* Erbt btn + btn-g (Ghost). Nur die navigationsspezifischen Feinheiten hier. */
.app-back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-sans);
}

.app-back-btn .app-icon {
  flex: 0 0 auto;
}

.app-back-btn__label {
  font-weight: var(--fw-semibold);
}

/* ---- Brotkrumen ----------------------------------------------------------- */
.app-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  min-height: 0;
  font-size: var(--fs-base);
  font-family: var(--font-sans);
}

.app-breadcrumb__link {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--text2);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  transition: color var(--tr-fast);
}

.app-breadcrumb__link:hover,
.app-breadcrumb__link:focus-visible {
  color: var(--accent);
}

.app-breadcrumb__sep {
  color: var(--text3);
  font-size: var(--fs-sm);
  user-select: none;
}

.app-breadcrumb__current {
  color: var(--text3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Mobile: schmale Viewports.
 *
 * Frühere Variante blendete frühe Krumen via :nth-last-of-type aus — das war
 * falsch (Codex PR #3706 P3): __sep und __current sind beide <span>, während
 * __link ein <button> ist. `:nth-last-of-type` zählt pro Tag-Typ, daher war
 * der Separator vor dem aktuellen Krumen der VORLETZTE span und wurde mit
 * ausgeblendet → "Kontakte Acme" ohne Trenner.
 *
 * Korrektur: Da das Markup NIE einen überzähligen trailing-Separator erzeugt
 * (Separatoren stehen ausschließlich ZWISCHEN Items), gibt es nichts gezielt
 * auszublenden. Der Pfad darf auf Mobile umbrechen — `flex-wrap: wrap` ist
 * oben gesetzt. Für die kurzen Pfade dieser Komponente (1–2 Parent-Krumen)
 * bricht ohnehin nichts um; lange Pfade wrappen sauber statt Trenner zu
 * verschlucken. Kleinere Schrift hält die Zeile kompakt. */
@media (max-width: 560px) {
  .app-breadcrumb {
    gap: var(--space-xs);
    font-size: var(--fs-sm);
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   PWA Beleg-Scanner (PR 1/3) — In-App-Kamera-Overlay + "Scannen"-Button.

   Folgt dem etablierten .ov + .modal-Muster (vgl. _10-shell.css). Tokens aus
   _00-tokens.css; dark + light werden beide unterstützt (Light ist Pflicht).
   In manifest.json direkt nach _50-import-belege-export.css verkabelt — die
   explizite Cascade-Reihenfolge bleibt erhalten.

   Scroll-Lock: EIGENE Klasse is-scanner-active (NICHT is-maintenance-active
   wiederverwenden) — Analog zu _15-maintenance.css:38-39.
   ─────────────────────────────────────────────────────────────────────── */

/* ── "Scannen"-Button neben dem Upload-Dropzone ────────────────────────── */
.beleg-scan-action{
  display:flex;justify-content:center;margin-top:var(--space-md);
}
.beleg-scan-btn{
  display:inline-flex;align-items:center;gap:var(--space-sm);
  padding:9px 16px;border-radius:var(--radius-lg);
  background:var(--accent);color:var(--accent-ink);
  border:1px solid var(--accent2);
  font-size:var(--fs-body);font-weight:var(--fw-semibold);
  cursor:pointer;line-height:1;
  transition:background .15s ease,opacity .15s ease,transform .05s ease;
}
.beleg-scan-btn:hover{background:var(--accent3);}
.beleg-scan-btn:active{transform:translateY(1px);}
.beleg-scan-btn:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}
.beleg-scan-btn.is-disabled,
.beleg-scan-btn:disabled{
  background:var(--bg2);color:var(--text3);border-color:var(--border);
  cursor:not-allowed;opacity:.7;
}
.beleg-scan-btn svg{flex-shrink:0;}

/* ── Fullscreen Overlay ────────────────────────────────────────────────── */
/* Component-lokale Tokens (Pattern wie --entry-composer-surface in
   _00-tokens.css). Das Overlay bleibt in BEIDEN Themes bewusst dunkel
   (Kamera-Kontrast), daher feste Neutral-Werte statt Theme-Tokens. */
.scanner-ov{
  /* Theme-unabhängig: das Overlay ist in Dark UND Light bewusst dunkel
     (Kamera-Kontrast). rgba(0,0,0,…) ist lint-erlaubt; Hell-Tints über
     einen lokalen rgb-Triple-Token (kein Hex → lint-clean). */
  --scanner-fg-rgb:255,255,255;
  --scanner-bg:rgba(0,0,0,1);
  --scanner-fg:rgba(var(--scanner-fg-rgb),1);
  /* erbt .ov (position:fixed;inset:0;z-index:1000;flex-center) aus
     _10-shell.css; nur Hintergrund verdunkeln für Kamera-Kontrast. */
  background:rgba(0,0,0,.92);
  padding:0;
}
.scanner-modal{
  display:flex;flex-direction:column;
  width:100%;height:100%;max-width:none;max-height:none;
  background:var(--scanner-bg);color:var(--scanner-fg);overflow:hidden;
  animation:scanner-modal-in .18s ease;
}
@keyframes scanner-modal-in{
  from{opacity:0;}
  to{opacity:1;}
}
.scanner-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-md) var(--space-lg);
  background:rgba(0,0,0,.55);
  flex-shrink:0;
}
.scanner-bar-title{
  font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--scanner-fg);
}
.scanner-x{
  background:none;border:none;color:var(--scanner-fg);
  font-size:var(--fs-lg);line-height:1;
  width:44px;height:44px;border-radius:var(--radius-lg);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .15s ease;
}
.scanner-x:hover{background:rgba(var(--scanner-fg-rgb),.14);}
.scanner-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.scanner-stage{
  position:relative;flex:1 1 auto;
  display:flex;align-items:center;justify-content:center;
  background:var(--scanner-bg);overflow:hidden;min-height:0;
}
/* Autor-display:flex schlägt die UA-Regel [hidden]{display:none}; JS togglet
   stage.hidden beim Phasenwechsel (scanner-overlay.js) → expliziter Override. */
.scanner-stage[hidden]{display:none;}
.scanner-video{
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  object-fit:contain;background:var(--scanner-bg);
}
.scanner-status{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  padding:7px 14px;border-radius:999px;
  background:rgba(0,0,0,.62);color:var(--scanner-fg);
  font-size:var(--fs-sm);font-weight:var(--fw-medium);
  pointer-events:none;text-align:center;max-width:88%;
}
.scanner-status:empty{display:none;}

.scanner-controls{
  display:flex;align-items:center;justify-content:center;
  padding:var(--space-lg);background:rgba(0,0,0,.55);
  flex-shrink:0;
}
/* display:flex schlägt UA [hidden]{display:none}; JS togglet caps.hidden
   beim Phasenwechsel (scanner-overlay.js) → expliziter Override. */
.scanner-controls[hidden]{display:none;}
.scanner-capture{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:200px;padding:13px 24px;
  border-radius:999px;
  background:var(--accent);color:var(--accent-ink);
  border:1px solid var(--accent2);
  font-size:var(--fs-body);font-weight:var(--fw-bold);
  cursor:pointer;line-height:1;
  transition:background .15s ease,opacity .15s ease,transform .05s ease;
}
.scanner-capture:hover:not(:disabled){background:var(--accent3);}
.scanner-capture:active:not(:disabled){transform:translateY(1px);}
.scanner-capture:focus-visible{outline:2px solid var(--scanner-fg);outline-offset:3px;}
.scanner-capture:disabled{opacity:.5;cursor:not-allowed;}

/* ── Fehler-/Fallback-Zustand (Permission denied, keine Kamera) ────────── */
.scanner-error{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--space-lg);flex:1 1 auto;
  padding:var(--space-2xl) var(--space-lg);text-align:center;
}
.scanner-error[hidden]{display:none;}
.scanner-error-msg{
  font-size:var(--fs-body);color:var(--scanner-fg);
  font-weight:var(--fw-medium);line-height:1.5;max-width:360px;margin:0;
}
.scanner-pick{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 22px;border-radius:var(--radius-lg);
  background:var(--accent);color:var(--accent-ink);
  border:1px solid var(--accent2);
  font-size:var(--fs-body);font-weight:var(--fw-semibold);
  cursor:pointer;line-height:1;transition:background .15s ease;
}
.scanner-pick:hover{background:var(--accent3);}
.scanner-pick:focus-visible{outline:2px solid var(--scanner-fg);outline-offset:3px;}

/* ── PR2: Verarbeitungs-Zustand (loadCv-Spinner, "Bereite Scanner vor…") ─ */
.scanner-process{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--space-lg);flex:1 1 auto;
  padding:var(--space-2xl) var(--space-lg);text-align:center;
}
.scanner-process[hidden]{display:none;}
.scanner-spinner{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;
  color:var(--accent);
}
.scanner-process-msg{
  margin:0;font-size:var(--fs-body);font-weight:var(--fw-medium);
  color:var(--scanner-fg);max-width:340px;line-height:1.5;
}

/* ── PR2: Review/Preview + manuelle 4-Ecken-Korrektur ──────────────────── */
.scanner-review{
  display:flex;flex-direction:column;flex:1 1 auto;min-height:0;
}
.scanner-review[hidden]{display:none;}
.scanner-review-stage{
  display:flex;flex-direction:column;flex:1 1 auto;min-height:0;
}
.scanner-review-img{
  display:block;margin:auto;max-width:100%;max-height:100%;
  width:auto;height:auto;object-fit:contain;
  border-radius:var(--radius-md);background:var(--scanner-bg);
}
.scanner-corners{
  display:flex;flex-direction:column;flex:1 1 auto;min-height:0;
}
.scanner-corners-stage{
  position:relative;flex:1 1 auto;min-height:0;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.scanner-corners-img,
.scanner-corners-overlay{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;
}
.scanner-corners-img{z-index:0;}
.scanner-corners-overlay{
  z-index:1;cursor:grab;touch-action:none;
}
.scanner-cv-frame{
  position:absolute;width:0;height:0;border:0;left:-9999px;
  top:-9999px;visibility:hidden;
}
.scanner-corners-overlay:active{cursor:grabbing;}
.scanner-corners-hint{
  margin:0;padding:var(--space-sm) var(--space-md);
  text-align:center;font-size:var(--fs-sm);font-weight:var(--fw-medium);
  color:var(--scanner-fg);background:rgba(0,0,0,.55);flex-shrink:0;
}
.scanner-corners-controls{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--space-sm);
  padding:var(--space-lg);background:rgba(0,0,0,.55);flex-shrink:0;
}
.scanner-corners-confirm{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 22px;border-radius:999px;
  background:var(--accent);color:var(--accent-ink);
  border:1px solid var(--accent2);
  font-size:var(--fs-body);font-weight:var(--fw-bold);
  cursor:pointer;line-height:1;transition:background .15s ease;
}
.scanner-corners-confirm:hover{background:var(--accent3);}
.scanner-corners-confirm:focus-visible{
  outline:2px solid var(--scanner-fg);outline-offset:3px;
}
.scanner-corners-retake,
.scanner-corners-original{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 18px;border-radius:999px;
  background:rgba(var(--scanner-fg-rgb),.12);color:var(--scanner-fg);
  border:1px solid rgba(var(--scanner-fg-rgb),.32);
  font-size:var(--fs-body);font-weight:var(--fw-semibold);
  cursor:pointer;line-height:1;transition:background .15s ease;
}
.scanner-corners-retake:hover,
.scanner-corners-original:hover{background:rgba(var(--scanner-fg-rgb),.22);}
.scanner-corners-retake:focus-visible,
.scanner-corners-original:focus-visible{
  outline:2px solid var(--scanner-fg);outline-offset:3px;
}

/* ── PR3: Mehrseiten-Session — Thumbnail-Streifen, Sortieren, Löschen ──── */
.scanner-session{
  display:flex;flex-direction:column;flex:1 1 auto;min-height:0;
  padding:var(--space-lg);gap:var(--space-md);overflow:hidden;
}
.scanner-session-head{
  margin:0;text-align:center;flex-shrink:0;
  font-size:var(--fs-body);font-weight:var(--fw-semibold);
  color:var(--scanner-fg);
}
.scanner-pg-strip{
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;
  gap:var(--space-md);flex:1 1 auto;min-height:0;overflow:auto;
  padding:var(--space-sm) 0;
}
.scanner-pg-card{
  position:relative;display:flex;flex-direction:column;align-items:center;
  gap:var(--space-xs);
  padding:var(--space-sm);border-radius:var(--radius-md);
  background:rgba(var(--scanner-fg-rgb),.08);
  border:1px solid rgba(var(--scanner-fg-rgb),.18);
}
.scanner-pg-num{
  position:absolute;top:6px;left:6px;z-index:1;
  min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:var(--accent-ink);
  font-size:var(--fs-xs);font-weight:var(--fw-bold);line-height:1;
}
.scanner-pg-thumb-img{
  display:block;width:auto;height:auto;
  max-width:130px;max-height:170px;
  border-radius:var(--radius-sm);background:var(--scanner-bg);
  border:1px solid rgba(var(--scanner-fg-rgb),.22);
}
.scanner-pg-acts{
  display:flex;align-items:center;justify-content:center;
  gap:var(--space-xs);
}
.scanner-pg-act{
  width:34px;height:34px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  background:rgba(var(--scanner-fg-rgb),.14);color:var(--scanner-fg);
  border:1px solid rgba(var(--scanner-fg-rgb),.30);
  font-size:var(--fs-body);line-height:1;cursor:pointer;
  transition:background .15s ease;
}
.scanner-pg-act:hover:not(:disabled){
  background:rgba(var(--scanner-fg-rgb),.24);
}
.scanner-pg-act:focus-visible{
  outline:2px solid var(--scanner-fg);outline-offset:2px;
}
.scanner-pg-act:disabled{opacity:.4;cursor:not-allowed;}
.scanner-pg-del{
  border-color:rgba(255,120,120,.55);color:rgb(255,150,150);
}
.scanner-pg-del:hover:not(:disabled){background:rgba(255,90,90,.22);}
.scanner-session-controls{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--space-sm);flex-shrink:0;
}
.scanner-session-add{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 18px;border-radius:999px;
  background:rgba(var(--scanner-fg-rgb),.12);color:var(--scanner-fg);
  border:1px solid rgba(var(--scanner-fg-rgb),.32);
  font-size:var(--fs-body);font-weight:var(--fw-semibold);
  cursor:pointer;line-height:1;transition:background .15s ease;
}
.scanner-session-add:hover:not(:disabled){
  background:rgba(var(--scanner-fg-rgb),.22);
}
.scanner-session-add:disabled{opacity:.5;cursor:not-allowed;}
.scanner-session-add:focus-visible{
  outline:2px solid var(--scanner-fg);outline-offset:3px;
}
.scanner-session-done{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 22px;border-radius:999px;
  background:var(--accent);color:var(--accent-ink);
  border:1px solid var(--accent2);
  font-size:var(--fs-body);font-weight:var(--fw-bold);
  cursor:pointer;line-height:1;transition:background .15s ease;
}
.scanner-session-done:hover:not(:disabled){background:var(--accent3);}
.scanner-session-done:disabled{opacity:.5;cursor:not-allowed;}
.scanner-session-done:focus-visible{
  outline:2px solid var(--scanner-fg);outline-offset:3px;
}
.scanner-session-hint{
  margin:0;text-align:center;flex-shrink:0;
  font-size:var(--fs-sm);font-weight:var(--fw-medium);
  color:rgba(var(--scanner-fg-rgb),.78);
}
/* F2: handlungsfähige Fehlermeldung über dem Seiten-Streifen — der Streifen
   (Löschen/Sortieren) + „Erneut hochladen" bleiben darunter bedienbar. */
.scanner-session-notice{
  margin:0 auto;max-width:none;text-align:center;flex-shrink:0;
  font-size:var(--fs-sm);
  color:rgba(255,138,128,.95);
}

/* ── PR4: Per-Card-Auto-Crop-Chip + failed-state-Actions ───────────────── */
/* Chip auf der Card während background-crop läuft. Neutraler tint (kein
   warning yellow), gold accent für den Spinner — signalisiert "läuft", nicht
   "Fehler". Pattern: oben rechts auf der Card, nicht über das Thumbnail. */
.scanner-pg-chip{
  display:inline-flex;align-items:center;gap:var(--space-xs);
  padding:4px 9px;border-radius:999px;
  background:rgba(var(--scanner-fg-rgb),.18);
  color:var(--scanner-fg);
  font-size:var(--fs-xs);font-weight:var(--fw-medium);
  margin-top:var(--space-xs);
}
.scanner-pg-chip-spinner{
  width:12px;height:12px;border-radius:50%;
  border:2px solid rgba(var(--scanner-fg-rgb),.35);
  border-top-color:var(--accent);
  animation:scanner-pg-chip-spin 0.9s linear infinite;
  flex-shrink:0;
}
@keyframes scanner-pg-chip-spin{
  to{transform:rotate(360deg);}
}
.scanner-pg-chip-msg{line-height:1.2;}

/* failed-state — neutrale Border-Variant (NICHT red), Card signalisiert
   "Auto-Crop nicht möglich, deine Wahl". */
.scanner-pg-failed{
  border-color:rgba(255,180,90,.55);
}

.scanner-pg-actions-failed{
  display:flex;flex-direction:column;gap:var(--space-xs);
  margin-top:var(--space-xs);width:100%;
}
.scanner-pg-action-keep,
.scanner-pg-action-corners,
.scanner-pg-action-accept{
  display:inline-flex;align-items:center;justify-content:center;
  padding:7px 10px;border-radius:var(--radius-md);
  background:rgba(var(--scanner-fg-rgb),.14);color:var(--scanner-fg);
  border:1px solid rgba(var(--scanner-fg-rgb),.32);
  font-size:var(--fs-xs);font-weight:var(--fw-medium);
  cursor:pointer;line-height:1.1;
  transition:background .15s ease;
  min-height:32px;
}
.scanner-pg-action-keep:hover:not(:disabled),
.scanner-pg-action-corners:hover:not(:disabled),
.scanner-pg-action-accept:hover:not(:disabled){
  background:rgba(var(--scanner-fg-rgb),.24);
}
.scanner-pg-action-keep:focus-visible,
.scanner-pg-action-corners:focus-visible,
.scanner-pg-action-accept:focus-visible{
  outline:2px solid var(--scanner-fg);outline-offset:2px;
}
.scanner-pg-action-keep:disabled,
.scanner-pg-action-corners:disabled,
.scanner-pg-action-accept:disabled{opacity:.5;cursor:not-allowed;}

/* crop-ready (P1): "Auto-Zuschnitt übernehmen" ist die primäre Aktion —
   accent-Border + accent-Tint hebt sie vom neutralen "Original behalten" ab.
   Die gezeigte Vorschau bleibt das stabile Original, bis der User übernimmt. */
.scanner-pg-action-accept{
  border-color:var(--accent);
  background:rgba(var(--scanner-fg-rgb),.20);
}
.scanner-pg-chip-ready{
  background:rgba(var(--scanner-fg-rgb),.12);
}

/* Neutrale Info-Notice (failed-Count) — info-styling, NICHT warning yellow
   (Codex-Finding #4: System-Failure soll nicht als User-Compromise framed
   werden). */
.scanner-session-info{
  margin:0 auto;max-width:none;text-align:center;flex-shrink:0;
  font-size:var(--fs-sm);
  color:rgba(var(--scanner-fg-rgb),.82);
}

@media (max-width: 600px){
  .scanner-pg-chip{padding:3px 7px;font-size:var(--fs-xs);}
  .scanner-pg-chip-spinner{width:10px;height:10px;}
  .scanner-pg-action-keep,
  .scanner-pg-action-corners,
  .scanner-pg-action-accept{font-size:10px;padding:6px 8px;min-height:30px;}
}

@media (prefers-reduced-motion: reduce){
  .scanner-pg-chip-spinner{
    animation:none;
    border-top-color:var(--accent);
  }
}

/* ── Light-Theme: Overlay bleibt bewusst dunkel (Kamera-Kontrast), nur der
   Dropzone-Button folgt den Theme-Tokens (oben über var(--…) bereits).
   PR2 Spinner/Review/Corners + PR3 Session-Streifen erben dieselben
   theme-unabhängigen --scanner-fg-rgb / --accent-Werte → korrekt in dark
   UND light (Overlay ist in beiden Themes bewusst dunkel). ── */

@media (max-width: 600px){
  .scanner-bar{padding:var(--space-sm) var(--space-md);}
  .scanner-controls{padding:var(--space-md);}
  .scanner-capture{min-width:170px;width:100%;max-width:280px;}
  .scanner-corners-controls{padding:var(--space-md);}
  .scanner-corners-confirm,
  .scanner-corners-retake,
  .scanner-corners-original{flex:1 1 auto;min-width:120px;}
  .scanner-session{padding:var(--space-md);}
  .scanner-pg-thumb-img{max-width:100px;max-height:130px;}
  .scanner-session-add,
  .scanner-session-done{flex:1 1 auto;min-width:140px;}
}

@media (prefers-reduced-motion: reduce){
  .scanner-modal{animation:none;}
  .beleg-scan-btn,.scanner-capture,
  .scanner-corners-confirm,.scanner-corners-retake,
  .scanner-corners-original,
  .scanner-pg-act,.scanner-session-add,
  .scanner-session-done{transition:none;}
}

/* Body-Scroll-Lock wenn Overlay aktiv ist (vom JS via class auf <html>
   gesetzt). Analog _15-maintenance.css:38-39, aber EIGENE Klasse. */
html.is-scanner-active{overflow:hidden;}
html.is-scanner-active body{overflow:hidden;}

/* ───────────────────────────────────────────────────────────────────────────
   Multi-File-Bundle-Dialog (PR 4 — File-Picker → "Als eine mehrseitige
   Rechnung bündeln?"). Erscheint nachdem der User N≥2 Bilddateien im
   Belege-Upload-Picker ausgewählt hat. Filename-Heuristic (Sequenz wie
   Rechnung_001/002/003 oder IMG_1234/IMG_1235) bestimmt, welcher Button
   gold-primary ist (Bundle vs Separat). Folgt der existing .ov + .modal-
   Konvention (vgl. _10-shell.css), Tokens aus _00-tokens.css. Dark + Light
   beide Pflicht.

   Approved Mockup: scanner-bundle-dialog-20260523/variant-C.png +
   Beleg-Icon-Swap vom Variant A.
   ─────────────────────────────────────────────────────────────────────── */

/* Eigene Scroll-Lock-Klasse (analog is-scanner-active, NICHT
   wiederverwenden — das Modal ist NICHT scanner-Kontext). */
html.is-bundle-active{overflow:hidden;}
html.is-bundle-active body{overflow:hidden;}

/* Modal-Surface — reuse .ov für Backdrop (rgba(0,0,0,.55)), eigene Klasse
   für die Card. */
.bundle-dialog{
  display:flex;flex-direction:column;
  width:92vw;max-width:480px;max-height:80vh;
  background:var(--card);color:var(--text);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  animation:bundle-dialog-in .18s ease;
}
@keyframes bundle-dialog-in{
  from{opacity:0;transform:translateY(4px);}
  to{opacity:1;transform:translateY(0);}
}

.bundle-dialog-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-md) var(--space-lg);
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.bundle-dialog-brand{
  display:inline-flex;align-items:center;gap:var(--space-xs);
  font-size:var(--fs-body);font-weight:var(--fw-bold);
  color:var(--accent);
  letter-spacing:.2px;
}
.bundle-dialog-brand svg{flex-shrink:0;}
.bundle-dialog-x{
  background:none;border:none;color:var(--text2);
  font-size:var(--fs-lg);line-height:1;
  width:36px;height:36px;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .15s ease,color .15s ease;
}
.bundle-dialog-x:hover{background:var(--bg3);color:var(--text);}
.bundle-dialog-x:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}

.bundle-dialog-body{
  padding:var(--space-lg);
  overflow-y:auto;
  flex:1 1 auto;
  min-height:0;
}

.bundle-dialog-title{
  margin:0 0 var(--space-xs);
  font-size:var(--fs-lg);font-weight:var(--fw-semibold);
  color:var(--text);line-height:1.3;
}
.bundle-dialog-sub{
  margin:0 0 var(--space-md);
  font-size:var(--fs-body);color:var(--text2);
  line-height:1.5;
}
.bundle-dialog-sub strong{color:var(--text);font-weight:var(--fw-semibold);}

/* Thumbnail-Stripe — horizontal scroll mit mask gradient fade rechts
   (D4-Entscheidung: signal "es geht weiter"). */
.bundle-dialog-stripe{
  display:flex;flex-wrap:nowrap;
  gap:var(--space-sm);
  overflow-x:auto;overflow-y:hidden;
  padding:var(--space-xs) 0 var(--space-md);
  margin:0 0 var(--space-md);
  list-style:none;
  /* Gradient-Fade rechts: signalisiert horizontal-scroll auf Mobile */
  mask-image:linear-gradient(to right, black 88%, transparent);
  -webkit-mask-image:linear-gradient(to right, black 88%, transparent);
}
.bundle-dialog-thumb{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  flex-shrink:0;
  width:80px;
}
.bundle-dialog-thumb-img{
  width:80px;height:96px;object-fit:cover;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
}
.bundle-dialog-thumb-name{
  font-size:var(--fs-xs);color:var(--text2);
  max-width:80px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Stage-Progress — sichtbar während Upload läuft (D11: anchored progress
   statt persistent toast). aria-live polite. */
.bundle-dialog-stages{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-xs);
  padding:var(--space-md);
  margin:0 0 var(--space-md);
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
}
.bundle-dialog-stages[hidden]{display:none;}
.bundle-dialog-stage{
  display:inline-flex;align-items:center;gap:var(--space-xs);
  font-size:var(--fs-xs);font-weight:var(--fw-medium);
  color:var(--text3);
  flex:1 1 auto;
  text-align:center;
}
.bundle-dialog-stage::before{
  content:'';
  display:inline-block;
  width:10px;height:10px;border-radius:50%;
  background:transparent;
  border:1.5px solid var(--text3);
  flex-shrink:0;
}
.bundle-dialog-stage[data-state="active"]{
  color:var(--accent);
}
.bundle-dialog-stage[data-state="active"]::before{
  background:var(--accent);
  border-color:var(--accent);
  animation:bundle-stage-pulse 1.2s ease-in-out infinite;
}
.bundle-dialog-stage[data-state="done"]{
  color:var(--green);
}
.bundle-dialog-stage[data-state="done"]::before{
  background:var(--green);
  border-color:var(--green);
}
.bundle-dialog-stage[data-state="failed"]{
  color:var(--red);
}
.bundle-dialog-stage[data-state="failed"]::before{
  background:var(--red);
  border-color:var(--red);
}
@keyframes bundle-stage-pulse{
  0%,100%{opacity:1;}
  50%{opacity:.55;}
}

/* Action-Buttons — Primary (gold) und Secondary (outline) sind class-
   toggle-driven, NICHT hardcoded auf einen bestimmten Button. Die
   Filename-Heuristic (D10) entscheidet, welcher Button gold ist:
   - bundle-action-primary  → gold-Variante
   - bundle-action-secondary → outline-Variante
   Sodass „Ja, bündeln" oder „Nein, separat" wechselseitig primary werden
   kann.  */
.bundle-dialog-actions{
  display:flex;flex-direction:column;gap:var(--space-sm);
  margin:0 0 var(--space-md);
}
.bundle-dialog-actions .btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--space-sm);
  padding:11px 18px;border-radius:999px;
  font-size:var(--fs-body);font-weight:var(--fw-semibold);
  cursor:pointer;line-height:1;
  transition:background .15s ease,opacity .15s ease,transform .05s ease;
  min-height:44px;
}
.bundle-dialog-actions .btn svg{flex-shrink:0;}
.bundle-dialog-actions .btn:active:not(:disabled){transform:translateY(1px);}
.bundle-dialog-actions .btn:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}
.bundle-dialog-actions .btn:disabled{opacity:.5;cursor:not-allowed;}

/* Gold-Variante */
.bundle-action-primary{
  background:var(--accent);color:var(--accent-ink);
  border:1px solid var(--accent2);
  font-weight:var(--fw-bold);
}
.bundle-action-primary:hover:not(:disabled){background:var(--accent3);}

/* Outline-Variante */
.bundle-action-secondary{
  background:transparent;color:var(--text);
  border:1px solid var(--border2);
}
.bundle-action-secondary:hover:not(:disabled){
  background:var(--bg3);
}

.bundle-dialog-footer{
  margin:0;
  text-align:center;
  font-size:var(--fs-xs);color:var(--text3);
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--space-xs);
  padding:var(--space-sm) var(--space-lg) var(--space-md);
  border-top:1px solid var(--border);
  flex-shrink:0;
}
.bundle-dialog-footer svg{flex-shrink:0;opacity:.7;}

/* "+ N weitere Datei(en)"-Hint unter dem Stripe — wie footer, aber ohne
   Border-Top und mit weniger Padding (eng am Stripe). */
.bundle-dialog-more{
  margin:0 0 var(--space-md);
  text-align:center;
  font-size:var(--fs-xs);color:var(--text3);
}

/* Error-Highlight im Subtext bei Bundle-Failure */
.bundle-dialog-error{
  color:var(--red);
  font-weight:var(--fw-semibold);
}

/* HEIC-Thumbnail Fallback — Browser können HEIC nicht in canvas decoden,
   also Text-Placeholder mit Brand-Akzent. */
.bundle-dialog-thumb-heic{
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--text2);
  font-weight:var(--fw-semibold);
}

/* Mobile — Modal füllt mehr Bildschirm, Buttons full-width (durch flex-col
   bereits gegeben), Footer kompakt. */
@media (max-width: 600px){
  .bundle-dialog{width:96vw;max-height:88vh;}
  .bundle-dialog-bar{padding:var(--space-sm) var(--space-md);}
  .bundle-dialog-body{padding:var(--space-md);}
  .bundle-dialog-thumb{width:72px;}
  .bundle-dialog-thumb-img{width:72px;height:86px;}
  .bundle-dialog-stages{padding:var(--space-sm);gap:4px;}
  .bundle-dialog-stage{font-size:10px;}
}

@media (prefers-reduced-motion: reduce){
  .bundle-dialog{animation:none;}
  .bundle-dialog-stage[data-state="active"]::before{animation:none;}
  .bundle-dialog-actions .btn{transition:none;}
}

/* ════════════════════════════════════════════════════════════════════
   DASHBOARD V3 — Rest A: Signal + Focus-Rail + Analytics + Module
   + Chart-Empty + Chart-Tooltip (incl. Mobile-Tooltip-Override)
   Ausgeschnitten aus _20-dashboard.css (PR-S1.4, 2026-05-24).
   Quelle bei Schreibung: _20-dashboard.css Z. 5–530.
   Plan: docs/architecture/2026-05-16-dashboard-css-split-plan.md

   MANIFEST-Position direkt nach _20a-dashboard-v3-shell.css und VOR
   _20-dashboard.css — Source-Order der V3-Cascade-Selektoren bleibt
   erhalten (Lehre aus PR-S1.3-Codex-[P1]-Fix: Base vor Mobile-Overrides).
   ════════════════════════════════════════════════════════════════════ */
/* Signal band */
.v3-signal{
  display:flex;align-items:center;gap:9px;margin:0 0 12px;padding:11px 14px;border-radius:8px;
  background:rgba(var(--surface-rgba-base),.025);
  border:1px solid rgba(var(--surface-rgba-base),.07);color:var(--text2);font-size:12px;
}
.v3-signal-dot{width:8px;height:8px;border-radius:50%;background:var(--v3-gold);flex-shrink:0;}
.v3-signal.sev-red .v3-signal-dot{background:var(--v3-red);}
.v3-signal.sev-yellow .v3-signal-dot{background:var(--v3-gold);}
.v3-signal-text{flex:1;min-width:0;color:var(--text);}
.v3-signal-action{border-radius:8px!important;}
.v3-signal-more{font-family:var(--mono);font-size:var(--fs-xs);color:var(--text3);}

/* Focus cards */
.v3-focus-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md);margin-bottom:30px;}
.v3-focus-item{
  position:relative;overflow:hidden;border-radius:var(--radius-xl);padding:19px 21px 18px;
  background:
    linear-gradient(180deg,rgba(28,33,47,.95),rgba(20,24,36,.97)),
    linear-gradient(135deg,rgba(var(--surface-rgba-base),.012),transparent 42%);
  border:1px solid rgba(var(--surface-rgba-base),.075);min-width:0;
  box-shadow:
    0 8px 22px rgba(0,0,0,.12),
    0 1px 0 rgba(var(--surface-rgba-base),.02) inset;
}
.v3-focus-item::before{
  content:'';
  position:absolute;
  left:18px;
  right:18px;
  top:0;
  height:2px;
  border-radius:0 0 999px 999px;
  background:rgba(148,163,184,.26);
}
.v3-focus-item::after{display:none;}
/* is-green nutzt echtes Grün (var(--green)-Familie aus dem SG-Chip-System).
   User-Report 2026-04-17: vorher war is-green ≡ is-yellow (beide gold),
   der "alles erledigt"-Success-State war im Pixel nie sichtbar. */
.v3-focus-item.is-green::before{background:rgba(110,200,140,.82);}
.v3-focus-item.is-yellow::before{background:rgba(232,184,75,.7);}
.v3-focus-item.is-red::before{background:rgba(248,113,113,.74);}
.v3-focus-item.is-blue::before{background:rgba(110,185,255,.62);}
.v3-focus-label{font-size:var(--fs-sm);font-weight:var(--fw-bold);letter-spacing:.07em;text-transform:uppercase;color:var(--text3);margin-bottom:10px;}
.v3-focus-value{font-family:var(--mono);font-size:var(--fs-xl);font-weight:var(--fw-heavy);color:var(--text);line-height:1.1;overflow-wrap:anywhere;}
.v3-focus-item.is-green .v3-focus-value{color:var(--tone-good-fg);}
.v3-focus-item.is-yellow .v3-focus-value{color:var(--v3-gold);}
.v3-focus-item.is-red .v3-focus-value{color:var(--v3-red-soft);}
.v3-focus-item.is-blue .v3-focus-value{color:var(--text);}
.v3-focus-sub{font-size:11.5px;color:var(--text3);line-height:1.52;margin-top:8px;overflow-wrap:anywhere;}
.v3-focus-progress{height:5px;background:rgba(var(--surface-rgba-base),.06);overflow:hidden;margin-top:14px;}
.v3-focus-progress span{display:block;height:100%;background:var(--v3-gold);}
/* Progress-Bar-Fill folgt dem Card-Tone (Belegstatus-Konsistenz 2026-04-17) */
/* stylelint-disable color-no-hex -- bestehende Dashboard-Tone-Palette, bewusst gepinnt */
.v3-focus-item.is-green .v3-focus-progress span{background:var(--green);}
/* stylelint-enable color-no-hex */
.v3-focus-item.is-red .v3-focus-progress span{background:var(--v3-red-soft);}
.v3-focus-item.is-blue .v3-focus-progress span{background:var(--accent);}
/* .is-yellow + .is-neutral fallen auf den Default (var(--v3-gold)) zurück */
.v3-focus-action{margin-top:12px;border-radius:10px!important;}

/* Analytics */
.v3-analytics{
  border-top:1px solid rgba(var(--surface-rgba-base),.06);
  padding-top:28px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.v3-analytics-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.v3-analytics-copy{max-width:640px;}
.v3-analytics-kicker,
.v3-subcard-kicker{
  display:inline-block;
  font-size:10.5px;
  font-weight:var(--fw-heavy);
  letter-spacing:.11em;
  text-transform:uppercase;
  color:rgba(245,208,122,.76);
  margin-bottom:7px;
}
.v3-analytics-title{
  font-size:var(--fs-xl);
  font-weight:var(--fw-heavy);
  color:var(--text-strong);
  line-height:1.12;
  margin:0 0 8px;
}
.v3-analytics-sub,
.v3-lower-sub,
.v3-subcard-sub{
  margin:0;
  font-size:var(--fs-base);
  line-height:var(--lh-base);
  color:rgba(var(--text-rgba-base),.58);
}
.v3-analytics-pills{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.v3-analytics-pill{
  min-width:148px;
  padding:11px 13px;
  border-radius:13px;
  background:rgba(var(--surface-rgba-base),.032);
  border:1px solid rgba(var(--surface-rgba-base),.07);
  box-shadow:inset 0 1px 0 rgba(var(--surface-rgba-base),.02);
}
.v3-analytics-pill span{
  display:block;
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(var(--text-rgba-base),.42);
  margin-bottom:5px;
}
.v3-analytics-pill strong{
  display:block;
  font-size:14px;
  font-weight:var(--fw-heavy);
  color:var(--text-strong);
}
.v3-analysis-grid{
  display:grid;
  grid-template-columns:minmax(0,1.28fr) minmax(320px,.92fr);
  gap:var(--space-lg);
  align-items:stretch;
}
.v3-module{
  position:relative;
  /* `overflow:clip` (statt hidden) clippt die Radial-Gradient-Dekoration weiterhin
     auf den Karten-Bereich, lässt aber via overflow-clip-margin den Info-Tooltip
     bis zu 380px über den Karten-Rand hinausragen, ohne abgeschnitten zu werden. */
  overflow:clip;
  overflow-clip-margin:380px;
  min-width:0;
  padding:22px;
  border-radius:var(--radius-xl);
  border:1px solid rgba(var(--surface-rgba-base),.08);
  display:flex;
  flex-direction:column;
  gap:var(--space-lg);
  height:100%;
  background:linear-gradient(180deg,rgba(var(--surface-rgba-base),.04),rgba(var(--surface-rgba-base),.02));
  box-shadow:0 16px 40px rgba(0,0,0,.16);
}
.v3-module::before{
  content:'';
  position:absolute;
  right:-28px;
  top:-32px;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(var(--surface-rgba-base),.08),transparent 72%);
  pointer-events:none;
  opacity:.45;
}
.v3-module>*{position:relative;z-index:1;}
.v3-module-primary{
  background:
    linear-gradient(150deg,rgba(16,23,34,.98) 0%,rgba(15,28,40,.98) 54%,rgba(11,19,29,.99) 100%);
  border-color:rgba(83,214,179,.14);
}
.v3-module-secondary{
  background:
    linear-gradient(160deg,rgba(20,24,36,.98) 0%,rgba(21,24,38,.98) 54%,rgba(28,23,15,.94) 100%);
  border-color:rgba(232,184,75,.12);
}
.v3-module-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  flex-wrap:wrap;
}
.v3-module-copy{max-width:430px;}
.v3-module-kicker{
  display:inline-block;
  font-size:var(--fs-xs);
  font-weight:var(--fw-heavy);
  letter-spacing:.11em;
  text-transform:uppercase;
  color:rgba(var(--text-rgba-base),.46);
  margin-bottom:8px;
}
.v3-module-title,
.v3-lower-title,
.v3-subcard-title{
  font-size:var(--fs-lg);
  font-weight:var(--fw-heavy);
  color:var(--text-strong);
  line-height:var(--lh-tight);
  margin:0;
}
.v3-module-sub{margin:7px 0 0;font-size:var(--fs-base);line-height:var(--lh-base);color:rgba(var(--text-rgba-base),.58);}
.v3-module-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(145px,1fr));
  gap:10px;
  min-width:280px;
  max-width:360px;
  flex:1;
}
.v3-module-stat{
  min-width:0;
  padding:12px 14px;
  border-radius:var(--radius-lg);
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:rgba(var(--surface-rgba-base),.038);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.v3-module-stat.is-good{border-color:var(--tone-good-border);background:var(--tone-good-bg);}
.v3-module-stat.is-warn{border-color:rgba(232,184,75,.15);background:rgba(232,184,75,.06);}
.v3-module-stat.is-info{border-color:rgba(123,176,255,.14);background:rgba(123,176,255,.06);}
.v3-module-stat-label{
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(var(--text-rgba-base),.42);
}
.v3-module-stat-value{
  font-family:var(--mono);
  font-size:16px;
  font-weight:var(--fw-heavy);
  color:var(--text-strong);
  line-height:1.18;
  overflow-wrap:anywhere;
}
.v3-module-stat.is-good .v3-module-stat-value{color:var(--tone-good-fg);}
.v3-module-stat.is-warn .v3-module-stat-value{color:var(--tone-warn-text);}
.v3-module-stat.is-info .v3-module-stat-value{color:var(--tone-info-fg);}
.v3-module-stat-sub{
  font-size:var(--fs-sm);
  line-height:1.45;
  color:rgba(var(--text-rgba-base),.56);
}
.v3-module-chips{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-sm);
}
.v3-module-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 11px;
  border-radius:var(--radius-pill);
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:rgba(var(--surface-rgba-base),.034);
  font-size:var(--fs-sm);
  color:rgba(var(--text-rgba-base),.66);
  line-height:1.35;
}
.v3-module-chip::before{
  content:'';
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(139,147,181,.65);
  flex-shrink:0;
}
.v3-module-chip.is-good::before{background:var(--tone-good-fg);}
.v3-module-chip.is-warn::before{background:var(--v3-gold);}
.v3-module-chip.is-neutral::before{background:rgba(139,147,181,.72);}
.v3-module-chart-shell{
  border-radius:16px;
  border:1px solid rgba(var(--surface-rgba-base),.06);
  background:linear-gradient(180deg,rgba(var(--surface-rgba-base),.045),rgba(var(--surface-rgba-base),.02));
  padding:16px 18px 12px;
  min-height:252px;
  display:flex;
  flex:1 1 auto;
  align-items:stretch;
}
.v3-module-chart-shell>div{
  flex:1 1 auto;
  min-height:100%;
}
.v3-module-chart-shell.is-primary{
  min-height:294px;
  border-color:rgba(83,214,179,.14);
  background:
    linear-gradient(180deg,rgba(17,38,42,.72),rgba(16,24,35,.62)),
    radial-gradient(circle at top right,rgba(83,214,179,.12),transparent 42%);
}
.v3-module-chart-shell.is-secondary{
  min-height:278px;
  border-color:rgba(232,184,75,.12);
  background:
    linear-gradient(180deg,rgba(34,29,22,.34),rgba(17,22,35,.62)),
    radial-gradient(circle at top right,rgba(232,184,75,.10),transparent 42%);
}
.v3-module-primary canvas{max-height:260px;}
.v3-module-secondary canvas{max-height:214px;}
.v3-module-empty{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:var(--space-xl);
}
.v3-module-empty span{
  max-width:280px;
  font-size:12px;
  line-height:var(--lh-base);
  color:var(--text3);
}
.v3-chart-empty-panel{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:22px;
  text-align:center;
  border-radius:8px;
  border:1px dashed rgba(var(--surface-rgba-base),.12);
  background:linear-gradient(180deg,rgba(var(--surface-rgba-base),.035),rgba(var(--surface-rgba-base),.012));
}
.v3-chart-empty-copy{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  max-width:340px;
}
.v3-chart-empty-copy strong{
  font-size:14px;
  font-weight:var(--fw-heavy);
  color:var(--text-strong);
}
.v3-chart-empty-copy span{
  font-size:12px;
  line-height:var(--lh-base);
  color:var(--text3);
}
.v3-tax-empty-periods{
  display:grid;
  grid-template-columns:repeat(4,minmax(42px,1fr));
  gap:8px;
  width:min(100%,320px);
}
.v3-tax-empty-periods span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  border-radius:8px;
  border:1px solid rgba(232,184,75,.16);
  background:rgba(232,184,75,.055);
  color:rgba(var(--text-rgba-base),.64);
  font-family:var(--mono);
  font-size:11px;
  font-weight:var(--fw-bold);
}
.v3-tax-empty-periods span::after{
  content:'';
  display:block;
  width:4px;
  height:4px;
  margin-left:7px;
  border-radius:50%;
  background:rgba(139,147,181,.46);
}
.v3-chart-tooltip{
  position:absolute;
  left:0;
  top:0;
  min-width:176px;
  max-width:240px;
  padding:12px 13px;
  border-radius:16px;
  border:1px solid rgba(var(--surface-rgba-base),.12);
  background:linear-gradient(180deg,rgba(11,15,24,.96),rgba(15,19,30,.9));
  backdrop-filter:blur(14px) saturate(1.12);
  -webkit-backdrop-filter:blur(14px) saturate(1.12);
  box-shadow:0 18px 44px rgba(0,0,0,.34),inset 0 1px 0 rgba(var(--surface-rgba-base),.04);
  opacity:0;
  pointer-events:none;
  transform:translateY(8px) scale(.985);
  transform-origin:center;
  transition:opacity .16s ease,transform .16s ease;
  z-index:8;
}
.v3-chart-tooltip.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}
.v3-chart-tooltip::after{
  content:'';
  position:absolute;
  left:-6px;
  top:50%;
  width:12px;
  height:12px;
  background:rgba(12,16,25,.94);
  border-left:1px solid rgba(var(--surface-rgba-base),.1);
  border-bottom:1px solid rgba(var(--surface-rgba-base),.1);
  transform:translateY(-50%) rotate(45deg);
}
.v3-chart-tooltip.is-flip::after{
  left:auto;
  right:-6px;
  border-left:none;
  border-bottom:none;
  border-right:1px solid rgba(var(--surface-rgba-base),.1);
  border-top:1px solid rgba(var(--surface-rgba-base),.1);
}
/* Phase 2 / PR 6a (2026-05-06): Tooltip-Top-Mode auf Mobile.
   `_renderV3Tooltip` setzt is-top wenn chart-width < 480px und positioniert
   den Tooltip oben am Chart statt seitlich am Cursor. Side-Pfeil wäre dann
   in der falschen Richtung — daher ausblenden. */
.v3-chart-tooltip.is-top::after { display: none; }
.v3-chart-tooltip-title{
  margin-bottom:10px;
  font-size:var(--fs-base);
  font-weight:var(--fw-heavy);
  color:var(--text-strong);
  line-height:1.2;
}
/* Phase 2 / PR 3: Cockpit-Tooltip-Subtitle ("aktueller Monat" / "unvollständig") */
.cockpit-tooltip-subtitle{
  font-size:11.5px;
  font-weight:500;
  color:var(--text2);
  letter-spacing:0;
}
.v3-chart-tooltip-body{
  display:flex;
  flex-direction:column;
  gap:var(--space-sm);
}
/* Phase 2 / PR 3: Cockpit-Tooltip-Footer (Bester-Monat / Δ-vs-Vormonat) */
.cockpit-tooltip-footer{
  margin-top:10px;
  padding-top:8px;
  border-top:1px solid var(--border);
  font-size:11px;
  color:var(--text2);
  font-style:italic;
  line-height:1.4;
}
.v3-chart-tooltip-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.v3-chart-tooltip-key{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-width:0;
  font-size:12px;
  font-weight:var(--fw-semibold);
  color:rgba(var(--text-rgba-base),.72);
}
.v3-chart-tooltip-meta{
  display:inline-flex;
  align-items:center;
  margin-left:6px;
  padding:2px 6px;
  border-radius:var(--radius-pill);
  border:1px solid rgba(var(--surface-rgba-base),.09);
  background:rgba(var(--surface-rgba-base),.045);
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  color:rgba(var(--text-rgba-base),.56);
}
.v3-chart-tooltip-swatch{
  width:11px;
  height:11px;
  border-radius:3px;
  background:var(--sw,var(--text2));
  /* Intentional: weißer Border auf Chart-Swatches (Kontrast gegen arbitrary Swatch-Farben).
     --surface-solid-rgba-base bleibt 255,255,255 in beiden Modi; body.light Override
     unten verschärft auf .88. */
  border:1px solid rgba(var(--surface-solid-rgba-base),.55);
  box-shadow:0 0 0 1px rgba(var(--surface-rgba-base),.06);
  flex-shrink:0;
}
.v3-chart-tooltip-row strong{
  font-family:var(--mono);
  font-size:12px;
  font-weight:var(--fw-heavy);
  color:var(--text-strong);
  white-space:nowrap;
  text-align:right;
}

/* Phase 2 / PR 6a (2026-05-06): Mobile-Tooltip-Polish. Auf Mobile (<768px)
   ist die Chart-Container-Breite ~360px. Default-Tooltip mit 240px
   max-width + Standard-Padding verdeckt nahezu die ganze Chart-Fläche
   (Live-Smoke-Befund). Wir verkleinern auf Mobile und kappen die max-width
   konservativer. Die JS-Position (`_renderV3Tooltip`) clampt zusätzlich an
   den Chart-Rand, das passt dazu. */
@media (max-width: 768px) {
  .v3-chart-tooltip {
    min-width: 0;
    max-width: 200px;
    padding: 9px 11px;
    border-radius: 12px;
  }
  .v3-chart-tooltip-title { margin-bottom: 7px; font-size: 12.5px; }
  .v3-chart-tooltip-row { gap: 8px; }
  .v3-chart-tooltip-key { font-size: 11px; gap: 6px; }
  .v3-chart-tooltip-row strong { font-size: 11px; }
  .v3-chart-tooltip-swatch { width: 9px; height: 9px; }
  .cockpit-tooltip-subtitle { font-size: 10.5px; }
  .cockpit-tooltip-footer { font-size: 10px; margin-top: 7px; padding-top: 6px; }
}

/* F-MOB-012 — JS-gesteuerte Info-Tooltip-Sichtbarkeit via .is-open.
   dashboard-v3.js (_v3InfoToggleBinder) setzt per classList.toggle('is-open')
   auf dem geklickten .v3-info-inline oder .v3-th-info — Touch/Click-Toggle
   statt :hover, weil Touch-Geraete :hover nicht zuverlaessig triggern.
   Diese Regel war in _20a-dashboard-v3-shell.css (zusammen mit dem Shell-Block
   geloescht) — muss jedoch erhalten bleiben, weil dashboard-v3.js aktiv ist
   (public/js/.legacy/dashboard-v3.js, _v3InfoToggleBinder). */
.v3-info-inline.is-open .v3-th-tip,
.v3-th-info.is-open .v3-th-tip{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* ════════════════════════════════════════════════════════════════════
   DASHBOARD V3 — Light Mode Overrides
   Konsolidierter `body.light` Override-Block für alle V3-Selektoren:
   Hero-Shell, Profit, Metric, Pulse-Bar, Chart-Tooltip, Signal,
   Focus-Rail, Analytics, Module (+ -primary/-secondary/-stat/-chip),
   Subcard, Topcat, Detail-Card, Year-Compare, Year-Stat —
   inkl. der V3-Steuergesundheit-Light-Overrides
   (.v3-metric-th / .v3-th-* / .v3-th-chip).
   Ausgeschnitten aus _20-dashboard.css (PR-S1.4, 2026-05-24).
   Quelle bei Schreibung: _20-dashboard.css Z. 887–1221.
   Plan: docs/architecture/2026-05-16-dashboard-css-split-plan.md

   MANIFEST-Position direkt nach _20a3-dashboard-v3-lower.css und VOR
   _20-dashboard.css — Light-Mode-Overrides müssen NACH allen V3-Base-
   Selektoren stehen (Cascade-Reihenfolge: Base → Light-Mode-Override).
   ════════════════════════════════════════════════════════════════════ */
/* ── Light Mode — cooler, crisper, still premium ── */
body.light .v3-hero-shell{
  background:
    linear-gradient(125deg,var(--bg) 0%,var(--bg2) 48%,var(--bg3) 100%);
  border-color:rgba(160,140,90,.16);
  box-shadow:0 16px 48px rgba(26,30,46,.09);
}
body.light .v3-hero-shell::before{
  background:
    linear-gradient(90deg,rgba(200,170,80,.1),transparent 36%,rgba(200,170,80,.05)),
    linear-gradient(180deg,rgba(var(--surface-solid-rgba-base,255,255,255),.52),transparent 40%),
    linear-gradient(0deg,rgba(200,170,80,.04),transparent 44%);
}
body.light .v3-kicker{color:var(--tone-warn-text);}
/* Phase D Schritt 3 B1 — Hero-Cluster Cleanup: die folgenden Selektoren
   waren als `body.light .SELECTOR{color:var(--text-strong);}` einzeln überschrieben.
   Sie nutzen seit Phase D Schritt 2 (PR #513) alle `color:var(--text-strong)`
   im Default, und --text-strong wird im body.light-Token-Block auf var(--text-strong)
   geswitched. Die Einzel-Overrides waren funktional redundant und sind jetzt
   entfernt:
     .v3-hero h1, .v3-visual-head strong, .v3-metric strong, .v3-empty-title */
body.light .v3-year-pill{
  background:rgba(138,101,24,.07);
  color:var(--tone-warn-fg-strong);
  border-color:rgba(138,101,24,.32);
}
body.light .v3-profit{color:var(--accent2);}
body.light .v3-profit.is-loss{color:var(--tone-poor-fg);}
body.light .v3-main-label,
body.light .v3-visual-head span,
body.light .v3-metric span,
body.light .v3-empty-sub{color:var(--text2);}
body.light .v3-metric{border-bottom-color:rgba(26,30,46,.08);}
body.light .v3-forecast.is-up{background:rgba(232,184,75,.12);border-color:rgba(232,184,75,.22);color:var(--tone-warn-text);}
body.light .v3-forecast.is-up:hover{background:rgba(232,184,75,.2);border-color:rgba(232,184,75,.32);}
body.light .v3-forecast.is-down{background:rgba(176,80,80,.1);border-color:rgba(176,80,80,.14);color:var(--tone-poor-fg);}
body.light .v3-forecast.is-down:hover{background:rgba(176,80,80,.16);border-color:rgba(176,80,80,.22);}
/* ── Hero-Bars Light-Mode Redesign (Phase D — v3 bars refresh) ──
   Ziel: moderne, klare, kontrastreiche Light-Variante — nicht als
   aufgehellter Dark, sondern als eigenständige präzise Darstellung.
   Hintergrund: neutraler kühler Grund statt warm-beige. Balken: klare
   3-Stufen-Hierarchie (neutral/grau → warmes Amber → satter Corporate-
   Gold-Peak). Ghost-Bars als dünne, ruhige Pillen. Labels stärker. */
body.light .v3-bars-wrap{
  border-color:rgba(26,30,46,.09);
  background:white;
  box-shadow:inset 0 1px 0 white,0 1px 2px rgba(26,30,46,.03);
}
body.light .v3-bars-meta span{
  color:rgba(var(--text-rgba-base),.72);
  padding:4px 10px;
  border-radius:999px;
  background:rgba(26,30,46,.04);
  border-color:rgba(26,30,46,.09);
  box-shadow:none;
}
/* border-bottom auf v3-bars-stage entfernt — der Strich unter den
   Monatsnamen war ein visuelles Artefakt in beiden Modi */
/* Default/leer: kühle Slate-Grau-Stufe, ruhig und neutral */
body.light .v3-bar-fill{
  background:linear-gradient(180deg,var(--border),var(--text3));
  box-shadow:inset 0 1px 0 rgba(var(--surface-solid-rgba-base),.75);
}
/* Profit: warmes Amber — wärmer als neutral, aber NICHT corporate-gold
   (das bleibt der Hero-Klasse vorbehalten). Klar unterscheidbar. */
body.light .v3-bar-cell.has-data.is-profit .v3-bar-fill{
  background:linear-gradient(180deg,var(--accent3),var(--accent2));
  box-shadow:inset 0 1px 0 rgba(var(--surface-solid-rgba-base),.45);
}
body.light .v3-bar-cell.has-data.is-loss .v3-bar-fill{
  background:linear-gradient(180deg,var(--red),var(--tone-poor-fg));
  box-shadow:inset 0 1px 0 rgba(var(--surface-solid-rgba-base),.35);
}
/* Past: desaturiert auf neutral zurück — vergangene Monate zeigen
   dass sie noch da sind, drängeln sich aber nicht in den Vordergrund */
body.light .v3-bar-cell.is-past .v3-bar-fill{
  filter:saturate(.5) brightness(1.02);
  opacity:.82;
}
/* Hero: satter Corporate-Gold-Peak — die EINZIGE Stelle mit echtem
   Brand-Gold im Bars-Visual. Deutlich kontrastiert gegen Amber-Profit. */
body.light .v3-bar-cell.is-hero .v3-bar-fill{
  background:linear-gradient(180deg,var(--accent3),var(--accent));
  box-shadow:0 8px 20px rgba(232,184,75,.2),inset 0 1px 0 rgba(var(--surface-solid-rgba-base),.5);
}
/* Ghost-Bars: dünne 4px-Pille, ruhiger Slate-Ton, alle einheitlich —
   nicht wie abgeschnittene Mini-Balken sondern bewusst reduziert */
body.light .v3-bar-cell.is-empty .v3-bar-fill{
  height:4px;min-height:4px;
  background:rgba(26,30,46,.08);
  box-shadow:none;
}
body.light .v3-bar-cell.is-future .v3-bar-fill{opacity:.55;}
/* Labels stärker, aktiver Monat deutlich hervorgehoben */
body.light .v3-bar-month{color:rgba(var(--text-rgba-base),.64);font-weight:var(--fw-semibold);}
body.light .v3-bar-cell.is-hero .v3-bar-month{color:var(--accent);font-weight:var(--fw-heavy);}
body.light .v3-bar-tooltip{background:white;border-color:rgba(160,140,90,.18);color:var(--text-strong);box-shadow:0 8px 22px rgba(26,30,46,.11);}
body.light .v3-chart-tooltip{
  background:linear-gradient(180deg,rgba(var(--surface-solid-rgba-base,255,255,255),.98),rgba(246,247,251,.94));
  border-color:rgba(26,30,46,.08);
  box-shadow:0 18px 42px rgba(26,30,46,.12),inset 0 1px 0 rgba(var(--surface-solid-rgba-base,255,255,255),.78);
}
body.light .v3-chart-tooltip::after{
  background:rgba(249,250,253,.96);
  border-color:rgba(26,30,46,.08);
}
/* Phase D Schritt 3 B1 — Chart-Tooltip-Title/Row redundant seit Phase D Schritt 2:
   .v3-chart-tooltip-title und .v3-chart-tooltip-row strong nutzen im Default
   bereits color:var(--text-strong) und bekommen den Light-Kontrast automatisch */
body.light .v3-chart-tooltip-key{color:var(--text2);}
body.light .v3-chart-tooltip-meta{
  border-color:rgba(26,30,46,.08);
  background:rgba(26,30,46,.035);
  color:var(--text2);
}
body.light .v3-chart-tooltip-swatch{border-color:rgba(var(--surface-solid-rgba-base),.88);box-shadow:0 0 0 1px rgba(26,30,46,.04);}
/* ── Light: Steuergesundheit ── */
body.light .v3-metric-th{border-top-color:rgba(26,30,46,.06);}
body.light .v3-metric-th:hover,body.light .v3-metric-th:focus-within{border-top-color:rgba(160,130,50,.18);}
body.light .v3-th-label{color:var(--text2);}
/* Phase D Schritt 3 B1 — .v3-metric-th:hover .v3-th-label redundant seit
   Phase D Schritt 2: Default nutzt color:var(--text-strong) */
body.light .v3-th-info{border-color:rgba(26,30,46,.08);background:rgba(26,30,46,.035);color:var(--text3);cursor:help;}
body.light .v3-th-info:hover{border-color:rgba(160,130,50,.18);background:rgba(200,170,80,.09);color:var(--text2);}
body.light .v3-th-tip{background:white;border-color:rgba(26,30,46,.08);color:var(--text2);box-shadow:0 8px 24px rgba(26,30,46,.1);}
body.light .v3-th-tip strong{color:var(--text-strong);}
body.light .v3-th-label:focus-visible,body.light .v3-th-info:focus-visible,body.light .v3-th-chip:focus-visible{outline-color:rgba(160,130,50,.36);}
/* Variante A: Gold-Tint-Background auf Weiß (subtiler goldener Schimmer) */
body.light .v3-th-chip{
  --th-track:var(--border);--th-border:rgba(200,160,50,.18);--th-glow:rgba(160,130,50,.1);
  background:rgba(232,184,75,.05);
  border-color:rgba(232,184,75,.16);
  box-shadow:0 4px 16px rgba(26,30,46,.05);
}
body.light .v3-th-chip:hover{
  border-color:rgba(232,184,75,.3);
  background:rgba(232,184,75,.1);
  box-shadow:0 8px 24px rgba(26,30,46,.08),0 0 0 1px rgba(232,184,75,.08);
}
/* Variante B (Pill): tone-abhängige Light-Mode-Tints */
body.light .v3-th-chip--pill.is-good{
  background:rgba(58,138,86,.06);border-color:rgba(58,138,86,.18);
}
body.light .v3-th-chip--pill.is-fair{
  background:rgba(232,184,75,.06);border-color:rgba(232,184,75,.18);
}
body.light .v3-th-chip--pill.is-poor{
  background:rgba(184,88,88,.06);border-color:rgba(184,88,88,.18);
}
body.light .v3-th-chip--pill:hover{
  box-shadow:0 6px 16px rgba(26,30,46,.08);
}
body.light .v3-th-chip.is-good{--th-ring:var(--tone-good-fg);--th-border:rgba(58,138,86,.2);--th-glow:rgba(58,138,86,.1);}
body.light .v3-th-chip.is-fair{--th-ring:var(--accent);--th-border:rgba(232,184,75,.2);--th-glow:rgba(232,184,75,.12);}
body.light .v3-th-chip.is-poor{--th-ring:var(--red);--th-border:rgba(184,88,88,.2);--th-glow:rgba(184,88,88,.1);}
/* Phase D Schritt 3 B1 — .v3-th-ring-score redundant seit Phase D Schritt 2:
   Default nutzt color:var(--text-strong) */
body.light .v3-th-chip.is-good .v3-th-ring-score{color:var(--tone-good-fg);}
body.light .v3-th-chip.is-fair .v3-th-ring-score{color:var(--tone-warn-text);}
body.light .v3-th-chip.is-poor .v3-th-ring-score{color:var(--tone-poor-fg);}
body.light .v3-th-chip-caption{color:var(--text3);}
body.light .v3-th-chip.is-good .v3-th-chip-caption{color:var(--tone-good-fg);}
body.light .v3-th-chip.is-fair .v3-th-chip-caption{color:var(--tone-warn-text);}
body.light .v3-th-chip.is-poor .v3-th-chip-caption{color:var(--tone-poor-fg);}
/* ── Light: Pulse bar ── */
body.light .v3-hero-pulse{border-top-color:rgba(26,30,46,.07);}
body.light .v3-ps{color:var(--text2);background:rgba(26,30,46,.03);border-color:rgba(26,30,46,.06);}
body.light button.v3-ps:hover{background:rgba(26,30,46,.06);border-color:rgba(26,30,46,.1);}
body.light .ps-active .v3-ps-dot{background:var(--tone-good-fg);}
body.light .ps-active strong{color:var(--tone-good-fg);}
body.light .ps-moderate .v3-ps-dot{background:var(--accent);}
body.light .ps-moderate strong{color:var(--tone-warn-text);}
body.light .ps-idle .v3-ps-dot{background:var(--red);}
body.light .ps-idle strong{color:var(--tone-poor-fg);}
body.light .ps-neutral .v3-ps-dot{background:var(--text3);}
body.light .ps-neutral strong{color:var(--text2);}
body.light .ps-soon .v3-ps-dot{background:var(--accent);}
body.light .ps-soon strong{color:var(--tone-warn-text);}
body.light .ps-urgent .v3-ps-dot{background:var(--red);}
body.light .ps-urgent strong{color:var(--tone-poor-fg);}
body.light .v3-ps-insight{color:var(--text3);border-color:transparent;background:transparent;}
body.light .v3-ps-insight strong{color:var(--text2);}
body.light button.v3-ps-insight:hover{background:rgba(26,30,46,.03);border-color:rgba(26,30,46,.05);}
body.light .v3-bars-empty{border-color:rgba(160,140,90,.16);color:var(--text2);}
body.light .v3-signal{background:white;border-color:rgba(26,30,46,.07);box-shadow:0 1px 4px rgba(26,30,46,.04);}
body.light .v3-signal-text{color:var(--text-strong);}
body.light .v3-signal-more{color:var(--text2);}
body.light .v3-focus-item{
  background:linear-gradient(180deg,rgba(var(--surface-solid-rgba-base,255,255,255),.98),rgba(246,247,251,.94));
  border-color:rgba(26,30,46,.07);
  box-shadow:0 10px 26px rgba(26,30,46,.06),inset 0 1px 0 rgba(var(--surface-solid-rgba-base,255,255,255),.8);
}
body.light .v3-focus-item::before{background:rgba(139,147,181,.22);}
body.light .v3-focus-item.is-green::before{background:rgba(58,138,86,1);}
body.light .v3-focus-item.is-yellow::before{background:var(--accent);}
body.light .v3-focus-item.is-red::before{background:var(--red);}
body.light .v3-focus-item.is-blue::before{background:var(--blue);}
body.light .v3-focus-label,
body.light .v3-focus-sub{color:var(--text2);}
body.light .v3-focus-value{color:var(--text-strong);}
body.light .v3-focus-item.is-green .v3-focus-value{color:var(--tone-good-fg);}
body.light .v3-focus-item.is-yellow .v3-focus-value{color:var(--tone-warn-text);}
body.light .v3-focus-item.is-red .v3-focus-value{color:var(--tone-poor-fg);}
body.light .v3-focus-item.is-blue .v3-focus-value{color:var(--tone-info-fg);}
body.light .v3-focus-progress{background:var(--border);}
body.light .v3-focus-progress span{background:var(--accent);}
/* Progress-Bar-Fill folgt dem Card-Tone (Belegstatus-Konsistenz 2026-04-17) */
/* stylelint-disable color-no-hex -- bestehende Dashboard-Tone-Palette, bewusst gepinnt */
body.light .v3-focus-item.is-green .v3-focus-progress span{background:var(--tone-good-fg);}
body.light .v3-focus-item.is-red .v3-focus-progress span{background:var(--red);}
body.light .v3-focus-item.is-blue .v3-focus-progress span{background:var(--blue);}
/* stylelint-enable color-no-hex */
/* .is-yellow + .is-neutral fallen auf Gold-Default zurück */
/* Light-Mode-Overrides für `.context-rail*` wurden 2026-05-06 mit dem
   Removal der Page-Anchor-Pill entfernt. */
body.light .v3-analytics{border-top-color:rgba(26,30,46,.06);}
body.light .v3-analytics-kicker,
body.light .v3-subcard-kicker{color:var(--tone-warn-text);}
/* Phase D Schritt 3 B2 — Module-Cluster Cleanup: die folgenden Selektoren
   waren als body.light-Einzel-Overrides auf color:var(--text-strong) gesetzt. Sie
   nutzen seit Phase D Schritt 2 (PR #513) alle color:var(--text-strong)
   im Default, das im body.light-Token-Block auf var(--text-strong) switched. Die
   Einzel-Overrides waren funktional redundant und sind jetzt entfernt:
     .v3-analytics-title, .v3-lower-title, .v3-subcard-title, .v3-module-title */
body.light .v3-analytics-sub,
body.light .v3-lower-sub,
body.light .v3-subcard-sub,
body.light .v3-module-sub{color:var(--text2);}
body.light .v3-analytics-pill,
body.light .v3-subcard-badge{background:white;border-color:rgba(26,30,46,.07);box-shadow:0 4px 14px rgba(26,30,46,.04);}
body.light .v3-subcard-badge{color:var(--text2);}
body.light .v3-analytics-pill span,
body.light .v3-module-stat-label{color:var(--text3);}
/* Phase D Schritt 3 B2 — .v3-analytics-pill strong redundant seit Phase D
   Schritt 2: Default nutzt color:var(--text-strong) */
body.light .v3-module{
  background:linear-gradient(180deg,white,var(--bg));
  border-color:rgba(26,30,46,.08);
  box-shadow:0 12px 34px rgba(26,30,46,.07);
}
body.light .v3-module-primary{border-color:rgba(83,184,146,.18);}
body.light .v3-module-secondary{border-color:rgba(232,184,75,.16);}
body.light .v3-module-kicker{color:var(--text3);}
body.light .v3-module-stat{background:rgba(26,30,46,.025);border-color:rgba(26,30,46,.06);}
body.light .v3-module-stat.is-good{background:rgba(58,138,86,.06);border-color:rgba(58,138,86,.12);}
body.light .v3-module-stat.is-warn{background:rgba(232,184,75,.08);border-color:rgba(232,184,75,.12);}
body.light .v3-module-stat.is-info{background:rgba(74,134,214,.06);border-color:rgba(74,134,214,.1);}
/* Phase D Schritt 3 B2 — .v3-module-stat-value redundant seit Phase D
   Schritt 2: Default nutzt color:var(--text-strong). Die is-good/is-warn/
   is-info Varianten (darunter) setzen explizite andere Farben und bleiben */
body.light .v3-module-stat.is-good .v3-module-stat-value{color:var(--tone-good-fg);}
body.light .v3-module-stat.is-warn .v3-module-stat-value{color:var(--tone-warn-text);}
body.light .v3-module-stat.is-info .v3-module-stat-value{color:var(--tone-info-fg);}
body.light .v3-module-stat-sub,
body.light .v3-module-chip{color:var(--text2);}
body.light .v3-module-chart-shell{
  background:linear-gradient(180deg,rgba(var(--surface-solid-rgba-base,255,255,255),.92),rgba(244,245,249,.84));
  border-color:rgba(26,30,46,.06);
}
body.light .v3-module-primary .v3-module-chart-shell{border-color:rgba(58,138,86,.14);}
body.light .v3-module-secondary .v3-module-chart-shell{border-color:rgba(232,184,75,.14);}
body.light .v3-module-empty span{color:var(--text2);}
body.light .v3-chart-empty-panel{border-color:rgba(26,30,46,.10);background:linear-gradient(180deg,white,rgba(248,249,252,.82));}
body.light .v3-chart-empty-copy span{color:var(--text2);}
body.light .v3-tax-empty-periods span{border-color:rgba(176,138,48,.18);background:rgba(232,184,75,.08);color:var(--text3);}
body.light .v3-module-brief{
  background:linear-gradient(180deg,rgba(201,154,46,.08),rgba(var(--surface-solid-rgba-base,255,255,255),.94));
  border-color:rgba(201,154,46,.14);
}
/* Phase D Schritt 3 B2 — .v3-module-brief strong redundant seit Phase D
   Schritt 2: Default nutzt color:var(--text-strong) */
body.light .v3-module-brief p{color:var(--text2);}
body.light .v3-leg{border-top-color:rgba(26,30,46,.07);}
body.light .v3-leg .ch-leg-item{
  background:white;
  border-color:rgba(26,30,46,.07);
  color:var(--text2);
}
body.light .v3-leg .ch-leg-item:hover{background:rgba(26,30,46,.04);border-color:rgba(26,30,46,.11);}
body.light .v3-leg .ch-leg-item.off .ch-leg-lbl{color:var(--text3);}
body.light .v3-subcard,
body.light .v3-topcat{
  background:white;
  border-color:rgba(26,30,46,.07);
  box-shadow:0 8px 22px rgba(26,30,46,.04);
}
body.light .v3-topcat .topcat-toggle-btn{border-top-color:rgba(26,30,46,.07);}
body.light .v3-detail-card,
body.light .v3-year-compare{
  background:
    linear-gradient(180deg,rgba(var(--surface-solid-rgba-base,255,255,255),.97),rgba(247,248,252,.93)),
    radial-gradient(circle at top right,rgba(201,154,46,.08),transparent 58%);
  border-color:rgba(26,30,46,.08);
  box-shadow:0 12px 32px rgba(26,30,46,.07),inset 0 1px 0 rgba(var(--surface-solid-rgba-base,255,255,255),.78);
}
body.light .v3-detail-card::before,
body.light .v3-year-compare::before{
  background:radial-gradient(circle,rgba(201,154,46,.08),transparent 72%);
  opacity:.72;
}
body.light .v3-detail-head,
body.light .v3-year-compare-head{border-bottom-color:rgba(26,30,46,.06);}
body.light .v3-detail-kicker{color:var(--tone-warn-text);}
/* Phase D Schritt 3 B3 — .v3-detail-title redundant seit Phase D Schritt 2:
   Default nutzt color:var(--text-strong), Light-Mode-Wert automatisch var(--text-strong) */
body.light .v3-detail-sub{color:var(--text2);}
body.light .v3-detail-card th{
  border-bottom-color:rgba(26,30,46,.08);
  color:var(--text3);
}
body.light .v3-detail-card td{
  border-bottom-color:rgba(26,30,46,.05);
  color:var(--text2);
}
/* Phase D Schritt 3 B3 — .v3-detail-card td.l redundant seit Phase D Schritt 2:
   Default nutzt color:var(--text-strong). Die .tr.tot td Regel direkt
   darunter ist Multi-Property (border-top + color) und bleibt unberührt */
body.light .v3-detail-card tr.tot td{
  border-top-color:rgba(139,147,181,.3);
  color:var(--text-strong);
}
body.light .v3-year-stat{
  background:rgba(26,30,46,.025);
  border-color:rgba(26,30,46,.06);
  box-shadow:inset 0 1px 0 rgba(var(--surface-solid-rgba-base,255,255,255),.82);
}
body.light .v3-year-stat-label{color:var(--text3);}
/* Phase D Schritt 3 B3 — .v3-year-stat-value redundant seit Phase D Schritt 2:
   Default nutzt color:var(--text-strong). Die .is-good/.is-bad Delta-
   Modifier direkt darunter setzen explizit andere Farben und bleiben */
body.light .v3-year-stat-prev{color:var(--text3);}
body.light .v3-year-stat-delta.is-good{color:var(--tone-good-fg);}
body.light .v3-year-stat-delta.is-bad{color:var(--tone-poor-fg);}

/* ════════════════════════════════════════════════════════════════════
   STEUERGESUNDHEIT — Classic + V3 + v2 (Visual Redesign)
   Ausgeschnitten aus _20-dashboard.css (PR-S1.6a, 2026-05-24).
   Quelle bei Schreibung: _20-dashboard.css Z. 12–281.
   Plan: docs/architecture/2026-05-16-dashboard-css-split-plan.md

   Teil 1 von 2 STEUERGESUNDHEIT-Partials (Lookup-Bypass für
   verbleibende UI nach Dashboard-V3-Split). MANIFEST-Position vor
   _20-dashboard.css — Source-Order-Cascade erhalten.
   ════════════════════════════════════════════════════════════════════ */
/* ==================== STEUERGESUNDHEIT ==================== */
.sg-card{border:1px solid;border-radius:12px;padding:16px 18px;margin-bottom:14px;transition:border-color .2s;}
.sg-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.sg-title{font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--text);display:flex;align-items:center;gap:6px;}
.sg-score{font-size:var(--fs-xl);font-weight:var(--fw-bold);font-family:var(--mono);}
.sg-score.sg-gruen{color:var(--green);}
.sg-score.sg-gelb{color:var(--accent);}
.sg-score.sg-rot{color:var(--red);}
.sg-bar{height:6px;background:rgba(99,120,166,.15);overflow:hidden;margin-bottom:12px;}
.sg-bar-fill{height:100%;transition:width .4s ease;}
.sg-bar-fill.sg-gruen{background:var(--green);}
.sg-bar-fill.sg-gelb{background:var(--accent);}
.sg-bar-fill.sg-rot{background:var(--red);}
.sg-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-sm);margin-bottom:10px;}
.sg-cat{display:flex;flex-direction:column;align-items:center;gap:2px;}
.sg-cat-label{font-size:var(--fs-xs);color:var(--text3);white-space:nowrap;}
.sg-cat-val{font-size:var(--fs-base);font-weight:var(--fw-semibold);font-family:var(--mono);}
.sg-cat-val.sg-gruen{color:var(--green);}
.sg-cat-val.sg-gelb{color:var(--accent);}
.sg-cat-val.sg-rot{color:var(--red);}
.sg-hint{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--fs-sm);color:var(--text2);padding:6px 0;border-top:1px solid rgba(99,120,166,.1);}
.sg-hint-ico{flex-shrink:0;color:var(--text3);}
.sg-hint-text{flex:1;line-height:1.4;}
.sg-expand{display:block;width:100%;text-align:center;padding:6px;font-size:var(--fs-sm);color:var(--text3);background:none;border:none;border-top:1px solid rgba(99,120,166,.08);cursor:pointer;margin-top:6px;}
.sg-expand:hover{color:var(--text);}
.sg-breakdown{margin-bottom:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.sg-detail-card{border:1px solid;border-radius:var(--radius-md);padding:12px 14px;background:rgba(99,120,166,.03);}
.sg-detail-head{display:flex;justify-content:space-between;font-size:12px;font-weight:var(--fw-semibold);margin-bottom:6px;}
.sg-detail-line{font-size:var(--fs-sm);color:var(--text2);line-height:1.5;}
.sg-detail-action{margin-top:6px;}
.sg-context{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--fs-sm);color:var(--text2);padding:8px 14px;grid-column:1/-1;}
.sg-gruen{color:var(--green);}
.sg-gelb{color:var(--accent);}
.sg-rot{color:var(--red);}
/* USt Status Card */
.ust-status-card{border:1px solid rgba(99,120,166,.15);border-radius:var(--radius-md);padding:14px 16px;margin-top:16px;background:rgba(99,120,166,.03);}
.ust-status-head{font-size:12px;font-weight:var(--fw-semibold);margin-bottom:8px;}
.ust-status-row{display:flex;justify-content:space-between;font-size:var(--fs-sm);color:var(--text2);margin-bottom:10px;}
.ust-frist-warn{color:var(--accent);}
.ust-frist-over{color:var(--red);}
.ust-status-checks{display:flex;gap:var(--space-lg);}
.ust-check{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--text2);cursor:pointer;user-select:none;}
.ust-check-box{width:16px;height:16px;border:1.5px solid rgba(99,120,166,.3);border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;}
.ust-check.checked .ust-check-box{background:var(--green);border-color:var(--green);}
@media(max-width:880px){.sg-cats{grid-template-columns:repeat(2,1fr);}.sg-breakdown{grid-template-columns:1fr;}}
@media(max-width:480px){.sg-cats{grid-template-columns:1fr 1fr;}.ust-status-checks{flex-direction:column;gap:var(--space-sm);}}

/* ==================== STEUERGESUNDHEIT V3 ==================== */
.v3-th-cats{display:flex;gap:var(--space-sm);margin-top:6px;flex-wrap:wrap;}
.v3-th-cat{font-size:var(--fs-xs);font-family:var(--mono);padding:1px 6px;border-radius:4px;background:rgba(99,120,166,.08);}
.th-c-good{color:var(--green);}.th-c-fair{color:var(--accent);}.th-c-poor{color:var(--red);}
.v3-th-hint{font-size:var(--fs-xs);color:var(--text3);margin-top:6px;display:flex;align-items:center;gap:var(--space-xs);line-height:1.4;}
.v3-th-expand{display:block;width:100%;text-align:center;padding:var(--space-xs);font-size:var(--fs-xs);color:var(--text3);background:none;border:none;border-top:1px solid rgba(99,120,166,.08);cursor:pointer;margin-top:6px;}
.v3-th-expand:hover{color:var(--text);}
.v3-sg-breakdown{margin-bottom:14px;}
.v3-sg-bd-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.v3-sg-bd-card{border:1px solid;border-radius:var(--radius-md);padding:12px 14px;background:rgba(99,120,166,.03);}
.v3-sg-bd-head{display:flex;justify-content:space-between;font-size:12px;font-weight:var(--fw-semibold);margin-bottom:6px;}
.v3-sg-bd-val{font-family:var(--mono);}
.v3-sg-bd-line{font-size:var(--fs-sm);color:var(--text2);line-height:1.5;}
.v3-sg-bd-action{margin-top:6px;}
.v3-sg-bd-context{font-size:var(--fs-sm);color:var(--text2);padding:8px 14px;grid-column:1/-1;}
@media(max-width:600px){.v3-sg-bd-grid{grid-template-columns:1fr;}}

/* ==================== STEUERGESUNDHEIT v2 (Visual Redesign) ==================== */

/* 2026-06-12: die v1-Detailseiten-Regeln (.sg2-Container, -empty, -cats/
   -cat, -actions/-ag/-action, -ust, -info, -footer samt Light-Mode- und
   Responsive-Varianten) entfielen mit dem v1-Renderer
   (steuergesundheit-render.js). Hier bleiben nur die Regeln, die der
   geteilte Dashboard-Hero (dashboard-hero.js) weiterhin rendert: der
   Score-Ring (sitzt im .dash-hero-visual-Slot) und die ampel-getönte
   Score-Farbe (sg2-good/-fair/-poor). */
.dash-hero-visual .sg2-ring{display:block;}
.sg2-ring-fill{transition:stroke-dashoffset .8s ease;}
.sg2-ring text{dominant-baseline:central;}
.sg2-good{color:var(--green);}.sg2-fair{color:var(--accent);}.sg2-poor{color:var(--red);}

/* ── LIGHT MODE ── */
body.light .sg2-good{color:var(--tone-good-fg);}
body.light .sg2-fair{color:var(--tone-warn-text);}
body.light .sg2-poor{color:var(--tone-poor-fg);}

/* ── RESPONSIVE ── */
@media(max-width:720px){
  .sg2-ring{width:120px;height:120px;}
}

/* ════════════════════════════════════════════════════════════════════
   STEUERGESUNDHEIT — Experimental v2 (Base + Mobile + Light-Overrides)
   Ausgeschnitten aus _20-dashboard.css (PR-S1.6a, 2026-05-24).
   Quelle bei Schreibung: _20-dashboard.css Z. 282–1033.
   Plan: docs/architecture/2026-05-16-dashboard-css-split-plan.md

   Teil 2 von 2 STEUERGESUNDHEIT-Partials (Lookup-Bypass für
   verbleibende UI nach Dashboard-V3-Split). MANIFEST-Position vor
   _20-dashboard.css — Source-Order-Cascade erhalten. Enthält Base-
   Selektoren, Light-Mode-Overrides und Mobile-Media-Queries — in
   dieser Reihenfolge, damit Cascade-Spezifität gleich bleibt.
   ════════════════════════════════════════════════════════════════════ */
/* ==================== STEUERGESUNDHEIT Experimental v2 ==================== */
/* Die Styles der Debug-Vergleichs-Bar wurden 2026-06-12 entfernt —
   der Compare-Mode (Query-Param-Weiche v1/v2) ist komplett abgeschaltet. */
.sgv2{
  max-width:1240px;
  margin:0 auto;
  padding:0 16px 64px;
  display:flex;
  flex-direction:column;
}
/* Gestaffelte vertikale Trennung: großer Bruch nach dem Hero, ruhigere Stufen
   zwischen Teilbereiche · Steuerpflichten · Transparenz, normaler Footer-Abstand. */
.sgv2-section + .sgv2-section{margin-top:40px;}
.sgv2-footer{margin-top:32px;}
.sgv2-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-md);
  padding:88px 24px;
  text-align:center;
}
.sgv2-empty-title{font-size:18px;font-weight:var(--fw-heavy);color:var(--text-strong);}
.sgv2-empty-sub{max-width:420px;font-size:var(--fs-base);line-height:1.6;color:var(--text2);}
.sgv2-section-kicker{
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--accent);
}
/* Steuergesundheit-Hero läuft jetzt über die geteilte .dash-hero-
   Komponente (_26-dashboard-hero.css). Nur die Score-Ring-Internals
   bleiben (im .dash-hero-visual-Slot weiterverwendet). */
.sgv2-hero-ring-fill{transition:stroke-dashoffset .8s ease;}
.sgv2-hero-score-value{letter-spacing:-.05em;}
.sgv2-section{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.sgv2-section-head{display:flex;flex-direction:column;gap:10px;}
.sgv2-section-head h2{
  margin:0;
  font-size:24px;
  font-weight:var(--fw-heavy);
  line-height:1.08;
  letter-spacing:-.03em;
  color:var(--text-strong);
}
.sgv2-section-head p{
  margin:0;
  max-width:660px;
  font-size:var(--fs-base);
  line-height:var(--lh-relaxed);
  color:rgba(var(--text-rgba-base),.62);
}
/* Freq-Chip neben „Steuerpflichten {year}" — zeigt den Voranmeldezeitraum
   des AKTUELL geladenen Jahres an. Per-Year sichtbar gemacht, damit der
   User beim Jahreswechsel (z.B. 2025 Monats → 2026 Quartals) sofort
   merkt, dass sich der Modus geändert hat. */
.sgv2-section-freq-chip{
  display:inline-block;
  margin-left:10px;
  padding:3px 10px;
  border-radius:999px;
  background:rgba(var(--text-rgba-base),.08);
  color:rgba(var(--text-rgba-base),.75);
  font-size:11px;
  font-weight:var(--fw-medium);
  line-height:1.4;
  letter-spacing:.02em;
  vertical-align:middle;
  white-space:nowrap;
}
.sgv2-action-stack{
  display:flex;
  flex-direction:column;
  gap:var(--space-md);
}
.sgv2-action{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--space-lg);
  align-items:center;
  padding:18px 20px;
  border-radius:var(--radius-xl);
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:rgba(var(--surface-rgba-base),.03);
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
.sgv2-action:hover{transform:translateY(-1px);background:rgba(var(--surface-rgba-base),.045);}
.sgv2-sev-error{border-left:3px solid var(--red);}
.sgv2-sev-warn{border-left:3px solid var(--accent);}
.sgv2-sev-info{border-left:3px solid rgba(143,152,184,.7);}
.sgv2-action-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:78px;
  padding:6px 10px;
  border-radius:var(--radius-pill);
  font-size:var(--fs-xs);
  font-weight:var(--fw-heavy);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(var(--text-rgba-base),.78);
  background:rgba(var(--surface-rgba-base),.05);
}
.sgv2-action-body{min-width:0;}
.sgv2-action-title{
  font-size:14px;
  font-weight:var(--fw-bold);
  line-height:1.4;
  color:var(--text-strong);
}
.sgv2-action-meta{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-sm);
  margin-top:8px;
}
.sgv2-action-meta span{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:var(--radius-pill);
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:rgba(var(--surface-rgba-base),.03);
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  color:rgba(var(--text-rgba-base),.58);
}
.sgv2-action-success{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:18px 20px;
  border-radius:var(--radius-xl);
  border:1px solid rgba(83,214,179,.14);
  background:rgba(83,214,179,.05);
}
.sgv2-action-success strong{font-size:var(--fs-body);color:var(--tone-good-fg);}
.sgv2-action-success span{font-size:var(--fs-base);line-height:1.6;color:rgba(var(--text-rgba-base),.66);}
.sgv2-cat-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-lg);
}
.sgv2-cat{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:20px;
  border-radius:20px;
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:linear-gradient(180deg,rgba(var(--surface-rgba-base),.04),rgba(var(--surface-rgba-base),.02));
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,opacity .16s ease;
}
.sgv2-cat.is-linked{
  border-color:rgba(232,184,75,.22);
  box-shadow:0 0 0 1px rgba(232,184,75,.16),0 22px 40px rgba(0,0,0,.18);
}
.sgv2-cat.is-muted{opacity:.58;}
.sgv2-cat-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
}
.sgv2-cat-titlebox{min-width:0;flex:1 1 auto;}
.sgv2-cat-name{
  font-size:var(--fs-body);
  font-weight:var(--fw-heavy);
  color:var(--text-strong);
  line-height:1.22;
}
.sgv2-cat-weight{
  margin-top:5px;
  font-size:var(--fs-sm);
  color:rgba(var(--text-rgba-base),.46);
}
.sgv2-cat-score{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:var(--space-xs);
  min-width:70px;
  text-align:right;
}
.sgv2-cat-score strong{
  font-family:var(--mono);
  font-size:26px;
  font-weight:var(--fw-heavy);
  line-height:1;
  color:var(--text-strong);
  transition:color .16s ease;
}
.sgv2-tone-good .sgv2-cat-score strong{color:var(--tone-good-fg);}
.sgv2-tone-fair .sgv2-cat-score strong{color:var(--tone-warn-text);}
.sgv2-tone-poor .sgv2-cat-score strong{color:var(--tone-poor-fg);}
.sgv2-cat-score span{font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.08em;text-transform:uppercase;color:rgba(var(--text-rgba-base),.32);}
.sgv2-cat-pot{
  display:inline-flex;
  align-self:flex-start;
  padding:6px 10px;
  border-radius:var(--radius-pill);
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:rgba(var(--surface-rgba-base),.03);
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  color:rgba(var(--text-rgba-base),.54);
}
.sgv2-cat-pot.is-live{border-color:rgba(232,184,75,.16);color:var(--tone-warn-text);background:rgba(232,184,75,.06);}
.sgv2-cat-bar{
  height:7px;
  background:rgba(var(--surface-rgba-base),.06);
  overflow:hidden;
}
.sgv2-cat-bar-fill{height:100%;transition:width .4s ease;}
.sgv2-cat-metrics{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.sgv2-cat-metric{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:var(--radius-lg);
  background:rgba(var(--surface-rgba-base),.03);
  border:1px solid rgba(var(--surface-rgba-base),.06);
}
.sgv2-cat-metric span{font-size:var(--fs-sm);color:rgba(var(--text-rgba-base),.54);}
.sgv2-cat-metric strong{font-family:var(--mono);font-size:12px;color:var(--text-strong);}
.sgv2-cat-lever{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.sgv2-cat-lever span{
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(var(--text-rgba-base),.42);
}
.sgv2-cat-lever strong{
  font-size:var(--fs-base);
  line-height:1.5;
  color:rgba(var(--text-rgba-base),.78);
}
.sgv2-cat-status{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.sgv2-cat-status span{
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(var(--text-rgba-base),.38);
}
.sgv2-cat-status strong{
  font-size:var(--fs-base);
  line-height:1.5;
  color:rgba(var(--text-rgba-base),.66);
}
.sgv2-inline-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:none;
  background:none;
  color:var(--tone-info-fg);
  font-size:12px;
  font-weight:var(--fw-bold);
  cursor:pointer;
}
.sgv2-inline-cta:hover{color:var(--tone-info-fg);}
.sgv2-duty-summary{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--space-xl);
  align-items:center;
  padding:16px 18px;
  border-radius:var(--radius-xl);
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:rgba(var(--surface-rgba-base),.03);
}
.sgv2-duty-summary-main{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.sgv2-duty-summary-main span{
  display:block;
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(var(--text-rgba-base),.42);
}
.sgv2-duty-summary-main strong{
  display:block;
  font-family:var(--mono);
  font-size:var(--fs-xl);
  line-height:1.1;
  color:var(--text-strong);
}
.sgv2-duty-summary-note{
  margin:0;
  font-size:var(--fs-base);
  line-height:var(--lh-base);
  color:rgba(var(--text-rgba-base),.62);
  text-align:right;
  max-width:340px;
  justify-self:end;
}
.sgv2-duty-summary-cta{
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-pill);
  border:1px solid rgba(var(--surface-rgba-base),.12);
  background:rgba(var(--surface-rgba-base),.04);
  color:rgba(var(--text-rgba-base),.7);
  cursor:pointer;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.sgv2-duty-summary-cta:hover{
  background:rgba(var(--surface-rgba-base),.08);
  color:white;
  transform:translateX(2px);
}
.sgv2-duty-summary.is-poor{border-color:rgba(248,113,113,.2);background:var(--tone-poor-bg);}
.sgv2-duty-summary.is-poor strong{color:var(--tone-poor-fg);}
.sgv2-duty-summary.is-warn{border-color:var(--tone-warn-border);background:var(--tone-warn-bg);}
.sgv2-duty-summary.is-warn strong{color:var(--tone-warn-text);}
.sgv2-duty-summary.is-good{border-color:var(--tone-good-border);background:var(--tone-good-bg);}
.sgv2-duty-summary.is-good strong{color:var(--tone-good-fg);}
.sgv2-duty-board{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.sgv2-duty-empty{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:20px;
  border-radius:8px;
  border:1px dashed rgba(var(--surface-rgba-base),.12);
  background:rgba(var(--surface-rgba-base),.028);
}
.sgv2-duty-empty strong{
  font-size:14px;
  font-weight:var(--fw-heavy);
  color:var(--text-strong);
}
.sgv2-duty-empty span{
  max-width:640px;
  font-size:var(--fs-base);
  line-height:var(--lh-base);
  color:rgba(var(--text-rgba-base),.62);
}
.sgv2-duty-row{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:16px 18px;
  border-radius:var(--radius-xl);
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:rgba(var(--surface-rgba-base),.025);
}
.sgv2-duty-head{
  display:grid;
  grid-template-columns:minmax(180px,1fr) auto auto 16px;
  gap:var(--space-lg);
  align-items:center;
  width:100%;
  padding:0;
  border:none;
  background:none;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.sgv2-duty-period{
  display:flex;
  flex-direction:column;
  gap:var(--space-xs);
  min-width:0;
}
.sgv2-duty-period strong{font-size:14px;color:var(--text-strong);}
.sgv2-duty-period span{font-size:var(--fs-sm);color:rgba(var(--text-rgba-base),.5);}
.sgv2-duty-amount{
  font-family:var(--mono);
  font-size:14px;
  font-weight:var(--fw-heavy);
  color:var(--text-strong);
  white-space:nowrap;
  text-align:right;
}
.sgv2-duty-summary-state{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  justify-self:start;
  min-height:32px;
  padding:7px 10px;
  border-radius:var(--radius-pill);
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:rgba(var(--surface-rgba-base),.03);
  font-size:12px;
  font-weight:var(--fw-bold);
  color:var(--text-strong);
}
.sgv2-duty-summary-state.is-good{border-color:var(--tone-good-border);color:var(--tone-good-fg);background:var(--tone-good-bg);}
.sgv2-duty-summary-state.is-warn{border-color:var(--tone-warn-border);color:var(--tone-warn-text);background:rgba(232,184,75,.06);}
.sgv2-duty-summary-state.is-poor{border-color:var(--tone-poor-border);color:var(--tone-poor-fg);background:var(--tone-poor-bg);}
.sgv2-duty-summary-state.is-neutral{color:rgba(var(--text-rgba-base),.62);}
.sgv2-duty-chevron{
  width:16px;
  height:16px;
  justify-self:end;
  color:rgba(var(--text-rgba-base),.5);
  transition:transform .2s ease,color .2s ease;
}
.sgv2-duty-head:hover .sgv2-duty-chevron{color:rgba(var(--text-rgba-base),.85);}
.sgv2-duty-row.is-open .sgv2-duty-chevron{
  transform:rotate(180deg);
  color:rgba(var(--text-rgba-base),.85);
}
.sgv2-duty-detail{
  display:none;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-md);
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(var(--surface-rgba-base),.06);
}
.sgv2-duty-row.is-open .sgv2-duty-detail{display:grid;}
.sgv2-duty-col{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.sgv2-duty-col-label{
  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(var(--text-rgba-base),.42);
}
.sgv2-duty-state,
.sgv2-duty-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  min-height:32px;
  padding:7px 10px;
  border-radius:var(--radius-pill);
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:rgba(var(--surface-rgba-base),.03);
  font-size:12px;
  font-weight:var(--fw-bold);
  color:var(--text-strong);
}
.sgv2-duty-toggle{cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease;}
.sgv2-duty-toggle:hover{background:rgba(var(--surface-rgba-base),.06);}
.sgv2-duty-state.is-good,
.sgv2-duty-toggle.is-good{border-color:var(--tone-good-border);color:var(--tone-good-fg);background:var(--tone-good-bg);}
.sgv2-duty-state.is-warn,
.sgv2-duty-toggle.is-warn{border-color:var(--tone-warn-border);color:var(--tone-warn-text);background:rgba(232,184,75,.06);}
.sgv2-duty-state.is-poor,
.sgv2-duty-toggle.is-poor{border-color:var(--tone-poor-border);color:var(--tone-poor-fg);background:var(--tone-poor-bg);}
.sgv2-duty-state.is-neutral,
.sgv2-duty-toggle.is-neutral{color:rgba(var(--text-rgba-base),.62);}
.sgv2-duty-date{
  font-size:var(--fs-sm);
  color:rgba(var(--text-rgba-base),.48);
}
.sgv2-info{
  padding:var(--space-xl);
  border-radius:22px;
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:linear-gradient(180deg,rgba(var(--surface-rgba-base),.035),rgba(var(--surface-rgba-base),.02));
}
.sgv2-info-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-md);
}
.sgv2-info-card{
  padding:var(--space-lg);
  border-radius:16px;
  border:1px solid rgba(var(--surface-rgba-base),.06);
  background:rgba(var(--surface-rgba-base),.03);
}
.sgv2-info-card strong{
  display:block;
  font-size:14px;
  color:var(--text-strong);
  margin-bottom:4px;
}
.sgv2-info-card span{
  display:block;
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  color:var(--accent);
  margin-bottom:8px;
}
.sgv2-info-card p{
  margin:0;
  font-size:12px;
  line-height:1.6;
  color:rgba(var(--text-rgba-base),.62);
}
.sgv2-info-note{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid rgba(var(--surface-rgba-base),.07);
}
.sgv2-info-note>span{
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(var(--text-rgba-base),.44);
}
.sgv2-info-chips{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-sm);
}
.sgv2-info-chips span{
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border-radius:var(--radius-pill);
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:rgba(var(--surface-rgba-base),.03);
  font-size:var(--fs-sm);
  color:rgba(var(--text-rgba-base),.62);
}
.sgv2-footer{
  padding-top:6px;
  font-size:var(--fs-sm);
  color:rgba(var(--text-rgba-base),.44);
  text-align:center;
}
.sgv2-footer span{color:rgba(var(--text-rgba-base),.34);}
body.light .sgv2-hero,
body.light .sgv2-cat,
body.light .sgv2-action,
body.light .sgv2-duty-row,
body.light .sgv2-info,
body.light .sgv2-duty-summary,
body.light .sgv2-cockpit-card,
body.light .sgv2-action-success,
body.light .sgv2-info-card{
  border-color:rgba(26,30,46,.08);
}
body.light .sgv2-hero{
  background:linear-gradient(150deg,rgba(246,248,253,.96),rgba(239,242,249,.98));
}
body.light .sgv2-hero-title,
body.light .sgv2-cockpit-card strong,
body.light .sgv2-section-head h2,
/* Phase D Schritt 3 B4 — Steuergesundheit-V2 Cluster Cleanup:
   Der folgende Multi-Selector-Block war als body.light-Einzel-Override
   redundant, weil alle 4 Default-Selektoren seit Phase D Schritt 2
   (PR #513) color:var(--text-strong) nutzen, das im body.light-Token-
   Block auf var(--text-strong) geswitched wird. Jetzt entfernt:
     .sgv2-cat-name, .sgv2-duty-period strong,
     .sgv2-duty-amount, .sgv2-info-card strong

   Der zweite Multi-Block (Z ~4775 .sgv2-cat-lever strong + ...-duty-*)
   bleibt ABSICHTLICH unberührt — .sgv2-cat-lever strong nutzt im Default
   rgba(var(--text-rgba-base),.78), NICHT var(--text-strong). Ein Entfernen
   würde den Farbwert marginal ändern (78% Opacity statt solid). Spätere
   Aufsplit-Runde könnte den Block strukturell sauberer machen. */
body.light .sgv2-hero-sub,
body.light .sgv2-section-head p,
body.light .sgv2-cockpit-card p,
body.light .sgv2-action-success span,
body.light .sgv2-info-card p{color:var(--text2);}
body.light .sgv2-cat,
body.light .sgv2-action,
body.light .sgv2-duty-row,
body.light .sgv2-info,
body.light .sgv2-duty-summary,
body.light .sgv2-cockpit-card,
body.light .sgv2-action-success,
body.light .sgv2-info-card{background:rgba(var(--surface-solid-rgba-base),.72);}
body.light .sgv2-action:hover{background:rgba(26,30,46,.03);}
body.light .sgv2-focus-chip{background:rgba(26,30,46,.02);border-color:rgba(26,30,46,.08);color:var(--text2);}
body.light .sgv2-focus-chip:hover{background:rgba(26,30,46,.05);color:var(--text-strong);}
body.light .sgv2-cockpit-card.is-good strong{color:var(--tone-good-fg);}
body.light .sgv2-cockpit-card.is-warn strong{color:var(--tone-warn-text);}
body.light .sgv2-cockpit-card.is-poor strong{color:var(--tone-poor-fg);}
body.light .sgv2-cockpit-card.is-info strong{color:var(--tone-info-fg);}
body.light .sgv2-action-title,
body.light .sgv2-cat-score,
body.light .sgv2-cat-metric strong,
body.light .sgv2-cat-status strong,
body.light .sgv2-cat-lever strong,
body.light .sgv2-duty-state,
body.light .sgv2-duty-summary-state,
body.light .sgv2-duty-toggle{color:var(--text-strong);}
body.light .sgv2-tone-good .sgv2-cat-score strong{color:var(--tone-good-fg);}
body.light .sgv2-tone-fair .sgv2-cat-score strong{color:var(--tone-warn-text);}
body.light .sgv2-tone-poor .sgv2-cat-score strong{color:var(--tone-poor-fg);}
body.light .sgv2-duty-state.is-good,
body.light .sgv2-duty-summary-state.is-good,
body.light .sgv2-duty-toggle.is-good{color:var(--tone-good-fg);}
body.light .sgv2-duty-state.is-warn,
body.light .sgv2-duty-summary-state.is-warn,
body.light .sgv2-duty-toggle.is-warn{color:var(--tone-warn-text);}
body.light .sgv2-duty-state.is-poor,
body.light .sgv2-duty-summary-state.is-poor,
body.light .sgv2-duty-toggle.is-poor{color:var(--tone-poor-fg);}
body.light .sgv2-footer{color:var(--text2);}
body.light .sgv2-footer span{color:var(--text3);}

/* Light-Mode-Parität für sgv2 Meta-Labels (Sub-Kicker, Captions, Column-Labels).
   Diese Elemente nutzten bisher hartkodiertes rgba(var(--text-rgba-base),.XX) was auf
   weißem Grund unsichtbar ist. Phase D finalisiert die Theme-Parität, dieser
   Block ist der Hotfix für die im User-Report gemeldeten unsichtbaren Labels. */
body.light .sgv2-action-kicker{color:var(--text2);background:rgba(26,30,46,.05);}
body.light .sgv2-cat-metric span,
body.light .sgv2-cat-lever span,
body.light .sgv2-cat-status span,
body.light .sgv2-cat-score span,
body.light .sgv2-duty-col-label,
body.light .sgv2-duty-period span,
body.light .sgv2-duty-summary-main span{color:var(--text3);}
body.light .sgv2-cat-lever strong,
body.light .sgv2-cat-status strong{color:var(--text2);}
body.light .sgv2-duty-summary-note{color:var(--text2);}
body.light .sgv2-duty-summary-cta{color:var(--text2);border-color:rgba(26,30,46,.12);background:rgba(26,30,46,.03);}
body.light .sgv2-duty-summary-cta:hover{color:var(--text-strong);background:rgba(26,30,46,.06);}
body.light .sgv2-duty-chevron{color:var(--text3);}
body.light .sgv2-duty-head:hover .sgv2-duty-chevron,
body.light .sgv2-duty-row.is-open .sgv2-duty-chevron{color:var(--text-strong);}
body.light .sgv2-duty-date{color:var(--text3);}
body.light .sgv2-duty-empty{border-color:rgba(26,30,46,.12);background:rgba(26,30,46,.025);}
body.light .sgv2-duty-empty span{color:var(--text2);}
body.light .sgv2-cat-pot{color:var(--text2);background:rgba(26,30,46,.04);border-color:rgba(26,30,46,.08);}
body.light .sgv2-cat-pot.is-live{color:var(--tone-warn-text);background:rgba(232,184,75,.07);border-color:rgba(232,184,75,.2);}
body.light .sgv2-cat-weight{color:var(--text3);}
body.light .sgv2-tone-badge{color:var(--text2);}
body.light .sgv2-tone-badge.is-good{color:var(--tone-good-fg);background:rgba(58,138,86,.1);border-color:rgba(58,138,86,.2);}
body.light .sgv2-tone-badge.is-warn{color:var(--tone-warn-text);background:rgba(232,184,75,.1);border-color:rgba(232,184,75,.2);}
body.light .sgv2-tone-badge.is-poor{color:var(--tone-poor-fg);background:rgba(184,88,88,.1);border-color:rgba(184,88,88,.22);}
@media(max-width:1180px){
  .sgv2-hero-grid{grid-template-columns:1fr;}
}
@media(max-width:980px){
  .sgv2-cat-grid,
  .sgv2-info-grid{grid-template-columns:1fr;}
}
@media(max-width:760px){
  .sgv2{padding-left:16px;padding-right:16px;}
  .sgv2-hero{padding:24px 18px 22px;margin-bottom:36px;border-radius:24px;}
  .sgv2-section + .sgv2-section{margin-top:30px;}
  .sgv2-hero-top{margin-bottom:18px;}
  .sgv2-hero-main{flex-direction:column;align-items:center;gap:16px;text-align:center;}
  .sgv2-hero-ring{margin:0 auto;}
  .sgv2-hero-copy{display:flex;flex-direction:column;align-items:center;text-align:center;}
  .sgv2-hero-title{font-size:24px;}
  .sgv2-hero-sub{max-width:29ch;}
  .sgv2-hero-trend{align-self:center;}
  .sgv2-cockpit{grid-template-columns:1fr;gap:12px;}
  .sgv2-cockpit-card{padding:16px 16px 17px;}
  .sgv2-focus-row{gap:10px;margin-top:18px;padding-top:18px;}
  .sgv2-action{grid-template-columns:1fr;align-items:flex-start;}
  .sgv2-action-kicker{min-width:0;}
  .sgv2-cat-metrics{grid-template-columns:1fr;}
  .sgv2-duty-summary{grid-template-columns:1fr;gap:var(--space-md);}
  .sgv2-duty-summary-note{text-align:left;max-width:none;justify-self:start;}
  .sgv2-duty-summary-cta{justify-self:start;}
  .sgv2-duty-head,
  .sgv2-duty-detail{grid-template-columns:1fr;}
  .sgv2-duty-amount{text-align:left;}
}
@media(max-width:520px){
  .sgv2-hero{padding:22px 16px 20px;}
  .sgv2-hero-top{flex-direction:column;align-items:center;gap:10px;text-align:center;margin-bottom:16px;}
  .sgv2-kicker,
  .sgv2-tone-badge{align-self:center;}
  .sgv2-hero-ring svg{width:164px;height:164px;}
  .sgv2-hero-title{font-size:22px;}
  .sgv2-cockpit-card strong{font-size:16px;}
  .sgv2-focus-row{flex-direction:column;}
  .sgv2-focus-chip{width:100%;justify-content:flex-start;}
}

/* Touch-Target-Floor (WCAG 2.5.5 / Apple HIG) auf coarse Pointern — app-weiter
   WebKit-Sweep (iPhone 13, ergänzend zu #3721): inline-cta 97×15 (sehr flach),
   duty-summary-cta 36×36, duty-toggle 56×32. Der inline-cta sitzt im
   Block-Wrapper .sgv2-cat-cta (kein Fließtext) → min-height unkritisch.
   duty-summary-cta ist Icon-Button → feste 44×44. */
@media (pointer: coarse) {
  .sgv2-inline-cta { min-height: 44px; padding-block: 14px; }
  .sgv2-duty-summary-cta { width: 44px; height: 44px; }
  .sgv2-duty-toggle { min-height: 44px; padding-block: 11px; }
}

/* ════════════════════════════════════════════════════════════════════
   STEUERGESUNDHEIT — v5-Frontend (PR 1: Hero + Facts + Aktionen)
   Pixel-Referenz: steuergesundheit-v5-mockup.html (v3-Basis + Token-
   Treue, Freigabe 2026-06-12). Die Klassennamen folgen 1:1 dem Mockup,
   sind aber unter dem Seiten-Scope .sgv5 gekapselt (keine globalen
   Generika wie .hero/.pill im App-Namespace). Nur var(--*)-Tokens aus
   _00-tokens.css — keine neuen Hex-Werte in Component-Rules.
   Manifest-Position: nach _40b-steuergesundheit-experimental.css
   (ersetzt die v2.1-Partials _40c-next-actions + _40d-hero-v21).
   PR 2 ergänzt Diagnose/Pflichten/Preflight/Drawer/Chart im selben
   Scope-Muster.
   ════════════════════════════════════════════════════════════════════ */

/* ── Icon-Sprite-Container (EUER.html, ersetzt das style=-Attribut des
      Mockups — CSP-Freeze verbietet Inline-Styles) ──────────────────── */
.sgv5-icon-defs{position:absolute;width:0;height:0;overflow:hidden;}

/* ── Kopfzeile: Kontext-Pills, rechtsbündig ─────────────────────────── */
.sgv5 .pills-top{display:flex;justify-content:flex-end;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0 4px;}
.sgv5 .pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  padding:6px 12px;
  color:var(--text);
  background:var(--card);
  font-weight:var(--fw-semibold);
  font-size:12.5px;
  box-shadow:var(--shadow-sm);
}
.sgv5 .pill .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--tone-good-bg);}

/* ── Gesamtstatus-Hero (asymmetrisch: Status links, Score rechts) ───── */
.sgv5 .hero{
  margin-top:28px;
  display:grid;
  grid-template-columns:1.5fr .94fr;
  gap:0;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-hero);
  box-shadow:var(--shadow-lg);
  position:relative;
  overflow:hidden;
}
.sgv5 .hero::after{
  content:"";
  position:absolute;
  left:28px;
  right:28px;
  bottom:0;
  height:3px;
  border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,var(--red),var(--accent) 36%,var(--green));
  opacity:.6;
}
.sgv5 .hero-status{padding:34px 18px 32px 34px;position:relative;z-index:1;}
.sgv5 .status-flag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:var(--radius-pill);
  padding:7px 13px;
  font-size:12.5px;
  font-weight:var(--fw-bold);
  letter-spacing:.02em;
  background:var(--tone-warn-bg);
  color:var(--tone-warn-text);
  border:1px solid var(--tone-warn-border);
}
.sgv5 .status-flag.is-good{background:var(--tone-good-bg);color:var(--tone-good-fg);border-color:var(--tone-good-border);}
.sgv5 .hero-status h2{
  font-size:clamp(26px,2.7vw,38px);
  line-height:1.05;
  letter-spacing:-.04em;
  color:var(--text-strong);
  margin:15px 0 13px;
  font-weight:var(--fw-bold);
  max-width:21ch;
}
.sgv5 .hero-status p{color:var(--text2);font-size:var(--fs-body);line-height:1.6;margin:0;max-width:56ch;}

/* Status-Chips */
.sgv5 .chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px;}
.sgv5 .chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border-radius:var(--radius-pill);
  padding:7px 12px;
  font-size:12.5px;
  font-weight:var(--fw-semibold);
  border:1px solid var(--border);
  color:var(--text2);
  background:var(--card);
}
.sgv5 .chip i{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--text3);}
.sgv5 .chip.c-red{background:var(--tone-poor-bg);border-color:var(--tone-poor-border);color:var(--tone-poor-fg);}
.sgv5 .chip.c-red i{background:var(--tone-poor-fg);}
.sgv5 .chip.c-amber{background:var(--tone-warn-bg);border-color:var(--tone-warn-border);color:var(--tone-warn-text);}
.sgv5 .chip.c-amber i{background:var(--accent2);}
.sgv5 .chip.c-blue{background:var(--tone-info-bg);border-color:var(--tone-info-border);color:var(--tone-info-fg);}
.sgv5 .chip.c-blue i{background:var(--tone-info-fg);}
.sgv5 .chip.c-gray{background:rgba(var(--text-rgba-base),.06);border-color:rgba(var(--text-rgba-base),.16);color:var(--text3);}
.sgv5 .chip.c-gray i{background:var(--text3);}
.sgv5 .chip.c-green{background:var(--tone-good-bg);border-color:var(--tone-good-border);color:var(--tone-good-fg);}
.sgv5 .chip.c-green i{background:var(--tone-good-fg);}

/* Score-Karte (rechts) */
.sgv5 .hero-score{
  padding:28px;
  display:grid;
  place-items:center;
  background:var(--card2);
  border-left:1px solid var(--border);
  position:relative;
}
.sgv5 .score-card{text-align:center;width:100%;max-width:300px;}
.sgv5 .ring-wrap{position:relative;width:180px;height:180px;margin:0 auto;}
.sgv5 .ring-wrap svg{transform:rotate(-90deg);}
.sgv5 .ring-track{fill:none;stroke:var(--border);stroke-width:11;}
.sgv5 .ring-val{fill:none;stroke:var(--green);stroke-width:11;stroke-linecap:round;}
.sgv5 .ring-val.is-fair{stroke:var(--accent);}
.sgv5 .ring-val.is-poor{stroke:var(--red);}
.sgv5 .ring-center{position:absolute;inset:0;display:grid;place-items:center;text-align:center;}
.sgv5 .ring-center strong{
  font-family:var(--font-mono);
  font-size:48px;
  font-weight:var(--fw-bold);
  letter-spacing:-.04em;
  color:var(--text-strong);
  display:block;
  line-height:1;
}
.sgv5 .ring-center span{
  display:block;
  margin-top:5px;
  color:var(--text3);
  font-size:var(--fs-xs);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:var(--fw-bold);
}
.sgv5 .score-meta{margin-top:18px;display:grid;gap:8px;text-align:left;}
.sgv5 .score-meta .row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border:1px solid var(--border);
  background:var(--card);
  border-radius:var(--radius-md);
  padding:9px 12px;
  font-size:var(--fs-base);
}
.sgv5 .score-meta .row span{color:var(--text2);}
.sgv5 .score-meta .row b{font-family:var(--font-mono);font-weight:var(--fw-semibold);color:var(--text-strong);}
.sgv5 .why-row{
  font-family:var(--font-sans);
  cursor:pointer;
  width:100%;
  border:1px solid var(--tone-poor-border);
  background:var(--tone-poor-bg);
  border-radius:var(--radius-md);
  padding:9px 12px;
  font-size:var(--fs-base);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  color:var(--tone-poor-fg);
  font-weight:var(--fw-semibold);
  text-align:left;
  transition:transform .15s ease;
}
.sgv5 .why-row:hover{transform:translateY(-1px);}
.sgv5 .why-row em{font-style:normal;font-weight:var(--fw-bold);display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.sgv5 .score-foot{margin-top:12px;color:var(--text3);font-size:var(--fs-sm);line-height:1.5;}
/* Vier Teilbalken (P2 #14) — Card-Rahmen wie .score-meta .row, damit die
   Balken optisch zum restlichen Meta-Block passen; .cockpit-beta-bar-*
   selbst (Track/Fill/Label) kommt aus _45i-cockpit-beta-rail.css. */
.sgv5 .score-meta .sgv5-score-bars{
  border:1px solid var(--border);
  background:var(--card);
  border-radius:var(--radius-md);
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.sgv5 .sgv5-score-bars-hint{margin:0;color:var(--text3);font-size:var(--fs-xs);line-height:1.4;text-align:left;}

/* ── Facts-Strip (3 Boxen unter dem Hero) ───────────────────────────── */
.sgv5.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px;}
.sgv5 .fact{
  display:flex;
  align-items:center;
  gap:13px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:14px 16px;
  box-shadow:var(--shadow-sm);
}
.sgv5 .fact .f-icon{width:36px;height:36px;border-radius:var(--radius-md);display:grid;place-items:center;flex:none;}
.sgv5 .fact.f-warn .f-icon{background:var(--tone-warn-bg);color:var(--tone-warn-text);}
.sgv5 .fact.f-due .f-icon{background:var(--tone-info-bg);color:var(--tone-info-fg);}
.sgv5 .fact.f-data .f-icon{background:rgba(var(--text-rgba-base),.06);color:var(--text3);}
.sgv5 .fact span{display:block;color:var(--text3);font-size:var(--fs-sm);font-weight:var(--fw-bold);letter-spacing:.07em;text-transform:uppercase;}
.sgv5 .fact b{display:block;margin-top:3px;font-size:14px;color:var(--text-strong);font-weight:var(--fw-semibold);}

/* ── Sektion „Heute wichtig“: Abstand + Kopf + Plan-Progress ────────── */
.sgv5.section{margin-top:64px;}
.sgv5 .section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:18px;flex-wrap:wrap;}
.sgv5 .kicker{color:var(--accent);font-size:var(--fs-sm);font-weight:var(--fw-bold);letter-spacing:.15em;text-transform:uppercase;}
.sgv5 .section-head h2{
  font-size:clamp(21px,2vw,27px);
  margin:7px 0 6px;
  letter-spacing:-.03em;
  color:var(--text-strong);
  font-weight:var(--fw-bold);
  line-height:1.1;
}
.sgv5 .section-head .sub{color:var(--text2);margin:0;font-size:14.5px;max-width:760px;line-height:1.5;}
.sgv5 .plan-progress{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:11px 16px;
  box-shadow:var(--shadow-sm);
  flex:none;
}
.sgv5 .plan-progress b{font-size:14px;color:var(--text-strong);font-family:var(--font-mono);font-weight:var(--fw-semibold);white-space:nowrap;}
.sgv5 .plan-progress small{display:block;color:var(--text3);font-size:var(--fs-sm);margin-top:2px;}
.sgv5 .pp-bar{width:120px;height:7px;border-radius:var(--radius-pill);background:rgba(var(--text-rgba-base),.08);overflow:hidden;}
.sgv5 .pp-bar i{display:block;height:100%;width:2%;background:var(--green);border-radius:var(--radius-pill);}

/* ── Aktions-Karten (finales Karten-Design, Variante C) ─────────────── */
.sgv5 .n-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.sgv5 .n-card{
  border:1px solid var(--border);
  background:var(--card);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm);
  padding:20px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  text-align:left;
}
.sgv5 .n-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--border2);}
.sgv5 .n-card.is-first{border-color:var(--tone-poor-border);}
.sgv5 .n-badges{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:13px;
}
.sgv5 .n-badge{
  display:inline-block;
  font-size:10.5px;
  font-weight:var(--fw-extrabold);
  letter-spacing:.07em;
  text-transform:uppercase;
  border-radius:var(--radius-pill);
  padding:4px 11px;
  border:1px solid var(--border);
  color:var(--text2);
  background:var(--card2);
}
.sgv5 .n-badge.b-red{background:var(--tone-poor-bg);color:var(--tone-poor-fg);border-color:var(--tone-poor-border);}
.sgv5 .n-badge.b-green{background:var(--tone-good-bg);color:var(--tone-good-fg);border-color:var(--tone-good-border);}
.sgv5 .n-badge.b-blue{background:var(--tone-info-bg);color:var(--tone-info-fg);border-color:var(--tone-info-border);}
.sgv5 .n-card h3{margin:0 0 7px;font-size:16px;color:var(--text-strong);font-weight:var(--fw-bold);letter-spacing:-.012em;line-height:1.3;}
.sgv5 .n-card>p{margin:0;color:var(--text2);font-size:var(--fs-base);line-height:1.55;flex:1;}
.sgv5 .n-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;color:var(--text3);font-size:12.5px;font-weight:var(--fw-semibold);margin:15px 0 13px;}
.sgv5 .n-meta svg{flex:none;position:relative;top:1px;}
.sgv5 .n-meta .msep{color:var(--border2);}
.sgv5 .n-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;}
.sgv5 .dlink{
  font-family:var(--font-sans);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:5px;
  border:0;
  background:none;
  padding:4px 2px;
  color:var(--text3);
  font-size:12.5px;
  font-weight:var(--fw-semibold);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:var(--border2);
}
.sgv5 .dlink:hover{color:var(--text2);}
.sgv5 .sbtn{
  font-family:var(--font-sans);
  cursor:pointer;
  border:1px solid var(--border2);
  background:var(--card);
  color:var(--text);
  border-radius:var(--radius-sm);
  padding:9px 15px;
  font-weight:var(--fw-semibold);
  font-size:var(--fs-base);
  white-space:nowrap;
  transition:transform .15s ease,background .15s ease;
  text-align:center;
}
.sgv5 .sbtn:hover{transform:translateY(-1px);}
.sgv5 .sbtn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.sgv5 .sbtn.primary:hover{background:var(--accent2);}

/* ── Responsive (Shell-Maße wie Mockup: Sidebar 200px) ──────────────── */
@media(max-width:1240px){
  .sgv5 .hero{grid-template-columns:1fr;}
  .sgv5 .hero-score{border-left:0;border-top:1px solid var(--border);}
  .sgv5 .n-grid{grid-template-columns:1fr 1fr;}
  .sgv5 .n-grid .is-first{grid-column:1 / -1;}
}
@media(max-width:760px){
  .sgv5 .pills-top{justify-content:flex-start;}
  .sgv5.facts{grid-template-columns:1fr;}
  .sgv5 .n-grid{grid-template-columns:1fr;}
  .sgv5 .n-grid .is-first{grid-column:auto;}
  .sgv5.section{margin-top:52px;}
  .sgv5 .hero-status{padding:26px 20px;}
  .sgv5 .plan-progress{width:100%;justify-content:space-between;}
}
@media (prefers-reduced-motion: reduce){
  .sgv5 .why-row,.sgv5 .n-card,.sgv5 .sbtn{transition:none;}
}

/* ── Light-Mode (Token-getrieben; nur Schatten weicher, wie _40d) ───── */
body.light .sgv5 .pill,
body.light .sgv5 .fact,
body.light .sgv5 .plan-progress,
body.light .sgv5 .n-card{box-shadow:0 10px 30px rgba(12,15,26,.05);}
body.light .sgv5 .hero{box-shadow:0 24px 60px rgba(12,15,26,.09);}
body.light .sgv5 .kicker{color:var(--accent-deep);}

/* ============================================================
   Steuergesundheit V2 — v5-Vollausbau Frontend PR 2
   Untere Sektionen: Scoreentwicklung (Chart + Forecast), Diagnose
   (6 Check-Karten), Split (Pflichten + Preflight), Sonderfälle,
   Transparenz. Drawer nutzt die geteilte window.DetailSheet-API
   (public/js/detail-sheet.js) — KEIN eigener Drawer hier.

   Alle Selektoren sind `.sgv5`-gescoped (kollisionsfrei zu App-weiten
   Klassen), token-treu auf die App-Variablen aus _00-tokens.css gemappt
   (Mockup-Hex/Radii → var(--*)). Geometrie 1:1 aus dem freigegebenen
   Mockup (steuergesundheit-v5-mockup.html), übersetzt auf die echten
   Tokens. Light/Dark folgen automatisch den Theme-Tokens.

   Geschwister: _40e-steuergesundheit-v5.css (Hero/Facts/Aktionen, PR 1).
   ============================================================ */

/* ---------- Section-Rahmen (gemeinsam, wie _40e .section-head) ---------- */
.sgv5.sg-section{margin-top:64px;}
.sgv5 .range-btn{border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:var(--radius-sm);padding:8px 16px;font-weight:var(--fw-semibold);font-size:13.5px;box-shadow:var(--shadow-sm);transition:transform .15s ease,background .15s ease;}
.sgv5 .range-btn:hover{transform:translateY(-1px);}

/* ---------- Scoreentwicklung: dev-grid (Chart links, Forecast rechts) ---------- */
.sgv5 .dev-grid{display:grid;grid-template-columns:1fr 318px;gap:16px;align-items:stretch;}
.sgv5 .chart-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-hero);padding:24px 24px 16px;box-shadow:var(--shadow-sm);min-width:0;position:relative;overflow:hidden;display:flex;flex-direction:column;}
.sgv5 .chart-scroll{overflow-x:auto;}
.sgv5 .chart{width:100%;height:auto;display:block;min-width:560px;}
.sgv5 .chart .ax{stroke:var(--border);stroke-width:1;}
.sgv5 .chart .ax-lab{font-family:var(--font-mono);font-size:12px;font-weight:var(--fw-semibold);fill:var(--text3);}
.sgv5 .chart .month{font-size:13px;font-weight:var(--fw-semibold);fill:var(--text2);font-family:var(--font-sans);}
.sgv5 .chart .tline{fill:none;stroke:var(--green);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;}
.sgv5 .chart .tarea{fill:url(#sgv5Area);opacity:.9;}
.sgv5 .chart .pt{fill:var(--card);stroke:var(--green);stroke-width:4;transform-box:fill-box;transform-origin:center;transition:transform .2s ease;cursor:default;}
.sgv5 .chart .pt:hover{transform:scale(1.3);}
.sgv5 .chart .pt-val{font-family:var(--font-mono);font-size:16.5px;font-weight:var(--fw-bold);fill:var(--text-strong);}
.sgv5 .chart .pt-hot{fill:var(--green);stroke:var(--card);stroke-width:4;transform-box:fill-box;transform-origin:center;}
.sgv5 .chart .badge-r{fill:var(--green);}
/* stylelint-disable-next-line color-no-hex -- Badge-Text immer weiß auf grünem badge-r (Kontrast), kein Theme-Token nötig. */
.sgv5 .chart .badge-t{font-family:var(--font-mono);font-size:18px;font-weight:var(--fw-bold);fill:#fff;}
:root[data-theme="dark"] .sgv5 .chart .badge-t{fill:var(--accent-ink);}
.sgv5 .chart .anno-l{stroke:var(--blue);stroke-width:1.4;stroke-dasharray:3 5;opacity:.6;}
.sgv5 .chart .anno-r{fill:var(--tone-info-bg);stroke:var(--tone-info-border);}
.sgv5 .chart .anno-t{font-size:11.5px;font-weight:var(--fw-semibold);fill:var(--blue);font-family:var(--font-sans);}
/* Reveal-Animation der Trendlinie (vanilla, per JS gesetzt; reduced-motion → sofort) */
.sgv5 .chart .tline.is-revealing{transition:stroke-dashoffset 1.1s ease;}
@media (prefers-reduced-motion: reduce){.sgv5 .chart .tline.is-revealing{transition:none;}}

.sgv5 .chart-tip{display:flex;gap:14px;align-items:flex-start;background:var(--tone-info-bg);border:1px solid var(--tone-info-border);border-radius:var(--radius-xl);padding:15px 18px;margin-top:auto;}
.sgv5 .chart-tip .tip-ico{width:36px;height:36px;border-radius:var(--radius-md);background:var(--tone-info-bg);display:grid;place-items:center;color:var(--blue);flex:none;}
.sgv5 .chart-tip p{margin:0;color:var(--text2);font-size:var(--fs-body);line-height:1.55;}
.sgv5 .chart-tip b{color:var(--text-strong);}

/* Chart-Empty / Neu-User-„Verlauf baut sich auf" */
.sgv5 .chart-empty{display:grid;place-items:center;text-align:center;min-height:220px;padding:24px;color:var(--text2);}
.sgv5 .chart-empty .ce-ico{width:42px;height:42px;border-radius:var(--radius-md);background:var(--card2);display:grid;place-items:center;color:var(--text3);margin:0 auto 14px;}
.sgv5 .chart-empty b{display:block;color:var(--text-strong);font-size:15px;font-weight:var(--fw-bold);margin-bottom:6px;}
.sgv5 .chart-empty p{margin:0;font-size:var(--fs-body);line-height:1.5;max-width:42ch;}

/* Forecast-Spalte */
.sgv5 .forecast{display:grid;gap:12px;align-content:start;}
/* Der fc-hero ist bewusst ein dunkler „Hero im Hero" (themenunabhängig dunkel,
   wie im freigegebenen Mockup) — eigener Farbraum, der NICHT den hellen/dunklen
   Theme-Tokens folgt. Daher feste Hex-Werte (Gradient, hellblaue Beschriftung,
   grüner Akzent, helle Prosa) ohne passendes Theme-Token. */
/* stylelint-disable color-no-hex */
.sgv5 .fc-hero{background:linear-gradient(140deg,#141b30 0%,#26314f 100%);color:#fff;border-radius:var(--radius-hero);padding:21px;box-shadow:var(--shadow-lg);}
:root[data-theme="dark"] .sgv5 .fc-hero{background:linear-gradient(140deg,#1b2440 0%,#2e3b63 100%);}
.sgv5 .fc-hero span{display:block;color:#aeb8d4;font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:var(--fw-bold);margin-bottom:9px;}
.sgv5 .fc-hero strong{font-family:var(--font-mono);font-size:31px;letter-spacing:-.03em;font-weight:var(--fw-bold);}
.sgv5 .fc-hero strong em{font-style:normal;color:#5fe0ae;}
.sgv5 .fc-hero p{color:#ccd5ea;line-height:1.5;margin:9px 0 0;font-size:13.5px;}
/* stylelint-enable color-no-hex */
.sgv5 .delta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);}
.sgv5 .delta b{font-size:13.5px;color:var(--text-strong);font-weight:var(--fw-semibold);}
.sgv5 .delta small{color:var(--text3);display:block;margin-top:2px;font-size:12px;}
.sgv5 .delta .d-val{font-family:var(--font-mono);font-weight:var(--fw-bold);color:var(--green);font-size:15px;white-space:nowrap;}
.sgv5 .delta .d-val.neutral{color:var(--blue);font-size:12px;font-family:var(--font-sans);font-weight:var(--fw-bold);}

/* ---------- Diagnose: diag-Grid (6 Check-Karten) ---------- */
.sgv5 .diag{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-flow:dense;gap:14px;}
.sgv5 .check{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:21px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;text-align:left;font-family:var(--font-sans);color:var(--text);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;width:100%;}
.sgv5 .check:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--border2);}
.sgv5 .check-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;}
.sgv5 .check h3{margin:0;font-size:16px;color:var(--text-strong);font-weight:var(--fw-bold);letter-spacing:-.015em;}
.sgv5 .check-status{font-size:11.5px;font-weight:var(--fw-extrabold);border-radius:var(--radius-pill);padding:5px 10px;white-space:nowrap;border:1px solid var(--border);color:var(--text2);background:var(--card2);}
.sgv5 .check-status.st-kritisch{color:var(--tone-poor-fg);background:var(--tone-poor-bg);border-color:var(--tone-poor-border);}
.sgv5 .check-status.st-achtung{color:var(--tone-warn-text);background:var(--tone-warn-bg);border-color:var(--tone-warn-border);}
.sgv5 .check-status.st-hinweis{color:var(--tone-info-fg);background:var(--tone-info-bg);border-color:var(--tone-info-border);}
.sgv5 .check-status.st-ok{color:var(--tone-good-fg);background:var(--tone-good-bg);border-color:var(--tone-good-border);}
.sgv5 .check-status.st-na{color:var(--text3);background:var(--card2);border-color:var(--border);}
.sgv5 .check>p{color:var(--text2);line-height:1.52;margin:11px 0 15px;font-size:13.5px;flex:1;}
.sgv5 .ev-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.sgv5 .ev{border:1px solid var(--border);border-radius:var(--radius-md);padding:9px 11px;background:var(--card2);}
.sgv5 .ev span{display:block;color:var(--text3);font-size:11px;font-weight:var(--fw-semibold);}
.sgv5 .ev b{font-size:14px;color:var(--text-strong);font-family:var(--font-mono);font-weight:var(--fw-semibold);}
.sgv5 .check-foot{margin-top:15px;display:flex;align-items:center;gap:6px;color:var(--blue);font-size:13px;font-weight:var(--fw-bold);}
.sgv5 .check-foot svg{transition:transform .18s ease;}
.sgv5 .check:hover .check-foot svg{transform:translateX(3px);}

/* ---------- Split: Pflichten-Panel (links) + Preflight (rechts) ---------- */
.sgv5 .split{display:grid;grid-template-columns:1fr 1.08fr;gap:14px;}
.sgv5 .panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-hero);padding:24px;box-shadow:var(--shadow-sm);}
.sgv5 .panel h3{font-size:19px;margin:7px 0 16px;color:var(--text-strong);letter-spacing:-.025em;font-weight:var(--fw-bold);}
.sgv5 .duty{display:grid;grid-template-columns:1fr auto auto;gap:14px 16px;align-items:center;border-top:1px solid var(--border);padding:14px 0;}
.sgv5 .duty:first-of-type{border-top:0;padding-top:4px;}
.sgv5 .duty b{font-size:14.5px;color:var(--text-strong);}
.sgv5 .duty small{display:block;color:var(--text3);margin-top:3px;font-size:12.5px;}
.sgv5 .amount{font-family:var(--font-mono);font-weight:var(--fw-semibold);font-size:14.5px;color:var(--text-strong);}
/* Klickbare Abgabe-/Zahlungs-Toggles (ersetzen das frühere einzelne Board-Badge). */
.sgv5 .duty-toggles{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;justify-content:flex-end;}
.sgv5 .duty-toggle-wrap{display:flex;flex-direction:column;gap:4px;align-items:flex-start;}
.sgv5 .duty-toggle-label{font-size:10px;font-weight:var(--fw-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--text3);}
.sgv5 .duty-status.is-toggle{cursor:pointer;font-family:inherit;transition:transform .12s ease,filter .12s ease;}
.sgv5 .duty-status.is-toggle:hover{transform:translateY(-1px);filter:brightness(1.06);}
.sgv5 .duty-status.is-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.sgv5 .duty-status{font-size:11.5px;font-weight:var(--fw-extrabold);border-radius:var(--radius-pill);padding:4px 10px;white-space:nowrap;border:1px solid var(--border);color:var(--text2);background:var(--card2);}
.sgv5 .duty-status.st-kritisch{color:var(--tone-poor-fg);background:var(--tone-poor-bg);border-color:var(--tone-poor-border);}
.sgv5 .duty-status.st-achtung{color:var(--tone-warn-text);background:var(--tone-warn-bg);border-color:var(--tone-warn-border);}
.sgv5 .duty-status.st-na{color:var(--text3);background:var(--card2);border-color:var(--border);}
.sgv5 .duty-status.st-ok{color:var(--tone-good-fg);background:var(--tone-good-bg);border-color:var(--tone-good-border);}
.sgv5 .fine{color:var(--text3);font-size:12.5px;line-height:1.55;margin:14px 0 0;border-top:1px dashed var(--border);padding-top:13px;}

/* Preflight-Panel */
.sgv5 .exp-verdict{margin-bottom:16px;display:flex;align-items:flex-start;gap:12px;background:var(--tone-warn-bg);border:1px solid var(--tone-warn-border);border-radius:var(--radius-xl);padding:14px 16px;}
.sgv5 .exp-verdict.is-ready{background:var(--tone-good-bg);border-color:var(--tone-good-border);}
.sgv5 .exp-verdict .pf-ico{background:var(--card);color:var(--tone-warn-text);}
.sgv5 .exp-verdict.is-ready .pf-ico{color:var(--tone-good-fg);}
.sgv5 .exp-verdict b{color:var(--tone-warn-text);font-size:14px;display:block;}
.sgv5 .exp-verdict.is-ready b{color:var(--tone-good-fg);}
.sgv5 .exp-verdict small{display:block;color:var(--text2);margin-top:3px;font-size:12.5px;line-height:1.5;}
.sgv5 .pf-row{display:flex;align-items:center;gap:12px;border-top:1px solid var(--border);padding:12px 0;}
.sgv5 .pf-row:first-of-type{border-top:0;padding-top:2px;}
.sgv5 .pf-ico{width:30px;height:30px;border-radius:var(--radius-md);display:grid;place-items:center;flex:none;}
.sgv5 .pf-ok .pf-ico{background:var(--tone-good-bg);color:var(--tone-good-fg);}
.sgv5 .pf-fail .pf-ico{background:var(--tone-poor-bg);color:var(--tone-poor-fg);}
.sgv5 .pf-warn .pf-ico{background:var(--tone-warn-bg);color:var(--tone-warn-text);}
.sgv5 .pf-row b{font-size:14px;color:var(--text-strong);font-weight:var(--fw-semibold);}
.sgv5 .pf-row small{display:block;color:var(--text3);font-size:12.5px;margin-top:2px;}
.sgv5 .pf-row .pf-right{margin-left:auto;font-family:var(--font-mono);font-size:12.5px;color:var(--text2);white-space:nowrap;}
.sgv5 .blocker-tag{font-size:10px;font-weight:var(--fw-extrabold);letter-spacing:.06em;text-transform:uppercase;color:var(--tone-poor-fg);background:var(--tone-poor-bg);border:1px solid var(--tone-poor-border);border-radius:var(--radius-sm);padding:2px 6px;margin-left:8px;vertical-align:1px;}
.sgv5 .exp-actions{display:flex;gap:8px;margin-top:16px;}
.sgv5 .pf-unavailable{color:var(--text3);font-size:13px;line-height:1.5;padding:8px 0;}

/* ---------- Sonderfälle: special (2 Karten) ---------- */
.sgv5 .special{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.sgv5 .sp-card{background:var(--card);border:1px dashed var(--border2);border-radius:var(--radius-xl);padding:21px;box-shadow:var(--shadow-sm);}
.sgv5 .sp-card h3{margin:10px 0 8px;font-size:16px;color:var(--text-strong);font-weight:var(--fw-bold);}
.sgv5 .sp-card p{margin:0;color:var(--text2);font-size:13.5px;line-height:1.55;}
.sgv5 .sp-card .sbtn{margin-top:15px;}
.sgv5 .sp-tag{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:var(--fw-extrabold);border-radius:var(--radius-pill);padding:5px 11px;}
.sgv5 .sp-tag.na{background:var(--card2);color:var(--text3);border:1px solid var(--border);}
.sgv5 .sp-tag.user{background:var(--tone-good-bg);color:var(--tone-good-fg);border:1px solid var(--tone-good-border);}

/* ---------- Transparenz: trans (3 Spalten + legal) ---------- */
.sgv5 .trans{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-hero);padding:26px;box-shadow:var(--shadow-sm);}
.sgv5 .trans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:16px;}
.sgv5 .trans-col h4{margin:0 0 9px;font-size:13px;color:var(--text-strong);font-weight:var(--fw-extrabold);letter-spacing:.02em;}
.sgv5 .trans-col ul{margin:0;padding:0;list-style:none;}
.sgv5 .trans-col li{color:var(--text2);font-size:13px;line-height:1.5;padding:5px 0 5px 18px;position:relative;}
.sgv5 .trans-col li::before{content:"";position:absolute;left:2px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--border2);}
.sgv5 .trans-legal{margin-top:18px;border-top:1px dashed var(--border);padding-top:14px;color:var(--text3);font-size:12.5px;line-height:1.55;}

/* ---------- Responsive ---------- */
@media(max-width:1240px){
  .sgv5 .dev-grid{grid-template-columns:1fr;}
  .sgv5 .diag{grid-template-columns:1fr 1fr;}
  .sgv5 .split,.sgv5 .special{grid-template-columns:1fr;}
}
@media(max-width:760px){
  .sgv5 .diag,.sgv5 .trans-grid{grid-template-columns:1fr;}
  .sgv5 .duty{grid-template-columns:1fr;gap:6px;}
  .sgv5.sg-section{margin-top:52px;}
}

/* ============================================================
   Steuergesundheit V5 — Autopilot Audit Engine: Findings-Drill-down
   IM Karten-Detail-Drawer (DetailSheet). Seit der Verzahnung
   (docs/features/AUDIT_ENGINE_DRILLDOWN.md, 2026-06-15) sind Findings
   KEIN eigener Seiten-Block mehr, sondern der „Konkrete Punkte"-Abschnitt
   hinter den Diagnose-Karten. Daher sind die Selektoren auf .detail-sheet
   gescoped (der Drawer liegt außerhalb des .sgv5-Scopes).

   Severity-Akzent: critical → --tone-poor, warning → --tone-warn,
   info → --tone-info. Token-treu auf die App-Variablen aus _00-tokens.css;
   Light/Dark folgen automatisch. Geschwister: _40e (Hero/Facts/Aktionen),
   _40f (Diagnose/Split), _90 (Detail-Sheet-Grundgerüst).
   ============================================================ */

/* ---------- Sektion „Konkrete Punkte" im Drawer-Body ---------- */
.detail-sheet .sgv5-find-section{margin-top:4px;margin-bottom:20px;}
.detail-sheet .sgv5-find-section-head{font-size:10px;font-weight:var(--fw-semibold,600);color:var(--accent);text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px;}
.detail-sheet .sgv5-find-loading,
.detail-sheet .sgv5-find-empty,
.detail-sheet .sgv5-find-unavailable{margin:0;color:var(--text3);font-size:12.5px;line-height:1.5;}
.detail-sheet .sgv5-find-list-head{font-size:12px;font-weight:var(--fw-semibold,600);color:var(--text2);margin-bottom:10px;}

/* ---------- Liste + Einzel-Zeile ---------- */
.detail-sheet .sgv5-find-list{display:grid;gap:10px;}
.detail-sheet .sgv5-find{background:var(--card2);border:1px solid var(--border);border-left:3px solid var(--border2);border-radius:12px;padding:12px 14px;}
.detail-sheet .sgv5-find.af-critical{border-left-color:var(--tone-poor-border);}
.detail-sheet .sgv5-find.af-warning{border-left-color:var(--tone-warn-border);}
.detail-sheet .sgv5-find.af-info{border-left-color:var(--tone-info-border);}

/* ---------- Kopf: Severity-Punkt + Titel + Severity-Label ---------- */
.detail-sheet .sgv5-find-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.detail-sheet .sgv5-find-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--text3);}
.detail-sheet .sgv5-find-dot--critical{background:var(--tone-poor-fg);}
.detail-sheet .sgv5-find-dot--warning{background:var(--tone-warn-text);}
.detail-sheet .sgv5-find-dot--info{background:var(--tone-info-fg);}
.detail-sheet .sgv5-find-title{font-size:13px;color:var(--text-strong);font-weight:var(--fw-bold,700);letter-spacing:-.01em;line-height:1.35;}
.detail-sheet .sgv5-find-sev{margin-left:auto;font-size:10px;font-weight:var(--fw-semibold,600);text-transform:uppercase;letter-spacing:.04em;color:var(--text3);}

/* ---------- Detail-Text ---------- */
.detail-sheet .sgv5-find-detail{margin:8px 0 0;color:var(--text2);font-size:12.5px;line-height:1.5;}

/* ---------- Fußzeile: „N betroffen" + Aktionen ---------- */
.detail-sheet .sgv5-find-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:11px;}
.detail-sheet .sgv5-find-affected{font-family:var(--font-mono);font-size:11px;font-weight:var(--fw-semibold,600);color:var(--text3);}
.detail-sheet .sgv5-find-actions{display:flex;gap:8px;margin-left:auto;}
.detail-sheet .sgv5-find-btn{font-family:inherit;font-size:12px;font-weight:var(--fw-bold,700);border-radius:8px;padding:5px 12px;cursor:pointer;border:1px solid var(--border);background:var(--card);color:var(--text2);transition:transform .12s ease,filter .12s ease,background .12s ease;}
.detail-sheet .sgv5-find-btn:hover{transform:translateY(-1px);filter:brightness(1.04);}
.detail-sheet .sgv5-find-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.detail-sheet .sgv5-find-btn:disabled{opacity:.55;cursor:default;transform:none;filter:none;}
.detail-sheet .sgv5-find-btn--ack{color:var(--tone-good-fg);background:var(--tone-good-bg);border-color:var(--tone-good-border);}
.detail-sheet .sgv5-find-btn--dismiss{color:var(--text3);}

/* ---------- Responsive ---------- */
@media(max-width:760px){
  .detail-sheet .sgv5-find-foot{align-items:flex-start;}
  .detail-sheet .sgv5-find-actions{margin-left:0;}
}

/* ════════════════════════════════════════════════════════════════════════
   EXPORT-COCKPIT — Mandanten-Sicht „Bereit für die Steuerberater-Übergabe?"
   Render: public/js/export-cockpit.js. Status-Chips nutzen die globale
   .app-status-chip-Komponente (_60). Pixel-Nähe: Steuergesundheit v5.
   ════════════════════════════════════════════════════════════════════════ */

.export-cockpit-frame { padding: 28px 40px; }

.ec-cockpit { max-width: 1100px; margin: 0 auto; }

.ec-head { margin-bottom: 24px; }
.ec-title {
  font-size: 26px;
  font-weight: var(--fw-bold, 700);
  color: var(--text);
  margin: 4px 0 6px;
}
.ec-sub { font-size: 14px; color: var(--text2); margin: 0; max-width: 60ch; }

.ec-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 24px; }

.ec-loading,
.ec-unavailable {
  padding: 24px;
  border: 1px dashed var(--border);
  border-radius: var(--radius, 10px);
  color: var(--text2);
  font-size: 14px;
  background: var(--card2, var(--bg2));
}

/* ─── Hero: Gesamtstatus + Score ─────────────────────────────────────────── */
.ec-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: var(--radius, 10px);
  background: var(--card2, var(--bg2));
  margin-bottom: 24px;
}
.ec-hero--good { border-left-color: var(--tone-good-border); }
.ec-hero--warn { border-left-color: var(--tone-warn-border); }
.ec-hero--poor { border-left-color: var(--tone-poor-border); }
.ec-hero--info { border-left-color: var(--tone-info-border); }
.ec-hero .app-status-chip { height: 28px; font-size: 13px; padding: 0 14px; }

.ec-score { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.ec-score-num { font-size: 28px; font-weight: var(--fw-bold, 700); color: var(--text); }
.ec-score-unit { font-size: 13px; color: var(--text2); }
.ec-score-bar {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: var(--bg3, var(--bg2));
  overflow: hidden;
}
.ec-score-fill {
  height: 100%;
  width: var(--ec-score, 0%);
  border-radius: 4px;
  background: var(--tone-good-border);
}

/* ─── Sektionen + Items ──────────────────────────────────────────────────── */
.ec-section { margin-bottom: 22px; }
.ec-section-title {
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: var(--text);
  margin: 0 0 10px;
}
.ec-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ec-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  background: var(--card2, var(--bg2));
}
.ec-item .app-status-chip { flex: none; margin-top: 1px; }
.ec-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ec-item-label { font-size: 14px; font-weight: var(--fw-semibold); color: var(--text); }
.ec-item-detail { font-size: 13px; color: var(--text2); }
.ec-item-action { font-size: 13px; color: var(--tone-info-fg); }

.ec-disclaimer {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text3, var(--text2));
  line-height: 1.5;
}

/* ─── Folge-Panels: Historie + DATEV-Vorschau ────────────────────────────── */
.ec-panel { margin-top: 28px; }
.ec-empty { font-size: 14px; color: var(--text2); margin: 8px 0 0; }

.ec-history-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 14px;
}
.ec-history-table th,
.ec-history-table td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.ec-history-table th {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  color: var(--text2);
}
.ec-history-table td { color: var(--text); }

.ec-datev-meta { font-size: 13px; color: var(--text2); margin: 10px 0 8px; }
.ec-datev-warnings { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ec-datev-warn { font-size: 13px; color: var(--text2); }
.ec-datev-warn--warn { color: var(--tone-warn-fg-strong); }
.ec-datev-pre {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  background: var(--bg3, var(--bg2));
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
}
.ec-datev-trunc { font-size: 12px; color: var(--text3, var(--text2)); margin: 8px 0 0; }

@media (max-width: 640px) {
  .export-cockpit-frame { padding: 20px 16px; }
  .ec-hero { flex-direction: column; align-items: stretch; }
  .ec-score { min-width: 0; }
  .ec-history-table { font-size: 13px; }
  .ec-history-table th, .ec-history-table td { padding: 6px 8px; }
}

/* ════════════════════════════════════════════════════════════════════════
   STEUERTIPPS-EXPORT (Beta) — kompakte Inline-Kachel im Export-Center.
   Render: public/js/exports-steuertipps-ui.js (_cardSkeleton + _applyCard).
   Die Kachel erbt .ex-row-Styles aus _13-export-center.css; dieser Partial
   steuert nur die steuertipps-spezifischen Details (Badge, Detail-Panel,
   Toggle-Feedback). Design-Tokens: --tone-good/warn/poor/info-*, --accent*.
   ════════════════════════════════════════════════════════════════════════ */

/* Die .st-card ist kein eigener Panel mehr — sie ist ein Listeneintrag in
   .ex-list, gleichrangig mit den anderen Export-Rows. Kein margin-top. */
.st-card { margin-top: 0; }

/* Beta-Badge in der Kachel-Titelzeile (kompakt, nicht aufdringlich). */
.st-badge-beta {
  display: inline-block;
  font-size: 10px;
  font-weight: var(--fw-bold, 700);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 1px 6px;
  border-radius: var(--radius-sm, 6px);
  margin-left: 6px;
  vertical-align: middle;
}

/* Toggle-Kachel: .ex-row erbt die Grundform; .st-toggle ist der klickbare
   Button. is-open = aktiver Zustand (dezentes Highlight). */
.st-toggle { width: 100%; text-align: left; cursor: pointer; }
.st-card.is-open .st-toggle {
  background: var(--bg2);
  border-color: var(--accent);
}

/* Versteckte Karte (Feature-Gate aus): komplett entfernt aus dem Layout. */
.st-card.is-hidden { display: none; }

/* Optionaler Reveal-Highlight (dezenter Akzent-Ring, ~1s nach Öffnen).
   Kein Blinken — ein sanftes visuelles Signal, dass unten etwas aufgeklappt ist. */
.st-detail--revealed {
  box-shadow: inset 0 0 0 1px var(--accent-soft, rgba(244, 192, 74, 0.35));
}

/* ─── Detail-Panel (aufgeklappt) ─────────────────────────────────────────── */
/* Kompakter Inline-Bereich unter der Kachel. Nur der Detailbereich darf
   scrollen (Präzisierung #1), nicht das gesamte Modal. */
.st-detail {
  padding: 14px 16px 4px;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--radius, 10px) var(--radius, 10px);
  background: var(--card, var(--bg));
  max-height: 320px;
  overflow-y: auto;
}

.st-year { font-size: 13px; color: var(--text2); margin: 0 0 10px; }

.st-profile-select {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.st-field-label { font-size: 12px; color: var(--text2); font-weight: var(--fw-semibold, 600); }
.st-profile {
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--card, var(--bg));
  color: var(--text);
  max-width: 320px;
}

.st-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

/* Hinweistext kompakt (max 2-3 Zeilen, dezenter Infokasten). */
.st-note {
  font-size: 11.5px;
  color: var(--text2);
  background: var(--bg2);
  border-left: 2px solid var(--accent);
  padding: 7px 10px;
  border-radius: var(--radius-sm, 6px);
  margin: 0 0 10px;
  line-height: 1.45;
}

/* ─── Vorschau (im Detail-Panel) ─────────────────────────────────────────── */
.st-summary { font-size: 12px; color: var(--text2); margin: 0 0 8px; }
.st-summary .st-blocker-count { color: var(--tone-poor-fg); font-weight: var(--fw-semibold, 600); }
.st-summary .st-warn-count { color: var(--tone-warn-text); font-weight: var(--fw-semibold, 600); }

.st-empty, .st-error {
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm, 6px);
  color: var(--text2);
  font-size: 12px;
  background: var(--card2, var(--bg2));
}

.st-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.st-preview-table th,
.st-preview-table td {
  padding: 5px 7px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.st-preview-table th {
  font-size: 10.5px;
  font-weight: var(--fw-semibold, 600);
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.st-preview-table td.st-amount {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.st-cat { color: var(--text); }
.st-subcat { font-size: 10.5px; color: var(--text2); margin-top: 1px; }

.st-status {
  display: inline-block;
  font-size: 10px;
  font-weight: var(--fw-semibold, 600);
  padding: 1px 5px;
  border-radius: var(--radius-sm, 6px);
  margin-right: 3px;
}
.st-ok { color: var(--tone-good-fg); }
.st-status-blocker { color: var(--tone-poor-fg); background: var(--tone-poor-bg); }
.st-status-warn { color: var(--tone-warn-text); background: var(--tone-warn-bg); }
.st-status-info { color: var(--text2); background: var(--bg2); }

/* ════════════════════════════════════════════════════════════════════════
   AUTOCAT-PILOT (PR1) — kompakte Inline-Kachel im Export-Center.
   Render: public/js/autocat-ui.js (_cardSkeleton + _applyCard + _applyResult).
   Die Kachel erbt .ex-row-Styles aus _13-export-center.css; dieser Partial
   steuert nur die autocat-spezifischen Details (Badge, Detail-Panel,
   Vorschau-Tabelle, Risk-Flags, Pager). Design-Tokens: --tone-good/warn/
   poor/info-*, --accent*. 1:1-Schwester-Partial zu _41b-steuertipps-export.css.
   ════════════════════════════════════════════════════════════════════════ */

/* Die .ac-card ist kein eigener Panel — sie ist ein Listeneintrag in
   .ex-list, gleichrangig mit den anderen Export-Rows. Kein margin-top. */
.ac-card { margin-top: 0; }

/* Pilot-Badge in der Kachel-Titelzeile (kompakt, nicht aufdringlich). */
.ac-badge-beta {
  display: inline-block;
  font-size: 10px;
  font-weight: var(--fw-bold, 700);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 1px 6px;
  border-radius: var(--radius-sm, 6px);
  margin-left: 6px;
  vertical-align: middle;
}

/* Toggle-Kachel: .ex-row erbt die Grundform; .ac-toggle ist der klickbare
   Button. is-open = aktiver Zustand (dezentes Highlight). */
.ac-toggle { width: 100%; text-align: left; cursor: pointer; }
.ac-card.is-open .ac-toggle {
  background: var(--bg2);
  border-color: var(--accent);
}

/* Versteckte Karte (Feature-Gate aus / Bundle-Ladefehler): komplett aus
   dem Layout entfernt. */
.ac-card.is-hidden { display: none; }

/* Lade-Platzhalter (export.js#_autocatCardMarkup), bevor das Lazy-Bundle
   angekommen ist — bewusst minimal, kein eigener Toggle-Button (noch nicht
   interaktiv). */
.ac-row-loading { padding: 10px 12px; }

/* ─── Detail-Panel (aufgeklappt) ─────────────────────────────────────────── */
.ac-detail {
  padding: 14px 16px 4px;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--radius, 10px) var(--radius, 10px);
  background: var(--card, var(--bg));
  max-height: 320px;
  overflow-y: auto;
}

.ac-year { font-size: 13px; color: var(--text2); margin: 0 0 10px; }

/* Hinweistext kompakt (max 2-3 Zeilen, dezenter Infokasten). */
.ac-note {
  font-size: 11.5px;
  color: var(--text2);
  background: var(--bg2);
  border-left: 2px solid var(--accent);
  padding: 7px 10px;
  border-radius: var(--radius-sm, 6px);
  margin: 0 0 10px;
  line-height: 1.45;
}

.ac-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

/* ─── Ergebnis (im Detail-Panel) ─────────────────────────────────────────── */
.ac-summary { font-size: 12px; color: var(--text2); margin: 0 0 8px; }
.ac-summary .ac-suggested-count { color: var(--tone-good-fg); font-weight: var(--fw-semibold, 600); }
.ac-summary .ac-skip-count { color: var(--tone-poor-fg); font-weight: var(--fw-semibold, 600); }
.ac-summary .ac-review-count { color: var(--tone-warn-text); font-weight: var(--fw-semibold, 600); }

.ac-empty, .ac-error {
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm, 6px);
  color: var(--text2);
  font-size: 12px;
  background: var(--card2, var(--bg2));
}

.ac-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.ac-preview-table th,
.ac-preview-table td {
  padding: 5px 7px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.ac-preview-table th {
  font-size: 10.5px;
  font-weight: var(--fw-semibold, 600);
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ac-select-cell { width: 24px; }
.ac-tx {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ac-suggestion { color: var(--text); font-weight: var(--fw-semibold, 600); }
.ac-confidence {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.ac-flag {
  display: inline-block;
  font-size: 10px;
  font-weight: var(--fw-semibold, 600);
  padding: 1px 5px;
  border-radius: var(--radius-sm, 6px);
  margin-right: 3px;
}
.ac-ok { color: var(--tone-good-fg); }
.ac-flag-skip { color: var(--tone-poor-fg); background: var(--tone-poor-bg); }
.ac-flag-review { color: var(--tone-warn-text); background: var(--tone-warn-bg); }

/* ─── Pager ───────────────────────────────────────────────────────────────── */
.ac-pager {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

/* ─── Bulk-Apply-Aktionsleiste (PR3) ────────────────────────────────────────
   "Als Regel merken"-Checkbox + "Ausgewählte anwenden"-Button + Ergebnis-
   Statusbereich (Erfolg/Fehler/Rollback-Button nach einem Apply-Aufruf). */
.ac-apply-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.ac-learn-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text2);
  cursor: pointer;
}

.ac-apply-status { width: 100%; }
.ac-apply-status p { margin: 6px 0 0; }

/* Persistenter Rollback-Anker (PR3): lebt außerhalb von #ac-result-host,
   damit ein Tabellen-Reload nach Apply den Rollback-Button nicht mit
   wegräumt (agy-review-Fund 2026-07-10). */
.ac-rollback-host:empty { display: none; }
.ac-rollback-host p { margin: 0 0 6px; }

.ac-apply-success {
  font-size: 12px;
  color: var(--tone-good-fg);
  font-weight: var(--fw-semibold, 600);
}

.ac-rollback-btn { margin-left: 8px; }

/* Cockpit Phase 1 Base (Z. 2180-2758 von _20-dashboard.css).
   Grid + Treiber-Insight + Header + Mode-Toggle + KPI-Reihe + Cashflow-
   Chart + Pflichten-Card + Steuergesundheit-Card + Empfehlungen-Card.
   Recent-Bookings + Empty-States + YC-Compare-Strip + Status-Zeile leben in _45b.
   PR-S1.4-Codex-[P1]-Lehre: lädt VOR _20-dashboard.css damit Source-Order-
   Cascade erhalten bleibt (Monatsansicht-Reste verbleiben in _20).

   Plan-Doc: docs/architecture/2026-05-16-dashboard-css-split-plan.md
   Extrahiert in PR-S1.6b' (Re-Spawn nach gecloster #2567 wegen Content-Drift). */

/* ╔════════════════════════════════════════════════════════════════════╗
   ║ COCKPIT (Phase 1 — Finanzcockpit-Entschlackung, 2026-05)          ║
   ║ Plan: ~/.claude/plans/ja-beide-mockups-valiant-dongarra.md         ║
   ║ Markdown-Archiv: docs/architecture/dashboard-archive-2026-05.md    ║
   ║                                                                    ║
   ║ Sechs Cockpit-Blöcke in einem Grid-Layout:                         ║
   ║   .cockpit-grid                                                    ║
   ║     ├─ .cockpit-header-row    (titles + mode-toggle)               ║
   ║     ├─ .cockpit-kpi-wrap      (4 KPI-Karten)                       ║
   ║     ├─ .cockpit-main          (Cashflow-Chart-Container)           ║
   ║     ├─ .cockpit-side          (Pflichten + Steuergesundheit)       ║
   ║     ├─ .cockpit-bookings-wrap (Aktuelle Buchungen)                 ║
   ║     └─ .cockpit-status-wrap   (Status-Zeile)                       ║
   ╚════════════════════════════════════════════════════════════════════╝ */

.cockpit-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas:
    "header   header"
    "kpis     kpis"
    "driver   driver"
    "main     side"
    "bookings bookings"
    "yc       yc"
    "status   status";
  gap: 16px;
  /* Phase 2.7 (2026-05-08): main + side sollen in der "main side"-Row gleiche
     Höhe haben → Action-Rail nimmt Hero-Höhe an. Vorher align-items:start
     ließ Rail kurz hängen, wenn Pflichten/Sg/Belege/Empfehlungen kompakt waren
     (z.B. Vorjahres-Cockpit, Empty-State). Mit stretch füllt das letzte Rail-
     Section flex-grow:1 die Rest-Höhe. */
  align-items: stretch;
}

.cockpit-header-row { grid-area: header; }
.cockpit-kpi-wrap { grid-area: kpis; }
.cockpit-driver-wrap { grid-area: driver; }
.cockpit-main { grid-area: main; }
.cockpit-side { grid-area: side; display: flex; flex-direction: column; gap: 16px; }
.cockpit-bookings-wrap { grid-area: bookings; }
.cockpit-yc-wrap { grid-area: yc; }
.cockpit-status-wrap { grid-area: status; }

@media (max-width: 1023px) {
  /* PR 3 Fix (2026-05-07, User-Smoke nach erstem PR3-Build):
     Mobile-Reihenfolge folgt jetzt dem B3.2-Mobile-Mockup:
       Header → Hero → Action-Rail (Pflichten/Sg/Belegstatus/Empfehlungen) →
       Bookings → YC → Status.
     Vorherige Reihenfolge ("side" vor "main") fühlte sich mobil wie eine
     Aufgabenliste an, nicht wie Finanzcockpit. User-Lock 2026-05-07:
     "Hero muss mobil vor Action-/Empfehlungs-Cards kommen." */
  .cockpit-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "header"
      "kpis"
      "driver"
      "main"
      "side"
      "bookings"
      "yc"
      "status";
  }
}

/* Phase 2 / PR 6a (2026-05-06): Mobile-Padding-Hotfix für Cockpit.
   Shell v2 setzt für `.shell-main[data-width="default"]` auf ≤768px
   `padding-left/right: 0` (bewusste Decision für Content-Edge-to-Edge).
   Cockpit-Karten kleben dann am Rand — Header-Kicker + H1 ohne Atemraum
   (Live-Smoke-Befund 2026-05-06). Wir geben dem `.cockpit-grid` selbst
   12px horizontalen Padding auf Mobile. */
@media (max-width: 768px) {
  .cockpit-grid {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ── Treiber-Insight-Box (Phase 2 / PR 3) ──────────────────────────
   Eine heuristische Aussage: „Mai liegt 47 % über dem Schnitt der
   Vormonate." Erscheint nur bei ≥3 aktiven Monaten + |Δ|≥10 % +
   avg(Vormonate)>0. Tone-abhängige Akzent-Border (up=grün, down=rot). */
.cockpit-driver-insight {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text3);
  border-radius: var(--radius);
  padding: 14px 18px;
}
.cockpit-driver-insight--up { border-left-color: var(--green); }
.cockpit-driver-insight--down { border-left-color: var(--red); }
.cockpit-driver-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg3);
  flex-shrink: 0;
  color: var(--text2);
}
.cockpit-driver-insight--up .cockpit-driver-icon { color: var(--green); background: rgba(52, 211, 153, 0.10); }
.cockpit-driver-insight--down .cockpit-driver-icon { color: var(--red); background: rgba(248, 113, 113, 0.10); }
.cockpit-driver-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cockpit-driver-headline {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.cockpit-driver-sub {
  font-size: 11.5px;
  color: var(--text2);
}

/* ── Cockpit-Header ─────────────────────────────────────────────── */
.cockpit-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
  padding: 2px 0 6px;
}
.cockpit-header-titles { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cockpit-kicker {
  font-size: 10.5px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.cockpit-title {
  font-size: 30px;
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.cockpit-header-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cockpit-header-controls .mode-toggle-sublabel {
  flex-basis: 100%;
  text-align: right;
  margin-top: -2px;
}

/* Phase 2 / PR 5 (2026-05-06): Year-Picker im Cockpit-Header.
   Restoration nach Shell-v2-Migration — der alte `#yr-lbl` lebt in
   einer von Shell v2 versteckten alten Topbar. Triggert den globalen
   `openYearPicker`-Handler aus bulk-actions.js (registriert in settings.js). */
.cockpit-yearpicker {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* PR 6b Korrektur 2 (2026-05-06): höhe an Mode-Toggle-Container angleichen.
     Mode-Toggle hat 3px container-padding + 6px*2 tab-padding = 18+ font-line
     ≈ 36px Höhe. Year-Picker bekommt das gleiche min-height per Flex. */
  min-height: 36px;
  padding: 0 14px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.cockpit-yearpicker:hover {
  background: var(--card);
  border-color: var(--accent);
}
.cockpit-yearpicker:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.cockpit-yearpicker-label { font-variant-numeric: tabular-nums; }
.cockpit-yearpicker-caret { color: var(--text2); flex-shrink: 0; }

/* ── Mode-Toggle (Monat/Quartal/Jahr) ─────────────────────────── */
.mode-toggle {
  display: inline-flex;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  padding: 3px;
  gap: 2px;
}
.mode-toggle-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.mode-toggle-tab:hover { color: var(--text); }
.mode-toggle-tab--active {
  background: var(--accent);
  color:var(--accent-ink);
}
.mode-toggle-tab--active:hover { color:var(--accent-ink); }
.mode-toggle-sublabel {
  font-size: 11px;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
}

/* Mobile-Header-Block (Year-Pill / Mode-Tabs / Datenstand) wurde nach
   den B3.2-Base-Rules verschoben, damit der CSS-Cascade greift — siehe
   den entsprechenden 767px-Block weiter unten (anchor-comment
   „Header / Year-Pill / Mode-Tabs kompakter — Codex-P2-Fix #2"). */

/* ── KPI-Reihe ────────────────────────────────────────────────── */
.cockpit-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1023px) {
  .cockpit-kpi-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .cockpit-kpi-row { grid-template-columns: 1fr; }
}
.cockpit-kpi {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  transition: border-color 120ms ease, transform 120ms ease;
}
.cockpit-kpi:hover { border-color: var(--border-strong, var(--border)); }
.cockpit-kpi .kpi-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text2);
}
.cockpit-kpi .kpi-val {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: var(--fw-bold);
  line-height: 1.15;
  color: var(--text);
  margin-top: 4px;
  overflow-wrap: anywhere;
}
.cockpit-kpi .kpi-val.vp { color: var(--green); }
.cockpit-kpi .kpi-val.vn { color: var(--red); }
/* Sub-Label-Slot mit reservierter min-height (CLS-Schutz) */
.cockpit-kpi .kpi-sub {
  display: block;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  min-height: 16px;
}
.kpi-sub--up { color: var(--green); }
.kpi-sub--down { color: var(--red); }
.kpi-sub--neutral { color: var(--text2); }
.kpi-sub--empty { visibility: hidden; }

/* ── Cashflow-Chart-Container ─────────────────────────────────── */
.cockpit-cashflow {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  min-height: 320px;
}

/* ── Pflichten-Karte ──────────────────────────────────────────── */
.cockpit-pflichten { padding: 18px 20px; }
.cockpit-pflicht-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.cockpit-pflicht-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  cursor: pointer;
  text-align: left;
  width: 100%;
  color: var(--text);
  transition: background 120ms ease, border-color 120ms ease;
}
.cockpit-pflicht-item:hover { background: var(--card); }
.cockpit-pflicht-icon { display: inline-flex; align-items: center; flex-shrink: 0; color: var(--text2); }
.cockpit-pflicht-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cockpit-pflicht-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cockpit-pflicht-meta { font-size: 11.5px; color: var(--text2); }

.cockpit-pflicht-pill--green { border-color: rgba(52, 211, 153, 0.35); }
.cockpit-pflicht-pill--green .cockpit-pflicht-icon { color: var(--green); }
.cockpit-pflicht-pill--yellow { border-color: rgba(232, 184, 75, 0.4); }
.cockpit-pflicht-pill--yellow .cockpit-pflicht-icon { color: var(--accent); }
.cockpit-pflicht-pill--red { border-color: rgba(248, 113, 113, 0.4); }
.cockpit-pflicht-pill--red .cockpit-pflicht-icon { color: var(--red); }
.cockpit-pflicht-pill--blue { border-color: rgba(96, 165, 250, 0.4); }
.cockpit-pflicht-pill--blue .cockpit-pflicht-icon { color: var(--blue); }

/* ── Steuergesundheit-Karte ───────────────────────────────────── */
.cockpit-steuergesundheit { padding: 18px 20px; }
.cockpit-sg-body {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}
.cockpit-sg-ring {
  --score: 0;
  --ring-color: var(--text2);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: conic-gradient(var(--ring-color) calc(var(--score) * 1%), rgba(var(--surface-rgba-base),0.08) 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.cockpit-sg-ring::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--card);
}
.cockpit-sg-ring--green { --ring-color: var(--green); }
.cockpit-sg-ring--yellow { --ring-color: var(--accent); }
.cockpit-sg-ring--red { --ring-color: var(--red); }
.cockpit-sg-ring--neutral { --ring-color: var(--text3); }
.cockpit-sg-ring-value {
  position: relative;
  font-family: var(--mono);
  font-size: 20px;
  font-weight: var(--fw-bold);
  color: var(--text);
  line-height: 1;
}
.cockpit-sg-ring-max {
  position: relative;
  font-size: 9.5px;
  color: var(--text2);
  margin-top: 1px;
}
.cockpit-sg-state {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* Phase 2 / PR 3: Steuergesundheit-Headline mit Status-Pill ─────────── */
.cockpit-sg-headline {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.cockpit-sg-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.cockpit-sg-status-pill::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentcolor;
  flex-shrink: 0;
}
.cockpit-sg-status-pill--green {
  background: rgba(52, 211, 153, 0.13);
  color: var(--green);
}
.cockpit-sg-status-pill--yellow {
  background: rgba(232, 184, 75, 0.16);
  color: var(--accent);
}
.cockpit-sg-status-pill--red {
  background: rgba(248, 113, 113, 0.14);
  color: var(--red);
}
.cockpit-sg-status-pill--neutral {
  background: var(--bg3);
  color: var(--text2);
}

/* Phase 2 / PR 3: Steuergesundheit-Reasons-Liste ─────────────────────── */
.cockpit-sg-reasons {
  list-style: none;
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cockpit-sg-reason {
  display: grid;
  grid-template-columns: 16px auto 1fr;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}
.cockpit-sg-reason-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text3);
}
.cockpit-sg-reason-label {
  font-weight: 600;
  color: var(--text);
}
.cockpit-sg-reason-value {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text2);
  text-align: right;
}
.cockpit-sg-reason--good .cockpit-sg-reason-icon { color: var(--green); }
.cockpit-sg-reason--warn .cockpit-sg-reason-icon { color: var(--accent); }
.cockpit-sg-reason--bad .cockpit-sg-reason-icon { color: var(--red); }
.cockpit-sg-reason--bad .cockpit-sg-reason-value { color: var(--red); }
.cockpit-sg-reason--warn .cockpit-sg-reason-value { color: var(--accent); }

/* Legacy compat: cockpit-sg-subs Klassen weiterhin definiert für ältere
   Render-Pfade (aktuell nicht mehr genutzt, aber falls jemand das Render
   per Config zurückwechselt). Behalten für 1 Cycle. */
.cockpit-sg-subs {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.cockpit-sg-sub { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.cockpit-sg-sub-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text2);
}
.cockpit-sg-sub-value {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

/* ── Empfehlungen-Karte (Phase 2 / PR 3) ─────────────────────────────
   Heuristische Empfehlungen, max. 3, Tone-Sortiert (bad > warn > neutral
   > good). Datenquellen: yr.ms[] für unvollständige Monate, _belegeCache
   für offene Belege, _sgNextDuty für USt-Frist. KEINE Folgenschätzung. */
.cockpit-empfehlungen { padding: 16px 18px; }
.cockpit-empfehlung-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.cockpit-empfehlung-item {
  appearance: none;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text3);
  border-radius: var(--radius2);
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: left;
  color: var(--text);
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.cockpit-empfehlung-item:hover {
  background: var(--card);
  transform: translateX(1px);
}
.cockpit-empfehlung-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.cockpit-empfehlung--good { border-left-color: var(--green); }
.cockpit-empfehlung--good .cockpit-empfehlung-icon { color: var(--green); }
.cockpit-empfehlung--warn { border-left-color: var(--accent); }
.cockpit-empfehlung--warn .cockpit-empfehlung-icon { color: var(--accent); }
.cockpit-empfehlung--bad { border-left-color: var(--red); }
.cockpit-empfehlung--bad .cockpit-empfehlung-icon { color: var(--red); }
.cockpit-empfehlung--neutral { border-left-color: var(--text3); }
.cockpit-empfehlung--neutral .cockpit-empfehlung-icon { color: var(--text2); }

.cockpit-empfehlung-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--card);
  flex-shrink: 0;
  color: var(--text2);
}
.cockpit-empfehlung-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cockpit-empfehlung-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.cockpit-empfehlung-meta {
  font-size: 11.5px;
  color: var(--text2);
  line-height: 1.35;
}
.cockpit-empfehlung-cta {
  font-size: 14px;
  color: var(--text3);
  font-weight: 600;
  flex-shrink: 0;
}

/* Cockpit Phase 1 Rest (Z. 2759-3087 von _20-dashboard.css).
   Recent-Bookings-Tabelle + Empty-States + Card-Footer-Link + Vorjahres-
   Vergleichs-Strip (Phase 2/PR2) + Status-Zeile + Mobile-Header-Polish.
   Lädt direkt nach _45a-cockpit-base.css (Source-Order strict).

   Plan-Doc: docs/architecture/2026-05-16-dashboard-css-split-plan.md
   Extrahiert in PR-S1.6b' (Re-Spawn nach gecloster #2567 wegen Content-Drift). */

/* ── Recent-Bookings-Tabelle ──────────────────────────────────── */
.cockpit-bookings { padding: 16px 18px; }
.cockpit-bookings-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
  font-size: 13px;
}
.cockpit-bookings-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-sans);
}
/* Reset: globaler `td`-Selector setzt mono+right+font-size:12.5 — für die
   Cockpit-Bookings-Tabelle wollen wir Sans-Default, links-bündig, dezent
   größer. Mono nur explizit auf Datum + Betrag (numerisch). */
.cockpit-bookings-row td {
  padding: 8px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  transition: background 120ms ease;
  font-family: var(--font-sans);
  text-align: left;
  font-size: 13px;
  color: var(--text);
}
.cockpit-bookings-row:last-child td { border-bottom: 0; }
.cockpit-bookings-row:hover td { background: var(--bg3); }

/* Phase 2 / PR 5 (2026-05-06): Recent-Bookings-Zeile klickbar.
   `data-row-action="openTxM"` öffnet das Buchungs-Edit-Modal beim Klick
   auf die Zeile (außer auf Buttons darin — siehe core.js:1407). */
.cockpit-bookings-row--clickable { cursor: pointer; }
.cockpit-bookings-row--clickable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.cockpit-bookings-row--clickable:hover td { background: var(--card); }
.cockpit-bookings-row td.cockpit-bookings-date {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text2);
  white-space: nowrap;
  width: 60px;
}
.cockpit-bookings-text {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--text);
  text-align: left;
}
.cockpit-bookings-cat {
  font-family: var(--font-sans);
  color: var(--text2);
  font-size: 11.5px;
  text-align: left;
}
.cockpit-bookings-row td.cockpit-bookings-amt {
  font-family: var(--mono);
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.cockpit-bookings-row td.cockpit-bookings-status {
  width: 92px;
  text-align: right;
  font-family: var(--font-sans);
}

.cockpit-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 6px;
  border-radius: var(--radius-pill);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.cockpit-status-pill::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentcolor;
  flex-shrink: 0;
}
.cockpit-status-pill--verbucht {
  background: rgba(52, 211, 153, 0.12);
  color: var(--green);
}
.cockpit-status-pill--offen {
  background: rgba(232, 184, 75, 0.14);
  color: var(--accent);
}

/* ── Empty-States ────────────────────────────────────────────── */
.cockpit-empty {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 20px;
  font-size: 13px;
  color: var(--text2);
}
.cockpit-empty--cta {
  flex-direction: column;
  text-align: center;
  gap: 12px;
  padding: 32px 20px;
}
/* Phase 2 / PR 3: Pflichten-Empty-State mit Icon + zweizeiligem Text. */
.cockpit-empty--positive {
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  margin-top: 8px;
  background: rgba(52, 211, 153, 0.06);
  border: 1px solid rgba(52, 211, 153, 0.18);
  border-radius: var(--radius2);
}
.cockpit-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--green);
}
.cockpit-empty-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cockpit-empty-title { font-size: 13px; font-weight: 600; color: var(--text); }
.cockpit-empty-meta { font-size: 11.5px; color: var(--text2); line-height: 1.4; }

/* ── Card-Footer Link ─────────────────────────────────────────── */
.cockpit-card-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  text-align: right;
}
.cockpit-card-link {
  appearance: none;
  background: transparent;
  border: 0;
  font-size: 12.5px;
  color: var(--accent);
  cursor: pointer;
  font-weight: 600;
}
.cockpit-card-link:hover { text-decoration: underline; }

/* ── Vorjahres-Vergleichs-Strip (Phase 2 / PR 2) ────────────────────────
   Kompakter 3-Werte-Strip ganz unten, nur sichtbar wenn calcYearCompareStrip
   `available: true` zurückgibt (≥3 Vorjahresmonate, kein Mirror, kein
   Reference-Bug). Period-matched Summen — bei „Mai 2026 vs Mai 2025" wird
   tatsächlich nur Mai von 2025 herangezogen. Ersatz für die alte
   _genYearCompareV3-Vollkarte (siehe Archive-Doku).                       */
.cockpit-yc-strip {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cockpit-yc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cockpit-yc-kicker {
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.cockpit-yc-period {
  font-size: 11.5px;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
}
.cockpit-yc-cells {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cockpit-yc-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.cockpit-yc-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cockpit-yc-vals {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
}
.cockpit-yc-curr {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--text);
}
.cockpit-yc-vs {
  font-size: 10.5px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cockpit-yc-prev {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text2);
}
.cockpit-yc-delta {
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cockpit-yc-delta--up { color: var(--green); }
.cockpit-yc-delta--down { color: var(--red); }
.cockpit-yc-delta--neutral { color: var(--text2); }
.cockpit-yc-delta--empty { color: var(--text3); font-weight: 400; }

@media (max-width: 768px) {
  .cockpit-yc-cells { grid-template-columns: 1fr; gap: 10px; }
}

/* ── Status-Zeile ─────────────────────────────────────────────── */
.cockpit-status-row {
  font-size: 11px;
  color: var(--text2);
  text-align: center;
  padding: 8px 0 4px;
  font-variant-numeric: tabular-nums;
}

/* Phase 2 / PR 6b (2026-05-06): Mobile-Header-Polish + Year-Picker-Größe.
   Korrektur 2: User-Feedback: Year-Picker wirkte zu klein im Vergleich zu
   den Mode-Toggle-Pills daneben — Pill hatte gefüllten BG + Container-
   Padding (32px Höhe), Year-Picker nur Border (28px Höhe). Lösung: beide
   Elemente bekommen exakt dieselbe Höhe via `min-height` und Flex-Centering,
   damit sie visuell zusammen baseline sind. Mode-Toggle bleibt unverändert,
   Year-Picker wird angeglichen.                                              */
@media (max-width: 768px) {
  .cockpit-title { font-size: 24px; }
  .cockpit-kicker { font-size: 9.5px; }
  .cockpit-header { padding: 0; gap: var(--space-md); }
  .cockpit-header-controls { gap: 8px; align-items: stretch; }
  /* Year-Picker: gleiche Höhe wie Mode-Toggle (32px) durch min-height +
     gleiches inneres Padding wie ein Tab. Font 12px wie Tabs. */
  .cockpit-yearpicker {
    min-height: 32px;
    padding: 0 12px;
    font-size: 12px;
    gap: 6px;
    align-items: center;
  }
  .cockpit-yearpicker-caret { width: 10px; height: 10px; }
  .mode-toggle { padding: 2px; min-height: 32px; align-items: center; }
  .mode-toggle-tab { padding: 5px 10px; font-size: 12px; }
  .mode-toggle-sublabel { font-size: 10.5px; }
}

@media (max-width: 480px) {
  .cockpit-header { flex-direction: column; align-items: stretch; }
  /* Mobile-Polish 2026-05-09 — Year-Picker und Mode-Toggle in EINER Row.
     Vorher: `.mode-toggle { flex: 1 1 100% }` zwang Mode-Toggle in eigene Row,
     Year-Picker stand allein darüber → 2 vertikale Rows nur für Filter.
     User-Befund: Filter verbrauchen zu viel vertikalen Header-Platz auf
     iPhone-Breite. Lösung: Mode-Toggle teilt sich die Row mit dem Year-
     Picker (`flex: 1 1 auto`) und die Sub-Labels (Mai 2026/Q2 2026/2026)
     entfallen — die exakte Periode steht schon im Subtitle „Stand Mai 2026".
   */
  .cockpit-header-controls {
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    /* Header-Row 2026-05-09 (Refinement): gap 8 → 12px für mehr visuellen
       Atemraum zwischen Year-Picker-Pill und Mode-Toggle-Pill (zusammen
       mit dem reduzierten Year-Picker-Padding wirken die zwei Pills
       jetzt klar als separate Filter-Bereiche). */
    gap: 12px;
  }
  /* Year-Picker bleibt content-sized links */
  .cockpit-header-controls .cockpit-year-control { flex: 0 0 auto; }
  /* Mode-Toggle füllt den restlichen Platz */
  .cockpit-header-controls .mode-toggle {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }
  .cockpit-header-controls .mode-toggle-tab {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
  }
  /* Sub-Labels entfernen — Subtitle "Stand Mai 2026" trägt die Info schon. */
  .cockpit-header-controls .mode-toggle-tab-sublabel { display: none; }
  .cockpit-header-controls .mode-toggle-sublabel { display: none; }
  .cockpit-yearpicker { flex: 0 0 auto; }
  .cockpit-bookings-cat { display: none; }
  .cockpit-bookings-table th.cockpit-bookings-cat { display: none; }
}

/* Cockpit Hero v3 PR2 (Z. 3088-3698 von _20-dashboard.css).
   B3.2-Refactor: Subtitle + Datenstands-Hinweis + Year-Control 3-Teil +
   Mode-Toggle entzerrt + Hero-Card mit Trend-Pill + Mini-KPIs + Empty-State.
   Mobile-Polish 2026-05-08 Block muss NACH B3.2-Base liegen (Codex-P2-Fix #2).

   Plan-Doc: docs/architecture/2026-05-16-dashboard-css-split-plan.md
   Extrahiert in PR-S1.6b' (Re-Spawn nach gecloster #2567 wegen Content-Drift). */

/* ╔════════════════════════════════════════════════════════════════════╗
   ║ Cockpit Hero v3 — PR 2 (2026-05-07)                                 ║
   ║                                                                     ║
   ║ Header-Refactor + Hero-Card + Mode-Toggle entzerrt + Year-Control   ║
   ║ 3-Teil + Datenstands-Hinweis + Empty-State.                         ║
   ║                                                                     ║
   ║ Bestehende Klassen (.cockpit-header, .cockpit-yearpicker,           ║
   ║ .mode-toggle, .cockpit-grid) BLEIBEN — neue B3.2-Klassen kommen     ║
   ║ parallel (D4 Pattern). Cleanup alter Klassen nach Validierung      ║
   ║ in PR 5.                                                            ║
   ╚════════════════════════════════════════════════════════════════════╝ */

/* ── Cockpit-Sub-Headline (B3.2) ──────────────────────────────────── */
.cockpit-subtitle {
  font-size: 13px;
  color: var(--text2);
  margin-top: 4px;
  line-height: 1.4;
}

/* ── Datenstands-Hinweis (B3.2 — KEIN Realtime-Sync, nur Datenstand) ── */
.cockpit-datenstand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text2);
  font-size: 12px;
  margin-top: 6px;
}
.cockpit-datenstand-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(52,211,153,.18);
  flex-shrink: 0;
}
.cockpit-datenstand-dot--warn { background: var(--accent); box-shadow: 0 0 0 3px rgba(232,184,75,.18); }
.cockpit-datenstand-dot--offline { background: var(--text3); box-shadow: 0 0 0 3px rgba(140,147,168,.18); }
.cockpit-datenstand-meta { color: var(--text3); }

/* ── Year-Control 3-Teil (B3.2 — D1: ohne sichtbares "GJ") ────────── */
.cockpit-year-control {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 40px;
}
.cockpit-year-control button {
  appearance: none;
  background: transparent;
  color: var(--text2);
  border: 0;
  padding: 0 12px;
  cursor: pointer;
  font: 700 14px var(--font-sans);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--tr-fast), color var(--tr-fast);
}
.cockpit-year-control button:hover {
  background: rgba(var(--surface-rgba-base),.04);
  color: var(--text);
}
body.light .cockpit-year-control button:hover { background: rgba(15,23,42,.04); }
.cockpit-year-control button:disabled { opacity: .35; cursor: not-allowed; }
.cockpit-year-control button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  z-index: 1;
}
.cockpit-year-control-current {
  padding: 0 16px;
  color: var(--text);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  min-width: 64px;
  font-variant-numeric: tabular-nums;
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ Mobile-Polish 2026-05-08 — Year-Control + Datenstand-Mobile         ║
   ║ ──────────────────────────────────────────────────────────────────── ║
   ║ User-Befund auf iPhone-Breite: B3.2 `.cockpit-year-control`-Buttons ║
   ║ verbrauchen zu viel Platz (Default-Höhe 40px, Font `700 14px`).     ║
   ║ Datenstand-Hinweis klebt an Filter-Row.                             ║
   ║                                                                      ║
   ║ Codex-P2-Fix #2 (Iter 2/5 2026-05-08): Block sitzt NACH den B3.2-   ║
   ║ Base-Rules für `.cockpit-year-control(-current/-arrow)` und         ║
   ║ `.cockpit-year-control button`, weil bei gleicher Specifity die     ║
   ║ später definierte Regel gewinnt.                                    ║
   ║                                                                      ║
   ║ Codex-P2-Fix #3 (Iter 3/5 2026-05-08): Block trimmen auf NUR die    ║
   ║ unique-Overrides für die NEUE `.cockpit-year-control` (PR6b @768px  ║
   ║ deckt schon Header / cockpit-yearpicker(legacy) / mode-toggle ab).  ║
   ║ Vorher überrideten meine Rules wie `.cockpit-title { font-size:20px}║
   ║ die existing PR6b-Rules @768px (19px) UND die 480px-Rules (17px) — ║
   ║ Regression auf schmalen Phones (Title 17px → 20px).                ║
   ║                                                                      ║
   ║ Reine Add-ons (keine Conflicts mit existing Mobile-Header-Rules):   ║
   ║   • `.cockpit-year-control button` — neue B3.2-3-Button-Pill        ║
   ║     (vorher: nur `.cockpit-yearpicker` legacy)                     ║
   ║   • `.cockpit-datenstand { margin-top: 4px }` — kein existing Rule  ║
   ║   • `.cockpit-subtitle { font-size: 13px }` — kein existing Rule    ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
@media (max-width: 767px) {
  .cockpit-subtitle { font-size: 13px; }
  /* Year-Picker kompakter — neue B3.2-3-Button-Pill (`.cockpit-year-control`
     mit `<button>`-Children: prev-arrow / current / next-arrow). Container +
     Buttons gleichzeitig sizen. */
  .cockpit-year-control {
    /* Container-height aufheben (Default 40px) — Buttons bestimmen
       jetzt die Höhe via min-height. */
    height: auto;
  }
  .cockpit-year-control button {
    /* Bumpt sowohl die `<button>`-Defaults (font: 700 14px ...) als auch
       die spezifischeren `.cockpit-year-control-current`/`-arrow`-Rules
       darunter — auf Mobile sollen ALLE Year-Buttons gleich kompakt sein.
       Header-Row 2026-05-09: padding 0 10px → 0 6px (Arrows) + Current
       0 12px → 0 8px für mehr Atemraum zwischen Year-Picker-Pill und
       Mode-Tab-Pill rechts daneben (vorher klebten die Pills zu eng). */
    min-height: 32px;
    padding: 0 6px;
    font: 600 13px var(--font-sans);
  }
  .cockpit-year-control-current {
    /* Padding-Override gegen Base `.cockpit-year-control-current { padding: 0 16px }`. */
    padding: 0 8px;
    min-width: 48px;
  }
  /* Datenstands-Hinweis: sauberer Abstand zur Filter-Row */
  .cockpit-datenstand { margin-top: 4px; }
}

/* ── Mode-Toggle entzerrt — D1: Sub-Label PRO TAB ─────────────────── */
.mode-toggle-tab-sublabel {
  display: block;
  font-size: 10px;
  font-weight: var(--fw-bold);
  margin-top: 1px;
  opacity: .7;
}
.cockpit-header-controls .mode-toggle .mode-toggle-tab {
  /* Min-width verhindert Quetschen — D1 lock */
  min-width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}

/* ── Hero-Card (B3.2 — Hauptzahl + Trend + Insight + Chart + Mini-KPIs) ── */
.cockpit-hero {
  background: var(--cockpit-hero-bg);
  border: 1px solid var(--border2);
  border-radius: var(--radius-xl);
  padding: 22px 24px 18px;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 14px;
  min-height: 520px;
  position: relative;
  overflow: hidden;
}
body.light .cockpit-hero {
  border-color: rgba(181,141,44,.22);
  box-shadow: 0 1px 0 rgba(var(--surface-solid-rgba-base),.6) inset, 0 4px 24px rgba(15,23,42,.06);
}
.cockpit-hero::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 50%;
  height: 80%;
  background: var(--cockpit-hero-glow);
  pointer-events: none;
}
@media (prefers-contrast: more) {
  .cockpit-hero::before { display: none; }
}

/* Mobile-Polish 2026-05-08 — User-Befund: der absolut-positionierte Glow
   (`::before` mit width:50% height:80% inset:-40% -10% auto auto) wirkt
   auf Mobile-Breite wie ein abgeschnittener quadratischer Kasten in der
   rechten oberen Ecke der Hero-Card. Auf schmalen Viewports decken die
   50% Container-Breite + die negative inset-Werte einen großen Teil der
   Card ab und schauen wie ein UI-Defekt aus. Lösung: Glow auf Mobile
   ausblenden — die Hero-Card behält ihre Tone-Variable (--cockpit-hero-bg),
   wirkt aber sauber rechteckig statt mit fragmentiertem Overlay. */
@media (max-width: 767px) {
  .cockpit-hero::before { display: none; }
}
.cockpit-hero > * { position: relative; z-index: 1; }

.cockpit-hero-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text3);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  flex-wrap: wrap;
  gap: 8px;
}
.cockpit-hero-meta-right {
  color: var(--text2);
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
}

.cockpit-hero-main {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.cockpit-hero-value {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1;
  font-size: clamp(46px, 6.4vw, 72px);
  font-weight: var(--fw-heavy);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--text);
}
.cockpit-hero-value-cur {
  color: var(--text3);
  font-weight: var(--fw-semibold);
  margin-left: 6px;
  font-size: .55em;
}

.cockpit-hero-trend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--green2);
  color: var(--green);
  border: 1px solid var(--green3);
  border-radius: var(--radius-pill);
  padding: 5px 11px;
  font-weight: var(--fw-bold);
  font-size: 13px;
}
.cockpit-hero-trend--down {
  background: var(--red2);
  color: var(--red);
  border-color: var(--red3);
}
.cockpit-hero-trend--empty {
  background: var(--bg3);
  color: var(--text3);
  border-color: var(--border);
  font-weight: var(--fw-medium);
}
.cockpit-hero-trend-period { opacity: .85; font-weight: var(--fw-medium); }

/* Phase 2.5 (2026-05-08) — Trend-Pill im Hero-Header (Mockup-aligned).
   `_genCockpitHero` rendert den renderPeriodDelta()-Output in einem
   `.cockpit-hero-trend-wrap`-DIV (filled state). Die innere `.kpi-sub`
   wird zur Pill mit Tone-Tint + visueller Trennung zwischen Prozent
   (fett, full-color) und Periode (heller, nicht fett). Empty-State
   (`.cockpit-hero-trend--empty`) bleibt von der bestehenden Klasse oben. */
.cockpit-hero-trend-wrap {
  display: inline-flex; align-items: center;
}
.cockpit-hero-trend-wrap > .kpi-sub {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}
/* Phase 2.5 Codex-P2-Fix (2026-05-08): Pill-Tints nutzen Tokens.
   --green-soft/--red-soft (Repo-Surface-Tokens) decken Mockup-Look nahe genug;
   Border via --green3/--red3 (rgba(...,.25), Repo-Tokens). Konform zur
   CSS-Debt-Freeze-Regel — keine neuen hardcodeten rgba(...). */
.cockpit-hero-trend-wrap > .kpi-sub--up {
  background: var(--green-soft);
  color: var(--green);
  border-color: var(--green3);
}
.cockpit-hero-trend-wrap > .kpi-sub--down {
  background: var(--red-soft);
  color: var(--red);
  border-color: var(--red3);
}
.cockpit-hero-trend-wrap > .kpi-sub--neutral {
  background: var(--card2);
  color: var(--text2);
  border-color: var(--border2);
}
.cockpit-hero-trend-wrap > .kpi-sub > .kpi-sub-pct {
  font-weight: 800;
  letter-spacing: -.005em;
}
.cockpit-hero-trend-wrap > .kpi-sub > .kpi-sub-period {
  color: var(--text2);
  font-weight: 500;
  opacity: .9;
}
.cockpit-hero-trend-wrap > .kpi-sub--up > .kpi-sub-period,
.cockpit-hero-trend-wrap > .kpi-sub--down > .kpi-sub-period,
.cockpit-hero-trend-wrap > .kpi-sub--neutral > .kpi-sub-period {
  /* Periodentext nimmt die Hintergrund-Tone nicht an — bewusst „heller normaler Text" */
  color: inherit; opacity: .75; font-weight: 500;
}

.cockpit-hero-insight {
  color: var(--text2);
  font-size: 13px;
  line-height: 1.45;
}
.cockpit-hero-insight b { color: var(--text); font-weight: var(--fw-semibold); }
.cockpit-hero-insight-meta { color: var(--text3); }

.cockpit-hero-chart {
  position: relative;
  min-height: 200px;
}
.cockpit-hero-chart canvas { width: 100% !important; height: 100% !important; }

.cockpit-hero-chart-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  color: var(--text3);
  font-size: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.cockpit-hero-chart-legend-items {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.cockpit-hero-chart-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.cockpit-hero-chart-legend-swatch {
  display: inline-block;
  width: 14px; height: 3px;
  border-radius: 2px;
}
.cockpit-hero-chart-legend-swatch--gewinn { background: var(--chart-line-gewinn); }
.cockpit-hero-chart-legend-swatch--einnahmen { background: var(--chart-line-einnahmen); opacity: .55; }
.cockpit-hero-chart-legend-swatch--ausgaben { background: var(--chart-line-ausgaben); opacity: .55; }
.cockpit-hero-chart-legend-swatch--future {
  background: repeating-linear-gradient(90deg, var(--text3) 0 4px, transparent 4px 8px);
  opacity: .8;
}

/* Phase 2.6 (2026-05-08): Legend-Items als klickbare Toggle-Buttons.
   Native <button>-Reset (analog .duty-item) damit Browser-Defaults nicht
   leaken. is-hidden-State zeigt: Series ist ausgeblendet (Swatch dimmed,
   Label durchgestrichen). Click toggelt Visibility + persistiert. */
.cockpit-hero-chart-legend-item--toggle {
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: opacity 0.15s, background 0.15s;
}
.cockpit-hero-chart-legend-item--toggle:hover {
  background: var(--card2);
}
.cockpit-hero-chart-legend-item--toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.cockpit-hero-chart-legend-item--toggle.is-hidden {
  opacity: 0.45;
  text-decoration: line-through;
}
.cockpit-hero-chart-legend-item--toggle.is-hidden .cockpit-hero-chart-legend-swatch {
  opacity: 0.3;
}

.cockpit-hero-chart-note {
  color: var(--text2);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg3);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.cockpit-hero-chart-note svg {
  color: var(--accent);
  flex: 0 0 auto;
}

/* Mini-KPIs (4 Items in einer Reihe mit Trennstrichen — D2: 3 bei KU §19) */
.cockpit-hero-mini {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.cockpit-hero-mini--3 { grid-template-columns: repeat(3, 1fr); }
.cockpit-hero-mini--4 { grid-template-columns: repeat(4, 1fr); }
.cockpit-hero-mini-item {
  padding: 0 14px;
  border-right: 1px solid var(--border);
}
.cockpit-hero-mini-item:first-child { padding-left: 0; }
.cockpit-hero-mini-item:last-child {
  border-right: 0;
  padding-right: 0;
}
.cockpit-hero-mini-k {
  font-size: 11px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: var(--fw-semibold);
  margin-bottom: 4px;
}
.cockpit-hero-mini-v {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1;
  font-size: 18px;
  font-weight: var(--fw-bold);
  letter-spacing: -.01em;
  color: var(--text);
}
.cockpit-hero-mini-v-cur {
  color: var(--text3);
  font-weight: var(--fw-medium);
  font-size: 13px;
  margin-left: 2px;
}
.cockpit-hero-mini-delta {
  font-size: 11px;
  color: var(--text3);
  margin-top: 3px;
  font-weight: var(--fw-medium);
}

/* ── Cockpit-Empty-State (B3.2 — User-Approval 2026-05-07) ────────── */
/* Modul-Sichtbarkeit: Hero REPLACED · Action Rail/Bookings/YC HIDDEN.
   Akzeptanz: keine 0,00-€-Hauptzahl, kein leerer Chart, kein "Sg 100",
   kein "Alles stabil". CTAs nur wenn Flow echt verdrahtet. */
.cockpit-empty-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: stretch;
  margin: 18px 0;
}
@media (max-width: 1100px) {
  .cockpit-empty-grid { grid-template-columns: 1fr; }
}

.cockpit-empty-card {
  background: var(--cockpit-hero-bg);
  border: 1px solid var(--border2);
  border-radius: var(--radius-xl);
  padding: 36px 36px 32px;
  display: grid;
  gap: 14px;
  position: relative;
  overflow: hidden;
  min-height: 320px;
}
body.light .cockpit-empty-card {
  border-color: rgba(181,141,44,.22);
  box-shadow: 0 1px 0 rgba(var(--surface-solid-rgba-base),.6) inset, 0 4px 24px rgba(15,23,42,.06);
}
.cockpit-empty-card::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 50%;
  height: 80%;
  background: var(--cockpit-hero-glow);
  pointer-events: none;
}
@media (prefers-contrast: more) { .cockpit-empty-card::before { display: none; } }
.cockpit-empty-card > * { position: relative; z-index: 1; }

.cockpit-empty-meta {
  color: var(--text3);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cockpit-empty-title {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 38px);
  font-weight: var(--fw-heavy);
  letter-spacing: -.018em;
  line-height: 1.15;
  color: var(--text);
}
.cockpit-empty-body {
  margin: 0;
  max-width: 56ch;
  color: var(--text2);
  font-size: 14.5px;
  line-height: 1.55;
}
.cockpit-empty-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.cockpit-empty-cta {
  appearance: none;
  font: 700 13.5px var(--font-sans);
  cursor: pointer;
  border-radius: var(--radius-md);
  padding: 10px 18px;
  transition: background var(--tr-fast), color var(--tr-fast), border-color var(--tr-fast);
}
.cockpit-empty-cta--primary {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
}
.cockpit-empty-cta--primary:hover {
  background: var(--accent2);
  border-color: var(--accent2);
}
.cockpit-empty-cta--secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border2);
}
.cockpit-empty-cta--secondary:hover {
  background: rgba(var(--surface-rgba-base),.04);
  border-color: var(--accent);
  color: var(--accent);
}
body.light .cockpit-empty-cta--secondary:hover { background: rgba(15,23,42,.04); }
.cockpit-empty-cta:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.cockpit-empty-cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cockpit-empty-preview {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 22px 24px;
  display: grid;
  gap: 12px;
  align-content: start;
}
.cockpit-empty-preview-head {
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.cockpit-empty-preview-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.cockpit-empty-preview-list li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  align-items: center;
  color: var(--text2);
  font-size: 13.5px;
}
.cockpit-empty-preview-list svg { color: var(--green); }

/* Mobile Empty: kompakt, CTAs untereinander */
@media (max-width: 600px) {
  .cockpit-empty-card { padding: 24px 22px 22px; min-height: auto; }
  .cockpit-empty-title { font-size: 24px; }
  .cockpit-empty-body { font-size: 13.5px; }
  .cockpit-empty-ctas { flex-direction: column; align-items: stretch; }
  .cockpit-empty-cta { width: 100%; text-align: center; }
  .cockpit-empty-preview { padding: 18px 20px; }
  .cockpit-hero { min-height: auto; padding: 16px 16px 14px; }
  .cockpit-hero-mini { grid-template-columns: 1fr 1fr; row-gap: 12px; }
  .cockpit-hero-mini-item { padding: 0 12px; }
  .cockpit-hero-mini-item:nth-child(2n) { border-right: 0; padding-right: 0; }
  .cockpit-hero-mini-item:nth-child(2n+1) { padding-left: 0; }
}

/* Year-Control + Mode-Toggle: bei schmalem Desktop in 2. Zeile umbrechen */
@media (max-width: 1080px) {
  .cockpit-header { flex-direction: column; align-items: stretch; }
  .cockpit-header-controls { justify-content: flex-start; }
}

/* Touch-Target-Floor (WCAG 2.5.5 / Apple HIG 44×44px) auf coarse Pointern.
 * App-weiter WebKit-Render-Sweep (iPhone 13, ergänzend zu Audit-Finding #7 /
 * PR #3721): die Year-Control-Buttons (prev/current/next sind alle
 * `.cockpit-year-control button`) maßen die Pfeile 26×32 und current 48×32.
 * Der @media(max-width:767px)-Block oben drückt min-height auf 32px — dieser
 * coarse-Block hebt sie wieder auf 44px (steht danach → gewinnt bei gleicher
 * Spezifität). Höhe wächst, kompakte Breite/Optik bleibt. */
@media (pointer: coarse) {
  .cockpit-year-control button {
    min-height: 44px;
  }
}

/* Cockpit Hero v3 PR3 + Mobile Structure (Z. 3699-4034 von _20-dashboard.css).
   Sg-Codex Body/Bars + Belegstatus-Card + Bookings vs YC display-Switch +
   Min-Width-Guards + Mobile (≤600px) Hard-Gate + body{overflow-x:hidden} (≤480px).

   Plan-Doc: docs/architecture/2026-05-16-dashboard-css-split-plan.md
   Extrahiert in PR-S1.6b' (Re-Spawn nach gecloster #2567 wegen Content-Drift). */

/* ╔════════════════════════════════════════════════════════════════════╗
   ║ Cockpit Hero v3 — PR 3 (2026-05-07)                                 ║
   ║                                                                     ║
   ║ Action-Rail-Refactor + Mobile Structure Alignment.                  ║
   ║                                                                     ║
   ║ Desktop:                                                            ║
   ║   - Sg-Card Codex-Style: Score ohne "/100", State-Wort + 3 Bars     ║
   ║   - Belegstatus-Card NEU: Counter + Progressbar + Top-3 offen       ║
   ║                                                                     ║
   ║ Mobile (≤600px) — Hard-Gate kein Horizontal-Overflow:               ║
   ║   - Bookings: Liste statt Tabelle (cockpit-bookings-list)           ║
   ║   - YC-Strip: Summary statt Cells (cockpit-yc-summary)              ║
   ║   - Action-Rail: Stacked Cards (bereits durch grid-template-areas)  ║
   ║   - Mini-KPIs: 2×2 (bereits in PR 2 für ≤600px gesetzt)             ║
   ║   - Min-width:0 + max-width:100% Guards an allen Card-Containern    ║
   ║   - body{overflow-x:hidden} nur als letztes Sicherheitsnetz         ║
   ╚════════════════════════════════════════════════════════════════════╝ */

/* ── Sg-Codex Body (kein "/100" + State-Wort als Headline) ───────── */
.cockpit-sg-body--codex {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.cockpit-sg-ring--codex {
  /* Override des bestehenden cockpit-sg-ring (das ::before-Conic nutzt) —
     hier nur Score-Zahl, kein "/100" Text-Span mehr. Größe identisch. */
}
.cockpit-sg-state-word {
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: .02em;
}
.cockpit-sg-state-word--green { color: var(--green); }
.cockpit-sg-state-word--yellow { color: var(--accent); }
.cockpit-sg-state-word--red { color: var(--red); }
.cockpit-sg-state-word--neutral { color: var(--text2); }

/* ── Sg-Codex Bars (3 horizontale Mini-Progressbars) ─────────────── */
.cockpit-sg-bars {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 10px;
}
.cockpit-sg-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cockpit-sg-bar-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  min-width: 0;
}
.cockpit-sg-bar-label {
  color: var(--text2);
  font-weight: var(--fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.cockpit-sg-bar-value {
  color: var(--text);
  font-family: var(--mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.cockpit-sg-bar-track {
  height: 6px;
  background: var(--bg3);
  overflow: hidden;
}
.cockpit-sg-bar-fill {
  height: 100%;
  background: var(--text3);
  transition: width var(--tr-fast);
}
.cockpit-sg-bar--good .cockpit-sg-bar-fill { background: var(--green); }
.cockpit-sg-bar--warn .cockpit-sg-bar-fill { background: var(--accent); }
.cockpit-sg-bar--bad  .cockpit-sg-bar-fill { background: var(--red); }
.cockpit-sg-bar--good .cockpit-sg-bar-value { color: var(--green); }
.cockpit-sg-bar--warn .cockpit-sg-bar-value { color: var(--accent); }
.cockpit-sg-bar--bad  .cockpit-sg-bar-value { color: var(--red); }

/* ── Belegstatus-Card (Counter + Progressbar + Top-3) ────────────── */
.cockpit-belegstatus { padding: 16px 18px; }
.cockpit-belegstatus-counter {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  min-width: 0;
}
.cockpit-belegstatus-counter-text {
  font-size: 13px;
  color: var(--text);
  font-weight: var(--fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.cockpit-belegstatus-counter-quote {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.cockpit-belegstatus-counter-quote--good { color: var(--green); }
.cockpit-belegstatus-counter-quote--warn { color: var(--accent); }
.cockpit-belegstatus-counter-quote--bad  { color: var(--red); }
.cockpit-belegstatus-counter-quote--neutral { color: var(--text2); }
.cockpit-belegstatus-bar {
  margin-top: 8px;
  height: 8px;
  background: var(--bg3);
  overflow: hidden;
}
.cockpit-belegstatus-bar-fill {
  height: 100%;
  background: var(--text3);
  transition: width var(--tr-fast);
}
.cockpit-belegstatus-bar--good .cockpit-belegstatus-bar-fill { background: var(--green); }
.cockpit-belegstatus-bar--warn .cockpit-belegstatus-bar-fill { background: var(--accent); }
.cockpit-belegstatus-bar--bad  .cockpit-belegstatus-bar-fill { background: var(--red); }
.cockpit-belegstatus-top {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.cockpit-belegstatus-top-head {
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text3);
}
.cockpit-belegstatus-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cockpit-belegstatus-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: baseline;
  font-size: 12px;
  color: var(--text2);
  min-width: 0;
  padding: 4px 0;
  border-bottom: 1px dashed var(--border);
}
.cockpit-belegstatus-item:last-child { border-bottom: 0; }
.cockpit-belegstatus-item-date {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cockpit-belegstatus-item-title {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.cockpit-belegstatus-item-amt {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Bookings: Liste vs. Tabelle ────────────────────────────────── */
/* Default: Tabelle sichtbar, Liste hidden (Desktop) */
.cockpit-bookings-list { display: none; }
.cockpit-bookings-table-wrap { display: block; }

/* ── YC Summary vs. Cells ───────────────────────────────────────── */
/* Default: Cells sichtbar, Summary hidden (Desktop) */
.cockpit-yc-summary { display: none; }

/* ── Universelle Min-Width-Guards für Cockpit-Cards (Mobile-Schutz) ─ */
.cockpit-side > .card,
.cockpit-bookings-wrap > .card,
.cockpit-yc-wrap > .cockpit-yc-strip,
.cockpit-main > .cockpit-hero {
  min-width: 0;
  max-width: 100%;
}
.cockpit-header-row,
.cockpit-kpi-wrap,
.cockpit-driver-wrap,
.cockpit-main,
.cockpit-side,
.cockpit-bookings-wrap,
.cockpit-yc-wrap,
.cockpit-status-wrap {
  min-width: 0;
  max-width: 100%;
}
.cockpit-pflicht-list,
.cockpit-sg-bars,
.cockpit-belegstatus-counter,
.cockpit-belegstatus-list,
.cockpit-bookings-list {
  min-width: 0;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ Mobile Structure (≤600px) — Hard-Gate kein Horizontal-Overflow   ║
   ╚══════════════════════════════════════════════════════════════════╝ */
@media (max-width: 600px) {
  /* Bookings: Tabelle/Liste-Switch + Item-Styles wurden in den
     ≤767px-Mobile-Polish-Block verschoben (Codex-P2-Fix #1 2026-05-08:
     Switch im 600px-Block ließ phones/tablets im 601–767px-Range mit der
     alten Tabelle, obwohl Item-Styles und Tests auf 767px-Breakpoint
     ausgelegt waren). Hier verbleiben jetzt nur YC-Summary-Styles. */

  /* YC: Cells aus, Summary an */
  .cockpit-yc-cells { display: none; }
  .cockpit-yc-summary {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
  }
  .cockpit-yc-summary-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
    min-width: 0;
  }
  .cockpit-yc-summary-row:last-child { border-bottom: 0; }
  .cockpit-yc-summary-label {
    font-size: 12px;
    font-weight: var(--fw-semibold);
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .cockpit-yc-summary-curr {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: var(--fw-bold);
    color: var(--text);
    font-variant-numeric: tabular-nums;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .cockpit-yc-summary-row .cockpit-yc-delta {
    font-size: 11.5px;
    white-space: nowrap;
  }

  /* Action-Rail-Cards bekommen sauberen Stack mit Atemraum */
  .cockpit-side {
    gap: 12px;
  }
  .cockpit-side > .card {
    /* Schon volle Breite durch grid; explizit Wrap-Safe halten */
    box-sizing: border-box;
    width: 100%;
  }

  /* Hero-Chart darf nicht überlaufen — width:100% + min-width:0 + canvas-Constraint */
  .cockpit-hero-chart {
    min-height: 180px;
    min-width: 0;
  }
  .cockpit-hero-chart canvas {
    max-width: 100% !important;
  }

  /* Hero-Mini KPIs: 2×2 mit eigenem Border-Reset (PR 2 hatte das schon, hier
     defensiv re-confirmed wegen Specificity-Order). */
  .cockpit-hero-mini { grid-template-columns: 1fr 1fr; row-gap: 14px; }
  .cockpit-hero-mini-item {
    padding: 0 12px;
    min-width: 0;
  }
  .cockpit-hero-mini-item:nth-child(2n) { border-right: 0; padding-right: 0; }
  .cockpit-hero-mini-item:nth-child(2n+1) { padding-left: 0; }
  .cockpit-hero-mini-v {
    font-size: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Mini-KPI-Item Container schützen */
  .cockpit-hero-mini { min-width: 0; }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ Letztes Sicherheitsnetz (≤480px) — body overflow-x hidden        ║
   ║                                                                  ║
   ║ Falls trotz aller Layout-Guards eine Card oder ein Inline-Element║
   ║ über die Viewport-Breite läuft, schneiden wir den horizontalen   ║
   ║ Scrollbar als ALLERLETZTES Sicherheitsnetz ab. Primärer Fix muss ║
   ║ immer das Card-Layout sein (min-width:0, max-width:100%, etc.).  ║
   ╚══════════════════════════════════════════════════════════════════╝ */
@media (max-width: 480px) {
  body { overflow-x: hidden; }
}

/* Cockpit Action-Rail Phase 2.5/2.6/2.7 (Z. 4036-4452 von _20-dashboard.css).
   Action-Rail-Container + Sections (Pflichten/Sg/Belegstatus/Empfehlungen)
   + Mobile-Stack + Mobile-Polish „Uncage" + Recent-Bookings Mobile-Layout
   + Section-Modifier-Slots + Light-Theme-Overrides.

   Plan-Doc: docs/architecture/2026-05-16-dashboard-css-split-plan.md
   Extrahiert in PR-S1.6b' (Re-Spawn nach gecloster #2567 wegen Content-Drift). */

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ Phase 2.5 — Cockpit Action-Rail Visual-Alignment (B3.2-Annäherung) ║
   ║ ──────────────────────────────────────────────────────────────────── ║
   ║ Quelle: public/dev/cockpit-hero-v3.html Z.274-410 (Prototyp-CSS).   ║
   ║ Eingeführt 2026-05-08 nach User-Side-by-Side gegen Live-App. Alte    ║
   ║ Klassen (.cockpit-pflichten, .cockpit-sg-body--codex, .cockpit-sg-   ║
   ║ ring*, .cockpit-belegstatus*, .cockpit-empfehlungen) werden vom JS   ║
   ║ nicht mehr gerendert; CSS-Definitionen bleiben vorerst stehen        ║
   ║ (Cleanup als TODOS.md-Backlog-Item nach Visual-Verify).              ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ── Action-Rail Container (zusammenhängende Rail statt 4 separater Cards) ── */
.cockpit-action-rail {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  /* Phase 2.7 (2026-05-08): display:flex statt :grid, damit letzte Section
     mit flex-grow:1 die Rest-Höhe füllt, wenn Rail kürzer als Hero ist
     (User-Befund: in Vorjahres-Cockpits/Pre-Launch-State hängt die Rail
     deutlich hinter dem Chart-Ende — Layout muss bündig abschließen). */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 520px;
  height: 100%;
  /* Phase 2.5 Codex-P2-Fix #3: gap:0 weil cockpit-side {gap:16px} (Z. 4945)
     sonst leakte. Sections stoßen direkt aneinander, nur border trennt. */
  gap: 0;
}
/* Phase 2.7 Polish (2026-05-08): Action-Rail-Sections luftiger zur
   Mockup-Annäherung B3.2.
   ──────────────────────────────────────────────────────────────────────
   Vorher: Sections waren `display: grid; rows: auto 1fr auto`, NUR die
   :last-child-Section hatte `flex-grow: 1`. Die anderen 2-3 Sections
   wuchsen nur bis zu ihrer Content-Höhe → CTAs klebten direkt am letzten
   Content-Item, was eng/gedrungen wirkte.

   Fix: alle Sections sind jetzt `display: flex; flex-direction: column`
   mit `flex: 1 1 auto`. Damit teilt sich die übrig bleibende Rail-Höhe
   gleichmäßig auf alle Sections auf. `.rail-cta { margin-top: auto }`
   pinnt den Section-CTA ans Section-Ende, sodass zwischen Content und
   CTA ruhiger Raum entsteht — exakt wie im Mockup.

   Bei mehr Content schrumpft der Atmen-Raum proportional, kein Overflow
   (Sections können shrinken via `flex-shrink: 1` Default).

   Die alte `:last-child { flex-grow: 1 }`-Sonderregel ist redundant und
   entfernt — ALLE Sections wachsen jetzt (Bündig-Abschluss bleibt). */
.cockpit-action-rail-section {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.cockpit-action-rail-section:last-child { border-bottom: 0; }

/* Section-Header: h3 links, Status-Badge rechts */
.rail-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.rail-head h3 {
  margin: 0;
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--text2);
}

/* Badge-System (Header-Status) */
.cockpit-action-rail-section .badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  white-space: nowrap;
}
/* Phase 2.5 Codex-P2-Fix (2026-05-08): Badge-Tints nutzen Tone-Tokens
   statt hardcodete rgba(...) — siehe _00-tokens.css --tone-good/-warn/
   -poor/-info-{bg,border}. Damit konform zur CSS-Debt-Freeze-Regel. */
.cockpit-action-rail-section .badge--ok      { background: var(--tone-good-bg); color: var(--green);  border: 1px solid var(--tone-good-border); }
/* A11y FM10-c: color war var(--accent) (#e8b84b) → nur 1.84:1 auf dem hellen
   Warn-Badge-Surface (Light). Umgestellt auf var(--tone-warn-text), das zum
   --tone-warn-bg/-border passt und in beiden Modi AA erreicht (Light ~6.3:1
   mit #7a5200, Dark ~9.4:1 mit #f0cf77). */
.cockpit-action-rail-section .badge--warn    { background: var(--tone-warn-bg); color: var(--tone-warn-text); border: 1px solid var(--tone-warn-border); }
.cockpit-action-rail-section .badge--watch   { background: var(--tone-info-bg); color: var(--blue);   border: 1px solid var(--tone-info-border); }
.cockpit-action-rail-section .badge--act     { background: var(--tone-warn-bg); color: var(--tone-warn-text); border: 1px solid var(--tone-warn-border); }
.cockpit-action-rail-section .badge--crit    { background: var(--tone-poor-bg); color: var(--red);    border: 1px solid var(--tone-poor-border); }
.cockpit-action-rail-section .badge--neutral { background: var(--card2); color: var(--text3); border: 1px solid var(--border2); }
.cockpit-action-rail-section .badge--empty   { background: var(--card2); color: var(--text3); border: 1px solid var(--border2); }

/* Section-Body */
.rail-body { font-size: 13.5px; min-width: 0; }

/* Section-CTA mit dashed border-top.
   Phase 2.7 Polish (2026-05-08): `margin-top: auto` pinnt den CTA ans
   Section-Ende (Section ist jetzt flex-column). Padding-top leicht erhöht
   für ruhigeres Spacing zwischen Content-Trennlinie und CTA-Text. */
.rail-cta {
  background: transparent; border: 0; cursor: pointer; text-align: left;
  display: flex; align-items: center; justify-content: space-between;
  color: var(--accent); font: 600 13px 'Plus Jakarta Sans', sans-serif;
  padding: 10px 0 0; margin-top: auto;
  border-top: 1px dashed var(--border);
  width: 100%;
}
.rail-cta:hover { color: var(--accent); opacity: .85; }
.rail-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ── Pflichten-Section: duty-item + duty-empty ── */
.cockpit-action-rail-section .duty-item {
  /* Native <button> reset (Phase 2.5 Codex-P2-Fix 2026-05-08): wir nutzen
     <button> für native Enter/Space-Activation, müssen Browser-Defaults
     aber zurücksetzen damit der Item-Look wie im Mockup bleibt. */
  background: transparent;
  border: 0;
  border-bottom: 1px dashed var(--border);
  color: inherit;
  font: inherit;
  text-align: left;
  width: 100%;
  display: grid; grid-template-columns: 1fr auto;
  align-items: baseline; gap: 6px;
  padding: 6px 0;
  font-size: 13px;
  cursor: pointer;
}
.cockpit-action-rail-section .duty-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.cockpit-action-rail-section .duty-item:last-of-type { border-bottom: 0; }
.cockpit-action-rail-section .duty-item:hover .duty-item-name { color: var(--accent); }
.cockpit-action-rail-section .duty-item-body { min-width: 0; }
.cockpit-action-rail-section .duty-item-name { color: var(--text); font-weight: 500; }
.cockpit-action-rail-section .duty-item-meta {
  color: var(--text3); font-size: 11.5px; display: block; margin-top: 1px; font-weight: 400;
}
.cockpit-action-rail-section .duty-item-due { color: var(--text3); font-size: 12px; font-weight: 600; }
.cockpit-action-rail-section .duty-item-due.is-warn { color: var(--accent); }
.cockpit-action-rail-section .duty-item-more {
  color: var(--text3); font-size: 11.5px; padding: 4px 0 0;
}
.cockpit-action-rail-section .duty-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; color: var(--green); padding: 16px 0;
  font-size: 12.5px; font-weight: 600;
}

/* ── Sg-Section: Codex-Layout (Ring 92px links | Bars rechts) ── */
.cockpit-action-rail-section .cockpit-sg-codex {
  display: grid; grid-template-columns: 92px 1fr;
  gap: 18px; align-items: center;
  min-width: 0;
}
.cockpit-action-rail-section .cockpit-sg-codex-ring { width: 92px; height: 92px; position: relative; }
.cockpit-action-rail-section .cockpit-sg-codex-ring svg {
  width: 100%; height: 100%; transform: rotate(-90deg);
}
.cockpit-action-rail-section .cockpit-sg-codex-ring .sg-ring-track { stroke: var(--border2); }
.cockpit-action-rail-section .cockpit-sg-codex-ring .sg-ring-fill  { stroke: var(--green); }
.cockpit-action-rail-section .cockpit-sg-codex-ring.tone-watch .sg-ring-fill { stroke: var(--blue); }
.cockpit-action-rail-section .cockpit-sg-codex-ring.tone-warn  .sg-ring-fill { stroke: var(--accent); }
.cockpit-action-rail-section .cockpit-sg-codex-ring.tone-crit  .sg-ring-fill { stroke: var(--red); }
.cockpit-action-rail-section .cockpit-sg-codex-ring.tone-empty .sg-ring-fill { stroke: var(--text3); opacity: .5; }
.cockpit-action-rail-section .cockpit-sg-codex-ring-label {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -.02em;
  color: var(--text);
}
.cockpit-action-rail-section .cockpit-sg-codex-ring.tone-empty .cockpit-sg-codex-ring-label {
  color: var(--text3); font-size: 18px; font-weight: 700;
}
.cockpit-action-rail-section .cockpit-sg-codex-bars { display: grid; gap: 8px; min-width: 0; }
.cockpit-action-rail-section .cockpit-sg-codex-bar {
  display: grid; grid-template-columns: 78px 1fr 42px;
  gap: 10px; align-items: center; font-size: 12px;
  min-width: 0;
}
.cockpit-action-rail-section .cockpit-sg-codex-bar .lbl {
  color: var(--text2); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cockpit-action-rail-section .cockpit-sg-codex-bar .track {
  background: var(--card2); height: 6px;
  overflow: hidden; position: relative; min-width: 0;
}
.cockpit-action-rail-section .cockpit-sg-codex-bar .fill {
  display: block; height: 100%;
  background: var(--green); transition: width .4s ease;
}
.cockpit-action-rail-section .cockpit-sg-codex-bar .fill.is-watch { background: var(--blue); }
.cockpit-action-rail-section .cockpit-sg-codex-bar .fill.is-warn  { background: var(--accent); }
.cockpit-action-rail-section .cockpit-sg-codex-bar .fill.is-crit  { background: var(--red); }
.cockpit-action-rail-section .cockpit-sg-codex-bar .fill.is-empty { background: var(--text3); opacity: .4; }
.cockpit-action-rail-section .cockpit-sg-codex-bar .v {
  text-align: right; font-weight: 700;
  color: var(--text); font-size: 12px;
}
.cockpit-action-rail-section .cockpit-sg-codex-bar .v.is-empty { color: var(--text3); font-weight: 500; }

/* ── Belegstatus-Section: Progress + Compact-2-Werte ── */
.cockpit-action-rail-section .beleg-progress { display: grid; gap: 6px; margin-bottom: 12px; }
.cockpit-action-rail-section .beleg-progress-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.cockpit-action-rail-section .beleg-progress-lbl { font-size: 12px; color: var(--text2); font-weight: 500; }
.cockpit-action-rail-section .beleg-progress-val { font-size: 12px; color: var(--text3); font-weight: 500; }
.cockpit-action-rail-section .beleg-progress-val b { color: var(--text); font-weight: 700; }
.cockpit-action-rail-section .beleg-progress-track {
  height: 7px; background: var(--card2);
  overflow: hidden;
}
.cockpit-action-rail-section .beleg-progress-fill {
  display: block; height: 100%; background: var(--green);
  transition: width .4s ease;
}
.cockpit-action-rail-section .beleg-progress-fill.is-warn  { background: var(--accent); }
.cockpit-action-rail-section .beleg-progress-fill.is-low   { background: var(--red); }
.cockpit-action-rail-section .beleg-progress-fill.is-empty { background: var(--text3); opacity: .4; }
.cockpit-action-rail-section .beleg-compact {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 12.5px; color: var(--text2); flex-wrap: wrap;
}
.cockpit-action-rail-section .beleg-compact-item {
  display: inline-flex; align-items: baseline; gap: 4px;
}
.cockpit-action-rail-section .beleg-compact-item b {
  font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--text);
}
.cockpit-action-rail-section .beleg-compact-item.is-warn b { color: var(--accent); }
.cockpit-action-rail-section .beleg-compact-divider { color: var(--text3); }

/* ── Empfehlungen-Section: kompakte Item-Liste (Buttons) ── */
.cockpit-action-rail-section--empfehlungen .cockpit-empfehlung-list {
  display: grid; gap: 6px;
}
.cockpit-action-rail-section--empfehlungen .cockpit-empfehlung-item {
  background: transparent; border: 0; cursor: pointer; text-align: left;
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 10px; align-items: center;
  padding: 6px 0; border-bottom: 1px dashed var(--border);
  color: var(--text); font-size: 13px;
  width: 100%;
}
.cockpit-action-rail-section--empfehlungen .cockpit-empfehlung-item:last-of-type { border-bottom: 0; }
.cockpit-action-rail-section--empfehlungen .cockpit-empfehlung-item:hover .cockpit-empfehlung-title { color: var(--accent); }
.cockpit-action-rail-section--empfehlungen .cockpit-empfehlung-icon { color: var(--text3); }
.cockpit-action-rail-section--empfehlungen .cockpit-empfehlung-title { font-weight: 500; }
.cockpit-action-rail-section--empfehlungen .cockpit-empfehlung-meta {
  font-size: 11.5px; color: var(--text3); display: block; margin-top: 1px;
}
.cockpit-action-rail-section--empfehlungen .cockpit-empfehlung-cta { color: var(--accent); }

/* ── Mobile-Stack: Action-Rail wird vertikaler Stack, min-height entfällt ── */
@media (max-width: 900px) {
  .cockpit-action-rail {
    min-height: 0;
    grid-auto-rows: auto;
  }
  .cockpit-action-rail-section { padding: 16px 18px; }
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ Mobile-Polish 2026-05-08 — Action-Rail-„Uncage"                     ║
   ║ ──────────────────────────────────────────────────────────────────── ║
   ║ User-Brief: auf Mobile sollen Pflichten/Steuergesundheit/Belegstatus/║
   ║ Empfehlungen wieder als eigene Cards wirken — nicht als ein zusammen-║
   ║ hängender Container mit Trennlinien (Phase 2.7/B-Bündig-Layout ist   ║
   ║ Desktop-only intended). Lösung: Rail-Container auf Mobile transparent║
   ║ machen, jede Section bekommt eigenes background+border+radius+gap.  ║
   ║ Bündig-Abschluss ist auf Mobile nicht relevant (Sections stacken    ║
   ║ vertikal, keine fixed Hero-Höhe zu füllen).                         ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
@media (max-width: 767px) {
  .cockpit-action-rail {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    height: auto;
    min-height: 0;
    gap: 16px;
  }
  .cockpit-action-rail-section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl, 18px);
    padding: 20px 22px;
    /* Innere Section-Borders zwischen Sections (Desktop-Pattern) entfallen,
       weil jede Section jetzt ihren eigenen Border hat. */
    border-bottom: 1px solid var(--border);
    /* flex:1 1 auto vom Phase-2.7/B-Polish: auf Mobile irrelevant
       (Sections stacken zu Content-size) — kein Overflow durch Default-
       flex-shrink:1, weil min-height:0 inherited bleibt. */
  }
  .cockpit-action-rail-section:last-child {
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
  }
}

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ Mobile-Polish 2026-05-08 — Recent-Bookings single-row grid layout   ║
   ║ ──────────────────────────────────────────────────────────────────── ║
   ║ User-Brief: Datum schmal links, Body (Titel oben + Status-Subtext   ║
   ║ darunter) mittig, Betrag rechts vertikal an Titel ausgerichtet.     ║
   ║ Vorher: 2-row stack (date+text in row1, amount+pill in row2) machte ║
   ║ Datum visuell isoliert vom Body, Betrag wirkte „verloren" unter dem ║
   ║ Titel.                                                              ║
   ║                                                                      ║
   ║ Neues Markup (siehe dashboard-v3.js#listItem): drei direkte Children ║
   ║ statt verschachtelten 2 Rows — `<span>date</span>`, `<div>body</div>`║
   ║ mit Title+Meta-Subtext, `<span>amount</span>`. CSS-Grid mit 3 Spalten║
   ║ macht den Mockup-Look.                                              ║
   ║                                                                      ║
   ║ Codex-P2-Fix #1 (Iter 1/5 2026-05-08): Switch von Tabelle → Liste   ║
   ║ war vorher nur im ≤600px-Block — phones/tablets im 601–767px-Range  ║
   ║ sahen weiterhin die Desktop-Tabelle. Switch hierher hochgezogen,    ║
   ║ damit der ganze Mobile-Range konsistent als Liste rendert.          ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
@media (max-width: 767px) {
  /* Codex-P2-Fix #1 (2026-05-08): Tabelle/Liste-Switch im selben Breakpoint
     wie Item-Styles + Tests (vorher 600px → 601–767px-Range zeigte alte
     Desktop-Tabelle). */
  .cockpit-bookings-table-wrap { display: none; }
  .cockpit-bookings-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    margin: 8px 0 0;
    list-style: none;
  }
  .cockpit-bookings-li--clickable { cursor: pointer; }
  .cockpit-bookings-li--clickable:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }
  .cockpit-bookings-li-amt.vp { color: var(--green); }
  .cockpit-bookings-li-amt.vn { color: var(--red); }

  .cockpit-bookings-li {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 12px;
    align-items: center;
  }
  .cockpit-bookings-li:last-child { border-bottom: 0; }
  .cockpit-bookings-li-date {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text3);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    align-self: center;
  }
  .cockpit-bookings-li-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .cockpit-bookings-li-text {
    font-size: 14px;
    color: var(--text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cockpit-bookings-li-meta {
    font-size: 11.5px;
    color: var(--text3);
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cockpit-bookings-li-meta--offen { color: var(--accent); }
  .cockpit-bookings-li-meta--verbucht { color: var(--text3); }
  .cockpit-bookings-li-amt {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    align-self: center;
    white-space: nowrap;
  }
}

/* ── Section-Modifier-Slots (Mockup-true semantische Marker) ──
   Diese Klassen tragen aktuell keine eigenen Styles — alle Section-Styles
   laufen über .cockpit-action-rail-section. Die Modifier sind explizit
   benannt, damit künftige Section-spezifische Tweaks einen eindeutigen
   Anker haben (z.B. Belegstatus-Spezifika beim Top-Expand-Follow-up). */
.cockpit-action-rail-section--pflichten,
.cockpit-action-rail-section--sg,
.cockpit-action-rail-section--belegstatus,
.cockpit-action-rail-section--empfehlungen {
  /* No-op slot — Modifier-Pattern */
}

/* ── Light-Theme-Overrides für Action-Rail ── */
html[data-theme="light"] .cockpit-action-rail,
body.light .cockpit-action-rail {
  background: var(--card);
  border-color: var(--border);
}
html[data-theme="light"] .cockpit-action-rail-section,
body.light .cockpit-action-rail-section {
  border-bottom-color: var(--border);
}

/* Cockpit YC-Strip Phase 2.7 (Z. 4453-4714 von _20-dashboard.css).
   Vorjahresvergleich-Strip Mockup-Tabelle: 4 Zeilen × 6 Spalten + Mode-Badge
   + Δ-Tones + Compare-Bar (Diverging-Bar) + Cap-Indicator (Diagonal-Stripes)
   + Empty-State + Footer-Legende + Tablet/Mobile-Range.

   Plan-Doc: docs/architecture/2026-05-16-dashboard-css-split-plan.md
   Extrahiert in PR-S1.6b' (Re-Spawn nach gecloster #2567 wegen Content-Drift). */

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ Phase 2.7 — Vorjahresvergleich-Strip Mockup-Tabelle (2026-05-08)   ║
   ║ ──────────────────────────────────────────────────────────────────── ║
   ║ User-Mockup: Tabellen-Layout mit 4 Zeilen (Gewinn / Einnahmen /     ║
   ║ Ausgaben / Marge), 6 Spalten (Kennzahl, Curr, Prev, Δ abs, Δ rel,   ║
   ║ Verlauf), Mode-Badge oben rechts, Footer-Legende mit Note.          ║
   ║ Mobile (<800px): kompakte Liste statt Tabelle.                       ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
.cockpit-yc-strip {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cockpit-yc-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.cockpit-yc-head-titles {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.cockpit-yc-strip .cockpit-yc-kicker {
  font-size: 17px; font-weight: 700;
  color: var(--text);
  letter-spacing: -.005em;
}
.cockpit-yc-strip .cockpit-yc-period {
  font-size: 13px; color: var(--text2); font-weight: 500;
}
.cockpit-yc-mode-badge {
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: var(--card2);
  color: var(--text2);
  border: 1px solid var(--border2);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Tabelle */
.cockpit-yc-table-wrap { overflow-x: auto; }
.cockpit-yc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.cockpit-yc-th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text3);
  padding: 4px 12px 12px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.cockpit-yc-th--label { width: 14%; }
.cockpit-yc-th--curr  { width: 16%; text-align: right; }
.cockpit-yc-th--prev  { width: 16%; text-align: right; }
.cockpit-yc-th--abs   { width: 14%; text-align: right; }
.cockpit-yc-th--rel   { width: 12%; text-align: right; }
.cockpit-yc-th--bar   { width: 28%; }

.cockpit-yc-row { transition: background .15s; }
.cockpit-yc-row:hover { background: var(--card2); }
.cockpit-yc-td {
  padding: 14px 12px;
  border-bottom: 1px dashed var(--border);
  vertical-align: middle;
}
.cockpit-yc-row:last-child .cockpit-yc-td { border-bottom: 0; }
.cockpit-yc-td--label {
  color: var(--text); font-weight: 500;
  font-size: 14.5px;
}
.cockpit-yc-td--curr,
.cockpit-yc-td--prev,
.cockpit-yc-td--abs,
.cockpit-yc-td--rel {
  text-align: right;
  font-feature-settings: 'tnum' 1;
}
.cockpit-yc-td .cockpit-yc-curr {
  color: var(--text); font-weight: 600;
  font-size: 15px;
}
.cockpit-yc-td .cockpit-yc-curr-unit { color: var(--text3); margin-left: 2px; font-weight: 500; font-size: 12px; }
.cockpit-yc-td .cockpit-yc-prev {
  color: var(--text2); font-weight: 500;
  font-size: 14px;
}
.cockpit-yc-curr--empty,
.cockpit-yc-prev--empty,
.cockpit-yc-abs--empty,
.cockpit-yc-rel--empty { color: var(--text3); font-weight: 500; }
.cockpit-yc-rel--hidden { color: var(--text3); font-style: italic; opacity: .7; }

/* Δ Tones */
.cockpit-yc-td .cockpit-yc-abs--up,
.cockpit-yc-td .cockpit-yc-delta--up { color: var(--green); font-weight: 700; }
.cockpit-yc-td .cockpit-yc-abs--down,
.cockpit-yc-td .cockpit-yc-delta--down { color: var(--accent); font-weight: 700; }
.cockpit-yc-td .cockpit-yc-abs--neutral,
.cockpit-yc-td .cockpit-yc-delta--neutral { color: var(--text2); font-weight: 600; }

/* Compare-Bar (Phase 2.7 UX-Polish 2026-05-08): Diverging-Bar mit
   Mitte = Vorjahresperiode (0 % bzw. 0 pp).
   ──────────────────────────────────────────────────────────────────────
   Vorher: Ratio-basierte Bar mit prev als 50%-Anker. Problem: +200 % und
   +612 % saturierten beide auf 100 % Fill (`Math.min(2, ratio)`) und
   wirkten visuell identisch. Plus: vertikaler Strich war für User unklar
   (Vorjahr? 0-Linie? Zielwert?).

   Jetzt: Δ-basierte Diverging-Bar. Bar rechts der Mitte = curr > prev,
   Bar links der Mitte = curr < prev. Cap bei 50% Container-Breite je
   Seite (= ±300 % bzw. ±20 pp); Cap-Stripe-Pattern signalisiert „geht
   noch weiter". Mittel-Baseline ist sichtbar als feiner vertikaler
   Strich. */
.cockpit-yc-bar {
  position: relative;
  width: 100%; height: 10px;
  background: var(--card2);
  overflow: hidden;
}
.cockpit-yc-bar-baseline {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%; width: 1.5px;
  background: var(--text2);
  opacity: .55;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
}
.cockpit-yc-bar-fill {
  position: absolute;
  top: 0; bottom: 0;
  transition: width .35s ease, left .35s ease, right .35s ease;
  z-index: 1;
}
/* Tone-Mapping: gewinn/einnahmen positive = good (grün), negative = poor (rot).
   ausgaben positive (mehr Ausgaben) = neutral (gold), negative = good. */
.cockpit-yc-bar-fill--good    { background: var(--green); opacity: .85; }
.cockpit-yc-bar-fill--neutral { background: var(--accent); opacity: .65; }
.cockpit-yc-bar-fill--poor    { background: var(--red); opacity: .75; }

/* Cap-Indicator: Diagonal-Stripes-Overlay zeigt „Bar ist gecappt, exakte
   Zahl steht in der Δ-rel-Spalte daneben". Subtil, damit der Tone noch
   sichtbar bleibt. */
.cockpit-yc-bar-fill--capped {
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 3px,
    rgba(12, 15, 26, 0.22) 3px,
    rgba(12, 15, 26, 0.22) 5px
  );
}
body.light .cockpit-yc-bar-fill--capped {
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 3px,
    rgba(var(--surface-solid-rgba-base), 0.32) 3px,
    rgba(var(--surface-solid-rgba-base), 0.32) 5px
  );
}

/* Empty-State: Bar zeigt nur die Baseline, kein Fill — passt zum
   `—`-Marker in der Δ-rel-Spalte daneben (gleiche Suppression-Semantik). */
.cockpit-yc-bar--empty {
  background: var(--card2);
  opacity: .55;
}

/* Footer-Legende */
.cockpit-yc-legend {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--text3);
}
.cockpit-yc-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.cockpit-yc-legend-dot {
  width: 10px; height: 10px; border-radius: 2px;
  display: inline-block;
}
.cockpit-yc-legend-dot--prev    { background: var(--text-soft, var(--text2)); opacity: .6; }
.cockpit-yc-legend-dot--good    { background: var(--green); opacity: .85; }
.cockpit-yc-legend-dot--neutral { background: var(--accent); opacity: .65; }
.cockpit-yc-legend-dot--poor    { background: var(--red); opacity: .75; }
.cockpit-yc-legend-note { margin-left: auto; color: var(--text3); font-size: 11px; }

/* Phase 2.7 Codex-P2-Fix (2026-05-08): Tablet-Range 601-800px hatte einen
   Loch — Tabelle hidden, aber `.cockpit-yc-summary` ist Default-display:none
   (Z. 6548) und wird erst im ≤600px-Block aktiviert. Folge: Vorjahresvergleich-
   Section war zwischen 601-800px ohne KPI-Rows (nur Head+Legende sichtbar).
   Fix: Summary auch im 800px-Block enablen, parallel zum Tabellen-Hide. */
@media (max-width: 800px) {
  .cockpit-yc-strip { padding: 18px 18px; }
  .cockpit-yc-table-wrap { display: none; }
  .cockpit-yc-summary {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
  }
  /* Phase 2.7 Codex-P2-Fix #2 (2026-05-08): summary-row Layout-Regeln
     waren NUR im ≤600px-Block — zwischen 601-800px hatte die Summary
     unspaced inline-text ("Gewinn300 €+25,0 %"). Layout-Regeln im
     800px-Block dupliziert (Cascade greift trotzdem korrekt für ≤600px). */
  .cockpit-yc-summary-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
    min-width: 0;
  }
  .cockpit-yc-summary-row:last-child { border-bottom: 0; }
  .cockpit-yc-summary-label {
    font-size: 12px;
    font-weight: var(--fw-semibold);
    color: var(--text2);
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .cockpit-yc-summary-curr {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: var(--fw-bold);
    color: var(--text);
    font-variant-numeric: tabular-nums;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .cockpit-yc-summary-row .cockpit-yc-delta {
    font-size: 11.5px;
    white-space: nowrap;
  }
  .cockpit-yc-mode-badge { font-size: 11px; padding: 4px 10px; }
  .cockpit-yc-legend {
    flex-direction: column; gap: 6px;
    align-items: flex-start;
  }
  .cockpit-yc-legend-note { margin-left: 0; }
}

/* Cockpit Phase 1 Beta Skeleton (2026-05-26)
 * Phase 1.5a Empty-State Polish (2026-05-26):
 *   Bug 2 — Slimmer Header (Eyebrow + Period-Range statt riesiger H1)
 *   Bug 3 — Hero-Card mit Antigravity-Aurora-Glow (--cockpit-hero-bg/-glow,
 *           --radius-hero 22px). Vorher wirkte die Card flat.
 */

.cockpit-beta-shell {
  --cockpit-beta-gap: 18px;
}

/* ── Phase J Hotfix 2026-05-27: Grid-Container-Conflict-Fix ──────────────
   Daniel-Befund 2026-05-27: Layout strukturell kaputt, Hauptkarte rechts
   verschoben, links riesige leere Fläche.
   Root-Cause: .cockpit-grid (parent class auf cockpit-beta-shell) bringt
   von _45a-cockpit-base.css ein `display: grid; grid-template-columns:
   2fr 1fr; grid-template-areas: ...` mit. Die neuen beta-Kinder
   (.cockpit-beta-topbar, .cockpit-beta-populated-layout, .cockpit-beta-
   empty-wrap) haben KEINE grid-area-Zuweisung und werden in die
   implicit grid placement gequetscht → Layout-Bruch.
   Fix: für cockpit-beta-shell den Outer-Grid deaktivieren. Inner-Layout
   übernimmt `.cockpit-beta-populated-layout` (eigenes 2-col grid). */
/* Round 43 (2026-05-28, Daniel-Spec): Cockpit-Padding an Buchungen
 * angeglichen. Vorher 0 28px 24px Inner-Padding ON TOP OF Shell-Main
 * 32px (wide) = 60px each side auf Desktop. Jetzt 0 0 24px Inner —
 * Shell-Main liefert `--page-pad-x-full: 24px` via data-width="full"
 * (siehe nav-config.js VIEW_WIDTH_MAP 'dashboard': 'full'). Cockpit
 * cappt inner bei 1440 + margin: 0 auto, sodass Content trotzdem
 * gewünschte Maximum-Breite hat. */
.cockpit-grid.cockpit-beta-shell {
  display: block;
  grid-template-columns: none;
  grid-template-areas: none;
  grid-template-rows: none;
  gap: 0;
  align-items: stretch;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 0 24px;
  box-sizing: border-box;
}

@media (max-width: 1023px) {
  .cockpit-grid.cockpit-beta-shell {
    padding: 0 0 16px;
  }
}

.cockpit-header-row--beta {
  align-items: flex-start;
  gap: var(--cockpit-beta-gap);
}

/* Bug-2-Fix: Slim Header. Eyebrow `FINANZCOCKPIT` (klein, uppercase) +
 * Period-Range als visueller Heading-Anker (mittelgroß, nicht riesig).
 * Datenstand inline darunter. */
.cockpit-beta-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cockpit-beta-gap);
  padding: 0;
}

.cockpit-beta-header-titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cockpit-beta-kicker {
  color: var(--text2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .5px;
  text-transform: uppercase;
}

.cockpit-beta-period {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: -.01em;
  line-height: 1.15;
}

.cockpit-beta-header-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.cockpit-datenstand--beta {
  background: var(--surface-sidebar);
  border: 1px solid var(--border-alpha);
}

.cockpit-beta-empty-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, .88fr);
  gap: var(--cockpit-beta-gap);
}

.cockpit-beta-empty-hero,
.cockpit-beta-empty-preview,
.cockpit-bookings--beta-empty {
  border-color: var(--border-alpha);
  box-shadow: var(--shadow-lg);
}

/* Phase M Round 24 (2026-05-27, Daniel-Spec): Composition-Cleanup.
 * Vorher (Bug-3-Fix Phase I): Aurora-Glow via ::after (gold+grün
 * radial-gradients) + Inner-Stroke via ::before (14px-inset Border)
 * + cockpit-hero-bg-Gradient + --surface-sidebar für Preview (=
 * #262e50 violet-blau in Dark). Daniel-Befund: "Kasten-in-Kasten,
 * Raster-/Glow-Placeholder, blaue Sonderfläche, Glow auf Checks".
 *
 * Round 24: alle 4 Empty-Cards (Einrichtungshilfe, Empty-Hero, Was-
 * danach-Preview, Rail-Cards) nutzen jetzt dieselbe Card-Surface-
 * Familie via `var(--card2)`. Keine ::before / ::after Glow- oder
 * Inner-Stroke-Effekte mehr. Checks zurück auf subtiles var(--green).
 *
 * .cockpit-empty-card definiert in _45c-cockpit-hero-v3.css den
 * Base-Style (padding, headline-clamp etc.) — bleibt unverändert,
 * die hier definierten Modifier-Klassen .cockpit-beta-empty-hero
 * + .cockpit-beta-empty-preview überschreiben nur Surface/Spec. */
.cockpit-beta-empty-hero {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  background: var(--card2);
  border-radius: var(--radius-lg);
  transition: border-color var(--tr-drawer);
}

/* Suppress the inherited gold glow from .cockpit-empty-card::before
 * (defined in _45c-cockpit-hero-v3.css:490). Element has both classes
 * .cockpit-empty-card und .cockpit-beta-empty-hero, der hier
 * definierte Modifier-::before überschreibt den Base-::before. */
.cockpit-beta-empty-hero::before {
  display: none;
}

.cockpit-beta-empty-preview {
  background: var(--card2);
  border-radius: var(--radius-lg);
}

.cockpit-beta-empty-preview .cockpit-empty-preview-head {
  color: var(--text2);
  letter-spacing: 0.04em;
}

/* Round 24: Checks subtil grün statt grell-gold. */
.cockpit-beta-empty-preview .cockpit-empty-preview-list svg {
  color: var(--green);
  opacity: 0.75;
}

.cockpit-bookings--beta-empty {
  background: var(--surface-sidebar);
  border: 1px solid var(--border-alpha);
  border-radius: var(--radius-lg);
}

.cockpit-beta-bookings-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 0 2px;
  color: var(--text2);
}

.cockpit-beta-bookings-eyebrow {
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  text-transform: uppercase;
}

.cockpit-beta-bookings-empty p {
  max-width: 560px;
  margin: 0;
  color: var(--text2);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

.cockpit-beta-shell .cockpit-empty-ctas {
  justify-content: flex-start;
}

.cockpit-beta-shell .cockpit-empty-cta {
  font-family: var(--font-sans);
  transition:
    background var(--tr-fast),
    color var(--tr-fast),
    border-color var(--tr-fast),
    transform var(--tr-drawer);
}

.cockpit-beta-shell .cockpit-empty-cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 1100px) {
  .cockpit-beta-empty-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .cockpit-header-row--beta {
    gap: 12px;
  }

  .cockpit-beta-empty-hero {
    min-height: 0;
  }

  .cockpit-beta-shell .cockpit-empty-ctas {
    width: 100%;
    flex-direction: column;
  }

  .cockpit-beta-shell .cockpit-empty-cta {
    width: 100%;
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Cockpit Phase 1.5b — Populated-State (2026-05-26)
 *
 * Antigravity-Port: Hero-Card (Gold-Aurora) + SVG-Spline-Chart + 4 KPIs
 * + Letzte-Buchungen + Right-Rail mit 4 DnD-Cards.
 *
 * Token-driven (--accent, --cockpit-hero-bg/-glow, --border-alpha,
 *               --surface-sidebar, --radius-hero/-lg, --font-mono, …).
 * Keine hardcoded Hex/RGBA. CSP-konform: keine inline-style-Attribute
 * im Source-HTML, alle dynamischen Werte via CSS-custom-properties
 * (z.B. --cockpit-beta-bar-pct).
 * ════════════════════════════════════════════════════════════════════════ */

/* ── A. POPULATED LAYOUT ──────────────────────────────────────────────── */
.cockpit-beta-populated {
  /* Phase M Round 10 (2026-05-27, Daniel-Spec): vertikaler Rhythmus auf
   * 24px erhöht — gilt für Hero→Buchungsliste (main-col gap) UND für
   * rail-Cards untereinander (via Token in _45i). column-gap bleibt
   * separat auf 28px (horizontal main↔rail), grid margin-top bleibt
   * hardcoded 28px (topbar→grid). */
  --cockpit-beta-pop-gap: 24px;
  --cockpit-beta-pop-col-gap: 28px;
}

/* Phase M Round 7 (2026-05-27, Daniel-Spec): rechte Rail schmaler clampen
 * (300–360px statt min 320px in 1fr-Slot), Main-Spalte bekommt 1fr und
 * dadurch sichtbar mehr Bühne. Horizontaler Gap auf 28px erhöht — vorher
 * teilten Hero und Rail nur 18px, jetzt mehr Atem (Antigravity-Maß).
 * Vertikaler Gap (zwischen Hero und Buchungsliste in Main-Col) bleibt auf
 * 18px via dem alten Token.
 *
 * Phase M Round 8 (2026-05-27, Daniel-Spec): margin-top auf 28px erhöht
 * (statt --cockpit-beta-pop-gap = 18px). Das gesamte Grid (Hero + Rail
 * gemeinsam) rückt damit weiter nach unten unter die Topbar; ergibt mit
 * dem Topbar-Margin-Bottom 14px nach Margin-Collapse effektive ~28px
 * Luft zwischen Topbar und erster Card-Reihe (Antigravity-Maß). */
/* Phase M Round 25 (2026-05-27, Daniel-Spec): explizite Fallbacks für die
 * Custom Properties. `.cockpit-beta-populated-layout` wird sowohl im
 * Populated- als auch im Empty-State verwendet, aber die Custom
 * Properties --cockpit-beta-pop-col-gap (28px) und --cockpit-beta-pop-gap
 * (24px) waren nur auf .cockpit-beta-populated definiert. Im Empty-State
 * (Parent .cockpit-beta-empty) waren sie undefined → column-gap fiel auf
 * `normal` zurück (≈ 0px) → Main-Col im Empty war 28px breiter als
 * Populated, Rail klebte am Onboarding-Kasten. Fallback-Werte stellen
 * Pixel-genaue Spaltenparität zwischen Empty und Populated her. */
.cockpit-beta-populated-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 25vw, 360px);
  column-gap: var(--cockpit-beta-pop-col-gap, 28px);
  row-gap: var(--cockpit-beta-pop-gap, 24px);
  margin-top: 28px;
}

.cockpit-beta-main-col {
  display: flex;
  flex-direction: column;
  gap: var(--cockpit-beta-pop-gap);
  min-width: 0;
}

@media (max-width: 1100px) {
  /* Stack-Modus: Rail rückt unter Main; column-gap entfällt, nur row-gap. */
  .cockpit-beta-populated-layout {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
}

/* ── B. HERO-CARD ─────────────────────────────────────────────────────── */
.cockpit-beta-hero-card {
  position: relative;
  overflow: hidden;
  padding: 26px 26px 18px;
  border: 1px solid var(--border-alpha);
  border-radius: var(--radius-hero);
  background: var(--cockpit-hero-bg);
  box-shadow: var(--shadow-lg);
  transition: transform var(--tr-drawer), border-color var(--tr-drawer);
}

.cockpit-beta-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cockpit-hero-glow);
  pointer-events: none;
  z-index: 0;
}

.cockpit-beta-hero-card > * {
  position: relative;
  z-index: 1;
}

@media (prefers-contrast: more) {
  .cockpit-beta-hero-card::before {
    display: none;
  }
}

/* Header row inside hero (label left + tax-law right). */
.cockpit-beta-hero-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.cockpit-beta-hero-label {
  color: var(--text2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

/* Main value (large mono number with currency + trend pill). */
.cockpit-beta-hero-main-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 14px;
}

.cockpit-beta-hero-value {
  margin: 0;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: clamp(46px, 6.4vw, 72px);
  font-weight: var(--fw-heavy);
  line-height: 1;
  letter-spacing: -0.02em;
}

.cockpit-beta-hero-currency {
  margin-left: 6px;
  color: var(--text2);
  font-family: var(--font-mono);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: var(--fw-bold);
}

.cockpit-beta-trend-wrap,
.cockpit-beta-trend {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface-sidebar);
  border: 1px solid var(--border-alpha);
  font-size: var(--fs-sm, 12px);
  font-weight: var(--fw-semibold);
}

.cockpit-beta-trend--empty {
  color: var(--text2);
}

/* Toolbar (Scenario-Toggle + Chart-Legende + Status-Strip).
 * Phase K Round 2 (2026-05-27): Scenario-Tabs "Nur gebucht / + Szenario"
 * links neben der Legende; Status mit "X Monate gebucht · Y Monate offen ·
 * Jan unvollständig" rechts. */
.cockpit-beta-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0 14px;
  border-top: 1px dashed var(--border-alpha);
}

.cockpit-beta-toolbar-left {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.cockpit-beta-scenario-tabs {
  display: inline-flex;
  background: rgba(var(--surface-rgba-base), 0.04);
  border: 1px solid var(--border-alpha);
  border-radius: 7px;
  padding: 2px;
  gap: 2px;
}

.cockpit-beta-scenario-tab {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: var(--fw-semibold);
  padding: 4px 10px;
  border-radius: 5px;
  border: 0;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  transition: background var(--tr-fast), color var(--tr-fast);
  letter-spacing: -0.005em;
}

.cockpit-beta-scenario-tab:hover {
  color: var(--text);
}

.cockpit-beta-scenario-tab--active,
.cockpit-beta-scenario-tab[aria-selected="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}

.cockpit-beta-scenario-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cockpit-beta-toolbar-legend {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Round 36 (2026-05-28): Legend-Chips als <button> mit Toggle + dimmed/
 * line-through Inactive-State. */
.cockpit-beta-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text2);
  font: inherit;
  font-size: var(--fs-sm, 12px);
  cursor: pointer;
  transition: background var(--tr-fast), color var(--tr-fast), opacity var(--tr-fast);
}
.cockpit-beta-legend-chip:hover { background: rgba(var(--surface-rgba-base), .04); color: var(--text); }
.cockpit-beta-legend-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cockpit-beta-legend-chip--inactive { opacity: 0.45; }
.cockpit-beta-legend-chip--inactive > span:last-child { text-decoration: line-through; }
/* Option-B-Umbau (2026-07-10): Gewinn ist die permanente Hero-Serie ohne
 * Toggle — statisches <span> statt <button>, kein Hover/Cursor/Focus-Ring. */
.cockpit-beta-legend-chip--static {
  cursor: default;
  color: var(--text);
}

.cockpit-beta-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cockpit-beta-legend-dot--profit { background: var(--accent); }
.cockpit-beta-legend-dot--income { background: var(--green); opacity: 0.55; }
/* Zurück zu Rot (2026-07-10, Daniel-Entscheidung) — folgt _45h2-cockpit-
 * beta-chart.css --line--expense. */
.cockpit-beta-legend-dot--expense { background: var(--red); opacity: 0.55; }

.cockpit-beta-toolbar-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text2);
  font-size: var(--fs-sm, 12px);
}

.cockpit-beta-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}

/* Hero floor — INTERAKTIVE SUMMARY-LEISTE (Phase M Round 35, 2026-05-28).
 * Anti-Gravity-Spec: eine eigene abgerundete Box mit dezenter Border und
 * leicht hervorgehobenem Hintergrund. Links: Title + Sub-Pille (gold).
 * Rechts: 4 kompakte KPI-Mini-Spalten (Label klein uppercase, Wert mono).
 * Reagiert auf Chart-Hover (Title + Sub + Item-Werte werden via
 * chart-hover.js gemutated, restored auf mouseleave). cmp-Sublabel ist
 * unterdrückt — die echte Vergleichs-Info gehört in den KPI-Floor
 * darunter (mit Sparkline). Vorher: gestapeltes Grid mit großen Tiles
 * (18-22px), die optisch mit dem KPI-Floor verschmolzen. */
.cockpit-beta-hero-floor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 12px 18px;
  margin-top: 18px;
  background: rgba(var(--surface-rgba-base), .025);
  border: 1px solid var(--border-alpha);
  border-radius: 14px;
}

.cockpit-beta-hero-floor-titles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.cockpit-beta-hero-floor-title {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
}

.cockpit-beta-hero-floor-sub {
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cockpit-beta-hero-floor-items {
  display: flex;
  align-items: flex-end;
  gap: 28px;
  flex-wrap: wrap;
}

.cockpit-beta-hero-floor-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 0;
}

.cockpit-beta-hero-floor-k {
  color: var(--text2);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cockpit-beta-hero-floor-v {
  color: var(--text);
  font-size: 14px;
  font-weight: var(--fw-bold);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  line-height: 1.15;
}

.cockpit-beta-hero-floor-u {
  margin-left: 2px;
  color: var(--text2);
  font-size: 11px;
  font-weight: var(--fw-semibold);
}

/* cmp-Span wird gerendert (pctVs-Helper bleibt aktiv) aber im Summary-Band
 * unterdrückt — die Vergleichs-Info gehört zum KPI-Floor darunter. Klassen
 * bleiben definiert, falls Drittcode die Tones noch erwartet. */
.cockpit-beta-hero-floor-cmp {
  display: none;
}
.cockpit-beta-hero-floor-cmp--up { color: var(--green); }
.cockpit-beta-hero-floor-cmp--down { color: var(--red); }
.cockpit-beta-hero-floor-cmp--neutral { color: var(--text2); }
.cockpit-beta-hero-floor-cmp--empty { color: var(--text2); opacity: 0.7; }

@media (max-width: 900px) {
  .cockpit-beta-hero-floor {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .cockpit-beta-hero-floor-items {
    width: 100%;
    justify-content: space-between;
    gap: 14px;
  }
}

/* ── C. KPI-CARDS ROW (Round 34, 2026-05-28, Antigravity-Spec) ─────────
 * 4-Spalten-Floor mit feinen vertikalen Trennlinien (border-right zwischen
 * den Spalten, first/last kompensiert via :last-child Reset). Sitzt INNEN
 * in der Hero-Card unter der Summary-Leiste. Werte links, Sparkline rechts
 * auf einer Zeile. Bleibt beim Chart-Hover statisch (Focus Lens darüber). */
.cockpit-beta-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 18px;
}

.cockpit-beta-kpi-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 16px;
  border-right: 1px solid var(--border-alpha);
}

.cockpit-beta-kpi-card:last-child {
  border-right: 0;
}

.cockpit-beta-kpi-label {
  color: var(--text2);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cockpit-beta-kpi-value {
  color: var(--text);
  font-size: 17.5px;
  font-weight: 800;
  line-height: 1.15;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.cockpit-beta-kpi-cur {
  margin-left: 2px;
  color: var(--text2);
  font-size: 12px;
  font-weight: 600;
}

.cockpit-beta-kpi-row-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cockpit-beta-kpi-cmp {
  color: var(--text2);
  font-size: 10px;
  font-weight: 600;
}

.cockpit-beta-kpi-cmp--up { color: var(--green); }
.cockpit-beta-kpi-cmp--down { color: var(--red); }
.cockpit-beta-kpi-cmp--neutral { color: var(--text2); }
.cockpit-beta-kpi-cmp--empty { color: var(--text2); opacity: 0.7; }

.cockpit-beta-kpi-spark {
  width: 60px;
  height: 16px;
  flex-shrink: 0;
}

/* Brand-Tokens statt der Spec-HSLs — wir halten die Sparkline-Farben
 * konsistent mit den übrigen Cockpit-Components (Tooltip-Dots, Chart-
 * Linien). USt = --blue (vorher --accent gold, klare Unterscheidung von
 * Gewinn/Marge). Marge = --accent (taxtello-gold). */
.cockpit-beta-kpi-spark--income { color: var(--green); }
.cockpit-beta-kpi-spark--expense { color: var(--red); }
.cockpit-beta-kpi-spark--tax { color: var(--blue); }
.cockpit-beta-kpi-spark--margin { color: var(--accent); }

/* ── D. LETZTE BUCHUNGEN ──────────────────────────────────────────────── */
/* Phase M Round 3 (2026-05-27, Daniel-Spec): dunkles Card-Surface (matches
 * Right-Rail-Cards via --card2), kompakter tabularer 5-Spalten-Grid statt
 * Feed-Layout, kleinere Typo, zwei Status-Chips (Buchungs- + Beleg-Status). */
.cockpit-beta-bookings-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 10px;
  border: 1px solid var(--border-alpha);
  border-radius: var(--radius-lg);
  background: var(--card2);
  box-shadow: var(--shadow-md, none);
}

.cockpit-beta-bk-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-alpha);
}

.cockpit-beta-bk-title {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.005em;
}

.cockpit-beta-bk-sub {
  color: var(--text2);
  font-size: 11.5px;
}

.cockpit-beta-bk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Tabularer 4-Spalten-Grid: Datum | Body (Text + Kategorie) | Betrag |
 * Belegstatus. Phase M Round 7 (Daniel-Spec): Chip-Spalte zurück auf
 * feste Breite (124px) statt max-content — sonst rechnet JEDES <li>
 * sein eigenes Grid und die Betragsspalte verschiebt sich je nach
 * Chip-Breite ("Beleg fehlt" 70px vs "Beleg verknüpft" 115px).
 * justify-self: end pinnt den Chip weiter an die rechte Kante; der
 * leichte freie Raum links vom Chip "Beleg fehlt" ist akzeptiert für
 * stabile vertikale Beträge-Spalte. */
.cockpit-beta-bk-li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 96px 124px;
  align-items: center;
  column-gap: 12px;
  min-height: 46px;
  padding: 7px 4px;
  border-bottom: 1px solid var(--border-alpha);
  transition: background var(--tr-fast);
}

/* Mehr Atemraum genau da, wo der User es gemeldet hat: zwischen Datum
 * und Buchungstext (Spalte 1↔2) und zwischen Betrag und Belegstatus
 * (Spalte 3↔4). Plus: Chip rechts-ankern. */
.cockpit-beta-bk-date {
  padding-right: 6px;
}
.cockpit-beta-bk-amt {
  padding-right: 6px;
}
.cockpit-beta-bk-li > .cockpit-beta-bk-status {
  justify-self: end;
}

.cockpit-beta-bk-li:last-child {
  border-bottom: none;
}

.cockpit-beta-bk-li--clickable {
  cursor: pointer;
}

.cockpit-beta-bk-li--clickable:hover,
.cockpit-beta-bk-li--clickable:focus-visible {
  background: rgba(var(--surface-rgba-base), 0.025);
  outline: none;
}

.cockpit-beta-bk-li--clickable:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
}

.cockpit-beta-bk-date {
  color: var(--text2);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.cockpit-beta-bk-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.cockpit-beta-bk-text {
  color: var(--text);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
  /* Phase-PR (2026-07-06): Flex-Wrapper für Titel + Prüf-Icon. */
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Row-Titel ellipsisiert; Icon daneben wird nicht abgeschnitten.
 * Bewusst eigenständige Klasse (.bk-row-title), nicht .bk-title — letzteres
 * ist der Karten-Header „Letzte Buchungen" (h3, 15px). Kollision vermeiden. */
.cockpit-beta-bk-row-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dezenter Prüf-Status hinter dem Buchungsnamen. */
.cockpit-beta-bk-verified {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  color: var(--green);
  line-height: 1;
}

.cockpit-beta-bk-meta {
  color: var(--text2);
  font-size: 11px;
  line-height: 1.3;
}

/* Round 40: bk-meta-date + bk-meta-sep sind Duplikate des links stehenden
 * Datum-Spans (.bk-date). Auf Desktop bleibt das Datum in seiner eigenen
 * 52px-Spalte, also blenden wir die Duplikate hier aus. Auf Mobile (45n)
 * werden sie sichtbar und das .bk-date wird stattdessen unterdrückt. */
.cockpit-beta-bk-meta-date,
.cockpit-beta-bk-meta-sep {
  display: none;
}

.cockpit-beta-bk-amt {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.cockpit-beta-bk-amt.vp { color: var(--green); }
.cockpit-beta-bk-amt.vn { color: var(--red); }

/* Chip-Basis: kompakt, ruhige Farbflächen, monoline Icons via ::before.
 * Phase M Round 6 (Daniel-Spec): Padding reduziert (war 3px 8px) damit
 * Chip nur so breit wie Inhalt; Höhe bleibt klick-/lesbar. */
.cockpit-beta-bk-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: var(--fw-semibold);
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

/* Buchungs-Status (Offen/Geprüft) */
.cockpit-beta-bk-status--review-offen {
  background: var(--accent-soft);
  color: var(--accent);
}

.cockpit-beta-bk-status--review-geprueft {
  background: var(--green-soft);
  color: var(--green);
}

/* Beleg-Status (Verknüpft/Fehlt) */
.cockpit-beta-bk-status--beleg-verknuepft {
  background: var(--green-soft);
  color: var(--green);
}

.cockpit-beta-bk-status--beleg-fehlt {
  background: var(--accent-soft);
  color: var(--accent);
}

.cockpit-beta-bk-status-icon {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
}

.cockpit-beta-bk-empty {
  color: var(--text2);
  font-size: var(--fs-sm, 12px);
  margin: 0;
}

.cockpit-beta-bk-foot {
  display: flex;
  justify-content: flex-end;
}

.cockpit-beta-bk-link {
  background: none;
  border: none;
  color: var(--accent);
  font-size: var(--fs-sm, 12px);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-md, 8px);
}

.cockpit-beta-bk-link:hover,
.cockpit-beta-bk-link:focus-visible {
  background: var(--accent-bg-soft);
  outline: none;
}

/* Right-Rail (Section E) ist nach _45i-cockpit-beta-rail.css extrahiert,
 * weil _45h sonst >800 LOC reißt. Beide Files sind im manifest.json
 * direkt benachbart geordnet.                                          */

/* Mobile breakpoint. */
/* Round 40 (2026-05-28): Mobile-Override für die Booking-Card und Hero-
 * Floor-Items wurde nach _45n-cockpit-beta-mobile.css verschoben. Dort
 * ist alle Smartphone-Logik gebündelt. Round-38 (Hero-Floor 2x2) + Round-
 * 40 (Booking-List 2x2 + Datum in Meta) leben dort konsistent. */

/* Touch-Target-Floor (WCAG 2.5.5 / Apple HIG 44×44px) auf coarse Pointern.
 * App-weiter WebKit-Render-Sweep (iPhone 13, ergänzend zu Audit-Finding #7 /
 * PR #3721): legend-chip 72×27, bk-link 324×38. Beide sind <button> mit
 * padding → Hit-Area wächst über min-height + padding, Optik bleibt schlank. */
@media (pointer: coarse) {
  .cockpit-beta-legend-chip {
    min-height: 44px;
    padding-block: 11px;
  }
  .cockpit-beta-bk-link {
    min-height: 44px;
    padding-block: 11px;
  }
}

/* Cockpit-Beta SVG-Chart — Linien, Marker, Achsen, Heute/Zukunft-Markierung.
 * Aus _45h-cockpit-beta-populated.css extrahiert (800-LOC-Disziplin,
 * 2026-05-31). Lädt direkt nach _45h, damit die Cascade-Reihenfolge erhalten
 * bleibt. Mobile-Overrides liegen weiter in _45n-cockpit-beta-mobile.css. */

/* Chart canvas wrapper. */
.cockpit-beta-chart-wrap {
  position: relative;
  width: 100%;
  height: 220px;
  margin-bottom: 14px;
}

.cockpit-beta-chart-svg {
  width: 100%;
  height: 100%;
}

/* Fable-5-Designpass (2026-07-10): Gridlines gedämpft (0.5 statt 1), damit
 * Gold als einzige "harte" Datenfarbe im Plot wahrgenommen wird. */
.cockpit-beta-chart-grid-line {
  stroke: var(--border-alpha);
  stroke-width: 1;
  opacity: 0.5;
}

.cockpit-beta-chart-tick-y,
.cockpit-beta-chart-tick-x {
  fill: var(--text2);
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
}

.cockpit-beta-chart-line {
  stroke-width: 2;
  fill: none;
}

.cockpit-beta-chart-line--profit {
  stroke: var(--accent);
  stroke-width: 2.8;
}

/* Plan-Challenge-Fix (2026-07-10, docs/plans/2026-07-10-cockpit-chart-
 * redesign-plan.md Option A): Einnahmen/Ausgaben-Kontrast repariert.
 * Daniel-Feedback: "der grüne Balken macht keinen Sinn, da er hinter dem
 * gelben liegt und von Rot sieht man gar nichts" — die vorherige 0.3-
 * Opacity/1.25px-Degradierung (Fable-5-Designpass) hat das Problem
 * überkorrigiert. Sichtbarerer Kontrast: stroke-width 1.5, opacity 0.55.
 *
 * 2026-07-10 (Daniel-Entscheidung, Nachfrage): Ausgaben zwischenzeitlich
 * auf Grauton statt Rot umgestellt (GLM-Challenge-Begründung: WCAG-
 * Farbenblindheit + Verwechslungsgefahr mit Gold) — das war eine
 * autonome Design-Entscheidung ohne explizite Freigabe. Auf Nachfrage
 * ausdrücklich zurück zu Rot gewünscht (vertraute "Ausgaben = Rot"-
 * Assoziation, außerdem inkonsistent zur KPI-Floor-Sparkline
 * .cockpit-beta-kpi-spark--expense, die die ganze Zeit schon Rot war).
 * Derselbe Kontrast-Fix (1.5px/0.55 Opacity) bleibt, nur die Farbe ändert
 * sich zurück auf --red. */
.cockpit-beta-chart-line--income {
  stroke: var(--green);
  stroke-width: 1.5;
  opacity: 0.55;
}

.cockpit-beta-chart-line--expense {
  stroke: var(--red);
  stroke-width: 1.5;
  opacity: 0.55;
}

/* Fable-5-Designpass (2026-07-10): Area-Fill unter der Gewinnlinie gibt der
 * Hero-Serie Körper. Gradient-Stops steil dosiert (0.22 → 0.05 bei 60% →
 * 0), damit die Fläche an der Linie "klebt" statt den Plot einzufärben. */
.cockpit-beta-chart-area {
  pointer-events: none;
}

.cockpit-beta-chart-area-stop-top {
  stop-color: var(--accent);
  stop-opacity: 0.22;
}

.cockpit-beta-chart-area-stop-mid {
  stop-color: var(--accent);
  stop-opacity: 0.05;
}

.cockpit-beta-chart-area-stop-end {
  stop-color: var(--accent);
  stop-opacity: 0;
}

/* Fable-5-Designpass (2026-07-10): Vertex-Dots machen das monotonie-
 * erhaltende Steffen-Spline-Zickzack als diskrete Monatswerte lesbar statt
 * als wacklige Kurve. Surface-Ring hebt sie von der Linie ab. */
.cockpit-beta-chart-vertex-dot {
  fill: var(--surface-sidebar);
  stroke: var(--accent);
  stroke-width: 1.5;
  pointer-events: none;
}

/* Phase M Round 15 (2026-05-27, Daniel-Spec): Forecast-Linien gestrichelt
 * + gedimmt. Wird zusätzlich zur Tone-Klasse (profit/income/expense)
 * vergeben — Stroke-Color bleibt korrekt. Income/Expense haben bereits
 * opacity 0.55; .projected reduziert weiter auf ~30% des Basiswerts via
 * Multiplikation (opacity stacked CSS so nicht, deshalb explicit). */
.cockpit-beta-chart-line--projected {
  stroke-dasharray: 5 4;
  opacity: 0.35;
}
.cockpit-beta-chart-line--income.cockpit-beta-chart-line--projected,
.cockpit-beta-chart-line--expense.cockpit-beta-chart-line--projected {
  opacity: 0.22;
}

/* Fable-5-Designpass (2026-07-10): HEUTE degradiert auf --text2 statt
 * --accent — Gold bleibt exklusiv Gewinnfarbe, die Future-Band-Fläche
 * kommuniziert die Grenze ohnehin schon mit. */
.cockpit-beta-chart-today {
  stroke: var(--text2);
  stroke-width: 1;
  opacity: 0.4;
}

.cockpit-beta-chart-today-lbl {
  fill: var(--text2);
  font-size: 9px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
}

.cockpit-beta-chart-future-band {
  fill: var(--border-alpha);
  opacity: 0.35;
}

/* 2026-05-31 (Daniel-Spec): "Nur gebucht"-Modus — Ist-Linien enden bei
 * "Heute". Endpunkt-Marker am letzten gebuchten Punkt + leiser Hinweis im
 * gedimmten Zukunftsband. Farben aus denselben Tokens wie die Linien, damit
 * der Endpunkt visuell zur jeweiligen Reihe gehört. */
.cockpit-beta-chart-endpoint-dot {
  stroke: var(--surface-sidebar);
  stroke-width: 1.5;
}
.cockpit-beta-chart-endpoint-dot--profit  { fill: var(--accent); }
.cockpit-beta-chart-endpoint-dot--income  { fill: var(--green); }
/* Zurück zu Rot (2026-07-10, Daniel-Entscheidung) — folgt --line--expense. */
.cockpit-beta-chart-endpoint-dot--expense { fill: var(--red); }

.cockpit-beta-chart-future-hint {
  fill: var(--text2);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.3px;
  opacity: 0.6;
}

.cockpit-beta-chart-peak-dot {
  fill: var(--accent);
  stroke: var(--surface-sidebar);
  stroke-width: 2;
  pointer-events: none;
}

/* Plan-Challenge-Fix (2026-07-10, Runde 2): Leader-Line verbindet ein bei
 * HEUTE-Kollision seitlich verschobenes PEAK-Label sichtbar mit dem
 * tatsächlichen Peak-Punkt — verhindert, dass das Label über einem
 * anderen (niedrigeren) Monat zu schweben scheint. */
.cockpit-beta-chart-peak-leader {
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 2 2;
  opacity: 0.55;
  pointer-events: none;
}

/* Plan-Challenge-Runde-1/2/4-Fix (2026-07-10): PEAK-Label zurück, mit
 * themefähigem Halo (--surface-sidebar-Token statt hartkodiertem Hex) —
 * verhindert, dass das goldene Label mit der ebenfalls goldenen Area-Fill
 * verschmilzt, in Dark- UND Light-Mode gleichermaßen. */
.cockpit-beta-chart-peak-halo {
  fill: var(--surface-sidebar);
  opacity: 0.92;
  pointer-events: none;
}

.cockpit-beta-chart-peak-lbl {
  fill: var(--accent);
  font-size: 9.5px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  pointer-events: none;
}

/* ── Responsive Monatsnamen (Jahresansicht) ────────────────────────────────
 * Desktop ≥ 900px: ausgeschriebener Monatsname (.tick-x-long sichtbar,
 * .tick-x-short versteckt). Mobile: Kurzform. Wechsel über den tspan-Ansatz
 * weil SVG-text kein CSS content-Property kennt. */
.cockpit-beta-chart-tick-x-long { display: inline; }
.cockpit-beta-chart-tick-x-short { display: none; }

@media (max-width: 900px) {
  .cockpit-beta-chart-tick-x-long { display: none; }
  .cockpit-beta-chart-tick-x-short { display: inline; }
}

/* ════════════════════════════════════════════════════════════════════════
 * Cockpit Phase 1.5b — Right-Rail (DnD-Cards, 2026-05-26)
 *
 * Extrahiert aus _45h-cockpit-beta-populated.css für 800-LOC-Disziplin.
 * Inhalt: 4 Sidebar-Cards (Duty / Health / Belege / Tips) inkl.
 *         Drag-Handle + Dragging-State + Placeholder + Save-Bar-Klassen.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── E. RIGHT-RAIL CARDS ──────────────────────────────────────────────── */
/* Phase M Round 10 (2026-05-27, Daniel-Spec): vertikaler Rhythmus zwischen
 * Rail-Cards (Pflichten / Steuergesundheit / Belegstatus / Empfehlungen)
 * synchron mit Hero→Buchungsliste — beide nutzen --cockpit-beta-pop-gap
 * (24px in Round 10). Token wird via Inheritance vom Parent
 * .cockpit-beta-populated geliefert. */
.cockpit-beta-rail {
  display: flex;
  flex-direction: column;
  gap: var(--cockpit-beta-pop-gap, 24px);
  min-width: 0;
}

.cockpit-beta-rail-live {
  /* Visually-hidden but screen-reader-readable. */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Phase K Round 2 (2026-05-27): Rail-Card-Background dezenter/dunkler.
 * Vorher: var(--surface-sidebar) (#262e50 dark) — wirkte zu violett-blau
 * gegen den --bg (#0c0f1a). Daniel-Befund: "less violet/blue, more dark
 * navy". Wechsel auf var(--card2) (#1a2032) → neutraler dunkler Navy-Ton,
 * näher am Antigravity Sidebar-Layer. Light-Mode behält weiss
 * (var(--card)) für klare Card-Trennung gegen den hellen Shell-BG. */
.cockpit-beta-rail-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--border-alpha);
  border-radius: var(--radius-lg);
  background: var(--card2);
  box-shadow: var(--shadow-lg);
  transition: opacity 0.18s, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color var(--tr-drawer), box-shadow var(--tr-drawer);
  /* Phase M Round 32c (2026-05-27, Daniel-Spec): default pan-y damit die
   * Seite über der Card vertikal scrollbar bleibt; während aktivem Drag
   * wechselt die data-dnd-state-Regel unten auf none, sonst kappt iOS
   * Safari die pointermove-Sequenz. */
  touch-action: pan-y;
}

/* .cockpit-beta-rail-card sets an explicit display:flex (author origin), which
 * beats the UA [hidden]{display:none} rule regardless of specificity. The
 * mouse drag pipeline hides the dragged card via card.hidden=true while it
 * floats; without this author-origin override the card stays visible, keeps
 * its layout box, and shifts the drop-target midpoints so dragging downward
 * becomes impossible. (Regression from 2d9c453b2 which swapped
 * card.style.display='none' for card.hidden=true.) */
.cockpit-beta-rail-card[hidden] {
  display: none !important;
}

body.light .cockpit-beta-rail-card {
  background: var(--card);
}

.cockpit-beta-rail-card--dragging {
  opacity: 0.4;
  transform: scale(0.98);
  border-color: var(--accent);
}

.cockpit-beta-rail-card[data-dnd-state="grabbed"] {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  touch-action: none;
}

.cockpit-beta-rail-placeholder {
  border: 1px dashed var(--accent);
  border-radius: var(--radius-lg);
  background: var(--accent-bg-soft);
}

.cockpit-beta-rail-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* Phase M Round 32b (2026-05-27, Daniel-Spec): iOS Safari startet bei
   * Long-Press auf Text das Selection-/Kontext-Gesture (Screenshot: blaue
   * Selection-Handles + "Kopieren / Auswahl suchen"-Bubble). user-select
   * und touch-callout im Card-Head komplett aus, damit der Touch-DnD vom
   * pointerdown nicht überstimmt wird. Body bleibt selektierbar. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.cockpit-beta-rail-card-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Phase M Round 5 (2026-05-27, Daniel-Spec): Rail-Card-Titel etwas
 * stärker (15px) für bessere Lesbarkeit; vorher fs-base ≈ 14px. */
.cockpit-beta-rail-card-title {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.005em;
}

.cockpit-beta-drag-handle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 2px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-md, 8px);
  color: var(--text2);
  cursor: grab;
  opacity: 0.4;
  transition: opacity var(--tr-fast), border-color var(--tr-fast), background var(--tr-fast);
  /* Phase M Round 32b (2026-05-27, Daniel-Spec): touch-action und
   * touch-callout direkt am Handle — vorher wurden sie inline via JS
   * gesetzt, was nach dem ersten Mount nicht für nachträglich gerenderte
   * Cards gilt. iOS-Kontext-Menü ("Kopieren / Nachschlagen") wird damit
   * verlässlich unterdrückt; touch-action: none verhindert dass iOS
   * Safari das pointermove-Sequenz beim vertikalen Wisch abreißt. */
  touch-action: none;
  -webkit-touch-callout: none;
}

.cockpit-beta-drag-handle:hover,
.cockpit-beta-drag-handle:focus-visible {
  opacity: 1;
  border-color: var(--border-alpha);
  background: var(--accent-bg-soft);
  outline: none;
}

.cockpit-beta-drag-handle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

.cockpit-beta-drag-handle:active {
  cursor: grabbing;
}

/* Phase M Round 5 (2026-05-27, Daniel-Spec): produktreifer CSS-Tooltip
 * statt browser-default. Statisches Label "Karte verschieben" gilt für
 * alle Rail-Drag-Handles (Pflichten / Steuergesundheit / Belegstatus /
 * Empfehlungen). Pseudo-Element vermeidet zusätzliches DOM-Markup; no-
 * pointer-events damit der Tooltip nicht den Drag-Klick fängt.
 *
 * Round 32 (2026-05-27, Daniel-Spec): Tooltip nur in @media (hover: hover)
 * rendern. Auf Touch-Devices bleibt der :hover-State nach dem Tap kleben
 * und der Tooltip läuft mit `left: 50%` aus der schmalen Card-Spalte
 * heraus (User-Screenshot: "Karte verschieben" links angeschnitten). Da
 * der Tooltip auf Touch keinen Mehrwert hat (kein Hover-Discovery),
 * unterdrücken wir ihn dort komplett. Keyboard-A11y bleibt erhalten,
 * weil :focus-visible auch in hover-fähigen Browsern feuert. */
@media (hover: hover) {
  .cockpit-beta-drag-handle::after {
    content: "Karte verschieben";
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(-2px);
    padding: 4px 9px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid var(--border-alpha);
    border-radius: 5px;
    /* Round 33 (2026-05-29, Daniel-Spec): Tooltip-Pill hat in beiden Themes
     * denselben dunklen Hintergrund (rgba(15,23,42,.95)). var(--text) ist im
     * Lightmode aber dunkel (#0f172a == rgb(15,23,42)) → dunkel auf dunkel,
     * "Karte verschieben" war beim Hover praktisch unlesbar. Da der
     * Hintergrund theme-unabhängig dunkel ist, fixe Hell-auf-Dunkel-Farbe
     * (= Dark-Theme-Textton rgb(232,234,242)), kein var(--text). */
    color: rgb(232, 234, 242);
    font-size: 11px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.01em;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease-out, transform 0.12s ease-out;
    z-index: 20;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  }

  .cockpit-beta-drag-handle:hover::after,
  .cockpit-beta-drag-handle:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  /* Während Drag selbst soll der Tooltip nicht stören. */
  .cockpit-beta-drag-handle:active::after,
  .cockpit-beta-rail-card.is-dragging .cockpit-beta-drag-handle::after {
    opacity: 0;
  }
}

.cockpit-beta-rail-badge {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.cockpit-beta-rail-badge--warn {
  background: var(--red-soft);
  color: var(--red);
}

.cockpit-beta-rail-badge--ok {
  background: var(--green-soft);
  color: var(--green);
}

.cockpit-beta-rail-badge--neutral {
  background: var(--surface-bg, transparent);
  color: var(--text2);
  border: 1px solid var(--border-alpha);
}

.cockpit-beta-rail-badge--tip {
  background: var(--accent-soft);
  color: var(--accent);
}

.cockpit-beta-rail-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cockpit-beta-rail-card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cockpit-beta-rail-cta {
  flex: 1 1 auto;
  padding: 8px 14px;
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md, 8px);
  font-size: var(--fs-sm, 12px);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

.cockpit-beta-rail-cta:hover,
.cockpit-beta-rail-cta:focus-visible {
  background: var(--accent3);
  outline: none;
}

.cockpit-beta-rail-cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cockpit-beta-rail-link {
  background: none;
  border: none;
  color: var(--accent);
  font-size: var(--fs-sm, 12px);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--radius-md, 8px);
}

.cockpit-beta-rail-link:hover,
.cockpit-beta-rail-link:focus-visible {
  background: var(--accent-bg-soft);
}

/* A11y FM3-c: :focus-visible war mit :hover gebündelt und löschte via
   outline:none den sichtbaren Keyboard-Fokus. Eigener sichtbarer Ring. */
.cockpit-beta-rail-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-focus-ring);
}

/* Duty-card details. */
.cockpit-beta-duty-alert {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  background: var(--accent-bg-soft);
  border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
}

/* Phase M Round 5 (2026-05-27, Daniel-Spec): bessere Lesbarkeit für
 * primäre Rail-Texte (13.5px) und Hilfstexte (12.5px). */
.cockpit-beta-duty-title {
  color: var(--text);
  font-size: 13.5px;
  font-weight: var(--fw-semibold);
}

.cockpit-beta-duty-desc {
  margin: 0;
  color: var(--text2);
  font-size: 12.5px;
  line-height: 1.4;
}

.cockpit-beta-duty-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cockpit-beta-duty-li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text2);
  font-size: 12.5px;
}

.cockpit-beta-duty-bullet {
  font-weight: var(--fw-bold);
}

.cockpit-beta-duty-li--warn .cockpit-beta-duty-bullet { color: var(--red); }
.cockpit-beta-duty-li--ok .cockpit-beta-duty-bullet { color: var(--green); }

/* Health-card. */
.cockpit-beta-health-split {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px;
  align-items: center;
}

.cockpit-beta-health-ring {
  width: 80px;
  height: 80px;
}

.cockpit-beta-health-ring-svg {
  width: 100%;
  height: 100%;
}

.cockpit-beta-health-ring-bg {
  fill: none;
  stroke: var(--border-alpha);
  stroke-width: 3;
}

.cockpit-beta-health-ring-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
}

.cockpit-beta-health-ring-num {
  fill: var(--text);
  font-size: 9px;
  font-weight: var(--fw-bold);
  text-anchor: middle;
}

/* Score-Mismatch-Fix (2026-05-31): Ringfarbe folgt der Ampel aus
   calcSteuergesundheit() (gruen/gelb/rot), statt fest goldfarben zu sein.
   Ring-Stroke + Score-Zahl teilen denselben Ton wie die Detailseite. */
.cockpit-beta-health-ring--ok .cockpit-beta-health-ring-fill { stroke: var(--green); }
.cockpit-beta-health-ring--warn .cockpit-beta-health-ring-fill { stroke: var(--accent); }
.cockpit-beta-health-ring--down .cockpit-beta-health-ring-fill { stroke: var(--red); }
.cockpit-beta-health-ring--ok .cockpit-beta-health-ring-num { fill: var(--green); }
.cockpit-beta-health-ring--warn .cockpit-beta-health-ring-num { fill: var(--accent); }
.cockpit-beta-health-ring--down .cockpit-beta-health-ring-num { fill: var(--red); }

.cockpit-beta-health-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cockpit-beta-bar-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cockpit-beta-bar-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
}

.cockpit-beta-bar-lbl { color: var(--text2); }
.cockpit-beta-bar-val { color: var(--text); }

.cockpit-beta-bar-track {
  width: 100%;
  height: 6px;
  background: var(--border-alpha);
  overflow: hidden;
}

.cockpit-beta-bar-fill {
  height: 100%;
  width: var(--cockpit-beta-bar-pct, 0%);
  transition: width 0.4s ease;
}

.cockpit-beta-bar-fill--ok { background: var(--green); }
.cockpit-beta-bar-fill--warn { background: var(--accent); }
.cockpit-beta-bar-fill--down { background: var(--red); }

.cockpit-beta-health-hint {
  margin: 0;
  color: var(--text2);
  font-size: 12.5px;
  line-height: 1.4;
}

/* Belege-card. */
.cockpit-beta-belege-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.cockpit-beta-belege-lbl {
  color: var(--text2);
  font-size: 13px;
}

.cockpit-beta-belege-val {
  color: var(--text);
  font-size: 14px;
  font-weight: var(--fw-semibold);
}

.cockpit-beta-belege-dim {
  color: var(--text2);
  font-weight: var(--fw-regular);
}

.cockpit-beta-belege-track {
  width: 100%;
  height: 8px;
  background: var(--border-alpha);
  border-radius: 4px;
  overflow: hidden;
}

.cockpit-beta-belege-fill {
  height: 100%;
  width: var(--cockpit-beta-belege-pct, 0%);
  background: var(--green);
  transition: width 0.4s ease;
  border-radius: 4px;
}

.cockpit-beta-belege-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--text2);
}

.cockpit-beta-belege-sw {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-radius: 2px;
  vertical-align: middle;
}

.cockpit-beta-belege-sw--ok { background: var(--green); }
.cockpit-beta-belege-sw--off { background: var(--border-alpha); }

/* Tips-card. */
.cockpit-beta-tips-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cockpit-beta-tip-item {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  align-items: start;
}

/* Phase M Round 5 (2026-05-27, Daniel-Spec): 01/02 als Badge-Boxen
 * statt nur Goldtext. Dunkler Hintergrund + feiner goldener Border +
 * goldene Zahl, fast quadratisch, tabular für saubere Stellenwertigkeit. */
.cockpit-beta-tip-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 5px;
  background: rgba(var(--accent-rgba-base), 0.06);
  border: 1px solid rgba(var(--accent-rgba-base), 0.4);
  border-radius: 5px;
  color: var(--accent);
  font-size: 12px;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  line-height: 1;
}

/* Phase M Round 5 (2026-05-27, Daniel-Spec): Lesbarkeit der Tipp-Texte
 * leicht erhöht — Titel 13.5px (war fs-sm ≈12px), Beschreibung 12.5px
 * (war fs-xs ≈11px). Nicht riesig, nur näher an Antigravity. */
.cockpit-beta-tip-content strong {
  display: block;
  color: var(--text);
  font-size: 13.5px;
  font-weight: var(--fw-semibold);
  margin-bottom: 3px;
  line-height: 1.3;
}

.cockpit-beta-tip-content p {
  margin: 0;
  color: var(--text2);
  font-size: 12.5px;
  line-height: 1.45;
}

/* Reduced-motion: skip FLIP-animation. */
@media (prefers-reduced-motion: reduce) {
  .cockpit-beta-rail-card,
  .cockpit-beta-bar-fill,
  .cockpit-beta-belege-fill {
    transition: none !important;
  }
}

/* ── F. DRAG-HINT (Phase M Round 16 — inline statt floating) ──────────── */
/* Daniel-Spec: einmaliger Onboarding-Hinweis für Drag&Drop der Rail-Cards.
 * Round 14 hatte position:fixed (floating bottom-right) — wirkte aufdring-
 * lich und überlagerte Cards beim Scrollen. Round 16: Inline-Element im
 * normalen Rail-Flex-Flow, sitzt unter der letzten Card (Empfehlungen),
 * teilt sich den 24px column-gap der Rail. Keine Card wird überlagert,
 * obere Kante der Rail bleibt bündig mit Hero-Card links. Mit close-X
 * dauerhaft dismissable, auto-dismiss nach erstem gespeicherten Drag
 * (CustomEvent 'cockpit-beta-drag-saved' aus dnd.js). */
.cockpit-beta-drag-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(var(--surface-rgba-base), 0.025);
  border: 1px solid rgba(var(--surface-rgba-base), 0.05);
  border-radius: 8px;
  color: var(--text2);
  font-size: 11.5px;
  line-height: 1.35;
  animation: cockpit-beta-drag-hint-in 0.2s ease-out;
}

@keyframes cockpit-beta-drag-hint-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cockpit-beta-drag-hint-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--accent);
  opacity: 0.65;
  flex-shrink: 0;
}

.cockpit-beta-drag-hint-text {
  flex: 1;
  min-width: 0;
}

.cockpit-beta-drag-hint-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text3);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--tr-fast), color var(--tr-fast);
}

.cockpit-beta-drag-hint-close:hover,
.cockpit-beta-drag-hint-close:focus-visible {
  background: rgba(var(--surface-rgba-base), 0.06);
  color: var(--text);
  outline: none;
}

/* Phase M Round 32b (2026-05-27, Daniel-Spec): Touch-Geräte bekommen
 * ein 40×40-Drag-Handle (Apple-HIG-Mindestgröße). iOS Safari hat im
 * Screenshot trotz der 22×22-Box den Treffer auf den daneben liegenden
 * Card-Title abgesetzt und Long-Press-Select gestartet. Größeres Target
 * + zarte Opacity-Anhebung damit das Handle als interaktiv erkennbar
 * bleibt ohne dass es Desktop visuell verändert (gated auf hover:none). */
@media (hover: none) {
  .cockpit-beta-drag-handle {
    width: 40px;
    height: 40px;
    padding: 6px;
    opacity: 0.55;
  }
}

/* Phase M Round 32e (2026-05-27, Daniel-Spec): während eines aktiven
 * Touch-Drags blockiert die Body-Klasse globale Text-Selection +
 * Touch-Callout. Vorher hat iOS Safari die Welcome-Deck-Whitelist-Items
 * ("Belegstatus", "Verlauf & Vergleiche") beim Hochwischen markiert
 * (User-Screenshot mit blauen Selection-Handles am Welcome-Deck-Text).
 * Body-Klasse wird in cockpit-beta-dnd.js _startDrag / onEnd gesetzt. */
body.cockpit-dnd-active,
body.cockpit-dnd-active * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body.light .cockpit-beta-drag-hint {
  background: rgba(var(--surface-rgba-base), 0.03);
  border-color: rgba(var(--surface-rgba-base), 0.08);
}

/* Touch-Target-Floor (WCAG 2.5.5 / Apple HIG 44×44px) auf coarse Pointern.
 * App-weiter WebKit-Render-Sweep (iPhone 13, ergänzend zu Audit-Finding #7 /
 * PR #3721): die Cockpit-Beta-Rail-Controls maßen drag-handle 22×22,
 * drag-hint-close 20×20, rail-link 324×29, rail-cta 324×31. Reine Icon-
 * Buttons (drag-handle, drag-hint-close) bekommen feste 44×44; die Text-
 * Links/CTAs wachsen nur in der Hit-Area via min-height + padding, damit
 * die kompakte Optik erhalten bleibt.
 *
 * drag-handle Sonderfall: Auf schmalen Phones (<=640px) hält
 * _45n-cockpit-beta-mobile.css das Handle bewusst bei 22×22 (Round 41) —
 * dort ist das Reordering über einen 220ms-Long-Press auf der GANZEN Card
 * verfügbar (cockpit-beta-dnd.js:279), also greift die WCAG-2.5.5-Ausnahme
 * "äquivalente Bedienung". Dieser coarse-Block hebt das Handle daher nur
 * dort, wo der _45n-Mobile-Block NICHT greift (Tablet-coarse >640px). */
@media (pointer: coarse) {
  .cockpit-beta-drag-handle {
    width: 44px;
    height: 44px;
  }
  .cockpit-beta-drag-hint-close {
    width: 44px;
    height: 44px;
  }
  .cockpit-beta-rail-link {
    min-height: 44px;
    padding-block: 11px;
  }
  .cockpit-beta-rail-cta {
    min-height: 44px;
    padding-block: 13px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Cockpit-Beta — 4-Step Onboarding Grid (Phase F, 2026-05-27)
   ──────────────────────────────────────────────────────────────────────
   1:1 Port der Antigravity-Spec (Daniel 2026-05-27) für den Empty-State
   im neuen Cockpit-Beta-Dashboard.

   Konsumiert von: public/js/modules/cockpit-beta-onboarding.js
   Selektoren matchen den Daniel-Spec-Sektion §4 (.onboarding-step,
   .step-num-icon, .step-details, .step-bottom-meta, .onb-collapsed-pill).

   Theming:
     Dark  — bestehende Tokens: --card, --border-alpha, --text, --text2,
             --text3, --accent, --accent-glow-strong, --accent-border-soft
     Light — selbe Tokens, Light-Werte via body.light Cascade.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Card-Wrapper (Phase I 2026-05-27 — Antigravity-Spec):
   Reduzierter Padding (24px statt 24px/28px), Border-Radius
   var(--radius-md) (14px) statt 20px, Title 16px statt 22px,
   plus optionaler Box-Shadow für Premium-Look. */
/* Phase M Round 24 (2026-05-27, Daniel-Spec): outer Einrichtungshilfe
 * Card-Surface auf var(--card2) angeglichen (= gleiche Surface-Familie
 * wie Empty-Hero, Was-danach-Preview, Rail-Cards). Vorher nur 2% white-
 * tint → erschien fast transparent, wirkte abweichend dunkler als
 * andere Cards. Padding leicht erhöht (24px) für mehr Atem (User-
 * Befund: "Step-Cards kleben"). */
.onboarding-card {
  display: flex;
  flex-direction: column;
  background: var(--card2);
  border: 1px solid var(--border-alpha);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  gap: 18px;
  box-shadow: 0 4px 16px rgba(11, 14, 20, 0.08);
}

.onboarding-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border-alpha);
  padding-bottom: 14px;
}

.onboarding-title {
  /* Phase I 2026-05-27: 22px → 16px (Antigravity-Spec). Größere
     Titel verzerrten visuell vs Rest des Dashboards. */
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}

.onboarding-card-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.onboarding-link {
  background: transparent;
  border: 0;
  padding: 4px 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  cursor: pointer;
  border-radius: 4px;
  transition: color var(--tr-fast),
              background var(--tr-fast);
  letter-spacing: -0.005em;
}
.onboarding-link:hover {
  color: var(--text);
  background: rgba(var(--surface-rgba-base), 0.04);
}
.onboarding-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Progress-Bar (Phase I 2026-05-27, Antigravity-Spec):
   Visueller Fortschritts-Indikator + Text. */
.onboarding-progress-line {
  display: flex;
  align-items: center;
  gap: 12px;
}
.onboarding-progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(var(--surface-rgba-base), 0.05);
  overflow: hidden;
}
.onboarding-progress-fill {
  /* Phase K Round 2 (2026-05-27): CSP-Hardening. Width nicht mehr als
     inline style="width:X%", sondern via --onb-pct CSS-Custom-Prop, das
     post-render aus data-onb-pct gesetzt wird (CockpitBetaOnboarding
     _scheduleMount → el.style.setProperty). */
  width: var(--onb-pct, 0%);
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, hsl(42, 79%, 67%) 100%);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.onboarding-progress-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  white-space: nowrap;
  letter-spacing: 0.005em;
}

/* ── 4-Step Grid (2×2-Leiter) ────────────────────────────────────────────
   Fixe 2 Spalten statt auto-fit: Der Cockpit-Inhaltsbereich (links neben dem
   Right-Rail) ist je nach Breite ~560–910px breit; mit auto-fit/minmax(200px)
   passten dort genau 3 Spalten → die 4. von 4 Setup-Karten verwaiste in einer
   eigenen Zeile (3+1). Die Containerbreite läuft wegen des Right-Rails NICHT
   monoton mit dem Viewport, daher ist ein viewport-basierter 4-Spalten-Break
   unzuverlässig (kann erneut auf 3 fallen). 2×2 ist immer balanciert. */
.onboarding-steps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: 100%;
}

/* ── Einzelne Step-Card ──────────────────────────────────────────────── */
.onboarding-step {
  background: rgba(var(--surface-rgba-base), 0.015);
  border: 1px solid var(--border-alpha);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  align-items: stretch;
  gap: 12px;
  transition: background var(--tr-fast),
              border-color var(--tr-fast),
              transform var(--tr-fast);
}
body.light .onboarding-step {
  background: rgba(15, 23, 42, 0.01);
}

.onboarding-step:hover {
  background: rgba(var(--surface-rgba-base), 0.03);
}
body.light .onboarding-step:hover {
  background: rgba(15, 23, 42, 0.02);
}

/* Aktiver (nächster zu bearbeitender) Schritt */
.onboarding-step.active {
  border-color: rgba(232, 184, 75, 0.35);
  background: rgba(232, 184, 75, 0.03);
}

/* Erledigter Schritt */
.onboarding-step.is-done {
  border-color: rgba(52, 211, 153, 0.2);
  background: rgba(52, 211, 153, 0.02);
  opacity: 0.85;
}

/* ── Round Step-Icon-Kreis ───────────────────────────────────────────── */
.step-num-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(var(--surface-rgba-base), 0.06);
  color: var(--text3);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
body.light .step-num-icon {
  background: rgba(15, 23, 42, 0.05);
}

.onboarding-step.active .step-num-icon {
  background: var(--accent);
  color: var(--accent-ink);
}

.onboarding-step.is-done .step-num-icon {
  background: var(--green);
  color: var(--accent-ink);
}

/* ── Details-Spalte (Title + Body + Status+CTA Bottom-Group) ─────────── */
.step-details {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
  min-width: 0;
}

.step-details strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.step-details p {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.55;
  margin: 2px 0 0 0;
  font-weight: 400;
}

.step-status {
  font-size: 10px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0;
}
.step-status.status-active {
  color: var(--accent);
}
.step-status.status-done {
  color: var(--green);
}

/* Bottom-Group: drückt Status+CTA ans Karten-Ende, garantiert dass
   alle Cards die Buttons auf derselben horizontalen Linie haben. */
.step-bottom-meta {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.onboarding-step-cta {
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--border-alpha);
  border-radius: 10px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
  cursor: pointer;
  transition: background var(--tr-fast),
              border-color var(--tr-fast),
              color var(--tr-fast);
}
.onboarding-step-cta:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(232, 184, 75, 0.05);
}
.onboarding-step-cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.onboarding-step.active .onboarding-step-cta {
  border-color: var(--accent);
  color: var(--accent);
}
.onboarding-step.is-done .onboarding-step-cta {
  color: var(--text3);
}

/* ── Collapsed Pill (gold) ───────────────────────────────────────────── */
.onboarding-pill-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.onb-collapsed-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  transition: transform var(--tr-fast),
              background var(--tr-fast),
              border-color var(--tr-fast);
}
.onb-collapsed-pill:hover {
  background: var(--accent3);
  border-color: var(--accent3);
  transform: translateY(-1px);
}
.onb-collapsed-pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.onb-pill-label {
  letter-spacing: -0.005em;
}

.onb-pill-prog {
  background: rgba(11, 14, 20, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ── Responsive: Mobile stackt vertikal ──────────────────────────────── */
@media (max-width: 768px) {
  .onboarding-card {
    padding: 18px 16px;
  }
  .onboarding-title {
    font-size: 18px;
  }
  .onboarding-card-head {
    flex-wrap: wrap;
  }
  .onboarding-card-actions {
    gap: 12px;
  }
  .onboarding-steps-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Reduced-Motion */
@media (prefers-reduced-motion: reduce) {
  .onboarding-step,
  .onb-collapsed-pill,
  .onboarding-step-cta,
  .onboarding-link {
    transition: none;
  }
  .onb-collapsed-pill:hover {
    transform: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Cockpit-Beta — Empty-State Layout (Phase I, 2026-05-27)
   ──────────────────────────────────────────────────────────────────────
   1:1 Port der Antigravity-Empty-State-Spec (Daniel 2026-05-27):
   - Compact Global Cockpit-Topbar (Eyebrow + Status + State-Switcher +
     Period-Toggle + Year-Nav)
   - 2-Column Layout (geteilt mit Populated-State Layout class)
   - Side-by-Side Welcome-Deck (Hero-Box mit Mesh + Whitelist)

   Konsumiert von: public/js/dashboard-cockpit-beta.js
   ── _cockpitBetaEmptyTopbar() → .cockpit-beta-topbar
   ── _cockpitBetaWelcomeDeck() → .onboarding-welcome-deck
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. COMPACT TOPBAR ─────────────────────────────────────────────────── */

/* Phase K Round 1 (2026-05-27): Topbar als echte Card statt nur Textzeile.
   Daniel-Befund: "Topbar ist noch zu plain — wirkt wie Text + Controls
   mit einer Linie darunter. In Anti-Gravity ist es eine echte kompakte
   Bar/Card mit dunklem BG, Border, Border-Radius, Padding."

   Phase K Round 2 (2026-05-27): Feiner skalieren. Padding reduziert
   (10px 16px statt 12px 18px), border-radius 10px statt 12px,
   margin-bottom 14px statt 18px → kompaktere Bar. */
/* Phase M Round 8 (2026-05-27, Daniel-Spec): Topbar-Border deutlich
 * subtiler — von --border-alpha (8% white) auf 5% surface-rgba-base.
 * Token-Adaptiv: 5% white in Dark, 5% black in Light. Shadow leicht
 * abgedunkelt, damit die Card weiterhin als eigene Ebene erkennbar
 * bleibt, ohne harten Strich. */
.cockpit-beta-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 16px;
  margin-top: 8px;
  margin-bottom: 14px;
  background: var(--card);
  border: 1px solid rgba(var(--surface-rgba-base), 0.05);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(11, 14, 20, 0.06);
  flex-wrap: wrap;
}

.cockpit-beta-topbar .topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.cockpit-beta-topbar .topbar-eyebrow {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cockpit-beta-topbar .topbar-divider {
  color: var(--text2);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.cockpit-beta-topbar .topbar-booking-hint {
  font-size: 12px;
  font-weight: 500;
  color: var(--text3);
}

.cockpit-beta-topbar .topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── 2. [removed] DEMO-STATE-SWITCHER — entfernt in Round 32 (UI-Toggle
 *      raus, Empty-Hero hat eigene CTA, dev-only Override weiterhin via
 *      ?state=empty / ?state=populated URL-Param). ─────────────────────── */

/* ── 3. PERIOD-CONTROL (Monat / Quartal / Jahr) ────────────────────────── */

.period-control-group {
  display: inline-flex;
  background: rgba(var(--surface-rgba-base), 0.03);
  border: 1px solid var(--border-alpha);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}

.period-tab {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  transition: background var(--tr-fast),
              color var(--tr-fast);
  letter-spacing: -0.005em;
}
.period-tab:hover {
  color: var(--text);
}
.period-tab--active,
.period-tab[aria-selected="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}

/* ── 4. YEAR-CONTROL (‹ 2026 ›) ────────────────────────────────────────── */

.year-control-group {
  display: inline-flex;
  align-items: center;
  background: rgba(var(--surface-rgba-base), 0.03);
  border: 1px solid var(--border-alpha);
  border-radius: 8px;
  padding: 2px;
  gap: 0;
  overflow: hidden;
}

.year-nav-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  border: 0;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--tr-fast),
              color var(--tr-fast);
}
.year-nav-btn:hover {
  color: var(--text);
  background: rgba(var(--surface-rgba-base), 0.06);
}
.year-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Phase M Round 29 (2026-05-27, Daniel-Spec): Year-Display ist jetzt ein
 * <button data-action="openYearPicker"> statt <span> (vorher kein Klick-
 * Verhalten). Button-Reset damit der Look identisch bleibt — nur Cursor
 * + Hover-Hint signalisieren Interaktivität. */
.year-display {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  padding: 4px 10px;
  letter-spacing: -0.005em;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  line-height: inherit;
  transition: background var(--tr-fast), color var(--tr-fast);
}
.year-display:hover,
.year-display:focus-visible {
  background: rgba(var(--surface-rgba-base), 0.06);
  color: var(--accent);
  outline: none;
}
.year-display:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 1px;
}

/* ── 5. WELCOME-DECK (Side-by-Side Hero-Box + Whitelist) ──────────────── */

.onboarding-welcome-deck {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 18px;
}

@media (max-width: 900px) {
  .onboarding-welcome-deck {
    grid-template-columns: 1fr;
  }
}

/* ── 5.1 Linke Hero-Box mit goldenem Gradient + Tech-Mesh ────────────── */

/* Phase M Round 19 (2026-05-27, Daniel-Spec): Empty-State Main-Col-Gap
 * leicht erhöht (28px statt 24px aus --cockpit-beta-pop-gap) — Einrichtungs-
 * hilfe und Welcome-Deck wirken so weniger gedrückt. Gilt nur im
 * cockpit-beta-empty Scope, populated bleibt unverändert (24px). */
.cockpit-beta-empty .cockpit-beta-main-col {
  gap: 28px;
}

/* Phase M Round 19 (2026-05-27, Daniel-Spec): Welcome-Deck-Left ruht
 * jetzt auf demselben Card-Surface wie die restlichen Cockpit-Cards
 * (var(--card2) im Dark, var(--surface-sidebar) im Light) — vorher
 * separater linear-gradient + Mesh-Raster sah aus wie technischer
 * Dev-Placeholder. Kein Gradient, kein Glow, kein Raster — ruhige
 * Card-Optik wie Hero/Rail. */
.welcome-deck-left {
  position: relative;
  background: var(--card2);
  border: 1px solid var(--border-alpha);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  overflow: hidden;
  min-height: 220px;
}
body.light .welcome-deck-left {
  background: var(--surface-sidebar);
}

/* Phase M Round 19: Mesh komplett entfernt — die Raster-Punkte/-Linien
 * waren das Hauptproblem im "wirkt wie alter Grid-Placeholder"-Befund.
 * Hidden via display:none statt CSS-Removal, damit das DOM-Element
 * (das _cockpitBetaWelcomeDeck als aria-hidden Sibling rendert)
 * keinen Reflow auslöst und ein späterer Re-Enable trivial ist. */
.welcome-deck-mesh {
  display: none;
}

.welcome-deck-eyebrow {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.welcome-deck-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  margin: 0 0 10px 0;
  line-height: 1.2;
}

.welcome-deck-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text2);
  max-width: 460px;
  margin: 0 0 20px 0;
}

.welcome-deck-ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.welcome-deck-cta-primary,
.welcome-deck-cta-secondary {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--accent);
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: transform var(--tr-fast),
              background var(--tr-fast),
              color var(--tr-fast);
}
.welcome-deck-cta-primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.welcome-deck-cta-primary:hover {
  transform: translateY(-1px);
}
.welcome-deck-cta-secondary {
  background: transparent;
  color: var(--accent);
}
.welcome-deck-cta-secondary:hover {
  background: rgba(232, 184, 75, 0.06);
}

/* ── 5.2 Rechte Whitelist-Box ──────────────────────────────────────── */

/* Phase M Round 19 (2026-05-27, Daniel-Spec): Right-Box matched mit
 * Left-Box (gleiche Card-Surface, gleiche Höhe-Anmutung). Vorher
 * 1.5% surface (extrem dezent) wirkte hohl vs der opaken Left-Box. */
.welcome-deck-right {
  background: var(--card2);
  border: 1px solid var(--border-alpha);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
body.light .welcome-deck-right {
  background: var(--surface-sidebar);
}

.welcome-deck-right .welcome-deck-eyebrow {
  color: var(--text3);
  margin-bottom: 4px;
}

.welcome-deck-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.welcome-deck-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}

.welcome-deck-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.1);
  color: hsl(150, 60%, 46%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.2);
}
body.light .welcome-deck-check {
  color: hsl(150, 65%, 34%);
}

/* ── 6. EMPTY-STATE: Phase-I defensive Hide-Regel ENTFERNT (Round 23)
 *
 * Bisher: `.cockpit-beta-empty .cockpit-beta-empty-hero,
 *          .cockpit-beta-empty .cockpit-beta-empty-preview {
 *            display: none !important;
 *          }`
 * Das war Phase-I defensiv gegen die alte _cockpitBetaEmptyHero-Two-Box
 * (vor dem welcome-deck-Refactor). Seit Round 22 nutzt der Empty-State
 * aber wieder genau diese .cockpit-beta-empty-hero und .cockpit-beta-empty-
 * preview Modifier-Klassen (zusammen mit den v3 .cockpit-empty-* Base-
 * Klassen). Die Hide-Regel war damit der Grund, warum der ganze Empty-
 * Finanzdaten-Bereich UNTER der Einrichtungshilfe unsichtbar wurde —
 * User-Befund: "Einrichtungshilfe spannt zu breit, unteres Empty-State-
 * Bereich verschwindet". Defensive nicht mehr nötig: die welcome-deck-
 * Pipeline wird nicht mehr aufgerufen. */

/* ── 7. Hide bestehenden _cockpitBetaHeader im Empty-State ──────────────
   (Die neue cockpit-beta-empty-topbar ersetzt ihn). */

.cockpit-beta-empty .cockpit-beta-header {
  display: none !important;
}

/* Phase M Round 30 (2026-05-27, Daniel-Spec): Period-Control-Group
 * (Monat / Quartal / Jahr Tabs) im Empty-State ausblenden — ohne
 * Daten gibt es nichts zu filtern, die Tabs hätten keine Funktion. */
.cockpit-beta-empty .period-control-group {
  display: none;
}

/* ── 8. Responsive: Mobile ─────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Phase M Round 32 (2026-05-27): horizontales Padding bleibt erhalten,
   * sonst klebt die Topbar am Viewport-Rand. Vorher 12px 0. */
  .cockpit-beta-topbar {
    padding: 12px 14px;
    gap: 10px;
  }
  .cockpit-beta-topbar .topbar-right {
    width: 100%;
    justify-content: flex-start;
  }
  .welcome-deck-left {
    padding: 18px 18px;
  }
  .welcome-deck-title {
    font-size: 18px;
  }
  .welcome-deck-right {
    padding: 18px;
  }
}

@media (max-width: 520px) {
  .cockpit-beta-topbar {
    padding: 12px 12px;
  }
  .cockpit-beta-topbar .topbar-left {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
    gap: 6px 10px;
  }
  .cockpit-beta-topbar .topbar-divider {
    display: none;
  }
  .cockpit-beta-topbar .topbar-eyebrow {
    font-size: 11px;
    min-width: 0;
    white-space: nowrap;
  }
  .cockpit-beta-topbar .topbar-booking-hint {
    grid-column: 2;
    font-size: 11.5px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cockpit-beta-topbar .topbar-right {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    justify-content: stretch;
    align-items: center;
    flex-wrap: nowrap;
  }
  .period-control-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
  }
  .period-tab {
    min-height: 36px;
    padding: 7px 8px;
    font-size: 12px;
    min-width: 0;
    white-space: nowrap;
  }
  .year-control-group {
    flex: 0 0 auto;
  }
  .year-nav-btn {
    width: 28px;
    height: 36px;
    font-size: 16px;
  }
  .year-display {
    min-height: 36px;
    min-width: 48px;
    font-size: 13px;
    padding: 7px 6px;
  }
}

@media (max-width: 340px) {
  .cockpit-beta-topbar .topbar-right {
    gap: 5px;
  }
  .period-tab {
    padding-inline: 6px;
    font-size: 11.5px;
  }
  .year-nav-btn {
    width: 26px;
  }
  .year-display {
    min-width: 46px;
    padding-inline: 5px;
  }
}

/* Touch-Target-Floor (WCAG 2.5.5 / Apple HIG 44×44px) auf coarse Pointern.
 * Ergänzt das in _10-shell.css etablierte Muster (PR #3721) um die Cockpit-
 * Topbar-Controls, die ein WebKit-Render-Audit (iPhone 13) zusätzlich
 * aufdeckte: period-tab 69×36, year-nav-btn 28×36, year-display 48×36.
 * Hit-Area wächst über min-/feste Maße; die Regel steht NACH den max-width-
 * Blöcken, damit sie deren kompakte 26–36px-Werte bei gleicher Spezifität
 * überschreibt. year-nav-btn ist ein reiner Icon-Button (‹ ›) → feste 44×44
 * ist visuell ok; die Tab-/Display-Targets behalten kompakte Optik via
 * padding und wachsen nur in der Trefferfläche. */
@media (pointer: coarse) {
  .period-tab {
    min-width: 44px;
    min-height: 44px;
  }
  .year-nav-btn {
    width: 44px;
    height: 44px;
  }
  .year-display {
    min-height: 44px;
    padding-block: 11px;
  }
}

/* Phase M Round 1 (2026-05-27) — Cockpit-Beta Chart-Hover Tooltip + Focus-Lens.
 *
 * Replaces Phase L's _45l-cockpit-beta-focus-lens.css (reverted).
 * Owns:
 *   • .cockpit-beta-chart-hitzone — invisible SVG <rect> overlays on chart
 *   • .cockpit-beta-chart-tooltip — Glassmorphism Floating-Card (Antigravity §1.4)
 *   • .cockpit-beta-hero-floor--hovered — alternate state for focus-lens swap
 *
 * Tooltip is positioned absolute inside .cockpit-beta-chart-wrap (which becomes
 * position:relative implicitly via the wrap's existing CSS).
 */

/* ── HITZONES ─────────────────────────────────────────────────────────── */
.cockpit-beta-chart-hitzone {
  cursor: crosshair;
  pointer-events: all;
}

/* ── COLUMN HIGHLIGHT ─────────────────────────────────────────────────── */
/* Daniel-Spec (Phase M Round 1): subtle vertical glass strip behind the
 * data lines that marks the actively hovered month. Inserted into the SVG
 * BEFORE the spline paths so it never obscures the curves. Pointer-events
 * disabled — the hit-zones above own the mouse. */
.cockpit-beta-chart-column {
  fill: rgba(var(--accent-rgba-base), 0.05);
  stroke: rgba(var(--accent-rgba-base), 0.18);
  stroke-width: 0.6;
  opacity: 0;
  transition: opacity 0.12s ease-out;
}

.cockpit-beta-chart-column--visible {
  opacity: 1;
}

/* Fable-5-Designpass (2026-07-10): Hover-Snap-Dot auf der Gewinnlinie —
 * zusätzliches Feedback am aktiven Datenpunkt selbst, nicht nur an der
 * gesamten Spalte. Scale-in statt reinem Opacity-Fade wirkt reaktiver. */
.cockpit-beta-chart-hover-dot {
  fill: var(--accent);
  stroke: var(--surface-sidebar);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.4);
  transition: opacity 0.12s ease-out, transform 0.12s ease-out;
}

.cockpit-beta-chart-hover-dot--visible {
  opacity: 1;
  transform: scale(1);
}

/* ── TOOLTIP CONTAINER ────────────────────────────────────────────────── */
.cockpit-beta-chart-wrap {
  position: relative;
}

.cockpit-beta-chart-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  min-width: 168px;
  max-width: 240px;
  padding: 10px 12px 9px;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(var(--surface-rgba-base), 0.12);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.12s ease-out, transform 0.12s ease-out;
}

.cockpit-beta-chart-tooltip--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Phase M Round 12 (2026-05-27, Daniel-Spec): Light-Mode-Override für
 * den Tooltip. Default-Background ist slate-900 (rgba(15,23,42,.95)) und
 * passt im Light-Mode-Cockpit nicht zur hellen Hero-Card. body.light
 * tauscht auf weißes Surface-Token + softere Shadow. Text-, Border-,
 * Dot- und Divider-Farben sind bereits token-basiert (var(--text),
 * --accent, --green, --red, surface-rgba-base) und passen sich
 * automatisch an — keine weitere Override nötig. */
body.light .cockpit-beta-chart-tooltip {
  background: var(--surface-sidebar);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ── TOOLTIP HEADER ───────────────────────────────────────────────────── */
.cockpit-beta-chart-tooltip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(var(--surface-rgba-base), 0.08);
}

.cockpit-beta-chart-tooltip-month {
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: var(--text);
}

.cockpit-beta-chart-tooltip-pill {
  display: inline-block;
  padding: 1px 7px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(var(--accent-rgba-base), 0.12);
  border: 1px solid rgba(var(--accent-rgba-base), 0.32);
  border-radius: 9999px;
}

/* Phase M Round 18: SZENARIO-Variante — gedämpft, neutraler Ton damit
 * der User klar sieht "das ist Projektion, keine echte Buchung". */
.cockpit-beta-chart-tooltip-pill--projected {
  color: var(--text2);
  background: rgba(var(--surface-rgba-base), 0.06);
  border-color: rgba(var(--surface-rgba-base), 0.18);
}

/* ── TOOLTIP ROWS ─────────────────────────────────────────────────────── */
.cockpit-beta-chart-tooltip-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cockpit-beta-chart-tooltip-row {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
}

/* Round 36 (2026-05-28): Tooltip-Row für eine via Legend ausgeblendete
 * Serie wird gedimmt statt entfernt — sonst springt die Tooltip-Höhe
 * beim Toggle. Daten bleiben sichtbar, nur visuell zurückgenommen. */
.cockpit-beta-chart-tooltip-row--hidden {
  opacity: 0.35;
}

.cockpit-beta-chart-tooltip-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.cockpit-beta-chart-tooltip-dot--profit  { background: var(--accent); }
.cockpit-beta-chart-tooltip-dot--income  { background: var(--green); }
/* Zurück zu Rot (2026-07-10, Daniel-Entscheidung) — folgt _45h2-cockpit-
 * beta-chart.css --line--expense. */
.cockpit-beta-chart-tooltip-dot--expense { background: var(--red); }

.cockpit-beta-chart-tooltip-key {
  color: var(--text2);
}

.cockpit-beta-chart-tooltip-val {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ── TOOLTIP DELTA FOOTER ─────────────────────────────────────────────── */
.cockpit-beta-chart-tooltip-delta {
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px dashed rgba(var(--surface-rgba-base), 0.08);
  text-align: right;
}

.cockpit-beta-chart-tooltip-delta-val {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.cockpit-beta-chart-tooltip-delta--up      { color: var(--green); }
.cockpit-beta-chart-tooltip-delta--down    { color: var(--red); }
.cockpit-beta-chart-tooltip-delta--neutral { color: var(--text3); }

/* ── FOCUS-LENS Floor swap state ──────────────────────────────────────── */
/* When chart is being hovered, the Hero-Floor switches from YTD-aggregate
 * to month-specific values. The cmp-lines (vs. prev year) become irrelevant
 * during hover and are softened to avoid visual noise. */
.cockpit-beta-hero-floor--hovered .cockpit-beta-hero-floor-cmp {
  visibility: hidden;
}

.cockpit-beta-hero-floor--hovered .cockpit-beta-hero-floor-title,
.cockpit-beta-hero-floor--hovered .cockpit-beta-hero-floor-sub,
.cockpit-beta-hero-floor--hovered .cockpit-beta-hero-floor-v {
  transition: color 0.12s ease-out;
}

/* ════════════════════════════════════════════════════════════════════════
 * Cockpit Phase M Round 37 (2026-05-28) — Vorjahresvergleich-Block
 *
 * Full-width Section unter dem 2-Spalten-Dashboard-Grid. Header links
 * (Title + Subline), Insight-Box rechts. Vier KPI-Karten in 4-Spalten-
 * Grid (responsive auf 2x2 / 1x4). Karten enthalten Wert, Vorjahreswert,
 * Delta-Badge und horizontale Vergleichsbalken (2026 oben, 2025 unten).
 *
 * Konsumiert von: public/js/modules/cockpit-beta-yoy.js
 * Wird gerendert in: cockpit-beta-populated.js + dashboard-cockpit-beta.js
 * (Empty-State zeigt denselben Block als Placeholder, keine Demo-Werte).
 * ════════════════════════════════════════════════════════════════════════ */

.cockpit-beta-yoy {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 24px;
  margin-top: 22px;
  background: var(--card);
  border: 1px solid var(--border-alpha);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.cockpit-beta-yoy-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.cockpit-beta-yoy-titles {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.cockpit-beta-yoy-title {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.005em;
}

.cockpit-beta-yoy-subline {
  color: var(--text2);
  font-size: 12px;
  font-weight: var(--fw-medium);
}

/* Insight-Box rechts — Pille mit Icon + Text. */
.cockpit-beta-yoy-insight {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  background: rgba(var(--surface-rgba-base), .03);
  border: 1px solid var(--border-alpha);
  border-radius: 999px;
  max-width: 720px;
}

.cockpit-beta-yoy-insight-icon {
  flex-shrink: 0;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
}

.cockpit-beta-yoy-insight-text {
  color: var(--text2);
  font-size: 12.5px;
  line-height: 1.45;
}

/* 4-Spalten-Grid für die Karten — responsive: ≤900px = 2x2, ≤520px = 1x4. */
.cockpit-beta-yoy-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.cockpit-beta-yoy-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  background: rgba(var(--surface-rgba-base), .025);
  border: 1px solid var(--border-alpha);
  border-radius: var(--radius-md, 10px);
}

/* Round 41: kompakte Variante ohne Badge / Vorjahreszeile / Bars — wird
 * verwendet wenn keine Vorjahresdaten existieren. Subline-Header
 * (Sektion oben) sagt einmal "Für 2025 keine Vergleichsdaten" — die
 * Karten zeigen dann nur Label + aktuellen Wert. */
.cockpit-beta-yoy-card--empty {
  gap: 4px;
  padding: 14px 18px;
}

.cockpit-beta-yoy-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cockpit-beta-yoy-card-label {
  color: var(--text2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Delta-Badge: tone steuert Farbe (good/bad/warn/flat). */
.cockpit-beta-yoy-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  border: 1px solid transparent;
}

.cockpit-beta-yoy-badge--good {
  color: var(--green);
  background: rgba(var(--surface-rgba-base), .04);
  border-color: var(--green3);
}
.cockpit-beta-yoy-badge--bad {
  color: var(--red);
  background: rgba(var(--surface-rgba-base), .04);
  border-color: var(--red3);
}
/* Warn (orange) für gestiegene Ausgaben — nutzt --accent-alt falls vorhanden,
 * sonst fallback auf accent-warm. Spezifischer HSL als Brand-konformer
 * Mittelweg zwischen accent (gold) und red. */
.cockpit-beta-yoy-badge--warn {
  color: var(--tone-warn-text);
  background: rgba(245, 158, 11, .08);
  border-color: rgba(245, 158, 11, .25);
}
.cockpit-beta-yoy-badge--flat {
  color: var(--text2);
  background: rgba(var(--surface-rgba-base), .04);
  border-color: var(--border-alpha);
}

.cockpit-beta-yoy-card-value {
  color: var(--text);
  font-size: 22px;
  font-weight: 800;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.cockpit-beta-yoy-card-unit {
  margin-left: 2px;
  color: var(--text2);
  font-size: 13px;
  font-weight: var(--fw-semibold);
}

.cockpit-beta-yoy-card-prev {
  color: var(--text2);
  font-size: 11.5px;
  font-weight: var(--fw-medium);
}

.cockpit-beta-yoy-prev-empty {
  color: var(--text3);
  font-style: italic;
}

/* Vergleichsbalken: 2026 oben (tone-coloured), 2025 unten (neutral grau). */
.cockpit-beta-yoy-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.cockpit-beta-yoy-bar-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 8px;
}

.cockpit-beta-yoy-bar-year {
  color: var(--text3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.cockpit-beta-yoy-bar-track {
  height: 4px;
  background: rgba(var(--surface-rgba-base), .06);
  border-radius: 999px;
  overflow: hidden;
}

.cockpit-beta-yoy-bar-fill {
  /* Breite wird CSP-konform post-insert via --cockpit-beta-yoy-w gesetzt
     (cockpit-beta-populated.js mount()); kein inline style=. */
  width: var(--cockpit-beta-yoy-w, 0%);
  height: 100%;
  border-radius: 999px;
  transition: width var(--tr-drawer);
}

.cockpit-beta-yoy-bar-fill--good { background: var(--green); }
.cockpit-beta-yoy-bar-fill--bad  { background: var(--red); }
.cockpit-beta-yoy-bar-fill--warn { background: var(--tone-warn-fg); }
.cockpit-beta-yoy-bar-fill--flat { background: var(--text3); }
.cockpit-beta-yoy-bar-fill--prev { background: rgba(var(--surface-rgba-base), .18); }

/* Responsive. */
@media (max-width: 900px) {
  .cockpit-beta-yoy-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .cockpit-beta-yoy {
    padding: 18px 16px;
  }
  .cockpit-beta-yoy-cards {
    grid-template-columns: 1fr;
  }
  .cockpit-beta-yoy-insight {
    max-width: 100%;
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Cockpit Phase M Round 38 (2026-05-28) — Mobile-Responsive
 *
 * AUSSCHLIESSLICH Mobile-Anpassungen. Desktop bleibt unverändert. Alle
 * Rules unterhalb sitzen in @media (max-width: 640px) — ab dieser Breite
 * wechselt der Cockpit-Hero von "verkleinerte Desktop-Reihe" auf eine
 * eigene mobile Kartenlogik: 2x2-Wertenblock für die Summary-Leiste,
 * 2x2-Grid für den KPI-Floor, kompakter Chart mit reduzierten X-Ticks
 * und kleineren HEUTE/PEAK-Labels.
 *
 * Konsumiert von: dieselben DOM-Strukturen wie _45h-cockpit-beta-populated
 *                 (cockpit-beta-hero-card / -toolbar / -chart-wrap /
 *                  -hero-floor / -kpi-row).
 *
 * Größere Tablet-Breakpoints (900px) leben weiterhin in _45h/_45m/_45k.
 * Diese Datei ist der Smartphone-spezifische Layer.
 * ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  /* ── A. Hero-Card kompakter ─────────────────────────────────────────── */
  .cockpit-beta-hero-card {
    padding: 18px 14px 14px;
    gap: 12px;
  }

  /* Hero-Wert (89.157 €) etwas kleiner, bleibt dominant. */
  .cockpit-beta-hero-value {
    font-size: clamp(36px, 11vw, 56px);
  }

  /* ── B. Chart: ruhiger, weniger Achsenlabels (Round 38) + Round-39-
   *      Polish (non-scaling-stroke + HEUTE/PEAK-Text aus + lesbare
   *      Y-Achse). ────────────────────────────────────────────────────── */
  .cockpit-beta-chart-wrap {
    height: 300px;        /* Round 39: +60px Atemraum (war 240) */
    margin-bottom: 10px;
  }

  /* X-Achse: jede zweite Beschriftung ausblenden (Jan / Mär / Mai / Jul /
   * Sep / Nov statt alle 12 Monate). nth-child auf SVG-children
   * funktioniert auf modernen Browsern; falls ein Browser das nicht
   * unterstützt, fällt es auf die volle Liste zurück (kein Crash). */
  .cockpit-beta-chart-x text:nth-child(even) {
    display: none;
  }

  /* X-Achse weiterhin klein. Y-Achse größer + heller (Round 39 — auf
   * Smartphone war 9px kaum lesbar; jetzt 12px + Currency-tspan aus). */
  .cockpit-beta-chart-tick-x {
    font-size: 9px;
  }
  .cockpit-beta-chart-tick-y {
    font-size: 12px;
    fill: var(--text);
    opacity: 0.75;
  }
  /* Round 39: " €" als eigener tspan im Y-Tick wird auf Mobile
   * ausgeblendet — kürzeres "16k" Format spart Platz für die größere
   * Schrift. Auf Desktop bleibt das volle "16k €". */
  .cockpit-beta-chart-tick-currency {
    display: none;
  }

  /* HEUTE/PEAK auf Mobile: Text raus, Marker bleiben.
   *   - .cockpit-beta-chart-today (vertikale Linie) bleibt sichtbar.
   *   - .cockpit-beta-chart-peak-dot (gold Punkt) bleibt sichtbar.
   *   - Beide Text-Labels verschwinden — Details kommen über Hover/Tap.
   * Plan-Challenge-Fix (2026-07-10): Halo + Leader-Line (PEAK-Label-Fix,
   * Runde 2) MÜSSEN mit ausgeblendet werden, sonst bleibt eine leere
   * Halo-Box + eine Linie ins Leere sichtbar, wenn nur der Text via
   * display:none verschwindet, aber Halo/Leader nicht. */
  .cockpit-beta-chart-today-lbl,
  .cockpit-beta-chart-peak-lbl,
  .cockpit-beta-chart-peak-halo,
  .cockpit-beta-chart-peak-leader {
    display: none;
  }

  /* Round 39: Linien-Qualitäts-Fix.
   * Ohne vector-effect skaliert die Stroke-Breite mit dem ViewBox-Crop —
   * auf Mobile bei ~360px Viewport wird aus stroke-width: 3 visuell <1.5,
   * was die Linien dünn/hakelig wirken lässt. non-scaling-stroke hält die
   * Stroke konstant in CSS-Pixeln, unabhängig vom SVG-Scale. Plus
   * stroke-linecap/-linejoin: round für weiche Segmentübergänge.
   *
   * Round 39c (Daniel-Spec): Linien deutlich fetter + shape-rendering
   * geometricPrecision für hochwertiges Anti-Aliasing (default ist
   * "auto" — Browser darf zugunsten Performance ungenauer rendern; auf
   * Mobile mit gestauchter Geometrie führt das zu sichtbaren Treppen). */
  .cockpit-beta-chart-line {
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
    shape-rendering: geometricPrecision;
  }
  .cockpit-beta-chart-line--profit {
    stroke-width: 3.8;
  }
  .cockpit-beta-chart-line--income,
  .cockpit-beta-chart-line--expense {
    stroke-width: 2.6;
    opacity: 0.7;
  }
  /* Heute-Linie + Future-Band bleiben dezent. */
  .cockpit-beta-chart-today {
    vector-effect: non-scaling-stroke;
  }
  /* Peak-Dot Outline soll auch nicht mitskalieren — sonst wirkt der
   * Outline-Ring auf Mobile fast unsichtbar. */
  .cockpit-beta-chart-peak-dot {
    vector-effect: non-scaling-stroke;
  }

  /* 2026-05-31 (Daniel-Spec): Endpunkt-Marker auch auf Mobile mit konstanter
   * Outline. Future-Hint kleiner — der viewBox ist auf Mobile höher/schmaler
   * (preserveAspectRatio="none" zieht Text horizontal), daher kompakter. */
  .cockpit-beta-chart-endpoint-dot {
    vector-effect: non-scaling-stroke;
  }
  .cockpit-beta-chart-future-hint {
    font-size: 9px;
  }

  /* ── C. Toolbar: bewusst stapeln ────────────────────────────────────── */
  .cockpit-beta-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .cockpit-beta-toolbar-left {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .cockpit-beta-scenario-tabs {
    width: 100%;
  }
  .cockpit-beta-scenario-tab {
    flex: 1 1 auto;
  }
  .cockpit-beta-toolbar-legend {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 4px 12px;
  }
  .cockpit-beta-toolbar-status {
    font-size: 11.5px;
  }

  /* ── D. Summary-Leiste: 2x2 Wertenblock ─────────────────────────────── */
  .cockpit-beta-hero-floor {
    padding: 12px 14px;
    gap: 12px;
  }
  .cockpit-beta-hero-floor-titles {
    width: 100%;
  }
  .cockpit-beta-hero-floor-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
    width: 100%;
  }
  .cockpit-beta-hero-floor-item {
    align-items: flex-start;
  }
  .cockpit-beta-hero-floor-v {
    font-size: 15px;
  }

  /* ── E. KPI-Floor: 2x2 Grid statt Spalten-Trenner ───────────────────── */
  .cockpit-beta-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
  }
  .cockpit-beta-kpi-card {
    padding: 12px 14px;
    background: rgba(var(--surface-rgba-base), .025);
    border: 1px solid var(--border-alpha);
    border-radius: 10px;
  }
  /* Border-right von Desktop-Pattern auf Mobile zurücksetzen — sonst
   * vertikale Striche zwischen Karten, die nicht zum Card-Look passen. */
  .cockpit-beta-kpi-card,
  .cockpit-beta-kpi-card:last-child {
    border-right: 1px solid var(--border-alpha);
  }
  .cockpit-beta-kpi-value {
    font-size: 15.5px;
  }
  .cockpit-beta-kpi-label {
    font-size: 9px;
  }
  .cockpit-beta-kpi-spark {
    width: 48px;
    height: 14px;
  }

  /* ── F. Safe area: deutlich mehr Bottom-Padding gegen Safari-Bottom-Bar
   *      und Standard-iOS Home-Indicator. Round 41: vorher nur 24px,
   *      User-Befund: "Browser-Bar verdeckt Content". Jetzt 96px Sockel
   *      + safe-area-inset-bottom on top. */
  .cockpit-beta-shell {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  /* Round 41: Drag-Handle auf Mobile stark abgeschwächt — long-press auf
   * der ganzen Card (Round 32c) macht das Handle visuell überflüssig.
   * 22×22 statt 40×40 und Opacity 0.2 (statt 0.4-0.55) — Handle bleibt
   * für Power-User auffindbar, ist aber kein visueller Lärm mehr. */
  .cockpit-beta-drag-handle {
    width: 22px;
    height: 22px;
    padding: 2px;
    opacity: 0.22;
  }

  /* Round 41: CTA-Zeile in Rail-Cards (Nächste Pflichten etc.) stapeln,
   * statt Belege-Erfassen-Button + "Alle Pflichten →"-Link in eine
   * gequetschte Zeile zu pressen. Beide Buttons jetzt full-width
   * untereinander mit kleinem Gap. */
  .cockpit-beta-rail-card-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .cockpit-beta-rail-cta,
  .cockpit-beta-rail-link {
    width: 100%;
    text-align: center;
  }
  .cockpit-beta-rail-link {
    padding: 8px 14px;
  }

  /* ── G. Booking-Card mobile: 2×2 Grid + Datum in Meta-Zeile (Round 40)
   *      Datum-Spalte links wird auf Mobile aufgelöst und in die Meta-
   *      Zeile unter den Titel gepackt — User-Befund: "20.05.   OpenAI ·
   *      Phase 2 Logistik-..." quetscht den Titel weg. Jetzt nur noch
   *      zwei Spalten: Body | Amount/Status. */
  .cockpit-beta-bk-li {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    padding: 10px 4px;
    min-height: 0;
  }
  /* Linke Datum-Spalte ausblenden — Datum erscheint stattdessen via
   * .bk-meta-date in der Meta-Zeile unter dem Titel. */
  .cockpit-beta-bk-date {
    display: none;
  }
  /* Datum + Separator innerhalb von .bk-meta zeigen. */
  .cockpit-beta-bk-meta-date,
  .cockpit-beta-bk-meta-sep {
    display: inline;
  }
  .cockpit-beta-bk-meta-date {
    color: var(--text2);
    font-variant-numeric: tabular-nums;
  }
  /* Body spannt beide Rows (Titel oben, Meta unten). */
  .cockpit-beta-bk-body {
    grid-column: 1;
    grid-row: 1 / 3;
    gap: 2px;
  }
  .cockpit-beta-bk-text {
    font-size: 13.5px;
  }
  /* Phase-PR (2026-07-06): Icon-Größe auf Mobile etwas kleiner (dezent). */
  .cockpit-beta-bk-verified-icon {
    width: 13px;
    height: 13px;
  }
  .cockpit-beta-bk-meta {
    font-size: 11.5px;
  }
  /* Betrag oben rechts, Status unten rechts. */
  .cockpit-beta-bk-amt {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    font-size: 13.5px;
    padding-right: 0;
  }
  .cockpit-beta-bk-li > .cockpit-beta-bk-status {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    justify-self: end;
  }
  /* Status kompakter + "verknüpft" dezent (nur "fehlt" knallt). */
  .cockpit-beta-bk-status {
    padding: 1px 7px;
    font-size: 10px;
  }
  .cockpit-beta-bk-status--beleg-verknuepft {
    background: transparent;
    color: var(--text2);
    opacity: 0.7;
  }
  /* "Beleg fehlt" bleibt prominent — User braucht den Alert. */

  /* CTA als breite Footer-Zeile statt eingeklemmter Pille rechts unten. */
  .cockpit-beta-bk-foot {
    justify-content: stretch;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--border-alpha);
  }
  .cockpit-beta-bk-link {
    width: 100%;
    text-align: center;
    padding: 10px 14px;
    background: rgba(var(--surface-rgba-base), .03);
    border: 1px solid var(--border-alpha);
    border-radius: 8px;
    font-size: 13px;
  }
}

/* Sehr enge Screens (iPhone SE u.ä.) — Summary-Items 1col, Hero noch
 * etwas kleiner damit nichts überläuft. */
@media (max-width: 380px) {
  .cockpit-beta-hero-value {
    font-size: clamp(32px, 12vw, 44px);
  }
  .cockpit-beta-hero-floor-items {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════════════
   MONATSANSICHT — Phase-1-Polish: Status-Subline, KPI-Tones (analog OP), Filter-Pills, Tabellen-Polish, Light-Mode-Tiefe, Mobile-Anpassungen (2026-05-02)
   Ausgeschnitten aus _20-dashboard.css (PR-S1.6c, 2026-05-25, FINALER PR).
   Quelle: _20-dashboard.css Z. 1–77 (pre-split, origin/main 8aaad09c).
   Plan: docs/architecture/2026-05-16-dashboard-css-split-plan.md

   Teil 1/8 der Monatsansicht-Partials. MANIFEST-Position direkt nach
   `_45f-cockpit-yc-strip.css` und VOR `_20b-dashboard-inline-fixes.css`,
   damit Source-Order-Cascade der Monatsansicht-Selektoren erhalten bleibt
   (spätere `_20b/c/d/e`-Inline-Fixes dürfen weiterhin überschreiben).

   `_20-dashboard.css` wurde in PR-S1.6c komplett GELÖSCHT — alle ursprünglichen
   Selektoren leben jetzt in `_20a*`, `_40a/b`, `_45a-f`, `_25a-h`, `_15a`,
   `_52e`, `_20c`.
   ════════════════════════════════════════════════════════════════════ */
/* ==================================================================
   MONATSANSICHT — Phase-1-Polish (2026-05-02)
   ----------------------------------------------------------------------
   Polish ohne strukturelle Aenderungen: Status-Subline, KPI-Tones analog
   OP, Filter-Pills an Kontakte/OP-Sprache angleichen, Tabelle subtil
   hochwertiger. Bestehende DOM/Tests bleiben unangetastet.

   Constraints:
   - .mh-title{display:flex;align-items:center} bleibt erhalten (Test-Pin)
   - .mh-title svg{flex-shrink:0} bleibt erhalten (Test-Pin)
   - id="ctx-month-overview"/-kpis bleiben (Router-Test-Pin)
   - .filter-pill ist global — Polish nur scoped in .tx-filter-bar
   - .tx-einnahme/.tx-ausgabe Row-Klassen bleiben unveraendert (Markup-Pin)
   - Sticky-Header NICHT gebaut (zu hohe Komplexitaet, siehe Konzept)
   ================================================================== */

/* ── Status-Subline (neu unter Titel statt direkt mh-meta) ──────── */
.mh-status-row{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:5px;
  font-size:12px;
  color:var(--text2);
}
.mh-status-chip{
  display:inline-flex;align-items:center;
  height:20px;padding:0 9px;
  border-radius:10px;
  font-size:10.5px;font-weight:var(--fw-semibold);
  letter-spacing:.02em;white-space:nowrap;
  border:1px solid var(--border);background:var(--bg2);color:var(--text2);
}
.mh-status-chip--open{
  background:rgba(96,165,250,.10);
  border-color:rgba(96,165,250,.28);
  color:var(--blue,var(--tone-info-fg));
}
.mh-status-chip--closed{
  background:rgba(52,211,153,.10);
  border-color:rgba(52,211,153,.28);
  color:var(--green,var(--tone-good-fg));
}
.mh-status-chip--readonly{
  background:rgba(248,113,113,.10);
  border-color:rgba(248,113,113,.28);
  color:var(--red,var(--tone-poor-fg));
}
.mh-status-sep{color:var(--text3);opacity:.5;}
.mh-status-count{
  color:var(--text2);
  font-variant-numeric:tabular-nums;
  font-weight:var(--fw-semibold);
}

/* ── KPI-Cockpit — Tone-Variants analog Offene Posten ───────────── */
/* Bestehende .kpi/.kpi-hero/.kpi-label/.kpi-val + .vp/.vn/.va/.vb
   Color-Klassen bleiben. Tone-Klassen sind additiv und bringen
   Top-Accent-Strip + Status-Punkt im Label. */
.month-kpis .kpi{position:relative;overflow:hidden;transition:border-color .15s,box-shadow .15s;}
.month-kpis .kpi::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--border2),transparent 60%);
  opacity:.55;
  pointer-events:none;
}

/* ════════════════════════════════════════════════════════════════════
   MONATSANSICHT — Phase 2: Monatsabschluss-Cockpit — sekundäre Bestätigungs-Card am Seitenende mit Status-Stats, Saldo/Belege-Tones, Mobile-Stack (2026-05-02). Schließt mit Iter 2 Anfangs-Sweep ab.
   Ausgeschnitten aus _20-dashboard.css (PR-S1.6c, 2026-05-25, FINALER PR).
   Quelle: _20-dashboard.css Z. 78–604 (pre-split, origin/main 8aaad09c).
   Plan: docs/architecture/2026-05-16-dashboard-css-split-plan.md

   Teil 2/8 der Monatsansicht-Partials. MANIFEST-Position direkt nach
   `_45f-cockpit-yc-strip.css` und VOR `_20b-dashboard-inline-fixes.css`,
   damit Source-Order-Cascade der Monatsansicht-Selektoren erhalten bleibt
   (spätere `_20b/c/d/e`-Inline-Fixes dürfen weiterhin überschreiben).

   `_20-dashboard.css` wurde in PR-S1.6c komplett GELÖSCHT — alle ursprünglichen
   Selektoren leben jetzt in `_20a*`, `_40a/b`, `_45a-f`, `_25a-h`, `_15a`,
   `_52e`, `_20c`.
   ════════════════════════════════════════════════════════════════════ */
/* ==================================================================
   MONATSANSICHT — Phase-2: Monatsabschluss-Cockpit (2026-05-02)
   ----------------------------------------------------------------------
   Sekundäre Bestätigungs-Card am Seitenende. Bestehender Festschreiben-
   Banner oben + .mh-lock-btn im Header bleiben funktional und unverändert.
   Card duplicated den Festschreiben-Pfad bewusst — nach langem Scroll
   durch die Tabelle erwartet der User eine klare End-of-Month-Zone.

   Tone-Variants: --good (closed/ready), --warn (Belege fehlen),
                  --info (readonly).
   Surface-Sprache analog zu OP-KPI-Cards (Card-Radius 14px, dezenter
   Top-Accent-Strip in Tone-Farbe, leicht erhöhter Surface-Tint).
   ================================================================== */
.mh-cockpit{
  position:relative;
  display:flex;flex-direction:column;gap:14px;
  margin-top:18px;margin-bottom:6px;
  padding:20px 22px 18px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card);
  overflow:hidden;
  transition:border-color .15s,box-shadow .15s;
}
/* Top-Accent-Strip in Tone-Farbe (analog OP-KPI-Cards) */
.mh-cockpit::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--border2),transparent 60%);
  opacity:.55;
  pointer-events:none;
}
.month-kpis .kpi:hover{border-color:var(--border2);box-shadow:0 1px 6px rgba(0,0,0,.10);}
.month-kpis .kpi--income::before{background:linear-gradient(90deg,var(--green),transparent 60%);opacity:.85;}
.month-kpis .kpi--expense::before{background:linear-gradient(90deg,var(--red),transparent 60%);opacity:.8;}
.month-kpis .kpi--saldo-income::before{background:linear-gradient(90deg,var(--green),transparent 65%);opacity:.95;}
.month-kpis .kpi--saldo-expense::before{background:linear-gradient(90deg,var(--red),transparent 65%);opacity:.9;}
.month-kpis .kpi--saldo-neutral::before{background:linear-gradient(90deg,var(--accent),transparent 65%);opacity:.65;}
.month-kpis .kpi--tax::before{background:linear-gradient(90deg,var(--accent),transparent 65%);opacity:.55;}
.month-kpis .kpi--muted{opacity:.4;}
.month-kpis .kpi--muted::before{opacity:.20;}

/* Status-Punkt im KPI-Label (subtil, links neben dem Label-Text) */
.month-kpis .kpi-label{display:flex;align-items:center;gap:7px;}
.month-kpis .kpi-label::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:var(--text3);opacity:.55;
  flex-shrink:0;
}
.month-kpis .kpi--income .kpi-label::before{background:var(--green);opacity:.95;}
.month-kpis .kpi--expense .kpi-label::before{background:var(--red);opacity:.9;}
.month-kpis .kpi--saldo-income .kpi-label::before{background:var(--green);opacity:1;}
.month-kpis .kpi--saldo-expense .kpi-label::before{background:var(--red);opacity:1;}
.month-kpis .kpi--saldo-neutral .kpi-label::before{background:var(--accent);opacity:.85;}
.month-kpis .kpi--tax .kpi-label::before{background:var(--accent);opacity:.7;}

/* Saldo-Card etwas prominenter (kpi-hero hat schon border-color, jetzt
   zusaetzlich leicht gehobene Surface) */
.month-kpis .kpi-hero{box-shadow:0 1px 3px rgba(0,0,0,.10);}

/* Beträge in tabular-nums fuer ruhigere Reihen */
.month-kpis .kpi-val{font-variant-numeric:tabular-nums;letter-spacing:-.005em;}

/* ── Filter-Pills — angeglichen an Kontakte/OP-Sprache (scoped!) ── */
/* Globales .filter-pill bleibt unangetastet (wird auch in Belege etc.
   genutzt). Scoped via .tx-filter-bar fuer den Monat-Polish. */
.tx-filter-bar .filter-pill{
  height:30px;padding:0 13px;
  display:inline-flex;align-items:center;gap:6px;
  border-radius:15px;
  font-size:12px;
  background:var(--bg2);
  transition:border-color .15s,background .15s,color .15s;
}
.tx-filter-bar .filter-pill .filter-count{
  font-family:var(--mono);
  font-size:10.5px;
  background:var(--bg3);
  color:var(--text3);
  padding:1px 7px;
  border-radius:8px;
  font-weight:var(--fw-semibold);
}
.tx-filter-bar .filter-pill:hover{border-color:var(--border2);color:var(--text);background:var(--card);}
.tx-filter-bar .filter-pill.active{
  background:rgba(232,184,75,.12);
  border-color:rgba(232,184,75,.38);
  color:var(--accent);
}
.tx-filter-bar .filter-pill.active .filter-count{
  background:rgba(232,184,75,.20);
  color:var(--accent);
}
.tx-filter-bar .filter-pill:focus-visible{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(232,184,75,.18);
}
/* Search-Field-Polish: dezenter Border + Accent-Ring im Fokus statt
   nur Border-Wechsel */
.tx-filter-bar .filter-search input{
  height:32px;
  border-radius:10px;
  padding:0 12px 0 32px;
  font-size:12.5px;
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.tx-filter-bar .filter-search input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(232,184,75,.14);
}
.tx-filter-bar .filter-search-icon{left:11px;}

/* ── Tabellen-Polish (subtil, KEIN bunter Left-Border-Streifen) ──── */
/* Der Tabellen-Header bekommt eine ruhige Tönung statt grellen Bg. Row-
   Hover und Border-bottom werden weicher. Beträge bekommen tabular-nums.
   Type-Indicator: kleiner farbiger Punkt vor dem Brutto-Wert (statt
   bunter Left-Border über die ganze Zeile). */
.tx-wrap table thead th{
  font-size:10.5px;
  font-weight:var(--fw-semibold);
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text3);
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  padding:11px 12px;
}
.tx-wrap table tbody td{
  font-size:12.5px;
  padding:11px 12px;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
  transition:background .12s;
}
.tx-wrap table tbody tr{transition:background .12s;}
.tx-wrap table tbody tr:hover td{background:rgba(var(--surface-rgba-base),.025);}
.tx-wrap table tbody tr:last-child td{border-bottom:0;}
/* Beträge mit tabular-nums in Daten-Spalten */
.tx-wrap table td.r,
.tx-wrap table td.num,
.tx-wrap table .vp,
.tx-wrap table .vn,
.tx-wrap table .va,
.tx-wrap table .vb{font-variant-numeric:tabular-nums;}
/* Subtiler Type-Indicator: kleiner farbiger Punkt VOR dem Brutto-Wert.
   Wird ueber die Row-Klasse tx-einnahme/tx-ausgabe selektiert (existiert
   bereits im JS), nicht ueber neue Markup. .vp und .vn liegen in der
   Brutto-Zelle, davor erscheint der Punkt via ::before auf der Zelle. */
.tx-wrap table tbody tr.tx-einnahme td:has(.vp)::before,
.tx-wrap table tbody tr.tx-ausgabe td:has(.vn)::before{
  content:"";
  display:inline-block;
  width:5px;height:5px;
  border-radius:50%;
  margin-right:6px;
  vertical-align:1px;
}
.tx-wrap table tbody tr.tx-einnahme td:has(.vp)::before{background:var(--green);opacity:.8;}
.tx-wrap table tbody tr.tx-ausgabe td:has(.vn)::before{background:var(--red);opacity:.75;}

/* th-active sehr dezent (nicht laut), th-sort-Indicator subtiler */
.tx-wrap table thead th.th-sort{cursor:pointer;transition:color .15s;}
.tx-wrap table thead th.th-sort:hover{color:var(--text2);}
.tx-wrap table thead th.th-active{color:var(--text);}
.tx-wrap table thead .th-sort-ind{
  font-size:9px;
  opacity:.55;
  margin-left:3px;
  font-variant-numeric:tabular-nums;
}
.tx-wrap table thead th.th-active .th-sort-ind{opacity:.95;color:var(--accent);}

/* Bulk-Bar konsistenter mit anderen Aktionsleisten */
.bulk-bar{transition:background .15s,border-color .15s;}

/* ── Light-Mode-Tiefe ──────────────────────────────────────────── */
body.light .month-kpis .kpi{
  background:var(--card);
  box-shadow:0 1px 2px rgba(var(--surface-rgba-base),.04);
}
body.light .month-kpis .kpi:hover{
  box-shadow:0 2px 8px rgba(var(--surface-rgba-base),.06);
  border-color:var(--border2);
}
body.light .month-kpis .kpi-hero{box-shadow:0 1px 3px rgba(var(--surface-rgba-base),.06);}
body.light .month-kpis .kpi--saldo-income .kpi-label::before{background:var(--green);}
body.light .month-kpis .kpi--saldo-expense .kpi-label::before{background:var(--red);}
body.light .mh-status-chip{background:var(--bg3);border-color:var(--border);color:var(--text2);}
body.light .mh-status-chip--open{background:rgba(96,165,250,.12);border-color:rgba(96,165,250,.32);color:var(--blue);}
body.light .mh-status-chip--closed{background:var(--tone-good-bg);border-color:var(--tone-good-border);color:var(--tone-good-fg);}
body.light .mh-status-chip--readonly{background:var(--tone-poor-bg);border-color:var(--tone-poor-border);color:var(--tone-poor-fg);}
body.light .tx-filter-bar .filter-pill{background:var(--bg3);border-color:var(--border);}
body.light .tx-filter-bar .filter-pill .filter-count{background:var(--bg2);}
body.light .tx-filter-bar .filter-pill:hover{background:var(--card);border-color:var(--border2);}
body.light .tx-filter-bar .filter-pill.active{background:var(--tone-warn-bg);border-color:var(--tone-warn-border);color:var(--tone-warn-text);}
body.light .tx-filter-bar .filter-pill.active .filter-count{background:var(--accent-soft);color:var(--tone-warn-text);}
body.light .tx-filter-bar .filter-search input{background:var(--bg3);}
body.light .tx-filter-bar .filter-search input:focus{background:var(--card);box-shadow:0 0 0 3px rgba(232,184,75,.20);}
body.light .tx-wrap table thead th{background:var(--card2);border-bottom-color:var(--border);}
body.light .tx-wrap table tbody tr:hover td{background:rgba(var(--surface-rgba-base),.04);}
body.light .tx-wrap table thead th.th-active{color:var(--text);}

/* ── Mobile/Touch-Anpassungen (bestehende Patterns nicht zerstoeren) */
@media(max-width:640px){
  /* Status-Row darf umbrechen, Buchungs-Count rückt unter Chip */
  .mh-status-row{gap:6px;}
  .mh-status-sep{display:none;}
  .mh-status-count{flex-basis:100%;}
  /* KPI-Hero bleibt prominent, andere KPIs bleiben unverändert in
     Position. Touch-Tap-Target via existing min-height wird nicht
     zusätzlich erzwungen — KPIs sind keine Klick-Targets. */
}
@media(pointer:coarse){
  /* Filter-Pill bleibt mind. 36px hoch fuer Touch */
  .tx-filter-bar .filter-pill{min-height:36px;height:auto;}
}
.mh-cockpit--good::before{background:linear-gradient(90deg,var(--green),transparent 65%);opacity:.85;}
.mh-cockpit--warn::before{background:linear-gradient(90deg,var(--accent),transparent 65%);opacity:.95;}
.mh-cockpit--info::before{background:linear-gradient(90deg,var(--blue,var(--tone-info-fg)),transparent 65%);opacity:.7;}
/* Surface-Tint pro Tone (subtil, alpha .03–.04) */
.mh-cockpit--good{background:linear-gradient(180deg,var(--card),rgba(52,211,153,.04));}
.mh-cockpit--warn{background:linear-gradient(180deg,var(--card),rgba(232,184,75,.04));border-color:rgba(232,184,75,.22);}
.mh-cockpit--info{background:linear-gradient(180deg,var(--card),rgba(96,165,250,.04));}
.mh-cockpit:hover{box-shadow:0 1px 6px rgba(0,0,0,.10);}

.mh-cockpit-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:18px;flex-wrap:wrap;
}
.mh-cockpit-title-area{flex:1;min-width:0;}
.mh-cockpit-eyebrow{
  font-size:10.5px;
  font-weight:var(--fw-semibold);
  text-transform:uppercase;
  letter-spacing:.10em;
  color:var(--text3);
  margin-bottom:6px;
  display:flex;align-items:center;gap:7px;
}
.mh-cockpit-eyebrow::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:var(--text3);opacity:.5;
  flex-shrink:0;
}
.mh-cockpit--good .mh-cockpit-eyebrow::before{background:var(--green);opacity:.9;}
.mh-cockpit--warn .mh-cockpit-eyebrow::before{background:var(--accent);opacity:1;}
.mh-cockpit--info .mh-cockpit-eyebrow::before{background:var(--blue,var(--tone-info-fg));opacity:.85;}
.mh-cockpit-title{
  margin:0 0 4px;
  font-size:16px;
  font-weight:var(--fw-bold);
  color:var(--text);
  letter-spacing:-.01em;
  line-height:1.25;
}
.mh-cockpit-hint{
  font-size:12.5px;
  color:var(--text2);
  line-height:1.5;
  max-width:580px;
}
.mh-cockpit-actions{
  display:flex;gap:8px;align-items:center;flex-shrink:0;
  padding-top:2px;
}

/* Cockpit-Buttons — eigene Sprache, weil sie im Cockpit-Surface stehen
   und sich von .btn unterscheiden müssen. */
.mh-cockpit-btn{
  display:inline-flex;align-items:center;gap:6px;
  height:36px;
  padding:0 16px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--bg2);
  color:var(--text);
  font-size:12.5px;
  font-weight:var(--fw-semibold);
  font-family:inherit;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s;
}
.mh-cockpit-btn:hover{border-color:var(--border2);background:var(--card2);}
.mh-cockpit-btn:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(232,184,75,.18);}
.mh-cockpit-btn--primary{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--accent-ink);
}
.mh-cockpit-btn--primary:hover{
  background:var(--accent3,var(--accent));
  border-color:var(--accent3,var(--accent));
  box-shadow:0 1px 6px rgba(232,184,75,.18);
}
.mh-cockpit-btn--ghost{
  background:transparent;
  border-color:var(--border);
  color:var(--text2);
  font-weight:var(--fw-medium);
}
.mh-cockpit-btn--ghost:hover{color:var(--text);background:var(--bg2);}

/* Status-Stats: kompakte Pills mit Label + Wert. Drei Stats max
   (Buchungen / Saldo / Belege). Saldo trägt Tone-Variante. */
.mh-cockpit-stats{
  display:flex;gap:10px;flex-wrap:wrap;
  padding-top:14px;
  border-top:1px solid var(--border);
}
.mh-cockpit-stat{
  display:flex;flex-direction:column;gap:2px;
  padding:8px 14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--bg2);
  min-width:100px;
}
.mh-cockpit-stat-label{
  font-size:10.5px;
  font-weight:var(--fw-semibold);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text3);
}
.mh-cockpit-stat-val{
  font-size:14.5px;
  font-weight:var(--fw-bold);
  color:var(--text);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.005em;
}
/* Saldo-Tone-Variante */
.mh-cockpit-stat--saldo-income{border-color:rgba(52,211,153,.20);}
.mh-cockpit-stat--saldo-expense{border-color:rgba(248,113,113,.20);}
.mh-cockpit-stat--saldo-neutral{border-color:var(--border);}
/* Belege-Tone-Variante */
.mh-cockpit-stat--belege-good{border-color:rgba(52,211,153,.20);}
.mh-cockpit-stat--belege-good .mh-cockpit-stat-val{color:var(--green);}
.mh-cockpit-stat--belege-warn{border-color:rgba(232,184,75,.28);background:rgba(232,184,75,.04);}
.mh-cockpit-stat--belege-warn .mh-cockpit-stat-val{color:var(--accent);}

/* ── Light-Mode-Tiefe ──────────────────────────────────────────── */
body.light .mh-cockpit{
  box-shadow:0 1px 2px rgba(var(--surface-rgba-base),.04);
}
body.light .mh-cockpit:hover{
  box-shadow:0 2px 10px rgba(var(--surface-rgba-base),.06);
}
body.light .mh-cockpit--good{background:linear-gradient(180deg,var(--card),var(--tone-good-bg));}
body.light .mh-cockpit--warn{background:linear-gradient(180deg,var(--card),var(--tone-warn-bg));border-color:var(--tone-warn-border);}
body.light .mh-cockpit--info{background:linear-gradient(180deg,var(--card),var(--tone-info-bg));}
body.light .mh-cockpit-stat{background:var(--bg3);border-color:var(--border);}
body.light .mh-cockpit-stat--belege-good{border-color:var(--tone-good-border);}
body.light .mh-cockpit-stat--belege-good .mh-cockpit-stat-val{color:var(--tone-good-fg);}
body.light .mh-cockpit-stat--belege-warn{border-color:var(--tone-warn-border);background:var(--tone-warn-bg);}
body.light .mh-cockpit-stat--belege-warn .mh-cockpit-stat-val{color:var(--tone-warn-text);}
body.light .mh-cockpit-btn{background:var(--bg3);}
body.light .mh-cockpit-btn:hover{background:var(--card2);}
/* Primary muss im Light-Mode den Accent-Fill behalten — die generische
   body.light .mh-cockpit-btn-Regel (gleiche Spezifität) würde ihn sonst
   mit --bg3 übermalen (Late-Cascade-Override, analog mh-inspector-btn--primary). */
body.light .mh-cockpit-btn--primary{background:var(--accent);color:var(--accent-ink);}
body.light .mh-cockpit-btn--primary:hover{background:var(--accent3,var(--accent));}

/* ── Mobile-Stack ──────────────────────────────────────────────── */
@media(max-width:640px){
  .mh-cockpit{padding:16px 16px 14px;border-radius:12px;}
  .mh-cockpit-head{flex-direction:column;gap:14px;}
  .mh-cockpit-actions{width:100%;}
  .mh-cockpit-btn{flex:1;justify-content:center;}
  .mh-cockpit-stats{gap:8px;}
  .mh-cockpit-stat{flex:1 1 auto;min-width:0;padding:8px 12px;}
  .mh-cockpit-stat-val{font-size:13.5px;}
}
@media(pointer:coarse){
  .mh-cockpit-btn{min-height:44px;padding:0 18px;}
}

/* ==================================================================
   MONATSANSICHT — Phase-2-Rest (2026-05-02)
   ----------------------------------------------------------------------
   Drei Features in einem PR (User-Vorgabe):
   A) Bulk-Bar als sticky Bottom-Bar (CSS-only)
   B) Tagesgruppierung (opt-in: Date-Sort + >30 Buchungen, kein Mobile)
   C) Inspector-Panel rechts auf Desktop >=1280px (additive Aside)

   Konsequenzen:
   - Inspector hat KEINE selection-Detail-Anzeige (ohne Mocks zu hohes
     Risiko); zeigt nur Status-Aggregation + Quick-Actions.
   - Tagesgruppierung greift nur bei Date-Sort, sonst macht sie keinen
     visuellen Sinn (Buckets würden zerrissen).
   - Bulk-Bar bleibt funktional gleich, nur visuell sticky.

   Constraints:
   - Mobile month-sheet/detail-sheet unangetastet
   - Bestehende globale .bulk-bar/.tx-day-* nicht überschrieben
     (alle Polish-Selektoren sind .tx-wrap-scoped oder neu)
   ================================================================== */

/* ── Workspace-Wrapper: Layout-Grid auf Desktop, Block sonst ──────
   Sweep Q (2026-05-03): Layout-Fix für abgeschnittene Tabelle.
   Bug-Symptom: Auf Desktop >=1280px blieb die Tabelle in der minmax(0,1fr)-
   Grid-Spalte, schnitt aber rechts ab (Saldo + Aktionen-Spalte unsichtbar).
   Wurzel: `.tx-wrap` hat keinen expliziten min-width:0, sodass der
   Tabelleninhalt (table min-width:720px) die Spalte aufbläht und der
   minmax(0,…)-Mechanismus nicht greift. Fix: explizit min-width:0 auf
   die Tabellenspalte des Workspace-Grids + table-wrap muss horizontal
   scrollbar bleiben (overflow-x:auto im Bestand). Inspector bleibt 320px. */
.month-workspace{display:block;}
@media(min-width:1280px){
  .month-workspace{
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    gap:18px;
    align-items:start;
  }
  .month-workspace > .tx-wrap{min-width:0;}
}

/* ── Feature A: Bulk-Bar als sticky Bottom-Bar ─────────────────── */
/* Globale .bulk-bar bleibt unverändert. Polish ist scoped via .tx-wrap. */
/* 2026-05-03 Sweep P (Opus-Review WARN-1 auf #1422): padding-bottom-
   Kompensation, damit die sticky Bulk-Bar nicht die letzten 2-3
   Transaktions-Zeilen überlagert wenn Bulk-Mode aktiv ist. 64px ≈
   bulk-bar-Höhe (10+10 padding + ~24px content + 4px border + Schatten). */
.tx-wrap:has(> .bulk-bar.visible){padding-bottom:64px;}
.tx-wrap > .bulk-bar.visible{
  position:sticky;
  bottom:0;
  z-index:10;
  margin:0;
  padding:10px 16px;
  background:rgba(232,184,75,.10);
  border-top:1px solid rgba(232,184,75,.28);
  border-bottom:1px solid rgba(232,184,75,.28);
  box-shadow:0 -2px 12px rgba(0,0,0,.18);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
@supports not (backdrop-filter:blur(6px)){
  .tx-wrap > .bulk-bar.visible{background:rgba(232,184,75,.16);}
}
body.light .tx-wrap > .bulk-bar.visible{
  background:rgba(232,184,75,.22);
  border-top-color:rgba(217,165,32,.45);
  border-bottom-color:rgba(217,165,32,.45);
  box-shadow:0 -2px 12px rgba(var(--surface-rgba-base),.08);
}
@media(max-width:640px){
  .tx-wrap > .bulk-bar.visible{
    padding:10px 12px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
  }
}

/* ── Feature B: Tagesgruppierung-Header in der Tabelle ──────────── */
.tx-day-header{background:transparent;}
.tx-day-header td{
  padding:14px 12px 6px !important;
  background:transparent !important;
  border-bottom:1px solid var(--border) !important;
  font-size:11.5px;
  color:var(--text2);
  letter-spacing:.01em;
  position:relative;
}
.tx-day-header td::before{
  content:"";
  position:absolute;left:12px;right:12px;top:0;height:1px;
  background:linear-gradient(90deg,var(--border) 0%,transparent 70%);
  opacity:.45;
}
.tx-day-header:first-child td::before{display:none;}
.tx-day-date{
  display:inline-block;
  font-weight:var(--fw-semibold);
  color:var(--text2);
  font-size:11.5px;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-right:14px;
  font-variant-numeric:tabular-nums;
}
.tx-day-meta{
  display:inline-block;
  font-size:11px;
  color:var(--text3);
  margin-right:14px;
  font-variant-numeric:tabular-nums;
}
.tx-day-total{
  display:inline-block;
  float:right;
  font-size:12px;
  font-weight:var(--fw-bold);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.005em;
}
/* Mobile: Day-Header ausblenden — mobile zeigt month-sheet als Liste */
@media(max-width:640px){
  .tx-day-header{display:none !important;}
}
/* Print: auch ausblenden */
@media print{
  .tx-day-header{display:none !important;}
}

/* ── Feature C: Inspector-Panel (>=1280px) ──────────────────────── */
/* Auf <1280px komplett ausgeblendet — bestehender Cockpit-Card unten
   übernimmt dann die Status-Funktion. */
.mh-inspector{display:none;}
@media(min-width:1280px){
  .mh-inspector{
    display:flex;flex-direction:column;gap:14px;
    position:sticky;
    /* Layout-Refactor 2026-05-06: --page-sticky-top kippt in v2-Desktop auf 0. */
    top:calc(var(--page-sticky-top) + 16px);
    align-self:start;
    padding:18px 18px 16px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--card);
    overflow:hidden;
  }
  .mh-inspector--good{background:linear-gradient(180deg,var(--card),rgba(52,211,153,.04));}
  .mh-inspector--warn{background:linear-gradient(180deg,var(--card),rgba(232,184,75,.04));border-color:rgba(232,184,75,.22);}
  .mh-inspector--info{background:linear-gradient(180deg,var(--card),rgba(96,165,250,.04));}
}

/* ════════════════════════════════════════════════════════════════════
   MONATSANSICHT — Sweep DD Cherry-Pick (Iteration 2, 2026-05-09): Inspector-Card nur noch leicht goldene Umrandung statt Top-Bar; Codex-P3 error-Tone-Fix für Inspector; Light-Mode-Tiefe.
   Ausgeschnitten aus _20-dashboard.css (PR-S1.6c, 2026-05-25, FINALER PR).
   Quelle: _20-dashboard.css Z. 605–766 (pre-split, origin/main 8aaad09c).
   Plan: docs/architecture/2026-05-16-dashboard-css-split-plan.md

   Teil 3/8 der Monatsansicht-Partials. MANIFEST-Position direkt nach
   `_45f-cockpit-yc-strip.css` und VOR `_20b-dashboard-inline-fixes.css`,
   damit Source-Order-Cascade der Monatsansicht-Selektoren erhalten bleibt
   (spätere `_20b/c/d/e`-Inline-Fixes dürfen weiterhin überschreiben).

   `_20-dashboard.css` wurde in PR-S1.6c komplett GELÖSCHT — alle ursprünglichen
   Selektoren leben jetzt in `_20a*`, `_40a/b`, `_45a-f`, `_25a-h`, `_15a`,
   `_52e`, `_20c`.
   ════════════════════════════════════════════════════════════════════ */
/* Sweep DD-Cherry-Pick (2026-05-09, Iteration 2): kein Top-Bar mehr —
   die Inspector-Card identifiziert sich nur noch über eine leicht goldene
   Umrandung. Vorherige ::before-Regel (sowohl der originale state-abhängige
   Farbverlauf als auch der temporäre solide Gold-Balken) wird hier neutralisiert.
   `display:none` reicht, weil das Pseudo-Element absolut positioniert war —
   die Card-Höhe wird nicht beeinflusst.
   Codex P3 Fix (2026-05-09): --error-Variant in beide Listen aufgenommen,
   damit die Error-Card (pruefErrors > 0) ebenfalls keinen Top-Bar zeigt
   und denselben gold-getönten Border bekommt. */
.mh-inspector::before,
.mh-inspector--good::before,
.mh-inspector--warn::before,
.mh-inspector--info::before,
.mh-inspector--error::before{
  display:none;
}
/* Leicht goldene Umrandung als einziger Akzent. Border-Color override
   auf alle Tone-Variants gleich, damit der Look konsistent bleibt. */
.mh-inspector,
.mh-inspector--good,
.mh-inspector--warn,
.mh-inspector--info,
.mh-inspector--error{
  border-color:rgba(232,184,75,.22);
}

.mh-inspector-status{display:flex;flex-direction:column;gap:6px;position:relative;}
.mh-inspector-eyebrow{
  font-size:10px;
  font-weight:var(--fw-semibold);
  text-transform:uppercase;
  letter-spacing:.10em;
  color:var(--text3);
  display:flex;align-items:center;gap:7px;
}
.mh-inspector-eyebrow::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:var(--text3);opacity:.55;flex-shrink:0;
}
.mh-inspector--good .mh-inspector-eyebrow::before{background:var(--green);opacity:.9;}
.mh-inspector--warn .mh-inspector-eyebrow::before{background:var(--accent);opacity:1;}
.mh-inspector--info .mh-inspector-eyebrow::before{background:var(--blue,var(--tone-info-fg));opacity:.85;}
/* Codex P3 Fix (2026-05-09): error-Tone für Inspector ergänzt. Iter 1 hat
   stateTone='error' für pruefErrors > 0 eingeführt, aber CSS hatte nur
   --good/--warn/--info — Eyebrow-Dot + State-Label fielen auf neutralen
   Default zurück statt rot. */
.mh-inspector--error .mh-inspector-eyebrow::before{background:var(--red);opacity:1;}
.mh-inspector-state{
  font-size:15px;
  font-weight:var(--fw-bold);
  color:var(--text);
  letter-spacing:-.01em;
  line-height:1.2;
}
.mh-inspector-state--good{color:var(--green);}
.mh-inspector-state--warn{color:var(--accent);}
.mh-inspector-state--info{color:var(--blue,var(--tone-info-fg));}
.mh-inspector-state--error{color:var(--red);}

.mh-inspector-stats{
  display:flex;flex-direction:column;gap:8px;
  padding-top:12px;
  border-top:1px solid var(--border);
}
.mh-inspector-stat{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:12px;
}
.mh-inspector-stat-label{
  font-size:10.5px;
  font-weight:var(--fw-semibold);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text3);
}
.mh-inspector-stat-val{
  font-size:13px;
  font-weight:var(--fw-bold);
  color:var(--text);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.005em;
}
.mh-inspector-stat--good .mh-inspector-stat-val{color:var(--green);}
.mh-inspector-stat--warn .mh-inspector-stat-val{color:var(--accent);}

.mh-inspector-filter-hint{
  font-size:11px;
  color:var(--text3);
  padding:8px 10px;
  border-radius:8px;
  background:var(--bg2);
  border:1px solid var(--border);
  line-height:1.4;
}

.mh-inspector-actions{
  display:flex;flex-direction:column;gap:6px;
  padding-top:8px;
  border-top:1px solid var(--border);
}
.mh-inspector-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:32px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--bg2);
  color:var(--text);
  font-size:12px;
  font-weight:var(--fw-semibold);
  font-family:inherit;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s;
}
.mh-inspector-btn:hover{border-color:var(--border2);background:var(--card2);}
.mh-inspector-btn:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(232,184,75,.18);}
.mh-inspector-btn--primary{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--bg);
  font-weight:var(--fw-semibold);
}
.mh-inspector-btn--primary:hover{background:var(--accent);border-color:var(--accent);filter:brightness(1.04);}
.mh-inspector-btn--disabled,
.mh-inspector-btn[disabled]{
  opacity:.5;
  cursor:not-allowed;
  pointer-events:none;
}
.mh-inspector-action-hint{
  font-size:11px;
  color:var(--text3);
  text-align:center;
  margin-top:-4px;
}
.mh-inspector-btn--ghost{
  background:transparent;
  color:var(--text2);
  font-weight:var(--fw-medium);
}
.mh-inspector-btn--ghost:hover{color:var(--text);background:var(--bg2);}

/* Light-Mode-Tiefe für Inspector */
body.light .mh-inspector{
  box-shadow:0 1px 2px rgba(var(--surface-rgba-base),.04);
}
body.light .mh-inspector--good{background:linear-gradient(180deg,var(--card),var(--tone-good-bg));}
body.light .mh-inspector--warn{background:linear-gradient(180deg,var(--card),var(--tone-warn-bg));border-color:var(--tone-warn-border);}
body.light .mh-inspector--info{background:linear-gradient(180deg,var(--card),var(--tone-info-bg));}
body.light .mh-inspector-btn{background:var(--bg3);}
body.light .mh-inspector-btn:hover{background:var(--card2);}
body.light .mh-inspector-btn--primary{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--accent-ink);
}
body.light .mh-inspector-btn--primary:hover{background:var(--accent);border-color:var(--accent);}
body.light .mh-inspector-filter-hint{background:var(--bg3);}

/* ════════════════════════════════════════════════════════════════════
   MONATSANSICHT — Phase 3: Inspector Live-Selection + Pruefen-Counter (2026-05-03) + Sweep Q Polish-Nachbesserung (Sticky-Tabellen-Header, Inspector stärker, Bereit-Verdict-Block) + Sweep R-Fix + DD Iter 3 (Gold-Strich entfernen) + DD Iter 4 (Row-Background-Tints entfernen).
   Ausgeschnitten aus _20-dashboard.css (PR-S1.6c, 2026-05-25, FINALER PR).
   Quelle: _20-dashboard.css Z. 767–1073 (pre-split, origin/main 8aaad09c).
   Plan: docs/architecture/2026-05-16-dashboard-css-split-plan.md

   Teil 4/8 der Monatsansicht-Partials. MANIFEST-Position direkt nach
   `_45f-cockpit-yc-strip.css` und VOR `_20b-dashboard-inline-fixes.css`,
   damit Source-Order-Cascade der Monatsansicht-Selektoren erhalten bleibt
   (spätere `_20b/c/d/e`-Inline-Fixes dürfen weiterhin überschreiben).

   `_20-dashboard.css` wurde in PR-S1.6c komplett GELÖSCHT — alle ursprünglichen
   Selektoren leben jetzt in `_20a*`, `_40a/b`, `_45a-f`, `_25a-h`, `_15a`,
   `_52e`, `_20c`.
   ════════════════════════════════════════════════════════════════════ */
/* ==================================================================
   MONATSANSICHT — Phase 3: Inspector Live-Selection + Pruefen-Counter
   (2026-05-03)
   ----------------------------------------------------------------------
   Erweitert den Phase-2-Inspector um:
   - error-Tone für Pruefen-Errors (kraeftiger als warn)
   - Live-Selection-Summary (eingeblendet wenn bulkSelected.size > 0,
     Live-Update via Hook in bulk-actions.js#updateBulkUI)
   ================================================================== */

/* Phase-3: error-Tone (Pruefen-Errors) — kräftiger als warn, klar als
   "muss behoben werden" lesbar. */
.mh-inspector-stat--error .mh-inspector-stat-val{color:var(--red);}

/* ── Phase-3: Inspector Live-Selection-Summary ──────────────────
   Wird live von _updateInspectorSelection() befüllt, wenn Bulk-Selection
   > 0. Bei Selection = 0 ist der Block via [hidden] ausgeblendet.
   Visuell als amber-getönte Card am oberen Rand des Inspectors —
   gleiche Sprache wie der sticky Bulk-Bar (Phase 2 Rest). */
.mh-inspector-selection{
  display:flex;flex-direction:column;gap:8px;
  padding:12px 14px;
  border:1px solid rgba(232,184,75,.28);
  border-radius:10px;
  background:rgba(232,184,75,.08);
  margin-bottom:2px;
}
.mh-inspector-selection[hidden]{display:none;}
.mh-inspector-eyebrow--selection::before{background:var(--accent) !important;opacity:1 !important;}
.mh-inspector-eyebrow--selection{color:var(--accent);}
.mh-inspector-selection-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.mh-inspector-selection-count{
  font-size:13px;
  font-weight:var(--fw-bold);
  color:var(--text);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.005em;
}
.mh-inspector-selection-clear{
  background:transparent;
  border:none;
  padding:2px 6px;
  margin:-2px -6px;
  border-radius:6px;
  color:var(--text3);
  font-size:11px;
  font-weight:var(--fw-semibold);
  font-family:inherit;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px;
  transition:color .15s,background .15s;
}
.mh-inspector-selection-clear:hover{color:var(--text);background:rgba(var(--surface-rgba-base),.06);}
.mh-inspector-selection-clear:focus-visible{outline:none;color:var(--text);box-shadow:0 0 0 2px rgba(232,184,75,.18);}
.mh-inspector-selection-stats{display:flex;flex-direction:column;gap:4px;}
.mh-inspector-selection-stat{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:12px;
}
/* Light-Mode: Selection-Block mit kräftigerer Tone-Farbe */
body.light .mh-inspector-selection{
  background:var(--tone-warn-bg);
  border-color:var(--tone-warn-border);
}
body.light .mh-inspector-eyebrow--selection{color:var(--tone-warn-text);}
body.light .mh-inspector-eyebrow--selection::before{background:var(--tone-warn-fg) !important;}

/* ==================================================================
   MONATSANSICHT — Polish-Nachbesserung (Sweep Q, 2026-05-03)
   ----------------------------------------------------------------------
   Vier kleine Nachbesserungen aus User-Review von Phase 1-3:
   1. Layout-Fix: tx-wrap min-width:0 (oben gefixt)
   2. Sticky Tabellen-Header (mit Topbar-Offset)
   3. Inspector staerker als "Monatspruefung"
   4. Tabellen-Header kontrastreicher + Problemzeilen subtil staerker
   5. Arbeitsmodi: Counts fuer Ohne-Beleg / Warnungen

   Kein Redesign. Keine Datenlogik. Keine DOM-Migration.
   ================================================================== */

/* ── Sticky Tabellen-Header (scoped via .tx-wrap) ──────────────────
   border-collapse:separate erzwingen, damit position:sticky auf <th>
   zuverlaessig funktioniert (border-collapse:collapse aus _10-shell.css
   waere sonst der Vorgaenger und macht sticky in mehreren Browsern
   instabil).

   top: Topbar-Hoehe + 4px Luft, damit kein Pixel-Bleed durch.
   background: card-Hintergrund, damit darunter scrollende Zeilen nicht
   durchscheinen.
   z-index: 5 (unter Bulk-Bar=10 und unter Inspector-Sticky=auto). */
.tx-wrap table{
  border-collapse:separate;
  border-spacing:0;
}
/* Sweep R-Fix (2026-05-03): Sticky-Header funktionierte nicht, weil
   .table-wrap mit overflow-x:auto zum sticky-Containing-Block wird
   (CSS-Spec: jedes overflow != visible erzeugt einen scroll-Container
   für position:sticky-Children). Der wrapper hat aber keine vertikale
   Bewegung → sticky greift nie.

   Sweep BB Follow-up (2026-05-06): UX-Entscheidung zugunsten eines einzigen
   Page-Scrolls. Die 25er-Pagination soll 25 sichtbare Seiten-Zeilen bedeuten,
   nicht einen zweiten Scroll-Container in der Buchungsliste. */
.tx-wrap > .table-wrap{
  max-height:none;
  overflow-x:auto;
  overflow-y:visible;
}
.tx-wrap table thead th{
  position:sticky;
  top:0;
  z-index:5;
  background:var(--card);
  /* Schatten-Trennung beim Scrollen — sehr subtil, nur wenn aktiv sticky */
  box-shadow:0 1px 0 var(--border);
}
body.light .tx-wrap table thead th{
  background:var(--card);
  box-shadow:0 1px 0 var(--border);
}
/* Mobile: identisches Single-Scroll-Prinzip — Touch-User scrollen die Page als
   Ganzes, nicht die Tabelle separat. */
@media(max-width:768px){
  .tx-wrap > .table-wrap{max-height:none;overflow-x:auto;overflow-y:visible;}
  .tx-wrap table thead th{position:static;}
}

/* ── Inspector staerker als Monatspruefung ──────────────────────
   - Eigener Titel ueber Status-Badge ("Monatspruefung")
   - Status-Liste mit deutlichen Statuszeilen
   - "Bereit zum Festschreiben?"-Aussage am Ende
   Realisierung ueber neue CSS-Klassen .mh-inspector-checklist und
   .mh-inspector-verdict; JS rendert sie additiv. */
.mh-inspector-section-title{
  font-size:14px;
  font-weight:var(--fw-bold);
  color:var(--text);
  letter-spacing:-.005em;
  margin:0 0 4px;
  display:flex;
  align-items:center;
  gap:7px;
}
.mh-inspector-section-title::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);opacity:.85;
  flex-shrink:0;
}
.mh-inspector-checklist{
  display:flex;flex-direction:column;gap:6px;
  padding-top:4px;
}
.mh-inspector-checklist-item{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:12px;
  color:var(--text2);
  padding:6px 8px;
  border-radius:6px;
  background:transparent;
  transition:background .12s;
}
.mh-inspector-checklist-item:hover{background:rgba(var(--surface-rgba-base),.025);}
.mh-inspector-checklist-label{
  display:flex;align-items:center;gap:7px;
  font-weight:var(--fw-medium);
}
.mh-inspector-checklist-label::before{
  content:"";
  width:8px;height:8px;border-radius:50%;
  background:var(--text3);opacity:.55;
  flex-shrink:0;
}
.mh-inspector-checklist-item--good .mh-inspector-checklist-label::before{background:var(--green);opacity:.95;}
.mh-inspector-checklist-item--warn .mh-inspector-checklist-label::before{background:var(--accent);opacity:1;}
.mh-inspector-checklist-item--error .mh-inspector-checklist-label::before{background:var(--red);opacity:1;}
.mh-inspector-checklist-value{
  font-size:11px;
  font-weight:var(--fw-bold);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.005em;
}
.mh-inspector-checklist-item--good .mh-inspector-checklist-value{color:var(--green);}
.mh-inspector-checklist-item--warn .mh-inspector-checklist-value{color:var(--accent);}
.mh-inspector-checklist-item--error .mh-inspector-checklist-value{color:var(--red);}
.mh-inspector-checklist-item--neutral .mh-inspector-checklist-value{color:var(--text3);}

/* "Bereit zum Festschreiben?"-Verdict-Block am Ende des Inspectors */
.mh-inspector-verdict{
  padding:10px 12px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--bg2);
  font-size:12px;
  line-height:1.45;
  margin-top:2px;
}
.mh-inspector-verdict--ready{
  background:rgba(52,211,153,.07);
  border-color:rgba(52,211,153,.30);
  color:var(--green);
}
.mh-inspector-verdict--blocked{
  background:rgba(232,184,75,.08);
  border-color:rgba(232,184,75,.32);
  color:var(--accent);
}
.mh-inspector-verdict--closed{
  background:rgba(96,165,250,.06);
  border-color:rgba(96,165,250,.26);
  color:var(--blue,var(--tone-info-fg));
}
.mh-inspector-verdict-title{
  font-weight:var(--fw-bold);
  letter-spacing:-.005em;
}
.mh-inspector-verdict-hint{
  margin-top:2px;
  font-size:11px;
  opacity:.85;
  font-weight:var(--fw-medium);
}
body.light .mh-inspector-verdict{background:var(--bg3);border-color:var(--border);}
body.light .mh-inspector-verdict--ready{background:var(--tone-good-bg);border-color:var(--tone-good-border);color:var(--tone-good-fg);}
body.light .mh-inspector-verdict--blocked{background:var(--tone-warn-bg);border-color:var(--tone-warn-border);color:var(--tone-warn-text);}
body.light .mh-inspector-verdict--closed{background:var(--tone-info-bg);border-color:var(--tone-info-border);color:var(--tone-info-fg);}

/* ── Tabellen-Header kontrastreicher ───────────────────────────────
   Kleiner Bump in Lesbarkeit: text2 statt text3, +1px font-size,
   etwas mehr Padding-Top fuer ruhigeres Atmen. Background bleibt
   var(--card) wegen Sticky-Anforderung. */
.tx-wrap table thead th{
  color:var(--text2);
  font-size:11px;
  padding-top:13px;
  padding-bottom:13px;
}
body.light .tx-wrap table thead th{color:var(--text2);}

/* ── Problemzeilen subtil staerker markieren ───────────────────────
   Drei optische Zustaende, alle additiv:
   - .tx-no-beleg: Buchung ohne Beleg → 2px Left-Border in warm-amber
   - .tx-row-issue-warn: hat eine Pruefen-Warnung → leicht warmer Hover
   - .tx-row-issue-error: hat einen Pruefen-Error → leicht warmer Hover

   Nicht laut: nur Border + sehr dezenter Background. Tx-Einnahme/-Ausgabe
   Color-Logik bleibt unveraendert. */
.tx-wrap table tbody tr.tx-no-beleg td:first-child,
.tx-wrap table tbody tr.tx-no-beleg td:nth-child(2){
  position:relative;
}
/* Sweep DD-Cherry-Pick (2026-05-09, Iter 3): vertikaler Gold-Strich an jeder
   "Beleg fehlt"-Tabellen-Zeile entfernt. Der "Beleg fehlt"-Chip in der Zeile
   kommuniziert den Status; der zusätzliche Strich ist redundant und passt
   nicht zur minimalen Inspector-Card-Ästhetik (nur leicht goldene Umrandung).
   Pseudo-Element bleibt im Code (display:none), damit der CSS-Aufbau für
   spätere Iterationen erhalten bleibt. */
.tx-wrap table tbody tr.tx-no-beleg td:first-child::before{
  display:none;
}
/* Sweep DD-Cherry-Pick (2026-05-09, Iter 4): Row-Background-Tints für
   tx-row-issue-warn / tx-row-issue-error in der Tabellenansicht entfernt.
   User-Brief: „im Vergleich zu live immer noch gold hinterlegt […] muss weg".
   Status-Kommunikation läuft jetzt über die Chips in der Beschreibungs-Zelle
   und über den Inspector-Status — keine zusätzlichen Row-Backgrounds nötig.
   Klassen .tx-row-issue-warn / -error bleiben am DOM (für künftige Iterationen
   und für Hover-/Selection-Patterns falls gewünscht), nur die visuellen
   Background-Tints werden auf transparent gesetzt. */
.tx-wrap table tbody tr.tx-row-issue-warn:not(:hover) td,
.tx-wrap table tbody tr.tx-row-issue-warn:hover td,
.tx-wrap table tbody tr.tx-row-issue-error:not(:hover) td,
.tx-wrap table tbody tr.tx-row-issue-error:hover td,
body.light .tx-wrap table tbody tr.tx-row-issue-warn:not(:hover) td,
body.light .tx-wrap table tbody tr.tx-row-issue-warn:hover td,
body.light .tx-wrap table tbody tr.tx-row-issue-error:not(:hover) td,
body.light .tx-wrap table tbody tr.tx-row-issue-error:hover td{
  background:transparent;
}

/* ── Filter-Pills: zusaetzliche Modi (Ohne Beleg, Warnungen) ──────
   Die existierenden .tx-filter-bar .filter-pill-Regeln sind schon da.
   Diese Erweiterung gibt den Modi "Ohne Beleg" und "Warnungen"
   eine subtile Tone-Variante im aktiven Zustand: warm-amber statt
   gold-Akzent — damit der User sieht, dass es ein "Problem-Filter"
   ist, kein neutraler. */
.tx-filter-bar .filter-pill--no-beleg.active{
  background:var(--tone-warn-bg);
  border-color:var(--tone-warn-border);
  color:var(--tone-warn-text);
}
.tx-filter-bar .filter-pill--no-beleg.active .filter-count{
  background:var(--accent-soft);
  color:var(--tone-warn-text);
}
.tx-filter-bar .filter-pill--warnings.active{
  background:rgba(232,184,75,.16);
  border-color:rgba(232,184,75,.42);
  color:var(--accent);
}
.tx-filter-bar .filter-pill--warnings.active .filter-count{
  background:rgba(232,184,75,.24);
  color:var(--accent);
}

/* ════════════════════════════════════════════════════════════════════
   MONATSANSICHT — Sweep V Overflow-Guard (2026-05-03): defensive Page-Container-Clipping + min-width:0 Wrapper-Kette. Sweep W (2026-05-03): Inspector als horizontale Card statt rechter Sidebar; <640px Mobile-hidden; >=1500px zurück zur Sidebar; KPI-Grid minmax(0,1fr).
   Ausgeschnitten aus _20-dashboard.css (PR-S1.6c, 2026-05-25, FINALER PR).
   Quelle: _20-dashboard.css Z. 1074–1297 (pre-split, origin/main 8aaad09c).
   Plan: docs/architecture/2026-05-16-dashboard-css-split-plan.md

   Teil 5/8 der Monatsansicht-Partials. MANIFEST-Position direkt nach
   `_45f-cockpit-yc-strip.css` und VOR `_20b-dashboard-inline-fixes.css`,
   damit Source-Order-Cascade der Monatsansicht-Selektoren erhalten bleibt
   (spätere `_20b/c/d/e`-Inline-Fixes dürfen weiterhin überschreiben).

   `_20-dashboard.css` wurde in PR-S1.6c komplett GELÖSCHT — alle ursprünglichen
   Selektoren leben jetzt in `_20a*`, `_40a/b`, `_45a-f`, `_25a-h`, `_15a`,
   `_52e`, `_20c`.
   ════════════════════════════════════════════════════════════════════ */
/* ==================================================================
   MONATSANSICHT — Overflow-Guard (Sweep V, 2026-05-03)
   ----------------------------------------------------------------------
   Defensive Guards gegen horizontalen Page-Overflow. User-Report:
   "Die Seite erzeugt horizontalen Scroll" auf bestimmten Viewports/
   Zuständen — Live-Diagnose konnte den Fall nicht reproduzieren, aber
   die strukturellen Schutzmaßnahmen sind sinnvoll und risikoarm.

   Strategie:
   1. min-width:0 auf alle Wrapper-Kette → Grid-/Flex-Kinder können
      schrumpfen und sprengen den Container nicht
   2. overflow-x:clip auf .report-page--month als hartes Backstop —
      egal welches Kind-Element zu breit wird, nichts ragt raus
   3. .table-wrap behält overflow-x:auto — Tabelle scrollt intern wenn
      Spalten nicht passen, Page bleibt overflow-frei

   Constraints:
   - Scoped auf Monatsansicht (.report-page--month / .month-workspace /
     .tx-wrap / .table-wrap) — keine globalen Regeln
   - Keine DOM-Änderung, kein JS-Änderung
   - Mobile/Tablet unverändert
   ================================================================== */

/* Hartes Backstop: Page-Container clippt horizontal. Wenn ein Kind
   doch zu breit wird, schneidet es ab statt die Page zu sprengen.
   overflow-x:clip statt :hidden weil :clip keinen scroll-Container
   erzeugt → unser sticky-Header-Pattern (PR #1430) bleibt funktional. */
.report-page--month{overflow-x:clip;}

/* min-width:0 auf der gesamten Wrapper-Kette innerhalb der Monatsansicht.
   Default für Grid/Flex-Children ist min-width:auto = content-Breite,
   was den Container aufbläht. min-width:0 erlaubt das Schrumpfen. */
.report-page--month .month-workspace{min-width:0;}
.report-page--month .month-workspace > .tx-wrap,
.report-page--month .month-workspace > .mh-inspector{min-width:0;}
.report-page--month .tx-wrap{min-width:0;}
.report-page--month .table-wrap{min-width:0;max-width:100%;}
.report-page--month .month-kpis{min-width:0;}

/* Filter-Bar darf nicht durch Filter-Pills oder Sort-Dropdown
   horizontal überschießen. flex-wrap ist schon gesetzt, aber
   min-width:0 auf den Container schützt vor langen einzelnen Pills. */
.report-page--month .tx-filter-bar{min-width:0;}
.report-page--month .tx-filter-bar > *{min-width:0;}

/* ==================================================================
   MONATSANSICHT — Inspector als horizontale Card (Sweep W, 2026-05-03)
   ----------------------------------------------------------------------
   User-Feedback: Inspector als rechte Sidebar drueckte die Tabelle auf
   ~870-1010px zusammen. Tabelle ist die Hauptarbeitsflaeche und braucht
   horizontale Luft. Loesung:
   - 640-1499px: Inspector als horizontale Card OBERHALB der Tabelle
     (via order:-1 im flex-column-Workspace)
   - >=1500px: Inspector als vertikale Sidebar rechts (alte Variante)
   - <640px: Inspector hidden (Mobile zeigt month-sheet)

   .month-workspace muss von Grid auf Flex-Column wechseln auf <1500px,
   damit Inspector via order:-1 oberhalb der Tabelle stapelt.

   Constraints:
   - Keine DOM-Aenderung
   - .table-wrap behaelt nur horizontalen Overflow; vertikal scrollt die Page
   - Mobile month-sheet unangetastet
   ================================================================== */

/* 1. Default + <1500px: einspaltig (ueberschreibt @media(min-width:1280px) Grid) */
@media(max-width:1499px){
  .month-workspace{
    display:flex !important;
    flex-direction:column;
    gap:18px;
  }
  .month-workspace > .tx-wrap{min-width:0;}
}

/* 2. 640-1499px: Inspector als horizontale Card oberhalb der Tabelle */
@media(min-width:640px) and (max-width:1499px){
  .mh-inspector{
    display:flex !important;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    gap:16px;
    order:-1;
    position:static !important;
    top:auto;
    max-height:none;
    padding:14px 18px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--card);
    overflow:hidden;
  }
  /* Status-Badge + State kompakt links */
  .mh-inspector-status{
    flex:0 0 auto;
    min-width:0;
  }
  /* Quick-Stats in Reihe (Buchungen + Saldo) */
  .mh-inspector-stats{
    display:flex !important;
    flex-direction:row;
    gap:14px;
    flex:0 0 auto;
    padding-top:0 !important;
    border-top:0 !important;
  }
  .mh-inspector-stat{
    flex-direction:row !important;
    gap:6px;
    align-items:baseline;
  }
  /* Checklist + Verdict in der Mitte, fluessig */
  .mh-inspector-checklist-wrap{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .mh-inspector-section-title{margin-bottom:0;font-size:11px;}
  .mh-inspector-checklist{
    display:flex !important;
    flex-direction:row;
    gap:10px;
    flex-wrap:wrap;
    padding-top:0 !important;
    border-top:0 !important;
  }
  .mh-inspector-checklist-item{padding:4px 8px;}
  .mh-inspector-verdict{
    margin-top:0;
    padding:6px 10px;
    font-size:11.5px;
    flex:0 0 auto;
  }
  /* Filter-Hinweis kompakt */
  .mh-inspector-filter-hint{
    flex:0 0 auto;
    margin:0;
  }
  /* Actions rechts mit margin-left:auto */
  .mh-inspector-actions{
    flex:0 0 auto;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:6px;
    margin-left:auto;
    padding-top:0 !important;
    border-top:0 !important;
  }
  .mh-inspector-btn{
    height:32px;
    padding:0 12px;
    font-size:12px;
  }
  /* Selection-Block bleibt voll-breit wenn aktiv (überlagert das row-Layout) */
  .mh-inspector-selection{
    flex:1 0 100%;
    order:-1;
  }
}

/* 3. <640px Mobile: Inspector hidden (month-sheet uebernimmt) */
@media(max-width:639px){
  .mh-inspector{display:none !important;}
}

/* 4. >=1500px: zurueck zur vertikalen Sidebar (alte Variante) */
@media(min-width:1500px){
  .month-workspace{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 320px;
    gap:18px;
    align-items:start;
  }
  .month-workspace > .tx-wrap{min-width:0;}
  .mh-inspector{
    display:flex !important;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:14px;
    order:0;
    position:sticky !important;
    top:calc(var(--topbar-height,96px) + 16px);
    align-self:start;
    padding:18px 18px 16px;
    overflow:hidden;
  }
  .mh-inspector-status{flex:0 0 auto;}
  .mh-inspector-stats{
    flex-direction:column !important;
    padding-top:12px !important;
    border-top:1px solid var(--border) !important;
  }
  .mh-inspector-stat{flex-direction:row !important;}
  .mh-inspector-checklist-wrap{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .mh-inspector-section-title{margin:0 0 4px;font-size:14px;}
  .mh-inspector-checklist{
    flex-direction:column !important;
    padding-top:4px;
  }
  .mh-inspector-actions{
    flex-direction:column !important;
    margin-left:0 !important;
    padding-top:8px !important;
    border-top:1px solid var(--border) !important;
  }
  .mh-inspector-selection{flex:0 0 auto;order:0;}
}

/* 5. KPI-Grid: minmax(0,1fr) absichern damit nichts spaltet */
.report-page--month .month-kpis{
  grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));
}

/* ════════════════════════════════════════════════════════════════════
   MONATSANSICHT — Sweep Y Compact Ledger List (2026-05-04): zwei Modi (Ledger/Tabelle), Toggle-Pills, Day-Header kompakt, Row-Spalten 1-4, Inline-Chips, Summen-Zeile, Light/Tablet/Mobile/Inspector-Stack.
   Ausgeschnitten aus _20-dashboard.css (PR-S1.6c, 2026-05-25, FINALER PR).
   Quelle: _20-dashboard.css Z. 1298–1666 (pre-split, origin/main 8aaad09c).
   Plan: docs/architecture/2026-05-16-dashboard-css-split-plan.md

   Teil 6/8 der Monatsansicht-Partials. MANIFEST-Position direkt nach
   `_45f-cockpit-yc-strip.css` und VOR `_20b-dashboard-inline-fixes.css`,
   damit Source-Order-Cascade der Monatsansicht-Selektoren erhalten bleibt
   (spätere `_20b/c/d/e`-Inline-Fixes dürfen weiterhin überschreiben).

   `_20-dashboard.css` wurde in PR-S1.6c komplett GELÖSCHT — alle ursprünglichen
   Selektoren leben jetzt in `_20a*`, `_40a/b`, `_45a-f`, `_25a-h`, `_15a`,
   `_52e`, `_20c`.
   ════════════════════════════════════════════════════════════════════ */
/* ==================================================================
   MONATSANSICHT — Compact Ledger List (Sweep Y, 2026-05-04)
   ----------------------------------------------------------------------
   Zwei Modi:
   - 'ledger' (Default): Compact Liste (modernes Buchungs-Ledger)
   - 'table' (Legacy): bisherige Tabelle, ungestylt erhalten

   Hybrid-Modus aus Sweep X wurde entfernt (wirkte als kaputte Mischung
   aus Tabelle und Feed). Default ist jetzt die Compact Ledger List.

   Bewahrt alle DOM-Hooks: .tx-cb, .mark-btn, data-edit, data-action,
   id="row-{id}". Bulk-Selection und Inline-Edit funktionieren in beiden
   Modi unverändert.

   Density-Ziel: ~52–64px Row-Höhe (Standard), ~68–76px mit
   Warnung/Issue. Mindestens 12–18 Buchungen sichtbar pro Desktop-
   Viewport.
   ================================================================== */

/* ── Toggle-Pills im tx-head (zwei Modi: Liste / Tabelle) ──────── */
.tx-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.tx-head h3{margin:0;flex:0 0 auto;}
.tx-head-meta{display:flex;align-items:center;gap:14px;flex:1 1 auto;justify-content:flex-end;flex-wrap:wrap;}
.tx-head-count{font-size:10px;color:var(--text3);}
.tx-view-toggle{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:3px;
  border-radius:18px;
  background:var(--bg2);
  border:1px solid var(--border);
}
.tx-view-pill{
  background:transparent;
  border:0;
  padding:5px 14px;
  border-radius:14px;
  font-size:11.5px;
  font-weight:var(--fw-semibold);
  color:var(--text3);
  cursor:pointer;
  font-family:inherit;
  transition:background .15s,color .15s;
  letter-spacing:.01em;
}
.tx-view-pill:hover{color:var(--text2);}
.tx-view-pill.is-active{
  background:var(--card);
  color:var(--accent);
  box-shadow:0 1px 2px rgba(0,0,0,.10);
}
.tx-view-pill:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(232,184,75,.18);}
body.light .tx-view-toggle{background:var(--bg3);}
body.light .tx-view-pill.is-active{background:var(--card);box-shadow:0 1px 2px rgba(var(--surface-rgba-base),.06);}


/* ── Ledger Feed: Compact List ─────────────────────────────────
   Liste statt Cards: tighte Zeilen, kein Per-Row-Border, ein
   gemeinsamer Container, Trennlinien zwischen Zeilen. Sub-Zeile
   inline (alle Metadaten + Problem-Chips zusammen). */
.ledger-feed{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:0;
  background:var(--card);
  border-radius:0 0 var(--radius) var(--radius);
}
.ledger-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  background:transparent;
  border:0;
  border-top:1px solid var(--border);
  border-radius:0;
  min-height:54px;
  transition:background .12s;
}
.ledger-row:first-child{border-top:0;}
.ledger-row:hover{background:var(--bg2);}
/* Issue/no-beleg Rows: 4px Linker Strich statt voller Background */
.ledger-row.tx-no-beleg{box-shadow:inset 3px 0 0 0 rgba(232,184,75,.5);}
.ledger-row.tx-row-issue-error{box-shadow:inset 3px 0 0 0 rgba(248,113,113,.55);}
.ledger-row.tx-row-issue-warn{box-shadow:inset 3px 0 0 0 rgba(232,184,75,.55);}
.ledger-row.tx-row-issue-error.tx-no-beleg,
.ledger-row.tx-row-issue-warn.tx-no-beleg{box-shadow:inset 3px 0 0 0 rgba(232,184,75,.55);}
.ledger-row.marked{background:rgba(96,165,250,.04);}
.ledger-row.marked:hover{background:rgba(96,165,250,.08);}

/* ── Tagesheader: einzeilig, dezent ────────────────────────────── */
.ledger-day-header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 14px 6px;
  font-size:10.5px;
  font-weight:var(--fw-semibold);
  color:var(--text3);
  letter-spacing:.05em;
  text-transform:uppercase;
  background:var(--bg2);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  position:relative;
  line-height:1.4;
}
.ledger-feed > .ledger-day-header:first-child{border-top:0;}
.ledger-day-header + .ledger-row{border-top:0;}
.ledger-day-date{
  color:var(--text2);
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
}
.ledger-day-meta{
  color:var(--text3);
  font-variant-numeric:tabular-nums;
  font-weight:var(--fw-regular);
  text-transform:none;
  letter-spacing:0;
  font-size:10.5px;
}
.ledger-day-total{
  margin-left:auto;
  font-variant-numeric:tabular-nums;
  font-weight:var(--fw-bold);
  font-size:11.5px;
  letter-spacing:0;
  text-transform:none;
}

/* ── Row Spalte 1: Checkbox + Mark-Button ─────────────────────── */
.ledger-row-checks{
  display:flex;
  flex-direction:column;
  gap:3px;
  align-items:center;
  padding-right:0;
  border-right:0;
  margin-right:0;
}
.ledger-row-checks .tx-cb{margin:0;}

/* ── Row Spalte 2: Hauptinfo (Title + INLINE Sub-Zeile) ───────── */
.ledger-row-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.ledger-row-title{
  font-size:13.5px;
  font-weight:var(--fw-semibold);
  color:var(--text);
  letter-spacing:-.005em;
  cursor:text;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:6px;
  line-height:1.35;
}
.ledger-row-title:hover{color:var(--accent);}
/* Eine durchgehende Sub-Zeile mit Metadaten + Problem-Chips inline */
.ledger-row-sub{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:var(--text3);
  flex-wrap:wrap;
  line-height:1.4;
}
.ll-meta{white-space:nowrap;}
.ll-meta--typ.ll-typ-e{color:var(--green);font-weight:var(--fw-semibold);}
.ll-meta--typ.ll-typ-a{color:var(--text3);}
.ll-sep{color:var(--text3);opacity:.4;}
.ll-sep-spacer{margin-left:2px;margin-right:2px;}

/* ── Inline-Chips (deutlich kleiner als Sweep-X-Chips) ────────── */
.ll-chip{
  display:inline-flex;
  align-items:center;
  gap:3px;
  height:18px;
  padding:0 7px;
  border-radius:9px;
  font-size:10px;
  font-weight:var(--fw-semibold);
  letter-spacing:.02em;
  white-space:nowrap;
  background:var(--bg2);
  border:1px solid var(--border);
  color:var(--text3);
  line-height:1;
}
.ll-chip--warn{background:rgba(232,184,75,.10);border-color:rgba(232,184,75,.32);color:var(--accent);}
.ll-chip--error{background:rgba(248,113,113,.10);border-color:rgba(248,113,113,.32);color:var(--red);}
.ll-chip--info{background:rgba(96,165,250,.10);border-color:rgba(96,165,250,.32);color:var(--blue);}
.ll-chip--note{background:transparent;border-color:var(--border);color:var(--text3);}

.tx-range-label{
  font-size:12px;
  color:var(--text3);
  text-align:center;
  padding:8px 0 0;
}

/* ── Row Spalte 3: Betrag (rechts, prominent) ──────────────────── */
.ledger-row-amount{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:1px;
  flex:0 0 auto;
}
.ledger-row-brutto{
  font-size:14.5px;
  font-weight:var(--fw-bold);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
  cursor:text;
  line-height:1.2;
}
.ledger-row-brutto.vp{color:var(--green);}
.ledger-row-brutto.vn{color:var(--red);}
.ledger-row-brutto:hover{filter:brightness(1.15);}
.ledger-row-tax-meta{
  font-size:10px;
  color:var(--text3);
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
  line-height:1.2;
}

/* ── Row Spalte 4: Aktionen (Hover-Reveal) ─────────────────────── */
.ledger-row-actions{
  display:flex;
  align-items:center;
  gap:0;
  flex:0 0 auto;
  min-width:74px;
  justify-content:flex-end;
}
.ledger-action-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  padding:0;
  background:transparent;
  border:1px solid transparent;
  border-radius:5px;
  color:var(--text3);
  cursor:pointer;
  transition:all .12s;
  opacity:0;
}
.ledger-row:hover .ledger-action-btn,
.ledger-row:focus-within .ledger-action-btn{opacity:.85;}
.ledger-action-btn:hover{background:var(--bg2);color:var(--text);border-color:var(--border);opacity:1 !important;}
.ledger-action-btn:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(232,184,75,.18);opacity:1 !important;}
.ledger-action-btn--del:hover{color:var(--red);background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.32);}
/* GoBD/Lesezugriff Badges: kompakter machen */
.ledger-row-actions .gobd-badge{font-size:10px;padding:2px 7px;}

/* ── Summen-Zeile am Feed-Ende ─────────────────────────────────── */
.ledger-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:0;
  padding:12px 14px;
  background:var(--bg2);
  border-top:1px solid var(--border);
  border-radius:0 0 var(--radius) var(--radius);
  font-size:12px;
  font-weight:var(--fw-bold);
}
.ledger-summary > span:last-child{
  font-variant-numeric:tabular-nums;
  letter-spacing:-.005em;
}

/* ── Light-Mode-Parität ───────────────────────────────────────── */
body.light .ledger-feed{background:var(--card);}
body.light .ledger-row{background:transparent;}
body.light .ledger-row:hover{background:var(--bg2);}
body.light .ll-chip{background:var(--bg2);}
body.light .ledger-summary{background:var(--bg2);}

/* ── Tablet: kompakte Sub-Zeile bleibt zweizeilig wenn zu breit ─ */
@media(max-width:1024px){
  .ledger-row{padding:10px 12px;gap:10px;min-height:52px;}
  .ledger-row-title{font-size:13px;}
  .ledger-row-brutto{font-size:14px;}
  .ledger-row-actions{min-width:64px;}
  .ledger-action-btn{width:22px;height:22px;}
}

/* ── Mobile: Row als kompakte Card (gestackt) ─────────────────── */
@media(max-width:640px){
  .ledger-feed{background:transparent;}
  .ledger-row{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:
      "checks main amount"
      "checks sub sub"
      "checks actions actions";
    gap:6px 10px;
    padding:11px 12px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:10px;
    margin-bottom:6px;
    min-height:auto;
  }
  .ledger-row:first-child{border-top:1px solid var(--border);}
  /* Mobile: structure-driven assignment over flex-children */
  .ledger-row > .ledger-row-checks{grid-area:checks;align-self:start;flex-direction:column;gap:6px;}
  .ledger-row > .ledger-row-main{grid-area:main;}
  .ledger-row > .ledger-row-amount{grid-area:amount;align-items:flex-end;flex-direction:column;}
  .ledger-row > .ledger-row-actions{grid-area:actions;justify-content:flex-end;min-width:auto;}
  /* Sub-Zeile in eigenem Grid-Bereich auf Mobile (volle Breite) */
  .ledger-row-main .ledger-row-sub{grid-area:sub;}
  /* Mobile: Tap-Targets ≥ 44px für Action-Buttons */
  .ledger-action-btn{width:34px;height:34px;opacity:1;}
  .ledger-row-checks .tx-cb,
  .ledger-row-checks .mark-btn{min-width:24px;min-height:24px;}
  .ledger-day-header{padding:10px 12px 6px;}
  .tx-view-toggle{flex-shrink:0;}
}

/* ── Sehr schmale Viewports: Title bricht um ─────────────────── */
@media(max-width:380px){
  .ledger-row-title{white-space:normal;line-height:1.3;}
}

/* ── Inspector unter 1500px: NICHT rechts neben der Liste ─────
   Sweep Y: User-Auftrag verlangt explizit, dass der Monatsstatus
   die Buchungsliste nicht zusammendrückt. Schwelle für Sidebar wird
   von 1280px auf 1500px hochgezogen. Unter 1500px übernimmt die
   bestehende Cockpit-Card oben die Status-Funktion (war schon vor
   Sweep Y der Pfad für <1280px). */
@media(max-width:1499px){
  .month-workspace{
    display:block !important;
    grid-template-columns:none !important;
  }
  .month-workspace .mh-inspector{display:none !important;}
}
@media(min-width:1500px){
  .month-workspace{
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    gap:18px;
    align-items:start;
  }
  .month-workspace > .tx-wrap{min-width:0;}
  .month-workspace .mh-inspector{display:flex;}
}

/* ════════════════════════════════════════════════════════════════════
   MONATSANSICHT — Sweep Z (2026-05-05): Empty-State volle Breite, ELSTER-Chip, Steuer-Zelle, Geldbeträge nowrap, table-wrap overflow. Sweep AA (2026-05-05): Zero-State + Listen-Verdichtung. Sweep AB (2026-05-08): Desktop Ledger Polish.
   Ausgeschnitten aus _20-dashboard.css (PR-S1.6c, 2026-05-25, FINALER PR).
   Quelle: _20-dashboard.css Z. 1667–2126 (pre-split, origin/main 8aaad09c).
   Plan: docs/architecture/2026-05-16-dashboard-css-split-plan.md

   Teil 7/8 der Monatsansicht-Partials. MANIFEST-Position direkt nach
   `_45f-cockpit-yc-strip.css` und VOR `_20b-dashboard-inline-fixes.css`,
   damit Source-Order-Cascade der Monatsansicht-Selektoren erhalten bleibt
   (spätere `_20b/c/d/e`-Inline-Fixes dürfen weiterhin überschreiben).

   `_20-dashboard.css` wurde in PR-S1.6c komplett GELÖSCHT — alle ursprünglichen
   Selektoren leben jetzt in `_20a*`, `_40a/b`, `_45a-f`, `_25a-h`, `_15a`,
   `_52e`, `_20c`.
   ════════════════════════════════════════════════════════════════════ */
/* ==================================================================
   MONATSANSICHT — Sweep Z (2026-05-05)
   ----------------------------------------------------------------------
   Folge-Sweep nach Y. Bringt:
   - Empty-State volle Breite (.month-workspace--empty + .mes-card--empty)
   - ELSTER read-only Chip in Sub-Zeile (Tabelle: .tx-elster-status)
   - Steuer-Zelle als inline-flex Wrapper (.tx-tax-cell, kein €-Wrap)
   - Geldbeträge in der Tabelle: white-space:nowrap überall
   - Spalten leicht kompakter; ELSTER-Spalte raus (Tabelle hat 10 statt 11 Spalten)
   - Mobile-Empty-State: CTAs gestackt einspaltig
   ================================================================== */

/* ── Empty-State: volle Breite, Inspector hidden ─────────────────── */
.report-page--month .month-workspace--empty{
  display:block !important;
  grid-template-columns:none !important;
}
.report-page--month .month-workspace--empty .mh-inspector{display:none !important;}
.report-page--month .month-workspace--empty .tx-wrap{
  margin-inline:auto;
  max-width:720px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:0;
}
.report-page--month .month-workspace--empty .tx-wrap > .tx-head{display:none;}
.report-page--month .month-workspace--empty .tx-wrap > .tx-filter-bar{display:none;}

/* ── Empty-State Card-Spec ─────────────────────────────────────── */
.mes-card.mes-card--empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:48px 32px;
  background:transparent;
  border:0;
  gap:14px;
}
.mes-card--empty .mes-empty-eyebrow{
  align-self:flex-start;
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text3);
  margin-bottom:6px;
  font-weight:var(--fw-semibold);
}
.mes-card--empty .mes-icon--empty{
  display:flex;
  align-items:center;
  justify-content:center;
  width:auto;
  height:auto;
  background:transparent;
  border:0;
  margin:8px 0;
  color:var(--text3);
  opacity:.55;
}
.mes-card--empty .mes-empty-title{
  margin:0;
  font-size:22px;
  font-weight:var(--fw-semibold);
  color:var(--text);
  letter-spacing:-.005em;
  line-height:1.25;
}
.mes-card--empty .mes-empty-lead{
  font-size:14px;
  color:var(--text2);
  line-height:1.45;
  max-width:480px;
  margin:0 auto;
}
.mes-card--empty .mes-empty-lead strong{
  color:var(--text);
  font-weight:var(--fw-semibold);
}
.mes-card--empty .mes-ctas--empty{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:6px 0 4px;
  flex-wrap:wrap;
  justify-content:center;
}
.mes-card--empty .mes-empty-helper{
  font-size:12px;
  color:var(--text3);
  max-width:440px;
  line-height:1.5;
  /* Roman, kein italic — Decision D4 */
  font-style:normal;
}

/* Mobile: Empty-State CTAs einspaltig stacken — Decision D6 */
@media(max-width:640px){
  .mes-card.mes-card--empty{padding:32px 20px;}
  .mes-card--empty .mes-ctas--empty{
    flex-direction:column;
    align-items:stretch;
    width:100%;
    flex-wrap:nowrap;
  }
  .mes-card--empty .mes-ctas--empty .btn{
    width:100%;
    justify-content:center;
  }
}

/* ── Tabellen-Status-Chips (Sub-Zeile) ─────────── */
.tx-chip,
.tx-elster-status{
  display:inline-flex;
  align-items:center;
  height:18px;
  padding:0 7px;
  margin-left:6px;
  border-radius:9px;
  font-size:10px;
  font-weight:var(--fw-semibold);
  letter-spacing:.04em;
  background:rgba(96,165,250,.10);
  border:1px solid rgba(96,165,250,.32);
  color:var(--blue);
  vertical-align:middle;
  white-space:nowrap;
  flex-shrink:0;
}
.tx-chip svg{margin-right:4px;}
.tx-chip--warn{background:rgba(232,184,75,.10);border-color:rgba(232,184,75,.32);color:var(--accent);}
.tx-chip--error{background:rgba(248,113,113,.10);border-color:rgba(248,113,113,.32);color:var(--red);}
.tx-chip--info{background:rgba(96,165,250,.10);border-color:rgba(96,165,250,.32);color:var(--blue);}
body.light .tx-elster-status{background:rgba(96,165,250,.14);}

/* Tabellen-Sub-Zeile: flex-wrap damit Chip nicht wegdrückt */
.tx-wrap table .tx-secondary{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  font-size:11px;
  color:var(--text3);
}

/* ── Steuer-Zelle: inline-flex Wrapper, kein €-Wrap ───────────── */
.tx-tax-cell{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  white-space:nowrap;
}
.tx-tax-cell .tx-tax-amount{
  font-size:10px;
  color:var(--text3);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.tx-tax-cell .badge{
  flex-shrink:0;
}

/* ── Geldbeträge: white-space:nowrap überall in der Tabelle ────── */
.tx-wrap table td.vp,
.tx-wrap table td.vn,
.tx-wrap table td.tx-saldo,
.tx-wrap table td .tx-tax-cell{
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* ── Beschreibungs-Zelle: Ellipsis greifen lassen in Tabellen ─── */
.tx-wrap table td.tx-desc-cell{
  max-width:1px;  /* CSS-Trick: zwingt Tabelle, ellipsis auf .tx-primary durchzulassen */
}
.tx-wrap table td.tx-desc-cell .tx-primary{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
}

/* ── .table-wrap: explizit overflow-x:auto ────────────────────── */
.tx-wrap > .table-wrap{
  overflow-x:auto;
  overflow-y:visible;
}


/* ==================================================================
   MONATSANSICHT — Sweep AA (2026-05-05)
   ----------------------------------------------------------------------
   Zwei Themen: Zero-State aufräumen + Listenansicht verdichten.
   ================================================================== */

/* ── Zero-State: Empty-State-Card breiter (Spec: 860–920 px) ─────── */
.report-page--month .month-workspace--empty .tx-wrap{
  max-width:880px;
  /* Sweep AA: tx-head ist im Zero-State entfernt, Filter-Bar auch.
     Kein Card-Frame mehr — Empty-State-Card hat eigene Hülle. */
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
}
.report-page--month .month-workspace--empty .mes-card.mes-card--empty{
  max-width:880px;
  margin-inline:auto;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
}

/* tx-wrap--empty: Sub-Hülle hat keinen Header mehr, also kein gap */
.tx-wrap--empty{
  border:0;
  background:transparent;
}
.tx-wrap--empty > .tx-filter-bar{display:none;}

/* ── Listen-Ansicht verdichten ───────────────────────────────────
   Sweep AA: Liste war zu cardig (54 px min-height + viel Sub-Wrap).
   Neu: 56 px Standard, max ~72 px bei Issue/wrapped-Sub-Zeile.
   Sub-Zeile bleibt einzeilig (nowrap+overflow:hidden) bei normalen
   Buchungen; nur bei Issue-Chips darf sie ggf. wrappen.
   2026-05-05 (Opus-Review-Fix): Density via @media(min-width:1025px)
   gewrappt, damit @media(max-width:1024px) Tablet-Block (10/12, 52px,
   Z. ~4510) nicht durch Source-Order überschrieben wird. */
.ledger-feed{padding:0;}
@media(min-width:1025px){
  .ledger-row{
    gap:10px;
    padding:8px 14px;
    min-height:56px;
  }
}
.ledger-row-checks{padding-right:0;border-right:0;margin-right:0;}
.ledger-row-main{gap:1px;}
.ledger-row-title{
  font-size:13.5px;
  line-height:1.3;
}
.ledger-row-sub{
  font-size:11px;
  line-height:1.35;
  gap:5px;
  /* Default: einzeilig, ellipsis. flex-wrap nur wenn wirklich nötig
     (Issue + viele Chips) — siehe .ledger-row.tx-row-issue-* unten. */
  flex-wrap:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}
.ledger-row-amount{gap:0;}
.ledger-row-brutto{
  font-size:14px;
  line-height:1.2;
}
.ledger-row-tax-meta{
  font-size:10px;
  line-height:1.2;
}
.ledger-row-actions{min-width:62px;}
.ledger-action-btn{width:22px;height:22px;}

/* Bei Issue-Rows darf die Sub-Zeile umbrechen — gibt etwas mehr Platz
   für die zusätzlichen Problem-Chips. Höhe bleibt unter ~72 px. */
.ledger-row.tx-row-issue-error .ledger-row-sub,
.ledger-row.tx-row-issue-warn .ledger-row-sub,
.ledger-row.tx-no-beleg .ledger-row-sub{
  flex-wrap:wrap;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}

/* Tagesheader in der Liste: kompakter (war 8 px Padding) */
.ledger-day-header{
  padding:6px 14px 4px;
  font-size:10px;
}

/* Mobile: einzeilige Sub-Zeile schwer auf 360 px — dort wieder wrap.
   row-gap größer als column-gap, damit umgebrochene Chips (z.B. "Beleg
   fehlt") nicht direkt über/unter dem nächsten Meta-Wert (z.B. "19 %
   USt") kleben — sonst wirken beide Zeilen optisch verschmolzen. */
@media(max-width:640px){
  .ledger-row-sub{
    flex-wrap:wrap;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    row-gap:6px;
    column-gap:6px;
  }
  .ll-chip{margin:1px 0;}
}

/* ────────────────────────────────────────────────────────────────
   Sweep AB (2026-05-08): Desktop Ledger Polish
   ────────────────────────────────────────────────────────────────
   Brief: Desktop-Liste soll als „Desktop Ledger List" wirken — wie
   eine eigene polished SaaS-Card, nicht ein gestreckter Mobile-Stack.

   Scope: ausschließlich @media(min-width:1025px). Damit gilt:
   - Mobile (≤640px): unverändert (Mobile-Cards via @media(max-width:640))
   - Tablet (641-1024): unverändert (Sweep AA Defaults + Tablet-Overrides)
   - Desktop (≥1025px): NEUER Polish, überschreibt Sweep-AA-Werte (steht
     bewusst nach Sweep AA, gewinnt durch Source-Order auf gleicher
     Specificity)

   Inhalte:
   - Container max-width 1180px + zentriert (D6-C: nur in der Liste,
     nicht in .tx-wrap → Tabelle bleibt unangetastet)
   - Container border + voller Top-Radius, Bottom-Radius über
     ledger-summary visuell attached (Feed + Summary = eine Card)
   - Row-Höhe 68px (Brief: 64-76)
   - Title 14px, Brutto 16px (Brief: prominenter rechts)
   - Day-Header: stärkere Typografie, dezenter Gradient-Hintergrund,
     mehr Section-Charakter — NICHT sticky (overflow:hidden auf
     Container würde sticky brechen, bewusste Card-Optik gewinnt)
   - Action-Buttons: opacity .4 statt 0 → A11y-fix (Tastatur-User
     sehen die Buttons als ruhend, nicht als plötzlich auftauchend) */
@media(min-width:1025px){
  .ledger-feed{
    border:1px solid var(--border);
    border-bottom:0;
    border-radius:var(--radius) var(--radius) 0 0;
    overflow:hidden;
    max-width:min(1180px, 100%);
    margin-inline:auto;
  }
  .ledger-feed--empty{
    border-bottom:1px solid var(--border);
    border-radius:var(--radius);
  }
  .ledger-row{
    padding:12px 18px;
    gap:16px;
    min-height:68px;
  }
  .ledger-row-title{
    font-size:14px;
    line-height:1.4;
  }
  .ledger-row-brutto{
    font-size:16px;
    line-height:1.2;
    letter-spacing:-.015em;
  }
  /* Day-Header: Section-Charakter statt Mini-Eyebrow */
  .ledger-day-header{
    padding:11px 18px 9px;
    background:linear-gradient(180deg,var(--bg2),rgba(var(--surface-rgba-base),0));
    text-transform:none;
    letter-spacing:.01em;
    font-size:12px;
  }
  .ledger-day-date{
    font-size:13px;
    color:var(--text);
    font-weight:var(--fw-bold);
    letter-spacing:0;
  }
  .ledger-day-meta{
    font-size:11.5px;
    text-transform:none;
    letter-spacing:0;
  }
  .ledger-day-total{
    font-size:13px;
  }
  /* Action-Buttons: ruhend bei .4 statt 0 (D4) */
  .ledger-action-btn{opacity:.4;width:24px;height:24px;}
  .ledger-row:hover .ledger-action-btn,
  .ledger-row:focus-within .ledger-action-btn{opacity:1;}
  .ledger-row-actions{min-width:74px;}
  /* Summen-Zeile als visuelle Fortsetzung des Containers — gleiche
     max-width + zentriert, voller Border + Bottom-Radius. Border-Top
     ist die Naht zwischen Feed und Summary. */
  .ledger-summary{
    border:1px solid var(--border);
    border-radius:0 0 var(--radius) var(--radius);
    max-width:min(1180px, 100%);
    margin-inline:auto;
    padding:13px 18px;
  }
  /* Pagination + Range-Label sollen mit der gecappten Liste ausgerichtet
     bleiben, sonst springen sie in die volle Wrapper-Breite. */
  .ledger-feed + .tx-range-label,
  .ledger-feed + .tx-pagination,
  .tx-range-label + .tx-pagination{
    max-width:min(1180px, 100%);
    margin-inline:auto;
  }
}

/* ── Selected-Row (D2): wirklich subtil — 3px Accent-Inset + Soft-BG.
      Kein zusätzlicher Outline-Glow (User: „nicht zu viel Glow").
      .is-selected steht NACH den Issue-States in der Quelle, gewinnt
      also auf gleicher Specificity — bewusst, weil Selektion gerade
      die User-Fokus-Achse ist. Issue-Chips bleiben in der Sub-Zeile
      sichtbar, sodass kein Status-Signal verloren geht.
      Unscoped: gilt auch auf Mobile/Tablet — additives Feature, kein
      Mobile-Regression-Risk (vorher gab es keinen .is-selected-State). */
.ledger-row.is-selected{
  background:var(--accent-bg-soft);
  box-shadow:inset 3px 0 0 0 var(--accent);
}
.ledger-row.is-selected:hover{
  background:var(--accent-bg-soft);
  filter:brightness(1.04);
}
body.light .ledger-row.is-selected{background:var(--accent-bg-soft);}
body.light .ledger-row.is-selected:hover{background:var(--accent-bg-soft);filter:none;}

/* ── Empty-State (D1): Filter-no-result. Komplett-leere Monate
      werden vom Parent (tx-wrap--empty) abgefangen, hier nicht. */
.ledger-empty{
  padding:48px 24px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.ledger-empty-title{
  font-size:14px;
  font-weight:var(--fw-semibold);
  color:var(--text2);
}
.ledger-empty-cta{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
  font:inherit;
  font-size:12px;
  padding:7px 14px;
  border-radius:var(--radius-pill);
  cursor:pointer;
  transition:border-color .12s,background .12s,color .12s;
}
.ledger-empty-cta:hover{
  border-color:var(--accent);
  color:var(--accent);
}
.ledger-empty-cta:focus-visible{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(232,184,75,.18);
}

/* ── Empty-State Card etwas grösser (Spec 860-920) ──────────────── */
.mes-card.mes-card--empty{
  /* Sweep AA: max-width auf 880 px (war 720 px in Sweep Z). Padding generös. */
  max-width:880px;
  margin-inline:auto;
}
@media(min-width:1024px){
  .mes-card.mes-card--empty{padding:64px 48px;}
}

/* ════════════════════════════════════════════════════════════════════
   MONATSANSICHT — Sweep DD Cherry-Pick (2026-05-09): Iter 6 Filter-Bar Polish + Inspector-Slim + Hero-Saldo-Card. KPI v2 (Iter 7): zwei konsolidierte Hauptkarten (.kpi-card--saldo + .kpi-card--ust) mit aufklappbaren Details.
   Ausgeschnitten aus _20-dashboard.css (PR-S1.6c, 2026-05-25, FINALER PR).
   Quelle: _20-dashboard.css Z. 2127–2490 (pre-split, origin/main 8aaad09c).
   Plan: docs/architecture/2026-05-16-dashboard-css-split-plan.md

   Teil 8/8 der Monatsansicht-Partials. MANIFEST-Position direkt nach
   `_45f-cockpit-yc-strip.css` und VOR `_20b-dashboard-inline-fixes.css`,
   damit Source-Order-Cascade der Monatsansicht-Selektoren erhalten bleibt
   (spätere `_20b/c/d/e`-Inline-Fixes dürfen weiterhin überschreiben).

   `_20-dashboard.css` wurde in PR-S1.6c komplett GELÖSCHT — alle ursprünglichen
   Selektoren leben jetzt in `_20a*`, `_40a/b`, `_45a-f`, `_25a-h`, `_15a`,
   `_52e`, `_20c`.
   ════════════════════════════════════════════════════════════════════ */
/* ==================================================================
   MONATSANSICHT — Sweep DD Cherry-Pick (2026-05-09)
   ----------------------------------------------------------------------
   Aus dem geschlossenen PR #1712 (Sweep DD) gezielt rüber-gepickt:
   1) Filter-Bar Polish (inaktive Pills leiser, Count-Badge dezent,
      Sekundär-Controls per Separator abgetrennt)
   2) Inspector-Slim Klassen (Substate, Checks-Pillen, Link-Style)
   3) Gold-Bar-Override für .mh-inspector::before (siehe Block bei
      Zeile ~3561, ersetzt den alten state-abhängigen Farbverlauf)
   Mobile bleibt 1:1, Tabelle bleibt 1:1, KPI-Block + Cockpit + Header-
   Aktionen bleiben 1:1.
   ================================================================== */

/* ── Filter-Pills ruhiger machen ────────────────────────────────── */
/* Inaktive Pills auf var(--text3), Count-Badge dezent. Aktive Pills
   bleiben prominent (Override durch bestehende `.tx-filter-bar
   .filter-pill.active`-Regel bei Zeile ~3119). */
.tx-filter-bar .filter-pill{
  color:var(--text3);
  background:transparent;
}
.tx-filter-bar .filter-pill .filter-count{
  font-size:10.5px;
  color:var(--text3);
  background:transparent;
  border:0;
  padding:0 0 0 4px;
  font-weight:var(--fw-medium);
}
.tx-filter-bar .filter-pill.active .filter-count{
  color:var(--accent);
}
/* Sekundär-Controls (Zahlungsart + Sortieren) optisch als „Tools" trennen */
.tx-filter-bar .filter-secondary{
  position:relative;
  padding-left:10px;
}
.tx-filter-bar .filter-secondary::before{
  content:"";
  position:absolute;left:0;top:18%;bottom:18%;
  width:1px;
  background:var(--border);
}
.tx-filter-bar .filter-secondary .sort-btn{
  color:var(--text3);
}

/* ── Inspector-Slim: Substate + Inline-Checks + Link-Sekundär ───── */
.mh-inspector-substate{
  font-size:11.5px;
  color:var(--text3);
  font-variant-numeric:tabular-nums;
  margin-top:2px;
}
.mh-inspector-checks{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  padding-top:10px;
  border-top:1px solid var(--border);
}
.mh-inspector-check{
  display:flex;flex-direction:column;gap:2px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:transparent;
  min-width:0;
}
.mh-inspector-check-label{
  font-size:10.5px;
  font-weight:var(--fw-semibold);
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--text3);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mh-inspector-check-value{
  font-size:12px;
  font-weight:var(--fw-semibold);
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mh-inspector-check--good{border-color:rgba(52,211,153,.22);}
.mh-inspector-check--good .mh-inspector-check-value{color:var(--green);}
.mh-inspector-check--warn{border-color:rgba(232,184,75,.32);background:rgba(232,184,75,.05);}
.mh-inspector-check--warn .mh-inspector-check-value{color:var(--accent);}
.mh-inspector-check--error{border-color:rgba(248,113,113,.30);background:rgba(248,113,113,.05);}
.mh-inspector-check--error .mh-inspector-check-value{color:var(--red);}
body.light .mh-inspector-check--warn{background:rgba(232,184,75,.10);}
body.light .mh-inspector-check--error{background:rgba(248,113,113,.10);}

/* Dezenter Sekundär-Link im Action-Block (statt zweitem Outline-Button) */
.mh-inspector-link{
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;
  border:0;
  padding:6px 0;
  color:var(--text2);
  font-size:12px;
  font-weight:var(--fw-medium);
  font-family:inherit;
  cursor:pointer;
  text-decoration:none;
  transition:color .15s;
}
.mh-inspector-link:hover{color:var(--text);text-decoration:underline;}
.mh-inspector-link:focus-visible{outline:none;color:var(--accent);text-decoration:underline;}

/* Sweep DD-Cherry-Pick (2026-05-09, Iter 6): KPI-Karten oben verlieren ihren
   farbigen Top-Akzent-Strip (state-abhängige linear-gradient-Bars). User-Brief
   Option A: „komplett raus, nichts ersetzen". Die State-Erkennung läuft
   weiterhin über (a) den farbigen Mini-Punkt vor dem Label (.kpi-label::before)
   und (b) die Werte-Color (.vp grün / .vn rot etc.). Konsistent zum Inspector-
   Approach (Iter 2: Top-Bar weg, nur leicht goldener Border).

   Alle 8 ::before-Selektoren (Base + 6 State-Variants + Muted) in einer Regel
   zusammengefasst, damit die spezifischeren State-Overrides bei Z. 3067-3074
   nicht den display:none überstimmen. Die .kpi-label::before-Punkte (separate
   Selektor-Hierarchie) bleiben unverändert. */
.month-kpis .kpi::before,
.month-kpis .kpi--income::before,
.month-kpis .kpi--expense::before,
.month-kpis .kpi--saldo-income::before,
.month-kpis .kpi--saldo-expense::before,
.month-kpis .kpi--saldo-neutral::before,
.month-kpis .kpi--tax::before,
.month-kpis .kpi--muted::before{
  display:none;
}

/* Sweep DD-Cherry-Pick (2026-05-09, Iter 6 Follow-up): die Hero-Saldo-Card
   hatte zusätzlich zum Top-Strip auch eine gold-getönte Border (siehe
   _10-shell.css:441 `.kpi-hero{border-color:rgba(232,184,75,.25)}`). Nach
   Entfernen des Top-Strips ist diese gold-Border der einzige verbleibende
   Akzent und sieht inkonsistent zu den anderen fünf Karten aus. Hier
   überschrieben auf var(--border) — der Hero hebt sich weiterhin durch die
   Box-Shadow-Elevation (Z. 3093) und die größere Werte-Schrift ab.
   Hinweis: Iter 7 ersetzt die 6 alten KPI-Karten durch 2 neue v2-Karten;
   diese Regel ist dann nur noch dead code — bleibt aber stehen, falls die
   v2-Variante via Feature-Flag rückbar wird. */
.month-kpis .kpi-hero{
  border-color:var(--border);
}

/* ==================================================================
   MONATSANSICHT — KPI v2 (Sweep DD Cherry-Pick Iter 7, 2026-05-09)
   ----------------------------------------------------------------------
   Statt 6 einzelner Mini-Karten zwei große konsolidierte Hauptkarten:
     1. .kpi-card--saldo  — Hero-Saldo + Einnahmen/Ausgaben kompakt
     2. .kpi-card--ust    — Zahllast/Erstattung nutzerfreundlich
   Beide via native <details>/<summary> aufklappbar (Details-Sektion).
   Wrapper bleibt .month-kpis (bestehender Test-Pin) + Modifier --v2.
   ================================================================== */

/* Outer Grid: 2 Spalten Desktop, 1 Spalte ab <880px (responsive). */
.month-kpis--v2{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-bottom:16px;
}
@media(max-width:880px){
  .month-kpis--v2{grid-template-columns:1fr;}
}
/* Override des report-page--month .month-kpis-overrides (Z. 4232) */
.report-page--month .month-kpis--v2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media(max-width:880px){
  .report-page--month .month-kpis--v2{grid-template-columns:1fr;}
}

/* ── Card-Container ────────────────────────────────────────────── */
.kpi-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:20px 22px 18px;
  position:relative;
  transition:border-color .15s,box-shadow .15s;
  overflow:hidden;
}
.kpi-card:hover{
  border-color:var(--border2);
  box-shadow:0 1px 6px rgba(0,0,0,.10);
}
body.light .kpi-card{
  box-shadow:0 1px 2px rgba(var(--surface-rgba-base),.04);
}

/* ── Summary (immer sichtbar, klickbar) ─────────────────────────── */
.kpi-card__summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:6px;
  outline:none;
}
/* Native Marker-Pfeil ausblenden — wir nutzen unseren eigenen Toggle */
.kpi-card__summary::-webkit-details-marker{display:none;}
.kpi-card__summary::marker{display:none;content:'';}
.kpi-card__summary:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:8px;
}

.kpi-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:2px;
}
.kpi-card__eyebrow{
  font-size:11px;
  font-weight:var(--fw-semibold);
  text-transform:uppercase;
  letter-spacing:.10em;
  color:var(--text3);
}
.kpi-card__toggle{
  font-size:11px;
  color:var(--text3);
  font-weight:var(--fw-medium);
  display:inline-flex;
  align-items:center;
  gap:4px;
  transition:color .15s;
}
.kpi-card__toggle::after{
  content:"\25BE";  /* ▾ */
  font-size:10px;
  display:inline-block;
  transition:transform .2s ease;
}
.kpi-card[open] .kpi-card__toggle::after{
  transform:rotate(180deg);
}
.kpi-card__summary:hover .kpi-card__toggle{color:var(--text);}

/* ── Hero-Wert ───────────────────────────────────────────────────── */
.kpi-card__hero{
  font-size:30px;
  font-weight:var(--fw-bold);
  letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  line-height:1.15;
  margin-top:6px;
  color:var(--text);
}
.kpi-card__hero.vp{color:var(--green);}
.kpi-card__hero.vn{color:var(--red);}
.kpi-card__hero--muted{color:var(--text3);font-size:24px;font-weight:var(--fw-semibold);}
.kpi-card__hero--erstattung{color:var(--green);}
.kpi-card__hero--zahllast{color:var(--accent);}
/* Inline-Label "Zahllast" / "Erstattung" hinter dem Wert: dezenter */
.kpi-card__hero-label{
  font-size:14px;
  font-weight:var(--fw-medium);
  letter-spacing:0;
  color:var(--text2);
  margin-left:6px;
}

/* ── Sub-Zeile + Inline-Meta + Count ────────────────────────────── */
.kpi-card__sub{
  font-size:12.5px;
  color:var(--text3);
  margin-top:-2px;
}
.kpi-card__meta{
  font-size:12.5px;
  color:var(--text2);
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
  font-variant-numeric:tabular-nums;
}
.kpi-card__meta-sep{color:var(--text3);opacity:.7;}
.kpi-card__meta-value{
  font-weight:var(--fw-semibold);
}
.kpi-card__meta-value.vp{color:var(--green);}
.kpi-card__meta-value.vn{color:var(--red);}
.kpi-card__meta-value.va{color:var(--accent);}
.kpi-card__meta-value.vb{color:var(--blue,var(--tone-info-fg));}

.kpi-card__count{
  font-size:11px;
  color:var(--text3);
  margin-top:4px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}

/* ── Aufklappbare Details ───────────────────────────────────────── */
.kpi-card__details{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:8px;
  animation:kpiCardDetailsFadeIn .18s ease;
}
@keyframes kpiCardDetailsFadeIn{
  from{opacity:0;transform:translateY(-2px);}
  to{opacity:1;transform:none;}
}
@media(prefers-reduced-motion:reduce){
  .kpi-card__details{animation:none;}
  .kpi-card .kpi-card__toggle::after{transition:none;}
}

.kpi-card__detail-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-size:12.5px;
  color:var(--text2);
  gap:12px;
  min-width:0;
}
.kpi-card__detail-row--total{
  border-top:1px dashed var(--border);
  padding-top:10px;
  margin-top:4px;
  font-weight:var(--fw-semibold);
  color:var(--text);
}
.kpi-card__detail-row--muted{
  opacity:.7;
}
.kpi-card__detail-label{
  color:var(--text2);
  font-weight:var(--fw-medium);
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.kpi-card__detail-row--total .kpi-card__detail-label{color:var(--text);}
.kpi-card__detail-value{
  font-variant-numeric:tabular-nums;
  font-weight:var(--fw-semibold);
  white-space:nowrap;
  flex-shrink:0;
}
.kpi-card__detail-value.vp{color:var(--green);}
.kpi-card__detail-value.vn{color:var(--red);}
.kpi-card__detail-value.va{color:var(--accent);}
.kpi-card__detail-value.vb{color:var(--blue,var(--tone-info-fg));}
.kpi-card__detail-value--muted{color:var(--text3);font-weight:var(--fw-medium);}
.kpi-card__detail-value--erstattung{color:var(--green);}
.kpi-card__detail-value--zahllast{color:var(--accent);}

.dash-recurring-alert{margin-bottom:14px;background:rgba(96,165,250,.07);border-color:rgba(96,165,250,.25);}
.dash-recurring-alert__icon{display:inline-flex;align-items:center;}
.dash-recurring-alert__body{flex:1;font-size:12.5px;line-height:1.5;}
.dash-recurring-alert__preview{font-size:11px;color:var(--text3);margin-top:2px;}
.dash-recurring-alert__cta{flex-shrink:0;}
.dash-recurring-empty{font-size:11.5px;color:var(--text3);padding:6px 0;}
.dash-recurring-value{font-family:var(--mono);}
.dash-recurring-inactive{color:var(--text3);}
.dash-recurring-item{flex-direction:column;align-items:stretch;gap:3px;}
.dash-recurring-item__row{display:flex;align-items:center;gap:6px;}
.dash-recurring-item__type{font-size:11px;font-weight:700;flex-shrink:0;padding:1px 6px;border-radius:3px;}
.dash-recurring-item__type--income{background:rgba(52,211,153,.12);color:var(--green);}
.dash-recurring-item__type--expense{background:rgba(248,113,113,.12);color:var(--red);}
.dash-recurring-item__title{flex:1;font-weight:500;}
.dash-recurring-item__title.is-inactive{opacity:.45;}
.dash-recurring-item__details{font-size:10.5px;color:var(--text3);padding-left:32px;}
.dash-recurring-review-hint{font-size:12px;color:var(--text3);margin-bottom:12px;line-height:1.6;}
.dash-recurring-review-type{font-size:11px;flex-shrink:0;font-weight:700;padding:2px 6px;border-radius:3px;}
.dash-recurring-review-type--income{background:rgba(52,211,153,.12);color:var(--green);}
.dash-recurring-review-type--expense{background:rgba(248,113,113,.12);color:var(--red);}
.dash-recurring-review-amount{font-family:var(--mono);font-weight:600;}
.dash-recurring-review-amount--income{color:var(--green);}
.dash-recurring-review-amount--expense{color:var(--red);}
.dash-recurring-review-actions{display:flex;gap:5px;flex-shrink:0;}
.dash-recurring-form-note{font-size:11px;line-height:1.55;color:var(--text2);}
.rec-active-row{display:flex;align-items:center;gap:10px;padding:4px 0;}
.rec-active-row #rec-active{width:16px;height:16px;accent-color:var(--accent);}
.rec-active-row label{font-size:12px;font-weight:500;color:var(--text2);cursor:pointer;margin:0;}
.dash-tx-pagination{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 0;font-size:12px;}
.dash-tx-pagination__btn{font-size:11px;}
.dash-tx-pagination__page{min-width:28px;}
.dash-tx-pagination__page.is-active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
.dash-tx-pagination__ellipsis{color:var(--text3);}
.dash-month-banner{margin-bottom:12px;}
.dash-month-banner--closed{background:rgba(52,211,153,.08);border-color:rgba(52,211,153,.25);}
.dash-month-banner--readonly{background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.25);}
.dash-month-banner__badge{font-size:11px;padding:3px 9px;}
.dash-month-banner__badge--readonly{background:rgba(248,113,113,.15);color:var(--red);}
.dash-month-banner__badge-icon{margin-right:3px;vertical-align:-1px;}
.dash-month-banner__text{flex:1;font-size:12px;}
.dash-month-banner__action{font-size:10px;}
.dash-table-th--bulk{width:24px;}
.dash-table-th--index{width:24px;}
.dash-table-th--date{min-width:64px;}
.dash-table-th--desc{min-width:150px;}
.dash-table-th--type{width:40px;}
.dash-table-th--gross{min-width:84px;}
.dash-table-th--tax{min-width:96px;}
.dash-table-th--net{min-width:78px;}
.dash-table-th--saldo{min-width:88px;}
.dash-table-th--actions{width:90px;}
.dash-table-th--year-ok{width:24px;}
.dash-table-th--year-date{min-width:60px;}
.dash-table-th--year-desc{min-width:150px;}
.dash-table-th--year-type{width:40px;}
.dash-table-th--year-gross{min-width:90px;}
.dash-table-th--year-tax{min-width:80px;}
.dash-table-th--year-net{min-width:80px;}
.dash-table-th--year-actions{width:50px;}
.dash-table-index{font-size:10px;}
.dash-editable-cell{cursor:text;}
.dash-inline-icon--beleg{vertical-align:-2px;}
.dash-inline-icon--beleg-compact{vertical-align:-1px;}
.dash-inline-icon--gobd{vertical-align:-1px;margin-right:3px;}
.dash-inline-icon--note{vertical-align:-1px;margin-right:2px;}
.dash-inline-icon--action{vertical-align:-1.5px;margin-right:3px;}
.dash-beleg-ref--static{opacity:.45;cursor:default;}
.dash-note--accent{color:var(--accent);opacity:.75;}
.dash-km-sep{opacity:.4;}
.dash-km-sep--compact{opacity:.35;}
.dash-type-badge--privat{
  background:rgba(96,165,250,.15);
  color:var(--blue);
  border:1px solid rgba(96,165,250,.3);
}
.dash-bew-share{opacity:.5;font-size:8px;}
.dash-gobd-badge--readonly{
  background:rgba(248,113,113,.15);
  color:var(--red);
  border-color:rgba(248,113,113,.3);
}
.dash-tax-card--muted{border-color:rgba(100,149,237,.2);opacity:.45;}
.dash-tax-card--ust{border-color:rgba(232,184,75,.3);}
.dash-tax-card--vst{border-color:rgba(96,165,250,.3);}
.dash-tax-card--payable{border-color:rgba(248,113,113,.3);}
.dash-tax-card--refund{border-color:rgba(52,211,153,.3);}
.dash-tax-card-value{
  font-family:var(--mono);
  font-size:16px;
  font-weight:600;
}
.dash-tax-card-value--muted{color:var(--text3);}
.dash-tax-card-value--accent{color:var(--accent);}
.dash-tax-card-value--blue{color:var(--blue);}
.dash-tax-card-value--red{color:var(--red);}
.dash-tax-card-value--green{color:var(--green);}
.dash-tax-card-value--text2{color:var(--text2);}
.dash-tax-card-meta{font-size:10px;color:var(--text3);margin-top:2px;}
.dash-mark-reset-wrap,
.dash-jr-reset-wrap{
  text-align:center;
  padding:12px 0 4px;
}
.dash-reset-link-btn{
  font-size:11px;
  color:var(--text3);
  background:none;
  border:none;
  cursor:pointer;
  text-decoration:underline;
  font-family:inherit;
}
.dash-mark-btn--readonly{cursor:default;opacity:.5;}
.dash-tax-compact{font-size:10.5px;color:var(--text3);}
.dash-jr-empty{padding:16px 20px;font-size:12px;color:var(--text3);}
.dash-pruef-progress-fill{width:0;}
.v3-module-chart-inner{position:relative;}
.dash-expand-section--collapsed{max-height:0;}
.v3-offline-banner{margin-bottom:12px;}
.v3-sg-bd-card.is-good{border-color:rgba(52,211,153,.2);}
.v3-sg-bd-card.is-fair{border-color:rgba(232,184,75,.2);}
.v3-sg-bd-card.is-poor{border-color:rgba(248,113,113,.2);}
.v3-sg-bd-line--danger{color:var(--red);}
.v3-sg-bd-context-note{color:var(--text3);font-size:10px;}
.dash-quick-summary-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:-2px 0 8px;
}
.dash-quick-summary-label{
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--text3);
}
.qs-close-btn{
  background:none;
  border:1px solid var(--border);
  color:var(--text3);
  width:22px;
  height:22px;
  border-radius:6px;
  font-size:11px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .15s,color .15s;
  flex-shrink:0;
}
.qs-close-btn:hover,
.qs-close-btn:focus-visible{
  border-color:var(--accent);
  color:var(--accent);
}

/* ─── Cockpit Status Bar Footer ─── */
.app-footer.cockpit-status-bar {
  margin-top: 48px;
  padding: 0;
  border-top: none;
  background: transparent;
  user-select: none;
}

.status-bar-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start; /* Sequential, linksbündig layout */
  gap: 6px 20px; /* Reduced gaps for a compact, professional status line */
  max-width: var(--app-page-max-width-wide, 1220px);
  margin: 0 auto; /* Centered container aligning with the page left edge */
  padding: 6px 14px; /* Sleeker, highly compact vertical padding */
  border-radius: 10px; /* Refined, slightly smaller rounding for compact look */
  background: linear-gradient(180deg, rgba(var(--surface-rgba-base), 0.025), rgba(var(--surface-rgba-base), 0.012));
  border: 1px solid rgba(var(--surface-rgba-base), 0.04);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  font-size: 11.5px; /* Slightly reduced text size */
  color: var(--text3);
}

/* Light mode support */
body.light .status-bar-container {
  background: linear-gradient(180deg, white, var(--bg));
  border-color: rgba(26, 30, 46, 0.05);
  box-shadow: 0 2px 8px rgba(26, 30, 46, 0.015);
}

/* Status groups and visual dividers */
.status-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.status-group-divider {
  height: 11px; /* Shorter dividers */
  width: 1px;
  background-color: rgba(var(--surface-rgba-base), 0.06); /* Subtler low opacity */
  flex-shrink: 0;
}

body.light .status-group-divider {
  background-color: rgba(26, 30, 46, 0.06);
}

.status-bar-dot-sep {
  opacity: 0.25;
  color: var(--text3);
  margin: 0 4px;
}

.status-info-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.status-info-label {
  color: var(--text3);
  opacity: 0.7;
}

.status-info-value {
  color: var(--text-strong);
  font-weight: 500;
}

.status-info-tag {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(var(--surface-rgba-base), 0.05);
  color: var(--text2);
  border: 1px solid rgba(var(--surface-rgba-base), 0.12);
  letter-spacing: 0.02em;
  margin-left: 4px;
}

body.light .status-info-tag {
  background: rgba(26, 30, 46, 0.05);
  border-color: rgba(26, 30, 46, 0.1);
  color: var(--text2);
}

.status-bar-server-hidden {
  display: none !important;
}

/* Right side styling */
.status-bar-right {
  display: flex;
  align-items: center;
}

.status-bar-links {
  display: flex;
  align-items: center;
  gap: 2px;
}

.status-bar-links a {
  color: var(--text3);
  text-decoration: none;
  font-weight: 400; /* Regular weight to make legal links secondary */
  transition: color 0.15s, opacity 0.15s;
}

.status-bar-links a:hover {
  color: var(--text2); /* Muted hover state */
}

/* Feedback / Pill Link Button styling */
.status-pill-link {
  background: rgba(var(--surface-rgba-base), 0.03);
  color: var(--text3) !important;
  border: 1px solid rgba(var(--surface-rgba-base), 0.07);
  padding: 1px 6px; /* Smaller padding */
  border-radius: 999px;
  font-size: 10.5px; /* Quieter font-size */
  font-weight: 500 !important;
  margin-left: 12px; /* Replaces the dot separator with clean spacing */
  transition: all 0.15s ease-in-out !important;
}

.status-pill-link:hover {
  background: rgba(var(--surface-rgba-base), 0.06) !important;
  border-color: rgba(var(--surface-rgba-base), 0.14) !important;
  color: var(--text2) !important;
}

body.light .status-pill-link {
  background: rgba(26, 30, 46, 0.02);
  border-color: rgba(26, 30, 46, 0.06);
}

body.light .status-pill-link:hover {
  background: rgba(26, 30, 46, 0.04) !important;
  border-color: rgba(26, 30, 46, 0.12) !important;
}

.status-bar-version {
  font-size: 10px; /* Subtler version label */
  opacity: 0.3;
  font-family: var(--mono);
  color: var(--text3);
  margin-left: 14px; /* Replaces the dot separator with clean spacing */
}

/* ─── Mobile: kompaktes Status-/Meta-Panel statt verkleinertem Desktop-Footer ───
   Layout (mobile-first, <768px):
     Zeile 1  Meta:   "Datenstand: heute · Steuerjahr: 2026" (einzeilig, · sep)
     Zeile 2  Sync:   grüner Punkt (8px) + "Synchronisiert"
     Divider  dezente Hairline (18px Abstand oben/unten)
     Grid     Legal-Links als 2×2 (column-gap 24px, row-gap 16px)
     Row      Bottom-Row: "Feedback geben" (links) ⟷ Version (rechts)
   Desktop bleibt unverändert; nur dieser Breakpoint wird umgebaut. */
@media (max-width: 768px) {
  /* WICHTIG: Die generische `.app-footer`-Mobile-Regel (_12-page-shell.css)
     setzt `align-items: center`. Dadurch wurde das Flex-Kind
     `.status-bar-container` auf shrink-to-fit (~halbe Breite) zusammengezogen
     und mittig zentriert — die Karte sah aus wie ein falsch skaliertes
     Desktop-Element. `stretch` lässt die Karte die volle Breite füllen. */
  .app-footer.cockpit-status-bar {
    margin-top: 28px;
    align-items: stretch;
    /* Kein horizontales Padding hier — der 16px-Seitenabstand kommt aus der
       Karten-Margin unten. Safe-Area unten für iPhone-Notch/Home-Indicator. */
    padding: 0 0 env(safe-area-inset-bottom, 0px);
  }
  /* Formular-Floating-Bar (.inv3-form-mobile-bar) überdeckt sonst die
     Footer-Zeile; das padding-Shorthand oben killt die generische Clearance
     aus _12-page-shell.css. Nur auf der Formular-Seite wiederherstellen. */
  .inv3-form-page + .app-footer.cockpit-status-bar {
    padding-bottom: calc(48px + var(--inv3-mobile-bar-offset, 142px) + env(safe-area-inset-bottom, 0px));
  }
  .status-bar-container {
    width: calc(100% - 32px); /* volle Breite minus 16px Seitenabstand */
    max-width: none;          /* Desktop-Cap (1220px) darf mobil nicht greifen */
    box-sizing: border-box;
    margin: 0 16px;           /* horizontal mittig, 16px Seitenabstand */
    flex-direction: column;
    align-items: stretch;     /* Zeilen über die volle Kartenbreite */
    text-align: left;
    gap: 0;                   /* Vertikalrhythmus via explizite Margins unten */
    padding: 20px 18px;
    border-radius: 24px;
    font-size: 13.5px;        /* Meta-Zeile ~13–14px, gut lesbar */
    /* Dezenter Schatten, kein übertriebener Glow */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
  }
  body.light .status-bar-container {
    box-shadow: 0 2px 8px rgba(26, 30, 46, 0.05);
  }

  /* Meta-Zeile: einzeilig "Datenstand: heute · Steuerjahr: 2026"; bricht bei
     sehr kleinen Screens sauber um. Punkt-Trenner bleibt hier sichtbar. */
  .status-group {
    width: 100%;
  }
  .status-group-data {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 4px 8px;
  }
  .status-group-data .status-info-label,
  .status-group-data .status-info-value {
    font-size: 13.5px;
  }

  /* Vertikale Divider raus; mobil trennt nur die Meta-/Link-Zeilen. */
  .status-group-divider {
    display: none !important;
  }

  /* Legal-Links als 2×2-Grid; minmax(0,1fr) verhindert horizontales Überlaufen */
  .status-bar-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    column-gap: 24px;
    row-gap: 16px;
    width: 100%;
    font-size: 15px;
    line-height: 1.3;
  }
  /* Punkt-Trenner entfallen NUR im Link-Grid (Meta-Zeile behält ihren ·) */
  .status-bar-links .status-bar-dot-sep {
    display: none;
  }
  .status-bar-links a {
    justify-self: start;     /* Labels linksbündig in ihrer Spalte */
    display: flex;
    align-items: center;
    min-height: 32px;        /* touchfreundlich, aber nicht button-artig */
  }

  /* Bottom-Row: Feedback-Button links, Version rechts (Auto-Flow Row 3).
     "Feedback geben" als integrierter, kompakter Pill-Button. */
  .status-pill-link {
    grid-column: 1;
    justify-self: start;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px !important;
    border-radius: 999px;
    font-size: 14px !important;
    margin: 8px 0 0 !important;
    white-space: nowrap;
  }
  .status-bar-version {
    grid-column: 2;
    justify-self: end;
    align-self: center;
    text-align: right;
    margin: 8px 0 0 !important;
    font-size: 12px;
    opacity: 0.45;
    white-space: nowrap;
  }
}

/* Sehr kleine Screens (<380px): Bottom-Row umbrechen — Feedback full-width,
   Version darunter rechts. */
@media (max-width: 380px) {
  .status-pill-link {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
    margin: 10px 0 0 !important;
  }
  .status-bar-version {
    grid-column: 1 / -1;
    justify-self: end;
    margin: 8px 0 0 !important;
  }
}

/* KI-Aktivierungs-Nudge — Base + Inline-Fixes
   Base ausgelagert aus _20-dashboard.css in PR-S1.6b' (Z. 40-64).
   Cascade: Base zuerst, danach .ai-nudge-lock-icon Inline-Fix.
   PR-S1.6a-Codex-[P1]-Lehre: Inline-Fix MUSS nach Base laden, sonst
   verliert er gegen die Base bei gleicher Specifity.
   Plan-Doc: docs/architecture/2026-05-16-dashboard-css-split-plan.md */

/* ── KI-Aktivierungs-Nudge (Welcome-Sheet für neue Admins) ────────────── */
.app-dialog.ai-nudge-dialog{max-width:560px;}
.ai-nudge-sheet{display:flex;flex-direction:column;gap:16px;}
.ai-nudge-head{display:flex;align-items:flex-start;gap:12px;}
.ai-nudge-hero{flex-shrink:0;color:var(--accent);margin-top:2px;}
.ai-nudge-headline{font-size:18px;font-weight:var(--fw-semibold);color:var(--text);line-height:1.3;}
.ai-nudge-subline{font-size:13.5px;color:var(--text2);line-height:1.55;}
.ai-nudge-benefits{display:flex;flex-direction:column;gap:12px;margin-top:4px;}
.ai-nudge-benefit{display:flex;align-items:flex-start;gap:12px;}
.ai-nudge-benefit-icon{flex-shrink:0;width:32px;height:32px;border-radius:8px;background:var(--bg2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--accent);}
.ai-nudge-benefit-text{min-width:0;}
.ai-nudge-benefit-title{font-size:13px;font-weight:var(--fw-semibold);color:var(--text);line-height:1.3;margin-bottom:2px;}
.ai-nudge-benefit-desc{font-size:12px;color:var(--text3);line-height:1.5;}
.ai-nudge-trust{font-size:11px;color:var(--text3);line-height:1.55;padding:10px 12px;background:var(--bg);border:1px solid var(--border);border-radius:8px;}
.ai-nudge-trust a{color:var(--accent);text-decoration:none;}
.ai-nudge-trust a:hover{text-decoration:underline;}
.app-dialog.ai-nudge-dialog .app-dialog-body{white-space:normal;}
.ai-nudge-never{display:block;margin:0 28px 22px;width:calc(100% - 56px);background:none;border:none;color:var(--text3);font-size:11.5px;cursor:pointer;padding:4px;font-family:inherit;text-decoration:underline;text-underline-offset:2px;}
.ai-nudge-never:hover{color:var(--text2);}
@media(max-width:600px){
  .app-dialog.ai-nudge-dialog{max-width:none;width:calc(100% - 24px);}
  .ai-nudge-headline{font-size:16px;}
  .ai-nudge-benefit-icon{width:28px;height:28px;}
  .ai-nudge-never{margin:0 22px 18px;width:calc(100% - 44px);}
}

/* ── Inline-Fix: Lock-Icon im AI-Nudge ── */
.ai-nudge-lock-icon{vertical-align:-1px;margin-right:4px;}

.ch-leg-dot,.ccat-leg-dot{display:block;}
.ch-leg-dot-circle{transition:fill .18s,stroke .18s,opacity .18s;}
.ch-leg-item.off .ch-leg-dot-circle{fill:none!important;stroke:currentColor!important;stroke-width:1.5;opacity:.5;}

.dash-expand-section[hidden],#insight-overflow[hidden],#sg-info-body[hidden]{display:none!important;}
.v3-bar-tooltip.is-on{opacity:1;}
.cockpit-yc-bar-fill[data-yc-side="left"]{left:50%;right:auto;}
.cockpit-yc-bar-fill[data-yc-side="right"]{right:50%;left:auto;}
#sg-info-toggle.is-open svg{transform:rotate(90deg);}

/* ─── Sweep DD · Variante D Mobile-Monatsansicht (2026-05-07) ──────────
   Mobile-only Layout (≤ 640 px) für die Monatsübersicht. Restyled die
   existing `.shell-page-subheader[data-shell-subheader="months"]` als
   "Month-Scope-Bar" mit Status-Chip rechts; rendert Header / KPIs /
   Recurring / Section-Header / Filter / Datum-Gruppe / Buchungs-Cards
   im Variante-D-Layout aus dem Mockup
   `~/.gstack/projects/taxtello-taxtello/designs/month-mobile-redesign-D-20260507/variant-d-mobile.html`.

   Pflicht-Patches aus Codex-Outside-Voice (Section 14 des Plans):
   • BLOCKER 2 — keine zweite Monthbar; existing wird restyled
   • BLOCKER 3 — Z-Index nur über Tokens
   • BLOCKER 1 — Sticky-Stack ≤ 150 px (--shell-mobile-topbar-h:56+safe-area)
   • HIGH 5  — Tap-Targets ≥ var(--tap-target-min) = 44 px
   • MED 9  — keine Hardcoded-Hex; alle Werte via Tokens
   • Filter NICHT sticky (D6) — kein top: hier
   ────────────────────────────────────────────────────────────── */

/* Default: scope-status nur auf Mobile sichtbar. Desktop zeigt 12-Tab-Bar. */
.scope-status {
  display: none;
}

@media (max-width: 640px) {

  /* ── Month-Scope-Bar = restyled .shell-page-subheader (BLOCKER 2) ──
     Existing Subheader bleibt einzige Monthbar im DOM. Auf Mobile
     bekommt sie ein kompakteres Layout: Pill links + Status-Chip rechts.
     Sticky bereits in _05-shell-v2.css:1374 unter `top: var(--shell-mobile-topbar-h)`.

     Existing Rule in _90-responsive-overrides.css:1820 greift nur unter
     `<600px` UND nur am v1-Wrapper `.nav-months-bar`. Im v2-Shell-Mirror
     (`.shell-months-bar`) muessen wir Pill + Tab-Hide an unseren 640px-
     Breakpoint angleichen, sonst sieht der Nutzer im 600-639er-Bereich
     die 12-Tab-Bar UND den Variante-D-Mobile-Body parallel. */
  body[data-shell-subheader="months"] .shell-page-subheader {
    z-index: var(--z-sticky);
  }
  .shell-months-bar .nav-month-pill {
    display: inline-flex;
  }
  .shell-months-bar .nav-month-tab {
    display: none;
  }
  .shell-months-bar {
    padding: 8px 14px;
    gap: 8px;
    align-items: center;
  }
  .shell-months-bar .nav-month-pill {
    background: rgba(var(--accent-rgba-base), .06);
    border: 1px solid rgba(var(--accent-rgba-base), .24);
    color: var(--text);
    padding: 5px 12px;
    border-radius: 18px;
    font-size: 12.5px;
    font-weight: 500;
    min-height: var(--tap-target-min);
  }
  body.light .shell-months-bar .nav-month-pill {
    background: rgba(var(--accent-rgba-base), .10);
    border-color: rgba(var(--accent-rgba-base), .32);
  }
  .shell-months-bar .scope-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 3px 9px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
  }
  .shell-months-bar .scope-status::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
  }
  .shell-months-bar .scope-status.is-open {
    color: var(--blue);
    background: rgba(96, 165, 250, 0.10);
    border: 1px solid rgba(96, 165, 250, 0.22);
  }
  body.light .shell-months-bar .scope-status.is-open {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.24);
  }
  .shell-months-bar .scope-status.is-closed {
    color: var(--green);
    background: rgba(52, 211, 153, 0.10);
    border: 1px solid rgba(52, 211, 153, 0.22);
  }
  body.light .shell-months-bar .scope-status.is-closed {
    background: rgba(22, 163, 98, 0.08);
    border-color: rgba(22, 163, 98, 0.24);
  }
  .shell-months-bar .scope-status.is-readonly {
    color: var(--red);
    background: rgba(248, 113, 113, 0.10);
    border: 1px solid rgba(248, 113, 113, 0.22);
  }
  body.light .shell-months-bar .scope-status.is-readonly {
    background: rgba(220, 69, 69, 0.08);
    border-color: rgba(220, 69, 69, 0.24);
  }

  /* ── Compact Month Header (.vd-header) ── 3 logische Reihen, NICHT sticky.
     Replacement-Markup wird von dashboard.js _renderMonthHeader im Mobile-Branch
     gerendert. Desktop-Layout (.mh-header.report-page-header) bleibt unverändert. */
  .vd-header {
    padding: 14px 14px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
  }
  .vd-row1 {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
    min-width: 0;
  }
  .vd-title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--text);
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
  }
  .vd-title .vd-year {
    color: var(--text3);
    font-weight: 500;
    margin-left: 2px;
  }
  .vd-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: 11px;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.4;
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .vd-status.is-open {
    background: rgba(96, 165, 250, 0.10);
    border: 1px solid rgba(96, 165, 250, 0.28);
    color: var(--blue);
  }
  body.light .vd-status.is-open {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.26);
  }
  .vd-status.is-closed {
    background: rgba(52, 211, 153, 0.10);
    border: 1px solid rgba(52, 211, 153, 0.28);
    color: var(--green);
  }
  body.light .vd-status.is-closed {
    background: rgba(22, 163, 98, 0.08);
    border-color: rgba(22, 163, 98, 0.24);
  }
  .vd-status.is-readonly {
    background: rgba(248, 113, 113, 0.10);
    border: 1px solid rgba(248, 113, 113, 0.28);
    color: var(--red);
  }
  body.light .vd-status.is-readonly {
    background: rgba(220, 69, 69, 0.08);
    border-color: rgba(220, 69, 69, 0.24);
  }
  .vd-meta {
    font-size: 11.5px;
    color: var(--text3);
    margin: 0 0 12px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .vd-meta strong {
    color: var(--text2);
    font-weight: 500;
  }
  .vd-meta .vd-sep {
    margin: 0 5px;
    opacity: 0.5;
  }
  .vd-actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
  }
  .vd-cta {
    flex: 1 1 0;
    min-width: 0;
    background: var(--accent);
    color: var(--accent-ink);
    border: none;
    padding: 10px 14px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--tap-target-min);
    cursor: pointer;
    letter-spacing: -0.2px;
    font-family: inherit;
  }
  .vd-cta svg {
    width: 14px;
    height: 14px;
  }
  .vd-secondary {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid var(--border2);
    color: var(--text2);
    padding: 10px 12px;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--tap-target-min);
    cursor: pointer;
    font-family: inherit;
  }
  .vd-secondary svg {
    width: 13px;
    height: 13px;
  }
  body.light .vd-secondary:hover {
    border-color: var(--accent);
    color: var(--accent-ink);
  }
  .vd-overflow {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid var(--border2);
    color: var(--text2);
    width: var(--tap-target-min);
    min-height: var(--tap-target-min);
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .vd-overflow svg {
    width: 14px;
    height: 14px;
  }

  /* ── KPI-Grid 2×3 kompakt (HIGH 8) ── Desktop .month-kpis bleibt
     `auto-fit minmax(180px,1fr)` aus _20-dashboard.css. Mobile-Override: hart 2 Spalten. */
  .month-kpis,
  .vd-kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px 14px;
  }
  .vd-kpi-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-top: 2px solid var(--accent);
    border-radius: var(--radius);
    padding: 9px 12px;
    box-shadow: var(--shadow-card);
    min-width: 0;
  }
  .vd-kpi-card.tone-income { border-top-color: var(--green); }
  .vd-kpi-card.tone-expense { border-top-color: var(--red); }
  .vd-kpi-card.tone-saldo { border-top-color: var(--green); }
  .vd-kpi-card.tone-saldo-neg { border-top-color: var(--red); }
  .vd-kpi-card.tone-tax-amber { border-top-color: var(--accent); }
  .vd-kpi-card.tone-tax-blue { border-top-color: var(--blue); }
  .vd-kpi-label {
    font-size: 9px;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 3px;
    line-height: 1.4;
  }
  .vd-kpi-value {
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .vd-kpi-card.tone-income .vd-kpi-value,
  .vd-kpi-card.tone-saldo .vd-kpi-value { color: var(--green); }
  .vd-kpi-card.tone-expense .vd-kpi-value,
  .vd-kpi-card.tone-saldo-neg .vd-kpi-value { color: var(--red); }
  .vd-kpi-card.tone-tax-amber .vd-kpi-value { color: var(--accent); }
  .vd-kpi-card.tone-tax-blue .vd-kpi-value { color: var(--blue); }

  /* ── Recurring Banner 1-Zeile (Mobile-Override) ── */
  .vd-recur {
    margin: 0 14px 12px;
    padding: 9px 12px;
    background: rgba(96, 165, 250, 0.06);
    border: 1px solid rgba(96, 165, 250, 0.18);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
  }
  body.light .vd-recur {
    background: rgba(59, 130, 246, 0.06);
    border-color: rgba(59, 130, 246, 0.20);
  }
  .vd-recur svg {
    width: 14px;
    height: 14px;
    color: var(--blue);
    flex-shrink: 0;
  }
  .vd-recur-text {
    flex: 1;
    color: var(--text2);
    line-height: 1.35;
    min-width: 0;
  }
  .vd-recur-text strong {
    color: var(--text);
    font-weight: 500;
  }
  .vd-recur-text small {
    display: block;
    font-size: 10.5px;
    color: var(--text3);
    margin-top: 1px;
  }
  .vd-recur-cta {
    font-size: 11px;
    color: var(--blue);
    text-decoration: none;
    font-weight: 500;
    flex-shrink: 0;
    border: 0;
    background: transparent;
    padding: 4px 6px;
    cursor: pointer;
    font-family: inherit;
    min-height: var(--tap-target-min);
    display: inline-flex;
    align-items: center;
  }

  /* ── Section-Header (Buchungen) ── Sweep DD Phase-1B Finding 4+6:
     Liste/Tabelle-Toggle wird auf Mobile ausgeblendet, weil _monatViewMode()
     den Tabelle-Mode auf Mobile zwangsweise zu 'ledger' umsetzt -> Click
     waere ein No-op. Spacing zur darunterliegenden Filter-Bar entkoppelt
     (kein doppelter Border, kompaktes Layout). */
  .vd-list-section {
    padding: 14px 14px 6px;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid var(--border);
  }
  .vd-list-section h2 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
  }
  .vd-list-section .vd-count {
    color: var(--text3);
    font-weight: 500;
  }
  /* Liste/Tabelle-Toggle auf Mobile aus (nur Liste unterstuetzt). */
  .vd-list-toggle {
    display: none;
  }

  /* ── Filter-Bar Mobile-Layout (HIGH 7) ── existing tx-filter-bar Wrapper
     bleibt; Mobile-Override stackt vertical statt wrap, KEIN sticky (D6).
     Sweep EE (2026-05-08): align-items stretch ist Pflicht, weil das JS
     beide Klassen tx-filter-bar plus vd-filter-bar setzt und die Desktop-
     Regel align-items center aus _10-shell.css Zeile 448 sonst durch-
     schlaegt. Folge ohne Stretch: Suche, Chips und Sort-Controls werden
     auf intrinsische Breite zentriert statt 100% zu nehmen. Stretch hier
     reaktiviert das Default-Verhalten der Mobile-D-Variante. */
  .tx-filter-bar,
  .vd-filter-bar {
    padding: 8px 14px 12px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    position: static;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    z-index: auto;
  }
  /* Sweep EE: Direkte Kinder zwingen auf Container-Breite. min-width:0
     erlaubt Flex-Shrink fuer den Chip-Row-Overflow-Scroll und schuetzt
     gegen Long-Text-Wrap der Sort-Buttons. */
  .vd-filter-bar > .vd-filter-search,
  .vd-filter-bar > .vd-chip-row,
  .vd-filter-bar > .vd-filter-controls {
    width: 100%;
    min-width: 0;
  }
  /* Sweep DD Phase-1B-User-Feedback (Finding 3): Suche nach rechts gerutscht.
     Vorher: width:100% mit box-sizing:content-box -> Box-Modell hatte
     visuelle Breite > Filter-Bar-Padding-Innenbreite, Icon wurde via
     `background:` shorthand gleich danach aufgehoben.
     Jetzt: box-sizing:border-box (passt Padding INNERHALB von 100% ein),
     Icon ueber separates background-image-Property statt shorthand,
     display:block fuer eindeutige Block-Breite. */
  .vd-filter-search {
    box-sizing: border-box;
    display: block;
    width: 100%;
    background-color: var(--card);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%238b93b5' stroke-width='1.5' stroke-linecap='round'><circle cx='7' cy='7' r='5'/><path d='M11 11l3 3'/></svg>");
    background-repeat: no-repeat;
    background-position: 12px center;
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 9px 12px 9px 34px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text);
    min-height: 40px;
    margin: 0;
  }
  .vd-filter-search:focus {
    outline: none;
    border-color: var(--accent);
  }
  .vd-chip-row {
    /* Sweep EE: width:100% (zusaetzlich zum Parent-Selector-Match oben)
       fuer den Fall, dass das `.tx-filter-bar.vd-filter-bar`-Wrapper-
       Konstrukt mal nicht greift. overflow-x:auto + min-width:0 (Parent)
       erlauben echtes Touch-Scroll, statt dass die Chips den Container
       sprengen und visuell rechts abgeschnitten werden. */
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin: 0;
  }
  .vd-chip-row::-webkit-scrollbar { display: none; }
  .vd-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text2);
    padding: 5px 11px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    min-height: var(--tap-target-min);
  }
  .vd-chip.is-active {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
    font-weight: 600;
  }
  .vd-chip-count {
    font-size: 10px;
    background: rgba(0, 0, 0, 0.18);
    padding: 1px 5px;
    border-radius: 6px;
    font-weight: 600;
  }
  .vd-chip:not(.is-active) .vd-chip-count {
    background: var(--bg3);
    color: var(--text3);
  }
  /* Sweep DD Phase-1B-User-Feedback (Finding 5): Filter-Controls falsch
     positioniert. Vorher: white-space:normal -> Buttons wickeln den
     Label-Text (z.B. "Alle Zahlungsarten") in 2-3 Zeilen, Layout sieht
     gestauchte. Jetzt: white-space:nowrap + ellipsis, je 50% Breite,
     min-width:0 erlaubt shrink. Buttons bleiben einzeilig. */
  .vd-filter-controls {
    display: flex;
    gap: 6px;
    width: 100%;
  }
  .vd-filter-controls .sort-btn-wrap {
    display: flex;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    align-self: stretch;
    position: relative;
  }
  .vd-filter-controls .vd-control {
    width: 100%;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text2);
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    min-height: 40px;
    /* Single-line, kein Wrap. Long Labels werden ellipsified. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .vd-filter-controls .vd-control > * {
    flex-shrink: 0;
  }
  .vd-filter-controls .vd-control.is-active {
    border-color: var(--accent);
    color: var(--text);
    background: rgba(var(--accent-rgba-base), .10);
  }
  .vd-filter-controls .vd-control svg {
    width: 11px;
    height: 11px;
    opacity: 0.7;
  }
  .vd-filter-controls .sort-drop {
    left: 0;
    right: 0;
    width: 100%;
    min-width: 0;
  }

  /* ── Datum-Gruppe 1-Zeile (D9) ── */
  .vd-date-group {
    padding: 10px 14px 6px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    background: var(--bg);
    margin: 0;
  }
  .vd-date-group .vd-day {
    font-size: 12.5px;
    color: var(--text);
    font-weight: 600;
  }
  .vd-date-group .vd-day-meta {
    font-size: 11px;
    color: var(--text3);
    font-weight: 500;
  }
  .vd-date-group .vd-day-sum {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .vd-date-group .vd-day-sum.is-pos { color: var(--green); }
  .vd-date-group .vd-day-sum.is-neg { color: var(--red); }

  /* ── Buchungs-Card (.tx-card) ── 3-Zeilen-Layout mit ○ + ⋯, kein
     dauerhafter Trash-Icon (D2/D8). Card-Body trägt
     data-action="txShowDetail" auf <article>; CB + ⋯ haben eigene
     data-action und gewinnen via closest()-Lookup (BLOCKER 4). */
  .tx-card {
    margin: 0 14px 6px;
    padding: 10px 12px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    column-gap: 11px;
    cursor: pointer;
    color: var(--text);
  }
  .tx-card.is-selected {
    border-color: rgba(var(--accent-rgba-base), .45);
    background: rgba(var(--accent-rgba-base), .04);
  }
  body.light .tx-card.is-selected {
    border-color: rgba(var(--accent-rgba-base), .55);
    background: rgba(var(--accent-rgba-base), .06);
  }
  /* Sweep DD Phase-1B-User-Feedback (Finding 1): CB visuell auf 22x22.
     Vorher: width:20+padding:12+min-width:44 + background-clip:content-box
     resolved zu 44x44 visual mit dunklem Bg (-> "schwarzer Punkt" in Dark).
     Jetzt: Input-Hitbox 44x44, visual 22x22 via ::before,
     background transparent (kein Punkt im Dark-Mode).
     box-sizing:border-box damit width/height vorhersehbar sind. */
  /* Doppel-Selektor `input.tx-card-cb` (0,1,1) + `body[class] .tx-card-cb`
     (0,2,1) erhoeht Specificity um body.light/dark-Overrides aus
     _10-shell.css zu schlagen. UA-Default fuer appearance:none kann je
     nach Browser einen weissen Background liefern -> explizit transparent. */
  input.tx-card-cb,
  body.light input.tx-card-cb,
  body.dark input.tx-card-cb {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
  }
  input.tx-card-cb::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1.5px solid var(--border2);
    background: transparent;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
  }
  input.tx-card-cb:hover::before,
  input.tx-card-cb:focus-visible::before {
    border-color: var(--text2);
  }
  input.tx-card-cb:checked,
  body.light input.tx-card-cb:checked,
  body.dark input.tx-card-cb:checked {
    background: transparent;
  }
  input.tx-card-cb:checked::before,
  body.light input.tx-card-cb:checked::before,
  body.dark input.tx-card-cb:checked::before {
    background: var(--accent);
    border-color: var(--accent);
  }
  .tx-card-cb:checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 9px;
    margin-left: -3px;
    margin-top: -6px;
    border: 2px solid var(--accent-ink);
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg);
  }
  .tx-card-body {
    min-width: 0;
  }
  .tx-card-row1 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
  }
  .tx-card-title {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
  }
  .tx-card-amount {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
  }
  .tx-card-amount.is-income { color: var(--green); }
  .tx-card-amount.is-expense { color: var(--red); }
  .tx-card-sub {
    font-size: 11px;
    color: var(--text3);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 0 6px;
  }
  .tx-card-sub .vd-dot {
    margin: 0 4px;
    opacity: 0.5;
  }
  .tx-card-row3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 20px;
  }
  .tx-card-badges {
    display: flex;
    align-items: center;
    /* Sweep EE (2026-05-08): flex-wrap erlaubt das ELSTER-Zweitchip in
       eine zweite Zeile zu rutschen, falls "Beleg fehlt"+"ELSTER" zusammen
       breiter als der verfuegbare Slot werden (typisch bei langen Cards).
       gap-shorthand zuerst, row-gap danach — sonst ueberschreibt das
       Shorthand den row-gap-Override. */
    flex-wrap: wrap;
    gap: 5px;
    row-gap: 4px;
    flex: 1;
    min-width: 0;
  }
  .tx-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
  }
  .tx-badge.is-error {
    background: rgba(248, 113, 113, 0.12);
    color: var(--red);
    border: 1px solid rgba(248, 113, 113, 0.32);
  }
  .tx-badge.is-warn {
    background: rgba(var(--accent-rgba-base), .10);
    color: var(--amber);
    border: 1px solid rgba(var(--accent-rgba-base), .28);
  }
  body.light .tx-badge.is-warn {
    background: rgba(var(--accent-rgba-base), .12);
    border-color: rgba(var(--accent-rgba-base), .32);
  }
  .tx-badge.is-info {
    background: rgba(96, 165, 250, 0.08);
    color: var(--blue);
    border: 1px solid rgba(96, 165, 250, 0.20);
  }
  .tx-badge.is-note {
    background: rgba(96, 165, 250, 0.08);
    color: var(--blue);
    border: 1px solid rgba(96, 165, 250, 0.20);
  }
  .tx-badge svg {
    width: 9px;
    height: 9px;
  }
  .tx-card-empty-spacer {
    height: 18px;
  }
  .tx-card-more {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: var(--text3);
    width: var(--tap-target-min);
    height: var(--tap-target-min);
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: -4px;
    padding: 0;
  }
  .tx-card-more svg {
    width: 16px;
    height: 16px;
  }
  .tx-card-more:hover,
  .tx-card-more:focus-visible {
    background: var(--bg2);
    color: var(--text);
  }

  /* ── Mobile-Container für Variante-D-Render ── nur Wrapper, keine
     Layout-Aussage; existiert damit Tests `[data-month-view="mobile-d"]`
     pinnen können. */
  .month-mobile-view {
    display: block;
    background: var(--bg);
    /* Phase-1-Polish: Safe-Area unten respektieren — die letzte Card soll
       nicht unter der iOS-Safari-Bottom-Bar verschwinden.
       Phase-1B (F2): Wenn Bulk-Bar sichtbar ist, brauchen Cards genug
       Bottom-Padding, damit die letzte Card nicht hinter der Bar verschwindet.
       72px = ~Bulk-Bar-Höhe + Safe-Area. */
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  }
  body:has(.bulk-bar.visible) .month-mobile-view {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 80px);
  }

  /* ── Mobile Bulk-Bar (F2) ── Sticky-Bottom über safe-area, kompakt.
     Sichtbar nur via .visible-Klasse (gesetzt von updateBulkUI). */
  .bulk-bar.bulk-bar--mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: none; /* default hidden */
    align-items: center;
    gap: 8px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--card);
    border-top: 1px solid var(--border2);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
    z-index: var(--z-sticky);
  }
  body.light .bulk-bar.bulk-bar--mobile {
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.10);
  }
  /* Sweep EE (2026-05-08): Legacy-Regel in _10-shell.css Zeile 2191
     setzt .bulk-bar auf display none mit !important im 480px-Block und
     schlaegt damit unsere Mobile-D-Bulk-Bar. Wir kontern minimal-invasiv
     mit !important auf dem .visible-State, damit ausschliesslich der
     sichtbare Mobile-Bar-Zustand gewinnt — alle anderen Bulk-Bar-Varianten
     bleiben unter dem Legacy-Hide. */
  .bulk-bar.bulk-bar--mobile.visible {
    display: flex !important;
  }
  .bulk-bar.bulk-bar--mobile .bulk-bar-cnt {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    flex-shrink: 0;
    min-width: 0;
  }
  .bulk-bar.bulk-bar--mobile .bulk-bar-action {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 10px;
    font-size: 12px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bulk-bar.bulk-bar--mobile .bulk-bar-cancel {
    flex: 0 0 auto;
    padding: 8px 10px;
    font-size: 12px;
    min-height: 38px;
  }

  /* ── Selected-State auf Mobile-Card via :has(:checked) ── Modern CSS
     (Safari 16+, Chrome 105+). Auf nicht-supportenden Browsern setzt
     bulk-actions.js#updateBulkUI() weiterhin keine .is-selected-Klasse,
     aber das ist akzeptabel: die CB selbst zeigt den Checkmark. */
  .tx-card:has(.tx-card-cb:checked) {
    border-color: rgba(var(--accent-rgba-base), 0.45);
    background: rgba(var(--accent-rgba-base), 0.04);
  }
  body.light .tx-card:has(.tx-card-cb:checked) {
    border-color: rgba(var(--accent-rgba-base), 0.55);
    background: rgba(var(--accent-rgba-base), 0.06);
  }

  /* ── Pagination-Footer (Sweep FF, 2026-05-08) ──
     Mobile rendert jetzt analog zu Desktop in 25er-Pages (TX_PAGE_SIZE).
     Range-Label + Pagination liegen im Flow (nicht fixed), damit sie
     nicht mit der sticky Bulk-Bar kollidieren. _10-shell.css:2189 setzt
     fuer ≤480px bereits min-width/min-height 44px !important; wir
     ergaenzen hier den ≥481-≤640px-Bereich (Tablets / Phablet-Landscape).
     Padding sorgt fuer freie Tap-Bahn ueber/unter dem Block. */
  .tx-pagination {
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    padding: 10px 14px calc(env(safe-area-inset-bottom, 0px) + 14px);
  }
  .tx-pagination .btn-sm {
    min-width: var(--tap-target-min);
    min-height: var(--tap-target-min);
  }
  .tx-range-label {
    padding: 14px 14px 4px;
    font-size: 12px;
    color: var(--text3);
    text-align: center;
  }

  /* ── Desktop-Komponenten auf Mobile verstecken ── damit kein
     Doppel-Render entsteht, falls beide DOM-Knoten temporär koexistieren. */
  .month-mobile-view ~ .mh-header,
  .month-mobile-view + .month-kpis-desktop {
    display: none;
  }
}

/* ── Reduced-Motion Override (Variante D) ──
   Cards sind statisch, aber Filter-Chips horizontal-scroll und Picker-Sheet
   slide-up sind animiert; lassen die existing Patterns erhalten. */
@media (prefers-reduced-motion: reduce) {
  .tx-card,
  .vd-cta,
  .vd-secondary,
  .vd-overflow,
  .vd-chip {
    transition: none !important;
  }
}

/* ── Picker-Sheet Tone-Erweiterung (Sweep DD MED 10) ──
   Erweitert .picker-sheet-opt um danger-Variante für rote Action-Items
   (z.B. "Löschen") im ⋯-Mehr-Menü. picker-sheet.js liest option.tone. */
.picker-sheet-opt.is-danger {
  color: var(--red);
}
.picker-sheet-opt.is-danger:hover,
.picker-sheet-opt.is-danger:focus-visible {
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.32);
}
.picker-sheet-opt-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.85;
}
.picker-sheet-opt[hidden] {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   Buchungs-Monatsübersicht v2 — neue Desktop+Mobile-Baseline
   --------------------------------------------------------------------
   Scoped unter `.bookings-month-page`. Nutzt durchgehend Design-Tokens
   aus _00-tokens.css und respektiert `body.light`-Overrides.
   Mobile-Path: gleiches Layout wie Desktop, nur via Media-Query
   responsiv. Bottom-Sheets (PickerSheet/DetailSheet) werden vom
   bestehenden Code aus dashboard.js bedient.
   ════════════════════════════════════════════════════════════════════ */

/* ── Hide AppShell-Monatsleiste (robust) ──────────────────────
   Die kompakte Header-Steuerung im Page-Header übernimmt komplett
   die Monatsnavigation. Spec-Battle:
   - Built-in v2-Selektor: `body[data-shell="v2"][data-shell-subheader="months"] .shell-page-subheader { display:block !important }` — Specificity (0,3,1).
   - Wir brauchen mindestens (0,3,1) + 1 Klasse → (0,4,1).
   `.is-bookings-month-view` wird von month-overview-v2.js auf <body>
   gesetzt UND via MutationObserver synchron gehalten (reagiert auch
   wenn shell.js die Subheader nachträglich aktiviert). */
body.is-bookings-month-view .nav-months-bar-wrap,
body.is-bookings-month-view .shell-page-subheader,
body[data-shell="v2"][data-shell-subheader="months"].is-bookings-month-view .shell-page-subheader,
body[data-shell="v2"].is-bookings-month-view .shell-page-subheader,
body.is-bookings-month-view #shell-page-subheader,
body.is-bookings-month-view #nav-months-bar,
body.is-bookings-month-view #shell-months-bar {
  display: none !important;
}

.bookings-month-page {
  --bm-card-bg: var(--card);
  --bm-card-border: var(--border);
  --bm-card-shadow: 0 8px 32px rgba(0, 0, 0, .22);
  --bm-card-radius: 14px;
  --bm-row-hover: rgba(var(--surface-rgba-base), .04);
  --bm-row-border: rgba(var(--surface-rgba-base), .07);
  --bm-ring-track: rgba(var(--surface-rgba-base), .09);
  --bm-cat-bg: rgba(var(--surface-rgba-base), .06);
  --bm-cat-border: rgba(var(--surface-rgba-base), .08);

  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  width: 100%;
}

body.light .bookings-month-page {
  --bm-card-shadow: 0 4px 20px rgba(15, 23, 42, .06);
  --bm-row-hover: rgba(15, 23, 42, .04);
  --bm-row-border: rgba(15, 23, 42, .06);
  --bm-ring-track: rgba(15, 23, 42, .08);
  --bm-cat-bg: rgba(15, 23, 42, .045);
  --bm-cat-border: rgba(15, 23, 42, .07);
}

/* ── Page Header ───────────────────────────────────────────────── */
.bm-page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-xl);
  align-items: flex-start;
}
.bm-page-header__left { min-width: 0; }
.bm-page-title {
  font-size: 30px;
  line-height: 1.15;
  font-weight: var(--fw-bold);
  letter-spacing: -.025em;
  color: var(--text-strong);
  margin: 0;
}
.bm-page-subtitle {
  margin: 6px 0 0;
  font-size: var(--fs-body);
  color: var(--text2);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.bm-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 7px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: .015em;
}
.bm-status--closed { background: var(--green2); color: var(--green); }
.bm-status--readonly { background: var(--red2); color: var(--red); }

.bm-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

/* ── Buttons (page-local) ─────────────────────────────────────── */
.bm-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  height: 42px;
  border-radius: 10px;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 1;
  cursor: pointer;
  transition: background var(--tr-fast), border-color var(--tr-fast), color var(--tr-fast), transform var(--tr-fast);
  white-space: nowrap;
  font-family: inherit;
}
.bm-btn--sm { height: 34px; padding: 0 12px; font-size: 13px; }
.bm-btn:focus-visible { outline: 2px solid rgba(var(--accent-rgba-base), .55); outline-offset: 2px; }

.bm-btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
}
.bm-btn--primary:hover { background: var(--accent3); border-color: var(--accent3); }
.bm-btn--primary:active { background: var(--accent2); border-color: var(--accent2); transform: translateY(1px); }

.bm-btn--secondary {
  background: rgba(var(--surface-rgba-base), .035);
  color: var(--text);
  border: 1px solid var(--border);
}
.bm-btn--secondary:hover { background: rgba(var(--surface-rgba-base), .065); border-color: var(--border2); }
body.light .bm-btn--secondary { background: var(--card); }
body.light .bm-btn--secondary:hover { background: var(--card2); border-color: var(--border2); }

.bm-btn[aria-disabled="true"], .bm-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}
.bm-btn--primary svg, .bm-btn--secondary svg { flex-shrink: 0; }
.bm-btn__label-short { display: none; }

.bm-filter-btn { position: relative; }
.bm-filter-btn.has-active {
  border-color: rgba(var(--accent-rgba-base), .42);
  background: rgba(var(--accent-rgba-base), .07);
  color: var(--accent);
}
.bm-filter-btn.is-open {
  background: rgba(var(--accent-rgba-base), .12);
  border-color: rgba(var(--accent-rgba-base), .42);
  color: var(--accent);
}

/* ── Add-Group: Split-Button "+ Buchung" + Dropdown-Pfeil ─────
   Primary führt die Default-Aktion aus; der integrierte Pfeil
   öffnet die wiederkehrende Variante. Ein Visual-Unit, kein
   separater Power-Menü-Button mehr. */
.bm-add-group {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 4px;
}
.bm-add-group--split { gap: 0; }
.bm-add-group--split .bm-add-btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.bm-add-split-toggle {
  width: 34px;
  padding: 0;
  justify-content: center;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 1px solid rgba(0, 0, 0, .18);
}
.bm-add-split-toggle svg { transition: transform var(--tr-fast); }
.bm-add-split-toggle.is-open {
  background: var(--accent2);
  border-color: var(--accent2);
}
.bm-add-split-toggle.is-open svg { transform: rotate(180deg); }

.bm-add-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
  padding: 6px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
body.light .bm-add-menu { background: var(--card); box-shadow: 0 12px 28px rgba(15, 23, 42, .14); }
.bm-add-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: var(--fw-medium);
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--tr-fast), color var(--tr-fast);
}
.bm-add-menu__item:hover { background: rgba(var(--surface-rgba-base), .06); }
body.light .bm-add-menu__item:hover { background: rgba(15, 23, 42, .04); }
.bm-add-menu__item svg { color: var(--text2); flex-shrink: 0; }
.bm-add-menu__item:hover svg { color: var(--text); }
.bm-add-menu__item[aria-disabled="true"] { opacity: .42; cursor: not-allowed; }
.bm-add-menu__item[aria-disabled="true"]:hover { background: transparent; }
.bm-add-menu__item--danger { color: var(--red); }
.bm-add-menu__item--danger svg { color: var(--red); opacity: .8; }
.bm-add-menu__item--danger:hover { background: rgba(248, 113, 113, .1); color: var(--red); }
.bm-add-menu__sep { height: 1px; margin: 4px 0; background: var(--bm-row-border); }
.bm-add-menu__sp { width: 14px; flex-shrink: 0; }
.bm-filter-btn__dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--card);
}
body.light .bm-filter-btn__dot { box-shadow: 0 0 0 2px var(--card); }

/* ── Month Picker ───────────────────────────────────────────────── */
/* `position: relative` ist wichtig: das Desktop-Popover (.bm-mp) ist
   absolute relativ zu .bm-month-picker. `overflow:visible` ebenfalls,
   sonst clippt die Container-Card das Popover. */
.bm-month-picker {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  height: 42px;
  border-radius: 10px;
  background: rgba(var(--surface-rgba-base), .035);
  border: 1px solid var(--border);
  overflow: visible;
}
.bm-month-picker.is-open {
  border-color: rgba(var(--accent-rgba-base), .42);
  background: rgba(var(--accent-rgba-base), .07);
}
body.light .bm-month-picker { background: var(--card); }

.bm-month-picker__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 0;
  background: none;
  color: var(--text);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--tr-fast);
  font-family: inherit;
}
.bm-month-picker__label:hover { background: rgba(var(--surface-rgba-base), .045); }
body.light .bm-month-picker__label:hover { background: rgba(15, 23, 42, .04); }

.bm-month-picker__nav {
  width: 38px;
  border: 0;
  border-left: 1px solid var(--border);
  background: none;
  color: var(--text2);
  cursor: pointer;
  transition: background var(--tr-fast), color var(--tr-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bm-month-picker__nav:hover { background: rgba(var(--surface-rgba-base), .045); color: var(--text); }
body.light .bm-month-picker__nav:hover { background: rgba(15, 23, 42, .04); color: var(--text); }
.bm-month-picker__nav[aria-disabled="true"], .bm-month-picker__nav:disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* Desktop-Monatsauswahl-Popover (3×4 Grid am Trigger).
   Mobile bleibt auf MonthSheet (Bottom-Sheet) — siehe JS-Branching. */
.bm-mp {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 380px;
  max-width: calc(100vw - 32px);
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
  padding: 14px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.light .bm-mp { background: var(--card); box-shadow: 0 12px 28px rgba(15, 23, 42, .14); }
.bm-mp__head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bm-mp__title {
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--text);
  letter-spacing: .005em;
}
.bm-mp__year {
  font-size: 12px;
  color: var(--text2);
  font-weight: var(--fw-semibold);
  margin-right: auto;
}
.bm-mp__close {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--text2);
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--tr-fast), color var(--tr-fast);
  font-family: inherit;
}
.bm-mp__close:hover { background: rgba(var(--surface-rgba-base), .08); color: var(--text); }
body.light .bm-mp__close:hover { background: rgba(15, 23, 42, .06); }
.bm-mp__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.bm-mp__cell {
  height: 40px;
  padding: 0 8px;
  border: 1px solid transparent;
  background: rgba(var(--surface-rgba-base), .04);
  color: var(--text);
  border-radius: 8px;
  font-size: 13px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--tr-fast), border-color var(--tr-fast), color var(--tr-fast);
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bm-mp__cell:hover {
  background: rgba(var(--surface-rgba-base), .08);
  color: var(--text);
}
body.light .bm-mp__cell { background: rgba(15, 23, 42, .04); }
body.light .bm-mp__cell:hover { background: rgba(15, 23, 42, .07); }
.bm-mp__cell.is-active {
  background: rgba(var(--accent-rgba-base), .14);
  color: var(--accent);
  border-color: rgba(var(--accent-rgba-base), .32);
}
.bm-mp__cell:focus-visible {
  outline: 2px solid rgba(var(--accent-rgba-base), .55);
  outline-offset: 1px;
}
@media (max-width: 767px) {
  /* Mobile zeigt das MonthSheet (Bottom-Sheet) — Popover wäre da unangemessen.
     Falls wider Erwarten doch gerendert: voll-breit schieben. */
  .bm-mp { width: calc(100vw - 32px); left: 0; right: 0; }
}

/* ── Filter-Panel ──────────────────────────────────────────── */
.bm-filter-panel {
  background: var(--bm-card-bg);
  border: 1px solid var(--bm-card-border);
  border-radius: var(--bm-card-radius);
  box-shadow: var(--bm-card-shadow);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: -8px;
}
.bm-filter-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.bm-filter-label {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--text2);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.bm-filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bm-filter-pill {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text2);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--tr-fast), color var(--tr-fast), border-color var(--tr-fast);
  font-family: inherit;
}
.bm-filter-pill:hover { background: rgba(var(--surface-rgba-base), .045); color: var(--text); }
.bm-filter-pill.is-active {
  background: rgba(var(--accent-rgba-base), .12);
  color: var(--accent);
  border-color: rgba(var(--accent-rgba-base), .32);
}
body.light .bm-filter-pill.is-active { background: rgba(var(--accent-rgba-base), .14); }

.bm-filter-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--bm-row-border);
}
.bm-filter-reset {
  background: none;
  border: 0;
  color: var(--text2);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border);
  transition: color var(--tr-fast), text-decoration-color var(--tr-fast);
}
.bm-filter-reset:hover { color: var(--text); text-decoration-color: var(--text2); }

/* ── Aktive Chips ─────────────────────────────────────────── */
.bm-active-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: -8px;
}
.bm-active-chips__label {
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text3);
  padding-right: 4px;
}
.bm-active-chips__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: rgba(var(--accent-rgba-base), .1);
  border: 1px solid rgba(var(--accent-rgba-base), .28);
  color: var(--accent);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--tr-fast), border-color var(--tr-fast);
  font-family: inherit;
}
.bm-chip:hover { background: rgba(var(--accent-rgba-base), .16); border-color: rgba(var(--accent-rgba-base), .42); }
.bm-chip svg { opacity: .7; }
.bm-chip--reset {
  background: transparent;
  border-color: var(--border);
  color: var(--text2);
}
.bm-chip--reset:hover { background: rgba(var(--surface-rgba-base), .05); color: var(--text); border-color: var(--border2); }

/* ── Hero ──────────────────────────────────────────────────── */
.bm-hero {
  background: var(--bm-card-bg);
  border: 1px solid var(--bm-card-border);
  border-radius: var(--bm-card-radius);
  box-shadow: var(--bm-card-shadow);
  padding: 24px 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr);
  gap: 28px;
  align-items: center;
}
.bm-hero__intro { display: flex; align-items: center; gap: 18px; min-width: 0; }
.bm-hero__icon {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: var(--radius-pill);
  background: rgba(var(--accent-rgba-base), .12);
  border: 1px solid rgba(var(--accent-rgba-base), .22);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bm-hero__narrative {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text);
  letter-spacing: -.005em;
}
.bm-num { font-weight: var(--fw-bold); color: var(--text-strong); white-space: nowrap; }
.bm-num--accent { color: var(--accent); }
.bm-num--good { color: var(--green); }
.bm-num--poor { color: var(--red); }

.bm-hero__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  list-style: none;
  border-left: 1px solid var(--border);
}
.bm-metric {
  padding:4px 18px;display:flex;flex-direction:column;gap:4px;
  border-right:1px solid var(--border);min-width:0;min-height:92px;
}
.bm-metric:last-child{border-right:0;padding-right:0}
.bm-metric:first-child { padding-left: 22px; }
.bm-metric__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--text2);
  margin: 0;
}
.bm-metric__value {
  font-size: 24px;
  font-weight: var(--fw-semibold);
  letter-spacing: -.025em;
  color: var(--text-strong);
  margin: 0;
  white-space: nowrap;
}
.bm-metric__value--good { color: var(--green); }
.bm-metric__value--poor { color: var(--red); }
.bm-metric__delta { font-size: 12px; color: var(--text3); margin: 0; white-space: nowrap; }
.bm-delta { display: inline-flex; align-items: center; gap: 3px; font-weight: var(--fw-semibold); font-size: 12px; white-space: nowrap; }
.bm-delta--up { color: var(--green); }
.bm-delta--down { color: var(--red); }

.bm-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }
.bm-dot--good { background: var(--green); }
.bm-dot--poor { background: var(--red); }

/* ── Two-column main grid ────────────────────────────────────── */
.bookings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  align-items: start;
}
/* Empty-State ohne Rail: Liste nimmt volle Breite, zentriert sich
   nicht (sonst würde der Empty-State auf 1500-px-Layouts visuell
   verloren wirken — der report-page wrapper zentriert schon). */
.bookings-grid--no-rail { grid-template-columns: minmax(0, 1fr); }
.bookings-grid__main { min-width: 0; }
.bookings-grid__rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ── Bookings list card ────────────────────────────────────────
   `overflow: visible` ist hier wichtig: ohne diese Regel würde
   das Drei-Punkte-Popover an der Card-Kante geclippt (das Popover
   ist position:absolute relativ zur Row, fließt nach unten/oben
   durch). Border-Radius bleibt visuell sauber, weil header/footer
   eigene Hintergründe haben und an die Kante stoßen — kein Bleed.

   `container-type: inline-size` macht die Card zum Query-Container
   für die Zeilen: das kompakte 3-Reihen-Zeilenlayout (siehe
   @container-Regel weiter unten) greift dann, sobald die LISTE
   selbst zu schmal wird — unabhängig von Viewport-Breite und
   Sidebar-Zustand. Wurzel des behobenen Bugs: das zweispaltige
   Workspace-Grid (Liste + 320px-Rail) greift schon ab 1024px, die
   breite 6-Spalten-Zeile (~840px feste Mindestbreite) passte aber
   in der Lücke (~768–1330px) nicht in die schmale Listen-Spalte
   und lief mit overflow:visible sichtbar in die „Monatsabschluss"-
   Rail. WICHTIG: `inline-size` (NICHT `size`) — Containment gilt
   nur für die Inline-Achse, sodass das vertikale Popover-Overflow
   oben/unten weiterhin über die Card-Kante ragen darf. */
.bm-list-card {
  background: var(--bm-card-bg);
  border: 1px solid var(--bm-card-border);
  border-radius: var(--bm-card-radius);
  box-shadow: var(--bm-card-shadow);
  overflow: visible;
  container-type: inline-size;
}
.bm-list-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--bm-row-border);
  border-radius: var(--bm-card-radius) var(--bm-card-radius) 0 0;
}
.bm-search { position: relative; flex: 1 1 280px; max-width: 320px; min-width: 200px; }
.bm-search__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text3); pointer-events: none; }
.bm-search__input {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 34px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: rgba(var(--surface-rgba-base), .035);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  transition: border-color var(--tr-fast), background var(--tr-fast);
}
body.light .bm-search__input { background: var(--card); }
.bm-search__input:focus { outline: none; border-color: var(--accent); background: rgba(var(--surface-rgba-base), .055); }
body.light .bm-search__input:focus { background: var(--card); }
.bm-search__input::placeholder { color: var(--text3); }

/* Tabs nie umbrechen lassen: bei engem Header (Desktop-Fenster zwischen
   ~640–780px Content-Breite, wo .bm-search den Platz frisst) wrappte die
   Reihe sonst in 2–4 Zeilen ("Ohne Beleg" fiel raus). Stattdessen eine
   horizontal scrollbare Reihe — dasselbe Verhalten, das der ≤767px-Block
   schon mobil setzt, hier in die Basis gezogen, weil der Umbruch auch
   knapp ÜBER dem Mobile-Breakpoint auftritt. min-width:0 ist Pflicht,
   damit overflow-x:auto greift (Flex-Item schrumpft sonst nicht unter
   seine Inhaltsbreite).
   padding/negativer margin (4px): overflow-y:hidden (von overflow-x:auto
   erzwungen) würde sonst den globalen :focus-visible-Ring der .bm-tab-Buttons
   (outline-offset:2px, _00-tokens.css) oben/unten clippen — vertikaler Slack
   gibt dem Ring Platz, ohne die Header-Höhe zu ändern (Gemini-A11y-Finding).
   scrollbar-width:none nur auf Touch (pointer:coarse): Desktop-Maus-Nutzer
   behalten einen ziehbaren Scrollbalken; das ≤767px-Mobile (_23h) versteckt
   ihn ohnehin unbedingt. */
.bm-tabs { display: inline-flex; gap: 6px; flex-wrap: nowrap; flex: 0 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; margin-left: auto; padding-block: 4px; margin-block: -4px; }
@media (pointer: coarse) {
  .bm-tabs { scrollbar-width: none; }
  .bm-tabs::-webkit-scrollbar { display: none; }
}
.bm-tabs > .bm-tab { flex: 0 0 auto; }
.bm-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text2);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--tr-fast), color var(--tr-fast), border-color var(--tr-fast);
  font-family: inherit;
}
.bm-tab:hover { background: rgba(var(--surface-rgba-base), .045); color: var(--text); }
.bm-tab.is-active {
  background: rgba(var(--accent-rgba-base), .12);
  color: var(--accent);
  border-color: rgba(var(--accent-rgba-base), .28);
}
body.light .bm-tab.is-active { background: rgba(var(--accent-rgba-base), .14); }
.bm-tab[aria-disabled="true"], .bm-tab:disabled { opacity: .4; cursor: not-allowed; }
.bm-tab__count {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  height: 18px;
  border-radius: var(--radius-pill);
  background: rgba(var(--surface-rgba-base), .08);
  color: inherit;
  text-align: center;
  font-size: 11px;
  line-height: 18px;
  font-weight: var(--fw-bold);
}
body.light .bm-tab__count { background: rgba(15, 23, 42, .07); }

/* Ruhige Listen-Aktion neben den Filtertabs. */
.bm-tab--select {
  color: var(--text2);
  margin-left: 4px;
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
}
.bm-tab--select svg { color: var(--text3); }
.bm-tab--select:hover { color: var(--text); }
.bm-tab--select:hover svg { color: var(--text2); }

.bm-list-body { padding: 4px 0; }

/* Ruhige Gruppenübersicht mit flachem semantischem Tint. */
.bm-group { padding: 0; }
.bm-group + .bm-group {
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
}
.bm-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px 13px;
  background: var(--bm-group-head-bg, transparent);
  border-bottom: 1px solid var(--bm-group-head-border, var(--bm-row-border));
}
.bm-group--income {
  --bm-group-head-bg: rgba(52, 211, 153, .045);
  --bm-group-head-border: rgba(52, 211, 153, .14);
}
.bm-group--expense {
  --bm-group-head-bg: rgba(248, 113, 113, .04);
  --bm-group-head-border: rgba(248, 113, 113, .13);
}
.bm-group--private { --bm-group-head-bg: var(--tone-info-bg); --bm-group-head-border: var(--tone-info-border); }
body.light .bm-group--income {
  --bm-group-head-bg: rgba(52, 211, 153, .07);
  --bm-group-head-border: rgba(52, 211, 153, .22);
}
body.light .bm-group--expense {
  --bm-group-head-bg: rgba(248, 113, 113, .06);
  --bm-group-head-border: rgba(248, 113, 113, .2);
}

.bm-group__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: var(--fw-bold);
  letter-spacing: -.005em;
  min-width: 0;
}
.bm-group--income .bm-group__title { color: var(--green); }
.bm-group--expense .bm-group__title { color: var(--red); }
.bm-group--private .bm-group__title { color: var(--tone-info-fg); }
.bm-dot--private { background: var(--tone-info-fg); }

/* Count-Pill: lesbarer Text "X Buchungen" statt nackte Zahl im Kreis.
   Wirkt nicht mehr wie Notification-Badge, sondern wie Meta-Info. */
.bm-group__count {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: rgba(var(--surface-rgba-base), .055);
  font-size: 11px;
  font-weight: var(--fw-medium);
  color: var(--text2);
  letter-spacing: .015em;
  white-space: nowrap;
}
body.light .bm-group__count { background: rgba(15, 23, 42, .055); }

.bm-group__sum {
  font-size: 17px;
  font-weight: var(--fw-bold);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bm-group__sum--good { color: var(--green); }
.bm-group__sum--poor { color: var(--red); }
.bm-group__rows { display: flex; flex-direction: column; }
/* Erste Row pro Gruppe: kein border-top — der Group-Head hat schon
   einen border-bottom als Section-Boundary. */
.bm-group__rows .bm-row:first-child { border-top: 0; }

/* ── Booking row ──────────────────────────────────────────────
   5-Spalten-Grid: Datum | Body (Titel + Kontakt) | Kategorie |
   Status-Badges | Betrag · plus separate Drei-Punkte-Spalte.
   Im Bulk-Mode (.bm-row--bulk) kommt links eine schmale CB-Spalte
   davor, sodass sich das Grid auf 1fr|menu erweitert um cb|main|menu. */
.bm-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: stretch;
  border-top: 1px solid var(--bm-row-border);
  position: relative;
  transition: background var(--tr-fast);
}
.bm-row--bulk { grid-template-columns: 40px minmax(0, 1fr) 44px; }
.bm-row--selected { background: rgba(var(--accent-rgba-base), .06); }
body.light .bm-row--selected { background: rgba(var(--accent-rgba-base), .08); }
.bm-row--selected:hover { background: rgba(var(--accent-rgba-base), .09); }

.bm-row__cb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 8px 0 14px;
}
.bm-row__cb input[type="checkbox"] {
  /* Standard-Pattern wie bestehend in _50-import-belege-export.css
     (.import-td-cb), _60-settings-contacts-bank.css (.bank-account-
     check) und _41-recurrences.css (.inv3-inline-toggle): native
     Browser-Checkbox mit `accent-color`. Garantiert pixel-zentriertes
     Häkchen, kein Custom-CSS-Glitch, konsistent mit dem Rest der App. */
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.bm-row:first-child { border-top: 0; }
.bm-row:hover, .bm-row--menu-open { background: var(--bm-row-hover); }

.bm-row__main {
  display: grid;
  grid-template-columns: 100px minmax(180px, 1fr) minmax(140px, 200px) auto 130px;
  gap: 16px;
  align-items: center;
  padding: 14px 6px 14px 22px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  width: 100%;
  min-height: 64px;
}
.bm-row__main:focus-visible { outline: 2px solid rgba(var(--accent-rgba-base), .55); outline-offset: -2px; border-radius: 6px; }

.bm-row__date {
  font-size: 12px;
  color: var(--text3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bm-row__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bm-row__title {
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bm-row__contact {
  font-size: 12px;
  color: var(--text2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Kategorie — bewusst neutral und ruhig:
   - Text führt, Icon ist nur Hint.
   - Keine farbliche Unterscheidung Einnahme/Ausgabe (Farbe lebt
     bereits im Betrag rechts und in der Gruppen-Header-Farbe).
   - Sehr leichte Surface mit feiner Border, kein Pill-Look.
   - Icon graustufig (--text3) statt akzentfarbig. */
.bm-category {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  background: rgba(var(--surface-rgba-base), .03);
  border: 1px solid rgba(var(--surface-rgba-base), .06);
  color: var(--text);
  font-size: 12px;
  font-weight: var(--fw-medium);
  max-width: 100%;
  min-width: 0;
}
body.light .bm-category {
  background: rgba(15, 23, 42, .025);
  border-color: rgba(15, 23, 42, .06);
}
/* Keine farblichen Modifier mehr — alle Kategorien gleich neutral.
   --income/--expense bleiben als CSS-Hooks für ggf. spätere Custom-
   Themes, sind aber visuell identisch. */
.bm-category--income,
.bm-category--expense { color: var(--text); }
.bm-category--none { color: var(--text3); font-style: italic; font-weight: var(--fw-regular); }
.bm-category__icon {
  flex-shrink: 0;
  color: var(--text3);
  opacity: .8;
}
.bm-category__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  color: var(--text);
  font-weight: var(--fw-medium);
}
.bm-category--none .bm-category__label { color: var(--text3); }

/* Status-Badges (Beleg fehlt / Geprüft) */
.bm-row__status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  min-width: 0;
}
.bm-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: .01em;
  white-space: nowrap;
}
/* „Beleg fehlt": ruhige Amber-Fläche ohne einseitigen Akzent. */
.bm-status-badge--missing-beleg {
  background: rgba(var(--accent-rgba-base), .04);
  color: var(--text2);
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0 7px 0 6px;
  font-weight: var(--fw-medium);
}
.bm-status-badge--missing-beleg svg { color: var(--accent); opacity: .85; }
body.light .bm-status-badge--missing-beleg {
  background: rgba(var(--accent-rgba-base), .07);
  /* stylelint-disable-next-line color-no-hex --
     Specific dark-amber for AA-Kontrast auf gedämpftem Light-Background.
     --tone-warn-fg-strong wäre die generische Token-Variante, sieht hier
     aber zu warm/sandig aus; #6a5a30 ist im _10-shell.css-Sweep für
     eine identische "muted-warn-Pill"-Familie etabliert. */
  color: #6a5a30;
}
/* stylelint-disable-next-line color-no-hex -- AA-Light-Variante des Akzent-Icons. */
body.light .bm-status-badge--missing-beleg svg { color: #b58d2c; }

/* „Geprüft": ruhige grüne Fläche ohne einseitigen Akzent. */
.bm-status-badge--checked {
  background: rgba(52, 211, 153, .04);
  color: var(--text2);
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0 7px 0 6px;
  font-weight: var(--fw-medium);
}
.bm-status-badge--checked svg { color: var(--green); opacity: .85; }
body.light .bm-status-badge--checked {
  background: rgba(52, 211, 153, .08);
  /* stylelint-disable-next-line color-no-hex -- AA-dark-green für Pill-Text auf gedämpftem Light-Background. */
  color: #266648;
}
/* stylelint-disable-next-line color-no-hex -- AA-Light-Variante des Income-Icons (matched _00-tokens.css#--chart-line-einnahmen Light). */
body.light .bm-status-badge--checked svg { color: #0a8f5a; }
.bm-status-badge svg { flex-shrink: 0; }

.bm-row__amount {
  font-size: 14px;
  font-weight: var(--fw-bold);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bm-row__amount--good { color: var(--green); }
.bm-row__amount--poor { color: var(--red); }

/* Drei-Punkte-Button: große Klickfläche, kompakte sichtbare Hoverfläche. */
.bm-row__menu-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.bm-row__menu-btn {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--tr-fast), color var(--tr-fast);
  font-family: inherit;
  position: relative;
}
.bm-row__menu-btn svg { position: relative; z-index: 1; }
.bm-row__menu-btn:hover,
.bm-row__menu-btn[aria-expanded="true"] {
  background: transparent;
  color: var(--text);
}
.bm-row__menu-btn:hover::before,
.bm-row__menu-btn[aria-expanded="true"]::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: rgba(var(--surface-rgba-base), .08);
  transform: translate(-50%, -50%);
}
body.light .bm-row__menu-btn:hover::before,
body.light .bm-row__menu-btn[aria-expanded="true"]::before {
  background: rgba(15, 23, 42, .06);
}
.bm-row__menu-btn:focus-visible {
  outline: 2px solid rgba(var(--accent-rgba-base), .55);
  outline-offset: 1px;
}

/* Popover. Smart-Flip via JS (`top:auto;bottom:calc(...)` wenn nahe Viewport-Bottom). */
.bm-row-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 8px;
  width: 230px;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
  padding: 6px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
body.light .bm-row-menu { background: var(--card); box-shadow: 0 12px 28px rgba(15, 23, 42, .14); }

.bm-row-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: var(--fw-medium);
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--tr-fast), color var(--tr-fast);
}
.bm-row-menu__item:hover { background: rgba(var(--surface-rgba-base), .06); }
body.light .bm-row-menu__item:hover { background: rgba(15, 23, 42, .04); }
.bm-row-menu__item svg { color: var(--text2); flex-shrink: 0; }
.bm-row-menu__item:hover svg { color: var(--text); }
.bm-row-menu__item[aria-disabled="true"] { opacity: .42; cursor: not-allowed; }
.bm-row-menu__item[aria-disabled="true"]:hover { background: transparent; }
.bm-row-menu__item--danger { color: var(--red); }
.bm-row-menu__item--danger svg { color: var(--red); opacity: .8; }
.bm-row-menu__item--danger:hover { background: rgba(248, 113, 113, .1); color: var(--red); }
.bm-row-menu__sep { height: 1px; margin: 4px 0; background: var(--bm-row-border); }

.bm-group__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 22px;
  border: 0;
  border-top: 1px solid var(--bm-row-border);
  background: transparent;
  color: var(--text2);
  font-size: 13px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background var(--tr-fast), color var(--tr-fast);
  font-family: inherit;
}
.bm-group__more:hover { background: var(--bm-row-hover); color: var(--text); }
.bm-group__more-chevron {
  transition: transform 180ms ease;
}
.bm-group__more[aria-expanded="true"] .bm-group__more-chevron {
  transform: rotate(180deg);
}

/* Empty / Future state */
.bm-empty {
  padding: 56px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.bm-empty svg { color: var(--text3); }
.bm-empty__title {
  font-size: 17px;
  font-weight: var(--fw-semibold);
  color: var(--text);
  margin: 0;
}
.bm-empty__text {
  font-size: var(--fs-body);
  color: var(--text2);
  margin: 0 0 6px;
  max-width: 420px;
}
.bm-empty__ctas { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.bm-empty--filter { padding: 36px 24px; }

.bm-list-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  border-top: 1px solid var(--bm-row-border);
  background: rgba(var(--surface-rgba-base), .015);
  border-radius: 0 0 var(--bm-card-radius) var(--bm-card-radius);
}
body.light .bm-list-footer { background: rgba(15, 23, 42, .015); }
.bm-list-footer__label { font-size: 13px; font-weight: var(--fw-semibold); color: var(--text); }
.bm-list-footer__count { font-size: 12px; color: var(--text2); text-align: center; }
.bm-list-footer__amount {
  font-size: 16px;
  font-weight: var(--fw-bold);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.bm-list-footer__amount--good { color: var(--accent); }
.bm-list-footer__amount--poor { color: var(--red); }

/* ── Desktop-Monatsaktionen-Modal ─────────────────────────
   Mobile nutzt weiter PickerSheet (Bottom-Sheet). Auf Desktop
   ein zentriertes kompaktes Modal (~460 px), getrennt nach
   Sektionen, gefährlicher Bereich unten. */
.bm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: var(--z-modal, 1200);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  overflow-y: auto;
}
body.light .bm-modal-overlay { background: rgba(15, 23, 42, .35); }
@media (max-width: 767px) {
  /* Mobile-Fallback: Modal wird zwar gerendert (sollte aber durch
     Action-Branching bei Mobile gar nicht erst öffnen), und nimmt
     dann fast die ganze Breite ein. */
  .bm-modal-overlay { padding: 16px; align-items: flex-end; }
}

.bm-modal {
  width: 100%;
  max-width: 460px;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--bm-card-radius);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .45);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 64px);
  overflow: hidden;
}
body.light .bm-modal {
  background: var(--card);
  box-shadow: 0 16px 40px rgba(15, 23, 42, .18);
}
/* Kein border-bottom auf dem Header — die Sektionen darunter haben
   eigene Trenner, ein zusätzlicher Header-Strich gibt den „Doppel-
   Linie zwischen Subtitle und AUSWAHL"-Effekt. */
.bm-modal__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px 4px 20px;
}
.bm-modal__head-text { flex: 1 1 auto; min-width: 0; }
.bm-modal__title {
  margin: 0;
  font-size: 17px;
  font-weight: var(--fw-bold);
  color: var(--text);
  letter-spacing: -.01em;
  line-height: 1.2;
}
.bm-modal__subtitle {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--text2);
  font-weight: var(--fw-medium);
  letter-spacing: .015em;
}
.bm-modal__close {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--text2);
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--tr-fast), color var(--tr-fast);
  font-family: inherit;
  flex-shrink: 0;
}
.bm-modal__close:hover { background: rgba(var(--surface-rgba-base), .08); color: var(--text); }
body.light .bm-modal__close:hover { background: rgba(15, 23, 42, .06); }

.bm-modal__body {
  padding: 8px 16px 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
/* Sektion-Trenner ziehen wir bewusst NICHT als border-bottom auf
   `.bm-modal__section`, sondern als border-top auf der nächsten
   Sektion via :not(:first-child). Das vermeidet einen Trailing-
   Strich nach der letzten Sektion und gibt dem Modal sauberen
   Abschluss. Trenner gehen full-width via negativen Margin. */
.bm-modal__section {
  padding: 6px 0 2px;
}
.bm-modal__section + .bm-modal__section {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--bm-row-border);
  /* Full-width: zieht Linie über das Body-Padding hinweg (die
     16 px links/rechts in .bm-modal__body). */
  margin-left: -16px;
  margin-right: -16px;
  padding-left: 16px;
  padding-right: 16px;
}
.bm-modal__section-title {
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text3);
  margin: 0 0 4px 4px;
}
.bm-modal__section + .bm-modal__section--danger { padding-top: 14px; }
.bm-modal__section--danger .bm-modal__section-title { color: var(--red); opacity: .85; }
.bm-modal__rows { display: flex; flex-direction: column; gap: 1px; }
.bm-modal__row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: var(--fw-medium);
  text-align: left;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--tr-fast), color var(--tr-fast);
  min-height: 42px;
}
.bm-modal__row:hover { background: rgba(var(--surface-rgba-base), .06); }
body.light .bm-modal__row:hover { background: rgba(15, 23, 42, .04); }
.bm-modal__row:focus-visible {
  outline: 2px solid rgba(var(--accent-rgba-base), .55);
  outline-offset: -2px;
}
.bm-modal__row-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.bm-modal__row-label {
  color: var(--text);
  font-weight: var(--fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bm-modal__row-hint {
  font-size: 11px;
  color: var(--text3);
  font-weight: var(--fw-regular);
}
.bm-modal__row-chev {
  color: var(--text3);
  flex-shrink: 0;
  opacity: .6;
}
.bm-modal__row:hover .bm-modal__row-chev { opacity: 1; color: var(--text); }
.bm-modal__row--disabled,
.bm-modal__row[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
}
.bm-modal__row--disabled:hover,
.bm-modal__row[aria-disabled="true"]:hover { background: transparent; }
.bm-modal__row--disabled .bm-modal__row-chev { display: none; }
.bm-modal__row--danger { color: var(--red); }
.bm-modal__row--danger:hover { background: rgba(248, 113, 113, .07); color: var(--red); }
.bm-modal__row--danger .bm-modal__row-label { color: var(--red); }
.bm-modal__row--danger .bm-modal__row-hint { color: var(--red); opacity: .65; }
.bm-modal__row--danger .bm-modal__row-chev { color: var(--red); opacity: .55; }
.bm-modal__row--danger.bm-modal__row--disabled { color: var(--text2); }
.bm-modal__row--danger.bm-modal__row--disabled .bm-modal__row-label { color: var(--text2); }
.bm-modal__row--danger.bm-modal__row--disabled .bm-modal__row-hint { color: var(--text3); opacity: 1; }

/* ── Bulk-Bar (sticky am unteren Listen-Card-Rand) ─────────
   Wird nur gerendert wenn __bmBulkMode === true. updateBulkUI
   patched #bulk-bar.classList.toggle('visible', size>0) — wir
   gaten unsere Sichtbarkeit NICHT auf .visible, damit der User
   auch bei 0 Auswahl noch „Abbrechen" hat. */
.bm-bulk-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--bm-row-border);
  background: var(--card2);
  z-index: 10;
  border-radius: 0 0 var(--bm-card-radius) var(--bm-card-radius);
  /* Kein Schatten/Glow — soll wie ein temporärer Modus-Footer wirken,
     nicht wie eine zweite Hauptnavigation. */
}
body.light .bm-bulk-bar { background: var(--card2); }
.bm-bulk-bar__info {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
.bm-bulk-bar__count {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  color: var(--text2);
  letter-spacing: .015em;
}
.bm-bulk-bar__hint {
  background: none;
  border: 0;
  color: var(--accent);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
  font-family: inherit;
}
.bm-bulk-bar__hint:hover { color: var(--accent3); }
.bm-bulk-bar__actions { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bm-bulk-bar__btn {
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--border);
  background: rgba(var(--surface-rgba-base), .04);
  color: var(--text);
  border-radius: 7px;
  font-size: 12px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--tr-fast), border-color var(--tr-fast), color var(--tr-fast);
}
.bm-bulk-bar__btn:hover { background: rgba(var(--surface-rgba-base), .08); border-color: var(--border2); }
body.light .bm-bulk-bar__btn { background: var(--card); }
body.light .bm-bulk-bar__btn:hover { background: var(--card2); }
.bm-bulk-bar__btn--danger { color: var(--red); border-color: rgba(248, 113, 113, .28); }
.bm-bulk-bar__btn--danger:hover { background: rgba(248, 113, 113, .08); border-color: rgba(248, 113, 113, .48); }
.bm-bulk-bar__btn--ghost { color: var(--text2); border-color: transparent; }
.bm-bulk-bar__btn--ghost:hover { color: var(--text); border-color: var(--border); }

/* Wenn die Listen-Card im Bulk-Mode ist, schaltet sich die
   Footer-Padding-Border etwas um (Bulk-Bar nimmt visuell die
   Stelle des Footers ein, beide nebeneinander wären zu viel). */
.bm-list-card--bulk .bm-list-footer { display: none; }

/* Mobile: Bulk-Bar fix am Viewport-Bottom (Sheet-artig) ──── */
@media (max-width: 767px) {
  .bm-bulk-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    border-radius: 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .35);
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  }
  body.light .bm-bulk-bar { box-shadow: 0 -4px 16px rgba(15, 23, 42, .14); }
  .bm-bulk-bar__info { justify-content: space-between; }
  .bm-bulk-bar__actions { width: 100%; justify-content: stretch; }
  .bm-bulk-bar__btn { flex: 1 1 auto; height: 40px; }
  /* Mobile: Bulk-Bar ist position:fixed (overlay), nicht mehr sticky am Card-Rand.
     Reserviere unten Platz, damit die letzte Buchungszeile nicht hinter der Bar
     versteckt liegt. ~120 px deckt 2-zeilige Action-Row + safe-area ab. */
  .bm-list-card--bulk { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Right rail cards ────────────────────────────────────────── */
.bm-rail {
  background: var(--bm-card-bg);
  border: 1px solid var(--bm-card-border);
  border-radius: var(--bm-card-radius);
  box-shadow: var(--bm-card-shadow);
  padding: 20px 22px;
}
.bm-rail__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.bm-rail__head-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bm-rail__title {
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--text);
  margin: 0;
  letter-spacing: .005em;
}
.bm-rail__head-meta { display: flex; flex-direction: column; gap: 4px; }
.bm-rail__status { font-size: 13px; font-weight: var(--fw-semibold); letter-spacing: -.005em; }
.bm-rail__status--good { color: var(--green); }
.bm-rail__status--warn { color: var(--accent); }
.bm-rail__status--poor { color: var(--red); }
.bm-rail__status--muted { color: var(--text2); }
.bm-rail__hint { font-size: 12px; color: var(--text2); line-height: 1.5; }

.bm-score-ring { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.bm-score-ring--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--border);
  border-radius: 50%;
  color: var(--text3);
  font-size: 14px;
  font-weight: var(--fw-bold);
}
.bm-score-ring__value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: var(--fw-bold);
  color: var(--text);
  letter-spacing: -.02em;
}

.bm-rail__primary { width: 100%; justify-content: center; margin-top: 16px; height: 40px; }
.bm-rail__primary svg { margin-left: auto; }
.bm-rail__divider { height: 1px; background: var(--bm-row-border); margin: 16px -22px; }
.bm-rail__subtitle {
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text3);
  margin: 0 0 10px;
}

.bm-rail__items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.bm-rail__item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}
.bm-rail__item-icon { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.bm-rail__item-icon--good { background: var(--green2); color: var(--green); }
.bm-rail__item-icon--warn { background: rgba(var(--accent-rgba-base), .14); color: var(--accent); }
.bm-rail__item-icon--poor { background: var(--red2); color: var(--red); }
.bm-rail__item-icon--info { background: rgba(96, 165, 250, .14); color: var(--blue); }

.bm-rail__item-label { color: var(--text); font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-rail__item-btn {
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: var(--fw-semibold);
  border: 1px solid var(--border);
  background: rgba(var(--surface-rgba-base), .035);
  color: var(--text);
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--tr-fast), border-color var(--tr-fast);
  white-space: nowrap;
  font-family: inherit;
}
.bm-rail__item-btn:hover { background: rgba(var(--surface-rgba-base), .065); border-color: var(--border2); }
body.light .bm-rail__item-btn { background: var(--card); }
body.light .bm-rail__item-btn:hover { background: var(--card2); }
.bm-rail__item-btn[aria-disabled="true"], .bm-rail__item-btn:disabled { opacity: .45; cursor: not-allowed; }
.bm-rail__item--success { font-size: 12px; color: var(--text2); padding: 4px 0; }

/* „Monatsaktionen…" — semantisch hier zuhause (betrifft den
   Monat, nicht die Liste). Ruhig, nicht laut: Sekundär-Optik,
   volle Breite, leichter Hover. */
.bm-rail__more {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 16px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  background: rgba(var(--surface-rgba-base), .035);
  color: var(--text);
  border-radius: 9px;
  font-size: 13px;
  font-weight: var(--fw-medium);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--tr-fast), border-color var(--tr-fast);
}
.bm-rail__more:hover { background: rgba(var(--surface-rgba-base), .065); border-color: var(--border2); }
body.light .bm-rail__more { background: var(--card); }
body.light .bm-rail__more:hover { background: var(--card2); border-color: var(--border2); }
.bm-rail__more svg { color: var(--text2); flex-shrink: 0; }
.bm-rail__more-chev { margin-left: auto; color: var(--text3); }

/* ── USt-Übersicht (echte Werte) ──────────────────────────── */
.bm-rail__vat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.bm-rail__vat-period {
  font-size: 11px;
  color: var(--text3);
  font-weight: var(--fw-semibold);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.bm-rail__rows { display: flex; flex-direction: column; }
.bm-rail__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  font-size: 13px;
}
.bm-rail__row + .bm-rail__row { border-top: 1px dashed var(--bm-row-border); }
.bm-rail__row-label { color: var(--text2); }
.bm-rail__row-val { color: var(--text); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.bm-rail__row--strong .bm-rail__row-label { color: var(--text); font-weight: var(--fw-semibold); }
.bm-rail__row--strong .bm-rail__row-val { color: var(--accent); }

.bm-rail__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  background: none;
  border: 0;
  color: var(--accent);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.bm-rail__link:hover { color: var(--accent3); text-decoration: underline; }

/* ── Steuer-Rücklage (Future) ─────────────────────────────── */
.bm-rail--reserve { position: relative; }
.bm-rail__reserve-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.bm-rail__future-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: rgba(96, 165, 250, .12);
  color: var(--blue);
  border: 1px solid rgba(96, 165, 250, .28);
}
.bm-rail__future-amount {
  font-size: 18px;
  font-weight: var(--fw-bold);
  color: var(--text2);
  letter-spacing: -.01em;
  margin: 4px 0 8px;
}
.bm-rail__future-skeleton {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: .35;
  pointer-events: none;
}
.bm-rail__future-bar {
  height: 8px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, rgba(var(--surface-rgba-base), .14) 0%, rgba(var(--surface-rgba-base), .06) 50%, rgba(var(--surface-rgba-base), .14) 100%);
}
.bm-rail__future-row { height: 10px; border-radius: 4px; background: rgba(var(--surface-rgba-base), .08); }
.bm-rail__future-row--short { width: 60%; }
body.light .bm-rail__future-bar { background: linear-gradient(90deg, rgba(15, 23, 42, .08) 0%, rgba(15, 23, 42, .04) 50%, rgba(15, 23, 42, .08) 100%); }
body.light .bm-rail__future-row { background: rgba(15, 23, 42, .06); }

/* ── Tablet/Compact (601 — 1023 px) ──────────────────────── */
@media (max-width: 1023px) {
  .bm-page-header { grid-template-columns: 1fr; }
  .bm-page-header__actions { justify-content: flex-start; }
  .bookings-grid { grid-template-columns: 1fr; }
  .bm-hero { grid-template-columns: 1fr; gap: 18px; padding: 22px 22px; }
  .bm-hero__metrics {
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-top: 16px;
  }
  .bm-metric:first-child { padding-left: 0; }
  .bm-metric { padding-left: 0; padding-right: 16px; }
  .bm-metric:last-child { padding-right: 0; }
  .bm-filter-row { grid-template-columns: 1fr; gap: 6px; }
  .bm-filter-label { font-size: 11px; }
  /* Tablet: Kategorie wird kompakter, Status-Badges shrink */
  .bm-row__main {
    grid-template-columns: 90px minmax(160px, 1fr) auto auto 110px;
    gap: 12px;
    padding-left: 18px;
  }
}

/* ── Phones (601 — 767 px) ──────────────────────────────── */
@media (max-width: 767px) {
  .bm-page-title { font-size: 24px; }
  .bm-page-subtitle { font-size: 13px; }

  /* Header-Aktionen werden kompakt: Picker eigene Zeile, Buttons einreihig */
  .bm-page-header__actions { flex-wrap: wrap; gap: 8px; }
  .bm-month-picker { flex: 1 1 100%; height: 40px; }
  .bm-month-picker__label { flex: 1; }
  .bm-btn { height: 40px; padding: 0 12px; font-size: 13px; }
  .bm-btn--primary { flex: 1 1 auto; }
  .bm-btn__label-full { display: none; }
  .bm-btn__label-short { display: inline; }

  .bm-hero { padding: 18px; gap: 14px; }
  /* Mobile: Saldo prominent (eigene Zeile darüber), darunter
     Einnahmen + Ausgaben kompakt nebeneinander. */
  .bm-hero__icon { width: 48px; height: 48px; flex-basis: 48px; }
  .bm-hero__narrative { font-size: 14px; line-height: 1.5; }
  .bm-hero__metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "saldo saldo" "income expense";
    gap: 8px;
    border-top: 1px solid var(--border);
    padding-top: 14px;
  }
  .bm-metric { min-height:0;padding:6px 0;border-right:0;gap:2px; }
  .bm-metric--saldo { grid-area: saldo; }
  .bm-metric--saldo .bm-metric__value { font-size: 22px; }
  .bm-metric:not(.bm-metric--saldo) .bm-metric__value { font-size: 16px; }
  .bm-metric:not(.bm-metric--saldo) {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
  }
  .bm-hero__metrics > .bm-metric:nth-child(1) { grid-area: income; }
  .bm-hero__metrics > .bm-metric:nth-child(2) { grid-area: expense; }
  .bm-metric__delta { font-size: 11px; }

  /* Group-Header auf Mobile: kompakter ohne den Effekt zu verlieren. */
  .bm-group__head { padding: 14px 16px 10px; gap: 8px; }
  .bm-group__title { font-size: 13px; }
  .bm-group__sum { font-size: 15px; }
  .bm-group__count { height: 20px; padding: 0 8px; font-size: 10px; }

  .bm-list-card__head {
    flex-wrap: wrap;
    padding: 12px 14px;
    gap: 10px;
  }
  .bm-search { flex-basis: 100%; max-width: none; }
  .bm-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex: 1 1 auto;
    width: 100%;
    margin-left: 0;
  }
  .bm-tabs::-webkit-scrollbar { display: none; }
  .bm-tab { flex: 0 0 auto; }
  .bm-tab--select { width: 100%; justify-content: center; margin-left: 0; }
  .bm-tab--select::before { display: none; }

  /* Booking-Row als Card-Zeile auf Mobile: 3-Reihen-Layout
     Reihe 1: Titel             | Betrag
     Reihe 2: Datum · Kategorie | (gleiche Reihe)
     Reihe 3: Status-Badges (optional, nur wenn vorhanden)
     ⋯-Button rechts vertikal mittig. */
  .bm-row { grid-template-columns: minmax(0, 1fr) 44px; }
  /* Bulk-Mode auf Mobile: 3-Spalten cb|main|menu MUSS hier explizit gesetzt
     werden, sonst gewinnt die Mobile-`.bm-row`-Regel (zwei Spalten) wegen
     späterer Source-Order über die globale `.bm-row--bulk`-Regel (Line 777,
     drei Spalten). Folge wäre, dass der Menu-Container in eine zweite
     Grid-Reihe wrappt und der `.bm-row__main` in eine 44 px breite Zelle
     gequetscht wird — alle Inhalte landen offscreen rechts. */
  .bm-row--bulk { grid-template-columns: 36px minmax(0, 1fr) 40px; }
  .bm-row__main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "title  title  amount"
      "date   cat    cat"
      "status status status";
    gap: 4px 8px;
    padding: 14px 6px 14px 18px;
    min-height: 76px;
    align-items: center;
  }
  /* Im Bulk-Mode wird das linke Padding kleiner, weil die Checkbox-Spalte
     bereits links steht und das doppelte Gap unangenehm wäre. */
  .bm-row--bulk .bm-row__main { padding-left: 6px; }
  .bm-row__date { grid-area: date; font-size: 11px; align-self: center; }
  .bm-row__body { grid-area: title; min-width: 0; }
  .bm-row__title { font-size: 14px; }
  .bm-row__contact { display: none; } /* Mobile: Platz sparen */
  .bm-category {
    grid-area: cat;
    justify-self: start;
    height: 22px;
    padding: 0 8px;
    font-size: 11px;
    max-width: 100%;
  }
  .bm-row__status { grid-area: status; align-self: start; }
  /* Status-Reihe nur sichtbar wenn Inhalte da sind, sonst keine Lücke */
  .bm-row__status:empty { display: none; }
  .bm-row__amount { grid-area: amount; align-self: start; font-size: 15px; }
  .bm-row__menu-wrap { padding-right: 4px; }
  .bm-row__menu-btn { width: 40px; height: 40px; }
  .bm-row-menu { right: 0; width: min(260px, calc(100vw - 32px)); }
  /* Checkbox-Spalte auf Mobile: kompakter Padding und zentrierte CB. */
  .bm-row__cb { padding: 0 4px 0 10px; }

  .bm-list-footer {
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
  }
  .bm-list-footer__count { grid-column: 1 / span 2; text-align: left; order: 3; }
  .bm-list-footer__amount { text-align: right; }

  /* Rail-Cards stacked unter Bookings — schon durch Tablet-Regel
     auf 1-Spalte. Hier nur Padding leicht zähmen. */
  .bm-rail { padding: 16px 18px; }
}

/* Sehr schmal (≤ 380): noch kompaktere Header-Buttons */
@media (max-width: 380px) {
  .bm-page-header__actions { gap: 6px; }
  .bm-btn--primary { flex-basis: 100%; justify-content: center; }
  .bm-filter-btn { flex: 1; justify-content: center; }
}

/* Narrow Phones (≤520px): 2-Spalten-Grid für Einnahmen/Ausgaben quetscht
   bei langen Zahlen (z.B. "16.782,29 €" + "+62,0 % vs. Apr") in zu schmale
   Zellen — Werte/Deltas würden mehrzeilig brechen. User-Feedback 2026-05-11:
   stattdessen 1-Spalten-Stack mit Label links, Value + Delta rechts in
   einer Reihe — alle Zahlen behalten Single-Line-Layout. */
@media (max-width: 520px) {
  .bm-hero__metrics {
    grid-template-columns: 1fr;
    grid-template-areas: "saldo" "income" "expense";
    gap: 6px;
  }
  .bm-metric:not(.bm-metric--saldo) {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 10px;
  }
  .bm-metric:not(.bm-metric--saldo) .bm-metric__label {
    flex: 0 0 auto;
    min-width: 84px;
  }
  .bm-metric:not(.bm-metric--saldo) .bm-metric__value {
    flex: 1 1 auto;
    text-align: right;
  }
  .bm-metric:not(.bm-metric--saldo) .bm-metric__delta {
    flex: 0 0 auto;
    margin-left: 0;
    text-align: right;
  }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bm-row, .bm-tab, .bm-btn, .bm-month-picker__nav, .bm-month-picker__label,
  .bm-row__menu-btn, .bm-filter-pill, .bm-rail__item-btn {
    transition: none !important;
  }
}

/* ── Inside .report-page--month: spacing ─────────────────────
   KEIN eigener max-width-Cap — der bestehende `.report-page--month`-
   Cap aus _12-page-shell.css (1500px) reicht aus. Wir vermeiden so
   einen zusätzlichen *-view/*-page-Klassen-Cap, den der
   `inner-cap-detection`-Test in tests/shell-width-tokens.test.js
   sonst als neuen "must-be-overridden"-Eintrag anmeckert.

   Top-Abstand: matcht das Finanzcockpit. Default `.report-page`
   hat `padding: 20px` aus _12-page-shell.css (--app-page-pad-top),
   das Cockpit rendert ohne Page-Wrapper und seine `.cockpit-header`
   hat selbst nur 2px Top-Padding. Wir reduzieren hier exklusiv für
   die Buchungssicht auf 2px → identische optische Höhe. Die
   horizontalen Paddings + Bottom-Padding bleiben Default
   (Sidebar-Abstand, Footer-Spacing unverändert). */
.report-page--month:has(.bookings-month-page) {
  padding-top: 2px;
  /* overflow:visible damit das Drei-Punkte-Popover nicht an der
     Page-Border geclippt wird. */
  overflow: visible;
}
.report-page--month .bookings-month-page > * { width: 100%; }

#modal:has(.entry-composer) {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  pointer-events: none;
}
#modal:has(.entry-composer) > .ov {
  position: absolute;
  height: 100%;
  z-index: auto;
  pointer-events: auto;
}
.modal.entry-composer {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: min(1040px, calc(100vw - 32px));
  max-width: 1040px;
  max-height: calc(100dvh - 40px);
  border-radius: 16px;
  background: var(--entry-composer-surface);
  border-color: var(--entry-composer-border-strong);
  box-shadow: var(--entry-composer-shadow);
  overflow: hidden;
}
.entry-composer__header {
  padding: 18px 20px 14px;
  align-items: flex-start;
  background:
    linear-gradient(180deg, rgba(var(--surface-rgba-base), .03), transparent),
    var(--entry-composer-surface);
  border-bottom: 1px solid var(--entry-composer-border);
}
.entry-composer__header-copy { min-width: 0; }
.entry-composer__header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-left: auto;
}
.entry-composer__header h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--text-strong);
}
.entry-composer__header .modal-subtitle {
  margin-top: 6px;
  color: var(--text3);
  font-size: 12px;
  letter-spacing: .02em;
}
.entry-composer__close {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.entry-composer__body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 16px;
  padding: 18px 20px;
  overflow-y: auto;
}
.entry-composer__main,
.entry-composer__rail {
  min-width: 0;
}
.entry-composer__main {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.entry-composer__rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.entry-composer__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px 16px;
  background: var(--entry-composer-surface);
  border-top: 1px solid var(--entry-composer-border);
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  overflow: hidden;
}
.entry-composer__footer .btn {
  min-height: 44px;
  height: 44px;
  min-width: 120px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  line-height: 1;
}
.entry-composer__footer-cancel {
  align-self: center;
  min-width: 128px;
  color: var(--text2);
  background: rgba(var(--surface-rgba-base), .02);
  border-color: var(--entry-composer-border);
}
.entry-composer__footer .btn-mobile-icon {
  flex: 0 0 auto;
}
.entry-composer__footer .btn-mobile-label {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.entry-composer__footer-template {
  display: inline-flex !important;
  color: var(--text2);
  background: rgba(var(--surface-rgba-base), .02);
  border-color: var(--entry-composer-border);
}
.entry-composer__topbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
.entry-composer__mode-row {
  display: flex;
  justify-content: flex-end;
  pointer-events: auto;
  position: static;
  z-index: 1;
}
.entry-composer__stack--core {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.entry-composer__row {
  display: grid;
  gap: 12px;
}
.entry-composer__row--category-date {
  grid-template-columns: minmax(0, 1.3fr) minmax(180px, .8fr);
  align-items: start;
}
.entry-composer__row--finance {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.entry-composer__template-row,
.entry-composer__utility {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.entry-composer__meta-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text3);
  letter-spacing: 0;
  text-transform: none;
  flex: 0 0 auto;
}
.entry-type-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 0;
  flex: 0 1 380px;
  width: min(100%, 380px);
  padding: 4px;
  border: 1px solid var(--entry-composer-border);
  border-radius: 14px;
  background: var(--entry-composer-surface-muted);
}
.entry-type-toggle__button {
  min-height: 36px;
  border-radius: 10px;
  border-color: transparent;
  background: transparent;
  font-weight: var(--fw-semibold);
  box-shadow: none;
}
.entry-type-toggle__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.entry-quick-toggle {
  position: relative;
  flex: 0 1 210px;
  min-width: 190px;
  cursor: pointer;
  pointer-events: auto;
}
.entry-quick-toggle input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.entry-quick-toggle__surface {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 14px;
  border: 1px solid var(--entry-composer-border);
  background: var(--entry-composer-surface-muted);
  transition: border-color var(--tr-fast), background var(--tr-fast), box-shadow var(--tr-fast);
}
.entry-quick-toggle__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.entry-quick-toggle__copy strong {
  color: var(--text-strong);
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.entry-quick-toggle__copy small {
  color: var(--text3);
  font-size: 10.5px;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.entry-quick-toggle__switch {
  width: 38px;
  height: 22px;
  padding: 2px;
  border-radius: var(--radius-pill);
  background: rgba(var(--surface-rgba-base), .08);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  transition: background var(--tr-fast);
}
.entry-quick-toggle__knob {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--entry-composer-surface-strong);
  border: 1px solid var(--entry-composer-border);
  transition: transform var(--tr-fast), border-color var(--tr-fast);
}
.entry-quick-toggle input:focus-visible + .entry-quick-toggle__surface,
.entry-quick-toggle:hover .entry-quick-toggle__surface {
  border-color: var(--entry-composer-border-strong);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgba-base), .10);
}
.entry-quick-toggle input:checked + .entry-quick-toggle__surface {
  border-color: rgba(var(--accent-rgba-base), .30);
  background: rgba(var(--accent-rgba-base), .08);
}
.entry-quick-toggle input:checked + .entry-quick-toggle__surface .entry-quick-toggle__switch {
  background: rgba(var(--accent-rgba-base), .24);
}
.entry-quick-toggle input:checked + .entry-quick-toggle__surface .entry-quick-toggle__knob {
  transform: translateX(16px);
  border-color: rgba(var(--accent-rgba-base), .28);
}
.entry-field {
  margin-bottom: 0;
}
.entry-composer .entry-field:has(.field-error-hint) {
  margin-bottom: 0;
}
.entry-composer .fgrp > label {
  display: flex; align-items: center; gap: 6px; min-height: 20px; margin-bottom: 6px;
  color: var(--text3); font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: 0; line-height: 1.35; text-transform: none;
}
.entry-field__label-row {
  position: relative; display: flex; align-items: center; gap: 6px; min-height: 20px; margin-bottom: 6px;
}
.entry-field__label-row > label {
  margin: 0; color: var(--text3); font-size: 12px; font-weight: var(--fw-semibold);
  letter-spacing: 0; line-height: 1.35; text-transform: none;
}
.entry-field--amount label {
  margin-bottom: 6px;
}
.entry-field--amount input {
  min-height: 54px;
  padding: 12px 16px;
  font-size: 30px;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  background: var(--entry-composer-field-bg);
}
.entry-field--booking-text input,
.entry-composer__row .date-input-wrap input,
.entry-composer .cd-trigger,
.entry-composer .bt-wrap > input {
  min-height: 46px;
}
.entry-composer .fg {
  gap: 12px;
}
.entry-inline-card {
  margin-top: -2px;
  margin-bottom: 2px;
  padding: 8px 11px;
  border: 1px solid var(--entry-composer-border);
  border-radius: var(--radius2);
  color: var(--text2);
  font-size: 11px;
  line-height: 1.55;
}
.entry-inline-card--warning {
  color: var(--entry-composer-warning-fg);
  background: var(--entry-composer-warning-bg);
  border-color: var(--entry-composer-warning-border);
}
.entry-inline-card--info {
  color: var(--entry-composer-info-fg);
  background: var(--entry-composer-info-bg);
  border-color: var(--entry-composer-info-border);
}
.entry-inline-card--success {
  color: var(--entry-composer-success-fg);
  background: var(--entry-composer-success-bg);
  border-color: var(--entry-composer-success-border);
}
.entry-inline-card--ocr {
  margin: 0;
  padding: 8px 10px;
  border-left-width: 3px;
  font-size: 11px;
  line-height: 1.45;
}
.entry-inline-card--km {
  margin-bottom: 10px;
  padding: 10px 12px;
}
.entry-inline-card--plaus {
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.6;
}
.entry-inline-card__tone {
  color: currentColor;
  margin-bottom: 7px;
}
.entry-inline-card__tone--success {
  font-weight: var(--fw-semibold);
}
.entry-inline-card__grid {
  gap: 8px;
  margin-bottom: 6px;
}
.entry-inline-card__field {
  flex: 1 1 0;
}
.entry-inline-card__field label,
.entry-inline-card__km-input label {
  font-size: 10px;
}
.entry-inline-card__field input {
  min-height: 46px;
  font-size: 12px;
}
body.light .entry-inline-card--bewirtung .entry-inline-card__tone {
  color: var(--text);
}
.entry-inline-card__icon {
  vertical-align: -2px;
  margin-right: 3px;
}
.entry-inline-card__km-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.entry-inline-card__km-input {
  flex: 0 0 120px;
  margin: 0;
}
.entry-inline-card__km-input input {
  font-size: 13px;
  font-weight: var(--fw-semibold);
}
.entry-inline-card__muted {
  color: var(--text3);
  font-size: 11px;
  padding-top: 14px;
}
.entry-inline-card__result {
  color: var(--entry-composer-success-fg);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  padding-top: 14px;
}
.entry-inline-card__help {
  color: var(--text3);
  font-size: 10px;
  margin-top: 4px;
}
.entry-inline-card__check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--text2);
  line-height: 1.45;
}
.entry-inline-card__check input {
  margin-top: 2px;
  flex-shrink: 0;
}
.entry-inline-card__service-date {
  margin-top: 10px;
}
.entry-inline-card__service-date label {
  display: block;
  font-size: 12px;
  font-weight: var(--fw-semibold);
  margin-bottom: 4px;
}
.entry-inline-card__service-date input {
  font-size: 13px;
}
.entry-recurring {
  margin-top: -2px; margin-bottom: 2px; border: 1px solid var(--entry-composer-border);
  border-radius: 12px; background: rgba(var(--surface-rgba-base), .02);
}
.entry-recurring__summary {
  display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 7px 10px;
  color: var(--text2); font-size: 12px; font-weight: var(--fw-semibold); line-height: 1.35; cursor: pointer; list-style: none;
}
.entry-recurring__summary::-webkit-details-marker {
  display: none;
}
.entry-recurring__summary-icon {
  width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid currentColor; color: var(--text3); transition: transform var(--tr-fast);
}
.entry-recurring[open] .entry-recurring__summary-icon { transform: rotate(90deg); }
.entry-recurring__panel { padding: 0 10px 10px 24px; }
.entry-recurring__row { display: flex; align-items: center; gap: 6px; }
.entry-recurring__check {
  display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text2);
  cursor: pointer; text-transform: none; letter-spacing: normal; font-weight: 400;
}
.entry-recurring__check input {
  width: auto; flex: 0 0 auto; margin: 0; cursor: pointer; accent-color: var(--accent);
}
.entry-recurring__label { flex: 0 1 auto; line-height: 1.4; }
.entry-recurring__info {
  display: inline-flex; align-items: center; color: var(--text3); cursor: help; transition: color var(--tr-fast);
}
.entry-recurring__info:hover,
.entry-recurring__info:focus-visible {
  color: var(--tone-info-fg);
  outline: none;
}
.entry-recurring__detail {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 6px;
  font-size: 11px; line-height: 1.5; color: var(--text3);
}
.entry-recurring__detail[hidden],
.entry-recurring__hint[hidden],
.entry-recurring[hidden] {
  display: none !important;
}
.entry-recurring__detail-text { flex: 1 1 200px; }
.entry-recurring__hint { flex: 1 1 100%; color: var(--text2); font-weight: var(--fw-medium); }
.entry-plaus-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
}
.entry-plaus-row__icon {
  vertical-align: -1px;
  margin-right: 4px;
}
.entry-plaus-row__dismiss {
  cursor: pointer;
  opacity: .5;
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1;
  padding: 2px 4px;
  transition: opacity var(--tr-fast);
}
.entry-plaus-row__dismiss:hover,
.entry-plaus-row__dismiss:focus-visible {
  opacity: 1;
}
.entry-plaus-row__danger {
  color: var(--red);
}
.entry-plaus-row__helper {
  color: var(--text2);
  font-size: 10.5px;
}
.entry-label-note {
  color: var(--text3);
  font-size: 9px;
}
/* §13b OCR */
.entry-field__note--rc13b-ocr {
  margin-top: 4px;
  color: var(--text2);
  font-size: 10.5px;
  line-height: 1.35;
}
.entry-receipt-dropzone {
  margin-top: 2px;
  padding: 12px;
  border: 1.5px dashed var(--entry-composer-border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  cursor: pointer;
  transition: border-color var(--tr-fast), background var(--tr-fast), box-shadow var(--tr-fast), transform var(--tr-fast);
}
.entry-receipt-dropzone.is-dragover,
.entry-receipt-dropzone.is-uploading,
.entry-receipt-dropzone.is-analyzing,
.entry-receipt-dropzone.is-attached {
  border-color: var(--entry-composer-border-strong);
  background: var(--entry-composer-surface);
}
.entry-receipt-dropzone:not(.is-compact):hover,
.entry-receipt-dropzone.is-dragover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgba-base), .07);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgba-base), .28), 0 0 0 3px rgba(var(--accent-rgba-base), .12);
}
.entry-receipt-dropzone.is-error {
  border-color: rgba(248, 113, 113, .32);
}
.entry-receipt-dropzone.is-warning {
  border-color: rgba(232, 184, 75, .32);
}
.entry-receipt-dropzone.is-compact {
  padding: 0;
  border-style: solid;
  border-color: transparent;
  background: transparent;
  cursor: default;
}
.entry-receipt-dropzone.is-dragover,
.entry-receipt-dropzone:focus-within {
  border-color: var(--accent);
  background: rgba(var(--accent-rgba-base), .07);
}
.entry-receipt-dropzone.is-compact:hover,
.entry-receipt-dropzone.is-compact:focus-within {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.entry-receipt-dropzone.is-compact .entry-receipt-dropzone__hero,
.entry-receipt-dropzone.is-compact .entry-receipt-dropzone__actions {
  display: none;
}
.entry-receipt-dropzone__hero {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
}
.entry-receipt-dropzone__upload-action {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 12px;
  color: var(--accent);
  cursor: pointer;
  appearance: none;
}
.entry-receipt-dropzone__upload-action:hover,
.entry-receipt-dropzone__upload-action:focus-visible,
.entry-receipt-dropzone.is-dragover .entry-receipt-dropzone__upload-action {
  border-color: rgba(var(--accent-rgba-base), .36);
  background: rgba(var(--accent-rgba-base), .10);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgba-base), .10);
}
.entry-receipt-dropzone__lead {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.entry-receipt-dropzone__eyebrow {
  color: var(--text3);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  text-transform: none;
}
.entry-receipt-dropzone__title {
  color: var(--text-strong);
  font-size: 15px;
  line-height: 1.35;
}
.entry-receipt-dropzone__hint {
  font-size: 12px;
  color: var(--text3);
  margin-bottom: 0;
}
.entry-receipt-dropzone__desktop-hint {
  display: none;
  color: var(--accent);
  font-size: 11px;
  font-weight: var(--fw-semibold);
}
.entry-receipt-dropzone__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-left: 56px;
  justify-content: flex-start;
}
.entry-receipt-dropzone__button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}
.entry-receipt-dropzone__button--secondary {
  min-width: 212px;
}
.entry-receipt-dropzone__button.is-attached {
  border-color: rgba(var(--accent-rgba-base), .26);
  background: rgba(var(--accent-rgba-base), .10);
  color: var(--text-strong);
}
.entry-receipt-link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: var(--fs-sm);
  color: var(--green);
}
.entry-receipt-link span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entry-smart-card {
  border: 1px solid var(--entry-composer-border);
  border-radius: 14px;
  background: var(--entry-composer-surface-muted);
  padding: 14px;
}
.entry-smart-card__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.entry-smart-card__eyebrow {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text3);
}
.entry-smart-card__title {
  font-size: 15px;
  line-height: 1.3;
  color: var(--text-strong);
}
.entry-smart-card__subtitle {
  color: var(--text3);
  font-size: 12px;
  line-height: 1.45;
}
.entry-smart-card__note,
.entry-smart-card__hint {
  color: var(--text3);
  font-size: 12px;
  line-height: 1.5;
}
.entry-smart-card__stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.entry-smart-card__applied {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.entry-smart-card__applied-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: rgba(var(--surface-rgba-base), .05);
  color: var(--text2);
  font-size: 11px;
  font-weight: var(--fw-medium);
}
.entry-smart-card__applied-chip svg {
  color: var(--green);
  flex: 0 0 auto;
}
.entry-smart-card--suggestions {
  border-color: var(--entry-composer-info-border);
  background: var(--entry-composer-info-bg);
  padding: 12px;
}
.entry-smart-card--suggestions .entry-smart-card__header {
  margin-bottom: 10px;
}
.entry-smart-card--suggestions .entry-smart-card__stack {
  gap: 8px;
  padding-right: 2px;
}
.entry-smart-card--recent {
  background: var(--entry-composer-surface);
  padding: 10px;
}
.entry-smart-card--muted {
  background: var(--entry-composer-surface-muted);
}
.entry-smart-card--recent .entry-smart-card__header {
  margin-bottom: 6px;
}
.entry-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.entry-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid var(--entry-composer-border);
  background: rgba(var(--surface-rgba-base), .03);
  color: var(--text2);
  cursor: pointer;
  font: inherit;
  transition: background var(--tr-fast), border-color var(--tr-fast), color var(--tr-fast);
}
.entry-chip__icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid var(--entry-composer-border);
  background: rgba(var(--surface-rgba-base), .04);
  color: var(--accent);
  flex: 0 0 auto;
}
.entry-chip__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  text-align: left;
}
.entry-chip__label {
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.2;
  font-weight: var(--fw-semibold);
  color: var(--text2);
}
.entry-chip small {
  display: block;
  color: var(--text3);
  font-size: 10px;
  line-height: 1.1;
}
.entry-chip__check {
  display: none;
  margin-left: auto;
  color: var(--accent);
  font-size: 12px;
  font-weight: var(--fw-bold);
}
.entry-chip:hover,
.entry-chip.is-active {
  border-color: rgba(var(--accent-rgba-base), .34);
  background: rgba(var(--accent-rgba-base), .09);
  color: var(--text);
}
.entry-chip.is-active .entry-chip__label {
  color: var(--accent);
}
.entry-chip.is-active .entry-chip__check {
  display: inline-flex;
}
.entry-smart-card--recent-single .entry-chip-list {
  display: block;
}
.entry-smart-card--recent-single .entry-chip {
  width: 100%;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  justify-content: stretch;
  align-items: center;
  min-height: 44px;
  padding: 7px 9px;
  border-radius: 12px;
}
.entry-smart-card--recent-single .entry-chip__icon {
  display: inline-flex;
}
.entry-smart-card--recent-single .entry-chip__label {
  max-width: none;
}
.entry-save-button {
  min-height: 56px !important;
  height: 56px !important;
  min-width: 224px !important;
  padding: 0 28px !important;
  border-radius: 14px;
  font-size: 15px;
  font-weight: var(--fw-bold);
  letter-spacing: -.01em;
  box-shadow: 0 18px 34px rgba(var(--accent-rgba-base), .18);
}
.modal.entry-composer.mode-ausgabe .entry-save-button {
  border-color: var(--entry-composer-expense-border);
  background: var(--red);
}
.modal.entry-composer.mode-einnahme .entry-save-button {
  border-color: var(--entry-composer-income-border);
  background: var(--green);
  color: var(--bg);
  box-shadow: 0 18px 34px var(--green2);
}
.tx-receipt-status {
  margin-top: 10px;
  font-size: 11px;
  color: var(--text2);
}
.entry-receipt-dropzone.is-compact .tx-receipt-status {
  margin-top: 0;
}
.entry-receipt-status {
  border-radius: 14px;
  border: 1px solid var(--entry-composer-border);
  background: var(--entry-composer-surface);
}
.entry-receipt-status.is-busy {
  border-color: var(--entry-composer-info-border);
  background: var(--entry-composer-info-bg);
}
.entry-receipt-status.is-warning {
  border-color: rgba(232, 184, 75, .32);
  background: rgba(232, 184, 75, .10);
}
.entry-receipt-status.is-error {
  border-color: rgba(248, 113, 113, .24);
  background: rgba(248, 113, 113, .10);
}
.entry-receipt-status__card { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;min-height:88px;padding:12px 14px; }
.entry-receipt-status__lead,
.tx-receipt-line {
  display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 280px;
}
.entry-receipt-status__icon,
.entry-receipt-status__spinner { width:36px;height:36px;border-radius:12px;border:1px solid var(--entry-composer-border);background:var(--entry-composer-surface-muted);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto; }
.entry-receipt-status__spinner::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(var(--accent-rgba-base), .22);
  border-top-color: var(--accent);
  animation: entryReceiptSpin .8s linear infinite;
}
.entry-receipt-status__copy { min-width:0;display:flex;flex:1 1 auto;flex-direction:column;gap:3px; }
.entry-receipt-status__topline { display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0; }
.entry-receipt-status__title { color:var(--text-strong);flex:1 1 96px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.entry-receipt-status__file,
.tx-receipt-file { margin-top:2px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.entry-receipt-status__helper {
  color: var(--text3);
  line-height: 1.45;
}
.entry-receipt-status__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.entry-receipt-status__pill { display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:var(--radius-pill);background:rgba(var(--accent-rgba-base), .10);color:var(--accent);font-size:11px;font-weight:var(--fw-semibold);letter-spacing:0;text-transform:none;white-space:nowrap;flex:0 0 auto; }
.entry-receipt-status__pill.is-warning {
  background: rgba(232, 184, 75, .12);
  color: var(--accent);
}
.entry-receipt-status__pill.is-error {
  background: rgba(248, 113, 113, .12);
  color: var(--red);
}
.entry-receipt-status__pill.is-success {
  background: rgba(52, 211, 153, .12);
  color: var(--green);
}
.entry-receipt-status__actions { display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;flex:1 1 420px;min-width:0; }
.entry-receipt-status__actions .btn { min-height:36px;display:inline-flex;align-items:center;justify-content:center;line-height:1; }
.entry-receipt-status__primary {
  border-color: rgba(var(--accent-rgba-base), .28);
  background: rgba(var(--accent-rgba-base), .10);
}
.entry-receipt-status__remove { width:36px;min-width:36px;padding:0;flex:0 0 36px; }
.tx-receipt-error {
  margin-top: 2px;
  color: var(--red);
}
.entry-category-picker {
  margin-top: 8px;
  border: 1px solid var(--entry-composer-border);
  border-radius: 14px;
  background: var(--entry-composer-surface-strong);
  box-shadow: var(--entry-composer-shadow);
  max-height: min(560px, calc(100dvh - 180px));
  overflow: auto;
  position: relative;
  z-index: 18;
}
.entry-category-picker.is-portal {
  margin-top: 0;
}
.entry-category-picker__search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--entry-composer-border);
  background: rgba(var(--surface-rgba-base), .02);
}
.entry-category-picker__search svg {
  color: var(--text3);
  flex: 0 0 auto;
}
.entry-category-picker__search-input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}
.entry-category-picker__search-input::placeholder {
  color: var(--text3);
}
.entry-category-picker__section {
  padding: 14px 0 0;
}
.entry-category-picker__section-title {
  padding: 0 16px 10px;
  color: var(--text3);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  text-transform: none;
}
.entry-category-picker__list {
  display: flex;
  flex-direction: column;
  padding: 0 8px 8px;
}
.entry-category-picker__option {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background var(--tr-fast), color var(--tr-fast), border-color var(--tr-fast);
}
.entry-category-picker__option:hover,
.entry-category-picker__option.ac-active,
.entry-category-picker__option.is-selected {
  background: rgba(var(--surface-rgba-base), .05);
}
.entry-category-picker__icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--entry-composer-border);
  background: rgba(var(--accent-rgba-base), .08);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.entry-category-picker__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.entry-category-picker__copy strong {
  color: var(--text-strong);
  font-size: 14px;
  line-height: 1.35;
}
.entry-category-picker__copy small {
  color: var(--text3);
  font-size: 11px;
}
.entry-category-picker__check {
  width: 18px;
  color: var(--accent);
  display: inline-flex;
  justify-content: center;
}
.entry-category-picker__empty {
  padding: 14px 16px 18px;
  color: var(--text3);
  font-size: 12px;
}
.entry-category-picker__footer {
  border-top: 1px solid var(--entry-composer-border);
  padding: 10px 8px 12px;
}
.entry-more-details {
  position: relative;
  border: 1px solid var(--entry-composer-border);
  border-radius: 14px;
  background: rgba(var(--surface-rgba-base), .02);
}
.entry-more-details__summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  color: var(--text2);
  font-size: 12px;
  font-weight: var(--fw-semibold);
}
.entry-more-details__summary::-webkit-details-marker {
  display: none;
}
.entry-more-details__body {
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.entry-more-details__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text3);
  font-size: 11px;
}
.entry-more-details__done {
  min-height: 32px;
  padding: 0 10px;
}

@media (min-width: 720px) {
  .entry-more-details[open] {
    border-color: rgba(var(--accent-rgba-base), .28);
    background: rgba(var(--accent-rgba-base), .05);
  }
  .entry-more-details__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: calc(var(--z-modal, 1200) + 5);
    padding: 12px;
    border: 1px solid var(--entry-composer-border);
    border-radius: 14px;
    background: var(--entry-composer-surface-strong);
    box-shadow: var(--entry-composer-shadow);
  }
  .entry-more-details__body .entry-composer__utility {
    display: none;
  }
}
.entry-composer .bt-wrap {
  width: 100%;
}
.entry-composer .cd-trigger,
.entry-composer .bt-wrap > input,
.entry-composer .date-input-wrap input {
  width: 100%;
  box-sizing: border-box;
  border-radius: 14px;
  border: 1px solid var(--entry-composer-border);
  background: var(--entry-composer-field-bg);
  color: var(--text);
  padding: 0 14px;
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast), background var(--tr-fast);
}
.entry-composer .cd-trigger:hover,
.entry-composer .bt-wrap > input:hover,
.entry-composer .date-input-wrap input:hover {
  border-color: var(--entry-composer-border-strong);
}
.entry-composer .cd-trigger:focus,
.entry-composer .cd-trigger.open,
.entry-composer .bt-wrap > input:focus,
.entry-composer .date-input-wrap input:focus {
  border-color: rgba(var(--accent-rgba-base), .30);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgba-base), .10);
}
.entry-composer .field-error-hint {
  position: static;
  display: block;
  min-height: 15px;
  margin-top: 3px;
  margin-bottom: 0;
  color: var(--red);
  font-size: 11px;
  line-height: 15px;
  white-space: normal;
  pointer-events: none;
  z-index: auto;
  opacity: 0;
  transition: opacity var(--tr-fast);
}
.entry-composer .field-error-hint.is-visible {
  opacity: 1;
}
.entry-composer .date-input-wrap:has(.field-error-hint) .date-parsed,
.entry-composer .date-input-wrap:has(.field-error-hint) .date-picker-btn {
  top: 50%;
}
.entry-composer .cd-trigger {
  justify-content: space-between;
  gap: 12px;
  background: var(--entry-composer-field-bg);
}
.entry-composer .cd-trigger > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entry-composer .bt-drop {
  margin-top: 8px;
  border: 1px solid var(--entry-composer-border);
  border-radius: 14px;
  border-top: 1px solid var(--entry-composer-border);
  background: var(--entry-composer-surface-strong);
  box-shadow: var(--entry-composer-shadow);
}
.entry-composer .bt-drop.up {
  border-radius: 14px;
  border-bottom: 1px solid var(--entry-composer-border);
}
.entry-composer .bt-sug {
  padding: 10px 14px;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
}
.entry-composer .bt-sug-label {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entry-composer .bt-sug-meta {
  min-width: 0;
  max-width: min(46%, 220px);
  flex: 0 1 auto;
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entry-composer .bt-sug:hover,
.entry-composer .bt-sug.cd-selected {
  background: rgba(var(--accent-rgba-base), .09);
}
.entry-composer .cd-option-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entry-composer .cd-option-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.bt-drop.entry-dropdown-portal {
  z-index: calc(var(--z-modal, 1200) + 8);
  margin: 0;
  padding: 6px;
  border: 1px solid var(--entry-composer-border);
  border-radius: 14px;
  background: var(--entry-composer-surface-strong);
  box-shadow: var(--entry-composer-shadow);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.bt-drop.entry-dropdown-portal.up {
  border: 1px solid var(--entry-composer-border);
  border-radius: 14px;
}
.bt-drop.entry-dropdown-portal .bt-sug {
  padding: 10px 14px;
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 10px;
}
.bt-drop.entry-dropdown-portal .bt-sug:hover,
.bt-drop.entry-dropdown-portal .bt-sug.cd-selected {
  background: rgba(var(--accent-rgba-base), .09);
}
.bt-drop.entry-dropdown-portal .cd-option-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bt-drop.entry-dropdown-portal .cd-option-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.bt-drop.entry-category-popover-portal {
  z-index: calc(var(--z-modal, 1200) + 8);
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.bt-drop.entry-category-popover-portal .entry-category-picker {
  margin: 0;
  max-height: inherit;
  width: 100%;
}
.entry-receipt-picker {
  padding: 0;
  border: 0;
  background: transparent;
  width: min(980px, calc(100vw - 32px));
  max-width: 980px;
  max-height: calc(100vh - 40px);
  margin: auto;
  inset: 0;
  overflow: visible;
}
.entry-receipt-picker::backdrop {
  background: rgba(6, 10, 22, .62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
body.light .entry-receipt-picker::backdrop {
  background: rgba(15, 23, 42, .28);
}
.entry-receipt-picker__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: calc(100vh - 40px);
  border-radius: 16px;
  border: 1px solid var(--entry-composer-border);
  background: var(--entry-composer-surface-strong);
  box-shadow: var(--entry-composer-shadow);
  overflow: hidden;
}
.entry-receipt-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--entry-composer-border);
}
.entry-receipt-picker__header h3 {
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
  color: var(--text-strong);
}
.entry-receipt-picker__close {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--entry-composer-border);
  background: rgba(var(--surface-rgba-base), .04);
  color: var(--text3);
}
.entry-receipt-picker__search {
  padding: 18px 24px;
  border-bottom: 1px solid var(--entry-composer-border);
}
.entry-receipt-picker__search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--entry-composer-border);
  border-radius: 14px;
  background: var(--entry-composer-field-bg);
}
.entry-receipt-picker__search-field svg {
  color: var(--text3);
  flex: 0 0 auto;
}
.entry-receipt-picker__search-field input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}
.entry-receipt-picker__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 20px 24px;
  overflow: auto;
}
.entry-receipt-picker__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.entry-receipt-picker__card {
  width: 100%;
  min-height: 182px;
  border-radius: 16px;
  border: 1px solid var(--entry-composer-border);
  background: var(--entry-composer-surface);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--tr-fast), background var(--tr-fast), transform var(--tr-fast), box-shadow var(--tr-fast);
}
.entry-receipt-picker__card:hover,
.entry-receipt-picker__card.is-selected {
  border-color: var(--entry-composer-border-strong);
  background: var(--entry-composer-surface-muted);
}
.entry-receipt-picker__card.is-selected {
  box-shadow: 0 0 0 2px rgba(var(--accent-rgba-base), .12);
}
.entry-receipt-picker__card.is-disabled {
  opacity: .58;
  cursor: not-allowed;
}
.entry-receipt-picker__thumb {
  width: 68px;
  height: 68px;
  border-radius: 16px;
  border: 1px solid var(--entry-composer-border);
  background: rgba(var(--accent-rgba-base), .08);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.entry-receipt-picker__card-title {
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-strong);
  word-break: break-word;
}
.entry-receipt-picker__card-meta {
  color: var(--text3);
  font-size: 12px;
  line-height: 1.5;
}
.entry-receipt-picker__card-check {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid var(--entry-composer-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.entry-receipt-picker__empty,
.entry-receipt-picker__error,
.entry-receipt-picker__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  border-radius: 20px;
  border: 1px dashed var(--entry-composer-border);
  background: var(--entry-composer-surface);
  color: var(--text3);
  text-align: center;
  padding: 20px;
}
.entry-receipt-picker__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px;
  border-top: 1px solid var(--entry-composer-border);
  background: var(--entry-composer-surface-strong);
}
.entry-receipt-picker__footer-note {
  color: var(--text3);
  font-size: 12px;
}

@keyframes entryReceiptSpin {
  to { transform: rotate(360deg); }
}
.tx-ai-notice {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--entry-composer-info-border);
  border-radius: 14px;
  background: var(--entry-composer-info-bg);
  color: var(--text2);
  font-size: 12px;
  line-height: 1.5;
}
.tx-ai-notice strong {
  color: var(--text-strong);
}
.tx-ai-notice-inner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}
.tx-ai-dismiss {
  border: 0;
  background: transparent;
  color: var(--text3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.tx-ai-suggestion {
  width: 100%;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  overflow: hidden;
  padding: 9px 10px;
  border: 1px solid var(--entry-composer-info-border);
  border-radius: 14px;
  background: rgba(var(--surface-rgba-base), .055);
  color: var(--text2);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--tr-fast), border-color var(--tr-fast);
}
.tx-ai-suggestion__icon {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 10px;
  border: 1px solid var(--entry-composer-info-border);
  background: rgba(var(--accent-rgba-base), .08);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tx-ai-suggestion__copy {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 3px;
}
.tx-ai-suggestion__copy > span {
  min-width: 0;
  max-width: 100%;
  color: var(--text3);
  font-size: 11px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.tx-ai-suggestion__action {
  justify-self: end;
  flex: 0 0 auto;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid rgba(var(--accent-rgba-base), .22);
  border-radius: var(--radius-pill);
  background: rgba(var(--accent-rgba-base), .08);
  color: var(--accent);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.tx-ai-suggestion__action.is-applied {
  border-color: var(--entry-composer-success-border);
  background: var(--entry-composer-success-bg);
  color: var(--entry-composer-success-fg);
}
.tx-ai-suggestion.is-applied {
  cursor: default;
}
.tx-ai-suggestion:hover {
  background: rgba(var(--surface-rgba-base), .08);
  border-color: rgba(var(--accent-rgba-base), .26);
}
.tx-ai-suggestion strong {
  min-width: 0;
  max-width: 100%;
  color: var(--text-strong);
  font-size: 12.5px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tx-ai-empty {
  font-size: 11px;
  color: var(--text3);
}
.tx-receipt-drop.is-dragover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgba-base), .07);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgba-base), .28), 0 0 0 3px rgba(var(--accent-rgba-base), .12);
}
.entry-calculation-card {
  margin-top: 0;
  padding: 14px;
  background: var(--entry-composer-surface);
}
.entry-calculation-card .calc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
  color: var(--text2);
  font-size: 12px;
}
.entry-calculation-card .calc-row > span:first-child {
  min-width: 0;
}
.entry-calculation-card .calc-row .calc-val {
  flex: 1 1 0;
  min-width: 0;
  max-width: calc(100% - 96px);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.entry-calculation-card .calc-summary-label {
  color: var(--text-strong);
  font-size: 15px;
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  margin-bottom: 10px;
  text-transform: none;
}
.entry-calculation-card .calc-total {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--entry-composer-border);
  color: var(--text-strong);
  font-weight: var(--fw-bold);
}
.entry-calculation-card .calc-total .calc-val {
  color: var(--accent);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.15;
  font-weight: var(--fw-bold);
}
.modal.entry-composer.mode-ausgabe .entry-type-toggle__button.sel-ausgabe {
  border-color: var(--entry-composer-expense-border);
  background: var(--entry-composer-expense-bg);
}
.modal.entry-composer.mode-einnahme .entry-type-toggle__button.sel-einnahme {
  border-color: var(--entry-composer-income-border);
  background: var(--entry-composer-income-bg);
}
.modal.entry-composer.mode-ausgabe .entry-field--amount input {
  border-color: var(--entry-composer-expense-border);
}
.modal.entry-composer.mode-einnahme .entry-field--amount input {
  border-color: var(--entry-composer-income-border);
}
body.light .modal.entry-composer {
  background: var(--entry-composer-surface);
}
body.light .entry-composer__header {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .02), transparent),
    var(--entry-composer-surface);
}
.modal.entry-composer.mode-einnahme .entry-composer__row--category-date {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 960px) {
  #modal:has(.entry-composer) > .ov {
    align-items: flex-start;
    padding-top: 24px;
    padding-bottom: 10px;
  }
  .modal.entry-composer {
    max-height: calc(100dvh - 34px);
    overflow: visible;
  }
  .entry-composer__header {
    padding: 12px 18px 8px;
  }
  .entry-composer__header h2 {
    font-size: 24px;
  }
  .entry-composer__body {
    grid-template-columns: minmax(520px, 1fr) 300px;
    align-items: start;
    gap: 10px;
    padding: 12px 18px;
    overflow-y: auto;
  }
  .entry-composer__main,
  .entry-composer__rail,
  .entry-composer__stack--core {
    gap: 8px;
  }
  .entry-composer__footer {
    padding: 8px 18px 10px;
  }
  .entry-composer__footer .btn {
    min-height: 46px;
    height: 46px;
  }
  .entry-save-button {
    min-height: 50px !important;
    height: 50px !important;
  }
  .entry-type-toggle__button {
    min-height: 34px;
  }
  .entry-field--amount input {
    min-height: 46px;
    font-size: 26px;
  }
  .entry-field--booking-text input,
  .entry-composer__row .date-input-wrap input,
  .entry-composer .cd-trigger,
  .entry-composer .bt-wrap > input {
    min-height: 40px;
  }
  .entry-composer .fgrp > label {
    margin-bottom: 4px;
  }
  .entry-receipt-dropzone {
    margin-top: 2px;
    padding: 10px;
  }
  .entry-receipt-dropzone__hero {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 0;
  }
  .entry-receipt-dropzone__upload-action {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
  .entry-receipt-dropzone__button {
    min-height: 36px;
  }
  .entry-receipt-dropzone__actions {
    margin-top: 10px;
    padding-left: 50px;
  }
  .entry-composer__rail {
    position: sticky;
    top: 0;
  }
  .entry-receipt-dropzone__desktop-hint {
    display: none;
  }
  .entry-receipt-dropzone.is-dragover .entry-receipt-dropzone__desktop-hint {
    display: block;
  }
}
@media (min-width: 1280px) {
  .modal.entry-composer {
    width: min(1040px, calc(100vw - 48px));
  }
  .entry-composer__body {
    grid-template-columns: minmax(520px, 1fr) 280px;
  }
}
@media (min-width: 960px) and (max-width: 1279px) {
  .modal.entry-composer {
    width: min(1000px, calc(100vw - 36px));
  }
  .entry-composer__body {
    grid-template-columns: minmax(0, 1fr) 248px;
  }
  .entry-calculation-card .calc-summary-label {
    font-size: 14px;
  }
}
@media (min-width: 960px) and (max-height: 940px) {
  .entry-smart-card {
    padding: 10px;
  }
  .entry-smart-card__header {
    margin-bottom: 6px;
  }
  .entry-smart-card--suggestions {
    padding: 10px;
  }
  .entry-smart-card--suggestions .entry-smart-card__header {
    margin-bottom: 8px;
  }
  .entry-composer__rail {
    gap: 10px;
  }
}

@media (min-width: 960px) and (max-height: 820px) {
  #modal:has(.entry-composer) > .ov {
    padding-top: 12px;
    padding-bottom: 6px;
  }
  .modal.entry-composer {
    max-height: calc(100dvh - 8px);
    overflow: hidden;
  }
  .entry-composer__header {
    padding: 12px 16px 8px;
  }
  .entry-composer__body {
    gap: 12px;
    padding: 12px 16px;
  }
  .entry-composer__main,
  .entry-composer__rail,
  .entry-composer__stack--core {
    gap: 8px;
  }
  .entry-composer__footer {
    padding: 8px 16px 10px;
  }
  .entry-save-button {
    min-height: 52px !important;
    height: 52px !important;
  }
  .entry-type-toggle__button {
    min-height: 38px;
  }
  .entry-quick-toggle__surface {
    min-height: 38px;
    padding: 6px 10px;
  }
  .entry-field--amount input {
    min-height: 44px;
    font-size: 24px;
  }
  .entry-composer .fgrp > label {
    margin-bottom: 4px;
  }
  .entry-receipt-dropzone,
  .entry-smart-card {
    padding: 8px;
  }
  .entry-receipt-dropzone__hero {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
  }
  .entry-receipt-dropzone__upload-action {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
  }
  .entry-receipt-dropzone__lead {
    gap: 2px;
  }
  .entry-more-details__summary {
    padding: 8px 10px;
  }
  .entry-more-details__body {
    padding: 0 10px 10px;
    gap: 8px;
  }
}
@media (min-width: 720px) and (max-width: 959px) {
  .modal.entry-composer {
    width: min(720px, calc(100vw - 28px));
  }
  .entry-composer__body {
    gap: 18px;
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }
  .entry-composer__topbar,
  .entry-composer__row--category-date,
  .entry-composer__row--finance {
    grid-template-columns: minmax(0, 1fr);
    flex-direction: column;
    align-items: stretch;
  }
  .entry-composer__mode-row {
    position: static;
    justify-content: stretch;
    pointer-events: auto;
  }
  .entry-type-toggle {
    flex: 0 0 auto;
    width: 100%;
  }
  .entry-quick-toggle {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }
  .entry-quick-toggle__surface {
    min-height: 44px;
  }
  .entry-quick-toggle__copy {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .entry-composer__footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
  }
}
@media (max-width: 719px) {
  .modal.entry-composer {
    width: 100%;
    max-width: 100%;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
  }
  .entry-composer__header {
    padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 12px;
  }
  .entry-composer__header h2 {
    font-size: 24px;
  }
  .entry-composer__body {
    display: block;
    padding: 16px;
    gap: 16px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    scroll-padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .entry-composer__topbar,
  .entry-composer__row--category-date,
  .entry-composer__row--finance {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .entry-composer__mode-row {
    position: static;
    justify-content: stretch;
    pointer-events: auto;
  }
  .entry-type-toggle {
    flex: 0 0 auto;
    width: 100%;
  }
  .entry-composer__body,
  .entry-composer__main,
  .entry-composer__rail {
    overflow-x: hidden;
  }
  .entry-composer__main,
  .entry-composer__rail {
    overflow-y: visible;
  }
  .entry-composer__main {
    margin-bottom: 16px;
  }
  .entry-composer__rail {
    padding-bottom: 0;
  }
  .entry-field--amount input {
    min-height: 54px;
    font-size: 24px;
  }
  .entry-receipt-dropzone__actions,
  .tx-receipt-line,
  .entry-composer__utility,
  .entry-composer__topbar {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .entry-receipt-dropzone__hero {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .entry-receipt-dropzone__actions {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: stretch;
    padding-left: 0;
  }
  .entry-receipt-dropzone__button--secondary {
    width: 100%;
  }
  .entry-quick-toggle {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }
  .entry-quick-toggle__surface {
    min-height: 44px;
  }
  .entry-quick-toggle__copy {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .entry-category-picker {
    max-height: min(380px, 50vh);
    overflow: auto;
  }
  .entry-receipt-status__card,
  .entry-receipt-status__actions,
  .entry-receipt-picker__footer {
    flex-direction: column;
    align-items: stretch;
  }
  .entry-receipt-status__card {
    min-height: 0;
    gap: 10px;
    padding: 10px;
  }
  .entry-receipt-status__lead{align-items:flex-start;flex:0 1 auto;}
  .entry-receipt-status__title{flex:0 1 auto;}
  .entry-receipt-status__topline {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
  .entry-receipt-status__actions{display:flex;flex-flow:row wrap;gap:7px;flex:0 1 auto;}
  .entry-receipt-status__actions .btn {
    min-height: 34px;
    width: auto;
    flex: 1 1 calc(50% - 4px);
    padding: 0 9px;
    font-size: 11px;
  }
  .entry-receipt-status__actions .entry-receipt-status__split{flex:1 1 calc(100% - 47px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .entry-receipt-status__actions .entry-receipt-status__remove { min-height:40px;width:40px;min-width:40px;flex:0 0 40px;padding:0; }
  .tx-ai-suggestion {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    min-height: 72px;
  }
  .tx-ai-suggestion__action {
    grid-column: 2;
    justify-self: start;
  }
  .tx-ai-suggestion strong {
    white-space: normal;
  }
  .entry-receipt-picker {
    width: 100vw;
    max-width: 100vw;
    min-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
  }
  .entry-receipt-picker__panel {
    min-height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .entry-receipt-picker__header {
    padding: 18px 18px 16px;
  }
  .entry-receipt-picker__header h3 {
    font-size: 24px;
  }
  .entry-receipt-picker__search,
  .entry-receipt-picker__body,
  .entry-receipt-picker__footer {
    padding-left: 18px;
    padding-right: 18px;
  }
  .entry-receipt-picker__grid {
    grid-template-columns: 1fr;
  }
  .entry-receipt-picker__card {
    min-height: 156px;
  }
  .entry-composer__footer {
    position: sticky;
    bottom: 0;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 10px 16px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(var(--surface-rgba-base), .02);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .entry-composer__footer:has(.entry-composer__footer-template) {
    grid-template-columns: 52px 52px minmax(0, 1fr);
  }
  .entry-composer__footer .btn {
    min-width: 0;
    width: 100%;
  }
  .entry-composer__footer .entry-composer__footer-cancel,
  .entry-composer__footer .entry-composer__footer-template {
    display: inline-flex !important;
    width: 52px;
    min-width: 52px;
    height: 52px;
    min-height: 52px !important;
    padding: 0 !important;
    border-radius: 14px;
  }
  .entry-composer__footer .entry-save-button {
    min-height: 52px !important;
    height: 52px !important;
    padding: 0 14px !important;
  }
  .entry-composer__footer .btn-with-mobile-icon {
    justify-content: center;
  }
  .entry-composer__footer .entry-composer__footer-cancel .btn-mobile-label,
  .entry-composer__footer .entry-composer__footer-template .btn-mobile-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
@media (min-width: 720px) and (max-width: 959px) {
  .entry-receipt-picker {
    width: min(760px, calc(100vw - 20px));
  }
  .entry-receipt-picker__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
  .entry-quick-toggle__surface,
  .entry-quick-toggle__knob,
  .entry-chip,
  .tx-ai-suggestion,
  .entry-type-toggle__button,
  .entry-save-button {
    transition: none !important;
  }
  .entry-receipt-status__spinner::before {
    animation: none !important;
  }
}

.entry-composer.is-quick-entry .entry-composer__body { grid-template-columns: minmax(0, 1fr); }
.entry-composer.is-quick-entry .entry-composer__rail { display: none; }

.entry-quick-inline-summary { display: none; }
.entry-composer.is-quick-entry .entry-quick-inline-summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  margin-top: 6px; padding: 6px 2px 0; font-size: 12px; color: var(--text3);
}
.entry-quick-inline-summary__item { display: inline-flex; align-items: baseline; gap: 5px; }
.entry-quick-inline-summary__label { color: var(--text3); }
.entry-quick-inline-summary__val { color: var(--text2); font-variant-numeric: tabular-nums; }
.entry-quick-inline-summary__item--total .entry-quick-inline-summary__val { color: var(--text-strong); font-weight: 600; }

.entry-quick-cat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.entry-chip--inline {
  padding: 4px 10px; min-height: 0; border-radius: 8px; font-size: 12px; line-height: 1.2;
  background: var(--entry-composer-surface-muted); border: 1px solid var(--entry-composer-border);
  color: var(--text2); cursor: pointer;
}
.entry-chip--inline .entry-chip__label { font-weight: 500; }
.entry-chip--inline:hover, .entry-chip--inline:focus-visible {
  border-color: var(--entry-composer-border-strong); color: var(--text-strong);
}

.entry-composer.is-quick-entry .entry-field--payment { opacity: .85; }
.entry-composer.is-quick-entry .entry-field--payment > label { font-size: 11px; }

.entry-composer.is-quick-entry .entry-receipt-dropzone {
  padding: 6px 10px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--entry-composer-border);
  border-radius: 10px;
}
.entry-composer.is-quick-entry .entry-receipt-dropzone:not(.is-attached):hover,
.entry-composer.is-quick-entry .entry-receipt-dropzone:not(.is-attached):focus-within {
  border-color: var(--entry-composer-border-strong);
}
.entry-composer.is-quick-entry .entry-receipt-dropzone__lead .entry-receipt-dropzone__hint,
.entry-composer.is-quick-entry .entry-receipt-dropzone__lead .entry-receipt-dropzone__desktop-hint,
.entry-composer.is-quick-entry .entry-receipt-dropzone__eyebrow { display: none; }
.entry-composer.is-quick-entry .entry-receipt-dropzone__hero {
  grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: center; margin-bottom: 0;
}
.entry-composer.is-quick-entry .entry-receipt-dropzone__upload-action {
  width: 28px; height: 28px; min-width: 28px; min-height: 28px;
}
.entry-composer.is-quick-entry .entry-receipt-dropzone__title { font-size: 13px; font-weight: 500; }
.entry-composer.is-quick-entry .entry-receipt-dropzone__actions { margin-top: 6px; }

.entry-quick-session { display: none; }
.entry-composer.is-quick-entry .entry-quick-session {
  display: block; padding: 8px 20px 0; border-top: 1px solid var(--entry-composer-border);
}
.entry-quick-session__head {
  font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--text3); margin-bottom: 4px;
}
.entry-quick-session__row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 3px 0; font-size: 12px; color: var(--text2);
}
.entry-quick-session__meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-quick-session__open {
  flex: 0 0 auto; background: none; border: none; padding: 2px 4px; font-size: 12px;
  color: var(--text-strong); cursor: pointer; text-decoration: underline;
}

/* Touch-Guards fuer die Monatsnavigation der Buchungsansicht.
   Bewusst ausgelagert, damit die grosse _23-bookings-month.css den
   File-Size-Freeze nicht weiter verletzt. */
.bm-month-picker__label,
.bm-month-picker__nav {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

/* ─────────────────────────────────────────────────────────────────────
   Buchungsliste — stabiles 6-Spalten-Meta-Grid (2026-05-22)
   ─────────────────────────────────────────────────────────────────────
   Tabellarische Anmutung pro Zeile, damit Kategorie, Steuersatz und
   Belegstatus über alle Zeilen pixel-genau untereinander stehen — egal
   ob 0/7/19 % Steuer, „Beleg fehlt"-Badge oder verknüpfter Beleg.

   Spalten-Plan (.bm-row__main):
       Datum 100 │ Body 1fr │ Kategorie 130 │ Steuer 44 │ Status 158 │ Betrag 130
   - Alle Meta-Slots fix (kein content-driven `auto`), damit keine
     horizontalen Sprünge zwischen Zeilen entstehen.
   - Kategorie-Chip füllt die volle Spalten-Breite (width:100%), Text
     ellipsiert; voller Name via title-Attribut im Tooltip.
   - Tax-Slot rechtsbündig, tabular-nums; leerer Slot (--empty) reserviert
     Platz, ist aber visuell unsichtbar (kein Layout-Sprung).
   - Status-Slot trägt entweder „Beleg fehlt" (amber-akzent) oder den
     klickbaren „Beleg"-Chip (--has-beleg, dezent grün). Beleg-Chip
     öffnet die bestehende previewBeleg(belegId)-Logik via bmBelegOpen-
     Action im Dispatcher.

   Datenquelle Steuersatz: tx.ustSatz (Einnahmen) / tx.mwstSatz
   (Ausgaben), bereits camelCase-Mirror aus _rowToTx (dal-pg.js) —
   Dezimalbruch 0.19 wird zu „19 %". Kein erfundener Wert, leerer Slot
   bei fehlenden Daten.

   Datei sitzt absichtlich nicht in _23-bookings-month.css, weil das
   Original-Partial die 800-LOC-Soft-Freeze überschreitet (CLAUDE.md
   File-Size-Limit). Manifest-Order garantiert Cascade-Override.
   ───────────────────────────────────────────────────────────────────── */

/* 6-Spalten-Hauptgrid: feste Meta-Spalten, 24 px effektiver Abstand
   zwischen Buchungstext und Meta (16 px grid-gap + 8 px body-padding). */
.bm-row__main {
  grid-template-columns: 100px minmax(180px, 1fr) 130px 44px 158px 130px;
}
.bm-row__body {
  padding-right: 8px;
}

/* Kategorie-Chip: füllt die feste 130-px-Spalte, Label ellipsiert.
   Override des inline-flex aus _23-bookings-month.css auf flex+width:100%,
   damit „Honorar" und „Versicherungen" denselben optischen Raum belegen. */
.bm-category {
  display: flex;
  width: 100%;
}

/* Tax-Slot: eigene Grid-Spalte rechts neben Kategorie. Neutral, ruhig,
   tabular-nums sorgt für sauberes Untereinander der %-Zeichen. */
.bm-row__tax {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  height: 24px;
  font-size: 11px;
  font-weight: var(--fw-medium);
  color: var(--text3);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  white-space: nowrap;
  min-width: 0;
}
.bm-row__tax--empty {
  visibility: hidden;
}

/* „Beleg"-Chip (verknüpfter Beleg, klickbar). Bewusst LEISER als
   „Beleg fehlt": dünnere Akzent-Border (.4 vs .55), dezenterer
   Background — der fehlende Beleg bleibt der lautere Zustand. Grün
   nur am Icon und an der schmalen linken Border. role="button" auf
   dem Span (siehe month-overview-v2.js) macht ihn klickbar; bmBelegOpen-
   Action öffnet previewBeleg(belegId) via belege.js. */
.bm-status-badge--has-beleg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 7px 0 6px;
  border-radius: 4px;
  background: rgba(52, 211, 153, .03);
  color: var(--text2);
  border: 1px solid transparent;
  border-left: 2px solid rgba(52, 211, 153, .4);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--tr-fast), border-color var(--tr-fast);
}
.bm-status-badge--has-beleg:hover {
  background: rgba(52, 211, 153, .07);
  border-left-color: rgba(52, 211, 153, .65);
}
.bm-status-badge--has-beleg:focus-visible {
  outline: 2px solid rgba(var(--accent-rgba-base), .55);
  outline-offset: 1px;
}
.bm-status-badge--has-beleg svg {
  color: var(--green);
  opacity: .8;
}
body.light .bm-status-badge--has-beleg {
  background: rgba(52, 211, 153, .05);
  /* stylelint-disable-next-line color-no-hex -- AA-dark-green Light-Variante, identisch zur --checked-Familie in _23-bookings-month.css. */
  color: #266648;
  border-left-color: rgba(52, 211, 153, .5);
}
body.light .bm-status-badge--has-beleg svg {
  /* stylelint-disable-next-line color-no-hex -- AA-Light-Variante des Income-Icons (matched --checked). */
  color: #0a8f5a;
}

/* Tablet: Kategorie-Spalte kompakter, Belegstatus 96 px, Tax 44 px. */
@media (max-width: 1023px) {
  .bm-row__main {
    grid-template-columns: 90px minmax(160px, 1fr) 150px 44px 96px 110px;
  }
  .bm-row__body {
    padding-right: 6px;
  }
}

/* Mobile: 3-Spalten/3-Reihen-Areas mit Tax rechts unter dem Betrag.
   Override der grid-template-areas aus _23-bookings-month.css —
   die zweite Reihe wird date|cat|tax statt date|cat|cat. */
@media (max-width: 767px) {
  .bm-row__main {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "title  title  amount"
      "date   cat    tax"
      "status status status";
  }
  .bm-row__body {
    /* Desktop-padding-right zurücksetzen — Mobile-Layout regelt Abstände
       bereits über gap (siehe _23-bookings-month.css Mobile-Block). */
    padding-right: 0;
  }
  /* Auf Mobile darf der Chip wieder content-driven sein (auto-Spalte +
     justify-self:start). Sonst dehnt sich der Chip durch das
     desktop-width:100% über die volle 1fr-Spalte aus, was bei kurzem
     Kategorienamen unruhig wirkt. */
  .bm-category {
    width: auto;
  }
  .bm-row__tax {
    grid-area: tax;
    height: 22px;
    font-size: 11px;
    align-self: center;
  }
}

/* Schmale Listen-SPALTE (nicht Viewport): kompaktes 3-Reihen-Layout
   via Container-Query. Container = .bm-list-card (container-type:
   inline-size, siehe _23g-bookings-month-list.css). Greift, sobald
   die LISTE schmaler als 900px wird — unabhängig von Viewport/Sidebar.

   Wurzel des behobenen Bugs: das zweispaltige Workspace-Grid
   (.bookings-grid: Liste + 320px-Rail, _23-bookings-month.css) greift
   schon ab 1024px Viewport, die breite 6-Spalten-Zeile hat aber
   ~840px feste Mindestbreite (90+160+150+44+96+110 px Tablet-Variante
   + Gaps). In der Lücke ~768–1330px passte die Zeile nicht in die
   schmale .bookings-grid__main-Spalte und lief mit overflow:visible
   sichtbar in die „Monatsabschluss"-Rail (Beträge/Beleg-Badges hinter
   der Card). Statt zu clippen (würde Beträge abschneiden) stellen wir
   auf ein kompaktes 2-Reihen-Areas-Layout um — container- statt
   viewport-getriggert. Schwelle 900px > 840px Row-Minimum (Puffer für
   Card-Padding/gap).

   Anders als der <=767px-Mobile-Block (3 Reihen, Status in eigener
   Zeile): in dieser Breakpoint-Lücke ist genug horizontaler Platz, um
   die Status-Badge („Beleg fehlt"/„Geprüft") direkt NEBEN die Kategorie
   in Reihe 2 zu legen, statt eine eigene dritte Reihe zu öffnen. Die
   status-Spalte (1fr) nimmt den freien Raum zwischen Kategorie und der
   rechts außen verankerten Tax-Spalte (%). Bei leerer Status-Badge
   (`:empty` → display:none) bleibt die Spalte einfach leer. */
@container (max-width: 900px) {
  .bm-row__main {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "title  title  title   amount"
      "date   cat    status  tax";
    gap: 4px 8px;
    min-height: 64px;
    align-items: center;
  }
  .bm-row__date { grid-area: date; font-size: 11px; align-self: center; }
  .bm-row__body { grid-area: title; min-width: 0; padding-right: 0; }
  .bm-row__contact { display: none; }
  .bm-category { grid-area: cat; width: auto; justify-self: start; max-width: 100%; }
  .bm-row__status { grid-area: status; justify-self: start; align-self: center; }
  .bm-row__status:empty { display: none; }
  .bm-row__tax { grid-area: tax; height: 22px; font-size: 11px; align-self: center; justify-self: end; }
  .bm-row__amount { grid-area: amount; align-self: center; font-size: 15px; }
}

/* Bugfix (2026-07-11): Bei schmalen Containern (< 420px — u.a. jeder
   Smartphone-Viewport, da .bm-list-card dort nie breiter als der
   Viewport wird) reicht der Restplatz neben einem langen Kategorienamen
   (z. B. "Fahrtkosten (Km-Pauschale)") nicht für den "Beleg fehlt"-Chip.
   Die 900px-Regel oben quetschte "status" dann auf ~0px; der Chip lief
   dank white-space:nowrap ungebremst über die "tax"-Spalte hinweg und
   überlappte optisch mit dem %-Wert. Fällt hier auf das bewährte
   3-Zeilen-Layout des <=767px-Media-Blocks zurück (Status in eigener
   volle-Breite-Zeile) statt mit fixen/ellipsierten Spaltenbreiten zu
   jonglieren — robust unabhängig von Kategorie-Textlänge. */
@container (max-width: 420px) {
  .bm-row__main {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "title  title  amount"
      "date   cat    tax"
      "status status status";
  }
  .bm-row__body { padding-right: 0; }
  .bm-category { width: auto; }
  .bm-row__status { grid-area: status; justify-self: start; }
  .bm-row__tax { grid-area: tax; height: 22px; font-size: 11px; align-self: center; justify-self: end; }
}

/* ───────────────────────────────────────────────────────────────────────
   Bookings modal: first-user hints + small UI affordances.
   Loads after _23-bookings-month.css so it can override base layout
   for the dropdown affordance, Bewirtungs-split hint, and
   Bewirtungskosten rate warning.
   ─────────────────────────────────────────────────────────────────────── */

/* Bewirtungs-/Mischbeleg split hint — guided handoff into the existing
   ReceiptSplit assistant. Replaces the old "manuell aufteilen" banner
   for cases the assistant can handle. */
.entry-inline-card--bewirt-split {
  border-left: 3px solid var(--accent);
  background: rgba(var(--accent-rgba-base, 37, 99, 235), .06);
}
.entry-inline-card--bewirt-split .entry-inline-card__body {
  margin: 6px 0 10px;
  color: var(--text2);
  font-size: 13px;
  line-height: 1.45;
}
.entry-inline-card--bewirt-split .entry-inline-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Inline warning for 0 % rate on Bewirtungskosten. */
.entry-inline-card__rate-warning {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(245, 158, 11, .12);
  color: var(--text-strong);
  font-size: 13px;
  line-height: 1.4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}

/* Persistent needs-review hint for missing §4(5)2 Pflichtfelder on a
   single-rate Bewirtung (P1-a). Distinct accent tone from the amber rate
   warning above so both can coexist in #bewirt-hint. Not a hard block. */
.entry-inline-card__needs-review {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  border-left: 3px solid var(--accent);
  background: rgba(var(--accent-rgba-base, 37, 99, 235), .08);
  color: var(--text-strong);
  font-size: 13px;
  line-height: 1.4;
}

/* Dropdown affordance — first-time users mistake the custom dropdown
   for a disabled field. Strengthens hover/focus border + chevron. */
.entry-composer .cd-trigger {
  cursor: pointer;
}
.entry-composer .cd-trigger:hover,
.entry-composer .cd-trigger:focus-visible {
  border-color: var(--accent);
  background: var(--entry-composer-surface, rgba(0, 0, 0, .02));
}
.entry-composer .cd-trigger svg {
  opacity: .8;
}
.entry-composer .cd-trigger:hover svg,
.entry-composer .cd-trigger:focus-visible svg {
  opacity: 1;
}

#tx-beleg-file[hidden],
#tx-ai-notice[hidden],
#tx-ai-suggestions[hidden],
#cat-wrap[hidden],
#bewirt-hint[hidden],
#privat-hint[hidden],
#fahrtkosten-km-block[hidden],
#verpflegung-hint[hidden],
#geschenk-hint[hidden],
#plaus-hint[hidden] {
  display: none !important;
}

/* ── Transaktions-Storno-Dialog (§153/§17 Korrekturgrund) ──────────────────────
   Mini-Formular im _appChoiceDialog-Body: zwei Radio-Optionen (Fehlerkorrektur /
   §17-Änderung), konditionales Datumsfeld, Notiz. CSP-konform (keine Inline-Styles
   im JS; Sichtbarkeit über .is-hidden statt style=). Nur Design-Tokens, kein Hex. */
.tx-storno-dialog {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
}

.tx-storno-dialog .app-dialog-title {
  flex: 0 0 auto;
}

.tx-storno-dialog .app-dialog-actions {
  flex: 0 0 auto;
}

.tx-storno-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 12px;
  min-height: 0;
  text-align: left;
  white-space: normal;
  overflow-y: auto;
  overflow-x: hidden;
  color: var(--text2);
}

.tx-storno-intro {
  margin: 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.tx-storno-options {
  display: grid;
  gap: 10px;
}

.tx-storno-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
  margin: 0;
  cursor: pointer;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(var(--surface-rgba-base), .025);
  color: var(--text);
  font-size: 14px;
  font-weight: var(--fw-regular);
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.tx-storno-option,
.tx-storno-option * {
  letter-spacing: 0;
  text-transform: none;
}
.tx-storno-option:hover {
  background: var(--accent-bg-soft);
  border-color: var(--tone-warn-border);
}
.tx-storno-option.is-selected,
.tx-storno-option:has(.tx-storno-radio:checked) {
  background: var(--tone-warn-bg);
  border-color: var(--tone-warn-border);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgba-base), .08);
}
.tx-storno-radio {
  width: 14px;
  height: 14px;
  min-width: 14px;
  margin: 2px 0 0;
  padding: 0;
  flex: 0 0 auto;
  accent-color: var(--accent);
}
.tx-storno-option__main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.tx-storno-option__title {
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: var(--text);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.tx-storno-option__hint {
  font-size: 12.5px;
  color: var(--invoice-text-muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.tx-storno-date {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid rgba(var(--surface-rgba-base), .08);
  border-radius: var(--radius-sm);
  background: rgba(var(--surface-rgba-base), .025);
}
.tx-storno-date.is-hidden {
  display: none;
}
.tx-storno-date__label,
.tx-storno-note__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}
.tx-storno-date__hint {
  font-size: 12px;
  color: var(--invoice-text-muted);
  line-height: 1.45;
}
.tx-storno-date-trigger,
.tx-storno-note {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  color: var(--text);
  background: var(--card);
}
/* The visible "Wirksam ab" control is a button styled like an input: label on
   the left, calendar icon on the right; it opens the shared app date picker. */
.tx-storno-date-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  text-align: left;
}
.tx-storno-date-trigger__label {
  font-variant-numeric: tabular-nums;
}
.tx-storno-date-trigger__icon {
  flex: 0 0 auto;
  color: var(--invoice-text-muted);
}
.tx-storno-date-trigger:focus-visible {
  border-color: var(--accent);
  outline: 1px solid var(--accent);
  outline-offset: 1px;
}
.tx-storno-note {
  resize: vertical;
  min-height: 64px;
}
/* Amber, human-readable consequence hint shown under the storno options. */
.tx-storno-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--tone-warn-bg);
  border: 1px solid var(--tone-warn-border);
  color: var(--tone-warn-text);
  font-size: 0.85em;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.tx-storno-warning__mark {
  flex: 0 0 auto;
  font-weight: 700;
}
.tx-storno-noteblock {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

@media(max-width:560px) {
  .tx-storno-dialog {
    max-height: calc(100vh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }

  .tx-storno-form {
    gap: 11px;
  }

  .tx-storno-option {
    padding: 11px;
  }
}

.bm-inline-edit-input--text {
  width: 140px;
}

.bm-inline-edit-input--amount {
  width: 80px;
}

.bm-inline-edit-input--date {
  width: 70px;
}

.entry-plaus-row--afa {
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bt-drop[hidden] {
  display: none !important;
}

#tx-frequent-categories[hidden],
#tx-receipt-rail-status[hidden] {
  display: none !important;
}

#tx-amount.is-readonly-locked {
  opacity: .6;
  cursor: not-allowed;
}

#geschenk-hint {
  background: rgba(232, 184, 75, .06);
  border: 1px solid rgba(232, 184, 75, .3);
}

#geschenk-hint-text {
  color: var(--accent);
}

#geschenk-hint.entry-inline-card--gift-over-limit {
  background: rgba(248, 113, 113, .08);
  border-color: rgba(248, 113, 113, .45);
}

#geschenk-hint.entry-inline-card--gift-over-limit #geschenk-hint-text {
  color: var(--red);
}

.entry-info-tip {
  position: relative;
  display: inline-flex;
}
.entry-info-tip__button { width: 18px; height: 18px; min-width: 18px; min-height: 18px; padding: 0; border: 1px solid var(--entry-composer-border); border-radius: var(--radius-pill); background: var(--entry-composer-surface-muted); color: var(--text3); font: 700 11px/1 var(--font-sans); cursor: help; }
.entry-info-tip__button:hover,
.entry-info-tip__button:focus-visible { border-color: rgba(var(--accent-rgba-base), .34); color: var(--accent); outline: none; }
.entry-info-tip__bubble {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: calc(var(--z-modal, 1200) + 9);
  width: max-content;
  max-width: min(320px, calc(100vw - 48px));
  padding: 8px 10px;
  border: 1px solid var(--entry-composer-border);
  border-radius: 10px;
  background: var(--entry-composer-surface-strong);
  box-shadow: var(--entry-composer-shadow);
  color: var(--text2);
  font-size: 12px;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  transform: translateY(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tr-fast), transform var(--tr-fast);
}
.entry-info-tip:hover .entry-info-tip__bubble,
.entry-info-tip:focus-within .entry-info-tip__bubble {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Buchungen-Monatsrail + Prüfen-Monatskontext
   ------------------------------------------------------------
   Additiver Freeze-safe Layer für:
   - klarere Monatsrail-Actions ohne große Sekundärbuttons
   - Monatskontext-Card auf "Zu prüfen"
   ============================================================ */

.bm-rail__item--interactive {
  display: block;
}

.bm-rail__item-hit {
  width: 100%;
  min-height: 46px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 18px;
  gap: 10px;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
}

.bm-rail__item-hit:hover .bm-rail__item-title,
.bm-rail__item-hit:focus-visible .bm-rail__item-title {
  color: var(--accent);
}

.bm-rail__item-hit:focus-visible {
  outline: none;
}

.bm-rail__item-hit:focus-visible .bm-rail__item-copy {
  box-shadow: 0 0 0 2px rgba(var(--accent-rgba-base), .16);
  border-color: rgba(var(--accent-rgba-base), .34);
}

.bm-rail__item-hit[disabled],
.bm-rail__item-hit[aria-disabled="true"] {
  cursor: not-allowed;
}

.bm-rail__item-hit[disabled] .bm-rail__item-copy,
.bm-rail__item-hit[aria-disabled="true"] .bm-rail__item-copy {
  opacity: .6;
}

.bm-rail__item-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: border-color var(--tr-fast), box-shadow var(--tr-fast), background var(--tr-fast);
}

.bm-rail__item-hit:hover .bm-rail__item-copy {
  background: rgba(var(--surface-rgba-base), .04);
  border-color: rgba(var(--accent-rgba-base), .18);
}

.bm-rail__item-title {
  color: var(--text);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bm-rail__item-meta {
  color: var(--text2);
  font-size: 11.5px;
  line-height: 1.35;
}

.bm-rail__item-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text3);
}

.pruef-month-scope {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(var(--surface-rgba-base), .04);
}

.pruef-month-scope__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pruef-month-scope__eyebrow {
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text3);
}

.pruef-month-scope__title {
  color: var(--text);
  font-size: 15px;
  font-weight: var(--fw-bold);
  letter-spacing: -.01em;
}

.pruef-month-scope__text {
  margin: 0;
  color: var(--text2);
  font-size: 12.5px;
  line-height: 1.55;
}

.pruef-month-scope__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.pruef-month-scope__clear {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text2);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: border-color var(--tr-fast), color var(--tr-fast), background var(--tr-fast);
}

.pruef-month-scope__clear:hover,
.pruef-month-scope__clear:focus-visible {
  border-color: var(--border2);
  color: var(--text);
  background: rgba(var(--surface-rgba-base), .05);
  outline: none;
}

@media (max-width: 720px) {
  .bm-rail__item-hit {
    grid-template-columns: 28px minmax(0, 1fr) 14px;
  }

  .pruef-month-scope {
    padding: 14px 15px;
  }
}

.month-check-page{
  width:min(100%,960px);
  display:flex;
  flex-direction:column;
  gap:18px;
}

.month-check-page__header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
}

.month-check-page__header-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.month-check-page__back{
  width:max-content;
  padding:0;
  border:0;
  background:transparent;
  color:var(--text2);
  font:inherit;
  font-size:12.5px;
  font-weight:var(--fw-semibold);
  cursor:pointer;
}

.month-check-page__back:hover,
.month-check-page__back:focus-visible{
  color:var(--text);
  outline:none;
}

.month-check-page__eyebrow,
.month-check-card__eyebrow{
  font-size:11px;
  font-weight:var(--fw-bold);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text3);
}

.month-check-page__title{
  margin:0;
}

.month-check-page__meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-top:10px;
  color:var(--text2);
  font-size:13px;
}

.month-check-page__badge,
.month-check-lock{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(var(--surface-rgba-base),.05);
  color:var(--text2);
  font-size:11.5px;
  font-weight:var(--fw-bold);
  letter-spacing:.04em;
  text-transform:uppercase;
}

.month-check-page__badge.is-good,
.month-check-lock.is-good{
  background:var(--tone-good-bg);
  border-color:var(--tone-good-border);
  color:var(--tone-good-fg);
}

.month-check-page__badge.is-warn{
  background:var(--tone-warn-bg);
  border-color:var(--tone-warn-border);
  color:var(--tone-warn-text);
}

.month-check-lock.is-muted{
  background:rgba(var(--surface-rgba-base),.05);
  border-color:var(--border);
  color:var(--text3);
}

.month-check-page__month-nav{
  display:flex;
  align-items:center;
  gap:8px;
  align-self:flex-start;
}

.month-check-page__month-btn{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(var(--surface-rgba-base),.05);
  color:var(--text);
  font:inherit;
  font-size:18px;
  cursor:pointer;
}

.month-check-page__month-btn:hover:not(:disabled),
.month-check-page__month-btn:focus-visible{
  border-color:var(--border2);
  background:rgba(var(--surface-rgba-base),.08);
  outline:none;
}

.month-check-page__month-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.month-check-page__month-label{
  min-width:108px;
  color:var(--text);
  font-size:13px;
  font-weight:var(--fw-semibold);
  text-align:center;
}

.month-check-card,
.month-check-row,
.month-check-empty{
  border:1px solid var(--border);
  border-radius:20px;
  background:rgba(var(--surface-rgba-base),.04);
}

.month-check-card{
  padding:20px 22px;
}

.month-check-card__body{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.month-check-card__title,
.month-check-list__title,
.month-check-row__title{
  margin:0;
  color:var(--text);
}

.month-check-card__title{
  font-size:26px;
  line-height:1.05;
  letter-spacing:-.03em;
}

.month-check-card__copy,
.month-check-list__copy,
.month-check-row__text{
  margin:0;
  color:var(--text2);
  line-height:1.55;
}

.month-check-card__actions{
  margin-top:4px;
}

.month-check-card__cta,
.month-check-row__cta{
  min-width:0;
}

.month-check-card__cta--ready,
.bm-rail__primary--checked{
  background:var(--tone-good-bg);
  border-color:var(--tone-good-border);
  color:var(--tone-good-fg);
}

.month-check-card__cta--ready:hover,
.bm-rail__primary--checked:hover{
  background:rgba(58,138,86,.18);
  border-color:rgba(58,138,86,.28);
}

.month-check-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.month-check-list__head{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.month-check-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:16px 18px;
}

.month-check-row__main{
  min-width:0;
  display:flex;
  align-items:flex-start;
  gap:14px;
}

.month-check-row__count{
  min-width:54px;
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  border-radius:12px;
  background:rgba(var(--accent-rgba-base),.1);
  color:var(--accent);
  font-family:var(--mono);
  font-size:18px;
  font-weight:var(--fw-bold);
}

.month-check-row__count--icon{
  background:rgba(var(--surface-rgba-base),.07);
  color:var(--text2);
}

.month-check-row__copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.month-check-row__status-line{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.month-check-row__actions{
  flex-shrink:0;
}

.month-check-empty{
  padding:18px;
  color:var(--text2);
}

body.light .month-check-card,
body.light .month-check-row,
body.light .month-check-empty{
  background:var(--card);
  border-color:rgba(26,30,46,.08);
  box-shadow:0 12px 28px rgba(26,30,46,.04);
}

body.light .month-check-page__month-btn{
  background:var(--card);
}

@media (max-width: 980px){
  .month-check-page__header{
    flex-direction:column;
    align-items:stretch;
  }

  .month-check-page__month-nav{
    align-self:flex-start;
  }
}

@media (max-width: 720px){
  .month-check-page{
    gap:14px;
  }

  .month-check-card{
    padding:18px 16px;
  }

  .month-check-card__title{
    font-size:22px;
  }

  .month-check-row{
    flex-direction:column;
    align-items:stretch;
  }

  .month-check-row__actions{
    width:100%;
  }

  .month-check-row__cta,
  .month-check-card__cta{
    width:100%;
    justify-content:center;
  }

  .month-check-row__count{
    min-width:46px;
  }
}

/* Beleg-Auswahl-Dialog — Match-Wahrscheinlichkeit + Sortier-Umschalter.
   Additiv; ergaenzt .entry-receipt-picker aus _23-bookings-month.css.
   Surface-Farben ausschliesslich ueber Tone-Tokens (kein Fake-Gruen). */

.entry-receipt-picker__sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding: 12px 24px 14px;
  border-bottom: 1px solid var(--entry-composer-border);
}

.entry-receipt-picker__sort-pill {
  min-height: var(--tap-target-min);
  padding: 8px 14px;
  line-height: 1.2;
}

.entry-receipt-dropzone__upload-action.is-attached {
  border-color: rgba(var(--accent-rgba-base), .36);
  background: rgba(var(--accent-rgba-base), .10);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgba-base), .10);
  color: var(--text-strong);
}

/* Ruhiges Match-Badge auf der Beleg-Karte (unter card-meta, zentriert). */
.rp-match {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .02em;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rp-match--good {
  color: var(--tone-good-fg);
  background: var(--tone-good-bg);
  border-color: var(--tone-good-border);
}
.rp-match--warn {
  color: var(--tone-warn-text);
  background: var(--tone-warn-bg);
  border-color: var(--tone-warn-border);
}
.rp-match--poor {
  color: var(--tone-poor-fg);
  background: var(--tone-poor-bg);
  border-color: var(--tone-poor-border);
}
/* Neutral/ruhig: nur im Match-Sort sichtbar (keine/sehr geringe
   Übereinstimmung) — informativ, nicht alarmierend. */
.rp-match--none {
  color: var(--text2);
  background: rgba(var(--text-rgba-base), .06);
  border-color: var(--border);
}

/* Tablet: Sortierzeile bleibt einzeilig, Pills duerfen umbrechen. */
@media (min-width: 720px) and (max-width: 959px) {
  .entry-receipt-picker__sort {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Mobile: Sortierzeile unter der Suche, volle Breite, Pills umbrechen. */
@media (max-width: 719px) {
  .entry-receipt-picker__sort {
    padding-left: 18px;
    padding-right: 18px;
  }
  .entry-receipt-picker__sort-pill {
    flex: 1 1 auto;
    text-align: center;
    justify-content: center;
  }
  .rp-match {
    white-space: normal;
  }
}

/* ── Receipt-Split-Dialog (gemischter Beleg / Bewirtung) ──────────────────
   Scoped auf .app-dialog.rsplit. Drei Zonen: Beleg+Status, Buchungsdaten+
   Split (prominent, als Card-Table), Bewirtung+Bestaetigung. Aendert die
   globale .app-dialog-Komponente bewusst NICHT. */
.app-dialog.rsplit {
  max-width: 1020px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
}
.app-dialog.rsplit .rsplit-close {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--text3);
  font-size: var(--fs-lg);
  line-height: 1;
  cursor: pointer;
  transition: background var(--tr-fast), color var(--tr-fast);
}
.app-dialog.rsplit .rsplit-close:hover {
  background: var(--border);
  color: var(--text);
}
.app-dialog.rsplit .rsplit-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.app-dialog.rsplit .rsplit-close[disabled] {
  opacity: .5;
  cursor: not-allowed;
}
@media (pointer: coarse) {
  .app-dialog.rsplit .rsplit-close { width: 44px; height: 44px; }
}
.app-dialog.rsplit .app-dialog-body { padding-bottom: 0; }
.app-dialog.rsplit .fgrp { margin-bottom: 0; min-width: 0; }
/* Horizontale Gutter kommen bewusst vom globalen `.app-dialog > div`
   28px/22px-Margin (gleiche Flucht wie Title/Body); hier nur vertikal. */
.rsplit-scroll {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  /* overflow-y:auto forces a `visible` overflow-x to compute as `auto`,
     turning this into a horizontal scroller as soon as a grid child
     exceeds its track. Pinning x to hidden (paired with min-width:0 on
     every grid/flex child below) removes the horizontal slide at the
     source instead of masking it. */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px 0 16px;
}
/* Footer ist ein Flex-Item AUSSERHALB des Scroll-Containers — er kann
   Inhalt nie ueberdecken; der Scrollbereich endet an seiner Oberkante. */
.app-dialog.rsplit .app-dialog-actions {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--border);
  background: transparent;
}
.app-dialog.rsplit .app-dialog-cancel {
  flex: 0 0 auto;
  min-width: 120px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text2);
}
.app-dialog.rsplit .app-dialog-cancel:hover {
  background: rgba(var(--surface-rgba-base), .05);
  color: var(--text);
}
.app-dialog.rsplit .app-dialog-ok {
  flex: 0 0 auto;
  min-width: 248px;
  max-width: 340px;
}

/* Labels: lesbar, nicht blass — Sentence-Case (globales Uppercase aufheben) */
.app-dialog.rsplit label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  color: var(--text2);
}
/* Eingaben hochwertiger: subtiler heller Fill ueber dem dunklen Modal,
   ruhige Border, gelber Focus-Ring; einheitliche Hoehe 38px. */
.app-dialog.rsplit .rsplit-scroll input:not([type="checkbox"]),
.app-dialog.rsplit .rsplit-scroll select {
  height: 38px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: rgba(var(--surface-rgba-base), .045);
  border: 1px solid rgba(var(--surface-rgba-base), .12);
  border-radius: 9px;
  color: var(--text);
  font-size: 13.5px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.app-dialog.rsplit .rsplit-scroll input:not([type="checkbox"]):focus,
.app-dialog.rsplit .rsplit-scroll select:focus {
  border-color: rgba(232, 184, 75, .42);
  box-shadow: 0 0 0 3px rgba(232, 184, 75, .1);
  background: rgba(var(--surface-rgba-base), .065);
}

.rsplit-sec { margin-top: 12px; }
.rsplit-sec:first-child { margin-top: 0; }
.rsplit-h {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: var(--fw-bold);
  letter-spacing: -.005em;
  color: var(--text);
}
.rsplit-grid {
  display: grid;
  gap: 12px 18px;
  grid-template-columns: 1fr 1fr;
  min-width: 0;
}
/* Grid items default to min-width:auto (min-content); without this an
   intrinsic-width control (date input, select) widens the track and
   overflows the modal. */
.rsplit-grid > * { min-width: 0; }
.rsplit-grid .rsplit-full { grid-column: 1 / -1; }

/* ZONE 1 — Beleg & Status: kompakte Status-Card in einer Zeile. */
.rsplit-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px 28px;
  padding: 12px 16px;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(var(--surface-rgba-base), .035);
}
.rsplit-status__doc {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.rsplit-status__doc svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--text3);
}
.rsplit-status__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.rsplit-status__metric {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 0;
}
.rsplit-status__k {
  font-size: 10.5px;
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text3);
}
.rsplit-status__v {
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rsplit-status__split {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rsplit-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: var(--fw-bold);
  line-height: 1;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rsplit-badge--good {
  color: var(--tone-good-fg);
  background: var(--tone-good-bg);
  border-color: var(--tone-good-border);
}
.rsplit-badge--poor {
  color: var(--tone-poor-fg);
  background: var(--tone-poor-bg);
  border-color: var(--tone-poor-border);
}
.rsplit-badge--warn {
  color: var(--tone-warn-text);
  background: var(--tone-warn-bg);
  border-color: var(--tone-warn-border);
}

/* ZONE 2 — Split-Zeilen als hochwertiger Card-Table-Block (prominent). */
.rsplit-table {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(var(--surface-rgba-base), .03);
  overflow: hidden;
  max-width: 100%;
  min-width: 0;
}
.rsplit-thead,
.rsplit-tr {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(140px, 1fr) 44px;
  gap: 14px;
  align-items: center;
  min-width: 0;
}
.rsplit-thead > *,
.rsplit-tr > * { min-width: 0; }
.rsplit-thead {
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(var(--surface-rgba-base), .04);
}
.rsplit-thead span {
  font-size: 10.5px;
  font-weight: var(--fw-bold);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text3);
}
.rsplit-thead span:nth-child(2) { text-align: right; }
.rsplit-tr {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.rsplit-tbody .rsplit-tr:last-child { border-bottom: 0; }
.rsplit-amount { position: relative; min-width: 0; }
.rsplit-amount input {
  width: 100%;
  text-align: right;
  padding-right: 30px;
  font-variant-numeric: tabular-nums;
}
.rsplit-eur {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--text3);
  pointer-events: none;
}
.rsplit-act { display: flex; justify-content: flex-end; }
.rsplit-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text3);
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
/* svg klick-transparent: e.target bleibt der Button (Handler liest
   data-act direkt von e.target, kein closest()) — keine JS-Aenderung. */
.rsplit-iconbtn svg { width: 15px; height: 15px; pointer-events: none; }
.rsplit-iconbtn:hover {
  color: var(--tone-poor-fg);
  background: var(--tone-poor-bg);
  border-color: var(--tone-poor-border);
}
.rsplit-iconbtn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(232, 184, 75, .35);
}
.rsplit-iconbtn:disabled { opacity: .4; cursor: not-allowed; }
.rsplit-addtip { margin-top: 12px; }
/* Wrapper is always rendered (stable hook for partial re-render); collapse
   it when empty so it does not add a phantom 12px gap. */
.rsplit-addtip:empty { display: none; }

/* ZONE 3 — Bewirtung & Bestaetigung. */
.rsplit-confirm {
  display: flex;
  margin-top: 12px;
  padding: 12px 16px;
  min-width: 0;
  max-width: 100%;
  border: 1px solid rgba(232, 184, 75, .2);
  border-radius: 12px;
  background: var(--tone-warn-bg);
}
.rsplit-confirm label {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: var(--fw-medium);
  color: var(--text);
}
.rsplit-confirm label span { min-width: 0; overflow-wrap: anywhere; }
.rsplit-hint { margin-top: 10px; color: var(--text2); font-size: 12.5px; line-height: 1.5; }
.rsplit-error {
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px solid var(--tone-poor-border);
  border-radius: 9px;
  background: var(--tone-poor-bg);
  color: var(--tone-poor-fg);
  font-size: 13px;
}

@media (max-width: 760px) {
  .app-dialog.rsplit {
    width: min(94vw, 720px);
    max-width: 94vw;
    min-width: 0;
    max-height: calc(100dvh - 20px);
  }
  .rsplit-scroll {
    padding: 12px 0 24px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .rsplit-grid { grid-template-columns: 1fr; }
  .rsplit-status {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .rsplit-status__metric { align-items: flex-start; }
  .rsplit-status__split { flex-wrap: wrap; }
  .rsplit-thead { display: none; }
  .rsplit-tr {
    grid-template-columns: 1fr 44px;
    grid-template-areas: "rate rate" "amount act";
    row-gap: 10px;
  }
  .rsplit-tr > :nth-child(1) { grid-area: rate; }
  .rsplit-tr > :nth-child(2) { grid-area: amount; }
  .rsplit-tr > :nth-child(3) { grid-area: act; align-self: center; }
  .app-dialog.rsplit .app-dialog-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    width: 100%;
    min-width: 0;
  }
  .app-dialog.rsplit .app-dialog-ok,
  .app-dialog.rsplit .app-dialog-cancel { width: 100%; min-width: 0; max-width: none; }
}
body.light .app-dialog.rsplit .app-dialog-cancel:hover {
  background: rgba(19, 32, 66, .05);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOOKING DRAWER (Phase E) — Read-only Buchungsdetail-Drawer
   ───────────────────────────────────────────────────────────────────────────
   Slide-from-right Detail-Panel für die Finanzcockpit-„Letzte Buchungen"-Liste.
   1:1-Port des Antigravity-Prototyps (cockpit-command-deck), read-only Variante:
   Details + echte Beleg-Vorschau + Aktionen (Verknüpfen/Upload/Geprüft/Öffnen).

   Quelle: prototypes/cockpit-command-deck (.booking-drawer / DrawerController).
   BEM-Namespacing (booking-drawer__*) vermeidet Kollisionen mit der Mobile-
   Shell-Drawer und detail-sheet. Werte token-getrieben (auto Dark/Light).
   Mobile <768px: keine Drawer-Interception (Cockpit-Zeilen behalten das Modal),
   Drawer hier zusätzlich CSS-seitig ausgeblendet (Gürtel + Hosenträger).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Root / Backdrop ──────────────────────────────────────────────────────── */
.booking-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
}
.booking-drawer[hidden] {
  display: none;
}

.booking-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: var(--sheet-backdrop);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--tr-base);
  z-index: var(--z-drawer-backdrop);
}
.booking-drawer.is-open .booking-drawer__backdrop {
  opacity: 1;
}

/* ── Panel ────────────────────────────────────────────────────────────────── */
.booking-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 100vw;
  background: var(--card);
  border-left: 1px solid var(--border-alpha);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--tr-drawer);
  z-index: var(--z-drawer);
}
.booking-drawer.is-open .booking-drawer__panel {
  transform: translateX(0);
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.booking-drawer__header {
  flex: 0 0 auto;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-alpha);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.booking-drawer__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}
.booking-drawer__close {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  color: var(--text2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  transition: var(--tr-fast);
}
.booking-drawer__close:hover {
  background: var(--card2);
  color: var(--text);
}

/* ── Body (scrollable) ────────────────────────────────────────────────────── */
.booking-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Amount hero ──────────────────────────────────────────────────────────── */
.booking-drawer__amount {
  background: var(--card2);
  border: 1px solid var(--border-alpha);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
}
.booking-drawer__amount-label {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text3);
  font-weight: var(--fw-bold);
  margin-bottom: 6px;
}
.booking-drawer__amount-val {
  font-family: var(--font-mono);
  font-size: var(--fs-hero);
  font-weight: var(--fw-extrabold);
  color: var(--text-strong);
}
.booking-drawer__amount-val.is-income {
  color: var(--green);
}

/* ── Details grid ─────────────────────────────────────────────────────────── */
.booking-drawer__details {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--card2);
  border: 1px solid var(--border-alpha);
  border-radius: var(--radius-md);
  padding: 16px;
}
.booking-drawer__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: var(--fs-base);
}
.booking-drawer__label {
  color: var(--text3);
  font-weight: var(--fw-semibold);
}
.booking-drawer__value {
  color: var(--text);
  font-weight: var(--fw-bold);
  text-align: right;
}
.booking-drawer__row--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.booking-drawer__row--stacked .booking-drawer__label {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.booking-drawer__row--stacked .booking-drawer__value {
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  font-weight: var(--fw-semibold);
  text-align: left;
  word-break: break-word;
}

/* Category tag */
.booking-drawer__tag {
  display: inline-block;
  background: rgba(var(--surface-rgba-base), 0.06);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

/* Status-/Beleg-Chips nutzen die globale .app-status-chip (DESIGN.md §4.5).
   Nur die Inline-Ausrichtung des kleinen CoreUI-SVG-Icons feinjustieren. */
.booking-drawer .app-status-chip svg {
  vertical-align: -1px;
}

/* ── Receipt preview ──────────────────────────────────────────────────────── */
.booking-drawer__receipt {
  background: var(--card2);
  border: 1px solid var(--border-alpha);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.booking-drawer__receipt--missing {
  border-style: dashed;
}
.booking-drawer__receipt-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.booking-drawer__receipt-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.booking-drawer__receipt-badge {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
}
.booking-drawer__receipt-badge--missing {
  background: var(--red2);
  color: var(--red);
}

/* Real document preview frame. Bilder als <img> inline; PDFs über die zentrale
   PDF.js-Canvas-Vorschau (belege-pdf-preview.js) — KEIN <iframe src=".../file">,
   weil das in Chromium bei application/pdf + nosniff einen Auto-Download statt
   Inline-Anzeige auslöst. Mirror der previewBeleg()-Logik in belege-pdf-preview.js. */
.booking-drawer__preview {
  border: 1px solid var(--border-alpha);
  border-radius: var(--radius-sm);
  overflow: auto;
  background: var(--bg);
  max-height: 42vh;
}
.booking-drawer__preview img {
  display: block;
  width: 100%;
  height: auto;
}
.booking-drawer__preview-pdf {
  display: flex;
  flex-direction: column;
  min-height: 180px;
}
.booking-drawer__preview-pdf .beleg-pdf-canvas-stage {
  padding: 8px;
}
.booking-drawer__preview-pdf .beleg-pdf-canvas-status {
  padding: 8px 12px;
  font-size: var(--fs-sm);
  color: var(--text2);
}
.booking-drawer__preview-fallback {
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  font-size: var(--fs-base);
  color: var(--text2);
}
.booking-drawer__receipt-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-base);
  color: var(--text2);
  min-width: 0;
}
.booking-drawer__file-name {
  color: var(--text2);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.booking-drawer__file-name:hover {
  color: var(--accent);
}

/* Empty / dropzone state */
.booking-drawer__dropzone {
  background: rgba(var(--surface-rgba-base), 0.02);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  cursor: pointer;
  transition: border-color var(--tr-fast), background var(--tr-fast);
}
.booking-drawer__dropzone:hover,
.booking-drawer__dropzone.is-dragover {
  border-color: var(--accent);
  background: var(--accent-bg-soft);
}
.booking-drawer__upload-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.booking-drawer__upload-text {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text2);
}
.booking-drawer__upload-hint {
  font-size: var(--fs-sm);
  color: var(--text3);
  max-width: 240px;
  line-height: var(--lh-base);
}
.booking-drawer__upload-link {
  color: var(--accent);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
}

/* ── Actions footer ───────────────────────────────────────────────────────── */
.booking-drawer__actions {
  flex: 0 0 auto;
  margin-top: auto;
  border-top: 1px solid var(--border-alpha);
  padding: 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Action-Buttons nutzen das Design-System (.btn-p/.btn-g, DESIGN.md §4.2).
   Im Drawer-Footer voll-breit gestapelt; Icon-Abstand via .btn-Gap. */
.booking-drawer__action {
  width: 100%;
  gap: 8px;
}
.booking-drawer__action:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* ── Mobile + reduced-motion ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Interception ist Desktop-only; falls der Drawer dennoch mountet, ausblenden.
     Mobile-Bottom-Sheet-Delegation ist bewusst Phase E2 (offen gehalten). */
  .booking-drawer {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .booking-drawer__panel,
  .booking-drawer__backdrop {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   YEAR OVERVIEW v2 — Jahreskompass
   ───────────────────────────────────────────────────────────────────────────
   Scoped under .yo-page. Sämtliche Klassen sind mit `yo-` prefixed, damit
   keine globalen Komponenten (Cards, Buttons, Tables) berührt werden.
   Dark-Mode default, Light-Mode-Overrides am Ende via `body.light .yo-*`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────── Page wrapper ─────────
   Padding + max-width werden vom umschließenden `.report-page`-Wrapper
   (aus _12-page-shell.css) geliefert: padding 20px 16px 80px, max-width 1240px.
   `.yo-page` selbst trägt nur Token-Variablen und Text-Default — kein
   eigenes Padding/Margin, sonst doppelt verschachtelt. */
.yo-page{
  --yo-radius-card:14px;
  --yo-radius-xl:18px;
  --yo-tr-fast:140ms cubic-bezier(.2,.7,.2,1);
  --yo-tr-base:220ms cubic-bezier(.2,.7,.2,1);
  --yo-shadow-md:0 12px 32px rgba(0,0,0,.30);
  --yo-shadow-glow:0 0 0 1px rgba(232,184,75,.32),0 18px 48px rgba(232,184,75,.08);
  color:var(--text);
}
.yo-page .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.yo-page .yo-pos{color:var(--green)}
.yo-page .yo-neg{color:var(--red)}
.yo-page .yo-mut{color:var(--text3)}

/* Header/Hero laufen jetzt über das geteilte Dashboard-Hero-System
   (_26-dashboard-hero.css). Hier nur noch Toolbar-Controls (im
   dash-hero-actions-Slot) + die Detailmodule unter dem Hero. */

/* ── Jahresaktionen-Menu (<details>) ───────────────────────────── */
.yo-ja-menu{position:relative;display:inline-flex}
.yo-ja-menu summary{
  list-style:none;
  cursor:pointer;
  /* yo-btn-primary handles colors/size via combined class */
}
.yo-ja-menu summary::-webkit-details-marker{display:none}
.yo-ja-menu summary::marker{content:''}
.yo-ja-menu .yo-ja-trigger{
  /* re-apply yo-btn-primary look since app-action-menu__trigger CSS would override */
  height:36px;padding:0 13px;
  background:var(--accent);color:var(--accent-ink);
  border:none;border-radius:10px;
  font:inherit;font-size:13px;font-weight:600;
  display:inline-flex;align-items:center;gap:8px;
  transition:all var(--yo-tr-fast);
}
.yo-ja-menu .yo-ja-trigger:hover{background:var(--accent3)}
.yo-ja-menu[open] .yo-ja-trigger{background:var(--accent3)}
.yo-ja-menu[open] .yo-ja-trigger svg:last-child{transform:rotate(180deg);transition:transform var(--yo-tr-base)}
.yo-ja-panel{
  position:absolute;
  top:calc(100% + 6px);right:0;
  z-index:60;
  display:flex;flex-direction:column;
  min-width:240px;
  padding:6px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--card);
  box-shadow:0 12px 32px rgba(0,0,0,.30);
  animation:yo-ja-pop .14s cubic-bezier(.2,.7,.2,1);
}
.yo-ja-menu:not([open]) .yo-ja-panel{display:none}
@keyframes yo-ja-pop{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}
.yo-ja-item{
  display:block;width:100%;
  padding:9px 12px;
  background:transparent;border:none;
  color:var(--text);font:inherit;font-size:13px;
  text-align:left;cursor:pointer;
  border-radius:6px;
  transition:background var(--yo-tr-fast),color var(--yo-tr-fast);
}
.yo-ja-item:hover{background:rgba(232,184,75,.08);color:var(--text)}
.yo-ja-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
body.light .yo-ja-panel{
  background:var(--card);
  box-shadow:0 14px 36px rgba(26,30,46,.14);
}
body.light .yo-ja-item:hover{background:rgba(232,184,75,.12)}
.yo-btn{
  height:36px;
  padding:0 13px;
  background:var(--card);
  border:1px solid var(--border);
  color:var(--text);
  font:inherit;font-size:13px;font-weight:500;
  border-radius:10px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  transition:all var(--yo-tr-fast);
}
.yo-btn:hover{border-color:var(--border2);background:var(--card2)}
.yo-btn-primary{
  background:var(--accent);color:var(--accent-ink);
  border-color:transparent;font-weight:600;
}
.yo-btn-primary:hover{background:var(--accent3)}
.yo-btn:disabled{opacity:.45;cursor:not-allowed}
.yo-btn:disabled:hover{background:var(--card);border-color:var(--border)}

.yo-btn-acc{
  height:42px;padding:0 18px;
  background:var(--accent);color:var(--accent-ink);
  border:none;border-radius:10px;
  font:inherit;font-size:13.5px;font-weight:600;
  letter-spacing:.005em;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  transition:all var(--yo-tr-fast);
}
.yo-btn-acc:hover{background:var(--accent3)}
.yo-btn-ghost{
  height:42px;padding:0 16px;
  background:transparent;color:var(--text2);
  border:1px solid var(--border);border-radius:10px;
  font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  transition:all var(--yo-tr-fast);
}
.yo-btn-ghost:hover:not(:disabled){
  color:var(--text);border-color:var(--border2);background:var(--card2);
}
.yo-btn-ghost:disabled{opacity:.45;cursor:not-allowed}

/* Toggle pill */
.yo-toggle{
  display:inline-flex;align-items:center;gap:10px;
  height:36px;padding:0 14px 0 12px;
  background:var(--card);border:1px solid var(--border);
  border-radius:10px;cursor:pointer;
  font-size:13px;color:var(--text2);
  user-select:none;transition:all var(--yo-tr-fast);
  position:relative;
}
.yo-toggle:hover{border-color:var(--border2);color:var(--text)}
.yo-toggle input{position:absolute;opacity:0;pointer-events:none}
.yo-switch{
  width:30px;height:18px;
  background:var(--bg2);border:1px solid var(--border2);
  border-radius:999px;position:relative;flex:none;
  transition:all var(--yo-tr-fast);
}
.yo-switch::before{
  content:"";position:absolute;top:1px;left:1px;
  width:14px;height:14px;
  background:var(--text3);border-radius:999px;
  transition:transform var(--yo-tr-base),background var(--yo-tr-fast);
}
.yo-toggle.is-on{color:var(--text);border-color:rgba(232,184,75,.32)}
.yo-toggle.is-on .yo-switch{
  background:rgba(232,184,75,.16);border-color:var(--accent2);
}
.yo-toggle.is-on .yo-switch::before{
  transform:translateX(12px);background:var(--accent);
}
.yo-toggle.is-disabled{
  /* Disabled wenn keine Vorjahresdaten vorhanden — Toggle ist greyed out,
     aber Label + Title-Tooltip erklären warum. (User-Folgefix 2026-05-12) */
  cursor:not-allowed;opacity:.45;
}
.yo-toggle.is-disabled:hover{border-color:var(--border);color:var(--text2)}

/* ───────── Year band ───────── */
.yo-yearband{
  position:relative;
  margin-bottom:24px;
  padding:20px 24px 18px;
  background:linear-gradient(180deg,rgba(var(--surface-rgba-base),.018),rgba(var(--surface-rgba-base),0)),var(--card);
  border:1px solid var(--border);
  border-radius:var(--yo-radius-card);
  overflow:visible;
}
.yo-yb-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  margin-bottom:14px;gap:14px;flex-wrap:wrap;
}
.yo-yb-title{
  font-size:10px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--text3);margin-bottom:4px;
}
.yo-yb-sub{
  font-size:12.5px;color:var(--text2);
  letter-spacing:-.005em;
}
.yo-yb-legend{
  /* Eine Zeile, alle Items gleich gewichtet — kein separater "Status:"-Block.
     Daten- und Status-Marker stehen nebeneinander, Schrift-Größe konsistent.
     (User-Folgeauftrag 2026-05-11 v2) */
  display:flex;align-items:center;flex-wrap:wrap;
  gap:6px 14px;
  font-size:11.5px;color:var(--text2);font-weight:500;
}
.yo-lg{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.yo-lg-dot{width:7px;height:7px;border-radius:50%;flex:none}
.yo-lg-dot.yo-dot-pruefen{background:var(--green)}
.yo-lg-dot.yo-dot-offen{background:var(--tone-warn-fg)}
.yo-lg-dot.yo-dot-aktiv{background:var(--accent)}
.yo-lg-bar-mark{
  /* Daten-Marker für „Ergebnis YYYY" — kleiner Bar mit Gradient */
  width:14px;height:6px;
  background:linear-gradient(180deg,var(--green) 0%,rgba(52,211,153,.45) 100%);
  border-radius:2px;
  display:inline-block;
}
.yo-lg-prev-mark{
  width:18px;height:0;
  border-top:1.5px dashed var(--blue);
  display:inline-block;
  opacity:.7;
}
.yo-lg-future-mark{
  /* Marker für „Zukunft" — Ghost-Bar-Look, neutral */
  width:14px;height:6px;
  background:linear-gradient(180deg,rgba(117,128,165,.30) 0%,rgba(117,128,165,.10) 100%);
  border-radius:2px;
  display:inline-block;
}

.yo-yb-chart{
  position:relative;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:8px;
  height:170px;
  /* Mehr Top-Padding (war 6px, jetzt 14px) damit 100%-Bars nicht die
     Chart-Decke berühren — der frühere Dot-Row hat das implizit gemacht.
     (User-Folgefix 2026-05-12: Dot-Row entfernt) */
  padding:14px 4px 0;
}
.yo-yb-col{
  /* Layer-Stack im Jahresband — strikt von hinten nach vorn:
       0  Hover/Aktiv-Background (::before)
       1  Bar-Layer (yo-yb-bar-track + yo-yb-bar)
       2  Vorjahres-Linie (yo-yb-prev-overlay, im Parent .yo-yb-chart)
       3  Label (yo-yb-mlabel)
     Status-Punkt-Reihe entfernt (User-Folgefix 2026-05-12) — Status lebt
     in den Monatskarten, das Jahresband zeigt nur Bars + optionale
     Vorjahres-Linie. Hover ist transform-frei (filter:brightness only). */
  position:relative;
  isolation:isolate;
  display:flex;flex-direction:column;align-items:center;
  height:100%;
  cursor:pointer;
  border:none;background:transparent;
  border-radius:8px;
  padding:0;font:inherit;color:inherit;
}
.yo-yb-col::before{
  /* eigener Hover-/Active-Background-Layer — liegt hinter Bars und Dot */
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  background:transparent;
  z-index:0;
  transition:background var(--yo-tr-fast),box-shadow var(--yo-tr-fast);
  pointer-events:none;
}
.yo-yb-col:hover::before{background:rgba(var(--surface-rgba-base),.04)}
.yo-yb-col.is-active::before{
  /* Neutraler Aktivzustand statt dekorativer Gold-Unterlinie. */
  background:rgba(var(--surface-rgba-base),.045);
  box-shadow:inset 0 0 0 1px rgba(var(--surface-rgba-base),.16);
}

/* .yo-yb-dot — Statuspunkt-Reihe wurde 2026-05-12 entfernt. Klassen bleiben
   in der Legende erhalten (yo-lg-dot.yo-dot-pruefen usw. — siehe weiter
   oben), das eigentliche Punkt-Element im Jahresband entfällt komplett. */
.yo-dot-pruefen{background:var(--green)}
.yo-dot-offen{background:var(--tone-warn-fg)}
.yo-dot-problem{background:var(--red)}
.yo-dot-aktiv{background:var(--accent)}

.yo-yb-bar-track{
  /* Layer 1 — Bars. overflow:hidden verhindert dass Hover-Effekte
     visuell in Dot- oder Label-Bereich überlaufen (Bug-Fix 2026-05-11 v3). */
  position:relative;
  z-index:1;
  flex:1;width:100%;
  display:flex;align-items:flex-end;justify-content:center;
  padding:0 4px;
  overflow:hidden;
}
.yo-yb-col.is-active .yo-yb-bar-track{
  /* Gleicher Innenabstand oben wie unter dem aktiven Monatslabel. */
  padding-top:8px;
}
.yo-yb-bar{
  width:100%;max-width:48px;
  min-height:3px;
  border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,var(--green) 0%,rgba(52,211,153,.45) 100%);
  transition:filter var(--yo-tr-fast);
  transform-origin:bottom;
}
.yo-yb-bar.yo-bar-neg{
  background:linear-gradient(180deg,var(--red) 0%,rgba(248,113,113,.45) 100%);
}
.yo-yb-bar.yo-bar-aktiv{
  background:linear-gradient(180deg,var(--accent3) 0%,var(--accent) 55%,var(--accent2) 100%);
}
.yo-yb-bar.yo-bar-ghost{
  background:linear-gradient(180deg,rgba(117,128,165,.18) 0%,rgba(117,128,165,.06) 100%);
  border:none;box-shadow:none;
  min-height:14px;border-radius:4px 4px 2px 2px;
}
.yo-yb-col:hover .yo-yb-bar:not(.yo-bar-ghost){
  /* Kein transform oder Schatten — visueller Hover-Hint via Farbe.
     Hovers dürfen den Statuspunkt nie überdecken. */
  filter:brightness(1.10) saturate(1.05);
}
.yo-yb-mlabel{
  /* Layer 3 — Label, über Bars aber unter Dot */
  position:relative;
  z-index:3;
  font-size:10px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--text3);
  margin-top:8px;padding-bottom:4px;
  transition:color var(--yo-tr-fast);
}
.yo-yb-col.is-active .yo-yb-mlabel{color:var(--accent);padding-bottom:8px}
.yo-yb-col:hover .yo-yb-mlabel{color:var(--text2)}
.yo-yb-col.is-active:hover .yo-yb-mlabel{color:var(--accent3)}

.yo-yb-prev-overlay{
  /* Layer 2 — Vorjahreslinie, über Bars aber unter Labels.
     Liegt im Parent .yo-yb-chart, pointer-events:none damit Spalten-Hover
     nicht blockiert wird. Top/bottom-Offsets korrespondieren JETZT zum
     bar-track-Bereich (Chart-Padding 14px oben + 0 unten, Label ~22px
     unten). (User-Folgefix 2026-05-12) */
  position:absolute;
  top:14px;left:8px;right:8px;bottom:22px;
  width:calc(100% - 16px);
  pointer-events:none;
  z-index:2;
}
.yo-yb-prev-line{
  /* Vorjahres-Linie: gedämpftes Blau. Mehrere Segmente möglich (bricht
     auf fehlende Monate, User-Folgefix 2026-05-12). Stroke etwas dünner
     (1.25 statt 1.5) und Opacity etwas niedriger (.48 statt .55) — der
     Datenfokus liegt auf den aktuellen Bars. */
  stroke:var(--blue);
  stroke-width:1.25;fill:none;
  stroke-dasharray:4 5;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:.48;
}

/* Tooltip */
.yo-tooltip{
  position:absolute;left:0;top:0;
  min-width:188px;max-width:260px;
  padding:13px 14px;
  border-radius:14px;
  border:1px solid rgba(var(--surface-rgba-base),.10);
  background:linear-gradient(180deg,rgba(11,15,24,.96),rgba(15,19,30,.92));
  backdrop-filter:blur(14px) saturate(1.12);
  -webkit-backdrop-filter:blur(14px) saturate(1.12);
  box-shadow:0 18px 44px rgba(0,0,0,.34),inset 0 1px 0 rgba(var(--surface-rgba-base),.04);
  opacity:0;pointer-events:none;
  transform:translate(-50%,-110%) scale(.985);
  transition:opacity .16s ease,transform .16s ease;
  z-index:50;
}
.yo-tooltip.is-on{opacity:1;transform:translate(-50%,-115%) scale(1)}.yo-tooltip.is-measuring{visibility:hidden}
.yo-tooltip.yo-tt-below{transform:translate(-50%,8px) scale(.985)}
.yo-tooltip.yo-tt-below.is-on{transform:translate(-50%,12px) scale(1)}
.yo-tt-title{
  font-size:13.5px;font-weight:700;color:var(--text);
  line-height:1.2;margin-bottom:4px;
}
.yo-tt-title small{
  display:block;font-size:11px;font-weight:500;
  color:var(--text2);margin-top:3px;letter-spacing:0;
}
.yo-tt-res{
  font-size:18px;font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
  margin:6px 0 10px;
}
.yo-tt-rows{display:flex;flex-direction:column;gap:6px;font-size:12px}
.yo-tt-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.yo-tt-row span{display:inline-flex;align-items:center;gap:8px;color:rgba(var(--text-rgba-base),.66)}
.yo-tt-sw{width:8px;height:8px;border-radius:2px;flex:none}.yo-tt-sw[data-yo-swatch="in"]{background:var(--green)}.yo-tt-sw[data-yo-swatch="out"]{background:var(--red)}.yo-tt-sw[data-yo-swatch="count"]{background:var(--blue)}
.yo-tt-row strong{
  font-size:11.5px;font-weight:700;
  color:var(--text);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.yo-tt-foot{
  margin-top:10px;padding-top:8px;
  border-top:1px solid rgba(var(--surface-rgba-base),.08);
  font-size:11px;color:var(--text2);font-style:italic;line-height:1.4;
}

/* Touch-Target-Floor (WCAG 2.5.5 / Apple HIG) auf coarse Pointern — app-weiter
   WebKit-Sweep (iPhone 13, ergänzend zu #3721): yo-btn 152×42, yo-btn-acc
   154×42 (Höhe je <44). min-height schlägt die festen height:36/42px-Werte;
   inline-flex+align-items:center zentriert vertikal, Optik bleibt kompakt. */
@media (pointer: coarse) {
  .yo-btn { min-height: 44px; }
  .yo-btn-acc { min-height: 44px; }
}

/* ───────── Month grid ───────── */
.yo-month-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:24px;
}
.yo-month{
  position:relative;
  background:linear-gradient(180deg,rgba(var(--surface-rgba-base),.020),rgba(var(--surface-rgba-base),0)),var(--card);
  border:1px solid var(--border);
  border-radius:var(--yo-radius-card);
  padding:18px 18px 16px;
  cursor:pointer;
  transition:transform var(--yo-tr-base),border-color var(--yo-tr-fast),box-shadow var(--yo-tr-base),background var(--yo-tr-fast);
  display:flex;flex-direction:column;
  gap:14px;
  min-height:184px;
  overflow:hidden;
  text-align:left;
  font:inherit;color:inherit;
  width:100%;
}
.yo-month::before{
  content:"";position:absolute;
  left:0;top:14px;bottom:14px;
  width:2px;background:transparent;border-radius:0 2px 2px 0;
  transition:background var(--yo-tr-fast);
}
.yo-month:hover{
  transform:translateY(-2px);
  border-color:var(--border2);
  background:var(--card2);
  box-shadow:var(--yo-shadow-md);
}
.yo-month:hover .yo-m-cta{opacity:1;transform:translateY(0)}
.yo-month:hover::before{background:var(--accent2)}
.yo-month.is-active{
  border-color:rgba(232,184,75,.45);
  background:linear-gradient(180deg,rgba(232,184,75,.08),rgba(232,184,75,.02)),var(--card2);
  box-shadow:var(--yo-shadow-glow);
}
.yo-month.is-active::before{background:var(--accent)}
.yo-month.is-pruefen{border-color:rgba(83,214,179,.20)}
.yo-month.is-pruefen::before{background:rgba(83,214,179,.50)}
.yo-month.is-future,.yo-month.is-empty{
  background:var(--card);
  border-color:rgba(58,69,112,.45);
}
.yo-month.is-future:hover,.yo-month.is-empty:hover{
  border-color:var(--border2);background:var(--card2);
}
.yo-month.is-future .yo-m-name,.yo-month.is-empty .yo-m-name{
  color:var(--text3);font-weight:500;
}
/* Zukunftsmonate stärker zurücktreten als „nur empty" — bewusst, nicht kaputt */
.yo-month.yo-month-future{opacity:.62}
.yo-month.yo-month-future:hover{opacity:.85}
.yo-month.yo-month-future .yo-m-empty-mark svg{opacity:.30}

.yo-m-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;
}
.yo-m-name{
  font-size:18px;font-weight:750;letter-spacing:-.02em;
  color:var(--text);font-family:inherit;
}
.yo-month.is-active .yo-m-name{color:var(--accent3)}

.yo-chip{
  display:inline-flex;align-items:center;gap:5px;
  height:22px;padding:0 9px;
  font-size:11px;font-weight:600;letter-spacing:.02em;
  border-radius:999px;border:1px solid transparent;
  white-space:nowrap;
}
.yo-chip-warn{color:var(--tone-warn-text);background:rgba(232,184,75,.10);border-color:rgba(232,184,75,.32)}
.yo-chip-good{color:var(--tone-good-fg);background:rgba(83,214,179,.10);border-color:rgba(83,214,179,.32)}
.yo-chip-muted{color:var(--text3);background:rgba(117,128,165,.08);border-color:rgba(117,128,165,.18)}
.yo-chip-acc{color:var(--accent);background:rgba(232,184,75,.14);border-color:rgba(232,184,75,.42)}
.yo-chip-sm{height:20px;font-size:10.5px;padding:0 8px}

.yo-m-result{
  font-size:24px;font-weight:700;letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;line-height:1;
  font-family:inherit;
}
.yo-m-result.yo-mut{color:var(--text3);font-weight:500;font-size:14px}

.yo-m-bal{
  display:flex;flex-direction:column;gap:5px;
  margin-top:auto;padding-top:4px;
}
.yo-bal-row{
  display:grid;grid-template-columns:18px 1fr auto;
  gap:8px;align-items:center;
}
.yo-bal-mark{
  font-size:9.5px;font-weight:700;
  letter-spacing:.05em;text-align:center;
  border-radius:3px;padding:1px 0;
}
.yo-bal-e{background:rgba(52,211,153,.10);color:var(--green)}
.yo-bal-a{background:rgba(248,113,113,.10);color:var(--red)}
.yo-bal-track{
  height:5px;
  background:rgba(var(--surface-rgba-base),.04);
  border-radius:999px;overflow:hidden;
  position:relative;
}
.yo-bal-fill{
  height:100%;border-radius:inherit;
  width:0;
  transition:width 700ms cubic-bezier(.2,.7,.2,1);
}
.yo-bal-in {background:linear-gradient(90deg,rgba(52,211,153,.55),var(--green))}
.yo-bal-out{background:linear-gradient(90deg,rgba(248,113,113,.55),var(--red))}
.yo-bal-num{
  font-variant-numeric:tabular-nums;
  font-size:11px;color:var(--text2);
  white-space:nowrap;letter-spacing:0;
}

.yo-m-foot{
  display:flex;align-items:center;justify-content:space-between;
  font-size:11.5px;color:var(--text3);
}
.yo-m-cta{
  opacity:0;transform:translateY(2px);
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:600;color:var(--accent);
  letter-spacing:.01em;transition:all var(--yo-tr-fast);
}
.yo-month.is-active .yo-m-cta{opacity:1;transform:none}

.yo-yoy{
  display:block;
  font-size:10.5px;font-weight:500;
  letter-spacing:.005em;font-variant-numeric:tabular-nums;
  margin-top:-6px;color:var(--text3);
}
.yo-yoy-pos{color:var(--tone-good-fg)}
.yo-yoy-neg{color:var(--tone-poor-fg)}

.yo-m-empty-text{
  font-size:13px;color:var(--text2);font-weight:600;
  letter-spacing:-.005em;line-height:1.35;
}
.yo-m-empty-text small{
  display:block;margin-top:2px;
  font-size:11.5px;font-weight:400;color:var(--text3);
}
.yo-m-empty-mark{
  margin-top:auto;
  display:flex;align-items:center;justify-content:center;
  padding:8px 0 4px;
  color:var(--text3);
}
.yo-m-empty-mark svg{
  width:22px;height:22px;opacity:.42;
}

/* ───────── Active month detail ───────── */
.yo-active-month{
  position:relative;
  background:linear-gradient(180deg,rgba(232,184,75,.04),rgba(232,184,75,0) 60%),var(--card);
  border:1px solid var(--border);
  border-radius:var(--yo-radius-xl);
  padding:28px 32px;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);
  gap:28px;
  margin-bottom:24px;
  overflow:hidden;
}
.yo-active-month::before{
  content:"";position:absolute;
  left:0;top:24px;bottom:24px;
  width:3px;background:var(--accent);border-radius:0 3px 3px 0;
}
.yo-am-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;margin-bottom:18px;
}
.yo-am-eyebrow{
  font-size:10px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);margin-bottom:4px;
}
.yo-am-title{
  font-size:24px;font-weight:800;letter-spacing:-.025em;
  color:var(--text);font-family:inherit;
}
.yo-am-sub{
  font-size:13.5px;color:var(--text2);margin-top:4px;
}
.yo-am-figs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin-top:4px;padding:16px 0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.yo-fig{padding:0 18px;border-right:1px solid var(--border)}
.yo-fig:first-child{padding-left:0}
.yo-fig:last-child{border-right:none;padding-right:0}
.yo-fig-label{
  font-size:10px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--text3);margin-bottom:6px;
}
.yo-fig-val{
  font-size:19px;font-weight:700;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;color:var(--text);
}
.yo-fig-val.yo-mut{color:var(--text3);font-weight:500}

.yo-am-aside{display:flex;flex-direction:column;gap:14px}
.yo-todo-list{
  list-style:none;margin:0;padding:4px 0;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:10px;
}
.yo-todo-list li{
  display:flex;align-items:center;gap:11px;
  padding:10px 14px;
  font-size:13px;color:var(--text);
  border-bottom:1px solid var(--border);
}
.yo-todo-list li:last-child{border-bottom:none}
.yo-todo-icon{
  width:26px;height:26px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;
}
.yo-tt-warn{background:rgba(232,184,75,.10);color:var(--tone-warn-text)}
.yo-tt-err {background:rgba(248,113,113,.10);color:var(--tone-poor-fg)}
.yo-tt-good{background:rgba(83,214,179,.10);color:var(--tone-good-fg)}
.yo-tt-mut {background:rgba(117,128,165,.08);color:var(--text3)}
.yo-todo-text{flex:1;min-width:0}
.yo-todo-meta{
  font-size:11px;color:var(--text3);margin-left:auto;
  font-variant-numeric:tabular-nums;
}
.yo-am-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}

/* ───────── Secondary cards (Status / USt / Top Cats) ───────── */
.yo-secondary{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin-bottom:24px;
}
.yo-sec-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--yo-radius-card);
  padding:22px 22px;
  display:flex;flex-direction:column;gap:14px;
}
.yo-sec-head{display:flex;align-items:center;justify-content:space-between}
.yo-sec-title{
  font-size:14px;font-weight:700;
  color:var(--text);letter-spacing:-.005em;
}
/* Transparenz-Badge: USt-Anzeige läuft nach Soll-Versteuerung (PR-4c-3). */
.yo-vat-badge{
  display:inline-block;margin-left:8px;
  font-size:10.5px;font-weight:600;letter-spacing:.01em;
  color:var(--accent);background:rgba(232,184,75,.14);
  border:1px solid rgba(232,184,75,.42);border-radius:5px;
  padding:1px 7px;vertical-align:middle;
}
/* Mischjahr-Hinweis: Jahreswert ist im Cutover-Jahr keine Grundlage für die
   USt-Jahreserklärung (StB-Auflage P1). */
.yo-vat-mixed-notice{
  margin-top:8px;padding:7px 11px;
  font-size:11px;line-height:1.45;
  color:var(--text2);background:rgba(232,184,75,.08);
  border:1px solid rgba(232,184,75,.32);border-radius:6px;
}
.yo-sec-link{
  font-size:12px;color:var(--text3);
  text-decoration:none;
  display:inline-flex;align-items:center;gap:4px;
  transition:color var(--yo-tr-fast);
}
.yo-sec-link:hover{color:var(--accent)}

.yo-status-head{display:flex;align-items:center;gap:14px}
.yo-ring{width:64px;height:64px;flex:none;position:relative}
.yo-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.yo-ring-track{stroke:var(--border);fill:none;stroke-width:6}
.yo-ring-bar{
  stroke:var(--green);fill:none;stroke-width:6;
  stroke-linecap:round;
  transition:stroke-dashoffset 600ms cubic-bezier(.2,.7,.2,1);
}
.yo-ring-label{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;color:var(--text);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.yo-status-text{font-size:13px;color:var(--text2);line-height:1.4}
.yo-status-text strong{color:var(--text);font-weight:600}
.yo-status-rows{display:flex;flex-direction:column;gap:10px}
.yo-st-row{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--text2)}
.yo-st-num{
  width:36px;font-size:18px;font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--text);text-align:right;
}
.yo-st-warn{color:var(--tone-warn-text)}
.yo-st-err {color:var(--tone-poor-fg)}
.yo-st-good{color:var(--tone-good-fg)}
.yo-st-mut {color:var(--text3)}

.yo-ust{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--border)}
.yo-ust-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 0;font-size:13.5px;
  border-bottom:1px solid var(--border);
}
.yo-ust-row span:first-child{color:var(--text2)}
.yo-ust-row span:last-child{color:var(--text)}
.yo-ust-row.yo-ust-total{
  border-bottom:none;padding-bottom:0;padding-top:14px;
  font-weight:600;
}
.yo-ust-total span:first-child{color:var(--text)}
.yo-ust-total span:last-child{color:var(--accent);font-size:16px}
.yo-ust-foot{font-size:11.5px;color:var(--text3);line-height:1.5}
.yo-ust-empty{font-size:13px;color:var(--text3);font-style:italic}

.yo-ustva{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:14px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--card2);
}
.yo-ustva-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.yo-ustva.is-monthly .yo-ustva-head{flex-direction:column;align-items:stretch}
.yo-ustva-head-copy{min-width:0}
.yo-ustva-title{
  color:var(--text);
  font-size:13px;
  font-weight:700;
  letter-spacing:0;
}
.yo-ustva-sub{
  margin-top:3px;
  color:var(--text3);
  font-size:11.5px;
  line-height:1.35;
}
.yo-ustva-periods{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:4px;
  padding:3px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--card);
}
.yo-ustva-period{
  height:26px;
  min-width:0;
  padding:0 6px;
  border:0;
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--text2);
  font-family:var(--font-sans)!important;
  font-size:11.5px;
  font-weight:700;
  cursor:pointer;
  transition:background var(--yo-tr-fast),color var(--yo-tr-fast),opacity var(--yo-tr-fast);
}
.yo-ustva-period:hover:not(:disabled){background:var(--bg2);color:var(--text)}
.yo-ustva-period.is-active{
  background:var(--accent);
  color:var(--accent-ink);
}
.yo-ustva-period:disabled{opacity:.42;cursor:not-allowed}
.yo-ustva-select-wrap{
  position:relative;
  min-width:148px;
}
.yo-ustva-select{
  width:100%;
  height:34px;
  padding:0 32px 0 11px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--card);
  color:var(--text);
  appearance:none;
  -webkit-appearance:none;
  font-family:var(--font-sans)!important;
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
}
.yo-ustva-select-wrap::after{
  content:'';
  position:absolute;
  right:11px;
  top:50%;
  width:6px;
  height:6px;
  border-right:1.5px solid var(--text3);
  border-bottom:1.5px solid var(--text3);
  transform:translateY(-65%) rotate(45deg);
  pointer-events:none;
}
.yo-ustva-rows{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.yo-ustva-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(64px,max-content) 30px;
  align-items:center;
  column-gap:12px;
  min-height:40px;
  padding:9px 10px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--card);
}
.yo-ustva-kz{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.yo-ustva-code{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:27px;
  height:22px;
  padding:0 7px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--bg2);
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:800;
}
.yo-ustva-label{
  min-width:0;
  color:var(--text2);
  font-size:12.5px;
  font-weight:600;
  line-height:1.25;
  overflow:visible;
  white-space:normal;
}
.yo-ustva-value{display:flex;flex-direction:column;align-items:flex-end;justify-self:end;gap:2px}
.yo-ustva-value strong{
  color:var(--text);
  font-size:16px;
  font-weight:800;
}
.yo-ustva-value span{
  color:var(--text3);
  font-size:10.5px;
}
.yo-ustva-copy{
  height:28px;
  width:30px;
  padding:0;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--text2);
  font-family:var(--font-sans)!important;
  font-size:11.5px;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background var(--yo-tr-fast),border-color var(--yo-tr-fast),color var(--yo-tr-fast);
}
.yo-ustva-copy-icon{display:inline-flex}
.yo-ustva-copy:hover{
  border-color:var(--border2);
  background:var(--card2);
  color:var(--text);
}
.yo-ustva-note{font-size:12px}

.yo-cats{display:flex;flex-direction:column;gap:11px}
.yo-cat-row{display:flex;flex-direction:column;gap:6px}
.yo-cat-line{display:flex;align-items:center;justify-content:space-between;font-size:13px}
.yo-cat-name{color:var(--text2);letter-spacing:-.005em}
.yo-cat-val{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.yo-cat-bar{height:4px;background:var(--bg2);overflow:hidden}
.yo-cat-fill{
  height:100%;
  background:linear-gradient(90deg,var(--accent2),var(--accent));
  transition:width 600ms cubic-bezier(.2,.7,.2,1);
}
.yo-cat-empty{font-size:13px;color:var(--text3);font-style:italic;padding:6px 0}

/* ── Empty-State Variant für Sekundär-Cards ─────────────────────── */
.yo-sec-card-empty .yo-sec-empty-body{
  display:flex;flex-direction:column;align-items:center;
  gap:14px;padding:18px 8px 8px;text-align:center;
}
.yo-sec-empty-ico{
  color:var(--accent);
  background:rgba(232,184,75,.10);
  border-radius:50%;
  padding:10px;width:48px;height:48px;
  flex:none;
}
.yo-sec-empty-text{
  font-size:13px;color:var(--text2);
  line-height:1.5;letter-spacing:-.005em;
  max-width:30ch;
}
.yo-sec-empty-cta{
  height:36px;padding:0 14px;
  display:inline-flex;align-items:center;gap:8px;
}
body.light .yo-sec-empty-ico{
  background:rgba(232,184,75,.16);color:rgb(181,141,44);
}
body.light .yo-sec-empty-text{color:var(--text2)}

/* ───────── Monthly table (collapsible accordion) ───────── */
.yo-mt-section{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--yo-radius-card);
  overflow:hidden;
  transition:border-color var(--yo-tr-fast);
}
.yo-mt-section:hover{border-color:var(--border2)}

.yo-mt-toggle{
  width:100%;
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:14px;
  padding:18px 22px;
  background:transparent;border:none;
  color:var(--text);font:inherit;
  cursor:pointer;text-align:left;
  transition:background var(--yo-tr-fast);
}
.yo-mt-toggle:hover{background:rgba(var(--surface-rgba-base),.02)}
.yo-mt-chev{
  width:24px;height:24px;
  border-radius:8px;
  background:rgba(232,184,75,.12);color:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform var(--yo-tr-base);
}
.yo-mt-chev.is-rot{transform:rotate(180deg)}
.yo-mt-title{font-size:14px;font-weight:700;color:var(--text);letter-spacing:-.005em;display:block}
.yo-mt-sub{font-size:12px;color:var(--text3);margin-top:3px;display:block}
.yo-mt-meta{
  font-size:11.5px;color:var(--text3);
  font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:center;gap:8px;
}
.yo-mt-pill{
  padding:4px 10px;border-radius:999px;
  background:var(--bg2);border:1px solid var(--border);
  color:var(--text2);font-weight:500;
}
.yo-mt-table{
  border-top:1px solid var(--border);
  background:linear-gradient(180deg,rgba(var(--surface-rgba-base),.012),transparent);
}

.yo-mt-row{
  display:grid;
  grid-template-columns:120px 84px 1fr 1fr 1fr 1fr 110px 28px;
  gap:14px;align-items:center;
  padding:12px 22px;
  font-size:13px;
  border-bottom:1px solid var(--border);
  transition:background var(--yo-tr-fast);
}
.yo-mt-row:last-child{border-bottom:none}
.yo-mt-head-row{
  font-size:10px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--text3);
  padding-top:14px;padding-bottom:14px;
  background:rgba(var(--surface-rgba-base),.012);
}
.yo-mt-q-row{
  position:relative;
  background:linear-gradient(180deg,rgba(232,184,75,.09) 0%,rgba(232,184,75,.025) 100%);
  border-top:1px solid rgba(232,184,75,.22);
  border-bottom:1px solid var(--border);
  padding:14px 22px 14px 25px;
  font-size:13px;
}
.yo-mt-q-row::before{
  content:"";position:absolute;
  left:0;top:0;bottom:0;width:3px;
  background:var(--accent);
}
.yo-mt-q-label{
  text-transform:uppercase;letter-spacing:.14em;
  font-size:11px;font-weight:800;color:var(--accent);
  white-space:nowrap;
}
.yo-mt-q-val{
  font-variant-numeric:tabular-nums;
  font-weight:600;color:var(--text);font-size:13px;
}
.yo-mt-q-val.yo-pos{color:var(--green);font-weight:700}
.yo-mt-q-val.yo-neg{color:var(--red);font-weight:700}
.yo-mt-q-val.yo-mut{color:var(--text3);font-weight:500}

.yo-mt-month-row{
  cursor:pointer;
  background:transparent;border:none;
  color:inherit;
  width:auto;
}
.yo-mt-month-row:hover{background:rgba(var(--surface-rgba-base),.025)}
.yo-mt-month-row.is-open{background:rgba(232,184,75,.04)}
.yo-mt-month-row.is-active{background:rgba(232,184,75,.06)}
.yo-mt-mname{
  display:flex;align-items:center;gap:9px;
  font-weight:600;color:var(--text);
}
.yo-mt-dot{width:7px;height:7px;border-radius:50%;flex:none}
.yo-mt-cell{
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
  color:var(--text2);
  white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.yo-mt-saldo{color:var(--text);font-weight:600}
.yo-mt-rowchev{
  width:24px;height:24px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text3);
  transition:transform var(--yo-tr-base),color var(--yo-tr-fast);
}
.yo-mt-month-row.is-open .yo-mt-rowchev{
  transform:rotate(180deg);color:var(--accent);
}

.yo-mt-drill{
  grid-column:1 / -1;
  padding:6px 22px 18px 22px;
  background:transparent;
  animation:yo-drill-in .35s cubic-bezier(.2,.7,.2,1);
}
@keyframes yo-drill-in{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}
.yo-mt-drill-inner{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px 16px 12px;
  margin-left:32px;
}
.yo-mt-drill-head{
  display:flex;align-items:center;justify-content:space-between;
  font-size:11px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--text3);margin-bottom:10px;
  flex-wrap:wrap;gap:8px;
}
.yo-mt-drill-head em{
  font-style:normal;color:var(--text2);font-weight:500;
  letter-spacing:0;font-size:11px;text-transform:none;
}
.yo-tx-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.yo-tx{
  display:grid;grid-template-columns:64px 1fr auto;
  gap:14px;align-items:center;
  padding:9px 4px;font-size:12.5px;
  border-bottom:1px solid rgba(var(--surface-rgba-base),.04);
  transition:background var(--yo-tr-fast);
}
.yo-tx:last-child{border-bottom:none}
.yo-tx:hover{background:rgba(var(--surface-rgba-base),.02)}
.yo-tx-date{
  font-variant-numeric:tabular-nums;
  font-size:11.5px;color:var(--text3);
}
.yo-tx-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.yo-tx-desc{
  color:var(--text);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.yo-tx-cat{font-size:11px;color:var(--text3)}
.yo-tx-amt{
  font-variant-numeric:tabular-nums;
  font-weight:600;font-size:13px;
  white-space:nowrap;
}
.yo-mt-drill-foot{
  margin-top:8px;padding-top:10px;
  border-top:1px solid rgba(var(--surface-rgba-base),.05);
  display:flex;align-items:center;justify-content:space-between;
  font-size:12px;color:var(--text3);
  flex-wrap:wrap;gap:8px;
}
.yo-link{
  color:var(--accent);text-decoration:none;
  font-weight:600;font-size:12px;
  display:inline-flex;align-items:center;gap:4px;
  background:transparent;border:none;cursor:pointer;
  font-family:inherit;padding:0;
  transition:gap var(--yo-tr-fast);
}
.yo-link:hover{gap:8px}
.yo-mt-drill-empty{
  color:var(--text3);font-size:12px;
  text-align:center;padding:14px 0;font-style:italic;
}

/* ───────── Empty / loading ───────── */
.yo-empty{
  display:flex;align-items:center;justify-content:center;
  min-height:300px;color:var(--text3);
}
.yo-empty-card{
  font-size:14px;color:var(--text2);
}

/* ───────── Demo banner (lokaler Smoke-Modus) ─────────── */
.yo-demo-banner{
  /* nur lokal sichtbar (rendered nur wenn ?demo=… auf 127.0.0.1/localhost).
     Auffälliger Streifen oben damit klar ist: keine echten Daten. */
  display:flex;align-items:center;gap:10px;
  margin:0 0 16px;
  padding:10px 14px;
  border-radius:10px;
  border:1px dashed var(--accent);
  background:rgba(232,184,75,.10);
  color:var(--text);
  font-size:12.5px;font-weight:500;letter-spacing:.005em;
}
.yo-demo-banner strong{
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:11px;
  color:var(--accent3);
}
.yo-demo-banner .yo-demo-pill{
  display:inline-block;padding:2px 8px;border-radius:999px;
  background:rgba(232,184,75,.18);color:var(--accent3);
  font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;
}
.yo-demo-banner .yo-demo-modes{
  margin-left:auto;display:inline-flex;gap:6px;flex-wrap:wrap;
  font-size:11px;color:var(--text2);
}
.yo-demo-banner .yo-demo-modes a{
  color:var(--accent);text-decoration:none;
  padding:2px 6px;border-radius:6px;
}
.yo-demo-banner .yo-demo-modes a:hover{background:rgba(232,184,75,.10)}
.yo-demo-banner .yo-demo-modes a.is-on{
  background:rgba(232,184,75,.18);color:var(--accent3);font-weight:600;
}
body.light .yo-demo-banner{background:rgba(232,184,75,.14)}

/* ───────── Focus ─────────── */
.yo-month:focus-visible,.yo-yb-col:focus-visible,
.yo-btn:focus-visible,.yo-toggle:focus-visible,
.yo-btn-acc:focus-visible,.yo-btn-ghost:focus-visible,
.yo-mt-toggle:focus-visible,.yo-mt-month-row:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}

/* Touch-Target-Floor (WCAG 2.5.5 / Apple HIG) auf coarse Pointern — app-weiter
   WebKit-Sweep (iPhone 13, ergänzend zu #3721): yo-sec-link 54×19 (Höhe sehr
   klein). <a> mit inline-flex → Hit-Area via min-height + padding, Optik bleibt
   schlank. */
@media (pointer: coarse) {
  .yo-sec-link { min-height: 44px; padding-block: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .yo-month-grid{grid-template-columns:repeat(3,1fr)}
  .yo-am-figs{grid-template-columns:repeat(2,1fr);gap:12px 0}
  .yo-am-figs .yo-fig:nth-child(2){border-right:none;padding-right:0}
  .yo-am-figs .yo-fig:nth-child(3){padding-left:0}
  .yo-mt-row,.yo-mt-q-row,.yo-mt-head-row{
    grid-template-columns:96px 1fr 1fr 1fr 1fr 92px 28px;
  }
  .yo-mt-c-cnt{display:none}
}
@media (max-width:1023px){
  .yo-secondary{grid-template-columns:repeat(2,1fr)}
  .yo-secondary .yo-sec-card:nth-child(3){grid-column:span 2}
}
@media (max-width:920px){
  /* .yo-page padding handled by .report-page parent (16px 12px 72px @ <=768px) */
  .yo-yb-chart{height:140px;gap:6px}
  .yo-yb-bar{max-width:42px}
  .yo-month-grid{grid-template-columns:repeat(2,1fr)}
  .yo-active-month{grid-template-columns:1fr;padding:24px 20px;gap:20px}
  .yo-secondary{grid-template-columns:1fr}
  .yo-secondary .yo-sec-card:nth-child(3){grid-column:auto}
  .yo-mt-row,.yo-mt-q-row,.yo-mt-head-row{
    grid-template-columns:88px 1fr 1fr 1fr 80px 24px;
    padding-left:18px;padding-right:18px;
  }
  .yo-mt-c-ust{display:none}
  .yo-mt-drill-inner{margin-left:0}
}
@media (max-width:768px){
  /* Header verdichten: Vorjahr-Toggle + Jahresaktionen-Trigger bleiben
     auf derselben touch-freundlichen Höhe, damit sie mobil gleich wirken. */
  .yo-toggle{height:44px;padding:0 12px 0 10px;font-size:12px;gap:8px}
  .yo-ja-menu .yo-ja-trigger{height:44px;padding:0 11px;font-size:12px}
}

@media (max-width:640px){
  /* .yo-page padding handled by .report-page parent */
  .yo-month-grid{grid-template-columns:1fr;gap:10px}
  .yo-month{min-height:auto;padding:16px 16px 14px}
  .yo-am-figs{grid-template-columns:1fr}
  .yo-fig{border-right:none;padding:6px 0;border-bottom:1px solid var(--border)}
  .yo-fig:last-child{border-bottom:none}
  .yo-am-actions .yo-btn-acc,.yo-am-actions .yo-btn-ghost{flex:1;min-width:140px;justify-content:center}
  .yo-yb-chart{height:120px}
  .yo-yb-bar{max-width:32px}
  .yo-yb-mlabel{font-size:9px}
  .yo-yb-legend{gap:10px;font-size:10px}
  .yo-ustva-head{flex-direction:column;align-items:stretch}
  .yo-ustva-periods{width:100%}
  .yo-ustva-period{flex:1}
  .yo-ustva-select-wrap{width:100%}
  .yo-ustva-row{
    grid-template-columns:minmax(0,1fr) minmax(58px,max-content) 30px;
    column-gap:10px;
  }
  .yo-ustva-copy{
    grid-column:auto;
    width:30px;
  }
  .yo-mt-row,.yo-mt-q-row,.yo-mt-head-row{
    grid-template-columns:80px 1fr 1fr 70px 24px;
    padding-left:14px;padding-right:14px;gap:8px;
  }
  /* Quartal-Row Mobile-Override (User-Feedback 2026-05-11): Q-Label
     („Q1 · Jan–Mär" — uppercase + letter-spacing 0.14em) ist breiter als die
     80px-Monatsspalte und ragte mit `white-space: nowrap` in die Ausgaben-Spalte
     hinein → Zahlen wurden überschrieben.
     Fix: Q-Row hat eigenes 3-Spalten-Grid (auto-Label + 2× 1fr für Ausgaben/Saldo);
     die in Q-Rows ohnehin leeren Spalten 7+8 (Status, Chev) sind hier ausgeblendet.
     `minmax(0,1fr)` verhindert dass die Number-Cells überlaufen. */
  .yo-mt-q-row{
    grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);
    gap:10px;
  }
  .yo-mt-q-row > span:nth-child(7),
  .yo-mt-q-row > span:nth-child(8){display:none;}
  .yo-mt-c-in{display:none}
  .yo-tooltip{max-width:200px;padding:10px 12px}
  .yo-mt-drill{padding:6px 14px 14px 14px}
  .yo-tx{grid-template-columns:50px 1fr auto}
}
@media (max-width:389px){
  .yo-btn,.yo-toggle{height:44px;padding:0 10px;font-size:12px}
  .yo-toggle-lbl{display:none}
  .yo-mt-row,.yo-mt-q-row,.yo-mt-head-row{
    grid-template-columns:70px 1fr 70px 24px;
    gap:6px;font-size:12px;
  }
  /* Q-Row Override (Mini-Phone): wie im 640er-Block, eigenes 3-Col-Grid mit
     auto-Label, sonst überschreibt der allgemeine .yo-mt-row-Selektor oben
     unsere Q-spezifische Geometrie. */
  .yo-mt-q-row{
    grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);
    gap:8px;
  }
  .yo-mt-c-cnt,.yo-mt-c-in,.yo-mt-c-ust{display:none}
  .yo-mt-row:not(.yo-mt-q-row) > span:nth-child(4){display:none}  /* hide Ausgaben on tiny */
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .yo-month,.yo-yb-bar,.yo-bal-fill,.yo-cat-fill,.yo-ring-bar{transition:none}
  .yo-mt-drill{animation:none}
}

/* Animations */
@media (prefers-reduced-motion:no-preference){
  .yo-month{animation:yo-rise .45s cubic-bezier(.2,.7,.2,1) backwards}
  .yo-month:nth-child(1){animation-delay:.02s}.yo-month:nth-child(2){animation-delay:.05s}
  .yo-month:nth-child(3){animation-delay:.08s}.yo-month:nth-child(4){animation-delay:.11s}
  .yo-month:nth-child(5){animation-delay:.14s}.yo-month:nth-child(6){animation-delay:.17s}
  .yo-month:nth-child(7){animation-delay:.20s}.yo-month:nth-child(8){animation-delay:.23s}
  .yo-month:nth-child(9){animation-delay:.26s}.yo-month:nth-child(10){animation-delay:.29s}
  .yo-month:nth-child(11){animation-delay:.32s}.yo-month:nth-child(12){animation-delay:.35s}
  .yo-yb-col{animation:yo-rise-bar .55s cubic-bezier(.2,.7,.2,1) backwards}
  .yo-yb-col:nth-child(1){animation-delay:.04s}.yo-yb-col:nth-child(2){animation-delay:.08s}
  .yo-yb-col:nth-child(3){animation-delay:.12s}.yo-yb-col:nth-child(4){animation-delay:.16s}
  .yo-yb-col:nth-child(5){animation-delay:.20s}.yo-yb-col:nth-child(6){animation-delay:.24s}
  .yo-yb-col:nth-child(7){animation-delay:.28s}.yo-yb-col:nth-child(8){animation-delay:.32s}
  .yo-yb-col:nth-child(9){animation-delay:.36s}.yo-yb-col:nth-child(10){animation-delay:.40s}
  .yo-yb-col:nth-child(11){animation-delay:.44s}.yo-yb-col:nth-child(12){animation-delay:.48s}
}
@keyframes yo-rise-bar{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

/* ═══════════════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES
   ───────────────────────────────────────────────────────────────────────
   Die meisten Komponenten nutzen var(--green/--red/--accent/--text*) und
   flippen automatisch via body.light{}-Tokens (_10-shell.css:1232ff). Hier
   nur Spezifika überschreiben, die von Token-Swaps nicht abgedeckt werden:
   Yearband-/Mt-Background-Gradients, Glas-Tooltip, Hover-Tints.
   (Hero läuft jetzt über _26-dashboard-hero.css, eigene Token-Logik.) */
body.light .yo-yearband,
body.light .yo-mt-table{
  background:linear-gradient(180deg,rgba(0,0,0,.012),rgba(0,0,0,0)),var(--card);
}
body.light .yo-yb-col:hover{background:rgba(0,0,0,.025)}
body.light .yo-yb-col.is-active,
body.light .yo-month.is-active{background-color:rgba(232,184,75,.08)}
body.light .yo-mt-month-row:hover,body.light .yo-mt-toggle:hover{background:rgba(0,0,0,.025)}
body.light .yo-mt-month-row.is-open{background:rgba(232,184,75,.06)}
body.light .yo-mt-month-row.is-active{background:rgba(232,184,75,.08)}
body.light .yo-mt-head-row{background:rgba(0,0,0,.018)}
body.light .yo-mt-q-row{
  background:linear-gradient(180deg,rgba(232,184,75,.10) 0%,rgba(232,184,75,.03) 100%);
  border-top-color:rgba(232,184,75,.32);
}
body.light .yo-mt-q-label{color:var(--accent2)}
body.light .yo-month{
  background:linear-gradient(180deg,rgba(0,0,0,.012),rgba(0,0,0,0)),var(--card);
}
body.light .yo-month:hover{background:var(--card2)}
body.light .yo-month.is-future,body.light .yo-month.is-empty{
  background:var(--card);border-color:rgba(0,0,0,.10);
}
body.light .yo-tooltip{
  background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid rgba(0,0,0,.10);
  box-shadow:0 18px 44px rgba(0,0,0,.12),inset 0 1px 0 rgba(var(--surface-solid-rgba-base),.6);
}
body.light .yo-tt-foot{border-top-color:rgba(0,0,0,.10)}
/* Vorjahres-Linie nutzt var(--blue) — flippt automatisch im Light-Mode.
   Light-Mode ggf. Opacity bisschen anheben weil --blue heller wirkt. */
body.light .yo-yb-prev-line{opacity:.65}
body.light .yo-bal-track,body.light .yo-cat-bar{background:rgba(0,0,0,.05)}
body.light .yo-mt-pill{background:rgba(0,0,0,.03)}
body.light .yo-tx{border-bottom-color:rgba(0,0,0,.04)}
body.light .yo-tx:hover{background:rgba(0,0,0,.02)}
body.light .yo-mt-drill-inner{background:var(--bg2);border-color:var(--border)}
body.light .yo-mt-drill-foot{border-top-color:rgba(0,0,0,.06)}
body.light .yo-todo-list{background:var(--bg2);border-color:var(--border)}
body.light .yo-lg-prev-mark{opacity:.7}
body.light .yo-lg-dot.yo-dot-future,
body.light .yo-dot-future{border-color:rgba(0,0,0,.35)}
body.light .yo-dot-empty{background:rgba(0,0,0,.30)}
body.light .yo-ring-track{stroke:rgba(0,0,0,.12)}
body.light .yo-active-month{
  background:linear-gradient(180deg,rgba(232,184,75,.05),rgba(232,184,75,0) 60%),var(--card);
}

/* Jahresausblick / Finanz-Navi */

.yf-page { display: flex; flex-direction: column; gap: var(--space-2xl); min-width: 0; }
.yf-cockpit-hero .dash-hero { margin-bottom: 0; }
/* Hauptlayout: Hauptspalte minmax(0,…) verhindert horizontalen Overflow durch
   lange Inhalte; rechte Empfehlungsspalte mit echter Max-Breite, damit die zwei
   großen Beträge nebeneinander Platz haben (sonst bricht „€" in eine 2. Zeile).
   Stack-Verhalten lebt im Media-/Container-Stack weiter unten. */
.yf-cockpit-body { grid-template-columns: minmax(0, 1.6fr) minmax(0, 420px); gap: var(--space-2xl); }
.yf-cockpit-headline { max-width: 12ch; text-wrap: balance; }

.yf-hero-modules {
  display: grid;
  /* auto-fit + minmax(0,…): solange beide Module ≥ ihrer Mindestbreite passen,
     stehen sie nebeneinander; sonst fallen sie automatisch untereinander —
     dann bekommt die 90-Tage-Timeline die volle Breite und alle 4 Nodes
     passen horizontal, statt in einer schmalen Spalte zu stapeln. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: var(--space-lg);
  align-items: start;
}
.yf-hero-module,
.yf-surface,
.yf-radar-card,
.yf-mini-score,
.yf-action-card,
.yf-empty-card,
.yf-signal-row {
  border: 1px solid rgba(var(--surface-rgba-base), .08);
  border-radius: var(--radius-xl);
  background: var(--bg2);
}
.yf-hero-module,
.yf-surface { padding: clamp(18px, 2vw, 24px); }
.yf-hero-module-top,
.yf-action-top,
.yf-action-footer,
.yf-edit,
.yf-empty-state-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.yf-hero-module-top,
.yf-action-top,
.yf-action-footer { justify-content: space-between; }
.yf-module-kicker,
.yf-section-kicker,
.yf-money-kicker,
.yf-radar-kicker,
.yf-empty-state-kicker,
.yf-action-kicker,
.yf-rail-scale-label,
.yf-sim-stat-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.yf-module-title,
.yf-section-title,
.yf-radar-title,
.yf-empty-state-title {
  margin: 0;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: var(--fw-heavy);
  color: var(--text);
}
.yf-module-title { font-size: var(--fs-lg); }
.yf-section-sub,
.yf-rail-focus span,
.yf-empty-state-copy,
.yf-empty-state-trust,
.yf-radar-copy,
.yf-action-copy,
.yf-action-block-copy,
.yf-empty-card p,
.yf-signal-reason {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text2);
}

/* Kontostand-Aufteilung (formerly Money Runway).
 * Single rounded bar container clips internal segments (clipPath in SVG),
 * legend explains the three colors, calculation list builds the result row
 * by row, accordion answers "Wie wird das berechnet?". No truncated values
 * — every euro amount renders in full with cents. */
.yf-runway-shell {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.yf-runway-bar-svg {
  width: 100%;
  height: 28px;
  display: block;
}
.yf-runway-track { fill: rgba(var(--surface-rgba-base), .08); }
.yf-runway-seg--safe { fill: rgba(80, 204, 171, .9); }
.yf-runway-seg--covered { fill: rgba(232, 184, 75, .85); }
.yf-runway-seg--gap { fill: rgba(255, 116, 102, .9); }

.yf-runway-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.yf-runway-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--text2);
}
.yf-runway-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.yf-runway-legend-dot--safe { background: rgba(80, 204, 171, 1); }
.yf-runway-legend-dot--covered { background: rgba(232, 184, 75, 1); }
.yf-runway-legend-dot--gap { background: rgba(255, 116, 102, 1); }
.yf-runway-legend-label { color: var(--text2); }
.yf-runway-legend-value {
  color: var(--text);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.yf-runway-calc {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  margin: 0;
  border: 1px solid rgba(var(--surface-rgba-base), .08);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.yf-calc-row {
  display: contents;
}
.yf-calc-row > dt,
.yf-calc-row > dd {
  padding: 10px 14px;
  margin: 0;
  border-bottom: 1px solid rgba(var(--surface-rgba-base), .05);
}
.yf-calc-row > dt { color: var(--text2); font-size: var(--fs-sm); }
.yf-calc-row > dd {
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
}
.yf-calc-row--minus > dd { color: var(--text2); }
.yf-calc-row--total > dt,
.yf-calc-row--total > dd {
  border-bottom: 0;
  border-top: 1px solid rgba(var(--surface-rgba-base), .12);
  padding-top: 14px;
  padding-bottom: 14px;
  font-size: var(--fs-lg);
}
.yf-calc-row--total > dt { color: var(--text); font-weight: var(--fw-bold); }
.yf-calc-row--total > dd { color: var(--text); font-weight: var(--fw-heavy); }

.yf-runway-info {
  border-top: 1px dashed rgba(var(--surface-rgba-base), .08);
  padding-top: var(--space-md);
}
.yf-runway-info-summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--text2);
  font-weight: var(--fw-semibold);
}
.yf-runway-info-summary::-webkit-details-marker { display: none; }
.yf-runway-info-chev {
  transition: transform 180ms ease;
  color: var(--text3);
  display: inline-block;
}
.yf-runway-info[open] .yf-runway-info-chev { transform: rotate(180deg); }
.yf-runway-info-copy {
  margin: 8px 0 0;
  font-size: var(--fs-sm);
  color: var(--text2);
  line-height: var(--lh-relaxed);
}

.yf-module-sub {
  margin: 4px 0 0;
  font-size: var(--fs-sm);
  color: var(--text2);
}

.yf-hero-rail {
  position: relative;
  padding: 18px 18px 16px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(var(--surface-rgba-base), .06);
  background: rgba(var(--surface-rgba-base), .02);
  /* Container-Query-Kontext: das Rail-Grid (4 Nodes) richtet sich nach der
     tatsächlichen Card-Breite, nicht nach dem Viewport. So „läuft" die
     Timeline nie aus dem Kasten, egal wie schmal die Hero-Spalte gerade ist. */
  container-type: inline-size;
  container-name: yf-rail;
}
.yf-hero-rail-line {
  position: absolute;
  left: 26px;
  right: 26px;
  top: 50px;
  height: 1px;
  background: rgba(var(--surface-rgba-base), .12);
}
.yf-hero-rail-grid {
  position: relative;
  z-index: 1;
  display: grid;
  /* B15 (2026-05-28): 4 gleich hohe Nodes. minmax(0,1fr) (nicht 160px) lässt
     die Spalten in schmalen Containern schrumpfen statt zu overflowen — die
     Container-Queries unten staffeln 4→2→1, sobald es wirklich eng wird. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 16px;
}
/* Rail-Node-Inhalt darf nie breiter werden als seine Spalte. */
.yf-rail-node { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.yf-rail-node-title,
.yf-rail-node-value { min-width: 0; overflow-wrap: anywhere; }
/* Container-gesteuerte Staffelung der 4 Rail-Nodes nach Card-Breite. */
@container yf-rail (max-width: 560px) {
  .yf-hero-rail-grid { grid-template-columns: 1fr 1fr; }
}
@container yf-rail (max-width: 280px) {
  .yf-hero-rail-grid { grid-template-columns: 1fr; }
}
.yf-rail-marker {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border2);
  background: rgba(var(--surface-rgba-base), .06);
  box-shadow: 0 0 0 6px rgba(var(--surface-rgba-base), .03);
}
.yf-rail-node--good .yf-rail-marker { border-color: var(--tone-good-border); background: var(--green); }
.yf-rail-node--warn .yf-rail-marker { border-color: var(--tone-warn-border); background: var(--accent); }
.yf-rail-node--poor .yf-rail-marker { border-color: var(--tone-poor-border); background: var(--red); box-shadow: 0 0 0 8px rgba(255, 116, 102, .08); }
.yf-rail-node-title { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--text); }
.yf-rail-node-value { font-size: var(--fs-sm); color: var(--text2); }
.yf-rail-focus {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--surface-rgba-base), .08);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.yf-rail-focus strong { color: var(--text); font-size: var(--fs-base); }
.yf-rail-node--setup .yf-rail-node-value { max-width: 20ch; }

.yf-radar-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
  /* Container-Kontext für die Score-Karten-Reihe (.yf-mini-diagnosis-grid),
     die ein direktes Kind des Panels ist. width:100% ist Pflicht: sobald das
     Panel im gestapelten Hero (column-flex, align-items:start) ein direktes
     Flex-Item wird, würde ein inline-size-Container ohne definierte Breite auf
     0 kollabieren. */
  width: 100%;
  container-type: inline-size;
  container-name: yf-radar;
}
.yf-radar-card { padding: 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* Container-Kontext für die Betragszeile: bricht nach der echten Karten-Breite
   um, nicht nach dem Viewport. */
.yf-radar-card,
.yf-action-card { container-type: inline-size; }
.yf-radar-card--action {
  border-color: rgba(232, 184, 75, .25);
  background: var(--bg2);
}
.yf-radar-card--clear,
.yf-empty-card--clear {
  border-color: rgba(80, 204, 171, .25);
  background: var(--bg2);
}
.yf-radar-card--clear .yf-radar-kicker,
.yf-empty-card--clear .yf-action-title { color: var(--tone-good-fg); }
.yf-radar-delta,
.yf-delta-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(var(--surface-rgba-base), .04);
}
.yf-radar-delta strong,
.yf-delta-hero strong {
  /* clamp() skaliert nach Containerbreite (cqi), nicht Viewport — der Betrag
     schrumpft, wenn die Karte schmal wird, statt umzubrechen. nowrap +
     min-width:0 halten „34.771,22 €" als eine Einheit zusammen, das Euro-
     Zeichen kann nie allein in eine 2. Zeile rutschen. */
  font-size: clamp(15px, 4cqi, 28px);
  font-weight: var(--fw-heavy);
  color: var(--text);
  min-width: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.yf-radar-delta span,
.yf-delta-hero span,
.yf-sim-stat-arrow {
  font-size: clamp(16px, 2.5cqi, 24px);
  color: var(--accent);
  font-weight: 700;
  text-align: center;
}
.yf-radar-delta em,
.yf-delta-hero em {
  grid-column: 1 / -1;
  font-style: normal;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text3);
}
/* Sehr schmale Karte: zwei Beträge nicht nebeneinander quetschen, sondern
   als kompakter Vertikal-Vergleich Betrag → Pfeil → Zielbetrag stapeln. */
@container (max-width: 240px) {
  .yf-radar-delta,
  .yf-delta-hero {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 4px;
  }
  .yf-radar-delta span,
  .yf-delta-hero span { transform: rotate(90deg); justify-self: start; }
}
.yf-mini-diagnosis-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
/* Score-Karten brechen nach Panel-Breite um (3 → 2 → 1), nie gequetscht. */
@container yf-radar (max-width: 420px) {
  .yf-mini-diagnosis-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container yf-radar (max-width: 240px) {
  .yf-mini-diagnosis-grid { grid-template-columns: 1fr; }
}
.yf-mini-score { padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.yf-mini-score strong { font-size: var(--fs-lg); color: var(--text); }
.yf-mini-score em { font-style: normal; color: var(--text2); font-size: var(--fs-sm); }
.yf-mini-score--good { border-color: var(--tone-good-border); }
.yf-mini-score--warn { border-color: var(--tone-warn-border); }
.yf-mini-score--poor { border-color: var(--tone-poor-border); }

.yf-empty-state-card { display: flex; flex-direction: column; gap: 12px; }
.yf-empty-state-title { max-width: 14ch; text-wrap: balance; }
.yf-empty-state-trust {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--tone-warn-border);
  background: var(--tone-warn-bg);
  color: var(--tone-warn-text);
}
.yf-cockpit-hero--setup .yf-cockpit-body { grid-template-columns: minmax(0, 1.45fr) minmax(260px, .82fr); }
.yf-setup-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.yf-setup-check-item { display: flex; gap: 10px; color: var(--text2); }
.yf-setup-check-item.is-done { color: var(--text); }
.yf-setup-check-mark {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: rgba(var(--surface-rgba-base), .05);
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}
.yf-setup-check-item.is-done .yf-setup-check-mark {
  border-color: var(--tone-good-border);
  background: var(--tone-good-bg);
  color: var(--tone-good-fg);
}
.yf-radar-chip-row,
.yf-action-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.yf-micro-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: rgba(var(--surface-rgba-base), .04);
  padding: 6px 10px;
}
.yf-micro-pill--good {
  border-color: var(--tone-good-border);
  background: var(--tone-good-bg);
  color: var(--tone-good-fg);
}
.yf-micro-pill--warn {
  border-color: var(--tone-warn-border);
  background: var(--tone-warn-bg);
  color: var(--tone-warn-text);
}

.yf-surface { display: flex; flex-direction: column; gap: var(--space-lg); }
.yf-section-top { display: flex; flex-direction: column; gap: var(--space-xs); }
.yf-timeline-grid,
.yf-action-grid,
.yf-signal-list { display: grid; gap: var(--space-md); }
/* Signal-Liste und Aktions-Grid bekommen mehr vertikalen Rhythmus, damit die
   Zeilen/Karten ruhiger atmen statt zu kleben (Token-Skala, kein Einzelwert). */
.yf-action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-lg); }
.yf-signal-list { grid-template-columns: 1fr; gap: var(--space-lg); }
.yf-signal-row {
  padding: var(--space-md) var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
}
/* Signal-Zeilen mit Ziel-Aktion sind echte <button>: Default-Button-Optik
   zuruecksetzen, damit sie wie die bisherige Karte aussehen. */
button.yf-signal-row {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
button.yf-signal-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(var(--surface-rgba-base), .08);
}
button.yf-signal-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  button.yf-signal-row { transition: none; }
  button.yf-signal-row:hover { transform: none; }
}
.yf-signal-title { flex: 1 1 240px; }
.yf-signal-row--diagnose { border-color: var(--tone-warn-border); background: linear-gradient(180deg, rgba(232, 184, 75, .08), rgba(var(--surface-rgba-base), .03)), var(--bg2); }
.yf-signal-row--risk { border-color: var(--tone-poor-border); background: linear-gradient(180deg, rgba(255, 116, 102, .08), rgba(var(--surface-rgba-base), .03)), var(--bg2); }
.yf-signal-row--stable { border-color: var(--tone-good-border); background: linear-gradient(180deg, rgba(80, 204, 171, .08), rgba(var(--surface-rgba-base), .03)), var(--bg2); }
.yf-signal-row--closing { border-color: rgba(139, 92, 246, .55); background: linear-gradient(180deg, rgba(139, 92, 246, .08), rgba(var(--surface-rgba-base), .03)), var(--bg2); }
.yf-signal-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(var(--surface-rgba-base), .25);
  box-shadow: 0 0 0 3px rgba(var(--surface-rgba-base), .06);
  flex: 0 0 auto;
}
.yf-signal-row--diagnose .yf-signal-dot { background: rgba(232, 184, 75, 1); box-shadow: 0 0 0 3px rgba(232, 184, 75, .18); }
.yf-signal-row--risk .yf-signal-dot { background: rgba(255, 116, 102, 1); box-shadow: 0 0 0 3px rgba(255, 116, 102, .18); }
.yf-signal-row--stable .yf-signal-dot { background: rgba(80, 204, 171, 1); box-shadow: 0 0 0 3px rgba(80, 204, 171, .18); }
.yf-signal-row--closing .yf-signal-dot { background: rgba(139, 92, 246, 1); box-shadow: 0 0 0 3px rgba(139, 92, 246, .18); }
.yf-signal-badge {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(var(--surface-rgba-base), .06);
  color: var(--text2);
  white-space: nowrap;
}
.yf-signal-row--diagnose .yf-signal-badge { background: rgba(232, 184, 75, .14); color: rgba(232, 184, 75, 1); }
.yf-signal-row--risk .yf-signal-badge { background: rgba(255, 116, 102, .14); color: rgba(255, 116, 102, 1); }
.yf-signal-row--stable .yf-signal-badge { background: rgba(80, 204, 171, .14); color: rgba(80, 204, 171, 1); }
.yf-signal-row--closing .yf-signal-badge { background: rgba(139, 92, 246, .14); color: rgba(139, 92, 246, 1); }
.yf-signal-title,
.yf-action-title,
.yf-empty-card h3 { margin: 0; font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--text); }
.yf-signal-impact { color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap; }
.yf-signal-action { color: var(--text2); font-size: var(--fs-sm); white-space: nowrap; }

.yf-action-card,
.yf-empty-card { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.yf-action-card--good { border-color: var(--tone-good-border); }
.yf-action-card--warn { border-color: var(--tone-warn-border); }
.yf-action-card--poor { border-color: var(--tone-poor-border); }
.yf-action-card.is-active,
.yf-radar-card--action.is-active {
  border-color: rgba(232, 184, 75, .55);
  box-shadow: 0 0 0 1px rgba(232, 184, 75, .25) inset;
}
.yf-action-sim {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px dashed var(--border);
  animation: yf-sim-fade-in 220ms ease-out;
}
.yf-action-sim-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.yf-sim-stat {
  display: grid;
  grid-template-columns: minmax(96px, auto) minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(var(--surface-rgba-base), .04);
  padding: 10px 14px;
}
.yf-sim-stat strong { font-size: var(--fs-base); color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.yf-sim-stat-label { color: var(--text2); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .05em; text-transform: uppercase; }
.yf-sim-stat-arrow { color: var(--accent); font-weight: 700; text-align: center; }
.yf-sim-stat--same { background: rgba(80, 204, 171, .08); border-color: var(--tone-good-border); }
.yf-sim-stat--same strong { color: var(--text2); }
.yf-sim-stat-note {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 2px;
  font-style: normal;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tone-good-fg);
  white-space: nowrap;
}
.yf-action-sim-note {
  font-size: var(--fs-sm);
  color: var(--text2);
  line-height: var(--lh-relaxed);
  margin: 4px 0 0;
}
@keyframes yf-sim-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .yf-action-sim { animation: none; }
}

/* --- Aktionskarte: vier gelabelte Bloecke (Problem / Handlung / Werte /
   Simulation). Gliederung NUR ueber Abstand + Label + feine Trenner, keine
   nested Cards, keine neue Farbdramaturgie. Karte ist column-flex (stapelt). */
.yf-action-block { display: flex; flex-direction: column; gap: var(--space-xs); }
/* Feiner Trenner ab dem 2. Block statt verschachtelter Karten. */
.yf-action-block + .yf-action-block {
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-alpha);
}
/* Erklaerendes Sekundaerlabel: --text2 (lesbarer Kontrast), nicht --text3. */
.yf-action-block-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text2);
}
.yf-delta-hero-label { font-size: var(--fs-sm); color: var(--text2); }

/* --- Lokale Simulation: Eingabefeld, Reset, Badge, Werte-Block. */
.yf-sim-input-block { display: flex; flex-direction: column; gap: var(--space-sm); }
/* Dezentes, nicht alarmierendes Badge (gedaempft auf --text2/--bg2). */
.yf-sim-badge {
  align-self: flex-start;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-pill);
  background: var(--bg2);
  border: 1px solid var(--border-alpha);
  color: var(--text2);
}
.yf-sim-input-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-size: var(--fs-sm);
  color: var(--text2);
}
.yf-sim-input {
  border: 1px solid var(--border2);
  background: var(--bg);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-body);
  width: 100%;
  font-variant-numeric: tabular-nums;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.yf-sim-input:focus-visible,
.yf-sim-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgba-base), .18);
}
/* Erkennbarer, aber dezenter Invalid-Zustand (rot getoent, nicht schreiend). */
.yf-sim-input.is-invalid {
  border-color: var(--tone-poor-border);
  background: var(--tone-poor-bg);
}
.yf-sim-input.is-invalid:focus-visible,
.yf-sim-input.is-invalid:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red3);
}
.yf-sim-reset { align-self: flex-start; }
.yf-sim-reset:disabled,
.yf-sim-reset[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}
.yf-sim-values { display: flex; flex-direction: column; gap: var(--space-sm); }
@media (prefers-reduced-motion: reduce) {
  .yf-sim-input { transition: none; }
}

/* Signal-Link Scroll-Offset: Ziel-Aktionskarte nicht unter der fixen Shell-v2-
   Topbar verstecken. Muster wie .context-target (Topbar-Hoehe + Luft). */
[id^="yf-action-"] {
  scroll-margin-top: calc(var(--shell-topbar-h, 56px) + var(--space-lg));
}

.yf-details {
  border-top: 1px solid rgba(var(--surface-rgba-base), .08);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
}
.yf-details-trigger {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.yf-details-trigger::-webkit-details-marker { display: none; }
.yf-details-chev { transition: transform 180ms ease; color: var(--text3); }
.yf-details[open] .yf-details-chev { transform: rotate(180deg); }
.yf-details-title { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--text); }
.yf-details-cap { color: var(--text3); font-size: var(--fs-sm); }
.yf-details-body { display: flex; flex-direction: column; gap: var(--space-md); padding-top: var(--space-lg); }
.yf-kv { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.yf-kv-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
  align-items: baseline;
}
.yf-kv-row dt,
.yf-kv-row dd { margin: 0; }
.yf-kv-row dt { color: var(--text2); }
.yf-kv-row dd { color: var(--text); text-align: right; }
.yf-empty,
.yf-tip,
.yf-edit-msg { color: var(--text3); font-size: var(--fs-base); }
.yf-tip { cursor: help; margin-left: 4px; }
.yf-edit {
  align-items: flex-end;
  border-top: 1px dashed var(--border);
  padding-top: var(--space-md);
  margin-top: 4px;
}
.yf-edit-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-base);
  color: var(--text2);
  flex: 1 1 220px;
}
.yf-edit-input {
  border: 1px solid var(--border2);
  background: var(--bg);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: var(--fs-body);
  width: 100%;
  min-width: 180px;
}
.yf-edit-save {
  border: 1px solid var(--border2);
  background: var(--bg3);
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.yf-edit-save:hover { border-color: var(--accent2); }
.yf-setup-balance-form { border-top: 0; padding-top: 0; margin-top: 0; align-items: stretch; }

@media (prefers-reduced-motion: reduce) {
  .yf-details-chev,
  .yf-action-card { transition: none; }
}

@media (max-width: 1160px) {
  .yf-cockpit-body,
  .yf-hero-modules,
  .yf-action-grid { grid-template-columns: 1fr; }
  /* .yf-mini-diagnosis-grid wird container-gesteuert (s. @container yf-radar);
     keine viewport-Regel mehr, damit sie nach der echten Panel-Breite bricht. */
  .yf-runway-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* B15 (2026-05-28): zwischen Desktop (4 Spalten) und Mobile-Stack (1 Spalte)
   eine 2×2-Stufe einziehen. Ohne diesen Zwischenschritt würden auf engen
   Tablets/Portrait die 4 Rail-Nodes ab ~900px brutal auf eine Spalte
   springen, obwohl bequem noch 2 nebeneinander passen. */
@media (max-width: 900px) {
  .yf-hero-rail-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .yf-cockpit-headline { max-width: 100%; }
  /* Rail wird mobil zur vertikalen Timeline (Linie + absolute Marker, s.u.) —
     das ist ein eigenständiges Layout und bleibt hier 1-spaltig.
     .yf-mini-diagnosis-grid und .yf-radar-delta/.yf-delta-hero werden NICHT
     mehr hier zwangsgestackt: ihre Container-Queries (nach Karten-/Panel-Breite)
     regeln das granular und stacken die Beträge erst, wenn die Karte wirklich
     zu schmal ist — auf einem 768er-Tablet bleiben sie so lesbar nebeneinander. */
  .yf-hero-rail-grid,
  .yf-runway-metrics,
  .yf-action-grid { grid-template-columns: 1fr; }
  /* B15: bei 1-Spalten-Stack die auto-row-Parität auflösen, sonst werden
     alle Rail-Nodes auf die Höhe des größten Items aufgeblasen (unnötiger
     Whitespace). Im 2×2- und 4-Spalten-Layout bleibt 1fr in Kraft. */
  .yf-hero-rail-grid { grid-auto-rows: auto; }
  .yf-sim-stat { grid-template-columns: auto 1fr; gap: 4px 10px; }
  .yf-sim-stat strong:nth-of-type(2) { grid-column: 2; }
  .yf-sim-stat-arrow { display: none; }
  .yf-hero-module-top,
  .yf-action-top,
  .yf-action-footer,
  .yf-edit,
  .yf-empty-state-actions,
  .yf-details-trigger { align-items: flex-start; }
  .yf-hero-rail-line {
    left: 28px;
    right: auto;
    top: 48px;
    bottom: 24px;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, rgba(232, 184, 75, .18), rgba(232, 184, 75, .7), rgba(232, 184, 75, .18));
  }
  .yf-hero-rail-grid { gap: var(--space-lg); }
  .yf-rail-node { padding-left: 30px; position: relative; }
  .yf-rail-marker { position: absolute; left: 0; top: 22px; }
  .yf-kv-row { grid-template-columns: 1fr; }
  .yf-kv-row dd { text-align: left; }
}

/* ============================================================================
   _26-finanzcheck.css — 90-Tage-Finanzcheck V2 (Render-Schicht PR3)
   ----------------------------------------------------------------------------
   Styles fuer foRenderFinancialOutlook (public/js/financial-outlook-view.js)
   + foHero + foHeroSnapshot + foDrawer. Design-DNA 1:1 aus dem freigegebenen
   V3-Mockup (docs/year-outlook-v2/mockup/index.html): kompakter Hero
   (Betrag + Finanzklarheit-Karte + „Worauf basiert"-Aufklapper), rechte Spalte
   SPIELRAUM-TREND-Snapshot (Euro-Sparkline statt Score-Ring), Kontostand-
   Aufteilung, statische 90-Tage-Leiste, Facts-Strip, Drawer.

   Token-Strategie (CLAUDE.md): die App hat in _00-tokens.css bereits
   --accent, --green, --red, --blue, --font-sans/--font-mono und --radius-NN.
   Die V5-spezifische Palette
   (--fo-panel/--fo-line/--fo-ink/--fo-amber/--fo-orange/--fo-gray …)
   existiert dort NICHT — sie wird hier SCOPED unter .fo-page bzw. den Drawer-
   Geschwistern definiert (KEIN Ueberschreiben globaler Tokens). Default ist
   das App-Dark-Theme; html[data-theme="light"] liefert die helle Variante.
   Alle Klassen sind fo-praefixed → keine Kollision mit V1 (.yf-).
   ============================================================================ */

/* ---------- V5-Palette scoped (Dark = Default, wie App-:root) -------------- */
/* stylelint-disable color-no-hex -- Token-Definitionen: die V5-Palette hat in
   _00-tokens.css keine Entsprechung und wird hier (wie _40f-steuergesundheit-
   v5-sections.css) scoped als --fo-* gepinnt. Nur dieser Token-Block; die
   Regeln darunter nutzen ausschliesslich var(--fo-*). */
/* Der Detail-Drawer nutzt jetzt die geteilte App-Komponente .detail-sheet
   (detail-sheet.js, wie die Steuergesundheit). Damit ein eventuell injizierter
   fo-Inhalt (Planungs-Editor-Formular) die V5-Palette behält, definieren wir
   die --fo-*-Tokens zusätzlich auf .detail-sheet (statt auf das entfernte
   .fo-overlay/.fo-drawer-Gerüst). */
.fo-page,
.detail-sheet {
  --fo-accent: var(--accent, #e8b84b);
  --fo-accent2: var(--accent2, #c99830);
  --fo-accent-ink: #0c0f1a;
  --fo-accent-deep: var(--accent-deep, #9b6d18);
  --fo-r-hero: 22px;
  --fo-r-xl: 18px;
  --fo-r-md: 10px;
  --fo-r-sm: 6px;
  --fo-r-pill: 999px;

  --fo-panel: #131722;
  --fo-panel2: #1a2032;
  --fo-line: #2a3354;
  --fo-line-strong: #3a4570;
  --fo-ink: #e8eaf2;
  --fo-text: #e8eaf2;
  --fo-text2: #8b93b5;
  --fo-muted: #7580a5;
  --fo-green: var(--green, #34d399);
  --fo-green-soft: rgba(52, 211, 153, .12);
  --fo-green-line: rgba(52, 211, 153, .25);
  --fo-red: var(--red, #f87171);
  --fo-red-soft: rgba(248, 113, 113, .12);
  --fo-red-line: rgba(248, 113, 113, .30);
  --fo-amber: #f0cf77;
  --fo-amber-soft: rgba(232, 184, 75, .10);
  --fo-amber-line: rgba(232, 184, 75, .28);
  --fo-blue: var(--blue, #60a5fa);
  --fo-blue-soft: rgba(123, 176, 255, .10);
  --fo-blue-line: rgba(123, 176, 255, .24);
  --fo-gray: #8b93b5;
  --fo-gray-soft: rgba(139, 147, 181, .10);
  --fo-gray-line: rgba(139, 147, 181, .28);
  --fo-orange: #fb923c;
  --fo-orange-soft: rgba(251, 146, 60, .12);
  --fo-orange-line: rgba(251, 146, 60, .28);
  --fo-spark: #34d399;
  --fo-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  --fo-shadow2: 0 10px 30px rgba(0, 0, 0, .30);
}

/* Light-Override: alle drei App-Lightmode-Schalter abdecken. applyAppTheme()
   (public/js/theme-sync.js) setzt data-tx-theme und body.light, das HTML-Target
   setzt data-theme — nur html[data-theme="light"] allein greift im App-Kontext
   nicht (Bug: Jahresausblick blieb im Lightmode dunkel). Referenz-Parität zu
   body.light .dash-hero in _26-dashboard-hero.css. Werte bleiben unverändert. */
html[data-theme="light"] .fo-page,
html[data-theme="light"] .detail-sheet,
html[data-tx-theme="light"] .fo-page,
html[data-tx-theme="light"] .detail-sheet,
body.light .fo-page,
body.light .detail-sheet {
  --fo-panel: #ffffff;
  --fo-panel2: #f8fafc;
  --fo-line: #e2e8f0;
  --fo-line-strong: #cbd5e1;
  --fo-ink: #0c0f1a;
  --fo-text: #1e293b;
  --fo-text2: #56627d;
  --fo-muted: #7c87a0;
  --fo-green: #0a8f5a;
  --fo-green-soft: rgba(10, 143, 90, .08);
  --fo-green-line: rgba(10, 143, 90, .25);
  --fo-red: #c63a32;
  --fo-red-soft: rgba(198, 58, 50, .09);
  --fo-red-line: rgba(198, 58, 50, .30);
  --fo-amber: #9b6d18;
  --fo-amber-soft: rgba(232, 184, 75, .13);
  --fo-amber-line: rgba(201, 152, 48, .35);
  --fo-blue: #2563cf;
  --fo-blue-soft: rgba(37, 99, 207, .07);
  --fo-blue-line: rgba(37, 99, 207, .22);
  --fo-gray: #5d6a85;
  --fo-gray-soft: #eef2f7;
  --fo-gray-line: #d7dfe9;
  --fo-orange: #c2410c;
  --fo-orange-soft: rgba(194, 65, 12, .08);
  --fo-orange-line: rgba(194, 65, 12, .26);
  --fo-spark: #0a8f5a;
  --fo-shadow: 0 24px 60px rgba(12, 15, 26, .09);
  --fo-shadow2: 0 10px 30px rgba(12, 15, 26, .05);
}
/* stylelint-enable color-no-hex */

.fo-page {
  color: var(--fo-text);
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
}

/* ---------- Kontext-Pills (rechtsbuendig) ---------------------------------- */
.fo-pills-top {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 8px 0 4px;
}
.fo-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-pill);
  padding: 6px 12px;
  color: var(--fo-text);
  background: var(--fo-panel);
  font-weight: 620;
  font-size: 12.5px;
  box-shadow: var(--fo-shadow2);
}
.fo-pill .fo-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fo-green);
  box-shadow: 0 0 0 4px var(--fo-green-soft);
}

/* ---------- Hero (asymmetrisch, V5-DNA) ------------------------------------ */
.fo-hero {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1.62fr 1fr;
  gap: 0;
  background: linear-gradient(160deg, var(--fo-panel) 0%, var(--fo-panel2) 140%);
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-hero);
  box-shadow: var(--fo-shadow);
  position: relative;
  overflow: hidden;
}
.fo-hero-status {
  padding: 34px 18px 32px 34px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}
.fo-status-flag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--fo-r-pill);
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 750;
  letter-spacing: .02em;
  background: var(--fo-amber-soft);
  color: var(--fo-amber);
  border: 1px solid var(--fo-amber-line);
}
.fo-status-flag.sf-green {
  background: var(--fo-green-soft);
  color: var(--fo-green);
  border-color: var(--fo-green-line);
}
.fo-status-flag.sf-gray {
  background: var(--fo-gray-soft);
  color: var(--fo-gray);
  border-color: var(--fo-gray-line);
}
.fo-hero-h1 {
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.08;
  letter-spacing: -.035em;
  color: var(--fo-ink);
  margin: 15px 0 11px;
  font-weight: 760;
  max-width: 26ch;
}
/* V3 Hauptzahl (mono, gross) + statusgenaue Erlaeuterungszeile */
.fo-hero-amount {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: clamp(34px, 3.8vw, 52px);
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--fo-ink);
  margin: 14px 0 4px;
  font-weight: 700;
  /* Gleichmäßige Ziffernbreiten — sonst wirkt die große Mono-Zahl unruhig/
     "technisch" (User-Feedback). Mono bleibt (V5-/Steuergesundheit-Parität). */
  font-variant-numeric: tabular-nums;
}
.fo-hero-amount em {
  font-style: normal;
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: .34em;
  font-weight: 700;
  color: var(--fo-text2);
  letter-spacing: -.005em;
  display: block;
  margin-top: 8px;
}
.fo-hero-amount em.fo-warn-line {
  color: var(--fo-amber);
  /* Eigene Zeile UNTER der Zahl statt inline daneben — sonst klebt der Badge
     an der Zahl (User-Feedback). flex (Block-Level) + klarer Abstand. */
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
.fo-hero-amount em.fo-warn-line svg { flex: none; }
.fo-hero-basis-note {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--fo-text2);
  line-height: 1.4;
  font-weight: 560;
}
.fo-hero-basis-note b { color: var(--fo-ink); font-weight: 730; }
/* V3 Finanzklarheit-Karte (eigene Karte unter der Hauptzahl) */
.fo-clarity {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 16px 0 0;
  border-radius: var(--fo-r-xl);
  padding: 14px 16px;
  border: 1px solid var(--fo-amber-line);
  background: linear-gradient(135deg, var(--fo-amber-soft), transparent 150%);
}
.fo-clarity.fo-cl-green {
  border-color: var(--fo-green-line);
  background: linear-gradient(135deg, var(--fo-green-soft), transparent 150%);
}
.fo-clarity.fo-cl-gray {
  border-color: var(--fo-gray-line);
  background: linear-gradient(135deg, var(--fo-gray-soft), transparent 150%);
}
.fo-clarity .fo-cl-ico {
  width: 30px;
  height: 30px;
  border-radius: var(--fo-r-md);
  flex: none;
  display: grid;
  place-items: center;
  background: var(--fo-amber-soft);
  color: var(--fo-amber);
  border: 1px solid var(--fo-amber-line);
}
.fo-clarity.fo-cl-green .fo-cl-ico {
  background: var(--fo-green-soft);
  color: var(--fo-green);
  border-color: var(--fo-green-line);
}
.fo-clarity.fo-cl-gray .fo-cl-ico {
  background: var(--fo-panel);
  color: var(--fo-gray);
  border-color: var(--fo-gray-line);
}
.fo-clarity p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fo-text);
  font-weight: 560;
}
.fo-clarity p b { color: var(--fo-ink); font-weight: 760; }
.fo-clarity .fo-cl-k {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--fo-muted);
  margin-bottom: 3px;
}
/* V3 „Worauf basiert der Betrag?"-Aufklapper (native <details>) */
.fo-hero-basis {
  margin: 13px 0 0;
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-md);
  background: var(--fo-panel);
}
.fo-hero-basis summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--fo-text);
  user-select: none;
}
.fo-hero-basis summary::-webkit-details-marker { display: none; }
.fo-hero-basis summary .fo-chev {
  margin-left: auto;
  color: var(--fo-muted);
  transition: transform .2s ease;
  flex: none;
}
.fo-hero-basis[open] summary .fo-chev { transform: rotate(180deg); }
.fo-hero-basis summary svg.fo-lead-ico { color: var(--fo-muted); flex: none; }
.fo-hero-basis .fo-hb-body {
  padding: 12px 16px 16px;
  color: var(--fo-text2);
  font-size: 12.5px;
  line-height: 1.55;
  border-top: 1px solid var(--fo-line);
}
.fo-hero-basis .fo-hb-body b { color: var(--fo-ink); }
.fo-hero-basis .fo-hb-body .fo-hb-excl { color: var(--fo-muted); }
/* „Datenbasis öffnen" → voller Drawer (konsistent mit dem Aufklapper-Inhalt). */
.fo-hb-drawer-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--fo-blue);
  font: inherit;
  font-weight: 680;
}
.fo-hb-drawer-link:hover { text-decoration: underline; }
.fo-hb-drawer-link svg { flex: none; }
.fo-amount-src {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 9px 0 0;
  color: var(--fo-muted);
  font-size: 12px;
  font-weight: 650;
}
.fo-amount-src svg { flex: none; }
.fo-chips {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.fo-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: var(--fo-r-pill);
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 680;
  border: 1px solid var(--fo-line);
  color: var(--fo-text2);
  background: var(--fo-panel);
}
.fo-chip i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: var(--fo-gray);
}
.fo-chip.fo-c-amber { background: var(--fo-amber-soft); border-color: var(--fo-amber-line); color: var(--fo-amber); }
.fo-chip.fo-c-amber i { background: var(--fo-accent2); }
.fo-chip.fo-c-green { background: var(--fo-green-soft); border-color: var(--fo-green-line); color: var(--fo-green); }
.fo-chip.fo-c-green i { background: var(--fo-green); }
.fo-chip.fo-c-blue { background: var(--fo-blue-soft); border-color: var(--fo-blue-line); color: var(--fo-blue); }
.fo-chip.fo-c-blue i { background: var(--fo-blue); }
.fo-chip.fo-has-tip { cursor: help; }

/* ---------- Kontostand-Aufteilungsbalken ----------------------------------- */
.fo-split-card {
  margin-top: 14px;
  background: var(--fo-panel);
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-xl);
  padding: 20px 22px;
  box-shadow: var(--fo-shadow2);
}
.fo-split-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.fo-split-head h3 {
  margin: 0;
  font-size: 15px;
  color: var(--fo-ink);
  font-weight: 730;
  letter-spacing: -.015em;
}
.fo-total {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 15px;
  font-weight: 650;
  color: var(--fo-ink);
  font-variant-numeric: tabular-nums;
}
.fo-total small {
  display: block;
  text-align: right;
  color: var(--fo-muted);
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 11px;
  font-weight: 650;
  margin-top: 1px;
}
.fo-bar {
  display: flex;
  height: 26px;
  border-radius: var(--fo-r-sm);
  overflow: hidden;
  border: 1px solid var(--fo-line);
}
/* Segmentbreiten setzt foHero.mount() post-insert (flexBasis/width).
   Ohne JS bleibt der Balken sichtbar, aber ohne Aufteilung — fail-safe. */
.fo-bar i {
  display: block;
  height: 100%;
  flex: 0 0 auto;
}
.fo-bar .fo-seg-green { background: var(--fo-green); }
.fo-bar .fo-seg-amber { background: var(--fo-accent); }
.fo-bar .fo-seg-orange { background: var(--fo-orange); }
.fo-bar .fo-seg-gray { background: var(--fo-gray-line); }
.fo-bar-legend {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.fo-bl {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.fo-bl .fo-sw {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex: none;
  margin-top: 3px;
}
.fo-bl .fo-sw-green { background: var(--fo-green); }
.fo-bl .fo-sw-amber { background: var(--fo-accent); }
.fo-bl .fo-sw-orange { background: var(--fo-orange); }
.fo-bl .fo-sw-gray { background: var(--fo-gray-line); }
.fo-bl span {
  display: block;
  color: var(--fo-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
}
.fo-bl b {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  color: var(--fo-ink);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.fo-bl small {
  display: block;
  color: var(--fo-text2);
  font-size: 11.5px;
  margin-top: 1px;
  font-weight: 550;
}
.fo-split-micro {
  margin: 14px 0 0;
  color: var(--fo-text2);
  font-size: 12.5px;
  line-height: 1.55;
  border-top: 1px dashed var(--fo-line);
  padding-top: 12px;
}

/* ---------- Facts-Strip ----------------------------------------------------- */
.fo-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.fo-fact {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--fo-panel);
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-xl);
  padding: 14px 16px;
  box-shadow: var(--fo-shadow2);
}
.fo-fact .fo-f-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--fo-r-md);
  display: grid;
  place-items: center;
  flex: none;
}
.fo-fact.fo-f-warn .fo-f-icon { background: var(--fo-amber-soft); color: var(--fo-amber); }
.fo-fact.fo-f-due .fo-f-icon { background: var(--fo-blue-soft); color: var(--fo-blue); }
.fo-fact.fo-f-data .fo-f-icon { background: var(--fo-gray-soft); color: var(--fo-gray); }
.fo-fact.fo-f-ok .fo-f-icon { background: var(--fo-green-soft); color: var(--fo-green); }
.fo-fact span {
  display: block;
  color: var(--fo-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.fo-fact b {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  color: var(--fo-ink);
  font-weight: 680;
}

/* PR3/PR4: Karten mit data-fo-action werden als <button> gerendert (Kontostand-
   CTA, tastaturbedienbar). Die .fo-fact-Regel oben ist für <div> gebaut — ohne
   diesen Reset würde der Browser-Button-Default-Stil die Karte verhunzen
   (Schrift, Breite, Cursor). codex-P2-Fix. */
button.fo-fact {
  width: 100%;
  appearance: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
button.fo-fact:focus-visible {
  outline: 2px solid var(--fo-blue);
  outline-offset: 3px;
}


/* ---------- Disclaimer ------------------------------------------------------ */
.fo-legal {
  margin-top: 18px;
  border-top: 1px dashed var(--fo-line);
  padding-top: 14px;
  color: var(--fo-muted);
  font-size: 12.5px;
  line-height: 1.55;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.fo-legal svg { flex: none; margin-top: 2px; color: var(--fo-muted); }

/* Der frühere eigene Detail-Drawer (.fo-overlay/.fo-drawer/.fo-dr-*) wurde
   entfernt — der Finanzcheck nutzt jetzt die geteilte App-Komponente
   .detail-sheet (detail-sheet.js + _90-month-sheet.css + _90b-detail-sheet-
   rich.css), inkl. ×-Button, ESC, Overlay-Klick und Side-Variante. */

/* ---------- Responsive (V5-Breakpoints 1240/760) --------------------------- */
@media (max-width: 1240px) {
  .fo-hero { grid-template-columns: 1fr; }
  .fo-trend-panel { border-left: 0; border-top: 1px solid var(--fo-line); }
  .fo-bar-legend { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .fo-pills-top { justify-content: flex-start; }
  .fo-facts,
  .fo-bar-legend { grid-template-columns: 1fr; }
  .fo-hero-status { padding: 26px 20px; }
  .fo-tl-stations { grid-template-columns: 1fr 1fr; gap: 18px 0; }
  .fo-tl-stations::before { display: none; }
  .fo-tl-stat { border-left: 0; padding-left: 2px; }
  .fo-tl-stat.fo-is-bottleneck { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fo-hero-basis summary .fo-chev { transition: none; }
}

/* ============================================================================
   _26b-finanzcheck-snapshot.css — 90-Tage-Finanzcheck V3 (Render-Schicht PR3)
   ----------------------------------------------------------------------------
   Ausgelagert aus _26-finanzcheck.css (CSS-Partial-Limit 800 LOC, CLAUDE.md):
   die rechte Hero-Spalte (Spielraum-Trend-Snapshot mit Euro-Sparkline) + die
   statische 90-Tage-Leiste. Spiegelt foHeroSnapshot (hero-snapshot.js).

   Nutzt ausschliesslich die --fo-* Tokens, die _26-finanzcheck.css scoped unter
   .fo-page / .detail-sheet definiert; diese Klassen sind zur Laufzeit
   Nachfahren von .fo-page, der Token-Cascade greift also. KEINE Token-
   Neudefinition hier (Single source = _26-finanzcheck.css). app.css wird ueber
   manifest.json gebaut — niemals app.css hand-editieren.
   ============================================================================ */

/* ---------- Spielraum-Trend-Snapshot (rechte Hero-Spalte) ------------------ */
.fo-trend-panel {
  padding: 22px 24px 20px;
  background: linear-gradient(180deg, var(--fo-panel2), var(--fo-panel) 120%);
  border-left: 1px solid var(--fo-line);
  display: flex;
  flex-direction: column;
  position: relative;
}
.fo-trend-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.fo-trend-head .fo-tp-k {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fo-accent-deep);
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 800;
  background: var(--fo-amber-soft);
  border: 1px solid var(--fo-amber-line);
  border-radius: var(--fo-r-pill);
  padding: 3px 9px;
}
html[data-theme="dark"] .fo-trend-head .fo-tp-k { color: var(--fo-accent); }
.fo-trend-head h3 {
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--fo-ink);
  font-weight: 730;
  letter-spacing: -.015em;
}
.fo-trend-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: var(--fo-r-pill);
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 760;
  white-space: nowrap;
  background: var(--fo-green-soft);
  color: var(--fo-green);
  border: 1px solid var(--fo-green-line);
}
.fo-trend-pill.fo-tp-amber {
  background: var(--fo-amber-soft);
  color: var(--fo-amber);
  border-color: var(--fo-amber-line);
}
.fo-trend-pill svg { flex: none; }
.fo-trend-delta {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--fo-green);
  margin: 14px 0 2px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fo-trend-delta.fo-td-blue { color: var(--fo-blue); }
.fo-trend-delta small {
  display: block;
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 12px;
  font-weight: 650;
  color: var(--fo-text2);
  letter-spacing: 0;
  margin-top: 6px;
  line-height: 1.4;
}
.fo-trend-delta small b { color: var(--fo-ink); font-weight: 720; }
.fo-spark-wrap { margin: 14px 0 0; position: relative; }
.fo-spark { width: 100%; height: auto; display: block; overflow: visible; }
.fo-spark-line {
  fill: none;
  stroke: var(--fo-spark);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fo-spark-area { fill: url(#foSparkGrad); }
.fo-spark-dot { fill: var(--fo-panel); stroke: var(--fo-spark); stroke-width: 3; }
.fo-spark-dot-now { fill: var(--fo-spark); stroke: var(--fo-panel); stroke-width: 2.5; }
.fo-spark-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  font-weight: 600;
  color: var(--fo-muted);
}
.fo-snap-why {
  margin: 14px 0 0;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  border-top: 1px dashed var(--fo-line);
  padding-top: 13px;
}
.fo-snap-why svg { flex: none; color: var(--fo-muted); margin-top: 1px; }
.fo-snap-why p { margin: 0; color: var(--fo-text2); font-size: 12.5px; line-height: 1.5; }
.fo-snap-why p b { color: var(--fo-ink); font-weight: 710; }
.fo-trend-foot { margin-top: auto; padding-top: 14px; display: grid; gap: 7px; }
.fo-trend-foot .fo-tf-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}
.fo-trend-foot .fo-tf-row span { color: var(--fo-text2); }
.fo-trend-foot .fo-tf-row b {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-weight: 650;
  color: var(--fo-ink);
  font-size: 12.5px;
}
.fo-trend-foot .fo-tf-row b.fo-ok { color: var(--fo-green); }
.fo-trend-foot .fo-tf-row b.fo-warn { color: var(--fo-amber); }
.fo-trend-foot-note {
  margin: 11px 0 0;
  color: var(--fo-muted);
  font-size: 10.5px;
  line-height: 1.45;
}
/* Leer-Variante (kein trendSnapshot): ruhige Sperr-Vorschau, keine Kurve */
.fo-trend-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex: 1;
  gap: 12px;
  padding: 18px 24px 4px;
}
.fo-trend-empty b { font-size: 15px; color: var(--fo-ink); font-weight: 720; }
.fo-trend-empty p { margin: 0; color: var(--fo-text2); font-size: 12.5px; line-height: 1.5; }
.fo-trend-empty .fo-te-preview { width: 100%; opacity: .4; filter: grayscale(.6); }
.fo-trend-empty .fo-te-lock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--fo-muted);
  background: var(--fo-gray-soft);
  border: 1px solid var(--fo-gray-line);
  border-radius: var(--fo-r-pill);
  padding: 4px 10px;
}


/* ---------- 90-Tage-Leiste (statisch, PR3) --------------------------------- */
.fo-tl-strip {
  margin-top: 14px;
  background: linear-gradient(160deg, var(--fo-panel), var(--fo-panel2) 150%);
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-xl);
  box-shadow: var(--fo-shadow2);
  padding: 16px 18px;
}
.fo-tl-strip-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.fo-tl-strip-head h3 {
  margin: 0;
  font-size: 14px;
  color: var(--fo-ink);
  font-weight: 730;
  letter-spacing: -.012em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.fo-tl-strip-head h3 .fo-tk {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fo-accent-deep);
  background: var(--fo-amber-soft);
  border: 1px solid var(--fo-amber-line);
  border-radius: var(--fo-r-pill);
  padding: 3px 9px;
}
html[data-theme="dark"] .fo-tl-strip-head h3 .fo-tk { color: var(--fo-accent); }
.fo-tl-hint { color: var(--fo-muted); font-size: 11.5px; font-weight: 600; }
.fo-tl-stations {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.fo-tl-stations::before {
  content: "";
  position: absolute;
  left: 11%;
  right: 11%;
  top: 7px;
  height: 2px;
  background: linear-gradient(90deg, var(--fo-green-line), var(--fo-amber-line) 45%, var(--fo-green-line));
  z-index: 0;
}
.fo-tl-stat {
  position: relative;
  z-index: 1;
  padding: 0 12px;
  border-left: 1px solid var(--fo-line);
  display: flex;
  flex-direction: column;
}
.fo-tl-stat:first-child { border-left: 0; padding-left: 2px; }
.fo-tl-stat .fo-ts-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--fo-panel);
  border: 3px solid var(--fo-green);
  display: block;
  margin-bottom: 12px;
}
.fo-tl-stat .fo-ts-dot.fo-d-amber { border-color: var(--fo-accent2); }
.fo-tl-stat .fo-ts-dot.fo-d-gray { border-color: var(--fo-gray); }
.fo-tl-stat .fo-ts-dot.fo-d-red { border-color: var(--fo-red); }
.fo-tl-stat .fo-ts-dot.fo-d-now {
  background: var(--fo-green);
  box-shadow: 0 0 0 4px var(--fo-green-soft);
}
.fo-tl-stat .fo-ts-when {
  font-size: 10.5px;
  font-weight: 780;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fo-muted);
}
.fo-tl-stat .fo-ts-val {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--fo-ink);
  margin: 4px 0 4px;
  font-variant-numeric: tabular-nums;
}
.fo-tl-stat .fo-ts-val.fo-is-text {
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 13.5px;
  font-weight: 720;
  letter-spacing: -.01em;
}
.fo-tl-stat .fo-ts-val.fo-ts-warn { color: var(--fo-amber); }
.fo-tl-stat .fo-ts-val.fo-ts-crit { color: var(--fo-red); }
.fo-tl-stat .fo-ts-say {
  margin: 0;
  color: var(--fo-text2);
  font-size: 11.5px;
  line-height: 1.45;
}
.fo-tl-stat .fo-ts-badge {
  align-self: flex-start;
  margin-top: 12px;
  font-size: 9.5px;
  font-weight: 780;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: var(--fo-r-pill);
  padding: 2px 8px;
}
.fo-tl-stat .fo-ts-badge.fo-ok {
  background: var(--fo-green-soft);
  color: var(--fo-green);
  border: 1px solid var(--fo-green-line);
}
.fo-tl-stat .fo-ts-badge.fo-warn {
  background: var(--fo-amber-soft);
  color: var(--fo-amber);
  border: 1px solid var(--fo-amber-line);
}
.fo-tl-stat .fo-ts-badge.fo-crit {
  background: var(--fo-red-soft);
  color: var(--fo-red);
  border: 1px solid var(--fo-red-line);
}
.fo-tl-stat .fo-ts-badge.fo-muted {
  background: var(--fo-gray-soft);
  color: var(--fo-muted);
  border: 1px solid var(--fo-gray-line);
}
.fo-tl-stat.fo-is-bottleneck {
  background: var(--fo-amber-soft);
  box-shadow: inset 0 0 0 1px var(--fo-amber-line);
  /* Mehr Innenabstand, damit die hervorgehobene Karte atmet statt zu quetschen
     (User-Feedback). 16px Seiten + 12px vertikal, pull-up reduziert auf -8px. */
  padding: 12px 16px;
  margin-top: -8px;
  border-radius: var(--fo-r-md);
}
.fo-tl-stat.fo-is-bottleneck .fo-ts-dot { box-shadow: 0 0 0 4px var(--fo-amber-soft); }
.fo-tl-stat .fo-bottleneck-tag {
  align-self: flex-start;
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  /* stylelint-disable-next-line color-no-hex -- fester Weisston auf dem
     gefuellten accent2-Pill (Mockup: color:#fff); kein App-Token fuer
     "on-accent foreground", in beiden Themes lesbar. */
  color: #fff;
  background: var(--fo-accent2);
  border-radius: var(--fo-r-pill);
  padding: 3px 9px;
}
.fo-tl-strip-foot {
  margin-top: 15px;
  border-top: 1px dashed var(--fo-line);
  padding-top: 11px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.fo-tl-strip-foot small { color: var(--fo-muted); font-size: 11.5px; }
.fo-tl-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--fo-blue);
  font-size: 12px;
  font-weight: 700;
}
.fo-tl-detail-link svg { flex: none; }

/* ---------- Responsive (PR7 Mobile-Audit, V3-Breakpoints 1240/760/480) -----
   Dieses Partial besass bisher KEINE @media-Regeln; die 90-Tage-Leiste + der
   Snapshot leben aber hier. Die folgenden Regeln sind rein additiv und brechen
   das Desktop-Layout nicht: Snapshot-Typo wird auf schmalen Viewports kleiner,
   die 90-Tage-Stationen brechen unter ~760px in ein 2er-Raster (Co-Location zur
   Leiste, identisch zur Cockpit-Regel in _26) und unter ~480px in eine Spalte,
   damit die Werte nicht quetschen. Reduced-Motion deaktiviert den Spark-Tween. */
@media (max-width: 1240px) {
  /* Snapshot rutscht unter den Hero (Hero wird einspaltig) — Trenner oben statt
     links, etwas weniger Innenabstand. */
  .fo-trend-panel { padding: 20px 22px 18px; }
}
@media (max-width: 760px) {
  .fo-trend-delta { font-size: 24px; }
  .fo-trend-empty { padding: 16px 18px 4px; }
  /* 90-Tage-Leiste: 2-Spalten-Raster, vertikaler Verbinder verschwindet. */
  .fo-tl-stations {
    grid-template-columns: 1fr 1fr;
    gap: 18px 14px;
  }
  .fo-tl-stations::before { display: none; }
  .fo-tl-stat { border-left: 0; padding-left: 2px; }
  .fo-tl-stat.fo-is-bottleneck { margin-top: 0; }
  .fo-tl-strip-foot { align-items: flex-start; }
}
@media (max-width: 480px) {
  /* Sehr schmal (Telefon hochkant): Stationen einspaltig, nichts wird gequetscht.
     Lock-Overlay-Text bleibt lesbar (kleinerer Innenabstand). */
  .fo-tl-stations { grid-template-columns: 1fr; gap: 14px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fo-spark-line,
  .fo-spark-area { transition: none; }
}

/* ============================================================================
   _26c-finanzcheck-analyse.css — 90-Tage-Finanzcheck V3 (Render-Schicht PR4)
   ----------------------------------------------------------------------------
   Zweite Ebene: die ausfuehrliche ANALYSE-Sektion „Spielraum-Verlauf" (grosse
   Euro-Verlaufskurve + Event-Marker + „Warum hat sich der Wert veraendert?" +
   Hebel-Liste), die klickbaren 90-Tage-Stationen (ts-look-Link) und der
   fachliche Drawer-Inhalt (Datenbasis-Datenarten, Stations-/Status-Detail).
   Spiegelt foScoreTrend (score-trend.js) + foDrawerContent (drawer-content.js).

   Nutzt ausschliesslich die --fo-* Tokens, die _26-finanzcheck.css scoped unter
   .fo-page / .detail-sheet definiert. KEINE Token-Neudefinition hier.
   app.css wird ueber manifest.json gebaut — niemals app.css hand-editieren.
   ============================================================================ */

/* ---------- klickbare 90-Tage-Stationen (Ergaenzung zu _26b) --------------- */
.fo-tl-stat[data-fo-drawer] { cursor: pointer; border-radius: var(--fo-r-md); transition: background .15s; }
.fo-tl-stat[data-fo-drawer]:hover { background: var(--fo-gray-soft); }
.fo-tl-stat[data-fo-drawer]:focus-visible {
  outline: 2px solid var(--fo-blue);
  outline-offset: 2px;
}
.fo-tl-stat .fo-ts-look {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 9px;
  color: var(--fo-blue);
  font-size: 11px;
  font-weight: 720;
  opacity: 0;
  transition: opacity .15s;
}
.fo-tl-stat .fo-ts-look svg { flex: none; }
.fo-tl-stat[data-fo-drawer]:hover .fo-ts-look,
.fo-tl-stat[data-fo-drawer]:focus-visible .fo-ts-look { opacity: 1; }
.fo-tl-stat.fo-is-bottleneck .fo-ts-look { opacity: 1; color: var(--fo-amber); }
button.fo-tl-detail-link {
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

/* ---------- ANALYSE-Sektion (Spielraum-Verlauf) --------------------------- */
.fo-analyse { margin-top: 64px; }
.fo-an-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.fo-an-tag {
  display: block;
  color: var(--fo-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
html[data-theme="light"] .fo-an-tag,
html[data-tx-theme="light"] .fo-an-tag,
body.light .fo-an-tag {
  color: var(--fo-accent-deep);
}
.fo-an-head h2 {
  margin: 0;
  font-size: 21px;
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--fo-ink);
  font-weight: 740;
  max-width: 34ch;
}
.fo-an-sub {
  margin: 8px 0 0;
  color: var(--fo-text2);
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 58ch;
}
.fo-an-range {
  align-self: center;
  color: var(--fo-muted);
  font-size: 11.5px;
  font-weight: 700;
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-pill);
  padding: 6px 13px;
  white-space: nowrap;
}
.fo-an-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  align-items: stretch;
}

/* --- linke Chart-Card --- */
.fo-an-chart-card {
  background: var(--fo-panel);
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-hero);
  padding: 24px 24px 18px;
  box-shadow: var(--fo-shadow2);
  min-width: 0;
  position: relative;
  overflow: hidden;
}
.fo-an-chart-scroll { overflow-x: auto; }
.fo-an-chart {
  width: 100%;
  height: auto;
  display: block;
  min-width: 560px;
}
.fo-an-ax { stroke: var(--fo-line); stroke-width: 1; }
.fo-an-axlab {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  font-weight: 600;
  fill: var(--fo-muted);
}
.fo-an-month {
  font-size: 13px;
  font-weight: 620;
  fill: var(--fo-text2);
}
.fo-an-line {
  fill: none;
  stroke: var(--fo-spark);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fo-an-area { fill: url(#foAnArea); opacity: .9; }
.fo-an-pt {
  fill: var(--fo-panel);
  stroke: var(--fo-spark);
  stroke-width: 4;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .2s;
}
.fo-an-pt:hover { transform: scale(1.3); }
.fo-an-pt-now {
  fill: var(--fo-spark);
  stroke: var(--fo-panel);
  stroke-width: 4;
}
.fo-an-start, .fo-an-end {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 16px;
  font-weight: 700;
  fill: var(--fo-ink);
}
.fo-an-start { text-anchor: start; }
.fo-an-end { text-anchor: end; }
/* Event-Marker (echte Ereignisse aus signals[]) */
.fo-an-mline {
  stroke: var(--fo-blue);
  stroke-width: 1.4;
  stroke-dasharray: 3 5;
  opacity: .6;
}
.fo-an-box {
  fill: var(--fo-blue-soft);
  stroke: var(--fo-blue-line);
}
.fo-an-txt {
  font-size: 11.5px;
  font-weight: 650;
  fill: var(--fo-blue);
}
/* „Warum hat sich der Wert veraendert?" */
.fo-an-why {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--fo-blue-soft);
  border: 1px solid var(--fo-blue-line);
  border-radius: var(--fo-r-xl);
  padding: 15px 18px;
  margin-top: 16px;
}
.fo-an-why-ico {
  width: 36px;
  height: 36px;
  border-radius: var(--fo-r-md);
  background: var(--fo-blue-soft);
  display: grid;
  place-items: center;
  color: var(--fo-blue);
  flex: none;
}
.fo-an-why p {
  margin: 0;
  color: var(--fo-text2);
  font-size: 13.5px;
  line-height: 1.55;
}
.fo-an-why p b { color: var(--fo-ink); }

/* --- rechte Hebel-Spalte --- */
.fo-an-levers { display: grid; gap: 12px; align-content: start; }
.fo-an-hero {
  background: linear-gradient(140deg, var(--fo-panel2) 0%, var(--fo-line) 220%);
  border: 1px solid var(--fo-line-strong);
  color: var(--fo-ink);
  border-radius: var(--fo-r-hero);
  padding: 21px;
  box-shadow: var(--fo-shadow2);
}
.fo-an-hero span {
  display: block;
  color: var(--fo-muted);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 750;
  margin-bottom: 9px;
}
.fo-an-hero strong {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 28px;
  letter-spacing: -.03em;
  font-weight: 700;
  color: var(--fo-ink);
}
.fo-an-hero strong em { font-style: normal; color: var(--fo-green); }
.fo-an-hero p {
  color: var(--fo-text2);
  line-height: 1.5;
  margin: 9px 0 0;
  font-size: 13px;
}
.fo-an-hero p b { color: var(--fo-ink); }
.fo-an-lever-head {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fo-muted);
  margin: 4px 0 2px;
}
.fo-an-lever {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  background: var(--fo-panel);
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-xl);
  box-shadow: var(--fo-shadow2);
  position: relative;
}
.fo-an-lever.fo-is-top { border-color: var(--fo-amber-line); }
.fo-an-lever .fo-an-rank {
  position: absolute;
  top: -9px;
  left: 13px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  /* stylelint-disable-next-line color-no-hex -- fester Weisston auf dem
     gefuellten accent2-Pill (Mockup: color:#fff); kein App-Token fuer
     "on-accent foreground", in beiden Themes lesbar. */
  color: #fff;
  background: var(--fo-accent2);
  border-radius: var(--fo-r-pill);
  padding: 2px 8px;
}
.fo-an-lever b { font-size: 13.5px; color: var(--fo-ink); font-weight: 680; }
.fo-an-lever small { color: var(--fo-muted); display: block; margin-top: 2px; font-size: 12px; }
.fo-an-lever .fo-an-val {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-weight: 700;
  color: var(--fo-green);
  font-size: 15px;
  white-space: nowrap;
}
.fo-an-lever .fo-an-val.fo-an-neutral {
  color: var(--fo-blue);
  font-size: 12px;
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
}
.fo-an-foot-note {
  margin: 14px 0 0;
  color: var(--fo-muted);
  font-size: 11.5px;
  line-height: 1.5;
}

/* --- Leer-Variante --- */
.fo-an-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  background: var(--fo-panel);
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-hero);
  box-shadow: var(--fo-shadow2);
  padding: 28px 26px;
}
.fo-an-empty-spark { width: 100%; max-width: 600px; opacity: .4; filter: grayscale(.6); }
.fo-an-empty b { font-size: 16px; color: var(--fo-ink); font-weight: 730; }
.fo-an-empty p { margin: 0; color: var(--fo-text2); font-size: 13px; line-height: 1.55; max-width: 64ch; }

/* ---------- Drawer-Inhalt (fachlich) -------------------------------------- */
/* Der frühere drawer-eigene Inhaltsstil (.fo-dr-status/.fo-dr-content/
   .fo-dr-meta/.fo-dr-effects/.fo-dr-acc/.fo-acc-body/.fo-dr-fineprint/
   .fo-dr-signals/.fo-dr-sig/.fo-dr-ev/.fo-ev/.fo-dr-classes/.fo-dr-cls/
   .fo-c-real|forecast|assume|exclude) wurde entfernt. Der Finanzcheck-Drawer
   baut seinen Inhalt jetzt als DetailSheet-Sektionen (callout/collapsible/
   meta-grid/amount/note); deren Stil kommt aus _90b-detail-sheet-rich.css. */

/* ---------- Responsive ---------- */
@media (max-width: 1240px) {
  .fo-an-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .fo-analyse { margin-top: 52px; }
  .fo-an-head h2 { font-size: 18px; }
  .fo-tl-stat .fo-ts-look { opacity: 1; }
}

/* ── Planungs-Editor (Reserve/Kontostand) im Drawer — Codex-P2 ───────────── */
.fo-pe { display: flex; flex-direction: column; gap: 14px; }
.fo-pe-hint {
  margin: 0; color: var(--fo-text2); font-size: 13.5px; line-height: 1.5;
}
.fo-pe-form { display: flex; flex-direction: column; gap: 9px; }
.fo-pe-label { font-size: 13px; font-weight: 650; color: var(--fo-ink); }
.fo-pe-input {
  font-family: var(--font-mono, monospace); font-size: 16px; font-weight: 600;
  color: var(--fo-ink); background: var(--fo-panel2); border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-md); padding: 10px 13px; width: 100%;
  min-height: 42px; box-sizing: border-box;
}
.fo-pe-input:focus-visible {
  outline: 2px solid var(--fo-accent); outline-offset: 1px; border-color: var(--fo-accent);
}
.fo-pe-save {
  align-self: flex-start; background: var(--fo-accent); color: var(--fo-accent-ink);
  border: 1px solid var(--fo-accent); border-radius: var(--fo-r-sm);
  padding: 10px 18px; font-size: 14px; font-weight: 650; cursor: pointer;
  min-height: 42px; box-sizing: border-box;
}
.fo-pe-save:hover { background: var(--fo-accent2); }
.fo-pe-msg { color: var(--fo-text2); font-size: 12.5px; min-height: 1em; }

/* ============================================================================
   _26d-finanzcheck-massnahmen.css — 90-Tage-Finanzcheck V3 (Render-Schicht PR5)
   ----------------------------------------------------------------------------
   Das Maßnahmen-System: die dominante „NÄCHSTE BESTE MASSNAHME"-Gold-Karte im
   Hero (.fo-hero-action) und die „Weitere Schritte"-Sekundärkarten
   (.fo-steps / .fo-step-card). Spiegelt foActions (actions.js → renderPrimary /
   renderSecondary). Die priorisierte Hebel-Liste der Analyse-Sektion nutzt die
   bestehenden .fo-an-lever-Klassen aus _26c — hier KEINE Dopplung.

   1:1 nach dem freigegebenen V3-Mockup (docs/year-outlook-v2/mockup/index.html →
   .hero-action und .n-card / .n-badge). Nutzt ausschliesslich die --fo-* Tokens,
   die _26-finanzcheck.css scoped unter .fo-page definiert. KEINE Token-
   Neudefinition. app.css wird ueber manifest.json gebaut — nie hand-editieren.
   ============================================================================ */

/* ---------- Gold-Karte „Nächste beste Maßnahme" (Hero) --------------------- */
.fo-hero-action {
  margin-top: 16px;
  border: 1px solid var(--fo-amber-line);
  border-radius: var(--fo-r-xl);
  background: linear-gradient(150deg, var(--fo-amber-soft), transparent 130%);
  padding: 15px 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.fo-hero-action.fo-ha-green {
  border-color: var(--fo-green-line);
  background: linear-gradient(150deg, var(--fo-green-soft), transparent 130%);
}
.fo-hero-action.fo-ha-gray {
  border-color: var(--fo-gray-line);
  background: linear-gradient(150deg, var(--fo-gray-soft), transparent 130%);
}
.fo-hero-action .fo-ha-ico {
  width: 38px;
  height: 38px;
  border-radius: var(--fo-r-md);
  flex: none;
  display: grid;
  place-items: center;
  background: var(--fo-amber-soft);
  color: var(--fo-amber);
  border: 1px solid var(--fo-amber-line);
}
.fo-hero-action.fo-ha-green .fo-ha-ico {
  background: var(--fo-green-soft);
  color: var(--fo-green);
  border-color: var(--fo-green-line);
}
.fo-hero-action.fo-ha-gray .fo-ha-ico {
  background: var(--fo-panel);
  color: var(--fo-gray);
  border-color: var(--fo-gray-line);
}
.fo-hero-action .fo-ha-main { flex: 1; min-width: 0; }
.fo-hero-action .fo-ha-k {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fo-amber);
}
.fo-hero-action.fo-ha-green .fo-ha-k { color: var(--fo-green); }
.fo-hero-action.fo-ha-gray .fo-ha-k { color: var(--fo-gray); }
.fo-hero-action .fo-ha-title {
  margin: 3px 0 4px;
  font-size: 16px;
  color: var(--fo-ink);
  font-weight: 740;
  letter-spacing: -.015em;
  line-height: 1.25;
}
.fo-hero-action .fo-ha-effect {
  margin: 0;
  color: var(--fo-text2);
  font-size: 12.5px;
  line-height: 1.5;
}
.fo-hero-action .fo-ha-effect b { color: var(--fo-ink); }
.fo-hero-action .fo-ha-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 11px;
}

/* CTA-Buttons (Primär / Geist) + „Warum?"-Link */
.fo-btn {
  border: 1px solid var(--fo-line);
  background: var(--fo-panel);
  color: var(--fo-text);
  border-radius: var(--fo-r-sm);
  padding: 8px 16px;
  font: inherit;
  font-weight: 600;
  font-size: 13.5px;
  box-shadow: var(--fo-shadow2);
  cursor: pointer;
  transition: transform .15s, background .15s;
}
.fo-btn:hover { transform: translateY(-1px); }
.fo-btn.fo-btn-primary {
  background: var(--fo-accent);
  border-color: var(--fo-accent);
  color: var(--fo-accent-ink);
}
.fo-btn.fo-btn-primary:hover { background: var(--fo-accent2); }
.fo-btn.fo-btn-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--fo-text2);
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fo-btn[disabled] { opacity: .55; cursor: not-allowed; }
.fo-btn[disabled]:hover { transform: none; }
.fo-why-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--fo-amber);
  font-size: 12.5px;
  font-weight: 720;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--fo-amber-line);
}
.fo-why-link:hover { text-decoration-color: var(--fo-amber); }
.fo-why-link svg { flex: none; }

/* ---------- „Weitere Schritte" — Sekundärkarten ---------------------------- */
.fo-steps {
  margin: 22px 0 0;
  padding: 0 4px;
}
.fo-steps-head { margin: 0 0 14px; }
.fo-steps-k {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fo-muted);
}
.fo-steps-head h2 {
  margin: 5px 0 4px;
  font-size: 19px;
  color: var(--fo-ink);
  font-weight: 740;
  letter-spacing: -.02em;
  line-height: 1.25;
}
.fo-steps-sub {
  margin: 0;
  color: var(--fo-text2);
  font-size: 13px;
  line-height: 1.5;
}
.fo-steps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.fo-step-card {
  border: 1px solid var(--fo-line);
  background: var(--fo-panel);
  border-radius: var(--fo-r-xl);
  box-shadow: var(--fo-shadow2);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.fo-step-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--fo-shadow);
  border-color: var(--fo-line-strong);
}
.fo-step-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  border-radius: var(--fo-r-pill);
  padding: 4px 11px;
  margin-bottom: 13px;
  border: 1px solid var(--fo-line);
}
.fo-step-badge.fo-b-amber {
  background: var(--fo-amber-soft);
  color: var(--fo-amber);
  border-color: var(--fo-amber-line);
}
.fo-step-badge.fo-b-green {
  background: var(--fo-green-soft);
  color: var(--fo-green);
  border-color: var(--fo-green-line);
}
.fo-step-badge.fo-b-blue {
  background: var(--fo-blue-soft);
  color: var(--fo-blue);
  border-color: var(--fo-blue-line);
}
.fo-step-card h3 {
  margin: 0 0 7px;
  font-size: 16px;
  color: var(--fo-ink);
  font-weight: 740;
  letter-spacing: -.012em;
  line-height: 1.3;
}
.fo-step-why {
  margin: 0 0 8px;
  color: var(--fo-text2);
  font-size: 13px;
  line-height: 1.55;
}
.fo-step-why b { color: var(--fo-ink); }
.fo-step-effect {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  border: 1px solid var(--fo-green-line);
  background: var(--fo-green-soft);
  border-radius: var(--fo-r-md);
  padding: 9px 11px;
  margin: 0 0 13px;
  flex: 1;
}
.fo-step-effect svg { flex: none; color: var(--fo-green); margin-top: 1px; }
.fo-step-effect span { color: var(--fo-text2); font-size: 12.5px; line-height: 1.45; }
.fo-step-effect b { color: var(--fo-ink); }
.fo-step-foot {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
}
.fo-step-btn {
  border: 1px solid var(--fo-line-strong);
  background: var(--fo-panel);
  color: var(--fo-text);
  border-radius: var(--fo-r-sm);
  padding: 9px 15px;
  font: inherit;
  font-weight: 650;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .15s, background .15s;
}
.fo-step-btn:hover { transform: translateY(-1px); background: var(--fo-panel2); }

/* ---------- Responsive --------------------------------------------------- */
@media (max-width: 760px) {
  .fo-hero-action { flex-direction: column; }
  .fo-steps-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .fo-btn,
  .fo-step-card,
  .fo-step-btn { transition: none; }
}

/* ============================================================================
   _26e-finanzcheck-szenario.css — 90-Tage-Finanzcheck V3 (Render-Schicht PR6)
   ----------------------------------------------------------------------------
   Der Szenario-Modus (Sandbox / „Was wäre, wenn …?"): das permanente
   „Szenario aktiv · nichts wird gespeichert"-Banner, die 90-Tage-Leiste im
   Szenario (Vorher/Nachher, SIMULIERT-Marker), die ANNAHMEN-Inputs (Slider/
   Optionen), die Vorher/Nachher-Tabelle, die Kernbotschaft, die ruhige
   Geld-Umschichtung (Bankkonto → Reserve → frei) und die CTAs.

   Spiegelt foScenarioPanel (scenario-panel.js → render/mount). 1:1 nach dem
   freigegebenen V3-Mockup (docs/year-outlook-v2/mockup/index.html, Zustand D
   „Simulation": .sim-banner, .tl-strip, .scn-grid, .cmp-table, .flow-card,
   .sim-core, .scn-note).

   Nutzt ausschliesslich die --fo-* Tokens, die _26-finanzcheck.css scoped unter
   .fo-page definiert. KEINE Token-Neudefinition. app.css wird ueber
   manifest.json gebaut — nie hand-editieren (node scripts/build-css-bundle.js).
   ============================================================================ */

/* ---------- Szenario-Section-Wrapper (PR5: Inline unter dem Hero) ---------
   Seit PR5 bleibt der Hero im Szenario-Modus sichtbar und das Szenario-Panel
   erscheint DARUNTER (statt als Sektions-Ersatz). Ohne diesen Abstand klebt
   das Panel direkt am Hero-Boden (codex-WARN). Festes Pixel-Margin, da es
   kein --fo-gap-Token gibt (konsistent mit den 14px/16px-Margins der
   Nachbar-Regeln in diesem Partial). */
.fo-page[data-fo-scenario="1"] .fo-scenario {
  margin-top: 16px;
}

/* ---------- Banner (permanent, Zustand D) ---------------------------------
   Bewusst „Sandbox-violett" als eigene Identitaet (Mockup .sim-banner): hebt
   den Szenario-Modus klar von den echten Daten ab. Aufgebaut aus dem globalen
   --purple-Token (kein neues Token); der Weiss-Vordergrund auf dem gefuellten
   violetten Banner ist ein dokumentierter Fixwert (kein App-Token fuer
   „on-purple foreground", in beiden Themes lesbar). */
.fo-page .fo-scn-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  /* FESTER dunkler Lila→Blau-Gradient (theme-unabhängig, wie .fo-start-promo).
     Der frühere var(--purple)-Gradient war im Light-Theme hell (#a78bfa) →
     weißer Text mit Kontrast <3:1 (Audit B#1). Jetzt dunkle Stops → weißer
     Vordergrund in beiden Themes klar lesbar (>7:1). */
  /* stylelint-disable-next-line color-no-hex -- gefülltes Sandbox-Banner mit
     festem Lila→Blau-Verlauf + Weiß-Vordergrund; bewusst theme-fest. */
  background: linear-gradient(120deg, #5b3fb0, #2f4bb8 130%);
  /* stylelint-disable-next-line color-no-hex -- Weiß-Vordergrund auf dem
     dunklen gefüllten Banner; in beiden Themes lesbar. */
  color: #fff;
  /* stylelint-disable-next-line color-no-hex -- Border zum festen Banner-Lila. */
  border: 1px solid #5b3fb0;
  border-radius: var(--fo-r-xl);
  box-shadow: var(--fo-shadow2);
  padding: 13px 18px;
  margin: 0 0 14px;
}
.fo-page .fo-scn-bico {
  width: 30px;
  height: 30px;
  border-radius: var(--fo-r-md);
  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- fester
     Weiss-Tint auf dem gefuellten Sandbox-Banner; surface-rgba-base waere
     theme-abhaengig (light → schwarz) und auf dem violetten Banner falsch. */
  background: rgba(255, 255, 255, .16);
  display: grid;
  place-items: center;
  flex: none;
}
.fo-page .fo-scn-btxt b {
  font-size: 14px;
  font-weight: 760;
  display: block;
}
.fo-page .fo-scn-btxt small {
  display: block;
  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- fester
     heller Weiss-Tint fuer die Banner-Subline auf Violett; bewusst theme-fest. */
  color: rgba(255, 255, 255, .88);
  font-size: 12.5px;
  margin-top: 1px;
  line-height: 1.45;
}
.fo-page .fo-scn-pill {
  margin-left: auto;
  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- fester
     Weiss-Tint fuer den Sandbox-Pill auf Violett; bewusst theme-fest. */
  background: rgba(255, 255, 255, .16);
  border-radius: var(--fo-r-pill);
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 780;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* ---------- 90-Tage-Leiste im Szenario (Vorher/Nachher) ------------------- */
.fo-page .fo-scn-tl {
  margin: 0 0 16px;
  background: linear-gradient(160deg, var(--fo-panel), var(--fo-panel2) 150%);
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-xl);
  box-shadow: var(--fo-shadow2);
  padding: 16px 18px;
}
.fo-page .fo-scn-tl-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.fo-page .fo-scn-tl-head h3 {
  margin: 0;
  font-size: 14px;
  color: var(--fo-ink);
  font-weight: 730;
  letter-spacing: -.012em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.fo-page .fo-scn-tl-head h3 .fo-tk {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fo-accent-deep);
  background: var(--fo-amber-soft);
  border: 1px solid var(--fo-amber-line);
  border-radius: var(--fo-r-pill);
  padding: 3px 9px;
}
.fo-page .fo-scn-hint {
  color: var(--fo-muted);
  font-size: 11.5px;
  font-weight: 600;
}
.fo-page .fo-scn-tl-stations {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.fo-page .fo-scn-tl-stations::before {
  content: "";
  position: absolute;
  left: 11%;
  right: 11%;
  top: 7px;
  height: 2px;
  background: linear-gradient(90deg, var(--fo-green-line), var(--fo-blue-line) 45%, var(--fo-green-line));
  z-index: 0;
}
.fo-page .fo-scn-stat {
  position: relative;
  z-index: 1;
  padding: 0 12px;
  border-left: 1px solid var(--fo-line);
  text-align: left;
  display: flex;
  flex-direction: column;
}
.fo-page .fo-scn-stat:first-child {
  border-left: 0;
  padding-left: 2px;
}
.fo-page .fo-scn-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--fo-panel);
  border: 3px solid var(--fo-green);
  display: block;
  margin-bottom: 11px;
}
.fo-page .fo-scn-dot.d-amber { border-color: var(--fo-accent2); }
.fo-page .fo-scn-dot.d-red { border-color: var(--fo-red); }
.fo-page .fo-scn-dot.d-now {
  background: var(--fo-green);
  box-shadow: 0 0 0 4px var(--fo-green-soft);
}
.fo-page .fo-scn-when {
  font-size: 10.5px;
  font-weight: 780;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fo-muted);
}
.fo-page .fo-scn-val {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--fo-ink);
  margin: 5px 0 3px;
}
.fo-page .fo-scn-val.fo-is-text {
  font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
  font-size: 13.5px;
  font-weight: 720;
  letter-spacing: -.01em;
  color: var(--fo-blue);
}
.fo-page .fo-scn-say {
  margin: 0;
  color: var(--fo-text2);
  font-size: 11.5px;
  line-height: 1.4;
}
.fo-page .fo-scn-badge {
  align-self: flex-start;
  margin-top: 7px;
  font-size: 9.5px;
  font-weight: 780;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: var(--fo-r-pill);
  padding: 2px 8px;
}
.fo-page .fo-scn-badge.ok {
  background: var(--fo-green-soft);
  color: var(--fo-green);
  border: 1px solid var(--fo-green-line);
}
.fo-page .fo-scn-badge.sim {
  background: var(--fo-blue-soft);
  color: var(--fo-blue);
  border: 1px solid var(--fo-blue-line);
}
.fo-page .fo-scn-badge.crit {
  background: var(--fo-red-soft);
  color: var(--fo-red);
  border: 1px solid var(--fo-red-line);
}
.fo-page .fo-scn-val.fo-is-text.fo-scn-crit { color: var(--fo-red); }
.fo-page .fo-scn-tl-foot {
  margin-top: 15px;
  border-top: 1px dashed var(--fo-line);
  padding-top: 11px;
}
.fo-page .fo-scn-tl-foot small {
  color: var(--fo-muted);
  font-size: 11.5px;
}

/* ---------- Sektions-Kopf „Was wäre, wenn …?" ----------------------------- */
.fo-page .fo-scn-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin: 4px 0 14px;
}
.fo-page .fo-scn-k {
  color: var(--fo-muted);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 750;
}
.fo-page .fo-scn-head h2 {
  margin: 6px 0 4px;
  font-size: 21px;
  color: var(--fo-ink);
  font-weight: 760;
  letter-spacing: -.025em;
}
.fo-page .fo-scn-sub {
  margin: 0;
  color: var(--fo-text2);
  font-size: 13px;
  line-height: 1.5;
  max-width: 60ch;
}

/* ---------- Grid: Inputs links · Vergleich rechts ------------------------- */
.fo-page .fo-scn-grid {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 16px;
  align-items: start;
}

/* ---------- ANNAHMEN-Inputs (links) --------------------------------------- */
.fo-page .fo-scn-panel {
  background: var(--fo-panel);
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-hero);
  box-shadow: var(--fo-shadow2);
  padding: 22px 24px;
}
.fo-page .fo-scn-panel h3 {
  font-size: 18px;
  margin: 7px 0 4px;
  color: var(--fo-ink);
  letter-spacing: -.025em;
  font-weight: 730;
}
.fo-page .fo-scn-lead {
  margin: 0 0 18px;
  color: var(--fo-text2);
  font-size: 13.5px;
  line-height: 1.5;
}
.fo-page .fo-scn-field {
  border-top: 1px solid var(--fo-line);
  padding: 16px 0;
}
.fo-page .fo-scn-field:first-of-type {
  border-top: 0;
  padding-top: 2px;
}
.fo-page .fo-scn-lbl {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.fo-page .fo-scn-lbl b {
  font-size: 14px;
  color: var(--fo-ink);
  font-weight: 700;
}
.fo-page .fo-scn-fval {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 14px;
  font-weight: 650;
  color: var(--fo-blue);
}
.fo-page .fo-scn-field small {
  display: block;
  color: var(--fo-muted);
  font-size: 12px;
  margin: 3px 0 11px;
  line-height: 1.45;
}
.fo-page .fo-scn-range {
  width: 100%;
  accent-color: var(--fo-blue);
  height: 6px;
}
/* Konsistenter Fokus-Ring wie auf den klickbaren Stationen (Audit B#8). */
.fo-page .fo-scn-range:focus-visible {
  outline: 2px solid var(--fo-blue);
  outline-offset: 2px;
}
.fo-page .fo-scn-opts {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.fo-page .fo-scn-opt {
  border: 1px solid var(--fo-line);
  background: var(--fo-panel2);
  color: var(--fo-text2);
  border-radius: var(--fo-r-pill);
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 680;
  cursor: pointer;
}
.fo-page .fo-scn-opt.fo-on {
  background: var(--fo-blue-soft);
  color: var(--fo-blue);
  border-color: var(--fo-blue-line);
}
.fo-page .fo-scn-foot {
  display: flex;
  gap: 9px;
  margin-top: 18px;
  flex-wrap: wrap;
  align-items: center;
}
.fo-page .fo-scn-foot-note {
  margin: 14px 0 0;
  color: var(--fo-muted);
  font-size: 12px;
  line-height: 1.45;
}

/* ---------- Vergleich (rechts): Kernbotschaft + Tabelle + Umschichtung ---- */
.fo-page .fo-scn-cmp {
  display: grid;
  gap: 12px;
}

/* Kernbotschaft (visuell, Punkt 5) */
.fo-page .fo-scn-core {
  display: flex;
  gap: 13px;
  align-items: center;
  background: linear-gradient(135deg, var(--fo-blue-soft), transparent 150%);
  border: 1px solid var(--fo-blue-line);
  border-radius: var(--fo-r-hero);
  padding: 16px 18px;
}
.fo-page .fo-scn-core-ico {
  width: 40px;
  height: 40px;
  border-radius: var(--fo-r-md);
  flex: none;
  display: grid;
  place-items: center;
  background: var(--fo-blue-soft);
  color: var(--fo-blue);
  border: 1px solid var(--fo-blue-line);
}
.fo-page .fo-scn-core b {
  display: block;
  font-size: 15px;
  color: var(--fo-ink);
  font-weight: 760;
  letter-spacing: -.01em;
}
.fo-page .fo-scn-core p {
  margin: 3px 0 0;
  color: var(--fo-text2);
  font-size: 12.5px;
  line-height: 1.45;
}
.fo-page .fo-scn-core p em {
  font-style: normal;
  font-weight: 730;
  color: var(--fo-blue);
}

/* Vorher/Nachher-Tabelle (4 Zeilen) */
.fo-page .fo-scn-ct {
  background: var(--fo-panel);
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-xl);
  box-shadow: var(--fo-shadow2);
  overflow: hidden;
}
.fo-page .fo-scn-ct-head,
.fo-page .fo-scn-ct-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 28px 1fr;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
}
.fo-page .fo-scn-ct-head {
  background: var(--fo-panel2);
  border-bottom: 1px solid var(--fo-line);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fo-muted);
}
.fo-page .fo-scn-ct-head .fo-scn-ct-after { color: var(--fo-blue); }
.fo-page .fo-scn-ct-row {
  border-top: 1px solid var(--fo-line);
  font-size: 13px;
}
.fo-page .fo-scn-ct-row:first-of-type { border-top: 0; }
.fo-page .fo-scn-ct-name {
  color: var(--fo-text);
  font-weight: 650;
}
.fo-page .fo-scn-ct-name small {
  display: block;
  color: var(--fo-muted);
  font-size: 11px;
  font-weight: 550;
  margin-top: 1px;
  letter-spacing: 0;
  text-transform: none;
}
.fo-page .fo-scn-ct-b4 {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px;
  font-weight: 650;
  color: var(--fo-text2);
}
.fo-page .fo-scn-ct-arr {
  color: var(--fo-muted);
  text-align: center;
}
.fo-page .fo-scn-ct-af {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13px;
  font-weight: 700;
  color: var(--fo-blue);
}
.fo-page .fo-scn-ct-af.fo-same { color: var(--fo-text2); }
.fo-page .fo-scn-ct-af.fo-good { color: var(--fo-green); }
.fo-page .fo-scn-ct-af.fo-warn { color: var(--fo-orange); }

/* Geld-Umschichtung (ruhig, dezent) */
.fo-page .fo-scn-flow {
  background: var(--fo-panel);
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-xl);
  box-shadow: var(--fo-shadow2);
  padding: 18px 20px;
}
.fo-page .fo-scn-flow-k {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.fo-page .fo-scn-flow-k b {
  font-size: 13.5px;
  color: var(--fo-ink);
  font-weight: 730;
}
.fo-page .fo-scn-flow-k small {
  color: var(--fo-muted);
  font-size: 11px;
  font-weight: 650;
}
.fo-page .fo-scn-flow-track {
  display: grid;
  grid-template-columns: 1fr 30px 1fr 30px 1fr;
  align-items: center;
  gap: 0;
}
.fo-page .fo-scn-flow-node {
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-md);
  background: var(--fo-panel2);
  padding: 11px 12px;
  text-align: center;
}
.fo-page .fo-fn-label {
  font-size: 10px;
  font-weight: 780;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fo-muted);
}
.fo-page .fo-fn-val {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 14px;
  font-weight: 700;
  color: var(--fo-ink);
  margin-top: 4px;
  letter-spacing: -.02em;
}
.fo-page .fo-scn-flow-node.fo-fn-bank { border-color: var(--fo-gray-line); }
.fo-page .fo-scn-flow-node.fo-fn-reserve {
  border-color: var(--fo-amber-line);
  background: var(--fo-amber-soft);
}
.fo-page .fo-scn-flow-node.fo-fn-reserve .fo-fn-val { color: var(--fo-amber); }
.fo-page .fo-scn-flow-node.fo-fn-free {
  border-color: var(--fo-green-line);
  background: var(--fo-green-soft);
}
.fo-page .fo-scn-flow-node.fo-fn-free .fo-fn-val { color: var(--fo-green); }
.fo-page .fo-scn-flow-arrow {
  position: relative;
  height: 3px;
  background: var(--fo-line);
  border-radius: 3px;
  margin: 0 3px;
}
.fo-page .fo-scn-flow-arrow .fo-fa-fill {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--fo-accent), var(--fo-accent2));
  border-radius: 3px;
  transition: transform .6s cubic-bezier(.32, .72, .25, 1);
}
.fo-page .fo-scn-flow-arrow::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: var(--fo-accent2);
}
.fo-page .fo-scn-flow-arrow .fo-fa-pulse {
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fo-accent);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px var(--fo-amber-soft);
  opacity: 0;
  animation: fo-scn-pulse 2.6s ease-in-out infinite;
}
.fo-page .fo-scn-flow-foot {
  margin-top: 13px;
  display: flex;
  gap: 9px;
  align-items: flex-start;
  border-top: 1px dashed var(--fo-line);
  padding-top: 11px;
}
.fo-page .fo-scn-flow-foot svg {
  flex: none;
  color: var(--fo-blue);
  margin-top: 1px;
}
.fo-page .fo-scn-flow-foot p {
  margin: 0;
  color: var(--fo-text2);
  font-size: 12px;
  line-height: 1.45;
}
.fo-page .fo-scn-flow-foot p b { color: var(--fo-ink); }

/* Hinweis-Box (Compliance: was die Simulation NICHT tut) */
.fo-page .fo-scn-note {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  background: var(--fo-blue-soft);
  border: 1px solid var(--fo-blue-line);
  border-radius: var(--fo-r-xl);
  padding: 13px 16px;
}
.fo-page .fo-scn-note svg {
  flex: none;
  color: var(--fo-blue);
  margin-top: 1px;
}
.fo-page .fo-scn-note p {
  margin: 0;
  color: var(--fo-text2);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ---------- Geld-Umschichtung: ruhige Bewegung von links nach rechts ------ */
@keyframes fo-scn-pulse {
  0% { left: 0; opacity: 0; }
  18% { opacity: .9; }
  82% { opacity: .9; }
  100% { left: 100%; opacity: 0; }
}

/* reduced-motion: statischer Endzustand — kein Tween, kein Pulse. */
@media (prefers-reduced-motion: reduce) {
  .fo-page .fo-scn-flow-arrow .fo-fa-fill {
    transition: none;
    transform: scaleX(1);
  }
  .fo-page .fo-scn-flow-arrow .fo-fa-pulse {
    animation: none;
    opacity: 0;
  }
}

/* ---------- Responsive: einspaltig auf schmalen Viewports ----------------- */
@media (max-width: 880px) {
  .fo-page .fo-scn-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .fo-page .fo-scn-tl-stations { grid-template-columns: repeat(2, 1fr); gap: 12px 0; }
  .fo-page .fo-scn-tl-stations::before { display: none; }
  .fo-page .fo-scn-flow-track { grid-template-columns: 1fr; gap: 8px; }
  .fo-page .fo-scn-flow-arrow { display: none; }
  .fo-page .fo-scn-ct-head,
  .fo-page .fo-scn-ct-row { grid-template-columns: 1.2fr 1fr 18px 1fr; }
}
/* Sehr schmal (Telefon hochkant): Vorher/Nachher-Tabelle einspaltig stapeln —
   Kennzahl oben, „Vorher → Nachher" darunter in einer Zeile (der Pfeil zeigt
   die Richtung, die Spaltenköpfe entfallen). Szenario-Stationen einspaltig. */
@media (max-width: 480px) {
  .fo-page .fo-scn-tl-stations { grid-template-columns: 1fr; gap: 14px 0; }
  .fo-page .fo-scn-ct-head { display: none; }
  .fo-page .fo-scn-ct-row {
    grid-template-columns: auto auto 1fr;
    align-items: baseline;
    gap: 4px 8px;
    padding: 12px 16px;
  }
  .fo-page .fo-scn-ct-name {
    grid-column: 1 / -1;
    margin-bottom: 4px;
  }
  .fo-page .fo-scn-ct-b4 { justify-self: start; }
  .fo-page .fo-scn-ct-arr { justify-self: center; }
  .fo-page .fo-scn-ct-af { justify-self: start; }
}

/* ============================================================================
   _26f-finanzcheck-start.css — 90-Tage-Finanzcheck V3 Start-/Empty-Zustand (PR7)
   ----------------------------------------------------------------------------
   Eigenes Partial für den emotionalen + handlungsorientierten Start-Zustand
   (foEmptyState, empty-state.js). Spiegelt das freigegebene V3-Mockup
   (docs/year-outlook-v2/mockup/index.html, Zustand C „Start"):
     - emotionale Promo-Karte „In 2 Minuten startklar"
     - Fortschritts-Karte (Balken .fo-spc-bar i, Breite via data-fo-pct + mount)
     - Start-CTA-Karte
     - 4-Schritt-Onboarding-Liste (erledigt/aktiv/gesperrt)
     - gesperrtes 90-Tage-Preview (Lock-Overlay über den „—"-Stationen)
     - Section-Head/Kicker (nur Start; die A/B-Sektionen leben in _26c).

   Nutzt ausschliesslich die --fo-* Tokens, die _26-finanzcheck.css scoped unter
   .fo-page definiert (Single source). KEINE Token-Neudefinition hier. app.css
   wird über manifest.json gebaut — niemals app.css hand-editieren.

   Eigene Mobile-Breakpoints am Ende dieses Partials (V3-Mockup 1240/760): das
   Start-Grid wird einspaltig, die Onboarding-Karten stapeln, die Lock-Vorschau
   bleibt lesbar.
   ============================================================================ */

/* ---------- Section-Head / Kicker (Start-Onboarding) ---------------------- */
/* .fo-section entfernt: war dead CSS — keine JS-Funktion emitiert diese Klasse. */
.fo-section-head {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 18px;
}
.fo-section-head .fo-kicker {
  color: var(--fo-accent-deep);
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: .15em;
  text-transform: uppercase;
}
html[data-theme="dark"] .fo-section-head .fo-kicker { color: var(--fo-accent); }
.fo-section-head h2 {
  font-size: clamp(20px, 2vw, 26px);
  margin: 7px 0 6px;
  letter-spacing: -.03em;
  color: var(--fo-ink);
  font-weight: 750;
  line-height: 1.12;
}
.fo-section-sub {
  color: var(--fo-text2);
  margin: 0;
  font-size: 14px;
  max-width: 760px;
  line-height: 1.5;
}

/* ---------- Start-Grid (Promo links / Fortschritt+CTA rechts) ------------- */
.fo-start-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
  margin-top: 16px;
  align-items: stretch;
}

/* ---------- Emotionale Promo-Karte ---------------------------------------- */
.fo-start-promo {
  /* stylelint-disable-next-line color-no-hex -- bewusst dunkle Promo-Karte in
     BEIDEN Themes (Mockup: linear-gradient(#141b30,#26314f), color:#fff); es
     gibt kein App-Token für diese feste „dark hero on light page"-Fläche. */
  background: linear-gradient(150deg, #141b30, #26314f);
  /* stylelint-disable-next-line color-no-hex -- s.o. (heller Text auf dunkel) */
  color: #fff;
  border-radius: var(--fo-r-hero);
  padding: 26px;
  box-shadow: var(--fo-shadow);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* stylelint-disable-next-line color-no-hex -- Dark-Theme-Variante des Promo-
   Gradients (Mockup), bleibt eine feste markante Fläche. */
html[data-theme="dark"] .fo-start-promo { background: linear-gradient(150deg, #1b2440, #2e3b63); }
.fo-start-promo .fo-sp-k {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  /* stylelint-disable-next-line color-no-hex -- dunkle Schrift auf dem hellen
     accent-Pill (Mockup color:#0c0f1a); in beiden Themes lesbar. */
  color: #0c0f1a;
  background: var(--fo-accent);
  border-radius: var(--fo-r-pill);
  padding: 5px 12px;
  margin-bottom: 14px;
}
.fo-start-promo .fo-sp-k svg { flex: none; }
.fo-start-promo h3 {
  margin: 0 0 9px;
  font-size: 22px;
  font-weight: 780;
  letter-spacing: -.03em;
  line-height: 1.14;
}
.fo-start-promo p {
  margin: 0;
  /* stylelint-disable-next-line color-no-hex -- gedämpfter Hellton auf der
     dunklen Promo-Karte (Mockup #ccd5ea); kein passendes Token auf Dark-BG. */
  color: #ccd5ea;
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 42ch;
}
.fo-start-promo .fo-sp-preview {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.fo-start-promo .fo-sp-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 680;
  /* stylelint-disable-next-line color-no-hex -- heller Tag-Text + Glas-Effekt
     auf der dunklen Promo-Karte (Mockup-Werte); kein Token auf Dark-BG. */
  color: #e8eef9;
  /* stylelint-disable-next-line declaration-property-value-disallowed-list --
     Glas-Tint auf der IMMER dunklen Promo-Karte: var(--surface-rgba-base) flippt
     im Light-Theme auf 0,0,0 (schwarz) und würde den weissen Schimmer auf der
     festen Dark-Fläche zerstören; daher festes Weiss (Mockup-Wert). */
  background: rgba(255, 255, 255, .1);
  /* stylelint-disable-next-line declaration-property-value-disallowed-list --
     s.o. (Glas-Rand, festes Weiss auf der immer dunklen Promo-Karte). */
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--fo-r-pill);
  padding: 5px 11px;
}
/* stylelint-disable-next-line color-no-hex -- grüner Haken auf der dunklen
   Promo-Karte (Mockup #5fe0ae); kein Token mit ausreichendem Kontrast hier. */
.fo-start-promo .fo-sp-tag svg { flex: none; color: #5fe0ae; }

/* ---------- Fortschritts- + CTA-Karte (rechte Spalte) --------------------- */
.fo-start-side { display: flex; flex-direction: column; gap: 14px; }
.fo-start-progress-card {
  background: var(--fo-panel);
  border: 1px solid var(--fo-amber-line);
  border-radius: var(--fo-r-xl);
  padding: 18px 20px;
  box-shadow: var(--fo-shadow2);
}
.fo-start-progress-card .fo-spc-k {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fo-accent-deep);
}
html[data-theme="dark"] .fo-start-progress-card .fo-spc-k { color: var(--fo-accent); }
.fo-start-progress-card .fo-spc-k svg { flex: none; }
.fo-start-progress-card b {
  display: block;
  margin: 9px 0 4px;
  font-size: 18px;
  color: var(--fo-ink);
  font-weight: 760;
  letter-spacing: -.02em;
}
.fo-start-progress-card p {
  margin: 0 0 12px;
  color: var(--fo-text2);
  font-size: 12.5px;
  line-height: 1.45;
}
.fo-spc-bar {
  height: 9px;
  border-radius: var(--fo-r-pill);
  background: var(--fo-gray-soft);
  overflow: hidden;
}
.fo-spc-bar i {
  display: block;
  height: 100%;
  /* Breite kommt aus data-fo-pct + foHero.mount() (CSP-Freeze, kein style=).
     Fallback-Stummel, falls der Post-Insert-Hook nicht läuft (Node/Reduced). */
  width: 8%;
  background: linear-gradient(90deg, var(--fo-accent), var(--fo-accent2));
  border-radius: var(--fo-r-pill);
  transition: width .4s ease;
}
.fo-spc-steps {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  font-weight: 650;
  color: var(--fo-muted);
}
.fo-start-cta-card {
  background: var(--fo-panel);
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-xl);
  padding: 18px 20px;
  box-shadow: var(--fo-shadow2);
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.fo-start-cta-card b { font-size: 14px; color: var(--fo-ink); font-weight: 730; }
.fo-start-cta-card p { margin: 0; color: var(--fo-text2); font-size: 12.5px; line-height: 1.45; }
.fo-scc-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 3px; }

/* ---------- Start-Buttons (.fo-sbtn) -------------------------------------- */
.fo-sbtn {
  border: 1px solid var(--fo-line-strong);
  background: var(--fo-panel);
  color: var(--fo-text);
  border-radius: var(--fo-r-sm);
  padding: 9px 15px;
  font-weight: var(--fw-semibold, 600);
  font-size: 13px;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  transition: transform .15s, background .15s;
}
.fo-sbtn:hover { transform: translateY(-1px); }
.fo-sbtn.fo-sbtn-primary {
  background: var(--fo-accent);
  border-color: var(--fo-accent);
  color: var(--fo-accent-ink);
}
.fo-sbtn.fo-sbtn-primary:hover { background: var(--fo-accent2); }

/* ---------- Zusammengeklappte Onboarding-Schritte ------------------------ */
.fo-start-onb-collapsed {
  margin-top: 22px;
}
.fo-start-onb-collapsed summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 2px;
  color: var(--fo-text2);
  font-size: 13px;
  font-weight: 700;
  user-select: none;
}
.fo-start-onb-collapsed summary::marker { content: ""; }
.fo-start-onb-collapsed summary::-webkit-details-marker { display: none; }
.fo-start-onb-collapsed summary:hover { color: var(--fo-ink); }
.fo-start-onb-collapsed summary:focus-visible {
  outline: 2px solid var(--fo-blue);
  outline-offset: 3px;
  border-radius: var(--fo-r-sm);
}
.fo-start-onb-collapsed .fo-onb {
  margin-top: 12px;
}

/* ---------- 4-Schritt-Onboarding-Liste ------------------------------------ */
.fo-onb {
  background: var(--fo-panel);
  border: 1px solid var(--fo-line);
  border-radius: var(--fo-r-hero);
  padding: 26px;
  box-shadow: var(--fo-shadow2);
}
.fo-onb-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-top: 1px solid var(--fo-line);
  padding: 16px 0;
}
.fo-onb-step:first-child { border-top: 0; padding-top: 4px; }
.fo-onb-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-weight: 700;
  font-size: 13px;
  border: 1px solid var(--fo-line);
  color: var(--fo-muted);
  background: var(--fo-panel2);
}
.fo-onb-step.fo-active .fo-onb-num {
  background: var(--fo-accent);
  border-color: var(--fo-accent);
  color: var(--fo-accent-ink);
  box-shadow: 0 0 0 4px var(--fo-amber-soft);
}
.fo-onb-step.fo-done .fo-onb-num {
  /* stylelint-disable-next-line color-no-hex -- weisses Häkchen auf dem
     gefüllten green-Kreis (Mockup color:#fff); kein „on-success"-Token. */
  color: #fff;
  background: var(--fo-green);
  border-color: var(--fo-green);
}
.fo-onb-body { flex: 1; min-width: 0; }
.fo-onb-body b { font-size: 14.5px; color: var(--fo-text2); font-weight: 700; }
.fo-onb-step.fo-active .fo-onb-body b { color: var(--fo-ink); }
.fo-onb-body p { margin: 3px 0 0; color: var(--fo-muted); font-size: 13px; line-height: 1.5; }
.fo-onb-step.fo-active .fo-onb-body p { color: var(--fo-text2); }
.fo-onb-cta { margin-left: auto; align-self: center; }
.fo-onb-tag {
  font-size: 10.5px;
  font-weight: 780;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: var(--fo-r-pill);
  padding: 4px 10px;
  color: var(--fo-muted);
  background: var(--fo-gray-soft);
  border: 1px solid var(--fo-gray-line);
  white-space: nowrap;
  align-self: center;
  margin-left: auto;
}
.fo-onb-tag.fo-t-done {
  color: var(--fo-green);
  background: var(--fo-green-soft);
  border-color: var(--fo-green-line);
}
.fo-onb-tag.fo-t-now {
  color: var(--fo-amber);
  background: var(--fo-amber-soft);
  border-color: var(--fo-amber-line);
}

/* ---------- Gesperrtes 90-Tage-Preview (Lock-Overlay) --------------------- */
.fo-tl-strip.fo-is-locked { position: relative; }
.fo-tl-strip.fo-is-locked .fo-tl-stations {
  filter: blur(2px);
  opacity: .5;
  pointer-events: none;
}
.fo-tl-lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 18px;
  border-radius: var(--fo-r-xl);
  background: linear-gradient(180deg, transparent, var(--fo-panel) 60%);
}
.fo-tl-lock-overlay .fo-tlo-ico {
  width: 40px;
  height: 40px;
  border-radius: var(--fo-r-md);
  background: var(--fo-gray-soft);
  color: var(--fo-gray);
  display: grid;
  place-items: center;
}
.fo-tl-lock-overlay b { font-size: 14px; color: var(--fo-ink); font-weight: 730; }
.fo-tl-lock-overlay p {
  margin: 0;
  color: var(--fo-text2);
  font-size: 12px;
  max-width: 46ch;
  line-height: 1.45;
}

/* ---------- Responsive (V3-Mockup-Breakpoints 1240/760) ------------------- */
@media (max-width: 1240px) {
  .fo-start-hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .fo-start-promo { padding: 22px; }
  .fo-start-promo h3 { font-size: 20px; }
  .fo-start-onb-collapsed { margin-top: 18px; }
  .fo-start-onb-collapsed .fo-onb { margin-top: 10px; }
  .fo-onb { padding: 20px 18px; }
  /* Schritt-Tag/CTA in eine eigene Zeile UNTER den Text klappen (volle Breite),
     damit Titel + Beschreibung nicht in eine schmale Spalte gequetscht werden. */
  .fo-onb-step { flex-wrap: wrap; }
  .fo-onb-body { flex: 1 1 calc(100% - 44px); }
  .fo-onb-cta,
  .fo-onb-tag {
    flex: 0 0 100%;
    margin-left: 44px;
    align-self: flex-start;
    text-align: center;
  }
  .fo-onb-cta { margin-top: 4px; }
  .fo-scc-btns .fo-sbtn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .fo-spc-bar i,
  .fo-sbtn { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   _26-dashboard-hero.css — Gemeinsames Auswertungen-Hero-System
   ────────────────────────────────────────────────────────────────────────
   Geteilte Dashboard-Hero-DNA für die drei Auswertungen-Views
   (Jahresübersicht · Jahresausblick · Steuergesundheit). Generalisiert aus
   dem token-getriebenen .yf-anchor-Pattern. Token-only (color-no-hex,
   Light/Dark automatisch über _00-tokens.css). Yellow nur Akzent, Grün
   positiv, Rot Warnung/Fehler. Honest-by-default: kein grünes Signal ohne
   Basis. Eine ruhige, hochwertige Executive-Summary — kein verspieltes UI.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Geteilter Content-Rahmen ──────────────────────────────────────────────
   Reiner Layout-Helper (Rhythmus/Padding). Die Content-Breite kommt vom
   bestehenden Page-Wrapper (.app-page ~1220 · .report-page 1240 · .sg2
   1240) — eine kohärente Auswertungen-Familie ohne eigenen Inner-Cap. */
.dash-rail {
  padding-bottom: var(--space-3xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

/* ── Hero-Karte ────────────────────────────────────────────────────────────
   DIE eine geteilte Hero-Komponente für alle drei Auswertungen-Views
   (Jahresübersicht · Jahresausblick · Steuergesundheit). Oberfläche 1:1
   wie die etablierte Steuergesundheit-Referenz: ruhige dunkle Navy-
   Fläche mit dezentem Glow + Sheen, kein 2px-Strip. Light/Dark via
   body.light-Override (identisch zur Referenz).
   Aufbau: Top-Row (Kicker links · Status-Pill rechts, volle Breite) →
   Body-Row (Hauptinhalt links · Insight-Karten rechts) → optional Foot. */
.dash-hero {
  position: relative;
  /* overflow:visible damit das Jahresaktionen-Dropdown (yo-ja-panel, abs
     positioned unter dem Trigger) nicht am Hero-Rand abgeschnitten wird.
     Die ::before-Sheen-Deko clippt sich selbst über border-radius:inherit.
     z-index:2 hebt den Hero über die nachfolgenden positionierten Module
     (z.B. .yo-yearband), sodass das Menü darüber paintet. */
  overflow: visible;
  z-index: 2;
  border: 1px solid rgba(var(--surface-rgba-base), .08);
  background:
    linear-gradient(150deg, rgba(25, 33, 51, .92), rgba(17, 22, 35, .98)),
    radial-gradient(circle at top right, rgba(123, 176, 255, .08), transparent 36%);
  border-radius: var(--tax-surface-hero-radius);
  padding: var(--tax-surface-hero-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  /* Einheitlicher Abstand zu den Detailmodulen darunter (Chart/Monats-
     karten · Accordion · Prioritäten/Diagnose) — gleiche Rhythmik über
     alle drei Auswertungen-Views. */
  margin-bottom: var(--space-2xl);
}
/* Dezenter Sheen oben rechts — identisch zur Referenz, kein Akzent-Strip. */
.dash-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 82% 14%, rgba(var(--surface-rgba-base), .05), transparent 18%);
  pointer-events: none;
}
.dash-hero > * { position: relative; z-index: 1; }
body.light .dash-hero {
  border-color: rgba(26, 30, 46, .08);
  background: linear-gradient(150deg, rgba(246, 248, 253, .96), rgba(239, 242, 249, .98));
}

/* Top-Row: volle Hero-Breite — Kicker links, Status-Pill rechts bündig
   mit dem rechten Hero-Innenabstand. Schwebt NIE im Zwischenraum. */
.dash-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
}

/* Body-Row: Hauptinhalt links, Insight-Karten rechts. */
.dash-hero-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--tax-surface-side-width);
  gap: var(--space-3xl);
  align-items: start;
}

.dash-hero-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
}
/* Exakt wie .sgv2-kicker (Steuergesundheit ist die Referenz):
   --fs-sm · fw-bold · uppercase · .08em · accent. */
.dash-hero-kicker {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.dash-hero-kicker b { color: var(--accent); font-weight: var(--fw-bold); }

/* Reiner Status-Pill (kein Toggle/Switch). Neutral-Variante nutzt
   theme-flippende Tokens (--bg2/--border/--text) statt rgba-Surface-
   Composites → in Light UND Dark klar lesbar. Tone-Varianten unten
   sind bereits AA-getunt (_00-tokens.css). */
.dash-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--tax-surface-badge-gap);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text);
  border: 1px solid var(--border);
  background: var(--bg2);
  padding: var(--tax-surface-badge-padding);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.dash-hero-pill-dot {
  width: var(--tax-surface-badge-dot-size);
  height: var(--tax-surface-badge-dot-size);
  border-radius: 50%;
  background: var(--text3);
  flex: none;
}
.dash-hero-pill--good { color: var(--tone-good-fg); border-color: var(--tone-good-border); background: var(--tone-good-bg); }
.dash-hero-pill--good .dash-hero-pill-dot { background: var(--green); }
.dash-hero-pill--warn { color: var(--tone-warn-text); border-color: var(--tone-warn-border); background: var(--tone-warn-bg); }
.dash-hero-pill--warn .dash-hero-pill-dot { background: var(--accent); }
.dash-hero-pill--poor { color: var(--tone-poor-fg); border-color: var(--tone-poor-border); background: var(--tone-poor-bg); }
.dash-hero-pill--poor .dash-hero-pill-dot { background: var(--red); }

/* Headline-Zeile — optional mit Visual-Slot links (Score-Ring) */
.dash-hero-headrow {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  min-width: 0;
}
.dash-hero-visual { flex: none; display: flex; color: var(--text); }
.dash-hero-headtext { min-width: 0; display: flex; flex-direction: column; gap: var(--space-sm); }

.dash-hero-headline {
  margin: 0;
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);
  letter-spacing: -.025em;
  line-height: var(--lh-tight);
  color: var(--text);
}
.dash-hero-headline .dash-pos { color: var(--green); }
.dash-hero-headline .dash-neg { color: var(--red); }
.dash-hero-sub {
  margin: 0;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--text2);
  max-width: 56ch;
}
.dash-hero-sub .dash-pos { color: var(--green); font-weight: var(--fw-semibold); }
.dash-hero-sub .dash-neg { color: var(--red); font-weight: var(--fw-semibold); }

/* Rechtshinweis: Steuergesundheit ist Orientierung, keine Steuerberatung. */
.dash-hero-disclaimer {
  margin: var(--space-sm) 0 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  color: var(--text3);
  max-width: 56ch;
}

/* Dominante Hauptzahl */
.dash-hero-figure {
  display: flex;
  flex-direction: column;
  gap: var(--tax-surface-figure-gap);
  border-left: var(--tax-surface-figure-border-width) solid var(--tax-surface-figure-border);
  padding-left: var(--space-lg);
  margin: var(--space-sm) 0;
}
.dash-hero-figure-val {
  font-size: var(--tax-surface-figure-size);
  font-weight: var(--fw-heavy);
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--text);
}
.dash-hero-figure-val.dash-pos { color: var(--green); }
.dash-hero-figure-val.dash-neg { color: var(--red); }
.dash-hero-figure-cap { font-size: var(--fs-md); color: var(--text3); }

.dash-hero-meta {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--text3);
  display: flex;
  align-items: center;
  gap: 7px;
}

/* Chip-System (Status · Hinweis · Warnung) — eine Formensprache */
.dash-hero-chips {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: 2px;
}
.dash-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text2);
  border: 1px solid var(--border);
  background: var(--bg2);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
}
.dash-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text3);
  flex: none;
}
.dash-chip--good .dash-chip-dot { background: var(--green); }
.dash-chip--warn { color: var(--tone-warn-text); }
.dash-chip--warn .dash-chip-dot { background: var(--accent); }
.dash-chip--poor { color: var(--tone-poor-fg); }
.dash-chip--poor .dash-chip-dot { background: var(--red); }

/* Klickbare Chip-Variante (button.dash-chip): Cursor, Hover-Feedback und
   Lupen-Icon rechts. Der reine Status-Chip (span) bleibt unverändert. */
button.dash-chip {
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
button.dash-chip:hover { border-color: var(--accent2); transform: translateY(-1px); }
button.dash-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dash-chip-ic { margin-left: 2px; color: var(--text3); flex: none; }
button.dash-chip:hover .dash-chip-ic { color: var(--text2); }

/* Aktionen */
.dash-hero-actions { display: flex; gap: var(--space-md); flex-wrap: wrap; margin-top: 4px; }
.dash-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  padding: 9px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  border: 1px solid var(--border2);
  background: var(--bg3);
  color: var(--text);
}
.dash-btn:hover { border-color: var(--accent2); }
.dash-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dash-btn--primary { border-color: var(--accent); background: transparent; color: var(--accent); }
.dash-btn--primary:hover { background: var(--accent-soft); }
.dash-btn--ghost { background: transparent; }

/* Rechte Insight-Spalte (1–2 kompakte Karten) */
.dash-hero-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
}
.dash-insight {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--border);
  background: var(--bg2);
  border-radius: var(--radius-xl);
  padding: var(--space-lg) var(--space-xl);
  text-align: left;
  font-family: inherit;
  text-decoration: none;
}
button.dash-insight,
a.dash-insight {
  cursor: pointer;
  transition: background .15s, transform .15s, border-color .15s, box-shadow .15s;
}
button.dash-insight:hover,
a.dash-insight:hover {
  transform: translateY(-1px);
  border-color: var(--border2);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}
button.dash-insight:focus-visible,
a.dash-insight:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.dash-insight-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: var(--fw-bold);
  color: var(--text3);
}
.dash-insight-val {
  font-size: var(--fs-xl);
  font-weight: var(--fw-heavy);
  font-family: var(--mono);
  line-height: 1.1;
  color: var(--text);
  letter-spacing: -.02em;
}
.dash-insight-cap { font-size: var(--fs-base); color: var(--text3); line-height: 1.4; }
.dash-insight--good { border-color: var(--tone-good-border); }
.dash-insight--good .dash-insight-val { color: var(--green); }
.dash-insight--warn { border-color: var(--tone-warn-border); }
.dash-insight--warn .dash-insight-val { color: var(--accent); }
.dash-insight--poor { border-color: var(--tone-poor-border); }
.dash-insight--poor .dash-insight-val { color: var(--red); }

/* Voll-Breiter Fuß-Slot (z. B. „Zahlen & Annahmen"-Accordion) */
.dash-hero-foot {
  width: 100%;
  border-top: 1px solid var(--border);
  padding-top: var(--space-xl);
}

/* ── Geteilter Section-Header für Detailmodule unter dem Hero ───────────── */
.dash-section { display: flex; flex-direction: column; gap: var(--space-lg); }
.dash-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
}
.dash-section-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -.01em;
  color: var(--text);
}
.dash-section-sub { font-size: var(--fs-base); color: var(--text3); }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .dash-hero { padding: var(--tax-surface-hero-padding-tablet); }
  .dash-hero-body { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .dash-hero-aside { flex-direction: row; flex-wrap: wrap; }
  .dash-hero-aside .dash-insight { flex: 1 1 220px; }
}
/* ── Mobile (< 768px) — echtes Mobile-Dashboard ────────────────────────────
   Desktop/Tablet (>768px) bleiben unverändert; alle Verdichtung lebt
   ausschließlich hier. Geteilt von Jahresübersicht · Jahresausblick ·
   Steuergesundheit → eine konsistente mobile KPI-Logik. */
@media (max-width: 768px) {
  .dash-rail { padding-bottom: var(--space-xl); gap: var(--space-lg); }

  /* Hero verdichtet: weniger Padding, dezenterer Radius, kein Sheen,
     enger Rhythmus zum nächsten Modul. */
  .dash-hero {
    padding: 16px 14px;
    border-radius: var(--radius-xl);
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
  }
  /* Deko-Sheen (Definition: `.dash-hero::before`, oben in dieser Datei,
     Abschnitt „Hero-Karte") mobil bewusst entfernt — die radiale Glanz-
     fläche kostet auf kleinen Screens nur Render/Verlauf ohne Nutzen.
     Einseitige Entfernung ist Absicht, kein versehentliches Auslassen. */
  .dash-hero::before { display: none; }
  .dash-hero-top { flex-wrap: wrap; gap: var(--space-sm); }
  .dash-hero-kicker { font-size: var(--fs-sm); }

  /* Body wird zur vertikalen Flow-Spalte. .dash-hero-main löst sich via
     display:contents auf, damit die wichtigsten KPIs (Aside-Kacheln) VOR
     sekundären Chips/Aktionen erscheinen — reine Reihenfolge-Steuerung
     ohne DOM-Umbau, daher keine Desktop-Regression.
     `.dash-hero-main` ist ein rein präsentationaler <div> ohne role/aria;
     display:contents ist hier unbedenklich. JS-querySelector greift weiter,
     DOM-/AT-Lesereihenfolge bleibt unverändert (nur visuelle Reihenfolge
     via `order` — bewusster Tradeoff für die mobile Priorisierung). */
  .dash-hero-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }
  .dash-hero-main { display: contents; }
  .dash-hero-headrow {
    order: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    min-width: 0;
  }
  .dash-hero-figure  { order: 2; margin: 0; }
  .dash-hero-meta    { order: 3; }
  .dash-hero-aside   { order: 4; }
  .dash-hero-chips   { order: 5; margin-top: 0; }
  .dash-hero-actions { order: 6; margin-top: 0; }

  .dash-hero-headline { font-size: var(--fs-xl); }
  .dash-hero-sub { font-size: var(--fs-base); }
  .dash-hero-figure-val { font-size: var(--tax-surface-figure-size-mobile); }

  /* KPI-Kacheln: kompaktes 2-Spalten-Grid, Höhe rein inhaltsgetrieben.
     Hebt das aus dem 960er-Block geerbte `flex: 1 1 220px` auf, das im
     Column-Flow zu riesigen, fast leeren Karten geführt hat. */
  .dash-hero-aside {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
  }
  .dash-hero-aside .dash-insight {
    flex: none;
    min-height: 0;
    gap: 3px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
  }
  .dash-hero-aside .dash-insight:only-child { grid-column: 1 / -1; }
  .dash-insight-label { font-size: var(--fs-xs); letter-spacing: .08em; }
  .dash-insight-val {
    font-size: var(--fs-md);
    line-height: var(--lh-tight);
    overflow-wrap: anywhere;
  }
  .dash-insight-cap { font-size: var(--fs-sm); line-height: 1.35; }

  /* Chips & Aktionen platzsparend */
  .dash-hero-chips { gap: var(--space-sm); }
  .dash-chip { font-size: var(--fs-sm); padding: 5px 10px; }
  .dash-hero-actions { gap: var(--space-sm); }
  .dash-btn { padding: 8px 12px; font-size: var(--fs-sm); }
}

/* Touch-Target-Floor (WCAG 2.5.5 / Apple HIG) auf coarse Pointern — app-weiter
   WebKit-Sweep (iPhone 13, ergänzend zu #3721): dash-btn 144×31. min-height
   hebt die Hit-Area (steht nach dem mobile-padding-Block → gewinnt bei gleicher
   Spezifität). Der reine Status-.dash-chip (span) ist bewusst AUSGELASSEN:
   Anzeige-Element ohne Klick-Handler (kein Tap-Ziel). Nur der klickbare
   button.dash-chip bekommt den Tap-Floor. */
@media (pointer: coarse) {
  .dash-btn,
  button.dash-chip { min-height: 44px; }
}

/* ══════════════════════════════════════════════════════════════
   Rechnungen (Invoices) — .inv-*
   ══════════════════════════════════════════════════════════════ */
.inv-page{max-width:1100px;margin:0 auto;padding:2px 16px;}
.inv-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:12px;}
.inv-header h1{font-size:30px;font-weight:var(--fw-bold);color:var(--text);margin:0;line-height:1.15;letter-spacing:-0.025em;}

/* Table */
.inv-table{width:100%;border-collapse:collapse;font-size:13px;}
.inv-table th{text-align:left;padding:8px 10px;font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:0.4px;border-bottom:1px solid var(--border);white-space:nowrap;}
.inv-table th.r{text-align:right;}
.inv-table td{padding:10px 10px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle;}
.inv-table td.r{text-align:right;}
.inv-table td.mono{font-family:var(--mono);font-size:12px;}
.inv-table tr:hover{background:var(--bg2);}

/* Status badges */
.inv-s-draft{background:var(--bg3);color:var(--text3);border:1px solid var(--border);}
.inv-s-sent{background:rgba(96,165,250,.1);color:var(--blue);border:1px solid rgba(96,165,250,.2);}
.inv-s-paid{background:rgba(52,211,153,.1);color:var(--green);border:1px solid rgba(52,211,153,.2);}
.inv-s-overdue{background:rgba(248,113,113,.1);color:var(--red);border:1px solid rgba(248,113,113,.2);}
.inv-s-cancelled{background:rgba(232,184,75,.1);color:var(--accent);border:1px solid rgba(232,184,75,.2);}

/* ══════════════════════════════════════════════════════════════
   Rechnungen V3 (Dev) — .inv3-*
   Eigenst\u00e4ndige Cockpit-Ansicht, bestehende V1-Liste bleibt unber\u00fchrt.
   ══════════════════════════════════════════════════════════════ */
.inv3-page{max-width:1240px;margin:0 auto;padding:2px 8px 40px;}
.inv3-page,.inv3-page *{letter-spacing:0;}
.inv3-callout,
.inv3-hero,
.inv3-signalband,
.inv3-workflow,
.inv3-toolbar,
.inv3-list-shell,
.inv3-lowdata{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:linear-gradient(180deg,rgba(var(--surface-rgba-base),.045),rgba(var(--surface-rgba-base),.02));
  box-shadow:0 18px 38px rgba(0,0,0,.18);
}
.inv3-callout::before,
.inv3-hero::before,
.inv3-signalband::before,
.inv3-workflow::before,
.inv3-toolbar::before,
.inv3-list-shell::before,
.inv3-lowdata::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(circle at top right, rgba(232,184,75,.12), transparent 36%),
    radial-gradient(circle at left center, rgba(123,176,255,.08), transparent 34%);
  opacity:.95;
}
.inv3-callout>*,
.inv3-hero>*,
.inv3-signalband>*,
.inv3-workflow>*,
.inv3-toolbar>*,
.inv3-list-shell>*,
.inv3-lowdata>*{position:relative;z-index:1;}
.inv3-callout{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  margin-bottom:14px;
  color:rgba(var(--text-rgba-base),.74);
}
.inv3-callout--muted{background:linear-gradient(180deg,rgba(var(--surface-rgba-base),.04),rgba(var(--surface-rgba-base),.022));}
.inv3-callout-ico{
  width:28px;height:28px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(var(--surface-rgba-base),.05);
  color:rgba(var(--text-rgba-base),.72);
  flex-shrink:0;
}
.inv3-hero{padding:22px 24px 24px;margin-bottom:14px;}
.inv3-hero--compact{padding:22px 24px;}
.inv3-hero--empty{padding-bottom:28px;}
.inv3-comparebar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:flex-start;
  gap:14px;
  margin-bottom:16px;
}
.inv3-suite-nav{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  align-self:flex-start;
}
.inv3-suite-link{
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:rgba(var(--surface-rgba-base),.034);
  color:rgba(var(--text-rgba-base),.7);
  font:inherit;
  font-size:13px;
  font-weight:var(--fw-semibold);
  cursor:pointer;
  transition:border-color var(--tr-base),background var(--tr-base),color var(--tr-base),transform var(--tr-base);
}
.inv3-suite-link:hover{
  color:var(--text-strong);
  border-color:rgba(232,184,75,.18);
  background:rgba(var(--surface-rgba-base),.05);
  transform:translateY(-1px);
}
.inv3-suite-link.is-active{
  border-color:rgba(232,184,75,.24);
  background:rgba(232,184,75,.12);
  color:var(--tone-warn-text);
  cursor:default;
  transform:none;
}
.inv3-compare-kicker{
  display:block;
  font-size:11px;
  font-weight:var(--fw-bold);
  color:rgba(245,208,122,.82);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:3px;
}
.inv3-page-title strong,
.inv3-comparebar strong{font-size:18px;font-weight:var(--fw-heavy);color:var(--text-strong);}
.inv3-compare-actions{display:flex;align-items:center;justify-content:flex-end;align-self:flex-start;gap:8px;flex-wrap:wrap;min-height:0;}
.inv3-header-cta{
  min-height:52px;
  padding:0 22px!important;
  border-radius:16px!important;
  font-size:15px!important;
  font-weight:var(--fw-bold)!important;
  align-self:flex-start;
}
.inv3-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.9fr);
  gap:18px;
  align-items:stretch;
}
.inv3-hero-lead{
  max-width:620px;
  font-size:15px;
  line-height:1.65;
  color:rgba(var(--text-rgba-base),.66);
  margin:0 0 18px;
}
.inv3-hero-kicker{
  display:inline-block;
  font-size:12px;
  font-weight:var(--fw-bold);
  color:rgba(245,208,122,.82);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:10px;
}
.inv3-hero-main h1{
  font-size:36px;
  line-height:1.1;
  font-weight:var(--fw-heavy);
  color:var(--text-strong);
  max-width:720px;
  margin:0 0 10px;
}
.inv3-primary-metric{
  padding:18px 20px 20px;
  border-radius:20px;
  border:1px solid rgba(232,184,75,.16);
  background:linear-gradient(180deg,rgba(232,184,75,.09),rgba(var(--surface-rgba-base),.018));
  box-shadow:inset 0 1px 0 rgba(var(--surface-rgba-base),.04);
}
.inv3-primary-metric span{
  display:block;
  font-size:12px;
  font-weight:var(--fw-bold);
  color:rgba(var(--text-rgba-base),.6);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:8px;
}
.inv3-primary-metric strong{
  display:block;
  font-size:42px;
  line-height:1;
  font-weight:var(--fw-heavy);
  color:var(--text-strong);
  margin-bottom:10px;
}
.inv3-primary-metric p{
  max-width:560px;
  font-size:14px;
  line-height:1.6;
  color:rgba(var(--text-rgba-base),.66);
}
.inv3-hero-metrics{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:12px;
  margin-top:14px;
}
.inv3-hero-metric{
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(var(--surface-rgba-base),.06);
  background:rgba(var(--surface-rgba-base),.03);
}
.inv3-hero-metric span{
  display:block;
  font-size:11px;
  color:rgba(var(--text-rgba-base),.55);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:5px;
}
.inv3-hero-metric strong{
  display:block;
  font-size:18px;
  font-weight:var(--fw-bold);
  color:var(--text-strong);
}
.inv3-hero-metric--summary{
  min-width:0;
}
.inv3-hero-metric-sub{
  margin:10px 0 0;
  font-size:12px;
  line-height:1.55;
  color:rgba(var(--text-rgba-base),.58);
}
.inv3-hero-metric .inv3-money-nowrap{
  display:inline;
  margin-bottom:0;
  font-size:inherit;
  font-weight:inherit;
  letter-spacing:inherit;
  text-transform:none;
  color:inherit;
  white-space:nowrap;
}
.inv3-collection{
  margin-top:14px;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(var(--surface-rgba-base),.055);
  background:rgba(var(--surface-rgba-base),.028);
}
.inv3-collection-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.inv3-collection-head span{font-size:12px;color:rgba(var(--text-rgba-base),.56);}
.inv3-collection-head strong{font-size:14px;font-weight:var(--fw-bold);color:var(--text-strong);}
.inv3-collection-bar{
  height:8px;
  border-radius:999px;
  background:rgba(var(--surface-rgba-base),.06);
  overflow:hidden;
}
.inv3-collection-bar span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(232,184,75,.92),rgba(245,208,122,.72));
}
.inv3-collection p{
  margin-top:10px;
  font-size:13px;
  line-height:1.55;
  color:rgba(var(--text-rgba-base),.62);
}
.inv3-statusboard{
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:linear-gradient(180deg,rgba(var(--surface-rgba-base),.045),rgba(var(--surface-rgba-base),.024));
}
.inv3-statusboard-head{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:12px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.inv3-statusboard-head span{
  display:block;
  font-size:11px;
  color:rgba(var(--text-rgba-base),.54);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.inv3-statusboard-head strong{
  display:block;
  font-size:20px;
  line-height:1.15;
  color:var(--text-strong);
  font-weight:var(--fw-heavy);
}
.inv3-statusboard-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.inv3-board-card{
  padding:14px 14px 13px;
  border-radius:16px;
  border:1px solid rgba(var(--surface-rgba-base),.06);
  background:rgba(var(--surface-rgba-base),.03);
}
.inv3-board-card.is-zero{
  opacity:.54;
  filter:saturate(.38);
}
.inv3-board-card--collapsed{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  min-height:148px;
}
.inv3-board-card span{
  display:block;
  font-size:11px;
  color:rgba(var(--text-rgba-base),.55);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:6px;
}
.inv3-board-card strong{
  display:block;
  font-size:28px;
  line-height:1;
  font-weight:var(--fw-heavy);
  color:var(--text-strong);
  margin-bottom:7px;
}
.inv3-board-card em{
  display:block;
  font-style:normal;
  font-size:12px;
  color:rgba(var(--text-rgba-base),.62);
}
.inv3-board-card.is-danger{border-color:var(--tone-poor-border);background:var(--tone-poor-bg);}
.inv3-board-card.is-danger strong{color:var(--tone-poor-fg);}
.inv3-board-card.is-warn{border-color:var(--tone-warn-border);background:var(--tone-warn-bg);}
.inv3-board-card.is-warn strong{color:var(--tone-warn-text);}
.inv3-board-card.is-good{border-color:var(--tone-good-border);background:var(--tone-good-bg);}
.inv3-board-card.is-good strong{color:var(--tone-good-fg);}
.inv3-statusboard-foot{
  margin-top:14px;
  font-size:13px;
  line-height:1.55;
  color:rgba(var(--text-rgba-base),.66);
}
.inv3-signalband{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:16px 20px;
  margin:0 0 40px;
}
.inv3-signalband-copy{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.inv3-signal-kicker{
  display:inline-flex;
  align-items:center;
  width:max-content;
  min-height:26px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:rgba(var(--surface-rgba-base),.04);
  color:rgba(var(--text-rgba-base),.68);
  font-size:11px;
  font-weight:var(--fw-semibold);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.inv3-signal-kicker.is-danger{background:var(--tone-poor-bg);border-color:var(--tone-poor-border);color:var(--tone-poor-fg);}
.inv3-signal-kicker.is-warn{background:var(--tone-warn-bg);border-color:var(--tone-warn-border);color:var(--tone-warn-text);}
.inv3-signal-kicker.is-good{background:var(--tone-good-bg);border-color:var(--tone-good-border);color:var(--tone-good-fg);}
.inv3-signalband-copy strong{
  font-size:22px;
  line-height:1.15;
  font-weight:var(--fw-heavy);
  color:var(--text-strong);
}
.inv3-signalband-copy p{
  margin:0;
  font-size:13px;
  line-height:1.6;
  color:rgba(var(--text-rgba-base),.62);
}
.inv3-signalband-action{
  display:flex;
  align-items:center;
  flex-shrink:0;
}
.inv3-conversion-showcase{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  border:1px solid rgba(123,176,255,.16);
  background:
    radial-gradient(circle at 50% 18%, rgba(232,184,75,.12), transparent 30%),
    linear-gradient(135deg,rgba(13,23,38,.98),rgba(28,40,55,.96));
  box-shadow:0 22px 46px rgba(0,0,0,.24);
  margin:0 0 40px;
}
.inv3-conversion-showcase::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 78%, rgba(123,176,255,.12), transparent 28%),
    linear-gradient(90deg,rgba(var(--surface-rgba-base),.035),transparent 42%,rgba(232,184,75,.035));
}
.inv3-conversion-showcase>*{position:relative;z-index:1;}
.inv3-conversion-showcase:focus-visible{
  outline:2px solid rgba(232,184,75,.64);
  outline-offset:3px;
}
.inv3-conversion-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 28px;
  border-bottom:1px solid rgba(var(--surface-rgba-base),.08);
}
.inv3-conversion-title{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--text-strong);
  font-size:22px;
  font-weight:var(--fw-heavy);
}
.inv3-conversion-doc-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  color:rgba(245,208,122,.95);
}
.inv3-conversion-sub{
  font-size:16px;
  color:rgba(var(--text-rgba-base),.55);
}
.inv3-conversion-head-side{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  flex-wrap:wrap;
}
.inv3-conversion-controls{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:4px;
  border-radius:999px;
  border:1px solid rgba(var(--surface-rgba-base),.1);
  background:rgba(4,10,22,.34);
  color:rgba(var(--text-rgba-base),.66);
  font-size:12px;
  font-weight:var(--fw-bold);
}
.inv3-conversion-hide-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.inv3-conversion-hide{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(232,184,75,.28);
  background:rgba(232,184,75,.11);
  color:rgba(245,208,122,.94);
  cursor:pointer;
  font:inherit;
  font-size:12.5px;
  font-weight:var(--fw-bold);
  box-shadow:inset 0 1px 0 rgba(var(--surface-rgba-base),.06);
  transition:transform var(--tr-base),border-color var(--tr-base),background var(--tr-base),color var(--tr-base),box-shadow var(--tr-base);
}
.inv3-conversion-hide svg,
.inv3-conversion-toggle svg{
  width:15px;
  height:15px;
  flex:0 0 auto;
}
.inv3-conversion-hide:hover,
.inv3-conversion-hide:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(245,208,122,.6);
  background:rgba(232,184,75,.18);
  color:var(--text-strong);
  box-shadow:0 0 0 3px rgba(232,184,75,.16);
  outline:none;
}
.inv3-conversion-hide-tip{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:min(260px,80vw);
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(232,184,75,.24);
  background:rgba(9,17,31,.96);
  color:rgba(var(--text-rgba-base),.76);
  font-size:12px;
  line-height:1.45;
  box-shadow:0 16px 34px rgba(0,0,0,.22);
  opacity:0;
  transform:translateY(-4px);
  pointer-events:none;
  transition:opacity var(--tr-base),transform var(--tr-base);
  z-index:5;
}
.inv3-conversion-hide-tip::before{
  content:"";
  position:absolute;
  top:-5px;
  right:26px;
  width:9px;
  height:9px;
  border-left:1px solid rgba(232,184,75,.24);
  border-top:1px solid rgba(232,184,75,.24);
  background:inherit;
  transform:rotate(45deg);
}
.inv3-conversion-hide-wrap.has-tip:hover .inv3-conversion-hide-tip,
.inv3-conversion-hide:focus-visible + .inv3-conversion-hide-tip{
  opacity:1;
  transform:translateY(0);
}
.inv3-conversion-nav{
  width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:rgba(var(--surface-rgba-base),.05);
  color:var(--text-strong);
  cursor:pointer;
  font:inherit;
  transition:transform var(--tr-base),border-color var(--tr-base),background var(--tr-base);
}
.inv3-conversion-nav:hover,
.inv3-conversion-nav:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(232,184,75,.28);
  background:rgba(232,184,75,.1);
  outline:none;
}
.inv3-conversion-queue{
  display:flex;
  gap:10px;
  padding:14px 28px 0;
  overflow-x:auto;
  scrollbar-width:thin;
}
.inv3-conversion-queue-item{
  flex:0 0 auto;
  min-width:190px;
  max-width:240px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:3px 12px;
  text-align:left;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(var(--surface-rgba-base),.09);
  background:rgba(var(--surface-rgba-base),.035);
  color:rgba(var(--text-rgba-base),.62);
  cursor:pointer;
  font:inherit;
  transition:transform var(--tr-base),border-color var(--tr-base),background var(--tr-base),color var(--tr-base);
}
.inv3-conversion-queue-item strong,
.inv3-conversion-queue-item span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.inv3-conversion-queue-item strong{
  color:var(--text-strong);
  font-size:13px;
  font-weight:var(--fw-bold);
  letter-spacing:.05em;
}
.inv3-conversion-queue-item span{
  grid-column:1/2;
  font-size:12px;
}
.inv3-conversion-queue-item em{
  grid-column:2/3;
  grid-row:1/3;
  align-self:center;
  color:rgba(245,208,122,.95);
  font-style:normal;
  font-size:12px;
  font-weight:var(--fw-bold);
  white-space:nowrap;
}
.inv3-conversion-queue-item:hover,
.inv3-conversion-queue-item:focus-visible,
.inv3-conversion-queue-item.is-active{
  transform:translateY(-1px);
  border-color:rgba(232,184,75,.34);
  background:rgba(232,184,75,.1);
  color:var(--text-strong);
  outline:none;
}
.inv3-conversion-stage{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:34px;
  padding:44px 48px 46px;
}
.inv3-conversion-card{
  min-height:284px;
  border-radius:28px;
  padding:34px 40px;
  border:1px solid rgba(var(--surface-rgba-base),.1);
  background:rgba(8,17,32,.74);
  box-shadow:inset 0 1px 0 rgba(var(--surface-rgba-base),.04),0 18px 34px rgba(0,0,0,.18);
}
.inv3-conversion-card--invoice{
  border-color:rgba(232,184,75,.38);
  background:linear-gradient(180deg,rgba(33,44,56,.88),rgba(29,38,50,.78));
}
.inv3-conversion-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:28px;
}
.inv3-conversion-pill{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid rgba(123,176,255,.14);
  background:rgba(123,176,255,.06);
  color:rgba(var(--text-rgba-base),.62);
  font-size:12px;
  font-weight:var(--fw-bold);
  text-transform:uppercase;
  letter-spacing:.1em;
}
.inv3-conversion-pill.is-draft{
  border-color:rgba(232,184,75,.58);
  background:linear-gradient(180deg,rgba(245,208,122,.98),rgba(232,184,75,.94));
  color:var(--bg);
}
.inv3-conversion-number{
  color:rgba(var(--text-rgba-base),.52);
  font-size:16px;
  font-weight:var(--fw-semibold);
  letter-spacing:.08em;
}
.inv3-conversion-customer{
  display:block;
  max-width:440px;
  margin:0 0 24px;
  color:var(--text-strong);
  font-size:28px;
  line-height:1.25;
  font-weight:var(--fw-heavy);
}
.inv3-conversion-facts{
  display:grid;
  gap:10px;
  margin-bottom:16px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(var(--surface-rgba-base),.08);
}
.inv3-conversion-facts div,
.inv3-conversion-total{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
}
.inv3-conversion-facts span,
.inv3-conversion-total span{
  color:rgba(var(--text-rgba-base),.52);
  font-size:16px;
}
.inv3-conversion-facts strong,
.inv3-conversion-total strong{
  color:var(--text-strong);
  font-size:18px;
  font-weight:var(--fw-bold);
  letter-spacing:.08em;
}
.inv3-conversion-total strong{
  font-size:20px;
  letter-spacing:.04em;
}
.inv3-conversion-status{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:28px;
  color:rgba(83,214,179,.96);
  font-size:16px;
  line-height:1.45;
}
.inv3-conversion-status::before{
  content:"";
  flex:0 0 auto;
  width:7px;
  height:13px;
  margin-top:2px;
  border:solid currentColor;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.inv3-conversion-status.is-carried{
  color:rgba(245,208,122,.94);
}
.inv3-conversion-action{
  display:flex;
  align-items:center;
  justify-content:center;
}
.inv3-conversion-cta{
  width:82px;
  min-height:104px;
  border:0;
  background:transparent;
  color:rgba(245,208,122,.98);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  cursor:pointer;
  font:inherit;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.inv3-conversion-cta span{
  position:relative;
  width:64px;
  height:64px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,rgba(245,208,122,.98),rgba(232,184,75,.94));
  color:var(--bg);
  font-size:38px;
  line-height:1;
  box-shadow:none;
  transition:transform var(--tr-base),box-shadow var(--tr-base);
}
.inv3-conversion-cta span::before,
.inv3-conversion-cta span::after{
  content:"";
  position:absolute;
  display:block;
}
.inv3-conversion-cta span::before{
  width:28px;
  height:3px;
  border-radius:999px;
  background:currentColor;
}
.inv3-conversion-cta span::after{
  width:15px;
  height:15px;
  margin-left:12px;
  border-top:3px solid currentColor;
  border-right:3px solid currentColor;
  transform:rotate(45deg);
}
.inv3-conversion-cta strong{
  font-size:12px;
  font-weight:var(--fw-bold);
}
.inv3-conversion-cta:hover span{
  transform:translateY(-2px) scale(1.02);
  box-shadow:none;
}
.inv3-conversion-cta.is-disabled{
  opacity:.5;
  cursor:not-allowed;
}
.inv3-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
  flex-wrap:wrap;
}
.inv3-section-head span{
  display:block;
  font-size:11px;
  color:rgba(var(--text-rgba-base),.54);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:4px;
}
.inv3-section-head strong{
  display:block;
  font-size:22px;
  line-height:1.12;
  font-weight:var(--fw-heavy);
  color:var(--text-strong);
}
.inv3-workflow{padding:22px 24px;margin-bottom:14px;}
.inv3-workflow-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.inv3-work-card{
  width:100%;
  text-align:left;
  border:none;
  cursor:pointer;
  font-family:inherit;
  padding:18px 18px 17px;
  border-radius:18px;
  border:1px solid rgba(var(--surface-rgba-base),.07);
  background:rgba(var(--surface-rgba-base),.03);
  color:inherit;
  transition:transform var(--tr-base),border-color var(--tr-base),background var(--tr-base),box-shadow var(--tr-base);
}
.inv3-work-card:hover{
  transform:translateY(-2px);
  border-color:rgba(232,184,75,.22);
  background:rgba(var(--surface-rgba-base),.045);
  box-shadow:0 16px 34px rgba(0,0,0,.16);
}
.inv3-work-card.is-primary{
  border-color:rgba(232,184,75,.18);
  background:linear-gradient(180deg,rgba(232,184,75,.1),rgba(var(--surface-rgba-base),.025));
}
.inv3-work-kicker{
  display:block;
  font-size:10px;
  font-weight:var(--fw-bold);
  color:rgba(245,208,122,.82);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:8px;
}
.inv3-work-card strong{
  display:block;
  font-size:18px;
  line-height:1.2;
  font-weight:var(--fw-heavy);
  color:var(--text-strong);
  margin-bottom:8px;
}
.inv3-work-card em{
  display:block;
  font-style:normal;
  font-size:13px;
  line-height:1.6;
  color:rgba(var(--text-rgba-base),.62);
}
.inv3-lowdata{
  padding:14px 18px;
  margin-top:14px;
  font-size:13px;
  line-height:1.6;
  color:rgba(var(--text-rgba-base),.66);
}
.inv3-lowdata strong{color:var(--text-strong);}
.inv3-toolbar,
.inv3-list-shell{
  border-color:rgba(var(--surface-rgba-base),.1);
  background:linear-gradient(180deg,rgba(var(--surface-rgba-base),.03),rgba(var(--surface-rgba-base),.016));
  box-shadow:0 14px 30px rgba(0,0,0,.14);
}
.inv3-toolbar::before,
.inv3-list-shell::before{
  background:
    linear-gradient(180deg,rgba(232,184,75,.07),transparent 54%),
    radial-gradient(circle at top right, rgba(123,176,255,.05), transparent 32%);
}
.inv3-toolbar{padding:20px 24px 18px;margin-bottom:10px;}
.inv3-toolbar{
  overflow:visible;
  z-index:8;
}
.inv3-toolbar:has(.inv3-sort-menu){
  z-index:260;
}
.inv3-toolbar:has(.inv3-sort-menu) .inv3-toolbar-main{
  z-index:280;
}
.inv3-section-head--toolbar{margin-bottom:14px;}
.inv3-toolbar-meta{
  font-size:12px;
  color:rgba(var(--text-rgba-base),.54);
  align-self:center;
}
.inv3-toolbar-main{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:space-between;
  flex-wrap:wrap;
}
.inv3-search{
  flex:1 1 420px;
  min-width:240px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  height:52px;
  border-radius:18px;
  border:1px solid rgba(var(--surface-rgba-base),.1);
  background:rgba(var(--surface-rgba-base),.045);
}
.inv3-search-ico{color:rgba(var(--text-rgba-base),.5);display:flex;align-items:center;}
.inv3-search input{
  flex:1;
  min-width:0;
  background:none;
  border:none;
  color:var(--text);
  font:inherit;
  font-size:14px;
}
.inv3-search input::placeholder{color:rgba(var(--text-rgba-base),.42);}
.inv3-toolbar-controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.inv3-toolbar-create{
  position:relative;
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
}
.inv3-toolbar-shortcut{
  display:inline-flex;
  align-items:center;
  gap:5px;
  position:absolute;
  top:-10px;
  right:13px;
  z-index:2;
  padding:3px 8px 3px 5px;
  border-radius:999px;
  border:1px solid rgba(var(--surface-rgba-base),.12);
  background:linear-gradient(180deg,rgba(24,28,42,.98),rgba(16,19,30,.98));
  color:rgba(var(--text-rgba-base),.58);
  box-shadow:0 10px 22px rgba(0,0,0,.18);
  font-size:10px;
  font-weight:var(--fw-medium);
  line-height:1;
  white-space:nowrap;
  pointer-events:none;
}
.inv3-toolbar-shortcut .kbd{
  padding:0 4px;
  font-size:8px;
  line-height:1.45;
  color:rgba(var(--text-rgba-base),.72);
  border-color:rgba(var(--surface-rgba-base),.16);
  background:rgba(var(--surface-rgba-base),.045);
}
.inv3-toolbar-cta{
  min-height:54px;
  padding:0 22px!important;
  border-radius:18px!important;
  font-size:15px;
  font-weight:var(--fw-semibold);
}
.inv3-conversion-toggle{
  min-height:54px;
  padding:0 16px!important;
  border-radius:18px!important;
  gap:8px;
  font-size:14px;
  white-space:nowrap;
}
.inv3-conversion-toggle em{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding:0 8px;
  border-radius:999px;
  background:rgba(var(--surface-rgba-base),.07);
  color:rgba(var(--text-rgba-base),.58);
  font-style:normal;
  font-size:11px;
  font-weight:var(--fw-bold);
}
.inv3-conversion-toggle.is-visible{
  border-color:rgba(232,184,75,.24)!important;
  background:rgba(232,184,75,.08)!important;
  color:var(--text-strong);
}
.inv3-sort{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:54px;
  padding:6px 7px 6px 18px;
  border-radius:24px;
  border:1px solid rgba(var(--surface-rgba-base),.1);
  background:rgba(var(--surface-rgba-base),.045);
  z-index:12;
}
.inv3-toolbar:has(.inv3-sort-menu) .inv3-sort{
  z-index:260;
}
.inv3-sort-label{
  font-size:12px;
  font-weight:var(--fw-semibold);
  color:rgba(var(--text-rgba-base),.54);
  white-space:nowrap;
}
.inv3-sort-trigger{
  min-width:210px;
  min-height:42px;
  padding:0 18px;
  border-radius:16px;
  border:1px solid rgba(var(--surface-rgba-base),.1);
  background:rgba(var(--surface-rgba-base),.08);
  color:var(--text-strong);
  font:inherit;
  font-size:15px;
  font-weight:var(--fw-semibold);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  transition:border-color var(--tr-base),background var(--tr-base),transform var(--tr-base);
}
.inv3-sort-trigger:hover{
  border-color:rgba(232,184,75,.24);
  background:rgba(var(--surface-rgba-base),.11);
}
.inv3-sort-trigger:focus-visible{
  outline:none;
  border-color:rgba(232,184,75,.34);
  box-shadow:0 0 0 3px rgba(232,184,75,.14);
}
.inv3-sort-chevron{
  display:flex;
  align-items:center;
  color:rgba(var(--text-rgba-base),.64);
}
.inv3-sort-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:250px;
  padding:10px;
  border-radius:18px;
  /* 2026-04-28 Fix Wahrgenommene Transparenz (User-Report, Mobile + Desktop):
     Vorher linear-gradient mit .995-Alpha (technisch nahezu opaque, visuell aber
     ließ es Inhalt darunter durchschimmern) → solid #262d4a wie Doc-Menu (PR #1212).
     Click-Lock-Fix: Nicht nur dieses Child hochziehen; bei offenem Menü hebt
     .inv3-toolbar:has(.inv3-sort-menu) den Parent-Stacking-Context über .topbar. */
  border:1px solid rgba(0,0,0,.5);
  background:var(--inv3-doc-menu-bg);
  box-shadow:
    0 24px 56px rgba(0,0,0,.6),
    0 8px 22px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(var(--surface-rgba-base),.045);
  overflow:hidden;
  z-index:200;
}
.inv3-sort-option{
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  border:none;
  border-radius:14px;
  background:transparent;
  color:var(--text);
  font:inherit;
  font-size:15px;
  cursor:pointer;
  text-align:left;
}
.inv3-sort-option:hover,
.inv3-sort-option:focus-visible{
  outline:none;
  background:rgba(232,184,75,.12);
  color:var(--text-strong);
}
.inv3-sort-option.active{
  background:rgba(123,176,255,.2);
  color:var(--text-strong);
}
.inv3-sort-option-check{
  width:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-strong);
}
.inv3-filter-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:14px;
}
.inv3-filter,
.inv3-reset{
  min-height:40px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:rgba(var(--surface-rgba-base),.034);
  color:rgba(var(--text-rgba-base),.66);
  font:inherit;
  font-size:12px;
  cursor:pointer;
  transition:all var(--tr-base);
}
.inv3-filter{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.inv3-filter-label{white-space:nowrap;}
.inv3-filter-badge{
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(var(--surface-rgba-base),.07);
  color:rgba(var(--text-rgba-base),.76);
  font-size:11px;
  font-weight:var(--fw-semibold);
}
.inv3-filter:hover,
.inv3-reset:hover{
  color:var(--text-strong);
  border-color:rgba(232,184,75,.18);
  background:rgba(var(--surface-rgba-base),.05);
}
.inv3-filter.active{
  border-color:rgba(232,184,75,.24);
  background:rgba(232,184,75,.12);
  color:var(--tone-warn-text);
  font-weight:var(--fw-semibold);
}
.inv3-filter.active .inv3-filter-badge{
  background:rgba(232,184,75,.22);
  color:var(--tone-warn-text);
}
.inv3-reset{margin-left:auto;}
.inv3-list-shell{
  padding:14px 16px 16px;
  z-index:1;
  /* overflow:visible überschreibt das geteilte overflow:hidden der Shell-
     Gruppe weiter oben. Sonst kappt die Liste das absolut positionierte
     .inv3-doc-menu der unteren Rows — das Drei-Punkte-Menü wurde
     abgeschnitten statt mit der App-Shell scrollbar zu sein. Gleiche Lösung
     wie .inv3-toolbar für sein Sort-Menü. Der ::before-Verlauf bleibt durch
     inset:0 + border-radius:inherit selbst gerundet, braucht kein Clipping. */
  overflow:visible;
}
/* Bei offenem Row-Menü hebt die Shell ihren z-index an, damit das jetzt
   überstehende .inv3-doc-menu garantiert über etwaigen Folge-Geschwistern
   liegt — analog zu .inv3-toolbar:has(.inv3-sort-menu). :has() prüft
   .is-open, nicht .inv3-doc-menu allein: das Menü steht immer im DOM
   (nur [hidden]), die Shell darf den z-index nur im Offen-Zustand heben. */
.inv3-list-shell:has(.inv3-doc-menu-shell.is-open){
  z-index:10;
}
.inv3-row{
  position:relative;
  display:grid;
  /* Grid-Math (Plan-Eng-Review T1, schließt Revert 58afa7c).
     Sum-of-mins: 180+200+180+150 = 710 (Content-Tracks).
     + actions max-content für 4-Btn-Worst-Case (1 prim + 2 sec + Menu) ~330.
     = ~1040 in ~1110 verfügbar (1240px Page minus Padding/Gaps) → 70px Buffer.
     actions: max-content (NICHT auto) → deterministisch, kein Overlap nach links.
     Pin-Test: tests/document-row-action-budget.test.js. */
  grid-template-columns:minmax(180px,1.05fr) minmax(200px,1.05fr) minmax(180px,.95fr) minmax(150px,.6fr) max-content;
  grid-template-areas:"identity meta signal amount actions";
  gap:12px 20px;
  align-items:center;
  padding:14px 16px 14px 18px;
  /* Min schützt single-line Layout; keine Höhenkappung, damit responsive Rows nicht überlaufen. */
  min-height:76px;
  border-radius:14px;
  border:1px solid rgba(var(--surface-rgba-base),.085);
  background:rgba(var(--surface-rgba-base),.04);
  transition:border-color var(--tr-base),background var(--tr-base),box-shadow var(--tr-base),transform var(--tr-base);
}
.inv3-row + .inv3-row{margin-top:14px;}
.inv3-row:hover,
.inv3-row:focus-within{
  border-color:rgba(232,184,75,.22);
  background:rgba(var(--surface-rgba-base),.058);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.inv3-row::before{
  content:"";
  position:absolute;
  top:12px;
  bottom:12px;
  left:0;
  width:3px;
  border-radius:999px;
  background:rgba(var(--surface-rgba-base),.12);
  opacity:1;
  transition:width var(--tr-base),background var(--tr-base);
}
.inv3-row:hover::before,
.inv3-row:focus-within::before{width:4px;}

/* ── Stripe pro Doc-Typ (Plan-Eng-Review): :where() senkt Specificity auf 0,0,1,
   damit Status-Modifier (.is-paid, .is-overdue etc., 0,1,1) deterministisch
   gewinnen — nicht reihenfolgenabhängig. */
.inv3-row:where([data-doc-type="invoice"])::before{background:rgba(232,184,75,.85);}     /* Gelb: Zahlungs-Status */
.inv3-row:where([data-doc-type="quote"])::before{background:rgba(123,176,255,.85);}      /* Blau: Angebot, neutral */
.inv3-row:where([data-doc-type="recurring"])::before{background:rgba(232,184,75,.92);}   /* Brand-Yellow: Planungs-Objekt */
/* ── Status-Modifier (gelten typ-übergreifend, gewinnen über Doc-Type-Stripe). */
.inv3-row.is-open::before{background:rgba(232,184,75,.85);}
.inv3-row.is-overdue::before,
.inv3-row.is-danger::before{background:rgba(248,113,113,.85);}
.inv3-row.is-paid::before,
.inv3-row.is-accepted::before{background:rgba(83,214,179,.92);}
.inv3-row.is-converted::before{background:rgba(83,214,179,.55);}
.inv3-row.is-active::before{background:rgba(232,184,75,.92);}
.inv3-row.is-paused::before,
.inv3-row.is-cancelled::before,
.inv3-row.is-storno::before,
.inv3-row.is-muted::before{background:rgba(var(--text-rgba-base),.2);}
.inv3-row.is-draft::before{background:rgba(var(--text-rgba-base),.32);}
.inv3-row-zone{min-width:0;}
.inv3-row-identity{grid-area:identity;}
.inv3-row-meta{grid-area:meta;}
.inv3-row-signal{grid-area:signal;}
.inv3-row-amount{grid-area:amount;}
.inv3-row-actions{grid-area:actions;}
.inv3-row-number{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
  color:rgba(var(--text-rgba-base),.62);
  margin-bottom:4px;
}
.inv3-row-customer{
  /* Title bleibt 1-zeilig (war auch vorher nowrap+ellipsis). Plan-Eng-Review A2:
     explizites line-clamp:1 schützt zusätzlich gegen Combined-Length-Clip. */
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  word-break:break-word;
  font-size:18px;
  line-height:1.18;
  font-weight:var(--fw-heavy);
  color:var(--text-strong);
}
.inv3-row-subtitle{
  /* Subtitle 2-zeilig (Plan-Strategie A — adressiert P2 Identity-Subtitle-Lücke
     ohne den Identity-Track zu verbreitern, was das Sum-of-mins-Budget sprengen würde). */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-word;
  margin-top:5px;
  font-size:12px;
  line-height:1.35;
  color:rgba(var(--text-rgba-base),.58);
}
.inv3-row-meta,
.inv3-row-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px 14px;
}
.inv3-row-meta.is-count-1{grid-template-columns:minmax(0,1fr);}
.inv3-row-meta.is-count-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.inv3-row-meta.is-count-3,
.inv3-row-meta.is-count-4{grid-template-columns:repeat(3,minmax(0,1fr));}
.inv3-row-meta-item,
.inv3-row-cell{
  min-width:0;
  padding-left:12px;
  border-left:1px solid rgba(var(--surface-rgba-base),.075);
}
.inv3-row-meta-item span,
.inv3-row-cell span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  line-height:1.25;
  color:rgba(var(--text-rgba-base),.52);
  margin-bottom:3px;
}
.inv3-row-meta-item strong,
.inv3-row-cell strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  line-height:1.32;
  font-weight:var(--fw-bold);
  color:rgba(var(--text-rgba-base),.9);
}
.inv3-row-meta-item em,
.inv3-row-cell em{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-top:3px;
  font-style:normal;
  font-size:12px;
  line-height:1.35;
  color:rgba(var(--text-rgba-base),.56);
}
.inv3-row-main,
.inv3-row-side{min-width:0;}
.inv3-row-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.inv3-chipline{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  justify-content:flex-start;
  min-width:0;
}
.inv3-status,
.inv3-duechip{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:11px;
  font-weight:var(--fw-semibold);
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}
.inv3-status.is-open,
.inv3-status.is-warn{background:var(--tone-warn-bg);border-color:var(--tone-warn-border);color:var(--tone-warn-text);}
.inv3-status.is-danger{background:var(--tone-poor-bg);border-color:var(--tone-poor-border);color:var(--tone-poor-fg);}
.inv3-status.is-paid,
.inv3-status.is-good{background:var(--tone-good-bg);border-color:var(--tone-good-border);color:var(--tone-good-fg);}
.inv3-status.is-cancelled,
.inv3-status.is-muted{background:rgba(var(--surface-rgba-base),.04);border-color:rgba(var(--surface-rgba-base),.06);color:rgba(var(--text-rgba-base),.56);}
.inv3-duechip.is-danger{background:var(--tone-poor-bg);border-color:var(--tone-poor-border);color:var(--tone-poor-fg);}
.inv3-duechip.is-warn,
.inv3-duechip.is-open{background:var(--tone-warn-bg);border-color:var(--tone-warn-border);color:var(--tone-warn-text);}
.inv3-duechip.is-good,
.inv3-duechip.is-paid{background:var(--tone-good-bg);border-color:var(--tone-good-border);color:var(--tone-good-fg);}
.inv3-duechip.is-muted,
.inv3-duechip.is-neutral{background:rgba(var(--surface-rgba-base),.038);border-color:rgba(var(--surface-rgba-base),.06);color:rgba(var(--text-rgba-base),.56);}
.inv3-row-next{
  margin-top:8px;
  min-width:0;
}
.inv3-row-next span{
  display:block;
  font-size:11px;
  line-height:1.25;
  color:rgba(var(--text-rgba-base),.52);
  margin-bottom:3px;
}
.inv3-row-next strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  line-height:1.3;
  font-weight:var(--fw-bold);
  color:var(--text-strong);
}
.inv3-row-next em{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-top:3px;
  font-style:normal;
  font-size:12px;
  line-height:1.35;
  color:rgba(var(--text-rgba-base),.58);
}
.inv3-row-amount{
  text-align:right;
  min-width:0;
}
.inv3-row-amount strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:22px;
  line-height:1.05;
  font-weight:var(--fw-heavy);
  color:var(--text-strong);
}
.inv3-row-amount span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-top:5px;
  font-size:12px;
  color:rgba(var(--text-rgba-base),.56);
}
.inv3-row-actions{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  flex-wrap:nowrap;
  min-width:0;
}
.inv3-row-action-main{
  min-height:38px;
  padding:0 14px!important;
  border-radius:10px!important;
  font-size:13px!important;
  box-shadow:none!important;
  flex:0 0 auto!important;
  /* H7 (Design-Audit 2026-04-29): demoted from filled-yellow to ghost-yellow.
     Cause: 17+ Listenzeilen × `btn btn-p` ergaben eine Wand aus Brand-Akzent
     → Hierarchie-Verlust. Row-Click bleibt als separat bewachter
     data-row-action-Shortcut auf der Zeile erhalten. */
  background:transparent!important;
  color:var(--accent)!important;
  border:1px solid rgba(232,184,75,.32)!important;
}
.inv3-row-action-main:hover{
  background:rgba(232,184,75,.12)!important;
  border-color:rgba(232,184,75,.5)!important;
}
.inv3-row-action-main:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(232,184,75,.35)!important;
}
/* Row-Click-Affordance (siehe renderDocumentRow → data-row-action auf article) */
.inv3-row[data-row-action]{cursor:pointer;}
.inv3-row-action-main,
.inv3-row-action-pill,
.inv3-doc-menu-trigger{
  white-space:nowrap;
}
.inv3-row-action-main svg,
.inv3-row-action-pill svg,
.inv3-doc-menu-item svg{flex-shrink:0;}
.inv3-row-action-pill{
  min-height:36px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border-radius:10px;
  border:1px solid rgba(var(--surface-rgba-base),.09);
  background:rgba(var(--surface-rgba-base),.035);
  color:var(--text-strong);
  font:inherit;
  font-size:13px;
  font-weight:var(--fw-semibold);
  cursor:pointer;
  flex:0 0 auto;
  transition:border-color var(--tr-base),background var(--tr-base),transform var(--tr-base),color var(--tr-base);
}
.inv3-row-action-pill:hover,
.inv3-row-action-pill:focus-visible{
  border-color:rgba(232,184,75,.22);
  background:rgba(var(--surface-rgba-base),.06);
  transform:translateY(-1px);
}
.inv3-row-action-pill.is-wide{min-width:88px;}
.inv3-row-action-pill.is-icon-only{
  width:38px;
  min-width:38px;
  padding:0!important;
  gap:0;
}
.inv3-row-action-pill.is-icon-only span{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}
.inv3-row-action-pill.is-icon-only svg{margin:0;}
.inv3-row-action-pill.inv3-row-action-payment{
  color:var(--accent);
  border-color:rgba(232,184,75,.24);
  background:rgba(232,184,75,.045);
}
.inv3-row-action-pill.inv3-row-action-accept,
.inv3-row-action-pill.inv3-row-action-convert{
  color:var(--tone-good-fg);
  border-color:rgba(83,214,179,.24);
  background:rgba(83,214,179,.055);
}
.inv3-row-action-pill.is-danger{
  border-color:rgba(248,113,113,.18);
  background:rgba(248,113,113,.07);
  color:var(--tone-poor-fg);
}
@media(hover:hover) and (pointer:fine){
  .inv3-row .inv3-row-action-pill.is-quiet-action{
    opacity:0;
    transform:translateY(1px);
    pointer-events:none;
  }
  .inv3-row:hover .inv3-row-action-pill.is-quiet-action,
  .inv3-row:focus-within .inv3-row-action-pill.is-quiet-action{
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
  .inv3-row .inv3-doc-menu-trigger{opacity:.62;}
  .inv3-row:hover .inv3-doc-menu-trigger,
  .inv3-row:focus-within .inv3-doc-menu-trigger,
  .inv3-doc-menu-shell.is-open .inv3-doc-menu-trigger{opacity:1;}
}
.inv3-doc-menu-shell{
  position:relative;
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
}
/* 2026-04-29 Mobile-Residual F-1: Schicht 2 + 3 vom Three-Layer-Z-Fix.
   `isolation:isolate` zwingt die offene Shell, einen eigenen Stacking-
   Context aufzumachen — damit das Menü drinnen z-index:1000 hat, sicher
   über allem in der Row, aber relativ zur Shell-Insel. Die :has()-Regel
   lifft dann die GANZE Row über alle Sibling-Rows. */
.inv3-doc-menu-shell.is-open{
  isolation:isolate;
  z-index:1000;
}
.inv3-row:has(.inv3-doc-menu-shell.is-open){
  z-index:1000;
  isolation:isolate;
}
.inv3-doc-menu-trigger{width:36px;min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:transparent;color:var(--text3);font:inherit;line-height:1;cursor:pointer;transition:background var(--tr-fast),color var(--tr-fast);}
.inv3-doc-menu-trigger:hover,.inv3-doc-menu-shell.is-open .inv3-doc-menu-trigger{background:rgba(var(--surface-rgba-base),.08);color:var(--text);}
body.light .inv3-doc-menu-trigger:hover,body.light .inv3-doc-menu-shell.is-open .inv3-doc-menu-trigger{background:rgba(15,23,42,.06);}
.inv3-doc-menu-trigger:focus-visible{outline:2px solid rgba(var(--accent-rgba-base),.55);outline-offset:1px;}
/* z-index:1000 + isolation:isolate (offene Shell) + :has()-Row-Lift = 3-Schicht-
   Stacking-Fix: verhindert, dass nachfolgende .inv3-row durchs offene Menü
   bleeden (Privacy bei sichtbaren Beträgen, Mobile-Audit 2026-04-29). */
.inv3-doc-menu{position:absolute;z-index:1000;top:calc(100% + 8px);right:0;display:flex;flex-direction:column;gap:1px;width:230px;padding:6px;border-radius:10px;border:1px solid var(--border);background:var(--inv3-doc-menu-bg);box-shadow:0 16px 40px rgba(0,0,0,.35);}
body.light .inv3-doc-menu{background:var(--card);box-shadow:0 12px 28px rgba(15,23,42,.14);}
.inv3-doc-menu[hidden]{display:none;}
.inv3-doc-menu-item{width:100%;height:34px;padding:0 10px;display:flex;align-items:center;gap:10px;border:0;border-radius:6px;background:transparent;color:var(--text);font-family:var(--font-sans);font-size:13px;font-weight:var(--fw-medium);text-align:left;cursor:pointer;transition:background var(--tr-fast),color var(--tr-fast);}
.inv3-doc-menu-item:hover{background:rgba(var(--surface-rgba-base),.06);color:var(--text);}
body.light .inv3-doc-menu-item:hover{background:rgba(15,23,42,.04);}
.inv3-doc-menu-item:focus-visible{outline:2px solid rgba(var(--accent-rgba-base),.55);outline-offset:-2px;}
.inv3-doc-menu-item.is-danger{color:var(--red);}
.inv3-doc-menu-item.is-danger:hover{background:rgba(248,113,113,.1);color:var(--red);}
/* Action-Busy-Guard (F-MOB): nach dem ersten Tap werden die Sheet-Actions
   gesperrt, damit ein zweiter Tap nicht dieselbe data-action erneut feuert. */
.inv3-doc-menu-item[disabled]{opacity:.5;cursor:not-allowed;}
.inv3-doc-menu-item[aria-busy="true"]{opacity:.6;cursor:wait;}
/* ── Container-Queries (Plan-Eng-Review A3): reagieren auf die Listen-Container-
   Breite (nicht Viewport), damit das Layout in Sidebars/Modals/eingebetteten
   Kontexten korrekt umschaltet. Browser-Support seit Q4 2022 universell. */
.inv3-doc-list{
  container-type:inline-size;
  container-name:doc-list;
}
/* < 1080px Container-Breite: alle Inline-Secondaries verschwinden.
   Das schliesst die kritische Zwischenbreite, in der max-content-Actions plus
   Content-Mins sonst erneut gegen Amount/Actions druecken koennten. */
@container doc-list (max-width: 1080px){
  .inv3-row .inv3-row-action--secondary,
  .inv3-row .inv3-row-action--secondary-2{display:none;}
}
/* < 980px Container-Breite (Tablet/Mobile/eingebettete Listen): Stack-Layout.
   Unterhalb dieser Breite reichen die 5 Desktop-Tracks auch mit Primary+Menu
   nicht mehr mit belastbarem Puffer. */
@container doc-list (max-width: 980px){
  .inv3-row{
    grid-template-columns:minmax(0,1fr) minmax(120px,max-content) max-content;
    grid-template-areas:
      "identity amount actions"
      "meta meta meta"
      "signal signal signal";
    max-height:none;
  }
  .inv3-row .inv3-row-action--secondary,
  .inv3-row .inv3-row-action--secondary-2{display:none;}
}
.inv3-row.is-cancelled-case .inv3-row-amount strong,
.inv3-row.is-storno-doc .inv3-row-amount strong{
  text-decoration:line-through;
}
.inv3-row.is-storno-doc{
  opacity:.64;
}
.inv3-row.is-storno-doc .inv3-row-meta-item strong,
.inv3-row.is-storno-doc .inv3-row-cell strong{
  color:rgba(var(--text-rgba-base),.64);
}
.inv3-results-empty{
  padding:44px 18px;
  text-align:center;
}
.inv3-results-empty strong{
  display:block;
  font-size:22px;
  line-height:1.15;
  font-weight:var(--fw-heavy);
  color:var(--text-strong);
  margin-bottom:10px;
}
.inv3-results-empty p{
  max-width:520px;
  margin:0 auto 18px;
  font-size:14px;
  line-height:1.65;
  color:rgba(var(--text-rgba-base),.62);
}
.inv3-state-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:16px;
  align-items:center;
  padding:22px;
  border-radius:20px;
  border:1px solid rgba(var(--surface-rgba-base),.07);
  background:rgba(var(--surface-rgba-base),.03);
}
.inv3-state-card.is-danger{border-color:var(--tone-poor-border);background:var(--tone-poor-bg);}
.inv3-state-card.is-neutral{border-color:rgba(var(--surface-rgba-base),.07);}
.inv3-state-icon{
  width:46px;height:46px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(var(--surface-rgba-base),.045);
  color:var(--text-strong);
  flex-shrink:0;
}
.inv3-state-icon svg,
.inv3-empty-mark svg{
  width:38px;
  height:38px;
  display:block;
}
.inv3-state-copy h1{
  font-size:28px;
  line-height:1.08;
  font-weight:var(--fw-heavy);
  color:var(--text-strong);
  margin:0 0 8px;
}
.inv3-state-copy p{
  font-size:14px;
  line-height:1.65;
  color:rgba(var(--text-rgba-base),.64);
}
.inv3-empty-mark{
  width:78px;height:78px;border-radius:24px;
  display:flex;align-items:center;justify-content:center;
  color:var(--tone-warn-text);
  background:rgba(232,184,75,.1);
  border:1px solid rgba(232,184,75,.18);
  margin-bottom:18px;
}
.inv3-empty-copy{max-width:760px;}
.inv3-empty-copy h1{
  font-size:34px;
  line-height:1.08;
  font-weight:var(--fw-heavy);
  color:var(--text-strong);
  margin:0 0 12px;
}
.inv3-empty-copy p{
  font-size:15px;
  line-height:1.7;
  color:rgba(var(--text-rgba-base),.64);
}
.inv3-hero-actions{margin-top:20px;}
.inv3-empty-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:22px;
}
.inv3-empty-card{
  padding:18px 18px 17px;
  border-radius:18px;
  border:1px solid rgba(var(--surface-rgba-base),.07);
  background:rgba(var(--surface-rgba-base),.03);
}
.inv3-empty-card span{
  display:inline-flex;
  min-width:30px;
  height:30px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(232,184,75,.14);
  color:var(--tone-warn-text);
  font-size:11px;
  font-weight:var(--fw-bold);
  margin-bottom:10px;
}
.inv3-empty-card strong{
  display:block;
  font-size:18px;
  line-height:1.2;
  font-weight:var(--fw-heavy);
  color:var(--text-strong);
  margin-bottom:8px;
}
.inv3-empty-card em{
  display:block;
  font-style:normal;
  font-size:13px;
  line-height:1.62;
  color:rgba(var(--text-rgba-base),.62);
}
body.light .inv3-callout,
body.light .inv3-hero,
body.light .inv3-signalband,
body.light .inv3-workflow,
body.light .inv3-toolbar,
body.light .inv3-list-shell,
body.light .inv3-lowdata{
  border-color:rgba(26,30,46,.08);
  background:linear-gradient(180deg,rgba(var(--surface-solid-rgba-base),.96),rgba(248,249,252,.96));
  box-shadow:0 16px 36px rgba(26,30,46,.08);
}
body.light .inv3-callout::before,
body.light .inv3-hero::before,
body.light .inv3-signalband::before,
body.light .inv3-workflow::before,
body.light .inv3-toolbar::before,
body.light .inv3-list-shell::before,
body.light .inv3-lowdata::before{
  background:
    radial-gradient(circle at top right, rgba(232,184,75,.12), transparent 34%),
    radial-gradient(circle at left center, rgba(123,176,255,.06), transparent 34%);
}
body.light .inv3-primary-metric,
body.light .inv3-statusboard,
body.light .inv3-board-card,
body.light .inv3-hero-metric,
body.light .inv3-collection,
body.light .inv3-signalband,
body.light .inv3-work-card,
body.light .inv3-row,
body.light .inv3-empty-card,
body.light .inv3-state-card{
  box-shadow:none;
}
body.light .inv3-search,
body.light .inv3-sort,
body.light .inv3-filter,
body.light .inv3-reset{
  border-color:rgba(26,30,46,.08);
  background:rgba(26,30,46,.025);
}
body.light .inv3-toolbar-shortcut{
  border-color:rgba(26,30,46,.1);
  /* Bug-Fix 2026-04-25: --surface-rgba-base kippt im Light-Mode auf 0,0,0
     (semantisch: schwarzer Tint für Elevation). Bei .98 Alpha = opaque Fläche
     → erzeugte fast-schwarzen Verlauf-Top statt der intendierten weißen Pill.
     Korrekte Variable für opaque Surfaces ist --surface-solid-rgba-base
     (bleibt 255,255,255 in beiden Modi, siehe Definition Z. ~1382). */
  background:linear-gradient(180deg,rgba(var(--surface-solid-rgba-base),.98),rgba(244,247,252,.98));
  color:rgba(26,30,46,.62);
  box-shadow:0 10px 20px rgba(26,30,46,.08);
}
body.light .inv3-toolbar-shortcut .kbd{
  color:rgba(26,30,46,.72);
  border-color:rgba(26,30,46,.12);
  background:rgba(26,30,46,.035);
}
body.light .inv3-sort-trigger{
  border-color:rgba(26,30,46,.08);
  background:rgba(var(--surface-solid-rgba-base),.92);
}
body.light .inv3-sort-menu{
  /* 2026-04-28 Fix Wahrgenommene Transparenz Light-Mode (parallel zur Dark-
     Mode-Fix oben): solid via --card2-Token (= #f8f9fb im Light, fully opaque,
     hinreichender Kontrast zum Listen-Hintergrund). Plus stärkerer Drop-Shadow
     für klares Pop-Out. */
  background:var(--card2);
  border:1px solid rgba(26,30,46,.16);
  box-shadow:
    0 24px 48px rgba(26,30,46,.22),
    0 8px 18px rgba(26,30,46,.12);
}
body.light .inv3-suite-link{
  border-color:rgba(26,30,46,.08);
  background:rgba(26,30,46,.025);
}
body.light .inv3-suite-link:hover{
  color:var(--text-strong);
  border-color:rgba(232,184,75,.22);
  background:rgba(26,30,46,.05);
}
body.light .inv3-suite-link.is-active{
  border-color:rgba(176,138,48,.32);
  background:rgba(232,184,75,.14);
  color:var(--tone-warn-fg-strong);
}
body.light .inv3-sort-option.active{background:rgba(123,176,255,.16);}
body.light .inv3-status.is-cancelled,
body.light .inv3-status.is-muted,
body.light .inv3-duechip.is-muted,
body.light .inv3-duechip.is-neutral{
  background:rgba(26,30,46,.035);
  border-color:rgba(26,30,46,.07);
}
body.light .inv3-row-action-pill{
  border-color:rgba(26,30,46,.09);
  background:rgba(26,30,46,.03);
}
/* H7 (2026-04-29): Light-Mode-Parität für demoted ghost-yellow Primary.
   Dark-Mode `var(--accent)` (#e8b84b) hätte auf Weiß ~1.8:1 Kontrast → WCAG-Fail.
   `#b08a30` matched die bestehende Light-Mode-Konvention von `.v3-forecast.is-up`. */
body.light .inv3-row-action-main{
  color:var(--tone-warn-text)!important;
  border-color:rgba(176,138,48,.34)!important;
  background:transparent!important;
}
body.light .inv3-row-action-main:hover{
  background:rgba(176,138,48,.1)!important;
  border-color:rgba(176,138,48,.5)!important;
}
body.light .inv3-row-action-pill.is-danger{
  border-color:rgba(201,66,66,.18);
  background:rgba(201,66,66,.06);
}
body.light .inv3-row:hover,
body.light .inv3-row:focus-within{
  background:rgba(var(--surface-solid-rgba-base),.86);
  box-shadow:0 10px 24px rgba(26,30,46,.08);
}
body.light .inv3-row-meta-item,
body.light .inv3-row-cell{
  border-left-color:rgba(26,30,46,.08);
}
body.light .inv3-doc-menu-trigger{
  border-color:rgba(26,30,46,.09);
  background:rgba(26,30,46,.025);
}
body.light .inv3-doc-menu{
  /* 2026-04-28 Fix Wahrgenommene Transparenz Light-Mode:
     Vorher var(--card2) = #f8f9fb war fast identisch mit den Row-Backgrounds
     (#fff mit minimalem Tint). Jetzt pure white + stronger drop-shadow,
     damit das Menü klar als floating overlay gelesen wird. */
  border:1px solid rgba(26,30,46,.16);
  background:white;
  box-shadow:
    0 24px 48px rgba(26,30,46,.22),
    0 8px 18px rgba(26,30,46,.12);
}
body.light .inv3-doc-menu-item:hover,
body.light .inv3-doc-menu-item:focus-visible{
  background:rgba(26,30,46,.045);
}
body.light .inv3-doc-menu-item.is-danger:hover,
body.light .inv3-doc-menu-item.is-danger:focus-visible{
  background:rgba(201,66,66,.08);
}
body.light .inv3-conversion-showcase{
  border-color:rgba(var(--ink-rgba-base),.12);
  background:
    radial-gradient(circle at 50% 18%, rgba(232,184,75,.16), transparent 30%),
    linear-gradient(135deg,rgba(248,250,253,.98),rgba(232,237,246,.96));
  box-shadow:0 22px 46px rgba(var(--ink-rgba-base),.14);
}
body.light .inv3-conversion-card{
  background:rgba(var(--surface-solid-rgba-base),.74);
  border-color:rgba(var(--ink-rgba-base),.1);
  box-shadow:inset 0 1px 0 rgba(var(--surface-solid-rgba-base),.78),0 18px 34px rgba(var(--ink-rgba-base),.08);
}
body.light .inv3-conversion-card--invoice{
  border-color:rgba(176,128,28,.32);
  background:linear-gradient(180deg,rgba(var(--surface-solid-rgba-base),.82),rgba(246,240,226,.76));
}
body.light .inv3-conversion-hide{
  color:var(--tone-warn-fg-strong);
  background:rgba(232,184,75,.16);
  border-color:rgba(176,128,28,.34);
}
body.light .inv3-conversion-hide:hover,
body.light .inv3-conversion-hide:focus-visible{
  color:var(--text-strong);
  background:rgba(232,184,75,.24);
  border-color:rgba(176,128,28,.48);
}
body.light .inv3-conversion-hide-tip{
  background:rgba(var(--surface-solid-rgba-base),.98);
  color:rgba(26,30,46,.72);
  box-shadow:0 16px 34px rgba(var(--ink-rgba-base),.14);
}
body.light .inv3-conversion-pill.is-draft,
body.light .inv3-conversion-cta span{
  color:var(--text);
}
body.light .inv3-conversion-pill:not(.is-draft){
  border-color:rgba(var(--ink-rgba-base),.1);
  background:rgba(var(--ink-rgba-base),.035);
  color:rgba(var(--ink-rgba-base),.62);
}
body.light .inv3-conversion-controls{
  border-color:rgba(var(--ink-rgba-base),.09);
  background:rgba(var(--ink-rgba-base),.045);
  color:rgba(var(--ink-rgba-base),.62);
}
body.light .inv3-conversion-hide{
  border-color:rgba(var(--ink-rgba-base),.09);
  background:rgba(var(--surface-solid-rgba-base),.58);
  color:rgba(var(--ink-rgba-base),.62);
}
body.light .inv3-conversion-hide:hover,
body.light .inv3-conversion-hide:focus-visible{
  border-color:rgba(176,128,28,.3);
  background:rgba(232,184,75,.14);
  color:var(--text);
}
body.light .inv3-conversion-nav{
  border-color:rgba(var(--ink-rgba-base),.08);
  background:rgba(var(--surface-solid-rgba-base),.62);
  color:var(--text);
}
body.light .inv3-conversion-queue-item{
  border-color:rgba(var(--ink-rgba-base),.08);
  background:rgba(var(--surface-solid-rgba-base),.58);
  color:rgba(var(--ink-rgba-base),.62);
}
body.light .inv3-conversion-queue-item:hover,
body.light .inv3-conversion-queue-item:focus-visible,
body.light .inv3-conversion-queue-item.is-active{
  border-color:rgba(176,128,28,.3);
  background:rgba(232,184,75,.14);
}
body.light .inv3-conversion-toggle em{
  background:rgba(var(--ink-rgba-base),.055);
  color:rgba(var(--ink-rgba-base),.58);
}
body.light .inv3-conversion-toggle.is-visible{
  border-color:rgba(176,128,28,.3)!important;
  background:rgba(232,184,75,.14)!important;
}
@media(max-width:1080px){
  .inv3-hero-grid{grid-template-columns:1fr;}
  .inv3-workflow-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .inv3-signalband{flex-direction:column;align-items:flex-start;}
  .inv3-signalband-action{width:100%;}
  .inv3-conversion-stage{grid-template-columns:1fr;gap:22px;padding:30px 28px 32px;}
  .inv3-conversion-action{order:2;}
  .inv3-conversion-card--invoice{order:3;}
  .inv3-conversion-cta{width:100%;min-height:76px;flex-direction:row;}
  .inv3-conversion-cta span{transform:rotate(90deg);}
  .inv3-conversion-cta:hover span{transform:rotate(90deg) translateX(2px) scale(1.02);}
  .inv3-row{
    grid-template-columns:minmax(0,1fr) minmax(120px,auto);
    grid-template-areas:
      "identity amount"
      "meta meta"
      "signal actions";
    align-items:start;
  }
  .inv3-row-actions{
    align-self:end;
    justify-content:flex-end;
    flex-wrap:wrap;
  }
  .inv3-row-action-main{flex:0 1 auto!important;}
  .inv3-row-action-pill{flex:0 1 auto;}
}
@media(max-width:780px){
  .inv3-page{padding:0 14px 34px;}
  .inv3-hero,
  .inv3-workflow,
  .inv3-toolbar{padding:18px;}
  .inv3-signalband{padding:16px 18px;}
  .inv3-conversion-head{align-items:flex-start;flex-direction:column;padding:18px;}
  .inv3-conversion-head-side{width:100%;justify-content:space-between;}
  .inv3-conversion-controls{width:100%;justify-content:space-between;}
  .inv3-conversion-queue{padding:12px 18px 0;}
  .inv3-conversion-queue-item{min-width:172px;}
  .inv3-conversion-stage{padding:20px 18px 22px;}
  .inv3-conversion-card{min-height:auto;padding:24px 22px;border-radius:22px;}
  .inv3-conversion-customer{font-size:23px;}
  .inv3-conversion-facts div,
  .inv3-conversion-total{align-items:flex-start;flex-direction:column;gap:4px;}
  .inv3-hero-main h1{font-size:30px;}
  .inv3-primary-metric strong{font-size:34px;}
  .inv3-hero-metrics,
  .inv3-empty-grid,
  .inv3-workflow-grid,
  .inv3-statusboard-grid{grid-template-columns:1fr;}
  .inv3-toolbar-main{align-items:stretch;}
  .inv3-search{flex-basis:100%;}
  .inv3-toolbar-controls{width:100%;}
  .inv3-toolbar-create{flex:1 1 180px;}
  .inv3-toolbar-create .inv3-toolbar-cta{width:100%;justify-content:center;}
  .inv3-sort{flex:1;justify-content:space-between;}
  .inv3-sort-trigger{min-width:0;flex:1;}
  .inv3-reset{margin-left:0;}
  .inv3-row{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "identity amount"
      "signal signal"
      "meta meta"
      "actions actions";
    padding:14px;
  }
  .inv3-row-meta,
  .inv3-row-meta.is-count-2,
  .inv3-row-meta.is-count-3,
  .inv3-row-meta.is-count-4,
  .inv3-row-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .inv3-row-amount{text-align:right;min-width:0;}
  .inv3-row-actions{justify-content:flex-start;flex-wrap:wrap;}
  .inv3-row-action-main{flex:0 1 auto!important;}
  .inv3-row-action-pill{flex:0 1 auto;}
  .inv3-state-card{grid-template-columns:1fr;}
  .inv3-state-cta{justify-self:start;}
}
@media(max-width:560px){
  .inv3-comparebar,
  .inv3-section-head,
  .inv3-collection-head{align-items:flex-start;}
  .inv3-comparebar{grid-template-columns:1fr;}
  .inv3-suite-nav,
  .inv3-compare-actions,
  .inv3-toolbar-controls{width:100%;}
  .inv3-suite-nav{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:2px;
  }
  .inv3-suite-nav::-webkit-scrollbar{display:none;}
  .inv3-suite-link{
    flex:0 0 auto;
    min-width:max-content;
    justify-content:center;
    text-align:center;
  }
  .inv3-compare-actions .btn{flex:1;justify-content:center;}
  .inv3-toolbar-main{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:10px;
  }
  .inv3-toolbar-controls{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:stretch;
    gap:10px;
  }
  .inv3-toolbar-controls > :only-child{grid-column:1/-1;}
  .inv3-toolbar-controls .btn{justify-content:center;}
  .inv3-toolbar-shortcut{display:none;}
  .inv3-toolbar-create{min-width:0;}
  .inv3-toolbar-create .inv3-toolbar-cta{
    width:100%;
    min-height:46px;
    height:46px;
    padding:0 12px!important;
    border-radius:14px!important;
    font-size:13px;
  }
  .inv3-search{width:100%;min-width:0;height:46px;border-radius:14px;}
  .inv3-sort{
    width:auto;
    min-width:0;
    min-height:0;
    padding:0;
    border-radius:14px;
    flex-wrap:nowrap;
  }
  .inv3-sort-label{display:none;}
  .inv3-sort-trigger{
    width:100%;
    min-width:0;
    min-height:46px;
    height:46px;
    padding:0 12px;
    border-radius:14px;
    font-size:13px;
  }
  .inv3-sort-menu{
    left:0;
    right:0;
    min-width:0;
    padding:8px;
    border-radius:16px;
    /* 2026-04-28 Fix Mobile-Transparenz: stärkerer Schatten als auf Desktop,
       weil Mobile-Touch-Affordance ein klares „elevated"-Gefühl braucht.
       Background erbt von der base-rule (#262d4a Dark / #fff Light), die jetzt
       solid ist statt 0.995-Alpha-Gradient. */
    box-shadow:
      0 26px 52px rgba(0,0,0,.55),
      0 8px 20px rgba(0,0,0,.32),
      inset 0 1px 0 rgba(var(--surface-solid-rgba-base,255,255,255),.04);
  }
  .inv3-filter-row{
    gap:6px;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:4px;
    margin-left:-2px;
    margin-right:-2px;
  }
  .inv3-filter-row::-webkit-scrollbar{display:none;}
  .inv3-filter,.inv3-reset{
    flex:0 0 auto;
    padding:0 12px;
  }
  .inv3-row{
    grid-template-columns:1fr;
    grid-template-areas:
      "identity"
      "signal"
      "amount"
      "meta"
      "actions";
    gap:10px;
    padding:14px 14px 14px 16px;
  }
  .inv3-row-customer{font-size:17px;}
  .inv3-row-meta,
  .inv3-row-meta.is-count-1,
  .inv3-row-meta.is-count-2,
  .inv3-row-meta.is-count-3,
  .inv3-row-meta.is-count-4,
  .inv3-row-grid{grid-template-columns:1fr;}
  .inv3-row-meta.is-count-3 > .inv3-row-meta-item:nth-child(3){display:none;}
  .inv3-row-amount{text-align:left;}
  .inv3-row-amount strong{font-size:21px;}
  .inv3-chipline{gap:6px 8px;}
  .inv3-status,
  .inv3-duechip{
    min-height:22px;
    padding:0 9px;
    font-size:10.5px;
  }
  .inv3-row-actions{
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:6px;
  }
  .inv3-row-action-main{
    flex:0 1 auto!important;
    width:auto;
    max-width:100%;
    min-height:36px!important;
    padding-left:12px!important;
    padding-right:12px!important;
    font-size:12.5px!important;
  }
  .inv3-row-action-pill{
    flex:0 1 auto;
    width:auto;
    max-width:100%;
    min-height:36px;
    padding-left:11px!important;
    padding-right:11px!important;
  }
  .inv3-doc-menu-trigger{
    width:36px;
    min-width:36px;
    height:36px;
  }
}
@media(max-width:430px){
  .inv3-toolbar{padding:18px 16px 16px;}
  .inv3-list-shell{padding:12px;}
  .inv3-sort-menu{padding:6px;}
  .inv3-sort-option{min-height:42px;padding:0 12px;font-size:14px;}
  .inv3-filter,.inv3-reset{min-height:38px;padding:0 10px;font-size:11px;}
  .inv3-row{padding:13px 12px 13px 15px;}
  .inv3-row-action-main{
    min-height:34px!important;
    padding-left:11px!important;
    padding-right:11px!important;
    font-size:12px!important;
  }
  .inv3-row-action-pill{
    min-height:32px;
    padding-left:10px!important;
    padding-right:10px!important;
    gap:5px;
    font-size:12px!important;
  }
  .inv3-doc-menu-trigger{
    width:34px;
    min-width:34px;
    height:34px;
    font-size:18px;
  }
}

.inv-totals--bare{border:none;padding:0;background:none;}
.inv-totals--top-gap{margin-top:12px;}
.inv-form-row--no-bottom{margin-bottom:0;}
.q-contact-summary-grow{flex:1;}
.inv-items-table__col--description{width:42%;}
.inv-items-table__col--qty{width:10%;}
.inv-items-table__col--unit{width:10%;}
.inv-items-table__col--unit-price{width:15%;}
.inv-items-table__col--tax{width:12%;}
.inv-items-table__col--total{width:11%;}
.inv-items-table__col--actions{width:5%;}
.inv-items-table__cell--actions{white-space:nowrap;}
.inv-pdf-modal--wide{max-width:900px;}
.q-pdf-print-frame{position:fixed;left:0;top:0;width:100vw;height:100vh;border:0;opacity:.01;pointer-events:none;z-index:-1;}

/* ── Invoice UI Design-System Foundation ── */
.tx-card{background:var(--invoice-surface);border:1px solid var(--invoice-border);border-radius:var(--radius-lg);padding:18px;color:var(--invoice-text-primary);box-shadow:0 1px 2px rgba(0,0,0,.12);}
.tx-card--elevated{background:var(--invoice-surface-elevated);border-color:var(--invoice-border-strong);box-shadow:var(--shadow-md);}
.tx-card--success{background:linear-gradient(180deg,var(--invoice-success-bg),var(--invoice-surface));border-color:var(--invoice-success-border);}
.tx-card--warning{background:linear-gradient(180deg,var(--invoice-warning-bg),var(--invoice-surface));border-color:var(--invoice-warning-border);}
.tx-card--danger{background:linear-gradient(180deg,var(--invoice-danger-bg),var(--invoice-surface));border-color:var(--invoice-danger-border);}
.tx-card--info{background:linear-gradient(180deg,var(--invoice-info-bg),var(--invoice-surface));border-color:var(--invoice-info-border);}
.tx-card--canceled{background:linear-gradient(180deg,var(--invoice-canceled-bg),var(--invoice-surface));border-color:var(--invoice-canceled-border);}
.tx-card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;}
.tx-card__title-group{display:grid;gap:3px;min-width:0;}
.tx-card__kicker{font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.04em;text-transform:uppercase;color:var(--invoice-text-muted);}
.tx-card__title{font-size:var(--fs-lg);line-height:var(--lh-tight);color:var(--invoice-text-primary);}
.tx-card__body{min-width:0;}
.tx-card__footer{margin-top:14px;padding-top:12px;border-top:1px solid rgba(var(--surface-rgba-base),.08);color:var(--invoice-text-secondary);font-size:var(--fs-sm);}
.tx-button{min-height:40px;border-radius:var(--radius-md);align-items:center;justify-content:center;gap:8px;white-space:nowrap;transition:background var(--tr-fast),border-color var(--tr-fast),color var(--tr-fast),box-shadow var(--tr-fast),transform var(--tr-fast);}
.tx-button:hover{transform:translateY(-1px);}
.tx-button:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(232,184,75,.24);}
.tx-button:disabled{transform:none;}
.tx-button .app-icon{flex:0 0 auto;}
.tx-button--loading{position:relative;}
.tx-button[aria-busy="true"]{cursor:wait;}
/* .tx-loading-spinner und Keyframes leben jetzt in _03-ledger-loader.css. */
.tx-empty-state{display:grid;justify-items:center;gap:12px;text-align:center;padding:28px;border:1px solid var(--invoice-border);border-radius:var(--radius-lg);background:var(--invoice-surface);color:var(--invoice-text-primary);}
.tx-empty-state__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--invoice-info-bg);color:var(--invoice-info);}
.tx-empty-state__title{font-size:var(--fs-lg);line-height:var(--lh-tight);font-weight:var(--fw-bold);}
.tx-empty-state__description{max-width:52ch;color:var(--invoice-text-secondary);font-size:var(--fs-sm);}
.tx-empty-state__features{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:680px;}
.tx-empty-state__feature{border:1px solid var(--invoice-border);border-radius:var(--radius-sm);padding:6px 10px;color:var(--invoice-text-secondary);font-size:var(--fs-sm);background:var(--invoice-surface-elevated);}
.tx-empty-state__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;}
.tx-empty-state__muted{color:var(--invoice-text-muted);font-size:var(--fs-xs);}
.tx-badge{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:22px;padding:3px 9px;border-radius:var(--radius-pill);border:1px solid rgba(var(--surface-rgba-base),.12);font-size:var(--fs-xs);font-weight:var(--fw-bold);line-height:1;color:var(--invoice-text-secondary);background:rgba(var(--surface-rgba-base),.05);}
.tx-badge--success{color:var(--invoice-success);background:var(--invoice-success-bg);border-color:var(--invoice-success-border);}
.tx-badge--warning{color:var(--invoice-warning);background:var(--invoice-warning-bg);border-color:var(--invoice-warning-border);}
.tx-badge--danger{color:var(--invoice-danger);background:var(--invoice-danger-bg);border-color:var(--invoice-danger-border);}
.tx-badge--info,.tx-badge--draft{color:var(--invoice-info);background:var(--invoice-info-bg);border-color:var(--invoice-info-border);}
.tx-badge--canceled{color:var(--invoice-canceled);background:var(--invoice-canceled-bg);border-color:var(--invoice-canceled-border);}
.tx-field,.tx-select-field{display:grid;gap:6px;color:var(--invoice-text-secondary);font-size:var(--fs-sm);font-weight:var(--fw-semibold);}
.tx-select-field{position:relative;}
.tx-field__label{color:var(--invoice-text-muted);font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.04em;}
.tx-field__hint{color:var(--invoice-text-muted);font-size:var(--fs-xs);font-weight:var(--fw-medium);}
.tx-input,.tx-select{width:100%;min-height:40px;border:1px solid var(--invoice-border);border-radius:var(--radius-md);background:rgba(var(--surface-rgba-base),.04);color:var(--invoice-text-primary);font:inherit;font-size:var(--fs-base);}
.tx-input{padding:0 12px;}
.tx-select{padding:0 42px 0 12px;-webkit-appearance:none;appearance:none;background-image:none;}
.tx-select-field::after{content:"";position:absolute;right:14px;top:50%;width:16px;height:16px;background-color:var(--invoice-text-secondary);transform:translateY(-50%);pointer-events:none;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px 16px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px 16px no-repeat;}
.tx-input:focus,.tx-select:focus{outline:none;border-color:var(--invoice-accent);box-shadow:0 0 0 3px rgba(232,184,75,.16);}
.tx-search-input{position:relative;display:block;min-height:42px;padding:0;border:1px solid var(--invoice-border);border-radius:var(--radius-md);background:rgba(var(--surface-rgba-base),.04);}
.tx-search-input:focus-within{border-color:var(--invoice-accent);box-shadow:0 0 0 3px rgba(232,184,75,.14);}
.tx-search-input .app-icon{position:absolute;left:13px;top:50%;width:16px;height:16px;color:var(--invoice-text-muted);transform:translateY(-50%);pointer-events:none;}
.tx-search-input__control{width:100%;min-height:40px;padding:0 42px 0 38px;border:0;background:transparent;box-shadow:none;}
.tx-search-input__control:focus{box-shadow:none;}
.tx-search-input__clear{position:absolute;right:5px;top:50%;min-width:32px;min-height:32px;padding:0;transform:translateY(-50%);}
.tx-tabs{display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--invoice-border);border-radius:var(--radius-md);background:rgba(var(--surface-rgba-base),.04);}
.tx-tabs__item{min-height:34px;padding:0 14px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--invoice-text-secondary);font:inherit;font-size:var(--fs-base);font-weight:var(--fw-semibold);cursor:pointer;}
.tx-tabs__item:hover{color:var(--invoice-text-primary);background:rgba(var(--surface-rgba-base),.05);}
.tx-tabs__item.is-active,.tx-tabs__item[aria-selected="true"]{color:var(--invoice-accent);background:rgba(232,184,75,.12);}
.tx-tabs__item:focus-visible{outline:2px solid var(--invoice-accent);outline-offset:2px;}
.tx-dropdown{position:relative;display:inline-block;}
.tx-dropdown__trigger{display:inline-flex;align-items:center;justify-content:center;width:36px;min-width:36px;height:36px;border:0;border-radius:8px;background:transparent;color:var(--text3);cursor:pointer;list-style:none;transition:background var(--tr-fast),color var(--tr-fast);}
.tx-dropdown__trigger::-webkit-details-marker{display:none;}
.tx-dropdown__trigger:hover,.tx-dropdown[open] .tx-dropdown__trigger{background:rgba(var(--surface-rgba-base),.08);color:var(--text);}
body.light .tx-dropdown__trigger:hover,body.light .tx-dropdown[open] .tx-dropdown__trigger{background:rgba(15,23,42,.06);}
.tx-dropdown__trigger:focus-visible{outline:2px solid rgba(var(--accent-rgba-base),.55);outline-offset:1px;}
.tx-dropdown__menu{position:absolute;right:0;top:calc(100% + 8px);z-index:var(--z-tooltip);display:flex;flex-direction:column;gap:1px;width:230px;padding:6px;border:1px solid var(--invoice-border);border-radius:10px;background:var(--inv3-doc-menu-bg);box-shadow:0 16px 40px rgba(0,0,0,.35);font-family:var(--font-sans);letter-spacing:0;}
.tx-dropdown--up .tx-dropdown__menu{top:auto;bottom:calc(100% + 8px);}
.tx-dropdown__item{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;height:34px;min-height:34px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--text);font-family:var(--font-sans);font-size:13px;font-weight:var(--fw-medium);letter-spacing:0;white-space:nowrap;cursor:pointer;transform:none;transition:background var(--tr-fast),color var(--tr-fast);}
.tx-dropdown__item:hover,.tx-dropdown__item:focus-visible{transform:none;}
.tx-dropdown__item:hover{background:rgba(var(--surface-rgba-base),.06);color:var(--text);}
body.light .tx-dropdown__item:hover{background:rgba(15,23,42,.04);}
.tx-dropdown__item:focus-visible{outline:2px solid rgba(var(--accent-rgba-base),.55);outline-offset:-2px;}
.tx-dropdown__item.tx-button--danger{color:var(--red);}
.tx-dropdown__item.tx-button--danger:hover{background:rgba(248,113,113,.1);color:var(--red);}
.tx-dropdown__menu,.tx-dropdown__item{font-family:var(--font-sans);}
.tx-dropdown__separator{display:block;height:1px;margin:4px 0;background:rgba(var(--surface-rgba-base),.08);}
.tx-pagination{display:flex;align-items:center;justify-content:flex-end;gap:6px;color:var(--invoice-text-secondary);}
.tx-pagination__page{min-width:40px;min-height:40px;border:1px solid var(--invoice-border);border-radius:var(--radius-md);background:rgba(var(--surface-rgba-base),.03);color:var(--invoice-text-secondary);font:inherit;font-weight:var(--fw-semibold);cursor:pointer;}
.tx-pagination__page:hover{border-color:var(--invoice-border-strong);color:var(--invoice-text-primary);}
.tx-pagination__page.is-active,.tx-pagination__page[aria-current="page"]{border-color:var(--invoice-accent);color:var(--invoice-accent);background:rgba(232,184,75,.10);}
.tx-pagination__page:focus-visible,.tx-pagination__nav:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(232,184,75,.24);}
.tx-pagination__ellipsis{padding:0 4px;color:var(--invoice-text-muted);}
.tx-filter-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.tx-filter-chip{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 12px;border:1px solid var(--invoice-border);border-radius:var(--radius-pill);background:rgba(var(--surface-rgba-base),.03);color:var(--invoice-text-secondary);font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-semibold);cursor:pointer;}
.tx-filter-chip:hover{color:var(--invoice-text-primary);border-color:var(--invoice-border-strong);}
.tx-filter-chip.is-active,.tx-filter-chip[aria-pressed="true"]{color:var(--invoice-accent);border-color:rgba(232,184,75,.38);background:rgba(232,184,75,.12);}
.tx-filter-chip:focus-visible{outline:2px solid var(--invoice-accent);outline-offset:2px;}
.tx-filter-chip__count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--radius-pill);background:rgba(var(--surface-rgba-base),.08);font-size:var(--fs-xs);font-family:var(--font-mono);}
.tx-invoice-kpi-card{min-height:142px;}
.tx-invoice-kpi-card__top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;}
.tx-invoice-kpi-card__label{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--invoice-text-secondary);}
.tx-invoice-kpi-card__icon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--radius-md);background:rgba(var(--surface-rgba-base),.06);color:currentColor;}
.tx-invoice-kpi-card__value{display:block;font-size:26px;line-height:var(--lh-tight);font-weight:var(--fw-extrabold);color:var(--invoice-text-primary);}
.tx-invoice-kpi-card__subvalue{display:block;margin-top:8px;font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--invoice-text-primary);}
.tx-invoice-kpi-card__helper{display:block;margin-top:8px;font-size:var(--fs-sm);color:var(--invoice-text-muted);}
.tx-invoice-kpi-card__link{display:block;margin-top:8px;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--invoice-accent);}
button.tx-invoice-kpi-card--link{display:block;width:100%;min-height:142px;border:1px solid var(--invoice-border);border-radius:var(--radius-lg);padding:18px;color:var(--invoice-text-primary);box-shadow:0 1px 2px rgba(0,0,0,.12);text-align:left;font:inherit;cursor:pointer;transition:border-color var(--tr-fast),box-shadow var(--tr-fast),transform var(--tr-fast);}
button.tx-invoice-kpi-card--link:hover{border-color:var(--invoice-border-strong);box-shadow:var(--shadow-md);transform:translateY(-1px);}
button.tx-invoice-kpi-card--link:focus-visible{outline:none;box-shadow:0 0 0 3px var(--invoice-focus-ring);}
button.tx-invoice-kpi-card--warning{background:linear-gradient(180deg,var(--invoice-warning-bg),var(--invoice-surface));border-color:var(--invoice-warning-border);}
button.tx-invoice-kpi-card--danger{background:linear-gradient(180deg,var(--invoice-danger-bg),var(--invoice-surface));border-color:var(--invoice-danger-border);}
.tx-invoice-payment-card{min-height:0;}
.tx-invoice-payment-card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:var(--fs-base);font-weight:var(--fw-bold);}
.tx-invoice-payment-card__head strong{color:var(--invoice-text-primary);}
.tx-invoice-payment-card__bar{height:9px;margin:18px 0;background:rgba(var(--surface-rgba-base),.08);overflow:hidden;}
.tx-invoice-payment-card__meter{display:block;width:100%;height:100%;}
.tx-invoice-payment-card__stats{display:grid;gap:8px;font-size:var(--fs-sm);color:var(--invoice-text-secondary);}
.tx-invoice-payment-card__stats span{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.tx-invoice-payment-card__next{margin-top:14px;padding-top:12px;border-top:1px solid rgba(var(--surface-rgba-base),.08);font-size:var(--fs-sm);color:var(--invoice-text-secondary);}
.tx-invoice-alert{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px;border:1px solid var(--invoice-warning-border);border-radius:var(--radius-lg);background:var(--invoice-warning-bg);color:var(--invoice-text-primary);}
.tx-invoice-alert--danger{border-color:var(--invoice-danger-border);background:var(--invoice-danger-bg);}
.tx-invoice-alert--success{border-color:var(--invoice-success-border);background:var(--invoice-success-bg);}
.tx-invoice-alert--info{border-color:var(--invoice-info-border);background:var(--invoice-info-bg);}
.tx-invoice-alert__copy{display:grid;gap:4px;min-width:0;}
.tx-invoice-alert__kicker{font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.04em;text-transform:uppercase;color:var(--invoice-danger);}
.tx-invoice-alert__title{font-size:var(--fs-lg);line-height:var(--lh-tight);}
.tx-invoice-alert__description{font-size:var(--fs-base);color:var(--invoice-text-secondary);}
.tx-invoice-status-badge{white-space:nowrap;}
.tx-invoice-status-badge--warning{color:var(--invoice-warning);background:var(--invoice-warning-bg);border-color:var(--invoice-warning-border);}
.tx-invoice-status-badge--danger{color:var(--invoice-danger);background:var(--invoice-danger-bg);border-color:var(--invoice-danger-border);}
.tx-invoice-status-badge--success{color:var(--invoice-success);background:var(--invoice-success-bg);border-color:var(--invoice-success-border);}
.tx-invoice-status-badge--info{color:var(--invoice-info);background:var(--invoice-info-bg);border-color:var(--invoice-info-border);}
.tx-invoice-status-badge--canceled{color:var(--invoice-canceled);background:var(--invoice-canceled-bg);border-color:var(--invoice-canceled-border);}
.tx-amount-cell{display:grid;gap:2px;justify-items:end;text-align:right;white-space:nowrap;}
.tx-amount-cell__gross{font-size:var(--fs-md);font-weight:var(--fw-extrabold);line-height:var(--lh-tight);color:var(--invoice-text-primary);font-family:var(--font-sans);}
.tx-amount-cell__net{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--invoice-text-muted);}
.tx-amount-cell--error .tx-amount-cell__gross{color:var(--invoice-danger);}
.tx-amount-cell--error .tx-amount-cell__net{color:var(--invoice-warning);}
body.light .tx-card{background:var(--invoice-surface);border-color:var(--invoice-border);box-shadow:0 1px 2px rgba(15,23,42,.06);}
body.light .tx-card--elevated{background:var(--invoice-surface-elevated);box-shadow:0 12px 32px rgba(15,23,42,.08);}
body.light .tx-input,body.light .tx-select,body.light .tx-search-input,body.light .tx-tabs,body.light .tx-pagination__page,body.light .tx-filter-chip{background:rgba(var(--surface-rgba-base),.025);}
body.light .tx-search-input__control{background:transparent;border-color:transparent;}
body.light .tx-dropdown__menu{background:var(--invoice-surface-elevated);border-color:var(--invoice-border);box-shadow:0 12px 28px rgba(15,23,42,.14);}
body.light .tx-dropdown__separator{background:rgba(var(--surface-rgba-base),.08);}
body.light .tx-invoice-payment-card__bar{background:rgba(var(--surface-rgba-base),.08);}
body.light .inv2-header h1,body.light .inv2-analytics-header h1{color:var(--invoice-text-primary);}
body.light .inv2-toolbar{background:rgba(var(--surface-solid-rgba-base),.72);box-shadow:0 1px 2px rgba(15,23,42,.04);}
body.light .inv2-list,body.light .inv2-mobile-card{background:var(--invoice-surface);border-color:var(--invoice-border);box-shadow:0 1px 2px rgba(15,23,42,.05);}
body.light .inv2-list-head,body.light .inv2-filter-row{border-color:var(--invoice-border);}
body.light .inv2-table th{background:rgba(var(--surface-rgba-base),.025);}
body.light .inv2-table td{border-top-color:rgba(var(--surface-rgba-base),.07);}
body.light .inv2-table-row:hover,body.light .inv2-mobile-card:hover{background:rgba(var(--surface-rgba-base),.02);}
@media(max-width:640px){
  .tx-card{padding:14px;border-radius:var(--radius-md);}
  .tx-invoice-alert{align-items:stretch;flex-direction:column;}
  .tx-pagination{justify-content:center;flex-wrap:wrap;}
  .tx-tabs{width:100%;overflow-x:auto;}
  .tx-tabs__item{flex:1 0 auto;}
}

/* ── Invoices v2 test page (mockup2-based, isolated from current /rechnungen) ── */
.inv2-page{display:grid;gap:24px;color:var(--invoice-text-primary);}
.inv2-page{max-width:1320px;margin:0 auto;}
.inv2-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;}
.inv2-header-main{display:grid;gap:14px;min-width:0;}
.inv2-header h1{font-size:30px;line-height:1.15;font-weight:var(--fw-bold);letter-spacing:-0.025em;}
.inv2-header p{max-width:620px;color:var(--invoice-text-secondary);font-size:var(--fs-body);}
.inv2-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;}
.inv2-year-scope{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;max-width:100%;padding:0 12px;border:1px solid var(--invoice-border);border-radius:var(--radius-md);background:rgba(var(--surface-rgba-base),.035);color:var(--invoice-text-primary);font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-semibold);letter-spacing:0;cursor:pointer;white-space:nowrap;transition:background var(--tr-fast),border-color var(--tr-fast),color var(--tr-fast),box-shadow var(--tr-fast);}
.inv2-year-scope:hover{border-color:var(--invoice-border-strong);background:rgba(var(--surface-rgba-base),.055);}
.inv2-year-scope:focus-visible{outline:none;box-shadow:0 0 0 3px var(--invoice-focus-ring);}
.inv2-year-scope__prefix{color:var(--invoice-text-secondary);}
.inv2-year-scope__year{font-weight:var(--fw-extrabold);}
.inv2-year-scope__chevron{width:14px;height:14px;flex:0 0 auto;color:var(--invoice-text-secondary);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.inv2-year-scope--desktop{margin-right:6px;}
.inv2-year-scope--mobile{display:none;width:max-content;}
.inv2-tabs{width:max-content;max-width:100%;}
.inv2-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.inv2-kpi-grid .tx-invoice-payment-card{grid-column:auto;}
.inv2-kpi-card--primary{min-height:142px;}
.inv2-kpi-card--secondary{min-height:124px;padding:16px;background:var(--invoice-surface);}
.inv2-kpi-card--secondary .tx-invoice-kpi-card__top{margin-bottom:10px;}
.inv2-kpi-card--secondary .tx-invoice-kpi-card__icon{width:34px;height:34px;opacity:.82;}
.inv2-kpi-card--secondary .tx-invoice-kpi-card__value{font-size:22px;}
.inv2-kpi-card--secondary .tx-invoice-kpi-card__subvalue{font-size:var(--fs-sm);color:var(--invoice-text-secondary);}
.inv2-kpi-card--secondary .tx-invoice-kpi-card__helper{font-size:var(--fs-xs);color:var(--invoice-text-muted);}
.inv2-alert{scroll-margin-top:calc(var(--topbar-height,64px) + 24px);}
.inv2-conversion-slot{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px;border:1px solid var(--invoice-border);border-radius:var(--radius-lg);background:rgba(var(--surface-rgba-base),.035);scroll-margin-top:calc(var(--topbar-height,64px) + 24px);}
.inv2-conversion-slot.is-open{display:block;padding:0;border:0;background:transparent;}
.inv2-conversion-slot .inv3-conversion-showcase{margin:0;}
.inv2-conversion-copy{display:grid;gap:4px;min-width:0;}
.inv2-conversion-copy strong{color:var(--invoice-text-primary);font-size:var(--fs-lg);font-weight:var(--fw-extrabold);line-height:var(--lh-tight);}
.inv2-conversion-copy span{color:var(--invoice-text-secondary);font-size:var(--fs-sm);font-weight:var(--fw-semibold);}
.inv2-conversion-toggle{flex:0 0 auto;}
.inv2-toolbar{display:grid;gap:14px;padding:16px;border:1px solid var(--invoice-border);border-radius:var(--radius-lg);background:rgba(var(--surface-rgba-base),.035);}
.inv2-toolbar-main{display:grid;grid-template-columns:minmax(360px,1fr) auto;gap:14px;align-items:center;}
.inv2-toolbar-controls{display:grid;grid-template-columns:minmax(210px,260px) auto;gap:10px;align-items:center;}
.inv2-sort{min-width:210px;}
.inv2-filter-button.is-active{border-color:rgba(232,184,75,.42);background:rgba(232,184,75,.12);color:var(--invoice-accent);}
.inv2-filter-panel{display:grid;gap:12px;padding:13px;border:1px solid rgba(232,184,75,.28);border-radius:var(--radius-md);background:rgba(232,184,75,.075);}
.inv2-filter-panel__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;color:var(--invoice-text-primary);}
.inv2-filter-panel__head strong{font-size:var(--fs-base);font-weight:var(--fw-bold);}
.inv2-filter-panel__head span{color:var(--invoice-text-secondary);font-size:var(--fs-sm);}
.inv2-filter-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid rgba(var(--surface-rgba-base),.08);padding-top:14px;}
.inv2-filter-row.is-hidden{display:none;}
.inv2-toolbar.is-filter-focus .inv2-filter-row{border-top-color:rgba(232,184,75,.34);}
.inv2-toolbar.is-filter-focus .inv2-filter-chips{filter:drop-shadow(0 0 12px rgba(232,184,75,.16));}
.inv2-reset{border:0;background:transparent;color:var(--invoice-text-secondary);font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-semibold);cursor:pointer;white-space:nowrap;}
.inv2-reset:hover{color:var(--invoice-accent);}
.inv2-reset:focus-visible{outline:2px solid var(--invoice-accent);outline-offset:3px;border-radius:var(--radius-sm);}
.inv2-list{border:1px solid var(--invoice-border);border-radius:var(--radius-lg);background:var(--invoice-surface);overflow:hidden;}
.inv2-list-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--invoice-border);color:var(--invoice-text-secondary);font-size:var(--fs-sm);font-weight:var(--fw-semibold);}
.inv2-list-capnotice{font-weight:var(--fw-regular);text-align:right;color:var(--invoice-text-muted);max-width:60ch;}
@media (max-width:760px){.inv2-list-capnotice{text-align:left;}}
.inv2-table-wrap{overflow-x:auto;}
.inv2-table{width:100%;border-collapse:collapse;min-width:920px;font-family:var(--font-sans);font-size:var(--fs-body);}
.inv2-table th{padding:13px 16px;text-align:left;color:var(--invoice-text-muted);font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.04em;background:rgba(var(--surface-rgba-base),.025);}
.inv2-th-sort{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer;}
.inv2-th-sort:hover,.inv2-th-sort:focus-visible,.inv2-th-sort.is-active{color:var(--invoice-accent);}
.inv2-th-sort:focus-visible{outline:2px solid rgba(232,184,75,.35);outline-offset:3px;border-radius:6px;}
.inv2-th-sort__glyph{display:inline-flex;align-items:center;justify-content:center;width:12px;min-width:12px;font-size:12px;line-height:1;color:currentColor;}
.inv2-table th:nth-child(1),.inv2-table th:nth-child(2),.inv2-table th:nth-child(5),
.inv2-table td:nth-child(1),.inv2-table td:nth-child(2),.inv2-table td:nth-child(5){text-align:left;}
.inv2-table th:nth-child(6),.inv2-table td:nth-child(6){text-align:right;}
.inv2-table th.is-right .inv2-th-sort{justify-content:flex-end;margin-left:auto;}
.inv2-table td{padding:17px 16px;border-top:1px solid rgba(var(--surface-rgba-base),.07);vertical-align:middle;font-family:var(--font-sans);font-size:14px;line-height:1.45;letter-spacing:0;}
/* Status-Inhalt: Flex-Gap nur im Wrapper; die td bleibt table-cell, damit
   Tabellen-Borders ueber die ganze Zeile sauber zusammenhaengen. */
.inv2-status-cell__content{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.inv2-table-row{transition:background var(--tr-fast),box-shadow var(--tr-fast);}
.inv2-table-row[data-row-action]{cursor:pointer;}
.inv2-table-row:hover{background:rgba(var(--surface-rgba-base),.035);}
.inv2-table-row:focus-within{box-shadow:inset 3px 0 0 var(--invoice-accent);}
.inv2-table-row[data-row-action]:focus-visible{outline:none;box-shadow:inset 3px 0 0 var(--invoice-accent),0 0 0 3px rgba(232,184,75,.14);}
.inv2-table-row.is-attention-focus,.inv2-mobile-card.is-attention-focus{box-shadow:inset 3px 0 0 var(--invoice-danger),0 0 0 3px var(--invoice-danger-border);}
.inv2-doc-id,.inv2-date{display:grid;gap:3px;font-family:var(--font-sans);letter-spacing:0;}
.inv2-doc-id span,.inv2-date{font-weight:var(--fw-bold);color:var(--invoice-text-primary);}
.inv2-doc-id .mono{font-family:var(--font-mono);font-size:13px;letter-spacing:0;}
.inv2-doc-id small,.inv2-date+small,.inv2-due-hint{font-size:var(--fs-sm);color:var(--invoice-text-secondary);font-style:normal;}
.inv2-customer{display:block;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-sans);font-size:15px;font-weight:var(--fw-bold);letter-spacing:0;}
.inv2-due-hint--danger{color:var(--invoice-danger);}
.inv2-due-hint--warning{color:var(--invoice-warning);}
.inv2-due-hint--success{color:var(--invoice-success);}
.inv2-due-hint--info{color:var(--invoice-info);}
.inv2-due-hint--canceled{color:var(--invoice-canceled);}
.inv2-actions{text-align:right;}
.inv2-empty{display:grid;gap:8px;place-items:center;text-align:center;padding:40px 18px;color:var(--invoice-text-secondary);}
.inv2-empty strong{color:var(--invoice-text-primary);font-size:var(--fs-lg);}
.inv2-empty-state{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:32px;align-items:center;text-align:left;padding:48px 32px;border:1px solid var(--invoice-border);border-radius:var(--radius-lg);background:linear-gradient(135deg,rgba(var(--surface-rgba-base),.055),var(--invoice-surface));box-shadow:var(--shadow-md);overflow:hidden;}
.inv2-empty-state__body{display:grid;gap:18px;max-width:720px;min-width:0;}
.inv2-empty-state__mark{display:inline-flex;align-items:center;justify-content:center;width:76px;height:76px;border:1px solid rgba(232,184,75,.34);border-radius:var(--radius-lg);background:rgba(232,184,75,.10);color:var(--invoice-accent);}
.inv2-empty-state__copy{display:grid;gap:10px;}
.inv2-empty-state__copy span{color:var(--invoice-accent);font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.07em;text-transform:uppercase;}
.inv2-empty-state__copy h2{max-width:680px;margin:0;color:var(--invoice-text-primary);font-size:22px;line-height:var(--lh-tight);font-weight:var(--fw-extrabold);letter-spacing:0;}
.inv2-empty-state__copy p{max-width:660px;margin:0;color:var(--invoice-text-secondary);font-size:var(--fs-body);line-height:1.65;}
@media(min-width:761px){.inv2-empty-state__copy p{min-height:3.3em;}}
.inv2-empty-state__actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.inv2-empty-state__actions .btn{min-height:44px;}
.inv2-empty-state__helper{max-width:660px;margin:0;color:var(--invoice-text-muted);font-size:var(--fs-sm);line-height:1.55;}
.inv2-empty-state__preview{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr) minmax(0,.7fr);gap:10px;padding:18px;border:1px solid rgba(var(--surface-rgba-base),.08);border-radius:var(--radius-lg);background:rgba(var(--surface-rgba-base),.03);}
.inv2-empty-state__preview>span{height:10px;border-radius:var(--radius-pill);background:rgba(var(--surface-rgba-base),.10);}
.inv2-empty-state__preview>span:nth-child(2){width:78%;}
.inv2-empty-state__preview>span:nth-child(3){width:64%;justify-self:end;}
.inv2-empty-state__preview>div{grid-column:1 / -1;display:grid;grid-template-columns:42px minmax(0,1fr) 82px;gap:12px;align-items:center;min-height:50px;padding:10px 0;border-top:1px solid rgba(var(--surface-rgba-base),.07);}
.inv2-empty-state__preview i,.inv2-empty-state__preview b,.inv2-empty-state__preview em{display:block;border-radius:var(--radius-pill);background:rgba(var(--surface-rgba-base),.09);}
.inv2-empty-state__preview i{width:30px;height:30px;border-radius:var(--radius-md);}
.inv2-empty-state__preview b{height:12px;}
.inv2-empty-state__preview em{height:12px;width:72px;justify-self:end;}
.inv2-empty-state__preview--analysis{grid-template-columns:repeat(6,minmax(0,1fr));align-items:end;min-height:210px;}
.inv2-empty-state__preview--analysis>span{height:8px;align-self:start;}
.inv2-empty-state__preview--analysis>span:nth-child(1){grid-column:1 / 3;}
.inv2-empty-state__preview--analysis>span:nth-child(2){grid-column:3 / 5;width:84%;}
.inv2-empty-state__preview--analysis>span:nth-child(3){grid-column:5 / 7;width:70%;justify-self:end;}
.inv2-empty-state__preview--analysis>div{grid-column:auto;display:block;min-height:auto;height:92px;padding:0;border-top:0;border-radius:var(--radius-md);background:rgba(var(--surface-rgba-base),.045);}
.inv2-empty-state__preview--analysis>div:nth-of-type(2){height:136px;}
.inv2-empty-state__preview--analysis>div:nth-of-type(3){height:112px;}
.inv2-empty-state__preview--analysis i,.inv2-empty-state__preview--analysis b,.inv2-empty-state__preview--analysis em{display:none;}
body.light .inv2-empty-state{background:var(--invoice-surface);border-color:var(--invoice-border);box-shadow:0 14px 36px rgba(var(--surface-rgba-base),.08);}
body.light .inv2-empty-state__mark{background:rgba(232,184,75,.12);border-color:rgba(232,184,75,.32);color:var(--invoice-accent);}
body.light .inv2-empty-state__preview{background:rgba(var(--surface-rgba-base),.018);border-color:var(--invoice-border);}
body.light .inv2-empty-state__preview>span,
body.light .inv2-empty-state__preview i,
body.light .inv2-empty-state__preview b,
body.light .inv2-empty-state__preview em{background:rgba(var(--surface-rgba-base),.075);}
body.light .inv2-empty-state__preview>div{border-top-color:rgba(var(--surface-rgba-base),.06);}
body.light .inv2-empty-state__preview--analysis>div{background:rgba(var(--surface-rgba-base),.045);}
.inv2-mobile-list{display:none;}
.inv2-mobile-card{display:grid;gap:12px;padding:15px;border:1px solid var(--invoice-border);border-radius:var(--radius-lg);background:var(--invoice-surface);cursor:pointer;}
.inv2-mobile-card:focus-visible{outline:none;border-color:var(--invoice-accent);box-shadow:0 0 0 3px rgba(232,184,75,.2);}
.inv2-mobile-card__top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start;}
.inv2-mobile-card__customer{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--invoice-text-primary);font-size:15px;font-weight:var(--fw-extrabold);line-height:1.25;}
.inv2-mobile-card__amount .tx-amount-cell__gross{font-size:16px;}
/* Mobile-Karten zeigen Status + Dunning-Pille jetzt ohne separates Overflow-
   Menü. Die Chip-Zeile bleibt flex-wrap-fähig, damit lange Dunning-Texte
   nicht in eine zweite, visuell versetzte Aktionsspalte kippen. */
.inv2-mobile-card__id-status{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.inv2-mobile-card__id-status .mono{min-width:0;flex:0 0 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--invoice-text-muted);font-family:var(--font-mono);font-size:12px;font-weight:var(--fw-bold);letter-spacing:0;}
.inv2-mobile-card__due{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-top:4px;color:var(--invoice-text-secondary);font-size:var(--fs-sm);font-weight:var(--fw-semibold);}
.inv2-mobile-card__due strong{font-size:var(--fs-sm);text-align:right;}
.inv2-mobile-card__date{color:var(--invoice-text-muted);font-size:var(--fs-sm);}
.inv2-analytics-page{display:grid;gap:22px;color:var(--invoice-text-primary);}
.inv2-analytics-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;}
.inv2-analytics-header h1{font-size:28px;line-height:var(--lh-tight);font-weight:var(--fw-extrabold);letter-spacing:0;}
.inv2-analytics-header p{max-width:680px;color:var(--invoice-text-secondary);font-size:var(--fs-body);margin-top:6px;}
.inv2-analytics-kicker{display:block;margin-bottom:6px;color:var(--invoice-accent);font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.04em;text-transform:uppercase;}
.inv2-analytics-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;}
.inv2-analytics-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:18px;align-items:start;}
.inv2-revenue-card{display:grid;gap:18px;min-width:0;}
.inv2-revenue-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;}
.inv2-revenue-head span{display:block;margin-bottom:4px;color:var(--invoice-text-muted);font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.04em;text-transform:uppercase;}
.inv2-revenue-head h2,.inv2-payment-breakdown h2{font-size:var(--fs-lg);line-height:var(--lh-tight);font-weight:var(--fw-extrabold);}
.inv2-revenue-head p{max-width:620px;margin-top:6px;color:var(--invoice-text-secondary);font-size:var(--fs-sm);}
.inv2-revenue-head strong{white-space:nowrap;color:var(--invoice-text-primary);font-size:24px;line-height:var(--lh-tight);font-weight:var(--fw-extrabold);}
.inv2-chart-shell{position:relative;min-height:280px;border:1px solid rgba(var(--surface-rgba-base),.08);border-radius:var(--radius-md);padding:12px;background:rgba(var(--surface-rgba-base),.025);}
.inv2-chart-shell canvas{width:100%;height:260px;display:block;}
.inv2-chart-note{color:var(--invoice-text-secondary);font-size:var(--fs-sm);}
.inv2-chart-values{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;}
.inv2-chart-values div{display:grid;gap:3px;padding:9px 10px;border:1px solid rgba(var(--surface-rgba-base),.07);border-radius:var(--radius-sm);background:rgba(var(--surface-rgba-base),.025);}
.inv2-chart-values span{color:var(--invoice-text-muted);font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;}
.inv2-chart-values strong{color:var(--invoice-text-primary);font-size:var(--fs-sm);font-weight:var(--fw-bold);white-space:nowrap;}
.inv2-analytics-side{display:grid;gap:14px;}
.inv2-analytics-side .tx-invoice-payment-card{align-self:start;}
.inv2-payment-breakdown{display:grid;gap:14px;}
.inv2-payment-breakdown dl{display:grid;gap:10px;margin:0;}
.inv2-payment-breakdown div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid rgba(var(--surface-rgba-base),.07);}
.inv2-payment-breakdown div:last-child{border-bottom:0;padding-bottom:0;}
.inv2-payment-breakdown dt{color:var(--invoice-text-secondary);font-size:var(--fs-sm);font-weight:var(--fw-semibold);}
.inv2-payment-breakdown dd{margin:0;color:var(--invoice-text-primary);font-size:var(--fs-sm);font-weight:var(--fw-bold);text-align:right;}
@media(max-width:1120px){
  .inv2-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .inv2-empty-state{grid-template-columns:1fr;}
  .inv2-empty-state__preview{max-width:520px;}
  .inv2-analytics-grid{grid-template-columns:1fr;}
  .inv2-analytics-side{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:900px){
  .inv2-header{display:grid;}
  .inv2-header-actions{justify-content:flex-start;}
  .inv2-analytics-header{display:grid;}
  .inv2-analytics-actions{justify-content:flex-start;}
  .inv2-toolbar-main{grid-template-columns:1fr;}
  .inv2-toolbar-controls{justify-content:space-between;}
  .inv2-filter-row{align-items:flex-start;flex-direction:column;}
  .inv2-chart-values{grid-template-columns:repeat(3,minmax(0,1fr));}
  .inv2-analytics-side{grid-template-columns:1fr;}
}
@media(max-width:760px){
  .inv2-page{display:flex;flex-direction:column;gap:18px;}
  .inv2-toolbar{order:1;}
  .inv2-list{order:2;}
  .inv2-alert{order:4;}
  .inv2-kpi-grid{order:5;}
  .inv2-kpi-grid > .inv2-kpi-card,.inv2-kpi-grid > .inv2-payment-card{width:100%;margin:0;}
  .inv2-header h1{font-size:24px;}
  .inv2-analytics-header h1{font-size:24px;}
  .inv2-year-scope--desktop{display:none;}
  .inv2-year-scope--mobile{display:inline-flex;}
  .inv2-year-scope__prefix{display:inline;}
  .inv2-empty-state{gap:18px;padding:32px 20px;}
  .inv2-empty-state__body{gap:16px;}
  .inv2-empty-state__mark{width:60px;height:60px;}
  .inv2-empty-state__mark svg{width:44px;height:44px;}
  .inv2-empty-state__actions{display:grid;grid-template-columns:1fr;}
  .inv2-empty-state__actions .btn{width:100%;justify-content:center;}
  .inv2-empty-state__preview{display:none;}
  .inv2-conversion-slot{display:none;}
  .inv2-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .inv2-kpi-card--open{order:1;}
  .inv2-kpi-card--overdue{order:2;}
  .inv2-kpi-card--due-soon{order:3;}
  .inv2-kpi-grid .tx-invoice-payment-card{order:4;}
  .inv2-kpi-card--volume{order:5;}
  .inv2-kpi-card--drafts{order:6;}
  .inv2-kpi-card--paid{order:7;}
  .inv2-kpi-card--canceled{order:8;}
  .inv2-kpi-card--mobile-primary{min-height:118px;padding:14px;}
  .inv2-kpi-card--mobile-secondary{min-height:72px;padding:11px 12px;}
  .inv2-kpi-card--mobile-secondary .tx-invoice-kpi-card__top{margin-bottom:6px;}
  .inv2-kpi-card--mobile-secondary .tx-invoice-kpi-card__icon,
  .inv2-kpi-card--mobile-secondary .tx-invoice-kpi-card__helper{display:none;}
  .inv2-kpi-card--mobile-secondary .tx-invoice-kpi-card__value{font-size:18px;}
  .inv2-kpi-card--mobile-secondary .tx-invoice-kpi-card__subvalue{margin-top:3px;font-size:var(--fs-sm);}
  .inv2-kpi-grid .tx-invoice-payment-card{grid-column:1 / -1;}
  .inv2-toolbar{padding:12px;}
  .inv2-toolbar-main{gap:12px;}
  .inv2-search{width:100%;min-height:44px;}
  .inv2-toolbar-controls{display:grid;grid-template-columns:1fr 1fr;width:100%;}
  .inv2-sort{min-width:0;}
  .inv2-toolbar .tx-button,
  .inv2-toolbar .tx-select,
  .inv2-toolbar .tx-filter-chip{min-height:44px;}
  .inv2-filter-row{gap:10px;overflow:hidden;width:100%;}
  .inv2-filter-chips{max-width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .inv2-filter-chips::-webkit-scrollbar{display:none;}
  .inv2-filter-chips .tx-filter-chip{flex:0 0 auto;}
  .inv2-table-wrap{display:none;}
  .inv2-mobile-list{display:grid;gap:10px;padding:12px;}
  .inv2-revenue-card{grid-template-columns:1fr;}
  .inv2-chart-shell{display:none;}
  .inv2-chart-values{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:520px){
  .inv2-kpi-grid{grid-template-columns:1fr;}
  .inv2-toolbar-controls{grid-template-columns:1fr;}
  .inv2-mobile-card__top{grid-template-columns:minmax(0,1fr) auto;}
  .inv2-mobile-card__due{align-items:flex-start;flex-direction:column;gap:4px;}
  .inv2-revenue-head{display:grid;}
  .inv2-revenue-head strong{white-space:normal;font-size:22px;}
  .inv2-revenue-card{gap:14px;}
  .inv2-chart-values{grid-template-columns:1fr;}
}
@media(max-width:340px){
  .inv2-mobile-card__top{grid-template-columns:1fr;}
  .inv2-mobile-card .tx-amount-cell{justify-items:start;text-align:left;}
}

/* ── Invoice Modal ── */
.inv-modal .mb{padding:16px 20px 20px;}
.inv-form-row{position:relative;margin-bottom:14px;}
.inv-form-row label{display:block;font-size:11px;color:var(--text3);margin-bottom:4px;text-transform:uppercase;letter-spacing:0.3px;}
.inv-form-row input,
.inv-form-row select,
.inv-form-row textarea{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius2);background:var(--bg2);color:var(--text);font-size:13px;font-family:inherit;box-sizing:border-box;}
.inv-form-row input:focus,
.inv-form-row select:focus,
.inv-form-row textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(232,184,75,.15);}
.inv-form-row>.field-error-hint{position:static;display:block;margin-top:6px;white-space:normal;}
.inv-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:14px;}
.inv-form-grid--split{grid-template-columns:1fr 1fr;}

/* ── Line items ── */
.inv-items-section{margin-bottom:16px;}
.inv-items-section h3{font-size:14px;font-weight:var(--fw-semibold);color:var(--text);margin:0 0 10px;}
.inv-items-table{width:100%;border-collapse:collapse;font-size:12px;}
.inv-items-table th{text-align:left;padding:6px 6px;font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:0.3px;border-bottom:1px solid var(--border);white-space:nowrap;}
.inv-items-table td{padding:4px 4px;vertical-align:middle;}
.inv-inp{width:100%;padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius2);background:var(--bg2);color:var(--text);font-size:12px;font-family:inherit;box-sizing:border-box;}
.inv-inp:focus{outline:none;border-color:var(--accent);}
.inv-inp-sm{max-width:100%;}
.inv-line-total{white-space:nowrap;font-family:var(--mono);font-size:12px;text-align:right;color:var(--text2);}
.inv-rm-item{font-size:16px;color:var(--text3);cursor:pointer;border:none;background:none;padding:2px 6px;border-radius:var(--radius2);}
.inv-rm-item:hover{color:var(--red);background:var(--red2);}

/* ── Totals ── */
.inv-totals{margin-bottom:16px;padding:12px 16px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);}
.inv-totals-table{width:100%;border-collapse:collapse;font-size:13px;}
.inv-totals-table td{padding:4px 0;}
/* A11y FM7-b: Label-Zellen sind jetzt <th scope="row"> (vorher <td>). th muss
   die gleiche Optik wie die Label-td behalten: gleiches Padding, linksbündig,
   font-weight:inherit (damit das <strong> in der Brutto-Zeile weiter greift,
   der Rest aber nicht UA-bold/-zentriert wird). Die zeilen-spezifischen
   Regeln unten erfassen th gleichwertig zur Wert-td, sonst säße z.B. der
   border-top/padding-top der Brutto-Zeile nur unter der Wertespalte. */
.inv-totals-table th{padding:4px 0;font-weight:inherit;text-align:left;}
.inv-totals-table td.r{text-align:right;font-family:var(--mono);}
.inv-total-gross td,.inv-total-gross th{font-size:15px;padding-top:8px;border-top:1px solid var(--border);}
.inv-total-discount td,.inv-total-discount th{padding-top:8px;color:var(--text2);}
.inv-total-discount-payable td,.inv-total-discount-payable th{padding-top:6px;color:var(--accent);}
.inv-ku-disclaimer{font-size:11px;color:var(--text3);padding-top:8px;font-style:italic;}

/* ── Modal actions ── */
.inv-modal-actions{display:flex;gap:10px;justify-content:flex-end;padding-top:12px;border-top:1px solid var(--border);}

/* ── Payment info ── */
.inv-pay-modal{max-width:450px;}
.inv-payment-context{display:grid;gap:4px;padding:12px 16px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;}
.inv-payment-context__number{font-family:var(--font-mono);font-size:12px;font-weight:var(--fw-bold);letter-spacing:0;color:var(--text3);}
.inv-payment-context__customer{font-size:15px;font-weight:var(--fw-extrabold);line-height:1.25;color:var(--text);}
.inv-pay-info{padding:12px 16px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:16px;font-size:13px;line-height:1.8;}
.inv-pay-history{margin-top:10px;}
.inv-pay-history__title{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;margin-bottom:6px;}
.inv-pay-history__row{display:flex;align-items:center;gap:8px;justify-content:space-between;border-top:1px solid var(--border);padding:7px 0;}
.inv-pay-history__meta{color:var(--text3);}
.inv-pay-paid-note{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;margin:12px 0;font-size:12.5px;color:var(--text2);}

/* ── PDF Preview ── */
.inv-pdf-modal .mb{padding:0;}
.inv-pdf-modal{
  width:min(900px,calc(100vw - 24px));
  max-height:min(92vh,1100px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.inv-pdf-head{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:14px;
  padding:18px 20px 14px;
}
.inv-pdf-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.inv-pdf-title-group h2{margin:0;}
.inv-pdf-actions{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  flex-wrap:wrap;
}
.inv-pdf-btn{
  min-height:44px;
  padding:0 16px!important;
  border-radius:14px!important;
  white-space:nowrap;
}
.inv-pdf-btn--primary{min-width:220px;}
.inv-pdf-close{
  flex:0 0 40px;
}
.inv-pdf-body{
  position:relative;
  flex:1;
  min-height:0;
  background:var(--bg2);
  overflow:auto;
}
.inv-pdf-canvas{
  min-height:100%;
  padding:22px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.inv-pdf-body .inv3-preview-frame-stage{
  position:relative;
  flex:0 0 auto;
  width:794px;
  height:1123px;
}
.inv-pdf-iframe{
  width:100%;
  height:min(72vh,940px);
  border:none;
  background:white;
  border-radius:0 0 var(--radius) var(--radius);
  display:block;
}
.inv-pdf-body .inv-pdf-iframe{
  position:absolute;
  top:0;
  left:0;
  width:794px;
  height:1123px;
  min-height:0;
  border-radius:20px;
  box-shadow:0 24px 54px rgba(3,8,20,.38);
}
.inv-pdf-print-frame{
  position:fixed;
  left:0;
  top:0;
  width:100vw;
  height:100vh;
  border:0;
  opacity:.01;
  pointer-events:none;
  z-index:-1;
}

/* ── Mobile ── */
@media(max-width:640px){
  .inv-form-grid{grid-template-columns:1fr;}
  .inv-header h1{font-size:18px;}
  .inv-table{font-size:12px;}
  .inv-items-table{font-size:11px;}
  .inv-modal-actions{flex-direction:column;}
  .inv-modal-actions .btn{width:100%;}
  .inv-pdf-modal{
    width:calc(100vw - 12px);
    max-height:calc(100vh - 12px);
    max-height:calc(100dvh - 12px);
  }
  .inv-pdf-head{padding:16px 16px 12px;}
  .inv-pdf-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }
  .inv-pdf-btn{
    width:100%;
    min-height:48px;
    justify-content:center;
  }
  .inv-pdf-btn--primary{min-width:0;}
  .inv-pdf-body{height:calc(100vh - 220px);height:calc(100dvh - 220px);}
  .inv-pdf-canvas{
    min-height:100%;
    padding:12px 0 18px;
    align-items:center;
  }
  .inv-pdf-body .inv-pdf-iframe{
    border-radius:10px;
    box-shadow:0 12px 30px rgba(3,8,20,.18);
  }
}
@media(max-width:430px){
  .inv-pdf-head{padding:14px 14px 10px;}
  .inv-pdf-btn{font-size:13px;padding:0 14px!important;}
  .inv-pdf-body{height:calc(100vh - 206px);height:calc(100dvh - 206px);}
}
/* ── Narrow mobile (≤600px): collapse invoice table for readability ── */
/* Hides the 4th column (Netto when non-KU, Brutto when KU) to fit the table
   on narrow screens. The Brutto column remains the primary amount shown. */
@media(max-width:600px){
  .inv-table th:nth-child(4),
  .inv-table td:nth-child(4){display:none;}
  .inv-table th,.inv-table td{padding:6px 4px;font-size:12px;}
}

/* ── Phase B.2b (2026-05-11): Mobile-Portrait-Vorschau ── */
/* Auf engen portrait-orientierten Viewports (Smartphone) wird das A4-Iframe
   nicht mehr ausgeblendet, sondern über fitPreviewFrame() fit-to-width auf die
   Gerätebreite skaliert (100% responsive) — identisch zum Desktop/Landscape,
   nur kleiner. Die früher dort gezeigte Summary-Card bleibt nur noch als
   stiller DOM-Fallback (siehe Media-Query unten). Hintergrund: die mobile
   Server-PDF-Canvas-Vorschau ist für Entwürfe gesperrt (DRAFT_PDF_NOT_ALLOWED).
   Siehe docs/ux/invoices-prelaunch-acceptance.md §8.
   Farben aus dem invoice-Token-System (Stylelint-konform, kein Hex-Fallback). */
.inv3-mobile-summary{display:none;}
.inv3-pdf-canvas-stage{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:10px 0 12px;
  max-width:100%;
}
.inv3-pdf-canvas-stage[hidden]{display:none;}
.inv3-pdf-canvas-status{
  min-height:18px;
  font-size:12px;
  font-weight:var(--fw-semibold);
  color:var(--invoice-text-muted);
  text-align:center;
}
.inv3-pdf-canvas-status[data-tone="success"]{color:var(--green);}
.inv3-pdf-canvas-status[data-tone="error"]{color:var(--red);}
.inv3-pdf-canvas{
  display:block;
  max-width:100%;
  height:auto;
  border:0;
  border-radius:24px;
  background:var(--invoice-surface);
  box-shadow:0 24px 54px rgba(var(--surface-rgba-base),.22);
}
.inv3-pdf-canvas[hidden]{display:none;}
.inv3-preview-frame[hidden]{display:none!important;}
#inv-html-preview-stage.is-html-preview-error{
  width:100%!important;
  height:auto!important;
  min-height:240px;
  display:flex!important;
  align-items:flex-start;
  justify-content:center;
  padding:32px 16px;
}
.inv3-preview-modal.is-html-preview-error .inv3-preview-modal-body{
  background:rgba(8,12,24,.92);
}
.inv3-preview-modal.is-html-preview-error .inv3-form-preview-wrap{
  height:auto;
  min-height:0;
}
.inv3-html-preview-error{
  width:min(100%,420px);
  margin:auto;
  padding:24px 22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
  background:var(--card2);
  border:1px solid rgba(var(--surface-rgba-base),.10);
  border-radius:var(--radius-lg);
  box-shadow:0 16px 36px rgba(var(--surface-rgba-base),.12);
}
.inv3-html-preview-error[hidden]{display:none;}
.inv3-html-preview-error strong{font-size:16px;color:var(--text);font-weight:var(--fw-extrabold,800);}
.inv3-html-preview-error p{margin:0;font-size:13px;color:var(--text2);line-height:1.5;}
.inv3-html-preview-error button{margin-top:6px;}
.inv3-pdf-canvas-error{
  width:100%;
  max-width:760px;
  background:var(--invoice-surface);
  border:1px solid var(--invoice-border);
  border-radius:var(--radius-lg);
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.inv3-pdf-canvas-error[hidden]{display:none;}
.inv3-pdf-canvas-error strong{font-size:13px;}
.inv3-pdf-canvas-error p{margin:0;font-size:12px;color:var(--invoice-text-muted);line-height:1.5;}
@media(max-width:600px) and (orientation:portrait){
  /* Mobile-Portrait zeigt jetzt die responsive HTML-Vorschau: das A4-Iframe
     bleibt sichtbar und wird über fitPreviewFrame() fit-to-width auf die
     Gerätebreite skaliert (100% responsive). Die früher erzwungene Server-
     PDF-Canvas ist für Entwürfe deaktiviert (DRAFT_PDF_NOT_ALLOWED), daher
     entfällt der Summary-Card-Ersatz; die Card bleibt nur als stiller
     Fallback im DOM. Siehe docs/ux/invoices-prelaunch-acceptance.md §8. */
  .inv3-form-preview-wrap .inv3-preview-frame-stage{display:block;margin:0 auto;}
  .inv3-mobile-summary{display:none;}
  .inv3-mobile-summary-card{
    background:var(--invoice-surface);
    border:1px solid var(--invoice-border);
    border-radius:var(--radius-lg);
    width:100%;
    max-width:none;
    padding:14px 16px;
    box-shadow:0 1px 2px rgba(var(--surface-rgba-base),.04);
  }
  .inv3-mobile-summary-title{
    margin:0 0 10px;
    font-size:var(--fs-xs);
    font-weight:var(--fw-bold);
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--invoice-text-muted);
  }
  .inv3-mobile-summary-list{margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:6px;}
  .inv3-mobile-summary-row{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:12px;
    padding:6px 0;
    border-bottom:1px dashed rgba(var(--surface-rgba-base),.08);
  }
  .inv3-mobile-summary-row:last-child{border-bottom:none;}
  .inv3-mobile-summary-row dt{
    margin:0;
    font-size:var(--fs-xs);
    color:var(--invoice-text-muted);
    font-weight:var(--fw-semibold);
    flex:0 0 auto;
  }
  .inv3-mobile-summary-row dd{
    margin:0;
    font-size:var(--fs-sm);
    font-weight:var(--fw-bold);
    color:var(--invoice-text-primary);
    text-align:right;
    word-break:break-word;
  }
  .inv3-mobile-summary-hint{
    margin:12px 0 0;
    font-size:var(--fs-xs);
    color:var(--invoice-text-muted);
    text-align:center;
    line-height:1.4;
  }
  .inv3-form-preview-pdf{
    width:100%;
    min-height:44px;
    font-size:var(--fs-base);
  }
  .inv3-form-preview-pdf-image{
    width:100%;
    min-height:44px;
    font-size:var(--fs-base);
  }
  .inv3-preview-modal.is-html-preview-error[open]{align-items:flex-start;}
  dialog.inv3-preview-modal.is-html-preview-error [class~="inv3-preview-modal-panel"]{
    height:auto;
    min-height:0;
    border-radius:0 0 18px 18px;
  }
  .inv3-preview-modal.is-html-preview-error .inv3-form-preview-wrap{
    padding:28px 16px 34px;
  }
}

/* Touch-Target-Floor (WCAG 2.5.5 / Apple HIG) auf coarse Pointern — app-weiter
   WebKit-Sweep (iPhone 13, ergänzend zu #3721): tx-tabs__item 91×34,
   inv2-year-scope 156×40 (Höhe je <44). min-height hebt die Hit-Area;
   align-items:center zentriert, kompakte Breite/Optik bleibt. */
@media (pointer: coarse) {
  .tx-tabs__item { min-height: 44px; }
  .inv2-year-scope { min-height: 44px; }
}

/* ── CSP inline-style cleanup: invoice list + legacy form helpers ── */
.inv-access-banner{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:10px 14px;
  margin-bottom:12px;
  font-size:12.5px;
  color:var(--text2);
  display:flex;
  align-items:center;
  gap:8px;
}
.inv3-collection-fill{width:0;}
.inv-totals--bare{border:none;padding:0;background:none;}
.inv-totals--spaced{margin-top:12px;}
.inv-contact-main{flex:1;min-width:0;}
.inv-form-row--tight{margin-bottom:0;}
.inv-modal--wide{max-width:780px;}
.inv-modal-body--scroll{max-height:75vh;overflow-y:auto;}
.inv-inline-hint{font-size:11px;color:var(--text3);margin-top:4px;}
.inv-items-table__col--description{width:42%;}
.inv-items-table__col--qty{width:10%;}
.inv-items-table__col--unit{width:12%;}
.inv-items-table__col--unit-price{width:15%;}
.inv-items-table__col--tax{width:12%;}
.inv-items-table__col--total{width:11%;}
.inv-items-table__col--actions{width:8%;}
.inv3-doc-number-hint.is-warning{color:var(--invoice-warning);}

/* ── Rechnungsportal — Nutzer-Steuerpanel (Migration 156) ──────────────────
 * Sektion „Kundenportal" in der Rechnungs-Detail-/Editor-Ansicht. Steuert die
 * Portal-Settings am aktiven Dokumentlink. Tokens aus _00-tokens.css. */

/* Eingebettet im Detail-Sheet (nach den nativen Sektionen angehängt): klare
 * Trennlinie oben + Abstand, damit sich das Panel vom Status-Verlauf absetzt. */
.inv-portal-panel {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

.inv-portal-heading {
  margin: 0 0 var(--space-md);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text);
}

.inv-portal-body {
  color: var(--text2);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

.inv-portal-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0 0 var(--space-md);
}

.inv-portal-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  /* Die Zeile ist ein <label>: ohne Override erben Label + Hint
   * text-transform:uppercase + letter-spacing aus dem globalen
   * label-Element-Selektor (_10-shell.css). Settings-Labels und
   * Beschreibungssätze bleiben in normaler Schreibweise — Muster wie
   * .import-file-label (_50-import-belege-export.css). */
  text-transform: none;
  letter-spacing: normal;
}

.inv-portal-row-label {
  color: var(--text);
  font-size: var(--fs-base);
}

.inv-portal-row-hint {
  display: inline-block;
  margin-top: var(--space-xs);
  color: var(--text3);
  font-size: var(--fs-sm);
  /* Hint erbt sonst semibold aus dem globalen label-Element-Selektor. */
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
}

.inv-portal-toggle {
  flex: 0 0 auto;
  margin-top: 2px;
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

.inv-portal-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.inv-portal-stat {
  margin: 0 0 var(--space-md);
  color: var(--text3);
  font-size: var(--fs-sm);
}

/* Sicherheitshinweis: öffentliche Portallinks sind ohne Login einsehbar.
 * Dezente Notice-Box (Token-konform), kein Status-Chip — sie informiert
 * dauerhaft, statt einen Zustand zu signalisieren. */
.inv-portal-notice {
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--card2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  color: var(--text2);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}

.inv-portal-save {
  margin-top: var(--space-xs);
}

/* ════════════════════════════════════════════════════════════════════
   NL-Composer „Position per Satz erstellen" (2026-06-05)
   ────────────────────────────────────────────────────────────────────
   Ausgelagert aus _31-invoices.css (LOC-Limit). Lädt nach _31 und nach
   _98-voice-invoice (deshalb `.inv-nl-composer .inv-voice-mic`-Scope, der
   die globale Mic-Geometrie überschreibt). Tokens only, Dark+Light.

   Hochwertiger AI-Composer statt Formularzeile. Gold NUR als Akzent
   (Spark-Icon, Fokus-Ring), keine leuchtende Fläche. Nicht lauter als die
   Positionskarte; „Entwurf erstellen" primär im Composer, aber nicht
   stärker als „Position hinzufügen".
   ════════════════════════════════════════════════════════════════════ */
.inv-nl-composer{
  margin-bottom:var(--space-md);
  /* Kompakt: weniger vertikales Padding → ruhiger, weniger dominant als die
     Positionssektion. Gold nur als zarter Akzent oben. */
  padding:12px 16px 11px;
  background:
    linear-gradient(180deg, rgba(var(--ic-accent-rgb),.04), rgba(var(--ic-accent-rgb),0) 55%),
    var(--invoice-surface);
  border:1px solid var(--invoice-border);
  border-radius:14px;
  box-shadow:none;
}
body.light .inv-nl-composer{
  background:
    linear-gradient(180deg, rgba(var(--ic-accent-rgb),.06), rgba(var(--ic-accent-rgb),0) 60%),
    var(--invoice-surface-elevated);
}
.inv-nl-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:2px;
}
.inv-nl-spark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:8px;
  color:var(--accent);
  background:rgba(var(--ic-accent-rgb),.12);
  flex:0 0 auto;
}
.inv-nl-label{
  font-size:var(--fs-base);
  font-weight:var(--fw-bold);
  color:var(--invoice-text-primary);
  margin:0;
}
.inv-nl-sub{
  margin:0 0 10px 34px;
  font-size:var(--fs-sm);
  color:var(--invoice-text-secondary);
  line-height:1.4;
}
.inv-nl-controls{
  display:flex;
  gap:10px;
  align-items:center;
}
.inv-nl-text{
  flex:1;
  min-width:0;
  height:46px;
  padding:0 14px;
  border-radius:11px;
  font-size:var(--fs-base);
}
.inv-nl-text:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--ic-accent-rgb),.16);
  outline:none;
}
/* Mic-Button: runde, hochwertige Icon-Fläche, dezenter Gold-Hover/-Focus.
   NICHT wie die Hauptaktion. Scope `.inv-nl-composer .inv-voice-mic` (0,2,0)
   schlägt die globale `.inv-voice-mic` aus _98 (0,1,0), das nach _31 lädt. */
.inv-nl-composer .inv-voice-mic,
.inv-nl-mic{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  min-width:46px;
  padding:0;
  border-radius:50%;
  border:1px solid var(--invoice-border);
  background:var(--invoice-surface-elevated);
  color:var(--invoice-text-secondary);
  cursor:pointer;
  flex-shrink:0;
  transition:background var(--tr-fast),border-color var(--tr-fast),color var(--tr-fast),box-shadow var(--tr-fast);
}
.inv-nl-composer .inv-voice-mic:hover,
.inv-nl-mic:hover{
  border-color:rgba(var(--ic-accent-rgb),.45);
  color:var(--accent);
  background:rgba(var(--ic-accent-rgb),.08);
}
.inv-nl-composer .inv-voice-mic:focus-visible,
.inv-nl-mic:focus-visible{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--ic-accent-rgb),.3);
}
/* Recording-State (rot) NICHT überschreiben — das ist eine bewusste globale
   Statusfarbe aus _98; nur Geometrie/Default-Optik wird hier angepasst. */
/* Primärer Composer-Button: Gold-Akzent, klar primär IM Composer, aber etwas
   ruhiger als der große „Position hinzufügen"-CTA (kein Glow, kein --accent-Fill;
   Token-konformer Gold-Tint-Button). */
.inv-nl-btn{
  flex:0 0 auto;
  height:46px;
  padding:0 18px;
  border-radius:11px;
  border:1px solid var(--accent2);
  background:rgba(var(--ic-accent-rgb),.16);
  color:var(--accent);
  font-weight:var(--fw-semibold);
  white-space:nowrap;
  transition:background var(--tr-fast),border-color var(--tr-fast),color var(--tr-fast);
}
body.light .inv-nl-btn{
  background:rgba(var(--ic-accent-rgb),.14);
  color:var(--accent2);
}
.inv-nl-btn:hover{
  background:rgba(var(--ic-accent-rgb),.24);
  border-color:var(--accent);
}
.inv-nl-btn:active{transform:translateY(1px);}
.inv-nl-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(var(--ic-accent-rgb),.3);
}
.inv-nl-btn:disabled,
.inv-nl-btn.is-loading{
  opacity:.7;
  cursor:default;
}
/* Loading: feste Mindestbreite → kein Layout-Sprung beim Text-Wechsel. */
.inv-nl-btn{min-width:148px;}
.inv-nl-btn.is-loading{min-width:148px;}

/* Empty-State-Beispielchips: klein, dezent, lebendig — verschwinden bei Text. */
.inv-nl-examples{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:10px;
}
.inv-nl-examples.is-hidden{display:none;}
.inv-nl-chip{
  display:inline-flex;
  align-items:center;
  height:30px;
  padding:0 12px;
  border-radius:var(--radius-pill,999px);
  border:1px solid var(--invoice-border);
  background:rgba(var(--surface-rgba-base),.04);
  color:var(--invoice-text-secondary);
  font-size:12.5px;
  cursor:pointer;
  transition:border-color var(--tr-fast),background var(--tr-fast),color var(--tr-fast);
}
body.light .inv-nl-chip{
  background:rgba(var(--text-rgba-base),.03);
}
.inv-nl-chip:hover{
  border-color:rgba(var(--ic-accent-rgb),.4);
  color:var(--accent);
  background:rgba(var(--ic-accent-rgb),.07);
}
.inv-nl-chip:focus-visible{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(var(--ic-accent-rgb),.3);
}
/* Ruhiger Inline-Fehler unter dem Composer (kein Alert-Kasten). */
.inv-nl-error{
  margin:10px 0 0;
  font-size:var(--fs-sm);
  color:var(--invoice-danger);
  line-height:1.45;
}
.inv-nl-hint{
  margin:7px 0 0;
  font-size:var(--fs-xs);
  color:var(--invoice-text-muted);
  line-height:1.35;
}
@media (max-width:560px){
  .inv-nl-controls{flex-wrap:wrap;}
  .inv-nl-text{flex:1 1 100%;}
}
@media (prefers-reduced-motion:reduce){
  .inv-nl-composer,
  .inv-nl-btn,
  .inv-nl-mic,
  .inv-nl-chip,
  .inv-nl-text{transition:none;}
}

/* Ausblenden-Button (×) im Composer-Header + Wieder-einblenden-Link.
   Präferenz wird per localStorage dauerhaft gespeichert (nl-invoice-input.js).
   Farben/Radien ausschließlich über Tokens (kein Hex, stylelint color-no-hex). */
.inv-nl-dismiss{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  padding:0;
  border:0;
  border-radius:var(--radius-pill);
  background:transparent;
  color:var(--invoice-text-muted);
  font-size:18px;
  line-height:1;
  cursor:pointer;
  transition:background var(--tr-fast),color var(--tr-fast);
}
.inv-nl-dismiss:hover{
  background:rgba(var(--text-rgba-base),0.06);
  color:var(--invoice-text-primary);
}
.inv-nl-dismiss:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.inv-nl-reveal-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0 0 10px;
  padding:4px 0;
  border:0;
  background:transparent;
  color:var(--invoice-text-secondary);
  font-size:var(--fs-sm);
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px;
}
.inv-nl-reveal-link:hover{color:var(--invoice-text-primary);}
.inv-nl-reveal-link:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--radius-pill);
}
@media (prefers-reduced-motion:reduce){
  .inv-nl-dismiss{transition:none;}
}

/* ══════════════════════════════════════════════════════════════
   Shared Receivables Surfaces
   Gemeinsame Layout-/Card-/Panel-Sprache fuer Offene Posten und
   Erinnerungen. Nutzt bestehende Tokens und laesst route-spezifische
   Daten-/Aktion-Logik unberuehrt.
   ══════════════════════════════════════════════════════════════ */

.receivables-page{
  display:flex;
  flex-direction:column;
  gap:30px;
  min-width:0;
}

.receivables-header{
  gap:18px;
}

.receivables-header .app-page-header__body,
.receivables-header .app-page-actions,
.receivables-actions{
  min-width:0;
}

.receivables-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;
}

/* Header-Actions sind echte Buttons — Anchor-Buttons duerfen nie wie
   unterstrichene Links wirken (Forderungs-Uebersicht). */
.receivables-actions .btn,
.receivables-actions a.btn:hover,
.receivables-actions a.btn:focus{
  text-decoration:none;
}

.receivables-summary-grid{
  display:grid;
  gap:14px;
  min-width:0;
}

.receivables-summary-grid--four{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.receivables-summary-grid--five{
  grid-template-columns:repeat(5,minmax(0,1fr));
}

/* Gemeinsame KPI-/Summary-Card. Offene Posten und Erinnerungen teilen
   sich jetzt exakt diese Card-Geometrie (Padding, Radius, Min-Height,
   Flow), damit beide Forderungsseiten dieselbe mobile wie Desktop-
   Darstellung haben statt zwei separat gewachsener Layouts. */
.receivables-summary-card{
  --receivables-tone-fg:var(--text3);
  --receivables-tone-border:var(--border);
  min-width:0;
  min-height:118px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:12px;
  padding:20px 20px 18px;
  border:1px solid var(--receivables-tone-border);
  border-radius:var(--radius-lg);
  background:var(--card);
  box-shadow:var(--shadow-sm);
  transition:border-color .15s,box-shadow .15s;
}

.receivables-summary-card:hover{
  border-color:var(--border2);
  box-shadow:0 14px 28px rgba(0,0,0,.12);
}

.receivables-summary-card--info{
  --receivables-tone-fg:var(--tone-info-fg);
}

.receivables-summary-card--warn{
  --receivables-tone-fg:var(--tone-warn-fg);
}

.receivables-summary-card--good{
  --receivables-tone-fg:var(--tone-good-fg);
}

.receivables-summary-card--poor{
  --receivables-tone-fg:var(--tone-poor-fg);
}

.receivables-summary-card--neutral{
  --receivables-tone-fg:var(--text3);
}

.receivables-summary-card--money{
  --receivables-tone-fg:var(--accent);
  --receivables-tone-border:rgba(var(--accent-rgba-base),.24);
}

.receivables-summary-card__label{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  color:var(--text3);
  font-size:11px;
  font-weight:var(--fw-semibold);
  letter-spacing:.1em;
  text-transform:uppercase;
}

.receivables-summary-card__label::before{
  content:"";
  width:8px;
  height:8px;
  flex:0 0 8px;
  border-radius:999px;
  background:var(--receivables-tone-fg);
  box-shadow:0 0 0 3px rgba(var(--surface-rgba-base),.04);
}

.receivables-summary-card__value{
  display:block;
  min-width:0;
  color:var(--text);
  font-size:24px;
  line-height:1.1;
  font-weight:var(--fw-extrabold);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
  overflow-wrap:anywhere;
}

.receivables-summary-card__meta{
  display:block;
  min-width:0;
  color:var(--text2);
  font-size:12px;
  line-height:1.45;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}

.receivables-panel{
  min-width:0;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--card);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

.receivables-panel__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  min-width:0;
  padding:22px 24px 16px;
}

.receivables-panel__heading{
  display:grid;
  gap:6px;
  min-width:0;
}

.receivables-panel__heading h2{
  margin:0;
  color:var(--text);
  font-size:19px;
  line-height:1.2;
  font-weight:var(--fw-bold);
}

.receivables-panel__heading p{
  margin:0;
  color:var(--text2);
  font-size:13px;
  line-height:1.5;
}

.receivables-panel__meta{
  color:var(--text3);
  font-size:12px;
  line-height:1.4;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.receivables-panel__body{
  min-width:0;
  padding:0 24px 24px;
}

.receivables-table-wrap{
  min-width:0;
  overflow:hidden;
  border-top:1px solid rgba(var(--surface-rgba-base),.08);
}

.receivables-table{
  width:100%;
  min-width:0;
  table-layout:auto;
  border-collapse:collapse;
}

.receivables-table th,
.receivables-table td{
  min-width:0;
  padding:18px 16px;
  border-bottom:1px solid rgba(var(--surface-rgba-base),.08);
  text-align:left;
  vertical-align:middle;
}

.receivables-table th{
  color:var(--text3);
  font-size:10px;
  font-weight:var(--fw-semibold);
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1.4;
  background:transparent;
}

.receivables-table tbody tr{
  transition:background var(--tr-fast);
}

.receivables-table tbody tr:hover{
  background:rgba(var(--surface-rgba-base),.035);
}

.receivables-table tbody tr:last-child td{
  border-bottom:0;
}

.receivables-table .num{
  text-align:right;
}

.receivables-row-title{
  display:grid;
  gap:6px;
  min-width:0;
}

.receivables-row-title strong,
.receivables-row-title button,
.receivables-row-title a{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.receivables-row-customer{
  display:block;
  color:var(--text);
  font-size:14px;
  line-height:1.38;
  font-weight:var(--fw-bold);
  overflow-wrap:anywhere;
}

.receivables-row-email{
  display:block;
  min-width:0;
  color:var(--text2);
  font-size:12px;
  line-height:1.45;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.receivables-row-sub{
  color:var(--text2);
  font-size:12.5px;
  line-height:1.45;
  overflow-wrap:anywhere;
}

.receivables-meta-stack{
  display:grid;
  gap:4px;
  min-width:0;
}

.receivables-meta-stack strong{
  color:var(--text);
  font-size:13px;
  line-height:1.35;
  font-weight:var(--fw-semibold);
}

.receivables-meta-stack span,
.receivables-meta-stack small{
  color:var(--text3);
  font-size:11.5px;
  line-height:1.4;
}

.receivables-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:rgba(var(--surface-rgba-base),.03);
  color:var(--text2);
  font-size:11px;
  font-weight:var(--fw-semibold);
  line-height:1.2;
}

.receivables-mobile-list{
  display:none;
}

.receivables-mobile-card{
  min-width:0;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card);
  padding:16px;
  display:grid;
  gap:12px;
}

.receivables-mobile-card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  min-width:0;
}

.receivables-mobile-card__title{
  display:grid;
  gap:4px;
  min-width:0;
}

.receivables-mobile-card__title strong{
  display:block;
  color:var(--text);
  font-size:14px;
  line-height:1.35;
  font-weight:var(--fw-bold);
  overflow-wrap:anywhere;
}

.receivables-mobile-card__title span,
.receivables-mobile-card__subtitle{
  color:var(--text2);
  font-size:12px;
  line-height:1.45;
  overflow-wrap:anywhere;
}

.receivables-mobile-card__amount{
  flex:0 0 auto;
  text-align:right;
  color:var(--text);
  font-size:17px;
  line-height:1.2;
  font-weight:var(--fw-bold);
  font-variant-numeric:tabular-nums;
}

.receivables-mobile-card__meta{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  min-width:0;
}

.receivables-mobile-card__meta-item{
  display:grid;
  gap:2px;
  min-width:0;
}

.receivables-mobile-card__meta-item strong{
  color:var(--text);
  font-size:11px;
  line-height:1.35;
  font-weight:var(--fw-semibold);
}

.receivables-mobile-card__meta-item span{
  color:var(--text3);
  font-size:11px;
  line-height:1.4;
  overflow-wrap:anywhere;
}

.receivables-mobile-card__badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  min-width:0;
}

.receivables-mobile-card__actions{
  min-width:0;
}

.receivables-mobile-card__actions .dn-row-actions,
.receivables-mobile-card__actions .op-mobile-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  min-width:0;
}

.receivables-mobile-card__actions .btn{
  flex:1 1 170px;
  min-height:44px;
}

.receivables-mobile-card__actions .dn-row-menu,
.receivables-mobile-card__actions .op-mobile-actions .btn:last-child{
  flex:0 0 auto;
}

body.light .receivables-summary-card,
body.light .receivables-panel{
  box-shadow:0 12px 28px rgba(15,23,42,.06);
}

@media(max-width:1099px){
  .receivables-summary-grid--four{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .receivables-summary-grid--five{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:899px){
  .receivables-summary-grid--five{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:759px){
  .receivables-page,
  .dn-view{
    gap:22px;
  }

  .receivables-header{
    flex-direction:column;
    align-items:stretch;
  }

  .receivables-actions{
    width:100%;
    justify-content:flex-start;
  }

  .receivables-actions .btn{
    flex:1 1 160px;
    min-height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .receivables-panel__head{
    align-items:flex-start;
    flex-direction:column;
    padding:16px 16px 14px;
  }

  .receivables-panel__meta{
    white-space:normal;
  }

  .receivables-panel__body{
    padding:0 16px 16px;
  }

  /* Summary-Zone darf den ersten Screen nicht dominieren: kompaktes
     2-Spalten-Raster statt grosse Vollbreiten-Kacheln. */
  .receivables-summary-grid{
    gap:11px;
  }

  .receivables-summary-grid--four,
  .receivables-summary-grid--five{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .receivables-summary-card{
    padding:14px;
    gap:10px;
  }

  .receivables-summary-card__value{
    font-size:20px;
  }

  .receivables-summary-card__meta{
    font-size:11.5px;
  }
}

@media(max-width:340px){
  .receivables-summary-grid--four,
  .receivables-summary-grid--five,
  .receivables-mobile-card__meta{
    grid-template-columns:1fr;
  }

  .receivables-mobile-card__top{
    flex-direction:column;
    align-items:flex-start;
  }

  .receivables-mobile-card__amount{
    text-align:left;
  }
}

/* ══════════════════════════════════════════════════════════════
   Receivables / Offene Posten
   Gemeinsame Forderungen-Sprache auf Basis der shared receivables
   surfaces. Fokus: scannbare Desktop-Listen ohne Top-Strokes und
   echte Mobile-Cards ohne Seiten-Overflow.
   ══════════════════════════════════════════════════════════════ */

.op-view{
  max-width:var(--app-page-max-width-wide,1220px);
  margin:0 auto;
  padding:var(--app-page-pad-top,20px) var(--app-page-pad-x,16px) var(--app-page-pad-bottom,80px);
}

.op-head{padding:2px 0;}
.op-sub{max-width:62ch;}
.op-actions{gap:10px;}
.op-actions .btn{text-decoration:none;}

/* Card-Geometrie (Padding, Min-Height, Flow, Hover, Typo) lebt jetzt
   zentral in .receivables-summary-card (_35a-receivables-shared.css),
   damit Offene Posten und Erinnerungen exakt dieselbe KPI-Darstellung
   nutzen. Hier bleibt nur der Grid-Abstand als namespaced Hook. */
.op-kpis{gap:14px;}

.op-section{
  display:flex;
  flex-direction:column;
  gap:0;
}

/* Kein padding:0-Override mehr — der gemeinsame .receivables-panel__head
   liefert den internen Headerbereich (Titel klebt sonst am Panelrand). */
.op-section-title{display:flex;flex-direction:column;gap:4px;min-width:0;}
.op-section-head h2{margin:0;font-size:18px;line-height:1.2;font-weight:var(--fw-bold);}
.op-section-sub{color:var(--text2);font-size:12px;line-height:1.45;}

.op-bucket-tabs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(124px,1fr));
  gap:10px;
}

.op-bucket-tab{
  min-width:0;
  min-height:78px;
  display:grid;
  align-content:center;
  gap:5px;
  padding:12px 14px;
  border:1px solid rgba(var(--surface-rgba-base),.08);
  border-radius:14px;
  background:transparent;
  color:var(--text);
  text-align:left;
  cursor:pointer;
  transition:border-color .15s,background .15s,box-shadow .15s;
}

.op-bucket-tab:hover{
  background:rgba(var(--surface-rgba-base),.035);
  border-color:var(--border2);
}

.op-bucket-tab.is-active{
  background:rgba(var(--accent-rgba-base),.06);
  border-color:rgba(var(--accent-rgba-base),.26);
  box-shadow:0 6px 14px rgba(0,0,0,.08);
}

.op-bucket-tab:focus-visible{
  outline:2px solid rgba(var(--accent-rgba-base),.55);
  outline-offset:2px;
}

.op-bucket-tab span{
  color:var(--text3);
  font-size:10px;
  font-weight:var(--fw-semibold);
  letter-spacing:.1em;
  text-transform:uppercase;
}

.op-bucket-tab strong{
  color:var(--text);
  font-size:15px;
  line-height:1.15;
  font-weight:var(--fw-bold);
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}

.op-bucket-tab em{
  color:var(--text3);
  font-style:normal;
  font-size:11px;
  line-height:1.35;
  font-variant-numeric:normal;
}

.op-bucket-tab--critical{border-color:var(--tone-poor-border);}
.op-bucket-tab--critical strong{color:var(--tone-poor-fg);}
.op-bucket-tab--poor{border-color:var(--tone-poor-border);}
.op-bucket-tab--poor strong{color:var(--tone-poor-fg);}
.op-bucket-tab--orange{border-color:var(--tone-warn-border);}
.op-bucket-tab--orange strong{color:var(--tone-warn-text);}
.op-bucket-tab--warn{border-color:var(--tone-warn-border);}
.op-bucket-tab--warn strong{color:var(--tone-warn-text);}
.op-bucket-tab--neutral{border-color:rgba(var(--surface-rgba-base),.08);}

.op-bucket-tab.is-empty:not(.is-active){
  opacity:.55;
  background:transparent;
  border-color:rgba(var(--surface-rgba-base),.06);
}

.op-bucket-tab.is-empty:not(.is-active) strong{
  color:var(--text3);
  font-weight:var(--fw-semibold);
}

.op-bucket-tab.is-empty:not(.is-active):hover{
  opacity:.78;
  border-color:var(--border);
  background:rgba(var(--surface-rgba-base),.03);
}

.op-table-wrap{min-width:0;overflow:hidden;}

.op-table{
  width:100%;
  min-width:0;
  table-layout:auto;
  border-collapse:collapse;
}

.op-table th,.op-table td{
  padding:15px 16px;
  color:var(--text2);
  font-size:14px;
  text-align:left;
  vertical-align:middle;
}

.op-table th{
  background:transparent;
  position:static;
  color:var(--text3);
  font-size:10px;
  font-weight:var(--fw-semibold);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.op-table .num{
  text-align:right;
  color:var(--text);
  font-weight:var(--fw-semibold);
}

.op-amount{
  font-variant-numeric:tabular-nums;
  font-weight:var(--fw-bold);
  letter-spacing:-.005em;
}

.op-cell-customer{min-width:0;}

.op-customer-name{
  display:inline-block;
  max-width:100%;
  color:var(--text);
  font-weight:var(--fw-bold);
  font-size:14px;
  letter-spacing:0;
  overflow-wrap:anywhere;
  white-space:normal;
  vertical-align:middle;
}

.op-cell-date{
  color:var(--text2);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  font-size:12.5px;
}

.op-cell-count,.op-th-count{width:1%;white-space:nowrap;}
#ctx-op-aging-customers .op-table th:first-child,
#ctx-op-aging-customers .op-table td:first-child{width:54%;}
#ctx-op-aging-customers .op-th-count,
#ctx-op-aging-customers .op-cell-count{width:96px;}
#ctx-op-aging-customers .op-table th:nth-child(3),
#ctx-op-aging-customers .op-table td:nth-child(3){width:180px;}

.op-count-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:30px;
  min-height:22px;
  padding:0 8px;
  border-radius:999px;
  background:rgba(var(--surface-rgba-base),.04);
  border:1px solid rgba(var(--surface-rgba-base),.08);
  color:var(--text2);
  font-size:11px;
  font-weight:var(--fw-semibold);
  font-variant-numeric:tabular-nums;
}

.op-link{
  border:0;
  padding:0;
  background:transparent;
  color:var(--accent);
  font:inherit;
  font-weight:var(--fw-semibold);
  cursor:pointer;
  transition:color .15s;
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}

.op-link:hover{
  color:var(--accent3);
  text-decoration:underline;
  text-underline-offset:2px;
}

.op-row-actions{
  width:160px;
  text-align:right;
}

.op-row-actions .btn{
  min-height:36px;
}

.op-mobile-list{display:none;}
.op-mobile-card .op-count-pill{min-height:24px;}

.op-status-chip{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:rgba(var(--surface-rgba-base),.04);
  color:var(--text2);
  font-size:11px;
  font-weight:var(--fw-semibold);
  line-height:1.2;
  white-space:nowrap;
}

.op-status-chip--good{
  color:var(--tone-good-fg);
  background:var(--tone-good-bg);
  border-color:var(--tone-good-border);
}

.op-status-chip--warn,
.op-status-chip--orange{
  color:var(--tone-warn-text);
  background:var(--tone-warn-bg);
  border-color:var(--tone-warn-border);
}

.op-status-chip--poor,
.op-status-chip--critical{
  color:var(--tone-poor-fg);
  background:var(--tone-poor-bg);
  border-color:var(--tone-poor-border);
}

.op-status-chip--neutral{
  color:var(--text2);
  background:rgba(var(--surface-rgba-base),.04);
  border-color:rgba(var(--surface-rgba-base),.08);
}

.op-badge{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 9px;
  border-radius:999px;
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:rgba(var(--surface-rgba-base),.04);
  color:var(--text2);
  font-size:11px;
  font-weight:var(--fw-semibold);
  line-height:1.2;
  white-space:nowrap;
}

.op-badge-overdue_90_plus,.op-badge-overdue_61_90{
  color:var(--tone-poor-fg);
  background:var(--tone-poor-bg);
  border-color:var(--tone-poor-border);
}

.op-badge-overdue_31_60,.op-badge-overdue_1_30{
  color:var(--tone-warn-text);
  background:var(--tone-warn-bg);
  border-color:var(--tone-warn-border);
}

.op-badge-current{
  color:var(--tone-good-fg);
  background:var(--tone-good-bg);
  border-color:var(--tone-good-border);
}

.op-badge-no_due_date{
  color:var(--tone-info-fg);
  background:var(--tone-info-bg);
  border-color:var(--tone-info-border);
}

.op-banner{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:0 24px 18px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:rgba(var(--surface-rgba-base),.04);
  color:var(--text2);
  font-size:13px;
  line-height:1.45;
}

.op-banner strong{color:var(--text);}
.op-banner-error{border-color:var(--tone-poor-border);background:var(--tone-poor-bg);}
.op-banner-warn{border-color:var(--tone-warn-border);background:var(--tone-warn-bg);color:var(--tone-warn-text);}

.op-empty,.op-inline-empty{
  margin:0 24px 24px;
  padding:22px;
  border:1px dashed rgba(var(--surface-rgba-base),.08);
  border-radius:14px;
  background:rgba(var(--surface-rgba-base),.03);
  color:var(--text2);
}

.op-empty h2{
  margin:0 0 6px;
  color:var(--text);
  font-size:17px;
  font-weight:var(--fw-bold);
}

.op-empty p{margin:0 0 14px;}

.op-skeleton-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.op-skeleton-grid div,.op-skeleton-table{
  min-height:108px;
  border-radius:14px;
  background:linear-gradient(90deg,var(--card),var(--bg2),var(--card));
  background-size:220% 100%;
  animation:op-skeleton 1.3s ease-in-out infinite;
}

.op-skeleton-table{min-height:280px;}
body.role-viewer .nav-group-item[data-v="offene-posten"]{display:none;}

@keyframes op-skeleton{
  0%{background-position:100% 0;}
  100%{background-position:-100% 0;}
}

body.light .op-bucket-tab{background:var(--bg3);}
body.light .op-bucket-tab:hover{background:var(--card);}
body.light .op-bucket-tab.is-active{background:rgba(var(--accent-rgba-base),.1);}
body.light .op-count-pill,
body.light .op-status-chip--neutral,
body.light .op-badge,
body.light .op-badge-no_due_date{background:var(--bg3);}

@media(max-width:1099px){
  .op-bucket-tabs{grid-template-columns:repeat(3,minmax(0,1fr));}
}

@media(max-width:759px){
  .op-actions .btn{flex:1 1 160px;min-height:40px;}

  /* Summary-Kacheln kompakt statt grosse gestapelte Bloecke. */
  .op-kpi{
    min-height:96px;
    padding:14px;
    gap:8px;
  }
  .op-kpi-value{font-size:20px;}

  /* Buckets sind auf Mobile leiser als die Summary-Kacheln. */
  .op-bucket-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .op-bucket-tab{min-height:62px;padding:10px 12px;}
  .op-bucket-tab strong{font-size:14px;}
  .op-table-wrap{display:none;}
  .op-mobile-list{
    display:grid;
    gap:12px;
    padding:0 16px 16px;
  }
  .op-banner,.op-empty,.op-inline-empty{margin-left:16px;margin-right:16px;}
  .op-skeleton-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media(max-width:340px){
  .op-bucket-tabs,
  .op-skeleton-grid{
    grid-template-columns:1fr;
  }
}

/* Erinnerungen V1 — DESIGN.md aligned (PR-B1 2026-05-08).
   Naming: "Mahnwesen" → "Erinnerungen" (Modul wurde umbenannt; CSS-Klassen
   behalten den dn-Praefix als interne Konvention, damit kein massiver
   Umbenennungs-Sweep noetig ist). Pattern aligned mit invoices-v2 +
   DESIGN.md §Status-Chips. */
.dn-view{display:flex;flex-direction:column;gap:30px;}
/* PR-C2 (2026-05-09): .dn-notice entfernt — die "jahresuebergreifend"-Notice
   war redundant (Workspace ist ohnehin jahresuebergreifend). Klasse bleibt
   nirgends mehr referenziert; die geteilten Box-Token sind jetzt nur an
   .dn-banner gepinnt. */
.dn-banner{
  border:1px solid var(--invoice-border);
  border-radius:8px;
  background:var(--invoice-surface);
  color:var(--invoice-text-secondary);
  padding:12px 14px;
  font-size:14px;
  line-height:1.45;
}
.dn-banner{display:flex;align-items:center;gap:12px;justify-content:space-between;}
.dn-banner--error{border-color:var(--invoice-danger-border);background:var(--invoice-danger-bg);color:var(--invoice-text-primary);}

/* KPI-Grid teilt sich Card-Geometrie + Grid-Logik mit Offene Posten via
   .receivables-summary-grid/.receivables-summary-card
   (_35a-receivables-shared.css). Dunning-namespaced Hooks bleiben nur
   fuer den Grid-Abstand und die primary-Akzent-Border des Geld-KPI. */
.dn-kpi-grid{gap:14px;display:grid;}
.dn-kpi-card.dn-kpi-card--primary{
  border-color:rgba(var(--accent-rgba-base),.24);
}

/* Section-Frames + Tables (unveraendert gegenueber V1). */
.dn-section,.dn-empty{
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--card);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
/* padding:0 entfernt — gemeinsamer .receivables-panel__head liefert den
   internen Headerbereich; sonst klebt "Fälle"/"Einstellungen" am Rand. */
.dn-section-head{
  gap:16px;
  border-bottom:0;
}
.dn-section-head h2{margin:0;font-size:18px;line-height:1.2;}
.dn-section-head span{color:var(--invoice-text-secondary);font-size:12px;}
.dn-table-wrap{overflow:hidden;}
.dn-table{width:100%;border-collapse:collapse;min-width:0;table-layout:auto;}
.dn-table th,.dn-table td{padding:18px 16px;border-bottom:1px solid rgba(var(--surface-rgba-base),.08);text-align:left;vertical-align:middle;}
.dn-table th{color:var(--text3);font-size:10px;text-transform:uppercase;letter-spacing:.08em;}
.dn-table td small{display:block;color:var(--invoice-text-secondary);margin-top:3px;}
.dn-table .num{text-align:right;font-variant-numeric:tabular-nums;}
.dn-link{border:0;background:transparent;color:var(--invoice-accent);font:inherit;font-weight:750;cursor:pointer;padding:0;}
.dn-sort-btn{border:0;background:transparent;color:inherit;font:inherit;font-weight:700;text-transform:inherit;letter-spacing:inherit;cursor:pointer;padding:0;}
.dn-sort-btn.is-active{color:var(--invoice-text-primary);}
/* Spaltenprioritaet: Rechnung+Kunde+E-Mail ist die wichtigste, flexible
   Spalte. Status/Aktion bewusst schmaler, damit die erste Spalte nicht
   gequetscht wird (req 4). */
.dn-col-main{width:auto;}
.dn-col-overdue{width:150px;}
.dn-col-level{width:210px;}
.dn-col-status{width:190px;}
.dn-col-amount{width:132px;}
.dn-col-actions{width:188px;}

.dn-case-identity{
  display:grid;
  gap:6px;
  min-width:0;
}

.dn-row-invoice-link{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  font-size:12px;
  letter-spacing:.02em;
}

.dn-case-status{
  display:grid;
  gap:6px;
  min-width:0;
}

.dn-case-status__detail{
  color:var(--invoice-text-secondary);
  font-size:11.5px;
  line-height:1.4;
  overflow-wrap:anywhere;
}

.dn-cell-amount{
  color:var(--text);
  font-size:14px;
  font-weight:var(--fw-bold);
  letter-spacing:-.01em;
  white-space:nowrap;
}
.dn-stage-pill{white-space:nowrap;}

/* Status-Chips — aligned mit DESIGN.md §Status-Chips Pattern (kompakte
   Ll-chip-aehnliche Pills, dunning-namespaced). Loest die alten
   dn-pill-Klassen ab. */
.dn-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
  min-height:24px;
  line-height:1.2;
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:rgba(var(--surface-rgba-base),.04);
  color:var(--invoice-text-secondary);
}
.dn-chip--ready{
  color:var(--invoice-success);
  background:var(--invoice-success-bg);
  border-color:var(--invoice-success-border);
}
.dn-chip--blocked{
  color:var(--invoice-danger);
  background:var(--invoice-danger-bg);
  border-color:var(--invoice-danger-border);
}
.dn-chip--paused{
  color:var(--invoice-info);
  background:var(--invoice-info-bg);
  border-color:var(--invoice-info-border);
}
.dn-chip--info{
  color:var(--invoice-text-primary);
  background:var(--invoice-surface-elevated);
  border-color:var(--invoice-border);
}
.dn-chip--neutral{
  color:var(--invoice-text-secondary);
  background:rgba(var(--surface-rgba-base),.04);
  border-color:rgba(var(--surface-rgba-base),.08);
}

.dn-card-list{display:none;}
.dn-empty{padding:24px;}
.dn-empty h2{margin:0 0 6px;font-size:20px;}
.dn-empty p{margin:0;color:var(--invoice-text-secondary);}
.dn-settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:16px;}
.dn-settings-empty{padding:0 24px 24px;color:var(--invoice-text-secondary);font-size:14px;}
.dn-settings-grid div{border:1px solid var(--invoice-border);border-radius:8px;padding:12px;background:var(--invoice-surface);}
.dn-settings-grid span{display:block;color:var(--invoice-text-secondary);font-size:12px;margin-bottom:5px;}
.dn-settings-grid strong{font-size:14px;}

/* Skeleton — Loading-State mit Shimmer-Animation, ersetzt das alte
   generische dn-skeleton-Block. */
.dn-skeleton-wrap{background:var(--invoice-surface);border:1px solid var(--invoice-border);border-radius:8px;}
.dn-skeleton-row td{padding:12px 16px;border-bottom:1px solid var(--invoice-border);}
.dn-skeleton-bar{
  height:18px;
  background:linear-gradient(90deg,var(--invoice-surface) 0%,var(--invoice-surface-elevated) 50%,var(--invoice-surface) 100%);
  background-size:200% 100%;
  animation:dn-shimmer 1.4s ease-in-out infinite;
  border-radius:4px;
}
@keyframes dn-shimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}

/* Vorschau-Modal — natives <dialog>. ESC + Top-Layer + Focus-Trap kommen
   gratis. Mobile: Bottom-Sheet via Media-Query.
   Bug-Fix 2026-05-09 (PR-C1): native <dialog>.showModal() zentriert nur dann
   wenn margin:auto + width gesetzt sind. Vorher landete das Modal links-oben,
   weil width:min(...) ohne margin:auto im UA-Default keine Zentrierung
   erzeugt. Pattern analog zu .dn-pause-dialog. */
.dn-preview-dialog{
  border:1px solid var(--invoice-border);
  border-radius:12px;
  padding:0;
  background:var(--invoice-surface);
  color:var(--invoice-text-primary);
  width:min(980px, calc(100% - 32px));
  max-width:980px;
  max-height:90vh;
  margin:auto;
  overflow:hidden;
  box-shadow:var(--shadow-lg,0 20px 70px rgba(0,0,0,.35));
}
.dn-preview-dialog::backdrop{background:rgba(5,8,16,.58);}
.dn-preview-form{display:flex;flex-direction:column;max-height:90vh;}
.dn-preview-head,.dn-preview-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px;
  border-bottom:1px solid var(--invoice-border);
}
.dn-preview-actions{border-top:1px solid var(--invoice-border);border-bottom:0;justify-content:flex-end;}
.dn-preview-head h2{margin:3px 0 0;font-size:22px;}
.dn-preview-close{
  width:36px;
  height:36px;
  border-radius:var(--radius-pill);
  border:0;
  background:transparent;
  color:var(--invoice-text-primary);
  font-size:24px;
  cursor:pointer;
}
.dn-preview-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:16px;
  padding:16px;
  overflow:auto;
}
.dn-preview-grid h3{margin:0 0 12px;font-size:18px;}
.dn-preview-body{
  border:1px solid var(--invoice-border);
  border-radius:8px;
  background:var(--invoice-surface-elevated);
  padding:16px;
  line-height:1.55;
}
.dn-preview-grid aside{
  border:1px solid var(--invoice-border);
  border-radius:8px;
  padding:14px;
  background:var(--invoice-surface-elevated);
}
.dn-preview-grid dl{margin:0;display:grid;gap:8px;}
.dn-preview-grid dt{color:var(--invoice-text-secondary);font-size:12px;}
.dn-preview-grid dd{margin:0 0 8px;font-weight:600;}
.dn-preview-grid h4{margin:14px 0 8px;}
.dn-preview-grid ul{margin:0;padding-left:18px;color:var(--invoice-text-secondary);}

/* Role-viewer hides write-actions. Klassen folgen dem neuen Naming
   (erinnerungen) UND dem alten (mahnwesen, falls noch im DOM via
   nav-config nachhaengt — defensive). */
body.role-viewer .nav-group-item[data-v="erinnerungen"],
body.role-viewer .shell-nav-item[data-v="erinnerungen"],
body.role-viewer .op-row-actions .btn,
body.role-viewer .dn-row-actions .btn-p{display:none!important;}

/* Send-Status-Indikator (kompakter Aktiv-Indikator, ersetzt das alte
   dn-send-status--on/off). Off-State laeuft jetzt ueber UI.alertBanner
   (siehe _dnRenderSendStatusBanner in dunning.js). */
.dn-send-indicator{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  font-size:12px;
  border-radius:999px;
  border:1px solid;
  margin:0;
}
.dn-send-indicator--on{
  background:var(--invoice-success-bg);
  border-color:var(--invoice-success-border);
  color:var(--invoice-success);
}
.dn-head-status{
  display:flex;
  align-items:center;
  margin-top:6px;
}
.dn-notice-stack{
  display:grid;
  gap:12px;
}
.dn-send-indicator__dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
}

/* Empty-State-Banner — alle laufen ueber UI.alertBanner, Wrapper-Klasse
   .dn-alert nur fuer Margin-Tuning unter dem Notice-Stack. */
.dn-alert{margin:0;}

@media(max-width:760px){
  .dn-kpi-card{min-height:100px;}
  /* 5 KPIs im 2-Spalten-Raster; der Geld-KPI (Offener Betrag) darf
     volle Breite einnehmen statt als einzelne Halbkachel zu haengen. */
  .dn-kpi-grid .dn-kpi-card--primary{grid-column:1/-1;}

  /* Einstellungen bleiben Sekundaerinhalt: ruhigere Flaeche und kleinere
     Ueberschrift, damit die Faelle der Hauptarbeitsbereich bleiben. */
  #ctx-dunning-settings{
    box-shadow:none;
    margin-top:4px;
  }
  #ctx-dunning-settings .receivables-panel__heading h2{font-size:16px;}

  .dn-table-wrap:not(.dn-skeleton-wrap){display:none;}
  .dn-card-list{display:grid;gap:14px;padding:0 16px 16px;}
  .dn-head-status{margin-top:4px;}
  .dn-settings-tabs{margin:0 16px;}
  .dn-settings-tabpanel{padding:18px 16px 16px;}
  .dn-case-card{
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--card);
    padding:16px;
    display:grid;
    gap:14px;
  }
  .dn-case-card__top,
  .dn-case-card__footer{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
  }
  .dn-case-card__invoice{
    color:var(--text);
    font-size:14px;
    line-height:1.35;
    font-weight:var(--fw-bold);
    overflow-wrap:anywhere;
  }
  .dn-case-card__contact{display:grid;gap:4px;min-width:0;}
  .dn-case-card__customer{color:var(--text);font-size:13px;line-height:1.4;font-weight:var(--fw-semibold);overflow-wrap:anywhere;}
  .dn-case-card__email{color:var(--invoice-text-secondary);font-size:12px;line-height:1.45;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .dn-case-card__meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .dn-case-card__meta-item{display:grid;gap:2px;min-width:0;}
  .dn-case-card__meta-item strong{font-size:11px;line-height:1.35;}
  .dn-case-card__meta-item span{color:var(--invoice-text-secondary);font-size:11px;line-height:1.4;overflow-wrap:anywhere;}
  .dn-case-card__footer{flex-direction:column;align-items:stretch;gap:14px;}
  .dn-case-card__badges{display:grid;gap:8px;min-width:0;}
  .dn-settings-grid{grid-template-columns:1fr;}

  /* Mobile-Bottom-Sheet fuer den Vorschau-Dialog. margin override negiert
     desktop margin:auto und pinnt das Sheet an den unteren Rand. */
  .dn-preview-dialog{
    width:100%;
    max-width:100%;
    max-height:88vh;
    border-radius:14px 14px 0 0;
    margin:auto 0 0;
    inset:auto 0 0 0;
  }
  .dn-preview-grid{grid-template-columns:1fr;}

  /* Touch-Targets: 44px Mindesthoehe fuer Aktion-Buttons in Listen. */
  .dn-row-actions .btn-sm{min-height:44px;}
}

@media(max-width:340px){
  .dn-case-card__meta{grid-template-columns:1fr;}
}

/* PR-B2 (2026-05-08): Pause-Modal als <dialog>. Layout-Sprache:
   Padding 20-24px, Border-Radius 12px, dezenter Top-Accent. Spalten-Felder
   mit klarem Label-oben/Input-unten Stack.
   PR-D Fix (Live-Smoke 2026-05-09, Finding D1): margin:auto fehlte —
   <dialog>.showModal() landete daher links-oben statt zentriert. Pattern
   identisch zu .dn-preview-dialog (siehe oben). Mobile-Override unten
   in @media(max-width:600px) negiert margin:auto bewusst (Bottom-Sheet). */
.dn-pause-dialog{
  width:min(540px, calc(100% - 32px));
  max-width:540px;
  margin:auto;
  border-radius:12px;
  border:1px solid var(--invoice-border);
  background:var(--invoice-surface);
  padding:0;
  color:var(--invoice-text-primary);
}
.dn-pause-dialog::backdrop{background:rgba(0,0,0,0.42);}
.dn-pause-form{display:grid;gap:12px;padding:20px 22px 22px;}
.dn-pause-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.dn-pause-head h2{margin:2px 0 0;font-size:18px;font-weight:700;}
.dn-pause-close{
  border:0;background:transparent;font-size:22px;line-height:1;
  cursor:pointer;color:var(--invoice-text-secondary);padding:4px 8px;
}
.dn-pause-close:hover{color:var(--invoice-text-primary);}
.dn-pause-desc{color:var(--invoice-text-secondary);margin:0;font-size:13.5px;line-height:1.45;}
.dn-pause-context{
  background:var(--invoice-surface-elevated);
  border:1px solid var(--invoice-border);
  border-radius:8px;padding:10px 12px;font-size:13px;
  color:var(--invoice-text-secondary);
}
.dn-pause-context strong{color:var(--invoice-text-primary);}
.dn-pause-field{display:grid;gap:6px;}
.dn-pause-field>span{font-size:12px;font-weight:600;color:var(--invoice-text-secondary);}
.dn-pause-field input,
.dn-pause-field select,
.dn-pause-field textarea{
  font:inherit;padding:8px 10px;border-radius:8px;
  border:1px solid var(--invoice-border);background:var(--invoice-surface);
  color:var(--invoice-text-primary);
}
.dn-pause-field small{color:var(--invoice-text-secondary);font-size:12px;}
.dn-pause-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px;}
.dn-required{color:var(--invoice-danger);font-style:normal;}
.dn-optional{color:var(--invoice-text-secondary);font-style:normal;font-weight:400;}

/* PR-B2: Sub-Akkordeon (Settings — Versand/Vorlagen/Stufen/Allgemein) */
.dn-settings{display:grid;gap:10px;}
.dn-sub-accordion{
  border:1px solid var(--invoice-border);
  border-radius:10px;
  background:var(--invoice-surface);
  overflow:hidden;
}
.dn-sub-accordion__head{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  background:transparent;border:0;padding:14px 18px;font:inherit;
  cursor:pointer;color:var(--invoice-text-primary);font-weight:650;font-size:14.5px;
}
.dn-sub-accordion__head:hover{background:var(--invoice-surface-elevated);}
.dn-sub-accordion.is-open .dn-sub-accordion__head{
  border-bottom:1px solid var(--invoice-border);
}
.dn-sub-accordion__chevron{color:var(--invoice-text-secondary);}
.dn-sub-accordion__body{padding:16px 18px;display:grid;gap:14px;}

/* PR-B2: Templates-Editor pro Stufe */
.dn-template-block{
  border:1px solid var(--invoice-border);
  border-radius:10px;padding:14px 16px;background:var(--invoice-surface-elevated);
  display:grid;gap:10px;
}
.dn-template-block__head h4{margin:0;font-size:14px;font-weight:700;}
.dn-template-active{color:var(--invoice-success);font-size:12px;font-weight:600;margin-left:6px;}
.dn-template-inactive{color:var(--invoice-text-secondary);font-size:12px;font-weight:600;margin-left:6px;}
.dn-template-grid{display:grid;grid-template-columns:1fr 220px;gap:14px;}
.dn-template-fields{display:grid;gap:10px;}
.dn-var-helper{
  border-left:1px solid var(--invoice-border);padding-left:14px;
  display:flex;flex-direction:column;gap:6px;
}
.dn-var-helper h5{margin:0 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:0.04em;color:var(--invoice-text-secondary);}
.dn-var-pill{
  display:inline-block;align-self:flex-start;
  padding:3px 8px;font-size:11.5px;border-radius:999px;
  border:1px solid var(--invoice-border);background:var(--invoice-surface);
  color:var(--invoice-text-primary);cursor:pointer;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.dn-var-pill:hover{background:var(--invoice-surface-elevated);}
.dn-var-help{font-size:12px;color:var(--invoice-text-secondary);margin:4px 0 0;}
.dn-preview-pane{
  border:1px dashed var(--invoice-border);border-radius:8px;
  padding:12px 14px;background:var(--invoice-surface);
}
.dn-preview-pane h6{margin:0 0 8px;font-size:11.5px;color:var(--invoice-text-secondary);text-transform:uppercase;letter-spacing:0.04em;}
.dn-preview-subject{font-weight:650;margin-bottom:6px;}
.dn-preview-body{color:var(--invoice-text-primary);font-size:13px;line-height:1.5;}
.dn-preview-body p{margin:0 0 8px;}
.dn-template-actions{display:flex;gap:8px;justify-content:flex-end;}
.dn-stufen-list{display:grid;gap:8px;}
.dn-stufen-row{
  display:grid;grid-template-columns:1.2fr 1fr auto;gap:10px;align-items:center;
  padding:10px 12px;border:1px solid var(--invoice-border);border-radius:8px;
  background:var(--invoice-surface);
}

/* PR-C1 (2026-05-09): Settings-Edit-Forms (Versand/Allgemein/Stufen).
   Layout-Sprache analog zu .dn-pause-field/.dn-pause-form, damit der
   Visual-Style ueber alle Forms konsistent ist.
   PR-C2 Codex-P2 (2026-05-09): Settings-Forms verwenden jetzt eine eigene
   Wrapper-Klasse `.dn-form-field` (statt `.dn-pause-field`-Reuse). Grund:
   `.dn-pause-field input` (Specificity 11) hat die in PR-C2 migrierten
   `.tx-input`-DESIGN.md-Styles (Specificity 10) blockiert. Mit der neuen
   Klasse erbt jeder `<input class="tx-input">` in Settings sauber den
   DESIGN.md-Stil; das Pause-Modal behaelt seine `.dn-pause-field`-Styles
   intakt. */
.dn-form{display:grid;gap:14px;padding:4px 0 0;}
.dn-form .dn-form-field{display:grid;gap:6px;}
.dn-form .dn-form-field>span{font-size:12px;font-weight:600;color:var(--invoice-text-secondary);}
.dn-form .dn-form-field small{color:var(--invoice-text-secondary);font-size:12px;}
.dn-form-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:4px;}
.dn-form-hint{margin:0;font-size:12.5px;color:var(--invoice-text-secondary);}
.dn-form-hint--warning{color:var(--invoice-warning);}

/* PR-C3 (2026-05-09, Finding 3): Uppercase-Discipline. User-Beschwerde:
   "Allgemein ist alles in Großbuchstaben". `text-transform:uppercase` darf nur
   für Eyebrows / Section-Header / Table-Header gelten — niemals für Form-
   Labels, Helper-Texte oder Body-Inputs. Wir setzen `none` defensiv auf alle
   Form-Surfaces im Dunning-Modul, damit kein zukünftiges broad-CSS-Refactor
   (z.B. Token-Sweep an `.tx-input`/`.tx-form-hint`) versehentlich die
   Form-Texte hochstellt. Erlaubt zu UPPERCASE bleiben: `.app-page-eyebrow`,
   `.dn-table th`, `.dn-var-helper h5`, `.dn-preview-pane h6` (siehe
   DESIGN.md → Voice & Tone → Uppercase-Discipline). */
.dn-form,
.dn-form .dn-form-field,
.dn-form .dn-form-field > span,
.dn-form .dn-form-field small,
.dn-form .tx-form-hint,
.dn-form-toggle-hint,
.dn-form-checkbox__label,
.dn-form-checkbox-hint,
.dn-form-effective,
.dn-form-effective strong,
.dn-form-effective p{
  text-transform:none;
  letter-spacing:normal;
}
/* PR-C2 (2026-05-09, Finding 2 + 3): Effective-State-Banner ist jetzt ein
   block-level Element (kein <strong> mehr). Bündig mit den Form-Fields
   darunter — width:100% + box-sizing:border-box. Layout-Versatz behoben.
   Bei masterOff enthaelt der Banner die volle Erklaerung mit <code>-Inlines. */
.dn-form-effective{
  display:block;
  width:100%;
  box-sizing:border-box;
  margin:0 0 4px 0;
  padding:12px 14px;
  border-radius:8px;
  border:1px solid var(--invoice-border);
  background:var(--invoice-surface-elevated);
  font-size:13px;line-height:1.5;
}
.dn-form-effective strong{display:block;font-size:14px;font-weight:700;}
.dn-form-effective p{margin:6px 0 0;color:var(--invoice-text-secondary);}
.dn-form-effective code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;
  padding:1px 6px;border-radius:4px;
  background:var(--invoice-surface);
  border:1px solid var(--invoice-border);
  color:var(--invoice-text-primary);
}
.dn-form-effective--on{
  color:var(--invoice-success);
  border-color:var(--invoice-success);
  background:var(--invoice-surface-elevated);
}
.dn-form-effective--on strong{color:var(--invoice-success);}
.dn-form-effective--off{
  color:var(--invoice-warning);
  border-color:var(--invoice-warning-border,var(--invoice-border));
  background:var(--invoice-surface-elevated);
}
.dn-form-effective--off strong{color:var(--invoice-warning);}

/* PR-C2 (2026-05-09, Finding 4): Toggle-/Checkbox-Wrapper nutzen DESIGN.md-
   Patterns. .tx-switch (Account-Versand-Aktiv, iOS-Style-Slider) ist global
   in _41-recurrences.css definiert. .tx-cb (Originalrechnung anhaengen,
   Stufen-Aktiv/Skippable) ist global in _10-shell.css definiert. Wir fuegen
   nur die kontextuellen Wrapper-Styles hinzu (Hint-Layout, kein Re-Define
   der Komponente selbst). */
.dn-form-toggle-row{
  display:grid;gap:6px;
  padding:6px 0;
}
.dn-form-toggle-hint{
  color:var(--invoice-text-secondary);
  font-size:12px;line-height:1.45;
}
.dn-form-checkbox{
  display:inline-grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;
  cursor:pointer;user-select:none;
  padding:4px 0;
}
.dn-form-checkbox__label{
  font-size:13px;color:var(--invoice-text-primary);line-height:1.4;
}
.dn-form-checkbox--inline{padding:2px 0;}
.dn-form-checkbox-row{display:grid;gap:6px;padding:6px 0;}
.dn-form-checkbox-hint{
  color:var(--invoice-text-secondary);
  font-size:12px;line-height:1.45;
  padding-left:30px; /* aligned with label-text after the .tx-cb */
}
.dn-stufen-edit-list{display:grid;gap:10px;}
.dn-stufen-edit-row{
  display:grid;gap:10px;
  padding:12px 14px;border:1px solid var(--invoice-border);border-radius:8px;
  background:var(--invoice-surface);
}
.dn-stufen-edit-row__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.dn-stufen-edit-row__head strong{font-size:14px;}

@media (max-width:600px){
  .dn-template-grid{grid-template-columns:1fr;}
  .dn-var-helper{border-left:0;padding-left:0;border-top:1px solid var(--invoice-border);padding-top:10px;}
  .dn-pause-dialog{
    width:100%;max-width:100%;
    border-radius:14px 14px 0 0;margin:auto 0 0;inset:auto 0 0 0;
  }
  /* Unterer Schließen-Button im Erinnerungs-Vorschau-Modal auf Mobile
     ausblenden — das X oben rechts reicht als einzige Schließen-Aktion. */
  .dn-preview-actions .btn-g[data-action="dunningClosePreview"]{display:none;}
  /* Wenn nach dem Ausblenden keine weiteren Aktionen übrig sind, Footer
     komplett kollabieren. */
  .dn-preview-actions:empty{display:none;}
}

/* PR-F (UX-Overhaul 2026-05-11, Sektion 3): Drei-Punkte-Menü.
   Aktion-Trigger ist quadratisch (32×32), das Popover schwebt 4px unter
   dem Trigger. Der Trigger zeigt nur das Kebab-Icon — das macht die
   Action-Spalte rechts kompakt und verhindert die früheren
   inline-Button-Cluster (3+ Buttons nebeneinander).

   Sektion 4: Border-Konsistenz.
   .dn-table td.dn-row-actions-cell mit padding-block:12px statt 14px,
   damit die Buttons optisch auf derselben Höhe wie Betrag/Status sitzen.
   Border-bottom bleibt durchgängig (kein right-cell-Override). */
.dn-row-actions{
  display:flex;align-items:center;justify-content:flex-end;gap:10px;width:100%;
}
.dn-row-actions-cell{
  width:188px;
  padding:14px 16px;
  vertical-align:middle;
  white-space:nowrap;
}
.dn-row-actions .btn-sm{
  min-width:128px;
  justify-content:center;
}
.dn-row-menu{
  position:relative;display:inline-block;
}
.dn-row-menu__trigger{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:0;border:0;border-radius:8px;
  background:transparent;
  color:var(--text3);cursor:pointer;
  transition:background var(--tr-fast),color var(--tr-fast);
}
.dn-row-menu__trigger:hover,
.dn-row-menu.is-open .dn-row-menu__trigger{
  background:rgba(var(--surface-rgba-base),.08);
  color:var(--text);
}
body.light .dn-row-menu__trigger:hover,
body.light .dn-row-menu.is-open .dn-row-menu__trigger{
  background:rgba(15,23,42,.06);
}
.dn-row-menu__trigger:focus-visible{
  outline:2px solid rgba(var(--accent-rgba-base),.55);outline-offset:1px;
}
.dn-row-menu__list{
  position:absolute;top:calc(100% + 4px);right:0;z-index:50;
  width:230px;padding:6px;margin:0;gap:1px;
  list-style:none;
  border:1px solid var(--border);border-radius:10px;
  background:var(--inv3-doc-menu-bg);
  box-shadow:0 16px 40px rgba(0,0,0,.35);
  display:none;
}
body.light .dn-row-menu__list{
  background:var(--card);box-shadow:0 12px 28px rgba(15,23,42,.14);
}
.dn-row-menu.is-open .dn-row-menu__list{display:flex;flex-direction:column;}
/* Desktop flip-up: when a clipping ancestor (e.g. .list-shell{overflow:hidden})
   would cut off a downward dropdown on the lowest rows, Inv3DocumentRowMenuPositioning
   sets data-open-dir="up" and the menu opens above the trigger instead.
   Scoped to ≥761px on purpose: the helper sets data-open-dir on every open
   (incl. mobile), and these [data-open-dir] attribute selectors (specificity
   0,2,0) would otherwise win over the mobile bottom-sheet's plain
   .dn-row-menu__list rule (0,1,0) — media queries do not raise specificity —
   and re-anchor the position:fixed sheet via top/bottom, pushing it off the
   bottom edge. Gating the flip on min-width keeps the mobile sheet untouched. */
@media (min-width:761px){
  .dn-row-menu__list[data-open-dir="up"]{top:auto;bottom:calc(100% + 4px);}
  .dn-row-menu__list[data-open-dir="down"]{top:calc(100% + 4px);bottom:auto;}
}
.dn-row-menu__item{
  display:flex;align-items:center;gap:10px;width:100%;height:34px;
  padding:0 10px;border:0;border-radius:6px;
  background:transparent;color:var(--text);
  font-family:var(--font-sans);font-size:13px;font-weight:var(--fw-medium);
  text-align:left;cursor:pointer;
  transition:background var(--tr-fast),color var(--tr-fast);
}
.dn-row-menu__item:hover{
  background:rgba(var(--surface-rgba-base),.06);
  color:var(--text);
}
body.light .dn-row-menu__item:hover{
  background:rgba(15,23,42,.04);
}
.dn-row-menu__item:focus-visible{
  outline:2px solid rgba(var(--accent-rgba-base),.55);outline-offset:-2px;
}
.dn-row-menu__item[disabled],
.dn-row-menu__item[aria-disabled="true"]{
  color:var(--text3);
  opacity:.6;cursor:not-allowed;
}
.dn-row-menu__item--danger{color:var(--red);}
.dn-row-menu__item--danger:hover{
  background:rgba(248,113,113,.1);color:var(--red);
}
.dn-row-menu__item svg{flex-shrink:0;color:currentColor;}

/* Mobile (Card-List aktiv ab ≤760px): Der Action-Menu-Body wird als echtes
   position:fixed Bottom-Sheet gerendert. Vorher war er position:absolute und
   wurde vom overflow:hidden der .receivables-panel (bzw. .dn-table-wrap)
   geclippt — der Trigger sitzt tief im Karten-Footer, das Dropdown war damit
   unsichtbar ("Menü öffnet nicht"). fixed entkoppelt vom Clipping-Ancestor. */
@media (max-width:760px){
  .dn-row-menu.is-open::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:var(--z-drawer-backdrop);
    background:rgba(0,0,0,.45);
  }
  .dn-row-menu__list{
    position:fixed;
    inset:auto 0 0 0;
    top:auto;
    width:auto;
    min-width:0;
    margin:0;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));
    border-radius:14px 14px 0 0;
    border-bottom:0;
    box-shadow:0 -16px 40px rgba(0,0,0,.4);
    z-index:var(--z-modal);
  }
  .dn-row-menu__item{
    height:48px;
    font-size:15px;
  }
}

/* PR-F Sektion 12: Visuelle Hierarchie — etwas mehr Abstand zwischen den
   Hauptbereichen und ruhigere Sekundärbuttons (kein zusätzlicher Akzent
   außer auf dem Primary). */
.dn-section + .dn-section,
.dn-empty + .dn-section,
.dn-section + .dn-settings,
.dn-settings + .dn-section{margin-top:0;}

/* PR-F Sektion 8: Settings-Tabs.
   Tabs liegen direkt unter dem Section-Head und teilen den Container in
   drei sichtbare Bereiche (Versand / Vorlagen / Regeln). Tab-Body (Panel)
   bekommt 16px Padding und einen sanften Top-Border, damit der Übergang
   vom Tab-Strip ruhig wirkt. */
.dn-settings{display:grid;gap:0;}
.dn-settings-tabs{margin:0 24px;}
.dn-settings-tabpanel{padding:18px 24px 24px;}
.dn-settings-tabpanel + .dn-settings-tabpanel{border-top:1px solid var(--invoice-border);}

/* PR-F Sektion 9: Vorlagen-Karten (Summary + Edit-Mode).
   Im Default-State ist die Karte kompakt (Title + Summary + Edit-Button).
   Beim Aufklappen rendert .dn-template-card__body den vollen Editor (das
   bestehende _dnRenderTemplateBlock-Markup) — keine Re-Implementation,
   nur Wrapping. */
.dn-templates-list{display:grid;gap:10px;}
.dn-template-card{
  border:1px solid var(--invoice-border);border-radius:10px;
  background:var(--invoice-surface);
  overflow:hidden;
}
.dn-template-card__head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 16px;
}
.dn-template-card__copy{display:flex;flex-direction:column;gap:2px;min-width:0;}
.dn-template-card__title{margin:0;font-size:15px;line-height:1.3;color:var(--invoice-text-primary);}
.dn-template-card__summary{margin:0;color:var(--invoice-text-secondary);font-size:13px;line-height:1.4;}
.dn-template-card.is-open{border-color:var(--invoice-accent-soft,var(--invoice-border));}
.dn-template-card__body{
  padding:14px 16px;border-top:1px solid var(--invoice-border);
  background:var(--invoice-surface-elevated);
}
/* Variablenliste rechts: visuell etwas zurückgenommen, Pills bleiben klickbar. */
.dn-template-card__body .dn-var-helper{
  background:transparent;
  border-left-color:var(--invoice-border);
}
.dn-template-card__body .dn-var-helper h5{
  color:var(--invoice-text-secondary);
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
}

/* ====================================================================
   _37-forderungen.css — Forderungszentrale (Merge "Offene Posten" +
   "Erinnerungen"). Markup: public/js/forderungen.js (rdForderungen()).

   Wiederverwendet (NICHT hier definiert):
     .app-page / .app-page-header / .app-page-title / .app-page-description
     / .app-page-actions / .app-page-content        → _12-page-shell.css
     .app-status-chip(+--good/--warn/--poor/--info)  → _60-…-bank.css
     .dn-sort-btn / .dn-row-menu(+__trigger/__list/__item) → _36-dunning.css
     .btn / .btn-p / .btn-g / .btn-sm                → _10-shell.css u.a.

   Neu hier: KPI-Karten (.app-kpi), Risiko-Überblick (.rrs/.crc),
   Arbeitsbereich (.work-region/.work-label), Listen-Shell (.list-shell)
   + Filterstreifen (.fz-filter-strip/.fchip) + Tabelle (.fz-table).
   Werte 1:1 aus dem abgesegneten v5-Mockup; nur bestehende Tokens.
   ==================================================================== */

/* ---- KPI-Karten ------------------------------------------------------ */
.fz-kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.app-kpi{background:var(--invoice-surface,var(--card));border:1px solid var(--invoice-border,var(--border));
  border-radius:var(--radius-lg);padding:18px;min-height:120px;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(0,0,0,.12);}
.app-kpi--poor{background:linear-gradient(180deg,var(--invoice-danger-bg,rgba(239,68,68,.07)),var(--invoice-surface,var(--card)));
  border-color:var(--invoice-danger-border,var(--tone-poor-fg));}
.app-kpi--good{background:linear-gradient(180deg,var(--invoice-success-bg,rgba(34,197,94,.07)),var(--invoice-surface,var(--card)));
  border-color:var(--invoice-success-border,var(--tone-good-fg));}
.app-kpi--warn{background:linear-gradient(180deg,var(--invoice-warning-bg,rgba(234,179,8,.07)),var(--invoice-surface,var(--card)));
  border-color:var(--invoice-warning-border,var(--tone-warn-fg));}
.app-kpi--info{background:linear-gradient(180deg,var(--invoice-info-bg,rgba(59,130,246,.07)),var(--invoice-surface,var(--card)));
  border-color:var(--invoice-info-border,var(--tone-info-fg));}
.app-kpi-label{font-size:var(--fs-sm,13px);font-weight:var(--fw-bold);color:var(--invoice-text-secondary,var(--text2));
  display:flex;align-items:center;gap:6px;margin-bottom:14px;}
.app-kpi-label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--text3);flex:none;}
.app-kpi--poor .app-kpi-label::before{background:var(--tone-poor-fg);}
.app-kpi--good .app-kpi-label::before{background:var(--tone-good-fg);}
.app-kpi--warn .app-kpi-label::before{background:var(--tone-warn-fg);}
.app-kpi--info .app-kpi-label::before{background:var(--tone-info-fg);}
.app-kpi-val{font-size:26px;line-height:var(--lh-tight,1.2);font-weight:var(--fw-extrabold,800);
  letter-spacing:-.01em;color:var(--invoice-text-primary,var(--text));}
.app-kpi-sub{font-size:var(--fs-base,14px);font-weight:var(--fw-semibold);color:var(--invoice-text-primary,var(--text));
  margin-top:8px;}

/* ---- Risiko-Überblick (entlastet) ----------------------------------- */
.rrs{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 22px;}
.rrs-eyebrow{display:flex;align-items:center;gap:8px;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.09em;color:var(--text3);font-weight:var(--fw-semibold);margin-bottom:14px;}
.rrs-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft);flex:none;}
.rrs-eyebrow .spacer{flex:1;}
.rrs-eyebrow .asof{letter-spacing:.02em;text-transform:none;font-size:11.5px;color:var(--text3);font-weight:500;}
.rrs-top{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;}
.rrs-focus{flex:1;min-width:300px;}
.rrs-focus .lead{font-size:13px;color:var(--text2);margin-bottom:8px;font-weight:500;}
.rrs-focus .lead b{color:var(--text);font-weight:var(--fw-semibold);}
.rrs-focus .metric{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;}
.rrs-focus .metric .amount{font-family:var(--font-mono);font-feature-settings:"tnum";
  font-size:30px;font-weight:var(--fw-bold);letter-spacing:-.01em;line-height:1;color:var(--accent);}
.rrs-focus .insightline{margin-top:10px;font-size:12.5px;color:var(--text3);line-height:1.5;max-width:580px;}
.rrs-focus .insightline b{color:var(--text2);font-weight:var(--fw-semibold);}
.rrs-cta{flex:none;}

/* Customer-Risk-Chips */
.rrs-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px;}
.crc{color:var(--text);display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;
  background:var(--card2);border:1px solid rgba(var(--surface-rgba-base),.08);border-radius:var(--radius-md);
  padding:11px 14px;min-height:58px;cursor:pointer;font-family:inherit;width:100%;
  transition:border-color var(--tr-fast),background var(--tr-fast);}
.crc:hover{border-color:var(--border2);background:rgba(var(--surface-rgba-base),.045);}
.crc:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.crc .av{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-weight:var(--fw-bold);font-size:13px;background:rgba(var(--surface-rgba-base),.06);color:var(--text2);flex:none;}
.crc.is-lead .av{background:var(--accent-soft);color:var(--accent);}
.crc .body{min-width:0;}
/* nm + sub sind <span>; explizit block, damit Meta-Zeile UNTER dem Namen sitzt
   (sonst laufen die inline-spans in eine Zeile und Name/Betrag kollidieren). */
.crc .nm{display:block;font-size:13.5px;font-weight:var(--fw-semibold);color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25;}
.crc .sub{display:block;font-size:11px;color:var(--text3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.crc .amt{font-family:var(--font-mono);font-size:15px;font-weight:var(--fw-bold);color:var(--text);text-align:right;flex:none;}
.crc.is-lead .amt{color:var(--accent);}

/* ---- Arbeitsbereich -------------------------------------------------- */
.work-region{margin-top:var(--space-sm);}
.work-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--text3);
  font-weight:var(--fw-semibold);margin:0 0 10px 2px;}

/* ---- Forderungsliste-Shell ------------------------------------------ */
.list-shell{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;}
.list-head{padding:14px 18px 0;}
.list-head__top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px;}
.list-head__top .lt{font-size:14px;font-weight:var(--fw-bold);color:var(--text);}
.list-head__top .lc{font-size:12px;color:var(--text3);margin-left:8px;font-weight:500;}
.filterbar{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--text2);}
.fz-badge-act{display:inline-flex;align-items:center;gap:7px;background:var(--accent-soft);
  border:1px solid rgba(var(--accent-rgba-base),.30);color:var(--text);border-radius:999px;padding:4px 6px 4px 11px;font-size:12px;}
.fz-badge-act button{background:transparent;border:0;color:var(--text2);cursor:pointer;display:flex;
  width:18px;height:18px;align-items:center;justify-content:center;border-radius:50%;font-family:inherit;line-height:1;}
.fz-badge-act button:hover{background:rgba(var(--surface-rgba-base),.10);color:var(--text);}

/* Filter-Chips im Listen-Kopf */
.fz-filter-strip{display:flex;flex-wrap:wrap;gap:7px;padding-bottom:13px;
  border-bottom:1px solid rgba(var(--surface-rgba-base),.07);}
.fchip{font-size:12px;padding:6px 12px;border-radius:999px;border:1px solid rgba(var(--surface-rgba-base),.10);
  color:var(--text2);background:transparent;cursor:pointer;font-family:inherit;font-weight:500;
  display:inline-flex;align-items:center;gap:6px;transition:color var(--tr-fast),border-color var(--tr-fast),background var(--tr-fast);}
.fchip:hover{color:var(--text);border-color:var(--border2);}
.fchip:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.fchip.on{background:var(--accent-soft);border-color:rgba(var(--accent-rgba-base),.30);color:var(--text);font-weight:var(--fw-semibold);}
.fchip .cnt{font-family:var(--font-mono);font-size:11px;color:var(--text3);}
.fchip.on .cnt{color:var(--accent);}

/* ---- Tabelle (.fz-table, basiert auf .dn-table für .dn-sort-btn) ----- */
.fz-table-wrap{overflow-x:auto;}
.fes--forderungen{width:100%;max-width:960px;margin-inline:auto;}
.fz-table{width:100%;border-collapse:collapse;}
.fz-table thead th{text-align:left;color:var(--text3);font-size:10px;font-weight:var(--fw-semibold);
  text-transform:uppercase;letter-spacing:.08em;padding:12px 18px;
  border-bottom:1px solid rgba(var(--surface-rgba-base),.08);vertical-align:middle;white-space:nowrap;}
.fz-table th.num,.fz-table td.num{text-align:right;}
.fz-table tbody td{padding:13px 18px;border-bottom:1px solid rgba(var(--surface-rgba-base),.05);vertical-align:middle;}
.fz-table tbody tr:last-child td{border-bottom:0;}
.fz-table tbody tr:hover{background:rgba(var(--surface-rgba-base),.025);}
.fz-row.is-focus{background:rgba(var(--accent-rgba-base),.05);box-shadow:inset 3px 0 0 0 var(--accent);}
.fz-cell-main b{font-size:13.5px;font-weight:var(--fw-semibold);display:block;color:var(--text);}
.fz-cell-main span{font-size:11.5px;color:var(--text3);margin-top:2px;display:block;}
.fz-due{font-size:12.5px;color:var(--text2);white-space:nowrap;}
.fz-due.over{color:var(--tone-poor-fg);}
.fz-level{font-size:12px;color:var(--text2);}
.fz-amt{font-family:var(--font-mono);font-size:13.5px;font-weight:var(--fw-bold);color:var(--text);}
.fz-act .row-act{display:inline-flex;align-items:center;gap:6px;justify-content:flex-end;}

/* ---- Banner / Empty / Loading --------------------------------------- */
.fz-banner{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:var(--radius-md);
  border:1px solid var(--tone-poor-border);background:var(--tone-poor-bg);color:var(--text);align-items:flex-start;}
.fz-banner .btn{margin-top:4px;}
.fz-loading{padding:40px 18px;text-align:center;color:var(--text3);font-size:13px;}
.fz-empty{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:36px 24px;text-align:center;}
.fz-empty h2{font-size:16px;margin:0 0 6px;color:var(--text);}
.fz-empty p{margin:0 0 14px;color:var(--text2);font-size:13px;}
.fz-inline-empty{padding:28px 18px;text-align:center;color:var(--text3);font-size:13px;}

/* ---- Light-Mode-Feintuning (Container nutzen --card → kein Override
   nötig; nur die rgba(--surface-rgba-base)-Hairlines werden im Light
   etwas zu blass, daher dezent verstärken). -------------------------- */
body.light .crc{border-color:rgba(var(--surface-rgba-base),.12);}
body.light .fz-filter-strip{border-bottom-color:rgba(var(--surface-rgba-base),.12);}
body.light .fz-table tbody td{border-bottom-color:rgba(var(--surface-rgba-base),.08);}

/* ---- Responsive ----------------------------------------------------- */
@media (max-width:1080px){.fz-kpi-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:900px){
  .rrs-top{flex-direction:column;align-items:flex-start;gap:14px;}
  .rrs-cta{width:100%;}.rrs-cta .btn{width:100%;justify-content:center;}
  .rrs-chips{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .fz-kpi-grid{grid-template-columns:repeat(2,1fr);}
  .rrs{padding:var(--space-lg) 16px;}
  .rrs-focus .metric .amount{font-size:27px;}
  .rrs-chips{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding-bottom:4px;}
  .crc{flex:0 0 78%;scroll-snap-align:start;}
  .fz-filter-strip{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .fchip{flex:none;}
  .fz-table thead{display:none;}
  .fz-table tbody td.fz-col-due,.fz-table tbody td.fz-col-level{display:none;}
  .fz-table,.fz-table tbody,.fz-table tr,.fz-table td{display:block;width:100%;}
  .fz-table tbody tr{padding:12px 18px;border-bottom:1px solid rgba(var(--surface-rgba-base),.06);}
  .fz-table tbody td{border:0;padding:3px 0;}
  .fz-act{margin-top:8px;}
  .fz-act .row-act{justify-content:flex-start;}
  .fz-amt{font-size:16px;}
}

/* Forderungszentrale-Merge: Wie zuvor "Offene Posten" (_35) und "Erinnerungen"
   (_36) bleibt der Forderungen-Nav-Eintrag fuer die reine viewer-Rolle
   ausgeblendet; Mahn-/Versand-Zeilenaktionen sind fuer viewer ohnehin gesperrt. */
body.role-viewer .nav-group-item[data-v="forderungen"],
body.role-viewer .shell-nav-item[data-v="forderungen"]{display:none;}
body.role-viewer .fz-act .btn-p{display:none;}

/* ══════════════════════════════════════════════════════════════
   Invoice Form Page (Dedicated Page, not Modal)
   ══════════════════════════════════════════════════════════════ */

/* Header */
.inv-fpage-header{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.inv-back-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--text3);font-size:13px;font-family:inherit;cursor:pointer;padding:4px 8px;border-radius:var(--radius2);transition:color .15s,background .15s;}
.inv-back-btn:hover{color:var(--text);background:var(--bg2);}
.inv-fpage-title{font-size:20px;font-weight:var(--fw-bold);color:var(--text);}

/* Two-panel layout */
.inv-fpage-layout{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start;}
.inv-fpage-left{display:flex;flex-direction:column;gap:16px;}
.inv-fpage-card{padding:20px;}
.inv-fpage-card-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;}
.inv-fpage-card-header .card-title{margin-bottom:0;}
/* 2026-04-29 Iter5-Bug-Fix: Kunde-Header-Layout mit Segmented-Tabs braucht
   noch mehr Atemluft zwischen „Kunde" und den Tabs (Modal-Toggle „Aus
   Kontakten wählen / Neuen Kunden erfassen"). User-Report: „Kunde hängt so
   auf dem Modal." */
.inv3-customer-card--header-segmented .inv-fpage-card-header{gap:24px;flex-wrap:wrap;}
.inv3-customer-card--header-segmented .inv-fpage-card-header .card-title{flex-shrink:0;}

/* Collapsible card */
.inv-fpage-card--collapsible .inv-fpage-card-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;cursor:pointer;font-family:inherit;padding:0;gap:8px;}
.inv-fpage-card-badge--optional{font-size:10px;color:var(--text3);border:1px solid var(--border);border-radius:var(--radius-pill);padding:2px 8px;font-weight:var(--fw-medium);white-space:nowrap;}
.inv-fpage-card-body{padding-top:14px;}

/* Right sidebar — Layout-Refactor 2026-05-06: --page-sticky-top + 16px
   Atemraum (statt magic 72px). v2-Desktop = 16px, v1/v2-Mobile = 80px (= 64+16). */
.inv-fpage-right{position:sticky;top:calc(var(--page-sticky-top) + 16px);}
.inv-fpage-totals-card{margin-bottom:12px;}
.inv-fpage-actions{display:flex;flex-direction:column;gap:8px;}
.inv-fpage-actions .btn{width:100%;justify-content:center;}
.inv-fpage-hint{font-size:11px;color:var(--text3);text-align:center;margin-top:8px;line-height:1.5;}

/* Contact avatar */
.inv-fpage-contact-wrap{display:flex;align-items:flex-start;gap:14px;}
.inv-fpage-contact-avatar{width:44px;height:44px;border-radius:16px;background:rgba(var(--surface-rgba-base),.04);border:1px solid rgba(var(--surface-rgba-base),.08);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:var(--fw-bold);color:rgba(var(--text-rgba-base),.78);flex-shrink:0;margin-top:18px;box-shadow:inset 0 1px 0 rgba(var(--surface-solid-rgba-base,255,255,255),.04);}
.inv3-customer-select-wrap .inv3-customer-avatar:not(.inv3-customer-avatar--visible){display:none!important;}
.inv3-customer-card{overflow:hidden;display:flex;flex-direction:column;}
.inv3-customer-select-main{flex:1;min-width:0;}
.inv3-customer-empty-note{
  margin-bottom:14px;
  padding:16px 18px;
  border-radius:18px;
  border:1px dashed rgba(var(--surface-rgba-base),.14);
  background:rgba(var(--surface-rgba-base),.025);
  color:rgba(var(--text-rgba-base),.62);
  line-height:1.6;
}
.inv3-customer-contact-summary{
  margin-top:0;
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(232,184,75,.16);
  background:linear-gradient(180deg,rgba(232,184,75,.08),rgba(var(--surface-rgba-base),.025));
}
.inv3-customer-contact-avatar{
  display:none;
}
.inv3-customer-contact-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.inv3-customer-contact-copy strong{
  display:block;
  margin-bottom:4px;
  font-size:17px;
  color:var(--text-strong);
}
.inv3-customer-contact-copy p{
  margin:0;
  color:rgba(var(--text-rgba-base),.62);
  line-height:1.6;
}
.inv3-customer-contact-badge{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(232,184,75,.14);
  color:rgba(245,208,122,.94);
  font-size:11px;
  font-weight:var(--fw-semibold);
  white-space:nowrap;
}
.inv3-customer-contact-lines{
  display:grid;
  gap:4px;
  margin-top:12px;
  color:rgba(var(--text-rgba-base),.76);
  line-height:1.55;
}
.inv3-customer-card--summary-compact .inv3-customer-contact-summary{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  min-height:72px;
  padding:14px 16px;
  border-radius:22px;
  border-color:rgba(123,176,255,.12);
  background:rgba(7,15,29,.62);
  box-shadow:inset 0 1px 0 rgba(var(--surface-rgba-base),.035);
}
.inv3-customer-card--summary-compact .inv3-customer-contact-avatar{
  display:flex;
  width:42px;
  height:42px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(232,184,75,.12);
  color:rgba(245,208,122,.96);
  font-size:13px;
  font-weight:var(--fw-heavy);
}
.inv3-customer-card--summary-compact .inv3-customer-contact-top{
  display:contents;
}
.inv3-customer-card--summary-compact .inv3-customer-contact-copy{
  min-width:0;
}
.inv3-customer-card--summary-compact .inv3-customer-contact-copy strong{
  margin:0 0 2px;
  font-size:19px;
  line-height:1.2;
}
.inv3-customer-card--summary-compact .inv3-customer-contact-copy p{
  overflow:hidden;
  color:rgba(var(--text-rgba-base),.56);
  line-height:1.35;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.inv3-customer-card--summary-compact .inv3-customer-contact-badge{
  min-height:30px;
  padding:0 12px;
  border:1px solid rgba(49,218,148,.38);
  background:rgba(49,218,148,.1);
  color:rgba(76,220,158,.94);
  font-size:12px;
}
.inv3-customer-card--summary-compact .inv3-customer-contact-badge::before{
  content:"";
  width:6px;
  height:10px;
  margin-right:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(42deg) translateY(-1px);
}
.inv3-customer-card--summary-compact .inv3-customer-contact-lines{
  display:none;
}
body.light .inv3-customer-card--summary-compact .inv3-customer-contact-summary{
  border-color:rgba(var(--ink-rgba-base),.08);
  background:rgba(var(--surface-solid-rgba-base),.76);
}
body.light .inv3-customer-card--summary-compact .inv3-customer-contact-copy p{
  color:rgba(var(--ink-rgba-base),.56);
}
body.light .inv3-customer-card--summary-compact .inv3-customer-contact-avatar{
  background:rgba(232,184,75,.18);
  color:rgba(124,85,14,.92);
}

/* Manual customer toggle */
.inv-fpage-toggle-manual{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--text3);font-size:12px;font-family:inherit;cursor:pointer;padding:4px 0;transition:color .15s;margin-top:4px;}
.inv-fpage-toggle-manual:hover{color:var(--accent);}
.inv-fpage-manual-fields{padding-top:16px;border-top:1px solid rgba(var(--surface-rgba-base),.08);margin-top:14px;}
/* Bereich 4 (Plan): Customer-Action-Bar — beide Buttons (Anpassen + Bearbeiten)
   als Icon-Pills nebeneinander statt zwei lose Textlinks untereinander.
   Wenn beide hidden sind (state="empty"/"manual-only"), kollabiert der Container
   ohne extra margin (gap-rule). */
.inv3-customer-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.inv3-customer-actions:empty,
.inv3-customer-actions:has(>:not([hidden]):empty){display:none;}
.inv3-customer-actions-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0 12px;
  min-height:36px;
  border-radius:10px;
  border:1px solid rgba(var(--surface-rgba-base),.1);
  background:rgba(var(--surface-rgba-base),.04);
  color:rgba(var(--text-rgba-base),.74);
  font-size:12.5px;
  font-weight:var(--fw-semibold);
  font-family:inherit;
  cursor:pointer;
  transition:border-color var(--tr-fast),background var(--tr-fast),color var(--tr-fast);
  white-space:nowrap;
}
.inv3-customer-actions-btn:hover{
  border-color:rgba(232,184,75,.34);
  background:rgba(232,184,75,.12);
  color:var(--text);
}
.inv3-customer-actions-btn:focus-visible{
  outline:2px solid rgba(232,184,75,.4);
  outline-offset:2px;
}
.inv3-customer-actions-btn[hidden]{display:none;}
/* Edit-Contact bleibt visuell akzentfarben — semantisch „Aktion mit Wirkung". */
.inv3-customer-edit-contact{color:var(--accent);}
.inv3-customer-edit-contact:hover{color:var(--text);}
/* Touch-Target-Override für Mobile: 44×44 (WCAG 2.1 AA). */
@media(max-width:768px){
  .inv3-customer-actions-btn{
    min-height:44px;
    min-width:44px;
  }
}
/* Legacy text-link styling für inv3-customer-toggle wenn ohne actions-btn
   verwendet (Backward-Kompatibilität — sollte aber nicht mehr vorkommen). */
.inv3-customer-toggle:not(.inv3-customer-actions-btn){
  margin-top:12px;
  padding:0;
  font-size:13px;
  font-weight:var(--fw-medium);
  color:rgba(var(--text-rgba-base),.74);
}
.inv3-customer-manual-actions{display:flex;justify-content:flex-start;margin-top:4px;font-size:13px;}
.inv3-customer-suggest{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
  padding:10px;
  border-radius:16px;
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:rgba(var(--surface-rgba-base),.03);
}
.inv3-customer-suggest[hidden]{display:none;}
.inv3-customer-suggest-option{
  appearance:none;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  width:100%;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:rgba(var(--surface-rgba-base),.035);
  color:inherit;
  text-align:left;
  cursor:pointer;
  transition:border-color var(--tr-fast),background var(--tr-fast),transform var(--tr-fast);
}
.inv3-customer-suggest-option:hover,
.inv3-customer-suggest-option:focus-visible{
  border-color:rgba(232,184,75,.24);
  background:rgba(232,184,75,.1);
  transform:translateY(-1px);
  outline:none;
}
.inv3-customer-suggest-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.inv3-customer-suggest-copy strong{
  font-size:13px;
  line-height:1.4;
  color:var(--text-strong);
}
.inv3-customer-suggest-copy span{
  font-size:12px;
  line-height:1.5;
  color:rgba(var(--text-rgba-base),.62);
  word-break:break-word;
}
.inv3-customer-suggest-badge{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 9px;
  border-radius:999px;
  background:rgba(232,184,75,.12);
  color:rgba(245,208,122,.9);
  font-size:10.5px;
  font-weight:var(--fw-semibold);
}
.inv3-customer-save-contact{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid rgba(var(--surface-rgba-base),.12);
  background:rgba(var(--surface-rgba-base),.04);
  color:var(--text-strong);
  font-family:var(--font-sans);
  font-size:13px;
  font-weight:var(--fw-semibold);
  cursor:pointer;
  transition:border-color var(--tr-fast),background var(--tr-fast),transform var(--tr-fast);
}
.inv3-customer-save-contact:hover{
  border-color:rgba(232,184,75,.34);
  background:rgba(232,184,75,.12);
  transform:translateY(-1px);
}
.inv3-customer-card--manual .inv3-customer-contact-summary,
.inv3-customer-card--pick .inv3-customer-contact-summary,
.inv3-customer-card--manual-only .inv3-customer-contact-summary{display:none;}

/* Date input wrapper */
.inv-date-wrap{position:relative;display:flex;align-items:center;}
.inv-date-input{padding-right:34px !important;cursor:text;}
.inv-date-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text3);padding:2px;display:flex;align-items:center;}
.inv-date-btn:hover{color:var(--text);}

/* Leistungszeitraum mode tabs */
/* Period-Mode-Tabs in tx-segmented-Stil (Bereich 3 aus Plan).
   Kompaktes Container-Background-Pattern, max-width gedeckelt damit es
   nicht über die volle Spaltenbreite läuft. Reuses tx-segmented-Token-Vokabular,
   aber behält die existierenden CSS-Klassen-Namen wegen 3-fachen Form-Verwendung. */
.inv-period-mode-tabs{
  display:inline-flex;
  gap:4px;
  margin-bottom:12px;
  padding:3px;
  max-width:320px;
  background:rgba(var(--surface-rgba-base),.06);
  border:1px solid rgba(var(--surface-rgba-base),.12);
  border-radius:12px;
}
.inv-period-tab{
  flex:1;
  padding:6px 14px;
  min-height:34px;
  font-size:13px;
  font-weight:var(--fw-semibold);
  font-family:inherit;
  cursor:pointer;
  background:transparent;
  border:0;
  border-radius:9px;
  color:rgba(var(--text-rgba-base),.72);
  transition:background var(--tr-fast),color var(--tr-fast);
}
.inv-period-tab:hover{color:var(--text-strong);}
.inv-period-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.inv-period-tab--active{
  background:var(--card);
  color:var(--text-strong);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
body.light .inv-period-mode-tabs{
  background:rgba(var(--ink-rgba-base),.05);
  border-color:rgba(var(--ink-rgba-base),.08);
}
body.light .inv-period-tab--active{background:white;color:rgba(var(--ink-rgba-base),.92);}
.inv-period-hint{display:flex;align-items:flex-start;gap:6px;font-size:13px;color:var(--text3);margin-top:8px;}
.inv-period-hint:empty,.inv-period-hint[hidden]{display:none;}
.inv3-period-block{margin-top:8px;}
.inv3-period-helper{margin-top:6px;font-size:13px;line-height:1.5;color:rgba(var(--text-rgba-base),.62);}

/* Mobile bottom bar.
   iOS-Keyboard: --keyboard-offset (von modules/keyboard-viewport-offset.js am
   documentElement gesetzt) hebt die fixe Bar über die eingeblendete Tastatur,
   damit Save/Submit erreichbar bleiben. Fallback 0px → unveränderte Optik, wo
   die Visual-Viewport-API fehlt. */
.inv-fpage-mobile-bar{display:none;position:fixed;bottom:var(--keyboard-offset, 0px);left:0;right:0;background:var(--bg2);border-top:1px solid var(--border);padding:10px 16px;padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));gap:8px;z-index:90;transition:bottom .12s ease-out;}
.inv-fpage-mobile-bar .btn{flex:1;justify-content:center;}

/* Sidebar tabs (Zusammenfassung / Vorschau) */
.inv-fpage-sidebar-tabs{display:flex;gap:4px;margin-bottom:12px;}
.inv-sidebar-tab{flex:1;padding:6px 10px;font-size:12px;cursor:pointer;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius2);color:var(--text3);font-family:inherit;transition:all .15s;}
.inv-sidebar-tab--active{background:var(--bg3);color:var(--text);border-color:var(--border2);font-weight:var(--fw-semibold);}
.inv-preview-wrap{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);background:var(--bg2);}
.inv-preview-frame{width:100%;height:480px;border:none;display:block;}

/* Line item template picker */
.inv-item-template-btn{background:none;border:none;cursor:pointer;color:var(--text3);padding:2px 4px;border-radius:var(--radius2);display:inline-flex;align-items:center;transition:color .12s,background .12s;}
.inv-item-template-btn:hover{color:var(--accent);background:var(--bg2);}
/* Custom-Unit Single-Slot (2026-06-05): Select UND Custom-Input liegen
   im SELBEN Grid-Slot (1/1) übereinander statt gestapelt. Immer nur eines
   sichtbar (.is-hidden → display:none). Höhe bleibt konstant → bei „Benutzer-
   definiert" entsteht KEINE zweite Zeile, KEINE Extra-Spalte, KEIN Layout-
   sprung. Der echte Zurück-Button (.inv3-unit-reset) liegt absolut im Slot. */
.inv3-unit-field{display:grid;grid-template-columns:1fr;align-items:stretch;position:relative;min-width:0;}
.inv3-unit-field > .inv3-unit-select,
.inv3-unit-field > .inv3-unit-custom{grid-area:1 / 1;min-width:0;width:100%;}
.inv3-unit-custom{padding-right:34px;}      /* Platz für den Reset-Button */
.inv3-unit-custom.is-hidden{display:none;}
/* HÖHEN-PARITÄT im Single-Slot (2026-06-05, Mobile-Sprung-Fix): Select und
   Custom-Input MÜSSEN exakt gleich hoch sein, sonst springt die Zeile beim
   Umschalten (Mobile hatte Select 44px / Input 48px → 4px-Sprung). Beide auf
   dieselbe min-height/height pinnen. .inv3-form-page-Scope schlägt die
   Mobile-Control-Regel (_95c, min-height:44px) → deterministisch identisch. */
.inv3-form-page .inv3-line .inv3-unit-field > .inv3-unit-select,
.inv3-form-page .inv3-line .inv3-unit-field > .inv3-unit-custom{
  box-sizing:border-box;
  min-height:var(--ic-control-h,40px);
  height:var(--ic-control-h,40px);
}
/* Bei aktiver Custom-Einheit liegt der Custom-Input über dem Select; das
   Select wird unsichtbar + nicht-fokussierbar, bleibt aber im Slot (Höhe
   konstant). Kein display:none → Single-Slot-Geometrie unverändert. */
.inv3-unit-select.is-unit-hidden{visibility:hidden;pointer-events:none;}
/* Echter, klickbarer Zurück-Button — rechts im Custom-Input, gleicher Slot. */
.inv3-unit-reset{
  position:absolute;
  top:50%;
  right:6px;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  padding:0;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--text3);
  cursor:pointer;
  transition:background var(--tr-fast),color var(--tr-fast),box-shadow var(--tr-fast);
}
.inv3-unit-reset.is-hidden{display:none;}
.inv3-unit-reset:hover{background:rgba(var(--ic-accent-rgb),.12);color:var(--accent);}
.inv3-unit-reset:focus-visible{outline:none;color:var(--accent);box-shadow:0 0 0 2px rgba(var(--ic-accent-rgb),.4);}
.inv3-unit-reset svg{display:block;pointer-events:none;}
.rec-interval-field.is-hidden{display:none;}
.inv3-item-description{min-height:78px;resize:vertical;line-height:1.5;}
.inv3-item-actions{white-space:nowrap;}
.inv3-template-picker{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
/* Pack A F4 (2026-04-19, post-revert-Re-Apply): Der Template-Picker-Dropdown
   war ohne top/right-Anker positioniert — er rutschte in manchen Viewports
   über die Items-Tabelle. Jetzt explizit unter den Bookmark-Button, rechts-
   bündig, mit max-width als Fallback gegen Container-Overflow. */
.inv-tpl-dropdown{position:absolute;top:calc(100% + 4px);right:0;z-index:100;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md);min-width:240px;max-width:min(320px,calc(100vw - 32px));padding:4px 0;}
.inv-tpl-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;font-size:12px;cursor:pointer;transition:background .12s;gap:8px;}
.inv-tpl-item:hover{background:var(--bg2);}
.inv-tpl-item-name{color:var(--text);font-weight:var(--fw-medium);}
.inv-tpl-item-price{color:var(--text3);font-family:var(--mono);white-space:nowrap;}
.inv-tpl-separator{height:1px;background:var(--border);margin:4px 0;}
.inv-tpl-save-link{display:block;padding:8px 12px;font-size:12px;color:var(--accent);cursor:pointer;transition:background .12s;}
.inv-tpl-save-link:hover{background:var(--bg2);}

/* Sidebar totals card */
/* A11y FM7-b: Label-Zellen sind jetzt <th scope="row"> — th gleichwertig zur
   Label-td erfassen (Padding/Größe), font-weight:inherit fürs <strong>. */
.inv-fpage-totals-card .inv-totals-table td{padding:5px 0;}
.inv-fpage-totals-card .inv-totals-table th{padding:5px 0;font-weight:inherit;text-align:left;}
.inv-fpage-totals-card .inv-total-gross td,.inv-fpage-totals-card .inv-total-gross th{font-size:16px;padding-top:10px;}

/* ── Responsive ── */
@media(max-width:1024px){.inv-fpage-layout{grid-template-columns:1fr 280px;}}
@media(max-width:768px){
  .inv-form-page:not(.inv3-form-page) .inv-fpage-layout{grid-template-columns:1fr;}
  .inv-form-page:not(.inv3-form-page) .inv-fpage-right{position:static;display:none;}
  .inv-form-page:not(.inv3-form-page) .inv-fpage-mobile-bar{display:flex;}
  .inv-form-page:not(.inv3-form-page){padding-bottom:80px;}
  .inv-form-page:not(.inv3-form-page) .inv-fpage-sidebar-tabs,
  .inv-form-page:not(.inv3-form-page) #inv-sidebar-preview{display:none;}
}

/* ── Invoice V3 form shell (PR4 groundwork) ───────────────────────────── */
.inv3-form-page{
  position:relative;
  padding-bottom:40px;
}
.inv3-form-page--readonly .inv3-form-main{
  opacity:.82;
}
.inv3-form-page--readonly .inv3-form-main :is(input,select,textarea,button){
  pointer-events:none;
}
.inv3-form-page--readonly .inv3-form-main :is(input,select,textarea){
  background:rgba(var(--surface-rgba-base),.035);
}
.inv3-form-header{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
  margin-bottom:22px;
}
.inv3-form-header-main{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  width:100%;
}
.inv3-builder-header{
  gap:14px;
}
.inv3-builder-breadcrumbs{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:0;
  flex-wrap:wrap;
  width:100%;
}
.inv3-builder-crumb{
  padding:0;
  color:rgba(var(--text-rgba-base),.72);
  font-size:13px;
  font-weight:var(--fw-semibold);
}
.inv3-builder-crumb:hover{
  background:none;
  color:var(--text-strong);
}
.inv3-builder-breadcrumb-sep{
  color:rgba(var(--text-rgba-base),.36);
  font-size:12px;
}
.inv3-builder-breadcrumb-current{
  color:rgba(var(--text-rgba-base),.58);
  font-size:12px;
  font-weight:var(--fw-semibold);
  letter-spacing:.04em;
  text-transform:uppercase;
}
.inv3-builder-header-main{
  gap:10px;
}
.inv3-builder-header-top{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.inv3-form-kicker{
  display:inline-flex;
  align-items:center;
  width:max-content;
  min-height:24px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(232,184,75,.16);
  background:rgba(232,184,75,.08);
  color:rgba(245,208,122,.9);
  font-size:11px;
  font-weight:var(--fw-semibold);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.inv3-form-title{
  margin:0;
  width:100%;
  font-size:30px;
  line-height:1.08;
  font-weight:var(--fw-heavy);
  color:var(--text-strong);
  text-align:left;
}
/* Bereich 5 (Plan): Inline-Subtitle im H1 für Kundennamen.
   Renderer setzt den Span immer, leeren Inhalt blendet das :empty-Selektor aus. */
.inv3-form-title-suffix{
  font-size:.7em;
  font-weight:var(--fw-medium);
  color:rgba(var(--text-rgba-base),.55);
  letter-spacing:0;
  margin-left:.2em;
}
.inv3-form-title-suffix:empty{display:none;}
.inv3-form-sub{
  margin:0;
  max-width:620px;
  font-size:14px;
  line-height:1.6;
  color:rgba(var(--text-rgba-base),.62);
}
.inv3-form-layout{
  grid-template-columns:minmax(0,1.28fr) minmax(340px,.72fr);
  gap:26px;
}
.inv3-form-main{
  grid-column:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.inv3-form-card{
  border-radius:22px;
  border:1px solid rgba(var(--surface-rgba-base),.09);
  background:linear-gradient(180deg,rgba(18,24,44,.96),rgba(15,20,37,.9));
  box-shadow:0 18px 44px rgba(0,0,0,.18);
  position:relative;
  isolation:isolate;
  background-clip:padding-box;
}
/* Stufe 3 (Plan 2026-04-28): Document-Composer-Sections.
   Ersetzt visuell .inv3-form-card für Form-Field-Gruppen (Kunde, Datum, Notizen).
   Cards bleiben im Code für Sidebar-Panel + Position-Composer-Rows.
   Visuell ist eine Section nur ein subtiler 1px-Divider mit großzügigem Padding —
   der Inhalt ist der Container, nicht die Box. */
.inv3-form-section{
  border:0;
  background:none;
  box-shadow:none;
  padding:24px 0;
  border-bottom:1px solid rgba(var(--surface-rgba-base),.08);
  display:block;
  position:relative;
  isolation:isolate;
}
.inv3-form-section:first-of-type{padding-top:0;}
.inv3-form-section:last-of-type{padding-bottom:0;border-bottom:0;}
/* Section-Kicker als <h2> (Design-Review Pass 6: A11y, SR-User können per H-Taste
   springen). Visuell bleibt's bei 12px uppercase via CSS, keine Browser-Heading-Optik. */
h2.inv3-form-section-kicker{
  position:relative;
  padding-left:14px;
  margin:0 0 16px 0;
  font-size:12px;
  font-weight:var(--fw-semibold);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(var(--text-rgba-base),.68);
  display:flex;
  align-items:center;
  gap:8px;
  line-height:1.2;
  transition:color var(--tr-fast);
}
/* Mini-Akzent-Pille als ::before — KEIN border-left auf der Section!
   (Design-Review Pass 4: vermeidet AI-Slop-Item 8 „colored left-border on cards".
   Das ist eine 3×14px Pille NEBEN dem Kicker-Text — redaktionelles Section-Marker-
   Idiom wie NYT/Stripe, nicht der SaaS-Card-Strip.) */
h2.inv3-form-section-kicker::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:3px;
  height:14px;
  border-radius:2px;
  background:var(--accent-soft);
  transition:background var(--tr-fast);
}
/* Active-State: wenn ein Feld in der Section gefocust ist, Kicker + Pille
   wechseln auf solid Akzent-Gold. Subtiler Anker-Effekt. */
.inv3-form-section:focus-within > h2.inv3-form-section-kicker{
  color:var(--accent);
}
.inv3-form-section:focus-within > h2.inv3-form-section-kicker::before{
  background:var(--accent);
}

/* Stufe 3 (Plan 2026-04-28, Bereich C): Native <details>-Disclosure für
   Power-Features (Leistungsdatum, Skonto). Closed by default, persistiert
   per localStorage über _inv3DisclosureState-Helper. */
.inv3-form-disclosure{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(var(--surface-rgba-base),.06);
}
.inv3-form-disclosure > summary{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 0;
  cursor:pointer;
  list-style:none;
  font-size:13px;
  font-weight:var(--fw-semibold);
  color:rgba(var(--text-rgba-base),.7);
  user-select:none;
  transition:color var(--tr-fast);
}
.inv3-form-disclosure > summary::-webkit-details-marker{display:none;}
.inv3-form-disclosure > summary::before{
  content:'';
  display:inline-block;
  width:0;
  height:0;
  border-left:5px solid currentColor;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  margin-left:2px;
  transition:transform var(--tr-fast);
  flex-shrink:0;
  opacity:.7;
}
.inv3-form-disclosure[open] > summary::before{
  transform:rotate(90deg);
}
.inv3-form-disclosure > summary:hover{color:var(--text);}
.inv3-form-disclosure > summary:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}
/* „N aktiv"-Hint im Summary, wenn Werte im Disclosure gesetzt sind */
.inv3-form-disclosure-active-hint{
  color:var(--accent);
  font-weight:var(--fw-semibold);
  margin-left:auto;
}
.inv3-form-disclosure-active-hint:empty{display:none;}
.inv3-form-disclosure-body{
  padding:12px 0 0;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.inv3-form-sidebar{
  grid-column:2;
  /* Pack A F7 (2026-04-19, post-revert-Re-Apply): explizit sticky +
     fit-content-Height. Vorher hing Sticky implizit an der älteren Klasse
     .inv-fpage-right am selben Element — durch Cascade-Überschreibung unter
     bestimmten Viewports konnte Sticky verloren gehen. Jetzt die definitive
     Regel direkt hier. */
  position:sticky;
  top:76px;
  align-self:start;
  height:fit-content;
  max-height:calc(100vh - 96px);
  overflow-y:auto;
  scrollbar-gutter:stable;
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}
.inv3-form-layout--full-items{
  grid-template-columns:minmax(0,1fr);
  gap:18px;
}
.inv3-form-layout--full-items .inv3-form-full-main{
  grid-column:1/-1;
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:18px;
}
/* Stufe 3 (Plan 2026-04-28): Document-Composer-Layout.
   Outer-Grid bekommt 360-380px Sidebar (war 300-340px) + 28px gap (war 18px) —
   Brutto-Hero hat Atemluft. Main-Spalte deckelt sich selbst auf 720px (siehe
   .inv3-form-meta-main unten), zentriert sich innerhalb der 1fr-Spalte.
   Damit kein Inner-2-col-Crowding wie in PR #1196. */
.inv3-form-meta-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,380px);
  gap:28px;
  align-items:start;
  min-width:0;
}
.inv3-form-meta-main,
.inv3-form-items-zone{
  min-width:0;
}
/* Single-Column Stream (kein Inner-2-col!), max 720px breit, zentriert.
   Auf 1920px Viewport bleibt die Spalte komprimiert + zentriert in der
   1fr-Outer-Spalte statt sich auf 1100px „leer" auszudehnen. */
.inv3-form-meta-main{
  display:flex;
  flex-direction:column;
  gap:18px;
  max-width:720px;
  width:100%;
  margin:0 auto;
}
.inv3-form-summary-zone{
  position:sticky;
  top:76px;
  align-self:start;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
  z-index:4;
}
.inv3-form-items-zone{
  grid-column:1/-1;
  width:100%;
}
.q-form-page .inv3-form-layout--full-items,
.q-form-page .inv3-form-full-main{
  gap:22px;
}
.q-form-page .inv3-form-meta-grid{
  grid-template-columns:minmax(0,1fr) minmax(320px,360px);
  gap:22px;
}
.q-form-page .inv3-form-secondary-zone{
  grid-template-columns:minmax(0,1fr);
}
.q-form-page .inv3-form-secondary-zone>.inv3-form-card{
  grid-column:1/-1;
}
.q-form-page #q-card-kunde,
.q-form-page #q-card-dates,
.q-form-page #q-card-items,
.q-form-page #q-card-notes{
  width:100%;
  margin-bottom:0;
}
.inv3-form-secondary-zone{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  align-items:start;
  min-width:0;
}
.inv3-form-secondary-zone>.inv3-form-card{
  min-width:0;
  margin-bottom:0;
}
.inv3-form-secondary-zone>.inv3-form-card:only-child{
  grid-column:1/-1;
}
.inv3-builder-rail{
  min-width:0;
}
.inv3-builder-rail-stack{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.inv3-builder-rail-section{
  margin-bottom:0;
}
.inv3-builder-rail-label{
  display:block;
  margin-bottom:14px;
  font-size:11px;
  font-weight:var(--fw-bold);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(var(--text-rgba-base),.52);
}
.inv3-form-summary-card .inv-totals-table{
  margin-top:2px;
}
.inv3-form-action-summary{
  border-radius:8px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  box-shadow:0 12px 26px rgba(0,0,0,.16);
}
.inv3-action-summary-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  min-width:0;
}
.inv3-action-summary-copy{
  min-width:0;
}
.inv3-action-summary-copy .inv3-builder-rail-label{
  margin-bottom:6px;
}
.inv3-action-summary-copy strong{
  display:block;
  color:var(--text-strong);
  font-size:18px;
  line-height:1.2;
}
/* Bereich 6 (Plan): Hero-Total in Sidebar — Brutto als Mono-Zahl in Akzent-Gold.
   DESIGN.md-konform: clamp(20px,2vw,26px) bleibt in der Typo-Skala (KPI-Wert=22px,
   max ~18% drüber). overflow-wrap fängt sehr lange Beträge wie 1.234.567,89 € ab. */
.inv3-hero-total{
  display:block;
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:clamp(20px,2vw,26px);
  line-height:1.1;
  color:var(--accent);
  letter-spacing:.005em;
  min-width:0;
  overflow-wrap:anywhere;
  margin-top:2px;
  transition:color var(--tr-base);
}
/* Stufe 3 (Plan 2026-04-28, Bereich E + Design-Review Pass 1):
   Empty-State. Bei totalGross === 0 dimm den Hero von Akzent-Gold auf
   Sekundärtext — verhindert visuelle Lautstärke „0,00 €" bei leerer Form.
   Sobald > 0, springt er live zurück zu Akzent-Gold. */
.inv3-hero-total--empty{
  color:rgba(var(--text-rgba-base),.45);
}
.inv3-hero-total-subline{
  display:block;
  margin-top:4px;
  font-size:12px;
  line-height:1.4;
  color:rgba(var(--text-rgba-base),.55);
  font-weight:var(--fw-regular);
}
.inv3-action-summary-status{
  /* 2026-04-29 Iter5-Bug-Fix: Bei langem Status-Text („Änderungen stehen an —
     Aktualisieren klicken") überlappte das Status-Element visuell mit dem
     Kicker („SUMMENÜBERBLICK"). Beide waren im selben space-between-Flex.
     Fix: Status wraps auf eine eigene Row UNTER dem Title-Block (flex-basis:
     100% + order:99 + text-align:left). Kicker + Title bekommen die volle
     Breite zurück. */
  flex:1 1 100%;
  order:99;
  text-align:left;
  margin-top:6px;
  font-size:11.5px;
  line-height:1.4;
  color:rgba(var(--text-rgba-base),.55);
}
/* head muss wraps erlauben damit der Status auf eigene Row kommt */
.inv3-action-summary-head{flex-wrap:wrap;}
.inv3-action-summary-totals{
  padding-top:4px;
}
.inv3-action-summary-totals .inv-totals{
  border:none!important;
  padding:0!important;
  background:none!important;
}
.inv3-action-summary-meta,
.inv3-action-summary-detail{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}
.inv3-action-summary-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:0;
}
.inv3-action-summary-actions .btn{
  min-height:36px;
  justify-content:center;
}
.inv3-action-summary-primary{
  grid-column:1/-1;
}
.inv3-form-action-card .inv-fpage-actions{
  gap:10px;
}
.inv3-form-delivery-card .inv3-form-hint{
  margin-top:12px;
  text-align:left;
}
.inv3-form-preview-launcher strong{
  display:block;
  margin-bottom:8px;
  font-size:18px;
  color:var(--text-strong);
}
.inv3-form-preview-launcher p{
  margin:0 0 12px;
  color:rgba(var(--text-rgba-base),.64);
  line-height:1.6;
}
.inv3-form-preview-launcher-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
/* Inline-Editable Doc-Number (Bereich 2 aus Plan).
   Zwei Modi via [data-mode] am .inv3-doc-number-shell:
     - "auto"   → zeigt Suggestion-Pill + ✏️-Toggle, blendet Manual-Input aus
     - "manual" → zeigt Input + ↺-Reset, blendet Auto-Pill aus
   Pill-Höhe von 54px auf 40px reduziert (siehe Plan). */
.inv3-doc-number-shell{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.inv3-doc-number-row{
  display:flex;
  align-items:stretch;
  gap:8px;
  min-width:0;
}
.inv3-doc-number-shell[data-mode="auto"] [data-role="doc-number-manual"]{display:none;}
.inv3-doc-number-shell[data-mode="manual"] [data-role="doc-number-auto"]{display:none;}
.inv3-doc-number-preview{
  flex:1;
  min-width:0;
  min-height:40px;
  display:flex;
  align-items:center;
  padding:0 14px;
  border-radius:10px;
  border:1px solid rgba(var(--surface-rgba-base),.1);
  background:rgba(var(--surface-rgba-base),.032);
  color:var(--text-strong);
  font-size:15px;
  letter-spacing:.01em;
  cursor:pointer;
  font-family:var(--font-mono);
  text-align:left;
  transition:border-color var(--tr-fast),background var(--tr-fast);
}
.inv3-doc-number-preview:hover{
  border-color:rgba(232,184,75,.3);
  background:rgba(232,184,75,.06);
}
.inv3-doc-number-preview[data-state="loading"]{
  color:rgba(var(--text-rgba-base),.66);
  cursor:wait;
}
.inv3-doc-number-preview[data-state="error"]{
  color:var(--tone-poor-fg);
  border-color:rgba(244,160,160,.26);
  background:rgba(244,160,160,.06);
}
.inv3-doc-number-preview[data-state="manual"]{
  border-color:rgba(232,184,75,.26);
  background:rgba(232,184,75,.09);
}
.inv3-doc-number-input{
  flex:1;
  min-width:0;
  min-height:40px;
  font-family:var(--font-mono);
}
/* Server-Reservierungs-Konflikt (409): roter Border + Soft-Background.
   .field-error setzt das System-eigene `_fieldError`-Helper; Plan A2-Fix
   nutzt Soft-Tokens für Safari-15-Kompatibilität. */
.inv3-doc-number-input.field-error{
  border-color:var(--red);
  background:var(--red-soft);
}
.inv3-doc-number-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0 12px;
  min-height:40px;
  border-radius:10px;
  border:1px solid rgba(var(--surface-rgba-base),.1);
  background:rgba(var(--surface-rgba-base),.04);
  color:var(--text2);
  font-size:12px;
  font-weight:var(--fw-semibold);
  font-family:inherit;
  cursor:pointer;
  white-space:nowrap;
  flex-shrink:0;
  transition:border-color var(--tr-fast),background var(--tr-fast),color var(--tr-fast);
}
.inv3-doc-number-toggle:hover{
  border-color:rgba(232,184,75,.34);
  background:rgba(232,184,75,.12);
  color:var(--text);
}
.inv3-doc-number-toggle:focus-visible{
  outline:2px solid rgba(232,184,75,.4);
  outline-offset:2px;
}
.inv3-doc-number-hint{
  margin-top:2px;
  font-size:12px;
  line-height:1.55;
  color:rgba(var(--text-rgba-base),.62);
}
.inv3-doc-number-hint--error{
  color:var(--tone-poor-fg);
}
.inv3-form-sidebar-tabs{
  gap:6px;
  margin-bottom:0;
  padding:6px;
  position:sticky;
  top:0;
  z-index:3;
  border-radius:18px;
  border:1px solid rgba(var(--surface-rgba-base),.09);
  background:rgba(var(--surface-rgba-base),.03);
  backdrop-filter:blur(14px);
}
/* 2026-05-21: Outer-Banner (.inv3-service-date-note) und Info-Lead
   (.inv3-service-date-note-copy / -lead) entfernt. Nur die kompakte Inline-Card
   .inv3-service-date-note-toggle bleibt — sichtbar ausschließlich im
   Leistungsdatum-Modus „Kein Datum". Layout-Vorgabe: max-width 720px,
   padding 14px 16px, border-radius 16px, Surface-Token-basiert. */
.inv3-service-date-note-toggle,
.inv-form-row label.inv3-service-date-note-toggle{
  display:flex;
  align-items:flex-start;
  gap:12px;
  max-width:720px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:rgba(var(--surface-rgba-base),.04);
  cursor:pointer;
  transition:border-color var(--tr-fast),background var(--tr-fast),box-shadow var(--tr-fast);
}
.inv3-service-date-note-toggle:hover{
  border-color:rgba(232,184,75,.22);
  background:rgba(232,184,75,.08);
}
.inv3-service-date-note-toggle:focus-within{
  border-color:rgba(232,184,75,.28);
  box-shadow:0 0 0 3px rgba(232,184,75,.12);
}
.inv3-service-date-note-toggle input[type="checkbox"]{
  width:18px;
  height:18px;
  margin:2px 0 0;
  flex:0 0 auto;
  appearance:none;
  border:2px solid rgba(232,184,75,.55);
  border-radius:4px;
  background:rgba(var(--surface-rgba-base),.08);
  accent-color:var(--accent);
  display:grid;
  place-content:center;
}
.inv3-service-date-note-toggle input[type="checkbox"]::before{
  content:'';
  width:8px;
  height:8px;
  transform:scale(0);
  transition:transform var(--tr-fast);
  clip-path:polygon(14% 44%,0 58%,38% 96%,100% 20%,86% 8%,36% 68%);
  background:var(--accent-ink);
}
.inv3-service-date-note-toggle input[type="checkbox"]:checked{
  background:var(--accent);
  border-color:var(--accent);
}
.inv3-service-date-note-toggle input[type="checkbox"]:checked::before{
  transform:scale(1);
}
.inv3-service-date-note-toggle-copy{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.inv3-service-date-note-toggle-copy strong{
  font-size:13px;
  line-height:1.4;
  color:var(--text-strong);
}
.inv3-service-date-note-toggle-copy small{
  font-size:12px;
  line-height:1.55;
  color:rgba(var(--text-rgba-base),.62);
}
.inv3-form-page .inv-sidebar-tab{
  min-height:42px;
  border-radius:14px;
  background:transparent;
  border-color:transparent;
  color:rgba(var(--text-rgba-base),.6);
}
.inv3-form-page .inv-sidebar-tab:hover{
  border-color:rgba(var(--surface-rgba-base),.08);
  background:rgba(var(--surface-rgba-base),.05);
  color:var(--text);
}
.inv3-form-page .inv-sidebar-tab--active{
  background:rgba(var(--surface-rgba-base),.09);
  border-color:rgba(var(--surface-rgba-base),.1);
  color:var(--text-strong);
}
.inv3-form-card--sidebar{
  margin-bottom:0;
}
.inv3-form-actions{
  margin-top:2px;
}
/* Live-Test-Fix (2026-04-19): der globale label-Selektor erzwingt
   text-transform:uppercase. Im BCC-Checkbox-Kontext macht das die Beschriftung
   zu "KOPIE DER E-MAIL AN MICH SELBST SENDEN" — unleserlich. Override setzt
   den normalen Satzbau zurück, ohne die Rail-Label-Uppercase ("Versand") zu
   beeinflussen (die hängt in einem eigenen Block, nicht im <label>). */
.inv3-form-bcc-label{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:rgba(var(--surface-rgba-base),.028);
  text-transform:none;
  letter-spacing:normal;
  cursor:pointer;
}
/* Pack B F3 (2026-04-20, Bundle-4-Re-Apply post-Codex): inline-Styles
   sind aus dem Label-HTML entfernt, Checkbox wird hier fest 16×16 gesized
   damit der Flex-Container nicht durch Browser-Defaults auseinanderfällt. */
.inv3-form-bcc-label input[type="checkbox"]{
  width:16px;
  height:16px;
  margin:0;
  flex-shrink:0;
  accent-color:var(--accent);
}
.inv3-form-bcc-label span{
  flex:1 1 auto;
  text-align:left;
  text-transform:none;
  letter-spacing:normal;
  font-size:13px;
  color:var(--text2);
  line-height:1.4;
}
.inv3-form-hint{
  margin-top:10px;
}
.inv3-form-hint--readonly{
  color:var(--text2);
}
.inv3-form-items-shell{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
  overflow:visible;
  padding-bottom:2px;
}
/* 2026-04-28 Composer-Refinement: Klasse wird weiterhin gebraucht — die
   Recurrence-Form-Page nutzt sie noch für die „Rechnungshinweis"-Card-Note
   (recurrences.js:2020). Aus den Position-Card-Pfaden wurde sie entfernt
   (waren redundant zum SectionHeader von renderItemsBuilder). */
.inv3-builder-section-note{
  margin:-2px 0 14px;
  max-width:680px;
  font-size:13px;
  line-height:1.65;
  color:rgba(var(--text-rgba-base),.62);
}
.inv3-form-preview-wrap{
  display:flex;
  flex-direction:column;
  width:100%;
  min-width:0;
}
.inv3-form-preview-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 16px;
  border-bottom:1px solid rgba(var(--surface-rgba-base),.08);
  background:rgba(var(--surface-rgba-base),.035);
}
.inv3-form-preview-status{
  font-size:12px;
  line-height:1.55;
  color:rgba(var(--text-rgba-base),.6);
}
.inv3-form-preview-refresh{
  flex-shrink:0;
}
.inv3-form-sidebar-pane{
  min-height:0;
}
.inv3-form-mobile-sheet-overlay,
.inv3-form-mobile-sheet-head{
  display:none;
}
.inv3-form-mobile-sheet-overlay{
  position:fixed;
  inset:0;
  border:none;
}
.inv3-form-mobile-bar{
  display:none;
}
.inv3-form-mobile-bar-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  grid-column:1/-1;
  margin-bottom:2px;
  color:rgba(var(--text-rgba-base),.7);
  font-size:12px;
}
.inv3-form-mobile-bar-meta strong{
  color:var(--text-strong);
  font-size:18px;
  line-height:1;
}
.inv3-form-mobile-bar-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  grid-column:1/-1;
}
.inv3-form-mobile-bar .btn{
  min-height:46px;
  justify-content:center;
}
.inv3-form-mobile-preview{
  width:auto;
}
.inv3-preview-drawer{
  position:fixed;
  inset:0;
  display:none;
  z-index:108;
}
.inv3-preview-drawer-overlay{
  position:absolute;
  inset:0;
  border:none;
  background:rgba(6,10,20,.66);
}
.inv3-preview-drawer-panel{
  position:absolute;
  top:20px;
  right:20px;
  bottom:20px;
  width:min(1040px,calc(100vw - 40px));
  display:flex;
  flex-direction:column;
  border-radius:28px;
  border:1px solid rgba(var(--surface-rgba-base),.12);
  background:linear-gradient(180deg,rgba(16,21,39,.98),rgba(13,18,34,.98));
  box-shadow:0 28px 80px rgba(0,0,0,.42);
  overflow:hidden;
  background-clip:padding-box;
}
.inv3-preview-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 20px;
  border-bottom:1px solid rgba(var(--surface-rgba-base),.08);
}
.inv3-preview-drawer-copy{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.inv3-preview-drawer-copy span{
  font-size:11px;
  font-weight:var(--fw-bold);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(var(--text-rgba-base),.5);
}
.inv3-preview-drawer-copy strong{
  font-size:22px;
  color:var(--text-strong);
}
.inv3-preview-drawer-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.inv3-preview-drawer-body{
  flex:1;
  min-height:0;
  padding:18px 20px 20px;
  background:linear-gradient(180deg,rgba(var(--surface-rgba-base),.03),rgba(var(--surface-rgba-base),.015));
}
.inv3-preview-canvas{
  display:flex;
  flex-direction:column;
  width:min(100%,980px);
  height:100%;
  min-height:0;
  margin:0 auto;
}
.inv3-preview-frame{
  flex:1;
  display:block;
  width:100%;
  height:100%;
  min-height:560px;
  background:white;
  border-radius:20px;
  box-shadow:0 18px 40px rgba(0,0,0,.22);
  border:1px solid rgba(11,18,34,.08);
  overflow:hidden;
  background-clip:padding-box;
  clip-path:inset(0 round 20px);
}
.inv3-form-page.inv3-form-page--preview-open .inv3-preview-drawer{
  display:block;
}

@media(max-width:1180px){
  .inv3-form-layout{grid-template-columns:minmax(0,1fr) 320px;}
  .inv3-form-layout--full-items{grid-template-columns:minmax(0,1fr);}
  .inv3-form-meta-grid{grid-template-columns:minmax(0,1fr) minmax(300px,340px);}
  .q-form-page .inv3-form-meta-grid{grid-template-columns:minmax(0,1fr) minmax(300px,340px);}
  .inv3-form-title{font-size:28px;}
}

@media(max-width:960px){
  .inv3-form-meta-grid,
  .q-form-page .inv3-form-meta-grid,
  .inv3-form-secondary-zone{
    grid-template-columns:1fr;
  }
  .inv3-form-summary-zone{
    position:static;
    top:auto;
  }
}

@media(max-width:640px){
  .inv3-form-page{
    padding-bottom:40px;
  }
  .inv3-form-header{
    flex-direction:column;
    align-items:flex-start;
  }
  .inv3-form-layout{
    grid-template-columns:1fr;
  }
  .inv3-form-meta-grid,
  .inv3-form-secondary-zone{
    grid-template-columns:1fr;
  }
  .inv3-form-main,
  .inv3-form-sidebar{
    grid-column:1/-1;
  }
  .inv3-form-sidebar{
    position:static;
    top:auto;
  }
}

@media(max-width:640px){
  .inv3-form-page{
    /* Scroll-Polster, damit die letzte Positionskarte NIE hinter der Sticky
       Bottom-Bar verschwindet — inkl. iOS Safe-Area (Home-Indicator). */
    padding-bottom:calc(var(--inv3-mobile-bar-offset,142px) + 24px + env(safe-area-inset-bottom, 0px));
  }
  .inv3-form-sidebar{
    display:none;
  }
  .inv3-form-summary-zone .inv3-action-summary-actions{
    display:none;
  }
  .inv3-form-mobile-bar{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    z-index:92;
  }
  .inv3-form-mobile-bar--count-1{
    grid-template-columns:1fr;
  }
  .inv3-form-mobile-bar--count-1 .inv3-form-mobile-bar-actions{
    grid-template-columns:1fr;
  }
  .inv3-form-mobile-bar--count-3{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .inv3-form-mobile-bar--count-3 .inv3-form-mobile-bar-actions{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .inv3-form-mobile-bar--count-4{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .inv3-form-mobile-bar--count-4 .inv3-form-mobile-bar-actions{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .inv3-form-mobile-bar .btn{
    min-height:44px;
    padding:0 10px;
    font-size:12px;
  }
  .inv3-form-page.inv3-form-page--sheet-open .inv3-form-mobile-bar{
    opacity:0;
    pointer-events:none;
  }
  .inv3-form-page.inv3-form-page--sheet-open .inv3-form-mobile-sheet-overlay{
    display:block;
    position:fixed;
    inset:0;
    border:none;
    background:rgba(6,10,20,.58);
    z-index:95;
  }
  .inv3-form-page.inv3-form-page--sheet-open .inv3-form-sidebar{
    display:flex!important;
    position:fixed;
    left:12px;
    right:12px;
    bottom:12px;
    top:auto;
    max-height:min(82dvh,calc(100dvh - 24px));
    padding:12px;
    border-radius:24px;
    border:1px solid rgba(var(--surface-rgba-base),.12);
    background:linear-gradient(180deg,rgba(var(--surface-rgba-base),.09),rgba(var(--surface-rgba-base),.045));
    box-shadow:0 26px 60px rgba(0,0,0,.34);
    z-index:96;
    overflow:hidden;
  }
  .inv3-form-page.inv3-form-page--sheet-open .inv3-form-mobile-sheet-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
  }
  .inv3-form-page.inv3-form-page--sheet-open .inv3-form-sidebar-tabs{
    display:flex!important;
    margin-bottom:10px;
  }
  .inv3-form-page.inv3-form-page--sheet-open .inv3-form-sidebar-pane{
    min-height:0;
    overflow:auto;
  }
  .inv3-form-page.inv3-form-page--sheet-open #inv-sidebar-summary,
  .inv3-form-page.inv3-form-page--sheet-open #inv-sidebar-preview,
  .inv3-form-page.inv3-form-page--sheet-open .inv3-form-sidebar-pane{
    min-height:0;
    overflow:auto;
  }
  .inv3-form-page.inv3-form-page--sheet-open #inv-sidebar-preview,
  .inv3-form-page.inv3-form-page--sheet-open .inv3-form-sidebar-pane--preview{
    display:flex;
    flex-direction:column;
  }
  .inv3-form-page.inv3-form-page--sheet-open .inv3-form-preview-wrap{
    min-height:0;
    flex:1;
  }
  .inv3-form-page.inv3-form-page--sheet-open .inv-preview-frame{
    height:min(58dvh,560px);
  }
  .inv3-preview-drawer-panel{
    top:10px;
    right:10px;
    left:10px;
    bottom:10px;
    width:auto;
    border-radius:24px;
  }
  .inv3-preview-drawer-head{
    padding:14px 14px 12px;
  }
  .inv3-preview-drawer-copy strong{
    font-size:18px;
  }
  .inv3-preview-drawer-actions{
    gap:8px;
  }
  .inv3-preview-drawer-body{
    padding:12px;
  }
  .inv3-preview-frame{
    min-height:0;
    height:100%;
  }
}

@media(max-width:680px){
  .inv3-doc-number-row{
    flex-wrap:wrap;
  }
  .inv3-doc-number-toggle{
    flex:1;
    justify-content:center;
  }
  .inv3-form-page .inv-form-grid{
    grid-template-columns:1fr;
  }
  .inv3-form-page .inv-form-grid--split{
    grid-template-columns:1fr;
  }
  .inv3-form-page .inv-items-table,
  .inv3-form-page .inv-items-table thead,
  .inv3-form-page .inv-items-table tbody,
  .inv3-form-page .inv-items-table tr,
  .inv3-form-page .inv-items-table td{
    display:block;
    width:100%;
  }
  .inv3-form-page .inv-items-table thead{
    display:none;
  }
  .inv3-form-page .inv-items-table tbody{
    display:grid;
    gap:12px;
  }
  .inv3-form-page .inv-items-table tr{
    padding:14px;
    border-radius:18px;
    border:1px solid rgba(var(--surface-rgba-base),.09);
    background:rgba(var(--surface-rgba-base),.03);
  }
  .inv3-form-page .inv-items-table td{
    padding:0;
    margin-bottom:10px;
  }
  .inv3-form-page .inv-items-table td:last-child{
    margin-bottom:0;
  }
  .inv3-form-page .inv-items-table td::before{
    content:attr(data-label);
    display:block;
    margin-bottom:6px;
    font-size:11px;
    font-weight:var(--fw-semibold);
    color:rgba(var(--text-rgba-base),.52);
    text-transform:uppercase;
    letter-spacing:.06em;
  }
  .inv3-form-page .inv-items-table td[data-label="Aktionen"]{
    display:flex;
    align-items:center;
    gap:8px;
    justify-content:flex-end;
  }
  .inv3-form-page .inv-items-table td[data-label="Aktionen"]::before{
    margin:0 auto 0 0;
  }
  .inv3-form-page .inv-line-total{
    text-align:left;
    font-size:14px;
  }
  .inv3-form-preview-launcher-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .inv3-customer-contact-top{
    flex-direction:column;
  }
}

body.inv3-form-body-sheet-open{
  overflow:hidden;
}
body.inv3-preview-modal-open,
body.inv3-preview-drawer-open{
  overflow:hidden;
}

/* ── Monatsliste: marker for auto-generated transactions ── */
/* Small unobtrusive link-icon shown next to the buchungstext when a tx was
   generated from an invoice or asset. Click navigates to the source. */
.tx-gen-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;padding:0;margin-left:4px;
  background:transparent;border:0;border-radius:3px;cursor:pointer;
  color:var(--text3);vertical-align:-2px;
  transition:color .12s,background .12s;
}
.tx-gen-link:hover{color:var(--accent);background:var(--bg2);}
.tx-gen-link:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
.tx-gen-link svg{display:block;}

.inv3-customer-manual-fields[hidden]{display:none!important;}
.inv3-doc-menu-sheet.inv3-doc-menu-sheet--dragging{animation:none;will-change:transform;}
.inv3-preview-frame-stage>.inv3-preview-frame{width:794px;height:1123px;min-height:0;transform-origin:top left;}

/* ══════════════════════════════════════════════════════════════
   Invoice Design Settings (Phase 1 F1)
   ══════════════════════════════════════════════════════════════ */

.inv-design-card .card-body{padding:20px;}
/* invoice-design-layout: Default stacked (1fr) für alle Laptop-Viewports.
   2-Col erst ab 1700px Viewport — auf MacBook Air 13"/14"/15" (1280-1512 logical)
   bleibt der Preview voll-breit und damit komplett lesbar. Auf externen Monitoren
   (1920+) lohnt sich 2-Col, weil dann auch die Form-Spalte (400px) plus Preview
   (>=900px) bequem nebeneinander passen. */
.invoice-design-layout,.inv-design-grid{display:grid;grid-template-columns:1fr;gap:20px;align-items:start;}
.inv-design-form{display:flex;flex-direction:column;gap:16px;min-width:0;}
.inv-design-help{font-size:11px;color:var(--text3);line-height:1.45;margin-bottom:8px;}
.inv-design-help--top-gap{margin-top:4px;margin-bottom:0;}
.inv-design-check{display:inline-flex!important;align-items:center;justify-content:flex-start;gap:12px!important;width:auto;max-width:100%;margin-top:8px;font-size:12px;color:var(--text2);text-transform:none;letter-spacing:0;}
.inv-design-check input[type="checkbox"]{width:16px;height:16px;flex:0 0 16px;margin:0!important;accent-color:var(--accent);cursor:pointer;}
.inv-design-check input[type="checkbox"]+span{margin-left:0;}
.inv-design-check span{min-width:0;text-transform:none;letter-spacing:0;}
.inv-design-empty-inline{font-size:12px;color:var(--text3);line-height:1.45;padding:10px 12px;border:1px dashed var(--border);border-radius:8px;background:var(--bg2);margin-bottom:8px;}
.inv-design-warning{margin-top:8px;padding:10px 12px;border:1px solid rgba(232,184,75,.28);border-radius:8px;background:rgba(232,184,75,.08);font-size:12px;line-height:1.45;color:var(--text2);}
.inv-design-warning button{background:none;border:none;color:var(--accent);font:inherit;font-weight:var(--fw-semibold);padding:0;cursor:pointer;}
/* Polish 2026-05-21: Picker mit Gruppen, Mini-Thumbnails, kein ALL-CAPS,
   ruhigerer Selected-State. .inv-template-choice ist nur noch der äußere
   Wrapper für die Gruppen — Grid steckt jetzt in .inv-template-group-grid. */
/* Fix 2026-05-22: Picker reparieren — Badges + Texte wurden geclippt:
   - overflow: visible auf .inv-template-option (Badges lagen außerhalb)
   - max 2 Spalten als hartes Maximum, kein 3-Spalter mehr
   - Card-Höhe auto, min-height für visuelle Konsistenz
   - Beschreibung mit -webkit-line-clamp auf 2 Zeilen
   - flex-wrap am Title-Block, damit Badge umbrechen darf */
.inv-template-choice{display:flex;flex-direction:column;gap:18px;text-transform:none;letter-spacing:0;}
.inv-template-group{display:flex;flex-direction:column;gap:8px;}
.inv-template-group-label{font-size:11px;font-weight:var(--fw-semibold);color:var(--text3);letter-spacing:.04em;text-transform:none;}
.inv-template-group-grid{display:grid;grid-template-columns:1fr;gap:10px;}
@media(min-width:560px){.inv-template-group-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
.inv-template-option{position:relative;display:flex;padding:0;border:1px solid var(--border);border-radius:12px;background:var(--bg2);cursor:pointer;transition:border-color var(--tr-fast),background var(--tr-fast),box-shadow var(--tr-fast);min-height:84px;}
.inv-template-option.active{border-color:rgba(232,184,75,.55);background:rgba(232,184,75,.06);box-shadow:0 0 0 1px rgba(232,184,75,.32),0 6px 20px -10px rgba(232,184,75,.45);}
.inv-template-option:hover:not(.active){border-color:rgba(232,184,75,.30);}
.inv-template-option:focus-within{outline:2px solid rgba(232,184,75,.45);outline-offset:2px;}
.inv-template-option input[type="radio"]{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;margin:0;padding:0;border:0;background:transparent;}
.inv-template-card{display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px;align-items:center;padding:14px 14px;width:100%;text-transform:none;letter-spacing:0;}
.inv-template-text{display:flex;flex-direction:column;gap:4px;min-width:0;}
.inv-template-name{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:13.5px;font-weight:var(--fw-semibold);color:var(--text);text-transform:none;letter-spacing:0;line-height:1.25;}
.inv-template-desc{font-size:11.5px;line-height:1.4;color:var(--text3);text-transform:none;letter-spacing:0;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.inv-template-badge{display:inline-flex;flex-shrink:0;font-size:9.5px;font-weight:var(--fw-semibold);text-transform:none;letter-spacing:.02em;padding:1px 7px;border-radius:999px;line-height:1.6;color:var(--text2);background:rgba(var(--surface-rgba-base),.06);border:1px solid rgba(var(--surface-rgba-base),.08);}
.inv-template-badge--klassiker{color:var(--accent);background:rgba(232,184,75,.10);border-color:rgba(232,184,75,.18);}
.inv-template-badge--modern{color:var(--tone-good-fg);background:rgba(83,214,179,.10);border-color:rgba(83,214,179,.18);}
.inv-template-badge--markant{color:var(--tone-warn-text);background:rgba(232,184,75,.10);border-color:rgba(232,184,75,.20);}
.inv-template-badge--zahlung{color:var(--accent);background:rgba(232,184,75,.10);border-color:rgba(232,184,75,.18);}
.inv-template-badge--premium{color:var(--accent);background:rgba(15,81,50,.10);border-color:rgba(15,81,50,.22);}
html[data-theme="light"] .inv-template-badge,body.light .inv-template-badge{color:var(--text2);background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.06);}

/* Mini-Thumbnails — CSS-only Papier-Skizzen. Jeder Template-Thumb zeigt
   die wirklich charakterstiftenden Elemente, damit der Picker auf einen
   Blick erkennen lässt, wohin der Stil zielt. Skizze, nicht 1:1-Mockup.

   Hex-Farben sind hier OK: die Thumbs sollen IMMER nach Papier aussehen,
   unabhängig vom App-Theme. Daher per-line stylelint-disable. */
/* stylelint-disable color-no-hex */
.inv-template-thumb{position:relative;display:block;width:46px;height:60px;border-radius:4px;background:#fdfbf6;border:1px solid var(--border);overflow:hidden;flex-shrink:0;}
html[data-theme="light"] .inv-template-thumb,body.light .inv-template-thumb{background:#fff;border-color:rgba(0,0,0,.10);}
/* Default: Header-Bar oben + 3 Hairlines für Tabelle */
.inv-template-thumb::before{content:"";position:absolute;left:5px;right:5px;top:5px;height:4px;background:#1a1a1a;border-radius:1px;opacity:.5;}
.inv-template-thumb::after{content:"";position:absolute;left:5px;right:5px;top:14px;bottom:7px;background:repeating-linear-gradient(180deg,rgba(26,26,26,.36) 0 1px,transparent 1px 6px);}

/* A — Klassisch: zusätzliche Total-Line ganz unten */
.inv-template-thumb--classic{box-shadow:inset 0 -3px 0 -1px rgba(26,26,26,.4);}

/* Modern: helle Zebra-Tabelle, gold accent-row */
.inv-template-thumb--modern::before{background:#666;height:3px;top:6px;}
.inv-template-thumb--modern{background-image:linear-gradient(180deg,transparent 0 14px,rgba(232,184,75,.1) 14px 19px,transparent 19px);background-color:#fdfbf6;}

/* B Letterhead: dünne Goldlinie unten links für gold-an-USt */
.inv-template-thumb--letterhead_quiet::before{background:#1a1a1a;height:2px;top:6px;width:55%;left:5px;right:auto;}
.inv-template-thumb--letterhead_quiet{box-shadow:inset 0 -3px 0 -1.5px var(--accent);}

/* C Editorial: RIESIGE Mono-Number als Anker */
.inv-template-thumb--editorial_anchor::before{content:"2026";position:absolute;left:5px;top:6px;right:auto;height:auto;width:auto;background:none;font-family:'Courier New',monospace;font-size:11px;font-weight:600;color:#1a1a1a;letter-spacing:-0.04em;opacity:1;line-height:1;}
.inv-template-thumb--editorial_anchor::after{top:22px;}

/* D DIN-Briefformat: Adress-Window als gefüllte Box */
.inv-template-thumb--letter_structured::before{background:#1a1a1a;height:3px;top:6px;width:30%;right:auto;}
.inv-template-thumb--letter_structured{background-image:linear-gradient(180deg,transparent 0 13px,rgba(26,26,26,.06) 13px 24px,transparent 24px);background-color:#fdfbf6;}

/* E Gold Spine: dicker vertikaler Goldstreifen links */
.inv-template-thumb--gold_spine{background:linear-gradient(90deg,var(--accent) 0 7px,#fdfbf6 7px);}
.inv-template-thumb--gold_spine::before{left:11px;}
.inv-template-thumb--gold_spine::after{left:11px;}
html[data-theme="light"] .inv-template-thumb--gold_spine,body.light .inv-template-thumb--gold_spine{background:linear-gradient(90deg,var(--accent) 0 7px,#fff 7px);}

/* F Gold Banner: gold Hero-Block oben */
.inv-template-thumb--gold_banner::before{background:var(--accent);height:18px;top:0;left:0;right:0;border-radius:0;opacity:1;}
.inv-template-thumb--gold_banner::after{top:24px;}

/* G Color Field: gold Payment-Block unten */
.inv-template-thumb--color_field::before{background:#1a1a1a;height:3px;top:5px;}
.inv-template-thumb--color_field{box-shadow:inset 0 -16px 0 var(--accent);}
.inv-template-thumb--color_field::after{bottom:18px;}

/* H QR & PayPal: gold Balken oben + zwei gleichwertige QR-Karten unten */
.inv-template-thumb--qr_card{border-top:3px solid var(--accent);background-image:linear-gradient(180deg,transparent 0 24px,rgba(26,26,26,.06) 24px 44px,transparent 44px);}
.inv-template-thumb--qr_card::before{display:none;}
.inv-template-thumb--qr_card::after{top:26px;bottom:4px;left:5px;right:5px;background:repeating-linear-gradient(90deg,rgba(26,26,26,.22) 0 1px,transparent 1px 50%);background-size:50% 100%;}

/* I Modern Pro (Antigravity Variant A): Smaragd-Header + Gold-Akzent + zwei Tiles unten */
.inv-template-thumb--modern_pro{background:#fff;border-color:rgba(15,81,50,.18);}
.inv-template-thumb--modern_pro::before{background:#0f5132;height:5px;top:4px;left:5px;right:5px;border-radius:1px;opacity:1;}
.inv-template-thumb--modern_pro::after{top:12px;left:5px;right:5px;bottom:18px;background:repeating-linear-gradient(180deg,rgba(15,81,50,.32) 0 1px,transparent 1px 5px),linear-gradient(180deg,transparent 0 18px,rgba(232,184,75,.18) 18px 22px,transparent 22px);}
.inv-template-thumb--modern_pro{box-shadow:inset 0 -3px 0 -1px rgba(232,184,75,.55),inset 5px -14px 0 -10px rgba(15,81,50,.45),inset -5px -14px 0 -10px rgba(0,121,193,.45);}

/* J SaaS Pro (Antigravity Variant B): Indigo-Header + Teal-Akzent */
.inv-template-thumb--saas_pro{background:#fff;border-color:rgba(79,70,229,.18);}
.inv-template-thumb--saas_pro::before{background:#4f46e5;height:5px;top:4px;left:5px;right:5px;border-radius:1px;opacity:1;}
.inv-template-thumb--saas_pro::after{top:12px;left:5px;right:5px;bottom:18px;background:repeating-linear-gradient(180deg,rgba(79,70,229,.32) 0 1px,transparent 1px 5px),linear-gradient(180deg,transparent 0 18px,rgba(13,148,136,.22) 18px 22px,transparent 22px);}
.inv-template-thumb--saas_pro{box-shadow:inset 0 -3px 0 -1px rgba(13,148,136,.55),inset 5px -14px 0 -10px rgba(79,70,229,.45),inset -5px -14px 0 -10px rgba(0,121,193,.45);}

/* K Swiss Brutalist (Antigravity Variant C): dicke schwarze Rahmen + Orange-Akzent */
.inv-template-thumb--brutalist{background:#fff;border:2px solid #111827;border-radius:0;}
.inv-template-thumb--brutalist::before{background:#111827;height:7px;top:0;left:0;right:0;border-radius:0;opacity:1;}
.inv-template-thumb--brutalist::after{top:12px;left:4px;right:4px;bottom:18px;background:repeating-linear-gradient(180deg,rgba(17,24,39,.55) 0 1px,transparent 1px 4px),linear-gradient(180deg,transparent 0 14px,rgba(249,115,22,.7) 14px 18px,transparent 18px);}
.inv-template-thumb--brutalist{box-shadow:2px 2px 0 #111827,inset 6px -14px 0 -10px #111827,inset -6px -14px 0 -10px #f97316;}

/* L Neo-Tech Grid (Antigravity Variant D): zarte Haarlinien + Violett/Cyan-Glow */
.inv-template-thumb--neo_tech{background:#fff;border-color:rgba(109,40,217,.18);}
.inv-template-thumb--neo_tech::before{display:none;}
.inv-template-thumb--neo_tech::after{top:5px;left:5px;right:5px;bottom:5px;background:linear-gradient(180deg,#0f172a 0 18px,transparent 18px 100%),linear-gradient(90deg,transparent 0 18%,#06b6d4 18% 19%,transparent 19% 100%),repeating-linear-gradient(180deg,transparent 0 22px,rgba(109,40,217,.36) 22px 23px,transparent 23px 27px);border-radius:3px;}
.inv-template-thumb--neo_tech{box-shadow:0 4px 12px rgba(109,40,217,.18),inset 0 -3px 0 -1px rgba(6,182,212,.55);}
/* stylelint-enable color-no-hex */
.inv-bank-choice{display:grid;grid-template-columns:1fr;gap:8px;}
.inv-bank-select{width:100%;min-width:0;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);padding:10px 12px;font:inherit;font-size:13px;text-transform:none;letter-spacing:0;cursor:pointer;}
.inv-bank-select:focus{outline:2px solid rgba(232,184,75,.45);outline-offset:2px;border-color:rgba(232,184,75,.55);}
.inv-bank-summary{min-width:0;}
.inv-bank-summary-card{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:10px;min-height:58px;padding:9px 11px;border:1px solid rgba(232,184,75,.28);border-radius:8px;background:rgba(232,184,75,.045);box-shadow:inset 0 0 0 1px rgba(232,184,75,.06);text-transform:none!important;letter-spacing:0!important;}
.inv-bank-option{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:10px;min-height:58px;padding:9px 11px;border:1px solid rgba(var(--surface-rgba-base),.08);border-radius:8px;background:rgba(var(--surface-rgba-base),.025);cursor:pointer;transition:border-color var(--tr-fast),background var(--tr-fast),box-shadow var(--tr-fast);text-transform:none!important;letter-spacing:0!important;}
.inv-bank-option.active{border-color:rgba(232,184,75,.46);background:rgba(232,184,75,.055);box-shadow:inset 0 0 0 1px rgba(232,184,75,.08);}
.inv-bank-option:focus-within{outline:2px solid rgba(232,184,75,.45);outline-offset:2px;}
.inv-bank-option input[type="radio"]{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;margin:0;padding:0;border:0;background:transparent;}
.inv-bank-option,.inv-bank-option *{text-transform:none!important;letter-spacing:0!important;}
.inv-bank-summary-card,.inv-bank-summary-card *{text-transform:none!important;letter-spacing:0!important;}
.inv-bank-option .inv-bank-text,.inv-bank-summary-card .inv-bank-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.inv-bank-icon{width:28px;height:28px;border:1px solid rgba(var(--surface-rgba-base),.12);border-radius:7px;display:grid;place-items:center;overflow:hidden;font-size:9px;font-weight:var(--fw-bold);color:var(--text);line-height:1;}
.inv-bank-icon img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;background:white;padding:3px;}
.inv-bank-icon span{display:grid;place-items:center;width:100%;height:100%;}
/* Initialen-Fallback wird mit [hidden] gerendert, solange ein Logo vorhanden
   ist (invoice-design.js _invDesignBankIcon); display:grid schlägt sonst die
   UA-Regel [hidden]{display:none} → Initialen lägen über dem Logo. */
.inv-bank-icon span[hidden]{display:none;}
.inv-bank-icon-muted{background:rgba(var(--surface-rgba-base),.05);color:var(--text3);}
.inv-bank-icon-muted::before{content:"";width:14px;height:11px;border:1.5px solid currentColor;border-radius:3px;box-shadow:inset 0 4px 0 rgba(var(--surface-rgba-base),.12);}
.inv-bank-option strong,.inv-bank-summary-card strong{font-size:12.5px;font-weight:var(--fw-semibold);color:var(--text);line-height:1.25;}
.inv-bank-option strong em,.inv-bank-summary-card strong em{font-style:normal;margin-left:6px;padding:1px 6px;border-radius:8px;background:rgba(232,184,75,.12);color:var(--accent);font-size:10px;vertical-align:1px;}
.inv-bank-option small,.inv-bank-summary-card small{font-size:11px;font-weight:var(--fw-regular);line-height:1.3;color:var(--text3);}
.inv-bank-option code,.inv-bank-option em,.inv-bank-summary-card code,.inv-bank-summary-card em{font-family:var(--mono);font-size:11px;font-style:normal;font-weight:var(--fw-semibold);line-height:1.25;color:var(--text2);white-space:normal;word-break:break-word;}
.inv-design-bank-account-cta{margin-top:10px;}

/* Logo */
.inv-design-logo-wrap{display:flex;flex-direction:column;gap:8px;}
.inv-design-logo-preview{max-height:60px;max-width:180px;object-fit:contain;padding:8px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius2);}
.inv-design-logo-placeholder{height:60px;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--text3);border:1px dashed var(--border);border-radius:var(--radius2);}
.inv-design-logo-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.inv-design-logo-btn{cursor:pointer;margin:0;}

/* Colors */
.inv-design-color-row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;align-items:center;}
.inv-design-color-code{min-width:0;width:100%!important;text-transform:lowercase;}
/* Kräftigere Border: damit sehr dunkle Farben (z.B. #1a1a1a) im Dark-Theme
   nicht optisch im UI-Hintergrund verschwinden. Kombination aus 1px-Border
   in --text3 (hell genug gegen jedes UI-Bg) + zusätzlichem inset-box-shadow
   mit rgba(255,255,255,.08) als subtiler Ring-Akzent. */
.inv-design-color-picker{
  width:40px;height:32px;padding:0;cursor:pointer;background:transparent;
  border:1px solid var(--text3);
  border-radius:var(--radius2);
  box-shadow:inset 0 0 0 1px rgba(var(--surface-rgba-base),.08);
}
.inv-design-color-picker:focus{outline:2px solid var(--accent);outline-offset:1px;}
.inv-design-color-presets{display:flex;gap:6px;margin-top:8px;}
.inv-design-preset{width:24px;height:24px;border-radius:50%;border:2px solid var(--border);cursor:pointer;padding:0;transition:transform .12s,border-color .12s;}
.inv-design-preset:hover{transform:scale(1.1);border-color:var(--text);}
.inv-design-preset--1a1a1a{background:rgb(26 26 26);}
.inv-design-preset--111827{background:rgb(17 24 39);}
.inv-design-preset--1e3a8a{background:rgb(30 58 138);}
.inv-design-preset--3f2a1b{background:rgb(63 42 27);}
.inv-design-preset--0f766e{background:rgb(15 118 110);}
.inv-design-preset--374151{background:rgb(55 65 81);}
.inv-design-preset--f0c15f{background:rgb(240 193 95);}
.inv-design-preset--2563eb{background:rgb(37 99 235);}
.inv-design-preset--16a34a{background:rgb(22 163 74);}
.inv-design-preset--dc2626{background:rgb(220 38 38);}
.inv-design-preset--9333ea{background:rgb(147 51 234);}
.inv-design-preset--6b7280{background:rgb(107 114 128);}

/* Actions */
.inv-design-actions{display:flex;gap:8px;margin-top:8px;padding-top:12px;border-top:1px solid var(--border);flex-wrap:wrap;}
.inv-design-actions .btn{justify-content:center;}
.inv-design-numbering-card{padding:14px;border:1px solid var(--border);border-radius:10px;background:var(--bg2);}
.inv-design-numbering-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;}
.inv-design-numbering-input{min-width:0;width:100%;}
.inv-design-numbering-save{white-space:nowrap;justify-content:center;}
.inv-design-numbering-preview{margin-top:10px;font-size:12px;line-height:1.45;color:var(--text2);}
.inv-design-numbering-preview strong{color:var(--text);font-weight:var(--fw-semibold);}
.inv-design-numbering-error{margin-top:8px;font-size:12px;line-height:1.45;color:var(--red);}
.inv-design-numbering-error[hidden]{display:none;}
.inv-design-numbering-note{margin-top:8px;font-size:12px;line-height:1.45;color:var(--text3);}

/* Live Preview — Page-Preview-Pattern. Shell ist Viewport mit definierter Höhe,
   Stage trägt die skalierten Layout-Maße, iframe rendert nativ A4 (794×1123 px
   = 210×297mm @ 96dpi). JS rechnet scale = min(W/794, H/1123, 1) und setzt
   transform: scale() auf den iframe. PAD wird via getComputedStyle aus dem
   Shell-Padding gelesen — keine Drift bei Mobile-Padding-Override. */
.invoice-design-preview,.inv-design-preview{
  min-width:0;display:flex;flex-direction:column;gap:8px;min-height:0;
}
.inv-design-preview-label{
  font-size:11px;color:var(--text3);margin-bottom:6px;
  text-transform:uppercase;letter-spacing:0.3px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.inv-design-preview-shell{
  position:relative;
  /* A4-Aspect 794:1123 + 16px-Padding. Shell-Höhe steuert die Skalierung;
     im 2-Col-Modus zusätzlich max-width aus Höhe (siehe @media >=1180px)
     damit das Shell nie breiter wird als die skalierte A4-Seite + Padding —
     sonst entsteht symmetrischer Leerraum links/rechts um die Stage. */
  height:min(78vh, 1140px);
  min-height:420px;
  padding:16px;
  width:100%;
  margin-inline:auto;
  border:1px solid rgba(var(--surface-rgba-base),.09);
  border-radius:8px;
  background:rgba(var(--surface-rgba-base),.03);
  box-shadow:0 14px 34px rgba(0,0,0,.12);
  overflow:hidden;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.inv-design-preview-stage{
  position:relative;
  flex:0 0 auto;
  background:white;            /* Sub-Pixel-Edge-Defense: scale rounding kann
                                  einen 1px-Spalt am Rand der iframe lassen.
                                  Weißer Stage-Hintergrund maskiert das. */
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.inv-design-preview-frame{
  width:794px;
  height:1123px;
  border:0;
  background:white;
  display:block;
  transform-origin:top left;
}

/* Loading-State: dezenter Dim + Shimmer-Sweep über die Stage. Der alte
   Vorschau-Inhalt (letzte gültige Vorlage) bleibt sichtbar — beim schnellen
   Durchklicken nie ein leerer Frame, nur ein kurzer Lade-Hinweis. */
.inv-design-preview-shell[data-loading="1"] .inv-design-preview-stage{
  opacity:.55;
  transition:opacity .15s ease-out;
}
.inv-design-preview-shell[data-loading="1"]::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg,
    rgba(var(--surface-rgba-base),.0) 30%,
    rgba(var(--surface-rgba-base),.10) 50%,
    rgba(var(--surface-rgba-base),.0) 70%);
  background-size:220% 100%;
  animation:inv-design-preview-shimmer 1.1s ease-in-out infinite;
  pointer-events:none;
}
@keyframes inv-design-preview-shimmer{
  0%{background-position:130% 0;}
  100%{background-position:-30% 0;}
}

/* Error-Banner unten im Shell (alter iframe-Inhalt bleibt sichtbar). */
.inv-design-preview-error{
  position:absolute; left:16px; right:16px; bottom:16px;
  padding:10px 12px; border-radius:8px;
  background:rgba(248,113,113,.10);
  border:1px solid rgba(248,113,113,.25);
  color:var(--text); font-size:12px;
  display:flex; align-items:center; gap:10px;
}
.inv-design-preview-error[hidden]{display:none;}
.inv-design-preview-error-msg{flex:1 1 auto;min-width:0;}
.inv-design-preview-retry{
  flex:0 0 auto; appearance:none; cursor:pointer;
  padding:5px 12px; border-radius:6px;
  font:inherit; font-size:12px; font-weight:var(--fw-semibold);
  color:var(--text); background:rgba(var(--surface-rgba-base),.08);
  border:1px solid rgba(var(--surface-rgba-base),.16);
  transition:background var(--tr-fast),border-color var(--tr-fast);
}
.inv-design-preview-retry:hover{
  background:rgba(var(--surface-rgba-base),.14);
  border-color:rgba(var(--surface-rgba-base),.28);
}
.inv-design-preview-retry:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* Großvorschau-Trigger. */
.inv-design-preview-expand{
  appearance:none; background:transparent; border:0; cursor:pointer;
  font-size:11px; color:var(--text2);
  padding:2px 6px; border-radius:4px;
  display:inline-flex; align-items:center; gap:4px;
}
.inv-design-preview-expand:hover{color:var(--text); background:rgba(var(--surface-rgba-base),.06);}
.inv-design-preview-expand:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* Reduced-Motion. */
@media (prefers-reduced-motion: reduce){
  .inv-design-preview-shell[data-loading="1"] .inv-design-preview-stage{transition:none;}
  .inv-design-preview-shell[data-loading="1"]::after{animation:none;}
}

@media(min-width:1180px){
  /* 2-Col-Threshold gesenkt: deckt MacBook 13"/14"/15" (1280-1512px logisch) ab.
     Davor: 1700px war über jeder MacBook-Breite — Laptop-User landeten immer
     im 1-Col-Modus mit aufgeblähter iframe-Höhe.
     Layout-Refactor 2026-05-25: Form-Spalte bekommt 1fr (flexible Mindestbreite
     420px), Preview-Spalte hugt die skalierte A4-Seite + Padding.

     Fix 2026-06-16 (Resize-Ratchet): Preview-Track war `auto` (content-sized).
     Der Track hing damit an der Stage-Breite, die `_invDesignFitPreviewFrame`
     zur Laufzeit als width:Npx setzt — und die Stage-Breite hängt über den
     scale wieder an der Track-/Shell-Breite. Dieser Zirkel ließ den
     ResizeObserver beim Verkleinern konvergieren, beim Vergrößern aber NICHT
     zurückwachsen: die stale kleine Stage-Breite pinnte den `auto`-Track klein,
     scale blieb auf dem Minimum hängen → Vorschau „plötzlich nicht mehr
     responsive" (A4 rechts abgeschnitten). Track jetzt auf dieselbe
     höhenabgeleitete calc-Breite fixiert wie die Shell-max-width — der Track
     hängt nur noch an der Viewport-Höhe (stabil), nicht an der JS-Stage-Breite.
     Bricht den Feedback-Loop, behält das Shrink-Wrap (kein Leerraum rechts). */
  .invoice-design-layout,.inv-design-grid{grid-template-columns:minmax(420px,1fr) minmax(0,calc((min(78vh, 1140px) - 32px) * 794 / 1123 + 32px));}
  /* Preview-Shell füllt den fixen Track (width:100% oben) und hugt die
     "A4-Seite + Padding"-Breite; max-width bleibt als harter Cap.
     calc: shellInnerH = shell-h - 2*padding(16). stageW = shellInnerH * 794/1123.
     shellW = stageW + 2*padding(16). JS-Scale-Logik (min(availW/794,
     availH/1123, 1)) bleibt unverändert — greift weiterhin bei Edge Cases mit
     knapper Spalten-Breite. */
  .inv-design-preview-shell{max-width:calc((min(78vh, 1140px) - 32px) * 794 / 1123 + 32px);}
  /* Layout-Refactor 2026-05-06: --page-sticky-top + 16px Atemraum. */
  .invoice-design-preview,.inv-design-preview{position:sticky;top:calc(var(--page-sticky-top) + 16px);}
}
@media(max-width:900px){
  .inv-design-preview-shell{height:min(70vh, 900px);min-height:360px;}
}
@media(max-width:640px){
  .inv-design-card .card-body{padding:16px;}
  .inv-design-logo-preview,.inv-design-logo-placeholder{max-width:100%;width:100%;}
  .inv-design-logo-actions{display:grid;grid-template-columns:1fr;gap:8px;}
  .inv-design-numbering-row{grid-template-columns:1fr;}
  .inv-design-numbering-save{width:100%;}
  .inv-template-choice{grid-template-columns:1fr;}
  .inv-design-color-presets{flex-wrap:wrap;}
  .inv-design-actions{flex-direction:column;}
  .inv-design-actions .btn{width:100%;}
  .inv-design-preview-shell{padding:10px;height:min(60vh, 720px);min-height:320px;}
}
@media(max-width:400px){
  .inv-design-color-row{grid-template-columns:1fr;}
  .inv-design-color-picker{width:100%;height:40px;}
}

/* Modal-Großvorschau — scale=1, nativer Scroll. Re-uses srcdoc der
   Standard-Vorschau, kein zweiter Renderpfad. */
.inv-design-preview-modal{
  position:fixed; inset:0; z-index:var(--z-modal,1200);
  background:rgba(6,10,20,.92);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.inv-design-preview-modal[hidden]{display:none;}
.inv-design-preview-modal-panel{
  position:relative;
  width:min(100%, 920px);
  height:min(100%, calc(100vh - 48px));
  background:var(--bg);
  border-radius:14px;
  border:1px solid rgba(var(--surface-rgba-base),.12);
  box-shadow:0 32px 80px rgba(0,0,0,.5);
  display:flex; flex-direction:column;
}
.inv-design-preview-modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid rgba(var(--surface-rgba-base),.08);
}
.inv-design-preview-modal-title{font-size:13px;color:var(--text);font-weight:var(--fw-semibold);}
.inv-design-preview-modal-close{
  appearance:none; cursor:pointer;
  width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(var(--surface-rgba-base),.06);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:8px;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
.inv-design-preview-modal-close svg{width:18px;height:18px;}
.inv-design-preview-modal-close:hover{
  background:rgba(var(--surface-rgba-base),.14);
  border-color:var(--text2);
  color:var(--text);
}
.inv-design-preview-modal-close:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.inv-design-preview-modal-body{
  flex:1; min-height:0; overflow:auto;
  padding:24px;
  display:flex; align-items:flex-start; justify-content:center;
}
.inv-design-preview-modal-frame{
  width:794px; height:1123px;
  border:0; background:white;
  box-shadow:0 4px 16px rgba(0,0,0,.32);
  flex:0 0 auto;
}

/* Bankkonten */
.bank-accounts-card .card-body{padding:20px;}
.bank-accounts-intro{font-size:13px;line-height:1.55;color:var(--text2);margin-bottom:16px;max-width:720px;}
.bank-accounts-invoice-status{align-items:center;margin:0 0 14px;}
.bank-accounts-invoice-status-icon{display:grid;place-items:center;flex:0 0 18px;width:18px;height:18px;color:inherit;}
.bank-accounts-invoice-status-copy{display:grid;gap:2px;min-width:0;}
.bank-accounts-invoice-status-copy strong{font-size:12px;color:var(--text);}
.bank-accounts-invoice-status-copy span{font-size:12px;color:var(--text2);}
.bank-accounts-invoice-status-action{margin-left:auto;white-space:nowrap;}
.bank-accounts-list{display:flex;flex-direction:column;gap:10px;}
.bank-accounts-empty{padding:18px;border:1px dashed var(--border);border-radius:8px;background:var(--bg2);}
.bank-accounts-empty-title{font-weight:var(--fw-bold);color:var(--text);margin-bottom:4px;}
.bank-accounts-empty-copy{font-size:12px;color:var(--text3);line-height:1.45;margin-bottom:12px;}
.bank-account-item{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:flex-start;gap:14px;padding:14px;border:1px solid var(--border);border-radius:8px;background:var(--bg2);}
.bank-account-main{min-width:0;}
.bank-account-visual{width:44px;height:44px;border:1px solid rgba(var(--surface-rgba-base),.12);border-radius:8px;background:linear-gradient(145deg,rgba(120,145,170,.16),rgba(56,69,88,.34));display:grid;place-items:center;overflow:hidden;color:var(--text);font-size:12px;font-weight:var(--fw-bold);letter-spacing:0;box-shadow:inset 0 1px 0 rgba(var(--surface-rgba-base),.05);}
.bank-account-visual img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;background:var(--bank-logo-canvas);padding:6px;}
.bank-account-visual span{display:grid;place-items:center;width:100%;height:100%;}
/* Initialen-Fallback wird mit [hidden] gerendert, solange ein Logo vorhanden
   ist (bank-accounts.js _bankAccountVisual); display:grid schlägt sonst die
   UA-Regel [hidden]{display:none} → Initialen lägen über dem Logo. */
.bank-account-visual span[hidden]{display:none;}
.bank-logo-commerzbank{background:linear-gradient(145deg,var(--bank-logo-commerzbank-a),var(--bank-logo-commerzbank-b));color:var(--bank-logo-commerzbank-ink);}
.bank-logo-deutsche-bank{background:linear-gradient(145deg,var(--bank-logo-deutsche-bank-a),var(--bank-logo-deutsche-bank-b));color:var(--bank-logo-light-ink);}
.bank-logo-sparkasse{background:linear-gradient(145deg,var(--bank-logo-sparkasse-a),var(--bank-logo-sparkasse-b));color:var(--bank-logo-light-ink);}
.bank-logo-n26{background:linear-gradient(145deg,var(--bank-logo-n26-a),var(--bank-logo-n26-b));color:var(--bank-logo-n26-ink);}
.bank-account-title{font-weight:var(--fw-bold);color:var(--text);margin-bottom:3px;}
.bank-account-badge{display:inline-flex;margin-left:6px;padding:2px 7px;border-radius:8px;background:rgba(232,184,75,.12);color:var(--accent);font-size:10px;vertical-align:1px;}
.bank-account-meta,.bank-account-iban,.bank-account-note{font-size:12px;color:var(--text3);line-height:1.45;}
.bank-account-meta{display:flex;gap:8px;flex-wrap:wrap;}
.bank-account-iban{font-family:var(--mono);color:var(--text2);}
.bank-account-enrichment{margin-top:2px;font-size:11px;color:var(--text3);}
.bank-account-note{margin-top:4px;}
.bank-account-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.bank-accounts-actions{margin-top:14px;}
.bank-account-form-wrap{margin-top:16px;}
.bank-account-form{display:grid;gap:12px;padding:16px;border:1px solid var(--border);border-radius:8px;background:var(--bg2);}
.bank-account-form-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:2px;}
.bank-account-form-title{font-size:14px;font-weight:var(--fw-bold);color:var(--text);}
.bank-account-form-sub{font-size:12px;color:var(--text3);line-height:1.4;margin-top:2px;}
.bank-account-field{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--text2);}
.bank-account-field-label{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:var(--fw-semibold);color:var(--text);}
.bank-account-required{display:inline-flex;align-items:center;height:18px;padding:0 7px;border:1px solid rgba(232,184,75,.22);border-radius:8px;background:rgba(232,184,75,.08);font-style:normal;font-size:10px;color:var(--accent);font-weight:var(--fw-semibold);text-transform:none;letter-spacing:0;}
.bank-account-field input,.bank-account-field textarea{width:100%;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);padding:9px 11px;font:inherit;}
.bank-account-field input[aria-invalid="true"]{border-color:rgba(255,107,107,.75);box-shadow:0 0 0 2px rgba(255,107,107,.12);}
.bank-account-field input[aria-invalid="false"]{border-color:rgba(82,188,137,.5);}
.bank-account-field-hint{min-height:16px;margin-top:-6px;font-size:11px;color:var(--text3);}
.bank-account-field-hint.ok{color:var(--tone-good-fg);}
.bank-account-field-hint.error{color:var(--tone-poor-fg);}
.bank-account-detected{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:10px;padding:10px;border:1px solid rgba(var(--surface-rgba-base),.1);border-radius:8px;background:rgba(var(--surface-rgba-base),.04);}
.bank-account-detected .bank-account-visual{width:34px;height:34px;font-size:10px;}
.bank-account-detected strong{display:block;color:var(--text);font-size:12px;}
.bank-account-detected span{display:block;margin-top:2px;color:var(--text3);font-size:11px;overflow-wrap:anywhere;}
.bank-account-check{display:inline-grid;grid-template-columns:auto minmax(0,max-content);align-items:center;justify-content:start;justify-self:start;gap:8px;width:auto;max-width:100%;font-size:12px;color:var(--text2);text-transform:none;letter-spacing:0;}
.bank-account-check input[type="checkbox"]{width:16px;height:16px;flex:0 0 16px;margin:0;accent-color:var(--accent);cursor:pointer;}
.bank-account-check span{font-weight:var(--fw-semibold);color:var(--text2);}
.bank-account-form-actions{display:flex;gap:8px;flex-wrap:wrap;padding-top:4px;}
@media(max-width:700px){
  .bank-account-item{grid-template-columns:44px minmax(0,1fr);}
  .bank-accounts-invoice-status{align-items:flex-start;flex-wrap:wrap;}
  .bank-accounts-invoice-status-action{width:100%;margin-left:27px;}
  .bank-account-form-head{flex-direction:column;}
  .bank-account-actions{grid-column:1 / -1;}
  .bank-account-actions,.bank-account-form-actions{width:100%;justify-content:stretch;}
  .bank-account-actions .btn,.bank-account-form-actions .btn{flex:1;}
}

/* ══════════════════════════════════════════════════════════════
   Status-Chip (global, DESIGN.md §4.5) — Tone-Scale-basiert.
   Bisher nur dokumentiert; hier erstmals implementiert. Wird von
   neuem Code (.app-status-chip) statt modul-lokaler Badges genutzt.
   ══════════════════════════════════════════════════════════════ */
.app-status-chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 10px;border-radius:11px;font-size:11px;font-weight:var(--fw-semibold);letter-spacing:.01em;white-space:nowrap;border:1px solid transparent;}
.app-status-chip--good{background:var(--tone-good-bg);border-color:var(--tone-good-border);color:var(--tone-good-fg);}
.app-status-chip--warn{background:var(--tone-warn-bg);border-color:var(--tone-warn-border);color:var(--tone-warn-fg-strong);}
.app-status-chip--poor{background:var(--tone-poor-bg);border-color:var(--tone-poor-border);color:var(--tone-poor-fg);}
.app-status-chip--info{background:var(--tone-info-bg);border-color:var(--tone-info-border);color:var(--tone-info-fg);}
button.app-status-chip{cursor:pointer;font:inherit;font-size:11px;font-weight:var(--fw-semibold);transition:filter .15s,box-shadow .15s;}
button.app-status-chip:hover{filter:brightness(1.12);}
button.app-status-chip:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(232,184,75,.45);}

/* ══════════════════════════════════════════════════════════════
   Lernregeln (User Preference Learning) — Einstellungen-Tab
   ══════════════════════════════════════════════════════════════ */
.pref-rule-list{display:flex;flex-direction:column;gap:10px;}
.pref-rule{border:1px solid var(--border);border-radius:8px;background:var(--bg2);padding:14px 16px;}
.pref-rule-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.pref-rule-vendor{font-weight:var(--fw-bold);color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:8px;}
.pref-rule-phrase-tag{flex:none;font-weight:var(--fw-semibold);font-size:10.5px;color:var(--text3);background:var(--card2);border:1px solid var(--border);border-radius:6px;padding:1px 6px;}
.pref-rule-summary{margin-top:6px;font-size:13px;color:var(--text2);}
.pref-rule-example{margin-top:4px;font-size:11.5px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pref-rule-meta{margin-top:5px;font-size:11.5px;color:var(--text3);display:flex;gap:7px;flex-wrap:wrap;align-items:center;}
.pref-rule-controls{margin-top:12px;display:flex;gap:14px;flex-wrap:wrap;}
.pref-rule-field{display:flex;flex-direction:column;gap:5px;font-size:11.5px;color:var(--text3);min-width:160px;flex:1;}
.pref-rule-field>span{font-weight:var(--fw-semibold);color:var(--text2);}
.pref-rule-field select{width:100%;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);padding:8px 10px;font:inherit;}
.pref-rule-actions{margin-top:12px;display:flex;justify-content:flex-end;}
.pref-rule-foot{margin-top:14px;display:flex;justify-content:flex-end;}
.pref-rule-field input[type=text]{width:100%;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);padding:8px 10px;font:inherit;}

/* Manuelles Regel-Hinzufügen (Escape-Hatch für abgelehnte Anbieter) */
.pref-add-rule{margin-top:14px;border:1px solid var(--border);border-radius:8px;background:var(--bg2);}
.pref-add-rule-summary{cursor:pointer;padding:12px 16px;font-weight:var(--fw-semibold);color:var(--text2);font-size:13px;}
.pref-add-rule-body{padding:4px 16px 16px;display:flex;flex-direction:column;gap:12px;}
.pref-add-rule-hint{margin:0;}
.pref-add-rule-row{display:flex;gap:14px;flex-wrap:wrap;}
.pref-add-rule-preview{font-size:11.5px;line-height:1.5;color:var(--text3);min-height:1em;}
.pref-add-rule-preview--ok{color:var(--green);}
.pref-add-rule-preview--warn{color:var(--red);}
.pref-add-rule-actions{display:flex;justify-content:flex-end;}
@media(max-width:700px){
  .pref-rule-controls{flex-direction:column;gap:10px;}
  .pref-rule-field{min-width:0;}
  .pref-add-rule-row{flex-direction:column;gap:10px;}
}

/* ══════════════════════════════════════════════════════════════
   Invoice PDF Download (Phase 1 F7 html2pdf.js)
   ══════════════════════════════════════════════════════════════ */
.inv-pdf-offscreen{position:absolute;left:-99999px;top:0;width:210mm;}

/* Settings Mobile-Helpers.
   Seit 2026-05-22 verwendet die Settings-Seite eine horizontale Top-Nav
   auf allen Viewports (siehe _10-shell.css). Der frühere <details>-Sheet
   und die zugehörigen `.sett-mobile-nav-*` Klassen sind entfallen.
   Hier verbleibt lediglich der Single-Card-Modus für die Status-Reihe,
   wenn pickStatusCards() nur eine Karte zurückgibt. */
.sett-status-grid.sett-status-grid--single{grid-template-columns:minmax(0,1fr);}

/* Sticky-Save-Fix (UX-Audit 2026-05-29 Finding 1).
   Die Unternehmen-Card trägt im Desktop `overflow:hidden` (_10-shell.css) für
   die abgerundeten Ecken — ein `overflow!=visible`-Ancestor neutralisiert
   `position:sticky` aber vollständig, weshalb die Save-Bar bisher mit dem
   Formular wegscrollte („rutscht in den Formflow") statt am Viewport-Boden zu
   kleben. Auf Mobile wird der Clip daher gelöst, damit das sticky-bottom
   greift. Liegt hier statt in _10-shell.css wegen des 800-LOC-Freeze dort;
   Bundle-Reihenfolge _60a > _10 hält die Kaskade (gleiche Spezifität, später
   geladen → gewinnt). */
@media(max-width:767px){
  .sett-company-card{overflow:visible;}
  .sett-form-actions{position:sticky;bottom:0;z-index:5;justify-content:stretch;padding:12px 14px calc(12px + env(safe-area-inset-bottom));margin-top:auto;background:linear-gradient(to top,var(--card) 78%,rgba(var(--surface-rgba-base),0));border-top:1px solid var(--border);}
  .sett-form-actions .btn{width:100%;}
}

/* Touch-Target-Floor (WCAG 2.5.5 / Apple HIG) auf coarse Pointern — app-weiter
   WebKit-Sweep (iPhone 13, ergänzend zu #3721): sett-company-tab 94×30. Die
   Basis in _60c trägt `min-height:30px !important`; deshalb braucht der
   Override (a) `!important` und (b) höhere Spezifität — `.sett-company-tabs
   .sett-company-tab` (0,2,0) schlägt die bare _60c-Regel (0,1,0) unabhängig
   von der Bundle-Reihenfolge. Liegt hier (nicht _60c) wegen 800-LOC-Cap dort. */
@media (pointer: coarse) {
  .sett-company-tabs .sett-company-tab { min-height: 44px !important; }
}

.sett-card-gap-14{margin-bottom:14px;}
.sett-inline-link-btn{display:inline-flex;text-decoration:none;}
.sett-card-title-row{display:flex;align-items:center;gap:8px;}
.mfa-hint-card{margin-bottom:14px;}
.mfa-hint-pill{margin-left:auto;padding:2px 8px;border-radius:10px;background:rgba(var(--surface-rgba-base),.06);color:var(--text3);font-size:10px;font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;}
.ai-toggle:disabled{opacity:.35;cursor:not-allowed;}
.sett-card-stack{display:flex;flex-direction:column;gap:0;}
.sett-input-row{display:flex;gap:6px;}
.sett-input-grow{flex:1;}
.sett-input-full{width:100%;}
.sett-btn-eye{flex-shrink:0;padding:0 10px;font-size:13px;}
.sett-label-note{font-size:10px;color:var(--text3);}
.sett-block-gap-10{margin-top:10px;}
.sett-sbn-gap-8{margin-bottom:8px;}
.s-action-btn--danger{border-color:rgba(248,113,113,.25);}
.sett-action-note{padding:10px 14px 2px;color:var(--text3);font-size:11px;}
.sett-text-btn-link{padding:0;border:none;background:none;color:var(--accent);font:inherit;cursor:pointer;}
.sett-text-btn-link:hover{text-decoration:underline;}
.sett-note-top-10{margin-top:10px;}
.sett-privacy-card{margin-top:14px;}
.sett-copy-sm{font-size:13px;}
.sett-copy-xs{font-size:12.5px;}
.sett-loader-card{padding:20px;color:var(--text3);}
.sett-loader-card--center{text-align:center;}
.sett-loader-card--pad24{padding:24px;}
.sett-activity-card{padding:20px 22px;}
.sett-title-icon{margin-right:4px;vertical-align:-2px;}
.sett-hint-gap-12{margin-bottom:12px;}
.sett-filter-search{max-width:300px;margin-bottom:12px;}
.sett-check-copy{display:block;color:var(--text3);font-size:11px;}
.sett-notif-cats{margin-top:8px;}
.sett-number-input{width:90px;}
.sett-card-disabled{opacity:.6;}
.sett-em-muted{color:var(--text3);}

/* ── Steuerberater-Pakete tab (Phase B activation) ────────────────────── */
/* Tokens — var(--border), var(--text2), var(--text3), var(--red) */
/* are theme-aware (light + dark via _00-tokens.css), so no @media queries  */
/* are needed for dark mode.                                                */
.sett-packages-shell{display:block;margin-top:16px;}
.sett-packages-toolbar{display:flex;justify-content:flex-end;margin-bottom:12px;}
.sett-packages-table{width:100%;border-collapse:collapse;}
.sett-packages-table th,
.sett-packages-table td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left;font-size:14px;}
.sett-packages-table th{color:var(--text3);font-weight:var(--fw-semibold);}
/* Mobile-Fix (2026-07-16, User-Live-Fund @390px): die 5-Spalten-Tabelle
   (~520px) lief rechts aus der Karte und wurde vom html/body-overflow-clip
   hart abgeschnitten — Größe-Spalte angeschnitten, Download-Button
   unerreichbar. Muster wie Mandantenliste F-03: die Tabelle selbst wird
   ≤640px zum Scroll-Container (display:block + anonyme Table-Box innen,
   thead/tbody bleiben spaltensynchron); nowrap hält Datum/Periode/Button
   einzeilig, damit sauber gescrollt statt gequetscht wird. */
@media (max-width: 640px) {
  .sett-packages-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .sett-packages-table th,
  .sett-packages-table td { white-space: nowrap; }
}
.sett-empty-card,
.sett-error-card{padding:24px;border:1px dashed var(--border);border-radius:8px;text-align:center;}
.sett-empty-card h3{margin:0 0 8px;font-size:16px;}
.sett-empty-card p{margin:0 0 16px;color:var(--text2);}
.sett-error-card{border-color:var(--red);}
.sett-error-card p{color:var(--red);margin:0 0 12px;}
.sb-package-create-form{display:grid;gap:12px;max-width:480px;}
.sb-package-create-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:4px;}

.sett-readonly-banner{margin:0 0 16px;background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.24);}
.sett-admin-readonly-note{margin-bottom:14px;}
.sett-admin-readonly-note__copy{font-size:12px;}
.sett-support-card{display:flex;align-items:center;gap:14px;margin-top:32px;padding:18px 20px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg2);}
.sett-support-card__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border:1px solid var(--border);border-radius:999px;background:var(--card);}
.sett-support-card__copy{flex:1;min-width:0;}
.sett-support-card__title{margin-bottom:2px;font-size:12.5px;font-weight:var(--fw-semibold);color:var(--text);}
.sett-support-card__desc{font-size:11px;line-height:1.4;color:var(--text3);}
.sett-support-card__action{font-size:11px;white-space:nowrap;}
.sett-prof-hint{margin-bottom:12px;}
.sett-prof-list{display:flex;flex-direction:column;gap:8px;}
.sett-prof-option{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:transparent;cursor:pointer;}
.sett-prof-option.is-readonly{cursor:default;}
.sett-prof-option.is-selected{background:rgba(240,193,95,.08);}
.sett-prof-checkbox{width:16px;height:16px;flex-shrink:0;accent-color:var(--accent);}
.sett-prof-option__label{font-size:13px;color:var(--text);}
.sett-prof-warning{margin-top:12px;}
.sett-prof-warning__copy{font-size:12px;}
.sett-inline-link{color:var(--accent);}
.sett-prof-actions{margin-top:12px;}
.sett-company-error{margin:14px 20px 0;}
/* `.sbn` setzt `display:flex` und überschreibt damit das HTML-Default für
   `[hidden]` — ohne diesen Override wäre die Fehler-Banner sofort sichtbar. */
.sett-company-error[hidden]{display:none!important;}
.sett-company-readonly-note{margin-top:14px;}
.sett-text-danger{color:var(--red);}
.sett-inline-icon-muted{display:inline-flex;align-items:center;justify-content:center;margin-right:4px;vertical-align:-1px;opacity:.5;}
.sett-inline-icon-muted svg{display:block;}
.sett-list-item{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:3px;}
.sett-list-row{display:flex;align-items:center;gap:8px;}
.sett-list-title{font-weight:500;}
.sett-list-title--flex{flex:1;min-width:0;}
.sett-chip-warn{display:inline-flex;align-items:center;padding:1px 6px;border:1px solid rgba(232,184,75,.2);border-radius:999px;background:rgba(232,184,75,.08);font-size:10px;font-weight:500;line-height:1.4;color:var(--accent);}
.sett-list-actions{display:flex;gap:4px;margin-left:auto;}
.sett-list-action--lead{margin-right:2px;}
.sett-list-hint{font-size:10px;color:var(--text3);}
.sett-empty-state--compact{padding:10px 0;}
/* .sett-template-badge — matches .sett-rec-badge geometry so both card types
   on the Buchungsdaten tab read as the same component. Was briefly removed in
   Opus-Followup-Hotfix (PR #2668 P2) under the assumption the later 24px block
   would win — but that block was also removed elsewhere in this branch, leaving
   the badge with no size at all (display:block, 0 border-radius). Restored as
   the single, canonical definition. */
.sett-template-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--radius-pill) !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.sett-template-badge--expense{
  background: var(--tone-poor-bg) !important;
  border: 1px solid var(--tone-poor-border) !important;
  color: var(--tone-poor-fg) !important;
  box-shadow: 0 0 12px rgba(248, 113, 113, 0.08) !important;
}
.sett-template-badge--income{
  background: var(--tone-good-bg) !important;
  border: 1px solid var(--tone-good-border) !important;
  color: var(--tone-good-fg) !important;
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.08) !important;
}
.sett-template-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.sett-template-details {
  padding-left: 40px !important;
  font-size: 12px !important;
  color: var(--text3) !important;
}
.ai-benefit-sub{margin-top:1px;font-size:10.5px;line-height:1.4;color:var(--text3);}
.sett-ai-blocked-note{margin-top:14px;}
.sett-ai-blocked-copy{font-size:12px;line-height:1.55;}
.app-dialog--sm{max-width:420px;}
.app-dialog--sm-wide{max-width:440px;}
.app-dialog--md{max-width:520px;}
/* --lg: breite, zentrale Dialog-Variante (760px) für lange Lese-Inhalte wie
   Datenschutz-/Datenverarbeitungstexte. Reiht sich in die bestehende
   --sm/--md-Skala ein; keine Einzel-Sonderbreite pro Modal. */
.app-dialog--lg{max-width:760px;}
/* --scroll-body: hält Titel + Aktionsleiste fix sichtbar und scrollt nur den
   Mittelteil (.app-dialog-scroll), sobald der Inhalt höher als der Viewport
   wird. .app-dialog hat overflow:hidden — daher die Flex-Spalte hier. */
.app-dialog--scroll-body{display:flex;flex-direction:column;max-height:min(90vh,760px);}
.app-dialog--scroll-body .app-dialog-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
/* Margins der Scroll-Kinder kommen sonst von `.app-dialog > …` (s.
   _10-shell.css). Im Scroll-Wrapper neu verdrahten, damit die 28px-Gutter
   erhalten bleiben. */
.app-dialog--scroll-body .app-dialog-scroll > .app-dialog-section,
.app-dialog--scroll-body .app-dialog-scroll > .app-dialog-links,
.app-dialog--scroll-body .app-dialog-scroll > .app-dialog-consent{margin-left:28px;margin-right:28px;}
.app-dialog--scroll-body .app-dialog-scroll > .app-dialog-section:first-child{margin-top:14px;}
.app-dialog--scroll-body .app-dialog-actions{flex-shrink:0;}
/* Datenverarbeitung-Bullets luftiger: in der breiteren --lg-Spalte laufen die
   langen Hinweise auf weniger, besser lesbare Zeilen statt als Textwand. */
.app-dialog-infobox--airy{padding:14px 18px;line-height:1.7;}
.app-dialog-infobox--airy li{padding:5px 0;padding-left:20px;}
.app-dialog-infobox--airy li + li{border-top:1px solid var(--border);}
/* Consent-Bestätigung: globales `label{text-transform:uppercase;letter-spacing}`
   wird auf das Consent-Label vererbt und macht den Text zur hohen Versalien-
   Wand. Auf normale Schreibweise zurücksetzen → besser lesbar, weniger hoch. */
.app-dialog-consent,
.app-dialog-consent span{text-transform:none;letter-spacing:normal;}
.sett-dialog-title-spaced{margin-bottom:14px;font-size:16px;}
.sett-dialog-note{margin-bottom:16px;}
.sett-dialog-list{margin:6px 0 0;padding-left:18px;line-height:1.7;}
.sett-add-row{margin-top:8px;}
.sett-card-span-full{grid-column:1/-1;}
.sett-section-kicker{margin:12px 0 6px;font-size:10px;font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--text3);}
.sett-section-kicker--spaced{margin-top:14px;}
.sett-card-title-row--between{justify-content:space-between;}
.sett-card-pill{font-size:10px;font-weight:500;color:var(--text3);}
.sett-inline-cta{font-size:10px;text-transform:none;letter-spacing:0;}
.sett-tight-note{margin-top:-4px;}
.sett-activity-cap-hint{margin-top:12px;padding:8px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg2);font-size:11.5px;line-height:1.5;color:var(--text3);}
.settings-activity-list{display:flex;flex-direction:column;gap:1px;}
.sett-empty-state{padding:24px;font-size:12px;text-align:center;color:var(--text3);}
.sett-page-info{margin-top:8px;text-align:center;}
.sett-danger-title{color:var(--red);}
.sett-danger-card{padding:20px 22px;}
.sett-danger-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.sett-danger-head__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;border-radius:8px;background:rgba(248,113,113,.1);}
.sett-danger-head__title{font-size:13px;font-weight:var(--fw-semibold);color:var(--red);}
.sett-danger-head__copy{font-size:11px;color:var(--text3);}
.sett-danger-lead{margin-bottom:10px;font-size:12px;font-weight:var(--fw-semibold);color:var(--text2);}
.sett-danger-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin-bottom:14px;font-size:11.5px;color:var(--text3);}
.sett-danger-grid__item{display:flex;align-items:center;gap:6px;}
.sett-danger-backup{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg2);font-size:12px;line-height:1.5;color:var(--text2);}
.sett-danger-backup__icon{flex-shrink:0;}
.sett-danger-actions{display:flex;justify-content:flex-end;}
.sett-danger-reset-btn{padding:8px 18px;font-size:12px;}
.sett-dialog-title-danger{color:var(--red);}
.sett-dialog-stack{margin-top:14px;}
.sett-dialog-input-compact{margin-top:6px;}
.sett-dialog-field{margin-top:0;margin-bottom:14px;}
.sett-dialog-field[hidden]{display:none!important;}
.sett-dialog-field-label{display:block;margin-bottom:5px;font-size:11px;font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--text3);}
.sett-dialog-field-label--body{margin-bottom:6px;font-size:12.5px;font-weight:var(--fw-regular);letter-spacing:0;text-transform:none;color:var(--text2);}
.sett-dialog-field-label--spaced{margin-top:10px;}
.sett-dialog-code{font-family:var(--mono);color:var(--red);}
.sett-input-mono{font-family:var(--mono)!important;letter-spacing:.05em;}
.sett-api-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;font-size:12px;}
.sett-api-status__label{color:var(--text2);}
.sett-api-status__masked{padding:1px 6px;border-radius:3px;background:var(--bg);font-size:10px;opacity:.7;}
.sett-api-copy{font-size:11px;line-height:1.6;color:var(--text3);}
.sett-inline-code{padding:1px 5px;border-radius:3px;background:var(--bg);}
.sett-api-key-form{display:flex;flex-direction:column;gap:7px;}
.sett-api-key-row{display:flex;gap:6px;}
.sett-api-key-input-wrap{position:relative;flex:1;}
.sett-api-key-input{width:100%;padding:10px 36px 10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg);font-family:var(--mono);font-size:11.5px;letter-spacing:.5px;color:var(--text);}
.sett-api-key-eye{position:absolute;top:50%;right:6px;padding:2px 4px;border:none;background:none;color:var(--text3);cursor:pointer;transform:translateY(-50%);}
.sett-api-key-save{padding:0 14px;white-space:nowrap;}
.sett-api-key-test{flex:1;}
.sett-api-key-meta{font-size:10.5px;color:var(--text3);}
.sett-sb-grid{grid-template-columns:1fr;}
/* Content-Body der Steuerberater-Card (renderShell): die Card selbst hat
   padding:0 (sett-company-card), daher polstert der Body den Inhalt analog
   .sett-form-section, damit Zugriff/Pakete bündig unter Toggle+Header sitzen. */
.sett-company-body{padding:18px 20px;}
@media(max-width:767px){.sett-company-body{padding:16px 14px;}}
.sett-sb-upgrade-card{padding:28px 24px;}
.sett-sb-upgrade-layout{display:flex;align-items:flex-start;gap:16px;}
.sett-sb-upgrade-icon{flex-shrink:0;margin-top:2px;color:var(--text3);}
.sett-sb-upgrade-icon svg{opacity:.4;}
.sett-sb-upgrade-copy{flex:1;}
.sett-sb-upgrade-title{margin-bottom:4px;font-size:14px;font-weight:var(--fw-semibold);color:var(--text);}
.sett-sb-upgrade-desc{margin-bottom:12px;font-size:12px;line-height:1.65;color:var(--text3);}
.sett-sb-upgrade-list{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;font-size:12px;color:var(--text2);}
.sett-sb-upgrade-item{display:flex;align-items:center;gap:8px;}
.sett-sb-upgrade-cta{padding:8px 20px;font-size:12px;text-decoration:none;}
.sett-sb-intro{margin-bottom:14px;}
.sett-sb-create-btn{margin-bottom:16px;}
.sett-sb-loader{font-size:12px;color:var(--text3);}
.sett-sb-empty{padding:8px 0;color:var(--text3);}
.sett-sb-section-title{margin-bottom:6px;font-weight:var(--fw-semibold);color:var(--text);}
.sett-sb-expiry--expired,.sett-sb-expiry--soon{color:var(--red);}
.sett-sb-share-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;padding:8px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg2);}
.sett-sb-share-main{min-width:0;}
.sett-sb-share-title{display:flex;align-items:center;flex-wrap:wrap;gap:6px;}
.sett-sb-share-label{font-weight:var(--fw-semibold);color:var(--text);}
.sett-sb-share-email,.sett-sb-share-meta{margin-top:2px;font-size:10px;color:var(--text3);}
.sett-sb-revoked{margin-top:10px;}
.sett-sb-revoked-summary{font-size:11px;color:var(--text3);cursor:pointer;}
.sett-sb-revoked-item{padding:4px 10px;font-size:11px;color:var(--text3);opacity:.5;}
.sett-dialog-copy{margin:8px 0 14px;font-size:13px;line-height:1.6;color:var(--text2);}
.sett-dialog-copy--danger{color:var(--red);}
.sett-dialog-error-box{margin-bottom:14px;padding:8px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg);font-size:11px;font-family:var(--mono);color:var(--text3);}
.sett-dialog-summary{margin-bottom:14px;padding:10px 14px;border:1px solid var(--border);border-radius:6px;background:var(--bg);font-size:12px;}
.sett-dialog-summary-label{margin-bottom:4px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);}
.sett-dialog-summary-value{font-family:var(--mono);color:var(--text);}

@media(max-width:700px){
  .sett-support-card{align-items:flex-start;flex-wrap:wrap;}
  .sett-support-card__action{width:100%;}
  .sett-danger-grid{grid-template-columns:1fr;}
  .sett-api-key-row{flex-direction:column;}
  .sett-api-key-row .btn{width:100%;}
  .sett-sb-upgrade-layout,.sett-sb-share-row{flex-direction:column;align-items:stretch;}
}

.sett-sidebar-container {
  position: relative;
  width: 100%;
  min-width: 0;
}

/* Dynamic Left & Right Fade Gradients on Desktop */
.sett-sidebar-fade-left,
.sett-sidebar-fade-right {
  position: absolute;
  top: 6px;
  bottom: 10px;
  width: 48px;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.sett-sidebar-fade-left {
  left: 0;
  background: linear-gradient(to right, var(--bg) 20%, transparent);
}

.sett-sidebar-fade-right {
  right: 0;
  background: linear-gradient(to left, var(--bg) 20%, transparent);
}

.sett-sidebar-container.has-scroll-left .sett-sidebar-fade-left {
  opacity: 1;
}

.sett-sidebar-container.has-scroll-right .sett-sidebar-fade-right {
  opacity: 1;
}

/* Scroll Arrow Buttons */
.sett-sidebar-btn {
  position: absolute;
  top: calc(50% - 2px);
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s, background var(--tr-fast), border-color var(--tr-fast), color var(--tr-fast);
}

.sett-sidebar-btn svg {
  width: 14px;
  height: 14px;
}

.sett-sidebar-btn:hover {
  color: var(--text);
  background: var(--bg3);
  border-color: var(--border2);
}

.sett-sidebar-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(232,184,75,0.5);
}

.sett-sidebar-btn--left {
  left: 8px;
}

.sett-sidebar-btn--right {
  right: 8px;
}

@media(min-width: 768px) {
  .sett-sidebar {
    position: static !important;
  }
  /* Only show arrow buttons on desktop if overflow matches */
  .sett-sidebar-container.has-scroll-left .sett-sidebar-btn--left {
    opacity: 1;
    visibility: visible;
  }
  .sett-sidebar-container.has-scroll-right .sett-sidebar-btn--right {
    opacity: 1;
    visibility: visible;
  }
  /* On desktop, hide the static right fade ::after because our dynamic one replaces it */
  .sett-sidebar::after {
    display: none !important;
  }
}

/* Segmented Control / Pill Group for Company Subtabs */
.sett-company-tabs {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 16px 20px 10px !important;
  padding: 4px !important;
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-pill, 9999px) !important;
  overflow: hidden !important;
  max-width: fit-content !important;
}

.sett-company-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 30px !important;
  padding: 5px 14px !important;
  background: transparent !important;
  border: none !important;
  border-radius: var(--radius-pill, 9999px) !important;
  color: var(--text3) !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: var(--fw-semibold) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  position: relative !important;
}

.sett-company-tab:hover {
  color: var(--text2) !important;
  background: rgba(var(--surface-rgba-base), 0.04) !important;
}

.sett-company-tab.is-active {
  color: var(--accent) !important;
  background: rgba(232, 184, 75, 0.12) !important;
  border: 1px solid rgba(232, 184, 75, 0.28) !important;
  box-shadow: inset 0 0 0 1px rgba(232, 184, 75, 0.08) !important;
}

.sett-company-tab.is-active::after {
  display: none !important;
}

.sett-company-tab:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(232, 184, 75, 0.5) !important;
}

.sett-company-tab-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 14px !important;
  height: 14px !important;
  opacity: 0.65 !important;
  transition: opacity var(--tr-fast), color var(--tr-fast);
}

.sett-company-tab-icon svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}

.sett-company-tab:hover .sett-company-tab-icon {
  opacity: 0.9 !important;
}

.sett-company-tab.is-active .sett-company-tab-icon {
  opacity: 1 !important;
  color: var(--accent) !important;
}.sett-backup-intro { margin-bottom: 18px !important; }
.ex-row-restore { border-color: rgba(232, 184, 75, 0.28) !important; background: rgba(232, 184, 75, 0.04) !important; }
.ex-row-restore:hover { border-color: rgba(232, 184, 75, 0.55) !important; background: rgba(232, 184, 75, 0.08) !important; }
.ex-row-restore .ex-row-ico { color: var(--accent) !important; border-color: rgba(232, 184, 75, 0.2) !important; }
.sett-export-callout { margin-top: 18px !important; margin-bottom: 0 !important; align-items: center !important; }
.sett-export-callout-body { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; gap: 12px !important; }
@media(max-width: 600px) { .sett-export-callout-body { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; } }
.sett-card-chevron { display: inline-flex !important; align-items: center !important; justify-content: center !important; color: var(--text3) !important; margin-left: 6px !important; flex-shrink: 0 !important; transition: transform var(--tr-fast), color var(--tr-fast) !important; }
.ex-row:hover .sett-card-chevron { color: var(--accent) !important; transform: translateX(2px) !important; }

/* ── Modernized Buchungsdaten Styling ── */
.sett-tag-list {
  gap: var(--space-sm) !important;
}

.sett-tag-item {
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-pill) !important;
  padding: 5px 12px !important;
  font-weight: var(--fw-semibold) !important;
  font-size: 11.5px !important;
  color: var(--text2) !important;
  transition: border-color var(--tr-fast), background-color var(--tr-fast), color var(--tr-fast), transform var(--tr-fast) !important;
  box-shadow: var(--shadow-sm);
}

.sett-tag-item:hover {
  border-color: var(--accent) !important;
  background: var(--card) !important;
  color: var(--text) !important;
  transform: translateY(-1px);
}

.sett-tag-item__del {
  background: transparent !important;
  border: none !important;
  color: var(--text3) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  padding: 0 2px !important;
  cursor: pointer !important;
  transition: color var(--tr-fast), transform var(--tr-fast) !important;
}

.sett-tag-item__del:hover {
  color: var(--red) !important;
  transform: scale(1.2);
}

.sett-tag-item--private {
  border-color: var(--tone-warn-border) !important;
  background: var(--tone-warn-bg) !important;
  color: var(--tone-warn-text) !important;
}

.sett-tag-item--private:hover {
  border-color: var(--accent) !important;
  background: rgba(232, 184, 75, 0.12) !important;
}

/* Modern standard cost category grid */
.sett-cat-grid {
  gap: var(--space-sm) !important;
}

.sett-cat-chip {
  font-size: 11px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text2) !important;
  transition: all var(--tr-fast) !important;
  cursor: default !important;
  box-shadow: var(--shadow-sm);
}

.sett-cat-chip:hover {
  border-color: var(--accent) !important;
  color: var(--text) !important;
  background: var(--bg3) !important;
}

.sett-cat-chip--special {
  border-color: var(--tone-warn-border) !important;
  background: var(--tone-warn-bg) !important;
  color: var(--tone-warn-text) !important;
}

.sett-cat-chip--special:hover {
  border-color: var(--accent) !important;
  background: rgba(232, 184, 75, 0.12) !important;
}

/* Custom categories list */
.sett-lm {
  gap: var(--space-sm) !important;
  max-height: 260px !important;
}

.sett-li {
  padding: 10px 14px !important;
  background: var(--bg3) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  transition: all var(--tr-fast) !important;
}

.sett-li:hover {
  border-color: var(--border2) !important;
  background: var(--card) !important;
}

.sett-list-action {
  background: transparent !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text3) !important;
  cursor: pointer !important;
  transition: all var(--tr-fast) !important;
  padding: 0 !important;
}

.sett-list-action:hover {
  background: rgba(var(--surface-rgba-base), 0.06) !important;
  color: var(--text) !important;
}

.sett-list-action[data-action*="delete"]:hover, .sett-list-action--lead + .sett-list-actions .lid:hover {
  background: rgba(248, 113, 113, 0.12) !important;
  color: var(--red) !important;
}

/* Recurring Bookings */
.sett-rec-item { display: flex !important; flex-direction: column !important; padding: 12px 16px !important; background: rgba(30, 41, 59, 0.25) !important; border: 1px solid var(--border) !important; border-left: 3px solid var(--accent) !important; border-radius: var(--radius-md) !important; gap: var(--space-sm) !important; transition: all var(--tr-fast) !important; box-shadow: var(--shadow-sm) !important; }
body.light .sett-rec-item { background: rgba(241, 245, 249, 0.45) !important; }
.sett-rec-item:hover { border-color: var(--accent) !important; border-left-color: var(--accent3) !important; background: rgba(30, 41, 59, 0.4) !important; box-shadow: 0 4px 16px rgba(232, 184, 75, 0.06) !important; }
body.light .sett-rec-item:hover { background: rgba(226, 232, 240, 0.75) !important; }
.sett-rec-item--inactive { border-left-color: var(--text3) !important; opacity: 0.65 !important; }
.sett-rec-item--inactive:hover { border-color: var(--border2) !important; border-left-color: var(--text2) !important; background: rgba(30, 41, 59, 0.25) !important; box-shadow: none !important; }
.sett-rec-row { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: var(--space-md) !important; width: 100% !important; }
.sett-rec-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; border-radius: var(--radius-pill) !important; font-size: 18px !important; font-weight: 800 !important; flex-shrink: 0 !important; line-height: 1 !important; padding: 0 !important; }
.sett-rec-badge.dash-recurring-item__type--expense { background: var(--tone-poor-bg) !important; border: 1px solid var(--tone-poor-border) !important; color: var(--tone-poor-fg) !important; box-shadow: 0 0 12px rgba(248, 113, 113, 0.08) !important; }
.sett-rec-badge.dash-recurring-item__type--income { background: var(--tone-good-bg) !important; border: 1px solid var(--tone-good-border) !important; color: var(--tone-good-fg) !important; box-shadow: 0 0 12px rgba(52, 211, 153, 0.08) !important; }
.sett-rec-title { font-size: 14.5px !important; font-weight: var(--fw-bold) !important; color: var(--text) !important; flex: 1 !important; min-width: 0 !important; }

.sett-rec-details {
  font-size: 12px !important;
  color: var(--text3) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--space-sm) !important;
  flex-wrap: wrap !important;
  padding-left: 40px !important;
}

.sett-rec-value {
  font-family: var(--font-mono) !important;
  font-weight: var(--fw-semibold) !important;
}

.dash-recurring-item__type--expense + .sett-rec-value, .sett-rec-value.dash-recurring-value {
  color: var(--red) !important;
}

.dash-recurring-item__type--income + .sett-rec-value {
  color: var(--green) !important;
}

.sett-rec-interval-badge {
  background: rgba(96, 165, 250, 0.08) !important;
  color: var(--blue) !important;
  border: 1px solid rgba(96, 165, 250, 0.18) !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: var(--fw-semibold) !important;
}

.sett-rec-inactive {
  color: var(--text3) !important;
  font-style: italic !important;
}

/* Templates */
.sett-template-item {
  padding: 12px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-sm) !important;
}

.sett-template-header {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-sm) !important;
  width: 100% !important;
}

.sett-template-details {
  padding-left: 36px !important;
  font-size: var(--fs-sm) !important;
  color: var(--text3) !important;
}

/* Add-Row controls in settings cards */
.sett-add-row {
  display: flex !important;
  gap: var(--space-sm) !important;
  margin-top: var(--space-md) !important;
  max-width: 380px !important;
}

.sett-add-row input {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: 8px 12px !important;
  min-height: 38px !important;
  transition: all var(--tr-fast) !important;
  flex: 1 !important;
}

.sett-add-row input:focus {
  border-color: rgba(232, 184, 75, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(232, 184, 75, 0.12) !important;
}

.sett-add-row button.btn {
  min-width: 38px !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: 0 !important;
  font-size: var(--fs-lg) !important;
  cursor: pointer !important;
  transition: background-color var(--tr-fast), transform var(--tr-fast) !important;
  box-shadow: var(--shadow-sm) !important;
}

.sett-add-row button.btn:hover {
  background: var(--accent3) !important;
  transform: translateY(-1px);
}

.sett-add-row button.btn:active {
  transform: translateY(0);
}

/* ── SaaS Settings Cockpit Styling ── */
/* ── SaaS Settings Cockpit Styling ── */
/* Kopf-Box des Buchungsdaten-Studios an die Unternehmen-Card angeglichen
   (User-Request 2026-06-06): weiße Card statt getöntem Gradient, gleicher
   Radius/Rahmen/Abstand wie .card + .sett-card-head; Statistik-Kacheln
   bleiben darunter erhalten. Werte spiegeln .card (_10-shell.css) und
   .sett-card-head/.sett-card-title (_10-shell-settings.css). */
.sett-cockpit-hero { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 16px; }
.sett-cockpit-hero__title { font-size: 17px; font-weight: var(--fw-bold); color: var(--text); letter-spacing: 0; margin: 0 0 3px; }
.sett-cockpit-hero__desc { font-size: 12px !important; line-height: 1.45 !important; color: var(--text3); margin: 0; }
.sett-cockpit-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; width: 100%; }
.sett-cockpit-stat-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.sett-cockpit-stat-num { font-family: var(--mono); font-size: 21px !important; font-weight: var(--fw-bold); color: var(--accent); }
.sett-cockpit-stat-label { font-size: 11px !important; font-weight: var(--fw-semibold); color: var(--text3); text-transform: uppercase; letter-spacing: .05em; }
.sett-bento-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 20px; }
@media (max-width: 900px) { .sett-bento-grid { grid-template-columns: 1fr; } }
.sett-bento-card { display: flex; flex-direction: column; min-height: 250px; }
.sett-card-title-row { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px; }
.sett-card-title-copy { display: flex; align-items: center; gap: 5px; }
.sett-filter-input-wrap { position: relative; width: 110px; transition: width var(--tr-fast); }
.sett-filter-input-wrap:focus-within { width: 140px; }
.sett-filter-input { width: 100%; height: 24px !important; padding: 2px 8px 2px 22px !important; font-size: 10px !important; background: var(--bg) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-pill) !important; color: var(--text) !important; transition: all var(--tr-fast) !important; }
.sett-filter-input-wrap::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="%238f98b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>'); background-size: contain; background-repeat: no-repeat; opacity: .5; }
.sett-std-groups { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; margin-bottom: 16px !important; }
.sett-std-group-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.sett-std-group-title { font-size: 11px !important; font-weight: var(--fw-bold); color: var(--text); text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.sett-std-group-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.sett-cat-chip-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px !important; padding: 3px 7px !important; background: var(--bg) !important; border: 1px solid var(--border) !important; border-radius: 4px !important; color: var(--text2) !important; transition: all var(--tr-fast) !important; }
.sett-cat-chip-tag:hover { border-color: var(--accent) !important; background: var(--card) !important; color: var(--text) !important; }
.sett-cat-chip-tag__code { font-family: var(--mono); font-size: 9.5px !important; font-weight: var(--fw-semibold); color: var(--accent); background: rgba(232,184,75,.06); border: 1px solid rgba(232,184,75,.14); padding: 0 2px !important; border-radius: 2px !important; margin-left: 2px; }
.sett-cat-chip-tag__tax { font-size: 9.5px !important; color: var(--text3); margin-left: 1px; }
/* 2026-05-27: zweispaltig (240px minmax) brach Card-Titel wie "Parkgebühr
   Geschäftstermin" über 3 Zeilen mit mid-word break. Einspaltig =
   konsistente Card-Höhe + Titel passen auf 1-2 Zeilen ohne Bruch. */
.sett-glass-lm { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 14px; }
.sett-glass-item { background: rgba(var(--surface-rgba-base),.02) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; padding: 10px 12px !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: all var(--tr-fast) !important; display: flex !important; flex-direction: column !important; gap: 6px !important; }
.sett-glass-item:hover { border-color: var(--border2) !important; background: var(--card) !important; }
.sett-glass-row { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px; }
/* overflow-wrap: normal (default) statt break-word, damit lange Wörter nicht
   mitten gebrochen werden (vorher: "Geschäftste / rmin"). Bei sehr engen
   Containern überlaufen sie minimal — das ist nicht hübsch, aber das
   einspaltige .sett-glass-lm-Layout darüber sorgt fast immer für genug Platz. */
.sett-glass-title { font-size: 14px !important; font-weight: var(--fw-bold) !important; color: var(--text) !important; flex: 1 1 auto !important; min-width: 0 !important; line-height: 1.35 !important; overflow-wrap: normal !important; word-break: normal !important; }
/* Single-column layout (.sett-glass-lm: 1fr) makes 2-line titles rare, so we
   center the badge with the title vertically. Optical centering of the arrow
   glyph happens inside the badge via translateY (see below). */
.sett-glass-meta { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; flex: 1 1 auto; min-width: 0; }
.sett-glass-subtitle { font-size: 12px !important; color: var(--text3) !important; }
/* Both badges render an SVG arrow (14×14 in a 16-viewBox), centered by the
   flex parent. SVG strokes are geometrically symmetric — no per-glyph optical
   nudge needed, unlike the Unicode ↗/↙ they replaced. */
.sett-rec-badge svg,
.sett-template-badge svg { display: block; }
/* Action column (edit/delete/dup icons) sits centered like badge + title. */
.sett-list-actions { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.sett-twin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 20px !important; }
#sett-item-templates-mount { margin-top: 20px !important; }
@media (max-width: 900px) { .sett-twin-grid { grid-template-columns: 1fr; } }
.sett-notice-bar { background: rgba(232,184,75,.03); border: 1px solid rgba(232,184,75,.14); border-radius: var(--radius-md); padding: 8px 12px; display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text2); margin-bottom: 16px; }
.sett-notice-bar svg { color: var(--accent); flex-shrink: 0; }

.sett-bento-card .s-hint, .sett-card-span-full .s-hint, .sett-twin-grid .s-hint {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--text3) !important;
}

.sett-section-kicker {
  font-size: 11.5px !important;
}

.sett-add-row input {
  font-size: 13.5px !important;
}

.sett-catalog-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;}
.sett-catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.sett-catalog-item{padding:16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg2);transition:all .2s;display:flex;flex-direction:column;gap:8px;}
.sett-catalog-item:hover{border-color:var(--accent);transform:translateY(-1px);}
.sett-catalog-item--inactive{opacity:.6;}
.sett-catalog-item__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.sett-catalog-item__title{font-size:13.5px;font-weight:var(--fw-semibold);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sett-catalog-item__desc{font-size:12px;line-height:1.45;color:var(--text2);margin:4px 0;}
.sett-catalog-item__footer{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;margin-top:auto;padding-top:10px;border-top:1px dashed var(--border);}
.sett-catalog-item__meta{color:var(--text3);}
.sett-chip-warn--inactive{background:rgba(239,68,68,.08)!important;border-color:rgba(239,68,68,.2)!important;color:var(--red)!important;}
.sett-dialog-grid--two-cols{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;margin-bottom:14px!important;}
.sett-dialog-active-field{display:flex!important;align-items:center!important;gap:8px!important;padding-top:24px!important;}
.sett-dialog-field--mb0{margin-bottom:0!important;}
.sett-dialog-checkbox{width:16px!important;height:16px!important;}
.sett-dialog-active-label{font-size:13px!important;font-weight:normal!important;cursor:pointer!important;user-select:none!important;}

/* ── Vorlage Edit Modal: type toggle (Einnahme / Ausgabe) + hint ──────── */
.sett-vorlage-type-row{display:flex;gap:8px;}
.sett-vorlage-type-toggle{flex:1;justify-content:center;padding:9px 14px;background:rgba(var(--surface-rgba-base),.04);border:1px solid rgba(var(--surface-rgba-base),.12);color:var(--text2);font-weight:var(--fw-medium);transition:background var(--tr-fast),color var(--tr-fast),border-color var(--tr-fast);}
.sett-vorlage-type-toggle:hover{background:rgba(var(--surface-rgba-base),.08);color:var(--text);}
.sett-vorlage-type-toggle.is-selected{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.sett-vorlage-type-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.sett-vorlage-hint{min-height:18px;margin-top:4px;font-size:12px;color:var(--text3);}
.sett-vorlage-hint--error{color:var(--red);}

.team-settings-grid{grid-template-columns:1fr;}
.team-settings-upsell{padding:28px 24px;grid-column:1/-1;}
.team-settings-upsell-layout{display:flex;align-items:flex-start;gap:16px;}
.team-settings-upsell-icon-wrap{flex-shrink:0;margin-top:2px;}
.team-settings-upsell-icon{opacity:.4;}
.team-settings-upsell-copy{flex:1;}
.team-settings-upsell-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:4px;}
.team-settings-upsell-text{font-size:12px;color:var(--text3);line-height:1.65;margin-bottom:12px;}
.team-settings-upsell-list{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;font-size:12px;color:var(--text2);}
.team-settings-upsell-item{display:flex;align-items:center;gap:8px;}
.team-settings-upsell-item svg{flex-shrink:0;}
.team-settings-upsell-cta{font-size:12px;padding:8px 20px;text-decoration:none;}
.team-settings-subtitle{margin-bottom:14px;}
.team-settings-invite-btn{margin-bottom:16px;}
.team-settings-invite-btn--locked{opacity:.4;cursor:not-allowed;}
.team-settings-members{font-size:12px;color:var(--text3);}
.team-settings-seat-summary{font-size:11px;color:var(--text3);margin-bottom:10px;}
.team-settings-section-title{font-weight:600;color:var(--text);margin-bottom:6px;}
.team-settings-section-title--spaced{margin-top:12px;}
.team-settings-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.team-settings-role-select{font-size:10px;padding:4px 8px;background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text2);font-family:inherit;cursor:pointer;}
.team-settings-role-select:focus{outline:none;border-color:var(--accent);}
.team-settings-actions .btn{flex-shrink:0;}
.team-settings-member-card{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:6px;margin-bottom:6px;gap:12px;flex-wrap:wrap;}
.team-settings-invite-card{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:6px;margin-bottom:6px;gap:12px;flex-wrap:wrap;}
.team-settings-member-main{flex:1;min-width:180px;}
.team-settings-member-name{font-weight:600;color:var(--text);}
.team-settings-self-tag{font-size:10px;color:var(--accent);}
.team-settings-member-meta{font-size:11px;color:var(--text3);margin-top:2px;}
.team-settings-invite-card{border-style:dashed;opacity:.7;}
.team-settings-invite-email{font-size:11px;color:var(--text2);}
.team-settings-invite-meta{font-size:10px;color:var(--text3);margin-top:2px;}
.team-role-dialog{max-width:400px;}
.team-role-dialog-body{margin-bottom:14px;}
.team-role-options{display:flex;flex-direction:column;gap:8px;}
.team-role-option{text-align:left;padding:10px 14px;}
.team-role-option-copy{font-size:11px;color:var(--text3);margin-top:2px;}
.team-role-dialog-actions{text-align:right;margin-top:12px;}

@media(max-width:640px){
  .team-settings-upsell-layout{flex-direction:column;}
  .team-settings-actions{width:100%;}
  .team-settings-role-select{flex:1;min-width:140px;}
  .team-settings-member-card,.team-settings-invite-card{align-items:flex-start;}
}

.vdlg-shell{
  position:fixed;
  inset:0;
  z-index:10001;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}

.vdlg-shell--scroll{overflow-y:auto;}

.vdlg-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}

.vdlg-card{
  position:relative;
  width:100%;
  max-width:420px;
  padding:22px 24px;
  background:var(--card2);
  border:1px solid var(--border2);
  border-radius:var(--radius);
  box-shadow:0 8px 40px rgba(0,0,0,.7);
  animation:si .15s ease;
}

.vdlg-card--wide{max-width:480px;}

.vdlg-title,
.ve-title{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:15px;
  font-weight:var(--fw-bold);
  color:var(--text);
}

.vdlg-save-icon,
.ve-title-icon{
  flex:0 0 auto;
  transform:translateY(-2px);
}

.vdlg-subtitle{
  margin-bottom:16px;
  font-size:11.5px;
  line-height:1.5;
  color:var(--text3);
}

.vdlg-label{
  display:block;
  margin-bottom:5px;
  font-size:10px;
  font-weight:var(--fw-semibold);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text3);
}

.vdlg-input{
  width:100%;
  margin-bottom:2px;
}

.vdlg-hint{
  min-height:16px;
  margin-bottom:12px;
  font-size:11px;
  line-height:1.4;
  color:var(--text3);
}

.vdlg-hint--warn{color:var(--accent);}
.vdlg-hint--error{color:var(--red);}

.vdlg-box{
  margin-bottom:14px;
  padding:11px 13px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius2);
}

.vdlg-box-title{
  margin-bottom:8px;
  font-size:10px;
  font-weight:var(--fw-semibold);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text3);
}

.vdlg-chip-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px;
  margin-bottom:10px;
}

.vdlg-chip{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:2px 8px;
  border:1px solid transparent;
  border-radius:3px;
  font-size:10.5px;
  color:var(--text2);
}

.vdlg-chip--type{
  padding:1px 7px;
  font-weight:var(--fw-bold);
}

.vdlg-chip--expense{
  background:rgba(248,113,113,.15);
  color:var(--red);
}

.vdlg-chip--income{
  background:rgba(52,211,153,.15);
  color:var(--green);
}

.vdlg-chip--blue{
  background:rgba(96,165,250,.08);
  border-color:rgba(96,165,250,.2);
}

.vdlg-chip--purple{
  background:rgba(167,139,250,.08);
  border-color:rgba(167,139,250,.2);
}

.vdlg-chip--neutral{
  background:rgba(90,98,133,.08);
  border-color:rgba(90,98,133,.2);
}

.vdlg-options{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding-top:9px;
  border-top:1px solid var(--border);
}

.vdlg-check{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 0;
  font-size:11.5px;
  cursor:pointer;
}

.vdlg-check-input{
  width:14px;
  height:14px;
  flex:0 0 auto;
}

.vdlg-check-mono{font-family:var(--mono);}
.vdlg-check-note{color:var(--text3);}

.vdlg-box-note{
  margin-top:9px;
  padding-top:8px;
  border-top:1px solid var(--border);
  font-size:10.5px;
  color:var(--text3);
}

.vdlg-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

.vdlg-save-btn--overwrite{
  background:rgba(232,184,75,.18);
  color:var(--accent);
  border:1px solid rgba(232,184,75,.4);
}

.vdlg-save-btn--overwrite:hover{
  background:rgba(232,184,75,.24);
  color:var(--accent3);
}

.ve-card{padding-bottom:20px;}

.ve-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}

.ve-close{
  padding:0 4px;
  border:none;
  background:none;
  color:var(--text3);
  font-size:18px;
  cursor:pointer;
}

.ve-close:hover{color:var(--text);}

.ve-section{margin-bottom:12px;}

.ve-type-row{
  display:flex;
  gap:6px;
}

.ve-type-toggle{
  flex:1;
  justify-content:center;
  border:1px solid var(--border);
}

.ve-type-toggle--expense.is-selected{
  background:rgba(248,113,113,.15);
  border-color:rgba(248,113,113,.4);
  color:var(--red);
}

.ve-type-toggle--income.is-selected{
  background:rgba(52,211,153,.15);
  border-color:rgba(52,211,153,.4);
  color:var(--green);
}

.ve-field{margin-bottom:10px;}
.ve-field--last{margin-bottom:16px;}
.ve-field[hidden]{display:none !important;}

.ve-hint{
  min-height:14px;
  margin-bottom:10px;
  font-size:11px;
  color:transparent;
}

.ve-hint--error{color:var(--red);}

@media(max-width:540px){
  .vdlg-shell{
    align-items:flex-start;
    padding:12px;
  }

  .vdlg-card{
    padding:18px;
    margin-block:16px;
  }

  .vdlg-actions{
    flex-direction:column-reverse;
  }

  .vdlg-actions .btn{
    width:100%;
    justify-content:center;
  }

  .ve-type-row{flex-direction:column;}
}

.pref-settings-card{padding:20px 22px;}
.pref-settings-title{display:flex;align-items:center;}
.pref-settings-title-label{margin-left:6px;}
.pref-settings-hint{margin-bottom:14px;}
.pref-settings-state{padding:24px;text-align:center;color:var(--text3);font-size:12px;}
.pref-settings-empty{padding:22px 16px;}
.pref-settings-empty-icon{margin-bottom:6px;}
.pref-settings-empty-title{margin-bottom:4px;font-weight:var(--fw-semibold);color:var(--text);}
.pref-settings-empty-copy{max-width:440px;margin:0 auto;font-size:12px;line-height:1.5;color:var(--text3);}

/* ============================================================
   _60g-stripe-connect.css — Online-Zahlungen (Stripe Connect) settings tab
   Rendered by public/js/stripe-connect-settings.js.
   Tokens only (no Stripe-purple surfaces); primary button stays --accent.
   ============================================================ */

.stripe-connect-card .card-body { padding: 18px 20px; }

.stripe-connect-intro {
  color: var(--text2);
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 16px;
}

.stripe-connect-status { display: block; }

/* ── Loading (state 5) ─────────────────────────────────────── */
.stripe-connect-loading {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text2);
  font-size: 12.5px;
  padding: 6px 0;
}

.stripe-connect-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  animation: stripe-connect-spin 0.7s linear infinite;
  flex: 0 0 auto;
}

@keyframes stripe-connect-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .stripe-connect-spinner { animation: none; }
}

/* ── Shared state container ─────────────────────────────────── */
.stripe-connect-state {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.stripe-connect-subline,
.stripe-connect-text {
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}

.stripe-connect-subline { color: var(--text2); }

/* ── Status badge (re-uses .sbn green/yellow) ──────────────── */
.stripe-connect-badge {
  align-self: flex-start;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 6px 11px;
  font-weight: 600;
}

.stripe-connect-badge-icon {
  display: inline-flex;
  align-items: center;
}

.stripe-connect-badge.green { color: var(--green); }
.stripe-connect-badge.green .stripe-connect-badge-icon { color: var(--green); }

/* ── Benefits list (state 1) ───────────────────────────────── */
.stripe-connect-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stripe-connect-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--text2);
  font-size: 12.5px;
  line-height: 1.45;
}

/* Outline-Check statt dekorativem Icon-Circle (DESIGN.md: keine Icon-Circles
   als Standardmuster). Das Häkchen trägt hier funktionale Bedeutung: „das
   bekommst du mit Online-Zahlungen". */
.stripe-connect-benefit-icon {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--accent);
}

/* ── Detail rows (state 3) ─────────────────────────────────── */
.stripe-connect-details {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 4px 0;
  border-top: 1px solid var(--border);
}

.stripe-connect-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.stripe-connect-detail-key {
  color: var(--text2);
  font-size: 12px;
  margin: 0;
}

.stripe-connect-detail-val {
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  margin: 0;
  text-align: right;
  word-break: break-word;
}

/* ── Actions ───────────────────────────────────────────────── */
.stripe-connect-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 2px;
}

/* ── Trust + inline error ──────────────────────────────────── */
.stripe-connect-trust {
  font-size: 11.5px;
  line-height: 1.5;
  margin: 0;
}

.stripe-connect-inline-error {
  color: var(--red);
  font-size: 12px;
  line-height: 1.5;
  margin: 8px 0 0;
}

.stripe-connect-readonly { margin: 0; }
.stripe-connect-readonly-copy { font-size: 12px; line-height: 1.5; }

/* ── Responsive: stack + full-width buttons under 640px ────── */
@media (max-width: 640px) {
  .stripe-connect-card .card-body { padding: 16px 14px; }
  .stripe-connect-actions { flex-direction: column; align-items: stretch; }
  .stripe-connect-actions > .btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
  .stripe-connect-detail-row { gap: 10px; }
}

/* ── Onboarding-Consent-Box (O1/B6) ─────────────────────────────────────── */
.stripe-consent-box {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 13px;
  background: var(--card2);
  margin-bottom: 8px;
  transition: border-color .15s, background .15s;
}
.stripe-consent-box.is-expanded { border-color: var(--accent); }
/* Strong ring only on real keyboard focus of the checkbox, not permanently —
   mirrors the house focus pattern (outline + var(--accent)). */
.stripe-consent-box:focus-within {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.stripe-consent-row {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  cursor: pointer;
  user-select: none;
}
.stripe-consent-check {
  margin-top: 2px;
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
  cursor: pointer;
}
.stripe-consent-text {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text);
}
/* Referenced-terms links (DSB 2026-06-03): the user must be able to reach the
   referenced terms before consenting. Indented to the checkbox text column. */
.stripe-consent-links {
  margin: 9px 0 0 28px;
}
.stripe-consent-links-intro {
  margin: 0 0 5px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text2);
}
.stripe-consent-link-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stripe-consent-link-item {
  font-size: 11.5px;
  line-height: 1.5;
}
.stripe-consent-link {
  color: var(--accent);
  text-decoration: none;
}
.stripe-consent-link:hover { text-decoration: underline; }
.stripe-consent-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
.stripe-consent-toggle {
  display: inline-block;
  margin: 6px 0 0 28px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 11.5px;
  cursor: pointer;
}
.stripe-consent-toggle:hover { text-decoration: underline; }
.stripe-consent-full {
  margin: 8px 0 0 28px;
  padding-left: 10px;
  border-left: 2px solid var(--border);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text2);
}
.stripe-connect-consent-hint {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--text2);
}

/* ============================================================
   _60h-customer-portal.css — Kundenportal (globaler Schalter) settings tab
   Rendered by public/js/customer-portal-settings.js.
   Moderne Feature-Card (cp-*) im Stil von ai-feature-card / ei-card:
   Icon links, Titel + Status (Aktiv/Inaktiv), Switch-Toggle oben rechts,
   Erklärtext, dezente Feature-Pills. Tokens only, kein inline style= (CSP).
   Eigene cp-*-Klassen (keine Kopplung an den KI-Tab) mit gleichen Werten.
   Kompaktes Einzeiler-Format wie die übrigen Partials (Bundle ist un-minified
   → jede Zeile zählt fürs app.css-Asset-Budget).
   ============================================================ */

.customer-portal-status{display:block;}

/* ─── Card ─── */
.cp-card{border-radius:var(--radius);border:1px solid var(--border);background:var(--card);overflow:hidden;transition:border-color .2s,background .2s;}
.cp-card.is-active{border-color:var(--green3);}

/* ─── Loading ─── */
.cp-loading{display:flex;align-items:center;gap:9px;color:var(--text3);font-size:12.5px;padding:18px 20px;}
.cp-spinner{width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:cp-spin .7s linear infinite;flex-shrink:0;}
@keyframes cp-spin{to{transform:rotate(360deg);}}

/* ─── Header: Icon + Titel/Status + Toggle ─── */
.cp-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;gap:14px;}
.cp-header-left{display:flex;align-items:center;gap:14px;min-width:0;}
.cp-header-left>div{min-width:0;}
.cp-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:10px;background:var(--bg2);border:1px solid var(--border);color:var(--text2);transition:background .2s,border-color .2s,color .2s;}
.cp-card.is-active .cp-icon{background:var(--green2);border-color:var(--green3);color:var(--green);}
.cp-title{font-size:14px;font-weight:var(--fw-semibold);color:var(--text);}
.cp-status{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text3);margin-top:2px;}
.cp-card.is-active .cp-status{color:var(--green);}
.cp-status-dot{width:7px;height:7px;border-radius:50%;background:var(--text3);flex-shrink:0;transition:background .2s;}
.cp-card.is-active .cp-status-dot{background:var(--green);}

/* ─── Toggle (eigenes cp-toggle, Stil wie ai-toggle) ─── */
.cp-toggle{position:relative;width:44px;height:24px;flex-shrink:0;cursor:pointer;background:none;border:none;padding:0;}
.cp-toggle:disabled{opacity:.35;cursor:not-allowed;}
.cp-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:12px;}
.cp-toggle-track{display:block;width:44px;height:24px;border-radius:12px;background:var(--bg2);border:1.5px solid var(--border);transition:background .2s,border-color .2s;}
.cp-toggle.is-on .cp-toggle-track{background:var(--green);border-color:var(--green);}
.cp-toggle-thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:white;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s;}
.cp-toggle.is-on .cp-toggle-thumb{transform:translateX(20px);}

/* ─── Erklärtext ─── */
.cp-lead{padding:0 20px 16px;margin:0;font-size:12.5px;line-height:1.5;color:var(--text2);}

/* ─── Feature-Pills (dezent) ─── */
.cp-pills{display:flex;flex-wrap:wrap;gap:8px;padding:0 20px 18px;}
.cp-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:11.5px;line-height:1;color:var(--text2);background:var(--bg);border:1px solid var(--border);}
.cp-card.is-active .cp-pill{color:var(--green);background:var(--green2);border-color:var(--green3);}
.cp-pill-ico{display:inline-flex;line-height:0;flex-shrink:0;}

/* ─── Readonly-Hinweis ─── */
.cp-readonly{margin:0 20px 18px;font-size:12px;line-height:1.5;color:var(--text3);padding:8px 11px;border:1px solid var(--border);border-radius:8px;background:var(--bg2);}

/* ─── Light Mode ─── */
body.light .cp-toggle-track{background:var(--bg);}

/* ─── Mobile ─── */
@media(max-width:700px){
  .cp-header{padding:var(--space-lg) var(--space-lg) 12px;flex-wrap:wrap;}
  .cp-toggle{margin-left:0;}
  .cp-lead{padding:0 var(--space-lg) 14px;}
  .cp-pills{padding:0 var(--space-lg) 16px;}
}

/* GoCardless Settings Panel CSS (PSD2 Sync) */

.gocardless-card {
  margin-top: 1.5rem;
  transition: all 0.3s ease;
}

.gc-state-block {
  animation: fadeIn 0.4s ease;
}

.gc-connect-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.gc-bank-select {
  flex-grow: 1;
  max-width: 400px;
}

.gc-status-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem 0;
  text-align: center;
}

.gc-status-spinner .spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid var(--border-color);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: gc-spin 1s linear infinite;
}

@keyframes gc-spin {
  to { transform: rotate(360deg); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.gc-connection-info {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.gc-info-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.gc-info-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gc-info-value {
  font-weight: 500;
  color: var(--text-primary);
}

.gc-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.gc-badge--success {
  background-color: var(--bg-success);
  color: var(--text-success);
}

.gc-badge--warning {
  background-color: var(--invoice-warning-bg);
  color: var(--invoice-warning);
}

.gc-accounts-list-section {
  margin: 1.5rem 0;
}

.gc-section-subtitle {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
}

.gc-account-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  transition: border-color 0.2s ease;
}

.gc-account-item:hover {
  border-color: var(--primary-color-light);
}

.gc-account-details {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.gc-account-iban {
  font-family: monospace;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.gc-account-meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* iOS Switch Style */
.gc-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.gc-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.gc-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-color);
  transition: .4s;
  border-radius: 24px;
}

.gc-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

input:checked + .gc-slider {
  background-color: var(--primary-color);
}

input:checked + .gc-slider:before {
  transform: translateX(20px);
}

.gc-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.gc-account-status-badge {
  font-size: 0.75rem;
  color: var(--text-error);
  background: var(--bg-error);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  margin-left: 0.5rem;
}

.gc-state-block--hidden {
  display: none !important;
}

.gc-form-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  max-width: 600px;
}

.gc-select-grow {
  flex-grow: 1;
}

.gc-status-desc {
  margin-top: 0.5rem;
  font-weight: 500;
}

.gc-switch--disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* PSD2 Auto-Apply: Sub-Zeile unter dem Konto-Toggle (stille ≥0.95-Verbuchung). */
.gc-account-subrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 1rem 0.6rem;
  margin: -0.4rem 0 0.5rem;
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: var(--bg-surface);
}

.gc-account-subrow--disabled {
  opacity: 0.5;
}

.gc-account-subrow-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Kleinerer Switch für die Sub-Zeile. */
.gc-switch--sm {
  width: 38px;
  height: 20px;
}

.gc-switch--sm .gc-slider {
  border-radius: 20px;
}

.gc-switch--sm .gc-slider:before {
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
}

.gc-switch--sm input:checked + .gc-slider:before {
  transform: translateX(18px);
}

/* _65-notifications.css — Notification-Center (PR2, Plan §6 D2–D5)
 *
 * Wiederverwendet DESIGN.md-Tokens (Tone-Tints, --sheet-*, --analysis-
 * skeleton-*). KEINE neuen Components — nur .ntf-* Scoping über das
 * bestehende .shell-notif-panel / #mc. Kein colored-left-border (Anti-
 * Pattern), Tone via 8px-Dot, Critical via Eyebrow „Fällig" statt Alarmrot.
 */

/* ── D2: Notification-Zeile ───────────────────────────────────────────
 * Festes 3-Spalten-Grid [dot | content | actions] statt Flex. Content
 * stapelt intern (Eyebrow/Titel/Body/Footer); der Footer ist ein 2-Spalten-
 * Grid [Zeit | CTA], damit Zeit + CTA bei allen Items gleich sitzen und
 * nicht je nach Textlänge umbrechen. Schmale Breiten klappen den Footer
 * kontrolliert einspaltig — einheitlich für ALLE Items, nicht textabhängig.
 */
.ntf-list { display: flex; flex-direction: column; }
.ntf-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px; align-items: start;
  padding: 12px 14px; min-height: 44px;
  border-bottom: 1px solid var(--border);
  cursor: pointer; position: relative;
}
.ntf-row:last-child { border-bottom: 0; }
.ntf-row:hover { background: var(--bg2); }
.ntf-row.is-unread { background: rgba(232, 184, 75, .045); }
.ntf-row.is-unread .ntf-title { font-weight: var(--fw-semibold); }
.ntf-row--leaving { opacity: 0; transition: opacity .15s ease; }

.ntf-dot {
  width: 8px; height: 8px; border-radius: 50%;
  margin-top: 5px;
  border: 1px solid transparent;
}
.ntf-dot--poor { background: rgba(248, 113, 113, .32); border-color: rgba(248, 113, 113, .55); }
.ntf-dot--warn { background: rgba(232, 184, 75, .32); border-color: rgba(232, 184, 75, .55); }
.ntf-dot--info { background: rgba(96, 165, 250, .32); border-color: rgba(96, 165, 250, .5); }

.ntf-main { min-width: 0; display: grid; gap: 4px; }
.ntf-eyebrow {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text3); font-weight: var(--fw-semibold);
}
.ntf-title {
  font-size: 14px; color: var(--text); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ntf-count { color: var(--text3); font-weight: 400; }
.ntf-body {
  font-size: 13px; color: var(--text2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ntf-meta {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 12px; align-items: baseline; margin-top: 2px;
}
.ntf-time { font-size: 11px; color: var(--text3); white-space: nowrap; }
.ntf-action {
  font-size: 13px; color: var(--accent); text-decoration: none;
  white-space: nowrap; justify-self: start;
}
.ntf-action:hover { text-decoration: underline; }

.ntf-rowact { display: flex; gap: 4px; }
.ntf-iconbtn {
  width: 26px; height: 26px; border: 0; border-radius: 6px;
  background: transparent; color: var(--text3); cursor: pointer;
  font-size: 13px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.ntf-iconbtn:hover { background: var(--border); color: var(--text); }
.ntf-iconbtn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(232, 184, 75, .18); }

/* Schmale Viewports: Footer einspaltig (Zeit über CTA), einheitlich für
 * alle Items. Touch-Targets der Aktions-Icons auf >=40px anheben. */
@media (max-width: 520px) {
  .ntf-meta { grid-template-columns: 1fr; gap: 4px; align-items: start; }
  .ntf-iconbtn { width: 40px; height: 40px; }
}

/* ── D3: Bell-Dropdown Chrome (im bestehenden .shell-notif-panel) ──── */
.ntf-panelhead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.ntf-panelttl { font-size: 13px; font-weight: var(--fw-semibold); color: var(--text); }
.ntf-panelfoot {
  padding: 10px 14px; border-top: 1px solid var(--border); text-align: center;
}
.ntf-linkbtn {
  background: none; border: 0; color: var(--accent); cursor: pointer;
  font: inherit; font-size: 12px; padding: 2px 4px;
}
.ntf-linkbtn:hover { text-decoration: underline; }
.ntf-linkbtn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(232, 184, 75, .18); }
.ntf-partialnote, .ntf-failnote {
  padding: 10px 14px; font-size: 11px; color: var(--text3); text-align: center;
}

/* 2px Accent-Refresh-Strich (kein Layout-Sprung) */
.ntf-progress { height: 2px; background: transparent; overflow: hidden; }
.ntf-progress.is-on { background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: ntf-prog 1s linear infinite; }
@keyframes ntf-prog { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }
@media (prefers-reduced-motion: reduce) { .ntf-progress.is-on { animation: none; } }

/* Skeleton — bestehende --analysis-skeleton-* Tokens */
.ntf-skelwrap { padding: 8px 0; }
.ntf-skel { display: flex; gap: 10px; padding: 12px 14px; }
.ntf-skel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--analysis-skeleton-row-bg); margin-top: 5px; }
.ntf-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.ntf-skel-l1, .ntf-skel-l2 { height: 10px; border-radius: 4px; background: var(--analysis-skeleton-row-bg); }
.ntf-skel-l1 { width: 70%; } .ntf-skel-l2 { width: 45%; }
.ntf-skelwrap { position: relative; }
.ntf-skel-l1::after, .ntf-skel-l2::after, .ntf-skel-dot::after {
  content: ""; position: absolute; inset: 0;
  background: var(--analysis-skeleton-row-shimmer); opacity: 0;
}

/* Empty-State — dokumentiertes .mes-card--empty-Pattern */
.ntf-empty--compact { padding: 28px 20px; }
.ntf-empty--compact .mes-empty-title { font-size: 16px; }
.ntf-empty--compact .mes-empty-lead { font-size: 12.5px; }

/* ── D5: Mobile-Sheet (<dialog>, --sheet-* Tokens) ────────────────── */
/* Own compositor layer (translateZ + contain) so the box-shadow is not
   re-rasterized while the drag engine moves the sheet per frame. The drag
   transform is applied via an isolated runtime stylesheet (RuntimeStyleRules),
   not inline style — CSP-safe. */
.ntf-sheet {
  border: 0; padding: 0; margin: 0 auto;
  position: fixed; left: 0; right: 0; bottom: 0; top: auto;
  width: 100%; max-width: 100%;
  max-height: var(--sheet-max-height);
  background: var(--card); color: var(--text);
  border-radius: var(--sheet-radius-top) var(--sheet-radius-top) 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, .4);
  overflow: hidden;
  transform: translateZ(0);
  contain: layout paint;
}
.ntf-sheet[open] { animation: ntf-sheet-up .26s cubic-bezier(.22, .61, .36, 1); }
/* will-change only while a finger is dragging (data flag set by the engine),
   so the GPU layer is not pinned the whole time the sheet is open. */
.ntf-sheet[data-rsr-drag-active] { will-change: transform; }
.ntf-sheet::backdrop { background: var(--sheet-backdrop); }
.ntf-sheet-handle {
  width: 40px; height: 4px; border-radius: 2px;
  background: var(--sheet-handle); margin: 10px auto 6px;
  touch-action: none;
}
.ntf-sheet-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  max-height: calc(var(--sheet-max-height) - 30px);
  padding-bottom: max(14px, calc(14px + env(safe-area-inset-bottom)));
}
@keyframes ntf-sheet-up {
  from { transform: translate3d(0, 100%, 0); }
  to { transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ntf-sheet[open] { animation: none; }
}

/* ── Center-SPA-View (#mc → .ntf-center) ──────────────────────────── */
.ntf-center .tx-view-toggle { margin: 14px 0 18px; flex-wrap: wrap; }
.ntf-center .ntf-group { margin-bottom: 22px; }
.ntf-center .ntf-group-h {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text3); font-weight: var(--fw-semibold); margin: 0 0 8px 2px;
}
.ntf-center .ntf-list {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); overflow: hidden;
}

/* Settings-Tab Prefs */
.ntf-pref-row { align-items: flex-start; }
.ntf-pref-cats { display: flex; flex-direction: column; gap: 10px; }
.ntf-pref-master { padding-bottom: 10px; border-bottom: 1px solid var(--border); }

.support-modal--form{max-width:500px;}

.support-modal--success{max-width:420px;}

.support-modal__field{margin-bottom:12px;}

.support-modal__label{
  display:block;
  margin-bottom:4px;
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text3);
}

.support-modal__control{width:100%;}

.support-modal__textarea{resize:vertical;}

.support-modal__file{font-size:12px;}

.support-modal__charcount{
  margin-top:2px;
  font-size:10px;
  color:var(--text3);
  text-align:right;
}

.support-modal__helper{
  margin-top:2px;
  font-size:10px;
  color:var(--text3);
}

.support-modal__attach-error{
  margin-top:4px;
  font-size:11px;
  color:var(--red);
}

.support-modal__attach-preview{margin-top:8px;}

.support-modal__attach-thumb{
  display:block;
  max-width:100%;
  max-height:160px;
  border:1px solid var(--border);
  border-radius:6px;
}

.support-modal__attach-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:4px;
}

.support-modal__attach-name{
  overflow:hidden;
  font-size:11px;
  color:var(--text3);
  text-overflow:ellipsis;
  white-space:nowrap;
}

.support-modal__attach-remove,
.support-link{
  padding:0;
  border:none;
  background:none;
  color:var(--accent);
  cursor:pointer;
  text-decoration:underline;
}

.support-modal__attach-remove{
  flex-shrink:0;
  font-size:11px;
}

.support-modal__tech-toggle{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-bottom:16px;
  padding:10px 12px;
  cursor:pointer;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:6px;
}

.support-modal__tech-checkbox{
  width:16px;
  height:16px;
  margin-top:3px;
  flex-shrink:0;
  accent-color:var(--accent);
}

.support-modal__tech-title{
  font-size:12px;
  font-weight:500;
  color:var(--text2);
}

.support-modal__tech-text{
  margin-top:2px;
  font-size:10px;
  color:var(--text3);
}

.support-modal__hint{
  min-height:16px;
  margin-bottom:8px;
  font-size:11px;
  color:var(--accent);
}

.support-modal__submit{
  width:100%;
  justify-content:center;
}

.support-modal__note,
.support-modal__privacy{
  margin-top:8px;
  font-size:10px;
  line-height:1.5;
  color:var(--text3);
  text-align:center;
}

.support-modal__privacy{margin-top:6px;}

.support-modal__success-body{
  padding:20px;
  text-align:center;
}

.support-modal__success-icon-wrap{
  display:flex;
  justify-content:center;
  margin-bottom:12px;
}

.support-modal__success-title{
  margin-bottom:4px;
  font-size:14px;
  font-weight:600;
  color:var(--text);
}

.support-modal__success-card{
  margin:12px 0;
  padding:10px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:6px;
}

.support-modal__success-label{
  margin-bottom:2px;
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text3);
}

.support-modal__success-ref{
  font-size:16px;
  font-weight:700;
  color:var(--accent);
  font-family:var(--mono);
}

.support-modal__success-subject{
  margin-top:2px;
  font-size:11px;
  color:var(--text3);
}

.support-modal__success-email{
  margin-bottom:4px;
  font-size:12px;
  color:var(--text2);
}

.support-modal__success-sla{
  font-size:11px;
  color:var(--text3);
}

.support-modal__success-actions{margin-top:16px;}

.support-link{
  font-size:inherit;
  font-family:inherit;
}

/* Spec-3 Rückfragen-Flow — Mandant-Seite: Rückfragen-Karten im Monat-Prüfen-
   Drilldown + Dashboard-Kachel. Tokens aus _00-tokens.css. */

.advisor-issues {
  margin-top: var(--space-xl);
}
.advisor-issues__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text);
  margin: 0 0 var(--space-md);
}

.advisor-issue {
  border: 1px solid var(--border);
  background: var(--card);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  margin: var(--space-md) 0;
}
.advisor-issue__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--text);
}
.advisor-issue__icon { font-size: var(--fs-md); }
.advisor-issue__meta {
  color: var(--text2);
  font-size: var(--fs-base);
  margin-top: var(--space-xs);
}
.advisor-issue__question {
  margin: var(--space-sm) 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg2);
  border-radius: var(--radius-sm);
  color: var(--text);
}
.advisor-issue__answer {
  margin-top: var(--space-sm);
}
.advisor-issue__previous-answer {
  background: var(--tone-info-bg);
  border: 1px solid var(--tone-info-border);
  color: var(--tone-info-fg);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
}
.advisor-issue__textarea {
  width: 100%;
  min-height: 80px;
  font-family: inherit;
  font-size: var(--fs-base);
  padding: var(--space-sm);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
}
.advisor-issue__char-count {
  font-size: var(--fs-sm);
  color: var(--text2);
  text-align: right;
  margin: var(--space-xs) 0 var(--space-sm);
}
.advisor-issue__resolved {
  color: var(--tone-good-fg);
  font-weight: var(--fw-semibold);
}
.advisor-issue__withdrawn {
  color: var(--text2);
  font-style: italic;
}

.ti-badge--advisor-open {
  background: var(--tone-warn-bg);
  border: 1px solid var(--tone-warn-border);
  color: var(--tone-warn-text);
}
.ti-badge--advisor-answered-by-client {
  background: var(--tone-info-bg);
  border: 1px solid var(--tone-info-border);
  color: var(--tone-info-fg);
}
.ti-badge--advisor-resolved-by-advisor {
  background: var(--tone-good-bg);
  border: 1px solid var(--tone-good-border);
  color: var(--tone-good-fg);
}
.ti-badge--advisor-dismissed {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text2);
}

/* Dashboard-Kachel */
.advisor-comments-tile {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
  cursor: pointer;
  transition:
    background var(--tr-fast),
    border-color var(--tr-fast),
    transform 120ms ease-out;
}
/* Drilldown-Affordanz: ein nachgestelltes Chevron signalisiert "führt weiter",
   ersetzt die frühere dekorative Akzent-Leiste links (Side-Stripe). */
.advisor-comments-tile::after {
  content: "\203A";
  margin-left: auto;
  color: var(--text2);
  font-size: var(--fs-md);
  line-height: 1;
}
.advisor-comments-tile:hover {
  background: var(--bg3);
  border-color: var(--border2);
  transform: translateY(-1px);
}
.advisor-comments-tile__count {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--accent);
  min-width: 1.5em;
  text-align: center;
}
.advisor-comments-tile__label {
  font-size: var(--fs-body);
  color: var(--text);
}

/* ── Rückfrage zurückziehen — In-App-Inline-Formular (BUG-004 P2-A) ──────────
   Ersetzt den nativen prompt()/alert()-Dialog. Wird vom Cockpit-Client-View
   per .is-hidden ein-/ausgeblendet; Fehler erscheinen in den aria-live-
   Status-Spans (data-action-status / data-withdraw-status). Tokens analog zu
   den bestehenden .advisor-inquiry-*-Styles in _advisor.css. */
.advisor-issue-action-status {
  font-size: 12px;
  color: var(--text3);
  align-self: center;
}

.advisor-withdraw-form {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card2);
}

.advisor-withdraw-form.is-hidden { display: none; }

.advisor-withdraw-reason {
  width: 100%;
  font-size: 13px;
  font-family: inherit;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--text);
  resize: vertical;
}

.advisor-withdraw-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.advisor-withdraw-submit,
.advisor-withdraw-cancel {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}

.advisor-withdraw-submit {
  border-color: var(--border2);
  color: var(--text);
}

.advisor-withdraw-submit:hover { border-color: var(--accent); }
.advisor-withdraw-cancel { color: var(--text3); }
.advisor-withdraw-cancel:hover { color: var(--text); }

.advisor-withdraw-status {
  font-size: 12px;
  color: var(--text3);
}

/* Email Inbox Settings + Beleg Email Badge */

/* ─── Settings Card ─── */
.ei-shell{font-size:12.5px;max-width:100%;min-width:0;}
.ei-loading-card{padding:20px;color:var(--text3);}
.ei-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:border-color .2s;max-width:100%;min-width:0;box-sizing:border-box;overflow:hidden;}
.ei-card.is-active{border-color:var(--green3);}
.ei-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;}
.ei-header-left{display:flex;align-items:flex-start;gap:12px;min-width:0;}
.ei-header-left>div{min-width:0;}
.ei-header-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;background:var(--bg2);border:1px solid var(--border);color:var(--text2);transition:background .2s,border-color .2s,color .2s;}
.ei-card.is-active .ei-header-icon{background:var(--green2);border-color:var(--green3);color:var(--green);}
.ei-title{font-size:14px;font-weight:var(--fw-bold);color:var(--text);}
.ei-status{font-size:11.5px;color:var(--text3);margin-top:2px;}
.ei-error-text{color:var(--red);font-size:12px;}
.ei-card.is-active .ei-status{color:var(--green);}

/* ─── Address Box ─── */
.ei-address-section{margin-top:18px;}
.ei-address-label{font-size:11.5px;font-weight:var(--fw-semibold);color:var(--text2);margin-bottom:8px;text-transform:uppercase;letter-spacing:.04em;}
.ei-address-box{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--bg);border:1px solid var(--border);border-radius:8px;max-width:100%;min-width:0;box-sizing:border-box;}
.ei-address{flex:1;min-width:0;max-width:100%;font-family:var(--mono);font-size:12.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:all;}
.ei-copy-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:6px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);font-size:11px;font-weight:var(--fw-semibold);cursor:pointer;transition:border-color .15s,color .15s,background .15s;}
.ei-copy-btn:hover{border-color:var(--green3);color:var(--text);background:var(--green2);}

/* ─── Rotate Link ─── */
.ei-rotate{margin-top:12px;}
.ei-rotate-link{font-size:12px;color:var(--text3);cursor:pointer;background:none;border:none;padding:0;text-decoration:underline;text-underline-offset:2px;transition:color .15s;}
.ei-rotate-link:hover{color:var(--text);}

/* ─── Sender + KI Info Sections ─── */
.ei-info-section{margin-top:16px;padding-top:14px;border-top:1px solid rgba(var(--surface-rgba-base),.05);}
.ei-info-title{font-size:12px;font-weight:var(--fw-semibold);color:var(--text);margin-bottom:4px;}
.ei-info-text{font-size:12px;color:var(--text3);line-height:1.5;}
.ei-info-text--lead{margin-top:12px;}

/* ─── Footer / Privacy ─── */
.ei-footer{margin-top:16px;padding-top:12px;border-top:1px solid rgba(var(--surface-rgba-base),.05);display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;color:var(--text3);line-height:1.45;}
.ei-footer-icon{vertical-align:-1px;margin-right:4px;opacity:.5;}
.ei-footer a{color:var(--text3);text-decoration:underline;text-underline-offset:2px;white-space:nowrap;}
.ei-footer a:hover{color:var(--text2);}

/* ─── Toggle (reuses ai-toggle pattern) ─── */
.ei-toggle{position:relative;width:42px;height:24px;border:none;border-radius:12px;background:rgba(var(--surface-rgba-base),.12);cursor:pointer;padding:0;transition:background .2s;flex-shrink:0;}
.ei-toggle:disabled{opacity:.35;cursor:not-allowed;}
.ei-toggle.is-on{background:var(--green);}
.ei-toggle-track{display:block;width:100%;height:100%;border-radius:12px;}
.ei-toggle-thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:white;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s;}
.ei-toggle.is-on .ei-toggle-thumb{transform:translateX(18px);}

/* ─── Beleg Email Badge ─── */
.beleg-badge.email-source{background:var(--green2);color:var(--green);border:1px solid var(--green3);}

/* ─── Light Mode ─── */
body.light .ei-card.is-active{border-color:var(--green3);}
body.light .ei-header-icon{background:var(--bg2);border-color:var(--border);}
body.light .ei-toggle.is-on{background:var(--green);}
body.light .beleg-badge.email-source{background:var(--green2);border-color:var(--green3);color:var(--green);}

/* ─── Mobile ─── */
@media(max-width:700px){
  /* Tighter card padding so content fits a ~360-440px iPhone viewport
     without horizontal overflow (TT-20260518-A77255A0). */
  .ei-card{padding:var(--space-lg);}
  /* Header may wrap; toggle keeps its own row instead of being
     clipped off the right edge on narrow screens. */
  .ei-header{flex-wrap:wrap;}
  .ei-toggle{margin-left:0;}
  .ei-address-box{flex-wrap:wrap;padding:10px 12px;}
  /* Lange Belegadressen (z.B. belege-xyz123…@belege.taxtello.de) müssen
     auf 360px-Geräten in den Container passen. ellipsis ist hier falsch —
     der User muss die Adresse sehen und kopieren können. overflow-wrap:
     anywhere bricht an beliebiger Stelle, sodass die Adresse mehrzeilig
     im Feld bleibt statt rechts aus der Karte zu ragen. */
  .ei-address{width:100%;max-width:100%;font-size:11.5px;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;word-break:break-all;line-height:1.4;}
  /* When the address wraps to its own line, let the copy button
     span the full width instead of overflowing the card. */
  .ei-copy-btn{flex:1 1 100%;justify-content:center;}
  .ei-footer{flex-direction:column;align-items:flex-start;gap:8px;}
}

/* ══════════════════════════════════════════════════════════════
   Recurring invoices (Phase 2b)
   ══════════════════════════════════════════════════════════════ */

/* Design-Angleichung: inv3-hero H1 auf Buchungen-Standard (30px/-0.025em) */
#ctx-rec-cockpit .inv3-hero-main h1{
  font-size:30px;
  line-height:1.15;
  font-weight:var(--fw-bold);
  letter-spacing:-0.025em;
}
@media (max-width:768px){
  #ctx-rec-cockpit .inv3-hero-main h1{font-size:24px;}
}
.rec-form-page .rec-form-card{
  margin-bottom:0;
}
.rec-form-customer-grid{
  grid-template-columns:minmax(120px,.7fr) minmax(0,1.3fr);
}
/* 2026-04-26: Glow + Gradient entfernt. Serie-Card visuell wie alle anderen
   Cards, aber mit einer dezenten gelben Akzent-Linie links als Hierarchie-
   Signal (Hero-Card der Seite). Padding + Grid-Layout unverändert; nur die
   schwere Optik raus. */
.rec-rhythm-stage{
  overflow:hidden;
  padding:0;
  position:relative;
}
.rec-rhythm-stage::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:2px;
  background:var(--accent);
  border-radius:0 2px 2px 0;
  opacity:.6;
}
.rec-rhythm-stage-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 20px;
  border-bottom:1px solid rgba(var(--surface-rgba-base),.06);
}
.rec-rhythm-stage-title{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text-strong);
  font-size:16px;
  font-weight:var(--fw-heavy);
}
.rec-rhythm-stage-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:32px;
  height:32px;
  border-radius:10px;
  background:rgba(232,184,75,.10);
  border:1px solid rgba(232,184,75,.22);
  color:var(--accent);
}
.rec-rhythm-stage-icon svg{
  width:18px;
  height:18px;
}
.rec-rhythm-stage-name{
  color:rgba(var(--text-rgba-base),.48);
  font-size:13px;
  font-weight:var(--fw-medium);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rec-rhythm-stage-body{
  padding:22px;
}
.rec-rhythm-kicker,
.rec-rhythm-preview-label{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 12px;
  color:rgba(var(--text-rgba-base),.52);
  font-size:11px;
  font-weight:var(--fw-bold);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.rec-rhythm-preview-label{
  margin-top:22px;
  color:rgba(245,208,122,.94);
}
.rec-rhythm-pills{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
  margin-bottom:12px;
}
/* Rec-spezifische Overrides bewusst entfernt 2026-04-26 — globale
   .inv3-rhythm-pill-Styles (38px hoch, 10px radius, dezenter Active-State)
   gewinnen jetzt. Vorher: 16px-radius Pill mit Solid-Yellow-Active-Glow,
   was als „zu groß" empfunden wurde. */
.rec-rhythm-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.rec-rhythm-control,
.rec-rhythm-date{
  display:grid;
  gap:8px;
  min-width:0;
}
.rec-rhythm-control>span,
.rec-rhythm-date>span{
  color:rgba(var(--text-rgba-base),.52);
  font-size:11px;
  font-weight:var(--fw-bold);
  letter-spacing:.1em;
  text-transform:uppercase;
}
.rec-rhythm-inputline{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:0 14px;
  border-radius:16px;
  border:1px solid rgba(var(--surface-rgba-base),.1);
  background:rgba(7,15,29,.56);
}
.rec-rhythm-inputline input{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text-strong);
  font:inherit;
  font-size:16px;
  font-weight:var(--fw-semibold);
}
.rec-rhythm-inputline em{
  color:rgba(var(--text-rgba-base),.5);
  font-style:normal;
  font-size:12px;
  white-space:nowrap;
}
.rec-rhythm-date-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
  align-items:end;
  gap:12px;
  margin-top:16px;
}
.rec-rhythm-date .inv-date-wrap{
  min-height:48px;
  border-radius:16px;
  border:1px solid rgba(var(--surface-rgba-base),.1);
  background:rgba(7,15,29,.56);
}
.rec-rhythm-date .inv-date-input{
  border:0;
  background:transparent;
}
.rec-rhythm-active{
  min-height:48px;
  margin:0;
  border-radius:16px;
  background:rgba(7,15,29,.42);
  white-space:nowrap;
}
.rec-rhythm-next{
  padding:0;
  border:0;
  background:transparent;
}
.rec-rhythm-next .inv3-rec-next-title{
  display:none;
}
.rec-rhythm-next .inv3-rec-next-list{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
.rec-rhythm-next .inv3-rec-next-list li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:44px;
  padding:0 16px;
  border-radius:16px;
  background:rgba(7,15,29,.56);
  color:var(--text-strong);
  font-size:14px;
  font-weight:var(--fw-semibold);
}
.rec-rhythm-next .inv3-rec-next-list li em{
  color:rgba(var(--text-rgba-base),.48);
  font-style:normal;
  font-size:12px;
  font-weight:var(--fw-medium);
}
.rec-rhythm-stage .rec-auto-send-info{
  margin-top:14px;
}
.rec-form-sidebar{
  gap:14px;
}
.rec-form-summary-card{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.rec-form-summary-list{
  display:grid;
  gap:12px;
}
.rec-form-summary-item{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:rgba(var(--surface-rgba-base),.03);
}
.rec-form-summary-item span{
  font-size:11px;
  font-weight:var(--fw-semibold);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(var(--text-rgba-base),.52);
}
.rec-form-summary-item strong{
  font-size:15px;
  line-height:1.45;
  color:var(--text-strong);
}
.rec-form-preview-next{
  min-height:18px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:rgba(var(--surface-rgba-base),.022);
  font-size:12.5px;
  line-height:1.6;
  color:var(--text2);
}
.rec-form-preview-next strong{
  color:var(--text-strong);
}
.rec-form-preview-next.rec-rhythm-next{
  min-height:16px;
  padding:0;
  border:0;
  background:transparent;
}
body.light .rec-rhythm-stage{
  border-color:rgba(var(--ink-rgba-base),.1);
  background:
    radial-gradient(circle at 18% 0%, rgba(232,184,75,.16), transparent 34%),
    linear-gradient(135deg,rgba(248,250,253,.98),rgba(232,237,246,.96));
  box-shadow:0 16px 34px rgba(var(--ink-rgba-base),.08);
}
body.light .rec-rhythm-pill{
  background:rgba(var(--surface-solid-rgba-base),.62);
  color:rgba(var(--ink-rgba-base),.6);
}
body.light .rec-rhythm-pill.inv3-rhythm-pill--active{
  background:rgba(232,184,75,.96);
  color:rgba(var(--text-rgba-base),.92);
  box-shadow:none;
}
body.light .rec-rhythm-inputline,
body.light .rec-rhythm-date .inv-date-wrap,
body.light .rec-rhythm-active,
body.light .rec-rhythm-next .inv3-rec-next-list li{
  border-color:rgba(var(--ink-rgba-base),.08);
  background:rgba(var(--surface-solid-rgba-base),.68);
}
body.light .rec-rhythm-inputline input{
  color:rgba(var(--ink-rgba-base),.9);
}
.rec-card{transition:border-color 0.15s ease,box-shadow 0.15s ease}
.rec-card:hover{border-color:var(--text3);box-shadow:0 1px 4px rgba(0,0,0,0.04)}
.rec-status-badge{display:inline-flex;align-items:center;font-weight:500;letter-spacing:0.01em}
.rec-status-active{}
.rec-status-paused{}
.rec-toggle-switch{cursor:pointer;user-select:none}
#rec-items-table th{text-align:left;font-weight:500;color:var(--text3);font-size:12px;padding:4px 6px;border-bottom:1px solid var(--border)}
#rec-items-table td{padding:4px 6px;vertical-align:middle}
#rec-items-table input,#rec-items-table select{width:100%;box-sizing:border-box}
#rec-preview-next{min-height:16px}

@media(max-width:680px){
  .rec-form-customer-grid{
    grid-template-columns:1fr;
  }
  .rec-rhythm-stage-head{
    align-items:flex-start;
    flex-direction:column;
    padding:18px 20px;
  }
  .rec-rhythm-stage-body{
    padding:20px;
  }
  .rec-rhythm-grid,
  .rec-rhythm-date-grid{
    grid-template-columns:1fr;
    gap:12px;
  }
  .rec-rhythm-active{
    width:100%;
  }
  .rec-rhythm-next .inv3-rec-next-list li{
    align-items:flex-start;
    flex-direction:column;
    justify-content:center;
    padding:12px 16px;
  }
}

/* =============================================================
   RECHNUNGEN V2 (Dev-Version, Route /YYYY/rechnungen-v2)
   Namespace .inv2-* — vollständig isoliert von V1 (.inv-*) und V3 (.inv3-*).
   Design-Sprache: Dashboard-V3-angelehnt (Hero-Shell, Tone-System,
   Gradient-Surfaces, Monospace-Zahlen, Focus-Cards mit Top-Accent-Strips).
   BEWUSST keine Tabelle — Card-Stack statt Spreadsheet.
   ============================================================= */

.inv2-page{
  max-width:1200px;margin:0 auto;padding:8px 0 48px;
  display:flex;flex-direction:column;gap:var(--space-xl);
  letter-spacing:0;
}
.inv2-page *{box-sizing:border-box;}

/* Sub-1200px viewports (mobile + tablet + narrow browser): the base rule's
   `padding:8px 0 48px` would leave headings flush to the viewport edge,
   because below the 1200px max-width the `margin:0 auto` produces no
   auto-margin whitespace. Restore horizontal padding here so .inv2-page
   matches .app-page's mobile breathing room. At ≥1200px the auto-margin
   takes over and no padding is needed. (PR #1700 + Codex P2 + Kilo P2.) */
@media(max-width:1199px){
  .inv2-page{padding-left:12px;padding-right:12px;}
}

/* ── Hero-Shell (Dashboard-V3-angelehnt) ────────────────────── */
.inv2-hero{position:relative;}
.inv2-hero-shell{
  position:relative;
  padding:28px 32px 24px;
  border-radius:var(--radius-xl);
  background:linear-gradient(135deg,rgba(26,32,53,.92) 0%,rgba(31,38,65,.82) 100%);
  border:1px solid var(--border);
  overflow:hidden;
  isolation:isolate;
}
.inv2-hero-shell::before{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--tone-info-fg) 0%,transparent 70%);
  opacity:.75;
}
.inv2-hero-shell::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 80% 60% at 85% 20%,rgba(245,208,122,.05) 0%,transparent 60%);
}
.inv2-hero-shell>*{position:relative;z-index:1;}

/* Tone-Overrides für Hero-Shell */
.inv2-hero-danger .inv2-hero-shell::before{background:linear-gradient(90deg,var(--tone-poor-fg) 0%,transparent 70%);opacity:.85;}
.inv2-hero-danger .inv2-hero-shell::after{background:radial-gradient(ellipse 80% 60% at 85% 20%,rgba(248,113,113,.08) 0%,transparent 60%);}
.inv2-hero-warn .inv2-hero-shell::before{background:linear-gradient(90deg,var(--tone-warn-fg) 0%,transparent 70%);opacity:.8;}
.inv2-hero-warn .inv2-hero-shell::after{background:radial-gradient(ellipse 80% 60% at 85% 20%,rgba(232,184,75,.08) 0%,transparent 60%);}
.inv2-hero-good .inv2-hero-shell::before{background:linear-gradient(90deg,var(--tone-good-fg) 0%,transparent 70%);opacity:.75;}
.inv2-hero-good .inv2-hero-shell::after{background:radial-gradient(ellipse 80% 60% at 85% 20%,rgba(83,214,179,.06) 0%,transparent 60%);}

.inv2-hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-lg);margin-bottom:20px;}
.inv2-kicker{font-size:11px;font-weight:var(--fw-bold);color:rgba(245,208,122,.78);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px;}
.inv2-hero h1{font-size:26px;font-weight:var(--fw-heavy);color:var(--text-strong);line-height:var(--lh-tight);margin:0;}
.inv2-year-pill{
  padding:6px 14px;border-radius:var(--radius-pill);font-family:var(--font-mono);
  font-size:12px;font-weight:var(--fw-bold);color:var(--text2);
  background:rgba(var(--text-rgba-base),.04);border:1px solid var(--border);
}

.inv2-hero-main{
  display:grid;grid-template-columns:minmax(280px,.95fr) minmax(300px,1.05fr);
  gap:36px;align-items:stretch;
}
.inv2-hero-left{display:flex;flex-direction:column;min-width:0;gap:6px;}
.inv2-hero-kpi-label{font-size:12px;font-weight:var(--fw-bold);color:rgba(var(--text-rgba-base),.55);text-transform:uppercase;letter-spacing:.06em;}
.inv2-hero-kpi-value{
  font-family:var(--font-mono);font-size:42px;font-weight:var(--fw-heavy);
  color:var(--text-strong);line-height:1.05;margin-top:2px;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.inv2-hero-kpi-sub{font-size:12px;color:var(--text3);margin-top:4px;}
.inv2-hero-headline{
  margin-top:14px;padding-top:14px;border-top:1px solid rgba(var(--text-rgba-base),.06);
  font-size:15px;font-weight:var(--fw-semibold);color:var(--text);line-height:1.4;
}
.inv2-hero-danger .inv2-hero-headline{color:var(--tone-poor-fg);}
.inv2-hero-warn .inv2-hero-headline{color:var(--tone-warn-text);}
.inv2-hero-good .inv2-hero-headline{color:var(--tone-good-fg);}

.inv2-hero-cta{margin-top:18px;}
.inv2-cta-primary{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;border-radius:var(--radius-md);cursor:pointer;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 100%);
  border:1px solid rgba(232,184,75,.4);
  color:var(--accent-ink);font-family:inherit;font-weight:var(--fw-bold);font-size:13px;
  box-shadow:0 4px 14px rgba(232,184,75,.18);
  transition:transform .15s,box-shadow .15s;
}
.inv2-cta-primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(232,184,75,.28);}
.inv2-cta-primary:active{transform:translateY(0);}

/* Meta-Strip rechts */
.inv2-hero-right{display:flex;flex-direction:column;justify-content:center;min-width:0;}
.inv2-hero-meta{display:flex;flex-direction:column;gap:10px;}
.inv2-meta-row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);
  padding:12px 14px;border-radius:var(--radius-md);
  background:rgba(var(--text-rgba-base),.025);border:1px solid var(--border);
}
.inv2-meta-k{font-size:12px;color:var(--text3);}
.inv2-meta-v{font-family:var(--font-mono);font-size:14px;font-weight:var(--fw-bold);color:var(--text);font-variant-numeric:tabular-nums;}

/* Signal-Band (Warnungsleiste innerhalb Hero) */
.inv2-signal-band{
  display:flex;align-items:center;gap:12px;width:100%;
  margin-top:20px;padding:12px 16px;border-radius:var(--radius-md);
  background:none;border:1px solid;cursor:pointer;font-family:inherit;
  transition:transform .15s,background .15s;
}
.inv2-signal-band:hover{transform:translateY(-1px);}
.inv2-signal-danger{background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.25);}
.inv2-signal-danger:hover{background:rgba(248,113,113,.12);}
.inv2-signal-warn{background:rgba(232,184,75,.08);border-color:rgba(232,184,75,.25);}
.inv2-signal-warn:hover{background:rgba(232,184,75,.12);}
.inv2-signal-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.inv2-signal-danger .inv2-signal-dot{background:var(--tone-poor-fg);box-shadow:0 0 12px var(--tone-poor-fg);animation:inv2-pulse 2s ease-in-out infinite;}
.inv2-signal-warn .inv2-signal-dot{background:var(--tone-warn-fg);box-shadow:0 0 10px var(--tone-warn-fg);}
.inv2-signal-text{flex:1;text-align:left;font-size:13px;font-weight:var(--fw-semibold);}
.inv2-signal-danger .inv2-signal-text{color:var(--tone-poor-fg);}
.inv2-signal-warn .inv2-signal-text{color:var(--tone-warn-text);}
.inv2-signal-arrow{opacity:.7;display:flex;align-items:center;}
@keyframes inv2-pulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.2);opacity:.7;}}

/* ── Focus-Cards-Row (3 Module) ────────────────────────────── */
.inv2-focus-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md);
}
.inv2-focus-card{
  position:relative;text-align:left;cursor:pointer;font-family:inherit;
  padding:18px 18px 16px;border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--bg2) 0%,var(--bg3) 100%);
  border:1px solid var(--border);
  transition:transform .15s,border-color .15s,box-shadow .15s;
  overflow:hidden;isolation:isolate;
}
.inv2-focus-card::before{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--tone-info-fg) 0%,transparent 60%);
  opacity:.7;
}
.inv2-focus-card:hover{transform:translateY(-2px);border-color:var(--border2);box-shadow:var(--shadow-md);}
.inv2-focus-danger::before{background:linear-gradient(90deg,var(--tone-poor-fg) 0%,transparent 60%);opacity:.85;}
.inv2-focus-warn::before{background:linear-gradient(90deg,var(--tone-warn-fg) 0%,transparent 60%);opacity:.8;}
.inv2-focus-good::before{background:linear-gradient(90deg,var(--tone-good-fg) 0%,transparent 60%);opacity:.7;}

.inv2-focus-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;}
.inv2-focus-label{font-size:11px;font-weight:var(--fw-bold);color:var(--text3);text-transform:uppercase;letter-spacing:.06em;}
.inv2-focus-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--text2);}
.inv2-focus-danger .inv2-focus-icon{background:rgba(248,113,113,.1);color:var(--tone-poor-fg);}
.inv2-focus-warn .inv2-focus-icon{background:rgba(232,184,75,.1);color:var(--tone-warn-text);}
.inv2-focus-good .inv2-focus-icon{background:rgba(83,214,179,.1);color:var(--tone-good-fg);}
.inv2-focus-value{
  font-family:var(--font-mono);font-size:22px;font-weight:var(--fw-bold);color:var(--text-strong);
  line-height:1.1;margin-bottom:2px;font-variant-numeric:tabular-nums;
}
.inv2-focus-danger .inv2-focus-value{color:var(--tone-poor-fg);}
.inv2-focus-warn .inv2-focus-value{color:var(--tone-warn-text);}
.inv2-focus-good .inv2-focus-value{color:var(--tone-good-fg);}
.inv2-focus-sub{font-size:12px;color:var(--text3);}

/* ── Toolbar (Filter + Search + Sort) ──────────────────────── */
.inv2-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);
  flex-wrap:wrap;
}
.inv2-seg-group{
  display:flex;align-items:stretch;gap:2px;padding:4px;
  background:rgba(var(--text-rgba-base),.03);border:1px solid var(--border);border-radius:var(--radius-md);
  overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
}
.inv2-seg-group::-webkit-scrollbar{display:none;}
.inv2-seg{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  padding:7px 12px;border-radius:var(--radius-sm);border:1px solid transparent;
  background:none;color:var(--text2);font-family:inherit;font-size:12px;font-weight:var(--fw-semibold);
  white-space:nowrap;transition:all .15s;scroll-snap-align:start;min-height:36px;
}
.inv2-seg:hover{color:var(--text);background:rgba(var(--text-rgba-base),.04);}
.inv2-seg-active{background:var(--card);color:var(--text-strong);border-color:var(--border2);box-shadow:0 1px 3px rgba(0,0,0,.2);}
.inv2-seg-label{}
.inv2-seg-badge{
  display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;padding:0 6px;
  border-radius:var(--radius-pill);background:rgba(var(--text-rgba-base),.08);
  font-size:10px;font-weight:var(--fw-bold);color:var(--text3);font-variant-numeric:tabular-nums;
}
.inv2-seg-active .inv2-seg-badge{background:rgba(var(--text-rgba-base),.12);color:var(--text);}
.inv2-seg-badge-danger{background:rgba(248,113,113,.14);color:var(--tone-poor-fg);}
.inv2-seg-badge-info{background:rgba(143,198,255,.14);color:var(--tone-info-fg);}
.inv2-seg-badge-good{background:rgba(83,214,179,.14);color:var(--tone-good-fg);}

.inv2-toolbar-right{display:flex;align-items:center;gap:8px;}
.inv2-search{
  position:relative;display:inline-flex;align-items:center;gap:6px;
  padding:0 10px 0 32px;min-height:36px;border-radius:var(--radius-md);
  background:rgba(var(--text-rgba-base),.03);border:1px solid var(--border);
  transition:border-color .15s,background .15s;
}
.inv2-search:focus-within{border-color:var(--accent);background:rgba(var(--text-rgba-base),.05);}
.inv2-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text3);pointer-events:none;display:flex;}
.inv2-search-input{
  background:none;border:none;outline:none;color:var(--text);font-family:inherit;
  font-size:13px;width:220px;padding:0;
}
.inv2-search-input::placeholder{color:var(--text3);}
.inv2-search-input::-webkit-search-cancel-button{display:none;}
select.inv2-sort{
  min-height:36px;padding:0 10px;border-radius:var(--radius-md);
  background:rgba(var(--text-rgba-base),.03);border:1px solid var(--border);color:var(--text);
  font-family:inherit;font-size:13px;cursor:pointer;
  transition:border-color .15s;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237580a5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;background-size:14px;
  padding-right:30px;
}
select.inv2-sort:hover{border-color:var(--border2);}

/* ── Card-List (DAS ist der visuelle Bruch zur Tabelle) ─────── */
.inv2-cards{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md);
}
.inv2-cards-compact{gap:10px;}
.inv2-card{
  position:relative;display:block;width:100%;text-align:left;cursor:pointer;
  padding:18px 20px 16px;padding-left:24px;
  border-radius:var(--radius-lg);background:var(--card);border:1px solid var(--border);
  transition:transform .15s,border-color .15s,box-shadow .15s;
  overflow:hidden;font-family:inherit;
}
.inv2-cards-compact .inv2-card{padding:12px 16px 12px 22px;}
.inv2-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--border);
}
.inv2-card:hover{transform:translateY(-1px);border-color:var(--border2);box-shadow:var(--shadow-sm);}
.inv2-card-danger::before{background:var(--tone-poor-fg);width:4px;}
.inv2-card-warn::before{background:var(--tone-warn-fg);width:4px;}
.inv2-card-info::before{background:var(--tone-info-fg);}
.inv2-card-good::before{background:var(--tone-good-fg);opacity:.4;}
.inv2-card-neutral::before{background:var(--border2);}
.inv2-card-muted::before{background:var(--border);}

.inv2-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-md);margin-bottom:6px;}
.inv2-card-id{display:flex;flex-direction:column;gap:2px;min-width:0;}
.inv2-card-number{font-family:var(--font-mono);font-size:13px;font-weight:var(--fw-bold);color:var(--text-strong);font-variant-numeric:tabular-nums;}
.inv2-card-date{font-size:11px;color:var(--text3);}
.inv2-card-amount{
  font-family:var(--font-mono);font-size:17px;font-weight:var(--fw-heavy);
  color:var(--text-strong);font-variant-numeric:tabular-nums;white-space:nowrap;
  letter-spacing:-.01em;
}
.inv2-card-danger .inv2-card-amount{color:var(--tone-poor-fg);}

.inv2-card-body{margin-bottom:12px;}
.inv2-card-customer{font-size:14px;font-weight:var(--fw-semibold);color:var(--text);margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.inv2-card-status-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.inv2-card-due{font-size:12px;color:var(--text3);}
.inv2-card-due-danger{color:var(--tone-poor-fg);font-weight:var(--fw-semibold);}
.inv2-card-due-warn{color:var(--tone-warn-text);font-weight:var(--fw-semibold);}

.inv2-status-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:var(--radius-pill);
  font-size:11px;font-weight:var(--fw-semibold);
  border:1px solid transparent;
}
.inv2-status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.inv2-status-neutral{color:var(--text2);background:rgba(var(--text-rgba-base),.05);border-color:var(--border);}
.inv2-status-neutral .inv2-status-dot{background:var(--text3);}
.inv2-status-info{color:var(--tone-info-fg);background:var(--tone-info-bg);border-color:var(--tone-info-border);}
.inv2-status-info .inv2-status-dot{background:var(--tone-info-fg);}
.inv2-status-warn{color:var(--tone-warn-text);background:var(--tone-warn-bg);border-color:var(--tone-warn-border);}
.inv2-status-warn .inv2-status-dot{background:var(--tone-warn-fg);}
.inv2-status-danger{color:var(--tone-poor-fg);background:var(--tone-poor-bg);border-color:var(--tone-poor-border);}
.inv2-status-danger .inv2-status-dot{background:var(--tone-poor-fg);}
.inv2-status-good{color:var(--tone-good-fg);background:var(--tone-good-bg);border-color:var(--tone-good-border);}
.inv2-status-good .inv2-status-dot{background:var(--tone-good-fg);}
.inv2-status-muted{color:var(--text3);background:rgba(var(--text-rgba-base),.04);border-color:var(--border);text-decoration:line-through;}
.inv2-status-muted .inv2-status-dot{background:var(--text3);}

.inv2-card-actions{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding-top:12px;border-top:1px solid rgba(var(--text-rgba-base),.06);
}
.inv2-action{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 10px;border-radius:var(--radius-sm);
  background:rgba(var(--text-rgba-base),.03);border:1px solid var(--border);
  color:var(--text2);font-family:inherit;font-size:12px;font-weight:var(--fw-semibold);
  cursor:pointer;transition:all .15s;min-height:32px;
}
.inv2-action:hover{background:rgba(var(--text-rgba-base),.06);color:var(--text);border-color:var(--border2);}
.inv2-action-primary{
  background:linear-gradient(135deg,rgba(232,184,75,.14) 0%,rgba(232,184,75,.08) 100%);
  border-color:rgba(232,184,75,.3);color:var(--accent);
}
.inv2-action-primary:hover{background:rgba(232,184,75,.18);border-color:rgba(232,184,75,.4);color:var(--accent3);}

/* ── Empty / State Cards ────────────────────────────────────── */
.inv2-state-card{
  padding:40px 32px;text-align:center;border-radius:var(--radius-xl);
  background:linear-gradient(135deg,var(--bg2) 0%,var(--bg3) 100%);border:1px solid var(--border);
}
.inv2-state-onboard{text-align:left;}
.inv2-state-kicker{font-size:11px;font-weight:var(--fw-bold);color:rgba(245,208,122,.78);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;}
.inv2-state-icon{
  width:48px;height:48px;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(var(--text-rgba-base),.05);color:var(--text2);
}
.inv2-state-tone-good .inv2-state-icon{background:rgba(83,214,179,.1);color:var(--tone-good-fg);}
.inv2-state-title{font-size:18px;font-weight:var(--fw-bold);color:var(--text-strong);margin-bottom:6px;}
.inv2-state-sub{font-size:13px;color:var(--text3);margin-bottom:20px;line-height:1.5;}
.inv2-state-error{text-align:center;}
.inv2-onboard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md);margin-top:8px;}
.inv2-onboard-card{
  display:block;text-align:left;cursor:pointer;font-family:inherit;
  padding:18px;border-radius:var(--radius-md);
  background:var(--card);border:1px solid var(--border);
  transition:transform .15s,border-color .15s,box-shadow .15s;
}
.inv2-onboard-card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:var(--shadow-sm);}
.inv2-onboard-num{
  width:26px;height:26px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(232,184,75,.12);color:var(--accent);
  font-family:var(--font-mono);font-size:12px;font-weight:var(--fw-bold);margin-bottom:10px;
}
.inv2-onboard-title{font-size:14px;font-weight:var(--fw-bold);color:var(--text-strong);margin-bottom:4px;}
.inv2-onboard-sub{font-size:12px;color:var(--text3);line-height:1.4;}

/* ── Skeleton ──────────────────────────────────────────────── */
.inv2-skeleton-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md);}
.inv2-skeleton-card{height:140px;border-radius:var(--radius-lg);background:linear-gradient(90deg,var(--bg2) 0%,var(--bg3) 50%,var(--bg2) 100%);background-size:200% 100%;animation:inv2-shimmer 1.8s ease-in-out infinite;}
@keyframes inv2-shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* ── Footer-Note ───────────────────────────────────────────── */
.inv2-footer-note{text-align:center;margin-top:var(--space-md);font-size:11px;color:var(--text3);}
.inv2-footer-note a{color:var(--text2);text-decoration:none;border-bottom:1px dashed var(--border2);padding-bottom:1px;}
.inv2-footer-note a:hover{color:var(--text);}

/* ── Responsive ─────────────────────────────────────────────── */
@media(max-width:1024px){
  .inv2-hero-main{grid-template-columns:1fr;gap:24px;}
  .inv2-focus-row{grid-template-columns:repeat(3,1fr);}
  .inv2-cards{grid-template-columns:1fr;}
  .inv2-skeleton-list{grid-template-columns:1fr;}
}
@media(max-width:768px){
  .inv2-hero-shell{padding:22px 20px 20px;}
  .inv2-hero h1{font-size:22px;}
  .inv2-hero-kpi-value{font-size:34px;}
  .inv2-hero-top{margin-bottom:16px;}
  .inv2-focus-row{grid-template-columns:1fr;gap:10px;}
  .inv2-focus-card{padding:14px 16px 12px;}
  .inv2-focus-value{font-size:20px;}
  .inv2-toolbar{flex-direction:column;align-items:stretch;}
  .inv2-toolbar-right{width:100%;flex-wrap:wrap;}
  .inv2-search-input{width:100%;flex:1;}
  .inv2-search{flex:1;}
  select.inv2-sort{width:100%;}
  .inv2-onboard-grid{grid-template-columns:1fr;}
  .inv2-state-card{padding:28px 20px;}
}
@media(max-width:480px){
  .inv2-page{gap:var(--space-lg);}
  .inv2-hero-shell{padding:20px 16px;}
  .inv2-hero h1{font-size:20px;}
  .inv2-hero-kpi-value{font-size:30px;}
  .inv2-year-pill{padding:4px 10px;font-size:11px;}
  .inv2-card{padding:14px 14px 12px 20px;}
  .inv2-card-amount{font-size:15px;}
  .inv2-card-customer{font-size:13px;}
  .inv2-card-actions{flex-direction:row;flex-wrap:wrap;}
  .inv2-action{flex:1;justify-content:center;min-width:0;}
  .inv2-signal-band{padding:10px 12px;}
  .inv2-signal-text{font-size:12px;}
  .inv2-cta-primary{width:100%;justify-content:center;}
}

/* ═══════════════════════════════════════════════════════════════════════
   Belege Month-Filter + Mini-Chart (PR plan-Rev 3, 2026-04-18)
   Design-Review-Rating: 9/10. Alle Decisions aus /plan-design-review
   (D1..D15) in diesem Block umgesetzt. Siehe sorted-zooming-rose.md I.1.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Mini-Chart ─────────────────────────────────────────── */
.belege-month-chart{display:flex;align-items:flex-end;gap:3px;height:54px;margin:12px 0 22px;padding:0 2px;position:relative;}
.belege-month-chart[role="group"]{outline:none;}
.belege-month-chart-bar{flex:1;min-width:18px;min-height:2px;background:rgba(232,184,75,.18);border:none;cursor:pointer;transition:background 150ms ease,height 250ms cubic-bezier(.2,.8,.2,1);position:relative;padding:0;}
/* D10: Extended touch-target via ::before — WCAG 2.5.8 (invisible 44x~90px). */
.belege-month-chart-bar::before{content:'';position:absolute;inset:-13px -2px -20px -2px;}
.belege-month-chart-bar:hover{background:rgba(232,184,75,.32);}
.belege-month-chart-bar:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.belege-month-chart-bar.is-active{background:var(--accent);}
.belege-month-chart-bar.is-zero{background:rgba(117,128,165,.15);}
/* D11: Labels auf 10px + var(--text2) für WCAG-AA-Kontrast bei kleinem Text. */
.belege-month-chart-label{position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--text2);font-family:var(--mono);font-weight:var(--fw-medium);pointer-events:none;white-space:nowrap;}
.belege-month-chart-bar.is-active .belege-month-chart-label{color:var(--accent);font-weight:var(--fw-bold);}
.belege-month-chart-count{position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-size:9px;color:var(--text2);font-family:var(--mono);pointer-events:none;}
/* D2: Skeleton-State — Shimmer-Loading während loadBelegeData. */
.belege-month-chart.is-loading .belege-month-chart-bar{background:linear-gradient(90deg,rgba(117,128,165,.08) 0%,rgba(117,128,165,.18) 50%,rgba(117,128,165,.08) 100%);background-size:200% 100%;animation:bmc-shimmer 1.4s ease-in-out infinite;min-height:24px;cursor:default;pointer-events:none;}
.belege-month-chart.is-loading .belege-month-chart-label,
.belege-month-chart.is-loading .belege-month-chart-count{opacity:.45;}
@keyframes bmc-shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
/* D4: Below-5-Threshold Text. */
.belege-month-chart-threshold-hint{font-size:10.5px;color:var(--text3);text-align:center;padding:6px 0;margin:4px 0 10px;font-family:var(--mono);}

/* ─── Group Header ──────────────────────────────────────── */
.belege-month-group-header{display:flex;align-items:baseline;gap:8px;margin:14px 0 6px;padding-bottom:4px;border-bottom:1px solid var(--border);font-size:10px;font-weight:var(--fw-bold);letter-spacing:.08em;text-transform:uppercase;color:var(--text3);}
.belege-month-group-header .count{font-family:var(--mono);font-weight:var(--fw-semibold);font-size:10px;color:var(--text3);}
.belege-month-group-header-sub{font-size:11px;color:var(--text3);font-weight:var(--fw-medium);margin:2px 0 8px;letter-spacing:normal;text-transform:none;}

/* ─── Filter-Badge (sticky, D1) ─────────────────────────── */
/* Layout-Refactor 2026-05-06: --page-sticky-top + 44px (Filter-Bar-Höhe). */
.belege-month-filter-badge{position:sticky;top:calc(var(--page-sticky-top) + 44px);z-index:85;display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;background:rgba(232,184,75,.08);border:1px solid rgba(232,184,75,.2);border-radius:14px;font-size:11px;color:var(--accent);font-weight:var(--fw-semibold);transition:opacity 200ms ease,transform 200ms ease;margin:8px 0;}
.belege-month-filter-badge .close{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;color:var(--accent);cursor:pointer;border-radius:50%;padding:0;font-size:12px;line-height:1;}
.belege-month-filter-badge .close:hover{background:rgba(232,184,75,.18);}
.belege-month-filter-badge .close:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
.belege-month-filter-badge .info{color:var(--text3);font-weight:var(--fw-medium);margin-left:6px;}

/* ─── Monats-Dropdown — spiegelt .sort-drop ─────────────── */
.month-btn-wrap{position:relative;flex-shrink:0;}
.month-btn{display:flex;align-items:center;gap:3px;padding:4px 9px;border-radius:20px;font-size:10.5px;font-weight:var(--fw-semibold);cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text3);font-family:inherit;transition:all .15s;white-space:nowrap;}
.month-btn:hover{color:var(--text);border-color:var(--border2);}
.month-btn.active{background:rgba(232,184,75,.1);color:var(--accent);border-color:rgba(232,184,75,.28);}
.month-btn[disabled],.month-btn.is-loading{opacity:.6;cursor:wait;}
.month-btn-caret{font-size:7px;opacity:.5;margin-left:1px;}
.month-drop{position:absolute;top:calc(100% + 6px);right:0;min-width:180px;background:var(--card);border:1px solid var(--border2);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.45);z-index:300;overflow:hidden;display:none;transition:opacity 120ms ease,transform 120ms ease;}
.month-drop.open{display:block;}
/* D14: Flip-Variante für Dropdowns (beide Sort + Month). */
.month-drop.flipped,.sort-drop.flipped{top:auto;bottom:calc(100% + 6px);}
.month-opt{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;padding:8px 14px;font-size:12px;color:var(--text2);background:none;border:none;cursor:pointer;font-family:inherit;transition:background .12s;}
.month-opt:hover{background:var(--bg2);}
.month-opt.active{color:var(--accent);font-weight:var(--fw-bold);}
.month-opt .month-opt-count{font-family:var(--mono);font-size:10px;color:var(--text3);font-weight:var(--fw-semibold);}
.month-opt.is-empty .month-opt-count{opacity:.5;}

/* ─── Alle-Tab Collapse-Hint (3A) ───────────────────────── */
.belege-month-collapse-hint{font-size:11px;color:var(--text3);padding:6px 10px;background:rgba(232,184,75,.04);border-left:2px solid rgba(232,184,75,.3);margin:8px 0;line-height:1.5;border-radius:0 4px 4px 0;}

/* ─── Journey-Hint (D6): Zusätzlich N offene im Tab Offen ── */
.belege-month-extra-hint{font-size:11px;color:var(--text3);text-align:center;padding:10px 0;margin-top:6px;border-top:1px dashed var(--border);}
.belege-month-extra-hint a{color:var(--accent);text-decoration:none;font-weight:var(--fw-semibold);cursor:pointer;background:none;border:none;font-family:inherit;font-size:inherit;padding:0;}
.belege-month-extra-hint a:hover{text-decoration:underline;}

/* ─── Onboarding (D7): einmaliger Pointer beim ersten Besuch ── */
.belege-month-onboarding{position:relative;margin:8px 0 24px;padding:10px 14px;background:rgba(232,184,75,.06);border:1px solid rgba(232,184,75,.22);border-radius:8px;font-size:12px;color:var(--text2);display:flex;align-items:center;gap:10px;line-height:1.45;}
.belege-month-onboarding::before{content:'↑';font-size:18px;color:var(--accent);line-height:1;flex-shrink:0;}
.belege-month-onboarding-text strong{color:var(--text);font-weight:var(--fw-bold);}
.belege-month-onboarding .dismiss{margin-left:auto;background:var(--accent);color:var(--accent-ink);border:none;padding:4px 12px;border-radius:14px;font-size:11px;font-weight:var(--fw-bold);cursor:pointer;font-family:inherit;flex-shrink:0;}
.belege-month-onboarding .dismiss:hover{background:var(--accent2);}

/* ─── Error-Zeile (D3) ──────────────────────────────────── */
.belege-load-error{padding:8px 12px;background:rgba(248,113,113,.06);border:1px solid rgba(248,113,113,.2);border-radius:8px;color:var(--red);font-size:12px;margin-bottom:10px;display:flex;align-items:center;gap:6px;line-height:1.45;}
.belege-load-error button{background:none;border:none;color:var(--red);text-decoration:underline;cursor:pointer;font-family:inherit;font-size:inherit;padding:0;margin-left:auto;font-weight:var(--fw-semibold);}

/* ─── Datum-Chip in Compact-Card (A) ────────────────────── */
.beleg-date-chip{font-family:var(--mono);font-size:11px;color:var(--text3);min-width:52px;flex-shrink:0;letter-spacing:-.02em;}
.beleg-date-chip.is-upload{opacity:.65;}
.beleg-date-chip.is-upload::after{content:'up';font-size:8px;margin-left:3px;padding:1px 3px;border-radius:3px;background:rgba(117,128,165,.15);color:var(--text3);letter-spacing:0;}

/* ─── Mobile Responsive ─────────────────────────────────── */
@media (max-width:640px){
  .belege-month-chart{height:48px;margin-bottom:26px;}
  .belege-month-chart-label{font-size:9px;}
  .belege-month-chart-count{font-size:8px;}
  .belege-month-filter-badge{font-size:10.5px;padding:3px 5px 3px 9px;}
  .month-drop{min-width:160px;}
}
@media (max-width:360px){
  .belege-month-chart-bar{min-width:14px;}
  .belege-month-chart-label{transform:translateX(-50%) rotate(-35deg);transform-origin:center top;font-size:8px;bottom:-20px;}
  .belege-month-chart{margin-bottom:32px;}
}

/* ─── Reduced-Motion (D13): Alle neuen Transitions deaktivieren ── */
@media (prefers-reduced-motion:reduce){
  .belege-month-chart-bar,
  .belege-month-filter-badge,
  .month-drop{transition:none;}
  .belege-month-chart.is-loading .belege-month-chart-bar{animation:none;background:rgba(117,128,165,.12);}
}

/* ─── Light-Mode Parity (D9) ────────────────────────────── */
body.light .belege-month-chart-bar{background:rgba(232,184,75,.15);}
body.light .belege-month-chart-bar:hover{background:rgba(232,184,75,.28);}
body.light .belege-month-chart-bar.is-zero{background:rgba(0,0,0,.05);}
body.light .belege-month-chart-label{color:var(--text2);}
body.light .belege-month-chart-count{color:var(--text2);}
body.light .belege-month-chart.is-loading .belege-month-chart-bar{background:linear-gradient(90deg,rgba(0,0,0,.04) 0%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.04) 100%);background-size:200% 100%;}
body.light .belege-month-group-header{color:var(--text3);border-color:rgba(0,0,0,.08);}
body.light .belege-month-filter-badge{background:rgba(232,184,75,.1);border-color:rgba(232,184,75,.22);}
body.light .belege-month-collapse-hint{background:rgba(232,184,75,.06);}
body.light .belege-month-onboarding{background:rgba(232,184,75,.08);}
body.light .month-drop{box-shadow:0 8px 24px rgba(0,0,0,.1);}
body.light .belege-load-error{background:rgba(248,113,113,.06);}
body.light .beleg-date-chip.is-upload::after{background:rgba(0,0,0,.05);}
body.light .inv3-form-card{background:linear-gradient(180deg,rgba(var(--surface-solid-rgba-base),.94),rgba(246,248,252,.98));box-shadow:0 18px 34px rgba(var(--ink-rgba-base),.08);}
body.light .inv3-preview-drawer-panel{background:linear-gradient(180deg,rgba(var(--surface-solid-rgba-base),.98),rgba(246,248,252,.98));box-shadow:0 28px 72px rgba(var(--ink-rgba-base),.16);}
body.light .inv3-customer-contact-summary{background:linear-gradient(180deg,rgba(232,184,75,.08),rgba(var(--surface-solid-rgba-base),.82));}
body.light .inv3-customer-empty-note{background:rgba(0,0,0,.02);}
body.light .inv3-form-sidebar-tabs{background:rgba(0,0,0,.02);}

/* Touch-Target-Floor (WCAG 2.5.5 / Apple HIG) auf coarse Pointern — app-weiter
   WebKit-Sweep (iPhone 13, ergänzend zu #3721): month-btn 178×42 (Basis ohne
   height → ~26px hoch). min-height + padding hebt die Hit-Area, Optik kompakt.
   Schwester .sort-btn wird im bestehenden _10-shell-coarse-Block gehoben. */
@media (pointer: coarse) {
  .month-btn { min-height: 44px; padding-block: 11px; }
}

/* ═══ phase 2 primitives (γ1) ═══ */

/* Settings Accordion (<details>-native) */
.inv3-settings-accordion{display:flex;flex-direction:column;gap:14px;}
.inv3-settings-accordion-section{border:1px solid rgba(var(--surface-rgba-base),.1);border-radius:22px;background:linear-gradient(180deg,rgba(var(--surface-rgba-base),.055),rgba(var(--surface-rgba-base),.028));overflow:hidden;box-shadow:0 12px 28px rgba(0,0,0,.18);}
.inv3-settings-accordion-summary{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:14px;padding:18px 20px;cursor:pointer;list-style:none;}
.inv3-settings-accordion-summary::-webkit-details-marker{display:none;}
.inv3-settings-accordion-chevron{width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:rgba(var(--text-rgba-base),.68);transition:transform var(--tr-base),color var(--tr-base);}
.inv3-settings-accordion-section[open] > .inv3-settings-accordion-summary .inv3-settings-accordion-chevron{transform:rotate(90deg);color:var(--text-strong);}
.inv3-settings-accordion-main{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px;}
.inv3-settings-accordion-title{font-size:var(--fs-md);font-weight:var(--fw-bold);letter-spacing:.01em;color:var(--text-strong);}
.inv3-settings-accordion-subtitle{font-size:13px;line-height:1.55;color:rgba(var(--text-rgba-base),.62);}
.inv3-settings-accordion-optional{justify-self:end;font-size:11px;padding:4px 10px;border-radius:999px;background:rgba(var(--surface-rgba-base),.08);color:rgba(var(--text-rgba-base),.6);text-transform:uppercase;letter-spacing:.08em;}
.inv3-settings-accordion-body{padding:18px 20px 24px;display:flex;flex-direction:column;gap:18px;border-top:1px solid rgba(var(--surface-rgba-base),.08);}
.inv3-settings-stack{display:flex;flex-direction:column;gap:16px;padding-top:4px;}
.inv3-settings-stack > .inv-form-row{margin-bottom:0;}
.inv3-settings-stack .inv-form-row > label{display:block;margin-bottom:10px;}
.inv3-settings-help{margin-top:8px;font-size:12px;line-height:1.6;color:rgba(var(--text-rgba-base),.62);}
.inv3-settings-dependent-row{padding-top:4px;}
.inv3-settings-dependent-row.is-hidden{display:none!important;}
body.light .inv3-settings-accordion-section{border-color:rgba(var(--ink-rgba-base),.1);background:linear-gradient(180deg,rgba(var(--surface-solid-rgba-base),.96),rgba(246,248,252,.98));box-shadow:0 12px 24px rgba(var(--ink-rgba-base),.08);}
body.light .inv3-settings-accordion-optional{background:rgba(var(--ink-rgba-base),.06);color:rgba(var(--ink-rgba-base),.55);}
body.light .inv3-settings-help{color:rgba(var(--ink-rgba-base),.62);}

/* Document Dates */
.inv3-document-dates{display:flex;flex-direction:column;gap:20px;}
.inv3-document-dates .inv-form-grid{gap:14px;}
.inv3-document-dates .inv-form-row{margin-bottom:0;}
.inv3-document-dates-performance{padding:0;}
.inv3-subtle-section{background:linear-gradient(180deg,rgba(var(--surface-rgba-base),.048),rgba(var(--surface-rgba-base),.026));}
.inv3-notes-textarea{width:100%;min-height:132px;resize:vertical;line-height:1.65;}
.inv3-inline-toggle{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:14px 16px;border-radius:18px;border:1px solid rgba(var(--surface-rgba-base),.1);background:rgba(var(--surface-rgba-base),.032);font-size:14px;font-weight:var(--fw-semibold);color:var(--text-strong);cursor:pointer;}
.inv3-inline-toggle input[type="checkbox"]{width:18px;height:18px;accent-color:var(--accent);}
.inv3-inline-toggle--field{align-self:end;justify-content:flex-start;}
.inv3-inline-toggle--compact{padding:10px 14px;min-height:48px;}
.rec-form-card .inv-form-row > label{display:block;margin-bottom:8px;}
body.light .inv3-subtle-section{background:linear-gradient(180deg,rgba(var(--surface-solid-rgba-base),.98),rgba(246,248,252,.98));}
body.light .inv3-inline-toggle{border-color:rgba(var(--ink-rgba-base),.1);background:rgba(var(--ink-rgba-base),.04);color:rgba(var(--ink-rgba-base),.9);}
/* Bereich 3 (Plan): Sub-Header für Zahlungskonditionen-Block.
   Visuelle Klammer um Zahlungsziel + Skonto, kommuniziert „das gehört
   zusammen". Mini-Kicker im DESIGN.md-Stil (11px, uppercase, letter-spacing). */
.inv3-payment-section{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(var(--surface-rgba-base),.07);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.inv3-payment-section-kicker{
  font-size:11px;
  font-weight:var(--fw-semibold);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(var(--text-rgba-base),.5);
}
.inv3-payment-row{align-items:flex-start;gap:12px;margin-bottom:0;}
.inv3-payment-controls{display:grid;grid-template-columns:minmax(0,220px) minmax(0,96px);gap:10px;align-items:start;}
.inv3-payment-preset{min-width:0;}
.inv3-payment-days{max-width:none;}
.inv3-payment-days.is-hidden{display:none!important;}
.inv3-discount-toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;padding:14px 16px;border-radius:18px;border:1px solid rgba(var(--surface-rgba-base),.08);background:rgba(var(--surface-rgba-base),.032);}
.inv3-discount-toggle input[type="checkbox"]{width:18px;height:18px;accent-color:var(--accent);}
.inv3-discount-panel{display:flex;flex-direction:column;gap:14px;margin-top:16px;padding-top:16px;border-top:1px solid rgba(var(--surface-rgba-base),.08);}
.inv3-discount-panel.is-hidden{display:none!important;}
body.light .inv3-discount-panel{border-color:rgba(var(--ink-rgba-base),.08);}

/* B2B Hint */
.inv3-b2b-hint{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;background:rgba(232,184,75,.12);color:var(--accent);font-size:13px;font-weight:var(--fw-semibold);letter-spacing:.01em;}
body.light .inv3-b2b-hint{background:rgba(232,184,75,.12);color:var(--accent2);}
/* Pack B F5 (2026-04-20): Inline-Variante des §13b-Hints im Rechnungstyp-
   Accordion-Body. Dezenter: kein Pill, keine min-height, sondern ein
   Hint-Zeilenelement unter dem Typ-Select, mit Accent-Color als Akzent. */
.inv3-b2b-hint--inline{display:block;min-height:0;margin-top:8px;padding:0;background:transparent;border-radius:0;font-size:12px;font-weight:var(--fw-medium,500);color:rgba(var(--text-rgba-base),.62);letter-spacing:normal;line-height:1.5;}
.inv3-b2b-hint--inline::before{content:"§13b  ";color:var(--accent);font-weight:var(--fw-semibold);letter-spacing:.01em;}
body.light .inv3-b2b-hint--inline{color:rgba(var(--ink-rgba-base),.62);}
body.light .inv3-b2b-hint--inline::before{color:var(--accent2);}

/* Rhythmus-Radio-Pills (Recurrence)
   2026-04-26: kompakter (38px statt 54px, 10px statt 18px Radius, 8/14 padding,
   13px Schrift). Wirkt auch auf die Filter-Tabs in inv3-form.js:1578 — wurde
   bewusst behalten als gemeinsame Sprache, nicht als Alias-Kette.
   Touch-Target ≥ 44px wird auf Mobile via Wrapper-Padding sichergestellt. */
.inv3-rhythm-pills{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;padding:2px 0;}
.inv3-rhythm-pill{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 14px;border-radius:10px;border:1px solid rgba(var(--surface-rgba-base),.12);cursor:pointer;font-size:13px;font-weight:var(--fw-semibold);transition:border-color var(--tr-fast),background var(--tr-fast),color var(--tr-fast);}
.inv3-rhythm-pill:hover{border-color:rgba(232,184,75,.5);}
.inv3-rhythm-pill input[type="radio"]{position:absolute;opacity:0;pointer-events:none;}
.inv3-rhythm-pill--active{background:rgba(232,184,75,.14);border-color:var(--accent);color:var(--accent);}
body.light .inv3-rhythm-pill{border-color:rgba(var(--ink-rgba-base),.12);}
body.light .inv3-rhythm-pill--active{background:rgba(232,184,75,.18);color:var(--accent2);}

/* ─────────────────────────────────────────────────────────────────────────
   Taxtello v1 Tokens (2026-04-26): .tx-switch, .tx-segmented, .tx-form-hint
   Eingeführt im Recurrence-Form-Redesign. Reuse-bar für künftige On/Off-
   Settings, Tab-Wechsel und Form-Hints.
   ───────────────────────────────────────────────────────────────────────── */

/* tx-switch — echter Toggle-Switch (Track + Knob) */
.tx-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;min-height:44px;padding:4px 0;}
.tx-switch input[type="checkbox"]{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
.tx-switch-track{position:relative;display:inline-block;width:36px;height:20px;border-radius:10px;background:rgba(var(--surface-rgba-base),.12);border:1px solid rgba(var(--surface-rgba-base),.18);transition:background var(--tr-fast),border-color var(--tr-fast);flex:0 0 auto;}
.tx-switch-knob{position:absolute;top:1px;left:1px;width:16px;height:16px;border-radius:50%;background:rgba(var(--text-rgba-base),.6);transition:transform var(--tr-base),background var(--tr-fast);}
.tx-switch input:checked ~ .tx-switch-track{background:rgba(232,184,75,.22);border-color:var(--accent);}
.tx-switch input:checked ~ .tx-switch-track .tx-switch-knob{transform:translateX(16px);background:var(--accent);}
.tx-switch input:focus-visible ~ .tx-switch-track{outline:2px solid var(--accent);outline-offset:2px;}
.tx-switch-label{font-size:13px;color:rgba(var(--text-rgba-base),.72);line-height:1.4;}
.tx-switch input:checked ~ .tx-switch-label{color:var(--text-strong);}
body.light .tx-switch-track{background:rgba(var(--ink-rgba-base),.08);border-color:rgba(var(--ink-rgba-base),.12);}
body.light .tx-switch-knob{background:rgba(var(--ink-rgba-base),.55);}
body.light .tx-switch input:checked ~ .tx-switch-track{background:rgba(232,184,75,.22);}
body.light .tx-switch input:checked ~ .tx-switch-track .tx-switch-knob{background:var(--accent2);}

/* tx-segmented — kompakte Tab-Leiste mit Container-Background (Customer-Tabs) */
.tx-segmented{display:inline-flex;gap:4px;padding:3px;background:rgba(var(--surface-rgba-base),.06);border:1px solid rgba(var(--surface-rgba-base),.12);border-radius:12px;}
.tx-segmented-item{padding:6px 14px;min-height:34px;border-radius:9px;border:0;background:transparent;color:rgba(var(--text-rgba-base),.72);font-size:13px;font-weight:var(--fw-semibold);cursor:pointer;transition:background var(--tr-fast),color var(--tr-fast);font-family:inherit;}
.tx-segmented-item:hover{color:var(--text-strong);}
.tx-segmented-item[aria-selected="true"]{background:var(--card);color:var(--text-strong);box-shadow:0 1px 2px rgba(0,0,0,.04);}
.tx-segmented-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
body.light .tx-segmented{background:rgba(var(--ink-rgba-base),.05);border-color:rgba(var(--ink-rgba-base),.08);}
body.light .tx-segmented-item[aria-selected="true"]{background:white;color:rgba(var(--ink-rgba-base),.92);}

/* tx-form-hint — dezente Info-Zeile mit kleinem Inline-Icon, kein Input-Look */
.tx-form-hint{display:inline-flex;align-items:center;gap:6px;padding:8px 0;font-size:12px;line-height:1.5;color:rgba(var(--text-rgba-base),.6);}
.tx-form-hint svg{flex:0 0 auto;opacity:.7;}
body.light .tx-form-hint{color:rgba(var(--ink-rgba-base),.55);}

/* rec-onboarding-hint — einmaliger Banner für Erstanwender */
.rec-onboarding-hint{display:flex;align-items:center;gap:10px;margin:0 0 18px 0;padding:10px 14px;background:rgba(232,184,75,.06);border:1px solid rgba(232,184,75,.18);border-radius:10px;color:var(--text-strong);font-size:13px;line-height:1.5;}
.rec-onboarding-hint svg{flex:0 0 auto;color:var(--accent);}
body.light .rec-onboarding-hint{background:rgba(232,184,75,.10);border-color:rgba(232,184,75,.30);color:rgba(var(--ink-rgba-base),.92);}
body.light .rec-onboarding-hint svg{color:var(--accent2);}

/* rec-rhythm-rule — Inline-Rule-Satz mit Number-Chips */
.rec-rhythm-rule{display:flex;flex-wrap:wrap;align-items:center;gap:8px 6px;font-size:14px;line-height:1.7;color:var(--text-strong);margin:14px 0 10px;}
.rec-rhythm-rule-text{color:rgba(var(--text-rgba-base),.78);}
.rec-rhythm-rule label{display:inline-flex;align-items:center;min-height:44px;}
.rec-rhythm-inline-input{width:64px;height:36px;padding:0 8px;text-align:center;border-radius:8px;border:1px solid rgba(var(--surface-rgba-base),.16);background:rgba(var(--surface-rgba-base),.04);color:var(--text-strong);font-variant-numeric:tabular-nums;font-size:14px;font-weight:var(--fw-semibold);transition:border-color var(--tr-fast),background var(--tr-fast);}
.rec-rhythm-inline-input:focus{outline:none;border-color:var(--accent);background:rgba(var(--surface-rgba-base),.06);}
.rec-rhythm-inline-select{height:36px;padding:0 26px 0 10px;border-radius:8px;border:1px solid rgba(var(--surface-rgba-base),.16);background:rgba(var(--surface-rgba-base),.04);color:var(--text-strong);font-size:14px;font-weight:var(--fw-semibold);}
.rec-rhythm-inline-select:focus{outline:none;border-color:var(--accent);}
body.light .rec-rhythm-inline-input{border-color:rgba(var(--ink-rgba-base),.14);background:white;color:rgba(var(--ink-rgba-base),.92);}
body.light .rec-rhythm-inline-input:focus{border-color:var(--accent);}
body.light .rec-rhythm-inline-select{border-color:rgba(var(--ink-rgba-base),.14);background:white;color:rgba(var(--ink-rgba-base),.92);}

/* rec-rhythm-active-row — eigene Zeile für den Aktiv-Switch (statt Grid-Item) */
.rec-rhythm-active-row{margin-top:4px;}

/* rec-pause-badge — Badge oben rechts in der Serie-Card wenn pausiert */
.rec-pause-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;background:rgba(var(--surface-rgba-base),.08);border:1px solid rgba(var(--surface-rgba-base),.14);color:rgba(var(--text-rgba-base),.7);font-size:11.5px;font-weight:var(--fw-semibold);letter-spacing:.02em;text-transform:uppercase;}
body.light .rec-pause-badge{background:rgba(var(--ink-rgba-base),.06);border-color:rgba(var(--ink-rgba-base),.10);color:rgba(var(--ink-rgba-base),.62);}

/* rec-rhythm-next — Mini-Timeline für Nächste Ausstellungen mit Fälligkeit */
.rec-rhythm-timeline{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0;font-variant-numeric:tabular-nums;}
.rec-rhythm-timeline li{display:flex;align-items:baseline;gap:10px;padding:8px 0;border-top:1px solid rgba(var(--surface-rgba-base),.06);font-size:13px;}
.rec-rhythm-timeline li:first-child{border-top:0;}
.rec-rhythm-timeline-date{flex:0 0 auto;color:var(--text-strong);font-weight:var(--fw-semibold);}
.rec-rhythm-timeline-due{flex:1 1 auto;color:rgba(var(--text-rgba-base),.6);}
.rec-rhythm-timeline-due::before{content:" · ";margin-right:4px;color:rgba(var(--text-rgba-base),.4);}
.rec-rhythm-timeline-empty{padding:10px 0;font-size:13px;color:rgba(var(--text-rgba-base),.55);display:inline-flex;align-items:center;gap:8px;}
.rec-rhythm-timeline-empty svg{opacity:.6;}
.rec-rhythm-timeline.is-paused li{opacity:.55;}
.rec-rhythm-timeline-end-note{padding:8px 0 4px;font-size:12px;color:rgba(var(--text-rgba-base),.55);}
body.light .rec-rhythm-timeline li{border-top-color:rgba(var(--ink-rgba-base),.06);}
body.light .rec-rhythm-timeline-due{color:rgba(var(--ink-rgba-base),.55);}

/* Inline-Fehler unter einem Form-Feld */
.tx-inline-error{display:block;margin-top:4px;padding:0;font-size:12px;line-height:1.4;color:var(--tone-poor-fg);}
body.light .tx-inline-error{color:var(--tone-poor-fg);}

/* Reduced-Motion: alle neuen Transitions auf 0ms */
@media (prefers-reduced-motion: reduce){
  .tx-switch-track,.tx-switch-knob,.tx-segmented-item{transition:none!important;}
  .rec-rhythm-timeline-date,.rec-rhythm-timeline-due{transition:none!important;}
}

.inv3-rec-date-grid{margin-top:4px;}
.inv3-rec-next{margin-top:4px;padding:18px 18px 16px;border-radius:18px;background:rgba(var(--surface-rgba-base),.038);border:1px solid rgba(var(--surface-rgba-base),.08);}
.inv3-rec-next-title{margin:0 0 8px 0;font-size:13px;font-weight:var(--fw-semibold);letter-spacing:.01em;color:rgba(var(--text-rgba-base),.72);}
.inv3-rec-next-list{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:6px;font-variant-numeric:tabular-nums;}
.inv3-rec-next-list li{padding:2px 0;}
.inv3-rec-manual-info{margin:0;padding:14px 16px;border-radius:18px;background:rgba(var(--surface-rgba-base),.03);border:1px solid rgba(var(--surface-rgba-base),.08);color:rgba(var(--text-rgba-base),.72);font-size:13px;line-height:1.6;}
/* 2026-04-26: rec-auto-send-info zur Info-Zeile mit Icon (kein Input-Look mehr) */
.rec-auto-send-info{display:inline-flex;align-items:center;gap:6px;margin:8px 0 0;padding:6px 0;font-size:12px;line-height:1.5;color:rgba(var(--text-rgba-base),.6);background:transparent;border:0;border-radius:0;}
.rec-auto-send-info svg{flex:0 0 auto;opacity:.7;}
body.light .inv3-rec-next{background:rgba(var(--ink-rgba-base),.03);border-color:rgba(var(--ink-rgba-base),.08);}
body.light .inv3-rec-manual-info{background:rgba(var(--ink-rgba-base),.04);color:rgba(var(--ink-rgba-base),.62);}
body.light .rec-auto-send-info{background:transparent;color:rgba(var(--ink-rgba-base),.55);}

/* Items Builder
   Card-Builder ersetzt die alte Tabellenlogik. Frühere F6-Spaltenbreiten für
   `.inv3-items-cell--actions` sind damit kein Runtime-Vertrag mehr; die
   relevante Invariante ist jetzt ausreichend Raum im Card-Header/-Menu. */
.inv3-items-builder{display:grid;gap:10px;align-content:start;container-type:inline-size;}
.inv3-items-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;justify-content:stretch;gap:12px;}
.inv3-items-toolbar-copy{min-width:0;flex:1 1 280px;}
.inv3-items-toolbar-copy:empty{display:none;}
.inv3-items-toolbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-left:0;}
.inv3-items-toolbar-btn{min-height:38px;padding:0 14px;border-radius:8px;}
.inv3-items-toolbar-plus-icon{vertical-align:-2px;margin-right:6px;}
.inv3-items-toolbar-btn--secondary{border-color:rgba(var(--surface-rgba-base),.12);background:rgba(var(--surface-rgba-base),.04);}
.inv3-items-toolbar-btn--primary{box-shadow:none;}
.inv3-items-toolbar-btn--primary:hover{box-shadow:none;}
/* Legend wurde im Position-Card-Redesign entfernt (siehe plan: Section 1e) */
.inv3-items-list{display:grid;gap:10px;align-content:start;}
.inv3-item-card{border:1px solid rgba(var(--surface-rgba-base),.1);border-radius:8px;background:rgba(var(--surface-rgba-base),.035);box-shadow:0 6px 14px rgba(0,0,0,.1);position:relative;isolation:isolate;background-clip:padding-box;}
.inv3-item-card-head{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid rgba(var(--surface-rgba-base),.07);min-height:56px;}
.inv3-item-card-title{font-size:15px;line-height:1.25;color:var(--text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.inv3-item-card-meta{font-size:12.5px;line-height:1.45;color:rgba(var(--text-rgba-base),.62);}
.inv3-item-card-summary{min-width:104px;display:flex;flex-direction:column;gap:2px;align-items:flex-end;text-align:right;}
.inv3-item-card-total-label{font-size:11px;font-weight:var(--fw-semibold);letter-spacing:.08em;text-transform:uppercase;color:rgba(var(--text-rgba-base),.5);}
.inv3-item-card-total{font-size:18px;line-height:1;font-family:var(--font-mono);color:var(--text-strong);}
.inv3-item-card-tax{font-size:11.5px;line-height:1.45;color:rgba(var(--text-rgba-base),.6);}
.inv3-item-card-actions{display:flex;align-items:center;gap:8px;position:relative;z-index:1;}
.inv3-item-iconbtn{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;padding:0 9px;border-radius:8px;border:1px solid rgba(var(--surface-rgba-base),.12);background:rgba(var(--surface-rgba-base),.04);font-size:13px;line-height:1;color:rgba(var(--text-rgba-base),.74);cursor:pointer;transition:border-color var(--tr-fast),background var(--tr-fast),transform var(--tr-fast);}
.inv3-item-iconbtn:hover{border-color:rgba(232,184,75,.34);background:rgba(232,184,75,.12);transform:translateY(-1px);}
.inv3-item-collapse,.inv3-item-menu-trigger{min-width:36px;min-height:36px;}
/* 2026-04-28 Composer-Refinement: vorher Textbutton (82 px breit, „Bearbeiten"/
   „Schließen"). Jetzt reiner Icon-Button mit Chevron-SVG. Kombinierter Selector
   (.inv3-item-iconbtn.inv3-item-collapse, Spec 0,0,2,0) sticht generic
   .inv3-item-iconbtn (0,0,1,0) und Composer-Override .inv3-line-actions
   .inv3-item-iconbtn (0,0,2,0) deterministisch für padding. min-width bleibt
   vom Composer-Layer (Z.~11960) mit 32 px gesetzt — bewusst Stripe-konform. */
.inv3-item-iconbtn.inv3-item-collapse{
  padding:0;
  transition:border-color var(--tr-fast),background var(--tr-fast),transform var(--tr-fast);
}
/* Chevron rotiert via aria-expanded; Default (offen, expanded=true) zeigt ▾ */
.inv3-item-collapse svg{transition:transform var(--tr-fast);}
.inv3-item-collapse[aria-expanded="false"] svg{transform:rotate(-90deg);}
.inv3-items-builder--single-active .inv3-item-card[data-collapsed="1"] .inv3-item-card-head{border-bottom-color:transparent;}
.inv3-items-builder--single-active .inv3-item-card[data-collapsed="1"] .inv3-item-card-body{display:none;}
.inv3-items-builder--single-active .inv3-item-card[data-active="1"]{border-color:rgba(232,184,75,.18);box-shadow:0 8px 18px rgba(0,0,0,.13);}
.inv3-item-menu-shell{position:relative;display:inline-flex;}
.inv3-item-menu{position:absolute;top:calc(100% + 8px);right:0;display:flex;flex-direction:column;min-width:200px;padding:8px;border-radius:8px;border:1px solid rgba(var(--surface-rgba-base),.12);background:linear-gradient(180deg,rgba(16,21,39,.98),rgba(13,18,34,.98));box-shadow:0 20px 40px rgba(0,0,0,.34);z-index:24;}
.inv3-item-menu[hidden]{display:none!important;}
/* 2026-04-28 Hotfix Bug 3 — Stacking-Context-Trap.
   `.inv3-item-card { isolation: isolate }` (Z. 10837) erzeugt für jede Card
   einen eigenen Stacking-Context. Das Overflow-Menu hat z-index:24, gilt aber
   NUR innerhalb dieser Card. Die NÄCHSTE Card (in Source-Order weiter unten)
   ist als Sibling-Stacking-Context oben drauf → das Menu wird visuell von der
   nächsten Card überdeckt.
   Fix: Sobald irgendeine Shell .is-open ist, hebt die Card ihren z-index in
   der Liste an (.inv3-items-list legt keinen eigenen Context auf). `:has()`
   ist Safari 15.4+/Chromium 105+/Firefox 121+, was unsere Soft-Tokens-Baseline
   abdeckt. Fallback: ohne `:has()`-Support bleibt das alte Verhalten — Menü
   funktioniert, sieht nur weiterhin überdeckt aus. */
.inv3-item-card:has(.inv3-item-menu-shell.is-open){z-index:30;}
.inv3-item-menu-item{appearance:none;border:none;background:transparent;color:var(--text);text-align:left;padding:10px 12px;border-radius:8px;font-family:var(--font-sans);font-size:13px;cursor:pointer;transition:background var(--tr-fast),color var(--tr-fast);}
.inv3-item-menu-item:hover{background:rgba(var(--surface-rgba-base),.08);}
.inv3-item-menu-item.is-danger{color:var(--tone-poor-fg);}
.inv3-item-card-body{display:flex;flex-direction:column;gap:8px;padding:8px 12px 12px;}
.inv3-item-main,.inv3-item-field{display:flex;flex-direction:column;gap:5px;}
.inv3-item-field-label{font-size:12px;font-weight:var(--fw-semibold);letter-spacing:.01em;text-transform:none;color:rgba(var(--text-rgba-base),.7);}
.inv3-items-desc-input{resize:vertical;min-height:52px;line-height:1.45;}
.inv3-item-fields{display:grid;gap:8px;}
.inv3-item-fields--count-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.inv3-item-fields--count-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.inv3-item-fields--count-4{grid-template-columns:minmax(86px,.7fr) minmax(110px,.8fr) minmax(120px,1fr) minmax(104px,.72fr);}
.inv3-item-static{min-height:46px;display:flex;align-items:center;padding:0 13px;border-radius:14px;border:1px solid rgba(var(--surface-rgba-base),.08);background:rgba(var(--surface-rgba-base),.028);color:var(--text-strong);}
.inv3-item-field-hint{font-size:11px;line-height:1.4;color:rgba(var(--text-rgba-base),.46);}
.inv3-item-field-hint:empty{display:none;}
.inv3-items-empty{padding:18px 16px;border:1px dashed rgba(var(--surface-rgba-base),.14);border-radius:8px;background:rgba(var(--surface-rgba-base),.02);display:flex;flex-direction:column;gap:10px;}
.inv3-items-empty strong{font-size:var(--fs-md);color:var(--text-strong);}
.inv3-items-empty p{margin:0;max-width:56ch;color:rgba(var(--text-rgba-base),.64);line-height:1.6;}
.inv3-items-empty-actions{display:flex;gap:10px;flex-wrap:wrap;}

/* Template + Prompt Dialogs */
.inv3-template-modal,.inv3-prompt-modal{position:fixed;inset:0;width:100vw;max-width:100vw;height:100vh;max-height:100vh;padding:16px;border:none;background:transparent;color:inherit;margin:0;}
.inv3-template-modal[open],.inv3-prompt-modal[open]{display:flex;align-items:center;justify-content:center;}
.inv3-template-modal::backdrop,.inv3-prompt-modal::backdrop{background:rgba(6,10,20,.62);}
.inv3-template-modal-panel,.inv3-prompt-modal-panel{display:flex;flex-direction:column;gap:16px;width:min(720px,calc(100vw - 32px));max-width:100%;max-height:min(88vh,760px);margin:auto;padding:22px;border-radius:24px;border:1px solid rgba(var(--surface-rgba-base),.12);background:linear-gradient(180deg,rgba(16,21,39,.98),rgba(13,18,34,.98));box-shadow:0 26px 70px rgba(0,0,0,.36);position:relative;overflow:hidden;background-clip:padding-box;clip-path:inset(0 round 24px);}
.inv3-template-modal-head,.inv3-prompt-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
.inv3-template-modal-copy,.inv3-prompt-modal-copy{display:flex;flex-direction:column;gap:4px;min-width:0;}
.inv3-template-modal-kicker,.inv3-prompt-modal-kicker{font-size:11px;font-weight:var(--fw-semibold);letter-spacing:.08em;text-transform:uppercase;color:rgba(var(--text-rgba-base),.48);}
.inv3-template-modal-title,.inv3-prompt-modal-title{font-size:22px;line-height:1.1;color:var(--text-strong);}
.inv3-template-modal-subtitle,.inv3-prompt-modal-subtitle{margin:0;font-size:13px;line-height:1.6;color:rgba(var(--text-rgba-base),.62);}
.inv3-template-modal-search{padding-top:2px;}
.inv3-template-modal-list{display:flex;flex-direction:column;gap:8px;min-height:0;max-height:min(54vh,520px);overflow:auto;}
.inv3-template-entry{appearance:none;border:none;background:rgba(var(--surface-rgba-base),.032);border:1px solid rgba(var(--surface-rgba-base),.08);border-radius:18px;padding:14px 16px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;text-align:left;color:inherit;cursor:pointer;transition:border-color var(--tr-fast),background var(--tr-fast),transform var(--tr-fast);}
.inv3-template-entry:hover{border-color:rgba(232,184,75,.28);background:rgba(var(--surface-rgba-base),.055);transform:translateY(-1px);}
.inv3-template-entry-copy{display:flex;flex-direction:column;gap:4px;min-width:0;}
.inv3-template-entry-copy strong{font-size:15px;line-height:1.35;color:var(--text-strong);}
.inv3-template-entry-copy span{font-size:13px;line-height:1.55;color:rgba(var(--text-rgba-base),.62);}
.inv3-template-entry-meta{font-size:12px;font-family:var(--font-mono);white-space:nowrap;color:rgba(var(--text-rgba-base),.68);}
.inv3-template-empty{padding:22px 20px;border:1px dashed rgba(var(--surface-rgba-base),.12);border-radius:18px;background:rgba(var(--surface-rgba-base),.03);}
.inv3-template-empty strong{display:block;margin-bottom:6px;font-size:15px;color:var(--text-strong);}
.inv3-template-empty p{margin:0;font-size:13px;line-height:1.6;color:rgba(var(--text-rgba-base),.62);}
.inv3-prompt-modal-body{display:flex;flex-direction:column;gap:10px;}
.inv3-prompt-modal-label{font-size:11px;font-weight:var(--fw-semibold);letter-spacing:.08em;text-transform:uppercase;color:rgba(var(--text-rgba-base),.52);}
.inv3-prompt-modal-actions{display:flex;justify-content:flex-end;gap:10px;}

/* 2026-04-29 Hotfix: Light-Mode-Override für die Vorlagen-/Prompt-Modal-Familie.
   Vorher hatte das Modal-Panel einen hard-coded dark linear-gradient
   (rgba(16,21,39,.98) → rgba(13,18,34,.98)) ohne Light-Mode-Override. Im
   Light-Mode kippt --text-rgba-base auf 0,0,0 → die Texte (kicker .48 alpha,
   subtitle .62 alpha, entry-copy .62 alpha, etc.) waren dunkel auf dunklem
   Background = unlesbar. User-Report mit Screenshot bestätigt.
   Fix: helles Panel-Background + passende Border-Color, restliche Tints
   funktionieren automatisch über die Token-Inversion (--text-strong + die
   alpha-rgba-Werte werden auf hell sichtbar, sobald der Background hell ist). */
body.light .inv3-template-modal::backdrop,
body.light .inv3-prompt-modal::backdrop{
  background:rgba(var(--ink-rgba-base),.34);
}
body.light .inv3-template-modal-panel,
body.light .inv3-prompt-modal-panel{
  background:linear-gradient(180deg,rgba(var(--surface-solid-rgba-base),.99),rgba(248,249,252,.99));
  border-color:rgba(var(--ink-rgba-base),.1);
  box-shadow:0 26px 70px rgba(var(--ink-rgba-base),.18);
}
body.light .inv3-template-entry{
  background:rgba(var(--ink-rgba-base),.025);
  border-color:rgba(var(--ink-rgba-base),.08);
}
body.light .inv3-template-entry:hover{
  border-color:rgba(232,184,75,.4);
  background:rgba(232,184,75,.06);
}
body.light .inv3-template-empty{
  background:rgba(var(--ink-rgba-base),.025);
  border-color:rgba(var(--ink-rgba-base),.12);
}

/* Preview Modal (<dialog> fullscreen) */
.inv3-preview-modal{position:fixed;inset:0;width:100vw;max-width:100vw;height:100vh;max-height:100vh;padding:16px;border:none;border-radius:0;background:transparent;color:inherit;margin:0;}
.inv3-preview-modal[open]{display:flex;align-items:center;justify-content:center;}
.inv3-preview-modal::backdrop{background:rgba(0,0,0,.62);}
.inv3-preview-modal-panel{display:flex;flex-direction:column;width:min(1240px,calc(100vw - 32px));height:min(900px,calc(100vh - 32px));position:relative;overflow:hidden;margin:auto;border-radius:28px;background:linear-gradient(180deg,rgba(16,21,39,.98),rgba(13,18,34,.98));box-shadow:0 28px 80px rgba(0,0,0,.42);background-clip:padding-box;clip-path:inset(0 round 28px);}
.inv3-preview-modal-focus-trap{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;}
.inv3-preview-modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid rgba(var(--surface-rgba-base),.08);flex-shrink:0;}
.inv3-preview-modal-copy{display:flex;flex-direction:column;gap:2px;}
.inv3-preview-modal-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:rgba(var(--surface-solid-rgba-base),.6);}
.inv3-preview-modal-title{font-size:16px;font-weight:700;}
.inv3-preview-modal-actions{display:flex;align-items:center;gap:8px;}
.inv3-preview-modal-close{width:32px;height:32px;border-radius:999px;display:flex;align-items:center;justify-content:center;}
.inv3-preview-modal-body{flex:1 1 auto;min-height:0;overflow:auto;display:flex;align-items:stretch;justify-content:center;padding:0;background:rgba(8,12,24,.92);}
.inv3-preview-modal .inv-preview-wrap{border:none;background:transparent;border-radius:0;overflow:visible;}
.inv3-preview-modal .inv3-form-preview-wrap{height:100%;padding:22px 22px 26px;display:flex;align-items:center;justify-content:center;overflow:auto;min-width:0;}
.inv3-preview-modal .inv3-form-preview-toolbar{display:none;}
.inv3-preview-frame-stage{position:relative;flex:0 0 auto;width:794px;height:1123px;}
.inv3-preview-modal-body iframe{position:absolute;top:0;left:0;flex:0 0 auto;width:794px;height:1123px;min-height:0;border:0;border-radius:24px;background:white;box-shadow:0 24px 54px rgba(3,8,20,.38);clip-path:inset(0 round 24px);}
body.light .inv3-preview-modal-panel{background:linear-gradient(180deg,rgba(var(--surface-solid-rgba-base),.98),rgba(246,248,252,.98));box-shadow:0 28px 72px rgba(var(--ink-rgba-base),.16);}
body.light .inv3-preview-modal-head{border-color:rgba(var(--ink-rgba-base),.1);}
body.light .btn-ghost{background:rgba(var(--ink-rgba-base),.04);border-color:rgba(var(--ink-rgba-base),.12);color:rgba(var(--ink-rgba-base),.88);}
body.light .btn-ghost:hover{background:rgba(232,184,75,.16);border-color:rgba(232,184,75,.28);color:var(--text);}
body.light .inv3-doc-number-preview{background:rgba(var(--ink-rgba-base),.035);border-color:rgba(var(--ink-rgba-base),.1);color:rgba(var(--ink-rgba-base),.92);}
body.light .inv3-doc-number-preview[data-state="manual"]{background:rgba(232,184,75,.18);border-color:rgba(232,184,75,.26);}
body.light .inv3-service-date-note-toggle{background:rgba(var(--ink-rgba-base),.035);border-color:rgba(var(--ink-rgba-base),.08);}
body.light .inv3-service-date-note-toggle:hover{background:rgba(232,184,75,.14);border-color:rgba(232,184,75,.22);}
body.light .inv3-preview-modal-body{background:linear-gradient(180deg,var(--bg),var(--bg2));}
body.light .inv3-customer-suggest{background:rgba(var(--ink-rgba-base),.025);border-color:rgba(var(--ink-rgba-base),.08);}
body.light .inv3-customer-suggest-option{background:rgba(var(--ink-rgba-base),.035);border-color:rgba(var(--ink-rgba-base),.09);}
body.light .inv3-customer-suggest-option:hover,
body.light .inv3-customer-suggest-option:focus-visible{background:rgba(232,184,75,.16);border-color:rgba(232,184,75,.24);}
body.light .inv3-customer-suggest-copy strong{color:rgba(var(--ink-rgba-base),.92);}
body.light .inv3-customer-suggest-copy span{color:rgba(var(--ink-rgba-base),.66);}
body.light .inv3-customer-save-contact{border-color:rgba(var(--ink-rgba-base),.1);background:rgba(var(--ink-rgba-base),.035);color:rgba(var(--ink-rgba-base),.9);}
body.light .inv3-customer-save-contact:hover{background:rgba(232,184,75,.18);border-color:rgba(232,184,75,.24);}
body.light .inv3-item-iconbtn{border-color:rgba(var(--ink-rgba-base),.1);background:rgba(var(--ink-rgba-base),.035);color:rgba(var(--ink-rgba-base),.78);}
body.light .inv3-item-iconbtn:hover{border-color:rgba(232,184,75,.24);background:rgba(232,184,75,.14);}
body.light .inv3-items-toolbar-btn--secondary{border-color:rgba(var(--ink-rgba-base),.1);background:rgba(var(--ink-rgba-base),.035);}

@media(max-width:680px){
  .inv3-settings-accordion-summary{grid-template-columns:18px minmax(0,1fr);align-items:flex-start;}
  .inv3-settings-accordion-optional{grid-column:2;justify-self:start;}
  .inv3-settings-accordion-body{padding:14px 16px 18px;}
  .inv3-payment-controls{grid-template-columns:1fr;}
  .inv3-payment-row{flex-direction:column;align-items:stretch;}
  .inv3-payment-preset{flex:1 1 auto;}
  .inv-period-mode-tabs{max-width:100%;flex-wrap:wrap;}
  .inv-period-hint{grid-template-columns:1fr;gap:12px;}
  .inv3-rhythm-pills{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
  .inv3-rhythm-pill{min-height:40px;padding:8px 12px;font-size:13px;}
  .rec-rhythm-rule{font-size:13px;line-height:1.6;}
  .rec-rhythm-rule label{min-height:44px;}
  /* tx-segmented soll auf Mobile gut passen — Tabs nicht stacken */
  .tx-segmented{width:100%;display:flex;}
  .tx-segmented-item{flex:1 1 auto;text-align:center;}
  .inv3-discount-toggle{width:100%;}
  .inv3-inline-toggle{width:100%;}
  .inv3-template-modal-panel,.inv3-prompt-modal-panel{width:min(100vw - 20px,720px);padding:18px;border-radius:22px;}
  .inv3-template-entry{flex-direction:column;align-items:flex-start;}
  .inv3-template-entry-meta{white-space:normal;}
}

@media(max-width:640px){
  .inv3-preview-modal{padding:0;}
  .inv3-preview-modal-panel{width:100%;height:100%;border-radius:20px 20px 0 0;padding-top:env(safe-area-inset-top,0);}
  .inv3-preview-modal-head{padding:10px 14px;border-radius:20px 20px 0 0;}
  .inv3-preview-modal-body{padding:0;background:white;}
  .inv3-preview-modal .inv3-form-preview-wrap{padding:12px 0 18px;height:100%;align-items:center;justify-content:center;}
  .inv3-preview-modal-body iframe{border-radius:10px;box-shadow:0 12px 30px rgba(3,8,20,.18);}
}

@container (max-width: 879px){
  .inv3-item-card-head{grid-template-columns:minmax(0,1fr) auto auto;}
  .inv3-item-pricing.inv3-item-fields--count-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .inv3-item-pricing.inv3-item-fields--count-3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .inv3-item-fields--count-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .inv3-item-fields--count-3{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@container (max-width: 679px){
  .inv3-items-toolbar{grid-template-columns:1fr;align-items:stretch;}
  .inv3-items-toolbar-actions{width:100%;}
  .inv3-items-toolbar-btn{flex:1 1 auto;}
  .inv3-item-card-head{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"summary actions";}
  .inv3-item-card-summary{grid-area:summary;align-items:flex-start;text-align:left;min-width:0;}
  .inv3-item-card-actions{grid-area:actions;align-self:center;}
}

@container (max-width: 540px){
  .inv3-item-pricing.inv3-item-fields--count-4,
  .inv3-item-pricing.inv3-item-fields--count-3,
  .inv3-item-pricing.inv3-item-fields--count-2{grid-template-columns:1fr;}
  .inv3-items-toolbar-actions{flex-direction:column;align-items:stretch;}
  .inv3-items-toolbar-btn{width:100%;}
  .inv3-item-card-footer{flex-direction:column;align-items:flex-end;gap:6px;}
}

/* ── Position-Card Redesign 2026-04 ── */

/* Description-Preview unter Title in Collapsed-State */
.inv3-item-card-preview{display:block;font-size:12.5px;line-height:1.4;color:rgba(var(--text-rgba-base),.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.inv3-item-card[data-collapsed="0"] .inv3-item-card-preview{display:none;}

/* Sections innerhalb der expanded Card */
.inv3-item-section{margin-bottom:14px;}
.inv3-item-section:last-child{margin-bottom:0;}

/* Pricing-Group: ein Div trägt Grid + Background */
.inv3-item-pricing{display:grid;gap:10px;background:rgba(var(--text-rgba-base),.04);border:1px solid rgba(var(--surface-rgba-base),.08);border-radius:10px;padding:12px;}

/* Description-Textarea mit field-sizing für moderne Browser */
.inv3-items-desc-input{field-sizing:content;min-height:72px;max-height:320px;line-height:1.5;}

/* Description Char-Counter */
.inv3-item-field-counter{font-size:11px;color:rgba(var(--text-rgba-base),.5);margin-top:4px;text-align:right;opacity:0;transition:opacity .2s ease;}
.inv3-item-field-counter.is-visible{opacity:1;}
.inv3-item-field-counter.is-over{color:var(--red);font-weight:var(--fw-semibold);}

/* Per-Card Footer mit Netto/Brutto */
.inv3-item-card-footer{display:flex;justify-content:flex-end;gap:24px;padding:12px 12px 4px;border-top:1px solid rgba(var(--surface-rgba-base),.08);margin-top:8px;}
.inv3-item-totalrow{display:flex;flex-direction:column;align-items:flex-end;gap:2px;}
.inv3-item-totalrow span{font-size:11px;color:rgba(var(--text-rgba-base),.6);text-transform:uppercase;letter-spacing:.06em;}
.inv3-item-totalrow strong{font-variant-numeric:tabular-nums;font-size:14px;color:var(--text-strong);}
.inv3-item-totalrow--gross strong{font-size:17px;font-weight:var(--fw-semibold);}

/* Validation: invalid input + error hint */
.inv-inp[aria-invalid="true"]{border-color:var(--red);}
.inv3-item-field-hint.is-error{color:var(--red);}

/* Visually-hidden helper für SR-only-Labels */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Add-Feedback Animation: neue Card kurz mit Akzent-Border-Pulse */
@keyframes inv3-card-arrive{
  0%{box-shadow:0 0 0 2px var(--accent),0 6px 14px rgba(0,0,0,.1);}
  60%{box-shadow:0 0 0 2px var(--accent),0 6px 14px rgba(0,0,0,.1);}
  100%{box-shadow:0 0 0 0 transparent,0 6px 14px rgba(0,0,0,.1);}
}
.inv3-item-card.is-newly-added{animation:inv3-card-arrive 1.5s ease-out;}

/* Reduced-Motion-Honour */
@media (prefers-reduced-motion: reduce){
  .inv3-item-card.is-newly-added{animation:none;}
  .inv3-item-card-body{transition:none;}
}

/* Focus-Styles (Pflicht — :focus-visible für Keyboard-Nav) */
.inv3-item-iconbtn:focus-visible,
.inv3-item-collapse:focus-visible,
.inv3-items-toolbar-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.inv3-item-menu-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;background:rgba(var(--surface-rgba-base),.08);}
.inv3-item-pricing .inv-inp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(232,184,75,.25);}

/* Touch-Targets (Device-basiert, nicht Container) */
@media(pointer:coarse){
  .inv3-item-card .inv-inp{min-height:44px;}
  .inv3-item-iconbtn,.inv3-item-collapse{min-height:44px;}
}

/* ── Light-Mode-Patches für Position-Card Redesign ── */
body.light .inv3-item-card{background:linear-gradient(180deg,rgba(var(--surface-solid-rgba-base),.94),rgba(246,248,252,.98));border-color:rgba(var(--ink-rgba-base),.08);box-shadow:0 4px 12px rgba(var(--ink-rgba-base),.04);}
body.light .inv3-items-builder--single-active .inv3-item-card[data-active="1"]{border-color:rgba(232,184,75,.32);box-shadow:0 8px 24px rgba(var(--ink-rgba-base),.10);}
body.light .inv3-item-card-head{border-bottom-color:rgba(var(--ink-rgba-base),.08);}
body.light .inv3-item-card-total-label{color:rgba(var(--ink-rgba-base),.55);}
body.light .inv3-item-card-meta,
body.light .inv3-item-card-tax,
body.light .inv3-item-card-preview{color:rgba(var(--ink-rgba-base),.62);}
body.light .inv3-item-pricing{background:rgba(var(--ink-rgba-base),.035);border-color:rgba(var(--ink-rgba-base),.08);}
body.light .inv3-item-card-footer{border-top-color:rgba(var(--ink-rgba-base),.08);}
body.light .inv3-item-totalrow span{color:rgba(var(--ink-rgba-base),.62);}
body.light .inv3-item-totalrow strong{color:rgba(var(--ink-rgba-base),.92);}
body.light .inv3-item-field-counter{color:rgba(var(--ink-rgba-base),.5);}
body.light .inv3-item-field-counter.is-over{color:var(--red);}
body.light .inv3-item-menu{background:white;border-color:rgba(var(--ink-rgba-base),.1);box-shadow:0 8px 24px rgba(var(--ink-rgba-base),.12);color:rgba(var(--ink-rgba-base),.92);}
body.light .inv3-item-menu-item{color:rgba(var(--ink-rgba-base),.92);}
body.light .inv3-item-menu-item:hover,body.light .inv3-item-menu-item:focus-visible{background:rgba(232,184,75,.14);}
body.light .inv3-item-menu-item.is-danger{color:var(--red);}
body.light .inv3-item-menu-item.is-danger:hover,body.light .inv3-item-menu-item.is-danger:focus-visible{background:rgba(248,113,113,.12);color:var(--tone-poor-fg);}
body.light .inv3-items-toolbar-btn--secondary:hover,body.light .inv3-items-toolbar-btn--secondary:focus-visible{background:rgba(232,184,75,.14);border-color:rgba(232,184,75,.28);color:rgba(var(--ink-rgba-base),.92);}
body.light .inv-inp[aria-invalid="true"]{border-color:var(--red);}
body.light .inv3-item-field-hint.is-error{color:var(--red);}

@container (max-width: 479px){
  .inv3-item-card-head{padding:14px 14px 12px;gap:10px;}
  .inv3-item-card-title{font-size:15px;white-space:normal;}
  .inv3-item-card-total{font-size:22px;}
  .inv3-item-card-body{padding:0 14px 14px;}
  .inv3-item-fields--count-4,
  .inv3-item-fields--count-3,
  .inv3-item-fields--count-2{grid-template-columns:1fr;}
  .inv3-item-card[data-collapsed="1"] .inv3-item-card-body{display:none;}
  .inv3-items-empty-actions{flex-direction:column;}
}

/* ═══ phase 2 polish (ε) ═══ */

/* Loading-Skeleton für Customer-Card — 5. orthogonaler State.
   Wenn --loading aktiv ist, wird das Skeleton sichtbar und die
   echten Blöcke (Select, Summary, Manual-Felder, Toggle, Empty-Note)
   werden überblendet. Kein JS-State-Eingriff — purer CSS-Toggle. */
.inv3-customer-skeleton{display:none;gap:14px;padding:6px 0 12px 0;align-items:center;}
.inv3-customer-card--loading .inv3-customer-skeleton{display:flex;}
.inv3-customer-card--loading .inv3-customer-empty-note,
.inv3-customer-card--loading .inv3-customer-select-wrap,
.inv3-customer-card--loading .inv3-customer-contact-summary,
.inv3-customer-card--loading .inv3-customer-manual-fields,
.inv3-customer-card--loading .inv3-customer-toggle{display:none!important;}
.inv3-customer-skeleton-avatar{width:42px;height:42px;border-radius:999px;flex-shrink:0;background:linear-gradient(90deg,rgba(var(--surface-rgba-base),.04),rgba(var(--surface-rgba-base),.1),rgba(var(--surface-rgba-base),.04));background-size:200% 100%;animation:inv3-skeleton-pulse 1.6s ease-in-out infinite;}
.inv3-customer-skeleton-lines{flex:1;display:flex;flex-direction:column;gap:8px;}
.inv3-customer-skeleton-line{height:11px;border-radius:6px;background:linear-gradient(90deg,rgba(var(--surface-rgba-base),.04),rgba(var(--surface-rgba-base),.1),rgba(var(--surface-rgba-base),.04));background-size:200% 100%;animation:inv3-skeleton-pulse 1.6s ease-in-out infinite;}
.inv3-customer-skeleton-line:first-child{width:62%;}
.inv3-customer-skeleton-line:last-child{width:38%;}
@keyframes inv3-skeleton-pulse{
  0%,100%{background-position:200% 0;}
  50%{background-position:-200% 0;}
}
body.light .inv3-customer-skeleton-avatar,
body.light .inv3-customer-skeleton-line{background:linear-gradient(90deg,rgba(var(--ink-rgba-base),.04),rgba(var(--ink-rgba-base),.1),rgba(var(--ink-rgba-base),.04));background-size:200% 100%;}

/* B2B-Hint is-hidden-Default: der Slot ist seit γ2 im DOM, ε aktiviert ihn
   per JS-Class-Remove, sobald der Trigger (USt-IdNr + non-KU) greift. */
.inv3-b2b-hint.is-hidden{display:none!important;}

/* ═══ phase 2 perf+polish (ζ) ═══ */

/* Leere Kicker-/Subline-Elemente ausblenden — die Forms lassen den Header-
   Kicker („Rechnungen"-Pill) und die tautologische Subline ab ζ leer, damit
   Breadcrumb + H1 die einzigen Titel-Anker sind. */
.inv3-form-kicker:empty,
.inv3-form-sub:empty{display:none!important;}

/* Alle Taxtello-Form-Checkboxen nutzen den Gelb-Akzent statt Browser-Blau. */
.inv-bcc-self-label input[type="checkbox"],
.inv3-discount-toggle input[type="checkbox"],
.inv3-form-sidebar input[type="checkbox"]{accent-color:var(--accent);}

/* Mobile-Keyboard-Safety: Mobile-Bar respektiert iOS-Home-Indicator-Safe-Area. */
.inv3-form-mobile-bar{padding-bottom:max(10px,env(safe-area-inset-bottom));}

/* Mobile-Sheet (Bottom-Sheet) ebenfalls mit safe-area-Abstand. */
.inv3-form-page--sheet-open .inv3-form-sidebar{padding-bottom:max(14px,env(safe-area-inset-bottom));}

.rec-autosend-template-row{
  display:grid;
  gap:10px;
  margin-top:10px;
  padding:14px 16px;
  border:1px solid rgba(var(--surface-rgba-base),.10);
  border-radius:16px;
  background:rgba(7,15,29,.42);
}
.rec-autosend-template-row[hidden]{display:none;}
.rec-autosend-template{
  display:grid;
  gap:8px;
  min-width:0;
}
.rec-autosend-template>span{
  color:rgba(var(--text-rgba-base),.58);
  font-size:11px;
  font-weight:var(--fw-bold);
  letter-spacing:0;
  text-transform:uppercase;
}
.rec-autosend-select{
  width:100%;
  min-height:46px;
  padding:0 14px;
  border:1px solid rgba(var(--surface-rgba-base),.14);
  border-radius:14px;
  outline:0;
  background:rgba(7,15,29,.72);
  color:var(--text-strong);
  font:inherit;
  font-size:15px;
  font-weight:var(--fw-semibold);
}
.rec-autosend-select:focus{
  border-color:rgba(232,184,75,.55);
  box-shadow:0 0 0 3px rgba(232,184,75,.14);
}
.rec-autosend-hint{
  color:var(--text2);
  font-size:12.5px;
  line-height:1.5;
}
.rec-autosend-hint--warn{color:var(--text);}
.rec-autosend-link{
  color:var(--accent);
  font-weight:var(--fw-semibold);
  text-decoration:underline;
  text-underline-offset:3px;
}
.rec-autosend-link:hover,
.rec-autosend-link:focus{
  color:var(--accent3);
}

/* Linked-month hint CTA reset lives in its own partial because
   _41-recurrences.css is already above the file-size freeze budget. */
.belege-month-extra-hint a,
.belege-month-extra-hint button{appearance:none;-webkit-appearance:none;display:inline;color:var(--accent);text-decoration:none;font-weight:var(--fw-semibold);cursor:pointer;background:none;border:none;font-family:inherit;font-size:inherit;line-height:inherit;padding:0;margin:0;}
.belege-month-extra-hint a:hover,
.belege-month-extra-hint a:focus-visible,
.belege-month-extra-hint button:hover,
.belege-month-extra-hint button:focus-visible{text-decoration:underline;}

.rec-rhythm-stage-meta{display:flex;align-items:center;gap:10px;}
.rec-items-totals{margin-top:12px;}

/* Auto-Send Recurring Invoices — E-Mail-Vorlagen + Signatur (Phase 3) */

.iet-mount { display: flex; flex-direction: column; gap: 16px; }

.iet-card { width: 100%; }
.iet-card .card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.iet-card .card-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.iet-card .card-body { padding: 16px 18px; }

.iet-loader { color: var(--text2); padding: 24px; text-align: center; }
.iet-empty { text-align: center; padding: 32px 16px; }
.iet-empty p { margin: 0 0 12px 0; color: var(--text2); }

.iet-table { width: 100%; border-collapse: collapse; }
.iet-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text3); padding: 6px 0; border-bottom: 1px solid var(--border); }
.iet-table td { padding: 10px 0; border-bottom: 1px solid var(--border); vertical-align: middle; }
.iet-table tr:last-child td { border-bottom: none; }

.iet-subject-preview {
  font-size: 12px; color: var(--text2); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 480px;
}

.iet-badge {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 9px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
  vertical-align: 1px;
}
.iet-badge-default { background: var(--tone-good-bg); color: var(--tone-good-fg); border: 1px solid var(--tone-good-border); }
.iet-badge-system { background: var(--bg2); color: var(--text3); border: 1px solid var(--border); }

.iet-actions { text-align: right; white-space: nowrap; }
.iet-actions .btn { margin-left: 4px; }
.iet-btn-danger { color: var(--tone-poor-fg); }

.iet-vars-hint {
  margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--border);
  font-size: 12px; color: var(--text2); line-height: 1.7;
}
.iet-vars-hint code {
  display: inline-block; margin: 2px 2px; padding: 1px 6px;
  background: var(--bg2); border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
}

/* Editor */
.iet-editor .iet-form {
  display: flex; flex-direction: column; gap: 14px;
}
.iet-field { display: flex; flex-direction: column; gap: 4px; }
.iet-field > span { font-size: 12px; font-weight: 600; color: var(--text2); }
.iet-field input,
.iet-field textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
  font-family: inherit; font-size: 14px; background: var(--card); color: var(--text);
}
.iet-field textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  resize: vertical; line-height: 1.55;
}
.iet-field input:disabled,
.iet-field textarea:disabled {
  background: var(--bg2); color: var(--text3); cursor: not-allowed;
}

.iet-var-chips {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  font-size: 12px; color: var(--text2);
}
.iet-var-chips > span { margin-right: 4px; }
.iet-var-chip {
  border: 1px solid var(--border); background: var(--bg2);
  padding: 2px 8px; border-radius: 11px; font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer;
  color: var(--text);
}
.iet-var-chip:hover { background: var(--card2); }

.iet-checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }

.iet-editor-actions { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.iet-system-hint { font-size: 12px; color: var(--text2); font-style: italic; flex: 1; }

/* Signature */
.iet-signature .iet-signature-hint {
  margin: 0 0 10px 0; font-size: 12px; color: var(--text2);
}
.iet-signature textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.55;
  background: var(--card); color: var(--text); resize: vertical; min-height: 100px;
}
.iet-signature-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.iet-signature-status { font-size: 12px; color: var(--text2); }

/* Error state */
.iet-error { border-left: 3px solid var(--tone-warn-fg); }
.iet-error .iet-error-detail { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--text3); margin: 6px 0; }
.iet-error .iet-error-hint { font-size: 12px; color: var(--text2); margin: 4px 0 0 0; }

/* APP-HINT PATTERN FAMILY (2026-05-26)
   Variants: inline, floating, toast, notice, undo.
   Tokens: _00-tokens.css. JS: CoreUI.hint() in public/js/app-hint.js. */

/* ── Base ──────────────────────────────────────────────────────────── */
.app-hint {
  display: flex;
  align-items: flex-start;
  gap: var(--hint-gap);
  padding: var(--hint-padding-inline);
  background: var(--hint-bg);
  border: 1px solid var(--hint-border);
  border-radius: var(--hint-radius);
  box-shadow: var(--hint-shadow);
  color: var(--hint-text-color);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  opacity: 0;
  transition: opacity var(--tr-base), transform var(--tr-base);
}

.app-hint[data-state="visible"] {
  opacity: 1;
}

.app-hint[data-state="dismissing"] {
  opacity: 0;
  pointer-events: none;
}

/* ── Body / icon / text ────────────────────────────────────────────── */
.app-hint__body {
  display: flex;
  align-items: flex-start;
  gap: var(--hint-gap);
  flex: 1 1 auto;
  min-width: 0;
}

.app-hint__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--hint-icon-size);
  height: var(--hint-icon-size);
  color: var(--hint-icon-color);
  margin-top: 2px;
}

.app-hint__icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}

.app-hint__text {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--hint-text-color);
  word-wrap: break-word;
}

.app-hint__keyword {
  color: var(--hint-keyword-color);
  font-weight: var(--fw-bold);
}

/* ── Actions ───────────────────────────────────────────────────────── */
.app-hint__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 0 0 auto;
  margin-left: auto;
}

.app-hint__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--toast-button-height);
  padding: 0 var(--toast-button-padding-x);
  font-family: var(--font-sans);
  font-size: var(--toast-button-font-size);
  font-weight: var(--fw-semibold);
  line-height: 1;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--tr-fast), color var(--tr-fast), border-color var(--tr-fast);
}

.app-hint__action--primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.app-hint__action--primary:hover,
.app-hint__action--primary:focus-visible {
  background: var(--accent2);
  border-color: var(--accent2);
}

.app-hint__action--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-alpha);
}

.app-hint__action--ghost:hover,
.app-hint__action--ghost:focus-visible {
  background: var(--accent-bg-soft);
  border-color: var(--hint-border);
  color: var(--text);
}

.app-hint__action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Dismiss button (× icon) ───────────────────────────────────────── */
.app-hint__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  margin-left: var(--space-sm);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text2);
  cursor: pointer;
  font: inherit;
  transition: background var(--tr-fast), color var(--tr-fast);
}

.app-hint__dismiss:hover,
.app-hint__dismiss:focus-visible {
  background: var(--accent-bg-soft);
  color: var(--text);
}

.app-hint__dismiss:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.app-hint__dismiss svg {
  width: 14px;
  height: 14px;
  display: block;
  fill: currentColor;
}

/* ── Variant: inline ───────────────────────────────────────────────── */
.app-hint--inline {
  width: 100%;
}

.app-hint--inline[data-state="visible"] {
  transform: none;
}

/* ── Variant: floating (Cockpit-Pille) ─────────────────────────────── */
.app-hint--floating {
  position: fixed;
  left: calc(50% + var(--shell-sidebar-w-current, 0px) / 2);
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  z-index: var(--z-toast);
  width: max-content;
  max-width: min(680px, calc(100vw - 32px - var(--shell-sidebar-w-current, 0px)));
  padding: var(--hint-padding-floating);
  border-radius: var(--hint-radius-floating);
  transition: opacity var(--tr-slow), transform var(--tr-slow);
}

.app-hint--floating[data-state="visible"] {
  transform: translateX(-50%) translateY(0);
}

.app-hint--floating[data-state="dismissing"] {
  transform: translateX(-50%) translateY(20px);
  transition: opacity var(--tr-base), transform var(--tr-base);
}

/* ── Variant: undo-toast ─────────────────────────────────────────────── */
.app-hint--undo-toast {
  position: fixed;
  left: calc(50% + var(--shell-sidebar-w-current, 0px) / 2);
  bottom: var(--hint-undo-position-bottom);
  transform: translateX(-50%) translateY(20px);
  z-index: var(--z-toast);
  align-items: center;
  width: auto;
  max-width: clamp(320px, 50vw, 560px);
  padding: 16px 22px;
  border-radius: var(--hint-radius);
  overflow: hidden; /* Timer-Bar bottom-anchor */
  transition: opacity var(--tr-slow), transform var(--tr-slow);
}

.app-hint--undo-toast[data-state="visible"] {
  transform: translateX(-50%) translateY(0);
}

.app-hint--undo-toast[data-state="dismissing"] {
  transform: translateX(-50%) translateY(20px);
  transition: opacity var(--tr-base), transform var(--tr-base);
}

.app-hint--undo-toast .app-hint__body {
  align-items: center;
}
.app-hint--undo-toast .app-hint__actions {
  margin-left: auto;
  align-items: center;
}
.app-hint--undo-toast .app-hint__action {
  min-height: 36px;
  padding: 0 16px;
}
@media (max-width: 600px) {
  .app-hint--undo-toast { align-items: stretch; flex-direction: column; }
  .app-hint--undo-toast .app-hint__actions { margin-left: 0; margin-top: var(--space-sm); }
  .app-hint--undo-toast .app-hint__action { width: 100%; min-height: var(--toast-button-height); }
}

/* Timer-Bar subcomponent */
.app-hint__timer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--hint-timer-bar-height);
  background: var(--hint-timer-bar-bg);
  pointer-events: none;
}

.app-hint__timer-bar {
  height: 100%;
  width: 100%;
  background: var(--hint-timer-bar-color);
  transform-origin: left center;
  animation: app-hint-undo-countdown var(--undo-ms, var(--tr-undo-default)) linear forwards;
}

/* Hover/focus pause: keeps users from losing the option mid-action */
.app-hint--undo-toast:hover .app-hint__timer-bar,
.app-hint--undo-toast:focus-within .app-hint__timer-bar {
  animation-play-state: paused;
}

@keyframes app-hint-undo-countdown {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ── Variant: toast ────────────────────────────────────────────────── */
.app-hint--toast {
  position: fixed;
  left: calc(50% + var(--shell-sidebar-w-current, 0px) / 2);
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  z-index: var(--z-toast);
  max-width: min(420px, calc(100vw - 32px - var(--shell-sidebar-w-current, 0px)));
  transition: opacity var(--tr-slow), transform var(--tr-slow);
}

.app-hint--toast[data-state="visible"] {
  transform: translateX(-50%) translateY(0);
}

.app-hint--toast[data-state="dismissing"] {
  transform: translateX(-50%) translateY(20px);
  transition: opacity var(--tr-base), transform var(--tr-base);
}

/* Toasts ohne CTA zentrieren Text und blenden das dekorative Icon aus. */
.app-hint--toast .app-hint__icon {
  display: none;
}

.app-hint--toast .app-hint__body {
  justify-content: center;
}

.app-hint--toast .app-hint__text {
  flex: 0 1 auto;
  text-align: center;
}

/* ── Variant: notice (DEPRECATED 2026-05-28; prefer variant:'toast') ── */
.app-hint--notice {
  position: fixed;
  left: calc(50% + var(--shell-sidebar-w-current, 0px) / 2);
  top: 80px;
  transform: translateX(-50%) translateY(-20px);
  z-index: var(--z-toast);
  max-width: min(480px, calc(100vw - 32px - var(--shell-sidebar-w-current, 0px)));
  padding: var(--hint-padding-floating);
  border-radius: var(--hint-radius-floating);
  transition: opacity var(--tr-slow), transform var(--tr-slow);
}

.app-hint--notice[data-state="visible"] {
  transform: translateX(-50%) translateY(0);
}

.app-hint--notice[data-state="dismissing"] {
  transform: translateX(-50%) translateY(-20px);
  transition: opacity var(--tr-base), transform var(--tr-base);
}

/* ── Größenklassen (2026-06-04 Vereinheitlichung) ─────────────────────── */
.app-hint--floating.is-compact,
.app-hint--toast.is-compact { max-width: min(var(--toast-max-compact), calc(100vw - 32px - var(--shell-sidebar-w-current, 0px))); }
.app-hint--floating.is-medium,
.app-hint--toast.is-medium { max-width: min(var(--toast-max-medium), calc(100vw - 32px - var(--shell-sidebar-w-current, 0px))); }
.app-hint--floating.is-action,
.app-hint--toast.is-action { max-width: min(var(--toast-max-action), calc(100vw - 32px - var(--shell-sidebar-w-current, 0px))); }
.app-hint--floating.is-wide,
.app-hint--toast.is-wide { max-width: min(var(--toast-max-wide), calc(100vw - 32px - var(--shell-sidebar-w-current, 0px))); }

/* ── Einzeiliges Action-Layout (2026-06-04, Revision 2) ───────────────── */
.app-hint--action-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--toast-gap);
  width: auto;
  max-width: 100%;
}
.app-hint--action-row .app-hint__body {
  display: flex;
  align-items: center;
  gap: var(--toast-gap);
  flex: 1 1 min(420px, 100%);
  min-width: 0;
}
.app-hint--action-row .app-hint__actions {
  margin-left: auto;
  flex: 0 0 auto;
  justify-content: flex-end;
}
.app-hint--action-row .app-hint__dismiss {
  position: static;
  align-self: center;
  margin-left: 0;
}
.app-hint--toast.app-hint--action-row .app-hint__icon { display: flex; }
.app-hint--toast.app-hint--action-row .app-hint__body { justify-content: flex-start; }
.app-hint--toast.app-hint--action-row .app-hint__text { flex: 1 1 auto; text-align: left; }

/* Responsives Action-Label: lang auf Desktop, kurz <600px (siehe Mobile-Query). */
.app-hint__label-short { display: none; }

/* ── Mobile: floating + toast stretch ──────────────────────────────── */
@media (max-width: 600px) {
  .app-hint--floating {
    left: 12px;
    right: 12px;
    bottom: 16px;
    transform: translateY(20px);
    max-width: none;
  }

  .app-hint--floating[data-state="visible"] {
    transform: translateY(0);
  }

  .app-hint--floating[data-state="dismissing"] {
    transform: translateY(20px);
  }

  .app-hint--toast {
    left: 12px;
    right: 12px;
    bottom: 16px;
    max-width: none;
    transform: translateY(20px);
  }

  .app-hint--toast[data-state="visible"] {
    transform: translateY(0);
  }

  .app-hint--toast[data-state="dismissing"] {
    transform: translateY(20px);
  }

  .app-hint--notice {
    left: 12px;
    right: 12px;
    top: 16px;
    transform: translateY(-20px);
    max-width: none;
  }

  .app-hint--notice[data-state="visible"] {
    transform: translateY(0);
  }

  .app-hint--notice[data-state="dismissing"] {
    transform: translateY(-20px);
  }

  .app-hint--undo-toast {
    left: 12px;
    right: 12px;
    bottom: 16px;
    max-width: none;
    transform: translateY(20px);
  }

  .app-hint--undo-toast[data-state="visible"] {
    transform: translateY(0);
  }

  .app-hint--undo-toast[data-state="dismissing"] {
    transform: translateY(20px);
  }

  /* Auf Mobile Actions unterhalb der Hint-Body stapeln, damit kein
     Overflow entsteht und die CTAs Tap-Target-Pflicht erfuellen. */
  .app-hint {
    flex-wrap: wrap;
  }

  .app-hint--action-row {
    flex-wrap: wrap;
    width: auto;
  }
  .app-hint--action-row .app-hint__body {
    flex: 1 1 100%;
  }

  .app-hint__actions {
    width: 100%;
    margin-left: 0;
    margin-top: var(--space-sm);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-sm);
  }

  .app-hint__action {
    min-height: 40px;
    width: 100%;
  }

  /* Responsives Action-Label: kurz <600px (z.B. Reorder „Speichern"). */
  .app-hint__label-long { display: none; }
  .app-hint__label-short { display: inline; }
}

/* ── Reduced-motion: opacity only, keine Transforms ─────────────────
   MUSS NACH der Mobile-Query stehen (Gemini PR #2612 HIGH-1):
   sonst ueberschreibt der spaeter-im-Stylesheet definierte Mobile-Block
   die Reduced-Motion-Overrides. Die genestete Mobile-Variante sorgt
   dafuer, dass auf Mobile + Reduced-Motion KEIN translateY/translateX
   triggert (auch nicht der Mobile-spezifische Slide-in von unten). */
@media (prefers-reduced-motion: reduce) {
  .app-hint,
  .app-hint--inline,
  .app-hint--floating,
  .app-hint--toast,
  .app-hint--notice,
  .app-hint--undo-toast {
    transition: opacity var(--tr-base);
  }

  .app-hint--floating,
  .app-hint--floating[data-state="visible"],
  .app-hint--floating[data-state="dismissing"] {
    transform: translateX(-50%);
  }

  .app-hint--toast,
  .app-hint--toast[data-state="visible"],
  .app-hint--toast[data-state="dismissing"] {
    /* toast ist seit 2026-05-28 bottom-center: translateX(-50%) muss
       erhalten bleiben, sonst sitzt die Pille am linken Rand. */
    transform: translateX(-50%);
  }

  .app-hint--notice,
  .app-hint--notice[data-state="visible"],
  .app-hint--notice[data-state="dismissing"] {
    transform: translateX(-50%);
  }

  .app-hint--undo-toast,
  .app-hint--undo-toast[data-state="visible"],
  .app-hint--undo-toast[data-state="dismissing"] {
    transform: translateX(-50%);
  }

  /* Timer-Bar: countdown ist gewollt informativ, aber kein Movement.
     Sofort leer-Zustand — User sieht statisches Indicator-Track. */
  .app-hint__timer-bar {
    animation: none;
    transform: scaleX(0);
  }

  /* Mobile + Reduced-Motion: Mobile-Query setzt translateY zurueck —
     hier wieder neutralisieren. floating ist auf Mobile NICHT
     center-translated (left/right: 12px statt left: 50%), darum kein
     translateX hier — transform: none ist korrekt. */
  @media (max-width: 600px) {
    .app-hint--floating,
    .app-hint--floating[data-state="visible"],
    .app-hint--floating[data-state="dismissing"],
    .app-hint--toast,
    .app-hint--toast[data-state="visible"],
    .app-hint--toast[data-state="dismissing"],
    .app-hint--notice,
    .app-hint--notice[data-state="visible"],
    .app-hint--notice[data-state="dismissing"],
    .app-hint--undo-toast,
    .app-hint--undo-toast[data-state="visible"],
    .app-hint--undo-toast[data-state="dismissing"] {
      transform: none;
    }
  }
}

/* ==================== KONTAKTE (Contacts Management) ==================== */
/* Extrahiert 2026-05-18 aus _41-recurrences.css (Freeze-Policy: .kon-*
   gehört nicht in den Recurrences-Partial). Manifest-Position direkt
   nach _41-recurrences.css → Cascade unverändert. Namespace .kon-* /
   .modal.kon-modal, alles über Tokens. */

/* Added 2026-04-17 alongside the new contacts.js module. Closes the gap
   where the backend /api/contacts CRUD existed but had no frontend surface.
   Namespace .kon-* is disjoint from .inv-*, .afa-*, .rec-*. */

.kon-page{max-width:var(--app-page-max-width,1180px);margin:0 auto;padding:var(--app-page-pad-top,20px) var(--app-page-pad-x,16px) var(--app-page-pad-bottom,80px);}
.kon-page.app-page--wide{max-width:var(--app-page-max-width-wide,1220px);}
.kon-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;flex-wrap:wrap;gap:12px;}
.kon-title{font-size:22px;font-weight:var(--fw-bold);color:var(--text);margin:0 0 2px;}
.kon-sub{font-size:13px;color:var(--text2);line-height:1.45;}
.kon-header-actions{display:flex;gap:8px;flex-shrink:0;}

/* Toolbar: Suchfeld + Filter-Chip + Sort-Dropdown + Count auf einer Linie.
   Suchfeld nimmt flexiblen Platz; Filter rechts daneben. Mobile stackt
   das Layout über den Override im _90-responsive-overrides.css-Modul.
   .page-filter-bar (im _10-shell.css) liefert sticky-Background +
   border-bottom + 44px-Fixhöhe, was bei der Kontakte-Toolbar als grauer
   Streifen sichtbar wurde. Compound-Selector .page-filter-bar.kon-filter-bar
   überschreibt das mit höherer Specificity: keine eigene Surface, kein
   Trennstrich, Höhe folgt der 40px-Input-Höhe. Sticky bleibt aktiv,
   aber transparent — beim Scrollen verschmilzt die Toolbar mit dem
   Page-Background, statt einen grauen Block zu zeigen. */
.kon-filter-bar{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap;}
.page-filter-bar.kon-filter-bar{background:transparent;border-bottom:0;height:auto;}
.kon-search{flex:1 1 280px;min-width:220px;position:relative;display:flex;align-items:center;}
.kon-search-ico{position:absolute;left:13px;color:var(--text3);pointer-events:none;opacity:.85;}
/* HINWEIS: Der Selektor '.kon-search input{' MUSS exakt so bleiben (ohne
   Whitespace zwischen Selektor und Brace) — er wird von
   tests/mobile-responsive-fix-regressions.test.js#36 indexOf-positioniert. */
.kon-search input{width:100%;box-sizing:border-box;height:40px;padding:0 14px 0 38px;border:1px solid var(--border);border-radius:10px;background:var(--bg2);color:var(--text);font-family:inherit;font-size:13px;transition:border-color .15s,background .15s,box-shadow .15s;}
.kon-search input::placeholder{color:var(--text3);opacity:.85;}
.kon-search input:hover{border-color:var(--border2);}
.kon-search input:focus{outline:none;border-color:var(--accent);background:var(--bg);box-shadow:0 0 0 3px rgba(232,184,75,.14);}
.kon-count{font-size:12px;color:var(--text3);white-space:nowrap;margin-left:auto;font-variant-numeric:tabular-nums;}

/* Optionaler dezenter Spaltenkopf (Desktop only). Wird unter 1080px
   ausgeblendet, weil dann das Grid auf 5 Spalten kollabiert und der Header
   visuell stören würde. */
.kon-list{display:flex;flex-direction:column;gap:8px;}
.kon-list-head{display:grid;grid-template-columns:34px minmax(220px,1.4fr) minmax(200px,1fr) minmax(110px,.55fr) minmax(120px,auto) 80px;column-gap:14px;align-items:center;padding:0 14px 8px;font-size:10.5px;font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--text3);border-bottom:1px solid var(--border);margin-bottom:4px;}
.kon-list-head .kon-head-cell{min-width:0;}
.kon-list-head .kon-head-spacer{visibility:hidden;}

/* .kon-row: 6-Spalten-Grid (Avatar | Hauptinfo | Kontaktkanal | Ort |
   Status | Aktionen). Background bleibt linear-gradient (Test-Pin in
   tests/contacts-ui.test.js#440 verifiziert .kon-row{...background:linear-gradient...}),
   aber sehr subtil — fast flat, mit minimaler Tiefe. Polish-v2: ruhiger,
   weicheres Padding, dezentere Border. */
.kon-row{display:grid;grid-template-columns:34px minmax(220px,1.4fr) minmax(200px,1fr) minmax(110px,.55fr) minmax(120px,auto) 80px;column-gap:14px;align-items:center;padding:13px 16px;background:linear-gradient(180deg,var(--card),var(--card));border:1px solid var(--border);border-radius:12px;transition:border-color .15s,background .15s,box-shadow .15s,transform .15s;}
/* Polish-v3: Hover hebt Row minimal an (1px translateY) + leicht stärkerer
   Schatten — wirkt hochwertiger ohne aufdringlich zu werden. */
.kon-row:hover{border-color:var(--border2);background:linear-gradient(180deg,var(--card),var(--card2));box-shadow:0 2px 10px rgba(0,0,0,.18);transform:translateY(-1px);}
/* Polish-v3: Focus-Within spiegelt den Tastatur-Focus eines inneren
   Edit/Delete-Buttons mit dezentem Akzent — Tastatur-Nutzer sehen,
   in welcher Zeile sie aktiv sind. Subtiler als Hover, kein Lift. */
.kon-row:focus-within{border-color:rgba(232,184,75,.35);box-shadow:0 0 0 2px rgba(232,184,75,.10);}
/* Warning-Accent für Kontakte ohne E-Mail. Dezent (2px, alpha-reduziert),
   weil zusätzlich der Status-Chip rechts die Information trägt. */
.kon-row-warn{border-left-width:2px;border-left-color:rgba(217,165,32,.5);}

/* Avatar: 34px Kreis, Initialen, deterministische Pastell-Tints via
   feste Modifier-Klassen statt runtime-inline-style. */
.kon-row-avatar{width:34px;height:34px;flex-shrink:0;border-radius:50%;background:var(--bg3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:var(--fw-bold);color:var(--text2);letter-spacing:.5px;}
.kon-row-avatar--tint-gold{background:rgba(232,184,75,.22);}
.kon-row-avatar--tint-green{background:rgba(52,211,153,.20);}
.kon-row-avatar--tint-blue{background:rgba(96,165,250,.22);}
.kon-row-avatar--tint-purple{background:rgba(168,148,241,.22);}
.kon-row-avatar--tint-pink{background:rgba(247,144,152,.22);}
.kon-row-avatar--tint-light-gold{background:rgba(245,208,122,.20);}

/* Hauptinfo: Name (stärker als vorher, fw-bold + 14.5px) + optionaler
   Sub-Title (Person bei Firmenkontakten). Polish-v2: stärkere Hierarchie. */
.kon-row-main{min-width:0;}
.kon-row-name{font-size:14.5px;font-weight:var(--fw-bold,700);color:var(--text);margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.005em;}
.kon-row-sub{font-size:11.5px;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.35;}

/* Kontaktkanal: E-Mail + Telefon untereinander, Mailto/Tel-Links. Icons im
   Stroke-Stil; Click auf den Link öffnet Mail-Client/Phone-App. */
/* align-items:flex-start verhindert, dass die <a class="kon-channel-link">
   im Column-Flex auf die volle Spaltenbreite gestreckt werden (Flex-Default
   ist `stretch`, was die Hit-Box weit über den sichtbaren Text hinaus
   aufzieht und schon beim Hovern abseits des Texts den title-Tooltip +
   Hover-Farbe der Mail/Tel-Links auslöst). Bug 2026-05-20: „Telefon
   oder E-Mail ausgewählt selbst wenn weit entfernt vom Text". */
.kon-row-channel{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;font-size:12px;color:var(--text2);}
.kon-channel-link{color:var(--text2);text-decoration:none;display:inline-flex;align-items:center;gap:6px;max-width:100%;line-height:1.5;transition:color .15s;}
.kon-channel-link>svg{flex-shrink:0;color:var(--text3);}
.kon-channel-link>.kon-channel-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kon-channel-link:hover{color:var(--text);}
.kon-channel-link:hover>svg{color:var(--accent);}
/* Polish-v3: „Keine Kontaktdaten" weiter zurückgenommen — kleinerer Font
   (11px), weniger Opacity (.62), damit echte E-Mail/Telefonwerte in den
   anderen Zeilen klar dominieren. */
.kon-channel-empty{color:var(--text3);font-size:11px;font-style:italic;opacity:.62;}

/* Ort. Eigene Spalte, eigene Zone — nicht mehr als loser Meta-Pill. */
.kon-row-location{min-width:0;font-size:12.5px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kon-row-location:empty::before{content:"—";color:var(--text3);opacity:.55;}
.kon-loc{display:inline;}

/* Status: derzeit nur „Keine E-Mail"-Chip. Wird leer gerendert, wenn der
   Kontakt vollständig ist — visuell sauber, weil das Grid die Spalte trotz
   leerer Zelle reserviert. */
.kon-row-status{min-width:0;display:flex;flex-wrap:wrap;gap:4px;align-items:center;}
/* .kon-status-chip Polish-v3: im Dark Mode ruhiger (background alpha
   .08→.06, border alpha .26→.20). Im Light Mode bleibt der Chip wie
   bisher gut sichtbar (eigener body.light-Override unten). Trägt
   .kon-meta-missing als Test-Pin-Marker. */
.kon-status-chip{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:10px;font-size:10.5px;font-weight:var(--fw-semibold);background:rgba(232,184,75,.06);border:1px solid rgba(232,184,75,.20);color:var(--tone-warn-text);white-space:nowrap;letter-spacing:.015em;}
.kon-status-chip>svg{flex-shrink:0;opacity:.85;width:11px;height:11px;}
.kon-meta-missing{color:var(--tone-warn-text);}

/* Aktionen Polish-v2: echte Ghost-Buttons. Default state komplett
   transparent (kein Border-Frame), Hover gibt minimale Tönung. Delete
   nur im Hover Danger-Tönung — Default bleibt neutral. */
.kon-row-actions{display:flex;gap:2px;justify-content:flex-end;flex-shrink:0;}
.kon-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:transparent;border:1px solid transparent;border-radius:8px;color:var(--text3);cursor:pointer;transition:all .15s;font-family:inherit;opacity:.85;}
.kon-icon-btn:hover{color:var(--text);background:rgba(var(--surface-rgba-base),.06);opacity:1;}
.kon-icon-btn:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(232,184,75,.18);opacity:1;}
.kon-icon-btn.kon-btn-del:hover{color:var(--red);background:rgba(212,63,63,.10);}
/* Legacy-Pin: bestehende Markup-Reste oder Drittmodule, die noch .kon-btn-del
   neben .btn-tb erwarten könnten. Hover ist hier ohne neue Action-Surface. */
.kon-btn-del:hover{color:var(--red);}

/* Empty-State (0 Kontakte). Polish 2026-04-19: Gradient-Surface statt flat
   Card, Icon-Ring mit subtilem Accent, 3-Feature-Liste die den „Warum"
   visualisiert (E-Mail-Empfänger, Rechnungsgeschwindigkeit, account-weite
   Wiederverwendung). CTA bleibt prominent. */
.kon-empty{text-align:center;padding:48px 24px 44px;color:var(--text2);background:linear-gradient(180deg,var(--card),rgba(26,32,53,.82));border:1px solid var(--border);border-radius:14px;display:flex;flex-direction:column;align-items:center;gap:14px;position:relative;overflow:hidden;}
/* Subtle top-accent-strip in V3-Polish-Manier */
.kon-empty::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(232,184,75,.45),transparent);}
.kon-empty-ico{width:72px;height:72px;border-radius:50%;background:rgba(232,184,75,.08);border:1px solid rgba(232,184,75,.22);display:flex;align-items:center;justify-content:center;color:var(--accent);opacity:1;margin-bottom:2px;}
.kon-empty-ico svg{opacity:.85;}
.kon-empty h2{font-size:18px;font-weight:var(--fw-bold);color:var(--text);margin:0;letter-spacing:-.01em;}
.kon-empty p{font-size:13px;color:var(--text2);max-width:460px;line-height:1.55;margin:0;}
/* 3-Feature-Liste: was der User durch Kontakte anlegen gewinnt. */
.kon-empty-features{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;margin:4px 0 6px;max-width:560px;}
.kon-empty-feature{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text3);white-space:nowrap;}
.kon-empty-feature svg{color:var(--accent);opacity:.8;flex-shrink:0;}
.kon-empty .btn{margin-top:4px;}
.kon-empty-muted{font-size:12px;color:var(--text2);margin-top:8px;letter-spacing:.02em;}
body.light .kon-empty{background:linear-gradient(180deg,rgba(var(--surface-solid-rgba-base),.98),rgba(246,248,252,.96));}
body.light .kon-empty-ico{background:rgba(232,184,75,.12);border-color:rgba(232,184,75,.32);}

/* Load-Error-Banner (echter API-Fehler statt Empty-State maskieren).
   Gespiegelt von .belege-load-error (_41-recurrences.css) für ein
   konsistentes Sparse-State-Fehlerbild über die dünnen Screens. */
.kon-load-error{padding:8px 12px;background:rgba(248,113,113,.06);border:1px solid rgba(248,113,113,.2);border-radius:8px;color:var(--red);font-size:12px;margin-bottom:10px;display:flex;align-items:center;gap:6px;line-height:1.45;}
.kon-load-error button{background:none;border:none;color:var(--red);text-decoration:underline;cursor:pointer;font-family:inherit;font-size:inherit;padding:0;margin-left:auto;font-weight:var(--fw-semibold);}
body.light .kon-load-error{background:rgba(248,113,113,.06);}

/* Field-hint below email input in edit modal */
.fld-hint{font-size:11px;color:var(--text3);margin-top:4px;line-height:1.4;}

/* Tablet-Breakpoint: Status-Spalte einklappen, Spaltenkopf ausblenden.
   Status-Information bleibt durch den .kon-row-warn-Border + die
   bestehende „keine E-Mail"-Pill im Empty-Channel sichtbar (siehe JS,
   das bei missingEmail einen Status-Chip rendert — der wandert auf
   Tablet-Größen in eine zweite Zeile unter der Hauptinfo). */
@media(max-width:1080px){
  .kon-list-head{display:none;}
  .kon-row{grid-template-columns:34px minmax(180px,1.3fr) minmax(180px,1fr) minmax(96px,.5fr) 80px;}
  .kon-row-status{display:none;}
  .kon-row-warn .kon-row-status{display:flex;grid-column:2 / -1;padding-top:2px;margin-top:-2px;}
}

/* Mobile-Card-Stack: Avatar links, Hauptinfo + Channel + Location stacken
   in der mittleren Spalte, Aktionen rechts. Touch-Targets bleiben groß. */
@media(max-width:640px){
  .kon-page{padding:16px 12px 72px;}
  .kon-row{
    grid-template-columns:34px 1fr auto;
    grid-template-areas:
      "avatar main    actions"
      "avatar channel actions"
      "avatar location status";
    column-gap:12px;
    row-gap:4px;
    padding:12px;
    align-items:start;
  }
  .kon-row-avatar  {grid-area:avatar;align-self:start;margin-top:1px;}
  .kon-row-main    {grid-area:main;}
  .kon-row-channel {grid-area:channel;}
  .kon-row-location{grid-area:location;font-size:11.5px;color:var(--text3);}
  .kon-row-status  {grid-area:status;display:flex;justify-content:flex-end;align-self:center;}
  .kon-row-warn .kon-row-status{display:flex;grid-column:auto;padding-top:0;margin-top:0;}
  .kon-row-actions {grid-area:actions;align-self:start;}
  .kon-header{flex-direction:column;align-items:stretch;}
  .kon-header-actions .btn{width:100%;justify-content:center;}
}
@media(max-width:400px){
  .kon-row{grid-template-columns:1fr auto;grid-template-areas:"main actions" "channel actions" "location status";}
  .kon-row-avatar{display:none;}
}

/* ─── Kontakt-Dialog: moderne, ruhige Form-Vorlage (2026-05-18) ──────
   Reskin auf Basis der GETEILTEN .modal/.mh/.mb/.mf-Komponente — Focus-
   Trap (core.js _trapFocus) + clM/clMOverlay bleiben unverändert. Sticky
   Header + Footer, scrollbarer Body (kein MacBook-Air-Scrollbalken-Bug
   mehr, weil der Body jetzt sauber eigenständig scrollt statt das ganze
   Modal). Ruhige Section-Karten statt harter Fieldset-Linien. Klassen
   bewusst kon-*-generisch, damit weitere „Anlegen"-Dialoge sie ohne
   JS-Shell-Rewrite übernehmen können. Alle Farben über Tokens
   (--accent-rgba-base / --surface-rgba-base / --radius-*). */
.modal.kon-modal{
  max-width:1000px;
  display:flex;flex-direction:column;
  max-height:min(90vh,860px);
  overflow:hidden;
  border-radius:var(--radius-hero);
}
/* Breiter Dialog (~1000px) als EINE ruhige Formularfläche: die 4 Sections
   stapeln vertikal und werden nur durch dezente Divider getrennt (kein
   2×2-Bento aus konkurrierenden Cards mehr). Body scrollt eigenständig,
   Footer bleibt sticky. Schmale Fenster: Breite folgt dem Viewport. */
@media(max-width:1040px){
  .modal.kon-modal{max-width:96vw;}
}
@media(max-width:640px){
  .modal.kon-modal{max-width:100%;max-height:94vh;border-radius:var(--radius-lg);}
}

/* Header: Icon-Badge + Titel/Subline + runder Close-Button. */
.kon-mh{align-items:flex-start;gap:14px;padding:20px 22px 16px;border-radius:var(--radius-hero) var(--radius-hero) 0 0;flex-shrink:0;}
@media(max-width:640px){.kon-mh{border-radius:var(--radius-lg) var(--radius-lg) 0 0;}}
.kon-mh-badge{flex-shrink:0;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(var(--accent-rgba-base),.12);border:1px solid rgba(var(--accent-rgba-base),.30);color:var(--accent);}
.kon-mh-badge>svg{width:18px;height:18px;}
.kon-mh-copy{flex:1;min-width:0;}
.modal.kon-modal .kon-mh-copy h2{font-size:16px;font-weight:var(--fw-bold);color:var(--text);letter-spacing:-.01em;}
.modal.kon-modal .kon-mh-copy .modal-subtitle{font-size:12.5px;color:var(--text3);line-height:1.45;margin-top:3px;}
.kon-xbtn{flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:18px;line-height:1;color:var(--text3);background:transparent;border:1px solid transparent;transition:background .15s,color .15s;align-self:flex-start;}
.kon-xbtn:hover{background:rgba(var(--surface-rgba-base),.08);color:var(--text);}
.kon-xbtn:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(var(--accent-rgba-base),.22);}

/* Body: 2-Spalten-Formularfläche OHNE Card-Boxen (kein Border/Background/
   Radius). Struktur entsteht durch eine feine Mittel-Trennlinie + einen
   horizontalen Reihen-Divider statt durch konkurrierende Cards → passt
   ohne Scroll auf MacBook UND wirkt „aus einem Guss". Distinkt statt
   generisch: jeder Section-Titel trägt einen kleinen taxtello-Amber-Tick
   (Akzent-only, alles über Tokens). 4 Sections fließen 2×2; das
   Error-Banner spannt voll. <860px → 1-Col + vertikale Divider. */
.modal.kon-modal .kon-mb-scroll{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:22px 28px 24px;display:grid;grid-template-columns:1fr 1fr;column-gap:36px;row-gap:26px;align-items:start;position:relative;}
.modal.kon-modal .kon-mb-scroll::before{content:'';position:absolute;top:24px;bottom:24px;left:50%;width:1px;background:var(--border);transform:translateX(-50%);}
.kon-modal .kon-section{padding:0;margin:0;border:none;border-radius:0;background:none;}
/* Reihen-Divider: die 3. und 4. Section (zweite Raster-Reihe) bekommen
   einen feinen Oberstrich — `~ ~` statt :nth-child(of) für max. Support. */
.kon-modal .kon-section ~ .kon-section ~ .kon-section{padding-top:26px;border-top:1px solid var(--border);}
.kon-modal #kon-modal-error{grid-column:1 / -1;}
.kon-modal-error{margin-top:12px;}
.kon-modal-error[hidden]{display:none!important;}
.kon-modal .kon-section>.slbl{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:var(--fw-semibold);color:var(--text2);text-transform:none;letter-spacing:0;border-bottom:none;padding-bottom:0;margin-bottom:14px;}
.kon-modal .kon-section>.slbl::before{content:'';flex-shrink:0;width:3px;height:13px;border-radius:2px;background:var(--accent);}
/* E-Mail-Hinweis spannt unter beide Spalten der Kontakt-Section. */
.kon-modal .kon-section-hint{margin-top:2px;}
@media(max-width:860px){
  .modal.kon-modal .kon-mb-scroll{grid-template-columns:1fr;column-gap:0;row-gap:0;}
  .modal.kon-modal .kon-mb-scroll::before{display:none;}
  .kon-modal .kon-section + .kon-section{margin-top:20px;padding-top:20px;border-top:1px solid var(--border);}
  .kon-modal .kon-section ~ .kon-section ~ .kon-section{padding-top:20px;}
}
.kon-modal .fgrp{margin-bottom:12px;}
.kon-modal .fgrp:last-child{margin-bottom:0;}
.kon-modal label{font-size:12px;font-weight:var(--fw-semibold);color:var(--text2);text-transform:none;letter-spacing:0;}
.kon-modal .req{color:var(--accent);font-weight:var(--fw-bold);margin-left:2px;}
.kon-modal input,.kon-modal textarea{padding:11px 13px;border-radius:10px;font-size:14px;background:var(--bg2);border:1px solid var(--border);transition:border-color .15s,background .15s,box-shadow .15s;}
.kon-modal input::placeholder,.kon-modal textarea::placeholder{color:var(--text3);opacity:.7;}
.kon-modal input:hover,.kon-modal textarea:hover{border-color:var(--border2);}
.kon-modal input:focus,.kon-modal textarea:focus{outline:none;border-color:var(--accent);background:var(--bg);box-shadow:0 0 0 3px rgba(var(--accent-rgba-base),.14);}
.modal.kon-modal textarea#kon-notes{min-height:92px;resize:vertical;}
.modal.kon-modal .fld-hint{margin-top:5px;line-height:1.4;color:var(--text3);}
/* Inline-Fehler unter dem Feld (statt absolute Overlay) — sauber im Card-Flow. */
.kon-modal .field-error-hint{position:static;margin-top:5px;font-size:11.5px;color:var(--red);white-space:normal;line-height:1.35;}
.kon-modal input.field-error{border-color:var(--red);}

/* Footer: sticky am Boden der Flex-Column. */
.kon-mf{flex-shrink:0;padding:14px 22px;gap:10px;border-top:1px solid var(--border);background:var(--bg3);border-radius:0 0 var(--radius-hero) var(--radius-hero);}
@media(max-width:640px){.kon-mf{border-radius:0 0 var(--radius-lg) var(--radius-lg);}}
.kon-mf .btn{min-height:40px;}
body.light .kon-mf{background:var(--card);}
/* Mobile: engere Section-Abstände, gleiche durchgehende Fläche. */
@media(max-width:640px){
  .modal.kon-modal .kon-mb-scroll{padding:16px 16px 18px;}
  .kon-modal .kon-section + .kon-section{margin-top:16px;padding-top:16px;}
}

/* ─── Kontakt-Overview: Filter-Chip „Ohne E-Mail" ──────────────
   Rendert nur wenn ≥1 Kontakt ohne E-Mail existiert. Der Count hinter dem
   Label (z.B. „Nur ohne E-Mail 3") wird in der Pill selbst platziert.
   Neutraler Default-Zustand (Grayscale-Pill); aktiver Filter trägt
   warm-amber-Tönung als Akzent. */
.kon-filter-chip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:16px;font-size:12px;font-weight:var(--fw-semibold);background:var(--bg2);border:1px solid var(--border);color:var(--text2);cursor:pointer;transition:all .15s;white-space:nowrap;font-family:inherit;}
.kon-filter-chip:hover{border-color:var(--border2);color:var(--text);}
.kon-filter-chip .count{font-family:var(--mono);font-size:10.5px;color:var(--text3);background:var(--bg3);padding:1px 7px;border-radius:8px;font-weight:var(--fw-semibold);}
.kon-filter-chip.is-active{background:rgba(232,184,75,.12);border-color:rgba(232,184,75,.38);color:var(--accent);}
.kon-filter-chip.is-active .count{background:rgba(232,184,75,.20);color:var(--accent);}

/* Sort-Dropdown: reused generisch aus `.sort-btn` / `.sort-drop` / `.sort-opt`.
   2026-05-18 Toolbar-Vereinheitlichung: der globale .sort-btn war 10.5px /
   ~25px / blau-aktiv, die Filter-Pill 12px / 32px / amber — die Leiste wirkte
   uneben & alt. Im Kontakte-Kontext (.kon-filter-bar) ziehen wir Suche,
   Filter-Pill und Sort auf EINE Höhe (38px), gleiche Typo, gleichen Radius
   und den taxtello-Akzent. Höhere Specificity (.kon-filter-bar .sort-btn…)
   lässt andere .sort-btn-Nutzer (Belege) unberührt. */
.kon-filter-bar .kon-search input{height:38px;}
.kon-filter-bar .kon-filter-chip{height:38px;}
.kon-filter-bar .sort-btn{height:38px;padding:0 14px;gap:6px;font-size:12px;font-weight:var(--fw-semibold);border-radius:16px;color:var(--text2);background:var(--bg2);}
.kon-filter-bar .sort-btn:hover{color:var(--text);border-color:var(--border2);}
.kon-filter-bar .sort-btn.sorted{background:rgba(var(--accent-rgba-base),.12);color:var(--accent);border-color:rgba(var(--accent-rgba-base),.38);}
.kon-filter-bar .sort-btn-icon{font-size:11px;opacity:.75;}
.kon-filter-bar .sort-btn-caret{font-size:8px;opacity:.6;}
.kon-filter-bar .sort-opt.active{color:var(--accent);}
body.light .kon-filter-bar .sort-btn{background:var(--bg3);}
body.light .kon-filter-bar .sort-btn.sorted{background:var(--tone-warn-bg);border-color:var(--tone-warn-border);color:var(--tone-warn-text);}

/* ─── Light-Mode-Parität ────────────────────────────────────────
   Nutzt durchgängig die globalen Tokens (--card/--border/--text/--text2)
   aus body.light{...} im _10-shell.css-Modul. Light-Mode-Paritäten für
   .modal.kon-modal sind unnötig — .modal hat schon einen eigenen Light-
   Mode-Block. */
body.light .kon-row{background:linear-gradient(180deg,var(--card),var(--card));border-color:var(--border);}
body.light .kon-row:hover{box-shadow:0 1px 6px rgba(var(--surface-rgba-base),.05);border-color:var(--border2);background:linear-gradient(180deg,var(--card),var(--card2));}
body.light .kon-row-warn{border-left-color:rgba(217,165,32,.55);}
body.light .kon-row-name{color:var(--text);}
body.light .kon-row-sub{color:var(--text3);}
body.light .kon-row-channel{color:var(--text2);}
body.light .kon-channel-link{color:var(--text2);}
body.light .kon-channel-link>svg{color:var(--text3);}
body.light .kon-channel-link:hover{color:var(--text);}
body.light .kon-channel-link:hover>svg{color:var(--accent2);}
body.light .kon-channel-empty{color:var(--text3);}
body.light .kon-row-location{color:var(--text2);}
body.light .kon-list-head{color:var(--text3);border-bottom-color:var(--border);}
body.light .kon-search input{background:var(--bg3);border-color:var(--border);}
body.light .kon-search input:focus{background:var(--bg3);border-color:var(--accent);box-shadow:0 0 0 3px rgba(232,184,75,.20);}
body.light .kon-status-chip{background:var(--tone-warn-bg);border-color:var(--tone-warn-border);color:var(--tone-warn-text);}
/* Polish-v2: Icon-Buttons im Light-Mode komplett ohne Default-Border (echtes
   Ghost-Verhalten), Hover gibt nur eine ganz dezente schwarze Tönung. */
body.light .kon-icon-btn{color:var(--text2);}
body.light .kon-icon-btn:hover{background:rgba(var(--surface-rgba-base),.05);color:var(--text);}
body.light .kon-icon-btn.kon-btn-del:hover{background:var(--red2);color:var(--red);}
body.light .kon-filter-chip{background:var(--bg3);border-color:var(--border);color:var(--text2);}
body.light .kon-filter-chip:hover{border-color:var(--border2);color:var(--text);}
body.light .kon-filter-chip .count{background:var(--bg2);color:var(--text2);}
body.light .kon-filter-chip.is-active{background:var(--tone-warn-bg);border-color:var(--tone-warn-border);color:var(--tone-warn-text);}
body.light .kon-filter-chip.is-active .count{background:var(--accent-soft);color:var(--tone-warn-text);}

/* Touch-Target-Floor (WCAG 2.5.5 / Apple HIG) auf coarse Pointern — app-weiter
   WebKit-Sweep (iPhone 13, ergänzend zu #3721): kon-filter-chip 42×26. Diese
   Filter-Chip-Klasse ist app-weit geteilt (Kontakte/Belege/Prüfen/Dashboard) —
   der Klassen-Override hebt überall die Hit-Area. min-height schlägt die festen
   height:32px/38px-Werte; inline-flex+align-items:center zentriert vertikal. */
@media (pointer: coarse) {
  .kon-filter-chip { min-height: 44px; min-width: 44px; }
}

/* ==================== KONTAKTE DOSSIER ==================== */

.kon-layout{display:grid;grid-template-columns:minmax(320px,420px) minmax(0,1fr);gap:18px;align-items:start;}
.kon-list-panel,.kon-dossier-panel{min-width:0;}
.kon-dossier-panel{position:sticky;top:calc(var(--shell-topbar-height,64px) + 18px);}
.kon-layout .kon-list-head{display:none;}
.kon-layout .kon-row{position:relative;overflow:hidden;grid-template-columns:34px minmax(0,1fr) minmax(132px,156px);grid-template-areas:"avatar main actions" "avatar channel actions" "avatar location actions" "avatar status actions";column-gap:14px;row-gap:4px;align-items:start;padding-right:20px;}
.kon-layout .kon-row::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:999px;background:var(--accent);opacity:0;transform:scaleY(.82);transition:opacity .16s ease,transform .16s ease;}
.kon-layout .kon-row-avatar{grid-area:avatar;align-self:start;margin-top:2px;}
.kon-layout .kon-row-main{grid-area:main;display:flex;flex-direction:column;gap:2px;}
.kon-layout .kon-row-channel{grid-area:channel;}
.kon-layout .kon-row-location{grid-area:location;font-size:11.5px;color:var(--text3);}
.kon-layout .kon-row-status{grid-area:status;display:flex;justify-content:flex-start;flex-wrap:wrap;gap:6px;}
.kon-layout .kon-row-actions{grid-area:actions;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;gap:8px;min-width:132px;padding-top:2px;}
.kon-layout .kon-row:hover::before,.kon-layout .kon-row:focus-within::before,.kon-layout .kon-row.is-active::before{opacity:.92;transform:scaleY(1);}
.kon-layout .kon-row.is-active{border-color:var(--border2);background:linear-gradient(180deg,var(--card),var(--bg2));box-shadow:0 10px 26px rgba(0,0,0,.16);}
.kon-row-open{display:block;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;}
.kon-row-open:hover .kon-row-name,.kon-row-open:focus-visible .kon-row-name{color:var(--accent);}
.kon-row-open:focus-visible{outline:none;}
.kon-row-open-link{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0;padding:0;border:0;background:none;color:var(--text2);font:inherit;font-size:12.5px;font-weight:var(--fw-semibold);cursor:pointer;white-space:nowrap;transition:color .15s ease,transform .15s ease;}
.kon-row-open-link:hover,.kon-row-open-link:focus-visible,.kon-layout .kon-row.is-active .kon-row-open-link{color:var(--accent);}
.kon-row-open-link:focus-visible{outline:none;transform:translateY(-1px);}
.kon-row-menu{align-self:flex-end;}
.kon-row-menu .app-action-menu__trigger{width:32px;min-width:32px;height:32px;min-height:32px;border:1px solid var(--border);border-radius:10px;background:var(--bg3);color:var(--text3);}
.kon-row-menu .app-action-menu__trigger:hover,.kon-row-menu[open] .app-action-menu__trigger{border-color:var(--border2);background:var(--card2);color:var(--text);}
.kon-row-menu .app-action-menu__panel{right:0;top:calc(100% + 6px);}
/* Action-Menu-Popover braucht den vertikalen Clip aus _62a-Z7 (.kon-layout
   .kon-row{overflow:hidden}) NICHT — sonst wird das Dropdown an der unteren
   Row-Kante abgeschnitten (Screenshot 2026-05-20: "Löschen" halb verdeckt).
   :has() hebt das Clipping NUR während das Menü offen ist auf; sobald
   <details> schließt, springt overflow zurück auf hidden und der Accent-Bar
   plus die abgerundete Ecke bleiben sauber. z-index lift hebt die Row über
   die folgende Sibling-Row, damit der 200er Panel-z-index wirklich gewinnt
   (position:relative ohne z-index erzeugt keinen Stacking Context). */
.kon-layout .kon-row:has(.app-action-menu[open]){overflow:visible;z-index:5;}
.kon-row-context{font-size:11.5px;line-height:1.45;color:var(--text3);max-width:52ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.kon-preview-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;border:1px solid var(--border);background:var(--bg3);font-size:11px;font-weight:var(--fw-medium);line-height:1.2;color:var(--text2);white-space:nowrap;}
.kon-preview-chip--active{border-color:var(--tone-warn-border);background:var(--tone-warn-bg);color:var(--tone-warn-text);}
.kon-preview-chip--neutral{border-color:var(--border);background:var(--bg3);color:var(--text2);}
.kon-preview-chip--info{border-color:var(--tone-info-border);background:var(--tone-info-bg);color:var(--tone-info-fg);}
.kon-preview-chip--good{border-color:var(--tone-good-border);background:var(--tone-good-bg);color:var(--tone-good-fg);}
.kon-preview-chip--warn{border-color:var(--tone-warn-border);background:var(--tone-warn-bg);color:var(--tone-warn-fg-strong);}

.kon-dossier-shell{display:flex;flex-direction:column;gap:16px;}
.kon-dossier-empty,.kon-dossier-hero,.kon-dossier-notes-card,.kon-dossier-timeline-card{background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--border);border-radius:14px;box-shadow:var(--elev-card);}
.kon-dossier-empty{padding:26px 22px;}
.kon-dossier-empty h3,.kon-dossier-section-head h3{margin:0 0 6px;font-size:18px;color:var(--text);}
.kon-dossier-empty p,.kon-dossier-section-head p{margin:0;color:var(--text2);line-height:1.5;}
.kon-dossier-back{display:none;align-items:center;gap:8px;width:fit-content;padding:9px 13px;border:1px solid var(--border);border-radius:999px;background:var(--card);color:var(--text2);font:inherit;font-weight:var(--fw-semibold);cursor:pointer;box-shadow:var(--elev-card);transition:border-color .15s ease,background .15s ease,color .15s ease,transform .15s ease;}
.kon-dossier-back:hover,.kon-dossier-back:focus-visible{border-color:var(--border2);background:var(--card2);color:var(--text);transform:translateY(-1px);}
.kon-dossier-hero{padding:22px;}
.kon-dossier-hero__head{display:flex;align-items:center;gap:16px;margin-bottom:14px;}
.kon-dossier-hero__avatar{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;border:1px solid var(--border2);font-size:18px;font-weight:var(--fw-bold);color:var(--text);}
.kon-dossier-hero__avatar.is-tone-0{background:var(--tone-warn-bg);border-color:var(--tone-warn-border);color:var(--tone-warn-text);}
.kon-dossier-hero__avatar.is-tone-1{background:var(--tone-good-bg);border-color:var(--tone-good-border);color:var(--tone-good-fg);}
.kon-dossier-hero__avatar.is-tone-2{background:var(--tone-info-bg);border-color:var(--tone-info-border);color:var(--tone-info-fg);}
.kon-dossier-hero__avatar.is-tone-3{background:var(--tone-poor-bg);border-color:var(--tone-poor-border);color:var(--tone-poor-fg);}
.kon-dossier-hero__avatar.is-tone-4{background:var(--bg3);border-color:var(--border2);color:var(--accent);}
.kon-dossier-hero__avatar.is-tone-5{background:var(--tone-info-bg);border-color:var(--border2);color:var(--accent);}
.kon-dossier-eyebrow{margin:0 0 6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);}
.kon-dossier-hero h2{margin:0;font-size:26px;line-height:1.1;color:var(--text);}
.kon-dossier-hero__copy p{margin:6px 0 0;color:var(--text2);}
.kon-dossier-hero__meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.kon-dossier-hero__meta span{max-width:100%;padding:7px 10px;border-radius:999px;background:var(--bg3);border:1px solid var(--border);font-size:12px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Fehlende-E-Mail-Hinweis (2026-05-31): Warn-Badge + Erklaerzeile + Textlink.
   Ersetzt NICHT die Hauptaktion „Kontakt bearbeiten", macht die fehlende
   E-Mail aber prominent sichtbar. Warn-Tint hebt ihn vom neutralen Meta-Text
   ab; Tokens mit Fallback, falls im Theme nicht vorhanden. */
.kon-dossier-warn{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:14px;padding:10px 12px;border-radius:12px;background:var(--tone-warn-bg);border:1px solid var(--tone-warn-border);}
.kon-dossier-warn__badge{display:inline-flex;align-items:center;font-size:12px;font-weight:var(--fw-semibold);color:var(--tone-warn-fg-strong);}
.kon-dossier-warn__hint{margin:0;font-size:12.5px;line-height:1.4;color:var(--text2);}
.kon-dossier-warn__link{appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:var(--accent);font-weight:var(--fw-semibold);cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
.kon-dossier-warn__link:hover{text-decoration:none;}
.kon-dossier-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;}
.kon-dossier-actions .btn{width:100%;justify-content:center;text-align:center;}

.kon-dossier-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.kon-dossier-kpi{padding:16px;border-radius:14px;border:1px solid var(--border);background:var(--card);}
.kon-dossier-kpi--good{background:var(--tone-good-bg);border-color:var(--tone-good-border);}
.kon-dossier-kpi--info{background:var(--tone-info-bg);border-color:var(--tone-info-border);}
.kon-dossier-kpi--warn{background:var(--tone-warn-bg);border-color:var(--tone-warn-border);}
.kon-dossier-kpi__label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);}
.kon-dossier-kpi__value{margin-top:8px;font-size:24px;font-weight:var(--fw-bold);color:var(--text);font-variant-numeric:tabular-nums;}
.kon-dossier-kpi__meta{margin-top:8px;font-size:12px;color:var(--text2);}

.kon-dossier-notes-card,.kon-dossier-timeline-card{padding:18px;}
.kon-dossier-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px;}
.kon-dossier-notes-input{width:100%;box-sizing:border-box;min-height:150px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--bg3);color:var(--text);font:inherit;line-height:1.55;resize:vertical;}
.kon-dossier-notes-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--tone-warn-border);}

.kon-dossier-timeline{display:flex;flex-direction:column;gap:12px;}
.kon-dossier-event{padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--card2);}
.kon-dossier-event__top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;}
.kon-dossier-event__meta{margin-top:6px;font-size:12px;color:var(--text2);}
.kon-dossier-event__date{margin-top:10px;font-size:12px;color:var(--text3);}

/* MacBook-/Narrow-desktop: Liste zuerst, Dossier als eigener Fokusbereich. */
@media (max-width: 1800px){
  .kon-layout{grid-template-columns:1fr;}
  .kon-dossier-panel{position:static;}
  .kon-layout--mobile-detail .kon-list-panel{display:none;}
  .kon-layout:not(.kon-layout--mobile-detail) .kon-dossier-panel{display:none;}
  .kon-layout--mobile-detail .kon-dossier-back{display:inline-flex;}
}

@media (max-width: 860px){
  .kon-dossier-hero{padding:18px;}
  .kon-dossier-summary-grid{grid-template-columns:1fr;}
  .kon-dossier-section-head{flex-direction:column;align-items:stretch;}
  .kon-dossier-section-head .btn{align-self:flex-start;}
  .kon-dossier-event__top{flex-direction:column;align-items:flex-start;}
  .kon-layout .kon-row{grid-template-columns:34px minmax(0,1fr);grid-template-areas:"avatar main" "avatar channel" "avatar location" "status status" "actions actions";}
  .kon-layout .kon-row-status{margin-top:4px;}
  .kon-layout .kon-row-actions{flex-direction:row;align-items:center;justify-content:space-between;width:100%;min-width:0;padding-top:8px;}
  .kon-row-open-link{justify-content:flex-start;}
}

/* ==================== KONTAKTE CSV IMPORT MODAL (PR2 T3) ==================== */
/* 3-step CSV-import modal. Namespace: .kon-imp-*; shared modal primitives,
 * token colors, no inline-style attrs (sentinel-pinned). */

/* ─── Modal envelope ────────────────────────────────────────────────────
   Wider dialog (max ~880px) than the standard contact-edit modal so the
   preview table + mapping panel breathe. Same flex-column shell as
   .kon-modal: sticky header + footer, scrollable body. */
.modal.kon-imp-modal{
  max-width:880px;
  display:flex;flex-direction:column;
  max-height:min(90vh,860px);
  overflow:hidden;
  border-radius:var(--radius-hero);
}
@media(max-width:920px){.modal.kon-imp-modal{max-width:96vw;}}
@media(max-width:640px){.modal.kon-imp-modal{max-width:100%;max-height:94vh;border-radius:var(--radius-lg);}}

/* ─── Header ──────────────────────────────────────────────────────────── */
.kon-imp-mh{align-items:flex-start;gap:14px;padding:18px 22px 14px;border-radius:var(--radius-hero) var(--radius-hero) 0 0;flex-shrink:0;border-bottom:1px solid var(--border);}
@media(max-width:640px){.kon-imp-mh{border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:16px 16px 12px;}}
.kon-imp-mh__copy{flex:1;min-width:0;}
.modal.kon-imp-modal .kon-imp-mh__copy h2{font-size:16px;font-weight:var(--fw-bold);color:var(--text);letter-spacing:-.01em;margin:0;}
.modal.kon-imp-modal .kon-imp-mh__copy .modal-subtitle{font-size:12.5px;color:var(--text3);line-height:1.45;margin-top:3px;}

/* ─── Body / scroll-area ─────────────────────────────────────────────── */
.modal.kon-imp-modal .kon-imp-mb{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:20px 24px;}
@media(max-width:640px){.modal.kon-imp-modal .kon-imp-mb{padding:16px;}}

/* Each step is wrapped in .kon-imp-step — vertical stack with even gaps. */
.kon-imp-step{display:flex;flex-direction:column;gap:18px;}
.kon-imp-lead{font-size:13px;color:var(--text2);line-height:1.55;margin:0;}

/* ─── Step 1: Drop / file picker ─────────────────────────────────────── */
/* .kon-imp-drop is a <label> wrapping the hidden file input. Click anywhere
   in the zone triggers the native picker — no JS needed. */
.kon-imp-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:140px;padding:24px;border:2px dashed var(--border);border-radius:var(--radius-lg);background:var(--bg2);color:var(--text2);cursor:pointer;text-align:center;transition:border-color .15s,background .15s,color .15s;}
.kon-imp-drop:hover{border-color:var(--accent);background:var(--bg);color:var(--text);}
.kon-imp-drop:focus-within{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgba-base),.18);color:var(--text);}
/* Native file input stays in the DOM (label-bound) but invisible — keeps
   keyboard focus + screen-reader semantics intact without an inline style. */
.kon-imp-drop input[type="file"]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;white-space:nowrap;}
.kon-imp-drop__label{font-size:14px;font-weight:var(--fw-semibold);color:inherit;}
.kon-imp-drop__hint{font-size:12px;color:var(--text3);font-weight:var(--fw-regular);}

/* Error banner above the footer (re-uses generic .sbn.red helpers from
   shell if present; this just tunes spacing for the modal context). */
.kon-imp-error{margin-top:4px;}
.kon-imp-error[hidden]{display:none!important;}

/* ─── Footer ──────────────────────────────────────────────────────────── */
.kon-imp-mf{flex-shrink:0;display:flex;justify-content:flex-end;gap:10px;padding:14px 22px;border-top:1px solid var(--border);background:var(--bg3);border-radius:0 0 var(--radius-hero) var(--radius-hero);}
@media(max-width:640px){.kon-imp-mf{padding:12px 16px;border-radius:0 0 var(--radius-lg) var(--radius-lg);flex-direction:column-reverse;}}
.kon-imp-mf .btn{min-height:40px;}
@media(max-width:640px){.kon-imp-mf .btn{width:100%;justify-content:center;}}

/* ─── Step 2: Summary + Preview + Mapping ────────────────────────────── */

/* KPI-style counter row above the preview table (Zeilen / Dubletten /
   Blocker / Warnungen). Wraps to 2x2 on narrow screens. */
.kon-imp-summary{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:12.5px;color:var(--text2);padding:10px 14px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-md);}
.kon-imp-summary strong{color:var(--text);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;margin-right:3px;}
.kon-imp-summary__provider{margin-left:auto;font-size:11.5px;color:var(--text3);letter-spacing:.02em;}
@media(max-width:640px){.kon-imp-summary{font-size:12px;gap:6px 14px;}.kon-imp-summary__provider{margin-left:0;flex-basis:100%;}}

/* "Vorschau: erste 20 von N Zeilen" — surfaces the preview-vs-commit
   asymmetry so users with large files don't expect only 20 rows imported. */
.kon-imp-preview-note{margin:0;font-size:12px;color:var(--text3);line-height:1.5;padding:8px 12px;background:var(--tone-info-bg);border:1px solid var(--tone-info-border);border-left:3px solid var(--tone-info-fg);border-radius:var(--radius-sm);}

/* Preview table — horizontally scrolls on narrow viewports to keep all
   columns reachable without compressing them into illegibility. */
.kon-imp-preview-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--card);}
.kon-imp-preview{width:100%;border-collapse:collapse;font-size:12.5px;color:var(--text);min-width:520px;}
.kon-imp-preview th,.kon-imp-preview td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis;}
.kon-imp-preview thead th{position:sticky;top:0;background:var(--bg3);font-weight:var(--fw-semibold);color:var(--text2);font-size:11px;letter-spacing:.04em;text-transform:uppercase;}
.kon-imp-preview tbody tr:last-child td{border-bottom:0;}
.kon-imp-preview tbody tr:hover td{background:var(--bg2);}
.kon-imp-row-num{font-variant-numeric:tabular-nums;color:var(--text3);font-size:11.5px;width:36px;}

/* Empty / fallback state inside the preview area. */
.kon-imp-empty{padding:18px;text-align:center;color:var(--text3);font-size:12.5px;background:var(--bg2);border:1px dashed var(--border);border-radius:var(--radius-md);}

/* Mapping panel — collapsible <details> with one row per CSV column. */
.kon-imp-map{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--card);}
.kon-imp-map>summary{padding:11px 14px;font-size:12.5px;font-weight:var(--fw-semibold);color:var(--text2);cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;}
.kon-imp-map>summary::-webkit-details-marker{display:none;}
.kon-imp-map>summary::before{content:'▸';font-size:10px;color:var(--text3);transition:transform .15s;}
.kon-imp-map[open]>summary::before{transform:rotate(90deg);}
.kon-imp-map>summary:hover{color:var(--text);}
.kon-imp-map__list{display:flex;flex-direction:column;gap:6px;padding:6px 14px 14px;border-top:1px solid var(--border);}
.kon-imp-map__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px;align-items:center;padding:6px 0;}
.kon-imp-map__col{font-size:12.5px;color:var(--text);font-weight:var(--fw-medium);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kon-imp-map__val{min-width:0;display:flex;flex-direction:column;gap:4px;}
.kon-imp-map__select{width:100%;box-sizing:border-box;height:34px;padding:0 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg2);color:var(--text);font-family:inherit;font-size:12.5px;transition:border-color .15s,background .15s,box-shadow .15s;}
.kon-imp-map__select:hover{border-color:var(--border2);}
.kon-imp-map__select:focus{outline:none;border-color:var(--accent);background:var(--bg);box-shadow:0 0 0 3px rgba(var(--accent-rgba-base),.14);}
.kon-imp-map__hint{font-size:11px;color:var(--text3);font-style:italic;}
@media(max-width:640px){.kon-imp-map__row{grid-template-columns:1fr;gap:4px;}}

/* Duplicate-strategy radio fieldset. Radios override app-wide input width. */
.kon-imp-strategy{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--card);}
.kon-imp-strategy>legend{padding:0 6px;font-size:12px;font-weight:var(--fw-semibold);color:var(--text2);text-transform:uppercase;letter-spacing:.05em;}
.kon-imp-strategy__opt{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;transition:background .12s,border-color .12s;text-transform:none;letter-spacing:0;}
.kon-imp-strategy__opt:hover{background:var(--bg2);border-color:var(--border);}
.kon-imp-strategy__opt input[type="radio"]{width:auto;padding:0;margin-top:2px;accent-color:var(--accent);flex-shrink:0;}
.kon-imp-strategy__copy{display:flex;flex-direction:column;gap:2px;min-width:0;}
.kon-imp-strategy__copy>strong{font-size:13px;font-weight:var(--fw-semibold);color:var(--text);}
.kon-imp-strategy__desc{font-size:11.5px;color:var(--text3);line-height:1.45;font-weight:var(--fw-regular);}

/* ─── Step 3: Result counters + warnings list ────────────────────────── */
.kon-imp-result-counters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
@media(max-width:640px){.kon-imp-result-counters{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:360px){.kon-imp-result-counters{grid-template-columns:1fr;}}
.kon-imp-result-counter{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:14px 10px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--card);text-align:center;}
.kon-imp-result-counter>strong{font-size:22px;font-weight:var(--fw-bold);color:var(--text);font-variant-numeric:tabular-nums;line-height:1.1;}
.kon-imp-result-counter>span{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;}
.kon-imp-result-counter--good{background:var(--tone-good-bg);border-color:var(--tone-good-border);}
.kon-imp-result-counter--good>strong{color:var(--tone-good-fg);}
.kon-imp-result-counter--info{background:var(--tone-info-bg);border-color:var(--tone-info-border);}
.kon-imp-result-counter--info>strong{color:var(--tone-info-fg);}
.kon-imp-result-counter--warn{background:var(--tone-warn-bg);border-color:var(--tone-warn-border);}
.kon-imp-result-counter--warn>strong{color:var(--tone-warn-text);}

.kon-imp-result-warns{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--tone-warn-border);border-radius:var(--radius-md);background:var(--tone-warn-bg);}
.kon-imp-result-warns__head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.kon-imp-result-warns__head h3{margin:0;font-size:14px;font-weight:var(--fw-semibold);color:var(--text);}
.kon-imp-result-warns__list{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.kon-imp-result-warns__more{margin:0;font-size:11.5px;color:var(--text3);text-align:center;font-style:italic;}

/* Per-warning chip — full-width row inside the warnings list. */
.kon-imp-warn-chip{display:block;padding:8px 10px;border-radius:var(--radius-sm);background:var(--card);border:1px solid var(--border);font-size:12px;color:var(--text2);line-height:1.45;}
.kon-imp-warn-chip>strong{color:var(--tone-warn-text);font-weight:var(--fw-semibold);margin-right:4px;}

/* ─── Light-mode parity ────────────────────────────────────────────────
   Project default theme is dark; .light is opt-in. Override token-derived
   surfaces where the default values were tuned for dark contrast. */
body.light .kon-imp-drop{background:var(--bg3);color:var(--text2);}
body.light .kon-imp-drop:hover{background:var(--card);color:var(--text);}
body.light .kon-imp-summary{background:var(--card);}
body.light .kon-imp-preview thead th{background:var(--card2);color:var(--text2);}
body.light .kon-imp-preview tbody tr:hover td{background:var(--bg3);}
body.light .kon-imp-empty{background:var(--bg3);}
body.light .kon-imp-mf{background:var(--card);}
body.light .kon-imp-result-counter{background:var(--bg3);}
body.light .kon-imp-warn-chip{background:var(--bg3);}

/* ============ KONTAKTE MODAL SUB-SECTIONS (PR2 T2/T3) ============ */
/* Styles for the Ansprechpartner + Bankverbindungen sub-sections rendered
 * inside the contact-edit modal by public/js/contacts-modal-sections.js.
 * Namespaces: .kon-modal-section* (section shell) + .kon-modal-row*
 * (individual person / bank row). The host modal (.modal.kon-modal,
 * see _62-contacts.css) already provides the 2-col grid + section header
 * primitives (.slbl, .fgrp); this partial only adds the row-level
 * layout + the IBAN/primary affordances.
 *
 * CSP-Freeze: no inline-style attributes (sentinel
 * tests/contacts-modal-sections-inline-style-attrs.test.js).
 * Tokens-only — no hardcoded color or spacing values. */

/* ─── Section wrapper ────────────────────────────────────────────────────
   The sub-sections sit inside the existing .kon-mb-scroll 2-col grid; each
   spans both columns (grid-column:1 / -1) so the rows can use their full
   width for the input grid below. */
.kon-modal-section{display:flex;flex-direction:column;gap:10px;grid-column:1 / -1;padding-top:6px;}
.kon-modal-section>.slbl{margin-bottom:4px;}

/* Row container: scroll-friendly stack with a subtle inner card surface
   when rows are present. The empty state replaces this. */
.kon-modal-section__rows{display:flex;flex-direction:column;gap:8px;}

/* Empty state ("Noch keine Ansprechpartner hinterlegt."). */
.kon-modal-section__empty{margin:0;padding:14px 16px;font-size:12.5px;color:var(--text3);font-style:italic;text-align:center;background:var(--bg2);border:1px dashed var(--border);border-radius:var(--radius-md);line-height:1.45;}

/* Add-row trigger button — left-aligned ghost style so it doesn't compete
   with the modal's primary actions in the footer. */
.kon-modal-section__add{align-self:flex-start;font-size:12.5px;font-weight:var(--fw-semibold);min-height:34px;padding:6px 12px;border-radius:var(--radius-sm);}

/* ─── Row layout ───────────────────────────────────────────────────────
   One row = inputs grid + remove button. Border + padding give it the
   feel of a small card so the eye groups its inputs together; the remove
   button sits to the right, vertically centred. */
.kon-modal-row{display:grid;grid-template-columns:minmax(0,1fr) 32px;gap:10px;align-items:start;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--card);transition:border-color .15s,background .15s;}
.kon-modal-row:focus-within{border-color:var(--accent);background:var(--bg);box-shadow:0 0 0 2px rgba(var(--accent-rgba-base),.10);}

/* Persons row: 2-col grid for the 6 short fields (Anrede/Titel/Vorname/
   Nachname/E-Mail/Telefon). Bank row: same 2-col grid for IBAN/BIC/Label/
   Primär. Mobile collapses to a single column. */
.kon-modal-row__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0;}
.kon-modal-row__grid--bank{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,2fr) minmax(0,auto);}
@media(max-width:640px){.kon-modal-row__grid,.kon-modal-row__grid--bank{grid-template-columns:1fr;}}

/* Inputs inside the row — slightly smaller than the main modal fields so
   the nested section reads as a list of compact rows, not a duplicate form. */
.kon-modal-row__input{width:100%;box-sizing:border-box;height:34px;padding:0 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg2);color:var(--text);font-family:inherit;font-size:13px;transition:border-color .15s,background .15s,box-shadow .15s;}
.kon-modal-row__input::placeholder{color:var(--text3);opacity:.75;}
.kon-modal-row__input:hover{border-color:var(--border2);}
.kon-modal-row__input:focus{outline:none;border-color:var(--accent);background:var(--bg);box-shadow:0 0 0 3px rgba(var(--accent-rgba-base),.14);}

/* IBAN gets monospace + a touch more letter-spacing for legibility. */
.kon-modal-row__input--iban{font-family:var(--mono,monospace);letter-spacing:.04em;text-transform:uppercase;}
/* Invalid IBAN — soft red tone. The validator (validateIbanClient) flags
   this; the row keeps its normal background so the input still pops. */
.kon-modal-row__input--iban-invalid{border-color:var(--tone-poor-border);background:var(--tone-poor-bg);color:var(--tone-poor-fg);}

/* Primary-bank radio — inline label with the radio, occupies one grid
   slot like a regular field. */
.kon-modal-row__primary{display:inline-flex;align-items:center;gap:8px;padding:0 4px;height:34px;font-size:12.5px;color:var(--text2);cursor:pointer;}
.kon-modal-row__primary input[type="radio"]{margin:0;accent-color:var(--accent);}
.kon-modal-row__primary>span{font-weight:var(--fw-semibold);}

/* Remove button — quiet ghost with destructive hover. Keyboard accessible
   via the visible focus ring. */
.kon-modal-row__remove{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;align-self:start;margin-top:1px;padding:0;background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--text3);cursor:pointer;font-size:18px;line-height:1;font-family:inherit;transition:background .12s,border-color .12s,color .12s;}
.kon-modal-row__remove:hover{color:var(--red);background:rgba(212,63,63,.10);border-color:rgba(212,63,63,.30);}
.kon-modal-row__remove:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(var(--accent-rgba-base),.20);}

/* Banks-section variants — mostly identical to persons; this hook is
   here for future tweaks (e.g. tighter row gaps when many accounts). */
.kon-modal-section--banks .kon-modal-row{padding:10px 12px;}

/* ─── Mobile-first ────────────────────────────────────────────────────── */
@media(max-width:640px){
  .kon-modal-row{padding:10px;}
  .kon-modal-section__empty{padding:12px 14px;font-size:12px;}
  .kon-modal-section__add{width:100%;justify-content:center;align-self:stretch;}
}

/* ─── Light-mode parity ──────────────────────────────────────────────── */
body.light .kon-modal-row{background:var(--card);border-color:var(--border);}
body.light .kon-modal-row:focus-within{background:var(--bg3);}
body.light .kon-modal-row__input{background:var(--bg3);}
body.light .kon-modal-row__input:focus{background:var(--card);}
body.light .kon-modal-section__empty{background:var(--bg3);color:var(--text3);}
body.light .kon-modal-row__remove{color:var(--text2);}
body.light .kon-modal-row__remove:hover{color:var(--red);background:var(--red2);border-color:rgba(212,63,63,.35);}
body.light .kon-modal-row__input--iban-invalid{background:var(--tone-poor-bg);border-color:var(--tone-poor-border);color:var(--tone-poor-fg);}

/* _42-zeiterfassung.css - Zeiterfassung (PR 2b)
   Portiert aus dem abgenommenen Prototyp-<style> der Proto-PR. Nur
   App-Tokens, kein neues Brand-Color. tt-Prefix, ueber die Page-Klassen
   gescoped. Dev-Chrome (proto-controls/-banner/-presentation) und der
   ungenutzte Mobile-Quick-Capture-Helper sind nicht uebernommen. Bespoke
   Light-Mode-Overrides entfallen: die Flaechen sind tokenbasiert und
   flippen ueber die App-Light-Tokens automatisch. */
/* Buttons: AUSSCHLIESSLICH App-System (.btn/.btn-p/.btn-g aus
   _10-shell.css, DESIGN.md). Keine Custom-Optik — nur Touch-Höhe
   (≥44px, Akzeptanzkriterium PR 1) als einzige Anpassung. */
.tt-hero .btn,.tt-kpi-cta .btn,.tt-gate-actions .btn,
.tt-drawer-cta .btn,.tt-timer-actions .btn,.tt-empty-cta .btn,
.app-page-actions .btn{min-height:44px;}
/* ── HERO-BAND: ein zusammenhängendes Premium-Element ──────────────
   Timer (60%) + Geld-Editorial-Satz (40%) in EINEM Gradient-Hero
   mit doppeltem Gold-Glow. Tiefe statt flacher grauer Boxen. */
.tt-hero{position:relative;overflow:hidden;border-radius:26px;
  margin-bottom:26px;
  border:1px solid rgba(var(--surface-rgba-base),.07);
  background:
    radial-gradient(circle at 16% 16%,rgba(248,197,75,.15),transparent 30%),
    radial-gradient(circle at 84% 30%,rgba(101,119,255,.11),transparent 34%),
    linear-gradient(150deg,var(--card2) 0%,
      var(--bg2) 55%,var(--bg) 100%);
  box-shadow:0 36px 100px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(var(--surface-rgba-base),.09),
    inset 0 0 0 1px rgba(var(--surface-rgba-base),.02);}
.tt-hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  z-index:0;mix-blend-mode:overlay;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");}
.tt-hero::after{content:'';position:absolute;inset:0;pointer-events:none;
  z-index:0;background:radial-gradient(ellipse 60% 80% at 50% -20%,
    rgba(232,184,75,.1) 0%,transparent 55%);}
@media(prefers-contrast:more){.tt-hero::before,.tt-hero::after{display:none;}}
.tt-hero-grid{position:relative;display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(290px,1fr);
  align-items:stretch;}
.tt-hero-grid>*{position:relative;z-index:1;}
@media(max-width:920px){.tt-hero-grid{grid-template-columns:1fr;}}
/* Timer-Panel — Hauptinstrument im Control-Center */
.tt-timer-card{padding:38px 38px 34px;display:flex;flex-direction:column;
  gap:22px;border-right:1px solid rgba(var(--surface-rgba-base),.06);position:relative;}
@media(max-width:920px){.tt-timer-card{border-right:none;
  border-bottom:1px solid rgba(var(--surface-rgba-base),.06);padding:30px 26px;}}
.tt-timer-head{display:flex;align-items:center;gap:11px;}
.tt-timer-orb{width:11px;height:11px;border-radius:50%;flex:0 0 auto;
  background:var(--text3);box-shadow:0 0 0 4px rgba(120,128,168,.12);}
.tt-timer-orb.is-live{background:var(--green);
  box-shadow:0 0 14px rgba(52,211,153,.85),0 0 0 5px rgba(52,211,153,.16);
  animation:ttOrb 1.8s ease-in-out infinite;}
@keyframes ttOrb{0%,100%{box-shadow:0 0 14px rgba(52,211,153,.85),
  0 0 0 5px rgba(52,211,153,.16);}50%{box-shadow:0 0 22px rgba(52,211,153,1),
  0 0 0 9px rgba(52,211,153,.05);}}
@media(prefers-reduced-motion:reduce){.tt-timer-orb.is-live{animation:none;}}
.tt-timer-eyebrow{font-size:10.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.18em;color:var(--accent);opacity:.85;}
.tt-timer-display{font-family:var(--font-mono,'JetBrains Mono',monospace);
  font-size:clamp(60px,8.6vw,98px);font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--text);line-height:.95;
  letter-spacing:-.035em;
  text-shadow:0 0 44px rgba(232,184,75,.22),0 2px 2px rgba(0,0,0,.4);}
.tt-timer-caret{display:inline-block;width:4px;height:.66em;max-height:48px;
  margin-left:8px;border-radius:2px;background:var(--accent);
  vertical-align:baseline;pointer-events:none;
  box-shadow:0 0 16px rgba(232,184,75,.9),0 0 4px rgba(232,184,75,1);
  animation:ttCaret 1.05s steps(1) infinite;}
/* Mobile-Safari: clamp() + vw-Font-Size auf der Timer-Display kann den
   em-basierten Caret übergroß rendern (Toolbar-Bounce). Hard-Cap +
   pointer-events:none oben verhindert den „gelben Balken überdeckt
   Buttons"-Bug (#xxxx 2026-05). */
@keyframes ttCaret{50%{opacity:0;}}
@media(prefers-reduced-motion:reduce){.tt-timer-caret{animation:none;}}
.tt-timer-live{font-size:14px;color:var(--text2);
  margin-top:-8px;font-variant-numeric:tabular-nums;}
.tt-timer-live b{color:var(--accent3);font-weight:700;
  font-family:var(--font-mono,monospace);
  font-variant-numeric:tabular-nums;}
.tt-timer-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:520px){.tt-timer-fields{grid-template-columns:1fr;}}
.tt-field{display:flex;flex-direction:column;gap:5px;}
.tt-field label{font-size:10.5px;color:var(--text3);
  font-weight:700;text-transform:uppercase;letter-spacing:.08em;}
.tt-field-hint{font-size:9px;color:var(--text3);font-weight:600;
  text-transform:none;letter-spacing:.02em;margin-left:6px;opacity:.7;}
.tt-field select,.tt-field input{background:rgba(8,11,20,.55);
  border:1px solid var(--border2);color:var(--text);
  border-radius:10px;padding:11px 12px;font:inherit;font-size:13px;
  min-height:44px;transition:border-color .15s,box-shadow .15s;}
.tt-field [data-action=ztDate]{width:100%;min-height:44px;text-align:left}
.tt-field select:focus,.tt-field input:focus{outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(232,184,75,.16);}
.tt-timer-actions{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:2;}
@media(max-width:520px){.tt-timer-actions{flex-direction:column;align-items:stretch;}
  .tt-timer-actions .btn{width:100%;justify-content:center;}}
/* Mobile: Buttons stacken vertikal + volle Breite, sonst überlappt der
   lange „Stoppen & abrechenbar speichern"-Button mit dem „Verwerfen"-
   Button und nur „Verwerfen" bleibt klickbar. z-index lift hält die
   Buttons über etwaigen Glow-Pseudo-Elementen aus tt-hero::after. */
/* Mobile: Select über etwaige Pseudo-Element-Glows */
.tt-field select{position:relative;z-index:3;}
.tt-spark{display:flex;flex-direction:column;gap:6px;margin-top:2px;}
.tt-spark-lbl{font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--text3);}
.tt-sparkline{display:flex;align-items:flex-end;gap:7px;height:48px;overflow:hidden;}
.tt-spark-bar{display:block;flex:1;height:48px;max-height:48px;
  color:rgba(var(--surface-rgba-base),.06);
  min-height:4px;cursor:help;transition:filter .15s;}
/* SVG ohne explizite Höhe + preserveAspectRatio="none" + viewBox 8x48
   (1:6) skaliert die SVG-Höhe auf das ~6-fache der vom Flex bestimmten
   Breite → ~500px statt 48px. JS hat jetzt height="48" auf dem <svg>,
   CSS doppelt mit height + max-height + overflow:hidden im Parent für
   browserübergreifende Sicherheit. */
.tt-spark-bar.is-on{filter:drop-shadow(0 0 14px rgba(232,184,75,.4));}
.tt-spark-row{display:flex;gap:7px;}
.tt-spark-day{flex:1;text-align:center;font-size:9.5px;
  color:var(--text3);font-family:var(--font-mono,monospace);}
/* Geld-Panel — Editorial-Satz (D6), GOLD DOMINANT durch Glow+Größe */
/* Payoff-Panel — eigenes Glass-Panel, Opportunity statt Kennzahl */
.tt-bill-card{margin:24px;padding:30px 30px 28px;display:flex;
  flex-direction:column;gap:16px;justify-content:center;
  border-radius:20px;
  background:linear-gradient(165deg,rgba(var(--surface-rgba-base),.05),
    rgba(var(--surface-rgba-base),.015));
  border:1px solid rgba(var(--surface-rgba-base),.08);
  box-shadow:inset 0 1px 0 rgba(var(--surface-rgba-base),.07),
    0 16px 40px rgba(0,0,0,.3);}
@media(max-width:920px){.tt-bill-card{margin:0;border-radius:0;
  border:none;border-top:1px solid rgba(var(--surface-rgba-base),.06);
  background:transparent;box-shadow:none;padding:28px 26px;}}
.tt-bill-eyebrow{font-size:10.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.18em;color:var(--accent);opacity:.85;}
.tt-bill-amount{display:block;
  font-family:var(--font-mono,'JetBrains Mono',monospace);
  font-size:clamp(48px,6vw,72px);font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--accent);
  letter-spacing:-.03em;line-height:.95;
  text-shadow:0 0 48px rgba(232,184,75,.5);}
.tt-bill-chips{display:flex;flex-wrap:wrap;gap:7px;}
.tt-bill-chip{font-size:11.5px;font-weight:600;color:var(--text2);
  background:rgba(var(--surface-rgba-base),.05);border:1px solid rgba(var(--surface-rgba-base),.08);
  padding:5px 11px;border-radius:999px;
  font-variant-numeric:tabular-nums;}
.tt-bill-chip b{color:var(--text);font-weight:700;}
/* Langzeit-Timer-Anomalie (vergessener Timer >= 24h): auffällig markieren. */
.tt-bill-chip.is-anomaly{color:var(--red);background:var(--red2);
  border-color:var(--red3);font-weight:700;}
.tt-bill-next{font-size:12.5px;color:var(--text3);
  display:flex;align-items:center;gap:7px;}
.tt-bill-next::before{content:'';width:5px;height:5px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 8px rgba(232,184,75,.7);}
.tt-bill-card .btn-p{width:100%;justify-content:center;}
.tt-bill-empty{color:var(--text3);font-size:14px;font-style:italic;}
/* Kunden-KPI-Kacheln (im Hero-Shell) ──────────────────────────── */
.tt-kpi-grid{position:relative;display:grid;
  grid-template-columns:repeat(3,1fr);}
@media(max-width:760px){.tt-kpi-grid{grid-template-columns:1fr;}}
.tt-kpi{padding:28px 30px;border-right:1px solid rgba(var(--surface-rgba-base),.06);}
.tt-kpi:last-child{border-right:none;}
@media(max-width:760px){.tt-kpi{border-right:none;
  border-bottom:1px solid rgba(var(--surface-rgba-base),.06);}}
.tt-kpi-lbl{font-size:10px;font-weight:800;text-transform:uppercase;
  letter-spacing:.14em;color:var(--text3);margin-bottom:10px;}
.tt-kpi-big{font-family:var(--font-mono,'JetBrains Mono',monospace);
  font-size:clamp(28px,3.4vw,38px);font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--text);
  letter-spacing:-.02em;line-height:1;margin-bottom:8px;}
.tt-kpi--accent .tt-kpi-big{color:var(--accent);
  text-shadow:0 0 28px rgba(232,184,75,.4);}
.tt-kpi--accent .tt-kpi-lbl{color:var(--accent);opacity:.85;}
.tt-kpi-sub{font-size:12.5px;color:var(--text2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tt-kpi-cta{position:relative;display:flex;gap:10px;flex-wrap:wrap;
  padding:0 30px 28px;}
/* ── Status-Pills: alle 7 auf Tone-Skala (D2) ──────────────────── */
.tt-chip{display:inline-flex;align-items:center;gap:4px;height:18px;
  padding:0 7px;border-radius:9px;font-size:10px;font-weight:600;
  letter-spacing:.02em;white-space:nowrap;line-height:1;
  background:var(--bg2);border:1px solid var(--border);
  color:var(--text3);}
.tt-chip--good{background:rgba(52,211,153,.10);
  border-color:rgba(52,211,153,.32);color:var(--green);}
.tt-chip--warn{background:rgba(232,184,75,.10);
  border-color:rgba(232,184,75,.32);color:var(--accent);}
.tt-chip--info{background:rgba(96,165,250,.10);
  border-color:rgba(96,165,250,.32);color:var(--blue);}
.tt-chip--muted{background:transparent;border-color:var(--border);
  color:var(--text3);}
.tt-chip--archived{opacity:.55;}
.tt-chip-dot{width:5px;height:5px;border-radius:50%;
  background:currentColor;}
.tt-chip-dot.is-live{animation:ttCaret 1.1s steps(1) infinite;}
@media(prefers-reduced-motion:reduce){.tt-chip-dot.is-live{animation:none;}}
/* ── Abrechnungs-Inbox (Premium-List, kein Excel) ──────────────── */
.tt-inbox-head{display:flex;align-items:baseline;gap:10px;
  margin:32px 2px 12px;}
.tt-inbox-title{font-size:13px;font-weight:800;text-transform:uppercase;
  letter-spacing:.14em;color:var(--text2);}
.tt-inbox-count{font-size:12px;color:var(--text3);
  font-family:var(--font-mono,monospace);}
.tt-table-card{background:linear-gradient(180deg,
  var(--card),var(--bg2));
  border:1px solid rgba(var(--surface-rgba-base),.06);border-radius:22px;
  overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(var(--surface-rgba-base),.05);}
.tt-table-head{display:grid;
  grid-template-columns:104px 2fr 84px 120px 124px 116px;
  gap:14px;padding:13px 26px;font-size:9.5px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--text3);font-weight:800;
  background:rgba(var(--surface-rgba-base),.02);
  border-bottom:1px solid rgba(var(--surface-rgba-base),.06);}
.tt-row{display:grid;
  grid-template-columns:104px 2fr 84px 120px 124px 116px;
  gap:14px;padding:18px 26px;align-items:center;
  border-bottom:1px solid rgba(var(--surface-rgba-base),.045);font-size:13px;
  position:relative;transition:background .12s;}
.tt-row:last-child{border-bottom:0;}
.tt-row::before{content:'';position:absolute;left:0;top:0;bottom:0;
  width:3px;background:linear-gradient(180deg,var(--accent3),
    var(--accent));opacity:0;transition:opacity .14s;}
.tt-row:hover{background:rgba(var(--surface-rgba-base),.04);}
.tt-row:hover::before{opacity:1;}
.tt-c-date{color:var(--text3);font-size:11px;
  font-family:var(--font-mono,monospace);letter-spacing:-.02em;}
.tt-c-main{min-width:0;}
.tt-c-cust{color:var(--text);font-weight:700;font-size:13.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tt-c-desc{color:var(--text3);font-size:12px;margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tt-c-dur{font-family:var(--font-mono,monospace);
  font-variant-numeric:tabular-nums;text-align:right;
  color:var(--text2);font-size:12.5px;}
.tt-c-amt{font-family:var(--font-mono,monospace);
  font-variant-numeric:tabular-nums;text-align:right;
  color:var(--accent3);font-weight:700;font-size:15px;}
.tt-c-amt.is-nonbill{color:var(--text3);
  text-decoration:line-through;font-weight:500;font-size:13px;}
.tt-c-act{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px;}
.tt-row-act{font-size:11.5px;font-weight:700;color:var(--accent);
  background:rgba(232,184,75,.1);border:1px solid rgba(232,184,75,.28);
  padding:6px 11px;border-radius:8px;cursor:pointer;white-space:nowrap;
  opacity:.5;transition:opacity .12s,background .12s;}
.tt-row:hover .tt-row-act{opacity:1;}
.tt-row-act:hover{background:rgba(232,184,75,.18);}
/* Lösch-Aktion: visuell als destruktiv abgesetzt. */
.tt-row-act--danger{color:var(--red);background:var(--red2);
  border-color:var(--red3);}
.tt-row-act--danger:hover{background:var(--red3);}
@media(max-width:760px){
  .tt-table-head{display:none;}
  .tt-row{grid-template-columns:1fr auto;gap:4px 14px;
    padding:16px 18px;}
  .tt-c-date{grid-column:1;grid-row:1;}
  .tt-c-main{grid-column:1;grid-row:2;}
  .tt-c-dur{grid-column:1;grid-row:3;text-align:left;
    color:var(--text3);}
  .tt-c-amt{grid-column:2;grid-row:1;font-size:16px;}
  .tt-c-status{grid-column:2;grid-row:2;justify-self:end;}
  .tt-c-act{grid-column:2;grid-row:3;justify-self:end;}
  .tt-row-act{opacity:1;}}
/* ── Filter-Pills ──────────────────────────────────────────────── */
.tt-filters{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 0;}
@media(max-width:600px){.tt-filters{flex-wrap:nowrap;overflow-x:auto;
  padding-bottom:4px;-webkit-overflow-scrolling:touch;}}
.tt-filter{background:var(--bg2);
  border:1px solid var(--border);color:var(--text2);
  padding:6px 14px;border-radius:999px;font-size:12px;font-weight:600;
  cursor:pointer;white-space:nowrap;min-height:32px;}
.tt-filter.is-active{background:rgba(232,184,75,.14);
  border-color:rgba(232,184,75,.32);color:var(--accent);}
/* ── Upgrade-Gate — Zeit-zur-Rechnung-Produktfluss ─────────────── */
/* Solo-Gate: Produktfluss statt Blur-Modal. */
.tt-gate-wrap{position:relative;isolation:isolate;display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(320px,1.1fr);align-items:center;
  gap:clamp(32px,6vw,88px);min-height:560px;padding:clamp(32px,5vw,70px);
  overflow:hidden;border:1px solid var(--border-alpha);
  border-radius:var(--radius-hero);background:linear-gradient(145deg,
    var(--bg2),var(--card));box-shadow:var(--shadow-lg);}
.tt-gate-eyebrow{margin-bottom:12px;color:var(--accent3);font-size:var(--fs-sm);
  font-weight:var(--fw-bold);letter-spacing:.12em;}
.tt-gate-copy h2{max-width:680px;margin:0 0 20px;color:var(--text);
  font-size:clamp(42px,5.3vw,68px);font-weight:var(--fw-black);
  line-height:.98;letter-spacing:-.045em;}
.tt-gate-copy p{max-width:590px;margin:0;color:var(--text2);
  font-size:var(--fs-md);line-height:var(--lh-relaxed);}
.tt-gate-actions{display:flex;margin-top:28px;}
.tt-gate-preview{display:grid;gap:14px;}
.tt-gate-example{justify-self:start;padding:7px 10px;border:1px solid
  var(--border-alpha);border-radius:var(--radius-pill);color:var(--text3);
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);}
.tt-gate-flow{display:grid;gap:12px;}
.tt-gate-step{display:grid;grid-template-columns:38px 1fr;gap:14px;
  align-items:center;min-height:88px;padding:16px;border:1px solid
  var(--border-alpha);border-radius:var(--radius-xl);background:var(--card);
  box-shadow:var(--shadow-sm);}
.tt-gate-step>span{display:grid;width:36px;height:36px;place-items:center;
  border-radius:var(--radius-pill);background:var(--card2);color:var(--text2);
  font-family:var(--font-mono);font-size:var(--fs-base);font-weight:var(--fw-bold);}
.tt-gate-step b{display:block;color:var(--text);font-size:var(--fs-md);}
.tt-gate-step small{display:block;margin-top:6px;color:var(--text2);
  font-size:var(--fs-base);line-height:var(--lh-base);}
.tt-gate-step.is-active{border-color:var(--tone-warn-border);
  background:linear-gradient(90deg,var(--tone-warn-bg),var(--card));}
.tt-gate-step.is-active>span{background:var(--accent);color:var(--accent-ink);}
.tt-gate-flow>i{justify-self:center;width:1px;height:20px;margin-block:-10px;
  background:var(--border2);}
@media(max-width:1024px){.tt-gate-wrap{grid-template-columns:1fr;min-height:auto;
  padding:28px 20px;}.tt-gate-copy h2{font-size:clamp(38px,12vw,52px);}
  .tt-gate-actions,.tt-gate-actions .btn{width:100%;}}
/* ── Empty-State — kanonischer Feature-Hero + echter Quickstart ──────── */
.tt-empty-shell{display:block;margin-top:32px;}
.tt-empty-shell .tt-empty-quickstart{margin-top:22px;}
.tt-empty-shell--fes{display:block;}
.tt-empty{display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;padding:28px;border:1px solid rgba(var(--surface-rgba-base),.08);
  border-radius:24px;background:linear-gradient(180deg,
    rgba(var(--surface-rgba-base),.03),rgba(var(--surface-rgba-base),.01));
  box-shadow:0 18px 44px rgba(8,11,20,.18),inset 0 1px 0 rgba(var(--surface-rgba-base),.05);}
.tt-empty h2{margin:0 0 10px;font-size:28px;font-weight:700;
  letter-spacing:-.02em;color:var(--text);line-height:1.15;}
.tt-empty p{margin:0 0 20px;color:var(--text2);font-size:14px;
  line-height:1.65;max-width:48ch;}
.tt-empty-cta{display:flex;gap:10px;flex-wrap:wrap;}
.tt-empty-quickstart{overflow:hidden;border-radius:24px;
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:linear-gradient(160deg,var(--card2) 0%,var(--bg2) 68%,var(--bg) 100%);
  box-shadow:0 24px 60px rgba(8,11,20,.28),inset 0 1px 0 rgba(var(--surface-rgba-base),.06);}
.tt-empty-quickstart .tt-timer-card{height:100%;padding:30px;border-right:none;}
.tt-empty-quickstart .tt-timer-display{font-size:clamp(52px,6vw,72px);text-shadow:none;}
.tt-empty-quickstart .tt-sparkline{display:none;}
@media(max-width:980px){.tt-empty{padding:24px;}}
.tt-ghost{width:100%;max-width:520px;border:1px dashed
  rgba(var(--surface-rgba-base),.1);border-radius:16px;overflow:hidden;
  background:rgba(var(--surface-rgba-base),.015);}
.tt-ghost-lbl{font-size:9.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.14em;color:var(--text3);padding:11px 18px;
  border-bottom:1px dashed rgba(var(--surface-rgba-base),.08);text-align:left;}
.tt-ghost-row{display:grid;grid-template-columns:1fr 60px 70px 64px;
  gap:12px;padding:13px 18px;align-items:center;
  border-bottom:1px dashed rgba(var(--surface-rgba-base),.06);}
.tt-ghost-row:last-child{border-bottom:0;}
.tt-ghost-bar{height:9px;
  background:rgba(var(--surface-rgba-base),.06);}
/* ── Invoice-Drawer (Abrechnungsmaschine) ──────────────────────────
   FIX: <dialog> erbt color NICHT vom body (Top-Layer) → explizite
   color auf Panel + Kindelemente, sonst UA-Schwarz auf Dunkel. */
.tt-drawer{border:none;padding:0;background:transparent;color:var(--text);
  width:100vw;max-width:100vw;height:100vh;max-height:100vh;
  inset:0;margin:0;overflow:hidden;}
.tt-drawer::backdrop{background:rgba(8,11,20,.66);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.tt-drawer-panel{box-sizing:border-box;width:min(580px,100vw);
  height:100vh;overflow:auto;margin:0 0 0 auto;
  color:var(--text);
  /* Deckender Panel-Hintergrund: opaker Solid-Base + Gradient-Layer, damit
     nichts vom App-Hintergrund durchscheint (Lesbarkeit im Dark-Mode). */
  background-color:var(--card);
  background-image:linear-gradient(165deg,var(--card2) 0%,var(--bg2) 60%,var(--card) 100%);
  border-left:1px solid var(--border2);padding:28px 30px 32px;
  display:flex;flex-direction:column;gap:18px;
  box-shadow:-24px 0 60px rgba(0,0,0,.4);}
@media(max-width:620px){.tt-drawer{height:100vh;}
  .tt-drawer-panel{width:100vw;height:auto;max-height:92vh;
  margin:auto 0 0;border-left:none;
  border-top:1px solid var(--border2);
  border-radius:20px 20px 0 0;
  /* Bottom-Padding entfällt — die sticky CTA bringt ihr eigenes
     (safe-area-bewusstes) Padding mit. */
  padding-bottom:0;}}
.tt-drawer-head{display:flex;align-items:flex-start;
  justify-content:space-between;gap:14px;}
.tt-drawer-title{font-size:20px;font-weight:700;color:var(--text);
  letter-spacing:-.01em;}
.tt-drawer-cust{font-size:14px;font-weight:600;color:var(--text);
  margin-top:6px;}
.tt-drawer-meta{font-size:12.5px;color:var(--accent);
  font-family:var(--font-mono,monospace);margin-top:3px;
  font-variant-numeric:tabular-nums;}
.tt-drawer-x{flex:0 0 auto;width:34px;height:34px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(var(--surface-rgba-base),.05);border:1px solid var(--border2);
  color:var(--text2);cursor:pointer;padding:0;
  transition:background .12s,color .12s;}
.tt-drawer-x:hover{background:rgba(var(--surface-rgba-base),.1);color:var(--text);}
.tt-drawer-lbl{font-size:10px;font-weight:800;text-transform:uppercase;
  letter-spacing:.14em;color:var(--text3);}
.tt-group-pills{display:flex;gap:8px;flex-wrap:wrap;}
.tt-group-pill{background:var(--bg2);
  border:1px solid var(--border2);color:var(--text2);
  padding:8px 15px;border-radius:9px;font-size:12.5px;font-weight:600;
  cursor:pointer;min-height:38px;transition:all .12s;}
.tt-group-pill:hover{border-color:var(--accent2);
  color:var(--text);}
.tt-group-pill.is-active{background:rgba(232,184,75,.16);
  border-color:rgba(232,184,75,.4);color:var(--accent);
  box-shadow:0 0 0 1px rgba(232,184,75,.18);}
/* Deckende, klar abgegrenzte Auswahl-Karte (vorher rgba .32 → glasig). */
.tt-preview{border:1px solid var(--border2);border-radius:12px;
  overflow:hidden;background:var(--bg);}
.tt-preview-row{display:grid;grid-template-columns:18px 1fr auto;
  gap:12px;align-items:center;padding:13px 16px;font-size:13px;
  color:var(--text);
  border-bottom:1px solid var(--border);}
.tt-preview-row:last-child{border-bottom:0;}
.tt-preview-row svg{color:var(--green);flex:0 0 auto;}
.tt-preview-desc{color:var(--text);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.tt-preview-amt{font-family:var(--font-mono,monospace);
  font-variant-numeric:tabular-nums;color:var(--accent3);
  font-weight:700;}
.tt-preview-total{display:flex;align-items:baseline;
  justify-content:space-between;padding:6px 2px 0;}
.tt-preview-total .l{font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:.12em;color:var(--text3);}
.tt-preview-total .v{font-family:var(--font-mono,monospace);
  font-variant-numeric:tabular-nums;color:var(--accent);
  font-size:20px;font-weight:700;text-shadow:0 0 20px rgba(232,184,75,.3);}
/* Submit-Fehler innerhalb des modalen Drawers (Top-Layer-sichtbar, da ein
   externer Toast hinter Backdrop/Panel verschwinden würde). Sichtbarkeit via
   hidden-Attribut — kein display hier, damit [hidden] (UA) greift. */
.tt-drawer-err{margin:0;padding:10px 12px;border-radius:10px;
  background:var(--red2);border:1px solid var(--red3);color:var(--red);
  font-size:13px;font-weight:600;}
.tt-drawer-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px;}
@media(max-width:620px){
  /* Mobile-Fix (#4): CTA bleibt beim Scrollen im Bottom-Sheet immer
     erreichbar — vorher konnte der Button unterhalb des Viewports liegen
     und war nicht klickbar. Sticky + safe-area-Inset + volle Tap-Breite. */
  .tt-drawer-cta{position:sticky;bottom:0;flex-wrap:nowrap;
    margin:8px -30px 0;
    padding:14px 30px max(16px,env(safe-area-inset-bottom));
    background:var(--card);
    border-top:1px solid var(--border2);}
  .tt-drawer-cta .btn{flex:1 1 0;}
}
/* Inline-Link-Button im „Rate fehlt"-Hinweis: sieht aus wie ein Link, ist aber
   ein <button> (schließt erst den modalen Drawer, öffnet dann den Kontakt-
   Editor). Kein inline-style (CSP-Freeze). */
.tt-link-btn{padding:0;border:none;background:none;color:var(--accent);
  font:inherit;cursor:pointer;text-decoration:underline;}
.tt-link-btn:hover{text-decoration:none;}
/* ── Visually-hidden (a11y live region) ────────────────────────── */
.tt-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;}

/* ═══════════════════════════════════════════════════════════════════════════
   BANKABGLEICH INBOX-UI (Modul #1, PR3)
   ───────────────────────────────────────────────────────────────────────────
   Split-View Desktop · Stack-Karten Mobile · gemeinsamer State.
   Konsumiert PR2-Match-API in lib/bank-reconciliation-match-handlers.js.

   Layout-Breakpoints (Anhang A roadmap):
     - Desktop ≥ 768px: 2-Spalten-Grid (Liste links 380px, Detail flex).
     - Mobile  < 768px: Stack (Filter > Liste > Detail untereinander).

   Token-Quelle: public/css/app/_00-tokens.css + docs/design/TOKENS.md.
   CSP: keine inline style="..." Attribute im JS — alles per Klassen hier.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Page-Shell ──────────────────────────────────────────────────────── */

.bankabgleich-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-height: calc(100vh - var(--topbar-height, 64px));
}

.bankabgleich-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: 0;
}

.bankabgleich-title {
  font-size: var(--shell-ref-title-size);
  font-weight: var(--fw-bold);
  color: var(--text);
  margin: 0;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.bankabgleich-subtitle {
  margin: var(--shell-ref-subtitle-margin-top) 0 0;
  font-size: var(--shell-ref-subtitle-size);
  line-height: 1.45;
}

.bankabgleich-help-btn {
  min-width: 32px;
  min-height: 32px;
}

/* ─── Help-Overlay ────────────────────────────────────────────────────── */

.bankabgleich-help {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  box-shadow: var(--shadow-sm);
}

.bankabgleich-help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-sm) var(--space-lg);
  font-size: 0.92rem;
  color: var(--text2);
}

.bankabgleich-help-grid kbd {
  display: inline-block;
  padding: 2px 6px;
  margin-right: 4px;
  border-radius: var(--radius-sm);
  background: var(--bg3);
  border: 1px solid var(--border);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.85em;
  color: var(--text);
}

/* ─── Filters ────────────────────────────────────────────────────────── */

.bankabgleich-filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.bankabgleich-status-tabs {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.bankabgleich-status-tab {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  color: var(--text2);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  min-height: 32px;
}

.bankabgleich-status-tab:hover {
  background: var(--card2);
  color: var(--text);
}

.bankabgleich-status-tab.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.bankabgleich-status-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.bankabgleich-filter-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: flex-end;
}

.bankabgleich-filter-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bankabgleich-filter-select {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  color: var(--text);
  font-size: 0.92rem;
  min-height: 36px;
  min-width: 160px;
}

.bankabgleich-filter-select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* Date-Filter: eigener Popover-Picker (_pickDate, core.js) auf Desktop;
 * mobile-native-date-picker.js schaltet auf Smartphones automatisch zurück
 * auf den nativen Picker. Pattern identisch zu .trips-date-trigger. */
.bankabgleich-filter-date-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.bankabgleich-date-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 160px;
  min-height: 36px;
  padding: 8px 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.92rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}

.bankabgleich-date-trigger:hover {
  border-color: var(--border2, var(--accent));
}

.bankabgleich-date-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.bankabgleich-date-trigger.is-empty .bankabgleich-date-trigger__label {
  color: var(--text3);
}

.bankabgleich-date-trigger__label {
  font-variant-numeric: tabular-nums;
}

.bankabgleich-date-trigger__icon {
  flex: 0 0 auto;
  color: var(--text3);
}

.bankabgleich-date-trigger:hover .bankabgleich-date-trigger__icon {
  color: var(--text);
}

.bankabgleich-date-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--text3);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: color .12s, background .12s, border-color .12s;
}

.bankabgleich-date-clear:hover {
  color: var(--text);
  background: var(--bg2);
}

.bankabgleich-date-clear:focus-visible {
  outline: none;
  border-color: var(--accent);
  color: var(--text);
}

/* ─── Layout: Split-View Desktop / Stack Mobile ───────────────────────── */

.bankabgleich-layout {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: var(--space-lg);
  flex: 1;
  min-height: 0;
}

@media (max-width: 767px) {
  .bankabgleich-layout {
    grid-template-columns: 1fr;
  }
}

.bankabgleich-list,
.bankabgleich-detail {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ─── List ───────────────────────────────────────────────────────────── */

.bankabgleich-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  max-height: 70vh;
}

@media (max-width: 767px) {
  .bankabgleich-list-items {
    max-height: 50vh;
  }
}

.bankabgleich-list-item {
  border-bottom: 1px solid var(--border);
  padding: var(--space-md);
  cursor: pointer;
  transition: background 0.12s ease;
  /* Touch-Target ≥ 44px (mobile a11y). */
  min-height: 44px;
}

.bankabgleich-list-item:hover {
  background: var(--card2);
}

.bankabgleich-list-item.is-selected {
  background: var(--card2);
  border-left: 3px solid var(--accent);
  padding-left: calc(var(--space-md) - 3px);
}

.bankabgleich-list-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.bankabgleich-list-item-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: 4px;
}

.bankabgleich-list-item-date {
  font-size: 0.82rem;
  color: var(--text3);
}

.bankabgleich-list-item-amount {
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono, ui-monospace, monospace);
}

.bankabgleich-amount--positive {
  color: var(--tone-good-fg);
}

.bankabgleich-amount--negative {
  color: var(--tone-poor-fg);
}

.bankabgleich-list-item-counter {
  font-size: 0.95rem;
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bankabgleich-list-item-purpose {
  font-size: 0.82rem;
  color: var(--text2);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bankabgleich-list-item-meta {
  margin-top: var(--space-sm);
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.bankabgleich-list-more {
  padding: var(--space-md);
  text-align: center;
  border-top: 1px solid var(--border);
}

/* ─── Status & Confidence Chips ──────────────────────────────────────── */

.bankabgleich-status-chip,
.bankabgleich-conf-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid transparent;
  line-height: 1.4;
}

.bankabgleich-status-chip--good {
  background: var(--tone-good-bg);
  color: var(--tone-good-fg);
  border-color: var(--tone-good-border);
}

.bankabgleich-status-chip--warn {
  background: var(--tone-warn-bg);
  color: var(--tone-warn-fg-strong);
  border-color: var(--tone-warn-border);
}

.bankabgleich-status-chip--muted {
  background: var(--bg3);
  color: var(--text3);
  border-color: var(--border);
}

.bankabgleich-status-chip--open {
  background: var(--tone-info-bg);
  color: var(--tone-info-fg);
  border-color: var(--tone-info-border);
}

.bankabgleich-conf-chip--high {
  background: var(--tone-good-bg);
  color: var(--tone-good-fg);
  border-color: var(--tone-good-border);
}

.bankabgleich-conf-chip--medium {
  background: var(--tone-warn-bg);
  color: var(--tone-warn-fg-strong);
  border-color: var(--tone-warn-border);
}

.bankabgleich-conf-chip--low {
  background: var(--tone-poor-bg);
  color: var(--tone-poor-fg);
  border-color: var(--tone-poor-border);
}

.bankabgleich-conf-chip--none {
  background: var(--bg3);
  color: var(--text3);
  border-color: var(--border);
}

/* ─── Detail-Pane Header ─────────────────────────────────────────────── */

.bankabgleich-detail {
  padding: var(--space-lg);
  overflow-y: auto;
  max-height: 70vh;
}

@media (max-width: 767px) {
  .bankabgleich-detail {
    max-height: none;
  }
}

.bankabgleich-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-2xl) var(--space-lg);
  color: var(--text2);
  gap: var(--space-sm);
}

.bankabgleich-detail-empty-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.bankabgleich-detail-empty-copy {
  font-size: 0.9rem;
  color: var(--text2);
  max-width: 320px;
}

.bankabgleich-detail-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border);
}

.bankabgleich-detail-amount {
  font-size: 1.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: -0.02em;
}

.bankabgleich-detail-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-sm) var(--space-md);
}

.bankabgleich-detail-meta-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bankabgleich-detail-meta-row--full {
  grid-column: 1 / -1;
}

.bankabgleich-detail-meta-label {
  font-size: 0.72rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bankabgleich-iban {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.88rem;
  letter-spacing: 0.02em;
}

.bankabgleich-detail-status {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* ─── Detail: Suggestions List ───────────────────────────────────────── */

.bankabgleich-suggest-list {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.bankabgleich-suggest-list-title {
  font-size: 0.78rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.bankabgleich-candidate {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease;
}

.bankabgleich-candidate.is-top {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.bankabgleich-candidate--high.is-top {
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green);
}

.bankabgleich-candidate-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.bankabgleich-candidate-title {
  font-size: 0.98rem;
  color: var(--text);
}

.bankabgleich-candidate-num {
  font-weight: 600;
}

.bankabgleich-candidate-customer {
  color: var(--text2);
}

.bankabgleich-candidate-meta {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  align-items: center;
}

.bankabgleich-candidate-amount {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}

.bankabgleich-candidate-kind {
  font-size: 0.72rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bankabgleich-candidate-reasons {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.bankabgleich-reason-chip {
  background: var(--bg3);
  color: var(--text2);
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.bankabgleich-candidate-actions {
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.bankabgleich-candidate-actions .btn {
  /* Touch target ≥ 36px height (button-min). */
  min-height: 36px;
  min-width: 100px;
}

/* ─── Detail: Action-Buttons ─────────────────────────────────────────── */

.bankabgleich-detail-actions {
  margin-top: var(--space-lg);
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.bankabgleich-detail-actions .btn {
  min-height: 36px;
}

/* ─── Suggest-Empty + Resolved ───────────────────────────────────────── */

.bankabgleich-suggest-empty {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  background: var(--bg2);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  text-align: center;
}

.bankabgleich-suggest-empty-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.bankabgleich-suggest-empty-copy {
  font-size: 0.88rem;
  color: var(--text2);
  margin-bottom: var(--space-md);
}

.bankabgleich-resolved {
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: var(--tone-good-bg);
  border: 1px solid var(--tone-good-border);
  border-radius: var(--radius-md);
  color: var(--tone-good-fg);
}

.bankabgleich-resolved-text {
  font-size: 0.95rem;
}

/* Finding 5 (Banking-Audit): CSV/MT940-Quellen-Hinweis + Zahlungs-Notiz. */
.bankabgleich-suggest-source-hint {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg2);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  color: var(--text2);
  font-size: 0.85rem;
}

.bankabgleich-resolved-payment-note {
  margin-top: 4px;
  font-size: 0.85rem;
}

/* Read-Only-Hinweis (Codex-P2 #3): kein Match-Vorschlag bei trial_readonly. */
.bankabgleich-suggest-readonly {
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: var(--bg2);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
}

.bankabgleich-suggest-readonly-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.bankabgleich-suggest-readonly-copy {
  font-size: 0.88rem;
  color: var(--text2);
}

/* ─── Empty / Loading / Error ────────────────────────────────────────── */

.bankabgleich-empty,
.bankabgleich-loading,
.bankabgleich-error {
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
}

.bankabgleich-empty-title,
.bankabgleich-error-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.bankabgleich-empty-copy,
.bankabgleich-error-copy,
.bankabgleich-loading-text {
  font-size: 0.9rem;
  color: var(--text2);
}

.bankabgleich-empty-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-md);
}

.bankabgleich-empty-cta-link {
  text-decoration: none;
}

.bankabgleich-empty-cta-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.bankabgleich-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.bankabgleich-loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: bankabgleich-spin 0.8s linear infinite;
}

@keyframes bankabgleich-spin {
  to { transform: rotate(360deg); }
}

.bankabgleich-error {
  background: var(--tone-poor-bg);
  border: 1px solid var(--tone-poor-border);
  border-radius: var(--radius-md);
}

.bankabgleich-error-title {
  color: var(--tone-poor-fg);
}

/* PR4-Erweiterung (View-Tabs + 3-Wege-Report) lebt in
   public/css/app/_44-bankabgleich-report.css (file-size-split, beide
   Partials bleiben unter dem 800-LOC-Cap). */

/* Touch-Target-Floor (WCAG 2.5.5 / Apple HIG) auf coarse Pointern — app-weiter
   WebKit-Sweep (iPhone 13, ergänzend zu #3721): status-tab 55×32, date-trigger
   160×36. Hit-Area via min-height + padding, Optik bleibt kompakt. */
@media (pointer: coarse) {
  .bankabgleich-status-tab { min-height: 44px; padding-block: 11px; }
  .bankabgleich-date-trigger { min-height: 44px; padding-block: 11px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BANKABGLEICH · 3-WEGE-REPORT (Modul #1, PR4)
   ───────────────────────────────────────────────────────────────────────────
   View-Toggle (Inbox · Report) + Karten-Layout für Bank-Saldo, EÜR-Saldo,
   Differenz, Match-Status, Per-Konto/Per-Monat-Tabellen, Footnote.

   Iron-Rule (Anhang A der Roadmap): strikt faktenbasiert, kein
   Interpretations-Visual ("Beleg X fehlt"). Tones (good/warn) gelten nur
   für within_tolerance vs. außerhalb.

   File-Size-Split-Begründung: _43-bankabgleich.css ist mit den Inbox-/Detail-/
   Filter-Klassen bereits voll. Der Report-Komplex bekommt eigenen Partial,
   damit beide Files unter 800 LOC bleiben (CLAUDE.md File-Size-Cap).

   Token-Quelle: public/css/app/_00-tokens.css + docs/design/TOKENS.md.
   CSP: keine inline style="..." Attribute im JS — alles per Klassen hier.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── View-Tabs (Inbox · Report) ─────────────────────────────────────── */

.bankabgleich-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.bankabgleich-view-tabs {
  display: inline-flex;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 2px;
  gap: 2px;
}

.bankabgleich-view-tab {
  border: 0;
  background: transparent;
  color: var(--text2);
  padding: 6px 14px;
  border-radius: calc(var(--radius-md) - 2px);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.bankabgleich-view-tab:hover {
  color: var(--text);
}

.bankabgleich-view-tab.is-active {
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.bankabgleich-view-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ─── 3-Wege-Report ──────────────────────────────────────────────────── */

.bankabgleich-report {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.bankabgleich-report-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.bankabgleich-report-year {
  font-size: 0.95rem;
  color: var(--text2);
  font-weight: 500;
}

.bankabgleich-report-actions {
  display: flex;
  gap: var(--space-sm);
}

.bankabgleich-report-retry {
  margin-top: var(--space-md);
}

.bankabgleich-report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
}

.bankabgleich-report-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bankabgleich-report-card-label {
  font-size: 0.85rem;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 600;
}

.bankabgleich-report-card-value {
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.bankabgleich-report-card-sub {
  font-size: 0.85rem;
  color: var(--text2);
}

.bankabgleich-report-tone--good {
  background: var(--tone-good-bg);
  border-color: var(--tone-good-border);
}

.bankabgleich-report-tone--good .bankabgleich-report-card-value {
  color: var(--tone-good-fg);
}

.bankabgleich-report-tone--warn {
  background: var(--tone-warn-bg);
  border-color: var(--tone-warn-border);
}

.bankabgleich-report-tone--warn .bankabgleich-report-card-value {
  color: var(--tone-warn-fg-strong);
}

.bankabgleich-report-status {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
}

.bankabgleich-report-status-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-md);
}

.bankabgleich-report-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-sm);
}

.bankabgleich-report-stat {
  text-align: center;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.bankabgleich-report-stat-count {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.bankabgleich-report-stat-label {
  font-size: 0.82rem;
  color: var(--text2);
  margin-top: 2px;
}

.bankabgleich-report-stat--good {
  background: var(--tone-good-bg);
  border-color: var(--tone-good-border);
}

.bankabgleich-report-stat--good .bankabgleich-report-stat-count {
  color: var(--tone-good-fg);
}

.bankabgleich-report-stat--warn {
  background: var(--tone-warn-bg);
  border-color: var(--tone-warn-border);
}

.bankabgleich-report-stat--warn .bankabgleich-report-stat-count {
  color: var(--tone-warn-fg-strong);
}

.bankabgleich-report-stat--open {
  background: var(--tone-info-bg);
  border-color: var(--tone-info-border);
}

.bankabgleich-report-stat--open .bankabgleich-report-stat-count {
  color: var(--tone-info-fg);
}

.bankabgleich-report-stat--muted {
  background: var(--bg2);
}

.bankabgleich-report-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
}

.bankabgleich-report-section-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-md);
}

.bankabgleich-report-empty {
  color: var(--text2);
  font-size: 0.92rem;
}

.bankabgleich-report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.bankabgleich-report-table th,
.bankabgleich-report-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.bankabgleich-report-table th {
  font-weight: 600;
  color: var(--text2);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.bankabgleich-report-table tbody tr:last-child td {
  border-bottom: 0;
}

.bankabgleich-report-table--compact th,
.bankabgleich-report-table--compact td {
  padding: 6px 8px;
}

.bankabgleich-report-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bankabgleich-report-mono {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.88em;
  color: var(--text2);
}

.bankabgleich-report-footnote {
  font-size: 0.82rem;
  color: var(--text2);
  line-height: 1.55;
  padding: var(--space-sm) 0;
}

@media (max-width: 767px) {
  .bankabgleich-report-grid {
    grid-template-columns: 1fr;
  }
  .bankabgleich-report-table {
    font-size: 0.85rem;
  }
}

/* Touch-Target-Floor (WCAG 2.5.5 / Apple HIG) auf coarse Pointern — app-weiter
   WebKit-Sweep (iPhone 13, ergänzend zu #3721): view-tab 65×29. <button> mit
   padding → Hit-Area via min-height + padding, Optik bleibt kompakt. */
@media (pointer: coarse) {
  .bankabgleich-view-tab { min-height: 44px; padding-block: 11px; }
}

/* ════════════════════════════════════════════════════════════════════════
   Bankabgleich · CSV-Upload-Modal (Import-UI)
   ────────────────────────────────────────────────────────────────────────
   Begleitet public/js/modules/bank-reconciliation-import.js. Reused die
   .app-dialog*-Shell aus _10-shell.css; hier nur die import-spezifischen
   Bausteine (Hinweis, Drop-Zone, Ergebnis, Overlap-Warnung).

   File-Size-Split: _43-bankabgleich.css steht am 800-LOC-Cap, deshalb lebt
   die Modal-CSS in diesem eigenen Partial (analog _44-bankabgleich-report).
   ════════════════════════════════════════════════════════════════════════ */

.bankabgleich-import-body {
  text-align: left;
}

.bankabgleich-import-hint {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text2);
  background: rgba(var(--surface-rgba-base), .04);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
}

.bankabgleich-import-link {
  display: inline-block;
  margin-top: 6px;
  padding: 0;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
}

.bankabgleich-import-link:hover {
  text-decoration: underline;
}

.bankabgleich-import-create-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-sm);
}

/* ─── Drop-Zone ─────────────────────────────────────────────────────── */

.bankabgleich-import-drop {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 84px;
  padding: var(--space-md);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-md);
  background: rgba(var(--surface-rgba-base), .03);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}

.bankabgleich-import-drop:hover,
.bankabgleich-import-drop:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.bankabgleich-import-drop.is-dragover {
  border-color: var(--accent);
  background: var(--tone-warn-bg);
}

.bankabgleich-import-drop.has-file {
  border-style: solid;
  border-color: var(--accent);
}

.bankabgleich-import-file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  /* Unter dem Entfernen-Button (z-index:2), damit dessen Klick nicht vom
     transparenten File-Input abgefangen wird. */
  z-index: 1;
}

.bankabgleich-import-drop-label {
  font-size: 0.85rem;
  color: var(--text2);
  text-align: center;
  pointer-events: none;
  /* A5: lange CSV-Dateinamen sauber mit Ellipsis kürzen statt zeichenweise
     umzubrechen (word-break:break-all wirkte „gequetscht"). max-width lässt
     Platz für den Entfernen-Button rechts. */
  max-width: calc(100% - 2.2rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bankabgleich-import-drop.has-file .bankabgleich-import-drop-label {
  color: var(--text);
  font-weight: 500;
}

/* A1/A2: Datei-Entfernen-Button (×). Nur sichtbar, wenn eine Datei gewählt ist
   (das hidden-Attribut steuert das JS). pointer-events:auto, weil das Label
   pointer-events:none hat und der Button über dem transparenten File-Input
   liegen muss, um klickbar zu sein. */
.bankabgleich-import-file-remove {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  z-index: 2;
  width: 1.6rem;
  height: 1.6rem;
  line-height: 1.4rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text2);
  font-size: 1.1rem;
  cursor: pointer;
  pointer-events: auto;
  padding: 0;
}

.bankabgleich-import-file-remove:hover,
.bankabgleich-import-file-remove:focus-visible {
  color: var(--text);
  border-color: var(--accent);
}

.bankabgleich-import-file-remove[hidden] {
  display: none;
}

/* ─── Status-Meldung ────────────────────────────────────────────────── */

.bankabgleich-import-msg {
  display: none;
  font-size: 0.85rem;
  color: var(--tone-poor-fg);
}

.bankabgleich-import-msg.is-visible {
  display: block;
}

/* ─── Ergebnis ──────────────────────────────────────────────────────── */

.bankabgleich-import-result-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-sm);
}

.bankabgleich-import-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.bankabgleich-import-stat {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text2);
  background: rgba(var(--surface-rgba-base), .05);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
}

.bankabgleich-import-stat--ok {
  color: var(--tone-good-fg);
  background: var(--tone-good-bg);
  border-color: var(--tone-good-border);
}

.bankabgleich-import-stat--err {
  color: var(--tone-poor-fg);
  background: var(--tone-poor-bg);
  border-color: var(--tone-poor-border);
}

/* Gelbe Doppel-Import-Warnung (overlapWarning). */
.bankabgleich-import-overlap {
  margin-top: var(--space-md);
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--tone-warn-fg-strong);
  background: var(--tone-warn-bg);
  border: 1px solid var(--tone-warn-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
}

.bankabgleich-import-parse-errors {
  margin-top: var(--space-md);
}

.bankabgleich-import-parse-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 4px;
}

.bankabgleich-import-parse-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.8rem;
  color: var(--text2);
}

.bankabgleich-import-parse-list li {
  margin-bottom: 2px;
}

/* ─── Übersprungene Zeilen (nicht-finaler Status) — neutraler Hinweis ──── */

.bankabgleich-import-skipped {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--surface2, var(--surface));
  border: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text2);
}

.bankabgleich-import-skipped-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.bankabgleich-import-skipped-list {
  margin: 0;
  padding-left: 1.1rem;
}

.bankabgleich-import-skipped-list li {
  margin-bottom: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Phase-4 — Payment-Methods UI
 * Payment-Identity settings card + per-document toggle panel +
 * Invoice-Design default-methods sub-section.
 * ───────────────────────────────────────────────────────────────────────── */

.payment-identity-card .card-body{padding:18px 20px;}
.payment-identity-intro{color:var(--text2);font-size:12.5px;line-height:1.45;margin-bottom:14px;}
.payment-identity-form{display:flex;flex-direction:column;gap:14px;}
.payment-identity-field{display:flex;flex-direction:column;gap:6px;}
.payment-identity-field-label{font-size:12.5px;font-weight:600;color:var(--text);}
.payment-identity-field input{max-width:320px;padding:8px 12px;border:1px solid var(--border);border-radius:6px;background:var(--bg2);color:var(--text);font-size:13px;font-family:inherit;}
.payment-identity-field input:focus{outline:2px solid var(--accent);outline-offset:1px;}
.payment-identity-field input.has-error{border-color:var(--red);}
.payment-identity-field input:disabled{opacity:.55;cursor:not-allowed;}
.payment-identity-field-hint{font-size:11px;color:var(--text3);}
.payment-identity-field-error{font-size:12px;color:var(--red);}
.payment-identity-preview{display:flex;flex-direction:column;gap:4px;}
.payment-identity-preview-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;}
.payment-identity-preview-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.payment-identity-preview-url{padding:6px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--text);word-break:break-all;}
.payment-identity-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px;}
.payment-identity-note{background:var(--bg2);border-left:3px solid var(--accent);padding:10px 12px;border-radius:4px;font-size:12px;color:var(--text2);line-height:1.5;}
.payment-identity-readonly{margin-top:12px;}
.payment-identity-readonly-copy{font-size:12px;}

/* ─── Onboarding-Explainer (PayPal-Handle Hilfe) ─────────────────────────── */
.payment-identity-explainer{
  margin:14px 0 18px;
  border-radius:12px;
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:rgba(var(--surface-rgba-base),.025);
  overflow:hidden;
  transition:border-color .15s, background .15s;
}
.payment-identity-explainer[open]{
  border-color:rgba(232,184,75,.32);
  background:rgba(232,184,75,.04);
}
.payment-identity-explainer-summary{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;
  font-size:13px;
  font-weight:var(--fw-semibold);
  color:rgba(var(--text-rgba-base),.82);
  cursor:pointer;
  user-select:none;
  list-style:none;
  text-transform:none;
  letter-spacing:0;
}
.payment-identity-explainer-summary::-webkit-details-marker{display:none;}
.payment-identity-explainer-summary::marker{content:"";}
.payment-identity-explainer-summary:hover{color:var(--text-strong);}
.payment-identity-explainer-summary-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;
  border-radius:50%;
  background:rgba(232,184,75,.12);
  color:var(--accent);
  flex-shrink:0;
}
.payment-identity-explainer[open] .payment-identity-explainer-summary-icon{
  background:rgba(232,184,75,.2);
}
.payment-identity-explainer-chevron{
  margin-left:auto;
  display:inline-flex;align-items:center;
  color:rgba(var(--text-rgba-base),.5);
  transition:transform .2s;
}
.payment-identity-explainer[open] .payment-identity-explainer-chevron{
  transform:rotate(180deg);
}
.payment-identity-explainer-body{
  padding:6px 16px 16px 16px;
  border-top:1px solid rgba(var(--surface-rgba-base),.06);
  background:rgba(var(--surface-rgba-base),.015);
}
.payment-identity-steps{
  list-style:none;
  padding:0;
  margin:14px 0 0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.payment-identity-step{
  display:grid;
  grid-template-columns:28px 1fr;
  gap:12px;
  align-items:flex-start;
}
.payment-identity-step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;
  border-radius:50%;
  background:rgba(232,184,75,.16);
  color:var(--accent);
  font-size:12px;
  font-weight:var(--fw-heavy);
  font-family:var(--mono);
  flex-shrink:0;
}
.payment-identity-step-text{
  font-size:12.5px;
  line-height:1.55;
  color:rgba(var(--text-rgba-base),.78);
}
.payment-identity-step-text strong{
  color:var(--text-strong);
  font-weight:var(--fw-semibold);
}
.payment-identity-step-text code{
  font-family:var(--mono);
  font-size:11.5px;
  padding:1px 5px;
  border-radius:4px;
  background:rgba(var(--surface-rgba-base),.05);
  color:rgba(var(--text-rgba-base),.92);
}
.payment-identity-step-icon{vertical-align:-1px;margin-left:3px;}
.payment-identity-step-text em{font-style:normal;font-weight:var(--fw-semibold);color:rgba(var(--text-rgba-base),.92);}
.payment-identity-step-link{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(232,184,75,.4);}
.payment-identity-step-link:hover{border-bottom-color:var(--accent);}
.payment-identity-step-cta{
  display:inline-block;
  margin-top:8px;
  padding:6px 12px;
  border-radius:8px;
  background:rgba(232,184,75,.12);
  border:1px solid rgba(232,184,75,.32);
  color:var(--accent);
  font-size:12px;
  font-weight:var(--fw-semibold);
  text-decoration:none;
  transition:background .15s, border-color .15s;
}
.payment-identity-step-cta:hover{background:rgba(232,184,75,.2);border-color:rgba(232,184,75,.5);}
.payment-identity-explainer-faq{
  margin-top:14px;
  padding-top:12px;
  border-top:1px dashed rgba(var(--surface-rgba-base),.08);
  font-size:12px;
  line-height:1.55;
  color:rgba(var(--text-rgba-base),.65);
}
.payment-identity-explainer-faq strong{display:block;color:var(--text-strong);font-weight:var(--fw-semibold);margin-bottom:3px;}

/* Light-Mode Parität für Explainer */
body.light .payment-identity-explainer{background:rgba(26,30,46,.025);border-color:rgba(26,30,46,.08);}
body.light .payment-identity-explainer[open]{background:rgba(232,184,75,.05);border-color:rgba(232,184,75,.35);}
body.light .payment-identity-explainer-summary{color:rgba(26,30,46,.78);}
body.light .payment-identity-explainer-summary:hover{color:var(--text-strong);}
body.light .payment-identity-explainer-summary-icon{background:rgba(232,184,75,.14);color:var(--accent2);}
body.light .payment-identity-explainer[open] .payment-identity-explainer-summary-icon{background:rgba(232,184,75,.22);}
body.light .payment-identity-explainer-chevron{color:rgba(26,30,46,.5);}
body.light .payment-identity-explainer-body{border-top-color:rgba(26,30,46,.06);background:rgba(26,30,46,.015);}
body.light .payment-identity-step-num{background:rgba(232,184,75,.18);color:var(--accent2);}
body.light .payment-identity-step-text{color:rgba(26,30,46,.78);}
body.light .payment-identity-step-text code{background:rgba(26,30,46,.05);color:rgba(26,30,46,.92);}
body.light .payment-identity-step-text em{color:rgba(26,30,46,.92);}
body.light .payment-identity-step-link{color:var(--accent2);border-bottom-color:rgba(201,152,48,.4);}
body.light .payment-identity-step-link:hover{border-bottom-color:var(--accent2);}
body.light .payment-identity-step-cta{background:rgba(232,184,75,.14);border-color:rgba(232,184,75,.4);color:var(--accent2);}
body.light .payment-identity-step-cta:hover{background:rgba(232,184,75,.22);border-color:rgba(232,184,75,.55);}
body.light .payment-identity-explainer-faq{border-top-color:rgba(26,30,46,.08);color:rgba(26,30,46,.65);}

/* ═══ Per-document payment-toggle panel (invoice + quote editors) ════════════
 * Modern Card-Tile-Layout (2026-04-25 Modernisierung). Reused .inv3-form-card
 * surface (radius 22px + soft glow) für visuelle Parität mit der V3-Form.
 * Jede Zahlungsart ist ein klickbares Tile — Active-State ist gold-Accent +
 * subtiler Inset-Glow, Disabled-State ist gemutet aber lesbar.
 *
 * Markup-Struktur (siehe rdPaymentTogglePanel in payment-toggle.js):
 *   .payment-toggle.inv3-form-card.paytile-card
 *     .paytile-card-head      (eyebrow + title)
 *     .paytile-list
 *       .paytile.paytile--bank       (active/disabled modifier classes)
 *         input.paytile-input        (visually hidden, drives state)
 *         label.paytile-main         (click target for bank transfer)
 *           .paytile-icon            (36×36 round icon)
 *           .paytile-body            (title + subtitle)
 *         .paytile-suboption
 *           label.paytile-chip       (QR sub-toggle, separate non-nested label)
 *       label.paytile.paytile--paypal
 *         ...
 *         .paytile-aside             (handle-pill OR setup-CTA)
 *       .paytile-bottom-hint         (trial-readonly hint, conditional)
 * ──────────────────────────────────────────────────────────────────────────── */

.payment-toggle{margin-top:18px;}
.payment-toggle--hidden{padding:12px 16px;background:var(--bg2);border:1px dashed var(--border);border-radius:14px;color:var(--text3);font-size:12.5px;line-height:1.5;}

/* ─── Card head ─── */
.paytile-card{padding:22px 24px 20px;}
.paytile-card-head{display:flex;flex-direction:column;gap:4px;margin-bottom:14px;}
.paytile-card-eyebrow{font-size:11px;font-weight:var(--fw-semibold);letter-spacing:.08em;text-transform:uppercase;color:rgba(var(--text-rgba-base),.54);}
.paytile-card-title{font-size:18px;font-weight:var(--fw-heavy);line-height:1.2;color:var(--text-strong);text-transform:none;letter-spacing:0;}

/* ─── Tile list ─── */
.paytile-list{display:flex;flex-direction:column;gap:10px;}

/* ─── Tile (Bank, PayPal) ─── */
.paytile{
  position:relative;
  display:grid;
  grid-template-columns:42px 1fr auto;
  gap:14px;
  align-items:flex-start;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:rgba(var(--surface-rgba-base),.025);
  cursor:pointer;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.paytile:hover{border-color:rgba(var(--surface-rgba-base),.16);background:rgba(var(--surface-rgba-base),.04);}
.paytile.is-active{
  border-color:rgba(232,184,75,.55);
  background:rgba(232,184,75,.06);
  box-shadow:0 0 0 1px rgba(232,184,75,.18) inset, 0 4px 14px rgba(232,184,75,.08);
}
.paytile.is-disabled{opacity:.55;cursor:not-allowed;}
.paytile.is-disabled:hover{border-color:rgba(var(--surface-rgba-base),.08);background:rgba(var(--surface-rgba-base),.025);}
.paytile-main{display:contents;cursor:inherit;}

/* Visually-hidden input — drives state via :checked, label is the click target */
.paytile-input{
  position:absolute;
  opacity:0;
  width:1px;height:1px;
  margin:0;padding:0;
  pointer-events:none;
}
.paytile-input:focus-visible + .paytile-main .paytile-icon,
.paytile-input:focus-visible + .paytile-icon{outline:2px solid rgba(232,184,75,.7);outline-offset:3px;border-radius:10px;}

/* Icon */
.paytile-icon{
  display:inline-flex;
  align-items:center;justify-content:center;
  width:42px;height:42px;
  border-radius:12px;
  background:rgba(var(--surface-rgba-base),.05);
  color:rgba(var(--text-rgba-base),.62);
  flex-shrink:0;
  transition:background .15s, color .15s;
}
.paytile.is-active .paytile-icon{
  background:rgba(232,184,75,.16);
  color:var(--accent);
}
.paytile-icon--paypal{color:var(--blue);}
.paytile.is-active .paytile-icon--paypal{background:rgba(59,130,246,.14);color:var(--blue);}

/* Body */
.paytile-body{display:flex;flex-direction:column;gap:6px;min-width:0;}
.paytile-title-row{display:flex;align-items:center;gap:8px;}
.paytile-title{
  font-size:15px;
  font-weight:var(--fw-semibold);
  color:var(--text-strong);
  text-transform:none;     /* override global label{uppercase} */
  letter-spacing:0;
  line-height:1.2;
}
.paytile-subtitle{
  font-size:12.5px;
  color:rgba(var(--text-rgba-base),.6);
  line-height:1.5;
  font-weight:var(--fw-regular);
  text-transform:none;
  letter-spacing:0;
}

/* State-tick: 2026-04-28 UX-Fix — vorher war das Element opacity:0 wenn nicht
   active. Bei PayPal (Default off) hatte der User KEIN sichtbares Toggle-
   Affordance ("ich weiß gar nicht, ob das aktiv ist oder nicht").
   Jetzt: immer sichtbarer Kreis-Indikator. Off = hohler Kreis, on = gold-
   gefüllt mit dunklem Haken. Dieselbe visuelle Sprache wie .paytile-chip-input
   im GiroCode-Chip — der User lernt nur EIN Pattern. */
.paytile-state-tick{
  display:inline-flex;
  align-items:center;justify-content:center;
  width:18px;height:18px;
  border-radius:50%;
  background:transparent;
  border:1.5px solid rgba(var(--text-rgba-base),.32);
  color:transparent;
  flex-shrink:0;
  transition:background .15s, border-color .15s, color .15s;
}
.paytile.is-active .paytile-state-tick{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--accent-ink);
}
.paytile.is-disabled .paytile-state-tick{opacity:.55;}
/* 2026-04-28 Hotfix Reactive-Layer: vorher hing der Aktiv-Zustand NUR an der
   server-side gerenderten .is-active-Klasse → Klick toggelte Checkbox aber
   Visual blieb stehen ("PayPal kann nicht ausgewählt werden"). Jetzt zusätzlich
   `:has(.paytile-input:checked)` als CSS-Reactivity (Safari 15.4+, Chromium 105+,
   Firefox 121+ — deckt unsere Soft-Tokens-Baseline ab). JS-Sync in
   _paymentTogglePanelChange (siehe payment-toggle.js) ist redundanter
   Fallback für ältere Engines. Defense-in-depth. */
.paytile:has(.paytile-input:checked):not(.is-disabled){
  border-color:rgba(232,184,75,.55);
  background:rgba(232,184,75,.06);
  box-shadow:0 0 0 1px rgba(232,184,75,.18) inset, 0 4px 14px rgba(232,184,75,.08);
}
.paytile:has(.paytile-input:checked):not(.is-disabled) .paytile-icon{
  background:rgba(232,184,75,.16);
  color:var(--accent);
}
.paytile:has(.paytile-input:checked):not(.is-disabled) .paytile-icon--paypal{
  background:rgba(59,130,246,.14);
  color:var(--blue);
}
.paytile:has(.paytile-input:checked):not(.is-disabled) .paytile-state-tick{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--accent-ink);
}
/* Hover: subtile Andeutung „klickbar" auch im Off-State (nicht nur bei active). */
.paytile:not(.is-disabled):hover .paytile-state-tick{
  border-color:rgba(232,184,75,.5);
}
.paytile.is-active:hover .paytile-state-tick{border-color:var(--accent);}

/* ─── Aside (right column) ─── */
.paytile-aside{display:flex;align-items:center;flex-shrink:0;align-self:center;}
.paytile-aside--handle .paytile-handle{
  display:inline-flex;align-items:baseline;
  padding:6px 10px;
  border-radius:8px;
  background:rgba(232,184,75,.08);
  border:1px solid rgba(232,184,75,.22);
  font-family:var(--mono);
  font-size:12px;
  font-weight:var(--fw-semibold);
  color:var(--accent);
  line-height:1;
}
.paytile-aside--cta .paytile-cta-link{
  display:inline-flex;align-items:center;
  padding:7px 12px;
  border-radius:9px;
  background:rgba(232,184,75,.1);
  border:1px solid rgba(232,184,75,.32);
  color:var(--accent);
  font-size:12px;
  font-weight:var(--fw-semibold);
  text-decoration:none;
  text-transform:none;
  letter-spacing:0;
  transition:background .15s, border-color .15s;
  white-space:nowrap;
}
.paytile-aside--cta .paytile-cta-link:hover{background:rgba(232,184,75,.18);border-color:rgba(232,184,75,.5);}

/* ─── Sub-option chip (QR inside Bank tile) ─── */
.paytile-suboption{display:block;grid-column:2 / -1;margin-top:-2px;}
.paytile-chip{
  display:inline-grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  align-items:flex-start;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:rgba(var(--surface-rgba-base),.03);
  cursor:pointer;
  transition:border-color .15s, background .15s;
  width:100%;
  box-sizing:border-box;
  /* 2026-04-28: position:relative damit der visually-hidden chip-input
     (position:absolute, siehe Z. ~11580) im Chip-Bounding-Box bleibt. */
  position:relative;
}
.paytile-chip:hover{border-color:rgba(var(--surface-rgba-base),.18);background:rgba(var(--surface-rgba-base),.05);}
.paytile-chip.is-on{
  border-color:rgba(232,184,75,.4);
  background:rgba(232,184,75,.05);
}
.paytile-chip.is-disabled{opacity:.45;cursor:not-allowed;}
.paytile-chip.is-disabled:hover{border-color:rgba(var(--surface-rgba-base),.08);background:rgba(var(--surface-rgba-base),.03);}
/* GiroCode-Chip-Input: 2026-04-28 UX-Fix Iter-2 — Markup-Refactor.
   Vorher: appearance:none + ::after-Pseudo-Element-Checkmark (CSS-rotiertes
   Rechteck) → visuell anders als die SVG-Ticks auf Bank/PayPal-Tiles.
   User-Feedback: „GiroCode-Checkbox sieht anders aus als der Überweisungsbutton".
   Jetzt: Input visually-hidden (gleicher Pattern wie .paytile-input), sichtbares
   Affordance ist eine .paytile-state-tick--chip Span mit dem GLEICHEN SVG wie
   die Tile-Ticks → eine einheitliche Visual-Sprache. */
.paytile-chip-input{
  position:absolute;
  opacity:0;
  width:1px;height:1px;
  margin:0;padding:0;
  pointer-events:none;
}
.paytile-chip-input:focus-visible + .paytile-state-tick--chip{
  outline:2px solid rgba(232,184,75,.7);
  outline-offset:2px;
}
/* Chip-Tick erbt das Tile-Tick-Visual; .paytile-state-tick (Z. ~11502) liefert
   border + size + center. Hier nur die :checked-Reactivity über CSS-Sibling-
   Selector (Input + Tick) — robust auch ohne :has()-Support. */
.paytile-chip-input:checked + .paytile-state-tick--chip{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--accent-ink);
}
.paytile-chip-input:disabled + .paytile-state-tick--chip{opacity:.55;}
.paytile-chip-label{display:flex;flex-direction:column;gap:3px;min-width:0;}
.paytile-chip-title{
  font-size:12.5px;
  font-weight:var(--fw-semibold);
  color:var(--text-strong);
  text-transform:none;letter-spacing:0;
  line-height:1.2;
}
.paytile-chip-hint{
  font-size:11.5px;
  color:rgba(var(--text-rgba-base),.55);
  line-height:1.4;
  font-weight:var(--fw-regular);
  text-transform:none;letter-spacing:0;
}

/* ─── Bottom hint (trial-readonly) ─── */
.paytile-bottom-hint{
  display:flex;align-items:flex-start;gap:8px;
  margin-top:6px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:rgba(var(--surface-rgba-base),.025);
  font-size:12px;
  line-height:1.45;
  color:rgba(var(--text-rgba-base),.7);
}
.paytile-bottom-hint-icon{display:inline-flex;align-items:center;color:rgba(var(--text-rgba-base),.5);flex-shrink:0;margin-top:1px;}

/* ─── Read-only mode (sent documents) ──────────────────────────────────────
 * Same .inv3-form-card surface but compact list, frozen lock-icon next to
 * the title, masked IBAN + clickable PayPal link.
 * ──────────────────────────────────────────────────────────────────────── */
.payment-toggle--readonly.paytile-card{padding:20px 22px;}
.payment-toggle--readonly .paytile-card-head{flex-direction:row;align-items:center;justify-content:space-between;}
.payment-toggle--readonly .paytile-card-head-text{display:flex;flex-direction:column;gap:4px;}
.payment-toggle-lock{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  border-radius:50%;
  background:rgba(var(--surface-rgba-base),.06);
  color:rgba(var(--text-rgba-base),.5);
}
.payment-toggle-readonly-intro{font-size:12.5px;color:rgba(var(--text-rgba-base),.62);margin-bottom:12px;line-height:1.5;}
.payment-toggle-readonly-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;}
.payment-toggle-readonly-list li{
  font-size:13px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(var(--surface-rgba-base),.03);
  border:1px solid rgba(var(--surface-rgba-base),.06);
  color:rgba(var(--text-rgba-base),.85);
  line-height:1.5;
}
.payment-toggle-readonly-list li strong{color:var(--text-strong);font-weight:var(--fw-semibold);}
.payment-toggle-readonly-list a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(232,184,75,.4);}
.payment-toggle-readonly-list a:hover{border-bottom-color:var(--accent);}
.payment-toggle-readonly-none{color:rgba(var(--text-rgba-base),.5);font-style:italic;background:transparent !important;border:1px dashed rgba(var(--surface-rgba-base),.1) !important;}

/* ─── Light-Mode Parität ──────────────────────────────────────────────────
 * --surface-rgba-base kippt im Light-Mode auf 0,0,0 (Tint-Token), die
 * niedrig-alpha rgba()-Aufrufe oben werden dadurch automatisch zu schwarzen
 * Tints auf weißem Grund. Für stärkere Surfaces (paytile-card kommt von
 * .inv3-form-card und hat seinen eigenen body.light-Override) brauchen wir
 * hier nur die Tile-spezifischen Hardcode-Tweaks.
 * ──────────────────────────────────────────────────────────────────────── */
body.light .paytile{background:rgba(26,30,46,.025);border-color:rgba(26,30,46,.08);}
body.light .paytile:hover{background:rgba(26,30,46,.04);border-color:rgba(26,30,46,.16);}
body.light .paytile.is-active{
  border-color:rgba(232,184,75,.5);
  background:rgba(232,184,75,.07);
  box-shadow:0 0 0 1px rgba(232,184,75,.2) inset, 0 4px 14px rgba(232,184,75,.1);
}
body.light .paytile-icon{background:rgba(26,30,46,.04);color:rgba(26,30,46,.55);}
body.light .paytile.is-active .paytile-icon{background:rgba(232,184,75,.18);color:var(--accent2);}
body.light .paytile-icon--paypal{color:var(--blue);}
body.light .paytile.is-active .paytile-icon--paypal{background:rgba(37,99,235,.12);color:var(--blue);}
/* 2026-04-28 UX-Fix Light-Mode-Anpassung: state-tick ist jetzt immer sichtbar
   (siehe Dark-Mode-Definition oben). Off = transparenter Kreis mit dunklem
   Border, on = Brand-Gold (im Light-Mode etwas tiefer als im Dark-Mode). */
body.light .paytile-state-tick{
  background:transparent;
  border-color:rgba(26,30,46,.32);
  color:transparent;
}
body.light .paytile.is-active .paytile-state-tick{
  background:var(--accent2);
  border-color:var(--accent2);
  color:white;
}
body.light .paytile:not(.is-disabled):hover .paytile-state-tick{border-color:rgba(201,152,48,.6);}
body.light .paytile.is-active:hover .paytile-state-tick{border-color:var(--accent2);}
/* 2026-04-28 Hotfix Light-Mode-Pendant zu :has()-Reactive-Layer (siehe Dark-Mode oben). */
body.light .paytile:has(.paytile-input:checked):not(.is-disabled){
  border-color:rgba(232,184,75,.5);
  background:rgba(232,184,75,.07);
  box-shadow:0 0 0 1px rgba(232,184,75,.2) inset, 0 4px 14px rgba(232,184,75,.1);
}
body.light .paytile:has(.paytile-input:checked):not(.is-disabled) .paytile-icon{
  background:rgba(232,184,75,.18);
  color:var(--accent2);
}
body.light .paytile:has(.paytile-input:checked):not(.is-disabled) .paytile-icon--paypal{
  background:rgba(37,99,235,.12);
  color:var(--blue);
}
body.light .paytile:has(.paytile-input:checked):not(.is-disabled) .paytile-state-tick{
  background:var(--accent2);
  border-color:var(--accent2);
  color:var(--bg3);
}
body.light .paytile-card-eyebrow{color:rgba(26,30,46,.55);}
body.light .paytile-subtitle{color:rgba(26,30,46,.6);}
body.light .paytile-handle{background:rgba(232,184,75,.1);border-color:rgba(232,184,75,.3);color:rgba(26,30,46,.85);}
body.light .paytile-aside--cta .paytile-cta-link{background:rgba(232,184,75,.12);border-color:rgba(232,184,75,.4);color:var(--accent2);}
body.light .paytile-aside--cta .paytile-cta-link:hover{background:rgba(232,184,75,.2);border-color:rgba(232,184,75,.55);}
body.light .paytile-chip{background:rgba(26,30,46,.025);border-color:rgba(26,30,46,.08);}
body.light .paytile-chip:hover{background:rgba(26,30,46,.04);border-color:rgba(26,30,46,.16);}
body.light .paytile-chip.is-on{background:rgba(232,184,75,.06);border-color:rgba(232,184,75,.4);}
/* 2026-04-28 Hotfix Iter-2 Light-Mode-Chip: Chip-Input ist jetzt visually-hidden,
   sichtbares Affordance ist .paytile-state-tick--chip. Alte chip-input-Style-
   Overrides entfernt — der Chip-Tick erbt jetzt das Tile-Tick-Visual. */
body.light .paytile-chip-input:checked + .paytile-state-tick--chip{
  background:var(--accent2);
  border-color:var(--accent2);
  color:var(--bg3);
}
body.light .paytile-chip-hint{color:rgba(26,30,46,.55);}
body.light .paytile-bottom-hint{background:rgba(26,30,46,.025);border-color:rgba(26,30,46,.08);color:rgba(26,30,46,.7);}
body.light .payment-toggle-lock{background:rgba(26,30,46,.05);color:rgba(26,30,46,.5);}
body.light .payment-toggle-readonly-intro{color:rgba(26,30,46,.62);}
body.light .payment-toggle-readonly-list li{background:rgba(26,30,46,.025);border-color:rgba(26,30,46,.06);color:rgba(26,30,46,.85);}
body.light .payment-toggle-readonly-list a{color:var(--accent2);border-bottom-color:rgba(201,152,48,.4);}
body.light .payment-toggle-readonly-list a:hover{border-bottom-color:var(--accent2);}

/* ═══ Invoice-Design: Standard-Zahlungsarten Settings-Card ═══════════════════
 * 2026-05-14 Modernisierung. Card-Tile-Layout in der visuellen Sprache der
 * .paytile-Komponente (Editor-Panel), aber ruhiger/premiumhafter abgestimmt,
 * weil es ein Einstellungsbereich ist. Eigener .ipd-*-Namespace — die
 * Editor-Tiles bleiben unangetastet.
 *
 * Markup (siehe rdInvoiceDesignSection in invoice-design.js):
 *   .ipd-card
 *     .ipd-head            (eyebrow + intro)
 *     .ipd-list
 *       .ipd-tile.ipd-tile--bank
 *         input.ipd-input          (visually hidden, drives :has()-state)
 *         label.ipd-main           (icon + body, full-width click target)
 *         .ipd-suboption
 *           label.ipd-chip         (GiroCode sub-toggle)
 *       .ipd-tile.ipd-tile--paypal
 *         input.ipd-input
 *         label.ipd-main
 *         .ipd-suboption
 *           .ipd-info              (setup hint, shown while PayPal is off)
 * ──────────────────────────────────────────────────────────────────────────── */
.inv-payment-defaults{padding:0;}
/* app.css `.inv-form-row label{display:block;…uppercase}` (0,1,1) out-specs the bare .ipd-main/.ipd-chip label rules and collapsed the icon/body/tick row; scoped override restores intended layout. */
.inv-payment-defaults .ipd-main{display:flex;margin-bottom:0;text-transform:none;letter-spacing:0;}
.inv-payment-defaults .ipd-chip{display:grid;margin-bottom:0;text-transform:none;letter-spacing:0;}

.ipd-card{
  padding:24px 24px 22px;
  border-radius:16px;
  border:1px solid rgba(var(--surface-rgba-base),.1);
  background:rgba(var(--surface-rgba-base),.02);
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
}

/* ─── Head ─── */
.ipd-head{display:flex;flex-direction:column;gap:7px;margin-bottom:24px;}
.ipd-eyebrow{
  font-size:11px;font-weight:var(--fw-semibold);
  letter-spacing:.07em;text-transform:uppercase;
  color:rgba(var(--text-rgba-base),.55);
}
.ipd-intro{
  margin:0;
  font-size:12.5px;line-height:1.5;
  color:rgba(var(--text-rgba-base),.62);
  text-transform:none;letter-spacing:0;font-weight:var(--fw-regular);
}

/* ─── Tile list ─── */
.ipd-list{display:flex;flex-direction:column;gap:22px;}

/* ─── Tile = parent card ─── */
.ipd-tile{
  position:relative;
  display:flex;flex-direction:column;gap:18px;
  padding:24px;
  border-radius:16px;
  border:1px solid rgba(var(--surface-rgba-base),.08);
  background:rgba(var(--surface-rgba-base),.018);
  transition:border-color .15s, background .15s, box-shadow .15s;
}
/* Active keeps the gold accent, but border/glow stays subtle */
.ipd-tile:has(.ipd-input:checked){
  border-color:rgba(var(--accent-rgba-base),.32);
  background:rgba(var(--accent-rgba-base),.035);
}

/* Visually-hidden master input — label.ipd-main is the click target */
.ipd-input{
  position:absolute;
  opacity:0;width:1px;height:1px;
  margin:0;padding:0;pointer-events:none;
}

/* ─── Main row: [icon] [body grows] [status tick, right] ─── */
.ipd-main{
  display:flex;align-items:flex-start;gap:16px;
  cursor:pointer;
  text-transform:none;letter-spacing:0;
}
.ipd-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;
  border-radius:12px;
  background:rgba(var(--surface-rgba-base),.05);
  color:rgba(var(--text-rgba-base),.6);
  flex-shrink:0;
  transition:background .15s, color .15s;
}
.ipd-tile:has(.ipd-input:checked) .ipd-icon{background:rgba(var(--accent-rgba-base),.16);color:var(--accent);}
.ipd-icon--paypal{color:var(--blue);}
.ipd-tile--paypal:has(.ipd-input:checked) .ipd-icon--paypal{background:rgba(59,130,246,.13);color:var(--blue);}

.ipd-body{display:flex;flex-direction:column;gap:7px;min-width:0;flex:1 1 auto;}
.ipd-title{
  font-size:15px;font-weight:var(--fw-semibold);
  color:var(--text-strong);
  text-transform:none;letter-spacing:0;line-height:1.3;
}
.ipd-subtitle{
  font-size:12.5px;line-height:1.5;
  color:rgba(var(--text-rgba-base),.58);
  font-weight:var(--fw-regular);text-transform:none;letter-spacing:0;
}

/* ─── State tick — anchored right, aligned to the title line ─── */
.ipd-tick{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;
  border-radius:50%;
  background:transparent;
  border:1.5px solid rgba(var(--text-rgba-base),.28);
  color:transparent;
  flex-shrink:0;
  align-self:flex-start;
  margin-top:1px;
  transition:background .15s, border-color .15s, color .15s;
}
.ipd-tile:has(.ipd-input:checked) .ipd-tick,
.ipd-chip-input:checked + .ipd-tick--chip{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--accent-ink);
}
.ipd-main:hover .ipd-tick{border-color:rgba(var(--accent-rgba-base),.5);}
.ipd-tile:has(.ipd-input:checked) .ipd-main:hover .ipd-tick{border-color:var(--accent);}

/* ─── Sub-option: indented under the body, lighter than the parent ─── */
.ipd-suboption{display:block;padding-left:56px;}

/* GiroCode chip — child weight: faint border, subtle fill, smaller */
.ipd-chip{
  position:relative;
  display:grid;grid-template-columns:auto 1fr;gap:11px;
  align-items:flex-start;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid rgba(var(--surface-rgba-base),.055);
  background:rgba(var(--surface-rgba-base),.015);
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.ipd-chip:hover{border-color:rgba(var(--surface-rgba-base),.12);background:rgba(var(--surface-rgba-base),.03);}
.ipd-chip:has(.ipd-chip-input:checked){border-color:rgba(var(--accent-rgba-base),.22);background:rgba(var(--accent-rgba-base),.03);}
.ipd-chip:has(.ipd-chip-input:disabled){opacity:.45;cursor:not-allowed;}
.ipd-chip:has(.ipd-chip-input:disabled):hover{border-color:rgba(var(--surface-rgba-base),.055);background:rgba(var(--surface-rgba-base),.015);}
.ipd-chip-input{
  position:absolute;
  opacity:0;width:1px;height:1px;
  margin:0;padding:0;pointer-events:none;
}
.ipd-tick--chip{width:17px;height:17px;align-self:flex-start;margin-top:1px;}
.ipd-chip-label{display:flex;flex-direction:column;gap:4px;min-width:0;}
.ipd-chip-title{
  font-size:13px;font-weight:var(--fw-semibold);
  color:var(--text-strong);
  text-transform:none;letter-spacing:0;line-height:1.3;
}
.ipd-chip-hint{
  font-size:11.5px;line-height:1.45;
  color:rgba(var(--text-rgba-base),.55);
  font-weight:var(--fw-regular);text-transform:none;letter-spacing:0;
}

/* ─── Setup info hint — only while PayPal default is OFF; quiet, integrated ─── */
.ipd-tile--paypal:has(.ipd-input:checked) .ipd-suboption{display:none;}
.ipd-info{
  display:flex;align-items:flex-start;gap:9px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(var(--surface-rgba-base),.045);
  background:rgba(var(--surface-rgba-base),.02);
}
.ipd-info-icon{
  display:inline-flex;align-items:center;
  color:rgba(var(--text-rgba-base),.4);
  flex-shrink:0;margin-top:1px;
}
.ipd-info-text{
  font-size:12px;line-height:1.5;
  color:rgba(var(--text-rgba-base),.6);
  text-transform:none;letter-spacing:0;font-weight:var(--fw-regular);
}
.ipd-link{
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid rgba(var(--accent-rgba-base),.4);
  white-space:nowrap;
}
.ipd-link:hover{border-bottom-color:var(--accent);}

/* ─── Focus-visible (keyboard) ─── */
.ipd-input:focus-visible + .ipd-main .ipd-icon,
.ipd-chip-input:focus-visible + .ipd-tick--chip{
  outline:2px solid rgba(var(--accent-rgba-base),.7);
  outline-offset:2px;
}

/* ─── Light-Mode parity ─── */
body.light .ipd-card{
  border-color:rgba(26,30,46,.1);
  background:var(--card);
  box-shadow:0 1px 2px rgba(26,30,46,.05), 0 8px 24px rgba(26,30,46,.06);
}
body.light .ipd-tile{background:rgba(26,30,46,.022);border-color:rgba(26,30,46,.09);}
body.light .ipd-tile:has(.ipd-input:checked){
  border-color:rgba(var(--accent-rgba-base),.34);
  background:rgba(var(--accent-rgba-base),.05);
}
body.light .ipd-icon{background:rgba(26,30,46,.045);color:rgba(26,30,46,.55);}
body.light .ipd-tile:has(.ipd-input:checked) .ipd-icon{background:rgba(var(--accent-rgba-base),.18);color:var(--accent2);}
/* Off-State paypal-icon color cascades from .ipd-icon--paypal{color:var(--blue)}
   — in body.light resolves to the darker shell-light --blue token automatically.
   Active-State braucht aber einen eigenen Background-Tint (saturierter als die
   Dark-Mode-Variante), Color erbt weiter von der :has()-Regel oben. */
body.light .ipd-tile--paypal:has(.ipd-input:checked) .ipd-icon--paypal{background:rgba(37,99,235,.12);}
body.light .ipd-tick{border-color:rgba(26,30,46,.3);}
body.light .ipd-tile:has(.ipd-input:checked) .ipd-tick,
body.light .ipd-chip-input:checked + .ipd-tick--chip{
  background:var(--accent2);
  border-color:var(--accent2);
  color:var(--bg3);
}
body.light .ipd-main:hover .ipd-tick{border-color:rgba(201,152,48,.6);}
body.light .ipd-chip{background:rgba(26,30,46,.015);border-color:rgba(26,30,46,.06);}
body.light .ipd-chip:hover{background:rgba(26,30,46,.03);border-color:rgba(26,30,46,.12);}
body.light .ipd-chip:has(.ipd-chip-input:checked){background:rgba(var(--accent-rgba-base),.045);border-color:rgba(var(--accent-rgba-base),.24);}
body.light .ipd-info{background:rgba(26,30,46,.018);border-color:rgba(26,30,46,.05);}
body.light .ipd-link{color:var(--accent2);border-bottom-color:rgba(201,152,48,.4);}
body.light .ipd-link:hover{border-bottom-color:var(--accent2);}

/* Mobile-Optimierung */
@media (max-width:600px){
  .payment-identity-field input{max-width:100%;}
  .payment-identity-preview-row{flex-direction:column;align-items:flex-start;}
  .payment-identity-preview-url{width:100%;box-sizing:border-box;}
  .paytile{grid-template-columns:36px minmax(0,1fr);gap:12px;padding:13px 14px;}
  .paytile-icon{width:36px;height:36px;border-radius:10px;}
  .paytile-aside{grid-column:2;justify-self:start;align-self:start;min-width:0;width:100%;}
  .paytile-aside--cta .paytile-cta-link{white-space:normal;line-height:1.25;width:100%;box-sizing:border-box;justify-content:center;text-align:center;}
  .paytile-aside--handle .paytile-handle{white-space:normal;overflow-wrap:anywhere;line-height:1.35;}
  .paytile-suboption{grid-column:1 / -1;margin-top:2px;}
  .ipd-card{padding:20px 18px 18px;border-radius:14px;}
  .ipd-head{margin-bottom:20px;}
  .ipd-list{gap:20px;}
  .ipd-tile{padding:22px 18px;gap:16px;}
  .ipd-main{gap:14px;}
  .ipd-icon{width:36px;height:36px;border-radius:10px;}
  .ipd-suboption{padding-left:0;}
  .ipd-chip{padding:13px 14px;}
  .ipd-info{padding:11px 13px;}
  .ipd-link{white-space:normal;}
}

/* Advisor-Cockpit — Auth-Pages, Mandantenliste (Cockpit), Mandant-Detail.
 * Spec 2 PR 3. Surfaces:
 *   .advisor-auth-page  — login.html / accept.html (getrennter Auth-Stack)
 *   .advisor-cockpit    — cockpit.html (Mandantenliste)
 *   .advisor-client     — client.html (Detail-View)
 * Alle Farben über Tokens aus _00-tokens.css (gleicher Bundle) — keine Hex.
 */

/* ─── Auth-Pages ─────────────────────────────────────────────────────────── */
.advisor-auth-page {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.advisor-auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 36px 32px 30px;
}

.advisor-auth-logo {
  display: inline-block;
  margin-bottom: 24px;
}

.advisor-auth-logo img {
  display: block;
}

.advisor-auth-title {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--text);
}

.advisor-auth-sub {
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--text2);
}

.advisor-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.advisor-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.advisor-field-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
}

.advisor-field-hint {
  font-weight: 400;
  color: var(--text3);
}

.advisor-form input {
  width: 100%;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  font-size: 16px;
  color: var(--text);
  font-family: inherit;
  transition: border-color 0.15s;
  outline: none;
  -webkit-appearance: none;
}

@media (min-width: 768px) {
  .advisor-form input { font-size: 14px; }
}

.advisor-form input::placeholder { color: var(--text3); }

.advisor-form input:focus {
  border-color: var(--border2);
  box-shadow: 0 0 0 3px var(--accent-bg-soft);
}

.advisor-btn {
  width: 100%;
  border-radius: var(--radius-md);
  padding: 13px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid transparent;
  transition: background 0.15s, transform 0.1s, opacity 0.15s;
}

.advisor-btn:active { transform: scale(0.99); }
.advisor-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.advisor-btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}

.advisor-btn-primary:hover { background: var(--accent2); }

.advisor-btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text2);
  font-weight: 600;
}

.advisor-btn-ghost:hover { color: var(--text); }

.advisor-msg {
  display: none;
  margin: 0 0 16px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.5;
  background: var(--card2);
  border: 1px solid var(--border);
  color: var(--text2);
}

.advisor-msg.is-shown { display: block; }

.advisor-msg.is-error {
  background: var(--red2);
  border-color: var(--red3);
  color: var(--red);
}

/* ─── Cockpit-Shell (cockpit.html + client.html gemeinsam) ───────────────── */
.advisor-shell {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.advisor-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

.advisor-topbar-context {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: var(--space-sm);
  margin-left: auto;
  margin-right: var(--space-lg);
  padding: 0 var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text2);
  background: var(--card2);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.advisor-topbar-context strong { color: var(--text); font-family: var(--font-mono); }

.advisor-topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.advisor-brand {
  display: inline-flex;
  align-items: center;
  padding-right: var(--space-md);
  border-right: 1px solid var(--border);
}

.advisor-brand img {
  display: block;
  width: auto;
  height: 24px;
}

@media (max-width: 768px) {
  .advisor-topbar { min-height: 64px; padding: 0 var(--space-md); }
  .advisor-topbar-context { display: none; }
}

.advisor-topbar-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.advisor-topbar-meta {
  font-size: 13px;
  color: var(--text2);
}

.advisor-logout {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  cursor: pointer;
  font-family: inherit;
}

.advisor-logout:hover { color: var(--text); }

.advisor-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

.advisor-state {
  padding: 40px 20px;
  text-align: center;
  color: var(--text2);
  font-size: 14px;
}

.advisor-state.is-error { color: var(--red); }

.advisor-retry {
  margin-top: 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  cursor: pointer;
  font-family: inherit;
}

.advisor-retry:hover { color: var(--text); }

/* ─── Cockpit-Summary-Strip ──────────────────────────────────────────────── */
.advisor-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.advisor-summary-card {
  flex: 1 1 160px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
}

.advisor-summary-num {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.advisor-summary-label {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text2);
}

/* ─── Filter-Bar ─────────────────────────────────────────────────────────── */
.advisor-filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.advisor-filter {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  cursor: pointer;
  font-family: inherit;
}

.advisor-filter:hover { color: var(--text); }

.advisor-filter.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* ─── Mandantenliste (Tabelle) ───────────────────────────────────────────── */
.advisor-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.advisor-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text3);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.advisor-table td {
  padding: 14px 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
  /* F-02: expliziter Reset gegen den globalen td-Leak aus _10-shell.css
     (text-align:right; font-family:var(--mono); color:var(--text2)) —
     Num-Zellen setzen rechts/mono gezielt via .advisor-num-cell. */
  text-align: left;
  font-family: var(--font-sans);
  color: var(--text);
}

.advisor-row { cursor: pointer; transition: background 0.12s; }
.advisor-row:hover { background: var(--card2); }
.advisor-row:last-child td { border-bottom: none; }

.advisor-client-name { font-weight: 600; }

.advisor-client-sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text3);
}

.advisor-table td.advisor-num-cell { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ─── Mehrjahres-Gruppierung (1 Mandant, mehrere Steuerjahre) ─────────────── */
.advisor-year-chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--card2);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.advisor-group-head td {
  background: var(--card2);
  font-weight: 700;
  cursor: default;
}

.advisor-group-head:hover td { background: var(--card2); }

.advisor-group-count {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text3);
}

.advisor-row.is-group-child td:first-child { padding-left: 28px; }

.advisor-client-year-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ─── Readiness-Ampel ────────────────────────────────────────────────────── */
.advisor-readiness {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
}

.advisor-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--text3);
}

.advisor-dot.is-ready { background: var(--tone-good-fg); }
.advisor-dot.is-almost { background: var(--tone-warn-fg); }
.advisor-dot.is-not-ready { background: var(--tone-poor-fg); }
.advisor-dot.is-empty { background: var(--text3); }
.advisor-dot.is-unknown { background: var(--text3); }

/* ─── Read-Only-Banner ───────────────────────────────────────────────────── */
.advisor-readonly-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  background: var(--tone-info-bg);
  border: 1px solid var(--tone-info-border);
  color: var(--tone-info-fg);
}

/* CODEX-12-C: Advisor-Demo (öffentlich, read-only) — Badge, CTA, Footer */
.advisor-demo-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  background: var(--tone-info-bg);
  border-bottom: 1px solid var(--tone-info-border);
  color: var(--tone-info-fg);
  text-align: center;
}

.advisor-demo-cta {
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--radius-pill, 999px);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.advisor-demo-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  margin-top: 24px;
  border-top: 1px solid var(--border);
  color: var(--text2);
  font-size: var(--fs-sm);
  text-align: center;
}

@media (max-width: 640px) {
  .advisor-demo-badge { font-size: 12px; padding: 6px 12px; }

  /* F-03: Mandantenliste mobil — die 5-Spalten-Tabelle scrollt in einem
     eigenen Bereich (statt die ganze Seite ~750px breit zu machen); die
     Namensspalte bleibt als Anker fixiert. */
  .advisor-main { padding: var(--space-md); }
  .advisor-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .advisor-table th:first-child,
  .advisor-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--card);
  }
  .advisor-group-head td:first-child { background: var(--card2); }
  .advisor-row:hover td:first-child { background: var(--card2); }
}

.awv2-shell{min-height:calc(100vh - 68px);color:var(--text);background:var(--bg)}.advisor-client-main:has(.awv2-shell),.advisor-main:has(.awv2-shell){width:100%;max-width:none;margin:0;padding:0}.awv2-shell-inner{width:100%;max-width:1600px;margin:0 auto;padding:0 var(--space-md) var(--space-xl)}.awv2-workspace{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:calc(100vh - 116px);overflow:hidden;border-right:1px solid var(--border);border-left:1px solid var(--border);background:var(--card)}.awv2-rail{display:flex;min-height:100%;flex-direction:column;border-right:1px solid var(--border);background:var(--card)}.awv2-mandate{display:grid;gap:var(--space-xs);padding:var(--space-xl) var(--space-lg) var(--space-md)}.awv2-mandate strong{font-size:var(--fs-md);line-height:1.3}.awv2-mandate>span:last-child{color:var(--text2);font-family:var(--font-mono)}.awv2-mandate-label,.awv2-kicker,.awv2-eyebrow{color:var(--text2);font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.06em;text-transform:uppercase}.awv2-icon{width:21px;height:21px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.awv2-rail-status{display:flex;align-items:center;gap:var(--space-sm);margin:0 var(--space-md) var(--space-lg);padding:var(--space-md);border:1px solid var(--tone-warn-border);border-radius:var(--radius-md);color:var(--tone-warn-text);background:var(--tone-warn-bg)}.awv2-rail-status>.awv2-icon{color:var(--tone-warn-fg)}.awv2-rail-status.is-poor{border-color:var(--tone-poor-border);color:var(--tone-poor-text,var(--tone-poor-fg));background:var(--tone-poor-bg)}.awv2-rail-status.is-good{border-color:var(--tone-good-border);color:var(--tone-good-text,var(--tone-good-fg));background:var(--tone-good-bg)}.awv2-rail-status.is-good>.awv2-icon{color:var(--tone-good-fg)}.awv2-rail-status.is-poor>.awv2-icon{color:var(--tone-poor-fg)}.awv2-rail-status span{display:grid;gap:2px}.awv2-rail-status strong{font-size:var(--fs-sm)}.awv2-rail-status small{color:var(--text2);font-size:var(--fs-xs)}.awv2-tabs{display:grid;gap:2px;padding:0}.awv2-tabs button{display:flex;min-height:48px;align-items:center;gap:var(--space-md);padding:0 var(--space-lg);border:0;border-left:3px solid transparent;color:var(--text2);background:transparent;font:inherit;font-weight:var(--fw-semibold);text-align:left;cursor:pointer}.awv2-tabs button:hover{color:var(--text);background:var(--bg2)}.awv2-tabs button[aria-selected="true"]{border-left-color:var(--accent);color:var(--text);background:var(--accent-soft)}.awv2-inbox-link{margin:auto var(--space-md) var(--space-lg);padding:var(--space-sm) var(--space-md);color:var(--text2);font-size:var(--fs-sm);text-decoration:none}.awv2-inbox-link:hover{color:var(--text)}.awv2-main{min-width:0;background:var(--bg)}.awv2-primary{min-width:0;padding:var(--space-lg)}.awv2-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.awv2-live:empty{display:none}.awv2-stale{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);margin:var(--space-md) var(--space-lg) 0;padding:var(--space-md);border:1px solid var(--tone-warn-border);border-radius:var(--radius-md);color:var(--tone-warn-text);background:var(--tone-warn-bg)}.awv2-stale[hidden]{display:none}.awv2-stale button,.awv2-evidence button,.awv2-more,.awv2-primary-action,.awv2-secondary-action,.awv2-head-action,.awv2-module-head button{min-height:44px;padding:var(--space-sm) var(--space-md);border:1px solid var(--border2);border-radius:var(--radius-sm);color:var(--text);background:var(--card);font:inherit;font-weight:var(--fw-semibold);cursor:pointer}.awv2-primary-action{border-color:var(--accent);color:var(--accent-ink);background:var(--accent)}.awv2-secondary-action{background:transparent}.awv2-head-action{display:inline-flex;align-items:center;gap:var(--space-sm);min-height:44px}.awv2-tabs button:focus-visible,.awv2-stale button:focus-visible,.awv2-evidence button:focus-visible,.awv2-more:focus-visible,.awv2-primary-action:focus-visible,.awv2-secondary-action:focus-visible,.awv2-head-action:focus-visible,.awv2-booking-select:focus-visible,.awv2-filters input:focus-visible,.awv2-filters select:focus-visible{outline:3px solid var(--accent-focus-ring);outline-offset:2px}.awv2-status-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:calc(var(--space-lg)*-1) calc(var(--space-lg)*-1) var(--space-lg);border-bottom:1px solid var(--border);background:var(--card)}.awv2-status-strip article{display:flex;min-height:56px;align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-lg);border-right:1px solid var(--border);border-left:3px solid transparent}.awv2-status-strip article:last-child{border-right:0}.awv2-status-strip article.is-poor{border-left-color:var(--tone-poor-fg)}.awv2-status-strip article.is-warn{border-left-color:var(--tone-warn-fg)}.awv2-status-strip article.is-good{border-left-color:var(--tone-good-fg)}.awv2-status-strip article.is-poor>.awv2-icon{color:var(--tone-poor-fg)}.awv2-status-strip article.is-warn>.awv2-icon{color:var(--tone-warn-fg)}.awv2-status-strip article.is-good>.awv2-icon{color:var(--tone-good-fg)}.awv2-status-strip article span{display:grid;gap:3px}.awv2-status-strip strong{font-size:var(--fs-sm)}.awv2-status-strip small{color:var(--text2);font-size:var(--fs-xs)}.awv2-page-head{display:flex;min-height:68px;align-items:flex-start;justify-content:space-between;gap:var(--space-xl);margin-bottom:var(--space-md)}.awv2-page-head h1{margin:3px 0 0;color:var(--text);font-size:var(--shell-ref-title-size);font-weight:var(--fw-bold);line-height:1.12;letter-spacing:-.025em}.awv2-subtitle{max-width:72ch;margin:var(--shell-ref-subtitle-margin-top) 0 0;color:var(--text2);font-size:var(--shell-ref-subtitle-size);line-height:1.45}.awv2-overview-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-md)}.awv2-kpi,.awv2-dashboard-panel,.awv2-panel,.awv2-worklist,.awv2-evidence{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--card);box-shadow:var(--shadow-sm)}.awv2-kpi{display:flex;grid-column:span 4;min-height:140px;align-items:center;justify-content:flex-start;gap:var(--space-lg);padding:var(--space-xl)}.awv2-kpi>div{display:grid;min-width:0;gap:var(--space-sm)}.awv2-kpi span{color:var(--text2);font-size:var(--fs-base)}.awv2-kpi strong{font-family:var(--font-mono);font-size:clamp(var(--fs-xl),2.1vw,var(--fs-hero));line-height:1.1;white-space:nowrap}.awv2-kpi--action strong{font-family:var(--font-sans);font-size:clamp(var(--fs-lg),1.7vw,var(--fs-xl));white-space:normal;overflow-wrap:anywhere}.awv2-kpi small{color:var(--text2)}.awv2-kpi>i{display:grid;width:56px;height:56px;flex:0 0 auto;place-items:center;border-radius:50%;color:var(--tone-good-fg);background:var(--tone-good-bg)}.awv2-kpi--action>i{color:var(--accent);background:var(--accent-soft)}.awv2-module-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-lg)}.awv2-module-head h2,.awv2-next-panel h2,.awv2-handover-cta h2,.awv2-panel h2,.awv2-evidence h2{margin:0;font-size:var(--fs-lg);line-height:1.25}.awv2-module-head p,.awv2-next-panel p,.awv2-handover-cta p,.awv2-panel p{margin:var(--space-xs) 0 0;color:var(--text2);line-height:1.5}.awv2-progress{display:grid;grid-column:span 8;align-content:center;gap:var(--space-lg);min-height:176px;padding:var(--space-lg)}.awv2-progress ol{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;margin:0;padding:0;list-style:none}.awv2-progress li{position:relative;display:grid;gap:var(--space-xs);justify-items:center;color:var(--text2);text-align:center}.awv2-progress li:not(:last-child)::after{position:absolute;z-index:0;top:18px;left:calc(50%+20px);width:calc(100%-40px);height:2px;background:var(--border2);content:""}.awv2-progress li.is-complete:not(:last-child)::after{background:var(--tone-good-fg)}.awv2-step{position:relative;z-index:1;display:grid;width:38px;height:38px;place-items:center;border:2px solid var(--border2);border-radius:50%;color:var(--text);background:var(--card);font-family:var(--font-mono);font-weight:var(--fw-bold)}.is-complete .awv2-step{border-color:var(--tone-good-fg);color:var(--tone-good-fg)}.is-active .awv2-step{border-color:var(--accent)}.awv2-progress li strong{color:var(--text);font-size:var(--fs-sm)}.awv2-progress li small{font-size:var(--fs-xs)}.awv2-next-panel{grid-column:span 4;min-height:176px;padding:var(--space-lg)}.awv2-next-panel ul{display:grid;margin:var(--space-md) 0;padding:0;list-style:none}.awv2-next-panel li{display:flex;min-height:38px;align-items:center;gap:var(--space-sm);border-top:1px solid var(--border);color:var(--text2);font-size:var(--fs-sm)}.awv2-next-panel li .awv2-icon{width:17px;height:17px}.awv2-next-panel li.is-poor .awv2-icon{color:var(--tone-poor-fg)}.awv2-next-panel li.is-warn .awv2-icon{color:var(--tone-warn-fg)}.awv2-next-panel .awv2-primary-action{width:100%}.awv2-recent{grid-column:span 8;min-height:238px;padding:var(--space-lg)}.awv2-table{margin-top:var(--space-md)}.awv2-table-head,.awv2-table-row{display:grid;grid-template-columns:90px minmax(0,1.5fr) minmax(110px,1fr) 110px;align-items:center;gap:var(--space-md);min-height:36px;border-top:1px solid var(--border)}.awv2-table-head{color:var(--text3);font-size:var(--fs-sm);font-weight:var(--fw-semibold)}.awv2-table-row{font-size:var(--fs-base)}.awv2-table-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.awv2-table-row b{font-family:var(--font-mono);text-align:right}.awv2-table-row time,.awv2-table-row span{color:var(--text2)}.awv2-handover-cta{display:flex;grid-column:span 4;min-height:238px;align-items:flex-start;gap:var(--space-lg);padding:var(--space-xl);border-color:var(--accent-border-soft);background:var(--accent-soft)}.awv2-handover-cta>i{display:grid;width:54px;height:54px;flex:0 0 auto;place-items:center;border:1px solid var(--accent-border-soft);border-radius:50%;color:var(--accent);background:var(--card)}.awv2-handover-cta .awv2-secondary-action{margin-top:var(--space-lg)}.awv2-review-panel{padding:var(--space-lg)}.awv2-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-lg);margin-bottom:var(--space-md)}.awv2-section-head h2{margin:0;font-size:var(--fs-xl)}.awv2-section-head p{margin:var(--space-xs) 0 0;color:var(--text2)}.awv2-issues{display:grid;gap:0;margin:0;padding:0;list-style:none}.awv2-issue{display:grid;grid-template-columns:4px minmax(0,1fr) auto;min-height:62px;align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-md);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card2)}.awv2-issue-mark{width:4px;height:100%;min-height:40px;border-radius:var(--radius-pill);background:var(--tone-info-fg)}.awv2-issue.is-warn .awv2-issue-mark{background:var(--tone-warn-fg)}.awv2-issue.is-poor .awv2-issue-mark{background:var(--tone-poor-fg)}.awv2-issue-body{display:grid;min-width:0;gap:var(--space-xs);overflow-wrap:anywhere}.awv2-issue-body>span{color:var(--text2)}.awv2-scope{padding:var(--space-xs) var(--space-sm);border:1px solid var(--border);border-radius:var(--radius-pill);color:var(--text2);font-size:var(--fs-xs)}.awv2-bookings-panel{display:grid;grid-template-columns:minmax(0,44fr) minmax(480px,56fr);min-height:690px;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--card);box-shadow:var(--shadow-sm)}.awv2-worklist,.awv2-evidence{min-width:0;border:0;border-radius:0;box-shadow:none}.awv2-worklist{border-right:1px solid var(--border)}.awv2-list-tools{display:flex;min-height:82px;align-items:center;justify-content:space-between;gap:var(--space-md);padding:var(--space-md);border-bottom:1px solid var(--border)}.awv2-list-tools h2{margin:0;font-size:var(--fs-lg)}.awv2-list-tools>div:first-child>span{color:var(--text2);font-size:var(--fs-xs)}.awv2-quick-filters{display:flex;gap:var(--space-xs);overflow-x:auto;padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--border)}.awv2-quick-filters span{flex:0 0 auto;padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text2);font-size:var(--fs-xs)}.awv2-quick-filters .is-active{border-color:var(--accent);color:var(--text);background:var(--accent-soft)}.awv2-booking-list{margin:0;padding:0 var(--space-sm);list-style:none}.awv2-booking{border-bottom:1px solid var(--border)}.awv2-booking.is-selected{margin-inline:calc(var(--space-sm)*-1);padding-inline:var(--space-sm);border:1px solid var(--accent);border-radius:var(--radius-sm);background:var(--accent-soft)}.awv2-booking-select{display:grid;grid-template-columns:minmax(0,1fr) 98px 112px 16px;width:100%;min-height:72px;align-items:center;gap:var(--space-sm);padding:var(--space-sm);border:0;color:var(--text);background:transparent;font:inherit;text-align:left;cursor:pointer}.awv2-booking-copy{display:grid;gap:3px;min-width:0}.awv2-booking-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.awv2-booking-copy small{color:var(--text2);font-size:var(--fs-xs)}.awv2-amount{font-family:var(--font-mono);text-align:right;white-space:nowrap}.awv2-receipt-state{justify-self:end;padding:4px 7px;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text2);font-size:var(--fs-xs)}.awv2-receipt-state.is-good{border-color:var(--tone-good-border);color:var(--tone-good-fg);background:var(--tone-good-bg)}.awv2-receipt-state.is-poor{border-color:var(--tone-poor-border);color:var(--tone-poor-fg);background:var(--tone-poor-bg)}.awv2-chevron{color:var(--text2);font-size:var(--fs-lg)}.awv2-booking-link{padding:0 0 var(--space-sm) 44px;font-size:var(--fs-xs)}.awv2-booking-link a{color:var(--accent)}.awv2-more{margin:var(--space-md)}.awv2-evidence{display:grid;grid-template-rows:auto minmax(330px,1fr) auto auto;align-self:stretch}.awv2-evidence header{display:flex;min-height:70px;align-items:center;justify-content:space-between;gap:var(--space-md);padding:0 var(--space-md);border-bottom:1px solid var(--border)}.awv2-preview-tools{display:flex;align-items:center;gap:var(--space-xs)}.awv2-preview-tools button{min-width:44px;min-height:44px;padding:var(--space-xs)}.awv2-preview-tools output{padding:0 var(--space-sm);color:var(--text2);font-size:var(--fs-xs)}.awv2-preview-stage{display:grid;min-height:410px;max-height:470px;overflow:auto;place-items:start center;padding:var(--space-md);background:var(--bg2)}.awv2-preview-stage canvas,.awv2-preview-stage img{display:block;max-width:100%;height:auto;border:1px solid var(--border);background:var(--card);box-shadow:var(--shadow-sm)}.awv2-evidence-empty,.awv2-empty{display:grid;max-width:420px;gap:var(--space-sm);place-self:center;justify-items:center;padding:var(--space-xl);color:var(--text2);text-align:center}.awv2-evidence-empty strong,.awv2-empty strong{color:var(--text);font-size:var(--fs-md)}.awv2-evidence-icon{display:grid;width:54px;height:54px;place-items:center;border:1px solid var(--border2);border-radius:var(--radius-md);color:var(--accent);background:var(--card);font-size:var(--fs-xl)}.awv2-evidence-tabs{display:flex;gap:var(--space-lg);padding:0 var(--space-md);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.awv2-evidence-tabs button{min-height:44px;padding:0;border:0;border-bottom:2px solid transparent;border-radius:0;color:var(--text2);background:transparent;font-size:var(--fs-sm)}.awv2-evidence-tabs button[aria-selected="true"]{border-bottom-color:var(--accent);color:var(--text)}.awv2-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl);padding:var(--space-md)}.awv2-detail-grid dl{display:grid;gap:var(--space-xs);margin:0}.awv2-detail-grid dl div,.awv2-detail-grid section>div{display:grid;grid-template-columns:120px 1fr;gap:var(--space-sm);min-height:28px;align-items:center}.awv2-detail-grid dt,.awv2-detail-grid section strong{color:var(--text2);font-size:var(--fs-xs)}.awv2-detail-grid dd{margin:0;font-size:var(--fs-xs)}.awv2-detail-grid section{display:grid;align-content:start;gap:var(--space-xs);padding-left:var(--space-lg);border-left:1px solid var(--border)}.awv2-detail-status{color:var(--tone-warn-text)}.awv2-detail-empty{padding:var(--space-lg);color:var(--text2);text-align:center}.awv2-console-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}.awv2-panel{padding:var(--space-lg)}.awv2-tax-context{grid-column:span 4}.awv2-period-matrix{grid-column:span 8}.awv2-vat-state{grid-column:span 7}.awv2-tax-blockers{grid-column:span 5}.awv2-facts{display:grid;gap:var(--space-sm);margin:var(--space-lg) 0 0}.awv2-facts div{display:flex;justify-content:space-between;gap:var(--space-md);padding-top:var(--space-sm);border-top:1px solid var(--border)}.awv2-facts dt{color:var(--text2)}.awv2-facts dd{margin:0;font-weight:var(--fw-semibold)}.awv2-period-list{display:grid;margin:var(--space-lg) 0 0;padding:0;list-style:none}.awv2-period-list li{border-top:1px solid var(--border)}.awv2-period-select{display:grid;min-height:48px;grid-template-columns:110px minmax(0,1fr) auto;align-items:center;gap:var(--space-md);padding:var(--space-sm) 0;border:0;color:var(--text)}.awv2-period-select:focus-visible{outline:3px solid var(--accent-focus-ring)}.awv2-handover-grid>.awv2-panel{grid-column:span 4}.awv2-handover-grid .awv2-package-readiness{display:flex;grid-column:span 8;align-items:flex-start;gap:var(--space-lg)}.awv2-package-readiness>div{flex:1}.awv2-package-readiness>i{display:grid;width:58px;height:58px;flex:0 0 auto;place-items:center;border:1px solid var(--tone-poor-border);border-radius:50%;color:var(--tone-poor-fg);background:var(--tone-poor-bg)}.awv2-package-readiness ul{display:grid;margin:var(--space-lg) 0 0;padding:0;list-style:none}.awv2-package-readiness li{display:flex;min-height:42px;align-items:center;justify-content:space-between;gap:var(--space-md);border-top:1px solid var(--border)}.awv2-package-readiness li span{display:flex;align-items:center;gap:var(--space-sm)}.awv2-package-readiness li .tone-poor{color:var(--tone-poor-fg)}.awv2-package-readiness li .tone-warn{color:var(--tone-warn-fg)}.awv2-package-readiness li .tone-good{color:var(--tone-good-fg)}.awv2-handover-grid .awv2-handover-next{grid-column:span 4}.awv2-handover-next .awv2-primary-action{margin-top:var(--space-lg)}.awv2-skeleton{min-height:480px;padding:var(--space-xl);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text2);background:var(--card2)}.awv2-console-grid{gap:var(--space-md)}.awv2-list-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-sm) var(--space-md);min-height:0}.awv2-list-heading{display:grid;min-width:0;gap:2px}.awv2-list-heading>span{color:var(--text2);font-size:var(--fs-base)}.awv2-list-period{display:flex;align-items:center;gap:var(--space-xs);min-width:0;color:var(--text2);font-size:var(--fs-sm)}.awv2-list-period .awv2-secondary-action{min-width:44px}.awv2-list-period>span{white-space:nowrap}.awv2-list-filters{display:flex;grid-column:1/-1;align-items:flex-end;gap:var(--space-sm)}.awv2-list-filters label{flex:1;font-size:var(--fs-sm)}.awv2-list-filters input,.awv2-list-filters select{width:100%;min-height:44px;padding:var(--space-sm) var(--space-md);border:1px solid var(--border2);border-radius:var(--radius-sm);color:var(--text);background:var(--bg3);font:inherit}.awv2-list-filters input:focus-visible,.awv2-list-filters select:focus-visible{outline:3px solid var(--accent-focus-ring);outline-offset:2px}.awv2-quick-filter{min-width:44px;min-height:44px;padding:var(--space-sm) var(--space-md);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text2);background:var(--bg2);font:inherit;font-size:var(--fs-sm);white-space:nowrap}.awv2-quick-filter:disabled{cursor:not-allowed;opacity:.65}.awv2-quick-filter.is-active{border-color:var(--border2);color:var(--text2);background:var(--bg2)}.awv2-preview-tools button:disabled{cursor:not-allowed;opacity:.55}.awv2-detail-grid dt,.awv2-detail-grid section strong{font-size:var(--fs-sm)}.awv2-detail-grid dd,.awv2-detail-grid section>div>span{font-size:var(--fs-base)}.awv2-detail-empty{font-size:var(--fs-base)}.awv2-quick-filter:focus-visible{outline:3px solid var(--accent-focus-ring);outline-offset:2px}.awv2-booking-select{grid-template-columns:1fr 98px 112px 16px}.awv2-receipt-state.is-warn{color:var(--tone-warn-fg)}.awv2-receipt-state.is-neutral{color:var(--text2);background:var(--card2)}.awv2-panel{align-self:start}@media(max-width:1179px){.awv2-shell-inner{padding-inline:0}.awv2-workspace{display:block}.awv2-rail{min-height:0;border-right:0;border-bottom:1px solid var(--border)}.awv2-mandate,.awv2-rail-status,.awv2-inbox-link{display:none}.awv2-tabs{display:flex;overflow-x:auto;padding:var(--space-xs)}.awv2-tabs button{flex:0 0 auto;border-left:0;border-bottom:3px solid transparent}.awv2-tabs button[aria-selected="true"]{border-bottom-color:var(--accent)}.awv2-status-strip{margin-top:calc(var(--space-lg)*-1)}}@media(max-width:900px){.awv2-status-strip{grid-template-columns:1fr 1fr}.awv2-status-strip article:nth-child(2){border-right:0}.awv2-kpi{grid-column:span 6}.awv2-kpi--action{grid-column:span 12}.awv2-progress,.awv2-next-panel,.awv2-recent,.awv2-handover-cta{grid-column:span 12}.awv2-bookings-panel{display:block}.awv2-evidence{position:fixed;z-index:50;inset:0;min-height:100vh;border:0;border-radius:0}.awv2-evidence[hidden]{display:none}.awv2-preview-stage{max-height:none}.awv2-preview-open{overflow:hidden}}@media(min-width:901px){.awv2-evidence[hidden]{display:grid}.awv2-evidence [data-action="close-preview"]{display:none}}@media(max-width:768px){.advisor-demo .advisor-topbar-title{display:none}.advisor-demo .advisor-topbar-left{gap:var(--space-sm)}.advisor-demo .advisor-brand{padding-right:var(--space-sm)}.awv2-primary{padding:var(--space-md)}.awv2-status-strip{margin:calc(var(--space-md)*-1) calc(var(--space-md)*-1) var(--space-md)}.awv2-kpi{grid-column:span 12}.awv2-console-grid{grid-template-columns:1fr}.awv2-tax-context,.awv2-period-matrix,.awv2-vat-state,.awv2-tax-blockers,.awv2-handover-grid>.awv2-panel,.awv2-handover-grid .awv2-package-readiness,.awv2-handover-grid .awv2-handover-next{grid-column:auto}.awv2-table-head{display:none}.awv2-table-row{grid-template-columns:90px 1fr auto}.awv2-table-row span{display:none}.awv2-progress ol{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr;gap:var(--space-sm)}.awv2-progress li{grid-template-columns:38px 1fr;justify-items:start;text-align:left}.awv2-progress li:not(:last-child)::after{display:none}.awv2-progress li small{grid-column:2}.awv2-detail-grid{grid-template-columns:1fr}.awv2-detail-grid section{padding:var(--space-md) 0 0;border-top:1px solid var(--border);border-left:0}}@media(max-width:520px){.awv2-status-strip{grid-template-columns:repeat(2,1fr)}.awv2-status-strip article{border-right:0;border-bottom:1px solid var(--border)}.awv2-page-head{min-height:0;flex-direction:column}.awv2-head-action{width:100%;justify-content:center}.awv2-list-tools{align-items:stretch;flex-direction:column}.awv2-booking-list{padding:var(--space-sm)}.awv2-booking{margin-bottom:var(--space-sm);padding:var(--space-sm);border:1px solid var(--border);border-radius:var(--radius-sm)}.awv2-booking.is-selected{margin-inline:0;padding-inline:var(--space-sm)}.awv2-booking-select{grid-template-columns:1fr auto}.awv2-amount{grid-column:2}.awv2-receipt-state{grid-column:1/3}.awv2-chevron{display:none}.awv2-booking-link{padding-left:28px}.awv2-issue{grid-template-columns:4px minmax(0,1fr)}.awv2-scope{grid-column:2;justify-self:start}}@media(max-width:520px){.awv2-list-tools{grid-template-columns:1fr}.awv2-list-period,.awv2-list-filters{grid-column:1}.awv2-list-filters{align-items:stretch;flex-direction:column}[data-preview-zoom-placeholder="true"]{display:none}}@media(min-width:521px) and (max-width:1179px){.awv2-bookings-panel{grid-template-columns:minmax(0,44fr) minmax(480px,56fr)}}@media(max-width:375px){.awv2-kpi{padding:var(--space-lg)}.awv2-kpi strong{font-size:var(--fs-xl)}.awv2-status-strip article{min-height:58px}.awv2-detail-grid dl div,.awv2-detail-grid section>div{grid-template-columns:1fr}}.awv2-print-summary{display:none}@media print{.awv2-print-summary{display:block}.advisor-topbar,.advisor-demo-badge,.advisor-demo-foot,.awv2-rail,.awv2-live,.awv2-stale,.awv2-status-strip,.awv2-evidence,.awv2-quick-filters,.awv2-more,.awv2-primary-action,.awv2-secondary-action,.awv2-head-action{display:none!important}.awv2-shell-inner,.awv2-primary{max-width:none;padding:0}.awv2-workspace{display:block;border:0}.awv2-main{background:var(--card)}[data-panel]{display:block!important}.awv2-bookings-panel{display:block;border:0}.awv2-worklist,.awv2-booking,.awv2-panel,.awv2-kpi{break-inside:avoid;box-shadow:none}a::after{content:none!important}.awv2-print-summary dl{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-sm) var(--space-xl);margin:0}.awv2-list-filters,.awv2-list-period,.awv2-preview-tools,.awv2-evidence-tabs{display:none!important}}

/* Post-#5194-Audit-Fixes: Styles fuer bislang nackte Renderer-Klassen (F-08) + Layout/Print (F-23/F-25) */
.awv2-detail-grid .awv2-detail-note{grid-column:1/-1;margin:0;color:var(--text2);font-size:var(--fs-xs)}
.awv2-detail-history{display:grid;gap:var(--space-xs);margin:0;padding:var(--space-md);list-style:none}.awv2-detail-history li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--space-sm);min-height:28px;align-items:center;border-top:1px solid var(--border);font-size:var(--fs-sm)}.awv2-detail-history li:first-child{border-top:0}.awv2-detail-history time{color:var(--text2);font-size:var(--fs-xs)}
.awv2-storno-comparison{padding:var(--space-md);border-top:1px solid var(--border)}.awv2-storno-comparison h3{margin:0;font-size:var(--fs-sm)}.awv2-storno-comparison>p{margin:var(--space-xs) 0 0;color:var(--text2);font-size:var(--fs-xs)}
.awv2-storno-sides{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);margin-top:var(--space-md)}.awv2-storno-sides article{min-width:0;padding:var(--space-md);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card2)}.awv2-storno-sides h4{margin:0 0 var(--space-sm);color:var(--text2);font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.06em;text-transform:uppercase}.awv2-storno-sides dl{display:grid;gap:var(--space-xs);margin:0}.awv2-storno-sides dl div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--space-sm);min-height:24px;align-items:baseline}.awv2-storno-sides dt{color:var(--text2);font-size:var(--fs-xs)}.awv2-storno-sides dd{margin:0;font-size:var(--fs-xs);overflow-wrap:anywhere}
.awv2-storno-unavailable{background:var(--card2)}
.awv2-preview-limit{margin:var(--space-sm) 0 0;color:var(--text2);font-size:var(--fs-xs);text-align:center}
.awv2-history-state,.awv2-handover-unavailable{max-width:none;place-self:stretch;justify-items:start;padding:var(--space-md) 0 0;text-align:left}
.awv2-history-total{color:var(--text2);font-size:var(--fs-xs);font-variant-numeric:tabular-nums;white-space:nowrap}
.awv2-history-loading{display:block;margin-top:var(--space-sm);color:var(--text2);font-size:var(--fs-xs)}
.awv2-package-history .awv2-period-list li{display:grid;grid-template-columns:minmax(90px,auto) minmax(0,1fr) auto;gap:var(--space-md);min-height:46px;align-items:center}.awv2-package-history .awv2-period-list li>span{color:var(--text2);font-size:var(--fs-sm)}.awv2-package-history .awv2-period-list time{color:var(--text2);font-size:var(--fs-xs)}
.awv2-handover-grid .awv2-package-history{grid-column:1/-1}
.awv2-technical-details{margin-top:var(--space-xs);color:var(--text3);font-size:var(--fs-xs)}.awv2-technical-details summary{cursor:pointer;color:var(--text2)}.awv2-technical-details code{font-family:var(--font-mono)}
.awv2-issue-reason{color:var(--text2);font-size:var(--fs-sm)}
.awv2-period-row{list-style:none}
.awv2-handover-cta--wide{grid-column:span 12;min-height:0}
@media(max-width:768px){.awv2-storno-sides{grid-template-columns:1fr}}
@media print{.awv2-chevron{display:none!important}.awv2-booking.is-selected{border-color:var(--border);background:transparent}}

/* Advisor-Cockpit — responsive Verfeinerungen (BUG-004 P3).
   Bewusst NACH _advisor.css im Bundle (manifest.json), damit diese
   Mobile-Overrides den Cascade-Tie gegen die Desktop-Basisregeln gewinnen.
   Hierher ausgelagert, weil _advisor.css am 800-LOC-Partial-Limit liegt. */

/* Timeline: auf Tablets 6 Spalten, auf Phones 3 — sonst werden 12 Monats-
   Zellen zu schmal zum Lesen/Antippen. */
@media (max-width: 720px) {
  .advisor-timeline { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 640px) {
  .advisor-timeline { grid-template-columns: repeat(3, 1fr); }
  /* Touch-Target: Apple/WCAG-Mindestmaß ~44px für die antippbaren Zellen. */
  .advisor-timeline-cell { min-height: 44px; }
}

/* ════════════════════════════════════════════════════════════════════════
   Feature Empty-/Error-State  (.fes-*)
   ──────────────────────────────────────────────────────────────────────
   Wiederverwendbarer "Produkt-Onboarding-State" für leere Feature-Listen.
   Konsumiert von: public/js/feature-empty-state.js
     CoreUI.featureEmptyState() → .fes (+ optional .fes--has-preview)
     CoreUI.featureErrorState() → .fes.fes--error

   Layout: 2-Column-Hero (links Text/CTAs/Vorteile, rechts illustrative
   Preview-Karte). Stapelt auf < 760px. Dezenter Gold-Glow statt großer
   leerer Fläche. Token-adaptiv für Dark + Light.
   ════════════════════════════════════════════════════════════════════════ */

.fes {
  position: relative;
  overflow: hidden;
  /* --card2 ist in beiden Modi die korrekte Card-Surface
     (Dark #1a2032 / Light #f8fafc) — kein modusspezifischer Override nötig. */
  background: var(--card2);
  border: 1px solid var(--border-alpha);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}

/* 2-Column nur wenn eine Preview-Karte da ist. */
.fes--has-preview {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}

/* ── Dezenter Gold-Glow oben-links (kein Mesh, nicht kitschig) ─────────── */
.fes-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(var(--accent-rgba-base), 0.10), transparent 55%);
  z-index: 0;
}
body.light .fes-glow {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(var(--accent-rgba-base), 0.14), transparent 55%);
}

.fes-body {
  position: relative;
  z-index: 1;
  min-width: 0;
}

/* ── Wertige Icon-Fläche ──────────────────────────────────────────────── */
.fes-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: var(--accent);
  background: rgba(var(--accent-rgba-base), 0.10);
  border: 1px solid rgba(var(--accent-rgba-base), 0.22);
  box-shadow: 0 0 22px rgba(var(--accent-rgba-base), 0.12);
}
.fes-icon .app-icon,
.fes-icon svg {
  width: 30px;
  height: 30px;
}
.fes-icon--error {
  color: var(--red);
  background: var(--red-soft);
  border-color: var(--red3);
  box-shadow: none;
}

.fes-eyebrow {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.fes-headline {
  font-size: 21px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 8px 0;
}

.fes-subtext {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text2);
  max-width: 46ch;
  margin: 0 0 18px 0;
}

/* ── Mini-Vorteile ────────────────────────────────────────────────────── */
.fes-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 22px 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.fes-benefit {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.005em;
  min-width: 0;
}
.fes-benefit > span {
  min-width: 0;
}
.fes-benefit .app-icon,
.fes-benefit svg {
  flex-shrink: 0;
  color: hsl(150, 60%, 46%);
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 50%;
  background: rgba(52, 211, 153, 0.10);
}
body.light .fes-benefit .app-icon,
body.light .fes-benefit svg {
  color: hsl(150, 65%, 34%);
}

/* ── CTAs ─────────────────────────────────────────────────────────────── */
.fes-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.fes-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.fes-foot {
  margin-top: 14px;
  font-size: 12px;
  color: var(--text3);
  line-height: 1.45;
}

/* ── Preview-Karte (rechts) ───────────────────────────────────────────── */
.fes-preview {
  position: relative;
  z-index: 1;
  align-self: stretch;
  background: var(--card);
  border: 1px solid var(--border-alpha);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  box-shadow: 0 8px 28px rgba(11, 14, 20, 0.18);
}
body.light .fes-preview {
  /* Auf der weißen Sidebar-Card eine minimal abgesetzte, leicht graue
     Fläche, damit die Preview-Karte als eigene Ebene lesbar bleibt. */
  background: rgba(15, 23, 42, 0.03);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.fes-preview__head {
  font-size: 10px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.fes-preview__rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fes-preview__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  min-width: 0;
}
.fes-preview__label {
  color: var(--text2);
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fes-preview__value {
  color: var(--text);
  font-weight: 700;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.fes-preview__sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--text3);
}
.fes-preview__foot {
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--border-alpha);
  font-size: 11.5px;
  color: var(--text3);
  line-height: 1.4;
}

/* ── Error-Variante: einspaltig, ohne Preview ─────────────────────────── */
.fes--error {
  grid-template-columns: 1fr;
}
.fes--error .fes-glow {
  display: none;
}

/* ── Settings-Variante (Link-Nav-Audit Finding 10) ────────────────────────
   Die Default-.fes ist eine große Hero-Fläche; in den Settings-Listenkarten
   (Buchungstexte / Privat-Keywords / Kostenarten / Vorlagen) wirkt sie zu
   wuchtig. .fes--settings verdichtet Padding + Icon auf Listen-Maßstab, bleibt
   aber visuell konsistent (gleicher Glow, gleiche CTA-Optik). */
.fes--settings {
  padding: 24px 22px;
  gap: 16px;
}
.fes--settings .fes-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.fes--settings .fes-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  margin-bottom: 12px;
  display: flex;
  flex: 0 0 auto;
}
.fes--settings .fes-icon .app-icon,
.fes--settings .fes-icon svg {
  width: 22px;
  height: 22px;
}
.fes--settings .fes-headline {
  font-size: 16px;
}
.fes--settings .fes-subtext {
  margin-left: auto;
  margin-right: auto;
}
.fes--settings .fes-ctas {
  justify-content: center;
}
.fes--settings .fes-cta .app-icon,
.sett-add-row .app-icon,
.sett-inline-cta .app-icon {
  display: block;
  flex: 0 0 auto;
}
.fes--settings-compact {
  padding: 18px 18px;
}

/* ── Responsive: Preview stapelt unter den Text ───────────────────────── */
@media (max-width: 760px) {
  .fes,
  .fes--has-preview {
    grid-template-columns: 1fr;
    padding: 28px 22px;
    gap: 22px;
  }
  .fes-headline {
    font-size: 19px;
  }
  .fes-subtext {
    max-width: none;
  }
}

@media (max-width: 520px) {
  .fes,
  .fes--has-preview {
    padding: 24px 18px;
  }
  .fes-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
  }
  /* Touch-Targets ≥ 40px (WCAG 2.5.5). */
  .fes-cta {
    min-height: 40px;
  }
  .fes-ctas {
    width: 100%;
  }
  .fes-cta {
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fes-cta {
    transition: none;
  }
}

/* ── Bereichsweiser Wartungsmodus ────────────────────────────────────────────
   .fes--maintenance markiert einen Wartungs-Empty-State (View oder Inline).
   .fes--inline ist die kompakte Variante, die einen Teilbereich (z.B. den
   Belege-Upload-Block) ersetzt — kleiner als der seitenfüllende View-State,
   damit die umgebende Liste weiter dominiert. px-Werte wie der restliche
   .fes-Block (diese Datei nutzt hardcoded px, keine Spacing-Tokens). */
.fes--inline {
  min-height: 0;
  padding: 24px 28px;
}
.fes--inline .fes-icon {
  width: 44px;
  height: 44px;
}
.fes--inline .fes-headline {
  font-size: 16px;
}

/* ── Belegarchiv Onboarding-Empty (.fes--beleg-onb) ──────────────────────────
   Reiner Inhalts-Block UNTER dem (pills-losen) Seitentitel-Header — gleiche
   Struktur wie AfA/Fahrten/Kontakte: Einleitung + Vorteile + die große echte
   Drag&Drop-Drop-Zone (#beleg-drop-zone) über die volle Breite. Single-Column
   (keine Preview-Karte). px-Werte wie der restliche .fes-Block.
   Konsumiert von public/js/belege-upload-ui.js. */
.fes--beleg-onb {
  grid-template-columns: 1fr;
}
.beleg-onb-body {
  display: flex;
  flex-direction: column;
}
/* Vorteile etwas dichter an die Drop-Zone heran (sie ist hier der CTA). */
.beleg-onb-benefits {
  margin-bottom: 20px;
}
/* Drop-Zone im Onboarding: groß, vertikal gestapelt, volle Breite, einladend.
   Erbt Hover/drag-over/State-Farben aus _52-belegarchiv.css (.beleg-upload-panel). */
.beleg-upload-panel--onb {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 30px 24px;
  width: 100%;
  max-width: none;
  margin-bottom: 0;
  border-width: 1.5px;
}
.beleg-upload-panel--onb .bup-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
}
.beleg-upload-panel--onb .bup-text {
  flex: 0 0 auto;
  text-align: center;
}
.beleg-upload-panel--onb .bup-title {
  font-size: 15px;
}
.beleg-upload-panel--onb .bup-btn {
  margin-top: 2px;
}
@media (max-width: 600px) {
  .beleg-upload-panel--onb {
    padding: 24px 16px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Position-Composer (2026-04 Pivot)
   ═══════════════════════════════════════════════════════════════════════
   Positions-Editor wechselt von verschachtelten Cards zu flachen Composer-
   Zeilen. Eine Zeile = editable Rechnungszeile mit Pos-Chip + Title-Input
   (+ optionale Beschreibung) + inline Pricing + rechtem Total + Actions.
   Globaler Summary-Block schließt die Liste prominent ab.
   ═══════════════════════════════════════════════════════════════════════ */

.inv3-lines{container-type:inline-size;}
.inv3-lines-section-head{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;padding:0 2px;}
.inv3-lines-section-title{font-size:1.1rem;font-weight:600;color:var(--text-strong);margin:0;letter-spacing:-.005em;}
.inv3-lines-section-subtitle{font-size:.88rem;color:var(--text2);line-height:1.45;margin:0;max-width:62ch;}

/* 2026-04-29 Composer-Row-Redesign: Lexoffice-orientierte Rechnungszeile.
   Eine Position rendert als EINE Hauptzeile (Chip + Artikel + Pricing + Total +
   Actions) plus eine Sub-Row für die Beschreibung über volle Breite. Felder
   tragen Floating-Labels darüber (Lexoffice-Convention).
   Vorher: 2-Row-Composer-Card mit Index links als Text, Beschreibung im Name-
   Stack. Wirkte zu „card-artig" und nicht direkt als Rechnungszeile lesbar. */

/* Composer-Zeile: kein Border-Frame, nur dünner Trenner zwischen Positionen.
   2026-04-29 Iter2: Padding reduziert (10 px statt 14 px) — die Position soll
   kompakter wirken (User-Wunsch: „weniger vertikale Höhe pro Position"). */
.inv3-line.inv3-item-card{
  background:transparent;
  border:none;
  border-radius:0;
  border-bottom:1px solid var(--border);
  box-shadow:none;
  padding:10px 0;
  margin:0;
  position:relative;
  transition:background-color .15s ease;
}
.inv3-line.inv3-item-card:last-of-type{border-bottom:none;}

/* Active-State: dezent getintet, KEIN Stripe links mehr — der Akzent kommt
   jetzt vom gold-getönten Position-Chip selbst. Wirkt ruhiger und passt zum
   Lexoffice-Idiom „aktive Position erkennt man am Chip-Highlight, nicht am
   Frame". */
.inv3-items-builder--single-active .inv3-line.inv3-item-card[data-active="1"]{
  background:rgba(var(--text-rgba-base),.025);
  border-color:transparent;
  box-shadow:none;
  margin:0 -12px;
  padding-left:12px;
  padding-right:12px;
  border-radius:8px;
}
/* Hover-Affordance für nicht-aktive Cards: dezenter Background-Hint signalisiert
   Klickbarkeit (User wechselt Active per Klick auf andere Card). */
.inv3-items-builder--single-active .inv3-line.inv3-item-card:not([data-active="1"]):hover{
  background:rgba(var(--text-rgba-base),.018);
  cursor:pointer;
}

/* Zeilen-Header als 1-Row-Grid (Lexoffice-Style):
     [Chip] [Artikel-fluid] [Menge] [Einheit] [Preis] [Steuer] [Total] [Actions]
   Auf engen Containern wechselt das Pricing-Block in einen 2nd-Row-Wrap.
   Beschreibungs-Sub-Row ist eigene Komponente unter dem Header. */
/* 2026-04-29 Composer-Row-Iter2 (Lexoffice-Style row):
   Die Hauptzeile bleibt visuell flach: Chip, Artikel, Pricing-Gruppe, Total
   und Actions sitzen ohne Card-/Block-Frame in einer Row. Der Pricing-Wrapper
   bleibt bewusst als echte Grid-Box erhalten, damit role="group" + aria-labelledby
   für Screenreader nicht durch display:contents verloren gehen. */
.inv3-line-head{
  display:grid;
  /* 2026-04-29 Iter4: Tax-Pill aus Hauptzeile rausgelöst (jetzt im Total-Cluster).
     Hauptgrid hat 7 Spalten statt 8 — die freigewordenen ~98 px (88+10gap) gehen
     dem Artikel zu. Min für Artikel auf 220 hochgesetzt für mehr Wuchs-Headroom.
     User-Feedback: „Artikel passt nicht vollständig rein. Wir haben einen riesigen
     Einzelpreis-Nettofeld… aber Leistung oder Produkt passt nicht." */
  grid-template-columns:
    40px                  /* chip — kompakter Nummern-Anker */
    minmax(200px,1fr)     /* name (Artikel) — Hauptfeld, fluid; bekommt die meiste Breite */
    auto                  /* pricing group (Menge · Einheit · Einzelpreis — intern minmax) */
    minmax(150px,180px)   /* total — Gesamtbetrag ruhig, nie gequetscht (Brief: ~180) */
    auto;                 /* actions cluster */
  grid-template-areas:"chip name pricing total actions";
  gap:10px;
  align-items:end;
  border-bottom:none;
  padding:0 0 0 10px;     /* Atemluft links zwischen Card-Edge und Chip */
  min-height:auto;
}
.inv3-line-head>.inv3-line-chip{grid-area:chip;}
.inv3-line-head>.inv3-line-cell--name,
.inv3-line-head>.inv3-line-name-stack,
.inv3-line-head>.inv3-line-name-cell{grid-area:name;}
.inv3-line-head>.inv3-line-pricing-group{grid-area:pricing;}
.inv3-line-head>.inv3-line-total{grid-area:total;}
.inv3-line-head>.inv3-line-actions{grid-area:actions;}

/* ─── Position-Chip (statt „Pos. 1"-Text-Label) ────────────────────────────
   Runde 28×28-Pill mit der Position-Zahl. Aktive Position = gold-Tint +
   gold-Color (gleicher Active-Indicator wie der Tile-Tick im Payment-Toggle).
   Off-State = dezent grau. Lexoffice-Look. */
.inv3-line-chip{
  display:inline-flex;
  align-items:center;justify-content:center;
  width:28px;height:28px;
  border-radius:50%;
  background:rgba(var(--text-rgba-base),.06);
  color:rgba(var(--text-rgba-base),.7);
  font-size:13px;
  font-weight:var(--fw-semibold);
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
  /* Padding-Bottom für visuelle Mitte-Ausrichtung mit Field-Labels darüber
     (chip steht in derselben Row wie die Pricing-Inputs deren Labels über
     ihnen sitzen — der Chip hat kein Label, daher Spacing-Korrektur). */
  margin-bottom:4px;
  transition:background var(--tr-fast), color var(--tr-fast);
}
.inv3-line[data-active="1"] .inv3-line-chip{
  background:rgba(232,184,75,.16);
  color:var(--accent);
}

/* ─── Generic Field-Wrapper mit Floating-Label ─────────────────────────────
   Lexoffice-Convention: jedes Eingabefeld hat ein kleines Label OBEN, dann das
   Input darunter. Statt der alten inline-Label-Variante. */
.inv3-line-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.inv3-line-field-label{
  font-size:.72rem;
  text-transform:none;
  letter-spacing:.01em;
  color:var(--text2);
  font-weight:var(--fw-medium);
  line-height:1.2;
  padding-left:2px;
}
.inv3-line-field--name{flex:1 1 auto;min-width:180px;}

/* Title-Input (Artikel/Leistung) — primäres Eingabefeld, breiter + prominenter
   als die Pricing-Inputs. */
.inv3-line-title-input{
  width:100%;
  font-weight:var(--fw-semibold);
  font-size:.95rem;
  background:rgba(var(--text-rgba-base),.04);
  border:1px solid transparent;
  /* 2026-04-29 Iter2: padding angepasst auf einheitliche 40 px Field-Höhe (statt
     vorher 10/14 = ~40 px effektiv aber inkonsistent mit Pricing-Inputs). */
  height:40px;
  padding:0 14px;
  line-height:1;
  border-radius:8px;
  transition:background var(--tr-fast), border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.inv3-line-title-input:hover{
  background:rgba(var(--text-rgba-base),.06);
  border-color:rgba(var(--surface-rgba-base),.12);
}
.inv3-line-title-input:focus{
  background:rgba(var(--text-rgba-base),.06);
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(232,184,75,.16);
  outline:none;
}
.inv3-line-title-input::placeholder{font-weight:400;color:rgba(var(--text-rgba-base),.5);}

/* 2026-04-29 Iter2: Pricing-A11y-Wrapper bleibt eine echte Box. `display:contents`
   wäre visuell praktisch, kann aber in realen Browser/Screenreader-Kombinationen
   den role="group"-Knoten aus dem Accessibility Tree entfernen. Deshalb:
   rahmenloses Grid, keine eigene Card-Optik, aber Semantik bleibt erhalten. */
.inv3-line-pricing-group{
  display:grid;
  /* Ziel-Breiten (Brief): Menge ~104, Einheit ~132–150, Einzelpreis ~148.
     minmax statt fixer px → bei 1366/1440 px kein Quetschen, ruhig + berechenbar. */
  grid-template-columns:minmax(88px,104px) minmax(124px,150px) minmax(120px,148px);
  gap:10px;
  align-items:end;
  min-width:0;
}

/* Pricing-Felder sitzen in der semantischen Pricing-Group, behalten aber
   Floating-Label-Felder mit uniformer Höhe. */
.inv3-line-head .inv3-item-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.inv3-line-head .inv3-item-field-label{
  font-size:.7rem;
  text-transform:none;
  letter-spacing:.01em;
  color:var(--text2);
  font-weight:var(--fw-medium);
  line-height:1.2;
  padding-left:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.inv3-line-head .inv3-item-field .inv-inp{
  background:rgba(var(--text-rgba-base),.03);
  border:1px solid var(--border);
  padding:0 10px;
  border-radius:8px;
  /* Uniforme Field-Höhe für ALLE Pricing-Inputs (User-Wunsch: „Alle Eingabefelder
     in der Hauptzeile gleiche Höhe") */
  height:40px;
  line-height:1;
}
.inv3-line-head .inv3-item-field .inv-inp:focus{
  border-color:var(--accent);
  background:rgba(var(--text-rgba-base),.05);
  outline:none;
  box-shadow:0 0 0 3px rgba(232,184,75,.16);
}
/* Unit-Cell: enthält Select (preset) + custom-Input — beide auf gleiche Höhe. */
.inv3-line-head .inv3-item-field--unit .inv3-item-unit-select,
.inv3-line-head .inv3-item-field--unit .inv3-item-unit-custom{
  height:40px;
}

/* Steuer-Pill: kompakt, runder Border-Radius, dezenter gold-Akzent.
   Vorher war es ein Standard-<select> mit normaler Form-Optik — jetzt sieht
   es im Off-State wie eine kleine Info-Pill aus, im Focus wird der gold-
   Border sichtbar. */
.inv3-line-tax-select{
  appearance:none;-webkit-appearance:none;
  background:rgba(var(--text-rgba-base),.05);
  border:1px solid rgba(var(--surface-rgba-base),.1);
  color:var(--text);
  border-radius:999px;
  /* 2026-04-29 Iter2: einheitliche 40 px Field-Höhe wie alle anderen Inputs. */
  height:40px;
  padding:0 28px 0 14px;
  line-height:1;
  font-size:13px;
  font-weight:var(--fw-semibold);
  cursor:pointer;
  width:100%;
  /* Inline-SVG-Chevron als Background — currentColor lässt sich via SVG
     stroke nicht direkt setzen, daher fester gray. Im Aktiv-Zustand wird der
     Border gold (siehe :focus). */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16' fill='none' stroke='%23999' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  transition:border-color var(--tr-fast), background-color var(--tr-fast), box-shadow var(--tr-fast);
}
.inv3-line-tax-select:hover{
  border-color:rgba(232,184,75,.3);
  background-color:rgba(var(--text-rgba-base),.07);
}
.inv3-line-tax-select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(232,184,75,.16);
  outline:none;
}

/* Description-Sub-Row: über volle Breite UNTER der Hauptzeile.
   2026-04-29 Iter3: Indent angepasst auf header-left-padding (10 px)
   + chip-width (40 px) + grid-gap (10 px) = 60 px → Beschreibung beginnt
   visuell exakt unter dem Artikel-Input. Margin-top knapp, damit die Position
   kompakt bleibt. */
.inv3-line-desc-row{
  margin-top:6px;
  padding-left:60px;
  /* 2026-04-29 Iter5-Bug-Fix: padding-right von 236 px → 12 px reduziert. Vorher
     war die Sub-Row auf die Pricing-Spalten gedeckelt — bei mittleren Containern
     wurde die Beschreibung dadurch ausgeblendet/abgeschnitten und der User dachte,
     es gäbe keine Beschreibungs-Funktion bei Wiederkehrend/Rechnung. Jetzt geht
     die Sub-Row über die volle Restbreite (mit kleinem Padding-Rest), lange
     Beschreibungen können bequem mehrzeilig wachsen. */
  padding-right:12px;
}
.inv3-line-desc-wrap{display:block;}
.inv3-line-desc-wrap[data-desc-open="0"] .inv3-items-desc-input,
.inv3-line-desc-wrap[data-desc-open="0"] .inv3-item-field-counter{display:none;}
.inv3-line-desc-wrap[data-desc-open="1"] .inv3-line-desc-toggle{display:none;}
.inv3-line-desc-toggle{
  background:transparent;
  border:0;
  color:var(--text2);
  font-size:.82rem;
  font-weight:var(--fw-medium);
  padding:4px 0;
  text-align:left;
  cursor:pointer;
  border-radius:4px;
  transition:color .12s ease;
}
.inv3-line-desc-toggle:hover{color:var(--text);}
.inv3-line-desc-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.inv3-line-desc.inv3-items-desc-input{
  width:100%;
  min-height:56px;
  max-height:240px;
  font-size:.88rem;
  line-height:1.5;
  padding:10px 12px;
  border-radius:8px;
  background:rgba(var(--text-rgba-base),.03);
  border:1px solid var(--border);
}
.inv3-line-desc.inv3-items-desc-input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(232,184,75,.16);
  outline:none;
}

/* Migration 077: Pro-Zeile-Inline „+ Rabatt"-Sub-Row.
   Off-State (data-active="0"): nur der gedimmte „+ Rabatt"-Inline-Link sichtbar
   — visuell minimal, identischer Stil wie der „+ Beschreibung"-Toggle daneben.
   On-State (data-active="1"): Input + %-Suffix + €-Vorschau + ✕-Remove als
   kompakte Pill, der „+ Rabatt"-Button verschwindet.
   Beide Zweige stehen IMMER im DOM — CSS togglet nur visibility, damit
   collect-items konsistent aus dem Input liest. */
.inv3-line-discount-row{
  margin-top:4px;
  padding-left:60px;
  /* Analog zur desc-row begrenzt auf die Pricing-Spalten — visuell „bis zur
     Steuer-Pill", nicht über volle Breite bis Total/Actions. */
  padding-right:236px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  min-height:24px;
}
.inv3-line-discount-row[data-active="0"] .inv3-line-discount-active{display:none;}
.inv3-line-discount-row[data-active="1"] .inv3-line-discount-add{display:none;}
.inv3-line-discount-add{
  background:transparent;
  border:0;
  /* Stark gedimmt im Default — User soll's sehen können, aber es soll nicht
     mit dem Total konkurrieren. Hover/focus zieht Aufmerksamkeit. */
  color:rgba(var(--text-rgba-base),.45);
  font-size:.82rem;
  font-weight:var(--fw-medium);
  padding:4px 0;
  text-align:left;
  cursor:pointer;
  border-radius:4px;
  transition:color .12s ease;
}
.inv3-line-discount-add:hover{color:var(--text);}
.inv3-line-discount-add:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.inv3-line-discount-active{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  font-size:.85rem;
}
.inv3-line-discount-label{
  color:var(--text2);
  font-weight:var(--fw-medium);
  font-size:.8rem;
}
.inv3-line-discount-input-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.inv3-line-discount-input{
  /* Kompakt: nur 3-stellig (max 100) plus Komma-Dezimal. Padding-right macht
     Platz für den %-Suffix. */
  width:64px;
  height:32px;
  padding:4px 22px 4px 8px;
  font-size:.85rem;
  text-align:right;
  border-radius:6px;
}
.inv3-line-discount-input.inv-inp-error{
  border-color:var(--red);
  box-shadow:0 0 0 2px rgba(210,46,46,.16);
}
.inv3-line-discount-suffix{
  position:absolute;
  right:8px;
  pointer-events:none;
  color:var(--text2);
  font-size:.82rem;
  font-weight:var(--fw-medium);
}
.inv3-line-discount-amount{
  color:var(--text2);
  font-size:.82rem;
  font-variant-numeric:tabular-nums;
}
.inv3-line-discount-amount:empty{display:none;}
.inv3-line-discount-remove{
  background:transparent;
  border:0;
  color:rgba(var(--text-rgba-base),.5);
  cursor:pointer;
  width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
  transition:color .12s ease, background .12s ease;
}
.inv3-line-discount-remove:hover{
  color:var(--text);
  background:rgba(var(--text-rgba-base),.06);
}
.inv3-line-discount-remove:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.inv3-line-discount-error{
  color:var(--red);
  font-size:.78rem;
  flex-basis:100%;
}
.inv3-line-discount-error[hidden]{display:none;}

/* Total-Cluster: rechtsbündig, fett, der visuelle Anker pro Zeile.
   2026-04-29 Iter4: Tax-Pill ist jetzt UNTER dem Total integriert (war vorher
   eigene Spalte im Hauptgrid). Cluster nimmt Brutto + USt-Pill Stack auf,
   ohne fixe Höhe. */
.inv3-line-total.inv3-item-card-summary{
  align-items:flex-end;
  text-align:right;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:4px;
  height:auto;
  padding-left:8px;
  white-space:nowrap;
}
.inv3-line-total-gross{
  font-size:1.1rem;
  font-weight:var(--fw-heavy);
  font-variant-numeric:tabular-nums;
  color:var(--text-strong);
  letter-spacing:-.01em;
  line-height:1;
}
/* Tax-Pill IM Total-Cluster (Iter4): kompakter (24 px statt Hauptzeile 40 px),
   dezenter, Floating-Label „Steuersatz" weg. Im Mobile auf 32 px Touch-Target. */
.inv3-line-total .inv3-item-field--tax{
  display:flex;
  align-items:flex-end;
  width:auto;
  min-width:0;
  margin-top:2px;
}
.inv3-line-total .inv3-item-field--tax .inv3-item-field-label{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.inv3-line-total .inv3-line-tax-select{
  height:24px;
  padding:0 22px 0 10px;
  font-size:11.5px;
  background-color:transparent;
  border-color:rgba(var(--text-rgba-base),.18);
  width:auto;
}
.inv3-line-total .inv3-line-tax-select:hover{
  background-color:rgba(var(--text-rgba-base),.04);
  border-color:rgba(232,184,75,.4);
}
/* .inv3-line-total-meta entfernt (Stufe 3, Bereich D): Inline-Meta verursachte
   Doppelsteuersatz + Crowding mit Steuersatz-Select. Steuer-Info lebt jetzt
   ausschließlich im Steuersatz-Select 1 Spalte links. */

/* Actions: Ghost-Buttons für ⋯ + Trash. Trash hover bekommt rote Tönung
   (destructive Affordance, Lexoffice-Convention). */
.inv3-line-actions{display:flex;align-items:flex-end;gap:4px;padding-bottom:6px;}
.inv3-line-actions .inv3-item-iconbtn{
  border-color:transparent;
  background:transparent;
  min-width:32px;
  min-height:32px;
}
.inv3-line-actions .inv3-item-iconbtn:hover{
  background:rgba(var(--surface-rgba-base),.06);
  border-color:transparent;
  transform:none;
}
.inv3-line-trash{color:rgba(var(--text-rgba-base),.55);}
.inv3-line-trash:hover{
  background:rgba(248,113,113,.12) !important;
  color:var(--red) !important;
}

/* Body wird im Composer nicht mehr genutzt — Element bleibt für Backward-Compat-Tests */
.inv3-line .inv3-item-card-body{display:none;}

/* 2026-04-29 Iter3 — Visual Collapsed-State.
   User-Bug-Report: „Klick auf Aufklappen/Einklappen ändert visuell nichts."
   Vorher hatte data-collapsed="1" im Composer KEINE sichtbare Wirkung
   (das einzige collapsed-CSS war .inv3-item-card-body display:none, aber
   der Body ist im Composer eh hidden). Jetzt im collapsed-State:
   - Pricing-Cells (qty/unit/price/tax) verstecken
   - Description-Sub-Row verstecken
   - Field-Labels verstecken (Read-Only-Look)
   - Title-Input read-only-styled (transparent BG + Border, klickbar bleibt für
     Tab-Order, aber visuell ruhiger)
   - Grid-Areas neu definieren damit nur chip/name/total/actions Platz nehmen
   So entsteht eine echte Read-Only-Summary-Zeile. */
.inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-head{
  grid-template-columns:40px minmax(0,1fr) auto auto;
  grid-template-areas:"chip name total actions";
  align-items:center;
}
.inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-pricing-group,
.inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-total .inv3-item-field--tax,
.inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-desc-row,
.inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-discount-row{
  display:none;
}
.inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-field-label{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-title-input{
  background:transparent;
  border:1px solid transparent;
  font-weight:var(--fw-semibold);
  cursor:pointer;
  /* 2026-04-29 Iter5-Bug-Fix: Im collapsed-State hat das Parent-Grid name-Cell
     auf minmax(0,1fr) gesetzt — aber <input> hat eine intrinsische
     min-content-size aus dem Placeholder-Text und respektiert das nicht ohne
     min-width:0. Folge: bei knappen Containern (Mobile, Sidebar) lief der
     Title-Text über die Total/Actions-Spalten. Fix: min-width:0 + ellipsis. */
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* Cell muss ebenfalls min-width:0 haben damit das minmax(0,1fr) wirksam ist */
.inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-cell--name,
.inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-field--name{
  min-width:0;
  overflow:hidden;
}
/* Hover über die collapsed Card (außerhalb der Inputs) signalisiert "klick öffnet" */
.inv3-items-builder--single-active .inv3-line.inv3-item-card[data-collapsed="1"]:hover .inv3-line-title-input{
  background:rgba(var(--text-rgba-base),.025);
}

/* Globaler Summary-Block: prominent, rechtsbündig, Brutto fett */
.inv3-line-summary{
  margin-top:24px;
  padding:18px 24px;
  background:rgba(var(--text-rgba-base),.04);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  display:grid;
  gap:8px;
  max-width:480px;
  margin-left:auto;
  margin-right:0;
}
.inv3-line-summary-row{display:flex;justify-content:space-between;align-items:baseline;gap:24px;}
.inv3-line-summary-row span{color:var(--text2);font-size:.9rem;}
.inv3-line-summary-row strong{font-variant-numeric:tabular-nums;font-size:.95rem;color:var(--text);}
.inv3-line-summary-row--ku span{font-style:italic;color:var(--text2);}
.inv3-line-summary-row--gross{
  padding-top:10px;
  border-top:1px solid var(--border);
  margin-top:4px;
  align-items:baseline;
}
.inv3-line-summary-row--gross span{
  color:var(--text);
  font-weight:600;
  font-size:1rem;
}
.inv3-line-summary-row--gross strong{
  font-size:1.5rem;
  font-weight:700;
  color:var(--text-strong);
  letter-spacing:-.01em;
}

/* 2026-04-29 Iter4 Container-Queries: Tax sitzt im Total-Cluster; die
   semantische Pricing-Group enthält nur Menge, Einheit und Einzelpreis. */
@container (max-width: 1023px){
  /* Tablet-wide: Pricing wandert in Row 2 als 3-col-Grid. Total bleibt rechts
     in Row 1 als visueller Anker; Actions daneben. */
  .inv3-line-head{
    grid-template-columns:40px minmax(220px,1fr) minmax(96px,auto) auto;
    grid-template-areas:
      "chip name    total actions"
      "chip pricing pricing actions";
    gap:8px 10px;
  }
  .inv3-line-pricing-group{grid-template-columns:repeat(3,minmax(0,1fr));}
  .inv3-line-desc-row{padding-right:0;}
  .inv3-line-discount-row{padding-right:0;}
}
@container (max-width: 679px){
  /* Schmaler Tablet: Pricing als 2-col Grid (Menge|Einheit / Preis dann full-width).
     Actions bleiben in derselben Zeile wie Total (Bug-Fix: vorher stand "actions"
     neben "name" in Zeile 1, "total" aber erst in Zeile 3 — Kebab-Menü + Chevron
     hingen optisch losgelöst vom Betrag, den sie eigentlich bedienen). */
  .inv3-line-head{
    grid-template-columns:40px minmax(0,1fr) auto;
    grid-template-areas:
      "chip name    name"
      "chip pricing pricing"
      "chip total   actions";
    gap:6px 10px;
  }
  .inv3-line-pricing-group{grid-template-columns:repeat(2,minmax(0,1fr));}
  .inv3-line-head>.inv3-line-total{justify-content:flex-start;}
  .inv3-line-head>.inv3-line-actions{align-self:center;}
}
@container (max-width: 479px){
  /* Mobile: alles stackt vertikal mit Chip als linker Anker. Iter4-Bug-Fix:
     align-self:start damit Chip OBEN beim Artikel sitzt (nicht unten bei Actions
     wegen geerbtem align-items:end). */
  .inv3-line-head{
    grid-template-columns:40px 1fr;
    grid-template-areas:
      "chip name"
      "chip pricing"
      "chip total"
      "chip actions";
    gap:6px 10px;
  }
  .inv3-line-pricing-group{grid-template-columns:1fr;}
  .inv3-line-head>.inv3-line-chip{
    align-self:start;
    margin-top:30px;     /* visuell auf Höhe des Artikel-Inputs (Floating-Label oben + Input ~38) */
  }
  .inv3-line-head>.inv3-line-total{
    height:auto;
    padding-top:8px;
    padding-left:0;
    border-top:1px solid rgba(var(--surface-rgba-base),.07);
    margin-top:4px;
    align-items:flex-end;
  }
  .inv3-line-actions{justify-content:flex-end;padding-top:4px;}
  .inv3-line-desc-row{padding-left:0;padding-right:0;}
  .inv3-line.inv3-item-card[data-discount-enabled="1"][data-discount-active="0"][data-desc-open="0"]{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    column-gap:14px;
    align-items:center;
  }
  .inv3-line.inv3-item-card[data-discount-enabled="1"][data-discount-active="0"][data-desc-open="0"]>.inv3-line-head,
  .inv3-line.inv3-item-card[data-discount-enabled="1"][data-discount-active="0"][data-desc-open="0"]>.inv3-item-card-body{
    grid-column:1/-1;
  }
  .inv3-line.inv3-item-card[data-discount-enabled="1"][data-discount-active="0"][data-desc-open="0"]>.inv3-line-discount-row,
  .inv3-line.inv3-item-card[data-discount-enabled="1"][data-discount-active="0"][data-desc-open="0"]>.inv3-line-desc-row{
    margin-top:8px;
    padding:0;
    justify-self:start;
  }
  .inv3-line.inv3-item-card[data-discount-enabled="1"][data-discount-active="0"][data-desc-open="0"]>.inv3-line-discount-row{grid-column:1;}
  .inv3-line.inv3-item-card[data-discount-enabled="1"][data-discount-active="0"][data-desc-open="0"]>.inv3-line-desc-row{grid-column:2;}
  .inv3-line.inv3-item-card[data-discount-enabled="1"][data-discount-active="0"][data-desc-open="0"] .inv3-line-discount-add,
  .inv3-line.inv3-item-card[data-discount-enabled="1"][data-discount-active="0"][data-desc-open="0"] .inv3-line-desc-toggle{
    min-height:36px;
    padding:6px 10px;
  }
  /* Iter4-Bug-Fix Mobile-Collapsed: vermeidet Overlap zwischen Title und Total
     (vorher kollidierte Total visuell mit dem Title-Text bei sehr engen Containern). */
  .inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-head{
    grid-template-columns:40px minmax(0,1fr) auto;
    grid-template-areas:
      "chip name  actions"
      "chip total actions";
    align-items:center;
    gap:4px 10px;
  }
  .inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-head>.inv3-line-chip{
    margin-top:0;
  }
  .inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-head>.inv3-line-total{
    text-align:right;
    padding:0;
    border-top:none;
    margin-top:0;
    height:auto;
    font-size:.85rem;
    color:var(--text2);
    align-items:flex-end;
  }
  .inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-total .inv3-line-total-gross{
    font-size:.95rem;
  }
  /* Mobile: Discount-Sub-Row stackt natürlich. Padding wegnehmen, damit
     Pill und „+ Rabatt"-Link bündig zur Card-Edge sitzen wie die Desc-Row. */
  .inv3-line-discount-row{padding-left:0;padding-right:0;}
}

/* Touch-Targets + iOS-Auto-Zoom-Verhinderung */
@media (pointer:coarse){
  .inv3-line .inv-inp{min-height:44px;}
  .inv3-line-actions .inv3-item-iconbtn{min-height:44px;min-width:44px;}
  .inv3-line-actions .inv3-item-collapse{min-height:44px;min-width:44px;}
  .inv3-line-desc-toggle{min-height:36px;padding:6px 10px;}
  /* 2026-04-29 Iter4: iOS Safari zoomt bei Inputs mit font-size < 16px rein.
     Es gibt einen globalen Override in Z. ~2350 (.inv-inp{font-size:16px}),
     aber die Composer-spezifischen Selektoren haben gleiche oder höhere
     Specificity und kommen LATER im File → gewinnen. Hier explizit erzwingen
     für alle Composer-Inputs (cross-form: wirkt in invoices/quotes/recurrences
     gleichermaßen, da derselbe shared Helper). */
  .inv3-line-title-input,
  .inv3-line-tax-select,
  .inv3-line-head .inv3-item-field .inv-inp,
  .inv3-line-head .inv3-item-field--unit .inv3-item-unit-select,
  .inv3-line-head .inv3-item-field--unit .inv3-item-unit-custom,
  .inv3-line-desc.inv3-items-desc-input{
    font-size:16px;
  }
  /* Tax-Pill im Total-Cluster braucht ebenfalls 16px (sonst zoomt iOS) +
     größeres Touch-Target auf Mobile (nicht die kompakten 24px vom Desktop). */
  .inv3-line-total .inv3-line-tax-select{
    height:36px;
    font-size:16px;
    padding:0 26px 0 12px;
  }
}

/* Light-Mode-Patches */
body.light .inv3-line.inv3-item-card{background:transparent;border-bottom-color:rgba(var(--ink-rgba-base),.08);}
/* 2026-04-28 Composer-Refinement Light-Mode-Pendant: Tint .025 (statt .035),
   Stripe-Opacity .7 bleibt (Light braucht etwas mehr Sichtbarkeit). */
body.light .inv3-items-builder--single-active .inv3-line.inv3-item-card[data-active="1"]{background:rgba(var(--ink-rgba-base),.025);}
/* 2026-04-29 Composer-Row-Redesign: Stripe-::before entfernt, Active-State
   kommt jetzt vom Chip. Light-Mode bleibt nur Tint-Background. */
body.light .inv3-items-builder--single-active .inv3-line.inv3-item-card:not([data-active="1"]):hover{background:rgba(var(--ink-rgba-base),.014);}
/* Position-Chip Light-Mode */
body.light .inv3-line-chip{background:rgba(var(--ink-rgba-base),.05);color:rgba(var(--ink-rgba-base),.7);}
body.light .inv3-line[data-active="1"] .inv3-line-chip{background:rgba(232,184,75,.18);color:var(--accent2);}
/* Floating-Field-Label Light-Mode */
body.light .inv3-line-field-label{color:rgba(var(--ink-rgba-base),.62);}
/* Steuer-Pill Light-Mode */
body.light .inv3-line-tax-select{
  background-color:rgba(var(--ink-rgba-base),.05);
  border-color:rgba(var(--ink-rgba-base),.1);
  color:rgba(var(--ink-rgba-base),.85);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16' fill='none' stroke='%2366707f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}
body.light .inv3-line-tax-select:hover{background-color:rgba(var(--ink-rgba-base),.07);border-color:rgba(232,184,75,.4);}
body.light .inv3-line-tax-select:focus{border-color:rgba(232,184,75,.55);box-shadow:0 0 0 3px rgba(232,184,75,.18);}
/* Description-Sub-Row Light-Mode */
body.light .inv3-line-desc.inv3-items-desc-input{background:rgba(var(--ink-rgba-base),.025);border-color:rgba(var(--ink-rgba-base),.1);}
body.light .inv3-line-desc.inv3-items-desc-input:focus{background:rgba(var(--ink-rgba-base),.04);border-color:rgba(232,184,75,.5);box-shadow:0 0 0 3px rgba(232,184,75,.18);}
/* Trash-Hover Light-Mode (sanfteres Rot auf hellem BG) */
body.light .inv3-line-trash:hover{background:rgba(248,113,113,.1) !important;color:var(--red) !important;}
/* 2026-04-29 Iter3 Light-Mode-Pendant zu Collapsed-Hover-Highlight */
body.light .inv3-items-builder--single-active .inv3-line.inv3-item-card[data-collapsed="1"]:hover .inv3-line-title-input{background:rgba(var(--ink-rgba-base),.025);}
/* 2026-04-28 Composer-Refinement Light-Mode-Pendant: spiegelt den neuen
   Hint-Background-Look des Title-Inputs. Default: heller Tint, Hover: stärker,
   Focus: gold-akzent + Aura. */
body.light .inv3-line-title-input{background:rgba(var(--ink-rgba-base),.025);}
body.light .inv3-line-title-input:hover{background:rgba(var(--ink-rgba-base),.04);border-color:rgba(var(--ink-rgba-base),.1);}
body.light .inv3-line-title-input:focus{background:rgba(var(--ink-rgba-base),.04);border-color:rgba(232,184,75,.5);box-shadow:0 0 0 3px rgba(232,184,75,.18);}
body.light .inv3-line-title-input::placeholder{color:rgba(var(--ink-rgba-base),.5);}
body.light .inv3-line-head .inv3-item-field .inv-inp{background:rgba(var(--ink-rgba-base),.025);border-color:rgba(var(--ink-rgba-base),.1);}
body.light .inv3-line-head .inv3-item-field .inv-inp:focus{background:rgba(var(--ink-rgba-base),.04);border-color:rgba(232,184,75,.5);box-shadow:0 0 0 2px rgba(232,184,75,.16);}
body.light .inv3-line-summary{background:rgba(var(--ink-rgba-base),.04);border-color:rgba(var(--ink-rgba-base),.08);}
body.light .inv3-line-summary-row--gross{border-top-color:rgba(var(--ink-rgba-base),.08);}
body.light .inv3-lines-section-title{color:rgba(var(--ink-rgba-base),.92);}
body.light .inv3-lines-section-subtitle{color:rgba(var(--ink-rgba-base),.62);}
body.light .inv3-line-desc-toggle:hover{background:rgba(var(--ink-rgba-base),.04);color:rgba(var(--ink-rgba-base),.9);}

/* Hover-Highlight für Beleg-Picker-Rows.
 * Vorher per document.createElement('style') in public/js/belege.js
 * runtime-injected. Wegen verschärfter CSP (style-src-elem 'self'
 * 'nonce-...' aus commit 1df6a0a) wurde das Inline-Element ohne Nonce
 * blockiert. Statisch im CSS-File hat keinen Nonce-Bedarf. */
.beleg-picker-row:hover{background:var(--bg3);}

/* ===== AfA / Anlageverzeichnis ============================================
   Visual refresh: KPI cards reuse .kpi pattern, sticky filter-bar with tabs,
   side-drawer (right-anchored), mini-progressbar per row, mobile cards.
   Mount point for drawer: #afa-drawer-mount in EUER.html.
   ========================================================================== */
.afa-view{max-width:var(--app-page-max-width-wide,1220px);margin:0 auto;padding:var(--app-page-pad-top,20px) var(--app-page-pad-x,16px) var(--app-page-pad-bottom,80px);}
/* Kein margin-bottom-Override: nutzt die kanonische .app-page-header-Norm
   (20px, _12-page-shell.css), damit der Abstand Überschrift→Inhalt/Empty-State
   pixelgleich zu Fahrten/Kontakten/Belegen ist. */
.afa-subtitle{font-size:12px;color:var(--text3);margin-top:2px;}

/* KPI overrides (project's .kpi-grid pattern, slight tint) */
.afa-kpi-grid{margin-bottom:18px;}
/* AfA-Gesamt ist ein neutraler Ausgabenbetrag, kein Alarmzustand — Standard-
   Ziffernfarbe (.kpi-val Default, _10-shell.css) statt Rot. Rot bleibt für
   überfällig/Fehler reserviert (P2 #13, Review-Fund "Rot-Inflation"). */
.afa-kpi--book .kpi-val{color:var(--accent);}
/* 2026-04-29 Mobile-Residual F-7: KPI-Wert + Einheit (€) bleibt einzeilig.
   Auf 375px sonst Wrap zwischen "1.804,83" und "€" — der NBSP-Patch in
   _afaFmt deckt den Default-Pfad, white-space:nowrap ist die letzte
   Verteidigungslinie falls Container-Breite extrem schmal wird. */
.afa-kpi .kpi-val{white-space:nowrap;}

/* Filter bar (sticky, tabs + actions) */
.afa-filter-bar{padding:0 4px;justify-content:space-between;}
.afa-tabs{display:flex;align-items:center;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;}
.afa-tabs::-webkit-scrollbar{display:none;}
.afa-tab{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;height:32px;background:transparent;border:1px solid transparent;border-radius:var(--radius2,8px);color:var(--text3);font-size:12.5px;font-weight:var(--fw-semibold,600);cursor:pointer;font-family:inherit;transition:background .12s,color .12s,border-color .12s;white-space:nowrap;}
.afa-tab:hover{color:var(--text);background:rgba(232,184,75,.06);}
.afa-tab.is-active{color:var(--accent);background:rgba(232,184,75,.1);border-color:rgba(232,184,75,.25);}
.afa-tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--bg2);color:var(--text3);font-size:10.5px;font-weight:var(--fw-bold,700);line-height:1;}
.afa-tab.is-active .afa-tab-count{background:rgba(232,184,75,.25);color:var(--accent);}
.afa-filter-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}

/* Table */
.afa-table{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.afa-table-empty{padding:40px 20px;text-align:center;}
.afa-table-empty-text{color:var(--text3);font-size:13px;}

.afa-tbl-head{display:grid;grid-template-columns:minmax(180px,2fr) 110px 130px 1fr 110px 140px;gap:0;padding:11px 16px;font-size:11px;font-weight:var(--fw-semibold,600);text-transform:uppercase;letter-spacing:.04em;color:var(--text3);border-bottom:1px solid var(--border);background:var(--bg2);}
.afa-tbl-head .afa-cell-cost,.afa-tbl-head .afa-cell-afa{text-align:right;}
.afa-tbl-head .afa-cell-status,.afa-tbl-head .afa-cell-actions{text-align:center;}

.afa-row{border-bottom:1px solid var(--border);position:relative;display:grid;grid-template-columns:1fr 140px;}
.afa-row:last-child{border-bottom:none;}
.afa-row.is-open{background:rgba(232,184,75,.04);}
.afa-row.is-open::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);}

.afa-row-main{display:grid;grid-template-columns:minmax(180px,2fr) 110px 130px 1fr 110px;gap:0;padding:14px 16px;font-size:13px;text-align:left;background:transparent;border:none;color:inherit;font-family:inherit;cursor:pointer;transition:background .12s;width:100%;}
.afa-row-main:hover{background:var(--bg2);}
.afa-row-main:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}

.afa-cell{display:flex;align-items:center;min-width:0;}
.afa-cell-name{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;}
.afa-name{font-weight:var(--fw-semibold,600);color:var(--text);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.afa-method-chip{display:inline-block;font-size:10.5px;color:var(--text3);background:var(--bg2);padding:2px 8px;border-radius:10px;font-weight:var(--fw-medium,500);}
.afa-cell-date{color:var(--text2);font-size:12.5px;}
.afa-cell-cost{justify-content:flex-end;font-family:var(--mono);color:var(--text);}
.afa-cell-afa{flex-direction:column;align-items:flex-end;justify-content:center;gap:5px;padding-right:14px;}
/* AfA-Betrag ist eine normale Abschreibung, kein Alarm — neutrale
   Ziffernfarbe (P2 #13). */
.afa-afa-amount{font-family:var(--mono);color:var(--text);font-weight:var(--fw-semibold,600);}
.afa-cell-status{justify-content:center;}
.afa-cell-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px;padding:14px 16px 14px 0;}

/* Mini-progressbar */
.afa-progress{width:100%;max-width:120px;height:4px;background:var(--bg2);overflow:hidden;}
.afa-progress-fill{display:block;width:100%;height:100%;}
/* "active" = laufende Abschreibung, kein Alarmzustand — neutraler Ton statt
   Rot (P2 #13). */
.afa-progress--active{color:var(--text3);}
.afa-progress--fully_depreciated{color:var(--accent);}
.afa-progress--disposed{color:var(--text3);opacity:.7;}

/* Status badges */
.afa-badge{display:inline-block;padding:3px 9px;border-radius:11px;font-size:10.5px;font-weight:var(--fw-bold,700);letter-spacing:.02em;}
.afa-badge--active{background:var(--green2,rgba(52,211,153,.12));color:var(--green);}
.afa-badge--disposed{background:rgba(232,184,75,.14);color:var(--accent);}
.afa-badge--done{background:var(--bg2);color:var(--text3);}

/* Action icon-buttons (overrides for icon-only ghost buttons in row) */
.afa-icon-btn{padding:6px 8px;min-width:32px;}
.afa-modal{max-width:540px;}
.afa-life-hint{margin:-2px 0 10px;padding:8px 10px;border-radius:8px;font-size:12.5px;line-height:1.4;background:rgba(232,184,75,.08);border:1px solid rgba(232,184,75,.35);color:var(--accent);}
.afa-notes{resize:vertical;}
.afa-modal-error{margin-top:10px;}
.afa-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;}
.afa-dispose-conditional[hidden]{display:none;}

/* Empty state (no assets at all) */
.afa-empty{text-align:center;padding:80px 20px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);}
.afa-empty-icon{margin-bottom:18px;color:var(--text3);}
.afa-empty-title{font-size:16px;font-weight:var(--fw-semibold,600);color:var(--text);margin-bottom:8px;}
.afa-empty-copy{font-size:12.5px;color:var(--text3);max-width:420px;margin:0 auto 22px;line-height:1.55;}

/* Loading skeleton */
@keyframes afa-shimmer{0%{background-position:-200px 0;}100%{background-position:200px 0;}}
.afa-skel-card,.afa-skel-bar,.afa-skel-row{background:linear-gradient(90deg,var(--bg2) 0%,var(--bg3) 50%,var(--bg2) 100%);background-size:400px 100%;animation:afa-shimmer 1.4s infinite linear;border-radius:var(--radius);}
.afa-skel-card{height:80px;}
.afa-skel-bar{height:44px;margin-bottom:14px;}
.afa-skel-row{height:56px;border-radius:8px;margin-bottom:6px;}
.afa-skel-table{margin-top:12px;}
@media(prefers-reduced-motion:reduce){.afa-skel-card,.afa-skel-bar,.afa-skel-row{animation:none;}}

/* ── Side Drawer ───────────────────────────────────────────────────────── */
.afa-drawer{position:fixed;inset:0;z-index:108;display:block;pointer-events:none;}
.afa-drawer-overlay{position:absolute;inset:0;border:none;background:rgba(6,10,20,0);transition:background .22s ease;cursor:pointer;padding:0;pointer-events:auto;}
.afa-drawer.is-open .afa-drawer-overlay{background:rgba(6,10,20,.55);}
.afa-drawer-panel{position:absolute;top:20px;right:20px;bottom:20px;width:min(560px,calc(100vw - 40px));display:flex;flex-direction:column;border-radius:var(--radius-lg,16px);border:1px solid var(--border);background:var(--card);box-shadow:0 28px 64px rgba(0,0,0,.42);overflow:hidden;transform:translateX(calc(100% + 24px));opacity:0;transition:transform .22s cubic-bezier(.2,.6,.2,1),opacity .22s ease;pointer-events:auto;}
.afa-drawer.is-open .afa-drawer-panel{transform:translateX(0);opacity:1;}
@media(prefers-reduced-motion:reduce){.afa-drawer-overlay,.afa-drawer-panel{transition:none;}}

.afa-drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid var(--border);}
.afa-drawer-head-copy{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1;}
.afa-drawer-eyebrow{font-size:10px;font-weight:var(--fw-bold,700);letter-spacing:.1em;text-transform:uppercase;color:var(--text3);}
#afa-drawer-title{font-size:18px;font-weight:var(--fw-semibold,600);color:var(--text);line-height:1.3;word-break:break-word;}
.afa-drawer-status{display:flex;align-items:center;gap:8px;}
.afa-drawer-close{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius2,8px);background:transparent;border:1px solid transparent;color:var(--text3);cursor:pointer;font-family:inherit;flex-shrink:0;transition:background .12s,color .12s,border-color .12s;}
.afa-drawer-close:hover{background:var(--bg2);color:var(--text);border-color:var(--border);}
.afa-drawer-close:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}

.afa-drawer-body{flex:1;min-height:0;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:18px;}

.afa-drawer-section{display:flex;flex-direction:column;gap:8px;}
.afa-drawer-section-title{font-size:11px;font-weight:var(--fw-bold,700);letter-spacing:.08em;text-transform:uppercase;color:var(--text3);margin:0;}

.afa-drawer-dl{display:grid;grid-template-columns:140px 1fr;gap:6px 14px;font-size:13px;margin:0;}
.afa-drawer-dl dt{color:var(--text3);}
.afa-drawer-dl dd{color:var(--text);margin:0;}

.afa-drawer-schedule{background:var(--bg2);border-radius:var(--radius2,8px);overflow:hidden;border:1px solid var(--border);}
.afa-drawer-schedule-head,.afa-drawer-schedule-row{display:grid;grid-template-columns:60px 1fr 1fr 1fr;gap:0;padding:8px 12px;font-size:11.5px;}
.afa-drawer-schedule-head{font-weight:var(--fw-bold,700);color:var(--text3);text-transform:uppercase;letter-spacing:.04em;background:var(--bg3);border-bottom:1px solid var(--border);}
.afa-drawer-schedule-head>div:not(:first-child),.afa-drawer-schedule-row>div:not(:first-child){text-align:right;}
.afa-drawer-schedule-row{color:var(--text2);border-bottom:1px solid var(--border);}
.afa-drawer-schedule-row:last-child{border-bottom:none;}
.afa-drawer-schedule-row.is-current{background:rgba(232,184,75,.06);color:var(--text);font-weight:var(--fw-semibold,600);}
.afa-mono{font-family:var(--mono);}
/* Jahres-AfA-Betrag im Abschreibungsverlauf ist neutral, kein Alarm (P2 #13).
   Klassenname bleibt (afa.js referenziert ihn), nur der Ton ändert sich. */
.afa-mono--red{color:var(--text);}

.afa-drawer-note{padding:10px 12px;background:var(--bg2);border-left:3px solid var(--accent);border-radius:0 var(--radius2,8px) var(--radius2,8px) 0;font-size:12px;color:var(--text2);line-height:1.5;}

.afa-drawer-notes{font-size:13px;color:var(--text2);line-height:1.55;white-space:pre-wrap;word-break:break-word;}

.afa-drawer-foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--border);background:var(--bg2);}

body.afa-drawer-open{overflow:hidden;}

/* Mobile: drawer fullscreen */
@media(max-width:720px){
  .afa-drawer-panel{top:0;right:0;bottom:0;left:0;width:100vw;border-radius:0;border:none;}
  .afa-drawer-panel{transform:translateX(100%);}
  .afa-drawer.is-open .afa-drawer-panel{transform:translateX(0);}
}

/* Mobile-Card-Layout for the table (< 640px) */
@media(max-width:640px){
  .afa-view{padding:16px 12px;}
  .afa-tbl-head{display:none;}
  .afa-row{grid-template-columns:1fr;}
  .afa-row-main{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name status" "meta meta" "afa cost";gap:10px 12px;padding:14px 14px;}
  .afa-cell-name{grid-area:name;}
  .afa-cell-status{grid-area:status;justify-self:end;}
  .afa-cell-date{grid-area:meta;font-size:11.5px;color:var(--text3);}
  .afa-cell-date::before{content:"Anschaffung: ";color:var(--text3);}
  .afa-cell-cost{grid-area:cost;justify-content:flex-end;font-size:12.5px;}
  .afa-cell-cost::before{content:"Wert ";color:var(--text3);font-family:var(--font);font-weight:var(--fw-medium,500);font-size:11.5px;margin-right:6px;}
  .afa-cell-afa{grid-area:afa;align-items:flex-start;padding-right:0;}
  .afa-progress{max-width:160px;}
  .afa-cell-actions{padding:8px 14px 14px;justify-content:flex-end;border-top:1px dashed var(--border);}
  .afa-icon-btn{width:44px;height:44px;min-width:44px;padding:0;justify-content:center;}
  .afa-filter-bar{flex-direction:column;align-items:stretch;gap:10px;padding:8px 4px;height:auto;}
  .afa-filter-actions{justify-content:flex-end;}
}

/* Light-Mode-Patches */
body.light .afa-tab.is-active{background:rgba(232,184,75,.16);border-color:rgba(232,184,75,.4);}
body.light .afa-row.is-open{background:rgba(232,184,75,.08);}
body.light .afa-row-main:hover{background:rgba(var(--ink-rgba-base),.03);}
body.light .afa-method-chip{background:rgba(var(--ink-rgba-base),.04);color:rgba(var(--ink-rgba-base),.65);}
body.light .afa-tab-count{background:rgba(var(--ink-rgba-base),.06);}
body.light .afa-progress{background:rgba(var(--ink-rgba-base),.06);}
body.light .afa-drawer-panel{background:white;border-color:rgba(var(--ink-rgba-base),.08);box-shadow:0 28px 64px rgba(var(--ink-rgba-base),.18);}
body.light .afa-drawer-schedule{background:rgba(var(--ink-rgba-base),.03);border-color:rgba(var(--ink-rgba-base),.08);}
body.light .afa-drawer-schedule-head{background:rgba(var(--ink-rgba-base),.05);}
body.light .afa-drawer-foot{background:rgba(var(--ink-rgba-base),.03);}
body.light .afa-drawer-note{background:rgba(232,184,75,.06);}
body.light .afa-drawer-overlay{background:rgba(var(--surface-solid-rgba-base,255,255,255),0);}
body.light .afa-drawer.is-open .afa-drawer-overlay{background:rgba(11,18,34,.32);}
body.light .afa-skel-card,body.light .afa-skel-bar,body.light .afa-skel-row{background:linear-gradient(90deg,rgba(var(--ink-rgba-base),.04) 0%,rgba(var(--ink-rgba-base),.08) 50%,rgba(var(--ink-rgba-base),.04) 100%);background-size:400px 100%;}

/* ===== Fahrten / Kilometerpauschale ======================================= */
.trips-view{max-width:var(--app-page-max-width,1180px);margin:0 auto;padding:var(--app-page-pad-top,20px) var(--app-page-pad-x,16px) var(--app-page-pad-bottom,80px);}
.trips-view.app-page--wide{max-width:var(--app-page-max-width-wide,1220px);}
/* Layout (flex/gap) und margin-bottom kommen aus der kanonischen
   .app-page-header-Norm (_12-page-shell.css, 20px) — kein eigener Override,
   damit der Abstand Überschrift→Inhalt/Empty-State pixelgleich zu
   Anlageverzeichnis/Kontakten/Belegen ist. */
.trips-subtitle{font-size:12px;color:var(--text3);margin-top:2px;}
.trips-header-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.trips-intro{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;margin-bottom:10px;font-size:13px;color:var(--text2);}
.trips-intro strong{color:var(--text);font-weight:var(--fw-semibold);}
.trips-note{border:1px solid rgba(232,184,75,.18);background:rgba(232,184,75,.055);color:var(--text2);border-radius:8px;padding:9px 12px;font-size:12px;line-height:1.45;margin-bottom:16px;}
.trips-kpi-grid{margin-bottom:16px;}
.trips-kpi .kpi-val{white-space:nowrap;}
/* Kilometerpauschale ist automatisch gebucht — kein Alarmzustand, daher
   Standard-Ziffernfarbe statt Rot (P2 #13, Review-Fund "Rot-Inflation"). */
.trips-vehicles{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.trips-section-title{font-size:11px;font-weight:var(--fw-bold);letter-spacing:.08em;text-transform:uppercase;color:var(--text3);margin-right:2px;}
.trips-vehicle-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--card);border-radius:8px;padding:6px 7px 6px 10px;font-size:12.5px;color:var(--text2);line-height:1;}
.trips-vehicle-pill strong{font-weight:var(--fw-semibold);color:var(--text);}
.trips-vehicle-pill em{font-style:normal;color:var(--text3);margin-left:4px;}
.trips-vehicle-actions{display:inline-flex;align-items:center;gap:2px;}
.trips-mini-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--text3);cursor:pointer;}
.trips-mini-btn:hover{background:var(--bg2);color:var(--text);border-color:var(--border);}
.trips-mini-btn--danger:hover{color:var(--red);border-color:rgba(248,113,113,.22);background:rgba(248,113,113,.08);}
.trips-icon-btn,.trips-mini-btn{line-height:0;}
.trips-icon-btn svg,.trips-mini-btn svg{display:block;flex:0 0 auto;}
.trips-delete-btn .trips-delete-svg,.trips-vehicle-delete-btn .trips-delete-svg{width:15px;height:15px;}
.trips-table{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.trips-tbl-head{display:grid;grid-template-columns:108px minmax(170px,1.5fr) minmax(140px,1fr) minmax(170px,1.1fr) 90px 120px 88px;gap:0;padding:11px 14px;font-size:11px;font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.04em;color:var(--text3);border-bottom:1px solid var(--border);background:var(--bg2);}
.trips-row{display:grid;grid-template-columns:108px minmax(170px,1.5fr) minmax(140px,1fr) minmax(170px,1.1fr) 90px 120px 88px;gap:0;padding:13px 14px;border-bottom:1px solid var(--border);font-size:13px;align-items:center;}
.trips-row:last-child{border-bottom:none;}
.trips-row:hover{background:rgba(232,184,75,.035);}
.trips-cell{min-width:0;display:flex;align-items:center;gap:6px;}
.trips-cell-route,.trips-cell-vehicle,.trips-cell-purpose{flex-direction:column;align-items:flex-start;gap:3px;}
.trips-cell-route strong{font-weight:var(--fw-semibold);color:var(--text);line-height:1.35;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.trips-cell-date{font-family:var(--mono);color:var(--text2);font-size:12.5px;}
.trips-muted{font-size:11.5px;color:var(--text3);line-height:1.3;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.trips-chip{display:inline-flex;align-items:center;border:1px solid rgba(96,165,250,.18);background:rgba(96,165,250,.08);color:var(--text2);border-radius:7px;padding:2px 6px;font-size:10.5px;font-weight:var(--fw-semibold);}
.trips-num{justify-content:flex-end;text-align:right;font-family:var(--mono);white-space:nowrap;}
.trips-cell-amount{color:var(--text);font-weight:var(--fw-semibold);}
.trips-cell-actions{justify-content:flex-end;gap:4px;}
.trips-icon-btn{min-width:32px;padding:6px 8px;}
.trips-empty{text-align:center;padding:64px 20px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);}
.trips-empty-icon{color:var(--text3);margin-bottom:16px;}
.trips-empty-title{font-size:16px;font-weight:var(--fw-semibold);color:var(--text);margin-bottom:8px;}
.trips-empty-copy{font-size:12.5px;color:var(--text3);max-width:500px;margin:0 auto 20px;line-height:1.55;}
@keyframes trips-shimmer{0%{background-position:-200px 0;}100%{background-position:200px 0;}}
.trips-skel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:16px;}
.trips-skel-card,.trips-skel-row{background:linear-gradient(90deg,var(--bg2) 0%,var(--bg3) 50%,var(--bg2) 100%);background-size:400px 100%;animation:trips-shimmer 1.4s infinite linear;border-radius:var(--radius);}
.trips-skel-card{height:84px;}
.trips-skel-row{height:58px;margin-bottom:7px;}
.trips-form-grid{display:grid;gap:12px;}
.trips-form-grid--two{grid-template-columns:1fr 1fr;}
/* Trip-Date-Picker-Trigger (User-Feedback 2026-05-11): ersetzt nativen
   `<input type="date">` — same Look wie andere Form-Inputs (Border, Radius,
   Padding, Hover/Focus-State), aber Click öffnet unseren `_pickDate` aus
   core.js statt iOS-Wheel/Android-Dropdown. Inhalt: Label + Kalender-Icon. */
.trips-date-trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:8px 12px;min-height:38px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius2,8px);color:var(--text);font-size:13px;font-family:inherit;cursor:pointer;transition:border-color .12s,background .12s;}
.trips-date-trigger:hover{border-color:var(--border2,var(--accent));}
.trips-date-trigger:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(232,184,75,.18);}
.trips-date-trigger__label{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--text);}
.trips-date-trigger__icon{flex:0 0 auto;color:var(--text3);}
.trips-date-trigger:hover .trips-date-trigger__icon{color:var(--text);}
.trips-check{display:flex;align-items:center;gap:8px;margin-top:23px;font-size:13px;color:var(--text2);min-height:38px;}
.trips-check input{width:17px;height:17px;accent-color:var(--accent);}
.trips-preview{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--border);background:var(--bg2);border-radius:8px;padding:10px 12px;margin-top:4px;}
.trips-preview span{font-size:11px;font-weight:var(--fw-bold);letter-spacing:.08em;text-transform:uppercase;color:var(--text3);}
.trips-preview strong{font-family:var(--mono);font-weight:var(--fw-semibold);color:var(--text);}
.trips-modal-error{margin-top:12px;}
.trips-modal-error[hidden]{display:none!important;}
@media(prefers-reduced-motion:reduce){.trips-skel-card,.trips-skel-row{animation:none;}}
@media(max-width:760px){
  .trips-view{padding:16px 12px 72px;}
  .trips-header{flex-direction:column;align-items:stretch;}
  .trips-header-actions{justify-content:flex-start;}
  .trips-intro{flex-direction:column;align-items:flex-start;}
  /* Fahrten KPIs auf Mobile (≤760px): User-Feedback 2026-05-11 — die Default-
     2-Spalten-Logik bei 700px ließ das 3. KPI „Kilometerpauschale" alleine in
     der zweiten Reihe. Auf schmalen Screens stapeln wir stattdessen sauber
     untereinander (1 Spalte). */
  .trips-kpi-grid{grid-template-columns:1fr;gap:8px;}
  .trips-tbl-head{display:none;}
  /* Trip-Card Mobile-Layout (User-Feedback 2026-05-11 v2): Actions sitzen in
     EIGENER 3. Grid-Spalte, die alle 4 Content-Rows spannt — `align-self:
     center` zentriert die Buttons damit durch die volle Card-Höhe statt nur
     zwischen vehicle+purpose. Siehe DESIGN.md §"Card-Actions: mittig zur
     Card-Höhe" — Pattern für alle Listen-Cards mit Edit/Trash-Affordances. */
  .trips-row{
    grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-areas:
      "route   amount  actions"
      "date    km      actions"
      "vehicle vehicle actions"
      "purpose purpose actions";
    gap:6px 12px;
    padding:14px;
    align-items:center;
  }
  .trips-cell-date{grid-area:date;}
  .trips-cell-route{grid-area:route;}
  .trips-cell-vehicle{grid-area:vehicle;}
  .trips-cell-purpose{grid-area:purpose;}
  .trips-cell-km{grid-area:km;justify-self:end;}
  .trips-cell-amount{grid-area:amount;justify-self:end;}
  .trips-cell-actions{grid-area:actions;align-self:center;justify-self:end;gap:6px;display:inline-flex;flex-direction:row;}
  .trips-mini-btn,.trips-icon-btn{width:44px;height:44px;min-width:44px;padding:0;}
  .trips-mini-btn,.trips-icon-btn{display:inline-flex;align-items:center;justify-content:center;}
  .trips-delete-btn .trips-delete-svg,.trips-vehicle-delete-btn .trips-delete-svg{width:18px;height:18px;}
  /* Fahrzeug-Pill Mobile: volle Reihen-Breite, Actions rechts mittig zum
     Fahrzeugnamen — Section-Title über der Pill statt davor inline. */
  .trips-vehicles{flex-direction:column;align-items:stretch;gap:6px;}
  .trips-vehicle-pill{justify-content:space-between;padding:8px 10px;font-size:13px;}
  .trips-vehicle-pill > span:first-child{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center;gap:6px;}
  .trips-vehicle-actions{gap:4px;flex:0 0 auto;align-items:center;}
  .trips-skel-grid{grid-template-columns:1fr;}
  .trips-form-grid--two{grid-template-columns:1fr;}
  .trips-check{margin-top:0;}
}
@media(max-width:820px) and (min-width:761px){
  .trips-tbl-head{display:none;}
  /* Tablet-Range (761–820px): gleiche 3-Spalten-Logik wie Phone-Range, damit
     der Actions-Buttons-Vertikal-Zentrierung-Anchor identisch ist. */
  .trips-row{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"route amount actions" "date km actions" "vehicle vehicle actions" "purpose purpose actions";gap:8px 12px;padding:14px;align-items:center;}
  .trips-cell-date{grid-area:date;}
  .trips-cell-route{grid-area:route;}
  .trips-cell-vehicle{grid-area:vehicle;}
  .trips-cell-purpose{grid-area:purpose;}
  .trips-cell-km{grid-area:km;justify-self:end;}
  .trips-cell-amount{grid-area:amount;justify-self:end;}
  .trips-cell-actions{grid-area:actions;align-self:center;justify-self:end;gap:6px;display:inline-flex;}
  .trips-icon-btn{width:44px;height:44px;min-width:44px;padding:0;}
}
body.light .trips-note{background:rgba(232,184,75,.08);border-color:rgba(232,184,75,.28);}
body.light .trips-row:hover{background:rgba(var(--ink-rgba-base),.03);}
body.light .trips-chip{background:rgba(96,165,250,.1);border-color:rgba(96,165,250,.22);}
body.light .trips-skel-card,body.light .trips-skel-row{background:linear-gradient(90deg,rgba(var(--ink-rgba-base),.04) 0%,rgba(var(--ink-rgba-base),.08) 50%,rgba(var(--ink-rgba-base),.04) 100%);background-size:400px 100%;}

/* AfA-KPI-Cards Mobile-Stack (User-Feedback 2026-05-11): bisher griff
   `.kpi-grid{1fr}` erst ab 480px — auf Tablet/Mid-Phones blieb das
   2-Spalten-Layout mit alleinem 3. Card in zweiter Reihe ungleichmäßig.
   Jetzt analog zum `.trips-kpi-grid` 1-Spalten-Stack ab ≤760px, damit AfA
   und Fahrten design-konsistent sind (User-Wunsch).
   Block-Position bewusst NACH dem trips-`@media(max-width:760px)`-Block,
   damit existierende `tests/trips-responsive.test.js`-Source-Pin-Regex
   (greift den ersten 760-Block) weiter den richtigen Trips-Block erfasst. */
@media(max-width:760px){
  .afa-kpi-grid{grid-template-columns:1fr;gap:8px;}
}

/* Responsive-Audit Hotfixes (2026-04-28)
   These rules sit intentionally at the end of the file: several feature blocks
   define compact desktop controls later than the older mobile foundation block.
   On touch devices the mobile safety rules must win those later selectors. */
.belege-filter-actions{display:flex;align-items:center;gap:8px;margin-left:auto;min-width:0;}

@media(pointer:coarse){
  input,select,textarea,
  .inv-inp,
  .filter-search input,
  .kon-search input,
  .rec-rhythm-inline-input,
  .rec-rhythm-inline-select,
  .payment-identity-field input{
    font-size:16px!important;
  }
  .yr-lbl-btn{min-height:44px;min-width:44px;}
}

/* 2026-04-29 Mobile-Residual F-2: Backstop für iOS-Auto-Zoom auf
   Viewport-Basis. Hintergrund: `pointer:coarse` matcht NUR auf echten
   Touch-Geräten, nicht auf Desktop-DevTools-Mobile-Emulation und nicht
   auf Laptops mit schmaler Fenster-Breite. Audit @ 375px (Devtools)
   fand 12+ Inputs unter 16px, weil pointer:coarse dort nicht triggert.
   Dieser Block mirrort die Schutzregeln auf max-width:768px, damit
   sowohl real-device als auch Emulation den Zoom-Block bekommen.
   Composer-spezifische Selectoren (.inv3-line-tax-select,
   .inv3-item-name etc.) sind hier explizit, weil ihre Component-Level-
   Specificity die globalen input/select/textarea-Regeln gewinnt. */
@media(max-width:768px){
  input,select,textarea,
  .inv-inp,
  .inv-inp-sm,
  .filter-search input,
  .kon-search input,
  .inv2-search-input,
  .rec-rhythm-inline-input,
  .rec-rhythm-inline-select,
  .payment-identity-field input,
  .inv-date-input,
  .inv3-line-title-input,
  .inv3-line-tax-select,
  .inv3-line-head .inv3-item-field .inv-inp,
  .inv3-line-head .inv3-item-field--unit .inv3-item-unit-select,
  .inv3-line-head .inv3-item-field--unit .inv3-item-unit-custom,
  .inv3-line-desc.inv3-items-desc-input,
  .inv3-line-total .inv3-line-tax-select,
  .inv3-payment-preset{
    font-size:16px!important;
  }
}

@media(max-width:768px){
  .app-footer a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:8px 6px;
  }
  /* 2026-04-29 Mobile-Residual F-5: Tap-Targets verschärft. Audit @
     bcf00a08 reportete 19px-Höhe trotz existierender Regel — vermutlich
     wurden Anchors als display:inline gemessen bevor inline-flex griff.
     Defensive Erweiterung: explizit auch .app-footer-links a (Direct-
     Children aus core.js#_renderAppFooter), line-height pinnt die
     Text-Mitte. Separate Regel, damit die Source-Pin-Tests die
     ursprüngliche `.app-footer a{...padding:8px 6px}`-Form weiter
     verifizieren können. */
  .app-footer-links a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:8px 8px;
    line-height:20px;
  }
  .app-footer-links{
    width:100%;
    justify-content:center;
    flex-wrap:nowrap;
    gap:clamp(7px,2.6vw,16px);
  }
  .app-footer-sep{display:none;}
  .app-footer-links a{
    min-width:0;
    padding:8px 1px;
    font-size:clamp(11px,3vw,12px);
    white-space:nowrap;
  }
}

@media(max-width:640px){
  body:has(.inv3-form-mobile-bar) #toasts{
    bottom:calc(var(--inv3-mobile-bar-offset,142px) + 12px + env(safe-area-inset-bottom,0px));
  }
  /* 2026-04-29 Mobile-Residual F-4: Body-Class-Backstop für Toast-Reposition.
     :has() allein war im Live-Build (bcf00a08) nicht zuverlässig — vermutlich
     iOS-Safari-Edge-Case mit dynamisch ge­renderter Mobile-Bar. JS in
     inv3-form.js#syncMobileBarOffset setzt die Klasse synchron mit Bar-
     Visibility, damit die Reposition deterministisch greift. Separate Regel
     statt Komma-Group, weil tests/mobile-responsive-fix-regressions die
     :has()-Form als Source-Pin verifiziert. */
  body.has-composer-action-bar #toasts{
    bottom:calc(var(--inv3-mobile-bar-offset,142px) + 12px + env(safe-area-inset-bottom,0px));
  }
  .sett-sidebar,
  .inv3-suite-nav,
  .inv3-filter-row,
  .afa-tabs,
  .filter-pills{
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  /* 2026-04-29 Mobile-Residual F-6: Edge-Fade als Scroll-Hint für die
     drei horizontalen Tab-Strips (Suite-Nav, Filter-Row, AfA-Tabs). Die
     Strips sind seit dem 2026-04-28-Hotfix overflow-x:auto, aber ohne
     visuellen Hinweis denken Nutzer „Ang…" sei abgeschnitten. Lösung:
     ein sticky-positioniertes ::after-Element am rechten Rand des
     Flex-Containers blendet die letzten 24px in den BG aus. Funktioniert,
     weil alle drei Strips display:flex sind und Pseudo-Elemente in
     Flex-Containern als Items behandelt werden. Der Fade rutscht beim
     Scrollen (sticky:right) und verschwindet visuell, wenn der User
     bis zum Ende gescrollt hat (sticky-Item überdeckt von realen
     Tab-Items).

     2026-04-30 Korrektur (User-Report 2026-04-30): inv3-suite-nav aus dem
     Fade-Set rausgenommen. Suite-Nav hat nur 2-3 Tabs (Rechnungen /
     Wiederkehrend / Angebote bzw. Quote-/Recurrence-Variante), die in
     jedes Mobile-Viewport >=360px komplett passen — kein Überlauf vorhanden,
     aber das `::after`-Element rendert trotzdem als sichtbarer Pseudo-
     Schatten neben dem letzten Tab. inv3-filter-row und afa-tabs haben
     deutlich mehr Items und behalten den Fade als sinnvollen Scroll-Hint. */
  .inv3-suite-nav,
  .inv3-filter-row,
  .afa-tabs{
    flex-wrap:nowrap;
    overflow-x:auto;
  }
  .inv3-filter-row::after,
  .afa-tabs::after{
    content:"";
    flex:0 0 24px;
    align-self:stretch;
    position:sticky;
    right:-1px;
    margin-left:-24px;
    background:linear-gradient(to right,transparent,var(--bg));
    pointer-events:none;
  }
  body.light .inv3-filter-row::after,
  body.light .afa-tabs::after{
    background:linear-gradient(to right,transparent,var(--bg));
  }
  .kon-filter-bar{
    height:auto;
    align-items:stretch;
    overflow-x:visible;
  }
  .kon-search{
    flex:1 1 100%;
    min-width:0;
  }
  .kon-count{
    width:100%;
    text-align:right;
  }
  .inv3-conversion-queue{
    padding-left:12px;
    padding-right:12px;
    scroll-snap-type:x proximity;
  }
  .inv3-conversion-queue-item{
    flex-basis:min(240px,calc(100vw - 56px));
    min-width:0;
    max-width:calc(100vw - 56px);
    scroll-snap-align:start;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Mobile-Listen-Refactor Stage 2 (PR-A Defensiv) ── 2026-04-30
   ═══════════════════════════════════════════════════════════════════════
   Plan:     ~/.claude/plans/lies-erst-diese-drei-valiant-marshmallow.md
   Findings: F-MOB-002 (Tab-Bar) + F-MOB-003 (Tap-Targets) +
             F-MOB-008 (Action-Menu off-screen, Stage-1 P0-Bug).
   Source-Pins: tests/mobile-tokens.test.js, tests/mobile-action-sheet.test.js,
                tests/e2e/live/06-action-menu-mobile.spec.cjs
   ═══════════════════════════════════════════════════════════════════════ */
@media(max-width:600px){
  /* F-MOB-008 — Action-Menu wird Bottom-Sheet via <dialog>.
     toggleDocumentRowMenu() in inv3-form.js erkennt <600px und delegiert
     an _inv3OpenDocMenuAsSheet, das ein dynamisch erzeugtes <dialog
     class="inv3-doc-menu-sheet"> mit _inv3ShowDialog() oeffnet. Der
     Inline-Popup-Pfad bleibt fuer Desktop unveraendert. */
  .inv3-doc-menu-sheet{
    /* <dialog> top-layer gibt uns den Stacking-Context kostenlos.
       max-height 80dvh laesst Liste hinter Sheet teilweise sichtbar.
       margin: auto auto 0 auto + max-width fuer das Bottom-Sheet-Gefuehl. */
    margin:auto auto 0 auto;
    width:100%;
    max-width:100vw;
    max-height:var(--sheet-max-height);
    padding:0;
    border:none;
    border-radius:var(--sheet-radius-top) var(--sheet-radius-top) 0 0;
    background:var(--card,var(--bg2));
    color:var(--text);
    box-shadow:0 -8px 32px rgba(0,0,0,.4);
    /* Slide-in von unten. ::backdrop nativ. */
    animation:inv3-doc-menu-sheet-in 220ms ease;
    /* Own compositor layer so the box-shadow isn't re-rasterized while the
       drag engine (RuntimeStyleRules) moves the sheet per frame. */
    transform:translateZ(0);
    contain:layout paint;
  }
  /* will-change only while a finger drags. The shared engine sets the
     data flag; the legacy --dragging class is kept for the transition window. */
  .inv3-doc-menu-sheet[data-rsr-drag-active],
  .inv3-doc-menu-sheet--dragging{will-change:transform;}
  .inv3-doc-menu-sheet::backdrop{
    background:var(--sheet-backdrop);
  }
  .inv3-doc-menu-sheet-panel{
    /* Drag-Handle + Action-Liste, mit Safe-Area fuer iOS Home-Indicator. */
    padding:8px 0 max(16px,env(safe-area-inset-bottom)) 0;
  }
  .inv3-doc-menu-sheet-handle{
    /* Visueller Hinweis dass das Sheet eingeschoben ist; rein dekorativ. */
    width:36px;
    height:4px;
    margin:0 auto 8px;
    border-radius:999px;
    background:var(--sheet-handle);
    touch-action:none;
  }
  .inv3-doc-menu-sheet .inv3-doc-menu{
    /* Override: das geklonte Menue rendert hier nicht mehr als position:absolute
       Inline-Popup, sondern als sichtbare vertikale Liste im Sheet. */
    position:static!important;
    display:flex!important;
    flex-direction:column;
    width:100%;
    max-width:none;
    background:transparent;
    border:none;
    box-shadow:none;
    padding:0;
    margin:0;
  }
  .inv3-doc-menu-sheet .inv3-doc-menu-item{
    /* Tap-comfy Tap-Target im Sheet (groesser als Inline-Pills). */
    min-height:var(--tap-target-comfy);
    padding:12px 20px;
    justify-content:flex-start;
    gap:12px;
    border-radius:0;
    text-align:left;
    width:100%;
  }
  .inv3-doc-menu-sheet .inv3-doc-menu-item + .inv3-doc-menu-item{
    border-top:1px solid var(--border);
  }

  /* F-MOB-003 — Tap-Target-Mobile-Override.
     Bestehende Pins (invoice-v3-polish.test.js:407-411) bleiben gruen
     weil sie keine @media-Selektoren matchen. Hier nur Mobile-Hardening. */
  .inv3-filter,.inv3-reset{min-height:var(--tap-target-min);}
  .inv3-row-action-pill{min-height:var(--tap-target-min);}
  .inv3-row-action-main{min-height:var(--tap-target-min);}
  .inv3-search input{min-height:var(--tap-target-min);}
  .inv3-doc-menu-trigger{
    min-height:var(--tap-target-min);
    min-width:var(--tap-target-min);
  }

  /* User-Report 2026-04-30: "graues Feld hinter Stornofaelle" — der
     .inv3-filter-badge rendert auf Mobile mit eigenem rgba-Hintergrund
     zusaetzlich zum Chip-Hintergrund, sodass jeder Filter-Pill optisch wie
     eine "Doppelpille" wirkt (aussen Chip + innen Count-Badge). Im Light-
     Mode (--surface-rgba-base auf 0,0,0 geflippt) ist der Doppel-Effekt
     besonders auffaellig. Auf Mobile machen wir den Badge-Hintergrund
     transparent und bringen die Zahl rein typografisch zum Vorschein. Im
     Active-State bleibt der Akzent-Tint sichtbar (Pin in
     _30-documents-shell.css:1220 unveraendert). */
  .inv3-filter:not(.active) .inv3-filter-badge{
    background:transparent;
    color:rgba(var(--text-rgba-base),.74);
    font-weight:var(--fw-bold,700);
  }

  /* F-MOB-002 — Tab-Bar Defensiv-Overflow.
     Bestehende Regel ist @media(max-width:560px); wir extenden auf 600px
     damit auch iPhone 15 Pro (393px) und Plus-Viewports konsistent
     horizontal scrollen. Die 560px-Regel im Bestand bleibt unveraendert. */
  .inv3-suite-nav{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .inv3-suite-nav::-webkit-scrollbar{display:none;}
  .inv3-suite-link{
    flex:0 0 auto;
    min-width:max-content;
  }
}

/* Reduced-Motion-Override muss AUSSERHALB des max-width:600px-@media liegen,
   weil verschachtelte @media-Queries zwar Standard sind, der Lesbarkeit halber
   trennen wir die beiden Conditional-Layer. Browser kombiniert sie via
   normaler Cascade. */
@media(max-width:600px) and (prefers-reduced-motion:reduce){
  .inv3-doc-menu-sheet{animation:none;}
}

@keyframes inv3-doc-menu-sheet-in{
  from{transform:translateY(100%);}
  to{transform:translateY(0);}
}

/* ═══════════════════════════════════════════════════════════════════════
   Mobile-Listen-Refactor Stage 2 Polish-Fixes (PR-B Phase 1) ── 2026-04-30
   ═══════════════════════════════════════════════════════════════════════
   Plan:     ~/.claude/plans/lies-erst-diese-drei-valiant-marshmallow.md
   Findings: F-MOB-010 (Wiederkehrend Meta-Row Ellipsis, P0 post-deploy)
             F-MOB-009 (Pfeil-Form, gefixt direkt im SVG-Path quotes.js)
             F-MOB-011 (Drag-down-to-close, gefixt in inv3-form.js)
   ═══════════════════════════════════════════════════════════════════════ */
@media(max-width:600px){
  /* F-MOB-010 — Meta-Row Stack auf Mobile.
     Bestand-Verhalten: <780px forcet `.inv3-row-meta.is-count-3/4` auf
     `repeat(2, minmax(0, 1fr))` (siehe _32-quotes.css:887-891). Bei 393px
     iPhone 15 Pro ergibt das ~150px pro Meta-Spalte — knapp fuer
     "Naechste Ausstellung" (Label 18 Zeichen) + "21.04.2026" (Value
     10 Zeichen). User-Report 2026-04-30 zeigt daraus resultierende Ellipsis
     ("Naechste Au...", "0 Rechnu...", "Sollte seit ..."). Single-Column-
     Stack gibt jedem Meta-Item die volle Card-Breite (~330px nach Safe-
     Area abgezogen) und Labels+Values fitten lossless. Gleiche Behandlung
     fuer .inv3-row-grid (alternativer Container im Wiederkehrend-Layout). */
  .inv3-row-meta,
  .inv3-row-meta.is-count-2,
  .inv3-row-meta.is-count-3,
  .inv3-row-meta.is-count-4,
  .inv3-row-grid{grid-template-columns:minmax(0,1fr)!important;}
  .inv3-row-meta.is-count-3 > .inv3-row-meta-item:nth-child(3){
    display:block!important;
  }
  /* Vertikal nicht zu eng zwischen den Items, damit jeder Label/Value-
     Block visuell als eigene Einheit lesbar bleibt. */
  .inv3-row-meta-item{
    padding-block:4px;
  }
  .inv3-row-meta-item + .inv3-row-meta-item{
    border-top:1px solid var(--border);
    margin-top:4px;
    padding-top:8px;
  }

  /* F-MOB-012 — Info-Tooltip Position relativ-zum-Trigger.
     Vorher (in _20-dashboard.css gestrichen): position:fixed; top:74px —
     Tooltip rendete am Viewport-Top, weit weg vom Trigger. Jetzt: absolut
     unter dem Icon, Width an Viewport-Breite gebunden, horizontal um den
     Trigger zentriert damit mittige Icons nicht rechts aus dem Viewport
     laufen. JS-Toggle
     via .is-open-Klasse (dashboard-v3.js _v3InfoToggleBinder). */
  .v3-th-info .v3-th-tip,
  .v3-info-inline .v3-th-tip{
    position:absolute!important;
    top:calc(100% + 8px)!important;
    bottom:auto!important;
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%) translateY(6px)!important;
    width:min(280px,calc(100vw - 32px))!important;
    max-width:calc(100vw - 32px)!important;
    z-index:1000;
  }

  /* F-MOB-013 — Topbar-Defensive auf Mobile. */
  .topbar,.main{max-width:100vw;overflow-x:hidden;}
  .nav-primary{max-width:100vw;min-width:0;}
  .nav-right{min-width:0;flex-shrink:1;}
  .mob-hamburger{flex-shrink:0;}
}

/* ═══════════════════════════════════════════════════════════════════════
   Mobile-Listen-Refactor Stage 2 PR-B Phase 2 (Layout-Refactor) ── 2026-04-30
   ═══════════════════════════════════════════════════════════════════════
   Plan:     ~/.claude/plans/lies-erst-diese-drei-valiant-marshmallow.md
   Findings: F-MOB-001 (Compact-Hero + Auflapp-Toggle, P0)
             F-MOB-004 (Compact-Row Density, P1)
             F-MOB-005 (Showcase-Suppress, P1)
   Decisions: D-001 (B+ Compact-Hero), D-005 (CSS-only suppress),
              D-010 (Status-Border behalten), D-012 (localStorage),
              E-007 (CSS-only suppress, kein matchMedia render-skip),
              E-4B (Compact-Row via @container, kein JS-data-attr).
   ═══════════════════════════════════════════════════════════════════════ */

/* Auflapp-Toggle Button — Default versteckt; CSS macht ihn auf <600px sichtbar.
   Auf Desktop bleibt die volle KPI-Strip-Hierarchie unveraendert (Toggle ist
   funktionslos auf Desktop, also auch invisible). */
.inv3-overview-toggle{
  display:none;
  appearance:none;
  background:rgba(var(--surface-rgba-base),.04);
  border:1px solid var(--border);
  color:var(--text2);
  border-radius:999px;
  padding:8px 14px;
  font:inherit;
  font-size:12.5px;
  font-weight:var(--fw-semibold);
  cursor:pointer;
  align-items:center;
  gap:8px;
  margin-top:12px;
  transition:background var(--tr-base),border-color var(--tr-base),color var(--tr-base);
  min-height:var(--tap-target-min);
  min-width:max-content;
}
.inv3-overview-toggle:hover{
  background:rgba(var(--surface-rgba-base),.07);
  border-color:rgba(232,184,75,.28);
  color:var(--text);
}
.inv3-overview-toggle-chevron{
  transition:transform var(--tr-base);
  flex-shrink:0;
}
.inv3-hero-grid.is-overview-open .inv3-overview-toggle-chevron{
  transform:rotate(180deg);
}

@media(max-width:600px){
  /* F-MOB-001 — Compact-Hero auf Mobile.
     Toggle wird sichtbar (inline-flex); Hero-Metrics + Statusboard sind
     default-versteckt, sichtbar wenn .is-overview-open auf dem Grid sitzt
     (gesetzt durch compact-hero.js JS-Toggle).
     Kontext: User-Report (Stage-1 F-MOB-001): KPI-Strip fuellte den
     kompletten above-fold Bereich, 0 List-Rows sichtbar. Default-collapsed
     gibt der Liste sofort Platz. */
  .inv3-overview-toggle{display:inline-flex;}
  .inv3-hero-grid:not(.is-overview-open) .inv3-hero-metrics,
  .inv3-hero-grid:not(.is-overview-open) .inv3-statusboard{
    display:none;
  }

  /* F-MOB-005 — Showcase-Suppress (CSS-only, E-007 reverted matchMedia
     render-skip). Conversion-Showcase + dazugehoeriger Toolbar-Toggle
     "Umwandlung ausblenden/einblenden" werden komplett versteckt.
     User-Confirm 2026-04-30: "passt momentan eh nicht" weil die
     Toolbar-Pill links-aussen vom Viewport renderte.
     Existing Test-Pins fuer .inv3-conversion-showcase / .inv3-conversion-
     toggle CSS-Definitionen (quote-list-v3.test.js:151-158) bleiben gruen,
     weil display:none nur die Visibility unterdrueckt — die Style-Regeln
     selbst stehen weiterhin im CSS. */
  .inv3-conversion-showcase,
  .inv3-conversion-toggle,
  .inv3-conversion-hide-wrap,
  .inv3-conversion-hide{
    display:none!important;
  }
}

/* F-MOB-004 — Compact-Row Density via @container (E-4B).
   Bestand: @container doc-list (max-width: 1080px / 980px) macht progressive
   Stack-Layouts. Wir ergaenzen einen 600px-Block der die Row weiter
   verdichtet — kleinere Padding, kleinerer Font, Secondary-Actions versteckt
   (sind im Bottom-Sheet erreichbar via PR-A). Nutzt @container statt
   @media damit das Layout reagiert auf den Container (.inv3-list)
   nicht auf den Viewport (E-4B Decision). */
@container doc-list (max-width: 600px){
  .inv3-row{
    padding:10px 12px;
    gap:8px;
    min-height:var(--row-compact-min-h);
  }
  .inv3-row-identity{
    gap:2px;
  }
  .inv3-row-number{
    font-size:11px;
  }
  .inv3-row-customer{
    font-size:14px;
    font-weight:var(--fw-bold);
  }
  .inv3-row-amount strong{
    font-size:16px;
  }
  .inv3-row-amount span{
    font-size:11px;
  }
  /* Inline-Secondary-Actions (--secondary, --secondary-2) sind bei <980px
     bereits unsichtbar (existing pin). Bei <600px stellen wir sicher dass
     auch die menschliche Primary-Action kompakt bleibt. Das Action-Bottom-
     Sheet aus PR-A enthaelt alle Actions inkl. Secondaries. */
  .inv3-row-actions{
    flex-wrap:nowrap;
    gap:6px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   F-MOB-007 — Mobile Month-Picker Bottom-Sheet (2026-04-30)
   ═══════════════════════════════════════════════════════════════════════
   Plan:     ~/.claude/plans/lies-erst-diese-drei-valiant-marshmallow.md
   Decision: Stage-1 Option D (3x4 Grid, decision-locked 2026-04-30)
   Konsumenten:
     - router.js nav-months-bar Single-Pill (Mobile <600px)
     - belege.js belegeToggleMonthDrop Mobile-Branch
   Reuse:
     - --sheet-* Tokens (radius, backdrop, max-height) aus PR-A
     - --tap-target-* (44/48px) aus PR-A
     - Drag-down-to-close via inline Touch-Listener (F-MOB-011 Pattern)
   ═══════════════════════════════════════════════════════════════════════ */

/* Mobile-only sichtbarkeiten der Single-Pill / 12-Tab-Bar.
   Default: Pill ist hidden, 12-Tabs sichtbar. <600px kehrt das um. */
.nav-month-pill{
  display:none;
  appearance:none;
  background:rgba(232,184,75,.08);
  border:1px solid rgba(232,184,75,.22);
  color:var(--text);
  border-radius:999px;
  padding:0 14px;
  font:inherit;
  font-size:13px;
  font-weight:var(--fw-semibold);
  cursor:pointer;
  align-items:center;
  gap:8px;
  height:34px;
  min-height:var(--tap-target-min);
  flex:0 0 auto;
  transition:background var(--tr-base),border-color var(--tr-base);
}
.nav-month-pill:hover,
.nav-month-pill:focus-visible{
  background:rgba(232,184,75,.14);
  border-color:rgba(232,184,75,.36);
}
.nav-month-pill[aria-expanded="true"] .nav-month-pill-chevron{
  transform:rotate(180deg);
}
.nav-month-pill-chevron{
  flex-shrink:0;
  transition:transform var(--tr-base);
}
.nav-month-pill-label{
  white-space:nowrap;
}

/* Body-Scroll-Lock waehrend MonthSheet offen. */
body.month-sheet-open{
  overflow:hidden;
}

/* Sheet-Container — gleicher Bottom-Sheet-Stil wie inv3-doc-menu-sheet
   (PR-A), aber breiter und mit eigenem Animation-Keyframe damit beide
   gleichzeitig animieren koennen falls jemand mehrere Sheets offnet
   (single-modal-policy macht das eigentlich unmoeglich, aber Belt-and-
   Suspenders). */
.month-sheet{
  margin:auto auto 0 auto;
  width:100%;
  max-width:100vw;
  max-height:var(--sheet-max-height);
  padding:0;
  border:none;
  border-radius:var(--sheet-radius-top) var(--sheet-radius-top) 0 0;
  background:var(--card,var(--bg2));
  color:var(--text);
  box-shadow:0 -8px 32px rgba(0,0,0,.4);
  animation:month-sheet-in 220ms ease;
  /* Own compositor layer so the box-shadow isn't re-rasterized while the drag
     engine (RuntimeStyleRules) moves the sheet per frame. */
  transform:translateZ(0);
  contain:layout paint;
}
/* will-change only while a finger drags (data flag set by the engine). */
.month-sheet[data-rsr-drag-active]{will-change:transform;}
.month-sheet::backdrop{
  background:var(--sheet-backdrop);
}
@media(prefers-reduced-motion:reduce){
  .month-sheet{animation:none;}
}
.month-sheet-panel{
  padding:8px 16px max(20px,env(safe-area-inset-bottom));
}
.month-sheet-handle{
  width:36px;
  height:4px;
  margin:0 auto 12px;
  border-radius:999px;
  background:var(--sheet-handle);
  touch-action:none;
}
.month-sheet-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.month-sheet-head h2{
  font-size:16px;
  font-weight:var(--fw-bold);
  color:var(--text);
  letter-spacing:-.01em;
  margin:0;
  display:flex;
  align-items:baseline;
  gap:8px;
  line-height:1.2;
}
.month-sheet-year{
  font-size:13px;
  font-weight:var(--fw-medium);
  color:var(--text2);
}
.month-sheet-close{
  appearance:none;
  background:rgba(var(--surface-rgba-base),.06);
  border:1px solid var(--border);
  color:var(--text2);
  border-radius:50%;
  width:32px;
  height:32px;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background var(--tr-base),border-color var(--tr-base),color var(--tr-base);
}
.month-sheet-close:hover{
  background:rgba(var(--surface-rgba-base),.1);
  border-color:rgba(232,184,75,.28);
  color:var(--text);
}

/* "Alle Monate" full-width-Pill (optional, oberhalb des Grid). */
.month-sheet-all-wrap{
  margin-bottom:10px;
}
.month-sheet-all{
  appearance:none;
  width:100%;
  background:rgba(var(--surface-rgba-base),.04);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:12px;
  padding:0 16px;
  font:inherit;
  font-size:14px;
  font-weight:var(--fw-semibold);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:48px;
  min-height:var(--tap-target-comfy);
  transition:background var(--tr-base),border-color var(--tr-base);
}
.month-sheet-all:hover,
.month-sheet-all:focus-visible{
  background:rgba(var(--surface-rgba-base),.07);
  border-color:rgba(232,184,75,.28);
}
.month-sheet-all.is-active{
  background:rgba(232,184,75,.12);
  border-color:rgba(232,184,75,.36);
  color:var(--accent);
}

/* 3x4 Grid (oder 4x3 bei Landscape — Browser handlet das nicht
   automatisch, daher feste 3-Spalten-Logik per CSS Grid). */
.month-sheet-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.month-sheet-cell{
  appearance:none;
  background:rgba(var(--surface-rgba-base),.04);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:12px;
  padding:10px 8px;
  font:inherit;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-height:var(--tap-target-comfy);
  transition:background var(--tr-base),border-color var(--tr-base),color var(--tr-base);
}
.month-sheet-cell:hover,
.month-sheet-cell:focus-visible{
  background:rgba(var(--surface-rgba-base),.07);
  border-color:rgba(232,184,75,.28);
}
.month-sheet-cell.is-active{
  background:rgba(232,184,75,.14);
  border-color:rgba(232,184,75,.42);
  color:var(--accent);
  font-weight:var(--fw-bold);
}
.month-sheet-cell.is-empty:not(.is-active){
  opacity:.5;
}
.month-sheet-cell-name{
  font-size:14px;
  font-weight:var(--fw-semibold);
}
.month-sheet-cell-count{
  font-size:11px;
  color:var(--text3);
  font-weight:var(--fw-medium);
}
.month-sheet-cell.is-active .month-sheet-cell-count{
  color:var(--accent);
}
.month-sheet-all .month-sheet-cell-count{
  font-size:12px;
  font-weight:var(--fw-medium);
  background:rgba(var(--surface-rgba-base),.08);
  border-radius:999px;
  padding:2px 8px;
}

/* Mobile-only: Single-Pill statt 12-Tab-Bar. */
@media(max-width:600px){
  /* Pill anzeigen, alle einzelnen Tab-Buttons verstecken. */
  .nav-month-pill{display:inline-flex;}
  .nav-months-bar .nav-month-tab{display:none;}
  /* Bar als simpler Container (kein Scroll, da nur 1 Pill).
     2026-04-30 Hotfix: Pill ging ueber den linken Rand auf <=480px wegen
     padding:0 12px aus _10-shell.css:2031 ohne min-height. Pill hat
     min-height:44px (WCAG-Tap-Target), Bar war 36px → vertikales Overflow
     liess die Pill optisch aus der Bar ragen. Erzwingen jetzt explizit
     padding-block:8px + min-height:52px + safe-area-inset auf der x-Achse. */
  .nav-months-bar{
    overflow:visible;
    justify-content:flex-start;
    padding-inline:max(16px,env(safe-area-inset-left));
    padding-block:8px;
    min-height:52px;
    height:auto;
  }
  /* Wrap haengt einen 28px-Rechts-Fade fuer die Tab-Bar an (sinnvoll auf
     Desktop wenn 12 Tabs scrollen). Auf Mobile mit nur einer Pill clippt
     dieser Fade die rechte Pill-Kante visuell. Suppress. */
  .nav-months-bar-wrap::after{display:none;}
}

@keyframes month-sheet-in{
  from{transform:translateY(100%);}
  to{transform:translateY(0);}
}

/* ═══════════════════════════════════════════════════════════════════════
   D-013 — Mobile Detail-Sheet (2026-04-30)
   ═══════════════════════════════════════════════════════════════════════
   Plan:     ~/.claude/plans/lies-erst-diese-drei-valiant-marshmallow.md
   Decision: Stage-2 D-013 (Tap-on-Row-Body → Detail-Sheet auf <600px)
   Konsumenten:
     - public/js/invoices.js _invShowDetailSheet
     - public/js/quotes.js   _qShowDetailSheet
     - public/js/recurrences.js _recShowDetailSheet
     - detail-sheet.js bindet Mobile-row-tap-Intercept
   Reuse:
     - --sheet-* Tokens (PR-A)
     - --tap-target-comfy (PR-A)
     - <dialog>.showModal() top-layer + Drag-down-to-close-Pattern
   ═══════════════════════════════════════════════════════════════════════ */

body.detail-sheet-open{
  overflow:hidden;
  touch-action:none;
}

.detail-sheet{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  top:auto;
  margin:0 auto;
  width:100%;
  max-width:min(560px,100vw);
  /* User-Report 2026-04-30: nur max-height + flex:1 0% auf Body fuehrte dazu,
     dass Sheet auf seine natuerliche Inhaltshoehe zusammenschrumpfte (Body-
     basis war 0). Sichtbar war nur ein kleiner scrollbarer Teilbereich.
     min-height erzwingt jetzt eine substantielle Visible-Area, damit Header,
     Sections und Footer ohne Scrollen sichtbar sind. */
  min-height:min(70dvh,640px);
  max-height:var(--sheet-max-height);
  max-height:min(var(--sheet-max-height),85dvh);
  padding:0;
  border:none;
  border-radius:var(--sheet-radius-top) var(--sheet-radius-top) 0 0;
  background:var(--card,var(--bg2));
  color:var(--text);
  box-shadow:0 -8px 32px rgba(0,0,0,.4);
  animation:detail-sheet-in 280ms cubic-bezier(.2,.8,.2,1);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  z-index:var(--z-modal,1200);
  /* Own compositor layer so the box-shadow isn't re-rasterized while the drag
     engine (RuntimeStyleRules) moves the sheet per frame. */
  transform:translateZ(0);
  contain:layout paint;
}
/* will-change only while a finger drags (data flag set by the engine). */
.detail-sheet[data-rsr-drag-active]{will-change:transform;}
.detail-sheet::backdrop{
  background:var(--sheet-backdrop);
}
@media(prefers-reduced-motion:reduce){
  .detail-sheet{animation:none;}
}
.detail-sheet-handle{
  width:40px;
  height:4px;
  margin:10px auto 6px;
  border-radius:999px;
  background:var(--sheet-handle);
  flex-shrink:0;
  touch-action:none;
}
/* User-Report 2026-04-30: Close-Button schwebte unter dem Drag-Handle in
   leerem Header-Bereich, weil top:14px die Vertikale unter den Handle (bei
   margin-top:8px + height:4px → y=8-12) gesetzt hat. Optisch entkoppelt von
   der Handle-Reihe. Jetzt am oberen Eck flush (top:6px) und mittig zur
   Handle-Y-Achse — beide bilden zusammen die "Sheet-Header-Reihe". Auch der
   Header-Padding-Top fliegt raus, damit Num/Title direkt unter dem Handle
   beginnen statt mit zusätzlichem 8px-Gap.

   Auf <=480px (engere Touch-Hand-Reichweite): Tap-Target auf 36px — bewusst
   etwas groesser als die 32px-Default fuer iPhone-Mini-Daumen, ohne den
   Handle-Bereich optisch zu dominieren. */
.detail-sheet-close{
  position:absolute;
  top:6px;
  right:6px;
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid var(--border);
  background:rgba(var(--surface-rgba-base),.04);
  color:var(--text2);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background var(--tr-base),border-color var(--tr-base),color var(--tr-base);
  z-index:1;
}
@media(max-width:480px){
  .detail-sheet-close{width:36px;height:36px;}
}
.detail-sheet-close:hover,
.detail-sheet-close:focus-visible{
  background:rgba(var(--surface-rgba-base),.08);
  border-color:rgba(232,184,75,.28);
  color:var(--text);
}
.detail-sheet-body{
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:8px 20px 12px;
  /* flex:1 1 auto statt flex:1 (=1 1 0%): Basis nimmt Inhaltshoehe statt 0,
     damit Body bei kurzem Inhalt nicht zu 0 schrumpft. Wachst weiterhin auf
     verfuegbaren Platz, schrumpft mit overflow-y:auto bei langem Inhalt. */
  flex:1 1 auto;
  min-height:0;
  -webkit-overflow-scrolling:touch;
}

.detail-sheet-header{
  padding:0 0 18px;
  /* Padding-right reserviert Platz für Close-Button-Overlay (32+6+8=46px); ohne
     das wuerde der Title-h2 unter den X-Button laufen. */
  padding-right:46px;
  border-bottom:1px solid var(--border);
  margin-bottom:18px;
}
.detail-sheet-num{
  font-family:var(--font-mono,'JetBrains Mono',monospace);
  font-size:12px;
  color:var(--accent);
  letter-spacing:.04em;
  margin-bottom:6px;
}
.detail-sheet-title{
  font-size:22px;
  font-weight:var(--fw-heavy,800);
  color:var(--text);
  letter-spacing:-.02em;
  line-height:1.15;
  margin:0 0 10px;
  /* Lange Customer-Names duerfen umbrechen, aber max 2 Lines mit Ellipsis. */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.detail-sheet-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  padding:5px 12px;
  font-size:11px;
  font-weight:var(--fw-bold,700);
  letter-spacing:.04em;
  border:1px solid transparent;
}
.detail-sheet-status::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
}
.detail-sheet-status.is-good{background:var(--green-soft);color:var(--green);border-color:rgba(52,211,153,.32);}
.detail-sheet-status.is-warn{background:rgba(232,184,75,.14);color:var(--accent);border-color:rgba(232,184,75,.36);}
.detail-sheet-status.is-danger{background:var(--red-soft);color:var(--red);border-color:rgba(248,113,113,.32);}
.detail-sheet-status.is-neutral{background:rgba(var(--surface-rgba-base),.06);color:var(--text2);border-color:var(--border);}
.detail-sheet-status.is-muted{background:rgba(var(--surface-rgba-base),.04);color:var(--text3);border-color:var(--border);}

.detail-sheet-meta-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px 14px;
  margin-bottom:20px;
}
.detail-sheet-meta-block{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.detail-sheet-meta-label{
  font-size:10px;
  font-weight:var(--fw-semibold,600);
  color:var(--text3);
  text-transform:uppercase;
  letter-spacing:.07em;
}
.detail-sheet-meta-value{
  font-size:14px;
  font-weight:var(--fw-semibold,600);
  color:var(--text);
}

.detail-sheet-amount-block{
  margin-bottom:20px;
}
.detail-sheet-amount-block .detail-sheet-meta-label{
  margin-bottom:4px;
  display:block;
}
.detail-sheet-amount-big{
  font-size:28px;
  font-weight:var(--fw-heavy,800);
  color:var(--text);
  letter-spacing:-.02em;
  line-height:1.1;
}
.detail-sheet-amount-sub{
  font-size:11.5px;
  color:var(--text2);
  margin-top:3px;
}

.detail-sheet-address{
  background:rgba(var(--surface-rgba-base),.02);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 14px;
  margin-bottom:18px;
  font-size:13px;
  line-height:1.55;
  color:var(--text);
}
.detail-sheet-address-name{
  font-weight:var(--fw-bold,700);
  margin-bottom:2px;
}
.detail-sheet-address-line{
  color:var(--text2);
  font-size:12px;
}

.detail-sheet-timeline{
  background:rgba(var(--surface-rgba-base),.02);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px;
  margin-bottom:18px;
}
.detail-sheet-timeline-head{
  font-size:10px;
  font-weight:var(--fw-semibold,600);
  color:var(--text3);
  text-transform:uppercase;
  letter-spacing:.07em;
  margin-bottom:10px;
}
.detail-sheet-timeline-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:6px 0;
  font-size:13px;
}
.detail-sheet-timeline-icon{
  width:18px;
  height:18px;
  border-radius:50%;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  line-height:1;
  font-weight:var(--fw-bold,700);
}
.detail-sheet-timeline-icon.is-ok{background:rgba(52,211,153,.18);color:var(--green);}
.detail-sheet-timeline-icon.is-warn{background:rgba(232,184,75,.18);color:var(--accent);}
.detail-sheet-timeline-icon.is-neutral{background:rgba(var(--surface-rgba-base),.08);color:var(--text2);}
.detail-sheet-timeline-text{
  flex:1;
  color:var(--text);
}
.detail-sheet-timeline-date{
  color:var(--text3);
  font-size:11px;
  margin-top:1px;
}

.detail-sheet-note-block{
  background:rgba(232,184,75,.04);
  border:1px dashed rgba(232,184,75,.22);
  border-radius:12px;
  padding:12px 14px;
  margin-bottom:20px;
}
.detail-sheet-note-head{
  font-size:10px;
  font-weight:var(--fw-semibold,600);
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.07em;
  margin-bottom:6px;
}
.detail-sheet-note-text{
  font-size:12.5px;
  color:var(--text2);
  line-height:1.55;
  font-style:italic;
}

/* Error-Boundary: sichtbarer Platzhalter, wenn eine Sektion beim Rendern
   wirft. Das Sheet bleibt befüllt + dismissbar statt leer hängenzubleiben. */
.detail-sheet-section-error{
  background:rgba(224,108,108,.06);
  border:1px dashed rgba(224,108,108,.30);
  border-radius:12px;
  padding:12px 14px;
  margin-bottom:20px;
  font-size:12.5px;
  color:var(--red);
  line-height:1.5;
}

/* Footer mit Status-aware Action-Buttons (PR-A bottom-sheet pattern). */
.detail-sheet-actions{
  padding:16px 20px max(20px,env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--border);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.18));
  display:flex;
  flex-direction:column;
  gap:8px;
  flex-shrink:0;
}
.detail-sheet-action{
  appearance:none;
  border:1px solid transparent;
  font:inherit;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:var(--tap-target-comfy);
  padding:0 16px;
  border-radius:14px;
  font-weight:var(--fw-bold,700);
  font-size:14.5px;
  transition:transform .12s ease,filter .12s ease,background var(--tr-base);
}
.detail-sheet-action:active{
  transform:translateY(1px);
  filter:brightness(.95);
}
.detail-sheet-action--primary{
  background:var(--accent);
  color:var(--accent-ink);
  box-shadow:0 4px 14px rgba(232,184,75,.32);
}
.detail-sheet-action--primary:hover,
.detail-sheet-action--primary:focus-visible{
  background:var(--accent3);
}
.detail-sheet-action--secondary{
  background:rgba(var(--surface-rgba-base),.04);
  border-color:var(--border);
  color:var(--text);
}
.detail-sheet-action--secondary:hover,
.detail-sheet-action--secondary:focus-visible{
  background:rgba(var(--surface-rgba-base),.07);
  border-color:rgba(232,184,75,.28);
}
.detail-sheet-action--warn{
  background:var(--red-soft);
  border-color:rgba(248,113,113,.32);
  color:var(--red);
}
.detail-sheet-action--warn:hover,
.detail-sheet-action--warn:focus-visible{
  background:rgba(248,113,113,.16);
}
.detail-sheet-action[disabled]{
  opacity:.5;
  cursor:not-allowed;
}
/* Busy-Action (Tap gefeuert, Server-Response ausstehend): wait-Cursor +
   leicht stärker gedimmt als nur-disabled, damit der laufende Vorgang
   sichtbar ist und ein zweiter Tap erkennbar ins Leere läuft. */
.detail-sheet-action[aria-busy="true"]{
  opacity:.6;
  cursor:wait;
}
.detail-sheet-action-icon{
  flex-shrink:0;
}

body.light .detail-sheet{
  background:var(--card);
  color:var(--text);
  box-shadow:0 -16px 44px rgba(15,23,42,.18);
}
body.light .detail-sheet::backdrop{
  background:rgba(15,23,42,.34);
}
body.light .detail-sheet-address,
body.light .detail-sheet-timeline{
  background:rgba(var(--surface-rgba-base),.025);
  border-color:var(--border);
}
body.light .detail-sheet-actions{
  background:linear-gradient(180deg,rgba(var(--surface-solid-rgba-base),.88),var(--card));
}
body.light .detail-sheet-action--secondary{
  background:rgba(var(--surface-rgba-base),.025);
}
body.light .detail-sheet-action--secondary:hover,
body.light .detail-sheet-action--secondary:focus-visible{
  background:rgba(var(--surface-rgba-base),.055);
}

@keyframes detail-sheet-in{
  from{transform:translateY(100%);}
  to{transform:translateY(0);}
}

/* Die erweiterten DetailSheet-Bausteine (pill-row / callout / collapsible /
   Multi-Pill-Header / close-Action / Side-Drawer-Variante) sind in den
   Geschwister-Partial _90b-detail-sheet-rich.css ausgelagert (LOC-Limit;
   bleibt im Bundle direkt nach diesem Partial). */

/* ============================================================
   Belegarchiv Mobile Toolbar
   2026-05-18 follow-up: calmer mobile hierarchy for Belegarchiv.
   Intentionally split from _90-responsive-overrides.css because that
   legacy file is already above the freeze cap and must not grow further.
   ============================================================ */

@media(max-width:640px){
  .belege-filter-actions{
    width:100%;
    margin-left:0;
    flex-wrap:wrap;
    align-items:stretch;
    gap:10px;
  }
  .page-filter-bar--belege{
    height:auto;
    align-items:stretch;
    flex-wrap:wrap;
    overflow-x:visible;
    row-gap:10px;
    padding:8px 0 2px;
    /* Mobile bleibt explizit nicht-sticky wie Desktop. Die Bar scrollt mit
       dem Content weg und kann weder Karten noch das Zuordnen-Popup visuell
       überlagern. */
    position:static;
    top:auto;
    box-shadow:none;
  }
  /* Scroll-State-Visuals (Schatten/Fläche) sind ohne Sticky bedeutungslos —
     neutral halten, falls der Observer die Klasse trotzdem setzt. */
  .page-filter-bar--belege.is-stuck{
    box-shadow:none;
  }
  .belege-toolbar__status{
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
  }
  .belege-toolbar__status .kon-filter-chip{
    width:100%;
    min-width:0;
    justify-content:space-between;
    padding:0 14px;
    height:42px;
    border-radius:18px;
    font-size:13px;
  }
  .belege-filter-actions > *{
    min-width:0;
  }
  .belege-filter-actions .filter-search{
    order:1;
    flex:1 1 100%;
    max-width:none!important;
  }
  .belege-filter-actions .month-btn-wrap{
    order:2;
    flex:1 1 calc(50% - 5px);
  }
  .belege-filter-actions .belege-toolbar__advbtn{
    order:3;
    flex:1 1 calc(50% - 5px);
    min-height:42px;
  }
  .belege-filter-actions .sort-btn-wrap{
    order:4;
    flex:1 1 100%;
    min-width:0;
  }
  .belege-filter-actions .month-btn,
  .belege-filter-actions .sort-btn,
  .belege-filter-actions .belege-toolbar__advbtn{
    width:100%;
    justify-content:space-between;
    min-height:42px;
  }
  .belege-filter-actions .sort-btn{
    padding-left:14px;
    padding-right:14px;
  }
  .belege-filter-actions .filter-search input{
    height:44px;
  }
}

/* Touch-Target-Floor (WCAG 2.5.5 / Apple HIG) auf coarse Pointern — app-weiter
   WebKit-Sweep (iPhone 13, ergänzend zu #3721): in der Belege-Toolbar maßen
   month-btn 178×42 und sort-btn 366×42. Der @media(max-width:640px)-Block oben
   setzt `.belege-filter-actions .month-btn/.sort-btn { min-height:42px }`
   (Spez. 0,2,0) — das schlägt die bare-Klassen-coarse-Overrides in _41/_10.
   Hier mit gleichem Kontext-Selektor + gleicher Spez. auf 44px gehoben; steht
   später in der Cascade → gewinnt. advbtn (Schwester, gleiche 42px) mit. */
@media (pointer: coarse) {
  .belege-filter-actions .month-btn,
  .belege-filter-actions .sort-btn,
  .belege-filter-actions .belege-toolbar__advbtn {
    min-height: 44px;
  }
}

/* _90b-detail-sheet-rich.css — Erweiterte DetailSheet-Bausteine (2026-06-17)
 *
 * Ausgelagert aus _90-month-sheet.css (LOC-Limit), bleibt aber direkt danach
 * im Bundle (manifest.json: _90b folgt auf _90a). Inhalt: die ADDITIVEN
 * Bausteine für den reichen Steuergesundheit-v5-Drawer + die Side-Drawer-
 * Variante. Bestehende DetailSheet-Nutzer (Rechnungen/Angebote/Belege/Dashboard)
 * verwenden weder die neuen section-kinds noch variant:'side' und bleiben
 * unverändert. Alle Farben über Tokens, keine style=-Attribute (CSP-Freeze).
 *
 * Die Basis-Komponente (.detail-sheet, Header, meta-grid, note, timeline,
 * actions, das absolut positionierte Header-X) lebt weiter in
 * _90-month-sheet.css.
 */

/* ── Erweiterte Inhalts-Bausteine (Steuergesundheit-v5 Drawer) ───────────────
   pill-row / callout / collapsible + Multi-Pill-Header. */

/* Mehrere Status-Pills im Header umbrechend nebeneinander statt überlappend.
   .detail-sheet-status ist inline-flex; margin schafft den Abstand, ohne die
   Bestands-Single-Pill-Nutzer optisch zu verändern. */
.detail-sheet-status + .detail-sheet-status{
  margin-left:8px;
}

/* Label-Wert-Chips (Prüfung / Vertrauen / Zuletzt geprüft). */
.detail-sheet-pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:20px;
}
.detail-sheet-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  padding:5px 11px;
  font-size:11.5px;
  background:rgba(var(--surface-rgba-base),.05);
  border:1px solid var(--border);
}
.detail-sheet-pill-label{
  color:var(--text3);
  font-weight:var(--fw-semibold,600);
}
.detail-sheet-pill-value{
  color:var(--text);
  font-weight:var(--fw-bold,700);
}
.detail-sheet-pill.is-good{background:var(--green-soft);border-color:rgba(52,211,153,.28);}
.detail-sheet-pill.is-good .detail-sheet-pill-value{color:var(--green);}
.detail-sheet-pill.is-warn{background:rgba(232,184,75,.12);border-color:rgba(232,184,75,.30);}
.detail-sheet-pill.is-warn .detail-sheet-pill-value{color:var(--accent);}
.detail-sheet-pill.is-danger{background:var(--red-soft);border-color:rgba(248,113,113,.28);}
.detail-sheet-pill.is-danger .detail-sheet-pill-value{color:var(--red);}

/* Callout-Box mit Häkchen-Liste ("Was passiert, wenn du das löst?"). */
.detail-sheet-callout{
  border-radius:12px;
  padding:14px 16px;
  margin-bottom:20px;
  background:rgba(var(--surface-rgba-base),.05);
  border:1px solid var(--border);
}
.detail-sheet-callout.is-good{
  background:var(--green-soft);
  border-color:rgba(52,211,153,.28);
}
.detail-sheet-callout.is-warn{
  background:rgba(232,184,75,.08);
  border-color:rgba(232,184,75,.26);
}
.detail-sheet-callout-head{
  font-size:13px;
  font-weight:var(--fw-bold,700);
  color:var(--text);
  margin-bottom:10px;
}
.detail-sheet-callout-text{
  font-size:12.5px;
  color:var(--text2);
  line-height:1.55;
}
.detail-sheet-callout-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.detail-sheet-callout-item{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:12.5px;
  color:var(--text2);
  line-height:1.45;
}
.detail-sheet-callout-check{
  flex-shrink:0;
  margin-top:1px;
  color:var(--green);
}
.detail-sheet-callout.is-warn .detail-sheet-callout-check{color:var(--accent);}

/* Aufklappbares Akkordeon (Befund / Datenbasis / Grenzen der Prüfung). */
.detail-sheet-collapsible{
  border:1px solid var(--border);
  border-radius:12px;
  margin-bottom:12px;
  overflow:hidden;
}
.detail-sheet-collapsible-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:13px 15px;
  cursor:pointer;
  list-style:none;
  font-size:13px;
  font-weight:var(--fw-bold,700);
  color:var(--text);
}
.detail-sheet-collapsible-summary::-webkit-details-marker{display:none;}
.detail-sheet-collapsible-summary:hover,
.detail-sheet-collapsible-summary:focus-visible{
  background:rgba(var(--surface-rgba-base),.04);
}
.detail-sheet-collapsible-chevron{
  flex-shrink:0;
  color:var(--text3);
  transition:transform .18s ease;
}
.detail-sheet-collapsible[open] .detail-sheet-collapsible-chevron{
  transform:rotate(180deg);
}
.detail-sheet-collapsible-body{
  padding:0 15px 14px;
}
/* Verschachtelte Sektionen im Akkordeon brauchen keinen Doppel-Abstand nach
   unten — der Body liefert das Padding. */
.detail-sheet-collapsible-body > :last-child{margin-bottom:0;}
.detail-sheet-collapsible-body .detail-sheet-note-text{font-style:normal;}

/* Footer-Variante mit nebeneinander stehenden Buttons (CTA + Schließen) und
   eine reine Dismiss-Action (kind:'close'). */
.detail-sheet-action--close{
  background:transparent;
  border-color:var(--border);
  color:var(--text2);
}
.detail-sheet-action--close:hover,
.detail-sheet-action--close:focus-visible{
  background:rgba(var(--surface-rgba-base),.05);
  color:var(--text);
}
@media (min-width:768px){
  /* Im seitlichen Desktop-Drawer sitzen CTA und Schließen nebeneinander
     (wie im Mockup), mobil bleibt der gestapelte Bottom-Sheet-Footer. */
  .detail-sheet.detail-sheet--side .detail-sheet-actions{
    flex-direction:row;
  }
  .detail-sheet.detail-sheet--side .detail-sheet-action--primary{
    flex:1 1 auto;
  }
  .detail-sheet.detail-sheet--side .detail-sheet-action--close{
    flex:0 0 auto;
  }
}

/* ── Side-Drawer-Variante (variant:'side', Steuergesundheit-v5) ──────────────
   Auf Desktop (>=768px) dockt das Sheet rechts an wie der Dashboard-
   booking-drawer (_23f): volle Höhe, von rechts einfahren, keine
   abgerundeten Oberkanten. Mobil (<768px) greift dieser Block NICHT — dort
   bleibt es das Bottom-Sheet. Nur Sheets mit .detail-sheet--side betroffen;
   alle anderen DetailSheet-Nutzer (Dashboard/Rechnungen) sind unberührt. */
@media (min-width: 768px) {
  .detail-sheet.detail-sheet--side {
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 0;
    width: min(480px, 100vw);
    max-width: min(480px, 100vw);
    min-height: 100dvh;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 32px rgba(0, 0, 0, .4);
    animation: detail-sheet-side-in 300ms cubic-bezier(.32, .72, .25, 1);
  }
  /* Der Drag-Handle (Bottom-Sheet-Affordance) entfällt im Seitenmodus —
     geschlossen wird über das X oder den Backdrop. */
  .detail-sheet.detail-sheet--side .detail-sheet-handle {
    display: none;
  }

  /* ── Header/Scroll-Trennung wie der Buchungsdetails-Drawer (_23f) ──────────
     Referenz ist der Dashboard-booking-drawer: ein STICKY Header (eigene
     Trennlinie) über einem reinen Content-Scrollbereich. Beim Bottom-Sheet
     lebt der Header IM scrollbaren .detail-sheet-body — im Seiten-Drawer
     pinnen wir ihn per position:sticky an die Oberkante, damit (a) das X nie
     vom Scrollbalken überlagert wird, (b) nur EINE Trennlinie sichtbar ist und
     (c) der Content sauber unterhalb scrollt. Nur .detail-sheet--side; das
     Bottom-Sheet und alle anderen Nutzer bleiben unberührt. */
  .detail-sheet.detail-sheet--side .detail-sheet-body {
    /* Booking-Drawer-Innenabstand: oben 0 (Header bringt sein Padding mit),
       Seiten + unten wie _23f (24px/20px). Scroll-Gutter stabil, damit der
       Content beim Erscheinen der Scrollbar nicht springt und nicht ans X läuft. */
    padding: 0 0 20px;
    scrollbar-gutter: stable;
  }
  .detail-sheet.detail-sheet--side .detail-sheet-header {
    position: sticky;
    top: 0;
    z-index: 2;
    /* Eigene, EINZIGE Trennlinie unter dem Header (kein zweiter Strich). */
    margin: 0;
    padding: 20px 24px 18px;
    /* Platz für das X rechts (Icon 32 + 16 Rand = 48px), analog _23f-Header. */
    padding-right: 56px;
    /* var(--card) ist in beiden Modi gesetzt (dark #131722 / light white) — der
       Fallback --bg2 greift nur, falls --card je fehlte. Ein separater
       body.light-Override wäre derselbe Wert und damit redundant. */
    background: var(--card, var(--bg2));
    border-bottom: 1px solid var(--border);
  }
  /* Content-Sektionen bekommen den horizontalen Innenabstand, der vorher am
     .detail-sheet-body hing (jetzt 0, weil der sticky Header full-bleed ist). */
  .detail-sheet.detail-sheet--side .detail-sheet-body > :not(.detail-sheet-header) {
    margin-left: 24px;
    margin-right: 24px;
  }
  /* Erste Content-Sektion direkt nach dem Header bekommt etwas Luft. Adjacent-
     Sibling (.detail-sheet-header + *) statt :first-of-type: :first-of-type ist
     tag-typgebunden und würde brechen, wenn die erste Sektion den Tag-Typ des
     Headers teilt — der Nachbar-Selektor trifft robust immer das Element nach
     dem Header, egal welcher Tag. */
  .detail-sheet.detail-sheet--side .detail-sheet-body > .detail-sheet-header + * {
    margin-top: 16px;
  }

  /* ── Close-X an den Buchungsdetails-Drawer angleichen ──────────────────────
     _23f-Close: transparent, KEIN dauerhafter runder Rahmen, Icon-große Glyphe,
     dezenter text2 → Hover = card2-Fläche + voller Text. Hier identisch, nur
     der Focus-Ring (Keyboard-A11y) bleibt erhalten. In die Header-Reihe
     ausgerichtet (top/right 16px) statt am Sheet-Eck (6px). */
  .detail-sheet.detail-sheet--side .detail-sheet-close {
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    border-radius: var(--radius-pill);
    color: var(--text2);
    font-size: 22px;
    z-index: 3;
    transition: background var(--tr-fast), color var(--tr-fast);
  }
  .detail-sheet.detail-sheet--side .detail-sheet-close:hover {
    background: var(--card2);
    color: var(--text);
  }
  /* Keyboard-Focus-Ring NICHT entfernen — nur der dauerhafte Rahmen ist weg. */
  .detail-sheet.detail-sheet--side .detail-sheet-close:focus-visible {
    background: var(--card2);
    color: var(--text);
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
}
@keyframes detail-sheet-side-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .detail-sheet.detail-sheet--side { animation: none; }
}

@media(max-width:960px){
  /* Spaetere shared invoice-editor overrides koennen das Meta-Grid auf
     Mobile wieder zweispaltig machen. Fuer die V3-Composer-Seite muss die
     Hauptspalte bis 960px strikt einspaltig bleiben, damit die Customer-Card
     bei 375px nicht kollabiert. */
  .inv3-form-page .inv3-form-meta-grid,
  .inv3-form-page .inv3-form-secondary-zone{
    grid-template-columns:minmax(0,1fr);
  }
}

/* ════════════════════════════════════════════════════════════════════
   Document Editor — Cockpit Redesign (additive, SHARED UI layer)
   ────────────────────────────────────────────────────────────────────
   ONE shared visual layer for all three document editors. They already
   share the composer DOM: the root carries `.inv3-form-page` on every
   type and only the ID prefix differs:
     · Invoice           → .inv3-form-page            #inv-card-*
     · Quote / Angebot    → .inv3-form-page.q-form-page  #q-card-*
     · Recurring invoice  → .inv3-form-page.rec-form-page #rec-card-*
   So every rule here is scoped to `.inv3-form-page` (covers all three)
   and the few card-specific rules use `[id$="-card-*"]` suffix matching
   so `inv-`/`q-`/`rec-` are all hit from a single declaration — no
   per-type duplication, no triple maintenance.

   Strangler-Fig: only RESTYLES existing composer DOM. Zero markup
   contracts, zero behaviour change. Loaded last in the manifest so it
   is authoritative; fully reversible (drop the manifest line).

   Hard rules honoured:
   - No pinned source rule is edited; this file is add-only.
   - All colours via design tokens (--accent, --invoice-*, tone tokens),
     light/dark handled by the existing --invoice-* token rebinding in
     body.light, so light mode is intentional, not an inversion.
   - Gold (--accent) is the only accent. Green/red stay semantic.
   - The payment-toggle widget (paytile + green/active tick) is a
     contract-relevant component and is left untouched on purpose.
   ════════════════════════════════════════════════════════════════════ */

/* Local sugar tokens — derived from existing global tokens only. */
.inv3-form-page{
  --ic-radius-card:18px;
  --ic-radius-control:12px;
  --ic-control-h:48px;
  --ic-eyebrow-ls:.22em;
  --ic-accent-rgb:232,184,75;
  --ic-gap:26px;
}

/* ── Page rhythm ──────────────────────────────────────────────────── */
.inv3-form-page{
  padding-bottom:56px;
}

/* ── Header: tighter, premium, draft affordance ───────────────────── */
.inv3-form-page .inv3-form-header{
  gap:12px;
  margin-bottom:26px;
}
.inv3-form-page .inv3-form-title{
  font-size:clamp(26px,2.4vw,34px);
  letter-spacing:-.02em;
}
.inv3-form-page .inv3-builder-breadcrumb-current{
  letter-spacing:.18em;
  color:rgba(var(--text-rgba-base),.5);
}
/* "Entwurf"-Status als ruhiger Eyebrow neben dem Breadcrumb-Current. */
.inv3-form-page .inv3-builder-breadcrumbs::after{
  content:"Entwurf";
  margin-left:2px;
  padding:3px 9px;
  border-radius:var(--radius-pill);
  border:1px solid rgba(var(--ic-accent-rgb),.22);
  background:rgba(var(--ic-accent-rgb),.08);
  color:var(--accent3);
  font-size:10px;
  font-weight:var(--fw-bold);
  letter-spacing:var(--ic-eyebrow-ls);
  text-transform:uppercase;
}

/* ── Surfaces: warmer, deeper, premium ────────────────────────────── */
.inv3-form-page .inv3-form-card{
  border-radius:var(--ic-radius-card);
  border:1px solid var(--invoice-border);
  background:var(--invoice-surface);
  box-shadow:var(--shadow-md);
}
body:not(.light) .inv3-form-page .inv3-form-card{
  background:
    linear-gradient(180deg,
      rgba(var(--surface-rgba-base),.04),
      rgba(var(--surface-rgba-base),0) 120px),
    var(--invoice-surface);
}

/* ── Recipient / Kunde: gold accent rail + roomy header ───────────────
   [id$="-card-kunde"] hits #inv-card-kunde, #q-card-kunde,
   #rec-card-kunde from one declaration. */
.inv3-form-page [id$="-card-kunde"]{
  position:relative;
  overflow:hidden;
  padding-left:26px;
}
.inv3-form-page [id$="-card-kunde"]::before{
  content:"";
  position:absolute;
  left:0; top:18px; bottom:18px;
  width:3px;
  border-radius:var(--radius-pill);
  background:linear-gradient(180deg,var(--accent),var(--accent2));
}
.inv3-form-page [id$="-card-kunde"] .card-title,
.inv3-form-page [id$="-card-kunde"] .inv-fpage-card-header h3{
  font-size:11px;
  font-weight:var(--fw-bold);
  letter-spacing:var(--ic-eyebrow-ls);
  text-transform:uppercase;
  color:var(--invoice-text-muted);
}

/* ── Section eyebrows: editorial, gold pill ───────────────────────── */
.inv3-form-page h2.inv3-form-section-kicker{
  font-size:11px;
  letter-spacing:var(--ic-eyebrow-ls);
  color:var(--invoice-text-muted);
}
.inv3-form-page h2.inv3-form-section-kicker::before{
  width:3px;
  height:13px;
  background:var(--accent);
  opacity:.55;
}
.inv3-form-page .inv3-form-section:focus-within > h2.inv3-form-section-kicker::before{
  opacity:1;
}

/* ── Form controls: 48px, soft cards, gold focus ──────────────────── */
.inv3-form-page .inv-inp,
.inv3-form-page input[type="text"]:not([type="checkbox"]):not([type="radio"]),
.inv3-form-page input[type="number"],
.inv3-form-page input[type="email"],
.inv3-form-page input[type="search"],
.inv3-form-page select,
.inv3-form-page textarea{
  min-height:var(--ic-control-h);
  border-radius:var(--ic-radius-control);
  border:1px solid var(--invoice-border);
  background:var(--invoice-bg);
  color:var(--invoice-text-primary);
  font-size:15px;
  font-weight:var(--fw-medium);
  transition:border-color var(--tr-fast),box-shadow var(--tr-fast),background var(--tr-fast);
}
body.light .inv3-form-page .inv-inp,
body.light .inv3-form-page input[type="text"]:not([type="checkbox"]):not([type="radio"]),
body.light .inv3-form-page input[type="number"],
body.light .inv3-form-page input[type="email"],
body.light .inv3-form-page input[type="search"],
body.light .inv3-form-page select,
body.light .inv3-form-page textarea{
  background:var(--invoice-surface);
}
.inv3-form-page textarea{
  min-height:112px;
  padding:14px 16px;
  line-height:1.55;
}
.inv3-form-page .inv-inp:hover,
.inv3-form-page select:hover,
.inv3-form-page textarea:hover{
  border-color:var(--invoice-border-strong);
}
.inv3-form-page .inv-inp:focus,
.inv3-form-page .inv-inp:focus-visible,
.inv3-form-page input:focus-visible,
.inv3-form-page select:focus-visible,
.inv3-form-page textarea:focus-visible{
  outline:none;
  /* Quiet focus: subtle border lift + thin translucent gold ring.
     NOT a thick solid-gold full border (Gold = accent, not warning). */
  border-color:var(--invoice-border-strong);
  box-shadow:0 0 0 2px var(--invoice-focus-ring);
}
.inv3-form-page label{
  font-size:11px;
  font-weight:var(--fw-bold);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--invoice-text-muted);
}

/* Field-level validation stays the existing system; just refine colour. */
.inv3-form-page .field-error,
.inv3-form-page .is-invalid,
.inv3-form-page .inv-inp.field-error{
  border-color:var(--invoice-danger)!important;
  box-shadow:0 0 0 3px var(--invoice-danger-bg)!important;
}

/* Date wrap + calendar button */
.inv3-form-page .inv-date-wrap{position:relative;}
.inv3-form-page .inv-date-btn{
  position:absolute; right:6px; top:50%;
  transform:translateY(-50%);
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  color:var(--invoice-text-muted);
  cursor:pointer;
  transition:background var(--tr-fast),color var(--tr-fast);
}
.inv3-form-page .inv-date-btn:hover{
  background:rgba(var(--ic-accent-rgb),.1);
  color:var(--accent);
}
.inv3-form-page .inv-date-btn:focus-visible{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--invoice-focus-ring);
}

/* Doc-number pill */
.inv3-form-page .inv3-doc-number-preview{
  min-height:var(--ic-control-h);
  border-radius:var(--ic-radius-control);
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
}
.inv3-form-page .inv3-doc-number-toggle{
  min-height:var(--ic-control-h);
  border-radius:var(--ic-radius-control);
}

/* Payment preset row */
.inv3-form-page .inv3-payment-controls{gap:10px;}

/* "Neuen Kunden erfassen" / compact secondary buttons */
.inv3-form-page .inv-fpage-toggle-manual{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  padding:0 14px;
  border-radius:10px;
  border:1px solid var(--invoice-border);
  background:transparent;
  color:var(--invoice-text-secondary);
  font-weight:var(--fw-semibold);
  font-family:var(--font-sans);
  transition:background var(--tr-fast),color var(--tr-fast),border-color var(--tr-fast);
}
.inv3-form-page .inv-fpage-toggle-manual:hover{
  background:var(--invoice-surface-elevated);
  color:var(--invoice-text-primary);
  border-color:var(--invoice-border-strong);
}

/* ── Positionen: card-based, scannable, drag affordance ───────────── */
.inv3-form-page [id$="-card-items"].inv3-form-card{
  padding:20px 22px;
}
.inv3-form-page .inv3-lines-section-title{
  font-size:11px;
  font-weight:var(--fw-bold);
  letter-spacing:var(--ic-eyebrow-ls);
  text-transform:uppercase;
  color:var(--invoice-text-muted);
}
.inv3-form-page .inv3-items-list,
.inv3-form-page .inv3-lines{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.inv3-form-page .inv3-item-card,
.inv3-form-page .inv3-line{
  position:relative;
  border:1px solid var(--invoice-border);
  border-radius:14px;
  background:var(--invoice-surface-elevated);
  transition:border-color var(--tr-fast),box-shadow var(--tr-fast),transform var(--tr-fast),background var(--tr-fast);
}
.inv3-form-page .inv3-item-card:hover,
.inv3-form-page .inv3-line:hover{
  border-color:var(--invoice-border-strong);
}
/* A focused input INSIDE a card must not turn the whole card gold.
   Only a calm border lift — the input itself carries the focus ring. */
.inv3-form-page .inv3-item-card:focus-within,
.inv3-form-page .inv3-line:focus-within{
  border-color:var(--invoice-border-strong);
  box-shadow:none;
}
/* Drag handle affordance (visual; reorder wired by the dnd module).
   The handle element is injected by invoice-cockpit-dragdrop.js. */
.inv3-form-page .inv-cockpit-drag{
  position:absolute;
  left:8px; top:14px;
  width:22px; height:30px;
  display:flex; align-items:center; justify-content:center;
  border:0; padding:0;
  background:transparent;
  color:var(--invoice-text-muted);
  cursor:grab;
  border-radius:6px;
  touch-action:none;
  transition:color var(--tr-fast),background var(--tr-fast);
}
.inv3-form-page .inv-cockpit-drag:hover{
  color:var(--accent);
  background:rgba(var(--ic-accent-rgb),.1);
}
.inv3-form-page .inv-cockpit-drag:focus-visible{
  outline:none;
  color:var(--accent);
  box-shadow:0 0 0 3px var(--invoice-focus-ring);
}
.inv3-form-page .inv-cockpit-has-drag .inv3-item-card-head,
.inv3-form-page .inv-cockpit-has-drag .inv3-line-head{
  padding-left:30px;
}
/* While dragging: the ORIGINAL row becomes a calm placeholder; a
   full-card clone (.inv-cockpit-ghost) is the visible drag preview. */
.inv3-form-page .inv-cockpit-dragging{
  opacity:.35;
  filter:saturate(.6);
}
/* The ghost is a cloneNode of the row, so it keeps `.inv3-line.inv3-item-card`
   which carries `position:relative` (specificity 0,2,0 in _90). A bare
   `.inv-cockpit-ghost` (0,1,0) loses that cascade → the ghost stays
   position:relative, drops into body flow and shoves the whole list down.
   Match the row's compound specificity so `position:fixed` actually wins. */
.inv3-line.inv3-item-card.inv-cockpit-ghost{
  position:fixed;
  margin:0;
  z-index:1300;
  pointer-events:none;
  list-style:none;
  border-radius:14px;
  border:1px solid var(--accent);
  background:var(--invoice-surface-elevated,var(--card2));
  box-shadow:var(--shadow-lg,0 24px 60px rgba(0,0,0,.4));
  /* No static transform here: the live drag transform (translate + the same
     scale/rotate) is written per pointer-move by document-editor-dragdrop.js
     via the [data-doc-drag-ghost-rule] rule (specificity 0,1,0). A transform
     declared on this 0,3,0 class selector would WIN the cascade and strip the
     translate(), snapping the ghost to top:0/left:0 — i.e. it jumps to the top
     of the page on drag instead of following the cursor. */
  opacity:.96;
  cursor:grabbing;
  overflow:hidden;
}
body.de-cockpit-dragging,
body.de-cockpit-dragging *{
  cursor:grabbing !important;
}
.inv3-form-page .inv-cockpit-drop-before::before,
.inv3-form-page .inv-cockpit-drop-after::after{
  content:"";
  position:absolute;
  left:6px; right:6px;
  height:3px;
  border-radius:var(--radius-pill);
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(var(--ic-accent-rgb),.18);
}
.inv3-form-page .inv-cockpit-drop-before::before{top:-8px;}
.inv3-form-page .inv-cockpit-drop-after::after{bottom:-8px;}

/* ════════════════════════════════════════════════════════════════════
   Touch-DnD parity with cockpit-beta-rail (Round 32 pattern)
   (2026-05-27)  ·  shared (.inv-item-row in invoice/quote/recurrence)
   ────────────────────────────────────────────────────────────────────
   document-editor-dragdrop.js now ports the same long-press + pointer-
   events pipeline as public/js/modules/cockpit-beta-dnd.js. The CSS
   side mirrors _45i-cockpit-beta-rail.css so iOS Safari stops cancelling
   the pointermove sequence on vertical pans:
     * Default: row keeps `touch-action: pan-y` (page scrolls normally
       when the finger touches a row body but no long-press fires).
     * While `data-dnd-state="grabbed"` (set by JS): `touch-action: none`
       — iOS won't try to scroll the page underneath the ghost.
     * Touch devices (`@media (hover: none)`): drag-handle grows to a
       40×40 Apple-HIG tap target. Default size stays unchanged on
       desktop / pen.
     * Body class `de-cockpit-dragging` (existing class) gains a
       global selection-callout block in _95-document-editor-priceblock
       — no duplication here. */
.inv3-form-page .inv-item-row{
  /* pan-y = vertical page scroll still works through the row; the row
     itself doesn't react to touch by default. Long-press in JS arms the
     drag and toggles touch-action to none via [data-dnd-state] below. */
  touch-action:pan-y;
}
.inv3-form-page .inv-item-row[data-dnd-state="grabbed"]{
  touch-action:none;
}
@media (hover: none){
  /* Apple HIG-minimum tap target on touch devices. Desktop keeps the
     compact 22×30 / 30×34 sizing from _92 and _95. */
  .inv3-form-page .inv-cockpit-drag{
    width:40px;
    height:40px;
    min-width:40px;
    min-height:40px;
    padding:6px;
  }
}

/* Amounts always mono / tabular */
.inv3-form-page .inv3-item-card-total,
.inv3-form-page .inv3-line-total,
.inv3-form-page .inv3-line-total-gross,
.inv3-form-page .mono{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
}

/* ── Settings accordion + notes ───────────────────────────────────── */
.inv3-form-page .inv3-settings-accordion-title,
.inv3-form-page [id$="-card-notes"] h2.inv3-form-section-kicker{
  letter-spacing:var(--ic-eyebrow-ls);
}
.inv3-form-page [id$="-card-notes"] textarea,
.inv3-form-page textarea.inv3-notes-textarea{
  border-radius:14px;
  background:var(--invoice-surface-elevated);
}

/* ── Payment tiles ─────────────────────────────────────────────────
   The payment-toggle component (bank / GiroCode / PayPal) is a
   contract-relevant, working widget with its own internal layout and
   its own activation-tick semantics. Per the brief it must be
   PRESERVED unchanged (incl. the green/active tick display), so the
   cockpit layer only softens the OUTER card shell and never touches
   .paytile-list / .paytile / .paytile-state-tick internals. */
.inv3-form-page .payment-toggle.paytile-card,
.inv3-form-page .payment-toggle{
  border-radius:var(--ic-radius-card);
}

/* ── Summary rail: premium, mono, gold divider + total ────────────── */
.inv3-form-page .inv3-form-summary-zone{
  top:88px;
  gap:14px;
}
.inv3-form-page .inv3-form-action-summary{
  border-radius:var(--ic-radius-card);
  border:1px solid var(--invoice-border);
  background:var(--invoice-surface);
  padding:24px 22px;
  box-shadow:var(--shadow-md);
}
.inv3-form-page .inv3-builder-rail-label,
.inv3-form-page .inv3-action-summary-copy .inv3-builder-rail-label{
  font-size:11px;
  letter-spacing:var(--ic-eyebrow-ls);
  color:var(--invoice-text-muted);
}
.inv3-form-page .inv-totals-table{
  width:100%;
  border-collapse:collapse;
}
.inv3-form-page .inv-totals-table td{
  padding:7px 0;
  font-size:14px;
  color:var(--invoice-text-secondary);
}
/* A11y FM7-b: Label-Zellen sind jetzt <th scope="row"> — th gleichwertig zur
   Label-td (Padding/Größe/Farbe), linksbündig, font-weight:inherit fürs
   <strong> in der Brutto-Zeile. */
.inv3-form-page .inv-totals-table th{
  padding:7px 0;
  font-size:14px;
  color:var(--invoice-text-secondary);
  font-weight:inherit;
  text-align:left;
}
.inv3-form-page .inv-totals-table td.r{
  text-align:right;
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  color:var(--invoice-text-primary);
  padding-right:4px;
}
/* Gold divider above the total row (mockup: 1px accent line). */
.inv3-form-page .inv-totals-table tr.inv-total-gross{
  border-top:1px solid rgba(var(--ic-accent-rgb),.55);
}
.inv3-form-page .inv-totals-table tr.inv-total-gross td,
.inv3-form-page .inv-totals-table tr.inv-total-gross th{
  padding-top:14px;
  color:var(--invoice-text-primary);
}
.inv3-form-page .inv3-hero-total{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:clamp(24px,2.4vw,30px);
  font-weight:var(--fw-extrabold);
  letter-spacing:-.03em;
  color:var(--accent);
}
.inv3-form-page .inv3-hero-total--empty{
  color:var(--invoice-text-muted);
}
.inv3-form-page .inv3-hero-total-subline{
  color:var(--invoice-text-muted);
  font-size:12px;
}

/* Rail actions */
.inv3-form-page .inv3-form-action-summary .btn{
  min-height:46px;
  border-radius:12px;
  font-family:var(--font-sans);
  font-weight:var(--fw-bold);
  font-size:14px;
}
.inv3-form-page .inv3-form-action-summary .btn-p{
  background:var(--accent);
  color:var(--accent-ink);
  border:1px solid rgba(var(--ic-accent-rgb),.9);
}
.inv3-form-page .inv3-form-action-summary .btn-p:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
}
.inv3-form-page .inv3-form-action-summary .btn-g,
.inv3-form-page .inv3-form-action-summary .btn-ghost{
  background:transparent;
  border:1px solid var(--invoice-border);
  color:var(--invoice-text-secondary);
}
.inv3-form-page .inv3-form-action-summary .btn-g:hover,
.inv3-form-page .inv3-form-action-summary .btn-ghost:hover{
  background:var(--invoice-surface-elevated);
  color:var(--invoice-text-primary);
  border-color:var(--invoice-border-strong);
}
.inv3-form-page .inv3-form-action-summary .btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--invoice-focus-ring);
}
.inv3-form-page .inv-bcc-self-label{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--invoice-text-secondary);
}

/* ── Mobile bar polish ────────────────────────────────────────────── */
.inv3-form-page .inv3-form-mobile-bar{
  border-top:1px solid var(--invoice-border);
  background:var(--invoice-surface);
  backdrop-filter:saturate(140%) blur(6px);
}
.inv3-form-page .inv3-form-mobile-bar .btn{
  min-height:46px;
  border-radius:12px;
  font-weight:var(--fw-bold);
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width:1023px){
  .inv3-form-page .inv3-form-summary-zone{
    position:static;
    max-height:none;
  }
}
@media (max-width:640px){
  .inv3-form-page{
    /* Scroll-Polster für die fixe Mobile-Action-Bar. MUSS bar-aware bleiben:
       die Bar ist real ~142px hoch (Meta-Zeile + 2-Button-Grid), ein hartes
       96px (vorheriger Wert) verdeckte die letzte Positionskarte. Gleiche
       Formel wie _31/_33 — `--inv3-mobile-bar-offset` wird in
       modules/inv3-form-mobile-bar.js auf die echte Bar-Höhe gemessen. */
    padding-bottom:calc(var(--inv3-mobile-bar-offset,142px) + 24px + env(safe-area-inset-bottom, 0px));
  }
  .inv3-form-page .inv3-form-card,
  .inv3-form-page [id$="-card-items"].inv3-form-card{
    padding:16px;
  }
  .inv3-form-page [id$="-card-kunde"]{
    padding-left:18px;
  }
  .inv3-form-page .inv3-hero-total{
    font-size:clamp(22px,7vw,28px);
  }
  .inv3-form-page .inv-cockpit-drag{
    width:30px; height:34px;
  }
  .inv3-form-page .inv3-form-action-summary .btn,
  .inv3-form-page .inv3-form-mobile-bar .btn{
    min-height:48px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   UI/UX Fix-Pass (2026-05-16) — shared across invoice / quote /
   recurrence (all `.inv3-form-page`). Pure presentation; no markup,
   no logic. Overrides the shared item-builder base in _41.
   ════════════════════════════════════════════════════════════════════ */

/* (1) Positionsnummer bleibt auf der Hauptzeile — kein Verrutschen beim
   Aufklappen. Der Head ist ein Grid mit align-items:center (Basis _41);
   wir pinnen NUR den Chip an den Anfang und richten ihn auf die
   vertikale Mitte des primären Inputs (48px) der ersten Zeile aus.
   Detail-Rows (Rabatt/Beschreibung/Body) liegen ohnehin ausserhalb des
   Headers, beeinflussen den Chip also nicht mehr. */
.inv3-form-page .inv3-line-chip{
  align-self:start;
  margin-top:13px;
}
.inv3-form-page .inv3-item-card-head{
  align-items:start;
}
/* Primärzeilen-Zellen wieder mittig zur Inputhöhe (nur der Chip bleibt
   oben verankert → stabil in beiden States). */
.inv3-form-page .inv3-line-cell--name,
.inv3-form-page .inv3-line-pricing-group,
.inv3-form-page .inv3-item-card-summary,
.inv3-form-page .inv3-item-card-actions{
  align-self:center;
}

/* (5) IconButtons: EIN System für Dark & Light. Ruhige Fläche, kein
   harter Border (besonders Light), konsistente Größe/Radius. */
.inv3-form-page .inv3-item-iconbtn{
  border:1px solid transparent;
  background:rgba(var(--surface-rgba-base),.05);
  color:var(--invoice-text-muted);
  border-radius:10px;
  transition:background var(--tr-fast),color var(--tr-fast);
}
.inv3-form-page .inv3-item-iconbtn:hover{
  background:rgba(var(--surface-rgba-base),.10);
  color:var(--invoice-text-primary);
  transform:none;
}
body.light .inv3-form-page .inv3-item-iconbtn{
  border-color:transparent;
  background:rgba(var(--text-rgba-base),.04);
  color:var(--invoice-text-secondary);
}
body.light .inv3-form-page .inv3-item-iconbtn:hover{
  background:rgba(var(--text-rgba-base),.07);
}
.inv3-form-page .inv3-item-iconbtn:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--invoice-focus-ring);
}
/* Action-Gruppe: ruhige, kompakte Einheit statt loser Einzelbuttons.
   Dezenter Gruppen-Hintergrund + tighter gap → liest sich als EIN Control.
   2026-06-05. */
.inv3-form-page .inv3-item-card-actions{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px;
  margin-right:6px;
  border-radius:12px;
  background:rgba(var(--surface-rgba-base),.04);
  border:1px solid rgba(var(--surface-rgba-base),.06);
}
body.light .inv3-form-page .inv3-item-card-actions{
  background:rgba(var(--text-rgba-base),.03);
  border-color:rgba(var(--text-rgba-base),.06);
}
/* Innerhalb der Gruppe brauchen die IconButtons keinen eigenen Flächen-BG —
   die Gruppe trägt sie; Hover bleibt als Affordance. Touch-Ziel ≥40×40 (auch
   Desktop) — schlägt die _90-Regel (.inv3-line-actions .inv3-item-iconbtn 32px).
   Mobile (_95c) bleibt bei 44px (höhere Spezifität / Container-Query). */
.inv3-form-page .inv3-item-card-actions .inv3-item-iconbtn,
.inv3-form-page .inv3-item-card-actions .inv3-item-menu-trigger,
.inv3-form-page .inv3-item-card-actions .inv3-item-collapse,
.inv3-form-page .inv3-item-card-actions .inv3-line-trash{
  background:transparent;
  min-width:40px;
  min-height:40px;
}
.inv3-form-page .inv3-item-card-actions .inv3-item-iconbtn:hover{
  background:rgba(var(--surface-rgba-base),.10);
}
body.light .inv3-form-page .inv3-item-card-actions .inv3-item-iconbtn:hover{
  background:rgba(var(--text-rgba-base),.07);
}
.inv3-form-page .inv3-item-card-head{
  padding-right:16px;
}

/* (6) Rein informative Summenzeilen sind NICHT hoverbar/klickbar. */
.inv3-form-page .inv-totals-table,
.inv3-form-page .inv-totals-table tr,
.inv3-form-page .inv-totals-table td,
.inv3-form-page .inv-totals-table th,
.inv3-form-page .inv-totals-table tr.inv-total-gross{
  cursor:default;
}
.inv3-form-page .inv-totals-table tr:hover,
.inv3-form-page .inv-totals-table tr.inv-total-gross:hover,
.inv3-form-page .inv-totals-table tbody tr:hover{
  background:transparent;
}

/* (7) Positionsbereich ruhiger: weichere Inputs in der Card, klare
   Hierarchie zwischen Hauptzeile und optionalen Detail-Links. */
.inv3-form-page .inv3-item-card .inv-inp,
.inv3-form-page .inv3-line .inv-inp,
.inv3-form-page .inv3-line-title-input,
.inv3-form-page .inv3-items-desc-input{
  background:var(--invoice-bg);
  border-color:var(--invoice-border);
}
body.light .inv3-form-page .inv3-item-card .inv-inp,
body.light .inv3-form-page .inv3-line .inv-inp,
body.light .inv3-form-page .inv3-line-title-input,
body.light .inv3-form-page .inv3-items-desc-input{
  background:var(--invoice-surface);
}
/* Sekundäre Detail-Trigger ("+ Rabatt", "+ Beschreibung") dezenter,
   klar untergeordnet zur Hauptzeile. */
.inv3-form-page .inv3-line-desc-toggle,
.inv3-form-page .inv3-line-discount-add{
  color:var(--invoice-text-muted);
  font-size:12.5px;
  font-weight:var(--fw-semibold);
}
.inv3-form-page .inv3-line-desc-toggle:hover,
.inv3-form-page .inv3-line-discount-add:hover{
  color:var(--accent);
}
.inv3-form-page .inv3-line-desc-row,
.inv3-form-page .inv3-line-discount-row{
  padding:0 16px 12px;
}
/* Card-Fläche leicht erhöht, aber kein schwerer Container. */
.inv3-form-page .inv3-item-card,
.inv3-form-page .inv3-line{
  background:var(--invoice-surface-elevated);
  box-shadow:none;
}
.inv3-form-page .inv3-item-card:hover,
.inv3-form-page .inv3-line:hover{
  box-shadow:var(--shadow-sm);
}

/* (8) Summary-Panel ruhiger: statische Zeilen nicht interaktiv,
   bewusste Abstände, Betrag stark aber nicht schreiend. */
.inv3-form-page .inv3-form-action-summary{
  gap:14px;
}
.inv3-form-page .inv-totals-table td,
.inv3-form-page .inv-totals-table th{
  padding:8px 0;
}
.inv3-form-page .inv3-form-action-summary .inv3-form-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* ════════════════════════════════════════════════════════════════════
   Positionen-Toolbar — Primär/Sekundär-Button-Hierarchie (2026-06-05)
   ────────────────────────────────────────────────────────────────────
   Ausgelagert aus _92-document-editor-cockpit.css (LOC-Limit). Lädt nach
   _92 → gewinnt die Kaskade bei gleicher Spezifität.

   „Position hinzufügen" = primärer Gold-CTA, orientiert 1:1 an der App-
   Topbar-CTA (.shell-topbar-cta: --accent / --accent-ink). Default schon
   golden (vorher transparent+dashed → zu lasch). Präsent, aber NICHT
   lauter als die globale Topbar-CTA. „Aus Vorlage" bleibt sekundär.
   ════════════════════════════════════════════════════════════════════ */
.inv3-form-page .inv3-items-toolbar{
  margin-top:14px;
}
.inv3-form-page .inv3-items-toolbar-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:46px;
  padding:0 22px;
  border-radius:12px;
  font-family:var(--font-sans);
  font-weight:var(--fw-bold);
  line-height:1;
  transition:background var(--tr-fast),border-color var(--tr-fast),
             color var(--tr-fast),box-shadow var(--tr-fast),transform var(--tr-fast);
}
.inv3-form-page .inv3-items-toolbar-btn .inv3-items-toolbar-plus-icon{
  margin:0;             /* _41-Default margin-right neutralisieren — gap regelt Abstand */
  flex:0 0 auto;
}

/* Primary — voller Gold-Default (Topbar-CTA-Token), dezenter Inner-Highlight
   + sehr subtiler Glow. Kein Warnbutton-Look. */
.inv3-form-page .inv3-items-toolbar-btn--primary{
  border:1px solid var(--accent2);
  background:var(--accent);
  color:var(--accent-ink);
  /* stylelint-disable-next-line declaration-property-value-disallowed-list --
     Inner-Highlight auf dem THEMEUNABHÄNGIG goldenen CTA muss in Dark+Light
     weiß sein; --surface-rgba-base kippt in Light auf 0,0,0 (schwarz). */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),
             0 1px 2px rgba(var(--ic-accent-rgb),.28);
}
.inv3-form-page .inv3-items-toolbar-btn--primary:hover{
  background:var(--accent3);
  border-color:var(--accent2);
  color:var(--accent-ink);
  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- s.o. (goldener CTA, weißer Glanz themeunabhängig) */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),
             0 2px 6px rgba(var(--ic-accent-rgb),.32);
}
.inv3-form-page .inv3-items-toolbar-btn--primary:active{
  background:var(--accent2);
  transform:translateY(1px);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.18);
}
.inv3-form-page .inv3-items-toolbar-btn--primary:focus-visible{
  outline:none;
  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- s.o. (goldener CTA, weißer Glanz themeunabhängig) */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),
             0 0 0 3px rgba(var(--ic-accent-rgb),.4);
}
.inv3-form-page .inv3-items-toolbar-btn--primary:disabled,
.inv3-form-page .inv3-items-toolbar-btn--primary[aria-disabled="true"]{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* Secondary — ruhig, neutral, kein Gold-Fill, dezente Border. */
.inv3-form-page .inv3-items-toolbar-btn--secondary{
  border:1px solid var(--invoice-border);
  background:var(--invoice-surface);
  color:var(--invoice-text-secondary);
  box-shadow:none;
}
.inv3-form-page .inv3-items-toolbar-btn--secondary:hover{
  border-color:var(--invoice-border-strong);
  background:var(--invoice-surface-elevated);
  color:var(--invoice-text-primary);
}
.inv3-form-page .inv3-items-toolbar-btn--secondary:active{
  transform:translateY(1px);
}
.inv3-form-page .inv3-items-toolbar-btn--secondary:focus-visible{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--ic-accent-rgb),.28);
}
.inv3-form-page .inv3-items-toolbar-btn--secondary:disabled,
.inv3-form-page .inv3-items-toolbar-btn--secondary[aria-disabled="true"]{
  opacity:.5;
  cursor:not-allowed;
}

/* ════════════════════════════════════════════════════════════════════
   Document Editor — Send Modal (shared, boxed overlay)
   ────────────────────────────────────────────────────────────────────
   ONE reusable boxed modal shell for the document send flow (invoice
   today; offer reuses the same shell via the adapter). Centered overlay
   ON TOP of the editor — the editor stays mounted in the background, no
   page change. Token-driven, light/dark aware, additive, reversible.
   ════════════════════════════════════════════════════════════════════ */

.de-modal-overlay{
  position:fixed;
  inset:0;
  z-index:1200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:var(--invoice-overlay,rgba(3,7,18,.72));
  -webkit-backdrop-filter:saturate(140%) blur(3px);
  backdrop-filter:saturate(140%) blur(3px);
  opacity:0;
  transition:opacity var(--tr-base,160ms ease);
}
.de-modal-overlay.is-open{opacity:1;}
body.de-modal-lock{overflow:hidden;}

.de-modal{
  width:min(940px,calc(100vw - 32px));
  max-height:calc(100vh - 48px);
  display:flex;
  flex-direction:column;
  background:var(--invoice-surface,var(--card));
  color:var(--invoice-text-primary,var(--text));
  border:1px solid var(--invoice-border,var(--border));
  border-radius:22px;
  box-shadow:var(--shadow-lg,0 24px 80px rgba(0,0,0,.38));
  transform:translateY(8px) scale(.99);
  transition:transform var(--tr-base,160ms ease);
}
.de-modal-overlay.is-open .de-modal{transform:none;}

/* Header */
.de-modal-head{
  display:flex;
  align-items:center;
  gap:14px;
  padding:22px 28px;
  border-bottom:1px solid var(--invoice-border,var(--border));
}
.de-modal-head-icon{
  width:38px;height:38px;
  flex:0 0 38px;
  display:flex;align-items:center;justify-content:center;
  border-radius:11px;
  background:rgba(232,184,75,.12);
  color:var(--accent);
}
.de-modal-title{
  margin:0;
  flex:1;
  min-width:0;
  font-family:var(--font-sans);
  font-size:18px;
  font-weight:var(--fw-extrabold,800);
  letter-spacing:-.01em;
  color:var(--invoice-text-primary,var(--text));
}
.de-modal-close{
  width:36px;height:36px;
  flex:0 0 36px;
  display:flex;align-items:center;justify-content:center;
  border:0;
  background:transparent;
  color:var(--invoice-text-muted,var(--text3));
  border-radius:10px;
  cursor:pointer;
  font-size:20px;
  transition:background var(--tr-fast,120ms ease),color var(--tr-fast,120ms ease);
}
.de-modal-close:hover{
  background:rgba(148,163,184,.12);
  color:var(--invoice-text-primary,var(--text));
}
.de-modal-close:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--invoice-focus-ring,rgba(232,184,75,.2));
}

/* Body (scrolls internally) */
.de-modal-body{
  padding:26px 28px;
  overflow-y:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.de-field{display:flex;flex-direction:column;gap:8px;min-width:0;}
.de-field--full{grid-column:1 / -1;}
.de-field label{
  font-size:11px;
  font-weight:var(--fw-bold,700);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--invoice-text-muted,var(--text3));
}
.de-field input,
.de-field textarea{
  width:100%;
  min-height:46px;
  padding:11px 14px;
  border-radius:12px;
  border:1px solid var(--invoice-border,var(--border));
  background:var(--invoice-bg,var(--bg));
  color:var(--invoice-text-primary,var(--text));
  font-family:var(--font-sans);
  font-size:15px;
  font-weight:var(--fw-medium,500);
  box-sizing:border-box;
  transition:border-color var(--tr-fast,120ms ease),box-shadow var(--tr-fast,120ms ease);
}
body.light .de-field input,
body.light .de-field textarea{background:var(--invoice-surface);}
.de-field textarea{min-height:188px;resize:vertical;line-height:1.55;}
.de-field input:focus-visible,
.de-field textarea:focus-visible{
  outline:none;
  /* Quiet focus, consistent with the editor: subtle border + thin ring,
     no thick solid-gold full border. */
  border-color:var(--invoice-border-strong,var(--border2));
  box-shadow:0 0 0 2px var(--invoice-focus-ring,rgba(232,184,75,.2));
}
.de-field input[readonly]{
  opacity:.85;
  cursor:default;
}
.de-field-hint{
  font-size:12px;
  color:var(--invoice-text-muted,var(--text3));
}
.de-modal-options{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  gap:22px;
}
.de-check{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  color:var(--invoice-text-secondary,var(--text2));
  cursor:pointer;
}
.de-check input{width:18px;height:18px;accent-color:var(--accent);}
.de-check.is-locked{opacity:.7;cursor:default;}

.de-presend-state{
  grid-column:1 / -1;
  padding:14px 16px;
  border:1px solid var(--invoice-border,var(--border));
  border-radius:12px;
  background:var(--invoice-surface,var(--card));
}
.de-presend-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px;}
.de-presend-head h3{margin:0;font-size:14px;color:var(--invoice-text-primary,var(--text));}
.de-presend-head span{font-size:11px;color:var(--invoice-text-muted,var(--text3));}
.de-presend-list{display:grid;gap:7px;}
.de-presend-item{display:flex;gap:8px;align-items:baseline;font-size:12px;line-height:1.4;}
.de-presend-item strong{min-width:132px;color:var(--invoice-text-secondary,var(--text2));}
.de-presend-item span{color:var(--invoice-text-muted,var(--text3));}
.de-presend-item--blockers strong{color:var(--invoice-danger,var(--tone-poor-fg));}
.de-presend-item--reviews strong{color:var(--invoice-warning,var(--tone-warn-fg));}
.de-presend-item--supported strong{color:var(--invoice-success,var(--tone-good-fg));}

/* Footer */
.de-modal-foot{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:14px;
  padding:20px 28px;
  border-top:1px solid var(--invoice-border,var(--border));
}
.de-btn{
  min-height:46px;
  padding:0 22px;
  border-radius:12px;
  font-family:var(--font-sans);
  font-size:14px;
  font-weight:var(--fw-bold,700);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:filter var(--tr-fast,120ms ease),transform var(--tr-fast,120ms ease),background var(--tr-fast,120ms ease);
}
.de-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--invoice-focus-ring,rgba(232,184,75,.2));
}
.de-btn--secondary{
  background:transparent;
  border:1px solid var(--invoice-border,var(--border));
  color:var(--invoice-text-secondary,var(--text2));
}
.de-btn--secondary:hover{
  background:var(--invoice-surface-elevated,var(--card2));
  color:var(--invoice-text-primary,var(--text));
}
.de-btn--primary{
  background:var(--accent);
  border:1px solid rgba(232,184,75,.9);
  color:var(--accent-ink);
}
.de-btn--primary:hover{filter:brightness(1.05);transform:translateY(-1px);}
.de-btn--primary[disabled]{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
  filter:none;
}

/* Tablet / mobile: near full-screen sheet, footer reachable */
@media (max-width:720px){
  .de-modal-overlay{padding:0;}
  .de-modal{
    width:100vw;
    max-height:100vh;
    height:100vh;
    border-radius:0;
    border:0;
  }
  .de-modal-body{
    grid-template-columns:1fr;
    padding:20px 18px;
  }
  .de-modal-head,
  .de-modal-foot{padding-left:18px;padding-right:18px;}
  .de-modal-foot{
    position:sticky;
    bottom:0;
    background:var(--invoice-surface,var(--card));
  }
  .de-btn{flex:1;justify-content:center;min-height:48px;}
}

/* AUTO-SPLIT from _92 to respect the 800-LOC partial cap.
   Document-Editor Positionen-Composer Pass 2 — shared invoice/quote/
   recurrence (.inv3-form-page). Loaded right after _92. */


/* ════════════════════════════════════════════════════════════════════
   Positionen-Composer Pass 2 (2026-05-16) — shared invoice/quote/
   recurrence (.inv3-form-page). Pure presentation; no markup/logic.
   ════════════════════════════════════════════════════════════════════ */

/* (1) "ENTWURF"-Status-Chip: kontrastreicher Amber, vertikal mittig,
   in Light & Dark klar lesbar (kein blasser Pastellton). */
.inv3-form-page .inv3-builder-breadcrumbs::after{
  display:inline-flex;
  align-items:center;
  min-height:20px;
  padding:2px 10px;
  border:1px solid rgba(var(--ic-accent-rgb),.5);
  background:rgba(var(--ic-accent-rgb),.16);
  color:var(--accent3);
  font-weight:var(--fw-extrabold,800);
  letter-spacing:.18em;
}
body.light .inv3-form-page .inv3-builder-breadcrumbs::after{
  border-color:rgba(var(--ic-accent-rgb),.55);
  background:rgba(var(--ic-accent-rgb),.2);
  color:var(--accent2);
}

/* (6) Reihenfolge ohne DOM-Eingriff: Card als Flex-Spalte, danach
   Header → Beschreibung → Rabatt → Body. Beschreibung kommt VOR
   Rabatt. (Chip liegt im Header-Grid, bleibt unberührt.) */
.inv3-form-page .inv3-item-card,
.inv3-form-page .inv3-line{
  display:flex;
  flex-direction:column;
}
.inv3-form-page .inv3-item-card-head{order:0;}
.inv3-form-page .inv3-line-discount-row{order:2;}
.inv3-form-page .inv3-item-card-body{order:3;}
.inv3-form-page .inv3-item-card > .visually-hidden{order:-1;}

/* (7/6) Beschreibung & Rabatt ruhiger, klar als Teil der Position.
   Vertikale Abstände werden final in _95-priceblock kompaktiert (lädt nach
   _94 → gewinnt). Hier nur die horizontale Innenkante. */
.inv3-form-page .inv3-line-desc-row,
.inv3-form-page .inv3-line-discount-row{
  padding-right:16px;
}
.inv3-form-page .inv3-items-desc-input{
  min-height:64px;
  background:var(--invoice-bg);
  border-color:var(--invoice-border);
}
body.light .inv3-form-page .inv3-items-desc-input{
  background:var(--invoice-surface);
}
.inv3-form-page .inv3-line-discount-add,
.inv3-form-page .inv3-line-desc-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:32px;
  padding:0 12px;
  border-radius:var(--radius-pill,999px);
  border:1px solid var(--invoice-border);
  background:rgba(var(--surface-rgba-base),.04);
  color:var(--invoice-text-secondary);
  font-size:12.5px;
  font-weight:var(--fw-semibold);
}
.inv3-form-page .inv3-line-discount-add:hover,
.inv3-form-page .inv3-line-desc-toggle:hover{
  border-color:rgba(var(--ic-accent-rgb),.4);
  color:var(--accent);
  background:rgba(var(--ic-accent-rgb),.07);
}

/* (4) Neues read-only "USt-Betrag"-Feld: wie ein Input, aber gedämpft
   und nicht editierbar. Sitzt im Summary-Cluster. */
.inv3-form-page .inv-cockpit-ust-field{display:flex;flex-direction:column;gap:5px;}
.inv3-form-page .inv-cockpit-ust-value{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-height:var(--ic-control-h);
  min-width:124px;
  padding:0 12px;
  border-radius:var(--ic-radius-control);
  border:1px dashed var(--invoice-border);
  background:rgba(var(--surface-rgba-base),.05);
  color:var(--invoice-text-secondary);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
body.light .inv3-form-page .inv-cockpit-ust-value{
  background:rgba(var(--text-rgba-base),.04);
}

/* (2/5/12) Stabiler Betrags-/Steuer-Cluster: gleiche Höhe, rechtsbündig,
   tabular-nums, kein Überlappen/Rutschen.
   2026-06-05: USt liest sich als EIGENE Spalte — eigener Abstand zum Gesamt-
   betrag (nicht angeklebt), Gesamt typografisch priorisiert. */
.inv3-form-page .inv3-item-card-summary{
  flex-direction:row;
  align-items:flex-end;
  gap:18px;                 /* mehr Luft → USt klebt nicht am Gesamtbetrag */
  min-width:0;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.inv3-form-page .inv3-item-card-summary .inv3-item-field{
  min-width:0;
}
.inv3-form-page .inv3-item-card-summary .inv3-item-field--tax{
  /* USt als ruhige, eigenständige Spalte (Brief ~112 px). */
  flex:0 0 auto;
  min-width:96px;
}
.inv3-form-page .inv3-line-tax-select{
  min-width:96px;
  text-align:left;
}
.inv3-form-page .inv3-item-card-total,
.inv3-form-page .inv3-line-total-gross,
.inv3-form-page .inv-line-total{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-height:var(--ic-control-h);
  min-width:140px;          /* Gesamtbetrag nie gequetscht (Brief: ruhig rechts) */
  font-variant-numeric:tabular-nums;
  font-size:19px;           /* Gesamt typografisch priorisiert */
  font-weight:var(--fw-bold);
  letter-spacing:-.01em;
  white-space:nowrap;
}
.inv3-form-page .inv3-item-card .inv-inp,
.inv3-form-page .inv3-line .inv-inp{
  min-height:var(--ic-control-h);
  font-variant-numeric:tabular-nums;
}
.inv3-form-page .inv3-item-field--qty input,
.inv3-form-page .inv3-item-field--price input{
  text-align:right;
}

/* (9) Action-Buttons: vertikal mittig zur Hauptzeile, Löschen dezent
   und erst auf Hover prägnanter. */
.inv3-form-page .inv3-item-card-actions{
  align-self:center;
  align-items:center;
}
.inv3-form-page .inv3-line-trash{
  color:var(--invoice-text-muted);
  opacity:.7;
}
.inv3-form-page .inv3-line-trash:hover{
  opacity:1;
  color:var(--invoice-danger);
  background:var(--invoice-danger-bg);
}
.inv3-form-page .inv3-item-collapse svg{transition:transform var(--tr-fast,160ms ease);}

/* (10) Card-Tiefe & Trennung: dezent, mehr Ruhe, aktive Position
   mit Amber-Akzent. */
.inv3-form-page .inv3-items-list{
  gap:12px;
}
.inv3-form-page .inv3-item-card,
.inv3-form-page .inv3-line{
  border:1px solid var(--invoice-border);
  border-radius:14px;
  background:var(--invoice-surface-elevated);
}
.inv3-form-page .inv3-item-card:hover,
.inv3-form-page .inv3-line:hover{
  box-shadow:var(--shadow-sm);
}
/* Aktive/fokussierte Position = ruhige Fokus/Selektions-Optik (2026-06-05:
   noch subtiler). Gold NUR als zarter Akzent, KEINE kräftige Alarmkante.
   Wirkung primär über leichten Surface-Shift + weichen, neutralen Shadow;
   der Gold-Border bleibt sehr dezent. */
.inv3-form-page .inv3-items-builder--single-active .inv3-item-card[data-active="1"],
.inv3-form-page .inv3-line[data-active="1"]{
  border-color:rgba(var(--ic-accent-rgb),.24);
  background:var(--invoice-surface-elevated);
  box-shadow:0 1px 2px rgba(0,0,0,.04),
             0 8px 22px rgba(0,0,0,.10);
}
body.light .inv3-form-page .inv3-items-builder--single-active .inv3-item-card[data-active="1"],
body.light .inv3-form-page .inv3-line[data-active="1"]{
  border-color:rgba(var(--ic-accent-rgb),.28);
  box-shadow:0 1px 2px rgba(15,23,42,.04),
             0 8px 22px rgba(15,23,42,.07);
}

/* (11) Summary-Panel: Netto · USt · Brutto, Brutto am stärksten.
   A11y FM7-b: Label-Zellen sind jetzt <th scope="row"> — th gleichwertig zur
   Label-td erfassen, damit die Brutto-Zeile optisch identisch bleibt. */
.inv3-form-page .inv-totals-table td,
.inv3-form-page .inv-totals-table th{
  font-variant-numeric:tabular-nums;
}
.inv3-form-page .inv-totals-table tr.inv-total-gross td,
.inv3-form-page .inv-totals-table tr.inv-total-gross th{
  font-size:16px;
  font-weight:var(--fw-extrabold,800);
  color:var(--invoice-text-primary);
}

/* (14) Responsive: Pricing + Summary brechen sauber um, kein Overlap. */
@media (max-width:1080px){
  .inv3-form-page .inv3-line-pricing-group{flex-wrap:wrap;}
  .inv3-form-page .inv3-item-card-summary{
    width:100%;
    justify-content:flex-start;
  }
}
@media (max-width:640px){
  .inv3-form-page .inv3-item-card-head{
    grid-template-columns:auto minmax(0,1fr);
  }
  .inv3-form-page .inv-cockpit-ust-value,
  .inv3-form-page .inv3-item-card-total{
    min-width:0;
    width:100%;
  }
  .inv3-form-page .inv3-line-desc-row,
  .inv3-form-page .inv3-line-discount-row{
    padding:10px 14px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Oberbereich-Pass 3 (2026-05-16) — shared invoice/quote/recurrence
   (.inv3-form-page). Pure presentation; no markup/logic/contract.
   ════════════════════════════════════════════════════════════════════ */

/* (1) Summenüberblick NICHT mehr per Default sticky/slidend. Statisch
   im Grid. Sticky NUR conditional (Desktop) wenn optionale Abschnitte
   offen sind → JS setzt .de-summary-sticky am Form-Root. */
.inv3-form-page .inv3-form-summary-zone{
  position:static;
  top:auto;
  align-self:start;
}
@media (min-width:1024px){
  .inv3-form-page.de-summary-sticky .inv3-form-summary-zone{
    position:sticky;
    top:88px;
  }
}
@media (max-width:1023px){
  /* Mobile/Tablet: niemals sticky. */
  .inv3-form-page .inv3-form-summary-zone,
  .inv3-form-page.de-summary-sticky .inv3-form-summary-zone{
    position:static;
    top:auto;
  }
}

/* (2) Moderner Dokument-Header: kleine ruhige Zurück-Aktion OBEN,
   darunter großer Titel mit Status-Chip. Keine Slash-Breadcrumb. */
.inv3-form-page .inv3-form-header-main{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}
.inv3-form-page .inv3-builder-header-top{order:0;}
.inv3-form-page .inv3-builder-breadcrumbs{order:1;margin:0;}
.inv3-form-page .inv3-form-title{order:2;}
.inv3-form-page .inv3-form-sub{order:3;}
/* Slash + redundantes "Neu" raus. */
.inv3-form-page .inv3-builder-breadcrumb-sep,
.inv3-form-page .inv3-builder-breadcrumb-current{
  display:none;
}
/* Zurück-Aktion: ruhiger Text-Button "← Zurück zu Rechnungen". */
.inv3-form-page .inv-back-btn.inv3-builder-crumb,
.inv3-form-page .inv3-builder-breadcrumbs .inv3-builder-crumb{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:30px;
  padding:0 10px 0 8px;
  border-radius:var(--radius-pill,999px);
  border:1px solid var(--invoice-border);
  background:rgba(var(--surface-rgba-base),.04);
  color:var(--invoice-text-secondary);
  font-size:12.5px;
  font-weight:var(--fw-semibold);
  letter-spacing:0;
  text-transform:none;
}
.inv3-form-page .inv-back-btn.inv3-builder-crumb:hover{
  border-color:var(--invoice-border-strong);
  color:var(--invoice-text-primary);
  background:var(--invoice-surface-elevated);
}
.inv3-form-page .inv-back-btn.inv3-builder-crumb::after{
  content:"Zurück zu Rechnungen";
}
/* Den nativen Label-Textknoten "Rechnungen" verbergen, ::after liefert
   den klaren Text (Icon bleibt sichtbar). */
.inv3-form-page .inv-back-btn.inv3-builder-crumb{font-size:0;}
.inv3-form-page .inv-back-btn.inv3-builder-crumb svg{width:13px;height:13px;}
.inv3-form-page .inv-back-btn.inv3-builder-crumb::after{font-size:12.5px;}

/* Titel + Status-Chip nebeneinander, vertikal mittig. */
.inv3-form-page .inv3-form-title{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}
/* Alten Chip an der Breadcrumb-Zeile entfernen … */
.inv3-form-page .inv3-builder-breadcrumbs::after{
  content:none;
  display:none;
}
/* … und als Status-Chip direkt am Titel platzieren. */
.inv3-form-page .inv3-form-title::after{
  content:"Entwurf";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:30px;
  padding:0 12px;
  border-radius:var(--radius-pill,999px);
  border:1px solid rgba(var(--ic-accent-rgb),.5);
  background:rgba(var(--ic-accent-rgb),.16);
  color:var(--accent3);
  font-size:12px;
  font-weight:var(--fw-extrabold,800);
  letter-spacing:.06em;
  text-transform:uppercase;
}
body.light .inv3-form-page .inv3-form-title::after{
  border-color:rgba(var(--ic-accent-rgb),.55);
  background:rgba(var(--ic-accent-rgb),.2);
  color:var(--accent2);
}

/* (5/6) Kunde + Rechnungsdaten als zusammengehöriger
   „Rechnungsdetails"-Block: gemeinsame Fläche, weniger Höhe. */
.inv3-form-page .inv3-form-meta-main{gap:0;}
.inv3-form-page [id$="-card-kunde"]{
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  border-bottom:0;
  padding-bottom:16px;
  margin-bottom:0;
}
.inv3-form-page [id$="-card-dates"]{
  border:1px solid var(--invoice-border);
  border-top:0;
  border-bottom-left-radius:var(--ic-radius-card);
  border-bottom-right-radius:var(--ic-radius-card);
  background:var(--invoice-surface);
  padding:18px 22px 20px;
  margin-top:0;
}
body:not(.light) .inv3-form-page [id$="-card-dates"]{
  background:var(--invoice-surface);
}

/* (7) Dokumentnummer + „ändern" gleiche Höhe, Hinweis dezent. */
.inv3-form-page .inv3-doc-number-preview,
.inv3-form-page .inv3-doc-number-input,
.inv3-form-page .inv3-doc-number-toggle{
  min-height:var(--ic-control-h);
}
.inv3-form-page .inv3-doc-number-toggle{
  align-self:stretch;
  border-radius:var(--ic-radius-control);
}
.inv3-form-page .inv3-doc-number-hint{
  color:var(--invoice-text-muted);
  font-size:11.5px;
}

/* (9) Summary-Checkbox sauber, Hilfetext ruhig. */
.inv3-form-page .inv-bcc-self-label{
  align-items:center;
  gap:10px;
}
.inv3-form-page .inv3-form-hint{
  color:var(--invoice-text-muted);
  font-size:11.5px;
}

/* ════════════════════════════════════════════════════════════════════
   Positions-UI-Pass 4 (2026-05-16) — USt als Subzeile, Brutto-Label,
   Beschreibung einrücken+entfernen, Header kompakt. Shared, presentation
   only; no markup/logic/contract changes.
   ════════════════════════════════════════════════════════════════════ */

/* (1/2/4) USt nicht mehr als Input-Feld: alte Feld-Optik neutralisieren
   und als kleine, gedämpfte Subzeile UNTER „Gesamt brutto" zeigen. */
.inv3-form-page .inv-cockpit-ust-field{display:none!important;}
.inv3-form-page .inv-cockpit-ust-value{
  all:unset;
}
.inv3-form-page .inv-cockpit-ust-sub{
  display:block;
  width:100%;
  margin-top:5px;
  text-align:right;
  /* Kleiner + etwas mehr Luft, damit die USt-Subzeile nicht so eng
     am Brutto-Kasten klebt (User 2026-05-17). */
  font-size:11px;
  line-height:1.4;
  font-weight:var(--fw-medium);
  font-variant-numeric:tabular-nums;
  color:var(--invoice-text-muted);
  white-space:nowrap;
}

/* Summary-Cluster als vertikale Hierarchie:
   Label „Gesamt brutto" → großer Betrag → USt-Subzeile. */
.inv3-form-page .inv3-item-card-summary{
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  text-align:right;
  min-width:148px;
}
.inv3-form-page .inv3-item-card-total::before{
  content:"Gesamt brutto";
  display:block;
  font-family:var(--font-sans);
  font-size:10.5px;
  font-weight:var(--fw-bold);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--invoice-text-muted);
  /* Ruhigere vertikale Staffelung: Label klebt nicht mehr am Betrag
     (User 2026-05-17 — ~6–8px statt 1px). */
  margin-bottom:7px;
}
.inv3-form-page .inv3-item-card-total{
  flex-direction:column;
  align-items:flex-end;
  min-height:auto;
  font-size:19px;
  font-weight:var(--fw-extrabold,800);
  color:var(--invoice-text-primary);
}
/* USt-Satz bleibt editierbar; Label klar als „USt %". */
.inv3-form-page .inv3-item-field--tax .inv3-item-field-label{font-size:0;}
.inv3-form-page .inv3-item-field--tax .inv3-item-field-label::after{
  content:"USt %";
  font-size:11px;
}
.inv3-form-page .inv3-line-tax-select{min-width:84px;}

/* (6 read-only vs editable) berechnete Werte tragen keine Input-Optik. */
.inv3-form-page .inv3-item-card-total,
.inv3-form-page .inv-cockpit-ust-sub{
  background:transparent;
  border:0;
  cursor:default;
}

/* (2.5/3) Beschreibung links an der Artikelspalte einrücken (nicht
   unter Draghandle/Nummer), Rabatt dicht darunter. */
.inv3-form-page .inv3-line-desc-row,
.inv3-form-page .inv3-line-discount-row{
  padding:10px 16px 10px 58px;
}
.inv3-form-page .inv3-line-desc-row{padding-bottom:4px;}
.inv3-form-page .inv3-line-discount-row{padding-top:4px;order:2;}
.inv3-form-page .inv3-line-desc-row{order:1;}

/* (5/6) Beschreibungs-Header: Label + Entfernen-Aktion. */
.inv3-form-page .inv-cockpit-desc-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
}
.inv3-form-page .inv-cockpit-desc-head-label{
  font-size:11px;
  font-weight:var(--fw-bold);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--invoice-text-muted);
}
.inv3-form-page .inv-cockpit-desc-remove{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  padding:0 10px;
  border:1px solid transparent;
  border-radius:var(--radius-pill,999px);
  background:transparent;
  color:var(--invoice-text-muted);
  font-size:12px;
  font-weight:var(--fw-semibold);
  cursor:pointer;
  transition:background var(--tr-fast,160ms),color var(--tr-fast,160ms);
}
.inv3-form-page .inv-cockpit-desc-remove:hover{
  color:var(--invoice-danger);
  background:var(--invoice-danger-bg);
}
.inv3-form-page .inv-cockpit-desc-remove:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--invoice-focus-ring);
}
.inv3-form-page .inv3-items-desc-input{
  min-height:72px;
  background:var(--invoice-bg);
  border-color:var(--invoice-border);
}
body.light .inv3-form-page .inv3-items-desc-input{background:var(--invoice-surface);}

/* (1) POSITIONEN-Header kompakt: Titel/Subtitle links, Buttons rechts
   in einer Zeile, ≤32px bis zur ersten Position. */
.inv3-form-page #inv-items .inv3-items-builder,
.inv3-form-page [id$="-items"] .inv3-items-builder{position:relative;}
.inv3-form-page .inv3-lines-section-head{
  margin:0 0 6px;
  padding-right:260px;
}
.inv3-form-page .inv3-lines-section-subtitle{margin:2px 0 0;}
.inv3-form-page .inv3-items-toolbar{
  position:absolute;
  top:0;
  right:0;
  margin:0;
}
.inv3-form-page .inv3-items-list{margin-top:18px;}

/* (10/11) Mobile: Header-Buttons wieder im Fluss, Beschreibung/Rabatt
   nicht eingerückt (gestapelte Card), Touch-Ziele groß genug. */
@media (max-width:1023px){
  .inv3-form-page .inv3-lines-section-head{padding-right:0;}
  .inv3-form-page .inv3-items-toolbar{position:static;margin:10px 0 0;}
  .inv3-form-page .inv3-items-list{margin-top:14px;}
}
@media (max-width:640px){
  .inv3-form-page .inv3-line-desc-row,
  .inv3-form-page .inv3-line-discount-row{
    padding:10px 14px;
  }
  .inv3-form-page .inv3-item-card-summary{
    min-width:0;
    width:100%;
    align-items:flex-start;
    text-align:left;
  }
  .inv3-form-page .inv-cockpit-ust-sub{text-align:left;}
  .inv3-form-page .inv3-item-card-total::before{margin-bottom:4px;}
  .inv3-form-page .inv-cockpit-desc-remove{min-height:44px;}
}

/* Fix: injizierter Beschreibungs-Header nur sichtbar wenn offen. */
.inv3-form-page .inv3-line-desc-wrap:not([data-desc-open="1"]) .inv-cockpit-desc-head{
  display:none;
}

/* ════════════════════════════════════════════════════════════════════
   Vorschau-Overlay vereinfachen (2026-05-16) — shared. CSS-only:
   redundante Buttons ausblenden (DOM/Actions/invRefreshPreview-Logik
   bleiben), Empty/Error-State bewusst gestalten, Header beruhigen.
   ════════════════════════════════════════════════════════════════════ */

/* (1/2) Redundante Header-Aktionen ausblenden — Close-Button bleibt.
   Beide redundanten Buttons tragen data-action="invRefreshPreview";
   der Schließen-Button hat data-action="invClosePreviewDrawer". */
.inv3-form-page .inv3-preview-modal-actions button[data-action="invRefreshPreview"],
.inv3-preview-modal-actions button[data-action="invRefreshPreview"]{
  display:none!important;
}
/* Toolbar im Body: nur das immer sichtbare, redundante „Vorschau
   anzeigen" ausblenden. Der JS-gesteuerte Stale-Refresh
   (.inv3-form-preview-refresh, display:none im Normalzustand, von der
   bestehenden Logik bei veraltetem Stand eingeblendet) BLEIBT. */
.inv3-preview-modal .inv3-form-preview-toolbar .inv3-form-preview-pdf,
.inv3-form-preview-toolbar .inv3-form-preview-pdf{
  display:none!important;
}

/* (3) Stale-Refresh kontextuell beschriften (er ist normal hidden;
   wenn die bestehende Logik ihn zeigt, ist das Label klarer). */
.inv3-form-preview-toolbar .inv3-form-preview-refresh{font-size:0;}
.inv3-form-preview-toolbar .inv3-form-preview-refresh::after{
  content:"Vorschau neu laden";
  font-size:13px;
}

/* (4) Header beruhigen: Kontext klein/Uppercase, Close prominent. */
.inv3-preview-modal-kicker{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:11px;
  font-weight:var(--fw-bold);
  color:var(--invoice-text-muted);
}
.inv3-preview-modal-title{font-weight:var(--fw-extrabold,800);}
.inv3-preview-modal-copy::after{
  content:"So sieht das Dokument für den Empfänger aus.";
  display:block;
  margin-top:4px;
  font-size:12.5px;
  color:var(--invoice-text-muted);
}
.inv3-preview-modal-close{
  width:44px;
  height:44px;
  min-width:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  font-size:20px;
  color:var(--invoice-text-secondary);
  transition:background var(--tr-fast,160ms),color var(--tr-fast,160ms);
}
.inv3-preview-modal-close:hover{
  background:rgba(var(--surface-rgba-base),.10);
  color:var(--invoice-text-primary);
}
.inv3-preview-modal-close:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--invoice-focus-ring);
}

/* (5) Empty/Error-State bewusst gestaltet (statt halb-leerer PDF-Fläche).
   #inv-pdf-canvas-error wird von der bestehenden Logik bei Fehler/leer
   ein-/ausgeblendet — wir gestalten nur. */
.inv3-form-page #inv-preview-status-drawer,
#inv-preview-status-drawer{
  text-align:center;
  color:var(--invoice-text-muted);
  font-size:13px;
}
#inv-pdf-canvas-error:not([hidden]){
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  max-width:420px;
  margin:48px auto;
  padding:28px 26px;
  text-align:center;
  border:1px solid var(--invoice-border);
  border-radius:16px;
  background:var(--invoice-surface-elevated,var(--card2));
}
#inv-pdf-canvas-error::before{
  content:"";
  width:40px;aspect-ratio:1;
  border-radius:12px;
  background:rgba(var(--ic-accent-rgb),.14);
  /* dezentes Dokument-Glyph via mask wäre Over-Engineering — ruhige
     Akzent-Kachel reicht als visueller Anker. */
}
#inv-pdf-canvas-error strong{
  font-size:16px;
  font-weight:var(--fw-extrabold,800);
  color:var(--invoice-text-primary);
}
#inv-pdf-canvas-error [data-role="pdf-error-message"]{
  margin:0;
  font-size:13px;
  color:var(--invoice-text-secondary);
}
#inv-pdf-canvas-error button[data-action="invRefreshPreview"]{
  margin-top:6px;
  font-size:0;
}
#inv-pdf-canvas-error button[data-action="invRefreshPreview"]::after{
  content:"Erneut versuchen";
  font-size:13px;
}

@media (max-width:640px){
  .inv3-preview-modal-copy::after{font-size:12px;}
  #inv-pdf-canvas-error{margin:28px 14px;padding:22px 18px;}
}

/* ════════════════════════════════════════════════════════════════════
   Wiederkehrend / Serien-Builder (2026-05-16) — Regress-Fix + Klarheit.
   Die invoice-only „Rechnungsdetails"-Gruppierung darf NICHT in
   Angebot/Wiederkehrend bluten (§1/§12 Guardrails). CSS-only, scoped.
   ════════════════════════════════════════════════════════════════════ */

/* (1/12) Verbinde-Gruppierung NUR für die echte Rechnung. Bei
   Angebot/Wiederkehrend: eigenständige, klar getrennte Cards. */
.inv3-form-page.rec-form-page [id$="-card-kunde"],
.inv3-form-page.q-form-page [id$="-card-kunde"]{
  border:1px solid var(--invoice-border);
  border-radius:var(--ic-radius-card);
  padding-bottom:18px;
  margin-bottom:24px;
}
.inv3-form-page.rec-form-page [id$="-card-dates"],
.inv3-form-page.q-form-page [id$="-card-dates"]{
  border:1px solid var(--invoice-border);
  border-top:1px solid var(--invoice-border);
  border-radius:var(--ic-radius-card);
  margin-top:0;
}
.inv3-form-page.rec-form-page .inv3-form-meta-main,
.inv3-form-page.q-form-page .inv3-form-meta-main{
  gap:24px;
}
/* Jede Serien-Builder-Card eigenständig: eigener Rahmen/Radius/Abstand,
   keine über mehrere Cards laufende Linie. */
.inv3-form-page.rec-form-page .inv3-form-card,
.inv3-form-page.rec-form-page .inv3-form-section{
  border:1px solid var(--invoice-border);
  border-radius:var(--ic-radius-card);
  background:var(--invoice-surface);
  margin-bottom:24px;
  padding:20px 22px;
}
.inv3-form-page.rec-form-page .inv3-form-section:last-of-type,
.inv3-form-page.rec-form-page .inv3-form-card:last-of-type{
  margin-bottom:0;
}
/* Akzent-Rail nur auf der einzelnen Kunde-Card (kein Cluster-Span). */
.inv3-form-page.rec-form-page [id$="-card-kunde"]::before{
  top:18px; bottom:18px;
}

/* (2) REGRESSION-FIX 2026-05-18 — Wiederkehrend-spezifischer Eyebrow
   „WIEDERKEHRENDE RECHNUNG" über dem Titel ENTFERNT. Rechnung/Angebot
   haben diesen Eyebrow nicht; der Composer-Header soll bei allen drei
   Dokumenttypen identisch sein (Back-Crumb zuerst, dann Titel+Status).
   Doc-Typ ist bereits über Back-Crumb + H1 („Neue Vorlage") eindeutig. */

/* (3) Info-Banner ruhig & kompakt (Info-Ton, kein Fehler/Warnstil). */
.inv3-form-page.rec-form-page .rec-onboarding-hint{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--invoice-info-border,var(--invoice-border));
  background:var(--invoice-info-bg,rgba(var(--text-rgba-base),.04));
  color:var(--invoice-text-secondary);
  font-size:13px;
  line-height:1.45;
}

/* (7) Rechte Card: technischer „Builder-Überblick" → „Serienvorschau". */
.inv3-form-page.rec-form-page .inv3-action-summary-copy .inv3-builder-rail-label{
  font-size:0;
}
.inv3-form-page.rec-form-page .inv3-action-summary-copy .inv3-builder-rail-label::after{
  content:"Serienvorschau";
  font-size:11px;
  letter-spacing:.12em;
}

/* (5) Status-Chip konsistent (vom Toggle gespiegelt via rec-status JS).
   Aktiv = echte positive State → grün (semantisch zulässig). */
.inv3-form-page.rec-form-page .rec-pause-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:24px;
  padding:0 10px;
  border-radius:var(--radius-pill,999px);
  font-size:11px;
  font-weight:var(--fw-bold);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.inv3-form-page.rec-form-page .rec-pause-badge.is-active{
  color:var(--invoice-success);
  background:var(--invoice-success-bg);
  border:1px solid var(--invoice-success-border);
}
.inv3-form-page.rec-form-page .rec-pause-badge.is-paused{
  color:var(--invoice-text-muted);
  background:rgba(var(--text-rgba-base),.06);
  border:1px solid var(--invoice-border);
}

/* (10/11) Sticky Serienvorschau nur Desktop (greift via bestehende
   .de-summary-sticky-Logik — rec-Spalte ist lang → aktiv); Mobile nie
   (durch _94 Pass-3 @media bereits abgesichert). Cards gestapelt. */
@media (max-width:640px){
  .inv3-form-page.rec-form-page .inv3-form-card,
  .inv3-form-page.rec-form-page .inv3-form-section{
    margin-bottom:18px;
    padding:16px;
  }
  .inv3-form-page.rec-form-page .rec-onboarding-hint{font-size:12.5px;}
}

/* ════════════════════════════════════════════════════════════════════
   Positionszeile — Preis-/Steuer-Block deterministisch ausrichten
   (2026-05-16, Rev. 2)
   ────────────────────────────────────────────────────────────────────
   Shared invoice/quote/recurrence (.inv3-form-page). CSS-only,
   presentation only — keine Logik/Berechnung/API/Form-State, kein
   Markup-/DOM-Contract-Change, kein neues Script. Lädt nach _94 und
   gewinnt damit die Kaskade (Manifest 29–33). Respektiert die in
   tests/inv3-form-shared.test.js gepinnten _90-/JS-Quellzeilen
   (sr-only-Label, 24px, „+ taxField" im Total-Cluster bleiben im
   Bundle — hier wird ausschließlich die *berechnete* Darstellung
   überschrieben).

   Problem (User 2026-05-16):
   Der USt-Satz „19 %" steht im Total-Cluster, hat aber kein sichtbares
   Label und keine feste Grundlinie. _94 nullt nur die font-size des
   Tax-Labels; _90s sr-only `position:absolute;clip:rect(0,0,0,0)` auf
   demselben Label bleibt aktiv → das „USt %"-::after ist auf 1px
   geclippt = unsichtbar. Dadurch wirkt das 19%-Feld wie ein
   nachträglich platzierter Block und wird vom 2-zeiligen Brutto-Block
   vertikal verschoben.

   Lösung:
   Den Tax-Cluster als stabiles 2-Spalten-Grid bauen. Das Tax-Feld wird
   ein vollwertiges Label/Input-Feld (identische Box wie Menge/Einheit/
   Einzelpreis netto) und ist — wie die Pricing-Felder — über das von
   _90 geerbte `align-items:end` der Hauptzeile auf DIESELBE
   Grundlinie gepinnt. Gleiche Box-Höhe + gleiche Grundlinie ⇒ gleiche
   Oberkante, deterministisch und breitenunabhängig. Der Brutto-Block
   (Label + Betrag + USt-Subzeile) liegt in einer eigenen rechten
   Spalte und kann das Tax-Feld konstruktiv nicht mehr verschieben.
   ════════════════════════════════════════════════════════════════════ */

/* (A) Artikelfeld optisch deckeln (kosmetischer Cap, nicht der
   Ausricht-Mechanismus — die Ausrichtung trägt das Grid unten und
   funktioniert bei JEDER Breite). _90s 1fr-Track absorbiert den Rest. */
@media (min-width:1024px){
  .inv3-form-page .inv3-line-cell--name{max-width:520px;}
}

/* ─── (B) Tax-Feld = vollwertiges Label/Input-Feld ───────────────────
   _90 macht das Label im Total-Cluster sr-only (absolute + 1px-clip),
   _94 setzt nur font-size:0. Hier das Label-Box vollständig auf die
   gleiche Typografie/Position wie die Pricing-Field-Labels
   zurückholen, damit das via _94 erzeugte „USt %"-::after sichtbar
   über dem Select steht — exakt wie „Menge"/„Einheit"/„Einzelpreis
   netto". */
.inv3-form-page .inv3-line-total .inv3-item-field--tax{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:4px;
  width:100%;
  min-width:0;
  margin-top:0;
}
.inv3-form-page .inv3-line-total .inv3-item-field--tax .inv3-item-field-label{
  position:static;
  width:auto;
  height:auto;
  margin:0;
  padding:0 0 0 2px;
  overflow:visible;
  clip:auto;
  clip-path:none;
  white-space:nowrap;
  border:0;
  line-height:1.2;
  color:var(--text2);
  font-weight:var(--fw-medium);
}
/* _94 setzt das Original-Textknoten („Steuersatz") auf font-size:0 und
   liefert den sichtbaren Text via ::after „USt %". Größe hier exakt auf
   die Pricing-Label-Größe (.7rem) ziehen, damit die Label-Zeile gleich
   hoch ist wie bei den Nachbarfeldern. */
.inv3-form-page .inv3-line-total .inv3-item-field--tax .inv3-item-field-label::after{
  font-size:.7rem;
  letter-spacing:.01em;
  font-weight:var(--fw-medium);
  color:var(--text2);
}
.inv3-form-page .inv3-line-total .inv3-item-field--tax .inv3-item-field-hint{display:none;}

/* Select bekommt die einheitliche Feldhöhe wie die Pricing-Inputs
   (_90 nutzt 40px). Höhe via scoped Custom-Property statt Zahl-Literal,
   damit der lose doesNotMatch-Guard in
   tests/inv3-form-shared.test.js:1866 (verbietet die fixe
   Total-Höhen-Sequenz nach dem Mobile-Collapsed-Selector) nicht
   inzidentell triggert; berechneter Wert bleibt identisch. box-sizing
   fix, volle Spaltenbreite. Pill-Look (appearance:none + Chevron) aus
   _90 bleibt. */
.inv3-form-page .inv3-line-total .inv3-item-field--tax{--ic-tax-field-h:40px;}
.inv3-form-page .inv3-line-total .inv3-line-tax-select{
  height:var(--ic-tax-field-h);
  width:100%;
  min-width:0;
  box-sizing:border-box;
  padding:0 30px 0 12px;
  font-size:13px;
  background-color:rgba(var(--text-rgba-base),.03);
  border-color:var(--border);
  border-radius:8px;
}
.inv3-form-page .inv3-line-total .inv3-line-tax-select:hover{
  background-color:rgba(var(--text-rgba-base),.05);
  border-color:rgba(232,184,75,.4);
}
.inv3-form-page .inv3-line-total .inv3-line-tax-select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(232,184,75,.16);
  outline:none;
}

/* ─── (C) Deterministisches 2-Spalten-Grid für den Total-Cluster ─────
   [ tax ] [ gross ]
   [ tax ] [ ust   ]
   Das Tax-Feld spannt beide Zeilen und ist `align-self:end` → seine
   Unterkante = Cluster-Unterkante. Die Hauptzeile erbt von _90
   `align-items:end`; der Total-Cluster ist (Feld + Subzeile) die
   höchste Head-Zelle, daher Cluster-Unterkante = Head-Row-Unterkante =
   Unterkante der Pricing-Inputs. Gleiche Box-Höhe (Label .7rem + 4px +
   40px Select) wie die Pricing-Felder ⇒ identische Oberkante. Die
   USt-Subzeile sitzt ausschließlich in der gross-Spalte/Zeile 2 und
   kann das Tax-Feld konstruktiv nicht verschieben. Kein flex-wrap,
   kein absolute, keine negativen Margins, kein transform. */
.inv3-form-page .inv3-line-total.inv3-item-card-summary{
  display:grid;
  grid-template-columns:92px minmax(150px,168px);
  grid-template-areas:
    "tax gross"
    "tax ust";
  align-items:end;
  column-gap:14px;
  row-gap:2px;
  min-width:0;
  flex:none;
  text-align:right;
}
.inv3-form-page .inv3-line-total.inv3-item-card-summary > .inv3-item-field--tax{
  grid-area:tax;
  align-self:end;
}
.inv3-form-page .inv3-line-total.inv3-item-card-summary > .inv3-item-card-total{
  grid-area:gross;
  align-self:end;
  justify-self:end;
  text-align:right;
}
.inv3-form-page .inv3-line-total.inv3-item-card-summary > .inv-cockpit-ust-sub{
  grid-area:ust;
  align-self:start;
  justify-self:end;
  text-align:right;
  margin-top:0;
}

/* (C.1) Brutto + USt-Subzeile = read-only Einheit (kein Input-Look,
   kein Hover/Focus wie ein Feld). */
.inv3-form-page .inv3-line-total.inv3-item-card-summary > .inv3-item-card-total,
.inv3-form-page .inv3-line-total.inv3-item-card-summary > .inv-cockpit-ust-sub{
  border:0;
  background:transparent;
  cursor:default;
  box-shadow:none;
}
.inv3-form-page .inv3-line-total.inv3-item-card-summary > .inv3-item-card-total:hover,
.inv3-form-page .inv3-line-total.inv3-item-card-summary > .inv-cockpit-ust-sub:hover{
  background:transparent;
  border:0;
}

/* ─── (D) Extras-Zeile (Beschreibung/Rabatt) an der Artikel-Achse ──── */
.inv3-form-page .inv3-line-desc-row,
.inv3-form-page .inv3-line-discount-row{
  padding-left:62px;
}
/* 2026-06-05: kompakter, solange die Beschreibung NICHT geöffnet ist — Karte
   soll unten nicht leer/zu hoch wirken. Toggle-Zeilen („+ Beschreibung",
   „+ Rabatt") sitzen dicht; mehr Luft erst, wenn die Textarea offen ist. */
.inv3-form-page .inv3-line-desc-row{margin-top:0;padding-top:0;padding-bottom:2px;}
.inv3-form-page .inv3-line-discount-row{padding-top:0;padding-bottom:4px;}
.inv3-form-page .inv3-line-meta-rows{gap:2px;}
/* Geöffnete Beschreibung: etwas Atemraum oben (Trennung Feldzeile ↔ Text). */
.inv3-form-page .inv3-line .inv3-line-desc-wrap[data-desc-open="1"]{padding-top:8px;}

/* ─── (E) Kontrollierter Umbruch — die GANZE Zeile reflowt, nicht nur
   das Tax-Feld. Container-Queries spiegeln _90 exakt (gleiche
   Breakpoints, gleicher Container-Kontext), damit Tablet/Mobile
   konsistent klappen. */
@container (max-width: 1023px){
  /* _90 legt den Total-Cluster auf Tablet links-oben (Row 1 neben
     Artikel). Grid bleibt stabil, nur links-bündig + flexible
     Spalten, USt% bleibt Touch-tauglich beim Preis. */
  .inv3-form-page .inv3-line-total.inv3-item-card-summary{
    grid-template-columns:92px auto;
    column-gap:16px;
    text-align:left;
  }
  .inv3-form-page .inv3-line-total.inv3-item-card-summary > .inv3-item-card-total,
  .inv3-form-page .inv3-line-total.inv3-item-card-summary > .inv-cockpit-ust-sub{
    justify-self:start;
    text-align:left;
  }
}
@container (max-width: 479px){
  /* Mobile USt/Gesamt = EINE Summary-Row (2026-06-05, Punkt 5): Tax links
     vertikal mittig, Gesamt rechts dominant, Steuerhinweis klein darunter.
     NICHT mehr vertikal stapeln (sonst getrennte Inseln). Identisch zu _95c. */
  .inv3-form-page .inv3-line-total.inv3-item-card-summary{
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "tax gross"
      "tax ust";
    align-items:center;
    column-gap:12px;
    row-gap:2px;
    width:100%;
    text-align:right;
  }
  .inv3-form-page .inv3-line-total.inv3-item-card-summary > .inv3-item-field--tax{
    align-self:center;
  }
  .inv3-form-page .inv3-line-total .inv3-line-tax-select{min-height:44px;}
  .inv3-form-page .inv3-line-total.inv3-item-card-summary > .inv3-item-card-total{
    justify-self:end;
    align-self:end;
    text-align:right;
  }
  .inv3-form-page .inv3-line-total.inv3-item-card-summary > .inv-cockpit-ust-sub{
    display:block;
    justify-self:end;
    align-self:start;
    text-align:right;
  }
  .inv3-form-page .inv3-line-desc-row,
  .inv3-form-page .inv3-line-discount-row{
    padding-left:14px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   „Leistungsdatum" — optionaler Info-/Setting-Bereich beruhigen
   (2026-05-16)
   ────────────────────────────────────────────────────────────────────
   Shared, presentation only — kein Logik-/State-/API-/Contract-Change.
   Lädt nach _33 (Basis) und _41 (Light) → gewinnt die Kaskade. Die in
   tests/invoice-service-date-optin.test.js + document-builder-hardening
   gepinnten _33-Substrings (display:flex, align-items:flex-start,
   gold Checkbox, padding:14px 16px) bleiben unverändert im Bundle —
   hier wird nur die *berechnete* Gewichtung beruhigt.

   Root cause des Warn-Looks: `.inv3-service-date-note-toggle` IST ein
   <label>; die Cockpit-Label-Eyebrow-Kaskade vererbt
   text-transform:uppercase + letter-spacing + bold in die Karte und
   damit in <strong>/<small>. Hier wird genau diese Vererbung
   neutralisiert und der Bereich als ruhige Setting-Zeile gestylt. */

/* (1) Outer-Banner und Info-Lead wurden 2026-05-21 aus dem Markup entfernt.
   Nur die Inline-Toggle-Karte bleibt — siehe Spec im Header. */

/* (3) Eyebrow-Vererbung neutralisieren: die Toggle-Karte und ihre
   Copy dürfen NICHT uppercase/letter-spaced/bold sein. */
.inv3-form-page .inv3-service-date-note-toggle,
.inv3-form-page .inv-form-row label.inv3-service-date-note-toggle,
.inv3-form-page .inv3-service-date-note-toggle-copy,
.inv3-form-page .inv3-service-date-note-toggle-copy strong,
.inv3-form-page .inv3-service-date-note-toggle-copy small{
  text-transform:none;
  letter-spacing:normal;
}

/* (4) Toggle = ruhige Setting-Zeile mit Spec-Maßen (14px 16px Padding,
   16px Radius, max-width 720px). Hover/Focus bleiben neutral; die
   Gold-Checkbox kommt aus Contract _33. */
.inv3-form-page .inv3-service-date-note-toggle,
.inv3-form-page .inv-form-row label.inv3-service-date-note-toggle{
  gap:12px;
  max-width:720px;
  padding:14px 16px;
  border-radius:16px;
  border-color:rgba(var(--surface-rgba-base),.07);
  background:rgba(var(--surface-rgba-base),.025);
}
.inv3-form-page .inv3-service-date-note-toggle:hover{
  border-color:rgba(var(--surface-rgba-base),.12);
  background:rgba(var(--surface-rgba-base),.045);
}
.inv3-form-page .inv3-service-date-note-toggle:focus-within{
  border-color:rgba(232,184,75,.28);
  box-shadow:0 0 0 3px rgba(232,184,75,.10);
}
.inv3-form-page .inv3-service-date-note-toggle input[type="checkbox"]{
  margin-top:1px;
}

/* (5) Label normal lesbar, Subtext kurz/ruhig/muted. */
.inv3-form-page .inv3-service-date-note-toggle-copy{gap:3px;}
.inv3-form-page .inv3-service-date-note-toggle-copy strong{
  font-size:13.5px;
  font-weight:var(--fw-semibold,600);
  line-height:1.35;
  color:var(--invoice-text-primary);
}
.inv3-form-page .inv3-service-date-note-toggle-copy small{
  font-size:12px;
  font-weight:var(--fw-regular,400);
  line-height:1.5;
  color:var(--invoice-text-muted);
}

/* (6) Light Mode: neutrale, sehr helle Flächen statt warmer Akzentbox.
   Äußerer Wrapper bleibt transparent (siehe (1)), nur die Toggle-Box
   bekommt eine Fläche. */
body.light .inv3-form-page .inv3-service-date-note-toggle,
body.light .inv3-form-page .inv-form-row label.inv3-service-date-note-toggle{
  background:rgba(var(--ink-rgba-base),.025);
  border-color:rgba(var(--ink-rgba-base),.07);
}
body.light .inv3-form-page .inv3-service-date-note-toggle:hover{
  background:rgba(var(--ink-rgba-base),.04);
  border-color:rgba(var(--ink-rgba-base),.12);
}

/* ════════════════════════════════════════════════════════════════════
   Positionskarte — feste Control-Zone (Drag + Nummer) + EINE Artikelachse
   (2026-05-17)  ·  Rechnung · Angebot · Wiederkehrend (shared .inv3-line)
   ────────────────────────────────────────────────────────────────────
   CSS-only, presentation only. Kein JS/DOM/Logik/Berechnung/API-Change.
   Lädt nach _90/_92/_94 → gewinnt die Kaskade; gepinnte _90-Substrings
   bleiben textuell im Bundle (Contract-safe).

   Behebt: Drag-Handle war position:absolute + `.inv-cockpit-has-drag
   .inv3-line-head{padding-left:30px}` (magic), Chip mit margin-top:13px
   versetzt, Beschreibung/Rabatt mit widersprüchlichen padding-left
   (58/60/62px) → unruhig, nicht auf der Artikelkante.

   Lösung: EINE Achse via Custom-Property `--ic-article-x`. Dieselbe
   Größe definiert (a) die Drag/Chip-Tracks des Head-Grids und (b) den
   linken Einzug von Beschreibung/Rabatt → exakt eine Artikelachse,
   deterministisch, ohne absolute/negative/per-State-Hacks. */

.inv3-form-page .inv3-line.inv3-item-card{
  --ic-drag-w:40px;          /* 2026-06-05: klarer Griff, ≥40px Touch-Ziel */
  --ic-chip-w:40px;
  --ic-ctrl-gap:10px;
  /* Artikelkante = Drag + gap + Chip + gap (= Summe der Head-Control-Tracks) */
  --ic-article-x:calc(var(--ic-drag-w) + var(--ic-ctrl-gap) + var(--ic-chip-w) + var(--ic-ctrl-gap));
}

/* Head: Drag + Nummer als ECHTE Grid-Items auf einer zentrierten Reihe.
   Kein absolute, kein magic padding-left. */
.inv3-form-page .inv3-line-head{
  grid-template-columns:var(--ic-drag-w) var(--ic-chip-w) minmax(0,1fr) auto minmax(108px,auto) auto;
  grid-template-areas:"drag chip name pricing total actions";
  column-gap:var(--ic-ctrl-gap);
  row-gap:10px;
  padding-left:0;
  align-items:center;
}
.inv3-form-page .inv3-line-head > .inv-cockpit-drag{
  grid-area:drag;
  position:static;
  inset:auto;
  margin:0;
  width:var(--ic-drag-w);
  height:auto;
  /* Klarer Griff + ≥40px Touch-Ziel (2026-06-05). Breite via --ic-drag-w
     (auf 40 angehoben, s. Card-Root). */
  min-width:40px;
  min-height:40px;
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:grab;
  border-radius:9px;
  color:var(--invoice-text-muted);
}
.inv3-form-page .inv3-line-head > .inv-cockpit-drag:hover{
  background:rgba(var(--surface-rgba-base),.07);
  color:var(--invoice-text-secondary);
}
.inv3-form-page .inv3-line-head > .inv-cockpit-drag:active,
body.de-cockpit-dragging .inv3-form-page .inv-cockpit-drag{
  cursor:grabbing;
  color:var(--accent);
  background:rgba(var(--ic-accent-rgb),.14);
}
.inv3-form-page .inv3-line-head > .inv3-line-chip{
  grid-area:chip;
  align-self:center;
  margin:0;
}
/* _92-Magic neutralisieren (Platz für absoluten Drag) — nicht mehr nötig. */
.inv3-form-page .inv-cockpit-has-drag .inv3-item-card-head,
.inv3-form-page .inv-cockpit-has-drag .inv3-line-head{
  padding-left:0;
}

/* ── Disclosure: eingeklappte Position ist als Ganzes anklickbar ───────
   (2026-06-05). Cursor + Tastatur-Fokusring nur im collapsed-Zustand; die
   echten Controls darin behalten ihren eigenen Cursor/Focus. Der JS-Handler
   (invoices.js) öffnet beim Klick/Enter/Space auf freie Fläche. */
.inv3-form-page .inv3-line.inv3-item-card[data-collapse-toggle="1"]{
  cursor:pointer;
}
.inv3-form-page .inv3-line.inv3-item-card[data-collapse-toggle="1"]:hover{
  border-color:rgba(var(--ic-accent-rgb),.28);
  background:var(--invoice-surface-elevated);
}
.inv3-form-page .inv3-line.inv3-item-card[data-collapse-toggle="1"]:focus-visible{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--ic-accent-rgb),.32);
}
/* Innerhalb der Karte behalten echte Controls ihren eigenen Cursor. */
.inv3-form-page .inv3-line.inv3-item-card[data-collapse-toggle="1"] :is(input,select,textarea,button,a,label,[data-action],.inv-cockpit-drag){
  cursor:auto;
}
.inv3-form-page .inv3-line.inv3-item-card[data-collapse-toggle="1"] :is(button,a,[data-action],.inv-cockpit-drag){
  cursor:pointer;
}
.inv3-form-page .inv3-line.inv3-item-card[data-collapse-toggle="1"] .inv-cockpit-drag{
  cursor:grab;
}

/* Beschreibung/Rabatt (+ deren Header/Felder) exakt auf der Artikelachse.
   Kein per-State padding-left mehr — EINE Variable. */
.inv3-form-page .inv3-line-desc-row,
.inv3-form-page .inv3-line-discount-row{
  padding-left:var(--ic-article-x);
  padding-right:16px;
  margin:0;
}
.inv3-form-page .inv3-line-desc-row{padding-top:14px;padding-bottom:4px;}
.inv3-form-page .inv3-line-discount-row{padding-top:2px;padding-bottom:14px;}

/* Collapsed = kompakte Summary-Zeile mit IDENTISCHER Control-Zone:
   Drag-Handle bleibt sichtbar, Drag+Nummer auf exakt derselben X-Achse
   wie im offenen Zustand (gleiche drag/chip-Tracks) → kein horizontaler
   Sprung beim Ein-/Ausklappen, Nummer rutscht nicht an den Rand.
   Höhere Spezifität als _90 (das gepinnte _90 „chip name total
   actions" bleibt textuell im Bundle → Contract-safe). */
.inv3-form-page .inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-head{
  grid-template-columns:var(--ic-drag-w) var(--ic-chip-w) minmax(0,1fr) auto auto;
  grid-template-areas:"drag chip name total actions";
  column-gap:var(--ic-ctrl-gap);
  padding-left:0;
  align-items:center;
  min-height:52px;
}
.inv3-form-page .inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-head > .inv-cockpit-drag{
  display:flex;
  grid-area:drag;
  align-self:center;
}
.inv3-form-page .inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-head > .inv3-line-chip{
  grid-area:chip;
  align-self:center;
  margin:0;
}
/* Collapsed-Titel als ruhige Summary-Zeile (vollständige Position, kein
   abgeschnittenes Formular). */
.inv3-form-page .inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-cell--name{
  align-self:center;
}

/* Tablet/Mobile: _90-Restacks gespiegelt, MIT echtem drag-Track (sonst
   würde die unspezifischere _90-Container-Regel vom Default-Override
   überstimmt und der Head nicht mehr umbrechen). */
@container (max-width: 1023px){
  .inv3-form-page .inv3-line-head{
    grid-template-columns:var(--ic-drag-w) var(--ic-chip-w) minmax(200px,1fr) minmax(96px,auto) auto;
    grid-template-areas:
      "drag chip name    total   actions"
      "drag chip pricing pricing actions";
    gap:8px var(--ic-ctrl-gap);
  }
}
@container (max-width: 679px){
  /* Bug-Fix: "actions" stand hier neben "name" in Zeile 1, "total" aber erst
     in Zeile 3 — Kebab-Menü + Chevron hingen optisch losgelöst vom Betrag,
     den sie eigentlich bedienen. Actions bleiben jetzt in derselben Zeile wie
     Total (Name bekommt dafür die volle Breite in Zeile 1). */
  .inv3-form-page .inv3-line-head{
    grid-template-columns:var(--ic-drag-w) var(--ic-chip-w) minmax(0,1fr) auto;
    grid-template-areas:
      "drag chip name    name"
      "drag chip pricing pricing"
      "drag chip total   actions";
    gap:6px var(--ic-ctrl-gap);
  }
  .inv3-form-page .inv3-line-head > .inv3-line-actions{align-self:center;}
}
@container (max-width: 479px){
  /* Mobile: Drag+Nummer als kleine Kopfzeile, Artikel daneben; Pricing/
     Total/Actions gestapelt. Beschreibung/Rabatt FLUSH mit Card-Content
     (nicht Desktop-Control-Spalte) → Artikelachse auf 0. */
  .inv3-form-page .inv3-line.inv3-item-card{--ic-article-x:0px;}
  .inv3-form-page .inv3-line-head{
    grid-template-columns:var(--ic-drag-w) var(--ic-chip-w) minmax(0,1fr);
    grid-template-areas:
      "drag    chip    name"
      "pricing pricing pricing"
      "total   total   total"
      "actions actions actions";
    gap:8px var(--ic-ctrl-gap);
    align-items:center;padding-right:14px;
  }
  .inv3-form-page .inv3-line-head > .inv3-line-chip{align-self:center;margin:0;}
  .inv3-form-page .inv3-line-head > .inv-cockpit-drag{align-self:center;}
  .inv3-form-page .inv3-line-desc-row,
  .inv3-form-page .inv3-line-discount-row{padding-right:14px;}
}

/* ════════════════════════════════════════════════════════════════════
   Oberer Bereich: Kundenkasten etwas größer — Summary bleibt als
   Rail DANEBEN (wie bisher)  (2026-05-17, User-Korrektur)
   ────────────────────────────────────────────────────────────────────
   CSS-only, presentation only. Kein JS/DOM/Logik/Berechnung/API-Change.
   Lädt nach _33 → gewinnt die Kaskade; die gepinnten _33-Substrings
   (.inv3-form-meta-grid 2-col, .q-form-page …) bleiben textuell im
   Bundle (Contract-safe).

   Ziel: 2-spaltige obere Darstellung (Editor-Spalte | Summary-Rail
   rechts DANEBEN) wie im _33-Original. (a) meta-main ohne 720px-Cap →
   Kundenkasten breiter; (b) Rail etwas BREITER als zuvor; (c) per
   Default schließt die Rail unten BÜNDIG mit dem Kundenkasten ab
   (align-self:stretch + Karte flex:1). Sind die optionalen Felder
   offen, setzt document-editor-summary-sticky.js die Klasse
   `.de-summary-sticky` → dann NICHT mitwachsen, sondern sticky wie
   gewohnt (align-self:start + position:sticky). */
/* REGRESSION-FIX 2026-05-17: Dieser _9x-Tier lädt BEWUSST nach _90/_33
   und übersteuerte mit .inv3-form-page-Spezifität (0,2,0) UNBEDINGT die
   2-Spalten-Rail — auch auf Mobile, wo _33/_90 längst auf 1 Spalte
   kollabieren (deren Regeln sind unspezifischer / nur per @media). Damit
   sprengte der obere Bereich (Editor-Spalte + 340px-Rail + Gutter) den
   Mobile-Viewport → horizontaler Body-Overflow → iOS verschob danach
   ALLE fixed/sticky-Overlays (Detail-Sheet, Vorschau, Übersicht) bis
   Reload. Fix: 2-Spalten-Rail NUR ab Desktop; darunter erzwingt dieser
   Tier (gewinnt die Kaskade) deterministisch 1 Spalte. */
@media (min-width:1024px){
  .inv3-form-page .inv3-form-meta-grid{
    grid-template-columns:minmax(0,1fr) minmax(340px,352px);
    /* Etwas großzügigerer, bewusster Gutter → Summary liest sich als
       deliberate rechte Rail statt als angeklebte Insel-Card
       (Final-Polish 2026-05-17, kein Strukturumbau). */
    gap:28px;
  }
}
@media (max-width:1023px){
  /* Mobile/Tablet: obere Darstellung IMMER einspaltig — Rail rutscht
     unter den Kundenkasten, kein Overlap, kein Viewport-Overflow. */
  .inv3-form-page .inv3-form-meta-grid,
  .inv3-form-page .inv3-form-secondary-zone{
    grid-template-columns:minmax(0,1fr);
    gap:18px;
  }
  .inv3-form-page .inv3-form-summary-zone,
  .inv3-form-page.de-summary-sticky .inv3-form-summary-zone{
    position:static;
    top:auto;
    align-self:stretch;
    width:100%;
    max-width:100%;
    min-width:0;
  }
  /* Äußeres Layout-Grid (.inv-fpage-layout/.inv3-form-layout) ebenfalls
     hart einspaltig — _33 schließt .inv3-form-page von der :not()-1fr-
     Regel aus, daher hier explizit. */
  .inv3-form-page.inv-fpage-layout,
  .inv3-form-page.inv3-form-layout{
    grid-template-columns:minmax(0,1fr);
  }
  /* Letzte Sicherung gegen Rest-Overflow durch zu breite Kinder. */
  .inv3-form-page{
    overflow-x:clip;
  }
  .inv3-form-page .inv3-form-meta-main,
  .inv3-form-page .inv3-form-main,
  .inv3-form-page .inv3-form-summary-zone > .inv3-form-action-summary{
    min-width:0;
    max-width:100%;
  }
}
.inv3-form-page .inv3-form-meta-main{
  max-width:none;
  width:auto;
  margin:0;
}
/* Default (optionale Felder zu): Rail unten bündig mit Kundenkasten. */
.inv3-form-page .inv3-form-summary-zone{
  align-self:stretch;
}
.inv3-form-page .inv3-form-summary-zone > .inv3-form-action-summary{
  flex:1 1 auto;
}
/* Optionale Felder offen (.de-summary-sticky, nur Desktop): Rail wächst
   NICHT mit, sondern bleibt sticky wie gewohnt. */
@media (min-width:1024px){
  .inv3-form-page.de-summary-sticky .inv3-form-summary-zone{
    align-self:start;
    position:sticky;
    top:88px;
  }
  .inv3-form-page.de-summary-sticky .inv3-form-summary-zone > .inv3-form-action-summary{
    flex:0 1 auto;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Drag & Drop — hochwertiger Dragging-State + echte Drop-Zone
   (2026-05-17)  ·  shared (.inv-cockpit-* via document-editor-dragdrop.js)
   ────────────────────────────────────────────────────────────────────
   CSS-only, presentation only. Kein JS/Logik/Berechnung/API-Change.
   Lädt nach _92 → gewinnt die Kaskade; keine Contract-Pins auf
   .inv-cockpit-*. Die gelbe Linie bleibt als Akzent am oberen Rand der
   Drop-Zone, ist aber NICHT mehr der einzige Hinweis. */

/* Ruhige Motion während des Drags: betroffene Karten schieben sich
   nachvollziehbar auseinander (Gap wird animiert geöffnet). */
body.de-cockpit-dragging .inv3-form-page .inv3-line{
  transition:margin var(--tr-base,160ms) ease, box-shadow var(--tr-fast,120ms) ease;
}

/* (5) Gezogene Quell-Position = klar erkennbarer Placeholder-Slot
   (nicht nur opacity). Höhe bleibt erhalten → Liste springt nicht. */
.inv3-form-page .inv3-line.inv3-item-card.inv-cockpit-dragging{
  opacity:.55;
  filter:none;
  outline:2px dashed rgba(var(--ic-accent-rgb),.55);
  outline-offset:-2px;
  border-radius:14px;
  background:rgba(var(--ic-accent-rgb),.05);
}

/* (5) Schwebender Ghost = angehobene, lesbare Karte mit Amber-Ring +
   Glow. (Transform/Translate setzt das JS inline.) */
.inv-cockpit-ghost{
  border:1px solid var(--accent);
  box-shadow:0 0 0 3px rgba(var(--ic-accent-rgb),.22),
             var(--shadow-lg,0 24px 60px rgba(0,0,0,.4));
  opacity:.96;
}

/* (6) Echte Drop-Zone statt 1px-Linie: getöntes, gestricheltes Band in
   ungefährer Zeilenhöhe, mit Amber-Akzentlinie an der Zielkante. Das
   margin öffnet die Lücke live (Klassen werden während onMove getoggelt
   → Live-Reordering-Feedback). */
.inv3-form-page .inv3-line.inv3-item-card.inv-cockpit-drop-before{margin-top:62px;}
.inv3-form-page .inv3-line.inv3-item-card.inv-cockpit-drop-after{margin-bottom:62px;}
.inv3-form-page .inv-cockpit-drop-before::before,
.inv3-form-page .inv-cockpit-drop-after::after{
  content:"";
  position:absolute;
  left:2px; right:2px;
  height:50px;
  border-radius:14px;
  background:rgba(var(--ic-accent-rgb),.09);
  border:2px dashed rgba(var(--ic-accent-rgb),.5);
  box-shadow:none;
}
.inv3-form-page .inv-cockpit-drop-before::before{
  top:-58px;
  border-top:3px solid var(--accent);   /* Akzentlinie an der Zielkante */
}
.inv3-form-page .inv-cockpit-drop-after::after{
  bottom:-58px;
  border-bottom:3px solid var(--accent);
}

/* (10) Touch: Drag-Handle ≥44px Klickfläche auf Mobile. */
@container (max-width: 479px){
  .inv3-form-page .inv3-line-head > .inv-cockpit-drag{
    min-height:44px;
    min-width:36px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Mehr Luft zwischen oberem Kundenbereich und Positionen (alle 3 Typen)
   (2026-05-17, Final-Polish)
   ────────────────────────────────────────────────────────────────────
   CSS-only. Der vertikale Section-Rhythmus in der Editor-Spalte (_33:
   .inv3-form-full-main gap:18px) ist zu eng — oberer Bereich und
   Positionen kleben aufeinander. Einheitlicher, ruhigerer Section-Gap.
   Scoped .inv3-form-page → Rechnung, Angebot, Wiederkehrend identisch;
   gewinnt die Kaskade (lädt nach _33), gepinnte _33-Substrings bleiben
   im Bundle (Contract-safe). */
.inv3-form-page .inv3-form-full-main{
  gap:32px;
}

/* ════════════════════════════════════════════════════════════════════
   REGRESSION-FIX 2026-05-17 — Mobile-Responsiveness der Positionskarte
   (shared Rechnung/Angebot/Wiederkehrend, .inv3-form-page)
   ────────────────────────────────────────────────────────────────────
   CSS-only, presentation only. Lädt als letztes Modul → gewinnt die
   Kaskade. Keine Markup-/Logik-/Berechnungs-/API-Änderung (das einzige
   Markup ist der additive .inv3-line-meta-rows-Wrapper in inv3-form.js).
   ════════════════════════════════════════════════════════════════════ */

/* (1) REGRESSION-FIX 2026-05-18 — „+ Beschreibung" und „+ Rabatt"
   stehen UNTEREINANDER (nicht nebeneinander). Der frühere Row-Share
   ließ „+ Rabatt" frei im Raum „floaten" (rechtsbündig neben dem
   Beschreibungs-Button) und wirkte uneinheitlich. Jetzt: eine Spalte,
   beide Sub-Rows volle Breite, stabile Reihenfolge Beschreibung (order:1
   aus _94) → Rabatt (order:2). Kein @container/flex-basis-Tanz mehr. */
.inv3-form-page .inv3-line-meta-rows{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:6px;
  order:1;
  min-width:0;
}
.inv3-form-page .inv3-line-meta-rows > .inv3-line-desc-row,
.inv3-form-page .inv3-line-meta-rows > .inv3-line-discount-row{
  flex:0 0 auto;
  width:100%;
  min-width:0;
}

/* (1b) REGRESSION-FIX 2026-05-18 — Positions-Rahmen einheitlich an
   ALLEN vier Seiten schließen. _90-responsive-overrides modelliert die
   Positionen noch als flache Stacked-Rows (`border-radius:0`,
   `:last-of-type{border-bottom:none}`, Active `border-color:transparent`
   + `border-radius:8px`). _94 hat danach auf Einzel-Cards mit
   Amber-Active-Frame umgestellt (`border:1px;border-radius:14px`), aber
   die _90-Reste haben höhere Spezifität bzw. eigene Werte und kollidieren
   → der aktive (=letzte) Rahmen war nur links/rechts/oben sichtbar, unten
   offen, Radius uneinheitlich. _95 lädt nach _90/_94 → hier den Card-
   Frame deterministisch und seitengleich festschreiben. */
.inv3-form-page .inv3-items-builder .inv3-line.inv3-item-card,
.inv3-form-page .inv3-line.inv3-item-card:last-of-type{
  border:1px solid var(--invoice-border);
  border-radius:14px;
}
.inv3-form-page .inv3-items-builder--single-active .inv3-line.inv3-item-card[data-active="1"],
.inv3-form-page .inv3-items-builder--single-active .inv3-line.inv3-item-card[data-active="1"]:last-of-type{
  border:1px solid rgba(var(--ic-accent-rgb),.45);
  border-radius:14px;
  box-shadow:0 0 0 1px rgba(var(--ic-accent-rgb),.16);
}

/* (2) Collapsed-Head war UNBEDINGT (sehr hohe Spezifität, kein
   @container) → die @container-Mobile-Restacks galten NUR für offene
   Karten. Collapsed-Karten (Default bei Wiederkehrend!) blieben einzeilig
   „drag chip name total actions" → Preis klebte am ⋯-Menü, Chevron-
   Trefferfläche zu eng (Fehl-Tap → iOS-Textauswahl). Hier dieselben
   Breakpoints für collapsed, gleiche Spezifität-Kette → responsive. */
@container (max-width: 679px){
  .inv3-form-page .inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-head{
    grid-template-columns:var(--ic-drag-w) var(--ic-chip-w) minmax(0,1fr) auto;
    grid-template-areas:
      "drag chip name    actions"
      "drag chip total   actions";
    column-gap:16px;
    row-gap:2px;
    align-items:center;
    padding-right:6px;
  }
  .inv3-form-page .inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-head > .inv3-item-card-summary,
  .inv3-form-page .inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-head > .inv3-line-total{
    grid-area:total;
    align-self:center;
    justify-self:start;
    text-align:left;
  }
  .inv3-form-page .inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-head > .inv3-item-card-actions,
  .inv3-form-page .inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-head > .inv3-line-actions{
    grid-area:actions;
    align-self:center;
  }
}
@container (max-width: 479px){
  /* Phone (≈390px): collapsed-Karte VOLLSTÄNDIG gestapelt — kein
     Quetschen von Input/Buttons/Preis mehr in eine horizontale Reihe.
     Struktur (User-Vorgabe 2026-05-19):
       Zeile 1: Drag · Nummer · Leistung (volle Restbreite)
       Zeile 2: Aktionen rechtsbündig (analog zum offenen Zustand,
                gleich große ≥44px Touch-Ziele, mit Abstand zur Kante)
       Zeile 3: Preisblock getrennt (Label links · Betrag rechts,
                USt-Subzeile dezent darunter). */
  .inv3-form-page .inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-head{
    grid-template-columns:var(--ic-drag-w) var(--ic-chip-w) minmax(0,1fr);
    grid-template-areas:
      "drag chip name"
      "actions actions actions"
      "total total total";
    column-gap:12px;
    row-gap:14px;
    align-items:center;
    padding-right:14px;
    min-width:0;
  }
  .inv3-form-page .inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-head > .inv3-line-cell--name{
    align-self:center;
    min-width:0;
  }
  /* Aktions-Zeile: rechtsbündig (parität zur ausgeklappten Position), ≥44px-Buttons. */
  .inv3-form-page .inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-head > .inv3-line-actions,
  .inv3-form-page .inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-head > .inv3-item-card-actions{
    grid-area:actions;
    justify-content:flex-end;
    align-items:center;
    gap:10px;
    padding:0;
  }
  .inv3-form-page .inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-actions .inv3-item-iconbtn,
  .inv3-form-page .inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-actions .inv3-item-collapse,
  .inv3-form-page .inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-actions .inv3-line-trash{
    min-width:44px;
    min-height:44px;
  }
  /* Preisblock: eigene Zeile, klar getrennt mit dezenter Trennlinie.
     Label „Gesamt brutto" links, Betrag rechts; USt-Zeile darunter. */
  .inv3-form-page .inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-head > .inv3-line-total.inv3-item-card-summary{
    grid-area:total;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    width:100%;
    min-width:0;
    padding-top:14px;
    border-top:1px solid rgba(var(--text-rgba-base),.08);
    text-align:left;
  }
  .inv3-form-page .inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-total .inv3-item-card-total{
    flex-direction:row;
    align-items:baseline;
    justify-content:space-between;
    width:100%;
    gap:12px;
  }
  .inv3-form-page .inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-total .inv3-item-card-total::before{
    margin-bottom:0;
  }
  .inv3-form-page .inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-total .inv-cockpit-ust-sub{
    align-self:flex-start;
    text-align:left;
    margin-top:0;
  }
}

/* (3) Chevron/Trash/⋯ + Drag: saubere Tap-Targets statt iOS-Textauswahl.
   Auf Mobile löste ein Tap auf den Icon-Button (bzw. Drüberfahren beim
   Drag) iOS-Textselektion statt der Aktion aus. NUR interaktive
   Elemente — der Betrag (Total/Gross) bleibt selektierbar, damit
   Nutzer ihn kopieren können (Überweisung/Abgleich; Gemini-Review). */
.inv3-form-page .inv3-item-iconbtn,
.inv3-form-page .inv3-item-collapse,
.inv3-form-page .inv3-line-trash,
.inv3-form-page .inv3-item-menu-btn,
.inv3-form-page .inv-cockpit-drag,
.inv3-form-page .inv3-line-chip{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  touch-action:manipulation;
}
.inv3-form-page .inv-cockpit-drag{
  touch-action:none;
}
/* (4) Drag&Drop: während des Ziehens keinerlei Textselektion (Finger
   fährt sonst über die Feld-Texte → iOS markiert alles). user-select
   wird vererbt → Container-Scope reicht, kein Universalselektor `*`
   (vermeidet teure Full-Tree-Style-Recalc; Gemini-Review). */
body.de-cockpit-dragging,
body.de-cockpit-dragging .inv3-form-page{
  -webkit-user-select:none !important;
  user-select:none !important;
  -webkit-touch-callout:none !important;
}

/* ════════════════════════════════════════════════════════════════════
   _95a — Positionskarte Mobile-Compact (2026-05-21)
   ────────────────────────────────────────────────────────────────────
   Shared invoice/quote/recurrence (.inv3-form-page). CSS-only,
   presentation only — kein Markup-/Logik-/Berechnungs-/API-Change.
   Lädt nach _95 → gewinnt die Kaskade.

   Ziel: Mobile-Höhe der Positionskarte um ~30–40 % senken.
   Menge/Einheit/Einzelpreis netto in EINER Zeile (22/28/50),
   USt als kompakte Pill links + Brutto rechts in EINER Zeile,
   Beschreibung/Rabatt als horizontale Chip-Reihe.

   Container: `.inv3-lines{container-type:inline-size}` (_90).
   Phone-Container ≤479px = Phone-Viewport (~390–500px).
   Tablet-Container ≤679px = größere Phones / kleine Tablets.

   Desktop bleibt vollständig unberührt (alle Regeln im
   @container-Scope). ════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   Tablet/Phone (≤679px): Pricing-Row als 3-Spalter, Total-Cluster
   als 2-Spalter (USt | Brutto) — vorbereitet für Phone-Refinement.
   ════════════════════════════════════════════════════════════════════ */
@container (max-width: 679px){
  /* Head-Grid kompakter: Drag + Chip + Name in Row 1, Pricing/Total/
     Actions gestapelt darunter. Auf Phones wird das Layout weiter
     verfeinert (siehe ≤479px-Block). */
  .inv3-form-page .inv3-line.inv3-item-card{padding:8px 0 0;}

  /* Pricing-Group bleibt 3-spaltig (statt 2 in _90/_679) — bricht erst
     auf sehr engen Phones nicht mehr um. */
  .inv3-form-page .inv3-line-pricing-group{
    grid-template-columns:22% 28% minmax(0,1fr);
    column-gap:8px;
    row-gap:0;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Phone (≤479px): Voller Mobile-Compact-Pass für offene Karten.
   Collapsed-State bleibt in _95 (eigene Spezifität, höher).
   ════════════════════════════════════════════════════════════════════ */
@container (max-width: 479px){
  /* (1) Head als 2-Row-Grid statt 4-Row-Stapel:
        Row 1: [drag] [chip] [name fluid] [actions ⋯⌄]
        Row 2: [pricing-group full-width]
        Row 3: [total-cluster full-width]
     Beschreibung/Rabatt liegen ausserhalb des Heads in
     .inv3-line-meta-rows und werden weiter unten zu einer Chip-Reihe. */
  .inv3-form-page .inv3-line.inv3-item-card{
    padding:10px 0 0;
    --ic-article-x:0px;
  }

  /* Spezifität reicht aus, um _95-Phone-Regel (gleiche Selektor-Kette,
     gleiches @container-BP, aber wir laden später) zu überschreiben. */
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head{
    grid-template-columns:var(--ic-drag-w) var(--ic-chip-w) minmax(0,1fr) auto;
    grid-template-areas:
      "drag chip name actions"
      "pricing pricing pricing pricing"
      "total total total total";
    column-gap:8px;
    row-gap:10px;
    align-items:center;
    padding:0 12px;
    min-width:0;
  }
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > .inv-cockpit-drag{
    grid-area:drag;
    align-self:center;
    width:var(--ic-drag-w);
    min-height:38px;
  }
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > .inv3-line-chip{
    grid-area:chip;
    align-self:center;
    margin:0;
  }
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > .inv3-line-cell--name{
    grid-area:name;
    align-self:center;
    min-width:0;
  }
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > .inv3-line-pricing-group{
    grid-area:pricing;
    align-self:stretch;
  }
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > .inv3-line-total{
    grid-area:total;
    align-self:stretch;
  }
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > .inv3-line-actions{
    grid-area:actions;
    align-self:center;
    justify-content:flex-end;
    align-items:center;
    gap:4px;
    padding:0;
  }

  /* Artikel-Label etwas kompakter — Title-Input-Höhe (40px) und 16px-Font
     (iOS-Zoom-Schutz) erbt von _90; nicht erneut deklarieren (sonst kollidiert
     `height:40px` mit der Mobile-Collapsed-Test-Pin in _95). */
  .inv3-form-page .inv3-line-field-label{
    font-size:.66rem;
    padding-left:2px;
  }
  .inv3-form-page .inv3-line-title-input{
    padding:0 12px;
  }

  /* (2) Pricing-Row: Menge 22 / Einheit 28 / Preis 50 — EINE Zeile.
     `minmax(0,…)` damit lange Einheits-Strings nicht das Grid sprengen.
     Inputs behalten 40px Höhe und 16px Font auf coarse-Pointer
     (Touch-Reserve via _90 .inv3-line .inv-inp{min-height:44px}). */
  .inv3-form-page .inv3-line-pricing-group{
    display:grid;
    grid-template-columns:minmax(0,22%) minmax(0,28%) minmax(0,1fr);
    column-gap:6px;
    row-gap:0;
    align-items:end;
    width:100%;
    min-width:0;
  }
  .inv3-form-page .inv3-line-pricing-group .inv3-item-field{
    min-width:0;
  }
  .inv3-form-page .inv3-line-pricing-group .inv3-item-field-label{
    font-size:.65rem;
    padding-left:2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .inv3-form-page .inv3-line-head .inv3-item-field .inv-inp{
    padding:0 8px;
  }
  .inv3-form-page .inv3-line-head .inv3-item-field--unit .inv3-item-unit-select{
    padding-right:22px;
  }

  /* (3) Total-Cluster: USt-Pill links · Brutto-Wert rechts. EINE Zeile.
     Die USt-Subzeile („inkl. 0,00 € USt (19 %)") ist auf Mobile redundant
     mit der Pill und entfällt → Höhe spart sich. Der „GESAMT BRUTTO"-
     Eyebrow bleibt klein über dem Betrag — Hierarchie bleibt erhalten. */
  .inv3-form-page .inv3-line-total.inv3-item-card-summary{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"tax gross";
    align-items:center;
    column-gap:14px;
    row-gap:0;
    width:100%;
    min-width:0;
    padding:10px 0 2px;
    border-top:1px solid rgba(var(--text-rgba-base),.06);
    text-align:left;
  }
  .inv3-form-page .inv3-line-total.inv3-item-card-summary > .inv3-item-field--tax{
    grid-area:tax;
    flex-direction:row;
    align-items:center;
    align-self:center;
    width:auto;
    min-width:0;
    margin:0;
    gap:0;
  }
  /* USt-Label ist auf Mobile redundant zur Pill — visuell ausblenden,
     bleibt im Accessibility-Tree (für SR-Konsistenz: position:absolute
     + clip ist die übliche sr-only-Maske; _95 setzt Label im Cluster
     bereits read-only — wir verstecken ihn hier konsequent). */
  .inv3-form-page .inv3-line-total .inv3-item-field--tax .inv3-item-field-label{
    position:absolute;
    width:1px;height:1px;
    padding:0;margin:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    clip-path:inset(50%);
    white-space:nowrap;
    border:0;
  }
  .inv3-form-page .inv3-line-total.inv3-item-card-summary > .inv3-item-card-total{
    grid-area:gross;
    align-self:center;
    justify-self:end;
    flex-direction:column;
    align-items:flex-end;
    text-align:right;
    min-height:0;
    gap:0;
  }
  .inv3-form-page .inv3-line-total.inv3-item-card-summary > .inv3-item-card-total::before{
    margin-bottom:0;
    font-size:9.5px;
    letter-spacing:.1em;
  }
  .inv3-form-page .inv3-line-total.inv3-item-card-summary > .inv-cockpit-ust-sub{
    display:none;
  }
  /* USt-Pill: kompakt, gold-getönt, app-näher. Höhe 36px ist mit
     padding/Border ~ 40 px Klickfläche; coarse-Override (_90) hebt sie
     ohnehin auf 36px Mindesthöhe + 16px Font (iOS-Zoom-Schutz). */
  .inv3-form-page .inv3-line-total .inv3-line-tax-select{
    height:36px;
    min-height:36px;
    min-width:84px;
    width:auto;
    padding:0 26px 0 12px;
    border-radius:999px;
    background-color:rgba(var(--ic-accent-rgb),.08);
    border-color:rgba(var(--ic-accent-rgb),.28);
    color:var(--text);
    font-weight:var(--fw-semibold);
  }
  .inv3-form-page .inv3-line-total .inv3-line-tax-select:hover{
    background-color:rgba(var(--ic-accent-rgb),.12);
    border-color:rgba(var(--ic-accent-rgb),.45);
  }

  /* (4) Meta-Row: Beschreibung + Rabatt als horizontale Chip-Reihe.
     Off-State (kein Text / kein Rabatt aktiv) = beide Chips Inline.
     On-State (Textarea offen / Rabatt aktiv) = volle Breite für Eingabe. */
  .inv3-form-page .inv3-line-meta-rows{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    gap:6px;
    padding:6px 12px 10px;
  }
  .inv3-form-page .inv3-line-meta-rows > .inv3-line-desc-row,
  .inv3-form-page .inv3-line-meta-rows > .inv3-line-discount-row{
    width:auto;
    flex:0 1 auto;
    padding:0;
    margin:0;
    min-width:0;
  }
  /* On-State: volle Breite (Textarea / aktiver Rabatt-Input). */
  .inv3-form-page .inv3-line[data-desc-open="1"]
    .inv3-line-meta-rows > .inv3-line-desc-row{
    flex:1 1 100%;
    width:100%;
  }
  .inv3-form-page .inv3-line[data-discount-active="1"]
    .inv3-line-meta-rows > .inv3-line-discount-row{
    flex:1 1 100%;
    width:100%;
  }
  /* Beschreibung/Rabatt-Chips: kompakte Höhe (coarse-Override hebt auf
     ≥44px für Touch). Inset-Padding aus _90 (6px 10px) bleibt erhalten —
     unsere Regel überschreibt nur Mindesthöhe nicht, damit der
     gepinnte Mobile-Off-State-Test (min-height:36px;padding:6px 10px)
     im _90-Block weiterhin matched. */
  .inv3-form-page .inv3-line-meta-rows .inv3-line-desc-toggle,
  .inv3-form-page .inv3-line-meta-rows .inv3-line-discount-add{
    min-height:36px;
    padding:6px 12px;
    font-size:12.5px;
    border-radius:999px;
    background:rgba(var(--surface-rgba-base),.05);
    border:1px solid var(--invoice-border);
    color:var(--invoice-text-secondary);
  }
  .inv3-form-page .inv3-line-meta-rows .inv3-line-desc-toggle:hover,
  .inv3-form-page .inv3-line-meta-rows .inv3-line-discount-add:hover{
    color:var(--accent);
    border-color:rgba(var(--ic-accent-rgb),.4);
    background:rgba(var(--ic-accent-rgb),.07);
  }

  /* (5) Action-Cluster (⋯ + 🗑 + ⌄) kompakt rechtsbündig in Row 1.
     Icon-Buttons auf 36×36 — Touch-Reserve durch coarse-Pointer-Override
     unten (44×44). */
  .inv3-form-page .inv3-line-head > .inv3-line-actions .inv3-item-iconbtn,
  .inv3-form-page .inv3-line-head > .inv3-line-actions .inv3-item-collapse,
  .inv3-form-page .inv3-line-head > .inv3-line-actions .inv3-line-trash{
    width:36px;
    height:36px;
    min-width:36px;
    min-height:36px;
    padding:0;
    border-radius:10px;
  }

  /* (6) Drag-Handle kompakter, Chip etwas kleiner — gleiche Touch-
     Reserve durch coarse-Pointer-Override (≥44px) im _95. */
  .inv3-form-page .inv3-line.inv3-item-card{
    --ic-drag-w:24px;
    --ic-chip-w:32px;
  }
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-chip{
    width:26px;
    height:26px;
    font-size:12px;
  }
  .inv3-form-page .inv3-line.inv3-item-card .inv-cockpit-drag{
    width:24px;
    min-width:24px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Touch-Targets auf coarse-Pointer: ≥44px für interaktive Icons/Chips.
   _90 deckt bereits .inv3-line .inv-inp{min-height:44px} ab; hier nur
   die Composer-spezifischen Icon-Buttons / Chips, die wir oben auf
   36px verkleinert haben. ════════════════════════════════════════════ */
@media (pointer:coarse){
  .inv3-form-page .inv3-line-head > .inv3-line-actions .inv3-item-iconbtn,
  .inv3-form-page .inv3-line-head > .inv3-line-actions .inv3-item-collapse,
  .inv3-form-page .inv3-line-head > .inv3-line-actions .inv3-line-trash{
    min-width:44px;
    min-height:44px;
  }
  .inv3-form-page .inv3-line-meta-rows .inv3-line-desc-toggle,
  .inv3-form-page .inv3-line-meta-rows .inv3-line-discount-add{
    min-height:44px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   _95b — Artikelkarte Action-Harmonisierung (2026-05-21)
   ────────────────────────────────────────────────────────────────────
   Shared invoice/quote/recurrence (.inv3-form-page). CSS-only,
   presentation only — kein Markup-/Logik-/Berechnungs-/API-Change.
   Lädt nach _95a → gewinnt die Kaskade.

   Ziel: Die obere Icon-Action-Gruppe (⋯ · 🗑 · ⌄) und die untere
   Aktionsleiste („+ Beschreibung", „+ Rabatt") werden auf Mobile so
   abgestimmt, dass sie als bewusste, ruhige Control-Gruppen wirken
   statt als drei große, zufällig kombinierte Einzelbuttons.

   Scope: nur Phone (@container ≤479px) — Desktop bleibt unberührt.
   ════════════════════════════════════════════════════════════════════ */

@container (max-width: 479px){

  /* ──────────────────────────────────────────────────────────────────
     (A) Obere Icon-Actions: kleine Control-Gruppe statt Einzelbuttons.
     ⋯ · 🗑 · ⌄ teilen exakt dieselbe Größe (44×44), denselben Radius
     (12px), dieselbe Fläche und denselben Border. Tighter gap (6px)
     gruppiert sie visuell. Vertikal zur Mitte der Artikel-Eingabe
     ausgerichtet, ohne auf deren Höhe aufzublasen.
     ────────────────────────────────────────────────────────────────── */
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > .inv3-line-actions,
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > .inv3-item-card-actions{
    display:inline-flex;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    padding:0;
    margin:0;
    align-self:center;
  }

  /* Alle drei Icon-Buttons identisch — Größe, Radius, Border, BG. */
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > :is(.inv3-line-actions, .inv3-item-card-actions) .inv3-item-iconbtn,
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > :is(.inv3-line-actions, .inv3-item-card-actions) .inv3-item-menu-trigger,
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > :is(.inv3-line-actions, .inv3-item-card-actions) .inv3-item-collapse,
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > :is(.inv3-line-actions, .inv3-item-card-actions) .inv3-line-trash{
    box-sizing:border-box;
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
    max-width:44px;
    max-height:44px;
    padding:0;
    margin:0;
    border-radius:12px;
    border:1px solid rgba(var(--surface-rgba-base),.08);
    background:rgba(var(--surface-rgba-base),.04);
    color:var(--invoice-text-secondary);
    font-size:14px;
    line-height:1;
    transform:none;
  }
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > :is(.inv3-line-actions, .inv3-item-card-actions) .inv3-item-iconbtn:hover,
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > :is(.inv3-line-actions, .inv3-item-card-actions) .inv3-item-menu-trigger:hover,
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > :is(.inv3-line-actions, .inv3-item-card-actions) .inv3-item-collapse:hover{
    border-color:rgba(var(--ic-accent-rgb),.28);
    background:rgba(var(--surface-rgba-base),.10);
    color:var(--invoice-text-primary);
    transform:none;
  }
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > :is(.inv3-line-actions, .inv3-item-card-actions) .inv3-line-trash:hover{
    border-color:transparent;
    background:var(--invoice-danger-bg);
    color:var(--invoice-danger);
    transform:none;
  }
  /* SVG/Char-Glyph konsistent zentrieren. */
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > :is(.inv3-line-actions, .inv3-item-card-actions) .inv3-item-iconbtn > svg,
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > :is(.inv3-line-actions, .inv3-item-card-actions) .inv3-item-collapse > svg{
    width:16px;
    height:16px;
  }

  /* Light-Mode-Spiegelung — gleiche Logik, hellere Tönung. */
  body.light .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > :is(.inv3-line-actions, .inv3-item-card-actions) .inv3-item-iconbtn,
  body.light .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > :is(.inv3-line-actions, .inv3-item-card-actions) .inv3-item-menu-trigger,
  body.light .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > :is(.inv3-line-actions, .inv3-item-card-actions) .inv3-item-collapse,
  body.light .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > :is(.inv3-line-actions, .inv3-item-card-actions) .inv3-line-trash{
    border-color:rgba(var(--text-rgba-base),.08);
    background:rgba(var(--text-rgba-base),.04);
    color:var(--invoice-text-secondary);
  }
  body.light .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > :is(.inv3-line-actions, .inv3-item-card-actions) .inv3-item-iconbtn:hover,
  body.light .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > :is(.inv3-line-actions, .inv3-item-card-actions) .inv3-item-menu-trigger:hover,
  body.light .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > :is(.inv3-line-actions, .inv3-item-card-actions) .inv3-item-collapse:hover{
    border-color:rgba(var(--ic-accent-rgb),.32);
    background:rgba(var(--text-rgba-base),.07);
  }

  /* Focus-Ring sitzt sauber innerhalb der Gruppe (keine versetzten Outlines). */
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > :is(.inv3-line-actions, .inv3-item-card-actions) .inv3-item-iconbtn:focus-visible,
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > :is(.inv3-line-actions, .inv3-item-card-actions) .inv3-item-menu-trigger:focus-visible,
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > :is(.inv3-line-actions, .inv3-item-card-actions) .inv3-item-collapse:focus-visible{
    outline:none;
    box-shadow:0 0 0 2px var(--invoice-focus-ring);
  }

  /* ──────────────────────────────────────────────────────────────────
     (B) Untere Aktionsleiste: „+ Beschreibung", „+ Rabatt" als
     einheitliche Chip-Gruppe. Gleiche Höhe (44px), gleiche Pill,
     gleicher BG/Border, gleiches Padding, gleicher Font. Verschiedene
     Textlängen sind okay — die Buttons dürfen unterschiedlich breit
     sein, aber nicht visuell unterschiedlich gewichtet.
     ────────────────────────────────────────────────────────────────── */
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-meta-rows{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    padding:6px 12px 12px;
  }

  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-meta-rows .inv3-line-desc-toggle,
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-meta-rows .inv3-line-discount-add{
    box-sizing:border-box;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:44px;
    min-height:44px;
    padding:0 16px;
    border-radius:999px;
    border:1px solid var(--invoice-border);
    background:rgba(var(--surface-rgba-base),.04);
    color:var(--invoice-text-secondary);
    font-size:13px;
    font-weight:var(--fw-semibold);
    line-height:1;
    letter-spacing:0;
    white-space:nowrap;
    transition:background var(--tr-fast,160ms),border-color var(--tr-fast,160ms),color var(--tr-fast,160ms);
  }

  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-meta-rows .inv3-line-desc-toggle:hover,
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-meta-rows .inv3-line-discount-add:hover{
    border-color:rgba(var(--ic-accent-rgb),.4);
    background:rgba(var(--ic-accent-rgb),.07);
    color:var(--accent);
  }

  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-meta-rows .inv3-line-desc-toggle:focus-visible,
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-meta-rows .inv3-line-discount-add:focus-visible{
    outline:none;
    box-shadow:0 0 0 2px var(--invoice-focus-ring);
  }

  /* Light-Mode-Spiegelung. */
  body.light .inv3-form-page .inv3-line.inv3-item-card .inv3-line-meta-rows .inv3-line-desc-toggle,
  body.light .inv3-form-page .inv3-line.inv3-item-card .inv3-line-meta-rows .inv3-line-discount-add{
    background:rgba(var(--text-rgba-base),.04);
  }
  body.light .inv3-form-page .inv3-line.inv3-item-card .inv3-line-meta-rows .inv3-line-desc-toggle:hover,
  body.light .inv3-form-page .inv3-line.inv3-item-card .inv3-line-meta-rows .inv3-line-discount-add:hover{
    background:rgba(var(--ic-accent-rgb),.09);
  }

  /* Off-State (kein Desc / kein Rabatt): beide Chips bleiben Inline-
     Gruppe; Off-State-Buttons müssen sich nicht über volle Breite
     ausdehnen. On-State (offene Textarea / aktive Rabatt-Pill) bleibt
     unverändert: das jeweils aktive Sub-Row-Element nimmt 100 % ein
     (über bestehende _95a-Regeln). */
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-meta-rows > .inv3-line-desc-row,
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-meta-rows > .inv3-line-discount-row{
    display:inline-flex;
    align-items:center;
    flex:0 0 auto;
    width:auto;
    padding:0;
    margin:0;
    min-height:44px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Touch-Reserve: auf coarse-Pointer dieselbe 44-px-Mindestgröße auch
   außerhalb von @container — falls die Card mal in einem nicht-
   containerisierten Kontext gerendert wird (z. B. Storybook/Preview).
   ════════════════════════════════════════════════════════════════════ */
@media (pointer:coarse){
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-meta-rows .inv3-line-desc-toggle,
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-meta-rows .inv3-line-discount-add{
    min-height:44px;
  }
}

/* Mobile-only follow-up for the invoice-family position cards.
   Desktop/tablet desktop contract stays on the legacy .inv3-line shell;
   this layer only refines narrow containers after _95a/_95b. */

@container (max-width: 640px){
  .inv3-form-page .inv3-line.inv3-item-card,
  .inv3-form-page .inv3-items-builder--single-active .inv3-line.inv3-item-card[data-active="1"]{
    margin:0;
    padding:12px 0;
    overflow:hidden;
    border-radius:14px;
  }

  /* Mobile-Kopf neu geordnet (2026-06-05): Zeile 1 = Drag + Nummer LINKS,
     Action-Group RECHTS (gemeinsame Meta-Zeile, vertikal ausgerichtet);
     Zeile 2 = Artikel über die VOLLE Breite (nicht mehr von den Actions
     gequetscht). Danach Pricing + Total/Summary. */
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head{
    grid-template-columns:var(--ic-drag-w) var(--ic-chip-w) minmax(0,1fr) auto;
    grid-template-areas:
      "drag    chip    .       actions"
      "name    name    name    name"
      "pricing pricing pricing pricing"
      "total   total   total   total";
    column-gap:10px;
    row-gap:10px;          /* kompakter (Punkt 6) */
    align-items:center;
    padding:0 20px;
    min-width:0;
  }

  .inv3-form-page .inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-head{
    grid-template-areas:
      "drag    chip    .     actions"
      "name    name    name  name"
      "total   total   total total";
  }

  /* Drag + Nummer teilen eine Meta-Zeile, vertikal zueinander zentriert. */
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > .inv-cockpit-drag{
    grid-area:drag;
    align-self:center;
    justify-self:start;
    min-width:40px;          /* ≥40px Touch-Ziel auch auf Mobile */
    min-height:40px;
  }

  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > .inv3-line-chip{
    grid-area:chip;
    margin:0;
    align-self:center;
    justify-self:start;
  }

  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > .inv3-line-cell--name{
    grid-area:name;
    min-width:0;
    align-self:center;
    width:100%;
  }

  .inv3-form-page .inv3-line.inv3-item-card:not([data-collapsed="1"]) .inv3-line-head > .inv3-line-pricing-group{
    grid-area:pricing;
    width:100%;
    min-width:0;
  }

  .inv3-form-page .inv3-line.inv3-item-card:not([data-collapsed="1"]) .inv3-line-head > .inv3-line-total{
    grid-area:total;
    width:100%;
    min-width:0;
    padding-top:10px;      /* kompakter (Punkt 6) */
    border-top:1px solid rgba(var(--text-rgba-base),.08);
  }

  /* Action-Group rechts oben: kompakte Segmented-Gruppe (NICHT volle Breite,
     kein leer wirkender grauer Kasten). Zwei 40×40-Buttons reichen. */
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > :is(.inv3-line-actions, .inv3-item-card-actions){
    grid-area:actions;
    justify-self:end;
    justify-content:flex-end;
    align-items:center;
    gap:4px;
    padding:3px;
    width:auto;
    min-width:0;
  }

  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-cell--name,
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-field--name,
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-title-input,
  .inv3-form-page .inv3-line.inv3-item-card .inv3-position-card__article-input{
    width:100%;
    min-width:0;
  }

  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-title-input{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .inv3-form-page .inv3-line.inv3-item-card:not([data-collapsed="1"]) .inv3-line-pricing-group{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:8px 12px;          /* kompakter: weniger vertikale Luft (Punkt 6) */
    align-items:end;
  }

  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-pricing-group > .inv3-item-field{
    min-width:0;
  }

  .inv3-form-page .inv3-line.inv3-item-card .inv3-position-card__unit-price{
    grid-column:1 / -1;
  }

  .inv3-form-page .inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-pricing-group,
  .inv3-form-page .inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-desc-row,
  .inv3-form-page .inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-discount-row,
  .inv3-form-page .inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-total .inv3-item-field--tax{
    display:none;
  }

  .inv3-form-page .inv3-line.inv3-item-card[data-collapsed="1"] .inv3-line-head > .inv3-line-total{
    grid-area:total;
    width:100%;
    min-width:0;
    padding-top:14px;
    border-top:1px solid rgba(var(--text-rgba-base),.08);
  }

  .inv3-form-page .inv3-line.inv3-item-card .inv3-position-card__control,
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > :is(.inv3-line-actions, .inv3-item-card-actions) .inv3-item-iconbtn,
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > :is(.inv3-line-actions, .inv3-item-card-actions) .inv3-item-collapse,
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > :is(.inv3-line-actions, .inv3-item-card-actions) .inv3-line-trash{
    box-sizing:border-box;
    min-height:44px;
  }

  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-total.inv3-item-card-summary{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:
      "tax gross"
      "tax ust";
    align-items:center;
    column-gap:14px;
    row-gap:4px;
    text-align:right;
  }

  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-total.inv3-item-card-summary > .inv3-item-field--tax{
    grid-area:tax;
    align-self:start;
    width:auto;
    min-width:0;
    margin:0;
  }

  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-total .inv3-item-field--tax .inv3-item-field-label{
    position:absolute;
    width:1px;
    height:1px;
    margin:0;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    clip-path:inset(50%);
    white-space:nowrap;
    border:0;
  }

  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-total .inv3-line-tax-select{
    width:auto;
    min-width:96px;
    height:44px;
    min-height:44px;
    padding:0 30px 0 14px;
    border-radius:14px;
    box-sizing:border-box;
  }

  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-total.inv3-item-card-summary > .inv3-item-card-total{
    grid-area:gross;
    justify-self:end;
    align-self:end;
    min-width:0;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
  }

  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-total.inv3-item-card-summary > .inv-cockpit-ust-sub{
    grid-area:ust;
    justify-self:end;
    min-width:0;
    white-space:nowrap;
  }

  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-meta-rows{
    gap:4px;               /* Toggle-Zeilen dichter (Punkt 6) */
    padding:6px 20px 0;
    min-width:0;
  }

  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-meta-rows > .inv3-line-desc-row,
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-meta-rows > .inv3-line-discount-row,
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-desc-wrap,
  .inv3-form-page .inv3-line.inv3-item-card .inv3-position-card__description-wrap,
  .inv3-form-page .inv3-line.inv3-item-card .inv3-position-card__description-input,
  .inv3-form-page .inv3-line.inv3-item-card .inv3-items-desc-input{
    width:100%;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }
}

@container (max-width: 420px){
  /* USt + Gesamt bleiben EINE Summary-Row (Tax links, Gesamt rechts), auch auf
     390/430px — NICHT mehr vertikal stapeln (sonst getrennte Inseln, Punkt 5).
     Tax links vertikal mittig, Gesamt rechts dominant, Steuerhinweis darunter. */
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-total.inv3-item-card-summary{
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "tax gross"
      "tax ust";
    align-items:center;
    column-gap:12px;
    row-gap:2px;
  }
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-total.inv3-item-card-summary > .inv3-item-field--tax{
    align-self:center;
  }
  /* Gesamtbetrag dominant, rechtsbündig; Steuerhinweis klein + sichtbar
     darunter (eine andere Regel setzt ihn mobil auf display:none → hier
     explizit wieder einblenden, Punkt 5). */
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-total.inv3-item-card-summary > .inv3-item-card-total{
    justify-self:end;
    align-self:end;
    text-align:right;
    font-size:20px;
    font-weight:var(--fw-bold);
  }
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-total.inv3-item-card-summary > .inv-cockpit-ust-sub{
    display:block;
    justify-self:end;
    align-self:start;
    text-align:right;
    font-size:11.5px;
    color:var(--invoice-text-muted);
    white-space:nowrap;
  }

  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-meta-rows{
    flex-direction:column;
    align-items:stretch;
  }

  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-desc-toggle,
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-discount-add{
    width:100%;
  }
}

@container (max-width: 360px){
  /* Kompakter (Punkt 6): Menge + Einheit bleiben NEBENEINANDER (spart Höhe),
     nur Einzelpreis volle Breite. Erst unter 300px alles einspaltig. */
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-pricing-group{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  .inv3-form-page .inv3-line.inv3-item-card .inv3-position-card__unit-price{
    grid-column:1 / -1;
  }

  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-head > :is(.inv3-line-actions, .inv3-item-card-actions){
    gap:6px;
  }
}

@container (max-width: 290px){
  /* Sehr schmal: dann doch alles einspaltig (Quetsch-Schutz). */
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-pricing-group{
    grid-template-columns:1fr;
  }
  .inv3-form-page .inv3-line.inv3-item-card .inv3-position-card__quantity,
  .inv3-form-page .inv3-line.inv3-item-card .inv3-position-card__unit,
  .inv3-form-page .inv3-line.inv3-item-card .inv3-position-card__unit-price{
    grid-column:1 / -1;
  }
}

/* ════════════════════════════════════════════════════════════════════
   _95d — Positionskarte: lange Beträge sauber rendern (2026-05-31)
   ────────────────────────────────────────────────────────────────────
   Shared invoice/quote/recurrence (.inv3-form-page). CSS-only,
   presentation only — kein Markup-/Logik-/Berechnungs-/API-Change.
   Lädt nach _95/_95a/_95b/_95c → gewinnt die Kaskade.

   Problem (User 2026-05-31, Screenshot):
   Beim Erstellen von Rechnung/Angebot überlaufen sehr lange Beträge den
   Positions-Editor. Der „GESAMT BRUTTO"-Wert (z. B.
   23.800.000.000.000,00 €) trägt aus _94 `white-space:nowrap` und sitzt
   in einer FIXEN Grid-Spalte (_95 `grid-template-columns:92px
   minmax(150px,168px)`). Die Zahl kann weder umbrechen noch schrumpfen
   → sie schiebt sich über das USt-Feld. Dieselbe nowrap-Falle trifft die
   USt-Subzeile („inkl. … € USt (19 %)") und die Pricing-Inputs
   (Einzelpreis netto), deren Wert visuell aus dem 40px-Feld läuft.

   Lösung (User-Entscheidung „Skalieren + umbrechen"):
   (1) Brutto-Spalte flexibel machen, damit sie das verfügbare Restmaß
       nutzt statt fix zu deckeln.
   (2) Brutto-Betrag umbruchfähig + per clamp() sanft verkleinerbar.
   (3) USt-Subzeile umbruchfähig.
   (4) Pricing-Inputs auf min-width:0 (für die Grid-Schrumpfung) und der
       sichtbare Eingabewert wird im Feld geclippt statt überzulaufen.
   Kein neues Markup, kein JS, keine Berechnung — nur Darstellung.
   ════════════════════════════════════════════════════════════════════ */

/* ─── (1) Brutto-Spalte darf schrumpfen ──────────────────────────────
   _95 fixiert die gross/ust-Spalte auf minmax(150px,168px). Bei sehr
   langen Beträgen reicht das nicht und der nowrap-Betrag überläuft.
   Auf die flexible Restbreite umstellen: das Tax-Feld behält seine
   92px, die Brutto-/USt-Spalte nimmt den Rest und kann mit dem Inhalt
   umbrechen/schrumpfen. Nur Desktop/Tablet (das _95-Grid greift via
   :scope ohne @media); die schmalen @container-Layouts aus _95c/_95a
   bleiben unberührt und werden in (3) separat abgesichert. */
.inv3-form-page .inv3-line-total.inv3-item-card-summary{
  min-width:0;
}
@media (min-width:1024px){
  .inv3-form-page .inv3-line-total.inv3-item-card-summary{
    grid-template-columns:92px minmax(0,1fr);
  }
}

/* ─── (2) Brutto-Betrag: skalieren, dann umbrechen ───────────────────
   _94 setzt font-size:19px + white-space:nowrap auf .inv3-item-card-total
   und _90 setzt 1.1rem/nowrap auf .inv3-line-total-gross. Beide hier
   umbruchfähig machen und die Schrift per clamp() bei Überlänge sanft
   schrumpfen lassen, damit der Betrag IMMER vollständig sichtbar bleibt
   und das Layout stabil hält. tabular-nums (aus _94/_90) bleibt erhalten. */
.inv3-form-page .inv3-line-total .inv3-item-card-total,
.inv3-form-page .inv3-line-total-gross{
  min-width:0;
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  /* sanftes Schrumpfen: bei kurzen Beträgen volle 19px, bei langen bis
     ~13px herunter (Untergrenze hält Lesbarkeit). 2.6vw ist nur der
     fließende Mittelwert; clamp deckelt nach oben/unten. */
  font-size:clamp(13px, 2.6vw, 19px);
  line-height:1.15;
}

/* ─── (3) USt-Subzeile: umbruchfähig statt nowrap ────────────────────
   _94 (.inv-cockpit-ust-sub white-space:nowrap) + _95c-Mobile
   (white-space:nowrap) lassen „inkl. 3.800.000.000.000,00 € USt (19 %)"
   überlaufen. Auf normalen Umbruch stellen. */
.inv3-form-page .inv3-line-total .inv-cockpit-ust-sub,
.inv3-form-page .inv3-line-total.inv3-item-card-summary > .inv-cockpit-ust-sub{
  min-width:0;
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* ─── (4) Pricing-Inputs: Eingabewert clippen statt überlaufen ───────
   Die Pricing-Felder haben bereits min-width:0 (_90/_95a). Lange
   eingetippte Werte (Einzelpreis netto / Menge) laufen aber sichtbar
   aus dem 40px-Feld, weil text-overflow nicht gesetzt ist. Geklippter
   Wert mit Ellipsis ist hier korrekt: der volle Wert bleibt im Input
   editierbar/scrollbar, das Layout bleibt aber stabil.
   overflow:hidden ist Pflicht: text-overflow:ellipsis greift per CSS-Spec
   nur bei nicht-sichtbarem overflow — sonst läuft der Wert weiter raus. */
.inv3-form-page .inv3-line-head .inv3-item-field--price .inv-inp,
.inv3-form-page .inv3-line-head .inv3-item-field--qty .inv-inp,
.inv3-form-page .inv3-line-pricing-group .inv3-item-field .inv-inp{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ─── (5) Mobile/Tablet-Container: nowrap-Reste überschreiben ────────
   _95a (≤479px) und _95c (≤640px) setzen den gross-Betrag erneut auf
   white-space:nowrap. Mit gleicher @container-Breakpoint-Kette und
   späterem Laden (gleiche/höhere Spezifität) hier konsequent auf
   umbruchfähig zurückholen, damit lange Beträge auch auf Phone/Tablet
   nicht überlaufen. */
@container (max-width: 640px){
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-total.inv3-item-card-summary > .inv3-item-card-total,
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-total.inv3-item-card-summary > .inv-cockpit-ust-sub,
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-total .inv3-item-card-total,
  .inv3-form-page .inv3-line.inv3-item-card .inv3-line-total-gross{
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
    min-width:0;
    max-width:100%;
  }
}
@container (max-width: 479px){
  .inv3-form-page .inv3-line-total.inv3-item-card-summary > .inv3-item-card-total,
  .inv3-form-page .inv3-line-total .inv3-item-card-total{
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
    min-width:0;
    max-width:100%;
  }
}

/* ══════════════════════════════════════════════════════════════
   Buchungen Reference Shell
   Broad working pages that should visually lock to the Buchungen page:
   same app-shell offset, same outer width, same H1/subtitle rhythm.
   Excludes intentionally narrower or explicitly excluded modules.
   ══════════════════════════════════════════════════════════════ */

:root{
  --bookings-ref-max-width:var(--shell-ref-max-width);
  --bookings-ref-usable-max-width:calc(var(--bookings-ref-max-width) - (var(--shell-ref-frame-gutter) * 2));
  --bookings-ref-pad-top:var(--shell-ref-pad-top);
  --bookings-ref-pad-x:var(--shell-ref-pad-x);
  --bookings-ref-pad-bottom:var(--shell-ref-pad-bottom);
}

/* Responsive 1440px-Lane innerhalb der verbleibenden Shell-Spalte. */
body[data-shell="v2"] .shell-main[data-width] .app-workspace{
  width:100%;
  max-width:var(--shell-ref-max-width);
  margin-inline:auto;
  box-sizing:border-box;
}

@media print{
  body[data-shell="v2"] .shell-main[data-width] .app-workspace{
    max-width:none;
    margin:0;
  }
}

/* Dokumentlisten behalten ihre eigene Geometrie. Editoren verwenden statt
   `bookings-ref-frame` die paddingfreie `.app-workspace`-Lane. */
.bookings-ref-frame:not(.inv-page):not(.inv2-page):not(.inv3-page):not(.inv3-form-page){
  width:100%;
  box-sizing:border-box;
  max-width:var(--bookings-ref-max-width);
  margin:0 auto;
  padding:var(--bookings-ref-pad-top) var(--shell-ref-frame-gutter) var(--bookings-ref-pad-bottom);
}

body[data-shell="v2"] .shell-main[data-width="default"] .bookings-ref-frame:not(.inv-page):not(.inv2-page):not(.inv3-page):not(.inv3-form-page),
body[data-shell="v2"] .shell-main[data-width="wide"] .bookings-ref-frame:not(.inv-page):not(.inv2-page):not(.inv3-page):not(.inv3-form-page),
body[data-shell="v2"] .shell-main[data-width="full"] .bookings-ref-frame:not(.inv-page):not(.inv2-page):not(.inv3-page):not(.inv3-form-page){
  max-width:var(--bookings-ref-max-width);
}

body[data-shell="v2"] .shell-main[data-width="full"] .bookings-ref-frame:not(.inv-page):not(.inv2-page):not(.inv3-page):not(.inv3-form-page){
  padding-left:var(--bookings-ref-pad-x);
  padding-right:var(--bookings-ref-pad-x);
}

.bookings-ref-frame.app-page:not(.inv-page):not(.inv2-page):not(.inv3-page):not(.inv3-form-page),
.bookings-ref-frame.report-page{
  max-width:var(--bookings-ref-max-width);
  margin:0 auto;
  padding:var(--bookings-ref-pad-top) var(--shell-ref-frame-gutter) var(--bookings-ref-pad-bottom);
}

body[data-shell="v2"] .shell-main[data-width="full"] .bookings-ref-frame.app-page:not(.inv-page):not(.inv2-page):not(.inv3-page):not(.inv3-form-page),
body[data-shell="v2"] .shell-main[data-width="full"] .bookings-ref-frame.report-page{
  padding-left:var(--bookings-ref-pad-x);
  padding-right:var(--bookings-ref-pad-x);
}

/* .inv2-header / .inv2-analytics-header bewusst NICHT hier — die
   inv2-Flächen (Rechnung/Angebot/Wiederkehrend-Area) sind aus dem
   Referenzrahmen ausgenommen; nur echte Buchungen-Stil-Header bleiben. */
.bookings-ref-frame .cockpit-header,
.bookings-ref-frame .yo-page-header,
.bookings-ref-frame .sett-page-head{
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--shell-ref-header-gap);
  margin-bottom:var(--shell-ref-header-bottom);
}

/* .inv3-form-header / -header-main / -builder-header bewusst NICHT mehr
   hier — der Composer (.inv3-form-page) ist aus dem Referenzrahmen
   ausgenommen; sein Header-Rhythmus bleibt bei _92/_94. */
.bookings-ref-frame .cockpit-title,
.bookings-ref-frame .yo-title,
.bookings-ref-frame .sett-page-title,
.bookings-ref-frame .sbh-title{
  margin:0;
  font-size:var(--shell-ref-title-size);
  font-weight:var(--fw-bold);
  letter-spacing:-0.025em;
  line-height:1.15;
}

.bookings-ref-frame .cockpit-subtitle,
.bookings-ref-frame .yo-meta,
.bookings-ref-frame .sett-page-sub,
.bookings-ref-frame .sbh-sub{
  margin:var(--shell-ref-subtitle-margin-top) 0 0;
  font-size:var(--shell-ref-subtitle-size);
  line-height:1.45;
}

.bookings-ref-frame .yo-page-header{
  padding-bottom:var(--shell-ref-header-bottom);
}

.bookings-ref-frame .op-head{
  padding:0;
}

/* Dashboard wird bereits in `.dashboard-page.bookings-ref-frame`
   gerendert. Der Referenz-Wrapper liefert damit schon denselben 2px/8px-
   Startpunkt wie Buchungen. Das innere Cockpit darf deshalb KEINEN
   zweiten Cap/Gutter mehr addieren, sonst wirkt das Dashboard tiefer und
   weiter eingerückt als die Buchungen. */
.dashboard-page.bookings-ref-frame .cockpit-grid{
  width:100%;
  box-sizing:border-box;
  max-width:none;
  margin:0;
  padding:0;
}

.dashboard-page.bookings-ref-frame .cockpit-header{
  padding-top:0;
}

/* Auswertungs-Heroes nutzen denselben Outer-Frame wie das Cockpit, starten
   aber direkt mit einer gerahmten .dash-hero-Card. Das Cockpit selbst hat vor
   der ersten Card die kompakte .cockpit-beta-topbar mit 8px Top-Margin; ohne
   diesen Ausgleich wirkt der Auswertungsrahmen eine Stufe zu hoch. */
.report-page--year-v2.bookings-ref-frame .dash-hero,
.bookings-ref-frame--tax-surfaces .dash-hero,
.belege-page .belege-archive-hero{
  margin-top:8px;
}

/* Dokument-Familie: Listen/Analytics/Overview-Heroes bleiben unter ihrer
   eigenen Modul-Hoheit, müssen aber denselben Desktop-Startpunkt und
   dieselbe Nutzbreite wie Buchungen respektieren. Diese Hüllen bringen
   bereits 8px Seitenpadding pro Seite mit; deshalb wird ihr äußerer Cap
   auf 1424px kompensiert, damit innen exakt dieselbe 1408px-Content-
   Lane wie bei Buchungen übrig bleibt. Die Editoren bleiben geometrisch
   eigenständig, konsumieren aber dieselbe H1-Referenz. */
body[data-shell="v2"] .shell-main[data-width="full"] .inv2-page,
body[data-shell="v2"] .shell-main[data-width="full"] .inv2-analytics-page,
body[data-shell="v2"] .shell-main[data-width="full"] .inv3-page{
  width:100%;
  box-sizing:border-box;
  max-width:var(--bookings-ref-max-width);
  padding-top:var(--bookings-ref-pad-top);
  padding-left:var(--bookings-ref-pad-x);
  padding-right:var(--bookings-ref-pad-x);
}

.bookings-ref-frame--tax-surfaces .sgv2{
  max-width:none;
  margin:0;
  padding:0 0 var(--shell-ref-tax-pad-bottom);
}

@media(min-width:769px){
  body[data-shell="v2"] .shell-main[data-width="wide"] .cockpit-header{
    align-items:flex-start;
    gap:var(--shell-ref-header-gap);
  }

  body[data-shell="v2"] .shell-main[data-width="wide"] .cockpit-header-titles{
    gap:0;
  }

  body[data-shell="v2"] .shell-main[data-width="wide"] .cockpit-title,
  body[data-shell="v2"] .shell-main[data-width="wide"] .inv2-header h1,
  body[data-shell="v2"] .shell-main[data-width="wide"] .inv2-analytics-header h1,
  body[data-shell="v2"] .shell-main[data-width="wide"] .inv3-hero-main h1,
  body[data-shell="v2"] .shell-main[data-width="full"] .inv3-form-page .inv3-form-title{
    font-size:var(--shell-ref-title-size);
    line-height:1.15;
    letter-spacing:-0.025em;
  }

  body[data-shell="v2"] .shell-main[data-width="wide"] .cockpit-subtitle{
    margin-top:var(--shell-ref-subtitle-margin-top);
    font-size:var(--shell-ref-subtitle-size);
    line-height:1.45;
  }

  body[data-shell="v2"] .shell-main[data-width="wide"] .inv2-header p,
  body[data-shell="v2"] .shell-main[data-width="wide"] .inv2-analytics-header p{
    max-width:62ch;
    font-size:var(--shell-ref-subtitle-size);
    line-height:1.45;
  }

  /* `.inv2-header-main` arbeitet weiter mit 14px Grid-Gap. Ein kleiner
     negativer Top-Margin auf der Subtitle gleicht das wieder exakt auf die
     6px Buchungen-Referenz zwischen H1 und Subtitle aus, ohne Tabs oder
     Jahresfilter enger zu ziehen. */
  body[data-shell="v2"] .shell-main[data-width="wide"] .inv2-header p{
    margin-top:-8px;
  }

  body[data-shell="v2"] .shell-main[data-width="wide"] .inv2-analytics-header p{
    margin-top:var(--shell-ref-subtitle-margin-top);
  }
}

@media(max-width:768px){
  .bookings-ref-frame:not(.inv-page):not(.inv2-page):not(.inv3-page):not(.inv3-form-page),
  .bookings-ref-frame.app-page:not(.inv-page):not(.inv2-page):not(.inv3-page):not(.inv3-form-page),
  .bookings-ref-frame.report-page{
    max-width:none;
    padding:var(--bookings-ref-pad-top) var(--shell-ref-mobile-pad-x) var(--shell-ref-mobile-pad-bottom);
  }

  .bookings-ref-frame .cockpit-header,
  .bookings-ref-frame .yo-page-header,
  .bookings-ref-frame .sett-page-head{
    flex-direction:column;
    align-items:stretch;
    gap:var(--shell-ref-header-gap-mobile);
  }

  .dashboard-page.bookings-ref-frame .cockpit-grid{
    padding:0;
  }

  .bookings-ref-frame .cockpit-title,
  .bookings-ref-frame .yo-title,
  .bookings-ref-frame .sett-page-title{
    font-size:var(--shell-ref-title-size-mobile);
  }

  .bookings-ref-frame .yo-page-header{
    padding-bottom:var(--shell-ref-header-bottom-mobile);
  }

  .bookings-ref-frame--tax-surfaces .sgv2{
    padding-left:0;
    padding-right:0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ASSISTANT DRAWER — Variante E "Flat Premium Voice Assistant"
   ───────────────────────────────────────────────────────────────────────────
   Styling für die Klassen, die die drei fertigen Module setzen:
     assistant-drawer.js  — Panel/Header/Hero/Rec/Body/Footer
     assistant-chat.js    — Nachrichten-Verlauf (Bubbles, Datenkarte, Clarify…)
     assistant-composer.js — Eingabeleiste + Voice-Action

   DOM-Struktur (Klassen-only, JS baut via createElement/textContent — CSP):
     .assistant-drawer[hidden] / .is-open / .is-empty / .is-recording /
       .is-transcribing / .is-chat
       .assistant-drawer__scrim
       .assistant-drawer__panel
         .assistant-drawer__header
           .assistant-drawer__title (h2)
           .assistant-drawer__badge
           .assistant-drawer__close (+ .btn .btn-g; X via CSS-Maske)
         .assistant-drawer__hero (sichtbar nur in .is-empty)
           .assistant-drawer__hero-title (h2)
           .assistant-drawer__sub (p)
           .assistant-drawer__hero-voice (Mount-Punkt voice-action)
           .assistant-drawer__chips
             .assistant-drawer__example-chip (button)
         .assistant-drawer__rec (sichtbar nur in .is-recording)
           .assistant-drawer__rec-head
             .assistant-drawer__rec-dot
           .assistant-drawer__wave  (12× <i>)
           .assistant-drawer__rec-timer
           (stop: .btn .btn-p)
         .assistant-drawer__mic-host (visuell versteckt, aria-hidden=true)
         .assistant-drawer__body[aria-live]  (Chat-Scroll, verst. in is-empty/is-recording)
           (Chat-Nachrichten via assistant-chat.js)
         .assistant-drawer__footer
           (Composer via assistant-composer.js)

   Konventionen: _23f-booking-drawer.css (Slide-Panel, z-Tokens, Transition-Kurve).
   Tokens: var(--*) aus _00-tokens.css. Shared-Klassen (.btn/.btn-g/.btn-p/
   .app-status-chip) werden NICHT global überschrieben.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Root / Scrim ─────────────────────────────────────────────────────────── */
.assistant-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
}
.assistant-drawer[hidden] {
  display: none;
}

.assistant-drawer__scrim {
  position: absolute;
  inset: 0;
  background: var(--sheet-backdrop);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--tr-base);
  z-index: var(--z-drawer-backdrop);
  cursor: pointer;
}
.assistant-drawer.is-open .assistant-drawer__scrim {
  opacity: 1;
}

/* ── Panel ────────────────────────────────────────────────────────────────── */
.assistant-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 460px;
  max-width: 100vw;
  background: var(--card);
  border-left: 1px solid var(--border-alpha);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--tr-drawer);
  z-index: var(--z-drawer);
  overflow: hidden;
}
.assistant-drawer.is-open .assistant-drawer__panel {
  transform: translateX(0);
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.assistant-drawer__header {
  flex: 0 0 auto;
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--border-alpha);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-md);
}
.assistant-drawer__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  margin: 0;
}
.assistant-drawer__badge {
  font-size: var(--fs-xs);
  color: var(--text2);
  background: rgba(var(--surface-rgba-base), 0.04);
  border: 1px solid var(--border-alpha);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  margin-right: auto; /* schiebt __clear+__close rechtsbündig zusammen (Gap = Header-gap) */
}

/* Schließen-Button trägt .btn .btn-g — hier drawer-scoped auf Icon-Quadrat
   zurückgesetzt. DOM leer, X via CSS-Maske (CSP-konform). */
.assistant-drawer__close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text2);
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center; justify-content: center;
  transition: background var(--tr-fast), color var(--tr-fast);
}
.assistant-drawer__close::before {
  content: "";
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
.assistant-drawer__close:hover {
  background: var(--card2);
  color: var(--text);
}

/* Verlauf-leeren-Button: Icon-Quadrat wie __close, App-Papierkorb (path-d wie
   CoreUI.icon('delete')) via CSS-Maske (CSP). Versteckt bis Verlauf existiert. */
.assistant-drawer__clear {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text3);
  border-radius: var(--radius-pill);
  display: none;
  align-items: center;
  justify-content: center;
  transition: background var(--tr-fast), color var(--tr-fast);
}
.assistant-drawer.is-chat .assistant-drawer__clear,
.assistant-drawer.is-transcribing .assistant-drawer__clear {
  display: inline-flex;
}
.assistant-drawer__clear::before {
  --clear-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 4h12M5.33 4V2.67a1.33 1.33 0 011.34-1.34h2.66a1.33 1.33 0 011.34 1.34V4M13 4v9.33a1.33 1.33 0 01-1.33 1.34H4.33A1.33 1.33 0 013 13.33V4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  content: "";
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--clear-icon);
  mask: var(--clear-icon);
}
.assistant-drawer__clear:hover {
  background: var(--card2);
  color: var(--text);
}

/* ── Hero (Empty-State) ───────────────────────────────────────────────────── */
/* Default: versteckt; nur in .is-empty sichtbar (State-Visibility unten). */
.assistant-drawer__hero {
  display: none;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-xl) var(--space-2xl);
  overflow-y: auto;
}
.assistant-drawer.is-empty .assistant-drawer__hero {
  display: flex;
}
.assistant-drawer__hero-title {
  font-size: 22px; /* kein Stufen-Token passt exakt; --fs-xl wäre 22px ebenfalls */
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  letter-spacing: -0.3px;
  margin: 0;
}
.assistant-drawer__sub {
  font-size: var(--fs-base);
  color: var(--text2);
  line-height: var(--lh-relaxed);
  max-width: 270px;
  margin: var(--space-sm) 0 0;
}
.assistant-drawer__hero-voice {
  margin-top: var(--space-2xl);
}

/* Beispiel-Chips ─────────────────────────────────────────────────────────── */
.assistant-drawer__chips {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 360px;
  margin-top: var(--space-2xl);
}
.assistant-drawer__example-chip {
  font-size: var(--fs-base);
  color: var(--text2);
  background: rgba(var(--surface-rgba-base), 0.03);
  border: 1px solid var(--border-alpha);
  border-radius: var(--radius-pill);
  padding: 6px 13px;
  cursor: pointer;
  transition: background var(--tr-fast), color var(--tr-fast), border-color var(--tr-fast);
}
.assistant-drawer__example-chip:hover {
  background: var(--card2);
  color: var(--text);
  border-color: var(--accent-border-soft);
}

/* ── Voice-Action (flat gold, kein Glow/Pulse) ────────────────────────────── */
.assistant-composer__voice-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  background: var(--accent-bg-soft);
  border: 1px solid var(--accent-border-soft);
  color: var(--accent);
  border-radius: var(--radius-lg);
  padding: 14px 22px;
  cursor: pointer;
  transition: background var(--tr-fast), border-color var(--tr-fast);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
}
.assistant-composer__voice-action:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
/* Mic-SVG hat nur viewBox (createElementNS, kein width/height) → ohne CSS-Größe
   kollabiert es auf 0 und ist unsichtbar. Explizite Größe hält Icon + Label mittig. */
.assistant-composer__voice-action svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}
.assistant-composer__voice-label {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
}

/* ── Mic-Host (visuell versteckt, aria-hidden=true) ───────────────────────── */
/* JS mount-point für VoiceInput — nie klickbar, nimmt kein Layout-Platz ein. */
.assistant-drawer__mic-host {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

/* ── Recording-Region ─────────────────────────────────────────────────────── */
/* Default: versteckt; nur in .is-recording als flex-Column sichtbar. */
.assistant-drawer__rec {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  padding: var(--space-2xl) var(--space-xl);
  gap: 0;
}
.assistant-drawer.is-recording .assistant-drawer__rec {
  display: flex;
}

.assistant-drawer__rec-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.assistant-drawer__rec-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-pill);
  background: var(--red);
  flex: 0 0 auto;
  animation: recpulse 1.5s infinite;
}
@keyframes recpulse {
  0%   { box-shadow: 0 0 0 0 var(--red3); }
  70%  { box-shadow: 0 0 0 6px rgba(248, 113, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); }
}

/* Wave: 12 gerundete Balken, gold, Höhe-Anim 6↔26px rein via CSS. */
.assistant-drawer__wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 30px;
  margin: 22px 0 14px;
}
.assistant-drawer__wave i {
  display: block;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--accent3), var(--accent));
  animation: wv 1.1s ease-in-out infinite;
  height: 6px; /* Fallback-Höhe; Keyframes übernehmen */
  font-style: normal;
}
.assistant-drawer__wave i:nth-child(odd)  { animation-duration: 0.9s; }
.assistant-drawer__wave i:nth-child(1)    { animation-delay: 0s; }
.assistant-drawer__wave i:nth-child(2)    { animation-delay: 0.12s; }
.assistant-drawer__wave i:nth-child(3)    { animation-delay: 0.22s; }
.assistant-drawer__wave i:nth-child(4)    { animation-delay: 0.32s; }
.assistant-drawer__wave i:nth-child(5)    { animation-delay: 0.18s; }
.assistant-drawer__wave i:nth-child(6)    { animation-delay: 0.28s; }
.assistant-drawer__wave i:nth-child(7)    { animation-delay: 0.08s; }
.assistant-drawer__wave i:nth-child(8)    { animation-delay: 0.36s; }
.assistant-drawer__wave i:nth-child(9)    { animation-delay: 0.2s; }
.assistant-drawer__wave i:nth-child(10)   { animation-delay: 0.14s; }
.assistant-drawer__wave i:nth-child(11)   { animation-delay: 0.26s; }
.assistant-drawer__wave i:nth-child(12)   { animation-delay: 0.1s; }
@keyframes wv {
  0%, 100% { height: 6px; }
  50%       { height: 26px; }
}

.assistant-drawer__rec-timer {
  font-size: var(--fs-base);
  color: var(--text2);
  font-variant-numeric: tabular-nums;
  margin-bottom: 22px;
}

/* ── Body (Chat-Scroll-Region) ────────────────────────────────────────────── */
/* Versteckt in .is-empty und .is-recording (State-Visibility). */
.assistant-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.assistant-drawer.is-empty .assistant-drawer__body,
.assistant-drawer.is-recording .assistant-drawer__body {
  display: none;
}

/* ── State-Visibility: State-Matrix ──────────────────────────────────────────
   .is-empty     → hero ✓, body ✗, rec ✗
   .is-recording → hero ✗, body ✗, rec ✓
   .is-transcribing / .is-chat → hero ✗, body ✓, rec ✗
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Chat-Nachrichten ─────────────────────────────────────────────────────── */

/* User-Bubble (rechts) */
.assistant-chat__user {
  align-self: flex-end;
  max-width: 80%;
  background: var(--card2);
  border: 1px solid var(--border-alpha);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg);
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text);
  word-break: break-word;
}

/* Assistent-Reihe (links, volle Breite für Karten) */
.assistant-chat__asst-row {
  align-self: flex-start;
  width: 92%;
}
.assistant-chat__asst {
  color: var(--text);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}
.assistant-chat__text {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text);
  word-break: break-word;
}

/* Geteilte Karten-Basis (Datenkarte/Clarify/Refusal/Error): flat surface. */
.assistant-chat__card,
.assistant-chat__clarify,
.assistant-chat__refusal,
.assistant-chat__error {
  background: var(--card2);
  border: 1px solid var(--border-alpha);
  border-radius: var(--radius-lg);
}

/* ── Datenkarte ───────────────────────────────────────────────────────────── */
.assistant-chat__card {
  padding: 18px;
}
.assistant-chat__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}
.assistant-chat__card-metric {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--text2);
  font-weight: var(--fw-semibold);
}
.assistant-chat__card-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--tone-good-fg);
  flex: 0 0 auto;
}
.assistant-chat__card-period {
  font-size: var(--fs-xs);
  color: var(--text2);
  background: rgba(var(--surface-rgba-base), 0.05);
  border: 1px solid var(--border-alpha);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}
.assistant-chat__card-big {
  font-size: 32px; /* Großbetrag — kein passendes Token, px bewusst */
  font-weight: var(--fw-bold);
  letter-spacing: -0.8px;
  line-height: 1.05;
  color: var(--text-strong);
}
.assistant-chat__card-vals {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.assistant-chat__vcap {
  flex: 1;
  background: rgba(var(--surface-rgba-base), 0.025);
  border: 1px solid var(--border-alpha);
  border-radius: 11px;
  padding: 10px var(--space-md);
}
.assistant-chat__vcap-l {
  font-size: var(--fs-xs);
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.assistant-chat__vcap-v {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  margin-top: 3px;
  color: var(--text);
}
.assistant-chat__card-foot {
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid var(--border-alpha);
  font-size: var(--fs-xs);
  color: var(--text3);
  line-height: var(--lh-base);
}
.assistant-chat__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}
.assistant-chat__tag {
  font-size: var(--fs-xs);
  color: var(--text2);
  background: var(--bg2);
  border: 1px solid var(--border-alpha);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
}

/* ── Clarify-Karte ────────────────────────────────────────────────────────── */
.assistant-chat__clarify {
  padding: 18px;
}
.assistant-chat__clarify-q {
  font-size: 14px;
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-semibold);
  color: var(--text);
  margin-bottom: 14px;
}
.assistant-chat__clarify-opts {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.assistant-chat__opt {
  display: flex;
  align-items: center;
  background: rgba(var(--surface-rgba-base), 0.03);
  border: 1px solid var(--border-alpha);
  color: var(--text);
  border-radius: 11px;
  padding: 11px 14px;
  font-size: 13.5px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--tr-fast), border-color var(--tr-fast);
  width: 100%;
  text-align: left;
}
.assistant-chat__opt:hover {
  background: var(--card2);
  border-color: var(--accent-border-soft);
}
/* Empfohlene Option: gold border */
.assistant-chat__opt.is-recommended {
  border-color: var(--accent-border-soft);
}
.assistant-chat__opt.is-recommended:hover {
  border-color: var(--accent);
}
.assistant-chat__opt-arr {
  margin-left: auto;
  color: var(--text3);
  font-size: var(--fs-body);
  flex: 0 0 auto;
}

/* ── Refusal-Karte ────────────────────────────────────────────────────────── */
.assistant-chat__refusal {
  width: 100%;
  padding: var(--space-xl);
  text-align: center;
  color: var(--text2);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

/* ── Error-Karte ──────────────────────────────────────────────────────────── */
.assistant-chat__error {
  width: 100%;
  padding: var(--space-xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

/* ── Inline-Status (Transcribing / Processing) ─────────────────────────────── */
.assistant-chat__status {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text2);
  font-size: var(--fs-base);
  background: rgba(var(--surface-rgba-base), 0.03);
  border: 1px solid var(--border-alpha);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-sm);
  padding: 9px 13px;
}
.assistant-chat__status-text {
  color: var(--text2);
}
.assistant-chat__dots {
  display: inline-flex;
  gap: 4px;
}
.assistant-chat__dots i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  animation: blink 1.3s infinite;
  font-style: normal;
}
.assistant-chat__dots i:nth-child(2) { animation-delay: 0.18s; }
.assistant-chat__dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes blink {
  0%, 100% { opacity: 0.2; }
  50%       { opacity: 1; }
}

/* ── Footer / Composer ────────────────────────────────────────────────────── */
.assistant-drawer__footer {
  flex: 0 0 auto;
  border-top: 1px solid var(--border-alpha);
}

/* Composer-Leiste */
.assistant-composer {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: var(--space-md) var(--space-lg);
}

/* Eingabefeld */
.assistant-composer__field {
  flex: 1;
  min-height: 44px;
  display: flex;
  align-items: center;
  background: var(--bg2);
  border: 1px solid var(--border-alpha);
  border-radius: var(--radius-lg);
  padding: 0 var(--space-lg);
  color: var(--text3);
  font-size: var(--fs-base);
  transition: border-color var(--tr-fast);
  word-break: break-word;
  overflow: hidden;
}
.assistant-composer__field:focus-within {
  border-color: var(--accent-border-soft);
  outline: none;
}

/* Mic-Button (Composer, kompakt) */
.assistant-composer__mic {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid var(--border-alpha);
  background: rgba(var(--surface-rgba-base), 0.05);
  color: var(--accent);
  flex: 0 0 auto;
  transition: background var(--tr-fast), border-color var(--tr-fast);
}
.assistant-composer__mic:hover {
  background: var(--accent-bg-soft);
  border-color: var(--accent-border-soft);
}
/* Mic-Doppelung-Fix: im Empty-State große voice-action → kleiner Mic verstecken */
.assistant-drawer.is-empty .assistant-composer__mic {
  display: none;
}

/* Send-Button */
.assistant-composer__send {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  flex: 0 0 auto;
  transition: background var(--tr-fast), opacity var(--tr-fast);
}
.assistant-composer__send:hover {
  background: var(--accent3);
}
/* Gedimmt wenn kein Input */
.assistant-composer__send.is-empty {
  background: rgba(var(--surface-rgba-base), 0.06);
  color: var(--text3);
  cursor: default;
}

/* ── Mobile: Panel über volle Breite, Bottom-Sheet-Feel ───────────────────── */
@media (max-width: 600px) {
  .assistant-drawer__panel {
    width: 100vw;
    top: auto;
    height: 90vh;
    border-radius: var(--radius-hero) var(--radius-hero) 0 0;
    transform: translateY(100%);
  }
  .assistant-drawer.is-open .assistant-drawer__panel {
    transform: translateY(0);
  }
  .assistant-drawer__header {
    padding: var(--space-lg);
  }
  .assistant-drawer__hero {
    padding: var(--space-xl) var(--space-lg);
  }
  .assistant-drawer__body {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }
  .assistant-composer {
    padding: var(--space-md) var(--space-lg);
    padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
  }
  /* Touch-Targets: Composer-Buttons auf 44px Minimum */
  .assistant-composer__mic,
  .assistant-composer__send {
    width: 44px;
    height: 44px;
  }
  /* Example-Chips: leichter anzutippen */
  .assistant-drawer__example-chip {
    padding: 8px 15px;
  }
}

/* ── Cross-Year-Karten ────────────────────────────────────────────────────── */
.assistant-chat__compare,
.assistant-chat__trend,
.assistant-chat__years {
  background: var(--card2);
  border: 1px solid var(--border-alpha);
  border-radius: var(--radius-lg);
}
.assistant-chat__compare { padding: 18px; }
.assistant-chat__compare-cols { display: flex; gap: var(--space-md); }
.assistant-chat__compare-col {
  flex: 1;
  background: rgba(var(--surface-rgba-base), 0.025);
  border: 1px solid var(--border-alpha);
  border-radius: 11px;
  padding: 10px var(--space-md);
}
.assistant-chat__compare-year { font-size: var(--fs-xs); color: var(--text3); text-transform: uppercase; letter-spacing: 0.3px; }
.assistant-chat__compare-val  { font-size: var(--fs-body); font-weight: var(--fw-semibold); margin-top: 3px; color: var(--text); }
.assistant-chat__compare-delta {
  display: flex; gap: var(--space-sm); align-items: baseline;
  margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--border-alpha);
  font-size: var(--fs-base); color: var(--text2);
}
.assistant-chat__compare-delta-amt { font-weight: var(--fw-semibold); color: var(--text); }
.assistant-chat__compare-delta-pct { color: var(--text3); }
.assistant-chat__trend { padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; }
.assistant-chat__trend-row { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-base); }
.assistant-chat__trend-year { color: var(--text2); }
.assistant-chat__trend-val  { font-weight: var(--fw-semibold); color: var(--text); }
.assistant-chat__years { padding: 16px 18px; }
.assistant-chat__years-tags { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-sm); }
.assistant-chat__year-tag { font-size: var(--fs-xs); color: var(--text2); background: var(--bg2); border: 1px solid var(--border-alpha); border-radius: var(--radius-pill); padding: 2px 8px; }

/* ── Reduced motion: alle Animationen + Transitions abschalten ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .assistant-drawer__panel,
  .assistant-drawer__scrim {
    transition: none;
  }
  .assistant-drawer__rec-dot {
    animation: none;
  }
  .assistant-drawer__wave i {
    animation: none;
    height: 16px; /* Mittelwert als statische Höhe */
  }
  .assistant-chat__dots i {
    animation: none;
    opacity: 1;
  }
  .assistant-drawer__example-chip,
  .assistant-composer__voice-action,
  .assistant-chat__opt,
  .assistant-composer__field,
  .assistant-composer__mic,
  .assistant-composer__send,
  .assistant-drawer__close {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ASSISTANT WRITE-FLOW — Schreib-Flow-Karten im Voice-Assistant-Drawer
   ───────────────────────────────────────────────────────────────────────────
   Styling für die DOM-Karten, die assistant-write-flow.js via appendNode()
   in den Chat-Body hängt:
     .assistant-write__clarify   — Richtungs-Klärung (Einnahme/Ausgabe)
     .assistant-write__card      — Buchungs-Confirm mit Summary + Aktionen
     .assistant-write__note      — allgemeine Klärungs-/Hinweis-Bubble
     .assistant-write__error     — Fehler-Bubble

   Keine inline style=; kein innerHTML; KEINE Klassen-Überschreibung aus
   assistant-chat/drawer. Tokens aus _00-tokens.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Gemeinsame Karten-Basis ──────────────────────────────────────────────── */

.assistant-write__clarify,
.assistant-write__card {
  background: var(--card);
  border: 1px solid var(--border-alpha);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-lg) var(--space-xl);
  margin: var(--space-md) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ── Richtungs-Klärung ────────────────────────────────────────────────────── */

.assistant-write__clarify-q {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium, 500);
  color: var(--text-strong);
  margin: 0;
}

.assistant-write__clarify-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.assistant-write__clarify-btn {
  flex: 1 1 auto;
  min-width: 7rem;
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--border-alpha);
  border-radius: var(--radius-pill);
  background: rgba(var(--surface-rgba-base), 0.04);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium, 500);
  cursor: pointer;
  transition: background var(--tr-fast), border-color var(--tr-fast);
  text-align: center;
}

.assistant-write__clarify-btn:hover {
  background: rgba(var(--surface-rgba-base), 0.08);
  border-color: var(--accent);
}

.assistant-write__clarify-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Confirm-Karte ────────────────────────────────────────────────────────── */

.assistant-write__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  letter-spacing: 0.01em;
}

/* Summary-Zeilen */
.assistant-write__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.assistant-write__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
}

.assistant-write__label {
  font-size: var(--fs-xs);
  color: var(--text2);
  white-space: nowrap;
}

.assistant-write__value {
  font-size: var(--fs-sm);
  color: var(--text);
  font-weight: var(--fw-medium, 500);
  text-align: right;
  word-break: break-word;
}

/* Aktions-Zeile */
.assistant-write__actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-xs);
}

/* Gemeinsame Button-Basis */
.assistant-write__btn {
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--border-alpha);
  border-radius: var(--radius-pill);
  background: rgba(var(--surface-rgba-base), 0.04);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium, 500);
  cursor: pointer;
  transition: background var(--tr-fast), border-color var(--tr-fast), color var(--tr-fast);
  text-align: center;
  white-space: nowrap;
}

.assistant-write__btn:hover {
  background: rgba(var(--surface-rgba-base), 0.08);
}

.assistant-write__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Primär-Button (Buchung prüfen) — analog .btn-p aus _10-shell.css */
.assistant-write__btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.assistant-write__btn-primary:hover {
  background: var(--accent3);
  border-color: var(--accent3);
}

/* ── Hinweis / Klärungs-Bubble ────────────────────────────────────────────── */

.assistant-write__note {
  font-size: var(--fs-xs);
  color: var(--text2);
  padding: var(--space-sm) var(--space-md);
  background: rgba(var(--surface-rgba-base), 0.04);
  border-left: 3px solid var(--border-alpha);
  border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0;
  margin: var(--space-xs) 0;
}

/* ── Fehler-Bubble ────────────────────────────────────────────────────────── */

.assistant-write__error {
  font-size: var(--fs-xs);
  color: var(--red);
  padding: var(--space-sm) var(--space-md);
  background: var(--red2);
  border-left: 3px solid var(--red);
  border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0;
  margin: var(--space-xs) 0;
}

/* ───────────────────────────────────────────────────────────
   Voice / NL-Invoice — mic button, transcription states,
   customer-match chip, dropdown, skeleton, reveal animation.
   DESIGN.md compliant: border-radius ≤16px, no icon-circles,
   outline-only SVG icons, status-chip tones from token set.
   ─────────────────────────────────────────────────────────── */

/* ── Mic button base ──────────────────────────────────────── */
.inv-voice-mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text2);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background-color var(--tr-fast, 120ms) ease,
    border-color var(--tr-fast, 120ms) ease,
    color var(--tr-fast, 120ms) ease;
}

.inv-voice-mic:hover {
  background: var(--bg3);
  border-color: var(--border2);
  color: var(--text1);
}

.inv-voice-mic:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ── Mic SVG safeguard ────────────────────────────────────── */
.inv-voice-mic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* ── Mic: recording state ─────────────────────────────────────
   RED while recording (matching the recording-indicator overlay), not the old
   subtle accent-yellow — recording is universally signalled in red, and keeping
   button + overlay in one colour language reads as a single clear state. */
.inv-voice-mic.is-recording {
  background: rgba(248, 113, 113, 0.10);
  border-color: var(--red);
  color: var(--red);
  position: relative;
}

.inv-voice-mic.is-recording::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 12px;
  border: 2px solid var(--red);
  animation: inv-voice-pulse 1.4s ease-in-out infinite;
  pointer-events: none;
}

.inv-voice-mic.is-recording:hover {
  background: rgba(248, 113, 113, 0.18);
  border-color: var(--red);
  color: var(--red);
}

@keyframes inv-voice-pulse {
  0%   { opacity: 0.6; transform: scale(1); }
  50%  { opacity: 0.2; transform: scale(1.08); }
  100% { opacity: 0.6; transform: scale(1); }
}

/* ── Recording indicator overlay ──────────────────────────────
   Sits inline next to the mic while recording. Unmistakable RED pulsing dot +
   "Aufnahme läuft…" label + live level meter + mm:ss timer + stop affordance.
   The button tint alone (above) was too subtle. JS (voice-input.js) builds the
   DOM and drives the timer text + per-bar transform via el.style.* (no inline
   style="" attribute, CSP-safe). ──────────────────────────────────────────── */
.inv-voice-recording {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: 10px;
  background: var(--red-soft, rgba(248, 113, 113, 0.10));
  border: 1px solid rgba(248, 113, 113, 0.28);
  font-size: 12px;
  color: var(--text2);
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

/* Assistant-Drawer hat einen eigenen, großen Recording-Overlay
   (.assistant-drawer__rec, "Ich höre zu …"). Das inline-Overlay neben dem
   Composer-Mic wäre dort eine doppelte "Aufnahme läuft"-Anzeige — im Drawer
   ausblenden. Das Rechnungsformular-Voice (kein .assistant-drawer) behält es. */
.assistant-drawer .inv-voice-recording {
  display: none;
}

.inv-voice-recording__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
  animation: inv-voice-rec-blink 1.2s ease-in-out infinite;
}

.inv-voice-recording__label {
  font-weight: var(--fw-semibold, 600);
  color: var(--red);
}

.inv-voice-recording__timer {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  color: var(--text1);
  min-width: 38px;
  text-align: right;
}

.inv-voice-recording__hint {
  color: var(--text3);
}

/* Live input-level meter: a row of bars scaled vertically by JS each frame. */
.inv-voice-recording__meter {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 16px;
}

.inv-voice-recording__bar {
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: rgba(248, 113, 113, 0.35);
  transform: scaleY(0.18);
  transform-origin: center;
  transition: transform 90ms linear, background-color 120ms ease;
}

.inv-voice-recording__bar.is-active {
  background: var(--red);
}

@keyframes inv-voice-rec-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  .inv-voice-recording__dot { animation: none; }
  .inv-voice-recording__bar { transition: none; }
}

/* Compact recording overlay on narrow screens: the full inline overlay
   (label + meter + timer + stop hint) is ~280px wide and would overflow a
   booking-modal topbar at 375px. Keep the unmistakable signal — the red pulsing
   dot + the running timer — and drop the rest; the mic button's own red
   is-recording state plus "Klick zum Stoppen" tooltip still convey how to stop. */
@media (max-width: 560px) {
  .inv-voice-recording {
    gap: 6px;
    margin-left: 6px;
    padding: 4px 8px;
  }
  .inv-voice-recording__label,
  .inv-voice-recording__meter,
  .inv-voice-recording__hint {
    display: none;
  }
}

/* ── Mic: transcribing state ──────────────────────────────── */
.inv-voice-mic.is-transcribing {
  opacity: 0.7;
  cursor: default;
  pointer-events: none;
  position: relative;
}

/* ── Mic: disabled state ──────────────────────────────────── */
.inv-voice-mic.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Transcribing spinner ─────────────────────────────────── */
.inv-voice-transcribing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text3);
  padding: 4px 0;
}

.inv-voice-transcribing__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: inv-voice-spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes inv-voice-spin {
  to { transform: rotate(360deg); }
}

/* ── Permission hint (microphone not granted) ─────────────── */
.inv-voice-perm-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(232, 184, 75, 0.08);
  border: 1px solid rgba(232, 184, 75, 0.28);
  font-size: 12px;
  color: var(--text2);
  line-height: 1.5;
}

.inv-voice-perm-hint__icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--accent);
}

/* ── Customer-chip wrap + match dropdown ─────────────────── */
.inv-voice-customer-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.inv-voice-customer-wrap .ll-chip {
  cursor: pointer;
  transition: background-color var(--tr-fast, 120ms) ease;
}

.inv-voice-customer-wrap .ll-chip:hover {
  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- dark-mode white-tint hover; no --surface-rgba-base token available yet (Phase D.4) */
  background-color: rgba(255, 255, 255, 0.04);
}

.inv-voice-cand-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  max-width: 340px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  z-index: 120;
  overflow: hidden;
}

.inv-voice-cand-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  cursor: pointer;
  transition: background-color var(--tr-fast, 120ms) ease;
}

.inv-voice-cand-item:not(:last-child) {
  border-bottom: 1px solid var(--border);
}

.inv-voice-cand-item:hover {
  background: var(--bg3);
}

.inv-voice-customer-dropdown__name {
  font-size: 13px;
  font-weight: var(--fw-semibold, 600);
  color: var(--text1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inv-voice-customer-dropdown__meta {
  font-size: 11px;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inv-voice-customer-dropdown__empty {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text3);
  text-align: center;
}

/* ── Analysis skeleton (uses CSS custom properties for sizing) */
.inv-voice-skeleton {
  --analysis-skeleton-h: 14px;
  --analysis-skeleton-r: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.inv-voice-skeleton__line {
  height: var(--analysis-skeleton-h);
  border-radius: var(--analysis-skeleton-r);
  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- skeleton shimmer mid-stop; no --surface-rgba-base token available yet (Phase D.4) */
  background: linear-gradient(
    90deg,
    var(--bg3) 0%,
    var(--bg4, rgba(255, 255, 255, 0.06)) 50%,
    var(--bg3) 100%
  );
  background-size: 200% 100%;
  animation: inv-voice-shimmer 1.5s ease-in-out infinite;
}

.inv-voice-skeleton__line--short { width: 55%; }
.inv-voice-skeleton__line--medium { width: 75%; }
.inv-voice-skeleton__line--full { width: 100%; }

@keyframes inv-voice-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Stagger-reveal animation for analysis results ─────────── */
/* JS sets `is-revealing` plus a stable delay class on .inv-item /
   .inv-item-row elements, then removes both after the animation completes. */
.inv-item.is-revealing,
.inv-item-row.is-revealing {
  animation: inv-voice-fade-up 240ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.inv-item.is-revealing.inv-voice-reveal-delay-0,
.inv-item-row.is-revealing.inv-voice-reveal-delay-0 { animation-delay: 0ms; }
.inv-item.is-revealing.inv-voice-reveal-delay-1,
.inv-item-row.is-revealing.inv-voice-reveal-delay-1 { animation-delay: 80ms; }
.inv-item.is-revealing.inv-voice-reveal-delay-2,
.inv-item-row.is-revealing.inv-voice-reveal-delay-2 { animation-delay: 160ms; }
.inv-item.is-revealing.inv-voice-reveal-delay-3,
.inv-item-row.is-revealing.inv-voice-reveal-delay-3 { animation-delay: 240ms; }
.inv-item.is-revealing.inv-voice-reveal-delay-4,
.inv-item-row.is-revealing.inv-voice-reveal-delay-4 { animation-delay: 320ms; }

@keyframes inv-voice-fade-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Voice-Booking: mic wrap in the booking modal topbar ──────
   Injected by modules/voice-booking-input.js next to the Ausgabe/Einnahme
   toggle. margin-left:auto pushes it to the trailing edge so it does not crowd
   the toggle. On narrow screens the label is hidden (mic + aria-label remain) so
   the topbar never wraps to a second row. */
.tx-voice-input-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.tx-voice-input-label {
  font-size: 12px;
  color: var(--text3);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .tx-voice-input-label {
    /* Reclaim horizontal space on mobile — the mic icon + its aria-label and
       the recording overlay already make the action clear. */
    display: none;
  }
}

/* ── Voice-Booking MOBILE: mic docked into the Schnelleingabe row ─────────────
   On mobile (<720px) modules/voice-booking-input.js moves the mic wrap out of the
   topbar and into #quick-mode-row (the Schnelleingabe toggle row), right of the
   toggle, and tags that row with `--has-voice`. ALL rules below are scoped to
   that JS-set class, so without a mic (no AI consent / tablet / desktop) the row
   stays byte-identical to its baseline. Breakpoint mirrors the modal's <720
   mobile mode (booking-modal.js _bookingModalResponsiveModeForWidth). */
@media (max-width: 719px) {
  .entry-composer__mode-row--has-voice {
    display: flex;
    align-items: center;      /* both controls vertically centred */
    gap: 10px;                /* 8–12px spacing requirement */
    flex-wrap: nowrap;        /* mic + toggle stay on one line */
  }
  /* Toggle fills the row; mic stays compact on the trailing edge. */
  .entry-composer__mode-row--has-voice .entry-quick-toggle {
    flex: 1 1 auto;
    min-width: 0;
  }
  .entry-composer__mode-row--has-voice .tx-voice-input-wrap {
    flex: 0 0 auto;
    margin-left: 0;           /* reset the topbar's margin-left:auto — gap spaces now */
    position: relative;       /* anchor for the absolutely-positioned recording overlay */
  }
  /* Icon-only on mobile (aria-label carries the affordance). */
  .entry-composer__mode-row--has-voice .tx-voice-input-label {
    display: none;
  }
  /* Mic matches the Schnelleingabe toggle surface height exactly (min-height:44px
     in _23l) → square, flush, comfortably tappable. */
  .entry-composer__mode-row--has-voice .inv-voice-mic {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }
  /* Recording state must NOT widen the row, wrap, or push the toggle, and must
     add no vertical space. Strip the overlay to the unmistakable minimum (red dot
     + timer) and lift it out of flow, anchored to the mic (trailing edge, above),
     so the active listening state overlays instead of reflowing the line.
     The meter is aria-hidden and the hint is a redundant visual tip → display:none
     is fine. The LABEL ("Aufnahme läuft…") is the substantive part of the
     role="status"/aria-live="polite" announcement, so keep it in the a11y tree
     and only hide it visually (sr-only technique) instead of display:none. */
  .entry-composer__mode-row--has-voice .inv-voice-recording__meter,
  .entry-composer__mode-row--has-voice .inv-voice-recording__hint {
    display: none;
  }
  .entry-composer__mode-row--has-voice .inv-voice-recording__label {
    /* display:inline overrides the ≤560px `display:none` above (both media
       queries match at <560px) so the label stays in the a11y tree; the rest is
       the sr-only recipe to hide it visually. */
    display: inline;
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .entry-composer__mode-row--has-voice .inv-voice-recording {
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px); /* sits above the mic, never below → no clipping by the row */
    margin-left: 0;
    z-index: 2;
    /* Purely informational overlay — never intercept taps on the type-toggle /
       mic underneath while it floats above the row. */
    pointer-events: none;
  }
}

/* ── Voice-Command: mic wrap in the invoice-list toolbar ──────
   Injected by modules/voice-command-input.js into .inv2-toolbar-controls (the
   Sort-Select + Filter grid in _31-invoices.css). That grid is responsive:
     default      sort | filter         (minmax(210px,260px) | auto)
     ≤760px       sort | filter         (1fr | 1fr, full width)
     ≤520px       sort / filter         (1fr, stacked)
   :has() adds the command mic ONLY when it is present (no AI consent → no mic →
   toolbar layout byte-identical to before). Each breakpoint is mirrored so the
   mic never forces the controls wider than the viewport — the earlier bug was a
   single media-query-free :has() rule whose higher specificity overrode the
   mobile grids and pushed the mic off-screen on phones. The label sits before
   the mic and hides on narrow screens (mirrors .tx-voice-input-label). */
.inv2-toolbar-controls:has(.inv-cmd-voice-wrap) {
  grid-template-columns: minmax(210px, 260px) auto auto;
}

.inv-cmd-voice-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  justify-self: end;
}

.inv-cmd-voice-label {
  font-size: var(--fs-sm, 13px);
  color: var(--text3);
  white-space: nowrap;
}

/* ≤760px: app collapses controls to two equal columns + full width. Keep that,
   append the slim mic as a trailing auto column (sort | filter | mic). */
@media (max-width: 760px) {
  .inv2-toolbar-controls:has(.inv-cmd-voice-wrap) {
    grid-template-columns: 1fr 1fr auto;
  }
}

/* ≤560px: reclaim horizontal space — the mic icon + its aria-label and the
   recording overlay already make the action clear (mirrors .tx-voice-input-label). */
@media (max-width: 560px) {
  .inv-cmd-voice-label {
    display: none;
  }
}

/* ≤520px: app stacks the controls (1fr). With the mic present, keep sort on its
   own full-width row and pair filter + mic on the next row, so nothing overflows
   the narrow viewport. */
@media (max-width: 520px) {
  .inv2-toolbar-controls:has(.inv-cmd-voice-wrap) {
    grid-template-columns: 1fr auto;
  }
  .inv2-toolbar-controls:has(.inv-cmd-voice-wrap) .inv2-sort {
    grid-column: 1 / -1;
  }
}

/* ── Light-mode overrides ─────────────────────────────────── */
body.light .inv-voice-mic {
  background: var(--bg1);
}

body.light .inv-voice-mic.is-recording {
  background: rgba(212, 63, 63, 0.10);
  border-color: var(--red);
}

body.light .inv-voice-cand-dropdown {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

body.light .inv-voice-recording {
  background: rgba(212, 63, 63, 0.08);
  border-color: rgba(212, 63, 63, 0.26);
}

body.light .inv-voice-recording__bar {
  background: rgba(212, 63, 63, 0.30);
}

.bm-row-menu[data-open-dir="up"]{top:auto;bottom:calc(100% + 4px);}
.bm-row-menu[data-open-dir="down"]{top:calc(100% + 4px);bottom:auto;}
.inv3-doc-menu[data-open-dir="up"]{top:auto;bottom:calc(100% + 8px);}
.inv3-doc-menu[data-open-dir="down"]{top:calc(100% + 8px);bottom:auto;}
html.router-scroll-anchor-lock{overflow-anchor:none;}
/* Drag-engine state: will-change only while a finger drags (RuntimeStyleRules
   sets data-rsr-drag-active on the dragged element). Side-drawer panels get the
   per-frame transform written with !important so it beats the .is-open rule. */
.assistant-drawer__panel[data-rsr-drag-active],.booking-drawer__panel[data-rsr-drag-active]{will-change:transform;}

/* ════════════════════════════════════════════════════════════════════════
 * Einheitlicher Schließen-Button (Close/X) — App-weiter Standard
 * ────────────────────────────────────────────────────────────────────────
 * REFERENZ: .assistant-drawer__close (Voice-AI-Assistent). Runde, ruhige
 * Icon-Fläche, passend zur runden Topbar-Icon-Sprache (.shell-topbar-icon-btn,
 * Theme/Suche/Glocke/Hilfe). Vorher: ~18 abweichende Close-Varianten, meist
 * eckig (border-radius 4–14px), teils mit deutlichem Border.
 *
 * Cascade: LETZTES app.css-Partial (nach allen Komponenten-Partials) → setzt
 * die Geometrie der bestehenden Close-Klassen verlustfrei auf den Standard.
 * KEINE Markup-Änderung nötig — wir überschreiben nur die vorhandenen Klassen.
 *
 * Standardmaße (1:1 vom Assistant-Close):
 *   30×30 px · border-radius var(--radius-pill) (999px, rund) · transparent
 *   X via Text (×) ODER SVG/Maske · Touch-Target 44 px via @media coarse
 * Hover-Tint: var(--border) statt des Assistant-eigenen var(--card2) — der
 *   Referenz-Tint ist auf den weißen Modal-Headern (--card #fff) im Light Mode
 *   unsichtbar; --border (#e2e8f0 hell / #2a3354 dunkel) trägt in BEIDEN Themes
 *   und ist exakt der Tint, den die alte .xbtn:hover-Regel schon nutzte.
 *
 * Position/Layout der Modals selbst bleibt UNVERÄNDERT — wir fassen nur den
 * Button an, nie den Header-Flow oder die App-Shell.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Zentrale Basis: .xbtn ─────────────────────────────────────────────────
 * Die generische .xbtn-Klasse trägt ~30 Modal-Close-Buttons (Buchung, Rechnung,
 * Router, Kontakte, Support, Trips, inv3-Sheets …) — IMMER als Schließen-Button
 * (data-action="clM" / aria-label Schließen). Sie war border-radius:4px (eckig).
 * Wir runden sie zentral; Geometrie/Form, nicht das Markup.
 * Inhalt ist meist Textzeichen "×", beim Router ein 16px-SVG. */
.xbtn {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: var(--radius-pill);
  font-size: 22px;
}
.xbtn:hover {
  background: var(--border);
  color: var(--text);
}
.xbtn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (pointer: coarse) {
  .xbtn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
}

/* ── Gruppe-übergreifender Rahmen (Geometrie + Farben + States) ───────────
 * Gilt für ALLE Close-Buttons, egal ob das X als Textzeichen oder als
 * SVG/Maske im DOM steckt. */
.ui-close-btn,
.entry-composer__close,
.modal-export .xbtn,
.beleg-match-close,
.app-dialog.rsplit .rsplit-close,
.dn-preview-close,
.dn-pause-close,
.bm-mp__close,
.bm-modal__close,
.de-modal-close,
.afa-drawer-close,
.tt-drawer-x,
.um-close,
.belege-page .um-close,
.inv-design-preview-modal-close,
.shell-shortcuts-close,
.entry-receipt-picker__close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text2);
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  transition: background var(--tr-fast), color var(--tr-fast);
}

/* ── Text-× Glyphen einheitlich dimensionieren (Gruppe A) ─────────────────
 * Diese Buttons tragen das Zeichen "×" direkt im DOM. font-size auf den
 * Referenz-Look bringen; keine ::before-Maske, sonst doppeltes X. */
.modal-export .xbtn,
.entry-composer__close,
.beleg-match-close,
.app-dialog.rsplit .rsplit-close,
.dn-preview-close,
.dn-pause-close,
.bm-mp__close,
.bm-modal__close,
.entry-receipt-picker__close {
  font-size: 22px;
  font-weight: var(--fw-regular, 400);
}

/* ── SVG-Glyphen einheitlich auf 16 px (Gruppe B) ─────────────────────────
 * Buttons mit Inline-SVG: das Icon auf die Referenzgröße angleichen, damit
 * alle X optisch gleich groß wirken. */
.de-modal-close svg,
.afa-drawer-close svg,
.tt-drawer-x svg,
.um-close svg,
.belege-page .um-close svg,
.inv-design-preview-modal-close svg,
.shell-shortcuts-close svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* ── Hover: ruhiger runder Tint wie Referenz ──────────────────────────────*/
.ui-close-btn:hover,
.entry-composer__close:hover,
.modal-export .xbtn:hover,
.beleg-match-close:hover,
.app-dialog.rsplit .rsplit-close:hover,
.dn-preview-close:hover,
.dn-pause-close:hover,
.bm-mp__close:hover,
.bm-modal__close:hover,
.de-modal-close:hover,
.afa-drawer-close:hover,
.tt-drawer-x:hover,
.um-close:hover,
.belege-page .um-close:hover,
.inv-design-preview-modal-close:hover,
.shell-shortcuts-close:hover,
.entry-receipt-picker__close:hover {
  background: var(--border);
  color: var(--text);
  border-color: transparent;
}

/* ── Focus: einheitlicher Accent-Ring (barrierefrei, ersetzt Mischmasch) ──*/
.ui-close-btn:focus-visible,
.entry-composer__close:focus-visible,
.modal-export .xbtn:focus-visible,
.beleg-match-close:focus-visible,
.app-dialog.rsplit .rsplit-close:focus-visible,
.dn-preview-close:focus-visible,
.dn-pause-close:focus-visible,
.bm-mp__close:focus-visible,
.bm-modal__close:focus-visible,
.de-modal-close:focus-visible,
.afa-drawer-close:focus-visible,
.tt-drawer-x:focus-visible,
.um-close:focus-visible,
.belege-page .um-close:focus-visible,
.inv-design-preview-modal-close:focus-visible,
.shell-shortcuts-close:focus-visible,
.entry-receipt-picker__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── disabled (rsplit kann disabled sein) ─────────────────────────────────*/
.app-dialog.rsplit .rsplit-close[disabled],
.ui-close-btn[disabled] {
  opacity: .5;
  cursor: default;
}

/* ── Touch: 44 px Hit-Area auf groben Zeigern (Apple-HIG / WCAG 2.5.5).
 * 44px war bereits der app-weite Standard für mehrere dieser Close-Buttons
 * (.modal-export .xbtn, .rsplit-close, .btn-g, .entry-receipt-picker__close) —
 * nicht darunter senken. Die runde Form bleibt; der sichtbare Tint-Kreis darf
 * optisch kompakter wirken, der KLICKBARE Bereich bleibt volle 44px. */
@media (pointer: coarse) {
  .ui-close-btn,
  .entry-composer__close,
  .modal-export .xbtn,
  .beleg-match-close,
  .app-dialog.rsplit .rsplit-close,
  .dn-preview-close,
  .dn-pause-close,
  .bm-mp__close,
  .bm-modal__close,
  .de-modal-close,
  .afa-drawer-close,
  .tt-drawer-x,
  .um-close,
  .belege-page .um-close,
  .inv-design-preview-modal-close,
  .shell-shortcuts-close,
  .entry-receipt-picker__close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}

/* ── Reduced motion ───────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  .ui-close-btn,
  .entry-composer__close,
  .modal-export .xbtn,
  .beleg-match-close,
  .app-dialog.rsplit .rsplit-close,
  .dn-preview-close,
  .dn-pause-close,
  .bm-mp__close,
  .bm-modal__close,
  .de-modal-close,
  .afa-drawer-close,
  .tt-drawer-x,
  .um-close,
  .belege-page .um-close,
  .inv-design-preview-modal-close,
  .shell-shortcuts-close,
  .entry-receipt-picker__close {
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Einheitlicher Segmented-/Tab-/Pill-Toggle — App-weiter Standard
 * ────────────────────────────────────────────────────────────────────────
 * REFERENZ: das Import-Segment (.imp-segment / .imp-seg-btn). User-Wahl
 * 2026-06-05. Heller card-Container OHNE Border, kompakte Items, aktiver Tab
 * voll accent-gefüllt (gold) + semibold. Vorher: 5 Container-Toggles mit je
 * eigenem Container-bg/Border, Radius (7–18px) und Active-Stil (mal card+
 * shadow, mal accent-fill) — siehe Audit 2026-06-05.
 *
 * Cascade: LETZTES Komponenten-Partial (nach _99a-ui-close-btn). Überschreibt
 * NUR die VISUELLEN Eigenschaften (background/border/radius/color/font/
 * box-shadow) der bestehenden Klassen — KEINE Layout-Eigenschaften
 * (display/overflow-x/scroll-snap/flex), damit die Mobile-Scroll-Container
 * .inv2-seg-group + .imp-segment intakt bleiben. KEINE Markup-Änderung.
 *
 * Referenz-Werte (1:1 vom Import-Segment):
 *   Container: background var(--card) · KEIN Border · border-radius 8px · padding 3px · gap 2px
 *   Item:      padding 6px 12px · min-height 32px · border-radius var(--radius-sm)
 *              font-size 11.5px · inaktiv color var(--text2) / weight medium
 *   Active:    background var(--accent) · color var(--accent-ink) · weight semibold
 *
 * BEWUSST NICHT im Scope (bleiben unverändert):
 *   .filter-pill (freistehende Pills, kein Container-Toggle) · alle .sort-*
 *   (Sortier-Buttons mit Caret, eigene Funktion).
 * ════════════════════════════════════════════════════════════════════════ */

/* ── 1) Container ─────────────────────────────────────────────────────────
 * Nur Optik: heller card-Hintergrund, kein Border, radius 8px. display/
 * overflow/scroll-snap NICHT anfassen (inv2/imp brauchen ihren Scroll). */
.tx-view-toggle,
.seg-ctrl,
.tx-segmented,
.inv2-seg-group,
.cockpit-beta-scenario-tabs {
  background: var(--card);
  border: 0;
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
body.light .tx-view-toggle,
body.light .seg-ctrl,
body.light .tx-segmented,
body.light .inv2-seg-group,
body.light .cockpit-beta-scenario-tabs {
  background: var(--card);
}

/* ── 2) Item inaktiv ──────────────────────────────────────────────────────
 * Kompakte Import-Item-Geometrie + neutrale Farbe. min-height bleibt nur dort
 * gesetzt wo sinnvoll; wir vereinheitlichen radius/padding/font/color. */
.tx-view-pill,
.seg-ctrl button,
.tx-segmented-item,
.inv2-seg,
.cockpit-beta-scenario-tab {
  padding: 6px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text2);
  font-size: 11.5px;
  font-weight: var(--fw-medium);
  box-shadow: none;
}
body.light .tx-segmented-item {
  color: var(--text2);
}

/* ── 3) Item Hover ────────────────────────────────────────────────────────*/
.tx-view-pill:hover,
.seg-ctrl button:hover,
.tx-segmented-item:hover,
.inv2-seg:hover,
.cockpit-beta-scenario-tab:hover {
  color: var(--text);
  background: transparent;
}

/* ── 4) Item Active — voll accent-gefüllt (Import-Stil) ───────────────────
 * Deckt alle Active-Marker ab: .is-active / .active / [aria-selected] /
 * --active / .inv2-seg-active. */
.tx-view-pill.is-active,
.seg-ctrl button.active,
.tx-segmented-item[aria-selected="true"],
.inv2-seg.inv2-seg-active,
.cockpit-beta-scenario-tab.cockpit-beta-scenario-tab--active,
.cockpit-beta-scenario-tab[aria-selected="true"] {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: var(--fw-semibold);
  border-color: transparent;
  box-shadow: none;
}
body.light .tx-view-pill.is-active,
body.light .tx-segmented-item[aria-selected="true"],
body.light .inv2-seg.inv2-seg-active {
  background: var(--accent);
  color: var(--accent-ink);
  /* box-shadow:none MUSS hier wiederholt werden: die bestehende
     `body.light .tx-view-pill.is-active`-Regel (Spez. 0,3,0) ist spezifischer
     als der allgemeine Active-Block oben, sonst bleibt im Light-Mode der alte
     Shadow am aktiven Tab (Codex P2). */
  box-shadow: none;
}

/* ── 5) Item Focus — einheitlicher Accent-Ring ───────────────────────────*/
.tx-view-pill:focus-visible,
.seg-ctrl button:focus-visible,
.tx-segmented-item:focus-visible,
.inv2-seg:focus-visible,
.cockpit-beta-scenario-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: none;
}

/* ── 6) Count-/Status-Badges ──────────────────────────────────────────────
 * Nur den border-radius vereinheitlichen (radius-sm) — NICHT background/color.
 * Grund (Codex P2): die Tone-Modifier .inv2-seg-badge-danger/-info/-good haben
 * dieselbe Spezifität wie eine bare .inv2-seg-badge-Regel; würden wir hier
 * background/color setzen, übersteuerte unsere spätere Regel deren Tone-Farben
 * und graute sie aus. Also fassen wir nur den Radius an. Die Selektoren sind
 * zudem container-gescoped (.seg-ctrl .seg-cnt ist Spez. 0,2,0), damit der
 * Radius-Override auch dort gewinnt (Codex P2). */
.tx-view-toggle .seg-cnt,
.seg-ctrl .seg-cnt,
.inv2-seg .inv2-seg-badge,
.imp-segment .imp-seg-count {
  border-radius: var(--radius-sm);
}
.seg-ctrl button.active .seg-cnt,
.inv2-seg-active .inv2-seg-badge {
  /* Dunkler Schleier auf dem gold-Active-Grund — exakt wie die Import-Referenz
     (.imp-seg-count: rgba(0,0,0,.18)). Token-frei, weil es ein neutraler
     Abdunkler über --accent ist, kein Theme-Farbwert. */
  background: rgba(0, 0, 0, .18);
  color: var(--accent-ink);
}

/* ── 7) Touch-Target-Floor (WCAG 2.5.5 / Apple HIG) ───────────────────────
 * Nur .cockpit-beta-scenario-tab wird gehoben: ein WebKit-Render-Audit
 * (iPhone 13, ergänzend zu PR #3721) maß sie mit 166×27px — Höhe deutlich
 * unter 44px. Die geteilte Basis-Regel (oben, mit .tx-view-pill etc.) bleibt
 * UNANGETASTET, damit die anderen Segmented-Controls unverändert kompakt
 * bleiben; nur dieser eine Tab bekommt auf coarse Pointern die volle
 * Trefferfläche via min-height + padding (Optik bleibt schlank). */
@media (pointer: coarse) {
  .cockpit-beta-scenario-tab {
    min-height: 44px;
    min-width: 44px;
    padding-block: 11px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Einheitlicher Zeilen-Aktions-Icon-Button — App-weiter Standard
 * ────────────────────────────────────────────────────────────────────────
 * RUND, passend zur runden Topbar-Icon-Sprache (.shell-topbar-icon-btn) und
 * den runden Close-Buttons (_99a-ui-close-btn). User-Wahl 2026-06-05.
 * Vorher: Edit/Löschen/Mehr-Icons in Tabellen-/Karten-Zeilen je eigene Größe
 * (24/32/40px) und Radius (5/8px). Siehe Audit 2026-06-05.
 *
 * Cascade: spätes Komponenten-Partial (nach _99a-ui-close-btn). Überschreibt
 * die VISUELLE Geometrie der bestehenden eigenständigen Icon-Button-Klassen.
 * KEINE Markup-Änderung.
 *
 * SCOPE (per User): nur die EIGENSTÄNDIGEN transparenten Icon-Buttons —
 *   .brow-icon-btn (Belege) · .kon-icon-btn (Kontakte) · .ledger-action-btn
 *   (Ledger, hover-reveal). NICHT die .btn-Familie-Modifier (.row-action-btn /
 *   .trips-icon-btn / .afa-icon-btn tragen `btn btn-g/btn-d btn-sm` und sind
 *   gefüllte Mini-Buttons — die gehören zu Kategorie 3, nicht hierher).
 * AUSGENOMMEN per User: .inv3-item-iconbtn · .dp-nav-btn.
 *
 * Referenz-Maße: 34×34 px · border-radius var(--radius-pill) · transparent ·
 *   hover background var(--card2) · del-Variante rot · SVG 17 px.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Belege + Kontakte: 34px rund ─────────────────────────────────────────
 * Beide sind eigenständig (kein .btn). Selektoren container-gescoped genug,
 * dass sie die bestehenden Regeln schlagen (.beleg-row--card .brow-icon-btn
 * ist 0,2,0 → wir matchen mit gleicher Spez via .beleg-row--card-Präfix). */
.beleg-row--card .brow-icon-btn,
.kon-icon-btn {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: var(--radius-pill);
  color: var(--text3);
}
.beleg-row--card .brow-icon-btn:hover,
.kon-icon-btn:hover {
  background: var(--card2);
  color: var(--text);
  border-color: transparent;
}
body.light .beleg-row--card .brow-icon-btn:hover,
body.light .kon-icon-btn:hover {
  background: var(--card2);
  color: var(--text);
}
/* del-Variante: rot bleibt rot, runder Tint */
.beleg-row--card .brow-icon-btn.brow-del:hover,
.kon-icon-btn.kon-btn-del:hover {
  color: var(--tone-poor-fg);
  background: rgba(248, 113, 113, .12);
}
/* body.light-Gegenstück MUSS sein: die generische body.light-Hover-Regel oben
   (body.light .beleg-row--card .brow-icon-btn:hover, Spez. 0,4,1) ist sonst
   spezifischer als die del-Regel (0,4,0) und färbt den Löschen-Button im
   Light-Theme neutral statt rot (Codex P2). */
body.light .beleg-row--card .brow-icon-btn.brow-del:hover,
body.light .kon-icon-btn.kon-btn-del:hover {
  color: var(--tone-poor-fg);
  background: rgba(248, 113, 113, .12);
}
.beleg-row--card .brow-icon-btn svg,
.kon-icon-btn svg {
  width: 17px;
  height: 17px;
}

/* ── Ledger-Zeile: kompaktere 28px rund (dichte Zeilen, hover-reveal) ──────
 * Bleibt etwas kleiner als 34px, weil die Buchungszeilen dicht sind und der
 * Button hover-reveal ist (opacity 0→0.85). opacity/reveal NICHT anfassen. */
.ledger-action-btn {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
}
.ledger-action-btn:hover {
  background: var(--card2);
  color: var(--text);
  border-color: transparent;
}
.ledger-action-btn--del:hover {
  color: var(--tone-poor-fg);
  background: rgba(248, 113, 113, .12);
  border-color: transparent;
}

/* ── Touch: 44px Hit-Area auf groben Zeigern (WCAG 2.5.5) ──────────────────
 * .brow-icon-btn hatte schon eine coarse-44px-Regel; wir vereinheitlichen
 * .kon-icon-btn (hatte keine) mit, runde Form bleibt. */
@media (pointer: coarse) {
  .beleg-row--card .brow-icon-btn,
  .kon-icon-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  .ledger-action-btn {
    width: 36px;
    height: 36px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Primary/Secondary-Button-Radius — Angleich an die zentrale .btn-Familie
 * ────────────────────────────────────────────────────────────────────────
 * Die zentrale .btn-Familie (.btn-p/.btn-g/.btn-d) nutzt border-radius
 * var(--radius2) (6px). Vier parallele Button-Systeme haben dieselbe Funktion
 * (Primary/Secondary-Aktionen in Toolbars), aber je eigenen Radius: bm-btn
 * 10px, mh-cockpit-btn 9px, mh-inspector-btn 8px, yo-btn 10px, dash-btn
 * radius-md. Audit 2026-06-05.
 *
 * User-Entscheid 2026-06-05: NUR OPTIK angleichen, HÖHE BEHALTEN. Konkret
 * heißt das hier: NUR der border-radius wird auf var(--radius2) (6px)
 * vereinheitlicht. Höhen (42/36/32px), Padding, Farben, Primary-Fill-Logik,
 * Hover/Focus/Disabled, Touch-Targets und Secondary-Stile bleiben unangetastet
 * — das hält den Eingriff minimal und layout-neutral (Toolbar-Höhen, die in
 * den jeweiligen Ansichten eingeplant sind, ändern sich nicht).
 *
 * Cascade: spätes Komponenten-Partial (nach _99a-ui-close-btn). KEINE
 * Markup-Änderung.
 *
 * Hero-Ausnahme bleibt: .dash-btn--primary ist bewusst OUTLINE (gold-Rand,
 * transparent) statt accent-fill — User-Entscheid. Wir ändern hier nur den
 * Radius des .dash-btn-Containers, nicht seine Primary-Fill-Logik.
 * ════════════════════════════════════════════════════════════════════════ */

.bm-btn,
.bm-btn--sm,
.mh-cockpit-btn,
.mh-inspector-btn,
.yo-btn,
.yo-btn-acc,
.yo-btn-ghost,
.dash-btn {
  border-radius: var(--radius2);
}

/* Split-Add-Button (bm-add-group--split): linke Hauptfläche + rechter Pfeil-
   Toggle bilden EINEN zusammengesetzten Button mit eckigen Innenkanten. Die
   pauschale .bm-btn{border-radius:6px}-Shorthand-Regel oben (gleiche Spez,
   später) würde die Innenkanten wieder runden und den Button aufbrechen
   (Codex P2). Wir stellen die eckigen Innenkanten mit gleicher Spez+später
   wieder her — die Außenkanten bleiben bei den geerbten 6px. */
.bm-add-group--split .bm-add-btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.bm-add-split-toggle {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Year-Actions-Trigger: .yo-ja-menu .yo-ja-trigger (Spez. 0,2,0) schlägt die
   bare .dash-btn-Regel oben (0,1,0) und bliebe sonst bei 10px (Codex P2).
   Mit gleicher Spez angleichen. */
.yo-ja-menu .yo-ja-trigger {
  border-radius: var(--radius2);
}

/* ════════════════════════════════════════════════════════════════════════
 * Close-Button-Sweep — Nachzügler auf den runden Standard (_99a)
 * ────────────────────────────────────────────────────────────────────────
 * Der ursprüngliche Close-Button-PR (_99a-ui-close-btn) suchte per
 * Klassenname (close/xbtn) + aria-label="Schließen". Drei Close-Buttons
 * fielen durch, weil ihr Klassenname KEIN "close" enthält und/oder ihr
 * aria-label eine Variante ist:
 *   - .shell-search-clear  (aria-label "Suche schließen", Klassenname „clear")
 *   - .mob-fs-close        (aria-label "Menü schließen", mobiles Vollbild-Menü)
 *   - .ntf-iconbtn         (aria-label "Ausblenden", Notif-Dismiss; trägt
 *                            auch „Als gelesen" — beide kleine Action-Icons,
 *                            runde Form passt für beide)
 *   - .shell-sidebar-close (aria-label "Menü schließen", Sidebar-Drawer)
 *   - .bundle-dialog-x     (aria-label "Dialog schließen", Belege-Bündel)
 *   - .scanner-x           (aria-label "Scanner schließen", Scanner-Overlay)
 *
 * Gefunden via klassennamen-UNABHÄNGIGEM aria-label-*schließen*-Audit
 * (2026-06-05). Ein Sentinel-Test (tests/close-button-roundness.test.js)
 * verhindert künftiges Durchrutschen.
 *
 * Cascade: spätes Komponenten-Partial (nach _99d). Überschreibt NUR die
 * visuelle Geometrie (radius/border/background). KEINE Markup-Änderung.
 *
 * NICHT im Scope: .trial-banner-dismiss (winziger inline-Text-× ohne Fläche,
 * font 14px/padding 2px — kein Icon-Button; würde erst width/height brauchen).
 *
 * Referenz (_99a): rund (var(--radius-pill)) · transparent · hover var(--card2).
 * ════════════════════════════════════════════════════════════════════════ */

/* Radius + transparenter Grund für alle. .scanner-x lebt in einem eigenen
   schwarzen Overlay-Theme (--scanner-bg/-fg) und behält seinen eigenen
   Hover/Farbwert — wir geben ihm NUR den runden Radius, nicht den hellen
   var(--card2)-Hover (der wäre auf Schwarz falsch). */
.shell-search-clear,
.mob-fs-close,
.ntf-iconbtn,
.shell-sidebar-close,
.bundle-dialog-x,
.cockpit-beta-drag-hint-close,
.scanner-x {
  border: 0;
  border-radius: var(--radius-pill);
}
.shell-search-clear,
.mob-fs-close,
.ntf-iconbtn,
.shell-sidebar-close,
.bundle-dialog-x,
.cockpit-beta-drag-hint-close {
  background: transparent;
}
.shell-search-clear:hover,
.mob-fs-close:hover,
.ntf-iconbtn:hover,
.shell-sidebar-close:hover,
.bundle-dialog-x:hover,
.cockpit-beta-drag-hint-close:hover {
  background: var(--card2);
  color: var(--text);
  border-color: transparent;
}
body.light .shell-search-clear:hover,
body.light .mob-fs-close:hover,
body.light .ntf-iconbtn:hover,
body.light .shell-sidebar-close:hover,
body.light .bundle-dialog-x:hover,
body.light .cockpit-beta-drag-hint-close:hover {
  background: var(--card2);
  color: var(--text);
}
.shell-search-clear:focus-visible,
.mob-fs-close:focus-visible,
.ntf-iconbtn:focus-visible,
.shell-sidebar-close:focus-visible,
.bundle-dialog-x:focus-visible,
.cockpit-beta-drag-hint-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: none;
}

/* ════════════════════════════════════════════════════════════════════════
 * Einheitliche Status-Badges — App-weiter Standard
 * ────────────────────────────────────────────────────────────────────────
 * Spec: docs/superpowers/specs/2026-06-07-badge-unification-design.md
 *
 * 6 Status-Badge-Klassen teilten keine gemeinsame Form (radius 4–999px, mal
 * Border mal nicht, font 9.5–10.5px) und nutzten teils hartcodierte Tone-
 * Farben (rgba(74,222,128,.1)) statt der zentralen --tone-*-Tokens. Dieses
 * Late-Cascade-Partial (nach _99e) vereinheitlicht GEOMETRIE + TONE-FARBEN.
 * KEINE Markup-Änderung. Bedeutung pro Variante bleibt erhalten (Mapping nach
 * Ist-Farbe — keine sichtbare Farbverschiebung).
 *
 * REFERENZ: das bereits token-basierte .op-status-chip (pill, --tone-*-Tokens).
 *
 * SCOPE: .beleg-badge · .afa-badge · .op-status-chip · .mh-status-chip ·
 *        .gobd-badge · .trips-chip (+ deren Tone-Varianten).
 * NICHT im Scope: .inv2-seg-badge (Count, schon in _99b), Struktur-/Nav-/
 *        Filter-Chips (Sidebar/Notif/Year/Plan/Filter).
 *
 * Spezifität: bestehende Regeln haben body.light-Overrides (höhere Spez.) —
 * die Tone-Regeln werden daher auch als body.light wiederholt, sonst greift
 * die Token-Farbe im Light-Mode nicht. Token sind theme-aware → identischer
 * Inhalt, nur höhere Spezifität (Lehre aus den Button-Codex-Reviews).
 * ════════════════════════════════════════════════════════════════════════ */

/* ── 1) Einheitliche Geometrie ────────────────────────────────────────────
 * .beleg-badge ist :not()-gescoped: die Anhang-Rollen-Badges
 * (.ba-badge-primary/-supporting/-count, „Hauptbeleg/Zusatzbeleg/Zähler") sind
 * KEINE Status-Badges und bleiben unberührt (Codex P2).
 * GoBD ist zusätzlich .ledger-row-actions-gescoped, weil dort eine Regel mit
 * Spez. 0,2,0 sonst padding/font behält (Codex P2). */
.beleg-badge:not(.ba-badge-primary):not(.ba-badge-supporting):not(.ba-badge-count),
.afa-badge,
.op-status-chip,
.mh-status-chip,
.gobd-badge,
.ledger-row-actions .gobd-badge,
.trips-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  min-height: 20px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: 10.5px;
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* ── 2) Tone: GOOD (grün) ─────────────────────────────────────────────────
 * beleg linked/email-source · afa active · op good · mh closed · gobd.
 * .gobd-badge schließt die READONLY-Varianten aus (Lesezugriff = rot, eigene
 * Regel mit gleicher Spez/früher Position; ohne :not() würde good sie auf grün
 * kippen — Codex P2). */
.beleg-badge.linked,
.beleg-badge.email-source,
.afa-badge--active,
.op-status-chip--good,
.mh-status-chip--closed,
.gobd-badge:not(.dash-gobd-badge--readonly):not(.dash-month-banner__badge--readonly),
body.light .beleg-badge.linked,
body.light .beleg-badge.email-source,
body.light .afa-badge--active,
body.light .op-status-chip--good,
body.light .mh-status-chip--closed,
body.light .gobd-badge:not(.dash-gobd-badge--readonly):not(.dash-month-banner__badge--readonly) {
  color: var(--tone-good-fg);
  background: var(--tone-good-bg);
  border-color: var(--tone-good-border);
}

/* ── 3) Tone: WARN (gold) ─────────────────────────────────────────────────
 * beleg unlinked · afa disposed · op warn/orange. */
.beleg-badge.unlinked,
.afa-badge--disposed,
.op-status-chip--warn,
.op-status-chip--orange,
body.light .beleg-badge.unlinked,
body.light .afa-badge--disposed,
body.light .op-status-chip--warn,
body.light .op-status-chip--orange {
  color: var(--tone-warn-text);
  background: var(--tone-warn-bg);
  border-color: var(--tone-warn-border);
}

/* ── 4) Tone: POOR (rot) ──────────────────────────────────────────────────
 * beleg error · op poor/critical · mh readonly. */
.beleg-badge.error,
.op-status-chip--poor,
.op-status-chip--critical,
.mh-status-chip--readonly,
body.light .beleg-badge.error,
body.light .op-status-chip--poor,
body.light .op-status-chip--critical,
body.light .mh-status-chip--readonly {
  color: var(--tone-poor-fg);
  background: var(--tone-poor-bg);
  border-color: var(--tone-poor-border);
}

/* ── 5) Tone: INFO (blau) ─────────────────────────────────────────────────
 * mh open · trips-chip. */
.mh-status-chip--open,
.trips-chip,
body.light .mh-status-chip--open,
body.light .trips-chip {
  color: var(--tone-info-fg);
  background: var(--tone-info-bg);
  border-color: var(--tone-info-border);
}

/* ── 6) Tone: NEUTRAL (grau) ──────────────────────────────────────────────
 * beleg no-key · afa done · op neutral. Kein eigener --tone-neutral-Token →
 * surface-basiert (identisch zu .op-status-chip--neutral heute). */
.beleg-badge.no-key,
.afa-badge--done,
.op-status-chip--neutral,
body.light .beleg-badge.no-key,
body.light .afa-badge--done,
body.light .op-status-chip--neutral {
  color: var(--text2);
  background: rgba(var(--surface-rgba-base), .05);
  border-color: var(--border);
}

/* E-Mail-Versand Settings (eigene SMTP-Mailbox) — prefix `ed-` */

/* ─── Shell + Card ─── */
.ed-shell{font-size:12.5px;max-width:100%;min-width:0;}
.ed-loading-card{padding:20px;color:var(--text3);}
.ed-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:border-color .2s;max-width:100%;min-width:0;box-sizing:border-box;overflow:hidden;}
.ed-card.is-active{border-color:var(--green3);}
.ed-error-text{color:var(--red);font-size:12px;}

/* ─── Header ─── */
.ed-header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;}
.ed-header-left{display:flex;align-items:flex-start;gap:12px;min-width:0;}
.ed-header-left>div{min-width:0;}
.ed-header-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;background:var(--bg2);border:1px solid var(--border);color:var(--text2);transition:background .2s,border-color .2s,color .2s;}
.ed-card.is-active .ed-header-icon{background:var(--green2);border-color:var(--green3);color:var(--green);}
.ed-title{font-size:14px;font-weight:var(--fw-bold);color:var(--text);}
.ed-status{font-size:11.5px;color:var(--text3);margin-top:2px;}
.ed-card.is-active .ed-status{color:var(--green);}

/* ─── Info text / sections ─── */
.ed-info-text{font-size:12px;color:var(--text3);line-height:1.5;}
.ed-info-text--lead{margin-top:12px;}
.ed-info-section{margin-top:16px;padding-top:14px;border-top:1px solid rgba(var(--surface-rgba-base),.05);}
.ed-info-title{font-size:12px;font-weight:var(--fw-semibold);color:var(--text);margin-bottom:4px;}

/* ─── Incident banner ─── */
.ed-banner{display:flex;align-items:flex-start;gap:8px;margin-top:14px;padding:10px 12px;border-radius:8px;font-size:12px;line-height:1.45;}
.ed-banner--warn{background:var(--tone-warn-bg);border:1px solid var(--tone-warn-border);color:var(--tone-warn-text);}
.ed-banner-icon{flex-shrink:0;margin-top:1px;}

/* ─── Mode selection (radio cards) ─── */
.ed-modes{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
.ed-mode{display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;padding:13px 14px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);cursor:pointer;transition:border-color .15s,background .15s;box-sizing:border-box;min-width:0;}
.ed-mode:hover{border-color:var(--text3);}
.ed-mode.is-selected{border-color:var(--green3);background:var(--green2);}
.ed-mode:disabled{cursor:not-allowed;opacity:.6;}
.ed-mode-radio{position:relative;flex-shrink:0;width:16px;height:16px;margin-top:2px;border-radius:50%;border:2px solid var(--text3);transition:border-color .15s;}
.ed-mode.is-selected .ed-mode-radio{border-color:var(--green);}
.ed-mode.is-selected .ed-mode-radio::after{content:"";position:absolute;top:2px;left:2px;width:8px;height:8px;border-radius:50%;background:var(--green);}
.ed-mode-body{display:flex;flex-direction:column;gap:3px;min-width:0;}
.ed-mode-title{font-size:13px;font-weight:var(--fw-semibold);color:var(--text);}
.ed-mode-desc{font-size:11.5px;color:var(--text3);line-height:1.45;}

/* ─── Form ─── */
.ed-form{margin-top:18px;}
.ed-field{margin-top:14px;min-width:0;}
.ed-field:first-child{margin-top:0;}
.ed-label{display:block;font-size:11.5px;font-weight:var(--fw-semibold);color:var(--text2);margin-bottom:6px;}
.ed-optional{font-weight:var(--fw-regular,400);color:var(--text3);}
.ed-input{width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);font-size:12.5px;font-family:inherit;transition:border-color .15s;}
.ed-input:focus{outline:none;border-color:var(--green3);}
.ed-input::placeholder{color:var(--text3);}
.ed-select{appearance:none;-webkit-appearance:none;cursor:pointer;}
.ed-hidden{display:none;}

.ed-row{display:flex;gap:12px;margin-top:14px;min-width:0;}
.ed-field--port{flex:0 0 110px;margin-top:0;}
.ed-field--sec{flex:1 1 auto;margin-top:0;min-width:0;}

/* ─── Presets ─── */
.ed-presets{display:flex;flex-wrap:wrap;gap:7px;}
.ed-preset-btn{display:inline-flex;align-items:center;padding:5px 11px;border-radius:7px;border:1px solid var(--border);background:var(--bg);color:var(--text2);font-size:11.5px;font-weight:var(--fw-semibold);font-family:inherit;cursor:pointer;transition:border-color .15s,color .15s,background .15s;}
.ed-preset-btn:hover{border-color:var(--green3);color:var(--text);background:var(--green2);}
.ed-preset-hint{font-size:11px;color:var(--text3);line-height:1.45;margin-top:7px;min-height:0;}
.ed-preset-hint:empty{display:none;}

/* ─── Password "set" state ─── */
.ed-pw-set{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.ed-pw-badge{display:inline-flex;align-items:center;padding:5px 11px;border-radius:7px;background:var(--green2);border:1px solid var(--green3);color:var(--green);font-size:11.5px;font-weight:var(--fw-semibold);}
.ed-link-btn{font-size:12px;color:var(--text3);cursor:pointer;background:none;border:none;padding:0;text-decoration:underline;text-underline-offset:2px;font-family:inherit;transition:color .15s;}
.ed-link-btn:hover{color:var(--text);}

/* ─── Buttons ─── */
.ed-actions{margin-top:18px;}
.ed-btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;border-radius:8px;border:1px solid var(--border);background:var(--bg2);color:var(--text);font-size:12px;font-weight:var(--fw-semibold);font-family:inherit;cursor:pointer;transition:border-color .15s,background .15s,opacity .15s;}
.ed-btn:hover{border-color:var(--text3);}
.ed-btn:disabled{opacity:.45;cursor:not-allowed;}
.ed-btn--primary{background:var(--green);border-color:var(--green);color:white;}
.ed-btn--primary:hover{border-color:var(--green);opacity:.9;}
.ed-btn--primary:disabled{opacity:.45;}
.ed-btn--ghost{background:transparent;}

/* ─── Divider ─── */
.ed-divider{height:1px;background:rgba(var(--surface-rgba-base),.05);margin:18px 0;}

/* ─── Test rows ─── */
.ed-test-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.ed-test-row--mail{margin-top:9px;}
.ed-input--inline{flex:1 1 200px;min-width:0;width:auto;}

/* ─── Activate row ─── */
.ed-activate-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.ed-activate-state{font-size:12px;color:var(--green);font-weight:var(--fw-semibold);}
.ed-activate-hint{font-size:11.5px;color:var(--text3);line-height:1.4;}

/* ─── Light mode ─── */
body.light .ed-card.is-active{border-color:var(--green3);}
body.light .ed-header-icon{background:var(--bg2);border-color:var(--border);}
body.light .ed-mode.is-selected{border-color:var(--green3);background:var(--green2);}
body.light .ed-btn--primary{color:white;}

/* ─── Mobile ─── */
@media(max-width:700px){
  .ed-card{padding:var(--space-lg);}
  .ed-header{flex-wrap:wrap;}
  .ed-row{flex-direction:column;gap:14px;}
  .ed-field--port,.ed-field--sec{flex:1 1 100%;}
  .ed-test-row .ed-btn{flex:1 1 100%;}
  .ed-input--inline{flex:1 1 100%;}
  .ed-activate-row .ed-btn{flex:1 1 100%;}
}

/* Quiet note surface: verbindliche Hinweisbox-Linie ohne Status-Dot,
   Uppercase-Kicker, Gold-/Rot-Topstripe oder einseitige Akzentkante. */
body.light {
  --tx-note-bg:rgba(var(--ink-rgba-base),.025);
  --tx-note-border:rgba(var(--ink-rgba-base),.095);
  --tx-note-border-strong:rgba(var(--ink-rgba-base),.14);
  --tx-note-info-bg:rgba(59,130,246,.045);
  --tx-note-info-border:rgba(59,130,246,.14);
  --tx-note-warn-bg:rgba(196,139,26,.045);
  --tx-note-warn-border:rgba(196,139,26,.14);
  --tx-note-danger-bg:rgba(220,38,38,.045);
  --tx-note-danger-border:rgba(220,38,38,.14);
  --tx-note-success-bg:rgba(5,150,105,.045);
  --tx-note-success-border:rgba(5,150,105,.14);
}

.tx-note,
.app-dialog-infobox,
.st-note,
.inv-portal-notice,
.afa-drawer-note,
.payment-identity-note,
.sett-notice-bar,
.entry-inline-card__needs-review,
.entry-inline-card--bewirt-split,
.tx-ai-notice,
.detail-sheet-callout,
.sbn,
.bc-warning,
.beleg-match-fx-warn,
.inv3-callout,
.konto-callout {
  background:var(--tx-note-bg);
  border:1px solid var(--tx-note-border);
  border-radius:var(--tx-note-radius);
  color:var(--tx-note-text-color);
  box-shadow:none;
}

.tx-note,
.app-dialog-infobox,
.st-note,
.inv-portal-notice,
.afa-drawer-note,
.payment-identity-note,
.sett-notice-bar,
.tx-ai-notice,
.detail-sheet-callout,
.bc-warning,
.beleg-match-fx-warn,
.konto-callout {
  padding:var(--tx-note-padding);
  line-height:1.55;
}

.tx-note--info,
.tx-ai-notice,
.konto-callout--info,
.detail-sheet-callout {
  background:var(--tx-note-info-bg);
  border-color:var(--tx-note-info-border);
}

.tx-note--warn,
.sbn.yellow,
.sett-notice-bar,
.entry-inline-card__needs-review,
.entry-inline-card--bewirt-split,
.bc-warning,
.beleg-match-fx-warn,
.konto-callout--warn,
.detail-sheet-callout.is-warn {
  background:var(--tx-note-warn-bg);
  border-color:var(--tx-note-warn-border);
}

.tx-note--danger,
.sbn.red {
  background:var(--tx-note-danger-bg);
  border-color:var(--tx-note-danger-border);
}

.tx-note--success,
.sbn.green,
.detail-sheet-callout.is-good {
  background:var(--tx-note-success-bg);
  border-color:var(--tx-note-success-border);
}

.tx-note strong,
.app-dialog-infobox-title,
.tx-ai-notice strong,
.detail-sheet-callout-head,
.konto-callout strong {
  color:var(--tx-note-title-color);
  font-weight:var(--fw-semibold);
  letter-spacing:0;
  text-transform:none;
}

.tx-note :is(svg,.tx-note__icon),
.sett-notice-bar svg,
.inv3-callout-ico,
.detail-sheet-callout-check {
  color:var(--tx-note-muted-color);
}

.inv3-callout::before,
.app-dialog::before,
.app-dialog.beleg-modal--match::before {
  content:none;
  display:none;
}

.app-dialog {
  border-color:var(--tx-note-border-strong);
}

.app-dialog--warning,
.app-dialog--destructive,
.app-dialog--success {
  border-color:var(--tx-note-border-strong);
}

.sbn.red,
.sbn.yellow,
.sbn.green {
  color:var(--tx-note-text-color);
}

.sett-notice-bar {
  align-items:flex-start;
  font-size:12px;
}

.detail-sheet-callout-check,
.detail-sheet-callout.is-warn .detail-sheet-callout-check {
  color:var(--tx-note-muted-color);
}

.save-status,
.save-dot,
.status-group-sync {
  display:none!important;
}

.tx-note :is(.pill,.badge),
.tx-note [class*="pill"],
.tx-note [class*="badge"] {
  text-transform:none;
  letter-spacing:0;
}

/* ════════════════════════════════════════════════════════════════════════
   Horizontal-Scroll-Chip-Reihen — Edge-Fade als Scroll-Affordance
   ────────────────────────────────────────────────────────────────────────
   Bugfix (2026-07-11, Ops-Lab-Screenshot-Review): auf schmalen Mobile-
   Viewports laufen mehrere Filter-/Status-Chip-Reihen (Buchungen, Rechnungen/
   Angebote) über den sichtbaren Bereich hinaus. `overflow-x:auto` ist dort
   jeweils schon gesetzt und technisch scrollbar — aber ohne visuellen
   Hinweis wirkt der letzte Chip einfach hart abgeschnitten ("Ausgaben 1…",
   "Fälli…"), Nutzer merken nicht, dass mehr Inhalt existiert.

   Fix: dasselbe Gradient-Fade-Muster, das `.bundle-dialog-stripe` bereits
   für die Thumbnail-Stripe nutzt (_51b-bundle-dialog.css, D4-Entscheidung
   "signal es geht weiter") — ein `mask-image`, der den Container-Inhalt
   am rechten Rand ausblendet statt eine hintergrundfarbige Overlay-Box zu
   legen. Funktioniert dadurch unabhängig von der jeweiligen Container-
   Hintergrundfarbe (--card / rgba(surface,.035) — beide unterschiedlich),
   kein Farbabgleich pro Klasse nötig.

   Scope-Korrektur (Grok-Review-Finding): `.afa-tabs` (Anlageverzeichnis)
   bewusst NICHT hier — hat bereits einen eigenen, dynamischeren Fade via
   `::after`-Pseudo-Element in _90-afa-fahrten.css (sticky, verschwindet
   automatisch am Scroll-Ende), eine zweite statische Maske würde sich damit
   überlagern. `.tx-filter-chips` (Rechnungen/Angebote) ist NUR innerhalb
   des ≤760px-Media-Blocks gescoped, in dem `_31-invoices.css` die Klasse
   tatsächlich auf `overflow-x:auto` umschaltet (Basisregel ist
   `flex-wrap:wrap`, dort soll kein Fade erscheinen).

   Overflow-Korrektur (Integrator-Finding, DeepSeek + Kilo bestätigt): eine
   statische, unconditional Maske clippt den letzten Chip auch dann leicht,
   wenn GAR KEIN horizontaler Overflow vorliegt — bei wenigen Buchungen im
   Monat (kurze Zähler) passen alle 4 .bm-tabs-Chips oft ohne Scrollen in
   den Container. Reines CSS kann "hat der Container gerade Overflow" nicht
   zuverlässig abbilden, daher hängt die Maske jetzt an der Laufzeit-Klasse
   `.is-scrollable`, die `public/js/scroll-fade-sync.js` per
   `scrollWidth > clientWidth`-Check + ResizeObserver toggelt (Aufruf via
   `window._syncScrollFadeChips()` direkt nach jedem relevanten
   `innerHTML=`-Render in router-dispatch.js).

   Cascade: letztes Komponenten-Partial (nach _99b-ui-segmented), damit der
   Fade auch über spätere visuelle Overrides hinweg bestehen bleibt. Nur
   `mask-image` — keine Layout-/overflow-Eigenschaften angefasst, die
   bleiben in den jeweiligen Feature-Partials (_23g/_31) definiert.
   ════════════════════════════════════════════════════════════════════════ */
.bm-tabs.is-scrollable {
  -webkit-mask-image: linear-gradient(to right, black 88%, transparent);
  mask-image: linear-gradient(to right, black 88%, transparent);
}

@media (max-width: 760px) {
  .tx-filter-chips.is-scrollable {
    -webkit-mask-image: linear-gradient(to right, black 88%, transparent);
    mask-image: linear-gradient(to right, black 88%, transparent);
  }
}

/* Steuerberater-Hub- und Import-Tabs: Fade nur bei echtem Overflow. */
.sbh-tabs.is-scrollable,
.import-filter-tabs.is-scrollable {
  -webkit-mask-image: linear-gradient(to right, black 88%, transparent);
  mask-image: linear-gradient(to right, black 88%, transparent);
}

/* Reduced-Motion: die Maske selbst ist kein Motion-Effekt (statisch, kein
   Transition/Animation), daher keine Ausnahme nötig. Kein-Overflow-Fall
   ist jetzt durch `.is-scrollable` (Laufzeit-Check) abgedeckt statt durch
   eine reine CSS-Heuristik. */