/* ═══════════════════════════════════════════════════════════════════════════════════
   ROLLE (UX-Phase 9 §3): FACHSCHICHT der Vorgangs-Arbeitsansicht und des Cockpits.
   ───────────────────────────────────────────────────────────────────────────────────
   Der Dateiname stammt aus einer früheren Generation („Premium-Optik") und beschreibt
   den Inhalt nicht mehr: hier steht die Darstellung des Vorgangs-Arbeitsplatzes
   (`workspace-*`, `meta-*`), der Cockpit-Kennzahlen (`ckpi-*`) und einiger
   Vorgangslisten. Sie ist damit eine gewöhnliche Fachschicht — KEINE zweite
   Designsystem-Ebene: Tokens kommen aus `css/design-system.css`.

   Am 03.09.2026 sind 52 Regelblöcke ohne Erzeuger entfernt worden. Neue Regeln
   gehören in die Datei des jeweiligen Moduls, nicht hierher.
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   VICORE PREMIUM LAYER — Editorial-SaaS-Veredelung innerhalb der VICore-CI.
   Keine neuen Marken­farben/Fonts. Nutzt ausschließlich die zentralen Tokens
   (--vi-*, --color-*, --space-*, --radius-*, --shadow-*). Hebt Hierarchie,
   Komposition, Tiefe, Weißraum und Motion auf Premium-Niveau.
   Lädt NACH style.css/handover.css → gezielte Aufwertung bestehender Klassen.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --vi-rail: 3px;                /* Akzentkante an Karten */
  --vi-lift: -2px;              /* Hover-Anhebung */
  --vi-ease: cubic-bezier(.22,.61,.36,1);
  --vi-hero-grad: radial-gradient(120% 140% at 0% 0%, var(--color-surface) 0%, var(--vi-cream) 46%, #F4F1E8 100%);
}

/* ── Sanfte Atmosphäre im Inhaltsbereich (warm, dezent) ───────────────────── */
.content.page { background:
   radial-gradient(80% 60% at 100% -10%, rgba(19,109,57,.035), transparent 60%),
   radial-gradient(60% 50% at -10% 0%, rgba(133,127,115,.05), transparent 55%);
}

/* ═══ COCKPIT-HERO (groß, repräsentativ – nur das Cockpit) ═════════════════ */
.cockpit-topbar {
  position: relative;
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6);
  padding: 30px 30px 22px;
  margin: -4px -4px 24px;
  background: var(--vi-hero-grad);
  border: 1px solid var(--vi-border);
  border-radius: var(--vi-r-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.cockpit-topbar::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--vi-green), var(--vi-green-deep));
}
.cockpit-topbar::after {
  content: ""; position: absolute; right: -60px; top: -80px; width: 220px; height: 220px;
  border-radius: 50%; border: 28px solid rgba(19,109,57,.04); pointer-events: none;
}
.cockpit-topbar .page-title { font-family: var(--vi-font-display); font-size: 30px; line-height: 1.1; font-weight: 600; letter-spacing: -.01em; color: var(--vi-ink); }
.cockpit-topbar .page-subtitle { font-family: var(--vi-font-ui); font-size: var(--text-md); color: var(--vi-ink-70); margin-top: 6px; max-width: 60ch; }

/* ═══ KOMPAKTE PAGE-TOOLBAR (Listen-/Arbeitsseiten: Vorgänge, Abnahmen, …) ══ */
/* Schlanke Kopfzeile statt großer Hero-Fläche → Tabelle gewinnt Platz. */
.page-header {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: 12px 20px 12px 22px;
  margin: 0 0 16px;
  background: linear-gradient(180deg, var(--color-surface), var(--vi-cream));
  border: 1px solid var(--vi-border);
  border-radius: var(--vi-r-lg);
  box-shadow: var(--shadow-xs);
  min-height: 60px;
}
.page-header::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 4px;
  background: linear-gradient(180deg, var(--vi-green), var(--vi-green-deep));
}
.page-title { font-family: var(--vi-font-display); font-size: var(--text-xl); line-height: 1.15; font-weight: 600; letter-spacing: -.01em; color: var(--vi-ink); }
.page-subtitle { font-family: var(--vi-font-ui); font-size: var(--text-sm); color: var(--vi-muted); margin-top: 1px; max-width: 60ch; }

/* ═══ SECTION-HEADER (Rule + Label) ═══════════════════════════════════════ */
.cck-section-header,
.tab-section-header {
  align-items: center;
}
.cck-section-title,
.tab-section-title {
  font-family: var(--vi-font-display); font-weight: 600; letter-spacing: -.01em; color: var(--vi-ink);
}

/* ═══ KARTEN ══════════════════════════════════════════════════════════════
   Konsolidierung 16.08.2026: Diese Datei setzt an Karten nur noch Fläche und
   Radius. Rahmen kommt aus style.css, die Harmonisierung über alle Modul-
   Kartenklassen aus vi-canonical.css §15. Schatten und Hover-Schatten sind
   entfallen — eine Karte gruppiert, sie schwebt nicht. */
