/* dito ASK — Basis der Teilnahmeseiten (layout_public: Befragung, Startinfo, Vorschau-iframe). Nachtrag 4x (15.10.2026):
   eingefrorener Stand des früheren app.css, damit das neue Design der Verwaltung die Darstellung für Befragte nicht verändert.
   Teilnahme-Anpassungen gehören in participate.css; diese Datei nur für Fehlerkorrekturen ändern. */
/* dito ASK — Designsystem der Verwaltung (Nachtrag 4f: helles, modernes Erscheinungsbild; kein Dunkelmodus).
   Farben/Abstände über Variablen. Teilnahmeseite: participate.css baut darauf auf und setzt eigene Token. */
:root {
  color-scheme: light;
  --color-bg: #f5f7fb;
  --color-surface: #ffffff;
  --color-surface-2: #f8fafc;
  --color-text: #181f26;
  --color-muted: #64748b;
  --color-muted-2: #8a94a6;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-primary: #2563eb;
  --color-primary-contrast: #ffffff;
  --color-primary-hover: #1d4ed8;
  --color-primary-soft: #eff6ff;
  --color-primary-soft-2: #dbeafe;
  --color-focus: #2563eb;
  --color-error: #dc2626;
  --color-error-bg: #fef2f2;
  --color-error-border: #fecaca;
  --color-success: #16a34a;
  --color-success-bg: #f0fdf4;
  --color-warn: #d97706;
  --color-warn-bg: #fffbeb;
  --color-navy: #181f26;   /* exakte Farbe des App-Icons */
  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, .08);
  --shadow-lg: 0 12px 40px rgba(15, 23, 42, .16);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --touch: 44px;
  --topbar-h: 60px;
  --sidebar-w: 248px;
  --content-max: 1400px;
}
*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--font); font-size: 100%; line-height: 1.5; color: var(--color-text); background: var(--color-bg); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + 12px); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--color-primary); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-focus) 55%, transparent); outline-offset: 2px; }
h1, h2, h3, h4 { line-height: 1.25; letter-spacing: -.01em; }
/* logische Eigenschaft: in RTL (Farsi/Arabisch) läge „left: -999px“ sonst im scrollbaren Bereich und die Seite begänne leer verschoben */
.skip-link { position: absolute; inset-inline-start: -999px; top: 0; background: var(--color-surface); padding: var(--space-2) var(--space-3); z-index: 60; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.skip-link:focus { inset-inline-start: var(--space-2); top: var(--space-2); }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---- Shell: Kopfzeile, Seitenleiste, Hauptbereich ---------------------------------------------- */
.topbar { position: sticky; top: 0; z-index: 40; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.topbar__inner { display: flex; align-items: center; gap: var(--space-4); min-height: var(--topbar-h); padding: 0 var(--space-5); }
.topbar__menu { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text); cursor: pointer; margin-left: calc(-1 * var(--space-2)); }
.topbar__menu:hover { background: var(--color-surface-2); }
.topbar__menu .icon { width: 22px; height: 22px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--color-text); font-size: 1.15rem; letter-spacing: -.01em; white-space: nowrap; }
.brand__icon { width: 32px; height: 32px; border-radius: 8px; display: block; }
.brand strong { font-weight: 800; }
.topbar__search { flex: 1 1 320px; max-width: 520px; margin-left: auto; position: relative; display: flex; align-items: center; }
.topbar__search-icon { position: absolute; left: 12px; color: var(--color-muted); pointer-events: none; }
.topbar__search input { width: 100%; min-height: 40px; padding: 0 64px 0 40px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-bg); font: inherit; color: var(--color-text); }
.topbar__search input:focus { background: var(--color-surface); border-color: var(--color-primary); outline: 3px solid var(--color-primary-soft-2); outline-offset: 0; }
.topbar__kbd { position: absolute; right: 12px; font: 600 .72rem/1 var(--font); color: var(--color-muted); border: 1px solid var(--color-border); border-radius: 6px; padding: 4px 6px; background: var(--color-surface); pointer-events: none; }
.topbar__user { position: relative; margin-left: auto; display: flex; align-items: center; }
.topbar__search + .topbar__user { margin-left: 0; }
.avatar-button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 4px; border-radius: 12px; cursor: pointer; color: var(--color-muted); }
.avatar-button:hover { background: var(--color-surface-2); }
.avatar-button[aria-expanded="true"] { background: var(--color-surface-2); }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--color-navy); color: #fff; font-weight: 700; font-size: .95rem; letter-spacing: .02em; box-shadow: var(--shadow-sm); }
.avatar-button__chevron { width: 16px; height: 16px; }
.user-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: var(--space-2); z-index: 50; }
.user-menu[hidden] { display: none; }
.user-menu__head { display: flex; flex-direction: column; padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-2); overflow-wrap: anywhere; }
.user-menu__item { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 40px; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text); font: inherit; text-decoration: none; cursor: pointer; text-align: left; }
.user-menu__item:hover { background: var(--color-surface-2); }
.user-menu__item .icon { color: var(--color-muted); }

.sidebar { position: fixed; top: var(--topbar-h); left: 0; bottom: 0; width: var(--sidebar-w); background: var(--color-surface); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; overflow-y: auto; z-index: 30; }
.sidebar-backdrop { position: fixed; inset: var(--topbar-h) 0 0 0; background: rgba(15, 23, 42, .35); z-index: 29; }
.sidebar-backdrop[hidden] { display: none; }
.nav { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-3) var(--space-4); }
.nav a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--color-text); padding: 9px 12px; border-radius: var(--radius-sm); min-height: 40px; font-size: .95rem; font-weight: 500; }
.nav a .icon { color: var(--color-muted); }
.nav a:hover { background: var(--color-surface-2); }
.nav a[aria-current="page"] { background: var(--color-primary-soft); color: var(--color-primary); font-weight: 600; }
.nav a[aria-current="page"] .icon { color: var(--color-primary); }
.nav__group { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); padding: var(--space-4) 12px var(--space-1); }
.sidebar__foot { margin-top: auto; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); }

.main { flex: 1; width: 100%; padding: var(--space-5) var(--space-5) var(--space-6); }
body.has-sidebar .main { margin-left: var(--sidebar-w); width: auto; }
.main > *, .view { max-width: var(--content-max); }
.view { margin: 0 auto; }
body.no-sidebar .main { max-width: 1100px; margin: 0 auto; }
.footer { padding: var(--space-4) 0 0; font-size: .875rem; text-align: center; }
.muted { color: var(--color-muted); }
.empty { color: var(--color-muted); font-style: italic; padding: var(--space-4) 0; }
.tag { display: inline-flex; align-items: center; gap: 4px; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 999px; padding: 1px 10px; font-size: .76rem; font-weight: 500; margin-right: var(--space-1); color: var(--color-text); line-height: 1.5; white-space: nowrap; vertical-align: middle; }
.tag:last-child { margin-right: 0; }

