/**
 * SafeGuard v2 — Modul-Styles
 *
 * Nutzt konsequent die Design-Tokens aus _shared/tokens/design-tokens/idf-tokens.css.
 * Layout und Karten-Pattern spiegeln das Dashboard-Modul (`.ds-hub-*`),
 * damit SafeGuard sich nahtlos in die v2-App-Familie einfügt.
 *
 * Konvention:
 *   - Modul-Präfix `sg-`
 *   - Keine magischen Hex-Werte, keine harten Pixel-Werte
 *   - Spacings über var(--space-*), Typo über var(--font-*) / var(--weight-*)
 *   - Radius über var(--radius-*)
 *   - Sub-Tab-Nav und Ampel-Punkt sind die einzigen Modul-Originals;
 *     alles andere folgt dem Dashboard-/_shared-Pattern.
 */

/* ============================================================
   Page-Layout
   ============================================================ */

.sg-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) {
  .sg-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 auf
   großen Monitoren). Listen-/BG-Ready-Seiten behalten den
   `.sg-main`-Default, weil dort die Lesbarkeit unter zu viel Breite
   leidet. ID wird in safeguard/index.php gesetzt. */
#sg-dashboard-page {
  max-width: none;
  padding: var(--space-8) var(--space-8) var(--space-12);
}

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

/* Sub-Navigation (Tabs): lebt jetzt zentral in _shared/blocks/app-subnav/
   (.idf-subnav). Tab-Liste/Markup: safeguard/_subnav.php. */

/* ============================================================
   Kennzahlen-Leiste (KPI-Strip) + Dashboard-Aktionen-Reihe
   ============================================================
   Seit v0.9.29 (Audit-Tranche L4, H2/#198) komplett aus dem Shared-
   Block `_shared/blocks/stat-card/idf-stat-card.css` (Flag
   $useStatCard in index.php): .idf-stats-head, .idf-stats-head-btn,
   .idf-stats, .idf-stat, .idf-stat-value, .idf-stat-label. Auch die
   Status-Farb-Zuordnung (is-confirm = erledigt/--confirm, is-warn =
   faellig/--yellow-text, is-danger = ueberfaellig/--primary) ist dort
   Shared-Default - kein Modul-Override noetig. */

/* ============================================================
   Bereichs-Grid (Dashboard-Karten)
   ============================================================
   Seit v0.9.29 (Audit-Tranche L4, H3/#199) komplett aus dem Shared-
   Block `_shared/blocks/hub-card/idf-hub-card.css` (Flag $useHubCard
   in index.php): .idf-hub (Grid + is-loading), .idf-hub-card mit
   -head/-icon/-title-wrap/-title/-desc-wrap/-desc/-body/-main/-score/
   -counters plus Delete-Pillen-Slot. Auch die Ampel-Toenung
   (is-rot/is-gelb/is-gruen/is-leer via Eisenhower-Tokens, Konsument
   setzt $useEisenhower) ist Shared-Default - kein Modul-Override.
   Bewusste Aenderung bei der Umstellung: der fruehere Hover-Lift
   (translateY(-2px)) entfaellt, die Karte hovert nur noch mit
   Accent-Border + --shadow-sm (Hover-Standard "kein Lift", siehe
   Block-README). Das tote .sg-board-head (Button lebt seit v0.9.7
   im Stats-Kopf) ist mit entsorgt.

   Der Dashboard-Empty-State (vorher .sg-empty, dashed Box) kommt aus
   `_shared/blocks/empty-state/idf-empty-state.css` (Flag
   $useEmptyState): .idf-empty-state.is-boxed (H1/#198). */

/* ============================================================
   Prüfpunkt-Liste (pruefpunkte.php)
   Spalten: Bereich | Titel | Typ | Nächste Prüfung | Erledigt |
            Nachweis | Detail
   ============================================================ */

main.sg-list-main {
  /* min-height kommt aus Shared .idf-list-page (#193). Padding kommt
     teilweise aus idf-list-page, aber wir setzen die Tabs darüber
     selbst — die brauchen kein page-padding. */
  padding: 0;
}

.sg-grid {
  /* 11 Spalten (seit v0.8.3):
     1) Erledigt-Pille (52, Done-Toggle)
     2) Nachweis-Pille (44, Icon-only)
     3) GBU-Indicator (44, Icon-only — Haken wenn aktive GBU vorhanden)
     4) Titel + Meta-Zeile (Rechtsgrundlage · Raum) — flexibel (220 min)
     5) Bereich (Text mit Icon-Praefix, 280 px)
     6) Status-Typ-Badge (110)
     7) Verantwortlich (M2O auf akteure, 170 px)
     8) Nächste Prüfung mit Indicator (150)
     9) Wichtig-Flag (Eisenhower, Icon-only, 44)
     10) Dringend-Flag (Eisenhower, Icon-only, 44)
     11) Loeschen (52, Icon-Button)
     Doppelklick auf Zeile oeffnet Detail. */
  /* Breiten aus der CSS-Variable (col-resize-Baustein); Fallback = Defaults. */
  grid-template-columns: var(--sg-cols,
    52px 44px 44px minmax(220px, 1fr) 280px 110px 170px 150px 44px 44px 52px);
  align-items: stretch;
  gap: 0;
}

/* Icon-only-Headers (Done, Nachweis, GBU, W, D): Padding/Center/overflow
   liefert seit Phase 4 die Shared-Klasse `.idf-list-cell-action`. Icon-
   Typografie (13 px / opacity 0.7 / mid) liefert `.idf-list-thead i` aus
   _shared/list-grid. Markup setzt beide Klassen — kein safeguard.css-
   Override mehr nötig.
   Standalone `.sg-erledigt-toggle` für die Filter-Bar ist entfernt: das
   Markup nutzt jetzt `.idf-list-toggle` direkt (siehe pruefpunkte.php
   v0.10.4+). Die Modal-Variante `.idf-form .sg-erledigt-toggle` (40 ×
   40 mit Confirm-Aktiv-Farbe) bleibt weiter unten erhalten. */

/* Bereichs-Zelle als regulaere Text-Spalte (kein Pill-Akzent mehr).
   Spiegelt das Aufgaben-Pattern fuer Zustaendig/Unternehmen: kleines
   Praefix-Icon, dann der Klartext. Truncate bei Ueberlauf.
   Schriftgroesse + Gewicht erbt jetzt vom Standard (16px / regular),
   damit Bereich im gleichen Atemzug wie Titel/Typ liest. */
.idf-list-rows .idf-list-row .idf-list-grid > div.sg-cell-bereich {
  color: var(--ink);
  gap: 6px;
}

/* Verantwortlich-Cell: Klartext-Name "Nachname, Vorname". Inline-Edit-
   Host fuer Pen-Button-Hover. Truncate bei Ueberlauf. */
