/* ==========================================================================
   matchDesk UI-Kit · Rückmeldung, Navigation, Seitenaufbau, Daten, Überlagerungen
   ========================================================================== */

/* --- Banner: Hinweis im Inhalt, bleibt stehen bis erledigt ----------------- */
.md-banner {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start;
  padding: 14px 16px; border-radius: var(--md-radius-md);
  background: var(--md-info-bg); border: 1px solid var(--md-info-line); color: var(--md-text);
}
.md-banner > .md-icon { margin-top: 1px; color: var(--md-info-fg); }
.md-banner-body { display: grid; gap: 4px; min-width: 0; }
.md-banner-title { font-weight: 700; color: var(--md-text-strong); }
.md-banner-text { font-size: var(--md-fs-small); line-height: 1.5; }
.md-banner-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.md-banner--success { background: var(--md-success-bg); border-color: var(--md-success-line); }
.md-banner--success > .md-icon { color: var(--md-success-fg); }
.md-banner--warning { background: var(--md-warning-bg); border-color: var(--md-warning-line); }
.md-banner--warning > .md-icon { color: var(--md-warning-fg); }
.md-banner--danger { background: var(--md-danger-bg); border-color: var(--md-danger-line); }
.md-banner--danger > .md-icon { color: var(--md-danger-fg); }
.md-banner--neutral { background: var(--md-bg-subtle); border-color: var(--md-line); }
.md-banner--neutral > .md-icon { color: var(--md-icon); }

/* --- Toast: kurze Bestätigung nach einer Aktion, verschwindet selbst -------- */
.md-toast {
  display: flex; align-items: center; gap: 12px; min-width: 300px; max-width: 460px;
  padding: 12px 10px 12px 16px; border-radius: var(--md-radius-md);
  background: var(--md-bg-inverse); color: var(--md-text-inverse); box-shadow: var(--md-shadow-3);
  font-size: var(--md-fs-small); font-weight: 500;
  --md-focus: var(--md-on-inverse-focus); /* Pink 600 hätte auf der dunklen Fläche nur 2,8:1 */
}
.md-toast > .md-icon { color: var(--md-on-inverse-info); }
.md-toast--success > .md-icon { color: var(--md-on-inverse-success); }
.md-toast--warning > .md-icon { color: var(--md-on-inverse-warning); }
.md-toast--danger > .md-icon { color: var(--md-on-inverse-danger); }
.md-toast-text { flex: 1; }
.md-toast-action {
  border: 0; background: transparent; color: inherit; font-weight: 700; cursor: pointer; padding: 6px 8px;
  border-radius: var(--md-radius-sm); text-decoration: underline; text-underline-offset: 3px;
}
.md-toast-close { border: 0; background: transparent; color: inherit; opacity: .7; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.md-toast-close:hover { opacity: 1; background: var(--md-bg-hover-inverse); }
.md-toast-stack { display: grid; gap: 8px; justify-items: end; }
/* Toast-Bereich (Kit-Ergänzung HAN-5998, Bedarf von ui.js HAN-6000): hält die Toasts im Fenster fest, unten rechts,
   auf dem Telefon unten über die volle Breite abzüglich Gutter, über dem Inhalt (--md-z-toast liegt über --md-z-modal).
   ui.js rendert <div class="md-toast-region" role="region" aria-label="Meldungen"> mit zwei Live-Bereichen darin
   (<div class="md-toast-stack" aria-live="polite"> und aria-live="assertive">). Die Bereiche stehen untereinander (grid):
   in einem flex-Bereich nebeneinander streckte der eine den Toast des anderen auf seine Höhe.
   Die Region fängt keine Klicks ab, nur der einzelne Toast. Seine Breite hängt an der Fensterbreite und nicht an der des
   Stapels (die ergibt sich erst aus den Toasts), damit ein Toast in schmalen Fenstern nicht überläuft. */
.md-toast-region {
  /* Der Bereich ist selbst eine .md-root (ui.js); ohne diese Zeile malte er die Seitenfläche als Streifen */
  background: none;
  position: fixed; z-index: var(--md-z-toast); inset-block-end: var(--md-space-4); inset-inline: var(--md-space-4);
  display: grid; gap: var(--md-space-2); justify-items: end; pointer-events: none;
}
.md-toast-region > * { min-width: 0; max-width: 100%; }
.md-toast-region .md-toast {
  pointer-events: auto;
  min-width: min(300px, calc(100vw - 2 * var(--md-space-4)));
  max-width: min(460px, calc(100vw - 2 * var(--md-space-4)));
}
@media (max-width: 640px) {
  .md-toast-region, .md-toast-region .md-toast-stack { justify-items: stretch; }
  .md-toast-region .md-toast { max-width: none; }
}

/* --- Leerzustand: erklärt, was hierher gehört und wie es entsteht ---------- */
.md-empty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 48px 24px; }
.md-empty-icon {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  background: var(--md-bg-sunken); color: var(--md-text-strong); margin-bottom: 4px;
}
.md-empty-title { margin: 0; font-size: var(--md-fs-h3); font-weight: 700; color: var(--md-text-strong); }
.md-empty-text { margin: 0; color: var(--md-text-muted); max-width: 46ch; font-size: var(--md-fs-small); line-height: 1.55; }
.md-empty .md-btn-group { margin-top: 6px; justify-content: center; }
.md-empty--compact { padding: 28px 16px; }