.card, .panel, .cck-section, .ckpi-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  transition: border-color .2s var(--vi-ease);
}

/* ═══ STAT-TILES (Cockpit-KPIs neu inszeniert) ════════════════════════════ */
.cockpit-kpi-bar { gap: 16px; }
.ckpi-card-clickable { cursor: pointer; }
.ckpi-card-clickable:hover { transform: translateY(var(--vi-lift)); box-shadow: var(--shadow-lg); border-color: var(--vi-green-soft); }
.ckpi-label {
  grid-column: 1; grid-row: 1;
  font-family: var(--vi-font-ui); font-size: var(--text-xxs); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--vi-muted);
}
.ckpi-value {
  grid-column: 1; grid-row: 2;
  font-family: var(--vi-font-display); font-weight: 600; font-size: 38px; line-height: 1.05;
  letter-spacing: -.02em; color: var(--vi-ink); font-feature-settings: "tnum" 1;
}
.ckpi-icon {
  grid-column: 2; grid-row: 1 / span 1; width: 38px; height: 38px; border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  background: var(--vi-green-soft); color: var(--vi-green-deep);
}
.ckpi-icon svg { width: 19px; height: 19px; }
.ckpi-val-ok { color: var(--vi-success); }
.ckpi-val-err { color: var(--vi-error); }
/* Warn-Zustand: bernsteinfarbene Kante + zarter Tint */
.ckpi-card-warn::before { background: var(--vi-warning); }
.ckpi-card-warn .ckpi-icon { background: var(--vi-warning-soft); color: var(--color-warning-ink); }
.ckpi-card-warn { background: linear-gradient(180deg, #FFFDF8, var(--bg-secondary) 60%); }
/* Crit-Zustand: rote Kante + zarter roter Tint (überfällig/kritisch) */
.ckpi-card-crit::before { background: var(--vi-error); }
.ckpi-card-crit .ckpi-icon { background: var(--vi-error-soft); color: var(--vi-error); }
.ckpi-card-crit { background: linear-gradient(180deg, #FFF7F5, var(--bg-secondary) 60%); }
/* Neutral-Zustand: graue Kante (rein informativ, keine Bewertung) */
.ckpi-card-neutral::before { background: #AEB6B0; opacity: .8; }

/* IDs / Nummern in Inter (tabular-nums) */
.vi-mono, .cck-case-nr, .ckpi-card .vi-mono { font-family: var(--vi-font-mono); letter-spacing: -.02em; }

/* ═══ EMPTY / LOADING STATES (hochwertig, ruhig) ══════════════════════════ */
.cck-empty, .empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 40px 20px; color: var(--vi-ink-70); gap: 4px;
}
.cck-empty svg, .empty-state-icon { color: var(--vi-green); opacity: .85; }
.cck-empty > svg {
  width: 46px; height: 46px; padding: 12px; border-radius: var(--radius-xl);
  background: var(--vi-green-soft); margin-bottom: 8px;
}
.cck-loading {
  position: relative; padding: 24px; text-align: center; color: var(--vi-muted);
  font-family: var(--vi-font-ui); font-size: var(--text-sm);
}
.cck-loading::after {
  content: ""; display: block; width: 60%; max-width: 240px; height: 8px; margin: 14px auto 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--vi-sand) 0%, #EDEAE0 50%, var(--vi-sand) 100%);
  background-size: 200% 100%; animation: vi-shimmer 1.2s linear infinite;
}
@keyframes vi-shimmer { to { background-position: -200% 0; } }

/* ═══ MOTION: orchestriertes Einblenden beim Seitenwechsel ════════════════ */
/* WICHTIG: fill-mode = backwards (NICHT both/forwards). „both" hinterlässt nach
   Ende eine Identitäts-Transform-Matrix → jedes Kind würde zum Stacking-Context
   und würde u. a. das Objekt-Dropdown verdecken. „backwards" hält nur den
   Startzustand während des Delays und kehrt danach in den natürlichen Zustand
   (kein transform) zurück. */
@media (prefers-reduced-motion: no-preference) {
  .content.page.active > * { animation: vi-rise .5s var(--vi-ease) backwards; }
  .content.page.active > *:nth-child(1) { animation-delay: .02s; }
  .content.page.active > *:nth-child(2) { animation-delay: .08s; }
  .content.page.active > *:nth-child(3) { animation-delay: .14s; }
  .content.page.active > *:nth-child(4) { animation-delay: .20s; }
  .content.page.active > *:nth-child(5) { animation-delay: .26s; }
  .vi-today-rail > *, .cockpit-kpi-bar > * { animation: vi-rise .5s var(--vi-ease) backwards; }
  .cockpit-kpi-bar > *:nth-child(2){ animation-delay:.04s } .cockpit-kpi-bar > *:nth-child(3){ animation-delay:.08s }
  .cockpit-kpi-bar > *:nth-child(4){ animation-delay:.12s } .cockpit-kpi-bar > *:nth-child(5){ animation-delay:.16s } .cockpit-kpi-bar > *:nth-child(6){ animation-delay:.2s }
}
@keyframes vi-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ═══ FEINSCHLIFF: Scrollbar, Fokus, Selektion ════════════════════════════ */
* { scrollbar-width: thin; scrollbar-color: var(--vi-roof-gray) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #D7D1C4; border-radius: var(--radius-pill); border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--vi-roof-gray); background-clip: content-box; }
::selection { background: var(--vi-green-soft); color: var(--vi-green-deep); }
:focus-visible { outline: 2px solid var(--vi-green); outline-offset: 2px; border-radius: 4px; }

/* Arbeitsbereich: warmer Grund statt kaltes Grau */
.workspace-main {
  background:
    radial-gradient(90% 55% at 100% 0%, rgba(19,109,57,.035), transparent 60%),
    var(--vi-cream);
}

/* Kontextspalte entfallen → Arbeitsbereich einspaltig über die volle Breite */
.workspace-body { grid-template-columns: 1fr; }

/* Premium-Tabs (klare grüne Aktiv-Führung) */
.workspace-tabs { background: var(--color-surface); padding: 0 24px; gap: 2px; }
.workspace-tabs .case-tab-button {
  font-family: var(--vi-font-ui); font-weight: 600; color: var(--vi-muted);
  border-radius: 9px 9px 0 0; border-bottom-width: 2.5px;
}
.workspace-tabs .case-tab-button:hover { color: var(--vi-ink); background: var(--vi-sand); }
.workspace-tabs .case-tab-button.active { color: var(--vi-green-deep); border-bottom-color: var(--vi-green); }
.case-tab-count { background: var(--vi-green-soft); color: var(--vi-green-deep); font-family: var(--vi-font-mono); }

/* Abschnittstitel im Arbeitsbereich */
.workspace-section-title { font-family: var(--vi-font-display); color: var(--vi-ink); }

/* Timeline inszeniert: Sprechblasen-Karten an der Achse */
.case-timeline-body {
  background: var(--color-surface); border: 1px solid var(--vi-border); border-radius: var(--radius-lg);
  padding: 11px 14px; box-shadow: var(--shadow-xs);
}
.case-timeline-dot.tl-contact  { background: var(--vi-info-soft); border-color: var(--vi-info-soft); color: var(--vi-info); }
.case-timeline-dot.tl-reminder { background: var(--vi-warning-soft); border-color: var(--color-warning-soft); color: var(--color-warning-ink); }

/* Beteiligte/Listen: dezente Hover-Anhebung */
.case-list-item, .case-contact-item {
  transition: transform .15s var(--vi-ease), box-shadow .15s var(--vi-ease), border-color .15s;
}
.case-list-item:hover, .case-contact-item:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: var(--vi-green-soft); }

/* ═══ RESPONSIV ═══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .page-header, .cockpit-topbar { flex-direction: column; align-items: stretch; gap: 16px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
   VORGANGS-TABS — Premium für ALLE Tabs (Übersicht · Notizen · Aufgaben ·
   Wiedervorlagen · Beteiligte · Kommunikation · Dokumente)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hinweis: Selektoren unter `.case-tab-content` gescoped, um die in style.css
   unter `.workspace-tab-contents …` definierten Regeln (höhere Spezifität)
   sicher zu überschreiben. `.case-tab-content` liegt auf JEDEM Tab-Panel
   (Modal UND Workspace). */

/* ── Gemeinsame Listen & Karten ─────────────────────────────────────────── */
.case-tab-content .case-list { display: flex; flex-direction: column; gap: 10px; }
.case-tab-content .case-list-item {
  position: relative; background: var(--color-surface); border: 1px solid var(--vi-border);
  border-radius: var(--radius-lg); padding: 14px 16px; box-shadow: var(--shadow-xs);
}
.case-tab-content .case-list-item-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.case-tab-content .case-list-item-type, .case-tab-content .case-activity-type {
  font-family: var(--vi-font-ui); font-size: var(--text-xxs); font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--vi-green-deep);
}
.case-tab-content .case-list-item-date { font-family: var(--vi-font-mono); font-size: var(--text-xxs); color: var(--vi-muted); }
.case-tab-content .case-list-item-text { font-size: var(--text-sm); color: var(--vi-ink); line-height: 1.55; }
.case-tab-content .case-list-item-tag { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--vi-r-pill);
  font-size: var(--text-xxs); font-weight: 600; background: var(--vi-sand); color: var(--vi-ink-70); }
.form-label { font-family: var(--vi-font-ui); font-weight: 600; font-size: var(--text-xs); color: var(--vi-ink-70); letter-spacing: .01em; }
.form-input:focus, .form-select:focus { border-color: var(--vi-green); box-shadow: 0 0 0 3px var(--vi-green-soft); }

/* ── NOTIZEN ────────────────────────────────────────────────────────────── */
.case-tab-content .case-note-item { padding-left: 18px; }
.case-tab-content .case-note-item::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px;
  border-radius: 3px; background: var(--vi-green-soft);
}
.case-tab-content .case-note-item.is-phone-note::before { background: var(--vi-info); }
.case-tab-content .case-note-contact { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 6px;
  font-size: var(--text-xs); color: var(--vi-info); background: var(--vi-info-soft); padding: 4px 10px; border-radius: var(--vi-r-pill); }
