/* ==========================================================================
 pv-drawer.css — Personalakte-Drawer

 Konsument: web/js/components/drawers/pv-drawer.js

 Aufbau: Persona-Hero (full-bleed Band: Avatar 64px + Name + Sekundaerzeile +
 Chips + Quick-Kontakt-Spalte) → Underline-Tab-Leiste → Tab-Panel (KPI-Kacheln
 via KpiTiles-Modul, zweispaltige Field-Grids im breiten Drawer, Urlaubs-Hero +
 Konten-Tabelle, Arbeitszeit-Tabelle, Antrags-/Vertrags-Listen).
 Field-Grid/Section-Basics kommen aus shared-drawer.css / drawer-fields.css,
 Edit-Inputs aus den app-drawer-*-Klassen — hier nur die pv-Bausteine.

 Typo-Skala der Akte (bewusst vereinheitlicht): Werte font-size-base,
 Labels font-size-sm muted, KPI-Zahlen font-size-lg.
 ========================================================================== */

/* ── Persona-Hero (full-bleed Band) ────────────────────────────────────────
   Negative Margins ziehen das Band ueber das drawer-body-Padding
   (space-4 oben, space-6 seitlich) bis an die Drawer-Kanten. */
.shared-drawer [data-pv-body] .pv-persona {
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-6)) 0;
  padding: var(--space-5) var(--space-6);
  background: var(--lod-gray-50);
  border-bottom: 1px solid var(--color-border-light);
}
.shared-drawer .pv-persona-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.shared-drawer .pv-avatar { flex-shrink: 0; }
.shared-drawer .pv-persona-text { min-width: 0; flex: 1; }
.shared-drawer .pv-name {
  font-size: var(--font-size-xl);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shared-drawer .pv-pos {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-xxs);
}
.shared-drawer .pv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
  margin-top: var(--space-2);
}
.shared-drawer .pv-persona-meta {
  font-size: var(--fs-caption, 12px);
  color: var(--color-text-tertiary);
  margin-top: var(--space-1-5);
}

/* Quick-Kontakt-Spalte rechts im Hero: mailto/tel-Links mit sichtbarem Wert.
   Ersetzt den Kontaktblock im Uebersicht-Tab. */