/* --- Laden: Platzhalter in der Form des Ergebnisses ------------------------ */
.md-skel { display: block; height: 12px; border-radius: 6px; background: var(--md-bg-sunken); }
.md-skel--text { width: 60%; }
.md-skel--title { height: 16px; width: 40%; }
.md-skel--pill { height: 22px; width: 72px; border-radius: var(--md-radius-pill); }
.md-skel--circle { width: 32px; height: 32px; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) {
  .md-skel { animation: md-pulse 1.6s var(--md-ease) infinite; }
}
@keyframes md-pulse { 50% { opacity: .55; } }

/* --- Fortschritt eines echten Vorgangs (Deploy, Upload) ---------------------- */
.md-progress { height: 6px; border-radius: var(--md-radius-pill); background: var(--md-bg-sunken); overflow: hidden; }
.md-progress-bar { height: 100%; border-radius: inherit; background: var(--md-signal); width: var(--_value, 40%); transition: width var(--md-dur-3) var(--md-ease); }
.md-progress--indeterminate .md-progress-bar { width: 32%; }
@media (prefers-reduced-motion: no-preference) {
  .md-progress--indeterminate .md-progress-bar { animation: md-slide 1.4s var(--md-ease) infinite; }
}
@keyframes md-slide { from { transform: translateX(-100%); } to { transform: translateX(320%); } }

/* --- Schritte: Assistent (waagerecht) und Checkliste (senkrecht) ----------- */
.md-steps { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; }
.md-step { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; font-size: var(--md-fs-small); color: var(--md-text-muted); }
.md-step:not(:last-child)::after { content: ""; flex: 1; height: 2px; min-width: 16px; margin: 0 12px; border-radius: 2px; background: var(--md-line); }
.md-step-marker {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 12px; background: var(--md-bg-sunken); color: var(--md-text-muted); border: 1.5px solid transparent;
}
.md-step-marker .md-icon { width: 15px; height: 15px; stroke-width: 2.4; }
.md-step-label { white-space: nowrap; font-weight: 600; }
.md-step[data-state="done"] { color: var(--md-text); }
.md-step[data-state="done"] .md-step-marker { background: var(--md-accent); color: var(--md-text-on-accent); }
.md-step[data-state="done"]:not(:last-child)::after { background: var(--md-accent); }
.md-step[aria-current="step"] { color: var(--md-text-strong); }
.md-step[aria-current="step"] .md-step-marker { background: var(--md-bg-surface); border-color: var(--md-accent); color: var(--md-accent-fg); box-shadow: var(--md-shadow-focus); }

.md-checklist { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.md-checklist-item { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: start; padding: 12px 0; position: relative; }
.md-checklist-item:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 42px; bottom: -2px; width: 2px; border-radius: 2px; background: var(--md-line); }
.md-checklist-item[data-state="done"]:not(:last-child)::before { background: var(--md-accent); }
.md-checklist-item .md-step-marker { margin-top: -2px; }
.md-checklist-item[data-state="done"] .md-step-marker { background: var(--md-accent); color: var(--md-text-on-accent); }
.md-checklist-item[aria-current="step"] .md-step-marker { background: var(--md-bg-surface); border-color: var(--md-accent); color: var(--md-accent-fg); box-shadow: var(--md-shadow-focus); }
.md-checklist-title { display: block; font-weight: 600; color: var(--md-text-strong); }
.md-checklist-desc { display: block; margin-top: 2px; font-size: var(--md-fs-small); color: var(--md-text-muted); }
.md-checklist-item[data-state="done"] .md-checklist-title { color: var(--md-text); }

/* ==========================================================================
   App-Rahmen (Admin): helle Seitenleiste, schwebende Kopfzeile, Inhalt
   ========================================================================== */
.md-app { display: grid; grid-template-columns: var(--md-sidebar-w) minmax(0, 1fr); min-height: 100%; background: var(--md-bg-page); }
.md-app[data-sidebar="collapsed"] { grid-template-columns: var(--md-sidebar-w-collapsed) minmax(0, 1fr); }
.md-main { display: flex; flex-direction: column; min-width: 0; }
.md-content { width: 100%; max-width: var(--md-content-max); margin: 0 auto; padding: var(--md-page-pad); display: grid; gap: var(--md-gap); align-content: start; }
/* Kinder des Rasters und Tab-Panels dürfen schmaler werden als ihr Inhalt (Kit-Ergänzung aus ui.js HAN-6000): mit min-width: auto
   weitet eine breite Tabelle die Spalte und die Seite scrollt waagerecht (bei 768 px um 18 px gemessen). So scrollt die
   Tabelle in .md-table-scroll. Ohne Spezifität (:where), damit jeder Baustein ein eigenes min-width behalten kann. */
:where(.md-root) :where(.md-content > *, [role="tabpanel"]) { min-width: 0; }

