/* ─────────────────────────────────────────────────────────────────────────
   Designer-Design-Tokens — Bold Modern SaaS (Design-Doc
   docs/superpowers/specs/2026-07-27-bold-modern-saas-design-rollout.md).
   Löst das Teil-41-System ab (dessen eigene Notiz zu Mockup-bedingten
   Farbfamilien-Sprüngen bei draft/closed ist damit hinfällig): EIN voll
   gesättigter Ultramarin-Akzent (#2C3EF0 hell / #8591FF dunkel) trägt
   ausschließlich Aktion (aktive Navigation, Primär-Buttons, Links) — alle
   anderen Rollen bleiben monochrom/kühl-neutral oder rein semantisch
   (Erfolg/Warnung/Fehler), nie ein zweiter Akzent. Referenz mit vollständigen
   Token-Werten: docs/graphics/lapis/2026-07-26-design-richtungen/bold.html.
   Unterhalb des Sentinel-Kommentars darf keine Farbliteral mehr stehen
   (Regressionstest test_designer_css_has_no_literal_colors_below_token_block).

   Vier Blöcke, bewusst redundant (unverändertes Muster seit Teil 41):
     :root                              → Hell-Defaults (heutige Werte)
     @media (prefers-color-scheme:dark) → automatisch, wenn kein Toggle greift
     :root[data-theme="dark"]           → manuelle Wahl "Dunkel"
     :root[data-theme="light"]          → manuelle Wahl "Hell"
   Die [data-theme]-Blöcke gewinnen unabhängig von der Reihenfolge, weil
   :root[data-theme=…] (0,2,0) spezifischer ist als :root (0,1,0).
   Token-NAMEN bleiben identisch zu vorher (Entscheidung #7 des Design-Docs,
   minimaler Diff an den ~200 Verwendungsstellen) — nur Werte ändern sich,
   plus ein neuer 60. Token (--designer-shadow, Karten-Schatten, prägendes
   Bold-Merkmal, per Nutzer-Entscheidung ergänzt). --designer-accent* trägt
   jetzt "neutrale Betonung" statt Violett — der Markenakzent lebt allein in
   --designer-primary/-link/-focus, siehe Kommentar an der Accent-Gruppe unten.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  --designer-bg: #fafbfe;
  --designer-surface: #ffffff;
  --designer-surface-alt: #f2f4fa;
  --designer-surface-alt-2: #f7f8fc;
  --designer-surface-sunken: #eaedf7;
  --designer-hairline: #e4e7f2;
  --designer-hairline-soft: #eef0f7;
  --designer-border-input: #cdd2e4;

  --designer-ink: #0b0f1e;
  --designer-ink-strong: #070a12;
  --designer-ink-soft: #40465c;
  --designer-label: #5f6680;
  --designer-muted: #6e7590;
  --designer-muted-light: #868da6;

  --designer-link: #2a63f0;
  --designer-primary: #2a63f0;
  --designer-primary-border: #1f4fcb;
  --designer-on-primary: #ffffff;
  --designer-btn-bg: #eef0f7;
  --designer-btn-hover-brightness: .96;
  --designer-focus: #2a63f0;

  --designer-info-bg: #f2f4fa;
  --designer-info-bg-strong: #e8ebf5;
  --designer-info-border: #dce0ee;
  --designer-info-border-strong: #9aa1b8;
  --designer-info-ink: #40465c;

  --designer-success: #1a9b6c;
  --designer-success-bg: #e4f4ed;
  --designer-success-ink: #137256;
  --designer-success-bg-soft: #f0f9f5;
  --designer-success-border: #a8dcc7;

  --designer-danger-ink: #b32439;
  --designer-danger-bg: #fbe6e9;
  --designer-danger-bg-soft: #fdf3f4;
  --designer-danger-border: #f0b3bc;
  --designer-danger-strong: #d63a4e;
  --designer-danger-bar: #e8697a;

  --designer-warn: #c07f12;
  --designer-warn-accent: #dda23a;
  --designer-warn-bg: #fbf1dc;
  --designer-warn-bg-soft: #fdf8ee;
  --designer-warn-bg-hover: #f6e6c3;
  --designer-warn-border: #e6cd94;
  --designer-warn-border-strong: #a86c0c;
  --designer-warn-ink: #8a5a0b;
  --designer-warn-ink-strong: #6f4808;

  /* Neutrale Betonung (nicht der Marken-Akzent — der lebt allein in
     --designer-primary/-link/-focus). Name unverändert (Entscheidung #7),
     Bedeutung von Violett auf neutral-hervorgehoben umgestellt. */
  --designer-accent: #5f6680;
  --designer-accent-bg: #e8ebf5;
  --designer-accent-ink: #3c4360;

  --designer-type-bg: #f2f4fa;
  --designer-type-ink: #5f6680;

  --designer-status-draft-bg: #f2f4fa;
  --designer-status-draft-ink: #5f6680;
  --designer-status-active-bg: #e4f4ed;
  --designer-status-active-ink: #137256;
  --designer-status-closed-bg: #e2e6f1;
  --designer-status-closed-ink: #40465c;
  --designer-status-archived-bg: #fbf1dc;
  --designer-status-archived-ink: #8a5a0b;
  /* "exportiert": neutraler Zustandshinweis, Info-Familie — bewusst KEIN
     zweiter Akzent (Bold-Prinzip, Design-Doc 2026-07-27-projekte-bereich-
     design.md, Entscheidung #7). Werte = --designer-info-bg-strong/-ink. */
  --designer-status-exported-bg: #e8ebf5;
  --designer-status-exported-ink: #40465c;
  /* Teilnehmerverwaltung-UI-Redesign (docs/superpowers/specs/2026-08-08-
     amber-teilnehmerverwaltung-ui-redesign-design.md, Abschnitt 5) —
     Participant.disposition_code-Statusgruppen, bewusst ohne "designer-"-
     Präfix (Namensmuster aus dem ursprünglichen Klick-Mockup übernommen)
     und getrennt von --designer-status-* oben (Survey-Status, nicht
     Teilnehmer-Status). ERSTELLT/BEARBEITUNG/ABGESCHLOSSEN/VERWEIGERT/
     NICHT_ERREICHT nutzen bereits vorhandene Semantik-Tokens (--designer-
     accent/-warn/-success/-danger/-status-draft), siehe STATUS_GROUP_META
     in app/services/participant_status.py. */
  --status-created-bg: var(--designer-accent-bg);
  --status-created-ink: var(--designer-accent-ink);
  --status-invited-bg: #e3ecfd;
  --status-invited-ink: #1d55c8;
  --status-partial-bg: #e0f5f2;
  --status-partial-ink: #0f766e;
  --status-undeliverable-bg: #fde8d8;
  --status-undeliverable-ink: #b5480a;
  --status-ineligible-bg: #f0e7fb;
  --status-ineligible-ink: #6b3fa8;
  /* Fragetyp-Familien (--designer-fam-*-ink, Kachel-Picker-Randfarbe im
     aktiven Zustand) — bewusste, eng begrenzte Ausnahme vom Ein-Akzent-
     Prinzip oben (Nutzer-Entscheidung 2026-08-02): NUR Rahmen-/Icon-Ton,
     kein flächiger zweiter Akzent-Hintergrund. Dieselben fünf Farben wie
     --fragen-fam-*-ink in fragen.css (Typ-Badge in der Fragenliste). */
  --designer-fam-skala-ink: #2650b8;
  --designer-fam-auswahl-ink: #147a52;
  --designer-fam-raster-ink: #6b3fa8;
  --designer-fam-reihenfolge-ink: #9a5a0f;
  --designer-fam-eingabe-ink: #0f7d73;

  --designer-shadow: 0 1px 2px rgba(11, 15, 30, .05), 0 8px 24px rgba(11, 15, 30, .05);
  --designer-backdrop: rgba(11, 15, 30, .45);
}

