/**
 * idf-list-grid v0.2.2 - Listen-Patterns
 *
 * v0.2.2 (#201 L5b): neutrale Hover-/Flaechen-Alphas auf die neue
 * Shade-Familie (2x 0.15 -> var(--shade-15), 2x 0.08 -> var(--shade-08));
 * render-identisch.
 *
 * v0.2.1 (#201): .idf-pill.is-xs - Mini-Pillen-Variante (10px, Badge-
 * Sondermass), extrahiert aus dem storyforge-Kapitelbaum-Override
 * (Audit L5, §7.6-Bereinigung).
 *
 * v0.2.0 (#199): .idf-list-open-btn - Shared-Klasse für die Pfeil-
 * Öffnen-Pille (vorher als .guide-open-btn und .nw-board-row-open
 * dupliziert, Audit L-D13).
 *
 * Generische CSS-Patterns für die v2-Listenansichten (Aufgaben, Protokoll,
 * Akteure, Unternehmen, Aufträge, Projekte). Modul-spezifisch bleibt:
 *   - grid-template-columns (Spaltenbreiten je Modul)
 *   - .<modul>-cell-*-Klassen (Spalten-spezifische Cell-Styles)
 *   - Theme-Klassen (z.B. Eisenhower)
 *   - Status-Pillen-Farben (data-status-Attribut)
 *   - Stats-Pillen-Container, Modal-Styles
 *
 * Modul-Konsumenten setzen die generischen Klassen IM HTML zusätzlich
 * zu ihren modul-spezifischen Klassen, z.B.
 *   <div class="al-row idf-list-row">
 *
 * Konventionen:
 *   - generische Klassen mit `.idf-list-*`-Prefix
 *   - modul-spezifische Klassen mit Modul-Prefix (`.al-*`, `.pl-*`, …)
 *   - Modifier-States als `.is-*` (is-sortable, is-sorted, is-overdue,
 *     is-today, is-saving, is-hidden)
 */

/* === Top-Level Page-Container === */

.idf-list-page {
  padding: 0;
  display: flex;
  flex-direction: column;
  /* Kein erzwungenes min-height mehr: calc(100vh - 80px) rechnete nur den
     Header ein, NICHT Subnav + Footer → auf Seiten mit Subnav/Footer wurde
     der Footer aus dem Viewport geschoben (global sichtbar nach Cache-Bump,
     #224). Natürliche Höhe; der Footer bleibt im Bild. */
  min-height: 0;
}

/* === Toolbar / Filter-Leiste === */

