/* =========================================================
   My Cortex – Uebernahme-Dashboard (/demo, Vorfuehrung)

   SEIT DEM 16.09.2026 IM VERWALTUNGS-SYSTEM (DESIGN.md).
   Graue Seite, weisse Karten mit feiner Kante, schwarze Kopfleiste
   ueber die volle Breite, Navigation links auf Grau, dunkler
   Hauptknopf, Tabellen mit grauem Kopf, Abzeichen als Pastellflaeche.
   Blau nur fuer Links und Fokus.

   Die alten Namen (--bg, --card, --text, --green ...) bleiben stehen:
   Regeln hier, dashboard.js und die React-Insel (frontend/main.jsx)
   lesen sie. Sie zeigen alle auf --ds-* aus static/tokens.css; hell und
   dunkel schaltet tokens.css um.

   AUSNAHMEN, BEWUSST:
   - Der Ladeschirm (Agenten-Overlay, Scan-Visualisierung) bleibt eine
     dunkle Buehne in beiden Themen; nur Schrift und der Knopf darin
     folgen dem System.
   ========================================================= */

:root {
  --bg: var(--ds-grund);
  --sidebar-bg: var(--ds-nav-grund);
  --card: var(--ds-flaeche);
  --card-2: var(--ds-flaeche-2);
  --card-3: var(--ds-flaeche-aktiv);
  --seg-active: var(--ds-flaeche);

  --text: var(--ds-text);
  --text-2: var(--ds-text-2);
  --muted: var(--ds-text-2);

  --border: var(--ds-rand);
  --border-2: var(--ds-rand);
  --rand-feld: var(--ds-rand-feld);

  --accent: var(--ds-link);
  --accent-2: var(--ds-link);
  --accent-strong: var(--ds-fuell-primaer);
  --accent-soft: var(--ds-fuell-transparent-aktiv);

  --up: var(--ds-link);
  /* Zustaende: Grafik (Ring, Punkt) liest --green/--gold/--miss-arc und
     bekommt die Symbolfarbe; Schrift liest --down und bekommt den
     Zustandstext, damit sie 4,5:1 haelt. */
  --green: var(--ds-erfolg-icon);
  --green-soft: var(--ds-erfolg-abz);
  --down: var(--ds-krit-text);
  --red-soft: var(--ds-krit-abz);
  --miss-arc: var(--ds-krit-icon);
  --gold: var(--ds-warn-icon);
  --gold-soft: var(--ds-warn-abz);
  /* Der Ring der Ergebnisseite und seine Legende nehmen die Diagramm-
     Zustaende des Systems -- dieselben wie der Ring der Werkstatt.
     Listenpunkte, die Legende am Katalog (sie erklaert die Punkte der
     Zeilen darunter), Zustandsschrift und Ladebuehne bleiben bei
     --green/--gold/--miss-arc. */
  --d-ok: var(--ds-diagramm-ok);
  --d-warn: var(--ds-diagramm-warn);
  --d-krit: var(--ds-diagramm-krit);

  --btn-bg: var(--ds-fuell-primaer);
  --btn-fg: var(--ds-text-auf-primaer);

  --card-shadow: var(--ds-schatten-karte);
  --av-ring: var(--ds-flaeche);

  --r-mikro: 2px;

  /* Schrift auf gefuellten Flaechen ist eine Rolle, kein Wert. */
  --auf-akzent-stark: var(--ds-text-auf-primaer);
  --auf-gruen: var(--ds-text-auf-primaer);

  /* --- Dateiformate: IDENTITAET, nicht Semantik ---------------------------
     Rot heisst hier nicht "Fehler" und Gruen nicht "in Ordnung" -- es sind die
     drei Formate PDF/JSON/XML, so wie ein PDF-Symbol seit jeher rot ist. Weisse
     Schrift in 13px fett darauf: 4,70 · 5,45 · 4,74 (gemessen, siehe Verlauf
     dieser Datei). Themenlos, weil die Kennung nicht umschlaegt. */
  --fmt-pdf: #cf4137;
  --fmt-json: #2f6bb0;
  --fmt-xml: #27825b;

  /* --- Papier: die nachgebaute Dokumentseite ------------------------------
     Ein Blatt ist in BEIDEN Themen weiss -- Papier schlaegt nicht um. */
  --papier: #ffffff;
  --papier-fg: #1a1a1a;      /* 17,40:1 */
  --papier-fg-2: #2a2a2a;    /* 14,35:1 */
  --papier-fg-stark: #111;   /* 18,88:1 */
  --papier-fg-schwach: #737373;

  /* Die Leitzahl im Ring ("67 % vollstaendig") und der Name im
     Willkommen-Fenster: die beiden groessten Stufen der Titelskala. */
  --anzeige-gross: var(--ds-t-h-2xl);
  --leitzahl: var(--ds-t-h-3xl);
  --schatten-ueber: var(--ds-schatten-ueber);

  --sans: var(--ds-schrift);
  --mono: var(--ds-schrift-mono);

  color-scheme: light;
}
:root[data-theme="dark"] {
  scrollbar-color: var(--ds-rand-hover) transparent;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* hidden-Attribut muss zuverlaessig ausblenden (auch bei display:flex/grid). */
[hidden] { display: none !important; }

body.dash {
  background: var(--ds-grund);
  color: var(--ds-text);
  font-family: var(--ds-schrift);
  font-size: var(--ds-t-md);
  line-height: var(--ds-zh-md);
  font-weight: var(--ds-gew-normal);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11" 1;
}
body.dash button, body.dash input { font-family: inherit; }

svg { display: block; }
.side-item svg, .icon-btn svg, .chev, .search-ico, .search-go svg, .notif svg,
.datesw svg, .info, .how svg, .promo-bolt, .promo-next svg, .promo-learn svg,
.up-arrow, .big-delta svg, .dots svg, .file-ico svg, .pill svg, .pager svg {
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

.app { display: flex; min-height: 100vh; }

:focus-visible { outline: 2px solid var(--ds-rand-fokus); outline-offset: 1px; }

/* =========================================================
   Passwort-Gate: zentrierte Anmelde-Karte
   ========================================================= */
.dgate {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: 16px;
  background: var(--ds-grund);
  animation: dgate-in var(--ds-zeit) ease both;
}
@keyframes dgate-in { from { opacity: 0; } to { opacity: 1; } }

.dgate-card {
  width: 100%; max-width: 400px;
  background: var(--ds-flaeche);
  border-radius: var(--ds-r-3);
  padding: 24px;
  text-align: center;
  box-shadow: var(--ds-schatten-karte);
}
.dgate-glyph {
  width: 40px; height: 40px; margin: 0 auto 12px;
  display: grid; place-items: center;
  border-radius: var(--ds-r-2);
  background: var(--ds-fuell-neutral);
  color: var(--ds-icon);
}
.dgate-glyph svg { width: 20px; height: 20px; }
.dgate-title {
  font-size: var(--ds-t-h-lg); line-height: var(--ds-zh-h-lg);
  font-weight: var(--ds-gew-fett); letter-spacing: var(--ds-sperr-dicht);
}
.dgate-sub { margin-top: 4px; color: var(--ds-text-2); font-size: var(--ds-t-md); line-height: var(--ds-zh-md); }
.dgate-form { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.dgate-input {
  width: 100%; min-height: 36px; padding: 6px 12px;
  font: var(--ds-gew-normal) var(--ds-t-lg)/var(--ds-zh-lg) var(--ds-schrift);
  letter-spacing: 0.08em;
  color: var(--ds-text); background: var(--ds-feld-grund);
  border: 1px solid var(--ds-rand-feld); border-top-color: var(--ds-rand-feld-hover);
  border-radius: var(--ds-r-2); outline: none;
}
.dgate-input::placeholder { color: var(--ds-text-2); letter-spacing: 0.1em; }
.dgate-input:hover { border-color: var(--ds-rand-feld-hover); background: var(--ds-feld-grund-hover); }
.dgate-input:focus {
  outline: 2px solid var(--ds-rand-fokus); outline-offset: 1px;
  border-color: var(--ds-rand-feld-aktiv); background: var(--ds-flaeche);
}
.dgate-btn { width: 100%; min-height: var(--ds-knopf-hoehe-gross); font-size: var(--ds-t-md); }
.dgate-error { color: var(--ds-krit-text); font-size: var(--ds-t-md); line-height: var(--ds-zh-md); font-weight: var(--ds-gew-mittel); }
.dgate-card.shake { animation: shake 0.3s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-2px); }
}

/* =========================================================
   Kopfleiste (schwarz, volle Breite) und Navigation links
   Im Markup sitzt die Kopfleiste in <main> und das Logo in der
   Seitenleiste. Ab 821px legt sich die Leiste fest ueber die volle
   Breite, das Logo sitzt links darin; die Seitenleiste klebt darunter.
   ========================================================= */
.sidebar {
  width: var(--ds-nav-breite);
  flex-shrink: 0;
  background: var(--ds-nav-grund);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 12px 8px;
  gap: 2px;
}

.side-logo {
  display: flex; align-items: center; gap: 8px;
  margin: 0 8px 12px;
  text-decoration: none;
}
.side-logo img { width: 28px; height: 28px; border-radius: var(--ds-r-2); object-fit: cover; flex-shrink: 0; }
.side-word {
  font-size: var(--ds-t-lg); line-height: var(--ds-zh-lg); font-weight: var(--ds-gew-halbfett);
  color: var(--ds-text); white-space: nowrap;
}

.side-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.side-bottom { display: flex; flex-direction: column; gap: 2px; }

.side-item {
  display: flex; align-items: center; gap: 8px;
  min-height: var(--ds-nav-zeile);
  padding: 4px 8px;
  border-radius: var(--ds-r-2);
  color: var(--ds-text);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ds-zeit-kurz) ease;
}
.side-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--ds-icon); }
.side-label { font-size: var(--ds-t-md); line-height: var(--ds-zh-md); font-weight: var(--ds-gew-halbfett); white-space: nowrap; }
.side-item:hover { background: var(--ds-nav-hover); }
.side-item.is-active { background: var(--ds-nav-gewaehlt); box-shadow: var(--ds-schatten-1); }
.side-item.is-active svg { color: var(--ds-text); }