.case-tab-content .case-note-contact-label { color: var(--vi-ink-70); font-weight: 600; }
.case-tab-content .case-note-contact-value { color: var(--vi-ink); font-weight: 600; }
/* ── BETEILIGTE (Kontaktkarten) ─────────────────────────────────────────── */
.case-tab-content .case-contact-avatar {
  width: 38px; height: 38px; border-radius: var(--radius-lg); flex-shrink: 0;
  background: linear-gradient(135deg, var(--vi-green), var(--vi-green-deep)); color: var(--color-surface);
  display: flex; align-items: center; justify-content: center; font-family: var(--vi-font-display); font-weight: 600; font-size: var(--text-base);
}
.case-tab-content .case-contact-name { font-weight: 600; color: var(--vi-ink); }
.case-tab-content .case-contact-link { color: var(--vi-green); }
.case-tab-content .case-contact-link:hover { color: var(--vi-green-deep); }

/* ── KOMMUNIKATION (E-Mail ↔ Vorgang) ───────────────────────────────────── */
.case-tab-content .comm-row {
  background: var(--color-surface); border: 1px solid var(--vi-border); border-radius: var(--radius-lg);
  margin-bottom: 9px; box-shadow: var(--shadow-xs); overflow: hidden;
  transition: box-shadow .15s var(--vi-ease), border-color .15s;
}
.case-tab-content .comm-row:hover { box-shadow: var(--shadow-md); border-color: var(--vi-green-soft); }
.case-tab-content .comm-rowmain { padding: 13px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.case-tab-content .comm-subject { font-weight: 600; color: var(--vi-ink); }
.case-tab-content .comm-preview, .case-tab-content .comm-from, .case-tab-content .comm-to { color: var(--vi-ink-70); }
.case-tab-content .comm-date { font-family: var(--vi-font-mono); font-size: var(--text-xxs); color: var(--vi-muted); }
.case-tab-content .email-dir { font-size: var(--text-xxs); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: var(--vi-r-pill); }
.case-tab-content .email-dir-in  { background: var(--vi-info-soft); color: var(--vi-info); }
.case-tab-content .email-dir-out { background: var(--vi-green-soft); color: var(--vi-green-deep); }

/* ── DOKUMENTE (Tabelle premium; Karten-Redesign folgt) ─────────────────── */
.case-tab-content .doc-name-line { font-weight: 600; color: var(--vi-ink); }
.case-tab-content .doc-ext-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: 3px 7px;
  border-radius: var(--radius-sm); font-family: var(--vi-font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase;
  background: var(--vi-green-soft); color: var(--vi-green-deep);
}
.case-tab-content .doc-desc-empty { color: var(--vi-muted); font-style: italic; }
.case-tab-content .doc-act-btn {
  width: 30px; height: 30px; border-radius: var(--radius-md); background: transparent; color: var(--vi-muted);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid transparent;
  transition: background .15s, color .15s;
}
.case-tab-content .doc-act-btn:hover { background: var(--vi-sand); color: var(--vi-green-deep); }

/* ── Empty-State innerhalb der Tabs ─────────────────────────────────────── */
.case-empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 18px 16px; color: var(--vi-ink-70); gap: 3px;            /* Stage 6: kompakter Leerzustand */
}
.case-empty-state svg { color: var(--vi-green); }/* Hochwertige Leerzustand-Karte mit Icon + Inline-Aktionen (z. B. Kommunikation) */
.case-empty-state-rich {
  border: 1px solid var(--vi-border); border-radius: var(--vi-r-lg, 12px); background: var(--color-surface);
  padding: 26px 20px; gap: 6px; max-width: 460px; margin: 6px auto 0;
}
.case-empty-state-ic {
  width: 44px; height: 44px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center;
  background: var(--vi-green-soft, #EAF3EC); color: var(--vi-green-deep, #0F5C42); margin-bottom: 4px;
}
.case-empty-state-rich .case-empty-state-hint { max-width: 360px; }
.case-empty-state-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.case-tasks-title, .tab-section-title { font-family: var(--vi-font-display); color: var(--vi-ink); }

/* ═══════════════════════════════════════════════════════════════════════════
   VORGANGSMASKE IA-REWORK — Kopf (editierbar) · Kontextleiste · Sachstand
   ═══════════════════════════════════════════════════════════════════════════ */
/* Editierbarer Titel im Kopf */
.vi-editable-title { cursor: text; border-radius: var(--radius-md); transition: background .15s var(--vi-ease); margin-left: -6px; padding: 0 6px; }
.vi-editable-title:hover { background: var(--vi-sand); box-shadow: inset 0 -2px 0 var(--vi-green-soft); }
.vi-editable-title.is-editing { background: transparent; box-shadow: none; }
.vi-title-input {
  font: inherit; color: inherit; width: 100%; max-width: 640px; border: 2px solid var(--vi-green);
  border-radius: var(--radius-lg); padding: 2px 10px; background: var(--color-surface); box-shadow: 0 0 0 3px var(--vi-green-soft);
}

/* Kategorie-Chip-Menü (gruppiert, scrollbar) + Owner-Chip */
.meta-menu-scroll { max-height: 320px; overflow-y: auto; min-width: 280px; }
.meta-menu-group {
  font-family: var(--vi-font-ui); font-size: var(--text-xxs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--vi-muted); padding: 10px 12px 4px; position: sticky; top: 0; background: var(--color-surface);
}
.meta-chip-owner { background: var(--vi-sand); color: var(--vi-ink-70); }
/* Besitzer-Chip ist editierbar (Muster wie Art/Bereich); bei gesetztem Besitzer etwas präsenter. */
.meta-chip-owner.meta-chip-edit { cursor: pointer; }
.meta-chip-owner.is-set { background: var(--vi-green-tint, #EDF7F2); border-color: var(--vi-green-soft, #EDF7F2); }
.meta-chip-owner.is-set .meta-chip-value { font-weight: 600; color: var(--vi-ink-70); }
.meta-chip-category.meta-chip-edit { cursor: pointer; }
/* Kopf-Objektchip: Kurzname sichtbar, gekappt mit Ellipse (voller Pfad im Tooltip) — kein Überlauf */
.meta-chip-object .meta-chip-object-name { display: inline-block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
@media (max-width: 1100px) { .meta-chip-object .meta-chip-object-name { max-width: 180px; } }

/* Sidebar „Objekt"-Karte: nie über den Kartenrand hinaus (lange Namen/Pfade umbrechen) */
.workspace-object { min-width: 0; max-width: 100%; }
.workspace-object-text { min-width: 0; flex: 1 1 auto; }
.workspace-object-name { overflow-wrap: anywhere; word-break: break-word; }
.workspace-object-path { overflow-wrap: anywhere; }
.workspace-object-edit { flex: 0 0 auto; }

/* ── Durchsuchbare Kopf-Menüs (Art/Bereich/Kategorie) — gleiche Suchlogik wie alle Picker ── */
.meta-edit-menu.has-search { padding: 0; min-width: 264px; overflow: hidden; }
.meta-menu-searchbar { position: relative; padding: 8px 8px 7px; border-bottom: 1px solid var(--vi-border, #D8DFDC); background: var(--color-surface); }
.meta-menu-search-ic { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--vi-muted, #5F6B66); pointer-events: none; }
.meta-menu-search {
  width: 100%; height: 32px; box-sizing: border-box; padding: 0 10px 0 30px;
  border: 1px solid var(--vi-border, #D8DFDC); border-radius: var(--radius-md); background: var(--color-surface);
  font: inherit; font-size: var(--text-sm); color: var(--vi-ink, #141A17);
}
.meta-menu-search::placeholder { color: var(--vi-muted, #5F6B66); }
.meta-menu-search:focus { outline: none; border-color: var(--vi-green, #12704B); box-shadow: 0 0 0 3px var(--vi-green-soft, rgba(62,142,84,.16)); }
.meta-edit-menu.has-search .meta-menu-list { padding: 5px; max-height: 300px; overflow-y: auto; min-width: 0; }
.meta-menu-empty { padding: 14px 12px; font-size: var(--text-xs); color: var(--vi-muted, #5F6B66); text-align: center; }

/* Die frühere Kontext-/Aktionsleiste ist entfallen — ihre Stile ebenfalls.
   BLEIBT: .vi-ctx-link wird weiterhin von „Alle N Vorgänge der Akte ›" (Übersicht) genutzt. */
.vi-ctx-link { background: none; border: none; color: var(--vi-green); font-weight: 600; font-size: var(--text-xs); cursor: pointer; padding: 2px 6px; border-radius: var(--vi-r-pill); }
.vi-ctx-link:hover { background: var(--vi-green-soft); }

/* Stammhistorie-Fußzeile der Übersicht (ersetzt die Karte „Verantwortung & Akte") */
.vi-ov-audit {
  margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--vi-border);
  font-size: var(--text-xxs); color: var(--vi-muted); line-height: 1.5; overflow-wrap: anywhere;
}
/* „Archiviert"-Zustand im Kopf (Zustand, KEIN Datum — das steht in der Fußzeile) */
.meta-chip-archived { background: var(--vi-sand); color: var(--vi-muted); border: 1px solid var(--vi-border); }
/* Überfällige Wiedervorlagen färben den Arbeit-Tab-Zähler.
   !important nötig: die Basisregel .case-tab-count (style.css) setzt Farbe/Hintergrund selbst
   mit !important — ohne das hier bliebe der Warnton wirkungslos. */
.case-tab-count.is-warn { background: var(--vi-error-soft) !important; color: var(--vi-error) !important; }
.vi-sachverhalt .stammdaten-desc { width: 100%; min-height: 200px; }
.vi-op-n.is-active { color: var(--vi-green-deep); }

/* ── Übersicht als READ-ONLY Aktenzusammenfassung (kein Bearbeitungsformular) ──────── */
.vi-ov-readonly { display: flex; flex-direction: column; gap: 14px; }
.vi-ov-origin { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px;
  background: var(--vi-green-soft, #EAF3EC); border: 1px solid var(--vi-green-soft, #AFDCC6); border-radius: var(--radius-lg); font-size: var(--text-sm); }
.vi-ov-origin-label { font-weight: 700; color: var(--vi-green-deep, #0F5C42); }
.vi-ov-origin-text { color: var(--vi-ink); min-width: 0; }
.vi-sum-card { background: var(--color-surface); border: 1px solid var(--vi-border); border-radius: var(--vi-r-lg, 12px); padding: 14px 16px; min-width: 0; }
.vi-sum-card-title { font-family: var(--vi-font-ui); font-size: var(--text-xxs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--vi-muted); margin: 0 0 10px; }
.vi-sum-desc { font-size: var(--text-md); line-height: 1.6; color: var(--vi-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.vi-sum-empty { font-size: var(--text-sm); color: var(--vi-muted); font-style: italic; }
.vi-sum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .vi-sum-grid { grid-template-columns: 1fr; } }
.vi-sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--vi-sand, #EFF2F1); }
.vi-sum-row:last-child { border-bottom: none; }
.vi-sum-k { flex: 0 0 auto; font-size: var(--text-xs); color: var(--vi-muted); }
.vi-sum-v { flex: 1 1 auto; min-width: 0; text-align: right; font-size: var(--text-sm); font-weight: 500; color: var(--vi-ink); overflow-wrap: anywhere; }
.vi-sum-v.is-empty { color: var(--vi-muted); font-weight: 400; }
.vi-sum-unset { color: var(--vi-muted); font-weight: 400; }

/* Lösch-Auswirkung (kaskadierendes Löschen) */
.obj-cascade-list { margin: 8px 0 0; padding: 10px 14px 10px 28px; background: var(--vi-error-soft); border: 1px solid var(--color-danger-soft); border-radius: var(--vi-r-lg); }
.obj-cascade-list li { margin: 3px 0; font-size: var(--text-sm); color: var(--color-danger-ink); }
/* Optische Trennung der zusammengeführten Abschnitte */
.case-tab-content > .vi-subtab-sep,
.case-tab-content > .workspace-section-sep,
#case-tab-reminders.case-tab-content, #case-tab-communication.case-tab-content { }/* In der Workspace-Ansicht trennen die nachgelagerten Abschnitte (WV, E-Mail) sauber ab */
#workspace-tab-reminders.case-tab-content.active,
#workspace-tab-communication.case-tab-content.active { margin-top: 24px; }
.workspace-section-sep { border-top: 1px solid var(--vi-border); padding-top: 4px; }

/* Arbeitsansicht: offener „Akte"-Charakter statt verschachtelter Box-in-Box.
   Tab-Inhalt ist eine ruhige Fläche, einzelne Abschnitte ohne harte Kartenrahmen. */
.page-vorgang-detail .workspace-section { background: transparent; border: none; box-shadow: none; padding: 0; }
.page-vorgang-detail .workspace-form-card { padding: 15px 18px; }
/* Tab-Band kompakter (überschreibt das !important-Pill-Band) → Inhalt rückt hoch */
.page-vorgang-detail .workspace-tabs { margin-bottom: 8px !important; padding: 4px !important; gap: 3px !important; }
.page-vorgang-detail .workspace-tabs .case-tab-button { height: 32px !important; padding-left: 11px !important; padding-right: 11px !important; }
/* Tab-Inhalt + Listen dichter (mehr Mails/Dokumente/Aufgaben je Bildschirm) */
.page-vorgang-detail .workspace-tab-contents { padding: 12px 20px 18px; }
.page-vorgang-detail .tab-section-header { margin-bottom: 9px; padding-bottom: 9px; }
.page-vorgang-detail .workspace-tab-contents .case-list { gap: 5px; }
.page-vorgang-detail .workspace-tab-contents .case-list-item,
.page-vorgang-detail .workspace-tab-contents .case-task-card { padding: 8px 12px; }
/* ── Kontext-Sidebar: feste, ruhige Breite + GARANTIERT kein horizontaler Scrollbalken ──
   Wurzel des bisherigen Scroll-Bugs: `overflow-y:auto` lässt der Browser `overflow-x`
   automatisch zu `auto` rechnen → bei kleinstem Überlauf erscheint die horizontale Scrollbar
   und schneidet die Objektkarte an. Fix: `overflow-x:hidden` + durchgängig `min-width:0`/
   `max-width:100%` über die Flex-/Grid-Kette → Inhalte brechen um/kürzen, nichts läuft aus. */
.page-vorgang-detail .workspace-main { min-width: 0; }
/* Objektkarte: KEIN Text wird abgeschnitten — alle Zeilen brechen vollständig um.
   Scope BEWUSST auf .vi-sum-objcard (Übersicht-Karte „Objekt & Bezug") → gilt für
   Arbeitsansicht UND Kompakt-Modal, weil beide _renderCaseOverviewForm nutzen.
   Der Button ist von Natur aus inhaltsbreit (width:auto = max-content) und füllt die Karte
   NICHT → ohne width:100 % wird die Textspalte nicht begrenzt und am Rand geclippt.
   Fix: Button 100 %, Textspalte begrenzt (min-width:0), Zeilen mit vollem Umbruch (kein
   overflow:hidden, keine Ellipse, kein line-clamp). */
.vi-sum-objcard { min-width: 0; max-width: 100%; box-sizing: border-box; margin-bottom: 10px; }
.vi-sum-objcard .workspace-object {
  position: relative; width: 100%; box-sizing: border-box; min-width: 0; max-width: 100%;
  align-items: flex-start; padding-right: 24px;   /* Platz für den Stift (absolut, oben rechts) */
}
.vi-sum-objcard .workspace-object-icon { flex: 0 0 auto; }
.vi-sum-objcard .workspace-object-text { min-width: 0; flex: 1 1 auto; overflow: visible; }
.vi-sum-objcard .workspace-object-name,
.vi-sum-objcard .workspace-object-address,
.vi-sum-objcard .workspace-object-path {
  white-space: normal; overflow: visible; text-overflow: clip;
  overflow-wrap: anywhere; word-break: break-word; max-width: 100%;
}
/* Bearbeiten-Stift aus dem Textfluss nehmen → konkurriert nicht um die Zeilenbreite */
.vi-sum-objcard .workspace-object-edit {
  position: absolute; top: 9px; right: 7px; flex: 0 0 auto; margin: 0;
}

/* ── Mehrere Objekte je Vorgang: „Weitere Objekte"-Liste + Verknüpfen-Button ── */
.ws-obj-extra { margin-top: 9px; min-width: 0; }
.ws-obj-extra-label { font-size: var(--text-xxs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vi-muted); margin: 0 0 6px; }
.ws-obj-extra-row { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 5px 6px; border: 1px solid var(--vi-border); border-radius: var(--radius-md); background: var(--color-surface); margin-bottom: 5px; }
.ws-obj-extra-pin { flex: 0 0 auto; display: inline-flex; color: var(--vi-info, #31708F); }
.ws-obj-extra-pin svg { width: 13px; height: 13px; }
.ws-obj-extra-name { flex: 1 1 auto; min-width: 0; font-size: var(--text-xs); font-weight: 500; color: var(--vi-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-obj-extra-x { flex: 0 0 auto; width: 18px; height: 18px; line-height: 1; border: none; background: none; color: var(--vi-muted); cursor: pointer; border-radius: var(--radius-sm); font-size: var(--text-base); padding: 0; }
.ws-obj-extra-x:hover { background: var(--vi-error-soft, #FBEEEB); color: var(--vi-error, #C0392C); }
.ws-obj-add { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; padding: 6px 8px; width: 100%; justify-content: center;
  border: 1px dashed var(--vi-border); border-radius: var(--radius-md); background: none; color: var(--vi-green); font-size: var(--text-xs); font-weight: 600; cursor: pointer; }
.ws-obj-add:hover { background: var(--vi-green-soft); border-color: var(--vi-green-soft); }

/* ── Schnellerfassung (Telefon-Intake) — Vorgang/Ticket-Umschalter ── */
.qc-toggle { display: inline-flex; gap: 0; padding: 3px; background: var(--vi-sand, #EFF2F1); border: 1px solid var(--vi-border, #D8DFDC); border-radius: var(--radius-pill); margin-bottom: 6px; }
.qc-toggle-btn { border: none; background: transparent; padding: 6px 18px; border-radius: var(--radius-pill); font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--vi-muted, #5F6B66); cursor: pointer; transition: background .12s, color .12s; }
.qc-toggle-btn.is-active { background: var(--color-surface); color: var(--vi-green-deep, #0F5C42); box-shadow: 0 1px 2px rgba(40,30,20,.08); }
.qc-hint { font-size: var(--text-xs); color: var(--vi-muted, #5F6B66); margin: 0 0 12px; line-height: 1.4; }

/* „+N"-Badge am Kopf-Objektchip (weitere verknüpfte Objekte) */
.meta-chip-object .meta-chip-badge {
  flex: 0 0 auto; margin-left: 4px; padding: 0 6px; height: 16px; display: inline-flex; align-items: center;
  border-radius: var(--radius-pill); background: var(--vi-green-soft, #EDF7F2); color: var(--vi-green-deep, #0F5C42);
  font-size: var(--text-xxs); font-weight: 700;
}
.meta-chip-owner .meta-chip-value.is-unset { color: var(--vi-muted); font-weight: 500; }
@media (max-width: 1100px) {
  .page-vorgang-detail .workspace-tab-contents { padding: 12px 14px 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   VORGÄNGE-LISTE — kompakte Toolbar/Filter, Tabelle als Hauptbereich
   ═══════════════════════════════════════════════════════════════════════════ */
/* Objekt-Dropdown: immer ÜBER Tabellen/Sticky-Headern + breit genug für Namen
   (passt sich dem Inhalt an, mindestens Inputbreite, max. 460px → keine
   abgeschnittenen Objektnamen mehr). */
.vi-obj-picker-dropdown { z-index: 1500; right: auto; width: max-content; min-width: 100%; max-width: 460px; }

/* Kompakte Filterleiste statt großer Karte.
   z-index-Schichtung: Filterleiste (mit geöffnetem Objekt-Dropdown) liegt
   DEFINITIV über Zähler-Zeile und Tabelle – unabhängig von Stacking-Contexts,
   die durch Einblend-Transforms entstehen können. */
.cases-filter-bar.cfx {
  padding: 9px 14px; gap: 10px 12px; margin-bottom: 8px;
  background: var(--color-surface); border: 1px solid var(--vi-border); border-radius: var(--vi-r-lg); box-shadow: none;
  position: relative; z-index: 40;
}
/* Vorgangsliste: Kopf kompakter, damit die Tabelle früher beginnt (nur diese Seite) */
#page-vorgaenge .page-header { margin-bottom: 10px; min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
#page-vorgaenge .cases-filter-label { margin-bottom: 2px; }
#page-vorgaenge #cases-count-bar,
#page-vorgaenge #cases-list-wrap { position: relative; z-index: 1; }
#page-vorgaenge .cases-filter-label {
  font-size: var(--text-xxs); text-transform: uppercase; letter-spacing: .04em;
  color: var(--vi-muted); font-weight: 700; margin-bottom: 3px;
}
/* Ergebniszeile — EINE Definition für alle Listen (Vorgänge führend, Betrieb gleichgezogen). */
#page-vorgaenge #cases-count-bar,
#anl-count-bar,
#bt-count-bar { margin: 0 2px 8px; font-family: var(--vi-font-ui); font-size: var(--text-sm); color: var(--vi-muted); }

/* Tabelle als professioneller Arbeitsbereich: Sticky-Kopf, ruhige Zeilen, Hover */
#page-vorgaenge .cases-table-header,
#page-vorgaenge thead th {
  position: sticky; top: 0; z-index: 20;
  background: var(--vi-sand);
  font-family: var(--vi-font-ui); font-size: var(--table-head-size, 12px);
  /* Satzschreibung wie im uebrigen Tabellenstandard (Block 3, Paragraf 10.1). */
  text-transform: none; letter-spacing: normal;
  color: var(--table-head-color, var(--vi-muted)); font-weight: 600;
}
/* Sticky-Header: obere Ecken runden (passt zum Container-Radius; verhindert eckige/abgeschnittene
   Ecke oben rechts, weil `position:sticky` beim Scrollen dem border-radius-Clipping des
   overflow-Containers entkommt). */
#page-vorgaenge .cases-table-header { border-radius: var(--vi-r-lg) var(--vi-r-lg) 0 0; }
/* Tabellenstandard: Vorgangslisten-Kopf an kanonischen .data-table-Kopf angleichen
   (dunkel, font-size-sm, 600, .02em; gewinnt über die Regel oben durch spätere Quelle). */
#page-vorgaenge .cases-table-header {
  background: var(--creme);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
}
#page-vorgaenge .cases-row { transition: background .12s var(--vi-ease); }
#page-vorgaenge .cases-row:hover { background: var(--vi-green-tint, #EDF7F2); }
#page-vorgaenge .cases-list { border-radius: 0 0 var(--vi-r-lg) var(--vi-r-lg); }

@media (max-width: 640px) {
  .cockpit-topbar { padding: 22px 18px 18px; }
  .page-header { padding: 12px 16px; }
  .cockpit-topbar .page-title { font-size: 25px; }
  .ckpi-value { font-size: 32px; }
}