/* sd-solutions.css — Wissen-Tab, View „Lösungen" (Lösungsdokumentation).
   GroupedList pro Kunde → Solution-Karten → Versions-Timeline → Doku-Browser.
   Self-scoped über .sd-solutions (Host-Klasse im s-wissen.html-Panel).

   Fallstrick: der globale .app-scope-Button-Reset plättet eigene Buttons —
   alle Aktions-Buttons nutzen deshalb die .btn-Primitives; hier stehen nur
   Zusatzmaße (.sd-btn-mini). */

.sd-solutions { padding: var(--space-4) 0 var(--space-8); }

/* ── Cockpit-Toolbar (Suche + Status-Filter) ───────────────────────────── */
.sd-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}
.sd-tb-search {
  flex: 1 1 280px; min-width: 0; display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-3); height: 38px;
  background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.sd-tb-search:focus-within { border-color: var(--brand-default); }
.sd-tb-search .ui-ico img { width: 16px; height: 16px; opacity: .5; }
.sd-tb-input { flex: 1 1 auto; min-width: 0; border: none; background: none; outline: none; font-size: var(--font-size-sm); color: var(--color-text); }
.sd-tb-filter { display: inline-flex; flex-wrap: wrap; gap: 4px; }
/* .app-scope-Prefix: schlägt den globalen Button-Reset (.app-scope button,
   0-1-1: border/background/padding genullt) — sonst kollabieren die Chips. */
.app-scope .sd-tb-chip {
  display: inline-flex; align-items: center;
  padding: 0 var(--space-3); height: 30px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-border); background: var(--color-bg-surface);
  font-size: var(--font-size-xs); font-weight: 600; color: var(--color-text-secondary); cursor: pointer;
  transition: background var(--motion-fast, .12s) ease, border-color var(--motion-fast, .12s) ease, color var(--motion-fast, .12s) ease;
}
.app-scope .sd-tb-chip:hover { background: var(--color-bg-subtle); }
.app-scope .sd-tb-chip.is-active { background: var(--brand-default); border-color: transparent; color: #fff; }

/* Die (für die Lösungen-View leer bleibende) Artikel-Toolbar auf Desktop
   ausblenden — der ViewSwitcher sitzt dort im Page-Header, die Zone wäre sonst
   ein leerer grauer Balken. Mobil bleibt sie (dort trägt sie den ViewSwitcher). */
@media (min-width: 600px) {
  .app-scope .app-toolbar.wissen-toolbar-sd { display: none; }
}

/* ── Karte ─────────────────────────────────────────────────────────────── */

.sd-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}
.sd-card:hover { box-shadow: var(--shadow-4); border-color: var(--color-border-hover); }
.sd-card-offen { box-shadow: var(--shadow-4); }

/* .sd-card .sd-head: Spezifität 0-2-0 — der globale .app-scope-Button-Reset
   (0-1-1) würde das Padding des <button> sonst wegstrippen (Icon/Chevron
   klebten am Kartenrand). */
.sd-card .sd-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.sd-card .sd-head-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--radius-md);
  background: var(--brand-soft, var(--status-info-bg));
}
.sd-card .sd-head-ico img { width: 20px; height: 20px; }
.sd-head-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sd-name {
  font-weight: var(--fw-semibold, 600);
  font-size: var(--font-size-md);
  color: var(--color-text);
  overflow-wrap: anywhere;
}
/* Sub-Zeile: dezente Icons je Info + Punkt-Trenner statt Wort-Wüste; der
   Schemaname zuerst und monospace (technischer Identifier, den Consultants zitieren). */
.sd-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-2); font-size: var(--font-size-xs); color: var(--color-text-muted); }
.sd-sub > span { display: inline-flex; align-items: center; gap: 4px; }
.sd-sub > span:not(:first-child)::before { content: '\00b7'; margin-right: var(--space-2); color: var(--color-text-disabled, var(--color-border-strong)); }
.sd-sub .ui-ico img { width: 13px; height: 13px; opacity: .6; }
.sd-sub-mono { font-family: var(--font-mono, monospace); color: var(--color-text-secondary); font-weight: 600; }
.sd-head-chips { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: var(--space-1); justify-content: flex-end; align-items: center; }
.sd-caret { flex: 0 0 auto; display: inline-flex; transition: transform var(--motion-fast) var(--ease-standard); opacity: .55; }
.sd-caret-offen { transform: rotate(180deg); }

/* ── Chips / Badges ────────────────────────────────────────────────────── */

.sd-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 500;
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  white-space: nowrap;
}
.sd-chip .ui-ico img { width: 14px; height: 14px; }
.sd-chip-prod  { background: var(--status-success-bg); color: var(--status-success-fg); border-color: transparent; }
.sd-chip-drift { background: var(--status-info-bg); color: var(--status-info-fg); border-color: transparent; }
.sd-chip-leer  { font-style: italic; }
.sd-chip-ignoriert { background: var(--color-bg-subtle); color: var(--color-text-muted); }
.sd-card-ignoriert { opacity: .62; }
.sd-card-ignoriert:hover { opacity: 1; }

.sd-health-ok      { background: var(--status-success-bg); color: var(--status-success-fg); border-color: transparent; }
.sd-health-idle    { background: var(--color-bg-subtle); }
.sd-health-stale   { background: var(--color-warning-bg); color: var(--color-warning-fg); border-color: transparent; }
.sd-health-pending { background: var(--status-info-bg); color: var(--status-info-fg); border-color: transparent; }
.sd-health-none    { color: var(--color-text-muted); }

.sd-stage-prod { background: var(--status-success-bg); color: var(--status-success-fg); border-color: transparent; }
.sd-stage-test { background: var(--status-info-bg); color: var(--status-info-fg); border-color: transparent; }
.sd-stage-dev  { background: var(--color-bg-subtle); }
.sd-stage-unbekannt { background: var(--color-bg-subtle); }

/* ── Feld-360° (Berührungen pro Feld) + Impact-Zugriffs-Filter ─────────── */

