/* ══════════════════════════════════════════════════════════════════════════════
 * VIComponents — Optik der gemeinsamen Bausteinschicht (UX-Phase 2, 03.09.2026)
 * Namespace `.vic-`. Doku im Kopf von public/vi-components.js.
 *
 * TOKENREIN: keine Hex-Werte, keine rohen font-size-/border-radius-Werte. Alle
 * Farben, Größen, Radien und Abstände kommen aus public/css/design-system.css —
 * der Wächter `check-design.cjs` 9F setzt das für neue Dateien maschinell durch.
 *
 * ZWEI FARBACHSEN, die nie vermischt werden:
 *   .vic-st  Fachlicher Zustand  — ruhig, KEIN Rot (ein Zustand ist kein Alarm)
 *   .vic-at  Handlungsbedarf     — rot/bernstein/grün nach verbindlicher Semantik
 * ══════════════════════════════════════════════════════════════════════════════ */

/* Nur für Screenreader — der Wortzustand eines Stepper-Schritts. */
.vic-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 1 · StatusBadge ─────────────────────────────────────────────────────────
   Punkt + Wort auf ruhigem Grund. Die FLÄCHE trägt keine Bedeutung, nur der
   Punkt — deshalb bleibt der Kontrast des Textes in allen Tönen gleich hoch. */
.vic-st {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-2); height: var(--control-h-sm);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: var(--fw-medium);
  color: var(--gray-800); background: var(--gray-100);
  white-space: nowrap; max-width: 100%;
}
.vic-st--sm { height: var(--bar-h-listhead); font-size: var(--text-xxs); }
.vic-st-l { overflow: hidden; text-overflow: ellipsis; }
.vic-st-dot {
  flex: 0 0 auto; width: var(--space-2); height: var(--space-2);
  border-radius: var(--radius-sm); background: var(--gray-400);
}
.vic-st--neutral .vic-st-dot { background: var(--gray-400); }
.vic-st--active  .vic-st-dot { background: var(--brand-primary); }
.vic-st--waiting .vic-st-dot { background: var(--color-warning-ink); }
.vic-st--done    .vic-st-dot { background: var(--color-success-ink); }
.vic-st--ended   .vic-st-dot { background: var(--gray-300); }
.vic-st--ended   { color: var(--gray-500); }

/* ── 2 · AttentionBadge ──────────────────────────────────────────────────────
   Rot ist Signal, kein Tabellenhintergrund: die Fläche bleibt zart getönt, der
   Punkt trägt die Farbe, der TEXT nennt den Grund. */
.vic-at {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-2); min-height: var(--control-h-sm);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  color: var(--gray-800); background: transparent;
  max-width: 100%;
}
.vic-at--sm { min-height: var(--bar-h-listhead); font-size: var(--text-xxs); }
.vic-at-l { overflow: hidden; text-overflow: ellipsis; }
.vic-at-dot {
  flex: 0 0 auto; width: var(--space-2); height: var(--space-2);
  border-radius: var(--radius-sm); background: currentColor;
}
.vic-at--crit { color: var(--color-danger-ink); background: var(--color-danger-soft); }
.vic-at--need { color: var(--color-warning-ink); background: var(--color-warning-soft); }
.vic-at--hint { color: var(--color-warning-ink); background: transparent; }
.vic-at--done { color: var(--color-success-ink); background: transparent; }
.vic-at--info { color: var(--gray-600); background: transparent; }

/* Nur-Punkt-Variante für schmale Listen (Master-Spalte im Master/Detail). */
.vic-at-only {
  display: inline-block; flex: 0 0 auto;
  width: var(--space-2); height: var(--space-2); border-radius: var(--radius-sm);
  background: var(--gray-300);
}
.vic-at-only--crit { background: var(--color-danger-ink); }
.vic-at-only--need,
.vic-at-only--hint { background: var(--color-warning-ink); }
.vic-at-only--done { background: var(--color-success-ink); }
.vic-at-only--info { background: var(--gray-400); }
.vic-at-only--none { background: transparent; }

/* ── 3 · EntityHeader ────────────────────────────────────────────────────────
   Drei Zeilen, ≤ 96 px. Keine Karte, kein Schatten, keine seitliche Farbleiste:
   die Trennung zum Inhalt macht EINE Linie. */