.idf-list-rows .idf-list-row .idf-list-grid > div.sg-cell-verant {
  color: var(--ink);
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

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

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

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

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

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

/* Status-Typ-Pille: Color-Modifier-only — Geometrie/Typografie liefert
   das shared `.idf-pill-tag`. Markup: <span class="idf-pill-tag
   sg-status-typ-badge is-pflicht">Pflicht</span>. */
.sg-status-typ-badge.is-kritisch   { background: var(--tint-primary); color: var(--primary); }
.sg-status-typ-badge.is-pflicht    { background: var(--tint-orange); color: var(--orange); }
.sg-status-typ-badge.is-empfehlung { background: var(--tint-accent); color: var(--accent); }

/* Bearbeitungs-Status-Pille in der Titel-Zelle. Color-Modifier-only,
   Geometrie aus shared `.idf-pill-tag`. „offen" wird nicht gerendert
   (statusBadge() liefert ""), nur „In Bearbeitung" / „Erledigt" bekommen
   ein Badge. */
.sg-status-badge[data-status="in_bearbeitung"] { background: var(--tint-orange); color: var(--orange); }
.sg-status-badge[data-status="erledigt"]       { background: var(--tint-confirm); color: var(--confirm); }

/* Datum-Zelle in der Liste — zweizeilig (Datum + Hinweis "in X Tagen").
   Cell selbst ist row-flex, damit der Pen-Button rechts neben dem
   zweizeiligen Inner-Wrapper sitzen kann. Der Inner-Wrapper
   (.sg-date-inner) macht column-flex fuer die zwei Zeilen.
   WICHTIG: Diese Regeln gelten nur fuer Body-Cells, nicht fuer den
   Header (sonst wuerde der Header-Text falsch ausgerichtet). */
.idf-list-rows .idf-list-row .idf-list-grid > .sg-cell-date {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}

.sg-date-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.sg-cell-date .sg-date-main {
  color: var(--ink);
}

.sg-cell-date .sg-date-hint {
  font-size: var(--font-xs);
  color: var(--mid);
}

.sg-cell-date.is-overdue .sg-date-main {
  color: var(--primary);
  font-weight: var(--weight-bold);
}

.sg-cell-date.is-soon .sg-date-main {
  color: var(--yellow-text);
  font-weight: var(--weight-semi);
}

.sg-cell-date .sg-date-empty {
  color: var(--soft);
  font-style: italic;
}

/* Erledigt-Pille (linke Spalte) — nutzt die Shared `.idf-list-done-pill`
   aus _shared/list-grid. Sie behaelt das Aufgaben-Standard-Stufungs-
   Verhalten: opacity 0.2 idle / 0.6 row-hover / 1 hover/aktiv. Das
   passt zum Done-Pille-Pattern bei Aufgaben — der Check ist nur dann
   prominent, wenn man drueber geht oder er gesetzt ist. */
.sg-list-rows .idf-list-row:hover .idf-list-done-pill { opacity: 0.6; }

/* Nachweis-Pille (Spalte 2, direkt neben der Erledigt-Pille) — nutzt
   dieselbe Opazitaets-Staffelung wie die Erledigt-Pille (Shared
   `.idf-list-done-pill`: ~0.2 idle / 0.6 row-hover / 1 icon-hover/aktiv).
   Aktiv-Background: Confirm-Grün (Shared-Default) — User-Wunsch
   2026-05-19, alle drei vorderen Pillen (Erledigt / Nachweis / GBU)
   im selben Grün. Vorher war die Nachweis-Pille Accent-Blau, das ist
   visuell aus der Reihe gefallen. Keine eigenen Color-Overrides mehr
   nötig, alles kommt aus dem Shared-Default. */

/* Cell-Container für die Toggles und Flag-Pillen: zentriert, kein Padding. */
.sg-list-rows .idf-list-row .idf-list-grid > .sg-cell-done-toggle,
.sg-list-rows .idf-list-row .idf-list-grid > .sg-cell-nachweis-pill,
.sg-list-rows .idf-list-row .idf-list-grid > .sg-cell-gbu-pill,
.sg-list-rows .idf-list-row .idf-list-grid > .sg-cell-flag {
  justify-content: center;
  padding: 0;
}

/* GBU-Indikator in der Liste: gleicher visueller Stil wie Erledigt-Pille
   (grüner Check-Hintergrund), nur mit Shield-Icon statt Häkchen. Read-
   only — kein Klick-Handler, keine Hover-Animation, weil der eigentliche
   GBU-Workflow im Modal-Tab läuft. */
.sg-list-rows .idf-list-row .sg-cell-gbu-pill .idf-list-done-pill {
  cursor: default;
}
.sg-list-rows .idf-list-row .sg-cell-gbu-pill .idf-list-done-pill.is-active {
  background: var(--confirm, #0c998e);
  color: var(--white);
}

/* Eisenhower-Flag-Pillen in der Liste: Compact-Look kommt seit #174/T9
   aus dem Shared `.idf-list-cell-action .idf-flag-check.is-compact`
   (idf-flag-check.css v1.6.0) — kein Cell-Override mehr. */

/* Row-Hover ist zweigeteilt:
   - Rows OHNE eh-q-Klasse (kein Eisenhower-Tint): Default-Hover aus
     idf-list-grid (`#f8f8f8`) wird durch `:not(.idf-eh-row)` geblockt.
     Wir setzen `idf-eh-row` aber NUR auf Rows mit q1/q2/q3 — Rows ohne
     Flags bleiben plain `.idf-list-row` und kriegen den Default-Hover.
   - Rows MIT eh-q1/q2/q3: filter:brightness analog Aufgaben, damit der
     Pastell-Tint beim Hover sichtbar leicht abdunkelt. */
.idf-list-rows .idf-list-row.eh-q1:hover,
.idf-list-rows .idf-list-row.eh-q2:hover,
.idf-list-rows .idf-list-row.eh-q3:hover {
  filter: brightness(0.96);
}

/* Titel-Zelle in der Liste — Hauptzeile + Meta-Zeile (Rechtsgrundlage ·
   Raum). Gleiche Body-Scoping-Regel wie .sg-cell-date — sonst wuerde
   der Header-Text "Titel" oben statt mittig stehen. */
.idf-list-rows .idf-list-row .idf-list-grid > .sg-cell-titel {
  font-weight: var(--weight-medium);
  color: var(--ink);
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.sg-cell-titel .sg-titel-main {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.sg-cell-titel .sg-titel-meta {
  font-size: var(--font-xs);
  color: var(--mid);
  font-weight: var(--weight-regular);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Group-Wrapper um Titel-Text + Pen-Button — sitzt in der oberen
   Zeile der Titel-Zelle, neben optionaler Meta-Zeile darunter. Der
   Pen wird ueber `.idf-inline-edit-host` automatisch eingeblendet. */
.sg-titel-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
}

.sg-titel-group .sg-titel-main {
  flex: 0 1 auto;
  min-width: 0;
}

/* Beim aktiven Inline-Edit: Group expandiert auf volle Cell-Breite,
   damit das Input genug Platz hat. Default ist `flex: 0 1 auto`. */
.sg-titel-group.is-editing {
  flex: 1 1 auto;
  width: 100%;
}

/* Inline-Edit-Input-Skins .sg-titel-edit / .sg-date-edit entfernt (Etappe E
   #153): Der Cell-Dispatcher haengt nur noch .idf-inline-edit-input ans Input
   (Shared-Skin aus _shared/functions/inline-editing/idf-inline-edit.css); die
   modul-lokalen Klassen wurden seit der Cell-Dispatcher-Migration nicht mehr
   emittiert. Datums-Edit laeuft ohnehin ueber IDF.datePicker (kein Text-Input). */

/* Save-Animation (Confirm-Bar links an der Row) bei Inline-Edit. */
.idf-list-row.is-saving {
  box-shadow: inset 3px 0 0 var(--confirm);
}

/* ============================================================
   Modal-Form-Overrides (Pruefpunkt-Detail im Standard-Artefakt)
   — Spiegelt das Aufgaben-Pattern: alle Pillen/Toggles im Modal
   sind 40 px hoch (= Form-Input-Hoehe), border-radius 3 px
   (scharfkantig wie die Inputs), Aktiv-State farbig. Konsequenz:
   alles im Form-Block wirkt wie ein zusammenhaengender Block,
   keine runden Pillen mehr neben eckigen Inputs.
   ============================================================ */

/* Inline-Container fuer Toggle + Begleit-Element (Datum oder Hinweis-Text). */
.idf-form .sg-toggle-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  min-height: var(--idf-form-h);
}

.idf-form .sg-toggle-row .sg-toggle-hint {
  font-size: var(--font-sm);
  color: var(--mid);
  line-height: 1.3;
}

/* Inline-Datumsfeld neben dem Erledigt-Toggle. flex:1 frisst den
   Restplatz in der halben Cell. Optisch leicht abgesenkt im Gewicht,
   weil der Toggle der primaere Trigger ist. */
.idf-form .sg-toggle-row .sg-erledigt-am-inline {
  flex: 1 1 auto;
  min-width: 0;
  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;
}

.idf-form .sg-toggle-row .sg-erledigt-am-inline:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

/* Wenn erledigt=true ist das Datumsfeld gesperrt — analog Aufgaben,
   wo nach setErledigtState der Fortschritt-Slider und das erledigt_am-
   Datum disabled werden. Visuell etwas duenner gezeichnet, damit klar
   ist: "ungrau bedient den Toggle daneben, dann ist das Feld wieder
   editierbar". */
.idf-form .sg-toggle-row .sg-erledigt-am-inline:disabled,
.idf-form .sg-toggle-row .sg-erledigt-am-inline[disabled] {
  background: var(--idf-form-bg-disabled);
  color: var(--idf-form-color-disabled);
  cursor: not-allowed;
}

/* Erledigt-Toggle im Modal — analog `.sa-erledigt-toggle` aus Aufgaben.
   White default, Confirm-Gruen aktiv, 40x40, scharfkantig (3 px). */
.idf-form .sg-erledigt-toggle,
.idf-form .sg-nachweis-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--idf-form-h);
  height: var(--idf-form-h);
  border-radius: var(--idf-form-radius);
  border: var(--idf-form-border);
  background: var(--white);
  color: var(--mid);
  cursor: pointer;
  padding: 0;
  font-size: var(--idf-form-font);
  box-sizing: border-box;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.idf-form .sg-erledigt-toggle:hover,
.idf-form .sg-nachweis-toggle:hover {
  border-color: var(--mid);
}

.idf-form .sg-erledigt-toggle.is-active {
  background: var(--confirm);
  color: var(--white);
  border-color: var(--confirm);
}

.idf-form .sg-nachweis-toggle.is-active {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}

.idf-form .sg-erledigt-toggle.is-active:hover,
.idf-form .sg-nachweis-toggle.is-active:hover {
  filter: brightness(1.06);
}

/* Flag-Check-Pillen im Modal-Form — gleich hoch + gleich eckig wie
   die Inputs. Default-`idf-flag-check` ist 6 px rund mit eigenem
   Padding; im Form-Kontext muessen wir das auf das Form-Schema
   ziehen (40 px, scharfkantig). Spiegelt 1:1 das aufgaben.css-
   Override fuer `.idf-form .idf-flag-check`. */
.idf-form .idf-flag-check {
  height: var(--idf-form-h);
  padding: 0 14px;
  border-radius: var(--idf-form-radius);
  font-size: var(--idf-form-font);
  box-sizing: border-box;
  line-height: 1;
}

.idf-form .idf-flag-check .idf-flag-check-icon {
  font-size: var(--idf-form-font);
}

.idf-form .idf-flag-check .idf-flag-check-label {
  line-height: 1;
}

/* Falls jemand spaeter doch compact im Modal will: quadratisch. */
.idf-form .idf-flag-check.is-compact {
  width: var(--idf-form-h);
  padding: 0;
  justify-content: center;
}

/* Eisenhower-Status-Pille rechts in der Flag-Group — gleiche Hoehe
   wie die Pillen daneben. */
.idf-form .idf-eh-status {
  height: var(--idf-form-h);
  padding: 0 14px;
  border-radius: var(--idf-form-radius);
  font-size: var(--idf-form-font);
  box-sizing: border-box;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

/* ============================================================
   Tab 3 — Was ist zu tun (Checkliste)
   Mini-CRUD-Liste pro Pruefpunkt, Done-Pille + Inline-Edit-Titel +
   "Zu Aufgabe machen"-Button + Loeschen.
   ============================================================ */

.sg-checkliste-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-2);
}

.sg-checkliste-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.sg-cp-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--white);
  transition: background 80ms ease;
}

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

.sg-cp-row.is-erledigt .sg-cp-titel-text {
  text-decoration: line-through;
  color: var(--mid);
}

/* Main-Stack: nimmt den restlichen Platz, hält Titel-Zeile + optionale
   "↗ Aufgabe AG-…"-Annotation. Annotation rendert nur, wenn der
   Checkpunkt eine verknüpfte Aufgabe hat (cp.aufgabe gesetzt).
   Layout-Pattern analog protokolle .pp-titel-stack (Issue #104). */
.sg-cp-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  gap: 2px;
}

/* Titel-Zeile innerhalb des Main-Stacks: Text + Pen-Button. */
.sg-cp-titel {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.sg-cp-titel-text {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--font-base);
  color: var(--ink);
}

/* Skin via .idf-inline-edit-input (Shared) — hier nur Layout. */
.sg-cp-titel-edit {
  width: 100%;
  box-sizing: border-box;
}

.sg-cp-titel.is-editing {
  flex: 1 1 auto;
  width: 100%;
}