/* Schmaler Screen: zurueck auf reine Symbole */
@media (max-width: 1100px) {
  .sidebar { width: 64px; align-items: center; padding: 12px 0; }
  .side-logo { justify-content: center; margin: 0 auto 12px; }
  .side-word, .side-label { display: none; }
  .side-item { justify-content: center; width: 40px; height: 40px; padding: 0; margin: 0 auto; }
}

/* =========================================================
   Main + Kopfleiste
   ========================================================= */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--ds-kopfleiste-hoehe);
  padding: 8px 16px;
  background: var(--ds-kopfleiste);
  color: var(--ds-kopfleiste-text);
}

@media (min-width: 821px) {
  .app { padding-top: var(--ds-kopfleiste-hoehe); }
  .topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    height: var(--ds-kopfleiste-hoehe);
    padding: 0 16px 0 calc(var(--ds-nav-breite) + 8px);
  }
  /* sticky bildet einen eigenen Stapelkontext; ueber die Kopfleiste
     muss er, damit das Logo darin (fixed) vor ihr liegt. */
  .sidebar {
    z-index: 61;
    position: sticky; top: var(--ds-kopfleiste-hoehe);
    height: calc(100vh - var(--ds-kopfleiste-hoehe));
    align-self: flex-start;
  }
  .side-logo {
    position: fixed; top: 14px; left: 16px; z-index: 61; margin: 0;
  }
  .side-word { color: var(--ds-kopfleiste-text); }
}
@media (min-width: 821px) and (max-width: 1100px) {
  .topbar { padding-left: calc(64px + 16px); }
  .side-logo { left: 18px; }
}

.tb-title {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none;
  color: var(--ds-kopfleiste-text);
  font-size: var(--ds-t-lg); line-height: var(--ds-zh-lg); font-weight: var(--ds-gew-halbfett);
}
.chev { width: 16px; height: 16px; color: var(--ds-icon-2); }

.search {
  flex: 1;
  max-width: 480px;
  margin: 0 auto;
  display: flex; align-items: center; gap: 8px;
  height: 36px;
  padding: 0 4px 0 12px;
  background: var(--ds-kopfleiste-feld);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--ds-r-2);
}
.search:focus-within { outline: 2px solid var(--ds-rand-fokus); outline-offset: 1px; }
.search-ico { width: 16px; height: 16px; color: var(--ds-icon-2); flex-shrink: 0; }
.search input {
  flex: 1; min-width: 0;
  background: none; border: none; outline: none;
  color: var(--ds-kopfleiste-text); font-size: var(--ds-t-md);
}
/* Grau auf dem Suchfeld der Kopfleiste: #b5b5b5 auf #303030 ergibt 6,1:1 */
.search input::placeholder { color: #b5b5b5; }
.search-go {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: none; cursor: pointer;
  border-radius: var(--ds-r-2);
  background: transparent;
  color: var(--ds-kopfleiste-text);
}
.search-go:hover { background: rgba(255, 255, 255, 0.1); }
.search-go svg { width: 16px; height: 16px; }

.tb-right { flex-shrink: 0; margin-left: auto; display: flex; align-items: center; gap: 8px; }

.icon-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0;
  border-radius: var(--ds-r-2);
  background: transparent;
  color: var(--ds-kopfleiste-text);
  cursor: pointer;
  transition: background-color var(--ds-zeit-kurz) ease;
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { background: rgba(255, 255, 255, 0.1); }
.icon-btn.sm { width: 28px; height: 28px; }
.icon-btn.sm svg { width: 15px; height: 15px; }

.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

.datesw {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 10px;
  border-radius: var(--ds-r-2);
  background: var(--ds-kopfleiste-feld);
  font-size: var(--ds-t-md); font-weight: var(--ds-gew-mittel); color: var(--ds-kopfleiste-text);
}
.datesw span { padding: 0 2px; }

.profile {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 8px 0 4px;
  border-radius: var(--ds-r-2);
}
.profile-av { width: 28px; height: 28px; border-radius: var(--ds-r-2); object-fit: cover; }
.profile-meta { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.profile-name { font-size: var(--ds-t-sm); font-weight: var(--ds-gew-halbfett); color: var(--ds-kopfleiste-text); }
.profile-handle { font-size: var(--ds-t-xs); color: #b5b5b5; }

/* =========================================================
   Inhaltsraster
   ========================================================= */
.content {
  padding: 24px 24px 32px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--ds-karte-luecke);
}
/* Scan-Ergebnis-Report: Ergebnis-Karte + Nachforderung oben,
   Dokumententabelle darunter. Karten einer Zeile sind gleich hoch. */
.content--report { align-items: stretch; }
.card-result  { grid-column: 1 / 8;  grid-row: 1; display: flex; flex-direction: column; }
.card-request { grid-column: 8 / 13; grid-row: 1; display: flex; flex-direction: column; }
.card-table   { grid-column: 1 / 13; grid-row: 2; }
.card-result .result-body { flex: 1; }

.card {
  background: var(--ds-flaeche);
  border-radius: var(--ds-r-3);
  padding: 16px;
  box-shadow: var(--ds-schatten-karte);
}

.card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.card-head.tight { margin-bottom: 12px; align-items: center; }
.card-title {
  font-size: var(--ds-t-h-lg); line-height: var(--ds-zh-h-lg);
  font-weight: var(--ds-gew-fett); letter-spacing: var(--ds-sperr-dicht);
}
.card-title.sm {
  font-size: var(--ds-t-lg); line-height: var(--ds-zh-lg);
  font-weight: var(--ds-gew-halbfett); letter-spacing: 0;
}
.card-sub { margin-top: 2px; font-size: var(--ds-t-md); line-height: var(--ds-zh-md); color: var(--ds-text-2); }
.card-sub b { color: var(--ds-text); font-weight: var(--ds-gew-halbfett); }

.select {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--ds-knopf-hoehe); padding: 4px 12px;
  background: var(--ds-fuell); box-shadow: var(--ds-schatten-knopf);
  border: 0; border-radius: var(--ds-r-2);
  color: var(--ds-text); font-size: var(--ds-t-sm); font-weight: var(--ds-gew-mittel);
  cursor: pointer; white-space: nowrap;
}
.select.ghost { background: none; box-shadow: none; }
.select kbd {
  font-family: var(--mono); font-size: var(--ds-t-xs);
  background: var(--ds-fuell-neutral); padding: 2px 4px; border-radius: var(--ds-r-1); color: var(--ds-text-2);
}

/* ---------- Ergebnis-Karte (Vollstaendigkeit) ---------- */

.result-body { display: flex; align-items: center; gap: 32px; padding: 8px 4px 4px; }

/* Ring: Zustandsfarben als Grafik, Spur in der Leistenfarbe */
.result-figure { position: relative; flex-shrink: 0; width: 150px; height: 150px; }
.result-donut { width: 100%; height: 100%; display: block; }
.donut-track { stroke: var(--ds-fuell-leiste); }
.donut-seg { stroke-linecap: butt; }
.seg-ok { stroke: var(--d-ok); }
.seg-wait { stroke: var(--d-warn); }
.seg-miss { stroke: var(--d-krit); }

.result-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
}
.result-pct { display: flex; align-items: baseline; line-height: 1; }
.pct-num {
  font-size: var(--leitzahl); font-weight: var(--ds-gew-fett);
  letter-spacing: var(--ds-sperr-am-dichtesten); font-variant-numeric: tabular-nums;
}
.pct-sign { font-size: var(--ds-t-lg); font-weight: var(--ds-gew-halbfett); color: var(--ds-text-2); margin-left: 1px; }
.result-pct-sub { margin-top: 4px; font-size: var(--ds-t-sm); color: var(--ds-text-2); }