.shared-drawer .pv-hero-contact {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-xxs);
  min-width: 0;
  max-width: 40%;
}
.shared-drawer .pv-hero-contact-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  min-width: 0;
  transition: background var(--duration-quick) var(--ease-soft),
              color var(--duration-quick) var(--ease-soft),
              box-shadow var(--duration-quick) var(--ease-soft);
}
.shared-drawer .pv-hero-contact-item:hover {
  background: var(--color-surface);
  color: var(--brand-default);
  box-shadow: var(--shadow-sm);
}
.shared-drawer .pv-hero-contact-item:focus-visible {
  outline: 2px solid var(--brand-default);
  outline-offset: 1px;
}
/* Icon-Groesse kommt aus dem ui-ico-Preset (.xs) in base.css. */
.shared-drawer .pv-hero-contact-item .ui-ico { flex-shrink: 0; }
.shared-drawer .pv-hero-contact-item .ui-ico img { opacity: 0.65; }
.shared-drawer .pv-hero-contact-val {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ── Chips (Persona + Vertrags-Kategorie) ─────────────────────────────────
   Eigene Klasse statt .drawer-head-badge — die ist auf .drawer-head-meta
   gescoped und im Body nicht wiederverwendbar. */
.shared-drawer .pv-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-badge);
  font-weight: var(--fw-semibold);
  padding: var(--space-xxs) var(--space-2);
  border-radius: var(--radius-circular);
  background: var(--lod-gray-50);
  color: var(--lod-gray-500);
  white-space: nowrap;
  line-height: 1.3;
}
.shared-drawer .pv-chip.tone-info    { background: var(--lod-blue-50);      color: var(--lod-blue-700); }
.shared-drawer .pv-chip.tone-success { background: var(--lod-turquoise-100); color: var(--lod-turquoise-900); }
.shared-drawer .pv-chip.tone-danger  { background: var(--status-danger-bg);  color: var(--lod-danger); }
.shared-drawer .pv-chip.tone-gray    { background: var(--lod-gray-100);      color: var(--lod-gray-600); }
.shared-drawer .pv-chip.tone-warning { background: var(--status-warning-bg, #fff4ce); color: var(--status-warning-fg); }

/* Tab-Leiste: jetzt SSOT über LoD.DrawerTabs + drawer-tabs.css (.drawer-tabs/.drawer-tab).
   Die frühere pv-eigene .pv-tabs/.pv-tab-Kopie wurde entfernt — pv, ge und fu teilen
   dieselbe Leiste. pv rendert sein Panel weiterhin selbst (.pv-tab-panel unten). */

/* Panel-Wechsel: dezenter Fade (fill-mode ohne backwards — keine Hover-Kinder
   mit Entrance-Konflikt). */
.shared-drawer .pv-tab-panel { animation: pvPanelIn var(--duration-fast) var(--ease-decelerate); }
@keyframes pvPanelIn {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Typo-Skala der Akte ──────────────────────────────────────────────────
   Einheitlich ueber alle Tabs: Labels sm + muted, Werte base, KPI-Zahlen lg.
   .app-scope-Prefix noetig, um die shared-drawer-Basiswerte (12.5/13.5px)
   sicher zu ueberstimmen. */
.app-scope .shared-drawer [data-pv-body] .field-grid .field-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.app-scope .shared-drawer [data-pv-body] .field-grid .field-value {
  font-size: var(--font-size-base);
}
.app-scope .shared-drawer [data-pv-body] .kpi-tile-value {
  font-size: var(--font-size-lg);
}

/* Field-Grids laufen EINSPALTIG untereinander — wie in allen anderen
   Drawern (shared-drawer-Basis 120px|1fr). Der fruehere 2-Spalten-Modus
   (pv-grid-cols) liess beide Seiten bei wenigen Feldern leer wirken;
   Bearbeiten hat genau EINE Affordanz: den Edit-Stift im Header. */

/* Inline-Hinweis hinter Werten (Geburtsdatum "öffentlich sichtbar",
   "läuft gerade", "Keine geplante Abwesenheit"). */
.shared-drawer .pv-hint-inline {
  font-size: var(--fs-caption, 12px);
  color: var(--color-text-tertiary);
}
/* Mehrzeilige View-Werte (Adresse). */
.shared-drawer .pv-multiline { white-space: pre-wrap; }

/* Klickbare Kontakt-Werte (mailto/tel) in Field-Grids. EINZEILIG mit
   Ellipsis — 'kyle.nolte@lifeon.digit al' (Umbruch mitten im Wort in der
   2-Spalten-Spur) war ein Kyle-QA-Befund. Voller Wert via title. */
.shared-drawer .pv-link {
  color: var(--brand-default);
  text-decoration: none;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.shared-drawer .pv-link:hover { text-decoration: underline; }
.shared-drawer .pv-link:focus-visible {
  outline: 2px solid var(--brand-default);
  outline-offset: 1px;
  border-radius: var(--radius-sm);
}

/* Leere Feldwerte: bewusst sichtbar (HR sieht Luecken), aber zurueckgenommen —
   die '–'-Wand soll nicht wie unfertiges UI wirken. */
.shared-drawer .pv-empty { color: var(--lod-gray-400); }

/* Negative Tage (Urlaubskonto ueberzogen) — Danger-Ton in Hero + Tabelle. */
.shared-drawer .pv-table td.is-neg,
.shared-drawer .pv-konto-hero-value.is-neg,
.shared-drawer .pv-konto-hero-stat-value.is-neg { color: var(--lod-danger); }

/* Boolean-Check (Compliance): explizites '✓ Ja' / '✕ Nein'. */
.shared-drawer .pv-check { color: var(--color-text-secondary); }
.shared-drawer .pv-check.is-yes {
  color: var(--status-success-fg);
  font-weight: var(--fw-semibold);
}
/* Ausstehende Pflichtschulung: '✕ Nein' als Warnung (Amber), konsistent mit
   dem Handlungsbedarf, der genau diesen Zustand flaggt. */
.shared-drawer .pv-check.is-no {
  color: var(--status-warning-fg);
  font-weight: var(--fw-semibold);
}

/* Status-Pillen in Feldwerten (z.B. 'Letzter Antrag … [Genehmigt]') duerfen
   nie mitten im Text umbrechen. */
.shared-drawer .field-value-content .pill { white-space: nowrap; vertical-align: middle; }

/* ── Tabellen (Arbeitszeit-Historie + Urlaubskonten) ───────────────────── */
.shared-drawer .pv-table-wrap { overflow-x: auto; }
.shared-drawer .pv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-base);
}
.shared-drawer .pv-table th {
  text-align: left;
  font-size: var(--fs-caption, 12px);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  padding: var(--space-1-5) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.shared-drawer .pv-table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text);
  white-space: nowrap;
}
.shared-drawer .pv-table th.num,
.shared-drawer .pv-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.shared-drawer .pv-table tbody tr:hover td { background: var(--color-bg-subtle); }
/* Aktuelles Jahr in der Urlaubskonten-Tabelle hervorheben. */
.shared-drawer .pv-table tbody tr.is-current td {
  font-weight: var(--fw-semibold);
  background: color-mix(in srgb, var(--brand-default) 4%, transparent);
}
/* Kernspalte "Verfügbar (genehmigt)" — betont, weil das die eine Zahl ist,
   auf die HR schaut. */
.shared-drawer .pv-table th.pv-col-key { color: var(--color-text); }
.shared-drawer .pv-table td.pv-col-key {
  font-weight: var(--fw-semibold);
  background: color-mix(in srgb, var(--brand-default) 5%, transparent);
}

/* ── Arbeitszeit-Perioden: Zeilen-Aktionen + Inline-Editor ─────────────────
   Die Historie ist editierbar (SSOT); pro Zeile Bearbeiten/Löschen, oben
   "Periode hinzufügen". Der Editor rendert inline anstelle der Tabelle. */
.shared-drawer .pv-table th.pv-az-actions-col,
.shared-drawer .pv-table td.pv-az-actions-col {
  width: 64px; text-align: right; white-space: nowrap;
}
.shared-drawer .pv-az-act {
  border: 0; background: transparent; cursor: pointer;
  padding: var(--space-1); border-radius: var(--radius-sm);
  vertical-align: middle;
}
.shared-drawer .pv-az-act img { width: 16px; height: 16px; opacity: 0.6; }
.shared-drawer .pv-az-act:hover { background: var(--lod-gray-100); }
.shared-drawer .pv-az-act:hover img { opacity: 0.9; }
.shared-drawer .pv-az-act:focus-visible { outline: 2px solid var(--brand-default); outline-offset: 1px; }

/* Der frühere Inline-Perioden-Editor (.pv-az-editor*) ist in den az-drawer
   gewandert; die read-only Liste (.pv-az-act) mit Bearbeiten-Stift bleibt. */

/* ── Abwesenheits-Konto-Hero (SSOT für Urlaub UND Krankheit) ──────────────────
   Ein Hero-Bauteil, zwei Instanzen (Varianten --urlaub / --krank): beide Konto-
   Zusammenfassungen sind so garantiert gleich groß/gleich gebaut. */
.shared-drawer .pv-konto-hero {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
/* Tönung je Konto-Art — identisches Layout, nur Rahmen/Grund unterscheiden sich. */
.shared-drawer .pv-konto-hero--urlaub {
  border-color: var(--brand-default);
  background: color-mix(in srgb, var(--brand-default) 4%, transparent);
}
.shared-drawer .pv-konto-hero--krank {
  border-color: color-mix(in srgb, var(--lod-danger) 40%, var(--color-border));
  background: color-mix(in srgb, var(--lod-danger) 4%, transparent);
}
.shared-drawer .pv-konto-hero-main {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.shared-drawer .pv-konto-hero-value {
  font-size: var(--font-size-xxl, 28px);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.shared-drawer .pv-konto-hero-unit {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.shared-drawer .pv-konto-hero-sub {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}
/* Stat-Bloecke: Label klein UEBER dem Wert — ruhiger als die fruehere
   Inline-Reihung, Werte fluchten auf einer Basislinie. */
.shared-drawer .pv-konto-hero-stat {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  white-space: nowrap;
}
.shared-drawer .pv-konto-hero-stat-label {
  font-size: var(--fs-caption, 12px);
  color: var(--color-text-tertiary);
}
.shared-drawer .pv-konto-hero-stat-value {
  font-weight: var(--fw-semibold);
  font-size: var(--font-size-base);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* Verbrauchs-Balken im Urlaubs-Hero: genehmigte Tage vs. Gesamtanspruch.
   Fluid (flex-basis 100% bricht unter Main+Stats), Fuellung data-getrieben
   via style-width (etabliertes Bar-Fill-Muster, vgl. uw-bar-fill). */
.shared-drawer .pv-urlaub-progress-row {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.shared-drawer .pv-urlaub-progress {
  flex: 1;
  height: 6px;
  border-radius: var(--radius-circular);
  background: color-mix(in srgb, var(--brand-default) 12%, transparent);
  overflow: hidden;
}
.shared-drawer .pv-urlaub-progress-fill {
  height: 100%;
  border-radius: var(--radius-circular);
  background: var(--brand-default);
}
.shared-drawer .pv-urlaub-progress-label {
  flex-shrink: 0;
  font-size: var(--fs-caption, 12px);
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

/* Hinweis unter der Konto-Pflege (Edit-Modus): Rollups rechnet Dynamics. */
.shared-drawer .pv-pflege-hint {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-caption, 12px);
  color: var(--color-text-tertiary);
}

/* ── Übersicht: Präsenz-Band ───────────────────────────────────────────────
   Full-width Status-Streifen ganz oben: ist die Person HEUTE da? Ton-farbige
   Kante + getönter Grund (success = anwesend, warning/danger = abwesend). */
.shared-drawer .pv-status-band {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: var(--space-2-5) var(--space-3);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--lod-gray-300);
  background: var(--lod-gray-50);
}
.shared-drawer .pv-status-band .ui-ico img { opacity: 0.8; }
.shared-drawer .pv-status-band-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.shared-drawer .pv-status-band-text b { font-size: var(--font-size-base); color: var(--color-text); }
.shared-drawer .pv-status-band-text span {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shared-drawer .pv-status-band.tone-success {
  border-left-color: var(--status-success-fg);
  background: var(--status-success-bg);
}
.shared-drawer .pv-status-band.tone-warning {
  border-left-color: var(--status-warning-fg);
  background: var(--status-warning-bg, #fff4ce);
}
.shared-drawer .pv-status-band.tone-danger {
  border-left-color: var(--status-danger-fg);
  background: var(--status-danger-bg);
}

/* ── Übersicht: Handlungsbedarf ────────────────────────────────────────────
   Synthetisierte Aufgabenliste; klickbare Einträge (button) springen in den
   jeweiligen Tab. Ton-Punkt links signalisiert Dringlichkeit. */
.shared-drawer .pv-todo-list { display: flex; flex-direction: column; gap: var(--space-1-5); }
.shared-drawer .pv-todo-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-2-5);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--font-size-base);
  color: var(--color-text);
}
button.pv-todo-item { cursor: pointer; transition: border-color var(--duration-quick) var(--ease-soft), box-shadow var(--duration-quick) var(--ease-soft); }
button.pv-todo-item:hover { border-color: var(--brand-default); box-shadow: var(--shadow-sm); }
button.pv-todo-item:focus-visible { outline: 2px solid var(--brand-default); outline-offset: 1px; }
.shared-drawer .pv-todo-item .ui-ico img { opacity: 0.65; }
.shared-drawer .pv-todo-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--lod-gray-400); }
.shared-drawer .pv-todo-item.tone-warning .pv-todo-dot { background: var(--status-warning-fg); }
.shared-drawer .pv-todo-item.tone-danger  .pv-todo-dot { background: var(--lod-danger); }
.shared-drawer .pv-todo-item.tone-info    .pv-todo-dot { background: var(--lod-blue-500, #0f6cbd); }
.shared-drawer .pv-todo-text { flex: 1; min-width: 0; }
.shared-drawer .pv-todo-chevron { flex-shrink: 0; }
.shared-drawer .pv-todo-chevron img { opacity: 0.4; }
.shared-drawer .pv-todo-empty {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.shared-drawer .pv-todo-empty .ui-ico img { opacity: 0.55; }

/* ── Übersicht: Kommende Abwesenheiten ─────────────────────────────────────
   Kompakte Zeile: [Typ-Badge] [Zeitraum] [relative Zeit] [Status-Pill]. */
.shared-drawer .pv-upcoming-list { display: flex; flex-direction: column; gap: var(--space-1); }
.shared-drawer .pv-upcoming-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1-5) var(--space-1);
  border-bottom: 1px solid var(--color-border-light);
}
.shared-drawer .pv-upcoming-row:last-child { border-bottom: 0; }
.shared-drawer .pv-upcoming-zeit {
  flex: 1; min-width: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shared-drawer .pv-upcoming-rel {
  flex-shrink: 0;
  font-size: var(--fs-caption, 12px);
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

/* ── Antrags-Liste (read-only) ─────────────────────────────────────────────
   Buckets mit Zwischentiteln (gleiche Optik wie die Vertrags-Gruppen),
   Zeile: [Typ-Badge] [Zeitraum semibold + Sub-Zeile muted] [Pill + Nr]. */
.shared-drawer .pv-antrag-gruppe {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--fs-caption, 12px);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: var(--space-4) 0 var(--space-2);
}
.shared-drawer .pv-antrag-gruppe:first-child { margin-top: 0; }
.shared-drawer .pv-antrag-gruppe-count {
  font-weight: var(--fw-regular);
  color: var(--color-text-tertiary);
  text-transform: none;
  letter-spacing: 0;
}

/* Dringlichkeit wartender Antraege ('beginnt in N Tagen') — dezente Pille,
   warnend ab ≤7 Tagen bis zum Beginn. */
.shared-drawer .pv-dring {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-2);
  padding: 0 var(--space-2);
  border-radius: var(--radius-circular);
  font-size: var(--fs-caption, 12px);
  background: var(--lod-gray-100);
  color: var(--lod-gray-600);
  white-space: nowrap;
}
.shared-drawer .pv-dring--warn {
  background: var(--status-warning-bg, #fff4ce);
  color: var(--status-warning-fg);
}

.shared-drawer .pv-antrag-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.shared-drawer .pv-antrag-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-2-5) var(--space-3);
}
/* Wartende Antraege (Beantragt / Stornierung beantragt): dezenter Marker
   links — die stehen oben und brauchen den HR-Blick zuerst. */
.shared-drawer .pv-antrag-row--wartend {
  border-left: 3px solid var(--brand-default);
}
.shared-drawer .pv-antrag-row--inaktiv { opacity: 0.65; }
.shared-drawer .pv-antrag-row .pv-typ-badge {
  flex-shrink: 0;
  margin-top: var(--space-xxs);
}
.shared-drawer .pv-antrag-main {
  flex: 1;
  min-width: 0;
}
.shared-drawer .pv-antrag-zeitraum {
  font-size: var(--font-size-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.shared-drawer .pv-antrag-sub {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-xxs);
}
.shared-drawer .pv-antrag-grund {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  margin-top: var(--space-1);
  overflow-wrap: anywhere;
}
.shared-drawer .pv-antrag-right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
}
.shared-drawer .pv-antrag-nr {
  font-size: var(--fs-caption, 12px);
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Entscheidungs-Buttons (HR/Mgmt) rechts neben Pill+Nr — vertikal gestapelt,
   da die Storno-Labels lang sind (analog zur Section-Antraege-Spalte). */
.shared-drawer .pv-antrag-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
}
.shared-drawer .pv-antrag-actions .btn-primary-sm,
.shared-drawer .pv-antrag-actions .btn-outline-sm {
  width: 100%;
  justify-content: center;
  white-space: nowrap;
}

/* Typ-Badge (Urlaub/Krank/Schule) — Drawer-Pendant zur Section-Antragszeile
   (personal.css scoped auf #tab-content-personal, daher hier eigene Regeln
   mit identischen Status-Tokens). */
.shared-drawer .pv-typ-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill, 999px);
  font-size: var(--fs-badge);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  white-space: nowrap;
}
.shared-drawer .pv-typ-urlaub  { background: var(--status-success-bg); color: var(--status-success-fg); }
.shared-drawer .pv-typ-krank   { background: var(--status-danger-bg);  color: var(--status-danger-fg); }
.shared-drawer .pv-typ-schule  { background: var(--status-vorgeschlagen-bg); color: var(--status-vorgeschlagen-fg); }
.shared-drawer .pv-typ-sonstig { background: var(--color-bg-muted); color: var(--color-text-muted); }

/* ── Vertrags-Liste (gruppiert, klickbar → LoDVtDrawer) ────────────────── */
.shared-drawer .pv-vertrag-gruppe {
  font-size: var(--fs-caption, 12px);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: var(--space-3) 0 var(--space-2);
}
.shared-drawer .pv-vertrag-gruppe:first-child { margin-top: 0; }
.shared-drawer .pv-vertrag-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ── Vertragspaket-Cluster: Dokumente einer Ausgabe (gleiche paketId) unter
   einem Kopf mit Sammelaktionen — Brand-Akzentstreifen links wie bei den
   Paket-Karten im Wizard, damit „gehört zusammen" sofort sichtbar ist. ── */
.shared-drawer .pv-vertrag-paket {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--brand-default);
  border-radius: var(--radius-md);
  background: var(--lod-blue-50);
  padding: var(--space-2);
}
.shared-drawer .pv-vertrag-paket-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 var(--space-1) var(--space-2) var(--space-1);
}
.shared-drawer .pv-vertrag-paket-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
}
.shared-drawer .pv-vertrag-paket-title .ui-ico img { opacity: .6; }
.shared-drawer .pv-vertrag-paket-actions { display: inline-flex; gap: var(--space-1); }
.shared-drawer .pv-vertrag-paket-btn {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--duration-quick) var(--ease-soft),
              color var(--duration-quick) var(--ease-soft);
}
.shared-drawer .pv-vertrag-paket-btn:hover { border-color: var(--brand-default); color: var(--brand-default); }
/* Primäraktion des Pakets (An DocuSign senden) — gefüllt in Brand-Farbe. */
.shared-drawer .pv-vertrag-paket-btn--primary {
  background: var(--brand-default);
  border-color: var(--brand-default);
  color: var(--brand-text-on);
}
.shared-drawer .pv-vertrag-paket-btn--primary:hover { color: var(--brand-text-on); opacity: .92; }
/* Member-Zeilen im Paket etwas kompakter gestapelt. */
.shared-drawer .pv-vertrag-paket-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}
.shared-drawer .pv-vertrag-paket-list .pv-vertrag-row { background: var(--color-surface); }