@media (max-width: 1023px) {
  .topbar__inner { padding: 0 var(--space-4); gap: var(--space-3); }
  .topbar__menu { display: inline-flex; }
  .topbar__search { flex-basis: 160px; }
  .topbar__kbd { display: none; }
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: none; }
  body.nav-open .sidebar { transform: none; box-shadow: var(--shadow-lg); }
  body.has-sidebar .main { margin-left: 0; }
  .main { padding: var(--space-4); }
}
@media (max-width: 640px) {
  body.has-sidebar .brand__name { display: none; }
  .topbar__search { flex: 1 1 auto; }
  .main { padding: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }

/* ---- Karten, Raster, Formulare, Schaltflächen ---------------------------------------------------- */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); min-width: 0; }
.card + .card, .view > .card + .card { margin-top: var(--space-4); }
/* Nachtrag 4j: Kästen in Rastern oben bündig (kein Geschwister-Abstand im Raster); Blöcke untereinander mit Abstand */
.grid > .card, .grid--2 > .card, .stat-grid > .card, .grid > .card + .card { margin-top: 0; }
.grid + .card, .grid + .grid, .grid + .table-wrap, .grid + .notice, .card + .grid, .notice + .card, .card + .notice, .table-wrap + .card, .card + .table-wrap, .notice + .grid, .notice + .table-wrap, .table-wrap + .table-wrap { margin-top: var(--space-4); }
.view > div > .card:first-child, .view > section > .card:first-child { margin-top: 0; }
.stack > * + * { margin-top: var(--space-4); }
.card--narrow { max-width: 440px; margin: var(--space-6) auto; }
.card--narrow .btn--primary { width: 100%; }
.card h1 { margin-top: 0; font-size: 1.5rem; }
.card h2 { margin-top: 0; font-size: 1.1rem; }
.grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid > * { min-width: 0; }

