/* ============================================================
   safeguard-datenschutz — Modul-spezifische Styles
   ------------------------------------------------------------
   Spiegelt das SafeGuard-Layout mit `sgds-` Prefix. Gleiche Tokens,
   gleiche Eisenhower-Pastelltöne für die Ampel, gleiche Spalten-
   Grids — identische Optik mit anderem Datenmodell.
   ============================================================ */

/* ============================================================
   Page-Layout (zentrierte Spalte unter App-Header + Tabs)
   ============================================================ */

.sgds-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (max-width: 1100px) {
  .sgds-main {
    padding: var(--space-5) var(--space-4) var(--space-8);
    gap: var(--space-5);
  }
}

/* Dashboard-Sonderfall: vollflächig, kein 1280-Deckel — die Bereichs-
   Karten profitieren von mehr Breite (mehr Karten pro Zeile). Listen-
   Seiten behalten den `.sgds-main`-Default. ID wird in
   safeguard-datenschutz/index.php gesetzt. */
#sgds-dashboard-page {
  max-width: none;
  padding: var(--space-8) var(--space-8) var(--space-12);
}

@media (max-width: 1100px) {
  #sgds-dashboard-page {
    padding: var(--space-5) var(--space-4) var(--space-8);
  }
}

/* Sub-Navigation kommt seit #179 aus dem Shared blocks/app-subnav
   (idf-subnav, Tabs zentral in _subnav.php) — kein .sgds-tabs-CSS mehr. */

/* Kennzahlen-Leiste (KPI-Strip) kommt seit Tranche L4 (#198) aus dem
   Shared-Block _shared/blocks/stat-card ($useStatCard in index.php):
   .idf-stats-head / .idf-stats / .idf-stat / .idf-stat-value
   (+ .is-confirm/.is-warn/.is-danger) / .idf-stat-label.
   Kein sgds-Stat-CSS mehr - die Farb-Zuordnungen (Freigegeben=confirm,
   Wiedervorlage=warn, Ueberfaellig=danger) liegen als Shared-Default
   auf den is-*-Modifiern des Blocks. */

/* Bereichs-Grid + Karten kommen seit Tranche L4 (#199) aus dem
   Shared-Block _shared/blocks/hub-card ($useHubCard in index.php):
   .idf-hub (Grid inkl. is-loading) / .idf-hub-card (inkl. Ampel-
   Modifier is-rot/is-gelb/is-gruen/is-leer via Eisenhower-Tokens,
   $useEisenhower bleibt gesetzt) / -head / -icon / -title-wrap /
   -title / -desc-wrap / -desc(.is-empty) / -body / -main / -score /
   -counters. Das tote .sgds-board-head-CSS ist mit entsorgt (kein
   Markup-Nutzer seit v0.1.3). Bewusste Mini-Aenderung laut Shared-
   Hover-Standard: Karten-Hover ohne translateY-Lift (nur Accent-
   Border + shadow-sm), Begruendung im Block-Header.

   Board-Empty-State kommt aus _shared/blocks/empty-state
   ($useEmptyState): .idf-empty-state.is-boxed - dashed Box inkl.
   p/code-Skins; <strong> wird dort auf --ink normiert (vorher
   erbte es --mid, bewusste Mini-Normierung des Blocks). */

/* ============================================================
   Verarbeitungs-Liste (verarbeitungen.php)
   ------------------------------------------------------------
   9-Spalten-Grid: Bereich · Titel · Rechtsgrundlage · Risiko ·
   Bearb.-Status · nächste Prüfung · Wichtig · Dringend · Löschen.
   Layout-Patterns kommen aus _shared/functions/list-view/grid-css/idf-list-grid.css —
   diese Datei definiert nur modul-spezifische Cells/Badges.
   ============================================================ */

/* Page-Wrapper — Padding kommt aus Shared `.idf-list-page` (0) +
   den horizontalen 32 px der Shared-Klassen `.idf-list-bar /
   -stats / -thead / -row`. Hier KEINE eigenen Overrides, sonst
   bricht das Pattern und der Main bekommt einen merkwürdigen
   24-px-Rahmen. */
.sgds-list-main {
  /* leer — Shared regelt's */
}

/* Filter-Bar — nutze Shared `.idf-list-bar` (12px 32px Padding,
   Background, Border-Bottom). Hier keine Overrides. */

.sgds-list-search {
  flex: 1 1 280px;
  min-width: 200px;
  max-width: 420px;
}

.sgds-list-filter {
  flex: 0 0 auto;
  min-width: 160px;
}

.sgds-list-spacer { flex: 1 1 auto; }

