/**
 * storyforge.css — Modul-CSS (additiv zu den Shared-Bausteinen)
 *
 * Enthält NUR Modul-Spezifisches: Karten-Grids (Projekte/Personas),
 * Editor-3-Spalten-Layout, Plot-Akt-Gruppen, Grid-Spaltenbreiten,
 * Status-Pillen-FARBEN (Geometrie kommt aus idf-list-grid.css) und den
 * App-Header-Breadcrumb (Muster bp-breadcrumb aus bestellungen).
 */

/* ================================================================ */
/* App-Header-Breadcrumb — seit #194 aus dem Shared-Block            */
/* blocks/app-breadcrumb ($useBreadcrumb, Klassen idf-breadcrumb-*;  */
/* der Projektname nutzt das Kontext-Glied .idf-breadcrumb-label).   */
/* ================================================================ */

/* ================================================================ */
/* Status-Pillen-Farben (Geometrie aus idf-list-grid.css)           */
/* ================================================================ */
/* Projekt-Status */
.sf-pill-status-konzeption     { background: var(--pastel-accent); color: var(--accent); }
.sf-pill-status-entwurf        { background: var(--pastel-orange); color: var(--orange); }
.sf-pill-status-ueberarbeitung { background: var(--pastel-yellow); color: var(--pastel-yellow-text); }
.sf-pill-status-fertig         { background: var(--pastel-green); color: var(--confirm); }

/* Kapitel-Status (Editor-Sidebar) */
.sf-pill-kapitel-entwurf { background: var(--pastel-orange); color: var(--orange); }
.sf-pill-kapitel-review  { background: var(--pastel-accent); color: var(--accent); }
.sf-pill-kapitel-final   { background: var(--pastel-green); color: var(--confirm); }

/* Plot-Status */
.sf-pill-plot-geplant      { background: var(--bg); color: var(--mid); }
.sf-pill-plot-entwurf      { background: var(--pastel-orange); color: var(--orange); }
.sf-pill-plot-geschrieben  { background: var(--pastel-accent); color: var(--accent); }
.sf-pill-plot-ueberarbeitet{ background: var(--pastel-yellow); color: var(--pastel-yellow-text); }
.sf-pill-plot-final        { background: var(--pastel-green); color: var(--confirm); }

/* Persona-Rolle */
.sf-pill-rolle-protagonist { background: var(--pastel-accent); color: var(--accent); }
.sf-pill-rolle-antagonist  { background: var(--pastel-red); color: var(--primary); }
.sf-pill-rolle-nebenfigur  { background: var(--bg); color: var(--mid); }
.sf-pill-rolle-mentor      { background: var(--pastel-green); color: var(--confirm); }

/* ================================================================ */
/* Projekt-Karten (index.php)                                       */
/* ================================================================ */
.sf-projekte-rows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  padding: 16px 32px;
}
.sf-projekte-rows > .idf-list-loading,
.sf-projekte-rows > .idf-list-empty { grid-column: 1 / -1; }

.sf-projekt-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: default;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.sf-projekt-card:hover {
  border-color: var(--soft);
  box-shadow: var(--shadow-card);
}

.sf-projekt-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.sf-projekt-card-actions {
  margin-left: auto;
  display: flex;
  gap: 4px;
}
.sf-projekt-card-titel {
  font-size: 19px; /* 19px bewusst ausserhalb der Token-Skala (prominenter Karten-Titel zwischen --font-lg 18px und --font-xl 20px) - Audit L-E3/#201, dokumentierte Ausnahme. */
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.sf-projekt-card-untertitel {
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--mid);
  margin-top: 2px;
}
.sf-projekt-card-teaser {
  font-size: var(--font-xs2);
  font-weight: 300;
  color: var(--mid);
  margin-top: 8px;
  line-height: 1.5;
}

/* ================================================================ */
/* Editor (editor.php): Sidebar | Textarea | Preview                */
/* ================================================================ */
/* Vollhöhen-App-Shell nur auf der Editor-Seite: body wird 100vh,
   Header/Subnav/Footer behalten ihre Höhe, der Editor-Main nimmt den
   Rest — Textarea, Preview und Kapitel-Liste scrollen intern. */
