/**
 * idf-standard-artefakt v0.6.7 - Skelett
 *
 * Styling nutzt ausschließlich :root-Variablen aus idf-core.css.
 * Keine Hex-Werte außer als var(--x, #fallback) in absoluten Ausnahmen.
 *
 * Design-System (IDF Web-App-Design-Richtlinie):
 *   - Schrift: Figtree, 16px Basis
 *   - Icons: FontAwesome Regular (fa-regular)
 *   - Farbpalette: --primary #c8134b, --accent #0c998e, --info #167ea0
 *
 * v0.6.7 (Joerg-Design-Feedback 2026-07-05): Save-Badge-Radius von der
 *   Voll-Pille (999px) auf den Pillen-Standard 6px (.idf-pill/.idf-pill-tag),
 *   damit er wie die uebrigen Status-Badges rundet statt als Tablett.
 *
 * v0.6.6 (Joerg-Design-Feedback 2026-07-03, 3 Punkte + 1 Bugfix):
 *   (1) Inaktive Tabs heller (color-mix mid/white ~#999), Hover =
 *   ink INKL. ink-Unterstreichung (aktiver Tab bleibt primary).
 *   (2) Relation-Zeilen-Hover von --neutral-bg auf den Standard
 *   --bg-hover (war zu dunkel). (3) Accept/Reject-Hover von den
 *   Phantom-Fallback-Fremdtoenen (Mint #d1fae5/Rosa #fdecef) auf
 *   var(--tint-confirm)/var(--tint-primary) (einheitliches Schema).
 *   (4) BUGFIX Relation-Grid: auto-flow column statt fester
 *   Spaltenzahlen - beim KI-Vorschlag MIT Meta (5 Kinder, 4 Spalten)
 *   wickelte der Loesch-Button in Zeile 2 und wurde voll gestreckt.
 *
 * v0.6.5 (#201 L5c, Joerg-Entscheidung 2026-07-03): Datei ist jetzt
 *   phantom-frei. ERSATZLOS entfernt (renderten seit je nichts, Joerg
 *   hat die Ist-Optik abgenommen): 7x background var(--surface-alt)
 *   (Toenung), 4x background var(--surface), 5x border 1px var(--border)
 *   (die Kopf-/Fuss-Trennlinien und Item-Rahmen existierten nie -
 *   IACVT macht die ganze border-Shorthand unwirksam). --ok-bg/--err-bg
 *   der Relation-Hover durch Ist-Werte ersetzt. SICHTBARE REPARATUR:
 *   der Save-Badge (data-kind pending/ok/err) war durch die Phantome
 *   --warn/--ok/--err(-bg) farblos - jetzt Tint-Muster (gelb/gruen/
 *   rot), Sichtabnahme Joerg.
 *
 * v0.6.4 (#201 L5b): neutrale Alphas auf die neue Shade-Familie
 *   (die EINE --surface-alt-Stelle MIT Fallback (footer-action:hover)
 *   -> var(--shade-04), Hover 0.15 -> var(--shade-15), Flaeche 0.08 ->
 *   var(--shade-08)); render-identisch. 7 fallback-lose
 *   var(--surface-alt)-Stellen rendern weiterhin transparent
 *   (Phantom ohne Fallback) - offener Punkt in #201, gleiche
 *   Sichtabnahme-Familie wie v0.6.3.
 *
 * v0.6.3 (#201 L5, Joerg-Freigabe 2026-07-03): Phantom-Familie
 *   --text/--text-muted/--hover (22 Stellen, nie definiert - color
 *   erbte vom Parent, der Close-Hover blieb transparent) auf die
 *   gemeinte Hierarchie gemappt: --text -> var(--ink), --text-muted
 *   -> var(--mid), --hover -> var(--bg-hover). SICHTBARE Aenderung:
 *   Sekundaertexte (Labels, Meta, Tabs) rendern jetzt gedaempft grau
 *   statt geerbtem Schwarz, der X-Button bekommt seinen Hover.
 *   Sichtabnahme durch Joerg nach Deploy.
 *
 * v0.6.2 (#201 L5): Fallback-Hygiene (Regel 17: --mid/--space-3-
 *   Falschwerte exakt, --font-family-Fallback raus) + render-identische
 *   Phantom-Aufloesung (--on-primary -> --white, --ok -> --confirm,
 *   --err -> --primary). Die verbleibenden Phantome der Datei
 *   (--ok-bg/--err-bg mit Fallback-Rendern; --surface-alt bare, rendert
 *   transparent) sind als offener Punkt in #201 dokumentiert.
 *
 * v0.6.1 (#199 K4): Phantom-Token --font-sans durch --font-family
 *   ersetzt (gleicher gerenderter Stack, Fallback unverändert).
 *
 * v0.6.0: Basics-Split-Layout (.idf-basics-split/-fields) - Shared-
 *   Extraktion des 2-Spalten-Basics-Tabs (Formular links, Bild rechts)
 *   aus 5 wortgleichen Modul-Kopien (Audit H4/#198).
 *
 * v0.5.9: Tab-Counter mit Inhalt jetzt in Primary-Rot statt grau.
 *   Tabs ohne Inhalt (.is-empty) bleiben dezent. So sieht man auf einen
 *   Blick wo etwas verknüpft ist.
 *
 * v0.5.8: Title-Icon-Style (.idf-sa-title-icon).
 * v0.5.7: Title-Suffix-Style (nicht-fett, muted, kleiner).
 */