@media (prefers-color-scheme: dark) {
  :root {
    --designer-bg: #0b0d15;
    --designer-surface: #131624;
    --designer-surface-alt: #1a1e30;
    --designer-surface-alt-2: #171a2a;
    --designer-surface-sunken: #0f1220;
    --designer-hairline: #232839;
    --designer-hairline-soft: #1c2131;
    --designer-border-input: #333a52;

    --designer-ink: #f2f4fb;
    --designer-ink-strong: #fafbff;
    --designer-ink-soft: #b9bfd4;
    --designer-label: #a8afc6;
    --designer-muted: #7d84a0;
    --designer-muted-light: #6d7490;

    --designer-link: #85a8ff;
    --designer-primary: #85a8ff;
    --designer-primary-border: #6f93f5;
    --designer-on-primary: #0b0d15;
    --designer-btn-bg: #232839;
    --designer-btn-hover-brightness: 1.14;
    --designer-focus: #85a8ff;

    --designer-info-bg: #1a1e30;
    --designer-info-bg-strong: #242a3e;
    --designer-info-border: #2e344a;
    --designer-info-border-strong: #5a6280;
    --designer-info-ink: #b9bfd4;

    --designer-success: #3fd39a;
    --designer-success-bg: #10322a;
    --designer-success-ink: #3fd39a;
    --designer-success-bg-soft: #0d251f;
    --designer-success-border: #1e5a45;

    --designer-danger-ink: #ff7285;
    --designer-danger-bg: #3a1a22;
    --designer-danger-bg-soft: #2b1319;
    --designer-danger-border: #6e2d38;
    --designer-danger-strong: #ff7285;
    --designer-danger-bar: #c9536a;

    --designer-warn: #e8b04b;
    --designer-warn-accent: #a97d2e;
    --designer-warn-bg: #3a2c14;
    --designer-warn-bg-soft: #2c2110;
    --designer-warn-bg-hover: #4a3a1c;
    --designer-warn-border: #6d5622;
    --designer-warn-border-strong: #d3a044;
    --designer-warn-ink: #e8b04b;
    --designer-warn-ink-strong: #f0c470;

    --designer-accent: #a8afc6;
    --designer-accent-bg: #242a3e;
    --designer-accent-ink: #c8cee0;

    --designer-type-bg: #1a1e30;
    --designer-type-ink: #9ba2bb;

    --designer-status-draft-bg: #1a1e30;
    --designer-status-draft-ink: #9ba2bb;
    --designer-status-active-bg: #10322a;
    --designer-status-active-ink: #3fd39a;
    --designer-status-closed-bg: #252b3f;
    --designer-status-closed-ink: #b9bfd4;
    --designer-status-archived-bg: #3a2c14;
    --designer-status-archived-ink: #e8b04b;
    --designer-status-exported-bg: #242a3e;
    --designer-status-exported-ink: #b9bfd4;
    --status-created-bg: var(--designer-accent-bg);
    --status-created-ink: var(--designer-accent-ink);
    --status-invited-bg: #1a2a4a;
    --status-invited-ink: #85a8ff;
    --status-partial-bg: #0f2e2a;
    --status-partial-ink: #6fd4c8;
    --status-undeliverable-bg: #3a2416;
    --status-undeliverable-ink: #e8a06a;
    --status-ineligible-bg: #2a1f3e;
    --status-ineligible-ink: #c6a8f5;
    /* Fragetyp-Familien (--designer-fam-*-ink, Kachel-Picker-Randfarbe im
       aktiven Zustand) — bewusste, eng begrenzte Ausnahme vom Ein-Akzent-
       Prinzip oben (Nutzer-Entscheidung 2026-08-02): NUR Rahmen-/Icon-Ton,
       kein flächiger zweiter Akzent-Hintergrund. Dieselben fünf Farben wie
       --fragen-fam-*-ink in fragen.css (Typ-Badge in der Fragenliste). */
    --designer-fam-skala-ink: #9db4f5;
    --designer-fam-auswahl-ink: #6fd7a3;
    --designer-fam-raster-ink: #c6a8f5;
    --designer-fam-reihenfolge-ink: #e8b46a;
    --designer-fam-eingabe-ink: #6fd4c8;

    --designer-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    --designer-backdrop: rgba(0, 0, 0, .55);
  }
}

:root[data-theme="dark"] {
  --designer-bg: #0b0d15;
  --designer-surface: #131624;
  --designer-surface-alt: #1a1e30;
  --designer-surface-alt-2: #171a2a;
  --designer-surface-sunken: #0f1220;
  --designer-hairline: #232839;
  --designer-hairline-soft: #1c2131;
  --designer-border-input: #333a52;

  --designer-ink: #f2f4fb;
  --designer-ink-strong: #fafbff;
  --designer-ink-soft: #b9bfd4;
  --designer-label: #a8afc6;
  --designer-muted: #7d84a0;
  --designer-muted-light: #6d7490;

  --designer-link: #85a8ff;
  --designer-primary: #85a8ff;
  --designer-primary-border: #6f93f5;
  --designer-on-primary: #0b0d15;
  --designer-btn-bg: #232839;
  --designer-btn-hover-brightness: 1.14;
  --designer-focus: #85a8ff;

  --designer-info-bg: #1a1e30;
  --designer-info-bg-strong: #242a3e;
  --designer-info-border: #2e344a;
  --designer-info-border-strong: #5a6280;
  --designer-info-ink: #b9bfd4;

  --designer-success: #3fd39a;
  --designer-success-bg: #10322a;
  --designer-success-ink: #3fd39a;
  --designer-success-bg-soft: #0d251f;
  --designer-success-border: #1e5a45;

  --designer-danger-ink: #ff7285;
  --designer-danger-bg: #3a1a22;
  --designer-danger-bg-soft: #2b1319;
  --designer-danger-border: #6e2d38;
  --designer-danger-strong: #ff7285;
  --designer-danger-bar: #c9536a;

  --designer-warn: #e8b04b;
  --designer-warn-accent: #a97d2e;
  --designer-warn-bg: #3a2c14;
  --designer-warn-bg-soft: #2c2110;
  --designer-warn-bg-hover: #4a3a1c;
  --designer-warn-border: #6d5622;
  --designer-warn-border-strong: #d3a044;
  --designer-warn-ink: #e8b04b;
  --designer-warn-ink-strong: #f0c470;

  --designer-accent: #a8afc6;
  --designer-accent-bg: #242a3e;
  --designer-accent-ink: #c8cee0;

  --designer-type-bg: #1a1e30;
  --designer-type-ink: #9ba2bb;

  --designer-status-draft-bg: #1a1e30;
  --designer-status-draft-ink: #9ba2bb;
  --designer-status-active-bg: #10322a;
  --designer-status-active-ink: #3fd39a;
  --designer-status-closed-bg: #252b3f;
  --designer-status-closed-ink: #b9bfd4;
  --designer-status-archived-bg: #3a2c14;
  --designer-status-archived-ink: #e8b04b;
  --designer-status-exported-bg: #242a3e;
  --designer-status-exported-ink: #b9bfd4;
  --status-created-bg: var(--designer-accent-bg);
  --status-created-ink: var(--designer-accent-ink);
  --status-invited-bg: #1a2a4a;
  --status-invited-ink: #85a8ff;
  --status-partial-bg: #0f2e2a;
  --status-partial-ink: #6fd4c8;
  --status-undeliverable-bg: #3a2416;
  --status-undeliverable-ink: #e8a06a;
  --status-ineligible-bg: #2a1f3e;
  --status-ineligible-ink: #c6a8f5;
  /* Fragetyp-Familien (--designer-fam-*-ink, Kachel-Picker-Randfarbe im
     aktiven Zustand) — bewusste, eng begrenzte Ausnahme vom Ein-Akzent-
     Prinzip oben (Nutzer-Entscheidung 2026-08-02): NUR Rahmen-/Icon-Ton,
     kein flächiger zweiter Akzent-Hintergrund. Dieselben fünf Farben wie
     --fragen-fam-*-ink in fragen.css (Typ-Badge in der Fragenliste). */
  --designer-fam-skala-ink: #9db4f5;
  --designer-fam-auswahl-ink: #6fd7a3;
  --designer-fam-raster-ink: #c6a8f5;
  --designer-fam-reihenfolge-ink: #e8b46a;
  --designer-fam-eingabe-ink: #6fd4c8;

  --designer-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  --designer-backdrop: rgba(0, 0, 0, .55);
}

:root[data-theme="light"] {
  --designer-bg: #fafbfe;
  --designer-surface: #ffffff;
  --designer-surface-alt: #f2f4fa;
  --designer-surface-alt-2: #f7f8fc;
  --designer-surface-sunken: #eaedf7;
  --designer-hairline: #e4e7f2;
  --designer-hairline-soft: #eef0f7;
  --designer-border-input: #cdd2e4;

  --designer-ink: #0b0f1e;
  --designer-ink-strong: #070a12;
  --designer-ink-soft: #40465c;
  --designer-label: #5f6680;
  --designer-muted: #6e7590;
  --designer-muted-light: #868da6;

  --designer-link: #2a63f0;
  --designer-primary: #2a63f0;
  --designer-primary-border: #1f4fcb;
  --designer-on-primary: #ffffff;
  --designer-btn-bg: #eef0f7;
  --designer-btn-hover-brightness: .96;
  --designer-focus: #2a63f0;

  --designer-info-bg: #f2f4fa;
  --designer-info-bg-strong: #e8ebf5;
  --designer-info-border: #dce0ee;
  --designer-info-border-strong: #9aa1b8;
  --designer-info-ink: #40465c;

  --designer-success: #1a9b6c;
  --designer-success-bg: #e4f4ed;
  --designer-success-ink: #137256;
  --designer-success-bg-soft: #f0f9f5;
  --designer-success-border: #a8dcc7;

  --designer-danger-ink: #b32439;
  --designer-danger-bg: #fbe6e9;
  --designer-danger-bg-soft: #fdf3f4;
  --designer-danger-border: #f0b3bc;
  --designer-danger-strong: #d63a4e;
  --designer-danger-bar: #e8697a;

  --designer-warn: #c07f12;
  --designer-warn-accent: #dda23a;
  --designer-warn-bg: #fbf1dc;
  --designer-warn-bg-soft: #fdf8ee;
  --designer-warn-bg-hover: #f6e6c3;
  --designer-warn-border: #e6cd94;
  --designer-warn-border-strong: #a86c0c;
  --designer-warn-ink: #8a5a0b;
  --designer-warn-ink-strong: #6f4808;

  --designer-accent: #5f6680;
  --designer-accent-bg: #e8ebf5;
  --designer-accent-ink: #3c4360;

  --designer-type-bg: #f2f4fa;
  --designer-type-ink: #5f6680;

  --designer-status-draft-bg: #f2f4fa;
  --designer-status-draft-ink: #5f6680;
  --designer-status-active-bg: #e4f4ed;
  --designer-status-active-ink: #137256;
  --designer-status-closed-bg: #e2e6f1;
  --designer-status-closed-ink: #40465c;
  --designer-status-archived-bg: #fbf1dc;
  --designer-status-archived-ink: #8a5a0b;
  /* "exportiert": neutraler Zustandshinweis, Info-Familie — bewusst KEIN
     zweiter Akzent (Bold-Prinzip, Design-Doc 2026-07-27-projekte-bereich-
     design.md, Entscheidung #7). Werte = --designer-info-bg-strong/-ink. */
  --designer-status-exported-bg: #e8ebf5;
  --designer-status-exported-ink: #40465c;
  /* Teilnehmerverwaltung-UI-Redesign (docs/superpowers/specs/2026-08-08-
     amber-teilnehmerverwaltung-ui-redesign-design.md, Abschnitt 5) —
     Participant.disposition_code-Statusgruppen, bewusst ohne "designer-"-
     Präfix (Namensmuster aus dem ursprünglichen Klick-Mockup übernommen)
     und getrennt von --designer-status-* oben (Survey-Status, nicht
     Teilnehmer-Status). ERSTELLT/BEARBEITUNG/ABGESCHLOSSEN/VERWEIGERT/
     NICHT_ERREICHT nutzen bereits vorhandene Semantik-Tokens (--designer-
     accent/-warn/-success/-danger/-status-draft), siehe STATUS_GROUP_META
     in app/services/participant_status.py. */
  --status-created-bg: var(--designer-accent-bg);
  --status-created-ink: var(--designer-accent-ink);
  --status-invited-bg: #e3ecfd;
  --status-invited-ink: #1d55c8;
  --status-partial-bg: #e0f5f2;
  --status-partial-ink: #0f766e;
  --status-undeliverable-bg: #fde8d8;
  --status-undeliverable-ink: #b5480a;
  --status-ineligible-bg: #f0e7fb;
  --status-ineligible-ink: #6b3fa8;
  /* Fragetyp-Familien (--designer-fam-*-ink, Kachel-Picker-Randfarbe im
     aktiven Zustand) — bewusste, eng begrenzte Ausnahme vom Ein-Akzent-
     Prinzip oben (Nutzer-Entscheidung 2026-08-02): NUR Rahmen-/Icon-Ton,
     kein flächiger zweiter Akzent-Hintergrund. Dieselben fünf Farben wie
     --fragen-fam-*-ink in fragen.css (Typ-Badge in der Fragenliste). */
  --designer-fam-skala-ink: #2650b8;
  --designer-fam-auswahl-ink: #147a52;
  --designer-fam-raster-ink: #6b3fa8;
  --designer-fam-reihenfolge-ink: #9a5a0f;
  --designer-fam-eingabe-ink: #0f7d73;

  --designer-shadow: 0 1px 2px rgba(11, 15, 30, .05), 0 8px 24px rgba(11, 15, 30, .05);
  --designer-backdrop: rgba(11, 15, 30, .45);
}
/* ══════════ Ende der Token-Definitionen — ab hier keine Farbliterale ══════════ */