.result-side { flex: 1; min-width: 0; }
.result-lead {
  font-size: var(--ds-t-lg); line-height: var(--ds-zh-lg); font-weight: var(--ds-gew-halbfett);
  color: var(--ds-text); margin-bottom: 12px;
}
.result-legend { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.result-legend li {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--ds-t-md); line-height: var(--ds-zh-md); color: var(--ds-text-2);
}
.result-legend b {
  color: var(--ds-text); font-weight: var(--ds-gew-halbfett); min-width: 22px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.lg-dot { width: 12px; height: 4px; border-radius: 2px; flex-shrink: 0; }
.lg-ok { background: var(--d-ok); }
.lg-wait { background: var(--d-warn); }
.lg-miss { background: var(--d-krit); }
/* "entfaellt" ist die Spur des Rings; die Kante haelt den Punkt sichtbar */
.lg-na { background: var(--ds-fuell-leiste); box-shadow: inset 0 0 0 1px var(--ds-rand-hover); }

/* ---------- Nachforderung (Mail-Vorschauen) ---------- */
/* "3 fehlen": Zahl und Wort, keine Flaeche (19.09.2026). Die Menge ist kein
   Zustand -- sie bekommt Gewicht an der Ziffer und sonst nichts. */
.req-badge {
  display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap;
  color: var(--ds-text-2); font-size: var(--ds-t-sm); line-height: var(--ds-zh-sm); font-weight: var(--ds-gew-mittel);
}
.req-badge b { color: var(--ds-text); font-weight: var(--ds-gew-halbfett); font-variant-numeric: tabular-nums; }
.req-badge-lbl { color: inherit; }
.req-intro { font-size: var(--ds-t-md); line-height: var(--ds-zh-md); color: var(--ds-text-2); margin-bottom: 8px; }

/* Zeilenliste in der Karte: Trennlinien statt Einzelkaesten */
.mail-list {
  list-style: none; display: flex; flex-direction: column;
  margin: 0 -16px -16px; border-top: 1px solid var(--ds-rand);
}
.mail-list > li + li { border-top: 1px solid var(--ds-rand-2); }
.mail-row {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  background: transparent; border: 0; border-radius: 0;
  padding: 10px 16px; cursor: pointer; font-family: inherit; color: inherit;
  transition: background-color var(--ds-zeit-kurz) ease;
}
.mail-row:hover { background: var(--ds-flaeche-hover); }
.mail-list > li:last-child .mail-row { border-radius: 0 0 var(--ds-r-3) var(--ds-r-3); }
.mail-ico {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--ds-r-2); display: grid; place-items: center;
  background: var(--ds-fuell-neutral); color: var(--ds-icon);
}
.mail-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mail-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.mail-to { font-size: var(--ds-t-md); line-height: var(--ds-zh-md); font-weight: var(--ds-gew-halbfett); color: var(--ds-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-subj { font-size: var(--ds-t-sm); line-height: var(--ds-zh-sm); color: var(--ds-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-count {
  flex-shrink: 0; font-size: var(--ds-t-sm); line-height: var(--ds-zh-sm); font-weight: var(--ds-gew-mittel); color: var(--ds-text);
  background: var(--ds-fuell-neutral); border-radius: var(--ds-r-2); padding: 2px 8px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Mail-Dialog ---------- */
.mail-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; }
.mail-modal[hidden] { display: none; }
.mm-backdrop { position: absolute; inset: 0; background: var(--ds-schleier); animation: mm-fade var(--ds-zeit) ease both; }
.mm-dialog {
  position: relative; width: min(620px, 100%); max-height: 86vh; display: flex; flex-direction: column;
  background: var(--ds-flaeche); border-radius: var(--ds-r-4);
  box-shadow: var(--ds-schatten-dialog); overflow: hidden;
  animation: mm-pop var(--ds-zeit) ease both;
}
@keyframes mm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mm-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.mm-head {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: var(--ds-flaeche-2); border-bottom: 1px solid var(--ds-rand);
}
.mm-meta { flex: 1; min-width: 0; }
.mm-to { font-size: var(--ds-t-lg); line-height: var(--ds-zh-lg); font-weight: var(--ds-gew-halbfett); color: var(--ds-text); }
.mm-subj { margin-top: 0; font-size: var(--ds-t-md); line-height: var(--ds-zh-md); color: var(--ds-text-2); }
.mm-close {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--ds-r-2); border: 0;
  background: transparent; color: var(--ds-icon); cursor: pointer; display: grid; place-items: center;
}
.mm-close:hover { background: var(--ds-fuell-transparent-hover); color: var(--ds-text); }
.mm-close svg { width: 18px; height: 18px; }
.mm-body { padding: 16px; overflow-y: auto; font-size: var(--ds-t-lg); line-height: 22px; color: var(--ds-text); white-space: pre-wrap; }
.mm-docs { list-style: none; margin: 12px 0; display: flex; flex-direction: column; gap: 6px; }
.mm-docs li { display: flex; align-items: flex-start; gap: 8px; color: var(--ds-text); }
.mm-docs li::before { content: ""; flex-shrink: 0; margin-top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--ds-icon-2); }
.mm-para { margin: 0 0 12px; }
.mm-subjectline { font-weight: var(--ds-gew-halbfett); color: var(--ds-text); margin-bottom: 16px; }
.mm-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--ds-rand); }
.mm-deadline { font-size: var(--ds-t-md); color: var(--ds-text-2); font-weight: var(--ds-gew-mittel); }

/* ---------- Toast: dunkel, unten mittig ---------- */
.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(8px);
  z-index: 140; background: var(--ds-toast-grund); color: var(--ds-toast-text);
  font-size: var(--ds-t-md); line-height: var(--ds-zh-md); font-weight: var(--ds-gew-mittel);
  padding: 8px 12px; border-radius: var(--ds-r-2);
  box-shadow: var(--ds-schatten-5); opacity: 0; pointer-events: none;
  transition: opacity var(--ds-zeit) ease, transform var(--ds-zeit) ease; display: inline-flex; align-items: center; gap: 8px;
}
.toast[hidden] { display: none; }
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Punkte (Zustand) ---------- */
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot.ok { background: var(--green); }
.dot.warn { background: var(--gold); }
.dot.low { background: var(--miss-arc); }


/* ---------- Dokument-Namenszusaetze ---------- */
.c-name-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c-name-line { font-weight: var(--ds-gew-mittel); color: var(--ds-text); }
.c-name-tag { font-size: var(--ds-t-sm); font-weight: var(--ds-gew-mittel); color: var(--ds-text-2); margin-left: 2px; }
.c-name-note { font-size: var(--ds-t-sm); color: var(--ds-warn-text); }
/* Die Zahl neben der Spaltenueberschrift: Ziffer im Text, kein Kreis. */
.th-count {
  display: inline-grid; place-items: center; margin-left: 4px;
  color: var(--ds-text-2);
  font-size: var(--ds-t-sm); font-weight: var(--ds-gew-mittel); vertical-align: middle; font-variant-numeric: tabular-nums;
}

/* Konfidenz-Stufen als Wort (19.09.2026): hoch ist der Normalfall und bleibt
   still, mittel traegt Gewicht, niedrig traegt den kritischen Ton -- sie ist
   der Fall, in dem jemand nachsehen muss. */
.conf-b {
  display: inline-flex; align-items: center;
  font-size: var(--ds-t-sm); line-height: var(--ds-zh-sm); font-weight: var(--ds-gew-mittel);
}
.conf-b.hoch { color: var(--ds-text-2); font-weight: var(--ds-gew-normal); }
.conf-b.mittel { color: var(--ds-text); }
.conf-b.niedrig { color: var(--ds-krit-text); }

/* Filter auf die Pruef-Faelle: Filterchips */
.doc-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.doc-filter-chip {
  display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 2px 8px; border-radius: var(--ds-r-2);
  border: 1px dashed var(--ds-rand-hover); background: transparent; color: var(--ds-text-2);
  font-size: var(--ds-t-sm); line-height: var(--ds-zh-sm); font-weight: var(--ds-gew-mittel); cursor: pointer;
}
.doc-filter-chip:hover { background: var(--ds-fuell-transparent-hover); color: var(--ds-text); }
.doc-filter-chip b { font-weight: var(--ds-gew-halbfett); }
/* Aktiver Filter ist ein Zustand, keine Handlung: gefuellte graue Flaeche,
   durchgezogen statt gestrichelt. Gefuellt dunkel bleibt allein der Knopf. */
.doc-filter-chip.is-active {
  border-style: solid; border-color: transparent;
  background: var(--ds-fuell-leiste);
  color: var(--ds-text);
}
.doc-filter-chip.warnchip:not(.is-active) { color: var(--ds-warn-text); }
.doc-filter-hint { font-size: var(--ds-t-sm); line-height: var(--ds-zh-sm); color: var(--ds-text-2); }
.t-row.conf-hidden { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Knoepfe (nach bausteine.css .ds-knopf) ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: var(--ds-knopf-hoehe);
  border-radius: var(--ds-r-2); cursor: pointer; border: 0;
  padding: 6px 12px;
  font: var(--ds-gew-mittel) var(--ds-t-sm)/var(--ds-zh-sm) var(--ds-schrift);
  text-decoration: none; white-space: nowrap;
  background: var(--ds-fuell); box-shadow: var(--ds-schatten-knopf); color: var(--ds-text);
  transition: background-color var(--ds-zeit-kurz) ease;
}
.btn:focus-visible { outline: 2px solid var(--ds-rand-fokus); outline-offset: 1px; }
.btn.sm { min-height: var(--ds-knopf-hoehe); padding: 4px 10px; font-size: var(--ds-t-sm); }
.btn-primary {
  background: var(--ds-glanz-primaer), var(--ds-fuell-primaer);
  box-shadow: var(--ds-schatten-primaer);
  color: var(--ds-text-auf-primaer);
}
.btn-primary:hover { background: var(--ds-glanz-primaer), var(--ds-fuell-primaer-hover); box-shadow: var(--ds-schatten-primaer-hover); }
.btn-primary:active { background: var(--ds-glanz-primaer), var(--ds-fuell-primaer-aktiv); box-shadow: var(--ds-schatten-primaer-aktiv); }
.btn-outline { background: var(--ds-fuell); box-shadow: var(--ds-schatten-knopf); color: var(--ds-text); }
.btn-outline:hover { background: var(--ds-fuell-hover); box-shadow: var(--ds-schatten-knopf-hover); }
.btn-outline:active { background: var(--ds-fuell-aktiv); box-shadow: var(--ds-schatten-knopf-aktiv); }

/* Zeilen-Aktionen in der Tabelle: immer sekundaer (ein Hauptknopf je Karte) */
.card-table .c-op .btn,
.card-table .c-op .btn.btn-primary {
  background: var(--ds-fuell); box-shadow: var(--ds-schatten-knopf); color: var(--ds-text);
}
.card-table .c-op .btn:hover { background: var(--ds-fuell-hover); box-shadow: var(--ds-schatten-knopf-hover); color: var(--ds-text); }

/* ---------- Export-Menue (Uebernahme-Reports: PDF · JSON · XML) ---------- */
.result-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.export-wrap { position: relative; flex-shrink: 0; }
.export-btn { white-space: nowrap; }
.ordner-btn { white-space: nowrap; }

/* ---------- Ordner-Export: Dialog mit Struktur-Vorschau ---------- */
.ordner-modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ordner-modal[hidden] { display: none; }
.ordner-backdrop { position: absolute; inset: 0; background: var(--ds-schleier); animation: ord-fade var(--ds-zeit) ease both; }
.ordner-dialog { position: relative; width: 560px; max-width: 100%; max-height: 86vh; display: flex; flex-direction: column;
  background: var(--ds-flaeche); border-radius: var(--ds-r-4); overflow: hidden;
  box-shadow: var(--ds-schatten-dialog); animation: ord-pop var(--ds-zeit) ease both; }