/* Filter-Toggles („nur offene" / „nur überfällig") nutzen seit #179 das
   Shared .idf-list-toggle aus list-grid — kein lokales Toggle-CSS mehr. */

/* Stats-Zeile — Padding/Background kommt aus Shared `.idf-list-stats`. */
.sgds-list-stats strong { color: var(--ink); }

/* Grid-Layout für Tabellenkopf + Zeilen.
   9 Spalten (seit v0.1.13):
     1) 52px  Erledigt-Pille (Shared `.idf-list-done-pill`)
     2) 1fr   Titel + Inline-Status-Badge
     3) 360px Bereich (Inline-Icon + langer Bereichs-Titel)
     4) 100px Risiko-Badge
     5) 170px Verantwortlich (Akteur, Inline-Combobox-Edit)
     6) 170px Nächste Prüfung (170 für Date-Picker-Breite)
     7) 44px  Wichtig
     8) 44px  Dringend
     9) 52px  Löschen
   Padding/gap kommen NICHT mehr von hier — die Cell-Innen-Pads
   liefert das Shared `.idf-list-grid > div`-Pattern. */
.sgds-grid {
  display: grid;
  /* Breiten aus der CSS-Variable (col-resize-Baustein); Fallback = Defaults. */
  grid-template-columns: var(--sgds-cols, 52px minmax(220px, 1fr) 360px 100px 170px 170px 44px 44px 52px);
  align-items: center;
  gap: 0;
}

/* Thead — Sticky/Background/Padding kommt aus Shared `.idf-list-thead`.
   Header-Cell-Typografie (uppercase, font-xs, mid) ebenfalls aus Shared. */

.sgds-list-rows {
  display: flex;
  flex-direction: column;
}

.sgds-row {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  transition: background var(--motion-base, 120ms) ease;
}

.sgds-row:hover { background: var(--bg); }

.sgds-row.is-fresh {
  animation: sgds-row-flash 2s ease-out;
}

@keyframes sgds-row-flash {
  0%   { background: var(--eh-q2-bg); }
  100% { background: var(--white); }
}

/* Titel-Zelle — Inline-Edit-Host, font-base wie SafeGuard.
   KEIN eigenes cursor: der Shared-Row-Default (user-select:none +
   .idf-list-row:hover cursor:default) gilt — sonst zeigt die Titel-Cell
   abweichend zu allen anderen Listen den Schreib-Cursor. */
.sgds-cell-titel {
  font-size: var(--font-base);
  color: var(--ink);
  overflow: hidden;
}

/* Titel + Inline-Status-Badge + Pen in einer Zeile. Group ist gleich-
   zeitig `.idf-inline-edit-host` (Aufgaben-Pattern) — füllt die ganze
   Cell-Breite (width:100%), damit (a) der Pen-Hover-Trigger nicht nur
   am Titel-Text klebt und (b) der Inline-Input während Edit auf die
   ganze Cell expandieren kann. */