/* ── Typografie-Tokens (Bold Modern SaaS, Werte 1:1 aus
   docs/graphics/lapis/2026-07-26-design-richtungen/bold.html). Bewusst UNTER
   dem Sentinel: theme-invariant, enthält keine Farbliterale und darf den
   Vier-Block-Farbkontrakt oberhalb nicht aufweichen
   (test_designer_token_blocks_declare_identical_names zählt nur Blöcke
   oberhalb des Sentinels und erwartet dort genau 60 --designer-*-Namen). ── */
:root {
  --designer-font-display: "Segoe UI Variable Display", "Avenir Next", "Futura", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --designer-font-ui:      system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --designer-font-mono:    ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;

  --designer-fs-1: 0.72rem;    /* 11.5px — Monospace-Mikrolabels, Chips */
  --designer-fs-2: 0.8125rem;  /* 13px   — sekundärer UI-Text */
  --designer-fs-3: 0.9375rem;  /* 15px   — Fließtext, Eingaben */
  --designer-fs-4: 1.0625rem;  /* 17px   — Kartentitel */
  --designer-fs-5: 1.375rem;   /* 22px   — Abschnittsüberschriften */
  --designer-fs-6: 1.75rem;    /* 28px   — Seitenüberschriften */
  --designer-fs-7: 2.375rem;   /* 38px   — Display (derzeit unbenutzt, Skala vollständig) */

  --designer-track-display: -0.03em;
  --designer-track-label:    0.09em;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--designer-font-ui); font-size: var(--designer-fs-3); line-height: 1.6; background: var(--designer-bg); color: var(--designer-ink); }
a { color: var(--designer-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout ── */
.ds-main  { padding: 1.5rem 1rem 4rem; }
.ds-page__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.ds-page__header h1 {
  font-family: var(--designer-font-display); font-size: var(--designer-fs-6); font-weight: 800;
  letter-spacing: var(--designer-track-display); line-height: 1.15; color: var(--designer-ink-strong);
}
.ds-section-header { display: flex; justify-content: space-between; align-items: center;
  margin: 1.5rem 0 .75rem; }
.ds-section-header h2 {
  font-family: var(--designer-font-display); font-size: var(--designer-fs-5); font-weight: 800;
  letter-spacing: var(--designer-track-display); line-height: 1.15; color: var(--designer-ink-strong);
}
/* ── Card ── */
.ds-card {
  background: var(--designer-surface); border: 1px solid var(--designer-hairline); border-radius: 8px;
  box-shadow: var(--designer-shadow); padding: 1.25rem; margin-bottom: 1rem;
}

/* ── Buttons ── */
.ds-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .45rem .9rem; border-radius: 6px; border: 1px solid transparent;
  font-size: var(--designer-fs-2); font-weight: 500; cursor: pointer; white-space: nowrap;
  background: var(--designer-btn-bg); color: var(--designer-ink);
}
.ds-btn:hover { filter: brightness(var(--designer-btn-hover-brightness)); }
.ds-btn--primary  { background: var(--designer-primary); color: var(--designer-on-primary); border-color: var(--designer-primary-border); }
.ds-btn--outline  { background: transparent; border-color: var(--designer-border-input); color: var(--designer-ink-soft); }
.ds-btn--ghost    { background: transparent; border-color: transparent; color: var(--designer-muted); }
.ds-btn--ghost:hover { background: var(--designer-hairline-soft); }
.ds-btn--danger   { background: var(--designer-danger-bg); color: var(--designer-danger-ink); border-color: var(--designer-danger-border); }
.ds-btn--sm  { padding: .35rem .7rem; font-size: var(--designer-fs-1); }
.ds-btn--xs  { padding: .2rem .45rem; font-size: var(--designer-fs-1); }

/* ── Inline-Icons (Sitzung 11 Fortsetzung 33 Teil 39+, ersetzt Emoji-Mix) ── */
.ds-icon { width: 1em; height: 1em; vertical-align: -0.15em; display: inline-block; flex-shrink: 0; }

/* ── Forms ── */
.ds-form-row { margin-bottom: .75rem; }
.ds-form-row--inline { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; }
.ds-form-row--check  { display: flex; align-items: center; gap: .4rem; }
/* War --designer-fs-1 (11.5px) — Nutzer-Feedback 2026-08-05: zwei Stufen
   größer, gilt bewusst app-weit für .ds-label (nicht nur Abschnitts-
   Überschriften wie FRAGETYP/ANTWORTOPTIONEN, sondern auch normale
   Formularfeld-Beschriftungen — explizite Nutzer-Entscheidung). */
.ds-label  {
  display: block; font-family: var(--designer-font-mono); font-size: var(--designer-fs-3);
  font-weight: 600; letter-spacing: var(--designer-track-label); text-transform: uppercase;
  color: var(--designer-label); margin-bottom: .3rem;
}
/* Programmatisch verknüpfte Beschriftung ohne sichtbare Verdopplung, wenn der
   Platzhalter im Feld selbst schon denselben Text zeigt (z.B. mehrere kurze
   Felder nebeneinander in .ds-form-row--inline) — Standard-"sr-only"-Muster,
   bleibt für Screenreader vorhanden. Usability-Audit 2026-08-02/03
   (Batch 3, Fund 11). */
.ds-label--visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Setzt die Mono-Uppercase-Mikrolabel-Behandlung von .ds-label zurück — .ds-hint
   ist als Kindelement in mehreren Partials (question_form.html) verschachtelt
   und würde sie sonst erben. */
.ds-hint   {
  font-family: var(--designer-font-ui); font-size: var(--designer-fs-1); font-weight: 400;
  text-transform: none; letter-spacing: normal; color: var(--designer-muted-light);
}
.ds-input  { width: 100%; padding: .45rem .65rem; border: 1px solid var(--designer-border-input); border-radius: 6px; font-size: var(--designer-fs-2);
  background: var(--designer-surface); color: var(--designer-ink); }
.ds-input:focus { outline: 2px solid var(--designer-focus); outline-offset: -1px; }
/* Eigene Max-Breite (nicht die des Seiten-Shells) — ein mehrzeiliges Textfeld
   auf voller .ds-main-Breite wäre bei großen Monitoren seit dem Breiten-Fix
   (Entscheidung #3) unlesbar breit für eine Zeile Freitext (Design-Doc
   2026-07-26-app-header-darkmode-breitenfix-design.md, Nutzer-Entscheidung). */
.ds-input--textarea { resize: vertical; font-family: inherit; max-width: 60rem; }
.ds-input--select { cursor: pointer; }
.ds-input--mono { font-family: var(--designer-font-mono); font-size: var(--designer-fs-1); }
.ds-input--sm { width: auto; min-width: 80px; }
.ds-form-grid { display: grid; gap: .75rem; }
.ds-form-actions { display: flex; gap: .5rem; padding-top: .5rem; flex-wrap: wrap; }
.ds-inline-form { display: inline-flex; }
.ds-success { color: var(--designer-success); font-size: var(--designer-fs-1); margin-top: .4rem; }

/* Nicht-blockierender Hinweis (z.B. E-Mail-Versand fehlgeschlagen, Konto
   selbst aber erfolgreich angelegt) — bewusst eigene Farbfamilie statt
   .auth-error (Danger-Töne), damit "fehlgeschlagen, aber nicht schlimm"
   nicht wie ein abgebrochener Vorgang aussieht. */
.ds-warning {
  margin: 0 0 .75rem;
  padding: .6rem .8rem;
  border-radius: .5rem;
  background: var(--designer-warn-bg);
  color: var(--designer-warn-border-strong);
  border: 1px solid var(--designer-warn-border);
  font-size: var(--designer-fs-2);
}

/* ── Table ── */
.ds-table { width: 100%; border-collapse: collapse; background: var(--designer-surface);
  border: 1px solid var(--designer-hairline); border-radius: 8px; overflow: hidden; }
.ds-table th { background: var(--designer-surface-alt); font-family: var(--designer-font-mono);
  font-size: var(--designer-fs-1); font-weight: 600; letter-spacing: var(--designer-track-label);
  text-transform: uppercase; color: var(--designer-muted); padding: .65rem .9rem; text-align: left; }
.ds-table td { padding: .7rem .9rem; border-top: 1px solid var(--designer-hairline-soft); font-size: var(--designer-fs-2); }
.ds-table__actions { display: flex; gap: .4rem; justify-content: flex-end; }

.ds-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Matrix-Ansicht für Options-Flags (Wegwerf-Prototyp, docs/superpowers/
   specs/2026-08-06-lapis-optionszeile-matrix-ansicht-design.md) — an
   .ds-table angelehnt, eigener Wrapper für horizontales Scrollen bei
   vielen Flag-Spalten statt den Seiteninhalt selbst breiter zu machen. */
/* Sichtbare Scrollbar statt der Betriebssystem-Overlay-Variante (Usability-
   Test 06.08.2026, Politur-Punkt 2: bei normaler Fensterbreite ragte die
   Tabelle über den Panelrand hinaus, ohne dass ein Scroll-Hinweis auffiel). */
.ds-optmatrix-wrap {
  overflow-x: auto; margin-top: .5rem; scrollbar-width: thin;
}
.ds-optmatrix-wrap::-webkit-scrollbar { height: 8px; }
.ds-optmatrix-wrap::-webkit-scrollbar-thumb {
  background: var(--designer-muted); border-radius: 4px;
}
.ds-optmatrix { width: 100%; border-collapse: collapse; background: var(--designer-surface);
  border: 1px solid var(--designer-hairline); border-radius: 8px; }
.ds-optmatrix th { background: var(--designer-surface-alt); font-family: var(--designer-font-mono);
  font-size: var(--designer-fs-1); font-weight: 600; letter-spacing: var(--designer-track-label);
  color: var(--designer-muted); padding: .5rem .7rem; text-align: left; white-space: nowrap; }
.ds-optmatrix td { padding: .5rem .7rem; border-top: 1px solid var(--designer-hairline-soft);
  font-size: var(--designer-fs-2); white-space: nowrap; }
.ds-optmatrix__code { color: var(--designer-muted); font-size: var(--designer-fs-1);
  font-family: var(--designer-font-mono); margin-left: .35rem; }

/* ── Badges ── */
.ds-badge {
  display: inline-block; padding: .15rem .5rem; border-radius: 999px;
  font-family: var(--designer-font-mono); font-size: var(--designer-fs-1); font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
}
.ds-badge--draft    { background: var(--designer-status-draft-bg); color: var(--designer-status-draft-ink); }
.ds-badge--active   { background: var(--designer-status-active-bg); color: var(--designer-status-active-ink); }
.ds-badge--closed   { background: var(--designer-status-closed-bg); color: var(--designer-status-closed-ink); }
.ds-badge--archived { background: var(--designer-status-archived-bg); color: var(--designer-status-archived-ink); }
.ds-badge--exported { background: var(--designer-status-exported-bg); color: var(--designer-status-exported-ink); }
.ds-badge--required { background: var(--designer-accent-bg); color: var(--designer-accent-ink); }
.ds-badge--type     { background: var(--designer-type-bg); color: var(--designer-type-ink); font-family: var(--designer-font-mono); }

/* Rechteverwaltung — Stufe/Herkunft (Rechteverwaltung-Redesign 06.08.2026, siehe
   docs/superpowers/specs/2026-08-06-lapis-rechteverwaltung-visuelles-redesign-design.md).
   Stufe risiko-gestuft (10/20 neutral, 30 Accent, 40/50 Danger) — konsistent mit dem
   bereits Danger-farbigen "Entziehen"-Button. Herkunft trägt keinen Risikograd, bleibt
   neutral in allen Fällen und überschreibt bewusst Mono/Uppercase/Letter-Spacing von
   .ds-badge, da Herkunftstexte ("über Gruppe „X“") als Fließtext lesbarer sind. */
.ds-badge--level-low  { background: var(--designer-hairline-soft); color: var(--designer-muted); }
.ds-badge--level-mid  { background: var(--designer-accent-bg); color: var(--designer-accent-ink); }
.ds-badge--level-high { background: var(--designer-danger-bg); color: var(--designer-danger-ink); }
.ds-badge--origin {
  background: var(--designer-hairline-soft); color: var(--designer-muted);
  font-family: var(--designer-font-ui); text-transform: none; font-weight: 500; letter-spacing: normal;
}

/* Rechteverwaltung — Sektionstrennung der Panel-Unterblöcke (Vergeben-Formular /
   E-Mail-Einladung / Pending-Invitations / Einschränken-Reaktivieren), statt der
   bisherigen uneinheitlichen Ad-hoc-margin-top-Werte. */
.ds-access-section {
  margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--designer-hairline);
}
.ds-access-section:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* ── Page blocks ── */
.ds-page-block {
  background: var(--designer-surface); border: 1px solid var(--designer-hairline); border-radius: 8px;
  box-shadow: var(--designer-shadow); margin-bottom: .75rem; overflow: hidden;
}
.ds-page-block__header { display: flex; align-items: center; gap: .6rem;
  padding: .65rem 1rem; background: var(--designer-surface-alt); border-bottom: 1px solid var(--designer-hairline); flex-wrap: wrap; }
.ds-page-block__num {
  font-family: var(--designer-font-mono); font-size: var(--designer-fs-1); font-weight: 700;
  letter-spacing: var(--designer-track-label); text-transform: uppercase;
  color: var(--designer-muted); min-width: 50px;
}
.ds-page-block__actions { margin-left: auto; display: flex; gap: .3rem; }

/* ── Questions ── */
.ds-questions { padding: .5rem .75rem .75rem; }
.ds-question-row { display: flex; align-items: center; gap: .5rem; padding: .5rem .5rem;
  border-radius: 6px; flex-wrap: wrap; }
.ds-question-row:hover { background: var(--designer-surface-alt); }
.ds-question-row__label { flex: 1; font-size: var(--designer-fs-2); min-width: 150px; }
.ds-question-row__actions { display: flex; gap: .25rem; margin-left: auto; }
.ds-add-question { padding: .5rem; }

/* ── Question form ── */
.ds-question-form { background: var(--designer-surface-alt); border: 1px dashed var(--designer-border-input);
  border-radius: 8px; padding: 1rem; margin: .5rem 0; }

/* ── Antwortoptionen: Zeilen-Editor (ersetzt das Pipe-Textfeld) ──
   Vorbild: Demo-Prototyp, siehe partials/option_editor.html. Eine Zeile pro
   Option: schmales Wert-Feld, breites Bezeichnungs-Feld, Aktionen rechts. */
/* Abgerundeter Kasten wie .qs-page-group in der linken Fragenliste
   (fragen.css) — dieselbe Form (2px Akzent-Rand, 8px Radius), aber mit den
   designer.css-eigenen Token-Äquivalenten (--designer-primary-border statt
   --fragen-lapis), da .ds-optedit im rechten Panel lebt. Nutzer-Feedback
   05.08.2026, rein visuelle Angleichung. */
.ds-optedit {
  border: 2px solid var(--designer-primary-border);
  border-radius: 8px;
  padding: .9rem 1rem;
  background: var(--designer-surface);
}
.ds-optedit__head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.ds-optrows { display: flex; flex-direction: column; gap: .3rem; margin-top: .25rem; }
/* flex-wrap: bei schmalem Detail-Pane (Splitter frei bis 220px ziehbar, siehe
   qsResizer in designer-questions.js) unterlaufen Wert+Bezeichnung+Bild+
   Aktionen zusammen die verfügbare Breite auf Laptop-Bildschirmen (z.B.
   1366px) — ohne Wrap liefen Aktionen (bis zu 4 Buttons) aus dem Pane heraus
   statt darunter umzubrechen. Usability-Audit 2026-08-02. Die Kind-Elemente
   haben bereits sinnvolle min-width-Werte, `gap` deckt beide Richtungen ab. */
