/* ============================================================================
   TGV DESIGN-SYSTEM — KOMPONENTEN-BIBLIOTHEK  (PLAT#06, SSOT)
   ----------------------------------------------------------------------------
   Wiederverwendbare HTML/CSS-Snippets — geteilt über Chat · Cockpit · Mobile.
   Benutzt AUSSCHLIESSLICH die semantische Token-Schicht aus tokens.css.
   Kein React. Plain CSS-Klassen → in jedem Cockpit per <link> einbindbar.

   Inventar:
     · Grund-Layout    .ds-card / .ds-row / .ds-between / .ds-stack
     · Typo            .ds-h1/h2/h3 .ds-muted .ds-hint
     · Buttons         .ds-btn  (--primary/--confirm/--secondary/--ghost/--danger)
     · Chips           .ds-chip
     · Status-Badges   3 GETRENNTE ACHSEN: .ds-badge--ent-* / --cls-* / --conf-*
     · Scope-Breadcrumb.ds-scope
     · Beleg-/Doc-Karte.ds-doc
     · Approval-Karte  .ds-approval
     · Tabelle+Zeilen-Aktion .ds-table
     · Quick-Action-Chips .ds-quick
     · Empty/Onboarding .ds-empty
     · Kontext-Tint    .ds-ctx-surface  (Wayfinding-Flächen-Tint je Sektion)
   Konvention: PRIMÄRE Aktion steht RECHTS in Karten; Bestätigen|Ablehnen-Paar.
   Alle Snippets HTML-Beispiele stehen im showcase.html + STYLE_GUIDE.md.
   ============================================================================ */

/* Box-Modell: ALLE DS-Komponenten rechnen Padding + Border in die Breite ein.
   Verhindert Overflow/Überlappung in eingeschränkten Containern (Grid-/Flex-Zellen) —
   z.B. .ds-modal (width:100% + padding) lief sonst aus der Zelle. :where() = Spezifität 0. */
:where([class^="ds-"], [class*=" ds-"]){ box-sizing:border-box; }

/* ───────────────────────────── GRUND-LAYOUT ─────────────────────────────── */
.ds-card{
  background:var(--surface); border:var(--bd-width) solid var(--border);
  border-radius:var(--radius-lg); padding:var(--sp-3) var(--sp-4);
  box-shadow:var(--shadow-card); color:var(--text);
}
.ds-row     { display:flex; align-items:center; gap:var(--sp-3); }
.ds-between { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--sp-3); }
.ds-stack   { display:flex; flex-direction:column; gap:var(--sp-2); }
.ds-spread  { flex:1; }                    /* Schub-Element: drängt Folgendes nach rechts */

/* ───────────────────────────────── ICON ──────────────────────────────────
   Icon-Konvention: EINE Outline-Familie = Tabler Icons (24×24, currentColor).
   Einbindung als Inline-SVG/<use> (HTML) bzw. @tabler/icons-react (React).
   Größe = 1.15em → skaliert mit der Schrift; erbt die Textfarbe (→ folgt Marke/Token).
   Icon-only: aria-label am Element; dekorativ: aria-hidden am <svg>. */
.ds-icon{ display:inline-block; width:1.15em; height:1.15em; vertical-align:-0.15em; flex:none; }
.ds-icon--lg{ width:1.5em; height:1.5em; }

/* ───────────────────────────────── TYPO ─────────────────────────────────── */
.ds-h1{ font:var(--fw-bold) var(--fs-h1)/1.25 var(--font-sans); margin:0; color:var(--text); }
.ds-h2{ font:var(--fw-bold) var(--fs-h2)/1.3  var(--font-sans); margin:0; color:var(--text); }
.ds-h3{ font:var(--fw-medium) var(--fs-h3)/1.35 var(--font-sans); margin:0; color:var(--text); }
.ds-muted{ color:var(--text-muted); }
.ds-hint { color:var(--text-hint); font-size:var(--fs-small); }
.ds-amt  { font-weight:var(--fw-bold); font-variant-numeric:tabular-nums; text-align:right; }

/* ──────────────────────────────── BUTTONS ────────────────────────────────
   Default = sekundär (outline). Genau EINE primäre Aktion pro Karte, rechts. */
.ds-btn{
  font:var(--fw-medium) var(--fs-small)/1 var(--font-sans);
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:var(--radius-md);
  border:1px solid var(--border-strong); background:var(--surface); color:var(--text);
  cursor:pointer; white-space:nowrap; transition:background .12s, border-color .12s, transform .04s;
}
.ds-btn[hidden]{ display:none; }   /* hidden-Attribut schlägt display:inline-flex (P2-Fix: „↩ Zurück"-/„Panel öffnen"-Buttons waren trotz hidden sichtbar) */
.ds-btn:hover{ background:var(--surface-2); }
.ds-btn:active{ transform:scale(.98); }
.ds-btn:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.ds-btn:disabled{ opacity:.5; cursor:not-allowed; }

.ds-btn--primary{ border:1.5px solid var(--c-action);  color:var(--c-action);  }
.ds-btn--primary:hover{ background:var(--c-action-bg); }
.ds-btn--confirm{ border:1.5px solid var(--c-confirm); color:var(--c-confirm); }
.ds-btn--confirm:hover{ background:var(--c-confirm-bg); }
.ds-btn--danger { border:1.5px solid var(--c-danger);  color:var(--c-danger);  }
.ds-btn--danger:hover{ background:var(--c-danger-bg); }
.ds-btn--secondary{ /* = default outline, explizit benennbar */ }
.ds-btn--ghost{ border:none; background:none; color:var(--c-action); padding:6px 8px; }
.ds-btn--ghost:hover{ background:var(--c-action-bg); }

/* gefüllte Variante (selten — Haupt-CTA in leeren/Onboarding-Zuständen) */
.ds-btn--solid{ border:1.5px solid var(--c-action); background:var(--c-action); color:var(--surface); }
.ds-btn--solid:hover{ filter:brightness(1.08); background:var(--c-action); }

.ds-btn--sm{ padding:6px 10px; }
.ds-btn--block{ width:100%; justify-content:center; }

/* ───────────────────────────────── CHIP ──────────────────────────────────
   Neutraler Label-Träger (Meta, Datum, Kategorie). Für Status → Badge nehmen. */
.ds-chip{
  display:inline-flex; align-items:center; gap:5px;
  font-size:var(--fs-micro); line-height:1.6; padding:3px 9px;
  border-radius:var(--radius-md); white-space:nowrap;
  background:var(--surface-2); color:var(--text-muted);
}

/* ════════════════════════════════ STATUS-BADGES ══════════════════════════════
   DREI ORTHOGONALE ACHSEN — bewusst getrennte Klassen-Präfixe, damit sie NIE
   wieder vermischt werden (rka_v2 nutzte ci/cii/civ für Entität UND Sektion UND
   Status — genau das wird hier aufgelöst):
     A) Entität     .ds-badge--ent-{c3|c4|privat}     (wer/welche Firma)
     B) Einstufung  .ds-badge--cls-{public|internal|confidential|strict}
     C) Konfidenz   .ds-badge--conf-{high|medium|low}  + .is-locked (🔒)
   Ein Doc trägt typ. EINEN Badge je Achse — sie schließen sich NICHT aus. */
.ds-badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:var(--fs-micro); font-weight:var(--fw-medium); line-height:1.6;
  padding:3px 9px; border-radius:var(--radius-md); white-space:nowrap;
  border:1px solid transparent;
}
.ds-badge .ds-badge__dot{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }

/* A — Entität */
.ds-badge--ent-c3    { color:var(--ent-c3);     background:var(--ent-c3-bg);     }
.ds-badge--ent-c4    { color:var(--ent-c4);     background:var(--ent-c4-bg);     }
.ds-badge--ent-privat{ color:var(--ent-privat); background:var(--ent-privat-bg); }

/* B — Einstufung / Confidentiality (eskalierend; strict trägt Rahmen + Schloss) */
.ds-badge--cls-public      { color:var(--cls-public);       background:var(--cls-public-bg);       }
.ds-badge--cls-internal    { color:var(--cls-internal);     background:var(--cls-internal-bg);     }
.ds-badge--cls-confidential{ color:var(--cls-confidential); background:var(--cls-confidential-bg); }
.ds-badge--cls-strict      { color:var(--cls-strict);       background:var(--cls-strict-bg); border-color:var(--cls-strict); }

/* C — Konfidenz (wie sicher); .is-locked = vom User/Korroboration bestätigt → 🔒 */
.ds-badge--conf-high  { color:var(--conf-high);   background:var(--conf-high-bg);   }
.ds-badge--conf-medium{ color:var(--conf-medium); background:var(--conf-medium-bg); }
.ds-badge--conf-low   { color:var(--conf-low);    background:var(--conf-low-bg);    }
.ds-badge.is-locked   { font-weight:var(--fw-bold); }
.ds-badge.is-locked .ds-badge__lock{ color:var(--conf-locked); }