.sd-t360 { margin-top: var(--space-1); }
/* Zusammenfassung = klar klickbare Zeile (Klartext-Satz links, „Details ▾"
   rechts) — die tote-Badge-Optik war das Discoverability-Problem. */
.sd-t360 > summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  list-style: none;
  transition: background var(--motion-fast, .12s) ease, border-color var(--motion-fast, .12s) ease;
}
.sd-t360 > summary::-webkit-details-marker { display: none; }
.sd-t360 > summary:hover { background: var(--color-bg-subtle); border-color: var(--brand-default, var(--color-text-muted)); }
.sd-t360-satz { flex: 1 1 auto; min-width: 0; line-height: 1.4; }
.sd-t360-satz b { font-weight: 600; }
.sd-t360-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--brand-default, var(--color-text-secondary));
}
.sd-t360-caret { transition: transform var(--motion-fast, .12s) ease; }
.sd-t360[open] > summary .sd-t360-caret { transform: rotate(180deg); }
.sd-t360[open] > summary { margin-bottom: var(--space-2); }

.sd-t360-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 600;
  white-space: nowrap;
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
}
.sd-t360-trigger  { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.sd-t360-schreibt { background: var(--status-success-bg); color: var(--status-success-fg); }
.sd-t360-liest    { background: var(--status-info-bg); color: var(--status-info-fg); }
.sd-t360-system,
.sd-t360-unklar   { color: var(--color-text-muted); }

.sd-t360-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}
.sd-t360-liste li { line-height: 1.45; }

/* Quellen-Gruppe = eigenständige Karte mit farbigem Akzent-Balken links
   (grün schreibt · blau liest · amber Trigger). Kein Grau-in-Grau mehr. */
.sd-t360-grp {
  position: relative;
  padding: var(--space-2) var(--space-3);
  padding-left: var(--space-4);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.sd-t360-grp::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: var(--color-border);
}
.sd-acc-schreibt::before { background: var(--status-success-fg); }
.sd-acc-liest::before    { background: var(--status-info-fg); }
.sd-acc-trigger::before  { background: var(--status-warning-fg); }
.sd-t360-grp-kopf {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}
.sd-t360-grp-kopf strong { font-weight: 600; }
.sd-t360-grp-kopf .sd-mono { color: var(--color-text-muted); font-size: var(--font-size-xs); }
/* Klickbarer Flow-Name → Drilldown in den Flows-Tab. */
.sd-t360-flowlink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  color: var(--brand-default);
  text-align: left;
}
.sd-t360-flowlink:hover { text-decoration: underline; }
.sd-t360-flowlink .ui-ico img { width: 13px; height: 13px; opacity: .7; }
.sd-t360-zeile {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: var(--space-1) 0 0;
  line-height: 1.5;
}
.sd-t360-zeile b { color: var(--color-text); font-weight: 600; }
.sd-t360-k { color: var(--color-text-muted); font-weight: 600; margin-right: 6px; }
.sd-t360-inaktiv { opacity: .6; }
.sd-t360-mehr { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: 600; }

/* Backup-/inaktiv-Sammler unter den aktiven Quellen. */
.sd-t360-alt { margin-top: var(--space-2); }
.sd-t360-alt > summary {
  cursor: pointer;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.sd-t360-alt[open] > summary { margin-bottom: var(--space-1); }

/* Formular-Skripte eingeklappt (statt Textwand). */
.sd-scripts-det > summary { cursor: pointer; }
.sd-scripts-zeile { font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-top: var(--space-1); }

.sd-impact-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.sd-tabelle td .sd-crud { margin-left: var(--space-2); }

/* ── Detail (Aktionen, Pairing, Timeline) ──────────────────────────────── */

.sd-detail {
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-bg);
}
.sd-detail-laden { color: var(--color-text-muted); font-size: var(--font-size-sm); padding: var(--space-2) 0; }
.sd-leer { color: var(--color-text-muted); font-size: var(--font-size-sm); margin: 0; }
/* „Abgelöst"-Sammelgruppe: eingeklappt, Kopf klickbar, Chevron dreht. */
.sd-abgeloest-grp .gl-group-header { cursor: pointer; }
.sd-abgeloest-grp.sd-collapsed .gl-group-cards { display: none; }
.sd-abgeloest-chevron { display: inline-flex; align-items: center; transition: transform var(--dur-fast, 120ms) var(--ease-standard, ease); opacity: .6; }
.sd-abgeloest-grp.sd-collapsed .sd-abgeloest-chevron { transform: rotate(-90deg); }
.sd-abgeloest-hint { margin-left: auto; font-size: var(--font-size-xs); color: var(--color-text-muted); font-style: italic; }

/* Teil-Parsing-Hinweis-Banner (snapshot.warnings) — fluide, kein fixes Maß. */
.sd-warnbanner { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--border-radius-medium); background: var(--color-warning-bg); color: var(--color-warning-fg); font-size: var(--font-size-sm); }
.sd-warnbanner .ui-ico { flex: 0 0 auto; }
.sd-warnbanner-txt ul { margin: var(--space-1) 0 0; padding-left: var(--space-4); }
.sd-warnbanner-txt li { margin: 2px 0; word-break: break-word; }

.sd-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sd-btn-mini { font-size: 12px; padding: 2px var(--space-2); }
.sd-btn-aktiv { border-color: var(--lod-darkblue-300); color: var(--lod-darkblue); }

.sd-pairing-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.sd-pairing-zeile .ui-ico img { width: 14px; height: 14px; opacity: .6; }
.sd-code-details { display: inline-flex; }
.sd-code-details summary {
  cursor: pointer;
  list-style: none;
  color: var(--color-text-secondary);
  text-decoration: underline dotted;
}
.sd-code-details summary::-webkit-details-marker { display: none; }
.sd-code-details[open] summary { display: none; }
.sd-code-wert { display: inline-flex; align-items: center; gap: var(--space-2); }
.sd-code-wert code {
  font-weight: 600;
  letter-spacing: 2px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle);
  color: var(--color-text);
  user-select: all;
}