body.sf-editor-body {
  height: 100vh;
  overflow: hidden;
}
body.sf-editor-body #app {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sf-editor-main {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  flex: 1;
  min-height: 0;
}
/* Preview ausgeblendet → Editor bekommt die volle Restbreite */
.sf-editor-main.sf-preview-off {
  grid-template-columns: 280px minmax(0, 1fr);
}
.sf-editor-main.sf-preview-off .sf-editor-preview { display: none; }

/* --- Kapitel-Sidebar --- */
.sf-kapitel-sidebar {
  border-right: 1px solid var(--line);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sf-kapitel-sidebar-head {
  padding: 12px 14px 8px;
  font-size: var(--font-xs);
  font-weight: 700;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sf-kapitel-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 0 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sf-kapitel-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  background: transparent;
}
.sf-kapitel-item:hover { background: var(--bg-hover); }
.sf-kapitel-item.is-active {
  background: var(--white);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.sf-kapitel-item .sf-kapitel-handle {
  color: var(--soft);
  cursor: grab;
  font-size: 12px;
  opacity: 0.6;
}
.sf-kapitel-item .sf-kapitel-nummer {
  font-size: var(--font-xs2);
  font-weight: 700;
  color: var(--mid);
  min-width: 18px;
}
.sf-kapitel-item .sf-kapitel-titel {
  flex: 1;
  min-width: 0;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sf-kapitel-item .sf-kapitel-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-xs);
  font-weight: 300;
  color: var(--soft);
  white-space: nowrap;
}
/* Kapitel-Status-Pille: Mini-Geometrie kommt seit L5/#201 aus der
   Shared-Variante .idf-pill.is-xs (idf-list-grid.css) - kein lokaler
   Override mehr (§7.6). */

.sf-kapitel-add {
  margin: 6px 8px 10px;
  padding: 9px 10px;
  border: 1.5px dashed var(--line);
  border-radius: 8px;
  background: none;
  color: var(--mid);
  font-size: var(--font-sm);
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.sf-kapitel-add:hover { border-color: var(--accent); color: var(--accent); }

/* --- Editor-Spalte --- */
.sf-editor-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.sf-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  font-size: var(--font-xs2);
  color: var(--mid);
}
.sf-editor-toolbar .sf-toolbar-spacer { flex: 1; }
.sf-editor-wortzahl { font-weight: 500; white-space: nowrap; }

/* Status-Combobox in der Toolbar: breiter (Status voll lesbar) und auf
   Button-Höhe (idf-btn.is-sm = 36px) — sonst wirkt der Pia-Button höher. */
.sf-editor-toolbar #sf-kapitel-status-mount { flex: 0 0 auto; width: 160px; }
.sf-editor-toolbar .combobox-trigger { height: 36px; box-sizing: border-box; }

.sf-editor-textarea {
  flex: 1;
  min-height: 0;
  width: 100%;
  border: 0;
  resize: none;
  outline: none;
  padding: 22px 26px;
  font-family: inherit;
  font-size: var(--font-base);
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
}
.sf-editor-textarea::placeholder { color: var(--soft); }

/* Sichtbarkeits-Toggle Editor vs. Leerzustand (is-hidden ist im Shared-CSS
   nur für load-more definiert — hier die Editor-Varianten). */
.sf-editor-textarea.is-hidden,
.sf-editor-empty.is-hidden { display: none; }

/* Leerzustand-Optik kommt aus Shared blocks/empty-state (.idf-empty-state,
   H1/#198, $useEmptyState in editor.php) - hier nur der Layout-Rest:
   füllt das Editor-Pane. */
.sf-editor-empty { flex: 1; }

/* --- Preview-Spalte --- */
.sf-editor-preview {
  border-left: 1px solid var(--line);
  overflow-y: auto;
  min-height: 0;
  padding: 22px 26px;
  background: var(--bg);
}

/* --- „Pia schreibt mit" (editor.php, #185-Diff-Teil) --- */
/* Pia-Button: Akzent-Tonalität (KI-Aktion, wie Zusammenfassen-Buttons). */
.sf-pia-btn {
  background: var(--accent);
  color: var(--white);
}
.sf-pia-btn:hover { background: var(--ink); }

.sf-pia-selection-hint {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* FlagCheck-Pille nicht auf volle Breite stretchen */
  gap: 6px;
}
.sf-pia-selection-preview {
  font-size: var(--font-xs2);
  font-weight: 300;
  color: var(--mid);
  font-style: italic;
}

.sf-pia-kommentar {
  background: var(--pastel-accent);
  color: var(--ink);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: var(--font-sm);
  line-height: 1.5;
  margin-bottom: 14px;
}
.sf-pia-kommentar i { color: var(--accent); margin-right: 6px; }

.sf-pia-diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  min-height: 0;
}
.sf-pia-diff-col {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sf-pia-diff-col-head {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  font-size: var(--font-xs);
  font-weight: 700;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sf-pia-diff-host {
  padding: 12px 14px;
  overflow-y: auto;
  max-height: 55vh;
}

/* ================================================================ */
/* Personas (personas.php): Karten-Grid                             */
/* ================================================================ */
.sf-personas-rows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  padding: 16px 32px;
}
.sf-personas-rows > .idf-list-loading,
.sf-personas-rows > .idf-list-empty { grid-column: 1 / -1; }

.sf-persona-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  /* padding:0 hebt das .idf-list-row-Padding (0 32px) auf — Bild randlos. */
  padding: 0;
  overflow: hidden;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.sf-persona-card:hover {
  border-color: var(--soft);
  box-shadow: var(--shadow-card);
}
.sf-persona-card.is-inaktiv { opacity: 0.55; }

/* Bild oben — 1:1, volle Kartenbreite */
.sf-persona-card-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sf-persona-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sf-persona-card-img-initial {
  font-size: 64px; /* 64px bewusst ausserhalb der Token-Skala (Deko-Initial im 1:1-Bildplatzhalter, keine Typo-Skala sinnvoll) - Audit L-E3/#201, dokumentierte Ausnahme. */
  font-weight: 800;
  color: var(--soft);
}

/* Fuß: Name + Position links, Öffnen-Stift rechts */
.sf-persona-card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
}
.sf-persona-card-text { min-width: 0; flex: 1; }
.sf-persona-card-name {
  display: block;
  font-size: 17px; /* 17px bewusst ausserhalb der Token-Skala (Persona-Kartenname zwischen --font-base 16px und --font-lg 18px) - Audit L-E3/#201, dokumentierte Ausnahme. */
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sf-persona-card-position {
  display: block;
  font-size: var(--font-md);
  font-weight: 400;
  color: var(--mid);
  margin-top: 2px;
}

/* ================================================================ */
/* Plot (plot.php): Akt-Gruppen + Listen-Grid                       */
/* ================================================================ */
/* Spalten: Drag · Akt · Titel (2zeilig) · Typ · POV · Ort · Status · Detail · Löschen */
.sf-plot-grid {
  /* Breiten aus der CSS-Variable (col-resize-Baustein); Fallback = Defaults. */
  grid-template-columns: var(--sf-plot-cols, 34px 56px minmax(200px, 2fr) 130px minmax(120px, 1fr) minmax(100px, 1fr) 130px 44px 44px);
}

.sf-plot-akt-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px 6px;
  font-size: var(--font-xs2);
  font-weight: 700;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sf-plot-akt-head .sf-plot-akt-count {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 8px;
  font-size: var(--font-xs);
  font-weight: 600;
  line-height: 18px;
}

.sf-plot-handle {
  color: var(--soft);
  cursor: grab;
  font-size: 12px;
  opacity: 0.6;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ================================================================ */
/* Stil (stil.php): Listen-Grid                                     */
/* ================================================================ */
/* Spalten: Aktiv · Regel (2zeilig) · Kategorie · Priorität · Detail · Löschen */
.sf-stil-grid {
  /* Breiten aus der CSS-Variable (col-resize-Baustein); Fallback = Defaults. */
  grid-template-columns: var(--sf-stil-cols, 44px minmax(260px, 3fr) 140px 90px 44px 44px);
}
.sf-stil-row.is-inaktiv { opacity: 0.55; }

/* ================================================================ */
/* Ideen (ideen.php): Board-Seite                                   */
/* ================================================================ */
.sf-ideen-board-wrap {
  padding: 16px 32px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.sf-idee-card-titel {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}
.sf-idee-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
}
.sf-idee-card-plotlink {
  font-size: var(--font-xs);
  font-weight: 300;
  color: var(--soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ================================================================ */
/* Responsive                                                       */
/* ================================================================ */
@media (max-width: 1100px) {
  .sf-projekte-rows,
  .sf-personas-rows,
  .sf-ideen-board-wrap { padding: 14px; }
  .sf-plot-akt-head { padding: 14px 14px 6px; }

  /* Editor: Preview unter dem Editor statt daneben ist auf Tablet
     unpraktisch — Preview standardmäßig per Toggle ausblendbar,
     hier nur die Sidebar schmaler. */
  .sf-editor-main { grid-template-columns: 220px minmax(0, 1fr); }
  .sf-editor-preview { display: none; }
}

/* ================================================================ */
/* Personas v0.4.0: Bild-Block, Bücher-Tab, Beziehungs-Tab          */
/* (Karten-Optik selbst weiter oben — Bild 1:1 + Name/Position.)    */
/* ================================================================ */

/* Steckbrief-Tab: Felder links, Bild rechts */
.sf-persona-basics {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 18px;
  align-items: start;
}
.sf-persona-bild {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sf-persona-bild-preview {
  width: 200px;
  height: 200px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sf-persona-bild-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sf-persona-bild-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--soft);
  font-size: var(--font-xs2);
}
.sf-persona-bild-empty i { font-size: 26px; opacity: 0.5; }
.sf-persona-bild-busy { font-size: var(--font-xs2); color: var(--mid); }
.sf-persona-bild-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

/* Bücher-Tab */
.sf-tab-hint {
  font-size: var(--font-sm);
  font-weight: 300;
  color: var(--mid);
  padding: 10px 2px;
}
.sf-buch-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 14px;
  overflow: hidden;
}
.sf-buch-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  font-size: var(--font-md);
}
.sf-buch-card-head i { color: var(--mid); }
.sf-buch-card-spacer { flex: 1; }
.sf-buch-card-form { padding: 14px; }
.sf-buch-add { margin-top: 8px; max-width: 320px; }

/* Beziehungen-Tab */
.sf-beziehung-row {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.sf-beziehung-cells {
  display: grid;
  grid-template-columns: minmax(140px, 1.2fr) minmax(120px, 1fr) minmax(140px, 1fr) minmax(140px, 1.6fr) 36px;
  gap: 8px;
  align-items: center;
}
.sf-beziehung-notiz {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: var(--font-sm);
  font-family: inherit;
  background: var(--bg);
  min-width: 0;
}
.sf-beziehung-add { margin-top: 8px; max-width: 320px; }
.sf-beziehungen-in-head {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: var(--font-xs);
  font-weight: 700;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.sf-beziehung-in {
  font-size: var(--font-sm);
  color: var(--mid);
  padding: 4px 2px;
}
.sf-beziehung-in strong { color: var(--ink); }

@media (max-width: 1100px) {
  .sf-persona-basics { grid-template-columns: 1fr; }
  .sf-beziehung-cells { grid-template-columns: 1fr 1fr; }
}

/* ================================================================ */
/* Persona-Modal: „Aktiv"-Toggle — Icon-Pille (klickbar) + Label      */
/* daneben (compact flag-check + externer Text), statt breiter Pille. */
/* ================================================================ */
/* .idf-form > .idf-form-row-full ist display:grid (Spezifität 0,2,0) und
   würde Pille + Label untereinander stapeln — gleiche Spezifität, später
   geladen → flex gewinnt, Label sitzt daneben. */
.idf-form .sf-aktiv-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sf-aktiv-toggle-label {
  color: var(--mid);
  font-size: var(--font-md);
  cursor: pointer;
}

/* ================================================================ */
/* Persona-Verlinkung in der Editor-Live-Preview                     */
/* (storyforge-editor-personas.js: Namen → klickbare Marke,          */
/* Doppelklick öffnet das Persona-Modal). Dezente, additive Marke.   */
/* ================================================================ */
.sf-persona-link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  cursor: pointer;
}
.sf-persona-link:hover {
  text-decoration-style: solid;
  background: var(--tint-accent);
  border-radius: 3px;
}

/* ================================================================ */
/* Beziehungs-Netz (beziehungen.php) — Knoten + SVG-Linien.          */
/* Technik gespiegelt von netzwerk-karte.css; Linienfarbe nach       */
/* Stärke statt Verbindungs-Typ. Knoten und SVG liegen im selben     */
/* un-transformierten Canvas → Knoten-Mittelpunkt = Linien-Endpunkt. */
/* ================================================================ */
/* Bewusstes Canvas-Design (Audit L-E10/#201): die Netz-Flaeche fuellt den
   Viewport (80px = Header-Annahme), der Footer liegt unterhalb des Folds.
   Alternative waere das nexus-graph-Flex-Muster (Body-Klasse + #app-Flex-
   Kette, s. dashboard/views/nexus-graph.css) - bewusst nicht umgesetzt. */
.sf-netz-main {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 80px);
}

.sf-netz-viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 460px;
  margin: var(--space-4, 16px) var(--space-8, 32px) 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 6px);
  background: var(--bg);
  cursor: grab;
}
.sf-netz-viewport.is-panning { cursor: grabbing; }