.md-sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  background: var(--md-bg-surface); border-right: 1px solid var(--md-line); overflow: hidden;
}
.md-sidebar-brand { height: var(--md-topbar-h); flex: none; display: flex; align-items: center; gap: 10px; padding: 0 18px; border-bottom: 1px solid var(--md-line-soft); }
.md-sidebar-scroll { flex: 1; overflow-y: auto; padding: 8px 12px 16px; }
.md-sidebar-group { display: grid; gap: 2px; padding-top: 14px; }
.md-sidebar-label { display: flex; justify-content: space-between; align-items: center; padding: 0 10px 6px; }
.md-nav-item {
  position: relative; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px;
  border-radius: var(--md-radius-field); color: var(--md-text); font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background-color var(--md-dur-1) var(--md-ease), color var(--md-dur-1) var(--md-ease);
}
.md-nav-item .md-icon { color: var(--md-icon); }
.md-nav-item:hover { background: var(--md-bg-hover); color: var(--md-text-strong); }
.md-nav-item[aria-current="page"] { background: var(--md-accent-bg); color: var(--md-accent-fg); font-weight: 600; }
.md-nav-item[aria-current="page"] .md-icon { color: var(--md-accent); }
.md-nav-item .md-count { margin-left: auto; }
.md-nav-item[aria-current="page"] .md-count { background: var(--md-bg-surface); color: var(--md-accent-fg); }
.md-sidebar-foot { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--md-line-soft); }
.md-sidebar-user { display: grid; min-width: 0; line-height: 1.3; }
.md-sidebar-user b { font-size: var(--md-fs-small); color: var(--md-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-sidebar-user span { font-size: 12px; color: var(--md-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-sidebar-foot .md-btn { margin-left: auto; }
.md-app[data-sidebar="collapsed"] .md-nav-item span, .md-app[data-sidebar="collapsed"] .md-nav-item .md-count,
.md-app[data-sidebar="collapsed"] .md-sidebar-label, .md-app[data-sidebar="collapsed"] .md-sidebar-user { display: none; }

.md-topbar {
  position: sticky; top: 0; z-index: var(--md-z-nav); height: var(--md-topbar-h); flex: none;
  display: flex; align-items: center; gap: 12px; padding: 0 var(--md-page-pad);
  background: color-mix(in srgb, var(--md-bg-surface) 86%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--md-line);
}
.md-topbar-spacer { flex: 1; }
.md-search-trigger {
  display: flex; align-items: center; gap: 10px; width: min(420px, 100%); height: 38px; padding: 0 8px 0 12px;
  background: var(--md-bg-field); border: 1px solid var(--md-line-strong); border-radius: var(--md-radius-control);
  color: var(--md-text-placeholder); font-size: var(--md-fs-small); cursor: pointer; text-align: left;
}
.md-search-trigger:hover { border-color: var(--md-ink-500); }
.md-search-trigger > span:not(.md-kbd) { flex: 1; }
.md-search-trigger .md-kbd { flex: none; }
.md-env {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--md-radius-control-sm);
  font-size: 12px; font-weight: 600; background: var(--md-success-bg); color: var(--md-success-fg);
}
.md-env--staging { background: var(--md-warning-bg); color: var(--md-warning-fg); }

/* --- Seitenkopf: Brotkrumen, Titel mit Status, Metazeile, Aktionen --------- */
.md-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--md-fs-small); color: var(--md-text-muted); }
.md-breadcrumb a { color: inherit; text-decoration: none; border-radius: 4px; }
.md-breadcrumb a:hover { color: var(--md-text-strong); text-decoration: underline; text-underline-offset: 3px; }
.md-breadcrumb .md-icon { width: 14px; height: 14px; color: var(--md-icon-muted); }
.md-breadcrumb [aria-current="page"] { color: var(--md-text); font-weight: 600; }

.md-page-head { display: grid; gap: 10px; }
.md-page-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.md-page-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.md-page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: var(--md-fs-small); color: var(--md-text-muted); }
.md-page-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.md-page-meta .md-icon { width: 15px; height: 15px; color: var(--md-icon-muted); }
.md-page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* --- Tabs: Unterbereiche einer Detailseite ---------------------------------- */
/* Grundlinie als Innenschatten, nicht als Rahmen mit negativem Rand: in einem Scroll-Container würde die
   Markierung des aktiven Tabs sonst abgeschnitten (genau dieser Fehler steht im IST-Befund, Rang 6) */
.md-tabs { display: flex; gap: 4px; box-shadow: inset 0 -1px 0 var(--md-line); overflow-x: auto; scrollbar-width: none; }
.md-tab {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; flex: none;
  border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer; white-space: nowrap;
  color: var(--md-text-muted); font-weight: 600; font-size: var(--md-fs-body); text-decoration: none;
  transition: color var(--md-dur-1) var(--md-ease), border-color var(--md-dur-1) var(--md-ease);
}
.md-tab .md-icon { width: 16px; height: 16px; }
.md-tab:hover { color: var(--md-text-strong); border-bottom-color: var(--md-line-strong); }
.md-tab[aria-selected="true"] { color: var(--md-text-strong); border-bottom-color: var(--md-accent); } /* Zustand: 3:1 auch auf der Seitenfläche, deshalb nicht --md-signal */
.md-tab[aria-selected="true"] .md-icon { color: var(--md-accent); }

.md-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: var(--md-fs-small); color: var(--md-text-muted); }
.md-pagination-pages { display: flex; gap: 4px; align-items: center; }
.md-pagination-pages button {
  min-width: 32px; height: 32px; padding: 0 8px; border: 0; border-radius: var(--md-radius-control-sm); background: transparent;
  color: var(--md-text); font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
}
.md-pagination-pages button:hover { background: var(--md-bg-hover); }
.md-pagination-pages button[aria-current="page"] { background: var(--md-bg-inverse); color: var(--md-text-inverse); }

/* ==========================================================================
   Flächen: Karte, Abschnittskarte (Lesen/Bearbeiten), Detail-Layout
   ========================================================================== */