.sd-gesamt-btn { margin-left: auto; }

/* Timeline */
.sd-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.sd-timeline::before {
  content: '';
  position: absolute;
  left: 7px; top: 10px; bottom: 10px;
  width: 2px;
  background: var(--color-border);
}
.sd-tl-item { position: relative; padding: var(--space-1) 0 var(--space-1) var(--space-6); }
.sd-tl-dot {
  position: absolute;
  left: 0; top: 14px;
  width: 16px; height: 16px;
  border-radius: var(--radius-circular, 50%);
  border: 3px solid var(--color-bg-surface);
  background: var(--color-border-strong);
  box-shadow: 0 0 0 1px var(--color-border);
}
.sd-stage-dot-prod { background: var(--status-success-default, var(--status-success-fg)); }
.sd-stage-dot-test { background: var(--status-info-default, var(--status-info-fg)); }
.sd-tl-neueste .sd-tl-body { background: var(--color-bg-surface); border-color: var(--color-border-hover); }
.sd-tl-body {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}
.sd-tl-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.sd-tl-zeit { margin-left: auto; font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; }
.sd-quelle { font-size: var(--font-size-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .5px; }
.sd-redeploy { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.sd-tl-kpis { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.sd-kpi { font-size: var(--font-size-xs); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.sd-kpi + .sd-kpi::before { content: '·'; margin-right: var(--space-2); color: var(--color-text-muted); }
.sd-tl-kpis .sd-btn-mini { margin-left: auto; }

/* ── Doku-Browser ──────────────────────────────────────────────────────── */

.sd-browser {
  border: 1px solid var(--color-border-hover);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  overflow: hidden;
}
.sd-browser-kopf {
  display: flex;
  flex-wrap: wrap;
  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);
}
.sd-browser-titel { display: inline-flex; align-items: center; gap: var(--space-1-5); font-weight: 600; font-size: var(--font-size-sm); }
/* Der ViewSwitcher (flex-shrink:0, nowrap-Tabs) darf die Kopfzeile NICHT nach
   rechts raussprengen: schrumpfbar machen (min-width:0) und bei echtem Platzmangel
   in sich horizontal scrollen statt den Drawer zu überlaufen. */
.sd-browser-vs { display: inline-flex; min-width: 0; max-width: 100%; overflow-x: auto; }
.sd-doku-suche {
  flex: 1 1 200px;
  min-width: 0;              /* darf schrumpfen statt zu überlaufen (Flex-Default auto = Inhaltsbreite) */
  max-width: 100%;
  box-sizing: border-box;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  font-size: var(--font-size-sm);
}
.sd-browser-inhalt { padding: var(--space-3); max-height: 560px; overflow: auto; }

/* Entitäten-Akkordeon */
.sd-ent { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-2); background: var(--color-bg-surface); }
.sd-ent > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  list-style: none;
}
.sd-ent > summary::-webkit-details-marker { display: none; }
.sd-ent > summary::before { content: '▸'; color: var(--color-text-muted); align-self: center; }
.sd-ent[open] > summary::before { content: '▾'; }
.sd-ent > summary:hover { background: var(--color-bg-subtle); }
.sd-ent-name { font-weight: 600; font-size: var(--font-size-md); }
.sd-ent-kopf { align-items: center !important; }
.sd-ent-titel { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.sd-ent-log { font-size: 12px; }
.sd-ent-rechts { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.sd-ent-zahlen { font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; }

/* ── Feld-Liste (Premium-Ersatz der gedrängten Tabelle) ─────────────────── */
.sd-feld-liste { border-top: 1px solid var(--color-border); }
/* Progressive Feld-Karte: <details> — Kern in der Summary, Rest im Body. */
.sd-feld { border-bottom: 1px solid var(--color-border-subtle); }
.sd-feld:last-child { border-bottom: 0; }
.sd-feld-kopf {
  display: flex; align-items: center; gap: var(--space-2) var(--space-3);
  flex-wrap: wrap; padding: var(--space-2) var(--space-3);
  cursor: pointer; list-style: none; min-width: 0;
}
.sd-feld-kopf::-webkit-details-marker { display: none; }
.sd-feld-kopf:hover { background: var(--color-bg-subtle); }
/* flex-basis (kein min-width!) gibt der Titelspalte eine konstante Breite →
   die Typ-Chips fluchten in einer Spalte; schrumpft frei auf schmalen Breiten. */
.sd-feld-titel { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 0 1 20rem; }
.sd-feld-name { font-weight: 600; font-size: var(--font-size-sm); color: var(--color-text); }
.sd-feld-log { font-size: 12px; }
.sd-feld-typ { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; flex: 0 0 auto; }
/* Impact-Einzeiler (der Kern der Aussage) — schiebt sich rechts an, Caret ganz rechts. */
.sd-feld-impakt {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  min-width: 0; font-size: var(--font-size-xs); line-height: 1.35;
  padding: 2px var(--space-2); border-radius: var(--radius-pill);
}
.sd-feld-impakt .ui-ico img { width: 13px; height: 13px; flex: 0 0 auto; }
.sd-feld-impakt .sd-fi-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-feld-impakt .sd-fi-txt b { font-weight: 700; }
.sd-fi--schreibt { background: var(--status-success-bg); color: var(--status-success-fg); }
.sd-fi--liest    { background: var(--status-info-bg);    color: var(--status-info-fg); }
.sd-fi--trigger  { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.sd-fi--system   { background: var(--color-bg-subtle);   color: var(--color-text-secondary); }
.sd-fi--keine    { color: var(--color-text-muted); font-style: italic; }
.sd-feld-caret { flex: 0 0 auto; margin-left: auto; color: var(--color-text-muted); transition: transform var(--motion-fast, .12s) ease; }
.sd-feld[open] > .sd-feld-kopf .sd-feld-caret { transform: rotate(180deg); }
.sd-feld[open] > .sd-feld-kopf { background: var(--color-bg-subtle); }
/* Verwendungs-Chips (Formulare/Views) im aufgeklappten Body. */
.sd-verw-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: var(--space-1); }
.sd-verw-chip {
  display: inline-flex; padding: 1px var(--space-2); border-radius: var(--radius-sm);
  background: var(--color-bg-subtle); border: 1px solid var(--color-border);
  font-size: var(--font-size-xs); color: var(--color-text-secondary);
}
.sd-verw-mehr { align-self: center; font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: 600; }
.sd-feld-impact-detail:empty { display: none; }
/* Typ-Chip: Farb-/Icon-Familie nach Datentyp — scanbar statt grauer Einheitsbrei. */
.sd-typ {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.sd-typ .ui-ico img { width: 12px; height: 12px; }
.sd-typ--lookup { background: var(--kat-blue-bg);   color: var(--kat-blue-fg); }
.sd-typ--choice { background: var(--kat-purple-bg); color: var(--kat-purple-fg); }
.sd-typ--bool   { background: var(--kat-green-bg);  color: var(--kat-green-fg); }
.sd-typ--money  { background: var(--kat-yellow-bg); color: var(--kat-yellow-fg); }
.sd-typ--date   { background: var(--kat-orange-bg); color: var(--kat-orange-fg); }
.sd-typ--number, .sd-typ--text, .sd-typ--other { background: var(--kat-gray-bg); color: var(--kat-gray-fg); }
/* Berechnet/Rollup-Herkunft als eigener, dezent-akzentuierter Merker. */
.sd-typ-quelle {
  display: inline-flex; align-items: center;
  padding: 1px var(--space-2); border-radius: var(--radius-sm);
  background: var(--color-brand-bg-subtle); color: var(--brand-default);
  font-size: 11px; font-weight: 600;
}
.sd-feld-rest { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-1) var(--space-3) var(--space-3); }
.sd-feld-beschr { font-size: var(--font-size-sm); color: var(--color-text); line-height: 1.5; }
/* Wertebereich: OptionSet-Pills + Lookup-Relation statt „1 = · 2 =". */
.sd-opt { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.sd-opt-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 8px 1px 3px; border-radius: 999px;
  background: var(--color-bg-subtle); border: 1px solid var(--color-border);
  font-size: var(--font-size-xs); color: var(--color-text);
}
.sd-opt-v {
  font-family: var(--font-mono, ui-monospace, monospace); font-weight: 700; font-size: 10px;
  background: var(--kat-purple-bg); color: var(--kat-purple-fg);
  border-radius: 999px; padding: 1px 6px; font-variant-numeric: tabular-nums;
}
.sd-opt-mehr, .sd-opt-sys, .sd-opt-rel {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--font-size-xs); color: var(--color-text-muted);
}
.sd-opt-rel b, .sd-opt-sys b { color: var(--color-text); font-weight: 600; }
.sd-opt-mehr { font-weight: 600; }
.sd-opt-rel .ui-ico img, .sd-opt-sys .ui-ico img { width: 13px; height: 13px; opacity: .7; }
.sd-feld-verw { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--font-size-xs); color: var(--color-text-secondary); line-height: 1.5; flex-wrap: wrap; }
.sd-feld-verw-lbl {
  display: inline-flex; align-items: center; gap: 4px;
  flex: 0 0 auto; color: var(--color-text-muted); font-weight: 600;
}
.sd-feld-verw-lbl .ui-ico img { width: 13px; height: 13px; opacity: .7; }
.sd-feld-rest .sd-verwendung-leer { font-style: italic; color: var(--color-warning-fg); }

@container drawer (max-width: 720px) {
  .sd-feld { grid-template-columns: 1fr; gap: var(--space-2); }
}

.sd-mono { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.sd-pflicht {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--font-size-xs); font-weight: 600;
  color: var(--status-warning-fg); background: var(--status-warning-bg);
  padding: 0 var(--space-2); border-radius: var(--radius-pill);
}
.sd-pflicht .ui-ico img { width: 12px; height: 12px; }
.sd-sicher {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--font-size-xs); font-weight: 600;
  color: var(--status-info-fg);
  background: var(--status-info-bg);
  padding: 0 var(--space-2); border-radius: var(--radius-pill);
}
.sd-sicher .ui-ico img { width: 12px; height: 12px; }
.sd-beleg { font-size: var(--font-size-xs); color: var(--color-text-muted); }

