/* Website-Studio (Editor-Chrome). Die Website selbst wird von website-site.css gestaltet; hier nur
   Rahmen, Leisten, Palette, Bühne, Editor-Griffe, Flyovers und Astra-Chat. Namensraum .wstudio / .ws-*. */
.wstudio { --ws-line: var(--c-line, #E5E5E5); --ws-bg: var(--c-white, #fff); --ws-text: var(--c-black, #0A0A0A); --ws-muted: var(--c-muted, #525252); --ws-accent: var(--c-fill, #0866F5); --ws-soft: var(--c-bg, #F5F5F5);
  color: var(--ws-text); display: flex; flex-direction: column; min-height: 650px; height: calc(100vh - 142px); background: var(--ws-bg); border: 1px solid var(--ws-line); border-radius: 14px; overflow: hidden; }
.wstudio [hidden] { display: none !important; }
/* Der Editor-Grundstil endet an der gerenderten Website: innerhalb von .wsite gilt NUR
   website-site.css. Sonst gewinnt «.wstudio button» gegen «.ws-menu-btn» und der Menü-Knopf,
   «Mehr anzeigen» und die Kalenderpfeile sähen im Studio anders aus als auf der Seite.
   :where() zählt bei der Gewichtung nicht mit — die Regeln bleiben damit genau so stark wie zuvor. */
.wstudio button, .wstudio select, .wstudio input, .wstudio textarea { font: inherit; }
.wstudio button:not(:where(.wsite *)) { cursor: pointer; border: 1px solid var(--ws-line); background: var(--ws-bg); color: var(--ws-text); border-radius: 7px; padding: 7px 10px; font-size: 12px; line-height: 1.4; display: inline-flex; align-items: center; gap: 6px; }
.wstudio button:not(:where(.wsite *)):hover { background: var(--ws-soft); }
.wstudio button:disabled { cursor: default; opacity: .45; }
.wstudio .ws-primary { background: var(--ws-accent); color: #fff; border-color: var(--ws-accent); }
.wstudio .ws-primary:hover { background: var(--color-primary-hover, #0554D6); }
.wstudio select:not(:where(.wsite *)) { max-width: 220px; border: 1px solid var(--ws-line); border-radius: 6px; padding: 7px; background: var(--ws-bg); color: var(--ws-text); font-size: 12px; }

/* --- Kopf, Leisten, Toolbar ---------------------------------------------------------------------- */
.wstudio-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 20px; border-bottom: 1px solid var(--ws-line); }
.wstudio-eyebrow { font-size: 9px; letter-spacing: 1.8px; color: var(--ws-muted); font-weight: 700; }
.wstudio h1:not(:where(.wsite *)) { font-size: 24px; margin: 5px 0 0; font-weight: 650; letter-spacing: -.7px; }
.wstudio-draft { display: inline-block; vertical-align: middle; font-size: 10px; font-weight: 500; letter-spacing: 0; color: var(--warning); background: var(--warning-soft); border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent); border-radius: 20px; padding: 3px 9px; margin-left: 8px; }
.wstudio-modes { padding: 4px; background: var(--ws-soft); border-radius: 9px; display: flex; gap: 4px; }
.wstudio-modes button { border: 0; background: transparent; padding: 8px 20px; }
.wstudio-modes [aria-selected=true] { background: var(--ws-bg); box-shadow: 0 1px 4px #0001; font-weight: 650; }
.wstudio-head-actions { display: flex; gap: 7px; }
.ws-draft-bar, .ws-live-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 20px; border-bottom: 1px solid var(--ws-line); font-size: 12px; }
.ws-draft-bar label, .ws-live-bar label { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.ws-draft-bar select, .ws-live-bar select { min-width: 180px; max-width: 280px; }
.ws-draft-bar a, .ws-live-bar a { color: var(--c-fill); text-decoration: none; margin-left: auto; cursor: pointer; }
.ws-draft-bar a[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.ws-live-bar { background: var(--c-fill-soft); }
[data-ws-live-status], [data-ws-draft-count] { font-size: 12px; color: var(--ws-muted); }
.wstudio-toolbar { display: flex; align-items: center; gap: 9px; padding: 10px 18px; border-bottom: 1px solid var(--ws-line); font-size: 11px; flex-wrap: wrap; }
.wstudio-toolbar label { display: flex; align-items: center; gap: 8px; color: var(--ws-muted); }
.ws-page-tools { display: flex; gap: 2px; }
.ws-page-tools button { padding: 5px 7px; }
.wstudio-devices { display: flex; gap: 2px; margin-left: 10px; }
.wstudio-devices button { border: 0; color: var(--ws-muted); }
.wstudio-devices .active { color: var(--ws-accent); background: var(--c-fill-soft); }
/* Fokus-Leiste: genau ein Bereich ist aktiv. */
.wstudio-focus { display: flex; gap: 2px; margin-left: 10px; }
.wstudio-focus button { border: 0; color: var(--ws-muted); }
.wstudio-focus button[aria-pressed="true"] { color: var(--ws-accent); background: var(--c-fill-soft); }
.wstudio-status { margin-left: auto; color: var(--ws-muted); }
.ws-note { padding: 9px 20px; background: var(--warning-soft); color: var(--warning); font-size: 12px; border-bottom: 1px solid color-mix(in srgb, var(--warning) 35%, transparent); }
.ws-error { padding: 12px 18px; background: var(--danger-soft); color: var(--danger); font-size: 12px; max-height: 100px; overflow: auto; }

/* --- Körper: Bühne | Palette | Chat --------------------------------------------------------------- */
.wstudio-body { display: flex; flex: 1; min-height: 0; position: relative; }
.wstudio-canvas-wrap { flex: 1; min-width: 280px; min-height: 0; background: var(--ws-soft); padding: 14px; display: flex; flex-direction: column; overflow: hidden; }
.ws-stage-wrap { flex: 1; min-height: 0; overflow: auto; }
.ws-stage-box { position: relative; margin: 0 auto; }
.ws-stage { position: absolute; top: 0; left: 0; transform-origin: top left; background: #fff; box-shadow: 0 3px 18px rgba(0, 0, 0, .06); border: 1px solid var(--c-line-strong); }
.ws-canvas-caption { text-align: center; font-size: 10px; color: var(--ws-muted); padding-top: 10px; }
.ws-side-title { font-weight: 650; font-size: 12px; margin: 2px 0 10px; }
.ws-side-title small { display: block; font-size: 10px; font-weight: 400; color: var(--ws-muted); margin-top: 4px; }

/* Palette rechts */
.wstudio-palette { width: 250px; flex: none; overflow-y: auto; background: var(--ws-bg); padding: 14px; border-left: 1px solid var(--ws-line); font-size: 12px; }
/* Beim Anzeigen bleibt die Spalte stehen (gleiche Bühnenbreite = gleicher Massstab), nur ihr
   Inhalt verschwindet. Sonst wäre die Website beim Anzeigen grösser als beim Bearbeiten. */
.wstudio-palette.is-idle { visibility: hidden; }
.ws-pal-group { margin-bottom: 8px; border: 1px solid var(--ws-line); border-radius: 9px; }
.ws-pal-group summary { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 10px; font-weight: 650; list-style: none; }
.ws-pal-group summary::-webkit-details-marker { display: none; }
.ws-pal-group summary::after { content: '›'; margin-left: auto; color: var(--ws-muted); transform: rotate(90deg); }
.ws-pal-group:not([open]) summary::after { transform: none; }
.ws-pal-items { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 8px 8px; }
.ws-pal-items button { flex-direction: column; align-items: flex-start; gap: 6px; padding: 9px; text-align: left; }
.ws-pal-items button span { font-size: 11px; line-height: 1.25; }
.ws-pal-items button:hover { border-color: var(--ws-accent); color: var(--ws-accent); }
.ws-pal-colors { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-bottom: 10px; }
.ws-pal-colors label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--ws-muted); }
.ws-pal-colors input[type=color] { width: 100%; height: 30px; padding: 2px; border: 1px solid var(--ws-line); border-radius: 6px; background: var(--ws-bg); }
.ws-pal-pairs { grid-column: 1 / -1; display: flex; gap: 6px; }
.ws-pal-pairs button, .ws-fly__pairs button { padding: 3px; gap: 0; }
.ws-pal-pairs i, .ws-fly__pairs i { display: block; width: 14px; height: 18px; }
.ws-pal-pairs i:first-child, .ws-fly__pairs i:first-child { border-radius: 4px 0 0 4px; }
.ws-pal-pairs i:last-child, .ws-fly__pairs i:last-child { border-radius: 0 4px 4px 0; }
.ws-pal-templates { display: flex; flex-direction: column; gap: 8px; }
.ws-pal-templates button { flex-direction: column; align-items: stretch; padding: 6px; gap: 6px; }
.ws-pal-templates button:hover { border-color: var(--ws-accent); }
.ws-tpl-thumb { display: block; width: 100%; aspect-ratio: 218 / 140; overflow: hidden; background: var(--c-surface-2); border-radius: 4px; position: relative; }
.ws-thumb-site { position: absolute; top: 0; left: 0; width: 1280px; transform: scale(.163); transform-origin: top left; pointer-events: none; }
.ws-tpl-label { font-size: 11px; font-weight: 650; text-align: center; }

/* --- Editor-Chrome auf der Bühne ----------------------------------------------------------------- */
.wstudio.is-edit .ws-widget { outline: 1px dashed color-mix(in srgb, var(--ws-accent) 35%, transparent); cursor: move; }
/* Relativ zur Stapelreihenfolge (--wz) rechnen — feste Werte würden ein weit vorne liegendes
   Widget beim Überfahren nach hinten ziehen. */
.wstudio.is-edit .ws-widget:hover { outline: 1px solid color-mix(in srgb, var(--ws-accent) 70%, transparent); z-index: calc(var(--wz, 0) + 100); }
.wstudio.is-edit .ws-widget.is-selected { outline: 2px solid var(--ws-accent); z-index: calc(var(--wz, 0) + 200); }
.wstudio.is-edit .ws-widget.is-dragging { opacity: .65; z-index: calc(var(--wz, 0) + 300); }
.wstudio.is-edit .ws-widget-body { pointer-events: none; }
.ws-widget-bar { position: absolute; top: -26px; left: 0; display: none; align-items: center; gap: 2px; height: 24px; padding: 0 4px 0 8px; background: var(--ws-accent); color: #fff; font: 11px/1 system-ui, sans-serif; border-radius: 6px 6px 0 0; z-index: 7; white-space: nowrap; pointer-events: auto; }
.ws-widget-label { display: inline-flex; align-items: center; gap: 5px; margin-right: 6px; }
/* Die Leisten-Knöpfe liegen INNERHALB von .wsite und bekommen den Editor-Grundstil darum
   nicht mehr — die nötigen Werte stehen deshalb hier vollständig. */
.ws-widget-btn { border: 0 !important; background: transparent !important; color: #fff !important; padding: 4px 5px !important; border-radius: 4px !important;
  cursor: pointer; font: inherit; font-size: 11px; line-height: 1.4; display: inline-flex; align-items: center; gap: 6px; }
.ws-widget-btn:hover { background: rgba(255, 255, 255, .25) !important; }
.wstudio.is-edit .ws-widget:hover > .ws-widget-bar, .wstudio.is-edit .ws-widget.is-selected > .ws-widget-bar { display: inline-flex; }
.ws-eh { position: absolute; width: 16px; height: 16px; display: none; z-index: 7; }
.ws-eh::after { content: ''; position: absolute; inset: 4px; background: #fff; border: 2px solid var(--ws-accent); border-radius: 2px; }
.ws-eh--n { top: -8px; left: calc(50% - 8px); cursor: ns-resize; }
.ws-eh--s { bottom: -8px; left: calc(50% - 8px); cursor: ns-resize; }
.ws-eh--e { right: -8px; top: calc(50% - 8px); cursor: ew-resize; }
.ws-eh--w { left: -8px; top: calc(50% - 8px); cursor: ew-resize; }
.ws-eh--nw { top: -8px; left: -8px; cursor: nwse-resize; }
.ws-eh--se { bottom: -8px; right: -8px; cursor: nwse-resize; }
.ws-eh--ne { top: -8px; right: -8px; cursor: nesw-resize; }
.ws-eh--sw { bottom: -8px; left: -8px; cursor: nesw-resize; }
.wstudio.is-edit .ws-widget.is-selected > .ws-eh { display: block; }
.wstudio.is-edit .ws-widget { touch-action: none; }
/* Ansichts-Modus: unübersehbar, damit niemand versehentlich nur eine Ansicht ändert. */
.ws-viewedit-btn[aria-pressed="true"] { background: var(--warning-soft, #fff4e5) !important; border-color: var(--warning, #b26b00) !important; color: var(--warning, #b26b00) !important; font-weight: 650; }
.wstudio.is-viewedit .wstudio-canvas-wrap { box-shadow: inset 0 0 0 3px var(--warning, #b26b00); }
.wstudio.is-viewedit .ws-widget-bar { background: var(--warning, #b26b00); }
.ws-viewnote { border-color: color-mix(in srgb, var(--warning, #b26b00) 40%, transparent); }
.wstudio-devices .has-views::after { content: '•'; margin-left: 3px; color: var(--warning, #b26b00); font-weight: 800; }
.ws-widget-info.is-own { background: var(--warning, #b26b00) !important; }

/* Vorschau im Flyover: sie zeigt die WEBSITE, nicht den Editor — Chrome dort zurücknehmen. */
.wstudio.is-edit .ws-preview .ws-placeholder { display: none; }
.wstudio.is-edit .ws-preview .wsite-board { background-image: none; }
.wstudio.is-edit .ws-preview .ws-widget { outline: none; cursor: default; }
.wstudio.is-edit .ws-preview .wsite-band { outline: none; }
.wstudio.is-edit .ws-preview .wsite-band::before { content: none; }

/* Fokus auf einen Bereich: alles andere wird grau und unberührbar. Nur im Editor und nur bei
   aktivem Fokus — die öffentliche Seite lädt dieses Stylesheet gar nicht. Gedimmt wird die HÜLLE,
   nicht das Brett: die Farbe des Kopfbands liegt auf .wsite-head. */
.wstudio.is-edit.is-focus .ws-stage :is(.wsite-head, .wsite-foot, .wsite-main):not(.is-focus) {
  filter: grayscale(.85) opacity(.45); pointer-events: none; transition: filter .15s ease; }
.wstudio.is-edit.is-focus .ws-stage :is(.wsite-head, .wsite-foot, .wsite-main):not(.is-focus) .ws-widget { outline: none !important; cursor: default; }
.wstudio.is-edit.is-focus .is-focus { outline: 2px solid var(--ws-accent); outline-offset: -2px; }

/* Zahnrad am Bandrand (Kopfzeile, Hauptbereich, Fusszeile) */
.ws-band-cfg { position: absolute; top: 2px; right: 4px; z-index: 6; display: none; align-items: center;
  border: 0 !important; background: var(--ws-accent) !important; color: #fff !important; padding: 3px 5px !important;
  border-radius: 4px !important; cursor: pointer; line-height: 1; }
.wstudio.is-edit [data-ws-region] { position: relative; }
/* Im Editor immer im Baum (also per Tabulator erreichbar), aber unsichtbar bis Hover oder Fokus. */
.wstudio.is-edit .ws-band-cfg { display: inline-flex; opacity: 0; pointer-events: none; }
.wstudio.is-edit [data-ws-region]:hover > .ws-band-cfg, .wstudio.is-edit .ws-band-cfg:focus { opacity: 1; pointer-events: auto; }
/* Ausgeschaltetes Band: im Editor sichtbar, aber gedämpft — auf der Website fehlt es ganz. */
.wstudio.is-edit .wsite-band.is-off { opacity: .45; }
.wstudio.is-edit .wsite-band.is-off::before { content: attr(data-ws-label) ' · ausgeschaltet'; }

/* Auf allen Seiten fixierte Kachel: dauerhaft erkennbar, auch ohne Überfahren. */
/* Im Editor liegt eine fixierte Kachel vorn, damit sie anklickbar bleibt (öffentlich bleibt sie
   hinter dem Seiteninhalt — dort hängt die Regel nicht). */
.wstudio.is-edit .ws-widget.ws-fixed { outline: 1px solid color-mix(in srgb, var(--ws-accent) 55%, transparent); outline-offset: 1px;
  z-index: calc(var(--wz, 0) + 50); }
.wstudio.is-edit .ws-widget.ws-fixed::after { content: '📌 auf allen Seiten'; position: absolute; left: 4px; bottom: 4px;
  font: 10px/1 system-ui, sans-serif; color: #fff; background: color-mix(in srgb, var(--ws-accent) 85%, #000); padding: 3px 6px; border-radius: 4px; z-index: 6; pointer-events: none; }

/* Der Ghost zeigt nur noch die Zielposition — belegt gibt es nicht mehr, Überlappen ist erlaubt. */
.ws-ghost { background: color-mix(in srgb, var(--ws-accent) 14%, transparent); outline: 2px dashed var(--ws-accent); outline-offset: -2px;
  pointer-events: none; z-index: 900; border-radius: 4px; }
.wstudio.is-edit .ws-widget.is-overflow::before { content: '↕ wächst'; position: absolute; right: 4px; bottom: 4px; font: 10px/1 system-ui, sans-serif; color: #fff; background: rgba(0, 0, 0, .55); padding: 3px 5px; border-radius: 4px; z-index: 6; }
.wstudio.is-edit .ws-stage.is-mobile .ws-widget { cursor: default; }
/* KEINE zusätzliche Höhe im Editor: Anzeigen und Bearbeiten müssen deckungsgleich sein. Das
   Rasterbild liegt nur auf dem Seitenbrett — in einem gefärbten Band sähe es gestreift aus. */
.wstudio.is-edit .wsite-board:not(.wsite-band) { background-image: linear-gradient(rgba(23, 105, 232, .05) 1px, transparent 1px); background-size: 100% var(--ws-pitch); background-origin: content-box; }
/* Der Platzhalter-Hinweis erscheint nur im Editor und als Überlagerung — er darf nichts verschieben. */
.wstudio.is-edit .ws-placeholder { display: flex; position: absolute; inset: 0; min-height: 0; overflow: hidden;
  align-items: center; justify-content: center; text-align: center; padding: 6px; font-size: 14px;
  border: 2px dashed var(--site-line); border-radius: var(--site-radius); color: var(--site-muted); }
/* Der Hinweis bezieht sich auf SEIN Feld (z. B. das Bildfeld von «Bild + Text»), nicht auf das
   ganze Widget — sonst läge er über dem Text daneben. */
.wstudio.is-edit :has(> .ws-placeholder) { position: relative; }

/* --- Formularbausteine (Flyover) ------------------------------------------------------------------- */
.ws-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; color: var(--ws-muted); font-size: 11px; }
.ws-field input, .ws-field textarea, .ws-field select { width: 100%; max-width: none; color: var(--ws-text); background: var(--ws-bg); border: 1px solid var(--ws-line); border-radius: 6px; padding: 7px; font-size: 12px; box-sizing: border-box; }
.ws-field input[type=color] { height: 32px; padding: 2px; }
/* Auswahl der Symbol-Gestaltung: jede Kachel zeigt das echte Symbol. */
.ws-icon-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-icon-opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 78px;
  padding: 10px 6px; border: 1px solid var(--ws-line); border-radius: 8px; cursor: pointer; text-align: center; color: var(--ws-text); }
.ws-icon-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ws-icon-slot { height: 30px; display: flex; align-items: center; justify-content: center; }
.ws-icon-opt b { font-size: 11px; font-weight: 600; }
.ws-icon-opt:has(input:checked) { border-color: var(--ws-accent); box-shadow: inset 0 0 0 1px var(--ws-accent); }

/* Farbfeld mit «aus dem Theme»-Häkchen (Menü-Knopf) */
.ws-color-auto { display: flex; align-items: center; gap: 10px; }
.ws-color-auto input[type=color] { width: 58px; flex: none; }
.ws-color-auto .ws-check { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; }
.ws-color-auto input[type=color]:disabled { opacity: .4; }
.ws-field textarea { min-height: 64px; resize: vertical; }
.ws-fieldset { border: 0; padding: 0; margin: 0 0 14px; }
.ws-fieldset legend { font-weight: 650; margin-bottom: 8px; font-size: 12px; display: flex; align-items: center; gap: 10px; width: 100%; }
.ws-check { display: flex; align-items: center; gap: 7px; margin: 6px 0; font-size: 12px; }
.ws-check input { accent-color: var(--ws-accent); }
.ws-hint { font-size: 11px; color: var(--ws-muted); line-height: 1.6; margin: 0; }
.ws-fly__tools { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.ws-fly__tools button { padding: 4px 8px; font-size: 11px; }
.ws-fly__tools select { flex: 1; }
.ws-persons { max-height: 260px; overflow: auto; border: 1px solid var(--ws-line); border-radius: 8px; padding: 4px 8px; }
.ws-person { margin: 4px 0; }
.ws-person img, .ws-person-ini { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--c-fill-soft); color: var(--c-fill); font-size: 10px; font-weight: 700; }
.ws-person small { margin-left: auto; color: var(--ws-muted); font-size: 10px; }
.ws-image-row, .ws-link-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.ws-link-row { grid-template-columns: 1fr 1.4fr auto; }
.ws-image-row img { width: 56px; height: 42px; object-fit: cover; border-radius: 4px; background: var(--c-surface-2); }
.ws-image-row div { display: flex; flex-direction: column; gap: 4px; }
.ws-image-row input, .ws-link-row input { width: 100%; box-sizing: border-box; border: 1px solid var(--ws-line); border-radius: 6px; padding: 6px; font-size: 12px; background: var(--ws-bg); color: var(--ws-text); }
.ws-image-row button, .ws-link-row button { padding: 4px 8px; }
.ws-fly__pairs { display: flex; gap: 6px; margin: 4px 0 12px; }

/* --- Flyover (Blur-Overlay nach .cmodal-Vorbild, eigener Namensraum) ------------------------------- */
.ws-fly { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; background: var(--c-overlay, rgba(0, 0, 0, .5)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ws-fly__box { display: flex; flex-direction: column; width: min(900px, calc(100vw - 40px)); max-height: calc(100dvh - 40px); overflow: hidden; background: var(--ws-bg); color: var(--ws-text); border: 1px solid var(--ws-line); border-radius: 14px; box-shadow: var(--shadow-modal); }
.ws-fly--settings .ws-fly__box, .ws-fly--site .ws-fly__box { width: min(1180px, calc(100vw - 40px)); }
.ws-fly--template .ws-fly__box { width: min(1100px, calc(100vw - 40px)); }
.ws-fly__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 20px 12px; border-bottom: 1px solid var(--ws-line); }
.ws-fly__title { font-size: 17px; font-weight: 700; }
.ws-fly__sub { font-size: 12px; color: var(--ws-muted); margin-top: 3px; }
.ws-fly__x { border: 0 !important; background: none !important; font-size: 24px; line-height: 1; color: var(--ws-muted); padding: 0 4px !important; }
.ws-fly__body { overflow: auto; padding: 16px 20px; min-height: 120px; }
.ws-fly__body--split { display: grid; grid-template-columns: 340px 1fr; gap: 20px; }
.ws-fly__form { min-width: 0; font-size: 12px; }
.ws-fly__stage { width: 100%; min-height: 80px; overflow: hidden; position: relative; background: #fff; border: 1px solid var(--ws-line); border-radius: 8px; }
.ws-fly__stage > * { position: absolute; top: 0; left: 0; }
.ws-fly__stage--page { max-height: calc(100dvh - 260px); overflow: auto; }
.ws-fly__stage .ws-fly-site { padding: 12px; box-sizing: border-box; }
.ws-fly__hint { font-size: 11px; color: var(--ws-muted); margin: 10px 0 0; }
.ws-fly__foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--ws-line); }
@media (max-width: 860px) { .ws-fly { padding: 0; } .ws-fly__box { width: 100vw !important; max-height: 100dvh; height: 100dvh; border-radius: 0; } .ws-fly__body--split { grid-template-columns: 1fr; } }

/* --- Dialoge --------------------------------------------------------------------------------------- */
.ws-dialog { border: 1px solid var(--ws-line); border-radius: 12px; background: var(--ws-bg); color: var(--ws-text); padding: 24px; min-width: 300px; max-width: 480px; max-height: 75vh; overflow: auto; }
.ws-dialog::backdrop { background: #0009; }
.ws-dialog h3 { margin: 0 0 8px; font-size: 16px; }
.ws-dialog p { font-size: 13px; color: var(--ws-muted); line-height: 1.5; }
.ws-dialog label { display: block; font-size: 12px; color: var(--ws-muted); }
.ws-dialog input { box-sizing: border-box; width: 100%; padding: 10px; margin-top: 6px; border: 1px solid var(--ws-line); border-radius: 8px; background: var(--ws-bg); color: var(--ws-text); }
.ws-dialog [data-revision] { display: block; width: 100%; margin: 6px 0; }
.ws-dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; justify-content: flex-end; }

/* --- Astra-Chat ------------------------------------------------------------------------------------ */
.wstudio-chat { width: 315px; flex: none; background: var(--ws-bg); border-left: 1px solid var(--ws-line); display: flex; flex-direction: column; min-height: 0; }
.ws-chat-head { padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; }
.ws-chat-head strong { font-size: 14px; }
.ws-chat-head small { display: block; color: var(--ws-muted); font-size: 10px; margin-top: 4px; }
.ws-chat-head button { border: 0; }
.ws-scope-label { padding: 0 16px; margin: 4px 0 8px; }
.ws-chat-context { border-top: 1px solid var(--ws-line); border-bottom: 1px solid var(--ws-line); font-size: 10px; color: var(--ws-muted); padding: 10px 16px; }
.ws-chat-messages { padding: 16px; overflow: auto; flex: 1; min-height: 100px; display: flex; flex-direction: column; gap: 12px; }
.ws-message { font-size: 12px; line-height: 1.65; white-space: pre-wrap; background: var(--ws-soft); padding: 11px 12px; border-radius: 10px; overflow-wrap: anywhere; }
.ws-message.user { background: var(--c-fill-soft); align-self: flex-end; margin-left: 18px; }
.ws-chat-examples { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 14px; }
.ws-chat-examples button { font-size: 10px; border-radius: 20px; color: var(--ws-muted); }
.wstudio-chat form { padding: 12px; border-top: 1px solid var(--ws-line); }
.wstudio-chat textarea { box-sizing: border-box; resize: vertical; width: 100%; border: 1px solid var(--ws-line); border-radius: 8px; padding: 10px; background: var(--ws-bg); color: var(--ws-text); font-size: 12px; }
.wstudio-chat form > div { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
.wstudio-chat form small { font-size: 9px; color: var(--ws-muted); }
.ws-proposal { margin: 8px 12px; border: 1px solid color-mix(in srgb, var(--c-fill) 40%, transparent); border-radius: 8px; padding: 10px; font-size: 11px; max-height: 200px; overflow: auto; }
.ws-proposal p { margin: 0 0 8px; }
.ws-proposal button { margin: 4px 4px 0 0; }

/* --- Responsive ------------------------------------------------------------------------------------ */
@media (max-width: 1100px) { .wstudio-palette { width: 210px; } .wstudio-head-actions { flex-wrap: wrap; } }
@media (max-width: 1000px) { .wstudio-head { flex-wrap: wrap; padding: 12px; } .wstudio-modes { order: 3; width: 100%; justify-content: center; } .wstudio-devices { margin-left: 0; } .wstudio-toolbar { padding: 8px; } .wstudio { height: calc(100vh - 130px); } }
@media (max-width: 760px) { .wstudio-canvas-wrap { padding: 7px; min-width: 180px; } .wstudio-palette { position: absolute; right: 0; top: 0; bottom: 0; width: min(260px, 85%); z-index: 3; box-shadow: -10px 0 40px #0002; } .wstudio-chat { position: absolute; right: 0; top: 0; bottom: 0; width: min(330px, 100%); z-index: 3; box-shadow: -10px 0 40px #0002; } .wstudio-status { flex-basis: 100%; } .wstudio-devices button { padding: 4px; } .wstudio-head-actions button { font-size: 10px; } }
@media (max-width: 700px) { .wstudio { height: auto; min-height: 900px; overflow: visible; } .wstudio-body { height: 650px; flex: none; } .ws-draft-bar, .ws-live-bar { gap: 6px; padding: 8px; } .ws-draft-bar label, .ws-live-bar label { width: 100%; } .ws-draft-bar select, .ws-live-bar select { min-width: 0; flex: 1; } }

/* --- Flyover: Live-Schalter, manuelle Einträge, Uploads, neue Seite ------------------------------ */
.ws-fly-field[hidden] { display: none !important; }
.ws-fly-field { margin-bottom: 4px; }
.ws-live-switch { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--ws-line); border-radius: 9px; margin-bottom: 12px; cursor: pointer; }
.ws-live-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ws-live-knob { flex: none; width: 36px; height: 20px; border-radius: 20px; background: var(--c-line-strong); position: relative; transition: background .15s; }
.ws-live-knob::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.ws-live-switch input:checked + .ws-live-knob { background: var(--c-fill); }
.ws-live-switch input:checked + .ws-live-knob::after { transform: translateX(16px); }
.ws-live-switch b { display: block; font-size: 12px; }
.ws-live-switch small { display: block; font-size: 11px; color: var(--ws-muted); }
.ws-manual .ws-fly__tools { margin: 0 0 8px; }
.ws-manual-count { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ws-muted); }
.ws-manual-count input { width: 60px; border: 1px solid var(--ws-line); border-radius: 6px; padding: 5px; font-size: 12px; background: var(--ws-bg); color: var(--ws-text); }
.ws-manual-row { border: 1px solid var(--ws-line); border-radius: 8px; margin-bottom: 6px; }
.ws-manual-row summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; cursor: pointer; font-size: 12px; font-weight: 650; list-style: none; }
.ws-manual-row summary::-webkit-details-marker { display: none; }
.ws-manual-row summary .ws-fly__tools { margin: 0; }
.ws-manual-row summary .ws-fly__tools button { padding: 2px 7px; }
.ws-manual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; padding: 4px 10px 6px; }
.ws-manual-grid .ws-field { margin-bottom: 8px; }
.ws-fly-field--photo { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: end; }
.ws-fly-field--photo img { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; }
.ws-fly-field--photo .ws-field { margin-bottom: 0; }
.ws-link-row { grid-template-columns: 1fr 1.2fr auto auto; }
.ws-link-row select { border: 1px solid var(--ws-line); border-radius: 6px; padding: 5px; font-size: 11px; background: var(--ws-bg); color: var(--ws-text); max-width: 150px; }
.ws-logo-preview { height: 32px; width: auto; }
.ws-fly__status { margin-right: auto; font-size: 11px; color: var(--ws-muted); }
.ws-fly__status.is-error { color: var(--danger); }
.ws-fly--newpage .ws-fly__box { width: min(960px, calc(100vw - 40px)); }
.ws-newpage-kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 14px; }
.ws-kind { display: block; border: 1px solid var(--ws-line); border-radius: 9px; padding: 10px 12px; cursor: pointer; }
.ws-kind input { display: none; }
.ws-kind b { display: block; font-size: 13px; }
.ws-kind small { display: block; font-size: 11px; color: var(--ws-muted); margin-top: 4px; line-height: 1.4; }
.ws-kind.is-active { border-color: var(--ws-accent); box-shadow: 0 0 0 1px var(--ws-accent); }
.ws-tpl-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.ws-tpl-card { flex-direction: column; align-items: stretch; padding: 6px; gap: 4px; text-align: left; }
.ws-tpl-card b { font-size: 12px; }
.ws-tpl-card small { font-size: 10px; color: var(--ws-muted); line-height: 1.35; white-space: normal; }
.ws-tpl-card.is-active { border-color: var(--ws-accent); box-shadow: 0 0 0 1px var(--ws-accent); }
.ws-tpl-card .ws-tpl-thumb { aspect-ratio: 218 / 140; }
.ws-tpl-card .ws-thumb-site { transform: scale(.13); }
@media (max-width: 860px) { .ws-newpage-kinds { grid-template-columns: 1fr; } .ws-manual-grid { grid-template-columns: 1fr; } }

/* --- Nachträge: Dateiverwaltung, Palette-Untertitel ------------------------------------------------ */
.ws-pal-sub { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ws-muted); margin: 6px 0 2px; }
.ws-filelist { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; }
.ws-file-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: center; font-size: 12px; }
.ws-file-row img { width: 44px; height: 34px; object-fit: cover; border-radius: 4px; background: var(--c-surface-2); }
.ws-file-row small { display: block; color: var(--ws-muted); font-size: 10px; }
.ws-file-row button { padding: 3px 8px; }

/* --- Verlinkung auf eigene Reiter, Menü-Baum, Bereiche (Kopf-/Fusszeile) --------------------------- */
.ws-linkrow { display: grid; grid-template-columns: 1fr auto; gap: 4px; align-items: center; position: relative; }
.ws-image-row div .ws-linkrow { width: 100%; }
.ws-linkpick { padding: 4px 6px; line-height: 0; color: var(--ws-muted); }
.ws-linkpick.is-on { color: #fff; background: var(--ws-accent); border-color: var(--ws-accent); }
.ws-linkpick svg { width: 14px; height: 14px; }
.ws-pagepick { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 220px; max-height: 260px; overflow: auto;
  background: var(--ws-bg); border: 1px solid var(--ws-line); border-radius: 8px; box-shadow: var(--shadow-popover, 0 12px 32px rgba(0, 0, 0, .14)); padding: 6px; }
.ws-pagepick-h { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ws-muted); padding: 4px 6px; }
.ws-pagepick button { display: flex; width: 100%; justify-content: space-between; gap: 8px; border: 0; background: none; text-align: left; padding: 6px; border-radius: 6px; }
.ws-pagepick button:hover { background: var(--ws-soft); }
.ws-pagepick small { color: var(--ws-muted); }
.ws-pagepick-x { border-top: 1px solid var(--ws-line) !important; border-radius: 0 !important; margin-top: 4px; color: var(--ws-muted); }

.ws-pages { display: flex; flex-direction: column; gap: 2px; }
.ws-page-row { display: grid; grid-template-columns: 26px auto 1fr auto; gap: 6px; align-items: center; padding: 3px 4px; border-radius: 6px; }
.ws-page-row:hover { background: var(--ws-soft); }
.ws-page-row.is-sub { padding-left: 22px; }
.ws-page-num { font-size: 11px; font-weight: 700; color: var(--ws-muted); font-variant-numeric: tabular-nums; }
.ws-page-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-page-name small { color: var(--ws-muted); margin-left: 6px; font-size: 10px; }
.ws-page-acts { display: flex; gap: 2px; }
.ws-page-acts button { padding: 2px 6px; font-size: 11px; line-height: 1.2; }
.ws-fly__area { margin-right: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ws-muted); }
.ws-fly__area select { max-width: 150px; }

/* Kopf- und Fusszeile im Bearbeiten-Modus sichtbar machen (Ablegefläche) */
.wstudio.is-edit .wsite-band { position: relative; outline: 1px dashed color-mix(in srgb, var(--ws-accent) 45%, transparent); outline-offset: -2px; }
.wstudio.is-edit .wsite-band::before { content: attr(data-ws-label); position: absolute; top: 2px; left: 6px; z-index: 2;
  font: 700 9px/1.4 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--ws-accent); opacity: .85; pointer-events: none; }

/* Menü-Vorschau im Flyover auf der Kopfzeilenfarbe zeigen (sonst weiss auf weiss) */
.ws-fly__stage .ws-widget--N1 { background: var(--site-primary); color: var(--site-on-primary); padding: 8px 12px; border-radius: 6px; }

/* Beim Ziehen darf das Widget den Treffertest nicht selbst abfangen — sonst findet der Editor
   den Zielbereich (Kopf-/Fusszeile) nie. */
.wstudio.is-edit .ws-widget.is-dragging { pointer-events: none; }
/* Der Menü-Knopf gehört auf schmale Geräte; .wstudio button würde ihn sonst überall einblenden. */
.wstudio .ws-menu:not(.ws-menu--button) .ws-menu-btn { display: none; }
.wstudio .ws-stage.is-mobile .ws-menu-btn { display: inline-flex; }

/* Werkzeugleiste am Rand der Bühne nach innen klappen, damit sie anklickbar bleibt */
.wstudio.is-edit .ws-widget.is-barinside > .ws-widget-bar { top: 0; border-radius: 6px 0 6px 0; }
/* Die Griffe dürfen nicht im Band der eingeklappten Leiste liegen — sonst fängt der Griff den Klick
   auf ⚙ und ✕ ab (beide z-index 7, die Griffe kommen später ins DOM). */
.wstudio.is-edit .ws-widget.is-barinside > .ws-eh--n, .wstudio.is-edit .ws-widget.is-barinside > .ws-eh--nw,
.wstudio.is-edit .ws-widget.is-barinside > .ws-eh--ne { top: 26px; }
.wstudio.is-edit .ws-widget.is-barinside > .ws-widget-bar { z-index: 8; }
.wstudio.is-edit .ws-widget.is-barright > .ws-widget-bar { left: auto; right: 0; border-radius: 6px 6px 0 0;
  /* Am rechten Rand wächst die Leiste nach LINKS in die Bühne — auf schmalen Widgets liefen
     ⚙ und ✕ sonst über den Bühnenrand hinaus und waren nicht mehr zu treffen. */
  max-width: none; }
.wstudio.is-edit .ws-widget.is-barright.is-barinside > .ws-widget-bar { border-radius: 0 6px 0 6px; }
.ws-widget-bar { max-width: 100%; }
.ws-widget-label span { overflow: hidden; text-overflow: ellipsis; }

/* Bildausschnitt im Bearbeiten-Fenster: ziehen verschiebt, der Regler zoomt */
.ws-image-row { grid-template-columns: 120px 1fr auto; align-items: start; }
.ws-imgfocus { width: 120px; min-height: 64px; max-height: 190px; border-radius: 6px; overflow: hidden; background: var(--c-surface-2); cursor: grab; touch-action: none; }
.ws-imgfocus:active { cursor: grabbing; }
.ws-imgfocus img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; }
.ws-zoom { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ws-muted); }
.ws-zoom input[type=range] { flex: 1; accent-color: var(--ws-accent); }
.ws-image-row small.ws-hint { font-size: 10px; }

/* Keep every widget action reachable, including on narrow or partly scrolled widgets. */
.ws-widget-bar { top: -24px; min-width: 0; box-sizing: border-box; }
.ws-widget-label { min-width: 0; overflow: hidden; }
.ws-widget-label > span { overflow: hidden; text-overflow: ellipsis; }
.ws-widget-btn { flex: none; }
.ws-text-tools { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.ws-text-input { width: 100%; box-sizing: border-box; resize: vertical; padding: 10px; border: 1px solid var(--ws-line); border-radius: 6px; }
.ws-fly-site .ws-widget-body { pointer-events: auto !important; }
.wstudio.is-edit .ws-fly-site .ws-widget { outline: none; cursor: default; }
.wsite.ws-fly-site { container-name: fly-preview; }
.wstudio.is-edit .ws-fly-site .wsite-board { background-image: none; }
.ws-fly-site, .ws-fly__stage > .wsite.ws-preview { min-height: 0; }
.ws-fly__body--split > .ws-fly__stage { position: sticky; top: 0; align-self: start; max-height: calc(100dvh - 220px); overflow: auto; }
@media (max-width: 860px) {
  .ws-fly__body--split > .ws-fly__stage { position: relative; max-height: 420px; }
}
.ws-rich-tools {display:flex;align-items:center;flex-wrap:wrap;gap:3px;padding:7px;background:var(--ws-soft);border:1px solid var(--ws-line);border-radius:8px 8px 0 0;}
.ws-rich-tools button {min-width:28px;height:29px;padding:3px 6px;border:1px solid var(--ws-line);border-radius:4px;background:var(--ws-bg);color:var(--ws-text);font:15px/1.2 Arial,sans-serif;}
.ws-rich-tools select {height:29px;padding:3px;font-size:11px;max-width:112px;min-width:0;}
.ws-rich-tools [data-rich-action=size] {width:48px;}
.ws-rich-color {position:relative;display:grid;place-items:center;width:27px;height:29px;font-weight:700;border-bottom:3px solid currentColor;cursor:pointer;}
.ws-rich-color input {position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;}
.ws-rich-editor {min-height:220px;max-height:420px;overflow:auto;padding:12px;border:1px solid var(--ws-line);border-top:0;border-radius:0 0 8px 8px;background:var(--ws-bg);color:var(--ws-text);font:16px/1.5 'Open Sans',sans-serif;outline:none;overflow-wrap:anywhere;white-space:pre-wrap;}
.ws-rich-editor:focus {box-shadow:inset 0 0 0 1px var(--ws-blue);}
.ws-rich-editor p {margin:0 0 .7em;}
.ws-rich-editor :is(ul,ol) {padding-left:1.5em;}
.ws-rich-editor li {display:list-item;}
.ws-team-choice {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;}
.ws-team-choice input[type=color] {width:30px;height:28px;flex:none;}
.ws-imgfocus--cover {min-height:0;max-height:none;touch-action:none;cursor:grab;outline:2px solid var(--ws-accent);outline-offset:-2px;user-select:none;}
.ws-imgfocus--cover:active {cursor:grabbing;}
.ws-imgfocus img {pointer-events:none;user-select:none;-webkit-user-drag:none;}
.ws-fly .ws-pagepick {box-sizing:border-box;max-width:calc(100vw - 24px);box-shadow:0 10px 30px #0004;}
.ws-fly .ws-pagepick button {white-space:normal;overflow-wrap:anywhere;}
.ws-fly-site .ws-widget--N1 {min-height:80px;height:auto;padding:14px;background:transparent;color:var(--site-text);overflow:visible;}
.ws-fly-site .ws-widget--N1 > .ws-widget-body {min-height:60px;overflow:visible;flex:1 0 auto;}
.ws-fly-site .ws-menu {width:100%;min-height:48px;}
.ws-fly-site .ws-menu--tabs:not(.ws-menu--button) > .ws-menu-list {display:flex;position:static;flex-direction:row;transform:none;flex-wrap:wrap;}
.ws-fly-site .ws-menu--tabs:not(.ws-menu--button) > .ws-menu-btn {display:none;}
.ws-fly-site .ws-menu--button.is-open > .ws-menu-list {position:relative;top:auto;margin-top:8px;left:auto;right:auto;transform:none;}
.ws-fly-site .ws-menu--button {display:flex;flex-direction:column;align-items:flex-start;}
.ws-rich-tools button[aria-pressed=true] {background:var(--c-fill-soft,#e8f0ff);color:var(--ws-accent);border-color:var(--ws-accent);}
.ws-fly-site .ws-menu--right {align-items:flex-end;}
.ws-fly-site .ws-menu--center {align-items:center;}
.ws-multi-controls {display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ws-multi-controls[hidden] {display:none;}
.ws-multi-controls small {font-size:11px;color:var(--ws-muted);}
.is-multi-select .ws-widget.is-selected {outline:3px solid var(--ws-blue);outline-offset:2px;}
.is-multi-select .ws-widget.is-selected::after {content:'✓';position:absolute;right:7px;top:7px;width:22px;height:22px;display:grid;place-items:center;background:var(--ws-blue);color:#fff;border-radius:50%;pointer-events:none;z-index:5;font:700 14px Arial;}