.vic-eh {
  /* ZIELHÖHE ≤ 96 px (Konzept §2.3). Erreicht wird sie nicht durch Weglassen von
     Information, sondern durch dichte Zeilen: kein Zeilenabstand zwischen den drei
     Zeilen (jede bringt ihre eigene Höhe mit) und ein knapper Abschluss. */
  display: flex; flex-direction: column; gap: 0;
  padding: 0 0 var(--space-2);
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: var(--space-4);
}
.vic-eh-top { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.vic-eh-t {
  margin: 0; min-width: 0;
  font-size: var(--text-xl); font-weight: var(--fw-semibold);
  line-height: var(--lh-tight); color: var(--gray-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vic-eh-id {
  flex: 0 0 auto;
  font-size: var(--text-xs); font-weight: var(--fw-medium);
  color: var(--gray-500); font-variant-numeric: tabular-nums;
  padding: 0 var(--space-2); height: var(--bar-h-listhead);
  display: inline-flex; align-items: center;
  background: var(--gray-100); border-radius: var(--radius-sm);
}
.vic-eh-acts { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }
.vic-eh-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  font-size: var(--text-xs); color: var(--gray-600);
  line-height: var(--lh-tight); min-height: 0;
}
/* Status und Handlungsbedarf sind IM KOPF nur Beschriftungen, keine Bedienelemente —
   sie brauchen dort keine Klickhöhe. In Listen bleiben sie unverändert. */
.vic-eh .vic-st,
.vic-eh .vic-at { height: auto; min-height: 0; padding-block: 1px; }
.vic-eh-m { display: inline-flex; align-items: center; }
/* Kennungs-Slot der Metazeile (Energie: Zählernummer). Er trägt Ziffernbreite und
   eine ruhige Fläche — sonst verschwimmt eine Nummer zwischen Fachbegriffen. */
.vic-eh-m-id {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 0 var(--space-2); border-radius: var(--radius-sm);
  background: var(--gray-100); color: var(--gray-700);
  font-variant-numeric: tabular-nums lining-nums;
}
.vic-eh-m-id.is-none { color: var(--gray-500); }
.vic-eh-m + .vic-eh-m::before {
  content: '·'; color: var(--gray-300); margin-right: var(--space-2);
}
.vic-eh-foot {
  display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap;
  font-size: var(--text-xs); color: var(--gray-600);
  line-height: var(--lh-tight); margin-top: var(--space-1);
}
.vic-eh-ctx { min-width: 0; display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.vic-eh-at { margin-left: auto; flex: 0 0 auto; }

@media (max-width: 900px) {
  .vic-eh-top { flex-wrap: wrap; }
  .vic-eh-acts { margin-left: 0; width: 100%; }
  .vic-eh-at { margin-left: 0; }
}

/* ── 4 · InfoGrid ────────────────────────────────────────────────────────────
   Kein Zellrahmen, keine Zebrastreifen, keine Versal-Labels: das Raster ordnet,
   die Typografie trennt. */
.vic-ig {
  display: grid; gap: var(--space-3) var(--space-5); margin: 0;
  grid-template-columns: repeat(var(--vic-ig-cols, 3), minmax(0, 1fr));
}
.vic-ig--dense { gap: var(--space-2) var(--space-4); }
.vic-ig-i { min-width: 0; }
.vic-ig-i--w2 { grid-column: span 2; }
.vic-ig-i--w3 { grid-column: span 3; }
.vic-ig-i--w4 { grid-column: span 4; }
.vic-ig-k {
  font-size: var(--text-xxs); color: var(--gray-500);
  font-weight: var(--fw-normal); margin: 0 0 var(--space-1);
}
.vic-ig-v {
  margin: 0; font-size: var(--text-md); color: var(--gray-900);
  line-height: var(--lh-snug); overflow-wrap: anywhere;
}
.vic-ig-v.is-missing { color: var(--gray-500); }
.vic-ig-miss { color: var(--gray-500); font-style: italic; }
.vic-ig-dash { color: var(--gray-400); }
/* „Ergänzen" steht DIREKT am fehlenden Wert — nicht in einer Sammelwarnung oben. */
.vic-ig-act {
  border: 0; background: none; padding: 0; margin-left: var(--space-2);
  color: var(--brand-primary);
  font: inherit; font-size: var(--text-xs); cursor: pointer; text-decoration: underline;
}
.vic-ig-act:hover { color: var(--color-forest); }

@media (max-width: 1023px) { .vic-ig { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .vic-ig { grid-template-columns: minmax(0, 1fr); } }

/* ── 5 · WorkflowStepper ─────────────────────────────────────────────────────── */
.vic-step {
  display: flex; align-items: stretch; gap: 0; margin: 0; padding: 0;
  list-style: none; overflow-x: auto; scrollbar-width: thin;
}
.vic-step-i { display: flex; align-items: center; min-width: 0; flex: 0 1 auto; }
.vic-step-i + .vic-step-i::before {
  content: ''; flex: 0 0 var(--space-4); height: 1px;
  background: var(--gray-300); margin: 0 var(--space-2);
}
.vic-step-b {
  display: inline-flex; align-items: center; gap: var(--space-2);
  border: 0; background: none; padding: var(--space-2) 0; font: inherit;
  color: var(--gray-500); text-align: left; min-width: 0;
}
button.vic-step-b { cursor: pointer; }
button.vic-step-b:hover .vic-step-l { color: var(--gray-900); }
.vic-step-mk {
  flex: 0 0 auto;
  width: var(--control-h-sm); height: var(--control-h-sm);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-300); background: var(--color-surface);
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.vic-step-tx { display: flex; flex-direction: column; min-width: 0; }
.vic-step-l {
  font-size: var(--text-sm); color: var(--gray-700);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vic-step-s { font-size: var(--text-xxs); color: var(--gray-500); }
.vic-step-i--completed .vic-step-mk { border-color: var(--color-success-ink); color: var(--color-success-ink); }
.vic-step-i--completed .vic-step-l { color: var(--gray-700); }
.vic-step-i--active .vic-step-mk {
  border-color: var(--brand-primary);
  background: var(--brand-primary); color: var(--color-surface);
}
.vic-step-i--active .vic-step-l { color: var(--gray-900); font-weight: var(--fw-semibold); }
.vic-step-i--available .vic-step-mk { border-color: var(--gray-300); color: var(--gray-600); }
.vic-step-i--blocked .vic-step-mk { border-style: dashed; color: var(--gray-400); }
.vic-step-i--blocked .vic-step-l { color: var(--gray-400); }
.vic-step-i--pending .vic-step-mk { color: var(--gray-400); }
.vic-step--sm .vic-step-mk { width: var(--bar-h-listhead); height: var(--bar-h-listhead); }
.vic-step--sm .vic-step-l { font-size: var(--text-xs); }

@media (max-width: 767px) {
  .vic-step { gap: var(--space-1); }
  .vic-step-i + .vic-step-i::before { flex-basis: var(--space-3); margin: 0 var(--space-1); }
}

/* ── 6 · EntitySectionNav — Sprungmarken, keine Reiter ────────────────────────
   Bewusst KEIN Ink-Unterstrich wie `.vmod-tabs`: die Leiste darf nicht wie eine
   Tab-Navigation aussehen, sonst erwartet der Nutzer wechselnde Inhalte. */
.vic-snav {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: var(--space-1);
  padding: var(--space-2) 0; margin-bottom: var(--space-3);
  background: var(--color-surface);
  border-bottom: 1px solid var(--gray-200);
  overflow-x: auto; scrollbar-width: thin;
}
.vic-snav-i {
  flex: 0 0 auto; border: 0; background: none; cursor: pointer;
  padding: 0 var(--space-2); height: var(--control-h-sm);
  border-radius: var(--radius-sm);
  font: inherit; font-size: var(--text-xs); color: var(--gray-600);
  white-space: nowrap;
}
.vic-snav-i:hover { background: var(--gray-100); color: var(--gray-900); }
.vic-snav-i.is-active { color: var(--gray-900); font-weight: var(--fw-semibold); background: var(--gray-100); }
.vic-snav-n { color: var(--gray-500); font-variant-numeric: tabular-nums; }

/* ── 7 · States ──────────────────────────────────────────────────────────────
   Ein Satz, eine Aktion, ≤ 96 px. Kein Symbolkreis, keine Karte. */
.vic-empty {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--control-h-lg); padding: var(--space-3) 0;
  color: var(--gray-500); font-size: var(--text-sm);
}
.vic-empty--inline { min-height: var(--control-h-sm); padding: var(--space-2) 0; }
.vic-empty--ok .vic-empty-t { color: var(--color-success-ink); }
.vic-empty-t { min-width: 0; color: var(--gray-700); font-weight: var(--fw-medium); flex: 0 0 auto; }
.vic-empty-s {
  color: var(--gray-500); font-size: var(--text-xs);
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.vic-empty--inline .vic-empty-s { display: none; }
.vic-empty-a {
  border: 0; background: none; padding: 0; font: inherit; font-size: var(--text-sm);
  color: var(--brand-primary); cursor: pointer; text-decoration: underline;
  flex: 0 0 auto;
}

.vic-sk { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) 0; }
.vic-sk-r { display: flex; gap: var(--space-3); align-items: center; }
.vic-sk-c {
  display: block; height: var(--space-3); width: var(--vic-sk-w, 100%);
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--gray-100), var(--gray-200), var(--gray-100));
  background-size: 200% 100%; animation: vic-sk-p 1.4s ease-in-out infinite;
}
@keyframes vic-sk-p { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .vic-sk-c { animation: none; } }

.vic-alert {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--gray-300);
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm); color: var(--gray-700);
}
.vic-alert-tx { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.vic-alert-t { font-weight: var(--fw-semibold); color: var(--gray-900); }
.vic-alert-s { color: var(--gray-600); }
.vic-alert-a {
  margin-left: auto; flex: 0 0 auto;
  border: 0; background: none; padding: 0; font: inherit; font-size: var(--text-sm);
  color: var(--brand-primary); cursor: pointer; text-decoration: underline;
}
.vic-alert--crit { border-left-color: var(--color-danger-ink); }
.vic-alert--crit .vic-alert-t { color: var(--color-danger-ink); }
.vic-alert--warn { border-left-color: var(--color-warning-ink); }
.vic-alert--ok   { border-left-color: var(--color-success-ink); }
.vic-alert--info { border-left-color: var(--gray-300); }

/* ── 8 · Metric ──────────────────────────────────────────────────────────────
   EINE Zeile aus Schaltern in EINER Fläche — keine Kachelwand. */
.vic-mtr {
  display: flex; align-items: stretch; flex-wrap: wrap;
  border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  background: var(--color-surface); overflow: hidden;
}
.vic-mtr-i {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: baseline; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 0; border-right: 1px solid var(--gray-200); background: none;
  font: inherit; text-align: left; color: var(--gray-700);
}
button.vic-mtr-i { cursor: pointer; }
button.vic-mtr-i:hover { background: var(--gray-100); }
.vic-mtr-i:last-child { border-right: 0; }
.vic-mtr-l { font-size: var(--text-xs); color: var(--gray-600); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vic-mtr-v {
  margin-left: auto; font-size: var(--text-lg); font-weight: var(--fw-semibold);
  color: var(--gray-900); font-variant-numeric: tabular-nums lining-nums;
}
.vic-mtr-go { color: var(--gray-400); }
.vic-mtr-i--crit .vic-mtr-v { color: var(--color-danger-ink); }
.vic-mtr-i--warn .vic-mtr-v { color: var(--color-warning-ink); }
.vic-mtr-i--ok   .vic-mtr-v { color: var(--color-success-ink); }

/* ── 9 · ViewSwitcher ────────────────────────────────────────────────────────
   Segment-Schalter für die DARSTELLUNGSART. Optisch bewusst identisch zu
   `.vmod-seg`, damit es EINE Bedienform bleibt. */
.vic-vsw {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1); background: var(--gray-100);
  border-radius: var(--radius-md);
}
.vic-vsw-i {
  border: 0; background: none; cursor: pointer;
  padding: 0 var(--space-3); height: var(--control-h-sm);
  border-radius: var(--radius-sm);
  font: inherit; font-size: var(--text-xs); font-weight: var(--fw-medium);
  color: var(--gray-600); white-space: nowrap;
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.vic-vsw-i:hover { color: var(--gray-900); }
.vic-vsw-i.is-active {
  background: var(--color-surface); color: var(--gray-900);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

/* ── 10 · EntityTabs — nur das, was die kanonische Leiste NICHT schon kann ─────
   Spur und Reiter selbst kommen aus ui-standard.css §3 (.vi-tabs/.vi-tab) samt
   gleitendem Unterstrich. Hier steht ausschließlich das Überlauf-Menü „Mehr"
   und der rechtsbündige Slot — beides gab es dort noch nicht. */
.vic-tabmore { position: relative; display: inline-flex; }
.vic-tabmore-c { margin-left: var(--space-1); font-size: var(--text-xs); }
/* Beim Öffnen setzt VIComponents.toggleTabMore `position: fixed` samt Koordinaten:
   die Reiterspur trägt `overflow-x: auto` und schnitte ein absolut positioniertes
   Menü vollständig weg (ui-standard.css §3a — overflow-x erzwingt overflow-y).
   Die Werte hier gelten für den geschlossenen Zustand und als Rückfall. */
.vic-tabmore-m {
  position: absolute; top: calc(100% + var(--space-1)); left: 0;
  z-index: var(--z-dropdown, 100);
  max-height: min(60vh, 420px); overflow-y: auto;
  min-width: 200px; padding: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--gray-300); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, .12));
  display: flex; flex-direction: column;
}
.vic-tabmore-i {
  border: 0; background: none; cursor: pointer; text-align: left;
  padding: 0 var(--space-3); height: var(--control-h-sm);
  border-radius: var(--radius-sm);
  font: inherit; font-size: var(--text-sm); color: var(--gray-700);
  display: flex; align-items: center; gap: var(--space-2);
}
.vic-tabmore-i:hover { background: var(--gray-100); color: var(--gray-900); }
.vic-tabs-side {
  margin-left: auto; padding-left: var(--space-3);
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); color: var(--gray-600); white-space: nowrap;
}

