:root {
  /* ============================================================
     Design-Tokens nach HfM-Analytics-UI-Regelwerk Entwurf 0.2
     (docs/ui/HfM-Analytics-UI-Regelwerk_Entwurf-0.2.html)
     ============================================================ */

  /* Neutrale Farben */
  --n-950: #303030;   /* Primärtext */
  --n-700: #686868;   /* Sekundärtext */
  --n-600: #878787;   /* zurückgestellt, Feldrahmen */
  --n-400: #b2b2b2;   /* deaktiviert/dekorativ */
  --n-200: #e9e9e9;   /* Trennlinien */
  --n-100: #f5f6f7;   /* Seitenfläche */
  --n-050: #fafbfb;   /* subtile Fläche */

  /* Produktfarbe (HfM-Dunkelblau) — Nuancen 100/60/20 % */
  --product: #1d2846;
  --product-rgb: 29, 40, 70;
  --product-hover: #141d33;
  --product-60: rgba(var(--product-rgb), 0.60);
  --product-20: rgba(var(--product-rgb), 0.20);

  /* HfM-Aufmerksamkeitsfarbe (Gold) — selten! (F-03) */
  --accent: #b9924c;
  --accent-rgb: 185, 146, 76;
  --accent-60: rgba(var(--accent-rgb), 0.60);
  --accent-20: rgba(var(--accent-rgb), 0.20);

  /* Statusfarben */
  --success: #177245;      --success-soft: #e7f4ec;  --success-rgb: 23, 114, 69;
  --warning: #8a4b08;      --warning-soft: #fff2dc;  --warning-rgb: 138, 75, 8;
  --danger: #b42318;       --danger-soft: #fce9e7;   --danger-rgb: 180, 35, 24;
  --danger-hover: #8f1c13;
  --info: #175cd3;         --info-soft: #e9f1ff;     --info-rgb: 23, 92, 211;
  --focus: #2f80ed;

  /* Status-Textfarben (im Dark Mode heller, siehe html.dark) */
  --success-text: var(--success);
  --warning-text: var(--warning);
  --danger-text: var(--danger);

  /* Werte in Auswertungen (positiv/negativ – immer mit Vorzeichen, F-07) */
  --wert-pos: var(--success);
  --wert-neg: var(--danger);

  /* Rundungen (A-04: 6/10/16, keine Pillenform;
     dokumentierte Ableitung 2026-08-31: Pill-Tabs/Chips wie im
     CRM-Familienmuster sind funktional runde Bedienelemente) */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 16px;

  /* Seitenleiste (CRM-Familienmuster; Betreiber 2026-08-31: direkt in der
     Produktfarbe #1d2846). Konstant in Hell UND Dunkel — feste Werte, weil
     --product im Dark Mode aufgehellt wird. Der aktive Menüpunkt hebt sich
     als hellere Stufe der Farbfamilie ab (wie der Login-Verlauf). */
  --sidebar-bg: #1d2846;
  --sidebar-aktiv: #2a3760;

  /* Schatten nur bei echter Höhe (A-05) */
  --shadow-pop: 0 18px 45px rgba(0, 0, 0, 0.10);

  /* --- Legacy-Aliase (bestehende Klassen), gemappt auf die neuen Tokens --- */
  --hfm-anthrazit: var(--n-700);
  --hfm-anthrazit-dark: var(--n-950);
  --hfm-anthrazit-mid: var(--n-600);
  --hfm-anthrazit-light: var(--n-400);
  --hfm-anthrazit-pale: var(--n-200);
  --hfm-analytics-blue: var(--product);
  --hfm-red: var(--danger-text);
  --hfm-positiv: var(--success-text);
  --hfm-negativ: var(--danger-text);
  --hfm-warnung: var(--warning-text);
  --hfm-plan: var(--product);
  --hfm-plan-text: var(--product);
  --hfm-prog-pos: var(--success-text);
  --hfm-prog-neg: var(--danger-text);
  --hfm-ist: var(--n-700);
  --hfm-white: #ffffff;
  --hfm-bg: var(--n-100);
  --sidebar-width: 240px;
  --shadow-card: none;
  --shadow-card-hover: none;
  --glass-bg: var(--hfm-white);
  --glass-border: 1px solid var(--n-200);
  --transition: all 0.2s ease;
}

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

/* Ruhige, flache Seitenfläche (Regelwerk 0.2: neutrales Grundsystem) */
html { background: var(--n-100); }

html, body {
  height: 100%;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--hfm-anthrazit-dark);
  min-height: 100vh;
}

body { background: var(--n-100); }

/* Sichtbarer Tastaturfokus (Regelwerk: Fokus #2f80ed, nie entfernen) */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* T-05: Zahlen in Tabellen und Kennzahlen tabellarisch */
.data-table, .pivot-table, .kpi-value, .result-value,
.text-right, .amount-einnahme, .amount-ausgabe, .zahlen-tab {
  font-variant-numeric: tabular-nums;
}

/* --- SCROLLBALKEN --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--product-rgb),0.40);
}

h1, h2, h3, h4, .page-title, .card-title, .modal-title {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
}

/* --- LAYOUT --- */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* --- SIDEBAR (CRM-Familienmuster: dunkle Leiste, konstant in beiden Modi) --- */
.sidebar {
  width: var(--sidebar-width);
  min-height: 100vh;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  z-index: 100;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 18px 16px;
}

/* Sand-Morph-Logo (Ähre ↔ Schriftzug): feste Maße, damit vor dem
   Script-Start nichts springt */
.sidebar-logo-mark { width: 46px; height: 46px; flex: none; }

.sidebar-logo-text { min-width: 0; }

.sidebar-logo-text strong {
  display: block;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}

/* Untertitel unter dem Produktnamen (CRM-Muster: „Heute für Morgen") */
.sidebar-untertitel {
  display: block;
  color: rgba(255,255,255,0.58);
  font-size: 11px;
  white-space: nowrap;
}

/* --- NAV --- */
.sidebar-nav {
  flex: 1;
  padding: 4px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.nav-label {
  margin: 18px 10px 6px;
  color: rgba(255,255,255,0.42);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.nav-label-bottom { margin-top: auto; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 10px;
  border-radius: 8px;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  color: rgba(255,255,255,0.72);
  font-weight: 600;
  font-size: 13px;
  transition: var(--transition);
}

.nav-item:hover {
  background: rgba(255,255,255,0.09);
  color: #ffffff;
}

/* Aktiver Menüpunkt trägt die Produktfarbe (F-01) — fester Wert,
   damit der Dark Mode sie nicht aufhellt */
.nav-item.active,
.nav-item.active:hover {
  background: var(--sidebar-aktiv);
  color: #ffffff;
}

.nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.sidebar-footer {
  padding: 14px 18px 16px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.sidebar-footer-text {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
}

/* --- MAIN CONTENT --- */
.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-height: 100vh;
  padding: 32px;
  overflow-y: auto;
}

/* --- PAGE --- */
.page { display: none; }
.page.active { display: block; }

/* Seitenkopf offen auf der Seitenfläche (CRM-Muster: Titel links,
   Aktionen rechts — keine Karten-Box mehr) */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 4px 2px;
  /* Über der Filterleiste, damit das "Regeln anwenden"-Dropdown nicht hinter
     ihr verschwindet. */
  position: relative;
  z-index: 1000;
}

.page-title {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 32px;
  color: var(--hfm-anthrazit-dark);
  line-height: 38px;
}

.page-subtitle {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: var(--hfm-anthrazit-mid);
  margin-top: 4px;
  font-weight: 400;
}

.page-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* --- CARDS (flache Inhaltsflächen, A-03/A-05) --- */
.card {
  background: var(--hfm-white);
  border: 1px solid var(--n-200);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 24px;
}

/* Karten-Titel mit Produktfarb-Akzent links (CRM-Muster für
   Abschnitts-Überschriften — dezent, Produktfarbe bleibt Aktionen
   vorbehalten, F-01) */
.card-title {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--hfm-anthrazit-dark);
  margin-bottom: 16px;
  padding-left: 10px;
  border-left: 4px solid var(--product);
  line-height: 1.3;
}

.card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.card-header-row .card-title { margin-bottom: 0; }

/* --- KPI CARDS --- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

/* Dashboard hat 5 Karten (inkl. Kontostand). Paket 6 (2026-09-28): 1fr ließ keine
   Spalte schmaler werden als ihren Betrag (unteilbar durch das geschützte Leerzeichen
   vor „€“) – bei 1280 px lag „Unkategorisiert“ ganz außerhalb. Jetzt 3+2 Karten
   (oben Einnahmen, Ausgaben, Saldo; unten Kontostand, Unkategorisiert), fünf in einer
   Reihe erst ab 1880 px. Umbruchpunkte aus ≈300 px je Karte + Seitenleiste 240 +
   2 × 32 Innenabstand + 6 Scrollleiste, im Browser gemessen (1280/1366/1440/1920).
   Beträge werden nie gekürzt (kein ellipsis/nowrap, T-05 bleibt über .kpi-value). */
#kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1880px) { #kpi-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1240px) { #kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 930px)  { #kpi-grid { grid-template-columns: minmax(0, 1fr); } }
#kpi-grid .kpi-content { min-width: 0; }

/* Kontostand-Card im unkonfigurierten Zustand: ausgegraut, klickbar */
#kpi-kontostand-card.kpi-nicht-konfiguriert { cursor: pointer; }

#kpi-kontostand-card.kpi-nicht-konfiguriert:hover {
  border-color: rgba(var(--product-rgb),0.5);
}

#kpi-kontostand-card.kpi-nicht-konfiguriert .kpi-value {
  color: var(--n-400);
  font-size: 16px;
}

#kpi-kontostand-card.kpi-nicht-konfiguriert .kpi-betriebe-badge {
  color: var(--hfm-analytics-blue);
  cursor: pointer;
}

/* Kontostand-Warnbanner unter den KPI-Cards */
.kontostand-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin: -8px 0 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  background: rgba(var(--danger-rgb),0.08);
  border: 1px solid rgba(var(--danger-rgb),0.20);
  color: var(--danger-text);
}

.kontostand-banner.banner-gelb {
  background: rgba(var(--warning-rgb),0.08);
  border-color: rgba(var(--warning-rgb),0.25);
  color: var(--warning-text);
}

html.dark .kontostand-banner { color: var(--danger-text); }
html.dark .kontostand-banner.banner-gelb { color: var(--warning-text); }

.kpi-card {
  background: var(--hfm-white);
  border: 1px solid var(--n-200);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: border-color 0.2s ease;
}
/* Klickbare Kachel (Dashboard „Unkategorisiert“ → Transaktionen, 2026-09-29); Fokus global (I-01) */
.kpi-card.kpi-klickbar { cursor: pointer;
}

.kpi-card:hover {
  border-color: var(--product-60);
}

.kpi-card.kpi-accent {
  border-color: var(--product-60);
  background: var(--n-050);
}

.kpi-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);   /* A-04: 10 px statt frei gewählter 12 px */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kpi-icon svg { width: 20px; height: 20px; }

.kpi-green { background: var(--success-soft); color: var(--success-text); }
.kpi-red { background: var(--danger-soft); color: var(--danger-text); }
.kpi-blue { background: var(--product-20); color: var(--product); }
.kpi-orange { background: var(--warning-soft); color: var(--warning-text); }

.kpi-label {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--hfm-anthrazit-mid);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.kpi-value {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 28px;
  color: var(--hfm-anthrazit-dark);
  line-height: 1;
}

/* --- CHARTS --- */
.charts-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 16px;
  margin-bottom: 24px;
}

.chart-card { margin-bottom: 0; }

.chart-wrapper {
  height: 220px;
  position: relative;
}

.chart-pie-wrapper {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- TABLES --- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--hfm-anthrazit-dark);
}

.data-table thead th {
  text-align: left;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--hfm-anthrazit-mid);
  background: var(--n-100);
  padding: 10px 12px;
  border-bottom: 1px solid var(--n-200);
}

.data-table thead th:first-child { border-top-left-radius: 8px; }
.data-table thead th:last-child { border-top-right-radius: 8px; }

.data-table tbody tr {
  background: var(--hfm-white);
  transition: background 0.15s ease;
}

.data-table tbody tr:nth-child(even) {
  background: var(--n-050);
}

.data-table tbody tr:hover {
  background: var(--n-100);
}

.data-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--n-200);
  vertical-align: middle;
}

.text-right { text-align: right !important; }

.amount-einnahme { color: var(--wert-pos); font-weight: 600; }
.amount-ausgabe { color: var(--wert-neg); font-weight: 600; }

/* --- BADGES (Rundung 6 px, A-04) --- */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-xs);
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
}

.badge-blue { background: var(--product-20); color: var(--product); }
.badge-gray { background: var(--hfm-anthrazit-pale); color: var(--hfm-anthrazit); }
.badge-offen { background: var(--danger-soft); color: var(--danger-text); }
.badge-orange { background: var(--warning-soft); color: var(--warning-text); }
.badge-green { background: var(--success-soft); color: var(--success-text); }
.badge-red { background: var(--danger-soft); color: var(--danger-text); }
.badge-eigen { background: var(--warning-soft); color: var(--warning-text); }

/* --- BUTTONS --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--product);
  color: var(--hfm-white);
  padding: 8px 18px;
}

.btn-primary:hover {
  background: var(--product-hover);
}

.btn-secondary {
  background: var(--hfm-white);
  color: var(--hfm-anthrazit-dark);
  border: 1px solid var(--n-400);
}

.btn-secondary:hover {
  background: var(--n-100);
}

/* Kritische Aktionen: gefüllt in Gefahrfarbe (B-03) */
.btn-danger {
  background: var(--danger);
  color: var(--hfm-white);
  border: 1px solid transparent;
}

.btn-danger:hover { background: var(--danger-hover); }

/* Textaktion (Regelwerk-Hierarchie „Textaktion“: keine dominante Fläche;
   Hover in der 20-%-Nuance, F-04) */
.btn-text {
  background: none;
  color: var(--product);
  border: 1px solid transparent;
  padding: 8px 12px;
  text-decoration: underline;          /* als Aktion erkennbar, nicht nur über Farbe (F-07) */
  text-underline-offset: 4px;
}

.btn-text:hover { background: var(--product-20); }

/* B-06: deaktiviert und „in Verarbeitung“ sichtbar – neutrale Fläche statt
   gesenkter Deckkraft (F-04), gilt für alle .btn (2026-09-28) */
.btn:disabled,
.btn:disabled:hover {
  background: var(--n-200);
  border-color: var(--n-200);
  color: var(--n-700);
  cursor: not-allowed;
}

.btn[aria-busy="true"] { cursor: progress; }

.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-large { padding: 13px 28px; font-size: 15px; }

.btn-icon {
  padding: 6px;
  background: transparent;
  border: 1px solid var(--hfm-anthrazit-pale);
  color: var(--hfm-anthrazit);
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition);
}

.btn-icon:hover {
  background: var(--product-20);
  border-color: var(--product-60);
  color: var(--product);
}

.btn-icon svg { width: 14px; height: 14px; display: block; }

/* --- FORMS --- */
.form-group { display: flex; flex-direction: column; gap: 6px; }

.form-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--hfm-anthrazit-mid);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-input {
  padding: 9px 12px;
  border: 1px solid var(--n-400);
  border-radius: var(--radius-sm);
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--hfm-anthrazit-dark);
  background: var(--n-050);
  transition: var(--transition);
  outline: none;
  appearance: none;
}

.form-input:focus {
  border-color: var(--product);
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

select.form-input { cursor: pointer; }

select.form-input:disabled,
input.form-input:disabled {
  background: var(--hfm-anthrazit-pale);
  color: var(--hfm-anthrazit-light);
  cursor: not-allowed;
}

.filter-card {
  padding: 20px;
  margin-bottom: 16px;
  /* Unter der page-header (Dropdown-Overlay), siehe .page-header */
  position: relative;
  z-index: 10;
  background: var(--hfm-white);
  border: 1px solid var(--n-200);
  border-radius: var(--radius);
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.form-group-wide { grid-column: span 2; }

/* Zwischenüberschrift für Formular-Abschnitte (z.B. Betrieb-Modal) */
.form-section-title {
  grid-column: span 2;
  margin-top: 8px;
  padding-bottom: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--hfm-anthrazit-mid);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.form-section-title:first-child { margin-top: 0; }

.form-hinweis {
  font-size: 12px;
  color: var(--hfm-anthrazit-mid);
}

/* Logo-Bereich im Betrieb-Modal */
.logo-vorschau-zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 40px;
}

.logo-vorschau-zeile img {
  max-height: 64px;
  max-width: 180px;
  padding: 4px;
  background: var(--hfm-white);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 9px;
}

.logo-button-zeile { display: flex; gap: 8px; }

.form-check-group {
  justify-content: flex-end;
  align-self: end;
  padding-bottom: 4px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--hfm-anthrazit);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.checkbox-label input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--hfm-analytics-blue);
  cursor: pointer;
}

.filter-actions { display: flex; gap: 10px; }

/* --- DROPZONE --- */
.dropzone {
  border: 2px dashed rgba(104,104,104,0.25);
  border-radius: var(--radius);
  padding: 56px 24px;
  text-align: center;
  transition: var(--transition);
  cursor: pointer;
  background: var(--hfm-white);
}

.dropzone.dragover {
  border-color: var(--hfm-analytics-blue);
  background: rgba(var(--product-rgb),0.05);
}

.dropzone-icon { color: var(--hfm-anthrazit-light); margin-bottom: 16px; }
.dropzone-text { font-size: 16px; font-weight: 600; font-family: 'Open Sans', sans-serif; color: var(--hfm-anthrazit); margin-bottom: 6px; }
.dropzone-hint { font-size: 14px; color: var(--hfm-anthrazit-light); margin-bottom: 14px; }
.dropzone-formats { font-size: 12px; color: var(--hfm-anthrazit-light); margin-top: 14px; }

.import-actions { display: flex; gap: 12px; margin-top: 20px; align-items: center; }

/* --- IMPORT RESULT --- */
.result-grid {
  display: flex;
  gap: 20px;
  margin: 16px 0 20px;
}

.result-item {
  flex: 1;
  padding: 16px;
  border-radius: 12px;
  text-align: center;
}

.result-green { background: rgba(var(--product-rgb),0.06); border: 1px solid rgba(var(--product-rgb),0.2); }
.result-orange { background: rgba(var(--warning-rgb),0.06); border: 1px solid rgba(var(--warning-rgb),0.2); }
.result-blue { background: rgba(var(--product-rgb),0.06); border: 1px solid rgba(var(--product-rgb),0.2); }

.result-value { font-family: 'Open Sans', sans-serif; font-size: 32px; font-weight: 600; }
.result-label { font-size: 12px; color: var(--hfm-anthrazit-mid); margin-top: 4px; }

.result-green .result-value { color: var(--hfm-analytics-blue); }
.result-orange .result-value { color: var(--warning-text); }
.result-blue .result-value { color: var(--hfm-analytics-blue); }

.error-list {
  margin: 12px 0;
  padding: 12px;
  background: rgba(var(--danger-rgb),0.05);
  border-radius: 8px;
  border: 1px solid rgba(var(--danger-rgb),0.15);
  font-size: 12px;
  color: var(--hfm-red);
  max-height: 120px;
  overflow-y: auto;
}

/* --- MODAL --- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.40);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal {
  background: var(--hfm-white);
  border-radius: var(--radius);
  border: 1px solid var(--n-200);
  box-shadow: var(--shadow-pop);
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalIn 0.2s ease;
}

.modal-sm { max-width: 420px; }
/* Breites Fenster (2026-09-29, Betreiber: „Neue Regel“ – lange Kategorie-/Zweignamen passten nicht) */
.modal-lg { max-width: 880px; }

/* Aufteilung auf mehrere Betriebszweige (2026-09-29, app.js aufteilung*): Zeilen Zweig +
   Prozent, Summe als Statushinweis (S-01), Rundungen/Abstände aus den Tokens (A-04, 4-px-Raster) */
.zweig-aufteilung-kopf { font-size: 12px; font-weight: 600; color: var(--n-700); margin-bottom: 8px; }
.zweig-aufteilung-zeile { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.zweig-aufteilung-zeile select { flex: 1; min-width: 0; }
.zweig-aufteilung-prozent { width: 96px; flex: none; text-align: right; }
.zweig-aufteilung-einheit { color: var(--n-700); }
.zweig-aufteilung-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.zweig-aufteilung-summe { font-size: 12px; font-weight: 600; margin-right: auto; }
.zweig-aufteilung-summe.ok { color: var(--success-text); }
.zweig-aufteilung-summe.fehlt { color: var(--danger-text); }
.zweig-aufteilung[data-aktiv="1"] {
  padding: 12px; border: 1px solid var(--n-200); border-radius: var(--radius-sm);
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.modal-title {
  font-size: 18px;
  color: var(--hfm-anthrazit-dark);
}

.modal-close {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--hfm-anthrazit-light);
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
  transition: var(--transition);
}

.modal-close:hover { background: var(--hfm-anthrazit-pale); color: var(--hfm-anthrazit); }

/* B-06: gesperrt (z. B. während eines laufenden Aufbaus) */
.modal-close:disabled,
.modal-close:disabled:hover { background: none; color: var(--n-400); cursor: not-allowed; }

.modal-body { padding: 20px 24px; }

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid rgba(0,0,0,0.06);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* Knöpfe dürfen auf schmalen Displays umbrechen (lange Beschriftungen) */
.modal-footer.umbruch { flex-wrap: wrap; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* --- PAGINATION --- */
.pagination {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding: 16px 0 4px;
  flex-wrap: wrap;
}

.pagination button {
  min-width: 36px; height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--n-200);
  background: var(--hfm-white);
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition);
}

.pagination button:hover, .pagination button.active {
  background: var(--hfm-analytics-blue);
  border-color: var(--hfm-analytics-blue);
  color: white;
}

