/* ═══════════════════════════════════════════════════════════════════════════════════
   ROLLE (UX-Phase 9 §3): GEMEINSAME `vi-*`-BAUSTEINE — Fachschicht, nicht Tokenquelle.
   ───────────────────────────────────────────────────────────────────────────────────
   Diese Datei ist eine von vier Rollen der CSS-Ordnung (siehe Kopf von index.html):
   Tokens stehen ausschließlich in `css/design-system.css`, Element-Vorgaben in
   `design-system.css`, die kanonischen Bausteine der UX-Phasen 2–8 in
   `vi-components.css` (`vic-*`). Hier leben die älteren gemeinsamen `vi-*`-Klassen,
   die noch verwendet werden.

   Am 03.09.2026 sind aus dieser Datei 140 Regelblöcke ohne Erzeuger entfernt worden.
   NEUE gemeinsame Bausteine gehören nach `vi-components.js/.css`, nicht hierher.
   ───────────────────────────────────────────────────────────────────────────────────
   (Historischer Kopf, Stand Phase 2:)
   VICore — KANONISCHE UI-BASISSCHICHT  (Phase 2 · additiv · regressionsarm)
   ─────────────────────────────────────────────────────────────────────────────────
   ZWECK: EIN verbindliches Vokabular an UI-Bausteinen (vi-*) für ALLE künftigen Module.
   Grundlage: docs/UI_UX_DESIGN_SYSTEM.md (verbindlich) + docs/UI_COMPONENTS.md (Anwendung).

   REGELN DIESER DATEI:
   • Nur NEUE vi-*-Klassen. Bestehende Modul-/Legacy-Klassen werden NICHT umgestylt
     (kein Markup-Massenumbau in Phase 2 → keine Regression auf bestehenden Seiten).
   • Ausschließlich Tokens aus design-system.css (Farben/Abstände/Radius/Schatten/Typo).
     Keine hartkodierten Hex-/px-Sonderwerte, keine neue Farbwelt. Grüne CI bleibt.
   • Kanonisch für Buttons/Tabellen/Tabs bleiben die bestehenden Systeme
     (.btn*, .data-table+ui-standard.css, .case-tab-button+ui-standard.css). Diese Datei
     ERSETZT sie nicht, sondern ergänzt fehlende Layout-/Chip-/Empty-Bausteine.
   • Ladeposition: nach den Modul-CSS, vor mobile.css/ui-standard.css (siehe index.html).

   MIGRATION: Module werden ab Phase 3 schrittweise auf diese Klassen umgestellt.
   ═══════════════════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────────────────
   1. SEITENRAHMEN  (vi-page)
   ───────────────────────────────────────────────────────────────────────────────────
   KONSOLIDIERUNG 16.08.2026 — der frühere zweite Seitenkopf `.vi-page-header` /
   `.vi-page-title` / `.vi-page-subtitle` / `.vi-page-eyebrow` ist ENTFERNT.
   Es gab damit zwei Seitenkopf-Systeme nebeneinander: dieses und `.vi-pagehead` /
   `.vi-pagetitle` aus vi-ui.css. Der Kopf war zusätzlich als Karte gebaut (Cream-
   Fläche, Rahmen, Schatten) und stand damit im Widerspruch zum Leitsatz „Fläche
   und Hierarchie vor Rahmen".
   Die beiden einzigen Verwender (photodoc.js, Vorgangsakten-Detail in app.js) sind
   auf `.vi-pagehead` / `.vi-pagetitle` migriert.
   → Seitenkopf einer Arbeitsseite ist AUSSCHLIESSLICH `.vi-pagehead` (vi-ui.css),
     der Modulkopf ist `.vmod-head` (module-chrome.css). Es gibt keinen dritten.
   ─────────────────────────────────────────────────────────────────────────────────── */
/* .vi-page stand hier ein ZWEITES Mal — zusätzlich mit Innenabstand. Die verbindliche
   Definition des Seitenmusters liegt in vi-ui.css. Zwei Definitionen derselben
   zentralen Klasse bedeuteten: der Arbeitsbereich polstert, die Seite polstert noch
   einmal — gemessen 16 px totes Feld über JEDEM Seitenkopf des Gebäudebetriebs.
   Die Varianten --flush/--wide waren nirgends in Gebrauch und sind mit entfallen.
   (UI-Welle: eine Struktur, eine Definition.) */
.vi-page-actions { display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }

/* Schnellfilter-Chip (umschaltbar). Inaktiv = ruhig/neutral, aktiv = Brand-Grün dezent. */
.vi-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 28px;
  padding: 0 var(--space-3);
  border: 1px solid var(--vi-border);
  border-radius: var(--radius-full);
  background: var(--bg-secondary);
  color: var(--vi-ink-70);
  font-family: var(--vi-font-ui);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.vi-filter-chip:hover { background: var(--vi-sand); }
.vi-filter-chip.is-active {
  background: var(--vi-green-soft);
  border-color: var(--vi-green);
  color: var(--vi-green-deep);
}
.vi-filter-chip__count {
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size-xs);
  color: var(--vi-muted);
}
.vi-filter-chip.is-active .vi-filter-chip__count { color: var(--vi-green-deep); }
.vi-list-row.is-selected {
  border-left-color: var(--vi-green);
  background: var(--vi-green-soft);
}

/* Leere Detailansicht (wenn nichts gewählt) */
.vi-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 220px;
  padding: var(--space-6);
  color: var(--vi-muted);
  text-align: center;
}


/* ───────────────────────────────────────────────────────────────────────────────────
   4. CHIPS — EIN System für Status / Priorität / Fälligkeit / Kontext / Medium
   Ersetzt perspektivisch die ~7–9 Alt-Badge-Systeme (Migration ab Phase 3, per Modul).
   Alle Farben aus Tokens; grün NIE für Warnung/Fehler.
   ─────────────────────────────────────────────────────────────────────────────────── */
.vi-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 20px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  font-family: var(--vi-font-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
}
.vi-chip__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }  /* Alias (generisch) */

/* — Fälligkeit — */
.vi-chip--due-overdue { background: var(--vi-error-soft);   color: var(--vi-error); }
.vi-chip--due-today   { background: var(--vi-warning-soft); color: var(--vi-warning); }
.vi-chip--due-soon    { background: var(--vi-info-soft);    color: var(--vi-info); }