/* Flag-Pille (ist_aufgabe) am Zeilen-Ende, direkt vor dem Lösch-Button.
   Mount-Container — Inhalt kommt programmatisch via IDF.createFlagCheck
   (Issue #104). Pillen-Layout (compact, 28px) erbt aus
   _shared/blocks/flag-check/idf-flag-check.css. */
.sg-cp-flag-mount {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}

.sg-cp-row .idf-list-delete-btn {
  flex: 0 0 auto;
}

/* Add-Button unten — gestrichelt, volle Breite wie Aufgaben-inline-add. */
.sg-checkliste-add {
  width: 100%;
  border-style: dashed !important;
  justify-content: center;
}

/* Empty-State im Checkliste-Tab: shared .idf-empty-state.is-compact
   (blocks/empty-state, H1/#198) - kein Modul-CSS mehr. */

/* ============================================================
   Tab 6 — Erklärung (Read-Anzeige)
   ============================================================ */

.sg-erklaerung-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-2);
}

.sg-erklaerung-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sg-erklaerung-section-hinweis {
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--yellow) 8%, transparent);
  border-left: 3px solid var(--yellow);
  border-radius: var(--radius-md);
}

.sg-erklaerung-heading {
  font-size: var(--font-md);
  font-weight: var(--weight-bold);
  color: var(--ink);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sg-erklaerung-section-hinweis .sg-erklaerung-heading {
  color: var(--yellow-text);
}

.sg-erklaerung-text {
  font-size: var(--font-base);
  line-height: var(--leading-relax);
  color: var(--ink);
  margin: 0;
}

/* Rechtsgrundlage-Quelle als Link (rechtsgrundlage_url) — öffnet in
   neuem Tab. Akzentfarbe + dezentes External-Link-Icon. */
.sg-erklaerung-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: var(--weight-medium);
}

.sg-erklaerung-link:hover {
  text-decoration: underline;
}

.sg-erklaerung-link i {
  font-size: var(--font-xs);
  margin-left: 2px;
}

/* Empty-States (Erklaerung-Tab + Listen-Empty/-Error): shared
   .idf-empty-state (+ .idf-empty-state-hint) aus blocks/empty-state
   (H1/#198) - kein Modul-CSS mehr. */

/* ============================================================
   Unterlagen-Mappe (unterlagen.php / safeguard-unterlagen.js)
   6-Spalten-Grid: Titel · Kategorie-Badge · Prüfpunkt ·
   Gültig bis · Datei (Icon) · Löschen (Icon).
   ============================================================ */

.sg-unterlagen-grid {
  /* Titel vorn (flexibel), dann Kategorie; Prüfpunkt breit genug,
     dass die Klartext-Titel nicht zu früh abgeschnitten werden. */
  /* Breiten aus der CSS-Variable (col-resize-Baustein); Fallback = Defaults. */
  grid-template-columns: var(--sg-unterlagen-cols,
    minmax(220px, 1fr) 150px 320px 160px 56px 52px);
  align-items: stretch;
  gap: 0;
}

/* Vorlagen-Grid seit v0.6.8 — schlanker als das Unterlagen-Grid:
   nur Titel, Kategorie, Datei (Icon), Löschen (Icon). Kein Prüfpunkt-
   Bezug, kein Gültig-bis, weil das für Vordrucke unsinnig ist. */
.sg-vorlagen-grid {
  /* Breiten aus der CSS-Variable (col-resize-Baustein); Fallback = Defaults. */
  grid-template-columns: var(--sg-vorlagen-cols,
    minmax(260px, 1fr) 180px 56px 52px);
  align-items: stretch;
  gap: 0;
}

/* Icon-only-Header (Datei, Löschen): Markup nutzt `.idf-list-cell-action`
   (Padding/Center/overflow visible) + Shared-Thead-Icon-Style (13 px /
   opacity 0.7 / mid). Kein Modul-Override mehr nötig. */

/* Kategorie-Pille — Color-Modifier-only, Geometrie aus shared
   `.idf-pill-tag`. Markup: <span class="idf-pill-tag sg-kategorie-bestellung">
   Bestellung</span>. Bewusst zurückhaltender als die Status-Typ-Pillen
   der Prüfpunkte (fachliche Dringlichkeit); Kategorien sind nur eine
   Sortier-Dimension. */
.sg-kategorie-bestellung        { background: var(--tint-accent); color: var(--accent); }
.sg-kategorie-gbu               { background: var(--tint-primary);  color: var(--primary); }
.sg-kategorie-unterweisung      { background: var(--tint-orange); color: var(--orange-text); }
.sg-kategorie-pruefprotokoll    { background: var(--tint-confirm); color: var(--confirm); }
/* Grau-Tint #636678/14% belassen: kein Token-Aequivalent, fachliche
   Kategorie-Farbe; Audit L5/#201, dokumentierte Ausnahme. */
.sg-kategorie-betriebsanweisung { background: rgba(99, 102, 120, 0.14); color: var(--mid); }
.sg-kategorie-sonstiges         { background: var(--tint-neutral);      color: var(--mid); }