/* ── 11 · Workflow-Kopf und -Fußzeile (A4) ───────────────────────────────────
   §20: kein Modulkopf, kein zweiter Breadcrumb, keine Karte. Zwei Zeilen: was
   getan wird und woran. §21: Fußzeile in fester Reihenfolge, eine Primäraktion. */
.vic-wfh {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-3) 0 var(--space-3);
  border-bottom: 1px solid var(--gray-200);
}
.vic-wfh-top { display: flex; align-items: flex-start; gap: var(--space-3); }
.vic-wfh-t {
  margin: 0; flex: 1 1 auto; min-width: 0;
  font-size: var(--text-xl); font-weight: var(--fw-semibold);
  line-height: var(--lh-tight); color: var(--gray-900);
}
.vic-wfh-acts { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--space-2); }
.vic-wfh-ctx {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0 var(--space-2);
  font-size: var(--text-sm); color: var(--gray-600); line-height: var(--lh-snug);
}
.vic-wfh-c { display: inline-flex; align-items: center; }
.vic-wfh-c + .vic-wfh-c::before {
  content: "·"; margin-right: var(--space-2); color: var(--gray-400);
}
button.vic-wfh-c, a.vic-wfh-c {
  border: 0; background: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--color-primary-700); text-decoration: none;
}
button.vic-wfh-c:hover, a.vic-wfh-c:hover { text-decoration: underline; }
.vic-wfh-sub { font-size: var(--text-sm); color: var(--gray-600); }

.vic-wff {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--gray-200);
}
.vic-wff-l { flex: 0 0 auto; }
.vic-wff-n { flex: 1 1 auto; min-width: 0; font-size: var(--text-xs); color: var(--gray-600); }
.vic-wff-r { flex: 0 0 auto; margin-left: auto; display: inline-flex; gap: var(--space-2); }

@media (max-width: 640px) {
  .vic-wfh-top { flex-wrap: wrap; }
  .vic-wfh-acts { width: 100%; }
  .vic-wfh-acts > * { flex: 1 1 auto; }
  .vic-wff { flex-wrap: wrap; }
  .vic-wff-r { width: 100%; }
  .vic-wff-r > * { flex: 1 1 auto; }
  .vic-wff-n { order: 3; width: 100%; }
}


/* ── 5b · Stepper, senkrechte Form (lange Prozesse) ──────────────────────────
   Dieselbe Komponente, andere Anordnung: die Schritte stehen untereinander und
   dürfen nach Phasen gruppiert sein. Gedacht für Abläufe mit mehr als sechs
   Schritten, die über mehrere Sitzungen laufen (Abnahme/Übergabe). */
.vic-step--v { flex-direction: column; align-items: stretch; gap: 1px; }
.vic-step--v .vic-step-i { flex: 0 0 auto; }
.vic-step--v .vic-step-i::after { content: none; }
.vic-step--v .vic-step-b { width: 100%; justify-content: flex-start; text-align: left; }
.vic-step-g {
  list-style: none; margin-top: var(--space-3); padding: 0 var(--space-2) var(--space-1);
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  letter-spacing: .04em; text-transform: uppercase; color: var(--gray-500);
}
.vic-step-g:first-child { margin-top: 0; }
.vic-step-n {
  margin-left: auto; flex: 0 0 auto;
  min-width: 18px; padding: 0 var(--space-1); border-radius: var(--radius-sm);
  background: var(--gray-100); color: var(--gray-600);
  font-size: var(--text-xs); font-variant-numeric: tabular-nums; text-align: center;
}
.vic-step-n.is-attn { background: var(--color-warning-soft); color: var(--color-warning-ink); }
.vic-step-n.is-ok { color: var(--color-success-ink); }