/* --- TOAST --- */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #2e2e2e;
  color: white;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  z-index: 9999;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  animation: toastIn 0.25s ease;
}

.toast.toast-success { background: var(--success); }
.toast.toast-error { background: var(--danger); }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- SCHNELL ERFASSEN: schwebender "+"-Knopf unten rechts mit Panel
   (CRM-Muster; Auf/Zu rein über <details>, kein JavaScript). Schatten ist
   hier erlaubt: Knopf und Panel schweben tatsächlich über dem Inhalt
   (A-05). Feste Produktfarbe, damit der Dark Mode sie nicht aufhellt. */
.schnell-erfassen { position: fixed; right: 28px; bottom: 28px; z-index: 900; }

.schnell-erfassen summary {
  list-style: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #ffffff;
  background: #1d2846; /* echtes Produkt-Dunkelblau, auch im Dark Mode */
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  transition: background 0.15s ease;
}

.schnell-erfassen summary::-webkit-details-marker { display: none; }
.schnell-erfassen summary:hover { background: #141d33; }
html.dark .schnell-erfassen summary:hover { background: #2a3760; }
.schnell-erfassen summary svg { transition: transform 0.15s; }
.schnell-erfassen[open] summary svg { transform: rotate(45deg); }

.schnell-panel {
  position: absolute;
  right: 0;
  bottom: 70px;
  width: 320px;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--hfm-white);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}

.schnell-kopf { padding: 2px 8px 10px; }
.schnell-kopf strong { display: block; font-size: 17px; }
.schnell-kopf span { display: block; color: var(--hfm-anthrazit-mid); font-size: 13px; }

.schnell-eintrag {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 9px 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--hfm-anthrazit-dark);
  font-family: 'Open Sans', sans-serif;
  text-align: left;
  cursor: pointer;
}

.schnell-eintrag:hover { background: var(--n-100); }

.schnell-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--n-100);
  color: var(--hfm-anthrazit);
}

.schnell-text { flex: 1; min-width: 0; }
.schnell-text strong { display: block; font-size: 15px; }
.schnell-text span { display: block; color: var(--hfm-anthrazit-mid); font-size: 13px; }
.schnell-pfeil { color: var(--hfm-anthrazit-light); font-size: 16px; flex: none; }

html.dark .schnell-panel { background: var(--d-flaeche); box-shadow: 0 10px 30px rgba(0,0,0,0.45); }
html.dark .schnell-eintrag:hover { background: rgba(var(--d-linie-rgb),0.06); }
html.dark .schnell-icon { background: rgba(var(--d-linie-rgb),0.08); }

.problem-pflicht { color: var(--danger-text); }

.problem-fehler {
  min-height: 18px;
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--danger-text);
}

.problem-feld-fehler { border: 2px solid var(--danger) !important; }

.problem-hinweis {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--hfm-anthrazit-mid);
}

/* --- EMPTY STATE --- */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--hfm-anthrazit-light);
}

.empty-state svg { width: 40px; height: 40px; margin-bottom: 12px; opacity: 0.4; }
.empty-state p { font-size: 14px; }

/* --- LOADING --- */
.loading-row td { text-align: center; padding: 32px; color: var(--hfm-anthrazit-light); }

/* --- KOMPAKTE INPUTS (Page-Header) --- */
.form-input-sm {
  padding: 7px 10px;
  font-size: 12px;
  max-width: 170px;
}

/* --- FILTER-BADGE --- */
.filter-badge {
  align-self: center;
  font-size: 12px;
  padding: 5px 12px;
}

/* --- TOGGLE (Prognose-Monate) --- */
.toggle-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.toggle-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--hfm-anthrazit-mid);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 4px;
}

.toggle-btn {
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--hfm-anthrazit-pale);
  background: var(--hfm-white);
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--hfm-anthrazit);
  cursor: pointer;
  transition: var(--transition);
}

.toggle-btn:hover {
  border-color: var(--hfm-analytics-blue);
  color: var(--hfm-analytics-blue);
}

.toggle-btn.active {
  background: var(--hfm-analytics-blue);
  border-color: var(--hfm-analytics-blue);
  color: white;
}

/* --- PROGNOSE --- */
.prognose-row {
  background: rgba(104,104,104,0.05);
}

.prognose-row td {
  color: var(--hfm-anthrazit-mid);
}

.badge-prognose {
  background: transparent;
  border: 1.5px dashed var(--hfm-analytics-blue);
  color: var(--hfm-analytics-blue);
  padding: 2px 9px;
}

.konfidenz-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}

.konfidenz-bar {
  flex: 1;
  height: 6px;
  background: rgba(0,0,0,0.07);
  border-radius: 3px;
  overflow: hidden;
  max-width: 90px;
}

.konfidenz-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.konfidenz-text {
  font-size: 12px;
  font-weight: 600;
  min-width: 32px;
}

.hinweis-banner {
  font-size: 12px;
  font-weight: 400;
  color: var(--hfm-anthrazit-light);
  text-align: center;
  padding: 8px 0 16px;
}


/* --- ADMIN: TAB-NAVIGATION (Pill-Tabs, CRM-Muster) --- */
.admin-tabs {
  display: flex;
  gap: 8px;
  padding: 0;
  margin-bottom: 20px;
  overflow-x: auto;
}

.admin-tab {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 18px;
  border: 1px solid var(--n-200);
  border-radius: 999px;
  background: var(--hfm-white);
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--n-950);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}

.admin-tab:hover {
  border-color: var(--n-400);
}

.admin-tab.active {
  background: var(--product);
  color: var(--hfm-white);
  border-color: var(--product);
}

html.dark .admin-tab { background: rgba(var(--d-linie-rgb),0.06); }
html.dark .admin-tab.active { background: var(--product); color: #141d33; }

/* --- ADMIN: ÜBERSICHT --- */
.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

@media (max-width: 1200px) {
  .admin-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

.admin-stat-card {
  background: var(--hfm-white);
  border: 1px solid var(--n-200);
  border-radius: var(--radius-sm);   /* A-04 (vorher frei 14 px) */
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  /* seit 2026-09-28 <button> (Tab „Daten“): Schrift und Farbe wie der Text */
  font: inherit;
  color: inherit;
  width: 100%;
  min-height: 44px;
}
.admin-stat-card .admin-stat-wert,
.admin-stat-card .admin-stat-label { display: block; }
/* Kacheln stehen in der Karte „Bestand“ – dort ohne Abstand nach unten */
.card .admin-stat-grid { margin-bottom: 0; }

.admin-stat-card:hover {
  border-color: rgba(var(--product-rgb),0.35);
  transform: translateY(-2px);
}

.admin-aktivitaeten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.admin-sub-titel {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--hfm-anthrazit-mid);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.admin-aktiv-eintrag {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  font-size: 12px;
  color: var(--hfm-anthrazit-dark);
}

.admin-aktiv-leer {
  font-size: 12px;
  color: var(--hfm-anthrazit-light);
}

/* --- ADMIN: STATISTIKEN --- */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.admin-stat {
  text-align: center;
  padding: 6px 0;
}

.admin-stat-wert {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 19px;
  color: var(--hfm-anthrazit-dark);
  white-space: nowrap;
}

.admin-stat-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--hfm-anthrazit-mid);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 3px;
}

/* --- ADMIN: TRANSAKTIONEN LÖSCHEN --- */
.loesch-warnung {
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  background: rgba(0,0,0,0.04);
  color: var(--hfm-anthrazit);
  line-height: 1.5;
}

.loesch-warnung-rot {
  background: rgba(var(--danger-rgb),0.07);
  border: 1px solid rgba(var(--danger-rgb),0.2);
  color: var(--danger-text);
}

/* --- ADMIN --- */
.nav-item-bottom {
  margin-top: auto;
}

.dropzone-blue {
  border: 2px dashed var(--hfm-analytics-blue);
  background: var(--hfm-white);
}

.dropzone-blue:hover,
.dropzone-blue.dragover {
  background: rgba(var(--product-rgb),0.06);
  border-color: var(--hfm-analytics-blue);
}

.admin-file-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--hfm-white);
  border: 1px solid var(--n-200);
  border-radius: var(--radius-sm);
}

.admin-file-name {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--hfm-anthrazit-dark);
}

.admin-file-meta {
  font-size: 12px;
  color: var(--hfm-anthrazit-mid);
}

/* --- ADMIN: VORFÜHRDATEN (Demo-Knopf, 2026-09-28; admin.js ladeDemoKarte) --- */
.demo-einleitung { margin-bottom: 12px; }
.demo-stand { flex: 1 1 240px; min-width: 0; }
.demo-stand .admin-file-meta { display: block; margin-top: 4px; }
.demo-meldung-titel { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.demo-meldung-aktion { margin-top: 8px; }
.demo-dialog-rumpf > * + * { margin-top: 12px; }
.demo-dialog-lauf:empty { display: none; }
.demo-dialog-lauf { margin-top: 12px; }

/* --- MEHRFACHAUSWAHL --- */
.th-check {
  width: 36px;
  text-align: center !important;
}

.hfm-check {
  width: 16px;
  height: 16px;
  accent-color: var(--hfm-analytics-blue);
  cursor: pointer;
  vertical-align: middle;
}

.data-table tbody tr.row-selected,
.data-table tbody tr.row-selected:hover {
  background: rgba(var(--product-rgb),0.08);
}

/* --- BULK-AKTIONSLEISTE --- */
.bulk-bar {
  position: fixed;
  left: var(--sidebar-width);
  right: 0;
  bottom: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 32px;
  background: var(--hfm-white);
  border-top: 1px solid rgba(var(--product-rgb),0.2);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.08);
  animation: bulkBarIn 0.2s ease;
}

@keyframes bulkBarIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.bulk-count {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--hfm-anthrazit-dark);
}

.bulk-actions {
  display: flex;
  gap: 10px;
}

/* --- REGEL-DIALOG „Regel gilt, wenn …“ (2026-10-01, regel_bedingungen.js) --- */
.rb-titel {
  margin: 20px 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--n-950);
}
.rb-hinweis, .rb-zweck-voll {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--n-700);
}
.rb-zweck-voll { margin: 4px 0 0; overflow-wrap: anywhere; }
.rb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rb-keine { font-size: 14px; color: var(--n-700); padding: 8px 0; }
.rb-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 4px 4px 12px;
  border: 1px solid var(--n-400);
  border-radius: var(--radius-sm);
  background: var(--n-050);
  font-size: 14px;
  max-width: 100%;
}
.rb-chip-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--n-700);
  white-space: nowrap;
}
.rb-chip-wert { font-weight: 600; color: var(--n-950); overflow-wrap: anywhere; }
.rb-mono { font-variant-numeric: tabular-nums; }
.rb-leer { font-weight: 400; color: var(--n-700); }
.rb-chip-x {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--n-700);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.rb-chip-x:hover { background: var(--product-20); color: var(--n-950); }
.rb-chip-x:focus-visible, .rb-dazu:focus-visible, .rb-stueck:focus-visible,
.rb-chip-eingabe:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.rb-chip-offen { border-color: var(--product-60); }
.rb-chip-eingabe {
  height: 34px;
  padding: 4px 8px;
  border: 1px solid var(--n-400);
  border-radius: var(--radius-xs);
  background: var(--hfm-white);
  color: var(--n-950);
  font: 400 14px 'Open Sans', Arial, sans-serif;
}
html.dark .rb-chip-eingabe { background: var(--n-100); }
.rb-chip-zweck { width: 260px; max-width: 60vw; }
.rb-chip-zahl { width: 120px; text-align: right; font-variant-numeric: tabular-nums; }
.rb-chip-einheit { font-size: 14px; color: var(--n-700); }
.rb-stuecke {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 8px;
}
.rb-stuecke-label, .rb-optional-label { font-size: 12px; font-weight: 600; color: var(--n-700); }
.rb-stueck {
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-xs);
  background: var(--n-050);
  color: var(--n-950);
  font: 400 12px 'Open Sans', Arial, sans-serif;
  cursor: pointer;
}
.rb-stueck:hover { border-color: var(--product-60); background: var(--product-20); }
.rb-optional {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.rb-dazu {
  min-height: 36px;
  padding: 4px 12px;
  border: 1px dashed var(--n-600);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--n-950);
  font: 400 14px 'Open Sans', Arial, sans-serif;
  cursor: pointer;
}
.rb-dazu:hover { border-color: var(--product); background: var(--product-20); }
.rb-fehler { margin: 8px 0 0; font-size: 14px; color: var(--danger-text); }
.rb-fehler:empty { display: none; }
.rb-pruefung {
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(var(--product-rgb),0.06);
  border: 1px solid rgba(var(--product-rgb),0.2);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--hfm-anthrazit);
}
.rb-pruefung p { margin: 0; }
.rb-pruefung strong { color: var(--hfm-analytics-blue); font-variant-numeric: tabular-nums; }
.rb-pruefung .rb-warnung {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-xs);
  background: var(--warning-soft);
  color: var(--warning-text);
}
.rb-warnung strong { color: var(--warning-text); }
.rb-ueber {
  margin: 12px 0 0;
  padding: 8px 12px;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-xs);
}
.rb-ueber legend { font-weight: 600; color: var(--n-950); padding: 0 4px; }
.rb-ueber ul { margin: 4px 0 8px; padding-left: 20px; }
.rb-liste { font-size: 13px; color: var(--n-950); min-width: 220px; }

/* --- SORTIERBARE SPALTEN --- */
th.sortable {
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease;
  white-space: nowrap;
}

th.sortable:hover {
  color: var(--hfm-analytics-blue);
}

th.sortable.sort-active {
  color: var(--hfm-analytics-blue);
}

.sort-icon {
  font-size: 9px;
  vertical-align: middle;
}

/* --- ZEILEN-INTERAKTION --- */
#table-transaktionen tbody tr[data-id] {
  cursor: pointer;
}

#table-transaktionen tbody tr[data-id]:hover {
  background: rgba(var(--product-rgb),0.04);
}

#table-transaktionen tbody tr.row-active,
#table-transaktionen tbody tr.row-active:hover {
  background: rgba(var(--product-rgb),0.08);
}

#table-transaktionen tbody tr.row-focused {
  outline: 2px solid rgba(var(--product-rgb),0.5);
  outline-offset: -2px;
}

#table-transaktionen td.th-check,
#table-transaktionen th.th-check {
  cursor: default;
}

#table-transaktionen.lasso-dragging {
  user-select: none;
  -webkit-user-select: none;
}

/* --- KONTEXT-MENÜ --- */
.context-menu {
  position: fixed;
  z-index: 8000;
  min-width: 200px;
  padding: 6px;
  background: var(--hfm-white);
  border: 1px solid var(--n-200);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  animation: contextIn 0.12s ease;
}

@keyframes contextIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.context-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  border-radius: 8px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: var(--hfm-anthrazit-dark);
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
}

.context-item:hover {
  background: rgba(var(--product-rgb),0.08);
  color: var(--hfm-analytics-blue);
}

.context-item-disabled,
.context-item-disabled:hover {
  color: var(--hfm-anthrazit-light);
  background: none;
  cursor: not-allowed;
}

.context-sep {
  height: 1px;
  margin: 5px 8px;
  background: rgba(0,0,0,0.07);
}

/* --- DETAIL-MODAL --- */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 24px;
}

.detail-row {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.detail-row dt {
  font-size: 12px;
  font-weight: 600;
  color: var(--hfm-anthrazit-mid);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.detail-row dd {
  font-size: 14px;
  color: var(--hfm-anthrazit-dark);
  margin: 0;
  word-break: break-word;
}

/* --- LASSO --- */
#lasso {
  position: fixed;
  z-index: 9999;
  border: 2px solid var(--hfm-analytics-blue);
  background: rgba(var(--product-rgb),0.08);
  border-radius: 4px;
  pointer-events: none;
}

/* --- BULK-BAR FLASH --- */
.bulk-bar-flash {
  animation: bulkFlash 0.6s ease;
}

@keyframes bulkFlash {
  0%, 100% { box-shadow: 0 -4px 24px rgba(0,0,0,0.08); }
  35% { box-shadow: 0 -4px 32px rgba(var(--product-rgb),0.45); border-top-color: var(--hfm-analytics-blue); }
}

/* --- LIVE-FILTER --- */
.form-input.filter-active {
  border: 1px solid var(--hfm-analytics-blue);
}

.spinner-wrap {
  display: flex;
  justify-content: center;
  padding: 8px 0;
}

.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(var(--product-rgb),0.2);
  border-top-color: var(--hfm-analytics-blue);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* --- BETRIEBSZWEIG-CARDS --- */
.bz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}

.bz-card {
  position: relative;
  padding: 14px 16px;
  border: 1px solid var(--n-200);
  border-radius: 14px;
  background: var(--hfm-white);
  cursor: pointer;
  transition: var(--transition);
}

.bz-card:hover {
  border-color: rgba(var(--product-rgb),0.30);
}

.bz-card.bz-aktiv {
  border: 2px solid var(--product);
  background: var(--product-20);
  padding: 13px 15px; /* Ausgleich für dickeren Rahmen */
}

.bz-card.bz-fixed {
  cursor: default;
}

.bz-card-name {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--hfm-anthrazit-dark);
  margin-bottom: 2px;
  padding-right: 40px;
}

.bz-card-meta {
  font-size: 12px;
  color: var(--hfm-anthrazit-mid);
}

.bz-toggle {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 19px;
  border-radius: 10px;
  background: var(--hfm-anthrazit-pale);
  transition: var(--transition);
}

.bz-toggle.on {
  background: var(--hfm-analytics-blue);
}

.bz-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: var(--transition);
}

.bz-toggle.on .bz-toggle-knob {
  left: 17px;
}

/* --- ADMIN-KATEGORIEN-TABELLE --- */
tr.kat-inaktiv td {
  opacity: 0.45;
}

.kat-custom-name {
  cursor: pointer;
  min-width: 140px;
}

.kat-custom-name:hover {
  color: var(--hfm-analytics-blue);
}

.inline-edit {
  padding: 4px 8px;
  font-size: 12px;
  width: 100%;
}

/* --- CHART-TYP-UMSCHALTER --- */
.chart-type-toggle {
  display: flex;
  gap: 3px;
}

.icon-toggle {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hfm-anthrazit-pale);
  border-radius: 7px;
  background: var(--hfm-white);
  color: var(--hfm-anthrazit-mid);
  cursor: pointer;
  transition: var(--transition);
}

.icon-toggle svg { width: 14px; height: 14px; }

.icon-toggle:hover {
  border-color: var(--hfm-analytics-blue);
  color: var(--hfm-analytics-blue);
}

.icon-toggle.active {
  background: rgba(var(--product-rgb),0.15);
  border-color: rgba(var(--product-rgb),0.3);
  color: var(--hfm-analytics-blue);
}

.chart-table {
  height: 100%;
  overflow-y: auto;
}

.kat-balken {
  height: 10px;
  border-radius: 5px;
  min-width: 3px;
  opacity: 0.8;
}

/* --- PIVOT-TABELLE --- */
.pivot-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.pivot-scroll {
  overflow-x: auto;
  max-height: 75vh;
  overflow-y: auto;
}

/* Auswertungs-Seite: Tabelle füllt die Höhe, eigener Scrollbereich */
.auswertung-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.auswertung-toolbar .auswertung-export { margin-left: auto; }
.auswertung-scroll { max-height: calc(100vh - 140px); }

.pivot-table {
  font-size: 12px;
  white-space: nowrap;
}

.pivot-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #e9ebf0;
}

.pivot-name-col {
  min-width: 240px;
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--hfm-white);
}

.pivot-table thead .pivot-name-col { z-index: 4; background: #e9ebf0; }

.pivot-gesamt-col,
td[data-gesamt] {
  font-weight: 700 !important;
  border-left: 2px solid rgba(var(--product-rgb),0.20) !important;
  background-color: rgba(var(--product-rgb),0.03);
}

/* Aktueller Monat: ganze Spalte (Datenzellen) leicht blau hinterlegen */
.pivot-table tbody td.pivot-zelle-aktuell {
  background-color: rgba(var(--product-rgb),0.04);
}
html.dark .pivot-table tbody td.pivot-zelle-aktuell {
  background-color: rgba(var(--product-rgb),0.10);
}

/* Plan/Ist-Toggle-Button */
#btn-pivot-plan.btn-plan-aktiv {
  background: var(--product) !important;
  color: var(--hfm-white) !important;
  border-color: var(--product) !important;
}
html.dark #btn-pivot-plan.btn-plan-aktiv { color: #141d33 !important; }
#btn-pivot-plan.btn-plan-leer {
  opacity: 0.5;
}

/* Plan/Ist: Badges in der Bezeichnungsspalte */
.pivot-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 1px 5px;
  border-radius: 3px;
  vertical-align: middle;
}
.pivot-badge-ist  { background: rgba(104,104,104,0.10); color: var(--hfm-ist); border-radius: 4px; }
.pivot-badge-plan { background: rgba(var(--product-rgb),0.10); color: var(--hfm-plan); }
.pivot-badge-abw  { background: transparent; color: #b2b2b2; }

/* Plan/Ist: IST-Hauptzeile, Plan- und Abweichungszeilen (kompakte Hierarchie) */
.pivot-table tbody tr.pivot-ist-row > td { font-size: 14px; }
.pivot-table tbody tr.pivot-plan-row > td {
  background-color: rgba(var(--product-rgb),0.05);
  font-size: 14px;
  color: var(--hfm-plan-text);
  font-weight: 500;
}
.pivot-table tbody tr.pivot-abw-row > td {
  background-color: transparent;
  font-size: 12px;
  border-bottom: 2px solid rgba(0,0,0,0.04);
  padding-bottom: 5px;           /* Gruppenabstand nach jeder ABW-Zeile */
}
html.dark .pivot-table tbody tr.pivot-plan-row > td { background-color: rgba(var(--product-rgb),0.06); }
html.dark .pivot-badge-ist  { background: rgba(var(--d-linie-rgb),0.10); color: var(--n-400); }

/* Plan/Ist: Betriebszweig-Gesamtzeilen (IST/PLAN/ABW) hervorgehoben + fett */
.pivot-table tbody tr.pivot-grp-bz > td {
  background-color: rgba(var(--product-rgb),0.04);
  font-weight: 600;
}

/* Ampel als farbiger Punkt (Corporate-Farben) */
.pivot-ampel-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
}