.sd-tabelle-wrap { overflow-x: auto; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md, 8px); }
.sd-tabelle { border-collapse: collapse; width: 100%; font-size: var(--font-size-sm); }
.sd-tabelle th, .sd-tabelle td {
  text-align: left;
  padding: var(--space-1-5) var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: top;
}
.sd-tabelle tbody tr:last-child td { border-bottom: 0; }
.sd-tabelle tbody tr:nth-child(even) { background: var(--color-bg-subtle); }
.sd-tabelle tbody tr:hover { background: var(--color-bg-hover, var(--brand-bg-subtle)); }
.sd-tabelle th {
  color: var(--color-text-muted);
  font-weight: 500;
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: var(--color-bg-surface);
}
.sd-tabelle .sd-crud { font-weight: 600; letter-spacing: 1px; font-variant-numeric: tabular-nums; }

.sd-verwendung { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.sd-verwendung-leer { color: var(--color-warning-fg); }
.sd-scripts { padding: var(--space-1) var(--space-3) var(--space-2); font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.sd-scripts .ui-ico img { width: 14px; height: 14px; opacity: .6; }

/* ── Beziehungen (nach Richtung gruppierte Chips statt Mono-Wand) ───────── */
.sd-bez { padding: var(--space-1) var(--space-3) var(--space-2); }
.sd-bez-kopf { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-xs); font-weight: 700; color: var(--color-text-secondary); margin-bottom: var(--space-1); }
.sd-bez-kopf .ui-ico img { width: 14px; height: 14px; opacity: .7; }
.sd-bez-n { background: var(--color-bg-subtle); border-radius: var(--radius-pill); padding: 0 7px; font-size: 11px; font-weight: 600; color: var(--color-text-muted); }
.sd-bez-grp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: var(--space-1); }
.sd-bez-lbl { flex: 0 0 auto; min-width: 148px; font-size: 11px; font-weight: 700; color: var(--color-text-muted); }
.sd-bez-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-bez-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-bg-subtle); font-size: var(--font-size-xs); }
.sd-bez-pfeil { color: var(--color-text-muted); }
.sd-bez-ziel { font-weight: 600; color: var(--color-text); }
.sd-bez-attr { color: var(--color-text-muted); }
.sd-bez-mehr { align-self: center; font-size: 11px; font-weight: 600; color: var(--color-text-muted); }