/* Prüfpunkt-Zelle — Klartext, truncate bei Überlauf. */
.idf-list-rows .idf-list-row .idf-list-grid > div.sg-cell-pruefpunkt {
  color: var(--ink);
}
.sg-cell-pruefpunkt .sg-pp-inline {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.sg-cell-pruefpunkt .sg-pp-empty { color: var(--soft); }

/* Gültig-bis-Zelle nutzt seit SSOT-Phase 4 die shared `.idf-list-cell-
   two-line` (Datum 16 px wie andere Cells, „in N Tagen"/„X Tage
   abgelaufen" als 12-px-Sub-Line). Modul-spezifisch bleibt nur die
   Akzent-Färbung des Datums-Texts bei abgelaufen / läuft bald. */
.sg-cell-gueltig.is-overdue .idf-list-cell-two-line-text {
  color: var(--primary);
  font-weight: var(--weight-bold);
}
.sg-cell-gueltig.is-soon .idf-list-cell-two-line-text {
  color: var(--yellow-text);
  font-weight: var(--weight-semi);
}

/* Datei-Zelle — Icon-only Download-Link bzw. Em-Dash wenn leer.
   Gleiche Geometrie + Tonalität wie die Listen-Pillen: schwarzes
   Icon, grauer Hover-Background (nicht akzentfarbig). */
.idf-list-rows .idf-list-row .idf-list-grid > .sg-cell-datei {
  justify-content: center;
}
/* `.sg-datei-link` ist gefallen — Datei-Download-Pille nutzt jetzt
   shared `.idf-list-action-link` aus `_shared/functions/list-view/grid-css/idf-list-grid.css`.
   Konvergent mit Werkzeuge/Zubehör/Verbrauchsmaterial-Unterlagen-
   Download und BA-Druck (vorher hatte BA keine Style, weil
   `.sg-cell-datei .sg-datei-link`-Scope den `.sg-cell-print`-Selector
   nicht traf — User-Bug 2026-05-18). */
.sg-cell-datei .sg-datei-empty { color: var(--soft); }

/* Löschen-Zelle — nutzt den Shared-Button `.idf-list-delete-btn` aus
   _shared/list-grid (28×28, schwarzes fa-solid-Icon, rot + roter
   Hover-Background bei Direkt-Hover). Der Shared-Default ist
   `opacity: 0`; bei Row-Hover wird der Button sichtbar — gleiche
   Linie wie Aufgaben/Protokolle (`.al-row:hover` / `.pl-row:hover`). */
.idf-list-rows .idf-list-row .idf-list-grid > .sg-cell-delete {
  justify-content: center;
}
.idf-list-rows .idf-list-row:hover .idf-list-delete-btn { opacity: 0.6; }

/* ============================================================
   Unterlagen-Tab im Prüfpunkt-Modal (buildUnterlagenTab in
   safeguard-pruefpunkte.js) — Read-Liste der per M2O `pruefpunkt`
   verknüpften safeguard_unterlagen.
   ============================================================ */

.sg-modal-unterlagen {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sg-modal-unterlagen-list {
  display: flex;
  flex-direction: column;
}

.sg-modal-unterlagen-row {
  /* Spalten: Titel (flex) · Gültig bis · Kategorie-Badge · Download.
     Kategorie sitzt bewusst hinten, der Titel führt die Zeile. */
  display: grid;
  grid-template-columns: 1fr 110px 150px 32px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background 120ms ease;
}
.sg-modal-unterlagen-row:last-child { border-bottom: 0; }
/* Doppelklick öffnet das Unterlagen-Modal — Hover signalisiert das. */
.sg-modal-unterlagen-row:hover { background: var(--bg-hover); }

.sg-modal-unterlagen-titel {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
  font-weight: var(--weight-medium);
}

.sg-modal-unterlagen-gueltig {
  font-size: var(--font-sm);
  color: var(--mid);
}
.sg-modal-unterlagen-gueltig.is-overdue {
  color: var(--primary);
  font-weight: var(--weight-bold);
}
.sg-modal-unterlagen-gueltig.is-soon {
  color: var(--yellow-text);
  font-weight: var(--weight-semi);
}

/* Download-Link — gleiche Tonalität wie in der Unterlagen-Liste:
   schwarzes Icon, grauer Hover-Background. */
.sg-modal-unterlagen-datei {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  color: var(--ink, #111);
  font-size: 14px;
  text-decoration: none;
  transition: background 120ms ease;
}
.sg-modal-unterlagen-datei:hover { background: var(--shade-15); }
.sg-modal-unterlagen-nodatei {
  color: var(--soft);
  text-align: center;
}

.sg-modal-unterlagen-loading {
  margin: 0;
  padding: var(--space-3) 0;
  color: var(--mid);
  font-size: var(--font-sm);
}

/* Empty-State im Unterlagen-Tab: shared .idf-empty-state.is-compact
   (blocks/empty-state, H1/#198) - kein Modul-CSS mehr. */

/* "+ Neue Unterlage"-Button im Unterlagen-Tab — gestrichelt + volle
   Breite, gleiche Linie wie .sg-checkliste-add im "Was ist zu tun"-Tab. */
.sg-modal-unterlagen-add {
  width: 100%;
  border-style: dashed !important;
  justify-content: center;
}

/* ============================================================
   BG-Ready-Check (bg-ready.php / safeguard-bg-ready.js)
   Vier Blöcke + Score-Header für die BG-Besichtigungs-Vorbereitung.
   Page-Layout kommt von `.sg-main` — gleiche Klasse wie das
   Dashboard (index.php), kein eigenes Layout für diese Seite.
   ============================================================ */

/* Druck-Kopf — nur in der Print-Ansicht sichtbar (siehe @media print). */
.sg-bgready-printhead {
  display: none;
}

/* ---- Score-Header --------------------------------------------------- */

.sg-bgready-score {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.sg-bgready-score-num {
  font-size: var(--font-xxl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  color: var(--ink);
  flex-shrink: 0;
}

.sg-bgready-score-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
}

.sg-bgready-score-label {
  font-size: var(--font-md);
  font-weight: var(--weight-semi);
  color: var(--ink);
}

.sg-bgready-score-sub {
  font-size: var(--font-sm);
  color: var(--mid);
}

.sg-bgready-score-bar {
  height: 10px;
  border-radius: var(--radius-xs);
  background: var(--line);
  overflow: hidden;
}

.sg-bgready-score-bar-fill {
  height: 100%;
  border-radius: var(--radius-xs);
  background: var(--confirm);
  transition: width 200ms ease;
}

/* Score-Ampel: färbt Zahl + Balkenfüllung nach Bereitschaftsgrad.
   rot < 60 %, gelb < 90 %, grün ab 90 % — Logik im JS. */
.sg-bgready-score.is-rot   .sg-bgready-score-num,
.sg-bgready-score.is-rot   .sg-bgready-score-bar-fill { color: var(--primary); }
.sg-bgready-score.is-rot   .sg-bgready-score-bar-fill { background: var(--primary); }
.sg-bgready-score.is-gelb  .sg-bgready-score-num      { color: var(--yellow-text); }
.sg-bgready-score.is-gelb  .sg-bgready-score-bar-fill { background: var(--yellow); }
.sg-bgready-score.is-gruen .sg-bgready-score-num      { color: var(--confirm); }
.sg-bgready-score.is-gruen .sg-bgready-score-bar-fill { background: var(--confirm); }

/* ---- Toolbar (Druck-Button) ---------------------------------------- */

.sg-bgready-toolbar {
  display: flex;
  justify-content: flex-end;
}

/* ---- Block (Karte pro Sektion) ------------------------------------- */

.sg-bgready-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.sg-bgready-block-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-lg);
  font-weight: var(--weight-bold);
  color: var(--ink);
}

.sg-bgready-block-title i {
  font-size: var(--font-md);
  color: var(--mid);
}

/* Treffer-Zähler rechts neben dem Block-Titel. */
.sg-bgready-block-count {
  margin-left: auto;
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: var(--mid);
}

.sg-bgready-block-body {
  display: flex;
  flex-direction: column;
}

/* ---- Bereichs-Gruppe (Nachweise + Überfällige) --------------------- */

.sg-bgready-gruppe + .sg-bgready-gruppe {
  margin-top: var(--space-3);
}

.sg-bgready-gruppe-titel {
  font-size: var(--font-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mid);
  padding: var(--space-2) var(--space-3) var(--space-1);
}

/* ---- Eintrag (klickbare Zeile) ------------------------------------- */

.sg-bgready-eintrag {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background 120ms ease;
}

.sg-bgready-eintrag:last-child { border-bottom: 0; }
.sg-bgready-eintrag:hover { background: var(--bg-hover); }

/* Status-Punkt links — grün erledigt / rot offen. */
.sg-bgready-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sg-bgready-dot.is-gruen { background: var(--confirm); }
.sg-bgready-dot.is-gelb  { background: var(--yellow); }
.sg-bgready-dot.is-rot   { background: var(--primary); }

.sg-bgready-eintrag-titel {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
}

.sg-bgready-eintrag-meta {
  flex-shrink: 0;
  font-size: var(--font-sm);
  color: var(--mid);
  white-space: nowrap;
}

.sg-bgready-eintrag-meta.is-overdue {
  color: var(--primary);
  font-weight: var(--weight-semi);
}

/* Bearbeitungs-Status-Badge für offene Maßnahmen. */
.sg-bgready-massnahme-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-xs);
  font-size: var(--font-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  flex-shrink: 0;
}

.sg-bgready-massnahme-badge.is-offen {
  background: var(--tint-primary);
  color: var(--primary);
}

.sg-bgready-massnahme-badge.is-in_bearbeitung {
  background: var(--tint-orange);
  color: var(--orange);
}

/* Empty-State pro Block: shared .idf-empty-state.is-compact
   (+ .is-good fuer den "alles erledigt"-Positivfall) aus
   blocks/empty-state (H1/#198) - kein Modul-CSS mehr. */

/* ---- Druck-Ansicht — Übergabe-Liste für den BG-Termin -------------- */

@media print {
  /* Bildschirm-Chrome komplett raus. */
  .idf-app-sidebar,
  .idf-app-header,
  .idf-app-footer,
  .login-wrap,
  .idf-subnav,
  .sg-bgready-toolbar {
    display: none !important;
  }

  /* #app trägt im Normalbetrieb einen Sidebar-abhängigen Versatz —
     im Druck auf 0 ziehen, damit der Inhalt die volle Seite nutzt. */
  #app {
    margin: 0 !important;
  }

  /* `.sg-main` ist die geteilte Layout-Klasse — im Druck nur für die
     BG-Ready-Seite (per ID) auf volle Breite ohne Padding ziehen. */
  #sg-bgready-page {
    max-width: none;
    padding: 0 !important;
    gap: var(--space-4);
  }

  /* Druck-Kopf einblenden. */
  .sg-bgready-printhead {
    display: block !important;
    margin-bottom: var(--space-3);
  }

  .sg-bgready-printhead h1 {
    margin: 0 0 var(--space-1);
    font-size: var(--font-xl);
  }

  .sg-bgready-printhead p {
    margin: 0;
    font-size: var(--font-sm);
    color: var(--mid);
  }

  /* Blöcke nicht über Seitenumbrüche zerreißen. #000 bewusst: maximaler
     Druck-Kontrast im Print, var(--ink) #111 wuerde aufweichen - Audit
     L5/#201, dokumentierte Ausnahme. */
  .sg-bgready-block,
  .sg-bgready-score {
    break-inside: avoid;
    border: 1px solid #000;
  }

  .sg-bgready-eintrag {
    cursor: default;
    break-inside: avoid;
  }
}

/* ============================================================
   Adressen-Dashboard (index.php)
   Kacheln für wichtige Adressen + Ansprechpartner. Karten-Pattern
   spiegelt die Bereichs-Karten (jetzt shared `.idf-hub-card`) -
   gleiche Familie, nur mit Inhalt statt Verlinkung.
   ============================================================ */

.sg-adressen {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Head-Zeile der Adressen-Sektion seit v0.6.5 nur noch der „+ Adresse"-
   Button (rechts ausgerichtet) — die alte H2-Überschrift ist weg, der
   Reiter im App-Header benennt die Sektion bereits. */
.sg-adressen-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
}

.sg-adressen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-5);
}

.sg-adressen-loading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-6);
  color: var(--mid);
  font-size: var(--font-md);
}

/* Empty-/Setup-State: shared .idf-empty-state.is-boxed (dashed Box
   inkl. code-Skin) aus blocks/empty-state (H1/#198) - kein Modul-CSS. */

/* --- Einzelne Adress-Kachel --- */
/* Schrift-Maße und Karten-Geometrie analog zu den kompakten Hub-Karten
   (.idf-hub-card.is-compact in _shared/blocks/hub-card): 24-px-Padding,
   12-px-Radius, 160-px Mindesthöhe. Body-Schrift wird NICHT auf 1rem hochgesetzt -
   Karte erbt --font-md (14 px) wie die Dashboard-Tiles. Hover gibt
   nur Accent-Border + dezenten Shadow (kein translate), weil die
   Karten Inline-Edits + Comboboxen enthalten und ein Lift beim
   Tippen mitwackeln würde. */
.sg-adresse-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  min-height: 160px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  line-height: var(--leading-base);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.sg-adresse-card:hover {
  border-color: var(--accent);
  /* Schatten-Geometrie 0 2px 8px bewusst ausserhalb der Schatten-Tokens
     (--shadow-card waere 10px Blur, sichtbar weicher); Farbanteil 0.06 =
     var(--tint-neutral), render-identisch - Audit L5/#201, dokumentierte
     Ausnahme. */
  box-shadow: 0 2px 8px var(--tint-neutral);
}

.sg-adresse-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

/* Icon rahmenlos + ink-schwarz, Größe analog Dashboard-Icon-Bubble-
   Innenfläche (28 px wie .idf-hub-card.is-compact-Icons in
   _shared/blocks/hub-card). Bewusst KEINE Tönung und KEIN
   48x48-Bubble - Joerg möchte die Adress-Kachel ruhiger halten. */
.sg-adresse-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-size: 28px;
  flex-shrink: 0;
}

.sg-adresse-card-title-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
}

/* Titel — Font-Weight, Uppercase und Letter-Spacing kommen jetzt aus
   der Shared `.idf-headline`-Klasse (`_shared/tokens/design-tokens/idf-tokens.css`).
   Hier nur noch das, was die Karte spezifisch braucht: Größe, Color,
   Umbruch-Verhalten. Vorher hat das Modul-CSS `.idf-headline`
   überschrieben (gleiche Spezifität, später geladen → gewann mit
   font-weight: 600 + letter-spacing: 0.04em). */