/* Spalten-Streifen der alten Pivot-Tabelle entfallen seit 2026-09-30 (Neuaufbau
   .aw-tabelle: nur der aktuelle Monat ist hinterlegt, wie im Betreiber-Entwurf). */

tr.pivot-bz {
  cursor: pointer;
  font-weight: 600;
}

tr.pivot-bz td {
  background: rgba(var(--product-rgb),0.04);
  border-top: 1px solid rgba(var(--product-rgb),0.15);
  padding-top: 8px;
}

tr.pivot-bz .pivot-name-col {
  background: #e9ebf0;
}

/* "Ohne Betriebszweig": dezent rötlich, zurückgenommene Schrift */
tr.pivot-ohne-bz td {
  background: rgba(var(--danger-rgb),0.03);
  color: #686868;
}

tr.pivot-ohne-bz .pivot-name-col { background: #f6eeee; }

html.dark tr.pivot-ohne-bz td {
  background: rgba(var(--danger-rgb),0.05);
  color: #a0a0a0;
}

tr.pivot-hk {
  cursor: pointer;
  font-weight: 500;
}

tr.pivot-hk td {
  background: rgba(0,0,0,0.02);
  color: var(--hfm-anthrazit-dark);
}

tr.pivot-uk td {
  background: transparent;
  font-weight: 400;
  color: var(--n-950);
}

html.dark tr.pivot-uk td { color: #c0c0c0; }

.pivot-chevron {
  display: inline-block;
  width: 14px;
  color: var(--hfm-analytics-blue);
  font-size: 12px;
}

.pivot-leer {
  color: var(--hfm-anthrazit-light);
}

/* --- PIVOT: PROGNOSE --- */
.pivot-prog {
  background: rgba(135,135,135,0.06);
  font-style: italic;
}

.pivot-prog.prog-amber { background: rgba(var(--warning-rgb),0.06); }
.pivot-prog.prog-rot { background: rgba(var(--danger-rgb),0.06); }

/* Prognose-Textfarbe (kontraststark, theme-abhängig) */
.pivot-prog.prog-pos { color: var(--hfm-prog-pos); }
.pivot-prog.prog-neg { color: var(--hfm-prog-neg); }

.pivot-prog-first {
  border-left: 2px dashed rgba(var(--product-rgb),0.5) !important;
}

.pivot-prog-header {
  font-style: italic;
  color: var(--hfm-anthrazit-mid) !important;
  text-transform: none !important;
}

.heute-label {
  color: var(--hfm-analytics-blue);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}

/* --- PIVOT: LIQUIDITÄT --- */
.pivot-liq {
  border-left: 2px solid rgba(var(--product-rgb),0.2) !important;
  font-weight: 700;
}

th.pivot-liq-header {
  color: var(--hfm-analytics-blue) !important;
  font-weight: 700;
}

.pivot-ampel {
  text-align: center;
  font-size: 14px;
  width: 36px;
}

/* --- PIVOT: BEMERKUNGEN --- */
.pivot-bem-col,
.pivot-bem-col-header {
  min-width: 130px;
  max-width: 220px;
}

.pivot-bem-col {
  cursor: pointer;
  white-space: normal;
}

.bem-add {
  width: 20px;
  height: 20px;
  border: 1px dashed var(--hfm-anthrazit-light);
  border-radius: 6px;
  background: none;
  color: var(--hfm-anthrazit-light);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition);
  opacity: 0.4;
}

tr:hover .bem-add { opacity: 1; }

.bem-add:hover {
  border-color: var(--hfm-analytics-blue);
  color: var(--hfm-analytics-blue);
}

.bem-text {
  font-size: 12px;
  font-style: italic;
  color: var(--warning-text);
}

.bem-eye {
  border: none;
  background: none;
  color: var(--hfm-anthrazit-mid);
  cursor: pointer;
  padding: 1px 3px;
  vertical-align: middle;
  border-radius: 4px;
  transition: var(--transition);
}

.bem-eye:hover { color: var(--hfm-analytics-blue); background: rgba(var(--product-rgb),0.08); }

/* Zeitraum-Markierung */
td.bem-mark {
  background: rgba(var(--warning-rgb),0.08) !important;
  border-top: 2px solid rgba(var(--warning-rgb),0.25);
}

td.bem-mark-start { border-left: 2px solid rgba(var(--warning-rgb),0.40); }
td.bem-mark-ende { border-right: 2px solid rgba(var(--warning-rgb),0.40); }

/* Popover */
.bem-popover {
  position: fixed;
  z-index: 8500;
  width: 320px;
  padding: 14px;
  background: var(--hfm-white);
  border: 1px solid var(--n-200);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  animation: contextIn 0.12s ease;
}

.bem-pop-titel {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--hfm-anthrazit-dark);
  margin-bottom: 10px;
}

.bem-popover textarea {
  width: 100%;
  resize: vertical;
  margin-bottom: 10px;
}

.bem-form-daten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.bem-form-aktionen {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.bem-eintrag {
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.bem-eintrag-text {
  font-size: 12px;
  color: var(--hfm-anthrazit-dark);
  margin-bottom: 3px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bem-eintrag-zeit {
  font-size: 12px;
  color: var(--warning-text);
  margin-bottom: 4px;
}

.bem-eintrag-aktionen {
  display: flex;
  gap: 6px;
}

/* Kommentar-Icon in Monatszellen */
td.pivot-zelle {
  position: relative;
}

/* --- PIVOT-KONTEXTMENÜ (Rechtsklick) --- */
.pivot-kontext {
  position: fixed;
  z-index: 9999;
  min-width: 240px;
  padding: 6px;
  background: var(--hfm-white);
  border: 1px solid var(--n-200);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14);
  animation: contextIn 0.12s ease;
}

.pivot-kontext-info {
  background: rgba(var(--product-rgb),0.04);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 4px;
}

.pivot-kontext-info-titel {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--hfm-anthrazit-dark);
}

.pivot-kontext-info-betrag {
  font-size: 14px;
  color: var(--hfm-anthrazit-mid);
  margin-top: 2px;
}

.pivot-kontext-sep {
  border-top: 1px solid rgba(0,0,0,0.06);
  margin: 4px 6px;
}

.pivot-kontext-item {
  display: block;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: none;
  border-radius: 8px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: var(--hfm-anthrazit-dark);
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
}

.pivot-kontext-item:hover {
  background: rgba(var(--product-rgb),0.08);
  color: var(--hfm-analytics-blue);
}

.zell-bem-icon {
  position: absolute;
  top: 1px;
  right: 2px;
  color: var(--hfm-analytics-blue);
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: flex-start;
}

.zell-bem-anzahl {
  font-size: 9px;
  font-weight: 700;
  font-style: normal;
  margin-left: 1px;
  color: var(--hfm-analytics-blue);
}

/* Klickbare Monats-Header */
th.pivot-monat-header {
  cursor: pointer;
  transition: color 0.15s ease;
  border-right: 1px solid rgba(0,0,0,0.06);
}

th.pivot-monat-header:hover {
  color: var(--hfm-analytics-blue) !important;
}

/* Aktueller Monat im Header hervorheben */
.pivot-table thead th.pivot-monat-aktuell {
  background: rgba(var(--product-rgb),0.06);
  background-color: #dfe2ea; /* sticky Header braucht deckende Farbe */
  font-weight: 700;
  color: var(--hfm-analytics-blue) !important;
}

html.dark .pivot-table thead th.pivot-monat-aktuell {
  background-color: #2b3145 !important;
}

/* --- PIVOT: GESAMTLIQUIDITÄT --- */
tr.pivot-gesamtliq td {
  background: rgba(var(--product-rgb),0.08);
  border-top: 2px solid var(--hfm-analytics-blue);
}

tr.pivot-gesamtliq .pivot-name-col {
  background: #d6dae4;
}

.pivot-gesamtliq-label {
  color: var(--hfm-analytics-blue) !important;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* --- GLOBALE TOPBAR (Wetter entfernt 2026-10-06) --- */
.global-topbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
  min-height: 34px;
}

/* --- PIVOT: KONTOSTAND-ZEILE (unter Gesamtliquidität) --- */
tr.pivot-kontostand td {
  background: rgba(var(--success-rgb),0.05);
  border-top: 2px solid rgba(var(--success-rgb),0.25);
  font-size: 12px;
}

tr.pivot-kontostand .pivot-name-col,
.pivot-kontostand-label {
  background: #e7f4ec;
  font-weight: 700;
}

.pivot-ks-limit {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--danger-text);
}

html.dark tr.pivot-kontostand td { background: rgba(var(--success-rgb),0.07); }
html.dark tr.pivot-kontostand,
html.dark tr.pivot-kontostand:hover { background: rgba(var(--success-rgb),0.07) !important; }
html.dark tr.pivot-kontostand .pivot-name-col { background: #16332a !important; }

/* --- KONTO-MODAL: Hinweistexte --- */
.form-hint {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--hfm-anthrazit-mid);
}

/* --- LETZTER IMPORT (Transaktionen-Untertitel) --- */
.trans-subtitle-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
  margin-right: 16px;
}

.trans-subtitle-row .page-subtitle { margin-top: 0; }

.trans-letzter-import {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  color: var(--hfm-anthrazit-mid);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

/* --- REGELN: PRIORITÄTS-BADGES --- */
.badge.prio-hoch { background: var(--product); color: var(--hfm-white); }
html.dark .badge.prio-hoch { color: #141d33; }
.badge.prio-mittel { background: var(--product-20); color: var(--product); }
.badge.prio-niedrig { background: var(--n-200); color: var(--n-700); }

/* --- PROGNOSE: LIQUIDITÄTSBANNER --- */
.prognose-banner {
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 14px;
  margin-bottom: 20px;
}

.prognose-banner-rot {
  background: rgba(var(--danger-rgb),0.08);
  border: 1px solid rgba(var(--danger-rgb),0.20);
  color: var(--danger-text);
}

.prognose-banner-gelb {
  background: rgba(var(--warning-rgb),0.08);
  border: 1px solid rgba(var(--warning-rgb),0.20);
  color: var(--warning-text);
}

/* --- PROGNOSE: BETRIEBSZWEIG-KARTEN --- */
.bz-prog-karte {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
}

.bz-prog-kopf {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.bz-prog-kopf:hover { background: rgba(var(--product-rgb),0.04); }

.bz-prog-titel {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--hfm-anthrazit-dark);
  min-width: 160px;
}

.bz-prog-saldo { font-weight: 600; font-size: 14px; flex: 1; }
.bz-prog-ampel { font-size: 12px; color: var(--hfm-anthrazit-mid); }

.bz-prog-koerper {
  border-top: 1px solid rgba(0,0,0,0.06);
  padding: 12px 16px;
}

.bz-prog-monat {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 5px 0;
  font-size: 14px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.bz-prog-monat-name { font-weight: 600; min-width: 56px; }
.bz-prog-konf { font-size: 12px; font-weight: 600; }

.bz-prog-tops {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  padding-top: 10px;
  font-size: 14px;
  color: var(--hfm-anthrazit);
}

html.dark .bz-prog-karte { border-color: rgba(var(--d-linie-rgb),0.08); }
html.dark .bz-prog-koerper { border-top-color: rgba(var(--d-linie-rgb),0.06); }

/* --- SZENARIO-SIMULATOR --- */
.sim-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.sim-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--product-60);
  background: rgba(var(--product-rgb),0.06);
  color: var(--hfm-analytics-blue);
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.sim-chip:hover { background: rgba(var(--product-rgb),0.14); }
.sim-chip-neu { border-style: dashed; }

.sim-chip-x {
  font-size: 14px;
  opacity: 0.6;
  padding: 0 2px;
}

.sim-chip-x:hover { opacity: 1; color: var(--danger-text); }

.sim-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

@media (max-width: 1100px) { .sim-grid { grid-template-columns: repeat(2, 1fr); } }

.sim-slider-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.sim-slider-kopf label {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: var(--hfm-anthrazit-dark);
  font-weight: 600;
}

.sim-badge {
  padding: 2px 9px;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: 700;
  background: var(--hfm-anthrazit-pale);
  color: var(--hfm-anthrazit-mid);
}

.sim-badge-pos { background: var(--success-soft); color: var(--wert-pos); }
.sim-badge-neg { background: var(--danger-soft); color: var(--wert-neg); }

.sim-slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, #e9e9e9 50%, #e9e9e9 50%);
  outline: none;
  cursor: pointer;
}

.sim-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--hfm-analytics-blue);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  cursor: pointer;
}

.sim-spalten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 16px;
}

.sim-basis { opacity: 0.65; }

.sim-zeile {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 14px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.sim-zeile-saldo {
  font-weight: 700;
  border-bottom: none;
}

.sim-delta {
  padding: 16px;
  border-radius: 12px;
  font-size: 15px;
  text-align: center;
  background: rgba(0,0,0,0.03);
}

.sim-delta-rot {
  background: rgba(var(--danger-rgb),0.08);
  border: 1px solid rgba(var(--danger-rgb),0.20);
  color: var(--danger-text);
}

.sim-delta-blau {
  background: var(--success-soft);
  border: 1px solid var(--success-text);
  color: var(--success-text);
}

html.dark .sim-slider input[type="range"]::-webkit-slider-thumb { background: var(--d-erhoben); }
html.dark .sim-zeile { border-bottom-color: rgba(var(--d-linie-rgb),0.06); }

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .charts-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   DARK MODE
   ============================================================ */

body { transition: color 0.3s ease; }
body::before { transition: background 0.3s ease; }

/* Mode-Toggle-Button */
.mode-toggle {
  width: 34px;
  height: 34px;
  margin-left: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hfm-white);
  border: 1px solid var(--n-200);
  border-radius: 50%;
  color: var(--hfm-anthrazit);
  cursor: pointer;
  transition: all 0.2s ease;
}

.mode-toggle:hover {
  color: var(--product);
  border-color: var(--product-60);
}

.global-topbar { align-items: center; }


/* --- Variablen-Redefinition (dunkle Ableitung des Regelwerks 0.2;
   das Regelwerk definiert nur das helle Theme – die dunklen Werte sind
   eine dokumentierte Ableitung mit denselben Rollen) --- */
html.dark {
  /* Nachtblaues Dunkel (Betreiber 2026-10-15): die dunklen Flächen tragen einen
     leichten Blaustich aus der Produktfarbe, damit die konstante Navy-Seitenleiste
     (#1d2846) als oberste Ebene derselben Welt wirkt statt neben reinem Grau. */
  --d-seite: #10141d;     /* Seitengrund */
  --d-tief: #131824;      /* tiefer als Karte (Kopfzeilen, Mulden) */
  --d-karte: #171c28;     /* Karten */
  --d-flaeche: #1a2030;   /* Glas/Popover/Felder */
  --d-erhoben: #1f2637;   /* erhoben, Tabellenkopf */
  --d-hover: #252d40;     /* Hover/aktiv */
  --d-linie-rgb: 196, 206, 232;   /* Linien/Schleier: leicht blaues Weiß */
  --d-schatten-rgb: 8, 11, 18;

  /* Neutrale Rollen, invertiert */
  --n-950: #e8e8e8;
  --n-700: #c0c0c0;
  --n-600: #a0a0a0;
  --n-400: #686868;
  --n-200: rgba(var(--d-linie-rgb),0.10);
  --n-100: var(--d-seite);
  --n-050: var(--d-karte);

  /* Produktfarbe: aufgehelltes HfM-Dunkelblau für dunklen Grund */
  --product: #93a6d3;
  --product-rgb: 147, 166, 211;
  --product-hover: #a9b8dd;

  /* Statusfarben-Text: heller für Kontrast auf dunklem Grund */
  --success-text: #4caf7d;
  --warning-text: #e0a85a;
  --danger-text: #ff6b73;
  --success-soft: rgba(23,114,69,0.20);
  --warning-soft: rgba(138,75,8,0.25);
  --danger-soft: rgba(180,35,24,0.22);
  --info-soft: rgba(23,92,211,0.20);

  --wert-pos: var(--success-text);
  --wert-neg: var(--danger-text);

  --hfm-anthrazit: var(--n-700);
  --hfm-anthrazit-dark: var(--n-950);
  --hfm-anthrazit-mid: var(--n-600);
  --hfm-anthrazit-light: var(--n-400);
  --hfm-anthrazit-pale: var(--n-200);
  --hfm-plan-text: var(--product);
  --hfm-prog-pos: var(--success-text);
  --hfm-prog-neg: var(--danger-text);
  --shadow-card: none;
  --shadow-card-hover: none;
  --shadow-pop: 0 18px 45px rgba(0,0,0,0.50);
  --glass-bg: var(--d-flaeche);
  --glass-border: 1px solid rgba(var(--d-linie-rgb),0.08);
}

html.dark { background: var(--d-seite); }

html.dark body {
  color: #e8e8e8;
  background: var(--d-seite);
}

/* Sidebar: bleibt im Dark Mode identisch (konstante dunkle Leiste,
   CRM-Familienmuster) — keine Overrides nötig */

/* Page Header: offen auf der Seitenfläche — kein Dark-Override nötig */

/* Cards */
html.dark .card {
  background: var(--d-karte);
  border: 1px solid rgba(var(--d-linie-rgb),0.07);
}

html.dark .kpi-card {
  background: var(--d-flaeche);
  border: 1px solid rgba(var(--d-linie-rgb),0.08);
}

html.dark .kpi-card:hover {
  border-color: var(--product-60);
}

html.dark .kpi-card.kpi-accent { background: rgba(var(--product-rgb),0.10); }

/* Tabellen */
html.dark .data-table thead th {
  background: rgba(var(--product-rgb),0.06);
  color: #a0a0a0;
  border-bottom-color: rgba(var(--d-linie-rgb),0.06);
}

html.dark .data-table tbody td { border-bottom-color: rgba(var(--d-linie-rgb),0.04); }
html.dark .data-table tbody tr:hover { background: rgba(var(--product-rgb),0.06); }

/* Inputs & Dropdowns */
html.dark .form-input {
  background: var(--d-erhoben);
  border: 1px solid rgba(var(--d-linie-rgb),0.10);
  color: #e8e8e8;
}

