/* ==========================================================================
 admin.css — Section-Layout-SSOT fuer den Admin-Tab

 Konsumenten:
 web/js/sections/admin.js (Hauptseite + Cards-Liste)
 web/js/sections/admin/admin-extern-zugaenge.js
 web/js/sections/admin/admin-mail-templates.js
 web/js/sections/admin/admin-ai.js

 Sub-Tab "Sicherheit" hat eigene CSS in sections/admin/admin-sicherheit.css.

 Inhalt: Tab-Container, .admin-section-Wrapper, .kat-card (Kategorie-Karten),
 .ezg-* (Externe Zugaenge Liste/Setup-Lightbox), .am-* (Mail-Templates),
 AI-Konfig-Panels. Nutzt das .ich-card-Muster aus mein-bereich.css fuer
 Konsistenz mit dem Eigenbereich.

 Aus web/styles/admin.css verschoben in die
 Mirror-Topologie web/styles/sections/admin/.
 ========================================================================== */

/* Tab-Container: Padding entfernen, innerer Container uebernimmt (wie Mein Bereich) */
#tab-content-admin { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
#tab-content-admin.hidden { display: none; }

/* Section-Wrapper (analog zu .ich-ub-wrap) */
.admin-section {
  padding: var(--space-6);
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}
@media (max-width: 999px) {
  .admin-section { padding: var(--space-3); overflow: visible; flex: none; }
}

/* Admin-Card: nutzt .ich-card-Basis, nur Layout-Erweiterungen */
.admin-card { margin-bottom: 0; width: 100%; box-sizing: border-box; min-width: 0; }

/* Header-Icon als getontes Badge (36px) — gleiche Sprache wie .kat-card-icon.
   Gilt fuer alle Admin-Cards; die Danger-Variante weiter unten ueberschreibt
   nur den Hintergrund (gleiche Spezifitaet, spaeter in der Datei gewinnt). */
.admin-card .ich-card-header > .ui-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--brand-light);
  flex-shrink: 0;
}
.admin-card .ich-card-header > .ui-ico img { width: 20px; height: 20px; }

/* Zahl hinter dem Titel (dezent, inline — nicht als schwebendes Badge) */
.admin-count {
  color: var(--color-text-muted);
  font-weight: var(--fw-regular);
  margin-left: var(--space-1);
}

/* Card-Header-Actions (rechts ausgerichtet im Header) */
.admin-card-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

/* Card-Body mit Tabelle: kein zusaetzlicher Padding an den Seiten,
   damit die Tabelle bis zum Card-Rand geht */
.admin-card-body {
  padding: 0;
}

/* Filter-Label im Header */
.admin-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--fs-body);
  color: var(--color-text-muted);
  cursor: pointer;
  user-select: none;
}
.admin-filter input[type="checkbox"] { cursor: pointer; }

/* Daten-Tabelle: sitzt direkt im Card-Body, kein eigener Rahmen */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
  /* fixed: Spalten behalten ihre Breite auch wenn Gruppen geschlossen werden */
  table-layout: fixed;
}
.admin-table th, .admin-table td {
  padding: var(--space-2-5) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border-light);
  /* Lange Werte umbrechen (z.B. Firma-Name), damit keine Spalte ueberlaeuft */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Paket Font-Size auf fs-sm angeglichen
 an admin-sec-table (Sicherheit) und admin-mt-row (Mail-Templates). Vorher
 nutzte admin-table fs-body (groesser) — dichte Listen mit 7+ Spalten lesen
 sich sauberer mit fs-sm. */
.admin-table td { font-size: var(--fs-sm); }
/* Extern-Zugaenge-Tabelle: fixe Spaltenbreiten (Name, Firma, E-Mail, Einladung,
   Letzter Login, Gueltig bis, Status) — verhindern Drift beim Auf-/Zuklappen
   von Gruppen. Ersetzt die Inline-width-Styles im colgroup (Responsive-Regel #1). */
/* Status-Spalte 8% statt 5% — die Aktiv/Inaktiv-Badge wurde bei 5% vom
   Zellen-Ellipsis abgeschnitten (Design-Pass 2026-07-04). Ausgleich ueber
   Name/Firma/E-Mail. */
.admin-table--ez col:nth-child(1) { width: 21%; }
.admin-table--ez col:nth-child(2) { width: 21%; }
.admin-table--ez col:nth-child(3) { width: 17%; }
.admin-table--ez col:nth-child(4) { width: 13%; }
.admin-table--ez col:nth-child(5) { width: 11%; }
.admin-table--ez col:nth-child(6) { width: 9%; }
.admin-table--ez col:nth-child(7) { width: 8%; }
.admin-table thead th {
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.admin-table tbody tr { cursor: pointer; transition: background var(--duration-quick); }
.admin-table tbody tr:hover { background: var(--color-bg-subtle); }
.admin-table tbody tr:last-child td { border-bottom: 0; }

/* Empty-State sitzt im Card-Body mittig (ohne eigenen Rahmen) */
.admin-empty {
  padding: var(--space-5) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--fs-body);
}

/* Listen-Toolbar (Suche + Gruppierung) */
.admin-listbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  background: var(--color-surface);
  flex-wrap: wrap;
}
.admin-listbar-left { display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; }
.admin-listbar-right { display: flex; align-items: center; gap: var(--space-2); }
.admin-search { max-width: var(--width-input-search-max); flex: 1; }
@media (max-width: 599px) {
  .admin-listbar { flex-direction: column; align-items: stretch; }
  .admin-search { max-width: none; }
}

/* Sortier-Header */
.admin-th-sortable { cursor: pointer; user-select: none; }
.admin-th-sortable:hover { background: var(--color-surface-hover, rgba(0,0,0,0.04)); }
.admin-th-arrow { color: var(--color-text-muted); font-weight: normal; }

/* Gruppierte Tabelle: Gruppen-Header — dezent, wie eine Section-Ueberschrift */
.admin-table-group-hd {
  cursor: pointer;
  user-select: none;
  background: transparent;
}
.admin-table-group-hd td {
  padding: var(--space-3) var(--space-4) var(--space-2);
  font-size: var(--fs-body);
  border-bottom: 1px solid var(--color-border);
  /* Overflow vom tbody td nicht erben — Gruppen-Header darf den ganzen Platz nutzen */
  overflow: visible;
  white-space: normal;
}
.admin-table-group-hd:hover td { background: var(--color-bg-subtle); }

/* Sichtbarer Fokus-Ring für die tastaturbedienbaren Zeilen (role=button + tabindex):
   Katalog-Rows + Extern-Zugaenge-Zeilen/Gruppen-Header sind div/tr, nicht <button> —
   der globale Button-Focus-Reset greift dort nicht. Ohne diesen Ring wäre der Fokus
   bedienbar, aber unsichtbar. */
.admin-mt-row:focus-visible,
.aez-row:focus-visible,
.admin-table-group-hd:focus-visible {
  outline: 2px solid var(--brand-default);
  outline-offset: -2px;
}
.admin-group-caret {
  display: inline-block;
  width: 14px;
  color: var(--color-text-muted);
  margin-right: var(--space-1);
  font-size: var(--font-size-xs);
}
.admin-group-meta {
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
  margin-left: var(--space-2);
  font-weight: normal;
}

/* Hint-Text neben Label (z.B. "(optional)") */
.bm-label-hint {
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
}

/* Zeit-Select kleinere Variante fuer Inline-Scope-Dropdown */
.zeit-select--sm {
  flex: 0 1 auto;
  min-width: 200px;
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
  font-size: var(--fs-caption);
}

/* Responsive */
@media (max-width: 599px) {
  .admin-card-actions { flex-wrap: wrap; gap: var(--space-2); width: 100%; margin-left: 0; margin-top: var(--space-2); }
  .admin-card-actions .fk-buchen { flex: 1; justify-content: center; }
  .ich-card-header:has(.admin-card-actions) { flex-wrap: wrap; }
  .zeit-select--sm { min-width: 0; width: 100%; }

  /* Der .admin-table→Karten-Umbruch lebt als EINE SSOT im @media(max-width:999px)-
     Block weiter unten und deckt diesen Bereich (<600px) mit ab. Ein hier
     zusaetzlicher Card-Transform (abweichende gap/border/font-size) waere per
     Spezifitaet vom 999px-Block ohnehin ueberschrieben und ergaebe auf Mobile
     eine Spezifitaets-Mischung aus beiden — daher bewusst NICHT dupliziert. */
}
/* 600–999px braucht bewusst KEINE .admin-table-Zell-Padding-Regel: dort greift
   der Karten-Umbruch (max-width:999px) — thead ist ausgeblendet, das td-Padding
   kommt aus dem Karten-Block (.admin-table tbody tr td). Erst ab 1000px (echte
   Tabelle) ist Zell-Padding wieder wirksam. */
