/* ============================================================
   Piazza Studio Components — Storybook chrome
   Sidebar (left) + content area + top bar + story card frame.
   Studio-Software-Look: nutzt ausschließlich --ps--* Tokens
   (styles/studio-tokens.css) — bewusst getrennt vom Website-Theming
   (--mp-*), das der Nutzer über Tweaks/Export verändert.
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--ps--bg-soft);
  color: var(--ps--fg);
  font-family: var(--ps--font-sans);
  min-height: 100vh;
}

button { font-family: inherit; }

/* ---- App shell ---- */

.cp-app {
  display: grid;
  grid-template-columns: 256px 1fr;
  min-height: 100vh;
  --cp-chrome-h: 64px;
}
.cp-app.cp-app--withSub {
  grid-template-columns: 256px 256px 1fr;
}

/* ---- Sidebar ---- */

.cp-side {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ps--neutral-0);
  border-right: 1px solid var(--ps--border);
  overflow: hidden;
}

.cp-side__brand {
  display: flex;
  align-items: center;
  gap: var(--ps--space-3);
  height: var(--cp-chrome-h);
  padding: 0 var(--ps--space-5);
  border-bottom: 1px solid var(--ps--border);
  box-sizing: border-box;
}
.cp-side__brand img { height: 22px; display: block; }
.cp-side__brand .cp-side__logo { width: 100%; height: auto; }

.cp-side__nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--ps--space-3) var(--ps--space-3) var(--ps--space-6);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cp-side__item {
  display: flex;
  align-items: center;
  gap: var(--ps--space-3);
  width: 100%;
  padding: var(--ps--space-2) var(--ps--space-3);
  border-radius: var(--ps--radius-sm);
  background: transparent;
  border: 0;
  color: var(--ps--fg);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background var(--ps--duration-fast) var(--ps--ease-standard),
              color var(--ps--duration-fast) var(--ps--ease-standard);
}
.cp-side__item:hover {
  background: var(--ps--bg-soft);
  color: var(--ps--fg);
}
.cp-side__item.is-active {
  background: var(--ps--bg-inverse);   /* Tiefgrün #004431 — aktiver Menüpunkt */
  color: var(--ps--neutral-0);
}

/* ---- Sub-Navigation (Master-Detail right column) ---- */
.cp-subnav {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ps--bg-soft);
  border-right: 1px solid var(--ps--border);
  overflow: hidden;
}
.cp-subnav__head {
  display: flex;
  align-items: center;
  gap: var(--ps--space-3);
  height: var(--cp-chrome-h);
  padding: 0 var(--ps--space-5);
  border-bottom: 1px solid var(--ps--border);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ps--fg);
  box-sizing: border-box;
}
.cp-subnav__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--ps--space-3) var(--ps--space-3) var(--ps--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--ps--space-4);
}
.cp-subnav__group {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cp-subnav__groupTitle {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ps--tracking-caps);
  color: var(--ps--fg-subtle);
  padding: 0 var(--ps--space-3);
  margin-bottom: var(--ps--space-2);
}
.cp-subnav__item {
  display: flex;
  align-items: center;
  gap: var(--ps--space-3);
  width: 100%;
  padding: var(--ps--space-2) var(--ps--space-3);
  border-radius: var(--ps--radius-sm);
  background: transparent;
  border: 0;
  color: var(--ps--fg);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background var(--ps--duration-fast) var(--ps--ease-standard),
              color var(--ps--duration-fast) var(--ps--ease-standard);
}
.cp-subnav__item:hover {
  background: var(--ps--neutral-0);
  color: var(--ps--fg);
}
/* Auswahl-Zustand: siehe shell.css, Abschnitt „Auswahl-Zustand“ (eine Quelle). */
.cp-subnav__item.is-active .cp-subnav__count {
  background: color-mix(in srgb, var(--ps--primary) 12%, transparent);
  color: var(--ps--primary);
}
.cp-subnav__count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--ps--radius-pill);
  background: var(--ps--neutral-0);
  color: var(--ps--fg-muted);
  font-variant-numeric: tabular-nums;
}
/* Hinweis-Icon: Komponente beherrscht mehrere Spalten-Layouts. Sitzt hinter
   der Variantenzahl. `margin-left:auto` am Count schiebt beide nach rechts. */
.cp-subnav__colsIcon {
  flex-shrink: 0;
  color: var(--ps--primary);
  opacity: 0.65;
}
.cp-subnav__item:hover .cp-subnav__colsIcon,
.cp-subnav__item.is-active .cp-subnav__colsIcon { opacity: 1; }

.cp-side__foot {
  padding: var(--ps--space-3) var(--ps--space-4);
  border-top: 1px solid var(--ps--border);
}

/* Version chip — opens the changelog modal */
.cp-version {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--ps--space-2);
  padding: var(--ps--space-2) var(--ps--space-3);
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-sm);
  background: var(--ps--neutral-0);
  color: var(--ps--fg-muted);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color var(--ps--duration-fast), color var(--ps--duration-fast), background var(--ps--duration-fast);
}
.cp-version:hover {
  border-color: var(--ps--border-strong);
  color: var(--ps--fg);
  background: var(--ps--bg-soft);
}
.cp-version__num {
  font-family: var(--ps--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ps--fg);
}
.cp-version__label {
  flex: 1;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--ps--tracking-caps);
}
.cp-version i { flex-shrink: 0; opacity: 0.7; }

/* Changelog modal */
.cp-modal--changelog { max-width: 560px; }
.cp-changelog {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ps--space-5);
}
.cp-changelog__item {
  position: relative;
  padding-left: var(--ps--space-5);
}
.cp-changelog__item::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ps--border-strong);
}
.cp-changelog__item.is-current::before { background: var(--ps--primary); }
.cp-changelog__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 16px;
  bottom: calc(var(--ps--space-5) * -1);
  width: 1px;
  background: var(--ps--border);
}
.cp-changelog__meta {
  display: flex;
  align-items: center;
  gap: var(--ps--space-2);
  margin-bottom: 2px;
}
.cp-changelog__ver {
  font-family: var(--ps--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ps--fg);
}
.cp-changelog__badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ps--tracking-caps);
  color: var(--ps--primary);
  background: var(--ps--primary-soft);
  border: 1px solid var(--ps--primary);
  border-radius: 999px;
  padding: 1px 8px;
}
.cp-changelog__date {
  margin-left: auto;
  font-size: 11px;
  color: var(--ps--fg-subtle);
  font-family: var(--ps--font-mono);
}
.cp-changelog__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ps--fg);
  margin-bottom: var(--ps--space-2);
}
.cp-changelog__changes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cp-changelog__changes li {
  position: relative;
  padding-left: var(--ps--space-3);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ps--fg-muted);
}
.cp-changelog__changes li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--ps--fg-subtle);
}
/* Changelog pager — sits in the modal foot, lets you page through the
   full history (newest first). */
.cp-changelog__pager { justify-content: space-between; align-items: center; }
.cp-changelog__pageInfo {
  font-size: 12px;
  font-weight: 700;
  color: var(--ps--fg-muted);
  font-variant-numeric: tabular-nums;
}

/* ---- Main column ---- */

.cp-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Buttons der Builder-Bühnen-Toolbar (stories/builder.jsx · bd-toolbar). */
.cp-top__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ps--space-2);
  height: 36px;
  padding: 0 var(--ps--space-4);
  border: 1px solid var(--ps--border-strong);
  background: var(--ps--neutral-0);
  border-radius: var(--ps--radius-sm);
  font-size: 13px;
  font-weight: 700;
  color: var(--ps--fg);
  cursor: pointer;
  transition: border-color var(--ps--duration-fast), background var(--ps--duration-fast);
}
.cp-top__btn:hover { border-color: var(--ps--fg); }
.cp-top__btn i[data-lucide] { width: 14px; height: 14px; }

.cp-top__btn--primary {
  background: var(--ps--primary);
  border-color: var(--ps--primary);
  color: var(--ps--primary-fg);
}
.cp-top__btn--primary:hover {
  background: var(--ps--primary-hover);
  border-color: var(--ps--primary-hover);
}

/* ---- Viewport switch (segmented control) ---- */
.cp-vp-switch {
  display: inline-flex;
  align-items: center;
  background: var(--ps--bg-soft);
  border: 1px solid var(--ps--border-strong);
  border-radius: var(--ps--radius-sm);
  padding: 2px;
  gap: 2px;
  height: 36px;
  box-sizing: border-box;
}
.cp-vp-switch__btn {
  width: 36px;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--ps--fg-muted);
  cursor: pointer;
  transition: background var(--ps--duration-fast), color var(--ps--duration-fast), box-shadow var(--ps--duration-fast);
}
.cp-vp-switch__btn:hover { color: var(--ps--fg); }
.cp-vp-switch__btn.is-active {
  background: var(--ps--neutral-0);
  color: var(--ps--primary);
  box-shadow: 0 1px 2px rgba(31, 71, 60, 0.12);
}
/* Variante mit Text-Label (Builder-Modus „Design | Inhalt"). */
.cp-vp-switch__btn--label {
  width: auto;
  padding: 0 10px;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
}

/* ---- Confirm dialog variant ---- */
.cp-modal--confirm { max-width: 440px; }
.cp-modal--confirm.is-danger .cp-modal__title { color: var(--ps--danger); }
/* Danger folgt dem kanonischen Studio-Button-Look (shell.css „Studio-Chrome-
   Buttons"): 40px / Radius 9px / fette 14px-Beschriftung; wie der grüne
   Primär-Button trägt auch der rote den dezenten Glow. */
.cp-btn--danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ps--space-2);
  height: 40px;
  padding: 0 18px;
  font-family: var(--ps--font-sans);
  font-size: 14px;
  font-weight: 700;
  border-radius: 9px;
  border: 1px solid transparent;
  background: var(--ps--danger);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.28);
  transition: background var(--ps--duration-fast), transform var(--ps--duration-fast);
}
.cp-btn--danger:hover { background: color-mix(in srgb, var(--ps--danger) 85%, #000); }
.cp-btn--danger:active { transform: translateY(1px); }
.cp-btn--danger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ps--danger) 35%, transparent);
}

/* ---- Modal ---- */
.cp-modal__back {
  position: fixed;
  inset: 0;
  background: rgba(10, 21, 48, 0.55);
  backdrop-filter: blur(2px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ps--space-5);
  animation: cp-modal-fade .14s ease;
}
@keyframes cp-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.cp-modal {
  width: 100%;
  max-width: 480px;
  background: var(--ps--neutral-0);
  border-radius: var(--ps--radius-md);
  box-shadow: var(--ps--shadow-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: cp-modal-slide .18s var(--ps--ease-out);
}
@keyframes cp-modal-slide {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cp-modal__head {
  padding: var(--ps--space-5) var(--ps--space-5) var(--ps--space-4);
  border-bottom: 1px solid var(--ps--border);
}
.cp-modal__title {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ps--fg);
}
.cp-modal__sub {
  margin: var(--ps--space-2) 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ps--fg-muted);
}
.cp-modal__body {
  padding: var(--ps--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--ps--space-4);
}
.cp-modal__field {
  display: flex;
  flex-direction: column;
  gap: var(--ps--space-2);
}
.cp-modal__field > span {
  font-size: 13px;
  font-weight: 700;
  color: var(--ps--fg);
}
.cp-modal__field > span em {
  color: var(--ps--danger);
  font-style: normal;
  font-weight: 700;
}
/* Eingabefelder eines Formularfeldes — Text, Zahl und Auswahl sehen gleich aus.
   `select` gehört bewusst in DIESE Regel und bekommt kein eigenes Styling pro
   Ansicht (siehe „Unified studio-chrome UI" in AGENTS.md). Mehrzeilige Felder
   haben mit `.pp-textarea` eine eigene, hier absichtlich nicht angetastete Klasse. */
.cp-modal__field input,
.cp-modal__field select {
  height: 40px;
  padding: 0 var(--ps--space-3);
  border: 1px solid var(--ps--border-strong);
  border-radius: var(--ps--radius-sm);
  font: 400 14px var(--ps--font-sans);
  color: var(--ps--fg);
  background: var(--ps--neutral-0);
  outline: none;
  transition: border-color var(--ps--duration-fast), box-shadow var(--ps--duration-fast);
}
.cp-modal__field select {
  cursor: pointer;
  /* Pfeil bleibt der des Systems — er folgt damit auch im Dunkelmodus der
     Textfarbe, was ein eingebettetes SVG (kein currentColor) nicht könnte. */
  padding-right: var(--ps--space-2);
}
.cp-modal__field input:focus,
.cp-modal__field select:focus {
  border-color: var(--ps--primary);
  box-shadow: 0 0 0 3px var(--ps--focus-ring);
}
/* Platzhalter müssen als Platzhalter LESBAR sein: Ohne eigene Farbe erbt Chromium
   fast die Textfarbe — ein leeres Feld sah dann aus, als stünde etwas drin (im
   Browser-Screenshot der globalen Einstellungen aufgefallen). */
.cp-modal__field input::placeholder,
.cp-modal__field textarea::placeholder,
.pp-textarea::placeholder {
  color: var(--ps--fg-subtle);
  opacity: 1; /* Firefox dämpft Platzhalter zusätzlich */
}
/* Anzeige-Wert in einem Formularfeld (kein Eingabefeld): gleiche Grundfläche wie
   input/select, aber ohne Rahmen und ohne Bedien-Anmutung — nichts zum Tippen. */
.ps-readout {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 40px;
  justify-content: center;
  font: 400 14px var(--ps--font-sans);
  color: var(--ps--fg);
}
.ps-readout strong { font-weight: 700; }
.ps-readout__sub { font-size: 12.5px; color: var(--ps--fg-muted); }

.cp-modal__field input:disabled,
.cp-modal__field select:disabled {
  color: var(--ps--fg-muted);
  background: var(--ps--bg-soft);
  cursor: not-allowed;
}
.cp-modal__foot {
  padding: var(--ps--space-4) var(--ps--space-5);
  border-top: 1px solid var(--ps--border);
  display: flex;
  justify-content: flex-end;
  gap: var(--ps--space-2);
  background: var(--ps--bg-soft);
}

/* Properties modal — wider, scrollable body, with a close (X) button */
.cp-modal--props {
  max-width: 720px;
  max-height: calc(100vh - var(--ps--space-7));
}
/* Schließen-Knopf gehört oben RECHTS — in JEDEM Modal, nicht nur im
   Eigenschaften-Dialog, an dem diese Regel bis v0.170.0 hing (dort als
   `.cp-modal--props .cp-modal__head`). Überall sonst fiel das X unter den Text.

   Die Bedingung ist bewusst `:has(> .cp-modal__close)` und nicht einfach
   `.cp-modal__head`: Köpfe OHNE Knopf (Bestätigen-Dialog, Benutzer anlegen,
   Neue Collection, Dynamische Seite …) tragen Titel und Untertitel als direkte
   Kinder — ein pauschales display:flex würde die nebeneinander legen. */
.cp-modal__head:has(> .cp-modal__close) {
  display: flex;
  align-items: flex-start;
  gap: var(--ps--space-4);
}
.cp-modal__head:has(> .cp-modal__close) > div { flex: 1; min-width: 0; }
.cp-modal--props .cp-modal__body {
  overflow-y: auto;
  max-height: calc(100vh - 240px);
}
.cp-modal__eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ps--tracking-caps);
  color: var(--ps--fg-subtle);
  margin-bottom: 4px;
}
.cp-modal__close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-sm);
  background: var(--ps--neutral-0);
  color: var(--ps--fg-muted);
  cursor: pointer;
  transition: color var(--ps--duration-fast), border-color var(--ps--duration-fast);
}
.cp-modal__close:hover { color: var(--ps--fg); border-color: var(--ps--border-strong); }

/* ---- Icon-Button + Lucide picker ---- */
.bx-iconbtn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ps--space-2);
}
.bx-iconbtn__token {
  font-family: var(--ps--font-mono);
  font-size: 11px;
  color: var(--ps--fg-subtle);
  letter-spacing: 0.04em;
}
.bx-iconbtn__pop {
  position: absolute;
  top: calc(100% + var(--ps--space-3));
  left: 50%;
  transform: translateX(-50%);
  width: 360px;
  max-width: 90vw;
  background: var(--ps--neutral-0);
  border: 1px solid var(--ps--border-strong);
  border-radius: var(--ps--radius-md);
  box-shadow: var(--ps--shadow-lg);
  z-index: 60;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.bx-iconbtn__head {
  padding: var(--ps--space-3);
  border-bottom: 1px solid var(--ps--border);
  display: flex;
  align-items: center;
  gap: var(--ps--space-2);
  background: var(--ps--bg-soft);
}
.bx-iconbtn__search {
  flex: 1;
  height: 32px;
  padding: 0 var(--ps--space-3);
  border: 1px solid var(--ps--border-strong);
  border-radius: var(--ps--radius-sm);
  background: var(--ps--neutral-0);
  font: 400 13px var(--ps--font-sans);
  outline: none;
  color: var(--ps--fg);
}
.bx-iconbtn__search:focus {
  border-color: var(--ps--primary);
  box-shadow: 0 0 0 3px var(--ps--focus-ring);
}
.bx-iconbtn__count {
  font-family: var(--ps--font-mono);
  font-size: 11px;
  color: var(--ps--fg-muted);
  padding: 0 var(--ps--space-2);
  font-variant-numeric: tabular-nums;
}
.bx-iconbtn__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: var(--ps--space-3);
  max-height: 280px;
  overflow-y: auto;
}
.bx-iconbtn__cell {
  width: 100%;
  aspect-ratio: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ps--radius-sm);
  color: var(--ps--fg);
  cursor: pointer;
  transition: background var(--ps--duration-fast), border-color var(--ps--duration-fast), color var(--ps--duration-fast);
}
.bx-iconbtn__cell:hover {
  background: var(--ps--bg-soft);
  color: var(--ps--primary);
}
.bx-iconbtn__cell.is-active {
  background: color-mix(in srgb, var(--ps--primary) 12%, var(--ps--neutral-0));
  border-color: var(--ps--primary);
  color: var(--ps--primary);
}
.bx-iconbtn__cell i[data-lucide] { width: 18px; height: 18px; }
.bx-iconbtn__empty {
  grid-column: 1 / -1;
  padding: var(--ps--space-5);
  text-align: center;
  color: var(--ps--fg-muted);
  font-size: 13px;
}
.bx-iconbtn__foot {
  padding: var(--ps--space-2) var(--ps--space-3);
  border-top: 1px solid var(--ps--border);
  background: var(--ps--bg-soft);
  font-size: 11px;
  font-family: var(--ps--font-mono);
  color: var(--ps--fg-subtle);
  text-align: center;
}

/* ---- Story page ---- */

.cp-page {
  padding: var(--ps--space-7) var(--ps--space-7) var(--ps--space-10);
  max-width: 1280px;
  width: 100%;
}

.cp-page__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ps--space-5);
  padding-bottom: var(--ps--space-6);
  border-bottom: 1px solid var(--ps--border);
  margin-bottom: var(--ps--space-7);
}
.cp-page__title h1 {
  font-family: var(--ps--font-sans);
  text-transform: none;
  font-weight: 900;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}
/* Chrome-Eyebrow (Studio-Software, --ps--) — getrennt von der Theming-Klasse
   .mp-eyebrow, die nur noch in den Komponenten-/Baustein-Vorschauen lebt. */
.cp-eyebrow {
  font-family: var(--ps--font-sans);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  letter-spacing: var(--ps--tracking-caps);
  text-transform: uppercase;
  color: var(--ps--primary);
}
.cp-page__title .cp-eyebrow {
  display: block;
  margin-bottom: var(--ps--space-3);
}
.cp-page__desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ps--fg-muted);
  max-width: 56ch;
  margin: var(--ps--space-3) 0 0;
  text-wrap: pretty;
}
.cp-page__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ps--space-2);
  margin-top: var(--ps--space-3);
}
.cp-page__variants {
  margin: var(--ps--space-3) 0 0;
  font-size: 13px;
  color: var(--ps--fg-muted);
}
.cp-page__variants-label { font-weight: 700; color: var(--ps--fg-subtle); }
/* Medien-fähig-Chip unter dem Beschreibungstext einer Komponenten-Seite. */
.cp-mediachip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: var(--ps--space-3) 0 0;
  padding: 5px 11px 5px 9px;
  background: color-mix(in srgb, var(--ps--primary) 9%, var(--ps--neutral-0));
  border: 1px solid color-mix(in srgb, var(--ps--primary) 32%, transparent);
  border-radius: var(--ps--radius-pill);
  font: 600 12px var(--ps--font-sans);
  color: var(--ps--fg);
}
.cp-mediachip svg, .cp-mediachip i { width: 14px; height: 14px; color: var(--ps--primary); }
/* Mini-Label „Medien-Slot" über dem Bild auf der Text|Media-Seite. */
.cp-mediaslot-note {
  position: absolute;
  top: var(--ps--space-2);
  left: var(--ps--space-2);
  z-index: 2;
  padding: 3px 8px;
  background: color-mix(in srgb, var(--ps--primary) 88%, #000);
  color: #fff;
  font: 700 9px var(--ps--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--ps--radius-pill);
}

/* ---- Projekt-Einstellungen-Dialog ---- */
.cp-modal--settings {
  max-width: 640px;
  max-height: calc(100vh - var(--ps--space-7));
}
.cp-modal--settings .cp-modal__body {
  overflow-y: auto;
  max-height: calc(100vh - 230px);
  gap: var(--ps--space-6);
}
.cp-set__section { display: flex; flex-direction: column; gap: var(--ps--space-4); }
.cp-set__section + .cp-set__section { padding-top: var(--ps--space-5); border-top: 1px solid var(--ps--border); }
.cp-set__title {
  display: flex; align-items: center; gap: var(--ps--space-2);
  margin: 0; font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: var(--ps--tracking-caps);
  color: var(--ps--fg);
}
.cp-set__title i[data-lucide], .cp-set__title svg { width: 15px; height: 15px; color: var(--ps--primary); }
.cp-set__hint { font-size: 12px; line-height: 1.5; color: var(--ps--fg-muted); }
.cp-set__hint code { font-family: var(--ps--font-mono); font-size: 11px; }
.cp-set__msg { font-size: 12px; font-weight: 600; }
.cp-set__msg--err { color: var(--ps--danger); }
.cp-set__msg--ok { color: var(--ps--success-fg); }
.cp-set__msg--busy { color: var(--ps--fg-muted); }
.cp-set__row { display: flex; gap: var(--ps--space-2); align-items: stretch; }
.cp-set__row input { flex: 1; }
.cp-set__row .bx-btn { flex: 0 0 auto; white-space: nowrap; }
.cp-set__grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--ps--space-3); }
.cp-set__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ps--space-3); }
.cp-set__danger {
  margin-top: var(--ps--space-2);
  padding: var(--ps--space-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--ps--space-4);
  border: 1px solid color-mix(in srgb, var(--ps--danger) 30%, transparent);
  background: color-mix(in srgb, var(--ps--danger) 6%, transparent);
  border-radius: var(--ps--radius-md);
}
.cp-set__dangerText { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cp-set__dangerText strong { font-size: 13px; font-weight: 800; color: var(--ps--danger); }
.cp-set__dangerText span { font-size: 12px; line-height: 1.5; color: var(--ps--fg-muted); }
.cp-set__danger .bx-btn { flex: 0 0 auto; white-space: nowrap; }
.cp-set__field--code input { font-family: var(--ps--font-mono); }
/* Tab-Leiste der Projekt-Einstellungen */
.cp-set__tabs {
  display: flex;
  gap: 2px;
  padding: 0 var(--ps--space-5);
  border-bottom: 1px solid var(--ps--border);
  background: var(--ps--neutral-0);
}
.cp-set__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--ps--space-3) var(--ps--space-3);
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  font: 700 13px var(--ps--font-sans);
  color: var(--ps--fg-muted);
  cursor: pointer;
  transition: color var(--ps--duration-fast), border-color var(--ps--duration-fast);
}
.cp-set__tab:hover { color: var(--ps--fg); }
.cp-set__tab.is-active { color: var(--ps--primary); border-bottom-color: var(--ps--primary); }
.cp-set__tab i[data-lucide], .cp-set__tab svg { width: 14px; height: 14px; }
.cp-page__meta {
  display: flex;
  gap: var(--ps--space-6);
  flex-shrink: 0;
}
.cp-page__metaItem dt {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ps--tracking-caps);
  color: var(--ps--fg-subtle);
}
.cp-page__metaItem dd {
  margin: var(--ps--space-1) 0 0;
  font-family: var(--ps--font-display);
  font-size: 22px;
  color: var(--ps--fg);
}