.ds-optrow { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.ds-optrow__value { flex: 0 0 5.5ch; text-align: center; padding-left: .3rem; padding-right: .3rem; }
.ds-optrow__label { flex: 1 1 auto; min-width: 6ch; }
.ds-optrow__image { flex: 1 1 12ch; min-width: 6ch; }
/* Zuordnungs-Paare: zwei gleich breite Felder — kein schmaler Code, weil beide
   Seiten gleichwertiger Inhalt sind (Begriff → Definition). */
.ds-optrow__pair { flex: 1 1 0; min-width: 6ch; }
.ds-optrow__sep { flex: 0 0 auto; color: var(--designer-muted-light); font-size: var(--designer-fs-2); }
.ds-optrow__actions { display: flex; gap: .15rem; flex-shrink: 0; }
.ds-optrow__del:hover { color: var(--designer-danger-ink); }
.ds-optrow__actions .ds-btn[disabled] { opacity: .35; cursor: default; }
.ds-optedit__add { align-self: flex-start; margin-top: .15rem; }
/* Aufklappbereich pro Zeile (Missing/Sonstiges/Exklusiv/Aufmerksamkeits-Check)
   sowie die Quick-Add-Leiste (Presets), siehe option_editor.html. */
.ds-optrow-group { display: flex; flex-direction: column; gap: 0; }
.ds-optrow__chevron svg { transition: transform .15s ease; }
.ds-optrow__chevron.is-open svg { transform: rotate(45deg); }
/* Trennt das Zahnrad ("Weitere Einstellungen") optisch von der Verschieben/
   Löschen-Gruppe, ohne es aus .ds-optrow__actions herauszulösen (gleiche
   Fokus-Reihenfolge, gleiche Flex-Gruppe). PM-Task lapis-optionszeile-
   zahnrad-statt-pfeil. */
.ds-optrow__actions-sep { width: 1px; align-self: stretch; margin: .1rem .1rem; background: var(--designer-hairline); flex-shrink: 0; }
.ds-optrow__expand {
  margin: .25rem 0 .5rem 0;
  padding: .5rem .75rem;
  border-left: 2px solid var(--designer-hairline);
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.ds-optedit__quickadd { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
/* Missing-Zeile visuell + semantisch markiert (Fable-Audit 2026-08-03,
   gering, Fund 0) — vorher von einer normalen Option nur am negativen Code
   zu unterscheiden. Dezenter linker Akzentstrich statt einer zweiten,
   lauten Farbfläche (die Zeile bleibt lesbar, konkurriert nicht mit dem
   Missing-Checkbox-Zustand im Aufklappbereich); das Badge trägt den
   Zustand zusätzlich als echten Text (auch für Screenreader). */
.ds-optrow-group--missing .ds-optrow { border-left: 2px solid var(--designer-warn-border); padding-left: .4rem; margin-left: -.4rem; border-radius: 4px; }
.ds-optrow__flag-badge {
  display: inline-flex; align-items: center; flex-shrink: 0;
  padding: .1rem .45rem; border-radius: 999px; border: 1px solid var(--designer-warn-border);
  background: var(--designer-warn-bg-soft); color: var(--designer-warn-ink);
  font-size: var(--designer-fs-1); font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
}
/* Options-Flags (Missing/Sonstiges/Exklusiv/Aufmerksamkeits-Check) als
   Slider-Toggle statt nackter Checkbox (Fable-Audit 2026-08-03, gering,
   Fund 3) — Demo-Vorbild sah Toggles vor, der Code hatte bisher rohe
   input[type=checkbox]. Reine CSS-Umsetzung: die Checkbox bleibt das
   ECHTE, per Tastatur bedienbare Formularelement (nur visuell versteckt,
   nicht display:none — sonst wäre sie für Tab-Reihenfolge/Screenreader
   weg), Track+Thumb sind rein dekorativ und per allgemeinem
   Geschwister-Selektor an ihren :checked-Zustand gekoppelt. */
.ds-toggle-row { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.ds-toggle-row__input { position: absolute; opacity: 0; width: 0; height: 0; }
.ds-toggle-row__track {
  position: relative; flex-shrink: 0; width: 34px; height: 18px; border-radius: 999px;
  background: var(--designer-border-input); transition: background-color .15s ease;
}
.ds-toggle-row__thumb {
  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--designer-surface); box-shadow: var(--designer-shadow);
  transition: transform .15s ease;
}
.ds-toggle-row__input:checked ~ .ds-toggle-row__track { background: var(--designer-primary); }
.ds-toggle-row__input:checked ~ .ds-toggle-row__track .ds-toggle-row__thumb { transform: translateX(16px); }
.ds-toggle-row__input:focus-visible ~ .ds-toggle-row__track { outline: 2px solid var(--designer-accent); outline-offset: 2px; }
.ds-toggle-row__label { font-size: var(--designer-fs-2); }

/* Verhindert das kurze Aufblitzen der Rohtext-Ansicht vor Alpines erstem
   Durchlauf (x-show greift erst nach dem Init). */
[x-cloak] { display: none !important; }

/* ── Fragetyp-Kachel-Picker (ersetzt das frühere <select>) ──
   Familien untereinander, Kacheln je Familie nebeneinander. Die Icons tragen
   die Familienlogik visuell (Design-Doc 2026-07-31-fragetyp-icons-design.md);
   die Zwischenüberschriften benennen sie zusätzlich, damit die Gruppierung
   nicht allein von der Formwahrnehmung abhängt. */
.ds-type-picker { display: flex; flex-direction: column; gap: .55rem; }
.ds-type-fam { display: flex; align-items: center; gap: .6rem; }
/* War align-items: baseline + text-align: right — Nutzer-Feedback 2026-08-05:
   "Skala"/"Raster"-Familienlabel horizontal zu den Buttons zentrieren, nicht
   rechtsbündig am oberen Zeilenrand. Schriftgröße zwei Stufen hoch
   (fs-1 -> fs-3), ebenfalls Nutzer-Feedback. */
.ds-type-fam__label {
  flex: 0 0 5.5rem;
  font-size: var(--designer-fs-3);
  letter-spacing: .04em;
  color: var(--designer-muted-light);
  text-align: center;
}
.ds-type-fam__tiles { display: flex; flex-wrap: wrap; gap: .4rem; }
.ds-type-tile {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem .35rem .55rem;
  border: 1px solid var(--designer-border-input);
  border-radius: 8px;
  background: var(--designer-surface);
  color: var(--designer-muted);
  cursor: pointer;
  user-select: none;
}
/* Der native Radio bleibt im DOM (Formular-Semantik, Tastatur, Screenreader),
   ist aber visuell durch die Kachel selbst ersetzt. */
.ds-type-tile input { position: absolute; opacity: 0; width: 0; height: 0; }
/* War 20px — die Größenleiter des Design-Docs (2026-07-31-fragetyp-icons-
   design.md §5.5) legt für den Kachel-Picker ausdrücklich 32px fest
   ("erst mit dem Picker"), beim Bau des Pickers selbst nie nachgezogen
   (Fable-Audit 2026-08-03, gering, Fund 2). */
.ds-type-tile svg { width: 32px; height: 32px; flex-shrink: 0; }
.ds-type-tile__label { font-size: var(--designer-fs-2); }
.ds-type-tile:hover { border-color: var(--designer-accent); color: var(--designer-accent-ink); }
.ds-type-tile.is-active {
  border-color: var(--designer-accent);
  background: var(--designer-accent-bg);
  color: var(--designer-accent-ink);
}
/* Familien-Randfarbe im aktiven Zustand (data-qfamily aus question_form.html) —
   nur Rahmen + Icon/Text-Ton, Hintergrund bleibt der gemeinsame neutrale
   --designer-accent-bg (siehe Token-Kommentar oben, Ein-Akzent-Prinzip). */
.ds-type-tile.is-active[data-qfamily="Skala"]       { border-color: var(--designer-fam-skala-ink);       color: var(--designer-fam-skala-ink); }
.ds-type-tile.is-active[data-qfamily="Auswahl"]     { border-color: var(--designer-fam-auswahl-ink);     color: var(--designer-fam-auswahl-ink); }
.ds-type-tile.is-active[data-qfamily="Raster"]      { border-color: var(--designer-fam-raster-ink);      color: var(--designer-fam-raster-ink); }
.ds-type-tile.is-active[data-qfamily="Reihenfolge"] { border-color: var(--designer-fam-reihenfolge-ink); color: var(--designer-fam-reihenfolge-ink); }
.ds-type-tile.is-active[data-qfamily="Eingabe"]     { border-color: var(--designer-fam-eingabe-ink);     color: var(--designer-fam-eingabe-ink); }
/* Fokus muss sichtbar bleiben, obwohl der Radio selbst unsichtbar ist. */
.ds-type-tile:focus-within { outline: 2px solid var(--designer-accent); outline-offset: 1px; }
/* Bestehende Frage: Typ gesperrt — Kacheln zeigen den Typ weiterhin an,
   reagieren aber nicht mehr auf Klick/Hover. */
.ds-type-picker--locked .ds-type-tile { cursor: default; opacity: .55; }
.ds-type-picker--locked .ds-type-tile.is-active { opacity: 1; }
.ds-type-picker--locked .ds-type-tile:hover {
  border-color: var(--designer-border-input);
  color: var(--designer-muted);
}
.ds-type-picker--locked .ds-type-tile.is-active:hover {
  border-color: var(--designer-accent);
  color: var(--designer-accent-ink);
}
@media (max-width: 620px) {
  .ds-type-fam { flex-direction: column; align-items: stretch; gap: .2rem; }
  .ds-type-fam__label { text-align: left; flex: none; }
}

/* ── Empty state ── */
.ds-empty { text-align: center; padding: 3rem 1rem; color: var(--designer-muted-light); font-size: var(--designer-fs-3); }

/* ── Link ── */
.ds-link { color: var(--designer-link); font-weight: 500; }

/* ── HTMX indicator ── */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }

/* ── Advisory Panel ── */
.ds-advisory {
  background: var(--designer-surface); border: 1px solid var(--designer-hairline); border-radius: 8px;
  box-shadow: var(--designer-shadow); margin-bottom: 1rem; overflow: hidden;
}
.ds-advisory__header { display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1rem; background: var(--designer-surface-alt); border-bottom: 1px solid var(--designer-hairline); }
.ds-advisory__title {
  font-family: var(--designer-font-display); font-weight: 800; font-size: var(--designer-fs-3);
  letter-spacing: var(--designer-track-display); color: var(--designer-ink-strong);
}
.ds-advisory__summary { display: flex; gap: .35rem; flex: 1; }
.ds-advisory__ok { color: var(--designer-success); font-size: var(--designer-fs-2); font-weight: 600; }
.ds-advisory__badge {
  display: inline-flex; align-items: center; padding: .15rem .5rem; border-radius: 999px;
  font-family: var(--designer-font-mono); font-size: var(--designer-fs-1); font-weight: 700;
  letter-spacing: var(--designer-track-label); text-transform: uppercase;
}
.ds-advisory__badge--error { background: var(--designer-danger-bg); color: var(--designer-danger-ink); }
.ds-advisory__badge--warn  { background: var(--designer-warn-bg); color: var(--designer-warn-ink); }
.ds-advisory__badge--info  { background: var(--designer-info-bg-strong); color: var(--designer-info-ink); }
.ds-advisory__empty { padding: 1rem; color: var(--designer-muted); font-size: var(--designer-fs-2); text-align: center; }

.ds-advisory__team { border-top: 1px solid var(--designer-hairline-soft); }
.ds-advisory__team:first-child { border-top: none; }
.ds-advisory__team-header { display: flex; align-items: center; gap: .5rem;
  padding: .6rem 1rem; background: var(--designer-surface-alt-2); cursor: default; flex-wrap: wrap; }
.ds-advisory__team-icon { font-size: var(--designer-fs-4); }
.ds-advisory__team-name { font-weight: 600; font-size: var(--designer-fs-2); color: var(--designer-ink-soft); }
.ds-advisory__team-agents { font-size: var(--designer-fs-1); color: var(--designer-muted-light); }
.ds-advisory__team-summary { margin-left: auto; display: flex; gap: .25rem; }

.ds-advisory__findings { padding: .25rem .75rem .75rem; display: flex; flex-direction: column; gap: .4rem; }
.ds-advisory__finding { display: flex; gap: .6rem; padding: .5rem .6rem;
  border-radius: 6px; border-left: 3px solid; }
.ds-advisory__finding--error { background: var(--designer-danger-bg-soft); border-color: var(--designer-danger-bar); }
.ds-advisory__finding--warn  { background: var(--designer-warn-bg-soft); border-color: var(--designer-warn-accent); }
.ds-advisory__finding--info  { background: var(--designer-info-bg); border-color: var(--designer-info-border-strong); }
.ds-advisory__finding-icon { font-size: var(--designer-fs-2); line-height: 1.4; flex-shrink: 0; }
.ds-advisory__finding-body { flex: 1; min-width: 0; }
.ds-advisory__finding-msg  { font-size: var(--designer-fs-3); color: var(--designer-ink-strong); line-height: 1.4; }
.ds-advisory__finding-meta { font-size: var(--designer-fs-1); color: var(--designer-muted-light); margin-top: .2rem; }
.ds-advisory__finding-agent { font-family: var(--designer-font-mono); }
.ds-advisory__finding-item  { color: var(--designer-muted); }
.ds-severity-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0; vertical-align: middle; background: var(--designer-muted-light); }
.ds-severity-dot--error { background: var(--designer-danger-strong); }
.ds-severity-dot--warn  { background: var(--designer-warn); }
/* --designer-focus ist der Marken-Akzent (nur Aktion) — ein Info-Schweregrad
   ist semantisch neutral (Design-Doc: "Info=zurückhaltend neutral"), daher
   info-border-strong statt des Akzents. */
.ds-severity-dot--info  { background: var(--designer-info-border-strong); }

/* ── Hypothesis Advisor ── */
.ds-subtext { color: var(--designer-muted); font-size: var(--designer-fs-3); margin-bottom: 1.25rem; }
.ha-warnings { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.ha-warning  { background: var(--designer-warn-bg-soft); border: 1px solid var(--designer-warn-accent); border-radius: 6px;
  padding: .6rem .9rem; font-size: var(--designer-fs-2); color: var(--designer-warn-ink); }
.ha-meta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem;
  font-size: var(--designer-fs-2); color: var(--designer-label); }
.ha-meta-backend { color: var(--designer-muted-light); font-family: var(--designer-font-mono); }
.ha-section-title {
  font-family: var(--designer-font-display); font-size: var(--designer-fs-4); font-weight: 800;
  letter-spacing: var(--designer-track-display); color: var(--designer-ink-strong);
  margin: 1.25rem 0 .6rem;
}

.ha-constructs { display: flex; flex-direction: column; gap: .75rem; }
.ha-construct { background: var(--designer-surface); border: 1px solid var(--designer-hairline); border-radius: 8px;
  padding: 1rem; border-left: 4px solid var(--designer-muted-light); }
.ha-construct--primary { border-left-color: var(--designer-focus); }
.ha-construct--implied { border-left-color: var(--designer-accent); }
.ha-construct__header { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.ha-construct__name { font-weight: 700; font-size: var(--designer-fs-3); }
.ha-construct__en   { font-size: var(--designer-fs-1); color: var(--designer-muted-light); font-family: var(--designer-font-mono); }
.ha-construct__badge { display: inline-block; padding: .1rem .45rem; border-radius: 999px;
  font-size: var(--designer-fs-1); font-weight: 700; }
.ha-construct__badge--primary { background: var(--designer-info-bg-strong); color: var(--designer-info-ink); }
.ha-construct__badge--implied { background: var(--designer-accent-bg); color: var(--designer-accent-ink); }
.ha-construct__notes { font-size: var(--designer-fs-2); color: var(--designer-muted); margin-bottom: .5rem; }

.ha-scales, .ha-items { margin-top: .5rem; }
.ha-scales__title, .ha-items__title {
  font-family: var(--designer-font-mono); font-size: var(--designer-fs-1); font-weight: 600;
  letter-spacing: var(--designer-track-label); text-transform: uppercase;
  color: var(--designer-muted-light); margin-bottom: .3rem;
}
.ha-scale-item { display: flex; align-items: center; gap: .5rem; padding: .3rem 0;
  border-top: 1px solid var(--designer-hairline-soft); font-size: var(--designer-fs-2); }
.ha-scale-item__n { color: var(--designer-muted-light); font-size: var(--designer-fs-1); }
.ha-item { display: flex; align-items: center; gap: .5rem; padding: .25rem 0;
  border-top: 1px solid var(--designer-hairline-soft); font-size: var(--designer-fs-2); }
.ha-item__stars { color: var(--designer-warn); font-size: var(--designer-fs-1); min-width: 40px; }
.ha-item__label { flex: 1; color: var(--designer-ink-soft); }
.ha-item__badge { background: var(--designer-success-bg); color: var(--designer-success-ink); font-size: var(--designer-fs-1);
  font-weight: 600; padding: .1rem .4rem; border-radius: 999px; }
.ha-no-items { font-size: var(--designer-fs-2); color: var(--designer-muted-light); padding: .4rem 0; }

/* Eigene Max-Breite für den Fließtext — sonst liefe eine Textzeile bei
   großen Monitoren seit dem Breiten-Fix über die halbe Bildschirmbreite
   (gleiche Begründung wie .ds-input--textarea oben). */
.ha-explanation { background: var(--designer-surface-alt); border: 1px solid var(--designer-hairline); border-radius: 8px;
  padding: 1rem; font-size: var(--designer-fs-3); line-height: 1.6; color: var(--designer-ink-soft); margin-bottom: 1rem; max-width: 78ch; }
.ha-advisory-team { margin-bottom: .75rem; }
.ha-advisory-team__header { font-size: var(--designer-fs-2); font-weight: 600; color: var(--designer-label);
  display: flex; align-items: center; gap: .4rem; margin-bottom: .3rem; }
.ha-actions { margin-top: 1.5rem; }

/* ── Page Conditions (Typ 1 show_if) ── */
.ds-cond-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .55rem; border-radius: 999px; border: 1px solid var(--designer-warn);
  background: var(--designer-warn-bg); color: var(--designer-warn-ink);
  font-size: var(--designer-fs-1); font-weight: 600; cursor: pointer;
  white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis;
}
.ds-cond-chip:hover { background: var(--designer-warn-bg-hover); border-color: var(--designer-warn-border-strong); }

/* Bedingung verweist auf eine gelöschte Frage (Usability-Audit 2026-08-02/04,
   Batch 4, Fund 2) — dieselben Danger-Töne wie .ft-order-warning auf der
   Struktur-Seite, nicht die Amber-Farbe einer normalen (gültigen) Bedingung. */
.ds-cond-chip--dangling {
  border-color: var(--designer-danger-border); background: var(--designer-danger-bg-soft);
  color: var(--designer-danger-ink);
}
.ds-cond-chip--dangling:hover { background: var(--designer-danger-bg-soft); border-color: var(--designer-danger-border); }

.ds-cond-add {
  display: inline-flex; align-items: center;
  padding: .15rem .45rem; border-radius: 4px; border: 1px dashed var(--designer-border-input);
  background: transparent; color: var(--designer-muted-light);
  font-size: var(--designer-fs-1); cursor: pointer;
}
.ds-cond-add:hover { border-color: var(--designer-warn-border-strong); color: var(--designer-warn-ink); background: var(--designer-warn-bg-soft); }

.ds-cond-editor {
  border-top: 2px solid var(--designer-warn);
  background: var(--designer-warn-bg-soft); padding: .65rem 1rem .55rem;
}
.ds-cond-editor__row {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.ds-cond-editor__label {
  font-size: var(--designer-fs-1); font-weight: 600; color: var(--designer-warn-ink); white-space: nowrap;
}
.ds-cond-editor__operands {
  display: contents; /* inline children into flex row */
}
.ds-cond-editor__error {
  color: var(--designer-danger-ink); font-size: var(--designer-fs-1); margin: .3rem 0 0;
}
.ds-form-error {
  color: var(--designer-danger-ink); font-size: var(--designer-fs-2); margin: 0 0 .6rem;
  background: var(--designer-danger-bg-soft); border: 1px solid var(--designer-danger-border); border-radius: 6px;
  padding: .5rem .7rem;
}
.ds-cond-editor__actions {
  display: flex; gap: .4rem; margin-top: .5rem;
}

/* ── Filterführung Baum-Ansicht (Phase 13B) ── */
.ft-hint { font-size: var(--designer-fs-2); color: var(--designer-muted); margin: -.5rem 0 1rem; }

.ft-list { list-style: none; margin: 0; padding: 0; }
.ft-list--root { padding: 0; }
.ft-node { margin: .3rem 0; }
.ft-children {
  list-style: none; margin: .3rem 0 .3rem 1.1rem; padding: 0 0 0 .9rem;
  border-left: 2px solid var(--designer-hairline);
}

.ft-row {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .75rem 1rem; border-radius: 7px; border: 1px solid var(--designer-hairline);
  background: var(--designer-surface);
}
.ft-row--page { background: var(--designer-surface); }

/* ── Decision #6 (Design-Doc 2026-07-27): Filter und Split werden NICHT mehr
   über zwei konkurrierende Farbtöne (Warn/Info) unterschieden, sondern über
   Rahmenstil + Monospace-Typlabel, beide auf neutralem Grund. Gestrichelt =
   bedingter Durchlauf (Filter), durchgezogen + abgesetzter Grund = struktureller
   Knoten (Split/Arm). Das Label ist .ft-title selbst (trägt bereits "Filter"/
   "Split (zufällig)"/"Arm · n%", siehe partials/flow_tree.html) — hier nur
   typografisch als Mikrolabel behandelt, kein Markup-Eingriff nötig. ── */
.ft-row--filter { background: var(--designer-surface);     border-color: var(--designer-border-input); border-style: dashed; }
.ft-row--split  { background: var(--designer-surface-alt); border-color: var(--designer-border-input); border-style: solid; }
.ft-row--arm    { border: none; background: transparent; padding: .2rem .3rem;
  color: var(--designer-muted); font-weight: 600; }

.ft-check { flex-shrink: 0; }
.ft-icon { font-size: var(--designer-fs-1); color: var(--designer-muted-light); flex-shrink: 0; }
.ft-row--filter .ft-icon,
.ft-row--split  .ft-icon,
.ft-row--arm    .ft-icon { color: var(--designer-muted); }
.ft-title { font-size: var(--designer-fs-2); font-weight: 600; color: var(--designer-ink-strong); }
.ft-row--filter .ft-title,
.ft-row--split  .ft-title,
.ft-row--arm    .ft-title {
  font-family: var(--designer-font-mono); font-size: var(--designer-fs-1);
  letter-spacing: var(--designer-track-label); text-transform: uppercase;
  font-weight: 700; color: var(--designer-ink-soft);
}
.ft-meta { font-size: var(--designer-fs-1); color: var(--designer-muted-light); }

/* Umbenennen-Feld (Batch 5, Fund 2) — ersetzt .ft-title im Struktur-
   Bearbeiten-Modus, dieselbe Größe wie die übrigen kompakten Zeilen-Inputs
   (Filter-Bedingungs-Editor, .ft-arm-weight__input). */
.ft-rename-form { display: inline-flex; align-items: center; gap: .3rem; }
.ft-rename-input { width: 12rem; max-width: 40vw; }
.ft-cond-summary {
  font-size: var(--designer-fs-1); color: var(--designer-warn-ink); background: var(--designer-warn-bg); border: 1px solid var(--designer-warn-border);
  border-radius: 5px; padding: .1rem .5rem;
}
.ft-row__actions { margin-left: auto; display: flex; gap: .3rem; }

.ft-add-row { display: flex; gap: .4rem; margin: .3rem 0; }
.ft-error {
  color: var(--designer-danger-ink); background: var(--designer-danger-bg); border: 1px solid var(--designer-danger-border);
  border-radius: 6px; padding: .5rem .8rem; font-size: var(--designer-fs-2); margin-bottom: .8rem;
}
/* Rückmeldung nach dem Anwenden der Code-Ansicht (Usability-Audit
   2026-08-02/03, Batch 1, Fund 9, gering) — bewusst derselbe Akzent/Badge-
   Farbton wie .pf-drop-zone--active statt einer eigenen (grünen)
   Erfolgsfarbe. */
.ft-success {
  color: var(--designer-primary); background: var(--designer-accent-bg); border: 1px solid var(--designer-primary-border);
  border-radius: 6px; padding: .5rem .8rem; font-size: var(--designer-fs-2); margin-bottom: .8rem;
}
.ft-toolbar { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--designer-hairline); }

/* ── Code-Ansicht: Statusabzeichen vor dem Editieren (Stufe 3, Sitzung 11
   Fortsetzung 33 Teil 35+) — kalibriert die Erwartung, ob Anwenden sofort
   funktioniert (0 Antworten) oder Config-/Typänderungen geprüft werden. ── */
.ft-status-badge {
  display: inline-block; font-size: var(--designer-fs-2); color: var(--designer-info-ink); background: var(--designer-info-bg);
  border: 1px solid var(--designer-info-border); border-radius: 6px; padding: .4rem .7rem; margin-bottom: .8rem;
}
.ft-status-badge--empty { color: var(--designer-label); background: var(--designer-surface-sunken); border-color: var(--designer-hairline); }

/* ── Code-Ansicht: Bestätigungs-Zusammenfassung (Löschkandidaten + blockierende
   Probleme, jeweils mit ID+Label/Zeile+Grund) ── */
.ft-confirm-section { margin-bottom: 1.2rem; }
.ft-confirm-section h3 {
  font-family: var(--designer-font-display); font-size: var(--designer-fs-3); font-weight: 800;
  letter-spacing: var(--designer-track-display); margin: 0 0 .5rem;
}
.ft-confirm-list { list-style: none; margin: 0; padding: 0; }
.ft-confirm-list li {
  padding: .5rem .7rem; border: 1px solid var(--designer-hairline); border-radius: 6px;
  margin-bottom: .4rem; font-size: var(--designer-fs-2);
}
.ft-confirm-list--issues li { border-color: var(--designer-danger-border); background: var(--designer-danger-bg); }
.ft-confirm-list--deletions li { border-color: var(--designer-warn-border); background: var(--designer-warn-bg-soft); }
.ft-confirm-reason { color: var(--designer-danger-ink); font-size: var(--designer-fs-2); margin-top: .2rem; }

/* ── Outliner-Tasten + Zwei-Klick-Verschieben (Phase 13B, Slice 2) ── */
.ds-btn:disabled { opacity: .35; cursor: not-allowed; }
.ft-outliner { display: inline-flex; gap: .15rem; margin-right: .3rem; }
.ft-outliner .ds-btn { min-width: 1.7rem; text-align: center; }

.ft-moving-banner {
  background: var(--designer-info-bg); border: 1px solid var(--designer-info-border); color: var(--designer-info-ink);
  border-radius: 6px; padding: .5rem .8rem; font-size: var(--designer-fs-2); margin-bottom: .8rem;
}
.ft-moving-banner a { color: var(--designer-info-ink); text-decoration: underline; cursor: pointer; }

/* dotted statt dashed: dashed ist seit Decision #6 exklusiv "Filter-Bedingung"
   in dieser Datei — .ft-row--moving markiert einen anderen Zustand
   ("wird gerade verschoben") und braucht ein eigenes Rahmenmuster. */
.ft-row--moving {
  background: var(--designer-surface-sunken); border: 1px dotted var(--designer-muted-light); color: var(--designer-muted);
  opacity: .75;
}
.ft-move-tag {
  margin-left: auto; font-size: var(--designer-fs-1); font-style: italic; color: var(--designer-muted-light);
}
.ft-row--dim { opacity: .55; }
.ft-row--dim .ft-title { font-weight: 500; }

.ft-slot-wrap { list-style: none; margin: .15rem 0; }
.ft-slot {
  width: 100%; text-align: left; font-size: var(--designer-fs-1); color: var(--designer-info-ink);
  background: var(--designer-info-bg); border: 1px dashed var(--designer-info-border); border-radius: 5px;
  padding: .3rem .6rem; cursor: pointer;
}
.ft-slot:hover { background: var(--designer-info-bg-strong); border-color: var(--designer-info-border-strong); }

/* ── Bedingungs-Editor: Satz-Chips + Erweitert-Modus (Phase 13C) ── */
.ft-cond-row {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  padding: .3rem 0;
}
.ft-cond-row:not(:first-child) { border-top: 1px dashed var(--designer-warn-border); margin-top: .3rem; }
.ft-cond-connector { min-width: 4.5rem; }
.ft-cond-connector--static {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 4.5rem; padding: .15rem 0; font-size: var(--designer-fs-1);
  font-weight: 600; color: var(--designer-muted-light); cursor: default;
}
.ft-cond-negate {
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: var(--designer-fs-1); font-weight: 700; color: var(--designer-warn-ink-strong);
}
.ft-cond-editor__toolbar { display: flex; gap: .5rem; margin: .5rem 0 .3rem; }
.ft-cond-json {
  width: 100%; font-family: var(--designer-font-mono);
  font-size: var(--designer-fs-2); padding: .5rem; border: 1px solid var(--designer-warn-border); border-radius: 6px;
  background: var(--designer-surface); resize: vertical;
}

/* ── Zoom-in-Zweig + Struktur-Modus (Phase 13D) ── */
.ft-zoom-link {
  font-size: var(--designer-fs-2); text-decoration: none; opacity: .55; padding: 0 .15rem;
}
.ft-zoom-link:hover { opacity: 1; text-decoration: none; }

/* ── Querverweise & Absicherung (Phase 13E) ── */
.ft-ref-badge {
  font-size: var(--designer-fs-1); font-weight: 600; color: var(--designer-info-ink); background: var(--designer-info-bg-strong);
  border-radius: 999px; padding: .05rem .45rem;
}
.ft-jump-btn { color: var(--designer-info-ink); }
.ft-order-warning {
  font-size: var(--designer-fs-2); color: var(--designer-danger-ink); background: var(--designer-danger-bg-soft);
  border: 1px solid var(--designer-danger-border); border-radius: 6px;
  padding: .3rem .6rem; margin: .2rem 0 .2rem 1.4rem;
}
.ft-highlight-flash {
  animation: ft-flash 2.2s ease-out;
  outline: 2px solid var(--designer-warn); outline-offset: 2px; border-radius: 6px;
}
@keyframes ft-flash {
  0%, 40% { background-color: var(--designer-warn-bg); }
  100% { background-color: transparent; }
}
.ft-scroll-marker {
  position: fixed; right: 3px; width: 10px; height: 4px;
  background: var(--designer-warn); border-radius: 2px; z-index: 999; pointer-events: none;
}

/* ── Random-Split-Verfeinerung (Phase 13F) ── */
.ft-arm-weight {
  font-size: var(--designer-fs-1); color: var(--designer-muted); display: inline-flex; align-items: center;
}
.ft-arm-weight label { display: inline-flex; align-items: center; gap: .25rem; }
.ft-arm-weight__input { width: 3.5rem; }

/* ── Zusatzansichten (Phase 13G) ── */
.ft-vis-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.ft-vis-table th, .ft-vis-table td {
  text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--designer-hairline);
  font-size: var(--designer-fs-2);
}
.ft-vis-table th { color: var(--designer-muted); font-weight: 600; }
.ft-text-dsl {
  width: 100%; font-family: var(--designer-font-mono);
  font-size: var(--designer-fs-2); padding: .75rem; border: 1px solid var(--designer-border-input); border-radius: 6px;
  background: var(--designer-surface-alt); resize: vertical; white-space: pre;
}
.ft-code-textarea { min-height: 32rem; background: var(--designer-surface); }