/* Toast-Override */
.toast { z-index: 99999 !important; }

/* Modal-Wrapper.
   max-height muss BEIDES kompensieren: viewport-Höhe + Overlay-Padding
   (.modal-overlay hat padding: 48px 16px = 96 px top+bottom). Sonst
   wächst Wrap + Padding über 100vh, das Overlay bekommt eine eigene
   Scrollbar und scrollt den kompletten Wrap (inkl. Tab-Bar) als Block.
   Mit calc(100vh - 96px) bleibt der Wrap im sichtbaren Bereich, nur
   .idf-sa-body scrollt intern. */
.idf-sa-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 96px);
  color: var(--ink);
  border-radius: var(--radius-lg, 8px);
  overflow: hidden;
  /* #199 K4: --font-sans war ein Phantom-Token (nirgends definiert, es
     griff immer der Fallback). --font-family (idf-tokens, Wert inherit)
     erbt vom <body> denselben Figtree-Stack - pixelidentisch. Fallback
     in L5 entfernt (Regel 17; Token laedt auf jeder Seite). */
  font-family: var(--font-family);
  font-size: 16px;
}

/* Header */
.idf-sa-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  flex-shrink: 0;
}

.idf-sa-title {
  flex: 1;
  margin: 0;
  font-size: 1.125rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0;
}

.idf-sa-title-icon {
  color: var(--mid);
  font-size: 0.95em;
  margin-right: 8px;
}

.idf-sa-title-main {
  font-weight: 600;
  color: var(--ink);
}

.idf-sa-title-suffix {
  font-weight: normal;
  color: var(--mid);
  font-size: 0.875em;
  margin-left: 6px;
}

.idf-sa-save-badge {
  font-size: 0.875rem;
  padding: 4px 10px;
  border-radius: 6px; /* Pillen-Standard (.idf-pill/.idf-pill-tag), kein Voll-Pill/Tablett */
  color: var(--mid);
}
/* Save-Feedback-Farben (L5c/#201): die frueheren Phantome --warn/--ok/
   --err(-bg) renderten NIE - der Badge war farblos. Jetzt auf das
   etablierte Tint-Muster (sichtbare Reparatur, Joerg-Abnahme). */
.idf-sa-save-badge[data-kind="pending"] { background: var(--tint-yellow);  color: var(--yellow-text); }
.idf-sa-save-badge[data-kind="ok"]      { background: var(--tint-confirm); color: var(--confirm); }
.idf-sa-save-badge[data-kind="err"]     { background: var(--tint-primary); color: var(--primary); }

/* .idf-sa-delete erbt Geometrie + Hover-Look komplett aus dem shared
   `.idf-list-delete-btn` (siehe _shared/functions/list-view/grid-css/idf-list-grid.css) —
   28×28, transparent default, fa-solid fa-trash, Brand-rot Hover.
   Konvergent zu allen Row-/Card-Delete-Pillen in der App. Vorher
   eigene Padding/Border-Radius-Geometrie + var(--err) Hover, die sich
   von den Listen-Trashs unterschied. */
.idf-sa-close {
  background: transparent;
  border: 0;
  color: var(--mid);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius-sm, 4px);
  font-size: 1rem;
}
.idf-sa-close:hover { background: var(--bg-hover); color: var(--ink); }