.sg-adresse-card-title {
  font-size: var(--font-lg);
  color: var(--ink);
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

/* Pen-Affordance und Lösch-Pille kommen jetzt komplett aus Shared:
   `.idf-inline-edit-btn` (_shared/inline-edit) und
   `.idf-list-delete-btn` (_shared/list-grid). Modul-Markup nutzt die
   Shared-Klassen direkt — eigene `.sg-adresse-edit-btn`- und
   `.sg-adresse-delete`-Overrides entfernt.
   Die Delete-Pille braucht nur noch ein einziges Override: standard-
   mäßig versteckt der Shared-Stil sie via opacity:0 + pointer-events
   für list-rows; hier auf der Karte wollen wir denselben Effekt am
   Karten-Hover. */
.sg-adresse-card .idf-list-delete-btn {
  margin-left: auto;
  flex-shrink: 0;
}
.sg-adresse-card:hover .idf-list-delete-btn {
  opacity: 0.6;
  pointer-events: auto;
}
.sg-adresse-card .idf-list-delete-btn:hover {
  opacity: 1;
}

/* Felder-Wrapper — seit v0.6.5 ohne Label-Zeile, der Combobox-/Notiz-
   Wert ist selbst die „Anzeige". */
.sg-adresse-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Combobox füllt die Kachelbreite. */
.sg-adresse-combo {
  width: 100%;
}

.sg-adresse-combo .combobox {
  width: 100%;
}

/* Combobox-Trigger seit v0.6.5 als „normaler Text mit Inline-Edit"
   gestaltet — kein voller Rahmen + grauer Hintergrund mehr, sondern
   ein dezentes Hover-Highlight + Pfeil erst beim Drüberfahren. Beim
   Öffnen kriegt der Trigger die Akzent-Border + Fokus-Ring. */
.sg-adresse-card .combobox-trigger {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: var(--weight-medium);
  color: var(--ink);
  transition: background var(--motion-base, 120ms) ease,
              border-color var(--motion-base, 120ms) ease,
              box-shadow var(--motion-base, 120ms) ease;
}

.sg-adresse-card .combobox-trigger:hover {
  background: var(--shade-04);
  border-color: var(--line);
}

.sg-adresse-card .combobox-trigger:focus,
.sg-adresse-card .combobox-trigger:focus-visible {
  outline: none;
  background: var(--white);
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}

.sg-adresse-card .combobox-arrow {
  opacity: 0;
  transition: opacity var(--motion-base, 120ms) ease;
}

.sg-adresse-card .combobox:hover .combobox-arrow {
  opacity: 0.5;
}

.sg-adresse-card .combobox-trigger .combobox-placeholder {
  font-style: italic;
  font-weight: var(--weight-normal);
  color: var(--mid);
}

/* Ausgewählten Wert (Unternehmen-/Akteur-Name) fett anzeigen — er ist
   der „Visitenkarten-Name" der Kachel und soll als solcher heraussticken. */
.sg-adresse-card .combobox-trigger .combobox-value {
  font-weight: var(--weight-bold);
}

/* --- Kontaktblock (live aus dem verknüpften Unternehmen / Akteur) ---
   Seit v0.6.6 in 1rem (16 px). Seit v0.6.7 ohne graue Unterlegung —
   die Adresse fügt sich ruhiger in die Kachel ein. */
.sg-adresse-kontakt {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 0 var(--space-3);
  background: transparent;
  font-size: 1rem;
}

.sg-adresse-kontakt-ap {
  padding: 0 var(--space-3);
}

.sg-adresse-kontakt-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  line-height: var(--leading-snug);
  color: var(--ink);
}

.sg-adresse-kontakt-row i {
  width: 16px;
  margin-top: 3px;
  color: var(--mid);
  flex-shrink: 0;
}

.sg-adresse-kontakt-row a {
  color: var(--accent);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.sg-adresse-kontakt-row a:hover {
  text-decoration: underline;
}

.sg-adresse-kontakt-empty {
  margin: 0;
  font-size: var(--font-md);
  line-height: var(--leading-snug);
  color: var(--mid);
}

@media (max-width: 800px) {
  .sg-adressen-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   GBU-Tab — Gefährdungsbeurteilung im Prüfpunkt-Modal
   Aufbau: Header · Stammdaten · Gefährdungen (Wiederholgruppe
   mit Risikomatrix + TOP) · Wirksamkeitskontrolle · Historie.
   Bewusst nüchtern, weil rechtssicher dokumentierter Pflicht-
   Inhalt — kein Marketing-Look.
   ============================================================ */

.sg-gbu {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Empty-State im GBU-Tab: shared .idf-empty-state.is-compact
   (blocks/empty-state, H1/#198; Icon-Regel dort per >-Kind-Selektor,
   damit das Plus im "GBU anlegen"-Button unberuehrt bleibt).
   Textfarbe --ink wurde dabei auf den Shared-Default --mid normiert. */

/* Header: Versionsbadge · Status-Pille · Erstellt-Datum · Aktionen rechts. */
.sg-gbu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
}
.sg-gbu-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.sg-gbu-version {
  font-weight: var(--weight-semi);
  color: var(--ink);
}
/* Geprueft in L5/F6 (#201): bleibt bewusst lokal - Shared .idf-pill-tag
   erzwingt UPPERCASE/13px/6px-Radius, der Umbau waere nicht render-identisch.
   Bestaetigt die bestehende Bleibt-Entscheidung (CHANGELOG, Pillen-
   Vereinheitlichung: andere Design-Linie, Solid Soft-Green, 999px Radius). */
.sg-gbu-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
}
.sg-gbu-status-pill.is-aktiv {
  /* Phantom --green-bg aufgeloest: var(--pastel-green) #e6f4ea statt totem
     Fallback #e6f7ec - dokumentierte Mini-Abweichung, quasi unsichtbar
     (Audit L5/#201). Selbstreferenz-Fallback von --green-text entfernt. */
  background: var(--pastel-green);
  color: var(--green-text);
}
.sg-gbu-date-meta {
  font-size: var(--font-sm);
  color: var(--mid);
}

/* Sections — gleiche Tonalität wie sg-erklaerung-section. */
.sg-gbu-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sg-gbu-h {
  margin: 0;
  font-size: var(--font-md);
  font-weight: var(--weight-semi);
  color: var(--ink);
}
.sg-gbu-count {
  font-weight: var(--weight-regular);
  color: var(--mid);
}
.sg-gbu-required {
  color: var(--primary);
  font-weight: var(--weight-bold);
}

/* Stammdaten + Wirksamkeitskontrolle: Standard-idf-form-Layout. */
.sg-gbu-stamm-form,
.sg-gbu-wirk-form {
  margin-top: var(--space-1);
}

/* Read-only-Spiegel-Feld: zeigt Wert aus dem Eltern-Prüfpunkt (Bereich +
   Raum-Bereich) ohne Edit. Optik wie ein deaktiviertes Input, damit klar
   ist: hier wird nicht editiert, das pflegst du auf der Prüfpunkt-Ebene. */
.sg-gbu-mirror {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--mid);
  font-size: var(--font-sm);
}
.sg-gbu-mirror-hint {
  font-weight: var(--weight-regular);
  font-size: var(--font-xs, 0.6875rem);
  color: var(--mid);
  margin-left: 4px;
}

/* Date-Input Fälligkeits-Ampel — gleiches Muster wie sg-modal-unterlagen-gueltig. */
.sg-gbu-date-input.is-overdue {
  border-color: var(--primary);
  color: var(--primary);
  font-weight: var(--weight-semi);
}
.sg-gbu-date-input.is-soon {
  border-color: var(--yellow-text, #b58600);
  color: var(--yellow-text, #b58600);
}

/* Gefährdungs-Liste */
.sg-gbu-g-empty {
  padding: var(--space-3);
  color: var(--mid);
  font-style: italic;
  background: var(--bg);
  border-radius: var(--radius-sm);
  text-align: center;
}
.sg-gbu-g-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.sg-gbu-g-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--ink, #111);
  border-radius: var(--radius-sm);
  background: var(--white);
  /* Doppelschatten ohne --shadow-Token-Paar (Geometrie bleibt Ist);
     Farbanteile aus der Token-Palette: var(--shade-04) + var(--tint-neutral),
     render-identisch - Audit L5b/#201. */
  box-shadow: 0 1px 2px var(--shade-04), 0 4px 12px var(--tint-neutral);
}

/* Eingabefelder im Gefährdungs-Block — gleiche Optik wie idf-form-
   Textareas (Wert-Variablen aus _shared/blocks/forms/idf-forms.css), damit
   "Beschreibung" und TOP-Felder konsistent zu Stammdaten/Wirksamkeit
   aussehen. Ohne diese Regel hätten die Textareas Browser-Default-Style. */
.sg-gbu-g-row textarea,
.sg-gbu-g-row input[type="text"] {
  width: 100%;
  min-height: var(--idf-form-h, 40px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border: var(--idf-form-border, 1px solid var(--line));
  border-radius: var(--idf-form-radius, 3px);
  font-size: var(--idf-form-font, 1rem);
  font-family: inherit;
  line-height: var(--leading-base, 1.4);
  background: var(--white, #fff);
  color: var(--ink, #111);
  box-sizing: border-box;
  resize: vertical;
}
.sg-gbu-g-row textarea:focus,
.sg-gbu-g-row input[type="text"]:focus {
  outline: 2px solid var(--accent, #167ea0);
  outline-offset: -1px;
  border-color: var(--accent, #167ea0);
}
.sg-gbu-g-row label > span {
  display: block;
  margin-bottom: 4px;
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: var(--ink);
}
.sg-gbu-g-head {
  display: grid;
  grid-template-columns: 1fr 32px;
  align-items: center;
  gap: var(--space-2);
}
.sg-gbu-g-faktor {
  width: 100%;
}
/* Trash-Pille in der Gefährdungs-Karte: Shared `.idf-list-delete-btn`
   ist normalerweise opacity:0 + pointer-events:none (nur sichtbar bei
   Row-Hover in einer Liste). Hier ist die Karte aber selbst der
   primäre Edit-Bereich — der User muss die Löschen-Pille jederzeit
   erreichen können, ohne die Karte zu hovern. Wir heben deshalb das
   Default-Verstecken hier explizit auf. */
.sg-gbu-g-del.idf-list-delete-btn {
  opacity: 1;
  pointer-events: auto;
  margin-left: auto;
}
.sg-gbu-g-del.idf-list-delete-btn:hover {
  background: var(--tint-neutral);
  color: var(--primary);
}
.sg-gbu-g-beschr {
  width: 100%;
  min-height: 48px;
  resize: vertical;
}
.sg-gbu-g-add {
  align-self: flex-start;
}

/* Risiko-Grid: Initial- und Restrisiko nebeneinander (2 Spalten),
   responsiv auf 1 Spalte unter 720px. Jeder Block hat einen kleinen
   Header und einen Body mit den 2 Comboboxen + Ampel. */
.sg-gbu-risk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}
.sg-gbu-risk-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--bg);
  border-radius: var(--radius-sm);
}
.sg-gbu-risk-block-head {
  font-size: var(--font-base, 1rem);
  font-weight: var(--weight-semi);
  color: var(--ink);
}
.sg-gbu-risk-hint {
  font-weight: var(--weight-regular);
  color: var(--ink);
  font-size: var(--font-sm);
}
.sg-gbu-risk-block-body {
  display: flex;
  align-items: end;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.sg-gbu-risk-pair {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  min-width: 0;
}
/* Mini-Label "Wahrscheinlichkeit" / "Schwere" über den Comboboxen:
   gleiche Schrift wie Standard-Form-Labels (kein font-xs-Gefummel),
   ink-schwarz statt halbtransparent, damit alle Texte in der Karte
   die gleiche optische Gewichtung haben. */
.sg-gbu-risk-sublabel {
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: var(--ink);
  line-height: 1.2;
}
.sg-gbu-ws-cb {
  min-width: 140px;
}

@media (max-width: 720px) {
  .sg-gbu-risk-grid { grid-template-columns: 1fr; }
}

/* Ampel: quadratisch in Höhe der Combobox-Auswahl (40 px = idf-form-h).
   Bei leerem Wert komplett transparent, kein Text — keine braune
   Hintergrund-Tönung. Nur wenn W und S gewählt sind, erscheint das
   farbige Risiko-Badge mit der Zahl im Zentrum. */
.sg-gbu-ampel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--idf-form-h, 40px);
  height: var(--idf-form-h, 40px);
  padding: 0;
  border-radius: var(--idf-form-radius, 3px);
  font-size: var(--font-base, 1rem);
  font-weight: var(--weight-bold);
  line-height: 1;
  flex-shrink: 0;
}
.sg-gbu-ampel.is-leer {
  background: transparent;
  color: transparent;
  border: 1px dashed var(--line);
}
.sg-gbu-ampel.is-gruen  { background: var(--tint-green);  color: var(--green-text); }
.sg-gbu-ampel.is-gelb   { background: var(--tint-yellow); color: var(--yellow-text); }
/* Orange-/Rot-Stufe: fachliche Ampel-Farben (Warn-Orange #e07b00, Ziegelrot
   #c0392b als Basen), bewusst ausserhalb der Token-Palette - --tint-orange/
   --tint-red waeren sichtbar anders (Audit L5/#201, dokumentierte Ausnahme). */
.sg-gbu-ampel.is-orange { background: rgba(224, 123, 0, 0.15);  color: #b56400; }
.sg-gbu-ampel.is-rot    { background: rgba(192, 57, 43, 0.12);  color: #a23123; }

/* TOP-Maßnahmen — collapsible, sparsam gestaltet. */
.sg-gbu-top {
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
  padding: var(--space-2) 0;
}
.sg-gbu-top > summary {
  cursor: pointer;
  font-weight: var(--weight-medium);
  color: var(--ink);
  list-style: revert;
}
.sg-gbu-top-hint {
  margin-left: var(--space-2);
  font-weight: var(--weight-regular);
  font-size: var(--font-sm);
  color: var(--mid);
}
.sg-gbu-top label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--space-2);
}
.sg-gbu-top label > span {
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  color: var(--ink);
}
.sg-gbu-top textarea {
  width: 100%;
  resize: vertical;
}

/* Aufgaben-Pille + Link + Erledigt-Marker */
.sg-gbu-aufgabe-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-1);
}
.sg-gbu-aufgabe-pill {
  display: inline-flex;
}
.sg-gbu-aufgabe-link {
  font-size: var(--font-sm);
  color: var(--ink);
  text-decoration: none;
}
.sg-gbu-aufgabe-link:hover { text-decoration: underline; }
.sg-gbu-aufgabe-link i { margin-right: 4px; }
.sg-gbu-aufgabe-link.is-erledigt {
  color: var(--mid);
  text-decoration: line-through;
}
/* "✓ erledigt"-Marker direkt neben dem Aufgaben-Link: optisch wie ein
   ruhiger Status-Badge, damit klar ist, dass die Schutzmassnahme als
   umgesetzt gilt. */
.sg-gbu-aufgabe-status.is-erledigt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  background: var(--tint-green);
  color: var(--green-text);
}

/* Aufgaben-Uebersicht am Ende des Tabs: kompakte Liste aller
   verknuepften Aufgaben über alle Gefaehrdungen hinweg, mit
   Status-Pille pro Zeile. */
.sg-gbu-aufgaben-section {
  margin-top: var(--space-3);
}
.sg-gbu-aufgaben-summary {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.sg-gbu-aufgaben-stat {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
}
.sg-gbu-aufgaben-stat.is-offen     { background: var(--tint-neutral);    color: var(--ink); }
.sg-gbu-aufgaben-stat.is-erledigt  { background: var(--tint-green); color: var(--green-text); }
.sg-gbu-aufgaben-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Aufgaben-Zeile in der GBU-Übersicht: Standard-Schrift, ink-schwarz,
   keine Opazitäten/Mid-Tones. Titel mit Aufgabennummer in Klammern
   übernimmt die volle Breite, dann Faktor-Label, dann Status. */
.sg-gbu-aufgaben-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  transition: background 120ms ease;
}
.sg-gbu-aufgaben-row:hover { background: var(--bg-hover); }
.sg-gbu-aufgaben-titel {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
  font-weight: var(--weight-medium);
}
.sg-gbu-aufgaben-faktor {
  color: var(--ink);
  background: var(--tint-neutral);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  white-space: nowrap;
}
.sg-gbu-aufgaben-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-md);
  font-weight: var(--weight-medium);
}
.sg-gbu-aufgaben-status.is-offen          { background: var(--tint-neutral);    color: var(--ink); }
.sg-gbu-aufgaben-status.is-in_bearbeitung { background: var(--tint-yellow); color: var(--yellow-text); }
.sg-gbu-aufgaben-status.is-erledigt       { background: var(--tint-green); color: var(--green-text); }

/* ============================================================
   Aufgaben-Tab (polymorpher Aggregator) im Pruefpunkt-Modal
   ============================================================ */

.sg-aufgaben-embed {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
/* Empty-State im Aufgaben-Tab: shared .idf-empty-state.is-compact
   (+ .idf-empty-state-hint) aus blocks/empty-state (H1/#198).
   Textfarbe --ink wurde dabei auf den Shared-Default --mid normiert. */
.sg-aufgaben-loading {
  margin: 0;
  padding: var(--space-3) 0;
  color: var(--mid);
  font-size: var(--font-sm);
}
.sg-aufgaben-summary {
  display: flex;
  gap: var(--space-2);
}
.sg-aufgaben-stat {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-md);
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
}
.sg-aufgaben-stat.is-offen    { background: var(--tint-neutral);    color: var(--ink); }
.sg-aufgaben-stat.is-erledigt { background: var(--tint-green); color: var(--green-text); }

.sg-aufgaben-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Aufgaben-Zeile (polymorpher Aggregator): Standard-Schrift, ink-schwarz,
   keine Opazitäten/Mid-Tones. Titel mit Nummer in Klammern, dann Quelle,
   Verantwortlich, Frist (mit Ampel) und Status-Pille. Title nimmt den
   verbleibenden Platz, restliche Spalten festbreit. */
.sg-aufgaben-row {
  display: grid;
  /* Spalten: Titel (1fr) · Quelle-Pille (115 — „Checkpunkt" passt nur knapp
     in 90, lief vorher über den Hintergrund) · Verantwortlich (120, etwas
     schmaler kompensiert die Quelle-Breite) · Frist (90) · Status
     (135 — „In Bearbeitung" passt sonst nicht und brach in zwei Zeilen um). */
  grid-template-columns: 1fr 115px 120px 90px 135px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  transition: background 120ms ease;
}
.sg-aufgaben-row:hover { background: var(--bg-hover); }
.sg-aufgaben-titel {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
  font-weight: var(--weight-medium);
}
.sg-aufgaben-quelle {
  color: var(--ink);
  background: var(--tint-neutral);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  text-align: center;
  white-space: nowrap;
}
.sg-aufgaben-verant {
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sg-aufgaben-frist {
  color: var(--ink);
  white-space: nowrap;
}
.sg-aufgaben-frist.is-overdue {
  color: var(--primary);
  font-weight: var(--weight-semi);
}
.sg-aufgaben-frist.is-soon {
  color: var(--yellow-text, #b58600);
  font-weight: var(--weight-medium);
}
/* Status-Pillen-Familie (.sg-aufgaben-status hier; .sg-gbu-aufgaben-status,
   .sg-gbu-aufgaben-stat und .sg-gbu-aufgabe-status im GBU-Tab) - geprueft in
   L5/F6 (#201): bleibt bewusst lokal. Shared .idf-pill-tag erzwingt
   UPPERCASE/13px/6px-Radius, der Umbau waere nicht render-identisch (Font
   erbt hier 16px vom Modal, 135px-Statusspalte auf Mixed-Case kalibriert);
   bestehende Bleibt-Entscheidung im CHANGELOG bestaetigt. */
.sg-aufgaben-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  border-radius: var(--radius-md);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.sg-aufgaben-status.is-offen          { background: var(--tint-neutral);    color: var(--ink); }
.sg-aufgaben-status.is-in_bearbeitung { background: var(--tint-yellow); color: var(--yellow-text); }
.sg-aufgaben-status.is-erledigt       { background: var(--tint-green); color: var(--green-text); }

/* Historie — read-only Akkordeon. */
.sg-gbu-historie {
  margin-top: var(--space-3);
  border-top: 1px solid var(--line);
  padding-top: var(--space-2);
}
.sg-gbu-historie > summary {
  cursor: pointer;
  font-weight: var(--weight-medium);
  color: var(--mid);
}
.sg-gbu-historie-list {
  margin-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sg-gbu-historie-row {
  display: grid;
  grid-template-columns: 120px 130px 1fr;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--bg);
  border-radius: var(--radius-xs);
  font-size: var(--font-sm);
  color: var(--mid);
  cursor: pointer;
}
/* Hover #f0f0f0 belassen: bewusster Zwischenton zwischen --bg-hover und
   --line; Audit L5/#201, dokumentierte Ausnahme. */
.sg-gbu-historie-row:hover { background: #f0f0f0; }
.sg-gbu-historie-version { font-weight: var(--weight-semi); color: var(--ink); }
.sg-gbu-historie-user    { color: var(--mid); }

/* ============================================================
   Betriebsanweisungen-Liste (betriebsanweisungen.php /
   safeguard-betriebsanweisungen.js)
   6-Spalten-Grid: Titel + Kurztext · Quell-Gefährdung ·
   Zeichen-Strip · Nächste Prüfung · Status · Löschen
   ============================================================ */

.sg-ba-grid {
  /* 6 Spalten: Titel + Geltungsbereich-Subline · Quell-Gefährdung ·
     Zeichen-Strip · Nächste Prüfung · Drucken · Löschen.
     Status-Spalte entfallen (Liste filtert hart auf published; siehe
     betriebsanweisungen.php-Kommentar).
     Quell-Gefährdung 460 px (vorher 320, an manchen Faktor-Texten
     noch abgeschnitten — der freie Platz aus der gestrichenen Status-
     Spalte geht hier rein). Datum 170 px. Drucken + Löschen 44 px
     (icon-only via `.idf-list-cell-action`). */
  /* Breiten aus der CSS-Variable (col-resize-Baustein); Fallback = Defaults. */
  grid-template-columns: var(--sg-ba-cols,
    minmax(220px, 1fr) 460px 280px 170px 44px 44px);
  align-items: stretch;
  gap: 0;
}

/* Titel-Zelle: Titel oben, Sub-Line darunter (seit v0.10.6 Geltungsbereich
   statt Kurztext — Geltungsbereich ist für die Listenübersicht aussage-
   kräftiger, der Kurztext ist die Kopfzeile im A4-Druck und nur dort
   relevant). Klassenname `.sg-ba-kurztext` aus Legacy-Gründen
   beibehalten — es ist eine reine Layout-Klasse (Sub-Line-Style),
   nicht inhalts-gebunden. */
.sg-cell-titel .sg-ba-kurztext {
  display: block;
  font-size: var(--font-sm);
  color: var(--mid);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sg-ba-kurztext-empty { font-style: italic; opacity: 0.6; }

/* Quell-Gefährdung — Klartext mit Doppelklick-Sprung in Prüfpunkte. */
.sg-cell-quelle {
  display: flex;
  align-items: center;
  padding: 0 var(--space-2);
  font-size: var(--font-sm);
  color: var(--ink);
}
.sg-cell-quelle .sg-quelle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.sg-cell-quelle .sg-quelle-empty {
  color: var(--mid);
  font-style: italic;
  opacity: 0.7;
}

/* Zeichen-Strip — Cell-Wrapper für die BA-Liste. Thumb-/Overflow-/Empty-
   Styles kommen aus _shared/domain/zeichen-strip/idf-zeichen-strip.css. */
.sg-cell-zeichen {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 var(--space-2);
  overflow: hidden;
}

/* Status-Pille (BA: aktiv / archiv) — Color-Modifier-only, Geometrie
   aus shared `.idf-pill-tag`. Markup: <span class="idf-pill-tag
   sg-status-pill is-published">Aktiv</span>. */
.sg-status-pill.is-published { background: var(--tint-confirm); color: var(--confirm); }
.sg-status-pill.is-archived  { background: var(--tint-neutral);        color: var(--mid); }

/* Nächste-Prüfung-Zelle: spiegelt Gültig-bis-Pattern aus Unterlagen. */
.sg-cell-naechste {
  display: flex;
  align-items: center;
  padding: 0 var(--space-2);
  position: relative;
}
.sg-cell-naechste.is-overdue .sg-gueltig-main { color: var(--primary); font-weight: var(--weight-semi); }
.sg-cell-naechste.is-soon    .sg-gueltig-main { color: var(--orange-text); }
.sg-cell-naechste .sg-gueltig-hint {
  display: block;
  font-size: var(--font-xs);
  color: var(--mid);
}

/* ============================================================
   Zeichen-Picker (Tab im BA-Detail-Modal)
   ============================================================ */

.sg-zeichen-tab {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  min-height: 0;
}
.sg-zeichen-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--tint-neutral);
}
.sg-zeichen-search {
  flex: 1 1 auto;
}
.sg-zeichen-counter {
  font-size: var(--font-sm);
  color: var(--mid);
}
.sg-zeichen-grid {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.sg-zeichen-section-title {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-sm);
  font-weight: var(--weight-semi);
  color: var(--ink);
}
.sg-zeichen-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: var(--space-2);
}
.sg-zeichen-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: var(--space-2);
  background: var(--white);
  border: 2px solid var(--shade-08);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.sg-zeichen-pick img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.sg-zeichen-pick:hover {
  border-color: var(--accent);
  background: var(--tint-accent-soft);
}
.sg-zeichen-pick.is-selected {
  border-color: var(--accent);
  background: var(--tint-accent);
}
.sg-zeichen-pick-code {
  font-size: var(--font-xs);
  font-weight: var(--weight-medium);
  color: var(--mid);
}
.sg-zeichen-pick-fallback {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  background: var(--shade-04);
  border-radius: 4px;
  color: var(--mid);
  font-weight: var(--weight-semi);
}
.sg-zeichen-empty-msg {
  padding: var(--space-4);
  text-align: center;
  color: var(--mid);
  font-style: italic;
}

/* ============================================================
   Quelle & Historie-Tab im BA-Detail-Modal
   ============================================================ */

.sg-quelle-tab {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.sg-quelle-card {
  background: var(--tint-accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}
.sg-quelle-card-empty {
  background: var(--shade-03);
  border-left-color: var(--shade-15);
  color: var(--mid);
}
.sg-quelle-card h4 {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-sm);
  font-weight: var(--weight-semi);
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sg-quelle-dl {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  font-size: var(--font-sm);
}
.sg-quelle-dl dt {
  color: var(--mid);
}
.sg-quelle-dl dd {
  margin: 0;
  color: var(--ink);
}
.sg-quelle-link {
  margin-left: var(--space-1);
  color: var(--accent);
  text-decoration: none;
}
.sg-quelle-hist {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sg-quelle-hist h4 {
  margin: 0;
  font-size: var(--font-sm);
  font-weight: var(--weight-semi);
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sg-quelle-version {
  margin: 0;
  font-size: var(--font-sm);
  color: var(--mid);
}
.sg-quelle-hist-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sg-quelle-hist-row {
  display: grid;
  grid-template-columns: 60px 1fr 100px;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--bg);
  border-radius: var(--radius-xs);
  font-size: var(--font-sm);
}
.sg-quelle-hist-ver { font-weight: var(--weight-semi); color: var(--ink); }
.sg-quelle-hist-status { color: var(--mid); text-align: right; }

/* ============================================================
   „BA ableiten"-Button in der Gefährdungs-Karte (GBU-Tab)
   ============================================================ */
.sg-gbu-ba-btn {
  margin-left: auto;
  white-space: nowrap;
}
/* Hervorgehoben, wenn schon eine aktive BA für diese Gefährdung existiert:
   Confirm-Grün + Häkchen-Icon, damit der User sofort sieht, dass ein Klick
   eine bestehende BA öffnet und nicht eine neue anlegt. */
.sg-gbu-ba-btn.has-ba {
  background: var(--tint-confirm);
  color: var(--confirm);
  border-color: color-mix(in srgb, var(--confirm) 30%, transparent);
}
.sg-gbu-ba-btn.has-ba:hover {
  background: color-mix(in srgb, var(--confirm) 20%, transparent);
}
.sg-gbu-aufgabe-bar {
  /* falls noch nicht definiert: align-items zentriert die Pille,
     den Link und den neuen Button auf einer Linie. */
  align-items: center;
}

/* ============================================================
   Anweisungen-Tab im Prüfpunkt-Modal — Liste aller verknüpften
   Betriebsanweisungen (via gefaehrdung.gbu.pruefpunkt).
   Pattern wie der Aufgaben-/Unterlagen-Tab.
   ============================================================ */
.sg-anweisungen-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
/* Empty-State im Anweisungen-Tab: shared .idf-empty-state.is-compact
   (+ .idf-empty-state-hint) aus blocks/empty-state (H1/#198). */
.sg-anweisungen-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sg-anweisungen-grid {
  grid-template-columns: minmax(280px, 1fr) 180px 56px;
  align-items: stretch;
  gap: 0;
}
.sg-anweisungen-head {
  background: var(--bg);
  font-size: var(--font-xs);
  font-weight: var(--weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mid);
}
.sg-anweisungen-head .sg-anweisungen-grid > div {
  padding: var(--space-1) var(--space-2);
}
.sg-anweisungen-row {
  cursor: pointer;
}
.sg-anweisungen-row:hover {
  background: var(--tint-accent-soft);
}
.sg-anweisungen-row .sg-anweisungen-grid > div {
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sg-anweisungen-titel {
  font-weight: var(--weight-medium);
  color: var(--ink);
}
.sg-anweisungen-kurz {
  display: block;
  font-size: var(--font-sm);
  color: var(--mid);
  margin-top: 2px;
}
.sg-anweisungen-cell-print {
  align-items: center;
}
/* `.sg-anweisungen-print-pill` ist gefallen — Drucken/Herunterladen-
   Pille nutzt shared `.idf-list-action-link` (konvergent mit allen
   anderen Action-Pillen). */
.sg-anweisungen-cell-datum .sg-cell-date {
  display: flex;
  flex-direction: column;
}
.sg-anweisungen-cell-datum .sg-cell-date.is-overdue {
  color: var(--primary);
  font-weight: var(--weight-semi);
}
.sg-anweisungen-cell-datum .sg-cell-date.is-soon {
  color: var(--orange-text);
}
.sg-anweisungen-cell-datum .sg-cell-date-hint {
  font-size: var(--font-xs);
  color: var(--mid);
  font-weight: normal;
}
.sg-anweisungen-foot {
  margin: 0;
  padding-top: var(--space-2);
  border-top: 1px dashed var(--shade-08);
  font-size: var(--font-sm);
  color: var(--mid);
}
.sg-anweisungen-foot i {
  margin-right: 4px;
  opacity: 0.7;
}

/* ============================================================
   Gefahrstoffverzeichnis-Listenseite

   Read-only-Spiegel der Verbrauchsmaterial-Datensätze mit
   `gefahrstoff = true`. 8 Spalten — Geometrie konsistent mit
   den anderen SafeGuard-Listen (Werte angelehnt an BA + VM).
   Doppelklick öffnet das VM-Modal cross-modul.
   ============================================================ */

.sg-gef-grid {
  /* Bild · Produkt · Marke · Einstufung · Zeichen · H-Sätze · Lagerklasse ·
     Standort · Lagerort · Regal-Nr · Bestand · CAS-Nr.
     Produkt-Spalte als einzige flex-grow, alle anderen fix. Bild + Marke
     analog zur VM-Liste (52 / 180). Standort 130 px (vorher 100, hat
     „Außenlager" und „IF 600" abgeschnitten). H-Sätze 240 px + 2-zeilig. */
  /* Breiten aus der CSS-Variable (col-resize-Baustein); Fallback = Defaults. */
  grid-template-columns: var(--sg-gef-cols,
    52px                   /* Bild */
    minmax(220px, 1fr)     /* Produkt (grow) */
    180px                  /* Marke (Logo + Name) */
    130px                  /* Einstufung */
    180px                  /* Zeichen */
    240px                  /* H-Sätze */
    120px                  /* Lagerklasse */
    170px                  /* Standort — User-Wunsch breiter (war 130) */
    140px                  /* Lagerort — User-Wunsch kleiner (war 160) */
    110px                  /* Regal-Nr */
    110px                  /* Bestand */
    140px                  /* CAS-Nr. */
  );
}

.sg-cell-produkt,
.sg-cell-einstufung,
.sg-cell-hsaetze,
.sg-cell-lagerklasse,
.sg-cell-standort,
.sg-cell-lagerort,
.sg-cell-regal-nr,
.sg-cell-bestand,
.sg-cell-cas {
  display: flex;
  align-items: center;
  padding: 0 var(--space-2);
  font-size: var(--font-sm);
  color: var(--ink);
  overflow: hidden;
}

.sg-cell-hsaetze .idf-list-cell-text {
  white-space: normal;
  line-height: 1.3;
}

/* Bild-Cell (52x52): shared .idf-cell-bild(-head/-img/-empty) aus
   `_shared/primitives/cells/idf-bild-cell.css` (H4/#198, laedt via
   $useListEngine || $useListGrid) - kein Modul-CSS mehr. */

/* Zeichen-Strip-Cell — Cell-Wrapper, Thumbs aus _shared/domain/zeichen-strip/. */
.sg-cell-gef-zeichen {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 var(--space-2);
  overflow: hidden;
}

/* Signalwort-Pille — Color-Modifier-only, Geometrie aus shared
   `.idf-pill-tag`. Werte siehe SIGNALWORT_LABEL im JS. Warnung-BG auf
   #eb6420-Basis: fachliche Signal-Farbe, bewusst ausserhalb der Token-
   Palette (Audit L5/#201, dokumentierte Ausnahme); Text = var(--orange-text). */
.sg-gef-pill.is-gefahr  { background: var(--tint-red); color: var(--primary); }
.sg-gef-pill.is-warnung { background: rgba(235, 100, 32, 0.12); color: var(--orange-text); }
.sg-gef-pill.is-achtung { background: var(--tint-neutral);     color: var(--mid); }

.sg-gef-empty {
  color: var(--mid);
  font-style: italic;
  opacity: 0.6;
}

/* ============================================================
   Inventar-Verzeichnis-Listenseite

   Read-only-Fusion von werkzeuge + zubehoer mit
   `pruefpflichtig = true`. 9 Spalten — Geometrie analog zu
   Werkzeuge-Liste. Doppelklick dispatcht auf openWerkzeug /
   openZubehoer (siehe safeguard-inventar-verzeichnis.js).
   ============================================================ */

.sg-iv-grid {
  /* Bild · Name · Marke (Avatar) · Typ (Pille) · Bereich · Standort ·
     Lagerort · Regal-Nr · Zeichen · Prüfintervall (Pille) · Nächste Prüfung.
     Name-Spalte als einzige flex-grow. Geometrie an Werkzeuge-Liste
     angelehnt (Bild 52, Zeichen 180), Marke-Spalte auf 220 px gehoben —
     User-Smoke: 180 war zu eng, Marken-Logo + längere Namen kollidierten. */
  /* Breiten aus der CSS-Variable (col-resize-Baustein); Fallback = Defaults. */
  grid-template-columns: var(--sg-iv-cols,
    52px                   /* Bild */
    minmax(220px, 1fr)     /* Name (grow) */
    220px                  /* Marke (Logo + Name) */
    130px                  /* Typ (Pille) */
    220px                  /* Bereich */
    140px                  /* Standort */
    140px                  /* Lagerort — User-Wunsch kleiner (war 160) */
    110px                  /* Regal-Nr */
    180px                  /* Zeichen (ISO-7010-Piktogramm-Strip, max. 5 Thumbs) */
    140px                  /* Prüfintervall (Pille) */
    170px                  /* Nächste Prüfung (Two-Line) */
  );
}

/* Sticky-Header-Fix: Body-Rows haben sonst beim Scrollen die Header-
   Geometrie überdeckt — `.idf-list-thead` ist `position: sticky` ohne
   z-index (Shared-Default, damit Tooltips im Header nicht im Stacking-
   Context gefangen werden). Tooltips selbst haben aber z-index
   2147483640 (siehe list-grid.css), wir können dem Sticky-Header
   bedenkenlos einen niedrigen z-index geben — Tooltips eskalieren
   trotzdem. Wirkt für alle SafeGuard-Listen mit .sg-list-thead. */
.sg-list-main .sg-list-thead {
  z-index: 5;
}

/* ABER: Eisenhower-Zeilen (nur die Pruefpunkte-Liste haengt `.idf-eh-row` an
   die Zeile) bekommen beim Hover `filter: brightness()` aus eisenhower-theme.css
   — `filter` macht die Zeile selbst zum Stacking-Context, der den data-tooltip-
   Lift (z-index 2147483640) EINFAENGT. Gegen den sticky thead mit z-index:5
   verliert der Tooltip dann in der ERSTEN Zeile (Header ueberdeckt ihn). Fix:
   hovered eh-row ueber den Header heben — dann eskaliert ihr Tooltip-Subtree
   wieder. Flache Zeilen (alle anderen SafeGuard-Listen) brauchen das nicht. */
.sg-list-rows .idf-eh-row:hover {
  z-index: 6;
}

.sg-iv-cell-typ,
.sg-iv-cell-name,
.sg-iv-cell-marke,
.sg-iv-cell-bereich,
.sg-iv-cell-standort,
.sg-iv-cell-lagerort,
.sg-iv-cell-regal-nr,
.sg-iv-cell-intervall,
.sg-iv-cell-pruef {
  display: flex;
  align-items: center;
  padding: 0 var(--space-2);
  font-size: var(--font-sm);
  color: var(--ink);
  overflow: hidden;
}

/* Produktbild-Cell (52x52): shared .idf-cell-bild(-head/-img/-empty)
   aus `_shared/primitives/cells/idf-bild-cell.css` (H4/#198, laedt via
   $useListEngine || $useListGrid) - kein Modul-CSS mehr. */

/* Typ-Pille — Werkzeug vs. Zubehör auf einen Blick. Color-Modifier-only,
   Geometrie aus shared `.idf-pill-tag`. Konsistent mit Prüfintervall-Pille.
   Werkzeug = Accent-Blau, Zubehör = Confirm-Grün — willkürlich, aber
   visuell deutlich unterscheidbar. */
.sg-iv-cell-typ { gap: 0; }
.sg-iv-typ-pill.is-werkzeuge { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.sg-iv-typ-pill.is-zubehoer  { background: color-mix(in srgb, var(--confirm) 14%, transparent); color: var(--confirm); }

/* Zeichen-Cell — Strip aus _shared/zeichen-strip. overflow:visible für
   Tooltips an den Thumbs (Default-Cell-Padding 12 px übernehmen wir). */
.sg-iv-cell-zeichen {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 var(--space-2);
  overflow: visible;
}

/* Prüfintervall-Pille — Color-Modifier-only, Geometrie kommt aus shared
   `.idf-pill-tag` (13 px UPPERCASE, getöntes BG). Semantik: je häufiger
   das Intervall, desto stärker die Akzentfarbe.
     jaehrlich    → Brand-Rot (häufigste Aufmerksamkeit)
     alle-2-jahre → Yellow
     alle-4-jahre → Accent-Blau
     einmalig     → Confirm-Grün (Lifecycle „einmalig erledigt")
     bei-bedarf   → Soft (unbestimmt)
   Cell-Inhalt hat einen flex-Container, damit die Pille zentriert wirkt.
   alle-2-jahre-BG auf Amber-Basis #f59e0b (nicht --yellow #f9ab00):
   fachliche Intervall-Farbe, bewusst ausserhalb der Token-Palette
   (Audit L5/#201, dokumentierte Ausnahme). */
.sg-iv-cell-intervall { gap: 0; }
.sg-iv-pruef-intervall-pill.is-jaehrlich    { background: var(--tint-red); color: var(--primary); }
.sg-iv-pruef-intervall-pill.is-alle-2-jahre { background: rgba(245, 158, 11, 0.14); color: var(--yellow-text); }
.sg-iv-pruef-intervall-pill.is-alle-4-jahre { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.sg-iv-pruef-intervall-pill.is-einmalig     { background: color-mix(in srgb, var(--confirm) 14%, transparent); color: var(--confirm); }
.sg-iv-pruef-intervall-pill.is-bei-bedarf   { background: color-mix(in srgb, var(--soft) 18%, transparent); color: var(--soft); }

/* „Nächste Prüfung"-Cell als Two-Line-Cell (Datum + Tage-Subline).
   Cell-Klasse muss direkt auf der Grid-Cell sitzen, sonst greift der
   Shared-Selektor `.idf-list-grid > .idf-list-cell-two-line` nicht. */
.sg-iv-cell-pruef.is-ueberfaellig .idf-list-cell-two-line-text,
.sg-iv-cell-pruef.is-ueberfaellig .idf-list-cell-two-line-sub {
  color: var(--primary, #c8134b);
  font-weight: var(--weight-bold, 700);
}
.sg-iv-cell-pruef.is-heute .idf-list-cell-two-line-text {
  color: var(--yellow-text, #b58600);
  font-weight: var(--weight-bold, 700);
}
.sg-iv-cell-pruef.is-bald .idf-list-cell-two-line-text {
  color: var(--yellow-text, #b58600);
}