/* ── 12 · Karten (SectionCard / DetailCard) ───────────────────────────────────
   Nutzerentscheidung 05.09.2026: Der Gebäudebetrieb wirkt wie ein digitaler
   Anlagenordner. Fachlich zusammengehörige Angaben stehen nicht mehr lose auf
   einer weißen Fläche, sondern in einer klar begrenzten Karte, die IMMER dieselbe
   Reihenfolge hat: Überschrift (+ Zustand) → Daten → Hinweis → Aktionen → Fußnote.

   Das ersetzt NICHT die Sektion mit Trennlinie (.gb-sec-h) — es ersetzt sie DORT,
   wo ein einzelner Datensatz beschrieben wird. Für Listen vieler gleichartiger
   Datensätze bleibt die Tabelle (VITable) der richtige Baustein.

   ABGRENZUNG ZUM SAAS-DASHBOARD: kein Farbverlauf, keine Symbolkreise, keine
   Kachelwand. Was die Karte trägt, ist EINE Linie, ein kleiner Radius, dichte
   Innenabstände — und seit dem 05.09.2026 EIN flacher Schatten.

   ZUM SCHATTEN (Nutzerentscheidung 05.09.2026: „Die Boxen gerne modern mit leichtem
   Schatten"): Regel 4 („Flächen tragen keinen Schatten") gilt weiter für Tabellen,
   Filterleisten und Panels — die Kartenfamilie ist die benannte Ausnahme. Sie nimmt
   dafür GENAU EINEN Wert (`--shadow-card`), keinen eigenen je Modul; der Rahmen
   bleibt und trägt weiterhin die Struktur, der Schatten trägt nur die Tiefe.
   Namespace `.vic-cd-` (bewusst nicht „card" — der Wächter 9E zählt Karten in
   Karten über genau dieses Wort im class-Attribut, und eine Karte ist hier der
   Regelfall statt der Ausnahme). */

/* Raster: bis zu 3 Spalten. WIE VIELE es wirklich werden, entscheidet die Breite
   DIESES Rasters — nicht die des Bildschirms.
   Befund 10.09.2026 (Auftragsakte): hier stand `@media (max-width: 1439px)`. Am
   1920er Monitor hieß das „viel Platz → drei Spalten" — auch dann, wenn das Raster
   in einem 760 px breiten Dialog steckte. Jede Karte schnurrte auf 215 px zusammen,
   und die Feldlisten brachen mitten im Wort um („Direktauftra|g", „Kummerow|er Hof").
   Es gilt dieselbe Regel wie im Modulkopf (CLAUDE.md, E4): maßgeblich ist die
   VERFÜGBARE Breite, nicht die Fensterbreite. Die Hülle `.vic-cdgw` ist deshalb
   der Messpunkt; `cardGrid()` setzt sie immer mit.
   Zielmaß ist die Karte, nicht die Spaltenzahl: eine Fachkarte trägt eine
   Feldliste (Beschriftung + Wert) und braucht dafür rund 340 px. */
.vic-cdgw { container-type: inline-size; }
.vic-cdg {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(var(--vic-cdg-cols, 3), minmax(0, 1fr));
  align-items: start;
}
.vic-cdg--2 { --vic-cdg-cols: 2; }
@container (max-width: 1023px) { .vic-cdg { --vic-cdg-cols: 2; } }
@container (max-width: 767px)  { .vic-cdg { --vic-cdg-cols: 1; } }

/* ── 12b · Kartenspalten: der Aufbau einer Akte (10.09.2026) ──────────────────
   Zwei STAPEL, kein Raster. Im Raster stehen Karten sehr verschiedener Länge
   nebeneinander; darunter reißen Löcher auf und die letzte Reihe bleibt halb
   leer — genau der „wilde Haufen von Kästen" aus dem Nutzerbefund. Im Stapel
   füllt jede Karte ihre Spalte, die Abstände sind überall dieselben, und die
   Spalte endet dort, wo ihr Inhalt endet.
   7fr/5fr statt 1fr/1fr: links steht der INHALT (Leistungstext, Beteiligte),
   rechts der STECKBRIEF (kurze Feldlisten) — gleiche Breiten wären für beides
   die falsche. Unter 1024 px Rasterbreite untereinander. */
.vic-cdcw { container-type: inline-size; }
.vic-cdc {
  display: grid; gap: var(--space-3);
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
}
.vic-cdc--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.vic-cdc--eins { grid-template-columns: minmax(0, 1fr); }
.vic-cdc-col { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
@container (max-width: 1023px) {
  .vic-cdc, .vic-cdc--even { grid-template-columns: minmax(0, 1fr); }
}

.vic-cd {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--color-surface);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
/* Eine breitere Karte darf NIE mehr Spalten anfordern, als das Raster hergibt —
   sonst legt der Grid eine implizite Spalte an und die Reihe läuft aus dem
   Dialog heraus. Die Schwellen sind deshalb dieselben wie oben. */
.vic-cd--w2 { grid-column: span 2; }
.vic-cd--w3 { grid-column: span 3; }
@container (max-width: 1023px) { .vic-cd--w3 { grid-column: span 2; } }
@container (max-width: 767px)  { .vic-cd--w2, .vic-cd--w3 { grid-column: span 1; } }
/* Die Karte darf auch allein stehen (Detailfläche eines Master/Detail). */
.vic-cd--flat { border-radius: var(--radius-md); }

/* Kopf: Thema links, Zustand daneben, leise Werkzeuge rechts. Der Kopf trägt nie
   die Primäraktion — die steht unten bei den Aktionen, wo sie erwartet wird. */
/* EIN Innenmaß für Kopf, Körper, Hinweis und Aktionen (10.09.2026).
   Vorher: Kopf 8/12 px, Körper 12 px, Hinweis 8/12 px — die Titel standen enger
   am Rand als die Werte darunter, und bei zwölf Karten sieht man jede dieser
   Verschiebungen. Jetzt liegt alles auf `--space-4` (16 px) in der Waagerechten;
   die Senkrechte bleibt kompakter, ein Kartenkopf ist keine Zeile Text. */
.vic-cd-h {
  display: flex; align-items: center; gap: var(--space-2) var(--space-3);
  flex-wrap: wrap; min-width: 0;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-25);
}
.vic-cd-t {
  margin: 0; min-width: 0; flex: 0 1 auto;
  font-size: var(--text-base); font-weight: var(--fw-semibold);
  line-height: var(--lh-snug); color: var(--gray-900);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vic-cd-n {
  margin-left: var(--space-2);
  font-size: var(--text-xs); font-weight: var(--fw-normal);
  color: var(--gray-500); font-variant-numeric: tabular-nums;
}
.vic-cd-badges { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; flex: 0 1 auto; }
.vic-cd-badges .vic-st, .vic-cd-badges .vic-at { height: auto; min-height: 0; padding-block: 1px; }
.vic-cd-ha { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }

/* Körper: kompakt. Keine zweite Karte darin — innen gliedern Zwischenüberschriften. */
.vic-cd-b { padding: var(--space-4); min-width: 0; }
/* Steht eine Notiz darueber, bringt sie den oberen Abstand schon mit. */
.vic-cd-note + .vic-cd-b { padding-top: var(--space-3); }
.vic-cd-b--flush { padding: 0; }
.vic-cd-b > :first-child { margin-top: 0; }
.vic-cd-b > :last-child { margin-bottom: 0; }
.vic-cd-note {
  margin: 0; padding: var(--space-2) var(--space-4) 0;
  font-size: var(--text-xs); color: var(--gray-600); line-height: var(--lh-snug);
}
/* Zwischenüberschrift IN der Karte (Kostenhistorie unter den Kostenfeldern). */
.vic-cd-h4 {
  margin: var(--space-3) 0 var(--space-1);
  font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--gray-700);
  border-top: 1px solid var(--gray-200); padding-top: var(--space-2);
}
.vic-cd-b > .vic-cd-h4:first-child { border-top: 0; margin-top: 0; padding-top: 0; }