html.dark .form-input:focus { border-color: var(--product); }
/* Feldfehler auch im Dunkelmodus am Rahmen sichtbar (E-03, 2026-10-15) */
html.dark .form-input[aria-invalid="true"] { border-color: var(--danger-text); }
html.dark select.form-input:disabled, html.dark input.form-input:disabled { background: rgba(var(--d-linie-rgb),0.06); color: #686868; }
html.dark .form-input::placeholder { color: #686868; }

/* Buttons: gefüllte Produktfarbe ist im Dark Mode hell -> dunkle Schrift */
html.dark .btn-primary,
html.dark .toggle-btn.active,
html.dark .pagination button.active,
html.dark .pagination button:hover {
  color: #141d33;
}

html.dark .btn-secondary {
  background: var(--d-hover);
  border: 1px solid rgba(var(--d-linie-rgb),0.10);
  color: #e8e8e8;
}

html.dark .btn-secondary:hover {
  background: var(--d-hover);
  border-color: rgba(var(--product-rgb),0.30);
}

/* B-06 im Dark Mode: schlägt html.dark .btn-primary/.btn-secondary */
html.dark .btn:disabled,
html.dark .btn:disabled:hover {
  background: var(--n-200);
  border-color: transparent;
  color: var(--n-600);
}

html.dark .btn-icon { border-color: rgba(var(--d-linie-rgb),0.12); color: #a0a0a0; }
html.dark .icon-toggle,
html.dark .toggle-btn,
html.dark .pagination button {
  background: var(--d-hover);
  border-color: rgba(var(--d-linie-rgb),0.10);
  color: #a0a0a0;
}

html.dark .toggle-btn.active,
html.dark .pagination button.active,
html.dark .pagination button:hover {
  background: var(--product);
  border-color: var(--product);
  color: #141d33;
}

html.dark .icon-toggle.active {
  background: rgba(var(--product-rgb),0.20);
  border-color: rgba(var(--product-rgb),0.35);
  color: var(--product);
}

/* Badges */
html.dark .badge-blue, html.dark .badge-green { background: rgba(var(--product-rgb),0.15); }
html.dark .badge-offen, html.dark .badge-red { background: rgba(var(--danger-rgb),0.15); }
html.dark .badge-gray { background: rgba(var(--d-linie-rgb),0.10); color: #c0c0c0; }
html.dark .badge-eigen, html.dark .badge-orange { background: rgba(var(--warning-rgb),0.18); }

/* Filter-Leiste */
html.dark .filter-card {
  background: var(--d-flaeche);
  border: 1px solid rgba(var(--d-linie-rgb),0.08);
}

/* Modals */
html.dark .modal-backdrop { background: rgba(0,0,0,0.60); }

html.dark .modal {
  background: var(--d-flaeche);
  border: 1px solid rgba(var(--d-linie-rgb),0.08);
  box-shadow: 0 24px 64px rgba(0,0,0,0.50);
}

html.dark .modal-header, html.dark .modal-footer { border-color: rgba(var(--d-linie-rgb),0.07); }

/* Kontextmenüs & Popovers */
html.dark .context-menu,
html.dark .pivot-kontext,
html.dark .bem-popover {
  background: var(--d-flaeche);
  border: 1px solid rgba(var(--d-linie-rgb),0.10);
  box-shadow: 0 8px 32px rgba(0,0,0,0.50);
}

html.dark .context-item, html.dark .pivot-kontext-item { color: #e8e8e8; }
html.dark .pivot-kontext-info { background: rgba(var(--product-rgb),0.08); }

html.dark .mode-toggle {
  background: var(--d-flaeche);
  border: 1px solid rgba(var(--d-linie-rgb),0.08);
}

/* Admin: Pill-Tabs haben eigene Dark-Regeln bei der Basisdefinition */

html.dark .admin-stat-card {
  background: var(--d-flaeche);
  border: 1px solid rgba(var(--d-linie-rgb),0.07);
}

html.dark .bz-card {
  background: var(--d-flaeche);
  border: 1px solid rgba(var(--d-linie-rgb),0.07);
}

html.dark .bz-card.bz-aktiv {
  border: 2px solid var(--product);
  background: rgba(var(--product-rgb),0.08);
}

html.dark .bz-toggle { background: rgba(var(--d-linie-rgb),0.12); }
html.dark .bz-toggle.on { background: var(--hfm-analytics-blue); }
html.dark .admin-file-info { background: var(--d-erhoben); border-color: rgba(var(--d-linie-rgb),0.08); }
html.dark .loesch-warnung { background: rgba(var(--d-linie-rgb),0.05); }

/* Dropzones */
html.dark .dropzone { background: var(--d-erhoben); border-color: rgba(var(--d-linie-rgb),0.15); }
html.dark .dropzone-blue { border-color: rgba(var(--product-rgb),0.5); }

/* Pivot: sticky Spalten und Sonderzeilen */
html.dark .pivot-table thead th { background: #252a3a; }
html.dark .pivot-table thead .pivot-name-col { background: #252a3a; }
html.dark .pivot-name-col { background: var(--d-karte); }
html.dark tr.pivot-bz td { background: rgba(var(--product-rgb),0.07); }
html.dark tr.pivot-bz .pivot-name-col { background: #252a3a; }
html.dark tr.pivot-gesamtliq td { background: rgba(var(--product-rgb),0.10); }
html.dark tr.pivot-gesamtliq .pivot-name-col { background: #2b3145; }
html.dark .pivot-prog { background: rgba(var(--d-linie-rgb),0.04); }
html.dark .rb-pruefung { background: rgba(var(--product-rgb),0.10); border-color: rgba(var(--product-rgb),0.25); }

/* Bulk-Leiste */
html.dark .bulk-bar {
  background: var(--d-tief);
  border-top: 1px solid rgba(var(--product-rgb),0.25);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.40);
}

/* Detail-Modal & Sonstiges */
html.dark .detail-row { border-bottom-color: rgba(var(--d-linie-rgb),0.06); }
html.dark .result-item { background: rgba(var(--d-linie-rgb),0.04); }
html.dark .kat-inaktiv td { opacity: 0.4; }
html.dark .inline-edit { background: var(--d-hover); }
html.dark .konfidenz-bar { background: rgba(var(--d-linie-rgb),0.10); }

/* Scrollbalken */
html.dark ::-webkit-scrollbar-thumb { background: rgba(var(--d-linie-rgb),0.10); }
html.dark ::-webkit-scrollbar-thumb:hover { background: rgba(var(--product-rgb),0.40); }

/* ------------------------------------------------------------
   Dark Mode: defensive Überschreibungen gegen hardcodierte
   Farben (Tabellen-Zeilen, Inline-Styles, Sticky-Spalten)
   ------------------------------------------------------------ */

/* Tabellen-Zeilen: nie zurück auf hell kippen */
html.dark table tbody tr {
  background: transparent !important;
  color: #e8e8e8 !important;
}

html.dark table tbody tr:nth-child(even) {
  background: rgba(var(--d-linie-rgb),0.02) !important;
}

html.dark table tbody tr:hover {
  background: rgba(var(--product-rgb),0.06) !important;
}

/* Auswahl-/Aktiv-Zustände müssen über den Zebra-Regeln liegen */
html.dark table tbody tr.row-selected,
html.dark table tbody tr.row-selected:hover {
  background: rgba(var(--product-rgb),0.12) !important;
}

html.dark table tbody tr.row-active,
html.dark table tbody tr.row-active:hover {
  background: rgba(var(--product-rgb),0.10) !important;
}

/* Pivot-Sonderzeilen wieder über die generischen Zeilen-Regeln heben */
html.dark tr.pivot-bz,
html.dark tr.pivot-bz:hover { background: rgba(var(--product-rgb),0.07) !important; }
html.dark tr.pivot-gesamtliq,
html.dark tr.pivot-gesamtliq:hover { background: rgba(var(--product-rgb),0.10) !important; }

/* Hardcodierte weiße Hintergründe in Inline-Styles */
html.dark [style*="background: white"],
html.dark [style*="background: #fff"],
html.dark [style*="background: #ffffff"],
html.dark [style*="background-color: white"],
html.dark [style*="background-color: #fff"] {
  background: var(--d-flaeche) !important;
}

/* Hardcodierte dunkle Textfarben in Inline-Styles */
html.dark [style*="color: #2D2D2D"],
html.dark [style*="color: #333"],
html.dark [style*="color: black"] {
  color: #e8e8e8 !important;
}

/* Zebra-Streifen deaktivieren */
html.dark .table-striped tbody tr:nth-child(odd) {
  background: transparent !important;
}

/* Sticky/Fixed Elemente: deckender dunkler Hintergrund */
html.dark .sticky-col,
html.dark th[style*="position: sticky"],
html.dark td[style*="position: sticky"] {
  background: var(--d-tief) !important;
}

html.dark .pivot-name-col { background: var(--d-tief) !important; }
html.dark .pivot-table thead th,
html.dark .pivot-table thead .pivot-name-col { background: #252a3a !important; }
html.dark tr.pivot-bz .pivot-name-col { background: #252a3a !important; }
html.dark tr.pivot-gesamtliq .pivot-name-col { background: #2b3145 !important; }

/* Pagination */
html.dark .pagination button,
html.dark .page-btn {
  background: var(--d-erhoben) !important;
  color: #e8e8e8 !important;
  border-color: rgba(var(--d-linie-rgb),0.08) !important;
}

html.dark .pagination button.active,
html.dark .pagination button:hover {
  background: var(--product) !important;
  border-color: var(--product) !important;
  color: #141d33 !important;
}

/* Scrollbar-Track */
html.dark ::-webkit-scrollbar-track {
  background: rgba(var(--d-schatten-rgb),0.50) !important;
}

/* ============================================================
   Betrieb-Switcher (Sidebar) & Betriebe-Verwaltung
   ============================================================ */

.betrieb-switcher-wrap {
  position: relative;
  margin: 4px 14px 14px;
}

.betrieb-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: var(--hfm-white);
  border: 1px solid rgba(var(--product-rgb),0.15);
  border-radius: 12px;
  padding: 8px 12px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--n-950);
  cursor: pointer;
  transition: border-color 0.15s ease;
  text-align: left;
}

.betrieb-switcher:hover {
  border-color: var(--product);
}

.betrieb-switcher-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.betrieb-switcher-chevron {
  color: var(--hfm-anthrazit-mid);
  font-size: 12px;
}

.betrieb-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: -40px;
  min-width: 230px;
  background: var(--hfm-white);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  border: 1px solid rgba(var(--product-rgb),0.12);
  padding: 6px;
  z-index: 1000;
}

.betrieb-dropdown-eintrag {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: none;
  border-radius: 8px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: var(--n-950);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease;
}

.betrieb-dropdown-eintrag:hover {
  background: rgba(var(--product-rgb),0.06);
}

.betrieb-dropdown-eintrag.betrieb-alle {
  color: var(--product);
  font-weight: 600;
}

.betrieb-dropdown-eintrag.betrieb-aktiv {
  font-weight: 700;
}

.betrieb-dropdown-radio {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--hfm-anthrazit-light);
  flex-shrink: 0;
  position: relative;
}

.betrieb-dropdown-eintrag.betrieb-aktiv .betrieb-dropdown-radio {
  border-color: var(--product);
}

.betrieb-dropdown-eintrag.betrieb-aktiv .betrieb-dropdown-radio::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--product);
}

.betrieb-dropdown-haken {
  margin-left: auto;
  color: var(--product);
  font-weight: 700;
}

.betrieb-dropdown-sep {
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 4px 8px;
}

.betrieb-dropdown-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dark Mode */
.dark .betrieb-switcher {
  background: #2a2a2a;
  border-color: rgba(var(--product-rgb),0.25);
  color: #e8e8e8;
}

.dark .betrieb-dropdown {
  background: #242424;
  border-color: rgba(255,255,255,0.10);
}

.dark .betrieb-dropdown-eintrag {
  color: #e8e8e8;
}

.dark .betrieb-dropdown-eintrag:hover {
  background: rgba(var(--product-rgb),0.12);
}

.dark .betrieb-dropdown-sep {
  background: rgba(255,255,255,0.10);
}

/* KPI-Badge "N Betriebe" (Konsolidierungsansicht) */
.kpi-betriebe-badge {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--hfm-anthrazit-mid);
  background: rgba(0,0,0,0.05);
  border-radius: 8px;
  padding: 1px 8px;
}

.dark .kpi-betriebe-badge {
  background: rgba(255,255,255,0.08);
  color: #a0a0a0;
}

/* Pivot: Betrieb-Gruppenzeile (Konsolidierung) */
.pivot-betrieb td {
  background: rgba(var(--product-rgb),0.14);
  font-weight: 700;
  cursor: pointer;
}

.dark .pivot-betrieb td {
  background: rgba(var(--product-rgb),0.18);
}

.pivot-konsolidiert-header td {
  background: rgba(var(--product-rgb),0.04);
  font-weight: 600;
  color: var(--product);
  border-top: 1px solid rgba(var(--product-rgb),0.20);
  border-bottom: 1px solid rgba(var(--product-rgb),0.20);
}

/* Legacy-Regeln-Import: Zeilenstatus in der Vorschau */
.legacy-ok td { background: rgba(var(--success-rgb),0.07); }
.legacy-dup td { background: rgba(var(--warning-rgb),0.12); }
.legacy-rot td { background: rgba(var(--danger-rgb),0.08); }

.dark .legacy-ok td { background: rgba(var(--success-rgb),0.12); }
.dark .legacy-dup td { background: rgba(var(--warning-rgb),0.16); }
.dark .legacy-rot td { background: rgba(var(--danger-rgb),0.14); }

/* Regel-Betriebe-Chips (zugewiesen blau, nicht zugewiesen grau) */
.regel-betrieb-chip {
  display: inline-block;
  margin: 1px 3px 1px 0;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.regel-betrieb-chip.chip-aktiv {
  background: rgba(var(--product-rgb),0.10);
  color: var(--product);
}

.regel-betrieb-chip.chip-inaktiv {
  background: rgba(0,0,0,0.05);
  color: var(--hfm-anthrazit-light);
}

.dark .regel-betrieb-chip.chip-inaktiv {
  background: rgba(255,255,255,0.07);
  color: #808080;
}

/* Betrieb-Badge in der Transaktionstabelle */
.trans-betrieb-badge {
  display: inline-block;
  background: rgba(var(--product-rgb),0.06);
  color: #686868;
  border-radius: 6px;
  font-size: 12px;
  padding: 2px 8px;
  white-space: nowrap;
}

.dark .trans-betrieb-badge {
  background: rgba(var(--product-rgb),0.12);
  color: #a0a0a0;
}

/* Auge-Button im Transaktionen-Tabellenkopf */
#th-betrieb .bem-eye {
  vertical-align: middle;
  margin-left: 2px;
}

/* ============================================================
   Betrieb-Kontext: Switcher-Card, Header-Badge, Banner, Streifen
   ============================================================ */

/* Switcher-Card: sitzt in der DUNKLEN Seitenleiste (CRM-Familienmuster),
   deshalb helle Schrift + Weiß-Transparenzen — konstant in beiden Modi */
.betrieb-card {
  display: block;
  width: 100%;
  text-align: left;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 10px 14px;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.betrieb-card:hover {
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.09);
}

.betrieb-card-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 3px;
}

/* Name über die volle Kartenbreite, Umbruch statt „…“, höchstens drei Zeilen
   (2026-09-29: „Sonnenfel…“ war zwischen den Pfeilen nicht lesbar) */
.betrieb-card-name {
  flex: 1;
  min-width: 0;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  color: #ffffff;
  overflow: hidden;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.betrieb-card-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}

.betrieb-card-pfeile {
  display: flex;
  gap: 4px;
  margin-right: -6px;
}

.betrieb-card-chevron {
  color: rgba(255,255,255,0.65);
  flex-shrink: 0;
}

.betrieb-card-meta {
  font-size: 12px;
  color: rgba(255,255,255,0.50);
}

/* Dropdown: Eintrag mit Meta-Zeile */
.betrieb-dropdown-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.betrieb-dropdown-meta {
  font-size: 12px;
  color: var(--hfm-anthrazit-mid);
  font-weight: 400;
}

/* Farbstreifen am linken Sidebar-Rand: ENTFERNT (Betreiber 2026-08-31 —
   wirkte auf der Produktfarb-Leiste als heller Störstreifen). Die Klasse
   .betrieb-streifen wird vom JS weiter gesetzt, bleibt aber ohne Optik. */

/* Betrieb-Badge neben den Seitentiteln */
.betrieb-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  border: 1px solid var(--product-60);
  border-radius: var(--radius-xs);
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

/* Info-Banner "Du siehst Daten für: …" */
.betrieb-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
  padding: 4px 16px;
  margin: -12px 0 20px;
  background: rgba(var(--product-rgb),0.06);
  border-bottom: 1px solid rgba(var(--product-rgb),0.12);
  border-radius: 8px;
  font-size: 12px;
  color: #686868;
}

.betrieb-banner-link {
  color: var(--product);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.betrieb-banner-link:hover {
  text-decoration: underline;
}

.dark .betrieb-banner {
  background: rgba(var(--product-rgb),0.10);
  border-bottom-color: rgba(var(--product-rgb),0.20);
  color: #a0a0a0;
}

/* Betrieb-Switcher: Pfeil-Navigation (auf dunkler Leiste) */
.betrieb-card-pfeil {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: rgba(255,255,255,0.65);
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s ease;
}

.betrieb-card-pfeil:hover {
  background: rgba(255,255,255,0.10);
  color: #ffffff;
}

.betrieb-card-pfeil.pfeil-deaktiviert {
  color: rgba(255,255,255,0.25);
  cursor: not-allowed;
}

.betrieb-card-pfeil.pfeil-deaktiviert:hover {
  background: none;
}

.betrieb-card-mitte {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  margin-top: 4px;
  transition: opacity 150ms ease;
}

.betrieb-card-mitte.betrieb-fade {
  opacity: 0;
}

.dark .betrieb-card-pfeil.pfeil-deaktiviert {
  color: rgba(255,255,255,0.25);
}

/* Prognose: Konsolidierungsansicht */
.bz-prog-gesamt-ampel {
  padding: 10px 14px;
  margin-bottom: 12px;
  background: rgba(var(--product-rgb),0.06);
  border: 1px solid rgba(var(--product-rgb),0.15);
  border-radius: 10px;
  font-size: 14px;
}

.bz-prog-betrieb {
  border: 1.5px solid rgba(var(--product-rgb),0.3);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
}

.bz-prog-betrieb .bz-prog-kopf {
  padding: 10px 14px;
}

.bz-prog-betrieb .bz-prog-koerper {
  padding: 4px 14px 10px;
}

.sim-chip-betrieb {
  font-size: 12px;
  color: var(--hfm-anthrazit-mid);
  font-weight: 400;
}

.dark .bz-prog-gesamt-ampel {
  background: rgba(var(--product-rgb),0.10);
  border-color: rgba(var(--product-rgb),0.25);
}

/* Sidebar-Footer: "Powered by Heute fuer Morgen GmbH" (dunkle Leiste) */
.sidebar-powered {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  cursor: pointer;
}

.sidebar-powered-label {
  font-size: 10px;
  color: rgba(255,255,255,0.32);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 700;
  transition: all 0.2s ease;
}

.sidebar-powered-name {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  transition: all 0.2s ease;
}

.sidebar-powered:hover .sidebar-powered-label,
.sidebar-powered:hover .sidebar-powered-name {
  color: #ffffff;
}

/* ============================================================
   Szenarien & Plan (Prognose-Modus)
   ============================================================ */

.plan-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.plan-helfer {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(var(--product-rgb),0.05);
  border: 1px solid rgba(var(--product-rgb),0.15);
  border-radius: 10px;
}

.plan-helfer-label {
  font-size: 12px;
  font-weight: 600;
  color: #686868;
}

.plan-helfer-trenner {
  width: 1px;
  height: 20px;
  background: rgba(104,104,104,0.25);
  margin: 0 4px;
}

/* Frühere Stände (Versionen vor Befüllen/Anpassen, 2026-09-02) */
.plan-versionen {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(var(--product-rgb),0.15);
  border-radius: 10px;
  font-size: 13px;
}
.plan-versionen-kopf {
  font-weight: 600;
  margin-bottom: 6px;
}
.plan-versionen-leer { color: #686868; }
.plan-version {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding: 6px 0;
  border-top: 1px solid rgba(var(--product-rgb),0.10);
}
.plan-version:first-of-type { border-top: none; }
.plan-version-zeit { font-variant-numeric: tabular-nums; min-width: 128px; }
.plan-version-anlass { flex: 1; }
.plan-version-meta { color: #686868; font-size: 12px; }

/* Hilfe-Modal (eiserne Regel 9; vier feste Fragen wie hilfe.js im Portal) */
.hilfe-rumpf { counter-reset: hilfe-frage; line-height: 1.55; }
.hilfe-rumpf p { margin: 6px 0; }
.hilfe-rumpf ul, .hilfe-rumpf ol { margin: 6px 0; padding-left: 22px; }
.hilfe-rumpf li { margin: 4px 0; }
.hilfe-frage h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin: 16px 0 6px;
}
.hilfe-frage:first-child h3 { margin-top: 4px; }
.hilfe-frage h3::before {
  counter-increment: hilfe-frage;
  content: counter(hilfe-frage);
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--product);
  color: #fff;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hilfe-beispiel {
  background: rgba(var(--product-rgb),0.06);
  border: 1px solid rgba(var(--product-rgb),0.15);
  border-radius: 6px;
  padding: 8px 12px;
  margin: 8px 0;
}
.hilfe-merken {
  background: rgba(var(--product-rgb),0.06);
  border-left: 4px solid var(--product);
  border-radius: 6px;
  padding: 8px 12px;
  margin: 8px 0;
}

/* Tabelle */
#table-plan .plan-row { cursor: pointer; }
#table-plan .plan-row-bz > td { background: rgba(var(--product-rgb),0.06); font-size: 14px; }
#table-plan .plan-row-hk > td { background: rgba(var(--product-rgb),0.02); }
#table-plan .plan-row:hover > td { background: rgba(var(--product-rgb),0.10); }

.plan-edit-hint {
  color: var(--n-400);
  font-size: 12px;
  margin-left: 4px;
}
.plan-row-uk:hover .plan-edit-hint { color: var(--product); }

.plan-editor-row > td { background: rgba(var(--product-rgb),0.03); padding: 10px 14px; }

.plan-monate {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}

.plan-monat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.plan-monat label {
  font-size: 12px;
  font-weight: 600;
  color: #686868;
}
.plan-monat input { width: 100%; }
.plan-monat-ref { font-size: 12px; min-height: 13px; }

/* Jahressummen-Spalte (ganz rechts) */
.plan-gesamt {
  background: rgba(var(--product-rgb),0.06);
  border-left: 2px solid rgba(var(--product-rgb),0.15);
  border-radius: 4px;
  padding: 2px 8px;
}
.plan-gesamt label { color: var(--n-950); font-weight: 700; }
.plan-gesamt-wert { font-weight: 700; font-size: 14px; padding: 5px 0; }

/* Dark Mode */
html.dark .plan-helfer {
  background: rgba(var(--product-rgb),0.08);
  border-color: rgba(var(--product-rgb),0.20);
}
html.dark #table-plan .plan-row-bz > td { background: rgba(var(--product-rgb),0.10); }
html.dark #table-plan .plan-row-hk > td { background: rgba(var(--product-rgb),0.05); }
html.dark .plan-editor-row > td { background: rgba(var(--d-linie-rgb),0.03); }

/* ============================================================
   Schnellplanung (2026-10-01): Planungen, Planungstiefe, Zweig-Blöcke
   mit Oberkategorie → Unterkategorie → Monat, Seitenkasten Jahreswirkung.
   Nur Tokens (Regelwerk F-01/F-04/F-07, T-05, A-01/A-04, E-01/E-03)
   ============================================================ */
.sp-kopf { flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.sp-feld { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--n-700); }
.sp-planungen { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-planung {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  min-width: 200px; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--n-200); border-radius: var(--radius-sm);
  background: transparent; color: var(--n-950); font: inherit; text-align: left; cursor: pointer;
}
.sp-planung:hover { border-color: var(--product-60); }
.sp-planung:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sp-planung.aktiv { border: 2px solid var(--product); background: var(--product-20); }
.sp-planung-name { font-weight: 600; font-size: 14px; }
.sp-planung-meta { font-size: 12px; color: var(--n-700); }
.sp-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.sp-tiefen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sp-tiefe {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px;
  border: 1px solid var(--n-200); border-radius: var(--radius-sm); color: var(--n-700);
}
.sp-tiefe > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.sp-tiefe > div span { font-size: 12px; }
.sp-tiefe.aktiv { border: 2px solid var(--product); color: var(--n-950); }
.sp-tiefe[aria-disabled="true"] strong { color: var(--n-700); }
.sp-tiefe-nr {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--radius-xs);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--n-100); font-weight: 600;
}
.sp-tiefe.aktiv .sp-tiefe-nr { background: var(--product); color: var(--n-100); }

.sp-raster { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.sp-raster > .card { margin-bottom: 0; }
.sp-seite { position: sticky; top: 16px; }
.sp-erklaerung {
  margin: 0 0 16px; padding: 12px 16px; font-size: 14px; line-height: 1.5;
  background: var(--info-soft); border-radius: var(--radius-sm);
}

/* „Alle Betriebe“: je Betrieb ein Abschnitt mit seinen Zweigen */
.sp-betrieb { margin-bottom: 24px; }
.sp-betrieb-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 0 12px; border-bottom: 2px solid var(--product); margin-bottom: 12px; }
.sp-betrieb-kopf h4 { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--n-950); }
.sp-betrieb .admin-aktiv-leer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sp-zweig { border: 1px solid var(--n-200); border-radius: var(--radius-sm); margin-bottom: 12px; overflow: hidden; }
.sp-zweig-kopf {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 16px;
  border: 0; background: var(--n-050); color: var(--n-950); font: inherit; text-align: left; cursor: pointer;
}
.sp-zweig-kopf:hover { background: var(--product-20); }
.sp-zweig-kopf:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.sp-chevron { width: 16px; color: var(--n-700); }
.sp-zweig-name { font-weight: 600; font-size: 16px; flex: 1; }
.sp-zweig-meta { font-size: 12px; color: var(--n-700); }
.sp-zweig-plan { font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; min-width: 120px; text-align: right; }
.sp-zweig .table-scroll { overflow-x: auto; }

