/* ════════════════════════════════════════════════════════════════════════════════
   Modul „Anlagen & Bauteile" — Bauteil- & Pflichtenkatalog
   Nutzt ausschließlich Design-System-Tokens (design-system.css). Namespace: cmp-
   Generische Layout-Klassen sind unter .cmp-page gescoped.
   ════════════════════════════════════════════════════════════════════════════════ */

/* ── (entfallen) WORKSPACE-TAB-LEISTE #vi-ws-bar ───────────────────────────────
   Seit v7 (24.07.2026) rendert das Modul-Chrome die EINE Tab-Leiste je Modul:
   Markup #vi-module-chrome (index.html) · Styles public/module-chrome.css ·
   Verhalten public/module-chrome.js · Konfiguration public/nav-config.js.
   Hier bewusst KEINE Alt-Regeln mehr — sonst entstünden zwei Tab-Systeme. */

/* ── Seitenkopf ──────────────────────────────────────────────────────────────── */
.cmp-page { padding: var(--space-6); }
/* Trägt der Container bereits eine kanonische Seite (.vi-page), polstert der
   Arbeitsbereich schon — eine zweite Polsterung erzeugte hier gemessene 32 px
   totes Feld zwischen Ansichts-Umschalter und Seitenkopf. Der äußere `.content`
   bringt den Seitenrand mit. (UI-Welle: EIN Ort bestimmt den Seitenrand.) */
.cmp-page:has(> .vi-page) { padding: 0; }
.cmp-page .page-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap;
}
.cmp-page .page-title { font-size: var(--font-size-xl, 22px); font-weight: 600; color: var(--text-primary); margin: 0; }
.cmp-page .page-sub { color: var(--text-muted); font-size: var(--font-size-sm, 13px); margin: 4px 0 0; max-width: 60ch; }
.cmp-page .page-head-actions { display: flex; gap: var(--space-2); flex-shrink: 0; }

/* ── Kennzahlen ──────────────────────────────────────────────────────────────── */
.cmp-page .cmp-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-3); margin-bottom: var(--space-5);
}
.cmp-stat {
  background: var(--bg-secondary); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-sm);
  /* display/white-space/text-align MÜSSEN hier stehen: die Kachel wird teils als
     <div> (_compStatCard), teils als <button> gerendert. Für <button> greift sonst
     die globale Elementregel
     `button, .btn { display:inline-flex; white-space:nowrap; justify-content:center }`
     aus design-system.css:443 — Zahl und Beschriftung stehen dann NEBENEINANDER und
     laufen ohne Umbruch aus ihrer Rasterspalte (minmax(170px,1fr)) in die Nachbar-
     kachel. Das war das Fehlerbild „überlappende Kennzahlen" auf /betrieb/wartungen.
     min-width:0 erlaubt dem Grid-Element zusätzlich, schmaler als sein Inhalt zu werden. */
  display: block; white-space: normal; text-align: left; min-width: 0;
}
.cmp-stat > * { min-width: 0; overflow-wrap: anywhere; }
.cmp-stat-v { font-size: 24px; font-weight: 700; color: var(--text-primary); line-height: 1.1; }
.cmp-stat-l { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); margin-top: 4px; }
.cmp-stat-h { font-size: var(--text-xxs); color: var(--text-muted); margin-top: 2px; }
/* DQ-Warnkachel (QA-067): verwaiste Pflichten — nur wenn > 0, klickbar */
.cmp-stat-warn { background: var(--vi-warning-soft); border-color: var(--vi-warning); cursor: pointer; }
.cmp-stat-warn .cmp-stat-v { color: var(--vi-warning); }
.cmp-stat-warn:hover { box-shadow: var(--shadow-md); }
.cmp-stat-warn:focus-visible { outline: 2px solid var(--vi-warning); outline-offset: 2px; }
.cmp-dangling-table td { vertical-align: top; }

/* ── Filterleiste ────────────────────────────────────────────────────────────── */
.cmp-page .cmp-filterbar {
  display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3);
}
.cmp-page .cmp-filterbar .form-input { flex: 1 1 240px; min-width: 200px; }
.cmp-page .cmp-filterbar .form-select { flex: 0 1 200px; }
.cmp-page .cmp-filterbar .cmp-adv-toggle { flex: 0 0 auto; margin-left: auto; align-self: center; white-space: nowrap; }
/* erweiterte (Experten-)Filter — dezenter, einrückt unter der Primärleiste */
.cmp-page .cmp-filterbar-adv { margin-top: calc(-1 * var(--space-2)); padding: var(--space-2) var(--space-2) 0; border-top: 1px dashed var(--border-subtle, var(--color-slate-200)); }
.cmp-page .cmp-count { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-2); }

/* ── Tabelle ─────────────────────────────────────────────────────────────────── */
/* Breite Tabellen auf schmalen Bildschirmen horizontal scrollen statt abschneiden */
#anl-table-wrap, #fri-table-wrap, #nd-bauteile-wrap { overflow-x: auto; }
.cmp-mode { font-size: var(--text-xxs); color: var(--text-secondary); background: var(--bg-tertiary); padding: 2px 8px; border-radius: var(--radius-full); white-space: nowrap; }
.cmp-muted { color: var(--text-subtle); }