.ft-sim-answers, .ft-sim-splits {
  margin-bottom: 1rem; padding: .75rem; background: var(--designer-surface-alt);
  border: 1px solid var(--designer-hairline); border-radius: 8px;
}
.ft-sim-answers h3, .ft-sim-splits h3 {
  font-family: var(--designer-font-display); font-size: var(--designer-fs-2); font-weight: 800;
  letter-spacing: var(--designer-track-display); margin: 0 0 .5rem;
}
.ft-sim-row { display: flex; align-items: center; gap: .6rem; padding: .25rem 0; font-size: var(--designer-fs-2); }
.ft-sim-row label { min-width: 220px; color: var(--designer-ink-soft); }
.ft-sim-tree { list-style: none; margin: 0; padding-left: 0; }
.ft-sim-children { list-style: none; margin: 0; padding-left: 1.4rem; }
.ft-sim-row-tree { padding: .25rem .4rem; border-radius: 4px; font-size: var(--designer-fs-2); }
.ft-sim-node--entered > .ft-sim-row-tree { background: var(--designer-success-bg-soft); }
.ft-sim-node--skipped > .ft-sim-row-tree { opacity: .5; }
.ft-sim-reason { font-style: italic; color: var(--designer-danger-ink); margin-left: .6rem; font-size: var(--designer-fs-1); }