.sp-tabelle { margin: 0; table-layout: fixed; min-width: 640px; }
/* feste Spalten: Hinweise in der Namensspalte verschieben die Eingabefelder nicht */
.sp-tabelle th:nth-child(2) { width: 112px; }
.sp-tabelle th:nth-child(3) { width: 128px; }
.sp-tabelle th:nth-child(4) { width: 160px; }
.sp-tabelle th:nth-child(5) { width: 120px; }
.sp-tabelle td, .sp-tabelle th { vertical-align: middle; }
.sp-tabelle .sp-zahl, .sp-tabelle .sp-plan { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-tabelle .sp-plan { font-weight: 600; }
.sp-spalte-eingabe { width: 128px; }
.sp-name { font-weight: 600; font-size: 14px; }
.sp-hk > td { background: transparent; }
.sp-uk > td { background: var(--n-050); }
.sp-uk > td:first-child { padding-left: 32px; }
.sp-uk .sp-name { font-weight: 400; }
.sp-uk-hinweise { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.sp-hinweis { font-size: 12px; color: var(--warning-text); }
.sp-link {
  border: 0; background: none; padding: 4px 0; min-height: 28px; cursor: pointer;
  color: var(--product); font: inherit; font-size: 12px; font-weight: 600;
}
.sp-link:hover { text-decoration: underline; }
.sp-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-xs); }

.sp-eingabe { display: flex; align-items: center; gap: 4px; }
.sp-eingabe input { width: 84px; max-width: none; text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; }
.sp-eingabe-euro { justify-content: flex-end; }
.sp-eingabe-euro input { width: 112px; }
.sp-eingabe input[aria-invalid="true"], .sp-monat input[aria-invalid="true"] { border-color: var(--danger); }
.sp-einheit { font-size: 12px; color: var(--n-700); width: 12px; }

.sp-delta { font-size: 12px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--n-700); }
.sp-delta-pos { color: var(--wert-pos); }
.sp-delta-neg { color: var(--wert-neg); }

.sp-monate-zeile > td { background: var(--n-050); padding: 12px 16px 16px 32px; }
.sp-monate-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; color: var(--n-700); }
.sp-monate { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.sp-monat { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--n-200); border-radius: var(--radius-xs); background: transparent; }
.sp-monat label { font-size: 12px; font-weight: 600; color: var(--n-700); }
.sp-monat input { max-width: none; width: 100%; text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; }
.sp-monat-ref { font-size: 12px; color: var(--n-700); }
.sp-monat.manuell { border: 2px solid var(--warning-text); }
.sp-monat.manuell .sp-monat-ref { color: var(--warning-text); font-weight: 600; }

.sp-fuss { margin-top: 12px; min-height: 20px; }
.sp-status { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--success-text); }
.sp-status .hfm-icon { width: 14px; height: 14px; }
.sp-status.fehler { color: var(--danger-text); font-weight: 600; }

.sp-wirkung-zeile { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--n-200); }
.sp-wirkung-label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.sp-wirkung-label span { font-size: 12px; color: var(--n-700); }
.sp-wirkung-wert { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-wirkung-ergebnis .sp-wirkung-wert { font-size: 20px; font-weight: 700; }
.sp-wirkung-fuss { font-size: 12px; color: var(--n-700); margin: 8px 0 0; }
.sp-wirkung-chart-titel { font-size: 12px; font-weight: 600; color: var(--n-700); margin: 16px 0 8px; }
.sp-chart { width: 100%; height: auto; display: block; }
.sp-chart .sp-null { stroke: var(--n-400); stroke-width: 1; }
.sp-chart .sp-balken { fill: var(--product); }
.sp-chart .sp-balken-neg { fill: var(--wert-neg); }
.sp-chart .sp-balken-basis { stroke: var(--n-950); stroke-width: 2; stroke-dasharray: 3 2; }
.sp-chart-achse { display: flex; font-size: 12px; color: var(--n-700); text-align: center; }
.sp-chart-legende { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--n-700); margin-top: 8px; }
.sp-leg-plan { display: inline-block; width: 12px; height: 12px; border-radius: 2px; background: var(--product); }
.sp-leg-basis { display: inline-block; width: 14px; border-top: 2px dashed var(--n-950); margin-left: 8px; }
.sp-rangfolge { margin-top: 16px; padding: 12px 16px; border: 1px solid var(--n-200); border-radius: var(--radius-sm); font-size: 12px; }
.sp-rangfolge-titel { font-weight: 600; margin-bottom: 4px; font-size: 14px; }
.sp-rangfolge ol { margin: 0; padding-left: 20px; color: var(--n-700); }
.sp-rangfolge li { margin: 4px 0; }

@media (max-width: 1200px) {
  .sp-raster { grid-template-columns: 1fr; }
  .sp-seite { position: static; }
  .sp-tiefen { grid-template-columns: 1fr; }
}

/* ===== Atlas-Mapping (Admin) ===== */
.atlas-stat-card {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.atlas-stat-zahlen { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px; color: var(--n-950); }
.atlas-stat-item { display: inline-flex; align-items: center; gap: 6px; }
.atlas-stat-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }

/* Breite Tabellen scrollen nur in sich (Regelwerk §6) – nie der ganze Inhaltsbereich */
.table-scroll { overflow-x: auto; max-width: 100%; }
.atlas-table th, .atlas-table td { vertical-align: top; }
.atlas-kat-name { font-weight: 600; color: var(--n-950); }
.atlas-kat-hk { font-size: 12px; color: #878787; }
.atlas-bz-badge {
  display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 10px;
  background: rgba(104,104,104,0.10); color: #686868;
}
.atlas-codes-cell { max-width: 340px; white-space: normal; }
.atlas-code-badge {
  display: inline-block; background: rgba(var(--product-rgb),0.08); color: var(--product);
  font-size: 12px; border-radius: 4px; padding: 2px 6px; margin: 1px 0;
}
.atlas-status {
  display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 10px;
}
.atlas-status-best { background: rgba(var(--success-rgb),0.12); color: var(--success-text); }
.atlas-status-vor  { background: rgba(var(--warning-rgb),0.12); color: var(--warning-text); }
.atlas-status-fehl { background: rgba(var(--danger-rgb),0.12); color: var(--hfm-negativ); }
html.dark .atlas-stat-zahlen { color: #e8e8e8; }

/* ============================================================
   Auswertung: Berichts-Umschalter (Liquidität / GuV)
   ============================================================ */
/* Pill-Tabs (CRM-Muster: Umschalter als Pillen, aktiv = Produktfarbe) */
.bericht-umschalter { display: flex; gap: 8px; margin-bottom: 18px; }
.bericht-tab {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
  font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 14px;
  padding: 8px 22px; border-radius: 999px; cursor: pointer;
  background: var(--hfm-white); color: var(--n-950);
  border: 1px solid var(--n-200); transition: all 0.15s ease;
}
.bericht-tab:hover { border-color: var(--n-400); }
.bericht-tab.active, .bericht-tab.active:hover {
  background: var(--product); color: var(--hfm-white); border-color: var(--product);
}
html.dark .bericht-tab.active { color: #141d33; }

/* Fade beim Umschalten */
.auswertung-view { animation: guv-fade 0.15s ease; }
@keyframes guv-fade { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   GuV-Tabelle
   ============================================================ */
.guv-position td.pivot-name-col { font-family: 'Open Sans', sans-serif; font-weight: 600; }

/* Zwischenergebnis-Zeilen */
.guv-zwischen-row td {
  background: rgba(var(--product-rgb),0.06);
  border-top: 2px solid rgba(var(--product-rgb),0.20);
  border-bottom: 2px solid rgba(var(--product-rgb),0.20);
  font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 14px;
}
.guv-zwischen-name { line-height: 1.25; }
.guv-zwischen-titel { font-weight: 700; }
.guv-zwischen-sub { font-size: 12px; font-weight: 400; color: var(--n-600); }
.guv-zwischen-pos { color: var(--hfm-positiv); }
.guv-zwischen-neg { color: var(--hfm-negativ); }
.guv-afa-hinweis { font-size: 12px; color: #b2b2b2; font-style: italic; }

/* Abschreibungs-Zeile (n.v.) */
.guv-afa-row td { background: rgba(178,178,178,0.04); color: #b2b2b2; }
.guv-afa-row .pivot-name-col { color: #b2b2b2; }
.guv-afa-zelle { color: #b2b2b2; }

/* Jahresergebnis-Hinweis */
.guv-jahres-row td { color: #b2b2b2; font-style: italic; font-size: 12px; background: transparent; }

/* Stern-Fußnote */
.guv-fussnote { margin-top: 10px; font-size: 12px; color: #b2b2b2; font-style: italic; }

/* Info-Icon + Tooltip */
.guv-info { color: #b2b2b2; cursor: help; font-size: 14px; position: relative; }
.guv-info:hover { color: var(--product); }
.guv-info::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: 140%;
  transform: translateX(-50%); width: max-content; max-width: 280px;
  background: var(--hfm-white);
  border: 1px solid rgba(0,0,0,0.08); border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.10); padding: 10px 14px;
  font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 14px;
  color: var(--n-950); white-space: normal; text-align: left; line-height: 1.4;
  opacity: 0; visibility: hidden; transition: opacity 0.12s ease; z-index: 50;
  pointer-events: none;
}
.guv-info:hover::after { opacity: 1; visibility: visible; }

/* Atlas-Admin: GuV-Position nur als Text (Admin-Inventur Zeile 10, 2026-09-28) –
   „Nicht in der GuV“ ist Information, keine deaktivierte Fläche (F-02) */
.atlas-guv-leer { color: var(--n-700); font-size: 12px; }

html.dark .bericht-tab { background: rgba(var(--d-linie-rgb),0.06); color: #b8b8b8; border-color: rgba(var(--d-linie-rgb),0.12); }
html.dark .bericht-tab.active { background: var(--product); color: #141d33; }
html.dark .guv-zwischen-row td { background: rgba(var(--product-rgb),0.10); }
html.dark .guv-info::after { background: #252a3a; color: #e8e8e8; border-color: rgba(var(--d-linie-rgb),0.12); }

/* ============================================================
   Betriebsspiegel
   ============================================================ */
.bs-toolbar { gap: 8px; align-items: center; flex-wrap: wrap; }
.bs-hinweis { color: var(--hfm-anthrazit); font-size: 14px; line-height: 1.5; }
.bs-gruppe { margin-bottom: 18px; border-radius: 12px; overflow: hidden; }
.bs-gruppe-titel {
  font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 14px;
  padding: 10px 14px;
}
.bs-tier { background: rgba(var(--product-rgb),0.06); }
.bs-flaeche { background: rgba(var(--success-rgb),0.06); }
.bs-energie { background: rgba(var(--warning-rgb),0.06); }
.bs-sonstige { background: rgba(104,104,104,0.06); }
.bs-tier .bs-gruppe-titel { background: rgba(var(--product-rgb),0.12); color: var(--product); }
.bs-flaeche .bs-gruppe-titel { background: rgba(var(--success-rgb),0.12); color: var(--hfm-positiv); }
.bs-energie .bs-gruppe-titel { background: rgba(var(--warning-rgb),0.12); color: var(--warning-text); }
.bs-sonstige .bs-gruppe-titel { background: rgba(104,104,104,0.12); color: var(--hfm-anthrazit); }
.bs-tabelle { background: transparent; }
.bs-tabelle th, .bs-tabelle td { padding: 8px 14px; }
.bs-aktion { display: flex; gap: 6px; }
.bs-leer { color: var(--hfm-anthrazit-light); text-align: center; padding: 14px; font-style: italic; }
.bs-summen {
  display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
  padding: 12px 16px; border-radius: 12px; background: rgba(var(--product-rgb),0.10);
  font-weight: 600; color: var(--hfm-anthrazit-dark);
}
.bs-summen span { color: var(--hfm-anthrazit); font-weight: 400; margin-right: 6px; }
.bs-summen-hinweis { font-weight: 400; font-size: 12px; color: var(--hfm-anthrazit-light); font-style: italic; }
.bs-kennzahlen { margin-top: 4px; }

/* Betriebsspiegel: Hinweis + Betriebs-Blöcke */
.bs-alle-hinweis {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; margin-bottom: 16px; border-radius: 12px;
  background: rgba(var(--product-rgb),0.06); border: 1px solid rgba(var(--product-rgb),0.15);
  color: var(--hfm-anthrazit); font-size: 14px;
}
.bs-alle-hinweis svg { flex-shrink: 0; color: var(--product); }
.bs-betrieb-block { margin-bottom: 24px; }
.bs-betrieb-titel {
  display: flex; align-items: center; gap: 9px;
  font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 17px;
  padding-bottom: 10px; margin-bottom: 16px;
}
.bs-betrieb-punkt { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.bs-block-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-top: 12px;
}
.bs-block-summen {
  font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 14px;
  color: var(--hfm-anthrazit-dark);
}

/* Gesamtübersicht (KPI-Kacheln) */
.bs-gesamt-titel {
  font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 16px;
  margin-bottom: 14px;
}
.bs-gesamt-sub { font-weight: 400; font-size: 14px; color: var(--hfm-anthrazit); margin-left: 6px; }
.bs-kpi-grid { display: flex; gap: 14px; flex-wrap: wrap; }
.bs-kpi {
  display: flex; align-items: center; gap: 12px; flex: 1; min-width: 200px;
  padding: 14px 18px; border-radius: 14px;
  background: rgba(104,104,104,0.05); border: 1px solid rgba(0,0,0,0.06);
}
.bs-kpi-ic { font-size: 24px; line-height: 1; }
.bs-kpi-val { font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 20px; color: var(--hfm-anthrazit-dark); }
.bs-kpi-label { font-size: 12px; color: var(--hfm-anthrazit); }
.bs-kpi-flaeche { background: rgba(var(--success-rgb),0.06); border-color: rgba(var(--success-rgb),0.15); }
.bs-kpi-tier { background: rgba(var(--product-rgb),0.06); border-color: rgba(var(--product-rgb),0.15); }
.bs-kpi-energie { background: rgba(var(--warning-rgb),0.06); border-color: rgba(var(--warning-rgb),0.15); }

.bs-import-summary { display: flex; gap: 10px; margin-bottom: 12px; }
.bs-imp { padding: 4px 10px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.bs-imp.gruen { background: rgba(var(--success-rgb),0.10); color: var(--hfm-positiv); }
.bs-imp.gelb { background: rgba(var(--warning-rgb),0.12); color: var(--warning-text); }
.bs-imp.rot { background: rgba(var(--danger-rgb),0.10); color: var(--danger-text); }
tr.bs-imp-gruen td { background: rgba(var(--success-rgb),0.05); }
tr.bs-imp-gelb td { background: rgba(var(--warning-rgb),0.07); }
tr.bs-imp-rot td { background: rgba(var(--danger-rgb),0.06); color: var(--hfm-anthrazit-light); }

/* ============================================================
   BZA – Betriebszweigauswertung
   ============================================================ */
.bza-hinweis {   /* Rundung über Token (A-04, vorher frei 12 px; P5 2026-09-28) */
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; margin-bottom: 16px; border-radius: var(--radius-sm);
  background: rgba(var(--product-rgb),0.06); border: 1px solid rgba(var(--product-rgb),0.12);
  color: var(--hfm-anthrazit); font-size: 14px;
}
.bza-bezugsbasis { font-size: 12px; color: var(--hfm-anthrazit-mid); }
.bza-betrieb-head {
  font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 18px;
  margin: 8px 2px 12px;
}
/* Zweispaltiges Raster je Betrieb; Betrieb-Überschrift bleibt volle Breite */
.bza-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 20px; align-items: stretch; margin-bottom: 20px;
}
@media (max-width: 1200px) { .bza-grid { grid-template-columns: 1fr; } }
/* Mit Richtwert-Vergleich (bza.js renderBZA): eine Spalte, damit die Tabellen mit den
   Richtwert-Spalten (XVI) Platz haben (2026-09-28, Betreiber-Sichtung) */
.bza-grid.bza-grid-vergleich { grid-template-columns: minmax(0, 1fr); }
.bza-block {
  margin-bottom: 0; display: flex; flex-direction: column;
}
.bza-span2 { grid-column: 1 / -1; }   /* Allgemein / lange Blöcke über volle Breite */
.bza-block-titel {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 16px;
  margin-bottom: 10px;
}
.bza-block-icon { font-size: 18px; }
.bza-block-menge { font-weight: 400; font-size: 14px; color: var(--hfm-anthrazit); }
.bza-ohne-menge { font-size: 12px; color: var(--hfm-anthrazit-mid); margin-bottom: 10px; }
.bza-ohne-menge a { color: var(--product); }   /* Dark: vorher Standard-Linkblau auf dunkel (2026-09-30) */
/* Betriebsspiegel „Zweig erfassen“ (2026-09-25): Felder wie „Zweig anlegen“ in Atlas */
.bs-form-zeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 12px; }
.bs-form-zeile .form-group[hidden] { display: none; }
.bs-form-label {   /* wie .form-group label – für das nur lesbare Feld ohne Eingabe */
  font-size: 12px; font-weight: 600; color: var(--hfm-anthrazit-mid);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.bs-form-lesen { margin: 0; padding: 9px 0; font-size: 14px; color: var(--hfm-anthrazit-mid); }
.bs-pflicht { color: var(--danger-text); }
.bs-form-fehler { margin: 0; font-size: 14px; color: var(--danger-text); }
.bs-form-hoheit {   /* Hinweis Atlas-Hoheit: Information, nicht Warnung (F-06) */
  margin: 0 0 12px; padding: 12px 16px; border-radius: var(--radius-sm);
  background: var(--info-soft); color: var(--hfm-anthrazit); font-size: 14px;
}
.bs-fehlt { color: var(--warning-text); font-weight: 600; }
.bs-offen { color: var(--hfm-anthrazit-mid); font-style: italic; }
/* Mengen-Brücke (2026-09-25): Zuordnung Zweig → Betriebsspiegel-Position */
.bza-zuordnung-form { margin: -4px 0 12px; }
.bza-zuordnung-form label { display: block; font-size: 12px; font-weight: 600; color: var(--hfm-anthrazit); margin-bottom: 4px; }
.bza-zuordnung-zeile { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bza-zuordnung-zeile select { flex: 1 1 220px; min-width: 0; }
/* Textaktion (B-Hierarchie „Textaktion: keine dominante Fläche“) */
.bza-textaktion {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--product); text-decoration: underline; border-radius: var(--radius-xs);
}
.bza-textaktion:hover { background: var(--product-20); }
.bza-gruppe-label {
  font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.04em; margin: 8px 0 1px;
}
.bza-gruppe-label.bza-erloese { color: var(--success-text); }
.bza-gruppe-label.bza-kosten { color: var(--hfm-negativ); }
.bza-tabelle th, .bza-tabelle td { padding: 6px 12px; font-size: 14px; }
.bza-tabelle th { font-size: 12px; }
.bza-tabelle.bza-erloese td.text-right { color: var(--success-text); }
.bza-tabelle.bza-kosten td.text-right { color: var(--hfm-negativ); }
.bza-je { font-weight: 600; }
.bza-leer { color: var(--hfm-anthrazit-light); }
.bza-saldo {   /* Rundung über Token (A-04, vorher frei 12 px; P5 2026-09-28) */
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin-top: auto; padding: 10px 14px; border-radius: var(--radius-sm);
  background: rgba(var(--product-rgb),0.06);
  border-top: 2px solid rgba(var(--product-rgb),0.20); border-bottom: 2px solid rgba(var(--product-rgb),0.20);
  font-family: 'Open Sans', sans-serif; font-weight: 600; font-size: 14px;
}
.bza-saldo.bza-pos { color: var(--hfm-positiv); }
.bza-saldo.bza-neg { color: var(--hfm-negativ); }
.bza-saldo-werte { display: flex; gap: 14px; align-items: baseline; }

/* ---- BZA: Vergleich mit Richtwert Kammer (Richtwert-Paket P5, 2026-09-28; seit XVI als Spalten) ----
   Neutral (Betreiber-Frage 4a): Richtwert und Abweichung in --n-950, Metadaten in --n-700 (F-01,
   F-02), kein Gold (F-03), KEINE Rot/Grün-Bewertung – die Abweichung steht als Text mit Vorzeichen
   (F-06, F-07, §5; Ihr Wert brutto, Richtwert netto). Seit XVI (Betreiber-Wunsch) zwei weitere
   Spalten der Erlös-/Kosten-Tabelle statt eines eigenen Abschnitts; die Tabelle liegt in
   .table-scroll und rollt in schmalen Blöcken nur selbst waagerecht, nie die Seite (§6) – die
   frühere gestapelte Ansicht (@container bza-block) ist entfernt. Raster 4/8/12/16/32/48 (A-01),
   Rundungen über Tokens (A-04), tabellarische Ziffern (T-05), Metadaten 12 px, Bedienelemente
   14 px (T-03), Aufklapper 44 px hoch (B-05), höchstens drei Flächenebenen (A-03). */
/* gleiche Spaltenbreiten in Erlös- und Kosten-Tabelle: die Zahlen stehen untereinander */
.bza-mit-rw { min-width: 800px; }   /* erste Spalte ≥ 240 px, sonst bricht der Name mehrfach um – dann rollt lieber die Tabelle */
.bza-mit-rw thead th { line-height: 16px; vertical-align: bottom; }
.bza-mit-rw .bza-sp-gesamt { width: 136px; }
.bza-mit-rw .bza-sp-je { width: 128px; }
.bza-mit-rw .bza-sp-rw { width: 144px; }
.bza-mit-rw .bza-sp-abw { width: 152px; }
.bza-mit-rw td { vertical-align: top; }
/* Richtwert-Spalten neutral – auch in der Erlös-/Kosten-Tabelle (deren Beträge sonst grün/rot) */
.bza-tabelle.bza-mit-rw td.bza-rw { color: var(--n-950); white-space: nowrap; }
/* Gruppen-Zwischenzeile halbfett, ihre Kategorien eingerückt darunter */
.bza-mit-rw tr.bza-rw-gruppe td { font-weight: 600; }
.bza-mit-rw tr.bza-rw-ebene1 td:first-child { padding-left: 32px; }
.bza-mit-rw tr.bza-rw-ebene2 td:first-child { padding-left: 48px; }
.bza-rw-meta { display: block; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--n-700); }
.bza-rw-ohne { font-size: 12px; color: var(--n-700); }
/* Summe der verglichenen Kostengruppen (Fuß der Kosten-Tabelle) */
.bza-mit-rw tfoot td { padding: 8px 12px; font-weight: 600; border-top: 2px solid var(--n-200); }
.bza-vgl-betrag, .bza-vgl-proz { white-space: nowrap; }
/* Unter dem Saldo: „davon“, Richtwerte ohne Zahlung, Quelle – abgesetzt durch eine Linie (A-03) */
.bza-vergleich { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--n-200); }
.bza-vgl-titel {
  font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--n-700); margin: 0 0 8px;
}
/* „davon“ und die Liste als <details> – Tastatur von Haus aus (§6), Zustände B-06 */
.bza-davon { margin: 4px 0 0; }   /* Abstand: der Fokusrahmen (Offset 2 px) deckt nichts zu */
.bza-davon > summary {
  display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 4px;
  cursor: pointer; font-size: 14px; font-weight: 600; color: var(--product);
  border-radius: var(--radius-xs); list-style: none;
}
.bza-davon > summary::-webkit-details-marker { display: none; }
.bza-davon > summary:hover { background: var(--product-20); }
.bza-davon > summary::before {   /* Aufklapp-Pfeil als Outline-Form (I-01), dreht beim Öffnen */
  content: ""; flex-shrink: 0; width: 8px; height: 8px; margin: 0 4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform 0.15s;
}
.bza-davon[open] > summary::before { transform: rotate(45deg); }
.bza-davon ul { list-style: none; margin: 0 0 8px; padding: 0 0 0 16px; }   /* 4-px-Raster (A-01) */
.bza-davon li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  padding: 4px 0; font-size: 14px; color: var(--n-950); border-bottom: 1px solid var(--n-200);
}
.bza-davon li:last-child { border-bottom: 0; }
.bza-davon-gruppe { margin: 8px 0 0; padding: 0 0 0 16px; font-size: 12px; font-weight: 600; color: var(--n-700); }
.bza-davon-name { flex: 1 1 auto; min-width: 0; }
.bza-davon-wert { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bza-davon-hinweis { flex-basis: 100%; font-size: 12px; line-height: 17px; color: var(--n-700); }
.bza-vgl-liste { margin-top: 4px; }
.bza-vgl-quelle { margin: 8px 0 0; font-size: 12px; line-height: 17px; color: var(--n-700); }
/* ruhige Zeile (Status, älterer Stand, Zeitraum): Info-Symbol + Text (S-01, I-06) */
.bza-vgl-ruhig {
  display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px;
  font-size: 14px; line-height: 20px; color: var(--n-700);
}
.bza-vgl-ruhig svg { flex-shrink: 0; width: 20px; height: 20px; }
.bza-vgl-weg { display: block; margin-top: 4px; color: var(--n-950); }
/* Heft gewählt, WJ läuft (2026-09-29): Warnhinweis Teiljahr – Statusfarbe Warnung (S-01, F-07) */
.bza-vgl-ruhig.bza-vgl-teiljahr {
  padding: 8px 12px; border-radius: 6px;
  background: var(--warning-soft); color: var(--warning-text); font-weight: 600;
}
/* Auswahl „Richtwert“ in der Werkzeugleiste der BZA (2026-09-29) */
.bza-heft-wahl { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--hfm-anthrazit-mid); }
.bza-heft-wahl[hidden] { display: none; }

/* Admin → Einstellungen, Karte „Richtwert-Vergleich in der BZA“ (P5, nur Anzeige):
   vorhandene Bausteine (.admin-file-info, .data-table, .badge, .btn); Knöpfe 44 px (B-05) */
.rw-karte .rw-betrieb { margin-bottom: 12px; }
.rw-stand-text { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.rw-stand-text .admin-file-meta { flex-basis: 100%; }
.rw-karte .rw-weg { margin: 12px 0; }
.rw-karte .rw-zweige td { vertical-align: top; }
.rw-db { display: block; margin-top: 4px; font-size: 12px; color: var(--n-700); }
.rw-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.rw-aktionen .btn { min-height: 44px; }

/* ============================================================
   LOGIN-SEITE & Sichtbarkeit App / Login
   ============================================================ */

/* Sichtbarkeitsstatus über Body-Klasse (in auth.js gesetzt):
   auth-checking = noch nichts zeigen, show-login = Login, show-app = App */
body.auth-checking .app-layout,
body.show-login .app-layout { display: none; }

#login-overlay { display: none; }
body.show-login #login-overlay { display: flex; }

/* Anmeldemaske im CRM-Familienmuster (2026-08-31): Bühne hell,
   Karte DUNKEL (Dunkelblau-Verlauf der Logo-Demo) — nur so wirkt das
   helle Sand-Morph-Logo. Knopf hell. */
#login-overlay {
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
  background: linear-gradient(160deg, #eef0f4 0%, #e3e7ee 55%, #d6dbe6 100%);
}

.login-card {
  width: 100%;
  max-width: 410px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 36px 26px;
  border-radius: 18px;
  background: radial-gradient(130% 100% at 50% 22%,
              #2a3760 0%, #1d2846 58%, #141d33 100%);
  box-shadow: 0 24px 70px rgba(20,29,51,.45),
              0 4px 14px rgba(20,29,51,.25);
  border: 0;
}

/* Ähren-Logo (zerfällt zu Sand, baut sich wieder auf): feste Maße gegen
   Springen. Die Karte schneidet die erweiterte Zeichenfläche ab, damit
   keine Sandkörner auf die helle Bühne fliegen. */
.login-card { overflow: hidden; }
.login-symbol-wrap { margin-bottom: 6px; }
.login-symbol-wrap [data-hfm-aehre] { width: 170px; height: 170px; }

.login-titel {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.01em;
  margin: 0;
  color: rgba(244,246,250,0.92);
}

.login-untertitel {
  font-size: 13.5px;
  font-weight: 400;
  color: rgba(244,246,250,0.45);
  margin: 3px 0 26px;
}

.login-label {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244,246,250,0.6);
  margin-bottom: 6px;
}

.login-input {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  margin-bottom: 16px;
  border: 1px solid rgba(244,246,250,0.22);
  border-radius: 9px;
  background: rgba(244,246,250,0.07);
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  color: #f4f6fa;
  transition: var(--transition);
}

.login-input:focus {
  outline: none;
  border-color: rgba(244,246,250,0.6);
  background: rgba(244,246,250,0.11);
}

.login-fehler {
  width: 100%;
  min-height: 18px;
  font-size: 13px;
  color: #f5c1bb;
  text-align: left;
  margin: -6px 0 12px;
}

.login-btn {
  width: 100%;
  min-height: 48px;
  padding: 12px;
  border: none;
  border-radius: 9px;
  background: #f4f6fa;
  color: #1d2846;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: var(--transition);
}

.login-btn:hover { background: #dde2ea; }
.login-btn:focus-visible { outline: 2px solid rgba(244,246,250,0.7); outline-offset: 2px; }
.login-btn:disabled { opacity: 0.6; cursor: default; }
.login-btn.lädt { opacity: 0.7; cursor: progress; }

.login-vergessen {
  display: inline-block;
  margin-top: 16px;
  font-size: 14px;
  color: rgba(244,246,250,0.6);
  text-decoration: none;
}
.login-vergessen:hover { color: #f4f6fa; text-decoration: underline; }

.login-trenner {
  width: 100%;
  height: 1px;
  margin: 22px 0 15px;
  background: rgba(244,246,250,0.12);
}

.login-powered {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.login-powered-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244,246,250,0.32);
}
.login-powered-name {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(244,246,250,0.55);
  text-decoration: none;
}
a.login-powered-name:hover { color: #f4f6fa; }

/* Sidebar: User + Abmelden (CRM-Anmeldefuß: Avatar-Kreis, Name,
   Abmelde-Icon — auf der dunklen Leiste) */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 13px;
}
.sidebar-user-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.75);
}
.sidebar-user-avatar svg { width: 13px; height: 13px; }
.sidebar-user-icon { display: inline-flex; }
/* Name lesbar (Betreiber 2026-10-15): heller und bis zu zwei Zeilen statt
   früh abgeschnitten; voller Name zusätzlich als Hover (auth.js, title). */
.sidebar-user-name {
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  line-height: 1.3;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Rest der Zeile neben dem Avatar (im Knopf „Mein Konto“, der die ganze
     Zeilenbreite nimmt – Modus-Knopf und Abmelden rutschen in die Zeile
     darunter, rechtsbündig über margin-left:auto des Modus-Knopfs) */
  flex: 1 1 auto;
  min-width: 0;
}
.sidebar-user { flex-wrap: wrap; row-gap: 4px; }
.sidebar-logout {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 8px;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
}
.sidebar-logout:hover { color: #ffffff; background: rgba(255,255,255,0.09); }

/* „Mein Konto“ (2026-10-15, konto.js): Avatar + Name als EIN Knopf (B-05:
   mind. 44 px hoch), Hover wie der Abmelde-Knopf, Fokus #2f80ed. Die
   Seitenleiste ist in Hell und Dunkel gleich (konstante Navy-Leiste). */
.sidebar-konto {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0 -4px;
  padding: 4px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sidebar-konto:hover { background: rgba(255,255,255,0.09); }
.sidebar-konto:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Kundenvorschau: kein Knopf – nur anzeigen, Name bleibt voll lesbar (F-04) */
.sidebar-konto:disabled { cursor: default; }
.sidebar-konto:disabled:hover { background: none; }
.sidebar-konto .sidebar-user-avatar { width: 32px; height: 32px; }
.sidebar-user-avatar img,
.mk-bild-vorschau img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-initialen { font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 0.02em; }
.sidebar-user-avatar .avatar-initialen { color: #ffffff; }

/* Dark Mode: Karte bleibt identisch dunkel, nur die Bühne wird dunkel */
html.dark #login-overlay {
  background: linear-gradient(160deg, #14171f 0%, #101319 55%, #0c0f15 100%);
}

/* ============================================================
   Drill-Down-Panel: Einzeltransaktionen einer Pivot-Kategorie
   (Auswertung, nur Ansicht)
   ============================================================ */
.drill-backdrop { position: fixed; inset: 0; background: rgba(45,45,45,0.35); z-index: 1200; }
.drill-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 92vw;
  background: var(--hfm-white); z-index: 1201; display: flex; flex-direction: column;
  box-shadow: -8px 0 32px rgba(0,0,0,0.18);
  border-left: 3px solid var(--hfm-analytics-blue);
}
html.dark .drill-panel { background: var(--d-karte); }
.drill-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 18px 20px 12px; border-bottom: 1px solid var(--hfm-anthrazit-pale);
}
.drill-head h3 { font-size: 16px; font-weight: 600; color: var(--hfm-anthrazit-dark); }
.drill-sub { font-size: 12px; color: var(--hfm-anthrazit-mid); margin-top: 2px; }
.drill-close {
  border: none; background: none; font-size: 22px; line-height: 1;
  cursor: pointer; color: var(--hfm-anthrazit-mid); padding: 0 2px;
}
.drill-close:hover { color: var(--hfm-anthrazit-dark); }
.drill-abgleich { padding: 12px 20px; border-bottom: 1px solid var(--hfm-anthrazit-pale); font-size: 14px; }
.drill-abgleich-zeile { display: flex; justify-content: space-between; padding: 2px 0; }
.drill-ok { color: var(--success-text); font-size: 12px; margin-top: 6px; }
html.dark .drill-ok { color: var(--success-text); }
.drill-warnung { color: var(--hfm-warnung); font-weight: 600; font-size: 12px; margin-top: 6px; }
.drill-liste { flex: 1; overflow-y: auto; padding: 6px 20px; }
.drill-meldung { padding: 18px 0; color: var(--hfm-anthrazit-mid); font-size: 14px; }
.drill-zeile {
  display: flex; gap: 10px; padding: 7px 0; align-items: baseline;
  border-bottom: 1px solid var(--hfm-anthrazit-pale);
}
.drill-zeile-datum { flex: 0 0 70px; font-size: 12px; color: var(--hfm-anthrazit-mid); }
.drill-zeile-text { flex: 1; min-width: 0; }
.drill-zeile-name {
  font-size: 14px; color: var(--hfm-anthrazit-dark);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drill-zeile-zweck {
  font-size: 12px; color: var(--hfm-anthrazit-mid);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drill-zeile-betrag { flex: 0 0 auto; font-size: 14px; font-weight: 600; white-space: nowrap; }
.drill-plus { color: var(--success-text); }
.drill-minus { color: var(--hfm-negativ); }
html.dark .drill-plus { color: var(--success-text); }
html.dark .drill-minus { color: #d99a9a; }
.drill-foot { padding: 10px 20px; border-top: 1px solid var(--hfm-anthrazit-pale); }
.drill-foot a { font-size: 12px; color: var(--hfm-plan-text); text-decoration: none; }
.drill-foot a:hover { text-decoration: underline; }
/* Kategorie-Zeilen der Pivot: dezent als klickbar erkennbar */
.pivot-uk-drill { cursor: pointer; }
.pivot-uk-drill:hover td { background: rgba(var(--product-rgb),0.06); }

/* --- PSD2-Bankanbindung (Betrieb-Modal, B2b-2) --- */
.psd2-button-zeile { display: flex; gap: 8px; margin-bottom: 8px; }
.psd2-hinweis {
  margin-top: 8px; padding: 8px 12px; font-size: 14px;
  border-radius: var(--radius-sm); border: 1px solid;
}
.psd2-hinweis-info    { border-color: var(--product); color: var(--product); background: rgba(var(--product-rgb),0.06); }
.psd2-hinweis-warnung { border-color: var(--warning-text); color: var(--warning-text); background: rgba(var(--warning-rgb),0.08); }
.psd2-hinweis-fehler  { border-color: var(--hfm-negativ); color: var(--hfm-negativ); background: rgba(var(--danger-rgb),0.08); }
.psd2-bilanz {
  margin-top: 8px; padding: 10px 12px; font-size: 14px;
  border: 1px solid var(--success-text); border-radius: var(--radius-sm);
  color: var(--success-text); background: rgba(var(--success-rgb),0.06);
}
.psd2-bilanz div + div { margin-top: 2px; }
.psd2-dubletten {
  margin-top: 8px; padding: 8px 12px; font-size: 14px;
  border: 1px solid var(--warning-text); border-radius: var(--radius-sm);
  background: rgba(var(--warning-rgb),0.08);
}
.psd2-dubletten summary { cursor: pointer; color: var(--warning-text); font-weight: 600; }
.psd2-dubletten-hinweis { margin: 8px 0; color: var(--hfm-anthrazit-dark); }
.psd2-dubletten-tabelle { width: 100%; border-collapse: collapse; font-size: 12px; }
.psd2-dubletten-tabelle th, .psd2-dubletten-tabelle td {
  padding: 4px 8px; text-align: left; border-bottom: 1px solid rgba(var(--warning-rgb),0.25);
}
.psd2-dubletten-tabelle .text-right { text-align: right; }
.psd2-iban { color: var(--hfm-anthrazit-mid); font-size: 12px; }

/* --- PSD2 Kunden-global im Admin (C3) --- */
.psd2-schritt { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--hfm-anthrazit-pale); }
.psd2-schritt:first-of-type { border-top: none; padding-top: 0; }
.psd2-schritt-titel { font-weight: 600; color: var(--n-950); margin-bottom: 8px; }
.psd2-konten-tabelle { margin-top: 10px; }
.psd2-zuordnung-select { min-width: 180px; }
.psd2-konten-tabelle td { vertical-align: top; }
.psd2-inline-ok { color: var(--success-text); font-size: 12px; margin-left: 6px; }

/* --- Kunden-Seiten „Konten & Bank“ und „Kategorien“, Rollen-Trennung (2026-09-28,
       Admin-Inventur Paket 2 + 3). Nur vorhandene Tokens (Regelwerk §2). --- */
/* C-S2: Betreiber-Elemente (Admin-Eintrag) nur mit Body-Klasse „ist-betreiber“ (auth.js);
   der Server sperrt /api/admin ohnehin (C-S1) */
body:not(.ist-betreiber) .nur-betreiber { display: none !important; }

/* --- Sicht je Adresse (2026-09-29) ------------------------------------
   Login unter der Berater-Adresse: nur der Weg über das Atlas-Portal;
   Kundenvorschau: Info-Band (S-03, Info-Rolle, keine Warnung);
   „Als Kunde ansehen“ in der Seitenleiste (B-05: 44 px Ziel). */
.login-card.nur-portal .login-label,
.login-card.nur-portal .login-input,
.login-card.nur-portal #login-btn,
.login-card.nur-portal .login-vergessen { display: none; }
.login-portal { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.login-portal[hidden] { display: none; }
.login-portal .login-btn { text-align: center; text-decoration: none; }
.login-portal-text { margin: 0; font-size: 14px; color: rgba(244,246,250,0.75); }

.vorschau-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 12px 16px;
  border: 1px solid rgba(var(--info-rgb), 0.35);
  border-radius: var(--radius-sm);
  background: var(--info-soft);
  color: var(--n-950);
  font-size: 14px;
}
.vorschau-band[hidden] { display: none; }
.vorschau-band-aktionen { display: inline-flex; gap: 8px; }

.sidebar-kundensicht {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  margin-bottom: 8px;
  border-radius: var(--radius-xs);
  color: rgba(255,255,255,0.72);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.sidebar-kundensicht:hover { background: var(--sidebar-aktiv); color: #fff; }
.sidebar-kundensicht:focus-visible { outline: 2px solid #2f80ed; outline-offset: 2px; }
.sidebar-kundensicht[hidden] { display: none; }

/* Bereichshinweis mit Info-Icon (S-01, S-03) */
.seiten-hinweis {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 12px 16px; margin-bottom: 16px; border-radius: var(--radius-sm);
  background: var(--info-soft); border: 1px solid rgba(var(--info-rgb), 0.60);
  color: var(--n-950); font-size: 14px; line-height: 1.45;
}
.seiten-hinweis svg { flex-shrink: 0; width: 20px; height: 20px; color: var(--info); }
/* Das Attribut hidden muss gegen display:flex/block der Klassen gewinnen (Admin → Daten
   „Transaktionen löschen“, Admin → Einstellungen „Alle Betriebe“, Paket 5) */
.seiten-hinweis[hidden], .sperr-grund[hidden] { display: none; }
.btn + .sperr-grund { margin-top: 8px; }
html.dark .seiten-hinweis svg { color: var(--product); }
/* Links in Hinweisen in der Produktfarbe (hell #1d2846, dunkel #93a6d3) – vorher
   Browser-Standardblau, im Dark Mode 1,6:1 (F-01, F-07; Befund 2026-09-28) */
.seiten-hinweis a { color: var(--product); font-weight: 600; text-decoration: underline; }
.seiten-hinweis a:hover { color: var(--product-hover); }
.card .seiten-hinweis:last-child { margin-bottom: 0; }

/* Tabellen der Kunden-Seiten: Aktionen mit 44-px-Zielen (B-05, I-05) */
.kunden-tabelle td { vertical-align: top; }
.kunden-tabelle .aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kunden-tabelle .aktionen .btn { min-height: 44px; }
.btn-icon.btn-icon-44 {
  min-width: 44px; min-height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
}
.btn-icon.btn-icon-44 svg { width: 20px; height: 20px; }
.btn-icon:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sperr-grund { display: block; flex-basis: 100%; font-size: 12px; color: var(--n-700); }
.kat-name-zelle { font-weight: 600; color: var(--n-950); }
.kat-status { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; }
.kat-status svg { width: 14px; height: 14px; }
.leer-zeile td { color: var(--n-700); padding: 16px; }

/* Formular-Fehler direkt am Feld (E-03), Eingaben bleiben erhalten (E-06) */
.feld-fehler { display: flex; align-items: flex-start; gap: 4px; margin: 4px 0 0;
  font-size: 14px; color: var(--danger-text); }
.feld-fehler:empty { display: none; }
.feld-fehler svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; }
.form-input[aria-invalid="true"] { border-color: var(--danger-text); }
.form-pflicht { color: var(--danger-text); }
.form-legende { margin: 0 0 12px; font-size: 12px; color: var(--n-700); }
.kat-form .form-group + .form-group { margin-top: 16px; }
.kat-form fieldset { border: none; padding: 0; margin: 0; }
.kat-form legend { padding: 0; margin-bottom: 6px; font-size: 12px; font-weight: 600;
  color: var(--hfm-anthrazit-mid); text-transform: uppercase; letter-spacing: 0.05em; }
.kat-form .art-wahl { display: flex; gap: 24px; }
.kat-form .art-wahl label { font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--n-950); min-height: 44px; }

/* GuV: eigene Kategorie ohne „Zählt wie …“ (Text, nicht nur Farbe – F-07) */
.guv-vorlaeufig { margin-left: 8px; font-weight: 400; }
/* Admin → Kategorien: Aktionen untereinander, 44-px-Ziele (B-05, I-05); Haken mit
   44-px-Klickfläche – so passt die Tabelle bei 1280 px (Befund 2026-09-28) */
.kat-aktionen { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.kat-aktionen .btn { min-height: 44px; justify-content: center; white-space: nowrap; }
.check-ziel { display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; cursor: pointer; }
#admin-kat-table td { vertical-align: top; }
/* Admin → Kategorien: wer/wann „vom Anwendungsberater geprüft“ (Paket 4, 2026-09-28) */
.kat-meta { display: block; margin-top: 4px; font-size: 12px; color: var(--n-700); }
h3.psd2-schritt-titel { font-size: 14px; line-height: 20px; margin: 0 0 8px; }

/* ============================================================
   Dashboard-Übersicht „Wirtschaftsjahr im Überblick“ (2026-09-29, Betreiber-Entwurf)
   Nur Tokens (F-01…F-07); Punkt-Ampel nie allein – der Text daneben sagt dasselbe.
   ============================================================ */
.ueb { margin-bottom: 8px; }
.ueb-kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ueb-titel { font-size: 18px; font-weight: 600; color: var(--hfm-anthrazit-dark); margin: 0; }
.ueb-zeitraum { font-size: 12px; color: var(--n-700); }
.ueb-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ueb-kpi { align-items: flex-start; }
.ueb-kpi .kpi-content { width: 100%; min-width: 0; }
.ueb-kpi-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ueb-kpi .kpi-value { margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.ueb-kpi-sub { font-size: 12px; color: var(--n-700); }
.ueb-kpi-sub strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.ueb-punkt { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--n-400); }
.ueb-punkt.gruen { background: var(--success); }
.ueb-punkt.gelb { background: var(--warning); }
.ueb-punkt.rot { background: var(--danger); }
.ueb-pos { color: var(--wert-pos); }
.ueb-neg { color: var(--wert-neg); }
.ueb-warn { color: var(--warning-text); }
.ueb-reihe { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; margin-bottom: 24px; }
.ueb-reihe .card { margin-bottom: 0; }
.ueb-reihe.ueb-reihe-einzeln { grid-template-columns: minmax(0, 1fr); }
.ueb-kpi-sub .ueb-zeitraum-text { color: var(--n-600); }
.ueb-untertitel { font-size: 12px; color: var(--n-700); margin: 4px 0 0; }
.ueb-untertitel-abstand { margin: -8px 0 12px; }
.ueb-chart { height: 240px; }
/* Kontostandsverlauf füllt die Höhe der Reihe (Betreiber 2026-10-06: „sollte sich dem
   Fenster anpassen“) – neben einem langen Handlungsbedarf bleibt kein leerer Streifen */
#kontostand-chart-card { display: flex; flex-direction: column; }
#kontostand-chart-card .ueb-chart { flex: 1 1 auto; height: auto; min-height: 240px; }
.ueb-handlung { list-style: none; margin: 0; padding: 0; }
.ueb-handlung li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--n-200); }
.ueb-handlung-icon { width: 32px; height: 32px; border-radius: var(--radius-xs); display: flex;
  align-items: center; justify-content: center; flex-shrink: 0; }
.ueb-handlung-icon svg { width: 16px; height: 16px; }
.ueb-handlung-icon.warnung { background: var(--danger-soft); color: var(--danger-text); }
.ueb-handlung-icon.hinweis { background: var(--warning-soft); color: var(--warning-text); }
.ueb-handlung-icon.ok { background: var(--success-soft); color: var(--success-text); }
.ueb-handlung-titel { font-size: 14px; font-weight: 600; color: var(--hfm-anthrazit-dark); }
.ueb-handlung-text { font-size: 12px; color: var(--n-700); margin: 2px 0 4px; }
.ueb-handlung .btn-text { padding: 4px 0; font-size: 12px; font-weight: 600; }
.ueb-leer { font-size: 14px; color: var(--n-700); padding: 12px 0; }
.ueb-tabelle td, .ueb-tabelle th { font-variant-numeric: tabular-nums; }
.ueb-bereich { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.ueb-bereich-balken { width: 6px; height: 20px; border-radius: 3px; background: var(--product); flex-shrink: 0; }
.ueb-kasten { border: 1px solid var(--n-200); border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 12px; }
.ueb-kasten.info { background: var(--info-soft); border-color: rgba(var(--info-rgb), 0.25); }
.ueb-kasten.ok { background: var(--success-soft); border-color: rgba(var(--success-rgb), 0.25); }
.ueb-kasten-titel { display: flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 600;
  color: var(--hfm-anthrazit-dark); margin-bottom: 4px; }
.ueb-kasten-titel svg { width: 16px; height: 16px; flex-shrink: 0; }
.ueb-kasten p { font-size: 12px; color: var(--n-700); margin: 0 0 8px; }
.ueb-planner { background: var(--n-050); }
.ueb-planner-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ueb-planner-aktionen { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ueb-planner-aktionen .btn-text { padding: 4px 0; font-size: 12px; }
@media (max-width: 1200px) {
  .ueb-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ueb-reihe { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   Auswertung – Neuaufbau 2026-09-30 (Betreiber-Entwurf „Liquiditätsentwicklung“)
   Reiter-Karte, Kacheln, Brücke, Filterkarte, Tabelle mit Plan/Abweichung in der
   Zelle und fester Spalte „Ist gesamt“. Nur Tokens (§3); Regeln F-01/F-04/F-07,
   T-03/T-05, A-01/A-03/A-04, B-05/B-06, E-01, I-01/I-06.
   ============================================================ */
#page-auswertung, #page-bza, #page-dashboard { --aw-flaeche: var(--hfm-white); }
html.dark #page-auswertung, html.dark #page-bza, html.dark #page-dashboard { --aw-flaeche: var(--d-karte); }   /* = html.dark .card */

/* Reiter: Karte mit Tabs, aktiv = Produktfarbe (F-01) */
.aw-reiter { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; margin-bottom: 24px; }
/* nur die Auswertung hat zwei Reihen (Bereiche + Betriebszweige, 2026-10-06) – die BZA
   nutzt denselben Baustein mit einer Reihe nebeneinander */
.aw-reiter.aw-reiter-zweireihig { flex-direction: column; flex-wrap: nowrap; }
.aw-reiter-reihe { display: flex; flex-wrap: wrap; gap: 8px; }
/* zweite Reihe unter „Betriebszweige“ (2026-10-06): kleiner, abgesetzt */
.aw-unterreiter { padding: 8px 0 0 8px; border-top: 1px solid var(--n-200); }
.aw-reiter .bericht-tab.aw-unterreiter-tab { min-height: 36px; padding: 6px 14px; font-size: 14px; }
.aw-reiter .bericht-tab.aw-unterreiter-tab.active { background: var(--product-20); color: var(--n-950); border-color: var(--product-60); }
html.dark .aw-reiter .bericht-tab.aw-unterreiter-tab.active { background: rgba(var(--d-linie-rgb),0.12); color: #fff; }
.aw-zweig-kopf > th, .aw-zweig-kopf > td { border-top: 2px solid var(--n-200); }
.aw-reiter .bericht-tab { min-height: 44px; padding: 8px 16px; border-radius: var(--radius-sm); border-color: transparent; }
.aw-reiter .bericht-tab:not(.active):hover { background: var(--product-20); border-color: transparent; }

/* Kacheln */
.aw-kpis { margin-bottom: 16px; }
.aw-kpi-label { font-size: 14px; color: var(--n-700); }
.aw-kpi-marke { font-size: 12px; font-weight: 600; color: var(--n-700); }
.aw-kpi-marke.ueb-pos { color: var(--wert-pos); }
.aw-kpi-marke.ueb-neg { color: var(--wert-neg); }
.aw-kpi-icon { display: inline-flex; color: var(--n-700); }
.aw-kpi-icon .hfm-icon { width: 20px; height: 20px; }
.aw-kpi-warnung { background: var(--warning-soft); border-color: rgba(var(--warning-rgb), 0.60); }
.aw-kpi-warnung .aw-kpi-icon { color: var(--warning-text); }
html.dark .aw-kpi-warnung { background: var(--warning-soft); border-color: rgba(var(--warning-rgb), 0.60); }
.aw-kpi-gefahr { border-color: rgba(var(--danger-rgb), 0.60); }
.aw-kpi-link { padding: 0 4px; font-size: 12px; min-height: 0; }

/* Brücke Startbestand → Endbestand */
.aw-bruecke { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 24px; margin-bottom: 24px; }
.aw-bruecke-teil { flex: 1 1 180px; display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; }
.aw-bruecke-label { font-size: 12px; color: var(--n-700); }
.aw-bruecke-wert { font-size: 18px; font-weight: 700; color: var(--n-950); font-variant-numeric: tabular-nums; }
.aw-bruecke-zeichen { font-size: 18px; color: var(--n-600); }
.aw-bruecke-ende { background: var(--product-20); border-radius: var(--radius-sm); }

/* Filterkarte */
.aw-tabellen-karte { padding: 0; overflow: hidden; }
.aw-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 24px; padding: 20px 24px; }
.aw-feld { display: flex; flex-direction: column; gap: 8px; }
.aw-feld-label { font-size: 12px; font-weight: 600; color: var(--n-700); }
.aw-select { min-height: 44px; min-width: 160px; font-size: 14px; }
.aw-segment { display: inline-flex; gap: 4px; padding: 4px; background: var(--n-100);
  border: 1px solid var(--n-200); border-radius: var(--radius-sm); }
.aw-segment-btn { min-height: 36px; padding: 6px 12px; border: 1px solid transparent; border-radius: var(--radius-xs);
  background: transparent; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; font-weight: 400;
  color: var(--n-700); cursor: pointer; }
.aw-segment-btn:hover { color: var(--n-950); background: var(--product-20); }
.aw-segment-btn.active { background: var(--aw-flaeche); color: var(--n-950); font-weight: 600; border-color: var(--n-200); }
.aw-segment-btn:focus-visible, .aw-chevron:focus-visible, .aw-name-link:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px; }
.aw-schalter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-left: auto; }
.aw-check { min-height: 44px; }
.aw-check-gesperrt { color: var(--n-400); cursor: not-allowed; }
.aw-plan-hinweis { flex-basis: 100%; text-align: right; font-size: 12px; color: var(--n-700); }

/* Leiste über der Tabelle: Legende + Textaktionen */
.aw-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 4px 24px; border-top: 1px solid var(--n-200); border-bottom: 1px solid var(--n-200); background: var(--n-050); }
.aw-legende { display: flex; gap: 16px; font-size: 12px; color: var(--n-700); }
.aw-leg { display: inline-flex; align-items: center; gap: 8px; }
.aw-leg-linie { width: 20px; height: 0; border-top: 2px solid var(--n-950); }
.aw-leg-vorschau { border-top-style: dotted; border-top-color: var(--n-700); }
.aw-leg-plan { border-top-width: 1px; border-top-color: var(--n-600); }
.aw-leiste-aktionen { display: flex; flex-wrap: wrap; gap: 4px; }
.aw-leiste-aktionen .btn-text { min-height: 44px; font-size: 12px; text-decoration: none; }
.aw-leiste-aktionen .btn-text:hover { text-decoration: underline; }
.aw-leiste-aktionen .hfm-icon { width: 16px; height: 16px; }

/* Tabelle */
.aw-scroll { overflow: auto; max-height: calc(100vh - 160px); }
.aw-tabelle { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px;
  line-height: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aw-tabelle th, .aw-tabelle td { padding: 12px 16px; border-bottom: 1px solid var(--n-200); background: var(--aw-flaeche); }
.aw-tabelle thead th { position: sticky; top: 0; z-index: 3; text-align: right; vertical-align: bottom;
  font-weight: 600; color: var(--n-950); }
.aw-kopf-name { display: block; }
.aw-kopf-art { display: block; font-size: 12px; font-weight: 400; color: var(--n-700); }
.aw-tabelle thead th.aw-monat { cursor: pointer; }
.aw-tabelle thead th.aw-monat:hover .aw-kopf-name { text-decoration: underline; }
.aw-tabelle { --aw-name-b: 300px; --aw-summe-b: 152px; }
.aw-tabelle .aw-name { position: sticky; left: 0; z-index: 2; text-align: left; box-sizing: border-box;
  width: var(--aw-name-b); min-width: var(--aw-name-b); max-width: var(--aw-name-b);
  white-space: normal; font-weight: 400; }
.aw-tabelle thead .aw-name { z-index: 4; font-size: 12px; font-weight: 400; color: var(--n-700); vertical-align: middle; }
/* Gesamt-Spalten vorne und mitlaufend (2026-10-06): Ist gesamt · Gesamt inkl. Vorschau;
   feste Breiten, damit die zweite Spalte genau hinter der ersten klebt */
.aw-tabelle .aw-summe { position: sticky; left: var(--aw-name-b); z-index: 2; box-sizing: border-box;
  width: var(--aw-summe-b); min-width: var(--aw-summe-b); max-width: var(--aw-summe-b);
  white-space: normal; background: var(--n-050); }
.aw-tabelle .aw-summe-gesamt { left: calc(var(--aw-name-b) + var(--aw-summe-b)); }
.aw-tabelle .aw-summe-rand { border-right: 2px solid var(--product); }
.aw-tabelle thead .aw-summe .aw-kopf-name { white-space: normal; }
.aw-tabelle thead .aw-summe { z-index: 4; }
.aw-tabelle .aw-aktuell { background: var(--n-100); }
.aw-tabelle .aw-erste-vorschau { border-left: 1px solid var(--n-600); }
.aw-zahl { text-align: right; vertical-align: top; position: relative; }
.aw-wert { display: block; color: var(--n-950); }
.aw-wert.aw-fett { font-weight: 600; }
.aw-wert.aw-neg { color: var(--wert-neg); }
.aw-plan { display: block; font-size: 12px; color: var(--n-700); }
.aw-abw { display: block; font-size: 12px; font-weight: 600; color: var(--n-700); }
.aw-abw-pos { color: var(--wert-pos); }
.aw-abw-neg { color: var(--wert-neg); }
.aw-klickbar { cursor: pointer; }
.aw-klickbar:hover .aw-wert { text-decoration: underline; }
.aw-nv { color: var(--n-600); }

/* Zeilen-Ebenen */
.aw-zeile[onclick] { cursor: pointer; }
.aw-zeile:hover > td:not(.aw-summe):not(.aw-aktuell), .aw-zeile:hover > th { background: var(--n-050); }
.aw-name-innen { display: flex; align-items: flex-start; gap: 8px; }
.aw-ebene-1 .aw-name-innen { padding-left: 16px; }
.aw-ebene-2 .aw-name-innen { padding-left: 32px; }
.aw-ebene-3 .aw-name-innen { padding-left: 48px; }
.aw-ebene-4 .aw-name-innen { padding-left: 64px; }
.aw-z-0 > th, .aw-z-1 > th { font-weight: 600; }
.aw-z-0 > th, .aw-z-0 > td { background: var(--n-100); }
.aw-z-3 > th, .aw-z-4 > th { color: var(--n-700); }
/* Liquidität nach Erlösen und Kosten (2026-09-30): Zusatz wie „· ohne Betriebszweig“ */
.aw-name-hinweis { font-size: 12px; font-weight: 400; color: var(--n-700); }
.aw-name-sub { display: block; font-size: 12px; font-weight: 400; color: var(--n-700); }
.aw-chevron { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  margin: -2px 0; padding: 0; border: none; border-radius: var(--radius-xs); background: transparent;
  color: var(--n-950); cursor: pointer; flex-shrink: 0; transform: rotate(-90deg); transition: transform 0.15s ease; }
.aw-chevron.auf { transform: none; }
.aw-chevron:hover { background: var(--product-20); }
.aw-chevron svg { width: 20px; height: 20px; }
.aw-chevron-platz { display: inline-block; width: 24px; flex-shrink: 0; }
.aw-name-link { border: none; background: none; padding: 0; font: inherit; color: inherit; text-align: left;
  cursor: pointer; text-decoration: underline; text-decoration-color: var(--n-400); text-underline-offset: 4px; }
.aw-name-link:hover { color: var(--product); text-decoration-color: currentColor; }
.aw-name-text .hfm-icon { width: 16px; height: 16px; vertical-align: -3px; color: var(--n-700); }
.aw-ohne-bz > th .aw-name-text { color: var(--n-700); font-style: italic; }
.aw-ergebnis > th, .aw-ergebnis > td { border-top: 2px solid var(--n-950); }
.aw-wurzel > th, .aw-wurzel > td { border-bottom: 2px solid var(--n-200); }
.aw-zwischen > th, .aw-zwischen > td { background: var(--n-100); }
.aw-zwischen > th { font-weight: 700; }
.aw-afa > th, .aw-afa > td { color: var(--n-600); }
.aw-hinweis-zeile td { font-size: 12px; font-style: italic; color: var(--n-700); text-align: left; }
.aw-leer-meldung { text-align: left; color: var(--n-700); }
.aw-unter-limit .aw-wert { color: var(--danger-text); font-weight: 600; }
.aw-limit-icon { display: inline-flex; margin-left: 4px; vertical-align: -3px; }
.aw-limit-icon .hfm-icon { width: 16px; height: 16px; }
.aw-tabelle td.bem-mark { background: var(--warning-soft) !important; }
.aw-tabelle .aw-bem-kopf { text-align: left; min-width: 130px; }
.aw-tabelle .zell-bem-icon { top: 4px; right: 4px; }
.aw-fussnote { padding: 12px 24px; margin: 0; }
.aw-fussnote:empty { display: none; }

/* „Zum Ergebnis“: Zeile kurz hervorheben */
@keyframes aw-hervor { from { background: var(--product-20); } to { background: var(--aw-flaeche); } }
.aw-hervor > th, .aw-hervor > td { animation: aw-hervor 1.6s ease-out; }
.aw-tabelle th[tabindex="-1"]:focus { outline: none; }

@media (max-width: 900px) {
  .aw-filter, .aw-leiste { padding-left: 16px; padding-right: 16px; }
  .aw-schalter { margin-left: 0; }
  .aw-bruecke { padding: 12px 16px; }
  .aw-bruecke-zeichen { display: none; }
  /* schmal: nur der Name bleibt stehen, die Gesamt-Spalten laufen mit */
  .aw-tabelle { --aw-name-b: 180px; }
  .aw-tabelle .aw-summe { position: static; }
}
.aw-summe-art { display: block; font-size: 12px; font-weight: 400; color: var(--n-700); }
/* Dashboard 2026-10-06: Filterkarte, Handlungsbedarf in Gruppen, Kategorie-Auswahl */
.dash-filterkarte { margin-bottom: 24px; }
.dash-filterkarte .aw-filter { border-bottom: none; }
.ueb-handlung-gruppe { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; font-size: 14px;
  font-weight: 600; color: var(--n-950); }
.ueb-handlung-gruppe:first-child { margin-top: 0; }
.ueb-handlung-gruppe-icon { display: inline-flex; width: 16px; height: 16px; color: var(--n-700); }
.ueb-handlung-gruppe-icon svg { width: 16px; height: 16px; }
.ueb-handlung li { position: relative; }
.ueb-handlung-rumpf { flex: 1; min-width: 0; }
.ueb-handlung-icon.system { color: var(--product); background: var(--product-20); }
.ueb-handlung-aus { align-self: flex-start; border: none; background: none; padding: 0 4px; font-size: 18px;
  line-height: 1; color: var(--n-700); cursor: pointer; border-radius: var(--radius-xs); }
.ueb-handlung-aus:hover { color: var(--n-950); background: var(--n-100); }
.ueb-handlung-aus:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ueb-handlung-zurueck { margin-top: 8px; }
.dash-katwahl { position: relative; }
/* Knopf im Stil der Prognose-Knöpfe (2026-10-06: vorher größer, andere Rundung) */
.dash-katwahl-knopf { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; }
.dash-katwahl-pfeil { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; }
.dash-katwahl-pop.nach-oben { top: auto; bottom: calc(100% + 4px); }
.dash-katwahl-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; width: 320px;
  max-width: calc(100vw - 32px); padding: 12px; background: var(--hfm-white); border: 1px solid var(--n-200);
  border-radius: var(--radius-sm, 10px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
html.dark .dash-katwahl-pop { background: var(--d-flaeche); border-color: rgba(var(--d-linie-rgb),0.10); }
.dash-katwahl-liste { max-height: min(280px, 50vh); overflow-y: auto; overflow-x: hidden; margin: 8px 0; }
.dash-katwahl-liste .checkbox-label { min-width: 0; overflow-wrap: anywhere; }
.dash-katwahl-gruppe-kopf { margin: 8px 0 4px; font-size: 12px; font-weight: 600; color: var(--n-700); }
.dash-katwahl-liste .checkbox-label { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; font-size: 14px; }
.dash-katwahl-hk { font-size: 12px; color: var(--n-700); }
.dash-katwahl-fuss { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
/* Sprung aus dem Dashboard: Zahl kurz hervorheben */
@keyframes aw-zell-hervor { 0%, 60% { box-shadow: inset 0 0 0 2px var(--focus); background: var(--product-20); }
  100% { box-shadow: inset 0 0 0 2px transparent; } }
.aw-tabelle td.aw-zell-hervor, .aw-tabelle th.aw-zell-hervor { animation: aw-zell-hervor 4s ease-out; }
/* Hell/Dunkel-Schalter unten in der Seitenleiste */
.sidebar-user .mode-toggle.sidebar-modus { width: 28px; height: 28px; margin-left: auto; background: transparent;
  border-color: rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.85); }
.sidebar-user .mode-toggle.sidebar-modus:hover { color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.sidebar-user .mode-toggle.sidebar-modus:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sidebar-user .mode-toggle.sidebar-modus svg { width: 16px; height: 16px; }

/* Sprung-Links (2026-10-06): Verweise auf andere Orte, anklickbar */
.sprung-link { border: none; background: none; padding: 0; margin: 0; font: inherit; color: var(--product);
  text-decoration: underline; text-decoration-color: var(--n-400); text-underline-offset: 3px;
  cursor: pointer; text-align: inherit; }
.sprung-link:hover { text-decoration-color: currentColor; }
.sprung-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-xs); }
.sprung-link .badge { cursor: pointer; }
/* Laufender Monat (2026-10-06): erwarteter Wert, dahinter „(aktuell …)“ */
.aw-aktuell-ist { font-size: 12px; font-weight: 400; color: var(--n-700); }
.aw-erwartet { display: block; font-size: 12px; font-weight: 400; color: var(--n-700); white-space: normal; }

/* „Abweichung zum Bankstand“ (2026-10-06): Hinweiszeile, nicht Teil der Rechnung */
.aw-abgleich > th .aw-name-text { color: var(--n-700); font-style: italic; }

/* BZA im Stil der Auswertung (2026-09-30): Reiter, Kacheln, Filterkarte und
   Zweig-Tabellen nutzen die .aw-Bausteine; hier nur die BZA-eigenen Teile. */
.bza-filterkarte { margin-bottom: 24px; }
.bza-filter-hinweis { flex: 1 1 320px; margin: 0; align-self: center; font-size: 12px; color: var(--n-700); }
.bza-filterkarte .bza-bezugsbasis { font-size: 12px; color: var(--n-700); }
.bza-uebersicht { margin-bottom: 24px; }
.bza-uebersicht-titel { font-size: 18px; line-height: 24px; font-weight: 600; color: var(--n-950); margin: 0; }
.bza-uebersicht .ueb-untertitel { margin-bottom: 12px; }
.bza-uebersicht .aw-tabelle th:not(.aw-name), .bza-tabelle-neu th:not(.aw-name) { text-align: right; }
.bza-block .aw-tabelle { margin-top: 12px; }
.bza-block .aw-tabelle .aw-name { min-width: 200px; }
.aw-feld[hidden] { display: none; }
.bza-abschnitt > th, .bza-abschnitt > td { background: var(--n-050); }
.bza-abschnitt .aw-wert { font-weight: 600; }
.aw-ergebnis .aw-wert { font-weight: 600; }
#bza-reiter[hidden] { display: none; }

/* BZA-Stufenrechnung + Gemeinkosten-Umlage (2026-09-30 IV): Zweig-Karten untereinander,
   Kopf mit Umschalter Gesamt | je Einheit, Anteil-Spalte, Schritte, Reiter „Gemeinkosten
   verteilen“ (zweispaltig ab 1680 px). Nur Tokens (F-01), 4-px-Raster (A-01). */
#bza-bloecke > .bza-block { margin-bottom: 24px; }
.bza-karte-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  flex-wrap: wrap; margin-bottom: 12px; }
.bza-karte-kopf .bza-block-titel { margin-bottom: 4px; }
.bza-karte-kopf .ueb-untertitel { margin: 0; }
.bza-stufen th:not(.aw-name) { text-align: right; }
.bza-stufen .bza-anteil { color: var(--n-700); min-width: 96px; }
.bza-stufen .aw-name { min-width: 280px; }
.bza-fussnote { margin: 12px 0 0; font-size: 12px; color: var(--n-700); }
.bza-textlink { padding: 0; min-height: 0; font-size: 12px; }
.bza-vergleich-karte .bza-block-titel { color: var(--n-950); }
.bza-reiter-zahl { margin-left: 4px; font-size: 12px; }
.bza-schritte { list-style: none; margin: 12px 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bza-schritte-senkrecht { grid-template-columns: minmax(0, 1fr); }
.bza-schritt { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px;
  background: var(--n-050); border: 1px solid var(--n-200); border-radius: var(--radius-xs); font-size: 14px; }
.bza-schritt span { font-size: 12px; color: var(--n-700); }
@media (max-width: 900px) { .bza-schritte { grid-template-columns: minmax(0, 1fr); } }
.bza-gk-raster { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 1680px) { .bza-gk-raster { grid-template-columns: minmax(0, 1fr); } }
.bza-gk-pools { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.bza-gk-pools .bza-uebersicht { margin-bottom: 0; }
.bza-gk-tabelle th:not(.aw-name) { text-align: right; }
.bza-gk-tabelle .bza-gk-schluessel, .bza-gk-tabelle .bza-gk-status { text-align: left; }
.bza-gk-tabelle td { vertical-align: middle; }
.bza-gk-schluessel select { min-width: 190px; }
.bza-gk-verteilung td { padding-top: 0; font-size: 12px; color: var(--n-700); text-align: left; }
.bza-gk-manuell td { background: var(--n-050); text-align: left; }
.bza-gk-felder { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.bza-gk-feld { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.bza-gk-feld input { width: 88px; text-align: right; }
.bza-gk-aktionen { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.bza-gk-summe { margin-right: auto; font-size: 12px; color: var(--n-700); }
.bza-gk-summe.bza-gk-summe-fehler { color: var(--danger-text); font-weight: 600; }
.bza-gk-unter { font-size: 14px; font-weight: 600; margin: 24px 0 8px; color: var(--n-950); }

/* --- HfM-Bereiche (DECISIONS 2026-10-01 II): Controlling | Analytics ------
   Umschalter in der Seitenleiste (nur bei beiden Bereichen). Zwei Knöpfe als
   Segment, Rundung 6/10 px statt Pille (A-04), Ziel 44 px (B-05), Fokus
   #2f80ed, aktiver Bereich = hellere Sidebar-Stufe wie der aktive Menüpunkt
   (F-01). Menüpunkte des anderen Bereichs blendet die Body-Klasse aus. */
.bereich-umschalter {
  display: flex;
  gap: 4px;
  margin: 0 14px 8px;   /* direkt unter dem Logo, bündig mit der Betriebskarte */
  padding: 4px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.06);
}
.bereich-umschalter[hidden] { display: none; }
.bereich-knopf {
  flex: 1;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: rgba(255,255,255,0.72);
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.bereich-knopf:hover { background: rgba(255,255,255,0.09); color: #ffffff; }
.bereich-knopf.active { background: var(--sidebar-aktiv); color: #ffffff; }
.bereich-knopf:focus-visible { outline: 2px solid #2f80ed; outline-offset: 2px; }

body.bereich-controlling .sidebar-nav [data-bereich="analytics"],
body.bereich-analytics .sidebar-nav [data-bereich="controlling"],
.sidebar-nav .nav-label.nav-label-leer { display: none; }

/* Buchführung (IST) im Bereich Controlling – vorher Inline-Stile (2026-07-22) */
.bf-monate-wahl { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.bf-karte { margin-bottom: 16px; overflow-x: auto; }
.bf-tabelle { width: 100%; }
.bf-tabelle th.bf-titel { text-align: left; }
.bf-tabelle .bf-position { padding-left: 20px; }
.bf-tabelle .bf-code { white-space: nowrap; }
.bf-tabelle .bf-zahl { text-align: right; white-space: nowrap; }
.bf-tabelle .bf-fett { font-weight: 600; }
.bf-tabelle .bf-ergebnis { font-weight: 700; }
.bf-tabelle tr.bf-summe { border-top: 2px solid var(--n-950); }

/* --- FINANZIERUNGEN (2026-10-01, finanzierungen.js) --------------------------
   Tilgung = Produktfarbe, Zinsen = 60-%-Nuance (F-04; Gold bleibt frei, F-03),
   Werte immer zusätzlich als Text/Tooltip (F-07). */
.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;
}
.fz-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 16px; }
.fz-kpi { padding: 16px 20px; margin: 0; }
.fz-kpi-titel { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--n-700); }
.fz-kpi-wert { font-size: 26px; font-weight: 700; color: var(--n-950); margin: 8px 0 4px; font-variant-numeric: tabular-nums; }
.fz-kpi-unter { font-size: 12px; color: var(--n-700); }
.fz-kpi-hinweis { color: var(--warning-text); font-weight: 600; }
.fz-raster { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; margin-bottom: 16px; }
.fz-raster > .card, .fz-rechts > .card { margin: 0; }
.fz-rechts { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1100px) { .fz-raster { grid-template-columns: 1fr; } }
.fz-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.fz-schalter { display: inline-flex; border: 1px solid var(--n-200); border-radius: var(--radius-sm); padding: 2px; }
.fz-schalter button {
  min-height: 36px; padding: 4px 16px; border: none; border-radius: var(--radius-xs);
  background: transparent; color: var(--n-950); font: 600 14px 'Open Sans', Arial, sans-serif; cursor: pointer;
}
.fz-schalter button.aktiv { background: var(--product); color: var(--hfm-white); }
html.dark .fz-schalter button.aktiv { color: var(--d-seite); }
.fz-schalter button:focus-visible, .fz-auf:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.fz-legende { display: flex; gap: 16px; font-size: 12px; color: var(--n-700); margin-bottom: 8px; }
.fz-legende span { display: inline-flex; align-items: center; gap: 6px; }
.fz-farbe { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.fz-tilgung { background: var(--product); }
.fz-zins { background: var(--product-60); }
.fz-zeile {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) 112px 132px; align-items: center;
  gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--n-200); font-size: 14px;
}
.fz-zeile-label { font-weight: 700; color: var(--n-950); }
.fz-zeile-label small { display: block; font-size: 12px; font-weight: 400; color: var(--n-700); }
.fz-spur { display: flex; height: 18px; background: var(--n-100); border-radius: var(--radius-xs); overflow: hidden; }
.fz-spur > span { display: block; height: 100%; }
.fz-spur-schmal { height: 10px; }
.fz-zeile-wert { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.fz-zeile-rest { text-align: right; font-size: 12px; color: var(--n-700); font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .fz-zeile { grid-template-columns: 72px minmax(0, 1fr) 96px; }
  .fz-zeile-rest { grid-column: 2 / 4; text-align: left; }
}
.fz-vorschau-zeile { display: grid; grid-template-columns: 72px minmax(0, 1fr) 96px; gap: 8px; align-items: center; font-size: 12px; padding: 4px 0; }
.fz-ereignisse { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fz-ereignisse li {
  display: flex; flex-direction: column; gap: 4px; padding: 8px 12px;
  border: 1px solid var(--n-200); border-radius: var(--radius-sm); font-size: 14px;
}
.fz-ereignisse li span { font-size: 12px; color: var(--n-700); }
.fz-ereignisse li.fz-bald { background: var(--warning-soft); border-color: rgba(var(--warning-rgb), 0.35); }
.fz-bald-text { color: var(--warning-text) !important; font-weight: 600; }
.fz-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.fz-filter .form-input { min-width: 220px; }
.fz-tabelle td { vertical-align: middle; }
.fz-tabelle .zahl, .fz-plan .zahl, .fz-vorschau .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.fz-tabelle td small, .fz-name small { display: block; font-size: 12px; color: var(--n-700); }
.fz-name { display: inline-flex; flex-direction: column; vertical-align: middle; }
.fz-auf {
  width: 32px; height: 32px; margin-right: 8px; border: 1px solid var(--n-400); border-radius: var(--radius-xs);
  background: var(--n-050); color: var(--n-950); font: 700 16px 'Open Sans', Arial, sans-serif; cursor: pointer; vertical-align: middle;
}
.fz-aktionen { white-space: nowrap; }
.fz-berater { font-size: 12px; color: var(--n-700); }
.fz-detail > td { background: var(--n-050); }
.fz-detail-raster { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); gap: 24px; padding: 8px 4px; }
@media (max-width: 900px) { .fz-detail-raster { grid-template-columns: 1fr; } }
.fz-fakten { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 14px; }
.fz-fakten dt { color: var(--n-700); }
.fz-fakten dd { margin: 0; color: var(--n-950); }
.fz-hinweise { margin: 0 0 12px; padding: 8px 12px 8px 28px; background: var(--warning-soft); border-radius: var(--radius-xs); color: var(--warning-text); font-size: 14px; }
.fz-plan-titel { font-size: 14px; font-weight: 600; margin: 0 0 8px; }
.fz-leer { padding: 24px; }

/* --- ZUORDNUNGSREGELN (Übersicht nach Entwurf, 2026-10-01, regeln.js) -------
   Kennzahlen nutzen .fz-kpis/.fz-kpi (Finanzierungen) – Änderungen dort wirken
   auf beide Seiten. Schalter: role="switch", Zustand zusätzlich als Text (F-07). */
.rg-filter .form-input { min-width: 180px; }
.rg-filter #regel-filter-suche { min-width: 260px; }
.rg-tabelle td { vertical-align: middle; }
.rg-tabelle td small { display: block; font-size: 12px; color: var(--n-700); margin-top: 2px; }
.rg-tabelle td .badge + small { margin-top: 4px; }
.rg-tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.rg-pausiert td:not(.rg-status):not(.rg-aktionen) { color: var(--n-700); }
.rg-ohne { color: var(--warning-text); font-weight: 600; }
.rg-status { white-space: nowrap; }
.rg-status .badge { margin-left: 8px; vertical-align: middle; }
.rg-schalter {
  position: relative; width: 44px; height: 24px; padding: 0; vertical-align: middle;
  border: none; border-radius: 12px; background: var(--n-400); cursor: pointer; transition: var(--transition);
}
.rg-schalter.an { background: var(--success); }
.rg-knopf {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--hfm-white); transition: var(--transition);
}
.rg-schalter.an .rg-knopf { left: 23px; }
.rg-schalter:focus-visible, .rg-aktion:focus-visible, .rg-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rg-aktionen { white-space: nowrap; text-align: right; }
.rg-aktion {
  min-height: 36px; padding: 4px 8px; border: none; background: transparent; cursor: pointer;
  font: 600 14px 'Open Sans', Arial, sans-serif; color: var(--product); border-radius: var(--radius-xs);
}
.rg-aktion:hover { background: var(--product-20); }
.rg-gefahr, .rg-gefahr .betrieb-dropdown-name { color: var(--danger-text) !important; }
.rg-aktion.rg-gefahr:hover { background: var(--danger-soft); }
.rg-link {
  margin-top: 8px; padding: 0; border: none; background: none; cursor: pointer;
  font: 600 12px 'Open Sans', Arial, sans-serif; color: var(--product); text-decoration: underline;
}

/* --- VERTRÄGE & KUNDENNUMMERN (2026-10-02, vertraege.js) ---------------------
   Kacheln/Reiter/Schalter = Bausteine der Finanzierungen und Zuordnungsregeln
   (.fz-kpi, .fz-schalter, .rg-schalter, .rg-aktion). Status immer auch als Text
   (F-07); Erkennungsbalken grün = alle passend, Warnfarbe = Abweichungen. */
.vt-anzahl { font-weight: 400; margin-left: 4px; font-variant-numeric: tabular-nums; }
.vt-tabelle td strong { color: var(--n-950); }
.vt-partner { display: flex; align-items: center; gap: 12px; }
.vt-partner > span:last-child { display: flex; flex-direction: column; }
.vt-kuerzel {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--n-100);
  border: 1px solid var(--n-200); font-size: 12px; font-weight: 700; color: var(--product);
}
.vt-nummer { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.vt-erkennung { min-width: 160px; }
.vt-balken {
  display: block; width: 120px; height: 6px; margin: 4px 0 2px; border-radius: 3px;
  background: var(--n-200); overflow: hidden;
}
.vt-balken > span { display: block; height: 100%; background: var(--success); }
.vt-balken > span.vt-teil { background: var(--warning); }
.vt-leise { font-size: 12px; color: var(--n-700); margin: 0; }
.vt-schalter-text { font-size: 12px; font-weight: 600; color: var(--n-700); margin-left: 8px; vertical-align: middle; }
.vt-keine { padding: 16px 0; }
.vt-leer-titel { font-size: 16px; font-weight: 600; margin: 0 0 4px; color: var(--n-950); }
.vt-vorschlaege { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-bottom: 12px; }
.vt-vorschlag {
  display: flex; gap: 12px; padding: 16px; border: 1px solid var(--n-200);
  border-radius: var(--radius-sm); background: var(--n-050);
}
.vt-vorschlag-icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--warning-soft);
  color: var(--warning-text); font-size: 18px; font-weight: 700;
}
.vt-vorschlag-text h3 { font-size: 14px; font-weight: 600; margin: 0 0 4px; color: var(--n-950); }
.vt-vorschlag-text p { font-size: 14px; margin: 0 0 4px; color: var(--n-950); }
.vt-vorschlag-text p.vt-leise { font-size: 12px; color: var(--n-700); overflow-wrap: anywhere; }
.vt-vorschlag-aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.vt-abschnitt { font-size: 14px; font-weight: 600; color: var(--n-950); margin: 0 0 12px; }
.vt-label { display: block; font-size: 14px; font-weight: 600; color: var(--n-950); margin-bottom: 8px; }
.vt-partner-box {
  padding: 16px; margin-bottom: 16px; border: 1px solid var(--n-200);
  border-radius: var(--radius-sm); background: var(--n-050);
}
.vt-merkmal-zeile { display: flex; gap: 8px; margin-top: 8px; }
.vt-merkmal-zeile .form-input { flex: 1; }
.vt-ueber { margin: 4px 0 0; padding-left: 20px; font-size: 14px; }
.vt-freigabe {
  margin-top: 16px; padding: 16px; border: 1px solid var(--n-200);
  border-radius: var(--radius-sm); background: var(--n-050);
}
.vt-freigabe-zeile { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.vt-freigabe-zeile p { margin: 4px 0 0; }
.vt-schalter { display: inline-flex; align-items: center; white-space: nowrap; }
.vt-jetzt { margin-top: 12px; }
.vt-links { margin-right: auto; }

/* --- Regeltyp „Zeit / Saison“ (R7, 2026-10-02, regel_bedingungen.js) ---------
   zwölf Monats-Umschalter im Kästchen „nur in Monaten“; gewählt = Produktfarbe
   gefüllt, Zustand zusätzlich über aria-pressed und Form (F-07, B-05/B-06). */
.rb-monate { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.rb-monat {
  min-width: 44px; min-height: 36px; padding: 4px 8px; border: 1px solid var(--n-400);
  border-radius: var(--radius-xs); background: var(--hfm-white); color: var(--n-950);
  font: 600 14px 'Open Sans', Arial, sans-serif; cursor: pointer;
}
.rb-monat:hover { border-color: var(--product); background: var(--product-20); }
.rb-monat.an { background: var(--product); border-color: var(--product); color: var(--hfm-white); }
html.dark .rb-monat { background: var(--n-050); }
html.dark .rb-monat.an { background: var(--product); color: var(--d-seite); }
.rb-monat:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Haken „Dynamischer Schlüssel“ (R7): steht in .form-group – deren Label-Stil
   (12 px, Versalien) hier aufheben, es ist ein Satz, kein Feldname (T-02/T-03) */
.form-group label.zweig-aufteilung-dyn, .zweig-aufteilung-dyn {
  align-items: flex-start; margin: 4px 0 8px; font-size: 14px; font-weight: 400;
  color: var(--n-950); text-transform: none; letter-spacing: normal;
}
.zweig-aufteilung-dyn input { margin-top: 3px; }

/* „Mein Konto“-Dialog (2026-10-15, konto.js): drei Abschnitte mit Trennlinie,
   Label eng am Feld, Abschnitte weiter auseinander (A-02), Status mit Icon und
   Text (S-01, F-07), Avatar-Vorschau funktional rund (A-04). Nur Tokens –
   der Dunkelmodus folgt über html.dark (--d-*, --n-*, --product). */
.mk-kopf-aktionen { display: inline-flex; align-items: center; gap: 8px; }
.mk-rumpf { display: flex; flex-direction: column; gap: 24px; }
.mk-abschnitt { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.mk-abschnitt + .mk-abschnitt { padding-top: 24px; border-top: 1px solid var(--n-200); }
.mk-titel { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; color: var(--n-950); }
.mk-optional { font-weight: 400; color: var(--n-700); }
.mk-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 4px; }
.mk-meldung { margin: 0; }
.mk-status { display: flex; align-items: flex-start; gap: 4px; margin: 0;
  font-size: 14px; color: var(--success-text); }
.mk-status:empty { display: none; }
.mk-status svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; }
.mk-bild-zeile { display: flex; align-items: center; gap: 16px; }
.mk-bild-vorschau {
  display: grid; place-items: center; flex: none;
  width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
  background: var(--product-20); color: var(--product);
}
.mk-bild-vorschau .avatar-initialen { font-size: 24px; }
.mk-bild-vorschau .sidebar-user-icon svg { width: 24px; height: 24px; }
.mk-bild-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-bild-knoepfe .btn { min-height: 44px; }
.mk-bild-knoepfe .btn[hidden] { display: none; }