@media (min-width: 1000px) and (max-width: 1399px) {
  .admin-table th, .admin-table td { padding: var(--space-2-5) var(--space-3); }
}

/* ================================================================
   Einladungs-Status-Badges + Refresh-Toolbar + Warn-Banner.
   Namespace: aez- (Admin Extern-Zugaenge, non-Wizard).
   ================================================================ */

/* --- Einladungs-Badge ------------------------------------------ */
.aez-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-xxs) var(--space-2);
  border-radius: var(--radius-circular);
  font-size: var(--font-size-xs, 12px);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  line-height: 1.4;
  border: 1px solid transparent;
}
.aez-badge .ui-ico { width: 12px; height: 12px; }
.aez-badge .ui-ico img { width: 100%; height: 100%; }

.aez-badge--neutral {
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
}
.aez-badge--ausstehend {
  background: var(--status-warning-bg);
  color: var(--status-warning-fg);
  border-color: var(--status-warning-border);
}
.aez-badge--angenommen {
  background: var(--status-success-bg);
  color: var(--status-success-fg);
  border-color: var(--status-success-border);
}
.aez-badge--abgelaufen {
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}
.aez-badge--widerrufen {
  background: var(--status-danger-bg);
  color: var(--status-danger-fg);
  border-color: var(--status-danger-border);
}
.aez-badge--geloescht {
  background: var(--status-danger-bg);
  color: var(--status-danger-fg);
  border-color: var(--status-danger-border);
  font-weight: var(--fw-bold);
}
.aez-badge--unbekannt {
  background: var(--status-info-bg);
  color: var(--status-info-fg);
  border-color: var(--status-info-border);
}
/* Aktiv/Inaktiv-Variante (Status-Spalte + Lightbox-Header) — E2.4' */
.aez-badge--aktiv {
  background: var(--status-success-bg);
  color: var(--status-success-fg);
  border-color: var(--status-success-border);
}
.aez-badge--inaktiv {
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

/* --- Gruppierte Zeile: Einrueckung unter Firma-Header ---------- */
/* Nur Desktop/Notebook — Mobile hat Card-Layout aus E2.2b */
@media (min-width: 1000px) {
  .admin-table tbody tr.aez-row--grouped td:first-child {
    padding-left: calc(var(--space-4) + 32px);
  }
}

/* --- Letzter-Login-Zelle -------------------------------------- */
.aez-login { color: var(--color-text); }
.aez-login-muted { color: var(--color-text-muted); font-style: italic; }

/* --- Toolbar: Zuletzt aktualisiert + Refresh-Button ----------- */
.aez-lastsync {
  font-size: var(--font-size-xs, 12px);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.aez-lastsync--never { font-style: italic; }

.aez-refresh-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1) var(--space-3);
  min-height: 36px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--duration-quick), border-color var(--duration-quick);
}
.aez-refresh-btn:hover:not(:disabled) {
  background: var(--color-bg-subtle);
  border-color: var(--color-text);
}
.aez-refresh-btn--loading .ui-ico img,
.aez-refresh-btn--loading .ui-ico {
  animation: lod-spin var(--duration-spinner) var(--ease-linear) infinite;
  transform-origin: center;
}
@media (prefers-reduced-motion: reduce) {
  .aez-refresh-btn--loading .ui-ico img,
  .aez-refresh-btn--loading .ui-ico { animation: none; }
}

/* --- Warn-Banner (extern geloeschte Gaeste) ------------------ */
.aez-warn-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--status-warning-bg);
  border: 1px solid var(--status-warning-border);
  border-radius: var(--radius-sm);
  color: var(--status-warning-fg);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-3);
}
.aez-warn-banner-icon { display: inline-flex; flex: 0 0 auto; }
.aez-warn-banner-text { flex: 1; line-height: 1.5; }
.aez-warn-banner-text a {
  color: var(--status-warning-fg);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  margin-left: var(--space-1);
}
.aez-warn-banner-close {
  appearance: none;
  background: transparent;
  border: none;
  padding: var(--space-1);
  cursor: pointer;
  color: inherit;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
}
.aez-warn-banner-close:hover { background: rgba(0, 0, 0, 0.06); }

/* ================================================================
   Mobile: Tabelle → Karten-Layout (Paket E2.2b.5)
   Unter 900px: <table> wird Block, jedes <tr> wird eine Karte,
   jedes <td> eine label-value-Zeile (Label aus data-label).
   ================================================================ */
@media (max-width: 999px) {
  .admin-table,
  .admin-table tbody,
  .admin-table tfoot {
    display: block;
  }
  /* Header-Zeile ausblenden — Labels kommen aus data-label */
  .admin-table thead { display: none; }
  .admin-table colgroup { display: none; }

  .admin-table tbody tr {
    display: block;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    padding: var(--space-3);
    margin-bottom: var(--space-2);
    box-shadow: var(--shadow-2, 0 1px 2px rgba(0,0,0,0.06));
  }
  .admin-table tbody tr:hover { background: var(--color-surface); }

  .admin-table tbody tr td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-1) 0;
    border: 0;
    gap: var(--space-3);
    min-height: 32px;
    font-size: var(--font-size-sm);
  }
  /* Label als Prefix vor dem Wert */
  .admin-table tbody tr td[data-label]::before {
    content: attr(data-label);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs, 12px);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--fw-semibold);
    flex: 0 0 auto;
  }
  /* Name-Zelle als Karten-Kopf — etwas groesser, ohne Label */
  .admin-table tbody tr td[data-label="Name"] {
    font-size: var(--font-size-body, 14px);
    font-weight: var(--fw-semibold);
    border-bottom: 1px solid var(--color-border-subtle);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-2);
  }
  .admin-table tbody tr td[data-label="Name"]::before { display: none; }

  /* Gruppen-Header bleibt ueber den Karten */
  .admin-table tbody tr.admin-table-group-hd {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: var(--space-2) 0 var(--space-1);
    margin-bottom: 0;
  }
  .admin-table tbody tr.admin-table-group-hd td {
    display: block;
    padding: 0;
    font-weight: var(--fw-semibold);
  }
  .admin-table tbody tr.admin-table-group-hd td::before { display: none; }

  /* Toolbar: Refresh-Label-Text ausblenden (nur Icon), Lastsync kompakt */
  .aez-refresh-btn-label { display: none; }
  .aez-refresh-btn { min-height: 44px; min-width: 44px; justify-content: center; }
  .aez-lastsync { font-size: var(--font-size-xs, 11px); }
}

/* ================================================================
   Liste-Anreicherung + Detail-Lightbox (Paket E2.4)
   Namespace: aez-
   ================================================================ */

/* Name-Zelle mit Avatar */
.aez-name-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.aez-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

/* Gruppen-Header mit Firma-Avatar */
.aez-group-hd-inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ── Admin System-Tab ─────────────── */

/* Subtitle unterm Titel im Card-Header */
.ich-card-subtitle {
  margin-top: var(--space-xxs);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
  line-height: 1.3;
}

/* Card-Body mit Padding fuer Form-Inhalte (ueberschreibt padding:0 Default) */
.admin-card-body--form {
  padding: var(--space-4) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.admin-card-lead {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

/* Fluent-Alert: Warning-Box mit Icon + Border-Left */
.admin-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--status-danger-border);
  border-left: 3px solid var(--status-danger-fg);
  border-radius: var(--radius-md);
  background: var(--status-danger-bg);
  color: var(--color-text);
}
.admin-alert-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: var(--space-xxs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.admin-alert-icon img { width: 20px; height: 20px; }
.admin-alert-body {
  flex: 1;
  font-size: var(--font-size-sm);
  line-height: 1.5;
}
.admin-alert-title {
  font-weight: var(--fw-semibold);
  color: var(--status-danger-fg);
  margin-bottom: var(--space-xxs);
}

.admin-confirm-input {
  width: 100%;
  max-width: 360px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-family: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', monospace;
  font-size: var(--font-size-base);
  color: var(--color-text);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.admin-confirm-input:hover { border-color: var(--color-border-hover); }
.admin-confirm-input:focus-visible {
  outline: none;
  border-color: var(--status-danger-fg);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--status-danger-fg), transparent 80%);
}
.admin-confirm-input.is-valid {
  border-color: var(--status-success-fg);
  background: color-mix(in srgb, var(--status-success-bg), transparent 40%);
}