.md-card { background: var(--md-bg-surface); border: 1px solid var(--md-line); border-radius: var(--md-radius-card); box-shadow: var(--md-shadow-1); min-width: 0; }
.md-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; padding: var(--md-card-pad) var(--md-card-pad) 0; flex-wrap: wrap; }
.md-card-heading { display: grid; gap: 4px; min-width: 0; flex: 1 1 200px; }
.md-card-title { margin: 0; display: flex; align-items: center; gap: 10px; font-size: var(--md-fs-h3); font-weight: 700; color: var(--md-text-strong); }
.md-card-desc { margin: 0; font-size: var(--md-fs-small); color: var(--md-text-muted); max-width: 70ch; }
.md-card-body { padding: var(--md-card-pad); }
.md-card-body--flush { padding: 10px 0 0; }
.md-card-body--flush .md-table :is(th, td):first-child { padding-left: var(--md-card-pad); }
.md-card-body--flush .md-table :is(th, td):last-child { padding-right: var(--md-card-pad); }
.md-card-body--flush .md-table tbody tr:last-child td { border-bottom: 0; }
.md-card-foot {
  display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 14px var(--md-card-pad); border-top: 1px solid var(--md-line-soft);
  background: var(--md-bg-subtle); border-radius: 0 0 var(--md-radius-card) var(--md-radius-card);
}
.md-card-foot--spread { justify-content: space-between; }
.md-card--quiet { box-shadow: none; }
.md-card--interactive { cursor: pointer; transition: border-color var(--md-dur-1) var(--md-ease), box-shadow var(--md-dur-1) var(--md-ease); }
.md-card--interactive:hover { border-color: var(--md-line-strong); box-shadow: var(--md-shadow-2); }

/* Abschnittskarte: Lesemodus zeigt Werte, Bearbeiten speichert NUR diesen Abschnitt */
.md-section[data-mode="edit"] { border-color: var(--md-accent-line); box-shadow: var(--md-shadow-1), var(--md-ring-accent-soft); }
.md-section-state { display: none; }
.md-section[data-mode="edit"] .md-section-state { display: inline-flex; }
/* Inhalt je Modus: Werte im Lesemodus, Felder im Bearbeitungsmodus */
.md-section:not([data-mode="edit"]) .md-when-edit, .md-section[data-mode="edit"] .md-when-read { display: none; }

.md-detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--md-gap); align-items: start; }
.md-detail-aside { display: grid; gap: var(--md-gap); position: sticky; top: calc(var(--md-topbar-h) + 16px); }

/* Schlüssel-Wert-Liste */
.md-kv { display: grid; grid-template-columns: minmax(120px, 190px) minmax(0, 1fr); gap: 12px 24px; margin: 0; }
.md-kv dt { font-size: var(--md-fs-small); color: var(--md-text-muted); padding-top: 1px; }
.md-kv dd { margin: 0; min-width: 0; color: var(--md-text-strong); font-weight: 500; overflow-wrap: anywhere; }
.md-kv--stacked { grid-template-columns: 1fr; gap: 14px; }
.md-kv--stacked dt { margin-bottom: -10px; }
.md-kv--narrow { grid-template-columns: minmax(84px, 108px) minmax(0, 1fr); gap: 10px 14px; align-content: start; }

/* Kennzahlen: eine Karte, Zellen mit Trennern statt vier loser Kacheln */
.md-stats { display: grid; grid-template-columns: repeat(var(--_cols, 4), minmax(0, 1fr)); }
.md-stat { display: grid; gap: 6px; padding: var(--md-card-pad); min-width: 0; align-content: start; }
.md-stats .md-stat + .md-stat { border-left: 1px solid var(--md-line-soft); }
.md-stat-value { font-size: var(--md-fs-kpi); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--md-text-strong); }
.md-stat-value small { font-size: .55em; font-weight: 600; letter-spacing: 0; color: var(--md-text-muted); margin-left: 2px; }
.md-stat-foot { display: flex; align-items: center; gap: 6px; font-size: var(--md-fs-small); color: var(--md-text-muted); }
.md-trend { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.md-trend .md-icon { width: 14px; height: 14px; stroke-width: 2.2; }
.md-trend--up { color: var(--md-success-fg); }
.md-trend--down { color: var(--md-danger-fg); }
.md-spark { width: 100%; height: 32px; margin-top: 4px; overflow: visible; }
.md-spark polyline { fill: none; stroke: var(--md-ink-500); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.md-spark .md-spark-area { fill: var(--md-bg-sunken); stroke: none; }
.md-spark circle { fill: var(--md-signal); }

/* ==========================================================================
   Daten: Tabelle, Filterleiste, Sammelaktionen, Verlauf, IDs
   ========================================================================== */
.md-table-card { background: var(--md-bg-surface); border: 1px solid var(--md-line); border-radius: var(--md-radius-card); box-shadow: var(--md-shadow-1); overflow: hidden; min-width: 0; }
.md-table-scroll { overflow: auto; }
.md-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--md-fs-table); }
.md-table th {
  position: sticky; top: 0; z-index: 1; height: 38px; padding: 0 14px; text-align: left; white-space: nowrap;
  background: var(--md-bg-subtle); border-bottom: 1px solid var(--md-line);
  font-family: var(--md-font-mono); font-size: var(--md-fs-label); font-weight: 500;
  letter-spacing: var(--md-tracking-label); text-transform: uppercase; color: var(--md-text-muted);
}
.md-table th button { all: unset; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.md-table th button:hover { color: var(--md-text-strong); }
.md-table th button:focus-visible { outline: 2px solid var(--md-focus); outline-offset: 2px; border-radius: 4px; }
.md-table th .md-icon { width: 13px; height: 13px; }
.md-table th[aria-sort] { color: var(--md-text-strong); }
.md-table td { height: var(--md-row-h); padding: 6px 14px; border-bottom: 1px solid var(--md-line-soft); vertical-align: middle; color: var(--md-text); }
.md-table tbody tr:last-child td { border-bottom: 0; }
.md-table tbody tr { transition: background-color var(--md-dur-1) var(--md-ease); }
.md-table--interactive tbody tr { cursor: pointer; }
.md-table--interactive tbody tr:hover { background: var(--md-bg-hover); }
.md-table tbody tr[aria-selected="true"] { background: var(--md-bg-selected); }
.md-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.md-table .is-mono { font-family: var(--md-font-mono); font-size: .78125rem; }
.md-table .is-check { width: 44px; padding-right: 0; }
.md-table .is-actions { width: 1%; white-space: nowrap; text-align: right; }
.md-cell-main { display: grid; gap: 1px; min-width: 0; }
.md-cell-main b { font-weight: 600; color: var(--md-text-strong); }
.md-cell-main > span { font-size: 12px; color: var(--md-text-muted); }
.md-row-actions { display: inline-flex; gap: 2px; opacity: .0; transition: opacity var(--md-dur-1) var(--md-ease); }
.md-table tr:hover .md-row-actions, .md-table tr:focus-within .md-row-actions { opacity: 1; }
.md-row-actions--always { opacity: 1; }
/* Touch: ohne Hover gibt es keinen Auslöser, die Zeilenaktionen bleiben sichtbar (Kit-Ergänzung aus ui.js HAN-6000) */
@media (hover: none) { .md-row-actions { opacity: 1; } }
.md-table-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--md-line); background: var(--md-bg-subtle); font-size: var(--md-fs-small); color: var(--md-text-muted); }
.md-table-sum td { background: var(--md-bg-subtle); font-weight: 700; color: var(--md-text-strong); border-top: 1px solid var(--md-line); }