.shared-drawer .pv-vertrag-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2-5) var(--space-3);
  cursor: pointer;
  transition: border-color var(--duration-quick) var(--ease-soft),
              box-shadow var(--duration-quick) var(--ease-soft);
}
.shared-drawer .pv-vertrag-row:hover {
  border-color: var(--brand-default);
  box-shadow: var(--shadow-sm);
}
.shared-drawer .pv-vertrag-row:focus-visible {
  outline: 2px solid var(--brand-default);
  outline-offset: 2px;
}
.shared-drawer .pv-vertrag-main { flex: 1; min-width: 0; }
.shared-drawer .pv-vertrag-name {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--font-size-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  min-width: 0;
}
.shared-drawer .pv-vertrag-name > .pv-vertrag-pdf img { opacity: 0.6; }
.shared-drawer .pv-vertrag-sub {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-xxs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shared-drawer .pv-vertrag-chevron { flex-shrink: 0; }
.shared-drawer .pv-vertrag-chevron img { opacity: 0.45; }

/* ── Hero: aktueller Arbeitsvertrag, prominent über den Sektionen ─────────
   Der Vertrag, den HR zuerst sucht — Brand-Rahmen + Tint heben ihn ab, das
   Badge/Label macht die Rolle explizit. Klickt wie eine normale Zeile. */
.shared-drawer .pv-vertrag-hero {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border: 1px solid var(--brand-default);
  border-radius: var(--radius-md);
  background: var(--lod-blue-50);
  padding: var(--space-3) var(--space-3-5);
  margin-bottom: var(--space-3);
  cursor: pointer;
  transition: box-shadow var(--duration-quick) var(--ease-soft),
              border-color var(--duration-quick) var(--ease-soft);
}
.shared-drawer .pv-vertrag-hero:hover { box-shadow: var(--shadow-md, var(--shadow-sm)); }
.shared-drawer .pv-vertrag-hero:focus-visible {
  outline: 2px solid var(--brand-default);
  outline-offset: 2px;
}
.shared-drawer .pv-vertrag-hero-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--brand-default);
}
.shared-drawer .pv-vertrag-hero-badge img { opacity: 0.7; }
.shared-drawer .pv-vertrag-hero-main { flex: 1; min-width: 0; }
.shared-drawer .pv-vertrag-hero-label {
  font-size: var(--fs-caption, 12px);
  font-weight: var(--fw-semibold);
  color: var(--brand-default);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.shared-drawer .pv-vertrag-hero-name {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--font-size-lg, var(--font-size-base));
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  min-width: 0;
  margin-top: var(--space-xxs);
}
.shared-drawer .pv-vertrag-hero-name > .pv-vertrag-pdf img { opacity: 0.6; }
.shared-drawer .pv-vertrag-hero-sub {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-xxs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Historie: beendete/inaktive Verträge, eingeklappt (natives <details>) ── */
.shared-drawer .pv-vertrag-history {
  margin-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-2);
}
.shared-drawer .pv-vertrag-history-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  list-style: none;
  padding: var(--space-1) 0;
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  user-select: none;
}
.shared-drawer .pv-vertrag-history-summary::-webkit-details-marker { display: none; }
.shared-drawer .pv-vertrag-history-summary:hover { color: var(--color-text); }
.shared-drawer .pv-vertrag-history-summary:focus-visible {
  outline: 2px solid var(--brand-default);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.shared-drawer .pv-vertrag-history-summary .ui-ico img { opacity: 0.55; }
.shared-drawer .pv-vertrag-history-count {
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
  border-radius: var(--radius-pill, 999px);
  padding: 0 var(--space-2);
  font-size: var(--fs-badge);
  font-weight: var(--fw-semibold);
  line-height: 1.6;
}
.shared-drawer .pv-vertrag-history-chevron {
  margin-left: auto;
  transition: transform var(--duration-quick) var(--ease-soft);
}
.shared-drawer .pv-vertrag-history-chevron img { opacity: 0.5; }
.shared-drawer .pv-vertrag-history[open] .pv-vertrag-history-chevron { transform: rotate(180deg); }
.shared-drawer .pv-vertrag-history-list { margin-top: var(--space-2); }
/* Beendetes leicht zurückgenommen — aktiv bleibt im Vordergrund. */
.shared-drawer .pv-vertrag-history-list .pv-vertrag-row { opacity: 0.82; }
.shared-drawer .pv-vertrag-history-list .pv-vertrag-row:hover { opacity: 1; }

/* ── Narrow-Drawer (Container-Query, kanonische 640px-Grenze) ─────────────
   Hero: Kontakt-Spalte bricht als horizontale Zeile unter den Text.
   Antraege: Pill+Nr wandern als Zeile unter den Hauptblock. */
@container drawer (max-width: 640px) {
  .app-scope .shared-drawer .pv-persona-row { flex-wrap: wrap; }
  .app-scope .shared-drawer .pv-hero-contact {
    margin-left: 0;
    max-width: 100%;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
  }
  .app-scope .shared-drawer .pv-antrag-row { flex-wrap: wrap; }
  .app-scope .shared-drawer .pv-antrag-right {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
  }
  .app-scope .shared-drawer .pv-antrag-actions { width: 100%; }
  /* Hero: Status-Chip darf unter den Text umbrechen statt zu quetschen. */
  .app-scope .shared-drawer .pv-vertrag-hero { flex-wrap: wrap; }
  /* Entwicklung & Ziele: Karten-Zeilen + Stat-Band brechen im schmalen Drawer um. */
  .app-scope .shared-drawer .pv-ent-row { flex-wrap: wrap; }
  .app-scope .shared-drawer .pv-ent-stats { flex-wrap: wrap; }
  .app-scope .shared-drawer .pv-ent-stat { flex: 1 1 45%; }
}

/* ── Breakpoints ────────────────────────────────────────────────────────
   Der Drawer selbst wird von entity-drawer responsiv verschmaelert; die
   pv-Layout-Klassen brauchen trotzdem eigene Anpassungen fuer schmale
   Body-Breiten. KPI-Kacheln (KpiTiles-Modul) bringen ihr eigenes
   Responsive-Verhalten aus kpi-tiles.css mit. */

/* Notebook 1000–1399px — Drawer behaelt seine Breite, Layout unveraendert. */
@media (min-width: 1000px) and (max-width: 1399px) {
  .shared-drawer .pv-konto-hero { gap: var(--space-2) var(--space-3); }
  .shared-drawer .pv-hero-contact { max-width: 44%; }
}

/* Tablet 600–999px — Drawer kann auf Containerbreite gedrueckt werden. */
@media (min-width: 600px) and (max-width: 999px) {
  .shared-drawer .pv-persona-row { gap: var(--space-3); }
  .shared-drawer .pv-konto-hero { flex-direction: column; align-items: flex-start; }
  .shared-drawer .pv-hero-contact { max-width: 48%; }
}

/* Mobile <600px — Hero stapelt, Tab-Leiste scrollt horizontal (Tab-Padding via drawer-tabs.css). */
@media (max-width: 599px) {
  .shared-drawer .pv-konto-hero { flex-direction: column; align-items: flex-start; }
  .shared-drawer .pv-konto-hero-value { font-size: var(--font-size-xl); }
  .shared-drawer .pv-vertrag-row { flex-wrap: wrap; }
  .shared-drawer .pv-vertrag-hero { flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
  .shared-drawer .pv-ent-row { flex-wrap: wrap; }
  .shared-drawer .pv-ent-stats { flex-wrap: wrap; }
  .shared-drawer .pv-ent-stat { flex: 1 1 45%; }
  .shared-drawer .pv-persona-row { gap: var(--space-3); }
  /* Kontakt-Zeile + Antrags-Fusszeile: Vollbreite (Container-Query oben
     greift hier ohnehin, da der Drawer auf Mobile 100% Breite hat). */
  .shared-drawer .pv-hero-contact { max-width: 100%; }
  .shared-drawer .pv-antrag-right { gap: var(--space-1-5); }
}

/* ═══ Verträge-Tab: Kopfzeile + Vertrag-erstellen-Wizard (pvw-) ═════════════
   Der Wizard (pv-vertrag-wizard.js) nutzt die EntityDrawer-Shell; hier liegen
   die wizard-eigenen Bausteine: Vorlagen-Auswahl mit Suche + Paket-Karten
   (Schritt 1), gestapeltes Formular (Schritt 2) und die scale-to-fit
   A4-Vorschau (Schritt 3). Redesign 2026-07-03 (Kyle-Feedback). */

.shared-drawer .pv-vertraege-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.shared-drawer .pv-vertraege-head h4 { margin: 0; }

.shared-drawer .pvw-intro {
  margin: var(--space-1) 0 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}
.shared-drawer .pvw-kopf { margin-bottom: var(--space-2); }

/* Wizard-Stepper (Vorlage → Angaben → Vorschau) — Fortschrittsanzeige oben im
   Body; erledigte Schritte tragen einen Haken, der aktuelle ist markengefüllt. */
/* Fortschrittskette: an der Inhaltsspalte ausgerichtet (kein zusätzliches
   Seiten-Padding auf das Body-Padding draufsatteln), unten mit Trennlinie vom
   Formular abgesetzt — so hängt der Stepper nicht mehr freischwebend im Body. */
.shared-drawer .pvw-stepper {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  flex-wrap: wrap;
  padding: var(--space-1) 0 var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.shared-drawer .pvw-step {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
/* Verbindungslinie zwischen den Schritten — macht aus drei freistehenden
   Pillen eine zusammenhängende Kette; erledigte Abschnitte färben sich grün. */
.shared-drawer .pvw-step-line {
  flex: 0 0 auto;
  width: var(--space-5);
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
}
.shared-drawer .pvw-step-line.is-done { background: var(--status-success-fg); }
.shared-drawer .pvw-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
}
.shared-drawer .pvw-step-num img { width: 14px; height: 14px; }
.shared-drawer .pvw-step.is-active {
  background: color-mix(in srgb, var(--brand-default) 12%, var(--color-surface));
  color: var(--brand-default);
}
.shared-drawer .pvw-step.is-active .pvw-step-num { background: var(--brand-default); color: var(--brand-text-on); }
.shared-drawer .pvw-step.is-done .pvw-step-num { background: var(--status-success-bg, #dff6dd); color: var(--status-success-fg); }
@media (max-width: 599px) {
  .shared-drawer .pvw-stepper { padding: var(--space-1) 0 var(--space-3); margin-bottom: var(--space-3); gap: var(--space-1); }
  .shared-drawer .pvw-step { padding: var(--space-1) var(--space-1-5); }
  .shared-drawer .pvw-step-line { width: var(--space-3); }
  .shared-drawer .pvw-step:not(.is-active) .pvw-step-label { display: none; }
}

/* Suchfeld (Schritt 1): Icon + Input in einer bordierten Pille. */
.shared-drawer .pvw-suche {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  margin-top: var(--space-2-5);
  padding: 0 var(--space-2-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color var(--motion-fast) var(--ease-standard),
              box-shadow var(--motion-fast) var(--ease-standard);
}
.shared-drawer .pvw-suche:focus-within {
  border-color: var(--brand-default);
  box-shadow: var(--shadow-sm);
}
.shared-drawer .pvw-suche .ui-ico img { opacity: 0.5; }
.shared-drawer .pvw-suche input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: var(--space-2) 0;
  font-size: var(--font-size-base);
  color: var(--color-text);
}

/* Gruppen-Zwischentitel. */
.shared-drawer .pvw-gruppe {
  margin: var(--space-4) 0 var(--space-1-5) 0;
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.shared-drawer .pvw-liste {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}
.shared-drawer .pvw-vorlage {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: var(--space-2-5);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard),
              box-shadow var(--motion-fast) var(--ease-standard);
}
.shared-drawer .pvw-vorlage:hover:not(.is-disabled),
.shared-drawer .pvw-vorlage:focus-visible {
  background: var(--color-bg-subtle);
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}
.shared-drawer .pvw-vorlage:focus-visible { outline: 2px solid var(--brand-default); outline-offset: 1px; }
.shared-drawer .pvw-vorlage.is-disabled { opacity: .55; cursor: default; }
.shared-drawer .pvw-vorlage > .ui-ico img { opacity: 0.55; }
.shared-drawer .pvw-vorlage-main { flex: 1; min-width: 0; }
.shared-drawer .pvw-vorlage-name {
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
}
.shared-drawer .pvw-hint {
  display: block;
  margin-top: 1px;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}
.shared-drawer .pvw-hint-pruefen { color: var(--color-warning-strong); }
.shared-drawer .pvw-leer {
  margin: var(--space-4) 0;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

/* „Weitere Vorlagen": eingeklappter Zweit-Bereich mit rollenfremden, schon
   vorhandenen oder gesperrten Vorlagen. Nichts ist blockiert — nur vorsortiert. */
.shared-drawer .pvw-weitere {
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}
.shared-drawer .pvw-weitere-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  width: 100%;
  padding: var(--space-2-5) 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.shared-drawer .pvw-weitere-toggle:hover { color: var(--color-text-primary); }
.shared-drawer .pvw-weitere-toggle:focus-visible {
  outline: 2px solid var(--brand-default);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.shared-drawer .pvw-weitere-chevron {
  transition: transform var(--motion-fast) var(--ease-standard);
}
.shared-drawer .pvw-weitere-chevron img { opacity: 0.6; }
.shared-drawer .pvw-weitere.is-open .pvw-weitere-chevron { transform: rotate(90deg); }
.shared-drawer .pvw-weitere-body .pvw-gruppe:first-child { margin-top: var(--space-1-5); }

/* Paket-Karten: farblich abgesetzt (Brand-Tint + linker Akzentstreifen),
   damit die Buendel klar vor den Einzelvorlagen stehen. */
.shared-drawer .pvw-vorlage.pvw-paket {
  border-color: var(--color-border-subtle);
  background: var(--lod-blue-50);
  border-left: 3px solid var(--brand-default);
}
.shared-drawer .pvw-vorlage.pvw-paket:hover,
.shared-drawer .pvw-vorlage.pvw-paket:focus-visible {
  border-color: var(--brand-default);
  box-shadow: var(--shadow-sm);
}
.shared-drawer .pvw-paket-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--brand-default);
}
.shared-drawer .pvw-paket-ico img { filter: brightness(0) invert(1); opacity: 1; width: 18px; height: 18px; }
.shared-drawer .pvw-paket-anzahl {
  font-size: var(--font-size-xs);
  font-weight: var(--fw-regular, 400);
  color: var(--color-text-secondary);
}

/* ── Schritt 2: gestapeltes Formular (12-Spalten-Raster) ──────────────────
   Label ueber dem Feld, Eingabe volle Zellbreite, kurzer Hinweis darunter.
   Feldbreite = Rasterspalten (Wizard-Core _feldSpan): w4 Zahl/Datum, w6 Text/
   Auswahl, w8 betonte Auswahl/Anschrift, w12 Textarea/Liste. Kanten schließen
   IMMER auf Rasterlinien — bewusst kein max-width-Deckel je Feldtyp mehr
   (der erzeugte drei verschiedene rechte Kanten in einem Formular). */
/* Mehr Luft als Standard-Sektionen: 32px-Controls + 16px Zeilenabstand +
   deutlicher Sektionsabstand geben dem Formular den ruhigen Premium-Rhythmus. */
.shared-drawer .pvw-form-sektion { margin-top: var(--space-5); }
.shared-drawer .pvw-form {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-4) var(--space-3);
  margin-top: var(--space-2-5);
}
/* Default span 6 (halbe Zeile) — greift auch für Zellen OHNE --w-Klasse
   (z.B. der Kunde-Kontext in Schritt 1); ohne Default nähme eine Zelle im
   12er-Grid nur EINE Spalte ein und zerquetschte ihr Control. */
.shared-drawer .pvw-feld { position: relative; display: flex; flex-direction: column; min-width: 0; grid-column: span 6; }
.shared-drawer .pvw-feld--w4  { grid-column: span 4; }
.shared-drawer .pvw-feld--w6  { grid-column: span 6; }
.shared-drawer .pvw-feld--w8  { grid-column: span 8; }
.shared-drawer .pvw-feld--w12 { grid-column: 1 / -1; }
.shared-drawer .pvw-feld-label {
  margin-bottom: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
}
.shared-drawer .pvw-pflicht { color: var(--lod-danger, #b3261e); }
.shared-drawer .pvw-feld-slot { min-width: 0; }
/* DrawerMounts-Inputs + Textareas fuellen die Zelle. */
.shared-drawer .pvw-feld-slot > *,
.shared-drawer .pvw-feld-slot input,
.shared-drawer .pvw-feld-slot textarea,
.shared-drawer .pvw-feld-slot .app-drawer-input,
.shared-drawer .pvw-feld-slot .app-date-field { width: 100%; box-sizing: border-box; }
/* Async-/Betreff-Picker (z.B. „Unterzeichner beim Kunden") setzt seine Klasse auf den
   Slot SELBST, ist also kein Slot-Kind — die „> *"-Regel oben greift dort nicht.
   Explizit auf volle Spaltenbreite UND flex-basis auto: die pvw-Feld-Zelle ist ein
   Column-Flex, und das `flex: 1 1 0%` aus dem Shared-Control-Block überschreibt dort
   die 32px-Höhe (Column-Flex: Basis schlägt height) — der Picker kollabierte sonst
   auf Inhaltshöhe (~22px) und stand niedriger als das Nachbar-Textfeld. */
.shared-drawer .pvw-feld-slot.app-async-picker,
.shared-drawer .pvw-feld-slot.app-betreff-picker {
  width: 100%;
  flex: 0 0 auto;
  height: 32px;
}
/* CustomSelect-Trigger auf die 32px-Control-Höhe der Nachbarfelder locken —
   der Lock aus drawer-fields.css greift nur in .field-value-Slots, hier sitzt
   der Trigger direkt im pvw-Slot (sonst 33px = 1px höher/tiefer als die Zeile). */
.shared-drawer .pvw-feld-slot .select[data-cs-trigger] {
  height: 32px;
  box-sizing: border-box;
}
.shared-drawer .pvw-feld-slot textarea { min-height: 84px; resize: vertical; }
.shared-drawer .pvw-feld-hinweis {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}
.shared-drawer .pvw-warnung {
  margin: var(--space-1) 0 var(--space-2) 0;
  font-size: var(--font-size-sm);
  color: var(--color-warning-strong);
}

/* Zahlenfelder: Suffix (%, Monate, Tage) sitzt IM Feld statt als loser Text
   daneben — der Wrap traegt den Feldrahmen, der Input darin ist rahmenlos.
   Nur im Wizard-Raster (pvw-feld-slot); der Shared-Wrap anderswo bleibt wie er ist. */
.shared-drawer .pvw-feld-slot .app-drawer-number-wrap {
  gap: 0;
  height: 32px;
  background: var(--color-surface);
  border: 1px solid var(--lod-gray-200);
  border-radius: var(--radius-md);
}
.shared-drawer .pvw-feld-slot .app-drawer-number-wrap .app-drawer-input {
  height: 100%;
  border: 0;
  background: transparent;
}
.shared-drawer .pvw-feld-slot .app-drawer-number-wrap .app-drawer-input:focus { outline: none; }
.shared-drawer .pvw-feld-slot .app-drawer-number-wrap:focus-within { border-color: var(--lod-turquoise); }
.shared-drawer .pvw-feld-slot .app-drawer-input-suffix {
  padding-right: var(--space-2-5);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  user-select: none;
}

/* Pflichtfeld-Fehler (Schritt-2-Gate): Zelle markiert, Meldung unterm Feld.
   Gleiche Visual-SSOT wie .field-value.is-missing (roter Inset-Ring). Der Ring
   allein reicht nicht — opake Controls (Date-Trigger, Inputs) überdecken den
   Slot-Schatten, deshalb zusätzlich border-color auf den Controls selbst. */
.shared-drawer .pvw-feld--fehler .pvw-feld-slot {
  box-shadow: 0 0 0 1.5px var(--lod-danger) inset;
  border-radius: var(--radius-md);
}
.shared-drawer .pvw-feld--fehler .pvw-feld-slot input,
.shared-drawer .pvw-feld--fehler .pvw-feld-slot textarea,
.shared-drawer .pvw-feld--fehler .pvw-feld-slot .app-drawer-number-wrap,
.shared-drawer .pvw-feld--fehler .pvw-feld-slot .app-drawer-select,
.shared-drawer .pvw-feld--fehler .pvw-feld-slot .app-drawer-date-trigger,
.shared-drawer .pvw-feld--fehler .pvw-feld-slot .select[data-cs-trigger],
.shared-drawer .pvw-feld--fehler .pvw-feld-slot .pvw-segment,
.shared-drawer .pvw-feld--fehler .pvw-feld-slot.app-async-picker { border-color: var(--lod-danger); }
.shared-drawer .pvw-feld-fehler {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--fw-medium);
  color: var(--lod-danger);
}

/* Segmented Control (typ select + darstellung 'segment', 2-4 feste Optionen):
   alle Werte sichtbar nebeneinander statt im Dropdown versteckt. */
.shared-drawer .pvw-segment {
  display: flex;
  height: 32px;
  background: var(--color-surface);
  border: 1px solid var(--lod-gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.shared-drawer .pvw-segment-btn {
  flex: 1;
  min-width: 0;
  padding: 0 var(--space-2);
  border: 0;
  background: none;
  font-size: var(--font-size-sm);
  font-family: var(--lod-font-sans);
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shared-drawer .pvw-segment-btn + .pvw-segment-btn { border-left: 1px solid var(--color-border-subtle); }
.shared-drawer .pvw-segment-btn:hover { background: var(--lod-gray-50); }
.shared-drawer .pvw-segment-btn:focus-visible { outline: 2px solid var(--brand-default); outline-offset: -2px; }
.shared-drawer .pvw-segment-btn.is-active {
  background: var(--brand-default);
  color: var(--color-text-on-brand, #fff);
  font-weight: var(--fw-medium);
}

/* Noten-/Varianten-Baustein-Leiste der Zeugnis-Wizards: gleiche Segment-Optik,
   sitzt ÜBER dem Textarea (Klick setzt den Textbaustein) und darf bei schmalen
   Drawern umbrechen statt Labels abzuschneiden. */
.shared-drawer .pvw-bausteine {
  height: auto;
  min-height: 32px;
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.shared-drawer .pvw-bausteine .pvw-segment-btn {
  flex: 1 1 auto;
  padding: 5px var(--space-3);
}

/* Gesamteindruck-Sektion (setzt alle Notenfelder auf einmal): Regler nicht auf
   Formularbreite aufziehen — drei Noten brauchen keine 700px. */
.shared-drawer .pvw-gesamtnote .pvw-bausteine {
  max-width: 480px;
  margin-bottom: 0;
}

/* Live-Satzvorschau der Sektion: der Vertragssatz, der aus den Eingaben
   entsteht — ruhige Zitat-Optik unter dem Feld-Raster. */
.shared-drawer .pvw-satz {
  margin-top: var(--space-2-5);
  padding: var(--space-2) var(--space-3);
  background: var(--lod-blue-50);
  border-left: 3px solid var(--brand-default);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-style: italic;
  color: var(--color-text-secondary);
}

/* Info-Icon am Feld-Label (f.info): Erläuterungen als Popover statt als
   Dauer-Hinweis, der das Raster aufdrueckt. Optik + Interaktion = SSOT der
   Startseiten-Kennzahl-Legende (mtk-info-btn, window.Popover) — bewusst kein
   natives title-Attribut. 16px Button: bleibt UNTER der Label-Zeilenhöhe,
   sonst steht das Control der Zelle 1px tiefer als sein Zeilen-Nachbar. */
.shared-drawer .pvw-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: var(--space-1);
  padding: 0;
  border: 0;
  border-radius: var(--radius-circular, 50%);
  background: transparent;
  cursor: pointer;
  vertical-align: text-bottom;
}
.shared-drawer .pvw-info img {
  display: block;
  filter: brightness(0) saturate(100%) invert(55%);
  transition: filter var(--duration-quick);
}
.shared-drawer .pvw-info:hover,
.shared-drawer .pvw-info[aria-expanded="true"] { background: var(--lod-gray-100); }
.shared-drawer .pvw-info:hover img,
.shared-drawer .pvw-info[aria-expanded="true"] img {
  filter: invert(13%) sepia(15%) saturate(1200%) hue-rotate(190deg) brightness(95%);
}
.shared-drawer .pvw-info:focus-visible { outline: 2px solid var(--brand-default); outline-offset: 1px; }
/* Popover-Panel + Karte: body-appended via SSOT window.Popover, daher global
   (nicht .app-scope-gescoped) — Optik identisch zur mtk-Legende. */
.pvw-info-popup.app-popover {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-tooltip);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 0;
  overflow: hidden;
  z-index: var(--z-tooltip);
  animation: lod-fade-slide-in var(--duration-quick) var(--ease-out-soft);
}
.pvw-info-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-3-5);
}
.pvw-info-card-title {
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.pvw-info-card-text {
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* Paket-Bestandteile (Schritt 2): Pflicht-Dokumente mit Haken, optionale als Checkbox. */
.shared-drawer .pvw-bestandteil {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1) 0;
  font-size: var(--font-size-sm);
}
.shared-drawer .pvw-bestandteil .ui-ico img { opacity: .7; }
.shared-drawer .pvw-bestandteil-optional { cursor: pointer; }
.shared-drawer .pvw-bestandteil-optional input[type="checkbox"] { accent-color: var(--brand-default); width: 16px; height: 16px; }
/* Zeilen-Aktion (z.B. Einzel-Vorschau im Entwurfs-Paket): kompakter pvw-pdf-btn
   rechtsbündig in der Bestandteil-Zeile. */
.shared-drawer .pvw-bestandteil .pvw-pdf-btn { margin-left: auto; }

/* ── Schritt 3: Vorschau ──────────────────────────────────────────────────
   Toolbar (Dokument-Tabs + PDF-Button), darunter die scale-to-fit A4-Ansicht. */
.shared-drawer .pvw-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-1) 0 var(--space-2) 0;
}
.shared-drawer .pvw-dok-schalter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  min-width: 0;
}
.shared-drawer .pvw-dok-tab {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard);
}
.shared-drawer .pvw-dok-tab:hover { border-color: var(--brand-default); color: var(--color-text); }
.shared-drawer .pvw-dok-tab.is-active {
  background: var(--brand-default);
  border-color: var(--brand-default);
  color: var(--brand-text-on);
}
.shared-drawer .pvw-pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-1) var(--space-2-5);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard);
}
.shared-drawer .pvw-pdf-btn:hover:not(:disabled) { border-color: var(--brand-default); color: var(--brand-default); }
.shared-drawer .pvw-pdf-btn:disabled { opacity: .6; cursor: default; }
.shared-drawer .pvw-pdf-btn .ui-ico img { opacity: .7; }

/* Viewport: fixe Hoehe + grauer Blattkanten-Hintergrund. Das iframe bleibt
   logisch A4-breit (794px) und wird per JS-transform auf die Viewport-Breite
   herunterskaliert — so ist die Seite VOLLSTAENDIG sichtbar (nichts mehr rechts
   abgeschnitten); vertikal scrollt das iframe intern durch die Seiten. */
.shared-drawer .pvw-a4-viewport {
  /* Blattkanten-Grau des A4-Backdrops: liegt bewusst zwischen --lod-gray-100
     und -200, kein exaktes Token — als Component-Token gehalten (Muster
     --abs-cal-*) und vom genesteten iframe (.pvw-preview-frame) geerbt. */
  --pvw-paper: #e9ebee;
  position: relative;
  height: 70vh;
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--pvw-paper);
}
.shared-drawer .pvw-a4-viewport [data-pvw-preview] { position: absolute; inset: 0; }
.shared-drawer .pvw-preview-frame {
  width: 794px;
  border: 0;
  display: block;
  background: var(--pvw-paper);
  transform-origin: top left;
}

/* Schritt 3 — „Direkt an DocuSign senden" + Empfänger-Auswahl. */
.shared-drawer .pvw-docusign {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  padding: var(--space-4);
}
.shared-drawer .pvw-ds-toggle {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}
.shared-drawer .pvw-ds-toggle input[type="checkbox"] {
  margin: 0;
  margin-top: 2px;
  accent-color: var(--color-accent);
  flex: 0 0 auto;
}
.shared-drawer .pvw-ds-toggle-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shared-drawer .pvw-ds-toggle-label { font-size: var(--fs-body); font-weight: 600; color: var(--color-text); }
.shared-drawer .pvw-ds-toggle-hint { font-size: var(--fs-caption); color: var(--color-text-muted); }
.shared-drawer .pvw-ds-recip {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}

/* Notebook 1000–1399px — unveraendert (Drawer verschmaelert selbst). */
@media (min-width: 1000px) and (max-width: 1399px) {
  .shared-drawer .pvw-a4-viewport { height: 66vh; }
}

/* Tablet 600–999px — Vorschau flacher, Formular einspaltig. */
@media (min-width: 600px) and (max-width: 999px) {
  .shared-drawer .pvw-a4-viewport { height: 60vh; }
  .shared-drawer .pvw-vorlage { padding: var(--space-2); }
}

/* Mobile <600px — Kopfzeile stapelt, Formular einspaltig, Vorschau kompakt. */
@media (max-width: 599px) {
  .shared-drawer .pv-vertraege-head { flex-wrap: wrap; }
  .shared-drawer .pvw-a4-viewport { height: 54vh; }
}

/* Schmaler Drawer (Container-Query): Formular einspaltig — Spans explizit auf
   volle Breite, sonst erzeugte `span 4/6/8` implizite Extra-Spalten im 1fr-Grid. */
@container drawer (max-width: 640px) {
  .app-scope .shared-drawer .pvw-form { grid-template-columns: 1fr; }
  .app-scope .shared-drawer .pvw-feld--w4,
  .app-scope .shared-drawer .pvw-feld--w6,
  .app-scope .shared-drawer .pvw-feld--w8,
  .app-scope .shared-drawer .pvw-feld--w12 { grid-column: 1 / -1; }
}

/* Tablet (600–999): Touch-Targets ≥36px — die 32px-Wizard-Controls wachsen
   geschlossen mit der SSOT-Control-Höhe aus drawer-fields.css mit, sonst
   platzt z.B. der innere 36px-Input aus dem 32px-Number-Wrap.
   Der CustomSelect-Trigger steht einzeln (nicht in der Komma-Gruppe): der
   Responsive-Audit-Parser matcht Tablet-Overrides selektorgenau. */
@media (max-width: 999px) {
  .shared-drawer .pvw-feld-slot .select[data-cs-trigger] { height: auto; min-height: 36px; }
  .shared-drawer .pvw-feld-slot .app-drawer-number-wrap,
  .shared-drawer .pvw-feld-slot.app-async-picker,
  .shared-drawer .pvw-feld-slot.app-betreff-picker,
  .shared-drawer .pvw-segment { height: auto; min-height: 36px; }
}

/* ── Genehmigungs-Routing: Persona-Chip (wer genehmigt konkret) ──────────────
   Ein Routing-Wert (Vorgesetzter/Ausbilder) loest zur Person auf; der Chip
   zeigt Avatar + Name rechts neben Wert/Dropdown. */
.shared-drawer .pv-gen-view {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.shared-drawer .pv-gen-routing { color: var(--color-text); }
.shared-drawer .pv-gen-persona {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: 2px var(--space-2) 2px 2px;
  background: var(--lod-gray-50);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  max-width: 100%;
  min-width: 0;
}
.shared-drawer .pv-gen-persona .avatar-slot { flex: 0 0 auto; display: inline-flex; }
.shared-drawer .pv-gen-persona-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shared-drawer .pv-gen-persona.is-missing {
  background: var(--status-warning-bg);
  border-color: transparent;
  color: var(--color-text-tertiary);
  padding-left: var(--space-2);
}
/* Klickbare „…hinterlegt"-Warnung (N3) → springt in den Edit-Modus zum Feld. */
.shared-drawer .pv-gen-persona.is-missing.is-clickable { cursor: pointer; }
.shared-drawer .pv-gen-persona.is-missing.is-clickable:hover { text-decoration: underline; }
.shared-drawer .pv-gen-persona.is-missing.is-clickable:focus-visible { outline: 2px solid var(--brand-default); outline-offset: 1px; }
/* Kurzer Feld-Highlight nach dem Sprung (reuse pvFlash-Keyframes, s.u.). */
.shared-drawer .pv-field-flash { border-radius: var(--radius-sm); animation: pvFlash 1.2s var(--ease-soft); }
/* Edit-Slot: Dropdown + Live-Persona nebeneinander, umbrechend auf schmal. */
.shared-drawer .field-value-content.pv-gen-edit {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.shared-drawer .pv-gen-select { flex: 1 1 190px; min-width: 150px; }
.shared-drawer .pv-gen-persona-host:empty { display: none; }

/* Handlungsbedarf-Navigation: kurzer Ziel-Highlight nach Tab-/Sektion-Sprung. */
.shared-drawer .drawer-section.pv-flash {
  border-radius: var(--radius-md);
  animation: pvFlash 1.6s var(--ease-soft);
}
@keyframes pvFlash {
  0%   { background: var(--brand-bg-subtle); }
  70%  { background: var(--brand-bg-subtle); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .shared-drawer .drawer-section.pv-flash { animation: none; }
}

/* ── Microsoft-Portal-Menü (Header): Persona + Entra/M365-Deep-Links ─────────*/
/* Breite steuert das Popover (minWidth: 260 in Popover.open) — hier kein
   fixes min-width (sonst Responsive-Audit-Treffer). */
.pv-msportal-menu { padding: var(--space-1); }
.pv-msportal-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-1-5);
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: var(--space-1);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.pv-msportal-head .avatar-slot { flex: 0 0 auto; display: inline-flex; }
.pv-msportal-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-msportal-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2-5, var(--space-2));
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: background var(--duration-quick) var(--ease-soft);
}
.pv-msportal-item:hover { background: var(--lod-gray-50); }

/* ── Meine Akte (Self-Modus): Melde-Band + Inline-Formular ─────────────────
   "Bitte anpassen"-Aufforderung ueber den Tabs. Band = brand-getoenter
   Streifen (Muster pv-status-band), Formular = akzentuierter Kasten
   (Muster pv-az-editor). Fluide Breiten, keine Fixmasse. */
.shared-drawer .pv-meldung-band {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2-5);
  padding: var(--space-2-5) var(--space-3);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--brand-default);
  background: color-mix(in srgb, var(--brand-default) 5%, transparent);
}
.shared-drawer .pv-meldung-band .ui-ico img { opacity: 0.8; }
.shared-drawer .pv-meldung-band-text {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0; flex: 1 1 auto;
}
.shared-drawer .pv-meldung-band-text b { font-size: var(--font-size-base); color: var(--color-text); }
.shared-drawer .pv-meldung-band-text span {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.shared-drawer .pv-meldung-band > .btn { flex: 0 0 auto; }

/* Warn-Banner „fehlende Pflicht-Zusatzvereinbarung" (HR/Mgmt-Sicht, über den Tabs).
   Struktur wie .pv-meldung-band, aber Warn-Ton. Flex-wrap → keine Breakpoint-Regeln nötig. */
.shared-drawer .pv-zv-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2-5);
  padding: var(--space-2-5) var(--space-3);
  margin-bottom: var(--space-3);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--status-warning-fg);
  background: var(--status-warning-bg);
}
.shared-drawer .pv-zv-banner .ui-ico img { opacity: 0.85; }
.shared-drawer .pv-zv-banner-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.shared-drawer .pv-zv-banner-text b { font-size: var(--font-size-base); color: var(--color-text); }
.shared-drawer .pv-zv-banner-text span { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.shared-drawer .pv-meldung-form {
  border: 1px solid var(--brand-default);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: color-mix(in srgb, var(--brand-default) 3%, transparent);
}
.shared-drawer .pv-meldung-form-title {
  display: flex; align-items: center; gap: var(--space-1-5);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-2);
}
.shared-drawer .pv-meldung-row {
  display: flex; flex-direction: column; gap: var(--space-1);
  margin-bottom: var(--space-2);
}
.shared-drawer .pv-meldung-row > label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.shared-drawer .pv-meldung-textarea {
  width: 100%;
  resize: vertical;
  font: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  padding: var(--space-1-5) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-canvas, #fff);
}
.shared-drawer .pv-meldung-textarea:focus-visible {
  outline: 2px solid var(--brand-default);
  outline-offset: -1px;
}
.shared-drawer .pv-meldung-hint {
  font-size: var(--fs-caption, 12px);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-2);
}
.shared-drawer .pv-meldung-actions {
  display: flex; gap: var(--space-2);
}
/* Self-Modus-Ausnahme: das Melde-Formular lebt in einem View-Modus-Drawer
   (drawer-view sperrt generisch alle Inputs via pointer-events:none + grau +
   transparentem Grund). Die Meldung ist aber gerade die eine INTERAKTIVE
   Flaeche der read-only Akte — hoehere Spezifitaet hebt die Sperre gezielt
   fuer die Formular-Controls auf. */
.app-scope .shared-drawer.drawer-view .pv-meldung-form textarea,
.app-scope .shared-drawer.drawer-view .pv-meldung-form select,
/* Meine Akte: die selbst-pflegbare Kontakt-Sektion ist ebenfalls im
   read-only Self-Drawer (drawer-view) — ihre Edit-Inputs müssen bedienbar sein. */
.app-scope .shared-drawer.drawer-view .pv-kontakt .app-drawer-input,
.app-scope .shared-drawer.drawer-view .pv-kontakt input {
  pointer-events: auto !important;
  opacity: 1;
  background: var(--color-bg-canvas, #fff);
  cursor: text;
}
.app-scope .shared-drawer.drawer-view .pv-meldung-form select { cursor: pointer; }
/* CustomSelect-Trigger im Melde-Formular re-asserten (Muster abrechnung.css):
   jedes <select> wird global per custom-select.js zu <button class="cs-trigger">
   enhanced; der .app-scope-Button-Reset strippt ihn sonst zu nacktem Text ohne
   Box/Chevron. 32px-Box wie die Nachbar-Controls. */
.app-scope .shared-drawer .pv-meldung-row .cs-wrap { width: 100%; }
.app-scope .shared-drawer .pv-meldung-row .cs-trigger {
  box-sizing: border-box;
  width: 100%;
  height: 32px;
  line-height: 30px;
  padding: 0 var(--space-8) 0 var(--space-2-5);
  border: 1px solid var(--lod-gray-200);
  border-radius: var(--radius-md);
  background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23616161' d='M2.22 4.47a.75.75 0 0 1 1.06 0L6 7.19l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L2.22 5.53a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E") no-repeat right var(--space-3) center;
  color: var(--lod-darkblue);
  font-size: 13px;
  text-align: left;
}
.app-scope .shared-drawer .pv-meldung-row .cs-trigger:hover { border-color: var(--lod-gray-400); }
.app-scope .shared-drawer .pv-meldung-row .cs-open .cs-trigger,
.app-scope .shared-drawer .pv-meldung-row .cs-trigger:focus-visible { border-color: var(--brand-default); outline: none; }

/* ── Meine Akte: Private Kontaktdaten + Notfallkontakt (Self-Service editierbar) ──
   Eigene Sektion unter den Stammdaten. Sub-Head trennt „Notfallkontakt" vom
   Privat-Block; Hinweis + Aktionen im Self-Modus. */
.shared-drawer .pv-kontakt .pv-kontakt-subhead {
  margin: var(--space-3) 0 var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
}
.shared-drawer .pv-kontakt-hint {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-caption, 12px);
  color: var(--color-text-tertiary);
}
.shared-drawer .pv-kontakt-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* ── Compliance ↔ Vertrag-Verknüpfung (gleiche Zeile) ──────────────────────
   Datenschutz-/Sicherheitsschulung-Flag + Link auf den zugehörigen Vertrag. */
.shared-drawer .pv-compliance-val { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.shared-drawer .pv-compliance-vertrag,
.shared-drawer .pv-consent-neu {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 1px var(--space-1-5);
  border-radius: var(--radius-sm);
  color: var(--brand-default);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--duration-quick) var(--ease-soft);
}
.shared-drawer .pv-compliance-vertrag:hover,
.shared-drawer .pv-consent-neu:hover { background: var(--lod-gray-50); text-decoration: underline; }
.shared-drawer .pv-compliance-vertrag .ui-ico img,
.shared-drawer .pv-consent-neu .ui-ico img { opacity: 0.75; }
.shared-drawer .pv-compliance-vertrag:focus-visible,
.shared-drawer .pv-consent-neu:focus-visible { outline: 2px solid var(--brand-default); outline-offset: 1px; }

/* Ausstattung-Tab: Geräte-/Fahrzeug-Zeilen sind für HR/Mgmt klickbar (öffnen den
   Detail-Drawer). Nur die als role="button" markierten Zeilen bekommen die
   Affordanz — im Self-Modus tragen sie kein role und bleiben neutral. */
.shared-drawer .ge-akte-row[role="button"] { cursor: pointer; border-radius: var(--radius-sm); }
.shared-drawer .ge-akte-row[role="button"]:hover { background: var(--lod-gray-50); }
.shared-drawer .ge-akte-row[role="button"]:focus-visible { outline: 2px solid var(--brand-default); outline-offset: 1px; }

/* ── Tab: Entwicklung & Ziele ───────────────────────────────────────────────
   Zertifikate, Zielvereinbarungs-Teilziele, KPI-Ziele — Karten-Optik auf dem
   Qualitätsniveau der Verträge-Sektion (.pv-vertrag-row): weiße Karten mit
   Icon-Tile, Hover-Affordanz + Chevron auf klickbaren Zeilen (HR → Drawer). */
.shared-drawer .pv-ent-stats {
  display: flex;
  gap: var(--space-2-5);
  margin-bottom: var(--space-3-5);
}
.shared-drawer .pv-ent-stat {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2-5) var(--space-3);
}
.shared-drawer .pv-ent-stat-ico {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
}
.shared-drawer .pv-ent-stat-ico img { width: 18px; height: 18px; opacity: 0.8; }
.shared-drawer .pv-ent-stat--ok .pv-ent-stat-ico { background: var(--status-success-bg); }
.shared-drawer .pv-ent-stat--brand .pv-ent-stat-ico { background: color-mix(in srgb, var(--brand-default) 10%, transparent); }
.shared-drawer .pv-ent-stat--info .pv-ent-stat-ico { background: var(--status-info-bg); }
.shared-drawer .pv-ent-stat-main { min-width: 0; }
.shared-drawer .pv-ent-stat-val {
  font-size: var(--font-size-xl, var(--font-size-lg));
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  line-height: 1.2;
}
.shared-drawer .pv-ent-stat-lbl {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shared-drawer .pv-ent-block { margin-bottom: var(--space-4); }
.shared-drawer .pv-ent-block-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.shared-drawer .pv-ent-block-head .ui-ico img { width: 16px; height: 16px; opacity: 0.75; }
.shared-drawer .pv-ent-count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: var(--color-bg-muted);
  border-radius: var(--radius-pill-sm);
  padding: 0 var(--space-1-5);
}

/* Zeilen als Karten (Optik-Paar zu .pv-vertrag-row). */
.shared-drawer .pv-ent-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}
.shared-drawer .pv-ent-row {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2-5) var(--space-3);
}
.shared-drawer .pv-ent-row--click {
  cursor: pointer;
  transition: border-color var(--duration-quick) var(--ease-soft),
              box-shadow var(--duration-quick) var(--ease-soft);
}
.shared-drawer .pv-ent-row--click:hover {
  border-color: var(--brand-default);
  box-shadow: var(--shadow-sm);
}
.shared-drawer .pv-ent-row--click:focus-visible {
  outline: 2px solid var(--brand-default);
  outline-offset: 2px;
}
.shared-drawer .pv-ent-ico {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  flex: 0 0 auto;
}
.shared-drawer .pv-ent-ico .ui-ico img { width: 18px; height: 18px; opacity: 0.8; }
.shared-drawer .pv-ent-ico--ok { background: var(--status-success-bg); }
.shared-drawer .pv-ent-ico--info { background: var(--status-info-bg); }
.shared-drawer .pv-ent-main { flex: 1 1 auto; min-width: 0; }
.shared-drawer .pv-ent-name {
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  flex-wrap: wrap;
}
.shared-drawer .pv-ent-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.shared-drawer .pv-ent-row--ziel.is-done .pv-ent-name { color: var(--color-text-secondary); }
.shared-drawer .pv-ent-chevron { flex-shrink: 0; }
.shared-drawer .pv-ent-chevron img { opacity: 0.45; }

/* Leerzustand je Block (statt nacktem Hinweistext). */
.shared-drawer .pv-ent-empty {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  padding: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Kleine Kategorie-Tags (Level/Herausgeber) direkt im Namen. */
.shared-drawer .pv-ent-tag {
  font-size: var(--font-size-xs);
  font-weight: var(--fw-regular);
  color: var(--color-text-secondary);
  background: var(--color-bg-muted);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-1-5);
}
.shared-drawer .pv-ent-tag--soft { color: var(--color-text-muted); background: transparent; border: 1px solid var(--color-border-subtle); }

/* Status-Pille rechts. */
.shared-drawer .pv-ent-badge {
  flex: 0 0 auto;
  font-size: var(--font-size-xs);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-pill-sm);
  padding: 2px var(--space-2);
  border: 1px solid transparent;
  white-space: nowrap;
}
.shared-drawer .pv-ent-badge--ok     { background: var(--status-success-bg); color: var(--status-success-fg); border-color: var(--status-success-border); }
.shared-drawer .pv-ent-badge--warn   { background: var(--status-warning-bg); color: var(--status-warning-fg); border-color: var(--status-warning-border); }
.shared-drawer .pv-ent-badge--danger { background: var(--status-danger-bg); color: var(--status-danger-fg); border-color: var(--status-danger-border); }
.shared-drawer .pv-ent-badge--info   { background: var(--status-info-bg); color: var(--status-info-fg); border-color: var(--status-info-border); }
.shared-drawer .pv-ent-badge--muted  { background: var(--color-bg-muted); color: var(--color-text-muted); }

/* Chips (Zielvereinbarung, Belohnung, Kosten) in der Meta-Zeile. */
.shared-drawer .pv-ent-chips { display: inline-flex; align-items: center; gap: var(--space-1-5); flex-wrap: wrap; }
.shared-drawer .pv-ent-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill-sm);
  padding: 1px var(--space-1-5);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shared-drawer .pv-ent-chip .ui-ico img { width: 12px; height: 12px; opacity: 0.7; }
.shared-drawer .pv-ent-chip--reward { color: var(--brand-default); border-color: var(--color-border-subtle); }
.shared-drawer .pv-ent-chip--overdue { color: var(--status-danger-fg); border-color: var(--status-danger-border); background: var(--status-danger-bg); }
.shared-drawer .pv-ent-chip--kpi { color: var(--status-info-fg); border-color: var(--status-info-border); background: var(--status-info-bg); }
/* Zertifikat-Name als Link zur Prüfungsseite. */
.shared-drawer .pv-ent-link { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-text); text-decoration: none; }
.shared-drawer .pv-ent-link:hover { color: var(--brand-default); text-decoration: underline; }
.shared-drawer .pv-ent-link .ui-ico img { width: 12px; height: 12px; opacity: 0.6; }

/* Ziel-Gruppen (nach Zielvereinbarung) — Zeilen gestapelt wie .pv-ent-list. */
.shared-drawer .pv-ent-gruppe {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  margin-bottom: var(--space-2-5);
}
.shared-drawer .pv-ent-gruppe-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-0-5, 2px);
}
.shared-drawer .pv-ent-gruppe-head--frei { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: var(--fw-medium); }

/* ── Entwicklung & Ziele: HR-Pflege (CRUD) ──────────────────────────────────
   Titelzeilen-Aktionen + Zeilen-Quick-Actions. Nur HR/Mgmt gerendert. */
/* Aktionen in der „Entwicklung & Ziele"-Titelzeile (rechts neben dem h4). */
.shared-drawer .pv-ent-head-actions { display: inline-flex; gap: var(--space-2); flex-wrap: wrap; }

/* Zeilen-Aktionsknöpfe (rechts nach der Status-Pille). */
.shared-drawer .pv-ent-actions { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; margin-left: var(--space-1); }
.shared-drawer .pv-ent-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: background var(--duration-quick, 120ms) var(--ease-soft, ease);
}
.shared-drawer .pv-ent-act:hover { background: var(--color-bg-muted); }
.shared-drawer .pv-ent-act .ui-ico img { width: 16px; height: 16px; opacity: 0.75; }
.shared-drawer .pv-ent-act--danger:hover { background: var(--status-danger-bg); }
.shared-drawer .pv-ent-act--danger:hover .ui-ico img { opacity: 1; }
.shared-drawer .pv-ent-act:focus-visible { outline: 2px solid var(--brand-default); outline-offset: 1px; }

/* Statischer Zertifikat-Name (Edit-Modus im zt-drawer: der Katalog-Eintrag ist
   fix, nur seine Ausprägung wird gepflegt). Das frühere Inline-Formular ist in
   die gestackten zt-/zl-/kz-drawer gewandert. */
.shared-drawer .pv-ent-static { padding: var(--space-1-5) 0; font-weight: var(--fw-medium); color: var(--color-text); }

/* drawer-view sperrt generisch input/select/textarea + button (pointer-events:none).
   Ausnahme für die read-only Aktionen im Entwicklung- UND Arbeitszeit-Host
   (Bearbeiten-Stift, Ziel-Toggle, Bescheinigung-Ansehen) — sie öffnen die
   gestackten Drawer bzw. einen Link und müssen im View-Modus klickbar bleiben.
   Inline-Formularfelder gibt es in beiden Hosts nicht mehr (Editoren sind in die
   Drawer gewandert). Gleiche Technik wie .pv-meldung-form / .pv-kontakt. */
.app-scope .shared-drawer.drawer-view [data-pv-ent-host] button,
.app-scope .shared-drawer.drawer-view [data-pv-ent-host] a,
.app-scope .shared-drawer.drawer-view [data-pv-az-host] button,
.app-scope .shared-drawer.drawer-view [data-pv-az-host] a {
  pointer-events: auto !important;
  opacity: 1 !important;
}

/* zt-drawer (Zertifikat): die Bescheinigungs-Sektion nutzt die geteilte
   Doc-Card (.drawer-doc-card, _shared/shared-drawer.css) — kein Eigen-Styling. */

/* ── „Krankheit & weitere Abwesenheiten" — Jahres-Trend (pv-abw) ──────────────
   Die Krank-Zusammenfassung nutzt jetzt das gemeinsame .pv-konto-hero-Bauteil
   (Überblick, gleich groß wie Urlaub); hier bleibt nur der Jahres-Trend als
   Balkenliste in der Nachschlagen-Zone. Krank-Akzent via --lod-danger (dezent,
   color-mix). Balken-Fill kommt datengetrieben über --pv-abw-fill. */
.shared-drawer .pv-abw-trend-title { font-size: var(--font-size-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.shared-drawer .pv-abw-row { display: grid; grid-template-columns: 3.5rem 1fr auto auto; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; }
.shared-drawer .pv-abw-row-year { font-size: var(--font-size-sm); font-weight: var(--fw-medium); color: var(--color-text-secondary); }
.shared-drawer .pv-abw-row.is-current .pv-abw-row-year { color: var(--brand-default); font-weight: var(--fw-semibold); }
.shared-drawer .pv-abw-bar { height: 8px; border-radius: var(--radius-pill); background: var(--color-bg-muted); overflow: hidden; }
.shared-drawer .pv-abw-bar-fill { display: block; height: 100%; width: var(--pv-abw-fill, 0%); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--lod-danger) 55%, var(--color-bg-muted)); }
.shared-drawer .pv-abw-row.is-current .pv-abw-bar-fill { background: var(--lod-danger); }
.shared-drawer .pv-abw-row-days { font-size: var(--font-size-sm); font-weight: var(--fw-semibold); color: var(--color-text); white-space: nowrap; }
.shared-drawer .pv-abw-row-unit { font-weight: var(--fw-regular, 400); color: var(--color-text-muted); }
.shared-drawer .pv-abw-row-eps { font-size: var(--font-size-xs); color: var(--color-text-muted); min-width: 2rem; text-align: right; }
.shared-drawer .pv-abw-row-extra { grid-column: 2 / -1; font-size: var(--font-size-xs); color: var(--color-text-muted); }

@media (max-width: 999px) {
  .shared-drawer .pv-verlauf-body { padding-left: var(--space-2-5); padding-right: var(--space-2-5); }
}
@media (max-width: 599px) {
  .shared-drawer .pv-abw-row { grid-template-columns: 3rem 1fr auto; }
  .shared-drawer .pv-abw-row-eps { display: none; }
  .shared-drawer .pv-verlauf-body { padding-left: var(--space-2); padding-right: var(--space-2); }
}

/* ── Abwesenheit: „Verlauf & Kontopflege" (eingeklappte Nachschlagen-Zone) ────
   Native <details>-Disclosure — Historie/Kontopflege liegen gebündelt hinter
   einer klickbaren Zusammenfassung, damit Überblick + Anträge oben ungestört
   bleiben. Chevron rechts als Affordance (der native Marker ist bei
   display:flex verschwunden). Kein eigener Hintergrund: die inneren
   .drawer-section-Blöcke (Kontopflege/Tabelle/Trend) sollen wie überall lesen. */
.shared-drawer .pv-verlauf-box {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.shared-drawer .pv-verlauf-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2-5) var(--space-3);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.shared-drawer .pv-verlauf-summary::-webkit-details-marker { display: none; }
.shared-drawer .pv-verlauf-summary:hover { background: var(--color-bg-muted); }
.shared-drawer .pv-verlauf-chev {
  margin-left: auto;
  display: inline-flex;
  transition: transform var(--duration-quick, 120ms) var(--ease-enter, ease);
}
.shared-drawer .pv-verlauf-chev img { opacity: 0.6; }
.shared-drawer .pv-verlauf-box[open] .pv-verlauf-summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.shared-drawer .pv-verlauf-box[open] .pv-verlauf-chev { transform: rotate(180deg); }
.shared-drawer .pv-verlauf-body {
  padding: var(--space-4) var(--space-3) var(--space-3);
  border-top: 1px solid var(--color-border);
}
/* Referenz-Box als letzter Body-Abschnitt NICHT vertikal fuellen — sonst
   klafft Leerraum unter der eingeklappten Summary. Überschreibt die
   :last-child-Fill-Regel aus shared-drawer.css (höhere Spezifität via .pv-verlauf). */
.app-scope .shared-drawer .drawer-body > .drawer-section.pv-verlauf:last-child {
  flex: 0 0 auto;
  display: block;
}

/* Ziel-Fortschritt (messbares Teilziel: Ist/effektives Ziel) — schlanke Balken-
   zeile unter der Ziel-Meta. Fill datengetrieben über --pv-ent-fill. */
.shared-drawer .pv-ent-progress { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.shared-drawer .pv-ent-progress-bar { flex: 1 1 auto; max-width: 240px; height: 6px; border-radius: var(--radius-pill); background: var(--color-bg-muted); overflow: hidden; }
.shared-drawer .pv-ent-progress-fill { display: block; height: 100%; width: var(--pv-ent-fill, 0%); border-radius: var(--radius-pill); background: var(--brand-default); }
.shared-drawer .pv-ent-progress.is-done .pv-ent-progress-fill { background: var(--lod-success, var(--status-success-fg, #2e7d32)); }
.shared-drawer .pv-ent-progress-lbl { font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; }