/* Actions-Row mit Hint + Button */
.admin-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.admin-actions-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.admin-actions-hint .ui-ico img { width: 14px; height: 14px; opacity: 0.7; }

/* Danger-Button-Variante: Basis (background/color/border) kommt aus der
   SSOT-Definition in mt-focus-cards.css — hier NUR die admin-spezifischen
   Hover-/Disabled-/Icon-Zustaende ergaenzen (frueher waren die Basis-Props
   hier wertgleich dupliziert). */
.fk-buchen--danger:hover:not([disabled]) {
  background: var(--status-danger-pressed);
  border-color: var(--status-danger-pressed);
}
.fk-buchen--danger[disabled] {
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  border-color: var(--color-border);
  cursor: not-allowed;
}
.fk-buchen--danger .ui-ico img { filter: brightness(0) invert(1); }
.fk-buchen--danger[disabled] .ui-ico img { filter: none; opacity: 0.4; }

/* Ergebnis-Box nach Reset */
.admin-result {
  display: none;
}
.admin-result.is-visible { display: block; }
.admin-result-success {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--status-success-bg);
  color: var(--status-success-fg);
  font-size: var(--font-size-sm);
  font-weight: var(--fw-semibold);
}
.admin-result-error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--status-danger-bg);
  color: var(--status-danger-fg);
  font-size: var(--font-size-sm);
}
/* "Erneut versuchen"-Button im Error-Block etwas absetzen. */
.admin-result-error .fk-buchen {
  margin-left: var(--space-2);
}

/* Responsive */
@media (max-width: 599px) {
  .admin-card-body--form { padding: var(--space-3); }
  .admin-actions-row { flex-direction: column; align-items: stretch; }
  .admin-actions-row .fk-buchen { width: 100%; justify-content: center; }
  .admin-confirm-input { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   Mail-Templates (Paket E4)
   ═══════════════════════════════════════════════════════════ */

/* Mail-Templates-Panel-Layout ohne aeussere
 .ich-card-Huelle — identisch aufgebaut wie .benachr-wrap/.benachr-header.
 App-Background zwischen den Cards sichtbar, keine weisse Sekundaer-Card. */
.admin-mt-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
}
.admin-mt-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.admin-mt-header-text { flex: 1; min-width: 240px; }
.admin-mt-title {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  line-height: 1.2;
}
.admin-mt-subtitle {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
/* #admin-mt-list (Mail) + #admin-pt-list (Protokolle) + #admin-vv-list (Vertrags-
   vorlagen) teilen sich den Listen-Look (Padding ringsum, damit die Cards Luft
   zum Panel-Rand haben — analog .benachr-content). */
#admin-mt-list,
#admin-pt-list,
#admin-vv-list {
  flex: 1;
  min-height: 0;
  padding: var(--space-5) var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* E6 Card-Chrome via .kat-card in components.css (konsolidiert mit
 Benachrichtigungs-Seite). Hier bleiben nur die MT-Farbmodifier + Icon-Tint. */

/* Farbtokens pro Kategorie — --kat-accent treibt sowohl Border-Left als auch
   Icon-Badge-Background. Wirkt im generischen .kat-card-Primitive. */
.kat-card--blue   { --kat-accent: var(--kat-blue-fg);   --kat-accent-bg: var(--kat-blue-bg); }
.kat-card--yellow { --kat-accent: var(--kat-yellow-fg); --kat-accent-bg: var(--kat-yellow-bg); }
.kat-card--lila   { --kat-accent: var(--kat-purple-fg); --kat-accent-bg: var(--kat-purple-bg); }
.kat-card--green  { --kat-accent: var(--kat-green-fg);  --kat-accent-bg: var(--kat-green-bg); }
.kat-card--orange { --kat-accent: var(--kat-orange-fg); --kat-accent-bg: var(--kat-orange-bg); }
.kat-card--gray   { --kat-accent: var(--kat-gray-fg);   --kat-accent-bg: var(--kat-gray-bg); }

/* Mail-Templates-spezifischer Icon-Tint: die Fluent-SVGs werden per Filter
   auf die Kategorie-Akzentfarbe gemappt. Die Benachrichtigungs-Seite laesst
   die Icons dunkel — Kyle-Bestandsentscheidung, nicht synchronisiert. */
.kat-card[data-kat-type="mail"] .kat-card-icon img {
  filter: brightness(0) saturate(100%);
  opacity: 0.85;
}
.kat-card[data-kat-type="mail"].kat-card--blue   .kat-card-icon img { filter: invert(24%) sepia(97%) saturate(2345%) hue-rotate(216deg) brightness(94%) contrast(91%); }
.kat-card[data-kat-type="mail"].kat-card--yellow .kat-card-icon img { filter: invert(37%) sepia(97%) saturate(1204%) hue-rotate(17deg) brightness(92%) contrast(101%); }
.kat-card[data-kat-type="mail"].kat-card--lila   .kat-card-icon img { filter: invert(33%) sepia(89%) saturate(2321%) hue-rotate(245deg) brightness(96%) contrast(96%); }
.kat-card[data-kat-type="mail"].kat-card--green  .kat-card-icon img { filter: invert(45%) sepia(95%) saturate(391%) hue-rotate(90deg) brightness(95%) contrast(89%); }
.kat-card[data-kat-type="mail"].kat-card--orange .kat-card-icon img { filter: invert(38%) sepia(70%) saturate(3143%) hue-rotate(12deg) brightness(99%) contrast(95%); }
.kat-card[data-kat-type="mail"].kat-card--gray   .kat-card-icon img { filter: invert(40%) sepia(7%) saturate(361%) hue-rotate(179deg) brightness(94%) contrast(88%); }

/* Protokoll-Liste: identische Icon-Toenung wie Mail-Templates (gleicher Admin-Listen-Look,
   SSOT). Protokoll nutzt nur die Kategorien Projekt (blau) + System (grau). */
.kat-card[data-kat-type="protocol"] .kat-card-icon img { filter: brightness(0) saturate(100%); opacity: 0.85; }
.kat-card[data-kat-type="protocol"].kat-card--blue .kat-card-icon img { filter: invert(24%) sepia(97%) saturate(2345%) hue-rotate(216deg) brightness(94%) contrast(91%); }
.kat-card[data-kat-type="protocol"].kat-card--gray .kat-card-icon img { filter: invert(40%) sepia(7%) saturate(361%) hue-rotate(179deg) brightness(94%) contrast(88%); }

/* Vertragsvorlagen-Liste: identische Icon-Toenung (gleicher Admin-Listen-Look, SSOT).
   Gruppen nutzen blue/lila/orange/green/yellow/gray — gleiche Filter wie Mail. */
.kat-card[data-kat-type="vertrag"] .kat-card-icon img { filter: brightness(0) saturate(100%); opacity: 0.85; }
.kat-card[data-kat-type="vertrag"].kat-card--blue   .kat-card-icon img { filter: invert(24%) sepia(97%) saturate(2345%) hue-rotate(216deg) brightness(94%) contrast(91%); }
.kat-card[data-kat-type="vertrag"].kat-card--yellow .kat-card-icon img { filter: invert(37%) sepia(97%) saturate(1204%) hue-rotate(17deg) brightness(92%) contrast(101%); }
.kat-card[data-kat-type="vertrag"].kat-card--lila   .kat-card-icon img { filter: invert(33%) sepia(89%) saturate(2321%) hue-rotate(245deg) brightness(96%) contrast(96%); }
.kat-card[data-kat-type="vertrag"].kat-card--green  .kat-card-icon img { filter: invert(45%) sepia(95%) saturate(391%) hue-rotate(90deg) brightness(95%) contrast(89%); }
.kat-card[data-kat-type="vertrag"].kat-card--orange .kat-card-icon img { filter: invert(38%) sepia(70%) saturate(3143%) hue-rotate(12deg) brightness(99%) contrast(95%); }
.kat-card[data-kat-type="vertrag"].kat-card--gray   .kat-card-icon img { filter: invert(40%) sepia(7%) saturate(361%) hue-rotate(179deg) brightness(94%) contrast(88%); }

/* E6 Column-Header analog zu .benachr-matrix-head > div.
 Gleiche Tokens: bg-muted, 10px/semibold, muted-color, uppercase, letter-spacing,
 border-bottom-light. Liegt im gleichen Grid wie die Rows darunter. */
.admin-mt-rowhead {
  display: grid;
  grid-template-columns: minmax(200px, 1.8fr) minmax(160px, 160px) minmax(180px, 1.8fr) 110px 90px;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-muted);
  border-bottom: 1px solid var(--color-border-light);
}
.admin-mt-rowhead > div {
  font-size: var(--font-size-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

/* Zeilen-Layout: Grid mit fixen Columns auf Desktop.
 E6 Zeilen-Divider statt gap, Chip-Spalte mit fester min-width,
 mehr vertikales Padding, Subject-Spalte zurueckgenommen. */
.admin-mt-rows {
  display: flex;
  flex-direction: column;
}
.admin-mt-row {
  display: grid;
  /* 160px fester Chip-Spalten-Start sorgt fuer bundige linke Kante aller Event-Chips.
     Subject jetzt 1.8fr (vorher 2.2fr), Datum 110px. */
  grid-template-columns: minmax(200px, 1.8fr) minmax(160px, 160px) minmax(180px, 1.8fr) 110px 90px;
  gap: var(--space-3);
  align-items: center;
  /* Vertikal +37% (8→11px) damit die Zeilen atmen. Horizontal var(--space-4)
     (16px) um mit Benachrichtigungs-Matrix gleichzuziehen. Kein border-radius —
     innerhalb der Card waere das zu viel visuelles Rauschen neben den Dividern. */
  padding: 11px var(--space-4);
  cursor: pointer;
  background: var(--color-surface);
  transition: background var(--duration-quick) var(--ease-soft);
}
/* Zeilen-Divider: 1px zwischen den Rows, kein unterer Divider an der letzten Row
   (weil die Card-Kante selbst den visuellen Abschluss macht). */
.admin-mt-row + .admin-mt-row {
  border-top: 1px solid var(--color-border-light);
}
.admin-mt-row:hover {
  background: var(--color-bg-subtle);
}
.admin-mt-row-name {
  font-weight: var(--fw-medium, 500);
  color: var(--color-text);
}
.admin-mt-row-ev code {
  font-size: var(--fs-badge);
  color: var(--color-text-muted);
  background: var(--color-bg-subtle);
  padding: var(--space-px) var(--space-1-5);
  border-radius: var(--radius-xs);
}
.admin-mt-row-subj {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm, 13px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-mt-row-date {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm, 13px);
  text-align: right;
}
/* E6 Aktions-Cluster — die beiden Icons bekommen einen eigenen
 Container mit dezenter Border + Hover-Tint. Visueller Halt am Card-Rand,
 ohne die Zeilen-Ruhe zu stoeren (Border nur schwach sichtbar, Tint erst
 beim Hover der Zeile). */
.admin-mt-row-actions {
  display: inline-flex;
  gap: 0;
  justify-content: flex-end;
  align-items: center;
  padding: var(--space-xxs);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  transition: background var(--duration-quick) var(--ease-soft), border-color var(--duration-quick) var(--ease-soft);
  justify-self: end;
}
.admin-mt-row:hover .admin-mt-row-actions {
  background: var(--color-bg-muted);
  border-color: var(--color-border-light);
}
/* Dezenter vertikaler Separator zwischen Preview- und Test-Icon.
   Lesbarkeit als zwei getrennte Aktionen, ohne Platz zu rauben. */
.admin-mt-row-actions .admin-mt-iconbtn + .admin-mt-iconbtn {
  margin-left: var(--space-1);
  position: relative;
}
.admin-mt-row-actions .admin-mt-iconbtn + .admin-mt-iconbtn::before {
  content: '';
  position: absolute;
  left: -3px;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: var(--color-border);
}
/* Paket E4-Polish groessere Hit-Area + spuerbarer Hover damit die
 Aktions-Icons nicht wie deaktivierte Dekoration aussehen. 20px-Icon + 6px
 Padding = 32px Hit-Area. */
.admin-mt-iconbtn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--space-1-5);
  cursor: pointer;
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-quick) var(--ease-soft), border-color var(--duration-quick) var(--ease-soft);
}
.admin-mt-iconbtn:hover {
  background: var(--brand-light);
  border-color: var(--brand-light-hover);
}
.admin-mt-iconbtn:focus-visible {
  outline: 2px solid var(--brand-default);
  outline-offset: 1px;
}