/* ── Projekt-Infoseite (Dashboard): Label/Wert-Zeilen ── */
.ds-info-row { display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: .45rem 0; font-size: var(--designer-fs-2);
  border-top: 1px solid var(--designer-hairline-soft); }
.ds-info-row:first-child { border-top: none; padding-top: 0; }
.ds-info-row__label { color: var(--designer-muted); }
.ds-info-row__value { font-weight: 600; color: var(--designer-ink-strong); }

/* ── Projekte-Liste (Design-Doc 2026-07-27-projekte-bereich-design.md).
   Bewusst KEINE .ds-table: die Liste braucht Ordner-Container als Drop-Ziele
   und ziehbare Zeilen. Die eine Stufe größere Schrift (Entscheidung #11) hängt
   deshalb allein an .pf-row und bleibt auf diese Liste beschränkt — .ds-table
   selbst bleibt unverändert (war bisher ihr einziger Verwender). ── */
.pf-toolbar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.pf-newfolder { display: flex; gap: .35rem; align-items: center; }

.pf-folder { margin-bottom: 1rem; }
.pf-folder__header { display: flex; align-items: center; gap: .5rem;
  padding: .45rem .2rem; }
.pf-folder__rename { display: flex; align-items: center; gap: .4rem; flex: 1; }
.pf-folder__name { font-family: var(--designer-font-display); font-size: var(--designer-fs-4);
  font-weight: 650; letter-spacing: var(--designer-track-display); color: var(--designer-ink-strong);
  background: transparent; border: 1px solid transparent; border-radius: 6px; padding: .2rem .4rem; }