/* ── STATUS-BADGES (semantisch, KEINE der 3 Achsen) — promoviert aus PLAT#03 rka_v2.
   Für allgemeine Zustände: erledigt/dienstlich (confirm) · prüfen/needs_review (warn) ·
   Fehler/abgelehnt (danger) · Info/aktiv (info) · neutral. Nutzen die Aktions-Rollen-
   Tokens → marken-konsistent (info folgt --c-action; confirm/warn/danger bleiben Anker). */
.ds-badge--confirm{ color:var(--c-confirm); background:var(--c-confirm-bg); }
.ds-badge--warn   { color:var(--c-warn);    background:var(--c-warn-bg);    }
.ds-badge--danger { color:var(--c-danger);  background:var(--c-danger-bg);  }
.ds-badge--info   { color:var(--c-action);  background:var(--c-action-bg);  }
.ds-badge--neutral{ color:var(--c-neutral); background:var(--c-neutral-bg); }

/* ── DOMÄNEN-BADGE-BASIS — gemeinsame Basis für domänen-/marken-spezifische Badges
   (z.B. gabriel Provenance „dit/lu/inféré" · univers · work_class). Domäne definiert
   NUR ihre Farb-Variable + Modifier-Klasse auf dieser Basis — Form/Größe bleiben gleich.
   Default neutral; eine Domäne setzt --dom-c / --dom-bg in ihrem Modifier.
   Beispiel:  .ds-badge--dom-provenance{ --dom-c:var(--c-action); --dom-bg:var(--c-action-bg); } */
.ds-badge--domain{ color:var(--dom-c, var(--c-neutral)); background:var(--dom-bg, var(--c-neutral-bg)); }

/* Zahlungs-Hinweise (RKA) — Domänen-Badge-Beispiel (eigene semantische Tokens) */
.ds-badge--pay-private{ color:var(--pay-private); background:var(--pay-private-bg); }
.ds-badge--pay-firm   { color:var(--pay-firm);    background:var(--pay-firm-bg);    }

/* ───────────────────────────── SCOPE-BREADCRUMB ──────────────────────────
   IMMER sichtbar (Multi-Tenant-Sicherheit): Mandant › Entität › Projekt + Rolle.
   Letztes Segment = aktueller Fokus (kräftiger). Rollen-Badge ganz rechts. */
.ds-scope{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2);
  font-size:var(--fs-small); color:var(--text-muted);
  padding:var(--sp-2) var(--sp-3); background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--radius-md);
}
.ds-scope__seg{ display:inline-flex; align-items:center; gap:5px; }
.ds-scope__seg--current{ color:var(--text); font-weight:var(--fw-medium); }
.ds-scope__sep{ color:var(--text-hint); }
.ds-scope__role{ margin-left:auto; }

/* ─────────────────────────────── BELEG-/DOC-KARTE ────────────────────────
   Thumbnail + Drive-Link (GOLDENE REGEL: jede #ID klickbar) + Meta + Aktionen.
   Badges nutzen die 3 Achsen. Primär-Aktion rechts. */
.ds-doc{
  display:grid; grid-template-columns:48px 1fr auto; gap:var(--sp-3);
  align-items:start; padding:var(--sp-3); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-lg);
}
.ds-doc.is-selected{ background:var(--selected-bg); border-color:var(--selected-bd); }
.ds-doc.is-weak{ opacity:.7; }
.ds-doc__thumb{
  width:48px; height:48px; border-radius:var(--radius-md);
  background:var(--surface-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--text-hint);
  overflow:hidden;
}
.ds-doc__thumb img{ width:100%; height:100%; object-fit:cover; }
.ds-doc__body{ min-width:0; display:flex; flex-direction:column; gap:6px; }
.ds-doc__title{ font-weight:var(--fw-medium); color:var(--text); }
.ds-doc__title a{ color:var(--c-action); text-decoration:none; }
.ds-doc__title a:hover{ text-decoration:underline; }
.ds-doc__meta{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.ds-doc__actions{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }

/* ─────────────────────────────── APPROVAL-KARTE ──────────────────────────
   Aktions-VORSCHAU + Bestätigen|Ablehnen + Konfidenz/Quelle + Audit-Hinweis.
   „Nichts ohne Klick" (P3). Bestätigen = grün, rechts; Ablehnen = outline. */
.ds-approval{
  background:var(--surface); border:1px solid var(--c-action);
  border-left:3px solid var(--c-action);
  border-radius:var(--radius-lg); padding:var(--sp-3) var(--sp-4);
  display:flex; flex-direction:column; gap:var(--sp-3);
}
.ds-approval__head{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }  /* wrap: 375-Fund Katalog P1 (lange Titel + Typ-Chip + Pager) */
.ds-approval__icon{ font-size:18px; }
.ds-approval__preview{
  background:var(--surface-2); border:1px dashed var(--border-strong);
  border-radius:var(--radius-md); padding:var(--sp-3); font-size:var(--fs-small); color:var(--text);
}
.ds-approval__foot{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.ds-approval__source{ color:var(--text-hint); font-size:var(--fs-small); margin-right:auto; }
.ds-approval__actions{ display:flex; gap:var(--sp-2); margin-left:auto; }  /* R-13: Bestätigen IMMER rechts — margin-left:auto hält das Paar auch nach flex-wrap-Umbruch rechtsbündig (JC 2026-07-02) */

/* ───────────────────────── TABELLE MIT ZEILEN-AKTION ─────────────────────
   Jede Zeile trägt ihre Aktion (z.B. „zuordnen") in der letzten Spalte. */
.ds-table{ width:100%; border-collapse:collapse; font-size:var(--fs-small); color:var(--text); }
.ds-table th{
  text-align:left; font-weight:var(--fw-medium); color:var(--text-muted);
  padding:8px 10px; background:var(--surface-2);
  border-bottom:1px solid var(--border); position:sticky; top:0;
}
.ds-table td{ padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
.ds-table tbody tr:hover{ background:var(--surface-2); }
.ds-table tr.is-selected{ background:var(--selected-bg); }
.ds-table .ds-table__num{ text-align:right; font-variant-numeric:tabular-nums; }
.ds-table .ds-table__action{ text-align:right; white-space:nowrap; }

/* ──────────────────────────── QUICK-ACTION-CHIPS ─────────────────────────
   Vorgeschlagene Folge-Fragen/Aktionen unter einer Chat-Antwort. */
.ds-quick{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.ds-quick__chip{
  font:var(--fw-medium) var(--fs-small)/1 var(--font-sans);
  padding:6px 12px; border-radius:999px;
  border:1px solid var(--c-action); color:var(--c-action); background:var(--surface);
  cursor:pointer; transition:background .12s;
}
.ds-quick__chip:hover{ background:var(--c-action-bg); }

/* ──────────────────────────── EMPTY / ONBOARDING ─────────────────────────
   Führt durch (neuer Mandant = 0 Daten). Genau ein Haupt-CTA. */
.ds-empty{
  text-align:center; padding:var(--sp-6) var(--sp-4);
  color:var(--text-muted); display:flex; flex-direction:column; align-items:center; gap:var(--sp-3);
}
.ds-empty__icon{ font-size:34px; opacity:.7; }
.ds-empty__title{ font-weight:var(--fw-medium); color:var(--text); }

/* ──────────────────────────────── DOCK-PANEL ─────────────────────────────
   Andockbares Seiten-/Chat-Panel (AGENT-CHAT#01). Kopf (Titel + Aktionen) ·
   scrollbarer Körper · optionale Fuß-Eingabe. Breite per --dock-w überschreibbar
   (resizable-Backlog). Auf Mobile = volle Breite (siehe Responsive). */
.ds-dock{
  display:flex; flex-direction:column;
  width:var(--dock-w, 380px); max-width:100%; height:100%;
  background:var(--surface); border-left:1px solid var(--border);
  box-shadow:var(--shadow-pop);
}
.ds-dock__head{
  display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--border);
  background:var(--surface-2); color:var(--text);
}
.ds-dock__title{ font:var(--fw-medium) var(--fs-h3)/1.3 var(--font-sans); margin:0; }
.ds-dock__actions{ margin-left:auto; display:flex; gap:var(--sp-2); }
.ds-dock__body{ flex:1; overflow-y:auto; padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-3); }
.ds-dock__foot{ padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--border); background:var(--surface); }

/* ──────────────────────────────── COMPOSER ───────────────────────────────
   Chat-Eingabe-Leiste (AGENT-CHAT#01). Feld + Werkzeug-Reihe: links Skill-Wähler
   („Fähigkeit wählen" — Skill ist erste Klasse, korrespondiert mit Skill-Einsatz)
   + Anhang; rechts Mikro + Modell-Auswahl + Senden. Skill/Modell-Labels = i18n/Payload.
   Verallgemeinert den .ds-dock__foot. */
.ds-composer{
  display:flex; flex-direction:column; gap:var(--sp-2);
  background:var(--surface); border:1.5px solid var(--border-strong);
  border-radius:var(--radius-lg); padding:var(--sp-3) var(--sp-4); box-shadow:var(--shadow-card);
}
.ds-composer:focus-within{ border-color:var(--c-action); }
.ds-composer__field{
  width:100%; border:none; background:none; resize:none; outline:none; color:var(--text);
  font:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans); min-height:24px;
}
.ds-composer__field::placeholder{ color:var(--text-hint); }
.ds-composer__bar{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.ds-composer__tools{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }  /* wrap: 375-Fund Katalog P1 (viele/lange Skill-Chips) */
.ds-composer__tools--end{ margin-left:auto; }
/* Skill-Wähler-Chip (links): aktiver Skill oder „Fähigkeit wählen" — Akzent, folgt Marke */
.ds-composer__skill{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap; cursor:pointer;
  font:var(--fw-medium) var(--fs-small)/1 var(--font-sans); padding:6px 12px; border-radius:999px;
  border:1px solid var(--c-action); color:var(--c-action); background:var(--c-action-bg);
}
.ds-composer__skill:hover{ filter:brightness(.98); }
.ds-composer__skill:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
/* Icon-Buttons (Anhang/Mikro) */
.ds-composer__icon{
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  width:32px; height:32px; border-radius:var(--radius-md);
  border:none; background:none; color:var(--text-muted); font-size:16px;
}
.ds-composer__icon:hover{ background:var(--surface-2); color:var(--text); }
.ds-composer__icon:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
/* Modell-Auswahl (Pill, select-artig) */
.ds-composer__model{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; white-space:nowrap;
  font:var(--fw-medium) var(--fs-small)/1 var(--font-sans); padding:6px 10px; border-radius:var(--radius-md);
  border:1px solid var(--border-strong); background:var(--surface); color:var(--text-muted);
}
.ds-composer__model:hover{ background:var(--surface-2); }
.ds-composer__model:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
/* Senden = runder Haupt-CTA (gefüllt = .ds-btn--solid-Logik) */
.ds-composer__send{
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  width:34px; height:34px; border-radius:50%;
  border:none; background:var(--c-action); color:var(--surface); font-size:16px;
}
.ds-composer__send:hover{ filter:brightness(1.08); }
.ds-composer__send:disabled{ opacity:.4; cursor:not-allowed; }
.ds-composer__send:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }

/* ─────────────────────────────── SKILL-KARTE ─────────────────────────────
   Fähigkeit/Skill im Katalog ODER als Vorschlag unter dem Composer (AGENT-CHAT#01 /
   Skills-Verwaltung). Icon + Titel + Favoriten-Stern (rechts) · Beschreibung (2-zeilig) ·
   Meta-Reihe (Kategorie = Domänen-Badge + Autor/Datum-Chips). Klickbar zum Anwenden/Öffnen. */
.ds-skill-card{
  display:flex; flex-direction:column; gap:var(--sp-2); cursor:pointer;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--sp-3) var(--sp-4);
  transition:border-color .12s, box-shadow .12s;
}
.ds-skill-card:hover{ border-color:var(--c-action); box-shadow:var(--shadow-card); }
.ds-skill-card.is-active{ border-color:var(--c-action); background:var(--c-action-bg); }
.ds-skill-card__head{ display:flex; align-items:center; gap:var(--sp-2); }
.ds-skill-card__icon{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:32px; height:32px; border-radius:var(--radius-md);
  background:var(--c-action-bg); color:var(--c-action); font-size:16px;
}
.ds-skill-card__title{ font:var(--fw-medium) var(--fs-h3)/1.3 var(--font-sans); margin:0; color:var(--text); min-width:0; }
/* Favoriten-Stern (rechts) — Akzent, folgt Marke; gepinnt = gefüllt */
.ds-skill-card__fav{
  margin-left:auto; border:none; background:none; cursor:pointer; padding:2px;
  color:var(--text-hint); font-size:16px; line-height:1;
}
.ds-skill-card__fav:hover, .ds-skill-card__fav.is-on{ color:var(--c-action); }
.ds-skill-card__fav:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.ds-skill-card__desc{
  color:var(--text-muted); font-size:var(--fs-small); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ds-skill-card__meta{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:auto; }

/* ──────────────────────────── MODAL / DIALOG ─────────────────────────────
   Overlay + zentrierter Dialog (Connect-Flows, Bestätigungen, Onboarding-Wizard,
   Magic-Link). Kopf (optionales Symbol + Titel + Schließen) · Körper · Fuß
   (sekundär links / primär rechts). Fokus-Falle + Esc = Aufgabe des Konsumenten. */
.ds-modal__overlay{
  position:fixed; inset:0; z-index:50; padding:var(--sp-4);
  background:var(--scrim);
  display:flex; align-items:center; justify-content:center;
}
.ds-modal{
  width:100%; max-width:520px; max-height:90vh; overflow-y:auto;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-pop);
  padding:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-4);
}
.ds-modal__head{ display:flex; align-items:flex-start; gap:var(--sp-2); }
.ds-modal__title{ font:var(--fw-bold) var(--fs-h2)/1.3 var(--font-sans); margin:0; color:var(--text); }
.ds-modal__close{
  margin-left:auto; border:none; background:none; cursor:pointer;
  color:var(--text-muted); font-size:18px; line-height:1; padding:4px;
}
.ds-modal__close:hover{ color:var(--text); }
.ds-modal__close:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
/* zentriertes Symbol (Intro-Dialog) */
.ds-modal__icon{
  align-self:center; display:flex; align-items:center; justify-content:center; flex:none;
  width:48px; height:48px; border-radius:50%;
  background:var(--c-action-bg); color:var(--c-action); font-size:22px;
}
.ds-modal__body{ color:var(--text); font-size:var(--fs-body); line-height:var(--lh-body); display:flex; flex-direction:column; gap:var(--sp-3); }
.ds-modal__foot{ display:flex; justify-content:flex-end; gap:var(--sp-2); flex-wrap:wrap; }  /* primär rechts */

/* ────────────────────────────── FORMULAR-FELD ────────────────────────────
   Label + Eingabe (+ optionaler Hinweis, + optionale End-Aktion z.B. Kopieren).
   .ds-input gilt für <input> UND <textarea>. */
.ds-field{ display:flex; flex-direction:column; gap:6px; }
.ds-field__label{ font:var(--fw-medium) var(--fs-small)/1.2 var(--font-sans); color:var(--text); }
.ds-field__control{ position:relative; display:flex; align-items:center; }
.ds-input{
  width:100%; box-sizing:border-box;
  font:var(--fw-regular) var(--fs-body)/1.4 var(--font-sans); color:var(--text);
  background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--radius-md); padding:9px 12px;
}
.ds-input::placeholder{ color:var(--text-hint); }
.ds-input:focus, .ds-input:focus-visible{ outline:none; border-color:var(--c-action); box-shadow:0 0 0 2px var(--c-action-bg); }
.ds-input:disabled{ opacity:.6; cursor:not-allowed; }
/* End-Aktion (Kopieren/Anzeigen) rechts im Feld */
.ds-field__affix{
  position:absolute; right:6px; border:none; background:none; cursor:pointer;
  color:var(--text-hint); font-size:14px; padding:4px; border-radius:var(--radius-md);
}
.ds-field__affix:hover{ color:var(--text); background:var(--surface-2); }
.ds-field__affix:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.ds-field__hint{ font-size:var(--fs-small); color:var(--text-muted); }

/* ─────────────────────────────── HINWEIS-BOX ─────────────────────────────
   Info/Erklärung — Symbol + Text in getönter Fläche. Default neutral; --info = Akzent
   (folgt Marke). Für reine Erklärtexte, NICHT für Status (dafür Badges). */
.ds-callout{
  display:flex; gap:var(--sp-2); align-items:flex-start;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:var(--sp-3);
  font-size:var(--fs-small); color:var(--text); line-height:1.45;
}
.ds-callout__icon{ flex:none; font-size:16px; line-height:1.4; color:var(--text-muted); }
/* R-127 Nachbesserung (JC 2026-07-09): sichtbare Kante in Akzent-Farbe — nie border-color:transparent,
   sonst liest die getönte Fläche auf ähnlich getöntem Untergrund als „durchsichtig". */
.ds-callout--info{ background:var(--c-action-bg); border-color:var(--c-action); }
.ds-callout--info .ds-callout__icon{ color:var(--c-action); }

/* ──────────────────────────── LISTEN-WERKZEUGLEISTE ──────────────────────
   Über jeder Liste/Tabelle: links Gruppierung/Filter/Ansicht, rechts Suche + Aktionen.
   Buttons = .ds-btn; Suche = .ds-input. */
