/* ============================================================
   sections/liquiditaet/liquiditaet.css — Liquiditätsplanung (Finanzen)
   KPI-Karten + Endbestand-Chart + Wasserfall-Tabelle (Monate als Spalten).
   Drei Schichten visuell getrennt: Ist (getönt/gesperrt) · Gesichert · Plan/Prognose.
   Alle Regeln mit Tokens. Buttons/Inputs liegen unter .app-scope (Shell).
   ============================================================ */

/* ── Außenabstände: Toolbar + Inhalt bündig & großzügig ──── */
/* Inhalt an die (app-standard) Toolbar-Kante ausrichten + großzügiger Boden. */
#tab-content-liquiditaet .lod-section-scroll { padding: var(--space-5) var(--space-4-5) var(--space-6); }

/* ── KPI-Karten ────────────────────────────────────────────
   KpiGrid stylt die .kpi-card jetzt self-scoped ueber `.kpi-grid` (setzt das
   Modul selbst auf den Host `#liq-kpis`) — kein `.dash-host`-Wrapper noetig,
   keine Layout-Replikation mehr hier. Nur der Aussenabstand ist section-lokal. */
/* Zweiteilung: links 2×3 KPI-Kacheln, rechts das Diagramm (nebeneinander).
   Die 3-Spalten-Kachelung kommt aus dem Modul via KpiGrid.create({columns:3}). */
/* Beide Spalten gleich hoch (stretch) → KPI-Block-Unterkante bündig mit dem
   Diagramm. */
.liq-top { display: flex; gap: var(--space-4); align-items: stretch; margin-bottom: var(--space-5); }
.liq-kpis { flex: 0 0 42%; min-width: 0; }
/* Der KPI-Host (Modul-Grid) füllt die Spaltenhöhe; beide Reihen exakt gleich
   hoch → alle 6 Kacheln identisch hoch, Unterkante bündig mit dem Chart.
   (ID-Selektor auf den section-eigenen Host — kein Eingriff ins KpiGrid-Modul.) */
#liq-kpis { grid-template-rows: repeat(2, minmax(0, 1fr)); }