/* Hinweis/Handlungsbedarf innerhalb der Karte: eine Zeile, getönt, ohne Rahmen. */
.vic-cd-hint {
  display: flex; align-items: baseline; gap: var(--space-2);
  margin: 0 var(--space-4) var(--space-4);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  background: var(--gray-50);
  font-size: var(--text-xs); color: var(--gray-700); line-height: var(--lh-snug);
}
.vic-cd-hint--warn { background: var(--color-warning-soft); color: var(--color-warning-ink); }
.vic-cd-hint--crit { background: var(--color-danger-soft); color: var(--color-danger-ink); }

/* Aktionen: IMMER unten, IMMER links beginnend — die primäre zuerst. */
.vic-cd-f {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--gray-200);
  margin-top: auto;
}
.vic-cd-a { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.vic-cd-meta {
  margin-left: auto; flex: 0 1 auto; min-width: 0;
  font-size: var(--text-xxs); color: var(--gray-500);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 767px) { .vic-cd-meta { margin-left: 0; width: 100%; white-space: normal; } }

/* Leerzustand IN der Karte: was fehlt und was jetzt zu tun ist — nie nur „—". */
.vic-cd-empty { margin: 0; font-size: var(--text-sm); color: var(--gray-600); line-height: var(--lh-snug); }
.vic-cd-empty strong { color: var(--gray-900); font-weight: var(--fw-semibold); }

/* ── 13 · FieldList — Bezeichnung links, Wert rechts ──────────────────────────
   Der Wert ist die Aussage und steht deshalb kräftiger als seine Beschriftung.
   Fehlendes wird gezeigt, nicht weggelassen: „nicht gepflegt" in Grau, ohne
   Warnfarbe — ein unvollständiger Datensatz ist kein Alarm. */
.vic-fl { margin: 0; display: grid; grid-template-columns: repeat(var(--vic-fl-cols, 1), minmax(0, 1fr)); gap: 0 var(--space-5); }
/* DIE BESCHRIFTUNGSSPALTE IST ÜBERALL GLEICH BREIT (10.09.2026).
   Sie war `minmax(118px, 38%)` — also von der KARTENBREITE abhängig: in einer
   369-px-Karte saßen die Werte bei 140 px, in einer 560-px-Karte bei 213 px.
   Nebeneinander liest sich das wie zwei verschiedene Formulare. Ein fester Wert
   (11rem) richtet alle Karten einer Akte an derselben Kante aus; wird die Karte
   zu schmal, stapelt die Zeile (weiter unten). */
.vic-fl-r {
  display: grid; grid-template-columns: min(11rem, 45%) minmax(0, 1fr);
  gap: var(--space-2); align-items: baseline;
  min-height: 26px; padding: var(--space-1) 0;
  border-bottom: 1px solid var(--gray-100);
  min-width: 0;
}
.vic-fl-r:last-child { border-bottom: 0; }
.vic-fl--dense .vic-fl-r { min-height: 22px; padding: 2px 0; }
/* `span 2` würde in einer EINSPALTIGEN Liste eine implizite zweite Spalte erzeugen —
   dann stünde plötzlich die ganze Liste zweispaltig (gemessen 05.09.2026 im
   Maßnahmendetail). `1 / -1` spannt über die vorhandenen Spalten, ohne neue zu bauen. */
.vic-fl-r--w2 { grid-column: 1 / -1; }
/* KEINE SILBENTRENNUNG, KEIN BRUCH MITTEN IM WORT: „Rechtsgrundlag|e" ist keine
   Beschriftung mehr. Lange Wörter brechen an der Wortgrenze; passt es nicht,
   kürzt die Zelle (`--1l`) und der Volltext steht im zentralen Hover. */
.vic-fl-k {
  margin: 0; font-size: var(--text-xs); color: var(--gray-500);
  line-height: var(--lh-snug); overflow-wrap: break-word; hyphens: none;
}
.vic-fl-v {
  margin: 0; font-size: var(--text-sm); font-weight: var(--fw-medium);
  color: var(--gray-900); line-height: var(--lh-snug); min-width: 0;
  overflow-wrap: break-word; hyphens: none;
}
.vic-fl-v .vic-st, .vic-fl-v .vic-at { vertical-align: baseline; }
/* Einzeilig mit Ellipse — der Volltext steht im zentralen Hover. */
.vic-fl-v--1l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vic-fl-miss { color: var(--gray-500); font-weight: var(--fw-normal); }
.vic-fl-dash { color: var(--gray-400); font-weight: var(--fw-normal); }
/* Der Pflegeweg steht am fehlenden Wert, nicht in einer Sammelwarnung. */
.vic-fl-act {
  border: 0; background: none; padding: 0; margin-left: var(--space-2);
  color: var(--brand-primary); font: inherit; font-size: var(--text-xs);
  font-weight: var(--fw-normal); cursor: pointer; text-decoration: underline;
}
.vic-fl-act:hover { color: var(--color-forest); }
@media (max-width: 1023px) { .vic-fl { --vic-fl-cols: 1; } }
@media (max-width: 480px) {
  .vic-fl-r { grid-template-columns: minmax(0, 1fr); gap: 0; padding: var(--space-1) 0; }
  .vic-fl-v--1l { white-space: normal; }
}

/* ── 14 · AttentionList — strukturierter Handlungsbedarf ──────────────────────
   Nicht vier bernsteinfarbene Textzeilen quer über die Seite: je Punkt ein
   Signalpunkt, die Aussage, der Grund in einer zweiten Zeile und GENAU EINE
   Aktion. Die Farbe kommt aus der verbindlichen Attention-Semantik (§2). */
.vic-atl { list-style: none; margin: 0; padding: 0; }
.vic-atl-i {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-2); align-items: baseline;
  padding: var(--space-2) 0; border-bottom: 1px solid var(--gray-100); min-width: 0;
}
.vic-atl-i:first-child { padding-top: 0; }
.vic-atl-i:last-child { border-bottom: 0; padding-bottom: 0; }
.vic-atl-dot {
  width: var(--space-2); height: var(--space-2); border-radius: var(--radius-sm);
  background: var(--gray-400); align-self: center; flex: 0 0 auto;
}
.vic-atl-i--crit .vic-atl-dot { background: var(--color-danger-ink); }
.vic-atl-i--need .vic-atl-dot, .vic-atl-i--hint .vic-atl-dot { background: var(--color-warning-ink); }
.vic-atl-i--done .vic-atl-dot { background: var(--color-success-ink); }
.vic-atl-t { margin: 0; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--gray-900); line-height: var(--lh-snug); min-width: 0; }
.vic-atl-i--crit .vic-atl-t { color: var(--color-danger-ink); }
.vic-atl-s { grid-column: 2; margin: 0; font-size: var(--text-xs); color: var(--gray-600); line-height: var(--lh-snug); min-width: 0; }
.vic-atl-a { grid-row: 1; grid-column: 3; white-space: nowrap; }
@media (max-width: 480px) {
  .vic-atl-i { grid-template-columns: auto minmax(0, 1fr); }
  .vic-atl-a { grid-row: auto; grid-column: 2; }
}