.sf-netz-canvas {
  position: relative;
  transform-origin: 0 0;
}

.sf-netz-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

.sf-netz-edge {
  fill: none;
  stroke: var(--ink);
  opacity: 0.6;
  stroke-linecap: round;
}
.sf-netz-edge[data-sign="pos"]  { stroke: var(--accent); }  /* Verbündeter — Blau */
.sf-netz-edge[data-sign="neg"]  { stroke: var(--red); }     /* Feind — Rot */
.sf-netz-edge[data-sign="zero"] { stroke: var(--ink); }     /* Neutral — Schwarz */
.sf-netz-edge.is-active { opacity: 1; }
.sf-netz-edge.is-dimmed { opacity: 0.1; }

.sf-netz-nodes {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.sf-netz-empty {
  position: absolute;
  left: 50%;
  top: 48px;
  transform: translateX(-50%);
  max-width: 520px;
}

.sf-netz-node {
  position: absolute;
  width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: grab;
  user-select: none;
}
.sf-netz-node.is-dragging { cursor: grabbing; z-index: 3; }
.sf-netz-node.is-inaktiv { opacity: 0.5; }
.sf-netz-node.is-dimmed { opacity: 0.35; }

.sf-netz-node-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 2px solid var(--line);
  box-shadow: var(--shadow-card);
}
.sf-netz-node-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.sf-netz-node-initial {
  font-size: 26px; /* 26px bewusst ausserhalb der Token-Skala (Deko-Initial im 64px-Netz-Avatar) - Audit L-E3/#201, dokumentierte Ausnahme. */
  font-weight: 700;
  color: var(--mid);
}
/* Rollen-Ring — dezent, additiv */
.sf-netz-node[data-rolle="protagonist"] .sf-netz-node-avatar { border-color: var(--accent); }
.sf-netz-node[data-rolle="antagonist"]  .sf-netz-node-avatar { border-color: var(--red); }
.sf-netz-node[data-rolle="mentor"]      .sf-netz-node-avatar { border-color: var(--indigo); }