/* ── Chart-Karte ───────────────────────────────────────── */
.liq-chart-host {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--lod-white);
  border: 1px solid var(--lod-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(15, 46, 72, 0.05);
  padding: var(--space-4) var(--space-5) var(--space-3);
  margin-bottom: 0;
}
.liq-chart-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.liq-chart-title { font-size: 14px; font-weight: 700; color: var(--lod-gray-900); }
.liq-chart-legend { display: flex; gap: var(--space-4); font-size: 11px; color: var(--lod-gray-600); }
.liq-cl { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.liq-cl-line { width: 18px; height: 0; border-top: 2.5px solid var(--lod-darkblue-700); }
.liq-cl-prog { border-top-style: dashed; border-top-color: var(--lod-darkblue-400); }

.liq-chart-svg { width: 100%; height: auto; display: block; max-height: 220px; margin-top: auto; margin-bottom: auto; }
.liq-area { fill: url(#liqGrad); }
.liq-grid { stroke: var(--lod-gray-200); stroke-width: 1; }
.liq-grid-zero { stroke: var(--lod-danger); stroke-dasharray: 4 3; opacity: 0.55; }
.liq-y-lbl { fill: var(--lod-gray-500); font-size: 11px; font-family: var(--lod-font-body); }
.liq-y-zero { fill: var(--lod-danger); }
.liq-x-lbl { fill: var(--lod-gray-500); font-size: 12px; font-family: var(--lod-font-body); }
.liq-x-ist { fill: var(--lod-gray-700); font-weight: 600; }
.liq-line { fill: none; stroke: var(--lod-darkblue-700); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.liq-line-prog { stroke: var(--lod-darkblue-400); stroke-dasharray: 6 4; }
.liq-divider { stroke: var(--lod-gray-300); stroke-width: 1; stroke-dasharray: 3 3; }
.liq-div-lbl { fill: var(--lod-gray-500); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.liq-dot { fill: var(--lod-darkblue-700); stroke: var(--lod-white); stroke-width: 1.5; }
.liq-dot--prog { fill: var(--lod-white); stroke: var(--lod-darkblue-400); }
.liq-dot--neg { fill: var(--lod-danger); stroke: var(--lod-white); }
.liq-dot--min { stroke: var(--lod-darkblue-900); stroke-width: 2; }

/* ── Tabellen-Karte ────────────────────────────────────── */
.liq-table-host {
  background: var(--lod-white);
  border: 1px solid var(--lod-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(15, 46, 72, 0.05);
  overflow: hidden;
}
.liq-table-scroll { overflow-x: auto; }
.liq-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 1462px;
  /* Feste Spaltenbreiten: die Spalten dürfen sich beim Jahreswechsel NICHT je
     nach Zahlenlänge neu berechnen (sonst „springt" die Tabelle). Erste Spalte
     + Gesamt-Spalte fix, die 12 Monatsspalten teilen den Rest gleichmäßig. */
  table-layout: fixed;
  font-size: 13px;
}
.liq-c {
  padding: var(--space-2-5) var(--space-3-5);
  border-bottom: 1px solid var(--lod-border-light);
  white-space: nowrap;
}
.liq-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Sticky Kopf + erste Spalte */
.liq-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--lod-gray-50);
  color: var(--lod-gray-600);
  font-weight: 600; font-size: 12px;
  border-bottom: 1px solid var(--lod-border);
}
.liq-rowlabel {
  position: sticky; left: 0; z-index: 1;
  background: var(--lod-white);
  text-align: left; color: var(--lod-gray-800); font-weight: 500;
  width: 232px; min-width: 232px; max-width: 232px;
  /* Sicherheitsnetz: langes Label nie überlaufen lassen — clippen mit „…"
     (KEIN Zeilenumbruch), volle Bezeichnung steckt im title-Tooltip. */
  overflow: hidden; text-overflow: ellipsis;
  box-shadow: 1px 0 0 var(--lod-border-light);
}
.liq-table thead th.liq-rowlabel { z-index: 3; background: var(--lod-gray-50); color: var(--lod-gray-700); font-weight: 700; }

.liq-neg { color: var(--lod-danger); }
.liq-muted { color: var(--lod-gray-400); }

/* Row-Hover (nur normale Zeilen; Spezial-Zeilen behalten ihren Grund) */
.liq-row:hover td { background: var(--lod-darkblue-50); }

/* Ist-Schicht: getönte Spalten */
.liq-ist { background: var(--lod-darkblue-50); color: var(--lod-gray-800); }
.liq-ist.liq-neg { color: var(--lod-danger); }
.liq-table thead th.liq-th-ist { background: var(--lod-darkblue-100); color: var(--lod-darkblue-800); }
.liq-th-tag {
  display: inline-block; margin-left: var(--space-1);
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--lod-darkblue-700); background: var(--lod-white);
  border-radius: var(--radius-sm); padding: 0 var(--space-1); vertical-align: middle;
}
/* Live-Zelle: laufender Monat, in BC bereits gebuchter Umsatz („vor der DATEV-Buchung") */
.liq-live { background: var(--lod-amber-50); color: var(--lod-amber-800); }
.liq-live.liq-neg { color: var(--lod-danger); }
.liq-table thead th.liq-th-live { background: var(--lod-amber-200); color: var(--lod-amber-800); }
.liq-th-tag--live { color: var(--lod-amber-800); }
/* Prognose-Trenner (erste Zukunftsspalte) */
.liq-col-prog { border-left: 2px dashed var(--lod-darkblue-200); }

/* Auto-Zeile (Gesichert) */
.liq-auto { color: var(--lod-turquoise-900); background: var(--lod-turquoise-50); }
.liq-auto-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--lod-turquoise-900); background: var(--lod-turquoise-100);
  border-radius: var(--radius-sm); padding: 0 var(--space-1); margin-left: var(--space-1); vertical-align: middle;
}