.ds-toolbar{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.ds-toolbar__end{ margin-left:auto; display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }

/* ─── KI-AKTION (lokale KI) — „Mit KI erstellen" o.ä. Akzent-getönt, folgt Marke.
   Konvention: führendes ✨. Signalisiert KI-unterstützte Aktion (vs. Plain-Aktion). */
.ds-btn--ai{ border:1.5px solid var(--c-action); color:var(--c-action); background:var(--c-action-bg); }
.ds-btn--ai:hover{ filter:brightness(.98); background:var(--c-action-bg); }

/* ─── BREITE TABELLE: horizontaler Scroll-Container (lange & breite Listen). */
.ds-table-wrap{ width:100%; overflow-x:auto; }
/* Mehrzeilige Titel-Zelle: Pfad/Breadcrumb (klein) über dem Titel. */
.ds-table__path{ color:var(--text-hint); font-size:var(--fs-micro); }
.ds-table__title{ color:var(--text); font-weight:var(--fw-medium); }
/* Fälligkeits-Datum; überfällig = danger (Anker-Rot). */
.ds-date{ display:inline-flex; align-items:center; gap:5px; color:var(--text-muted); white-space:nowrap; }
.ds-date.is-overdue{ color:var(--c-danger); font-weight:var(--fw-medium); }
/* native Auswahl-/Toggle-Elemente in Akzentfarbe (folgt Marke). */
.ds-check{ accent-color:var(--c-action); width:16px; height:16px; cursor:pointer; }

/* ──────────────────────────────── PAGINATION ─────────────────────────────
   Seitengröße (25/50/100) + Bereichstext + Vor/Zurück + Seitenanzeige. */
.ds-pagination{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; font-size:var(--fs-small); color:var(--text-muted); }
.ds-pagination__sizes{ display:flex; gap:4px; }
.ds-pagination__size{
  border:1px solid var(--border-strong); background:var(--surface); color:var(--text-muted);
  border-radius:var(--radius-md); padding:4px 10px; cursor:pointer; font:var(--fw-medium) var(--fs-small)/1 var(--font-sans);
}
.ds-pagination__size.is-active{ border-color:var(--c-action); background:var(--c-action-bg); color:var(--c-action); }
.ds-pagination__size:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.ds-pagination__nav{ margin-left:auto; display:flex; align-items:center; gap:var(--sp-2); }

/* ───────────────────────── DATENSATZ-LISTE (Record-Row) ──────────────────
   Karten-Liste für Datensätze (Protokolle, Berichte …): Titel + Meta + End-Aktion. */
.ds-list-item{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-lg);
}
.ds-list-item:hover{ border-color:var(--border-strong); }
.ds-list-item__body{ min-width:0; display:flex; flex-direction:column; gap:4px; }
.ds-list-item__title{ font-weight:var(--fw-medium); color:var(--text); }
.ds-list-item__meta{ display:flex; flex-wrap:wrap; gap:var(--sp-3); color:var(--text-muted); font-size:var(--fs-small); }
.ds-list-item__action{ margin-left:auto; white-space:nowrap; }

/* ────────────────────────── AVATAR + PERSONEN-ZEILE ──────────────────────
   Avatar (Initialen) + Name + Rolle + End-Steuerelemente (Toggles/Buttons).
   Für Team-/Beteiligten-Auswahl. */
.ds-avatar{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:34px; height:34px; border-radius:50%;
  background:var(--surface-2); color:var(--text); font:var(--fw-medium) var(--fs-small)/1 var(--font-sans);
}
.ds-person{ display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2) 0; }
.ds-person__body{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.ds-person__name{ font-weight:var(--fw-medium); color:var(--text); }
.ds-person__role{ font-size:var(--fs-small); color:var(--text-muted); }
.ds-person__controls{ margin-left:auto; display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.ds-person__toggle{ display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-small); color:var(--text-muted); cursor:pointer; }

/* ─── GRUPPEN-KOPF (gruppierte Liste): Label + Anzahl + Sammel-Aktion rechts.
   Wiederverwendbar (Beteiligte nach Firma, Settings-Gruppen …). */
.ds-group__head{
  display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-2) 0; color:var(--text-muted); font-size:var(--fs-small); font-weight:var(--fw-medium);
  border-bottom:1px solid var(--border);
}
.ds-group__count{ color:var(--text-hint); }
.ds-group__bulk{ margin-left:auto; }

/* ────────────────────────────── SETTINGS-ZEILE ───────────────────────────
   Icon + Titel + Untertitel + Chevron. Klickbar; --danger für kritische Aktionen. */
.ds-list-row{
  display:flex; align-items:center; gap:var(--sp-3); width:100%; text-align:left; cursor:pointer;
  padding:var(--sp-3) var(--sp-4); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-md); color:var(--text);
}
.ds-list-row:hover{ background:var(--surface-2); }
.ds-list-row:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.ds-list-row__icon{
  width:32px; height:32px; border-radius:var(--radius-md); flex:none;
  background:var(--surface-2); display:flex; align-items:center; justify-content:center; color:var(--text-muted);
}
.ds-list-row__body{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.ds-list-row__title{ font-weight:var(--fw-medium); color:var(--text); }
.ds-list-row__sub{ font-size:var(--fs-small); color:var(--text-muted); }
.ds-list-row__chev{ margin-left:auto; color:var(--text-hint); flex:none; }
.ds-list-row--danger .ds-list-row__icon{ color:var(--c-danger); background:var(--c-danger-bg); }
.ds-list-row--danger .ds-list-row__title{ color:var(--c-danger); }

/* ════════════════════════════════ APP-SHELL ══════════════════════════════
   Build3: navigierbare CORE-Shell. Sidebar (Nav) + Hauptbereich (Topbar + Inhalt).
   Mobile: Sidebar einklappbar (Toggle = Aufgabe des Konsumenten; siehe Responsive). */
.ds-shell{ display:grid; grid-template-columns:240px 1fr; min-height:100%; background:var(--bg); }
.ds-shell__main{ min-width:0; display:flex; flex-direction:column; }

/* Sidebar-Navigation — Marke oben, Gruppen (KI / PM / Settings), aktiver Eintrag = Akzent. */
.ds-nav{ display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-4) var(--sp-3); background:var(--surface); border-right:1px solid var(--border); min-height:0; overflow-y:auto; scrollbar-width:thin; }
.ds-nav__brand{ display:flex; align-items:center; gap:var(--sp-2); padding:0 var(--sp-2) var(--sp-2); }
.ds-nav__group{ display:flex; flex-direction:column; gap:2px; }
.ds-nav__label{ font-size:var(--fs-micro); color:var(--text-hint); font-weight:var(--fw-medium); padding:var(--sp-2) var(--sp-2) 4px; }
.ds-nav__item{ display:flex; align-items:center; gap:var(--sp-2); width:100%; text-align:left; cursor:pointer;
  padding:8px var(--sp-2); border:none; background:none; border-radius:var(--radius-md);
  color:var(--text-muted); font:var(--fw-regular) var(--fs-small)/1.3 var(--font-sans); }
.ds-nav__item:hover{ background:var(--surface-2); color:var(--text); }
.ds-nav__item.is-active{ background:var(--c-action-bg); color:var(--c-action); font-weight:var(--fw-medium); }
.ds-nav__item:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }

/* Topbar — Titel + rechtsbündige Aktionen. */
.ds-topbar{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; padding:var(--sp-3) var(--sp-4); background:var(--surface); border-bottom:1px solid var(--border); }
.ds-topbar__title{ font:var(--fw-medium) var(--fs-h3)/1.3 var(--font-sans); margin:0; color:var(--text); }
.ds-topbar__end{ margin-left:auto; display:flex; align-items:center; gap:var(--sp-2); }

/* Breadcrumb (generische Navigation, NICHT Scope — dafür .ds-scope). */
.ds-breadcrumb{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:var(--fs-small); color:var(--text-muted); }
.ds-breadcrumb a{ color:var(--text-muted); text-decoration:none; }
.ds-breadcrumb a:hover{ color:var(--c-action); }
.ds-breadcrumb__sep{ color:var(--text-hint); }
.ds-breadcrumb__current{ color:var(--text); font-weight:var(--fw-medium); }

/* ════════════════════════════════ TABS ═══════════════════════════════════ */
.ds-tabs{ display:flex; gap:var(--sp-3); border-bottom:1px solid var(--border); overflow-x:auto; }
.ds-tab{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; white-space:nowrap;
  padding:8px 2px; margin-bottom:-1px; border:none; background:none; border-bottom:2px solid transparent;
  color:var(--text-muted); font:var(--fw-medium) var(--fs-small)/1.4 var(--font-sans); }
.ds-tab:hover{ color:var(--text); }
.ds-tab.is-active{ color:var(--c-action); border-bottom-color:var(--c-action); }
.ds-tab:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }

/* ═══════════════════════ FORM-CONTROLS (Ergänzung) ═══════════════════════
   .ds-input deckt input/textarea/date. Hier zusätzlich Select + Switch. */