/* Preview-Lightbox Inhalte */
.admin-mt-tabs {
  display: flex;
  gap: var(--space-xxs);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-3);
}
.admin-mt-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-size: var(--font-size-sm, 13px);
  color: var(--color-text-secondary);
}
.admin-mt-tab.active {
  color: var(--brand-default);
  border-bottom-color: var(--brand-default);
  font-weight: var(--fw-semibold, 600);
}
.admin-mt-preview-frame {
  width: 100%;
  height: 560px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.admin-mt-preview-text {
  width: 100%;
  max-height: 560px;
  overflow: auto;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}
/* Event-Pill in Preview-Header */
.admin-mt-ev-pill {
  font-size: var(--fs-badge);
  color: var(--color-text-muted);
  background: var(--color-bg-subtle);
  padding: var(--space-xxs) var(--space-2);
  border-radius: var(--radius-xs);
  text-transform: lowercase;
  letter-spacing: 0.2px;
}

/* Test-Dialog */
.admin-mt-test-label {
  font-size: var(--fs-badge);
  font-weight: var(--fw-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}
.admin-mt-test-template {
  font-weight: var(--fw-medium, 500);
  margin-bottom: var(--space-2);
}
.admin-mt-radio {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  cursor: pointer;
}
.admin-mt-radio input[type="radio"] { margin: 0; }

.admin-alert--warn {
  background: var(--yellow-100);
  border: 1px solid var(--yellow-200);
  color: var(--yellow-800);
}
.admin-alert--warn .admin-alert-title { color: var(--yellow-800); }

/* Responsive: Mobile → Karten statt Grid-Zeilen */
@media (max-width: 999px) {
  .admin-mt-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name actions"
      "subj subj"
      "ev date";
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    margin-bottom: var(--space-2);
  }
  .admin-mt-row-name    { grid-area: name; }
  .admin-mt-row-subj    { grid-area: subj; white-space: normal; }
  .admin-mt-row-ev      { grid-area: ev; }
  .admin-mt-row-date    { grid-area: date; text-align: left; }
  .admin-mt-row-actions { grid-area: actions; }
}
@media (max-width: 599px) {
  .admin-mt-preview-frame { height: 400px; }
  .admin-mt-preview-text  { max-height: 400px; }
}

/* ═══════════════════════════════════════════════════════════
   Mail-Template Playground (Paket E4-Playground)
   Zweispalten-Dialog: Variablen-Formular links, Preview rechts.
   Mobile (<900px): gestapelt, Preview oben.
   ═══════════════════════════════════════════════════════════ */

/* Stack-Z-Indexe fuer die zwei verschachtelten Admin-Mail-Dialoge.
   .bm-overlay default = 1100 (legacy-shared.css). Preview-Lightbox stapelt
   darueber (1200), Test-Dialog wiederum darueber (1300), weil er aus dem
   Preview heraus geoeffnet wird. */
.admin-mt-preview-overlay { z-index: var(--z-admin-preview); }
.admin-mt-preview-overlay > .bm-modal { z-index: var(--z-admin-preview-modal); }
.admin-mt-test-overlay { z-index: var(--z-admin-test); }
.admin-mt-test-overlay > .bm-modal { z-index: var(--z-admin-test-modal); }
/* Test-Dialog ist deutlich kompakter als die Playground-Lightbox. */
.admin-mt-test-modal { max-width: 480px; }
/* Modal-Title in beiden Dialogen mit stark betonter Typo. */
.admin-mt-modal-title { font-weight: var(--fw-semibold); }
/* Warn-Alert mit Top-Spacing, damit er sich vom Eingabefeld absetzt. */
.admin-mt-test-warn-spacing { margin-top: var(--space-3); }

.admin-mt-playground-modal {
  /* E4-Playground-Fit: Wizard-Breite uebernehmen damit beide Dialoge zueinander passen. */
  width: min(1500px, 95vw);
  max-width: 1500px;
  max-height: min(90vh, 900px);
  display: flex;
  flex-direction: column;
}
.admin-mt-playground-body {
  display: grid;
  /* 35/65: Formular schlank, Preview luftig. Minimum 280px fuer Formular,
     damit lange Labels wie ANSPRECHPARTNER_ROLLE nicht umbrechen. */
  grid-template-columns: minmax(280px, 35fr) minmax(0, 65fr);
  gap: var(--space-3);
  flex: 1 1 auto;
  min-height: 0; /* damit innere overflow:auto greift */
  padding: var(--space-3);
}

/* ── Variablen-Spalte ───────────────────────────────────── */
.admin-mt-vars-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.admin-mt-vars-pane-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
  position: sticky;
  top: 0;
  z-index: 1;
}
.admin-mt-vars-pane-title {
  font-size: var(--font-size-md, 15px);
  font-weight: var(--fw-semibold, 600);
  margin: 0;
  flex: 1;
}
.admin-mt-reset-all {
  appearance: none;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  font: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-secondary);
}
.admin-mt-reset-all:hover:not([disabled]) {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-hover);
}
.admin-mt-reset-all[disabled] {
  opacity: 0.4;
  cursor: default;
}
.admin-mt-vars-pane-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  /* E4-Playground-Fit: enger zusammen (12px → 8px) damit im breiten Dialog
     die Felder nicht verloren wirken. */
  gap: var(--space-2);
}

