/* bytebrise CMS - Editor-Shell (P2/1). Design-Tokens als Custom Properties, Light-Default (internes
   Werkzeug, kein Dark-Mode gefordert). Farben sind gegen die ursprüngliche v1-Palette geprüft und
   dort nachgeschärft, wo der Kontrast nicht AA-tauglich war.
   Die Tokens selbst (--bb-*) leben seit C0 (Panel-Fundament) in assets/css/tokens.css - diese Datei
   konsumiert sie nur noch über var(), siehe public/index.php für die <link>-Reihenfolge
   (tokens.css VOR editor.css). */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font: 14px/1.5 var(--bb-font); background: var(--bb-bg); color: var(--bb-fg); }
button { font: inherit; }
a { color: var(--bb-brand); }

button, .btn, select, input[type="text"], input[type="password"], input[type="file"] {
  min-height: var(--bb-tap-min);
}

:focus-visible {
  outline: 2px solid var(--bb-focus);
  outline-offset: 2px;
}

/* ---------- Login (Card-Layout, siehe C0-Sektion unten für .login-card) ---------- */
.login-wrap { display: grid; place-items: center; min-height: 100vh; padding: 1rem; }
.login-sub { margin: 0 0 1.2rem; color: var(--bb-fg-muted); font-size: .88rem; }
.login-wrap label { display: grid; gap: .3rem; font-size: .85rem; color: var(--bb-fg-muted); }
.login-wrap input {
  padding: .65rem .8rem; border: 1px solid var(--bb-border); border-radius: var(--bb-radius-sm); font-size: 1rem;
}
.login-wrap button[type="submit"]:disabled { opacity: .6; }
.login-wrap .err { color: var(--bb-danger); font-size: .85rem; min-height: 1em; margin: 0; }

/* ---------- Kopfzeilen-Bausteine, die seit C0 in der neuen App-Shell (.app-topbar) weiterleben ---------- */
.meta { color: var(--bb-fg-muted); font-size: .85rem; }
.role-badge {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; padding: .2rem .55rem;
  border-radius: 999px; background: var(--bb-brand-soft); color: var(--bb-fg);
}

.btn {
  padding: .5rem 1rem; border-radius: var(--bb-radius-sm); border: 1px solid var(--bb-border);
  background: var(--bb-bg-elev); color: var(--bb-fg); cursor: pointer; font-weight: 500;
}
.btn:hover { background: var(--bb-bg); }
.btn--primary { background: var(--bb-brand); color: var(--bb-brand-fg); border-color: var(--bb-brand); font-weight: 700; }
.btn--primary:hover { background: #765c22; }
.btn--secondary { border-color: var(--bb-brand); color: var(--bb-brand); font-weight: 600; }
.btn--ghost { border-color: transparent; background: transparent; }
.btn--ghost:hover { background: var(--bb-bg); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

#save-status { font-size: .8rem; color: var(--bb-fg-muted); min-width: 10em; }
#save-status.ok { color: var(--bb-ok); }
#save-status.err { color: var(--bb-danger); }
#save-status.warn { color: var(--bb-warn-text); }

/* ---------- Workspace (Seiten-Nav | Editor | Vorschau) ---------- */
.workspace { flex: 1; display: grid; grid-template-columns: 240px minmax(0, 1fr) minmax(0, 1fr); min-height: 0; }
.workspace.preview-collapsed { grid-template-columns: 240px minmax(0, 1fr); }
.workspace.preview-collapsed .preview-col { display: none; }

.side-nav {
  border-right: 1px solid var(--bb-border-soft); background: var(--bb-bg-elev); padding: 1rem;
  overflow-y: auto; display: flex; flex-direction: column; gap: .8rem;
}
.side-nav__placeholder { color: var(--bb-fg-muted); font-size: .85rem; font-style: italic; margin: 0; }
.side-nav__block { display: flex; flex-direction: column; gap: .4rem; }
.side-nav__block h3 {
  margin: 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bb-fg-muted);
}

.editor-col { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--bb-border-soft); }
.tabs { display: flex; gap: .3rem; padding: .6rem .8rem 0; background: var(--bb-bg-elev); }
.tab {
  padding: .5rem .9rem; background: transparent; border: 1px solid var(--bb-border-soft);
  border-bottom: none; border-radius: var(--bb-radius-sm) var(--bb-radius-sm) 0 0; font-size: .85rem; cursor: pointer;
}
.tab.active { background: var(--bb-bg); border-color: var(--bb-border); font-weight: 600; }
.editor-body { flex: 1; overflow-y: auto; padding: var(--bb-density-compact-pad) 1.2rem; background: var(--bb-bg); }
.pane { display: none; }
.pane.active { display: block; }

.empty-hint { text-align: center; color: var(--bb-fg-muted); margin-top: 3rem; font-style: italic; }

/* Die früheren .palette-strip-/.block-card-Regeln sind mit dem Umbau des Seiten-Editors auf die
   serverseitigen Bereichs-Ops entfallen. Ersatz: Baukasten-Modal (.baukasten) und Bereichs-Karten
   (.sec-card) weiter unten im Abschnitt "P1". */

.field { display: grid; gap: .3rem; margin-bottom: calc(var(--bb-density-compact-pad) * .5); }
.field label { font-size: .72rem; text-transform: uppercase; color: var(--bb-fg-muted); letter-spacing: .04em; }
.field input, .field textarea, .field select {
  width: 100%; padding: .5rem .6rem; border: 1px solid var(--bb-border); border-radius: var(--bb-radius-sm);
  font: inherit; background: var(--bb-bg-elev); color: var(--bb-fg);
}
.field textarea { min-height: 5em; resize: vertical; font-family: var(--bb-font-mono); font-size: .85rem; }
.media-picker-field { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.media-picker-field img { max-height: 90px; border-radius: var(--bb-radius-sm); }
.media-picker-field .mp-empty, .media-picker-field .mp-missing, .media-picker-field .mp-meta { font-size: .78rem; }
.media-picker-field .mp-empty, .media-picker-field .mp-meta { color: var(--bb-fg-muted); }
.media-picker-field .mp-missing { color: var(--bb-danger); }
.media-picker-field button { padding: .4rem .8rem; }

/* Der Verlauf ist seit dem P1-Umbau ein eigenes Modul (assets/js/history.js, Sidebar-Eintrag
   "Verlauf"); der Objekt-Reiter im Seiten-Editor verweist nur noch dorthin. Die früheren Regeln
   für #history-list/.version-row/.panic-box/.history-preview-note sind damit entfallen. */

/* Der Veröffentlichen-Dialog des Editors ist entfallen - der eigene Drawer
   (assets/js/publish-drawer.js, assets/css/modules/publish-drawer.css) hat ihn abgelöst.
   Die früheren .publish-dialog-/.publish-step-Regeln sind damit weg. */

/* ---------- Erste-Schritte-Tour + Hilfe (P2/5, siehe onboarding.js) ---------- */
.tour-step p { margin: 0 0 .6rem; }
.tour-step__dots { text-align: center; letter-spacing: .3em; color: var(--bb-brand); margin: 0 0 .6rem; }
.modal__body .tour-step__check { display: flex; align-items: center; gap: .4rem; font-size: .8rem; text-transform: none; letter-spacing: normal; color: var(--bb-fg-muted); }
.tour-step__check input { min-height: 0; width: auto; }
.help-panel__item { border: 1px solid var(--bb-border-soft); border-radius: var(--bb-radius-sm); padding: .5rem .7rem; margin-bottom: .5rem; }
.help-panel__item summary { cursor: pointer; font-weight: 600; font-size: .88rem; }
.help-panel__item p { margin: .5rem 0 0; font-size: .85rem; color: var(--bb-fg-muted); }
.help-panel__replay { width: 100%; }

/* ---------- Medien-Auswahl (Bildfelder + OG-Bild; die Verwaltung inkl. Hochladen liegt im
   Medien-Modul, deshalb ist die früher hier stehende Upload-Leiste entfallen) ---------- */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; max-width: 760px; margin: 0 auto; }
.media-tile {
  display: block; width: 100%; padding: 0; background: var(--bb-bg-elev); border: 1px solid var(--bb-border-soft);
  border-radius: var(--bb-radius-sm); overflow: hidden; cursor: pointer; transition: border-color .15s; text-align: left;
}
.media-tile:hover, .media-tile:focus-visible { border-color: var(--bb-brand); }
.media-tile .thumb { aspect-ratio: 1; background: var(--bb-bg) center/cover no-repeat; }
.media-tile .meta { padding: .4rem .5rem; font-size: .72rem; color: var(--bb-fg-muted); }
.media-tile .meta strong { display: block; color: var(--bb-fg); font-weight: 600; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-tile .ai-tag { display: inline-block; padding: 1px 5px; background: var(--bb-brand-soft); color: var(--bb-brand); border-radius: 3px; font-size: .65rem; margin-top: .2rem; }

/* ---------- Lock-Banner ---------- */
.lock-banner {
  position: sticky; top: 0; z-index: 1000; background: #fff4d6; border-bottom: 2px solid #a17a1f;
  color: #5c4408; padding: .6rem 1.2rem; font-size: .88rem;
}
.lock-banner code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 3px; font-size: .85em; }
.lock-banner button { margin-left: .5rem; padding: .3rem .7rem; background: var(--bb-bg-elev); border: 1px solid #a17a1f; border-radius: 3px; color: #5c4408; cursor: pointer; }
.lock-banner button:hover { background: #a17a1f; color: #fff; }
body.read-only .editor-body { opacity: .6; pointer-events: none; }

/* ---------- Vorschau ---------- */
.preview-col { border-left: 1px solid var(--bb-border-soft); background: #e8e3d3; padding: .8rem; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.preview-toolbar { display: flex; justify-content: flex-end; width: 100%; }
.preview-toolbar button { padding: .4rem .8rem; border: 1px solid var(--bb-border); border-radius: var(--bb-radius-sm); background: var(--bb-bg-elev); }
.preview-frame-wrap { background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.08); border-radius: 6px; overflow: hidden; transition: width .2s; width: 100%; flex: 1; }
.preview-frame-wrap[data-device="mobile"] { width: 390px; max-height: 90%; }
.preview-frame-wrap[data-device="tablet"] { width: 768px; height: 90%; }
.preview-frame-wrap[data-device="desktop"] { width: 100%; height: 100%; }
.preview-frame-wrap iframe { width: 100%; height: 100%; border: 0; background: #fff; }

/* Der Seitenbaum hat mit dem P1-Umbau eigene Regeln bekommen (.ptree, siehe Abschnitt "P1"
   weiter unten). Die früheren Regeln der flachen Seitenliste (.pages-panel__*, .page-row*,
   .page-edit*) sind damit entfallen. */

/* ---------- Rich-Text-Feld (WYSIWYG-Toolbar, P2/3, siehe editor-richtext.js) ---------- */
.richtext-field-wrap { width: 100%; }
.richtext-field { display: flex; flex-direction: column; gap: .3rem; }
.richtext-editable {
  min-height: 5.5em; padding: .5rem .6rem; border: 1px solid var(--bb-border); border-radius: var(--bb-radius-sm);
  background: var(--bb-bg-elev); color: var(--bb-fg); font: inherit;
}
.richtext-editable:focus-visible { outline: 2px solid var(--bb-focus); outline-offset: 1px; }
.richtext-editable p { margin: 0 0 .6em; }
.richtext-editable p:last-child { margin-bottom: 0; }
.richtext-editable ul, .richtext-editable ol { margin: 0 0 .6em 1.2em; padding: 0; }
.richtext-editable h3 { margin: 0 0 .4em; font-size: 1.05rem; }
.richtext-editable a { color: var(--bb-brand); }
.richtext-editable.is-readonly { background: var(--bb-bg); color: var(--bb-fg-muted); cursor: not-allowed; }
/* DOM-Reihenfolge ist Feld-dann-Toolbar (siehe editor-richtext.js - so folgt die Tab-Reihenfolge
   vorwärts vom Feld zur Toolbar); "order" dreht nur die visuelle Position um, die Toolbar erscheint
   optisch über dem Feld. */
.richtext-toolbar {
  display: none; order: -1; gap: .25rem; flex-wrap: wrap; padding: .3rem;
  background: var(--bb-bg); border: 1px solid var(--bb-border-soft); border-radius: var(--bb-radius-sm);
}
.richtext-field:focus-within .richtext-toolbar { display: flex; }
.richtext-toolbar__btn {
  min-width: var(--bb-tap-min); min-height: var(--bb-tap-min); padding: 0 .5rem; font-size: .78rem;
  background: var(--bb-bg-elev); border: 1px solid var(--bb-border); border-radius: var(--bb-radius-sm);
  color: var(--bb-fg); cursor: pointer;
}
.richtext-toolbar__btn:hover { background: var(--bb-brand-soft); }
.richtext-toolbar__btn.is-bold { font-weight: 700; }
.richtext-toolbar__btn.is-italic { font-style: italic; }

/* ---------- Link-Picker-Feld im Block-Editor (siehe editor-blocks.js) ---------- */
.link-picker-field { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.link-picker-field .lp-value { font-size: .82rem; font-family: var(--bb-font-mono); word-break: break-all; }
.link-picker-field .lp-empty { font-size: .82rem; color: var(--bb-fg-muted); }
.link-picker-field button { padding: .4rem .8rem; }

/* ---------- Dialoge (Neue Seite, Löschen-Bestätigung, Link-Picker - siehe modal.js) ---------- */
body.modal-open { overflow: hidden; }
.modal-overlay {
  position: fixed; inset: 0; background: rgba(26, 26, 26, .45); display: grid; place-items: center;
  padding: 1rem; z-index: 2000;
}
.modal {
  background: var(--bb-bg-elev); border-radius: var(--bb-radius-lg); box-shadow: 0 12px 32px rgba(0, 0, 0, .22);
  width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column;
}
.modal__header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.2rem; border-bottom: 1px solid var(--bb-border-soft); }
.modal__header h2 { margin: 0; font-size: 1.05rem; }
.modal__close { background: none; border: none; font-size: 1rem; padding: .3rem .6rem; cursor: pointer; color: var(--bb-fg-muted); min-height: 2rem; }
.modal__close:hover { color: var(--bb-fg); }
.modal__body { padding: 1.2rem; display: grid; gap: .7rem; }
.modal__body label { display: block; font-size: .78rem; color: var(--bb-fg-muted); margin-bottom: .2rem; }
.modal__body input[type="text"], .modal__body select {
  width: 100%; padding: .5rem .6rem; border: 1px solid var(--bb-border); border-radius: var(--bb-radius-sm); font: inherit;
}
.modal__body fieldset { border: 1px solid var(--bb-border-soft); border-radius: var(--bb-radius-sm); padding: .6rem .8rem; margin: 0; }
.modal__body legend { font-size: .78rem; color: var(--bb-fg-muted); padding: 0 .3rem; }
.modal__footer { display: flex; justify-content: flex-end; gap: .6rem; padding: 1rem 1.2rem; border-top: 1px solid var(--bb-border-soft); }
.modal__hint { font-size: .82rem; color: var(--bb-fg-muted); margin: 0; }
.modal__error { color: var(--bb-danger); font-size: .82rem; min-height: 1em; margin: 0; }
.modal__tabs { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .3rem; }
.modal__tab {
  padding: .4rem .8rem; background: transparent; border: 1px solid var(--bb-border-soft);
  border-radius: 999px; font-size: .8rem; cursor: pointer; color: var(--bb-fg);
}
.modal__tab.active { background: var(--bb-brand-soft); border-color: var(--bb-brand); font-weight: 600; }
/* :not([hidden]) statt einer eigenen .active-Klasse - eine einzige Quelle (das hidden-Attribut,
   von link-picker.js/pages-nav.js gesetzt) statt zweier Mechanismen, die auseinanderlaufen könnten. */
.modal__pane:not([hidden]) { display: grid; gap: .6rem; }

.btn--danger { border-color: var(--bb-danger); color: var(--bb-danger); }
.btn--danger:hover { background: var(--bb-danger); color: #fff; }

/* ---------- Toasts (P2/4, siehe ui-kit.js BBUIKit.toast() / modal.js Re-Export) ---------- */
.bb-toast-stack {
  position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
  z-index: 2500; display: flex; flex-direction: column; gap: .4rem; align-items: center;
  pointer-events: none; max-width: 90vw;
}
.bb-toast {
  background: var(--bb-fg); color: #fff; padding: .6rem 1rem; border-radius: var(--bb-radius-sm);
  font-size: .85rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); opacity: 1;
  transition: opacity .2s, transform .2s; pointer-events: auto;
  display: flex; align-items: center; gap: .7rem; /* C0: Platz für den optionalen Undo-Button */
}
.bb-toast--err { background: var(--bb-danger); }
.bb-toast--ok { background: var(--bb-ok); }
.bb-toast--out { opacity: 0; transform: translateY(6px); }
.bb-toast__undo {
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.35); color: #fff;
  padding: .2rem .6rem; border-radius: var(--bb-radius-sm); font-size: .78rem; cursor: pointer;
  min-height: 0; flex-shrink: 0;
}
.bb-toast__undo:hover { background: rgba(255,255,255,.28); }

.new-page__slug { margin: 0; font-size: .78rem; color: var(--bb-fg-muted); font-family: var(--bb-font-mono); }
.new-page__slug code { font-family: inherit; color: var(--bb-fg); }

.link-picker__panes { display: grid; gap: .6rem; }
.link-picker__hint { margin: 0; font-size: .78rem; color: var(--bb-fg-muted); }
.link-picker__radios { display: flex; gap: 1rem; margin-top: .3rem; }
.modal__body .link-picker__radio { display: flex; align-items: center; gap: .3rem; font-size: .85rem; text-transform: none; letter-spacing: normal; color: var(--bb-fg); }
.link-picker__radio input { min-height: 0; width: auto; }

/* ---------- Mobile-Politur (P2/4) - Standard (Desktop): unsichtbar/inert ---------- */
.mobile-actionbar, .mobile-preview-close-btn { display: none; }

@media (max-width: 900px) {
  /* Einspaltiges Stacking statt drei Grid-Spalten: Seiten-Nav und Editor stapeln sich übereinander
     (jeweils eigener Scroll-Bereich); die Vorschau wird zum Vollbild-Overlay (siehe unten) statt
     einer dritten, auf Telefonbreite gequetschten Spalte. */
  .workspace { display: flex; flex-direction: column; }
  .side-nav { border-right: none; border-bottom: 1px solid var(--bb-border-soft); max-height: 40vh; flex-shrink: 0; }
  .editor-col { border-right: none; flex: 1; min-height: 0; }
  .editor-body { padding-bottom: calc(var(--bb-tap-min) + 2rem); } /* Platz für die fixierte Aktionsleiste unten */

  /* Vorschau: Vollbild-Overlay statt dritter Spalte, geöffnet über die Aktionsleiste unten. */
  .preview-col { display: none; }
  .workspace.mobile-preview-open .preview-col {
    display: flex; position: fixed; inset: 0; z-index: 1600; padding: .6rem; border-left: none;
  }
  .workspace.mobile-preview-open .preview-frame-wrap { width: 100%; height: 100%; }
  #preview-toggle, #preview-device { display: none; } /* Desktop-Bedienung, auf Mobil ersetzt bzw. irrelevant */
  .mobile-preview-close-btn {
    display: inline-flex; padding: .4rem .8rem; border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-sm); background: var(--bb-bg-elev);
  }

  /* Sticky Aktionsleiste unten: Speichern/Vorschau/Rückgängig - die häufigsten Aktionen ohne
     Strecken zur Kopfzeile erreichbar (Kopfzeilen-Buttons bleiben zusätzlich bestehen). */
  .mobile-actionbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1300;
    gap: .5rem; padding: .5rem .8rem; background: var(--bb-bg-elev);
    border-top: 1px solid var(--bb-border-soft); box-shadow: 0 -4px 12px rgba(0, 0, 0, .1);
  }
  .mobile-actionbar__btn {
    flex: 1; min-height: var(--bb-tap-min); border-radius: var(--bb-radius-sm);
    border: 1px solid var(--bb-border); background: var(--bb-bg-elev); color: var(--bb-fg);
    font-weight: 600; font-size: .82rem;
  }
  .mobile-actionbar__btn--primary { background: var(--bb-brand); color: var(--bb-brand-fg); border-color: var(--bb-brand); }
  .mobile-actionbar__btn:disabled { opacity: .5; }

  /* Touch-Targets >=44px (diverse Steuerelemente sind auf Desktop bewusst kompakter dimensioniert) */
  .modal__close, .sec-card__kebab, .sec-card__disclosure, .sec-card__handle,
  .ptree__kebab, .ptree__disclosure, .ptree__handle, .ptree__title,
  .lines-editor__handle, .lines-editor__move, .lines-editor__remove, .group-editor__disclosure {
    min-width: var(--bb-tap-min); min-height: var(--bb-tap-min);
  }
  .link-picker__radio, .seo-toggle { min-height: var(--bb-tap-min); }

  .bb-toast-stack { bottom: calc(var(--bb-tap-min) + 2.2rem); } /* oberhalb der Aktionsleiste */
}

/* ================================================================================================
   C0 - Panel-Fundament: App-Shell, UI-Kit, Dashboard, Login-Card.
   Rein additiv (siehe docs/DEVIATIONS.md-Prinzip "chirurgisch"): alles oberhalb dieser Trennlinie ist
   das bestehende Editor-CSS, unverändert bis auf die entfernten toten .shell/.topbar-Regeln (durch
   die neue App-Shell in public/index.php ersetzt, siehe dortiger Kommentar).
   ================================================================================================ */

/* ---------- Utilities ---------- */
.icon {
  width: 20px; height: 20px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 3000; background: var(--bb-brand); color: var(--bb-brand-fg);
  padding: .6rem 1rem; border-radius: 0 0 var(--bb-radius-sm) 0; font-size: .85rem; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------- Login-Card (UX-Plan 7: "großer Moment", Display-Font-Platzhalter) ---------- */
.login-card {
  background: var(--bb-bg-elev); padding: 2.2rem 2rem; border-radius: var(--bb-radius-lg);
  width: 100%; max-width: 400px; box-shadow: 0 20px 50px rgba(26, 26, 26, .12);
  border: 1px solid var(--bb-border-soft);
}
.login-card__brand {
  margin: 0 0 1.4rem; font-family: var(--bb-font-display); font-weight: 700; font-size: 1rem;
  letter-spacing: .02em; color: var(--bb-fg-muted);
}
.login-card__brand span { color: var(--bb-brand); }
.login-card__title { margin: 0 0 .3rem; font-size: 1.6rem; font-family: var(--bb-font-display); color: var(--bb-fg); }
#login-form { display: grid; gap: 1rem; margin-top: 1.2rem; }
.login-card__submit { width: 100%; padding: .8rem; font-size: .95rem; }
/* Turnstile-Container (docs/API.md Abschnitt 1.3) - inert solange kein Sitekey gesetzt ist, siehe
   public/index.php-Kommentar + docs/DEVIATIONS.md. */
.turnstile-slot:not([hidden]) { min-height: 65px; }

/* ---------- App-Shell (UX-Plan Abschnitt 1) ---------- */
.app-shell { display: flex; height: 100vh; background: var(--bb-bg); }

.app-sidebar {
  width: 220px; flex-shrink: 0; background: var(--bb-bg-elev); border-right: 1px solid var(--bb-border-soft);
  display: flex; flex-direction: column; transition: width .15s ease; overflow: hidden;
}
.app-sidebar[data-collapsed="true"] { width: 64px; }
.app-sidebar__header {
  display: flex; align-items: center; gap: .5rem; padding: .8rem; min-height: 56px;
  border-bottom: 1px solid var(--bb-border-soft);
}
.app-sidebar__toggle {
  width: 36px; height: 36px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; border-radius: var(--bb-radius-sm);
  color: var(--bb-fg); cursor: pointer;
}
.app-sidebar__toggle:hover { background: var(--bb-bg); border-color: var(--bb-border-soft); }
.app-sidebar__brand { font-weight: 700; white-space: nowrap; overflow: hidden; }
.app-sidebar__brand-sub { color: var(--bb-brand); }
.app-sidebar[data-collapsed="true"] .app-sidebar__brand { display: none; }

.app-sidebar__nav { flex: 1; overflow-y: auto; padding: .6rem; display: flex; flex-direction: column; gap: .15rem; }
.app-nav-divider { height: 1px; background: var(--bb-border-soft); margin: .5rem .3rem; }

.app-nav-item {
  display: flex; align-items: center; gap: .7rem; width: 100%; padding: .55rem .6rem;
  background: transparent; border: none; border-left: 3px solid transparent; border-radius: var(--bb-radius-sm);
  color: var(--bb-fg); font-size: .88rem; text-align: left; cursor: pointer; white-space: nowrap;
}
.app-nav-item:hover:not(:disabled) { background: var(--bb-bg); }
.app-nav-item.active { background: var(--bb-brand-soft); border-left-color: var(--bb-brand); font-weight: 600; }
.app-nav-item:disabled, .app-nav-item.is-disabled { color: var(--bb-fg-muted); cursor: not-allowed; }
.app-nav-item__label { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.app-nav-item__badge {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .03em; padding: .1rem .4rem;
  border-radius: 999px; background: var(--bb-warn-bg); color: var(--bb-warn-text); flex-shrink: 0;
}
.app-sidebar[data-collapsed="true"] .app-nav-item__label,
.app-sidebar[data-collapsed="true"] .app-nav-item__badge { display: none; }
.app-sidebar[data-collapsed="true"] .app-nav-item { justify-content: center; }

/* ---------- Hauptbereich: Topbar + Body ---------- */
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100vh; }

.app-topbar {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; min-height: 56px;
  padding: .5rem 1.2rem; background: var(--bb-bg-elev); border-bottom: 1px solid var(--bb-border-soft);
}
.app-topbar__crumb { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .85rem; }
.app-topbar__brand { font-weight: 700; color: var(--bb-fg); }
.app-topbar__sep { width: 14px; height: 14px; color: var(--bb-fg-muted); }
.app-topbar__crumb #app-topbar-module { font-weight: 600; }
.app-tenant-switch { display: flex; align-items: center; gap: .4rem; font-size: .85rem; }
.app-tenant-switch select { padding: .35rem .5rem; border: 1px solid var(--bb-border); border-radius: var(--bb-radius-sm); }
.app-topbar__right { display: flex; align-items: center; gap: .6rem; margin-left: auto; flex-wrap: wrap; }

.app-icon-btn {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--bb-border-soft); border-radius: var(--bb-radius-sm);
  color: var(--bb-fg); cursor: pointer;
}
.app-icon-btn:hover:not(:disabled) { background: var(--bb-bg); }
.app-icon-btn:disabled { color: var(--bb-fg-muted); cursor: not-allowed; }

.app-lang-pill { display: inline-flex; border: 1px solid var(--bb-border-soft); border-radius: 999px; overflow: hidden; }
.app-lang-pill button {
  padding: .3rem .65rem; font-size: .75rem; font-weight: 600; background: transparent; border: none;
  color: var(--bb-fg-muted); cursor: not-allowed; min-height: 0;
}
.app-lang-pill button[aria-pressed="true"] { background: var(--bb-brand-soft); color: var(--bb-fg); }

.app-avatar-menu { position: relative; }
.app-avatar-btn { background: transparent; border: none; padding: 0; cursor: pointer; min-height: 0; }
.app-avatar {
  width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bb-brand); color: var(--bb-brand-fg); font-weight: 700; font-size: .85rem;
}
.app-avatar-dropdown {
  position: absolute; right: 0; top: calc(100% + .5rem); min-width: 200px; z-index: 1500;
  background: var(--bb-surface-float); color: var(--bb-surface-float-fg);
  border: 1px solid var(--bb-surface-float-border); border-radius: var(--bb-radius-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5); padding: .6rem; display: flex; flex-direction: column; gap: .15rem;
}
/* [hidden] ist ein Attributselektor und damit gleich spezifisch wie eine Klasse - ohne diese Zeile
   gewinnt das "display: flex" oben gegen die Browser-Regel [hidden]{display:none}, und das per
   element.hidden=false geschlossene Menü bliebe dauerhaft sichtbar. */
.app-avatar-dropdown[hidden] { display: none; }
.app-avatar-dropdown__user { margin: 0; font-weight: 600; font-size: .85rem; padding: .3rem .5rem 0; }
.app-avatar-dropdown__role { margin: 0 0 .3rem; font-size: .72rem; color: var(--bb-surface-float-fg-muted); padding: 0 .5rem; }
.app-avatar-dropdown__item {
  display: block; width: 100%; text-align: left; padding: .5rem; background: transparent; border: none;
  border-radius: var(--bb-radius-sm); color: var(--bb-surface-float-fg); font-size: .85rem; cursor: pointer; min-height: 0;
}
.app-avatar-dropdown__item:hover { background: rgba(255, 255, 255, .08); }

/* ---------- Body: Kontextpanel-Slot + Stage ---------- */
.app-body { flex: 1; min-height: 0; display: flex; }
.app-context-panel {
  width: 260px; flex-shrink: 0; border-right: 1px solid var(--bb-border-soft); background: var(--bb-bg-elev);
  overflow-y: auto;
}
.app-stage { flex: 1; min-width: 0; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.app-module { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.app-module[hidden] { display: none; }
.app-module[data-module="pages"] { overflow: hidden; } /* .workspace verwaltet ihr eigenes Scrolling */
.app-module[data-module="dashboard"] { overflow-y: auto; padding: var(--bb-density-pad) 1.4rem 2rem; }

/* ---------- "Seiten"-Modul: Werkzeugleiste (frühere .topbar__actions) ---------- */
.module-toolbar {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .6rem 1.2rem;
  background: var(--bb-bg-elev); border-bottom: 1px solid var(--bb-border-soft);
}

/* ---------- Dashboard (dashboard.js) ---------- */
.dash__greeting { margin-bottom: 1.6rem; }
.dash__greeting-title { margin: 0 0 .2rem; font-size: 1.6rem; font-family: var(--bb-font-display); color: var(--bb-fg); }
.dash__greeting-sub { margin: 0; color: var(--bb-fg-muted); }
.dash__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .8rem; margin-bottom: 1.6rem; max-width: 760px; }
.dash-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: 1rem;
  background: var(--bb-bg-elev); border: 1px solid var(--bb-border-soft); border-radius: var(--bb-radius-md);
  cursor: pointer; text-align: left; position: relative; transition: border-color .15s, transform .15s;
}
.dash-tile:hover:not(:disabled) { border-color: var(--bb-brand); transform: translateY(-1px); }
.dash-tile:disabled { cursor: not-allowed; color: var(--bb-fg-muted); }
.dash-tile__icon { width: 22px; height: 22px; color: var(--bb-brand); }
.dash-tile__label { font-size: .85rem; font-weight: 600; }
.dash-tile .app-nav-item__badge { position: absolute; top: .6rem; right: .6rem; }
.dash__widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .9rem; max-width: 900px; }
.dash-card { background: var(--bb-bg-elev); border: 1px solid var(--bb-border-soft); border-radius: var(--bb-radius-md); padding: 1rem 1.1rem; }
.dash-card__title { margin: 0 0 .5rem; font-size: .9rem; display: flex; align-items: center; gap: .5rem; }
.dash-card__badge { font-weight: 400; }
.dash-card__empty { margin: 0; color: var(--bb-fg-muted); font-size: .85rem; }
.dash-activity-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .35rem; font-size: .82rem; color: var(--bb-fg-muted); }
.dash-activity-list li { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.dash-card__link {
  background: none; border: none; padding: 0; min-height: 0; text-align: left; cursor: pointer;
  font: inherit; color: var(--bb-fg); border-radius: var(--bb-radius-sm);
}
.dash-card__link:hover { color: var(--bb-brand); text-decoration: underline; }
.dash-card__kind { flex-shrink: 0; font-size: .74rem; color: var(--bb-fg-muted); }

/* ---------- Badge/Pill (UI-Kit) ---------- */
.badge { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; line-height: 1.4; }
.badge--draft { background: var(--bb-border-soft); color: var(--bb-fg-muted); }
.badge--published { background: var(--bb-ok-bg); color: var(--bb-ok); }
.badge--changes { background: var(--bb-warn-bg); color: var(--bb-warn-text); }
.badge--error { background: var(--bb-danger-bg); color: var(--bb-danger); }
.badge--neutral { background: var(--bb-brand-soft); color: var(--bb-fg); }

/* ---------- Drawer (UI-Kit, Slide-over rechts, siehe ui-kit.js BBUIKit.drawer()) ---------- */
.drawer-overlay { position: fixed; inset: 0; background: rgba(26, 26, 26, .45); z-index: 2000; display: flex; justify-content: flex-end; }
.drawer {
  background: var(--bb-bg-elev); width: 480px; max-width: 92vw; height: 100%;
  box-shadow: -12px 0 32px rgba(0, 0, 0, .18); display: flex; flex-direction: column;
  animation: bb-drawer-in .18s ease;
}
@keyframes bb-drawer-in { from { transform: translateX(24px); opacity: .6; } to { transform: translateX(0); opacity: 1; } }
.drawer__header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.2rem; border-bottom: 1px solid var(--bb-border-soft); }
.drawer__header h2 { margin: 0; font-size: 1.05rem; }
.drawer__close { background: none; border: none; padding: .3rem; cursor: pointer; color: var(--bb-fg-muted); min-height: 2rem; }
.drawer__close:hover { color: var(--bb-fg); }
.drawer__body { flex: 1; overflow-y: auto; padding: 1.2rem; display: grid; gap: .7rem; align-content: start; }
.drawer__footer { display: flex; justify-content: flex-end; gap: .6rem; padding: 1rem 1.2rem; border-top: 1px solid var(--bb-border-soft); }

/* ---------- Skeleton (UI-Kit) ---------- */
.skeleton-group { display: grid; gap: .5rem; }
.skeleton {
  background: linear-gradient(90deg, var(--bb-border-soft) 25%, var(--bb-bg) 37%, var(--bb-border-soft) 63%);
  background-size: 400% 100%; border-radius: var(--bb-radius-sm); animation: bb-skeleton-shimmer 1.4s ease infinite;
}
.skeleton--text { height: .85rem; }
.skeleton--block { height: 5rem; }
@keyframes bb-skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .skeleton, .dash-tile { animation: none; transition: none; } }

/* ---------- Stepper (UI-Kit, eigener Name - .publish-step gehört weiter dem bestehenden
   Veröffentlichen-Dialog in editor-blocks.js) ---------- */
.uikit-stepper { display: flex; flex-direction: column; gap: .4rem; }
.uikit-stepper__step { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--bb-fg-muted); }
.uikit-stepper__icon { display: inline-flex; align-items: center; justify-content: center; width: 1.3em; font-weight: 700; }
.uikit-stepper__step[data-state="done"] { color: var(--bb-ok); }
.uikit-stepper__step[data-state="active"] { color: var(--bb-fg); font-weight: 600; }
.uikit-stepper__step[data-state="error"] { color: var(--bb-danger); font-weight: 600; }

/* ---------- DragList (UI-Kit) ---------- */
.uikit-draglist__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
[data-drag-handle] {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  background: transparent; border: 1px solid var(--bb-border-soft); border-radius: var(--bb-radius-sm);
  color: var(--bb-fg-muted); cursor: grab; min-height: 0;
}
[data-drag-handle]:hover { background: var(--bb-bg); color: var(--bb-fg); }
[data-drag-handle] .icon { width: 16px; height: 16px; }

/* ---------- App-Shell Mobile-Politur (<900px, gleicher Bruchpunkt wie die bestehende
   Workspace-Mobile-Politur oben) ---------- */
@media (max-width: 900px) {
  .app-sidebar { width: 64px; }
  .app-sidebar__brand,
  .app-nav-item__label,
  .app-nav-item__badge { display: none; }
  .app-nav-item { justify-content: center; }
  .app-context-panel { display: none; }
  .app-topbar { padding: .5rem .8rem; }
  .app-avatar-dropdown { max-width: calc(100vw - 1.6rem); }
}

/* ================================================================================================
   P1 - Seiten-Editor: Bereichs-Karten, Baukasten, Seitenbaum.
   Ersetzt die früheren .block-card-/.palette-strip-/.page-row-Regeln (siehe die Hinweise weiter
   oben). Ausschließlich Tokens aus tokens.css, keine festen Farbwerte.
   ================================================================================================ */

/* ---------- Hinweise und Leerzustände im Editor ---------- */
.editor-notice {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .6rem .8rem; margin: 0 auto 1rem; max-width: 780px;
  border-radius: var(--bb-radius-md); font-size: .85rem;
}
.editor-notice--warn { background: var(--bb-warn-bg); border: 1px solid var(--bb-warn); color: var(--bb-warn-text); }
.editor-notice .btn { padding: .35rem .8rem; min-height: 2.1rem; font-size: .8rem; }

.editor-empty {
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  max-width: 460px; margin: 3rem auto; text-align: center; color: var(--bb-fg-muted);
}
.editor-empty p { margin: 0; font-family: var(--bb-font-display); font-size: 1.02rem; color: var(--bb-fg); }
.editor-empty__icon { width: 40px; height: 40px; color: var(--bb-border); }

/* ---------- Konfliktansicht (409, docs/API.md 1.6) ---------- */
.conflict-list { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .6rem; }
.conflict-list li {
  display: grid; gap: .15rem; padding: .5rem .7rem; font-size: .82rem;
  background: var(--bb-bg); border: 1px solid var(--bb-border-soft); border-radius: var(--bb-radius-sm);
}
.conflict-list__mine { color: var(--bb-fg); }
.conflict-list__theirs { color: var(--bb-fg-muted); }

/* ---------- Bereichsliste ---------- */
.sec-toolbar {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  max-width: 780px; margin: 0 auto var(--bb-density-compact-pad);
}
.sec-toolbar__add { display: inline-flex; align-items: center; gap: .35rem; }
.sec-toolbar__lang { font-size: .8rem; color: var(--bb-fg-muted); }

.sec-list { display: flex; flex-direction: column; gap: calc(var(--bb-density-compact-pad) * .6); max-width: 780px; margin: 0 auto; }
.sec-card {
  background: var(--bb-bg-elev); border: 1px solid var(--bb-border-soft);
  border-radius: var(--bb-radius-md); transition: border-color .15s, transform .15s;
}
.sec-card:hover { border-color: var(--bb-border); transform: translateY(-1px); }
.sec-card.is-dragging { opacity: .45; }
.sec-card.is-drop-target { border-color: var(--bb-brand); border-style: dashed; }
.sec-card.is-off { opacity: .72; }
@media (prefers-reduced-motion: reduce) { .sec-card { transition: none; } .sec-card:hover { transform: none; } }

.sec-card__head {
  display: flex; align-items: center; gap: .45rem; min-width: 0;
  padding: calc(var(--bb-density-compact-pad) * .5) calc(var(--bb-density-compact-pad) * .6);
}
.sec-card__handle {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; min-height: 0;
  background: transparent; border: 1px solid transparent; border-radius: var(--bb-radius-sm);
  color: var(--bb-fg-muted); cursor: grab; flex-shrink: 0;
}
.sec-card__handle:hover:not(:disabled) { background: var(--bb-bg); border-color: var(--bb-border-soft); color: var(--bb-fg); }
.sec-card__handle:disabled { opacity: .35; cursor: not-allowed; }
.sec-card__disclosure {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-height: 0;
  background: transparent; border: none; color: var(--bb-fg-muted); cursor: pointer; flex-shrink: 0;
}
.sec-card__disclosure:hover { color: var(--bb-fg); }
.sec-card__icon { color: var(--bb-brand); flex-shrink: 0; }

.sec-card__titles { display: flex; align-items: center; gap: .5rem; min-width: 0; flex: 1; flex-wrap: wrap; }
.sec-card__title { font-weight: 600; font-size: .88rem; color: var(--bb-fg); white-space: nowrap; }
.sec-card__thumb {
  display: inline-block; width: 26px; height: 26px; border-radius: var(--bb-radius-sm); flex-shrink: 0;
  background: var(--bb-bg) center/cover no-repeat; border: 1px solid var(--bb-border-soft);
}
.sec-card__preview {
  font-size: .8rem; color: var(--bb-fg-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34ch;
}
.sec-card__body { padding: var(--bb-density-compact-pad); border-top: 1px solid var(--bb-border-soft); }

/* ---------- Breite Fenster (A2): kurze Felder (Auswahl/Zahl/kurzer Text) paarweise nebeneinander.
   Fließtext/Rich-Text/Zeilenlisten/Bild- und Link-Auswahl (.field--full) bleiben über die volle
   Kartenbreite - die Karte selbst bleibt bei max-width:780px (.sec-list), die Lesbarkeitsgrenze für
   Fließtext wird also nicht geopfert, es werden nur mehr kurze Felder pro Bildschirmzeile sichtbar. */
@media (min-width: 1500px) {
  .sec-card__body { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; align-content: start; }
  .sec-card__body > .field--full, .sec-card__body > p { grid-column: 1 / -1; }
}

/* ---------- Kebab-Menü (Bereichs-Karte + Seitenbaum teilen sich die Optik) ---------- */
.sec-card__menu, .ptree__menu { position: relative; flex-shrink: 0; }
.sec-card__kebab, .ptree__kebab {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; min-height: 0;
  background: transparent; border: 1px solid transparent; border-radius: var(--bb-radius-sm);
  color: var(--bb-fg-muted); cursor: pointer;
}
.sec-card__kebab:hover, .ptree__kebab:hover { background: var(--bb-bg); border-color: var(--bb-border-soft); color: var(--bb-fg); }
.sec-card__dropdown, .ptree__dropdown {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 1200; min-width: 190px;
  background: var(--bb-surface-float); color: var(--bb-surface-float-fg);
  border: 1px solid var(--bb-surface-float-border); border-radius: var(--bb-radius-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5); padding: .3rem; display: flex; flex-direction: column;
}
/* Siehe Kommentar bei .app-avatar-dropdown[hidden]: ohne diese Zeile standen ALLE Kebab-Menüs des
   Seitenbaums und aller Bereichskarten gleichzeitig offen. */
.sec-card__dropdown[hidden], .ptree__dropdown[hidden] { display: none; }
.sec-card__dropdown-item, .ptree__dropdown-item {
  display: flex; align-items: center; gap: .5rem; width: 100%; min-height: 2.2rem;
  padding: .4rem .6rem; background: transparent; border: none; border-radius: var(--bb-radius-sm);
  color: var(--bb-surface-float-fg); font-size: .85rem; text-align: left; cursor: pointer;
}
.sec-card__dropdown-item:hover:not(:disabled), .ptree__dropdown-item:hover:not(:disabled) { background: rgba(255, 255, 255, .08); }
.sec-card__dropdown-item:disabled, .ptree__dropdown-item:disabled { opacity: .4; cursor: not-allowed; }
.sec-card__dropdown-item.is-danger, .ptree__dropdown-item.is-danger { color: var(--bb-err-text); }
.sec-card__dropdown-item .icon, .ptree__dropdown-item .icon { width: 16px; height: 16px; }

/* ---------- Feld-Zusätze (geteilte Felder, fehlende Übersetzung) ---------- */
.field__lock { width: 13px; height: 13px; margin-left: .3rem; color: var(--bb-fg-muted); vertical-align: -1px; }
.field__fallback { font-size: .75rem; color: var(--bb-fg-muted); font-style: italic; }

/* ---------- Zeilen-Editor (lines-Feld, siehe editor-blocks.js renderLinesField) ---------- */
.lines-editor { display: flex; flex-direction: column; gap: calc(var(--bb-density-compact-pad) * .4); }
.lines-editor__list { display: flex; flex-direction: column; gap: calc(var(--bb-density-compact-pad) * .4); }
.lines-editor__row { display: flex; align-items: center; gap: .35rem; }
.lines-editor__row.is-dragging { opacity: .45; }
.lines-editor__row.is-drop-target { outline: 1px dashed var(--bb-brand); outline-offset: 2px; border-radius: var(--bb-radius-sm); }
.lines-editor__handle {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; min-height: 0;
  background: transparent; border: 1px solid transparent; border-radius: var(--bb-radius-sm);
  color: var(--bb-fg-muted); cursor: grab; flex-shrink: 0;
}
.lines-editor__handle:hover:not(:disabled) { background: var(--bb-bg); border-color: var(--bb-border-soft); color: var(--bb-fg); }
.lines-editor__handle:disabled { opacity: .35; cursor: not-allowed; }
.lines-editor__handle .icon { width: 15px; height: 15px; }
.lines-editor__index { font-size: .74rem; color: var(--bb-fg-muted); min-width: 1.4em; text-align: right; flex-shrink: 0; }
.lines-editor__input {
  flex: 1; min-width: 0; padding: .4rem .55rem; border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius-sm); font: inherit; background: var(--bb-bg-elev); color: var(--bb-fg);
}
.lines-editor__move, .lines-editor__remove {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; min-height: 0;
  background: transparent; border: 1px solid transparent; border-radius: var(--bb-radius-sm);
  color: var(--bb-fg-muted); cursor: pointer; flex-shrink: 0;
}
.lines-editor__move:hover:not(:disabled), .lines-editor__remove:hover:not(:disabled) { background: var(--bb-bg); border-color: var(--bb-border-soft); color: var(--bb-fg); }
.lines-editor__move:disabled, .lines-editor__remove:disabled { opacity: .3; cursor: not-allowed; }
.lines-editor__move .icon, .lines-editor__remove .icon { width: 14px; height: 14px; }
.lines-editor__remove:hover:not(:disabled) { color: var(--bb-danger); border-color: var(--bb-danger); }
.lines-editor__empty { margin: 0; font-size: .82rem; color: var(--bb-fg-muted); font-style: italic; }
.lines-editor__add { align-self: flex-start; display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .7rem; min-height: 2rem; font-size: .82rem; }

/* ---------- Gruppen-Editor (Absatz-getrennte lines-Felder, siehe editor-blocks.js
   renderGroupedLinesField) - zwei verschachtelte Ebenen: Gruppen als Karten, darin Positionen im
   selben Zeilen-Stil wie oben (.lines-editor__row/__handle/__move/__remove/__input werden 1:1
   wiederverwendet, nur Karten-Rahmen und Kopfzeile sind hier neu). */
.group-editor__list { display: flex; flex-direction: column; gap: calc(var(--bb-density-compact-pad) * .5); }
.group-editor__group { background: var(--bb-bg); border: 1px solid var(--bb-border-soft); border-radius: var(--bb-radius-sm); }
.group-editor__group.is-dragging { opacity: .45; }
.group-editor__group.is-drop-target { outline: 1px dashed var(--bb-brand); outline-offset: 2px; }
.group-editor__head { display: flex; align-items: center; gap: .35rem; padding: .35rem .5rem; min-width: 0; }
.group-editor__disclosure {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; min-height: 0;
  background: transparent; border: none; color: var(--bb-fg-muted); cursor: pointer; flex-shrink: 0;
}
.group-editor__disclosure:hover { color: var(--bb-fg); }
.group-editor__disclosure .icon { width: 14px; height: 14px; }
.group-editor__titles { display: flex; align-items: baseline; gap: .5rem; min-width: 0; flex: 1; overflow: hidden; }
.group-editor__index { font-size: .78rem; font-weight: 600; color: var(--bb-fg); flex-shrink: 0; }
.group-editor__preview { font-size: .8rem; color: var(--bb-fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-editor__body { padding: 0 .55rem .55rem; display: flex; flex-direction: column; gap: .35rem; }
.group-editor__title-label, .group-editor__positions-label {
  margin: .2rem 0 0; font-size: .68rem; text-transform: uppercase; color: var(--bb-fg-muted); letter-spacing: .04em;
}
.group-editor__positions { margin-left: .1rem; }

/* ---------- Baukasten (Modal) ---------- */
.baukasten { display: grid; gap: .9rem; min-width: min(640px, 78vw); }
.baukasten__search label { display: block; }
.baukasten__search input { width: 100%; padding: .55rem .7rem; border: 1px solid var(--bb-border); border-radius: var(--bb-radius-sm); font: inherit; }
.baukasten__groups { display: grid; gap: 1rem; max-height: 52vh; overflow-y: auto; }
.baukasten__group h3 {
  margin: 0 0 .45rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bb-fg-muted);
}
.baukasten__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .5rem; }
.baukasten__tile {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .55rem; row-gap: .15rem;
  align-items: start; text-align: left; padding: .7rem; min-height: 0; cursor: pointer;
  background: var(--bb-bg-elev); border: 1px solid var(--bb-border-soft); border-radius: var(--bb-radius-md);
  transition: border-color .15s, background .15s;
}
.baukasten__tile:hover:not(:disabled) { border-color: var(--bb-brand); background: var(--bb-brand-soft); }
.baukasten__tile:disabled { opacity: .5; cursor: not-allowed; }
.baukasten__tile-icon { grid-row: span 2; color: var(--bb-brand); }
.baukasten__tile-name { font-weight: 600; font-size: .86rem; color: var(--bb-fg); }
.baukasten__tile-hint { font-size: .76rem; color: var(--bb-fg-muted); line-height: 1.35; }

/* ---------- Seitenbaum (Kontextpanel des Moduls "Seiten") ---------- */
.ptree__head { display: flex; align-items: center; justify-content: space-between; }
.ptree__head h3 {
  margin: 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bb-fg-muted);
}
.ptree__new { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
.ptree__hint { color: var(--bb-fg-muted); font-size: .82rem; font-style: italic; margin: 0; }
.ptree__empty { display: grid; gap: .6rem; font-size: .85rem; color: var(--bb-fg-muted); }
.ptree__empty p { margin: 0; }

.ptree, .ptree__children { list-style: none; margin: 0; padding: 0; }
.ptree__row {
  display: flex; align-items: center; gap: .2rem; padding: .1rem .2rem;
  border: 1px solid transparent; border-radius: var(--bb-radius-sm); min-width: 0;
}
.ptree__row:hover { background: var(--bb-bg); }
.ptree__row.is-active { background: var(--bb-brand-soft); border-color: var(--bb-brand); }
.ptree__row.is-drop-target { border-color: var(--bb-brand); border-style: dashed; }
.ptree__disclosure {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 26px; min-height: 0;
  background: none; border: none; color: var(--bb-fg-muted); cursor: pointer; flex-shrink: 0;
}
.ptree__disclosure--empty { cursor: default; }
.ptree__disclosure .icon { width: 15px; height: 15px; }
.ptree__handle {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 26px; min-height: 0;
  background: none; border: none; color: var(--bb-border); cursor: grab; flex-shrink: 0;
}
.ptree__handle:hover { color: var(--bb-fg); }
.ptree__handle .icon { width: 14px; height: 14px; }
.ptree__title {
  flex: 1; min-width: 0; text-align: left; background: none; border: none; min-height: 0;
  padding: .3rem .2rem; font-size: .85rem; color: var(--bb-fg); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ptree__title:hover { text-decoration: underline; }
.ptree__home { width: 14px; height: 14px; color: var(--bb-fg-muted); flex-shrink: 0; }
.ptree__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--bb-warn); flex-shrink: 0;
}
.ptree__badge {
  font-size: .65rem; padding: .05rem .35rem; border-radius: 999px; white-space: nowrap; flex-shrink: 0;
  background: var(--bb-border-soft); color: var(--bb-fg-muted);
}