.ds-select{ width:100%; box-sizing:border-box; cursor:pointer;
  font:var(--fw-regular) var(--fs-body)/1.4 var(--font-sans); color:var(--text);
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:9px 12px; }
.ds-select:focus, .ds-select:focus-visible{ outline:none; border-color:var(--c-action); box-shadow:0 0 0 2px var(--c-action-bg); }
.ds-select:disabled{ opacity:.6; cursor:not-allowed; }

/* Toggle-Switch (Settings) — an = Akzent (folgt Marke). */
.ds-switch{ position:relative; display:inline-flex; align-items:center; width:38px; height:22px; flex:none; cursor:pointer; }
.ds-switch input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.ds-switch__track{ width:38px; height:22px; border-radius:999px; background:var(--border-strong); transition:background .15s; }
.ds-switch__thumb{ position:absolute; left:3px; width:16px; height:16px; border-radius:50%; background:var(--p-white); box-shadow:var(--shadow-card); transition:transform .15s; }
.ds-switch input:checked ~ .ds-switch__track{ background:var(--c-action); }
.ds-switch input:checked ~ .ds-switch__thumb{ transform:translateX(16px); }
.ds-switch input:focus-visible ~ .ds-switch__track{ outline:2px solid var(--focus-ring); outline-offset:2px; }

/* Settings-Sektion-Label — sentence-case (KEINE ALL-CAPS, STYLE_GUIDE §2). */
.ds-section__label{ font-size:var(--fs-small); color:var(--text-muted); font-weight:var(--fw-medium); padding:var(--sp-3) 0 var(--sp-1); }

/* ══════════════════════ FEEDBACK — Skeleton · Inline · Toast ══════════════ */
/* Lade-Skelett (Platzhalter beim Laden). */
.ds-skeleton{ min-height:14px; border-radius:var(--radius-md);
  background:linear-gradient(90deg, var(--surface-2) 25%, var(--border) 37%, var(--surface-2) 63%);
  background-size:400% 100%; animation:ds-shimmer 1.4s ease infinite; }
@keyframes ds-shimmer{ 0%{ background-position:100% 0; } 100%{ background-position:0 0; } }

/* Inline-Feedback = semantische .ds-callout-Varianten (Anker-Farben, marken-unabhängig).
   R-127: sichtbare Kante in der Anker-Farbe (nie transparent) → setzt sich auf jedem Untergrund ab. */
.ds-callout--confirm{ background:var(--c-confirm-bg); border-color:var(--c-confirm); }
.ds-callout--confirm .ds-callout__icon{ color:var(--c-confirm); }
.ds-callout--warn{ background:var(--c-warn-bg); border-color:var(--c-warn); }
.ds-callout--warn .ds-callout__icon{ color:var(--c-warn); }
.ds-callout--danger{ background:var(--c-danger-bg); border-color:var(--c-danger); }
.ds-callout--danger .ds-callout__icon{ color:var(--c-danger); }

/* Toast (schwebende Kurz-Meldung) — linker Farbstreifen je Bedeutung. */
.ds-toast{ display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4); background:var(--surface);
  border:1px solid var(--border); border-left:3px solid var(--c-action);
  border-radius:var(--radius-md); box-shadow:var(--shadow-pop); font-size:var(--fs-small); color:var(--text); }
.ds-toast--confirm{ border-left-color:var(--c-confirm); }
.ds-toast--warn{ border-left-color:var(--c-warn); }
.ds-toast--danger{ border-left-color:var(--c-danger); }
.ds-toast__close{ margin-left:auto; border:none; background:none; cursor:pointer; color:var(--text-hint); font-size:14px; padding:2px; }
.ds-toast__close:hover{ color:var(--text); }

/* ══════════════════════════ SHELL-PRIMITIVE (core_shell) ═══════════════════
   Lösen die 190 `.ash-*`-Custom-CSS-Zeilen in core_shell ab → „NULL Custom-CSS".
   Token-only (Drift-Regel §1.2). Owner DESIGN#01; Konsum PLAT#03/PLAT#09. */

/* ── MENU / DROPDOWN — Popover-Menü (User-Menü, Kontext, „+ hinzufügen"). */
.ds-dropdown{ position:relative; display:inline-block; }
.ds-dropdown__panel{ position:absolute; z-index:40; top:calc(100% + 4px); right:0; }
.ds-menu{
  min-width:180px; padding:var(--sp-1); display:flex; flex-direction:column; gap:1px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); box-shadow:var(--shadow-pop);
}
.ds-menu__label{ padding:6px 10px 2px; font-size:var(--fs-micro); color:var(--text-hint); }
.ds-menu__item{
  display:flex; align-items:center; gap:var(--sp-2); width:100%; text-align:left; cursor:pointer;
  padding:8px 10px; border:none; background:none; border-radius:var(--radius-md);
  color:var(--text); font:var(--fw-regular) var(--fs-small)/1.3 var(--font-sans);
}
.ds-menu__item:hover{ background:var(--surface-2); }
.ds-menu__item:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:-2px; }
.ds-menu__item--danger{ color:var(--c-danger); }
.ds-menu__item--danger:hover{ background:var(--c-danger-bg); }
.ds-menu__sep{ height:1px; background:var(--border); margin:4px 0; }

/* ── SEGMENTED CONTROL + CHIP-SELECTED — Umschalt-Gruppe; ausgewählter Chip. */
.ds-segmented{ display:inline-flex; flex-wrap:wrap; gap:2px; padding:3px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-md); }
.ds-segmented__btn{
  border:none; background:none; cursor:pointer; white-space:nowrap;
  padding:6px 12px; border-radius:6px; color:var(--text-muted);
  font:var(--fw-medium) var(--fs-small)/1 var(--font-sans);
}
.ds-segmented__btn:hover{ color:var(--text); }
.ds-segmented__btn.is-active{ background:var(--surface); color:var(--c-action); box-shadow:var(--shadow-card); }
.ds-segmented__btn:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
/* ausgewählter Meta-/Filter-Chip (Akzent, folgt Marke) */
.ds-chip.is-selected{ background:var(--c-action-bg); color:var(--c-action); box-shadow:inset 0 0 0 1px var(--c-action); }

/* ── KOLLABIERBARE NAV-SECTION + RAIL — Sidebar-Gruppen ein-/ausklappen; Rail=nur Icons.
   Ergänzt .ds-nav (Build3). Rail-Umschaltung = Konsument (JS) setzt --rail-Klassen. */
.ds-nav__group--collapsible > .ds-nav__label{ display:flex; align-items:center; gap:6px; cursor:pointer; width:100%; }
.ds-nav__caret{ margin-left:auto; transition:transform .15s; color:var(--text-hint); font-size:11px; }
.ds-nav__group--collapsible.is-collapsed .ds-nav__caret{ transform:rotate(-90deg); }
.ds-nav__group--collapsible.is-collapsed .ds-nav__item{ display:none; }
/* Rail (eingeklappte Sidebar = nur Icons) */
.ds-nav--rail .ds-nav__label, .ds-nav--rail .ds-nav__text, .ds-nav--rail .ds-nav__caret{ display:none; }
.ds-nav--rail .ds-nav__item{ justify-content:center; gap:0; }
.ds-nav--rail .ds-nav__brand{ justify-content:center; }

/* ── SHELL-GRID-ERWEITERUNG — Rail-Spalte + optionales rechtes Dock (Chat-Mitte).
   Ergänzt .ds-shell (Build3, 240px+1fr). Topbar bleibt in .ds-shell__main. */
.ds-shell--rail{ grid-template-columns:56px 1fr; }
.ds-shell--dock{ grid-template-columns:240px 1fr var(--dock-w, 340px); }
.ds-shell--rail.ds-shell--dock{ grid-template-columns:56px 1fr var(--dock-w, 340px); }
.ds-shell--dock > .ds-dock{ height:auto; }

/* ── STEPPER — Mehrschritt-Anzeige (Wizard/Onboarding). aktiv=Akzent, erledigt=confirm. */
.ds-stepper{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.ds-stepper__step{ display:inline-flex; align-items:center; gap:var(--sp-2); color:var(--text-muted); font-size:var(--fs-small); }
.ds-stepper__dot{
  width:22px; height:22px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--border-strong); background:var(--surface);
  color:var(--text-muted); font:var(--fw-medium) var(--fs-micro)/1 var(--font-sans);
}
.ds-stepper__step.is-active{ color:var(--text); font-weight:var(--fw-medium); }
.ds-stepper__step.is-active .ds-stepper__dot{ border-color:var(--c-action); background:var(--c-action); color:var(--surface); }
.ds-stepper__step.is-done .ds-stepper__dot{ border-color:var(--c-confirm); background:var(--c-confirm); color:var(--surface); }
.ds-stepper__line{ flex:1; min-width:16px; height:1px; background:var(--border); }