/* ── Einzelnes Feld ─────────────────────────────────────── */
.admin-mt-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-left: var(--space-2-5);
  border-left: 3px solid transparent;
  transition: border-color var(--duration-quick) var(--ease-soft);
}
.admin-mt-field--dirty {
  border-left-color: var(--brand-default);
}
.admin-mt-field--footer {
  opacity: 0.85;
}
.admin-mt-field-label {
  display: flex;
  align-items: baseline;
  gap: var(--space-1-5);
  font-size: var(--font-size-sm);
}
.admin-mt-field-label code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-badge);
  color: var(--color-text);
  background: transparent;
  padding: 0;
  letter-spacing: 0.2px;
}
.admin-mt-field-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: var(--color-bg-subtle);
  padding: var(--space-px) var(--space-1-5);
  border-radius: var(--radius-xs);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.admin-mt-field-input-wrap {
  position: relative;
  display: flex;
  align-items: flex-start;
}
.admin-mt-input {
  flex: 1;
  min-width: 0;
  padding: var(--space-1-5) var(--space-8) var(--space-1-5) var(--space-2-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--fs-body);
  background: var(--color-surface);
  color: var(--color-text);
}
.admin-mt-input:focus {
  outline: none;
  border-color: var(--brand-default);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-default) 15%, transparent);
}
.admin-mt-input--textarea {
  resize: vertical;
  min-height: 64px;
  font-family: inherit;
  line-height: 1.45;
  padding: var(--space-2) var(--space-8) var(--space-2) var(--space-2-5);
}
.admin-mt-field-reset {
  position: absolute;
  right: 4px;
  top: 4px;
  appearance: none;
  background: transparent;
  border: none;
  padding: var(--space-1);
  cursor: pointer;
  display: none;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
}
.admin-mt-field--dirty .admin-mt-field-reset {
  display: inline-flex;
}
.admin-mt-field-reset:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text);
}

/* ── Preview-Spalte ─────────────────────────────────────── */
/* E4-Playground-Fit: Preview-Panel bekommt eigenen Rahmen analog zum Vars-Pane,
   Tabs sitzen als Header-Leiste direkt ueber dem Preview-Content (nicht mehr oben
   auf Formular-Header-Hoehe). Innenraum ist dezent grau, iframe/Plain-Text haben
   Padding damit das 600px-breite Mail-Template sichtbar Luft drumherum hat. */
.admin-mt-preview-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}
.admin-mt-playground-body .admin-mt-tabs {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  flex: 0 0 auto;
}
.admin-mt-preview-status {
  margin-left: auto;
  font-size: var(--fs-badge);
  color: var(--color-text-muted);
  font-style: italic;
}
/* Canvas = grauer Innenraum um das iframe (und Plain-Text-View).
   Das iframe bleibt weiss und bekommt Luft links/rechts — die Mail
   liegt damit sichtbar "auf einem Blatt" statt flush an die Kanten. */
.admin-mt-preview-canvas {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--space-3) var(--space-3);
  background: var(--color-bg-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.admin-mt-playground-body .admin-mt-preview-frame {
  flex: 1 1 auto;
  height: auto;
  min-height: 420px;
  width: 100%;
  max-width: none; /* die Mail drinnen ist max-width:600px — iframe bleibt breit */
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: opacity var(--duration-fast) var(--ease-soft);
  box-sizing: border-box;
}
.admin-mt-preview-frame--loading {
  opacity: 0.6;
}
.admin-mt-playground-body .admin-mt-preview-text {
  flex: 1 1 auto;
  max-height: none;
  height: 100%;
  min-height: 420px;
  margin: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.admin-mt-preview-err {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--red-50);
  border: 1px solid var(--red-200);
  color: var(--red-700);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  word-break: break-word;
}

/* Test-Dialog: Custom-Hinweis */
.admin-mt-test-customhint {
  margin-top: var(--space-1);
  padding: var(--space-1-5) var(--space-2-5);
  background: var(--indigo-25);
  border: 1px solid var(--indigo-200);
  color: var(--brand-pressed);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

/* ── Mobile: stack, Preview oben ────────────────────────── */
@media (max-width: 999px) {
  .admin-mt-playground-modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }
  .admin-mt-playground-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-2);
  }
  /* Preview ZUERST (oben) */
  .admin-mt-preview-pane { order: 1; }
  .admin-mt-vars-pane    { order: 2; }
  .admin-mt-preview-canvas { padding: var(--space-2); }
  .admin-mt-playground-body .admin-mt-preview-frame { min-height: 320px; }
  .admin-mt-playground-body .admin-mt-preview-text  { min-height: 240px; }
  .admin-mt-vars-pane-body { max-height: 50vh; }
}

/* ── OpenAI Integration (AI-Chat-Test) ── */

/* Spec-Grid: Deployment / Max / Limit als Stat-Karten.
   Volle Breite wie andere Admin-Listen. */