/* ── Typ-Badges (Kategorie-Tönung, KEINE Statusfarben) ───────────────────────── */
.cmp-type-badge {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-full);
  font-size: var(--text-xxs); font-weight: 600; white-space: nowrap;
  background: var(--color-slate-100); color: var(--text-secondary);
}
.cmp-type-technical_system        { background: var(--vi-info-soft, #E6EEF6); color: var(--vi-info, #245C7A); }
.cmp-type-mass_equipment          { background: var(--color-primary-100); color: var(--color-primary-700); }
.cmp-type-building_component      { background: var(--color-slate-200); color: var(--color-slate-700); }
.cmp-type-service                 { background: var(--color-slate-100); color: var(--color-slate-600); }
.cmp-type-operator_obligation     { background: var(--vi-warning-soft, #F6EEDD); color: var(--color-warning-ink); }
.cmp-type-documentation_obligation{ background: var(--vi-warning-soft, #F6EEDD); color: var(--color-warning-ink); }

/* ── Chips (Relevanz / Pflicht / Sonderbau / Verwendung) ─────────────────────── */
.cmp-chip {
  display: inline-block; padding: 1px 7px; border-radius: var(--radius-full);
  font-size: var(--text-xxs); font-weight: 600; background: var(--color-slate-100); color: var(--text-secondary);
}
.cmp-chip-p   { background: var(--vi-info-soft, #E6EEF6); color: var(--vi-info, #245C7A); }
.cmp-chip-w   { background: var(--vi-warning-soft, #F6EEDD); color: var(--color-warning-ink); }
.cmp-chip-d   { background: var(--color-slate-200); color: var(--color-slate-700); }
.cmp-chip-rec { background: var(--vi-warning-soft, #F6EEDD); color: var(--color-warning-ink); }
.cmp-chip-sb  { background: var(--vi-error-soft, #F6E3E1); color: var(--color-red-700, #A23A2E); }
.cmp-chip-use { background: var(--color-primary-100); color: var(--color-primary-700); }
.cmp-chip-fm  { background: var(--color-slate-200); color: var(--color-slate-700); }

/* Dublettenverdacht / fachlicher Hinweis im Detail-Modal */
.cmp-review-note {
  background: var(--vi-warning-soft, #F6EEDD); color: var(--color-warning-ink);
  border: 1px solid var(--vi-warning, #D9A441); border-radius: var(--radius-md, 8px);
  padding: 8px 12px; font-size: var(--text-xs); margin: 4px 0 10px;
}

/* ── Detailansicht (im Modal) ────────────────────────────────────────────────── */
.cmp-detail { display: flex; flex-direction: column; gap: var(--space-3); }
.cmp-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.cmp-detail-name { font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); }
.cmp-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.cmp-detail-actions { display: flex; gap: var(--space-2); flex-shrink: 0; }
.cmp-detail-desc { color: var(--text-secondary); font-size: var(--text-sm); margin: 0; }
.cmp-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.cmp-kv-row { display: flex; gap: 8px; font-size: var(--text-xs); padding: 3px 0; border-bottom: 1px solid var(--border-light); }
.cmp-kv-k { color: var(--text-muted); min-width: 120px; flex-shrink: 0; }
.cmp-kv-v { color: var(--text-primary); }
.cmp-section-head { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-3); }
.cmp-section-head h3 { font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); margin: 0; text-transform: uppercase; letter-spacing: 0.03em; }

/* ── Pflichtenvorlagen ───────────────────────────────────────────────────────── */
.cmp-tag { font-size: var(--text-xxs); font-weight: 600; padding: 1px 7px; border-radius: var(--radius-full); background: var(--bg-secondary); border: 1px solid var(--border-light); color: var(--text-secondary); }

/* ── Verwendung ──────────────────────────────────────────────────────────────── */
.cmp-usage { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cmp-usage li { font-size: var(--text-xs); color: var(--text-primary); padding: 4px 0; border-bottom: 1px solid var(--border-light); }

/* ── Formular-Layouts ────────────────────────────────────────────────────────── */
.cmp-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.cmp-3col { display: grid; grid-template-columns: 1.4fr 0.8fr 1fr; gap: var(--space-3); }
.cmp-checks { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-sm); color: var(--text-secondary); }
.cmp-checks label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

/* ── Import ──────────────────────────────────────────────────────────────────── */
.cmp-imp-summary { background: var(--bg-tertiary); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: var(--space-3); font-size: var(--text-sm); margin-top: var(--space-2); }
.cmp-imp-ok { background: var(--color-primary-50); border-color: var(--color-primary-200); }
.cmp-imp-warn { font-size: var(--text-xxs); color: var(--text-muted); margin: var(--space-2) 0 0; padding-left: 18px; max-height: 160px; overflow: auto; }
.cmp-imp-warn li { margin: 2px 0; }

/* ── Phase 2/3: Objekt-Tab, Add-Flow, Zuordnungs-Detail, Fristen ─────────────── */
.cmp-due-ok { font-variant-numeric: tabular-nums; color: var(--text-secondary); font-size: var(--text-xs); }

/* Objekt-Tab */
.cmp-nd-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
.cmp-nd-title { font-size: var(--text-md); font-weight: 600; color: var(--text-primary); }
.cmp-nd-group { margin-bottom: var(--space-4); }
.cmp-nd-group-h { font-size: var(--text-xs); font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border-light); }
.cmp-nd-table td.num, .cmp-nd-table th.num { text-align: right; }

/* Geführter Add-Flow */
.cmp-add-sub { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-2); }
.cmp-pick-list { max-height: 240px; overflow: auto; border: 1px solid var(--border-light); border-radius: var(--radius-md); margin-top: var(--space-2); }
.cmp-pick { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; border-bottom: 1px solid var(--border-light); font-size: var(--text-sm); }
.cmp-pick:last-child { border-bottom: 0; }
.cmp-pick:hover { background: var(--bg-tertiary); }
.cmp-pick.is-sel { background: var(--color-primary-50); }
.cmp-pick-name { font-weight: 600; color: var(--text-primary); flex-shrink: 0; }
.cmp-add-selected { background: var(--bg-tertiary); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: var(--space-3); margin: var(--space-3) 0; }
.cmp-add-selname { font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cmp-add-hint { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 6px; }
.cmp-add-obls { display: flex; flex-direction: column; gap: var(--space-2); max-height: 260px; overflow: auto; }
/* Pflichtzeile: Kopf (Auswahl + Name) und darunter die individuell einstellbare Frist */
.cmp-add-obl { border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 8px 10px; background: var(--bg-secondary); }
.cmp-add-obl-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--text-xs); color: var(--text-primary); cursor: pointer; }
.cmp-add-obl-n { font-weight: 600; }
.cmp-add-obl-f { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0 0 24px; }
.cmp-add-obl-l { font-size: var(--text-xs); color: var(--text-muted); }
.cmp-add-obl-f .cmp-add-iv { flex: 0 0 64px; }
.cmp-add-obl-f .cmp-add-unit { flex: 0 0 auto; width: auto; }
.cmp-add-obl-f .cmp-add-due { flex: 0 1 150px; }
.cmp-add-obl.is-off { opacity: 0.55; }

/* Geführter Assistent „+ Anlage anlegen" (Bestand-Seite) */
.anlw-steps {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3);
  list-style: none; margin: 0 0 var(--space-4); padding: 0 0 var(--space-3);
  border-bottom: 1px solid var(--border-light);
}
.anlw-step { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--text-muted); }
.anlw-step.is-done { cursor: pointer; color: var(--text-secondary); }
.anlw-step.is-done:hover { color: var(--text-primary); }
.anlw-step.is-cur { color: var(--text-primary); font-weight: 600; }
.anlw-step.is-cur .anlw-step-n { background: var(--color-primary-700); border-color: transparent; color: var(--text-inverse); }
.anlw-step.is-done .anlw-step-n { background: var(--color-primary-100); border-color: var(--color-primary-300); color: var(--color-primary-800); }
.anlw-panel[hidden] { display: none; }
.anlw-ctx {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  background: var(--bg-tertiary); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); padding: 8px 10px; margin-bottom: var(--space-3);
  font-size: var(--text-sm); color: var(--text-primary);
}
.anlw-ctx-l { font-size: var(--text-xxs); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); }
.anlw-sel { font-size: var(--text-sm); color: var(--text-primary); margin-top: var(--space-2); }
.anlw-hint { font-size: var(--text-xs); margin-top: var(--space-2); }
.anlw-done-h { font-size: var(--text-base); font-weight: 600; color: var(--vi-success, var(--success)); }
.anlw-done-n { font-size: var(--text-lg); font-weight: 600; color: var(--text-primary); margin-top: 2px; }
.anlw-done-facts { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sm); color: var(--text-secondary); }
.cmp-due-item { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); background: var(--bg-tertiary); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 8px 10px; }
.cmp-due-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmp-due-title { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.cmp-due-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cmp-due-rec { opacity: 0.85; border-style: dashed; }

@media (max-width: 720px) {
  .cmp-kv, .cmp-2col, .cmp-3col { grid-template-columns: 1fr; }
  .cmp-page .cmp-filterbar .form-select { flex: 1 1 100%; }
}

/* KPI-Leiste */
.wk-kpis { display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--space-3); }
.wk-kpi-grp { display: flex; flex-direction: column; gap: 5px; }
.wk-kpi-gl { font-size: var(--text-xxs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle, #94A3B8); }
.wk-kpi-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.wk-kpi { flex: 1 1 110px; min-width: 104px; padding: 9px 13px; border-radius: var(--radius-md, 8px); text-align: left;
  background: var(--bg-secondary, #fff); border: 1px solid var(--border-subtle, var(--color-slate-200)); border-left-width: 4px;
  cursor: pointer; transition: box-shadow .12s, transform .05s; font: inherit; }
.wk-kpi:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.wk-kpi:active { transform: translateY(1px); }
.wk-kpi.is-on { box-shadow: 0 0 0 2px var(--color-primary-600, #2E7D46) inset; }
.wk-kpi-v { font-size: var(--text-xl); font-weight: 700; line-height: 1.1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.wk-kpi-l { font-size: var(--text-xxs); color: var(--text-muted); margin-top: 2px; }
.wk-kpi-red    { border-left-color: var(--color-red-500, #D9534F); }
.wk-kpi-amber  { border-left-color: var(--vi-warning, #D9A441); }
.wk-kpi-blue   { border-left-color: var(--vi-info, #245C7A); }
.wk-kpi-grey   { border-left-color: var(--color-slate-400, #94A3B8); }
.wk-kpi-green  { border-left-color: var(--color-success-ink); }

/* Toolbar: Ansichtsumschaltung + Filter */
.wk-toolbar, .wk-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.wk-bar-right { display: inline-flex; flex-wrap: wrap; gap: var(--space-2, 8px); align-items: center; }
.wk-views { display: inline-flex; gap: 4px; background: var(--bg-tertiary); border-radius: var(--radius-full); padding: 3px; }
.wk-vbtn { border: 0; background: transparent; color: var(--text-secondary); font-size: var(--text-sm); font-weight: 600;
  padding: 5px 12px; border-radius: var(--radius-full); cursor: pointer; }
.wk-vbtn.is-on { background: var(--color-primary-600, #2E7D46); color: var(--color-surface); }
.wk-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.wk-filters .form-select { flex: 0 1 175px; }
.wk-adv-btn { border: 1px solid var(--border-subtle, var(--color-slate-300)); background: var(--bg-secondary, #fff);
  color: var(--text-secondary); font-size: var(--text-xs); font-weight: 600; padding: 6px 12px; border-radius: var(--radius-full); cursor: pointer; white-space: nowrap; }
.wk-adv-btn.is-on { border-color: var(--color-primary-600, #2E7D46); color: var(--color-primary-700, #1E6A3A); }
/* erweiterte (Experten-)Filter — eingeklappt, dezent abgesetzt */
.wk-adv { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: calc(-1 * var(--space-1, 4px)) 0 var(--space-3);
  padding: 10px 12px; background: var(--bg-tertiary, #F7F8FA); border: 1px solid var(--border-subtle, var(--color-slate-200)); border-radius: var(--radius-md, 8px); }
.wk-adv .form-select { flex: 0 1 180px; }
.wk-chip.is-on { background: var(--color-primary-600, #2E7D46); border-color: var(--color-primary-600, #2E7D46); color: var(--color-surface); }

/* Listen-/Bucket-Ansicht */
.wk-sec { margin-bottom: var(--space-4); }
.wk-sec-h { font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.wk-sec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-slate-400); flex-shrink: 0; }
.wk-sec-overdue .wk-sec-dot { background: var(--color-red-500, #D9534F); }
.wk-sec-today .wk-sec-dot, .wk-sec-week .wk-sec-dot { background: var(--vi-warning, #D9A441); }
.wk-sec-month .wk-sec-dot { background: var(--vi-info, #245C7A); }
.wk-sec-later .wk-sec-dot { background: var(--color-slate-400); }
.wk-sec-n { font-size: var(--text-xxs); font-weight: 700; background: var(--bg-tertiary); color: var(--text-secondary); border-radius: var(--radius-full); padding: 1px 8px; }
.wk-list { display: flex; flex-direction: column; gap: 8px; }

/* Terminkarte (vertikal, hierarchisch) */
.wk-card { display: flex; flex-direction: column; gap: 5px;
  background: var(--bg-secondary, #fff); border: 1px solid var(--border-subtle, var(--color-slate-200));
  border-left: 4px solid var(--color-slate-300); border-radius: var(--radius-md, 10px); padding: 11px 14px; cursor: pointer; transition: box-shadow .12s, border-color .12s; }
.wk-card:hover { box-shadow: 0 3px 14px rgba(0,0,0,.08); }
.wk-c-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wk-c-date { font-size: var(--text-xs); color: var(--text-secondary); font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.wk-c-rel { color: var(--text-muted); font-weight: 500; }
.wk-c-title { font-weight: 700; font-size: var(--text-md); color: var(--text-primary); line-height: 1.25; }
.wk-c-meta { font-size: var(--text-xs); color: var(--text-muted); }
.wk-c-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 1px; }
.wk-c-acts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.wk-b-overdue { background: var(--vi-error-soft, #F6E3E1); color: var(--color-red-700, #A23A2E); }
.wk-b-today   { background: #FCE7CF; color: #8A5A12; }
.wk-b-soon    { background: var(--vi-warning-soft, #F6EEDD); color: var(--color-warning-ink); }
.wk-b-month   { background: var(--vi-info-soft, #E6EEF6); color: var(--vi-info, #245C7A); }
.wk-b-rec     { background: var(--bg-tertiary, #EEF1F4); color: var(--text-muted); }
.wk-t-bez  { background: var(--color-slate-100); color: var(--text-secondary); }
.wk-t-prov { background: var(--vi-info-soft, #E6EEF6); color: var(--vi-info, #245C7A); }
.wk-t-okdoc { background: var(--color-success-soft); color: var(--color-success-ink); }

/* Status-Akzent links an der Karte */
.wk-card.wk-s-overdue { border-left-color: var(--color-red-500, #D9534F); }
.wk-card.wk-s-soon    { border-left-color: var(--vi-warning, #D9A441); }
.wk-card.wk-s-month   { border-left-color: var(--vi-info, #245C7A); }
.wk-card.wk-s-ok      { border-left-color: var(--color-success-ink); }
.wk-card.wk-s-rec     { border-left-color: var(--color-slate-400, #94A3B8); background: var(--bg-tertiary, #FAFBFC); }
.wk-card.wk-s-defect  { border-left-color: var(--color-danger-ink); }
.wk-card.wk-s-done    { border-left-color: var(--color-success-ink); }
/* PHASE1: „Durchgeführt – Abschluss offen" (Lifecycle gemeldet) — violett, eigener Zustand zwischen fällig/überfällig und abgeschlossen */
.wk-b-performed { background: #EFE7F6; color: #6B3FA0; }
.wk-card.wk-s-performed { border-left-color: #8A5CC4; }
.wk-s-performed { background: #EFE7F6; color: #6B3FA0; }
.wk-kpi-violet { border-left-color: #8A5CC4; }
.wk-yr-violet  { border-top-color: #8A5CC4; }
.wk-pc.wk-yr-violet { border-top-color: #8A5CC4; }
.wkrp-req { color: var(--danger, #C0392B); font-weight: 700; }

/* Leistungserbringer-Auswahl („Durchgeführt / Ausgeführt durch") — Typ + abhängiges Feld */
.perf-ctl { display: flex; flex-direction: column; gap: 8px; }
.perf-ctl-type { max-width: 100%; }
.perf-ctl-value { min-height: 0; }
/* „Gemeldet durch" — read-only Anzeige des erfassenden Benutzers (automatisch) */
.perf-reporter { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--radius-lg);
  background: var(--surface-subtle, #F4F2EE); border: 1px dashed var(--border-default, #D8DEE6);
  color: var(--text-secondary, #3A4441); font-weight: 600; font-size: var(--text-md); }
.perf-reporter-tag { margin-left: auto; font-size: var(--text-xxs); font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  color: var(--text-subtle, #8A8576); background: var(--surface-card, #fff); border: 1px solid var(--border-default, #E3E0D8);
  border-radius: var(--radius-pill); padding: 2px 8px; }
.wkrp-res.wkrp-ok.sel   { border-color: var(--color-success-ink); background: var(--color-success-soft); color: var(--color-success-ink); }
.wkrp-res.wkrp-def.sel  { border-color: var(--color-danger-ink); background: #F6E3E1; color: #A23A2E; }
.wkrp-res.wkrp-part.sel { border-color: #D9A441; background: var(--color-warning-soft); color: var(--color-warning-ink); }
.wkrp-res.wkrp-no.sel   { border-color: #94A3B8; background: #EEF1F4; color: #475569; }
@media (max-width: 600px) {
  .wkrp-actions .btn-primary, .wkrp-actions .btn-secondary { width: 100%; }
}
.wk-dl-row.wk-s-overdue { border-left-color: var(--color-danger-ink); }
.wk-dl-row.wk-s-performed { border-left-color: #8A5CC4; }
.wk-dl-row.wk-s-soon { border-left-color: #D9A441; }
.wk-dl-row.wk-s-month { border-left-color: var(--color-info-ink); }
.wk-dl-row.wk-s-defect { border-left-color: var(--color-danger-ink); }
.wk-dl-row.wk-s-rec, .wk-dl-row.wk-s-planned, .wk-dl-row.wk-s-incomplete, .wk-dl-row.wk-s-ok { border-left-color: #94A3B8; }
.btn-xs { font-size: var(--text-xxs); padding: 1px 7px; border-radius: var(--radius-sm); line-height: 1.5; }
/* FINAL-PROZESS PHASE D: Abschluss-Dialog Datei-Uploads */
.cmp-md-doc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 3px 0; }
.cmp-md-chk { font-weight: 400; font-size: var(--text-sm); display: inline-flex; align-items: center; gap: 6px; min-width: 150px; }
.cmp-md-file { flex: 1; min-width: 180px; font-size: var(--text-xs); padding: 4px; }

/* Typ-/Status-Chips */
.wk-tchip { display: inline-block; font-size: var(--text-xxs); font-weight: 700; padding: 1px 7px; border-radius: var(--radius-full);
  background: var(--color-slate-100); color: var(--text-secondary); }
.wk-s-overdue { background: var(--vi-error-soft, #F6E3E1); color: var(--color-red-700, #A23A2E); }
.wk-s-soon    { background: var(--vi-warning-soft, #F6EEDD); color: var(--color-warning-ink); }
.wk-s-ok      { background: var(--color-success-soft); color: var(--color-success-ink); }
.wk-s-rec     { background: var(--bg-tertiary, #EEF1F4); color: var(--text-muted); }
.wk-s-defect  { background: var(--vi-error-soft, #F6E3E1); color: var(--color-danger-ink); }
.wk-flag-nodoc { background: var(--vi-warning-soft, #F6EEDD); color: var(--color-warning-ink); }
.wk-pill.wk-s-overdue { background: var(--vi-error-soft, #F6E3E1); color: var(--color-red-700, #A23A2E); border-left-color: var(--color-red-500, #D9534F); }
.wk-pill.wk-s-soon    { background: var(--vi-warning-soft, #F6EEDD); color: var(--color-warning-ink); border-left-color: var(--vi-warning, #D9A441); }
.wk-pill.wk-s-ok      { background: var(--color-success-soft); color: var(--color-success-ink); border-left-color: var(--color-success-ink); }
.wk-pill.wk-s-rec     { background: var(--bg-tertiary, #EEF1F4); color: var(--text-muted); border-left-color: var(--color-slate-400); }
.wk-pill.wk-s-defect  { background: var(--vi-error-soft, #F6E3E1); color: var(--color-danger-ink); border-left-color: var(--color-danger-ink); }
.wk-yr-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-3); }
.wk-yr-title { font-size: 19px; font-weight: 800; color: var(--text-primary); min-width: 120px; font-variant-numeric: tabular-nums; }
.wk-yr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 1100px) { .wk-yr-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .wk-yr-grid, .wk-qr-grid { grid-template-columns: repeat(2, 1fr); } }
.wk-yr-tile { text-align: left; background: var(--bg-secondary, #fff); border: 1px solid var(--border-subtle, var(--color-slate-200));
  border-top: 3px solid var(--color-slate-300); border-radius: var(--radius-md, 10px); padding: 11px 13px; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px; min-height: 128px; transition: box-shadow .12s, transform .05s; font: inherit; }
.wk-yr-tile:hover { box-shadow: 0 3px 14px rgba(0,0,0,.09); }
.wk-yr-tile:active { transform: translateY(1px); }
.wk-yr-tile.is-sel { box-shadow: 0 0 0 2px var(--color-primary-600, #2E7D46) inset; }
.wk-yr-red    { border-top-color: var(--color-red-500, #D9534F); }
.wk-yr-orange { border-top-color: var(--vi-warning, #D9A441); }
.wk-yr-blue   { border-top-color: var(--vi-info, #245C7A); }
.wk-yr-green  { border-top-color: var(--color-success-ink); }

/* ════ E1–E3: Status-Buckets · neutrale Planungs-Kacheln · operative Übersicht ════ */
/* Badges */
.wk-b-planned    { background: var(--bg-tertiary, #EEF1F4); color: var(--text-secondary, #475569); }
.wk-b-incomplete { background: var(--bg-tertiary, #EEF1F4); color: var(--text-secondary, #475569); border: 1px dashed var(--color-slate-400, #94A3B8); }
.wk-flag-nodoc   { background: var(--vi-warning-soft, #F6EEDD); color: var(--color-warning-ink); }
/* Karten-/Pillen-Akzente (Status links) */
.wk-card.wk-s-planned    { border-left-color: var(--color-slate-300, #CBD5E1); }
.wk-card.wk-s-incomplete { border-left-color: var(--color-slate-400, #94A3B8); border-left-style: dashed; }
.wk-s-planned    { background: var(--bg-tertiary, #EEF1F4); color: var(--text-secondary, #475569); }
.wk-s-incomplete { background: var(--bg-tertiary, #EEF1F4); color: var(--text-secondary, #475569); }
/* Jahres-/Quartalskacheln: neutrale Zukunft (kein Alarm) */
.wk-yr-grey    { border-top-color: var(--color-slate-400, #94A3B8); }
.wk-yr-neutral { border-top-color: var(--border-subtle, var(--color-slate-200, #E2E8F0)); }
.wk-yr-c       { display: inline-block; padding: 0 6px; border-radius: var(--radius-full); font-size: 10px; font-weight: 700; }
/* Operative Übersicht — kompakte, dichte Arbeitsliste (CRM-/Outlook-Stil) */
.wk-kpi-zero { opacity: .5; }
.wk-ov.wk-s-overdue    { border-left-color: var(--color-red-500, #D9534F); }
.wk-ov.wk-s-soon       { border-left-color: var(--vi-warning, #D9A441); }
.wk-ov.wk-s-month      { border-left-color: var(--vi-info, #245C7A); }
.wk-ov.wk-s-planned    { border-left-color: var(--color-slate-300, #CBD5E1); }
.wk-ov.wk-s-incomplete { border-left-color: var(--color-slate-400, #94A3B8); border-left-style: dashed; }
.wk-ov.wk-s-rec        { border-left-color: var(--color-slate-400, #94A3B8); background: var(--bg-tertiary, #FAFBFC); }
.wk-ov.wk-s-defect     { border-left-color: var(--color-danger-ink); }
.wk-yr-th { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.wk-yr-mon { font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); }
.wk-yr-od { font-size: var(--text-xxs); font-weight: 800; color: var(--color-surface); background: var(--color-red-500, #D9534F); border-radius: var(--radius-full); padding: 1px 7px; white-space: nowrap; }
.wk-yr-big { font-size: 26px; font-weight: 800; color: var(--text-primary); line-height: 1; display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.wk-yr-biglbl { font-size: var(--text-xxs); font-weight: 600; color: var(--text-muted); }
.wk-yr-counts { display: flex; flex-wrap: wrap; gap: 4px; min-height: 18px; }
.wk-yr-c { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: var(--radius-full); }
.wk-yr-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; align-items: center; }
.wk-yr-rec  { font-size: var(--text-xxs); color: var(--text-muted); }
.wk-pc.is-sel { box-shadow: 0 0 0 2px var(--color-primary-600, #2E7D46) inset; }
.wk-pc.wk-yr-red { border-top-color: var(--color-red-500, #D9534F); }
.wk-pc.wk-yr-orange { border-top-color: var(--vi-warning, #D9A441); }
.wk-pc.wk-yr-grey { border-top-color: var(--color-slate-400, #94A3B8); }
.wk-pc.wk-yr-green { border-top-color: var(--color-success-ink); }
.wk-pc.wk-yr-neutral { border-top-color: var(--border-subtle, var(--color-slate-200, #E2E8F0)); }
.wk-pc-pdot.wk-s-overdue { background: var(--color-red-500, #D9534F); }
.wk-pc-pdot.wk-s-soon { background: var(--vi-warning, #D9A441); }
.wk-pc-pdot.wk-s-month { background: var(--vi-info, #245C7A); }
.wk-pc-pdot.wk-s-planned { background: var(--color-slate-300, #CBD5E1); }
.wk-pc-pdot.wk-s-incomplete { background: var(--color-slate-400, #94A3B8); }
.wk-pc-pdot.wk-s-rec { background: var(--color-slate-400, #94A3B8); }
/* Objektfilter-Hinweis */
.wk-filterhint { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--vi-info-soft, #E6EEF6);
  color: var(--vi-info, #245C7A); border-radius: var(--radius-md, 8px); padding: 7px 12px; margin-bottom: var(--space-3); font-size: var(--text-xs); }
.wk-fh-txt strong { color: var(--text-primary); font-weight: 700; }
.wk-fh-clear { border: 0; background: rgba(0,0,0,.06); color: var(--text-secondary); font-size: var(--text-xs); font-weight: 700; cursor: pointer; padding: 2px 10px; border-radius: var(--radius-full); }
.wk-fh-clear:hover { background: rgba(0,0,0,.12); }
.wko-table th.num, .wko-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Kostenbaum (Drilldown Standort › Gewerk › Anlage › Maßnahme) ── */
.wkt-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 6px; }
.wkt-qfs { display: flex; gap: 6px; flex-wrap: wrap; }
.wkt-qf { font-size: var(--text-xs); border: 1px solid var(--border-light, #E2E8F0); background: var(--bg-secondary, #fff); color: var(--text-secondary, #555); border-radius: var(--radius-full, 999px); padding: 0 var(--space-3); height: var(--control-h-sm); display: inline-flex; align-items: center; cursor: pointer; }
.wkt-qf:hover { background: var(--bg-tertiary, #F2F4F7); }
.wkt-qf.is-on { background: var(--accent-soft, #EAF1FB); border-color: var(--accent, #2F6FED); color: var(--accent, #2F6FED); font-weight: 600; }
.wkt-tools { display: flex; gap: 4px; }
.wkt-hint { font-size: var(--text-xs); color: var(--vi-warn-ink, #B5532A); background: var(--vi-warn-soft, #FBEFE7); border: 1px solid #EAD2C2; border-radius: var(--radius-sm); padding: 5px 10px; margin-bottom: 8px; }
.wkt { border: 1px solid var(--border-light, #E2E8F0); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-primary, #fff); }
.wkt-row { display: flex; align-items: center; gap: 8px; padding: 5px 12px; border-bottom: 1px solid var(--border-subtle, #EEF0F3); min-height: 33px; }
.wkt-row.wkt-clk { cursor: pointer; }
.wkt-row.wkt-clk:hover { background: var(--bg-tertiary, #F7F8FA); }
.wkt-head { background: var(--bg-secondary, #F7F8FA); font-size: var(--text-xxs); text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted, #5F6B66); font-weight: 700; position: sticky; top: 0; z-index: 1; }
.wkt-head .wkt-name { padding-left: 0; }
.wkt-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.wkt-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 40px; font-weight: 600; color: var(--text-primary, #1c2430); }
.wkt-chev { display: inline-block; width: 12px; flex: 0 0 auto; color: var(--text-muted, #888); font-size: 10px; transition: transform .12s; }
.wkt-node.is-open > .wkt-row .wkt-chev { transform: rotate(90deg); }
.wkt-node:not(.is-open) > .wkt-children { display: none; }
.wkt-tl { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted, #888); border: 1px solid var(--border-light, #E2E8F0); border-radius: var(--radius-sm); padding: 0 5px; flex: 0 0 auto; }
.wkt-sub { font-size: var(--text-xs); color: var(--text-muted, #888); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wkt-num { flex: 0 0 auto; text-align: right; font-variant-numeric: tabular-nums; font-size: var(--text-sm); }
.wkt-mt { width: 86px; color: var(--text-muted, #888); font-size: var(--text-xs); }
.wkt-net { width: 110px; font-weight: 700; color: var(--text-primary, #1c2430); }
.wkt-share { width: 52px; color: var(--text-muted, #888); font-size: var(--text-xs); }
.wkt-lvl-objnode > .wkt-row { background: var(--bg-secondary, #F7F8FA); }
.wkt-lvl-objnode > .wkt-row .wkt-nm { font-size: var(--text-sm); }
.wkt-lvl-kostenbereich > .wkt-row .wkt-nm { color: var(--text-secondary, #555); font-weight: 600; }
.wkt-leaf .wkt-nm { font-weight: 500; }
.wkt-chip { display: inline-block; font-size: 9.5px; font-weight: 700; border-radius: var(--radius-md); padding: 1px 6px; white-space: nowrap; flex: 0 0 auto; line-height: 1.55; }
.wkt-chip-warn { background: var(--vi-warn-soft, #FBEFE7); color: var(--vi-warn-ink, #B5532A); }
.wkt-chip-mut { background: var(--bg-tertiary, #EFF2F1); color: var(--text-muted, #888); }
.wkt-chip-rev { background: #F0E9FA; color: #6B43A8; }
.wkt-acts { display: none; gap: 3px; margin-left: 6px; flex: 0 0 auto; }
.wkt-row:hover .wkt-acts { display: inline-flex; }
.wkt-a { font-size: var(--text-xxs); border: 1px solid var(--border-light, #E2E8F0); background: var(--bg-primary, #fff); border-radius: var(--radius-sm); padding: 1px 7px; cursor: pointer; color: var(--text-secondary, #555); white-space: nowrap; }
.wkt-a:hover { background: var(--accent-soft, #EAF1FB); border-color: var(--accent, #2F6FED); color: var(--accent, #2F6FED); }

/* Zeitraum-Steuerung (Jahr/Quartal/Monat + netto/brutto) */
.cmp-page .wko-period { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-bottom: var(--space-3); padding: 10px 12px; background: var(--bg-secondary, #fff); border: 1px solid var(--border-light, #E2E8F0); border-radius: var(--radius-md, 8px); }
.cmp-page .wko-period-grp { display: flex; align-items: center; gap: 8px; }
.cmp-page .wko-period-lbl { font-size: var(--text-xxs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted, #5F6B66); }
.cmp-page .wko-yr { font: inherit; font-size: var(--text-sm); padding: 6px 8px; border: 1px solid var(--border-light, #D8D5CC); border-radius: var(--radius-sm); background: var(--bg-secondary, #fff); color: var(--text-primary); }
.cmp-page .wko-dash { color: var(--text-muted); }
.cmp-page .wko-seg { display: inline-flex; border: 1px solid var(--border-light, #D8D5CC); border-radius: var(--radius-md); overflow: hidden; }
.cmp-page .wko-seg button { font: inherit; font-size: var(--text-xs); padding: 0 13px; height: var(--control-h-sm); display: inline-flex; align-items: center; border: 0; border-right: 1px solid var(--border-light, #E2E8F0); background: var(--bg-secondary, #fff); color: var(--text-secondary, #555); cursor: pointer; }
.cmp-page .wko-seg button:last-child { border-right: 0; }
.cmp-page .wko-seg button.is-on { background: var(--color-primary-600, #2E7D46); color: var(--color-surface); font-weight: 600; }
/* Kreuztabelle Zeitraum × Hierarchie */
.cmp-page .wko-x-scroll { overflow-x: auto; border: 1px solid var(--border-light, #E2E8F0); border-radius: var(--radius-md, 8px); }
.cmp-page table.wko-x { min-width: 100%; border-collapse: collapse; white-space: nowrap; }
.cmp-page table.wko-x th, .cmp-page table.wko-x td { padding: 6px 10px; border-bottom: 1px solid var(--border-subtle, #EEF0EA); }
.cmp-page table.wko-x thead th { position: sticky; top: 0; background: var(--gray-100); font-size: var(--text-xxs); text-transform: none; letter-spacing: normal; color: var(--text-muted); text-align: right; z-index: 2; }
.cmp-page table.wko-x td.num, .cmp-page table.wko-x th.num { text-align: right; font-variant-numeric: tabular-nums; }
.cmp-page table.wko-x .wko-x-name { position: sticky; left: 0; background: var(--bg-secondary, #fff); text-align: left; min-width: 240px; z-index: 1; }
.cmp-page table.wko-x thead th.wko-x-name { z-index: 3; }
.cmp-page table.wko-x .wko-x-sum { font-weight: 700; border-left: 2px solid var(--border-light, #E2E8F0); }
.cmp-page table.wko-x .wko-x-tl { font-size: 8px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); border: 1px solid var(--border-light, #E2E8F0); border-radius: var(--radius-sm); padding: 0 4px; margin-left: 6px; }
.cmp-page table.wko-x tr.wko-x-lvl0 td { background: #EAF1EA; font-weight: 700; }
.cmp-page table.wko-x tr.wko-x-lvl1 td { background: #F2F6F1; font-weight: 600; }
.cmp-page table.wko-x tr.wko-x-lvl2 td { background: #FAFBF8; }
.cmp-page table.wko-x tfoot th { position: sticky; bottom: 0; background: var(--gray-100); text-align: right; font-weight: 800; border-top: 2px solid var(--vi-success, #147352); z-index: 2; }
.cmp-page table.wko-x tfoot th.wko-x-name { text-align: left; z-index: 3; }
.cmp-page .wko-x-zero { color: var(--text-subtle, #B6B1A6); }
/* Gliederung (Mandant › Gruppe › Standort, eingerückt mit Ebenen-Shading) */
.cmp-page table.wko-gld .wko-gld-name { text-align: left; }
.cmp-page table.wko-gld tr.wko-x-lvl0 td { background: #EAF1EA; font-weight: 700; }
.cmp-page table.wko-gld tr.wko-x-lvl1 td { background: #F2F6F1; font-weight: 600; }
.cmp-page table.wko-gld tr.wko-x-lvl2 td { background: #FAFBF8; }
.cmp-page table.wko-gld .wko-x-tl { font-size: 8px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); border: 1px solid var(--border-light, #E2E8F0); border-radius: var(--radius-sm); padding: 0 4px; margin-left: 6px; white-space: nowrap; }
.cmp-page .wko-note { margin-top: 10px; font-size: var(--text-xs); color: var(--color-warning-ink); background: var(--vi-warning-soft, #F6EEDD); padding: 8px 12px; border-radius: var(--radius-md); }
/* Export-Buttons im Seitenkopf + dynamische Filter-Dropdowns */
.cmp-page .wko-export { display: flex; gap: var(--space-2); flex-shrink: 0; align-self: center; }
.cmp-page .wko-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); flex: 1 1 auto; }
.cmp-page .wko-fsel {
  flex: 0 1 190px; min-width: 150px; max-width: 240px;
  font: inherit; font-size: var(--font-size-sm, 13px); color: var(--text-primary);
  background: var(--bg-secondary, #fff); border: 1px solid var(--border-light, var(--color-slate-200));
  border-radius: var(--radius-md, 8px); padding: 7px 10px; cursor: pointer;
}
.cmp-page .wko-fsel:focus { outline: none; border-color: var(--color-primary-600, #2E7D46); box-shadow: 0 0 0 2px var(--vi-info-soft, #E6EEF6); }
/* Suchbare Mehrfachauswahl (Fachbereich / Anlage / Art / Dienstleister) */
.cmp-page .wko-msel { position: relative; flex: 0 1 200px; min-width: 150px; }
.cmp-page .wko-msel-btn { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  font: inherit; font-size: var(--font-size-sm, 13px); color: var(--text-primary);
  background: var(--bg-secondary, #fff); border: 1px solid var(--border-light, var(--color-slate-200));
  border-radius: var(--radius-md, 8px); padding: 0 10px; height: var(--control-h-md); cursor: pointer; }
.cmp-page .wko-msel.is-active .wko-msel-btn { border-color: var(--color-primary-600, #2E7D46); background: var(--vi-info-soft, #EAF3EC); font-weight: 600; }
.cmp-page .wko-msel-lbl { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-page .wko-msel-car { flex: 0 0 auto; color: var(--text-muted); font-size: 10px; transition: transform .12s; }
.cmp-page .wko-msel.is-open .wko-msel-car { transform: rotate(180deg); }
.cmp-page .wko-msel-pop { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; min-width: 240px; max-width: 320px;
  background: var(--bg-secondary, #fff); border: 1px solid var(--border-light, var(--color-slate-200));
  border-radius: var(--radius-md, 8px); box-shadow: 0 8px 28px rgba(0,0,0,.14); padding: 8px; }
.cmp-page .wko-msel-q { width: 100%; font: inherit; font-size: var(--text-sm); padding: 6px 8px; margin-bottom: 6px;
  border: 1px solid var(--border-light, var(--color-slate-200)); border-radius: var(--radius-sm, 6px); }
.cmp-page .wko-msel-bar { display: flex; gap: 12px; margin-bottom: 6px; padding: 0 2px; }
.cmp-page .wko-msel-mini { font: inherit; font-size: var(--text-xxs); color: var(--vi-info, #245C7A); background: none; border: 0; cursor: pointer; padding: 0; }
.cmp-page .wko-msel-mini:hover { text-decoration: underline; }
.cmp-page .wko-msel-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; }
.cmp-page .wko-msel-opt { display: flex; align-items: center; gap: 8px; padding: 4px; border-radius: var(--radius-sm, 6px); cursor: pointer; font-size: var(--text-xs); }
.cmp-page .wko-msel-opt:hover { background: var(--bg-tertiary, #F7F8FA); }
.cmp-page .wko-msel-opt input { flex: 0 0 auto; }
.cmp-page .wko-msel-opt span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-page .wko-msel-empty { padding: 10px 6px; color: var(--text-muted); font-size: var(--text-xs); font-style: italic; }
/* ════ Globale suchbare Dropdowns (_viSS) — schwebendes Such-Popover über jedem <select> ════
   Stapelhöhe: die Auswahlliste muss über ihrem Dialog liegen, aber unter Toast und
   Bestätigung. Der frühere Wert 2147483000 (Maximum) war die Kapitulation vor einer
   fehlenden Ordnung — die gibt es seit 21.08.2026 in vi-dialog.css. */
.viss-pop { position: fixed; z-index: var(--vdlg-z-select, 9800); box-sizing: border-box;
  background: var(--white, #fff); border: 1px solid var(--border, #D8D5CC);
  border-radius: var(--radius-lg); box-shadow: 0 12px 40px rgba(0,0,0,.20); padding: 6px; }
.viss-q { width: 100%; box-sizing: border-box; font: inherit; font-size: var(--text-sm); color: var(--text-primary, #2A2A2A);
  padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--border, #D8D5CC); border-radius: var(--radius-sm); outline: none; }
.viss-q:focus { border-color: var(--gruen-mid, #3D8A5E); box-shadow: 0 0 0 3px rgba(61,138,94,.12); }
.viss-q-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; clip: rect(0 0 0 0); overflow: hidden; } /* fokussierbar, aber unsichtbar (kurze Listen) */
.viss-list { max-height: 300px; overflow-y: auto; }
.viss-grp { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted, #8A8578); padding: 7px 9px 2px; }
.viss-opt { padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-sm); line-height: 1.25;
  color: var(--text-primary, #2A2A2A); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viss-opt.is-active, .viss-opt:hover { background: var(--gruen-soft, #EAF3EC); }
.viss-opt.is-sel { font-weight: 650; }
.viss-opt.is-sel::after { content: '✓'; float: right; margin-left: 12px; color: var(--gruen-mid, #3D8A5E); }
.viss-opt.is-dis { color: var(--subtle, #B6B1A6); cursor: not-allowed; }
.viss-opt.is-dis:hover { background: none; }
.viss-empty { padding: 12px 10px; color: var(--muted, #8A8578); font-size: var(--text-xs); font-style: italic; }
.wk-yr-done { font-size: var(--text-xxs); font-weight: 700; color: var(--color-success-ink); }
.wk-yr-warn { font-size: 10px; font-weight: 700; color: #8A5A12; }

/* Erledigt-Abschnitt einklappbar */
.wk-sec-toggle { cursor: pointer; user-select: none; }
.wk-sec.wk-collapsed .wk-sec-body { display: none; }

/* ── Bauteil-/Prüfthema-Filter + Arbeitsliste ── */
.wk-filters-main { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); }
.wk-filters-main .form-select { flex: 0 1 180px; }
.wk-filters-main .wk-f-asset { flex: 1 1 220px; min-width: 200px; font-weight: 600; } /* zentraler Filter — prominenter */
#wk-reset-btn { margin-left: auto; }
.wk-wl { width: 100%; font-size: var(--text-xs); }
.wk-wl th { white-space: nowrap; }
.wk-wl .wk-wl-row { cursor: pointer; }
.wk-wl .wk-wl-row:hover { background: var(--bg-tertiary); }
.wk-wl .wk-wl-name { font-weight: 600; color: var(--text-primary); }
.wk-wl td { vertical-align: middle; }

@media (max-width: 860px) {
  .wk-filters .form-select { flex: 1 1 100%; }
}

/* Objekt-Tab „Anlagen & Bauteile" — Gruppierungs-Umschalter + Überfällig-Zähler (nutzt wk-Karten/KPIs) */
.nd-bt-bar { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-3); flex-wrap: wrap; }
.nd-bt-grouplbl { font-size: var(--text-xs); color: var(--text-muted); font-weight: 600; }
.nd-bt-odn { font-size: var(--text-xxs); font-weight: 700; color: var(--color-red-700, #A23A2E); background: var(--vi-error-soft, #F6E3E1); border-radius: var(--radius-full); padding: 1px 8px; margin-left: 4px; }

/* ════════════════════════════════════════════════════════════════════════════════
   MODUL BUDGETPLANUNG / CAPEX (cx-) — nutzt wk-/cmp-Komponenten + Design-Tokens
   ════════════════════════════════════════════════════════════════════════════════ */
.capex-page { display: block; }
.cx-kpis { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.cx-muted { color: var(--text-subtle); font-size: var(--text-xxs); }
.cx-src { font-family: var(--font-mono, monospace); font-size: var(--text-xxs); color: var(--text-secondary); font-weight: 600; white-space: nowrap; }
.cx-table { width: 100%; font-size: var(--text-xs); }
.cx-table th { white-space: nowrap; }
.cx-table .cx-row { cursor: pointer; }
.cx-table .cx-row:hover { background: var(--bg-tertiary); }
.cx-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.cx-table th.num { text-align: right; }

/* Jahresübersicht */
.cx-yr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: var(--space-4); }
.cx-yr-card { background: var(--bg-secondary, #fff); border: 1px solid var(--border-subtle, var(--color-slate-200)); border-top: 3px solid var(--color-primary-600, #2E7D46); border-radius: var(--radius-md, 10px); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.cx-yr-h { display: flex; align-items: center; justify-content: space-between; }
.cx-yr-y { font-size: var(--text-lg); font-weight: 800; color: var(--text-primary); }
.cx-yr-n { font-size: var(--text-xxs); font-weight: 700; background: var(--bg-tertiary); color: var(--text-secondary); border-radius: var(--radius-full); padding: 1px 8px; }
.cx-yr-big { font-size: var(--text-xl); font-weight: 800; color: var(--text-primary); display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.cx-yr-lbl { font-size: var(--text-xxs); font-weight: 600; color: var(--text-muted); }
.cx-yr-sub { font-size: var(--text-xs); color: var(--text-secondary); }
.cx-yr-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.cx-breaks { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.cx-break { background: var(--bg-secondary, #fff); border: 1px solid var(--border-subtle, var(--color-slate-200)); border-radius: var(--radius-md, 8px); padding: 10px 12px; }
.cx-break-h { font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.cx-break-row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: var(--text-xs); border-top: 1px solid var(--border-subtle, var(--color-slate-100)); }
.cx-break-v { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.cx-top-row { cursor: pointer; } .cx-top-row:hover { background: var(--bg-tertiary); }

/* Detail-Verknüpfungen */
.cx-links { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; }
.cx-link-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; background: var(--bg-tertiary, #F7F8FA); border-radius: var(--radius-md, 8px); font-size: var(--text-xs); }
.btn-link { background: none; border: 0; color: var(--vi-info, #245C7A); font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline; }

/* CAPEX-Abschnitt im Vorgang (Übersicht-Seitenspalte) */
.cx-case-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; }
.cx-case-link { display: flex; align-items: center; gap: 6px; }
.cx-case-open { flex: 1; text-align: left; background: var(--bg-tertiary, #F7F8FA); border: 1px solid var(--border-subtle, var(--color-slate-200)); border-radius: var(--radius-md, 8px); padding: 6px 9px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; font: inherit; }
.cx-case-open:hover { box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.cx-case-meta { font-size: var(--text-xxs); color: var(--text-secondary); }
.cx-case-acts { display: flex; gap: 6px; flex-wrap: wrap; }

/* ════════════════════════════════════════════════════════════════════════════════
   Adressassistenz (vi-addr-*) — PLZ/Ort-Vorschläge, Vererbung, Status
   ════════════════════════════════════════════════════════════════════════════════ */
.vi-addr-assist { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; min-height: 22px; }
.vi-addr-assist:empty { display: none; }
.vi-addr-sg {
  font-size: var(--text-xs); line-height: 1; padding: 5px 9px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid var(--accent, #2563eb); background: color-mix(in srgb, var(--accent, #2563eb) 8%, transparent);
  color: var(--accent, #2563eb); font-weight: 600; transition: background .12s;
}
.vi-addr-sg:hover { background: color-mix(in srgb, var(--accent, #2563eb) 18%, transparent); }
.vi-addr-sg-full { border-style: dashed; }
.vi-addr-hint { font-size: var(--text-xs); color: var(--text-secondary, #6b7280); }
.vi-addr-warn { font-size: var(--text-xs); color: var(--warning, #b45309); display: inline-flex; align-items: center; gap: 4px; }
.vi-addr-status { font-size: var(--text-xxs); font-weight: 600; padding: 3px 8px; border-radius: var(--radius-pill); margin-left: auto; }
.vi-addr-status.is-ok { background: color-mix(in srgb, var(--success, #16a34a) 12%, transparent); color: var(--success, #16a34a); }
.vi-addr-status.is-warn { background: color-mix(in srgb, var(--warning, #d97706) 14%, transparent); color: var(--warning, #b45309); }
.vi-addr-status.is-partial { background: var(--surface-2, #f1f5f9); color: var(--text-secondary, #6b7280); }
.vi-addr-status.is-empty { display: none; }
.vi-addr-inherit { font-size: var(--text-xs); }
.vi-addr-inherit-hint { font-size: var(--text-xxs); color: var(--text-secondary, #6b7280); margin-top: 4px; }

/* ════════════════════════════════════════════════════════════════════════════════
   Budget/CAPEX im Vorgang — Überführungs-Prozess (cx-*)
   ════════════════════════════════════════════════════════════════════════════════ */
/* Leer-Zustand der Budget/CAPEX-Karte */
.cx-card-empty { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.cx-card-empty-txt { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary, #141A17); }
.cx-card-empty-hint { font-size: var(--text-xs); color: var(--text-secondary, #6b7280); line-height: 1.4; margin-bottom: 3px; }
.cx-overfuehren-btn { white-space: nowrap; }

/* Verknüpfte Maßnahme — Karte im Vorgang */
.cx-link-card { border: 1px solid var(--border, #D8DFDC); border-radius: var(--radius-lg); padding: 11px 12px; margin-bottom: 9px; background: var(--white, #fff); }
.cx-link-card.is-origin { border-left: 3px solid var(--accent, #2563eb); }
.cx-link-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.cx-origin-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--accent, #2563eb) 13%, transparent); color: var(--accent, #2563eb); }
.cx-link-card-title { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary, #141A17); margin-bottom: 7px; line-height: 1.3; }
.cx-link-card-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 9px; }
.cx-link-chip { font-size: var(--text-xxs); color: var(--text-secondary, #6b7280); background: var(--surface-2, #f5f4ef); border-radius: var(--radius-sm); padding: 2px 7px; white-space: nowrap; }
.cx-link-card-acts { display: flex; gap: 7px; flex-wrap: wrap; }
.cx-link-remove { color: var(--color-red-700, #A23A2E) !important; }

/* Überführungs-Dialog: Vorbelegungs-Box + optionale Verknüpfungen */
.cx-prefill-box { background: var(--surface-2, #f7f6f2); border: 1px solid var(--border, #D8DFDC); border-radius: var(--radius-md); padding: 9px 12px; margin-bottom: 14px; }
.cx-prefill-row { display: flex; gap: 10px; font-size: var(--text-xs); padding: 2px 0; }
.cx-prefill-k { flex: 0 0 130px; color: var(--text-secondary, #6b7280); font-weight: 600; }
.cx-prefill-v { color: var(--text-primary, #141A17); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cx-optlinks { display: flex; flex-direction: column; gap: 7px; margin: 6px 0 4px; padding: 10px 0; border-top: 1px solid var(--border, #D8DFDC); }
.cx-optlink { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--text-secondary, #4b5563); cursor: pointer; }

/* Erfolgs-/Auswahl-Dialog nach Überführung */
.cx-success { display: flex; align-items: center; gap: 13px; padding: 8px 0 14px; }
.cx-success-ico { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--success, #16a34a) 14%, transparent); color: var(--success, #16a34a); display: flex; align-items: center; justify-content: center; font-size: var(--text-xl); font-weight: 700; }
.cx-success p { font-size: var(--text-sm); line-height: 1.5; margin: 0; }
.cx-success-acts { flex-wrap: wrap; }

/* Such-/Auswahldialog (Maßnahme bzw. Vorgang verknüpfen) */
.cx-linksearch-bar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.cx-linksearch-bar .form-input { flex: 1 1 200px; }
.cx-linksearch-results { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.cxls-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 9px 11px; border: 1px solid var(--border, #D8DFDC); border-radius: var(--radius-md); }
.cxls-row:hover { background: var(--surface-2, #FAFBFA); }
.cxls-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cxls-title { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary, #141A17); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cxls-meta { font-size: var(--text-xxs); color: var(--text-secondary, #6b7280); }

/* CAPEX-Detail: Ursprungs-Zeile + Aktionen */
.cx-link-origin { border-left: 3px solid var(--accent, #2563eb); padding-left: 10px; background: color-mix(in srgb, var(--accent, #2563eb) 4%, transparent); }
.cx-link-row-acts { display: inline-flex; gap: 6px; align-items: center; flex-shrink: 0; }
/* ════════════════════════════════════════════════════════════════════════════════
   Interaktionssystem (Paket 3): Confirm-/Input-Modal · Button-Spinner · Toast-Politur
   ════════════════════════════════════════════════════════════════════════════════ */
/* Der Bestätigungsdialog ist die kleinste Größenstufe des EINEN Dialogsystems
   (vi-dialog.css): dieselbe Fläche, derselbe Radius, derselbe Schatten, dieselbe
   Abdunklung, dieselbe Typografie — nur ohne getrennte Kopf-/Fußzeilen, weil er
   genau eine Frage stellt. Er behält seine eigene Stapelhöhe: eine Rückfrage
   darf über einem Dialog stehen, aus dem sie ausgelöst wurde. */
.vi-confirm-overlay {
  position: fixed; inset: 0; z-index: var(--vdlg-z-confirm, 12000);
  display: none; align-items: center; justify-content: center;
  background: var(--bg-overlay, rgba(35,33,28,.5));
  padding: var(--space-5) var(--space-4);
}
.vi-confirm-overlay.open { display: flex; animation: viCfFade .14s ease; }
@keyframes viCfFade { from { opacity: 0 } to { opacity: 1 } }
.vi-confirm {
  width: 100%; max-width: var(--vdlg-w-s, 440px); background: var(--color-surface, #fff);
  border: 1px solid var(--border-subtle, #E3E9E7);
  border-radius: var(--radius-xl, 16px); box-shadow: var(--shadow-xl);
  padding: var(--space-5); animation: viCfPop .16s cubic-bezier(.2,.7,.3,1);
}
@keyframes viCfPop { from { opacity: 0; transform: translateY(8px) scale(.985) } to { opacity: 1; transform: none } }
.vi-confirm-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.vi-confirm-ico {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-md, 8px);
  display: flex; align-items: center; justify-content: center;
  background: var(--gray-100, #f1efe9); color: var(--gray-500, #6b7280);
}
.vi-confirm-ico svg { width: 22px; height: 22px; }
.vi-confirm-ico.is-danger { background: var(--color-danger-soft, #FBE8E5); color: var(--color-danger-ink, #A32C22); }
.vi-confirm-title {
  font-size: var(--text-lg, 17px); font-weight: var(--fw-semibold, 600);
  letter-spacing: -.01em; color: var(--gray-900, #141A17); margin: 0; line-height: var(--lh-tight, 1.3);
}
.vi-confirm-msg {
  font-size: var(--text-md, 14px); line-height: var(--lh-normal, 1.55); color: var(--gray-700, #4b5563);
  white-space: pre-line; margin: 2px 0 var(--space-4);
}
.vi-confirm-field { margin: 0 0 var(--space-4); }
.vi-confirm-label {
  display: block; font-size: var(--text-sm, 13px); font-weight: var(--fw-medium, 500);
  letter-spacing: 0; text-transform: none; color: var(--gray-900, #141A17); margin-bottom: var(--space-1);
}
.vi-confirm-field .form-input {
  width: 100%; box-sizing: border-box; min-height: var(--ui-field-h, 38px);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--gray-300, #D8DFDC); border-radius: var(--radius-md, 8px);
  font-family: var(--font-body); font-size: var(--text-md, 14px); color: var(--gray-900, #141A17);
}
.vi-confirm-field .form-input:focus {
  outline: none; border-color: var(--color-sage); box-shadow: var(--focus-ring);
}
.vi-confirm-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
.vi-confirm-actions button { min-width: 110px; }
@media (max-width: 640px) {
  .vi-confirm-actions { flex-direction: column-reverse; align-items: stretch; }
  .vi-confirm-actions button { width: 100%; min-width: 0; }
}
/* Der optionale Extra-Button (#vi-confirm-extra) trägt `hidden` — die Autor-`display`-Regel
   von .btn-secondary schlägt sonst das UA-`[hidden]`; darum hier explizit ausblenden,
   sonst erscheint ein leerer Knopf zwischen „Abbrechen" und „Bestätigen". */
.vi-confirm-actions button[hidden] { display: none !important; }
/* Danger-Primärbutton (rot) — einheitlich für destruktive Bestätigungen */
.btn-danger { background: var(--color-red-600, #C0392C) !important; color: var(--color-surface) !important; border-color: var(--color-red-600, #C0392C) !important; }
.btn-danger:hover { background: var(--color-red-700, #A23A2E) !important; }

/* Zentrale Lade-Anzeige: dünner Fortschrittsbalken oben (modernes SaaS-Feedback) */
#vi-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--vi-green, #147352); z-index: 13000; opacity: 0; pointer-events: none;
  box-shadow: 0 0 6px color-mix(in srgb, var(--vi-green, #147352) 60%, transparent);
}
#vi-progress.active { opacity: 1; width: 82%; transition: width 9s cubic-bezier(.08,.7,.1,1), opacity .15s; }
#vi-progress.finishing { width: 100%; opacity: 0; transition: width .2s ease, opacity .28s .12s; }

/* Spinner + Button-Ladezustand */
.vi-spinner {
  display: inline-block; width: 14px; height: 14px; vertical-align: -2px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: viSpin .6s linear infinite;
}
.vi-busy-txt { margin-left: 8px; }
button.is-busy { cursor: progress; opacity: .85; }
@keyframes viSpin { to { transform: rotate(360deg) } }

/* Toast-Politur: dezenter Slide-up, Info-Variante, mobil volle Breite */
.toast { transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; box-shadow: var(--shadow-lg); }
.toast.show { transform: translateY(0); }
.toast-info { background: var(--color-info-ink, #245C7A) !important; color: var(--color-surface); }
@media (max-width: 600px) {
  .toast { left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 70px); text-align: center; }
  .vi-confirm { max-width: 100%; }
  .vi-confirm-actions { flex-direction: column-reverse; }
  .vi-confirm-actions button { width: 100%; }
}

/* Brutto/Netto-Automatik: Hinweiszeile unter den Budgetfeldern */
.cx-vat-hintbox { min-height: 18px; margin: -4px 0 10px; }
.cx-vat-hint { font-size: var(--text-xxs); color: var(--text-secondary, #6b7280); display: inline-flex; align-items: center; gap: 6px; }
.cx-vat-ico { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; border-radius: 4px; background: color-mix(in srgb, var(--accent, #2563eb) 12%, transparent); color: var(--accent, #2563eb); font-size: var(--text-xxs); font-weight: 700; }
.cx-vat-warn { font-size: var(--text-xxs); color: var(--color-red-700, #A23A2E); font-weight: 600; }

/* PDF-Export-Button + Vorschau */
.wk-bar-actions { display: inline-flex; gap: 8px; align-items: center; }
.cx-pdf-btn { font-weight: 600; }
.cx-pdf-preview { list-style: none; margin: 10px 0 4px; padding: 0; border: 1px solid var(--border, #D8DFDC); border-radius: var(--radius-md); overflow: hidden; }
.cx-pdf-preview li { display: flex; justify-content: space-between; gap: 14px; padding: 8px 13px; font-size: var(--text-sm); border-bottom: 1px solid var(--border, #EEECE4); }
.cx-pdf-preview li:last-child { border-bottom: none; }
.cx-pdf-preview li span { color: var(--text-secondary, #6b7280); }
.cx-pdf-preview li.cx-pdf-sum { background: var(--surface-2, #FAFBFA); }
.cx-pdf-preview li.cx-pdf-sum strong { color: var(--accent, #147352); }
.cx-active-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.cx-active-chip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); font-weight: 600; padding: 3px 10px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--accent, #2563eb) 12%, transparent); color: var(--accent, #2563eb); }
.cx-active-chip button { background: none; border: none; cursor: pointer; color: inherit; font-size: var(--text-md); line-height: 1; padding: 0; }

/* ════════════════════════════════════════════════════════════════════════════════
   PAKET 2 — KANONISCHES DESIGNSYSTEM (Konsolidierungs-Layer, lädt nach style.css)
   Eine verbindliche Definition für Buttons & Badges. Vereinheitlicht Höhe/Radius/Padding/
   Typo/Hover/Focus/Disabled über die historisch konkurrierenden Definitionen hinweg.
   Marke (Grün/Rot) unverändert — nur Form/Größe/Verhalten werden vereinheitlicht.
   ════════════════════════════════════════════════════════════════════════════════ */

/* ── Globaler Tastatur-Fokusring (A11y, Paket 4) ──────────────────────────────────
   Sichtbarer Ring NUR bei Tastatur-Fokus (:focus-visible) für die wichtigsten
   interaktiven Elemente. Lädt spät → überschreibt vereinzelte `outline:none`-Regeln. */
a:focus-visible, button:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible, .nav-item:focus-visible, .nav-label:focus-visible,
.cases-row:focus-visible, .csd-btn:focus-visible, .vi-bn-item:focus-visible, .cases-inline-select:focus-visible {
  outline: 2px solid var(--gruen-mid, #0F5C42) !important;
  outline-offset: 2px;
}

/* ── EIN Button-System ──────────────────────────────────────────────────────────
   Gilt für alle Varianten gleichermaßen: gleiche Geometrie, mixed-case (kein Uppercase),
   gleicher Radius/Padding/Höhe. .vi-btn-primary ist Alias auf .btn-primary. */
.btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .vi-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--ui-btn-h, 38px); padding: 6px var(--space-4, 16px); box-sizing: border-box;
  font-family: var(--font-family-body, inherit); font-size: var(--text-md, 14px); font-weight: 600;
  line-height: 1.2; letter-spacing: -.005em; text-transform: none;
  border-radius: var(--radius-md, 8px); border: 1px solid transparent; cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
  white-space: nowrap; user-select: none; text-decoration: none; vertical-align: middle;
}
.btn-primary svg, .btn-secondary svg, .btn-ghost svg, .btn-danger svg, .vi-btn-primary svg { flex-shrink: 0; }

/* Größenvariante */
.btn-sm { min-height: var(--ui-btn-sm-h, 30px); padding: 4px var(--space-3, 12px); font-size: var(--text-sm, 13px); border-radius: var(--radius-md, 8px); }

/* Primär (Marke) + Alias vi-btn-primary — EINE grüne Aktion je Ansicht.
   Kein farbiger Schlagschatten beim Zeigen: ein Knopf, der beim Überfahren leuchtet,
   ist Effekt, keine Rückmeldung. Der dunklere Ton sagt dasselbe ruhiger. */
.btn-primary, .vi-btn-primary { background: var(--gruen, #147352); color: var(--color-surface); border-color: var(--gruen, #147352); }
.btn-primary:hover:not(:disabled), .vi-btn-primary:hover:not(:disabled) { background: var(--gruen-mid, #0F5C42); border-color: var(--gruen-mid, #0F5C42); }
.btn-primary:active:not(:disabled), .vi-btn-primary:active:not(:disabled) { background: var(--green-800, #0C4A36); }

/* Sekundär (neutral, weiß mit Rahmen) */
.btn-secondary { background: var(--white, #fff); color: var(--text-primary, #141A17); border-color: var(--border, #D8DFDC); }
.btn-secondary:hover:not(:disabled) { background: var(--gray-50, #F4F6F5); border-color: var(--border-strong, #A6B0AC); }

/* Ghost (transparent, leiser Rahmen) */
.btn-ghost { background: transparent; color: var(--text-secondary, #3A4441); border-color: var(--border, #D8DFDC); }
.btn-ghost:hover:not(:disabled) { background: var(--gray-50, #F4F6F5); color: var(--text-primary, #141A17); border-color: var(--border-strong, #A6B0AC); }

/* Danger (destruktiv) */
.btn-danger { background: var(--rot, #C0392C); color: var(--color-surface); border-color: var(--rot, #C0392C); }
.btn-danger:hover:not(:disabled) { background: var(--color-danger-ink, #A32C22); border-color: var(--color-danger-ink, #A32C22); }

/* Einheitliche Disabled-/Focus-Zustände für alle Varianten */
.btn-primary:disabled, .btn-secondary:disabled, .btn-ghost:disabled, .btn-danger:disabled, .vi-btn-primary:disabled,
.btn-primary.is-busy, .btn-secondary.is-busy, .btn-ghost.is-busy, .btn-danger.is-busy {
  opacity: .55; cursor: not-allowed; box-shadow: none; transform: none;
}
.btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-ghost:focus-visible, .btn-danger:focus-visible, .vi-btn-primary:focus-visible {
  outline: 2px solid var(--gruen-mid, #0F5C42); outline-offset: 2px;
}

/* ── EIN Badge-/Status-System (Form/Größe vereinheitlicht; Farben bleiben pro Klasse) ──
   Die Farb-/Status-Logik der einzelnen Systeme bleibt erhalten — nur Geometrie & Typo
   werden angeglichen, damit Badges überall gleich „sitzen". */
.badge, .vp-badge, .cases-badge, .cases-badge-status, .case-status-badge, .case-priority-badge,
.case-object-badge, .node-type-badge, .cmp-chip, .meta-status-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: var(--radius-pill); padding: 2px 9px;     /* einheitliche Pillenform (UI/UX Phase 2) */
  font-size: var(--text-xxs); font-weight: 600; line-height: 1.5; letter-spacing: .01em;
  white-space: nowrap; vertical-align: middle;
}
.vp-badge .dot, .cmp-chip .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* ── Etappe 3: Anlagenbestand — Aktionen, Standortliste, Schnellerfassung ── */
.cmp-nd-actions { display: inline-flex; gap: var(--space-2, 8px); flex-wrap: wrap; }
.cmp-q-wrap { display: flex; flex-direction: column; gap: var(--space-3, 14px); max-height: 56vh; overflow: auto; margin: 8px 0; }
.cmp-q-group { border: 1px solid var(--border, #e3e3df); border-radius: var(--radius-md); overflow: hidden; }
.cmp-q-grouptitle { background: var(--surface-2, #f5f5f0); padding: 7px 12px; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-secondary, #555); }
.cmp-q-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 14px; padding: 8px 12px; }
.cmp-q-item { display: flex; align-items: center; gap: 8px; padding: 5px 4px; font-size: var(--text-sm); cursor: pointer; border-radius: var(--radius-sm); }
.cmp-q-item:hover { background: var(--surface-2, #f5f5f0); }
.cmp-q-item.is-present { opacity: .6; cursor: default; }
.cmp-q-name { flex: 1; min-width: 0; }
.cmp-q-qty { width: 76px; flex-shrink: 0; padding: 3px 6px; font-size: var(--text-xs); }
.cmp-fu-resitem.sel { border-color: var(--color-primary-600, #2E7D52); background: var(--color-primary-50, #EDF7F2); font-weight: 600; }

/* Vorgang-Sidebar: Objektkarte klickbar (Objekt/Standort zuweisen/ändern) */
.workspace-object.workspace-object-clickable,
.workspace-object.workspace-object-assign {
  display: flex; width: 100%; text-align: left; align-items: center; gap: 10px;
  border: 1px solid var(--vi-border, #D8DFDC); background: var(--bg-secondary, #fff);
  border-radius: var(--radius-lg); padding: 10px 12px; cursor: pointer; font: inherit; color: inherit;
}
.workspace-object.workspace-object-clickable:hover,
.workspace-object.workspace-object-assign:hover { background: var(--vi-green-tint, #EDF7F2); border-color: var(--vi-green-soft, #EDF7F2); }
.workspace-object.workspace-object-assign { border-style: dashed; }
.workspace-object-clickable .workspace-object-text,
.workspace-object-assign .workspace-object-text { flex: 1 1 auto; min-width: 0; }
.workspace-object-edit { margin-left: auto; flex: 0 0 auto; color: var(--vi-muted, #5F6B66); font-size: var(--text-md); }
.cmpd-pagebar { display: flex; align-items: center; gap: var(--space-3, 12px); flex-wrap: wrap; }
.cmpd-back { flex: 0 0 auto; }
.cmpd-sec-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cmpd-sec-head h3 { font-size: var(--text-xs); font-weight: 700; color: var(--text-primary, #141A17); margin: 0; text-transform: uppercase; letter-spacing: .04em; }
.cmpd-panel h4 > button, .cmpd-panel h4 .btn-ghost, .cmpd-panel h4 .btn-xs { flex: 0 0 auto; white-space: nowrap; }
/* Label ÜBER dem Wert (gestapelt) → der Wert nutzt die volle Spaltenbreite; keine senkrechten Mitten-
   Umbrüche bei langen Adressen/Fachbereichen in der schmalen Seitenspalte (Fix: rechte Spalte gequetscht). */
.cmpd-kv .cmp-kv-row { display: flex; flex-direction: column; gap: 1px; padding: 5px 0; border-bottom: 1px solid var(--border-light, #ECE8DD); }
.cmpd-kv .cmp-kv-row:last-child { border-bottom: 0; }
.cmpd-kv .cmp-kv-k { flex: none; font-size: var(--text-xxs); color: var(--text-muted, #5F6B66); }
.cmpd-kv .cmp-kv-v { font-size: var(--text-xs); color: var(--text-primary, #141A17); word-break: break-word; }

/* Inline-Bearbeitung in der Akte: Wert ist klickbar (Stift erscheint bei Hover),
   wird beim Klick durch ein Eingabefeld an Ort und Stelle ersetzt. */
.cmp-kv-editbtn { appearance: none; border: 0; background: transparent; font: inherit; color: inherit;
  text-align: left; padding: 0; cursor: pointer; display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; }
.cmp-kv-editbtn:hover { color: var(--accent, #0F5C42); }
.cmp-kv-editbtn .cmp-kv-pen { opacity: 0; font-size: var(--text-xxs); color: var(--text-muted, #5F6B66); transition: opacity .15s ease; }
.cmp-kv-editbtn:hover .cmp-kv-pen, .cmp-kv-editbtn:focus-visible .cmp-kv-pen { opacity: 1; }
.cmp-kv-input { height: 28px; padding: 2px 8px; font-size: var(--text-xs); max-width: 280px; }
.cmpd-obl.is-overdue { border-left-color: var(--color-danger-ink); background: #FCF5F4; }
.cmpd-obl.is-planned { border-left-color: #cfd6dd; }
.vi-ov-origin-maint { border-left: 3px solid var(--vi-green, #147352); }

/* Kompakte Empty-States */
.cmpd-empty { font-size: var(--text-xs); color: var(--text-muted, #5F6B66); padding: 8px 10px; background: var(--bg-tertiary, #F7F5EF);
  border: 1px dashed var(--border-light, #ECE8DD); border-radius: var(--radius-md, 8px); }
.cmpd-mangel .btn-primary { flex: 0 0 auto; white-space: nowrap; }
@keyframes cmpdFocus { 0% { box-shadow: 0 0 0 3px rgba(19,109,57,.55); } 100% { box-shadow: 0 0 0 2px rgba(19,109,57,.28); } }
.cmpd-costform-sub { margin: 0 0 12px; font-size: var(--text-sm); font-weight: 650; color: var(--text-primary, #141A17); }
.cmpd-costform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
@media (max-width: 560px) { .cmpd-costform-grid { grid-template-columns: 1fr; } }
.cmpd-del-warn { font-size: var(--text-sm); color: var(--text-primary, #141A17); background: #FCF5F4;
  border: 1px solid #F1C7C3; border-left: 4px solid var(--color-danger-ink); border-radius: var(--radius-md, 8px); padding: 12px 14px; line-height: 1.55; }
.cmpd-or { text-align: center; font-size: var(--text-xxs); color: var(--text-muted, #5F6B66); margin: 12px 0; }

/* ═══ Upload-Komponente (upz) — Drag & Drop, Mehrfachauswahl, Datei-Chips ═══ */
/* (Entfallen 28.08.2026, Feedback #3 §2.1) Die `.upz-*`-Regeln zeichneten die ZWEITE
   Upload-Komponente neben VIPhoto. Ablagefläche, Datei-Chips und Zustände leben jetzt
   in `public/vi-photo.css` (`.vip-zone`, `.vip-thumb`); `_upz*` in app.js ist nur noch
   eine Fassade darauf. Wer einen Upload braucht, nimmt VIPhoto — nicht diese Klassen. */

@media (max-width: 560px) {
  .cmf-foot .btn-primary, .cmf-foot .btn-secondary { width: 100%; }
}

/* ── Vorgangsanlage: Auto-Klassifizierungs-Vorschlag (Betreff → Kategorie/Leistungsbereich) ── */
.cn-suggest{border:1px solid var(--vi-border,#E7E3DA);background:var(--vi-green-tint,#EDF7F2);border-radius: var(--radius-md);padding:8px 10px;}
.cn-sug-head{font-size: var(--text-xs);font-weight:600;color:var(--vi-forest,#1f5c3d);margin-bottom:2px;}
.cn-sug-meta{font-weight:400;color:var(--vi-muted,#5F6B66);}
.cn-sug-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:5px;font-size: var(--text-xs);}
.cn-sug-lbl{color:var(--vi-muted,#5F6B66);min-width:96px;}
.cn-sug-chip{border:1px solid var(--vi-sage,#7BA890);background:var(--color-surface);color:var(--vi-forest,#1f5c3d);border-radius: var(--radius-xl);padding:3px 10px;font-size: var(--text-xs);cursor:pointer;white-space:normal;overflow-wrap:anywhere;}
.cn-sug-chip:hover{background:var(--vi-sage,#7BA890);color:var(--color-surface);}

/* ── Auswahlzeile (Assistent „Neue Anlage anlegen": Pflichtenliste; früher auch Filter-Drawer) ──
   Ersetzt nackte Browser-Checkboxen. Zustand über Markierung UND Text, nicht nur
   Farbe; aktiv = dezente grüne Fläche mit Kontur, keine vollflächige Dunkelfarbe. */
.anl-optlist { display: flex; flex-direction: column; gap: 4px; }
.anl-opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 38px; padding: 0 12px; text-align: left; cursor: pointer; font-family: inherit;
  border: 1px solid transparent; border-radius: var(--radius-lg, 10px);
  background: var(--bg-tertiary, #FAFBFA); color: var(--text-secondary, #3A4441); font-size: var(--text-sm);
  transition: background .13s ease, border-color .13s ease, color .13s ease;
}
.anl-opt:hover { background: var(--bg-alt, #EFF2F1); border-color: var(--border-light, #D8DFDC); color: var(--text-primary, #141A17); }
.anl-opt:focus-visible { outline: none; border-color: var(--accent, #147352); box-shadow: 0 0 0 3px rgba(19, 109, 57, .14); }
.anl-opt-mark {
  width: 17px; height: 17px; flex: 0 0 auto; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border, #D7CFBE); background: var(--bg-secondary, #fff);
  position: relative; transition: border-color .13s ease, background .13s ease;
}
.anl-opt.is-on { background: var(--vi-green-soft, #EDF7F2); border-color: var(--accent, #147352); color: var(--text-primary, #141A17); font-weight: 600; }
.anl-opt.is-on .anl-opt-mark { background: var(--accent, #0F5C42); border-color: var(--accent, #0F5C42); }
.anl-opt.is-on .anl-opt-mark::after {
  content: ''; position: absolute; left: 5px; top: 1.5px; width: 4px; height: 9px;
  border: solid var(--white, #fff); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.anl-opt-l { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anl-opt-n { font-size: var(--text-xs); color: var(--text-muted, #5F6B66); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.anl-opt.is-on .anl-opt-n { color: var(--accent, #147352); font-weight: 700; }
/* Dringlichkeit nur als schmale Kante — keine grellen Flächen. */
.anl-opt-crit { box-shadow: inset 2px 0 0 var(--vi-error, #C0392C); }
.anl-opt-warn { box-shadow: inset 2px 0 0 var(--vi-warning, #A8741F); }
.anl-opt-info { box-shadow: inset 2px 0 0 var(--vi-info, #31708F); }

/* ── Rechter Filter-Drawer (zentrale Komponente .vi-drawer) ────────────────── */
/* Der Drawer ist die app-weite Fläche für „viel Inhalt, ohne den Arbeitskontext zu
   verlieren": Weitere Filter, Objektauswahl, umfangreiche Bearbeitung. Er ist EINE
   Komponente — kein Modul baut ein eigenes Seitenpanel. Er darf nur da geöffnet
   werden, wo der Nutzer danach an derselben Stelle weiterarbeitet; alles, was den
   Kontext wirklich wechselt, ist eine Seite. */
.vi-drawer-ov {
  position: fixed; inset: 0; z-index: 1400; display: flex; justify-content: flex-end;
  background: rgba(12, 20, 17, .32); opacity: 0; transition: opacity .2s ease;
}
.vi-drawer-ov.is-open { opacity: 1; }
.vi-drawer {
  width: min(460px, 96vw); height: 100%; display: flex; flex-direction: column;
  background: var(--color-surface, #fff); border-left: 1px solid var(--border-light, #D8DFDC);
  box-shadow: var(--shadow-xl, -10px 0 34px rgba(16, 26, 22, .16));
  transform: translateX(100%); transition: transform .22s cubic-bezier(.22, .8, .3, 1);
}
.vi-drawer-ov.is-open .vi-drawer { transform: none; }
.vi-drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: var(--space-4, 16px) var(--space-5, 20px) var(--space-3, 12px);
  border-bottom: 1px solid var(--border-subtle, #E5EAE8); flex: 0 0 auto;
}
.vi-drawer-t { font-size: var(--text-lg, 17px); font-weight: var(--fw-semibold, 600); letter-spacing: -.01em; color: var(--text-primary, #141A17); margin: 0; }
.vi-drawer-sub { font-size: var(--text-sm, 13px); color: var(--text-muted, #5F6B66); margin: 3px 0 0; }
.vi-drawer-x {
  border: none; background: none; font-size: var(--text-lg); line-height: 1; cursor: pointer; padding: 4px 6px;
  color: var(--text-muted, #5F6B66); border-radius: var(--radius-md, 8px); flex: 0 0 auto;
}
.vi-drawer-x:hover { background: var(--gray-100, #EFF2F1); color: var(--text-primary, #141A17); }
.vi-drawer-x:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.vi-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: var(--space-4, 16px) var(--space-5, 20px) var(--space-5, 20px); display: flex; flex-direction: column; gap: var(--space-5, 18px); }
.vi-drawer-foot {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: var(--space-3, 12px) var(--space-5, 20px);
  border-top: 1px solid var(--border-subtle, #E5EAE8); background: var(--gray-25, #FAFBFA);
}
.vi-drawer-foot .btn-primary { min-width: 168px; justify-content: center; }

/* ── Responsiv (Drawer) ─────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .vi-drawer { width: 100vw; border-left: none; }
  .vi-drawer-foot { flex-direction: column-reverse; align-items: stretch; }
  .vi-drawer-foot .btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANLAGE-ASSISTENT, SCHRITT 3 — „Neue Anlage anlegen" (Neuaufbau 02.08.2026)
   Gliederung nach Arbeitsablauf: Kennzeichnung → Zuordnung → Fristen → Notiz.
   Ruhige Beschriftungen in Satzschreibung (die globale .form-label ist versal und
   war hier zu laut), EIN Scrollbereich (das Modal) statt verschachtelter Kästen,
   Pflichten als dieselbe Auswahlzeile wie im Filter-Drawer — keine nativen Checkboxen.
   ═══════════════════════════════════════════════════════════════════════════ */
.anlw-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 16px; background: var(--bg-tertiary, #FAFBFA);
  border: 1px solid var(--border-light, #D8DFDC); border-radius: var(--radius-lg, 10px); }
.anlw-head-n { font-size: var(--text-base); font-weight: 650; color: var(--text-primary, #141A17); }
.anlw-head-m { display: flex; align-items: center; gap: 8px; }

.anlw-sec { margin-bottom: 18px; }
.anlw-sec-h { font-size: var(--text-xxs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted, #5F6B66); margin: 0 0 8px; }
.anlw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.anlw-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.anlw-f-wide { grid-column: 1 / -1; }
/* Ruhige Beschriftung — überschreibt die versale .form-label nur im Assistenten. */
.anlw-l { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary, #3A4441);
  text-transform: none; letter-spacing: 0; }
.anlw-f .form-input, .anlw-f .form-select { height: 38px; border-radius: var(--radius-lg, 10px); }
.anlw-f-base { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.anlw-f-base .form-input { max-width: 190px; }
.anlw-basehint { font-size: var(--text-xs); color: var(--text-muted, #5F6B66); }

/* ── MASSNAHMENKARTE (Neufassung 10.09.2026) ──────────────────────────────────
   Eine Karte je Pflicht: Auswahlzeile (Name + Art) · Turnus · Fälligkeit · Anmerkung.

   WAS SICH GEÄNDERT HAT UND WARUM:
   • KEINE kräftig grüne Vollfläche mehr für die aktive Karte. Bei vier bis zehn
     Pflichten stand der halbe Dialog in Markenfarbe; die Farbe sagte „wichtig", gemeint
     war nur „ausgewählt". Ausgewählt ist jetzt der Rahmen plus ein 3-px-Balken links —
     dieselbe Auswahlsprache wie in Listen und Karten (`inset 3px`).
   • Zahl und Einheit stehen NEBENeinander in einer Gruppe, nicht als zwei volle
     Feldbreiten untereinander; das Bezugswort heißt „Turnus" statt eines isolierten
     „alle".
   • Die Anmerkung liegt eingeklappt hinter einem Textknopf — im Normalzustand bleibt
     die Karte flach.
   Höhe je Karte gemessen: 104 px vorher (aktiv), 76 px jetzt. */
.anlw-obls { display: flex; flex-direction: column; gap: 8px; }
.anlw-obl { border: 1px solid var(--border-light, #D8DFDC); border-radius: var(--radius-lg, 10px);
  background: var(--color-surface, #fff); padding: 9px 12px;
  transition: border-color .13s, box-shadow .13s, opacity .13s; }
.anlw-obl.is-on { border-color: var(--accent, #147352); box-shadow: inset 3px 0 0 var(--accent, #147352); }
.anlw-obl.is-off { opacity: .55; }
.anlw-obl-h .anl-opt-mark { position: relative; }
.anlw-obl-h { display: flex; align-items: center; gap: 9px; width: 100%; border: none; background: none;
  cursor: pointer; font-family: inherit; text-align: left; padding: 2px 0; min-width: 0; }
.anlw-obl-h:focus-visible { outline: 2px solid var(--accent, #147352); outline-offset: 2px; border-radius: var(--radius-sm); }
.anlw-obl-n { font-size: var(--text-sm); font-weight: 650; color: var(--text-primary, #141A17);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Die Art als kleine Plakette ganz rechts — ruhig, nicht als zweite Überschrift. */
.anlw-obl-h .cmp-tag { margin-left: auto; flex: 0 0 auto; }
.anlw-obl-h .cmp-chip { flex: 0 0 auto; }
.anlw-obl.is-on .anlw-obl-h .anl-opt-mark { background: var(--accent, #0F5C42); border-color: var(--accent, #0F5C42); }
.anlw-obl.is-on .anlw-obl-h .anl-opt-mark::after { content: ''; position: absolute; left: 5px; top: 1.5px;
  width: 4px; height: 9px; border: solid var(--white, #fff); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Angabenbereich: Turnus und Fälligkeit nebeneinander, solange Platz ist. */
.anlw-obl-b { display: flex; align-items: flex-start; gap: var(--space-2, 8px) var(--space-5, 20px);
  flex-wrap: wrap; margin: 4px 0 0 26px; }
.anlw-obl-g { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.anlw-obl-l { font-size: var(--text-xxs); font-weight: 600; letter-spacing: .02em;
  color: var(--text-muted, #5F6B66); }
.anlw-obl-iv { display: flex; align-items: center; gap: 6px; }
.anlw-obl-b .form-input, .anlw-obl-b .form-select { height: 32px; border-radius: var(--radius-md); font-size: var(--text-sm); }
/* DIE FELDBREITEN BRAUCHEN `.modal-anlw` DAVOR (10.09.2026).
   `vi-dialog.js` gibt jedem `.modal-overlay` die Klasse `.vi-dlg`, und
   `.vi-dlg .form-input { width: 100% }` (vi-canonical.css) hat dieselbe Spezifität wie
   `.anlw-obl-b .cmp-add-iv`, steht aber später in der Kaskade — die Zahl „2" saß dann in
   einem 136-px-Kasten und das Datumsfeld sprengte seine Zeile. Dieselbe Falle wie beim
   Suchfeld weiter unten; hier gewinnt die dritte Klasse. */
.modal.modal-anlw .anlw-obl-b .cmp-add-iv { width: 64px; flex: 0 0 auto; text-align: center; }
.modal.modal-anlw .anlw-obl-b .cmp-add-unit { width: 108px; flex: 0 0 auto; }
.modal.modal-anlw .anlw-obl-b .cmp-add-due { width: 156px; flex: 0 0 auto; }
.anlw-obl-due { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 32px; }
/* Die geerbte gemeinsame Fälligkeit — sichtbar an der Karte, damit niemand nach oben scrollen muss. */
.anlw-obl-inherit { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary, #141A17);
  font-variant-numeric: tabular-nums; }
.anlw-obl-nodue { font-size: var(--text-xs); color: var(--text-muted, #5F6B66); }
/* Textknöpfe statt gestrichelter Kästen: sie sollen die Karte nicht beschweren. */
.anlw-obl-ab, .anlw-obl-notebtn { border: none; background: none; padding: 0; font: inherit;
  font-size: var(--text-xs); color: var(--accent, #147352); cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px; }
.anlw-obl-ab:hover, .anlw-obl-notebtn:hover { color: var(--vi-green-deep, #0F5C42); }
.anlw-obl-ab:focus-visible, .anlw-obl-notebtn:focus-visible { outline: 2px solid var(--accent, #147352); outline-offset: 2px; border-radius: var(--radius-sm); }
.anlw-obl-ab[disabled], .anlw-obl-notebtn[disabled] { color: var(--text-muted, #5F6B66); cursor: not-allowed; text-decoration: none; }
/* Eingeklappt ist die Anmerkung nur ein Textknopf und steht NEBEN den Fristfeldern —
   erst mit ausgeklapptem Feld nimmt sie eine eigene Zeile ein. Eine dauerhaft eigene
   Zeile kostete 20 px an JEDER Karte, ohne etwas zu zeigen. */
.anlw-obl-note { flex: 0 0 auto; align-self: flex-end; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-bottom: 8px; }
.anlw-obl-note:has(.cmp-add-note:not([hidden])) { flex: 1 1 100%; align-self: stretch; padding-bottom: 0; }
.anlw-obl-note .cmp-add-note { width: 100%; height: auto; min-height: 52px; font-size: var(--text-sm); }
.anlw-obl-note .anlw-obl-notel { font-size: var(--text-xxs); font-weight: 600; color: var(--text-muted, #5F6B66); margin-bottom: 0; }

/* Fuß: bleibt beim Scrollen sichtbar. */
/* Aktionszeile des Assistenten: nur Knöpfe, KEIN eigener Kasten.
   Vorher: weißer Hintergrund + Rahmen + sticky — das stand als heller Block gegen den
   Dialoghintergrund und sah aus wie ein zweites Bedienfeld. Jetzt trägt die Zeile nur
   eine feine Trennlinie und liegt auf dem Dialoghintergrund. */
.anlw-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px;
  margin-top: 18px; padding-top: 14px; background: none; border: none;
  border-top: 1px solid var(--border-light, #D8DFDC); }

/* ── DIALOGSCHALE DES ASSISTENTEN (10.09.2026) ────────────────────────────────
   Nur der Inhalt scrollt; Titelzeile, Schrittleiste und Aktionszeile stehen.
   Der Standarddialog (`.modal`) ist 480 px breit und scrollt als GANZES — für Schritt 3
   zu schmal, und beim Scrollen wanderte der Titel aus dem Bild. Die Klasse hängt nur an
   DIESEM Assistenten (`_anlNewWizard` setzt sie, `closeModal` nimmt sie ab); die rund 56
   anderen Masken des Singletons bleiben unberührt. */
.modal.modal-anlw {
  width: 880px;
  max-width: calc(100vw - 32px);
  max-height: min(88vh, 900px);
  display: flex; flex-direction: column; overflow: hidden;
}
.modal.modal-anlw > .modal-header { flex: 0 0 auto; }
.modal.modal-anlw > .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.modal.modal-anlw .anlw { display: flex; flex-direction: column; min-width: 0; }
/* Schrittleiste oben und Aktionszeile unten bleiben im Blick, ohne dass der Inhalt
   umgebaut werden muss (die Fußzeile steckt je Schritt in einem anderen Panel). */
.modal.modal-anlw .anlw-steps {
  position: sticky; top: calc(var(--space-5, 20px) * -1); z-index: 2;
  background: var(--color-surface, #fff);
  padding-block: var(--space-2, 8px); margin-block: calc(var(--space-2, 8px) * -1) var(--space-3, 12px);
}
.modal.modal-anlw .anlw-foot {
  position: sticky; bottom: calc(var(--space-5, 20px) * -1); z-index: 2;
  background: var(--color-surface, #fff);
  margin-bottom: calc(var(--space-5, 20px) * -1);
  padding-bottom: var(--space-4, 16px);
}
/* DIE ZUSÄTZLICHE BREITE GEHT IN DIE FELDER, NICHT IN EINE DRITTE SPALTE.
   Eine dritte Spalte wurde ausprobiert und wieder verworfen: „Kennzeichnung" hat zwei
   Felder, „Zuordnung" drei (das dritte spannt ohnehin über alles) — es entstanden 1/3
   breite Felder und eine leere Spalte daneben, also genau der Leerraum, den die Breite
   vermeiden soll. Bei zwei Spalten misst ein Feld jetzt 410 statt 230 px; davon lebt
   die Anlagenbezeichnung, die den Anlass für die Verbreiterung gegeben hat.
   Die Maßnahmenkarten nutzen die Breite ohnehin: Turnus, Fälligkeit und der Weg zur
   Anmerkung stehen nebeneinander statt untereinander. */
@media (min-width: 860px) {
  .modal.modal-anlw .cmp-pick-list { max-height: 38vh; }
}

@media (max-width: 900px) {
  .modal.modal-anlw { width: calc(100vw - 32px); }
}
@media (max-width: 620px) {
  .anlw-grid { grid-template-columns: 1fr; }
  .anlw-foot { flex-direction: column-reverse; }
  .anlw-foot .btn { width: 100%; justify-content: center; }
  /* Mobil nahezu volle Bildschirmbreite — das Fensterpolster bleibt, damit der Dialog
     als Fläche erkennbar ist. */
  .modal.modal-anlw { width: calc(100vw - 16px); max-width: calc(100vw - 16px); max-height: calc(100vh - 24px); }
  .modal.modal-anlw .anlw-obl-b { margin-left: 0; }
}

/* ── Assistent Schritt 1+2: Standortzeile, Suche, Katalogliste ─────────────
   Die Trefferliste lief vorher waagerecht über (drei Angaben in einer Zeile) und
   schnitt Texte ab. Jetzt zweizeilig mit Ellipsis, gruppiert nach fachlicher Ebene,
   genau EIN senkrechter Scrollbereich und KEIN waagerechter. */
.anlw-ctx { display: flex; align-items: baseline; gap: 8px; flex-wrap: nowrap; min-width: 0;
  padding: 9px 12px; margin-bottom: 14px; background: var(--bg-tertiary, #FAFBFA);
  border: 1px solid var(--border-light, #D8DFDC); border-radius: var(--radius-lg, 10px); }
.anlw-ctx-l { font-size: var(--text-xxs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted, #5F6B66); flex: 0 0 auto; }
.anlw-ctx-n { font-size: var(--text-sm); font-weight: 650; color: var(--text-primary, #141A17); flex: 0 0 auto; }
.anlw-ctx-p { font-size: var(--text-xs); color: var(--text-muted, #5F6B66); flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anlw-ctx-x { flex: 0 0 auto; border: none; background: none; font: inherit; font-size: var(--text-xs);
  color: var(--accent, #147352); cursor: pointer; text-decoration: underline; padding: 0; }

/* Das Suchfeld des Assistenten ist seit dem 10.09.2026 das ZENTRALE Primitive
   (`VISearchField` → `.vi-search`). Die frühere Eigenkonstruktion legte die Lupe
   ABSOLUT über das Feld und hielt sie mit `padding-left: 36px` frei — und genau dieses
   Polster verlor sie: `vi-dialog.js` gibt jedem `.modal-overlay` die Klasse `.vi-dlg`,
   und `.vi-dlg .form-input { padding: var(--space-2) var(--space-3) }` (vi-canonical.css)
   hat dieselbe Spezifität, steht aber später in der Kaskade. Gemessen: 12 px statt 36 px
   → die Lupe lag auf dem Platzhaltertext. Das Primitive kann nicht überlappen: es ist
   ein Flex-Container, Lupe und Eingabe stehen NEBENeinander.
   Regeln für `.anlw-search*` sind ersatzlos entfallen — nicht wieder anlegen. */

.cmp-pick-list { max-height: 46vh; overflow-y: auto; overflow-x: hidden; margin-top: 10px;
  border: 1px solid var(--border-light, #D8DFDC); border-radius: var(--radius-lg, 10px);
  background: var(--bg-secondary, #fff); }
.cmp-pick-g { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; background: var(--bg-tertiary, #EFF2F1);
  border-bottom: 1px solid var(--border-light, #D8DFDC);
  font-size: var(--text-xxs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted, #5F6B66); }
.cmp-pick-gn { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.cmp-pick { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0;
  padding: 9px 12px; border: none; border-bottom: 1px solid var(--border-subtle, #EFF2F1);
  background: none; cursor: pointer; font-family: inherit; text-align: left;
  transition: background .12s ease; }
.cmp-pick:last-child { border-bottom: none; }
.cmp-pick:hover { background: var(--bg-tertiary, #FAFBFA); }
.cmp-pick:focus-visible { outline: none; background: var(--bg-tertiary, #FAFBFA);
  box-shadow: inset 0 0 0 2px var(--accent, #147352); }
.cmp-pick.is-sel { background: var(--vi-green-soft, #EDF7F2); box-shadow: inset 3px 0 0 var(--accent, #147352); }
.cmp-pick-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cmp-pick-name { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary, #141A17);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-pick-meta { font-size: var(--text-xxs); color: var(--text-muted, #5F6B66);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-pick .cmp-type-badge { flex: 0 0 auto; }
.cmp-pick-empty { padding: 22px 14px; text-align: center; font-size: var(--text-sm); color: var(--text-secondary, #3A4441); }

/* Anlegen direkt aus einer Auswahlliste (leerer Zustand) — verhindert die Sackgasse
   „nicht gefunden" mitten in einem Anlegevorgang. */
.vi-pick-create { display: flex; align-items: center; gap: 7px; padding: 8px 10px;
  border-top: 1px solid var(--border-light, #D8DFDC); background: var(--bg-tertiary, #FAFBFA); }
.vi-pick-create-i { flex: 1 1 auto; min-width: 0; height: 34px; border-radius: var(--radius-md); }
.vi-pick-create .btn { flex: 0 0 auto; white-space: nowrap; }
/* Rückmeldung AM Feld (WART-07): Die Hauptaktion darf nie schweigen. Fehlende Eingabe
   ist eine Pflichtangabe und steht deshalb in Markenfarbe — rot bleibt echten Fehlern
   vorbehalten. Die Zeile belegt nur Platz, wenn sie etwas zu sagen hat. */
.vi-pick-create-hint { padding: 0 10px; font-size: var(--text-xs); line-height: 1.45; }
.vi-pick-create-hint.is-need { padding-bottom: 8px; color: var(--color-sage, #147352); }
.vi-pick-create-hint.is-err { padding-bottom: 8px; color: var(--color-danger-ink, #A32C22); }
.vi-pick-create-i.is-missing { border-color: var(--color-sage, #147352); }
/* Dialog-Betriebsart (WART-07): kein Inline-Feld, nur der Knopf — zentriert statt
   links klebend, weil er allein in der Zeile steht. */
.vi-pick-create-dialog { justify-content: center; }

/* ── Objektetikett „Ort · Objekt · Unterebene" (VIObjectLabel, G-03) ─────────
   EIN Aussehen für den Objektbezug jeder Listenzeile. Der fehlende Bezug ist ein
   Datenmangel und wird gedämpft, aber sichtbar benannt; ein Ort, der nur aus der
   Strukturgruppe stammt (dq), sieht bewusst NICHT anders aus — die Herkunft steht
   im Tooltip-Pfad, die Zeile bleibt ruhig. */
.vi-objlabel { color: inherit; }
.vi-objlabel--none { color: var(--gray-500, #5F6B66); font-style: italic; }
/* Feedback #3 §1.3: historische Verknüpfungen bleiben lesbar, sagen aber an, dass
   ihr Ort nicht mehr bewirtschaftet wird. Ruhig, nicht alarmierend — archiviert ist
   kein Fehler, sondern ein Zustand. */
.vi-objlabel-arch { margin-left: 6px; font-size: var(--text-xs, 12px); color: var(--gray-500, #5F6B66); white-space: nowrap; }
.vi-objlabel--archived { color: var(--gray-500, #5F6B66); }

/* ═══════════════════════════════════════════════════════════════════════════
   TICKET → BESTEHENDEM VORGANG ZUORDNEN  (.tklc-*)
   ───────────────────────────────────────────────────────────────────────────
   Diese Regeln standen bis 25.08.2026 als 29-Zeilen-Stylesheet IN JavaScript
   (`_tklcStyleOnce`), mit Hex-Rückfallwerten an der Token-Schicht vorbei. Solche
   Regeln altern nicht mit dem Designsystem mit: ein Farbwechsel erreicht sie
   nicht, und niemand findet sie beim Suchen in den CSS-Dateien.
   Die Dialogschale selbst kommt aus dem Standard (.vi-dlg / .vi-dlg--wide) —
   hier steht nur, was diese eine Auswahl zusätzlich braucht.
   ═══════════════════════════════════════════════════════════════════════════ */
.tklc-modal-content .modal-body { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.tklc-tabs { margin-bottom: var(--space-3, 12px); flex-shrink: 0; }
.tklc-tabpane { min-height: 0; overflow: auto; flex: 1; }
.tklc-search { margin-bottom: var(--space-2, 8px); }
.tklc-filters { display: flex; gap: var(--space-2, 8px); flex-wrap: wrap; margin-bottom: var(--space-2, 8px); }
.tklc-filters .form-select { min-width: 140px; flex: 1 1 140px; }
.tklc-chips {
  display: flex; gap: var(--space-4, 16px); flex-wrap: wrap; align-items: center;
  font-size: var(--text-sm, 13px); margin-bottom: var(--space-2, 8px);
}
.tklc-results { display: flex; flex-direction: column; gap: var(--space-2, 8px); }

/* Trefferkarte: dieselbe ruhige Fläche wie überall — Rahmen zeigt Auswahl, nicht
   Wichtigkeit. Hover ist neutral, erst die Markenfarbe bedeutet „gewählt". */
.tklc-card {
  border: 1px solid var(--gray-300, #D8DFDC); border-radius: var(--radius-lg, 12px);
  padding: var(--space-3, 12px); display: flex; gap: var(--space-3, 12px);
  justify-content: space-between; align-items: flex-start;
  background: var(--color-surface, #fff);
  transition: border-color var(--transition, 150ms ease), background var(--transition, 150ms ease);
}
.tklc-card:hover { border-color: var(--brand-primary, #128054); background: var(--green-50, #EDF7F2); }
.tklc-card-main { min-width: 0; flex: 1; }
.tklc-card-head { display: flex; gap: var(--space-2, 8px); align-items: center; flex-wrap: wrap; }
.tklc-card-title { font-weight: var(--fw-semibold, 600); margin: var(--space-1, 4px) 0 2px; }
.tklc-card-desc {
  margin-top: 3px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  color: var(--gray-500, #5F6B66); font-size: var(--text-sm, 13px);
}
.tklc-reasons { margin-top: var(--space-1, 4px); display: flex; gap: var(--space-1, 4px); flex-wrap: wrap; }
.tklc-pick-btn { flex-shrink: 0; align-self: center; }
.tklc-empty, .tklc-loading {
  padding: var(--space-5, 24px) var(--space-4, 16px); text-align: center; color: var(--gray-500, #5F6B66);
}
.tklc-pick { border: 1px solid var(--brand-primary, #128054); border-radius: var(--radius-lg, 12px); padding: var(--space-4, 16px); }

@media (max-width: 600px) {
  .tklc-filters .form-select { flex-basis: 100%; }
  .tklc-card { flex-direction: column; align-items: stretch; }
  .tklc-pick-btn { align-self: stretch; }
}