/* ---- Story card ---- */

.cp-story {
  margin-bottom: var(--ps--space-7);
}
.cp-story__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ps--space-4);
  margin-bottom: var(--ps--space-3);
}
.cp-story__label {
  display: flex;
  align-items: baseline;
  gap: var(--ps--space-3);
}
.cp-story__num {
  font-family: var(--ps--font-mono);
  font-size: 11px;
  color: var(--ps--fg-subtle);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.cp-story__name {
  font-size: 18px;
  font-weight: 700;
  color: var(--ps--fg);
  margin: 0;
}
.cp-story__actions { margin-left: var(--ps--space-2); display: inline-flex; align-items: center; gap: var(--ps--space-1); }
.cp-story__actionBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: var(--ps--bg-soft);
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-sm);
  color: var(--ps--fg-muted);
  cursor: pointer;
  transition: color var(--ps--duration-fast), border-color var(--ps--duration-fast), background var(--ps--duration-fast);
}
.cp-story__actionBtn:hover {
  color: var(--ps--primary);
  border-color: var(--ps--primary);
  background: var(--ps--neutral-0);
}

/* ---- Per-variant on/off switch (Komponenten-Berechtigung pro Projekt) ---- */
/* Sits next to the slider-icon trigger in the story header. Reuses the
   ios-style switch geometry from the form-switch component, but tuned
   smaller so it nests comfortably with the 28px action buttons. */
.cp-vswitch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 10px 0 4px;
  background: var(--ps--bg-soft);
  border: 1px solid var(--ps--border);
  border-radius: 999px;
  color: var(--ps--fg-muted);
  cursor: pointer;
  user-select: none;
  transition: color var(--ps--duration-fast), border-color var(--ps--duration-fast), background var(--ps--duration-fast);
}
.cp-vswitch:hover { border-color: var(--ps--border-strong); }
.cp-vswitch input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.cp-vswitch__track {
  position: relative;
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: var(--ps--neutral-300);
  transition: background var(--ps--duration-fast) var(--ps--ease-standard);
  flex-shrink: 0;
}
.cp-vswitch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--ps--neutral-0);
  box-shadow: var(--ps--shadow-sm);
  transition: transform var(--ps--duration-base) var(--ps--ease-standard);
}
.cp-vswitch__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-family: var(--ps--font-mono);
  text-transform: uppercase;
}
/* Active state */
.cp-vswitch input:checked ~ .cp-vswitch__track { background: var(--ps--success, #1f9d55); }
.cp-vswitch input:checked ~ .cp-vswitch__track .cp-vswitch__thumb { transform: translateX(14px); }
.cp-vswitch:not(.is-off) { color: var(--ps--fg); }
.cp-vswitch.is-off .cp-vswitch__label { color: var(--ps--fg-subtle); }

/* ---- Spalten-Familien: Aktiv-Switch + Spalten-Kreise ----
   Genutzt von Card (3 Familien × 4 Spalten-Kopien). Der Switch schaltet die
   Familie ganz an/aus, die Kreise toggeln einzelne Spaltigkeiten. */
.cp-fam { display: inline-flex; align-items: center; gap: var(--ps--space-2); flex-wrap: wrap; }
.cp-vcols {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  background: var(--ps--bg-soft);
  border: 1px solid var(--ps--border);
  border-radius: 999px;
}
.cp-vcols__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--ps--font-mono);
  color: var(--ps--fg-subtle);
  margin-right: 2px;
}
/* Runder Spalten-Button — aktiv: grün + weißer Text. Geteilt zwischen
   Komponenten-Verwaltung (Checkbox) und Builder-Palette (Auswahl). */
.cp-coldot {
  appearance: none;
  /* Mindest-Zielgröße 24×24 (WCAG 2.5.8 Target Size) */
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid var(--ps--border-strong);
  background: var(--ps--neutral-0);
  color: var(--ps--fg-muted);
  font-size: 11px;
  font-weight: 800;
  font-family: var(--ps--font-mono);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--ps--duration-fast), color var(--ps--duration-fast), border-color var(--ps--duration-fast), transform var(--ps--duration-fast);
}
.cp-coldot:hover { border-color: var(--ps--success, #1f9d55); color: var(--ps--fg); }
.cp-coldot.is-active {
  background: var(--ps--success, #1f9d55);
  border-color: var(--ps--success, #1f9d55);
  color: var(--ps--neutral-0);
}
.cp-coldot.is-active:hover { transform: translateY(-1px); }

/* Komponentenweiter „Vorschau-Spalten"-Wähler unter dem PageHead — bestimmt,
   in welcher Spaltigkeit die Familien-Vorschauen gerendert werden. */
.cp-previewcols {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--ps--space-5);
  padding: 6px 12px 6px 10px;
  background: var(--ps--bg-soft);
  border: 1px solid var(--ps--border);
  border-radius: 999px;
}
.cp-previewcols__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--ps--font-mono);
  color: var(--ps--fg-muted);
  margin-right: 2px;
}

/* When a story's variant is switched off for this customer, dim the whole
   story card so it's obvious the variant won't show up in the Builder. */
.cp-story.is-variant-off { opacity: 0.55; }
.cp-story.is-variant-off:hover { opacity: 1; }

/* Status badge — sits *after* the switch so toggling never shifts the
   switch position. Always in the DOM; opacity-fades in/out. */
.cp-story__offBadge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--ps--font-mono);
  color: var(--ps--fg-subtle);
  padding: 2px 8px;
  border: 1px solid var(--ps--border);
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--ps--duration-base) var(--ps--ease-standard),
              transform var(--ps--duration-base) var(--ps--ease-standard);
}
.cp-story.is-variant-off .cp-story__offBadge {
  opacity: 1;
  transform: translateX(0);
}
.cp-story__desc {
  font-size: 13px;
  color: var(--ps--fg-muted);
  max-width: 50ch;
  text-align: right;
  line-height: 1.5;
  margin: 0;
}
.cp-story__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ps--space-2);
  margin-top: var(--ps--space-2);
}
.cp-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--ps--space-1);
  height: 22px;
  padding: 0 var(--ps--space-2);
  border-radius: var(--ps--radius-pill);
  background: var(--ps--bg-soft);
  border: 1px solid var(--ps--border);
  font-size: 11px;
  font-weight: 700;
  color: var(--ps--fg-muted);
  font-family: var(--ps--font-mono);
}
.cp-tag--accent { background: color-mix(in srgb, var(--ps--primary) 8%, transparent); color: var(--ps--primary); border-color: color-mix(in srgb, var(--ps--primary) 25%, transparent); }

/* Art-Chip einer Bausteine-Karte (Variante/Kontext/Zustand/Beispiel). */
.cp-story__kind {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 var(--ps--space-2);
  border-radius: var(--ps--radius-pill);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ps--tracking-caps);
  background: var(--ps--bg-soft);
  border: 1px solid var(--ps--border);
  color: var(--ps--fg-subtle);
}
.cp-story__kind--variant {
  background: color-mix(in srgb, var(--ps--primary) 8%, transparent);
  border-color: color-mix(in srgb, var(--ps--primary) 25%, transparent);
  color: var(--ps--primary);
}

/* The preview frame is studio chrome — it must NOT pick up the project theme
   that cascades onto .cp-story__content (e.g. turning the radius up would
   otherwise round the frame itself). It therefore uses the studio's own
   --ps--* tokens, which are independent of the website theme (--mp-*);
   only the component rendered INSIDE the frame stays themed. */
.cp-frame {
  position: relative;
  background: var(--ps--bg);
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-md);   /* fixed chrome — not themeable */
  overflow: hidden;
  box-shadow: var(--ps--shadow-xs);
}
.cp-frame--soft { background: var(--ps--bg-soft); }
.cp-frame--dark { background: var(--ps--surface-dark); } /* neutraler Dunkel-Canvas #373737 */
.cp-frame--checker {
  background-image:
    linear-gradient(45deg, var(--ps--neutral-100) 25%, transparent 25%),
    linear-gradient(-45deg, var(--ps--neutral-100) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--ps--neutral-100) 75%),
    linear-gradient(-45deg, transparent 75%, var(--ps--neutral-100) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-color: var(--ps--bg);
}

.cp-frame__pad { padding: var(--ps--space-7) var(--ps--space-7); }
.cp-frame__pad--sm { padding: var(--ps--space-5); }
.cp-frame__pad--lg { padding: var(--ps--space-8) var(--ps--space-7); }
.cp-frame__pad--flush { padding: 0; }

/* Resize handle / variant width pickers (visual only) */
.cp-frame__viewport {
  display: flex;
  align-items: center;
  gap: var(--ps--space-3);
  padding: var(--ps--space-2) var(--ps--space-4);
  border-bottom: 1px solid var(--ps--border);
  background: var(--ps--bg-soft);
  font-family: var(--ps--font-mono);
  font-size: 11px;
  color: var(--ps--fg-muted);
}
.cp-frame__viewport b { color: var(--ps--fg); font-weight: 700; }
.cp-frame__dot { width: 10px; height: 10px; border-radius: 999px; background: var(--ps--primary); display: inline-block; }
.cp-frame__dot.gr { background: var(--ps--success); }
.cp-frame__dot.ye { background: var(--ps--warning); }

/* ---- Helpers ---- */

.cp-hr {
  border: 0;
  border-top: 1px solid var(--ps--border);
  margin: var(--ps--space-8) 0;
}

.cp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ps--space-5); }
.cp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ps--space-5); }
.cp-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ps--space-4); }

.cp-note {
  background: var(--ps--bg-soft);
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-md);
  padding: var(--ps--space-4) var(--ps--space-5);
  font-size: 13px;
  color: var(--ps--fg-muted);
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: var(--ps--space-3);
}
.cp-note i[data-lucide] { width: 16px; height: 16px; color: var(--ps--primary); flex-shrink: 0; margin-top: 1px; }
.cp-note strong { color: var(--ps--fg); font-weight: 700; }

.cp-codeline {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--ps--font-mono);
  font-size: 11px;
  background: var(--ps--bg-soft);
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-sm);
  color: var(--ps--fg);
}

/* Token cards reused across foundations */
.cp-swatch {
  background: var(--ps--neutral-0);
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-md);
  overflow: hidden;
}
.cp-swatch__chip {
  height: 96px;
  display: flex;
  align-items: flex-end;
  padding: var(--ps--space-3);
}
.cp-swatch__body {
  padding: var(--ps--space-3) var(--ps--space-4) var(--ps--space-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cp-swatch__name { font-size: 13px; font-weight: 700; color: var(--ps--fg); }
.cp-swatch__token { font-size: 11px; font-family: var(--ps--font-mono); color: var(--ps--fg-muted); }
.cp-swatch__hex { font-size: 11px; font-family: var(--ps--font-mono); color: var(--ps--fg-subtle); }

/* Empty / disabled feedback */
.cp-emptyBlock {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ps--fg-subtle);
  font-size: 13px;
  border: 1px dashed var(--ps--border-strong);
  border-radius: var(--ps--radius-md);
  padding: var(--ps--space-7);
}

/* Welcome / dashboard hero */
.cp-welcome {
  background: var(--ps--bg-inverse);
  color: var(--ps--fg-inverse);
  border-radius: var(--ps--radius-md);
  padding: var(--ps--space-8) var(--ps--space-7);
  margin-bottom: var(--ps--space-7);
  position: relative;
  overflow: hidden;
}
.cp-welcome__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--ps--tracking-caps);
  text-transform: uppercase;
  color: var(--ps--accent);
  margin-bottom: var(--ps--space-4);
  display: flex;
  align-items: center;
  gap: var(--ps--space-2);
}
.cp-welcome__title {
  font-family: var(--ps--font-display);
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 var(--ps--space-5);
  color: var(--ps--neutral-0);
}
.cp-welcome__lead {
  font-size: 18px;
  line-height: 1.55;
  font-weight: 300;
  color: rgba(255,255,255,0.78);
  max-width: 60ch;
  margin: 0;
}
.cp-welcome__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ps--space-5);
  margin-top: var(--ps--space-7);
  padding-top: var(--ps--space-5);
  border-top: 1px solid rgba(255,255,255,0.12);
}
.cp-welcome__stats dt { font-size: 11px; letter-spacing: var(--ps--tracking-caps); text-transform: uppercase; color: rgba(255,255,255,0.55); font-weight: 700; }
.cp-welcome__stats dd { margin: var(--ps--space-2) 0 0; font-family: var(--ps--font-display); font-size: 36px; color: var(--ps--neutral-0); }
.cp-welcome__signet {
  position: absolute;
  right: -40px;
  top: -40px;
  width: 280px;
  opacity: 0.07;
  pointer-events: none;
}

/* ---- Overview cards ---- */
.cp-overview-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ps--space-3);
  padding: var(--ps--space-5);
  background: var(--ps--neutral-0);
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-md);
  text-align: left;
  cursor: pointer;
  min-height: 160px;
  transition: box-shadow var(--ps--duration-base) var(--ps--ease-standard),
              transform var(--ps--duration-base) var(--ps--ease-standard),
              border-color var(--ps--duration-base) var(--ps--ease-standard);
  font-family: var(--ps--font-sans);
  color: inherit;
}
.cp-overview-card:hover {
  box-shadow: var(--ps--shadow-md);
  transform: translateY(-2px);
  border-color: var(--ps--border-strong);
}
.cp-overview-card__icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ps--bg-soft);
  border-radius: var(--ps--radius-sm);
  color: var(--ps--primary);
}
.cp-overview-card__icon i[data-lucide] { width: 18px; height: 18px; }
.cp-overview-card__num {
  position: absolute;
  top: var(--ps--space-4);
  right: var(--ps--space-5);
  font-family: var(--ps--font-mono);
  font-size: 11px;
  color: var(--ps--fg-subtle);
  letter-spacing: 0.04em;
}
.cp-overview-card__name {
  font-size: 18px;
  font-weight: 700;
  color: var(--ps--fg);
  margin-top: auto;
}
.cp-overview-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ps--primary);
}
.cp-overview-card__cta i[data-lucide] { width: 14px; height: 14px; transition: transform var(--ps--duration-base); }
.cp-overview-card:hover .cp-overview-card__cta i[data-lucide] { transform: translateX(3px); }

/* ============================================================
   Studio — Theme Editor + Export
   ============================================================ */

.st-groupTitle {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--ps--tracking-caps);
  text-transform: uppercase;
  color: var(--ps--fg-subtle);
  margin-bottom: var(--ps--space-3);
}

/* ---- Color editor ---- */
.st-colorGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ps--space-6);
}
.st-colorGroup { display: flex; flex-direction: column; }
.st-colorList { display: flex; flex-direction: column; gap: var(--ps--space-2); }
.st-color {
  display: flex;
  align-items: center;
  gap: var(--ps--space-3);
  padding: var(--ps--space-2);
  border-radius: var(--ps--radius-sm);
  border: 1px solid var(--ps--border);
  background: var(--ps--neutral-0);
  position: relative;
  transition: border-color var(--ps--duration-fast);
}
.st-color:hover { border-color: var(--ps--border-strong); }
.st-color__swatch {
  width: 36px;
  height: 36px;
  border-radius: var(--ps--radius-sm);
  border: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.st-color__meta { flex: 1; min-width: 0; }
.st-color__name { font-size: 13px; font-weight: 700; color: var(--ps--fg); }
.st-color__token { font-size: 11px; font-family: var(--ps--font-mono); color: var(--ps--fg-muted); }
.st-color__hex {
  width: 96px;
  height: 30px;
  padding: 0 var(--ps--space-2);
  border: 1px solid var(--ps--border-strong);
  border-radius: var(--ps--radius-sm);
  font: 600 12px var(--ps--font-mono);
  text-align: center;
  background: var(--ps--bg-soft);
  color: var(--ps--fg);
  outline: none;
  text-transform: uppercase;
}
.st-color__hex:focus { border-color: var(--ps--primary); box-shadow: 0 0 0 3px var(--ps--focus-ring); }

/* ---- Contrast checker ---- */
.st-contrast { display: flex; flex-direction: column; gap: var(--ps--space-6); }
.st-contrast__section { display: flex; flex-direction: column; gap: var(--ps--space-3); }
.st-contrast__sectionTitle {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ps--tracking-caps);
  color: var(--ps--fg-subtle);
  padding-bottom: var(--ps--space-1);
  border-bottom: 1px solid var(--ps--border);
}
.st-contrast__legend {
  display: flex;
  align-items: center;
  gap: var(--ps--space-2);
  font-size: 12px;
  color: var(--ps--fg-muted);
  flex-wrap: wrap;
}
.st-contrast__legendDot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.st-contrast__legendDot + .st-contrast__legendDot { margin-left: var(--ps--space-4); }
/* DIESE DREI BLEIBEN LITERAL — und das ist die interessanteste Ausnahme (PS-88).
   Das hier ist die Kontrast-PRÜFUNG des Studios: die Punkte sind ihre Legende
   für „bestanden / knapp / durchgefallen". Ein Werkzeug, das Kontraste bewertet,
   darf seine eigene Skala nicht themenabhängig verschieben — sonst bedeutet
   dasselbe Grün im dunklen Modus etwas anderes als im hellen. Die Farben sind
   hier ANZEIGE EINES ERGEBNISSES, nicht Oberflächengestaltung. Wer sie
   tokenisiert, macht das Werkzeug unzuverlässig, nicht schöner. Gilt genauso für
   .st-contrast__card und .st-contrast__badge weiter unten. */
.st-contrast__legendDot.is-pass { background: #1f9d55; }
.st-contrast__legendDot.is-warn { background: #d97706; }
.st-contrast__legendDot.is-fail { background: #dc2626; }

.st-contrast__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ps--space-4);
}
@media (max-width: 1180px) { .st-contrast__grid { grid-template-columns: 1fr; } }

.st-contrast__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--ps--radius-md);
  border: 1px solid var(--ps--border);
  overflow: hidden;
  background: var(--ps--neutral-0);
}
/* Literal, siehe Begründung bei .st-contrast__legendDot: Ergebnisanzeige. */
.st-contrast__card.is-pass { border-left: 4px solid #1f9d55; }
.st-contrast__card.is-warn { border-left: 4px solid #d97706; }
.st-contrast__card.is-fail { border-left: 4px solid #dc2626; }

.st-contrast__preview {
  display: flex;
  align-items: center;
  gap: var(--ps--space-4);
  padding: var(--ps--space-4);
  min-height: 168px;
}
.st-contrast__previewLarge {
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.st-contrast__previewBody {
  display: flex;
  flex-direction: column;
  gap: var(--ps--space-2);
  min-width: 0;
}

.st-contrast__meta {
  display: flex;
  flex-direction: column;
  gap: var(--ps--space-2);
  padding: var(--ps--space-4);
  background: var(--ps--bg-soft);
  border-left: 1px solid var(--ps--border);
}
.st-contrast__name { font-size: 14px; font-weight: 700; color: var(--ps--fg); }
.st-contrast__pair {
  display: flex;
  align-items: center;
  gap: var(--ps--space-2);
  font-size: 11px;
  color: var(--ps--fg-muted);
}
.st-contrast__pair code {
  font-family: var(--ps--font-mono);
  font-size: 11px;
  padding: 1px 5px;
  border-radius: var(--ps--radius-sm);
  background: var(--ps--neutral-0);
  border: 1px solid var(--ps--border);
  text-transform: uppercase;
  color: var(--ps--fg);
}
.st-contrast__pairLabels {
  font-size: 11px;
  font-family: var(--ps--font-mono);
  color: var(--ps--fg-subtle);
}
.st-contrast__ratio {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-top: var(--ps--space-1);
}
.st-contrast__ratioNum {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ps--fg);
  font-variant-numeric: tabular-nums;
}
.st-contrast__ratioUnit { font-size: 14px; color: var(--ps--fg-muted); font-weight: 700; }

.st-contrast__badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: var(--ps--space-2);
}
.st-contrast__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--ps--radius-sm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}
/* Literal, siehe .st-contrast__legendDot. Fläche UND Text sind hier fest: das
   Abzeichen trägt das Prüfergebnis, und ein Paar aus Tint-Token und -fg-Token
   würde im dunklen Modus einen anderen Kontrast zeigen als den gemessenen. */
.st-contrast__badge.is-pass { background: #e7f5ec; color: #156d3a; }
.st-contrast__badge.is-fail { background: #fdecec; color: #a01818; }

/* ---- Component-property editor ---- */
.st-prop__stack { display: flex; flex-direction: column; gap: var(--ps--space-7); }
.st-prop__variants { display: flex; flex-direction: column; gap: var(--ps--space-5); }
.st-prop__variant {
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-md);
  overflow: hidden;
  background: var(--ps--neutral-0);
}
.st-prop__variantHead {
  display: flex;
  align-items: baseline;
  gap: var(--ps--space-3);
  padding: var(--ps--space-3) var(--ps--space-5);
  background: var(--ps--bg-soft);
  border-bottom: 1px solid var(--ps--border);
}
.st-prop__variantName {
  font-size: 13px;
  font-weight: 800;
  color: var(--ps--fg);
  letter-spacing: -0.005em;
}
.st-prop__variantId {
  font-family: var(--ps--font-mono);
  font-size: 11px;
  color: var(--ps--fg-muted);
  background: var(--ps--neutral-0);
  padding: 1px 6px;
  border-radius: var(--ps--radius-sm);
  border: 1px solid var(--ps--border);
}
.st-prop__group {
  background: var(--ps--neutral-0);
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-md);
  overflow: hidden;
}
.st-prop__groupHead {
  display: flex;
  align-items: center;
  gap: var(--ps--space-3);
  padding: var(--ps--space-4) var(--ps--space-5);
  border-bottom: 1px solid var(--ps--border);
  background: var(--ps--bg-soft);
}
.st-prop__groupTitle { font-size: 15px; font-weight: 800; color: var(--ps--fg); margin: 0; letter-spacing: -0.005em; }
.st-prop__groupCount { font-size: 11px; color: var(--ps--fg-muted); font-family: var(--ps--font-mono); }
.st-prop__list { display: flex; flex-direction: column; }
.st-prop {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--ps--space-6);
  padding: var(--ps--space-5);
  border-top: 1px solid var(--ps--border);
}
.st-prop:first-child { border-top: 0; }
.st-prop__meta { display: flex; flex-direction: column; gap: var(--ps--space-1); }
.st-prop__label { font-size: 14px; font-weight: 700; color: var(--ps--fg); }
.st-prop__type {
  font-size: 11px;
  color: var(--ps--fg-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.st-prop__type code {
  font-family: var(--ps--font-mono);
  font-size: 11px;
  padding: 1px 5px;
  border-radius: var(--ps--radius-sm);
  background: var(--ps--bg-soft);
  color: var(--ps--fg);
}
.st-prop__help { font-size: 12px; color: var(--ps--fg-muted); line-height: 1.5; margin: var(--ps--space-1) 0 0; }

.st-prop__editor { display: flex; flex-direction: column; gap: var(--ps--space-2); }

/* Choice editor — modernes segmented control im iOS/macOS-Look.
   Weicher Track (bg-soft) trägt die Optionen; die aktive bekommt einen
   hellen "Floating Pill" mit subtilem Lift-Shadow. Press-Feedback via
   Scale-Down. */
.st-prop__choice {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--ps--bg-soft);
  border-radius: 9px;
  /* Nur so breit wie die Optionen — wichtig damit der Switch in Grid-
     Items (Inspector) nicht auf die ganze Spalten-Breite gestreckt wird. */
  width: max-content;
  justify-self: start;
  align-self: flex-start;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}
/* Mehrfachauswahl (type: 'toggles') — mehrere Optionen gleichzeitig aktiv;
   darf bei längeren Labels umbrechen statt über den Dialog hinauszulaufen. */
.st-prop__choice--multi {
  flex-wrap: wrap;
  max-width: 100%;
}
.st-prop__choiceBtn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 6px 12px;
  font: 600 12px var(--ps--font-sans);
  color: var(--ps--fg-muted);
  cursor: pointer;
  border-radius: 6px;
  white-space: nowrap;
  transition:
    background var(--ps--duration-fast) var(--ps--ease-standard),
    color var(--ps--duration-fast) var(--ps--ease-standard),
    box-shadow var(--ps--duration-fast) var(--ps--ease-standard),
    transform 0.08s ease;
}
.st-prop__choiceBtn:hover:not(.is-active) { color: var(--ps--fg); }
.st-prop__choiceBtn:active { transform: scale(0.96); }
.st-prop__choiceBtn.is-active {
  background: var(--ps--neutral-0);
  color: var(--ps--fg);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.04),
    0 1px 2px rgba(15, 30, 60, 0.10),
    0 1px 3px rgba(15, 30, 60, 0.06);
}
.st-prop__choiceBtn:focus-visible {
  outline: 2px solid var(--ps--primary);
  outline-offset: 1px;
}
.st-prop__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ps--space-2);
  padding: var(--ps--space-7) var(--ps--space-5);
  border: 1.5px dashed var(--ps--border-strong);
  border-radius: var(--ps--radius-md);
  background: var(--ps--bg-soft);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--ps--duration-fast), background var(--ps--duration-fast);
}
.st-prop__dropzone:hover, .st-prop__dropzone.is-dragover {
  border-color: var(--ps--primary);
  background: color-mix(in srgb, var(--ps--primary) 6%, var(--ps--neutral-0));
}
.st-prop__dropzoneTitle { font-size: 13px; font-weight: 700; color: var(--ps--fg); }
.st-prop__dropzoneSub { font-size: 11px; color: var(--ps--fg-muted); font-family: var(--ps--font-mono); }