/* ── Flows (Premium-Karten) ────────────────────────────────────────────── */
.sd-flows { display: flex; flex-direction: column; gap: var(--space-3); }
.sd-flow-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
  background: var(--color-bg-surface);
  overflow: hidden;
}
.sd-flow-inaktiv { opacity: .72; }
/* Drilldown-Ziel kurz hervorheben. */
.sd-flow-fokus { border-color: var(--brand-default); box-shadow: 0 0 0 3px var(--status-info-bg); }
.sd-flow-kopf {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  cursor: pointer;
  list-style: none;
}
.sd-flow-kopf::-webkit-details-marker { display: none; }
.sd-flow-kopf::before { content: '▸'; color: var(--color-text-muted); }
.sd-flow-card[open] .sd-flow-kopf::before { content: '▾'; }
.sd-flow-card[open] .sd-flow-kopf { border-bottom: 1px solid var(--color-border); }
.sd-flow-kopf:hover { background: var(--color-bg-subtle); }
.sd-flow-titel { font-weight: 600; font-size: var(--font-size-md); color: var(--color-text); }
.sd-flow-badges { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.sd-flow-nsteps { font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; }
.sd-flow-body { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); }
.sd-flow-beschr { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.5; margin: 0; }

/* Auslöser-Block */
.sd-fl-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-2) var(--space-3);
  background: var(--status-warning-bg);
  border-radius: var(--radius-md);
}
.sd-fl-trig-art { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--font-size-sm); color: var(--status-warning-fg); }
.sd-fl-trig-art .ui-ico img { width: 15px; height: 15px; }
.sd-fl-trig-kern { font-size: var(--font-size-sm); color: var(--color-text); }
.sd-fl-trig-filter { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); font-size: var(--font-size-xs); }
.sd-fl-trig-lbl { color: var(--color-text-muted); font-weight: 600; }
.sd-fl-filterpill {
  display: inline-flex;
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
}
.sd-fl-konn { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; font-size: var(--font-size-xs); color: var(--color-text-secondary); }

/* Schritt-Baum */
.sd-fl-baum { list-style: none; margin: 0; padding: 0; }
.sd-fl-li { padding: 0; }
.sd-fl-schritt {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-1-5) var(--space-2);
  border-radius: var(--radius-sm);
}
.sd-fl-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle);
}
.sd-fl-ico .ui-ico img { width: 14px; height: 14px; opacity: .7; }
.sd-fl-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sd-fl-name { font-weight: 500; font-size: var(--font-size-sm); color: var(--color-text); }
.sd-fl-detail { font-size: var(--font-size-xs); color: var(--color-text-secondary); overflow-wrap: anywhere; }
/* Verschachtelung: linke Führungslinie je Ebene */
.sd-fl-kinder { margin-left: 11px; padding-left: var(--space-4); border-left: 2px solid var(--color-border); }
.sd-fl-zweig {
  display: inline-block;
  margin: var(--space-1) 0 2px;
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
}
.sd-fl-zweig-ja { background: var(--status-success-bg); color: var(--status-success-fg); }
.sd-fl-zweig-sonst { background: var(--status-warning-bg); color: var(--status-warning-fg); }
/* Operation-Schritte (Datenzugriff) heben sich farblich leicht ab */
.sd-fl-typ-operation .sd-fl-ico { background: var(--status-info-bg); }
.sd-fl-typ-operation .sd-fl-ico img { opacity: .9; }

.sd-komp-titel {
  display: flex; align-items: center; gap: 7px;
  margin: var(--space-5) 0 var(--space-2); padding-left: var(--space-2); scroll-margin-top: var(--space-3);
  border-left: 3px solid var(--brand-default);
  font-size: var(--font-size-sm); color: var(--color-text); font-weight: 700;
  letter-spacing: .01em;
}
.sd-komp-titel:first-child { margin-top: var(--space-1); }
.sd-komp-titel .ui-ico img { width: 15px; height: 15px; opacity: .7; }
.sd-komp-titel-n { font-size: var(--font-size-xs); font-weight: 600; color: var(--color-text-muted); background: var(--color-bg-subtle); border-radius: var(--radius-pill); padding: 0 8px; }

/* Sprung-Navigation des Komponenten-Tabs — sticky Chip-Leiste „direkt hin". */
.sd-komp-nav {
  position: sticky; top: 0; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: var(--space-2) 0; margin-bottom: var(--space-2);
  background: var(--color-bg-body, var(--color-bg-surface));
  border-bottom: 1px solid var(--color-border);
}
.app-scope .sd-komp-navchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 var(--space-2); height: 28px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-border); background: var(--color-bg-surface);
  font-size: var(--font-size-xs); font-weight: 600; color: var(--color-text-secondary); cursor: pointer;
  transition: background var(--motion-fast, .12s) ease, border-color var(--motion-fast, .12s) ease, color var(--motion-fast, .12s) ease;
}
.app-scope .sd-komp-navchip:hover { background: var(--color-bg-subtle); border-color: var(--brand-default); color: var(--color-text); }
.sd-komp-navchip .ui-ico img { width: 14px; height: 14px; opacity: .65; }
.sd-komp-navchip-n { font-size: 11px; font-weight: 700; color: var(--color-text-muted); }

