/* ════════════════════════════════════════════════════════════════════════
   Gear: Progression-Baum — Karten-Visuals (Struktur in layout.css)
   Farbe nach data-type: armor → --accent (gold), weapon → --jade (teal).
   Gilt auch für Karten im Ast (z. B. Morai = Rüstung/gold trotz linkem Ast).
   ════════════════════════════════════════════════════════════════════════ */
@layer components {
  /* Geteilte Höhe der Gear-Modus-Hauptfläche (Planer · Inventar · Bibliothek fluchten): EIN Wert
     auf .page-gear → alle drei erben ihn, keine Modus-eigene Zahl (tasks/gear-inventar.md). Greift
     je Modus nur ab dem Breakpoint, ab dem eine feste Höhe sinnvoll ist. --gp-emblem = Kantenlänge
     der Klassen-/Rassen-Embleme; treibt zugleich die Höhe der Kopfleiste (.gp-headbar). */
  .page-gear {
    --gp-area-h: 42rem;
    --gp-emblem: 52px;
  }

  /* Geteilter Sidebar-Konto-Punkt (Planer + Inventar, DRY): kleiner Gold-Punkt vor dem Kontonamen
     (Container ≠ Charakter → Punkt statt Klassen-Icon). Aktiv = volle Deckkraft (pro Kontext). */
  .gp-acc-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
    opacity: 0.55;
  }

  /* Geteilte Sidebar-Klassen-Icon-Größe (Planer .gp-chars + Inventar .gp-inv-charnav): kompakter
     als das 22px-Default (das im Klassen-Picker gilt), damit die Zeile schlank bleibt. */
  .gp-chars .gp-class-icon,
  .gp-inv-charnav .gp-class-icon {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    object-fit: contain;
  }

  /* Geteilte Kopfleiste (DRY): der Streifen ÜBER der Hauptfläche — Planer/Inventar tragen darin den
     Charakter (.gp-char-header), die Bibliothek die Werkzeugzeile (.gp-lib-tools). EINE Optik + Höhe
     → alle drei Modi fluchten. min-height = Emblem + vertikales Padding (so hoch wie die gefüllte
     Charakter-Leiste, deren Avatar die Höhe treibt). */
  .gp-headbar {
    display: flex;
    align-items: center;
    min-height: calc(var(--gp-emblem) + var(--sp-4) * 2);
    margin-bottom: var(--sp-6);
    padding: var(--sp-4) var(--sp-5);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }

  /* ══ Guide-CMS Writer-Mode (Phase 2b) ══════════════════════════════════════
     Stift-Toggle + Block-Bearbeiten. Spiegelt das Progression-Writer-Muster
     (gsp-writer-*); das Modal nutzt die generischen .modal-*-Klassen. Nur sichtbar,
     wenn js den writer-mode aktiviert (Desktop-only: bootstrap.js entfernt das
     data-editor-Flag auf Touch). */
  /* Werkzeugleiste unten rechts: Buttons VERTIKAL gestapelt (nicht nebeneinander) — der breite
     horizontale Streifen ragte sonst über darunterliegende Blöcke (z. B. Warnung-Callout) und man
     traf leicht den falschen. Rechtsbündig, damit unterschiedlich breite Buttons an der Kante sitzen. */
  .page-writer-tools {
    position: fixed;
    right: var(--sp-4);
    bottom: var(--sp-4);
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sp-2);
  }

  /* „Speichern" (wie Gutenbergs „Aktualisieren"): gefüllt-gold, hebt sich vom outline-
     Stift-Toggle ab; nur sichtbar, wenn es ungespeicherte Blöcke gibt (js: hidden). */
  .page-writer-save {
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--bg-base);
    background: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--t-fast);

    &:hover {
      background: var(--accent-bright);
    }

    &:disabled {
      cursor: default;
      opacity: 0.7;
    }
  }

  /* „Verwerfen" neben „Speichern": setzt alle ungespeicherten Änderungen zurück. Sekundär
     (outline), destruktiver Hinweis erst beim Hover (danger). Nur sichtbar, wenn es dirty gibt. */
  .page-writer-discard {
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--text-2);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);

    &:hover {
      color: var(--danger);
      border-color: color-mix(in srgb, var(--danger) 50%, transparent);
      background: color-mix(in srgb, var(--danger) 12%, transparent);
    }
  }

  /* Editier-Umschalter im Header (neben dem Konto-Knopf) — GLEICHE Box wie .user-btn (Login): 42px, gerundetes
     Rechteck. Pinsel-Icon (wie WP-Customizer); im Ruhezustand leise (text-2), im aktiven Modus Gold + diagonale
     gestrichelte Linie (.pwt-strike) über dem Pinsel → „bearbeiten beenden". */
  .page-writer-toggle {
    /* EXAKT die .user-btn-Box (components-base.css): gleiche display/width/padding/border/radius/font-size →
       identische gerenderte Höhe + Breite, reiht sich in Login-Knopf + Sprach-Switch ein. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    padding: 5px 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card-2);
    color: var(--text-2);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);

    & svg {
      /* Höhe/Breite = 1 Zeilenkasten (font-size 0.8rem × line-height 1.6 der Basis) → das Icon nimmt exakt so
         viel Raum ein wie der Text-Glyph in .user-btn/.lang-toggle → die Knopfhöhe stimmt auf's Pixel überein. */
      width: calc(0.8rem * 1.6);
      height: calc(0.8rem * 1.6);
    }

    & .pwt-strike {
      display: none;
    }

    &:hover {
      color: var(--text-1);
    }

    &.is-active {
      color: var(--accent-bright);
      background: var(--accent-glow);
      border-color: var(--border-accent);
    }

    &.is-active .pwt-strike {
      display: inline;
    }
  }

  /* Sekundäre, dezente Text-Knöpfe der Werkzeug-Leiste mit Akzent-Hover (neutrale Aktionen):
     Sprach-Chip (zeigt/schaltet die Sprachspalte des Inline-Editierens) + Verlauf-Knopf (öffnet das
     Versionsverlauf-Panel). Gleiche Optik, daher zusammengefasst. */
  .page-writer-history,
  .page-writer-lang {
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--text-2);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);

    &:hover {
      color: var(--accent);
      border-color: var(--border-accent);
    }
  }

  /* Undo/Redo (Punkt 4b): sekundäre Glyph-Knöpfe (↶ ↷) in der Werkzeug-Leiste; bei leerem Stack disabled
     (gedämpft, kein Hover). Optik wie der Sprach-Chip, Glyph etwas größer für die Pfeil-Affordance. */
  .page-writer-undo,
  .page-writer-redo {
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-md);
    line-height: 1;
    color: var(--text-2);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);

    &:hover:not(:disabled) {
      color: var(--accent);
      border-color: var(--border-accent);
    }

    &:disabled {
      cursor: default;
      opacity: 0.4;
    }
  }

  .page-root.writer-mode [data-block-id] {
    cursor: pointer;
    transition: outline-color var(--t-fast), opacity var(--t-fast);

    &:hover {
      outline-color: var(--accent);
    }

    /* Block, auf den das Rechtsklick-Kontextmenü (block-menu.js) gerade wirkt: deutlich markiert,
     solange das Menü offen ist — sonst „errät" man bei Verschachtelung nur, welches Modul gemeint ist. */
    &.page-block-active {
      outline: 2px solid var(--accent);
      background: var(--accent-glow);
    }

    /* Drag-Sortierung: der gerade gezogene Block wird ausgegraut (Phase 3b). */
    &.is-dragging {
      opacity: 0.4;
    }
  }

  /* Der „zum Bearbeiten klicken"-Pointer (Regel oben) sitzt auf [data-block-id] und VERERBT sich in die
     Kinder. Über den editierbaren Textflächen (Callout-Text, Timeline-/Card-Bodies, Titel-Felder …) verdeckte
     der geerbte Pointer den natürlichen Text-Cursor → man sah die „Hand" statt des I-Beams. EIN generischer
     Reset für ALLE editierbaren Felder (statt pro-Modul-cursor:text-Flicken; die vereinzelten .tabs-tab/
     .rm-guide-link-Overrides sind damit überflüssig). Steht nach der Pointer-Regel → gewinnt bei gleichem
     Element (prose = Block selbst) per Quell-Reihenfolge; für Kind-Felder schlägt „direkt" ohnehin „geerbt". */
  .page-root.writer-mode [contenteditable="true"] {
    cursor: text;
  }

  /* Leerer Text-Block (prose/callout/Überschrift) im Writer-Mode: Platzhalter-Hinweis (Text aus
     data-placeholder, von js je Typ + UI-Sprache gesetzt). Nicht-editierbares ::before → stört
     Cursor/Klick nicht. ⚠ Die .section-title (h2) ist display:flex und stylt IHR ::before als
     Deko-Balken (components-base.css .section-title::before: width:3px, height:16px, Gold-BG). Da der
     Platzhalter DASSELBE ::before nutzt, würde dessen width:3px den Platzhalter-Text in eine 3px-Flex-
     Zelle quetschen → in Chromium bricht er senkrecht um. Darum die Balken-Box hier zurücksetzen, damit
     der Platzhalter als normaler Text erscheint (No-Op für prose/callout, die kein Deko-::before haben). */
  .page-root.writer-mode [data-placeholder].is-empty::before {
    content: attr(data-placeholder);
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    color: var(--text-3);
    pointer-events: none;
  }

  /* Leerer Abschnitt im Writer-Mode: dezenter Hinweis, dass hier ein Block hinkann. */
  .page-root.writer-mode .page-empty-sec {
    padding: var(--sp-3) 0;
    color: var(--text-3);
    font-size: var(--fs-sm);
    font-style: italic;
  }

  /* Komplett leere Seite im Writer-Mode (0 Abschnitte): dauerhaftes „+" am page-root-Anfang — der
     erste Block-Anker, wenn es noch keine Sektion zum Andocken gibt (js → refreshEmptyRoot). „+"-Pille
     + gestrichelte Linie (wie der Spacer-Trenner) + Hinweis. */
  .page-root.writer-mode .page-empty-root {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) 0;

    &::after {
      content: '';
      flex: 1;
      border-top: 1px dashed var(--border-accent);
    }
  }

  .page-empty-root-hint {
    flex: none;
    color: var(--text-3);
    font-size: var(--fs-sm);
    font-style: italic;
  }

  /* Spalten-Container (Layout-Block `columns`, Phase 2b) im Writer-Mode: jede Spalte als sichtbares,
     gestricheltes Feld (sonst wäre eine leere Spalte unsichtbar/nicht treffbar) + „+"-Anfüger am Spalten-
     Ende (chrome-sections → decorateContainers). Nur im Editor; Besucher sehen die nackten Spalten. */
  .page-root.writer-mode .cols > .col {
    min-height: var(--sp-10);
    padding: var(--sp-2);
    outline: 1px dashed var(--border-accent);
    outline-offset: -1px;
    border-radius: var(--radius-sm);
  }

  /* Positionierungs-Anker für den ziehbaren Spalten-Trenner (nur Writer-Mode; §10). Der Griff wird absolut
     an die Spaltengrenze gesetzt (Position per JS .style.left = CSSOM, CSP-erlaubt; CSS gibt nur den Kontext). */
  .page-root.writer-mode .cols {
    position: relative;
  }

  /* Ziehbarer Trenner zwischen 2 Spalten: senkrechter Greifbalken an der Spaltengrenze. Maus/Desktop-only
     (Editieren ist Maus-only). Rastet beim Ziehen auf die Verhältnis-Presets (chrome-sections → col-resize). */
  .col-resize {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--sp-3);
    margin-left: calc(var(--sp-3) / -2); /* an .style.left zentrieren */
    cursor: col-resize;
    touch-action: none;
    z-index: 2;

    &::before {
      display: block;
      width: 3px;
      height: 100%;
      margin: 0 auto;
      background: var(--border-accent);
      border-radius: var(--radius-sm);
      content: "";
      transition: background var(--t-fast);
    }

    &:hover::before,
    &.is-dragging::before {
      background: var(--accent);
    }
  }

  /* Tabs-Container im Writer-Mode (Phase 4): Edit≈View — nur der AKTIVE Reiter ist sichtbar (Klick schaltet
     um). Das sichtbare Panel wird als gestricheltes Feld markiert (wie .col), damit auch ein LEERER Reiter
     sichtbar/klickbar ist + sein „+"-Anfüger trifft. .is-editing setzt js/editor/blocks/tabs.js. */
  .page-root.writer-mode .tabs.is-editing .tabs-panel {
    min-height: var(--sp-10);
    padding: var(--sp-2);
    margin-top: var(--sp-2);
    outline: 1px dashed var(--border-accent);
    outline-offset: -1px;
    border-radius: var(--radius-sm);
  }

  /* „×" Reiter entfernen (nach jedem Nav-Reiter) + „+ Reiter" am Nav-Ende (chrome-sections → decorateTabsNav). */
  .tabs-del {
    padding: 0 var(--sp-2);
    color: var(--text-muted);
    font-size: var(--fs-base);
    line-height: 1;
    background: none;
    border: 0;
    cursor: pointer;

    &:hover {
      color: var(--danger);
    }
  }

  .tabs-add {
    padding: var(--sp-1) var(--sp-2);
    color: var(--accent);
    font-size: var(--fs-sm);
    line-height: 1;
    background: var(--accent-glow);
    border: 1px dashed var(--border-accent);
    border-radius: var(--radius-sm);
    cursor: pointer;

    &:hover {
      color: var(--bg-base);
      background: var(--accent);
    }
  }

  .col-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--sp-1) 0;
    color: var(--accent);
    font-size: var(--fs-base);
    line-height: 1;
    background: var(--accent-glow);
    border: 1px dashed var(--border-accent);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color var(--t-fast), background var(--t-fast);

    &:hover {
      color: var(--bg-base);
      background: var(--accent);
    }
  }

  /* Abstand des „+"-Anfügers zum letzten Kind-Block: der „+" ist KEIN [data-block-id], also greift der
     generische Block-Folge-Margin (unten) nicht — nur `.col` trennt ihn via flex-gap. In den nicht-flex-
     Slot-Hüllen (Akkordeon-Eintrag, Reiter-Panel, Schritt-Body) klebt der „+" sonst am Block darüber und
     dessen Editor-Umrandung überlagert ihn. Gilt für ALLE diese Container (nicht nur das Akkordeon). */
  .acc-item > .col-add,
  .tabs-panel > .col-add,
  .step-body > .col-add,
  .howto-step-text > .col-add {
    margin-top: var(--sp-4);
  }

  /* Einheitlicher Block-Abstand (Vertikal-Rhythmus): typ-agnostisch statt typ-eigener
     Margins — sonst klebt z. B. ein prose-Block am Ende einer Tabelle. Nur DB-Guides.
     outline-Basis (layout-neutral, transparent) HIER schon OHNE writer-mode: sonst steht outline-color
     beim Betreten des Writer-Mode auf dem Initialwert currentColor (heller Text ≈ weiß), und die
     transition der writer-mode-Regel (oben) animiert currentColor→transparent, während outline-style
     sofort auf solid springt → an JEDEM Block blitzt kurz eine weiße Umrandung auf. Transparente Basis
     = kein Farbsprung beim Umschalten (der Hover-Gold-Fade bleibt, weil er von transparent ausgeht). */
  .page-root [data-block-id] {
    margin-top: 0;
    margin-bottom: 0;
    outline: 1px solid transparent;
    outline-offset: 0;
  }

  .page-root [data-block-id] + [data-block-id] {
    margin-top: var(--sp-4);
  }

  /* Listen (eigenständiger Block UND inline via „/"-Menü): zentrale Darstellung in
     components-base.css (Akzent-● / ol-Counter, EINE Regel für ALLE Felder). */

  /* Vertikaler Abstandshalter (Block-Modul): leerer Block dosierter Höhe → Abstand zwischen Modulen.
     Toolbar-Menü „Abstand" = drei Höhen (sm/md/lg); mehr als groß = mehrere Spacer. Für Besucher Leerraum.
     (tasks/trenner-module-rework.md — löst die frühere „eine feste Stufe" + Volllinie-Variante ab.) */
  .page-root .page-spacer.spc-sm {
    height: var(--sp-4);
  }

  .page-root .page-spacer.spc-md {
    height: var(--sp-6);
  }

  .page-root .page-spacer.spc-lg {
    height: var(--sp-10);
  }

  /* Gestrichelte Mittellinie: im Writer-Mode für JEDEN Spacer (sonst nicht anfassbar) — UND live für
     line=dashed (.is-divider). EINE Definition für beide Fälle (DRY). */
  .page-root.writer-mode .page-spacer,
  .page-root .page-spacer.is-divider {
    display: flex;
    align-items: center;

    &::before {
      content: '';
      flex: 1;
      border-top: 1px dashed var(--border-accent);
    }
  }

  /* Sektions-Trenner (eigenes Modul section-break): durchgängige WEISSE Volllinie (var(--border) =
     rgb 255 255 255 / 5.5 %, identisch zur Abschnitts-Titel-Linie) + großer Abstand (sp-14) → spiegelt
     die echte Trennung zwischen zwei Sektionen. Klar höher als der Spacer. (tasks/trenner-module-rework.md) */
  .page-root .page-section-break {
    display: flex;
    align-items: center;
    height: var(--sp-14);

    &::before {
      content: '';
      flex: 1;
      border-top: 1px solid var(--border);
    }
  }

  /* Inline-Spacer (Text-Baustein „/"-Menü → Abstand): für Besucher reiner Leerraum, im Writer-Mode aber
     sichtbar machen — sonst platziert man einen unsichtbaren Abstand „ins Nichts" (User 2026-06-20).
     Dezenter Chip: zarte Akzent-Füllung + gestrichelter Rahmen (outline → keine Layout-Verschiebung,
     Breite bleibt exakt 1.5em). Mehr Abstand = mehrere nebeneinander, je als eigener Chip sichtbar. */
  .page-root.writer-mode .spacer {
    height: 1.1em; /* leeres inline-block hat sonst Höhe 0 → Chip wäre unsichtbar (nur im Editor nötig) */
    vertical-align: middle;
    background: var(--accent-glow);
    border-radius: var(--radius-sm);
    outline: 1px dashed var(--border-accent);
    outline-offset: -1px;
  }

  /* Block-Auswahl-Popover des Inserters (am body, absolut positioniert von js). */
  .page-ins-menu {
    position: absolute;
    z-index: 70;
    display: flex;
    flex-direction: column;
    min-width: 140px;
    padding: var(--sp-1);
    background: var(--bg-surface);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgb(0 0 0 / 60%);
  }

  .page-ins-item {
    padding: var(--sp-2) var(--sp-3);
    color: var(--text-2);
    font-size: var(--fs-sm);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);

    &:hover {
      color: var(--accent);
      background: var(--accent-glow);
    }

    /* aktuell gewählte Option (Einstellungs-Menü callout-Art / Listentyp). */
    &.is-current {
      color: var(--accent);
      font-weight: 600;
    }
  }

  /* Farbpunkt im „Textfarbe"-Untermenü (Auswahl-Kontextmenü, formatMenuItems): zeigt die Mark-Farbe.
     Die Farbe kommt von der mark-*-Klasse am Punkt selbst (eigenes color → currentColor), daher
     hover-stabil gegenüber dem goldenen Item-Hover. „Zurücksetzen" = leerer Ring (.is-none). */
  .page-color-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: var(--sp-2);
    background: currentcolor;
    border-radius: 50%;
    vertical-align: middle;
  }

  .page-color-dot.is-none {
    background: none;
    border: 1px solid var(--text-3);
  }

  /* Copy-Bestätigung im Block-Menü („Link kopieren"): kurzer Gold-Hintergrund auf dem Block (bzw. rot bei
     Clipboard-Fehler). Anchored Inline-Feedback statt Toast (feedback.js „ersetzt Toast"); JS toggelt die
     Klasse ~1,4 s. Steter Hintergrund (kein @keyframes) → auch bei prefers-reduced-motion sichtbar. */
  .page-block-linkflash {
    background: var(--accent-glow);
    border-radius: var(--radius-sm);
  }

  .page-block-linkflash.is-err {
    background: var(--danger-dim);
  }

  /* Hervorheben-Swatch im „Farbe ▸"-Untermenü, Gruppe „Hintergrund" (formatMenuItems). Bewusst QUADRATISCH
     (vs. der runde .page-color-dot der Text-Gruppe) → Schrift- vs. Hintergrund-Färbung auf einen Blick
     unterscheidbar. Farbe kommt wie beim Punkt aus der mark-*-Klasse am Swatch (color → currentColor),
     daher hover-stabil gegenüber dem goldenen Item-Hover. */
  .page-hl-swatch {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: var(--sp-2);
    background: currentcolor;
    border-radius: 3px;
    vertical-align: middle;
  }

  /* Sektions-Toolbar am Abschnitts-Kopf (nur Writer-Mode): umbenennen/löschen. */
  .page-sec-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
  }

  /* Die Sektions-Knöpfe (Griff/Löschen) sind evpw-btn--sm (evpwButton() in chrome-sections.js) — kein
     eigener .page-sec-btn-Look mehr. Hook-Overrides (Griff cursor:grab, Löschen Hover-rot) stehen in
     utilities.css (@layer utilities schlägt @layer evpw). */

  /* Anker-Feld in der Sektions-Leiste (neben dem Titel, weil der Anker zum Titel gehört): #-Präfix +
     Slug-Eingabe (monospace), Optik wie die Sektions-Knöpfe. Editierbar wie ein Seiten-Slug. */
  .page-sec-anchor {
    display: flex;
    flex: none; /* in der wrap-Leiste NICHT schrumpfen (sonst quetscht Chromium das Feld) → notfalls umbrechen */
    align-items: center;
    gap: var(--sp-1);
    /* Gleiche Control-Höhe wie die evpw-btn--sm daneben (Griff/Löschen) → Leiste fluchtet auf einer Höhe. */
    block-size: var(--control-h-sm);
    padding: 0 var(--sp-2);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);

    &:focus-within {
      border-color: var(--border-accent);
    }
  }

  .page-sec-anchor-hash {
    color: var(--text-3);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
  }

  .page-sec-anchor-field {
    width: 14ch;
    block-size: 100%; /* füllt die feste Wrapper-Höhe → volle Klickfläche, Text vertikal zentriert */
    padding: 0;
    color: var(--text-1);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    background: transparent;
    border: none;

    &:focus {
      outline: none;
    }

    &::placeholder {
      color: var(--text-3);
    }
  }

  /* Pflicht-Markierung: beim Speichern fehlt Titel und/oder Anker → Abschnitt rot umrandet (die
     Fehlermeldung am „Speichern"-Knopf nennt den Grund). Anker-Feld zusätzlich rot, da meist die Lücke. */
  .sec-incomplete {
    outline: 2px solid var(--danger);
    outline-offset: var(--sp-2);
    border-radius: var(--radius);
  }

  .sec-incomplete .page-sec-anchor {
    border-color: var(--danger);
  }

  /* prose (Inline-WYSIWYG): Text-Cursor + Editor-Umrandung kommen jetzt aus den generischen Block-Regeln
     (Pointer→Text-Reset oben, Outline bündig an der Modul-Box) — kein prose-eigener Sonderstil mehr. */

  /* Format-Buttons der Auswahl-Kopfzeile im Rechtsklick-Kontextmenü (Fett/Kursiv/Link/Farbe). Name
     historisch „page-bubble-btn" — die frühere schwebende Bubble gibt es nicht mehr (Variante 2). */
  .page-bubble-btn {
    min-width: 30px;
    padding: var(--sp-1) var(--sp-2);
    color: var(--text-2);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);

    &:hover {
      color: var(--accent);
      background: var(--accent-glow);
    }

    &.is-bold {
      font-weight: 700;
    }

    &.is-italic {
      font-style: italic;
    }

    /* „A" = Einfärben: golden, damit der Knopf seine Funktion zeigt (wie Word/Gutenberg). */
    &.is-color {
      color: var(--accent-bright);
      font-weight: 700;
    }

    /* „S" = durchgestrichen (Buchstabenform wie B/I/A). */
    &.is-strike {
      text-decoration: line-through;
    }

    /* Aktiver Zustand in der Format-Kopfzeile des Auswahl-Kontextmenüs: das Format ist auf der Auswahl
       schon gesetzt (Toggle-Anzeige wie Word/Notion/Docs) — golden gefüllt. */
    &.is-fmt-active {
      color: var(--accent-bright);
      background: var(--accent-glow);
    }

    /* Icon-Buttons (Link/Unlink/Code) — SVG aus shared/icons.js. */
    & svg {
      display: block;
      inline-size: 18px;
      block-size: 18px;
    }
  }

  /* ── Persistente Formatier-Leiste (Schule 1) — fix unter dem Header, nur im Editier-Modus (JS toggelt
     das [hidden]-Attribut). Teilt die .page-bubble-btn-Optik. ── */
  .page-toolbar {
    position: fixed;
    inset-block-start: calc(var(--header-h) + var(--sp-2));
    inset-inline-start: 50%;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 5px 7px;
    background: var(--bg-surface);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgb(0 0 0 / 45%);
    transform: translateX(-50%);
  }

  .page-toolbar[hidden] {
    display: none; /* schlägt display:flex (sonst zeigt [hidden] nicht) */
  }

  .page-tb-sep {
    align-self: stretch;
    inline-size: 1px;
    margin: 3px 2px;
    background: var(--border);
  }

  /* ── Inline-Bild-Chrome (editor/inline-image.js): Auswahl-Rahmen + Eck-Griff + Umfluss-Leiste ──
     Overlays auf body-Ebene über dem gewählten .prose-img (Dokument-Koordinaten von js gesetzt).
     Rahmen ist klick-durchlässig (pointer-events:none) — nur der Griff fängt Maus-Drags. */
  .prose-img-frame {
    position: absolute;
    z-index: 70;
    pointer-events: none;
    border: 2px solid var(--accent-bright);
    border-radius: var(--radius);
  }

  .prose-img-handle {
    position: absolute;
    right: -7px;
    bottom: -7px;
    width: 14px;
    height: 14px;
    background: var(--accent-bright);
    border: 2px solid var(--bg-base);
    border-radius: 50%;
    pointer-events: auto;
    cursor: nwse-resize;
  }

  .prose-img-file {
    display: none;
  }

  /* Bild-Aktionen (Ersetzen/Bibliothek/Umfluss/Breite/Löschen) laufen über das Rechtsklick-Kontextmenü
     (context-menu.js, Optik = .page-ins-menu/.block-ctx-*) — keine schwebende Bild-Leiste mehr
     (tasks/bild-kontextmenu.md). Der Eck-Anfasser-Rahmen (.prose-img-frame/-handle) bleibt fürs freie Skalieren. */

  /* Einfüge-Markierung beim Verschieben eines Inline-Bilds (folgt dem Cursor → zeigt die Drop-Stelle). */
  .prose-img-caret {
    position: absolute;
    z-index: 70;
    width: 2px;
    background: var(--accent-bright);
    pointer-events: none;
  }

  /* Während des Verschiebens: Greif-Cursor + keine Text-Auswahl (sauberer Drag). */
  body.prose-img-dragging {
    cursor: grabbing;
    user-select: none;
  }

  /* Querverweis-Picker (am body, absolut positioniert von js): Suchfeld + Trefferliste. */
  .page-linkpicker {
    position: absolute;
    z-index: 70;
    display: flex;
    flex-direction: column;
    width: 280px;
    padding: var(--sp-1);
    background: var(--bg-surface);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgb(0 0 0 / 60%);
  }

  /* Link-Vorschau beim Hover (Editier-Modus): Ziel prüfen ohne Öffnen — Titel (intern) + Pfad/URL.
     Reine Anzeige (pointer-events none), damit sie das Überfahren des Links nicht stört. */
  .page-linkpreview {
    position: absolute;
    z-index: 75;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 360px;
    padding: var(--sp-1) var(--sp-2);
    background: var(--bg-surface);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 24px rgb(0 0 0 / 55%);
    font-size: var(--fs-sm);
    pointer-events: none;
  }

  .page-linkpreview .lp-title {
    color: var(--text-1);
  }

  .page-linkpreview .lp-path {
    color: var(--text-3);
    font-size: var(--fs-xs);
    word-break: break-all;
  }

  .page-linkpicker-input {
    width: 100%;
    padding: var(--sp-1) var(--sp-2);
    color: var(--text-1);
    font-size: var(--fs-sm);
    background: var(--bg-base);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-sm);
  }

  .page-linkpicker-list {
    display: flex;
    flex-direction: column;
    max-height: 240px;
    margin-top: var(--sp-1);
    overflow-y: auto;
  }

  .page-linkpicker-item {
    padding: var(--sp-2);
    overflow: hidden;
    color: var(--text-2);
    font-size: var(--fs-sm);
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);

    &:hover {
      color: var(--accent);
      background: var(--accent-glow);
    }

    &.is-url {
      color: var(--accent);
    }
  }

  /* Hinweis im Fußnoten-Marker-Picker, wenn die Seite noch keine Note (bzw. keinen Fußnoten-Block) hat. */
  .page-fnpicker-empty {
    padding: var(--sp-2);
    color: var(--text-3);
    font-size: var(--fs-sm);
  }

  /* ── Block-Kontextmenü (Rechtsklick) + Oberkanten-Greifzone (block-menu.js) ──────────────
     Ersetzt die frühere schwebende Leiste (block-toolbar-rethink.md): bei Modul-in-Modul (oft 0 px
     Lücke) verdeckte sie den Inhalt. Das Menü ist ein .page-ins-menu (Optik wiederverwendet), die
     Greifzone zieht den Block frei (Kopplung an drag-layout). */
  /* position: fixed → viewport-basiert; ein fixed-Element verlängert das Dokument nie (kein Springen am
     Seitenende). Nur hier scoped, nicht global auf .page-ins-menu — die anker-relativen Inserter-/Slash-/
     Farb-Menüs (chrome-sections.js, inline-inserts.js) bleiben absolut. */
  .block-ctx-menu,
  .block-ctx-sub {
    position: fixed;
  }

  .block-ctx-menu {
    min-width: 200px;
  }

  /* Menü-Eintrag horizontal: (Symbol) + Label links, aktuelle Wahl + ▸ rechts. Untermenü-Einträge
     (Variante 1: Link/Farbe/Einfügen) tragen dieselbe Symbol-Spalte → gleiche Flex-Grundform. */
  .block-ctx-menu .page-ins-item,
  .block-ctx-sub .page-ins-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
  }

  .block-ctx-label {
    flex: 1;
  }

  /* Symbol-Spalte vor dem Label (Auswahl-Menü Variante 1: Fett/Kursiv/Link/Textfarbe/Einfügen + deren
     Untermenüs). Feste Breite → die Labels fluchten; erbt beim Überfahren die goldene Item-Farbe. */
  .block-ctx-ic {
    flex: none;
    width: 24px;
    color: var(--text-3);
    font-size: var(--fs-xs);
    text-align: center;
    white-space: nowrap;

    &.is-bold {
      font-weight: 700;
    }

    &.is-italic {
      font-style: italic;
    }

    /* „A" = Textfarbe: golden (zeigt die Funktion, wie Word/Gutenberg). */
    &.is-color {
      color: var(--accent-bright);
      font-weight: 700;
    }

    & svg {
      display: block;
      inline-size: 16px;
      block-size: 16px;
      margin-inline: auto;
    }

    /* Farb-Punkt (Textfarbe-Untermenü) mittig in der Spalte statt mit inline-Rand. */
    & .page-color-dot {
      margin: 0;
    }
  }

  .block-ctx-menu .page-ins-item:hover .block-ctx-ic,
  .block-ctx-sub .page-ins-item:hover .block-ctx-ic,
  .ins-palette .page-ins-item:hover .block-ctx-ic {
    color: inherit;
  }

  /* Baustein-Inserter-Palette („+"-Menü, chrome-sections.js): Icon-Spalte + Label + „▸" — dieselbe
     Symbol-Optik wie das Kontextmenü (reuse .block-ctx-ic/-label/-arrow); nur die Zeile wird zum Flex. */
  .ins-palette .page-ins-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
  }

  .block-ctx-cur {
    color: var(--accent);
    font-size: var(--fs-xs);
  }

  .block-ctx-arrow {
    color: var(--text-3);
    font-size: var(--fs-xs);
  }

  /* Zentrieren aktiv (Block ist zentriert): golden hervorgehoben. */
  .block-ctx-menu .page-ins-item.is-active {
    color: var(--accent-bright);
    font-weight: 600;
  }

  /* Löschen: rot beim Überfahren (Struktur-Aktion mit Gewicht). */
  .block-ctx-menu .page-ins-item.block-ctx-del:hover {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 14%, transparent);
  }

  /* Modul-Name als Menü-Kopf (nicht klickbar) — benennt, worauf das Menü wirkt (Klarheit bei Verschachtelung). */
  .block-ctx-head {
    padding: var(--sp-1) var(--sp-3) var(--sp-2);
    margin-bottom: var(--sp-1);
    color: var(--text-3);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
  }

  .block-ctx-sep {
    height: 1px;
    margin: var(--sp-1);
    background: var(--border);
  }

  /* Gruppen-Überschrift MITTIG mit Linie links+rechts (Divider) — trennt Gruppen im „Einfügen"-Untermenü
     (Im Text / Baustein), ohne eigene Trennlinien oben/unten (die Linie läuft durch den Titel). */
  .block-ctx-group {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-3);
    color: var(--text-3);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;

    &::before,
    &::after {
      flex: 1;
      height: 1px;
      content: "";
      background: var(--border);
    }
  }

  .block-ctx-note {
    padding: var(--sp-1) var(--sp-3);
    color: var(--text-3);
    font-size: var(--fs-xs);
  }

  /* Greif-Chip oben RECHTS im Block (cursor grab): markanter goldener Chip mit Griff-Glyph (⠿⠿) — sofort
     als „hier ziehen" erkennbar (der frühere dünne Strich war zu unauffällig). BEWUSST oben rechts statt
     volle Breite: ein voller Streifen fing die Klicks ab → man kam nicht an den linksbündigen Text-Anfang.
     Von js bei Hover positioniert (am body, absolut). Sitzt IM Block → trägt auch bei 0 px Verschachtelung
     (Modul-in-Modul). draggable=true startet den Drag sofort (kein Fokus-Klau wie bei einem button). */
  .block-grab {
    position: absolute;
    z-index: 64;
    display: flex;
    align-items: center;
    height: 16px;
    padding-inline: var(--sp-1);
    color: var(--bg-base);
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.1em;
    background: var(--accent);
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 8px rgb(0 0 0 / 40%);
    cursor: grab;
    /* NÖTIG: ohne user-select startet ein mousedown auf dem ⠿⠿-Glyph eine Textauswahl statt den Drag. */
    user-select: none;
    transition: background var(--t-fast);

    &:hover {
      background: var(--accent-bright);
    }

    &:active {
      cursor: grabbing;
    }
  }

  /* Live-Drop-Linie beim Block-Ziehen: zeigt das Einfüge-Ziel (Position/Maße setzt js inline). */
  .page-drop-line {
    position: absolute;
    z-index: 66;
    background: var(--accent);
    border-radius: var(--radius-sm);
    box-shadow: 0 0 8px var(--accent-glow);
    pointer-events: none;
  }

  /* „Blockiert"-Variante: Drop an einer Spalten-Grenze, an der KEINE neue Spalte mehr entstehen kann
     (Maximum erreicht) — rot statt Gold, signalisiert „hier ginge eine Spalte, aber voll". */
  .page-drop-line.is-blocked {
    background: var(--danger);
    box-shadow: 0 0 8px var(--danger-dim);
  }

  /* Limit-Meldung „Maximal N Spalten" (am body positioniert, über dem vollen Container; drag-layout.js
     showCapMsg). Eigenes Element statt Inline-Meldung in der Sektion, damit ein nachlaufender reload-freier
     Re-Render sie nicht wegwischt. */
  .page-cap-msg {
    position: absolute;
    z-index: 67;
    padding: var(--sp-1) var(--sp-3);
    color: var(--bg-base);
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
    background: var(--danger);
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 10px rgb(0 0 0 / 35%);
    pointer-events: none;
  }

  /* Löschen-Knopf im Block-Modal (links; zweistufig „armed"). */
  .page-modal-del {
    margin-right: auto;

    &.is-armed {
      color: var(--bg-base);
      background: var(--danger);
      border-color: var(--danger);
    }
  }

  /* Block-Editor-Modal: deutlich breiter als die Standard-Karte (420px) bzw. die schmale
     Backup-Codes-Karte (--wide, 32rem) — der Tabellen-Editor braucht Platz für mehrere Spalten
     nebeneinander. min(960px, 92vw): breit am Desktop, aber nie über den Viewport hinaus. */
  .page-block-modal {
    max-width: min(960px, 92vw);
  }

  /* Editier-Formular (im generischen .modal-card). */
  .page-wf-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    max-height: 60vh;
    margin-bottom: var(--sp-4);
    overflow-y: auto;
  }

  .page-wf-group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
  }

  .page-wf-label {
    font-size: var(--fs-sm);
    color: var(--text-2);
  }

  .page-wf-lang {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
  }

  .page-wf-badge {
    flex-shrink: 0;
    min-width: 2.4rem;
    padding: 2px var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text-3);
    text-align: center;
  }

  .page-wf-textarea,
  .page-wf-input {
    flex: 1;
    min-width: 0;
    padding: var(--sp-2) var(--sp-3);
    color: var(--text-1);
    font: inherit;
    font-size: var(--fs-sm);
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  .page-wf-textarea {
    resize: vertical;
  }

  /* Checkbox-Label (z. B. „Nummerierte Liste" im Listen-Editor). */
  .page-wf-check {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text-1);
  }

  /* Ebenen-Knöpfe im Listen-Editor (Einrücken/Ausrücken je Punkt). */
  .page-wf-lvlbtns {
    display: flex;
    gap: var(--sp-1);
  }

  .page-wf-lvlbtn {
    padding: 0 var(--sp-2);
    color: var(--text-2);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast);

    &:hover {
      color: var(--accent);
      border-color: var(--border-accent);
    }
  }

  /* Wiederholbare Eintrags-Liste im Modal (geteilt: Listen-Punkte, Akkordeon-Einträge, Tabellen-Zeilen) —
     Karte je Eintrag mit Kopf (Label/Knöpfe + Entfernen-Knopf), darunter die DE/EN-Felder. */
  .page-wf-rows {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }

  .page-wf-item {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  .page-wf-itemhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
  }

  /* ── Inline-Tabellen-Editor (Writer-Mode): Zellen direkt editierbar + Steuer-Zeile/-Spalte ──
     Die gerenderte .data-table wird editiert (js/guide/inline-table.js). Steuer-Zellen (Ecke,
     Spalte/Zeile löschen, +Spalte) sind KEINE Datenzellen → kein Daten-Look (keine Trennlinie,
     kein Kopf-Hintergrund), schmal und ruhig; bei Hover erscheint die jeweilige Aktion. */

  .data-table.is-editing .page-i18n:focus {
    outline: 2px solid var(--accent-bright);
    outline-offset: -2px;
  }

  /* Linke Steuer-Spalte (Ecke oben · Zeilen-× je Zeile): feste, schmale Breite. NICHT 1 % — bei
     table-layout:fixed würde die Spalte dann nur wenige Pixel breit und das × wäre abgeschnitten
     (genau dieser Bug). 2rem reichen fürs ×. Nur die erste Zeile (it-corner) setzt die Spaltenbreite. */
  .it-corner,
  .it-rowctrl {
    width: 2rem;
    padding: 0 var(--sp-1);
    background: none;
    border: 0;
    text-align: center;
    white-space: nowrap;
  }

  /* Spalten-Steuerzelle (× über jeder Datenspalte): trägt im Edit-Modus die %-Breite (style.width
     via JS) → teilt die Datenbreite (fixed layout). position:relative für den Zieh-Griff. */
  .it-colctrl {
    position: relative;
    padding: 0 var(--sp-1);
    background: none;
    border: 0;
    text-align: center;
  }

  /* Zieh-Griff am rechten Rand einer Spalte: schmale Greifzone, bei Hover/Resize sichtbare Linie. */
  .it-colsize {
    position: absolute;
    top: 0;
    right: calc(var(--sp-1) * -1);
    z-index: 1;
    width: 9px;
    height: 100%;
    cursor: col-resize;

    &::after {
      content: "";
      position: absolute;
      top: 20%;
      left: 4px;
      width: 2px;
      height: 60%;
      background: var(--border);
      transition: background var(--t-fast);
    }

    &:hover::after {
      background: var(--accent-bright);
    }
  }

  /* Während des Ziehens: globaler col-resize-Cursor + kein Text-Markieren. */
  body.it-resizing {
    cursor: col-resize;
    user-select: none;
  }

  .data-table.is-editing .it-ctrlrow th {
    border-bottom: 0;
  }

  .it-ctrlbtn {
    padding: 0 var(--sp-2);
    color: var(--text-3);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast);

    &.it-del:hover {
      color: var(--danger);
      border-color: var(--danger);
    }

    /* ★-Umschalter „Empfohlene Spalte" (Vergleichstabelle): aktiv = Akzent. */
    &.it-rec:hover {
      color: var(--accent-bright);
    }

    &.it-rec.is-active {
      color: var(--accent-bright);
      border-color: var(--border-accent);
    }
  }

  /* Segment-Umschalter (Kopf-/Linien-Modus): Beschriftung + verbundene Schaltflächen, die AKTIVE
     hervorgehoben. Direkte Wahl statt unsichtbarem Durchschalten → sofort ersichtlich, was wählbar ist. */
  .it-seg {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
  }

  .it-seg-label {
    color: var(--text-3);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .it-seg-btn {
    padding: var(--sp-1) var(--sp-3);
    color: var(--text-2);
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-left-width: 0;
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: color var(--t-fast), background var(--t-fast);

    &:first-of-type {
      border-left-width: 1px;
      border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    }

    &:last-of-type {
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    }

    &:hover {
      color: var(--text-1);
      background: var(--bg-hover);
    }

    &[aria-pressed="true"] {
      color: #000;
      background: var(--accent);
      border-color: var(--accent);
    }
  }

  /* ── Akkordeon-Editor (Phase 4.3 Container, js/editor/blocks/accordion.js + chrome-sections) ──────────
     Das Markup bleibt IMMER natives <details>/<summary> (Klappfunktion erhalten, auch im Editor-Render).
     Im Writer-Mode (.acc.is-editing) wird die Frage editierbar; der Klapp-Pfeil (summary.acc-q::before)
     bleibt sichtbar/nutzbar. × oben rechts je Eintrag, „+ Eintrag" unter dem letzten. */
  .acc.is-editing .acc-item {
    position: relative; /* Anker fürs absolute × */
  }

  /* Frage editierbar: Text-Cursor + rechts Platz fürs ×. Summary-Padding (base) bleibt — die Frage ist
     weiter der klickbare Klapp-Kopf. */
  .acc.is-editing .acc-q {
    padding-right: var(--sp-7);
  }

  .acc.is-editing .acc-q:focus {
    outline: 2px solid var(--accent-bright);
    outline-offset: -2px;
  }

  /* Platzhalter der leeren Frage: das ::before ist schon der Klapp-Pfeil → den Platzhalter per ::after. */
  .acc.is-editing .acc-q:empty::after {
    content: attr(data-placeholder);
    color: var(--text-3);
    pointer-events: none;
  }

  /* „×" Eintrag entfernen (oben rechts je Eintrag) + „+ Eintrag" unter dem letzten Eintrag
     (chrome-sections → decorateAccordionItems → slot-Endpoints). */
  .acc-del {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
    z-index: 1; /* über der Summary-Klickfläche → × trifft, nicht den Toggle */
    padding: 0 var(--sp-2);
    color: var(--text-muted);
    font-size: var(--fs-base);
    line-height: 1;
    background: none;
    border: 0;
    cursor: pointer;

    &:hover {
      color: var(--danger);
    }
  }

  .acc-add {
    margin-top: var(--sp-2);
    padding: var(--sp-1) var(--sp-3);
    color: var(--accent);
    font-size: var(--fs-sm);
    line-height: 1;
    background: var(--accent-glow);
    border: 1px dashed var(--border-accent);
    border-radius: var(--radius-sm);
    cursor: pointer;

    &:hover {
      color: var(--bg-base);
      background: var(--accent);
    }
  }

  /* ── Inline-Hub-Karten-Editor (js/editor/blocks/card.js): in-place editierbare card-Blöcke ──
     Die Felder bleiben das Server-Markup; Steuer-Affordances (Ziel/Meta/Unterlink/Tag-Farbe) sind
     contentEditable=false. Stretch-Link im Edit neutralisiert (sonst Innenfelder nicht klickbar). */
  .hub-card.is-editing .hub-card-link::after {
    content: none;
  }

  /* Die Modul-Fußleiste trägt `flex-basis:100%` (volle BREITE bei Flex-ZEILEN-Eltern wie der Legende). Die
     Karte ist aber eine Flex-SPALTE → dort wäre 100% die volle HÖHE: die Leiste risse die halbe Kartenhöhe an
     sich, die Felder (u. a. card-body) würden unter ihre Inhaltshöhe gequetscht → Text quillt über, der Fuß-Tag
     rutscht dahinter. In der Karte darum natürliche Höhe (volle Breite kommt ohnehin aus align-items:stretch). */
  .card .block-tools {
    flex-basis: auto;
  }

  /* Platzhalter in leeren Edit-Feldern. */
  .hub-card.is-editing [data-ph]:empty::before {
    content: attr(data-ph);
    color: var(--text-3);
    pointer-events: none;
  }

  /* Leere editierbare Felder klickbar halten + Text-Cursor. */
  .hub-card.is-editing .card-title,
  .hub-card.is-editing .card-body,
  .hub-card.is-editing .card-meta-line,
  .hub-card.is-editing .hub-sublink,
  .hub-card.is-editing .card-tag {
    min-width: 2rem;
  }

  .hub-card.is-editing [contenteditable]:focus {
    outline: 2px solid var(--accent-bright);
    outline-offset: 2px;
  }

  /* Read-through (tasks/seite-als-quelle-karte-liest.md): Titel + Untertitel gehören der verknüpften Seite und
     sind im Karten-Editor read-only (Anzeige aus der Seite) — sichtbar als „nicht hier editierbar" abheben. */
  .hub-card.is-editing[data-card-readthrough] .card-title,
  .hub-card.is-editing[data-card-readthrough] .card-body {
    cursor: default;
    opacity: 0.7;
  }

  /* Hinweis unter dem Kopf, warum Titel/Untertitel grau sind (setupCard fügt ihn ein). */
  .card-readthrough-note {
    margin-top: var(--sp-1);
    color: var(--text-3);
    font-size: var(--fs-sm);
  }

  /* Meta-/Unterlink-Zeile im Edit: Inhalt + Steuer in einer Reihe. */
  .card-meta-edit,
  .hub-sublink-edit {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
  }

  /* Lösch-Knopf (×). */
  .card-ctrl-del {
    padding: 0 var(--sp-1);
    color: var(--text-3);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color var(--t-fast);

    &:hover {
      color: var(--danger);
    }
  }

  /* Neutrales Slug-Feld (Karten-/Unterlink-Ziel). */
  .card-slug-input {
    min-width: 8rem;
    padding: var(--sp-1) var(--sp-2);
    color: var(--text-1);
    font-size: var(--fs-sm);
    background: var(--bg-base);
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-sm);
  }

  .card-et-target {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
  }

  .card-et-label {
    color: var(--text-2);
    font-size: var(--fs-sm);
  }

  /* Karten-Art-Wahl (Verlinkte Kachel / Inhalts-Karte) — 2-Segment-Toggle wie cta-variants. */
  .card-variants {
    display: inline-flex;
    gap: var(--sp-1);
  }

  .card-variant {
    padding: var(--sp-1) var(--sp-2);
    color: var(--text-3);
    font-size: var(--fs-xs);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast);

    &.is-active {
      color: var(--text-1);
      border-color: var(--border-accent);
    }
  }

  /* Inhalts-Karte hat kein Ziel/keine Unterlinks → diese Werkzeuge ausblenden (Fußleiste = .block-tools). */
  .block-tools.is-content .card-et-target,
  .block-tools.is-content .card-tool-link {
    display: none;
  }

  /* Tag-Farb-Swatches (★ in der jeweiligen Signalfarbe; aktiv/hover voll deckend). */
  .card-tag-swatches {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
  }

  .card-swatch {
    padding: 0 var(--sp-1);
    font-size: var(--fs-sm);
    cursor: pointer;
    opacity: 0.5;
    transition: opacity var(--t-fast);

    &.is-active,
    &:hover {
      opacity: 1;
    }
  }

  .card-swatch-none {
    padding: 0 var(--sp-1);
    color: var(--text-3);
    font-size: var(--fs-sm);
    background: transparent;
    border: 0;
    cursor: pointer;

    &.is-active {
      color: var(--text-1);
    }
  }

  .page-wf-rmitem {
    padding: 0 var(--sp-2);
    color: var(--text-3);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color var(--t-fast);

    &:hover {
      color: var(--danger);
    }
  }

  .page-wf-additem {
    align-self: start;
  }

  /* ── Inline-Gegenüberstellung-Editor (js/guide/inline-compare.js): editierbare Karten ──
     Titel + drei Zeilenlisten (Meta/Vorteile/Nachteile) direkt editierbar; je Zeile/Karte ×. */
  .cmp-edit-head {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
  }

  .compare-card.is-editing .compare-title {
    flex: 1;
  }

  .cmp-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
  }

  .cmp-list-label {
    font-size: var(--fs-xs);
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .cmp-line-row {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
  }

  .cmp-line {
    flex: 1;
  }

  .compare-card.is-editing .it-tool-addline {
    align-self: start;
  }

  .compare-card.is-editing [contenteditable]:focus {
    outline: 2px solid var(--accent-bright);
    outline-offset: 2px;
  }

  .compare-card.is-editing [contenteditable]:empty::before {
    content: attr(data-placeholder);
    color: var(--text-3);
    pointer-events: none;
  }

  .page-wf-error {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--danger);

    &[hidden] {
      display: none;
    }
  }

  /* ── Benutzerverwaltung: Status-Badges, Aktions-Buttons (Rollen-Farben global in components-base.css) ── */
  .badge-status {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--sp-2);
    font-size: var(--fs-xs);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  .badge-status.active {
    color: var(--c-green);
    border-color: color-mix(in srgb, var(--c-green) 35%, transparent);
  }

  .badge-status.banned {
    color: var(--c-red);
    border-color: color-mix(in srgb, var(--c-red) 35%, transparent);
  }

  .badge-status.timelocked {
    color: var(--accent);
    border-color: var(--border-accent);
  }

  .td-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    align-items: center;
  }

  .usr-roles-key {
    margin-top: var(--sp-3);
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--text-2);
  }

  /* Kopfzeile 50/50: links Titel + Beschreibung + Farb-Legende, rechts Rollen-Tabs + Info-Panel. */
  .usr-head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4) var(--sp-6);
    margin-bottom: var(--sp-4);
  }

  .usr-head-left {
    flex: 1 1 260px;
  }

  .usr-head-right {
    flex: 1 1 260px;
    min-width: 0;
  }

  /* Aktions-Legende der eigenen Rolle: 3 Spalten (Icon + Kurztext). */
  .usr-legend-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-2) var(--sp-3);
  }

  .usr-legend-item {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    font-size: var(--fs-xs);
    color: var(--text-2);
  }

}