.md-amount { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.md-amount--in { color: var(--md-success-fg); }
.md-amount--out { color: var(--md-text-strong); }
.md-amount-note { font-size: 11px; font-weight: 500; color: var(--md-text-muted); margin-left: 4px; }

.md-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.md-filterbar .md-input-group { width: min(320px, 100%); }
.md-filter-btn {
  display: inline-flex; align-items: center; gap: 6px; height: var(--md-control-h-sm); padding: 0 10px 0 12px;
  border: 1px dashed var(--md-line-field); border-radius: var(--md-radius-control-sm); background: transparent;
  color: var(--md-text); font-size: var(--md-fs-small); font-weight: 600; cursor: pointer;
}
.md-filter-btn:hover { background: var(--md-bg-hover); }
.md-filter-btn[data-active="true"] { border-style: solid; border-color: var(--md-accent-line); background: var(--md-accent-bg); color: var(--md-accent-fg); }
.md-filter-btn .md-icon { width: 14px; height: 14px; }
.md-filterbar-meta { margin-left: auto; font-size: var(--md-fs-small); color: var(--md-text-muted); display: flex; align-items: center; gap: 12px; }

.md-bulkbar {
  display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: var(--md-radius-md);
  background: var(--md-bg-inverse); color: var(--md-text-inverse); box-shadow: var(--md-shadow-3); font-size: var(--md-fs-small); font-weight: 600;
}
.md-bulkbar .md-btn--ghost { color: var(--md-text-inverse); }
.md-bulkbar .md-btn--ghost:hover { background: var(--md-bg-hover-inverse); color: var(--md-text-inverse); }

.md-timeline { display: grid; margin: 0; padding: 0; list-style: none; }
.md-timeline-item { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; position: relative; padding-bottom: 18px; }
.md-timeline-item:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--md-line); }
.md-timeline-marker { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--md-bg-sunken); color: var(--md-icon); }
.md-timeline-marker .md-icon { width: 16px; height: 16px; }
.md-timeline-item[data-tone="success"] .md-timeline-marker { background: var(--md-success-bg); color: var(--md-success-fg); }
.md-timeline-item[data-tone="danger"] .md-timeline-marker { background: var(--md-danger-bg); color: var(--md-danger-fg); }
.md-timeline-item[data-tone="warning"] .md-timeline-marker { background: var(--md-warning-bg); color: var(--md-warning-fg); }
.md-timeline-item[data-tone="accent"] .md-timeline-marker { background: var(--md-accent-bg); color: var(--md-accent-fg); }
.md-timeline-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 5px; }
.md-timeline-title { font-weight: 600; color: var(--md-text-strong); }
.md-timeline-time { font-family: var(--md-font-mono); font-size: 12px; color: var(--md-text-muted); }
.md-timeline-body { font-size: var(--md-fs-small); color: var(--md-text-muted); margin-top: 2px; }

.md-code {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  padding: 1px 4px 1px 7px; border-radius: var(--md-radius-xs); background: var(--md-bg-sunken); border: 1px solid var(--md-line-soft);
  font-family: var(--md-font-mono); font-size: .78125rem; color: var(--md-text-strong); white-space: nowrap;
}
.md-code--plain { padding-right: 7px; }
.md-code button { width: 22px; height: 22px; border: 0; border-radius: 5px; background: transparent; color: var(--md-icon); display: grid; place-items: center; cursor: pointer; }
.md-code button:hover { background: var(--md-bg-pressed); color: var(--md-text-strong); }
.md-code button .md-icon { width: 13px; height: 13px; }