/* ── OpenAI-Schaltzentrale: Hero + Tool-Umschalter ──────────────────────────── */
.ai-hub-hero {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--lod-radius-lg, 12px);
  background: linear-gradient(135deg,
    var(--lod-darkblue-900, #16324d) 0%,
    var(--lod-darkblue-700, #1e4a70) 55%,
    var(--lod-turquoise-900, #0b3d47) 100%);
  color: var(--lod-white, #fff);
  box-shadow: var(--lod-shadow-lg, 0 6px 22px -8px rgba(15, 46, 72, 0.35));
  margin-bottom: var(--space-4);
}
.ai-hub-hero-icon {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.14);
}
.ai-hub-hero-icon img { width: 24px; height: 24px; filter: brightness(0) invert(1); }
.ai-hub-hero-text { flex: 1 1 auto; min-width: 0; }
.ai-hub-hero-title {
  font-family: var(--lod-font-display, inherit);
  font-size: var(--font-size-lg); font-weight: var(--fw-bold); color: var(--lod-white, #fff);
  margin: 0; letter-spacing: 0.01em;
}
.ai-hub-hero-sub {
  font-size: var(--font-size-sm, 13px);
  color: rgba(255, 255, 255, 0.82);
  margin: 4px 0 0; line-height: 1.45;
}
.ai-hub-hero-meta { display: flex; flex-direction: column; gap: var(--space-1); flex: 0 0 auto; }
.ai-hub-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-circular, 999px);
  padding: 4px 12px; font-size: var(--font-size-xs, 11px);
  white-space: nowrap;
}
.ai-hub-chip-k { color: rgba(255, 255, 255, 0.7); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.ai-hub-chip-v { color: var(--lod-white, #fff); font-weight: 600; }

/* Segmentierter Umschalter (Pillen-Track, aktive Pille als weisse Karte). */
.ai-hub-nav {
  display: flex; flex-wrap: wrap; gap: var(--space-1);
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-circular, 999px);
  padding: 4px;
  margin-bottom: var(--space-4);
}
.ai-hub-navbtn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 8px var(--space-4);
  border: none; background: transparent; cursor: pointer;
  border-radius: var(--radius-circular, 999px);
  font-size: var(--font-size-sm, 13px); font-weight: var(--fw-semibold, 600);
  color: var(--color-text-muted);
  transition: background var(--duration-fast, 120ms), color var(--duration-fast, 120ms), box-shadow var(--duration-fast, 120ms);
}
.ai-hub-navbtn .ui-ico img { width: 16px; height: 16px; }
.ai-hub-navbtn:hover { color: var(--color-text); }
.ai-hub-navbtn.is-active {
  background: var(--color-surface, #fff);
  color: var(--lod-darkblue, #16324d);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--lod-darkblue-900), transparent 84%);
}

/* Werkzeug-Container: nur das aktive ist sichtbar (.hidden am Rest). */
.ai-hub-tool > .ich-card { margin: 0; }

@media (max-width: 599px) {
  .ai-hub-hero { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .ai-hub-hero-meta { flex-direction: row; flex-wrap: wrap; }
  .ai-hub-navbtn { flex: 1 1 auto; justify-content: center; }
}

.admin-ai-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.admin-ai-spec {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.admin-ai-spec-label {
  font-size: var(--font-size-xs, 12px);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--fw-semibold, 600);
}
.admin-ai-spec-value {
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--fw-semibold, 600);
  color: var(--color-text);
}

/* Chat-Thread — volle Breite der Card, moderate Hoehe.
   Bubble-Breite wird separat begrenzt, damit Text lesbar bleibt. */
.admin-ai-thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 260px;
  max-height: min(560px, 50vh);
  overflow-y: auto;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
}

/* Empty-State zentriert mittig — analog zu anderen leeren Listen */
.admin-ai-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  flex: 1;
  min-height: 240px;
  color: var(--color-text-muted);
  text-align: center;
}
.admin-ai-empty .ui-ico img {
  width: 32px;
  height: 32px;
  opacity: 0.4;
}
.admin-ai-empty-title {
  font-weight: var(--fw-semibold, 600);
  font-size: var(--font-size-md, 14px);
  color: var(--color-text);
  margin-top: var(--space-2);
}
.admin-ai-empty-sub {
  font-size: var(--font-size-sm, 13px);
}

/* Nachrichten-Bubbles */
.admin-ai-msg {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  max-width: 72ch;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--font-size-sm, 14px);
  line-height: 1.5;
  animation: lod-pop-in var(--duration-medium) var(--ease-out-soft);
}
.admin-ai-msg-role {
  font-size: var(--font-size-xs, 11px);
  font-weight: var(--fw-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.65;
}
.admin-ai-msg-body {
  color: var(--color-text);
}
.admin-ai-msg-meta {
  font-size: var(--font-size-xs, 11px);
  color: var(--color-text-muted);
  margin-top: var(--space-xxs);
}
.admin-ai-msg--user {
  background: var(--color-accent-bg-soft);
  border: 1px solid var(--color-accent-bg);
  align-self: flex-end;
}
.admin-ai-msg--assistant {
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  align-self: flex-start;
}
.admin-ai-msg--error {
  background: var(--status-danger-bg);
  color: var(--status-danger-fg);
  border: 1px solid var(--status-danger-border);
  align-self: stretch;
  max-width: 100%;
}

/* Compose: Textarea + unten Actions-Row (Hint links, Senden rechts) */
.admin-ai-compose {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.admin-ai-input {
  width: 100%;
  min-height: 76px;
  max-height: 220px;
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: var(--font-size-sm, 14px);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  resize: vertical;
  box-sizing: border-box;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.admin-ai-input:hover {
  border-color: var(--color-border-hover);
}
.admin-ai-input:focus,
.admin-ai-input:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-bg-soft, rgba(26,75,118,0.18));
}
.admin-ai-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Status-Text in der Actions-Row (Fehler-/Info-Zeile rechts neben Char-Count) */
.admin-ai-status {
  margin-left: var(--space-2);
  padding-left: var(--space-2);
  border-left: 1px solid var(--color-border);
}
.admin-ai-status.is-warn {
  color: var(--status-danger-fg);
  font-weight: var(--fw-semibold, 600);
}

/* Mobile: Spec-Grid 2-spaltig, Bubbles fast volle Breite */
@media (max-width: 599px) {
  .admin-ai-specs {
    grid-template-columns: 1fr 1fr;
  }
  .admin-ai-msg {
    max-width: 95%;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   Notiz-Assistent (KI) — Meeting-Notizen → Aufgaben-Vorschlaege
   Eingabe (Compose) + GroupedList der Vorschlags-Karten + Apply-Bar.
   Vier Breakpoints: Desktop >=1400 (Basis), Notebook 1000-1399, Tablet
   600-999, Mobile <600.
   ──────────────────────────────────────────────────────────────────────── */

/* Compose (Textarea + Actions-Row) — Pattern wie admin-ai-compose */
.admin-na-compose {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.admin-na-input {
  width: 100%;
  min-height: 140px;
  max-height: 420px;
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: var(--font-size-sm, 14px);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  resize: vertical;
  box-sizing: border-box;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.admin-na-input:hover { border-color: var(--color-border-hover); }
.admin-na-input:focus,
.admin-na-input:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-bg-soft, rgba(26,75,118,0.18));
}

/* Ergebnis-Container */
.admin-na-results { margin-top: var(--space-4); }

/* Vorschlags-Karte */
.admin-na-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  transition: opacity var(--duration-fast), border-color var(--duration-fast);
}
.admin-na-card.is-excluded { opacity: 0.5; }
.admin-na-card.is-excluded .admin-na-subject { text-decoration: line-through; }
.admin-na-card.is-removed { display: none; }
.admin-na-card.is-done {
  opacity: 0.6;
  border-color: var(--status-success-border, var(--color-border));
  background: var(--status-success-bg, var(--color-bg-muted));
}

.admin-na-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.admin-na-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}
.admin-na-typ {
  font-size: var(--font-size-xs, 11px);
  font-weight: var(--fw-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.admin-na-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  color: var(--color-text-muted);
}
.admin-na-remove:hover { background: var(--color-bg-muted); }
.admin-na-remove .ui-ico img { width: 16px; height: 16px; opacity: 0.7; }

/* Editierbare Felder */
.admin-na-subject,
.admin-na-desc,
.admin-na-cl-titel,
.admin-na-field {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: var(--font-size-sm, 13px);
  color: var(--color-text);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

/* Zwei-Spalten-Reihe fuer Kontakt-/Firma-Felder (Vorname|Nachname etc.) */
.admin-na-tworow { display: flex; gap: var(--space-2); }
.admin-na-tworow > * { flex: 1 1 0; min-width: 0; }
.admin-na-tag--muted { background: var(--color-bg-muted); color: var(--color-text-muted); }

/* record_update: Diff-Karte (Ergaenzung/Aenderung an Bestehendem).
   Die Feld-Zeile (alt → neu) rendert das geteilte SSOT-Modul LoD.DiffRow
   (Styles lod-diff-* in components/drawers/_shared/diff-row.css). Hier bleibt
   nur die record_update-spezifische Ziel-Zeile. */
.admin-na-upd-ziel { font-weight: var(--fw-semibold, 600); font-size: var(--font-size-sm, 13px); color: var(--color-text); }

/* Firmendaten-Anreicherung (Batch) — premium Controls, Live-Fortschritt, Stat-Kacheln, Log */
.admin-enrich-controls {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-3) var(--space-4, 16px);
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}
.admin-enrich-field { display: flex; flex-direction: column; gap: var(--space-1); }
.admin-enrich-field-label {
  font-size: var(--font-size-xs, 11px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--fw-semibold, 600);
  color: var(--color-text-muted);
}
.admin-enrich-num {
  width: 84px;
  padding: 6px var(--space-2);
  border: 1px solid var(--lod-gray-200, #d9dde3);
  border-radius: var(--radius-sm);
  background: var(--lod-white, #fff);
  color: var(--color-text);
  font-size: var(--font-size-md, 14px);
  font-variant-numeric: tabular-nums;
}
.admin-enrich-num:disabled { opacity: 0.45; }
.admin-enrich-num:focus-visible { outline: 2px solid var(--lod-darkblue); outline-offset: 1px; }
/* Toggle-Chips (Alle / Testlauf) — Pille, hebt sich im aktiven Zustand ab. */
.admin-enrich-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px var(--space-3);
  border: 1px solid var(--lod-gray-200, #d9dde3);
  border-radius: var(--radius-circular, 999px);
  background: var(--lod-white, #fff);
  font-size: var(--font-size-sm, 13px);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--duration-fast, 120ms), background var(--duration-fast, 120ms);
}
.admin-enrich-toggle:hover { border-color: var(--lod-darkblue-300, #7ea6c9); }
.admin-enrich-toggle:has(input:checked) {
  border-color: var(--lod-turquoise-500, #17a2b8);
  background: color-mix(in srgb, var(--lod-turquoise-500, #17a2b8) 12%, transparent);
  color: var(--lod-turquoise-900, #0b3d47);
  font-weight: var(--fw-semibold, 600);
}
.admin-enrich-toggle input { margin: 0; accent-color: var(--lod-turquoise-500, #17a2b8); }
.admin-enrich-start { margin-left: auto; align-self: flex-end; }

/* Kopf-Zeile: Spinner + Headline (laufend/fertig/Fehler). */
.admin-enrich-status {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--font-size-md, 14px);
  font-weight: var(--fw-semibold, 600);
  color: var(--color-text);
  min-height: 1.4em;
  margin-bottom: var(--space-2);
}
.admin-enrich-status.is-warn { color: var(--status-danger-fg, #c33); }
.admin-enrich-spinner {
  width: 14px; height: 14px; flex: 0 0 auto;
  border: 2px solid var(--lod-gray-200, #d9dde3);
  border-top-color: var(--lod-turquoise, #17a2b8);
  border-radius: 50%;
  animation: admin-enrich-spin 0.7s linear infinite;
}
@keyframes admin-enrich-spin { to { transform: rotate(360deg); } }

/* Fortschrittsbalken (tuerkis, animiert). */
.admin-enrich-bar {
  height: 8px;
  background: var(--lod-gray-100, #eef1f5);
  border-radius: var(--radius-circular, 999px);
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.admin-enrich-bar > div {
  /* Breite = dynamischer Fortschritt über die Custom-Property --enrich-pct (inline
     gesetzt). So bleibt die Layout-Property width in der CSS statt als Inline-Layout-
     Style (Responsive-Regel); der Prozentwert ist eine Variable, kein Layout-Property. */
  width: var(--enrich-pct, 0%);
  height: 100%;
  background: linear-gradient(90deg, var(--lod-turquoise-400, #2bb8cc), var(--lod-turquoise, #17a2b8));
  border-radius: inherit;
  transition: width var(--duration-normal, 240ms) var(--lod-ease, ease);
}

/* Stat-Kacheln (Ergaenzungen / Logos / Uebersprungen / Fehler) rendern jetzt
   über die KpiGrid-SSOT (admin-enrich-batch.js) — eigenes Tile-CSS entfernt. */

/* Dry-Run-Hinweisband. */
.admin-enrich-drybanner {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--font-size-sm, 13px);
  color: var(--color-text);
  background: color-mix(in srgb, var(--status-warning-fg, #b7791f) 12%, transparent);
  border-radius: var(--radius-sm);
  padding: var(--space-1) 10px;
  margin-bottom: var(--space-3);
}

/* Idle-Empty-State (vor dem ersten Lauf). */
.admin-enrich-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  padding: var(--space-5) var(--space-3);
  color: var(--color-text-muted);
  text-align: center;
  font-size: var(--font-size-sm, 13px);
}
.admin-enrich-empty img { width: 28px; height: 28px; opacity: 0.5; margin-bottom: var(--space-1); }

/* Ergebnis-Log. */
.admin-enrich-log-title {
  font-size: var(--font-size-xs, 11px);
  text-transform: uppercase; letter-spacing: 0.04em;
  font-weight: var(--fw-semibold, 600); color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.admin-enrich-log { display: flex; flex-direction: column; gap: var(--space-1); max-height: 360px; overflow-y: auto; }
.admin-enrich-row {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--lod-gray-200, #d9dde3);
  background: var(--lod-gray-50, #f7f9fb);
  font-size: var(--font-size-sm, 13px);
}
.admin-enrich-row.is-ok { border-left-color: var(--status-success-fg, #1f8a5b); }
.admin-enrich-row.is-skip { border-left-color: var(--lod-gray-300, #c3c9d1); opacity: 0.82; }
.admin-enrich-row.is-err { border-left-color: var(--status-danger-fg, #c33); }
.admin-enrich-row-name { font-weight: var(--fw-semibold, 600); color: var(--color-text); flex: 0 0 auto; }
.admin-enrich-row-detail { color: var(--color-text-muted); min-width: 0; word-break: break-word; }

/* Kein prefers-color-scheme:dark-Block: Die App ist Light-only (tokens.css definiert nur
   Light-Werte, kein Theme-Umschalter). Ein Dark-Hintergrund ohne angepasste Textfarbe
   erzeugte dunkel-auf-dunkel (unlesbar) fuer alle Nutzer mit OS-Dark-Mode. */
.admin-na-subject {
  font-size: var(--font-size-md, 14px);
  font-weight: var(--fw-semibold, 600);
}
.admin-na-desc {
  font-size: var(--font-size-sm, 13px);
  line-height: 1.5;
  resize: vertical;
  min-height: 40px;
}
.admin-na-subject:focus,
.admin-na-desc:focus,
.admin-na-cl-titel:focus,
.admin-na-field:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-bg-soft, rgba(26,75,118,0.18));
}

/* Meta-Zeile: Bearbeiter-Chip, Faelligkeit-Chip, Prio/Herkunft-Tags */
.admin-na-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.admin-na-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm, 13px);
  color: var(--color-text);
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill, 999px);
  cursor: pointer;
  transition: border-color var(--duration-fast), background var(--duration-fast);
}
.admin-na-chip:hover { border-color: var(--color-border-hover); }
.admin-na-chip.sm { font-size: var(--font-size-xs, 12px); padding: 2px var(--space-2); }
.admin-na-chip .ui-ico img { width: 14px; height: 14px; opacity: 0.7; }
.admin-na-chip--projekt {
  background: var(--color-accent-bg-soft);
  border-color: var(--color-accent-bg);
  color: var(--color-accent-text, var(--color-accent));
}
.admin-na-tag {
  font-size: var(--font-size-xs, 11px);
  font-weight: var(--fw-semibold, 600);
  color: var(--color-accent-text, var(--color-accent));
  background: var(--color-accent-bg-soft);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
}

/* Checkliste innerhalb einer Karte */
.admin-na-cl {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-border);
}
.admin-na-cl-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.admin-na-cl-ico img { width: 14px; height: 14px; opacity: 0.5; }
.admin-na-cl-titel { flex: 1 1 auto; font-size: var(--font-size-sm, 13px); }
.admin-na-cl-item .admin-na-chip { flex: 0 0 auto; }

/* Quellzitat (ausklappbar) */
.admin-na-quote { font-size: var(--font-size-sm, 13px); }
.admin-na-quote summary {
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs, 12px);
}
.admin-na-quote blockquote {
  margin: var(--space-1) 0 0;
  padding: var(--space-1) var(--space-2);
  border-left: 2px solid var(--color-accent-bg);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Flag-Hinweis (nicht aufgeloeste Felder) */
.admin-na-flag {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs, 12px);
  color: var(--status-warning-fg, var(--color-text-muted));
}
.admin-na-flag .ui-ico img { width: 14px; height: 14px; }

/* Apply-Bar am Card-Fuss */
.admin-na-applybar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-muted);
}
.admin-na-applybar-info {
  font-size: var(--font-size-sm, 13px);
  font-weight: var(--fw-semibold, 600);
  color: var(--color-text);
}
.admin-na-applybar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* "Bezug"-Waehler ueber dem Notizfeld */
.admin-na-bezug-row {
  display: flex;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.admin-na-bezug-label {
  font-size: var(--font-size-xs, 11px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--fw-semibold, 600);
  color: var(--color-text-muted);
}
.admin-na-bezug-select {
  min-width: 240px; max-width: 360px;
  padding: 7px var(--space-3);
  border: 1px solid var(--lod-gray-200, #d9dde3);
  border-radius: var(--radius-sm);
  background: var(--color-surface, #fff);
  color: var(--color-text);
  font-size: var(--font-size-sm, 13px);
}
/* Nach CustomSelect-Bind das native Select definitiv ausblenden (verhindert das
   Doppel-Control); ohne Bind bleibt es als gestyltes Fallback sichtbar. */
select.admin-na-bezug-select[aria-hidden="true"] { display: none !important; }
/* CustomSelect.bind-Trigger (button.select[data-cs-trigger]) vollstaendig stylen.
   Der Admin-Bereich liegt NICHT in .app-scope, daher greift das .app-scope-.select-
   Primitiv (Border/Padding/Chevron) hier nicht — der Button waere sonst ein
   ungestylter Browser-Default. Das Select traegt data-cs-manual → der Legacy-
   Auto-Init (custom-select-legacy.js) fasst es nicht mehr an; nur dieser eine
   Trigger bleibt. Optik gespiegelt von .admin-na-bezug-select + Chevron. */
.admin-na-bezug-row .select[data-cs-trigger] {
  min-width: 240px;
  max-width: 360px;
  min-height: 34px;
  padding: 7px 26px 7px var(--space-3);
  border: 1px solid var(--lod-gray-200, #d9dde3);
  border-radius: var(--radius-sm);
  background: var(--color-surface, #fff)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23555a63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>")
    no-repeat right 8px center;
  color: var(--color-text);
  font-size: var(--font-size-sm, 13px);
  font-family: inherit;
  transition: border-color var(--duration-quick), box-shadow var(--duration-quick);
}
.admin-na-bezug-row .select[data-cs-trigger]:hover { border-color: var(--color-border-hover, #b8bec7); }
.admin-na-bezug-row .select[data-cs-trigger]:focus-visible {
  outline: none;
  border-color: var(--lod-turquoise, var(--brand-default));
  box-shadow: var(--lod-shadow-focus);
}
.admin-na-bezug-hint {
  font-size: var(--font-size-xs, 12px);
  color: var(--color-text-muted);
}
.admin-na-phase { display: inline-flex; align-items: center; }

/* Modus-Umschalter (Aufgaben aus Notizen | Daten fragen) — premium Segment-Control,
   identisch zur OpenAI-Schaltzentrale-Nav (weisse Aktiv-Pille + Schatten). */
.admin-na-modeswitch {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-circular, 999px);
  margin-bottom: var(--space-4);
}
.admin-na-modebtn {
  border: none;
  background: transparent;
  padding: 8px 18px;
  border-radius: var(--radius-circular, 999px);
  /* font-family explizit erben: der Admin-Tab liegt nicht in .app-scope, wo der
     app-weite <button>-Reset sitzt — sonst rendert dieser Text-Button in der
     UA-Button-Schrift statt der App-Schrift. */
  font-family: inherit;
  font-size: var(--font-size-sm, 13px);
  font-weight: var(--fw-semibold, 600);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--duration-fast, 120ms), color var(--duration-fast, 120ms), box-shadow var(--duration-fast, 120ms);
}
.admin-na-modebtn:hover { color: var(--color-text); }
.admin-na-modebtn.is-active {
  background: var(--color-surface, #fff);
  color: var(--lod-darkblue, #16324d);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--lod-darkblue-900), transparent 84%);
}

/* Eingabequelle Notiz | E-Mail — Toggle-Chips (türkis aktiv), wie die Batch-Toggles. */
.admin-na-srcswitch { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.admin-na-srcbtn {
  border: 1px solid var(--lod-gray-200, #d9dde3);
  background: var(--color-surface, #fff);
  padding: 7px 16px;
  border-radius: var(--radius-circular, 999px);
  font-size: var(--font-size-sm, 13px);
  font-weight: var(--fw-semibold, 600);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--duration-fast, 120ms), border-color var(--duration-fast, 120ms), color var(--duration-fast, 120ms);
}
.admin-na-srcbtn:hover { border-color: var(--lod-darkblue-300, #7ea6c9); color: var(--color-text); }
.admin-na-srcbtn.is-active {
  background: color-mix(in srgb, var(--lod-turquoise-500, #17a2b8) 12%, transparent);
  border-color: var(--lod-turquoise-500, #17a2b8);
  color: var(--lod-turquoise-900, #0b3d47);
}
.admin-na-src-hint { font-size: var(--font-size-xs, 12px); color: var(--color-text-muted); }

/* Ask-the-data: Frage-Zeile + Antwort + Quellen */
.admin-na-frage-row { display: flex; gap: var(--space-2); align-items: stretch; }
.admin-na-frage-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: var(--font-size-sm, 14px);
  color: var(--color-text);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.admin-na-frage-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-bg-soft, rgba(26,75,118,0.18));
}
.admin-na-frage-answer { margin-top: var(--space-4); }
.admin-na-answer-text {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  white-space: pre-wrap;
  line-height: 1.55;
  color: var(--color-text);
}
.admin-na-answer-quellen-label {
  font-size: var(--font-size-xs, 11px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: var(--fw-semibold, 600);
  color: var(--color-text-muted);
  margin: var(--space-3) 0 var(--space-1);
}
.admin-na-answer-quellen { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.admin-na-quelle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm, 13px);
  color: var(--color-accent-text, var(--color-accent));
  background: var(--color-accent-bg-soft);
  border: 1px solid var(--color-accent-bg);
  border-radius: var(--radius-pill, 999px);
  cursor: pointer;
  transition: border-color var(--duration-fast);
}
.admin-na-quelle:hover { border-color: var(--color-accent); }

/* Notebook 1000-1399 — Karten behalten volle Breite, etwas mehr Luft */
@media (min-width: 1000px) and (max-width: 1399px) {
  .admin-na-input { min-height: 130px; }
  .admin-na-card { padding: var(--space-3); }
}

/* Tablet 600-999 — Meta darf umbrechen (Default), Apply-Bar bleibt Zeile,
   Frage-Zeile bleibt einzeilig, Modeswitch kompakt */
@media (min-width: 600px) and (max-width: 999px) {
  .admin-na-input { min-height: 120px; }
  .admin-na-meta { gap: var(--space-1); }
  .admin-na-bezug-select,
  .admin-na-bezug-row .select[data-cs-trigger] { min-width: 200px; }
  .admin-na-modebtn { padding: 6px 10px; }
}

/* Mobile <600 — Compose-/Apply-Actions volle Breite, Karte schlanker */
@media (max-width: 599px) {
  .admin-na-input { min-height: 110px; }
  .admin-na-card { padding: var(--space-2); }
  .admin-na-meta { gap: var(--space-1); }
  .admin-na-bezug-row { align-items: stretch; }
  .admin-na-bezug-select,
  .admin-na-bezug-row .select[data-cs-trigger] { min-width: 0; max-width: none; width: 100%; }
  .admin-na-applybar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }
  .admin-na-applybar-actions { width: 100%; }
  .admin-na-applybar-actions .fk-buchen { flex: 1 1 auto; justify-content: center; }
  .admin-na-modeswitch { display: flex; width: 100%; }
  .admin-na-modebtn { flex: 1 1 auto; text-align: center; }
  .admin-na-tworow { flex-direction: column; }
  .admin-na-frage-row { flex-direction: column; }
  .admin-na-frage-row .fk-buchen { width: 100%; justify-content: center; }
}

/* Vertragsvorlagen-Liste: 'quelle-fehlt'-Zeilen (Word-Original MIP-verschluesselt,
   noch kein Template) sind sichtbar, aber nicht klickbar — gedimmt, ohne Pointer. */
.admin-mt-row--disabled {
  opacity: .55;
  cursor: default;
}

/* Vertragsvorlagen haben 4 Spalten (Vorlage/Gruppe/Quelle-Status/Aktionen) statt der
   5 der Mail-/Protokoll-Listen (keine Datum-Spalte — Vorlagen-Aenderungen laufen ueber
   Git-Deploy, mtime waere Rauschen). Gleiche Spaltenmasse, nur ohne die 110px-Spalte. */
#admin-vv-list .admin-mt-rowhead,
#admin-vv-list .admin-mt-row {
  grid-template-columns: minmax(200px, 1.6fr) minmax(160px, 160px) minmax(180px, 2fr) 90px;
}

/* "Als PDF öffnen" sitzt rechts in der Tab-Leiste der Vertragsvorlagen-Lightbox
   (nutzt den admin-mt-reset-all-Button-Stil, nur die Ausrichtung ist eigen). */
.admin-vv-pdf-btn { margin-left: auto; }