/* Änderungen (Release-Notes) */
.sd-diff-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4); padding: var(--space-3);
  background: var(--color-bg-subtle); border-radius: var(--radius-md);
}
.sd-diff-vers { display: inline-flex; align-items: center; gap: var(--space-1); }
.sd-diff-vers .ui-ico img { width: 16px; height: 16px; opacity: .55; }
.sd-diff-vpill {
  font: 600 var(--font-size-sm) / 1 var(--font-mono, monospace);
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--color-bg-surface); border: 1px solid var(--color-border); color: var(--color-text-secondary);
}
.sd-diff-vpill--neu { background: var(--brand-subtle, var(--status-info-bg)); border-color: transparent; color: var(--brand-default); font-weight: 700; }
.sd-diff-sums { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.sd-diff-sum { font-size: var(--font-size-xs); font-weight: 700; padding: 3px 10px; border-radius: var(--radius-pill); }
.sd-diff-sum--add { background: var(--status-success-bg); color: var(--status-success-fg); }
.sd-diff-sum--mod { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.sd-diff-sum--del { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.sd-diff-block { margin-bottom: var(--space-4); }
.sd-diff-block h4 {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 0 0 var(--space-2); padding-left: var(--space-2);
  border-left: 3px solid var(--brand-default); font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text);
}
.sd-diff-n { font-size: var(--font-size-xs); font-weight: 600; color: var(--color-text-muted); }
.sd-diff-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.sd-diff-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text); }
/* Klartext-Operations-Badge (Neu/Geändert/Entfernt) — konsistent mit den Chips. */
.sd-diff-b {
  flex: 0 0 auto; min-width: 68px; text-align: center;
  padding: 2px var(--space-2); border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700;
}
.sd-diff-b--add { background: var(--status-success-bg); color: var(--status-success-fg); }
.sd-diff-b--del { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.sd-diff-b--mod { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.sd-diff-txt { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }
.sd-diff-det { color: var(--color-text-secondary); }

/* ── Überblick (Consultant-Orientierung, erstes Doku-Tab) ──────────────── */
.sd-ov { display: flex; flex-direction: column; gap: var(--space-4); }
.sd-ov-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.sd-ov-titel { display: inline-flex; align-items: center; gap: var(--space-2); }
.sd-ov-name { font-size: var(--font-size-lg); font-weight: 700; color: var(--color-text); }
.sd-ov-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); }
.sd-ov-tag--managed { background: var(--status-info-bg); color: var(--status-info-fg); }
.sd-ov-tag--unmanaged { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.sd-ov-stand { font-size: var(--font-size-sm); color: var(--color-text-secondary); font-family: var(--font-mono, monospace); }
/* KPI-Kacheln: Grid wrappt selbst — kein fixer Breakpoint nötig. */
.sd-ov-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--space-3); }
.sd-ov-kpi { position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.sd-ov-kpi-ico { position: absolute; top: var(--space-3); right: var(--space-3); }
.sd-ov-kpi-ico img { width: 20px; height: 20px; opacity: .3; }
.sd-ov-kpi-zahl { font-size: 28px; font-weight: 700; line-height: 1.15; color: var(--color-text); }
.sd-ov-kpi-lbl { font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); }
.sd-ov-kpi-sub { font-size: 11px; color: var(--color-text-muted); }
.sd-ov-kpi--link { cursor: pointer; transition: border-color var(--motion-fast, .12s) ease, box-shadow var(--motion-fast, .12s) ease; }
.sd-ov-kpi--link:hover { border-color: var(--brand-default); box-shadow: var(--shadow-4, 0 4px 14px rgba(0,0,0,.08)); }
.sd-ov-kpi--link:hover .sd-ov-kpi-lbl { color: var(--brand-default); }
.sd-ov-inv { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-ov-sektion { display: flex; flex-direction: column; gap: var(--space-2); }
.sd-ov-h { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding-left: var(--space-2); border-left: 3px solid var(--brand-default); font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text); }
.sd-ov-h .ui-ico img { width: 15px; height: 15px; opacity: .7; }
.sd-ov-hinweis { font-size: var(--font-size-sm); color: var(--color-text-secondary); padding: var(--space-2) var(--space-3); background: var(--color-bg-subtle); border-radius: var(--radius-md); }
.sd-ov-diff { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3); background: var(--color-bg-subtle); border-radius: var(--radius-md); }
.sd-ov-diff .ui-ico img { width: 16px; height: 16px; opacity: .55; }
.sd-ov-diff-sums { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); }
.sd-ov-link { margin-left: auto; border: none; background: none; cursor: pointer; font-size: var(--font-size-sm); font-weight: 600; color: var(--brand-default); padding: 0; }
.sd-ov-link:hover { text-decoration: underline; }
.sd-ov-funde { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.sd-ov-fund { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: var(--font-size-sm); }
.sd-ov-fund .ui-ico img { width: 16px; height: 16px; }
.sd-ov-fund--warn { background: var(--status-warning-bg); color: var(--status-warning-fg); }
.sd-ov-fund--info { background: var(--color-bg-subtle); color: var(--color-text-secondary); }
.sd-ov-clean { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 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: 600; }
.sd-ov-clean .ui-ico img { width: 16px; height: 16px; }
.sd-ov-h-hint { margin-left: auto; font-size: 11px; font-weight: 400; color: var(--color-text-muted); }
/* Größte-Tabellen-Balken: proportional (Breite via --pct inline, Layout in CSS). */
.sd-ov-bars { display: flex; flex-direction: column; gap: 1px; }
.sd-ov-bar-row { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-1) var(--space-2); border: none; background: none; cursor: pointer; text-align: left; border-radius: var(--radius-md); }
.sd-ov-bar-row:hover { background: var(--color-bg-subtle); }
.sd-ov-bar-name { flex: 0 0 32%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-size-sm); color: var(--color-text); display: inline-flex; align-items: center; gap: 7px; }
.sd-ov-bar-name .sd-mono { color: var(--color-text-muted); }
.sd-ov-bar-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--status-success-fg); }
.sd-ov-bar-dot--leer { background: var(--color-border-strong, var(--color-border)); }
.sd-ov-bar-track { flex: 1 1 auto; height: 9px; background: var(--color-bg-subtle); border-radius: var(--radius-pill); overflow: hidden; }
.sd-ov-bar-fill { display: block; height: 100%; width: var(--pct, 0); background: var(--brand-default); border-radius: var(--radius-pill); }
.sd-ov-bar-zahl { flex: 0 0 auto; min-width: 72px; text-align: right; font-size: var(--font-size-xs); font-weight: 600; color: var(--color-text-secondary); white-space: nowrap; }