.st-prop__filled {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  align-items: center;
  gap: var(--ps--space-4);
  padding: var(--ps--space-3);
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-md);
  background: var(--ps--neutral-0);
}
.st-prop__thumb {
  width: 88px;
  height: 88px;
  border-radius: var(--ps--radius-sm);
  border: 1px solid var(--ps--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.st-prop__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.st-prop__fileMeta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-prop__filename {
  font-size: 13px;
  font-weight: 700;
  color: var(--ps--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-prop__filesize { font-size: 11px; color: var(--ps--fg-muted); font-family: var(--ps--font-mono); }
.st-prop__actions { display: flex; flex-direction: column; gap: var(--ps--space-2); }
.st-prop__err {
  font-size: 12px;
  color: var(--ps--danger);
  padding: 6px 10px;
  background: color-mix(in srgb, var(--ps--danger) 8%, var(--ps--neutral-0));
  border-radius: var(--ps--radius-sm);
}

/* assetRef-Picker — referenziert ein Design-Asset (z. B. Schmuckgrafik) statt
   pro Instanz hochzuladen. Kompaktes Thumbnail-Raster, das auch im schmalen
   Inspector funktioniert; „Keine" + jede verfügbare Grafik als Kachel. */
.st-prop__assetPick {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: var(--ps--space-2);
}
.st-prop__assetTile {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 6px;
  background: var(--ps--neutral-0);
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-md);
  cursor: pointer;
  transition:
    border-color var(--ps--duration-fast) var(--ps--ease-standard),
    box-shadow var(--ps--duration-fast) var(--ps--ease-standard),
    transform 0.08s ease;
}
.st-prop__assetTile:hover { border-color: var(--ps--border-strong); }
.st-prop__assetTile:active { transform: scale(0.97); }
.st-prop__assetTile.is-active {
  border-color: var(--ps--primary);
  box-shadow: 0 0 0 1px var(--ps--primary), 0 1px 3px rgba(15, 30, 60, 0.10);
}
.st-prop__assetTile:focus-visible { outline: 2px solid var(--ps--primary); outline-offset: 1px; }
.st-prop__assetTileThumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--ps--radius-sm);
  background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 / 12px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.st-prop__assetTileThumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.st-prop__assetTileThumb--none {
  background: var(--ps--bg-soft);
  color: var(--ps--fg-subtle);
}
.st-prop__assetTileLabel {
  font-size: 10px;
  color: var(--ps--fg-muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st-prop__assetTile.is-active .st-prop__assetTileLabel { color: var(--ps--fg); font-weight: 600; }
.st-prop__assetEmpty {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--ps--fg-muted);
  line-height: 1.5;
  padding: 10px 12px;
  border: 1px dashed var(--ps--border-strong);
  border-radius: var(--ps--radius-md);
  background: var(--ps--bg-soft);
}
.st-prop__assetEmpty strong { color: var(--ps--fg); font-weight: 700; }
.st-prop__assetEmpty i[data-lucide], .st-prop__assetEmpty svg { flex: none; margin-top: 1px; }

/* Dropdown (type: 'select') — kompaktes Popover für Auswahlen, die als
   segmentierte Leiste zu breit würden (z. B. Section-Hintergrundfarbe).
   Optionen können einen Farbpunkt (swatch) tragen. */
/* align-self:start — die Eigenschaften-Zeile ist ein Grid; ohne dies streckt
   sich die Select-Box auf die volle (oft hohe) Zeilenhöhe, wodurch das
   aufklappende Menü (top:100%) weit UNTER dem Button landete statt direkt
   darunter. So umschließt die Box nur den Button und das Menü sitzt korrekt an. */
.st-prop__select { position: relative; align-self: start; width: max-content; min-width: 190px; max-width: 100%; }
.st-prop__selectBtn {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: var(--ps--neutral-0);
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-md);
  font: 600 13px var(--ps--font-sans);
  color: var(--ps--fg);
  cursor: pointer;
  transition: border-color var(--ps--duration-fast) var(--ps--ease-standard), box-shadow var(--ps--duration-fast) var(--ps--ease-standard);
}
.st-prop__selectBtn:hover { border-color: var(--ps--border-strong); }
.st-prop__select.is-open .st-prop__selectBtn { border-color: var(--ps--primary); box-shadow: 0 0 0 1px var(--ps--primary); }
.st-prop__selectBtn:focus-visible { outline: 2px solid var(--ps--primary); outline-offset: 1px; }
.st-prop__selectSwatch {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  flex: none;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.st-prop__selectLabel { flex: 1 1 auto; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-prop__selectChevron { display: inline-flex; color: var(--ps--fg-muted); transition: transform var(--ps--duration-fast) var(--ps--ease-standard); }
.st-prop__select.is-open .st-prop__selectChevron { transform: rotate(180deg); }
.st-prop__selectMenu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--ps--neutral-0);
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-md);
  box-shadow: 0 8px 24px rgba(15, 30, 60, 0.16), 0 2px 6px rgba(15, 30, 60, 0.08);
}
.st-prop__selectOpt {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 9px;
  background: transparent;
  border: 0;
  border-radius: var(--ps--radius-sm);
  font: 600 13px var(--ps--font-sans);
  color: var(--ps--fg);
  cursor: pointer;
  text-align: left;
}
.st-prop__selectOpt:hover { background: var(--ps--bg-soft); }
.st-prop__selectOpt.is-active { color: var(--ps--primary); }
.st-prop__selectCheck { margin-left: auto; display: inline-flex; color: var(--ps--primary); }

/* Stepper (type: 'stepper') — [−] Wert [+] für eine kleine ganze Zahl
   (z. B. Anzahl CTAs). Track im Look des Segmented-Controls. */
.st-prop__stepper {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  background: var(--ps--bg-soft);
  border-radius: 9px;
  width: max-content;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.st-prop__stepperBtn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 7px;
  background: var(--ps--neutral-0);
  color: var(--ps--fg);
  cursor: pointer;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(15, 30, 60, 0.10);
  transition: background var(--ps--duration-fast) var(--ps--ease-standard), transform 0.08s ease, opacity var(--ps--duration-fast);
}
.st-prop__stepperBtn:hover:not(:disabled) { background: var(--ps--bg-soft); }
.st-prop__stepperBtn:active:not(:disabled) { transform: scale(0.94); }
.st-prop__stepperBtn:disabled { opacity: 0.4; cursor: default; box-shadow: none; background: transparent; }
.st-prop__stepperBtn:focus-visible { outline: 2px solid var(--ps--primary); outline-offset: 1px; }
.st-prop__stepperVal {
  min-width: 32px;
  text-align: center;
  font: 700 14px var(--ps--font-mono, var(--ps--font-sans));
  color: var(--ps--fg);
}

/* Ziehregler-Eigenschaft (type:'range') — diskrete Stufen im Studio-Chrome. */
.st-prop__range { display: flex; flex-direction: column; gap: 6px; }
.st-prop__rangeInput { width: 100%; accent-color: var(--ps--primary); cursor: pointer; }
.st-prop__rangeLabels { display: flex; justify-content: space-between; gap: 4px; }
.st-prop__rangeLabel { font-size: 11px; color: var(--ps--fg-subtle); line-height: 1.2; white-space: nowrap; }
.st-prop__rangeLabel.is-active { color: var(--ps--fg); font-weight: 600; }

/* Positions-Pad (type:'anchor') — Mini-Vorschau mit 3×3 Ankerpunkten. Die
   Fläche deutet die Komponente an (Hero mit Bild-Hintergrund); eingefärbt in
   der Piazza-Markenfarbe (Verlauf hell → tief, wie der Hero-Overlay). Die
   „Ghost"-Silhouette (Headline/Text/Leiste) springt animiert an die gewählte
   Position und spiegelt Breite/Textausrichtung der Nachbar-Eigenschaften
   (prop.reflect) live wider. */
.st-prop__anchorPad {
  position: relative;
  aspect-ratio: 16 / 7;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--ps--brand) 0%, var(--ps--brand-hover) 55%, var(--ps--brand-dark) 100%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.st-prop__anchorCell {
  position: relative; z-index: 2;
  background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.st-prop__anchorCell:focus-visible { outline: 2px solid var(--ps--primary); outline-offset: -3px; border-radius: 8px; }
.st-prop__anchorDot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.st-prop__anchorCell:hover .st-prop__anchorDot { background: rgba(255,255,255,0.8); transform: scale(1.4); }
.st-prop__anchorCell.is-active .st-prop__anchorDot { background: #fff; transform: scale(1.5); box-shadow: 0 0 0 3px rgba(255,255,255,0.25); }
.st-prop__anchorGhost {
  position: absolute; z-index: 1;
  width: 38%;
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  pointer-events: none;
  transition: all .28s cubic-bezier(.2, .8, .2, 1);
}
.st-prop__anchorGhost.is-h-left   { left: 7%; right: auto; }
.st-prop__anchorGhost.is-h-center { left: 31%; right: auto; }
.st-prop__anchorGhost.is-h-right  { left: auto; right: 7%; }
.st-prop__anchorGhost.is-v-top    { top: 9%; bottom: auto; }
.st-prop__anchorGhost.is-v-center { top: 30%; bottom: auto; }
.st-prop__anchorGhost.is-v-bottom { top: auto; bottom: 9%; }
.st-prop__anchorGhost.is-full { width: 86%; }
.st-prop__anchorGhost.is-full.is-h-center { left: 7%; }
.st-prop__anchorGhost.is-align-center { align-items: center; }
.st-prop__anchorGhost.is-align-right  { align-items: flex-end; }
.st-prop__anchorBar { border-radius: 2px; }
.st-prop__anchorBar--title { height: 9px;  width: 85%;  background: rgba(255,255,255,0.95); }
.st-prop__anchorBar--text  { height: 5px;  width: 65%;  background: rgba(255,255,255,0.55); }
.st-prop__anchorBar--pill  { height: 10px; width: 100%; border-radius: 5px; background: rgba(255,255,255,0.28); border: 1px solid rgba(255,255,255,0.5); }

/* Standort-Eigenschaft (type:'mapLocation') — Adresse + Geocoding + Koordinaten. */
.st-prop__maploc { display: flex; flex-direction: column; gap: 10px; }
/* Schmaler Inspector: Adresse vollbreit, „Ermitteln" als eigene Zeile darunter —
   nebeneinander würde das Adressfeld abgeschnitten. */
.st-prop__maplocRow { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.st-prop__maplocRow .bx-input { width: 100%; }
.st-prop__maplocRow .bx-btn { justify-content: center; }
/* Koordinaten zweispaltig (lng/lat nebeneinander, Zoom darunter) — drei Spalten
   schneiden die Werte im schmalen Inspector ab. */
.st-prop__maplocGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st-prop__maplocGrid label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--ps--fg-subtle); min-width: 0; }
.st-prop__maplocGrid .bx-input { width: 100%; min-width: 0; }
.st-prop__maplocMsg { font-size: 11px; }
.st-prop__maplocMsg.is-ok { color: var(--ps--success); }
.st-prop__maplocMsg.is-err { color: var(--ps--danger); }
.st-prop__maplocMsg.is-busy { color: var(--ps--fg-subtle); }
.st-prop__maplocMsg.is-warn { color: var(--ps--warning); }
.st-prop__maplocHint { font-size: 11px; color: var(--ps--fg-subtle); margin: 0; }

@media (max-width: 980px) {
  .st-prop { grid-template-columns: 1fr; }
}

/* Inspector-Kontext: schmale rechte Spalte, deshalb stacken statt Grid */
.st-prop__list--inspector { padding: 0; }
.st-prop__list--inspector .st-prop {
  grid-template-columns: 1fr;
  gap: var(--ps--space-2);
  padding: var(--ps--space-3) 0;
}
.st-prop__list--inspector .st-prop:first-child { padding-top: 0; }
.st-prop__list--inspector .st-prop__label { font-size: 13px; }
.st-prop__list--inspector .st-prop__type   { font-size: 10px; }
.st-prop__list--inspector .st-prop__help   { font-size: 11px; }

/* ---- Einstellungen-Dialog (VariantSettingsDialog) ---- */
/* Sektionen mit Kopf (Titel + Hinweis) im Dialog-Body. */
.st-set { border-top: 1px solid var(--ps--border); padding: var(--ps--space-5) 0; }
.st-set:first-child { border-top: 0; padding-top: 0; }
.st-set:last-child { padding-bottom: 0; }
.st-set__head { margin-bottom: var(--ps--space-3); }
.st-set__title { font-size: 13px; font-weight: 700; color: var(--ps--fg); margin: 0; text-transform: uppercase; letter-spacing: var(--ps--tracking-caps); }
.st-set__note {
  font-size: 12px; color: var(--ps--fg-muted); line-height: 1.5; margin: var(--ps--space-1) 0 0;
  display: flex; align-items: center; gap: 5px;
}
.st-set__note i[data-lucide], .st-set__note svg { width: 12px; height: 12px; flex: none; }

/* Read-only-Eigenschaften: gedämpft, nicht klickbar (nur zur Übersicht). */
.st-prop__list--readonly .st-prop { opacity: 0.92; }
.st-prop__choice.is-readonly { opacity: 0.85; }
.st-prop__choiceBtn:disabled { cursor: default; }
.st-prop__choice.is-readonly .st-prop__choiceBtn:active { transform: none; }
.st-prop__ro {
  justify-self: start;
  font-size: 12px; color: var(--ps--fg-muted);
  padding: 6px 12px;
  border: 1px dashed var(--ps--border-strong);
  border-radius: var(--ps--radius-sm);
  background: var(--ps--bg-soft);
}

/* Info-Block (Definitionsliste). */
.st-info { margin: 0; display: flex; flex-direction: column; gap: var(--ps--space-2); }
.st-info__row { display: grid; grid-template-columns: 120px 1fr; gap: var(--ps--space-4); align-items: baseline; }
.st-info__row dt { font-size: 12px; font-weight: 700; color: var(--ps--fg-muted); }
.st-info__row dd { margin: 0; font-size: 13px; color: var(--ps--fg); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.st-info__row dd code {
  font-family: var(--ps--font-mono); font-size: 11px; padding: 1px 5px;
  border-radius: var(--ps--radius-sm); background: var(--ps--bg-soft); color: var(--ps--fg-muted);
}
.st-info__tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--ps--tracking-caps);
  padding: 2px 7px; border-radius: 999px; background: var(--ps--bg-soft); color: var(--ps--fg-muted);
}
.st-info__yes { display: inline-flex; align-items: center; gap: 5px; color: var(--ps--success, #1f9d55); font-weight: 600; }
.st-info__yes i[data-lucide], .st-info__yes svg { width: 13px; height: 13px; }
.st-info__no { color: var(--ps--fg-subtle); }

/* ---- Font editor ---- */
.st-fontGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ps--space-5);
}
.st-font {
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-md);
  background: var(--ps--bg-soft);
  padding: var(--ps--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--ps--space-4);
}
.st-font__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--ps--space-4);
  flex-wrap: wrap;
}
.st-font__role {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--ps--tracking-caps);
  text-transform: uppercase;
  color: var(--ps--fg-subtle);
  margin-bottom: var(--ps--space-2);
}
.st-font__family {
  width: 240px;
  max-width: 100%;
  height: 36px;
  padding: 0 var(--ps--space-3);
  border: 1px solid var(--ps--border-strong);
  background: var(--ps--neutral-0);
  border-radius: var(--ps--radius-sm);
  font: 700 14px var(--ps--font-sans);
  color: var(--ps--fg);
  outline: none;
}
.st-font__family:focus { border-color: var(--ps--primary); box-shadow: 0 0 0 3px var(--ps--focus-ring); }
.st-font__actions { display: flex; gap: var(--ps--space-2); align-items: center; flex-shrink: 0; }
.st-font__preview {
  background: var(--ps--neutral-0);
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-sm);
  padding: var(--ps--space-5);
  font-size: 22px;
  line-height: 1.3;
  color: var(--ps--fg);
  min-height: 120px;
  display: flex;
  align-items: center;
}
.st-font__hint { font-size: 12px; color: var(--ps--fg-muted); display: flex; gap: var(--ps--space-2); align-items: center; }

/* ---- Google Fonts picker ---- */
.gfp-control { position: relative; width: 240px; max-width: 100%; }
.gfp-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ps--space-2);
  width: 100%;
  height: 36px;
  padding: 0 var(--ps--space-2) 0 var(--ps--space-3);
  border: 1px solid var(--ps--border-strong);
  background: var(--ps--neutral-0);
  border-radius: var(--ps--radius-sm);
  color: var(--ps--fg);
  cursor: pointer;
  text-align: left;
}
.gfp-trigger:hover { border-color: var(--ps--primary); }
.gfp-trigger[aria-expanded="true"] { border-color: var(--ps--primary); box-shadow: 0 0 0 3px var(--ps--focus-ring); }
.gfp-trigger__fam { font-size: 15px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gfp-trigger svg { color: var(--ps--fg-subtle); flex-shrink: 0; }
.gfp-pop {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  width: 320px;
  max-width: min(380px, 86vw);
  background: var(--ps--neutral-0);
  border: 1px solid var(--ps--border-strong);
  border-radius: var(--ps--radius-md);
  box-shadow: var(--ps--shadow-lg);
  overflow: hidden;
}
.gfp-search {
  display: flex;
  align-items: center;
  gap: var(--ps--space-2);
  padding: 0 var(--ps--space-3);
  height: 42px;
  border-bottom: 1px solid var(--ps--border);
}
.gfp-search svg { color: var(--ps--fg-subtle); flex-shrink: 0; }
.gfp-search input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font: 400 14px var(--ps--font-sans);
  color: var(--ps--fg);
}
.gfp-list { max-height: 320px; overflow-y: auto; padding: var(--ps--space-1); }
.gfp-row {
  display: flex;
  align-items: center;
  gap: var(--ps--space-3);
  width: 100%;
  padding: var(--ps--space-2) var(--ps--space-3);
  border: 0;
  background: transparent;
  border-radius: var(--ps--radius-sm);
  cursor: pointer;
  text-align: left;
}
.gfp-row:hover { background: var(--ps--bg-soft); }
.gfp-row.is-active { background: color-mix(in srgb, var(--ps--primary) 10%, transparent); }
.gfp-row__name { flex: 1; min-width: 0; font-size: 17px; line-height: 1.15; color: var(--ps--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gfp-row__meta { font-size: 11px; color: var(--ps--fg-subtle); font-family: var(--ps--font-mono); white-space: nowrap; flex-shrink: 0; }
.gfp-row.is-active svg { color: var(--ps--primary); flex-shrink: 0; }
.gfp-empty, .gfp-more { padding: var(--ps--space-3); font-size: 12px; color: var(--ps--fg-subtle); text-align: center; }
.gfp-more { border-top: 1px solid var(--ps--border); }

.gfp-apikey { margin-top: var(--ps--space-5); border-top: 1px solid var(--ps--border); padding-top: var(--ps--space-4); }
.gfp-apikey__toggle {
  display: flex;
  align-items: center;
  gap: var(--ps--space-2);
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--ps--fg);
  padding: 0;
}
.gfp-apikey__toggle svg { color: var(--ps--fg-subtle); }
.gfp-apikey__badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--ps--tracking-caps);
  text-transform: uppercase;
  color: var(--ps--success);
  background: color-mix(in srgb, var(--ps--success) 12%, transparent);
  padding: 2px 6px;
  border-radius: var(--ps--radius-pill);
}
.gfp-apikey__body { margin-top: var(--ps--space-3); display: flex; flex-direction: column; gap: var(--ps--space-3); }
.gfp-apikey__lead { font-size: 12px; color: var(--ps--fg-muted); margin: 0; line-height: 1.5; }
.gfp-apikey__lead a { color: var(--ps--primary); }
.gfp-apikey__row { display: flex; gap: var(--ps--space-2); align-items: center; }
.gfp-apikey__row .st-neos-sync__input { flex: 1; }