/* Tab-Bar — bleibt oben fest, scrollt nicht mit dem Body weg.
   flex-shrink: 0 verhindert dass die Tab-Bar zusammengepresst wird,
   wenn der Body lang ist. Vertikal positioniert sie sich automatisch
   zwischen Header und Body durch die flex-column-Reihenfolge im Wrap. */
.idf-sa-tabs {
  display: flex;
  gap: 2px;
  padding: 0 12px;
  overflow-x: auto;
  flex-shrink: 0;
}

.idf-sa-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  /* Inaktive Tabs deutlich heller als --mid, damit der Hover-Sprung
     auf ink sichtbar ist (Joerg-Feedback 2026-07-03, ~#999). */
  color: color-mix(in srgb, var(--mid) 60%, var(--white));
  cursor: pointer;
  font: inherit;
  font-size: 0.9375rem;
  white-space: nowrap;
  transition: color 120ms ease, border-color 120ms ease, opacity 120ms ease;
}

/* Hover = schwarz inkl. Unterstreichung wie beim aktiven Tab, nur in
   ink (Joerg-Feedback); der aktive Tab gewinnt darunter (spaetere
   Regel gleicher Spezifitaet) und bleibt auch gehovert primary. */
.idf-sa-tab:hover { color: var(--ink); border-bottom-color: var(--ink); }

.idf-sa-tab.is-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* `is-filled` / `is-empty` markieren weiterhin den Inhaltsstatus
   eines Tabs (badge-count), aber die Schrift-Opazität ist raus
   (User-Wunsch 2026-05-24): leere Tabs wirkten zu sehr
   „weggedimmt". Der Unterschied lebt jetzt nur noch in der
   Counter-Pille (`.idf-sa-tab.is-empty .idf-sa-tab-count` →
   neutralgrau statt Primary-Rot). */
.idf-sa-tab.is-filled,
.idf-sa-tab.is-empty { opacity: 1; }

/* Tab-Counter:
   - Default = Tab hat Inhalt (count > 0): Primary-Rot, sticht heraus.
   - .is-empty = count == 0: dezent grau, tritt zurück. */
.idf-sa-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}
.idf-sa-tab.is-empty .idf-sa-tab-count {
  color: var(--mid);
  font-weight: 600;
}

/* ============================================================
   Modal-Form-Helpers (`.idf-form`-Overrides für den Modal-Body)
   ------------------------------------------------------------
   Bündigt die Pillen und Buttons im Modal-Form auf die
   Form-Input-Höhe (`--idf-form-h`). Vorher lebten diese Regeln
   in `aufgaben/aufgaben.css`, was dazu führte, dass jeder
   Modul-Host, der `IDF.aufgaben.openAufgabe()` aufruft (protokolle
   für die „↗ Aufgabe AG-…"-Sub-Line, dashboard für das Tasks-
   Panel, künftig andere), `aufgaben.css` als Cross-Modul-
   Abhängigkeit mitladen musste — sonst hatte die Erledigt-Pille
   im Modal keinen Style. Seit 2026-05-24 sind sie hier shared.

   Klassen:
   - `.status-row` — flex-Wrapper für Status-Combobox + Erledigt-
     Toggle nebeneinander
   - `.sa-erledigt-toggle` — Erledigt-Pille im Modal-Header, hat
     einen `is-active`-State mit Confirm-Grün
   - `.idf-form .idf-flag-check` — flag-pills auf Form-Höhe ziehen
   - `.idf-form .idf-eh-status` — Eisenhower-Status-Pille auf
     Form-Höhe ziehen
   - `.idf-form > label small[data-fortschritt-display]` — kleines
     Prozent-Display neben dem Range-Slider
   ============================================================ */

/* Status-Row im Detail-Modal — Status-Combobox + Erledigt-Toggle nebeneinander. */
.idf-form .status-row { display: flex; gap: 8px; align-items: stretch; }
.idf-form .status-row > [data-mount="status"] { flex: 1; min-width: 0; }
.idf-form .status-row > .sa-erledigt-toggle { flex: 0 0 auto; }

/* Erledigt-Pille im Modal-Header (Form-Variante — bündig mit
   Inputs durch `--idf-form-*`-Variablen). */