.pf-folder__name:focus { border-color: var(--designer-border-input); background: var(--designer-surface); }
.pf-folder__name--static { color: var(--designer-muted); }
.pf-folder__actions { display: flex; gap: .3rem; }

/* PR3, "Wer hat Zugriff" — natives <details>, kein Alpine (rein lesende
   Ein-Klick-Auf-/Zuklappen-Interaktion, kein State-Management nötig). */
.pf-access-details { margin: .3rem 0 0; font-size: .78rem; }
.pf-access-details summary {
  display: inline-flex; align-items: center; gap: .3rem; cursor: pointer;
  color: var(--designer-muted); list-style: none; width: fit-content;
}
.pf-access-details summary::-webkit-details-marker { display: none; }
.pf-access-details summary:hover { color: var(--designer-ink); }
.pf-access-details[open] summary { color: var(--designer-ink); margin-bottom: .4rem; }

/* --designer-surface-alt statt --designer-surface: gegen --designer-bg
   (die Seite selbst) war die Box vorher kaum wahrnehmbar (Nutzer-Fund:
   "Projekte irgendwie etwas lose im Raum") — beide Werte liegen in Hell wie
   Dunkel nur ~1% Helligkeit auseinander. -alt schafft echten Kontrast, ohne
   einen neuen Token einzuführen. */
.pf-drop-zone { background: var(--designer-surface-alt); border: 1px solid var(--designer-hairline);
  border-radius: 8px; box-shadow: var(--designer-shadow); overflow: hidden;
  transition: background .1s, border-color .1s; }
.pf-drop-zone--active { border-color: var(--designer-primary); background: var(--designer-accent-bg); }

/* Projekte in einem echten Unterordner werden samt ihrer Box eingerückt —
   zeigt die Zugehörigkeit zum Ordner darüber. "Ohne Ordner" (.pf-folder--
   unfiled) bleibt bewusst bündig, da dort nichts übergeordnet ist. */
.pf-folder:not(.pf-folder--unfiled) .pf-drop-zone { margin-left: 1.5rem; }

/* Aktions-Icons (Kopieren/Löschen/Wiederherstellen/Ordner-Häkchen) sitzen in
   .ds-btn--xs und erben dessen kleinste Schriftgröße (--designer-fs-1,
   11.5px) — bei den ohnehin schon kompakten SVGs (1em) auf dieser Seite
   kaum erkennbar (Nutzer-Fund: "Icons wesentlich größer"). Bewusst nur auf
   .pf-folder gescoped, NICHT global an .ds-btn--xs .ds-icon — die dichten
   Editor-Oberflächen (Struktur-Baum, Bedingungs-Editor, Detail-Panel) nutzen
   dieselbe Klasse absichtlich kompakt. */
.pf-folder .ds-btn--xs .ds-icon { width: 1.3em; height: 1.3em; }

.pf-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .7rem .9rem; font-size: var(--designer-fs-3);
  border-top: 1px solid var(--designer-hairline-soft); }
.pf-row:first-child { border-top: none; }
.pf-row:hover { background: var(--designer-surface-alt); }
.pf-row[draggable] { cursor: grab; }
.pf-row[draggable]:active { cursor: grabbing; }
.pf-row__title { flex: 1; min-width: 12rem; font-weight: 600; }
.pf-row__id { font-family: var(--designer-font-mono); font-size: var(--designer-fs-1);
  color: var(--designer-muted-light); }
.pf-row__meta { font-size: var(--designer-fs-2); color: var(--designer-muted); }
.pf-row__actions { margin-left: auto; display: flex; gap: .3rem; }
.pf-row--just-moved { animation: pf-flash 1.4s ease-out; }
@keyframes pf-flash {
  from { background: var(--designer-accent-bg); }
  to   { background: transparent; }
}
.pf-empty { padding: .9rem; font-size: var(--designer-fs-2); color: var(--designer-muted-light); text-align: center; }

/* Re-Login-Modal (PR2b, Sitzungsablauf) — erster echter Alpine.js-Einsatz
   im Projekt (bisher nur vendored, ungenutzt). [x-cloak] verhindert das
   kurze Aufblitzen des Modals vor Alpines Initialisierung. */
[x-cloak] { display: none !important; }

.relogin-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--designer-backdrop);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.relogin-modal {
  width: min(22rem, 100%);
  padding: 1.75rem 1.5rem;
  display: flex; flex-direction: column; gap: .3rem;
}

/* Erfolgs-Toast, app-weit (07.08.2026 aus der fragen-editor-lokalen Variante
   verallgemeinert, PM-Task lapis-paradata-karte-polish-und-speicher-ux) —
   schwebt jetzt statt inline in einer bestimmten Pane zu stehen, da er auf
   jeder Designer-Seite auslösbar ist. Erbt dieselbe Erfolgsfarbe wie
   .ds-success (nicht neu erfunden), statt eines eigenen Marken-Akzents. */
.qs-saved-toast {
  position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 900;
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--designer-fs-1); font-weight: 600;
  color: var(--designer-success); background: var(--designer-success-bg);
  padding: .5rem .9rem; border-radius: 99px; box-shadow: var(--designer-shadow);
}
.qs-saved-toast svg { width: 16px; height: 16px; }

/* Eigenes Dialog-Fenster statt window.confirm() für die internen
   Navigations-Guards (Nutzer-Feedback 08.08.2026) — gleiches Muster wie
   .relogin-backdrop/.relogin-modal oben. */
.unsaved-changes-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--designer-backdrop);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.unsaved-changes-modal {
  width: min(24rem, 100%);
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: 1rem;
}

/* Eigenes Dialog-Fenster für hx-confirm statt window.confirm() (PM-Task
   lapis-eigene-fehlerfenster-statt-browser-nativ) — gleiches Muster wie
   .unsaved-changes-backdrop/-modal oben, "Bestätigen" statt "Verwerfen und
   fortfahren" (Text ist hier dynamisch, kann Löschen/Entfernen/Widerrufen/
   etc. sein — kein einzelnes Verb passt für alle 21 Stellen). */
.action-confirm-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--designer-backdrop);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.action-confirm-modal {
  width: min(24rem, 100%);
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: 1rem;
}