/* ---- Type scale editor ---- */
.st-scaleList { display: flex; flex-direction: column; }
.st-scaleRow {
  display: grid;
  grid-template-columns: 140px 110px 1fr;
  gap: var(--ps--space-5);
  align-items: center;
  padding: var(--ps--space-4) 0;
  border-bottom: 1px solid var(--ps--border);
}
.st-scaleRow:last-child { border-bottom: 0; }
.st-scaleRow__meta { display: flex; flex-direction: column; gap: 2px; }
.st-scaleRow__label { font-size: 14px; font-weight: 700; color: var(--ps--fg); }
.st-scaleRow__token { font-size: 11px; font-family: var(--ps--font-mono); color: var(--ps--fg-muted); }
.st-scaleRow__note { font-size: 11px; color: var(--ps--fg-subtle); }
.st-scaleRow__input {
  display: flex;
  align-items: center;
  gap: var(--ps--space-2);
  border: 1px solid var(--ps--border-strong);
  border-radius: var(--ps--radius-sm);
  background: var(--ps--neutral-0);
  padding: 0 var(--ps--space-2) 0 var(--ps--space-3);
  height: 40px;
}
.st-scaleRow__input input {
  flex: 1;
  width: 100%;
  border: 0;
  background: transparent;
  outline: none;
  font: 700 14px var(--ps--font-mono);
  color: var(--ps--fg);
  font-variant-numeric: tabular-nums;
}
.st-scaleRow__input input::-webkit-outer-spin-button,
.st-scaleRow__input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.st-scaleRow__input span { font-size: 12px; color: var(--ps--fg-subtle); padding-right: var(--ps--space-1); }
.st-scaleRow__preview {
  color: var(--ps--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
}

/* ---- Radius editor ---- */
.st-radius {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ps--space-6);
  align-items: center;
}
.st-radius__preview {
  display: flex;
  gap: var(--ps--space-4);
  justify-content: center;
}
.st-radius__preview > div {
  width: 88px;
  height: 88px;
  background: var(--ps--bg-soft);
  border: 1px solid var(--ps--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 12px var(--ps--font-mono);
  color: var(--ps--fg-muted);
  text-transform: uppercase;
  letter-spacing: var(--ps--tracking-caps);
}

/* ---- Export ---- */
.st-export {
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-md);
  overflow: hidden;
  background: var(--ps--neutral-0);
}
.st-export__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ps--space-3) var(--ps--space-4);
  background: var(--ps--bg-soft);
  border-bottom: 1px solid var(--ps--border);
  gap: var(--ps--space-4);
}
.st-export__name { font-size: 13px; font-weight: 700; color: var(--ps--fg); }
.st-export__lang { font-size: 11px; color: var(--ps--fg-muted); font-family: var(--ps--font-mono); letter-spacing: var(--ps--tracking-caps); text-transform: uppercase; }
.st-export__pre {
  margin: 0;
  padding: var(--ps--space-5);
  font-family: var(--ps--font-mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ps--fg);
  background: var(--ps--neutral-0);
  overflow-x: auto;
  max-height: 360px;
  overflow-y: auto;
  white-space: pre;
  tab-size: 2;
}

/* ---- Neos Sync push panel ---- */
/* NEOS-Logo im Übertragen-Bereich (rechts in der Seiten-Kopfzeile). */
.st-neos-brand { flex: 0 0 auto; align-self: flex-start; line-height: 0; }
.st-neos-brand svg { display: block; height: 56px; width: auto; }

.st-neos-sync {
  padding: var(--ps--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--ps--space-3);
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-md);
  background: var(--ps--neutral-0);
}
.st-neos-sync__config {
  display: flex;
  flex-direction: column;
  gap: var(--ps--space-2);
}
/* Read-only Zugangs-Zusammenfassung (Konfiguration lebt in den Projekt-Einstellungen) */
.st-neos-sync__summary {
  display: flex;
  flex-direction: column;
  gap: var(--ps--space-2);
  padding: var(--ps--space-3);
  background: var(--ps--bg-soft);
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-sm);
}
.st-neos-sync__sumRow { display: flex; align-items: baseline; gap: var(--ps--space-3); font-size: 13px; }
.st-neos-sync__sumLabel { flex: 0 0 110px; color: var(--ps--fg-muted); font-weight: 600; }
.st-neos-sync__sumVal { color: var(--ps--fg); font-family: var(--ps--font-mono); font-size: 12px; word-break: break-all; }
.st-neos-sync__sumVal.is-empty { color: var(--ps--fg-subtle); font-style: italic; font-family: var(--ps--font-sans); }
.st-neos-sync__summary .bx-btn { margin-top: 2px; }
.st-neos-sync__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ps--fg);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.st-neos-sync__hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--ps--fg-muted);
}
.st-neos-sync__row {
  display: flex;
  gap: var(--ps--space-2);
  align-items: center;
}
.st-neos-sync__input {
  flex: 1;
  height: 32px;
  padding: 0 var(--ps--space-3);
  border: 1px solid var(--ps--border-strong);
  border-radius: var(--ps--radius-sm);
  font-size: 13px;
  font-family: inherit;
  color: var(--ps--fg);
  background: var(--ps--neutral-0);
  outline: none;
  min-width: 0;
  transition: border-color 0.15s;
}
.st-neos-sync__input:focus {
  border-color: var(--ps--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ps--primary) 20%, transparent);
}
.st-neos-sync__input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.st-neos-sync__result {
  display: flex;
  align-items: center;
  gap: var(--ps--space-2);
  font-size: 13px;
  padding: var(--ps--space-2) var(--ps--space-3);
  border-radius: var(--ps--radius-sm);
}
.st-neos-sync__result.is-ok  { background: color-mix(in srgb, var(--ps--success) 12%, transparent); color: var(--ps--success); }
.st-neos-sync__result.is-err { background: color-mix(in srgb, var(--ps--danger)  12%, transparent); color: var(--ps--danger);  }
.st-neos-sync__input--key { font-family: var(--ps--font-mono); letter-spacing: 0.04em; }
.st-neos-sync__input { width: 100%; box-sizing: border-box; }
.st-neos-sync__note {
  display: flex;
  align-items: flex-start;
  gap: var(--ps--space-2);
  font-size: 12px;
  color: var(--ps--fg-muted);
  line-height: 1.5;
}
.st-neos-sync__note code {
  font-family: var(--ps--font-mono);
  font-size: 11px;
  background: var(--ps--bg-soft);
  border: 1px solid var(--ps--border);
  border-radius: 3px;
  padding: 0 4px;
  color: var(--ps--fg);
}

/* ---- Color picker popover ---- */
.st-picker {
  z-index: 9999;
  width: 264px;
  padding: 12px;
  background: var(--ps--neutral-0);
  border: 1px solid var(--ps--border-strong);
  border-radius: var(--ps--radius-md);
  box-shadow: var(--ps--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--ps--font-sans);
  color: var(--ps--fg);
  user-select: none;
}
.st-picker__sv {
  position: relative;
  width: 100%;
  height: 168px;
  border-radius: var(--ps--radius-sm);
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
}
.st-picker__sv-white {
  position: absolute; inset: 0;
  background: linear-gradient(to right, #fff, transparent);
}
.st-picker__sv-black {
  position: absolute; inset: 0;
  background: linear-gradient(to top, #000, transparent);
}
.st-picker__sv-handle {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.st-picker__hue {
  position: relative;
  height: 12px;
  border-radius: 999px;
  /* Farbkreis-Schiene des Farbwählers: reine Spektralfarben, in JEDEM Modus
     dieselben. Ein Token hier wäre sinnlos — der Nutzer wählt eine Farbe aus,
     das ist Eingabe, keine Gestaltung (PS-88). Ebenso die Weiß-/Schwarz-Verläufe
     der Sättigungsfläche darüber. */
  background: linear-gradient(to right,
    #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%,
    #0000ff 67%, #ff00ff 83%, #ff0000 100%);
  cursor: ew-resize;
  touch-action: none;
}
.st-picker__hue-handle {
  position: absolute;
  top: 50%;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.st-picker__row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.st-picker__preview {
  width: 36px; height: 36px;
  border-radius: var(--ps--radius-sm);
  border: 1px solid rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}
.st-picker__inputs {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.st-picker__field {
  display: flex;
  align-items: center;
  height: 28px;
  border: 1px solid var(--ps--border-strong);
  border-radius: var(--ps--radius-sm);
  overflow: hidden;
  background: var(--ps--neutral-0);
}
.st-picker__field span {
  font: 700 10px var(--ps--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ps--fg-subtle);
  padding: 0 8px;
  border-right: 1px solid var(--ps--border);
  background: var(--ps--bg-soft);
  height: 100%;
  display: inline-flex;
  align-items: center;
}
.st-picker__field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  height: 100%;
  background: transparent;
  font: 600 12px var(--ps--font-mono);
  padding: 0 8px;
  color: var(--ps--fg);
  text-transform: uppercase;
}
.st-picker__field input:focus { background: var(--ps--bg-soft); }
/* Sichtbarer Fokus-Ring am Feld-Wrapper (das Input selbst hat outline: 0). */
.st-picker__field:focus-within { border-color: var(--ps--primary); box-shadow: 0 0 0 3px var(--ps--focus-ring); }
/* Tastatur-Fokus für SV-Fläche + Hue-Slider (role="slider", tabbable). */
.st-picker__sv:focus-visible, .st-picker__hue:focus-visible { outline: 2px solid var(--ps--primary); outline-offset: 1px; }
.st-picker__field--num input::-webkit-outer-spin-button,
.st-picker__field--num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.st-picker__field--num input { text-transform: none; text-align: center; }
.st-picker__rgb {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
}
.st-picker__foot {
  display: flex;
  align-items: center;
  gap: 8px;
}
.st-picker__icon {
  width: 28px; height: 28px;
  border-radius: var(--ps--radius-sm);
  border: 1px solid var(--ps--border-strong);
  background: var(--ps--neutral-0);
  color: var(--ps--fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.st-picker__icon:hover { border-color: var(--ps--fg); }
.st-picker__icon i[data-lucide] { width: 14px; height: 14px; }
.st-picker__recents {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 20px;
}
.st-picker__empty {
  font-size: 11px;
  color: var(--ps--fg-subtle);
  align-self: center;
}
.st-picker__swatch {
  width: 20px; height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  cursor: pointer;
  padding: 0;
  background: transparent;
}
.st-picker__swatch:hover { transform: scale(1.1); }

/* ============================================================
   Builder — full-width Layout
   Linke Spalte: Komponenten-Menü (full height)
   Rechte Spalte: Stage (Header + Upload / Workspace)
   Workspace = Preview (flex) + Inspector (320 px)
   ============================================================ */

/* Page-wrapper override: builder fills the viewport */
.cp-page:has(.bd-shell) {
  max-width: none;
  width: 100%;
  padding: 0;
}

/* Builder shell — three docked columns. Widths set inline via JS
   (resizable). The center stage gets the gutter (padding) so menu
   and inspector look flush against the viewport edges. */
.bd-shell {
  display: grid;
  /* grid-template-columns set inline from state ([menuW | 1fr | inspW]) */
  grid-template-rows: var(--cp-chrome-h) 1fr; /* Zeile 1: Top-Bar (über Canvas+Inspector) */
  height: 100vh;
  min-height: 640px;
  box-sizing: border-box;
  /* Workspace-Ton (theme-unabhängig), damit die weiße Preview-Box
     optisch klar hervortritt. Eigener Token, NICHT --ps--neutral-300
     (das auch border-strong speist). */
  background: var(--ps--workspace);
}
/* Grid-Platzierung: Palette links über die VOLLE Höhe (beide Zeilen) — wie
   die übrigen Sidebars; die Top-Bar liegt nur rechts daneben über Canvas +
   Inspector. So beginnt die Palette bündig bei y=0. */
.bd-topbar    { grid-column: 2 / 4; grid-row: 1; min-width: 0; }
.bd-menu      { grid-column: 1;     grid-row: 1 / 3; }
.bd-stage     { grid-column: 2;     grid-row: 2; }
.bd-inspector { grid-column: 3;     grid-row: 2; }

/* Center stage — extra padding so the preview "floats" away from the
   sidebar/inspector edges (≈ +10 px gegenüber Builder v1). */
.bd-stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 26px;
}

/* Stage toolbar — controls for the preview below it (viewport switch left,
   Vorschau + Seite leeren right). Floats on the dark workspace above the
   white preview box. */
.bd-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ps--space-3);
  flex-shrink: 0;
  margin-bottom: 16px;
  min-height: 36px;
}
.bd-toolbar__actions {
  display: flex;
  align-items: center;
  gap: var(--ps--space-2);
}
/* In fullscreen the preview is a fixed overlay — drop the toolbar's reserved
   space so nothing peeks at the edges. */
.bd-stage:has(.bd-preview.is-fullscreen) .bd-toolbar { display: none; }

/* Linke Toolbar-Gruppe: Modus-Umschalter + Inhaltssprache nebeneinander. */
.bd-toolbar__modes {
  display: flex;
  align-items: center;
  gap: var(--ps--space-2);
}
/* Sprach-Umschalter (Inhalt-Mehrsprachigkeit) — kompakter PsSelect in
   Toolbar-Höhe; erscheint erst ab der zweiten Projekt-Sprache. */
.bd-lang { min-width: 160px; }
.bd-lang .ps-select__btn { height: 36px; font-size: 13px; font-weight: 600; }
.bd-lang__opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.bd-lang__flag {
  width: 20px; height: 14px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--ps--bg-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--ps--fg-muted);
}
.bd-lang__flag img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bd-lang__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-lang__iso {
  font-family: var(--ps--font-mono, monospace);
  font-size: 10px;
  color: var(--ps--fg-muted);
  flex: 0 0 auto;
}

/* Vorschau-Eintrag-Umschalter (CMS-Collections Phase 1, Task 13) — sitzt
   neben dem Sprach-Umschalter, erscheint nur auf dynamischen Seiten. Eintrags-
   Titel können länger sein als Sprachnamen, daher mehr min-width. */
.bd-item-switch { min-width: 200px; max-width: 280px; }

/* Eigenes durchsuchbares Dropdown (builder/preview-item-dropdown.jsx) statt
   PsSelect: Trigger wie ein Eingabefeld (analog .ps-select__btn), Panel mit
   Suchfeld + scrollbarer Liste. Rein clientseitiger Filter über die bereits
   geladenen Vorschau-Einträge — siehe Kommentar in der Komponente. */
.bd-itemdd { position: relative; width: 100%; }
.bd-itemdd__btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; height: 36px; padding: 0 10px;
  border: 1px solid var(--ps--border-strong); border-radius: var(--ps--radius-sm);
  background: var(--ps--neutral-0); color: var(--ps--fg);
  font: 600 13px var(--ps--font-sans); text-align: left; cursor: pointer;
  transition: border-color var(--ps--duration-fast), box-shadow var(--ps--duration-fast);
}
.bd-itemdd__btn:hover { border-color: var(--ps--fg); }
.bd-itemdd__btn.is-open { border-color: var(--ps--primary); box-shadow: 0 0 0 3px var(--ps--focus-ring); }
.bd-itemdd__icon { flex: 0 0 auto; color: var(--ps--fg-muted); }
.bd-itemdd__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-itemdd__caret { flex: 0 0 auto; color: var(--ps--fg-muted); }
.bd-itemdd__panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 70;
  width: max-content; min-width: 100%; max-width: 320px;
  background: var(--ps--neutral-0); border: 1px solid var(--ps--border); border-radius: 10px;
  box-shadow: var(--ps--shadow-lg); padding: 8px;
  animation: ps-pop-in 0.14s var(--ps--ease-out); transform-origin: top left;
}
.bd-itemdd__panel--right { left: auto; right: 0; transform-origin: top right; }
.bd-itemdd__search {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--ps--border); border-radius: 8px;
  padding: 6px 8px; margin-bottom: 6px; color: var(--ps--fg-muted);
}
.bd-itemdd__search input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font: 400 13px var(--ps--font-sans); color: var(--ps--fg);
}
.bd-itemdd__search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.bd-itemdd__list { max-height: 320px; overflow-y: auto; }
.bd-itemdd__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 8px 9px; border: 0; background: transparent; border-radius: 7px;
  font-size: 13px; font-weight: 600; color: var(--ps--fg); text-align: left; cursor: pointer;
}
.bd-itemdd__opt:hover { background: var(--ps--bg-soft); }
.bd-itemdd__opt.is-active { background: var(--ps--primary-soft); color: var(--ps--primary); }
.bd-itemdd__opt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-itemdd__empty { padding: 10px 9px; font-size: 12.5px; color: var(--ps--fg-muted); }

/* Fortschritt der Seiten-KI-Übersetzung (builder/translate.jsx). */
.cp-translate__bar {
  height: 6px;
  border-radius: 3px;
  background: var(--ps--bg-soft);
  overflow: hidden;
}
.cp-translate__fill {
  height: 100%;
  background: var(--ps--primary);
  transition: width 0.2s ease;
}

/* ---- Upload help card ---- */
.bd-upload {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--ps--neutral-0);
  border: 2px dashed var(--ps--border-strong);
  border-radius: var(--ps--radius-md);
  padding: var(--ps--space-8) var(--ps--space-7);
  min-height: 360px;
}
.bd-upload__icon {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ps--primary) 12%, transparent);
  color: var(--ps--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--ps--space-4);
}
.bd-upload__icon i[data-lucide] { width: 26px; height: 26px; }
.bd-upload__err {
  margin-top: var(--ps--space-4);
  padding: var(--ps--space-3) var(--ps--space-4);
  border: 1px solid var(--ps--danger);
  border-radius: var(--ps--radius-sm);
  background: color-mix(in srgb, var(--ps--danger) 8%, transparent);
  color: var(--ps--danger);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: var(--ps--space-2);
}
.bd-upload__err i[data-lucide] { width: 16px; height: 16px; }
.bd-upload__details {
  margin-top: var(--ps--space-5);
  width: 100%;
  max-width: 640px;
  text-align: left;
}
.bd-upload__details summary {
  font-size: 13px;
  font-weight: 700;
  color: var(--ps--fg);
  cursor: pointer;
  padding: var(--ps--space-2) 0;
}
.bd-upload__pre {
  background: var(--ps--bg-soft);
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-sm);
  padding: var(--ps--space-4);
  margin: var(--ps--space-3) 0 0;
  font-family: var(--ps--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ps--fg);
  white-space: pre;
  overflow-x: auto;
}

/* ---- Left menu (docked, flush to viewport edge, resizable) ---- */
.bd-menu {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ps--bg-soft);
  border-right: 1px solid var(--ps--border);
  overflow: hidden;
  min-height: 0;
}
.bd-menu__head {
  height: var(--cp-chrome-h);          /* bündig mit Top-Bar / Subnav-Kopf */
  padding: 0 var(--ps--space-4);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--ps--border);
  background: var(--ps--bg-soft);
  flex-shrink: 0;
  box-sizing: border-box;
}
.bd-menu__headRow {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ps--space-3);
}
.bd-menu__headLabel { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bd-menu__headTools { display: flex; gap: 4px; flex-shrink: 0; }
.bd-menu__iconBtn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ps--neutral-0);
  border: 1px solid var(--ps--border-strong);
  border-radius: var(--ps--radius-sm);
  color: var(--ps--fg-muted);
  cursor: pointer;
  transition: border-color var(--ps--duration-fast), color var(--ps--duration-fast), background var(--ps--duration-fast);
}
.bd-menu__iconBtn:hover {
  border-color: var(--ps--fg);
  color: var(--ps--fg);
  background: var(--ps--neutral-0);
}
.bd-menu__head strong { font-size: 14px; font-weight: 900; color: var(--ps--fg); letter-spacing: -0.005em; }
.bd-menu__sub {
  font-size: 11px;
  font-family: var(--ps--font-mono);
  color: var(--ps--fg-muted);
}
.bd-menu__list {
  flex: 1;
  overflow-y: auto;
  padding: var(--ps--space-2);
  min-height: 0;
}

/* Palette categories (Layout / Content) */
.bd-menu__cat { margin-bottom: var(--ps--space-3); }
.bd-menu__catHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ps--space-2);
  padding: var(--ps--space-2) var(--ps--space-2) var(--ps--space-1);
}
.bd-menu__catLabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--ps--tracking-caps);
  text-transform: uppercase;
  color: var(--ps--fg-subtle);
}
.bd-menu__catHint { font-size: 10px; color: var(--ps--fg-subtle); }

/* Transient hint when a Content-Komponente has no Section target */
.bd-menu__hint {
  display: flex;
  align-items: center;
  gap: var(--ps--space-2);
  margin: var(--ps--space-2);
  padding: var(--ps--space-3);
  border-radius: var(--ps--radius-md);
  background: color-mix(in srgb, var(--ps--warning) 12%, var(--ps--bg));
  border: 1px solid color-mix(in srgb, var(--ps--warning) 40%, transparent);
  color: var(--ps--fg);
  font-size: 12px;
  line-height: 1.4;
}
.bd-menu__hint svg { color: var(--ps--warning); flex-shrink: 0; }

/* Column resize handle — 4px hit-area sits at the column edge, hover
   reveals a 2px primary bar. During drag the iframe's pointer-events
   are turned off (in JS) so mousemoves keep reaching the parent. */
.bd-resize {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  z-index: 5;
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  transition: background var(--ps--duration-fast);
}
.bd-resize--right { right: -3px; }
.bd-resize--left  { left:  -3px; }
.bd-resize:hover { background: color-mix(in srgb, var(--ps--primary) 10%, transparent); }
/* Tastatur-Fokus des tabbaren Trenners (Pfeil links/rechts = Breite ändern). */
.bd-resize:focus-visible { outline: none; background: color-mix(in srgb, var(--ps--primary) 18%, transparent); }
.bd-resize:focus-visible .bd-resize__grip { background: var(--ps--primary); height: 64px; }
.bd-resize__grip {
  width: 2px;
  height: 32px;
  border-radius: 999px;
  background: var(--ps--border-strong);
  transition: background var(--ps--duration-fast), height var(--ps--duration-fast);
}
.bd-resize:hover .bd-resize__grip { background: var(--ps--primary); height: 64px; }