/* ── FAB — schwebende Haupt-Aktion (mobil/Cockpit). Akzent, folgt Marke. */
.ds-fab{
  position:fixed; right:var(--sp-6); bottom:var(--sp-6); z-index:30;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); cursor:pointer;
  height:52px; min-width:52px; padding:0 var(--sp-4); border-radius:999px; border:none;
  background:var(--c-action); color:var(--surface);
  font:var(--fw-medium) var(--fs-body)/1 var(--font-sans); box-shadow:var(--shadow-pop);
}
.ds-fab:hover{ filter:brightness(1.08); }
.ds-fab:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.ds-fab__icon{ font-size:22px; line-height:1; }

/* ══════════════════════ SHELL-PRIMITIVE II (Residual, core_shell) ══════════════
   Schließt die letzten `.ash-*`-Lücken (DESIGN#03-Residual). Token-only, additiv. */

/* ── ZENTRIER-HELFER — Inhalt auf beiden Achsen zentrieren (Empty/Loading/Chat-Leerzustand). */
.ds-center{ display:flex; align-items:center; justify-content:center; }
.ds-center--col{ flex-direction:column; gap:var(--sp-3); text-align:center; }

/* ── KARTEN-/KACHEL-GRID — responsives Auto-Grid für Funktions-Kacheln/Karten. */
.ds-card-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:var(--sp-3); }

/* ── SCROLL-REGION im Shell-Hauptbereich — scrollt innerhalb .ds-shell__main (flex). */
.ds-shell__scroll{ flex:1; min-height:0; overflow-y:auto; padding:var(--sp-4); }

/* ── DRAWER-NAV (off-canvas) — mobile Slide-in-Sidebar. Konsument toggelt .is-open;
   Scrim via .ds-modal__overlay oder .ds-scrim. Ergänzt .ds-nav. */
.ds-nav--drawer{
  position:fixed; top:0; left:0; bottom:0; z-index:46; width:240px; max-width:80vw;
  transform:translateX(-100%); transition:transform .2s ease; box-shadow:var(--shadow-pop);
}
.ds-nav--drawer.is-open{ transform:translateX(0); }
.ds-scrim{ position:fixed; inset:0; z-index:45; background:var(--scrim); }

/* ════════════════════════════ MODUS-/TIEFE-ACHSE — HEBEL B ════════════════════
   Progressive Offenlegung: Sekundär-Detail in essential ausblenden. data-mode am Root.
   ⛔ Nur SEKUNDÄRES taggen — NIE Entscheidung (Bestätigen/Ablehnen), Gefahr-Warnung
   oder Scope/Mandant verbergen (Spec MODUS_ACHSE_SPEC.md §3+§5). + größere Touch-Ziele. */
.ds-essential-only{ display:none; }                       /* nur in essential sichtbar */
:root[data-mode="essential"] .ds-pro-only{ display:none; }
:root[data-mode="essential"] .ds-essential-only{ display:revert; }
/* essential = großzügigere Touch-Ziele (≥48px) für die wichtigsten Interaktiven */
:root[data-mode="essential"] .ds-btn{ min-height:48px; padding:12px 18px; }
:root[data-mode="essential"] .ds-input,
:root[data-mode="essential"] .ds-select{ min-height:48px; }
:root[data-mode="essential"] .ds-list-row,
:root[data-mode="essential"] .ds-nav__item,
:root[data-mode="essential"] .ds-menu__item{ min-height:48px; }

/* ════════════════════ KONTEXT-TINT (Wayfinding) — kanonische Anwendung ════════════════
   „Welche Sektion bin ich?" — leiser Flächen-Tint der aktiven Shell-Sektion.
   Token-Werte: tokens.css (--ctx-tint-{context_id}). Hier nur die ANWENDUNG.

   ⚖️ ENTSCHEID 5 (gesperrt): EINE Methode — Token DIREKT als Layer über --surface.
      KEIN color-mix (das .04-Alpha würde sonst ein 2. Mal gedämpft → unsichtbar).
      Löst den core_shell.html-Platzhalter ab (der color-mix doppelt dämpfte).

   Mechanik (consumer-agnostisch):
     1) Root trägt data-ctx-active="{context_id}" (Shell setzt das bereits) → das mappt
        auf das Sektions-Token via die Liste unten.
     2) Die Sektionsfläche (Zone 1 Hero + Zone 2 Chat) bekommt Klasse .ds-ctx-surface
        → legt --ctx-tint als Gradient-Layer über --surface.
   general / kein data-ctx-active → transparent → bleibt --surface (weiß). */
:root[data-ctx-active="heute"]       { --ctx-tint: var(--ctx-tint-heute); }
:root[data-ctx-active="klaerung"]    { --ctx-tint: var(--ctx-tint-klaerung); }
:root[data-ctx-active="buchungen"]   { --ctx-tint: var(--ctx-tint-buchungen); }   /* Menü „Finanzen" */
:root[data-ctx-active="dokumente"]   { --ctx-tint: var(--ctx-tint-dokumente); }
:root[data-ctx-active="vertraege"]   { --ctx-tint: var(--ctx-tint-vertraege); }
:root[data-ctx-active="entitaeten"]  { --ctx-tint: var(--ctx-tint-entitaeten); }
:root[data-ctx-active="steuer"]      { --ctx-tint: var(--ctx-tint-steuer); }
:root[data-ctx-active="rka"]         { --ctx-tint: var(--ctx-tint-rka); }
:root[data-ctx-active="weltb"]       { --ctx-tint: var(--ctx-tint-weltb); }
:root[data-ctx-active="fahrtenbuch"] { --ctx-tint: var(--ctx-tint-fahrtenbuch); }
:root[data-ctx-active="verwaltung"]  { --ctx-tint: var(--ctx-tint-verwaltung); }
:root[data-ctx-active="einstellungen"]{ --ctx-tint: var(--ctx-tint-einstellungen); } /* reserviert */
:root[data-ctx-active="general"]     { --ctx-tint: transparent; }

.ds-ctx-surface{
  background: linear-gradient(var(--ctx-tint, transparent), var(--ctx-tint, transparent)), var(--surface);
}

/* ══════════════ PHASE-2-BAUSTEINE (KATALOG-SPRINT, DESIGN#01 04.07.2026) ══════════════
   Aus dem Katalog-Kanon-Layer in die SSOT gehoben bzw. neu gebaut (JC-Entscheide R2/R4 +
   Review 04.07.). Alles ADDITIV + token-only — Bestandskonsumenten unberührt. */

/* ── INTERAKTIONS-TAXONOMIE (JC-Kanon R2): „Alles Klickbare zeigt Affordanz;
   nichts Nicht-Klickbares sieht klickbar aus."
     ① Aktion            → .ds-btn (Verb, klar als Button)
     ② klickbarer Info-Träger → .ds-chip--interactive (Rahmen + Hover + ▾)
     ③ reiner Status     → .ds-badge / .ds-bx (flach, NIE klickbar, kein Hover)
     ④ Text-Link         → .ds-link / .srclink (unterstrichen, Akzent) */
.ds-chip--interactive{ cursor:pointer; background:var(--surface); color:var(--text);
  border:1px solid var(--border-strong); }
.ds-chip--interactive::after{ content:"▾"; font-size:var(--fs-micro); color:var(--text-hint); }
.ds-chip--interactive:hover{ border-color:var(--c-action); color:var(--c-action); background:var(--c-action-bg); }
.ds-chip--interactive:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.ds-link{ color:var(--c-action); text-decoration:underline; text-underline-offset:2px; cursor:pointer;
  background:none; border:none; padding:0; font:inherit; }
.ds-link:hover{ text-decoration-thickness:2px; }
.ds-link:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }

/* ══ ACHSEN-BADGES V1 (JC-GEWÄHLT 04.07.2026) — die Achse ist an der FORM erkennbar,
   die Farbe trägt nur den WERT:
     A Entität    = FARBFLÄCHE               .ds-bx--ent
     B Einstufung = LINKE KANTE in Achsfarbe .ds-bx--cls
     C Konfidenz  = PUNKT-SKALA ●●○          .ds-bx--conf (Punkte TRAGEN Bedeutung;
                                             🔒 = bestätigt, im Text)
   Farb-ROLLEN unverändert aus tokens.css (--ent-* · --cls-* · --conf-*). Nachfolger der
   3 gleichförmigen .ds-badge-Achsen-Chips (JC-Kritik: „drei gleich aussehende Chips");
   .ds-badge bleibt für Bestandsseiten + semantische Zustände erhalten. */
.ds-bx{ display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-micro); font-weight:var(--fw-medium); line-height:1.6;
  padding:3px 9px; border-radius:var(--radius-md); white-space:nowrap; }
.ds-bx--ent{ color:var(--bx-c, var(--c-neutral)); background:var(--bx-bg, var(--c-neutral-bg)); }
.ds-bx--cls{ color:var(--text); background:var(--surface-2);
  box-shadow:inset 3px 0 0 var(--bx-c, var(--c-neutral));
  border-radius:4px var(--radius-md) var(--radius-md) 4px; }