.sgds-titel-group {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.sgds-titel-group .sgds-titel {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sgds-titel-group .sgds-status-badge {
  flex: 0 0 auto;
}

.sgds-titel-group .idf-inline-edit-btn {
  flex: 0 0 auto;
}

.sgds-titel {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Rechtsgrundlage — reiner Text (kein Badge mehr seit v0.1.3),
   dezent grau. */
.sgds-cell-rechtsgrundlage {
  font-size: var(--font-base);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sgds-muted {
  color: var(--soft);
  font-style: italic;
}

/* Verantwortlich-Zelle — Klartext-Name + Pen, Inline-Edit ersetzt
   die Cell-Innenseite durch eine Combobox (createAkteurSelect). Pattern
   analog `.sg-cell-verant` in safeguard.css. Truncate bei Überlauf. */
.idf-list-rows .idf-list-row .idf-list-grid > div.sgds-cell-verant {
  color: var(--ink);
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sgds-cell-verant .sgds-verant-text {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sgds-cell-verant .sgds-verant-text:empty::before {
  content: "—";
  color: var(--soft);
}

/* Wenn die Cell im Edit-Modus ist, zeigt sie die Combobox vollflächig. */
.sgds-cell-verant.is-editing {
  padding: 0 !important;
}
.sgds-cell-verant.is-editing .combobox {
  width: 100%;
}
.sgds-cell-verant.is-editing .combobox-trigger {
  width: 100%;
  height: 100%;
  border: 1px solid var(--accent);
  border-radius: 0;
  box-sizing: border-box;
}

/* Bereich-Zelle — analog `.sg-bereich-inline` in SafeGuard: kleines
   Präfix-Icon + Klartext, kein Pillen-Akzent. Truncate bei Überlauf. */
.sgds-cell-bereich {
  overflow: hidden;
  color: var(--ink);
}

.sgds-bereich-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.sgds-bereich-inline i {
  font-size: 13px;
  color: var(--mid);
  opacity: 0.55;
  flex-shrink: 0;
}

.sgds-bereich-inline > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Risiko-Pille + Bearbeitungs-Status-Pille — Color-Modifier-only,
   Geometrie/Typografie aus shared `.idf-pill-tag` (13 px UPPERCASE +
   letter-spacing). Markup: <span class="idf-pill-tag sgds-risiko-badge
   is-hoch">Hoch</span>. */
.sgds-risiko-badge.is-niedrig        { background: var(--tint-accent); color: var(--accent); }
.sgds-risiko-badge.is-mittel         { background: var(--tint-orange); color: var(--orange); }
.sgds-risiko-badge.is-hoch           { background: var(--tint-primary);  color: var(--primary); }

.sgds-status-badge.is-entwurf        { background: var(--bg);                color: var(--mid); }
.sgds-status-badge.is-in_pruefung    { background: var(--tint-orange); color: var(--orange); }
.sgds-status-badge.is-freigegeben    { background: var(--tint-confirm); color: var(--confirm); }
.sgds-status-badge.is-ueberarbeiten  { background: var(--tint-primary);  color: var(--primary); }

/* Datum-Zelle — column-flex: Host (Hauptdatum + Pen, in einer Zeile)
   oben, optionaler Hint (»in 14 Tagen«) unten. Host ist
   `.idf-inline-edit-host` und füllt die ganze Cell-Breite, damit der
   Inline-Date-Input beim Edit auf die ganze Cell expandieren kann. */
.idf-list-rows .idf-list-row .idf-list-grid > .sgds-cell-datum {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
  line-height: 1.2;
  font-size: var(--font-base);
  color: var(--ink);
}

.sgds-datum-host {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.sgds-datum-host .sgds-datum-text {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sgds-datum-host .idf-inline-edit-btn {
  flex: 0 0 auto;
}

.sgds-cell-datum.is-ueberfaellig .sgds-datum-text { color: var(--primary); font-weight: var(--weight-bold); }
.sgds-cell-datum.is-heute .sgds-datum-text { color: var(--yellow-text, #b58600); font-weight: var(--weight-bold); }
.sgds-cell-datum.is-bald .sgds-datum-text { color: var(--yellow-text, #b58600); }

.sgds-datum-hint {
  font-size: var(--font-xs);
  color: var(--mid);
}

.sgds-cell-datum.is-ueberfaellig .sgds-datum-hint { color: var(--primary); }

/* Pen-Affordance kommt jetzt komplett aus Shared
   `_shared/functions/inline-editing/idf-inline-edit.css` (`.idf-inline-edit-btn` +
   `.idf-inline-edit-host:hover`-Trigger + Schwarz-Hover). Eigenes
   `.sgds-edit-btn` ist deshalb ENTFERNT — Modul-Markup nutzt jetzt
   die Shared-Klasse direkt. */

/* Icon-only-Cells (Done, Flag, Delete) — nur Centering, der eigentliche
   Pillen-Stil kommt aus den Shared-Bausteinen:
     `.idf-list-done-pill`   in _shared/list-grid    (Done-Toggle)
     `.idf-flag-check.is-compact` in _shared/flag-check (Wichtig/Dringend)
     `.idf-list-delete-btn`  in _shared/list-grid    (Löschen)
*/
.sgds-cell-done,
.sgds-cell-flag,
.sgds-cell-delete,
.sgds-cell-done-head,
.sgds-cell-flag-head,
.sgds-cell-delete-head {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsive: ab 1280px etwas engere Spalten, Tap-Targets bleiben groß.
   Spalten-Reihenfolge: Done · Titel · Bereich · Risiko · Datum · W · D · Del. */
@media (max-width: 1280px) {
  .sgds-grid {
    grid-template-columns: 52px minmax(200px, 1fr) 220px 90px 150px 150px 44px 44px 52px;
  }
  /* col-resize im Schmal-Layout inaktiv (Modul-Grid gewinnt hier): Griffe weg,
     Scroll-Modus neutralisieren, damit nichts verrutscht/ueberlaeuft. */
  .idf-colresize-layer { display: none; }
  .idf-colresize-scroll .idf-list-thead,
  .idf-colresize-scroll .idf-list-rows { width: auto; min-width: 0; }
}

@media (max-width: 1000px) {
  /* Auf kleinen Bildschirmen Verantwortlich (5.) + Datum (6.) verbergen. */
  .sgds-grid {
    grid-template-columns: 52px minmax(200px, 1fr) 200px 90px 44px 44px 52px;
  }
  .sgds-list-thead .sgds-grid > div:nth-child(5),
  .sgds-list-thead .sgds-grid > div:nth-child(6),
  .sgds-row .sgds-grid > .sgds-cell-verant,
  .sgds-row .sgds-grid > .sgds-cell-datum {
    display: none;
  }
}

/* ============================================================
   Detail-Modal (Standard-Artefakt) — Tranche 2 / Issue #125
   Toggles, Hinweis-Box und TOM-Sub-Liste im Verarbeitungs-Modal.
   Geometrie (idf-form-h/-padding/-border/-radius) aus den Form-Tokens,
   damit die Felder bündig zu den restlichen idf-form-Inputs sitzen.
   ============================================================ */

.idf-form .sgds-toggle-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  min-height: var(--idf-form-h);
}

/* Boolean-Pille mit Text-Label (Art. 9 / Drittland / DSFA). White default,
   aktiv in Brand-Rot getönt — signalisiert "Flag gesetzt / Achtung". */
.idf-form .sgds-modal-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--idf-form-h);
  padding: 0 var(--space-3);
  border-radius: var(--idf-form-radius);
  border: var(--idf-form-border);
  background: var(--white);
  color: var(--mid);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--idf-form-font);
  box-sizing: border-box;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.idf-form .sgds-modal-toggle:hover { border-color: var(--mid); }
.idf-form .sgds-modal-toggle.is-active {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

/* Info-/Leer-Hinweis in Modal-Tabs. Heller, neutraler Grau-Hintergrund
   (--neutral-bg); NICHT --soft — das ist das IDF-Soft-Braun und macht die
   Box braun + den Text schwer lesbar. */
.sgds-modal-hint {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-3);
  background: var(--neutral-bg);
  border-left: 3px solid var(--accent);
  border-radius: var(--idf-form-radius);
  color: var(--ink);
  font-size: var(--font-sm);
  line-height: 1.45;
}
.sgds-modal-hint i { color: var(--accent); margin-top: 2px; }

/* ---- TOM-Sub-Liste -------------------------------------------------- */

.sgds-toms-tab { display: block; }

.sgds-toms-listhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--space-4) 0 var(--space-2);
}
.sgds-toms-listhead > span { font-weight: 600; color: var(--ink); }

.sgds-toms-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sgds-tom-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: var(--space-2);
}
.sgds-tom-row.is-done .sgds-tom-titel { color: var(--mid); text-decoration: line-through; }

.sgds-tom-kat { white-space: nowrap; }

.sgds-tom-titel {
  width: 100%;
  height: var(--idf-form-h);
  padding: var(--idf-form-padding);
  border: var(--idf-form-border);
  border-radius: var(--idf-form-radius);
  background: var(--white);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--idf-form-font);
  box-sizing: border-box;
}
.sgds-tom-titel:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* ============================================================
   DSFA-Tab (Embed) — safeguard_ds_dsfa + _risiken, Risikomatrix
   Vorbild: SafeGuard-GBU. Additiv, Token-basiert; Pillen-/Input-
   Geometrie kommt aus idf-form bzw. den Shared-Bausteinen.
   ============================================================ */

.sgds-dsfa-tab { display: block; }

.sgds-dsfa-schwelle {
  border: var(--idf-form-border);
  border-radius: var(--idf-form-radius);
  background: var(--neutral-bg);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sgds-dsfa-schwelle-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.sgds-dsfa-schwelle-title { font-weight: var(--weight-bold); color: var(--ink); }
.sgds-dsfa-krit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sgds-dsfa-krit { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-sm); color: var(--ink); }
.sgds-dsfa-krit small { color: var(--mid); }
.sgds-dsfa-krit.is-yes > i { color: var(--primary); }
.sgds-dsfa-krit.is-no  > i { color: var(--mid); opacity: 0.5; }
.sgds-dsfa-schwelle-manual { margin-top: var(--space-2); }

/* DSFA-Empty-State kommt seit Tranche L4 (#198) aus dem Shared-Block
   _shared/blocks/empty-state ($useEmptyState in verarbeitungen.php):
   .idf-empty-state.is-compact - Icon 28px, Aktions-Button als direktes
   Kind erlaubt. Normierungen laut Scout-Empfehlung: Icon --mid/0.6 ->
   --soft/0.5, padding space-8 -> space-6 vertikal, gap space-3 -> space-2. */

.sgds-dsfa-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}
.sgds-dsfa-head-meta { display: flex; align-items: center; gap: var(--space-2); }

.sgds-dsfa-section { margin-bottom: var(--space-6); }
.sgds-dsfa-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.sgds-dsfa-h {
  margin: 0 0 var(--space-3);
  font-size: var(--font-base);
  font-weight: var(--weight-bold);
  color: var(--ink);
}
.sgds-dsfa-section-head .sgds-dsfa-h { margin-bottom: 0; }
.sgds-dsfa-count {
  display: inline-block;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--neutral-bg);
  color: var(--mid);
  font-size: var(--font-xs);
  text-align: center;
}

.sgds-dsfa-risiken { display: flex; flex-direction: column; gap: var(--space-3); }

.sgds-dsfa-risiko {
  padding: var(--space-3);
  border: var(--idf-form-border);
  border-radius: var(--idf-form-radius);
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.sgds-dsfa-risiko-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.sgds-dsfa-risiko-kat { flex: 1 1 auto; min-width: 0; }
.sgds-dsfa-risiko-beschr {
  width: 100%;
  padding: var(--idf-form-padding);
  border: var(--idf-form-border);
  border-radius: var(--idf-form-radius);
  background: var(--white);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--idf-form-font);
  box-sizing: border-box;
  resize: vertical;
}
.sgds-dsfa-risiko-beschr:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.sgds-dsfa-matrix { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.sgds-dsfa-matrix-block {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sgds-dsfa-matrix-label { font-size: var(--font-xs); color: var(--mid); text-transform: uppercase; letter-spacing: 0.03em; }
.sgds-dsfa-matrix-row { display: flex; align-items: center; gap: var(--space-2); }
.sgds-dsfa-ws { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.sgds-dsfa-ws > span { font-size: var(--font-xs); color: var(--mid); }

.sgds-dsfa-ampel {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: var(--idf-form-h);
  padding: 0 var(--space-2);
  border-radius: var(--idf-form-radius);
  font-weight: var(--weight-bold);
  font-size: var(--font-base);
}
.sgds-dsfa-ampel.is-leer     { background: var(--neutral-bg); color: var(--mid); border: var(--idf-form-border); }
.sgds-dsfa-ampel.is-niedrig  { background: var(--tint-confirm); color: var(--confirm); }
.sgds-dsfa-ampel.is-mittel   { background: var(--tint-orange);  color: var(--orange); }
.sgds-dsfa-ampel.is-hoch     { background: var(--tint-primary);  color: var(--primary); }
.sgds-dsfa-ampel.is-sehrhoch { background: var(--primary);       color: var(--white); }

.sgds-dsfa-top > summary { cursor: pointer; color: var(--mid); font-size: var(--font-sm); }

.sgds-dsfa-risiko-foot { display: flex; gap: var(--space-2); align-items: center; }

.sgds-dsfa-historie { margin-top: var(--space-4); }
.sgds-dsfa-historie > summary { cursor: pointer; color: var(--mid); font-size: var(--font-sm); }
.sgds-dsfa-historie-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.sgds-dsfa-historie-row {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--font-sm);
  color: var(--mid);
}

/* ============================================================
   Erklärung-Tab (read-only Hilfe) — Pendant zu sg-erklaerung (Arbeitsschutz)
   ============================================================ */

.sgds-erklaerung-wrap { display: flex; flex-direction: column; gap: var(--space-4); }

.sgds-erklaerung-section {
  padding: var(--space-3);
  border: var(--idf-form-border);
  border-radius: var(--idf-form-radius);
  background: var(--white);
}
.sgds-erklaerung-section-hinweis {
  background: var(--neutral-bg);
  border-left: 3px solid var(--accent);
}
.sgds-erklaerung-heading {
  margin: 0 0 var(--space-2);
  font-size: var(--font-base);
  font-weight: var(--weight-bold);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.sgds-erklaerung-section-hinweis .sgds-erklaerung-heading i { color: var(--accent); }
.sgds-erklaerung-text { margin: 0; line-height: 1.5; color: var(--ink); font-size: var(--font-sm); }
.sgds-erklaerung-list {
  margin: 0;
  padding-left: 1.2em;
  line-height: 1.6;
  color: var(--ink);
  font-size: var(--font-sm);
}
.sgds-erklaerung-list li { margin-bottom: 2px; }
.sgds-erklaerung-link { color: var(--accent); text-decoration: none; font-weight: var(--weight-bold); }
.sgds-erklaerung-link:hover { text-decoration: underline; }
.sgds-erklaerung-link i { font-size: 0.85em; }