.bd-group { margin-bottom: var(--ps--space-2); }
.bd-group__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--ps--space-2);
  padding: var(--ps--space-2) var(--ps--space-3);
  background: transparent;
  border: 0;
  border-radius: var(--ps--radius-sm);
  font: 700 12px var(--ps--font-sans);
  color: var(--ps--fg);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: var(--ps--tracking-caps);
}
.bd-group__head:hover { background: var(--ps--neutral-0); }
.bd-group__head > span:nth-child(2) { flex: 1; text-align: left; }
.bd-group__count {
  font-family: var(--ps--font-mono);
  font-size: 11px;
  color: var(--ps--fg-subtle);
  padding: 2px 6px;
  background: var(--ps--neutral-0);
  border-radius: var(--ps--radius-pill);
  text-transform: none;
  letter-spacing: 0;
}
.bd-group__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0 var(--ps--space-2);
}
.bd-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--ps--space-2) var(--ps--space-3);
  background: var(--ps--neutral-0);
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-sm);
  cursor: grab;
  text-align: left;
  position: relative;
  transition: border-color var(--ps--duration-fast), background var(--ps--duration-fast);
  font-family: var(--ps--font-sans);
  color: inherit;
}
.bd-card:hover {
  border-color: var(--ps--border-strong);
  background: var(--ps--neutral-0);
}
.bd-card:active { cursor: grabbing; }
.bd-card[draggable=false] { cursor: not-allowed; opacity: 0.55; }
.bd-card__name { font-size: 13px; font-weight: 700; color: var(--ps--fg); }
.bd-card__desc { font-size: 11px; color: var(--ps--fg-muted); line-height: 1.35; }
.bd-card__badge {
  position: absolute;
  top: 6px; right: 8px;
  font-size: 9px;
  font-family: var(--ps--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ps--primary);
}
/* Familien-Karte in der Palette: Repräsentant + Spalten-Auswahl darunter.
   Die Spaltenzahl, die hier gewählt ist, wird beim Reinziehen platziert. */
.bd-card--family, .bd-card--cols { gap: 6px; }
.bd-cols {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  flex-wrap: wrap;
}
.bd-cols__label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: var(--ps--font-mono);
  color: var(--ps--fg-subtle);
  margin-right: 1px;
}
/* Auch in der Palette die 24px-Mindest-Zielgröße halten, nur die Schrift kompakt. */
.bd-cols .cp-coldot { width: 24px; height: 24px; font-size: 10px; }
/* Medien-fähig-Badge im Gruppen-Header (Palette). */
.bd-group__media { flex: 0 0 auto; }

/* ---- Palette-Filter: Medien-Slot selektiert ---- */
.bd-menu__filter {
  display: flex;
  align-items: center;
  gap: var(--ps--space-2);
  margin: 0 var(--ps--space-3) var(--ps--space-2);
  padding: var(--ps--space-2) var(--ps--space-3);
  background: color-mix(in srgb, var(--ps--primary) 9%, var(--ps--neutral-0));
  border: 1px solid color-mix(in srgb, var(--ps--primary) 35%, transparent);
  border-radius: var(--ps--radius-sm);
  font: 600 11px var(--ps--font-sans);
  color: var(--ps--fg);
}
.bd-menu__filter > span { flex: 1; }
.bd-menu__filter .bd-group__media,
.bd-menu__filter svg { color: var(--ps--primary); }
.bd-menu__filterClear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0;
  border: 0; background: transparent; border-radius: var(--ps--radius-sm);
  color: var(--ps--fg-muted); cursor: pointer;
}
.bd-menu__filterClear:hover { background: var(--ps--neutral-0); color: var(--ps--fg); }
.bd-menu__filterEmpty {
  padding: var(--ps--space-3);
  font: 12px var(--ps--font-sans);
  color: var(--ps--fg-muted);
}

/* ---- Inspector: Medien-Slot-Modus ---- */
.bd-insp__mediamodes {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: var(--ps--bg-soft);
  border-radius: var(--ps--radius-sm);
  margin-bottom: var(--ps--space-2);
}
.bd-mediamode {
  flex: 1;
  padding: 6px 4px;
  border: 0; background: transparent; cursor: pointer;
  font: 600 11px var(--ps--font-sans); color: var(--ps--fg-muted);
  border-radius: calc(var(--ps--radius-sm) - 2px);
}
.bd-mediamode:hover { color: var(--ps--fg); }
.bd-mediamode.is-active { background: var(--ps--neutral-0); color: var(--ps--fg); box-shadow: var(--ps--shadow-sm); }

/* ---- Center preview ---- */
.bd-preview {
  display: flex;
  flex: 1;
  flex-direction: column;
  background: var(--ps--neutral-0);
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-md);
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  width: 100%;
  margin: 0 auto;
  box-shadow: var(--ps--shadow-md);
  transition: max-width var(--ps--duration-base) var(--ps--ease-standard);
}
.bd-preview--desktop { max-width: none; }
.bd-preview--tablet  { max-width: 820px; }
.bd-preview--mobile  { max-width: 420px; }
/* Fullscreen overrides viewport sizing entirely */
.bd-preview.is-fullscreen { max-width: none !important; margin: 0; }
.bd-preview__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ps--space-2) var(--ps--space-4);
  border-bottom: 1px solid var(--ps--border);
  background: var(--ps--bg-soft);
  color: var(--ps--fg-muted);
}
.bd-iframe {
  flex: 1;
  border: 0;
  background: var(--ps--neutral-0);
  min-height: 0;
  width: 100%;
  transition: box-shadow var(--ps--duration-fast);
}
.bd-iframe.is-drop-target {
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--ps--primary) 60%, transparent);
}

/* ---- Fullscreen preview overlay ---- */
.bd-preview.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9000;
  border-radius: 0;
  border: 0;
  background: var(--ps--neutral-0);
  animation: bd-preview-fade .14s ease;
}
.bd-preview.is-fullscreen .bd-preview__bar { display: none; }
@keyframes bd-preview-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.bd-preview__close {
  position: fixed;
  bottom: var(--ps--space-5);
  right: var(--ps--space-5);
  z-index: 1;
  height: 44px;
  padding: 0 var(--ps--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--ps--space-2);
  border-radius: 999px;
  border: 0;
  background: rgba(10, 21, 48, 0.78);
  color: var(--ps--neutral-0);
  font: 700 13px var(--ps--font-sans);
  cursor: pointer;
  backdrop-filter: blur(8px);
  box-shadow: var(--ps--shadow-lg);
  transition: background var(--ps--duration-fast), transform var(--ps--duration-fast);
}
.bd-preview__close:hover { background: rgba(10, 21, 48, 0.92); transform: translateY(-1px); }
.bd-preview__close kbd {
  font-family: var(--ps--font-mono);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
}
.bd-preview__err {
  display: flex;
  align-items: flex-start;
  gap: var(--ps--space-3);
  padding: var(--ps--space-3) var(--ps--space-4);
  background: color-mix(in srgb, var(--ps--danger) 10%, var(--ps--neutral-0));
  border-bottom: 1px solid color-mix(in srgb, var(--ps--danger) 40%, transparent);
  color: var(--ps--fg);
}
.bd-preview__err > i[data-lucide] {
  width: 18px; height: 18px;
  color: var(--ps--danger);
  flex-shrink: 0;
  margin-top: 1px;
}
.bd-preview__err > div { flex: 1; min-width: 0; }
/* Hinweis über der Arbeitsfläche, wenn eine Fremdänderung nachgezogen wurde
   (anderes Fenster, anderes Gerät, Geppetto). Neutral gehalten: es ist kein
   Fehler, sondern eine Erklärung, warum sich gerade etwas verändert hat —
   .bd-preview__err daneben bleibt dem Fehlerfall vorbehalten. */
.bd-preview__note {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 6;
  display: flex; align-items: center; gap: 10px;
  max-width: min(560px, calc(100% - 32px));
  padding: 10px 12px; border-radius: 10px;
  background: var(--ps--neutral-0); border: 1px solid var(--ps--border-strong);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  font-family: var(--ps--font-sans); font-size: 13px; color: var(--ps--fg);
}
.bd-preview__note svg { flex: 0 0 auto; color: var(--ps--fg-muted); }
.bd-preview__err strong { font-size: 13px; font-weight: 700; color: var(--ps--danger); }
.bd-preview__err button { color: var(--ps--fg-muted); flex-shrink: 0; padding: 0 var(--ps--space-2); height: 28px; }
.bd-preview__err button i[data-lucide] { width: 14px; height: 14px; }

/* ---- Right inspector ---- */
.bd-inspector {
  position: relative;
  background: var(--ps--neutral-0);
  border-left: 1px solid var(--ps--border);
  overflow-y: auto;
  min-height: 0;
}
.bd-inspector__empty {
  padding: var(--ps--space-5);
  text-align: center;
  color: var(--ps--fg-muted);
  font-size: 13px;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ps--space-3);
}
.bd-inspector__empty i[data-lucide] {
  width: 28px; height: 28px;
  color: var(--ps--fg-subtle);
}
.bd-inspector__empty strong {
  color: var(--ps--fg);
  font-size: 14px;
  font-weight: 700;
}

.bd-insp { padding: var(--ps--space-4); display: flex; flex-direction: column; gap: var(--ps--space-4); }
.bd-insp__head {
  padding-bottom: var(--ps--space-4);
  border-bottom: 1px solid var(--ps--border);
}
/* Eigenschaften/CMS switch reuses .bd-menu__tabs/.bd-menu__tab (Komponenten |
   Struktur pattern) — but the inspector has no fixed-height .bd-menu__head
   wrapper to stretch/underline against, so give the tab bar its own compact
   height + baseline here instead of touching .bd-menu__tab globally. */
.bd-insp__tabs.bd-menu__tabs {
  height: auto;
  border-bottom: 1px solid var(--ps--border);
}
.bd-insp__tabs.bd-menu__tabs .bd-menu__tab {
  padding: var(--ps--space-2) 0;
}
.bd-insp__section {
  display: flex;
  flex-direction: column;
  gap: var(--ps--space-2);
}
.bd-insp__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--ps--tracking-caps);
  text-transform: uppercase;
  color: var(--ps--fg-subtle);
}
/* Repeater-Inspector „Einträge" (CMS Phase C): Das Zeilen-Layout kommt vom
   st-prop__list--inspector-Wrapper (1fr-Stack fürs schmale Panel, s. o.);
   hier nur die Feinheiten — Zahlen-Paar, Filter-Karten, Eingaben im
   PsSelect-Look (.ps-select__btn in shell.css). */
.bd-dynq__nums { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ps--space-2); }
.bd-dynq__num { display: flex; flex-direction: column; gap: var(--ps--space-1); min-width: 0; }
.bd-dynq__numLabel { font-size: 12px; font-weight: 600; color: var(--ps--fg-muted); }
.bd-dynq__num input,
.bd-dynq__rule input {
  width: 100%; height: 40px; padding: 0 12px;
  border: 1px solid var(--ps--border-strong); border-radius: var(--ps--radius-sm);
  background: var(--ps--neutral-0); color: var(--ps--fg);
  font: 400 14px var(--ps--font-sans);
}
.bd-dynq__num input:focus-visible,
.bd-dynq__rule input:focus-visible {
  outline: none; border-color: var(--ps--primary); box-shadow: 0 0 0 3px var(--ps--focus-ring);
}
.bd-dynq__filters { display: flex; flex-direction: column; gap: var(--ps--space-2); align-items: flex-start; }
.bd-dynq__rule {
  width: 100%; display: flex; flex-direction: column; gap: var(--ps--space-1);
  border: 1px solid var(--ps--border); border-radius: var(--ps--radius-sm);
  background: var(--ps--bg-soft); padding: var(--ps--space-2);
}
.bd-dynq__ruleRow { display: flex; align-items: center; gap: var(--ps--space-1); }
.bd-dynq__ruleRow .ps-select { flex: 1; min-width: 0; }
.bd-dynq__ruleRemove {
  flex: 0 0 auto; border: 0; background: none; cursor: pointer;
  color: var(--ps--fg-muted); padding: 6px; border-radius: var(--ps--radius-sm);
}
.bd-dynq__ruleRemove:hover { color: var(--ps--fg); background: var(--ps--neutral-0); }
/* CMS-Tab: gebundene Ziele violett markieren (Spec Binding-Markierung §2). */
.bd-cms-bound .st-prop__label { color: var(--ps--cms-strong); }
.bd-cms-bound .ps-select__btn {
  border-color: var(--ps--cms);
  background: var(--ps--cms-soft);
  color: var(--ps--cms-strong);
}
.bd-cms-bound .ps-select__btn:hover { border-color: var(--ps--cms-strong); }
.bd-cms__format { display: flex; flex-direction: column; gap: var(--ps--space-1); margin-top: var(--ps--space-1); }
.bd-cms__formatLabel { font-size: 12px; font-weight: 600; color: var(--ps--fg-muted); }
.bd-insp__variants { display: flex; flex-direction: column; gap: 4px; }
.bd-insp__hint {
  margin-top: var(--ps--space-2);
  font-size: 11px;
  line-height: 1.4;
  color: var(--ps--fg-muted);
}
.bd-variant {
  display: flex;
  align-items: flex-start;
  gap: var(--ps--space-3);
  padding: var(--ps--space-2) var(--ps--space-3);
  background: var(--ps--bg-soft);
  border: 1px solid transparent;
  border-radius: var(--ps--radius-sm);
  cursor: pointer;
  text-align: left;
  font-family: var(--ps--font-sans);
  color: inherit;
  width: 100%;
}
.bd-variant:hover { border-color: var(--ps--border-strong); }
.bd-variant.is-active { background: color-mix(in srgb, var(--ps--primary) 6%, var(--ps--neutral-0)); border-color: var(--ps--primary); }
.bd-variant__dot {
  width: 12px; height: 12px;
  border-radius: 999px;
  border: 2px solid var(--ps--border-strong);
  background: var(--ps--neutral-0);
  flex-shrink: 0;
  margin-top: 2px;
  transition: border-color var(--ps--duration-fast);
}
.bd-variant.is-active .bd-variant__dot {
  border-color: var(--ps--primary);
  background: var(--ps--primary);
  box-shadow: inset 0 0 0 2px var(--ps--neutral-0);
}
.bd-insp__meta { font-size: 11px; }
.bd-insp__meta > div { display: flex; justify-content: space-between; padding: 4px 0; border-top: 1px solid var(--ps--border); }
.bd-insp__meta dt { color: var(--ps--fg-subtle); font-family: var(--ps--font-mono); margin: 0; }
.bd-insp__meta dd { color: var(--ps--fg); font-family: var(--ps--font-mono); margin: 0; }

/* ---- Inspector slot list ---- */
.bd-insp__slots { display: flex; flex-direction: column; gap: var(--ps--space-3); }
.bd-slot {
  background: var(--ps--bg-soft);
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-sm);
  padding: var(--ps--space-2) var(--ps--space-3);
}
.bd-slot__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ps--space-2);
}
.bd-slot__name { font-size: 13px; font-weight: 700; color: var(--ps--fg); }
.bd-slot__status { font-size: 11px; color: var(--ps--fg-muted); margin-top: 2px; }
.bd-slot__list { list-style: none; padding: 0; margin: var(--ps--space-2) 0 0; display: flex; flex-direction: column; gap: 4px; }
.bd-slot__child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: var(--ps--space-2);
  background: var(--ps--neutral-0);
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-sm);
  cursor: pointer;
  text-align: left;
  font-family: var(--ps--font-sans);
}
.bd-slot__child:hover { border-color: var(--ps--border-strong); }
.bd-slot__childName { font-size: 12px; font-weight: 700; color: var(--ps--fg); }
.bd-slot__childComp { font-size: 10px; font-family: var(--ps--font-mono); color: var(--ps--fg-muted); letter-spacing: 0.04em; text-transform: uppercase; }

/* ============================================================
   Medien — Ordnerbaum in der Subnavigation
   ============================================================ */
.cp-subnav__headAdd {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-sm);
  background: var(--ps--bg);
  color: var(--ps--fg-muted);
  cursor: pointer;
  transition: background var(--ps--duration-fast) var(--ps--ease-standard),
              color var(--ps--duration-fast) var(--ps--ease-standard);
}
.cp-subnav__headAdd:hover { background: var(--ps--primary-soft); color: var(--ps--primary); border-color: var(--ps--primary-soft); }
.cp-subnav__headAdd i { width: 15px; height: 15px; }

.da-foldernav {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 1px var(--ps--space-2) 1px 4px;
  border-radius: var(--ps--radius-md);
  color: var(--ps--fg);
  font-size: 0.875rem;
}
.da-foldernav:hover:not(.is-active) { background: var(--ps--bg-soft); }
/* Auswahl-Zustand: siehe shell.css, Abschnitt „Auswahl-Zustand“ (eine Quelle). */

.da-foldernav__chevron {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 24px;
  border: 0; background: transparent;
  color: var(--ps--fg-subtle);
  cursor: pointer; border-radius: var(--ps--radius-sm);
}
.da-foldernav__chevron--empty { cursor: default; }
.da-foldernav__chevron i { width: 14px; height: 14px; }

.da-foldernav__main {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: var(--ps--space-2);
  padding: var(--ps--space-1) 0;
  border: 0; background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.da-foldernav__main > i { width: 16px; height: 16px; flex: none; color: var(--ps--fg-subtle); }
.da-foldernav__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.da-foldernav__add {
  flex: none; opacity: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border: 0; border-radius: var(--ps--radius-sm);
  background: transparent; color: var(--ps--fg-muted); cursor: pointer;
  transition: opacity var(--ps--duration-fast), background var(--ps--duration-fast), color var(--ps--duration-fast);
}
.da-foldernav:hover .da-foldernav__add,
.da-foldernav:focus-within .da-foldernav__add { opacity: 1; }
.da-foldernav__add:hover { background: var(--ps--primary-soft); color: var(--ps--primary); }
.da-foldernav__add i { width: 14px; height: 14px; }

.da-foldernav__draft {
  display: flex; align-items: center; gap: var(--ps--space-2);
  padding: 2px var(--ps--space-2);
}
.da-foldernav__draft > i { width: 16px; height: 16px; flex: none; color: var(--ps--fg-subtle); }
.da-foldernav__input {
  flex: 1 1 auto; min-width: 0;
  padding: 4px 8px;
  border: 1px solid var(--ps--primary);
  border-radius: var(--ps--radius-sm);
  font: inherit; font-size: 0.85rem;
  background: var(--ps--bg); color: var(--ps--fg);
}
.da-foldernav__input:focus { outline: none; box-shadow: 0 0 0 3px var(--ps--focus-ring); }

.da-empty--folder { margin: 0; }

/* Vorschau in Upload-Queue & Galerie: Bild vs. PDF-Platzhalter */
.da-thumb { display: block; width: 100%; height: 100%; }
.da-thumb--img { object-fit: contain; }
.da-thumb--pdf {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--ps--danger);
  background: color-mix(in srgb, var(--ps--danger) 8%, var(--ps--bg-soft));
  font-size: 0.66rem; font-weight: 700; letter-spacing: var(--ps--tracking-wide);
}
.da-thumb--pdf i { width: 22px; height: 22px; }
.da-card__pdf {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ps--space-2);
  width: 100%; height: 100%; min-height: 128px;
  color: var(--ps--danger); text-decoration: none;
  background: color-mix(in srgb, var(--ps--danger) 7%, var(--ps--bg-soft));
  font-size: 0.8rem; font-weight: 600;
  transition: background var(--ps--duration-fast) var(--ps--ease-standard);
}
.da-card__pdf:hover { background: color-mix(in srgb, var(--ps--danger) 14%, var(--ps--bg-soft)); }
.da-card__pdf i { width: 34px; height: 34px; }

/* ============================================================
   Design Assets — uploader + gallery
   ============================================================ */
.da-uploader {
  display: flex;
  flex-direction: column;
  gap: var(--ps--space-4);
}

.da-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ps--space-2);
  padding: var(--ps--space-9) var(--ps--space-6);
  border: 1.5px dashed var(--ps--border-strong);
  border-radius: var(--ps--radius-lg);
  background: var(--ps--bg-soft);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--ps--duration-fast), background var(--ps--duration-fast), transform var(--ps--duration-fast);
}
.da-dropzone:hover,
.da-dropzone.is-dragover {
  border-color: var(--ps--primary);
  background: color-mix(in srgb, var(--ps--primary) 6%, var(--ps--neutral-0));
}
.da-dropzone.is-dragover {
  transform: scale(1.005);
}
.da-dropzone__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ps--primary) 10%, var(--ps--neutral-0));
  color: var(--ps--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--ps--space-2);
}
.da-dropzone__icon svg { width: 26px; height: 26px; }
.da-dropzone__title {
  font-size: 15px;
  font-weight: 800;
  color: var(--ps--fg);
  letter-spacing: -0.01em;
}
.da-dropzone__sub {
  font-size: 12px;
  color: var(--ps--fg-muted);
  font-family: var(--ps--font-mono);
}

.da-uploader__err {
  font-size: 12px;
  color: var(--ps--danger);
  padding: var(--ps--space-2) var(--ps--space-3);
  background: color-mix(in srgb, var(--ps--danger) 8%, var(--ps--neutral-0));
  border-radius: var(--ps--radius-sm);
  border: 1px solid color-mix(in srgb, var(--ps--danger) 22%, transparent);
}

.da-queue {
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-md);
  background: var(--ps--neutral-0);
  overflow: hidden;
}
.da-queue__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ps--space-3) var(--ps--space-4);
  background: var(--ps--bg-soft);
  border-bottom: 1px solid var(--ps--border);
}
.da-queue__title {
  display: inline-flex;
  align-items: center;
  gap: var(--ps--space-2);
  font-size: 13px;
  font-weight: 800;
  color: var(--ps--fg);
}
.da-queue__title svg { width: 16px; height: 16px; color: var(--ps--primary); }
.da-queue__list {
  display: flex;
  flex-direction: column;
}

.da-queueRow {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: var(--ps--space-4);
  padding: var(--ps--space-3) var(--ps--space-4);
  border-bottom: 1px solid var(--ps--border);
}
.da-queueRow:last-child { border-bottom: 0; }
.da-queueRow__thumb {
  width: 72px;
  height: 72px;
  border-radius: var(--ps--radius-sm);
  border: 1px solid var(--ps--border);
  background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0/12px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.da-queueRow__thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.da-queueRow__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ps--space-3);
}
.da-queueRow__file { display: flex; flex-direction: column; gap: 2px; }
.da-queueRow__filename {
  font-size: 13px;
  font-weight: 700;
  color: var(--ps--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.da-queueRow__filemeta {
  font-size: 11px;
  color: var(--ps--fg-muted);
  font-family: var(--ps--font-mono);
}
.da-queueRow__fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ps--space-3);
}
.da-queueRow__remove {
  border: 0;
  background: transparent;
  width: 32px;
  height: 32px;
  border-radius: var(--ps--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ps--fg-muted);
  cursor: pointer;
  transition: background var(--ps--duration-fast), color var(--ps--duration-fast);
}
.da-queueRow__remove:hover {
  background: color-mix(in srgb, var(--ps--danger) 10%, var(--ps--neutral-0));
  color: var(--ps--danger);
}
.da-queueRow__remove svg { width: 16px; height: 16px; }