@keyframes ord-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ord-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ordner-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: var(--ds-flaeche-2); border-bottom: 1px solid var(--ds-rand); }
.ordner-modal-title { font-size: var(--ds-t-lg); line-height: var(--ds-zh-lg); font-weight: var(--ds-gew-halbfett); color: var(--ds-text); }
.ordner-modal-sub { font-size: var(--ds-t-sm); line-height: var(--ds-zh-sm); color: var(--ds-text-2); margin-top: 0; }
.ordner-close { flex-shrink: 0; display: inline-flex; padding: 5px; border-radius: var(--ds-r-2); cursor: pointer;
  background: transparent; border: 0; color: var(--ds-icon); }
.ordner-close:hover { background: var(--ds-fuell-transparent-hover); color: var(--ds-text); }
.ordner-tree { overflow-y: auto; padding: 12px 16px; font-size: var(--ds-t-md); line-height: var(--ds-zh-md); }
.ot-root { display: flex; align-items: center; gap: 8px; font-weight: var(--ds-gew-halbfett); color: var(--ds-text); margin-bottom: 8px; }
.ot-root svg { width: 18px; height: 18px; color: var(--ds-icon); }
.ot-group { margin-left: 4px; padding-left: 12px; border-left: 1px solid var(--ds-rand); padding-bottom: 8px; }
.ot-folder { display: flex; align-items: center; gap: 8px; font-weight: var(--ds-gew-halbfett); color: var(--ds-text); padding: 4px 0; }
.ot-folder svg { width: 16px; height: 16px; color: var(--ds-icon); flex-shrink: 0; }
.ot-folder.is-note svg { color: var(--ds-icon-2); }
.ot-count { margin-left: auto; font-size: var(--ds-t-sm); color: var(--ds-text-2); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.ot-file { display: flex; align-items: center; gap: 8px; color: var(--ds-text); padding: 3px 0 3px 24px; font-size: var(--ds-t-md); }
.ot-file svg { width: 14px; height: 14px; color: var(--ds-icon-2); flex-shrink: 0; }
.ot-hint { padding: 2px 0 4px 24px; font-size: var(--ds-t-sm); color: var(--ds-text-2); font-style: italic; }
.ordner-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-top: 1px solid var(--ds-rand); }
.ordner-foot-note { font-size: var(--ds-t-sm); color: var(--ds-text-2); }
body.modal-open { overflow: hidden; }
.export-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 40;
  width: 300px; max-width: 78vw; padding: 6px;
  background: var(--ds-flaeche); border-radius: var(--ds-r-3);
  box-shadow: var(--ds-schatten-ueber);
  display: flex; flex-direction: column; gap: 2px;
  animation: export-pop var(--ds-zeit) ease both;
}
.export-menu[hidden] { display: none; }
@keyframes export-pop { from { opacity: 0; } to { opacity: 1; } }
.export-menu-h {
  font-size: var(--ds-t-sm); line-height: var(--ds-zh-sm); font-weight: var(--ds-gew-mittel);
  color: var(--ds-text-2); padding: 4px 8px 6px;
}
.export-item {
  display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: var(--ds-r-2);
  text-decoration: none; color: var(--ds-text); transition: background-color var(--ds-zeit-kurz) ease;
}
.export-item:hover { background: var(--ds-flaeche-hover); }
.export-fmt {
  flex-shrink: 0; width: 44px; height: 28px; border-radius: var(--ds-r-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: var(--ds-t-sm); font-weight: var(--ds-gew-fett); letter-spacing: 0.03em;
  color: #ffffff;
}
.fmt-pdf  { background: var(--fmt-pdf); }
.fmt-json { background: var(--fmt-json); }
.fmt-xml  { background: var(--fmt-xml); }
.export-txt { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.export-txt b { font-size: var(--ds-t-md); line-height: var(--ds-zh-md); font-weight: var(--ds-gew-halbfett); }
.export-txt small { font-size: var(--ds-t-sm); line-height: var(--ds-zh-sm); color: var(--ds-text-2); }
.table-note { margin-top: 8px; padding: 0 4px; font-size: var(--ds-t-sm); color: var(--ds-text-2); }

/* ---------- Tabelle: grauer Kopf, 13px Zeilen, Hover ---------- */
.table { width: 100%; }
.t-head, .t-row {
  display: grid;
  /* minmax(0, …) statt reiner fr-Werte: sonst waechst eine Spalte mit langem
     Inhalt ueber ihren Anteil hinaus und schiebt die folgenden Spalten NUR in
     dieser Zeile nach rechts. So sind die Spalten in jeder Zeile gleich. */
  grid-template-columns: 28px minmax(0, 1.95fr) minmax(0, 1.2fr) minmax(0, 0.85fr) minmax(0, 0.55fr) minmax(0, 0.9fr) minmax(0, 0.8fr);
  align-items: center; gap: 8px;
  padding: 6px 16px;
}
.c-cat { white-space: nowrap; }
.t-head {
  background: var(--ds-flaeche-2);
  color: var(--ds-text-2); font-size: var(--ds-t-sm); line-height: var(--ds-zh-sm); font-weight: var(--ds-gew-mittel);
  border-top: 1px solid var(--ds-rand); border-bottom: 1px solid var(--ds-rand);
}
.t-row { border-bottom: 1px solid var(--ds-rand-2); font-size: var(--ds-t-md); line-height: var(--ds-zh-md); min-height: 44px; }
.t-row:hover { background: var(--ds-flaeche-hover); }
.t-row:last-child { border-bottom: none; }

/* Tabelle buendig an die Kartenkanten, Kopf klebt beim Rollen */
.card-table { padding-bottom: 0; overflow: clip; }
.card-table .table {
  margin: 0 -16px; width: calc(100% + 32px);
  max-height: clamp(280px, 42vh, 460px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.card-table .t-head {
  position: sticky; top: 0; z-index: 1;
}
.c-rank { color: var(--ds-text-2); font-variant-numeric: tabular-nums; }
.c-name { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--ds-gew-mittel); color: var(--ds-text); min-width: 0; overflow-wrap: anywhere; }
.c-cat, .c-date { color: var(--ds-text); }
.c-date { font-variant-numeric: tabular-nums; }
.c-conf { color: var(--ds-text); }
.c-conf.mono { font-family: var(--mono); }
.file-ico {
  flex-shrink: 0; width: 30px; height: 20px; border-radius: var(--ds-r-1);
  display: grid; place-items: center;
  background: var(--ds-fuell-neutral); color: var(--ds-text-2);
  font-size: 10px; font-weight: var(--ds-gew-halbfett); letter-spacing: 0.02em;
}
.file-ico.miss { background: transparent; border: 1px dashed var(--ds-rand-hover); color: var(--ds-text-2); }
/* Das gelieferte PDF-Logo statt des Schriftzugs -- dieselbe Datei wie in der
   Werkstatt-Oberflaeche (Herkunft und Lizenz: static/dateiformate/HERKUNFT.md).
   flex-shrink 0: es ersetzt die feste Plakette und darf die Zeile nicht druecken. */
.file-ico-logo { flex-shrink: 0; width: 20px; height: 20px; display: block; }
.export-fmt-logo { flex-shrink: 0; width: 26px; height: 26px; display: block; }
.empty { color: var(--ds-text-2); }
.c-op { display: flex; justify-content: flex-end; }

/* Status: das Wort, keine Flaeche (19.09.2026)

   Dieselbe Regel wie an .wk-zustand in static/werkstatt.css: Farbe nie als
   Flaeche, nur im Wort, und nur dort, wo etwas blockiert. "Fehlt" ist der
   einzige Ton in dieser Liste; laufend und wartend tragen Gewicht statt
   Farbe, fertig bleibt still. Der Klassenname .pill ist geblieben, weil er
   an vier Vorlagen steht -- die Form ist keine Pille mehr. */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--ds-t-sm); line-height: var(--ds-zh-sm); font-weight: var(--ds-gew-mittel);
  color: var(--ds-text-2); font-variant-numeric: tabular-nums;
}
.pill svg { width: 13px; height: 13px; }
.pill.ok { color: var(--ds-text-2); font-weight: var(--ds-gew-normal, 450); }
.pill.miss { color: var(--ds-krit-text); }
.pill.wait { color: var(--ds-text); }
.pill.busy { color: var(--ds-text); }
.pill-spin { width: 11px; height: 11px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; display: inline-block; animation: spin 0.7s linear infinite; }

/* ---------- Dokumente ergaenzen: Ablagezone im Dialog ---------- */
.up-dialog { width: min(520px, 100%); }
.up-drop {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 40px 24px; text-align: center; cursor: pointer;
  border: 1px dashed var(--ds-rand-feld); border-radius: var(--ds-r-3);
  background: var(--ds-flaeche);
  transition: background-color var(--ds-zeit) ease, border-color var(--ds-zeit) ease;
}
.up-drop:hover, .up-drop.is-dragover { background: var(--ds-flaeche-hover); border-color: var(--ds-rand-feld-hover); }
.up-drop-ico { color: var(--ds-icon); }
.up-drop-ico svg { width: 28px; height: 28px; }
.up-drop-main { font-size: var(--ds-t-lg); line-height: var(--ds-zh-lg); font-weight: var(--ds-gew-halbfett); color: var(--ds-text); white-space: normal; }
.up-drop-sub { font-size: var(--ds-t-md); line-height: var(--ds-zh-md); color: var(--ds-text-2); max-width: 340px; white-space: normal; }
.mm-body .up-drop { white-space: normal; }

/* =========================================================
   AKT 1–3 – Arbeitsbereich (Liste links / Vorschau rechts)
   ========================================================= */
.topbar { flex-shrink: 0; }
.view-workspace { flex: 1; min-height: 0; }
.ws-split { height: calc(100vh - var(--ds-kopfleiste-hoehe)); display: grid; grid-template-columns: 320px 1fr; min-height: 0; }

/* LINKS: Upload + Dokumentenliste als Flaeche */
.ws-left { display: flex; flex-direction: column; min-height: 0; background: var(--ds-flaeche); border-right: 1px solid var(--ds-rand); }
.ws-dropform { padding: 16px 16px 8px; }
.ws-samples-btn { width: calc(100% - 32px); margin: 0 16px 12px; }
.ws-samples-btn[disabled] { opacity: .6; cursor: default; }
.ws-drop {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 24px 12px; text-align: center;
  border: 1px dashed var(--ds-rand-feld); border-radius: var(--ds-r-3);
  background: var(--ds-flaeche); cursor: pointer;
  transition: background-color var(--ds-zeit) ease, border-color var(--ds-zeit) ease;
}
.ws-drop:hover { background: var(--ds-flaeche-hover); border-color: var(--ds-rand-feld-hover); }
.ws-drop.is-dragover { background: var(--ds-flaeche-aktiv); border-color: var(--ds-rand-feld-aktiv); }
.ws-drop-ico { color: var(--ds-icon); }
.ws-drop-ico svg { width: 20px; height: 20px; }
.ws-drop-main { font-size: var(--ds-t-md); line-height: var(--ds-zh-md); font-weight: var(--ds-gew-halbfett); color: var(--ds-text); }
.ws-drop-sub { font-size: var(--ds-t-sm); line-height: var(--ds-zh-sm); color: var(--ds-text-2); }

.ws-list-head { padding: 8px 16px 4px; font-size: var(--ds-t-sm); line-height: var(--ds-zh-sm); font-weight: var(--ds-gew-mittel); color: var(--ds-text-2); border-top: 1px solid var(--ds-rand-2); }
.ws-doclist { list-style: none; flex: 1; min-height: 0; overflow-y: auto; padding: 2px 8px 8px; display: flex; flex-direction: column; gap: 2px; }
/* KEINE EINBLEND-ANIMATION. renderList() baut die ganze Liste neu (innerHTML=""),
   und das passiert bei JEDEM Ablegen von Dateien -- beim zweiten Stapel spielt
   `chip-in` also fuer alle Zeilen noch einmal, auch fuer die, die schon dastanden.
   Die Werkstatt hat dieselbe Animation aus demselben Grund entfernt (siehe
   templates/live.html, "KEINE EINBLEND-ANIMATION"). Sie faellt ersatzlos weg. */
.ws-doc { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--ds-r-2); cursor: pointer; border: 0; transition: background-color var(--ds-zeit-kurz) ease; }
.ws-doc:hover { background: var(--ds-flaeche-hover); }
.ws-doc.is-active { background: var(--ds-flaeche-gewaehlt); }
.ws-doc-meta { flex: 1; min-width: 0; }
.ws-doc-name { display: block; font-size: var(--ds-t-md); line-height: var(--ds-zh-md); color: var(--ds-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-doc-sub { display: block; font-size: var(--ds-t-sm); line-height: var(--ds-zh-sm); color: var(--ds-text-2); margin-top: 0; }
.ws-left-foot { padding: 12px 16px; border-top: 1px solid var(--ds-rand); }
.ws-left-foot .btn { width: 100%; min-height: var(--ds-knopf-hoehe-gross); font-size: var(--ds-t-md); }

/* RECHTS: Dokumentvorschau auf dem grauen Grund */
.ws-right { display: flex; flex-direction: column; min-height: 0; background: var(--ds-grund); }
.ws-preview-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; background: var(--ds-flaeche); border-bottom: 1px solid var(--ds-rand); flex-shrink: 0; }
.ws-preview-name { font-size: var(--ds-t-md); font-weight: var(--ds-gew-halbfett); color: var(--ds-text); }
.ws-preview-pages { font-size: var(--ds-t-sm); color: var(--ds-text-2); font-variant-numeric: tabular-nums; }
/* Dieselbe Rollkette wie in der Werkstatt (`.wk-detail-leib`, werkstatt.css):
   am Ende des letzten Blattes gibt der Browser den Rest des Bildlaufs nach
   oben weiter, und auf schmalen Geraeten stehen Liste und Vorschau
   untereinander (Haltepunkt weiter unten) -- dann rollt die Seite unter der
   Vorschau weg, obwohl der Zeiger ueber dem Dokument steht. */
.ws-preview { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
.ws-pdf { flex: 1; width: 100%; border: none; background: var(--papier); }
.ws-empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ds-text-2); font-size: var(--ds-t-md); line-height: var(--ds-zh-md); text-align: center; max-width: 280px; padding: 24px; }
.ws-empty svg { color: var(--ds-icon-2) !important; }