.ds-bx--conf{ color:var(--text-muted); background:none; border:1px solid var(--border); gap:5px; }
.ds-bx__dots{ display:inline-flex; gap:2px; }
.ds-bx__dots i{ width:6px; height:6px; border-radius:50%; background:var(--border); }
.ds-bx__dots i.on{ background:var(--bx-c, var(--text-muted)); }
/* Wert-Modifier: setzen NUR --bx-c/--bx-bg aus den Achs-Tokens. */
.ds-bx--ent-c3    { --bx-c:var(--ent-c3);     --bx-bg:var(--ent-c3-bg);     }
.ds-bx--ent-c4    { --bx-c:var(--ent-c4);     --bx-bg:var(--ent-c4-bg);     }
.ds-bx--ent-privat{ --bx-c:var(--ent-privat); --bx-bg:var(--ent-privat-bg); }
.ds-bx--cls-public      { --bx-c:var(--cls-public);       }
.ds-bx--cls-internal    { --bx-c:var(--cls-internal);     }
.ds-bx--cls-confidential{ --bx-c:var(--cls-confidential); }
.ds-bx--cls-strict      { --bx-c:var(--cls-strict); font-weight:var(--fw-bold); }
.ds-bx--conf-high  { --bx-c:var(--conf-high);   }
.ds-bx--conf-medium{ --bx-c:var(--conf-medium); }
.ds-bx--conf-low   { --bx-c:var(--conf-low);    }
/* Legende-Baustein: erklärt die 3 Formen EINMAL pro Ansicht (z. B. unter einer Tabelle). */
.ds-bx-legend{ display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center;
  font-size:var(--fs-micro); color:var(--text-muted); }
.ds-bx-legend .ds-bx{ pointer-events:none; }

/* ── KARTEN-KOPFZEILE (Karten-Konsolidierung, JC-angenommen 04.07.): EINE Hülle
   .ds-card; braucht eine Karte die Gold-Kopfzeile (.card__top-Muster), nimmt sie
   .ds-card--framed + __header/__body. Löst .card/card__top (4 Mockup-Kopien) und
   den Landkarten-Namen domain-card ab (Rückbau der Kopien = P4). */
.ds-card--framed{ padding:0; overflow:hidden; }
.ds-card__header{ display:flex; align-items:center; gap:var(--sp-2); padding:10px 14px;
  background:var(--surface-2); border-bottom:1px solid var(--border); font-size:var(--fs-small); }
.ds-card__kind{ font-weight:var(--fw-bold); }
.ds-card__count{ margin-left:auto; color:var(--text-muted); }
.ds-card__body{ padding:var(--sp-3) var(--sp-4); }

/* ── SAMMEL-AKTIONSLEISTE (Multiselect, JC-§0g): erscheint über einer Liste/Tabelle,
   sobald Zeilen gewählt sind — dieselben file-actions wie das „⋯"-Menü, als Buttons. */
.ds-bulkbar{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
  padding:var(--sp-2) var(--sp-3); background:var(--c-action-bg);
  border:1px solid var(--c-action); border-radius:var(--radius-md); font-size:var(--fs-small); }
.ds-bulkbar__count{ font-weight:var(--fw-bold); color:var(--c-action); white-space:nowrap; }
.ds-bulkbar__end{ margin-left:auto; display:flex; gap:var(--sp-2); }

/* ── DATA-TABLE-KOMPLETT (R-30 · §0j — der Listen-Standard als SSOT-Baustein).
   Kopf (Titel · Zähler · Einklappen · ⛶ Vollbild) · Toolbar (Suche · Filter · Max/Seite)
   · sortierbare Spalten · Pagination · Multiselect (+ ds-bulkbar). Verhalten:
   engine.js dataTableFull() — kein Inline-onclick (R-73). Quelle: Gold e0b5086. */
.ds-datatable{ display:flex; flex-direction:column; gap:var(--sp-2);
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--sp-3); }
.ds-datatable__head{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.ds-datatable__title{ font:var(--fw-medium) var(--fs-h3)/1.3 var(--font-sans); margin:0; min-width:0; }
.ds-datatable__count{ color:var(--text-muted); font-size:var(--fs-small); white-space:nowrap; }
.ds-datatable__end{ margin-left:auto; display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.ds-datatable__body{ display:flex; flex-direction:column; gap:var(--sp-2); }
.ds-datatable__toolbar{ row-gap:var(--sp-2); }
.ds-datatable__search{ flex:1 1 180px; min-width:140px; max-width:300px; padding:6px 10px; font-size:var(--fs-small); }
.ds-datatable__ctl{ display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-small); color:var(--text-muted); white-space:nowrap; }
.ds-datatable__ctl .ds-select{ width:auto; padding:5px 8px; font-size:var(--fs-small); }
.ds-datatable__selcol{ width:34px; text-align:center; }
/* Spalten-Sortierung: klickbare th mit Richtungs-Caret (↕ / ▲ is-asc / ▼ is-desc). */
.ds-table th.is-sortable{ cursor:pointer; user-select:none; white-space:nowrap; }
.ds-table th.is-sortable:hover{ color:var(--c-action); }
.ds-table th .ds-table__caret{ color:var(--text-hint); font-size:var(--fs-micro); margin-left:4px; }
.ds-table th.is-asc .ds-table__caret, .ds-table th.is-desc .ds-table__caret{ color:var(--c-action); }
/* Vollbild = BODY-Overlay (Gold fullscreenTable e0b5086): Original bleibt unberührt. */
.ds-datatable-full{ position:fixed; inset:0; z-index:70; background:var(--bg);
  display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-4); overflow:auto; }
.ds-datatable-full__bar{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-2); color:var(--text); font-size:var(--fs-body); }

/* ── DOCK-PANEL ERWEITERT (Phase 2): rechts ANDOCKEND. .ds-dock--side = In-Flow-
   Variante neben dem Inhalt (Split-Ansicht, Muster belege_section.js 339d91a):
   STICKY beim Scrollen · frei VERGRÖSSERBAR am Griff (JS setzt --dock-w, Muster
   core_shell navResize) · SCHLIESSBAR (Kopf-Aktion). Mobil = Bottom-Sheet per
   reinem @media (kein JS-order-Hack). */