/* ---- Shared field + type picker ---- */
.da-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.da-field__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ps--fg-muted);
  font-family: var(--ps--font-mono);
  font-weight: 700;
}
.da-typePick {
  display: flex;
  flex-wrap: wrap;
  background: var(--ps--bg-soft);
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-sm);
  padding: 2px;
  gap: 2px;
}
.da-typePick__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ps--fg-muted);
  background: transparent;
  border: 0;
  border-radius: calc(var(--ps--radius-sm) - 2px);
  cursor: pointer;
  transition: background var(--ps--duration-fast), color var(--ps--duration-fast);
  font-family: var(--ps--font-sans);
}
.da-typePick__btn svg { width: 14px; height: 14px; }
.da-typePick__btn:hover:not(.is-active) { color: var(--ps--fg); }
.da-typePick__btn.is-active {
  background: var(--ps--neutral-0);
  color: var(--ps--fg);
  box-shadow: 0 1px 2px rgba(31, 71, 60, 0.08);
}

.da-input {
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--ps--border-strong);
  border-radius: var(--ps--radius-sm);
  background: var(--ps--neutral-0);
  font-family: var(--ps--font-sans);
  color: var(--ps--fg);
  min-width: 220px;
}
.da-input:focus {
  outline: 2px solid color-mix(in srgb, var(--ps--primary) 40%, transparent);
  outline-offset: 1px;
  border-color: var(--ps--primary);
}
.da-input.is-error {
  border-color: var(--ps--danger);
  background: color-mix(in srgb, var(--ps--danger) 4%, var(--ps--neutral-0));
}

/* ---- Filter bar ---- */
.da-filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ps--space-2);
  margin-bottom: var(--ps--space-4);
}
.da-filterbar__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ps--fg-muted);
  background: var(--ps--bg-soft);
  border: 1px solid var(--ps--border);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--ps--duration-fast), color var(--ps--duration-fast), border-color var(--ps--duration-fast);
}
.da-filterbar__btn:hover {
  color: var(--ps--fg);
  border-color: var(--ps--border-strong);
}
.da-filterbar__btn.is-active {
  background: var(--ps--fg);
  border-color: var(--ps--fg);
  color: var(--ps--neutral-0);
}
.da-filterbar__count {
  font-family: var(--ps--font-mono);
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 12%, transparent);
}

/* ---- Empty state ---- */
.da-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--ps--space-9) var(--ps--space-6);
  border: 1px dashed var(--ps--border);
  border-radius: var(--ps--radius-md);
  background: var(--ps--bg-soft);
  gap: var(--ps--space-2);
}
.da-empty__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ps--neutral-0);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ps--fg-subtle);
  margin-bottom: var(--ps--space-2);
}
.da-empty__icon svg { width: 22px; height: 22px; }
.da-empty__title { font-size: 14px; font-weight: 800; color: var(--ps--fg); }
.da-empty__hint { font-size: 12px; color: var(--ps--fg-muted); }

/* ---- Gallery grid + card ---- */
.da-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--ps--space-4);
}
.da-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-md);
  background: var(--ps--neutral-0);
  overflow: hidden;
  transition: border-color var(--ps--duration-fast), box-shadow var(--ps--duration-fast);
}
.da-card:hover {
  border-color: var(--ps--border-strong);
  box-shadow: 0 4px 16px rgba(31, 71, 60, 0.06);
}
.da-card.is-editing {
  border-color: var(--ps--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ps--primary) 14%, transparent);
}
.da-card__preview {
  position: relative;
  aspect-ratio: 16 / 10;
  background: repeating-conic-gradient(var(--ps--neutral-100) 0 25%, var(--ps--bg) 0 50%) 0/16px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ps--space-4);
  border-bottom: 1px solid var(--ps--border);
}
.da-card__preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.da-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(31, 71, 60, 0.92);   /* Tiefgrün */
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.da-card__badge svg { width: 12px; height: 12px; }
.da-card__badge--logo { background: rgba(0, 129, 93, 0.92); }    /* Primärgrün */
.da-card__badge--favicon { background: rgba(68, 82, 75, 0.92); } /* Neutral-Grün */
.da-card__badge--icon { background: rgba(217, 119, 6, 0.92); }   /* Amber */
.da-card__badge--sectionDecor { background: rgba(37, 99, 235, 0.92); } /* Blau */

.da-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--ps--space-2);
  padding: var(--ps--space-3) var(--ps--space-4);
}
.da-card__label {
  font-size: 14px;
  font-weight: 800;
  color: var(--ps--fg);
  letter-spacing: -0.005em;
}
.da-card__filename {
  font-size: 12px;
  color: var(--ps--fg-muted);
  font-family: var(--ps--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.da-card__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ps--space-2);
  margin: 4px 0 0;
  padding: var(--ps--space-2) 0 0;
  border-top: 1px solid var(--ps--border);
}
.da-card__meta div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.da-card__meta dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ps--fg-subtle);
  font-family: var(--ps--font-mono);
  margin: 0;
}
.da-card__meta dd {
  font-size: 12px;
  color: var(--ps--fg);
  font-weight: 600;
  margin: 0;
}

.da-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ps--space-2);
  padding-top: var(--ps--space-2);
  border-top: 1px solid var(--ps--border);
  margin-top: var(--ps--space-2);
}
.da-card__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ps--fg-muted);
  background: var(--ps--bg-soft);
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-sm);
  cursor: pointer;
  font-family: var(--ps--font-sans);
  transition: background var(--ps--duration-fast), color var(--ps--duration-fast), border-color var(--ps--duration-fast);
}
.da-card__btn svg { width: 13px; height: 13px; }
.da-card__btn:hover {
  color: var(--ps--fg);
  border-color: var(--ps--border-strong);
}
.da-card__btn--danger:hover {
  color: var(--ps--danger);
  background: color-mix(in srgb, var(--ps--danger) 8%, var(--ps--neutral-0));
  border-color: color-mix(in srgb, var(--ps--danger) 30%, var(--ps--border));
}

.da-card__edit {
  display: flex;
  flex-direction: column;
  gap: var(--ps--space-3);
  padding: var(--ps--space-3) var(--ps--space-4) var(--ps--space-4);
}
.da-card__editActions {
  display: flex;
  justify-content: flex-end;
  gap: var(--ps--space-2);
}
.da-card__editHint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ps--fg-muted);
}
.da-card__editHint svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }

@media (max-width: 720px) {
  .da-queueRow {
    grid-template-columns: 56px 1fr auto;
    gap: var(--ps--space-3);
  }
  .da-queueRow__thumb { width: 56px; height: 56px; }
  .da-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Theming Inspector — modal that lists every design-token a
   variant consumes, grouped by category with a visual preview.
   ============================================================ */
.cp-modal--theming { max-width: 760px; }
.cp-modal--theming .cp-modal__foot {
  justify-content: space-between;
  align-items: center;
}
.thx-foot__hint {
  display: inline-flex;
  align-items: center;
  gap: var(--ps--space-2);
  font-size: 12px;
  color: var(--ps--fg-muted);
}

/* Accordion: each category collapses by default. Header shows label +
   count + a compact preview strip so users scan at a glance without
   opening anything. */
.thx-group {
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-sm);
  background: var(--ps--neutral-0);
  overflow: hidden;
  /* The modal body is a vertical flex container with overflow-y: auto.
     Without flex-shrink:0, the column flex algorithm compresses children
     toward their min-content height, which collapses our accordion rows
     down to a single horizontal line when one section is expanded. */
  flex-shrink: 0;
}
.thx-group + .thx-group { margin-top: var(--ps--space-2); }
.thx-group__head {
  display: grid;
  grid-template-columns: 16px auto auto 1fr;
  align-items: center;
  gap: var(--ps--space-3);
  width: 100%;
  padding: var(--ps--space-3) var(--ps--space-3);
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: background var(--ps--duration-fast);
}
.thx-group__head:hover { background: var(--ps--bg-soft); }
.thx-group__chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ps--fg-subtle);
  transition: transform var(--ps--duration-base) var(--ps--ease-standard);
}
.thx-group.is-open .thx-group__chev { transform: rotate(90deg); color: var(--ps--fg); }
.thx-group__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ps--tracking-caps);
  color: var(--ps--fg);
  white-space: nowrap;
}
.thx-group__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  background: var(--ps--bg-soft);
  border: 1px solid var(--ps--border);
  border-radius: 999px;
  font-family: var(--ps--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--ps--fg-muted);
}
.thx-group__prevWrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}
.thx-group__body {
  padding: 0 var(--ps--space-3) var(--ps--space-3);
  border-top: 1px dashed var(--ps--border);
  padding-top: var(--ps--space-3);
}
.thx-group__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--ps--space-2);
}
.thx-group__items--shadows { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.thx-group__items--fontFamilies { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* ---- Preview strip in collapsed accordion header ---- */
.thx-prev {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  max-width: 100%;
  flex-wrap: nowrap;
  overflow: hidden;
}
.thx-prev__more {
  font-family: var(--ps--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--ps--fg-subtle);
  margin-left: 2px;
}
.thx-prev__sw {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid var(--ps--border);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}
.thx-prev__sh {
  display: inline-block;
  width: 20px;
  height: 12px;
  border-radius: 3px;
  background: var(--ps--neutral-0);
  border: 1px solid var(--ps--border);
  flex-shrink: 0;
}
.thx-prev__fa {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--ps--fg);
  padding: 0 4px;
  flex-shrink: 0;
}
.thx-prev__chip {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  background: var(--ps--bg-soft);
  border: 1px solid var(--ps--border);
  border-radius: 4px;
  font-family: var(--ps--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--ps--fg-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.thx-prev__rd {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: var(--ps--bg-soft);
  border: 1px solid var(--ps--border-strong);
  flex-shrink: 0;
}
.thx-prev__sp {
  display: inline-block;
  height: 8px;
  max-width: 48px;
  background: var(--ps--primary);
  border-radius: 2px;
  flex-shrink: 0;
}

/* Individual token card */
.thx-tok {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--ps--space-3);
  align-items: center;
  padding: var(--ps--space-2) var(--ps--space-3);
  background: var(--ps--neutral-0);
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-sm);
  min-height: 56px;
}
.thx-tok__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 40px;
  flex-shrink: 0;
}
.thx-tok__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.thx-tok__name {
  font-family: var(--ps--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ps--fg);
  background: transparent;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.thx-tok__value {
  font-family: var(--ps--font-mono);
  font-size: 10px;
  color: var(--ps--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Visuals per category */
.thx-tok__swatch {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: var(--ps--radius-sm);
  border: 1px solid var(--ps--border);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.thx-tok__shadow {
  display: block;
  width: 40px;
  height: 26px;
  border-radius: var(--ps--radius-sm);
  background: var(--ps--neutral-0);
  border: 1px solid var(--ps--border);
}
.thx-tok__type {
  color: var(--ps--fg);
  font-weight: 700;
  line-height: 1;
}
.thx-tok__lh {
  font-size: 10px;
  color: var(--ps--fg);
  font-family: var(--ps--font-sans);
}
.thx-tok__tracking {
  font-size: 11px;
  font-weight: 700;
  color: var(--ps--fg);
  font-family: var(--ps--font-mono);
}
.thx-tok__radius {
  display: block;
  width: 32px;
  height: 32px;
  background: var(--ps--bg-soft);
  border: 1px solid var(--ps--border-strong);
}
.thx-tok__space {
  display: block;
  height: 12px;
  max-width: 100%;
  background: var(--ps--primary);
  border-radius: 2px;
}
.thx-tok__motion {
  font-size: 18px;
  color: var(--ps--primary);
  font-weight: 700;
}
.thx-tok__dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--ps--fg-subtle);
}

/* ============================================================
   Theming-Split-Inspektor (Konzept 1)
   Links Live-Vorschau der Variante, rechts die Variablen nach Zone.
   App-Chrome → ausschließlich --ps--* Tokens; nur die Vorschau-Insel
   (.thx2__previewScope) trägt die --mp-*/--Card-* Theme-Variablen (inline).
   ============================================================ */
/* ---- Volle Seite in cp-main (Kopfleiste + Body) ---- */
/* Definite Höhe (Viewport minus Top-Bar), damit die Spalten intern scrollen
   statt das Dokument zu verlängern — wie der Vorschau-Builder. */
.thx-page {
  height: calc(100vh - var(--cp-chrome-h));
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--ps--bg);
}
.thx-page__bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--ps--space-4);
  padding: var(--ps--space-3) var(--ps--space-5);
  border-bottom: 1px solid var(--ps--border);
  background: var(--ps--neutral-0);
}
.thx-page__back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--ps--border); border-radius: var(--ps--radius-sm);
  background: var(--ps--neutral-0); color: var(--ps--fg);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  flex-shrink: 0;
}
.thx-page__back:hover { border-color: var(--ps--border-strong); background: var(--ps--bg-soft); }
.thx-page__back:focus-visible { outline: none; border-color: var(--ps--primary); box-shadow: 0 0 0 3px var(--ps--focus-ring); }
.thx-page__titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.thx-page__eyebrow { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: var(--ps--tracking-caps); color: var(--ps--fg-subtle); }
.thx-page__title { margin: 0; font-size: 16px; font-weight: 800; color: var(--ps--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thx-page__barRight { margin-left: auto; display: flex; align-items: center; gap: var(--ps--space-4); flex-shrink: 0; }
.thx-page__note { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ps--fg-subtle); }
.thx-page__close {
  width: 34px; height: 34px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ps--border); border-radius: var(--ps--radius-sm);
  background: var(--ps--neutral-0); color: var(--ps--fg-muted); cursor: pointer;
}
.thx-page__close:hover { border-color: var(--ps--border-strong); color: var(--ps--fg); }
.thx-page__body { flex: 1; min-height: 0; display: flex; }
.thx-page__fallback { flex: 1; overflow-y: auto; padding: var(--ps--space-5); max-width: 900px; margin: 0 auto; width: 100%; }
.thx-page__fallbackHint { font-size: 13px; color: var(--ps--fg-muted); line-height: 1.5; margin: 0 0 var(--ps--space-4); }

/* ---- Split: Vorschau (groß, links) + Variablen (fixe Spalte, rechts) ---- */
.thx2 {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr minmax(360px, 420px);
}

/* ---- Links: Live-Vorschau + Highlight-Overlay ---- */
.thx2__previewCol {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ps--space-3);
  padding: var(--ps--space-5);
  overflow: auto;
}
.thx2__previewSurface {
  flex: 1;
  min-height: 320px;
  background: var(--ps--bg-soft);
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-md);
  padding: var(--ps--space-7) var(--ps--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.thx2__previewScope {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}
.thx2__overlay { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.thx2__hl {
  position: absolute;
  outline: 2px solid var(--ps--primary);
  outline-offset: 2px;
  border-radius: var(--ps--radius-sm);
  pointer-events: none;
}
.thx2__hlLabel {
  position: absolute;
  top: -9px;
  left: 0;
  transform: translateY(-100%);
  background: var(--ps--primary);
  color: #fff;
  font-family: var(--ps--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 100, 211, 0.35);
}
.thx2__hint { margin: 0; font-size: 11px; color: var(--ps--fg-subtle); text-align: center; line-height: 1.4; }

/* ---- Rechts: Variablen nach Zone (scrollbare Sidebar) ---- */
.thx2__varsCol {
  display: flex; flex-direction: column; gap: var(--ps--space-3);
  min-width: 0;
  overflow-y: auto;
  padding: var(--ps--space-4);
  border-left: 1px solid var(--ps--border);
  background: var(--ps--neutral-0);
}
.thx2__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ps--space-3);
  padding: var(--ps--space-2) var(--ps--space-3);
  background: var(--ps--bg-soft);
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-sm);
}
.thx2__summaryText { font-size: 12px; font-weight: 700; color: var(--ps--fg); }
.thx2__resetAll {
  border: 0; background: none; padding: 0;
  color: var(--ps--primary); font-family: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.thx2__resetAll:disabled { color: var(--ps--fg-subtle); cursor: default; }
.thx2__resetAll:not(:disabled):hover { text-decoration: underline; }

.thx2__regions { display: flex; flex-direction: column; gap: var(--ps--space-2); }
.thx2__region {
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-md);
  background: var(--ps--neutral-0);
  padding: var(--ps--space-3);
  transition: border-color var(--ps--duration-fast), background var(--ps--duration-fast);
}
.thx2__region.is-active { border-color: var(--ps--primary); background: var(--ps--bg-soft); }
.thx2__regionHead { display: flex; align-items: center; gap: var(--ps--space-2); margin-bottom: var(--ps--space-2); }
.thx2__regionLabel { font-size: 13px; font-weight: 800; color: var(--ps--fg); }
.thx2__regionCount { margin-left: auto; font-size: 11px; color: var(--ps--fg-subtle); white-space: nowrap; }

/* Komposition-„Bausteine": Titel über der Auswahl (gestapelt, kompakt) —
   nur Label + Select, ohne Meta/Hilfetext. */
.thx2__compRow { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ps--space-2); padding: var(--ps--space-3) 0; }
.thx2__compRow + .thx2__compRow { border-top: 1px solid var(--ps--border); }
.thx2__compLabel { font-size: 13px; font-weight: 700; color: var(--ps--fg); }

.thx2__slot {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: var(--ps--space-2);
  align-items: center;
  padding: 4px 0;
}
.thx2__slotRole { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.thx2__roleName { font-size: 12.5px; font-weight: 600; color: var(--ps--fg); }
.thx2__status { font-size: 9px; font-weight: 800; letter-spacing: 0.05em; color: var(--ps--fg-subtle); }
.thx2__status.is-changed { color: var(--ps--primary); }
.thx2__slotCtrl { display: flex; align-items: center; gap: 6px; min-width: 0; }
.thx2__tokenBtn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 6px 9px;
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-sm);
  background: var(--ps--neutral-0);
  cursor: pointer; font: inherit; text-align: left;
  transition: border-color var(--ps--duration-fast), background var(--ps--duration-fast);
}
.thx2__tokenBtn:hover { border-color: var(--ps--border-strong); }
.thx2__tokenBtn.is-changed { border-color: var(--ps--primary); background: var(--ps--bg-soft); }
.thx2__tokenBtn:focus-visible { outline: none; border-color: var(--ps--primary); box-shadow: 0 0 0 3px var(--ps--focus-ring); }
.thx2__tokenCode { font-family: var(--ps--font-mono); font-size: 12px; font-weight: 600; color: var(--ps--fg); white-space: nowrap; }
.thx2__tokenVal {
  margin-left: auto; max-width: 92px;
  font-family: var(--ps--font-mono); font-size: 11px; color: var(--ps--fg-subtle);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.thx2__caret { color: var(--ps--fg-subtle); font-size: 10px; flex-shrink: 0; }
.thx2__reset {
  flex-shrink: 0; width: 30px; height: 30px;
  border-radius: var(--ps--radius-sm);
  border: 1px solid var(--ps--border);
  background: var(--ps--neutral-0);
  cursor: pointer; color: var(--ps--fg-muted); font-size: 15px; line-height: 1;
}
.thx2__reset:hover { border-color: var(--ps--border-strong); color: var(--ps--fg); }
.thx2__reset:focus-visible { outline: none; border-color: var(--ps--primary); box-shadow: 0 0 0 3px var(--ps--focus-ring); }

/* ---- Token-Swatches (Slot-Zeile + Popover) ---- */
.thx2-sw { width: 20px; height: 20px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.thx2-sw--color { border-radius: 5px; border: 1px solid var(--ps--border-strong); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); }
.thx2-sw--shadow { width: 20px; height: 17px; background: #fff; border-radius: 4px; border: 1px solid var(--ps--border); }
.thx2-sw--radius { border: 2px solid var(--ps--primary); background: transparent; }
.thx2-sw--space > span { display: block; height: 7px; max-width: 20px; background: var(--ps--primary); border-radius: 2px; }
.thx2-sw--fs { font-weight: 800; color: var(--ps--fg); line-height: 1; }
.thx2-sw--font { font-size: 15px; color: var(--ps--fg); font-weight: 700; }

/* ---- Neuzuordnungs-Popover ---- */
.thx2__popBack { position: fixed; inset: 0; z-index: 4000; }
.thx2__pop {
  z-index: 4001;
  background: var(--ps--neutral-0);
  border: 1px solid var(--ps--border);
  border-radius: var(--ps--radius-md);
  box-shadow: 0 20px 54px rgba(29, 53, 87, 0.28);
  overflow: hidden;
}
.thx2__popHead { padding: 10px 12px; border-bottom: 1px solid var(--ps--border); }
.thx2__popTitle { font-size: 13px; font-weight: 800; color: var(--ps--fg); }
.thx2__popHint { font-size: 11px; color: var(--ps--fg-subtle); margin-top: 2px; }
.thx2__popList { max-height: 280px; overflow: auto; padding: 6px; }
.thx2__opt {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 8px 9px;
  border: 0; border-radius: var(--ps--radius-sm);
  background: transparent; cursor: pointer; font: inherit; text-align: left;
}
.thx2__opt:hover, .thx2__opt.is-on { background: var(--ps--bg-soft); }
.thx2__opt:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ps--focus-ring); }
.thx2__optMeta { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.thx2__defBadge {
  font-size: 9px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--ps--fg-muted); background: var(--ps--bg-soft);
  border: 1px solid var(--ps--border); padding: 2px 5px; border-radius: 4px;
}
.thx2__check { color: var(--ps--primary); font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
  .thx2__region, .thx2__tokenBtn, .thx2__reset { transition: none !important; }
}

/* ============================================================
   Vorschau-Builder · Sidebar-Tabs + Struktur (Seiten / Ebenen)
   App-Chrome → ausschließlich --ps--* Tokens.
   ============================================================ */
/* Tab-Leiste im bd-menu__head (Komponenten | Struktur) */
.bd-menu__tabs { display: flex; align-items: stretch; width: 100%; height: 100%; gap: var(--ps--space-2); }
.bd-menu__tab {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  background: transparent;
  font: 700 12px var(--ps--font-sans); color: var(--ps--fg-muted);
  cursor: pointer;
  transition: color var(--ps--duration-fast), border-color var(--ps--duration-fast);
}
.bd-menu__tab svg { width: 14px; height: 14px; }
.bd-menu__tab:hover { color: var(--ps--fg); }
.bd-menu__tab.is-active { color: var(--ps--primary); border-bottom-color: var(--ps--primary); }

/* Sub-Kopf im Komponenten-Tab (Zähler + Auf-/Zuklappen) */
.bd-menu__subhead {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ps--space-3);
  padding: var(--ps--space-2) var(--ps--space-4);
  border-bottom: 1px solid var(--ps--border);
  flex-shrink: 0;
}

/* Struktur-Tab: Seiten- + Ebenen-Panel gestapelt, füllen die Spalte */
.bd-menu__list--structure { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }

/* Drei-Wege-Leiste im Seiten-Designer: Icon mit kleiner Beschriftung darunter.
   BEWUSST ein Modifier — .bd-menu__tab selbst bleibt die einzeilige Variante mit
   Text NEBEN dem Icon, weil der Inspektor („Eigenschaften | CMS",
   builder/inspector.jsx) an derselben Klasse hängt. */
.bd-menu__tabs--stacked .bd-menu__tab {
  flex-direction: column;
  gap: 3px;
  padding: 0 2px;
}
.bd-menu__tabs--stacked .bd-menu__tab svg { width: 16px; height: 16px; }
.bd-menu__tabLabel {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* Ein Panel pro Reiter → es füllt die Spalte und scrollt in seinem .bd-tree
   selbst. Das ersetzt das alte Stapeln, bei dem der ungedeckelte Seitenbaum die
   Ebenen nach unten verdrängte. Kein `:only-child`: die Regel soll für jedes
   .bd-struct in diesem Wrapper gelten, nicht nur solange es zufällig der
   einzige Child ist — sonst würde ein künftiger zweiter Kind-Knoten (Hinweis,
   Fußzeile) die Regel wortlos abschalten und die volle Höhe verlieren, ohne
   dass irgendein Build oder Test das anzeigt (CSS läuft durch keins von beiden). */
.bd-menu__list--structure > .bd-struct { flex: 1; border-bottom: 0; }

.bd-struct { display: flex; flex-direction: column; border-bottom: 1px solid var(--ps--border); min-height: 0; }
.bd-struct--layers { flex: 1; border-bottom: 0; }
.bd-struct__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ps--space-2);
  padding: var(--ps--space-3) var(--ps--space-3) var(--ps--space-2);
  flex-shrink: 0;
}
.bd-struct__actions { display: flex; align-items: center; gap: var(--ps--space-1); }
.bd-struct__title {
  font-size: 10px; font-weight: 700; letter-spacing: var(--ps--tracking-caps);
  text-transform: uppercase; color: var(--ps--fg-subtle);
}
.bd-struct__count {
  font-family: var(--ps--font-mono); font-size: 11px; color: var(--ps--fg-subtle);
  padding: 1px 6px; background: var(--ps--neutral-0); border-radius: var(--ps--radius-pill);
}
.bd-struct__empty {
  padding: 0 var(--ps--space-4) var(--ps--space-5);
  font-size: 12px; color: var(--ps--fg-subtle); line-height: 1.5;
}

/* Baum (Seiten & Ebenen teilen Zeilen-Optik) */
.bd-tree { padding: 0 var(--ps--space-2) var(--ps--space-2); overflow-y: auto; min-height: 0; }
.bd-struct--layers .bd-tree { flex: 1; }
.bd-tree__twist {
  width: 16px; height: 16px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; padding: 0;
  color: var(--ps--fg-subtle); cursor: pointer; border-radius: 4px;
}
.bd-tree__twist:hover { background: var(--ps--neutral-0); color: var(--ps--fg); }
.bd-tree__twist--leaf { cursor: default; }
.bd-tree__icon { color: var(--ps--fg-muted); flex-shrink: 0; }
.bd-tree__name {
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 600 13px var(--ps--font-sans); color: var(--ps--fg);
}
.bd-tree__rename {
  flex: 1; min-width: 0; font: 600 13px var(--ps--font-sans); padding: 2px 6px;
  border: 1px solid var(--ps--primary); border-radius: var(--ps--radius-sm);
  background: var(--ps--bg); color: var(--ps--fg); outline: none;
}
.bd-tree__root-drop { height: 14px; border-radius: var(--ps--radius-sm); margin: 2px var(--ps--space-2); }
.bd-tree__root-drop.is-drop { box-shadow: inset 0 0 0 2px var(--ps--primary); background: color-mix(in srgb, var(--ps--primary) 8%, var(--ps--bg)); }

/* Gruppe „Dynamisch" (Task 12, CMS-Collections): dynamische Seiten aus
   Collections, getrennt vom statischen Baum — kein Drag&Drop/Twist. */
.bd-tree__group { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--ps--border); }
.bd-tree__groupLabel {
  font-size: 10px; font-weight: 700; letter-spacing: var(--ps--tracking-caps);
  text-transform: uppercase; color: var(--ps--fg-subtle);
  padding: 2px var(--ps--space-2) 4px;
}
/* Nur im Ruhezustand eingefärbt — .bd-page.is-current .bd-tree__icon (unten)
   hat dieselbe Spezifität und gewinnt per Quellreihenfolge, sobald eine
   dynamische Seite selektiert ist (einheitliche Selektions-Farbe wie überall). */
.bd-page--dynamic .bd-tree__icon { color: var(--ps--primary); }

/* Zeilen (Seite/Ordner + Ebene) */
.bd-page, .bd-layer {
  display: flex; align-items: center; gap: 6px;
  padding: 5px var(--ps--space-2);
  border-radius: var(--ps--radius-sm);
  cursor: pointer; user-select: none; position: relative;
}
.bd-page:hover, .bd-layer:hover { background: var(--ps--neutral-0); }
/* Tastatur-Fokus der per Tab erreichbaren Zeilen (role="button"). */
.bd-page:focus-visible, .bd-layer:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ps--primary); }
/* Auswahl-Zustand: siehe shell.css, Abschnitt „Auswahl-Zustand“ (eine Quelle). */
/* Drop-Zonen, GEMEINSAM für Seitenbaum und Ebenen-Baum: Mitte = hinein (Ring
   + Tönung), oben/unten = daneben. „Daneben" ist eine echte Einfügemarke mit
   Punkt am Anfang (wie eine Schreibmarke) statt eines Innenschattens: der
   Schatten lag im Rahmen der Zeile und war neben Auswahl- und Fokusring kaum
   zu unterscheiden — man sah, DASS etwas passiert, aber nicht, WO es landet.
   Wächter: tests/js/builder/layer-drop-zone.test.js (Zonen), darunter der
   Marker-Test im Panel. */
.bd-page.is-drop-inside,
.bd-layer.is-drop-inside {
  box-shadow: inset 0 0 0 2px var(--ps--primary);
  background: color-mix(in srgb, var(--ps--primary) 8%, var(--ps--bg));
}
.bd-page.is-drop-before::after,
.bd-page.is-drop-after::after,
.bd-layer.is-drop-before::after,
.bd-layer.is-drop-after::after {
  content: '';
  position: absolute;
  /* Beginnt auf der Einrückung der Zeile (--bd-indent wird beim Rendern
     gesetzt): eine Linie über die volle Breite zeigt zwar, ZWISCHEN welchen
     Zeilen abgelegt wird, aber nicht, auf welcher EBENE. */
  left: var(--bd-indent, 0); right: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--ps--primary);
  pointer-events: none;
}
/* Punkt am Anfang der Marke — macht die Ebene auf einen Blick lesbar und
   unterscheidet die Marke von einer Trennlinie. */
.bd-page.is-drop-before::before,
.bd-page.is-drop-after::before,
.bd-layer.is-drop-before::before,
.bd-layer.is-drop-after::before {
  content: '';
  position: absolute;
  left: var(--bd-indent, 0);
  width: 6px; height: 6px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--ps--primary);
  pointer-events: none;
}
.bd-page.is-drop-before::after,
.bd-layer.is-drop-before::after { top: -1px; }
.bd-page.is-drop-before::before,
.bd-layer.is-drop-before::before { top: -3px; }
.bd-page.is-drop-after::after,
.bd-layer.is-drop-after::after { bottom: -1px; }
.bd-page.is-drop-after::before,
.bd-layer.is-drop-after::before { bottom: -3px; }
/* Die gezogene Zeile bleibt sichtbar, tritt aber zurück — sonst sucht das Auge
   sie an zwei Stellen gleichzeitig (Original + Drag-Bild). */
.bd-layer.is-dragging { opacity: 0.45; }
/* Drag-Bild: kompakte Pille statt des Zeilen-Fotos, das der Browser sonst
   nimmt. Liegt nur für den Moment des dragstart im DOM (siehe setDragGhost). */
.bd-layer__ghost {
  position: fixed; top: -1000px; left: -1000px;
  padding: 4px 10px;
  border-radius: var(--ps--radius-sm);
  background: var(--ps--primary);
  color: #fff;
  font: 600 12px var(--ps--font-sans);
  white-space: nowrap;
  pointer-events: none;
}

.bd-layer__name { font: 600 13px var(--ps--font-sans); color: var(--ps--fg); white-space: nowrap; flex-shrink: 0; }
.bd-layer__variant {
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 11px; color: var(--ps--fg-subtle);
}
/* Auswahl-Zustand: siehe shell.css, Abschnitt „Auswahl-Zustand“ (eine Quelle). */
.bd-layer__del {
  flex-shrink: 0; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 4px;
  color: var(--ps--fg-subtle); cursor: pointer; opacity: 0;
  transition: opacity var(--ps--duration-fast), color var(--ps--duration-fast), background var(--ps--duration-fast);
}
.bd-layer:hover .bd-layer__del { opacity: 1; }
.bd-layer__del:hover { color: var(--ps--danger); background: var(--ps--neutral-0); }
/* Sichtbarkeits-Toggle (Auge) — gleiche Optik wie der Entfernen-Button.
   Sichtbar bei Hover ODER wenn die Instanz ausgeblendet ist (Zustand zeigen). */
.bd-layer__eye {
  flex-shrink: 0; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 4px;
  color: var(--ps--fg-subtle); cursor: pointer; opacity: 0;
  transition: opacity var(--ps--duration-fast), color var(--ps--duration-fast), background var(--ps--duration-fast);
}
.bd-layer:hover .bd-layer__eye,
.bd-layer--hidden .bd-layer__eye { opacity: 1; }
.bd-layer__eye:hover { color: var(--ps--fg); background: var(--ps--neutral-0); }
.bd-layer--hidden .bd-layer__name,
.bd-layer--hidden .bd-layer__variant,
.bd-layer--hidden .bd-tree__icon { opacity: 0.5; }
.bd-layer__slot {
  font: 700 9px var(--ps--font-mono); letter-spacing: var(--ps--tracking-caps);
  text-transform: uppercase; color: var(--ps--fg-subtle);
  padding-top: 3px; padding-bottom: 1px; opacity: .75;
}

/* Kontextmenü (Rechtsklick auf Seite/Ordner, „+“-Button) */
.bd-ctxmenu {
  position: fixed; z-index: 1000; min-width: 170px; padding: 4px;
  background: var(--ps--bg); border: 1px solid var(--ps--border-strong);
  border-radius: var(--ps--radius-md); box-shadow: var(--ps--shadow-lg);
}
.bd-ctxmenu__item {
  width: 100%; display: flex; align-items: center; gap: var(--ps--space-2);
  padding: 7px var(--ps--space-2);
  background: transparent; border: 0; border-radius: var(--ps--radius-sm);
  font: 600 13px var(--ps--font-sans); color: var(--ps--fg);
  cursor: pointer; text-align: left;
}
.bd-ctxmenu__item svg { color: var(--ps--fg-muted); flex-shrink: 0; }
.bd-ctxmenu__item:hover { background: var(--ps--neutral-0); }
.bd-ctxmenu__item.is-danger { color: var(--ps--danger); }
.bd-ctxmenu__item.is-danger svg { color: var(--ps--danger); }
.bd-ctxmenu__item.is-danger:hover { background: color-mix(in srgb, var(--ps--danger) 10%, var(--ps--bg)); }
/* disabled (z. B. „Einfügen" bei leerer Zwischenablage) — sichtbar, aber inert. */
.bd-ctxmenu__item:disabled { opacity: 0.45; cursor: default; }
.bd-ctxmenu__item:disabled:hover { background: transparent; }

/* ============================================================
   ⌘K-Suchpanel — Komponente suchen & einfügen (builder/cmdk-palette.jsx)
   Studio-Chrome: ausschließlich --ps--* Tokens; nutzt den cp-modal__back-
   Backdrop, sitzt aber oben statt mittig (Command-Palette-Konvention).
   ============================================================ */
.bd-cmdk {
  align-self: flex-start; margin-top: 10vh;
  width: min(560px, 92vw);
  background: var(--ps--bg); border: 1px solid var(--ps--border-strong);
  border-radius: var(--ps--radius-md); box-shadow: var(--ps--shadow-lg);
  overflow: hidden; display: flex; flex-direction: column;
}
.bd-cmdk__inputWrap {
  display: flex; align-items: center; gap: var(--ps--space-2);
  padding: 10px var(--ps--space-3); border-bottom: 1px solid var(--ps--border);
  color: var(--ps--fg-muted);
}
.bd-cmdk__input {
  flex: 1; border: 0; outline: none; background: transparent;
  font: 500 15px var(--ps--font-sans); color: var(--ps--fg);
}
.bd-cmdk__esc {
  font: 600 10px var(--ps--font-sans); color: var(--ps--fg-muted);
  border: 1px solid var(--ps--border); border-radius: 4px; padding: 2px 5px;
  text-transform: uppercase;
}
.bd-cmdk__list { max-height: 46vh; overflow: auto; padding: 6px; }
.bd-cmdk__item {
  width: 100%; display: flex; align-items: baseline; gap: var(--ps--space-2);
  padding: 8px var(--ps--space-2); border: 0; background: transparent;
  border-radius: var(--ps--radius-sm); cursor: pointer; text-align: left;
  font: 600 13px var(--ps--font-sans); color: var(--ps--fg);
}
.bd-cmdk__item.is-active { background: var(--ps--neutral-0); }
.bd-cmdk__icon { align-self: center; color: var(--ps--fg-muted); flex-shrink: 0; }
.bd-cmdk__variant { font-weight: 500; color: var(--ps--fg-muted); }
.bd-cmdk__desc {
  margin-left: auto; font: 400 12px var(--ps--font-sans); color: var(--ps--fg-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%;
}
/* Erklärzeile über der Liste, wenn der Platzierungs-Filter etwas entfernt hat.
   Ohne sie wirkt der halbe Katalog verschwunden. */
.bd-cmdk__note {
  padding: 6px var(--ps--space-3);
  border-bottom: 1px solid var(--ps--border);
  font: 500 11px var(--ps--font-sans); color: var(--ps--fg-muted);
}
.bd-cmdk__empty {
  padding: 18px; text-align: center;
  font: 500 13px var(--ps--font-sans); color: var(--ps--fg-muted);
}
.bd-cmdk__foot {
  display: flex; gap: var(--ps--space-3); padding: 8px var(--ps--space-3);
  border-top: 1px solid var(--ps--border);
  font: 500 11px var(--ps--font-sans); color: var(--ps--fg-muted);
}
.bd-ctxmenu__sep { height: 1px; margin: 4px 6px; background: var(--ps--border); }

/* ============================================================
   Seitenzeile: Startseite-Badge + Zahnrad (Eigenschaften), beim Hover
   ============================================================ */
.bd-page__badge {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; color: var(--ps--primary);
}
.bd-page__badge--fallback {
  font-size: 9px; font-weight: 700; letter-spacing: .04em;
  border: 1px dashed var(--ps--border, #c8c8d0); border-radius: 4px;
  padding: 0 3px; color: var(--ps--fg-muted, #888);
}
.bd-page--loc-hidden .bd-tree__name { opacity: .45; text-decoration: line-through; }
.bd-page__gear {
  flex-shrink: 0; margin-left: 2px;
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: var(--ps--radius-sm);
  background: transparent; color: var(--ps--fg-subtle); cursor: pointer;
  opacity: 0; transition: opacity var(--ps--duration-fast), color var(--ps--duration-fast), background var(--ps--duration-fast);
}
.bd-page:hover .bd-page__gear, .bd-page.is-current .bd-page__gear { opacity: 1; }
.bd-page__gear:hover { color: var(--ps--fg); background: var(--ps--bg-soft); }
/* Touch/kein Hover: Zahnrad dauerhaft zeigen. */
@media (hover: none) { .bd-page__gear { opacity: 1; } }

/* ============================================================
   Seiten-Eigenschaften-Dialog (PagePropertiesDialog)
   ============================================================ */
.pp-sec { display: flex; flex-direction: column; gap: var(--ps--space-4); }
.pp-sec + .pp-sec { border-top: 1px solid var(--ps--border); padding-top: var(--ps--space-4); }
.pp-sec__title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--ps--tracking-caps); color: var(--ps--fg-subtle);
}
.pp-row { display: flex; gap: var(--ps--space-4); }
.pp-row__col { flex: 1; min-width: 0; }
.pp-row--3 { flex-wrap: wrap; }
.pp-row--3 .pp-row__col { flex: 1 1 140px; }
.pp-opt { color: var(--ps--fg-subtle); font-style: normal; font-weight: 600; font-size: 11px; }

.pp-textarea {
  padding: var(--ps--space-3); border: 1px solid var(--ps--border-strong);
  border-radius: var(--ps--radius-sm); font: 400 14px var(--ps--font-sans);
  color: var(--ps--fg); background: var(--ps--neutral-0); outline: none; resize: vertical;
  line-height: 1.5; width: 100%; box-sizing: border-box;
  transition: border-color var(--ps--duration-fast), box-shadow var(--ps--duration-fast);
}
.pp-textarea:focus { border-color: var(--ps--primary); box-shadow: 0 0 0 3px var(--ps--focus-ring); }
.pp-code { font-family: var(--ps--font-mono); font-size: 12.5px; }
.pp-code.is-invalid { border-color: var(--ps--danger); }
.pp-code.is-invalid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ps--danger) 22%, transparent); }