/* Durchscrollbare Vorschau: alle Dokumente hintereinander, Wechsel per Scroll.
   Jedes Dokument ist ein Block mit klebender Kopfzeile als Trenner; die Seiten
   werden erst gerendert, wenn der Block in Sichtweite kommt (Lazy-Rendering). */
.ws-doc-block { flex-shrink: 0; border-bottom: 1px solid var(--ds-rand); }
.ws-doc-block:last-child { border-bottom: none; }
.ws-block-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 16px; background: var(--ds-flaeche-2); border-bottom: 1px solid var(--ds-rand);
}
.ws-block-name { font-size: var(--ds-t-sm); font-weight: var(--ds-gew-halbfett); color: var(--ds-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-block-sz { font-size: var(--ds-t-sm); color: var(--ds-text-2); flex-shrink: 0; font-variant-numeric: tabular-nums; margin-left: auto; }
.ws-block-drehen { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--ds-r-1); background: none; color: var(--ds-text-2); cursor: pointer; }
.ws-block-drehen:hover { color: var(--ds-text); background: var(--ds-fuell-hover); }
.ws-block-pages { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px; background: var(--ds-grund); }
.ws-cv-page { max-width: 100%; height: auto; border-radius: var(--ds-r-1); background: var(--papier); box-shadow: var(--ds-schatten-karte); }
.ws-block-load { padding: 48px 16px; text-align: center; color: var(--ds-text-2); font-size: var(--ds-t-md); }

/* "Papier"-Seiten der Vorschau (immer hell, wie ein echtes PDF) */
.ws-page {
  width: 100%; max-width: 600px;
  background: var(--papier); color: var(--papier-fg);
  border-radius: var(--ds-r-1); box-shadow: var(--ds-schatten-karte);
  padding: var(--raum-7) var(--raum-7);
  font-family: Georgia, "Times New Roman", serif;
}
.ws-page-h { text-align: center; font-size: var(--schrift-kopf); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.ws-page-sub { text-align: center; font-size: var(--schrift-neben); color: var(--papier-fg-schwach); margin-top: var(--raum-1); margin-bottom: var(--raum-5); }
.ws-page p { font-size: var(--schrift-neben); line-height: 1.75; color: var(--papier-fg-2); margin-bottom: var(--raum-3); text-align: justify; }
.ws-page p b { color: var(--papier-fg-stark); }
.ws-page-num { text-align: center; font-size: var(--schrift-mini); color: var(--papier-fg-schwach); margin-top: var(--raum-4); }

@media (max-width: 1000px) {
  /* minmax(0, …): lange Dateinamen (nowrap) zogen die Spur sonst ueber
     die Seite hinaus, gemessen 465px Seitenbreite bei 390px Fenster. */
  .ws-split { grid-template-columns: minmax(0, 1fr); }
  .ws-right { display: none; }
}

/* =========================================================
   Responsive (Demo läuft auf Desktop; grobe Stapelung klein)
   ========================================================= */
@media (max-width: 1100px) {
  .card-progress, .card-balance, .card-promo, .card-top, .card-table {
    grid-column: 1 / -1; grid-row: auto;
  }
  .profile-meta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =========================================================
   AKT 2 – Agenten-Overlay (über dem Split; Dashboard noch nicht sichtbar)
   ========================================================= */
.agent-overlay {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: rgba(7, 11, 20, 0.80);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: ag-fade 0.3s ease both;
  cursor: pointer;
}
.agent-overlay.is-leaving { opacity: 0; transition: opacity 0.35s ease; }
@keyframes ag-fade { from { opacity: 0; } to { opacity: 1; } }

.ag-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; max-width: 680px; padding: 24px; }
.ag-orb-wrap { width: 92px; height: 92px; display: grid; place-items: center; }
.ag-orb-logo {
  width: 84px; height: 84px; border-radius: 20px;
  object-fit: cover; display: block;
  box-shadow: 0 0 60px rgba(47, 107, 255, 0.55);
  animation: orb-breathe 2.4s ease-in-out infinite;
}
.ag-title { display: inline-flex; align-items: center; gap: 9px; color: #eef1f5; font-weight: 600; font-size: 1.05rem; }
.ag-spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(76,178,220,0.25); border-top-color: #4cb2dc; animation: spin 0.9s linear infinite; }

.ag-term {
  width: 100%;
  background: linear-gradient(180deg, #131d30, #0f1726);
  border: 1px solid #21304a; border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
}
.ag-log { font-family: var(--mono); font-size: 0.92rem; line-height: 1.95; padding: 18px 20px; min-height: 264px; max-height: 46vh; overflow-y: auto; color: #d4deea; text-align: left; }
.ag-line { display: flex; gap: 10px; align-items: baseline; animation: ag-line-in 0.18s ease both; }
@keyframes ag-line-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.ag-text { flex: 1; white-space: pre-wrap; word-break: break-word; }
.ag-tag { align-self: center; flex-shrink: 0; font-family: var(--mono); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; padding: 1px 8px; border-radius: 6px; border: 1px solid currentColor; }
.ag-tag.tag-ok { color: #3ddc84; }
.ag-tag.tag-info { color: #4cb2dc; }
.ag-tag.tag-warn { color: #ffbd55; }
.ag-tag.tag-alert { color: #ff6f60; }

/* Eingerückte Unterpunkte (mehr Tiefe im Log) */
.ag-line--sub { margin-left: 28px; font-size: 0.85rem; color: #9fb0c6; }
.ag-line--sub .ag-text::before { content: "└ "; color: #51637e; }
.ag-line--muted .ag-text { color: #8493a8; }
.ag-line--warn .ag-text { color: #ffce7a; }
.ag-line--alert .ag-text { color: #ff8f80; }

/* Inline-Spinner: zeigt, dass ein Schritt gerade „arbeitet" (Stocken) */
.ag-pend {
  width: 12px; height: 12px; flex-shrink: 0; align-self: center;
  border-radius: 50%;
  border: 2px solid rgba(76,178,220,0.25); border-top-color: #4cb2dc;
  animation: spin 0.7s linear infinite;
}

.ag-done { display: inline-flex; align-items: center; gap: 9px; color: #3ddc84; font-weight: 600; font-size: 1rem; animation: ag-fade 0.3s ease both; }

/* =========================================================
   Scan-Visualisierung (zweispaltig): Log links · Seiten-Scanner rechts
   ========================================================= */
/* Klick irgendwo überspringt den Ladescreen – Zeiger deutet das an. */
.agent-overlay { cursor: pointer; }
.ag-inner.scan-shell {
  max-width: 1160px; align-items: stretch; gap: 14px; max-height: 94vh; padding: 22px;
}
.scan-head { display: flex; align-items: center; gap: 14px; }
.scan-logo { width: 46px; height: 46px; box-shadow: 0 0 28px rgba(47, 107, 255, 0.45); }
.scan-head-txt { flex: 1; min-width: 0; text-align: left; }
/* Nutzertest: der Skip-Knopf wurde uebersehen -> als deutliche Schaltflaeche,
   nach kurzer Wartezeit zusaetzlich per Puls hervorgehoben. */
.scan-skip {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: 10px;
  /* --accent-strong statt --accent, und das IM Ladeschirm, der sonst
     unberuehrt bleibt: weisse Schrift auf var(--accent) ergibt im
     Dunkel-Thema 3,34:1 und liegt unter AA. --accent-strong ist in beiden
     Themen #2f6bb0, weiss darauf 5,45:1. Das ist kein Rueckbau der
     Ueberarbeitung aus PR #688/#697/#702, sondern ein Zahlenfehler darin --
     und ausgerechnet an dem Knopf, den der Nutzertest schon einmal
     uebersehen hat (Kommentar direkt darueber). */
  /* 16.09.: heller Knopf nach dem Verwaltungs-System statt der blauen
     Flaeche -- auf der dunklen Buehne ist Hell der Hauptknopf (wie im
     Dunkelthema). #303030 auf #ffffff ergibt 12,6:1. */
  border: 0; background: #ffffff;
  color: #303030; font-size: 13px; font-weight: 500; cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.1s ease;
}
.scan-skip:hover { background: #f3f3f3; }
@keyframes scan-skip-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35); }
  50% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: no-preference) {
  .scan-skip { animation: scan-skip-puls 2.2s ease-in-out 5s 4; }
}
.scan-phase { margin-top: 3px; font-family: var(--mono); font-size: 0.82rem; color: #7d8ea6; letter-spacing: 0.04em; }
.scan-controls { display: flex; gap: 10px; flex-shrink: 0; }
.scan-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 10px; cursor: pointer;
  background: #1b2740; border: 1px solid #2b3a57; color: #dfe8f4;
  font: 600 0.85rem/1 var(--sans); transition: border-color 0.15s ease, background 0.15s ease;
}
.scan-btn:hover { border-color: #4a90d9; }
.scan-btn:disabled { opacity: 0.45; cursor: default; }
.scan-btn--ghost { background: transparent; }

.scan-progress { height: 4px; border-radius: 999px; background: #1b2740; overflow: hidden; }
.scan-progress span { display: block; height: 100%; width: 0; background: #e3e3e3;
  /* Solide Fuellung wie jeder Fortschrittsbalken (Werkstatt: --brand, hier ist
     --accent derselbe Markenwert je Thema). Der Verlauf nach Cyan machte den
     Unterschied zu allen anderen Balken sichtbar. */
  /* 220 ms ease-out -- ein Takt fuer alle Balken, siehe DESIGN.md (150-250 ms). */
  transition: width 220ms ease-out; }

.scan-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 14px; min-height: 0; }
.ag-inner.scan-shell .scan-left { max-height: 60vh; }
.ag-inner.scan-shell .ag-log { min-height: 0; height: 100%; max-height: 60vh; }
.scan-right { min-width: 0; min-height: 0; }

/* Scanner */
.scan-viewer { display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 0; }
.scan-doc {
  position: relative; flex: 1; min-height: 0;
  background: #0e1726; border: 1px solid #24334d; border-radius: 12px; overflow: hidden;
  display: grid; place-items: center; padding: 14px;
}
.scan-doc.is-stack { box-shadow: 8px 8px 0 -2px #16233a, 16px 16px 0 -4px #101b2e; }
.scan-page {
  max-width: 100%; max-height: 54vh; object-fit: contain; display: block;
  background: #fff; border-radius: 4px; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
  transform-origin: left center; will-change: transform, opacity;
}
/* Seitenwechsel: kurzes „Umblättern" – Seite bleibt dabei lesbar (kein Schwarzbild) */
.scan-page.flip { animation: scan-page-flip 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes scan-page-flip {
  0%   { opacity: 0.35; transform: perspective(1400px) rotateY(-16deg); }
  100% { opacity: 1; transform: none; }
}
.scan-line {
  position: absolute; left: 8px; right: 8px; top: 2%; height: 3px; z-index: 2;
  background: linear-gradient(90deg, transparent, #4a90d9, transparent);
  box-shadow: 0 0 18px 4px rgba(74, 144, 217, 0.55); opacity: 0; pointer-events: none;
}
/* Läuft durchgehend, solange eine Seite gescannt wird (mehrere Sweeps je Dokument). */
.scan-line.run { animation: scan-sweep 2.4s ease-in-out infinite; }
@keyframes scan-sweep {
  0% { top: 2%; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { top: 96%; opacity: 0; }
}
.scan-label {
  position: absolute; left: 14px; bottom: 14px; z-index: 3;
  display: inline-flex; flex-direction: column; gap: 2px; padding: 9px 13px; border-radius: 10px;
  background: rgba(14, 23, 38, 0.92); border: 1px solid #4a90d9;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); animation: scan-pop 0.25s ease both;
}
.scan-label.is-pruef { border-color: var(--gold); }
.scan-label-cat { font-weight: 700; color: #eef4fb; font-size: 0.92rem; }
.scan-label-conf { font-family: var(--mono); font-size: 0.8rem; color: #8fa3bd; }
@keyframes scan-pop { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }

.scan-extract {
  position: absolute; right: 14px; top: 14px; z-index: 3; width: min(60%, 310px);
  background: rgba(12, 20, 33, 0.95); border: 1px solid #2b3a57; border-radius: 10px;
  padding: 12px 14px; animation: scan-pop 0.25s ease both;
}
.scan-extract-h { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: #9fb0c6; margin-bottom: 8px; font-weight: 700; }
.scan-extract-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.scan-extract-list li { display: flex; flex-direction: column; gap: 1px; }
.ex-feld { color: #8fa3bd; font-size: 0.8rem; }
.ex-wert { color: #eef4fb; font-weight: 600; font-size: 0.84rem; }
.ex-quelle { color: #6d7f97; font-family: var(--mono); font-size: 0.8rem; }

.scan-meta { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; }
.scan-count { color: #cdd8e6; font-size: 0.85rem; }
.scan-count b { color: #fff; font-variant-numeric: tabular-nums; }
.scan-file { color: #7d8ea6; font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50%; }

/* Phase 4 – Abgleich (Katalog + Donut) */
.scan-audit { display: grid; grid-template-columns: 1fr 186px; gap: 16px; height: 100%; min-height: 0; }
.scan-audit-main { display: flex; flex-direction: column; min-height: 0; }
.scan-audit-h { font-size: 0.82rem; color: #cdd8e6; font-weight: 600; margin-bottom: 8px; }
.scan-audit-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; }
.audit-row {
  display: grid; grid-template-columns: 24px 1fr 14px; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 7px; font-size: 0.82rem;
  opacity: 0.4; transition: opacity 0.2s ease, background 0.2s ease;
}
.audit-row.is-erkannt, .audit-row.is-pruefung, .audit-row.is-fehlend, .audit-row.is-offen { opacity: 1; }
.audit-nr { font-family: var(--mono); font-size: 0.8rem; color: #6d7f97; }
.audit-titel { color: #dbe4f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-dot { width: 10px; height: 10px; border-radius: 50%; background: #2b3a57; }
.audit-row.is-erkannt .audit-dot { background: var(--green); }
.audit-row.is-pruefung .audit-dot { background: var(--gold); }
.audit-row.is-fehlend .audit-dot { background: var(--miss-arc); }
.audit-row.is-fehlend { background: rgba(224, 104, 90, 0.10); }
.audit-row.is-offen .audit-dot { background: #3a4a63; }

.scan-audit-side { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.scan-donut-wrap { position: relative; width: 158px; height: 158px; }
.scan-donut { width: 100%; height: 100%; display: block; }
.scan-donut .donut-track { stroke: #24334d; }
.scan-seg { stroke-linecap: butt; transition: stroke-dasharray 0.6s var(--sans, ease); }
.scan-seg.seg-ok { stroke: var(--green); }
.scan-seg.seg-wait { stroke: var(--gold); }
.scan-seg.seg-miss { stroke: var(--miss-arc); }
.scan-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.scan-donut-pct { font-size: 1.9rem; font-weight: 700; color: #fff; line-height: 1; }
.scan-donut-pct b { font-variant-numeric: tabular-nums; }
.scan-donut-sub { margin-top: 3px; font-size: 0.82rem; color: #8fa3bd; }
.scan-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 0.82rem; color: #cdd8e6; }
.scan-legend li { display: flex; align-items: center; gap: 8px; }
.scan-legend b { color: #fff; min-width: 20px; font-variant-numeric: tabular-nums; }
/* Die Ladebuehne bleibt, wie sie war: ihr Ring laeuft in --green/--gold/
   --miss-arc (.scan-seg), also auch ihre Legende, samt quadratischer Marke.
   Die Diagramm-Zustaende gelten fuer den Ring auf der Ergebnisseite. */
.scan-legend .lg-dot { width: 12px; height: 12px; border-radius: 3px; }
.scan-legend .lg-ok { background: var(--green); }
.scan-legend .lg-wait { background: var(--gold); }
.scan-legend .lg-miss { background: var(--miss-arc); }

.scan-done { justify-content: space-between; width: 100%; padding: 2px; }
.scan-done-txt { display: inline-flex; align-items: center; gap: 9px; color: #3ddc84; font-weight: 600; }
.scan-done-txt svg { width: 20px; height: 20px; flex-shrink: 0; }
.scan-done-txt b { color: #fff; }

@media (max-width: 900px) {
  .scan-layout { grid-template-columns: 1fr; }
  .ag-inner.scan-shell .scan-left { max-height: 30vh; }
  .scan-audit { grid-template-columns: 1fr; }
  .scan-audit-side { flex-direction: row; justify-content: center; }
  .scan-controls .scan-btn-lbl { display: none; }
}
.ag-done svg { width: 20px; height: 20px; }

/* Hervorhebung des gerade verarbeiteten Dokuments in der Liste */
.ws-doc.flash { background: var(--ds-flaeche-gewaehlt) !important; box-shadow: inset 0 0 0 1px var(--ds-rand-feld); }

/* Terminal-Titelleiste im Agenten-Overlay */
.ag-term .term-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: rgba(0,0,0,0.25); border-bottom: 1px solid #18233a; }
.ag-term .term-bar-title { font-family: var(--mono); font-size: 0.82rem; color: #7e8ea6; letter-spacing: 0.02em; }

/* =========================================================
   Willkommens-Overlay (nach dem Login)
   Solides, definiertes Panel (KEIN Glas, kein Blur-Spiel). Dashboard
   dahinter bleibt klar erkennbar, nur durch ein gleichmäßiges dunkles
   Scrim abgedunkelt. Das Panel schwebt mit gerichtetem Schatten davor.
   ========================================================= */
.welcome-overlay {
  position: fixed; inset: 0; z-index: 115;
  display: grid; place-items: center;
  background: rgba(4, 7, 12, 0.52);               /* gleichmäßiges Scrim, KEIN Blur */
  opacity: 0; cursor: pointer;
}
.welcome-overlay.is-in  { opacity: 1; transition: opacity 0.3s ease !important; }
.welcome-overlay.is-out { opacity: 0; transition: opacity 0.45s ease !important; }

/* Solides Panel – satt, klar definiert, schwebend. */
.wc-panel {
  position: relative;
  width: min(400px, 92vw);
  padding: 32px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  text-align: center;
  background: var(--ds-flaeche);                   /* NICHT durchscheinend */
  border-radius: var(--ds-r-4);
  box-shadow: var(--ds-schatten-dialog);
}
/* Sanftes Ein-Skalieren des Panels (erst mit .is-in, überstimmt den
   globalen Reduced-Motion-Blanket bewusst nur hier). */
@keyframes wc-panel-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
.welcome-overlay.is-in .wc-panel { animation: wc-panel-in 0.28s ease both !important; }

/* ---- Haken-Symbol + Glow ----
   WICHTIG: Der BASIS-Zustand von Ring, Haken und Text ist der FERTIGE,
   sichtbare Zustand. Die Zeichen-Animationen werden erst über die Klasse
   .is-in (vom JS nach einem Reflow gesetzt) ausgelöst. So wird zuverlässig
   animiert – und falls Animationen mal nicht laufen, ist trotzdem alles
   sichtbar (nie „gar nichts"). */
.wc-symbol { position: relative; display: grid; place-items: center; width: 72px; height: 72px; }
.wc-glow {
  position: absolute; width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, var(--green) 0%, transparent 62%);
  opacity: 0; transform: scale(0.6); pointer-events: none;
}
@keyframes wc-glow {
  0%   { opacity: 0;    transform: scale(0.55); }
  45%  { opacity: 0.28; transform: scale(1.0); }
  100% { opacity: 0;    transform: scale(1.35); }
}

.wc-check { position: relative; overflow: visible; }
@keyframes wc-bounce { 0% { transform: scale(1); } 45% { transform: scale(1.1); } 100% { transform: scale(1); } }

/* Ring – Basis = fertig gezeichnet (Umfang 2·pi·44 ≈ 276.5) */
.wc-ring {
  stroke: var(--green); stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 276.5; stroke-dashoffset: 0;
  transform: rotate(-90deg); transform-origin: 50% 50%;
}
@keyframes wc-draw-ring { from { stroke-dashoffset: 276.5; } to { stroke-dashoffset: 0; } }

/* Haken – Basis = fertig gezeichnet (Länge ≈ 61) */
.wc-mark {
  stroke: var(--green); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 61; stroke-dashoffset: 0;
}
@keyframes wc-draw-mark { from { stroke-dashoffset: 61; } to { stroke-dashoffset: 0; } }

/* ---- Text – Basis = sichtbar ---- */
.wc-text {
  display: flex; flex-direction: column; align-items: center; gap: var(--raum-2);
  opacity: 1;
}
@keyframes wc-textin { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
/* Gruß: gedämpfte Sekundärfarbe, mittlere Stärke (NICHT dünn). */
.wc-hi   { font-size: var(--ds-t-md); font-weight: 500; color: var(--ds-text-2); }
/* Name: groß, kräftig, primäre Textfarbe, klar dominant. */
.wc-name { font-size: var(--anzeige-gross); line-height: var(--ds-zh-h-2xl); font-weight: 700; letter-spacing: var(--ds-sperr-am-dichtesten); color: var(--ds-text); }

/* Animationen werden erst mit .is-in ausgelöst (zuverlässiger Start).
   !important, damit die Haken-Animation auch dann läuft, wenn das System
   „Bewegung reduzieren" aktiv hat (der globale Reduced-Motion-Blanket
   weiter oben schaltet sonst ALLE Animationen ab). Bewusst nur für dieses
   Willkommens-Symbol – der Rest der App respektiert Reduced Motion. Die
   Haken-Zeichnung ist eine dezente, nicht-vestibuläre Linien-Animation. */
.welcome-overlay.is-in .wc-ring  { animation: wc-draw-ring 0.6s ease both !important; }
.welcome-overlay.is-in .wc-mark  { animation: wc-draw-mark 0.3s 0.6s ease both !important; }
.welcome-overlay.is-in .wc-check { animation: wc-bounce 0.42s 0.92s cubic-bezier(0.2, 0.8, 0.3, 1.4) both !important; }
.welcome-overlay.is-in .wc-glow  { animation: wc-glow 1.5s 0.55s ease both !important; }
.welcome-overlay.is-in .wc-text  { animation: wc-textin 0.55s 1.15s ease both !important; }

/* =========================================================
   Pflichtenkatalog – Checkliste der 30 Positionen (#view-katalog)
   Kopf als Karte mit Fortschritt, Gruppen als Zeilenkarten.
   ========================================================= */
.view-katalog { display: block; }
.kat-head {
  max-width: 940px; margin: 0 auto 16px;
  padding: 16px; background: var(--ds-flaeche);
  border-radius: var(--ds-r-3); box-shadow: var(--ds-schatten-karte);
}
.kat-head-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kat-title {
  font-size: var(--ds-t-h-lg); line-height: var(--ds-zh-h-lg);
  font-weight: var(--ds-gew-fett); letter-spacing: var(--ds-sperr-dicht);
}
.kat-pct { font-size: var(--ds-t-md); color: var(--ds-text-2); }
.kat-pct b { font-size: var(--ds-t-lg); color: var(--ds-text); font-weight: var(--ds-gew-halbfett); font-variant-numeric: tabular-nums; }
.kat-progress { height: 8px; border-radius: var(--ds-r-1); background: var(--ds-fuell-leiste); overflow: hidden; margin: 12px 0; }
.kat-progress span { display: block; height: 100%; width: 0; border-radius: var(--ds-r-1);
  background: var(--ds-fuell-primaer);
  /* Solide Fuellung wie jeder Fortschrittsbalken. 220 ms ease-out: ein Takt
     fuer alle Balken, siehe DESIGN.md. */
  transition: width 220ms ease-out; }
.kat-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; }
.kat-legend li { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ds-t-md); color: var(--ds-text-2); }
.kat-legend b { font-weight: var(--ds-gew-halbfett); color: var(--ds-text); font-variant-numeric: tabular-nums; }
.kat-legend .kat-dot { width: 12px; height: 4px; border-radius: 2px; }

/* Farbklassen (Grafik: Punkte) */
.view-katalog .c-green { background: var(--green); } .view-katalog .c-amber { background: var(--gold); }
.view-katalog .c-red { background: var(--miss-arc); } .view-katalog .c-grey { background: var(--ds-icon-2); }

/* Gruppen */
.kat-groups { max-width: 940px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.kat-group-h { display: flex; align-items: center; gap: 8px; font-size: var(--ds-t-lg); line-height: var(--ds-zh-lg); font-weight: var(--ds-gew-halbfett); margin-bottom: 8px; }
.kat-letter { flex-shrink: 0; width: 24px; height: 24px; border-radius: var(--ds-r-2); display: inline-flex; align-items: center; justify-content: center;
  background: var(--ds-fuell-neutral); color: var(--ds-text); font-size: var(--ds-t-sm); font-weight: var(--ds-gew-halbfett); }
.kat-list { list-style: none; margin: 0; padding: 0; border-radius: var(--ds-r-3); overflow: hidden; background: var(--ds-flaeche); box-shadow: var(--ds-schatten-karte); }

/* Zeile */
.kat-row { display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: 12px;
  padding: 8px 16px; border-top: 1px solid var(--ds-rand-2); font-size: var(--ds-t-md); line-height: var(--ds-zh-md); }
.kat-row:first-child { border-top: 0; }
.kat-row:hover { background: var(--ds-flaeche-hover); }
.kat-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.kat-nr { font-size: var(--ds-t-sm); color: var(--ds-text-2); min-width: 20px; text-align: right; font-variant-numeric: tabular-nums; }
.kat-main { min-width: 0; }
.kat-titel { font-weight: var(--ds-gew-mittel); color: var(--ds-text); }
.kat-hinweis { display: block; font-size: var(--ds-t-sm); line-height: var(--ds-zh-sm); color: var(--ds-text-2); margin-top: 0; }
.kat-beleg { justify-self: end; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: var(--ds-t-sm); font-weight: var(--ds-gew-mittel); color: var(--ds-link); text-decoration: none;
  padding: 2px 6px; border-radius: var(--ds-r-2); }
.kat-beleg svg { width: 13px; height: 13px; flex-shrink: 0; }
.kat-beleg:hover { color: var(--ds-link-hover); text-decoration: underline; }
.kat-status-lbl { justify-self: end; font-size: var(--ds-t-sm); font-weight: var(--ds-gew-mittel); white-space: nowrap; }
/* Zustand als Schrift: die Textstufe der Zustandsfarbe (4,5:1). Nur im
   Katalog; der Assistent nutzt dieselben Klassen mit seinen eigenen Werten. */
.view-katalog .t-green { color: var(--ds-erfolg-text); }
.view-katalog .t-amber { color: var(--ds-warn-text); }
.view-katalog .t-red { color: var(--ds-krit-text); }
.view-katalog .t-grey { color: var(--ds-text-2); }
.t-green { color: var(--green); } .t-amber { color: var(--gold); } .t-red { color: var(--miss-arc); } .t-grey { color: var(--muted); }

/* Manuell ausgeklammerte Position: Titel durchgestrichen, gedaempft */
.kat-row.is-entfaellt-user .kat-titel { text-decoration: line-through; color: var(--ds-text-2); }
.kat-row.is-entfaellt-user { opacity: 0.72; }

/* Drei-Punkte-Menue am rechten Zeilenende */
.kat-actions { position: relative; justify-self: end; display: inline-flex; }
.kat-menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border: 0; border-radius: var(--ds-r-2); background: transparent; color: var(--ds-icon); cursor: pointer;
  transition: background-color var(--ds-zeit-kurz) ease; }
.kat-menu-btn:hover { background: var(--ds-fuell-transparent-hover); color: var(--ds-text); }
.kat-actions.is-open .kat-menu-btn { background: var(--ds-fuell-transparent-aktiv); color: var(--ds-text); }
.kat-menu { position: fixed; z-index: 70; /* ueber der festen Kopfleiste (60) */ min-width: 220px; padding: 6px;
  background: var(--ds-flaeche); border-radius: var(--ds-r-3);
  box-shadow: var(--ds-schatten-ueber); }
.kat-menu-head { padding: 4px 8px 6px; font-size: var(--ds-t-sm); font-weight: var(--ds-gew-mittel);
  color: var(--ds-text-2); border-bottom: 1px solid var(--ds-rand-2); margin-bottom: 4px; }
.kat-menu-item { display: block; width: 100%; text-align: left; padding: 6px 8px; border: 0; border-radius: var(--ds-r-2);
  background: transparent; color: var(--ds-text); font: inherit; font-size: var(--ds-t-md); cursor: pointer; }
.kat-menu-item:hover { background: var(--ds-flaeche-hover); color: var(--ds-text); }

@media (max-width: 640px) {
  .kat-row { grid-template-columns: auto auto 1fr auto; }
  .kat-beleg, .kat-status-lbl { grid-column: 3; justify-self: start; margin-top: 4px; }
  .kat-actions { grid-column: 4; grid-row: 1; }
}

/* =========================================================================
   Fristen- & Pruef-Radar (statische Demo)
   ========================================================================= */
.fr-view { display: block; }
.fr-head { margin-bottom: 16px; }
.fr-head .kat-title { margin: 0 0 2px; }
.fr-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.fr-kpi { background: var(--ds-flaeche); border-radius: var(--ds-r-3); box-shadow: var(--ds-schatten-karte); padding: 16px; }
/* Kennzahl wie .ds-kennzahl__wert (20 px fett, tabellarisch): dieselbe Art
   Zahl wie die Kacheln der Werkstatt und des Admin. Bis zum 16.09. 30 px. */
.fr-kpi .v { font-size: var(--ds-t-h-lg); line-height: var(--ds-zh-h-lg); font-weight: var(--ds-gew-fett); letter-spacing: var(--ds-sperr-dicht); font-variant-numeric: tabular-nums; }
.fr-kpi .t { font-size: var(--ds-t-md); color: var(--ds-text-2); margin-top: 0; }
.fr-kpi.late .v { color: var(--ds-krit-text); }
.fr-kpi.warnb .v { color: var(--ds-warn-text); }
.fr-list-group { font-size: var(--ds-t-sm); font-weight: var(--ds-gew-halbfett); color: var(--ds-text-2); margin: 16px 0 4px; }
.fr-list-group:first-child { margin-top: 2px; }
.fr-row { display: grid; grid-template-columns: 108px 1fr auto auto auto; align-items: center; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--ds-rand-2); }
.fr-row:first-of-type { border-top: 0; }
.fr-row.is-done { opacity: 0.55; }
.fr-when { font-size: var(--ds-t-md); font-weight: var(--ds-gew-halbfett); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fr-when .rel { display: block; font-size: var(--ds-t-sm); font-weight: var(--ds-gew-normal); color: var(--ds-text-2); margin-top: 0; }
.fr-row.late .fr-when { color: var(--ds-krit-text); }
.fr-row.warnb .fr-when { color: var(--ds-warn-text); }
.fr-main { min-width: 0; }
.fr-main .b { font-size: var(--ds-t-md); font-weight: var(--ds-gew-halbfett); color: var(--ds-text); }
.fr-main .m { font-size: var(--ds-t-sm); color: var(--ds-text-2); margin-top: 0; overflow-wrap: anywhere; }
.fr-art { justify-self: end; font-size: var(--ds-t-sm); font-weight: var(--ds-gew-mittel); white-space: nowrap;
  padding: 2px 8px; border-radius: var(--ds-r-2); background: var(--ds-fuell-neutral); color: var(--ds-text-2); }
.fr-doc { font: inherit; font-size: var(--ds-t-sm); font-weight: var(--ds-gew-mittel); min-height: var(--ds-knopf-hoehe); padding: 4px 10px; border-radius: var(--ds-r-2);
  background: var(--ds-fuell); box-shadow: var(--ds-schatten-knopf); border: 0; color: var(--ds-text); cursor: pointer; max-width: 210px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.fr-doc:hover { background: var(--ds-fuell-hover); box-shadow: var(--ds-schatten-knopf-hover); }
.fr-done-btn { font: inherit; font-size: var(--ds-t-sm); font-weight: var(--ds-gew-mittel); min-height: var(--ds-knopf-hoehe); padding: 4px 10px; border-radius: var(--ds-r-2); background: transparent;
  border: 0; color: var(--ds-text-2); cursor: pointer; white-space: nowrap; }
.fr-done-btn:hover { color: var(--ds-text); background: var(--ds-fuell-transparent-hover); }
@media (max-width: 860px) {
  .fr-kpis { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .fr-row { grid-template-columns: 1fr auto; row-gap: 8px; }
  .fr-when, .fr-main { grid-column: 1 / -1; }
}


/* =========================================================
   Handy & schmales iPad (nachgemessen vor diesem Block: die Topbar
   liess sich nicht verbiegen und ueberlief die Seite um bis zu 569px
   bei 360px bzw. 161px bei 768px; die 7-Spalten-Tabelle quetschte
   ihre Spalten auf Buchstabengroesse zusammen).
   Pragmatische Regel dieser Demo bleibt: die SEITE rollt nie
   seitwaerts -- breite Inhalte rollen in ihrem eigenen Behaelter.
   ========================================================= */

/* Topbar darf umbrechen: Titel- und Bedienzeile oben, die Suche als
   volle Breite darunter. (Die Chat-Chips rollen schon immer in einem
   eigenen Behaelter -- das ist hier Muster, nicht Zufall.) */
@media (max-width: 820px) {
  .topbar { flex-wrap: wrap; gap: var(--raum-2); padding: var(--raum-3) var(--raum-4); }
  .search { order: 3; flex-basis: 100%; max-width: none; }
}

/* Dokumententabelle: unterm Fach rollt sie seitwaerts im eigenen
   Behaelter, statt Spalten zu quetschen. Kopf und Zeilen tragen
   dieselbe Mindestbreite und bleiben dadurch spaltengleich; der
   Kopf klebt weiter nach oben (nicht nach links). Das iPad ab 768px
   behaelt die bisherige, eng gelegte Darstellung. */
@media (max-width: 760px) {
  .card-table .table { overflow-x: auto; }
  .t-head, .t-row { min-width: 660px; }
}

/* Telefon: Karten atmen enger, die Ergebnis-Karte stapelt Donut ueber
   Legende, Kopfzeilen und Button-Paare brechen um, die drei Fristen-
   KPIs stehen untereinander (bei 75px Breite je Karte waren die
   Beschriftungen Dreizeiler). Der Skip-Knopf des Analyse-Laufs bekommt
   seine eigene Zeile, damit er neben Logo + Phase nicht abbricht. */
@media (max-width: 560px) {
  /* minmax(0, …) statt nacktem 1fr -- sonst bestimmt der groesste
     Mindestinhalt einer Karte die Spaltenbreite und schiebt die
     Nachforderung-Karte (Spalten 8-13) aus dem Fach. Dieselbe Kur
     wie bei den Tabellenspalten weiter oben. */
  .content { padding: var(--raum-4) var(--raum-3) var(--raum-5); gap: var(--raum-3); grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .tb-title { font-size: var(--ds-t-lg); }
  /* Ergebnis- und Nachforderung-Karte stapeln (der 1100er-Block oben
     erfasst sie nicht): nebeneinander bliebe je Karte nur rund die
     Haelfte eines Handy-Fachs -- gemessen lief der Mail-Zaehler dann
     47px ueber den Seitenrand. */
  .card-result, .card-request { grid-column: 1 / -1; grid-row: auto; }
  .card-head { flex-wrap: wrap; }
  .result-actions { flex-wrap: wrap; }
  .result-body { flex-direction: column; align-items: stretch; gap: var(--raum-4); }
  .result-figure { margin: 0 auto; }
  .fr-kpis { grid-template-columns: 1fr; }
  .scan-head { flex-wrap: wrap; row-gap: 10px; }
  .scan-skip { flex-basis: 100%; justify-content: center; }
}