/* Gruppen-/Summen-/Ergebnis-Zeilen (mit .liq-table-Prefix, damit sie den Hover überstimmen) */
.liq-table tbody tr.liq-row--grouphead td {
  background: var(--lod-gray-100); color: var(--lod-gray-600);
  font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: 0.06em;
  padding-top: var(--space-2); padding-bottom: var(--space-2);
}
.liq-table tbody tr.liq-row--summe td { font-weight: 700; color: var(--lod-gray-900); background: var(--lod-gray-50); border-top: 1px solid var(--lod-border); }
.liq-table tbody tr.liq-row--netto td { font-weight: 600; color: var(--lod-gray-800); background: var(--lod-gray-50); }
.liq-table tbody tr.liq-row--end td {
  font-weight: 700; background: var(--lod-darkblue-700); color: var(--lod-white);
  border-top: 2px solid var(--lod-darkblue-800); border-bottom: none;
}
.liq-table tbody tr.liq-row--end td.liq-neg { color: var(--lod-danger-300); }
.liq-table tbody tr.liq-row--end .liq-rowlabel { background: var(--lod-darkblue-700); color: var(--lod-white); box-shadow: none; }
.liq-table tbody tr.liq-row--end td.liq-total-col { background: var(--lod-darkblue-800); }
/* Monats-Endergebnis (Netto-Liquidität) + Endbestand: Vorzeichen klar grün/rot */
.liq-table tbody tr.liq-row--netto td.liq-sign-pos { color: var(--lod-success-700); font-weight: 700; }
.liq-table tbody tr.liq-row--netto td.liq-sign-neg { color: var(--lod-danger); font-weight: 700; }
.liq-table tbody tr.liq-row--end td.liq-sign-pos { color: var(--status-success-border); }
.liq-table tbody tr.liq-row--end td.liq-sign-neg { color: var(--lod-danger-300); }

/* Umsatzerlöse (tatsächlich) — Ist-Gesamtzeile, dezent kursiv */
.liq-table tbody tr.liq-row--isttotal td { font-style: italic; color: var(--lod-gray-600); }
.liq-table tbody tr.liq-row--isttotal .liq-rowlabel { font-style: italic; color: var(--lod-gray-600); }
.liq-table tbody tr.liq-row--delta td { font-size: 11px; border-top: 1px dashed var(--lod-border); color: var(--lod-gray-500); }
.liq-delta-pos { color: var(--lod-success); }
.liq-delta-neg { color: var(--lod-danger); }

/* Gesamt-Spalte */
.liq-total-col { width: 120px; border-left: 1px solid var(--lod-border); background: var(--lod-gray-50); font-weight: 700; }
.liq-table thead th.liq-total-col { background: var(--lod-gray-100); }

/* Editierbare Plan-Zelle + Prognose-Platzhalter */
.liq-edit { padding: var(--space-1) var(--space-1-5); }
.app-scope .liq-cell-input {
  width: 100%; min-width: 72px; box-sizing: border-box;
  text-align: right; font-variant-numeric: tabular-nums;
  font-size: 13px; font-family: var(--lod-font-body); color: var(--lod-gray-900);
  padding: var(--space-1) var(--space-2);
  border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent;
}
.app-scope .liq-cell-input::placeholder { color: var(--lod-gray-400); font-style: italic; }
.app-scope .liq-cell-input:hover { border-color: var(--lod-border); background: var(--lod-white); }
.app-scope .liq-cell-input:focus {
  outline: none; border-color: var(--lod-darkblue-500); background: var(--lod-white);
  box-shadow: 0 0 0 2px var(--lod-darkblue-100);
}
.liq-prog .liq-cell-input { color: var(--lod-gray-500); }

/* ── Jahres-Switcher (Toolbar) ─────────────────────────── */
.liq-year-switch { display: inline-flex; align-items: center; gap: var(--space-1); }
.app-scope .liq-year-nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 1px solid var(--lod-border);
  border-radius: var(--radius-md); background: var(--lod-white); cursor: pointer;
}
.app-scope .liq-year-nav:hover { background: var(--lod-gray-50); border-color: var(--lod-gray-300); }
.app-scope .liq-year-nav img { width: 18px; height: 18px; opacity: 0.75; }
/* An den Jahres-Grenzen (2023 … laufendes+2) deaktiviert. */
.app-scope .liq-year-nav:disabled { opacity: 0.35; cursor: default; }
.app-scope .liq-year-nav:disabled:hover { background: var(--lod-white); border-color: var(--lod-border); }
.liq-year-lbl { min-width: 52px; text-align: center; font-weight: 700; font-size: 15px; color: var(--lod-gray-900); }