.idf-form .sa-erledigt-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, #fff);
  color: var(--mid, #555555);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  padding: 0;
  font-size: var(--idf-form-font);
  box-sizing: border-box;
}
.idf-form .sa-erledigt-toggle:hover { border-color: var(--mid, #555555); }
.idf-form .sa-erledigt-toggle.is-active {
  background: var(--confirm, #0c998e);
  color: #fff;
  border-color: var(--confirm, #0c998e);
}
.idf-form .sa-erledigt-toggle.is-active:hover { filter: brightness(1.06); }

/* Flag-Check-Pillen im Form-Kontext — auf Form-Höhe und -Radius angleichen. */
.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; }
.idf-form .idf-flag-check.is-compact {
  width: var(--idf-form-h);
  padding: 0;
  justify-content: center;
}

/* Eisenhower-Status-Pille im Form-Kontext — selbe Höhe wie Inputs. */
.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);
  line-height: 1;
  box-sizing: border-box;
}

/* Fortschritts-Display neben Range-Slider. */
.idf-form > label small[data-fortschritt-display] {
  color: var(--mid, #555);
  font-weight: 600;
  margin-left: 6px;
}

/* Body — scrollt vertikal, wenn der Inhalt größer als die verfügbare
   Modal-Höhe wird. WICHTIG: min-height: 0 ist Pflicht, sonst kann das
   Flex-Item nicht unter seine Content-Höhe schrumpfen — der Wrap würde
   dann über max-height: 95vh hinaus wachsen und Tab-Bar + Footer
   würden mit dem Body wegscrollen statt sticky zu bleiben. */
.idf-sa-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
}

/* Footer — wie Header, fix unten via flex-shrink: 0. */
.idf-sa-footer {
  padding: 12px 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Primary-Button */
.idf-sa-button-primary,
.idf-sa-relation-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--primary);
  color: var(--white);
  border: 0;
  border-radius: var(--radius-sm, 4px);
  font: inherit;
  cursor: pointer;
  transition: background 120ms ease;
}
.idf-sa-button-primary:hover,
.idf-sa-relation-add:hover { background: #111; }
.idf-sa-button-primary:disabled,
.idf-sa-relation-add:disabled { opacity: 0.5; cursor: not-allowed; }
.idf-sa-button-primary:disabled:hover,
.idf-sa-relation-add:disabled:hover { background: var(--primary); }

/* Footer-Action — sekundärer Button/Link links neben dem Primary-
   "Speichern & Schließen" (opts.footerActions). Gleiche Geometrie wie
   der Primary-Button, aber sekundäre (bordered/transparent) Tonalität. */
.idf-sa-footer-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  color: var(--ink, #111);
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease;
}
.idf-sa-footer-action:hover {
  background: var(--shade-04);
  border-color: var(--ink, #111);
}

/* Relation-Tab */
.idf-sa-relation-header { margin-bottom: 16px; }

.idf-sa-relation-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 4px;
}

.idf-sa-relation-item {
  display: grid;
  /* Erste Spalte flext, alle weiteren Kinder (Meta, Accept/Reject,
     Loeschen) reihen sich als implizite max-content-Spalten in
     DERSELBEN Zeile ein - egal wie viele es sind. Fixt den Bestand-
     Bug, dass beim KI-Vorschlag MIT Meta (5 Kinder, aber nur 4
     definierte Spalten) der Loesch-Button in eine zweite Grid-Zeile
     wickelte und dort volle Breite bekam (Joerg 2026-07-03). */
  grid-template-columns: 1fr;
  grid-auto-flow: column;
  grid-auto-columns: auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius-sm, 4px);
  transition: background 120ms ease;
}
.idf-sa-relation-item.is-clickable .idf-sa-relation-label { cursor: pointer; }
.idf-sa-relation-label { color: var(--ink); }

/* .idf-sa-relation-remove erbt Geometrie + Hover-Look aus dem shared
   `.idf-list-delete-btn`. Hier nur :disabled-Verhalten als modul-
   spezifischer Override (kommt vor wenn die Relation gerade speichert). */
.idf-sa-relation-remove:disabled { opacity: 0.5; cursor: not-allowed; }
.idf-sa-relation-remove:disabled:hover { background: transparent; color: var(--mid); }

