/* ═══════════════════════════════════════════
   Immo Mgmt — Modern Cornflower Design System
   Body/UI: Plus Jakarta Sans | Primary: #4F74E6 (Kornblume/Cornflower)
   ═══════════════════════════════════════════ */

/* ── Tokens ── */
/* Design-Token-SSOT (Variant C, Card 8102493d): der folgende :root-Block wird aus
   design-tokens/ (Style Dictionary) GENERIERT und via `npm run build:tokens`
   idempotent zwischen die Sentinel-Kommentare geschrieben. NICHT von Hand
   editieren — Quelle ist design-tokens/tokens (DTCG JSON). Wertgleich zum
   bisherigen app.css :root (No-op). Dieser inline-:root IST die ausgelieferte SSOT. */
/* >>> AUTO-GENERATED design tokens (design-tokens/) — do not edit by hand <<< */
:root {
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bg-page: #f2f4f9;
  --bg-surface: #ffffff;
  --bg-surface-2: #f8fafc;
  --bg-header: #D0D5DD;
  --brand-teal: #4F74E6;
  --brand-teal-rgb: 79, 116, 230;
  --color-primary: var(--brand-teal);
  --color-primary-dim: rgba(var(--brand-teal-rgb),.10);
  --color-primary-border: rgba(var(--brand-teal-rgb),.25);
  --color-primary-hover: var(--brand-600, #3A5CD4);
  --color-primary-dark: var(--brand-700, #273C8E);
  --color-primary-bright: #BCCCF7;
  --color-primary-btn-border: #6E8CEB;
  --color-gold: #B45309;
  --color-gold-dim: rgba(217,119,6,.12);
  --color-gold-border: rgba(217,119,6,.30);
  --color-gold-nav-bg: rgba(217,119,6,.10);
  --color-gold-nav-border: rgba(217,119,6,.25);
  --color-gold-hover: #92400E;
  --color-gold-btn-border: #D97706;
  --color-amber-badge: #92400E;
  --color-amber-bright: #FBBF24;
  --color-amber-dim: rgba(217,119,6,.12);
  --color-green: #10b981;
  --color-green-dim: rgba(16,185,129,.12);
  --color-green-bright: #4ADE80;
  --color-green-badge: #047857;
  --color-green-chip-bg: #f0fdf4;
  --color-green-chip-border: #bbf7d0;
  --color-green-chip-text: #15803d;
  --color-green-light-bg: #eef7f1;
  --color-green-light-border: #cbe7d7;
  --color-green-light-text: #15803d;
  --color-green-light-strong: #0f5f2e;
  --color-teal-badge: var(--color-primary-dark);
  --color-red: #DC2626;
  --color-red-light: #EF4444;
  --color-red-badge: #B91C1C;
  --color-red-bright: #F87171;
  --color-red-dim: rgba(220,38,38,.10);
  --color-red-hover: #B91C1C;
  --color-red-btn-border: #EF4444;
  --focus-ring-red: rgba(220,38,38,.10);
  --color-purple-light: #A855F7;
  --color-purple-dim: rgba(88,28,135,.18);
  --color-purple-badge: #6B21A8;
  --color-purple-chip-bg: #efe9fb;
  --color-blue-dim: rgba(59,130,246,.12);
  --color-blue: #2563eb;
  --color-blue-badge: #1D4ED8;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #556070;
  --text-faint: #94a3b8;
  --border-subtle: #f1f5f9;
  --border-default: #e2e8f0;
  --border-strong: #cbd5e1;
  --border-faint: #f8fafc;
  --border-hover: #94a3b8;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --color-surface: var(--bg-surface);
  --color-surface-2: var(--bg-surface-2);
  --color-text: var(--text-primary);
  --color-text-2: var(--text-secondary);
  --color-muted: var(--text-muted);
  --color-border: var(--border-default);
  --color-error: var(--color-red);
  --color-success: var(--color-green);
  --color-warning: var(--status-warn);
  --color-info: var(--color-blue);
  --color-error-rgb: 220, 38, 38;
  --color-success-rgb: 16, 185, 129;
  --color-warning-rgb: 217, 119, 6;
  --color-info-rgb: 59, 130, 246;
  --status-ok: var(--color-green);
  --status-warn: #D97706;
  --status-warn-dim: rgba(217,119,6,.12);
  --status-danger: var(--color-red);
  --status-info: var(--color-purple-light);
  --brand: var(--brand-teal);
  --brand-600: #3A5CD4;
  --brand-700: #273C8E;
  --color-accent-aa: #3A5CD4;
  --anthracite-2: #3A3F47;
  --brand-050: var(--color-primary-dim);
  --brand-100: var(--color-primary-border);
  --accent: var(--brand-teal);
  --brand-contrast: #fff;
  --bg-sunken: var(--bg-surface-2);
  --text-invert: #fff;
  --overlay-scrim: rgba(17, 24, 39, .45);
  --gray-050: var(--gray-50);
  --text: var(--text-primary);
  --success: var(--color-green);
  --success-bg: var(--color-green-dim);
  --warning: var(--color-amber-badge);
  --warning-bg: var(--color-amber-dim, var(--color-green-dim));
  --danger: var(--color-red);
  --danger-bg: rgba(220,38,38,.10);
  --info: var(--color-primary);
  --info-bg: var(--color-primary-dim);
  --brand-primary: var(--brand-teal);
  --chart-income: #2e7d32;
  --chart-income-print: #1B5E20;
  --chart-cost: #c62828;
  --chart-cost-print: #B71C1C;
  --chart-debt: #ef6c00;
  --chart-debt-print: #E65100;
  --chart-result: #1565c0;
  --chart-result-print: #0D47A1;
  --chart-cat-obligations: #6a1b9a;
  --chart-cat-obligations-print: #4A148C;
  --chart-cat-assets: #00838f;
  --chart-cat-assets-print: #006064;
  --chart-cat-defects: #ad1457;
  --chart-cat-defects-print: #880E4F;
  --chart-neutral: #607d8b;
  --chart-neutral-print: #263238;
  --transition: .15s ease;
  --sidebar-width: 220px;
  --sidebar-rail: 64px;
  --sidebar-bg: #ffffff;
  --sidebar-border: var(--border-default);
  --sidebar-active-bg: var(--color-primary-dim);
  --sidebar-active-fg: var(--color-primary-dark);
  --topbar-height: 56px;
  --dash-sticky-title-h: 1.75rem;
  --alpha-dim: .10;
  --alpha-border: .25;
  --field-w-num: 100px;
  --field-w-text: 180px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 9999px;
  --radius: var(--radius-md);
  --radius-pill: var(--radius-full);
  --shadow-rgb: 0, 0, 0;
  --shadow-sm: 0 1px 3px rgba(var(--shadow-rgb),.06), 0 1px 2px rgba(var(--shadow-rgb),.04);
  --shadow-glow: 0 0 12px rgba(var(--brand-teal-rgb),.18);
  --shadow-lg: 0 4px 16px rgba(var(--shadow-rgb),.08);
  --shadow-teal: 0 0 0 3px rgba(var(--brand-teal-rgb),.15);
  --shadow-md: var(--shadow-lg);
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 34px;
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;
  --fs-xs: var(--text-xs);
  --fs-sm: var(--text-sm);
  --fs-md: var(--text-md);
  --fs-lg: var(--text-lg);
  --fs-xl: var(--text-xl);
  --fs-2xl: var(--text-2xl);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* <<< END AUTO-GENERATED design tokens >>> */

/* ── Reset ── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base ── */
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--bg-page);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: var(--text-base);
  line-height: 1.5;
}
html, body { max-width: 100%; }
/* Link-Text nutzt das dunklere Teal (>=4.5:1 auf #fff; --color-primary allein war ~3.03:1). */
a { color: var(--color-primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--color-primary-hover); }
h1,.page-title {
  font-size: var(--text-xl); font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -.4px; line-height: 1.2;
}
h2 {
  font-size: var(--text-lg); font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}
h3 {
  font-size: var(--text-md); font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.subtitle,.page-subtitle { font-size: var(--text-base); color: var(--text-muted); margin-top: 4px; }

/* ── Top Navigation ── */
.topnav {
  height: 56px; background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
  display: flex; align-items: center;
  padding: 0 24px; position: sticky;
  top: 0; z-index: 40; flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.topnav-logo {
  display: flex; align-items: center; gap: 8px;
  margin-right: 32px; text-decoration: none; flex-shrink: 0;
}
.topnav-logo:hover { text-decoration: none; opacity: .9; }
.topnav-logo-mark {
  width: 34px; height: 34px;
  display: block;
}
.topnav-logo-text { font-size: 15px; font-weight: 700; color: var(--text-primary); letter-spacing: -.3px; }
.topnav-logo-text span { color: var(--color-primary); }
.topnav-nav { display: flex; align-items: center; flex: 1; gap: 2px; }
.nav-link {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; font-size: var(--text-base); font-weight: 500;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  white-space: nowrap; cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
}
.nav-link:hover { color: var(--text-secondary); background: var(--bg-surface-2); text-decoration: none; }
.nav-link.active { color: var(--color-primary); background: var(--color-primary-dim); font-weight: 600; }
.nav-ico { font-size: var(--text-md); flex-shrink: 0; }
.nav-label { font-size: var(--text-base); }
.topnav-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.topnav-user { width: 34px; height: 34px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.topnav-user:hover { opacity: .85; }
.user-avatar {
  width: 34px; height: 34px; border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-base); font-weight: 700; color: #fff; flex-shrink: 0;
}
.user-avatar-img { width: 34px; height: 34px; border-radius: var(--radius-full); object-fit: cover; flex-shrink: 0; }

/* User-Menu Dropdown */
.user-menu { position: relative; }
.user-menu-dropdown {
  display: none;
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 220px;
}
.user-menu-dropdown.open { display: block; }

/* Bell */
.bell-container { position: relative; }
#bell-btn {
  width: 34px; height: 34px; border-radius: var(--radius-full);
  background: var(--bg-surface-2); border: 1px solid var(--border-default);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-muted); font-size: var(--text-md);
  position: relative; padding: 0;
}
#bell-btn:hover { border-color: var(--border-hover); color: var(--text-secondary); }
#notif-panel {
  display: none;
  position: absolute; right: 0; top: 110%;
  width: 300px; z-index: 100;
}
#notif-panel.open { display: block; }
.notif-unread { border-left: 2px solid var(--color-red); }
.notif-badge {
  position: absolute; top: -3px; right: -3px;
  background: var(--color-red); color: #fff;
  font-size: 8px; border-radius: var(--radius-full);
  padding: 1px 3px; font-weight: 700; line-height: 1;
}

/* ── Main content ── */
.main { flex: 1; padding: 24px 28px; min-height: calc(100vh - 56px); }

/* ── Page header ── */
.page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.header-actions { display: flex; gap: 8px; align-items: center; }

/* ── Breadcrumb ── */
.breadcrumb { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: 8px; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--text-secondary); text-decoration: none; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 20px; border-radius: var(--radius-md);
  font-size: var(--text-base); font-weight: 600;
  cursor: pointer; border: 1px solid transparent;
  text-decoration: none; white-space: nowrap;
  letter-spacing: .2px; line-height: 1;
  transition: background var(--transition), opacity var(--transition);
}
.btn:hover { text-decoration: none; }
/* OP-1 (Code-Review 2026-07-16): #fff auf --color-primary #4F74E6 = 4.22:1 (AA-Fail).
   Nur der .btn-primary-Grund geht auf --brand-600 #3A5CD4 (#fff => ~5.7:1, AA-pass);
   Cornflower #4F74E6 bleibt Marken-Akzent ueberall sonst. */
.btn-primary { background: var(--brand-600, #3A5CD4); color: #fff; border-color: var(--color-primary-btn-border); }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-secondary { background: var(--bg-surface); color: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.btn-secondary:hover { background: var(--color-primary-dim); }
.btn-ghost { background: transparent; color: var(--text-muted); border-color: var(--border-default); }
.btn-ghost:hover { background: var(--bg-surface-2); }
/* Sekundäraktion, weiche Chip-Optik auf der Brand-Akzentfarbe (OP-1, Card 974795e0).
   Frueher weiches Light-Green — Heiner wollte die gruenen Buttons auf die Marken-
   Akzentfarbe angeglichen (gruene BUTTONS -> brand; gruene Status-Badges bleiben).
   Deckungsgleich mit .btn-brand; Text = --color-primary-dark (#273C8E, AA >=4.5:1
   auf dem hellen Brand-Grund). */
.btn-utility {
  background: var(--color-primary-dim);
  color: var(--color-primary-dark);
  border-color: var(--color-primary-border);
}
.btn-utility:hover { background: var(--color-primary-border); color: var(--color-primary-dark); }
/* BUG bug-974795e0-overflow (QA zu OP-1 974795e0): Lange, umbruchlose Token
   (90+ Zeichen ohne Leerzeichen) in den Marken-Badges/Buttons sprengten auf
   Mobile (390px) den Viewport horizontal (html/body scrollWidth > clientWidth).
   Fix: Token brechen/umbrechen statt die Box unbegrenzt zu dehnen.
   - min-width:0      -> als Flex-Kind duerfen die Elemente unter Content schrumpfen
   - max-width:100%   -> nie breiter als der Container
   - overflow-wrap/word-break -> umbruchlose Token brechen innerhalb der Zeile
   - white-space:normal -> hebt das .btn `white-space:nowrap` fuer .btn-utility auf */
.te-badge,
.wz-badge,
.badge-assign-naechste,
.btn-utility {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
/* Marken-Sekundaeraktion (Corporate Teal): gleiche weiche Chip-Optik wie
   .btn-utility, aber auf dem Markenfarbcode (--color-primary) statt Gruen.
   Fuer Sekundaeraktionen, die bewusst die Corporate-Farbe tragen sollen
   (z. B. Quartiere / CSV Import auf der Gebaeude-Uebersicht). Text nutzt das
   dunklere Teal (>=4.5:1 auf dem hellen Teal-Grund). */
.btn-brand {
  background: var(--color-primary-dim);
  color: var(--color-primary-dark);
  border-color: var(--color-primary-border);
}
.btn-brand:hover { background: var(--color-primary-border); color: var(--color-primary-dark); }
.btn-danger { background: var(--color-red); color: #fff; border-color: var(--color-red-btn-border); }
.btn-danger:hover { background: var(--color-red-hover); }
.btn-sm { font-size: var(--text-sm); padding: 5px 13px; }
.btn:disabled,.btn[disabled] { opacity: .35; cursor: not-allowed; pointer-events: none; }

/* ── Detail-page action buttons (Bearbeiten, Start/Ende setzen, Abbrechen) ── */
.page-header .btn,
.page-header a.btn {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary-btn-border);
  box-shadow: none;
}
.page-header .btn:hover,
.page-header a.btn:hover {
  background: var(--color-primary-hover);
  text-decoration: none;
}

/* ── Cards ── */
.card {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.card:hover { border-color: var(--color-primary-border); box-shadow: var(--shadow-glow); text-decoration: none; }
a.card:hover, a.card:hover h3, a.card:hover p { color: var(--text-primary); }
.card-accent { border-top: 2px solid var(--color-primary); }
.card-label {
  font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 5px;
}

/* Disable hover glow on detail page info cards */
.page-header ~ .grid-3 .card:hover,
.page-header + .grid-3 .card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--border-default);
}

/* ── Stat cards ── */
.stat-card {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: 13px 15px; border-top-width: 2px;
  box-shadow: var(--shadow-sm);
}
.stat-label {
  font-size: 10px; font-weight: 600;
  color: var(--text-muted); letter-spacing: .8px; text-transform: uppercase; margin-bottom: 6px;
}
.stat-value { font-size: var(--text-2xl); font-weight: 700; line-height: 1; color: var(--text-primary); }
.stat-delta { font-size: var(--text-sm); color: var(--text-muted); margin-top: 4px; }
.stat-card.accent,
.stat-card.warn   { border-top-color: var(--color-primary); }
.stat-card.accent .stat-value,
.stat-card.warn   .stat-value { color: var(--color-primary); }
.stat-card.danger { border-top-color: var(--color-red); }
.stat-card.danger .stat-value { color: var(--color-red); }

/* ── Table wrapper ── */
.table-card {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
/* Rechtsbündige Aktionsspalte in Tabellen (ersetzt inline text-align:right). */
td.cell-actions { text-align: right; }
table { width: 100%; border-collapse: collapse; }
/* Karte 93780076: umbruchlose Token-Namen (~90 Zeichen ohne Leerzeichen) haben
   keinen Wrap-Kandidaten und dehnten die Zelle/Tabelle unbegrenzt (292px Overflow).
   Feste, schriftrelative Spaltenbreite + Ellipsis begrenzen die Zellbreite. */
.cell-truncate {
  display: inline-block; max-width: 32ch; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
.cell-code {
  display: inline-block; max-width: 32ch;
  overflow-wrap: anywhere; word-break: break-word;
}
th {
  padding: 11px 14px; text-align: left;
  font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary);
  border-bottom: 2px solid var(--border-strong);
  background: var(--bg-surface-2);
}
tfoot td, tfoot th {
  padding: 10px 14px; font-size: var(--text-base);
  background: var(--bg-surface-2);
  border-top: 2px solid var(--border-strong);
  color: var(--text-secondary);
}
td {
  padding: 10px 14px; font-size: var(--text-base); color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
}
td:first-child { color: var(--text-primary); font-weight: 600; }
tbody tr:hover { background: rgba(var(--brand-teal-rgb),.035); }
tbody tr:last-child td { border-bottom: none; }

/* ── Badges ── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .4px; text-transform: uppercase;
}
/* Clickable badge (e.g. „Aus Vertrag" → Vertragsmodal): reset the <button> chrome
   so it reads as an inline badge, but keep it focusable + pointer-cursored. */
.badge-link { border: 0; font-family: inherit; cursor: pointer; }
.badge-link:hover { filter: brightness(1.08); }
.badge-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge-ok,
.badge-done    { background: var(--color-green-dim); color: var(--color-green-badge); }
/* Positiv-Badge (Vorhanden/Konform/Bonus). Klassenname historisch „teal", nach
   dem CI-Rebrand als weicher Light-Green definiert (war zuvor UNDEFINIERT → die
   Badges auf Stammdaten/GEG/Förderung rendern unstyled). Light-Green statt satt. */
.badge-teal    { background: var(--color-green-light-bg); color: var(--color-green-light-text); }
.badge-warn,
.badge-accent,
.badge-scheduled,
.badge-due_soon,
.badge-active  { background: var(--color-gold-dim);  color: var(--color-amber-badge); }
.badge-danger,
.badge-overdue { background: var(--color-red-dim);   color: var(--color-red-badge); }
.badge-muted,
.badge-skipped,
.badge-open_ended,
.badge-cancelled,
.badge-not_started,
.badge-pending    { background: rgba(0,0,0,.06); border: 1px solid var(--border-default); color: var(--text-muted); }
.badge-obsolete { background: rgba(0,0,0,.06); border: 1px solid var(--border-default); color: var(--text-muted); }
.badge-info      { background: var(--color-purple-dim); color: var(--color-purple-badge); }
.badge-apartment { background: var(--color-blue-dim);  color: var(--color-blue-badge); }
.badge-parking   { background: var(--color-primary-dim); color: var(--brand-600); }
/* Buchungsart-Badges (S3): Einnahme grün, Ausgabe rot, Kostengutschrift violett */
.badge-art-in     { background: var(--color-green-dim); color: var(--color-green-badge); }
.badge-art-out    { background: var(--color-red-dim);   color: var(--color-red-badge); }
.badge-art-credit { background: var(--color-purple-dim); color: var(--color-purple-badge); }

/* ── Badge aliases — dynamic status values from model properties ── */

/* contracts: Contract.status property */
.badge-active      { background: var(--color-green-dim); color: var(--color-green-badge); }
.badge-expired     { background: var(--color-red-dim);   color: var(--color-red-badge); }
.badge-expiring    { background: var(--color-gold-dim);  color: var(--color-amber-badge); }
.badge-renewing_soon { background: var(--color-gold-dim); color: var(--color-amber-badge); }
.badge-open_ended  { background: rgba(0,0,0,.06); border: 1px solid var(--border-default); color: var(--text-muted); }

/* Contract detail badge — larger & readable */
.page-header .badge {
  padding: 5px 14px;
  font-size: var(--text-base);
  letter-spacing: .5px;
  white-space: nowrap;
}

/* renovation: Measure.status & MaintenanceTask.status */
.badge-in_progress { background: var(--color-gold-dim);  color: var(--color-amber-badge); }
.badge-planning    { background: var(--color-purple-dim); color: var(--color-purple-badge); }

/* renovation: PhaseInstance.status choices */
.badge-completed   { background: var(--color-green-dim); color: var(--color-green-badge); }

/* renovation: Milestone.status & WarrantyTickler.status */
.badge-due         { background: var(--color-red-dim);   color: var(--color-red-badge); }
.badge-delayed     { background: var(--color-red-dim);   color: var(--color-red-badge); }

/* renovation: milestone row status indicators */
.ms-row--done    { border-color: rgba(34,197,94,.25) !important; border-left-color: var(--color-green) !important; }
.ms-row--delayed { border-color: rgba(220,38,38,.2)  !important; border-left-color: var(--color-red-light) !important; }

/* maintenance: MaintenanceInstance.status & MaintenanceTask.status */
.badge-planned     { background: var(--color-gold-dim);  color: var(--color-amber-badge); }
.badge-open        { background: var(--color-purple-dim); color: var(--color-purple-badge); }

/* CR-135: Kontakt-Badges (Adressbuch-Liste + Detail). Die Einfaerbung lag als
   rgba()-Literal in einem inline style=-Attribut und wurde von der gehaerteten
   CSP verworfen -> die Badges rendern farblos. Jetzt Token-basiert, damit auch
   der Dark-Mode-Reskin ([data-theme="dark"]) ohne Eingriff greift. */
.badge-role     { background: var(--color-blue-dim);  color: var(--color-blue-badge); }
.badge-inbox    { background: var(--color-gold-dim);  color: var(--color-amber-badge); }
.badge-tenancy  { background: var(--color-green-dim); color: var(--color-green-badge); }
/* Ersetzt das fruehere margin-right:3px je Badge durch ein Gap am Container. */
.badge-group { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }

/* ── Messages ── */
.messages { margin-bottom: 16px; }
.message { border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: 8px; font-size: var(--text-base); }
.message.success { background: var(--color-green-dim);  border: 1px solid rgba(34,197,94,.25);  color: var(--color-green); }
.message.error   { background: var(--color-red-dim);    border: 1px solid rgba(153,27,27,.35);  color: var(--color-red-badge); }
.message.warning { background: var(--color-gold-dim);   border: 1px solid var(--color-gold-border);  color: var(--color-gold); }
.message.info    { background: var(--color-purple-dim); border: 1px solid rgba(88,28,135,.35);  color: var(--color-purple-badge); }

/* ── Forms ── */
.form-group { margin-bottom: 16px; }
label {
  display: block; font-size: var(--text-base); font-weight: 600;
  color: var(--text-secondary); margin-bottom: 5px;
}
input,textarea {
  width: 100%; padding: 8px 11px; height: 38px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--bg-surface); color: var(--text-primary);
  font-size: var(--text-base);
}
textarea { height: auto; padding-top: 9px; resize: vertical; }
select {
  width: 100%; height: 38px; padding: 8px 32px 8px 11px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--bg-surface); color: var(--text-primary);
  font-size: var(--text-base);
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
input:hover,select:hover,textarea:hover { border-color: var(--border-hover); }
input:focus,select:focus,textarea:focus {
  border-color: var(--color-primary); outline: none;
  box-shadow: var(--shadow-teal);
}
input.error,select.error,textarea.error {
  border-color: var(--color-red);
  box-shadow: 0 0 0 3px var(--focus-ring-red);
}
input[type=checkbox] { width: auto; height: auto; }
input[type=radio] { width: auto; height: auto; }
input::placeholder,textarea::placeholder { color: var(--text-faint); }

/* ── A11y: visible keyboard focus (WCAG 2.4.7) ───────────────────── */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* keep mouse clicks clean; only show ring for keyboard */
:focus:not(:focus-visible) { outline: none; }
/* form fields keep their teal box-shadow on :focus; add a ring for keyboard too */
input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
.skip-link:focus-visible { outline-offset: 0; }

/* ── A11y: skip-to-content link (visually hidden until focused) ───── */
.skip-link {
  position: absolute;
  left: 8px; top: -48px;
  z-index: 2000;
  padding: 8px 14px;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--transition);
}
.skip-link:focus { top: 8px; }
#main-content:focus { outline: none; }

/* ── Checkbox pills ── */
.checkbox-pills ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.checkbox-pills li { margin: 0; }
.checkbox-pills label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--radius-sm);
  background: var(--bg-surface); border: 1px solid var(--border-strong);
  font-size: var(--text-sm); color: var(--text-muted);
  text-transform: none; letter-spacing: 0; font-weight: 500;
  margin: 0; cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.checkbox-pills label:hover { background: var(--bg-surface-2); }
.checkbox-pills label:has(input:checked) {
  background: var(--color-accent-aa); color: #fff; border-color: var(--color-accent-aa);
}
.checkbox-pills input[type=checkbox] { width: auto; margin: 0; }

/* ── Tabs ── */
.tabs { display: flex; border-bottom: 1px solid var(--border-default); margin-bottom: 20px; flex-wrap: wrap; }
.tab {
  padding: 9px 16px;
  font-size: var(--text-base); font-weight: 500; letter-spacing: .2px;
  color: var(--text-muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  text-decoration: none; display: inline-block;
  transition: color var(--transition), border-color var(--transition);
}
.tab:hover { color: var(--text-secondary); text-decoration: none; }
.tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; }
.tab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Aktionsleiste pro Tab-Bereich (rechtsbündig, konsistente Abstände) */
.tab-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

/* CR-135: Subnavigation (Gebäude: „Alle Gebäude“ / „Alle Zähler & Öl“).
   Layout lag als inline style=-Attribut im Template und wurde von der
   gehaerteten CSP (style-src ohne unsafe-inline) verworfen — die Leiste fiel
   auf display:block ohne Gap/Abstand/Trennlinie zurück. Werte 1:1 uebernommen,
   nur ueber Design-Tokens statt Literale. */
.subnav {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-default);
  flex-wrap: wrap;
}

/* ── Heading-Spacing-Utilities (Card 4b0b5693) ────────────────────────────
   Ersetzen Inline-<style>-Margins auf Überschriften durch die Token-Skala,
   damit vertikale Abstände seitenübergreifend einheitlich sind (AC3). */
.heading-flush { margin: 0; }
.heading-flush--gap { margin: 0 0 var(--space-3); }
.subsection-title { margin: var(--space-5) 0 var(--space-3); }
.section-title { margin: var(--space-8) 0 var(--space-3); }

/* ── Section-head row: Titel links, Aktions-Buttons rechts (approved clickdummy) ──
   .section-head          = inter-section (großzügiger Abstand, ~48 px)
   .section-head--flush   = erster Abschnitt direkt unter Tab-Nav (kleiner Abstand, ~8 px)
   .section-head .section-title overrides the standalone margin so the wrapper controls spacing. */
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 48px; margin-bottom: 16px; }
.section-head--flush { margin-top: 8px; }
.section-head .section-title { margin: 0; }
.section-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }

/* ── Building workspace navigation ── */
.building-nav-horizontal {
  display: flex;
  gap: 24px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-default);
  margin: 0 0 20px;
  flex-wrap: wrap;
}
.building-nav-primary {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--text-md);
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.building-nav-primary:hover {
  color: var(--text-primary);
  text-decoration: none;
}
.building-nav-primary.active {
  /* CR-75: dunkleres Teal für WCAG-AA-Text (>=4.5:1 auf --bg-page);
     border-bottom bleibt Brand-Teal (UI-Grenze, 3:1 genügt). */
  color: var(--color-primary-dark);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}

.building-nav-secondary {
  display: flex;
  gap: 16px;
  padding: 12px 16px;
  background: var(--bg-surface-2);
  border-radius: var(--radius-sm);
  margin: 0 0 20px;
  flex-wrap: wrap;
  align-items: center;
}
.building-nav-secondary-label {
  color: var(--text-primary);
  font-weight: 600;
  font-size: var(--text-base);
}
.building-nav-secondary-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--text-base);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}
.building-nav-secondary-link:hover {
  color: var(--text-primary);
  background: var(--bg-surface);
}
.building-nav-secondary-link.active {
  /* CR-75: dunkleres Teal für WCAG-AA-Text (>=4.5:1 auf --bg-surface-2). */
  color: var(--color-primary-dark);
  font-weight: 600;
}

/* CR-75: Im Dark-Mode wäre #273C8E auf dunklem Grund unlesbar — Brand-Teal
   (--color-primary) bleibt hier erhalten (kein Regress, Border ohnehin Teal). */
:root[data-theme="dark"] .building-nav-primary.active,
:root[data-theme="dark"] .building-nav-secondary-link.active {
  color: var(--color-primary);
}

/* ── Product-grade detail sections ── */
.product-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 22px;
}
.section-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
/* Hero verdichtet: Standard-h1/p-Margins rausnehmen, damit die Card flach bleibt */
.section-hero .page-title { margin: 2px 0; }
.section-hero .section-lede { margin: 0; }
.section-eyebrow {
  margin: 0 0 3px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.section-hero h2,
.section-subhead h2,
.section-subhead h3 {
  margin: 0;
}
.section-lede,
.section-subhead p {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: 1.4;
}
.section-subhead {
  margin-top: 4px;
}
.metric-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.metric-strip--compact {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.metric-tile {
  min-height: 76px;
  padding: 13px 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
.metric-tile span {
  display: block;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.metric-tile strong {
  display: block;
  color: var(--text-primary);
  font-size: 20px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.metric-tile--status strong {
  font-size: var(--text-md);
}
.section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  align-items: start;
}
.section-grid--wide {
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
}
.action-panel form p {
  margin: 0 0 10px;
}
.notice,
.empty-state-panel,
.switch-panel {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  padding: 12px 14px;
  color: var(--text-secondary);
  font-size: var(--text-base);
  box-shadow: var(--shadow-sm);
}
.notice-warning {
  border-color: var(--status-warn);
  background: var(--status-warn-dim);
  color: var(--text-primary);
}
.empty-state-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.empty-state-panel strong {
  color: var(--text-primary);
}
.switch-panel label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 600;
  color: var(--text-primary);
  text-transform: none;
  letter-spacing: 0;
}
.inline-details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-primary);
}
.action-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.action-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: var(--text-base);
}
.action-list li:last-child {
  border-bottom: 0;
}
.workflow-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.workflow-step {
  min-height: 72px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
.workflow-step strong {
  min-width: 28px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-primary-dim);
  color: var(--color-primary-dark);
  font-size: var(--text-sm);
  font-weight: 800;
}
.workflow-step span {
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: 1.35;
}

@media (max-width: 767.98px) {
  .building-nav {
    grid-template-columns: 1fr;
  }
  .section-hero {
    flex-direction: column;
  }
  .section-hero .btn {
    width: 100%;
    justify-content: center;
  }
  .section-grid,
  .section-grid--wide {
    grid-template-columns: 1fr;
  }
}

/* ── Inline form (action panels: ratings, quick-create forms) ── */
.inline-form {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-top: 12px;
  box-shadow: var(--shadow-sm);
}

/* ── Filter / search bar (wraps GET filter forms) ── */
.filter-bar,
.filter-row {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.filter-bar input,
.filter-bar select,
.filter-row input,
.filter-row select { margin: 0; }

/* CR-135: Adressbuch-Filterleiste. Breiten-/Flex-Verhaeltnisse lagen als inline
   style=-Attribute im Template und wurden von der gehaerteten CSP verworfen —
   beide Felder fielen auf display:block/volle Breite zurueck. Werte 1:1. */
.contact-filter__search { flex: 1; min-width: 160px; }
.contact-filter__role { width: 200px; flex-shrink: 0; }

@media (max-width: 767.98px) {
  .contact-filter__role { width: 100%; }
}

/* Maintenance-Dashboard Zeitfenster-Filter (CSP: keine Inline-Styles). */
.mnt-days-filter { max-width: 560px; }
.mnt-days-select {
  height: 32px; padding: 0 28px 0 10px;
  border-radius: var(--radius-md); border: 1px solid var(--border-strong);
  background: #fff; font-size: var(--text-base); appearance: none;
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27 viewBox=%270 0 12 8%27%3E%3Cpath d=%27M1 1l5 5 5-5%27 stroke=%27%23666%27 stroke-width=%271.5%27 fill=%27none%27 stroke-linecap=%27round%27/%3E%3C/svg%3E');
  background-repeat: no-repeat; background-position: right 8px center; cursor: pointer;
}
.mnt-days-custom {
  height: 32px; padding: 0 10px; width: 100px; font-size: var(--text-base);
  border-radius: var(--radius-md); border: 1px solid var(--border-strong);
}
/* [hidden] muss Layout-Defaults schlagen, sonst erscheint das Feld doppelt. */
.mnt-days-custom[hidden] { display: none !important; }
.mnt-name { color: var(--color-primary); font-weight: 500; }
.mnt-reminder { font-weight: 600; color: var(--text-primary); }

.filter-bar--compact {
  display: grid;
  grid-template-columns:
    minmax(240px, 1fr)
    minmax(140px, max-content)
    minmax(130px, max-content)
    minmax(120px, max-content)
    minmax(140px, max-content)
    minmax(122px, max-content)
    minmax(122px, max-content)
    auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
}
.filter-bar--compact .filter-bar__search {
  width: 100%;
  min-width: 0;
}
.filter-bar--compact select,
.filter-bar--compact input[type="date"] {
  width: auto;
  min-width: 0;
  height: 36px;
  padding-top: 7px;
  padding-bottom: 7px;
}
.filter-bar--compact .btn {
  height: 36px;
  white-space: nowrap;
}

@media (max-width: 1279.98px) {
  .filter-bar--compact {
    grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(118px, 1fr)) auto;
  }
}

@media (max-width: 767.98px) {
  .filter-bar--compact {
    grid-template-columns: 1fr 1fr;
  }
  .filter-bar--compact .filter-bar__search,
  .filter-bar--compact .btn {
    grid-column: 1 / -1;
  }
  .filter-bar--compact select,
  .filter-bar--compact input[type="date"],
  .filter-bar--compact .btn {
    width: 100%;
  }
}

/* ── Contract list filter columns ── */
.filter-col { position: relative; flex-shrink: 0; }
.filter-icon {
  position: absolute; left: .5rem; top: 50%; transform: translateY(-50%);
  font-size: var(--text-base); z-index: 1; pointer-events: none; line-height: 1;
}
.filter-col select { width: 12rem; padding: 6px 8px 6px 1.8rem; }
.filter-col.filter-active::after {
  content: ''; position: absolute; top: 3px; right: 3px;
  width: 7px; height: 7px;
  background: var(--color-red); border-radius: 50%; pointer-events: none;
}

/* ── Form section (replaces raw fieldset inline styles) ── */
.form-section {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-bottom: 16px;
  background: var(--bg-surface);
}
.form-section-legend {
  font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); margin-bottom: 12px;
}

/* ── Empty state ── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 48px 24px;
  color: var(--text-muted);
}
.empty-state__art { width: 96px; height: 96px; opacity: .9; }
.empty-state__art:empty { display: none; }
.empty-state__art:has(.empty-state__img) { width: auto; height: auto; }
.empty-state__img { width: clamp(160px, 40%, 240px); height: auto; opacity: .9; }
.empty-state__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.empty-state__text { font-size: var(--text-base); max-width: 420px; margin: 0; }
.empty-state__cta { margin-top: 4px; }
/* Beim Anlegen eines Zählers wird die Formularzeile (.meter-new-row) in #meters-tbody
   angehängt – solange sie da ist, Empty-State ausblenden (sonst rendern beide gleichzeitig). */
#meters-tbody:has(.meter-new-row) .meters-empty-row { display: none; }

/* ── Grids ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

/* ── HTMX ── */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator { opacity: 1; }

/* ── Centered card (allauth verification / email-confirm pages) ── */
.login-wrap {
  display: flex; align-items: center; justify-content: center;
  min-height: 60vh; width: 100%; padding: 24px;
}
.login-card { width: 100%; max-width: 400px; }
.login-card h1 {
  font-size: 20px; font-weight: 700; margin-bottom: 24px;
  color: var(--color-primary); letter-spacing: -.3px;
}

/* ── Auth / Login screen ── */
.auth-shell { min-height: 100vh; overflow-x: hidden; }
.auth-screen { position: relative; min-height: 100vh; min-height: 100dvh; width: 100%; overflow-x: hidden; }
/* Full-bleed background photo (dezent), abgedämpft durch Teal-Overlay. */
.auth-bg {
  position: fixed; inset: 0; z-index: 0;
  background-image: url("../img/redesign/login-bg.a74add9eff60.jpg");
  background-size: cover; background-position: center;
}
.auth-overlay {
  position: fixed; inset: 0; z-index: 1;
  background: linear-gradient(135deg,
    rgba(0,107,101,.88) 0%,
    rgba(0,143,134,.80) 50%,
    rgba(13,148,136,.84) 100%);
}
.auth-content {
  position: relative; z-index: 2;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  padding: 28px 16px;
}
.auth-main {
  flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
}
.auth-logo {
  height: 46px; width: auto;
  filter: brightness(0) invert(1);  /* Wortmarke weiß auf Overlay */
}
.auth-card {
  width: 100%; max-width: 400px;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 55px rgba(0,0,0,.30);
  padding: 28px;
}
.auth-card__title {
  font-size: var(--text-xl); font-weight: 800;
  color: var(--text-primary); letter-spacing: -.4px;
  margin-bottom: 20px;
}
.auth-alert {
  background: var(--color-red-dim); color: var(--color-red-hover);
  border: 1px solid rgba(220,38,38,.25); border-radius: var(--radius-md);
  padding: 9px 12px; font-size: var(--text-base); margin-bottom: 16px;
}
.auth-field { margin-bottom: 16px; }
.auth-field > label {
  display: block; font-size: var(--text-base); font-weight: 600;
  color: var(--text-secondary); margin-bottom: 6px;
}
.auth-input { position: relative; }
.auth-input__icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--text-faint);
  pointer-events: none;
}
.auth-input input {
  padding-left: 40px;
  background: var(--bg-surface-2);
  border-color: var(--border-default);
}
.auth-field__error { color: var(--color-red); font-size: var(--text-sm); margin-top: 5px; }
.auth-remember {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-base); color: var(--text-secondary);
  margin-bottom: 18px; cursor: pointer;
}
.auth-remember input[type=checkbox] { width: 16px; height: 16px; margin: 0; cursor: pointer; }
.auth-submit {
  width: 100%; justify-content: center;
  height: 44px; font-size: var(--text-md); margin-top: 2px;
}
.auth-secondary {
  width: 100%; max-width: 400px;
  display: flex; gap: 12px;
}
.auth-btn-secondary {
  flex: 1 1 0; justify-content: center; height: 42px;
  background: rgba(255,255,255,.94); color: var(--text-secondary);
  border-color: rgba(255,255,255,.55); font-weight: 600;
}
.auth-btn-secondary:hover { background: var(--bg-surface); color: var(--color-primary); }
.auth-footer {
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center;
  margin-top: 24px; padding-top: 8px;
  box-sizing: border-box; max-width: 100%;
  font-size: var(--text-sm); color: rgba(255,255,255,.85);
}
.auth-footer a { color: rgba(255,255,255,.92); text-decoration: underline; }
.auth-footer a:hover { color: #fff; }
@media (min-width: 768px) {
  .auth-shell { overflow-y: hidden; }
}
@media (max-width: 479.98px) {
  .auth-secondary { flex-direction: column; }
}

/* ── Profile ── */
.profile-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.profile-avatar-placeholder {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; color: #fff;
}

/* ── Bottom Nav — hidden on desktop ── */
.bottom-nav { display: none; }

/* ═══════════════════════════════════════════════
   Mobile — max-width: 767px
   All rules here override desktop ONLY on mobile.
   Desktop (≥ 768px) is completely unaffected.
   ═══════════════════════════════════════════════ */
@media (max-width: 767.98px) {

  /* ── Base ── */
  body { font-size: 15px; padding-bottom: 64px; }
  .main { padding: 16px 16px; }

  /* ── Topnav — slim ── */
  .topnav { padding: 0 16px; }
  .topnav-logo { margin-right: 0; }

  /* ── Bottom Navigation ── */
  .bottom-nav {
    display: flex;
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-default);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 40;
  }
  .bn-tab {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2px; padding: 8px 4px;
    font-size: 10px; color: var(--text-faint);
    text-decoration: none; line-height: 1;
  }
  .bn-tab:hover { color: var(--text-muted); text-decoration: none; }
  .bn-tab.bn-active { color: var(--color-primary); font-weight: 600; }
  .bn-ico { font-size: 18px; line-height: 1; }
  .bn-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

  /* ── Touch targets ── */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 38px; }
  input:not([type=hidden]):not([type=checkbox]),
  select,
  textarea { min-height: 44px; }

  /* ── Page header ── */
  .page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .header-actions { width: 100%; flex-direction: column; }
  .header-actions .btn,
  .page-header > .btn,
  .page-header > a.btn { width: 100%; justify-content: center; }

  /* ── Filter forms — wrap on narrow screens ── */
  form[method="get"] { flex-wrap: wrap !important; }
  form[method="get"] select { min-width: 140px; flex: 1 1 140px; }

  /* ── Grids → single column ── */
  .grid-2, .grid-3 { grid-template-columns: 1fr; }

  /* ── Tables → Cards ── */
  .table-card {
    border: none; background: transparent;
    box-shadow: none; overflow: visible;
  }
  .table-card table,
  .table-card thead,
  .table-card tbody,
  .table-card tr,
  .table-card td { display: block; width: 100%; }
  .table-card thead { display: none; }
  /* Karte 93780076: In der Kartendarstellung ist die Zelle voll breit,
     hier ist Ellipsis falsch — lange Namen sollen stattdessen umbrechen. */
  .cell-truncate {
    max-width: 100%; white-space: normal; overflow-wrap: anywhere;
  }
  .table-card tbody tr {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
  }
  .table-card tbody tr:hover {
    background: var(--bg-surface);
    box-shadow: var(--shadow-glow);
  }
  .table-card tbody tr:last-child td { border-bottom: none; }
  .table-card td {
    padding: 5px 0; border-bottom: none;
    display: flex; align-items: flex-start; gap: 8px;
  }
  .table-card td::before {
    content: attr(data-label);
    font-size: var(--text-xs); font-weight: 600;
    color: var(--text-muted);  /* AA on card surface; was --text-faint (failed) */
    text-transform: uppercase; letter-spacing: .05em;
    min-width: 90px; flex-shrink: 0; padding-top: 1px;
  }
  .table-card td:first-child { font-size: var(--text-md); font-weight: 600; }
  .table-card td:first-child::before { display: none; }

  /* ── A11y/Mobile: touch targets + stacked inputs in card cells ── */
  .table-card td a.btn,
  .table-card td button.btn { min-height: 44px; }
  .table-card td input:not([type=checkbox]):not([type=radio]),
  .table-card td select,
  .table-card td textarea { flex: 1 1 auto; min-width: 0; width: 100%; }
  .table-card td input[type=checkbox],
  .table-card td input[type=radio] { width: 20px; height: 20px; }

  /* ── Detail tables inside panels — horizontal scroll ── */
  .card > .table-card,
  .card > table { overflow-x: auto; }

  /* ── A11y/Mobile: dropdowns must not overflow narrow screens (CR-25) ── */
  .user-menu-dropdown { width: calc(100vw - 32px); max-width: 220px; }
  #notif-panel { width: calc(100vw - 32px); max-width: 300px; }

  /* ── A11y/Mobile: large modals must not overflow narrow screens (CR-25) ── */
  .modal.modal-xl { max-width: calc(100vw - 32px); }
  .modal.modal-wizard { max-width: calc(100vw - 32px); }
}

/* ═══════════════════════════════════════════════
   Tablet — 768px to 1024px
   Top-nav stays visible, bottom-nav stays hidden.
   Tables get horizontal scroll (no card conversion).
   ═══════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .main { padding: 20px 16px; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .table-card,
  .card > table { overflow-x: auto; }
  .page-header { flex-wrap: wrap; gap: 12px; }
}

/* ═══════════════════════════════════════════════
   Desktop — ≥ 1025px: centered 3/5 content column
   White side margins, grey centered column.
   Scoped to body.app-shell so login + mobile/tablet
   are unaffected. Width-only (height unchanged).
   ═══════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* Wide / many-column tables (e.g. meter list in edit mode) must scroll
     horizontally inside their card instead of being clipped by the narrow
     centered column. Mirrors the tablet/mobile escape valve above; the base
     `.table-card { overflow: hidden }` keeps overflow-y hidden so the rounded
     corners survive. */
  body.app-shell .table-card { overflow-x: auto; }
}

/* ── Modals ── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(3px);
  /* Heiner-Feedback tx-v2 (Punkt 3): Robuster Overflow-Fix. `align-items: safe
     center` zentriert das Modal vertikal, wenn genug Platz ist, faellt aber auf
     flex-start zurueck, sobald das Modal hoeher als der Viewport waere — so wird
     der Kopf (Titel + Datum-Subtitle) auf niedrigen Viewports NIE oben abgeschnitten
     und das Overlay scrollt. `margin:auto` am .modal wird bewusst vermieden, da es
     `align-items` ueberschreibt und genau dieses Top-Clipping verursacht. */
  display: flex; align-items: safe center; justify-content: center;
  overflow-y: auto;
  z-index: 1000; padding: 24px;
}
/* The [hidden] attribute must beat the unconditional display:flex above, else
   the register modal is always visible (opens on load, cannot be closed). */
.modal-overlay[hidden] { display: none !important; }
@keyframes modal-shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-8px); }
  40%     { transform: translateX(8px); }
  60%     { transform: translateX(-5px); }
  80%     { transform: translateX(5px); }
}
.modal.is-shaking { animation: modal-shake 0.35s ease; }

/* New structured modal */
@keyframes modalIn {
  from { opacity: 0; transform: scale(.97) translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.modal {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06);
  width: 100%; max-width: 540px;
  /* Deckel = Viewport minus Overlay-Padding (24px oben+unten): das Modal ist nie
     hoeher als die scrollbare Overlay-Flaeche; der interne .modal-body scrollt und
     Kopf/Fuss bleiben sichtbar. Kein margin:auto (siehe .modal-overlay-Kommentar). */
  max-height: calc(100vh - 48px); overflow: hidden;
  margin-inline: auto;
  display: flex; flex-direction: column;
  animation: modalIn .18s cubic-bezier(.16,1,.3,1);
}
.modal.modal-lg  { max-width: 720px; }
.modal.modal-xl  { max-width: 900px; }
.modal.modal-wizard { max-width: 1040px; max-height: 94vh; }
.modal-header {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border-default);
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px;
  flex-shrink: 0;
}
.modal-title    { font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); letter-spacing: -.3px; }
/* Karte 03897aa0 (#6.1): Titel + Kontextzeile als eine Spalte im .modal-header,
   damit die Kontextzeile nie auf dem Header-Trenner liegt. */
.modal-title-col { min-width: 0; flex: 1 1 auto; }
.modal-subtitle { font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; overflow-wrap:anywhere; }
.modal-close {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-default); background: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-faint);
  font-size: var(--text-md); line-height: 1; flex-shrink: 0;
  transition: all var(--transition);
}
.modal-close:hover { background: var(--bg-surface-2); color: var(--text-secondary); border-color: var(--border-strong); }
.modal > form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.modal-body   { padding: 18px 22px; overflow-y: auto; flex: 1; min-height: 0; }
.modal-footer {
  padding: 12px 22px; border-top: 1px solid var(--border-default);
  display: flex; justify-content: flex-end; gap: 8px;
  background: var(--bg-surface-2); flex-shrink: 0;
}
/* Löschen-Text-Button links im Footer (früher inline: color+margin-right:auto). */
.modal-footer__del { color: var(--color-red); margin-right: auto; }
/* Lösch-Bestätigung als zusammenhängende Fußzone direkt über der .modal-footer:
   volle Modalbreite, gleiches horizontales Padding (22px), border-top statt
   frei schwebender Karte mit Seiten-Margin — franst unten nicht mehr aus.
   JS (data-csp-reveal) schaltet display:none↔block, daher Default display:none. */
.modal-del-confirm {
  display: none; padding: 12px 22px;
  border-top: 1px solid var(--color-red-btn-border);
  background: var(--danger-bg); flex-shrink: 0;
}
.modal-del-confirm__msg {
  color: var(--color-red-badge); font-size: var(--text-sm);
  margin: 0 0 10px;
}
.modal-del-confirm__actions { display: flex; gap: 8px; }

/* ══ Mietvertrag-bearbeiten-Modal (Heiner 2026-07-16 Redesign) ══
   Früher als inline <style nonce> im Partial → wurde beim HTMX-Nachladen vom CSP
   geblockt (Modal rendert unstyled). Jetzt im Design-System, CSP-sicher. */
.te-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.te-renter { position: relative; border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-4) 18px;
  margin-bottom: var(--space-4); background: var(--bg-surface); }
.te-renter--main { border-color: var(--brand-100); background: var(--brand-050); }
.te-legend { display: flex; align-items: center; gap: var(--space-2);
  margin: 0 0 var(--space-4); }
.te-legend .role { font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
/* OP-1 (Card 974795e0): text-tragende Redesign-Badges auf die AA-sichere
   Akzentfarbe --color-accent-aa (#3A5CD4, #fff => 5.73:1). Der hellere
   Marken-Ton --color-primary #4F74E6 ergab mit #fff nur 4.22:1 (AA-Fail bei
   Kleinschrift). */
.te-badge { font-size: 10.5px; font-weight: 700; padding: 3px 9px;
  border-radius: var(--radius-pill, var(--radius-full)); letter-spacing: .02em;
  background: var(--color-accent-aa); color: #fff; }
.te-badge.neb { background: var(--gray-200, #e5e7eb); color: var(--text-muted); }
.te-x { position: absolute; top: var(--space-3); right: var(--space-3);
  width: 30px; height: 30px; border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); background: var(--bg-surface);
  color: var(--color-red); cursor: pointer; display: flex; align-items: center;
  justify-content: center; font-size: var(--text-base); line-height: 1; }
.te-x:hover { background: var(--color-red-dim); border-color: var(--color-red); }
.te-addline { display: inline-flex; align-items: center; gap: 7px;
  color: var(--color-primary); font-weight: 600; font-size: var(--text-sm);
  cursor: pointer; background: var(--brand-050);
  border: 1px dashed var(--brand-100); border-radius: var(--radius-sm);
  padding: 10px 14px; margin-top: 2px; }
.te-note { font-size: var(--text-xs); color: var(--text-muted);
  margin: var(--space-3) 0 0; line-height: 1.5; }
.te-section { display: flex; align-items: center; gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-4); }
.te-section h3 { margin: 0; font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted);
  white-space: nowrap; }
.te-section .rule { flex: 1; height: 1px; background: var(--border-default); }
.te-seg { display: inline-flex; border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill, var(--radius-full)); padding: 3px;
  background: var(--bg-page); gap: 3px; }
.te-seg label { padding: 7px 18px; margin: 0;
  border-radius: var(--radius-pill, var(--radius-full)); font-size: var(--text-sm);
  font-weight: 600; color: var(--text-muted); cursor: pointer; }
.te-seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.te-seg label.is-on { background: var(--color-accent-aa); color: #fff; }
.te-unit-input { display: flex; align-items: center; gap: var(--space-2); }
.te-unit-input input { flex: 1; min-width: 0; }
.te-unit-suffix { font-size: var(--text-sm); font-weight: 600;
  color: var(--text-muted); white-space: nowrap; }
.te-miete { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); }
.te-miete__btn { display: inline-flex; align-items: center; gap: 6px; flex: none; }

/* ══ Mietvertrag-Wizard-Modal (.wz-*) ══
   Früher als inline <style nonce> im Partial tenancy_wizard_modal.html → wurde
   beim HTMX-Nachladen vom CSP geblockt (Modal rendert unstyled). Jetzt im
   Design-System, CSP-sicher. Klassennamen unverändert (JS referenziert sie). */
.wz-steps { display: flex; align-items: center; gap: 0;
  margin: 0 0 18px; padding: 0; list-style: none; }
.wz-steps li { display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-base); font-weight: 600; color: var(--text-muted); }
.wz-steps li .dot { width: 24px; height: 24px; border-radius: var(--radius-pill);
  background: var(--border-default); color: var(--text-muted); display: flex;
  align-items: center; justify-content: center; font-size: var(--text-sm);
  font-weight: 700; }
.wz-steps li.is-active .dot { background: var(--color-accent-aa); color: #fff; }
.wz-steps li.is-active { color: var(--text); }
.wz-steps .bar { flex: 1; height: 2px; background: var(--border-default);
  margin: 0 10px; min-width: 18px; }
.wz-step[hidden] { display: none; }
.wz-legend { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted); margin: 2px 0 var(--space-3);
  display: flex; align-items: center; gap: var(--space-2); }
.wz-badge { background: var(--color-accent-aa); color: #fff; font-size: var(--text-xs);
  padding: 2px 7px; border-radius: var(--radius-pill); }
.wz-badge.neb { background: var(--text-faint); }
.wz-renter { border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: var(--space-4); margin-bottom: var(--space-3); position: relative; }
.wz-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.wz-seg { display: inline-flex; border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill); padding: 3px; background: var(--bg-page); gap: 3px; }
.wz-seg label { padding: 6px 16px; border-radius: var(--radius-pill);
  font-size: var(--text-base); font-weight: 600; color: var(--text-muted);
  cursor: pointer; margin: 0; }
.wz-seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.wz-seg input:checked + span, .wz-seg label.is-on { background: var(--color-accent-aa); color: #fff; }
.wz-seg label span { display: inline-block; padding: 6px 16px; margin: -6px -16px;
  border-radius: var(--radius-pill); }
.wz-addline { display: inline-flex; align-items: center; gap: 6px;
  color: var(--color-primary); font-weight: 600; font-size: var(--text-base);
  cursor: pointer; background: none; border: none; padding: var(--space-1) 0; }
.wz-x { position: absolute; top: var(--space-2); right: var(--space-2); background: none;
  border: 1px solid var(--border-default); border-radius: 8px; color: var(--color-red);
  width: 30px; height: 30px; cursor: pointer; }
.wz-cmp { display: grid; grid-template-columns: 1fr 150px; gap: 10px;
  align-items: center; margin-bottom: 10px; }
.wz-cmp .lab { font-size: var(--text-base); font-weight: 600; }
.wz-cmp .lab small { display: block; font-weight: 400; color: var(--text-muted);
  font-size: var(--text-xs); }
.wz-sumbar { display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--color-primary-dim); border: 1px solid var(--color-primary-border); }
.wz-sumbar .v { font-size: 18px; font-weight: 800; color: var(--color-primary-dark); }
.wz-split { display: grid; grid-template-columns: 1fr 1fr 34px; gap: 10px;
  align-items: center; margin-bottom: var(--space-2); }
.wz-splithead { display: grid; grid-template-columns: 1fr 1fr 34px; gap: 10px;
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-muted); margin-bottom: 6px; }
/* Bestandteil-/Amount-Zeilen: schmale 150px-Betragsspalte statt 1fr. */
.wz-splithead--amt, .wz-split--amt { grid-template-columns: 1fr 150px 34px; }
.wz-note { font-size: var(--text-sm); color: var(--text-muted);
  margin-top: var(--space-2); line-height: 1.5; }
.wz-foot { display: flex; align-items: center; gap: 10px; margin-top: var(--space-4);
  padding-top: var(--space-3); border-top: 1px solid var(--border-default); }
.wz-foot .sp { flex: 1; }
/* AC-3.1: Block-Abstände in S3 über Spacing-Token, statt gequetschter Zeilen. */
form[data-tenancy-wizard] { --wz-block-gap: 18px; --wz-group-gap: 30px; }
form[data-tenancy-wizard] .wz-cmp { margin-bottom: var(--wz-block-gap); }
.wz-group-gap { margin-top: var(--wz-group-gap) !important; }
/* Zahleneingabe mit sichtbarer Einheit (AC-2.1). */
.wz-unit-input { display: flex; align-items: center; gap: var(--space-2); }
.wz-unit-input input { flex: 1; min-width: 0; }
.wz-unit-suffix { font-size: var(--text-base); font-weight: 600;
  color: var(--text-muted); white-space: nowrap; }
/* Ausblendbarer Rückzahlungs-Block (AC-3.4). */
.wz-reveal { background: none; border: none; color: var(--color-primary);
  font-weight: 600; font-size: var(--text-base); cursor: pointer; padding: var(--space-1) 0; margin-top: 6px; }
[data-rueckzahlung-block][hidden] { display: none; }
/* Kaution-Grid + Split-Label + Spacer (früher inline style=). */
.wz-kaution { margin-bottom: 14px; }
.wz-spacer { height: 14px; }
.wz-split-label { display: block; font-size: var(--text-sm); font-weight: 600;
  color: var(--text); margin-top: var(--space-2); line-height: 1.5; }
.wz-split-label__opt { font-weight: 400; color: var(--text-muted); }

/* ══ Konto-Zuordnungs-Panel (.konto-panel-*) ══
   Früher als inline <style nonce> im Partial _konto_panel.html → wurde beim
   HTMX-Nachladen (contact_edit_modal) vom CSP geblockt. Jetzt CSP-sicher. */
.konto-panel-card { margin-bottom: var(--space-5); }
.konto-panel-title { font-size: var(--text-sm); font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; opacity: .5; margin-bottom: var(--space-3); }
.konto-panel-list { display: flex; flex-direction: column; gap: var(--space-2); }
.konto-panel-item { display: flex; align-items: center; gap: var(--space-2); cursor: pointer;
  padding: var(--space-2); border-radius: 4px; transition: background-color 0.15s; }
.konto-panel-item input[type="checkbox"] { cursor: pointer; }
.konto-panel-empty { color: var(--text-muted); font-size: var(--text-sm); }

/* ── Dropdowns ── */
.dropdown-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 30px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.04);
  padding: 6px; min-width: 180px;
}
.dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  font-size: var(--text-base); color: var(--text-secondary); font-weight: 500;
  cursor: pointer; text-decoration: none;
  transition: background var(--transition);
}
.dropdown-item:hover { background: var(--bg-surface-2); color: var(--text-primary); text-decoration: none; }
.dropdown-item.danger { color: var(--color-red); }
.dropdown-item.danger:hover { background: var(--color-red-dim); }
.dropdown-item svg { width: 15px; height: 15px; color: var(--text-faint); flex-shrink: 0; }
.dropdown-sep  { height: 1px; background: var(--border-default); margin: 4px 0; }

/* ── Data Cards (Stammdaten-Ansichten) ── */
.data-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
/* Konsistenter, dezenter Abstand zwischen gestapelten Karten (z. B. Posteingang ↔ Sollstellungen). */
.data-card + .data-card { margin-top: 14px; }
/* C4: In den Karten-Grids stehen die Karten NEBENeinander (nicht gestapelt) —
   dort darf die Adjacent-Sibling-Regel oben kein margin-top erzeugen, sonst
   sitzt die rechte Karte (z. B. „Dach"/„Haustechnik") 14px tiefer als die linke. */
.stamm-grid > .data-card + .data-card,
.stamm-grid-wide > .data-card + .data-card { margin-top: 0; }
/* Leerzustand innerhalb einer Karte kompakter halten — sonst wirkt ein leerer Posteingang als großer Spalt. */
.data-card-body .empty-state { padding: 28px 24px; }
.data-card-header {
  display: flex; align-items: flex-start; gap: 8px;
  /* C4: gemeinsame Mindesthöhe + Top-Ausrichtung -> Karten mit Untertitel
     (z. B. „Gebäudemantel / Konstruktion & Außenhülle") und ohne (z. B. „Dach")
     haben denselben Header; Titel UND erste Body-Zeile starten bündig. */
  min-height: 46px;
  padding: 11px 16px; border-bottom: 1px solid var(--border-default);
  background: var(--bg-surface-2);
}
.data-card-icon {
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  background: var(--color-primary-dim);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.data-card-icon svg { width: 13px; height: 13px; color: var(--color-primary); }
.data-card-title    { font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); letter-spacing: -.1px; }
.data-card-subtitle { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
/* Card UX-4 #2: Posteingang-Header — Titel + (früherer) Untertitel in EINER Zeile,
   getrennt nur durch einen vertikalen Trennerstreifen (Divider). Keine separate
   Textzeile mehr im Body. */
.posteingang-header { align-items: center; flex-wrap: wrap; position: relative; }
.posteingang-header__divider {
  width: 1px; align-self: stretch; min-height: 18px;
  background: var(--border-default); flex-shrink: 0;
}
.posteingang-header__sub { color: var(--text-muted); }
/* #2 (Heiner 2026-07-22): Quelle-Tabelle direkt am Header verbunden — kein
   eigener Rahmen, keine Rundung; oberer horizontaler Rahmen ersetzt durch eine
   offene Trennlinie (vorne/hinten offen). */
.posteingang-header::after {
  content: ""; position: absolute; left: 28px; right: 28px; bottom: 0;
  height: 1px; background: var(--border-strong);
}
.posteingang-table {
  background: transparent; border: 0; border-radius: 0;
  box-shadow: none; overflow: visible;
}
.posteingang-table thead th { background: transparent; border-bottom: 0; }
.data-card-body     { padding: 0; }
.data-row {
  display: grid; grid-template-columns: 44% 56%;
  align-items: center; padding: 8px 16px;
  border-bottom: 1px solid var(--border-default); gap: 8px;
  transition: background var(--transition);
}
.data-row:last-child { border-bottom: none; }
.data-row:hover      { background: var(--bg-surface-2); }
.data-row-label {
  font-size: var(--text-xs); color: var(--text-muted); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.data-row-value {
  font-size: var(--text-sm); color: var(--text-primary); font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.data-row-value.muted { color: var(--text-faint); font-weight: 400; }
.feature-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 12px; border-top: 1px solid var(--border-default); }
.feature-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: 600;
  background: var(--color-primary-dim); color: var(--brand-600);
  border: 1px solid var(--color-primary-border);
}
.feature-tag svg { width: 11px; height: 11px; }
.feature-tag.inactive {
  background: var(--bg-surface-2); color: var(--text-faint);
  border-color: var(--border-default); font-weight: 400; opacity: .6;
}
/* Karten-Grids (Stammdaten & Co.): luftigere Lücke zwischen nebeneinanderliegenden Tabellen. */
.stamm-grid      { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.stamm-grid-wide { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-5); }
/* UX 6c100028: konsistenter vertikaler Rhythmus zwischen gestapelten Tabellen-Reihen +
   Mindestabstand ober-/unterhalb des gesamten Tabellen-Blocks. Rein token-basiert. */
.stamm-grid, .stamm-grid-wide, .stamm-block { margin-bottom: var(--space-6); }
.stamm-area > :last-child { margin-bottom: 0; }
.stamm-area { padding-top: var(--space-6); padding-bottom: var(--space-8); }
.stamm-block--narrow { max-width: 480px; }

/* ── Compact form layout (unit edit modal A+B) ── */
input.compact, select.compact    { height: 28px; font-size: var(--text-sm); padding: 0 8px; }
input.compact-year               { height: 28px; font-size: var(--text-sm); padding: 0 8px; max-width: 90px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.form-inspector {
  display: flex; flex-direction: column;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); overflow: hidden;
  margin-bottom: 4px;
}
.form-inspector-row {
  display: grid; grid-template-columns: 120px 1fr;
  align-items: center; gap: 8px; padding: 6px 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.form-inspector-row:last-child { border-bottom: none; }
.form-inspector-label { font-size: var(--text-xs); color: var(--text-muted); font-weight: 500; }
.check-dense   { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
.check-dense-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.check-dense-item {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); color: var(--text-secondary); padding: 4px 6px;
  border-radius: var(--radius-sm);
}
.check-dense-item:hover { background: var(--bg-surface-2); }
.check-dense-item input[type=checkbox] { width: 13px; height: 13px; accent-color: var(--color-primary); cursor: pointer; }
.check-dense-item label { cursor: pointer; margin: 0; font-size: var(--text-xs); font-weight: 400; color: var(--text-secondary); }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.form-col .form-group {
  margin-bottom: 0;
}

/* ── Inline-Nummer-Anlage (＋) im Vertragsformular (Karte 03b1ecff, AC-3) ─── */
.num-field-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.num-field-row > select {
  flex: 1;
  min-width: 0;
}
.num-add-wrap {
  flex: 0 0 auto;
}
.num-add {
  position: relative;
  display: inline-block;
}
.num-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface, #fff);
  color: var(--color-primary);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.num-add-btn::-webkit-details-marker {
  display: none;
}
.num-add-btn:hover {
  background: var(--color-primary-dim);
}
.num-add-btn.num-add-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.num-add-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 220px;
  padding: 10px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
.num-add-pop input[type="text"] {
  width: 100%;
}

/* ── Ablesen inline row ───────────────────────────── */
.btn-ablesen {
  background: var(--color-primary-dim);
  color: var(--color-primary);
  border: 1px solid var(--color-primary-border);
  font-size: var(--text-sm);
  padding: 5px 11px;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  line-height: 1;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn-ablesen.open {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary-btn-border);
}
/* Higher specificity than `tbody tr:last-child td` so border survives */
.table-card tr.ablesen-row td {
  background: #f0fafa;
  border-top: 1px solid var(--color-primary-border);
  border-bottom: 2px solid var(--color-primary-border);
  padding: 12px 14px;
  vertical-align: middle;
}
tr.ablesen-row td:first-child { font-weight: 400; color: var(--text-secondary); }

.ablesen-fields { display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; }
.ablesen-field-group { display: flex; align-items: center; gap: 6px; }
.ablesen-divider { width: 1px; height: 22px; background: var(--border-default); flex-shrink: 0; }
.ablesen-unit { font-size: var(--text-sm); color: var(--text-muted); }
.ablesen-hint { font-size: var(--text-xs); color: var(--text-faint); margin-top: 5px; }
.ablesen-error { font-size: var(--text-sm); color: var(--color-red); margin-top: 4px; }

.ablesen-toggle { display: flex; gap: 4px; margin-bottom: 8px; }
.ablesen-toggle .toggle-btn {
  padding: 4px 12px;
  font-size: var(--text-sm);
  font-family: inherit;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-muted);
  cursor: pointer;
  font-weight: 500;
}
.ablesen-toggle .toggle-btn.active {
  background: var(--color-primary-dim);
  color: var(--color-primary);
  border-color: var(--color-primary-border);
}

/* ── Global HTMX loading indicator ── */
#global-htmx-indicator { display: none; position: fixed; bottom: 16px; right: 16px; background: var(--color-primary, #2563eb); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 9998; }
#global-htmx-indicator.htmx-request { display: block; }

/* --- HTMX error banner (fixed overlay) --- */
/* Layout moved out of an inline style="" attribute (card 0a4e8df1): the hardened
   CSP style-src has no 'unsafe-inline', which blocked the inline attribute on
   every page. Same-origin CSS is allowed by style-src 'self'. JS toggles
   element.style.display at runtime (CSSOM, not a CSP-blocked attribute). */
#global-error-banner {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 12px;
  text-align: center;
  z-index: 9999;
}

/* --- HTMX error banner severity (MR4) --- */
#global-error-banner.banner-error { background: #c0392b; color: #fff; }
#global-error-banner.banner-warn { background: var(--status-warn); color: #1a1a1a; }

/* --- In-list skeleton indicator (MR4) --- */
.list-skeleton { display: none; padding: 8px 0; }
.list-skeleton.htmx-request { display: block; }
.list-skeleton .skeleton-row { width: 100%; }

/* -- Cross-building meter overview ------------------------------------- */
.ov-table th.ov-th { position: relative; cursor: pointer; user-select: none; white-space: nowrap; }
.ov-table th.ov-th.sorted { color: var(--color-primary); }
.ov-th .ov-ar { font-size: 9px; color: var(--text-muted); margin-left: 4px; }
.ov-th.sorted .ov-ar { color: var(--color-primary); }
.ov-th .ov-fdot { display:inline-block; width:6px; height:6px; border-radius:50%;
  background: var(--color-primary); margin-left:5px; vertical-align:middle; }
.ov-pop { display:none; position:absolute; top:100%; left:6px; z-index:30; width:220px;
  background:var(--bg-surface); border:1px solid var(--border-default); border-radius:8px;
  box-shadow:0 10px 30px rgba(15,23,42,.16); padding:6px; font-weight:400;
  max-height:320px; overflow:auto; }
.ov-th.open .ov-pop { display:block; }
.ov-pop .ov-it { display:block; width:100%; text-align:left; background:none; border:none;
  padding:6px 8px; border-radius: var(--radius-sm); font-size: var(--text-sm); color:var(--text-primary); cursor:pointer; }
.ov-pop .ov-it:hover { background: var(--bg-surface-2); }
.ov-pop .ov-sep { height:1px; background:var(--border-default); margin:5px 2px; }
.ov-pop .ov-lbl { font-size:10px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--text-muted); padding:2px 8px; }
.ov-pop .ov-search { width:100%; box-sizing:border-box; font-size:11.5px; padding:5px 7px;
  border:1px solid var(--border-default); border-radius: var(--radius-sm); margin:3px 0 4px; }
.ov-pop .ov-chk { display:flex; align-items:center; gap:7px; padding:4px 8px;
  font-size: var(--text-sm); color:var(--text-primary); cursor:pointer; }
.ov-col-new { background:#EEF2FD; }
.ov-table th.ov-col-new { background:#E7ECFB; color:#273C8E; }

/* ──────────────────────────────────────────────────────────────
   Legal pages (Impressum / Datenschutz) — editorial reading layout
   ────────────────────────────────────────────────────────────── */
.public-shell { overflow-x: hidden; }
.public-shell *, .public-shell *::before, .public-shell *::after { min-width: 0; }
.public-header { max-width: 100%; overflow-x: hidden; }
.public-header nav {
  min-width: 0; max-width: 100%;
  justify-content: center;
}
.public-footer {
  flex-wrap: wrap;
  max-width: 100%;
  overflow-x: hidden;
}
.legal {
  max-width: 1000px; margin: 0 auto; width: 100%;
  padding-inline: 16px;
  overflow-wrap: anywhere;
}

.legal-hero {
  position: relative;
  padding: 8px 0 28px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--border-default);
}
.legal-hero::before {
  content: ""; position: absolute; left: 0; top: 14px;
  width: 36px; height: 3px; border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
}
.legal-back {
  display: inline-block; font-size: var(--text-sm); font-weight: 600;
  color: var(--text-muted); margin-bottom: 22px;
}
.legal-back::before { content: "← "; }
.legal-back:hover { color: var(--color-primary); text-decoration: none; }
.legal-eyebrow {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; color: var(--color-primary); margin-bottom: 10px;
}
.legal-title {
  font-size: var(--text-3xl); font-weight: 800; letter-spacing: -.6px;
  line-height: 1.1; color: var(--text-primary);
}
.legal-lede {
  margin-top: 12px; max-width: 60ch;
  font-size: 15px; line-height: 1.6; color: var(--text-muted);
}

.legal-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

/* Sticky section index */
.legal-toc { position: sticky; top: 80px; }
.legal-toc-title {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-faint); margin-bottom: 12px;
}
.legal-toc ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.legal-toc a {
  display: block; padding: 5px 12px; font-size: var(--text-base);
  color: var(--text-muted); border-left: 2px solid var(--border-default);
  white-space: normal; overflow-wrap: anywhere;
  transition: all var(--transition);
}
.legal-toc a:hover {
  color: var(--color-primary); border-left-color: var(--color-primary);
  background: var(--color-primary-dim); text-decoration: none;
}

/* Readable body column */
.legal-body { font-size: 14.5px; line-height: 1.72; color: var(--text-secondary); }
.legal-body section { scroll-margin-top: 76px; padding-bottom: 36px; }
.legal-body section + section { border-top: 1px solid var(--border-subtle); padding-top: 36px; }
.legal-body h2 {
  font-size: 19px; font-weight: 700; letter-spacing: -.2px;
  color: var(--text-primary); margin-bottom: 16px; line-height: 1.3;
}
.legal-body p { margin-bottom: 14px; }
.legal-body p:last-child { margin-bottom: 0; }
.legal-body a { color: var(--color-primary); font-weight: 500; word-break: break-word; }
.legal-body pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.legal-body pre code { white-space: pre; }

.legal-dl {
  display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr);
  gap: 8px 24px; margin: 4px 0 16px;
}
.legal-dl dt { font-weight: 600; color: var(--text-muted); }
.legal-dl dd { color: var(--text-primary); }

.legal-list { margin: 4px 0 16px; padding-left: 0; list-style: none; }
.legal-list li { position: relative; padding-left: 22px; margin-bottom: 8px; }
.legal-list li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 6px; height: 6px; border-radius: var(--radius-full);
  background: var(--color-primary);
}

/* Operator-facing placeholders — deliberately conspicuous until filled in */
.legal-ph {
  background: #fef3c7; color: #92400e;
  font-weight: 600; font-style: normal;
  padding: 1px 7px; border-radius: var(--radius-sm);
  border: 1px dashed #f59e0b; overflow-wrap: anywhere;
}

.legal-note {
  font-size: 12.5px; line-height: 1.55; color: var(--text-muted);
  background: var(--bg-surface-2); border: 1px solid var(--border-default);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm); padding: 10px 14px; margin: 14px 0 0;
}
.legal-updated { font-size: var(--text-base); color: var(--text-faint); margin-top: 8px; }

/* ── Site footer (always visible, incl. login screen) ── */
.site-footer { border-top: 1px solid var(--border-default); background: var(--bg-surface); }
.site-footer-inner {
  max-width: 1100px; margin: 0 auto;
  padding: 18px 28px; display: flex; flex-wrap: wrap; gap: 12px 24px;
  align-items: center; justify-content: space-between;
}
.site-footer-brand { font-size: var(--text-base); font-weight: 700; color: var(--text-muted); letter-spacing: -.2px; }
.site-footer-brand span { color: var(--color-primary); }
.site-footer-nav { display: flex; gap: 22px; }
.site-footer-nav a { font-size: var(--text-base); color: var(--text-muted); font-weight: 500; }
.site-footer-nav a:hover { color: var(--color-primary); text-decoration: none; }

@media (max-width: 1023.98px) {
  .legal-title { font-size: 27px; }
  .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .legal-toc, .legal-body { min-width: 0; }
  .legal-toc {
    position: static; margin-bottom: 28px; padding-bottom: 24px;
    border-bottom: 1px solid var(--border-default);
  }
  .legal-toc ul { flex-flow: row wrap; gap: 6px; }
  .legal-toc a { border-left: none; border: 1px solid var(--border-default); border-radius: var(--radius-full); }
  .legal-dl { grid-template-columns: 1fr; gap: 2px; }
  .legal-dl dt { margin-top: 10px; }
  .site-footer-inner { padding: 16px; justify-content: center; }
}

/* --- Loading skeletons (MR1) --- */
.skeleton {
  background: linear-gradient(90deg, var(--bg-surface-2) 25%, var(--border-subtle) 37%, var(--bg-surface-2) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}
.skeleton-row { height: 16px; margin: 8px 0; }
.skeleton-card { height: 96px; }
@keyframes skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}

/* ===== App-Shell layout (MR1) ===== */
body.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--topbar-height) 1fr auto;
  grid-template-areas: "sidebar topbar" "sidebar main" "sidebar footer";
  min-height: 100vh;
}
body.app-shell.sidebar-collapsed { grid-template-columns: var(--sidebar-rail); }

.app-sidebar {
  grid-area: sidebar;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 10px;
  /* Eigene, viewport-hohe Scroll-Spalte: der Footer (Einstellungen … Datenschutz)
     bleibt bei langem Hauptinhalt erreichbar, statt unter den Viewport zu rutschen. */
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.app-sidebar-logo { display: flex; align-items: center; gap: 8px; padding: 4px 8px 12px; text-decoration: none; color: var(--text-primary); }
.app-sidebar-logo-text { font-weight: 700; font-size: var(--text-lg); }
.app-sidebar-logo-text span { color: var(--color-primary); }
.app-sidebar-nav { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group-title {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-faint);
  padding: 4px 8px;
}
.app-sidebar .nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--text-secondary); text-decoration: none;
  font-size: var(--text-md); transition: var(--transition);
}
.app-sidebar .nav-link:hover { background: var(--bg-surface-2); }
.app-sidebar .nav-link.active { background: var(--sidebar-active-bg); color: var(--sidebar-active-fg); font-weight: 600; }
.app-sidebar .nav-link--locked { color: var(--text-faint); }
.app-sidebar-foot { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--border-subtle); padding-top: 8px; }
/* ── Sidebar Tarif-Badge ──────────────────────────────────────────────── */
.tarif-badge {
  display: block; padding: 8px 10px; margin-top: 8px; border-radius: 8px;
  background: var(--sidebar-active-bg); text-decoration: none;
}
.tarif-badge-plan { display: block; font-size: var(--text-sm); font-weight: 700; color: inherit; }
.tarif-badge-usage { display: block; font-size: var(--text-xs); opacity: .75; margin-top: 2px; }
.tarif-badge-bar { display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,.15); margin-top: 6px; overflow: hidden; }
.tarif-badge-fill { display: block; height: 100%; background: var(--color-primary); }
.tarif-badge.is-near .tarif-badge-fill { background: var(--status-warn, #D97706); }
.tarif-badge-trial { display: block; font-size: var(--text-xs); font-weight: 600; margin-top: 4px; color: var(--status-warn, #D97706); }
.tarif-badge.is-locked { outline: 1px solid var(--status-warn, #D97706); outline-offset: -1px; }

.app-topbar {
  grid-area: topbar;
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
}
.topbar-icon-btn { background: none; border: none; cursor: pointer; color: var(--text-secondary); padding: 6px; border-radius: var(--radius-sm); display: inline-flex; }
.topbar-icon-btn:hover { background: var(--bg-surface-2); }
.topbar-search { flex: 1; max-width: 420px; position: relative; }
.topbar-search-input { width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--border-default); border-radius: var(--radius-full); font-size: var(--text-base); background: var(--bg-surface-2); }
.topbar-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }

/* Karte b30cee98 (OP-8, Heiner-Entscheidung B, 2026-08-04): das fruehere
   `.tab-nav`-Segment-Control (Card 4b0b5693, AC4) ist auf die kanonische
   .tabs/.tab-Variante (Underline-Pills) konsolidiert — siehe
   docs/frontend/component-inventory.md. Dieser Kommentar ersetzt den
   frueheren ENTSCHEID-Hinweis; `.tab-nav`/`.tab-nav__item` existieren nicht
   mehr. */

/* Buchung-Erfassen-Wizard (G4/G6: Modal-Popup, schrittweise) */
.bk-wizard { max-width: 100%; }
.bk-wizard fieldset.bk-step { border: 0; margin: 0; padding: 0; min-width: 0; }
/* Schritt 4 (Details) hat die Nachunternehmer-Suche unten -> reservierte Höhe,
   damit die absolut positionierte Trefferliste (.scc__panel) nicht vom
   modal-body-overflow gekappt wird. Schritt 1-3 bleiben kompakt. */
.bk-wizard fieldset.bk-step[data-step="4"]:not([hidden]) { min-height: 320px; }
.bk-step:focus { outline: none; }
.bk-steps { display:flex; gap:10px; list-style:none; padding:0; margin:0 0 16px; flex-wrap:wrap; }
.bk-steps li { display:flex; align-items:center; gap:6px; font-size: var(--text-sm); color:var(--text-muted,#556070); }
.bk-steps li span { display:inline-flex; width:20px; height:20px; border-radius:50%; align-items:center; justify-content:center; background:var(--bg-surface-2,#eef0f2); font-weight:600; font-size: var(--text-xs); }
.bk-steps li.is-active { color:var(--text-primary); font-weight:600; }
.bk-steps li.is-active span { background:var(--color-accent-aa); color:#fff; }
/* CR-160: --ok ist NIRGENDS definiert, der #1e8449-Fallback griff also immer und
   hielt die Fuellung im Dark-Mode auf Light-Gruen fest. --color-green-light-strong
   (#0f5f2e) ist das kanonische Token und traegt weissen Text mit 7.8:1. */
.bk-steps li.is-done span { background:var(--color-green-light-strong); color:#fff; }
.bk-step__q { font-weight:600; margin:0 0 12px; padding:0; }
.bk-segment { display:flex; gap:10px; }
.bk-dir { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:12px;
  padding:10px 16px; min-height:52px; border:1px solid transparent; border-radius:var(--radius-md,10px);
  font-size: var(--text-md); font-weight:600; letter-spacing:.2px; cursor:pointer; font-family:inherit;
  transition:background var(--transition,.15s ease), border-color var(--transition,.15s ease); }
.bk-dir .ico { font-size:30px; font-weight:900; line-height:1; display:inline-block; }
.bk-dir--ein { color:#15803d; background:rgba(16,185,129,.10); border-color:rgba(16,185,129,.30); }
.bk-dir--ein:hover { background:rgba(16,185,129,.18); }
.bk-dir--aus { color:#c0392b; background:rgba(220,38,38,.08); border-color:rgba(220,38,38,.28); }
.bk-dir--aus:hover { background:rgba(220,38,38,.16); }
/* Kategorie-Schritt: Suche + Aufklapp-Akkordeon (G6) */
/* Suchfeld bleibt oben fix, während die Kategorieliste im Modal scrollt. */
.bk-search { position:sticky; top:0; z-index:2; background:var(--bg-surface); margin:0 0 14px; padding-bottom:2px; }
.bk-search input { width:100%; padding:10px 12px 10px 34px; border:1px solid var(--border-strong,#cbd5e1);
  border-radius:var(--radius-md,10px); font-size: var(--text-base); font-family:inherit; }
.bk-search input:focus { outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(var(--brand-teal-rgb),.15); }
.bk-search::before { content:""; position:absolute; left:11px; top:calc(50% - 1px); width:15px; height:15px; transform:translateY(-50%); opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23556070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat center/contain; }
.bk-hint { font-weight:400; color:var(--text-muted,#556070); }
/* Kein verschachteltes Scroll-Fenster: die Liste fließt, das Modal scrollt (kein Clipping). */
.acc { display:flex; flex-direction:column; gap:8px; margin-bottom:4px; }
.acc__group { border:1px solid var(--border-default,#e2e8f0); border-radius: var(--radius-md); overflow:hidden; }
/* Das [hidden]-Attribut muss display:flex/-block der Akkordeon-Elemente schlagen,
   sonst greift die Live-Suche/Richtungsfilterung visuell nicht. */
.bk-cat[hidden], .acc__group[hidden] { display:none !important; }
.acc__head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; cursor:pointer; background:var(--bg-surface-2,#f8fafc); user-select:none; }
.acc__head:hover { background:var(--color-primary-dim,rgba(var(--brand-teal-rgb),.10)); }
.acc__head:focus-visible { outline:2px solid var(--color-primary); outline-offset:-2px; }
.acc__title { font-size: var(--text-base); font-weight:600; display:inline-flex; align-items:center; gap:8px; }
.acc__chev { color:var(--text-muted,#556070); transition:transform var(--transition,.15s ease); display:inline-block; }
.acc__group.open .acc__chev { transform:rotate(90deg); }
.acc__head .cnt { font-size: var(--text-xs); color:var(--text-muted,#556070); background:var(--bg-surface); border:1px solid var(--border-default,#e2e8f0); border-radius:999px; padding:1px 8px; }
.acc__body { display:none; flex-direction:column; gap:6px; padding:8px; }
.acc__group.open .acc__body { display:flex; }
.bk-empty { padding:18px; text-align:center; color:var(--text-muted,#556070); font-size: var(--text-sm); }
.bk-cat__name mark { background:#ffe9a8; color:inherit; border-radius:3px; padding:0 1px; }
.bk-cat { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border-default,#e2e8f0); border-radius:8px; cursor:pointer; background:var(--bg-surface); }
.bk-cat:hover { border-color:var(--color-primary); background:var(--color-primary-dim,rgba(var(--brand-teal-rgb),.08)); }
.bk-cat.checked { border-color:var(--color-primary); background:var(--color-primary-dim,rgba(var(--brand-teal-rgb),.10)); }
.bk-cat input[type=checkbox] { width:16px; height:16px; accent-color:var(--color-primary); flex-shrink:0; }
.bk-cat__name { flex:1; }
.bk-cat__badges { display:flex; gap:6px; flex-wrap:wrap; }
.acc__counts { display:inline-flex; align-items:center; gap:4px; }
.acc__head .sel { font-size: var(--text-xs); font-weight:600; color:#fff; background:var(--color-accent-aa); border-radius:999px; padding:1px 8px; }
.bk-badge { font-size:10px; font-weight:600; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.bk-badge--umlegbar { background:#e8f5ee; color:#166534; }
.bk-badge--st-wk_sofort { background:#eaf2fb; color:#1f5790; }
.bk-badge--st-afa { background:#fff4e5; color:#8a4f0c; }
.bk-badge--st-nicht { background:#f0f0f0; color:#4b5563; }
.bk-nav { display:flex; gap:8px; margin-top:14px; }
/* Auswahl-Leiste (Schritt 2) bleibt unten fix, Liste scrollt darüber. */
.bk-selbar { display:flex; align-items:center; justify-content:space-between; gap:10px; position:sticky; bottom:0; z-index:2; background:var(--bg-surface); padding:12px 0 2px; margin-top:8px; border-top:1px solid var(--border-default,#e2e8f0); }
.bk-selcount { font-size: var(--text-sm); color:var(--text-muted,#556070); }
/* Schritt 3: Beträge je Kostenart + Summe */
.amt-row { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--border-default,#e2e8f0); border-radius:8px; margin-bottom:8px; }
.amt-row .nm { flex:1; font-weight:500; }
.amt-row .ueb { display:block; font-size: var(--text-xs); color:var(--text-muted,#556070); font-weight:400; }
.amt-row input { width:150px; padding:8px 10px; border:1px solid var(--border-strong,#cbd5e1); border-radius:var(--radius-md,10px); font-size: var(--text-base); text-align:right; font-family:inherit; }
.amt-sum { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-radius: var(--radius-md); background:var(--color-primary-dim,rgba(var(--brand-teal-rgb),.10)); border:1px solid var(--color-primary-border,rgba(var(--brand-teal-rgb),.25)); font-weight:600; margin-top:4px; }
.amt-sum .val { font-size: var(--text-lg); color:var(--color-primary-dark,#273C8E); }
/* Sanierungskosten-Zuordnung (Pro) im Details-Schritt */
.bk-sanierung { border:1px solid var(--color-primary-border,rgba(var(--brand-teal-rgb),.25)); border-radius: var(--radius-md); padding:12px 14px; margin:12px 0; background:var(--color-primary-dim,rgba(var(--brand-teal-rgb),.08)); }
.bk-sanierung__head { display:flex; align-items:center; gap:8px; }
.bk-sanierung select { width:100%; padding:8px 10px; border:1px solid var(--border-strong,#cbd5e1); border-radius:var(--radius-md,10px); font-size: var(--text-base); font-family:inherit; background:var(--bg-surface); }
.bk-sanierung select:disabled { background:var(--bg-page); color:var(--text-faint,#94a3b8); }
.bk-badge--pro { background:#fff4e5; color:#8a4f0c; font-size:10px; font-weight:700; padding:2px 8px; border-radius:999px; }
.bk-belegart { margin-top:10px; }
.bk-segment--sm { display:flex; gap:8px; }
.bk-radio { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border-default,#e2e8f0); border-radius:8px; padding:8px 12px; cursor:pointer; font-size: var(--text-base); background:var(--bg-surface); }
.bk-radio input { accent-color:var(--color-primary); }
.bk-sanierung-paywall { border:1px dashed #e4b44a; background:#fffaf0; color:#714c00; border-radius: var(--radius-md); padding:11px 13px; margin:12px 0; font-size: var(--text-sm); }

/* ── Rechnung-aufteilen-Modal (Aufteilung auf Kategorien/Ziele) ── */
#alloc-modal .modal-body { min-height:440px; overflow-y:auto; }
.alloc-chips { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:14px; }
.alloc-chip { border:1px solid var(--border-default); border-radius: var(--radius-md); padding:11px 13px; background:var(--bg-surface-2); }
.alloc-chip .lab { font-size: var(--text-xs); color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
.alloc-chip .val { font-size:17px; font-weight:700; }
.alloc-chip .val.ok { color:#1e8449; } .alloc-chip .val.bad { color:#c0392b; }
.alloc-warn { background:#fffaf0; border:1px dashed #e4b44a; color:#714c00; border-radius: var(--radius-md); padding:9px 12px; font-size: var(--text-sm); margin-bottom:12px; }
.alloc-colhead { display:grid; grid-template-columns:1.3fr 1fr 1fr .95fr 100px 28px; gap:10px; font-size: var(--text-xs); font-weight:700; color:var(--text-muted); text-transform:uppercase; padding:0 10px 6px; }
.alloc-row { display:grid; grid-template-columns:1.3fr 1fr 1fr .95fr 100px 28px; gap:10px; align-items:center; padding:9px 10px; border:1px solid var(--border-default); border-radius:9px; margin-bottom:8px; }
.alloc-row > input[type=hidden] { display:none; }
.alloc-sel { width:100%; padding:7px 9px; border:1px solid var(--border-strong); border-radius:8px; font:inherit; background:var(--bg-surface); }
.alloc-sel:disabled { background:var(--bg-page); color:var(--text-faint); }
.alloc-amt { width:100%; padding:7px 9px; border:1px solid var(--border-strong); border-radius:8px; font:inherit; text-align:right; }
.alloc-keycell { display:flex; flex-direction:column; gap:3px; min-width:0; }
.alloc-auto { font-size:9px; font-weight:700; color:var(--color-primary-dark); background:var(--color-primary-dim); border:1px solid var(--color-primary-border); border-radius:999px; padding:1px 7px; align-self:flex-start; text-transform:uppercase; letter-spacing:.03em; }
.alloc-del { border:none; background:none; cursor:pointer; color:var(--text-faint); font-size: var(--text-lg); }
.alloc-del:hover { color:#c0392b; }
.alloc-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; padding-top:12px; border-top:1px solid var(--border-default); }
/* P0b: Aufteilen-Modal Mobil-Reflow — 6-Spalten-Grid -> gestapelte Karten, kein horizontaler Overflow */
@media (max-width: 767.98px) {
  #alloc-modal .modal-body { min-height:0; }
  .alloc-chips { grid-template-columns:1fr 1fr; gap:8px; }
  .alloc-colhead { display:none; }
  .alloc-row { grid-template-columns:1fr 1fr; gap:8px 10px; padding:12px; }
  .alloc-row > .combo:first-child { grid-column:1 / -1; }   /* Kategorie volle Breite */
  .alloc-row > .alloc-del { grid-column:1 / -1; justify-self:end; font-size:18px; padding:2px 6px; }
  .alloc-foot { flex-direction:column; align-items:stretch; gap:10px; }
  .alloc-foot > span:last-child { display:flex; gap:8px; }
  .alloc-foot > span:last-child .btn { flex:1; }
}

/* Bezahlt-Quelle unter dem Status-Badge (Sollstellungen) */
.bk-status-cell { position:relative; }
/* Herkunfts-Badge-Spalte (Forderungen & Kosten): eigene, ueberschriftslose Spalte,
   in der die „Aus Vertrag"/„Aus OCR-Text erkannt"-Badges zentriert und damit
   vertikal exakt untereinander stehen. Der badge-xs-Default-Linkseitenabstand
   wird aufgehoben, damit die Zentrierung sauber ist. */
.bk-origin-cell { text-align: center; white-space: nowrap; }
.bk-origin-cell .badge { margin-left: 0; }
.bk-faelligkeit-cell { text-align: center; white-space: nowrap; }
.bk-faelligkeit-cell .badge { margin-left: 0; }
.bk-faelligkeit-link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.bk-src { display:flex; align-items:center; gap:5px; font-size: var(--text-xs); color:var(--text-muted); margin-top:6px; }
.bk-src__ico { width:16px; height:16px; border-radius:4px; display:inline-flex; align-items:center; justify-content:center; font-size:10px; }
.bk-src__ico--manu { background:#e0e7ff; color:#4338ca; }
.bk-src__ico--konto { background:#dbeafe; color:#1d4ed8; }
.bk-src__lbl { font-weight:600; }
.bk-src__i { color:var(--text-faint); }
.bk-src--pop { cursor:pointer; }
.bk-src--pop > summary { display:flex; align-items:center; gap:5px; list-style:none; cursor:pointer; }
.bk-src--pop > summary::-webkit-details-marker { display:none; }
.bk-src--pop > summary:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; border-radius:4px; }
.bk-src__pop { position:absolute; left:0; top:calc(100% + 4px); width:320px; max-width:90vw; background:var(--bg-surface);
  border:1px solid var(--border-default,#e3e8ef); border-radius: var(--radius-md); box-shadow:var(--shadow-lg); z-index:30; overflow:hidden; }
.bk-src__pop-h { padding:11px 13px; border-bottom:1px solid var(--border-default,#e3e8ef); font-weight:700; font-size:12.5px; }
.bk-src__kv { display:flex; justify-content:space-between; gap:12px; font-size: var(--text-sm); padding:6px 13px; }
.bk-src__kv span { color:var(--text-muted); }
.bk-src__kv b { font-weight:600; text-align:right; }
.bk-src__pop-f { padding:9px 13px; border-top:1px solid var(--border-default,#e3e8ef); background:var(--bg-surface-2); font-size:11.5px; color:var(--text-muted); }

.btn-add { background:var(--color-primary-dim); color:var(--color-primary-dark); border:1px solid var(--color-primary-border); }
.btn-add:hover { background:rgba(var(--brand-teal-rgb),.18); }
/* Durchsuchbare Combobox (Kategorie/Gebäude im Aufteilen-Modal) */
.combo { position:relative; }
.combo__btn { width:100%; text-align:left; padding:7px 26px 7px 9px; border:1px solid var(--border-strong); border-radius:8px; background:var(--bg-surface); font:inherit; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; position:relative; }
.combo__btn::after { content:"▾"; position:absolute; right:9px; top:50%; transform:translateY(-50%); color:var(--text-faint); font-size: var(--text-xs); }
.combo__btn.placeholder { color:var(--text-faint); }
.combo__panel { position:absolute; z-index:30; top:calc(100% + 4px); left:0; right:0; background:var(--bg-surface); border:1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow:var(--shadow-lg); padding:8px; display:none; max-height:240px; overflow:hidden; flex-direction:column; }
.combo.open .combo__panel { display:flex; }
.combo__search { position:relative; margin-bottom:6px; }
.combo__search input { width:100%; padding:7px 9px 7px 30px; border:1px solid var(--border-strong); border-radius:8px; font:inherit; }
.combo__search input:focus { outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(var(--brand-teal-rgb),.15); }
.combo__search::before { content:""; position:absolute; left:9px; top:50%; width:14px; height:14px; transform:translateY(-50%); opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23556070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat center/contain; }
.combo__list { overflow-y:auto; }
.combo__group { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); background:var(--bg-surface-2); padding:5px 9px; border-radius: var(--radius-sm); margin:6px 0 3px; }
.combo__opt { padding:7px 9px; border-radius:7px; cursor:pointer; }
.combo__opt:hover, .combo__opt.active { background:var(--color-primary-dim); color:var(--color-primary-dark); }
.combo__opt mark { background:#ffe9a8; border-radius:3px; }
.combo__empty { padding:10px; text-align:center; color:var(--text-muted); font-size: var(--text-sm); }

/* Durchsuchbare Nachunternehmer-Auswahl (Buchungs-Wizard, Schritt 4) */
.scc { position:relative; }
.scc__input { width:100%; padding:10px 12px 10px 34px; border:1px solid var(--border-strong,#cbd5e1);
  border-radius:8px; font:inherit; background:var(--bg-surface); }
.scc__input:focus { outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(var(--brand-teal-rgb),.15); }
.scc::before { content:""; position:absolute; left:11px; top:21px; width:15px; height:15px; transform:translateY(-50%); opacity:.5; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23556070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat center/contain; }
.scc__panel { position:absolute; z-index:40; top:calc(100% + 4px); left:0; right:0; background:var(--bg-surface);
  border:1px solid var(--border-strong,#cbd5e1); border-radius: var(--radius-md); box-shadow:var(--shadow-lg); overflow:hidden; display:none; }
.scc.open .scc__panel { display:block; }
.scc__list { max-height:min(340px,42vh); overflow-y:auto; }
.scc__opt { display:flex; gap:11px; align-items:flex-start; padding:10px 13px; cursor:pointer; border-top:1px solid var(--border-default,#f1f5f9); }
.scc__opt:first-child { border-top:0; }
.scc__opt:hover, .scc__opt.active { background:var(--color-primary-dim,rgba(var(--brand-teal-rgb),.08)); }
.scc__av { width:32px; height:32px; border-radius:8px; background:var(--bg-surface-2,#e2e8f0); color:var(--text-muted,#475569);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size: var(--text-sm); flex-shrink:0; }
.scc__opt.active .scc__av { background:var(--color-accent-aa); color:#fff; }
.scc__main { flex:1; min-width:0; }
.scc__nm { font-weight:700; font-size:13.5px; }
.scc__sub { font-size: var(--text-sm); color:var(--text-muted,#64748b); margin-top:2px; line-height:1.4; }
.scc__nm mark, .scc__sub mark { background:#ffe9a8; border-radius:3px; padding:0 1px; }
.scc__tags { display:inline-flex; gap:5px; flex-wrap:wrap; margin-top:5px; }
.scc__tag { font-size:10.5px; font-weight:600; background:var(--bg-surface-2,#eef2f7); color:var(--text-muted,#475569); border-radius:5px; padding:2px 7px; }
.scc__tag.hit { background:#EEF2FD; color:#273C8E; }
.scc__empty { padding:11px 13px; color:var(--text-muted,#64748b); font-size:12.5px; }
.scc__foot { padding:9px 13px; border-top:1px solid var(--border-strong,#e2e8f0); background:var(--bg-surface-2,#f8fafc); display:flex; justify-content:space-between; align-items:center; }
.scc__foot a { color:var(--color-primary-dark,#273C8E); font-weight:600; text-decoration:none; font-size: var(--text-base); }
.scc__hint { font-size: var(--text-xs); color:var(--text-faint,#94a3b8); }
.scc__chosen { display:none; align-items:center; gap:8px; margin-top:6px; font-size:12.5px; color:var(--text-muted,#475569); }
.scc__chosen.show { display:flex; }
.scc__chosen b { color:var(--text-primary); }
.scc__clear { border:1px solid var(--border-strong,#cbd5e1); background:var(--bg-surface); border-radius: var(--radius-sm); padding:1px 7px; cursor:pointer; font-size: var(--text-sm); color:var(--text-muted,#64748b); }

/* Konten-Tab: klare Banking-Arbeitsfläche (F5) */
.bank-workspace { display:flex; flex-direction:column; gap:16px; }
.bank-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; padding:18px 20px; border:1px solid var(--border-default,#e2e8f0); border-radius:var(--radius-lg,12px); background:var(--bg-surface,#fff); box-shadow:var(--shadow-sm); }
.bank-eyebrow { margin:0 0 4px; font-size: var(--text-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted,#556070); }
.bank-title { margin:0; font-size: var(--text-xl); line-height:1.2; color:var(--text-primary,#111827); }
.bank-subtitle { margin:5px 0 0; font-size: var(--text-base); color:var(--text-muted,#556070); }
.bank-hero__actions { display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
/* S5b: Neben-Aktionen dezent oben, primäres Paar (Umsätze abrufen / Bank verbinden) unten */
.bank-hero__secondary { display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.bank-hero__primary { display:flex; gap:8px; align-items:center; }
.linklike-action { background:none; border:none; padding:0; font-size: var(--text-sm); font-weight:600; color:var(--text-muted,#556070); cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.linklike-action:hover { color:var(--color-primary-dark,#273C8E); }
.linklike-action__cnt { font-size:10.5px; font-weight:700; color:var(--text-faint); }
@media (max-width: 1023.98px){ .bank-hero__actions { align-items:flex-start; } .bank-hero__secondary { justify-content:flex-start; } }
.bank-summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.bank-summary-card { display:flex; flex-direction:column; gap:4px; min-width:0; padding:14px 16px; border:1px solid var(--border-default,#e2e8f0); border-radius:var(--radius-md,10px); background:var(--bg-surface,#fff); box-shadow:var(--shadow-sm); }
.bank-summary-card span { font-size: var(--text-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted,#556070); }
.bank-summary-card strong { font-size:26px; line-height:1; color:var(--text-primary,#111827); }
.bank-summary-card small { font-size: var(--text-sm); color:var(--text-muted,#556070); }
/* KPI-Akzente (Sollstellungen: Überfällig = rot, Warnung = amber) */
.bank-summary-card--warn strong { color:#b45309; }
.bank-summary-card--danger strong { color:#b91c1c; }
/* Richtungsbewusste KPIs (S2): vier Karten + linker Farbakzent */
.bank-summary-grid--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.bank-summary-card { position:relative; overflow:hidden; }
.bank-summary-card--in::before,
.bank-summary-card--out::before,
.bank-summary-card--net::before,
.bank-summary-card--over::before,
.bank-summary-card--paid::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; }
.bank-summary-card--in::before { background:var(--color-green); }
.bank-summary-card--out::before { background:var(--color-red); }
.bank-summary-card--net::before { background:var(--color-blue); }
.bank-summary-card--over::before { background:#d97706; }
.bank-summary-card--paid::before { background:var(--brand-teal,#4F74E6); }
.bank-summary-card--in strong { color:#047857; }
.bank-summary-card--out strong { color:#b91c1c; }
.bank-summary-card--net strong { color:var(--color-blue-badge); }
.bank-summary-card--over strong { color:#b45309; }
.bank-summary-card__meta { color:var(--text-faint); }
/* Meta unten anpinnen → „Buchungen" und Datum stehen über alle 4 Karten auf
   gleicher Höhe (gleiche Ausrichtung), unabhängig von der ↳-Zeile darüber. */
.bank-summary-card__foot { margin-top:auto; display:flex; flex-direction:column; gap:2px; padding-top:6px; }
/* Jahres-Roll-up-Leiste (über den Tabs, gilt für beide Tabs) */
.year-rollup { display:flex; gap:18px; align-items:center; flex-wrap:wrap; padding:10px 16px; margin-bottom:12px; border:1px solid var(--border-default,#e2e8f0); border-radius:var(--radius-md,10px); background:var(--bg-surface,#fff); box-shadow:var(--shadow-sm); }
.year-rollup__item { display:flex; flex-direction:column; }
.year-rollup__item span { font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted,#556070); }
.year-rollup__item strong { font-size:18px; line-height:1.1; color:var(--text-primary,#111827); }
.year-rollup__item--in strong { color:#047857; }
.year-rollup__item--out strong { color:#b91c1c; }
.year-rollup__item--saldo strong { color:var(--color-primary-dark,#273C8E); }
.year-rollup__sep { width:1px; align-self:stretch; background:var(--border-default,#e2e8f0); }
.year-rollup__tag { margin-left:auto; font-size: var(--text-xs); color:var(--text-faint); }
@media (max-width: 767.98px){ .bank-summary-grid--4 { grid-template-columns:1fr 1fr; } }

/* ── Buchungen Layout (B1/B4): einheitlicher Rhythmus + zusammengelegte Köpfe ── */
/* Spacing-/Divider-Token (Karte 53aa5056): konsistente Abstände + weichere,
   seltener gesetzte Trennlinien für den Sollstellungen-/Konten-Bereich. */
.buchungen-page {
  --stack: 16px;
  --bk-pad-x: 16px;       /* horizontaler Innenabstand der Filter-/Listenzeilen */
  --bk-pad-y: 12px;       /* vertikaler Innenabstand */
  --bk-gap: 10px;         /* Abstand zwischen Filter-Controls */
  --bk-row-pad: 14px;     /* Zeilen-Innenabstand der Umsatzliste */
  --bk-divider: var(--border-subtle);  /* weiche Trennlinie statt harter Border */
}
.buchungen-page > .fin-header,
.buchungen-page > .tabs,
.buchungen-page > .bank-summary-grid,
.buchungen-page > .data-card,
.buchungen-page > .bank-workspace { margin-bottom: var(--stack); }
.buchungen-page > .tabs { margin-top: 0; }

/* B4: Titel + Jahres-KPIs in einer Karte, getrennt durch eingerückten Trennbalken */
.fin-header { background:var(--bg-surface,#fff); border:1px solid var(--border-default,#e2e8f0); border-radius:var(--radius-lg,14px); box-shadow:var(--shadow-sm); padding:18px 22px; }
.fin-header__top { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.fin-header__tag { font-size: var(--text-xs); color:var(--text-faint); white-space:nowrap; align-self:flex-end; }
.fin-sep { height:1px; background:var(--border-default,#e2e8f0); border:0; margin:14px 48px; }
.fin-kpis { display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.fin-kpi { display:flex; flex-direction:column; }
.fin-kpi span { font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted,#556070); }
.fin-kpi strong { font-size:20px; line-height:1.1; color:var(--text-primary,#111827); }
.fin-kpi--in strong { color:#047857; }
.fin-kpi--out strong { color:#b91c1c; }
.fin-kpi--saldo strong { color:var(--color-primary); }
.fin-kpi__div { width:1px; align-self:stretch; background:var(--border-default,#e2e8f0); margin:2px 0; }
@media (max-width: 767.98px){ .fin-kpis { gap:16px; } .fin-kpi__div { display:none; } }

/* B1: Karten-Kopf (Titel links, Aktionen rechts) für zusammengelegte Listenkarte */
.card-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; padding:16px 18px; border-bottom:1px solid var(--border-default,#e2e8f0); flex-wrap:wrap; }
.card-head__actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:flex-end; }
/* Abstand Suche→Tabelle == Header→Suche: der bottom-Wert (vorher 0) nullte zuvor
   das margin-bottom der Leiste und ließ Leiste+Tabelle zusammenkleben. */
.buchungen-page .card-head + .bk-filter { margin:16px 18px 16px; }

/* B7: klick-sortierbare Spaltenüberschriften */
th.sortable { padding:0; }
th.sortable > a { display:inline-flex; align-items:center; gap:5px; padding:10px 12px; color:inherit; font:inherit; text-decoration:none; white-space:nowrap; }
th.sortable > a:hover { color:var(--color-primary); }
th.sortable.num > a { justify-content:flex-end; width:100%; }
.sort-ind { font-size:10px; line-height:1; color:var(--color-primary); }
.sort-ind--idle { color:#cbd5e1; }
th.sortable.is-sorted > a { color:var(--text-primary,#111827); font-weight:700; }

.bank-panel { border:1px solid var(--border-default,#e2e8f0); border-radius:var(--radius-lg,12px); background:var(--bg-surface,#fff); box-shadow:var(--shadow-sm); overflow:hidden; }
.bank-panel__header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:15px 18px; border-bottom:1px solid var(--border-default,#e2e8f0); background:var(--bg-surface-2,#f8fafc); }
.bank-panel__header h3 { margin:0; font-size:15px; line-height:1.25; color:var(--text-primary,#111827); }
.bank-panel__header p { margin:4px 0 0; font-size: var(--text-sm); color:var(--text-muted,#556070); }
.bank-panel__header--with-action { align-items:center; }
.account-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:14px; }
.account-card { position:relative; display:flex; flex-direction:column; gap:12px; min-width:0; padding:14px; border:1px solid var(--border-default,#e2e8f0); border-radius:var(--radius-md,10px); background:var(--bg-surface); }
.account-card--connected { border-color:var(--color-green,#1e8449); background:linear-gradient(180deg,var(--color-green-dim,#e8f5ee),#fff 68%); }
.account-card__top { display:flex; align-items:flex-start; gap:11px; min-width:0; }
.account-card__icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size: var(--text-base); font-weight:700; background:var(--bg-surface-2,#f8fafc); color:var(--text-muted,#556070); flex-shrink:0; }
.account-card--connected .account-card__icon { background:var(--color-green,#1e8449); color:#fff; }
.account-card__identity { min-width:0; flex:1; }
.account-card__identity h4 { margin:0; font-size:15px; line-height:1.25; color:var(--text-primary,#111827); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-card__code { display:inline-block; margin-left:6px; padding:1px 6px; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight:600; letter-spacing:.02em; background:var(--bg-surface-2,#f1f5f9); color:var(--text-muted,#556070); vertical-align:middle; }
.account-card__identity p { margin:3px 0 0; font-size: var(--text-sm); color:var(--text-muted,#556070); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-card__meta { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0; }
.account-card__meta div { min-width:0; padding:9px 10px; border-radius:8px; background:rgba(255,255,255,.76); border:1px solid var(--border-subtle,#eef2f7); }
.account-card__meta dt { margin:0 0 2px; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted,#556070); }
.account-card__meta dd { margin:0; font-size: var(--text-sm); color:var(--text-primary,#111827); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-card__remove { margin:0; align-self:flex-end; }
.bank-filter-bar { display:grid; grid-template-columns:minmax(240px,1fr) minmax(140px,max-content) minmax(130px,max-content) minmax(120px,max-content) minmax(140px,max-content) minmax(122px,max-content) minmax(122px,max-content) auto; gap:8px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--border-default,#e2e8f0); background:var(--bg-surface); position:sticky; top:var(--topbar-height); z-index:5; }
.bank-filter-bar input,
.bank-filter-bar select { min-width:0; margin:0; height:36px; padding-top:7px; padding-bottom:7px; }
.bank-filter-bar__search { width:100%; }
.bank-filter-bar .btn { height:36px; white-space:nowrap; }
/* Gemeinsame kompakte Live-Filter-Leiste (Sollstellungen + Konten) */
/* Kompakte Live-Filterleiste: GRID erzwingt eine Zeile mit definierten Spalten.
   (Flexbox scheiterte, weil globales select{width:100%} jede Control auf volle Breite
   zog → Umbruch zu gestapelten Zeilen. Grid-Tracks ignorieren width:100%.) */
.bk-filter { display:grid; gap:var(--bk-gap); align-items:center; padding:var(--bk-pad-y) var(--bk-pad-x); margin-bottom:var(--stack);
  grid-template-columns:minmax(200px,1fr) minmax(120px,max-content) minmax(150px,max-content) max-content;
  border:1px solid var(--border-default,#e2e8f0); border-radius:var(--radius-md,10px); background:var(--bg-surface); box-shadow:var(--shadow-sm); }
/* Konten-Leiste: obere Zeile = Filter-Selects, Jahresauswahl rechts (1fr-Spur +
   justify-self:end); die Verwendungszweck-Suche liegt als eigene volle Zeile
   darunter (grid-column:1/-1), nicht mehr breit oben. */
.bk-filter--konten { grid-template-columns:minmax(120px,max-content) minmax(110px,max-content) minmax(110px,max-content) minmax(100px,max-content) minmax(130px,max-content) minmax(120px,max-content) 1fr; }
.bk-filter--konten .bk-filter__search { grid-column:1 / -1; }
.bk-filter input,
.bk-filter select { width:100%; min-width:0; margin:0; height:36px; padding:7px 10px; border:1px solid var(--border-default,#e2e8f0); border-radius:8px; background:var(--bg-surface); font-size: var(--text-base); color:var(--text-primary,#0f172a); }
.bk-filter__search { width:100%; }
.bk-filter .btn { height:36px; white-space:nowrap; width:auto; }
.bk-filter__hint { justify-self:end; font-size: var(--text-xs); color:var(--text-muted,#94a3b8); white-space:nowrap; }
/* Geschäftsjahr-Switcher (Karte 53aa5056): abgesetztes Teal-Segment ganz rechts,
   durch senkrechten Trenner vom Status/Zeitraum-Filter getrennt. */
.bk-yearsw-wrap { justify-self:end; display:flex; align-items:center; gap:10px; }
.bk-yearsw-wrap .bk-divider-v { width:1px; align-self:stretch; min-height:32px; background:var(--border-default,#e2e8f0); margin:0 2px; }
.bk-yearsw-col { display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.bk-yearsw { display:flex; align-items:center; gap:2px; background:var(--color-primary); border-radius: var(--radius-md); padding:3px; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.bk-yearsw--muted { opacity:.55; }
.bk-yearsw__lbl { color:#EEF2FD; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:0 8px; }
.bk-yearsw__nav { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:7px; background:rgba(255,255,255,.18); color:#fff; text-decoration:none; font-size: var(--text-lg); line-height:1; border:none; cursor:pointer; transition:background .12s; }
.bk-yearsw__nav:hover { background:rgba(255,255,255,.34); color:#fff; }
.bk-yearsw__nav--off { opacity:.35; pointer-events:none; }
.bk-yearsw__yr { color:#fff; font-weight:800; font-size: var(--text-md); min-width:54px; text-align:center; font-variant-numeric:tabular-nums; }
/* Karte 03897aa0 (#3.4): Intervall-Labels wie „Juli 2026“ brauchen mehr Platz als
   eine vierstellige Jahreszahl — gleicher Pill-Stil, nur breiter. */
.bk-yearsw__yr--wide { min-width: auto; padding: 0 var(--space-2); white-space: nowrap; }
.bk-yearsw__all,
.bk-yearsw__clear { font-size: var(--text-xs); color:var(--text-muted,#94a3b8); text-decoration:none; }
.bk-yearsw__all:hover,
.bk-yearsw__clear:hover { color:var(--color-primary); text-decoration:underline; }
.bk-yearsw__all.is-active { color:var(--color-primary); font-weight:700; }
@media (max-width: 1023.98px) {
  .bk-yearsw-wrap { grid-column:1 / -1; justify-self:start; }
  .bk-yearsw-wrap .bk-divider-v { display:none; }
  .bk-yearsw-col { align-items:flex-start; }
}
.bk-daterange { display:none; grid-column:1 / -1; gap:8px; align-items:center; padding-top:2px; }
.bk-daterange.is-open { display:flex; }
.bk-daterange label { font-size: var(--text-sm); font-weight:600; color:var(--text-muted,#556070); }
.bk-daterange input { width:auto; }
/* Karte bug-ac3-zeitraum-default-2026-07-30: Hinweis, wenn die aktive Zeitachse
   Treffer ausblendet (bisher ersatzlos verschwunden). */
.bk-period-hidden { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap: var(--space-3); margin: var(--space-2) 0; padding: var(--space-2) var(--space-3); border:1px solid var(--status-warn); border-radius: var(--radius-md); background: var(--status-warn-dim); color: var(--text-primary); font-size: var(--text-sm); }
.bk-period-hidden__clear { color: var(--color-primary); text-decoration:none; font-weight:600; }
.bk-period-hidden__clear:hover { text-decoration:underline; }
@media (max-width: 1023.98px) {
  .bk-filter, .bk-filter--konten { grid-template-columns:1fr 1fr; }
  .bk-filter__hint { display:none; }
}
@media (max-width: 479.98px) {
  .bk-filter, .bk-filter--konten { grid-template-columns:1fr; }
}
.transaction-list { display:flex; flex-direction:column; }
.transaction-head { display:grid; grid-template-columns:28px 70px minmax(220px,1fr) minmax(110px,max-content) minmax(104px,max-content) auto; gap:14px; align-items:center; padding:10px var(--bk-pad-x); border-top:1px solid var(--bk-divider); border-bottom:1px solid var(--bk-divider); background:var(--bg-surface-2,#f8fafc); font-size: var(--text-xs); text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted,#556070); }
.transaction-sort { display:inline-flex; align-items:center; gap:5px; color:inherit; text-decoration:none; font:inherit; font-weight:700; white-space:nowrap; }
.transaction-sort span { font-size:10px; color:var(--text-faint,#94a3b8); }
.transaction-sort:hover { color:var(--color-primary); }
.transaction-sort.is-sorted { color:var(--text-primary,#111827); }
.transaction-sort.is-sorted span { color:var(--color-primary); }
.transaction-sort--right { justify-content:flex-end; width:100%; }
.transaction-item { display:grid; grid-template-columns:28px 70px minmax(220px,1fr) minmax(110px,max-content) minmax(104px,max-content) auto; gap:14px; align-items:center; padding:var(--bk-row-pad) var(--bk-pad-x); border-bottom:1px solid var(--bk-divider); }
.transaction-item__select { display:flex; align-items:center; justify-content:center; }
.bulk-actions { display:flex; justify-content:flex-end; gap:8px; padding:8px var(--bk-pad-x); }
.transaction-item:last-child { border-bottom:none; }
.transaction-item:hover { background:rgba(var(--brand-teal-rgb),.035); }
.transaction-item--open { box-shadow:inset 3px 0 0 var(--color-gold,#b7791f); }
.transaction-item__date { display:flex; flex-direction:column; gap:1px; color:var(--text-muted,#556070); }
.transaction-item__date strong { font-size: var(--text-md); color:var(--text-primary,#111827); }
.transaction-item__date span { font-size: var(--text-xs); }
.transaction-item__main { min-width:0; }
.transaction-item__title { font-weight:650; font-size: var(--text-md); color:var(--text-primary,#111827); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.transaction-item__meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:3px; font-size: var(--text-sm); color:var(--text-muted,#556070); }
.transaction-item__meta span + span::before { content:"·"; margin-right:8px; color:var(--text-faint,#94a3b8); }
.transaction-item__amount { font-size: var(--text-md); font-weight:750; text-align:right; white-space:nowrap; }
.transaction-item__status { white-space:nowrap; }
.transaction-item__actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
/* Status-Badge als Trigger für das Zuordnungs-Modal */
.badge--btn { cursor:pointer; border:1px solid transparent; font-family:inherit; transition:filter var(--transition), box-shadow var(--transition); }
.badge--btn.badge-warn { border-color:#f0d49a; }
.badge--btn.badge-ok { border-color:#bfe6d2; }
.badge--btn:hover { filter:brightness(.97); box-shadow:0 0 0 2px rgba(0,0,0,.05); }
/* Kandidaten-Zeile im Zuordnungs-Modal */
/* Inline-Bestätigung im Zuordnungs-Modal (UX-Redesign 5546364b, AC1/AC5) */
.tx-modal__confirm { margin:12px 22px 0; padding:9px 12px; border-radius:9px; border:1px solid #bfe6d2; background:var(--bg-surface-2,#f8fafc); color:var(--text-primary,#111827); font-size: var(--text-base); }
.match-candidate { display:flex; justify-content:space-between; align-items:center; gap:12px; border:1px solid var(--border-default); border-radius:9px; padding:10px 12px; margin-bottom:8px; }
.match-candidate__action { display:flex; align-items:center; gap:10px; white-space:nowrap; }
/* Heiner-Feedback tx-v2 (Punkt 2): „Buchung anlegen" + „Vertrag anlegen" als zwei
   visuell identische Buttons in einer rechtsbuendigen Zeile; das Buchungs-Formular
   klappt in voller Breite darunter auf. Der <summary> traegt die Button-Zeile, der
   Default-Marker wird entfernt. */
.tx-create { margin-top:0; }
/* Right-align fix: <details class="tx-create form-reveal"> — .form-reveal summary
   {display:inline-block} (later, equal specificity) sonst schlaegt .tx-create >
   summary {display:flex}, wodurch u-justify-end verpufft. Hoehere Spezifitaet
   (.tx-create.form-reveal) erzwingt den Flex-Container + Rechtsbuendigkeit. */
.tx-create > summary,
.tx-create.form-reveal > summary { display:flex; justify-content:flex-end; align-items:center; list-style:none; cursor:pointer; }
.tx-create > summary::-webkit-details-marker { display:none; }
.tx-create > summary:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; border-radius:8px; }
.tx-create__trigger { user-select:none; }
.tx-create .form-reveal__body { margin-top:12px; }
.bank-secondary-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
.bank-secondary-grid .form-actions-row { padding:14px; margin:0; }
.bank-secondary-grid .chip-list,
.bank-secondary-grid .text-muted { margin:14px; }
.bank-secondary-grid .form-reveal { margin:14px; }
.bank-secondary-grid .form-actions-row .form-reveal { margin:0; }

@media (max-width: 1279.98px) {
  .account-grid,
  .bank-secondary-grid { grid-template-columns:1fr; }
  .bank-filter-bar { grid-template-columns:minmax(220px,1fr) repeat(3,minmax(118px,1fr)) auto; }
  .transaction-item { grid-template-columns:28px 64px minmax(180px,1fr) minmax(104px,max-content) auto; }
  .transaction-head { grid-template-columns:28px 64px minmax(180px,1fr) minmax(104px,max-content) auto; }
  .transaction-head a:nth-child(5),
  .transaction-head span:last-child { display:none; }
  .transaction-item__status { grid-column:3 / 4; }
}

@media (max-width: 767.98px) {
  .bank-hero { align-items:stretch; flex-direction:column; }
  .bank-hero__actions { justify-content:flex-start; }
  .bank-summary-grid { grid-template-columns:1fr; }
  .account-card__meta { grid-template-columns:1fr; }
  .bank-panel__header--with-action { align-items:flex-start; flex-direction:column; }
  .bank-filter-bar { grid-template-columns:1fr 1fr; position:static; }
  .bank-filter-bar__search,
  .bank-filter-bar .btn { grid-column:1 / -1; width:100%; }
  .bank-filter-bar select,
  .bank-filter-bar input[type="date"] { width:100%; }
  .transaction-item { grid-template-columns:28px 54px minmax(0,1fr); gap:8px 12px; align-items:start; }
  .transaction-head { grid-template-columns:28px 54px minmax(0,1fr); gap:8px 12px; align-items:start; }
  .transaction-head a:nth-child(n+4),
  .transaction-head span:last-child { display:none; }
  .transaction-item__amount { grid-column:3; text-align:left; }
  .transaction-item__status { grid-column:3; }
  .transaction-item__actions { grid-column:1 / -1; justify-content:flex-start; }
  .transaction-item__select { align-items:flex-start; }
}
.bk-bank-search { width:100%; padding:9px 11px; border:1px solid var(--border-default,#e2e8f0); border-radius:8px; margin-bottom:10px; font-size: var(--text-md); }
.bk-bank-list { display:flex; flex-direction:column; gap:6px; max-height:320px; overflow:auto; }
.bk-bank { display:flex; align-items:center; gap:12px; border:1px solid var(--border-default,#e2e8f0); border-radius:8px; padding:9px 12px; cursor:pointer; }
.bk-bank:hover { border-color:var(--accent); background:var(--bg-surface-2,#f8fafc); }
.bk-bank:has(input:checked) { border-color:var(--accent); background:#e8f5ee; }
.bk-bank input { margin:0; }
.bk-bank__ico { width:30px; height:30px; border-radius:7px; background:var(--bg-surface-2,#f8fafc); display:flex; align-items:center; justify-content:center; font-weight:700; font-size: var(--text-sm); color:var(--text-muted,#556070); }
.bk-bank__name { font-weight:600; }

/* Global search dropdown (D1) */
.topbar-search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  z-index: 50; max-height: 70vh; overflow-y: auto;
}
.topbar-search-results:empty { display: none; }
.search-hit-list { list-style: none; margin: 0; padding: 0; }
.search-hit-group + .search-hit-group { margin-top: 4px; border-top: 1px solid var(--border-default); padding-top: 4px; }
.search-hit-group > ul { list-style: none; margin: 0; padding: 0; }
.search-hit-group-title { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 6px 10px 2px; }
.search-hit {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 8px 10px; border-radius: var(--radius-sm);
  text-decoration: none; color: var(--text-secondary);
  transition: background var(--transition);
}
.search-hit:hover { background: var(--bg-surface-2); color: var(--text-primary); text-decoration: none; }
.search-hit-main { display: flex; flex-direction: column; min-width: 0; }
.search-hit-label { font-size: var(--text-base); font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-hit-sub { font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-hit-kind { flex-shrink: 0; font-size: 10px; font-weight: 600; color: var(--text-muted); background: var(--bg-surface-2); border: 1px solid var(--border-default); border-radius: var(--radius-full); padding: 2px 8px; }
.search-hit-empty { padding: 12px; font-size: var(--text-base); color: var(--text-muted); text-align: center; }

body.app-shell > .main { grid-area: main; width: auto; max-width: none; margin: 0; border-radius: 0; background: var(--bg-page); padding: 20px; overflow-y: auto; }
/* Footer braucht eine eigene Grid-Area, sonst landet er ungeplatziert in der
   Sidebar-Spalte unter dem Fold und Impressum/Datenschutz sind nicht sichtbar. */
body.app-shell > .site-footer { grid-area: footer; }

/* Collapsed rail: hide labels + group titles + logo text */
body.app-shell.sidebar-collapsed .nav-label,
body.app-shell.sidebar-collapsed .nav-group-title,
body.app-shell.sidebar-collapsed .app-sidebar-logo-text,
body.app-shell.sidebar-collapsed .tarif-badge-plan,
body.app-shell.sidebar-collapsed .tarif-badge-trial,
body.app-shell.sidebar-collapsed .tarif-badge-usage { display: none; }
body.app-shell.sidebar-collapsed .app-sidebar .nav-link { justify-content: center; }

.sidebar-scrim { display: none; }

/* Tablet/desktop: auto-collapse to rail below 1280px */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  body.app-shell { grid-template-columns: var(--sidebar-rail); }
  body.app-shell .nav-label,
  body.app-shell .nav-group-title,
  body.app-shell .app-sidebar-logo-text,
  body.app-shell .tarif-badge-plan,
  body.app-shell .tarif-badge-trial,
  body.app-shell .tarif-badge-usage { display: none; }
  body.app-shell .app-sidebar .nav-link { justify-content: center; }
}

/* Mobile: sidebar becomes off-canvas drawer; main spans full width */
@media (max-width: 1023.98px) {
  body.app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-height) 1fr auto;
    grid-template-areas: "topbar" "main" "footer";
  }
  .app-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--sidebar-width); z-index: 1100;
    transform: translateX(-100%); transition: transform .2s ease;
  }
  body.app-shell.sidebar-drawer-open .app-sidebar { transform: translateX(0); }
  body.app-shell.sidebar-drawer-open .sidebar-scrim {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1050;
  }
}

/* ── Paywall / Pro value page ─────────────────────────────────────────── */
.paywall { max-width: 920px; margin: 0 auto; padding: 8px 0 40px; }
.paywall-head { text-align: center; margin-bottom: 28px; }
.paywall-eyebrow {
  display: inline-block; font-size: var(--text-sm); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--color-primary);
  background: var(--color-primary-dim, rgba(var(--brand-teal-rgb),.1));
  padding: 4px 10px; border-radius: 999px; margin-bottom: 12px;
}
.paywall-head h1 { font-size: 26px; font-weight: 800; margin: 0 0 8px; }
.paywall-sub { color: var(--text-secondary); max-width: 560px; margin: 0 auto; line-height: 1.6; }
.paywall-grid { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
.paywall-modules { display: flex; flex-direction: column; gap: 10px; }
.paywall-module {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.paywall-module.is-trigger { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary) inset; }
.paywall-module-icon { font-size: 18px; line-height: 1.4; }
.paywall-module-title { font-weight: 700; font-size: var(--text-md); }
.paywall-module-desc { color: var(--text-secondary); font-size: var(--text-base); line-height: 1.5; }
.paywall-card {
  position: sticky; top: 16px; border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: 18px; background: var(--bg-surface); box-shadow: var(--shadow-sm);
}
.paywall-preview-features {
  list-style: none; margin: 0 0 16px; padding: 12px 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--color-primary-dim, rgba(var(--brand-teal-rgb),.12)), rgba(var(--brand-teal-rgb),.04));
  display: flex; flex-direction: column; gap: 8px;
}
.paywall-preview-feature {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-base); line-height: 1.4; color: var(--text-secondary);
}
.paywall-preview-icon { flex: 0 0 auto; color: var(--color-primary); }
.paywall-price { display: flex; align-items: baseline; gap: 4px; }
.paywall-price-amount { font-size: var(--text-2xl); font-weight: 800; }
.paywall-price-period { color: var(--text-secondary); font-size: var(--text-md); }
.paywall-price-note { color: var(--text-secondary); font-size: var(--text-sm); margin: 4px 0 16px; }
.paywall-cta { width: 100%; justify-content: center; }
.paywall-hint { color: var(--text-secondary); font-size: var(--text-sm); margin-top: 10px; text-align: center; }
@media (max-width: 1023.98px) {
  .paywall-grid { grid-template-columns: 1fr; }
  .paywall-card { position: static; }
}

/* ── Units usage bar ──────────────────────────────────────────────────── */
.unit-usage { margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); }
.unit-usage-row { display: flex; justify-content: space-between; align-items: baseline; }
.unit-usage-label { font-size: var(--text-base); font-weight: 600; }
.unit-usage-count { font-size: var(--text-base); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.unit-usage-bar { height: 6px; border-radius: 3px; background: var(--border-default); margin-top: 8px; overflow: hidden; }
.unit-usage-fill { display: block; height: 100%; background: var(--color-primary); }
.unit-usage.is-near .unit-usage-fill { background: var(--status-warn, #D97706); }
.obligations-teaser__text { max-width: 60ch; margin: 0 auto 12px; }
.unit-usage-hint { font-size: var(--text-sm); color: var(--text-secondary); margin: 8px 0 0; }
.unit-usage-hint a { color: var(--color-primary); }
/* C3 Frühwarnung — amber near-limit strip above the usage bar */
.unit-usage-warning { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; padding: 10px 14px; border: 1px solid var(--status-warn); border-left-width: 4px; border-radius: var(--radius-md); background: var(--status-warn-dim); }
.unit-usage-warning-icon { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: var(--status-warn); }
.unit-usage-warning-body { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.unit-usage-warning-text { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); }
.unit-usage-warning-cta { font-size: var(--text-base); font-weight: 600; color: var(--status-warn); text-decoration: underline; white-space: nowrap; }
.unit-usage-warning-cta:hover { color: var(--status-warn); text-decoration: none; }

/* ---- Dashboard (MR3) ---- */
.dashboard { display: flex; flex-direction: column; gap: 20px; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.kpi-grid .stat-card { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; }
.stat-card__value { font-size: var(--text-2xl); font-weight: 700; color: var(--color-primary); }
.stat-card__label { font-size: var(--text-sm); color: var(--text-secondary); }
.stat-card__usage { font-size: var(--text-xs); color: var(--text-secondary); }
.usage-bar { display: block; height: 6px; background: var(--border-default); border-radius: 3px; overflow: hidden; }
.usage-bar__fill { display: block; height: 100%; background: var(--color-primary); }
.usage-bar__fill.is-near { background: var(--status-warn); }
.dashboard-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1023.98px) { .dashboard-cols { grid-template-columns: 1fr; } }
.dashboard-panel { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 16px; }
.dashboard-panel__title { font-size: var(--text-lg); margin: 0 0 12px; }
.cockpit-list, .feed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cockpit-item, .feed-item { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-default); font-size: var(--text-base); }
.cockpit-item__due, .feed-item__when { color: var(--text-secondary); font-size: var(--text-sm); white-space: nowrap; }
.cockpit-teaser { text-align: center; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cockpit-teaser__lock { font-size: var(--text-2xl); }

/* ---- MR-A table toolkit ---- */
.table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-surface, #1a1a2e);
}
.table-select-col { width: 36px; text-align: center; }
.table-select-col input { margin: 0; cursor: pointer; }

.bulk-bar {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md, 6px);
  background: var(--bg-surface, #1a1a2e);
}
.bulk-bar.is-active { display: flex; }
.bulk-bar__count { font-size: var(--text-base); font-weight: 600; }

.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-size: var(--text-sm);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  color: var(--text-muted);
  text-decoration: none;
}
.filter-chip:hover { color: var(--text-primary); }
.filter-chip__x { font-weight: 700; opacity: .6; }
.filter-chip:hover .filter-chip__x { opacity: 1; }

/* ── MR-B: unified form field error / help ── */
.field-error {
  color: var(--color-red);
  font-size: var(--text-sm);
  margin-top: 4px;
}
.field-help {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-top: 4px;
}
.form-errors {
  color: var(--color-red);
  font-size: var(--text-base);
  margin: 0 0 8px;
  padding: 8px 11px;
  border: 1px solid var(--color-red);
  border-radius: var(--radius-md);
  background: var(--focus-ring-red);
}
.form-errors:empty { display: none; }

/* ── B6: zentrale Modal-Pflichtfeld-Validierung (auto-injiziertes Banner) ── */
.modal-form-errors[hidden] { display: none; }
.modal-form-errors { margin: 0 0 16px; }
.modal-form-errors ul { margin: 0; padding-left: 18px; }
.field.has-error label,
.form-group.has-error label { color: var(--color-red); }

/* ── Dashboard header band (MR-E) ── */
.dashboard-header {
  padding: 20px 24px; border-radius: var(--radius-lg,14px); margin-bottom:16px;
  background: linear-gradient(120deg, rgba(var(--brand-teal-rgb),.08), rgba(var(--brand-teal-rgb),0) 60%), var(--bg-surface,#fff);
  border: 1px solid var(--border-default,#e2e8f0);
}

/* ── Onboarding banner illustration (MR-E) ── */
.onboarding-banner__art { width:64px; height:auto; flex:0 0 auto; }

/* ── NK-Abrechnung detail section ── */
.nk-section-card { margin-bottom: 16px; }
.nk-table-mb { margin-bottom: 12px; }
.nk-form-card { max-width: 600px; }
.nk-form-field { margin-bottom: 12px; }
.nk-form-actions { display: flex; gap: 8px; margin-top: 16px; }
/* Akte-Import-Wizard Footer (Karte e32a279c, QA-FAIL L1/L3): Aktionszeile als
   Flex-Container analog Klickdummy .actions — 'Zurueck' links, Primaer-CTA rechts.
   OP-3 (Nightly Review 2026-07-23, Heiner-Entscheidung): NICHT global — die Regel
   ist auf den Akte-/Finanz-Wizard gescopt (Klasse .wizard-actions), damit keine
   bestehenden Formulare ungewollt restyled werden. */
.wizard-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.wizard-actions--end { justify-content: flex-end; }
.nk-details-summary { padding: 14px; cursor: pointer; }
.nk-receipt-item-section { border-top: 1px solid var(--border-default); padding-top: 12px; margin-bottom: 12px; }
.form-reveal__grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.nk-preview-action { margin-bottom: 16px; }
.nk-preview-action #nk-preview { margin-top: 12px; }
.nk-booking-unmapped { opacity: 0.55; }
.nk-mapped-indicator { font-size: var(--text-sm); }

/* ── Paywall Pro-teaser media (MR-E) ── */
.paywall-teaser { margin: 16px 0; border-radius: var(--radius-lg,14px); overflow:hidden; border:1px solid var(--border-default,#e2e8f0); }
.paywall-teaser__video, .paywall-teaser__img { width:100%; height:auto; display:block; }

/* ── Text color + size utilities ── */
.text-danger  { color: var(--color-red); }
.text-success { color: var(--color-green); }
.text-muted   { color: var(--text-muted); }
.text-sm      { font-size: var(--text-sm); }
.text-xs      { font-size: var(--text-xs); }

/* ── Table action cell ── */
td.actions { text-align: right; white-space: normal; }
td.actions > *, td.actions form > .btn { margin: 2px 0 2px 6px; vertical-align: middle; }

/* ── Inline form helpers (match/unmatch in tables) ── */
.form-inline { display: inline; }
.form-inline-row { display: inline-flex; gap: 6px; align-items: center; }
.select-sm { font-size: var(--text-sm); padding: 2px 4px; }
.btn-xs { font-size: var(--text-xs); padding: 2px 8px; }
.badge-xs { font-size: 10px; margin-left: 4px; }

/* ── Form-reveal (expandable form inside <details>) ── */
.form-reveal { margin-top: 8px; }
.form-reveal summary {
  cursor: pointer;
  display: inline-block;
}
.form-reveal__body {
  margin-top: 16px;
  padding: 16px;
  background: var(--bg-surface-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
}
.form-reveal__grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.form-reveal__grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.form-field-label {
  display: block;
  font-weight: 500;
  font-size: var(--text-sm);
  margin-bottom: 4px;
}
.form-field-errors {
  color: var(--color-red);
  font-size: var(--text-xs);
  margin: 2px 0 0;
  padding-left: 14px;
}

/* ── Buchungen / Matching-Regeln patterns ── */
.data-card-subtitle { font-size: var(--text-base); color: var(--text-muted); }
.condition-row { display: flex; gap: 4px; align-items: baseline; margin-bottom: 2px; }
.input-full { width: 100%; box-sizing: border-box; }
.input-sm  { font-size: var(--text-base); }
.pattern-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 80px 60px;
  gap: 12px;
  margin-bottom: 16px;
  align-items: end;
}
.pattern-form-active { padding-top: 18px; }
.form-field-label--checkbox { display: flex; align-items: center; gap: 4px; }
.pattern-conditions-block { margin-bottom: 12px; }
.pattern-condition-row {
  display: grid;
  grid-template-columns: 160px 160px 1fr 32px;
  gap: 8px;
  margin-bottom: 6px;
  align-items: center;
}

/* ── Reporting: Track Record entries ── */
.track-record-entry { margin-bottom: 8px; }
.track-record-entry__summary { cursor: pointer; padding: 12px; font-weight: 600; }

/* ── Buchungen: Pattern edit page layout ── */
.breadcrumb-link { color: inherit; text-decoration: none; }
.pattern-edit-grid { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
.pattern-meta-row { display: flex; gap: 16px; align-items: center; padding-top: 20px; }
.pattern-edit-actions { display: flex; gap: 10px; align-items: center; }
.pattern-delete-form { margin-left: auto; display: inline; }
.pattern-test-count { font-size: var(--text-base); margin-bottom: 10px; }
.pattern-test-results { margin-top: 12px; font-size: var(--text-sm); }
.pattern-test-header { font-weight: 500; margin-bottom: 8px; }
.pattern-test-row { padding: 6px 0; border-bottom: 1px solid var(--border-default); }
.pattern-test-ref { font-weight: 500; }

/* ── NK-Abrechnung preview / result partial ── */
.nk-heating-breakdown { margin-top: 8px; }
.nk-breakdown-title { margin: 0 0 8px; font-size: var(--text-sm); font-weight: 600; }
.nk-breakdown-table { width: 100%; font-size: var(--text-sm); }
.nk-breakdown-subtotal { border-top: 1px solid var(--border-default); }
.nk-preview-block { margin-top: 8px; }
.section-subhead-inline { margin: 0 0 8px; font-size: var(--text-sm); font-weight: 600; }
.nk-notice-block { margin-top: 12px; }
.nk-notice-list { margin: 6px 0 0; padding-left: 16px; font-size: var(--text-xs); }
.nk-vacancy-notice { margin-top: 8px; font-size: var(--text-xs); }

/* ── Pricing page (T6) ── */
.pricing {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}
.pricing > h1 {
  font-size: var(--text-2xl, 1.5rem);
  font-weight: 700;
  margin: 0 0 8px;
}
.pricing > p {
  color: var(--text-secondary, var(--text-muted));
  margin: 0 0 32px;
}
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.pricing-grid--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 680px;
}
@media (max-width: 767.98px) {
  .pricing-grid { grid-template-columns: 1fr; }
}
.plan-card {
  border: 1px solid var(--border-default, #e2e8f0);
  border-radius: var(--radius-lg, 14px);
  padding: 28px 24px;
  background: var(--bg-surface, #fff);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.plan-card h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 8px;
}
.plan-card .price {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-primary-dark, #273C8E);
  margin: 0 0 16px;
  line-height: 1.1;
}
.plan-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  font-size: 0.875rem;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plan-card ul li::before { content: "✓ "; color: var(--color-primary-dark, #273C8E); font-weight: 700; }
.plan-card .current {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary-dark, #273C8E);
  background: color-mix(in srgb, var(--color-primary, #4F74E6) 10%, transparent);
  border-radius: 99px;
  padding: 3px 10px;
  display: inline-block;
  margin-bottom: 12px;
}
.plan-card .hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
}
.plan-card--pro {
  border-color: var(--color-primary, #4F74E6);
  border-width: 2px;
  background: color-mix(in srgb, var(--color-primary, #4F74E6) 4%, var(--bg-surface, #fff));
}
.plan-card--pro h2 { color: var(--color-primary-dark, #273C8E); }
.plan-card--pro .btn { margin-top: auto; }
.plan-card__sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: -8px 0 16px;
}
.plan-card__ladder {
  border-top: 1px solid var(--border-default, #e2e8f0);
  margin: 4px 0 20px;
  padding-top: 14px;
}
.plan-card__ladder-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  margin: 0 0 8px;
}
.plan-card__ladder-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
}
.plan-card__ladder-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.plan-card__ladder-list li::before { content: none; }
.plan-card__ladder-units { color: var(--text-secondary); }
.plan-card__ladder-price { font-weight: 700; }
.plan-card--b2b {
  border-color: var(--border-strong, var(--border-default, #e2e8f0));
}
.plan-card--b2b h2 { color: var(--text-primary); }
.plan-card--b2b .btn { margin-top: auto; }

/* ============================================================
   Marketing / Sales Page + Wissens-Hub (mk-*)
   Erbt Design-Tokens (Farben, Spacing, Radius, Schatten, Typo).
   ============================================================ */
.mk{color:var(--text-primary)}
.mk-wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.mk section,.mk-section{padding:68px 0}
/* Eyebrow groesser + fetter (Karte 8e8d2c51 Franca-Delta: .82rem->1rem, 700->800). */
.mk-eyebrow{color:var(--color-primary);font-weight:800;font-size:1rem;letter-spacing:.6px;text-transform:uppercase}
.mk h1,.mk-h1{font-size:clamp(30px,5vw,46px);line-height:1.1;font-weight:800;letter-spacing:-1px}
.mk-h2{font-size:clamp(24px,3.4vw,32px);font-weight:800;letter-spacing:-.5px;margin-bottom:10px}
.mk-lead{font-size:clamp(16px,2.2vw,19px);color:var(--text-secondary)}
.mk-muted{color:var(--text-muted)}
.mk-btn-lg{padding:14px 28px;font-size: var(--text-lg)}
.mk-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
/* hero */
.mk-hero{background:linear-gradient(180deg,var(--bg-surface) 0%,var(--bg-surface-2) 100%)}
.mk-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.mk-trust-strip{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;color:var(--text-muted);font-size: var(--text-base);font-weight:600}
.mk-trust-strip span{display:inline-flex;align-items:center;gap:6px}
.mk-shot{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.mk-shot__top{height:34px;background:var(--bg-header);display:flex;align-items:center;gap:6px;padding:0 12px}
.mk-shot__top i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.55)}
.mk-shot__body{padding:16px;display:grid;grid-template-columns:54px 1fr;gap:12px;min-height:230px}.mk-shot__body:has(.mk-shot__img){display:flex;justify-content:center;align-items:center;padding:0;grid-template-columns:unset;gap:0;min-height:unset}
.mk-shot__img{width:100%;height:auto;display:block;border-radius:4px}
.mk-shot__side{background:var(--bg-surface-2);border-radius:8px}
.mk-shot__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}
.mk-shot__kpi{background:var(--bg-surface-2);border:1px solid var(--border-subtle);border-radius:8px;padding:10px}
.mk-shot__kpi b{font-size:18px;color:var(--color-primary)}.mk-shot__kpi span{font-size:10px;color:var(--text-muted)}
.mk-shot__bar{height:11px;border-radius:5px;background:var(--bg-surface-2);margin-top:8px}
.mk-shot__bar--lg{height:62px}
/* pain/pleasure */
.mk-cmp{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:30px}
.mk-col{border-radius:var(--radius-lg);padding:26px;border:1px solid var(--border-default)}
.mk-col--pain{background:#fef6f6;border-color:#f6dada}
.mk-col--gain{background:var(--color-primary-dim);border-color:var(--color-primary-border)}
.mk-col h3{font-size:17px;margin-bottom:14px}
.mk-col ul{list-style:none;display:flex;flex-direction:column;gap:11px;padding:0;margin:0}
.mk-col li{display:flex;gap:10px;font-size:15px;color:var(--text-secondary)}
.mk-ic{flex:0 0 22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size: var(--text-sm);font-weight:800;color:#fff}
.mk-col--pain .mk-ic{background:var(--color-red)}.mk-col--gain .mk-ic{background:var(--color-green)}
/* features */
.mk-band{background:var(--bg-surface-2);border-top:1px solid var(--border-default);border-bottom:1px solid var(--border-default)}
.mk-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.mk-feat{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm)}
.mk-feat__ic{width:42px;height:42px;border-radius:11px;background:var(--color-primary-dim);color:var(--color-primary);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:14px}
.mk-feat h4{font-size: var(--text-lg);margin-bottom:6px}.mk-feat p{font-size: var(--text-md);color:var(--text-muted)}
/* trust grid */
.mk-trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:26px}
.mk-tcard{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:20px;text-align:center}
.mk-tcard .em{font-size:24px}.mk-tcard b{display:block;margin-top:8px;font-size: var(--text-md)}
.mk-tcard span{font-size:12.5px;color:var(--text-muted)}
/* cluster grid */
.mk-cluster-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px}
.mk-cluster{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-sm)}
.mk-cluster__ic{font-size:26px;margin-bottom:12px}
.mk-cluster__title{font-size:17px;margin:0 0 14px;font-weight:700}
.mk-cluster__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size: var(--text-md);color:var(--text-secondary)}
.mk-cluster__list li{padding-left:16px;position:relative}.mk-cluster__list li::before{content:"·";position:absolute;left:0;color:var(--color-primary);font-weight:700}
/* trust band */
.mk-trust-band{background:var(--color-primary-dim);border-top:1px solid var(--color-primary-border);border-bottom:1px solid var(--color-primary-border);padding:14px 0;margin:0}
.mk-trust-band__inner{display:flex;justify-content:center;gap:36px;flex-wrap:wrap;font-size: var(--text-base);font-weight:600;color:var(--color-primary-dark)}
/* comparison table */
.mk-compare-wrap{overflow-x:auto;margin-top:4px}
.mk-compare{width:100%;border-collapse:collapse;font-size: var(--text-md)}
.mk-compare th,.mk-compare td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border-default)}
.mk-compare thead th{background:var(--bg-surface-2);font-weight:700;font-size: var(--text-base);color:var(--text-secondary)}
.mk-compare th:first-child,.mk-compare td:first-child{font-weight:500}
.mk-compare__us{background:var(--color-primary-dim);color:var(--color-primary-dark);font-weight:600}
.mk-compare thead .mk-compare__us{color:var(--color-primary-dark)}
.mk-compare__highlight td{background:var(--bg-surface)}
.mk-compare__highlight .mk-compare__us{background:var(--color-primary-dim)}
/* faq */
.mk-faq{max-width:780px;margin:26px auto 0}
.mk-faq details{border:1px solid var(--border-default);border-radius:var(--radius-md);padding:0;margin-bottom:10px;background:var(--bg-surface)}
.mk-faq summary{font-weight:700;font-size:15px;padding:15px 18px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.mk-faq summary::-webkit-details-marker{display:none}
.mk-faq summary::after{content:"+";color:var(--text-faint);font-weight:700}
.mk-faq details[open] summary::after{content:"–"}
.mk-faq .mk-faq__a{font-size: var(--text-md);color:var(--text-muted);padding:0 18px 16px}
/* final cta */
.mk-final{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:#fff;border-radius: var(--radius-xl);padding:48px;text-align:center}
.mk-final h2{color:#fff;margin-bottom:8px}.mk-final p{color:#EEF2FD;font-size:17px;margin-bottom:22px}
.btn-onteal{background:var(--bg-surface);color:var(--color-primary-dark);border-color:#fff}
.btn-onteal:hover{background:#EEF2FD}
/* final cta — beratungs-variante (helle Karte statt Teal-Gradient) */
.mk-final--demo{background:var(--bg-surface);border:1px solid var(--color-primary-border);color:var(--text-primary)}
.mk-final--demo h2{color:var(--text-primary)}
.mk-final--demo p{color:var(--text-secondary)}
.mk-final__cta-group{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:4px}
/* 3-schritte prozess (onboarding) */
.mk-h2--center{text-align:center}
.mk-process-grid{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mk-process-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:28px;text-align:center;box-shadow:var(--shadow-sm);transition:border-color var(--transition),box-shadow var(--transition)}
.mk-process-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-lg)}
.mk-process-card__num{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-full);background:var(--color-primary-dim);color:var(--color-primary-dark);font-weight:700;font-size:18px}
.mk-process-card__icon{display:block;font-size:30px;margin:14px 0 10px}
.mk-process-card__title{font-size: var(--text-lg);font-weight:700;margin:0 0 8px}
.mk-process-card__desc{font-size: var(--text-md);line-height:1.6;color:var(--text-secondary);margin:0}
/* pricing reuse */
.mk-price-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:780px;margin:28px auto 0}
.mk-price-card{padding:28px;display:flex;flex-direction:column}
.mk-price-card--feature{border:2px solid var(--color-primary)}
.mk-price-card__title{margin:0 0 4px;font-weight:800}
.mk-price-card__amount{font-size:26px;font-weight:800;margin:8px 0}
.mk-price-card__per{font-size:var(--text-sm);font-weight:400}
.mk-price-card__sub{font-size:var(--text-xs);color:var(--text-muted);margin:0 0 8px}
.mk-price-card__list{padding-left:16px;margin:16px 0;font-size:var(--text-sm);line-height:1.8;color:var(--text-secondary)}
.mk-price-card__ladder{border-top:1px solid var(--border-default);margin:4px 0 20px;padding-top:14px}
.mk-price-card__ladder-title{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);margin:0 0 8px}
.mk-price-card__ladder-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px;font-size:var(--text-sm)}
.mk-price-card__ladder-list li{display:flex;justify-content:space-between;gap:12px;color:var(--text-secondary)}
.mk-price-card__ladder-price{font-weight:700;color:var(--text-primary)}
.mk-price-card .btn{margin-top:auto}
/* hub */
.mk-hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.mk-hub-card{border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:22px;background:var(--bg-surface);box-shadow:var(--shadow-sm);text-decoration:none;color:var(--text-primary);display:block}
.mk-hub-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);transition:all var(--transition);text-decoration:none;color:var(--text-primary)}
.mk-hub-card:hover h4{color:var(--text-primary)}.mk-hub-card:hover p{color:var(--text-muted)}
.mk-hub-card .he{font-size:26px}.mk-hub-card h4{margin:10px 0 6px;font-size: var(--text-lg)}
.mk-hub-card p{font-size:13.5px;color:var(--text-muted)}
.mk-hub-card .cnt{margin-top:12px;font-size: var(--text-sm);color:var(--color-primary);font-weight:700}
.mk-hub-card--accent{background:var(--color-primary-dim);border-color:var(--color-primary-border)}
.mk-tag{display:inline-block;background:var(--color-primary);color:#fff;font-size:10px;font-weight:700;border-radius:5px;padding:2px 7px;vertical-align:middle;margin-left:6px}
/* article */
.mk-article{max-width:760px;margin:0 auto;padding:40px 24px}
.mk-article h1{margin-bottom:8px}
.mk-article__meta{color:var(--text-faint);font-size: var(--text-base);margin-bottom:24px}
.mk-article__hero,.mk-article__section-img{margin:0 0 24px}
.mk-article__hero img,.mk-article__section-img img{display:block;width:100%;height:auto;border-radius:var(--radius-lg);object-fit:cover}
.mk-article__section-img{margin:16px 0 20px}
.mk-article__hero figcaption,.mk-article__section-img figcaption{font-size:12.5px;color:var(--text-faint);margin-top:6px;line-height:1.5}
.mk-article__credit{color:var(--text-faint)}
.mk-article h2{font-size:23px;margin:30px 0 10px}.mk-article h3{font-size:18px;margin:22px 0 8px}
.mk-article p,.mk-article li{font-size: var(--text-lg);color:var(--text-secondary);line-height:1.7}
.mk-article ul{padding-left:22px;margin:10px 0}
.mk-article__toc{background:var(--bg-surface-2);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:16px 20px;margin-bottom:24px}
.mk-article__toc a{color:var(--text-secondary);text-decoration:none;display:block;padding:3px 0;font-size: var(--text-md)}
.mk-cta-bridge{background:var(--color-primary-dim);border:1px solid var(--color-primary-border);border-radius:var(--radius-lg);padding:22px 24px;margin:28px 0;text-align:center}
.mk-cta-bridge p{font-weight:600;color:var(--text-primary);margin-bottom:12px}
.mk-disclaimer{font-size:12.5px;color:var(--text-faint);border-top:1px solid var(--border-default);margin-top:32px;padding-top:16px}
.mk-related{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.mk-related a{font-size: var(--text-base);color:var(--color-primary);text-decoration:none;border:1px solid var(--color-primary-border);border-radius:var(--radius-full);padding:5px 12px}
/* shared marketing header/footer */
.mk-header{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--border-default);z-index:50}
/* Full-Screen-Header (Karte 8e8d2c51): breiterer Container (immocloud .container-wide
   ~1520px), 3-Zonen (Logo links / Nav mittig via margin-auto / Actions rechts),
   hoehere Kopfzeile (88px) + groessere Marke/Logo. */
.mk-header__wide{max-width:1520px}
.mk-header__in{display:flex;align-items:center;justify-content:space-between;height:88px;gap:24px}
.mk-nav--center{margin-inline:auto}
.mk-header__actions{flex:0 0 auto}
.mk-brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:24px;text-decoration:none;color:var(--text-primary)}
/* Wortmarke als EIN Flex-Item, sonst splittet der mk-brand gap "Immo" und "Mgmt"
   (Franca 2026-07-20: sichtbare Luecke). Innen inline -> Immo direkt an blaues Mgmt. */
.mk-brand__word{white-space:nowrap;letter-spacing:-.01em}
.mk-brand .logo{width:44px;height:44px;border-radius:11px;background:var(--color-primary);display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--text-lg);font-weight:800}
.mk-nav{display:flex;align-items:center;gap:28px}
.mk-nav a{color:var(--text-secondary);text-decoration:none;font-weight:500;font-size:17px}
.mk-nav a:hover{color:var(--color-primary)}
/* Header-CTA: .mk-nav a (0,0,1,1) ueberschrieb sonst die Button-Textfarbe ->
   "Kostenlos starten" wurde dunkel statt weiss (Franca 2026-07-20). */
.mk-nav a.btn-primary{color:#fff}
.mk-nav a.btn-primary:hover{color:#fff}
.mk-nav a.btn-ghost{color:var(--brand)}
.mk-nav__actions{display:flex;gap:10px;align-items:center}
.mk-footer{background:#0f172a;color:#cbd5e1;padding:46px 0 30px;font-size: var(--text-md)}
.mk-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:26px}
.mk-footer h5{color:#fff;font-size: var(--text-base);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}
.mk-footer a{color:var(--text-faint);text-decoration:none;display:block;margin-bottom:7px}
.mk-footer a:hover{color:#fff}
.mk-footer__legal{border-top:1px solid #1e293b;margin-top:28px;padding-top:18px;color:var(--text-muted);font-size:12.5px;display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}
.mk-footer__legal span{overflow-wrap:anywhere}
@media (max-width: 1023.98px){
  .mk-hero-grid{grid-template-columns:1fr}
  .mk-cmp,.mk-feat-grid,.mk-trust-grid,.mk-hub-grid,.mk-price-grid,.mk-footer__grid,.mk-cluster-grid,.mk-process-grid{grid-template-columns:1fr}
  .mk-final__cta-group{flex-direction:column;align-items:stretch}
  .mk-trust-band__inner{gap:18px}
  .mk-header__in{height:auto;min-height:62px;padding-top:10px;padding-bottom:10px;align-items:flex-start}
  .mk-brand{flex:0 1 auto}
  .mk-nav{gap:10px;flex:1 1 auto;justify-content:flex-end;flex-wrap:wrap}
  .mk-nav a:not(.btn){display:none}
  .mk-nav__actions{gap:8px;flex-wrap:wrap;justify-content:flex-end}
  .mk-nav__actions .btn{padding-inline:12px}
}
@media (max-width: 479.98px){
  .mk-header__in{flex-wrap:wrap;gap:10px}
  .mk-nav{flex:1 0 100%;justify-content:stretch}
  .mk-nav__actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .mk-nav__actions .btn{justify-content:center;min-width:0;padding-inline:10px;white-space:nowrap}
}

/* Consent banner */
.consent-banner{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);width:min(960px,calc(100% - 32px));z-index:1000;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:18px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center}
.consent-banner[hidden]{display:none}
.consent-banner__copy strong{display:block;font-size:15px;margin-bottom:4px;color:var(--text-primary)}
.consent-banner__copy p{font-size: var(--text-base);color:var(--text-secondary);margin:0;line-height:1.55}
.consent-banner__copy a{font-weight:700;white-space:nowrap}
.consent-banner__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:300px}
.consent-banner__button{min-height:40px;text-align:center;justify-content:center;white-space:nowrap}
.consent-banner__actions .btn-ghost{border-color:var(--border-strong);background:var(--bg-surface);color:var(--text-primary)}
.consent-banner__actions .btn-ghost:hover{border-color:var(--color-primary);background:var(--color-primary-dim);color:var(--color-primary-dark)}
@media (max-width: 767.98px){
  .consent-banner{grid-template-columns:1fr;bottom:12px;width:calc(100% - 20px);padding:16px}
  .consent-banner__actions{min-width:0}
}
@media (max-width: 479.98px){
  .consent-banner__actions{grid-template-columns:1fr}
}

/* ── Vertrags-Zahlungsplan (finanzielle Dimension im Modal) ───────────────── */
.pp-section{
  margin:14px 0;padding:13px 14px 15px;border-radius:12px;
  border:1px solid var(--color-primary-border);background:var(--color-primary-dim);
}
.pp-section__h{font-size: var(--text-base);font-weight:700;color:var(--color-primary-hover);margin-bottom:10px;}
/* Jahr/Monat-Umschalter über „Kosten pro Jahr/Monat" (B5) */
.pp-amount-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px;}
.seg-toggle{display:inline-flex;border:1px solid var(--color-primary-border);border-radius:8px;overflow:hidden;background:var(--bg-surface);}
.seg-toggle__btn{appearance:none;border:none;background:transparent;cursor:pointer;
  padding:3px 10px;font-size:var(--text-sm);font-weight:600;color:var(--text-secondary,#334155);line-height:1.6;}
.seg-toggle__btn+.seg-toggle__btn{border-left:1px solid var(--color-primary-border);}
.seg-toggle__btn.is-active{background:var(--color-accent-aa);color:#fff;}
/* Read-only „Überweisung"-Rohdaten im „Vertrag aus Umsatz"-Modal (B6) */
.tx-source{margin:0 0 14px;border:1px solid var(--border-default,#e2e8f0);border-radius:var(--radius-md);
  background:var(--bg-surface-2);padding:8px 12px;}
.tx-source__summary{cursor:pointer;font-weight:700;color:var(--color-primary-hover);font-size: var(--text-sm);}
.tx-source__grid{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:9px 0 2px;font-size:var(--text-sm);}
.tx-source__grid dt{color:var(--text-faint);}
.tx-source__grid dd{margin:0;color:var(--text-primary,#0f172a);word-break:break-word;}
.tx-source__ref{white-space:pre-wrap;}
.pp-calc{font-size: var(--text-sm);color:var(--text-secondary,#334155);margin:4px 0 8px;}
.pp-calc strong{color:var(--color-primary-hover);}
.pp-table-wrap{margin-top:6px;}
.pp-scroll{max-height:230px;overflow-y:auto;border:1px solid var(--border-default,#e2e8f0);border-radius:9px;background:var(--bg-surface);}
.pp-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.pp-table thead th{
  position:sticky;top:0;z-index:1;background:var(--bg-surface-2);text-align:left;
  font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint);
  padding:7px 10px;border-bottom:1px solid var(--border-default,#e2e8f0);
}
.pp-table th.num,.pp-table td.num{text-align:right;}
.pp-table td{padding:5px 10px;border-bottom:1px solid var(--border-subtle);}
.pp-table tr:last-child td{border-bottom:none;}
.pp-table tr.pp-last td{background:var(--bg-page);}
.pp-amount{width:96px;height:30px;text-align:right;font-weight:600;padding:3px 8px;
  border:1px solid var(--border-strong,#cbd5e1);border-radius:8px;font-size:12.5px;}
.pp-amount.pp-locked{background:#eef2f6;color:var(--text-secondary);cursor:not-allowed;}
.pp-sum{display:flex;justify-content:space-between;margin-top:8px;padding:7px 11px;
  background:#EEF2FD;border-radius:9px;font-size: var(--text-sm);font-weight:700;color:#273C8E;}

/* ── Searchable Combobox (Kategorie im Vertrags-Zahlungsplan) ─────────────── */
.cmb{position:relative;}
.cmb__input{width:100%;height:38px;padding:8px 11px;border-radius:var(--radius-md,10px);
  border:1px solid var(--border-strong,#cbd5e1);background:var(--bg-surface);font-size: var(--text-base);}
.cmb__input:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px rgba(var(--brand-teal-rgb),.15);}
.cmb__panel{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);
  background:var(--bg-surface);border:1px solid var(--border-default,#e2e8f0);border-radius: var(--radius-md);
  box-shadow:0 12px 30px rgba(0,0,0,.12);max-height:230px;overflow-y:auto;}
.cmb__list{list-style:none;margin:0;padding:4px;}
.cmb__opt{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:7px;font-size: var(--text-base);cursor:pointer;color:var(--text-primary,#0f172a);}
.cmb__opt:hover{background:var(--color-primary-dim,rgba(var(--brand-teal-rgb),.10));color:var(--color-primary-dark,#273C8E);}
.cmb__opt-ic{font-size: var(--text-md);line-height:1;flex:none;}
.cmb__group{padding:8px 10px 4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted,#64748b);}
.cmb__group:not(:first-child){margin-top:2px;border-top:1px solid var(--border-default,#e2e8f0);}
.cmb__empty{padding:12px 12px;font-size: var(--text-base);color:var(--text-muted,#64748b);}
.cmb__clear{position:absolute;top:0;right:0;height:38px;width:34px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;cursor:pointer;color:var(--text-muted,#64748b);font-size:18px;line-height:1;border-radius:var(--radius-md,10px);}
.cmb__clear:hover{color:var(--color-red,#B91C1C);}
.cmb:has([data-cmb-clear]:not([hidden])) .cmb__input{padding-right:36px;}

/* ── Dokumentenmappe (Karte 1fe0ff6a, S3) — read-only document folder ── */
.doc-folder { display: flex; flex-direction: column; gap: 18px; }
.doc-folder__group { margin: 0; }
.doc-folder__ghead { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; }
.doc-folder__badge {
  display: inline-block; font-size: var(--text-xs); font-weight: 700;
  padding: 3px 10px; border-radius: var(--radius-full);
  background: var(--color-primary-dim); color: var(--color-primary-dark);
}
.doc-folder__gcount { font-size: var(--text-sm); color: var(--text-faint); font-weight: 600; }
.doc-folder__gline { flex: 1; height: 1px; background: var(--border-default); }
.doc-folder__table { width: 100%; border-collapse: collapse; }
.doc-folder__row { border-bottom: 1px solid var(--border-subtle); }
.doc-folder__row:last-child { border-bottom: 0; }
.doc-folder__table td { padding: 10px 8px; font-size: var(--text-md); vertical-align: middle; }
.doc-folder__doc { display: flex; align-items: center; gap: 11px; min-width: 0; }
.doc-folder__fi {
  width: 32px; height: 32px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 800; letter-spacing: .02em;
}
.doc-folder__fi--pdf { background: #fee2e2; color: #b91c1c; }
.doc-folder__fi--image { background: #dbeafe; color: #1d4ed8; }
.doc-folder__fi--file { background: var(--bg-surface-2); color: var(--text-muted); }
.doc-folder__name { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.doc-folder__date { color: var(--text-muted); font-size: var(--text-sm); white-space: nowrap; }
.doc-folder__act { text-align: right; white-space: nowrap; }
.doc-folder__act a { color: var(--color-primary-dark); font-weight: 700; font-size: var(--text-sm); }
.doc-folder__cat { white-space: nowrap; }
/* Roll-up mappe (S5): origin badge per source object (building/unit/tenancy/asset). */
.doc-folder__origin {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-xs); font-weight: 700;
  padding: 3px 10px; border-radius: var(--radius-full);
  background: var(--bg-surface-2); color: var(--text-muted);
}
.doc-folder__origin--building { background: #EEF2FD; color: #273C8E; }
.doc-folder__origin--unit { background: var(--color-primary-dim); color: var(--color-primary-dark); }
.doc-folder__origin--tenancy { background: #eef2ff; color: #4338ca; }
.doc-folder__origin--asset { background: #fff7ed; color: #c2410c; }

/* ── Dokument-Upload-Modal (Karte 1fe0ff6a, S4) ── */
#upload-modal .modal { max-width: 560px; }
.topbar-upload-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.topbar-upload-btn svg { flex: none; }
.upload-opt {
  font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-faint); margin-left: 3px;
}
.upload-error {
  background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
  border-radius: var(--radius-md, 10px); padding: 10px 12px; font-size: var(--text-base); margin-bottom: 12px;
}
.upload-disabled { text-align: center; padding: 26px 16px; }
.upload-disabled__title { font-weight: 700; font-size: var(--text-md); margin: 0 0 4px; }
.upload-disabled__text { font-size: var(--text-base); color: var(--text-muted); margin: 0; }
.upload-ctx {
  display: inline-flex; align-items: center; gap: 5px; margin-bottom: 12px;
  background: var(--color-primary-dim); border: 1px solid var(--color-primary-border, rgba(var(--brand-teal-rgb),.28));
  color: var(--color-primary-dark); border-radius: var(--radius-full, 999px);
  font-size: 11.5px; font-weight: 700; padding: 3px 10px;
}
.upload-ctx svg { flex: none; }
.upload-dz {
  border: 2px dashed var(--color-primary-border, rgba(var(--brand-teal-rgb),.28));
  background: var(--color-primary-dim); border-radius: var(--radius-lg, 14px);
  padding: 24px 18px; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.upload-dz:hover, .upload-dz:focus-visible,
.upload-dz--drag { border-color: var(--color-primary); background: rgba(var(--brand-teal-rgb),.14); outline: none; }
.upload-dz--has-file { border-style: solid; border-color: var(--color-primary); background: #EEF2FD; }
.upload-dz__icon { color: var(--color-primary); width: 38px; height: 38px; margin: 0 auto 9px; display: block; }
.upload-dz__title { font-size: var(--text-md); font-weight: 700; color: var(--color-primary-dark); }
.upload-dz__sub { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.upload-dz__types { font-size: var(--text-xs); color: var(--text-faint); margin-top: 7px; }
.upload-chip {
  display: flex; align-items: center; gap: 9px; background: var(--bg-surface-2);
  border: 1px solid var(--border-default); border-radius: var(--radius-md, 10px);
  padding: 8px 11px; margin-top: 10px;
}
.upload-chip__fi {
  width: 30px; height: 30px; border-radius: var(--radius-sm); flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 8.5px; font-weight: 800;
}
.upload-chip__fi--pdf { background: #fee2e2; color: #b91c1c; }
.upload-chip__fi--image { background: #dbeafe; color: #1d4ed8; }
.upload-chip__meta { flex: 1; min-width: 0; }
.upload-chip__name { display: block; font-size: var(--text-base); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-chip__size { display: block; font-size: var(--text-xs); color: var(--text-faint); }
.upload-chip__rm { background: none; border: none; color: var(--text-faint); font-size: var(--text-lg); cursor: pointer; line-height: 1; }
.upload-chip__rm:hover { color: var(--color-red, #b91c1c); }
.upload-hint {
  display: flex; gap: 9px; align-items: flex-start; border-radius: var(--radius-md, 10px);
  padding: 10px 12px; margin-top: 8px; font-size: var(--text-sm); line-height: 1.5;
}
.upload-hint svg { flex: none; margin-top: 1px; }
.upload-hint--invoice { background: #fffbeb; border: 1px solid #fde68a; color: #78350f; }
.upload-hint--invoice svg { color: #b45309; }
.upload-hint--inbox { background: var(--color-primary-dim); border: 1px solid var(--color-primary-border, rgba(var(--brand-teal-rgb),.28)); color: var(--color-primary-dark); }
.upload-toggle {
  display: flex; align-items: center; gap: 11px; background: var(--bg-surface-2);
  border: 1px solid var(--border-default); border-radius: var(--radius-md, 10px);
  padding: 11px 13px; margin: 13px 0 0; cursor: pointer;
}
.upload-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.upload-toggle__sw {
  width: 38px; height: 22px; border-radius: 999px; background: var(--border-strong, #cbd5e1);
  position: relative; flex: none; transition: background .2s;
}
.upload-toggle__sw::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--bg-surface); box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .2s;
}
.upload-toggle input:checked + .upload-toggle__sw { background: var(--color-primary); }
.upload-toggle input:checked + .upload-toggle__sw::after { left: 18px; }
.upload-toggle input:focus-visible + .upload-toggle__sw { box-shadow: 0 0 0 3px rgba(var(--brand-teal-rgb),.25); }
.upload-toggle__tt { display: block; font-size: var(--text-base); font-weight: 600; }
.upload-toggle__ts { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.upload-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 16px);
  background: var(--color-primary-dark, #273C8E); color: #fff; font-size: 13.5px; font-weight: 600;
  padding: 11px 18px; border-radius: var(--radius-md, 10px); box-shadow: 0 12px 30px rgba(15,23,42,.25);
  z-index: 12000; opacity: 0; transition: opacity .25s, transform .25s; max-width: 88vw; text-align: center;
}
.upload-toast--in { opacity: 1; transform: translate(-50%, 0); }

/* Posteingang (Karte 1fe0ff6a, Slice S6) */
.inbox-filter { margin: 4px 0 16px; }
.inbox-filter__q { max-width: 420px; }
.inbox-assign { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inbox-assign__picker { flex: 1 1 260px; min-width: 220px; }
.inbox-assign__cat { flex: 0 1 200px; width: auto; }
.inbox-assign__booking { flex: none; }

/* ── Spaltenfilter (units_table HTMX-Partial; ausgelagert aus Inline-<style>, CR-6) ── */
.col-filter-wrapper { position: relative; display: inline-flex; align-items: center; gap: 3px; }
.col-filter-btn {
  background: none; border: none; cursor: pointer; font-size: 10px; padding: 0 2px;
  opacity: .4; color: currentColor; line-height: 1;
}
.col-filter-btn:hover, .col-filter-btn.active { opacity: 1; color: var(--color-primary); }
.col-filter-dropdown {
  display: none; position: fixed; z-index: 9999;
  background: var(--bg-surface, #1a1a2e); border: 1px solid var(--border-default);
  border-radius: var(--radius-md, 6px); padding: 10px 12px;
  min-width: 180px; box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
.col-filter-dropdown .scroll-list {
  max-height: 220px; overflow-y: auto; margin: 0 -12px; padding: 0 12px;
}
.col-filter-dropdown label {
  display: flex; align-items: center; gap: 6px; font-size: var(--text-sm);
  padding: 3px 0; cursor: pointer; white-space: nowrap;
}
th .sort-label { cursor: pointer; user-select: none; }
th .sort-label:hover { opacity: .75; }
/* CR-135: die drei Deklarationen kamen aus einem inline style=-Attribut in
   partials/table/_sort_th.html. Unter der gehaerteten CSP (style-src ohne
   unsafe-inline) wurde das Attribut verworfen -> Sortier-Header rendern als
   unterstrichene Standard-Links. Jetzt same-origin im DS. */
.sort-label { cursor: pointer; text-decoration: none; color: inherit; }
.sort-label:hover { text-decoration: none; }

/* ── Honeypot-Feld der Registrierung (Karte 44a696b6) ──────────────────────
   Bewusst NICHT display:none oder visibility:hidden: verbreitete Spam-Bots
   werten beides aus und lassen solche Felder aus. Off-screen positionieren
   wirkt dagegen wie ein normales Feld — genau das ist der Zweck der Falle.
   Menschen sehen es nicht, Screenreader überspringen es über aria-hidden. */
.form-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── SR-only Statuszelle (units_table „Mieter"-Spalte, CR-6) ── */
.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;
}

/* ── Modal-Field-Rows (contract_view_modal; ausgelagert aus Inline-<style>, CR-6) ── */
.modal-field-row { display: flex; align-items: baseline; gap: 12px; padding: 7px 4px; border-bottom: 1px solid var(--border-default); }
.modal-field-row:last-child { border-bottom: none; }
.modal-field-row:not(.editing):hover { background: var(--bg-surface-2, #f8faff); }
.mf-label { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); min-width: 140px; flex-shrink: 0; }
.mf-value { font-size: var(--text-base); flex: 1; }

/* ── Vertragsgenerator: Papier-Dokument (Phase 4, Card 3b7bde37) ───────────
   Echtes, ausgefülltes Dokument mit Abschnitts-Trennlinien, Tabellen statt
   Bullets und Inline-Stift je Abschnitt. Design von Heiner freigegeben. */
.vg-doc-paper{background:var(--bg-surface);border:1px solid var(--border-default);border-radius: var(--radius-md);
  box-shadow:0 1px 3px rgba(15,23,42,.06),0 8px 24px -12px rgba(15,23,42,.12);
  padding:40px 48px;color:#1e293b}
.vg-doc-title{font-family:Georgia,"Times New Roman",serif;font-size:23px;font-weight:700;
  letter-spacing:-.2px;margin:0 0 4px;color:var(--text-primary)}
.vg-doc-meta{font-size: var(--text-base);color:var(--text-muted);margin:0 0 4px}
.vg-doc-rule{height:2px;border:0;margin:18px 0 8px;
  background:linear-gradient(90deg,var(--color-primary),transparent 60%)}
.vg-doc-sec{position:relative;padding:22px 0}
.vg-doc-sec + .vg-doc-sec{border-top:1px solid var(--border-default)}
.vg-doc-sec-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.vg-doc-sec-title{font-family:Georgia,serif;font-size: var(--text-lg);font-weight:700;color:var(--text-primary);
  margin:0;display:flex;align-items:baseline;gap:10px}
.vg-doc-sec-title .no{font-size: var(--text-sm);font-weight:700;color:var(--brand-600);
  font-family:inherit;letter-spacing:.5px}
.vg-edit-pill{display:inline-flex;align-items:center;gap:5px;font-size: var(--text-sm);font-weight:600;
  color:var(--brand-600);background:var(--color-primary-dim);border:1px solid var(--color-primary);
  border-radius:999px;padding:4px 11px;cursor:pointer;list-style:none;opacity:0;transition:opacity .12s}
.vg-doc-sec:hover .vg-edit-pill,.vg-doc-sec:focus-within .vg-edit-pill{opacity:1}
.vg-doc-body{font-size: var(--text-md);line-height:1.65;color:var(--text-secondary)}
.vg-doc-body p{margin:0 0 10px}
.vg-kv{display:grid;grid-template-columns:160px 1fr;row-gap:7px;column-gap:16px;font-size: var(--text-md);margin:0}
.vg-kv dt{color:var(--text-muted)}
.vg-kv dd{margin:0;color:var(--text-primary);font-weight:600}
.vg-doc-table{width:100%;border-collapse:collapse;font-size: var(--text-md);margin-top:4px}
.vg-doc-table th{text-align:left;font-size: var(--text-xs);letter-spacing:.6px;text-transform:uppercase;
  color:var(--text-muted);font-weight:700;padding:6px 12px;border-bottom:1px solid var(--border-default)}
.vg-doc-table td{padding:8px 12px;border-bottom:1px solid var(--border-default);color:var(--text-primary)}
.vg-doc-table td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.vg-doc-note{font-size:12.5px;color:var(--text-muted);margin-top:10px;font-style:italic}
.vg-badge-ok{display:inline-block;font-size: var(--text-xs);font-weight:600;color:#047857;background:#ecfdf5;
  border:1px solid #a7f3d0;border-radius: var(--radius-sm);padding:1px 8px}
.vg-block-edit-form textarea{font-family:inherit}

/* Umsatz-Zuordnung-Modal: Absender/Empfänger 2-Spalten mit Trennerbalken (Karte 58fe4fb9) */
/* Karte 03897aa0 (#6.3): die Zuordnungs-Aktionen standen linksbuendig in
   unterschiedlichen Breiten ueber mehrere Zeilen verteilt. SOLL laut Klickdummy:
   rechtsbuendig, gleich gross, in EINER Zeile. Die Buttons teilen sich die Breite
   (flex:1) und kuerzen ihren Text per Ellipse statt umzubrechen. */
.tx-actions-row {
  display: flex; flex-wrap: nowrap; justify-content: flex-end;
  align-items: center; gap: var(--space-2); width: 100%;
  margin-top: var(--space-3);
}
.tx-actions-row form { flex: 1 1 0; min-width: 0; }
.tx-actions-row .btn {
  flex: 1 1 0; min-width: 0; width: 100%;
  text-align: center; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 767.98px) {
  .tx-actions-row { flex-wrap: wrap; }
  .tx-actions-row .btn, .tx-actions-row form { flex: 1 1 100%; }
}
.tx-parties{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:18px;margin-bottom:16px}
.tx-party{display:flex;flex-direction:column;gap:2px;min-width:0}
.tx-party__name{font-weight:600;word-break:break-word}
.tx-parties__divider{width:1px;background:var(--border-default);align-self:stretch;margin:6px 0}
.tx-meta{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  padding-top:14px;border-top:1px solid var(--border-default)}
.tx-meta > div{min-width:0}
.tx-meta__subject{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;word-break:break-word}
/* Heiner-Feedback tx-v2 (Punkt 1): Betrag + Offen als konsistente Definition-Liste.
   Beide Werte rechtsbuendig an derselben Kante, gleiche Wert-Typografie; Labels links
   im Muted-Stil. Betrag traegt Vorzeichen/Farbe (text-danger/text-success), "Offen"
   bleibt dezent in --text-primary statt in konkurrierendem Amber. */
.tx-amounts{flex:0 0 auto;margin:0;display:flex;flex-direction:column;gap:4px;min-width:0}
.tx-amounts__row{display:flex;justify-content:flex-end;align-items:baseline;gap:14px}
.tx-amounts__label{font-size:var(--text-sm);color:var(--text-muted);font-weight:500}
.tx-amounts__value{font-size:var(--text-base);font-weight:700;text-align:right;
  white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.tx-amounts__value--open{color:var(--text-secondary,var(--text-primary))}
@media (max-width: 479.98px){
  .tx-parties{grid-template-columns:1fr;gap:12px}
  .tx-parties__divider{width:auto;height:1px;margin:0}
}

/* ============================================================================
   OP-4 S1 — Utility layer scaffold (additive, opt-in)

   These classes are token-backed helpers for the inline-style migration (S4).
   They are intentionally NOT yet applied to any template, so shipping S1 is a
   visual no-op. Templates adopt them module-by-module in later slices, replacing
   hardcoded inline style="..." with a single class + the canonical tokens above.
   Kept low-specificity (single class) so they compose without !important.
   ============================================================================ */

/* Display / flex */
.u-flex        { display: flex; }
.u-inline-flex { display: inline-flex; }
.u-grid        { display: grid; }
.u-block       { display: block; }
.u-hidden      { display: none; }
.u-items-center   { align-items: center; }
.u-items-start    { align-items: flex-start; }
.u-items-end      { align-items: flex-end; }
.u-justify-between{ justify-content: space-between; }
.u-justify-start  { justify-content: flex-start; }
.u-justify-center { justify-content: center; }
.u-justify-end    { justify-content: flex-end; }
.u-flex-col    { flex-direction: column; }
.u-flex-wrap   { flex-wrap: wrap; }
.u-flex-1      { flex: 1 1 0%; }
.u-flex-none   { flex: none; }

/* Gap (spacing scale) */
.u-gap-1 { gap: var(--space-1); }
.u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); }
.u-gap-4 { gap: var(--space-4); }
.u-gap-6 { gap: var(--space-6); }

/* Margin helpers (spacing scale) */
.u-mt-0 { margin-top: var(--space-0); }
.u-mt-2 { margin-top: var(--space-2); }
.u-mt-3 { margin-top: var(--space-3); }
.u-mt-4 { margin-top: var(--space-4); }
.u-mt-6 { margin-top: var(--space-6); }
.u-mb-0 { margin-bottom: var(--space-0); }
.u-mb-2 { margin-bottom: var(--space-2); }
.u-mb-3 { margin-bottom: var(--space-3); }
.u-mb-4 { margin-bottom: var(--space-4); }
.u-mb-6 { margin-bottom: var(--space-6); }
.u-ml-auto { margin-left: auto; }

/* Padding helpers (spacing scale) */
.u-p-2 { padding: var(--space-2); }
.u-p-3 { padding: var(--space-3); }
.u-p-4 { padding: var(--space-4); }

/* Text */
.u-text-left   { text-align: left; }
.u-text-center { text-align: center; }
.u-text-right  { text-align: right; }
.u-nowrap      { white-space: nowrap; }
.u-tabular     { font-variant-numeric: tabular-nums; }
.u-truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sizing */
.u-w-full { width: 100%; }
.u-min-w-0 { min-width: 0; }

/* ---------------------------------------------------------------------------
   OP-4 S4-prep — additional atomic utilities (Karte 193cecd4, additive/opt-in)

   Token-backed helpers covering the most frequent remaining inline-style
   patterns (measured via scripts/design_debt_ratchet.py: margin:0, font-size,
   cursor:pointer, 4px spacing, display:inline). Like the S1 scaffold above they
   are NOT yet applied to any template — shipping them is a visual no-op — so the
   per-module inline-style sweep becomes a pure class substitution. Kept single-
   class / low-specificity; every value references a canonical token.
   --------------------------------------------------------------------------- */

/* Display */
.u-inline { display: inline; }

/* Margin (all-sides + 4px step, spacing scale) */
.u-m-0  { margin: var(--space-0); }
.u-mt-1 { margin-top: var(--space-1); }
.u-mb-1 { margin-bottom: var(--space-1); }

/* Padding (4px step + axis helpers, spacing scale) */
.u-p-1  { padding: var(--space-1); }
.u-px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.u-py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }

/* Font-size (canonical --text-* type scale) */
.u-fs-xs   { font-size: var(--text-xs); }   /* 11px */
.u-fs-sm   { font-size: var(--text-sm); }   /* 12px */
.u-fs-base { font-size: var(--text-base); } /* 13px */
.u-fs-md   { font-size: var(--text-md); }   /* 14px */
.u-fs-lg   { font-size: var(--text-lg); }   /* 16px */

/* Font-weight */
.u-fw-medium   { font-weight: 500; }
.u-fw-semibold { font-weight: 600; }
.u-fw-bold     { font-weight: 700; }

/* Margin-top (32px canonical step) */
.u-mt-8 { margin-top: var(--space-8); }

/* Sizing / overflow */
.u-w-auto          { width: auto; }
.u-overflow-x-auto { overflow-x: auto; }

/* Grid columns */
.u-grid-2 { grid-template-columns: 1fr 1fr; }

/* Interaction */
.u-cursor-pointer { cursor: pointer; }

/* Card d80cdb16 (CR-169): dezenter Absprung-Pfeil (z.B. Wartungs-Zellenliste)
   ohne inline style="..." — CSP style-src hat kein unsafe-inline. */
.link-jump { opacity: .35; margin-left: 4px; font-size: var(--text-xs); text-decoration: none; }

/* ═══════════════════════════════════════════════
   Beleg-Vorschau neben "Beleg bearbeiten" (Karte 74b942a0)
   Split-Layout im verbreiterten Modal: Formular links, Beleg-
   Vorschau rechts (klein gezoomt, blätterbar). Lupe → Lightbox.
   Gesteuert von static/js/document_preview.js.
   ═══════════════════════════════════════════════ */
.modal.modal-split { max-width: 1040px; }

.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); flex: 1; min-height: 0; }
.split__form { padding: 18px 22px; overflow-y: auto; border-right: 1px solid var(--border-default); min-height: 0; }
.split__preview { background: var(--bg-surface-2); display: flex; flex-direction: column; min-height: 0; }

/* Lieferant-Feld im Beleg-Bearbeiten-Modal: Nachunternehmer-Dropdown mit
   Freitext-Fallback (Card Beleg-Modal Dokumente-Seite prefill). Das Textfeld
   erscheint nur im Freitext-Modus; [hidden] muss den Flex-Default schlagen. */
.supplier-field { display: flex; flex-direction: column; gap: var(--space-2); }
.supplier-field__text[hidden] { display: none; }

/* Panel-Kopf */
.doc-preview { display: flex; flex-direction: column; min-height: 0; flex: 1; }
/* Explizite display-Werte unten würden das [hidden]-Attribut überstimmen —
   diese scoped Regel stellt sicher, dass hidden-Elemente wirklich verschwinden
   (Leerzustand, Pager, ungenutztes canvas/img, Lightbox). */
.doc-preview [hidden] { display: none !important; }
.doc-preview__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--border-default); flex-shrink: 0;
}
.doc-preview__label {
  font-size: var(--text-sm); font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .4px; display: flex; gap: 6px; align-items: center;
}
.doc-preview__file { font-size: var(--text-xs); color: var(--text-muted); font-weight: 500; text-transform: none; letter-spacing: 0; }

/* Icon-Button (Lupe) */
.icon-btn {
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-default); background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-secondary); font-size: var(--text-md); transition: all var(--transition);
}
.icon-btn:hover:not(:disabled) { border-color: var(--color-primary-border); background: var(--color-primary-dim); color: var(--color-primary-dark); }
.icon-btn:disabled { opacity: .4; cursor: not-allowed; }
.icon-btn--light {
  border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff;
}
.icon-btn--light:hover:not(:disabled) { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); color: #fff; }

/* Vorschau-Bühne */
.doc-preview__stage {
  flex: 1; min-height: 0; overflow: auto;
  display: flex; align-items: flex-start; justify-content: center; padding: 16px;
}
.doc-preview__page {
  display: block; width: auto; max-width: 100%; height: auto;
  background: #fff; border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
}
.doc-preview__loading { margin: auto; color: var(--text-muted); font-size: var(--text-sm); padding: 40px 0; }
.doc-preview__empty {
  margin: auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 6px; padding: 40px 24px; color: var(--text-muted);
}
.doc-preview__empty-icon { font-size: var(--text-3xl); opacity: .5; }
.doc-preview__empty p { margin: 0; font-size: var(--text-base); }
.doc-preview__empty-sub { font-size: var(--text-sm); color: var(--text-faint); max-width: 260px; }

/* Blätter-Leiste */
.doc-preview__pager {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 10px 16px; border-top: 1px solid var(--border-default); flex-shrink: 0; background: #fff;
}
.doc-preview__pageinfo { font-size: var(--text-sm); color: var(--text-secondary); font-weight: 600; min-width: 70px; text-align: center; }
.navbtn {
  width: 32px; height: 32px; border-radius: var(--radius-full);
  border: 1px solid var(--border-strong); background: #fff; cursor: pointer;
  color: var(--text-secondary); font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center;
}
.navbtn:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary-dark); }
.navbtn:disabled { opacity: .35; cursor: not-allowed; }
.navbtn--light { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; width: 40px; height: 40px; font-size: 18px; }
.navbtn--light:hover:not(:disabled) { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.5); color: #fff; }

/* Lightbox (Großansicht, blätterbar) */
.doc-lightbox {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(15,23,42,.82); backdrop-filter: blur(4px);
  display: flex; flex-direction: column; padding: 24px;
}
.doc-lightbox[hidden] { display: none; }
.doc-lightbox__bar { display: flex; align-items: center; gap: 12px; color: #fff; padding: 4px 4px 14px; }
.doc-lightbox__pageinfo { font-size: var(--text-base); opacity: .9; font-weight: 600; }
.doc-lightbox__bar .icon-btn--light { margin-left: auto; }
.doc-lightbox__stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: auto; }
.doc-lightbox__page {
  display: block; max-width: min(900px, 88vw); max-height: 100%; width: auto; height: auto;
  background: #fff; border-radius: var(--radius-sm); box-shadow: 0 12px 40px rgba(0,0,0,.4);
}
.doc-lightbox__pager { display: flex; align-items: center; justify-content: center; gap: 18px; padding-top: 14px; }

/* Responsiv: schmaler Viewport → Panel unter das Formular */
@media (max-width: 1023.98px) {
  .modal.modal-split { max-width: 560px; }
  .split { grid-template-columns: 1fr; overflow-y: auto; }
  .split__form { border-right: 0; border-bottom: 1px solid var(--border-default); }
  .split__preview { min-height: 420px; }
}

/* ── Buchung zuordnen: gefilterte Zielliste (Card 4fccdb7a) ──
   Klickdummy: klickdummy-buchungszuordnung-kategorie-filter / -miete-alle.
   Kategorie- + Gebäudefilter, Toggle „Nur offene", nächste fällige vorausgewählt. */
.assign { margin-top: 6px; }
.assign__filterbar {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
}
.assign__field { display: flex; flex-direction: column; gap: 4px; min-width: 210px; }
.assign__field .form-field-label { margin: 0; }
/* Kategorie = Pflicht-Dimension → teal hervorgehoben; Gebäude neutral. */
.assign__field:first-child select {
  border: 1px solid var(--color-primary-border);
  background: var(--color-primary-dim);
  color: var(--color-primary-dark);
  font-weight: 600;
}
.assign__hint { font-size: 10px; color: var(--color-primary-dark); margin-top: 3px; }
.assign__toggle {
  display: flex; align-items: center; gap: 8px; font-size: var(--text-base);
  color: var(--text-primary); align-self: flex-end; padding-bottom: 8px; cursor: pointer;
}
.assign__listlabel {
  font-size: var(--text-sm); color: var(--text-muted); margin: 2px 0 8px;
  display: flex; justify-content: space-between; gap: 10px;
}
.assign__group-label {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); margin: 12px 0 6px;
}
.assign-item {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: 11px 14px; margin-bottom: 9px; cursor: pointer;
}
.assign-item--next {
  border-color: var(--color-primary); background: var(--color-primary-dim);
  box-shadow: 0 0 0 3px rgba(var(--brand-teal-rgb), .10);
}
.assign-item--bezahlt { background: var(--color-green-dim); cursor: default; }
.assign-item--kuenftig { opacity: .7; }
.assign-item__radio { width: 18px; height: 18px; flex: none; accent-color: var(--color-primary); }
.assign-item__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.assign-item__t1 { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); }
.assign-item__t2 { font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; }
.assign-item__amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.assign-item--match .assign-item__amount { color: var(--color-primary-dark); }
/* Status-Badges — Farbsemantik wie Klickdummy. */
.badge-assign-naechste { background: var(--color-accent-aa); color: #fff; }
.badge-assign-ueberfaellig { background: var(--color-red-dim); color: var(--color-red-badge); }
.badge-assign-offen { background: var(--color-gold-dim); color: var(--color-amber-badge); }
.badge-assign-bezahlt { background: var(--color-green-dim); color: var(--color-green-badge); }
.badge-assign-kuenftig {
  background: rgba(0,0,0,.06); border: 1px solid var(--border-default); color: var(--text-muted);
}
.assign__actions { display: flex; justify-content: flex-end; margin-top: 4px; }
.assign__note { margin-top: 8px; }
.assign__empty { margin: 10px 0; }

/* ══════════════════════════════════════════════════════════════════════════
   OP-4 S5 — Theming-Proof (Dark-Mode über Token, DORMANT / kein Rollout)

   Belegt, dass die Token-Konsolidierung (S1–S4) Theming ermöglicht: das Umsetzen
   der Neutral-/Surface-/Text-/Border-Token unter [data-theme="dark"] reskint die
   gesamte App, OHNE Komponenten-CSS anzufassen. Standardmäßig INAKTIV — greift nur,
   wenn <html data-theme="dark"> gesetzt wird (z. B. später per Nutzer-Toggle oder
   prefers-color-scheme). Brand-Teal (--color-primary) bleibt bewusst erhalten.
   Rest-Hex (var()-Fallbacks, Gradients, PDF) reskinnt noch nicht — Scope S3/S4.
   ══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  --bg-page:       #0f172a;
  --bg-surface:    #1e293b;
  --bg-surface-2:  #273449;
  --bg-header:     #1e293b;

  --text-primary:   #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted:     #94a3b8;
  --text-faint:     #64748b;

  --border-subtle:  #1e293b;
  --border-default: #334155;
  --border-strong:  #475569;
  --border-faint:   #273449;
  --border-hover:   #64748b;

  /* --color-primary-bright (helles Teal fuer Primary-Text auf dunklen Surfaces,
     WCAG-AA) ist seit CR-100 ein echtes SSOT-Token (design-tokens/tokens/color.json)
     und wird im generierten :root oben definiert — kein Inline-Hex-Duplikat mehr. */

  --sidebar-bg:     #1e293b;
  --sidebar-border: var(--border-default);

  --shadow-sm:   0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --shadow-lg:   0 4px 16px rgba(0,0,0,.5);
}

/* Dark-Mode: Prozess-Nummer (CR-70, Kanban 522cff30). --color-primary-dark (#273C8E)
   auf teal-getoent-dunkler Flaeche (--color-primary-dim ueber #1e293b) = nur 1.99:1
   (WCAG-AA-Fail). Helles Teal statt dunkles -> ~8.6:1. Nur die Nummer, kein globaler
   Token-Override, damit Badges/Links (--color-primary-dark) unveraendert bleiben. */
:root[data-theme="dark"] .mk-process-card__num{color:var(--color-primary-bright)}

/* Dark-Mode: Wizard-Summenleiste (CR-100, Kanban 9376b3e5). Gleiches Muster wie die
   Prozess-Nummer: .wz-sumbar .v rendert --color-primary-dark (#273C8E) auf
   --color-primary-dim ueber #1e293b = nur ~1.99:1 (WCAG-AA-Fail). Helles Teal statt
   dunkles -> ~8.6:1. Nur der Summen-Wert, kein globaler Token-Override. */
:root[data-theme="dark"] .wz-sumbar .v{color:var(--color-primary-bright)}

/* Dark-Mode: CSV-Import-Statusfarben (CR-160, Kanban 1f4868ba). Gleiches Muster wie
   CR-70/CR-100, nur breiter: die .imp-*-Farben aus CR-146 sind fuer Light gebaut
   (dunkles Gruen/Bernstein/Rot auf hellen -dim-Flaechen, 4.9-6.2:1). Unter
   [data-theme="dark"] bleibt die Textfarbe dunkel, waehrend die -dim-Flaeche ueber
   #1e293b compositet -> 1.78-2.67:1, schwerer WCAG-AA-Fail. Die -bright-Tokens sind
   echte SSOT-Tokens (design-tokens/tokens/color.json) und heben den Kontrast auf
   >= 5:1. Nur die Textfarben, keine globalen Token-Overrides — Badges/Light bleiben
   unveraendert. */
:root[data-theme="dark"] .imp-stat--new .imp-stat__value,
:root[data-theme="dark"] .imp-stat--new .imp-stat__label,
:root[data-theme="dark"] .imp-status--new { color: var(--color-green-bright); }
:root[data-theme="dark"] .imp-stat--update .imp-stat__value,
:root[data-theme="dark"] .imp-stat--update .imp-stat__label,
:root[data-theme="dark"] .imp-status--update,
:root[data-theme="dark"] .imp-hint { color: var(--color-amber-bright); }
:root[data-theme="dark"] .imp-stat--error .imp-stat__value,
:root[data-theme="dark"] .imp-stat--error .imp-stat__label,
:root[data-theme="dark"] .imp-status--error,
:root[data-theme="dark"] .imp-error-detail,
:root[data-theme="dark"] .imp-error-box { color: var(--color-red-bright); }

/* Dark-Mode: Zaehlername + Vorbefuellungs-Hinweis (CR-172, Kanban ccfbc973). Viertes
   Auftreten desselben Musters wie CR-70/CR-100/CR-160: .meter-name (jede Zeile der
   Zaehler-/Oeltank-Tabellen) und .aa-prefill-hint (Auto-Zuordnungsregeln im Umsatz-
   Modal) rendern --color-primary-dark (#273C8E) auf --bg-surface (#1e293b) = 1.48:1,
   praktisch unlesbar. Helles Teal statt dunkles -> ~8.6:1. Nur die Textfarbe per
   Descendant-Override, kein globaler Token-Override — Light bleibt unveraendert
   (Pflicht-Gegentest in tests/test_cr172_a11y_design_ccfbc973.py). */
:root[data-theme="dark"] .meter-name,
:root[data-theme="dark"] .aa-prefill-hint { color: var(--color-primary-bright); }

/* ============================================================================
   Design-Struktur 2/4 — Layout-Primitive (Card c0414058, additive, opt-in)

   Benannte, token-basierte Layout-Klassen statt per-View bespoke Flexbox. Decken
   ~90 % der Layouts ab und ersetzen display:flex;justify-content-Wildwuchs (Ursache
   vieler Ausrichtungs-Bugs, z. B. Euro-Spalte 64e1dc48). Aufbauend auf der Spacing-
   Skala (--space-*) und dem Utility-Layer (OP-4 S1). Bewusst NICHT auf Templates
   angewandt → Shipping ist visueller No-op; Views adoptieren sie inkrementell.
   Gap-Größe pro Instanz via --l-gap überschreibbar; Defaults aus der Token-Skala.
   Muster nach „Every Layout" (Stack / Cluster / Grid / Center / Sidebar / Switcher).
   ============================================================================ */

/* Stack — vertikaler Fluss mit gleichmäßigem Abstand zwischen den Kindern. */
.l-stack        { display: flex; flex-direction: column; }
.l-stack > * + * { margin-top: var(--l-gap, var(--space-4)); }
.l-stack--xs { --l-gap: var(--space-1); }
.l-stack--sm { --l-gap: var(--space-2); }
.l-stack--md { --l-gap: var(--space-4); }
.l-stack--lg { --l-gap: var(--space-6); }

/* Cluster — Zeile aus Elementen, die bei Platzmangel umbricht (Tags, Button-Gruppen,
   Toolbar). Ausrichtung über --l-justify / --l-align steuerbar. */
.l-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--l-gap, var(--space-3));
  align-items: var(--l-align, center);
  justify-content: var(--l-justify, flex-start);
}
.l-cluster--between { --l-justify: space-between; }
.l-cluster--end     { --l-justify: flex-end; }
.l-cluster--sm { --l-gap: var(--space-2); }
.l-cluster--lg { --l-gap: var(--space-4); }

/* Grid — responsives Auto-Grid; Spalten füllen sich ab --l-grid-min Breite von selbst
   (kein @media nötig). Für Karten-/Kachel-Raster. */
.l-grid {
  display: grid;
  gap: var(--l-gap, var(--space-4));
  grid-template-columns: repeat(auto-fill, minmax(min(var(--l-grid-min, 240px), 100%), 1fr));
}
.l-grid--sm { --l-gap: var(--space-2); }
.l-grid--lg { --l-gap: var(--space-6); }

/* Center — horizontal zentrierter Inhalts-Container mit Maximalbreite; padding-inline
   hält den Text von den Rändern weg. */
.l-center {
  box-sizing: content-box;
  max-width: var(--l-center-max, 960px);
  margin-inline: auto;
  padding-inline: var(--l-center-pad, var(--space-4));
}

/* Sidebar — Seitenleiste + Hauptinhalt; bricht bei schmalem Viewport untereinander
   um, sobald der Hauptinhalt unter --l-sidebar-contentmin fiele (intrinsisch, ohne
   Breakpoint). --l-sidebar-width setzt die Leistenbreite. */
.l-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--l-gap, var(--space-4));
}
.l-sidebar > .l-sidebar__aside {
  flex-basis: var(--l-sidebar-width, 240px);
  flex-grow: 1;
}
.l-sidebar > .l-sidebar__main {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: var(--l-sidebar-contentmin, 60%);
}

/* Switcher — n gleich breite Elemente nebeneinander, die bei Unterschreiten von
   --l-switcher-threshold gemeinsam auf eine Spalte umbrechen (alles-oder-nichts). */
.l-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--l-gap, var(--space-4));
}
.l-switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--l-switcher-threshold, 480px) - 100%) * 999);
}

/* ═══════════════════════════════════════════════
   Renovation — Komponenten-/Utility-CSS (OP-4 Ph3 S4, Karte ce067683)
   Ersetzt statische inline-styles in templates/renovation/ durch
   token-basierte Klassen. Kein visueller Regress (Werte 1:1 übernommen).
   ═══════════════════════════════════════════════ */

/* Spacing (nicht-kanonische px, 1:1 aus Templates übernommen) */
.reno-mb-6  { margin-bottom: 6px; }
.reno-mb-10 { margin-bottom: 10px; }
.reno-mb-14 { margin-bottom: 14px; }
.reno-mb-20 { margin-bottom: 20px; }
.reno-mt-2  { margin-top: 2px; }
.reno-mt-10 { margin-top: 10px; }
.reno-mt-20 { margin-top: 20px; }
.reno-pad-6-12 { padding: 6px 12px; }
.reno-pad-y4   { padding: 4px 0; }
.reno-modal-foot { margin-top: var(--space-3); padding-top: var(--space-3);
                   border-top: 1px solid var(--border-default); }

/* Flex/Grid Layout */
.reno-flex-2    { flex: 2; }
.reno-flex-g10  { display: flex; gap: 10px; }
.reno-grid-3    { grid-template-columns: repeat(3, 1fr); }
.reno-grid-4    { grid-template-columns: repeat(4, 1fr); }
.reno-grid-5    { grid-template-columns: repeat(5, 1fr); }
.reno-col-span-2 { grid-column: span 2; }

/* Tabellen */
.reno-table       { border-collapse: collapse; }
.reno-table-fixed { table-layout: fixed; }
.reno-w-13        { width: 13%; }

/* Text-Farben (token-basiert) */
.reno-c-primary      { color: var(--color-primary); }
.reno-c-primary-text { color: var(--text-primary); }
.reno-c-blue         { color: var(--color-blue-badge); }
.reno-c-amber        { color: var(--color-amber-badge); }
.reno-c-green        { color: var(--color-green); }
.reno-c-red          { color: var(--color-red); }
.reno-break-word     { word-break: break-word; }
.reno-bg-surface2    { background: var(--bg-surface-2); }

/* Formular-Fehlermeldung */
.reno-form-error { color: var(--color-red); font-size: var(--text-base); margin-bottom: var(--space-2); }

/* Zeilen-Link (Kachel-/Listen-Zeile als Link) */
.reno-row-link { display: flex; align-items: center; gap: var(--space-2);
                 flex: 1; text-decoration: none; min-width: 0; }

/* Status-Badges (klein, gefüllt) */
.reno-badge            { font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 600; }
.reno-badge--green     { background: var(--color-green-dim); color: var(--color-green); }
.reno-badge--red       { background: var(--color-red-dim); color: var(--color-red); }
.reno-badge--primary   { font-size: var(--text-xs); background: var(--color-primary-dim);
                         border: 1px solid var(--color-primary-border); color: var(--brand-600); }

/* Chips (outline) */
.reno-chip-danger        { color: var(--color-red); border-color: rgba(220,38,38,.3);
                           font-size: var(--text-xs); padding: 2px 6px; }
.reno-chip-success       { background: var(--color-green-chip-bg); border-color: var(--color-green-chip-border); color: var(--color-green-chip-text);
                           font-size: var(--text-xs); padding: 2px 6px; }
.reno-chip-success-plain { background: var(--color-green-chip-bg); border-color: var(--color-green-chip-border); color: var(--color-green-chip-text); }

/* ═══════════════════════════════════════════════
   Renovation W4-Redesign (Klickdummy redesign-w4, von Heiner abgenommen)
   Rest-Migration: inline-styles / Hex / <style>-Blöcke aus
   templates/renovation/ → token-basierte Klassen. Nur var(--…)-Tokens,
   keine bare Hex, kein bare --border. W1/W4-Design-System.
   ═══════════════════════════════════════════════ */

/* Zurück-Link / Breadcrumb */
.reno-back { display: inline-block; font-size: var(--text-base); color: var(--text-muted); text-decoration: none; }
.reno-crumbs { margin-bottom: var(--space-4); font-size: var(--text-base); color: var(--text-muted); }
.reno-crumbs a { color: var(--text-muted); }
.reno-pre-line { white-space: pre-line; }
.reno-c-muted { color: var(--text-muted); }
.reno-c-paid { color: var(--color-green-chip-text); }
.reno-empty-inline { opacity: .5; font-size: var(--text-base); }
.reno-mb-8 { margin-bottom: 8px; }
.reno-fs-10 { font-size: 10px; }
.reno-fs-10-muted { font-size: 10px; color: var(--text-muted); font-weight: 400; }
.reno-fs-12 { font-size: var(--text-sm); }
.reno-btn-del { color: var(--color-red); border-color: rgba(var(--color-error-rgb), .35);
                background: rgba(var(--color-error-rgb), .05); }
.reno-inline-4 { display: flex; gap: 4px; flex-shrink: 0; }
.reno-inline-6 { display: flex; gap: 6px; }
.reno-field-row { display: flex; gap: 10px; margin-bottom: 10px; }
.reno-form-section { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted);
                     text-transform: uppercase; margin: 12px 0 4px; }
.reno-num { text-align: right; white-space: nowrap; }
.reno-bt-subtle { border-top: 1px solid var(--border-subtle); }
.reno-filter-btn { flex-shrink: 0; white-space: nowrap; }
.reno-filter-spacer { flex: 1; min-width: 12px; }
.reno-search-inp { width: 220px; flex-shrink: 0; }
.reno-ext-link { opacity: .35; margin-left: 4px; font-size: var(--text-xs); text-decoration: none; }

/* Phasenleiste (phase_bar) */
.reno-phasebar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
                 padding: var(--space-2) var(--space-3); background: var(--bg-surface-2);
                 border: 1px solid var(--border-default); border-radius: var(--radius-md);
                 margin-bottom: var(--space-3); }
.reno-phase { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px;
              border-radius: var(--radius-full); font-size: var(--text-sm); }
.reno-phase--done   { background: var(--color-green-dim); color: var(--color-green-badge); font-weight: 500; }
.reno-phase--active { background: var(--color-primary-dim); color: var(--color-primary-dark); font-weight: 600; }
.reno-phase--todo   { background: var(--bg-page); color: var(--text-muted); font-weight: 400; }
.reno-phase-arrow { color: var(--text-muted); font-size: var(--text-md); flex-shrink: 0; }
.reno-phase-actions { margin-left: auto; display: flex; gap: 6px; flex-shrink: 0; }

/* Notizen / Panel-Titel (tab_overview) */
.reno-notes-text  { margin: 6px 0 0; white-space: pre-wrap; font-size: var(--text-base); }
.reno-notes-empty { margin: 6px 0 0; font-size: var(--text-base); color: var(--text-muted); font-style: italic; }
.reno-table-title { padding: var(--space-3) var(--space-4) var(--space-2); font-weight: 600;
                    font-size: var(--text-base); color: var(--text-primary); }
.reno-shift-badge { background: var(--gray-200); color: var(--text-secondary);
                    border-radius: var(--radius-full); padding: 1px 7px; font-size: var(--text-xs); }
.reno-shift-badge--sm { padding: 1px 5px; font-size: 9px; }

/* Fortschritt (tab_progress) */
.reno-progress { margin-bottom: var(--space-2); }
.reno-progress-head { display: flex; justify-content: space-between; font-size: var(--text-sm); opacity: .7; }
.reno-progress-track { background: var(--border-default); height: 8px; border-radius: 4px; overflow: hidden; }
.reno-progress-fill { background: var(--color-primary); height: 100%; }
.reno-progress-note { font-size: var(--text-base); margin-top: 4px; opacity: .8; }

/* Workflow (tab_workflow) */
.reno-phase-time { font-size: var(--text-sm); opacity: .5; margin-left: var(--space-2); }
.reno-task-list { margin-top: var(--space-3); padding-left: 20px; list-style: none; }
.reno-task-toggle { background: none; border: none; cursor: pointer; color: inherit; }
.reno-task-done { text-decoration: line-through; opacity: .5; }

/* Meilenstein-Zeile (milestone_row) — inline-edit toggelt display via csp_actions.js */
.ms-row { display: flex; align-items: center; gap: var(--space-2); padding: 7px 10px;
          border-radius: var(--radius-md); border: 1px solid var(--border-default);
          border-left: 3px solid var(--border-strong); background: var(--bg-surface-2); }
.ms-row--done    { border-left-color: var(--color-green); }
.ms-row--delayed { border-left-color: var(--status-warn); }
.ms-row__label { flex: 1; cursor: text; color: var(--text-primary); }
.ms-row__date  { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap;
                 cursor: pointer; text-decoration: underline dotted; }
.ms-row__edit  { display: none; flex: 1; border: 1px solid var(--border-default);
                 border-radius: var(--radius-md); padding: 3px 8px; font-size: var(--text-sm);
                 color: var(--text-primary); }
.ms-row__edit-date { display: none; border: 1px solid var(--border-default);
                 border-radius: var(--radius-md); padding: 3px 8px; font-size: var(--text-xs);
                 color: var(--text-primary); }
/* OP-1 (Card 974795e0): Aktions-Button „erledigt setzen" von gruen auf die
   Brand-Akzentfarbe vereinheitlicht (keine gruenen BUTTONS mehr; gruene
   Status-Badges bleiben). Text = --color-primary-dark (#273C8E, AA >=4.5:1). */
.ms-row__done-btn { background: none; border: 1px solid var(--color-primary-border); border-radius: 4px;
                 padding: 3px 8px; font-size: var(--text-xs); color: var(--color-primary-dark);
                 cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.ms-row__status { cursor: pointer; flex-shrink: 0; margin-left: auto; }
.ms-row__status-select { display: none; border: 1px solid var(--border-default); border-radius: 4px;
                 padding: 3px 6px; font-size: var(--text-xs); color: var(--text-secondary);
                 background: var(--bg-surface); cursor: pointer; width: auto; flex-shrink: 0; }

/* Planungsbereiche (tab_planning) */
.reno-area-summary { padding: 10px 14px; cursor: pointer; display: flex;
                     justify-content: space-between; align-items: center; }
.reno-area-sub { font-size: var(--text-xs); color: var(--text-muted); margin-top: 1px; }
.reno-area-count { font-size: var(--text-sm); opacity: .5; }
.reno-area-body { padding: 12px 14px; }

/* Gewerk-/Auftragstabelle (trade_row) */
.reno-trade-head { background: var(--color-primary-dim); }
.reno-trade-head-cell { padding: 6px 6px 6px 10px; }
.reno-linkbtn { background: none; border: none; cursor: pointer; padding: 0;
                font-size: var(--text-base); color: var(--color-primary); text-decoration: underline; }
.reno-td-name { padding: 5px 6px 5px 24px; white-space: nowrap; border-bottom: 1px solid var(--border-default); }
.reno-td-sub  { padding: 5px 8px; font-size: var(--text-base); border-bottom: 1px solid var(--border-default); }
.reno-td-num  { padding: 5px 14px 5px 6px; white-space: nowrap; font-size: var(--text-base);
                text-align: right; border-bottom: 1px solid var(--border-default); }
.reno-td-empty { padding: 5px 24px; opacity: .5; font-size: var(--text-sm); border-bottom: 1px solid var(--border-default); }
.reno-trade-sum { background: var(--color-primary-dim); font-weight: 600; font-size: var(--text-sm); }
.reno-td-sum { padding: 4px 14px 4px 6px; text-align: right; border-bottom: 1px solid var(--border-default); }
.reno-td-sum-label { padding: 4px 10px; border-bottom: 1px solid var(--border-default); color: var(--text-muted); }
.reno-td-ms { padding: 0; }
.reno-ms-list { display: flex; flex-direction: column; gap: 4px; }
.reno-ms-list--pad { padding: 6px 10px 8px; }

/* Finanzen-Gruppen (tab_finances) */
.reno-card-head { padding: 12px 16px; font-weight: 600; border-bottom: 1px solid var(--border-default); }
.reno-fin-group { border: 1px solid var(--border-default); border-radius: var(--radius-md);
                  margin-bottom: 10px; background: var(--bg-surface); }
.reno-fin-summary { padding: 10px 14px; cursor: pointer; list-style: none; display: flex;
                    justify-content: space-between; align-items: center;
                    background: var(--bg-surface-2); border-radius: var(--radius-md); }
.reno-fin-metrics { display: flex; align-items: center; gap: 14px; font-size: var(--text-xs); color: var(--text-muted); }
.reno-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
.reno-dot--green { background: var(--color-green); }
.reno-em-muted { color: var(--text-muted); font-weight: 400; }
.reno-td-indent { padding: 7px 14px 7px 20px; }
.reno-td-num2 { padding: 7px 10px; text-align: right; }
.reno-tfoot { border-top: 2px solid var(--border-default); background: var(--bg-surface-2);
              font-weight: 600; font-size: var(--text-xs); }
.reno-tfoot-label { padding: 6px 14px 6px 20px; color: var(--text-muted); }
.reno-td-num3 { padding: 6px 10px; text-align: right; }

/* Rechnungsbaum (_invoice_tree) */
.reno-inv-tree { border: 1px solid var(--color-primary-border); border-radius: 8px;
                 overflow: hidden; margin-bottom: 8px; }
.reno-inv-offer { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--color-primary-dim); }
.reno-inv-body { padding: 6px 8px 8px 20px; background: var(--bg-surface); }
.reno-inv-advance { display: flex; align-items: center; gap: 8px; padding: 5px 8px;
                    background: var(--status-warn-dim); border: 1px solid var(--color-gold-border);
                    border-radius: 5px; margin-bottom: 4px; }
.reno-inv-sr { border: 1px solid rgba(var(--color-info-rgb), .35); border-radius: var(--radius-sm);
               overflow: hidden; margin-bottom: 4px; }
.reno-inv-sr-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px;
                    background: rgba(var(--color-info-rgb), .08); }
.reno-inv-sr-body { padding: 5px 6px 6px 18px; background: var(--bg-surface); }
.reno-inv-sr-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px;
                   background: rgba(var(--color-info-rgb), .08); border: 1px solid rgba(var(--color-info-rgb), .35);
                   border-radius: var(--radius-sm); margin-bottom: 4px; }
.reno-inv-offer-title { flex: 1; font-size: var(--text-base); font-weight: 600; color: var(--color-primary); }
.reno-inv-actions { display: flex; gap: 6px; margin-top: 6px; }
.reno-clickable { cursor: pointer; }

/* Modals / Formulare */
.reno-select-full { width: 100%; padding: 8px 10px; border: 1px solid var(--border-default);
                    border-radius: var(--radius-md); font-size: var(--text-md); box-sizing: border-box; }
.reno-name-input { font-size: 18px; font-weight: 600; border: 1px solid var(--border-default);
                   border-radius: var(--radius-sm); padding: 2px 6px; width: 320px; }
.reno-name-span { cursor: pointer; text-decoration: underline dotted; font-size: 18px;
                  font-weight: 600; color: var(--text-primary); }
.reno-check-label { display: flex; align-items: center; gap: 8px; font-weight: normal;
                    font-size: var(--text-base); padding: 2px 0; }
.reno-sum-val { font-weight: 700; font-size: 15px; }
.reno-scroll-320 { max-height: 320px; overflow-y: auto; padding-right: 2px; }
.reno-scroll-300 { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto; }
.reno-scroll-220 { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.reno-custom-block { padding-top: var(--space-3); border-top: 1px solid var(--border-default); margin-top: var(--space-2); }
.trade-option { display: flex; align-items: center; gap: 8px; padding: 6px 10px;
                border-radius: 5px; cursor: pointer; border: 1px solid transparent; }
.reno-modal-560 { max-width: 560px; overflow-y: auto; max-height: 90vh; }
.reno-modal-sub { margin: 4px 0 0; font-size: var(--text-sm); color: var(--text-muted); }
.reno-section-divider { border-top: 1px solid var(--border-default); padding-top: var(--space-4); }
.tpl-card { border: 1px solid var(--border-default); border-radius: var(--radius-md);
            padding: 10px 14px; cursor: pointer; display: flex; align-items: flex-start;
            gap: 10px; transition: border .15s; }
.tpl-card--lg { padding: 14px 16px; }
.reno-radio { margin-top: 3px; accent-color: var(--color-primary); flex-shrink: 0; }
.reno-tpl-desc { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px;
                 word-break: break-word; overflow-wrap: anywhere; }
.reno-tpl-item { opacity: .7; }

/* Sanierungs-Liste (renovation_list — aus <style>-Block migriert) */
.rl-summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 20px; }
.rl-open-red { color: var(--color-red); }
.rl-filter { background: var(--bg-surface); border: 1px solid var(--border-default);
             border-radius: var(--radius-lg); padding: 12px 14px; margin-bottom: 14px;
             display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.rl-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 130px; }
.rl-field--wide { min-width: 140px; }
.rl-field--narrow { min-width: 120px; }
.rl-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted);
            text-transform: uppercase; letter-spacing: .04em; }
.rl-input { padding: 7px 10px; border: 1px solid var(--border-default);
            border-radius: var(--radius-md); font-size: var(--text-base); color: var(--text-primary); }
.rl-input--select { background: var(--bg-surface); }
.rl-reset { padding: 7px 14px; background: var(--bg-surface-2); border: 1px solid var(--border-default);
            border-radius: var(--radius-md); font-size: var(--text-base); font-weight: 500;
            color: var(--text-muted); text-decoration: none; white-space: nowrap;
            display: inline-flex; align-items: center; }
.rl-list { display: flex; flex-direction: column; gap: 12px; }
.rl-card { background: var(--bg-surface); border: 1px solid var(--border-default);
           border-radius: var(--radius-lg); padding: 16px; }
.rl-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.rl-card-title { font-weight: 600; font-size: 15px; color: var(--text-primary); text-decoration: none; }
.rl-building { font-size: var(--text-sm); margin-bottom: 8px; }
.rl-building-name { color: var(--color-primary-dark); font-weight: 600; }
.rl-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; font-size: var(--text-xs);
            color: var(--text-muted); margin-bottom: 10px; }
.rl-date-key { font-weight: 600; color: var(--text-secondary); }
.rl-bar { background: var(--bg-page); border-radius: var(--radius-sm); height: 10px; overflow: hidden;
          display: flex; margin-bottom: 6px; }
.rl-seg { height: 100%; }
.rl-seg--paid { background: var(--color-green); }
.rl-seg--comm { background: var(--color-blue); }
.rl-seg--open { background: var(--color-red-light); }
.rl-legend { display: flex; gap: 12px; font-size: 10px; color: var(--text-muted); font-weight: 500; margin-bottom: 10px; }
.rl-sq { font-size: var(--text-md); line-height: 1; }
.rl-sq--paid { color: var(--color-green); }
.rl-sq--comm { color: var(--color-blue); }
.rl-sq--open { color: var(--color-red-light); }
.rl-sq--none { color: var(--border-strong); }
.rl-legend-open { color: var(--color-red); font-weight: 600; }
.rl-metrics { display: flex; gap: 16px; font-size: var(--text-sm); border-top: 1px solid var(--border-subtle); padding-top: 10px; }
.rl-metric { color: var(--text-muted); }
.rl-metric-value { color: var(--text-primary); }
.rl-open-amount { color: var(--color-red); font-weight: 600; margin-left: auto; }
.rl-paid-full { color: var(--color-green-chip-text); font-weight: 600; margin-left: auto; }
.rl-open-muted { color: var(--text-muted); margin-left: auto; }

/* ═══════════════════════════════════════════════════════════════════
   W4 · SANIERUNGEN — Struktur-Umbau auf den abgenommenen Klickdummy
   (clickdummy/redesign-w4). Additive, token-basierte Komponenten;
   reine Visualisierung. Nur var(--…)-Tokens, kein bare Hex/--border.
   Ergänzt die bereits vorhandenen W1/W2-Klassen (.page-head, .panel,
   .pill, .btn-*, .cell-*, .kv, .tabs/.tab).
   ═══════════════════════════════════════════════════════════════════ */

/* ---- Kennzahl-Kacheln ---- */
.stat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); margin-bottom: var(--space-5); }
.stat { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
        padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-sm); }
.stat .k { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); }
.stat .v { font-size: var(--fs-2xl); font-weight: 700; margin-top: 6px; letter-spacing: -.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stat .trend { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); font-weight: 600; margin-top: 4px; }
.stat .trend.up { color: var(--success); }
.stat .trend.down { color: var(--danger); }
.w4-stat-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---- Filter-Toolbar (Liste/Rechnungen) ---- */
.w4-toolbar { display: flex; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.w4-fg { display: flex; flex-direction: column; gap: 5px; }
.w4-fg label { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.w4-filter { height: 38px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius);
             background: var(--bg-surface); font: inherit; color: var(--text); }
.w4-filter:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100); }
.w4-spacer { flex: 1; min-width: 12px; }

/* ---- Zurück-Link ---- */
.w4-back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-weight: 600;
           font-size: var(--fs-sm); margin-bottom: var(--space-3); text-decoration: none; }
.w4-back svg { width: 16px; height: 16px; }

/* ---- Hero (Detail-Kopf) ---- */
.w4-hero { display: flex; gap: var(--space-5); align-items: flex-start; margin-bottom: var(--space-5); flex-wrap: wrap; }
.w4-hero .thumb { width: 120px; height: 96px; border-radius: var(--radius-lg); flex: none;
                  border: 1px solid var(--border-default); background: var(--brand-050); color: var(--brand);
                  display: grid; place-items: center; }
.w4-hero .thumb svg { width: 42px; height: 42px; }
.w4-hero .info { flex: 1; min-width: 240px; }
.w4-hero h1 { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.4px; }
.w4-hero .addr { color: var(--brand-700); font-weight: 600; margin-top: 2px; }
.w4-hero .meta { display: flex; gap: var(--space-6); margin-top: var(--space-4); flex-wrap: wrap; }
.w4-hero .meta .m .l { color: var(--text-faint); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; }
.w4-hero .meta .m .n { font-weight: 700; font-size: var(--fs-lg); margin-top: 2px; }

/* ---- Key/Value-Liste (breitere Labelspalte) ---- */
.w4-kv { display: grid; grid-template-columns: 180px 1fr; gap: 12px var(--space-4); margin: 0; }
.w4-kv dt { color: var(--text-muted); font-size: var(--fs-sm); }
.w4-kv dd { font-weight: 500; }

/* ---- Mehrsegment-Fortschritt (bezahlt / beauftragt / offen) ---- */
.w4-bar-multi { display: flex; height: 10px; border-radius: var(--radius-pill); overflow: hidden; background: var(--gray-100); }
.w4-bar-multi > span { height: 100%; }
.w4-bar-multi .seg-paid { background: var(--success); }
.w4-bar-multi .seg-comm { background: var(--info); }
.w4-bar-multi .seg-open { background: var(--danger); }
.w4-legend { display: flex; gap: var(--space-4); font-size: var(--fs-xs); color: var(--text-muted); font-weight: 500;
             margin-top: var(--space-2); flex-wrap: wrap; }
.w4-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.w4-legend .dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.w4-legend .dot.paid { background: var(--success); }
.w4-legend .dot.comm { background: var(--info); }
.w4-legend .dot.open { background: var(--danger); }

/* ---- Breiten-Utilities (Fortschrittsbalken; dynamische % via nonce'd JS) ---- */
.w4-w-0{width:0}.w4-w-5{width:5%}.w4-w-10{width:10%}.w4-w-15{width:15%}.w4-w-20{width:20%}
.w4-w-25{width:25%}.w4-w-30{width:30%}.w4-w-35{width:35%}.w4-w-40{width:40%}.w4-w-45{width:45%}
.w4-w-50{width:50%}.w4-w-55{width:55%}.w4-w-60{width:60%}.w4-w-65{width:65%}.w4-w-70{width:70%}
.w4-w-75{width:75%}.w4-w-80{width:80%}.w4-w-85{width:85%}.w4-w-90{width:90%}.w4-w-95{width:95%}.w4-w-100{width:100%}

/* ---- Tabellen-Helfer ---- */
.w4-row { cursor: pointer; }
.w4-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
thead th.w4-num { text-align: right; }
.w4-group td { background: var(--bg-surface-2); font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase;
               letter-spacing: .05em; color: var(--text-muted); padding-top: 9px; padding-bottom: 9px; }
.w4-total td { border-top: 2px solid var(--border-strong); font-weight: 700; }
.w4-total td:first-child { text-transform: uppercase; font-size: var(--fs-sm); letter-spacing: .04em; }

/* ---- Text-Farbhelfer (semantisch) ---- */
.w4-danger  { color: var(--danger);  font-weight: 600; }
.w4-success { color: var(--success); font-weight: 600; }
.w4-primary { color: var(--brand-700); font-weight: 600; }
.w4-muted   { color: var(--text-muted); }
.w4-strong  { font-weight: 700; }

/* ---- Hinweis-/Formelbox ---- */
.w4-note { background: var(--info-bg); color: var(--info); border-radius: var(--radius);
           padding: var(--space-3) var(--space-4); font-size: var(--fs-sm); margin-bottom: var(--space-4);
           display: flex; gap: var(--space-2); align-items: flex-start; }
.w4-note svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }

/* ---- Layout-Helfer ---- */
.w4-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
.w4-mb-4 { margin-bottom: var(--space-4); }
.w4-mb-5 { margin-bottom: var(--space-5); }
.w4-mt-4 { margin-top: var(--space-4); }

/* ---- Timeline (Meilensteine) ---- */
.w4-timeline { position: relative; margin: 0; padding: var(--space-2) 0 var(--space-2) var(--space-2); }
.w4-timeline::before { content: ""; position: absolute; left: 8px; top: 10px; bottom: 10px; width: 2px; background: var(--border-default); }
.w4-tl { position: relative; padding: 0 0 var(--space-5) var(--space-5); }
.w4-tl:last-child { padding-bottom: var(--space-2); }
.w4-tl::before { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%;
                 background: var(--bg-surface); border: 3px solid var(--brand); box-sizing: border-box; }
.w4-tl.done::before    { background: var(--success); border-color: var(--success); }
.w4-tl.delayed::before { background: var(--warning); border-color: var(--warning); }
.w4-tl.open::before    { background: var(--bg-surface); border-color: var(--info); }
.w4-tl .d { font-size: var(--fs-xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.w4-tl .t { font-weight: 600; margin-top: 3px; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.w4-tl .who { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 3px; }

/* ---- Mail-Verlauf ---- */
.w4-mail-item { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--gray-100); }
.w4-mail-item:last-child { border-bottom: none; }
.w4-mail-ava { width: 38px; height: 38px; border-radius: 50%; background: var(--brand-050); color: var(--brand-700);
               display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm); flex: none; }
.w4-mail-ava.out { background: var(--gray-100); color: var(--gray-600); }
.w4-mail-b { flex: 1; min-width: 0; }
.w4-mail-b .top { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; }
.w4-mail-b .subj { font-weight: 600; }
.w4-mail-b .when { color: var(--text-faint); font-size: var(--fs-xs); white-space: nowrap; }
.w4-mail-b .from { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 1px; }
.w4-mail-b .prev { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 5px; line-height: 1.5; }

@media (max-width: 768px) {
  .stat-grid, .w4-stat-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .w4-grid-2 { grid-template-columns: 1fr; }
  .w4-kv { grid-template-columns: 1fr; gap: 4px 0; }
}

/* ═══════════════════════════════════════════════
   Tenants — Komponenten-CSS (OP-4 Ph3 S4, Karte ce067683)
   Ersetzt statische inline-styles in tenants/-Templates durch
   token-basierte Komponenten-/Utility-Klassen. Kein visueller Regress.
   ═══════════════════════════════════════════════ */

/* Onboarding-Banner (_onboarding_banner.html) */
.onboarding-banner        { margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); }
.onboarding-banner__head  { display: flex; justify-content: space-between; align-items: center; }
.onboarding-banner__title { display: flex; align-items: center; gap: var(--space-3); }
.onboarding-banner__title h3 { margin: 0; }
.onboarding-banner__dismiss  { margin: 0; }
.onboarding-banner__list  { list-style: none; padding: 0; margin: var(--space-2) 0 0; }
.onboarding-banner__item  { padding: var(--space-1) 0; }
.onboarding-banner__item.is-locked { opacity: .5; }

/* Trial-UX banner (Trial-A4): Resttage-Countdown + Trial-Ended-Zustand. */
.trial-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  margin: var(--space-3) 0; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-primary-border);
  background: var(--color-primary-dim);
  border-radius: var(--radius-md);
}
.trial-banner__body  { display: flex; flex-direction: column; gap: var(--space-1); }
.trial-banner__title { font-weight: 600; }
.trial-banner__text  { font-size: var(--text-sm); opacity: .8; }
.trial-banner__cta   { flex: 0 0 auto; margin-left: auto; }
.trial-banner--urgent {
  border-color: var(--status-warn);
  background: var(--status-warn-dim);
}
.trial-banner--urgent .trial-banner__title { color: var(--status-warn); }
.trial-banner--ended {
  border-color: var(--status-danger);
  background: var(--color-red-dim);
}
.trial-banner--ended .trial-banner__title { color: var(--status-danger); }

/* Danger-Zone (settings.html) — Rahmen dekorativ (red-light),
   Überschrift AA-konform (red-badge >=4.5:1). */
.danger-zone      { margin-top: var(--space-8); padding: var(--space-4);
                    border: 1px solid var(--color-red-light); border-radius: var(--radius-sm); }
.danger-zone > h2 { color: var(--color-red-badge); }

/* ═══════════════════════════════════════════════════════════════════════════
   Dashboard v1.0 — dynamisches Raster (Cards a2685420 · c89a65f2 / S1·S2·S5)
   12-Spalten-Desktop-Raster, Span-Klassen (SSR, funktioniert ohne JS), Edit-
   Modus-Affordanzen, Mobile-Stacking. Ausschließlich Design-Tokens, keine
   Inline-Styles — Dark/Light kommt gratis über die --bg-/--text-/--border-Tokens.
   ═══════════════════════════════════════════════════════════════════════════ */
.dash-v1 { display: flex; flex-direction: column; gap: var(--space-5); }
.dash-v1__head { display: flex; align-items: center; justify-content: space-between;
                 gap: var(--space-4); flex-wrap: wrap; }
.dash-v1__title { margin: 0; font-size: var(--text-xl); color: var(--text-primary); }
.dash-v1__toolbar { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
/* "Fertig" nur im Edit-Modus, "Bearbeiten" nur außerhalb. */
.dash-v1__done { display: none; }
body.dashboard-editing .dash-v1__done { display: inline-flex; }
body.dashboard-editing .dash-v1__edit { display: none; }

.dash-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 96px;
  gap: var(--space-4);
}

.dash-widget {
  position: relative;
  grid-column-end: span 3;
  grid-row-end: span 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.dash-widget__body { flex: 1 1 auto; min-height: 0; padding: var(--space-4); overflow: auto; }
.dash-widget__loading { color: var(--text-muted); font-size: var(--text-sm); }

/* Spaltenbreite (1..12) — im Grid wird ein zu großer Span automatisch auf die
   verfügbare Spaltenzahl geklemmt (→ Tablet/Mobile stapeln von selbst). */
.dash-widget--w1  { grid-column-end: span 1; }
.dash-widget--w2  { grid-column-end: span 2; }
.dash-widget--w3  { grid-column-end: span 3; }
.dash-widget--w4  { grid-column-end: span 4; }
.dash-widget--w5  { grid-column-end: span 5; }
.dash-widget--w6  { grid-column-end: span 6; }
.dash-widget--w7  { grid-column-end: span 7; }
.dash-widget--w8  { grid-column-end: span 8; }
.dash-widget--w9  { grid-column-end: span 9; }
.dash-widget--w10 { grid-column-end: span 10; }
.dash-widget--w11 { grid-column-end: span 11; }
.dash-widget--w12 { grid-column-end: span 12; }
/* Zeilenhöhe (1..6). */
.dash-widget--h1 { grid-row-end: span 1; }
.dash-widget--h2 { grid-row-end: span 2; }
.dash-widget--h3 { grid-row-end: span 3; }
.dash-widget--h4 { grid-row-end: span 4; }
.dash-widget--h5 { grid-row-end: span 5; }
.dash-widget--h6 { grid-row-end: span 6; }

/* Echte 2D-Platzierung (Card 9b47759b): explizite Startspalte/-zeile aus
   pos_x/pos_y. Zusammen mit der Span-Breite/-Höhe belegt jede Kachel damit
   feste Rasterzellen — kein grid-auto-flow-Stapeln/Überlappen mehr, und leere
   Zellen weiter unten sind gezielt bestückbar. */
.dash-widget--x0  { grid-column-start: 1; }
.dash-widget--x1  { grid-column-start: 2; }
.dash-widget--x2  { grid-column-start: 3; }
.dash-widget--x3  { grid-column-start: 4; }
.dash-widget--x4  { grid-column-start: 5; }
.dash-widget--x5  { grid-column-start: 6; }
.dash-widget--x6  { grid-column-start: 7; }
.dash-widget--x7  { grid-column-start: 8; }
.dash-widget--x8  { grid-column-start: 9; }
.dash-widget--x9  { grid-column-start: 10; }
.dash-widget--x10 { grid-column-start: 11; }
.dash-widget--x11 { grid-column-start: 12; }
.dash-widget--y0 { grid-row-start: 1; }
.dash-widget--y1 { grid-row-start: 2; }
.dash-widget--y2 { grid-row-start: 3; }
.dash-widget--y3 { grid-row-start: 4; }
.dash-widget--y4 { grid-row-start: 5; }
.dash-widget--y5 { grid-row-start: 6; }
.dash-widget--y6 { grid-row-start: 7; }
.dash-widget--y7 { grid-row-start: 8; }
.dash-widget--y8 { grid-row-start: 9; }
.dash-widget--y9 { grid-row-start: 10; }
.dash-widget--y10 { grid-row-start: 11; }
.dash-widget--y11 { grid-row-start: 12; }
.dash-widget--y12 { grid-row-start: 13; }
.dash-widget--y13 { grid-row-start: 14; }
.dash-widget--y14 { grid-row-start: 15; }
.dash-widget--y15 { grid-row-start: 16; }
.dash-widget--y16 { grid-row-start: 17; }
.dash-widget--y17 { grid-row-start: 18; }
.dash-widget--y18 { grid-row-start: 19; }
.dash-widget--y19 { grid-row-start: 20; }
.dash-widget--y20 { grid-row-start: 21; }
.dash-widget--y21 { grid-row-start: 22; }
.dash-widget--y22 { grid-row-start: 23; }
.dash-widget--y23 { grid-row-start: 24; }
.dash-widget--y24 { grid-row-start: 25; }
.dash-widget--y25 { grid-row-start: 26; }
.dash-widget--y26 { grid-row-start: 27; }
.dash-widget--y27 { grid-row-start: 28; }
.dash-widget--y28 { grid-row-start: 29; }
.dash-widget--y29 { grid-row-start: 30; }
.dash-widget--y30 { grid-row-start: 31; }
.dash-widget--y31 { grid-row-start: 32; }
.dash-widget--y32 { grid-row-start: 33; }
.dash-widget--y33 { grid-row-start: 34; }
.dash-widget--y34 { grid-row-start: 35; }
.dash-widget--y35 { grid-row-start: 36; }
.dash-widget--y36 { grid-row-start: 37; }
.dash-widget--y37 { grid-row-start: 38; }
.dash-widget--y38 { grid-row-start: 39; }
.dash-widget--y39 { grid-row-start: 40; }
.dash-widget--y40 { grid-row-start: 41; }
.dash-widget--y41 { grid-row-start: 42; }
.dash-widget--y42 { grid-row-start: 43; }
.dash-widget--y43 { grid-row-start: 44; }
.dash-widget--y44 { grid-row-start: 45; }
.dash-widget--y45 { grid-row-start: 46; }
.dash-widget--y46 { grid-row-start: 47; }
.dash-widget--y47 { grid-row-start: 48; }
.dash-widget--y48 { grid-row-start: 49; }
.dash-widget--y49 { grid-row-start: 50; }
.dash-widget--y50 { grid-row-start: 51; }
.dash-widget--y51 { grid-row-start: 52; }
.dash-widget--y52 { grid-row-start: 53; }
.dash-widget--y53 { grid-row-start: 54; }
.dash-widget--y54 { grid-row-start: 55; }
.dash-widget--y55 { grid-row-start: 56; }
.dash-widget--y56 { grid-row-start: 57; }
.dash-widget--y57 { grid-row-start: 58; }
.dash-widget--y58 { grid-row-start: 59; }
.dash-widget--y59 { grid-row-start: 60; }
.dash-widget--y60 { grid-row-start: 61; }
.dash-widget--y61 { grid-row-start: 62; }
.dash-widget--y62 { grid-row-start: 63; }
.dash-widget--y63 { grid-row-start: 64; }
.dash-widget--y64 { grid-row-start: 65; }
.dash-widget--y65 { grid-row-start: 66; }
.dash-widget--y66 { grid-row-start: 67; }
.dash-widget--y67 { grid-row-start: 68; }
.dash-widget--y68 { grid-row-start: 69; }
.dash-widget--y69 { grid-row-start: 70; }
.dash-widget--y70 { grid-row-start: 71; }
.dash-widget--y71 { grid-row-start: 72; }
.dash-widget--y72 { grid-row-start: 73; }
.dash-widget--y73 { grid-row-start: 74; }
.dash-widget--y74 { grid-row-start: 75; }
.dash-widget--y75 { grid-row-start: 76; }
.dash-widget--y76 { grid-row-start: 77; }
.dash-widget--y77 { grid-row-start: 78; }
.dash-widget--y78 { grid-row-start: 79; }
.dash-widget--y79 { grid-row-start: 80; }
.dash-widget--y80 { grid-row-start: 81; }
.dash-widget--y81 { grid-row-start: 82; }
.dash-widget--y82 { grid-row-start: 83; }
.dash-widget--y83 { grid-row-start: 84; }
.dash-widget--y84 { grid-row-start: 85; }
.dash-widget--y85 { grid-row-start: 86; }
.dash-widget--y86 { grid-row-start: 87; }
.dash-widget--y87 { grid-row-start: 88; }
.dash-widget--y88 { grid-row-start: 89; }
.dash-widget--y89 { grid-row-start: 90; }
.dash-widget--y90 { grid-row-start: 91; }
.dash-widget--y91 { grid-row-start: 92; }
.dash-widget--y92 { grid-row-start: 93; }
.dash-widget--y93 { grid-row-start: 94; }
.dash-widget--y94 { grid-row-start: 95; }
.dash-widget--y95 { grid-row-start: 96; }
.dash-widget--y96 { grid-row-start: 97; }
.dash-widget--y97 { grid-row-start: 98; }
.dash-widget--y98 { grid-row-start: 99; }
.dash-widget--y99 { grid-row-start: 100; }
.dash-widget--y100 { grid-row-start: 101; }
.dash-widget--y101 { grid-row-start: 102; }
.dash-widget--y102 { grid-row-start: 103; }
.dash-widget--y103 { grid-row-start: 104; }
.dash-widget--y104 { grid-row-start: 105; }
.dash-widget--y105 { grid-row-start: 106; }
.dash-widget--y106 { grid-row-start: 107; }
.dash-widget--y107 { grid-row-start: 108; }
.dash-widget--y108 { grid-row-start: 109; }
.dash-widget--y109 { grid-row-start: 110; }
.dash-widget--y110 { grid-row-start: 111; }
.dash-widget--y111 { grid-row-start: 112; }
.dash-widget--y112 { grid-row-start: 113; }
.dash-widget--y113 { grid-row-start: 114; }
.dash-widget--y114 { grid-row-start: 115; }
.dash-widget--y115 { grid-row-start: 116; }
.dash-widget--y116 { grid-row-start: 117; }
.dash-widget--y117 { grid-row-start: 118; }
.dash-widget--y118 { grid-row-start: 119; }
.dash-widget--y119 { grid-row-start: 120; }
.dash-widget--y120 { grid-row-start: 121; }
.dash-widget--y121 { grid-row-start: 122; }
.dash-widget--y122 { grid-row-start: 123; }
.dash-widget--y123 { grid-row-start: 124; }
.dash-widget--y124 { grid-row-start: 125; }
.dash-widget--y125 { grid-row-start: 126; }
.dash-widget--y126 { grid-row-start: 127; }
.dash-widget--y127 { grid-row-start: 128; }
.dash-widget--y128 { grid-row-start: 129; }
.dash-widget--y129 { grid-row-start: 130; }
.dash-widget--y130 { grid-row-start: 131; }
.dash-widget--y131 { grid-row-start: 132; }
.dash-widget--y132 { grid-row-start: 133; }
.dash-widget--y133 { grid-row-start: 134; }
.dash-widget--y134 { grid-row-start: 135; }
.dash-widget--y135 { grid-row-start: 136; }
.dash-widget--y136 { grid-row-start: 137; }
.dash-widget--y137 { grid-row-start: 138; }
.dash-widget--y138 { grid-row-start: 139; }
.dash-widget--y139 { grid-row-start: 140; }
.dash-widget--y140 { grid-row-start: 141; }
.dash-widget--y141 { grid-row-start: 142; }
.dash-widget--y142 { grid-row-start: 143; }
.dash-widget--y143 { grid-row-start: 144; }
.dash-widget--y144 { grid-row-start: 145; }
.dash-widget--y145 { grid-row-start: 146; }
.dash-widget--y146 { grid-row-start: 147; }
.dash-widget--y147 { grid-row-start: 148; }
.dash-widget--y148 { grid-row-start: 149; }
.dash-widget--y149 { grid-row-start: 150; }
.dash-widget--y150 { grid-row-start: 151; }
.dash-widget--y151 { grid-row-start: 152; }
.dash-widget--y152 { grid-row-start: 153; }
.dash-widget--y153 { grid-row-start: 154; }
.dash-widget--y154 { grid-row-start: 155; }
.dash-widget--y155 { grid-row-start: 156; }
.dash-widget--y156 { grid-row-start: 157; }
.dash-widget--y157 { grid-row-start: 158; }
.dash-widget--y158 { grid-row-start: 159; }
.dash-widget--y159 { grid-row-start: 160; }
.dash-widget--y160 { grid-row-start: 161; }
.dash-widget--y161 { grid-row-start: 162; }
.dash-widget--y162 { grid-row-start: 163; }
.dash-widget--y163 { grid-row-start: 164; }
.dash-widget--y164 { grid-row-start: 165; }
.dash-widget--y165 { grid-row-start: 166; }
.dash-widget--y166 { grid-row-start: 167; }
.dash-widget--y167 { grid-row-start: 168; }
.dash-widget--y168 { grid-row-start: 169; }
.dash-widget--y169 { grid-row-start: 170; }
.dash-widget--y170 { grid-row-start: 171; }
.dash-widget--y171 { grid-row-start: 172; }
.dash-widget--y172 { grid-row-start: 173; }
.dash-widget--y173 { grid-row-start: 174; }
.dash-widget--y174 { grid-row-start: 175; }
.dash-widget--y175 { grid-row-start: 176; }
.dash-widget--y176 { grid-row-start: 177; }
.dash-widget--y177 { grid-row-start: 178; }
.dash-widget--y178 { grid-row-start: 179; }
.dash-widget--y179 { grid-row-start: 180; }
.dash-widget--y180 { grid-row-start: 181; }
.dash-widget--y181 { grid-row-start: 182; }
.dash-widget--y182 { grid-row-start: 183; }
.dash-widget--y183 { grid-row-start: 184; }
.dash-widget--y184 { grid-row-start: 185; }
.dash-widget--y185 { grid-row-start: 186; }
.dash-widget--y186 { grid-row-start: 187; }
.dash-widget--y187 { grid-row-start: 188; }
.dash-widget--y188 { grid-row-start: 189; }
.dash-widget--y189 { grid-row-start: 190; }
.dash-widget--y190 { grid-row-start: 191; }
.dash-widget--y191 { grid-row-start: 192; }
.dash-widget--y192 { grid-row-start: 193; }
.dash-widget--y193 { grid-row-start: 194; }
.dash-widget--y194 { grid-row-start: 195; }
.dash-widget--y195 { grid-row-start: 196; }
.dash-widget--y196 { grid-row-start: 197; }
.dash-widget--y197 { grid-row-start: 198; }
.dash-widget--y198 { grid-row-start: 199; }
.dash-widget--y199 { grid-row-start: 200; }

/* Edit-Affordanzen: nur im Edit-Modus (.is-editing am Grid) sichtbar. */
.dash-widget__controls { position: absolute; top: var(--space-1); right: var(--space-1);
                         display: none; gap: var(--space-1); z-index: 2; }
.dash-widget__handle, .dash-widget__remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; line-height: 1;
  background: var(--bg-surface); color: var(--text-secondary);
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); cursor: pointer;
}
/* AC1: Griff = Greif-Cursor; AC7: kein Touch-Scroll, sonst wird der Drag zum
   Seiten-Scroll. */
.dash-widget__handle { cursor: grab; touch-action: none; }
.dash-widget__handle:active { cursor: grabbing; }
.dash-widget__remove:hover { color: var(--color-red-badge); border-color: var(--color-red-light); }

/* ⚙-Konfig: immer sichtbar (unabhängig vom Edit-Modus, Widget-Konfig-Framework
   S1). Sitzt oben links, gespiegelt zu den Edit-Affordanzen oben rechts. */
.dash-widget__config {
  position: absolute; top: var(--space-1); left: var(--space-1); z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; line-height: 1;
  background: var(--bg-surface); color: var(--text-secondary);
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); cursor: pointer; opacity: 0;
  transition: opacity var(--transition), color var(--transition), border-color var(--transition);
}
.dash-widget:hover .dash-widget__config,
.dash-widget__config:focus-visible { opacity: 1; }
.dash-widget__config:hover { color: var(--color-primary); border-color: var(--color-primary-border); }

/* ── Drag-Vorschau + Auto-Reflow (Card 00d14f70) ───────────────────────────
   AC2: blau gestrichelter Platzhalter an der Zielposition (Original-Span).
   AC3: die übrigen Kacheln gleiten während des Ziehens (~0.18s ease) — die
        Transition liegt hier, das Invertieren macht die FLIP-Logik im JS.
   Geist (.is-ghost): die gezogene Kachel folgt position:fixed dem Cursor. */
.dash-grid.is-editing .dash-widget { transition: transform 0.18s ease; }
.dash-drag-placeholder {
  border: 2px dashed var(--color-primary);
  background: var(--color-primary-dim);
  border-radius: var(--radius-md);
  box-shadow: none;
  pointer-events: none;
}
/* Card 2c4d3262 ("Platz schaffen"): verdrängte Kacheln weichen aus und werden
   kurz blau umrandet, damit sichtbar ist, was gerade weggerückt ist. Positions-
   änderung (x/y-Klassen) gleitet über die bestehende .is-editing-Transition. */
.dash-widget.is-pushed { outline: 2px dashed var(--color-primary); outline-offset: -2px; }

/* AC1: sichtbares 12-Spalten-Raster NUR im Edit-Modus. Als Overlay hinter den
   Kacheln (Card 9b47759b). Zellraster = Spaltenbreite x (Zeilenhöhe + gap). */
.dash-grid { position: relative; }
.dash-grid.is-editing {
  background-image:
    linear-gradient(to right, var(--color-primary-border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-primary-border) 1px, transparent 1px);
  background-size:
    calc((100% + var(--space-4)) / 12) calc(96px + var(--space-4));
  background-position: 0 0;
}
.dash-widget.is-ghost {
  position: fixed;
  z-index: 60;
  margin: 0;
  opacity: 0.75;
  pointer-events: none;
  cursor: grabbing;
  box-shadow: var(--shadow-lg);
  transition: none;
}
.dash-widget__resize { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px;
                       display: none; cursor: nwse-resize; border-radius: 2px;
                       background: var(--color-primary-dim); }
.dash-grid.is-editing .dash-widget { outline: 1px dashed var(--color-primary-border); cursor: move; }
.dash-grid.is-editing .dash-widget__controls { display: inline-flex; }
.dash-grid.is-editing .dash-widget__resize { display: block; }

/* ── S2 (54956a18): universelle Widget-Fähigkeiten ────────────────────────
   (1) Sticky-Header  (2) ⤢ „Groß aufziehen“-Modal. Beide gelten für ALLE
   Widget-Typen über EINE Mechanik (kein Sonderweg pro Typ). */

/* ⤢-Aufzieh-Button: dezent oben rechts, erscheint bei Hover/Fokus. Im
   Edit-Modus ausgeblendet (dort zählen Zieh-/Resize-/Entfernen-Controls). */
.dash-widget__expand {
  position: absolute; top: var(--space-1); right: var(--space-1); z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; line-height: 1;
  background: var(--bg-surface); color: var(--text-secondary);
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); cursor: pointer;
  opacity: 0; transition: opacity var(--transition), border-color var(--transition);
}
.dash-widget:hover .dash-widget__expand,
.dash-widget__expand:focus-visible { opacity: 1; }
.dash-widget__expand:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
/* Touch-Geräte ohne Hover: dauerhaft sichtbar, sonst unerreichbar. */
@media (hover: none) { .dash-widget__expand { opacity: 1; } }
.dash-grid.is-editing .dash-widget__expand { display: none; }

/* Expand-Modal-Karte (im bestehenden #dash-modal-Overlay). */
.dash-expand {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 1100px; width: 100%;
  max-height: calc(100vh - var(--space-10) * 2);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.dash-expand__close {
  position: absolute; top: var(--space-2); right: var(--space-2); z-index: 4;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; line-height: 1; font-size: var(--text-lg);
  background: var(--bg-surface); color: var(--text-secondary);
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); cursor: pointer;
}
.dash-expand__close:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.dash-expand__body {
  flex: 1 1 auto; min-height: 0;
  padding: var(--space-6);
  overflow: auto;
}
/* In der Aufzieh-Ansicht darf die Tabelle ihre volle Höhe nutzen (alle Einträge). */
.dash-expand__body .dash-table,
.dash-expand__body .dash-chart { min-height: 0; }

.dash-empty { grid-column: 1 / -1; margin: 0; padding: var(--space-8); text-align: center;
              color: var(--text-muted); border: 1px dashed var(--border-default);
              border-radius: var(--radius-md); }
/* Modal-Mount kollabiert, solange kein Wizard geladen ist. */
.dash-modal:empty { display: none; }

/* Tablet: 6 Spalten (breite Widgets klemmen automatisch). */
@media (max-width: 1023.98px) {
  .dash-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  /* CR-88: die Desktop-Startspalte (.dash-widget--x0..x11, bis Spalte 12) darf
     im 6-Spalten-Raster NICHT stehen bleiben — sonst erzeugen Kacheln mit
     pos_x>=6 implizite Spalten und das Raster läuft horizontal über (CLS). Start
     auf auto zwingen, damit die Kacheln innerhalb der 6 Spalten umbrechen. */
  .dash-grid > .dash-widget { grid-column-start: auto; }
  /* Breiten jenseits der 6 Tablet-Spalten auf volle Breite klemmen, statt eine
     7.–12. Spalte zu impliziten Überlauf-Spalten zu machen. */
  .dash-widget--w7,
  .dash-widget--w8,
  .dash-widget--w9,
  .dash-widget--w10,
  .dash-widget--w11,
  .dash-widget--w12 { grid-column-end: span 6; }
}
/* Mobile: einspaltig — alle Kacheln stapeln untereinander (Mobile-Stacking, S5). */
@media (max-width: 767.98px) {
  .dash-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .dash-grid > .dash-widget { grid-column: 1 / -1; grid-row: auto; min-height: 120px; }
  .dash-v1__head { align-items: flex-start; }
  .dash-v1__toolbar { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .dash-grid.is-editing .dash-widget { outline-style: solid; transition: none; }
}

/* ------------------------------------------------------------------------- *
 * OP-4 S4 (Card b37a2470): named component classes extracted from repeated
 * COMPOUND inline styles. Byte-identical relocation — no visual change; lowers
 * the inline_style ratchet. Applied to the CSV-import preview tables + labels.
 * ------------------------------------------------------------------------- */
.c-th-sticky {
  padding: 5px 6px;
  text-align: left;
  border: 1px solid var(--border-default);
  position: sticky;
  top: 0;
  background: #f0f4ff;
  z-index: 1;
}
.c-td-bordered {
  padding: 3px 4px;
  border: 1px solid var(--border-default);
}
.c-label-caps {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 0 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dashboard v1 — .dash-* Komponenten (CR-84)

   Die v1-Templates (templates/dashboard/**) benutzen durchgehend BEM-Klassen im
   .dash-*-Namensraum; dieses Stylesheet definierte bisher KEINEN davon → das
   Dashboard rendert ungestylt. Diese Sektion schließt die Lücke: 12-Spalten-Raster,
   Widget-Karten, KPI/Chart/Gauge/Heatmap-Kacheln und der Baukasten-Wizard, alles
   token-basiert (Dark-Mode-Reskin über :root[data-theme="dark"] greift ohne Eingriff
   hier) und ohne Inline-Styles. Design abgeleitet aus klickdummy-dashboard-v1.html.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Seiten-Shell ── */
.dash-v1 { display: block; }
.dash-v1__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.dash-v1__head h1 { font-size: var(--text-xl); margin: 0; }
.dash-v1__add-btn {
  font: inherit;
  font-weight: 600;
  font-size: var(--text-base);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-primary-btn-border);
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
  transition: background var(--transition);
}
.dash-v1__add-btn:hover { background: var(--color-primary-hover); }

/* ── Raster (12 Spalten) ── */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-4);
}
.dash-empty {
  grid-column: span 12;
  padding: var(--space-8);
  text-align: center;
  color: var(--text-muted);
  background: var(--bg-surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
}

/* ── Widget-Karte ── */
.dash-widget {
  grid-column-end: span 3;
  display: flex;
  flex-direction: column;
  min-height: 120px;
  padding: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  position: relative;
}
/* Breiten-Modifier (Spalten-Span 1..12) */
.dash-widget--w1  { grid-column-end: span 1; }
.dash-widget--w2  { grid-column-end: span 2; }
.dash-widget--w3  { grid-column-end: span 3; }
.dash-widget--w4  { grid-column-end: span 4; }
.dash-widget--w5  { grid-column-end: span 5; }
.dash-widget--w6  { grid-column-end: span 6; }
.dash-widget--w7  { grid-column-end: span 7; }
.dash-widget--w8  { grid-column-end: span 8; }
.dash-widget--w9  { grid-column-end: span 9; }
.dash-widget--w10 { grid-column-end: span 10; }
.dash-widget--w11 { grid-column-end: span 11; }
.dash-widget--w12 { grid-column-end: span 12; }
/* Höhen-Modifier (Mindesthöhe, 1..4 Raster-Reihen) */
.dash-widget--h1 { min-height: 120px; }
.dash-widget--h2 { min-height: 180px; }
.dash-widget--h3 { min-height: 240px; }
.dash-widget--h4 { min-height: 320px; }

.dash-widget__loading {
  margin: auto;
  color: var(--text-faint);
  font-size: var(--text-sm);
}
.dash-widget__error {
  margin: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-red-badge);
  font-size: var(--text-sm);
}
.dash-widget__error-icon { font-size: var(--text-lg); }
.dash-widget__error-text { font-weight: 600; }

/* ── KPI-Kachel ── */
.dash-kpi { display: flex; flex-direction: column; gap: var(--space-2); }
.dash-kpi__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.dash-kpi__value {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
}
/* S3: Schwellwert-Ampel — färbt den KPI-Wert je nach Ziel-Richtung (Tokens). */
.dash-kpi--ampel-ok .dash-kpi__value { color: var(--color-green-badge); }
.dash-kpi--ampel-danger .dash-kpi__value { color: var(--status-danger); }

/* Sublines (Karte 1d3f25d5): generischer Zusatzwert-Kontrakt einer KPI-Kachel
   (chart.extra.kpi_sub_lines), z. B. "35,4 % des Portfolios" oder "Ø 201,00 € je Einheit". */
.dash-kpi__subs { display: flex; flex-direction: column; gap: var(--space-1); }
.dash-kpi__sub { font-size: var(--text-xs); color: var(--text-muted); }
.dash-kpi__sub--warn { color: var(--status-warn); }
.dash-kpi__sub-value { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Delta-Badge (Card 627126ff / CR-137): Ampel-Chip fuer den Vergleich zur
   Vorperiode (besser/schlechter/neutral), rendert in _kpi_delta_badge.html. */
.kpi-delta {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  margin-top: var(--space-1);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
}
/* Ampel-Modifier: die drei Richtungen muessen sich sichtbar unterscheiden. */
.kpi-delta--good { color: var(--color-green-badge); background: var(--color-green-dim); }
.kpi-delta--bad { color: var(--status-danger); background: var(--color-red-dim); }
.kpi-delta--neutral { color: var(--text-muted); }
.kpi-delta__pct { font-weight: 700; }
.kpi-delta__abs { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Standalone KPI-Kachel (Card 627126ff / CR-137): Rahmen fuer _kpi_tile.html,
   wenn eine KPI ohne umgebende Dashboard-Widget-Row gerendert wird. */
.kpi-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* Forecast-Badge (Card 01cda776): projizierter Zielwert (+N Monate), als
   gestrichelter „Prognose"-Chip unter dem KPI-Wert. */
.kpi-forecast {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  margin-top: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.kpi-forecast__label { font-weight: 600; letter-spacing: 0.02em; }
.kpi-forecast__value { font-weight: 700; color: var(--text-primary); }

/* ── Chart-Kachel ── */
.dash-chart { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.dash-chart__title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.dash-chart__canvas { flex: 1; min-height: 150px; max-width: 100%; }

/* ── Live-Diagrammtyp-Umschalter (Dashboard v2) ── nur im Edit-Modus sichtbar,
   deckungsgleich mit dem Klickdummy (Chips mit Kornblume-Aktiv-Zustand). */
.dash-chart__switch { display: none; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-2); }
body.dashboard-editing .dash-chart__switch { display: flex; }
.dash-chart__type {
  border: 1px solid var(--color-border, #e4e8f0);
  background: var(--bg-surface, #fff);
  border-radius: var(--radius-sm, 8px);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  font-size: var(--text-xs);
  line-height: 1;
  color: var(--text-muted);
}
.dash-chart__type:hover { border-color: var(--color-primary, #4f74e6); }
.dash-chart__type.is-active {
  border-color: var(--color-primary, #4f74e6);
  background: var(--color-primary-dim, #eef2fd);
  color: var(--color-primary, #4f74e6);
}

/* ── Tabellen-Kachel (ChartData.kind == "table") ── token-basiert, keine Inline-Styles */
.dash-table { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.dash-table__title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.dash-table__grid {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.dash-table__grid th,
.dash-table__grid td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--border-default);
}
.dash-table__grid th {
  font-weight: 600;
  color: var(--text-muted);
}
.dash-table__empty {
  text-align: center;
  color: var(--text-muted);
  padding: var(--space-4);
}
/* S4 Tabelle-Extras: kompakte Dichte (weniger Zeilenhöhe/Schrift). */
.dash-table--compact .dash-table__grid { font-size: var(--text-xs); }
.dash-table--compact .dash-table__grid th,
.dash-table--compact .dash-table__grid td { padding: var(--space-1) var(--space-2); }

/* ── S2 (54956a18) Sticky-Header ── universell für ALLE Widget-Typen ──────────
   Scroll-Container ist .dash-widget__body bzw. .dash-expand__body. Der geteilte
   Kachel-Titel (.dash-widget__wtitle) klebt oben; der Tabellen-Spaltenkopf klebt
   direkt darunter (Offset via Custom-Property, damit Titel + thead nie überlappen).
   Steht NACH den Typ-Titel-Regeln, damit das margin→padding-Override greift und
   keine Transparenz-Lücke zwischen Titel und Spaltenkopf entsteht.
   Der Offset --dash-sticky-title-h ist jetzt ein :root-Design-Token (SSOT,
   design-tokens/tokens/layout.json) — token-basiert wie der Rest des dash-CSS. */
.dash-widget__wtitle {
  position: sticky; top: 0; z-index: 3;
  background: var(--bg-surface);
  margin-bottom: 0; padding-bottom: var(--space-2);
}
.dash-table__grid thead th {
  position: sticky; top: var(--dash-sticky-title-h); z-index: 2;
  background: var(--bg-surface);
}
/* BUG 7db867da: GEMEINSAM-Toggle „Sticky-Header" AUS → das geteilte Sticky-CSS
   im Expand-Body abschalten (Titel + Spaltenkopf scrollen dann mit). Default AN
   bleibt unberührt (Modifier wird nur bei config sticky_header="0" gesetzt). */
.dash-expand--no-sticky .dash-widget__wtitle,
.dash-expand--no-sticky .dash-table__grid thead th {
  position: static;
}

/* Reset-Button in der Dashboard-Toolbar. */
.dash-v1__reset { margin-left: var(--space-2); }

/* ── Gauge-Kachel ── */
.dash-gauge { display: flex; flex-direction: column; gap: var(--space-2); }
.dash-gauge__title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.dash-gauge__dial { display: flex; align-items: center; gap: var(--space-3); }
.dash-gauge__meter { flex: 1; height: 12px; }
.dash-gauge__value { font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); }
/* S4 Gauge-Zonen: Ampel-Färbung des Readouts je Ziel-Richtung (Tokens). */
.dash-gauge--zone-ok .dash-gauge__value { color: var(--color-green-badge); }
.dash-gauge--zone-warn .dash-gauge__value { color: var(--color-gold); }
.dash-gauge--zone-danger .dash-gauge__value { color: var(--status-danger); }

/* ── Cashflow-Ergebnis-Kachel (Karte d03c1212, Kapitel 2) ── */
.dash-cashflow { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: var(--space-2); }
.dash-cashflow__title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Kennzahlenleiste (AC-9): umbricht auf schmalen Kacheln statt zu clippen. */
.dash-cashflow__strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
}
.dash-cashflow__strip-item { display: flex; flex-direction: column; gap: var(--space-1); }
.dash-cashflow__strip-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.dash-cashflow__strip-value {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-primary);
}
.dash-cashflow__strip-count { font-size: var(--text-xs); font-weight: 400; color: var(--text-muted); }
/* AC-8/AC-6: Schraffur-Legende + Methoden-Hilfetext bleiben dezent. */
.dash-cashflow__hatch-note,
.dash-cashflow__method-hint {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.dash-cashflow__canvas { flex: 1; min-height: 150px; max-width: 100%; }

/* ── Heatmap-Kachel ── */
.dash-heatmap { display: flex; flex-direction: column; gap: var(--space-2); }
.dash-heatmap__title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.dash-heatmap__grid { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.dash-heatmap__row { line-height: 0; }
.dash-heatmap__rowlabel {
  text-align: left;
  padding: var(--space-1) var(--space-2);
  color: var(--text-secondary);
  font-weight: 600;
  white-space: nowrap;
}
.dash-heatmap__cell {
  width: 22px;
  height: 22px;
  border: 1px solid var(--bg-surface);
  border-radius: var(--radius-sm);
}
/* Intensitätsstufen 0..4 — Brand-Teal-Tint, damit KEINE Inline-Styles nötig sind. */
.dash-heatmap__cell--l0 { background: var(--bg-surface-2); }
.dash-heatmap__cell--l1 { background: rgba(var(--brand-teal-rgb), 0.20); }
.dash-heatmap__cell--l2 { background: rgba(var(--brand-teal-rgb), 0.40); }
.dash-heatmap__cell--l3 { background: rgba(var(--brand-teal-rgb), 0.65); }
.dash-heatmap__cell--l4 { background: rgba(var(--brand-teal-rgb), 0.90); }
.dash-heatmap__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Modal-Mount (Baukasten) ── */
.dash-modal:empty { display: none; }
.dash-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-10) var(--space-4);
  overflow: auto;
  background: rgba(15, 23, 42, 0.5);
}

/* ── Baukasten-Wizard ── */
.dash-wizard {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 760px;
  width: 100%;
  padding: var(--space-6);
}
.dash-wizard__heading { font-size: var(--text-lg); margin: 0 0 var(--space-1); }
.dash-wizard__hint { font-size: var(--text-sm); color: var(--text-muted); margin: 0 0 var(--space-5); }
.dash-wizard__group { margin-bottom: var(--space-5); }
.dash-wizard__group-title {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-2);
}
.dash-wizard__metrics {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.dash-wizard__metric { display: flex; }
.dash-wizard__metric-btn {
  font: inherit;
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.dash-wizard__metric-btn:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.dash-wizard__metric-label { font-weight: 600; font-size: var(--text-base); color: var(--text-primary); }
.dash-wizard__metric-type {
  align-self: flex-start;
  font-size: var(--text-xs);
  padding: 1px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--bg-surface-2);
  color: var(--text-muted);
}
.dash-wizard__field {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
}
.dash-wizard__legend {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  padding: 0 var(--space-2);
}
.dash-wizard__opt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-right: var(--space-4);
  font-size: var(--text-base);
}
/* Freitext-Variante (Gebäude-/Konto-ID): Label über dem Eingabefeld. */
.dash-wizard__opt--entity-id {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}
.dash-wizard__opt--entity-id input {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.dash-wizard__preview {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--bg-surface-2);
  min-height: 180px;
  margin-bottom: var(--space-4);
}
.dash-wizard__add { display: block; }
.dash-wizard__titlefield { display: block; margin-bottom: var(--space-4); }
.dash-wizard__titlefield > span {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}
.dash-wizard__titlefield input {
  width: 100%;
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.dash-wizard__actions {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}
.dash-wizard__back,
.dash-wizard__next,
.dash-wizard__submit {
  font: inherit;
  font-weight: 600;
  font-size: var(--text-base);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.dash-wizard__back {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
}
.dash-wizard__back:hover { border-color: var(--border-hover); }
.dash-wizard__next,
.dash-wizard__submit {
  background: var(--color-primary);
  border: 1px solid var(--color-primary-btn-border);
  color: #fff;
}
.dash-wizard__next:hover,
.dash-wizard__submit:hover { background: var(--color-primary-hover); }

/* ── Generischer Widget-Konfig-Dialog (Widget-Konfig-Framework S1) ───────────
   Rendert GEMEINSAM- + typ-spezifische Felder datengetrieben aus dem Schema.
   Baut auf .dash-wizard auf; hier nur die konfig-spezifischen Bausteine.
   Ausschliesslich Design-Tokens, keine Inline-Styles. */
.dash-cfg { display: flex; flex-direction: column; gap: var(--space-2); }
/* S5-Politur: Dialog-Kopf mit ⚙-Titel + Typ-Badge (SOLL-Klickdummy). */
.dash-cfg__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin: 0 0 var(--space-1);
}
.dash-cfg__title {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-lg); font-weight: 700; margin: 0;
}
.dash-cfg__title-icon { color: var(--color-primary); font-size: var(--text-lg); }
.dash-cfg__badge {
  font-size: var(--text-xs); font-weight: 600;
  padding: 2px var(--space-2); border-radius: var(--radius-full);
  background: var(--color-primary-dim, var(--bg-surface-2));
  color: var(--color-primary-dark); letter-spacing: 0.02em; white-space: nowrap;
}
/* Karte b30cee98 (OP-8, Heiner-Entscheidung B, 2026-08-04): das fruehere
   `.dash-cfg__tabs`-Pill-Segment (BUG 7db867da/Klickdummy, CR-118-Kontrastfix)
   ist auf die kanonische .tabs/.tab-Variante konsolidiert — siehe
   docs/frontend/component-inventory.md. Der Fokus-Ring lebt jetzt generisch
   auf `.tab:focus-visible`. */
/* Scroll-Container: der Body scrollt, Kopf + Footer bleiben sichtbar. */
.dash-cfg__body {
  display: flex; flex-direction: column; gap: var(--space-2);
  overflow-y: auto; min-height: 0;
}
.dash-cfg__section {
  font-size: var(--text-sm); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted);
  border-left: 3px solid var(--border-default);
  padding: 0 0 var(--space-1) var(--space-3);
  margin: var(--space-4) 0 var(--space-2);
}
.dash-cfg__section[data-section="common"] {
  color: var(--color-primary); border-left-color: var(--color-primary);
}
/* Unterabschnitt innerhalb eines Options-Blocks (BUG b7a3e2c1: die freie
   Datenauswahl lebt im TYP-SPEZIFISCH-Block, ohne ein dritter Top-Level-Block
   zu werden). Optisch bewusst leiser als eine Sektionskopfzeile: kein
   Rahmenstrich, eingerückt, normalere Schriftstärke. */
.dash-cfg__subsection {
  font-size: var(--text-sm); font-weight: 600;
  letter-spacing: 0.04em; color: var(--text-muted);
  padding: 0 0 var(--space-1) var(--space-3);
  margin: var(--space-3) 0 var(--space-2);
  border-bottom: 1px dashed var(--border-default);
}
.dash-cfg__field {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-3);
}
.dash-cfg__legend {
  font-size: var(--text-sm); font-weight: 600;
  color: var(--text-primary); padding: 0;
}
/* Feld-Hinweis (S5): erklärender Untertitel je Feld (SOLL-Klickdummy). */
.dash-cfg__hint {
  font-size: var(--text-sm); color: var(--text-muted);
  margin: var(--space-1) 0 var(--space-2);
}
/* Leerzustand: Widget-Typ ohne typ-spezifische Optionen. */
.dash-cfg__empty {
  font-size: var(--text-sm); color: var(--text-muted);
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--border-default); border-radius: var(--radius-md);
  margin: var(--space-2) 0;
}
/* Verbundene Segment-Buttons (SOLL-Klickdummy): Radio visuell versteckt, das
   Label wird zum Button; die aktive Option füllt sich im Marken-Akzent. */
.dash-cfg__seg {
  display: inline-flex; flex-wrap: wrap;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  overflow: hidden;
}
.dash-cfg__seg-opt { display: inline-flex; margin: 0; }
.dash-cfg__seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.dash-cfg__seg-label {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm); color: var(--text-muted); cursor: pointer;
  border-left: 1px solid var(--border-default);
  transition: background var(--transition), color var(--transition);
}
.dash-cfg__seg-opt:first-child .dash-cfg__seg-label { border-left: 0; }
.dash-cfg__seg-opt input:checked + .dash-cfg__seg-label {
  background: var(--brand-600); color: #fff; font-weight: 600;
}
.dash-cfg__seg-opt input:focus-visible + .dash-cfg__seg-label {
  outline: 2px solid var(--color-primary); outline-offset: -2px;
}
.dash-cfg__select {
  font: inherit; font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--bg-surface); color: var(--text-primary);
}
.dash-cfg__text {
  width: 100%; font: inherit; font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
/* Switch: Toggle + Inline-Label (SOLL-Klickdummy: Text neben dem Schalter). */
.dash-cfg__switch {
  display: inline-flex; align-items: center; gap: var(--space-3);
  cursor: pointer;
}
.dash-cfg__switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.dash-cfg__switch-label { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.dash-cfg__switch-track {
  flex: 0 0 auto;
  width: 38px; height: 21px; border-radius: var(--radius-pill, 20px);
  background: var(--border-strong); position: relative;
  transition: background var(--transition);
}
.dash-cfg__switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 17px; height: 17px; border-radius: 50%; background: var(--bg-surface);
  box-shadow: var(--shadow-sm); transition: left var(--transition);
}
.dash-cfg__switch input:checked + .dash-cfg__switch-track { background: var(--color-primary); }
.dash-cfg__switch input:checked + .dash-cfg__switch-track::after { left: 19px; }
.dash-cfg__switch input:focus-visible + .dash-cfg__switch-track {
  outline: 2px solid var(--color-primary); outline-offset: 2px;
}
/* Sticky Footer: Abbrechen/Übernehmen bleiben beim Scrollen erreichbar.
   Klickdummy (widget-config-framework/framework.png): die Aktionen bilden eine
   rechte Button-Gruppe (Abbrechen links neben Übernehmen, beide rechtsbündig).
   Überschreibt das von `.dash-wizard__actions` geerbte space-between, das die
   Buttons sonst über die volle Footerbreite spreizt (QA-Fund Card 762958b7). */
.dash-cfg__foot {
  position: sticky; bottom: 0;
  justify-content: flex-end;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-default);
  background: var(--bg-surface);
}

@media (max-width: 767.98px) {
  /* Mobile-Stacking der Kacheln läuft ausschließlich über
     `.dash-grid > .dash-widget { grid-column: 1 / -1 }` (weiter oben in diesem
     Breakpoint). Die frühere `grid-column: span 6`-Regel war davon vollständig
     überschrieben (spezifischerer Kind-Selektor) und ist entfernt, weil ihre
     `grid-column`-Kurzform sonst die explizite Startspalte (--xN) plätten
     würde (Heiner-0716-Fix: Breite nur über grid-column-end). */
  .dash-wizard__metrics { grid-template-columns: 1fr; }

  /* S5-Mobile (AC3): der Modal-Mount nutzt die volle Höhe, damit ⚙-Dialog und
     Expand-Modal auf schmalen Viewports komplett + scrollbar erreichbar sind.
     Padding schrumpft, die Karten spannen die volle Breite. */
  .dash-modal { padding: var(--space-3); align-items: stretch; }
  .dash-wizard {
    padding: var(--space-4);
    max-height: calc(100vh - var(--space-3) * 2);
    display: flex; flex-direction: column;
  }
  /* Segment-Buttons dürfen auf schmalen Viewports auf volle Breite umbrechen. */
  .dash-cfg__seg { display: flex; width: 100%; }
  .dash-cfg__seg-opt { flex: 1 1 auto; }
  .dash-cfg__seg-label { flex: 1 1 auto; justify-content: center; }
  .dash-cfg__select, .dash-cfg__text { width: 100%; }

  /* Expand-Modal (S2) auf Mobile: volle Höhe/Breite, Schließen bleibt oben. */
  .dash-expand { max-height: calc(100vh - var(--space-3) * 2); }
  .dash-expand__body { padding: var(--space-4); }
}

/* ── Buchungszuordnungsmodal (Karte add46d3e) ───────────────────────────────
   Forderung → Konteneintrag zuordnen/splitten mit Live-Vorschau. Nutzt
   ausschließlich Design-Tokens (keine Hardcodes), spiegelt den Klickdummy. */
.ba-confirm {
  margin: 0 0 var(--space-4); padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--color-green-dim); color: var(--color-green-badge); font-weight: 600;
  font-size: var(--text-sm);
}
.ba-forderung {
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8);
  padding: 14px 16px; border: 1px solid var(--color-primary-border);
  background: var(--color-primary-dim); border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
}
.ba-kv { display: flex; flex-direction: column; gap: 2px; }
.ba-kv__k {
  font-size: 10px; letter-spacing: .5px; color: var(--text-muted);
  font-weight: 700; text-transform: uppercase;
}
.ba-kv__v { font-size: 15px; font-weight: 800; }
.ba-mono { font-variant-numeric: tabular-nums; }

.ba-section-title {
  font-size: var(--text-sm); font-weight: 800; margin: var(--space-5) 0 var(--space-2);
  display: flex; align-items: center; gap: var(--space-2);
}
.ba-section-title--tight { margin-top: 0; }
.ba-hint { font-weight: 500; color: var(--text-faint); font-size: var(--text-xs); }
.ba-searchbar {
  display: flex; gap: var(--space-2); margin-bottom: var(--space-3);
  align-items: center; flex-wrap: wrap;
}
.ba-search {
  flex: 1; height: 34px; border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); padding: 0 10px; font-size: var(--text-base);
}
/* Karte 03897aa0 (#5): Trefferzahl des Live-Filters (aria-live, Nachtrag 4) und
   der „keine Treffer“-Zustand der gefilterten Umsatzliste. */
.ba-search-count {
  font-size: var(--text-xs); color: var(--text-muted);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ba-search-empty {
  padding: var(--space-4) var(--space-3); text-align: center;
  font-size: var(--text-sm); color: var(--text-muted);
}

.ba-tx-list { display: flex; flex-direction: column; gap: 10px; }
.ba-tx[hidden] { display: none; }
.ba-tx {
  width: 100%; text-align: left; border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: 10px 12px; cursor: pointer;
  background: var(--bg-surface); transition: border-color .12s, background .12s;
  display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center;
}
.ba-tx:hover { border-color: var(--color-primary-border); background: var(--bg-surface-2); }
.ba-tx.is-sel {
  border-color: var(--color-primary); background: var(--color-primary-dim);
  box-shadow: 0 0 0 1px var(--color-primary);
}
.ba-tx__radio {
  width: 18px; height: 18px; border-radius: var(--radius-full);
  border: 2px solid var(--border-default);
}
.ba-tx.is-sel .ba-tx__radio {
  border-color: var(--color-primary);
  background: radial-gradient(circle at center, var(--color-primary) 42%, transparent 46%);
}
.ba-tx__main { min-width: 0; }
.ba-tx__ref {
  display: block; font-weight: 700; font-size: var(--text-base); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.ba-tx__meta { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.ba-tx__amt { text-align: right; font-variant-numeric: tabular-nums; }
.ba-tx__big { display: block; font-size: var(--text-md); font-weight: 800; color: var(--color-green-badge); }
.ba-tx__open { display: block; font-size: var(--text-xs); color: var(--text-muted); }

.ba-assign {
  border: 1px dashed var(--color-primary-border); border-radius: var(--radius-md);
  padding: 14px 16px; margin-top: var(--space-4); background: var(--bg-surface);
}
.ba-assign.is-disabled { opacity: .5; pointer-events: none; filter: grayscale(.4); }
.ba-modes { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.ba-mode {
  flex: 1; text-align: left; border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); padding: 10px 12px; cursor: pointer; background: var(--bg-surface);
}
.ba-mode.is-active { border-color: var(--color-primary); background: var(--color-primary-dim); }
.ba-mode__t { display: block; font-weight: 700; font-size: 12.5px; }
.ba-mode__d { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }

.ba-amount-row { display: flex; align-items: center; gap: 10px; margin-top: var(--space-2); }
.ba-amount-label { font-size: var(--text-sm); color: var(--text-muted); font-weight: 600; min-width: 120px; }
.ba-amount-input {
  display: flex; align-items: center; gap: 6px; border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); padding: 0 10px; height: 36px;
}
.ba-amount-field {
  border: 0; outline: 0; width: 110px; font-size: 15px; font-weight: 800;
  text-align: right; font-variant-numeric: tabular-nums;
}
.ba-amount-cur { color: var(--text-muted); font-weight: 700; }
.ba-quick { display: flex; gap: 6px; margin-top: var(--space-2); flex-wrap: wrap; }
.ba-quick__btn {
  border: 1px solid var(--border-default); background: var(--bg-surface-2);
  border-radius: var(--radius-full); padding: 4px 10px; font-size: var(--text-xs);
  font-weight: 600; cursor: pointer; color: var(--text-primary);
}
.ba-quick__btn:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }

.ba-preview {
  margin-top: var(--space-4); border-top: 1px solid var(--border-default);
  padding-top: var(--space-3); display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.ba-prevbox {
  background: var(--bg-surface-2); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); padding: 10px 12px;
}
.ba-prevbox__t {
  font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 6px;
}
.ba-line {
  display: flex; justify-content: space-between; font-size: var(--text-sm);
  padding: 2px 0; font-variant-numeric: tabular-nums;
}
.ba-rest.is-pos { color: var(--color-gold); }
.ba-rest.is-zero { color: var(--color-green-badge); }

.ba-foot-summary { font-size: var(--text-sm); color: var(--text-muted); }
.ba-foot-summary b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ba-foot-actions { display: flex; gap: var(--space-2); }

@media (max-width: 768px) {
  .ba-modes { flex-direction: column; }
  .ba-preview { grid-template-columns: 1fr; }
}

/* Klickbarer OFFEN/ÜBERFÄLLIG-Badge in der Rechnungen-Liste (Karte add46d3e):
   öffnet das Buchungszuordnungsmodal. Der innere Badge trägt die Farbe. */
.bk-status-link { text-decoration: none; cursor: pointer; }

/* =====================================================================
   Card e5e4aa60 — Design-Konformität: Inline-Style-Abbau (Slice 1).
   Worst-Offender Workflows/Gewerk-Vorlagen + Renovation-Gruppen-Row auf
   Design-System-Tokens (keine hartkodierten Hex/Inline-Styles).
   ===================================================================== */

/* Workflows › Gewerk-Vorlagen (trade_preset_list.html) */
.preset-group__title { flex:1; font-size:15px; }
.preset-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.preset-chip {
  display:flex; align-items:center; gap:4px;
  background:var(--bg-surface-2); border:1px solid var(--border-default);
  border-radius:var(--radius-md); padding:4px 10px; font-size:var(--text-base);
}
.preset-chip__remove {
  background:none; border:none; cursor:pointer;
  color:var(--text-muted); font-size:var(--text-md); padding:0 0 0 4px; line-height:1;
}
.input-inline-lg { width:260px; }
.input-inline-md { width:220px; font-size:var(--text-base); }

/* Renovation › Gewerk-Gruppen-Zeile (trade_group_row.html) */
.reno-group { border:1px solid var(--color-green-chip-border); border-radius:var(--radius-md); margin-bottom:6px; }
.reno-group__summary {
  padding:7px 12px; background:var(--color-green-chip-bg);
  display:flex; align-items:center; gap:6px; cursor:pointer; list-style:none;
}
.reno-group__chevron { font-size:10px; color:var(--text-muted); }
.reno-group__title { font-size:var(--text-sm); color:var(--color-green-chip-text); }
.reno-group__count { margin-left:auto; font-size:10px; color:var(--text-muted); }
/* OP-1 (Card 974795e0): Add-Button auf Brand-Akzent (keine gruenen Buttons). */
.reno-group__add { font-size:var(--text-xs); padding:2px 8px; border-color:var(--color-primary-border); color:var(--color-primary-dark); }
.reno-group__del { color:var(--color-red); font-size:var(--text-xs); padding:2px 8px; }
.reno-th {
  padding:5px 10px; text-align:left; font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted);
}
.reno-th--right { text-align:right; white-space:nowrap; }
.reno-th--primary { color:var(--color-primary); }
.reno-th--green { color:var(--color-green); }

/* =============================================================
   REDESIGN W2 — GEBÄUDE (Umbrella 3e892700 · Klickdummy redesign-w2/)
   Additive, token-basierte Komponenten des W1-Design-Systems.
   Nur var(--…)-Tokens aus tokens.css, keine Hex-Direktwerte. Neue
   Klassennamen (kollisionsfrei geprüft) — bestehende Funktions-
   klassen bleiben unberührt.
   ============================================================= */

/* ---- Seitenkopf ---- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between;
             gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.page-head .crumbs { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 4px; }
.page-head h1 { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.4px; }
.page-head .sub { color: var(--text-muted); margin-top: 2px; font-size: var(--fs-md); }
.head-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ---- Panel / Karten-Fläche ---- */
.panel { background: var(--bg-surface); border: 1px solid var(--border-default);
         border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between;
              padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-default); }
.panel-head h3 { font-size: var(--fs-lg); font-weight: 600; }
.panel-body { padding: var(--space-5); }

/* ---- Status-Pills ---- */
.pill { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px;
        border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
                background: currentColor; opacity: .9; }
.pill.ok { background: var(--success-bg); color: var(--success); }
.pill.warn { background: var(--warning-bg); color: var(--warning); }
.pill.err { background: var(--danger-bg); color: var(--danger); }
.pill.info { background: var(--info-bg); color: var(--info); }
.pill.neutral { background: var(--gray-100); color: var(--gray-600); }

/* ---- Zusätzlicher Button-Ton (Marken-Subtle) ---- */
.btn-subtle { background: var(--brand-050); color: var(--brand-700); border-color: transparent; }
.btn-subtle:hover { background: var(--brand-100); }

/* ---- Listen-Toolbar (Suche / Filter / Umschalter) ---- */
.toolbar { display: flex; align-items: center; gap: var(--space-3);
           margin-bottom: var(--space-4); flex-wrap: wrap; }
.toolbar .search { position: relative; flex: 0 0 320px; max-width: 320px; }
.toolbar .search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
           width: 16px; height: 16px; color: var(--text-faint); }
.toolbar .search input { width: 100%; height: 38px; padding: 0 12px 0 36px;
           border: 1px solid var(--border-default); border-radius: var(--radius);
           background: var(--gray-050); font: inherit; color: var(--text); }
.toolbar .search input:focus { outline: none; border-color: var(--brand);
           background: var(--bg-surface); box-shadow: 0 0 0 3px var(--brand-100); }
.toolbar .spacer { flex: 1; }
.filter-select { height: 38px; padding: 0 12px; border: 1px solid var(--border-strong);
           border-radius: var(--radius); background: var(--bg-surface); font: inherit; color: var(--text); }

/* ---- Segment-Umschalter ---- */
.seg { display: inline-flex; border: 1px solid var(--border-strong);
       border-radius: var(--radius); overflow: hidden; }
.seg > * { height: 38px; padding: 0 14px; border: none; background: var(--bg-surface);
       font: inherit; font-weight: 600; color: var(--text-muted); cursor: pointer;
       display: inline-flex; align-items: center; }
.seg > *.active { background: var(--brand-050); color: var(--brand-700); }
.seg > * + * { border-left: 1px solid var(--border-default); }

/* ---- Gebäude-Kartenzeile (Liste) ---- */
.b-card { display: flex; gap: var(--space-4); padding: var(--space-4) var(--space-5);
          border-bottom: 1px solid var(--gray-100); align-items: center; }
.b-card:hover { background: var(--gray-050); }
.b-card:last-child { border-bottom: none; }
.b-thumb { width: 64px; height: 64px; border-radius: var(--radius); background: var(--brand-050);
           color: var(--brand); display: grid; place-items: center; flex: none; }
.b-thumb svg { width: 28px; height: 28px; }
.b-main { flex: 1; min-width: 0; }
.b-main .t { font-weight: 600; font-size: var(--fs-lg); }
.b-main .t a { color: var(--text); }
.b-main .a { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 2px; }
.b-main .tags { margin-top: 8px; }
.b-meta { display: flex; gap: var(--space-6); text-align: right; align-items: center; }
.b-meta .m .n { font-weight: 700; font-size: var(--fs-lg); }
.b-meta .m .l { color: var(--text-faint); font-size: var(--fs-xs);
                text-transform: uppercase; letter-spacing: .05em; }

/* ---- Belegungs-Balken ---- */
.occ { width: 120px; }
.occ .l { color: var(--text-faint); font-size: var(--fs-xs); }
.occ small { color: var(--text-muted); }
.bar { height: 8px; margin-top: 8px; border-radius: var(--radius-pill);
       background: var(--gray-100); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--brand); border-radius: inherit; }

/* ---- Detail-Hero ---- */
.b-hero { display: flex; gap: var(--space-5); align-items: flex-start;
          margin-bottom: var(--space-5); flex-wrap: wrap; }
.b-hero__photo { width: 180px; height: 120px; border-radius: var(--radius-lg);
          background: var(--brand-050); color: var(--brand); display: grid; place-items: center;
          flex: none; border: 1px solid var(--border-default); }
.b-hero__photo svg { width: 52px; height: 52px; }
.b-hero__info { flex: 1; min-width: 240px; }
.b-hero__info h1 { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.4px; }
.b-hero__addr { color: var(--text-muted); margin-top: 4px; }
.b-hero__facts { display: flex; gap: var(--space-6); margin-top: var(--space-4); flex-wrap: wrap; }
.b-fact .n { font-weight: 700; font-size: var(--fs-lg); }
.b-fact .l { color: var(--text-faint); font-size: var(--fs-xs);
             text-transform: uppercase; letter-spacing: .05em; }

/* ---- Zurück-Link ---- */
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted);
        font-weight: 600; font-size: var(--fs-sm); margin-bottom: var(--space-3); }
.back svg { width: 16px; height: 16px; }

/* ---- Notiz-Block in Datenkarte ---- */
.data-card-note { padding: var(--space-3) var(--space-4); font-size: var(--fs-xs);
                  color: var(--text-muted); line-height: 1.6; }
/* Warn-Variante (0e0a2837, DASH-3): Rechtsgrenzen-Hinweis (Mietpreisbremse/Kappungsgrenze). */
.data-card-note--warn { color: var(--color-amber-badge); background: var(--status-warn-dim); }

/* ---- Key/Value-Liste ---- */
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 10px 16px; }
.kv dt { color: var(--text-muted); font-size: var(--fs-sm); }
.kv dd { font-weight: 500; }

@media (max-width: 768px) {
  .toolbar .search { flex: 1 1 100%; max-width: none; }
  .b-card { flex-wrap: wrap; }
  .b-meta { width: 100%; justify-content: space-between; }
  .b-hero__photo { width: 100%; height: 96px; }
  .kv { grid-template-columns: 1fr; gap: 4px 0; }
}


/* =============================================================
   VERTRAGSLISTE (contract_list / vertraege-liste)
   ============================================================= */
.name-cell { display: flex; align-items: center; gap: 12px; }
.doc-ico { width: 36px; height: 36px; border-radius: var(--radius-sm);
           background: var(--brand-050); color: var(--brand);
           display: grid; place-items: center; flex: none; }
.doc-ico svg { width: 18px; height: 18px; }
.cell-strong { font-weight: 600; color: var(--text); }
.cell-muted { color: var(--text-muted); font-size: var(--fs-sm); }
.contract-filter-note { font-size: var(--fs-sm); color: var(--text-muted);
           padding: var(--space-1) 0; }
.contract-filter-note a { margin-left: 6px; font-size: var(--fs-xs); }

/* ---- Vertrags-Detail: Laufzeiten / Kredit ---- */
.contract-period-row { display: flex; justify-content: space-between; align-items: center;
           padding: var(--space-2) 0; border-bottom: 1px solid var(--border-default); gap: var(--space-3); }
.contract-form-row { margin-bottom: var(--space-3); }
.contract-form-row label { display: block; font-size: var(--fs-md); color: var(--text-muted);
           margin-bottom: 2px; }
.contract-field-error { color: var(--danger); font-size: var(--fs-xs); }
.contract-empty { color: var(--text-faint); }
.contract-detail-inline-form { display: inline-block; margin-bottom: var(--space-3); }
.attachment-row { display: flex; justify-content: space-between; align-items: center;
           padding: 8px 10px; background: var(--bg-sunken); border: 1px solid var(--border-default);
           border-radius: var(--radius-sm); margin-bottom: 4px; }

/* ---- Vertrags-Detail: Jährlicher Kontostand (Card 8afe7609, DASH-4) ---- */
.credit-balance-head { display: flex; justify-content: space-between; align-items: center;
           gap: var(--space-3); margin-bottom: var(--space-3); }
.credit-balance-row { display: flex; justify-content: space-between; align-items: center;
           padding: var(--space-2) 0; border-bottom: 1px solid var(--border-default); gap: var(--space-3); }
.credit-balance-actions { display: flex; gap: var(--space-2); }
.credit-balance-basis { margin: 0 0 var(--space-3); }

/* =============================================================
   VERTRAGSGENERATOR — WIZARD-STEPPER (4-Schritt-Leiste)
   ============================================================= */
.wizard-stepper { display: flex; align-items: center; gap: var(--space-2);
           list-style: none; padding: 0; margin: var(--space-4) 0 var(--space-5); flex-wrap: wrap; }
.wizard-step { display: inline-flex; align-items: center; gap: 8px; font-weight: 600;
           color: var(--text-faint); font-size: var(--fs-sm); }
.wizard-step a { display: inline-flex; align-items: center; gap: 8px; color: inherit;
           text-decoration: none; }
.wizard-step-no { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
           background: var(--gray-100); color: var(--text-muted); font-size: var(--fs-xs); font-weight: 700; }
.wizard-step.is-reached { color: var(--text-muted); }
.wizard-step.is-reached .wizard-step-no { background: var(--success); color: var(--text-invert); }
.wizard-step.is-current { color: var(--brand-700); }
.wizard-step.is-current .wizard-step-no { background: var(--brand); color: var(--brand-contrast); }
.wizard-nav { display: flex; gap: var(--space-2); margin-top: var(--space-5); }

/* ---- Phase 1: Dokumenttyp-Auswahl (Radiokarten) ---- */
.wizard-type { border: none; padding: 0; margin: 0; }
.wizard-type legend { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.3px;
           margin-bottom: var(--space-4); padding: 0; }
.wizard-type-grid { display: grid; gap: var(--space-3);
           grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.wizard-type-option { display: flex; gap: var(--space-2); align-items: center;
           padding: var(--space-3) var(--space-4); border: 1px solid var(--border-default);
           border-radius: var(--radius); background: var(--bg-surface); cursor: pointer;
           transition: border-color .12s, box-shadow .12s; }
.wizard-type-option:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }

/* =============================================================
   DOKUMENTTYP-PICKER (document_new / vg-dokumentauswahl)
   ============================================================= */
.vg-typepicker .sub { color: var(--text-muted); margin-top: var(--space-1); }
.vg-type-grid { display: grid; gap: var(--space-4);
           grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.vg-type-card { display: block; border: 1px solid var(--border-default); border-radius: var(--radius-lg);
           padding: var(--space-4) var(--space-5); background: var(--bg-surface);
           text-decoration: none; color: inherit; box-shadow: var(--shadow-sm);
           transition: border-color .12s, box-shadow .12s, transform .1s; }
a.vg-type-card:hover { border-color: var(--brand); box-shadow: var(--shadow-md);
           transform: translateY(-2px); }
.vg-type-card .vg-type-title { font-weight: 600; font-size: var(--fs-lg); }
.vg-type-card .vg-type-cta { color: var(--brand-700); font-size: var(--fs-sm); margin-top: var(--space-2); }
.vg-type-soon { border-style: dashed; border-color: var(--border-strong);
           background: var(--bg-sunken); color: var(--text-faint); box-shadow: none; }
.vg-type-soon .vg-type-hint { font-size: var(--fs-sm); margin-top: var(--space-2); }
.vg-disclaimer { margin-top: var(--space-5); color: var(--text-faint);
           font-size: var(--fs-xs); line-height: 1.5; max-width: 760px; }

/* =============================================================
   GANZSEITEN-EDITOR (editor / vg-editor)
   ============================================================= */
.vg-editor-topbar { display: flex; justify-content: space-between; align-items: center;
           gap: var(--space-4); margin-bottom: var(--space-4); flex-wrap: wrap; }
.vg-editor-topbar .vg-editor-title { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.vg-editor-topbar h1 { margin: 0; font-size: var(--fs-xl); }
.vg-editor-actions { display: flex; align-items: center; gap: var(--space-2); }
.vg-autosave { color: var(--text-muted); font-size: var(--fs-sm); }
.vg-drift-hint { background: var(--warning-bg); border: 1px solid var(--warning);
           border-radius: var(--radius); padding: var(--space-3) var(--space-4);
           margin-bottom: var(--space-4); font-size: var(--fs-md); color: var(--warning); }
.vg-editor-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-5); align-items: start; }
.vg-document { background: var(--bg-surface); border: 1px solid var(--border-default);
           border-radius: var(--radius); padding: var(--space-8) var(--space-8);
           box-shadow: var(--shadow-sm); line-height: 1.6; color: var(--text); }
.vg-document h2 { font-size: var(--fs-xl); }
.vg-section { margin-bottom: var(--space-5); position: relative; }
.vg-section-head { display: flex; align-items: center; gap: var(--space-2); }
.vg-section-head h2 { font-size: var(--fs-lg); margin: 0; }
.vg-version-flag { font-size: var(--fs-xs); color: var(--warning); background: var(--warning-bg);
           border-radius: 4px; padding: 1px 6px; }
.vg-section-edit { margin-left: auto; }
.vg-section-body { margin-top: var(--space-2); line-height: 1.6; }
.vg-section-editor { margin-top: var(--space-2); }
.vg-section-editor-actions { margin-top: var(--space-2); display: flex; gap: var(--space-2); }
.vg-signature-preview { margin-top: var(--space-6); border-top: 1px dashed var(--border-default);
           padding-top: var(--space-4); }
.vg-sidebar { background: var(--bg-sunken); border: 1px solid var(--border-default);
           border-radius: var(--radius); padding: var(--space-4); position: sticky; top: var(--space-4); }
.vg-sidebar-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em;
           color: var(--text-muted); margin: var(--space-1) 0 var(--space-2); font-weight: 700; }
.vg-sidebar-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.vg-sidebar-list li { display: flex; justify-content: space-between; align-items: center;
           padding: var(--space-1) 0; font-size: var(--fs-sm); }
.vg-sidebar-ver { color: var(--text-faint); }
.vg-kv { margin: 0 0 var(--space-4); font-size: var(--fs-sm); }
.vg-kv > div { display: flex; justify-content: space-between; gap: var(--space-2); padding: 2px 0; }
.vg-kv dt { color: var(--text-muted); }
.vg-kv dd { margin: 0; text-align: right; }
/* Leere Variablen — sichtbarer, klickbarer Nachtrag-Marker (gelb) */
.vg-var-missing { background: var(--warning-bg); border: 1px dashed var(--warning);
           border-radius: 4px; padding: 0 .35rem; color: var(--warning); cursor: pointer;
           font-size: .92em; white-space: nowrap; }
.vg-var-missing::before { content: "✎ "; font-size: .85em; }
.vg-var-missing:hover, .vg-var-missing:focus { background: var(--brand-100); outline: none; }
/* Aufgelöste Variablen (Editor-Vorschau) */
.vg-var { background: var(--brand-050); color: var(--brand-700); border-radius: 4px;
           padding: 1px 5px; font-weight: 600; }

/* =============================================================
   FINALISIEREN (finalize / vg-finalize)
   ============================================================= */
.vg-finalize-topbar { display: flex; justify-content: space-between; align-items: center;
           margin-bottom: var(--space-4); }
.vg-finalize-topbar h1 { margin: 0; font-size: var(--fs-xl); }
.vg-finalize-layout { display: grid; grid-template-columns: 1fr 340px;
           gap: var(--space-5); align-items: start; }
.vg-finalize-aside { display: flex; flex-direction: column; gap: var(--space-4); }
.vg-check-block, .vg-abschluss-block { background: var(--bg-surface); border: 1px solid var(--border-default);
           border-radius: var(--radius); padding: var(--space-4); }
.vg-check-block { background: var(--bg-sunken); }
.vg-block-label { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em;
           color: var(--text-muted); margin: 0 0 var(--space-3); font-weight: 700; }
.vg-check-list { list-style: none; padding: 0; margin: 0; font-size: var(--fs-sm);
           display: flex; flex-direction: column; gap: var(--space-2); }
.vg-abschluss-block form { margin: 0 0 var(--space-2); }
.vg-abschluss-block .btn { margin-bottom: var(--space-2); }
.vg-legal { margin-top: var(--space-4); font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; }
.vg-legal p { margin: 0 0 var(--space-2); }
.vg-txt-ok { color: var(--success); }
.vg-txt-warn { color: var(--warning); }
.vg-txt-muted { color: var(--text-muted); }

/* =============================================================
   DOKUMENTE-HEIMAT (hub / vg-home)
   ============================================================= */
.vg-tabs { display: flex; gap: var(--space-2); margin: var(--space-3) 0 var(--space-4); flex-wrap: wrap; }
.vg-tabs a { text-decoration: none; }
.vg-row-title { font-weight: 600; }
.vg-row-sub { color: var(--text-muted); font-size: var(--fs-sm); }
.vg-drift { color: var(--warning); }
.vg-row-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }

/* =============================================================
   OBJEKTAUSWAHL (entry_selection / vg-entry)
   ============================================================= */
.vg-entry-header { margin-bottom: var(--space-5); }
.vg-entry-header h1 { margin: 0; font-size: var(--fs-xl); }
.vg-entry-subheader { color: var(--text-muted); margin: var(--space-1) 0 0; }
.vg-entry-form { max-width: 600px; }
.vg-entry-form input[type="checkbox"], .vg-entry-form select {
           padding: var(--space-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.vg-entry-form .form-check { margin-bottom: var(--space-2); }
.vg-entry-label { display: block; font-weight: 600; margin-bottom: var(--space-1); }
.vg-entry-form .form-group { margin-bottom: var(--space-5); }
.vg-entry-units-box { border: 1px solid var(--border-default); border-radius: var(--radius-sm);
           padding: var(--space-4); background: var(--bg-sunken); }
.vg-entry-error { margin-top: var(--space-1); font-size: var(--fs-sm); }
.vg-entry-actions { display: flex; gap: var(--space-4); margin-top: var(--space-6); }
.vg-entry-actions .btn-secondary { text-decoration: none; }

@media (max-width: 1024px) {
  .vg-editor-layout { grid-template-columns: 1fr; }
  .vg-finalize-layout { grid-template-columns: 1fr; }
  .vg-sidebar { position: static; }
}
@media (max-width: 768px) {
  .toolbar .search { flex: 1 1 100%; max-width: none; }
}

/* ---- W3 contracts partials (aus _w3_scratch_contracts.css) ---- */
/* ==========================================================================
   Redesign W3 — contracts modal/list partials
   Token-based classes replacing former inline styles / hardcoded colors.
   Tokens only (from static/css/tokens.css); no hex colors.
   Append target — to be merged into static/css/app.css later.
   ========================================================================== */

/* Generic hide utility (initial display:none; reveal helpers set inline block). */
.contract-hidden { display: none; }

/* --- cell_edit.html: inline editable table-cell inputs --------------------- */
.c-cell-input {
  width: 100%;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  box-sizing: border-box;
}
.c-cell-input-date {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}

/* --- modal_field_edit.html: modal inline-edit fields ----------------------- */
.c-field-input {
  flex: 1;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}
.c-field-textarea {
  flex: 1;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  resize: vertical;
  font-family: inherit;
}

/* --- payment_plan_table.html ---------------------------------------------- */
.c-pp-block-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
}

/* --- _payment_plan_section.html ------------------------------------------- */
.contract-pp-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--bg-sunken);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-1) 0 var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}

/* --- contract_view_modal.html --------------------------------------------- */
.c-modal-hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin: 0 0 var(--space-4);
}
.c-modal-fields-col {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.c-status-row {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-default);
}
.c-info-panel {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--bg-sunken);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
}
.c-info-panel-title {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.c-info-col {
  flex: 1 1 160px;
  min-width: 150px;
}
.c-info-col-sm {
  flex: 1 1 130px;
  min-width: 120px;
}
.c-info-val {
  font-size: var(--fs-sm);
  color: var(--text);
}
.c-info-amount {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
}
.c-archive-confirm {
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-top: var(--space-3);
}
.c-archive-confirm-text {
  color: var(--danger);
  font-size: var(--fs-sm);
  margin: 0 0 var(--space-2);
}
.c-archive-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-2);
  cursor: pointer;
}
.c-mr-auto {
  margin-right: auto;
}
.c-archive-btn {
  margin-right: auto;
  color: var(--danger);
}

/* --- contract_edit_modal.html / contract_modal.html ----------------------- */
.c-field-inline {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
}
.c-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.c-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  border: 1px solid var(--border-strong);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  cursor: pointer;
}
.c-archive-confirm-bar {
  background: var(--danger-bg);
  border-top: 1px solid var(--danger);
  padding: var(--space-3) var(--space-5);
}
.c-badge-archived {
  background: var(--danger-bg);
  color: var(--danger);
  font-size: var(--fs-xs);
}

/* --- contract_detail.html -------------------------------------------------- */
.c-icon-mid {
  vertical-align: -2px;
}

/* ---- W3 document_generator partials (aus _w3_scratch_docgen.css) ---- */
/* ==========================================================================
   Redesign W3 · document_generator wizard/partials/signature migration
   Token-based classes replacing former inline styles + hardcoded hex.
   Appended by W3 docgen partials migration. Do NOT add hex here.
   ========================================================================== */

/* --- Phase 2: Kontext --------------------------------------------------- */
.dg-ctx-fieldset { display: grid; gap: var(--space-4); }

/* --- Phase 3: Variablen / Räume ---------------------------------------- */
.dg-var-fieldset { padding: 0; border: 1px solid var(--border-default); }
.dg-rooms-fieldset { padding: 0; border: 1px solid var(--border-default); margin-top: var(--space-4); }
.dg-rooms-body { padding: var(--space-4); display: grid; gap: 14px; }
.dg-field-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}
.dg-room-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-default);
}
.dg-fg-full { grid-column: 1 / -1; margin: 0; }

/* --- Phase 4: Prüfen ---------------------------------------------------- */
.dg-two-col {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-5);
  align-items: start;
}
.dg-review-main { display: grid; gap: var(--space-5); }
.dg-summary-reset { cursor: pointer; list-style: none; }
.dg-var-chips { padding: var(--space-3) var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dg-var-chip { font-family: var(--font-mono, monospace); cursor: default; }
.dg-block-edit-form { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.dg-promote-label {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

/* --- Phase 5: Freigabe -------------------------------------------------- */
.dg-signoff-main { display: grid; gap: var(--space-5); }
.dg-doc-section { border: 1px solid var(--border-default); border-radius: var(--radius); padding: var(--space-5); }
.dg-doc-h2 { margin-top: 0; font-size: var(--fs-lg); }
.dg-doc-h3 { font-size: var(--fs-md); }
.dg-assembled-sec { margin-bottom: var(--space-5); }
.dg-alert-success {
  padding: var(--space-4);
  background: var(--success-bg);
  border: 1px solid var(--success);
  border-radius: var(--radius);
  color: var(--success);
}
.dg-signoff-fields { display: grid; gap: var(--space-3); max-width: 448px; }
.dg-stack-label { display: grid; gap: var(--space-1); }
.dg-date-input { padding: var(--space-2) var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-sm); }

/* --- Protokoll-Panel ---------------------------------------------------- */
.dg-protokoll { border: 1px solid var(--border-default); border-radius: var(--radius); padding: var(--space-4); }
.dg-protokoll-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.dg-protokoll-item { display: flex; gap: var(--space-2); align-items: baseline; }
.dg-protokoll-time { font-size: var(--fs-sm); white-space: nowrap; }

/* --- Coming-soon Modal -------------------------------------------------- */
.dg-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-scrim, rgba(17, 24, 39, .45));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.dg-modal {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  max-width: 420px;
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
}
.dg-modal-title { margin: 0 0 var(--space-2); }
.dg-modal-body-text { color: var(--text-muted); margin: 0 0 var(--space-5); }

/* --- Document editor modal (moved from template <style>) ---------------- */
.dg-ed__title {
  width: 100%;
  font-size: var(--fs-lg);
  font-weight: 600;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
}
.dg-ed__toolbar {
  position: sticky;
  top: 0;
  background: var(--bg-surface);
  z-index: 2;
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--border-default);
  margin-bottom: var(--space-2);
}
.dg-ed__toolbar button {
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  font-size: var(--fs-sm);
}
.dg-ed__sec { margin-bottom: var(--space-4); }
.dg-ed__sec h4 { margin: 0 0 var(--space-1); font-size: var(--fs-md); }
.dg-ed__hint {
  display: inline-block;
  font-size: var(--fs-xs);
  color: var(--warning);
  background: var(--warning-bg);
  border: 1px solid var(--warning);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-1);
  margin-left: var(--space-1);
}
.dg-ed__area {
  min-height: 70px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-surface);
}
.dg-ed__area:focus { outline: 2px solid var(--brand); }

/* --- Konto selection panel (moved from template <style>) ---------------- */
.konto-selection-panel {
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  margin: var(--space-4) 0;
}
.konto-selection-panel .form-group { margin-bottom: var(--space-4); }
.konto-selection-panel label { display: block; font-weight: 500; margin-bottom: var(--space-2); }
.konto-selection-panel select {
  width: 100%;
  padding: var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.konto-selection-panel button { margin-top: var(--space-2); }

/* --- Signature sign (in-app) canvas ------------------------------------- */
.dg-sigpad {
  width: 100%;
  max-width: 600px;
  height: 200px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  touch-action: none;
  background: var(--bg-surface);
}

/* ═══════════════════════════════════════════════════════════════════
   W5 · WARTUNG / MÄNGEL / MAIL — Struktur-Umbau auf den abgenommenen
   Klickdummy (clickdummy/redesign-w5). Additive, token-basierte
   Komponenten; reine Visualisierung. Nur var(--…)-Tokens, kein bare
   Hex/--border. Baut auf der W1/W4-Basis auf (.panel/.pill/.stat/.tabs/
   .cell-*/.w4-hero/.w4-kv/.w4-toolbar/.w4-timeline) und ergänzt nur die
   für W5 neuen Bausteine (Prefix .w5-).
   ═══════════════════════════════════════════════════════════════════ */

/* ---- Layout-Helfer ---- */
.w5-grid-3 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-4); align-items: start; }
.w5-stat-auto { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

/* ---- Warn-Variante der Hinweisbox (.w4-note ist Info) ---- */
.w4-note.w5-note--warn { background: var(--warning-bg); color: var(--warning); }

/* ---- Fälligkeits-Anzeige (Countdown im Tabellen-Cell) ---- */
.w5-due { display: inline-flex; flex-direction: column; }
.w5-due .dd { font-weight: 600; }
.w5-due .rel { font-size: var(--fs-xs); color: var(--text-faint); margin-top: 1px; }
.w5-due.over .dd { color: var(--danger); }
.w5-due.soon .dd { color: var(--warning); }

/* ---- Priorität-Chip (Notfall / Routine) ---- */
.w5-prio { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: var(--fs-sm); }
.w5-prio::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.w5-prio.emergency { color: var(--danger); }
.w5-prio.routine   { color: var(--text-muted); }

/* ---- Foto-Galerie (Platzhalter) ---- */
.w5-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.w5-photo { aspect-ratio: 4 / 3; border-radius: var(--radius); border: 1px solid var(--border-default);
            background: var(--gray-100); color: var(--text-faint); display: grid; place-items: center;
            overflow: hidden; text-align: center; padding: var(--space-2); font-size: var(--fs-xs); }
.w5-photo svg { width: 30px; height: 30px; }
.w5-photo--add { background: var(--brand-050); color: var(--brand); border: 1px dashed var(--brand); }

/* ---- Mail-Verlauf (Thread-Liste als Feed) ---- */
.w5-mail-item { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-5);
                border-bottom: 1px solid var(--gray-100); text-decoration: none; color: var(--text); }
.w5-mail-item:last-child { border-bottom: none; }
.w5-mail-item:hover { background: var(--gray-050); }
.w5-mail-item.w5-unread { background: var(--brand-050); }
.w5-mail-item.w5-unread:hover { background: var(--brand-100); }
.w5-mail-ava { width: 38px; height: 38px; border-radius: 50%; background: var(--brand-050); color: var(--brand-700);
               display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm); flex: none; }
.w5-mail-ava.out { background: var(--gray-100); color: var(--gray-600); }
.w5-mail-b { flex: 1; min-width: 0; }
.w5-mail-b .top { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; }
.w5-mail-b .subj { font-weight: 600; display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.w5-mail-b .when { color: var(--text-faint); font-size: var(--fs-xs); white-space: nowrap; }
.w5-mail-b .from { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 1px; }
.w5-mail-b .prev { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 5px; line-height: 1.5;
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w5-mail-b .count { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: var(--radius-pill);
                    background: var(--gray-100); color: var(--gray-600); font-size: var(--fs-xs); font-weight: 700; }

/* ---- Mail-Thread (Nachrichten) ---- */
.w5-msg { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--gray-100); }
.w5-msg:last-child { border-bottom: none; }
.w5-msg-b { flex: 1; min-width: 0; }
.w5-msg .mh { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; margin-bottom: 4px; flex-wrap: wrap; }
.w5-msg .mh .who { font-weight: 600; }
.w5-msg .mh .when { color: var(--text-faint); font-size: var(--fs-xs); white-space: nowrap; }
.w5-msg .body { color: var(--text); font-size: var(--fs-sm); line-height: 1.6; white-space: pre-wrap; }
.w5-msg.out .w5-msg-b { background: var(--brand-050); border-radius: var(--radius); padding: var(--space-3) var(--space-4); }

/* ---- Kontext-Chips (Zuordnung) ---- */
.w5-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.w5-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--radius-pill);
           background: var(--brand-050); color: var(--brand-700); font-size: var(--fs-sm); font-weight: 600; }

@media (max-width: 768px) {
  .w5-grid-3 { grid-template-columns: 1fr; }
  .w5-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   W6 — Finanzen/Buchungen: Klassen ausgelagert aus Template-Inline-Styles
   (Karte redesign-w6). Rein visueller 1:1-Ersatz der vormaligen style="…"-
   Attribute — token-basiert, dark-mode-sicher. Keine Funktionsänderung.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Modal-Untertitel bündig zur Body-Innenkante (statt inline padding/margin) */
/* Karte 03897aa0 (#6.1/#2.4): das negative margin-top zog den Untertitel auf die
   border-bottom des .modal-header und liess Text und Trennlinie ueberlappen.
   Der Untertitel gehoert jetzt in den Header-Block selbst (siehe _modal_base.html);
   diese Klasse bleibt nur fuer Alt-Aufrufer und haelt sauberen Abstand. */
.modal-subtitle--inset { padding: 0 22px var(--space-2); }

/* Beleg-Vorschau-Modal: Bild/PDF-Frame */
.beleg-preview__img {
  max-width: 100%; height: auto; display: block; margin: 0 auto;
}
.beleg-preview__frame {
  width: 100%; height: 70vh; border: 0;
}

/* Erfassen-Wizard: „In Buchung übernehmen" mit Beleg-Vorschau rechts
   (vormals scoped <style>-Block im Template). */
.bk-uebernehmen-split { display: flex; gap: var(--space-4); align-items: stretch; }
.bk-uebernehmen-split__form { flex: 1 1 55%; min-width: 0; }
.bk-uebernehmen-split__preview { flex: 1 1 45%; min-width: 0; border: 0; }
.bk-beleg-preview { margin: 0; }
.bk-beleg-preview > summary {
  cursor: pointer; font-weight: 600; margin-bottom: var(--space-1); list-style: none;
}
.bk-beleg-preview > summary::-webkit-details-marker { display: none; }
.bk-beleg-preview__frame {
  width: 100%; height: 64vh;
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
}
.bk-beleg-preview__img {
  max-width: 100%; height: auto; display: block;
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
}
@media (max-width: 1023.98px) {
  .bk-uebernehmen-split { flex-direction: column; }
  .bk-beleg-preview__frame { height: 44vh; }
}

/* Buchung bearbeiten: Zahlungsstatus-Karte */
.sec-h {
  font-size: var(--text-xs); font-weight: 700; color: var(--text-faint);
  letter-spacing: .06em; margin: var(--space-5) 0 var(--space-2);
  text-transform: uppercase;
}
.paycard {
  border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden;
}
.paycard-top {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface-2); border-bottom: 1px solid var(--border-default);
  flex-wrap: wrap;
}
.src-inline {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--text-muted);
}
.paycard-body { padding: var(--space-3) var(--space-4); }
.paycard-body .kv {
  display: flex; justify-content: space-between; gap: var(--space-3);
  font-size: var(--text-sm); padding: 3px 0;
}
.paycard-body .kv .k { color: var(--text-muted); }
.paycard-act {
  padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-default);
  display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap;
}
.modal-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-3); margin-top: var(--space-5);
}

/* Ignorier-Regeln-Modal: Zeilen-Raster */
.ignore-rules-grid {
  display: grid; grid-template-columns: 1fr 1.4fr auto auto; gap: var(--space-3);
}
.ignore-rules-head {
  padding: 0 2px 6px; font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted);
}
.ignore-rules-row {
  align-items: center; padding: var(--space-2) 2px;
  border-top: 1px solid var(--border-default);
}
.ignore-rules-row--new { align-items: end; }
.ignore-rules-row__actions {
  white-space: nowrap; display: flex; gap: var(--space-2);
}
.ignore-rules__empty { padding: var(--space-3) 2px; }

/* Auto-Zuordnung (Buchungsautomatismus) — Regel-Editor-Modal */
.bank-panel__header-actions { display: flex; gap: var(--space-2); align-items: center; }
.aa-rule {
  border: none; border-radius: 0; box-shadow: none;
  padding: var(--space-4); margin-bottom: var(--space-4);
  background: transparent;
}
/* Aus einem Umsatz vorbef\u00fcllte neue Regel: hervorgehoben, damit klar ist,
   dass hier bewusst gepr\u00fcft/gespeichert werden muss (keine Auto-Speicherung). */
/* Karte 03897aa0 (#2b) / Karte 0054d48e — GRUNDSATZ-REGEL Modal-Design: fuellt
   ein Block das Modal in voller Breite aus, darf er WEDER runde Ecken NOCH
   einen Rahmen/Glow/Schatten haben. Ein zweiter Rahmen (auch farbig/"blauer
   Streifen") "in" der schon umrandeten .modal-Box wirkt wie eine
   Karte-in-der-Karte (3D-Bevel-Optik) — Vergleich: Panel „Verbundene
   Konten“ (.bank-panel) hat KEINE verschachtelte Innenbox. Die vorbefüllte
   Variante bekommt daher ebenfalls keinen eigenen Rahmen mehr; .aa-prefill-hint
   (Textfarbe) markiert die Vorbefüllung bereits ausreichend. */
.aa-rule--prefill {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.aa-prefill-hint {
  font-size: var(--text-sm); font-weight: 600; color: var(--color-primary-dark);
  margin: 0 0 var(--space-3);
}
.aa-rule__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-3);
}
.aa-rule__name { flex: 1 1 auto; font-weight: 600; }
.aa-rule__meta { display: flex; align-items: center; gap: var(--space-3); white-space: nowrap; }
.aa-rule__hits { font-size: var(--text-xs); color: var(--text-muted); }
.aa-label {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted);
  margin: var(--space-3) 0 var(--space-2);
}
.aa-cond-list { display: flex; flex-direction: column; gap: var(--space-2); }
.aa-cond-row {
  display: grid; grid-template-columns: 1.2fr 1fr 1.4fr .8fr auto;
  gap: var(--space-2); align-items: center;
}
/* Karte 03897aa0 (#2.1) — Root-Cause des „Betreff doppelt“-Bugs: die Autoren-Regel
   `display:grid` schlaegt das UA-Default `[hidden]{display:none}`, weil sie
   spezifischer ist. Die Klonvorlage war damit trotz `hidden` SICHTBAR. */
.aa-cond-row[hidden] { display: none; }
/* Feldabhaengiges „bis“-Feld (Nachtrag 2): bei Text-/Konto-Feldern fachlich sinnlos. */
.aa-cond-row .aa-cond-value2[hidden],
.aa-cond-row .aa-cond-account[hidden] { display: none; }
.aa-input, .aa-select {
  padding: var(--space-2); border: 1px solid var(--border-default);
  border-radius: var(--radius); background: var(--bg-surface); font: inherit; color: var(--text);
}
.aa-input--narrow { max-width: 120px; }
.aa-add { margin-top: var(--space-2); }
.aa-target { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.aa-target__obj { flex: 1 1 240px; }
.aa-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); }
.aa-check--block { display: flex; margin-top: var(--space-3); }
.aa-rule__actions {
  display: flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-4);
}
.aa-hint { font-size: var(--text-xs); color: var(--text-muted); }
.aa-empty { padding: var(--space-3) 2px; }
.aa-footer { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.aa-footer__right { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.aa-input--block { width: 100%; }
.aa-hint--target { margin-top: var(--space-2); }

/* Auto-Zuordnung · Regel-Verwaltung (Vollseite, Karte 21ec4e6b) */
.aa-manage__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4);
}
.aa-manage__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.aa-manage__card { overflow-x: auto; }
.aa-manage__footer {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3);
}
.aa-table { width: 100%; border-collapse: collapse; }
.aa-table th, .aa-table td {
  padding: var(--space-3); text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--border-default);
}
.aa-table th {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .03em;
  color: var(--text-muted); background: var(--bg-surface-2, var(--bg-surface));
  white-space: nowrap;
}
.aa-table tbody tr:last-child td { border-bottom: none; }
.aa-table__num { text-align: center; white-space: nowrap; }
.aa-table__center { text-align: center; }
.aa-table__end { text-align: right; }
.aa-table__rule-name { font-weight: 700; }
.aa-table__empty { padding: var(--space-5); text-align: center; color: var(--text-muted); }
.aa-row--off { opacity: .55; }
.aa-cond-pill {
  display: inline-block; background: var(--bg-surface-2);
  border: 1px solid var(--border-default); border-radius: 999px;
  padding: 2px 9px; font-size: var(--text-xs); margin: 2px 3px 2px 0;
  color: var(--text-primary);
}
.aa-cond-pill b { color: var(--color-primary-dark); }
.aa-target-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.aa-tag {
  font-size: var(--text-xs); padding: 2px 8px; border-radius: 999px;
  background: var(--color-primary-dim); color: var(--color-primary-dark); font-weight: 700;
}
.aa-tag--private { background: var(--color-purple-chip-bg); color: var(--color-purple-badge); }
.aa-metric { font-weight: 800; }
.aa-actions { display: flex; gap: var(--space-2); justify-content: flex-end; flex-wrap: wrap; }
.aa-actions__del { display: inline; margin: 0; }
.aa-switch-form { margin: 0; display: inline-flex; }
.aa-switch { position: relative; display: inline-block; width: 38px; height: 22px; cursor: pointer; }
.aa-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.aa-switch__slider {
  position: absolute; inset: 0; background: var(--border-strong, #cfd6e2);
  border-radius: 999px; transition: background .15s;
}
.aa-switch__slider::before {
  content: ""; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .15s;
}
.aa-switch input:checked + .aa-switch__slider { background: var(--color-primary); }
.aa-switch input:checked + .aa-switch__slider::before { transform: translateX(16px); }
.aa-switch input:focus-visible + .aa-switch__slider {
  outline: 2px solid var(--color-primary); outline-offset: 2px;
}

/* Auto-Zuordnung · Debug-Bericht */
.aa-debug__form { margin-bottom: var(--space-3); }
.aa-debug__picker { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.aa-debug__field label { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-bottom: 4px; }
.aa-debug__run { margin-top: var(--space-3); }
.aa-debug__sep { border: none; border-top: 1px solid var(--border-default); margin: var(--space-4) 0; }
.aa-verdict {
  display: flex; align-items: center; gap: 10px; padding: var(--space-3);
  border-radius: var(--radius); font-weight: 700; margin-bottom: var(--space-4);
}
.aa-verdict--no { background: var(--danger-bg); color: var(--danger); }
.aa-verdict--yes { background: var(--success-bg); color: var(--success); }
.aa-kv {
  display: grid; grid-template-columns: 130px 1fr; gap: 4px 10px;
  font-size: var(--text-sm); background: var(--bg-surface-2);
  border-radius: var(--radius); padding: var(--space-3); margin-bottom: var(--space-4);
}
.aa-kv__k { color: var(--text-muted); }
.aa-kv__v { min-width: 0; overflow-wrap: anywhere; }
.aa-check {
  display: flex; gap: 10px; padding: var(--space-3);
  border: 1px solid var(--border-default); border-radius: var(--radius);
  margin-bottom: var(--space-2); align-items: flex-start;
}
.aa-check__ic { font-weight: 800; }
.aa-check--pass .aa-check__ic { color: var(--success); }
.aa-check--fail .aa-check__ic { color: var(--danger); }
.aa-check__txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.aa-check__expr { font-size: var(--text-sm); color: var(--text-muted); overflow-wrap: anywhere; }
.aa-check__actual { margin-top: 3px; font-size: var(--text-sm); overflow-wrap: anywhere; }
.aa-reasons { margin: var(--space-3) 0; padding-left: var(--space-4); }
.aa-reasons__item { color: var(--danger); font-size: var(--text-sm); margin-bottom: 4px; }

@media (max-width: 767.98px) {
  .aa-debug__picker { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   W7 · PARTNER & BELEGE — Struktur-Umbau auf den abgenommenen Klickdummy
   clickdummy/redesign-w7. Additiv, token-basiert (Präfix .w7-), baut auf der
   W1/W4/W5/W6-Basis auf (.page-head/.panel/.pill/.stat/.tabs/.table-card).
   Nur var(--…)-Tokens, kein bares --border, keine Hex, keine bare px-fs.
   ═══════════════════════════════════════════════════════════════════ */

/* ---- Filter-Toolbar ---- */
.w7-toolbar { display: flex; align-items: flex-end; gap: var(--space-3);
              margin-bottom: var(--space-4); flex-wrap: wrap; }
.w7-fg { display: flex; flex-direction: column; gap: 5px; }
.w7-fg label { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase;
               letter-spacing: .04em; color: var(--text-muted); }
.w7-filter { height: 38px; padding: 0 12px; border: 1px solid var(--border-default);
             border-radius: var(--radius); background: var(--bg-surface); font: inherit;
             color: var(--text); min-width: 150px; }
.w7-filter:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100); }
.w7-search { position: relative; }
.w7-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
                 width: 15px; height: 15px; color: var(--text-faint); }
.w7-search input { height: 38px; padding: 0 12px 0 33px; border: 1px solid var(--border-default);
                   border-radius: var(--radius); background: var(--bg-surface); font: inherit;
                   color: var(--text); min-width: 240px; }
.w7-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100); }
.w7-spacer { flex: 1; }

/* ---- Numerische Zelle / Utilities ---- */
.w7-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
thead th.w7-num { text-align: right; }
.w7-muted { color: var(--text-muted); }
.w7-strong { font-weight: 600; }
.w7-mb-0 { margin-bottom: 0; }
.w7-mt-4 { margin-top: var(--space-4); }
.w7-nowrap { white-space: nowrap; }

/* ---- Hinweisbox ---- */
.w7-note { background: var(--info-bg); color: var(--info); border-radius: var(--radius);
           padding: var(--space-3) var(--space-4); display: flex; gap: 10px; font-size: var(--fs-sm);
           align-items: flex-start; margin-bottom: var(--space-4); }
.w7-note svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.w7-note.warn { background: var(--warning-bg); color: var(--warning); }
.w7-note.ok { background: var(--success-bg); color: var(--success); }

/* ---- Bewertungs-Sterne (Amber = --warning) ---- */
.w7-stars { color: var(--warning); letter-spacing: 2px; font-size: var(--fs-md); white-space: nowrap; }
.w7-stars.lg { font-size: var(--fs-xl); }
.w7-stars .off { color: var(--gray-300); }
.w7-rating { display: inline-flex; align-items: center; gap: 7px; }
.w7-rating .cnt { color: var(--text-muted); font-size: var(--fs-sm); }

/* ---- Firmen-Avatar (Initialen) ---- */
.w7-co { display: inline-flex; align-items: center; gap: var(--space-3); }
.w7-co-logo { width: 34px; height: 34px; border-radius: var(--radius); display: grid; place-items: center;
              flex: none; background: var(--brand-050); color: var(--brand-700); font-weight: 700;
              font-size: var(--fs-sm); letter-spacing: -.3px; }
.w7-co .nm { font-weight: 600; }
.w7-co .sc { color: var(--text-muted); font-size: var(--fs-sm); }

/* ---- Gewerk-Chips ---- */
.w7-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.w7-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px;
           border-radius: var(--radius-pill); background: var(--brand-050); color: var(--brand-700);
           font-size: var(--fs-xs); font-weight: 600; }

/* ---- Detail-Layout: Info-Panel + Inhalt ---- */
.w7-detail { display: grid; grid-template-columns: 340px 1fr; gap: var(--space-5); align-items: start; }
.w7-info-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.w7-info-head .w7-co-logo { width: 46px; height: 46px; font-size: var(--fs-lg); border-radius: var(--radius-lg); }
.w7-info-head h2 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.3px; }

/* ---- Key/Value-Blöcke ---- */
.w7-kv { display: grid; grid-template-columns: 130px 1fr; gap: 10px var(--space-4); margin: 0; }
.w7-kv dt { color: var(--text-muted); font-size: var(--fs-sm); }
.w7-kv dd { font-weight: 500; font-variant-numeric: tabular-nums; }
.w7-kv dd a { font-weight: 600; }

.w7-section { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-default); }
.w7-section:first-child { border-top: none; }
.w7-section h4 { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
                 color: var(--text-faint); margin-bottom: var(--space-3); }
.w7-contact { font-size: var(--fs-sm); line-height: 1.9; }
.w7-contact .who { font-weight: 600; font-size: var(--fs-md); }

/* ---- Bewertungs-Verteilung (Balken) ---- */
.w7-dist { display: grid; gap: 7px; }
.w7-dist-row { display: grid; grid-template-columns: 42px 1fr 34px; gap: var(--space-3);
               align-items: center; font-size: var(--fs-sm); }
.w7-dist-bar { height: 8px; border-radius: var(--radius-pill); background: var(--gray-100); overflow: hidden; }
.w7-dist-bar > i { display: block; height: 100%; background: var(--warning); border-radius: inherit; }
.w7-score { font-size: var(--text-3xl); font-weight: 700; letter-spacing: -1px; line-height: 1; }

/* ---- Bewertungskarte ---- */
.w7-review { padding: var(--space-4) 0; border-top: 1px solid var(--gray-100); }
.w7-review:first-child { border-top: none; padding-top: 0; }
.w7-review .rhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: var(--space-3); }
.w7-review .meta { color: var(--text-muted); font-size: var(--fs-sm); }
.w7-review .body { font-size: var(--fs-md); color: var(--text); }

/* ---- Beleg-Detail: Vorschau + Metadaten ---- */
.w7-beleg { display: grid; grid-template-columns: 1fr 360px; gap: var(--space-5); align-items: start; }
.w7-preview { background: var(--gray-100); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
              padding: var(--space-5); display: flex; flex-direction: column; align-items: center;
              gap: var(--space-4); min-height: 560px; }
.w7-page { width: 100%; max-width: 460px; background: var(--bg-surface); border: 1px solid var(--border-default);
           border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: var(--space-6); min-height: 500px; }
.w7-page .ph { height: 12px; border-radius: var(--radius-pill); background: var(--gray-100); margin-bottom: 10px; }
.w7-page .ph.w-40 { width: 40%; } .w7-page .ph.w-60 { width: 60%; } .w7-page .ph.w-80 { width: 80%; }
.w7-page .ph.w-30 { width: 30%; } .w7-page .ph.w-100 { width: 100%; }
.w7-page .ph.tall { height: 22px; }
.w7-page .ph.strong { background: var(--gray-200); }
.w7-page .spacer { height: var(--space-5); }
.w7-page .logo-ph { width: 90px; height: 34px; border-radius: var(--radius-sm); background: var(--brand-050); margin-bottom: var(--space-5); }
.w7-preview-bar { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted);
                  font-size: var(--fs-sm); font-weight: 600; }
.w7-preview-bar svg { width: 16px; height: 16px; }

/* ---- File-Kind Badge ---- */
.w7-fk { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-sm);
         flex: none; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .03em; }
.w7-fk.pdf { background: var(--danger-bg); color: var(--danger); }
.w7-fk.img { background: var(--info-bg); color: var(--info); }
.w7-fk.doc { background: var(--brand-050); color: var(--brand-700); }
.w7-file { display: inline-flex; align-items: center; gap: var(--space-3); }
.w7-file .fn { font-weight: 600; }
.w7-file .fs { color: var(--text-muted); font-size: var(--fs-sm); }

/* ---- Ordner / Kategorien (Sidebar-Liste im Belege-Screen) ---- */
.w7-split { display: grid; grid-template-columns: 210px 1fr; gap: var(--space-5); align-items: start; }
.w7-folders { display: flex; flex-direction: column; gap: 2px; }
.w7-folder { display: flex; align-items: center; gap: var(--space-3); padding: 9px var(--space-3);
             border-radius: var(--radius-sm); color: var(--text-muted); font-weight: 500; cursor: pointer;
             text-decoration: none; }
.w7-folder svg { width: 17px; height: 17px; flex: none; }
.w7-folder .cnt { margin-left: auto; font-size: var(--fs-xs); color: var(--text-faint); font-weight: 600; }
.w7-folder:hover { background: var(--gray-100); color: var(--text); text-decoration: none; }
.w7-folder.active { background: var(--brand-050); color: var(--brand-700); font-weight: 600; }
.w7-folder.active svg { color: var(--brand); }
.w7-split thead th, .w7-split tbody td { padding-left: var(--space-3); padding-right: var(--space-3); }
.w7-split .w7-search input { min-width: 180px; }

/* ---- Zurück-Link ---- */
.w7-back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-weight: 600;
           font-size: var(--fs-sm); margin-bottom: var(--space-3); cursor: pointer; background: none; border: none; }
.w7-back svg { width: 16px; height: 16px; }

/* ---- Upload / Dropzone ---- */
.w7-dz { border: 2px dashed var(--border-default); border-radius: var(--radius-lg); background: var(--gray-050);
         padding: var(--space-8) var(--space-5); text-align: center; }
.w7-dz .ico { width: 60px; height: 60px; border-radius: var(--radius-lg); background: var(--brand-050);
              color: var(--brand); display: grid; place-items: center; margin: 0 auto var(--space-4); }
.w7-dz .ico svg { width: 28px; height: 28px; }
.w7-dz h4 { font-size: var(--fs-lg); margin-bottom: 4px; }
.w7-dz p { color: var(--text-muted); margin-bottom: var(--space-4); }
.w7-dz .types { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; color: var(--text-faint); text-transform: uppercase; }
.w7-ingest { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
             border: 1px solid var(--border-default); border-radius: var(--radius); background: var(--bg-surface);
             margin-bottom: var(--space-2); }
.w7-ingest .bar { flex: 1; }
.w7-toggle { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-weight: 600;
             font-size: var(--fs-sm); color: var(--text-muted); }
.w7-toggle .sw { width: 34px; height: 20px; border-radius: var(--radius-pill); background: var(--gray-300);
                 position: relative; flex: none; }
.w7-toggle .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
                        border-radius: 50%; background: var(--bg-surface); box-shadow: var(--shadow-sm); }
.w7-toggle.on { color: var(--brand-700); }
.w7-toggle.on .sw { background: var(--brand); }
.w7-toggle.on .sw::after { transform: translateX(14px); }

/* ---- Zuordnungs-Ziel-Picker ---- */
.w7-pick { display: grid; grid-template-columns: 20px 1fr auto; gap: var(--space-3); align-items: center;
           padding: var(--space-3) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius);
           cursor: pointer; margin-bottom: var(--space-2); }
.w7-pick:hover { border-color: var(--brand); background: var(--brand-050); }
.w7-pick.sel { border-color: var(--brand); background: var(--brand-050); box-shadow: 0 0 0 1px var(--brand); }
.w7-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-default); }
.w7-pick.sel .w7-radio { border-color: var(--brand); background: radial-gradient(circle at center, var(--brand) 42%, transparent 46%); }
.w7-pick .ref { font-weight: 600; }
.w7-pick .meta { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 2px; }

/* ---- KPI-Zeile (4 statt 5 Kacheln) ---- */
.w7-stat-4 { grid-template-columns: repeat(4, 1fr); }

/* ---- Breiten-Utilities (statt Inline-Styles für Balken) ---- */
.w7-w-3 { width: 3%; } .w7-w-6 { width: 6%; } .w7-w-8 { width: 8%; }
.w7-w-12 { width: 12%; } .w7-w-18 { width: 18%; } .w7-w-22 { width: 22%; }
.w7-w-55 { width: 55%; } .w7-w-62 { width: 62%; } .w7-w-70 { width: 70%; }
.w7-w-78 { width: 78%; } .w7-w-84 { width: 84%; } .w7-w-100 { width: 100%; }

/* ---- Panel-Footer (Button-Zeile am Panelfuß) ---- */
.w7-panel-foot { display: flex; justify-content: flex-end; gap: var(--space-3);
                 padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-default); }

/* ---- Grid-Kinder dürfen schrumpfen (verhindert Tabellen-Overflow) ---- */
.w7-split > *, .w7-detail > *, .w7-beleg > * { min-width: 0; }

/* ---- Aktionsspalte: umbrechen statt aus .table-card laufen ---- */
td.w7-actions { white-space: normal; }

/* ---- Inline-Warnbutton (Datenkonflikt) ---- */
.btn-inline-warn { background: none; border: none; cursor: pointer; color: var(--warning);
                   font-size: var(--fs-sm); padding: 0 2px; }
.w7-co .nm a { font-weight: 600; }

/* ---- Hinweisbox als Button (klickbarer Konflikt-Hinweis) ---- */
.w7-note-btn { width: 100%; border: none; cursor: pointer; text-align: left; font: inherit; }
/* ---- Interaktives Sterne-Widget (Bewertung abgeben) ---- */
.w7-star-widget { display: inline-flex; gap: 6px; cursor: pointer; }
.w7-star-widget .sw-star { font-size: var(--text-2xl); color: var(--gray-300); user-select: none;
                           transition: color .1s; }
.w7-star-widget .sw-star.on { color: var(--warning); }

/* ---- Umsatz-Tab (Nachunternehmer-Detail): Filter, KPI, Monatsbalken ---- */
.sub-rev-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-5); }
.sub-rev-custom { margin-left: auto; display: flex; gap: 6px; align-items: center;
                  font-size: var(--fs-sm); color: var(--text-muted); }
.sub-rev-custom input[type="date"] { border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 5px 8px; }
.sub-rev-total { font-size: var(--fs-xl); font-weight: 600; }
.sub-rev-chart { display: flex; align-items: flex-end; gap: 6px; height: 120px; padding: 8px 0;
                 border-bottom: 1px solid var(--border-default); margin-bottom: var(--space-6); }
.sub-rev-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; }
.sub-rev-col .amt { font-size: var(--fs-xs); color: var(--text-muted); }
.sub-rev-col .lbl { font-size: var(--fs-xs); color: var(--text-muted); }
.sub-rev-bar { width: 70%; border-radius: 3px 3px 0 0; min-height: 2px; height: var(--bar-h, 2px);
               background: var(--color-primary); }
.sub-rev-bar.is-empty { height: 2px; background: var(--border-default); }

/* ---- W7 kleine Hygiene-Utilities (Dokumente/Nachunternehmer) ---- */
.doc-pagination { margin-top: var(--space-4); display: flex; gap: var(--space-2); align-items: center; }
.doc-status-ic.is-active { color: var(--color-green); }
.doc-status-ic.is-inactive { opacity: .5; }
.doc-test-ok { color: var(--success); }
.sub-modal-fieldset { border: 1px solid var(--border-default); border-radius: var(--radius-md);
                      padding: 14px 16px; margin: 12px 0; }
.trade-rename-inp { width: 150px; }
.routing-list-head { margin-top: var(--space-5); }

/* ═══════════════════════════════════════════════════════════════════
   W8 — Auswertung & System (Reporting + Einstellungen/System)
   Token-basiert, dark-mode-sicher. Ergänzt W1/W4-W7-Klassen
   (.stat/.panel/.page-head/.table-card/.w4-*). Keine Hex, keine px-fs.
   ═══════════════════════════════════════════════════════════════════ */

/* ---- Kachel-Grid (Berichtstypen / Systembereiche) ---- */
.w8-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-5); }
.w8-tiles.cols-2 { grid-template-columns: repeat(2, 1fr); }
.w8-tile { display: flex; flex-direction: column; gap: var(--space-3); text-align: left;
           background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
           box-shadow: var(--shadow-sm); padding: var(--space-5); color: inherit; text-decoration: none;
           transition: border-color .12s, box-shadow .12s; }
.w8-tile:hover { border-color: var(--brand); box-shadow: var(--shadow-md); }
.w8-tile .ico { width: 44px; height: 44px; border-radius: var(--radius); flex: none;
                background: var(--brand-050); color: var(--brand); display: grid; place-items: center; }
.w8-tile .ico svg { width: 22px; height: 22px; }
.w8-tile .ico.neutral { background: var(--gray-100); color: var(--gray-600); }
.w8-tile h4 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.2px; }
.w8-tile p { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.5; margin: 0; }
.w8-tile .foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--space-2); }
.w8-tile .foot .meta { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); }
.w8-tile .foot .go { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); font-weight: 600; color: var(--brand-700); }
.w8-tile .foot .go svg { width: 15px; height: 15px; }

/* ---- Cashflow-Anteil je Objekt (horizontale Balken) ---- */
.w8-mix { display: grid; gap: var(--space-4); }
.w8-mix-row .top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-bottom: 6px; }
.w8-mix-row .nm { font-weight: 600; font-size: var(--fs-sm); }
.w8-mix-row .val { color: var(--text-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.w8-mix-bar { height: 8px; border-radius: var(--radius-pill); background: var(--gray-100); overflow: hidden; }
.w8-mix-bar > span { display: block; height: 100%; background: var(--brand); border-radius: var(--radius-pill); }

/* ---- Integrations-/Status-Liste (Panel-Rows) ---- */
.w8-int-list { display: flex; flex-direction: column; }
.w8-int-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5);
              border-bottom: 1px solid var(--gray-100); }
.w8-int-row:last-child { border-bottom: none; }
.w8-int-row .ic { width: 34px; height: 34px; border-radius: var(--radius); flex: none; background: var(--brand-050);
                  color: var(--brand); display: grid; place-items: center; }
.w8-int-row .ic svg { width: 18px; height: 18px; }
.w8-int-row .nm { flex: 1; min-width: 0; }
.w8-int-row .nm strong { font-weight: 600; display: block; }
.w8-int-row .nm span { color: var(--text-muted); font-size: var(--fs-sm); }

/* ---- Integrations-Kacheln (Einstellungen) ---- */
.w8-int-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.w8-int-tile { display: flex; flex-direction: column; gap: var(--space-3); background: var(--bg-surface);
               border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-5); }
.w8-int-tile .top { display: flex; align-items: center; gap: var(--space-3); }
.w8-int-tile .ic { width: 40px; height: 40px; border-radius: var(--radius); flex: none; background: var(--brand-050);
                   color: var(--brand); display: grid; place-items: center; }
.w8-int-tile .ic svg { width: 20px; height: 20px; }
.w8-int-tile h4 { font-size: var(--fs-md); font-weight: 600; }
.w8-int-tile p { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.5; margin: 0; flex: 1; }
.w8-int-tile .foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }

/* ---- Nutzung (Abo/Plan) ---- */
.w8-usage { display: grid; gap: var(--space-4); }
.w8-usage-row .top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.w8-usage-row .nm { font-weight: 600; font-size: var(--fs-sm); }
.w8-usage-row .val { color: var(--text-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

/* ---- Rollen-Pills ---- */
.w8-role { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: var(--radius-pill);
           background: var(--gray-100); color: var(--gray-700); font-size: var(--fs-xs); font-weight: 600; }
.w8-role.admin { background: var(--brand-050); color: var(--brand-700); }
.w8-roles { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---- Export-/Aktions-Buttongruppe ---- */
.w8-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* ---- Automatische-Monatsberichte-Hinweis (Toggle, rein visuell) ---- */
.w8-toggle-row { display: flex; align-items: center; gap: var(--space-3); background: var(--bg-surface-2);
                 border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4);
                 margin-bottom: var(--space-4); }
.w8-toggle-row .txt { flex: 1; min-width: 0; }
.w8-toggle-row .txt strong { font-weight: 600; display: block; }
.w8-toggle-row .txt span { color: var(--text-muted); font-size: var(--fs-sm); }
.w8-switch { width: 40px; height: 22px; border-radius: var(--radius-pill); background: var(--gray-300); position: relative; flex: none; }
.w8-switch.on { background: var(--brand); }
.w8-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg-surface); }
.w8-switch.on::after { left: 20px; }

/* ---- Aktionsspalte: umbrechen statt clippen (harte Regel 5) ---- */
.w8-actions-cell { white-space: normal; }
.w8-actions-cell > div { display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 1023.98px) {
  .w8-tiles, .w8-int-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
  .w8-tiles, .w8-int-tiles, .w8-tiles.cols-2 { grid-template-columns: 1fr; }
}

/* ---- W8 Modal-Checkbox-Zeile ---- */
.w8-check { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); }
.w8-check input { margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   W9 — Public / Klickdummy / Portal (Karte redesign-w9)
   Token-basierte Klassen, die die letzten Inline-Styles der Public-/Portal-
   Templates ersetzen. Kornblume-CI via --color-primary / --brand. Rein visuell.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Content-Container für Public-Standalone-Seiten (Artikel, Register, Feedback) */
.mk-page          { max-width: 900px; margin: 0 auto; padding: var(--space-8) var(--space-4); }
.mk-page--article { max-width: 760px; }
.mk-page--md      { max-width: 840px; }
.mk-page--sm      { max-width: 620px; }
.mk-page--xs      { max-width: 560px; }
.mk-wrap--narrow  { max-width: 860px; }

/* Inline-Link in Fließtext / Breadcrumb */
.mk-link { color: var(--color-primary); text-decoration: none; }
.mk-link:hover { text-decoration: underline; }

/* Abschnitts- und CTA-Abstände in Ratgeber-Artikeln */
.mk-article-section { margin-top: var(--space-8); }
.mk-article-cta     { text-align: center; margin-top: var(--space-8); }
.mk-subhead         { font-size: var(--fs-md); margin-top: var(--space-6); }

/* Landing-/Public-Preistabelle */
.mk-price-card              { padding: var(--space-6); }
.mk-price-card--featured    { border: 2px solid var(--color-primary); }
.mk-price__name             { margin: 0 0 var(--space-1); }
.mk-price__amount           { font-size: var(--fs-2xl); font-weight: 800; margin: var(--space-2) 0; }
.mk-price__per              { font-size: var(--fs-md); font-weight: 400; }
.mk-price__list             { padding-left: var(--space-4); margin: var(--space-4) 0; font-size: var(--fs-md); line-height: 1.8; color: var(--text-secondary); }

/* Register-Split (Formular + Vorteilsliste) */
.mk-register-grid { max-width: 840px; margin: var(--space-8) auto; padding: 0 var(--space-4);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-8); align-items: start; }
.mk-register__list { padding-left: var(--space-4); font-size: var(--fs-md); line-height: 1.9; margin: 0 0 var(--space-4); }
.mk-consent-label  { display: flex; gap: var(--space-2); align-items: flex-start; margin: var(--space-4) 0;
  font-size: var(--fs-sm); line-height: 1.5; color: var(--text-secondary); }

/* Feedback-/Erfolg-Bestätigungen */
.mk-confirm-card { padding: var(--space-4); border-top: 2px solid var(--color-primary); margin-bottom: var(--space-4); }
.mk-note         { margin: var(--space-1) 0 0; color: var(--text-muted); }
.mk-callout--warn { margin-top: var(--space-4); padding: var(--space-3);
  border: 2px dashed var(--color-red); background: var(--color-red-dim); text-align: left; }

/* Generischer Fehlertext / Formfehler */
.mk-error { color: var(--color-red); }
.mk-form-error { color: var(--color-red); font-size: var(--fs-sm); margin: -8px 0 12px; }

/* Ratgeber-Übersicht Kachelgitter */
.mk-ratgeber-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4); margin-top: var(--space-6); }
.mk-card-link { text-decoration: none; }

/* Wissens-Hub Themenliste */
.mk-topic-list  { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.mk-topic-title { margin: 0 0 var(--space-1); }
.mk-topic-meta  { font-size: var(--fs-sm); white-space: nowrap; flex-shrink: 0; }

/* Calculator (Pflichten-Rechner) */
.mk-calc          { max-width: 680px; margin: 0 auto; padding: var(--space-8) var(--space-4); }
.mk-calc-field    { margin: var(--space-5) 0; }
.mk-calc-privacy  { font-size: var(--fs-sm); opacity: .8; }
.mk-calc-list     { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.mk-calc-item     { padding: var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.mk-calc-item__title { margin: 0 0 var(--space-1); }
.mk-calc-reason   { margin: var(--space-1) 0 0; opacity: .8; }
.mk-calc-na       { margin-top: var(--space-5); opacity: .85; }

/* Public-Footer-Markenzeile (ersetzt style="color:#fff") */
.mk-footer__brand { color: var(--text-invert); }
/* Wortmarke auf dunklem Grund: "Immo" WEISS (nicht grau), "Mgmt" bleibt blau.
   Franca 2026-07-23, verbindlich fuer ALLE dunklen Flaechen. */
.mk-footer__brand .brand-word { color: #fff; }
.mk-footer__tag   { margin-top: var(--space-3); color: var(--text-faint); }
.mk-ol { padding-left: var(--space-5); line-height: 2; }

/* ═══════════════════════════════════════════════════════════════════════════
   W9 — Mieter-/Tenant-Portal (öffentlicher Token-Flow, eigene Basis ohne
   App-Shell). Lädt tokens.css + app.css; Kornblume via bestehende .mk/.card/
   .btn/.pill-Klassen. Diese Klassen ergänzen nur das Portal-Layout.
   ═══════════════════════════════════════════════════════════════════════════ */
.portal-shell { background: var(--bg-app); min-height: 100vh; }
.portal-head { margin-bottom: var(--space-6); }
.portal-head h1 { margin: 0 0 var(--space-1); }

/* Schlüssel-Wert-Liste (Objekt/Miete/Status …) */
.portal-kv { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.portal-kv__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-2) 0; border-bottom: 1px solid var(--border-default); }
.portal-kv__row:last-child { border-bottom: 0; }
.portal-kv__label { color: var(--text-muted); font-size: var(--fs-md); }
.portal-kv__value { font-weight: 600; }

/* Aktions-/Sektionskacheln */
.portal-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3); margin-top: var(--space-4); }
.portal-action { display: block; text-decoration: none; color: inherit; padding: var(--space-4);
  border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface);
  transition: border-color .12s ease, box-shadow .12s ease; }
.portal-action:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.portal-action__title { font-weight: 600; margin: 0 0 var(--space-1); }
.portal-action__meta { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }

/* Meldungs-/Vorgangsliste */
.portal-list { list-style: none; padding: 0; margin: var(--space-4) 0 0;
  display: flex; flex-direction: column; gap: var(--space-3); }
.portal-item { padding: var(--space-4); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); background: var(--bg-surface); }
.portal-item__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.portal-item__title { font-weight: 600; }
.portal-item__ref { color: var(--text-muted); font-size: var(--fs-sm); }
.portal-item__events { list-style: none; padding: var(--space-2) 0 0; margin: 0;
  color: var(--text-muted); font-size: var(--fs-sm); }

/* Formular-Grid + Upload-Dropzone */
.portal-form { display: grid; gap: var(--space-4); }
.portal-field { display: grid; gap: var(--space-1); }
.portal-field > label { font-weight: 600; font-size: var(--fs-md); }
.portal-dropzone { border: 2px dashed var(--color-primary-border); background: var(--color-primary-dim);
  border-radius: var(--radius-md); padding: var(--space-6); text-align: center; }
.portal-dropzone__hint { color: var(--text-muted); font-size: var(--fs-sm); margin: var(--space-1) 0 0; }
.portal-actions-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }

/* ── Custom branded payment page (Stripe Payment Element, card-gated trial) ── */
/* Card a77a9be8: Checkout-UI an Klickdummy angeglichen. Token-based, keine
   inline styles im Template (design_debt_ratchet). Formular LINKS / Tarif-Card
   RECHTS, gebrandete CD (Kornblau), grünes Trial-Badge = helle Grün-Variante. */
.checkout { max-width: 1080px; margin: 0 auto; padding: var(--space-6) var(--space-4); }
.checkout__topbar { display: flex; justify-content: flex-end; margin-bottom: var(--space-5); }
.checkout__secure-badge { color: var(--text-muted); font-size: var(--fs-sm); font-weight: 600; }
.checkout__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 768px) { .checkout__grid { grid-template-columns: 7fr 5fr; align-items: start; } }

/* --- Linke Spalte: Formular --- */
.checkout__title { font-size: var(--fs-2xl, var(--fs-xl)); margin: 0 0 var(--space-2); }
.checkout__subtitle { color: var(--text-muted); font-size: var(--fs-md); margin: 0 0 var(--space-5); }
.checkout__card { background: var(--bg-surface, #fff); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); padding: var(--space-6); }
.checkout__form { display: grid; gap: var(--space-3); }
.checkout__field-label { text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-xs, var(--fs-sm));
  font-weight: 700; color: var(--text-muted); margin: var(--space-2) 0 var(--space-1); }
.checkout__element { min-height: var(--space-10); }
.checkout__error { color: var(--color-error, #c0392b); font-size: var(--fs-sm); margin: 0; }
.checkout__submit { width: 100%; margin-top: var(--space-3); }
.checkout__submit.is-loading { opacity: 0.7; cursor: progress; }
/* ==========================================================================
   Akte-Import-Wizard (property_intake Redesign 2026-07-16)
   4-Schritt-Wizard unter Dokumente -> "Akte importieren". Nur Design-Tokens,
   keine Inline-Styles (CSP). Klassen mit akte- geprefixt (Kollisionsschutz).
   ========================================================================== */
.akte-stepper { display: flex; gap: 0; padding: var(--space-4) 0 var(--space-2); }
.akte-stepper .akte-st { flex: 1; display: flex; flex-direction: column; gap: var(--space-2);
  position: relative; padding-bottom: var(--space-3); }
.akte-stepper .akte-st .akte-dot { width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--border-default); background: var(--bg-surface);
  display: flex; align-items: center; justify-content: center; font-weight: 800;
  font-size: var(--text-sm); color: var(--text-faint); z-index: 2; }
.akte-stepper .akte-st .akte-lbl { font-size: var(--text-xs); color: var(--text-muted); font-weight: 600; }
.akte-stepper .akte-st::after { content: ""; position: absolute; top: 13px; left: 26px;
  right: 0; height: 2px; background: var(--border-default); }
.akte-stepper .akte-st:last-child::after { display: none; }
.akte-stepper .akte-st.is-done .akte-dot { border-color: var(--color-accent-aa);
  background: var(--color-accent-aa); color: #fff; }
.akte-stepper .akte-st.is-active .akte-dot { border-color: var(--color-primary); color: var(--color-primary); }
.akte-stepper .akte-st.is-active .akte-lbl,
.akte-stepper .akte-st.is-done .akte-lbl { color: var(--text-primary); font-weight: 700; }
.akte-stepper .akte-st.is-done::after { background: var(--color-primary); }

.akte-dropzone { border: 2px dashed var(--color-primary-border); background: var(--color-primary-dim);
  border-radius: var(--radius-md); padding: var(--space-8); text-align: center; color: var(--text-muted);
  cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.akte-dropzone .akte-big { font-size: 15px; font-weight: 800; color: var(--text-primary); margin-bottom: var(--space-1); }
/* Bug 1: aktiver Drag&Drop-Hover-Zustand (JS toggelt .is-dragover). */
.akte-dropzone.is-dragover { border-color: var(--color-primary); background: var(--color-primary-border);
  border-style: solid; }
.akte-dropzone .akte-drop-hint { margin-top: var(--space-3); font-size: var(--text-sm); }
/* Bug 2: echtes File-Input visuell verstecken (bleibt fokussierbar/klickbar via Label),
   das gestylte <label> ist der sichtbare Kornblume-Button. */
.akte-dropzone .akte-file-input { position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.akte-dropzone .akte-file-label { display: inline-flex; margin-top: var(--space-4); cursor: pointer; }
.akte-dropzone .akte-file-input:focus-visible + .akte-file-label {
  outline: 2px solid var(--color-primary); outline-offset: 2px; }
.akte-dropzone .akte-file-feedback { margin-top: var(--space-3); font-size: var(--text-sm);
  color: var(--text-primary); font-weight: 600; }
.akte-dropzone .akte-file-feedback:empty { display: none; }

/* Bug 4: read-only Liste importierter Mietvertrags-Dokumente (Schritt 3). */
.akte-doc-list { list-style: none; margin: 0 0 var(--space-4); padding: 0;
  border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
.akte-doc-list li { padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border-default);
  font-size: 12.5px; }
.akte-doc-list li:last-child { border-bottom: 0; }

.akte-target-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-5); }
.akte-target-card { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-4); }
.akte-target-card .akte-t { font-weight: 800; font-size: var(--text-base); margin-bottom: var(--space-1); }
.akte-target-card .akte-d { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-2); }
.akte-target-card input, .akte-target-card select { width: 100%; margin-top: var(--space-2); }

.akte-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px 9px;
  border-radius: var(--radius-full); font-size: 10.5px; font-weight: 700; }
.akte-badge--daten { background: var(--success-bg); color: var(--color-green-badge); }
.akte-badge--vertrag { background: var(--warning-bg); color: var(--warning); }
.akte-badge--ablage { background: var(--bg-surface-2); color: var(--text-muted); }

.akte-legend { display: flex; gap: var(--space-4); margin-top: var(--space-3);
  font-size: var(--text-xs); color: var(--text-muted); flex-wrap: wrap; }

/* Karte b30cee98 (OP-8): .akte-subtabs/.akte-subtab war ungenutztes totes CSS
   (kein Template/JS referenzierte es) — im Zuge der Tab-Konsolidierung entfernt. */
.akte-panel[hidden] { display: none; }

.akte-hint { background: var(--color-primary-dim); border: 1px solid var(--color-primary-border);
  color: var(--color-primary-dark); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm); margin-bottom: var(--space-4); line-height: 1.5; }
/* Abgebrochene Mieter-Erkennung (Card ac2a17cb): Warn-Variante des Hinweises.
   --color-amber-badge (#92400E) statt des helleren Amber wegen WCAG-AA auf
   --status-warn-dim (siehe CR-129 Kontrast-Fix). */
.akte-hint--warn { background: var(--status-warn-dim); border-color: var(--color-amber-badge);
  color: var(--color-amber-badge); }

.akte-sum-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-bottom: var(--space-5); }
.akte-stat { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-4); }
.akte-stat .akte-n { font-size: var(--text-xl); font-weight: 800; color: var(--color-primary-dark); }
.akte-stat .akte-l { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }

.akte-commit-list { border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
.akte-commit-list .akte-ci { display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-default); font-size: 12.5px; }
.akte-commit-list .akte-ci:last-child { border-bottom: 0; }

.akte-sum-row td { font-weight: 800; background: var(--color-primary-dim); border-top: 2px solid var(--color-primary); }

/* Akte-Import „Vorschlag nach Datentyp“ (2026-07-17): Erkennungs-Karten (Schritt 2),
   Tabs (Schritt 3), Switch/Flag-Inputs. Alles token-basiert, keine Inline-Styles (CSP). */
.akte-detgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); }
@media (max-width: 767.98px) { .akte-detgrid { grid-template-columns: 1fr; } }
.akte-det { position: relative; border: 1.5px solid var(--color-primary); background: var(--color-primary-dim);
  border-radius: var(--radius-md); padding: var(--space-4); }
.akte-det--off { border-color: var(--border-default); background: var(--bg-surface-2); opacity: .7; }
.akte-det__title { margin: 0 0 2px; font-size: var(--text-md); font-weight: 800; }
.akte-det__count { font-size: var(--text-xl); font-weight: 800; color: var(--color-primary-dark); line-height: 1; }
.akte-det__src { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-2); }
.akte-switch { position: absolute; top: var(--space-3); right: var(--space-3); display: inline-flex; cursor: pointer; }
.akte-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.akte-switch__track { width: 38px; height: 22px; border-radius: var(--radius-pill, 999px);
  background: var(--border-strong, #c7cfda); position: relative; transition: background .15s ease; }
.akte-switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: left .15s ease; }
.akte-switch input:checked + .akte-switch__track { background: var(--color-primary); }
.akte-switch input:checked + .akte-switch__track::after { left: 18px; }
.akte-switch input:focus-visible + .akte-switch__track { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.akte-switch input:disabled + .akte-switch__track { opacity: .5; cursor: not-allowed; }

/* Karte b30cee98 (OP-8, Heiner-Entscheidung B): ehemals .akte-tabs/.akte-tab,
   konsolidiert auf die kanonische .tabs/.tab-Variante (docs/frontend/component-inventory.md).
   .tab__pill bleibt als Zaehler-Badge-Modifier bestehen, den .tabs/.tab sonst nicht kennt. */
.tab__pill { background: var(--bg-surface-2); color: var(--text-muted);
  border-radius: var(--radius-pill, 999px); padding: 0 7px; font-size: var(--text-xs); margin-left: var(--space-1); }
/* CR-118: gefuellte Aktiv-Flaechen tragen den dunkleren Marken-Ton
   (--color-primary-hover, #3A5CD4 = 5.74:1) statt --color-primary
   (#4F74E6 = 4.22:1) → WCAG AA fuer den #fff-Text darauf. */
.tab.active .tab__pill { background: var(--color-primary-hover); color: #fff; }
.akte-tabpanels { border: 1px solid var(--border-default); border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md); padding: var(--space-4); background: var(--bg-surface, #fff); }
.akte-panel[hidden] { display: none; }
.akte-tablewrap { overflow-x: auto; }
/* Card UX-4 #3: Abstand des unteren „＋ hinzufügen"-Buttons fixen (klebte direkt
   an der Tabelle) + CI/CD-Button (.btn-primary am Markup). */
.akte-addrow { margin-top: var(--space-4); }
.akte-kv { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-3) var(--space-4);
  max-width: 640px; align-items: center; }
.akte-kv label { color: var(--text-muted); font-size: var(--text-base); }
/* Card UX-4 #3: CI/CD Corporate Identity — die früher pfirsich/beige markierten
   „bitte ergänzen"-Felder/Zeilen nutzen jetzt das helle Kornblau (Design-Token
   --color-primary-dim / --color-primary). Der Attention-Charakter bleibt über den
   kornblauen Rahmen bzw. Links-Akzent erhalten. */
.akte-input--flag { border-color: var(--color-primary); background: var(--color-primary-dim); }
.akte-row--missing td { background: var(--color-primary-dim); box-shadow: inset 3px 0 0 var(--color-primary); }
.akte-row--unassigned td { background: var(--color-primary-dim); }
.akte-detect-bar { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap;
  margin: var(--space-3) 0 var(--space-4); }
.akte-detect-bar .akte-hint { margin: 0; }
.akte-source-note { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--text-muted); }
.akte-src-badge { display: inline-block; padding: 0 var(--space-1); border-radius: var(--radius-sm);
  border: 1px solid var(--border-default); line-height: 1.4; white-space: normal;
  overflow-wrap: anywhere; }
.akte-src-badge--hoch { border-color: var(--color-success, var(--border-default)); }
.akte-src-badge--niedrig { border-color: var(--color-warning, var(--border-default)); }
.akte-accordion .akte-acc { border: 1px solid var(--border-default); border-radius: var(--radius-md);
  margin-bottom: var(--space-2); overflow: hidden; }
.akte-accordion .akte-acc summary { cursor: pointer; padding: var(--space-3) var(--space-4);
  font-weight: 700; background: var(--bg-surface-2); display: flex; justify-content: space-between; align-items: center; }

.checkout__legal { color: var(--text-muted); font-size: var(--fs-xs, var(--fs-sm)); text-align: center; margin: var(--space-1) 0 0; }
.checkout__legal-link { color: var(--color-primary-dark); font-weight: 600; }

/* --- Rechte Spalte: Tarif-/Summary-Card --- */
.checkout__aside { position: static; }
@media (min-width: 768px) { .checkout__aside { position: sticky; top: var(--space-6); } }
.checkout__summary-card { background: var(--bg-surface, #fff); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm, 0 1px 2px rgba(15,23,42,.06)); }
.checkout__plan { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.checkout__plan-name { font-weight: 800; font-size: var(--fs-lg); color: var(--text-primary); }
.checkout__trial-badge { display: inline-block; background: var(--color-green-chip-bg);
  color: var(--color-green-chip-text); border: 1px solid var(--color-green-chip-border);
  border-radius: var(--radius-pill, 999px); padding: var(--space-1) var(--space-3);
  font-weight: 700; font-size: var(--fs-xs, var(--fs-sm)); white-space: nowrap; }
.checkout__price { display: flex; align-items: baseline; gap: var(--space-2); margin: var(--space-3) 0 var(--space-1); }
.checkout__price-amount { font-weight: 800; font-size: var(--fs-2xl, var(--fs-xl)); color: var(--text-primary); }
.checkout__price-cycle { color: var(--text-muted); font-size: var(--fs-md); }
.checkout__plan-meta { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }
.checkout__divider { border: none; border-top: 1px solid var(--border-default); margin: var(--space-4) 0; }
.checkout__lines { margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.checkout__line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.checkout__line dt { color: var(--text-secondary); margin: 0; }
.checkout__line dd { margin: 0; font-weight: 700; color: var(--text-primary); text-align: right; }
.checkout__line-free { color: var(--color-green-chip-text); }
.checkout__highlight { background: var(--bg-surface-2); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-top: var(--space-4); }
.checkout__highlight-title { text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-xs, var(--fs-sm));
  font-weight: 700; color: var(--text-muted); margin: 0 0 var(--space-1); }
.checkout__highlight-line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.checkout__highlight-line span:last-child { font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.checkout__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.checkout__total-label { font-weight: 800; font-size: var(--fs-md); color: var(--text-primary); }
.checkout__total-value { font-weight: 800; font-size: var(--fs-xl); color: var(--text-primary); }
.checkout__checklist { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: grid; gap: var(--space-2); }
.checkout__checklist li { position: relative; padding-left: var(--space-6); color: var(--text-secondary); font-size: var(--fs-sm); }
.checkout__checklist li::before { content: "✓"; position: absolute; left: 0; top: 0;
  width: var(--space-4); height: var(--space-4); line-height: var(--space-4); text-align: center;
  color: var(--color-green-chip-text); font-weight: 700; }
.checkout__stripe-footer { color: var(--text-muted); font-size: var(--fs-xs, var(--fs-sm));
  text-align: center; margin: var(--space-4) 0 0; }

/* ══════════════════════════════════════════════════════════════════════════
   Versicherung-Tab (OP-2, Karte cf51afa3)
   Policen-Kartenraster, OCR-Hinweis, Summe umlagefähig + PDF-Modal je Police.
   Nur CD-Tokens (Kornblume #4F74E6 = --color-primary); Umlagefähig-Badge nutzt
   die helle CD-Grün-Variante (.badge-ok), kein Teal.
   ══════════════════════════════════════════════════════════════════════════ */
.section-subtitle { margin: 2px 0 0; font-size: var(--text-sm); color: var(--text-secondary); }

.form-group--check { display: flex; align-items: center; gap: 8px; }
.form-group--check label { margin: 0; order: 2; }
.form-group--check input[type="checkbox"] { order: 1; width: auto; margin: 0; }

.ins-ocr-note { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.ins-ocr-note__icon { font-size: var(--text-base); }

.ins-grid {
  display: grid; gap: 14px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.ins-card {
  display: flex; flex-direction: column; gap: 12px; padding: 16px;
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.ins-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ins-card__title { margin: 0; font-size: var(--text-base); font-weight: 700; color: var(--color-primary); }
.ins-card__insurer { margin: 2px 0 0; font-size: var(--text-sm); color: var(--text-secondary); }
.ins-card__badges { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.ins-card__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 0; }
.ins-fact dt { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; }
.ins-fact dd { margin: 2px 0 0; font-size: var(--text-sm); color: var(--text-primary); font-weight: 500; }
.ins-card__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }
.ins-card__del { color: var(--color-red-badge); }

.ins-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--bg-surface);
}
.ins-summary__label { font-size: var(--text-sm); color: var(--text-secondary); font-weight: 600; }
.ins-summary__value { font-size: var(--text-lg); font-weight: 700; color: var(--color-primary); }

.ins-doc-modal__heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ins-doc-modal__meta { font-size: var(--text-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-doc-modal__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ins-doc-modal__body { padding-top: 4px; }
.doc-preview--full { width: 100%; }

/* =========================================================================
   OCR-Versicherungs-Vorschläge — Vor-Commit-Review im Versicherung-Tab
   (Karte 497b166e, Folge zu OP-2). Review-Banner + „Zu prüfen“-Karten mit
   blau markierten, aus OCR erkannten Feldern. Nur Tokens, keine Inline-Styles.
   ========================================================================= */
.ins-review { margin-bottom: 18px; }
.ins-review-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; margin-bottom: 14px;
  background: var(--color-blue-dim); border: 1px solid var(--color-blue);
  border-radius: var(--radius-md);
}
.ins-review-banner__text { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ins-review-banner__icon { font-size: var(--text-lg); flex-shrink: 0; }
.ins-review-banner__title { font-size: var(--text-sm); font-weight: 700; color: var(--color-blue-badge); }
.ins-review-banner__sub { font-size: var(--text-xs); color: var(--text-secondary); }
.ins-card--review { border-color: var(--color-blue); box-shadow: none; }
.ins-fact--extracted dd { color: var(--color-blue-badge); font-weight: 700; }
.ins-review__hint { margin: 4px 0 12px; font-size: var(--text-xs); color: var(--text-muted); }
.ins-review__legend { display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  background: var(--color-blue-dim); border: 1px solid var(--color-blue); vertical-align: middle; margin-right: 4px; }

/* =========================================================================
   Akte-Import Mieter-Modal (Karte 37a3b678) — strukturierte Mieter je
   Mietverhältnis: Chips in der Tabelle + wiederverwendetes Bearbeiten-Modal.
   Ausschließlich Klassen, keine Inline-Styles (design_debt_ratchet).
   ========================================================================= */
.akte-mieter-td { min-width: 230px; }
.akte-mieter-cell { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin-bottom: var(--space-1); }
.akte-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  background: var(--color-primary-dim); color: var(--color-primary-dark);
  border-radius: var(--radius-pill, 999px); font-size: 12.5px; font-weight: 600; }
.akte-chip__haupt { font-size: var(--text-xs); background: var(--color-primary); color: #fff;
  padding: 1px 5px; border-radius: var(--radius-pill, 999px); font-weight: 700; }
.akte-chip--warn { background: var(--warning-bg, #fffaf0); color: var(--color-amber-badge, #92400E);
  border: 1px solid var(--color-gold-border, #f2d68a); }
.akte-btn-ghost { border-color: transparent; background: var(--color-primary-dim);
  color: var(--color-primary-dark); }
.akte-btn-ghost:hover { background: var(--color-primary-border); }

/* Overlay + Modal */
.akte-overlay { position: fixed; inset: 0; background: var(--overlay-scrim, rgba(17,24,39,.45));
  display: flex; align-items: flex-start; justify-content: center; padding: 6vh var(--space-4);
  z-index: 2100; }
.akte-overlay[hidden] { display: none; }
.akte-modal { background: var(--bg-surface, #fff); border-radius: var(--radius-lg);
  width: 100%; max-width: 640px; box-shadow: var(--shadow-lg, 0 24px 60px rgba(20,28,45,.28));
  overflow: hidden; display: flex; flex-direction: column; max-height: 88vh; }
.akte-modal__head { display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-default); }
.akte-modal__head h2 { font-size: var(--text-base); margin: 0; }
.akte-modal__x { border: none; background: none; font-size: var(--text-xl); line-height: 1; cursor: pointer;
  color: var(--text-muted); }
.akte-modal__body { padding: var(--space-4) var(--space-5); overflow: auto; }
.akte-modal__note { font-size: var(--text-sm); color: var(--text-muted);
  padding: 0 var(--space-5) var(--space-4); margin: 0; }
.akte-modal__foot { display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-3); padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-default); background: var(--bg-surface-2); }
.akte-modal__foot-actions { display: flex; gap: var(--space-2); }

/* Mieter-Karte im Modal */
.akte-renter { border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: var(--space-4); margin-bottom: var(--space-3); background: var(--bg-surface-2); }
.akte-renter__head { display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--space-3); }
.akte-renter__role { font-weight: 700; font-size: var(--text-sm); color: var(--color-primary-dark); }
.akte-renter__role--neben { color: var(--text-muted); }
.akte-renter__rm { border: none; background: none; color: var(--color-red-badge); cursor: pointer;
  font-size: var(--text-sm); }
.akte-renter__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.akte-renter__full { grid-column: 1 / -1; }
.akte-renter__grid label { display: block; font-size: var(--text-sm); color: var(--text-muted);
  margin-bottom: var(--space-1); }
.akte-opt { font-weight: 400; color: var(--text-muted); }
@media (max-width: 480px) { .akte-renter__grid { grid-template-columns: 1fr; } }

/* =============================================================
   Website-v2 Landing (Karte 11bed04d) — Marketing-Handoff, Design
   freigegeben Heiner 2026-07-18. Design-Baseline:
   marketing-immbo/website-v2/index.html. Ausschliesslich Token-basiert
   (tokens.css SSOT), keine Inline-Styles (design_debt_ratchet), keine
   Emoji (Line-Icons als Inline-SVG mit .wv2-ic). Brand-Tints via color-mix
   aus var(--brand), damit der 1-Klick-CI-Rebrand end-to-end greift.
   ============================================================= */
.wv2-ic { width: 26px; height: 26px; stroke: var(--brand); stroke-width: 1.7;
  fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wv2-ic--sm { width: 18px; height: 18px; stroke-width: 1.9; }
/* Wissens-Hub (Card 2c55d260): Emoji-Themenwelt-Icons -> kornblaue .wv2-ic
   Line-Icons. .he--ic haelt das Inline-SVG in der Hub-Card ohne Zeilenhoehe-
   Sprung; .mk-eyebrow--ic setzt das kleine Icon vor "Themenwelt" mittig. */
.wv2-ic--inline { margin-right: .4em; }
.mk-hub-card .he--ic { line-height: 0; }
.mk-eyebrow--ic { display: inline-flex; align-items: center; }
.wv2-accent { color: var(--brand); }
.wv2-center { text-align: center; }
/* Brand-Regel (Franca 2026-07-20, hart): "Mgmt" immer kornblumenblau, direkt an
   "Immo" ohne Leerzeichen. Gilt in Headings, Footer, Feed, Nav. */
.wv2-mg { color: var(--brand); }
/* Wortmarke als ein zusammenhaengendes Inline-Element (Card 595495f4): ein
   einziges Flex-Item, damit ein Flex-gap (z.B. .wv2-vs__title) Immo und Mgmt
   nicht auseinanderzieht; nowrap verhindert Umbruch mitten in der Wortmarke. */
.brand-word { white-space: nowrap; }

.wv2-section { padding: 96px 0; }
.wv2-section--alt { background: var(--bg-app); }
.wv2-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.wv2-head .mk-lead { margin-bottom: 0; }
.wv2-card__title { margin: 0 0 8px; font-size: 1.15rem; font-weight: 700;
  letter-spacing: -.2px; color: var(--text); }

/* ---- Hero ---- */
/* True first-viewport (Franca 2026-07-20): var(--topbar-h) war undefiniert -> calc
   ungueltig -> Hero nicht voll. Fix: 100svh minus reale Header-Hoehe (74px).
   Hintergrund kontrastreicher (hellgrau/kornblumen-Verlauf, brand-safe, keine Blobs). */
/* Full-Screen-Hero (Karte 8e8d2c51, Franca-Spec/immocloud): oberer Bereich
   full-width + groesser; Foto rechts ~58% mit Bleed ueber rechte/obere Kante
   (durch .wv2-hero overflow:hidden geclippt -> kein horizontaler Scroll) und
   weichem Fade an der LINKEN Bildkante via mask-image. */
.wv2-hero { position: relative; min-height: calc(100svh - 88px); display: flex;
  align-items: center; overflow: hidden;
  background:
    radial-gradient(1100px 620px at 84% -6%,
      color-mix(in srgb, var(--brand) 16%, transparent), transparent 60%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--brand) 9%, var(--bg-app)) 0%, var(--bg-app) 58%); }
/* Hero-Layout FINAL (Franca 09:34): H1 autark volle Breite ueber dem Grid; das
   lange Wort "Immobilienmanagement" wuerde sonst die Foto-Spalte kollabieren. */
.wv2-h1--hero { font-size: clamp(2.8rem, 6vw, 5rem); line-height: 1.05;
  hyphens: none; overflow-wrap: normal; margin: 0 0 28px; }
/* "360°" auf eigener Zeile, gross in Kornblume (Franca-Mockup 2026-07-20). */
.wv2-h1__deg { display: block; line-height: 1; margin-top: .02em; }
.wv2-hero__grid { display: grid; grid-template-columns: 1fr; gap: 56px;
  align-items: stretch; width: 100%; padding-top: 8px; padding-bottom: 40px; }
/* GOTCHA (Franca): ohne min-width:0 kollabiert die Foto-Spalte am langen Wort. */
.wv2-hero__grid > * { min-width: 0; }
.wv2-subhead { font-weight: 800; font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  color: var(--text); letter-spacing: -.3px; line-height: 1.12; margin: 0 0 2px; }
.wv2-subtitle { color: var(--brand); font-weight: 700; font-size: 1.06rem; margin: 2px 0 14px; }
.wv2-checks { list-style: none; padding: 0; margin: 20px 0 26px; display: grid; gap: 12px; }
.wv2-checks li { position: relative; padding-left: 34px; font-weight: 600;
  color: var(--text); font-size: 1.04rem; }
.wv2-checks li::before { content: ""; position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 10%, transparent); }
.wv2-checks li::after { content: ""; position: absolute; left: 8px; top: 5px;
  width: 5px; height: 10px; border: solid var(--brand); border-width: 0 2px 2px 0;
  transform: rotate(45deg); }
/* Desktop: Foto als voll-hohe Bleed-Ebene rechts (Offset-Parent = .wv2-hero).
   Breite ~58vw, laeuft ueber rechte/obere Kante; linke Kante weicher Fade in BG. */
.wv2-hero__photo { position: absolute; top: 0; right: 0; bottom: 0;
  width: min(52vw, 1040px); z-index: 0; pointer-events: none; }
.wv2-hero-photo { width: 100%; height: 100%; display: block; object-fit: cover;
  object-position: 60% center; border: 0; border-radius: 0; box-shadow: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 46%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 46%, #000 100%); }
/* Textspalte ueber dem Foto halten. width:100% verhindert, dass .mk-wrap als
   Flex-Item von .wv2-hero (display:flex) auf die Inhaltsbreite (max-width der
   Textspalte) schrumpft und dann per margin:0 auto mittig gezogen wird
   (Franca 2026-07-23: Textblock sass bei x~252 zentriert statt linksbuendig). */
.wv2-hero .mk-wrap { position: relative; z-index: 1; width: 100%; }
.wv2-hero__col { position: relative; z-index: 1; }
.wv2-values { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.wv2-value { display: inline-flex; align-items: center; gap: 8px; font-weight: 800;
  font-size: .9rem; letter-spacing: .3px; color: var(--anthracite, #26292E);
  padding: 8px 16px; border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #fff, var(--silver-2)); border: 1px solid var(--silver, #C9CED4); }
.wv2-value__mark { width: 11px; height: 11px; fill: var(--brand); }
.wv2-h1 { font-weight: 800; font-size: clamp(2.4rem, 5vw, 3.7rem); line-height: 1.12;
  letter-spacing: -.5px; margin: 0 0 .35em; color: var(--text); }
.wv2-reco { display: inline-flex; gap: 8px; align-items: center; margin: 4px 0 8px;
  font-weight: 700; color: var(--brand-700);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  padding: 8px 16px; border-radius: var(--radius-pill); font-size: .92rem; }
.wv2-audience { font-weight: 600; color: var(--text-muted); margin: 0 0 18px; }
.wv2-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
.wv2-badges { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 30px; }
.wv2-badge { display: inline-flex; align-items: center; gap: 9px; font-weight: 600;
  font-size: .9rem; color: var(--gray-700); }
.wv2-shot { border-radius: var(--radius-lg); background: var(--bg-surface);
  border: 1px solid var(--border-default); box-shadow: var(--shadow-lg); overflow: hidden;
  transform: perspective(1600px) rotateY(-8deg) rotateX(3deg); }
.wv2-shot__bar { height: 38px; background: var(--gray-050);
  border-bottom: 1px solid var(--border-default); display: flex; align-items: center;
  gap: 7px; padding: 0 15px; }
.wv2-shot__bar i { width: 11px; height: 11px; border-radius: 50%;
  background: var(--silver, #C9CED4); display: inline-block; }
.wv2-shot__body { padding: 0; }
.wv2-shot__img { display: block; width: 100%; height: auto; }
/* Desktop: Hero-Text links halten, damit er nicht unter das Bleed-Foto laeuft.
   Kanonischer Breakpoint 1024 (Ratchet); die spaetere max-width:1024-Regel
   gewinnt bei exakt 1024px und stellt Mobil auf max-width:none. */
@media (min-width: 1024px) {
  /* Franca 2026-07-23: Textspalte breiter/groesser wie Ziel-Mockup (pink).
     700 -> 880px; laeuft weiterhin nicht unter das Bleed-Foto (Foto ab ~48vw). */
  .wv2-h1--hero, .wv2-hero__col { max-width: 880px; }
  /* H1 zwingend sichtbar ueber dem Bleed-Foto (Franca-Defekt 2026-07-22). */
  .wv2-h1--hero { position: relative; z-index: 1; color: var(--text); }
}
@media (max-width: 1024px) {
  /* Mobil/Zoom (<=1024): Foto ist DIREKTES Kind von .wv2-hero (raus aus .mk-wrap,
     Desktop-Bleed-Fix). Damit es hier nicht als edge-to-edge Block neben dem Text
     kollabiert, Hero auf Spalten-Stack + Foto zuerst, seitlich eingerueckt.
     (Franca/Heiner Zoom-Defekt 2026-07-22.) */
  .wv2-hero { min-height: auto; padding: 40px 0 56px; flex-direction: column; align-items: stretch; }
  .wv2-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .wv2-shot { transform: none; }
  .wv2-h1--hero, .wv2-hero__col { max-width: none; }
  /* Langes Wort "Immobilienmanagement" darf auf schmalen Viewports nicht ueberlaufen. */
  .wv2-h1--hero { overflow-wrap: break-word; hyphens: auto; }
  /* Mobil: Foto oben gestapelt, seitlich wie .mk-wrap eingerueckt, kein Bleed/Fade. */
  .wv2-hero__photo { position: static; order: -1; width: auto; height: auto;
    margin: 0 clamp(16px, 5vw, 40px) 8px; }
  .wv2-hero-photo { min-height: 340px; max-height: 460px; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); border: 1px solid var(--border-default);
    -webkit-mask-image: none; mask-image: none; object-position: 50% 40%; }
}

/* ---- 5-Cluster-Haus (Variante A: Giebeldach + blaue Connector-Punkte) ---- */
.wv2-house { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.wv2-house__ico { width: 52px; height: 52px; margin: 0 auto 12px; }
.wv2-house__lbl { display: inline-block; font-weight: 700; font-size: .72rem;
  letter-spacing: 2px; text-transform: uppercase; color: var(--brand); margin-bottom: 8px; }
.wv2-roof, .wv2-foundation, .wv2-room { background: var(--bg-surface);
  border: 1px solid var(--border-default); box-shadow: var(--shadow-sm); text-align: center; }
.wv2-roof .wv2-card__title, .wv2-foundation .wv2-card__title, .wv2-room .wv2-card__title { margin: 0 0 6px; }
.wv2-roof .mk-muted, .wv2-foundation .mk-muted, .wv2-room .mk-muted { margin: 0; }
.wv2-roof { border-radius: var(--radius-lg); padding: 64px 34px 30px; position: relative;
  clip-path: polygon(50% 0, 100% 28%, 100% 100%, 0 100%, 0 28%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 12%, #fff), #fff 62%); }
.wv2-house__body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  position: relative; align-items: stretch; }
.wv2-room { border-radius: var(--radius-md); padding: 32px 22px; position: relative; transition: .2s; }
.wv2-room:hover { border-color: color-mix(in srgb, var(--brand) 25%, transparent);
  transform: translateY(-3px); }
.wv2-room:not(:last-child)::after { content: ""; position: absolute; right: -10px;
  top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand); border: 3px solid var(--bg-app); z-index: 3; }
.wv2-foundation { border-radius: var(--radius-lg); padding: 30px 34px;
  background: linear-gradient(180deg, #fff, var(--gray-050));
  border-top: 3px solid var(--brand); }
@media (max-width: 768px) {
  .wv2-house__body { grid-template-columns: 1fr; }
  .wv2-roof { clip-path: none; padding-top: 34px; }
  .wv2-room:not(:last-child)::after { display: none; }
}

/* ---- Highlight-Band: Design-Partner / Investor (Gate: Heiner) ---- */
.wv2-partner { max-width: 820px; margin: 0 auto; text-align: center; }
.wv2-beta { display: inline-flex; align-items: center; gap: 8px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; font-size: .78rem; color: var(--silver, #C9CED4);
  background: rgba(var(--brand-teal-rgb), .16); border: 1px solid color-mix(in srgb, var(--silver, #C9CED4) 35%, transparent);
  padding: 7px 16px; border-radius: var(--radius-pill); margin-bottom: 20px; }
.wv2-beta__dot { width: 8px; height: 8px; border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 60%, #fff); display: inline-block; }
.wv2-partner__lead { color: var(--silver, #C9CED4); font-size: 1.12rem; max-width: 640px;
  margin: 0 auto 26px; }
.wv2-partner__cta { background: #fff; color: var(--anthracite, #26292E); border-color: #fff; }

/* ---- Cluster ---- */
.wv2-clusters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.wv2-card { background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-sm);
  transition: .2s; }
.wv2-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--brand) 25%, transparent); }
.wv2-card__ico, .wv2-f__ico, .wv2-tile__ico, .wv2-sec__ico {
  border-radius: var(--radius-lg); background: color-mix(in srgb, var(--brand) 10%, transparent);
  display: grid; place-items: center; }
.wv2-card__ico { width: 54px; height: 54px; margin-bottom: 18px; }
.wv2-card__list { list-style: none; padding: 0; margin: 14px 0 0; }
.wv2-card__list li { position: relative; padding-left: 26px; margin-bottom: 9px;
  font-size: .96rem; color: var(--gray-700); }
.wv2-card__list li::before { content: ""; position: absolute; left: 0; top: 8px;
  width: 14px; height: 14px; border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  box-shadow: inset 0 0 0 2px var(--brand); }
@media (max-width: 1024px) { .wv2-clusters { grid-template-columns: 1fr; } }

/* ---- Highlight-Band ---- */
.wv2-band { padding: 96px 0; background: linear-gradient(135deg, var(--anthracite, #26292E), var(--anthracite-2)); }
.wv2-eyebrow--on-dark { color: var(--silver, #C9CED4); }
.wv2-h2--on-dark, .wv2-band .wv2-head .mk-h2 { color: #fff; }
.wv2-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.wv2-stat { background: rgba(255,255,255,.06);
  border: 1px solid color-mix(in srgb, var(--silver, #C9CED4) 30%, transparent);
  border-radius: var(--radius-lg); padding: 26px; text-align: center; }
.wv2-stat__num { display: block; font-size: 2.4rem; font-weight: 800; color: #fff;
  letter-spacing: -1px; }
.wv2-stat__num em { font-style: normal; color: color-mix(in srgb, var(--brand) 60%, #fff); }
.wv2-stat__label { color: var(--silver, #C9CED4); font-weight: 600; font-size: .92rem; }
@media (max-width: 1024px) { .wv2-stats { grid-template-columns: 1fr 1fr; } }

/* ---- Excel-Vergleich ---- */
.wv2-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.wv2-vs__col { border-radius: var(--radius-lg); padding: 32px; }
.wv2-vs__col--before { background: var(--gray-050); border: 1px solid var(--border-default); }
.wv2-vs__col--after { background: var(--bg-surface);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  box-shadow: var(--shadow-sm); }
.wv2-vs__title { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; }
.wv2-vs__list { list-style: none; padding: 0; margin: 16px 0 0; }
.wv2-vs__list li { display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 12px; font-weight: 500; }
.wv2-vs__col--before li { color: var(--text-muted); }
.wv2-vs__col--after li { color: var(--text); }
.wv2-vs__mark { width: 22px; height: 22px; flex: none; border-radius: 50%;
  position: relative; margin-top: 1px; }
.wv2-vs__col--before .wv2-vs__mark { background: var(--gray-100); }
.wv2-vs__col--after .wv2-vs__mark { background: color-mix(in srgb, var(--brand) 10%, transparent); }
.wv2-vs__col--before .wv2-vs__mark::before,
.wv2-vs__col--before .wv2-vs__mark::after { content: ""; position: absolute;
  left: 50%; top: 50%; width: 10px; height: 2px; background: var(--gray-400);
  transform: translate(-50%,-50%) rotate(45deg); }
.wv2-vs__col--before .wv2-vs__mark::after { transform: translate(-50%,-50%) rotate(-45deg); }
.wv2-vs__col--after .wv2-vs__mark::before { content: ""; position: absolute;
  left: 7px; top: 5px; width: 5px; height: 9px; border: solid var(--brand);
  border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (max-width: 1024px) { .wv2-vs { grid-template-columns: 1fr; } }

/* ---- Funktionen ---- */
.wv2-func { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.wv2-f { background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); padding: 26px; }
.wv2-f:hover { border-color: color-mix(in srgb, var(--brand) 25%, transparent); }
.wv2-f__ico { width: 48px; height: 48px; margin-bottom: 14px; }
@media (max-width: 1024px) { .wv2-func { grid-template-columns: 1fr; } }

/* ---- Tarife ---- */
.wv2-note { max-width: 640px; margin: 0 auto 40px; text-align: center;
  background: color-mix(in srgb, var(--brand) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  border-radius: var(--radius); padding: 14px 20px; font-weight: 600;
  color: var(--brand-700); font-size: .96rem; }
.wv2-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  align-items: stretch; max-width: 960px; margin: 0 auto; }
.wv2-plan { background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); padding: 28px; display: flex; flex-direction: column; }
.wv2-plan--featured { border: 2px solid var(--brand); box-shadow: var(--shadow-lg);
  position: relative; }
.wv2-plan--featured::before { content: "Dein Tarif"; position: absolute; top: -13px;
  left: 50%; transform: translateX(-50%); background: var(--brand-600); color: #fff;
  font-weight: 700; font-size: .72rem; letter-spacing: 1px; padding: 5px 14px;
  border-radius: var(--radius-pill); }
.wv2-plan__units { font-weight: 700; color: var(--anthracite, #26292E); }
.wv2-plan__price { font-size: 2.1rem; font-weight: 800; letter-spacing: -1px;
  margin: 6px 0 2px; color: var(--text); }
.wv2-plan__per { font-size: .9rem; font-weight: 600; color: var(--text-muted); }
.wv2-plan__allf { margin: 16px 0; padding: 12px 14px;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border-radius: var(--radius-sm); font-weight: 700; color: var(--brand-700);
  font-size: .9rem; display: flex; gap: 8px; align-items: center; }
.wv2-plan__list { list-style: none; padding: 0; margin: 0 0 20px; flex: 1; }
.wv2-plan__list li { padding-left: 24px; position: relative; margin-bottom: 8px;
  font-size: .9rem; color: var(--gray-700); }
.wv2-plan__list li::before { content: ""; position: absolute; left: 2px; top: 5px;
  width: 5px; height: 9px; border: solid var(--brand); border-width: 0 2px 2px 0;
  transform: rotate(45deg); }
.wv2-plan__cta { width: 100%; justify-content: center; }
.wv2-plans--duo { grid-template-columns: repeat(2, 1fr); max-width: 720px; }
/* --solo: nur der B2C-Basistarif sichtbar (Family-Office-Flag off) — eine
   zentrierte Spalte, damit das Grid mit einem einzigen Plan nicht bricht. */
.wv2-plans--solo { grid-template-columns: 1fr; max-width: 420px; }
@media (max-width: 1024px) { .wv2-plans { grid-template-columns: 1fr; max-width: 420px; }
  .wv2-plans--duo { grid-template-columns: 1fr; max-width: 420px; } }

/* ---- Support / Service Tiles ---- */
.wv2-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.wv2-tile { background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); padding: 26px; display: flex; gap: 16px;
  align-items: flex-start; }
.wv2-tile:hover { border-color: color-mix(in srgb, var(--brand) 25%, transparent); }
.wv2-tile__ico { width: 46px; height: 46px; flex: none; }
.wv2-tile__title { margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; color: var(--text); }
@media (max-width: 1024px) { .wv2-tiles { grid-template-columns: 1fr; } }

/* ---- DSGVO & Sicherheit ---- */
.wv2-sec { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.wv2-sec__list { display: grid; gap: 16px; margin-top: 24px; }
.wv2-sec__item { display: flex; gap: 14px; align-items: flex-start;
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius); padding: 18px 20px; }
.wv2-sec__ico { width: 42px; height: 42px; flex: none; border-radius: 11px; }
.wv2-shield { aspect-ratio: 1; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--anthracite, #26292E), var(--anthracite-2));
  display: grid; place-items: center; box-shadow: var(--shadow-lg); }
.wv2-shield__svg { width: 120px; height: 120px;
  stroke: color-mix(in srgb, var(--brand) 55%, #fff); stroke-width: 1.4; fill: none; }
@media (max-width: 1024px) { .wv2-sec { grid-template-columns: 1fr; } }

/* ---- Wissen ---- */
.wv2-know { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.wv2-art { background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); overflow: hidden; display: block; }
.wv2-art:hover { border-color: color-mix(in srgb, var(--brand) 25%, transparent); }
.wv2-art__thumb { aspect-ratio: 16 / 10;
  background: linear-gradient(120deg, var(--gray-050), color-mix(in srgb, var(--brand) 8%, #fff)); }
.wv2-art__txt { padding: 22px; }
.wv2-art__cat { font-size: .76rem; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--brand-700); }
.wv2-art__thumb { display: grid; place-items: center; overflow: hidden; }
.wv2-art__thumbico { width: 64px; height: 64px; stroke-width: 1.5; }
/* Ratgeber-Karten-Foto (Franca 2026-07-23): Bild fuellt die 16:10-Thumb-Flaeche. */
.wv2-art__thumbimg { width: 100%; height: 100%; object-fit: cover; display: block; }
.wv2-art__txt { display: flex; flex-direction: column; }
/* Feed-Karten mit korrektem ImmoMgmt-Logo (Squircle-IM + Wortmarke, Mgmt blau) */
.wv2-artbrand { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: .92rem; color: var(--text); }
.wv2-artbrand__sq { width: 24px; height: 24px; border-radius: 7px;
  background: linear-gradient(135deg, #6E8CEB, var(--brand) 55%, var(--brand-700));
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .6rem;
  letter-spacing: .4px; }
@media (max-width: 1024px) { .wv2-know { grid-template-columns: 1fr; } }

/* ---- Final CTA ---- */
.wv2-cta-final { background: linear-gradient(135deg, var(--brand), var(--brand-700));
  text-align: center; border-radius: var(--radius-lg); padding: 64px 32px; }
/* CR-110 (Card bug-cr110-mobile-overflow): das lange, umbruchlose Kompositum
   "Immobilienmanagement" sprengte auf Mobile (390px) die Box der Schluss-CTA-
   Ueberschrift (.wv2-cta-final padding 64px 32px -> ~278px Inhalt). Anders als
   der Hero (.wv2-hero { overflow:hidden }) clippt diese .wv2-section nicht, der
   Ueberlauf propagierte bis documentElement -> horizontale Scrollbar.
   overflow-wrap/word-break laesst das Wort umbrechen statt die Box zu dehnen. */
.wv2-cta-final__title { color: #fff; font-weight: 800;
  font-size: clamp(1.8rem, 3vw, 2.5rem); margin: 0 0 .4em;
  overflow-wrap: break-word; word-break: break-word; hyphens: auto; }
.wv2-cta-final__lead { color: color-mix(in srgb, var(--brand) 20%, #fff); margin: 0 auto; max-width: 560px; }
.wv2-cta-final__actions { margin-top: 22px; }
.wv2-cta-final .btn-primary { background: #fff; color: var(--brand-700); border-color: #fff; }

/* ---- Sticky mobile CTA ---- */
.wv2-sticky { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  background: var(--bg-surface); border-top: 1px solid var(--border-default);
  padding: 12px 16px; display: none; justify-content: center;
  box-shadow: 0 -6px 24px rgba(19,24,32,.08); }
.wv2-sticky__btn { width: 100%; max-width: 520px; justify-content: center; }
@media (max-width: 1024px) { .wv2-sticky { display: flex; } }
/* Consent-Offset (Karte d46fa9dc): hebt die Sticky-CTA über den Consent-Banner,
   solange dieser offen ist. --consent-cta-offset wird von consent.js gemessen +
   gesetzt; der px-Fallback greift im no-JS/First-Paint-Fall. */
body.consent-open .wv2-sticky { bottom: var(--consent-cta-offset, 120px);
  transition: bottom .2s ease; }
   RBAC Rollen-Sichten (Stage 2, S3/S4) — curated Mieter/Hausmeister-Shell.
   Eigene, dunkle, objekt-gescopte Shell (bewusst NICHT die Vermieter-App-
   Shell). Klickdummy-SSOT: clickdummies/rbac-mieter-hausmeister/2-*.png + 3-*.png.
   Alle Farben aus den Design-Tokens (tokens.css) — keine Hex-Direktwerte.
   ============================================================= */
body.role-page { background: var(--bg-sunken); }
.role-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
  max-width: 1100px;
  margin: 24px auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06));
}
.role-sidebar {
  background: var(--gray-900);
  color: var(--gray-100);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.role-brand { font-weight: 700; font-size: var(--text-lg); color: #fff; }
.role-brand span span { color: var(--brand); }
.role-nav { display: flex; flex-direction: column; gap: 18px; }
.role-nav-group { display: flex; flex-direction: column; gap: 4px; }
.role-nav-group-title {
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: .06em;
  color: var(--gray-400);
  padding: 0 8px 4px;
}
.role-nav-link {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--gray-300);
  text-decoration: none;
  font-size: var(--text-sm);
}
.role-nav-link:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.role-nav-link.active { background: var(--brand-600); color: #fff; font-weight: 600; }
.role-nav-link.locked { color: var(--gray-400); cursor: not-allowed; }
.role-nav-link.locked .role-lock { margin-left: auto; }
/* min-width:0 loest die Grid-Default min-width:auto der 1fr-Spur, damit lange
   umbruchlose Token (Mangel-/Dokument-Titel) die role-shell nicht sprengen. */
.role-main { padding: 24px 28px; background: var(--bg-sunken); min-width: 0; }
.role-header { margin-bottom: 20px; }
.role-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-width: 0; }
.role-title { font-size: var(--text-xl); margin: 0; color: var(--text); overflow-wrap: break-word; min-width: 0; }
.role-pill {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 999px;
  font-size: var(--text-sm); font-weight: 600;
}
.role-pill--mieter, .role-pill--readonly {
  background: var(--success-light-bg); color: var(--success-light-text);
  border: 1px solid var(--success-light-border);
}
.role-pill--hausmeister {
  background: var(--warning-bg); color: var(--warning);
  border: 1px solid var(--warning);
}
.role-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.role-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Grid-Zelle darf unter einen langen, umbruchlosen Token schrumpfen und
     bricht ihn, statt die role-shell horizontal zu sprengen (Bug 3cc103a6). */
  min-width: 0;
  overflow-wrap: break-word;
}
.role-card--form { grid-column: 1 / -1; max-width: 520px; }
.role-card-head { display: flex; align-items: center; gap: 8px; }
.role-card-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); display: inline-block; }
.role-card-label {
  text-transform: uppercase; font-size: var(--text-xs); letter-spacing: .06em;
  color: var(--text-muted); font-weight: 600;
}
.role-metric { font-size: var(--text-2xl); font-weight: 700; color: var(--text); line-height: 1.1; overflow-wrap: break-word; }
.role-metric-unit { font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); }
.role-metric--empty { font-size: var(--text-base); font-weight: 500; color: var(--text-muted); }
.role-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; font-size: var(--text-sm); color: var(--text);
  min-width: 0; overflow-wrap: break-word;
}
.role-row > span, .role-row > strong { min-width: 0; overflow-wrap: break-word; }
.role-divider { height: 1px; background: var(--border-default); }
.role-doc-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 6px 0;
  border-bottom: 1px solid var(--border-default);
  color: var(--text); text-decoration: none; font-size: var(--text-sm);
  min-width: 0; overflow-wrap: break-word;
}
.role-doc-row > span { min-width: 0; overflow-wrap: break-word; }
.role-doc-row:last-child { border-bottom: none; }
.role-doc-row:hover { color: var(--link); text-decoration: none; }
.role-doc-download { color: var(--text-muted); font-weight: 700; }
.role-card-btn { align-self: flex-start; }
.role-badge {
  display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: 999px;
  font-size: var(--text-sm); font-weight: 600;
}
.role-badge--open { background: var(--warning-bg); color: var(--warning); }
.role-badge--muted { background: var(--bg-sunken); color: var(--text-muted); }
.role-due { color: var(--warning); }
.role-muted { color: var(--text-muted); font-size: var(--text-sm); }
.role-empty { color: var(--text-muted); font-size: var(--text-sm); margin: 0; }
.role-footer-note { margin-top: 20px; color: var(--text-muted); font-size: var(--text-sm); }
.role-disclosure { display: flex; flex-direction: column; gap: 10px; }
.role-disclosure > summary { list-style: none; cursor: pointer; width: fit-content; }
.role-disclosure > summary::-webkit-details-marker { display: none; }
.role-form { display: flex; flex-direction: column; gap: 12px; }
.role-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sm); color: var(--text); }
.role-field input, .role-field select, .role-field textarea {
  padding: 8px 10px; border: 1px solid var(--border-strong);
  border-radius: 8px; font: inherit; background: var(--bg-surface); color: var(--text);
}
.role-form-actions { display: flex; gap: 10px; justify-content: flex-end; }
.role-form-error { color: var(--danger); font-size: var(--text-sm); }
@media (max-width: 768px) {
  .role-shell { grid-template-columns: 1fr; margin: 0; border-radius: 0; }
  .role-grid { grid-template-columns: 1fr; }
}

/* --- RBAC Rollenverwaltung (S5, Screen 4) — Rolle + Objekt-Scope je Mitglied - */
.rolemgmt-sub { margin: 4px 0 0; color: var(--text-muted); font-size: var(--text-sm); }
.rolemgmt-list { display: flex; flex-direction: column; gap: 12px; }
.rolemgmt-row {
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
}
.rolemgmt-user { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 180px; }
.rolemgmt-name { font-weight: 600; color: var(--text-primary); }
.rolemgmt-email { color: var(--text-muted); font-size: var(--text-sm); }
.rolemgmt-field { display: flex; flex-direction: column; gap: 4px; flex: 0 1 230px; font-size: var(--text-sm); color: var(--text-muted); }
.rolemgmt-flabel { font-weight: 600; }
.rolemgmt-save { flex: 0 0 auto; }
.rolemgmt-empty { color: var(--text-muted); }
.rolemgmt-info {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 20px;
  padding: 14px 16px; border-radius: var(--radius-md);
  background: var(--info-bg); border: 1px solid var(--color-info);
}
.rolemgmt-info p { margin: 0; color: var(--text-primary); font-size: var(--text-sm); line-height: 1.5; }
.rolemgmt-info-icon { font-size: var(--text-lg); line-height: 1.3; }
.rolemgmt-footer { margin-top: 16px; color: var(--text-muted); font-size: var(--text-sm); line-height: 1.5; }
@media (max-width: 768px) {
  .rolemgmt-row { align-items: stretch; }
  .rolemgmt-field, .rolemgmt-save { flex: 1 1 100%; }
}

/* ============================================================================
   Dashboard-WYSIWYG v2 — GridStack als Raster-Engine (Teil A / Card 49745b4e).
   Trägt der Dashboard-Container zusätzlich .grid-stack, übernimmt GridStack die
   Positionierung (absolut, aus gs-x/gs-y/gs-w/gs-h). Die frühere CSS-Grid-
   Deklaration von .dash-grid wird dann neutralisiert (höhere Spezifität gewinnt),
   die Karten-Optik (.dash-widget) sowie das Edit-Overlay (.is-editing) bleiben.
   ========================================================================== */
.dash-grid.grid-stack {
  display: block;
  grid-template-columns: none;
  grid-auto-rows: auto;
}
/* GridStack liefert eigene Resize-Handles → Legacy-Marker-Griff ausblenden. */
.dash-grid.grid-stack .dash-widget__resize {
  display: none;
}
/* BUG-FOLLOWUP 569536e5 (aus QA-Karte cb5c3ea4): Kachel-Overlap durch
   Fallback-min-height im GridStack-Scope.
   .dash-widget wird als .grid-stack-item-content gerendert — GridStack setzt
   dessen Hoehe selbst per position:absolute auf N*78 - 2*8 (CELL_HEIGHT=78,
   MARGIN=8, SSOT in dashboard_edit.js). Die CSS-Grid-Fallback-min-height
   (.dash-widget 120px, .dash-widget--h1..4 120/180/240/320px) ist aber nicht
   Teil der Grid-Engine und ueberlebte die Neutralisierung oben unbemerkt.
   Beispiel h=1: verfuegbar 1*78-16=62px vs. min-height 120px → 58px zu hoch;
   zwei gestapelte h1-Kacheln ueberlappen dadurch um exakt 42px (QA-Messwert).
   Eine min-height kann eine absolut positionierte Box nur vergroessern, nie
   verschieben — deshalb hier im GridStack-Scope auf 0 neutralisieren.
   GridStack besitzt die Hoehe; ausserhalb von .grid-stack (JS aus/Ladefehler)
   bleiben die Fallback-Werte oben unveraendert bestehen. */
.dash-grid.grid-stack .dash-widget,
.dash-grid.grid-stack .dash-widget--h1,
.dash-grid.grid-stack .dash-widget--h2,
.dash-grid.grid-stack .dash-widget--h3,
.dash-grid.grid-stack .dash-widget--h4 {
  min-height: 0;
}
/* 569536e5: dieselbe Neutralisierung MUSS auch im Mobile-Breakpoint gelten.
   .dash-grid > .dash-widget { min-height: 120px } (Zeile ~5098) hat Spezifitaet
   (0,2,0) und steht spaeter im Stylesheet als die Desktop-Regel oben — ohne
   diese Wiederholung im selben Media-Kontext wuerde sie den Overlap auf Mobile
   zurueckholen. Kein !important noetig: (0,3,0) durch drei Klassen im
   Selektor schlaegt (0,2,0) ueber Spezifitaet. */
@media (max-width: 767.98px) {
  .dash-grid.grid-stack .dash-widget,
  .dash-grid.grid-stack .dash-widget--h1,
  .dash-grid.grid-stack .dash-widget--h2,
  .dash-grid.grid-stack .dash-widget--h3,
  .dash-grid.grid-stack .dash-widget--h4 {
    min-height: 0;
  }
}

/* --- CR-115: CSP-safe Auslagerung von Inline-style= (style-src 'self') ------
   Ehemalige Inline-style=-Attribute -> benannte Klassen (Design-Tokens).
   Kein visueller Unterschied, kein Aufweichen der CSP. */

/* Widerruf-Consent (rechtlich relevant) + Vorteils-Liste (public/register) */
.register-consent {
  display: flex; gap: 8px; align-items: flex-start; margin: 16px 0;
  font-size: var(--text-sm); line-height: 1.5; color: var(--text-secondary);
}
.register-consent-error {
  color: var(--color-red); font-size: var(--text-sm); margin: -8px 0 12px;
}
.register-benefits {
  padding-left: 16px; font-size: var(--text-base); line-height: 1.9; margin: 0 0 16px;
}

/* Errorpages (404/400/403/405/500/error) — zentriert/skaliert */
.errorpage { max-width: 640px; margin: 64px auto; padding: 0 24px; text-align: center; }
.errorpage-title { font-size: var(--text-2xl); font-weight: 800; }
.errorpage-text { margin-top: 16px; opacity: .85; }
.errorpage-text--wide { margin-top: 24px; }
.errorpage-ref { font-family: monospace; font-size: 18px; }
/* ═══════════════════════════════════════════════════════════════════════════
   Karte 1cec45a2 — Buchungen Sammel-Fix (Heiner-Feedback 2026-07-19)
   Nur auf die Buchungen-Seite (.buchungen-page) bzw. das Umsatz-Modal gescoped.
   ═══════════════════════════════════════════════════════════════════════════ */

/* AC1 — Posteingang & Abschnitte: keine harte Trennlinie direkt unter dem
   Abschnitts-Titel; Abschnitte fließen über einen weichen Trenner ineinander
   statt über harte Kanten. */
.buchungen-page .data-card-header {
  border-bottom: none;
}
.buchungen-page .data-card {
  border-color: var(--border-subtle);
  box-shadow: none;
}
/* Weicher Trenner ZWISCHEN aufeinanderfolgenden Abschnitten (statt harter
   Kartenkanten) — die Abschnitte gehen sanft ineinander über. */
.buchungen-page .data-card + .data-card {
  margin-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

/* AC3 — Überlauf-Schutz: der Kopf-/Zeilentext des Umsatz-Modals (Datum ·
   Gegenseite · Betrag) bricht sauber um und läuft nie horizontal aus dem
   Fenster. */
.modal-subtitle,
.modal-subtitle--inset {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.tx-meta__subject > div {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* AC7 — Auswahl-/Dropdown-Boxen weniger kantig, Filter weniger monoton und der
   Übergang von der Filterleiste zur Umsatztabelle harmonisiert. */
.buchungen-page .bk-filter input,
.buchungen-page .bk-filter select {
  border-radius: var(--radius-md);
}
/* Mehr visuelle Unterscheidung: Selects heben sich dezent von Freitext-Feldern
   ab (leicht getönter Grund + Fokus-Akzent), statt aller Controls gleich grau. */
.buchungen-page .bk-filter select {
  background-color: var(--bg-surface-2);
  border-color: var(--border-default);
}
.buchungen-page .bk-filter select:focus,
.buchungen-page .bk-filter input:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary-dim);
  background-color: var(--bg-surface);
}
/* Übergang Filter → Tabelle: die Konten-Filterleiste dockt direkt an die
   Tabellen-Kopfzeile an (keine schwebende Karte mit Abstand mehr). */
.buchungen-page .bank-panel--transactions .bk-filter--konten {
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none;
}
/* Karte 2f6e76a5 (#3): die Trennlinie zwischen dem „Umsätze"-Header und der
   Personen-/Zeitraum-Filterzeile darunter hatte noch runde Ecken (Rest der
   .bk-filter-Basisform) — sichtbar abweichend von der geraden Trennlinie
   ueber „Verbundene Konten". Der Filter sitzt direkt unter dem Panel-Header
   (keine schwebende Karte), also auch OBEN flach statt rund. */
.buchungen-page .bank-panel--transactions .bank-panel__header--with-action + .bk-filter--konten {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.buchungen-page .bank-panel--transactions .bk-filter--konten + .transaction-head {
  border-top: none;
}

/* ── Buchungshistorie je Vertrag/Mietvertrag (Karte 789462be) ────────────── */
.bh-tile-value {
  font-size: var(--text-xl);
}
.bh-tile-value--warn {
  color: var(--color-gold);
}
.bh-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
/* Karte 03897aa0 (#1): Jahres-Pill + „+ Zahlung hinzufuegen“ stehen als Block
   rechtsbuendig, der Pill oben und der Button rechtsbuendig darunter
   (Heiner-Feedback 30.07.). Die Quelle/Status-Chips bleiben links. */
.bh-filters__right {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}
@media (max-width: 767.98px) {
  .bh-filters__right { margin-left: 0; width: 100%; align-items: stretch; }
}
.bh-add {
  margin-left: 8px;
}
.bh-add__body {
  max-width: 460px;
}
.bh-hint {
  background: var(--bg-page);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--text-muted, #6b7280);
}
.bh-col-action {
  width: 1%;
  white-space: nowrap;
}
/* Aktions-Buttons der Buchungshistorie NIE vertikal umbrechen lassen (Card UX-4):
   die schmale Aktions-Spalte hat den „Löschen"-Text sonst Buchstabe-für-Buchstabe
   umgebrochen. nowrap + rechtsbündig gestapelt (Icon-Button-Look). */
td.actions.bh-col-action {
  white-space: nowrap;
}
.bh-action-btn {
  white-space: nowrap;
}
.tx-history-jump {
  margin-top: 12px;
}
.c-info-panel-actions {
  margin-top: 8px;
}

/* ── Immobilienfinanzierung: Finanzierungsmaske (Card 32095d27) ───── */
.finance-mask-grid { grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .finance-mask-grid { grid-template-columns: 2fr 1fr; }
}
.finance-section {
  border: 1px solid var(--color-border, #ddd);
  border-radius: var(--radius-md, 8px);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.finance-section-title {
  font-weight: 600;
  padding: 0 6px;
  color: var(--color-text, #222);
}
.finance-field { margin-bottom: 10px; }
.finance-field[hidden] { display: none !important; }
.finance-field-check { display: flex; align-items: center; gap: 8px; }
.finance-overview {
  border: 1px solid var(--color-border, #ddd);
  border-radius: var(--radius-md, 8px);
  padding: 14px;
  background: var(--bg-surface-2);
  align-self: start;
}
.finance-overview-title { margin: 0 0 10px; font-size: var(--fs-md, 1rem); }
.finance-overview-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 0; border-bottom: 1px solid var(--color-border, #eee);
}
.finance-overview-row dt { color: var(--text-muted); }
.finance-overview-row dd { margin: 0; font-weight: 600; }
.finance-warning {
  margin-top: 10px; padding: 8px 10px;
  border-radius: var(--radius-sm, 6px);
  background: var(--status-warn-dim);
  /* CR-129: --status-warn (#D97706) on warn-dim was 2.82:1 (AA-Fail); the
     darker amber-badge token (#92400E) reaches ~6.2:1 on the same background. */
  color: var(--color-amber-badge);
  font-size: var(--fs-sm);
}
.amortization-plan-body { margin-top: 10px; }
.amortization-plan-actions { margin-bottom: 8px; }
.amortization-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.amortization-table th, .amortization-table td {
  border: 1px solid var(--color-border, #ddd);
  padding: 4px 8px; text-align: right;
}
.amortization-table th:first-child, .amortization-table td:first-child { text-align: left; }
.amortization-binding-end td {
  background: var(--status-warn-dim);
  font-weight: 600;
}

/* ── CR-135: Kontakt-Detail (Inline-Styles -> DS-Klassen, CSP-konform) ── */
.contact-detail__inactive {
  border-color: var(--color-red);
  background: var(--color-red-dim);
  color: var(--color-red-badge);
}
.contact-detail__col--main { flex: 0 0 38%; min-width: 320px; }
.contact-detail__col--side { flex: 1; min-width: 320px; }
@media (max-width: 767.98px) {
  .contact-detail__col--main,
  .contact-detail__col--side { flex: 1 1 100%; min-width: 0; }
}
.contact-detail__link-btn { font-size: var(--text-xs); opacity: .7; }
.contact-detail__address { font-size: var(--text-base); line-height: var(--leading-relaxed); }
.contact-detail__faint { color: var(--text-faint); }
.contact-detail__notes {
  font-size: var(--text-base);
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-style: italic;
}
.contact-detail__person {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.contact-detail__person:last-child { border-bottom: none; }
.contact-detail__person-role { font-size: var(--text-sm); color: var(--text-muted); }
.contact-detail__person-details { font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.contact-detail__person-notes { color: var(--text-muted); font-style: italic; }
.contact-detail__role-remove {
  background: none;
  border: none;
  color: var(--color-red);
  cursor: pointer;
  padding: 0;
  font-size: var(--text-sm);
}
.contact-detail__list {
  margin: var(--space-2) 0 0;
  padding-left: 18px;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CR-146 (Karte d1df6670) — CSP-Inline-``style=``-Sanierung, Welle 3

   Die gehaertete CSP setzt ``style-src 'self' 'nonce-…'`` OHNE ``unsafe-inline``;
   ein Nonce deckt <style>-ELEMENTE, niemals style="…"-ATTRIBUTE. Die folgenden
   Klassen ersetzen die Inline-Attribute der dichtesten App-Templates
   (CSV-Import-Vorschauen, Gewerke-Karten, Einheiten-Detail, Nachunternehmer-
   Formular, /workflows/) 1:1 in Design-Tokens — kein rgba()/Hex-Literal.
   Fortsetzung von CR-115 (Landing) und CR-135 (buildings/contracts/contacts).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── /workflows/: Filter-Zeile (rendert ohne Regel als block statt flex) ── */
.wf-filter {
  display: flex;
  gap: var(--space-2);
  max-width: 400px;
  margin-bottom: var(--space-4);
}
.wf-name-input { width: 280px; }
.wf-group-input { width: 260px; }
.wf-trade-input { width: 220px; font-size: var(--text-base); }
.wf-group-title { flex: 1; font-size: var(--text-lg); }
.wf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-3);
}
.wf-chip {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-1) 10px;
  font-size: var(--text-base);
}
.wf-row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── CSV-Import-Vorschauen (Gebaeude + Einheiten) ── */
.imp-summary {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.imp-stat {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  flex: 1;
  text-align: center;
}
.imp-stat__value { font-size: var(--text-xl); font-weight: 700; }
.imp-stat__label { font-size: var(--text-xs); }
.imp-stat--new {
  background: var(--color-green-dim);
  border-color: var(--color-green-light-border);
}
.imp-stat--new .imp-stat__value,
.imp-stat--new .imp-stat__label { color: var(--color-green-badge); }
.imp-stat--update {
  background: var(--color-gold-dim);
  border-color: var(--color-gold-border);
}
.imp-stat--update .imp-stat__value,
.imp-stat--update .imp-stat__label { color: var(--color-amber-badge); }
.imp-stat--error {
  background: var(--color-red-dim);
  border-color: var(--color-red-btn-border);
}
.imp-stat--error .imp-stat__value,
.imp-stat--error .imp-stat__label { color: var(--color-red-badge); }

.imp-hint {
  font-size: var(--text-sm);
  color: var(--color-amber-badge);
  margin: 0 0 var(--space-3);
}
.imp-error-box {
  background: var(--color-red-dim);
  border: 1px solid var(--color-red-btn-border);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-red-badge);
}
.imp-preview-label {
  font-weight: 600;
  font-size: var(--text-xs);
  margin-bottom: 6px;
}

.imp-table-wrap {
  overflow-x: auto;
  margin-bottom: var(--space-3);
}
.imp-table-wrap--tall { overflow-y: auto; max-height: 45vh; }
.imp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.imp-table--wide { min-width: 900px; }
.imp-thead-row { background: var(--bg-page); }
.imp-th {
  padding: 5px var(--space-2);
  text-align: left;
  border: 1px solid var(--border-default);
}
.imp-td {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-default);
}
.imp-td--center { text-align: center; }
.imp-td--status { min-width: 140px; }
.imp-row--error { background: var(--color-red-dim); }
.imp-row--update { background: var(--color-gold-dim); }
.imp-status--new { color: var(--color-green-badge); font-size: var(--text-xs); }
.imp-status--update { color: var(--color-amber-badge); font-size: var(--text-xs); }
.imp-status--error {
  color: var(--color-red-badge);
  font-size: var(--text-xs);
  font-weight: 600;
}
/* CR-160: 10px lag UNTER der kleinsten Stufe der Typo-Skala (--text-xs = 11px) —
   weder Token noch barrierearm. */
.imp-error-detail {
  color: var(--color-red-badge);
  font-size: var(--text-xs);
  margin-top: 2px;
  white-space: normal;
}
/* Inline-Editier-Felder der Vorschau: kompakt statt 38px-Formular-Default. */
.imp-input {
  width: 100%;
  height: auto;
  font-size: var(--text-xs);
  padding: 2px var(--space-1);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
}
.imp-input--xs { width: 40px; }
.imp-input--sm { width: 45px; }
.imp-input--md { width: 50px; }
.imp-input--lg { width: 65px; }
.imp-input--xl { width: 80px; }
.imp-input--name { min-width: 80px; }
select.imp-input {
  padding: 2px 22px 2px var(--space-1);
  background-position: right 6px center;
}
select.imp-input--building { min-width: 120px; }
.imp-confirm-btn { flex: 2; }

/* ── Einheiten-Detailseite ── */
.card-label--tight { margin-bottom: 2px; }
.grid-2--rowgap { row-gap: var(--space-3); }
.tab-actions--tight { margin-bottom: var(--space-2); }
.unit-detail-hint { font-size: var(--text-sm); color: var(--text-muted); }

/* ── Nachunternehmer-Formular (Kontakt-Formset) ── */
.card--danger { border-color: var(--color-red-btn-border); }
.sub-section-label {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.sub-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sub-grid-type {
  display: grid;
  grid-template-columns: 140px 1fr 1fr;
  gap: 10px;
}
.sub-grid-zip {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-3);
}
.sub-hint { font-size: var(--text-base); color: var(--text-muted); }
.sub-hint--sm { font-size: var(--text-sm); }
.sub-badge-xs { font-size: var(--text-xs); }
.contact-row {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--bg-surface-2);
  margin-bottom: 10px;
  position: relative;
}
.contact-row-primary {
  border-color: var(--color-gold-border);
  background: var(--color-gold-nav-bg);
}
.contact-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.contact-row-remove {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  color: var(--color-red);
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
}

/* ── Gewerke-Vorlagen-Karten (Ansicht + Bearbeitung) ── */
.gw-title { flex: 1; font-size: var(--text-lg); }
.gw-title-input {
  flex: 1;
  height: auto;
  font-size: var(--text-lg);
  font-weight: 600;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 5px 10px;
}
.gw-group {
  margin-bottom: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 10px;
}
.gw-caption {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 0 var(--space-1);
}
.gw-caption--wide { padding-bottom: 6px; }
.gw-caption--row { flex: 1; font-size: var(--text-sm); }
.gw-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 6px;
  font-size: var(--text-base);
  border-radius: var(--radius-md);
  background: var(--bg-surface-2);
  margin-bottom: 3px;
}
.gw-item--roomy { padding: var(--space-1) var(--space-2); }
.gw-item-line {
  padding: 3px var(--space-2);
  font-size: var(--text-base);
  color: var(--text-secondary);
}
.gw-item-line--roomy { padding: var(--space-1) var(--space-2); }
.gw-empty {
  font-size: var(--text-sm);
  color: var(--text-faint);
  padding: var(--space-1) var(--space-2);
}
.gw-empty--block { padding: var(--space-1) var(--space-2); margin-bottom: var(--space-2); }
.gw-empty--flat { padding: 0; }
.gw-x {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--text-md);
  padding: 0 0 0 6px;
  line-height: 1;
}
.gw-x--sm { font-size: var(--text-base); }
.gw-x--xs { font-size: var(--text-sm); padding-left: var(--space-1); }
.gw-picklist {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 6px var(--space-2);
  max-height: 120px;
  overflow-y: auto;
}
.gw-picklist--short { max-height: 110px; margin-bottom: var(--space-1); }
.gw-picklist__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  padding: 2px 0;
  cursor: pointer;
}
.gw-inline-form { display: flex; gap: 6px; }
.gw-inline-form--mt { margin-top: 6px; }
.gw-inline-form--mb { margin-bottom: 10px; }
.gw-inline-form--mb-lg { margin-bottom: var(--space-3); }
.gw-input {
  flex: 1;
  height: auto;
  font-size: var(--text-sm);
  padding: 3px var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.gw-input--roomy { padding: var(--space-1) var(--space-2); }
.gw-hr {
  margin: 10px 0;
  border: none;
  border-top: 1px solid var(--border-default);
}
.gw-footer { border-top: 1px solid var(--border-default); padding-top: 10px; }
.gw-delete-btn {
  color: var(--color-red);
  border-color: var(--color-red-btn-border);
  background: var(--color-red-dim);
}

/* ── Utilities, die diese Charge braucht ── */
.u-mb-5 { margin-bottom: var(--space-5); }
.u-ml-2 { margin-left: var(--space-2); }

/* ═══════════════════════════════════════════════════════════════════════════
   CR-160 (Karte 1f4868ba) — Ersatz-Klassen fuer die letzten Inline-Styles im
   Zaehler-Ablesepfad, im Profil/Plattform-Admin und im Einheiten-Anlege-Modal.

   Die gehaertete CSP setzt style-src ohne 'unsafe-inline'; ein Nonce deckt
   <style>-ELEMENTE, niemals style="…"-ATTRIBUTE. Auf /buildings/zaehler/ hat der
   Browser dadurch 40 Deklarationen zur Laufzeit verworfen — die Schnellerfassung
   rendert mit Default-Feldbreiten. Alle Werte kommen aus Design-Tokens.

   CR-172 (Karte ccfbc973): der Satz oben stimmte nicht — der Block fuehrte
   100px/180px Feldbreiten und 2px/6px Padding als bare-px ein, also ausserhalb
   der Token-Skala. Die beiden Feldbreiten sind jetzt echte SSOT-Tokens
   (--field-w-num/--field-w-text aus design-tokens/tokens/layout.json), das
   Padding laeuft ueber var(--space-*). Ein Guard haelt das fest:
   tests/test_cr172_a11y_design_ccfbc973.py.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Zaehler-/Oel-Ablesezeile ── */
.ablesen-input--value {
  width: var(--field-w-num);
  text-align: right;
}
.ablesen-input--comment { width: var(--field-w-text); }
/* Warnung bei Plausibilitaets-Verstoss. Vorher inline mit
   color:var(--color-orange,#d97706) — --color-orange ist NIRGENDS definiert, es
   griff also immer der Hardcode-Hex (Dark-Mode ausgehebelt). --color-gold ist das
   kanonische Warn-Token. */
.ablesen-hint--warn { color: var(--color-gold); }
.ablesen-actions {
  text-align: right;
  white-space: nowrap;
  vertical-align: middle;
}
.meter-group-actions {
  text-align: right;
  white-space: nowrap;
  padding: var(--space-1) var(--space-2);
}
.meter-name {
  color: var(--color-primary-dark);
  font-weight: 500;
}
.meter-consumption--up { color: var(--color-green-badge); }

@media (max-width: 767.98px) {
  .ablesen-input--value,
  .ablesen-input--comment { width: 100%; }
}

/* ── Mein Profil ── */
.card--narrow { max-width: 480px; }
.profile-name {
  font-size: var(--text-lg);
  font-weight: 700;
}
.profile-meta {
  font-size: var(--text-base);
  color: var(--text-muted);
}

/* ── Plattform-Admin ── */
.pa-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.stat-value--sm { font-size: var(--text-lg); }
.pa-kv-key {
  color: var(--text-muted);
  width: 200px;
}
.u-mono { font-family: var(--font-mono); }
.pa-path {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* ── Einheiten-Anlege-Modal ── */
.uc-fieldset {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
}
.uc-fieldset--first { margin: var(--space-4) 0; }
.uc-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.uc-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.uc-grid-2--gap-top { margin-top: var(--space-3); }
.uc-check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.uc-check--spaced { margin-bottom: var(--space-3); }
.uc-check-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-base);
  cursor: pointer;
}

@media (max-width: 767.98px) {
  .uc-grid-2,
  .uc-grid-3 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EPIC DASH-9 (Karte 3289cf35) — Financial Dashboard Redesign

   Reiterleiste (.dash-tabs*), Zeitraum-Leiste (.dash-range*) und
   Kapitel-Raster (.dash-chapter*). Optik nach
   clickdummies/dashboard-redesign-2026-07-29/index.html — token-basiert
   (keine literale Hex-/px-Farbe), kanonische Breakpoints (480/768/1024/1280).
   Tabellen scrollen in sich (AC-7); nichts hier baut Backdrop/Escape/Focus-Trap
   nach — dieses Kapitel-Layout ist kein Modal.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reiterleiste ── */
.dash-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border-default);
  margin-bottom: var(--space-5);
}
.dash-tabs__tab {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.dash-tabs__tab:hover { color: var(--text-primary); }
.dash-tabs__tab.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* ── Zeitraum-Leiste (1J/3J/5J, AC-3) ── */
.dash-range {
  display: inline-flex;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.dash-range__btn {
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
}
.dash-range__btn:hover { border-color: var(--color-primary); color: var(--text-primary); }
.dash-range__btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--text-invert);
}

/* ── Kapitelseite ── */
.dash-chapter { display: block; }
.dash-chapter__head { margin-bottom: var(--space-5); }
.dash-chapter__title { margin: 0; font-size: var(--text-xl); color: var(--text-primary); }

/* 12-Spalten-Raster; Breitenklassen wie im Baukasten-Raster, damit die
   Kapitel-Kacheln dieselbe mentale Skala wie die Widget-Kacheln nutzen. */
.dash-chapter__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-4);
}
.dash-chapter__card {
  grid-column-end: span 4;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-5) var(--space-6);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.dash-chapter__card--w1  { grid-column-end: span 1; }
.dash-chapter__card--w2  { grid-column-end: span 2; }
.dash-chapter__card--w3  { grid-column-end: span 3; }
.dash-chapter__card--w4  { grid-column-end: span 4; }
.dash-chapter__card--w5  { grid-column-end: span 5; }
.dash-chapter__card--w6  { grid-column-end: span 6; }
.dash-chapter__card--w7  { grid-column-end: span 7; }
.dash-chapter__card--w8  { grid-column-end: span 8; }
.dash-chapter__card--w9  { grid-column-end: span 9; }
.dash-chapter__card--w10 { grid-column-end: span 10; }
.dash-chapter__card--w11 { grid-column-end: span 11; }
.dash-chapter__card--w12 { grid-column-end: span 12; }

.dash-chapter__card-title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
/* AC-6: jeder Leerzustand erklärt sich — nie ein leeres Chart ohne Text. */
.dash-chapter__empty {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* AC-7: Tabellen scrollen IN SICH, statt die Seite horizontal zu sprengen. */
.dash-chapter .dash-table {
  overflow-x: auto;
}

/* CR-170: Heatmaps mit vielen Spalten (z. B. 5J-Zeitraum = 60 feste 22px-
   Zellen) sprengen sonst das 12-Spalten-Kapitel-Raster — analog zu
   .dash-chapter .dash-table oben. Im Baukasten fängt bereits
   .dash-widget__body { overflow: auto } das ab, dem Kapitel-Card fehlt dieses
   Gegenstück. */
.dash-chapter .dash-heatmap {
  overflow-x: auto;
}

/* Tablet: maximal 2 Spalten (kanonischer Breakpoint 1024px). */
@media (max-width: 1024px) {
  .dash-chapter__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-chapter__grid > .dash-chapter__card { grid-column-end: span 2; }
}
/* Mobile: einspaltig (kanonischer Breakpoint 767.98px). */
@media (max-width: 767.98px) {
  .dash-chapter__grid { grid-template-columns: 1fr; }
  .dash-chapter__grid > .dash-chapter__card { grid-column: 1 / -1; }
  .dash-tabs { overflow-x: auto; flex-wrap: nowrap; }
}