.ds-dock--side{ position:sticky; top:var(--sp-3); align-self:flex-start;
  flex:none;                       /* Breite = --dock-w, nicht vom Split geschrumpft */
  height:auto; max-height:calc(100vh - 24px);
  border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.ds-dock[hidden]{ display:none; }  /* schließbar: hidden-Attribut schlägt display:flex */
.ds-dock__grip{ position:absolute; top:0; left:-5px; bottom:0; width:10px;
  cursor:col-resize; z-index:2; background:none; border:none; padding:0; }
.ds-dock__grip::after{ content:""; position:absolute; top:50%; left:4px; width:3px; height:34px;
  transform:translateY(-50%); border-radius:2px; background:var(--border-strong); }
.ds-dock__grip:hover::after, .ds-dock__grip:focus-visible::after{ background:var(--c-action); }
/* Mobil (≤560px) = ECHTES Bottom-Sheet (JC-Export 3, 04.07.: „Der Ansicht auf Handy
   ist noch gar nicht gelungen"): kommt von UNTEN (Slide-up), stark gerundete Oberkante,
   GRABBER-Griff oben mittig, SCRIM dunkelt den Inhalt dahinter ab (CSS-only via
   100vmax-Schatten), Kopf mit ✕ bleibt stehen, Inhalt scrollt intern. */
@media (max-width:560px){
  .ds-dock--side{ position:fixed; left:0; right:0; bottom:0; top:auto;
    width:100% !important; max-height:76vh; z-index:46;
    border:none; border-top:1px solid var(--border);
    border-radius:16px 16px 0 0;
    box-shadow:0 -12px 40px rgba(0,0,0,.28), 0 0 0 100vmax var(--scrim);   /* Scrim = kanonischer Token (Dark zieht mit) */
    animation:ds-sheet-up .28s ease both; }
  .ds-dock--side::before{ content:""; position:absolute; top:6px; left:50%; width:44px; height:5px;
    transform:translateX(-50%); border-radius:999px; background:var(--border-strong); z-index:1; }
  .ds-dock--side .ds-dock__head{ padding-top:calc(var(--sp-3) + 12px); border-radius:16px 16px 0 0; }
  .ds-dock--side .ds-dock__body{ overflow-y:auto; }
  .ds-dock__grip{ display:none; }   /* Seiten-Resize-Griff entfällt — der Grabber trägt die Sheet-Mimik */
}
@keyframes ds-sheet-up{ from{ transform:translateY(24px); opacity:.6; } to{ transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .ds-dock--side{ animation:none !important; }
}

/* ══ 3-ACHSEN-BADGE V4 (R-100 — JC FINAL BESTÄTIGT 2026-07-08) ══════════════════
   HIERHER UMGEZOGEN aus foundation.css:294 (DESIGN#01 25.07., Tower#26-Befund:
   core_shell laedt nur tokens+components -> .ds-axis war live TOT; components.css
   ist die deployte CSS = Wirkort). Inhalt 1:1 bis auf zwei Kanon-Nachzuege unten.
   Loest Achsen-Badges V1 (.ds-bx, Form-je-Achse) ab: die drei Achsen sind jetzt
   ALLE RUNDE PILLEN (radius voll = 999px, Konvention .srclink/.zone-hero__scope),
   unterschieden durch INHALT, nicht durch Form. Kanon = axisBadges() (engine.js).
   Die drei Achsen bleiben orthogonal (Bibel G-1) und duerfen NIE vermischt werden.

     A · Entitaet     Pille: bg=Ramp-50 · Farb-Punkt=Ramp-700 · Text=Ramp-800.
                      Farbe je Mandant (Platzhalter-Tokens bis Mandant-Token-Schicht):
                      C3 blau · C4 teal · Privat grau · gabriel amber · kivisai purple ·
                      anna pink · lorenzo coral · julien gruen.
     B · Konfidenz    Pille: 5 Stufen 20/40/60/80/100 % · Blau-Ramp 50->700 (dunkel=hoch) ·
                      Icon = Gold-Funke ai-spark (JE-161; ehem. 🪄 — Zauberstab kanonisch tot) · Text dunkel hell /
                      weiss ab Stufe 60 % (--conf-ramp-*-fg). %-Wert im Label (JC 07-08,
                      loest die aeltere „kein %"-Notiz G-5 ab).
     C · Geheimhaltung Pille: bg=surface-2 + border · EU-Chip NUR bei EU-Residenz
                      (--c-action-bg/--c-action) · Level ausgeschrieben (oeffentlich·
                      intern·vertraulich·streng) · Schloesser rechts: 0 (oeffentlich/
                      intern) · 1 amber (vertraulich) · 2 rot (streng).
   ────────────────────────────────────────────────────────────────────────────── */
/* Konfidenz-5-Stufen-Rampe (Blau) — token-basiert; ab 60 % Text weiss (AA auf dunkel).
   JC-Befund 26.07. („Badge wirkt transparent"): die Rampe war NUR auf .ds-axes gescoped —
   ein axisBadge_conf OHNE Wrapper (Klärungs-Tabellenzelle) bekam --ax-fill leer → Pille
   transparent mit weisser Kante. Fix strukturell: die Rampe liegt AUCH auf .ds-axis--conf
   selbst — eine conf-Pille kann Wrapper-vergessen nicht mehr unsichtbar machen. */
.ds-axes, .ds-axis--conf{ --conf-20:var(--p-blue-50); --conf-40:color-mix(in srgb, var(--p-blue-300) 55%, var(--p-blue-50));
  --conf-60:var(--p-blue-300); --conf-80:color-mix(in srgb, var(--p-blue-700) 70%, var(--p-blue-300));
  --conf-100:var(--p-blue-700); }
.ds-axes{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; vertical-align:middle; }
.ds-axis{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font:var(--fw-medium) var(--fs-micro)/1.4 var(--font-sans);
  border-radius:999px; padding:2px 10px; border:1px solid transparent;
}
/* A · Entitaet — Farb-Punkt + getoente Fuellung; Farb-Rollen via --ax-c/--ax-bg/--ax-ink. */
.ds-axis--ent{ background:var(--ax-bg, var(--c-neutral-bg)); color:var(--ax-ink, var(--c-neutral-ink)); }
.ds-axis--ent .ds-axis__dot{ width:8px; height:8px; border-radius:50%; flex:none; background:var(--ax-c, var(--c-neutral)); }
.ds-axis--ent-c3     { --ax-c:var(--p-blue-700);   --ax-bg:var(--p-blue-50);   --ax-ink:var(--p-blue-800);   }
.ds-axis--ent-c4     { --ax-c:var(--p-teal-700);   --ax-bg:var(--p-teal-50);   --ax-ink:var(--p-teal-800);   }
.ds-axis--ent-privat { --ax-c:var(--p-gray-700);   --ax-bg:var(--p-gray-50);   --ax-ink:var(--p-gray-800);   }
.ds-axis--ent-gabriel{ --ax-c:var(--p-amber-700);  --ax-bg:var(--p-amber-50);  --ax-ink:var(--p-amber-800);  }
.ds-axis--ent-kivisai{ --ax-c:var(--p-purple-700); --ax-bg:var(--p-purple-50); --ax-ink:var(--p-purple-800); }
/* anna konsumiert die --ent-anna-Semantik (#1001/B5: tokens light+dark); Fallbacks = Light-Werte */
.ds-axis--ent-anna   { --ax-c:var(--ent-anna, #a83277);  --ax-bg:var(--ent-anna-bg, #fbe8f2);  --ax-ink:var(--ent-anna-ink, #7e2159);  }
.ds-axis--ent-lorenzo{ --ax-c:var(--p-coral-700);  --ax-bg:var(--p-coral-50);  --ax-ink:var(--p-coral-800);  }
.ds-axis--ent-julien { --ax-c:var(--p-green-700);  --ax-bg:var(--p-green-50);  --ax-ink:var(--p-green-800);  }
/* B · Konfidenz — 5 Stufen; Fuellung = Blau-Rampe (dunkel=hoch), Text ab 60 % weiss. */
/* Kante kraeftiger (82%→60% Fuellanteil = dunkler): helle Stufen (20/40) muessen auf der
   weissen Tabelle als PILLE lesen, nicht als Hauch (JC 26.07., „sichtbar-sichtbar").
   Beleg: 20er-Kante gegen Weiss damit 3.19:1 (≥3:1 Grafik-Kontrast; bei 82% war es <2:1). */
.ds-axis--conf{ background:var(--ax-fill, var(--p-blue-50)); color:var(--ax-fg, var(--p-blue-800)); border-color:color-mix(in srgb, var(--ax-fill, var(--p-blue-50)) 60%, #000); }
.ds-axis--conf .ds-axis__wand{ font-size:var(--fs-micro); line-height:1; }
.ds-axis--conf-20 { --ax-fill:var(--conf-20);  --ax-fg:var(--p-blue-800); }
.ds-axis--conf-40 { --ax-fill:var(--conf-40);  --ax-fg:var(--p-blue-800); }
.ds-axis--conf-60 { --ax-fill:var(--conf-60);  --ax-fg:#fff; }
.ds-axis--conf-80 { --ax-fill:var(--conf-80);  --ax-fg:#fff; }
.ds-axis--conf-100{ --ax-fill:var(--conf-100); --ax-fg:#fff; }
/* C · Geheimhaltung — neutrale Pille + Level-Wort + Schloss-Zone rechts + optionaler EU-Chip. */
.ds-axis--sec{ background:var(--surface-2); color:var(--text); border-color:var(--border-strong); gap:5px; }
.ds-axis__eu{ display:inline-flex; align-items:center; gap:3px; padding:0 6px; border-radius:999px;
  background:var(--c-action-bg); color:var(--c-action); font-size:var(--fs-micro); font-weight:var(--fw-medium); }
.ds-axis__locks{ display:inline-flex; align-items:center; gap:1px; letter-spacing:-1px; }
.ds-axis--sec-confidential .ds-axis__locks{ color:var(--c-warn); }
.ds-axis--sec-strict{ font-weight:var(--fw-bold); }
.ds-axis--sec-strict .ds-axis__locks{ color:var(--c-danger); }
/* Legende (Doku/Katalog): drei Achsen nebeneinander, nicht klickbar. */
.ds-axes-legend{ display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center;
  padding:var(--sp-3); background:var(--surface-2); border-radius:var(--radius-md); font-size:var(--fs-small); }
.ds-axes-legend .ds-axis{ pointer-events:none; }

/* ─────────────────────────────── RESPONSIVE ──────────────────────────────
   Mobile-first-Anpassung: Doc-Karte gestapelt, Aktionen volle Breite, Dock = Vollbild. */
@media (max-width:560px){
  .ds-shell, .ds-shell--rail, .ds-shell--dock, .ds-shell--rail.ds-shell--dock{ grid-template-columns:1fr; }
  .ds-nav{ border-right:none; border-bottom:1px solid var(--border); }
  .ds-doc{ grid-template-columns:40px 1fr; }
  .ds-doc__actions{ grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; align-items:stretch; }
  .ds-approval__actions{ width:100%; }
  .ds-approval__actions .ds-btn{ flex:1; justify-content:center; }
  .ds-dock{ width:100%; border-left:none; }
  .ds-composer__tools--end{ margin-left:0; width:100%; justify-content:flex-end; }
  .ds-modal{ padding:var(--sp-4); }
  .ds-modal__foot .ds-btn{ flex:1; justify-content:center; }
}