/* ── CSV-Button (Toolbar) — eigenständige Outline-CTA ──────
   NICHT app-cta-btn: dessen dunkelblauer Fill + weiß-invertiertes Icon ergaben
   auf hellem Grund weiß-auf-weiß. Hier explizit hell mit dunklem Text/Icon. */
.app-scope .liq-csv-btn {
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  height: 36px; padding: 0 var(--space-3-5); box-sizing: border-box;
  border: 1px solid var(--lod-border); border-radius: var(--radius-lg);
  background: var(--lod-white); color: var(--lod-gray-800);
  font-weight: var(--fw-semibold); font-size: var(--fs-body);
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.app-scope .liq-csv-btn:hover { background: var(--lod-gray-50); border-color: var(--lod-gray-300); }
.app-scope .liq-csv-btn img { width: 16px; height: 16px; opacity: 0.8; filter: none; }
.app-scope .liq-csv-btn:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); }

/* ── Legende + Hinweis ─────────────────────────────────── */
.liq-legende {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  padding: var(--space-2-5) var(--space-3-5);
  border-top: 1px solid var(--lod-border-light);
  background: var(--lod-gray-50);
  font-size: 12px; color: var(--lod-gray-600);
}
.liq-lg { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.liq-lg-sw { width: 12px; height: 12px; border-radius: var(--radius-xs); display: inline-block; }
.liq-lg-ist  { background: var(--lod-darkblue-100); }
.liq-lg-ges  { background: var(--lod-turquoise-100); border: 1px solid var(--lod-turquoise-300); }
.liq-lg-prog { background: var(--lod-white); border: 1px dashed var(--lod-darkblue-300); }
.liq-lg-plan { background: var(--lod-white); border: 1px solid var(--lod-gray-300); }

.liq-hint { margin: var(--space-4) 0 0; font-size: 12px; line-height: 1.55; color: var(--lod-gray-600); }
.liq-hint b { color: var(--lod-gray-800); font-weight: 600; }

/* ── Deep-Dive: anklickbare Zellen + Detail-Drawer-Inhalt ──── */
.liq-drillable { cursor: pointer; text-decoration: underline dotted var(--lod-gray-300); text-underline-offset: 3px; }
.liq-drillable:hover { color: var(--lod-darkblue-700); text-decoration-color: var(--lod-darkblue-400); background: var(--lod-darkblue-50); }
.liq-drillable:focus-visible { outline: 2px solid var(--lod-darkblue-400); outline-offset: -2px; }

.liq-dd { display: flex; flex-direction: column; gap: var(--space-4); }
@media (min-width: 600px) {
  .liq-dd--2col { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .liq-dd--2col .liq-dd-sec { flex: 1 1 45%; min-width: 0; }
  .liq-dd--2col .liq-dd-sec--full { flex-basis: 100%; }
  .liq-dd--2col .liq-dd-hint { flex-basis: 100%; }
}
.liq-dd-sec { display: flex; flex-direction: column; gap: var(--space-1); }
.liq-dd-h { display: flex; align-items: baseline; gap: var(--space-2); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--lod-gray-600); border-bottom: 1px solid var(--lod-border); padding-bottom: var(--space-2); margin-bottom: var(--space-1); }
.liq-dd-h b { margin-left: auto; font-size: 14px; color: var(--lod-gray-900); font-variant-numeric: tabular-nums; }
.liq-dd-c { background: var(--lod-gray-100); color: var(--lod-gray-600); border-radius: var(--radius-sm); padding: 0 var(--space-1-5); font-size: 11px; font-weight: 700; }
.liq-dd-sum { font-size: 13px; color: var(--lod-gray-700); background: var(--lod-turquoise-50); border: 1px solid var(--lod-turquoise-200); border-radius: var(--radius-md); padding: var(--space-2-5) var(--space-3); }
.liq-dd-sum b { color: var(--lod-turquoise-900); font-variant-numeric: tabular-nums; }
.liq-dd-list { display: flex; flex-direction: column; }
.liq-dd .liq-dd-row {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; box-sizing: border-box;
  text-align: left; appearance: none; background: transparent; border: none;
  border-bottom: 1px solid var(--lod-border-light); border-radius: var(--radius-sm);
  padding: var(--space-2-5) var(--space-2); font-family: inherit; font-size: 13px;
  color: var(--lod-gray-800); cursor: pointer;
}
.liq-dd .liq-dd-row.is-static { cursor: default; }
.liq-dd .liq-dd-row:not(.is-static):hover { background: var(--lod-darkblue-50); }
.liq-dd .liq-dd-row:not(.is-static):focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--lod-darkblue-200); }
.liq-dd-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Avatar-Zeile (Personal/Fahrzeug-Halter): Avatar links, feste Größe, nicht schrumpfen */
.liq-dd-row--avatar .avatar { flex: 0 0 auto; }
.liq-dd-val { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--lod-gray-900); }
.liq-dd-hint { margin: var(--space-2) 0 0; font-size: 12px; line-height: 1.5; color: var(--lod-gray-500); }
.liq-dd-empty { padding: var(--space-8) var(--space-4); text-align: center; color: var(--lod-gray-500); font-size: 14px; }