.pp-count { font-weight: 700; font-size: 11px; padding: 1px 6px; border-radius: 999px; }
.pp-count.is-empty { color: var(--ps--fg-subtle); background: var(--ps--bg-soft); }
.pp-count.is-good { color: var(--ps--success, #1f9d55); background: color-mix(in srgb, var(--ps--success, #1f9d55) 14%, transparent); }
.pp-count.is-warn { color: var(--ps--warning-fg); background: color-mix(in srgb, var(--ps--warning) 18%, transparent); }
.pp-count.is-bad { color: var(--ps--danger); background: color-mix(in srgb, var(--ps--danger) 14%, transparent); }

.pp-hint {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; background: var(--ps--bg-soft);
  border: 1px solid var(--ps--border); border-radius: var(--ps--radius-sm);
  font-size: 12.5px; line-height: 1.45; color: var(--ps--fg-muted);
}
.pp-hint code { font-family: var(--ps--font-mono); font-size: 12px; background: var(--ps--neutral-0); padding: 1px 5px; border-radius: 4px; }

.pp-urlprev {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-family: var(--ps--font-mono); font-size: 12px; color: var(--ps--fg-muted);
}
.pp-urlprev__host { color: var(--ps--fg-subtle); }
.pp-urlprev__path { color: var(--ps--primary); font-weight: 700; }

/* Google-Snippet (SERP) */
.pp-serp {
  border: 1px solid var(--ps--border); border-radius: var(--ps--radius-md);
  padding: 12px 14px; background: var(--ps--neutral-0); display: flex; flex-direction: column; gap: 2px;
}
.pp-serp__url { font-size: 12px; color: var(--ps--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* #1a0dab BLEIBT literal (PS-88): das ist Googles Trefferlink-Blau. Die Vorschau
   ahmt eine fremde Oberfläche nach — dieselbe Kategorie wie eine Markenfarbe.
   Ein Token würde sie im dunklen Modus verschieben und die Nachahmung kaputt
   machen; der Kasten selbst (.pp-serp) ist tokenisiert und wird mit dunkel. */
.pp-serp__title { font-size: 18px; line-height: 1.3; color: #1a0dab; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-serp__desc { font-size: 13px; line-height: 1.5; color: var(--ps--fg-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* OG-Bild-Picker */
.pp-oggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.pp-ogtile {
  display: flex; flex-direction: column; gap: 4px; padding: 4px;
  border: 1px solid var(--ps--border); border-radius: var(--ps--radius-sm);
  background: var(--ps--neutral-0); cursor: pointer; text-align: left;
  transition: border-color var(--ps--duration-fast), box-shadow var(--ps--duration-fast);
}
.pp-ogtile:hover { border-color: var(--ps--border-strong); }
.pp-ogtile.is-active { border-color: var(--ps--primary); box-shadow: 0 0 0 2px var(--ps--focus-ring); }
.pp-ogtile__thumb {
  aspect-ratio: 1.91 / 1; border-radius: 4px; overflow: hidden; background: var(--ps--bg-soft);
  display: flex; align-items: center; justify-content: center; color: var(--ps--fg-subtle);
}
.pp-ogtile__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pp-ogtile__label { font-size: 11px; color: var(--ps--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* OG-Vorschaukarte */
.pp-ogcard { border: 1px solid var(--ps--border); border-radius: var(--ps--radius-md); overflow: hidden; background: var(--ps--neutral-0); }
.pp-ogcard__img { aspect-ratio: 1.91 / 1; background: var(--ps--bg-soft); display: flex; align-items: center; justify-content: center; }
.pp-ogcard__img img { width: 100%; height: 100%; object-fit: cover; }
.pp-ogcard__imgph { color: var(--ps--fg-subtle); }
.pp-ogcard__body { padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.pp-ogcard__host { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ps--fg-subtle); }
.pp-ogcard__title { font-size: 15px; font-weight: 700; color: var(--ps--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-ogcard__desc { font-size: 12.5px; line-height: 1.45; color: var(--ps--fg-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.pp-jsonld__err { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ps--danger); }
.pp-jsonld__ok { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ps--success, #1f9d55); }

/* Toggle im Dialog: cp-vswitch mit fester (nicht auf-die-Zeile-schrumpfender) Breite */
.pp-switch { align-self: flex-start; }
.pp-switch--locked { opacity: .7; cursor: default; }

/* ---------- LinkPickerDialog: interne Seiten-Auswahl (Inhalt-Modus) ---------- */
.cp-linkpick__pages { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow: auto; }
.cp-linkpick__page {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--ps--border, #e3e6ea);
  border-radius: var(--ps--radius-sm, 6px); background: var(--ps--bg, #fff);
  font: inherit; font-size: 13px; color: var(--ps--fg, #16181d);
  cursor: pointer; text-align: left;
  transition: border-color .12s ease, background .12s ease;
}
.cp-linkpick__page:hover { border-color: var(--ps--primary, #0064d3); }
.cp-linkpick__page.is-active {
  border-color: var(--ps--primary, #0064d3);
  background: color-mix(in srgb, var(--ps--primary, #0064d3) 6%, transparent);
}
.cp-linkpick__pagename { font-weight: 600; }
.cp-linkpick__pageslug { margin-left: auto; font-size: 12px; color: var(--ps--fg-muted, #5c6470); }

/* ---------- IconPickerDialog: Lucide-Raster (Inhalt-Modus) ---------- */
.cp-iconpick__search { width: 100%; margin-bottom: 10px; }
.cp-iconpick__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; max-height: 300px; overflow-y: auto; }
.cp-iconpick__cell {
  display: grid; place-items: center; aspect-ratio: 1; padding: 0;
  border: 1px solid transparent; border-radius: var(--ps--radius-sm, 6px);
  background: transparent; color: var(--ps--fg, #16181d); cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.cp-iconpick__cell:hover { background: var(--ps--bg-soft, #f4f6f8); }
.cp-iconpick__cell.is-active { border-color: var(--ps--primary, #0064d3); background: color-mix(in srgb, var(--ps--primary, #0064d3) 8%, transparent); }
.cp-iconpick__cell i[data-lucide], .cp-iconpick__cell svg { width: 20px; height: 20px; }
/* fg-muted statt fg-subtle: 11px-Text braucht >= 4.5:1 auf Weiß (WCAG AA). */
.cp-iconpick__count { margin-top: 8px; font-size: 11px; color: var(--ps--fg-muted, #5c6470); }

/* ---- Reduzierte Bewegung: Ein-/Ausblend-Animationen abschalten ---- */
@media (prefers-reduced-motion: reduce) {
  .cp-modal__back,               /* cp-modal-fade */
  .cp-modal,                     /* cp-modal-slide */
  .bd-preview.is-fullscreen {    /* bd-preview-fade */
    animation: none;
  }
}

/* ============ Geppetto AI (gp-*) ============ */
/* Voll-breiter Scroll-Container: die Scrollbar sitzt am Panel-Rand ganz rechts,
   der Inhalt bleibt in einer schmalen, zentrierten Spalte (--gp-col). Composer
   und globale Fehlermeldung teilen sich exakt dieselbe seitliche Einrückung,
   damit alles bündig mit den Nachrichten steht. */
.gp-view { --gp-col: 820px; display: flex; flex-direction: column; height: 100%; padding: var(--ps--space-6) 0 var(--ps--space-4); }
.gp-messages { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: var(--ps--space-3); padding: 0 max(var(--ps--space-5), calc((100% - var(--gp-col)) / 2)) var(--ps--space-4); }
/* Moderne, dezente Custom-Scrollbar (theme-aware über --ps--fg): dünner
   Track-loser Thumb mit abgerundeten Enden; per background-clip schwebt er
   mit etwas Luft im Kanal. Firefox nutzt scrollbar-width/-color. */
.gp-messages { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ps--fg) 22%, transparent) transparent; }
.gp-messages::-webkit-scrollbar { width: 12px; }
.gp-messages::-webkit-scrollbar-track { background: transparent; }
.gp-messages::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ps--fg) 20%, transparent); background-clip: padding-box; border: 3px solid transparent; border-radius: 999px; }
.gp-messages:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ps--fg) 30%, transparent); background-clip: padding-box; }
.gp-messages::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ps--fg) 45%, transparent); background-clip: padding-box; }
.gp-msg { max-width: 76%; padding: var(--ps--space-3) var(--ps--space-4); border-radius: var(--ps--radius-lg); font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.gp-msg--user { align-self: flex-end; background: var(--ps--brand-soft); color: var(--ps--fg); border-bottom-right-radius: var(--ps--radius-sm); }
.gp-msg--ai { align-self: flex-start; background: var(--ps--bg-soft); border: 1px solid var(--ps--border); border-bottom-left-radius: var(--ps--radius-sm); }
.gp-step { align-self: flex-start; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ps--fg-muted); padding: 2px var(--ps--space-2); }
.gp-step__check { color: var(--ps--success); font-weight: 700; }
.gp-confirm { align-self: flex-start; border: 1px solid var(--ps--warning); background: color-mix(in srgb, var(--ps--warning) 8%, var(--ps--neutral-0)); border-radius: var(--ps--radius-md); padding: var(--ps--space-3) var(--ps--space-4); max-width: 76%; }
.gp-confirm__actions { display: flex; gap: var(--ps--space-2); margin-top: var(--ps--space-3); }
.gp-confirm__yes { background: var(--ps--danger); color: #fff; border: 0; border-radius: var(--ps--radius-sm); padding: 6px 12px; cursor: pointer; }
.gp-confirm__no { background: transparent; border: 1px solid var(--ps--border-strong); border-radius: var(--ps--radius-sm); padding: 6px 12px; cursor: pointer; }
.gp-error { align-self: flex-start; color: var(--ps--danger); background: color-mix(in srgb, var(--ps--danger) 8%, var(--ps--neutral-0)); border: 1px solid color-mix(in srgb, var(--ps--danger) 30%, var(--ps--neutral-0)); border-radius: var(--ps--radius-md); padding: var(--ps--space-2) var(--ps--space-3); font-size: 13px; }
.gp-notice { align-self: center; color: var(--ps--fg-subtle); font-size: 12px; }
.gp-working { align-self: flex-start; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ps--fg-muted); }
.gp-working__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ps--brand); animation: gp-pulse 1.2s ease-in-out infinite; }
@keyframes gp-pulse { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }
.gp-working__cancel { border: 0; background: none; color: var(--ps--fg-subtle); text-decoration: underline; cursor: pointer; font-size: 12px; }
.gp-working__hint { flex-basis: 100%; font-size: 12px; color: var(--ps--warning); }
.gp-chathead { align-self: center; font-size: 11px; color: var(--ps--fg-subtle); border-bottom: 1px solid var(--ps--border); padding-bottom: var(--ps--space-2); width: 100%; text-align: center; }
.gp-runfoot { align-self: flex-start; display: flex; align-items: center; gap: var(--ps--space-3); font-size: 12px; color: var(--ps--fg-subtle); }
.gp-undo { border: 1px solid var(--ps--border-strong); background: var(--ps--neutral-0); border-radius: var(--ps--radius-pill); padding: 4px 12px; cursor: pointer; font-size: 12px; }
.gp-undo:hover { border-color: var(--ps--brand); color: var(--ps--brand); }
.gp-welcome { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--ps--space-3); color: var(--ps--fg); }
.gp-welcome__logo { font-size: 40px; color: var(--ps--brand); }
.gp-welcome p { color: var(--ps--fg-muted); max-width: 420px; }
.gp-welcome__examples { display: flex; gap: var(--ps--space-2); flex-wrap: wrap; justify-content: center; }
.gp-welcome__examples button { border: 1px solid var(--ps--border); background: var(--ps--neutral-0); border-radius: var(--ps--radius-pill); padding: 8px 14px; cursor: pointer; font-size: 13px; }
.gp-welcome__examples button:hover { border-color: var(--ps--brand); color: var(--ps--brand); }
.gp-composer-wrap { padding: var(--ps--space-3) max(var(--ps--space-5), calc((100% - var(--gp-col)) / 2)) 0; }
.gp-error--global { margin: 0 max(var(--ps--space-5), calc((100% - var(--gp-col)) / 2)); }
.gp-composer { display: flex; align-items: flex-end; gap: var(--ps--space-2); background: var(--ps--neutral-0); border: 1px solid var(--ps--border-strong); border-radius: var(--ps--radius-lg); padding: var(--ps--space-2) var(--ps--space-3); box-shadow: var(--ps--shadow-sm); }
.gp-composer:focus-within { border-color: var(--ps--brand); box-shadow: var(--ps--focus-ring); }
.gp-composer__input { flex: 1; border: 0; outline: 0; resize: none; font: inherit; font-size: 14px; line-height: 1.5; padding: 6px 0; background: transparent; max-height: 200px; }
.gp-composer__btn, .gp-composer__send { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--ps--radius-sm); border: 0; background: transparent; color: var(--ps--fg-muted); cursor: pointer; }
.gp-composer__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.gp-composer__mic.is-recording { color: var(--ps--danger); animation: gp-pulse 1.2s ease-in-out infinite; }
.gp-composer__send { background: var(--ps--brand); color: #fff; }
.gp-composer__send:disabled { opacity: 0.4; cursor: not-allowed; }
.gp-subnav__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-subnav__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ps--brand); margin-left: auto; animation: gp-pulse 1.2s ease-in-out infinite; }
/* ContentSubNav (Dynamische Inhalte / CMS-Collections) — Collection-Name darf
   nicht mit dem Eintrags-Zähler (.cp-subnav__count) kollidieren. */
.cn-subnav__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ⌘G-Panel: zentrierte schwebende Karte über .cp-modal__back */
.gp-prompt { width: min(640px, calc(100vw - 48px)); background: var(--ps--neutral-0); border-radius: var(--ps--radius-lg); box-shadow: var(--ps--shadow-xl); padding: var(--ps--space-4); }
.gp-prompt__head { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: var(--ps--space-3); color: var(--ps--brand-dark); }
.gp-prompt__hint { font-size: 12px; color: var(--ps--fg-subtle); margin-top: var(--ps--space-2); }
/* Plan-Karte (Website-Auftrag) */
.gp-plan { border-color: var(--ps--brand); background: color-mix(in srgb, var(--ps--brand) 6%, var(--ps--neutral-0)); }
.gp-plan__title { font-weight: 700; margin-bottom: var(--ps--space-2); color: var(--ps--brand-dark); }
.gp-plan__tree { margin: 0 0 var(--ps--space-2); padding-left: 18px; font-size: 13px; }
.gp-plan__tree ul { padding-left: 16px; }
.gp-plan__meta { font-size: 12px; color: var(--ps--fg-subtle); margin-bottom: var(--ps--space-2); }
.gp-plan__go { background: var(--ps--brand); }
/* Fortschritts-Karte */
.gp-wf { align-self: stretch; border: 1px solid var(--ps--border); border-radius: var(--ps--radius-md); padding: var(--ps--space-3) var(--ps--space-4); background: var(--ps--bg-soft); }
.gp-wf__head { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 13px; margin-bottom: var(--ps--space-2); }
.gp-wf__row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; }
.gp-wf__row.is-failed { color: var(--ps--danger); }
.gp-wf__row.is-pending { color: var(--ps--fg-subtle); }
.gp-wf__icon { width: 16px; text-align: center; }
.gp-wf__title { flex: 1; }
.gp-wf__foot { display: flex; align-items: center; gap: var(--ps--space-3); margin-top: var(--ps--space-2); font-size: 12px; color: var(--ps--fg-subtle); }

/* Geppetto-Regel-Editor (KI-Einstellungen + Projekt-Einstellungen) */
.rules-editor { display: flex; flex-direction: column; gap: var(--ps--space-2); max-width: 720px; }
.rules-editor__empty { color: var(--ps--fg-subtle); font-size: 13px; }
.rules-editor__row { display: flex; align-items: center; gap: var(--ps--space-2); border: 1px solid var(--ps--border); border-radius: var(--ps--radius-md); background: var(--ps--bg-soft); padding: 6px var(--ps--space-3); }
.rules-editor__row.is-inactive .rules-editor__text { color: var(--ps--fg-subtle); text-decoration: line-through; }
.rules-editor__text { flex: 1; text-align: left; border: 0; background: none; cursor: pointer; font: inherit; font-size: 13px; color: var(--ps--fg); padding: 2px 0; }
.rules-editor__editwrap { flex: 1; display: flex; align-items: center; gap: var(--ps--space-2); }
.rules-editor__editinput, .rules-editor__addinput { flex: 1; font: inherit; font-size: 13px; border: 1px solid var(--ps--border-strong); border-radius: var(--ps--radius-sm); padding: 6px 10px; background: var(--ps--neutral-0); color: var(--ps--fg); }
.rules-editor__editinput:focus, .rules-editor__addinput:focus { outline: 0; border-color: var(--ps--brand); box-shadow: var(--ps--focus-ring); }
.rules-editor__save, .rules-editor__add { border: 0; border-radius: var(--ps--radius-sm); background: var(--ps--brand); color: #fff; padding: 6px 12px; cursor: pointer; font-size: 13px; }
.rules-editor__save:disabled, .rules-editor__add:disabled { opacity: 0.4; cursor: not-allowed; }
.rules-editor__cancel { border: 1px solid var(--ps--border-strong); background: transparent; border-radius: var(--ps--radius-sm); padding: 6px 12px; cursor: pointer; font-size: 13px; }
.rules-editor__delete { border: 0; background: none; color: var(--ps--fg-subtle); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 6px; }
.rules-editor__delete:hover { color: var(--ps--danger); }
.rules-editor__addrow { display: flex; align-items: center; gap: var(--ps--space-2); }
.rules-editor__count { font-size: 11px; color: var(--ps--fg-subtle); white-space: nowrap; }

/* Anhang-Chips (Composer + Verlauf) */
.gp-composer-block { display: flex; flex-direction: column; gap: var(--ps--space-2); }
.gp-composer__chips { display: flex; flex-wrap: wrap; gap: var(--ps--space-2); }
.gp-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px; border-radius: var(--ps--radius-pill); border: 1px solid var(--ps--border); background: var(--ps--bg-soft); color: var(--ps--fg); max-width: 260px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gp-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ps--fg-subtle); flex: 0 0 auto; }
.gp-chip.is-processing .gp-chip__dot { background: var(--ps--brand); animation: gp-pulse 1.2s ease-in-out infinite; }
.gp-chip.is-ready .gp-chip__dot { background: var(--ps--success); }
.gp-chip.is-failed { border-color: var(--ps--danger); color: var(--ps--danger); }
.gp-chip.is-failed .gp-chip__dot { background: var(--ps--danger); }
.gp-chip.is-sent { border-style: dashed; color: var(--ps--fg-subtle); }
.gp-chip.is-sent .gp-chip__dot { display: none; }
.gp-chip__x { border: 0; background: none; cursor: pointer; color: inherit; font-size: 14px; line-height: 1; padding: 0 0 0 2px; }
.gp-msg__attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--ps--space-2); }

/* ============================================================
   CSV-Import-Wizard (views/collection-import-dialog.jsx, Task 8).
   Nutzt cp-modal/da-dropzone/cp-vp-switch/ps-select-Bestand — hier nur
   die wizard-spezifische Schritt-Leiste, Vorschau-/Mapping-Tabellen und
   Feld-/Options-Zeilen. Alle Werte über --ps--*-Tokens (Studio-Chrome).
   ============================================================ */
.ps-dc__headActions { display: flex; align-items: center; gap: var(--ps--space-3, 8px); flex-wrap: wrap; }

/* Schließen-Button oben rechts (wie --props/--settings): der Basis-.cp-modal__head
   ist kein Flex-Container, sonst rutscht .cp-modal__close als Block unter den
   Titel nach links. */
/* Lange Wizard-Inhalte (Feld-Liste, Zuordnungs-Tabelle) dürfen das Modal
   nicht über den Viewport sprengen: Deckel wie bei --settings, der Body
   scrollt, Kopf/Schritte/Fuß bleiben stehen (.cp-modal ist flex-column). */
.cp-modal--import { max-height: calc(100vh - var(--ps--space-7)); }
.cp-modal--import .cp-modal__body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Schritt-Anzeige: bewusst passiv (reiner Fortschritt, KEINE Pills/Rahmen —
   die sahen klickbar aus), mit Luft zur Kopf-Trennlinie und Verbindungs-
   Strichen zwischen den Schritten. */
.ps-imp__steps {
  display: flex; gap: var(--ps--space-3, 8px); align-items: center;
  padding: var(--ps--space-4, 12px) var(--ps--space-5, 16px) 0;
  font-size: 12px; font-weight: 600; color: var(--ps--fg-subtle);
}
.ps-imp__step { display: inline-flex; align-items: center; gap: var(--ps--space-3, 8px); white-space: nowrap; }
.ps-imp__step:not(:last-child)::after {
  content: ''; width: 18px; height: 1px; background: var(--ps--border-strong);
}
.ps-imp__step.is-active { color: var(--ps--primary); font-weight: 800; }
.ps-imp__step.is-done { color: var(--ps--fg-muted); }

.ps-imp__hint { font-size: 12px; color: var(--ps--fg-muted); line-height: 1.45; }

.ps-imp__fileInfo {
  display: flex; align-items: center; gap: var(--ps--space-2, 6px); flex-wrap: wrap;
  margin-top: var(--ps--space-4, 12px); font-size: 13px; color: var(--ps--fg-muted);
}
.ps-imp__fileInfo strong { color: var(--ps--fg); }
.ps-imp__badge {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--ps--primary) 12%, var(--ps--neutral-0));
  color: var(--ps--primary);
}

.ps-imp__preview, .ps-imp__map { width: 100%; border-collapse: collapse; font-size: 13px; }
.ps-imp__preview th, .ps-imp__preview td,
.ps-imp__map th, .ps-imp__map td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--ps--border);
  vertical-align: middle;
}
.ps-imp__preview th, .ps-imp__map th {
  font-weight: 800; color: var(--ps--fg); background: var(--ps--bg-soft);
  position: sticky; top: 0;
}
.ps-imp__preview td, .ps-imp__mapSample {
  color: var(--ps--fg-muted); max-width: 220px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.ps-imp__mapName { font-weight: 700; color: var(--ps--fg); }
.ps-imp__map td:last-child { width: 260px; }

.ps-imp__mapHead, .ps-imp__fieldsHead {
  margin: var(--ps--space-5, 16px) 0 var(--ps--space-2, 6px);
  font-size: 12px; font-weight: 800; color: var(--ps--fg);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.ps-imp__fieldsHead { text-transform: none; letter-spacing: 0; color: var(--ps--fg-muted); font-weight: 600; }

.ps-imp__fields { display: flex; flex-direction: column; gap: var(--ps--space-2, 6px); }
.ps-imp__fieldRow { display: flex; align-items: center; gap: var(--ps--space-2, 6px); }
.ps-imp__fieldLabel {
  flex: 1; min-width: 0; padding: 7px 10px; border-radius: var(--ps--radius-sm, 8px);
  border: 1px solid var(--ps--border); background: var(--ps--neutral-0); color: var(--ps--fg);
  font-size: 13px;
}
.ps-imp__fieldLabel:focus { outline: none; border-color: var(--ps--primary); }
.ps-imp__fieldType { width: 170px; flex: none; }
.ps-imp__fieldDel { flex: none; }

.ps-imp__options { display: flex; gap: var(--ps--space-5, 16px); flex-wrap: wrap; margin-top: var(--ps--space-4, 12px); }
.ps-imp__options .cp-modal__field { flex: 1; min-width: 220px; }

.ps-imp__gateHint {
  display: flex; align-items: center; gap: 6px; margin-top: var(--ps--space-3, 8px);
  font-size: 12px; color: var(--ps--warning, #b7791f);
}

.ps-imp__runStub {
  display: flex; align-items: center; gap: var(--ps--space-4, 12px);
  padding: var(--ps--space-7, 24px); color: var(--ps--fg-muted);
}
.ps-imp__runStub strong { color: var(--ps--fg); display: block; }

/* Schritt 3 — Lauf/Fortschritt/Zusammenfassung (Task 9) */
.ps-imp__run { display: flex; flex-direction: column; gap: var(--ps--space-4, 12px); }
.ps-imp__runProgress { display: flex; flex-direction: column; gap: var(--ps--space-3, 8px); }
.ps-imp__runProgressHead { display: flex; align-items: center; gap: var(--ps--space-2, 6px); font-size: 14px; }
.ps-imp__runProgressHead strong { color: var(--ps--fg); }
.ps-imp__runPass {
  margin-left: auto; font-size: 12px; color: var(--ps--fg-muted);
  background: var(--ps--neutral-100, #f1f3f2); padding: 2px 8px; border-radius: 999px;
}
.ps-imp__progress {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--ps--neutral-200, #e4e8e6);
}
.ps-imp__progressFill {
  display: block; height: 100%; border-radius: 999px;
  background: var(--ps--primary); transition: width 240ms ease;
}
.ps-imp__summary {
  display: flex; flex-wrap: wrap; gap: var(--ps--space-3, 8px);
}
.ps-imp__stat {
  flex: 1; min-width: 90px; display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: var(--ps--space-3, 8px);
  border: 1px solid var(--ps--border, #e4e8e6); border-radius: var(--ps--radius-3, 10px);
}
.ps-imp__statNum { font-size: 20px; font-weight: 700; color: var(--ps--fg); }
.ps-imp__statLabel { font-size: 11px; color: var(--ps--fg-muted); text-transform: uppercase; letter-spacing: .03em; }
.ps-imp__stat--errors .ps-imp__statNum { color: var(--ps--danger, #d64545); }
.ps-imp__stat--warnings .ps-imp__statNum { color: var(--ps--warning, #b7791f); }
.ps-imp__runActions { display: flex; flex-wrap: wrap; gap: var(--ps--space-2, 6px); }

/* Offener/fehlgeschlagener Lauf → Banner in der Eintrags-Liste */
.ps-imp__banner {
  display: flex; align-items: center; gap: var(--ps--space-2, 6px);
  padding: var(--ps--space-3, 8px) var(--ps--space-4, 12px);
  margin-bottom: var(--ps--space-4, 12px);
  border: 1px solid var(--ps--border, #e4e8e6); border-radius: var(--ps--radius-3, 10px);
  background: var(--ps--neutral-50, #f7f9f8); font-size: 13px; color: var(--ps--fg);
}
.ps-imp__banner--failed { border-color: var(--ps--warning, #b7791f); }
.ps-imp__banner button { margin-left: auto; }

/* ============================================================
   Verlauf-Dialog (Seiten-Historie) — links die Zeitpunkte, rechts der
   Vergleich mit dem aktuellen Stand. Auswahl über die kanonischen
   --ps--sel-*-Tokens, damit .ph-item Teilnehmer des projektweiten
   Auswahl-Zustands ist (tests/js/styles/selected-state.test.js erhebt jede
   Regel mit Auswahl-Fläche und verlangt Teilnahme oder Ausnahme).
   ============================================================ */
.ph-body { display: grid; grid-template-columns: 260px 1fr; gap: 18px; }
.ph-list { max-height: 420px; overflow-y: auto; border-right: 1px solid var(--ps--border); padding-right: 12px; }
.ph-group { margin-bottom: 14px; }
/* Der Tag ist die Orientierung in der Liste, kein Zierrat: --ps--fg-subtle
   kommt gegen die Modalflaeche nur auf 2,57:1 (hell) bzw. 3,35:1 (dunkel),
   --ps--fg-muted auf 4,84 / 5,96 (gemessen). */
.ph-groupLabel {
  font-size: 12px; font-weight: 700; color: var(--ps--fg-muted);
  text-transform: uppercase; letter-spacing: .06em; margin: 0 0 6px;
}
.ph-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  padding: 7px 9px; font-family: var(--ps--font-sans); font-size: 13px;
  color: var(--ps--fg); text-align: left; cursor: pointer;
}
/* Zeile = Eintrag + Vorschau-Knopf. Die Auswahl-Fläche traegt der Eintrag
   (kanonische Regel in shell.css); die Zeile gibt nur das Raster. */
.ph-row { display: flex; align-items: center; gap: 2px; }
.ph-row .ph-item { flex: 1; min-width: 0; }
.ph-item:hover { background: var(--ps--neutral-50); }
.ph-peek {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 7px;
  color: var(--ps--fg-subtle); text-decoration: none;
}
.ph-peek:hover { background: var(--ps--neutral-50); color: var(--ps--fg); }
/* .ph-item.is-selected: Flaeche und Kante kommen aus der kanonischen Regel
   in shell.css, Abschnitt Auswahl-Zustand - hier bewusst nichts. */
.ph-itemTime { font-variant-numeric: tabular-nums; font-weight: 700; }
.ph-itemOp { color: var(--ps--fg-muted); }
.ph-more { margin-top: 4px; }
.ph-detail { min-width: 0; }
.ph-hint { font-size: 13px; color: var(--ps--fg-muted); display: flex; align-items: center; gap: 6px; }
.ph-error { font-size: 13px; color: var(--ps--danger-fg); }
.ph-diffHead { font-size: 15px; font-weight: 900; color: var(--ps--fg); margin-bottom: 10px; }
.ph-diffRow { font-size: 13px; color: var(--ps--fg); margin-bottom: 6px; }
.ph-diffNote { font-size: 12px; color: var(--ps--fg-muted); margin: 10px 0 14px; }
.ph-confirmBox { font-size: 13px; color: var(--ps--fg); }
.ph-confirmRow { display: flex; gap: 8px; margin-top: 8px; }
@media (max-width: 720px) {
  .ph-body { grid-template-columns: 1fr; }
  .ph-list { border-right: 0; border-bottom: 1px solid var(--ps--border); padding-right: 0; }
}