.field { margin-bottom: var(--space-4); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); }
.field-row > .field { margin-bottom: var(--space-2); }
/* Vorschau von Trennlinie/Bild in der Fragekarte des Editors (Fix 3) */
.question__divider { border: 0; border-top: 1px solid var(--color-border-strong); margin: var(--space-2) auto; height: 0; }
.question__divider--theme { border-top-color: var(--color-primary); }
.question__image { max-width: 240px; max-height: 160px; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--color-border); display: block; margin-top: var(--space-2); }
.question__image-missing { color: var(--color-warn); font-size: .9rem; }
.image-preview { max-width: 100%; max-height: 220px; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--color-border); display: block; margin: var(--space-2) 0; }
.field label { display: block; font-weight: 600; margin-bottom: var(--space-1); font-size: .95rem; }
.field input, .field textarea, .field select { width: 100%; min-height: var(--touch); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font: inherit; background: var(--color-surface); color: var(--color-text); transition: border-color .15s, box-shadow .15s; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft-2); outline: none; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--color-error); }
.field textarea { min-height: 80px; resize: vertical; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--touch); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text); font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; line-height: 1.2; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; }
.btn:hover { background: var(--color-surface-2); border-color: var(--color-border-strong); }
.btn .icon { width: 16px; height: 16px; }
.btn--primary { background: var(--color-primary); color: var(--color-primary-contrast); border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn--ghost { background: transparent; border-color: transparent; }
.btn--ghost:hover { background: var(--color-surface-2); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn--small { min-height: 34px; padding: var(--space-1) var(--space-3); font-size: .88rem; }
.btn--icon { min-height: 34px; min-width: 34px; padding: 0 var(--space-2); }
.btn--icon .icon { width: 16px; height: 16px; }
.btn--danger { color: var(--color-error); border-color: var(--color-error-border); }
.btn--danger:hover { background: var(--color-error-bg); border-color: var(--color-error); }
.btn--primary.btn--danger { background: var(--color-error); border-color: var(--color-error); color: #fff; }
.btn--primary.btn--danger:hover { background: #b91c1c; border-color: #b91c1c; }
.error { color: var(--color-error); background: var(--color-error-bg); border: 1px solid var(--color-error-border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
.debug { white-space: pre-wrap; font-size: .8rem; background: var(--color-bg); padding: var(--space-3); overflow: auto; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }

@media (max-width: 480px) {
  .card { padding: var(--space-4); }
  .card--narrow { margin: var(--space-4) auto; }
}

/* ---- Verwaltungs-SPA (Sprint 2) ------------------------------------------------ */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.page-header h1 { margin: 0; font-size: 1.75rem; font-weight: 700; }
.page-header--sub { margin-top: var(--space-5); }
.page-header--sub h2 { margin: 0; font-size: 1.2rem; }
.page-header--sub h3 { margin: 0; font-size: 1.1rem; }
.page-header--tight { margin-top: 0; margin-bottom: var(--space-3); }
.page-header--sub .muted { margin: var(--space-1) 0 0; max-width: 80ch; }
.page-intro { margin: var(--space-1) 0 0; color: var(--color-muted); max-width: 72ch; }

/* ---- Reiter (Fix 1, 14.10.2026): Umfrageseite Erscheinungsbild · Versionen · Durchläufe ------------------------ */
.tabs { display: flex; gap: var(--space-1); border-bottom: 2px solid var(--color-border); margin: var(--space-3) 0 var(--space-3); overflow-x: auto; }
/* Umfrageseite (Nachtrag 4m): kompakter Kopf mit zwei Aktionsgruppen, möglichst viel Platz für den Editor */
.page-header--survey { margin-bottom: var(--space-2); align-items: flex-start; }
.page-header--survey h1 { font-size: 1.4rem; line-height: 1.25; }
.page-meta { margin: var(--space-1) 0 0; font-size: .9rem; color: var(--color-text); }
.action-groups { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: flex-start; flex: 1 0 100%; margin-top: var(--space-1); }
.action-group { display: inline-flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.action-group__label { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted-2); display: inline-flex; align-items: center; gap: var(--space-1); padding-right: var(--space-1); white-space: nowrap; }
.action-group__label .tag { text-transform: none; letter-spacing: 0; }
.action-group__items { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
.versions-card { padding: var(--space-3); }
.versions-card .table-wrap { margin-top: 0; border: 0; box-shadow: none; }
.versions-card > .muted { margin: var(--space-2) 0 0; }
/* Kompakte Statusleiste des eingebetteten Editors: Version · Probleme · Motivation · Sprachen in einer Zeile */
.editor-status { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); align-items: center; font-size: .88rem; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); margin-bottom: var(--space-3); }
.editor-status__item { display: inline-flex; align-items: center; gap: var(--space-1); }
.editor-status__item--ok { color: var(--color-success); }
.editor-status__item--warn, .editor-status__item--warn summary { color: #92400e; }
.editor-status__item--version { font-weight: 600; }
.editor-status__switch { min-height: 30px; padding: 2px var(--space-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font: inherit; font-weight: 600; background: var(--color-surface); }
details.editor-status__item { display: inline-block; }
details.editor-status__item summary { cursor: pointer; font-weight: 600; }
details.editor-status__item[open] { display: block; width: 100%; }
.editor-status__problems { margin: var(--space-1) 0 0; padding-left: var(--space-5); }
.editor--embedded .editor__pages { top: calc(var(--topbar-h) + var(--space-2)); }
.version-editor { margin-top: 0; }
.device-toolbar--head { align-items: center; }
.device-toolbar__spacer { flex: 1 1 auto; }
.tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -2px; padding: var(--space-2) var(--space-4); min-height: var(--touch); font: inherit; font-weight: 600; color: var(--color-muted); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-2); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.tab:hover { color: var(--color-text); background: var(--color-surface-2); }
.tab:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.tab[aria-selected="true"] { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.tab__count { font-size: .75rem; font-weight: 600; color: var(--color-muted); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 999px; padding: 1px 8px; min-width: 22px; text-align: center; }
.tab[aria-selected="true"] .tab__count { color: var(--color-primary); background: var(--color-primary-soft); border-color: var(--color-primary-soft-2); }
.tabpanel[hidden] { display: none; }
.versions-card .table-wrap { margin-top: 0; }
.table tr.row--selected td { background: var(--color-primary-soft); }
.table tr.row--selected .cell-key { color: var(--color-primary); }
.version-editor { margin-top: var(--space-4); }
.editor--embedded .page-header--version { margin-top: 0; padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.editor--embedded .page-header--version h2 { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 1.25rem; }
.page-header__text { min-width: 0; flex: 1 1 320px; }
.actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.actions--bottom { margin-top: var(--space-4); }
.page-header .btn--primary, .actions .btn--primary, .dialog-actions .btn--primary, .card > .btn--primary, .view .btn--primary { width: auto; }
.linklike { background: none; border: 0; padding: 0; color: var(--color-primary); text-decoration: underline; font: inherit; cursor: pointer; text-align: left; }
.small { font-size: .875rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.count { font-weight: 400; color: var(--color-muted); font-size: 1rem; }
.subnav { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); flex-wrap: wrap; }
.subnav a { text-decoration: none; padding: var(--space-1) var(--space-3); border-radius: 999px; border: 1px solid var(--color-border); min-height: 36px; display: inline-flex; align-items: center; color: var(--color-text); background: var(--color-surface); }
.subnav a.active { background: var(--color-primary); color: var(--color-primary-contrast); border-color: var(--color-primary); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card--hint { margin-top: var(--space-5); }
ul.plain, ol.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: var(--space-1) 0; }
.props { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: 0; }
.props dt { color: var(--color-muted); }
.props dd { margin: 0; min-width: 0; overflow-wrap: anywhere; white-space: pre-line; } /* lange Texte (Instruktion, Konfiguration) umbrechen statt über den Rand zu laufen */
.props dd code { white-space: pre-wrap; overflow-wrap: anywhere; }
.report-table td.status--error { color: var(--color-error); font-weight: 600; }
.report-table td.status--ok { color: var(--color-success); }
.file-field input[type=file] { font: inherit; }
.preview-text { white-space: pre-line; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); max-height: 200px; overflow: auto; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.table-wrap { overflow-x: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.table { width: 100%; border-collapse: collapse; background: var(--color-surface); }
.table th, .table td { text-align: left; padding: 10px var(--space-3); border-bottom: 1px solid var(--color-border); vertical-align: middle; font-size: .93rem; line-height: 1.4; }
.table td:first-child, .table th:first-child { padding-left: var(--space-4); }
.table td:last-child, .table th:last-child { padding-right: var(--space-4); }
.table thead th { font-size: .72rem; color: var(--color-muted-2); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; background: var(--color-surface-2); white-space: nowrap; padding-top: 9px; padding-bottom: 9px; }
.table .col-nowrap { white-space: nowrap; }
.table .col-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .col-center { text-align: center; }
.table .col-muted { color: var(--color-muted); }
.table .col-wide { min-width: 14rem; width: 36%; }
.table .col-key { white-space: nowrap; width: 1%; }
.table .col-actions { white-space: nowrap; width: 1%; text-align: right; }
.table td.col-wide strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.tags { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.tags .tag { margin: 0; }
.cell-title { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cell-sub { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.cell-sub .tag { font-size: .72rem; padding: 0 8px; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--color-surface-2); }
.table tr.row--link { cursor: pointer; }
.table td:has(> .row-actions), .table td:has(> .btn:only-child) { white-space: nowrap; width: 1%; }
.table td .row-actions { justify-content: flex-end; }
.table--editor input, .table--editor select { min-height: 36px; padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font: inherit; width: 100%; background: var(--color-surface); color: var(--color-text); }
.table--editor input.narrow { width: 6em; }
.row-actions { display: inline-flex; gap: var(--space-1); white-space: nowrap; }
.tag--draft { border-color: #fcd34d; background: var(--color-warn-bg); color: #92400e; }
.tag--released, .tag--published, .tag--active { border-color: #bbf7d0; background: var(--color-success-bg); color: #166534; }
.tag--archived, .tag--superseded, .tag--disabled, .tag--locked { color: var(--color-muted); }
.tag--req { border-color: var(--color-error-border); background: var(--color-error-bg); color: var(--color-error); }

.field--check label { font-weight: 400; display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch); }
.field--check input { width: 20px; height: 20px; min-height: 0; padding: 0; accent-color: var(--color-primary); }
input[type=checkbox], input[type=radio] { accent-color: var(--color-primary); }
/* Gruppe von Optionsfeldern innerhalb eines Feldes (z. B. Umfang des Excel-Exports) */
.field--radios > label.check-inline { display: flex; font-weight: 400; margin-bottom: 0; }
.field--radios input[type=radio] { width: 20px; height: 20px; min-height: 0; padding: 0; flex: 0 0 auto; }
.field .help { margin: var(--space-1) 0 0; font-size: .85rem; color: var(--color-muted); }
.field-error { margin: var(--space-1) 0 0; font-size: .875rem; color: var(--color-error); }
.req { color: var(--color-error); }
.check-inline { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; }
.check-inline input[type=checkbox] { width: 18px; height: 18px; }
.check-block { display: flex; align-items: flex-start; padding: var(--space-2); border-bottom: 1px solid var(--color-border); gap: var(--space-2); }
.check-block input { margin-top: 4px; }
.checklist { display: flex; flex-direction: column; max-height: 260px; overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-2); }
.checklist--tall { max-height: 50vh; }
.checklist .depth-1 { padding-left: var(--space-4); } .checklist .depth-2 { padding-left: var(--space-6); } .checklist .depth-3 { padding-left: 48px; }
.filters { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); }
.filters .field { margin-bottom: 0; min-width: 160px; flex: 1; }
.filters .field label { font-size: .85rem; color: var(--color-muted); }
.filters .field input, .filters .field select { min-height: 40px; }
.filters .field--check { flex: 0; white-space: nowrap; }
.filters .field--check label { color: var(--color-text); }
.filters .btn { min-height: 40px; }

.dialog { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 0; width: min(560px, calc(100vw - 2 * var(--space-4))); max-height: calc(100vh - 2 * var(--space-4)); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-lg); }
.dialog--wide { width: min(900px, calc(100vw - 2 * var(--space-4))); }
.dialog::backdrop { background: rgba(15, 23, 42, .45); }
.dialog-form { display: flex; flex-direction: column; max-height: calc(100vh - 2 * var(--space-4)); }
.dialog-title { margin: 0; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); font-size: 1.2rem; }
.dialog-body { padding: var(--space-4) var(--space-5); overflow: auto; flex: 1; }
.dialog-body h3 { font-size: 1rem; margin: var(--space-4) 0 var(--space-2); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border); background: var(--color-surface-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.dialog [data-form-error] { padding: var(--space-3) var(--space-5) 0; }
.subform { margin-bottom: var(--space-3); }

.notice { background: var(--color-primary-soft); border: 1px solid var(--color-primary-soft-2); border-left: 4px solid var(--color-primary); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.notice--warn { background: var(--color-warn-bg); border-color: #fde68a; border-left-color: var(--color-warn); }
.notice--ok { background: var(--color-success-bg); border-color: #bbf7d0; border-left-color: var(--color-success); }
.notice ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.toasts { position: fixed; right: var(--space-4); bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); z-index: 70; }
.toast { background: var(--color-text); color: #fff; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); max-width: 360px; }
.toast--error { background: var(--color-error); color: #fff; }
.toast--success { background: var(--color-success); color: #fff; }

/* Baumlisten (Themen; Skalen als Karten, s. u.) */
.tree { list-style: none; padding: 0; margin: 0; }
.tree li { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.tree .depth-1 { padding-left: var(--space-5); } .tree .depth-2 { padding-left: 48px; } .tree .depth-3 { padding-left: 72px; }
.tree__name { font-weight: 600; }
.tree .depth-1 .tree__name { font-weight: 400; }
.tree li .actions { margin-left: auto; }
.tree--card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 0 var(--space-4); }
.tree--card li { padding: var(--space-3) 0; }
.tree--card li:last-child { border-bottom: 0; }
.tree--card .tree__name { text-decoration: none; color: var(--color-text); }
.tree--card .tree__name:hover { text-decoration: underline; color: var(--color-primary); }

/* Nachtrag 4f: Skalen als Karten mit einklappbaren Dimensionszeilen */
.pool-cards { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.pool-cards > li { display: block; padding: 0; border: 0; }
.pool-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; container-type: inline-size; container-name: pool-card; }
.pool-card--archived { opacity: .75; }
.pool-card__head { display: flex; align-items: center; gap: var(--space-3) var(--space-4); padding: var(--space-4) var(--space-5); flex-wrap: wrap; }
.pool-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--color-primary-soft); color: var(--color-primary); flex: none; }
.pool-card__icon .icon { width: 20px; height: 20px; }
.pool-card__title { flex: 1 1 360px; min-width: 0; }
.pool-card__title .tree__name { font-size: 1.08rem; font-weight: 700; text-decoration: none; color: var(--color-text); overflow-wrap: anywhere; line-height: 1.3; }
.pool-card__title .tree__name:hover { color: var(--color-primary); text-decoration: underline; }
.pool-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: .85rem; color: var(--color-muted); }
.pool-card__meta .tag { margin: 0; }
.pool-card__count { white-space: nowrap; }
.pool-card__actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: 0 1 auto; margin-left: auto; }
.pool-card__actions .btn--icon.btn--ghost { border-color: transparent; }
.pool-card__body { border-top: 1px solid var(--color-border); background: var(--color-surface-2); padding: var(--space-3) var(--space-5) var(--space-4); }
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.btn-group .btn[disabled] { opacity: 1; color: var(--color-border-strong); cursor: default; }
.pool-card__body[hidden] { display: none; }
.pool-card__subhead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0 0 var(--space-2); }
.pool-card__subhead h3 { margin: 0; font-size: .95rem; font-weight: 600; color: var(--color-muted); }
.pool-card .tree.rows { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0 var(--space-3); }
.pool-card .tree.rows li { padding: 6px 0; flex-wrap: nowrap; gap: var(--space-2); }
.pool-card .tree.rows .row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pool-card .tree.rows .row-title { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.pool-card .tree.rows .row-title .tree__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pool-card .tree.rows .row-title .muted { white-space: nowrap; }
/* schmale Karte (z. B. neben dem Seitenmenü): Zeilenaktionen nur als Symbole, Beschriftung bleibt für Screenreader */
@container pool-card (max-width: 720px) {
  .tree.rows .actions .btn--small { font-size: 0; gap: 0; padding: 0 9px; min-width: 34px; }
}
@container pool-card (max-width: 560px) {
  .pool-card__actions .btn--small { font-size: 0; gap: 0; padding: 0 9px; min-width: 34px; }
}
.pool-card .tree.rows .actions { flex: none; margin-left: auto; gap: 6px; }
.clamp1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
span.clamp1 { display: block; }
.pool-card__empty { margin: 0; padding: var(--space-2) 0; }
.pool-card .tree.rows li:last-child { border-bottom: 0; }
.pool-card .tree.rows .depth-1 { padding-left: 0; }
.pool-card .tree.rows .tree__name { font-weight: 500; text-decoration: none; color: var(--color-text); }
.pool-card .tree.rows .tree__name:hover { text-decoration: underline; color: var(--color-primary); }
.row-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--color-surface-2); color: var(--color-muted); flex: none; }
.row-icon .icon { width: 15px; height: 15px; }
.grip { color: var(--color-border-strong); font-size: .95rem; letter-spacing: -3px; user-select: none; width: 12px; flex: none; line-height: 1; }
.pool-card__foot { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); padding: var(--space-2) var(--space-5); border-top: 1px solid var(--color-border); font-size: .8rem; color: var(--color-muted); background: var(--color-surface); }
.pool-card__toggle .icon { transition: transform .15s; }
.pool-card__toggle[aria-expanded="false"] .icon { transform: rotate(-90deg); }
.pool-group { margin: var(--space-5) 0 var(--space-3); font-size: .95rem; color: var(--color-muted); font-weight: 600; }
.pool-group:first-child { margin-top: 0; }
@media (max-width: 760px) {
  .pool-card__head { padding: var(--space-3) var(--space-4); }
  .pool-card__actions { width: 100%; justify-content: flex-start; }
  .pool-card .tree.rows li { flex-wrap: wrap; }
  .pool-card .tree.rows .actions { width: 100%; margin-left: 0; padding-left: 50px; }
  .pool-card__body, .pool-card__foot { padding-left: var(--space-4); padding-right: var(--space-4); }
}

.option-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.option-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-size: .88rem; }
.option-chip--special { border-style: dashed; color: var(--color-muted); }
.option-chip__value { font-weight: 700; }
.option-chip__num { color: var(--color-muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.option-chips--small { display: inline-flex; gap: 4px; vertical-align: middle; }
.option-chips--small .option-chip { padding: 1px 7px; font-size: .78rem; }
.pool-card__body > p { margin: var(--space-3) 0 0; }

/* Versionen von Antwortskalen (Nachtrag 4o) */
.tag--version { border-color: #bfdbfe; background: #eff6ff; color: #1e40af; font-variant-numeric: tabular-nums; }
.scale-versions { margin-top: var(--space-3); border-top: 1px dashed var(--color-border); padding-top: var(--space-2); }
.scale-versions > summary { cursor: pointer; font-size: .88rem; color: var(--color-muted); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.scale-versions > summary .tag { margin: 0; }
.scale-versions__list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.scale-versions__list li { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: .88rem; }
.scale-versions__list .row-actions { display: inline-flex; gap: var(--space-1); margin-left: auto; }

.cell-main { min-width: 240px; }
.cell-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; text-decoration: none; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 6px; padding: 0 6px; }
.cell-key:hover { text-decoration: underline; }

/* Nachtrag 4g: Seitenmenü (Master/Detail), Such-/Filterleiste */
.split { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.split__main { min-width: 0; }
.side-panel { position: sticky; top: calc(var(--topbar-h) + var(--space-4)); max-height: calc(100vh - var(--topbar-h) - 2 * var(--space-4)); display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.side-panel__search { position: relative; padding: var(--space-3) var(--space-3) var(--space-2); flex: none; }
.side-panel__icon { position: absolute; left: 22px; top: 50%; transform: translateY(-3px); width: 15px; height: 15px; color: var(--color-muted); pointer-events: none; }
.side-panel__search input { width: 100%; min-height: 36px; padding: 0 var(--space-3) 0 34px; border: 1px solid var(--color-border-strong); border-radius: 999px; background: var(--color-bg); font: inherit; font-size: .9rem; color: var(--color-text); }
.side-panel__search input:focus { background: var(--color-surface); border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft-2); outline: none; }
.side-panel__head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 var(--space-4) var(--space-1); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); flex: none; }
.side-panel__count { font-weight: 500; letter-spacing: 0; text-transform: none; }
.side-list { overflow-y: auto; padding: 0 var(--space-2) var(--space-2); flex: 1 1 auto; min-height: 0; }
.side-list__item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; font: inherit; font-size: .92rem; color: var(--color-text); cursor: pointer; line-height: 1.3; }
.side-list__item:hover { background: var(--color-surface-2); }
.side-list__item[aria-current="true"] { background: var(--color-primary-soft); color: var(--color-primary); font-weight: 600; }
.side-list__item[aria-current="true"] .side-list__count { color: var(--color-primary); }
.side-list__item .icon { width: 15px; height: 15px; color: var(--color-muted); }
.side-list__item--depth-1 { padding-left: 24px; font-size: .88rem; }
.side-list__item--depth-2 { padding-left: 38px; font-size: .88rem; }
.side-list__item--depth-3 { padding-left: 52px; font-size: .88rem; }
.side-list__item--muted .side-list__label { color: var(--color-muted); }
.side-list__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-list__sub { display: block; font-size: .76rem; color: var(--color-muted); font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.side-list__count { flex: none; font-size: .76rem; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.side-list__empty { padding: var(--space-2) 10px; margin: 0; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-4); }
.filter-bar__search { position: relative; flex: 1 1 240px; max-width: 420px; }
.filter-bar__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--color-muted); pointer-events: none; }
.filter-bar__search input { width: 100%; min-height: 38px; padding: 0 var(--space-3) 0 34px; border: 1px solid var(--color-border-strong); border-radius: 999px; background: var(--color-surface); font: inherit; font-size: .92rem; color: var(--color-text); }
.filter-bar__search input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft-2); outline: none; }
.filter-bar__field { display: inline-flex; align-items: center; }
.filter-bar__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.filter-bar select { min-height: 38px; padding: 0 28px 0 var(--space-3); border: 1px solid var(--color-border-strong); border-radius: 999px; background: var(--color-surface); font: inherit; font-size: .92rem; color: var(--color-text); max-width: 260px; }
.filter-bar__check { font-size: .92rem; }
.result-line { margin: 0 0 var(--space-3); }
.result-line .linklike { text-decoration: none; }
.result-line .linklike:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--space-4); }
  .side-panel { position: static; max-height: 280px; }
}

/* Editor */
.editor__layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-4); align-items: start; }
.editor__pages { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-3); position: sticky; top: calc(var(--topbar-h) + var(--space-3)); box-shadow: var(--shadow-sm); }
.editor__pages h2 { font-size: 1rem; margin: 0 0 var(--space-2); }
.pagelist { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.pagelist li { display: flex; align-items: center; gap: var(--space-1); border-radius: var(--radius-sm); }
.pagelist li.active { background: var(--color-primary-soft); }
.pagelist__btn { flex: 1; text-align: left; background: none; border: 0; padding: var(--space-2); font: inherit; color: inherit; cursor: pointer; min-height: var(--touch); border-radius: var(--radius-sm); }
.pagelist__no { display: inline-block; min-width: 1.6em; text-align: center; background: var(--color-border); border-radius: 999px; font-size: .8rem; }
.editor__main { min-width: 0; }
.questions { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.question { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-sm); }
.question--problem { border-color: #fcd34d; }
.question__head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.question__no { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; border-radius: 999px; background: var(--color-primary); color: var(--color-primary-contrast); font-size: .85rem; font-weight: 600; }
.question__meta { flex: 1; display: flex; gap: var(--space-1); flex-wrap: wrap; align-items: center; }
.question__text { margin: var(--space-2) 0 0; font-size: 1.05rem; white-space: pre-line; }
.question__problems { margin: var(--space-2) 0 0; padding-left: var(--space-5); color: #92400e; font-size: .9rem; }
@media (max-width: 760px) {
  .editor__layout { grid-template-columns: 1fr; }
  .editor__pages { position: static; }
  .props { grid-template-columns: 1fr; }
}

/* Sprint 3: Durchläufe */
.tag--run-open { border-color: #bbf7d0; background: var(--color-success-bg); color: #166534; font-weight: 600; }
.tag--run-test { border-color: #fcd34d; background: var(--color-warn-bg); color: #92400e; }
.tag--run-paused { border-color: #fcd34d; background: var(--color-warn-bg); color: #92400e; }
.tag--run-closed, .tag--run-archived { color: var(--color-muted); }
.bigcode { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 2rem; letter-spacing: .15em; text-align: center; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3); user-select: all; }
.check-block .narrow { width: 7em; margin-left: auto; min-height: 36px; padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font: inherit; }

/* Sprint 3: Editor – Regeln, Gruppen, Drag-and-Drop */
.rule-summary { margin: var(--space-1) 0 0; font-size: .85rem; color: #92400e; }
.rule-row { display: grid; grid-template-columns: 2fr auto 1.2fr 1fr auto; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); }
.rule-row select, .rule-row input { min-height: 36px; padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font: inherit; width: 100%; background: var(--color-surface); color: var(--color-text); }
@media (max-width: 640px) { .rule-row { grid-template-columns: 1fr 1fr; } }
.drag-handle { cursor: grab; color: var(--color-muted); user-select: none; padding: 0 var(--space-1); }
.question.dragging { opacity: .5; }
.question.drop-target { outline: 2px dashed var(--color-primary); outline-offset: 2px; }

/* Auswertung (Sprint 4) */
.filters .filter-row { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: flex-end; }
.filters .filter { display: flex; flex-direction: column; gap: var(--space-1); font-size: .9rem; }
.filters .filter select { min-height: 40px; padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font: inherit; background: var(--color-surface); color: var(--color-text); max-width: 320px; }
.results-page { font-size: 1.1rem; margin: var(--space-5) 0 var(--space-3); }
.q-card { margin-bottom: var(--space-4); }
.q-card h3 { margin: 0 0 var(--space-1); font-size: 1.05rem; }
.q-head p { margin: 0 0 var(--space-2); }
.q-row { border-top: 1px solid var(--color-border); padding-top: var(--space-3); margin-top: var(--space-3); }
.q-row h4 { margin: 0 0 var(--space-1); font-size: 1rem; }
.q-n { margin: 0 0 var(--space-2); }
.bars { display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(0, 3fr) max-content; gap: var(--space-1) var(--space-3); align-items: center; }
.bar { display: contents; }
.bar__label { overflow-wrap: anywhere; }
.bar__track { background: var(--color-bg); border-radius: var(--radius-sm); height: 18px; overflow: hidden; }
.bar__fill { height: 100%; background: var(--color-primary); border-radius: var(--radius-sm); min-width: 0; transition: width .3s; }
.bar__fill--special { background: var(--color-muted); }
.bar__value { white-space: nowrap; font-variant-numeric: tabular-nums; }
.props--inline { grid-template-columns: repeat(auto-fit, minmax(120px, max-content) minmax(60px, max-content)); margin-top: var(--space-3); }
.scale-card { margin-bottom: var(--space-5); }
.scale-card h3 { font-size: 1rem; margin: var(--space-5) 0 var(--space-2); }
.scale-card h4 { font-size: .95rem; margin: var(--space-4) 0 var(--space-2); }
.scale-card .table { font-variant-numeric: tabular-nums; }
.table--fit td, .table--fit th { white-space: nowrap; }
.bar__track--suppressed { background: repeating-linear-gradient(45deg, var(--color-bg), var(--color-bg) 6px, var(--color-surface) 6px, var(--color-surface) 12px); border: 1px dashed var(--color-border); }
.text-item { border-top: 1px solid var(--color-border); padding: var(--space-3) 0; }
.text-item__meta { margin-bottom: var(--space-1); }
.text-item__original { white-space: pre-wrap; margin: var(--space-1) 0; }
.text-item .redact { width: 100%; font: inherit; padding: var(--space-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); }
.text-item--approved { border-left: 4px solid var(--color-success); padding-left: var(--space-3); }
.text-item--rejected { border-left: 4px solid var(--color-border); padding-left: var(--space-3); opacity: .8; }
.free-texts { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.free-texts li { margin-bottom: var(--space-1); white-space: pre-wrap; }
/* Erscheinungsbild (Sprint 4b): Bedienelemente + Vorschau im Handyrahmen (Werte per CSSOM gesetzt, CSP) */
.design-grid { display: grid; gap: var(--space-5); grid-template-columns: minmax(280px, 1.3fr) minmax(240px, 1fr); align-items: start; }
.design-controls { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.design-set { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-2) var(--space-3) var(--space-3); margin: 0; min-width: 0; background: var(--color-surface); }
.design-set legend { font-weight: 600; padding: 0 var(--space-1); }
.design-color { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.design-color input[type=color] { width: 56px; height: 40px; padding: 2px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); cursor: pointer; }
.design-color input.narrow { width: 7.5em; min-height: 40px; padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font: inherit; font-family: ui-monospace, Menlo, monospace; }
.tone-list, .font-list { display: grid; gap: var(--space-2); }
.tone-list { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.tone, .font { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; min-height: var(--touch); }
.tone:has(input:checked), .font:has(input:checked) { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); background: var(--color-primary-soft); }
.tone input, .font input { margin: 0; flex: none; }
.tone__swatch { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--color-border); flex: none; }
.tone__label { font-size: .85rem; min-width: 0; overflow-wrap: break-word; }
.font { flex-wrap: wrap; }
.font__label { font-size: .9rem; flex: 1 1 auto; }
.font__sample { font-size: 1.05rem; flex: 1 1 100%; padding-left: 26px; }
.banner-thumb { width: 160px; height: 40px; object-fit: cover; border-radius: 4px; vertical-align: middle; border: 1px solid var(--color-border); }
/* Nachtrag 4r: weitere Titelbilder und Schriftgrößen im Erscheinungsbild */
.banner-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.banner-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-2); }
.banner-item__body { flex: 1 1 200px; min-width: 0; }
.banner-item .actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.fs-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
.fs-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px auto; align-items: center; gap: var(--space-2); }
.fs-row input { width: 84px; }
.fs-row__label { font-size: .92rem; }
.design-side { display: flex; flex-direction: column; gap: var(--space-3); align-items: center; position: sticky; top: calc(var(--topbar-h) + var(--space-4)); }
.phone { --p-primary: #1f5f8b; --p-primary-contrast: #fff; --p-header: #1f5f8b; --p-bg: #f6f7f9; --p-text: #1b1f24; --p-font: inherit; width: 260px; border: 10px solid #20242b; border-radius: 28px; background: #20242b; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.phone__screen { background: var(--p-bg); color: var(--p-text); font-family: var(--p-font); border-radius: 18px; padding: 10px; min-height: 420px; overflow: hidden; -webkit-hyphens: auto; hyphens: auto; }
.phone__card { background: #fff; border-radius: 8px; overflow: hidden; padding: 0 10px 10px; }
.phone__banner { display: block; width: calc(100% + 20px); margin: 0 -10px 8px; aspect-ratio: 4 / 1; object-fit: cover; }
.phone__bar { height: 7px; background: var(--p-header); margin: 0 -10px 8px; }
.phone__title { font-weight: 700; font-size: .95rem; margin: 0 0 6px; }
.phone__progress { height: 8px; border: 1px solid #d9dee6; border-radius: 999px; margin-bottom: 10px; overflow: hidden; }
.phone__progress span { display: block; height: 100%; width: 35%; background: var(--p-primary); }
.phone__q { font-weight: 600; font-size: .85rem; margin: 0 0 6px; }
.phone__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.phone__choice { border: 1px solid #d9dee6; border-radius: 6px; padding: 6px 4px; font-size: .72rem; text-align: center; }
.phone__choice--on { border-color: var(--p-primary); box-shadow: inset 0 0 0 1px var(--p-primary); background: color-mix(in srgb, var(--p-primary) 8%, #fff); }
.phone__nav { display: flex; justify-content: flex-end; margin-top: 12px; }
.phone__btn { background: var(--p-primary); color: var(--p-primary-contrast); border-radius: 6px; padding: 7px 16px; font-size: .8rem; font-weight: 600; }
@media (max-width: 760px) { .design-grid { grid-template-columns: 1fr; } .design-side { position: static; } }
.split-plan { padding-left: var(--space-5); } .split-plan li { margin-bottom: var(--space-2); } .split-plan__over { color: var(--color-error); }
.measure-frame { position: fixed; left: 0; top: 0; border: 0; opacity: 0; pointer-events: none; z-index: -1; }

/* Nachtrag 4c: Blättern zwischen Items einer Skala/Dimension (Itemansicht) */
.item-nav { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.item-nav__pos { flex: 1; min-width: 12rem; }
.btn--disabled { opacity: .45; pointer-events: none; }
.backlink { margin: 0 0 var(--space-3); }
.backlink a { text-decoration: none; color: var(--color-muted); font-size: .9rem; }
.backlink a:hover { color: var(--color-primary); text-decoration: underline; }

/* Nachtrag 4c: Itemauswahl „Items aus dem Pool“ als Tabelle mit festen Spaltenbreiten und gleich hohen Zeilen */
.pick-wrap { max-height: 52vh; overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius); }
.pick-table { table-layout: fixed; width: 100%; border-collapse: separate; border-spacing: 0; } /* getrennte Rahmen: keine halben Pixel aus geteilten Rahmen → gleich hohe Zeilen */
.pick-table thead th { position: sticky; top: 0; background: var(--color-surface-2); z-index: 1; white-space: normal; line-height: 1.2; }
.pick-table th, .pick-table td { padding-left: var(--space-2); padding-right: var(--space-2); }
.pick-table th:nth-child(1), .pick-table td:nth-child(1) { width: 34px; text-align: center; padding: 0; }
.pick-table th:nth-child(2), .pick-table td:nth-child(2) { width: 13%; }
.pick-table th:nth-child(3), .pick-table td:nth-child(3) { width: 14%; }
.pick-table th:nth-child(5), .pick-table td:nth-child(5) { width: 14%; }
.pick-table th:nth-child(6), .pick-table td:nth-child(6) { width: 15%; }
.pick-table th:nth-child(7), .pick-table td:nth-child(7) { width: 11%; }
.pick-table td { height: 64px; vertical-align: middle; padding-top: 4px; padding-bottom: 4px; line-height: 1.3; cursor: pointer; font-size: .92rem; white-space: normal; }
.pick-table td.pick-key { line-height: 1.2; }
.pick-table tbody tr:last-child td { border-bottom: 1px solid var(--color-border); } /* gleiche Zeilenhöhen (Messung im Test) */
.pick-table tr.is-chosen td { background: var(--color-primary-soft); }
.pick-table .clamp1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-table .clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; max-height: 2.6em; }
.pick-table .tag { font-size: .72rem; white-space: nowrap; }
.pick-table input[type=checkbox] { width: 18px; height: 18px; }
.filters--compact .field { flex: 1 1 10rem; min-width: 9rem; }

/* Nachtrag 4c: Geräte-Vorschau (PC / Tablet / Handy) */
.device-toolbar { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-2); }
.device-bar { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.device-bar .btn[aria-pressed="true"] { background: var(--color-primary); color: var(--color-primary-contrast); border-color: var(--color-primary); }
.device-stage { position: relative; display: flex; justify-content: center; align-items: flex-start; overflow: hidden; padding: var(--space-2) 0; }
.device-frame { position: absolute; top: var(--space-2); background: #1d2126; border-radius: 28px; padding: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.device-frame--desktop { border-radius: 10px; padding: 10px 10px 18px; }
.device-frame--tablet { border-radius: 22px; padding: 18px; }
.device-frame--phone { border-radius: 36px; padding: 14px 10px 18px; }
.device-frame__screen { background: #fff; overflow: hidden; border-radius: 6px; }
.device-frame--phone .device-frame__screen { border-radius: 22px; }
.device-frame--tablet .device-frame__screen { border-radius: 10px; }
.device-frame__view { display: block; border: 0; background: #fff; }

/* ---- Sprint 4d: Übersetzungen und Erkennungsemoji (Verwaltung) ---- */
.emoji-badge { display: inline-block; font-size: 1.15em; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif; }
.translations-wrap { margin-top: var(--space-4); }
.translation { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3) var(--space-3); margin: 0 0 var(--space-3); }
.translation legend { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2); }
.translation .field { margin-bottom: var(--space-2); }
.translation textarea, .translation input { width: 100%; }
.translation[lang="fa"] textarea, .translation[lang="fa"] input, .translation[lang="ar"] textarea, .translation[lang="ar"] input { direction: rtl; text-align: right; }
.field--tr label { font-size: .9rem; }
.label-like { display: block; font-weight: 600; margin-bottom: var(--space-1); }
.checklist--inline { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.table--translations td { vertical-align: top; white-space: normal; }
.table--translations .tr-label { width: 22%; }
.table--translations .tr-source { width: 36%; white-space: pre-wrap; }
.table--translations .tr-target textarea { width: 100%; min-height: 2.4em; font: inherit; padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); }
.table--translations .tr-target textarea[dir="rtl"] { text-align: right; }
.table--translations .tr-missing .tr-target textarea { border-color: #e3c25a; background: var(--color-warn-bg); }
.table--translations .tr-dirty .tr-target textarea { border-color: var(--color-primary); }
.table--translations .tr-section th { background: var(--color-surface-2); text-align: left; font-weight: 700; text-transform: none; letter-spacing: 0; font-size: .9rem; color: var(--color-text); }
/* Sprint 4e: Mehrfachauswahl im Itempool */
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); background: var(--color-primary-soft); border: 1px solid var(--color-primary-soft-2); border-radius: var(--radius); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.bulk-bar[hidden] { display: none; }
.error-text { color: var(--color-error); }

/* Übersichtsseite (Kacheln) */
.stat-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-bottom: var(--space-5); }
.stat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; display: block; }
.stat:hover { border-color: var(--color-primary); }
.stat__value { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.stat__label { color: var(--color-muted); font-size: .9rem; margin-top: 2px; }

/* ---- Etappen und Motivation (Sprint 4h) ---- */
.pagelist__stage { display: flex; align-items: center; gap: var(--space-1); margin: var(--space-2) 0 2px; padding: 0 var(--space-2); font-size: .78rem; font-weight: 600; color: var(--color-muted); text-transform: none; letter-spacing: .01em; }
.pagelist__stage .icon { width: 14px; height: 14px; }
.pagelist li.pagelist__stage { min-height: 0; }
.notice--motivation { background: var(--color-surface); border-color: var(--color-border); border-left-color: var(--color-border-strong); }
.stage-rows__row { display: grid; grid-template-columns: auto auto minmax(140px, 2fr) minmax(150px, 1.4fr) auto; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }
.stage-rows__row input, .stage-rows__row select, .stage-rows__row textarea { min-height: 36px; padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font: inherit; width: 100%; background: var(--color-surface); color: var(--color-text); min-width: 0; }
.stage-rows__no { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; height: 1.6em; background: var(--color-border); border-radius: 999px; font-size: .8rem; }
.stage-rows__iconwrap { display: inline-flex; align-items: center; gap: var(--space-1); }
.stage-rows__iconwrap select { width: auto; max-width: 150px; }
.stage-rows__icon { display: inline-flex; width: 28px; height: 28px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); align-items: center; justify-content: center; flex: none; }
.stage-rows__icon .icon { width: 16px; height: 16px; }
.stage-rows__text { grid-column: 1 / -1; resize: vertical; }
@media (max-width: 760px) { .stage-rows__row { grid-template-columns: auto 1fr auto; } .stage-rows__row > input { grid-column: 1 / -1; } .stage-rows__row > select { grid-column: 1 / 3; } }
.process-table .bar { height: 8px; background: var(--color-primary-soft-2); border-radius: 4px; overflow: hidden; min-width: 60px; }
.process-table .bar > span { display: block; height: 100%; background: var(--color-warn); }
.process-table .bar--time > span { background: var(--color-primary); }

/* ---- Rich-Text-Editor (Nachtrag 4i): Werkzeugleiste + contenteditable; Farben folgen dem Erscheinungsbild der Umfrage ---- */
.field--rich { --rt-theme: var(--color-primary); --rt-theme-dark: var(--color-primary-hover, #1e40af); }
.rt-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border: 1px solid var(--color-border); border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--color-surface-2); }
.rt-tb { min-width: 34px; height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--color-text); font: inherit; font-size: .85rem; cursor: pointer; line-height: 1; }
.rt-tb:hover { background: var(--color-surface); border-color: var(--color-border); }
.rt-tb[aria-pressed="true"] { background: var(--color-surface); border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.rt-tb:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.rt-tb:disabled { opacity: .45; cursor: default; }
.rt-tb--bold { font-weight: 800; }
.rt-tb--italic { font-style: italic; }
.rt-tb--color { font-weight: 700; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 3px; }
.rt-tb--color.rt-color-default { color: var(--color-text); }
.rt-sep { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--color-border); }
.rt-editor { min-height: 6em; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: var(--color-surface); color: var(--color-text); line-height: 1.5; overflow-wrap: anywhere; }
.rt-editor:focus { outline: 2px solid var(--color-primary); outline-offset: -1px; }
.rt-editor--disabled { background: var(--color-surface-2); color: var(--color-muted); }
.rt-editor p { margin: 0 0 .5em; }
.rt-editor h1, .rt-editor h2 { margin: .2em 0 .4em; line-height: 1.3; }
.rt-editor h1 { font-size: 1.35rem; font-weight: 700; }
.rt-editor h2 { font-size: 1.12rem; font-weight: 700; }
.rt-editor > :last-child { margin-bottom: 0; }
.rt-center { text-align: center; }
.rt-justify { text-align: justify; }
.rt-color-theme { color: var(--rt-theme, var(--color-primary)); }
.rt-color-theme-dark { color: var(--rt-theme-dark, var(--color-primary-hover)); }
.rt-color-muted { color: var(--color-muted); }
.rt-source { display: none; }
/* Vorschau gespeicherter Rich-Texte (Bausteinliste, Dialoge) */
.rt-preview { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); max-height: 200px; overflow: auto; }
.rt-preview p { margin: 0 0 .5em; }
.rt-preview > :last-child { margin-bottom: 0; }
.rt-preview h1, .rt-preview h2 { margin: .2em 0 .4em; line-height: 1.3; }
.rt-preview h1 { font-size: 1.2rem; }
.rt-preview h2 { font-size: 1.05rem; }
.field--rich-compact { margin: 0; }
.field--rich-compact .rt-editor { min-height: 3.5em; }
.table--translations .tr-source .rt-preview { max-height: none; background: transparent; border: 0; padding: 0; }
.field--rich-compact .rt-tb { min-width: 28px; padding: 0 5px; }
.stack--after:not(:empty) { margin-top: var(--space-4); }
.field-actions { margin-top: var(--space-2); }
.field-actions--row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0 0 var(--space-3); }
.field-actions--row select { flex: 1 1 260px; }

/* ---- Emoji-Auswahl (Nachtrag 4j) ---- */
.emoji-row { display: flex; align-items: center; gap: var(--space-2); }
.emoji-row .emoji-input { flex: 0 1 140px; min-width: 90px; }
.emoji-preview { min-width: 2.2rem; text-align: center; font-size: 1.6rem; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.emoji-preview:empty { display: none; }
.dialog--emoji { width: min(680px, 96vw); }
.emoji-search { width: 100%; min-height: 42px; padding: 0 var(--space-3); border: 1px solid var(--color-border-strong); border-radius: 999px; font: inherit; font-size: 1rem; margin-bottom: var(--space-2); }
.emoji-search:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft-2); }
.emoji-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--space-2); }
.emoji-tab { width: 40px; height: 36px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-size: 1.25rem; line-height: 1; cursor: pointer; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.emoji-tab:hover, .emoji-tab:focus-visible { border-color: var(--color-primary); outline: none; background: var(--color-primary-soft); }
.emoji-status { margin: 0 0 var(--space-2); }
.emoji-scroll { max-height: min(52vh, 480px); overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-2); background: var(--color-surface-2); }
.dialog-body .emoji-section__title { font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: var(--color-muted); margin: var(--space-2) 0 var(--space-1); position: sticky; top: -8px; background: var(--color-surface-2); padding: 4px 0; z-index: 1; }
.dialog-body .emoji-section:first-child .emoji-section__title { margin-top: 0; }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; }
.emoji-btn { height: 44px; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--color-surface); font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.emoji-btn:hover { border-color: var(--color-border-strong); background: var(--color-primary-soft); }
.emoji-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.emoji-btn--current { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
/* Nachtrag 4k: Seiten auswählen und löschen */
.pagelist__check { width: 18px; height: 18px; margin: 0 var(--space-1) 0 var(--space-2); flex: none; accent-color: var(--color-primary); }
.pagelist li.checked { background: var(--color-error-bg, #fef2f2); }
.pagelist__bulk { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2); margin-bottom: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-2); }
.pagelist__bulk .actions { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.actions--wrap { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Pool-Abgleich (Nachtrag 4s): Herkunft und Kopplung an den Itempool */
.tag--pool { border-color: #bbf7d0; background: var(--color-success-bg); color: #166534; }
.tag--pool-detached { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.pool-bound { border: 1px solid #bbf7d0; border-left: 4px solid var(--color-success); background: var(--color-success-bg); border-radius: var(--radius); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.pool-bound--detached { border-color: #fde68a; border-left-color: #d97706; background: #fffbeb; }
.pool-bound p { margin: 0 0 var(--space-1); }
.pool-bound .help { margin-top: var(--space-1); }
.pool-bound__preview { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-2); margin: var(--space-2) 0; }
.pool-bound__preview .rt-preview { margin-top: var(--space-1); }
.pool-bound .actions { margin-top: var(--space-1); }

/* Etappenfarbe (Nachtrag 4t): Vorschau im Etappen-Dialog und in der Seitenleiste */
.pagelist__stage { color: var(--stage-color, var(--color-muted)); }
.stage-rows__icon { background: color-mix(in srgb, var(--stage-color, var(--color-primary)) 14%, var(--color-surface)); color: var(--stage-color, var(--color-primary)); }
.stage-rows__extra { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; }
.stage-rows__color { display: inline-flex; align-items: center; gap: var(--space-2); }
.stage-rows__row .stage-rows__color input[type=color] { width: 44px; min-height: 32px; padding: 2px; cursor: pointer; }
.stage-rows__banner { display: inline-flex; align-items: center; gap: var(--space-2); flex: 1 1 260px; }
.stage-rows__row .stage-rows__banner select { width: auto; flex: 1 1 auto; }