/* ── 15 · Timeline — kompakte Chronologie ────────────────────────────────────
   Datum, Vorgang, Urheber. Eine schmale Schiene mit Punkt macht die zeitliche
   Ordnung sichtbar, ohne dass jede Zeile eine Karte bräuchte. */
.vic-tl { list-style: none; margin: 0; padding: 0; }
/* Die Datumsspalte war 88 px breit und der Wert `white-space: nowrap` — ein Datum
   MIT Uhrzeit („09.09.2026 14:30") braucht rund 100 px und lief deshalb ohne
   Abstand in den Titel („…14:30Auftrag angenommen", Nutzerbefund 10.09.2026).
   `max-content` lässt die Spalte so breit werden, wie das längste Datum sie
   braucht; weil alle Zeilen dasselbe Format tragen, bleibt sie trotzdem bündig. */
.vic-tl-i {
  position: relative; display: grid;
  grid-template-columns: minmax(88px, max-content) minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-3); align-items: baseline;
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  min-width: 0;
}
.vic-tl-i::before {
  content: ''; position: absolute; left: 3px; top: 12px;
  width: var(--space-2); height: var(--space-2); border-radius: var(--radius-sm);
  background: var(--gray-300);
}
/* Die Schiene verbindet die Punkte — sie endet mit dem letzten Ereignis. */
.vic-tl-i::after {
  content: ''; position: absolute; left: 6px; top: 20px; bottom: -4px; width: 1px;
  background: var(--gray-200);
}
.vic-tl-i:last-child::after { display: none; }
.vic-tl-i--ok::before   { background: var(--color-success-ink); }
.vic-tl-i--warn::before { background: var(--color-warning-ink); }
.vic-tl-i--crit::before { background: var(--color-danger-ink); }
.vic-tl-d { font-size: var(--text-xs); color: var(--gray-500); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vic-tl-b { min-width: 0; display: flex; flex-direction: column; gap: 0; }
.vic-tl-t { font-size: var(--text-sm); color: var(--gray-900); line-height: var(--lh-snug); min-width: 0; overflow-wrap: anywhere; }
.vic-tl-s { font-size: var(--text-xs); color: var(--gray-600); line-height: var(--lh-snug); min-width: 0; overflow-wrap: anywhere; }
.vic-tl-m { font-size: var(--text-xs); color: var(--gray-500); white-space: nowrap; }
@media (max-width: 767px) {
  .vic-tl-i { grid-template-columns: minmax(0, 1fr) auto; }
  .vic-tl-b { grid-column: 1 / -1; }
}

/* ── 16 · RecordList — gleichartige Datensätze in einer Karte ─────────────────
   Dokumente, Verträge, verknüpfte Vorgänge: Titel, Art · Datum, eine Aktion.
   Für viele Zeilen bleibt die Tabelle zuständig — das hier ist der Auszug. */
.vic-rl { list-style: none; margin: 0; padding: 0; }
.vic-rl-i {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 var(--space-3); align-items: center;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--gray-100); min-width: 0;
}
.vic-rl-i:last-child { border-bottom: 0; }
.vic-rl-i:hover { background: var(--gray-25); }
.vic-rl-b { min-width: 0; display: flex; flex-direction: column; gap: 0; }
.vic-rl-t {
  font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--gray-900);
  line-height: var(--lh-snug); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.vic-rl-t { color: var(--color-forest); text-decoration: none; }