/* ── Drawer-Inhalte (LoDSdDrawer: Create + Doku-Browser) ───────────────── */

.sd-drawer-create { display: flex; flex-direction: column; gap: var(--space-4); }
.sd-create-feld { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.sd-create-feld input[type="text"] {
  padding: var(--space-1-5) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  font-size: var(--font-size-sm);
}

/* Doku-Browser im Drawer: Kopf (Tabs + Suche) sticky, Inhalt füllt den Body. */
.sd-drawer-doku { display: flex; flex-direction: column; gap: var(--space-4); min-height: 0; height: 100%; }
.sd-drawer-kopf { border: none; background: none; padding: 0; }
.sd-drawer-inhalt { max-height: none; flex: 1 1 auto; padding: 0; overflow: auto; }
/* Vollbreiten-Viewer: Inhalt bekommt großzügige Ränder + eine komfortable
   Lesebreite, damit Zeilen auf breiten Monitoren nicht endlos laufen. */
.sd-drawer-doku .sd-drawer-inhalt > * { max-width: 1600px; margin-inline: auto; }

/* Kopfleiste des Vollbreiten-Doku-Viewers (Custom-Header mit Close-X). */
.sd-doku-kopfleiste { display: flex; align-items: flex-start; gap: var(--space-3); width: 100%; }
.sd-doku-kopftitel { min-width: 0; }
/* WICHTIG: höhere Spezifität als `.app-scope .shared-drawer .drawer-close`
   (0-3-0) — sonst gewinnt dessen transparenter Geister-Button (grau auf Weiß →
   „X unsichtbar/weg"). Deshalb der volle `.app-scope .shared-drawer
   .drawer-close.sd-doku-close`-Pfad (0-4-0). */
.app-scope .shared-drawer .drawer-close.sd-doku-close {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  cursor: pointer;
  color: var(--color-text);
  transition: background var(--motion-fast, .12s) ease, border-color var(--motion-fast, .12s) ease, color var(--motion-fast, .12s) ease;
}
.app-scope .shared-drawer .drawer-close.sd-doku-close:hover { background: var(--status-danger-bg); border-color: var(--status-danger-fg); color: var(--status-danger-fg); }
.app-scope .shared-drawer .drawer-close.sd-doku-close img { width: 20px; height: 20px; }

/* Berührungen-Label + Impact-Tab-Suche */
.sd-t360-lbl { font-weight: 600; color: var(--color-text-secondary); margin-right: 2px; }

.sd-empty-hint { padding: var(--space-6) 0; }

/* ── Filterleiste (kontextabhängig: Entität / Solution / Eigenschafts-Toggles) ── */
.sd-dw-filter:empty { display: none; }
.sd-fbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) 0;
}
.sd-fbar-lbl { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: 600; }
.sd-fbar-sel {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  max-width: 260px;
}
.sd-fbar-chips { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); }

/* ── Drilldown-Pills (klickbare Entität/Feld — der verlinkte Graph) ─────── */
.sd-goto-ent-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg-surface);
  color: var(--brand-default);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  cursor: pointer;
  transition: background var(--motion-fast, .12s) ease, border-color var(--motion-fast, .12s) ease;
}
.sd-goto-ent-pill:hover { background: var(--status-info-bg); border-color: var(--brand-default); }
/* Feld-Pill ist ein <button> (Drilldown) → klickbar machen. */
button.sd-fl-filterpill { cursor: pointer; color: var(--brand-default); transition: background var(--motion-fast, .12s) ease, border-color var(--motion-fast, .12s) ease; }
button.sd-fl-filterpill:hover { background: var(--status-info-bg); border-color: var(--brand-default); }
.sd-fl-felder { display: inline-flex; flex-wrap: wrap; gap: 3px; margin-left: 2px; }