/* ── Business-Central-Drawer (Belege · Artikel/Lizenz · Forderungen · Aufträge) ── */
.liq-bc { display: flex; flex-direction: column; gap: var(--space-3); }
.liq-bc-tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); border-bottom: 1px solid var(--lod-border); }
.liq-bc-tab {
  border: none; background: none; padding: var(--space-2) var(--space-3); font-size: 13px; font-weight: 600;
  color: var(--lod-gray-600); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.liq-bc-tab:hover { color: var(--lod-darkblue-700); }
.liq-bc-tab.is-active { color: var(--lod-darkblue-800); border-bottom-color: var(--lod-darkblue-600); }
.liq-bc-body { min-height: 120px; }
.liq-bc-note {
  font-size: 12px; color: var(--lod-amber-900, var(--lod-gray-700)); background: var(--lod-amber-50, var(--lod-gray-100));
  border: 1px solid var(--lod-amber-200, var(--lod-border)); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3);
}
.liq-bc-monthnav { display: flex; align-items: center; justify-content: center; gap: var(--space-3); }
.liq-bc-monthlbl { font-size: 14px; font-weight: 700; color: var(--lod-gray-900); min-width: 130px; text-align: center; }
.liq-bc-sub { font-size: 11px; font-weight: 400; color: var(--lod-gray-500); }
.liq-bc-b { flex: 0 0 auto; margin: 0 var(--space-2); padding: 1px var(--space-2); border-radius: var(--radius-sm); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.liq-bc-b--paid { background: var(--lod-green-50, #eaf7ee); color: var(--lod-green-800, #1e7a34); }
.liq-bc-b--open { background: var(--lod-turquoise-50); color: var(--lod-turquoise-900); }
.liq-bc-b--draft { background: var(--lod-gray-100); color: var(--lod-gray-600); }
.liq-bc-b--over { background: var(--lod-red-50, #fdecec); color: var(--lod-red-700, #b42318); }
/* BC-Zeile mit festen Spalten: Name (flex) · Badge (feste Breite) · Betrag (feste Breite) →
   Badges und Beträge stehen tabellarisch untereinander. */
.liq-dd .liq-bc-r .liq-bc-badgecol { flex: 0 0 84px; display: flex; justify-content: flex-end; }
.liq-dd .liq-bc-r .liq-bc-badgecol .liq-bc-b { margin: 0; }
.liq-dd .liq-bc-r .liq-dd-val { flex: 0 0 96px; text-align: right; }
/* Kunden-Kopf (mehrere Belege) + eingerückte Einzelbelege */
.liq-dd .liq-bc-grouphead { background: var(--lod-gray-50); font-weight: 600; color: var(--lod-gray-900); }
.liq-dd .liq-bc-belegsub .liq-dd-name { padding-left: var(--space-4); }
/* Rechnungspositionen (was verkauft wurde) — noch tiefer eingerückt, dezent, ohne Trennlinie */
.liq-dd .liq-bc-posrow { border-bottom: none; padding-top: 2px; padding-bottom: 2px; }
.liq-dd .liq-bc-posrow .liq-dd-name { padding-left: var(--space-6); color: var(--lod-gray-600); font-size: 12px; font-weight: 400; }
.liq-dd .liq-bc-posrow .liq-dd-val { font-weight: 400; color: var(--lod-gray-600); }
/* Belege: Suchfeld + Aufklapp-Chevron + Firma-Chip */
.liq-bc-search { width: 100%; box-sizing: border-box; margin: var(--space-2) 0 var(--space-1); padding: var(--space-2) var(--space-3); border: 1px solid var(--lod-border); border-radius: var(--radius-md); font-family: inherit; font-size: 13px; color: var(--lod-gray-900); }
.liq-bc-search:focus-visible { outline: 2px solid var(--lod-darkblue-400); outline-offset: -1px; }
.liq-bc-chev { display: inline-block; width: 10px; color: var(--lod-gray-500); font-size: 10px; transition: transform 120ms ease; }
.liq-bc-chev.is-open { transform: rotate(90deg); }
.liq-bc-firma { margin-left: var(--space-2); font-size: 11px; font-weight: 600; color: var(--lod-darkblue-600); }
.liq-bc-firma:hover { text-decoration: underline; }
/* Aufklappbare Detailsektion (Einzelbuchungen) — standardmäßig zu, Chevron als Marker */
.liq-dd-details > summary { cursor: pointer; list-style: none; }
.liq-dd-details > summary::-webkit-details-marker { display: none; }
.liq-dd-details > summary::before { content: "▸"; color: var(--lod-gray-500); font-size: 10px; font-weight: 400; transition: transform 120ms ease; }
.liq-dd-details[open] > summary::before { transform: rotate(90deg); }
.liq-dd-details > summary:hover { color: var(--lod-darkblue-700); }

/* ── Responsive ──────────────────────────────────────────
   Die 14-Spalten-Wasserfalltabelle ist naturgemäß breit. Sie behält bei
   table-layout:fixed feste, LESBARE Spaltenbreiten und SCROLLT horizontal
   (.liq-table-scroll) — die Position-Spalte bleibt sticky. min-width darf NIE
   unter die Inhaltsbreite fallen (≈ Label + Gesamt + 12×~88px), sonst werden
   die Monatsspalten gequetscht und die Zahlen überlappen. Erste Spalte per
   width (nicht min-width) skalieren, da fixed-layout nur width auswertet. */
@media (max-width: 1399px) {
  .liq-table { font-size: 12px; min-width: 1420px; }
  .liq-rowlabel { width: 210px; min-width: 210px; max-width: 210px; }
}
@media (max-width: 999px) {
  /* Kopf stapelt: KPIs voll breit ÜBER dem Diagramm. Das feste 2-Reihen-Raster
     gilt nur nebeneinander (Desktop) — gestapelt wieder natürlicher Fluss,
     sonst bricht das 2-spaltige Mobile-KPI-Grid (3 Reihen) um. */
  .liq-top { flex-direction: column; }
  .liq-kpis { flex-basis: auto; width: 100%; }
  #liq-kpis { grid-template-rows: none; }
  .liq-chart-host { width: 100%; padding: var(--space-3) var(--space-3) var(--space-2); }
  .liq-c { padding: var(--space-2) var(--space-2-5); }
  .liq-table { min-width: 1360px; }
  .liq-rowlabel { width: 196px; min-width: 196px; max-width: 196px; }
  .liq-chart-legend { display: none; }
}
@media (max-width: 599px) {
  /* Auf dem Handy 2 statt 3 KPI-Spalten (mehr Label-Platz). ID sticht das
     KpiGrid-`[data-kpi-columns="3"]` (Attribut-Spezifität) sauber aus. */
  #liq-kpis { grid-template-columns: repeat(2, 1fr); }
  .liq-table { min-width: 1320px; }
  .liq-rowlabel { width: 172px; min-width: 172px; max-width: 172px; }
  .liq-total-col { width: 104px; }
  /* Badges kosten auf dem Handy zu viel Label-Breite → ausblenden. */
  .liq-auto-badge, .liq-th-tag { display: none; }
  .liq-year-lbl { min-width: 44px; font-size: 14px; }
}