/* Relation-Item mit Meta-Spalte (z. B. „verknüpft von …" im Verwandt-Tab,
   Menge im Material-Tab). decorateItem fügt eine Meta-Zelle vor dem Remove-
   Button ein und setzt .has-meta. Liegt bewusst im Shared-Baustein, damit es
   in JEDEM Modal greift — auch wenn das Modal cross-modul (Protokoll,
   Dashboard, SafeGuard, Gantt) geöffnet wird und das Modul-CSS nicht geladen
   ist (sonst bräche die Zeile um, weil das Grid die 3. Spalte nicht kennt). */
/* .has-meta / .is-ai-suggestion brauchen seit dem auto-flow-Grid keine
   eigenen Spalten-Definitionen mehr (Klassen bleiben als JS-/Semantik-
   Marker erhalten). */
.idf-sa-relation-meta { color: var(--ink); }

/* Zeilen-Hover für ALLE Relation-Items (nicht nur klickbare) — konsistentes
   Listen-Feedback in allen Modal-Listen. */
/* Standard-Zeilen-Hover (--bg-hover) statt --neutral-bg - der war Joerg
   zu dunkel (Feedback 2026-07-03), jetzt wie alle Listen-Hovers. */
.idf-sa-relation-item:hover { background: var(--bg-hover); }

/* Footer-links — nimmt den o2m-Toggle des aktiven Tabs auf (links auf
   Save-Höhe). margin-right:auto schiebt ihn ans linke Ende des Footers. */
.idf-sa-footer-left {
  margin-right: auto;
  display: flex;
  align-items: center;
}

/* O2M-Reverse-Tab (read-only): keine Remove-Spalte → Flex statt des
   relation-Grids. Sekundär-Label (z.B. Nummer) klein + gedämpft vor dem
   Titel. */
.idf-sa-o2m-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Zeilen-Hover kommt zentral aus .idf-sa-relation-item:hover (--bg-hover). */
.idf-sa-o2m-item.is-clickable { cursor: pointer; }
/* „Übertragen"-Aktion (idf-list-action-link) optisch an die Erledigt-Pille
   (idf-list-done-pill) angleichen: neutraler Grau-Hover statt Akzent-Blau. */
.idf-sa-o2m-item .idf-list-action-link:hover {
  background: var(--shade-15);
  color: var(--ink, #111);
}
/* Standard-Row-Aktionen (idf-list-done-pill / -delete-btn / -action-link),
   die Konsumenten per decorateItem anhängen, folgen dem Row-Hover wie in
   Listen-Rows: leise bis Row-Hover, voll bei Direkt-Hover. */
.idf-sa-o2m-item .idf-list-done-pill,
.idf-sa-o2m-item .idf-list-delete-btn,
.idf-sa-o2m-item .idf-list-action-link { opacity: 0.25; }
.idf-sa-o2m-item:hover .idf-list-done-pill,
.idf-sa-o2m-item:hover .idf-list-delete-btn,
.idf-sa-o2m-item:hover .idf-list-action-link { opacity: 0.7; }
.idf-sa-o2m-item .idf-list-done-pill:hover,
.idf-sa-o2m-item .idf-list-delete-btn:hover,
.idf-sa-o2m-item .idf-list-action-link:hover { opacity: 1; }
.idf-sa-o2m-item .idf-list-done-pill.is-active { opacity: 1; }
/* Titel füllt die Zeile, damit per decorateItem angehängte Pille + Trash
   ans Zeilenende rücken. ink-Farbe analog Sekundär-Label. */
.idf-sa-o2m-item .idf-sa-relation-label { flex: 1 1 auto; color: var(--ink); }
/* Sekundär-Label (z.B. Nummer): Standard-Schrift + ink-Farbe — kein
   soft/klein, damit es nicht aus der Liste heraussticht. */
.idf-sa-o2m-secondary {
  flex: 0 0 auto;
  color: var(--ink);
  white-space: nowrap;
}

/* Inline-editierbare Mengen-/Wert-Zelle in der Meta-Spalte (Material-Tab):
   Text + Pen via Shared idf-inline-edit-host; min-width gibt der auto-Spalte
   Präsenz, damit Text + Pen Platz haben. */
.idf-sa-relation-qty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 92px;
  justify-content: flex-end;
  white-space: nowrap;
}

/* AI-Vorschlag-Action-Buttons (Verwandt-Tab: Übernehmen / Verwerfen). */
.idf-sa-relation-action {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm, 4px);
  color: var(--mid);
  transition: background 120ms ease, color 120ms ease;
}
/* Accept/Reject-Hover im Repo-Farbschema (Joerg-Feedback 2026-07-03:
   das fruehere Mint/Rosa waren Fremdtoene aus Phantom-Fallbacks). */