.sf-netz-node.is-selected .sf-netz-node-avatar { box-shadow: var(--shadow-focus); border-color: var(--accent); }
.sf-netz-node.is-neighbor .sf-netz-node-avatar { border-color: var(--accent); }

.sf-netz-node-name {
  max-width: 110px;
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  font-size: var(--font-xs2);
  line-height: 1.4;
  color: var(--ink);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-netz-legende {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px var(--space-8, 32px) var(--space-4, 16px);
  color: var(--mid);
  font-size: var(--font-sm, 13px);
}
.sf-netz-legende-item { display: inline-flex; align-items: center; gap: 6px; }
.sf-netz-legende-sep { width: 1px; height: 16px; background: var(--line); }
.sf-netz-legende-hint { color: var(--mid); }
.sf-netz-legende-linie {
  display: inline-block;
  width: 26px;
  height: 0;
  border-top: 3px solid var(--ink);
}
.sf-netz-legende-linie[data-sign="pos"]  { border-top-color: var(--accent); }
.sf-netz-legende-linie[data-sign="neg"]  { border-top-color: var(--red); }
.sf-netz-legende-linie[data-sign="zero"] { border-top-color: var(--ink); }

@media (max-width: 1100px) {
  .sf-netz-viewport { margin-left: var(--space-4, 16px); margin-right: var(--space-4, 16px); }
  .sf-netz-legende { padding-left: var(--space-4, 16px); padding-right: var(--space-4, 16px); }
}