a.vic-rl-t:hover { text-decoration: underline; }
.vic-rl-m {
  font-size: var(--text-xs); color: var(--gray-500); line-height: var(--lh-snug);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Beziehungen EINER Datei (Durchführung · Nachweis) stehen am Datensatz — die
   Datei erscheint deshalb genau einmal, nicht je Beziehung erneut. */
.vic-rl-tags { display: inline-flex; gap: var(--space-1); flex-wrap: wrap; }
.vic-rl-tag {
  display: inline-flex; align-items: center;
  padding: 0 var(--space-1); border-radius: var(--radius-sm);
  background: var(--gray-100); color: var(--gray-600); font-size: var(--text-xxs);
}
.vic-rl-a { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }

/* ── 17 · Chooser — genau EINEN aus wenigen wählen ────────────────────────────
   Nutzerentscheidung 05.09.2026: „Ich will hübsche separate Boxen, die nicht
   aneinanderkleben." Die Auswahl ist deshalb eine Reihe eigenständiger Karten mit
   echtem Abstand — nicht eine Tabelle, an deren Kante eine Detailfläche klebt.

   DIE KARTEN WACHSEN, ABER NICHT INS UNENDLICHE: sie füllen die Zeile (flex), ein
   Deckel hält sie bei etwa einer Textspalte. Sonst wird aus einer einzigen Maßnahme
   ein 1600 px breites Banner und aus dreien eine Wand aus Leerraum. */
.vic-ch { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
/* `align-items: stretch` ist hier PFLICHT, nicht Kosmetik: der Browser gibt
   jedem <button> von sich aus `align-items: center`, die Kinder werden dann auf
   ihre INHALTSBREITE gesetzt und `.vic-ch-m` (nowrap + Ellipse) läuft mittig über
   beide Kartenränder hinaus, statt zu kürzen (gemessen 10.09.2026 am gleich
   gebauten `.vpp-item`). */
.vic-ch-i {
  flex: 1 1 240px; max-width: 340px; min-width: 0;
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  padding: var(--space-2) var(--space-3);
  text-align: left; cursor: pointer;
  background: var(--color-surface);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
/* Anfassbar heißt: sie hebt sich beim Überfahren einen Hauch — sie springt nicht. */
.vic-ch-i:hover { border-color: var(--gray-400); background: var(--gray-25); box-shadow: var(--shadow-card-hover); }
.vic-ch-i:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Gewählt: Markenrahmen, innen verdoppelt, dazu die hellste Stufe der grünen Rampe
   als Fläche. Der Strich allein trug die Auswahl zu hart — bei dunklem Mandanten-
   Markenton las er sich wie ein schwarzer Kasten neben weichen Schatten. `green-50`
   ist genau die Farbe, die im Designsystem für „ausgewählt" vorgesehen ist; der Text
   bleibt auf hellem Grund und damit lesbar. */
.vic-ch-i.is-sel {
  border-color: var(--brand-primary);
  background: var(--green-50);
  box-shadow: inset 0 0 0 1px var(--brand-primary), var(--shadow-card);
}
.vic-ch-i.is-sel:hover { background: var(--green-50); box-shadow: inset 0 0 0 1px var(--brand-primary), var(--shadow-card-hover); }
.vic-ch-t {
  font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--gray-900);
  line-height: var(--lh-snug); min-width: 0; overflow-wrap: break-word; hyphens: none;
}
.vic-ch-m {
  font-size: var(--text-xs); color: var(--gray-500); line-height: var(--lh-snug);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vic-ch-v { display: flex; align-items: baseline; gap: var(--space-2); margin-top: var(--space-1); min-width: 0; }
.vic-ch-vl { font-size: var(--text-xs); color: var(--gray-500); white-space: nowrap; }
.vic-ch-vv {
  font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--gray-900);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.vic-ch-f { margin-top: var(--space-1); min-width: 0; }
.vic-ch-n { font-size: var(--text-xs); color: var(--gray-500); }
.vic-ch-f .vic-at { max-width: 100%; }
.vic-ch-f .vic-at-l { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 767px) {
  /* Mobil ist eine Reihe kein Gewinn: gewählt wird untereinander, volle Breite. */
  .vic-ch-i { flex: 1 1 100%; max-width: none; }
}

/* ───────────────────────────────────────────────────────────────────────────────────
   ADRESSE IN FREITEXT  (.vic-link)  —  Nutzerentscheidung 07.09.2026
   ───────────────────────────────────────────────────────────────────────────────────
   Die einzige Darstellung für eine Adresse, die in einem Freitext STAND (Notiz,
   Nachricht, Bemerkung) und von `escLinks` (public/formatters.js) klickbar gemacht
   wurde. Kein zweites Link-Aussehen je Modul.

   `overflow-wrap: anywhere` ist hier Pflicht und nicht Geschmack: Tracking-URLs
   sind 200 Zeichen ohne Leerzeichen lang und sprengen sonst jede Karte, jede
   Detailspalte und jede mobile Fläche. Gekürzt wird NICHT — eine Adresse mit „…“
   ist keine Adresse mehr (§ „PDFs ohne …“).
   ─────────────────────────────────────────────────────────────────────────────────── */
.vic-link {
  color: var(--color-primary-600);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.vic-link:hover { color: var(--color-primary-700); }
.vic-link:focus-visible { outline: 2px solid var(--color-primary-600); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ── 18 · ChipSelect — Mehrfachauswahl als Marken ───────────────────────────
   Kompakte Alternative zur Kästchen-Matrix für überschaubare feste Listen.
   Gewähltes trägt die Auswahlfläche des Designsystems (green-50/200), nicht
   Gewähltes bleibt eine ruhige Umrandung — dieselbe Sprache wie ein gesetzter
   Filter, damit „ausgewählt" überall gleich aussieht. */
.vic-chs { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); }
.vic-chs-i {
  height: var(--control-h-sm, 32px); padding: 0 var(--space-3, 12px);
  border: 1px solid var(--gray-300, #C9D2CE); border-radius: var(--radius-sm, 6px);
  background: var(--color-surface, #FFF); color: var(--gray-700, #33403B);
  font: inherit; font-size: var(--text-sm, 13px); cursor: pointer;
  display: inline-flex; align-items: center; white-space: nowrap;
}
.vic-chs-i:hover { border-color: var(--gray-500, #5F6B66); }
.vic-chs-i:focus-visible { outline: 2px solid var(--color-forest, #14603F); outline-offset: 1px; }
.vic-chs-i.is-on {
  background: var(--green-50, #EDF6F1); border-color: var(--green-200, #A9CEBB);
  color: var(--color-forest, #14603F); font-weight: var(--fw-medium, 500);
}

/* ═══════════════════════════════════════════════════════════════════════════
   §19 · NACHRICHTENFELD (.vi-msgfield) — Feedback #5 §3
   ═══════════════════════════════════════════════════════════════════════════
   Ein Nachrichtenfeld ist ein `.form-input` und erbt dessen Rahmen, Radius,
   Farbe und Fokusring — hier stehen NUR die drei Eigenschaften, die es von
   einem Stammdatenfeld unterscheiden.

   `resize: vertical` ist Absicht: waagerecht vergrößern würde das Feld aus
   seiner Spalte schieben und in einem Dialog die Fußzeile mitnehmen.
   `field-sizing: content` lässt Browser, die es können, ohne JavaScript
   mitwachsen; alle übrigen bedient `VIComponents.autoGrow`. */
/* Der zweite Selektor ist KEIN Sonderfall, sondern die Durchsetzung der Regel:
   `.vi-confirm-field .form-input { min-height: var(--ui-field-h) }` in
   components.css hat die höhere Spezifität (0,2,0) und drückte das
   Nachrichtenfeld auf Feldhöhe zurück. Zusammen mit `field-sizing: content`
   (Chrome) schrumpfte ein LEERES Feld dann unter seine `rows` — gemessen zwei
   statt vier Zeilen. Die Höhe gehört dem Baustein, nicht dem Dialog, in dem er
   gerade steht; deshalb steht die Ausnahme HIER und nicht als Sonderregel im
   Dialog-CSS. */
/* `display` an einem Formularelement muss `[hidden]` weiterhin gehorchen — sonst
   steht ein ausgeblendetes Feld sichtbar im Formular (gefunden 10.09.2026 an der
   eingeklappten Maßnahmen-Anmerkung des Anlage-Assistenten: `display: block` schlägt
   das `display: none`, das der Browser für `[hidden]` nur als UA-Regel mitbringt).
   Die Ausnahme steht direkt an der Regel, die sie nötig macht. */
.vi-msgfield[hidden] { display: none; }
.vi-msgfield,
.vi-confirm-field .form-input.vi-msgfield {
  display: block;
  width: 100%;
  min-height: calc(var(--line-height-relaxed, 1.6) * 3.2em + 18px);
  line-height: var(--line-height-relaxed, 1.6);
  resize: vertical;
  overflow-y: hidden;
  field-sizing: content;
}
/* Eine Sende-/Speicherzeile drückt das Feld nicht schmal: der Text bekommt
   die Breite, der Knopf nur seine eigene (Feedback #5 §3, „Senden-Aktion darf
   das Textfeld nicht unnötig schmal drücken"). Unter 560 px steht der Knopf
   unter dem Feld — daneben bliebe für beide zu wenig. */
.vic-msgsend { display: flex; align-items: flex-end; gap: var(--space-2, 8px); }
.vic-msgsend > .vi-msgfield,
.vic-msgsend > .vic-msg { flex: 1 1 auto; min-width: 0; }
.vic-msgsend > .vic-msg { margin-bottom: 0; }
.vic-msgsend > button { flex: 0 0 auto; }
@media (max-width: 560px) {
  .vic-msgsend { flex-direction: column; align-items: stretch; }
}

/* ── Gedämpfter Text (§ gemeinsame Schicht) ───────────────────────────────────
   `.vi-muted` wird projektweit in mehr als zehn Modulen erzeugt — für „nicht
   gepflegt", „—", Herkunftsangaben, Unterzeilen — und hatte bis zum 08.09.2026
   NIRGENDS eine CSS-Regel. Der gedämpfte Text war damit gar nicht gedämpft: er
   stand in derselben Farbe wie der Wert daneben, und die Regel „Fehlendes wird
   in Grau gezeigt, nie als Warnung" konnte optisch nicht greifen.
   Der Ton ist `--gray-500` — der Metadaten-Ton der Designsprache (gemessen
   5,6:1 auf Weiß). NICHT aufhellen. Eine Definition, an EINER Stelle. */
.vi-muted { color: var(--gray-500); }


/* ══ ARBEITSFLÄCHE FÜLLT DEN REST (Feedback #6 §1, 08.09.2026) ═══════════════
   Eine geteilte Arbeitsfläche — Baum links, Akte rechts — braucht eine Höhe, die
   sich nach dem richtet, was im Inhaltsbereich ÜBRIG ist. Nicht nach einer
   geratenen Bildschirmfraktion.

   Gemessen am Objektexplorer vor dieser Änderung (`height: 72vh`):
     1600×950  Fläche 684 px, Beginn bei y=313  →  46 px unter dem Bildschirmrand
     1366×768  dieselbe Rechnung               →  97 px darunter
   Die Unterkante mit Rahmen und Rundung war damit NIE zu sehen, und man musste
   den Inhaltsbereich scrollen, um an das Ende einer Fläche zu kommen, die selbst
   schon innen scrollt (zwei Scrollebenen übereinander). Genau das meldete
   Feedback #6 als „eingequetscht" und „Scrollbereich fast direkt am Rand".

   Zwei Klassen, ausdrücklich zu setzen — KEIN globaler Eingriff in `.content`,
   denn den teilen sich alle Seiten:
     .vic-fills  am Seitencontainer   → Spaltenfluss statt Blockfluss
     .vic-fill   an der Arbeitsfläche → nimmt den Rest, nie mehr
   Der sichtbare Abschluss unten ist das Polster von `.content` (28 px); die
   seitlichen 32 px bleiben unverändert — sie waren nie das Problem.

   Ab hier gilt: wer eine bildschirmfüllende Arbeitsfläche braucht, nimmt diese
   beiden Klassen. Keine neue `vh`-Rechnung. */
.page.active.vic-fills { display: flex; flex-direction: column; min-height: 0; }
.vic-fills > .vic-fill { flex: 1 1 auto; min-height: 0; }
/* Gestapelt (Tablet/Telefon) gibt es kein „Rest" mehr — dort trägt die Seite die
   natürliche Höhe und scrollt normal, sonst würden beide Hälften gequetscht. */
@media (max-width: 1023px) {
  .vic-fills > .vic-fill { flex: 0 0 auto; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §20 · SUCHAUSWAHL (.vic-ssel) — Mehrfachauswahl aus einer LANGEN Liste
   ═══════════════════════════════════════════════════════════════════════════
   Anlass: der Fachkatalog führt 163 Leistungsbereiche, und alle 163 standen in
   der Adressakte als Kästchen-Matrix untereinander. Bis ~25 Einträge bleibt
   `chipSelect` (§18) richtig — darüber ist es eine Suche.

   Die Liste hat eine feste Höhe: eine Auswahl darf die Maske nicht auf das
   Vierfache strecken. Sie scrollt in SICH, die Seite bleibt ruhig. */
.vic-ssel {
  --ssel-h: 300px;
  border: 1px solid var(--gray-300, #C9D2CE);
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface, #FFF);
  overflow: hidden;
}
/* Kopfzeile: Suche links, Stand rechts. Der Stand ist eine AUSSAGE über die
   Auswahl, kein Filterergebnis — deshalb steht er auch bei leerer Suche da. */
.vic-ssel-bar {
  display: flex; align-items: center; gap: var(--space-2, 8px);
  padding: var(--space-2, 8px);
  border-bottom: 1px solid var(--gray-200, #E4E8E6);
  background: var(--gray-50, #F7F9F8);
}
.vic-ssel-bar .vi-search { flex: 1 1 auto; min-width: 0; }
.vic-ssel-n, .vic-ssel-tr {
  font-size: var(--text-xs, 12px); color: var(--gray-500, #5F6B66);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.vic-ssel-clr {
  border: 0; background: none; padding: 0 var(--space-1, 4px);
  font: inherit; font-size: var(--text-xs, 12px);
  color: var(--color-forest, #14603F); cursor: pointer; white-space: nowrap;
  text-decoration: underline; text-underline-offset: 2px;
}
.vic-ssel-clr:focus-visible { outline: 2px solid var(--color-forest, #14603F); outline-offset: 1px; }

.vic-ssel-list { max-height: var(--ssel-h); overflow-y: auto; padding: var(--space-1, 4px) 0; }

/* Gliederungsüberschrift (z. B. FM-Bereich). Sie bleibt beim Scrollen stehen —
   ohne sie weiß man nach zwanzig Zeilen nicht mehr, worin man liest. */
.vic-ssel-g {
  position: sticky; top: 0; z-index: 1;
  padding: var(--space-2, 8px) var(--space-3, 12px) var(--space-1, 4px);
  background: var(--color-surface, #FFF);
  font-size: var(--text-xs, 12px); font-weight: var(--fw-semibold, 600);
  color: var(--gray-500, #5F6B66); letter-spacing: .04em;
}

/* `display: flex` an der Klasse schlägt die Browser-Vorgabe `[hidden]{display:none}` —
   ohne die folgende Zeile bleibt JEDE gefilterte Zeile sichtbar, obwohl sie als
   versteckt markiert ist. Gefunden am 10.09.2026 im Bildschirmfoto, NICHT im
   DOM-Test: der las das Attribut statt der gezeichneten Höhe. */
.vic-ssel-i[hidden] { display: none; }
.vic-ssel-i {
  display: flex; align-items: flex-start; gap: var(--space-2, 8px);
  padding: 7px var(--space-3, 12px);
  cursor: pointer; font-size: var(--text-sm, 13px);
  color: var(--gray-700, #33403B);
}
.vic-ssel-i:hover { background: var(--gray-50, #F7F9F8); }
.vic-ssel-i input { margin: 3px 0 0; flex: 0 0 auto; accent-color: var(--color-forest, #14603F); }
.vic-ssel-i:focus-within { background: var(--gray-50, #F7F9F8); }
.vic-ssel-i:focus-within input { outline: 2px solid var(--color-forest, #14603F); outline-offset: 1px; }
/* Gewähltes bleibt bei aktiver Suche sichtbar (Regel 1 im Kopf der Komponente)
   und wird deshalb auch ERKENNBAR ausgezeichnet — sonst wirkt es wie ein
   zufälliger Treffer. */
.vic-ssel-i.is-on { background: var(--green-50, #EDF6F1); color: var(--color-forest, #14603F); }
/* Bleibt nur wegen der Auswahl stehen, passt aber nicht zur Suche: gestrichelte
   Oberkante als leiser Hinweis „das ist kein Treffer, das ist deine Wahl". */
.vic-ssel-i.is-halten { border-top: 1px dashed var(--green-200, #A9CEBB); }
.vic-ssel-i.is-on .vic-ssel-t { font-weight: var(--fw-medium, 500); }
.vic-ssel-t { display: block; min-width: 0; }
.vic-ssel-h { display: block; font-size: var(--text-xs, 12px); color: var(--gray-500, #5F6B66); font-weight: 400; }

.vic-ssel-none, .vic-ssel-leer {
  padding: var(--space-4, 18px) var(--space-3, 12px);
  font-size: var(--text-sm, 13px); color: var(--gray-500, #5F6B66); text-align: center;
}