/* ==========================================================================
   Überlagerungen: Dialog, Seitenpanel, Menü, Tooltip, Befehlspalette
   ========================================================================== */
.md-overlay { position: fixed; inset: 0; z-index: var(--md-z-modal); display: grid; place-items: center; padding: 24px; background: var(--md-bg-overlay); }
.md-overlay--drawer { padding: 0; place-items: stretch end; grid-template-rows: minmax(0, 1fr); }
.md-modal {
  width: min(var(--_w, 560px), 100%); max-height: calc(100dvh - 48px); display: flex; flex-direction: column;
  background: var(--md-bg-surface); border-radius: var(--md-radius-dialog); box-shadow: var(--md-shadow-3); border: 1px solid var(--md-line);
}
.md-modal-head { display: flex; align-items: flex-start; gap: 14px; padding: 22px 24px 0; }
.md-modal-head .md-btn--icon { margin: -6px -8px 0 auto; }
.md-modal-icon { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--md-bg-sunken); color: var(--md-text-strong); }
.md-modal-icon--danger { background: var(--md-danger-bg); color: var(--md-danger-fg); }
.md-modal-icon--warning { background: var(--md-warning-bg); color: var(--md-warning-fg); }
.md-modal-title { margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--md-text-strong); line-height: 1.35; }
.md-modal-sub { margin: 4px 0 0; font-size: var(--md-fs-small); color: var(--md-text-muted); }
.md-modal-body { padding: 16px 24px; overflow: auto; display: grid; gap: 16px; }
.md-modal-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 14px 24px 20px; }
.md-modal-foot--spread { justify-content: space-between; }

.md-drawer {
  width: min(var(--_w, 460px), 100%); height: 100%; display: flex; flex-direction: column;
  background: var(--md-bg-surface); border-left: 1px solid var(--md-line); box-shadow: var(--md-shadow-3);
}
.md-drawer-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--md-line-soft); }
.md-drawer-body { flex: 1; overflow: auto; padding: 20px; display: grid; gap: 20px; align-content: start; }
.md-drawer-head > .md-btn--icon:last-child { margin-left: auto; }
.md-drawer-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--md-line-soft); background: var(--md-bg-subtle); }

.md-menu {
  min-width: 220px; padding: 6px; display: grid; gap: 1px;
  background: var(--md-bg-surface); border: 1px solid var(--md-line); border-radius: var(--md-radius-md); box-shadow: var(--md-shadow-2);
}
.md-menu-item {
  display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border: 0; border-radius: var(--md-radius-sm);
  background: transparent; color: var(--md-text); font-size: var(--md-fs-small); font-weight: 500; text-align: left; cursor: pointer; width: 100%;
}
.md-menu-item .md-icon { width: 16px; height: 16px; color: var(--md-icon); }
.md-menu-item:hover, .md-menu-item:focus-visible { background: var(--md-bg-hover); color: var(--md-text-strong); outline: none; }
.md-menu-item .md-kbd { margin-left: auto; }
.md-menu-item--danger, .md-menu-item--danger .md-icon { color: var(--md-danger-fg); }
.md-menu-item--danger:hover { background: var(--md-danger-bg); color: var(--md-danger-fg); }
.md-menu-sep { height: 1px; margin: 5px 4px; background: var(--md-line-soft); }
.md-menu-label { padding: 8px 10px 4px; }
/* Menü an seinem Knopf: der Anker ist der Knopf samt Menü */
.md-menu-anchor { position: relative; }
.md-menu-anchor > .md-menu { position: absolute; right: 0; top: calc(100% + var(--md-space-1-5)); z-index: var(--md-z-popover); width: max-content; }

.md-tooltip {
  display: inline-block; max-width: 260px; padding: 6px 10px; border-radius: var(--md-radius-sm);
  background: var(--md-bg-inverse); color: var(--md-text-inverse); font-size: 12px; line-height: 1.45; font-weight: 500; box-shadow: var(--md-shadow-2);
}

.md-cmdk { width: min(640px, 100%); background: var(--md-bg-surface); border: 1px solid var(--md-line); border-radius: var(--md-radius-dialog); box-shadow: var(--md-shadow-3); overflow: hidden; }
.md-cmdk-input { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 56px; border-bottom: 1px solid var(--md-line); }
.md-cmdk-input input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 1rem; color: var(--md-text-strong); }
.md-cmdk-input input::placeholder { color: var(--md-text-placeholder); }
.md-cmdk-list { max-height: 360px; overflow: auto; padding: 8px; }
.md-cmdk-group { padding: 10px 10px 4px; }
.md-cmdk-item { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 10px; border-radius: var(--md-radius-sm); color: var(--md-text); cursor: pointer; }
.md-cmdk-item .md-icon { color: var(--md-icon); }
.md-cmdk-item small { color: var(--md-text-muted); font-size: 12px; }
.md-cmdk-item .md-kbd, .md-cmdk-item .md-cmdk-hint { margin-left: auto; }
.md-cmdk-item[aria-selected="true"] { background: var(--md-bg-selected); color: var(--md-text-strong); }
.md-cmdk-item[aria-selected="true"] .md-icon { color: var(--md-accent); }
.md-cmdk-foot { display: flex; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--md-line); background: var(--md-bg-subtle); font-size: 12px; color: var(--md-text-muted); }
.md-cmdk-foot span { display: inline-flex; gap: 6px; align-items: center; }

/* ==========================================================================
   Nachtrag aus den Funktionskatalogen: Bausteine, die mehrere Bereiche brauchen
   ========================================================================== */

/* --- Zeilen-Editor: Filter, Weiterleitungen, Preisregeln, Gründe, Feldschema */
.md-rows { display: grid; gap: 8px; }
.md-rows-head, .md-row { display: grid; grid-template-columns: var(--_cols, 24px minmax(0, 1fr) minmax(0, 1fr) 36px); gap: 8px; align-items: center; }
.md-rows-head { padding: 0 7px; } /* Zeile: 6 px Innenabstand plus 1 px Rahmen, damit Köpfe über den Feldern stehen */
.md-row { padding: 6px; border-radius: var(--md-radius-md); background: var(--md-bg-subtle); border: 1px solid var(--md-line-soft); }
.md-row[aria-invalid="true"] { border-color: var(--md-danger-line); background: var(--md-danger-bg); }
.md-row-handle { display: grid; place-items: center; color: var(--md-icon-muted); cursor: grab; }
.md-row-error { grid-column: 1 / -1; margin-top: -2px; }
.md-row:has(> .md-row-handle) .md-row-error { grid-column: 2 / -1; }
.md-rows-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: var(--md-fs-small); color: var(--md-text-muted); }
.md-row .md-input, .md-row .md-select select { background: var(--md-bg-surface); }

/* --- Gesperrt mit Grund: nie nur ein grauer Knopf ---------------------------- */
.md-locked { display: inline-grid; gap: 6px; justify-items: start; }
.md-locked-reason { display: flex; gap: 6px; align-items: flex-start; max-width: 44ch; font-size: 12px; line-height: 1.45; color: var(--md-text-muted); }
.md-locked-reason .md-icon { width: 14px; height: 14px; margin-top: 1px; flex: none; }

/* --- Link-Chip zu externen Zielen (PR, Build-Log, Konsole) ------------------- */
.md-extlink {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: var(--md-radius-xs);
  border: 1px solid var(--md-line); background: var(--md-bg-surface); color: var(--md-text-strong);
  font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.md-extlink:hover { border-color: var(--md-line-strong); background: var(--md-bg-subtle); }
.md-extlink .md-icon { width: 14px; height: 14px; color: var(--md-icon); }
.md-extlink code { font-family: var(--md-font-mono); font-weight: 500; font-size: 11.5px; color: var(--md-text-muted); }

/* --- Diff: vorher -> nachher, Zugänge und Abgänge -------------------------- */
.md-diff { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--md-line); border-radius: var(--md-radius-md); overflow: hidden; font-family: var(--md-font-mono); font-size: 12.5px; }
.md-diff li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: center; padding: 6px 12px; border-top: 1px solid var(--md-line-soft); color: var(--md-text); overflow-wrap: anywhere; }
.md-diff li:first-child { border-top: 0; }
.md-diff li::before { font-weight: 700; text-align: center; }
.md-diff .is-add { background: var(--md-success-bg); } .md-diff .is-add::before { content: "+"; color: var(--md-success-fg); }
.md-diff .is-del { background: var(--md-danger-bg); } .md-diff .is-del::before { content: "\2212"; color: var(--md-danger-fg); }
.md-diff .is-same::before { content: "="; color: var(--md-text-muted); }
.md-diffstat { display: inline-flex; gap: 8px; font-family: var(--md-font-mono); font-size: 12px; font-weight: 600; }
.md-diffstat .is-add { color: var(--md-success-fg); } .md-diffstat .is-del { color: var(--md-danger-fg); }

/* --- Segmentbalken mit Legende (Flotten-Gesundheit) ------------------------- */
.md-segbar { display: flex; height: 8px; border-radius: var(--md-radius-pill); overflow: hidden; background: var(--md-bg-sunken); gap: 2px; }
.md-segbar span { display: block; flex: var(--_n, 1) 1 0; }
.md-segbar .is-ok { background: var(--md-success-solid); }
.md-segbar .is-warn { background: var(--md-warning-solid); }
.md-segbar .is-fail { background: var(--md-danger-solid); }
.md-segbar .is-unknown { background: var(--md-ink-400); }
.md-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--md-text-muted); }
.md-legend li { display: inline-flex; align-items: center; gap: 6px; }
.md-legend li b { color: var(--md-text-strong); font-variant-numeric: tabular-nums; }
.md-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.md-legend .is-ok { background: var(--md-success-solid); } .md-legend .is-warn { background: var(--md-warning-solid); }
.md-legend .is-fail { background: var(--md-danger-solid); } .md-legend .is-unknown { background: var(--md-ink-400); }

/* --- Sprungmarken für lange Abschnittslisten (Regel, Kampagne) -------------- */
.md-anchornav { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; position: sticky; top: calc(var(--md-topbar-h) + 16px); }
.md-anchornav a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: var(--md-radius-sm);
  color: var(--md-text-muted); font-size: var(--md-fs-small); font-weight: 600; text-decoration: none; border-left: 2px solid transparent;
}
.md-anchornav a:hover { color: var(--md-text-strong); background: var(--md-bg-hover); }
.md-anchornav a[aria-current="true"] { color: var(--md-text-strong); background: var(--md-bg-surface); box-shadow: var(--md-shadow-1); }
.md-anchornav .md-icon { width: 15px; height: 15px; }
.md-anchornav [data-state="warn"] .md-icon { color: var(--md-warning-fg); }
.md-anchornav [data-state="ok"] .md-icon { color: var(--md-success-fg); }
.md-anchornav [data-state="edit"] .md-icon { color: var(--md-accent); }
.md-anchornav-label { padding: var(--md-space-4) var(--md-space-3) var(--md-space-1); }
.md-anchornav-label:first-child { padding-top: 0; }

/* --- Wochentage als Mehrfachauswahl (Team-Zeitplan) ------------------------- */
.md-days { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.md-days button {
  width: 38px; height: var(--md-control-h-sm); border-radius: var(--md-radius-control-sm); cursor: pointer;
  border: 1px solid var(--md-line-field); background: var(--md-bg-surface); color: var(--md-text); font-size: 12px; font-weight: 700;
}
.md-days button[aria-pressed="true"] { background: var(--md-accent); border-color: var(--md-accent); color: var(--md-text-on-accent); }

/* --- Befund auf Abruf: teure Prüfungen erst auf Knopfdruck ------------------- */
.md-probe { display: grid; gap: 12px; padding: 14px 16px; border-radius: var(--md-radius-md); border: 1px dashed var(--md-line-strong); background: var(--md-bg-subtle); }
.md-probe[data-state="done"] { border-style: solid; background: var(--md-bg-surface); }
.md-probe-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.md-probe-meta { font-size: 12px; color: var(--md-text-muted); }

/* ==========================================================================
   Nachtrag aus den Layouts: Muster, die mehrere Bereiche gleich gebaut haben
   ========================================================================== */

/* --- Leitspalte plus Inhalt: Sprungmarken, Schrittleiste oder Arbeitsliste links */
.md-split { display: grid; grid-template-columns: var(--_aside, 208px) minmax(0, 1fr); gap: var(--md-gap); align-items: start; }
.md-split--wide { --_aside: 300px; }
.md-split > nav:has(> .md-anchornav) { align-self: stretch; } /* sonst endet die klebende Sprungmarkenliste mit ihrer eigenen Höhe */
.md-split-main { display: grid; gap: var(--md-gap); min-width: 0; align-content: start; }
.md-split-main > [id] { scroll-margin-top: calc(var(--md-topbar-h) + var(--md-space-4)); }
.md-sticky { position: sticky; top: calc(var(--md-topbar-h) + var(--md-space-4)); }
@media (max-width: 1100px) {
  .md-split { grid-template-columns: minmax(0, 1fr); }
  .md-split > nav:has(> .md-anchornav) { align-self: start; }
  .md-split .md-anchornav, .md-split .md-sticky { position: static; }
}

/* --- Betragsübersicht: netto, Umsatzsteuer, brutto (Aufladung, Gutschrift) -- */
.md-sum { display: grid; gap: var(--md-space-1-5); margin: 0; padding: var(--md-space-3) var(--md-space-4); background: var(--md-bg-subtle); border: 1px solid var(--md-line-soft); border-radius: var(--md-radius-md); font-variant-numeric: tabular-nums; }
.md-sum > div { display: flex; justify-content: space-between; gap: var(--md-space-4); }
.md-sum dt { color: var(--md-text-muted); }
.md-sum dd { margin: 0; color: var(--md-text-strong); font-weight: 500; }
.md-sum .is-total { margin-top: var(--md-space-1); padding-top: var(--md-space-2); border-top: 1px solid var(--md-line); }
.md-sum .is-total dt, .md-sum .is-total dd { font-weight: 700; color: var(--md-text-strong); }

/* --- Liste mit Symbol je Zeile: Folgen einer Entscheidung, Nutzen, Kontaktwege */
.md-iconlist { display: grid; gap: var(--md-space-2); margin: 0; padding: 0; list-style: none; font-size: var(--md-fs-small); }
.md-iconlist li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; }
.md-iconlist .md-icon { width: 16px; height: 16px; margin-top: 2px; color: var(--md-icon); }
.md-iconlist--accent .md-icon { color: var(--md-accent); }

/* --- Hinterlegte Fläche in einer Karte: Unterformular, Zeitfenster, Vorschau - */
.md-panel { display: grid; gap: var(--md-space-3); padding: var(--md-space-4); border-radius: var(--md-radius-md); background: var(--md-bg-subtle); border: 1px solid var(--md-line-soft); }

/* --- Blatt von unten: auf dem Telefon statt eines Dialogs ---------------------- */
.md-overlay--sheet { padding: 0; align-items: end; }
.md-modal--sheet { width: 100%; max-height: calc(100dvh - var(--md-space-6)); border-radius: var(--md-radius-dialog) var(--md-radius-dialog) 0 0; }
.md-modal--sheet .md-modal-body { padding-block: var(--md-space-3); }

/* --- Zwei Spalten; --eq zieht Karten auf gleiche Höhe, der Kartenfuß sitzt unten */
.md-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--md-gap); align-items: start; }
.md-cols--eq { align-items: stretch; }
.md-cols--eq > .md-card { display: flex; flex-direction: column; }
.md-cols--eq > .md-card > .md-card-foot { margin-top: auto; }
@media (max-width: 860px) { .md-cols { grid-template-columns: minmax(0, 1fr); } }