.idf-sa-relation-action.is-accept:hover { background: var(--tint-confirm); color: var(--confirm); }
.idf-sa-relation-action.is-reject:hover { background: var(--tint-primary); color: var(--primary); }

.idf-sa-relation-empty {
  padding: 24px;
  text-align: center;
  color: var(--mid);
  border-radius: var(--radius-sm, 4px);
  font-style: italic;
}

/* Quick-Create-Submit (Legacy) */
.idf-sa-form-actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Hierarchy-Tab */

/* v0.6.1: Breadcrumb für die Parent-Kette über der Children-Liste.
   Eine Aufgabe hat in Directus genau einen parent (M2O), die Kette
   nach oben kann mehrere Sprünge tief sein. Klickbare Pillen-artige
   Links mit Chevron-Separator. Sitzt zwischen Tab-Bar und der
   „Unteraufgabe anlegen"-Action. */
.idf-sa-hierarchy-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm, 4px);
  font-size: 14px;
}
.idf-sa-hierarchy-bc-label {
  color: var(--mid);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.idf-sa-hierarchy-bc-trail {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.idf-sa-hierarchy-bc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--ink);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease;
}
.idf-sa-hierarchy-bc-link:hover {
  background: var(--tint-neutral);
  border-color: var(--mid);
}
.idf-sa-hierarchy-bc-num {
  font-variant-numeric: tabular-nums;
  color: var(--mid);
  font-weight: 600;
}
.idf-sa-hierarchy-bc-sep {
  color: var(--mid);
  font-size: 0.75rem;
}

.idf-sa-hierarchy-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 4px;
}

/* v0.6.7: Grid auf 2 Spalten reduziert (Drag-Handle + Title) — Number
   und Chevron-Indicator sind aus dem Render entfernt (Joerg-Smoke
   2026-05-06: Nummern auch im Modal weg, „>"-Chevron optisch redundant).
   Hover-Background deutlicher (rgba 8 % statt --hover), damit die
   Zeile beim Drüberfahren klar reagiert — vorher war --hover im
   Modal-Surface kaum sichtbar. */
.idf-sa-hierarchy-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius-sm, 4px);
  transition: background 120ms ease;
  cursor: pointer;
}
.idf-sa-hierarchy-item:hover {
  background: var(--shade-08);
}

.idf-sa-hierarchy-title {
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   Basics-Split - 2-Spalten-Layout im Basics-Tab
   ------------------------------------------------------------
   Stammdaten-Formular links, Bild-Block rechts. Extrahiert aus
   5 wortgleichen Modul-Kopien (.wz-/.zb-/.vm-/.ak-/.un-basics,
   Audit H4/#198); Werte 1:1 uebernommen. Hier lebt NUR der
   Layout-Wrapper - die Bild-Preview/Empty/Busy-Zustaende des
   Bild-Blocks bleiben bis zur createImageField-Migration (#225)
   modul-lokal und landen dann als `.idf-image-field`-Varianten
   in functions/file-attachment/idf-file-upload.css.

   Markup:
     <div class="idf-basics-split">
       <div class="idf-form idf-basics-split-fields">…Felder…</div>
       <div>…Bild-Block (modul-lokal bzw. .idf-image-field)…</div>
     </div>
   ============================================================ */
.idf-basics-split {
  display: grid;
  /* Gleich breite Spalten - das Bild wird so gross wie moeglich,
     ohne dass die Daten-Spalte zerquetscht wird. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
@media (max-width: 800px) {
  .idf-basics-split { grid-template-columns: 1fr; }
}
/* Linke Spalte: das eigentliche Form-Grid im Split-Wrapper. Nur EINE
   Spalte intern (das Bild zieht den Rest des horizontalen Platzes),
   damit die zwei Split-Spalten visuell als genau zwei Spalten lesen. */
.idf-basics-split-fields {
  min-width: 0;
  grid-template-columns: 1fr;
  gap: var(--space-3, 12px);
}

/* Responsive */
@media (max-width: 768px) {
  .idf-sa-wrap { max-height: 100vh; height: 100vh; border-radius: 0; }
  .idf-sa-tabs { padding: 0 4px; }
  .idf-sa-tab { padding: 10px 12px; }
  .idf-sa-tab-label { display: none; }
}