/* ── Sicherheitsrollen ─────────────────────────────────────────────────── */
.sd-rollen, .sd-sitemap, .sd-imp-baum { display: flex; flex-direction: column; gap: var(--space-2); }
.sd-rolle, .sd-sitemap, .sd-imp-ent, .sd-imp-feld, .sd-app {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
}
.sd-rolle > summary, .sd-sitemap > summary, .sd-imp-ent > summary, .sd-imp-feld > summary, .sd-app > summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  list-style: none;
}
.sd-rolle > summary::-webkit-details-marker,
.sd-sitemap > summary::-webkit-details-marker,
.sd-imp-ent > summary::-webkit-details-marker,
.sd-imp-feld > summary::-webkit-details-marker,
.sd-app > summary::-webkit-details-marker { display: none; }
.sd-rolle > summary::before, .sd-sitemap > summary::before, .sd-imp-ent > summary::before, .sd-imp-feld > summary::before, .sd-app > summary::before { content: '▸'; color: var(--color-text-muted); }
.sd-rolle[open] > summary::before, .sd-sitemap[open] > summary::before, .sd-imp-ent[open] > summary::before, .sd-imp-feld[open] > summary::before, .sd-app[open] > summary::before { content: '▾'; }
.sd-rolle > summary:hover, .sd-sitemap > summary:hover, .sd-imp-ent > summary:hover, .sd-imp-feld > summary:hover, .sd-app > summary:hover { background: var(--color-bg-subtle); }
.sd-rolle-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.sd-rolle-name .ui-ico img { width: 15px; height: 15px; opacity: .7; }
.sd-rolle-zahl, .sd-imp-ent-zahl { margin-left: auto; font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; }
.sd-imp-feld .sd-t360-liste { padding: 0 var(--space-3) var(--space-2); }
.sd-rolle-body { padding: var(--space-1) var(--space-3) var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.sd-rolle-body .sd-app-komp-det > summary { margin-top: var(--space-1); }
.sd-lvl { display: inline-flex; padding: 0 var(--space-2); border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; }
.sd-lvl-global { background: var(--status-success-bg); color: var(--status-success-fg); }
.sd-lvl-deep   { background: var(--status-info-bg); color: var(--status-info-fg); }
.sd-lvl-local  { background: var(--color-bg-subtle); color: var(--color-text-secondary); }
.sd-lvl-basic, .sd-lvl-none { color: var(--color-text-muted); }

/* ── App-Karte (Navigation + kuratierte Komponenten zusammen) ──────────── */
.sd-app-body { padding: 0 var(--space-3) var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); }
.sd-app-sec-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-xs); font-weight: 700; color: var(--color-text-secondary); margin-bottom: var(--space-1); }
.sd-app-sec-lbl .ui-ico img { width: 14px; height: 14px; opacity: .7; }
.sd-app-nav { border-left: 3px solid var(--brand-default); padding-left: var(--space-2); }
.sd-app-nav .sd-sm-area { padding: 0 0 var(--space-2); }
.sd-app-komp-det > summary { cursor: pointer; font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: 600; padding: var(--space-1) 0; list-style: none; }
.sd-app-komp-det > summary::-webkit-details-marker { display: none; }
.sd-app-komp-det > summary::before { content: '▸ '; }
.sd-app-komp-det[open] > summary::before { content: '▾ '; }
.sd-app-komp-lbl { font-size: var(--font-size-xs); font-weight: 700; color: var(--color-text-secondary); margin: var(--space-1) 0; }
.sd-app-komp { padding-top: var(--space-1); }

/* ── Prozess-Karte (Business Rule / Workflow / BPF → berührte Felder) ────── */
.sd-proc-typ { flex: 0 0 auto; }
.sd-proc-ent { font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.sd-proc-status { display: inline-flex; align-items: center; padding: 0 var(--space-2); border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; }
.sd-proc-an  { background: var(--status-success-bg); color: var(--status-success-fg); }
.sd-proc-aus { background: var(--kat-gray-bg); color: var(--kat-gray-fg); }
.sd-proc-felder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.sd-proc-felder li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

/* ── SiteMap-Baum ──────────────────────────────────────────────────────── */
.sd-sm-area { padding: 0 var(--space-3) var(--space-2); }
.sd-sm-area-t { font-weight: 600; font-size: var(--font-size-sm); margin: var(--space-2) 0 var(--space-1); }
.sd-sm-group { margin-left: var(--space-3); padding-left: var(--space-3); border-left: 2px solid var(--color-border); margin-bottom: var(--space-2); }
.sd-sm-group-t { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: 600; margin-bottom: var(--space-1); }
.sd-sm-items { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.sd-sm-url { font-size: 11px; color: var(--color-text-muted); padding: 1px var(--space-2); }

/* ── Feld-Impact als Entität→Feld-Baum ─────────────────────────────────── */
.sd-imp-hint { font-size: var(--font-size-xs); color: var(--color-text-muted); margin: 0 0 var(--space-2); }
.sd-imp-ent-name, .sd-imp-feldname { font-weight: 600; }
.sd-imp-ent-titel { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.sd-imp-feld-alle { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--color-text-secondary); }
.sd-imp-feld-alle .ui-ico img { width: 13px; height: 13px; opacity: .7; }
.sd-imp-feld { border: 0; border-top: 1px solid var(--color-border-subtle); border-radius: 0; margin: 0 var(--space-3); }
.sd-imp-ent[open] > summary { border-bottom: 1px solid var(--color-border); }
.sd-imp-liste { background: var(--color-bg-subtle); border-radius: var(--radius-md); margin-bottom: var(--space-2); }

/* ── Artikel-Toolbar im Lösungen-View verbergen ────────────────────────────
   Suche/Filter/Sort/Counter gehören zum Artikel-View. Der left-Slot bleibt
   sichtbar (auf Mobile wandert der ViewSwitcher dort hinein). */
.app-scope .app-toolbar.wissen-toolbar-sd .app-toolbar-center,
.app-scope .app-toolbar.wissen-toolbar-sd .app-toolbar-right { display: none !important; }
.app-scope .app-toolbar.wissen-toolbar-sd .app-toolbar-left > :not(.view-switcher) { display: none !important; }

/* ── Responsive ────────────────────────────────────────────────────────── */

/* Notebook 1000–1399px: unverändert (Karten sind volle Listenbreite). */

/* Notebook 1000–1399px: Browser-Suche darf schmaler werden. */
@media (max-width: 1399px) {
  .sd-doku-suche { min-width: 120px; }
}

/* Tablet 600–999px: Chips unter den Titel, Timeline kompakter. */
@media (max-width: 999px) {
  .sd-head { flex-wrap: wrap; }
  .sd-head-chips { justify-content: flex-start; width: 100%; order: 4; }
  .sd-create-felder { grid-template-columns: 1fr; }
  .sd-browser-inhalt { max-height: 460px; }
  .sd-doku-suche { min-width: 0; width: 100%; }
}

/* Mobile <600px: Icon-Kachel raus, engere Innenabstände. */
@media (max-width: 599px) {
  .sd-card .sd-head-ico { display: none; }
  .sd-head, .sd-detail { padding-left: var(--space-3); padding-right: var(--space-3); }
  .sd-tl-zeit { margin-left: 0; width: 100%; }
  .sd-tabelle th, .sd-tabelle td { padding: var(--space-1) 4px; }
}