.idf-list-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 32px;
  background: var(--bg, #fafafa);
  border-bottom: 1px solid var(--line, #e5e5e5);
  flex-wrap: wrap;
}
.idf-list-bar .idf-list-search {
  flex: 1 1 240px;
  min-width: 200px;
  max-width: 340px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line, #e5e5e5);
  border-radius: 6px;
  background: var(--white, #fff);
  font-family: inherit;
  font-size: 14px;
  box-sizing: border-box;
}
.idf-list-bar .idf-list-search:focus {
  outline: 2px solid var(--accent, #167ea0);
  outline-offset: -1px;
  border-color: var(--accent, #167ea0);
}
.idf-list-bar .idf-list-filter { flex: 0 1 180px; min-width: 140px; }
.idf-list-bar .idf-list-filter .combobox,
.idf-list-bar .idf-list-filter .combobox-trigger {
  height: 36px;
  width: 100%;
  box-sizing: border-box;
}
/* Override: v1 idf-core.css setzt den Combobox-Placeholder auf
   `var(--soft)` (Soft-Braun #ae9586). In v2 wollen wir dezentes Mid-Grau
   wie alle anderen Placeholder/Hint-Texte — der Brand-Soft-Akzent passt
   nicht in die neutrale Filter-Bar. */
.idf-list-bar .idf-list-filter .combobox-placeholder {
  color: var(--mid, #555);
}
.idf-list-bar .idf-list-spacer { flex: 1 1 auto; }

/* `.idf-list-btn-reset` und `.idf-list-btn-new` sind reine Hook-Klassen
   für die Layout-Position in der Filter-Bar. Das visuelle Styling kommt
   aus `_shared/blocks/buttons/idf-buttons.css` — Konsumenten setzen am HTML
   zusätzlich `.idf-btn .idf-btn-secondary.is-sm` (Reset) bzw.
   `.idf-btn .idf-btn-primary.is-sm` (Neu). Hier keine Style-Defs. */

/* === Treffer-Counter / Stats-Zeile === */

.idf-list-stats {
  padding: 8px 32px;
  font-size: 12px;
  color: var(--mid, #555);
  border-bottom: 1px solid var(--line, #e5e5e5);
  background: var(--white, #fff);
}
.idf-list-stats i {
  margin-right: 4px;
  opacity: 0.6;
}

/* === Header und Body-Wrap === */

.idf-list-thead {
  padding: 0 32px;
  background: var(--bg, #fafafa);
  border-bottom: 1px solid var(--line, #e5e5e5);
  position: sticky;
  top: 0;
  /* KEIN z-index — würde einen Stacking-Context schaffen, der Tooltips
     im Header (data-tooltip an icon-only-Cells) gefangen hält. Sticky
     funktioniert auch ohne z-index: der opake Background (--bg) deckt
     beim Scrollen die durchlaufenden Rows visuell ab. Wenn ein Modul
     einen sortable-tree-Drop-Indikator oder ähnliches braucht, das
     ÜBER dem Header schweben muss, vergibt das Modul dort selbst einen
     z-index — nicht der Header. */
}

.idf-list-rows {
  /* flex: 0 1 auto = kein grow, kann shrinken. Höhe richtet sich
     nach dem Inhalt — der Inline-Add-Button, der im DOM danach steht,
     sitzt direkt unter dem letzten Item statt am Boden des Viewports.
     Bei vielen Items übernimmt der Page-Scroll. */
  flex: 0 1 auto;
  /* position: relative ist Pflicht für innen positionierte Indicator-
     Elemente (z.B. idf-sortable Tree-Drop-Indicator). */
  position: relative;
}

/* === Grid + Row === */

.idf-list-grid {
  /* Default: keine Spaltendefinition — Konsument setzt grid-template-columns
     je nach Modul-Bedarf. */
  display: grid;
  align-items: stretch;
  gap: 0;
}

.idf-list-row {
  padding: 0 32px;
  border-bottom: 1px solid var(--line, #e5e5e5);
  transition: background 80ms ease, filter 80ms ease;
  /* Doppelklick markiert sonst Text in der Zeile */
  user-select: none;
  -webkit-user-select: none;
  position: relative;
}
/* Hover-Fallback für Zeilen ohne Theme (Eisenhower o.ä.). Themes setzen
   typischerweise `filter: brightness(0.96)` oder eine andere Hover-Logik. */
.idf-list-row:not(.idf-eh-row):hover {
  background: #f8f8f8;
  cursor: default;
}

/* === Header-Cells === */

.idf-list-thead .idf-list-grid > div {
  height: 40px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--mid, #555);
  user-select: none;
  overflow: hidden;
  white-space: nowrap;
}
.idf-list-thead .idf-list-grid > div i {
  font-size: 13px;
  opacity: 0.7;
}
.idf-list-thead .idf-list-grid > div.is-sortable {
  cursor: pointer;
}
.idf-list-thead .idf-list-grid > div.is-sortable:hover {
  color: var(--ink, #111);
}
.idf-list-thead .idf-list-grid > div.is-sorted {
  background: rgba(22, 126, 160, 0.10);
  color: var(--accent, #167ea0);
  font-weight: 700;
}
.idf-list-thead .idf-list-grid > div.is-sorted i {
  color: var(--accent, #167ea0);
  opacity: 1;
}

/* Richtungs-Indikator nach dem Header-Text — Pfeil hoch (asc) bzw.
   runter (desc). Wird vom IDF.listSort-Helper (_shared/list-sort) per
   `.is-asc` / `.is-desc` an der aktiven Header-Cell gesetzt. Symbol
   per ::after, damit der Helper keinen extra DOM-Knoten braucht und
   alle bestehenden Header-Markups (mit oder ohne Icon) gleich
   funktionieren. */
.idf-list-thead .idf-list-grid > div.is-sorted.is-asc::after  { content: " \2191"; opacity: 0.9; }
.idf-list-thead .idf-list-grid > div.is-sorted.is-desc::after { content: " \2193"; opacity: 0.9; }

/* === Body-Cells === */

.idf-list-rows .idf-list-row .idf-list-grid > div {
  min-height: 52px;
  padding: 12px;
  font-size: 16px;
  color: var(--ink, #111);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

/* === Save-Animation === */

.idf-list-row.is-saving {
  box-shadow: inset 3px 0 0 var(--confirm, #0c998e);
}

/* === Drag-Handle, Done-Pille, Delete-Button =======================
   Drei Pillen-Komponenten, die jede Listen-Row braucht und die in
   allen v2-Modulen identisch aussehen. Vorher pro Modul dupliziert
   (.al-drag-handle / .pl-drag-handle etc.) — seit v0.2.0 hier zentral.

   Visuelles Konzept (aus Aufgaben-v2 v0.6.x):
   - 28×28 quadratisch, border-radius 4 px, transparenter Default,
     keine Border (im Gegensatz zur Form-Variante).
   - Sichtbarkeits-Stufen über `opacity`:
       Drag-Handle, Done-Pille:  0.2 default → 0.6 row-hover → 1 icon-hover/active
       Delete-Button:            0   default → 0.6 row-hover → 1 icon-hover
     Defaultmäßig leise Marker, beim Hover deutlich, beim Direkt-Hover
     voll sichtbar. Die Sichtbarkeit hängt am Row-Hover, nicht an der
     Cell — das stellen Konsumenten via `:hover .idf-list-*` selbst sicher
     (siehe Beispiel weiter unten).
   - Active-States:
       Done-Pille.is-active   → Confirm-Grün (Aufgabe erledigt)
       Delete-Btn:hover       → Primary-Rot (destruktive Aktion)
       Drag-Handle ist aktiv-fest, kein Active-State nötig.
*/

.idf-list-drag-handle,
.idf-list-done-pill,
.idf-list-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink, #111);
  font-size: 14px;
  line-height: 1;
  user-select: none;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
}

/* Drag-Handle */
.idf-list-drag-handle {
  cursor: grab;
  opacity: 0.2;
}
.idf-sortable-chosen .idf-list-drag-handle,
body.idf-sortable-dragging .idf-list-drag-handle {
  opacity: 1;
  cursor: grabbing;
}
.idf-list-drag-handle:hover {
  opacity: 1;
  background: var(--shade-15);
}
.idf-list-rows.is-drag-disabled .idf-list-drag-handle { display: none; }

/* Done-Pille (Status-Toggle "erledigt") */
.idf-list-done-pill {
  cursor: pointer;
  opacity: 0.2;
}
.idf-list-done-pill:hover {
  opacity: 1;
  background: var(--shade-15);
}
.idf-list-done-pill.is-active {
  background: var(--confirm, #0c998e);
  color: #fff;
  opacity: 1;
}
.idf-list-done-pill.is-active:hover {
  filter: brightness(1.06);
  background: var(--confirm, #0c998e);
}

/* Delete-Button — Standard-Trash-Pille, überall in Apps wiederverwendbar
   (Listen-Rows, Modal-Sub-Listen wie Unterlagen, …). Default: sichtbar.
   In einer `.idf-list-row` (Standard-Listen) wird der Button bis zum
   Row-Hover ausgeblendet (opacity 0 + pointer-events none, damit
   überlagernde Container das `:hover` nicht versehentlich triggern).
   Ohne `.idf-list-row`-Kontext (z.B. Unterlagen-Liste im Werkzeuge-Modal)
   bleibt er always-visible (opacity 0.4 default, 1.0 bei direkt-Hover). */
.idf-list-delete-btn {
  cursor: pointer;
  opacity: 0.4;
}
.idf-list-delete-btn:hover {
  opacity: 1;
  background: rgba(200, 19, 75, 0.12);
  color: var(--primary, #c8134b);
}
/* Row-Kontext: hidden bis Row-Hover. */
.idf-list-row .idf-list-delete-btn {
  opacity: 0;
  pointer-events: none;
}
.idf-list-row:hover .idf-list-delete-btn {
  opacity: 0.6;
  pointer-events: auto;
}

/* === Action-Link (Download/Drucken/etc.) ========================
   Icon-only-Link (`<a>` mit FontAwesome-Icon) für Aktionen wie Datei
   herunterladen, A4 drucken, externe Quelle öffnen. 28×28, transparent
   default, Hover dezent getöntes Background + Akzent-Farbe.
   Konvergent zu `.idf-list-delete-btn` (gleiche Geometrie), aber
   `text-decoration: none` und Hover-Color Akzent statt Brand-rot.

   Konsumenten: SafeGuard-Vorlagen/-Unterlagen-Download, SafeGuard-BA-
   Drucken, Werkzeuge/Zubehör/Verbrauchsmaterial-Modal-Unterlagen-
   Download. Vorher als 4 Module-spezifische Klassen dupliziert
   (.sg-datei-link, .wz-unterlage-download, .zb-unterlage-download,
   .vm-unterlage-download). */
.idf-list-action-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  /* Reset, damit die Klasse auch auf einem <button> nur das Icon zeigt
     (Browser-Default-Rand + -Hintergrund weg) — analog Done-/Delete-Pille. */
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink, #111);
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
/* Hover: dunkles Overlay + ink — wie Flag-/Done-Pillen. Vorher
   var(--accent) (Blau): Joerg-Review 2026-06-10 — Blau wirkte als
   Fremdkörper, kein Element der Listen hovert sonst farbig (außer
   Trash → Brand-Rot). */
.idf-list-action-link:hover {
  background: var(--shade-08);
  color: var(--ink, #111);
}

/* === Öffnen-Pille (Pfeil -> Detail-Seite) =======================
   Icon-only-<button> mit fa-arrow-right, öffnet die Detail-Seite des
   Listeneintrags (Doppelklick auf die Row als zweiter Weg). Gleiche
   28x28-Geometrie wie .idf-list-action-link, aber Default-Farbe --mid
   statt --ink: dezente Affordance, wie sie beide bisherigen Modul-
   Kopien hatten (.guide-open-btn, .nw-board-row-open; #199 L-D13).
   Hover = Standard-Overlay + ink wie die Flag-/Done-Pillen; der
   tint-accent/accent-Hover der Kopien war die Abweichung vom
   dokumentierten Listen-Standard (Joerg-Review 2026-06-10, siehe
   Kommentar bei .idf-list-action-link) und entfällt beim Umzug.
   flex: 0 0 auto, damit die Pille auch in Flex-Rows (netzwerk-Board)
   nicht schrumpft; im Grid-Kontext wirkungslos. */
.idf-list-open-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--mid, #555);
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.idf-list-open-btn:hover {
  background: var(--shade-08);
  color: var(--ink, #111);
}

/* === Empty / Loading / Load-More === */
.idf-list-empty,
.idf-list-loading {
  padding: 60px 32px;
  text-align: center;
  color: var(--mid, #555);
  font-size: 14px;
}
.idf-list-empty i,
.idf-list-loading i {
  font-size: 32px;
  opacity: 0.4;
  margin-bottom: 12px;
  display: block;
}

.idf-list-load-more {
  padding: 16px 32px;
  text-align: center;
  border-top: 1px solid var(--line, #e5e5e5);
}
.idf-list-load-more button {
  height: 36px;
  padding: 0 20px;
  border: 1.5px dashed #ddd;
  border-radius: 6px;
  background: transparent;
  color: var(--mid, #555);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.idf-list-load-more button:hover {
  border-color: var(--mid, #555);
  color: var(--ink, #111);
}
.idf-list-load-more.is-hidden { display: none; }

/* Status-Pille (.idf-list-status-pill) und Tag-Pille (.idf-list-due-badge)
   sind weiter unten als `.idf-pill` / `.idf-pill-tag` definiert
   (konsolidiertes Pillen-Standard, gemeinsamer Look für alle Apps). */

/* === Due-Modifier - fuer Datums-Cells === */
.idf-list-rows .idf-list-row .idf-list-grid > div.is-today {
  color: var(--primary, #c8134b);
}
.idf-list-rows .idf-list-row .idf-list-grid > div.is-overdue {
  color: var(--primary, #c8134b);
  font-weight: 600;
}

/* === Link-Annotation (Sub-Line unter Titel) ============================
   Verknuepfung zu einem anderen Modul, z.B.:
     ↗ Sitzung "Vorstand" · 03.05.2026   (Aufgaben-Liste → Sitzung)
     ↗ Aufgabe AUF-000042                 (Punkte-Editor → Aufgabe)

   Stack-Layout liegt im Modul-CSS (`.al-titel-stack`/`.pp-titel-stack`):
   die Cell bleibt flex-row mit [tree-connector][stack][status-badge],
   und nur der INNERE Stack ist flex-column (titel-group oben,
   Annotation darunter). Damit fliesst die Sub-Line nicht unter den
   Tree-Connector und der Status-Badge bleibt rechts ausgerichtet.

   HTML wird via IDF.createLinkAnnotation() in idf-core.js erzeugt. */

.idf-link-annot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;        /* 13px — kleiner als Titel (16px) */
  color: var(--mid, #555555);
  text-decoration: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.idf-link-annot:hover {
  color: var(--primary, #c8134b);
  text-decoration: underline;
  text-decoration-color: rgba(200, 19, 75, 0.4);
  text-underline-offset: 3px;
}

.idf-link-annot > i {
  font-size: 0.75rem;
  flex: 0 0 auto;
  opacity: 0.85;
}

.idf-link-annot > .idf-link-annot-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* === Filter-Toggle-Button ========================================
   Schmaler Toggle in der Filter-Bar (z.B. „nur prüfpflichtige",
   „nur Erledigte", „mit Archiv"). 36 px hoch wie Search-Input und
   Combobox-Trigger, ink-Highlight im Active-Zustand.
   Vorher pro Modul dupliziert (.wz-toggle-pruefpflichtig,
   .al-erledigt-toggle, …) — seit Konsolidierung hier zentral. */

.idf-list-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line, #e5e5e5);
  border-radius: 6px;
  background: var(--white, #fff);
  color: var(--mid, #555);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  line-height: 1;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.idf-list-toggle:hover { border-color: var(--mid, #555); }
.idf-list-toggle.is-active {
  background: var(--ink, #111);
  color: var(--white, #fff);
  border-color: var(--ink, #111);
}

/* === Pillen-Standard (.idf-pill / .idf-pill-tag / .idf-list-due-badge) =====
   EIN Pillen-Look für die ganze App, damit Werkzeuge / Aufgaben /
   Protokolle / SafeGuard nicht jede ihre eigene Radius/Font/Padding-
   Kombination kochen. Drei Familien:

   - `.idf-pill`           Volle Status-Pille (24 px hoch, Solid-Color-BG,
                           weißer Text, prominent). z.B. werkzeug_status.
   - `.idf-pill-tag`       Subtile Domain-Tag/Badge (13 px UPPERCASE,
                           letter-spacing, tinted-bg). z.B. Risiko-Stufe,
                           Bearbeitungs-Status, Prüfpunkt-Typ, Kategorie.
   - `.idf-list-due-badge` Sentence-style Hint-Tag (12 px Title-Case,
                           tinted-bg). Für Relativzeit-Hints wie
                           „in 30 Tagen" / „14 Tage überfällig" — die
                           wären in UPPERCASE schreierisch.

   Alle: 6 px Radius (kein „Tablett"), font-weight 500, inline-flex,
   gap 4 px. Modifier `.is-*` setzt Farbe (Modul-spezifisch).
   `.idf-list-status-pill` ist Alias auf `.idf-pill`.

   Konsumenten kombinieren `.idf-pill-tag` mit ihrem eigenen Color-
   Modifier im Markup, z.B. `<span class="idf-pill-tag sgds-risiko-hoch">`
   oder `<span class="idf-pill-tag sg-status-typ-badge is-pflicht">`.
   Modul-CSS liefert dann nur noch die `background` + `color` Regeln —
   die Geometrie kommt hier aus dem shared Baustein. */

.idf-pill,
.idf-list-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--white, #fff);
  background: var(--soft, #ae9586);
  white-space: nowrap;
}

/* Mini-Variante (is-xs, Audit L5/#201): kleinste lesbare Meta-Pille,
   z.B. Status im storyforge-Kapitelbaum. 10px liegt bewusst unterhalb
   der Font-Token-Skala (Badge-Sondermass, dokumentierte Ausnahme);
   Werte = 1:1 der fruehere storyforge-Modul-Override (Paritaet). */
.idf-pill.is-xs {
  font-size: 10px;
  padding: 1px 7px;
}

.idf-pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--bg, #fafafa);
  color: var(--mid, #555);
  white-space: nowrap;
}

.idf-list-due-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  background: var(--bg, #fafafa);
  color: var(--mid, #555);
  white-space: nowrap;
}

.idf-list-due-badge.is-ok       { background: rgba(12, 153, 142, 0.12); color: var(--confirm, #0c998e); }
.idf-list-due-badge.is-soon     { background: rgba(249, 171, 0, 0.18);  color: #a07000; }
.idf-list-due-badge.is-overdue  { background: rgba(200, 19, 75, 0.12);  color: var(--primary, #c8134b); }
.idf-list-due-badge.is-unset    { background: var(--bg, #fafafa);       color: var(--soft, #ae9586); }

/* === Two-Line-Cell ================================================
   Cell mit Haupttext + Sublabel (z.B. Werkzeug-Name + Modell,
   Aufgabe-Titel + Quellverweis). Erste Zeile ist optional ein Row-
   Container (für Text+Pen-Button), zweite Zeile ist die Sub-Span.

   Markup:
     <div class="idf-list-cell-two-line">
       <span class="idf-list-cell-two-line-row idf-inline-edit-host">
         <span class="idf-list-cell-two-line-text">Werkzeug-Name</span>
         <button class="idf-inline-edit-btn">…</button>
       </span>
       <span class="idf-list-cell-two-line-sub">Modell-Nr.</span>
     </div>

   Selektor mit Cell-Scope, damit das Default-Cell-Flex-Layout
   (row, center-aligned) sicher überschrieben wird — die Cell soll
   vertikal stapeln, die Body-Cell-Regel oben ist „display:flex
   align-items:center" für die typische single-line-Cell. */

.idf-list-rows .idf-list-row .idf-list-grid > .idf-list-cell-two-line {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  min-width: 0;
}
.idf-list-cell-two-line-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  /* Volle Cell-Breite einnehmen: die Two-Line-Cell ist `align-items:flex-start`
     (Spalte), sonst bliebe diese Row content-breit → Pen klebte am Text und das
     Inline-Edit-Input (Datum) wüchse nicht auf Cell-Breite. align-self:stretch
     macht die Row voll breit → Text füllt (flex:1), Pen sitzt rechts. */
  align-self: stretch;
}
.idf-list-cell-two-line-row > .idf-list-cell-two-line-text {
  flex: 1 1 auto;
  min-width: 0;
}
.idf-list-cell-two-line-text {
  font-weight: 500;
  color: var(--ink, #111);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.idf-list-cell-two-line-sub {
  font-size: 12px;
  color: var(--mid, #555);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* === Avatar/Logo-Cell ============================================
   Cell mit Bild + Text nebeneinander (z.B. Marke-Logo + Marke-Name,
   Akteur-Avatar + Name, Unternehmen-Logo + Name). Geometrie wie eine
   Single-Line-Cell — keine spezielle Flex-Direction-Übersteuerung.

   Markup:
     <div class="idf-list-cell-avatar">
       <img class="idf-list-cell-avatar-img" src="…" alt="" loading="lazy">
       <span class="idf-list-cell-avatar-text">Bosch</span>
     </div> */

.idf-list-rows .idf-list-row .idf-list-grid > .idf-list-cell-avatar {
  gap: 8px;
  color: var(--mid, #555);
  font-size: 14px;
}
.idf-list-cell-avatar-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex: 0 0 auto;
  background: var(--white, #fff);
  border-radius: 3px;
}
.idf-list-cell-avatar-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* === Plain-Text-Span in einer Cell mit Pen-Button =================
   Wenn eine Cell ein Inline-Edit-Host ist, sitzen Text-Span + Pen-
   Button nebeneinander im Flex-Row. Damit der Text shrinkt und ellipst
   statt zu überlaufen, braucht der Span flex-grow + min-width:0. Vorher
   pro Modul als `.wz-cell-text` / `.al-cell-text` / `.pl-cell-text`
   dupliziert — jetzt einmal hier. */

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

/* === Titel/Name-Cell: Pen am Textende ============================
   Bei langen Titel-/Name-Spalten ist der Pen direkt hinter dem Text leichter
   zu finden als ganz rechts in der Spalte. Diese Klasse hebt fuer solche
   Cells den globalen Pen-Rechtsschub (`.idf-inline-edit-btn { margin-left:
   auto }`) und das Text-Fuellen (flex:1) wieder auf — der Text bleibt
   content-breit (ellipst weiter via min-width:0), der Pen sitzt dahinter.
   Gegenstueck zum Inline-Gruppen-Pattern (aufgaben `.al-titel-group` etc.). */
.idf-list-cell-name .idf-list-cell-two-line-row > .idf-list-cell-two-line-text,
.idf-list-cell-name > .idf-list-cell-text {
  flex: 0 1 auto;
}
.idf-list-cell-name .idf-inline-edit-btn { margin-left: 0; }

/* === Tooltip-Standard ============================================
   Schnell-sichtbarer Tooltip für Icon-Pillen + Action-Buttons. Lebt
   vorerst in list-grid (lädt jede v2-Liste); ein dediziertes
   `_shared/tooltip/`-Baustein kann später dasselbe Pattern bekommen.

   Verwendung:  <button data-tooltip="Wichtig" title="Wichtig">
                  <i class="fa-solid fa-star"></i>
                </button>

   `title` bleibt parallel gesetzt für Accessibility (Screenreader,
   Keyboard-Fokus); `data-tooltip` triggert den schnellen CSS-Tooltip
   (200 ms Delay statt der ~700 ms Browser-Default-Latenz).

   Position: über dem Element zentriert. Pointer-events: none, damit
   der Tooltip selbst keine Hover-Events fängt. */

[data-tooltip] {
  position: relative;
}
/* Wenn der Tooltip-Host gehovered wird, lifteten wir ihn (und seinen
   Tooltip-::after) per z-index ÜBER alle Sticky/Position-Geschwister
   in der Seite. Sonst verdeckt z.B. der `.idf-list-thead` (sticky,
   z-index 10), der ein eigenes Stacking-Context-Pärchen bildet, den
   Tooltip — der ist zwar mit `z-index: 100000` ausgezeichnet, aber das
   wirkt nur INNERHALB des Host-Stacking-Context. Erst mit z-index am
   Host selbst gewinnt der ganze Subtree. */
[data-tooltip]:hover,
[data-tooltip]:focus-visible {
  /* Bewusst sehr hoch — Modal-Overlay liegt bei 10 000, App-Sidebar bei
     10. Wir wollen unter ALLEN denkbaren Modul-Stacking-Contexts (auch
     legacy z-index:80/200/300/400/500/600/2000 aus idf-core.css und
     z-index:2000 vom combobox-popup) gewinnen, ohne dafür den Header,
     die Sidebar oder Modul-Sticky-Elements anpassen zu müssen. */
  z-index: 2147483640;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  background: var(--ink, #111);
  color: var(--white, #fff);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2147483641;
  transition-delay: 200ms;
  /* Tooltip vermeidet, dass die FontAwesome-Icon-Schrift im Tooltip-
     Text durchschlägt. */
  font-family: inherit;
  /* Tooltips IMMER normal geschrieben — unabhängig vom Eltern-Element.
     Sonst erbt der Tooltip in Tabellen-Headern das `text-transform:
     uppercase` des Header-Cells (.idf-list-thead) und wird GROSS, während
     er anderswo normal ist. Zentrale Konsistenz: ein Tooltip-Look für alle
     Apps, kein modul-eigenes Styling. */
  text-transform: none;
  letter-spacing: normal;
}
/* Kleiner Pfeil unter dem Tooltip (zeigt aufs Element). */
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--ink, #111);
  pointer-events: none;
  z-index: 2147483641;
}

/* === Action-Cell (Icon-Button only) ==============================
   Schmale Spalte, die ausschließlich einen 28×28-Action-Button hält
   (Trash, Pen, Done-Pill, …). Cell-Default-Padding (12px) würde den
   Button in einer 44px-Cell horizontal clippen (20px innen × 28px
   Button → erscheint schmaler als hoch). Daher padding:0 +
   justify-content:center.

   Apps setzen die Spaltenbreite in ihrem Grid auf 44px (Standard) und
   verwenden `.idf-list-cell-action` als Cell-Klasse. Vorher pro Modul
   als `.wz-cell-delete` / `.al-cell-actions` etc. dupliziert. */

.idf-list-thead .idf-list-grid > .idf-list-cell-action,
.idf-list-rows .idf-list-row .idf-list-grid > .idf-list-cell-action {
  padding: 0;
  justify-content: center;
  /* overflow:visible — sonst clippt der Cell-`overflow: hidden`-Default
     (für Text-Ellipsis) den Tooltip ([data-tooltip]:hover::after), der
     ÜBER der Cell sitzt. Icon-only-Cells brauchen keine Ellipsis.
     !important schiebt das auch über etwaige Modul-Overrides hinweg
     (User-Smoke 2026-05-18: trotz korrekter Specificity wurde der
     Prüfpunkte-Tooltip noch innerhalb der Spalte abgeschnitten —
     der !important verhindert jede Form von späterer Re-Override). */
  overflow: visible !important;
}
/* Tooltip-Hosts in der Header-Zeile NIE clippen lassen — Defensiv-Override
   gegen das `.idf-list-thead .idf-list-grid > div { overflow: hidden }`
   weiter oben, falls ein Modul-Markup mal ohne `.idf-list-cell-action`
   einen `data-tooltip` auf eine Header-Cell setzt. Header-Cells mit
   data-tooltip sind per Design icon-only oder kurzbeschriftet und
   brauchen kein Ellipsis. */
.idf-list-thead .idf-list-grid > div[data-tooltip] {
  overflow: visible !important;
}
/* === SSOT-Sicherheitsnetz: Tooltip-Host nie clippen ====================
   Jede direkte Grid-Cell (Header ODER Body), die selbst ein [data-tooltip]
   trägt ODER einen Tooltip-Host enthält (z.B. eine Compact-Flag-Pille, die
   data-tooltip via flag-check setzt), bekommt overflow:visible — auch wenn
   das Modul vergessen hat, `.idf-list-cell-action` zu setzen.

   Greift grid-agnostisch: Modul-Aliasse wie `.pl-grid`/`.pp-grid` tragen
   zusätzlich `.idf-list-grid`, matchen also hier. Hintergrund: die explizite
   `.idf-list-cell-action`-Regel oben verlangt, dass JEDES Modul die Klasse
   an JEDE Tooltip-Cell setzt — das wurde wiederholt vergessen (zuletzt
   protokolle Punkte-Liste `pp-cell-flag`), Tooltip wurde oben abgeschnitten.
   Additiv: nur Cells MIT Tooltip-Host sind betroffen; reine Text-Cells
   behalten ihr `overflow: hidden` (Ellipsis). */
.idf-list-grid > div[data-tooltip],
.idf-list-grid > div:has([data-tooltip]) {
  overflow: visible !important;
}