/* — Kontext (Objekt/WE, Kategorie, Leistungsbereich, Bauteil, Quelle): ruhig/neutral — */
.vi-chip--context {
  background: var(--bg-secondary);
  color: var(--vi-ink-70);
  border-color: var(--vi-border);
  font-weight: var(--font-weight-medium);
}
.cmd-avatar-note     { background: #6D4FA8; }
.cml-arrowico-task     { color: #9A6A12; }
.cml-arrowico-reminder { color: #A5372F; }
.cmd-avatar-task       { background: #9A6A12; }
.cmd-avatar-reminder   { background: #A5372F; }


/* ───────────────────────────────────────────────────────────────────────────────────
   5. KARTEN  (vi-card / vi-kpi)  — kompakt, ruhig, kein Deko-Hero
   ─────────────────────────────────────────────────────────────────────────────────── */
.vi-card {
  background: var(--bg-secondary);
  border: 1px solid var(--vi-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
  padding: var(--space-4);
}
.vi-kpi.is-clickable { cursor: pointer; transition: box-shadow var(--transition-fast), border-color var(--transition-fast); }
.vi-kpi.is-clickable:hover { box-shadow: var(--shadow-sm); border-color: var(--border-default); }


/* ───────────────────────────────────────────────────────────────────────────────────
   6. EMPTY STATE  (vi-empty) — EIN kompaktes Muster (ersetzt 10+ Varianten, Migration ab P3)
   ─────────────────────────────────────────────────────────────────────────────────── */
.vi-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-3);          /* ~16px – kompakt, keine Riesenbox */
  color: var(--vi-muted);
  text-align: center;
}
.vi-empty__icon { width: var(--icon-size-sm); height: var(--icon-size-sm); opacity: .7; }
.vi-empty__text { font-size: var(--font-size-sm); }
.vi-empty__cta  { margin-top: var(--space-1); }

/* Inline-Variante (eine Zeile, für Tab-/Panel-Leerzustände) */
.vi-empty--inline {
  flex-direction: row;
  justify-content: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  text-align: left;
}


/* ───────────────────────────────────────────────────────────────────────────────────
   7. LADEZUSTAND  (vi-skeleton) — ruhiges Platzhalter-Shimmer ohne Layout-Sprung
   (Globale Progressbar #vi-progress + viBtnBusy bleiben kanonisch; dies ergänzt nur.)
   ─────────────────────────────────────────────────────────────────────────────────── */
.vi-skeleton {
  background: linear-gradient(90deg, var(--vi-sand) 25%, var(--vi-border) 37%, var(--vi-sand) 63%);
  background-size: 400% 100%;
  border-radius: var(--radius-md);
  animation: viSkeleton 1.4s ease infinite;
}
.vi-skeleton--row  { height: 36px; margin: 6px 0; }
@keyframes viSkeleton { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .vi-skeleton { animation: none; } }

/* 7b — KONVERGENZ Leer-/Ladezustände (UI/UX Phase 2, reine Optik): die verstreuten Legacy-Klassen
   auf die ruhige vi-Optik ziehen (kein Markup-Umbau). Innere -title/-icon-Subklassen behalten ihre Größe. */
.cases-empty, .case-empty-state, .cck-empty, .empty-state, .ho-empty, .pd-empty,
.wart-empty, .wart-empty-hint, .adr-empty, .fk-empty, .cp-empty, .vp-empty,
.ec-empty, .eco-empty, .fri-empty, .rech-empty, .dok-table-empty, .aw-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-1); padding: var(--space-5) var(--space-4);
  color: var(--vi-muted); text-align: center; background: transparent; border: 0;
}
/* Ladezustände: ruhiger Spinner (viSpin aus components.css) statt nacktem „Lädt…"-Text */
.vi-loading, .aw-loading, .vpd-loading, .tklc-loading, .vp-detail-loading,
.cck-loading, .doc-pv-loading, .pf-loading, .comm-mail-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: var(--space-6) var(--space-4);
  color: var(--vi-muted); font-size: var(--font-size-sm); text-align: center;
}
.vi-loading::before, .aw-loading::before, .vpd-loading::before, .tklc-loading::before,
.vp-detail-loading::before, .cck-loading::before, .doc-pv-loading::before,
.pf-loading::before, .comm-mail-loading::before {
  content: ""; width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid var(--vi-sand); border-top-color: var(--vi-green);
  animation: viSpin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .vi-loading::before, .aw-loading::before, .vpd-loading::before, .tklc-loading::before,
  .vp-detail-loading::before, .cck-loading::before, .doc-pv-loading::before,
  .pf-loading::before, .comm-mail-loading::before { animation: none; }
}

/* 7c — 14″-TAUGLICHKEIT (UI/UX Phase 2): breite Datentabellen scrollen horizontal statt zu quetschen.
   overflow-x ist ein No-Op solange nichts überläuft; min-width erzwingt erst ab Überlauf den Scroll. */
@media (max-width: 1440px) {
  .obj-table-wrap, .abl-tablewrap, .wart-table-wrap, .rech-table-wrap,
  .data-table-wrap, .wk-wl-wrap, .cmp-tablewrap, .cx-tablewrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .obj-table-wrap > table, .abl-tablewrap > table, .wart-table-wrap > table,
  .rech-table-wrap > table { min-width: 860px; }
}
@media (max-width: 640px) {
  .vi-page { padding: var(--space-3); }
}


/* ───────────────────────────────────────────────────────────────────────────────────
   11. MODUL-FEINSCHLIFF (Phase 3/4) — minimale Integrations-/Abstandsregeln,
   damit vi-Bausteine in bestehende Modul-Markups sauber sitzen (keine Architektur).
   ─────────────────────────────────────────────────────────────────────────────────── */
/* Vorgangs-Kommunikation: Status-Chip in der E-Mail-Listenzeile (neben Absender) */
.cml-statechip { margin-left: 6px; vertical-align: middle; }
/* Leeres Lesepane nutzt vi-detail-empty (zentriert); cmd-empty-Altabstand neutralisieren */
.cmd-empty.vi-detail-empty { display: flex; }


/* ───────────────────────────────────────────────────────────────────────────────────
   12. DOKUMENTE-AKTE (Phase 5) — moderne, aktenartige Optik statt Spreadsheet.
   Tabelle/colgroup/Resize/IDs/Handler bleiben unberührt; nur Look der Zeilen + Vorschau.
   ─────────────────────────────────────────────────────────────────────────────────── */
/* Datei-Typ-Icon (farbcodiert, marken-neutral) — Farbtöne bewusst gleich wie der Dateityp-Chip. */
.doc-ftype { display: inline-flex; flex: none; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--vi-sand); }
.doc-ftype svg { width: 18px; height: 18px; }
.doc-ftype-word    { background: var(--vi-info-soft, #EAF1FB); }    .doc-ftype-word svg    { color: var(--vi-info, #2D5E8C); }
.doc-ftype-excel   { background: var(--vi-success-soft, #E7F4EC); } .doc-ftype-excel svg   { color: var(--vi-success, #0F5C42); }
.doc-ftype-ppt     { background: #FBEDE6; }                         .doc-ftype-ppt svg     { color: #B5521E; }
.doc-ftype-pdf     { background: var(--vi-error-soft, #FBEAEA); }   .doc-ftype-pdf svg     { color: var(--vi-error, #B42318); }
.doc-ftype-image   { background: var(--vi-success-soft, #E7F4EC); } .doc-ftype-image svg   { color: var(--vi-success, #0F5C42); }
.doc-ftype-mail    { background: var(--vi-info-soft, #EAF1FB); }    .doc-ftype-mail svg    { color: var(--vi-info, #2D5E8C); }
.doc-ftype-archive { background: #F1ECF7; }                         .doc-ftype-archive svg { color: #6B4E9A; }
.doc-ftype-text    { background: var(--vi-sand, #EFF2F1); }         .doc-ftype-text svg    { color: var(--vi-ink-70, #3A4441); }
.doc-ftype-file    { background: var(--vi-sand, #EFF2F1); }         .doc-ftype-file svg    { color: var(--vi-muted, #5F6B66); }
/* Rückwärtskompatible Alt-Klassen (frühere Glyphen) */
.doc-ftype-doc  { background: var(--vi-info-soft); }     .doc-ftype-doc svg  { color: var(--vi-info); }
.doc-ftype-xls  { background: var(--vi-success-soft); }  .doc-ftype-xls svg  { color: var(--vi-success); }
.doc-ftype-img  { background: var(--vi-success-soft); }  .doc-ftype-img svg  { color: var(--vi-success); }

/* Name-Zelle: Icon + Name + Meta-Chips-Zeile */
.doc-table .doc-col-name { vertical-align: middle; }
.doc-name-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.doc-name-cell .doc-rowcheck { flex: none; }
.doc-name-block { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.doc-name-line { font-size: var(--text-md); font-weight: var(--font-weight-medium); color: var(--vi-ink); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-meta-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.doc-col-type .doc-type-chip { font-weight: var(--font-weight-medium); }

/* Lesbarer Dateityp-Chip (DOCX/XLSX/PDF …) direkt in der Listenzeile — Dateityp NICHT nur über Farbe/Icon. */
.doc-ftype-chip {
  display: inline-flex; align-items: center; flex: none;
  font-family: var(--vi-font-mono, monospace); font-size: 10px; font-weight: 700; letter-spacing: .02em;
  line-height: 1; padding: 2px 6px; border-radius: var(--radius-sm); text-transform: uppercase;
  background: var(--vi-sand, #EFF2F1); color: var(--vi-ink-70, #3A4441);
}
.doc-ftype-chip--word  { background: var(--vi-info-soft, #EAF1FB);    color: var(--vi-info, #2D5E8C); }
.doc-ftype-chip--excel { background: var(--vi-success-soft, #E7F4EC); color: var(--vi-success, #0F5C42); }
.doc-ftype-chip--ppt   { background: #FBEDE6; color: #B5521E; }
.doc-ftype-chip--pdf   { background: var(--vi-error-soft, #FBEAEA);   color: var(--vi-error, #B42318); }
.doc-ftype-chip--img   { background: var(--vi-success-soft, #E7F4EC); color: var(--vi-success, #0F5C42); }
.doc-ftype-chip--mail  { background: var(--vi-info-soft, #EAF1FB);    color: var(--vi-info, #2D5E8C); }
.doc-ftype-chip--arch  { background: #F1ECF7; color: #6B4E9A; }
.doc-ftype-chip--txt   { background: var(--vi-sand, #EFF2F1);         color: var(--vi-ink-70, #3A4441); }
.doc-ftype-chip--file  { background: var(--vi-sand, #EFF2F1);         color: var(--vi-muted, #5F6B66); }

/* Ruhige, moderne Zeilen: weiche Trenner, klarer Hover/Selektion (kein Spreadsheet-Gitter).
   Nur in der breiten Tabellenansicht (Container ≥901px); die Kartenansicht (≤900px) bringt
   eigene Zeilen-/Auswahlstile mit (style.css), daher dort KEIN zusätzliches td-Padding. */
.doc-table tbody tr.doc-row.doc-row-clickable { cursor: pointer; }
@container doclist (min-width: 901px) {
  .doc-table tbody tr.doc-row > td { border-bottom: 1px solid var(--vi-border); padding-top: 9px; padding-bottom: 9px; }
  .doc-table tbody tr.doc-row:hover > td { background: var(--table-row-hover); }
  .doc-table tbody tr.doc-row.is-selected > td { background: var(--vi-green-soft); }
  .doc-table tbody tr.doc-row.is-selected > td.doc-col-name { box-shadow: inset 3px 0 0 var(--vi-green); }
}

/* Aktionen ruhig & geordnet */
.doc-actions { display: flex; align-items: center; gap: 2px; justify-content: flex-end; }
.doc-act-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; background: transparent; border-radius: var(--radius-md); color: var(--vi-muted); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); }
.doc-act-btn:hover { background: var(--vi-sand); color: var(--vi-ink); }
.doc-act-btn svg { width: 17px; height: 17px; }

/* Meta-Chips-Zeile (Art · Quelle · Version · Datum). In der breiten Tabellenansicht
   (Container ≥901px) liefern die Art-/Datum-Spalten diese Werte → dort aus der Meta-Zeile
   ausblenden (keine Dopplung); in der Kartenansicht (14"-Listenbreite) trägt sie alles. */
.doc-meta-row .doc-mr-date { font-family: var(--vi-font-mono); font-size: var(--text-xxs); color: var(--vi-muted); }
@container doclist (min-width: 901px) { .doc-meta-row .doc-mr-type, .doc-meta-row .doc-mr-date { display: none; } }

/* Vorschau-Pane ruhiger strukturieren */
.doc-preview-pane { border: 1px solid var(--vi-border); border-radius: var(--table-radius); background: var(--bg-secondary); }
.doc-pv-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 220px; padding: var(--space-5); color: var(--vi-muted); text-align: center; }
.doc-pv-empty-icon svg { width: 26px; height: 26px; opacity: .7; }

/* ── Versionshistorie-Modal: festes Tabellen-Layout, kein horizontaler Überlauf am Desktop ── */
.modal-overlay .modal-content.doc-vh-modal { max-width: 900px; width: min(900px, 94vw); }
.doc-vh-body { max-height: 64vh; overflow-y: auto; }
.doc-vh-scroll { overflow-x: hidden; }   /* Desktop: passt; nur sehr schmale Screens scrollen horizontal */
.doc-vh-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--text-xs); }
.doc-vh-table col.doc-vh-w-ver  { width: 8%; }
.doc-vh-table col.doc-vh-w-file { width: 25%; }
.doc-vh-table col.doc-vh-w-when { width: 13%; }
.doc-vh-table col.doc-vh-w-who  { width: 14%; }
.doc-vh-table col.doc-vh-w-size { width: 9%; }
.doc-vh-table col.doc-vh-w-note { width: 19%; }
.doc-vh-table col.doc-vh-w-dl   { width: 12%; }
.doc-vh-table th { text-align: left; font-size: var(--text-xxs); font-weight: 700; letter-spacing: normal; text-transform: none; color: var(--vi-muted, #5F6B66); padding: 6px 8px; border-bottom: 1px solid var(--vi-border, #D8DFDC); white-space: nowrap; }
.doc-vh-table td { padding: 8px; border-bottom: 1px solid var(--vi-border, #EFEAE0); vertical-align: middle; color: var(--vi-ink, #141A17); }
.doc-vh-table tbody tr:last-child td { border-bottom: none; }
.doc-vh-c-ver { white-space: nowrap; }
.doc-vh-c-when, .doc-vh-c-size { white-space: nowrap; color: var(--vi-ink-70, #3A4441); }
.doc-vh-c-file, .doc-vh-c-who, .doc-vh-c-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-vh-c-note { color: var(--vi-ink-70, #3A4441); }
.doc-vh-c-dl { text-align: right; white-space: nowrap; }
.doc-vh-dl { white-space: nowrap; }
.doc-vh-cur-row td { background: var(--vi-green-tint, #EDF7F2); }
.doc-vh-current { display: inline-block; margin-left: 4px; font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: var(--radius-md); background: var(--vi-green-soft, #EDF7F2); color: var(--vi-green-deep, #0F5C42); vertical-align: middle; }
.doc-vh-muted { color: var(--vi-muted, #5F6B66); }
.doc-vh-empty { padding: 18px; text-align: center; color: var(--vi-muted, #5F6B66); }
@media (max-width: 640px) { .doc-vh-scroll { overflow-x: auto; } .doc-vh-table { min-width: 640px; } }


/* ───────────────────────────────────────────────────────────────────────────────────
   13. COCKPIT (Phase 6) — content-first: Deko-Hero raus, KPIs/Heute-wichtig verdichtet.
   Reine Optik; Klickrouten, Severity-Klassen (_ckpiSetSeverity), Objektkontext unberührt.
   Überschreibt die Deko aus vicore-premium.css (lädt davor).
   ─────────────────────────────────────────────────────────────────────────────────── */
/* 6.1 — Kompakter Arbeitskopf statt Deko-Hero (kein Verlauf/Kreis/Negativ-Margin) */
.cockpit-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap;
  padding: 2px 2px 11px;
  margin: 0 0 14px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--vi-border);
  border-radius: 0;
  box-shadow: none;
}
.cockpit-topbar::before, .cockpit-topbar::after { content: none; display: none; }
.cockpit-topbar .page-title { font-size: 19px; line-height: 1.2; margin: 0; }
.cockpit-topbar .page-subtitle { font-size: var(--text-xs); margin-top: 1px; }
.cockpit-topbar .vi-eyebrow { font-size: var(--text-xxs); }

/* 6.2 — KPI-Kacheln kompakt & ruhig (Severity-Rail/Tint bleibt aus vicore-premium) */
.cockpit-kpi-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.ckpi-card-clickable:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--vi-green-soft); }
.ckpi-value { font-size: var(--text-xl); }
.ckpi-label { font-size: var(--text-xxs); letter-spacing: .03em; }
.ckpi-icon { width: 30px; height: 30px; border-radius: var(--radius-md); }
.ckpi-icon svg { width: 16px; height: 16px; }
.card:hover, .cck-section:hover { box-shadow: none; }


/* ───────────────────────────────────────────────────────────────────────────────────
   14. COCKPIT/SHELL — VISUAL-QUALITY-PASS (Phase 6b)
   Ziel: hochwertige, ruhige FM-/CAFM-Anmutung. Reine Optik (CSS), keine Logik/Routen/Navi.
   ─────────────────────────────────────────────────────────────────────────────────── */
:root {
  /* Redesign 16.08.2026: Flächen tragen KEINEN Schatten mehr. Der frühere Wert legte
     unter jede Karte, jede Tabelle und jede Werkzeugleiste eine weiche Tiefe — auf
     einer Übersichtsseite mit zwölf Flächen schwebt dann die ganze Seite. Struktur
     kommt jetzt aus Fläche, Abstand und EINER feinen Linie. Wer echte Tiefe braucht
     (Menü, Dialog, Drawer), nimmt --shadow-pop / --shadow-xl. */
  --vi-prem-shadow: none;
  --vi-prem-border: var(--gray-300);
}

/* 6b.1 — Karten: EIN Radius, EIN Rahmen, kein Schatten */
.ckpi-card, .cck-section, .vi-prio, .vi-card, .card, .panel {
  border: 1px solid var(--vi-prem-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--vi-prem-shadow);
}
#page-dashboard .content, #page-dashboard { background: transparent; }

/* 6b.2 — KPI als hochwertige Status-Karten (einheitliche Höhe, Zahl als Held) */
/* Höhe FLEXIBEL (min-height statt fixe height): bei schmalen Karten/zweizeiligem
   Label sonst Abschneiden des Untertitels (overflow:hidden). Label darf umbrechen,
   statt mit „…" zu kürzen. Karten in einer Reihe bleiben via align-items:stretch gleich hoch. */
.cockpit-kpi-bar { gap: 11px; align-items: stretch; }
.ckpi-label { font-size: var(--text-xs, 12px); font-weight: 600; letter-spacing: 0; color: var(--vi-muted); line-height: 1.25; max-width: 100%; white-space: normal; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ckpi-value { font-size: 25px; font-weight: 600; letter-spacing: -.025em; color: var(--vi-ink); }
.ckpi-icon { width: 27px; height: 27px; border-radius: var(--radius-md, 8px); background: var(--gray-100); color: var(--vi-ink-70); }
.ckpi-icon svg { width: 15px; height: 15px; }
.ckpi-label { grid-column: 1 / -1; grid-row: 1; }
.ckpi-value { grid-column: 1; grid-row: 2; }
.ckpi-icon  { grid-column: 2; grid-row: 2; align-self: center; }
.ckpi-card-warn .ckpi-icon  { background: var(--vi-warning-soft); color: var(--vi-warning); }
.ckpi-card-crit .ckpi-icon  { background: var(--vi-error-soft);   color: var(--vi-error); }
.ckpi-card-warn, .ckpi-card-crit { background: var(--bg-secondary); }
.cck-cases-table thead th { background: transparent !important; color: var(--vi-muted) !important; font-size: var(--text-xs, 12px) !important; letter-spacing: normal; border-bottom: 1px solid var(--border-subtle) !important; padding: 8px 10px !important; text-transform: none; }
.cck-cases-table td { border-bottom: 1px solid var(--table-row-line, var(--gray-200)); padding: 10px; }
.cck-cases-table tbody tr:last-child td { border-bottom: 0; }

/* 6b.5 — Sidebar entschweren: leichtere Dichte, sauberere Gruppen (NUR Layout/Dichte).
   Farbgebung + Aktiv-Pille kommen ausschließlich aus den --sb-*-Tokens (design-system.css:
   „Sidebar Forest mit heller Schrift" in JEDEM Theme-Zustand). Die früheren
   .sidebar[data-theme="light"]-Farbüberschreibungen (helle-Sidebar-Ära) sind entfernt:
   nach der Token-Vereinheitlichung auf Forest malten sie taupe/dunkelgrünen Text auf den
   Forest-Grund und zerlegten den Light-Toggle. Light == Dark, rein tokengetrieben. */
.nav-start .nav-start-tile, .nav-label { font-size: var(--text-md, 14px); min-height: 38px; padding: 7px 11px; }
.nav-section .nav-item { font-size: var(--text-md, 14px); }
.nav-start .nav-start-tile.active, .nav-section .nav-item.active { font-weight: 600; }
.nav-section .nav-item.active::after { display: none; }
.nav-grouplabel { font-size: var(--text-xxs, 11px); letter-spacing: .09em; padding: 16px 12px 6px; }
/* Sidebar-Suche (Altbestand; die eine Suche der App steht im Header) — weiße Fläche
   auf der farbigen Navigationsfläche, damit Eingabetext immer lesbar bleibt. */
.sb-search { background: var(--color-surface); border-color: transparent; min-height: 38px; border-radius: var(--radius-md, 8px); }
.sb-search:hover { border-color: var(--sb-border); }
.sidebar-footer { padding: 10px 12px; }
.logo-company { font-size: 20px; }

/* 6b.6 — Topbar: rechte Aktionen ruhiger & einheitlich ausgerichtet */
.topbar-right { gap: 7px; }
.topbar-clock { border-color: var(--vi-prem-border); }


/* ═══════════════════════════════════════════════════════════════════════════════════
   15. GLOBALE DESIGNSPRACHE 2.0 — durchgängig über ALLE Module (reine Optik).
   Ziel: einheitlicher, hochwertiger Produkteindruck. Keine Logik/Markup-Neuarchitektur.
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* 15.1 — EINHEITLICHE SEITENKÖPFE: alle Modulköpfe kompakt & clean (kein Deko-Hero/Verlauf).
   Vereinheitlicht .page-header (viele Listen) und .obj-topbar (Objekte) zum kompakten Kopf. */
.page-header, .obj-topbar {
  background: none !important;
  border: none;
  border-bottom: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 var(--space-3);
  margin: 0 0 var(--space-4);
  min-height: 0;
}
.page-header::before, .obj-topbar::before { content: none; display: none; }
/* Der Seitentitel braucht keine Linie unter sich: der Abstand zur nächsten Ebene
   (Ansichten/Filter) trennt bereits — eine zusätzliche Trennlinie ist die dritte
   waagerechte Kante innerhalb von 90 px (Modulkopf, Tabs, Titel). */
.page-title  { font-size: var(--text-xl) !important; line-height: 1.2; letter-spacing: -.02em; font-weight: var(--fw-semibold); color: var(--gray-900); }
.page-subtitle { font-size: var(--text-sm) !important; margin-top: 2px; color: var(--gray-500); }

/* 15.2 — KARTEN-/FLÄCHEN-SPRACHE: ein Card-Look über alle Module (feiner Rand + ruhige Tiefe). */
.card, .panel, .cck-section, .ckpi-card, .vi-card, .workspace-section,
.cmp-form-card, .cmp-detail, .vp-card, .vpd-card, .vpd-panel, .fk-content, .fk-sidebar,
.cx-card, .cx-kpi, .set-section, .set-card, .imp2-card, .ho-card, .adr-card, .mat-section,
.meeting-card, .cck-card, .pruef-obj-block {
  border: 1px solid var(--vi-prem-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--vi-prem-shadow);
}

/* 15.3 — TABELLEN bekommen eine Karten-Fläche (nicht mehr „nackt" auf der Cremefläche). */
.dok-table-wrap, .doc-table-wrap, .abl-tablewrap, .adr-tablewrap, .fk-tablewrap,
.cmp-tablewrap, .cx-tablewrap, .wart-table-wrap, .data-table-wrap, .rech-table-wrap,
#cases-list-wrap .cases-table, .wk-wl-wrap, .stammdaten-table-wrap {
  background: var(--color-surface);
  border: 1px solid var(--vi-prem-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--vi-prem-shadow);
  overflow: hidden;
}

/* 15.4 — TABELLEN moderner: ruhige Zeilen, klarer Hover, weniger Rohdaten-Look. */
.data-table tbody tr td, .abl-table tbody td, .dok-table tbody td, .doc-table tbody td,
.adr-table tbody td, .fk-table tbody td, .cx-table tbody td,
.rech-table tbody td, .wart-table tbody td, .obj-table tbody td {
  border-bottom: 1px solid var(--table-row-line, var(--gray-200));
}
.data-table tbody tr:hover td, .abl-table tbody tr:hover td, .dok-table tbody tr:hover td,
.adr-table tbody tr:hover td, .fk-table tbody tr:hover td,
.cx-table tbody tr:hover td, .rech-table tbody tr:hover td, .wart-table tbody tr:hover td,
.obj-table tbody tr:hover td { background: var(--table-row-hover); }

/* 15.5 — FILTER-/TOOLBARS sind KEINE Karten (Redesign 16.08.2026).
   Sie standen als weiße Karte mit Rahmen und Schatten über der Liste — und darin
   lagen wieder weiße Felder mit eigenem Rahmen. Drei Flächenebenen für eine Zeile
   Bedienelemente. Die Felder tragen ihren Rahmen selbst; die Leiste ordnet nur an. */
.cases-filter-bar, .vp-toolbar, .tk-fbar, .fk-toolbar, .adr-toolbar, .cmp-toolbar,
.cx-bar, .doc-toolbar, .abl-toolbar, .wk-bar {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding-left: 0; padding-right: 0;
}

/* 15.6 — BUTTON-HIERARCHIE konsistent (Primär/Sekundär/Ghost ruhig & einheitlich). */
.btn-primary, .vi-btn-primary {
  background: var(--brand-primary); color: var(--color-surface); border: none; border-radius: var(--radius-md);
  font-weight: 600; box-shadow: none; text-transform: none; letter-spacing: -.005em;
}
.btn-primary:hover:not(:disabled), .vi-btn-primary:hover:not(:disabled) { background: var(--brand-primary-hover); }

/* 15.7 — LEGACY-BADGES (.pill) optisch an die vi-Chip-Sprache angleichen (ruhige Pillen). */
.pill { border-radius: var(--radius-full); font-weight: var(--font-weight-medium); font-size: var(--font-size-xs); padding: 2px 9px; border: 1px solid transparent; }

/* ───────────────────────────────────────────────────────────────────────────────────
   16. KOMMUNIKATION — Master-Detail-Politur (Liste · Splitter · Anhänge)
   Reine Optik/Layout auf der bestehenden .cm2-Struktur. Tokens, grüne CI, theme-fähig.
   ─────────────────────────────────────────────────────────────────────────────────── */

/* 16.1 — Breite der linken Liste über Splitter steuerbar (Default ~384px). */
.cm2 { --cm2-list-w: 384px; }
.cm2-list { flex: 0 0 var(--cm2-list-w); width: var(--cm2-list-w); }

/* 16.2 — Listenzeile: Absender/Empfänger PROMINENT, Datum oben rechts, kompakter Badge,
          Betreff darunter, Auszug zuletzt. Aktive Mail klar markiert (grüner Akzent). */
.cml-row { display: flex; gap: 10px; padding: 10px 14px; align-items: flex-start; cursor: pointer;
  border-bottom: 1px solid var(--vi-border, #ECE7DB); transition: background .12s ease; }
.cml-row:hover { background: var(--vi-sand, #F7F4ED); }
.cml-row.is-sel { background: #EEF5F0; box-shadow: inset 3px 0 0 var(--primary, #147352); }
.cml-row .cml-main { min-width: 0; flex: 1 1 auto; }
.cml-row .cml-arrowico { flex: 0 0 auto; margin-top: 3px; }
.cml-top { display: flex; align-items: baseline; gap: 8px; }
.cml-party { flex: 1 1 auto; min-width: 0; font-size: var(--text-sm); font-weight: 600; color: var(--vi-ink, #1A2B22);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cml-top .cml-date { flex: 0 0 auto; font-size: var(--text-xxs); color: var(--vi-muted, #5F6B66); white-space: nowrap; }
.cml-sub { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.cml-statechip { flex: 0 0 auto; font-size: var(--text-xxs); padding: 1px 7px; }
.cml-subject { flex: 1 1 auto; min-width: 0; font-size: var(--text-xs); color: var(--vi-ink-70, #475467);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cml-snip-line { margin-top: 3px; font-size: var(--text-xs); line-height: 1.35; color: var(--vi-muted, #5F6B66);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cml-snip-empty { font-style: italic; color: #AFA89A; }
.cml-snip-fail { color: var(--vi-error, #B42318); }
.cml-att { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; font-size: var(--text-xxs); color: var(--vi-muted, #5F6B66); }
.cml-needsreply { flex: 0 0 auto; font-size: 10px; font-weight: 600; color: var(--vi-warning, #B5530F);
  background: var(--vi-warning-soft, #FBEFE0); padding: 1px 6px; border-radius: var(--radius-pill); white-space: nowrap; }
.cml-unread .cml-party { font-weight: 700; color: var(--vi-ink, #101828); }
.cml-unread .cml-subject { color: var(--vi-ink, #101828); font-weight: 600; }

/* 16.3 — Splitter zwischen Liste und Lesepane. Unter 900px aus (Stapel-Layout). */
.cm2-split { flex: 0 0 7px; width: 7px; min-width: 7px; align-self: stretch; cursor: col-resize; position: relative; background: transparent; touch-action: none; }
.cm2-split::before { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 1px;
  background: var(--vi-border, #ECE7DB); transition: background .12s ease, width .12s ease, left .12s ease; }
.cm2-split:hover::before { background: var(--primary, #147352); width: 2px; left: 2.5px; }
body.vi-resizing { cursor: col-resize; user-select: none; }
body.vi-resizing iframe { pointer-events: none; }

/* 16.4 — Anhang-Block: ruhig, klar getrennt (Datei links · Status · Aktionen rechts). */
.comm-atts-box { margin-top: 14px; border: 1px solid var(--vi-border, #ECE7DB); border-radius: var(--radius-lg);
  background: var(--bg-secondary, #fff); overflow: hidden; }
.comm-atts-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--vi-border, #ECE7DB); background: var(--vi-sand, #F7F4ED); }
.comm-atts-title { font-size: var(--text-xs); font-weight: 600; color: var(--vi-ink-70, #475467); letter-spacing: .02em; }
.comm-att-allbtn { font-size: var(--text-xs); font-weight: 600; color: var(--primary, #147352); background: transparent;
  border: 1px solid var(--vi-border, #ECE7DB); border-radius: var(--radius-md); padding: 3px 10px; cursor: pointer; }
.comm-att-allbtn:hover { background: var(--vi-success-soft, #E3F0E8); }
.comm-att-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; }
.comm-att-row + .comm-att-row { border-top: 1px solid var(--vi-border, #ECE7DB); }
.comm-att-ico { flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--radius-md); display: inline-flex;
  align-items: center; justify-content: center; background: var(--gray-50); color: var(--vi-muted, #5F6B66); }
.comm-att-ico-pdf { background: var(--color-danger-soft); color: var(--color-danger); }
.comm-att-ico-img { background: #E3F0E8; color: var(--color-success-ink); }
.comm-att-ico-doc { background: #E7EEF7; color: #2B5C9A; }
.comm-att-ico-xls { background: #E3F0E8; color: #1E7A48; }
.comm-att-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.comm-att-name { font-size: var(--text-sm); font-weight: 600; color: var(--vi-ink, #1A2B22);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comm-att-sub { font-size: var(--text-xxs); color: var(--vi-muted, #5F6B66); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.comm-att-status { color: var(--vi-success, #2E7D46); font-weight: 600; }
.comm-att-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.comm-att-act { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); font-weight: 600;
  color: var(--vi-ink-70, #475467); background: var(--bg-secondary, #fff); border: 1px solid var(--vi-border, #ECE7DB);
  border-radius: var(--radius-md); padding: 4px 10px; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s; }
.comm-att-act:hover { background: var(--vi-sand, #F7F4ED); border-color: var(--gray-300); }
.comm-att-act-icon { padding: 4px 8px; }
.comm-att-act-take { color: var(--primary, #147352); border-color: #BFE0CD; }
.comm-att-act-take:hover { background: var(--vi-success-soft, #E3F0E8); }
.comm-att-act-doc { color: var(--primary, #147352); }
.comm-att-muted { font-size: var(--text-xxs); color: var(--vi-muted, #5F6B66); font-style: italic; }

/* 16.5 — Responsiv: unter 900px stapeln (Splitter aus, Liste volle Breite). */
@media (max-width: 900px) {
  .cm2-split { display: none; }
  .cm2-list { flex: none; width: auto; }
}
@media (max-width: 560px) {
  .comm-att-row { flex-wrap: wrap; }
  .comm-att-actions { width: 100%; justify-content: flex-end; }
}

/* 16.6 — HTML-Mail-Inhalt (gesäubert, in sandboxed iframe) + Plaintext-Fallback.
   Mail-HTML wird gekapselt: es darf das VICore-Layout nicht beeinflussen; Bilder/Tabellen begrenzt. */
.comm-mail-html { margin-top: 4px; }
.comm-mail-frame { display: block; width: 100%; min-height: 160px; border: 0; background: var(--color-surface); }
.comm-mail-loading, .comm-mail-error, .comm-mail-empty { padding: 12px 2px; font-size: var(--text-sm); color: var(--vi-muted, #5F6B66); }
.comm-mail-error { color: var(--vi-error, #B42318); }
/* Plaintext-Fallback: pre-wrap für Absätze/Umbrüche, aber moderate line-height (keine „riesigen"
   Lücken) und klickbare Links; Links erben NICHT das globale App-Styling zerstörend. */
.mail-maintext.comm-mail-plain { white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
.mail-maintext.comm-mail-plain a, .mail-drawer-body .mail-maintext a { color: var(--green-700); text-decoration: underline; word-break: break-word; }

/* 16.7 — Prioritäts-Chip + professioneller Kopf-Metablock (Von/An/Cc kompakt + aufklappbar) */
.cmd-prio { flex: 0 0 auto; font-size: var(--text-xxs); font-weight: 700; border-radius: 4px; padding: 2px 8px; white-space: nowrap; }
.cmd-prio-high { background: var(--color-danger-soft); color: var(--color-danger-ink); border: 1px solid #F3C9C2; }
.cmd-prio-low  { background: #EEF1F5; color: #5C6470; border: 1px solid #DCE0E6; }
.mail-drawer-prio { margin: 6px 0 2px; }
.cmd-meta { margin-top: 10px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px; font-size: var(--text-xs); align-items: baseline; }
.cmd-meta-row { display: contents; }
.cmd-meta-k { color: var(--vi-muted, #5F6B66); font-weight: 600; white-space: nowrap; }
.cmd-meta-v { color: #344054; min-width: 0; display: flex; flex-wrap: wrap; gap: 3px 6px; align-items: baseline; }
.cmd-meta-empty { color: var(--vi-muted, #5F6B66); }
.cmd-addr { max-width: 100%; overflow-wrap: anywhere; }
.cmd-meta-v .cmd-addr:not(:last-child)::after { content: ","; color: var(--vi-muted, #5F6B66); }
.cmd-cc-more { border: 1px solid var(--line, #DCE0E6); background: var(--color-surface); color: var(--gray-700); border-radius: var(--radius-pill); font-size: var(--text-xxs); font-weight: 600; padding: 1px 8px; cursor: pointer; white-space: nowrap; line-height: 1.4; }
.cmd-cc-more:hover { background: #F2F4F7; }
.cmd-cc-rest { display: inline-flex; flex-wrap: wrap; gap: 3px 6px; }
.cml-prio { display: inline-block; font-size: 9.5px; font-weight: 700; color: var(--color-danger-ink); background: var(--color-danger-soft); border-radius: 4px; padding: 0 5px; white-space: nowrap; }

/* ───────────────────────────────────────────────────────────────────────────────────
   17. DOKUMENT-AKTIONEN — Mehr-Menü mit Gruppen-Headern + klar getrennter Gefahraktion
   ─────────────────────────────────────────────────────────────────────────────────── */
/* Langes, gruppiertes Menü auf kleinen Screens nie über den Viewport hinaus → scrollbar. */
.obj-ctx-menu { max-height: calc(100vh - 24px); overflow-y: auto; }
.obj-ctx-group {
  padding: 7px 10px 3px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--vi-muted, #9A9384);
}
.obj-ctx-menu .obj-ctx-info + .obj-ctx-group,
.obj-ctx-menu .obj-ctx-group:first-child { padding-top: 4px; }
/* „Dokument löschen": dauerhaft als Gefahraktion erkennbar (nicht erst beim Hover). */
.obj-ctx-menu .obj-ctx-item-danger { color: var(--vi-error, #B42318); }
.obj-ctx-menu .obj-ctx-item-danger:hover { background: var(--vi-error-soft, #FBEEEB); color: var(--color-danger-ink); }

/* ───────────────────────────────────────────────────────────────────────────────────
   18. NAVIGATIONS-REDESIGN — flache (immer sichtbare) Gruppen ohne Aufklapp-Label
   START/ARBEIT/OBJEKTE + Budget/Adressen liegen in label-losen .nav-flat-Sektionen.
   Items rücken näher an den Rand (kein Eltern-Label) und ohne Verbindungs-Rail.
   ─────────────────────────────────────────────────────────────────────────────────── */
.nav-section.nav-flat .nav-item { padding-left: 12px; }
.nav-section.nav-flat .nav-item::before { display: none; }
.nav-section.nav-flat .nav-item.active::after { display: none; }

/* ───────────────────────────────────────────────────────────────────────────────────
   19. NAVIGATIONS-NEUAUFBAU — „Mehr"-Knopf, „Verwaltung"-Zahnrad, Flyouts, Header-Suche
   Sidebar = reine Navigation (config-getrieben aus NAV_CONFIG, public/app.js). Die
   Sekundär-/Systembereiche liegen in Flyouts; die globale Suche lebt im Header.
   ─────────────────────────────────────────────────────────────────────────────────── */

/* Header-Layout: globale Suche bekommt den flexiblen Platz, Objektkontext bleibt kompakt. */
.topbar-objctx { flex: 0 1 auto; }
.nav-more-btn.is-open .nav-more-caret { transform: rotate(90deg); }
.nav-more-btn.is-open { background: var(--sb-hover); }
.nav-section.nav-flat .nav-more-btn.active { background: var(--sb-active-bg); color: var(--sb-active-text); font-weight: 600; }
.nav-more-btn.active .nav-icon { color: var(--sb-active-text); }
.sf-gear.is-open { background: var(--sb-active-bg); color: var(--sb-active-text); border-color: transparent; }
.sf-gear.active { color: var(--sb-active-text); }

/* Eingeklappte Sidebar (Icon-Modus): Labels/Caret verbergen, Aktionen zentriert stapeln. */
.sidebar.is-collapsed .sf-actions { flex-direction: column; gap: 6px; }
.sidebar.is-collapsed .sf-gear { width: 44px; flex: none; justify-content: center; padding: 0; gap: 0; }
.sidebar.is-collapsed .sf-gear-label { display: none; }
.sidebar.is-collapsed .nav-more-btn .nav-text,
.sidebar.is-collapsed .nav-more-caret { display: none; }
.nav-flyout.open { display: block; }
@keyframes navFlyIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.nav-fly-item.is-active { background: var(--brand-bg-soft, var(--vi-green-soft, #EDF7F2)); color: var(--brand-primary, var(--gruen, #147352)); font-weight: 600; }
.nav-fly-item.is-active .nav-fly-ic { color: var(--brand-primary, var(--gruen, #147352)); }
.nav-fly-item .nav-badge { margin-left: auto; display: inline-flex; }
.nav-fly-item.is-planned { cursor: default; color: var(--subtle, #A8A294); }
.nav-fly-item.is-planned:hover { background: transparent; }
.nav-fly-item.is-planned .nav-fly-ic { opacity: .5; }

/* Responsiv (14"/1366 px): Tastaturhinweis ausblenden, Brotkrümel kürzen, Suche behält Vorrang. */
@media (max-width: 1280px) {
  .topbar-search-kbd { display: none; }
  .breadcrumb { max-width: 22ch; }
}
@media (max-width: 1120px) {
  .topbar-search { min-width: 120px; }
  .breadcrumb { display: none; }
}

/* Kompaktmodus (Icon-Rail, 76 px): flache Hauptpunkte bleiben als zentrierte Icons sichtbar.
   Die alte Regel `.nav-section > .nav-item { display:none }` galt nur fürs frühere Gruppenmodell —
   für die neuen flachen Hauptpunkte (.nav-flat) zeigen wir die Icons (Wartung-Untereinträge bleiben
   verborgen, die Gruppe wird durch ihr Icon repräsentiert). Tooltips liefert das native title-Attribut. */
@media (min-width: 1024px) {
  .sidebar.is-collapsed .nav-section.nav-flat { margin: 0; }
  .sidebar.is-collapsed .nav-section.nav-flat > .nav-item {
    display: flex; width: 48px; height: 44px; min-height: 44px;
    padding: 0; gap: 0; justify-content: center; margin: 2px auto; border-radius: var(--radius-lg);
  }
  .sidebar.is-collapsed .nav-section.nav-flat > .nav-item .nav-text { display: none; }
  .sidebar.is-collapsed .nav-section.nav-flat > .nav-item.active::before {
    content: ''; position: absolute; top: 7px; right: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--sb-accent);
  }
  .sidebar.is-collapsed .nav-start-divider { width: 36px; margin: 5px auto; }
}

/* ───────────────────────────────────────────────────────────────────────────────────
   20. NAVIGATIONS-NEUAUFBAU v2 — gepinnte Gruppen, einklappbare Themengruppen, Aktiv-Balken
   Sortierung nach Häufigkeit (NAV_GROUPS/NAV_ITEMS in app.js). Pinned = immer offen + Punkt-
   Marker; übrige Gruppen einklappbar. Icons einheitlich 18 px / stroke 1.7 (Lucide-Stil).
   ─────────────────────────────────────────────────────────────────────────────────── */

/* Einheitliche Icon-Größe für die neue Navigation (Lucide-Stil, viewBox 24). */
#vi-nav .nav-icon { width: 18px; height: 18px; }
.sidebar.is-collapsed .nav-gl-dot { display: none; }

/* Aktiver Eintrag: getönter Hintergrund (vorhanden) + farbiger Links-Balken; rechter Punkt entfällt. */
.sidebar .nav-item.active { box-shadow: inset 3px 0 0 0 var(--sb-accent); }
.sidebar .nav-section .nav-item.active::after { display: none; }
.sidebar.is-collapsed .nav-item.active { box-shadow: none; }   /* im Icon-Modus reicht die Tönung */

/* Geplante Punkte sind nie interaktiv (überstimmt die generische pointer-events:auto-Regel offener Sektionen). */
.sidebar .nav-section .nav-item.nav-item-disabled, .nav-fly-item.is-planned { pointer-events: none; }
#vi-nav .nav-item-disabled { padding-right: 6px; }
#vi-nav .nav-item-disabled .nav-text { min-width: 0; }

/* Einklappbare Gruppen ohne Verbindungs-Rail + moderater Einzug → volle Breite für lange Labels
   (kein „Schlüssel & Transp…"). Die Gruppenzugehörigkeit zeigt das Gruppen-Icon im Label. */
#vi-nav .nav-section:not(.nav-flat) .nav-item { padding-left: 12px; gap: 8px; }
#vi-nav .nav-section:not(.nav-flat) .nav-item::before { display: none; }

/* ───────────────────────────────────────────────────────────────────────────────────
   21. MODERNER DIALOG  (.vi-dlg — Modifier auf dem .modal-overlay)
   Ersetzt die alte beige/graue Pop-up-Optik (.modal-content lief auf --bg-secondary
   = gray-100) durch eine weiße Dialogfläche nach Victor CI. BEWUSST als Modifier:
   die globalen .modal-*-Klassen bleiben unangetastet (Überschreiben zerlegt sonst
   alle Bestands-Pop-ups, siehe CLAUDE.md · UI-Regeln).
   Aufbau: Kopf fix · Inhalt scrollt · Fußzeile fix (Kopf/Buttons scrollen nie weg).
   Anwendung: <div class="modal-overlay vi-dlg"> … Standard-Markup wie gehabt.
   ─────────────────────────────────────────────────────────────────────────────────── */
.vi-dlg { background: rgba(26, 32, 28, 0.45); padding: var(--space-4); }

.vi-dlg .modal-content {
  background: var(--color-surface);
  border: 1px solid var(--vi-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  width: min(680px, 94vw);
  max-width: none;
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;                       /* Scrollen übernimmt der Body */
}
.vi-dlg .modal-content.vi-dlg--wide { width: min(920px, 96vw); }
/* Schmale Fassung für kurze Entscheidungen (z. B. Typauswahl beim Zeilen-„+"). */
.vi-dlg .modal-content.vi-dlg--narrow { width: min(440px, 94vw); }

/* Kopf — bleibt beim Scrollen stehen */
.vi-dlg .modal-header {
  flex: 0 0 auto;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--vi-border);
  background: var(--color-surface);
}
.vi-dlg .modal-header h2,
.vi-dlg .modal-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--vi-ink);
}
.vi-dlg .modal-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: none; background: transparent; border-radius: var(--radius-md);
  font-size: var(--text-base); line-height: 1; color: var(--vi-muted);
  cursor: pointer; transition: background var(--transition), color var(--transition);
}
.vi-dlg .modal-close:hover { background: var(--gray-100); color: var(--vi-ink); }
.vi-dlg .modal-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Inhalt — einziger Scrollbereich */
.vi-dlg .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-5);
  display: block;                          /* kein flex-gap: .form-group bringt Abstand mit */
}

/* Fußzeile — bleibt beim Scrollen stehen */
.vi-dlg .modal-footer {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--vi-border);
  background: var(--color-surface);
}
.vi-dlg .modal-footer .vi-dlg-spacer { margin-right: auto; }

/* Formularfelder — ruhige, moderne Beschriftung statt Versalien/Sperrsatz */
.vi-dlg .form-group { margin-bottom: var(--space-4); }
.vi-dlg .form-group:last-child { margin-bottom: 0; }
.vi-dlg .form-label {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  letter-spacing: 0;
  text-transform: none;
  color: var(--vi-ink);
}
.vi-dlg .form-hint-inline {
  font-weight: var(--fw-normal);
  font-size: var(--text-xs);
  text-transform: none;
  letter-spacing: 0;
  color: var(--vi-muted);
}
.vi-dlg .form-hint {
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
  color: var(--gray-700);
  background: var(--gray-100);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
}
.vi-dlg .form-input,
.vi-dlg .form-select,
.vi-dlg textarea.form-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  min-height: 40px;
  border: 1px solid var(--vi-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--vi-ink);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.vi-dlg textarea.form-input { min-height: 76px; resize: vertical; }
.vi-dlg .form-input::placeholder { color: var(--vi-muted); }
.vi-dlg .form-input:hover:not(:disabled),
.vi-dlg .form-select:hover:not(:disabled) { border-color: var(--gray-500); }
.vi-dlg .form-input:focus,
.vi-dlg .form-select:focus {
  outline: none;
  border-color: var(--color-sage);
  box-shadow: var(--focus-ring);
}
.vi-dlg .form-input:disabled,
.vi-dlg .form-select:disabled {
  background: var(--gray-100);
  color: var(--gray-700);
  cursor: not-allowed;
}
.vi-dlg .form-row { gap: var(--space-4); }
/* Buttons im Dialogfuß — einheitliche Höhe/Radien (Farben bleiben aus dem Bestand) */
.vi-dlg .modal-footer .btn-primary,
.vi-dlg .modal-footer .btn-secondary,
.vi-dlg .modal-footer .btn-ghost {
  min-height: var(--control-h-lg);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
}
.vi-dlg .modal-footer .btn-primary:focus-visible,
.vi-dlg .modal-footer .btn-secondary:focus-visible,
.vi-dlg .modal-footer .btn-ghost:focus-visible { outline: none; box-shadow: var(--focus-ring); }

@media (max-width: 640px) {
  .vi-dlg { padding: 0; align-items: flex-end; }
  .vi-dlg .modal-content { width: 100%; max-height: 94vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .vi-dlg .form-row { grid-template-columns: 1fr; }
}

/* ───────────────────────────────────────────────────────────────────────────────────
   22. ERLÄUTERUNG  (.vi-hint — kleines Info-Icon + Sprechblase)
   Fachliche Erläuterungen stehen NICHT mehr als Textblock zwischen den Eingabefeldern
   (das zerreißt die Maske und schiebt Felder nach unten), sondern hinter einem dezenten
   Info-Icon neben der Überschrift bzw. dem Label. Deckt sich mit der Regel aus CLAUDE.md:
   Erklärungen gehören in Tooltips, nicht als Fließtext in die Oberfläche.
   Öffnet per Hover, Tastaturfokus und Klick (Touch); schließt per Escape/Klick daneben.
   Anwendung: window._viHintHtml('…Text…')  →  fertiges Markup.
   ─────────────────────────────────────────────────────────────────────────────────── */
.vi-hint { display: inline-flex; flex: 0 0 auto; vertical-align: middle; }

.vi-hint__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  border: none; background: transparent; border-radius: var(--vi-r-pill);
  color: var(--vi-muted); cursor: help;
  transition: color var(--transition), background var(--transition);
}
.vi-hint__btn svg { width: 15px; height: 15px; display: block; }
.vi-hint__btn:hover,
.vi-hint__btn[aria-expanded="true"] { color: var(--color-sage); background: var(--color-sage-soft); }
.vi-hint__btn:focus-visible { outline: none; color: var(--color-sage); box-shadow: var(--focus-ring); }

/* Die Sprechblase hängt am <body>, nicht am Icon: position:fixed + sehr hoher z-index.
   Nur so kann sie NIE von einem Vorfahren mit overflow:hidden/auto abgeschnitten werden
   (scrollender Dialogkörper, Kartenrahmen, Tabellen-Wrapper …). Die Koordinaten setzt
   _viHintShow(); über --vi-hint-arrow-x bleibt die Spitze am Icon. */
.vi-hint-pop {
  position: fixed; top: 0; left: 0; z-index: 10000;
  width: max-content; max-width: min(340px, calc(100vw - 32px));
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--vi-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
  font-weight: var(--fw-normal);
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  color: var(--gray-700);
  white-space: normal;
  pointer-events: none;                 /* die Blase soll nie einen Klick abfangen */
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}
.vi-hint-pop.is-open { opacity: 1; visibility: visible; }
/* Messzustand: unsichtbar, aber mit echten Maßen — verhindert Aufblitzen beim Positionieren */
.vi-hint-pop.is-measuring { opacity: 0; visibility: hidden; transition: none; }

.vi-hint-pop__arrow {
  position: absolute; top: -5px; left: var(--vi-hint-arrow-x, var(--space-4));
  width: 8px; height: 8px; margin-left: -4px; rotate: 45deg;
  background: var(--color-surface);
  border-left: 1px solid var(--vi-border); border-top: 1px solid var(--vi-border);
}
/* Klappt die Blase nach oben, zeigt die Spitze nach unten */
.vi-hint-pop.is-above .vi-hint-pop__arrow {
  top: auto; bottom: -5px;
  border-left: none; border-top: none;
  border-right: 1px solid var(--vi-border); border-bottom: 1px solid var(--vi-border);
}

.vi-dlg-titlewrap { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }

@media (max-width: 640px) {
  .vi-hint-pop { max-width: min(300px, calc(100vw - 24px)); }
}

/* ───────────────────────────────────────────────────────────────────────────────────
   23. OBJEKTAKTE — Faktenzeile + Beteiligte  (01.08.2026)
   „Übersicht" und „Stammdaten" sind EIN Tab: oben die nicht bearbeitbaren Fakten,
   darunter direkt das Formular. Die Beteiligtenliste ist von einer Tabelle auf Karten
   umgestellt (Name/Rolle/Kontakt auf einen Blick, Gruppierung nach Rollenart).
   ─────────────────────────────────────────────────────────────────────────────────── */

/* ── EIN BLATT statt vieler Kästen ─────────────────────────────────────────────
   Im Objekt-Detail stapelten sich acht gerahmte Flächen ineinander: Detailfläche →
   Icon-Rahmen → Kopf-Linie → acht Kennzahl-Kästchen → Tab-Linie → Sektionsrahmen →
   Sektions-Linie → gestrichelter Leerzustand — in drei verschiedenen Randtönen.
   Jetzt trägt EINE Fläche den ganzen Inhalt. Getrennt wird über Abstand und Typografie;
   als einzige Linie bleibt der Unterstrich der Tab-Leiste (Ink-Underline, Design-System).
   Gilt bewusst nur im Objekt-Detail — die Bestandsklassen bleiben anderswo unangetastet. */
#obj-detail .obj-detail-icon { border: none; background: var(--color-sage-soft); color: var(--color-forest); }

/* Kennzahlen: Zahl + Beschriftung, kein Kästchen drumherum */
#obj-detail .obj-kpi-grid {
  margin-top: var(--space-4);
  gap: var(--space-3) var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
#obj-detail .obj-kpi { background: transparent; border: none; border-radius: 0; padding: 0; }

/* Sektion und Formular liegen bereits auf der Detailfläche — kein zweiter Rahmen */
#obj-detail .workspace-section,
#obj-detail .workspace-form-card {
  border: none; border-radius: 0; box-shadow: none; background: transparent; padding: 0;
}
#obj-detail .tab-section-header {
  border-bottom: none; padding-bottom: 0; margin-bottom: var(--space-4);
}

/* ── Faktenzeile über dem Stammdaten-Formular ── */
.nd-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-6);
  margin-bottom: var(--space-5);
  /* bewusst ohne Fläche und Rahmen — reine Textzeile auf dem Blatt */
}
.nd-meta__item { display: inline-flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.nd-meta__k {
  font-size: var(--text-xs); color: var(--vi-muted);
  text-transform: uppercase; letter-spacing: .06em;
}
.nd-meta__v { font-size: var(--text-sm); color: var(--vi-ink); min-width: 0; }
.nd-meta__id { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ── Objektbetreuer: FAKT in der Kopfzeile, kein eigener Kasten ──
   Rahmen im Rahmen wirkt unruhig; die Erklärung dazu steckt im Info-Icon der Überschrift. */
.ocx-sup::before { content: '·'; margin: 0 var(--space-2); color: var(--vi-muted); }   /* Trennung typografisch, keine Linie */
.ocx-sup__k { color: var(--vi-muted); }
.ocx-sup__v { font-weight: var(--fw-semibold); color: var(--vi-ink); }
.ocx-sup__v--none { font-weight: var(--fw-normal); color: var(--vi-muted); }

/* ── Rollengruppen ── */
.ocx-group { margin-bottom: var(--space-5); }
.ocx-group:last-child { margin-bottom: 0; }
.ocx-group__head {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: .06em; color: var(--vi-muted);
}
.ocx-group__n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--gray-100); color: var(--gray-700);
  border-radius: var(--vi-r-pill);
  font-size: var(--text-xs); font-weight: var(--fw-medium); letter-spacing: 0;
}

/* ── Beteiligte als ruhige Zeilen (keine Kartenstapel) ──
   Trennung über eine Haarlinie zwischen den Zeilen, nicht über acht einzelne Rahmen. */
.ocx-list { display: flex; flex-direction: column; }
.ocx-card {
  display: grid;
  grid-template-columns: 32px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr) auto;
  align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--vi-border);
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.ocx-card:last-child { border-bottom: none; }
.ocx-card:hover { background: var(--gray-100); }
.ocx-card--inherited { opacity: .82; }

.ocx-card__avatar {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--vi-r-pill);
  background: var(--color-sage-soft); color: var(--color-forest);
  font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: .02em;
}
.ocx-card--inherited .ocx-card__avatar { background: var(--gray-100); color: var(--vi-muted); }

.ocx-card__main { min-width: 0; }
.ocx-card__name {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--vi-ink);
}
.ocx-card__sub {
  margin-top: 1px; font-size: var(--text-xs); color: var(--vi-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ocx-role {
  display: inline-block; padding: 2px var(--space-2);
  background: var(--color-sage-soft); color: var(--color-sage-hover);
  border-radius: var(--vi-r-pill);
  font-size: var(--text-xs); font-weight: var(--fw-medium); white-space: nowrap;
}
.ocx-role--free { background: var(--color-gold-soft); color: var(--color-gold-ink); }

.ocx-card__contact { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: var(--text-xs); }
.ocx-card__contact a { color: var(--color-sage); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ocx-card__contact a:hover { text-decoration: underline; }
.ocx-card__contact span { color: var(--vi-muted); }

.ocx-badge {
  display: inline-block; padding: 1px var(--space-2);
  border-radius: var(--vi-r-pill);
  font-size: var(--text-xs); font-weight: var(--fw-medium); white-space: nowrap;
}
.ocx-badge--primary  { background: var(--color-forest); color: var(--text-inverse); }
.ocx-badge--inherit  { background: var(--gray-100); color: var(--gray-700); border: 1px solid var(--vi-border); }
.ocx-badge--override { background: var(--color-warning-soft); color: var(--color-warning-ink); }

.ocx-card__act { display: flex; gap: var(--space-2); justify-content: flex-end; }

/* ── Leerzustand: ohne Rahmen, ohne Fläche — nur Text und Aktion ── */
.ocx-empty { padding: var(--space-7) var(--space-5); text-align: center; }
.ocx-empty__t { font-size: var(--text-sm); color: var(--vi-muted); }
.ocx-empty__a { margin-top: var(--space-4); }

@media (max-width: 900px) {
  .ocx-card { grid-template-columns: 32px minmax(0, 1fr) auto; row-gap: var(--space-2); }
  .ocx-card__contact { grid-column: 2 / -1; }
  .ocx-card__act { grid-column: 2 / -1; justify-content: flex-start; }
}

/* Ansprechpartner-Schalter im Kontaktdialog */
.oc-cp-toggle { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--vi-ink); cursor: pointer; }

/* Zähler-Badge am Tab (z. B. offene Datenqualitäts-Hinweise) — ersetzt das frühere Banner. */
#obj-detail .obj-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: var(--space-2);
  background: var(--color-warning-soft); color: var(--color-warning-ink);
  border-radius: var(--vi-r-pill);
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
#obj-detail .obj-tab-btn.active .obj-tab-badge { background: var(--color-warning); color: var(--color-surface); }

/* Optionaler Detailblock am Raum (Bodenbelag …) — leichte Abtrennung ohne eigenen Rahmen. */
.nd-details { margin-top: var(--space-5); }
.nd-details__head {
  margin-bottom: var(--space-3);
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: .06em; color: var(--vi-muted);
}

/* ── Vorgang anlegen: kompakte Maske (01.08.2026) ──
   Vorher lagen 10 Felder untereinander → langes Scrollen. Jetzt zweispaltig, Optionales
   eingeklappt. Namensraum cn-* wie im Modul. */
#case-edit-modal .modal-content { width: min(920px, 96vw); }
.cn-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
.cn-hint { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--vi-muted); }
.cn-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }

.cn-more { margin-top: var(--space-2); border-top: 1px solid var(--vi-border); padding-top: var(--space-3); }
.cn-more__sum {
  cursor: pointer; list-style: none;
  font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--color-sage);
  display: flex; align-items: center; gap: var(--space-2);
}
.cn-more__sum::-webkit-details-marker { display: none; }
.cn-more__sum::before {
  content: ''; width: 0; height: 0;
  border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform var(--transition);
}
.cn-more[open] .cn-more__sum::before { transform: rotate(90deg); }
.cn-more__body { margin-top: var(--space-4); }

@media (max-width: 720px) {
  .cn-grid2 { grid-template-columns: 1fr; }
}
/* Kompakter Feldabstand nur in dieser Maske — sie hat viele Felder. */
#case-edit-modal .form-group { margin-bottom: var(--space-3); }

/* ── Klassifikations-Vorschläge: sichtbare Bestätigung beim Klick ──
   Vorher änderte sich der Chip nach dem Anklicken nicht (das gefüllte Grün war nur Hover),
   die Übernahme passierte unbemerkt im Feld darunter → mehrfaches Klicken. */
.cn-sug-chip { transition: background var(--transition), color var(--transition), opacity var(--transition); }
.cn-sug-chip.is-picked {
  background: var(--color-forest); color: var(--text-inverse);
  border-color: var(--color-forest); font-weight: var(--fw-medium);
}
.cn-sug-chip.is-picked::before { content: '✓'; margin-right: var(--space-2); font-weight: var(--fw-bold); }
.cn-sug-chip.is-picked:hover { background: var(--color-forest-hover); }
.cn-sug-chip.is-dimmed { opacity: .45; }
.cn-sug-chip.is-dimmed:hover { opacity: 1; }

/* Kurzes Aufblitzen des Zielfelds — zeigt, WOHIN der Wert übernommen wurde. */
@keyframes vi-flash {
  0%   { box-shadow: 0 0 0 0 var(--color-mint); }
  25%  { box-shadow: 0 0 0 4px var(--color-mint-soft); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}
.vi-flash { animation: vi-flash 900ms ease-out; border-radius: var(--radius-md); }
@media (prefers-reduced-motion: reduce) { .vi-flash { animation: none; } }

/* ── Objektzentrierter Anlegen-/Bearbeiten-Dialog (20.08.2026) ─────────────────
   Das Objekt steht ZUERST und trägt die abgeleitete Zuordnung als EINE ruhige Zeile.
   Das frühere zweite Pflichtfeld „Zuordnung / Wirtschaftseinheit wählen…" ist entfallen —
   es fragte denselben Objektbezug ein zweites Mal ab und konnte ihm dabei widersprechen.
   Eine Auswahl erscheint nur, wenn über dem gewählten Bereich keine Wirtschaftseinheit
   liegt — und dann ausschließlich aus dem gewählten Bereich (`subtreeRootId`). */
.cn-obj { margin-bottom: var(--space-4); }
.cn-obj-meta {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-xs); line-height: var(--lh-snug); color: var(--vi-muted);
}
.cn-obj-meta__ok   { color: var(--color-forest); font-weight: var(--fw-bold); }
.cn-obj-meta__k    { color: var(--vi-muted); }
.cn-obj-meta__v    { color: var(--vi-ink); font-weight: var(--fw-medium); }
.cn-obj-meta__sep  { color: var(--gray-300); }
.cn-obj-meta__todo { color: var(--vi-muted); }
.cn-obj-meta__warn { color: #9a6a00; }
.cn-we-fb { margin-top: var(--space-3); }
.form-label--sub {
  font-size: var(--text-xs); font-weight: var(--fw-medium);
  text-transform: none; letter-spacing: 0; color: var(--vi-muted);
}
/* Alles nach dem Objektfeld hängt am Objektbezug. Ohne Objekt tritt der Block zurück
   (und „Vorgang anlegen" ist gesperrt) — eingeben darf man trotzdem, nur speichern nicht. */
.cn-dep { transition: opacity var(--transition); }
.cn-dep.is-locked { opacity: .5; }
#case-edit-modal .modal-footer .btn-primary[disabled],
#case-edit-dialog .modal-footer .btn-primary[disabled] { opacity: .55; cursor: not-allowed; }

/* Bauteil im Vorgang: Auswahl + „neu anlegen" nebeneinander, Formular klappt darunter auf. */
.cn-comp-row { display: flex; gap: var(--space-2); align-items: center; }
.cn-comp-row .form-select { flex: 1; min-width: 0; }
.cn-comp-add { flex: 0 0 auto; width: 34px; padding: 0; font-size: var(--text-base); line-height: 1; }
.cn-comp-new {
  margin-top: var(--space-3); padding: var(--space-3) var(--space-4);
  background: var(--gray-100); border-radius: var(--radius-md);
}
.cn-comp-new__head { margin-bottom: var(--space-3); font-size: var(--text-sm); color: var(--vi-ink); }
.cn-comp-new__act { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
/* Vorschlagskasten sitzt direkt unter dem Betreff und setzt sich von den Feldern darunter ab. */
#case-edit-modal .cn-suggest { margin: 0 0 var(--space-4); }
/* „Bauteilart nicht dabei?" — dezenter Zweitweg unter der Auswahl. */
.cn-comp-catnew-link { display: inline-block; margin-top: var(--space-2); font-size: var(--text-xs); }
.cn-comp-catnew { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--vi-border); }
.case-hero-path__seg.is-leaf { color: var(--vi-ink); font-weight: var(--fw-semibold); cursor: default; }
.case-hero-path__seg.is-leaf:hover { color: var(--vi-ink); text-decoration: none; }

/* ── Vorgang · Übersicht (Neuaufbau 01.08.2026) ── */
/* Schnellaktionen: was man vom Einstiegsbild aus direkt tun kann. */
.cov-quick { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0; }
.cov-quick__btn {
  min-height: 34px; padding: var(--space-2) var(--space-4);
  border: 1px solid var(--vi-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--vi-ink);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--fw-medium);
  cursor: pointer; transition: border-color var(--transition), background var(--transition);
}
.cov-quick__btn:hover { border-color: var(--color-sage); background: var(--color-sage-soft); color: var(--color-forest); }
.cov-quick__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* „Zuletzt passiert" — vier gleichrangige Listen. */
.cov-act { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-5); }
@media (max-width: 900px) { .cov-act { grid-template-columns: 1fr; } }
/* ── Persönliche Tableiste im Vorgang (01.08.2026) ──
   Im „Mehr"-Menü lässt sich jeder Bereich in die Leiste holen (+) oder daraus entfernen (−). */
.pd-more-item { position: relative; }
.pd-more-pin {
  flex: 0 0 auto; width: 22px; height: 22px; margin-left: var(--space-2);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--vi-border); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--vi-muted);
  font-size: var(--text-sm); line-height: 1; cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.pd-more-pin:hover { border-color: var(--color-sage); color: var(--color-forest); background: var(--color-sage-soft); }
.pd-more-pin:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pd-more-sec {
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: .06em; color: var(--vi-muted);
}
.pd-more-inbar { margin-top: var(--space-2); border-top: 1px solid var(--vi-border); padding-top: var(--space-1); }
.pd-more-item-static { display: flex; align-items: center; justify-content: space-between; cursor: default; }

/* ── Vorgangsliste: Objektzelle mit Pfad im Hover (01.08.2026, überarbeitet 16.08.2026) ──
   Sichtbar bleiben WE und – falls abweichend – Objekt › Ort. Der vollständige Pfad
   erscheint beim Überfahren, damit die Zeile schmal bleibt.

   Die frühere `.cases-obj-full` (eine `position:absolute`-Box IN der Zelle) ist
   ersatzlos entfallen: sie lag im Zuschneidebereich des Tabellen-Scrollcontainers
   und war unten abgeschnitten. Die Vorschau kommt jetzt aus der zentralen
   Overlay-Ebene (`vi-overlay.js`, Layer an <body>) — dort kann sie kein Container
   mehr beschneiden. KEINE eigene Hoverbox mehr in Modul-CSS bauen. */
.cases-obj-cell { min-width: 0; }
.cases-obj-sep { color: var(--gray-300); }


/* ════════════════════════════════════════════════════════════════════════════
   24. AUSWAHL-/MENUEZEILEN SIND KEINE KNOEPFE  (24.08.2026)
   ────────────────────────────────────────────────────────────────────────────
   In ViCore sind Menue- und Auswahlzeilen aus gutem Grund <button>: sie sind
   per Tastatur bedienbar und melden sich der Barrierefreiheit korrekt. Damit
   erben sie aber die Grundregel `button, .btn { white-space: nowrap }` aus
   design-system.css — gedacht fuer echte Knoepfe ("Speichern" soll nie
   umbrechen), fuer eine Zeile mit Objektnamen oder Erklaertext aber falsch.

   Fehlerbild bis 24.08.2026: der Text lief aus dem Menue heraus, sichtbar blieb
   nur der Anfang bzw. der Pfeil, und das Menue bekam einen waagerechten
   Scrollbalken (gemeldet an "+ Unterelement" in der Objektstruktur, dieselbe
   Abweichung steckte in sechs weiteren gemeinsamen Komponenten).

   Deshalb steht die Ausnahme EINMAL hier — nicht als Einzelpflaster je Modul.
   Wer eine neue Auswahlzeile baut, nimmt eine dieser Klassen oder ergaenzt sie
   hier; ein `white-space` im Modul-CSS ist nicht noetig.
   ════════════════════════════════════════════════════════════════════════════ */
.case-more-item,
.pd-more-item,
.meta-menu-option,
.cases-cdrop-opt,
.anl-opt,
.obj-ctx-item,
.viss-opt,
.nd-typechoice-item,
.vi-menu-item,
.vi-obj-picker-item {
  white-space: normal;
  overflow-wrap: anywhere;
}
/* Die inneren Textzeilen duerfen ebenfalls umbrechen und muessen schrumpfen
   koennen (min-width:0), sonst haelt ein Flex-/Grid-Kind die Zeile auf. */
.case-more-item-text,
.case-more-item-title,
.case-more-item-hint,
.pd-more-left,
.pd-more-lbl,
.meta-menu-label { min-width: 0; white-space: normal; overflow-wrap: anywhere; }


/* ── UX-Phase 5 §6/§14: Vorgangskopf ──────────────────────────────────────────
   Der Kopf ist der gemeinsame EntityHeader. Hier bleibt nur, was der Vorgang
   fachlich mitbringt: die inline änderbaren Meta-Chips als eigene Zeile und der
   EINE Objektkontext (früher Chip in der Metazeile PLUS Pfadzeile darunter). */
.case-metachips { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.case-obj-ctx {
  border: 0; background: none; padding: 0; margin: 0; font: inherit;
  color: inherit; cursor: pointer; text-align: left; min-width: 0;
}
.case-obj-ctx:hover .vi-objlabel { text-decoration: underline; }
.case-obj-more {
  margin-left: var(--space-1); padding: 0 var(--space-1);
  border-radius: var(--radius-sm); background: var(--gray-100);
  color: var(--gray-600); font-size: var(--text-xs);
}

/* Unterlisten in Detailseiten (UX-Phase 5 §7): EINE schmale Leiste über der
   Tabelle statt eines zweiten Abschnittskopfes mit h2 + Untertitel + Aktionen.
   Der Reiter darüber nennt den Bereich bereits; die Anzahl trägt der Listenkopf. */
.case-sublist-bar {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--space-2); margin-bottom: var(--space-2);
}
.case-sublist-bar--wide { justify-content: space-between; }
.case-sublist-n { font-size: var(--text-xs); color: var(--gray-600); min-width: 0; }
.case-sublist-acts { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }