/* ════════════════════════════════════════════════════════════════════════════
 * ZENTRALE VORGANGSAKTE „VERLAUF" — Namespace `.vl-`
 *
 * Gestaltungsgrundlage: public/css/design-system.css (Victor CI).
 * AUSSCHLIESSLICH Tokens (var(--…)) — keine Hex-Farben, keine rohen px-Schriftgrößen.
 *
 * Haltung: der INHALT dominiert. Typen sind an einem kleinen Icon und einem
 * dezenten Typ-Label erkennbar, nicht an bunten Flächen. Es gibt keine Karten
 * je Eintrag, keine großen Badges, keine Social-Media-Optik — eine ruhige,
 * dichte Zeitachse, wie ein gut geführtes Aktenblatt.
 * ══════════════════════════════════════════════════════════════════════════ */

.vl {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
 * STEUERUNG — drei flache Ebenen über dem Inhalt, keine Karten
 *
 * 1 Titelzeile  (Titel · Trefferzahl · Ansicht · + Eintrag)   ~30 px
 * 2 Schnellansichten (ruhige Textnavigation)                  ~30 px
 * 3 Werkzeugleiste  (Suche · Filter · Gruppieren · Sortierung · Darstellung) ~40 px
 *
 * Kein Container, kein Rahmen, kein Schatten um diese Ebenen — sie werden
 * allein durch Weißraum und eine feine Trennlinie vom Inhalt geschieden.
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Titelzeile ───────────────────────────────────────────────────────── */
.vl-top {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-height: 28px;
}
.vl-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.vl-count {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
/* Aktionscluster der Titelzeile: Sichten · E-Mail · Notiz · Tel.-Notiz · + Eintrag.
   EINE Höhe für alle fünf. Vorher standen hier drei (32 px „Sichten", 34 px
   .vl-tool, 38 px „+ Eintrag" — .vi-btn-primary in components.css überstimmt
   mit `min-height` jede lokale `height`-Angabe). Die Zeile wird dadurch NICHT
   höher als zuvor: `.vl-top` behält seine `min-height: 28px`. */
.vl-top-a {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.vl-top-a .vl-tool { height: 32px; padding: 0 var(--space-3); }
/* „Sichten" ändert die Darstellung, es erfasst nichts — deshalb etwas Abstand
   zu den Erfassungsaktionen. Eine Trennlinie wäre hier eine Linie zu viel
   (Leitsatz „Fläche und Hierarchie vor Rahmen"). */
.vl-top-a .vl-tool-quiet { margin-right: var(--space-2); }
/* Die Optik der Schnellaktionen steht bewusst WEITER UNTEN, direkt hinter der
   Grunddefinition von `.vl-tool` — sonst überschriebe die Grundregel (gleiche
   Spezifität, später in der Datei) Fläche, Farbe und Symbolgröße wieder. */

/* ── 2 · Schnellansichten: Textnavigation, keine zweite Tableiste ─────────── */
.vl-views {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: var(--space-2);
}
.vl-view {
  appearance: none;
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  padding: 4px 9px;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
  line-height: 1.5;
}
.vl-view:hover { background: var(--color-sage-soft); color: var(--color-forest); }
.vl-view:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.vl-view.is-active {
  background: var(--color-forest-soft);
  color: var(--color-forest);
  font-weight: var(--fw-medium);
}
/* Zähler sind sekundär — nie so kräftig wie die Beschriftung. */
.vl-view-n {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.vl-view.is-active .vl-view-n { color: var(--color-forest); opacity: .7; }
.vl-caret {
  width: 0; height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: .55;
  align-self: center;
  margin-left: 2px;
}

/* ── 3 · EINE Werkzeugleiste ──────────────────────────────────────────────── */
.vl-tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-default);
  flex-wrap: nowrap;
}
.vl-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 160px;
  max-width: 380px;
  height: 34px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 0 var(--space-3);
  gap: var(--space-2);
}
.vl-search:focus-within { border-color: var(--color-sage); box-shadow: var(--focus-ring); }
.vl-search svg { width: 15px; height: 15px; color: var(--text-muted); flex: 0 0 auto; }
.vl-search input {
  border: 0;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-primary);
  width: 100%;
  min-width: 0;
}
.vl-tool {
  appearance: none;
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
}
.vl-tool:hover { background: var(--color-sage-soft); color: var(--color-forest); }
.vl-tool:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.vl-tool svg { width: 14px; height: 14px; opacity: .7; }
.vl-tool.is-on { border-color: var(--color-forest); color: var(--color-forest); background: var(--color-forest-soft); }
.vl-tool-n {
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--color-forest);
  color: var(--color-surface);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
/* „Ansicht" in der Titelzeile: rahmenlos, damit die Primäraktion führt. */
.vl-tool-quiet { border-color: transparent; background: transparent; height: 32px; }
.vl-tool-quiet:hover { border-color: var(--border-default); }

/* ── Schnellaktionen der Titelzeile: Symbol + Beschriftung ────────────────
   Steht HINTER `.vl-tool`, weil beide dieselbe Spezifität haben und sonst die
   Grundregel gewänne. Größe und Rahmen kommen unverändert von `.vl-tool`; hier
   steht nur, was diese drei Knöpfe unterscheidet. */
.vl-quick { gap: var(--space-1); }
.vl-quick-i { display: inline-flex; flex: none; }
.vl-quick .vl-quick-i svg { width: 15px; height: 15px; opacity: 1; }

/* E-Mail ist der Hauptarbeitskanal eines Vorgangs und trägt deshalb als EINZIGE
   Aktion die Markenfläche — nicht als übergroßer CTA, sondern in genau derselben
   Größe wie die Nachbarn. `--brand-primary` ist laut CI die Farbe der Aktion;
   dieselbe Rolle, die `.mv-act-primary` im Lesebereich spielt. */
.vl-tool-primary,
.vl-tool-primary:hover {
  border-color: transparent;
  color: var(--text-inverse);
}
.vl-tool-primary { background: var(--brand-primary, var(--color-forest)); }
.vl-tool-primary:hover { background: var(--brand-primary-hover, var(--color-forest)); }
.vl-tool-primary .vl-quick-i svg { opacity: 1; }
/* „+ Eintrag" ist jetzt das Menü der Sonderfälle, nicht mehr die Primäraktion. */
.vl-quick-more { color: var(--text-secondary); }

/* Darstellungsumschalter Verlauf | Liste | Kompakt — ein Segmentschalter,
   optisch identisch zu den Modul-Segmenten (.vmod-seg). */
.vl-seg {
  display: inline-flex;
  flex: 0 0 auto;
  height: 34px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}
.vl-seg-b {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0 var(--space-3);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.vl-seg-b + .vl-seg-b { border-left: 1px solid var(--border-default); }
.vl-seg-b:hover { background: var(--color-sage-soft); color: var(--color-forest); }
.vl-seg-b.is-active {
  background: var(--color-forest-soft);
  color: var(--color-forest);
  font-weight: var(--fw-medium);
}
.vl-seg-b:focus-visible { outline: none; box-shadow: var(--focus-ring); position: relative; z-index: 1; }

/* ── Aktive Filter: nur vorhanden, wenn wirklich gefiltert wird ───────────── */
.vl-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-2);
}
.vl-chips[hidden] { display: none; }
.vl-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 var(--space-2) 0 var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--color-sage-soft);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
}
.vl-chip:hover { border-color: var(--color-forest); color: var(--color-forest); }
.vl-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.vl-chip-clear {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-xs);
  text-decoration: underline;
  cursor: pointer;
  padding: 0 var(--space-1);
}
.vl-chip-clear:hover { color: var(--color-forest); }

/* ── Filter-Drawer (app-weite .vi-drawer, nur Inhaltsregeln) ─────────────── */
.vl-drw-sec { margin-bottom: var(--space-4); }
.vl-drw-sec h3 {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  letter-spacing: .01em;
}
.vl-opt {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: 34px;
  padding: 0 var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}
.vl-opt:hover { background: var(--color-sage-soft); }
.vl-opt:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.vl-opt.is-on {
  background: var(--color-forest-soft);
  border-color: var(--color-forest);
  color: var(--color-forest);
  font-weight: var(--fw-medium);
}
.vl-opt-n { color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.vl-drw-range { display: flex; gap: var(--space-3); margin-top: var(--space-2); }
.vl-drw-range label {
  display: flex; flex-direction: column; gap: 2px;
  font-size: var(--text-xs); color: var(--text-muted); flex: 1 1 0;
}
.vl-drw-range input {
  height: 34px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 0 var(--space-2);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-primary);
}

/* ── Inhalt ───────────────────────────────────────────────────────────────── */
.vl-body { padding-top: var(--space-2); }

/* ══════════════════════════════════════════════════════════════════════════
 * A · VERLAUF (Zeitachse)
 * ══════════════════════════════════════════════════════════════════════════ */
.vl-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
/* Durchgehende Achse — eine einzige, sehr zurückhaltende Linie. */
.vl-timeline::before {
  content: "";
  position: absolute;
  left: 15px;
  top: var(--space-3);
  bottom: var(--space-3);
  width: 1px;
  background: var(--border-default);
}
.vl-i {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  align-items: start;
}
.vl-i + .vl-i { border-top: 1px solid var(--border-default); }
.vl-i-ic {
  position: relative;
  z-index: 1;
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full, 999px);
  background: var(--color-surface);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  flex: 0 0 auto;
}
.vl-i-ic svg { width: 15px; height: 15px; }

.vl-i-b { min-width: 0; }
.vl-i-type { font-weight: var(--fw-medium); color: var(--text-secondary); }
.vl-i-sep { color: var(--border-default); }
/* ── Eingang · Ausgang · Entwurf ────────────────────────────────────────────
   DEZENT heisst hier: EIN Symbol auf der ruhigen Standardflaeche. Keine Farbe
   je Richtung — die Richtung ist kein Status, und eine gruene bzw. rote Zeile
   wuerde die Liste einfaerben statt sie zu ordnen (CLAUDE.md: Statusfarben sind
   funktional und vom Markenakzent getrennt). Der Unterschied entsteht durch den
   gedrehten Pfeil, nicht durch einen Farbreiz.

   Die beiden Vorgaenger sind entfallen: das 6-px-Dreieck `.vl-i-dir` in Sage
   bzw. Forest und die Pfeilzeichen `.vl-dir-ic` in derselben Markenfarbe — zwei
   Darstellungen fuer dieselbe Aussage, beide markenfarbig, und keine davon war
   in der Zeitachse oder in der Kompaktzeile ueberhaupt sichtbar. */
.vl-dir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  color: var(--text-muted);
  vertical-align: middle;
}
.vl-dir svg { width: 12px; height: 12px; }

/* Ungelesen: EIN kleiner Punkt. Den Zustand traegt sonst die Typografie
   (halbfetter Betreff und Absender) — eine Farbflaeche oder eine Plakette waere
   in einer Liste aus lauter E-Mails nur Laerm. */
.vl-unread {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  margin-right: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--text-primary);
  vertical-align: middle;
}
.vl-i.is-unread .vl-i-title { font-weight: var(--fw-semibold); }
.vl-c.is-unread .vl-c-s { font-weight: var(--fw-semibold); }

/* Feedback #5 §5.1: EIN Titel ist höchstens zwei Zeilen hoch.
   Die dauerhafte Reparatur sitzt im Projektor (die Ereignisart IST der Titel
   einer Ticketnachricht) — diese Regel ist der Sicherungsanker: kein Eintrag,
   welcher Art auch immer, darf die Zeitachse mit einem mehrzeiligen fetten
   Block dominieren. Der vollständige Text steht in der Vorschau darunter und
   im Lesebereich rechts; verloren geht nichts. */
.vl-i-title {
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  line-height: var(--lh-snug);
  margin-top: 2px;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vl-i-sum {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vl-i-st { color: var(--text-secondary); }

/* ── Verdichtete Zeile (20.08.2026): Titel · EINE Metazeile · Marker ─────────
   Vorher standen Art, Richtung, Beteiligter, Zeit, Status, Anhänge und Bearbeiter
   auf bis zu fünf gleichgewichteten Ebenen. Jetzt trägt der Titel die Aussage,
   darunter steht genau eine ruhige Zeile „Zeitpunkt · Beteiligter", und die
   Marker (Art, Anhänge, Status, Wichtig) bilden eine dritte, leise Reihe. */
.vl-i-line {
  margin-top: 1px;
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vl-i-line .vl-i-sep { margin: 0 var(--space-1); }
.vl-i-marks {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.vl-i-marks:empty { display: none; }

/* „Wichtig" ist die EINZIGE Hervorhebung mit Gold — Akzent bleibt selten. */
.vl-imp {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-gold-soft);
  color: var(--color-gold-ink);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  vertical-align: middle;
}
.vl-i.is-important .vl-i-ic { border-color: var(--color-gold); }

.vl-att {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.vl-att svg { width: 12px; height: 12px; }

/* Zeilenaktionen — erscheinen zurückhaltend, bleiben aber tastaturerreichbar. */
/* Zeilenaktionen: „Antworten" (nur an E-Mails) + Kebab.
   Der Platz ist IMMER belegt und über `min-width` für ALLE Zeilen gleich breit —
   sonst rückte der Text beim Überfahren und beim Wechsel zwischen Mail- und
   Nicht-Mail-Zeilen unruhig hin und her. Sichtbar werden die Knöpfe erst beim
   Überfahren, bei Tastaturfokus oder an der ausgewählten Zeile. */
.vl-i-a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  min-width: 60px;
  opacity: 0;
  transition: opacity var(--transition);
}
.vl-i:hover .vl-i-a,
.vl-i:focus-within .vl-i-a,
.vl-i.is-sel .vl-i-a { opacity: 1; }
/* Die Schnellantwort ist die eine Aktion, die man an einer Mail wirklich sucht —
   sie trägt deshalb die Marken-Ink statt des gedämpften Grau des Kebabs. */
.vl-reply { color: var(--color-forest); }
.vl-reply:hover { background: var(--color-sage-soft); }
/* Ohne Hover gibt es keinen Hover-Zustand: auf Touchgeräten stünden sonst
   unsichtbare, aber tippbare Knöpfe in jeder Zeile. */
@media (hover: none) {
  .vl-i-a, .vl-c .vl-kebab, .vl-c .vl-reply { opacity: 1; }
}
.vl-more-b,
.vl-kebab {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  padding: 2px var(--space-2);
  cursor: pointer;
  line-height: 1.4;
}
.vl-more-b:hover,
.vl-kebab:hover { background: var(--color-sage-soft); border-color: var(--border-default); }
.vl-more-b:focus-visible,
.vl-kebab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.vl-kebab {
  width: 28px; height: 28px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
}
.vl-kebab:hover { color: var(--color-forest); }
.vl-kebab svg { display: block; }
/* Status in der Tabelle: ruhiger Text, keine Plakette (Design 2.0). */
.vi-tbl-td .vl-i-st { color: var(--text-secondary); }
/* Merkmalszeile im Inhaltsteil — GLEICHE Beschriftungsspalte wie der Kopf
   (.mv-meta-row, 92 px). Vorher waren es 120–180 px: im selben Lesebereich
   standen damit zwei verschieden ausgerichtete Wertelisten untereinander, was
   den Eindruck „keine Struktur" erzeugte. */
.vl-kv {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--space-2);
  padding: 2px 0;
  font-size: var(--text-sm);
}
.vl-kv > span:first-child { white-space: nowrap; }
.vl-kv > span:first-child { color: var(--text-muted); }
.vl-kv > span:last-child { color: var(--text-primary); overflow-wrap: anywhere; }
.vl-text {
  margin-top: var(--space-2);
  color: var(--text-primary);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  overflow-wrap: anywhere;
}
.vl-text-hl {
  border-left: 2px solid var(--color-gold);
  padding-left: var(--space-3);
}
.vl-sub { margin-top: var(--space-3); font-size: var(--text-sm); }
.vl-sub-i { display: flex; gap: var(--space-3); padding: 2px 0; color: var(--text-secondary); }
.vl-sub-d { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Der frühere .vl-mailframe ist entfallen. E-Mail-HTML rendert ausschließlich
   VIMailView (public/mail-view.js + mail-view.css) — EIN Mail-Renderer für die
   ganze Anwendung, mit vollständigem Dokumentrahmen statt nackter 220-px-Box. */
.vl-load, .vl-err {
  font-size: var(--text-sm);
  color: var(--text-muted);
  padding: var(--space-2) 0;
}
.vl-err { color: var(--color-danger-ink); }

/* ══════════════════════════════════════════════════════════════════════════
 * C · KOMPAKT — höchste Informationsdichte, eine Zeile je Ereignis
 * ══════════════════════════════════════════════════════════════════════════ */
.vl-compact { list-style: none; margin: 0; padding: 0; }
.vl-c {
  display: grid;
  /* Letzte Spalte 60 px statt 28: an einer E-Mail stehen dort „Antworten" UND
     das Kebab. Feste Breite für ALLE Zeilen, damit die Spalten nicht je nach
     Eintragsart um einen Knopf verspringen. */
  grid-template-columns: 108px 104px minmax(120px, 200px) 1fr auto 60px;
  gap: var(--space-3);
  align-items: baseline;
  padding: 5px 0;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--border-default);
}
.vl-c-d { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vl-c-t { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vl-c-t .vl-dir { margin-right: var(--space-1); }
.vl-c-p { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vl-c-s { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vl-c-x { color: var(--text-muted); }
.vl-c.is-important .vl-c-s { font-weight: var(--fw-medium); }
.vl-c-a { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); }
.vl-c .vl-kebab, .vl-c .vl-reply { opacity: 0; }
.vl-c:hover .vl-kebab, .vl-c:focus-within .vl-kebab,
.vl-c:hover .vl-reply, .vl-c:focus-within .vl-reply,
.vl-c.is-sel .vl-kebab, .vl-c.is-sel .vl-reply { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════════
 * B · LISTE (VITable) — nur Zellinhalte, nie die Tabellenoptik selbst
 * ══════════════════════════════════════════════════════════════════════════ */
.vl-tbl-d { color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vl-tbl-sub { display: block; color: var(--text-primary); }
.vl-tbl-sub.is-unread { font-weight: var(--fw-semibold); }
.vl-tbl-prev {
  display: block;
  color: var(--text-muted);
  font-size: var(--text-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vl-tbl-t { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.vl-tbl-t svg { width: 13px; height: 13px; flex: 0 0 auto; }
.vl-tbl-t + .vl-dir { margin-left: var(--space-2); }
/* Absender bzw. Empfaenger der Mailsicht — halbfett, solange ungelesen. */
.vl-tbl-p { display: block; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vl-tbl-p.is-unread { color: var(--text-primary); font-weight: var(--fw-semibold); }
/* Zustandsspalte: Punkt und Richtungsmarke stehen als EINE ruhige Gruppe. */
.vi-tbl-td .vl-unread + .vl-dir { margin-left: 0; }
.vl-tbl + .vl-tbl { margin-top: var(--space-4); }

/* KARTENANSICHT — der Betreff steht GENAU EINMAL.
   Der Listenbereich des Master-Detail-Aufbaus ist schmal; VITable wechselt dort
   in seine Kartenform. Eine Karte traegt ihre Ueberschrift selbst
   (`mobileTitle` → .vi-tbl-card-t) UND rendert zusaetzlich alle Spalten mit
   `mobilePriority: 1` — darunter die Hauptspalte. Ohne diese Regel stand der
   Betreff dadurch zweimal untereinander, Zeile an Zeile (Fehlerbild
   24.08.2026, Auftragspunkt 15). Ausgeblendet wird ausschliesslich die
   Wiederholung; Auszug, Anhaenge, Zustand und Zeitpunkt bleiben. Die Regel ist
   auf `.vl-tbl` begrenzt und beruehrt keine andere Liste der Anwendung. */
.vl-tbl .vi-tbl-card-head .vl-tbl-sub { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
 * Nachladen
 * ══════════════════════════════════════════════════════════════════════════ */
.vl-more { display: flex; justify-content: center; padding: var(--space-3) 0; }
.vl-more-load {
  appearance: none;
  border: 1px solid var(--border-default);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
}
.vl-more-load:hover { background: var(--color-sage-soft); color: var(--color-forest); }
.vl-more-load:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ══════════════════════════════════════════════════════════════════════════
 * Formulare in den Verlaufs-Dialogen
 * ══════════════════════════════════════════════════════════════════════════ */
/* Kein eigener Feldabstand mehr: die Erfassungsdialoge laufen seit 21.08.2026 auf
   dem gemeinsamen Overlay (vi-dialog.css), dessen Feldabstand für ALLE Dialoge
   gilt. Ein zusätzlicher `gap` hier addierte sich auf den Außenabstand der
   Feldgruppen — zwei Abstandssysteme in derselben Maske. */
.vl-form { display: block; }
.vl-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);   /* Feldabstand wie bei .form-group im Dialog */
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ══════════════════════════════════════════════════════════════════════════
 * INFORMATIONSDICHTE (§16)
 * ══════════════════════════════════════════════════════════════════════════ */
.vl[data-density="comfortable"] .vl-i { padding: var(--space-4) 0; }
.vl[data-density="comfortable"] .vl-i-sum { -webkit-line-clamp: 4; }
.vl[data-density="comfortable"] .vl-c { padding: var(--space-2) 0; }

.vl[data-density="compact"] .vl-i { padding: var(--space-2) 0; grid-template-columns: 26px 1fr auto; gap: var(--space-2); }
.vl[data-density="compact"] .vl-i-ic { width: 26px; height: 26px; }
.vl[data-density="compact"] .vl-i-ic svg { width: 13px; height: 13px; }
.vl[data-density="compact"] .vl-timeline::before { left: 12px; }
.vl[data-density="compact"] .vl-i-sum { -webkit-line-clamp: 1; }
.vl[data-density="compact"] .vl-i-title { font-size: var(--text-sm); }
.vl[data-density="compact"] .vl-c { padding: 2px 0; }

/* ══════════════════════════════════════════════════════════════════════════
 * MOBIL (§34) — nichts läuft waagerecht über, Aktionen bleiben erreichbar
 * ══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   MOBIL — die Werkzeugleiste darf NICHT auf fünf Zeilen umbrechen.
   Zielstruktur (Zielbild §29):
     Verlauf                    + Eintrag
     Alles | Kommunikation | …            (eine Zeile, seitlich schiebbar)
     🔍 Suche
     [Filter] [Sortierung] [Darstellung]
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* Schnellansichten: EINE schiebbare Zeile statt drei umgebrochener. */
  .vl-views {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-left: calc(var(--space-3) * -1);
    margin-right: calc(var(--space-3) * -1);
    padding: 0 var(--space-3);
  }
  .vl-views::-webkit-scrollbar { display: none; }
  .vl-view { flex: 0 0 auto; min-height: 32px; }

  /* Werkzeuge: Suche über die volle Breite, darunter die Schalter.
     Ausdrücklich über `.vl-tools` qualifiziert: seit die Titelzeile ebenfalls
     `.vl-tool` verwendet, hätte das `min-height: 36px` sonst auch die
     Schnellaktionen aufgeblasen — genau die Falle, in die vorher schon
     `.vi-btn-primary` bei „+ Eintrag" gelaufen ist. */
  .vl-tools { flex-wrap: wrap; row-gap: var(--space-2); }
  .vl-search { flex: 1 0 100%; max-width: none; order: 1; }
  .vl-tools .vl-tool, .vl-seg { order: 2; }
  .vl-tools .vl-tool { flex: 0 0 auto; min-height: 36px; }
  .vl-seg { margin-left: auto; }
  .vl-seg-b { min-height: 34px; padding: 0 var(--space-2); }

  /* Titelzeile: „Sichten" wandert weg, ebenso Notiz und Tel.-Notiz — sie stehen
     dann im Menü „+ Eintrag" (verlauf.js `entryMenuItems`). E-Mail BLEIBT ein
     Knopf: eine Mail zu schreiben darf auch mobil nicht hinter einem Menü liegen. */
  .vl-top { flex-wrap: wrap; row-gap: var(--space-1); }
  .vl-tool-quiet { display: none; }
  .vl-quick-opt { display: none; }
  .vl-count { order: 3; flex: 1 0 100%; }
}

/* ── Mittlere Breiten: die beiden Notizknöpfe geben ihre Beschriftung ab ────
   Zwischen Telefon und geräumigem Desktop reicht der Platz für fünf beschriftete
   Knöpfe nicht, ohne dass die Titelzeile umbricht. Zuerst geben die SEKUNDÄREN
   Aktionen ihre Beschriftung ab (Symbol bleibt, Bedeutung steht in `aria-label`
   und im Hinweis der Overlay-Ebene). E-Mail und „+ Eintrag" behalten ihre. */
@media (max-width: 1180px) {
  .vl-quick-opt .vl-quick-t { display: none; }
  .vl-top-a .vl-quick-opt { padding: 0 var(--space-2); }
}

/* ══════════════════════════════════════════════════════════════════════════
 * Kompaktmodus stapelt, sobald die LISTENSPALTE zu schmal ist (22.08.2026)
 *
 * Die sechs Spalten des Kompaktmodus brauchen rund 450 px. Maßgeblich ist dafür
 * NICHT die Fensterbreite, sondern die Breite der linken Spalte: seit dem
 * Master-Detail ist sie standardmäßig 420 px (unter 1280 px sogar 340 px) und
 * am Griff frei verstellbar. Die Umbruchregel hing aber am Viewport — auf einem
 * 1280-px-Bildschirm blieb deshalb das sechsspaltige Raster stehen und ragte
 * 112 px über die Spalte hinaus. Weil `.vl-listpane` waagerecht NICHT scrollt
 * (`overflow-x: hidden`), war die letzte Spalte damit schlicht abgeschnitten —
 * das Kebab-Menü war im Kompaktmodus unerreichbar.
 *
 * Die Bedingung fragt jetzt den TATSÄCHLICHEN Container ab (dasselbe Muster wie
 * `doclist` in style.css und `wolist` in work-orders.css). Sie ersetzt die
 * frühere Viewport-Regel vollständig: auf dem Telefon ist die Spalte ohnehin
 * schmal, dort greift sie genauso.
 * ══════════════════════════════════════════════════════════════════════════ */
@container vllist (max-width: 640px) {
  .vl-c {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "type date"
      "subject att"
      "party actions";
    row-gap: 2px;
    padding: var(--space-2) 0;
  }
  .vl-c-d { grid-area: date; text-align: right; }
  .vl-c-t { grid-area: type; }
  .vl-c-s { grid-area: subject; white-space: normal; }
  .vl-c-p { grid-area: party; }
  .vl-c-x { grid-area: att; text-align: right; }
  .vl-c-a { grid-area: actions; justify-content: flex-end; }
}

@media (max-width: 900px) {
  .vl-listhead .vi-listhead__r { flex-wrap: wrap; row-gap: var(--space-2); }
  .vl-c-s { white-space: normal; }
  /* Das Stapeln des Kompaktmodus steht jetzt in der @container-Regel darüber —
     es hing an der falschen Größe (Fenster statt Listenspalte). */

  /* Aktionen mobil dauerhaft sichtbar — Hover gibt es dort nicht. */
  .vl-i-a, .vl-c .vl-kebab, .vl-c .vl-reply { opacity: 1; }
  .vl-more-b, .vl-kebab { min-height: 32px; min-width: 32px; }

  .vl-i { grid-template-columns: 26px 1fr; grid-template-areas: "icon body" ". actions"; }
  .vl-i-ic { grid-area: icon; width: 26px; height: 26px; }
  .vl-i-b { grid-area: body; }
  .vl-i-a { grid-area: actions; justify-content: flex-end; }
  .vl-kv { grid-template-columns: 1fr; gap: 0; }
  .vl-kv > span:first-child { font-size: var(--text-xs); }
}

@media (prefers-reduced-motion: reduce) {
  .vl-grp-c, .vl-i-a, .vl-c .vl-kebab, .vl-detail { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE SCHALE (public/mobile.js) — Akkordeon „Verlauf"
   Unter 768 px übernimmt die eigene Mobil-Schale; sie rendert den Verlauf
   kompakt aus DERSELBEN API. Nur die wenigen Zusatzklassen, alles Übrige
   kommt aus mobile.css (vim-kv-row / vim-subtle / vim-pill).
   ══════════════════════════════════════════════════════════════════════════ */
.vim-vl-views {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-2);
  /* Feedback #3 §4.2: Die Chips liefen bis an die Kartenkante und wirkten dort
     abgeschnitten („Besprechunge…“) — man sah nicht, dass die Reihe scrollt.
     Sie darf jetzt bis an den Rand der Fläche laufen (negativer Außenabstand +
     gleich großer Innenabstand), und der weiche Auslauf rechts sagt an, dass es
     weitergeht. Die Reihe bleibt EINE Zeile; kein zweites „Mehr“-Menü. */
  margin-inline: calc(var(--space-3) * -1);
  padding-inline: var(--space-3);
  scroll-padding-inline: var(--space-3);
  -webkit-mask-image: linear-gradient(to right, currentColor 0, currentColor calc(100% - 22px), transparent 100%);
          mask-image: linear-gradient(to right, currentColor 0, currentColor calc(100% - 22px), transparent 100%);
}
.vim-vl-views::-webkit-scrollbar { display: none; }
.vim-vl-view {
  appearance: none;
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.vim-vl-view.is-active {
  background: var(--color-forest-soft);
  border-color: var(--color-forest);
  color: var(--color-forest);
  font-weight: var(--fw-medium);
}


/* ══════════════════════════════════════════════════════════════════════════
 * MASTER-DETAIL — Liste links, Lesebereich rechts (20.08.2026)
 *
 * Beide Bereiche sind Bestandteil der SEITE. Es gibt kein Overlay, keine
 * Abdunklung und keinen Dialog: ein Klick in der Liste tauscht ausschließlich
 * den Inhalt rechts. Vorher öffnete der Volltext im zentralen App-Modal
 * (`.modal` = 480 px breit) — für eine HTML-Mail unbrauchbar.
 *
 * HÖHE: `--vl-h` gibt beiden Spalten eine DEFINITE Höhe. Ohne sie könnte der
 * Lesebereich seinen Rahmen (height:100%) nicht auflösen und bliebe ein
 * schmaler Streifen — derselbe Fehler, der beim Dokumente-Panel schon einmal
 * auftrat (public/style.css, .doc-preview-pane). Beide Spalten scrollen
 * eigenständig; die Seite selbst scrollt nicht mit.
 * ══════════════════════════════════════════════════════════════════════════ */
/* Die beiden Stellgrößen gehören auf die WURZEL: der Splitter schreibt seinen Wert
   dorthin (verlauf.js `vlRoot()`). Stünde die Vorgabe hier auf `.vl-split`, würde die
   lokale Deklaration den geerbten Wert überschreiben und das Ziehen bliebe wirkungslos. */
.vl {
  --vl-list-w: 420px;
  --vl-h: clamp(520px, calc(100vh - 250px), 1600px);
}
.vl-split {
  display: grid;
  grid-template-columns: minmax(280px, var(--vl-list-w)) auto minmax(0, 1fr);
  align-items: stretch;
  height: var(--vl-h);
  min-height: 0;
  margin-top: var(--space-3);
}
.vl-listpane {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: var(--space-2);
  /* Bezugsgröße für die Zeilenraster: die Spalte ist am Griff verstellbar, ihre
     Breite hat mit der Fensterbreite nichts zu tun. Siehe @container vllist. */
  container-type: inline-size;
  container-name: vllist;
}
/* Griff zwischen den Spalten: schmale Fläche, deutliche Trefferzone. */
.vl-splitter {
  width: 9px;
  cursor: col-resize;
  background: none;
  border: 0;
  border-left: 1px solid var(--border-default);
  margin: 0 var(--space-1);
  position: relative;
}
.vl-splitter:hover, .vl-splitter:focus-visible { border-left-color: var(--color-forest); outline: none; }
.vl-detail {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
  /* NUR Farbe, nie Größe: der Wechsel zwischen Karte und flächenloser Anzeige
     soll nicht schlagartig umspringen. Breite und Höhe werden NICHT animiert —
     das ergäbe beim Durchklicken das gefürchtete Fenstergrößen-Ping-Pong. */
  transition: background-color var(--transition), border-color var(--transition);
}
/* Generischer Lesebereich (Notiz, Besprechung, Entscheidung …) — die E-Mail
   bringt ihren eigenen Aufbau aus mail-view.css mit. */
.vl-dt-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-4);
}

/* ══════════════════════════════════════════════════════════════════════════
 * STABILE GEOMETRIE — ADAPTIVE INHALTSDICHTE (22.08.2026)
 *
 * Die Fläche rechts ist bei JEDER Eintragsart gleich breit und gleich hoch:
 * `.vl-split` behält sein Raster, `.vl-detail` seine Rasterzelle. Es gibt
 * bewusst KEIN typabhängiges Umschalten zwischen Vollbreite, 50/50 und 70/30
 * und keine Größenanimation — sonst würde die Ansicht beim Durchklicken des
 * Verlaufs bei jedem Klick neu aufreißen.
 *
 * Was sich unterscheidet, ist allein die DICHTE des Inhalts. `verlauf.js`
 * schreibt dafür `data-vl-detail` (siehe dort `detailShape`):
 *
 *   mail    E-Mail          → volle Leseansicht (VIMailView), Karte richtig
 *   record  Fachlicher Eintrag → volle Detailansicht, Karte richtig
 *   event   Prozess/System  → drei Zeilen Inhalt, Karte FALSCH
 *   empty   nichts gewählt  → Leerzustand
 *
 * Beim Prozessereignis „Vorgang angelegt" standen vorher unter 174 px Kopf
 * 344 px leeres Weiß — mit Rahmen bis zum unteren Bildschirmrand. Die Fläche
 * bleibt, die KARTE entfällt: kein Rahmen, keine weiße Füllung, keine
 * Mindesthöhe. Der Rest der Spalte bleibt ruhig und neutral.
 * ══════════════════════════════════════════════════════════════════════════ */
.vl .vl-detail[data-vl-detail="event"] {
  border-color: transparent;
  background: transparent;
}
/* `.mv-head` malt die Fläche der Karte ein zweites Mal (mail-view.css) und
   schließt mit einer Trennlinie ab — beides ergibt ohne Karte einen weißen
   Balken quer über die Spalte. Über `.vl` qualifiziert, weil mail-view.css
   NACH verlauf.css lädt. */
.vl .vl-detail[data-vl-detail="event"] .mv-head {
  background: transparent;
  border-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}
/* Der Inhalt endet, wo er endet — er wird nicht auf Bildschirmhöhe aufgeblasen.
   `flex-shrink: 1` bleibt, damit ein ausnahmsweise langer Ereignistext weiterhin
   in der Fläche scrollt statt sie zu sprengen. */
.vl .vl-detail[data-vl-detail="event"] .vl-dt-body {
  flex: 0 1 auto;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}
/* Ereigniskopf: dieselben Angaben wie sonst im Merkmalsraster, aber in EINER
   Zeile — bei drei Werten ist eine Tabelle mehr Gerüst als Inhalt. */
.vl-dt-line {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.vl-dt-line .vl-i-sep { margin: 0 var(--space-1); }

/* Auswahlzustand: klar erkennbar, aber ruhig — eine Akzentkante links und eine
   dezente Fläche. Keine kräftige Füllung, die Zeile bleibt lesbar. */
.vl-i.is-sel, .vl-c.is-sel {
  background: var(--color-selected-soft, var(--color-surface-sunken));
  box-shadow: inset 3px 0 0 0 var(--color-forest);
}
.vl-i[data-vl-id], .vl-c[data-vl-id] { cursor: pointer; }
.vl-i[data-vl-id]:focus-visible, .vl-c[data-vl-id]:focus-visible { outline: 2px solid var(--color-forest); outline-offset: -2px; }
/* Auswahl auch in den beiden Formen von VITable (Zeile UND Karte).
   Die FLÄCHE gehört jeder Zelle, der BALKEN nur der ersten — ohne `:first-child` stünde
   an jeder Spaltengrenze der gewählten Zeile eine dicke dunkle Senkrechte (gleicher
   Fehler wie im Leitstand, 10.09.2026 projektweit korrigiert; kanonisch ist
   `vi-table.css .vi-tbl-row.is-sel > .vi-tbl-td:first-child`). */
.vl-listpane .vi-tbl-table tr.is-sel > td { background: var(--color-selected-soft, var(--color-surface-sunken)); }
.vl-listpane .vi-tbl-table tr.is-sel > td:first-child { box-shadow: inset 3px 0 0 0 var(--color-forest); }
.vl-listpane .vi-tbl-card.is-sel { background: var(--color-selected-soft, var(--color-surface-sunken)); box-shadow: inset 3px 0 0 0 var(--color-forest); }

/* Sprungziel aus einem anderen Bereich („Ursprungs-E-Mail öffnen"): Der Eintrag ist
   bereits ausgewählt — dieser kurze Hinweis sagt nur, WOHIN gesprungen wurde. Er
   klingt nach 2 s ab und ist bewusst dieselbe Markenfläche, keine zweite Farbe. */
@keyframes vl-focus-flash { from { background: var(--color-sage-tint); } to { background: transparent; } }
.vl-i.is-focus-flash, .vl-c.is-focus-flash,
.vl-listpane .vi-tbl-table tr.is-focus-flash > td,
.vl-listpane .vi-tbl-card.is-focus-flash { animation: vl-focus-flash 2s ease-out 1; }
@media (prefers-reduced-motion: reduce) {
  .vl-i.is-focus-flash, .vl-c.is-focus-flash,
  .vl-listpane .vi-tbl-table tr.is-focus-flash > td,
  .vl-listpane .vi-tbl-card.is-focus-flash { animation: none; outline: 2px solid var(--color-forest); outline-offset: -2px; }
}

/* ── Tablet: der Lesebereich braucht mehr als die Hälfte, die Liste schrumpft ── */
@media (max-width: 1280px) {
  .vl { --vl-list-w: 340px; }
}

/* ── Gestapelt (≤900 px): erst Liste, nach der Auswahl der volle Eintrag ────
   Das frühere Mini-Modal war der „Kompromiss" für alle Größen — genau das
   entfällt hier: mobil ist die Detailansicht ganzflächig, mit „Zurück". */
@media (max-width: 900px) {
  .vl-split {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
  }
  .vl-listpane { overflow: visible; padding-right: 0; }
  .vl-splitter { display: none; }
  /* Über `.vl` qualifiziert: mail-view.css lädt später und dürfte sonst gewinnen. */
  .vl .vl-detail { display: none; }
  .vl.is-detail-open .vl-listpane { display: none; }
  .vl.is-detail-open .vl-detail {
    display: flex;
    /* Höhe folgt dem Inhalt; gescrollt wird die ganze Nachricht (siehe mail-view.css). */
    height: auto;
    min-height: 0;
    overflow-y: visible;
  }
  /* Steuerung ausblenden, solange der Eintrag ganzflächig gelesen wird. */
  .vl.is-detail-open .vl-views,
  .vl.is-detail-open .vl-tools,
  .vl.is-detail-open .vl-chips { display: none; }
}

/* ── Dokument im Lesebereich (eigene Darstellung, keine Merkmalskarte) ────── */
.vl-doc-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-default);
  margin-bottom: var(--space-3);
}
.vl-doc-txt { display: grid; gap: 2px; min-width: 0; }
.vl-doc-name { font-size: var(--text-base); color: var(--text-primary); overflow-wrap: anywhere; }
.vl-doc-sub { font-size: var(--text-xs); color: var(--text-muted); }
.vl-doc-acts { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ── Kennzeichnung der Eintragsart über dem Titel ──────────────────────────
   Die Art beantwortet „was ist das?" und steht deshalb VOR dem Titel — klein,
   ruhig und genau einmal. Vorher stand sie dreifach (Überschrift, Zeile darunter
   und noch einmal als Merkmal „Art") und drängte die eigentliche Aussage nach unten. */
.vl-dt-kind {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.vl-dt-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: none;
}
.vl-dt-ico svg { width: 15px; height: 15px; }
.vl-dt-kindtext {
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: .01em;
}


/* ══ Feedback #3 §4.3/§4.4 — Notizblock und Fotos AM Ereignis ═══════════════ */
/* Gesprächsnotiz: eigener Block mit Überschrift, damit Gesprächspartner und
   Inhalt sichtbar zwei Angaben sind — nicht derselbe Text zweimal. */
.vl-note-block { margin-top: 10px; }
.vl-note-h { font-size: var(--text-xs); font-weight: 700; color: var(--gray-500); margin-bottom: 4px; }
/* Fotos am Ereignis: Miniaturen direkt lesbar, Klick öffnet den zentralen
   Dokumentbetrachter. Kein zweiter Bildbetrachter, keine zweite Ablage. */
.vl-fotos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.vl-foto { padding: 0; border: none; background: none; cursor: pointer; line-height: 0; }
.vl-foto img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--radius-md);
  border: 1px solid var(--gray-300); display: block; }
.vl-foto:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.vl-foto-doc { line-height: 1.3; font-size: var(--text-xs); font-weight: 600;
  color: var(--color-forest); border: 1px solid var(--gray-300);
  border-radius: var(--radius-md); padding: 6px 10px; }
.vl-fotos-more { margin-top: 8px; }


/* §4.2: Der kompakte Verlauf zeigt fünf Ereignisse; der Rest ist EINEN Tipp entfernt. */
.vim-vl-more {
  appearance: none;
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: var(--space-2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-forest);
  cursor: pointer;
}
.vim-vl-more:active { background: var(--color-forest-soft); }