/* Studio-Modus: Reiter oben, Vorschau in ganzer Breite, Bearbeitungsleiste rechts (andockbar) */
:root { --sm-ink: #182c3a; --sm-teal: #1d5c55; --sm-gold: #d9b38c; --sm-line: #dfe6e3; --sm-soft: #f3f6f4; --sm-top: 126px; --sm-dock: 420px; --sm-head: 50px; }
#hsBar, #hsCtx, .sm-resize, .sm-dock-head { display: none; }

body.sm-studio { overflow: hidden !important; }
body.sm-studio header { position: relative !important; z-index: 61 !important; }

/* ---------- Reiterleiste ---------- */
body.sm-studio #hsBar { display: flex; align-items: center; gap: 14px; height: 54px; padding: 0 16px; box-sizing: border-box; background: linear-gradient(100deg, #182c3a, #1b3a43 55%, #1d4a4f); color: #fff; position: relative; z-index: 60; box-shadow: 0 6px 18px #0b182030; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
#hsBar button { font: 600 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif !important; cursor: pointer; margin: 0 !important; min-height: 0 !important; box-shadow: none !important; text-transform: none !important; letter-spacing: 0 !important; }
.sm-left, .sm-right { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 0 1 auto; }
#hsBar .sm-left button, #hsBar .sm-right button { height: 34px !important; padding: 0 10px !important; border-radius: 9px !important; border: 1px solid transparent !important; background: transparent !important; color: #d6e2df !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
#hsBar .sm-left button:hover, #hsBar .sm-right button:hover { background: #ffffff16 !important; color: #fff !important; }
#hsBar #creatorProjectButton { color: #fff !important; font-weight: 700 !important; }
#hsBar #creatorProjectButton::before { content: "/"; color: #ffffff40; margin-right: 8px; font-weight: 400; }
#hsBar #creatorSaveStatus { color: #9fc0b6 !important; font-size: 12px !important; padding: 0 8px; white-space: nowrap; }

.sm-tabs { display: flex; align-items: center; gap: 3px; margin: 0 auto; padding: 4px; border-radius: 13px; background: #ffffff10; border: 1px solid #ffffff14; }
#hsBar .sm-tabs button { display: inline-flex; align-items: center; gap: 7px; height: 38px !important; padding: 0 14px !important; border-radius: 10px !important; border: 0 !important; background: transparent !important; color: #cfdcd9 !important; white-space: nowrap; transition: background .15s, color .15s; }
#hsBar .sm-tabs button i { font-style: normal; font-size: 15px; width: 16px; text-align: center; color: #e7c9a2; }
#hsBar .sm-tabs button:hover { background: #ffffff18 !important; color: #fff !important; }
#hsBar .sm-tabs button.on { background: #fffefa !important; color: var(--sm-ink) !important; box-shadow: 0 4px 14px #0b182040 !important; }
#hsBar .sm-tabs button.on i { color: var(--sm-teal); }
#hsBar .sm-tabs button:focus-visible { outline: 2px solid var(--sm-gold); outline-offset: 2px; }
.sm-more { position: relative; }
.sm-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 250px; padding: 6px; background: #fff; border-radius: 14px; box-shadow: 0 20px 55px #0b182045; z-index: 90; }
.sm-menu[hidden] { display: none; }
#hsBar .sm-menu button { display: flex !important; width: 100%; height: 38px !important; padding: 0 12px !important; border-radius: 9px !important; border: 0 !important; background: transparent !important; color: #1f2b30 !important; text-align: left; justify-content: flex-start; font-weight: 500 !important; }
#hsBar .sm-menu button:hover { background: #eef4f1 !important; color: var(--sm-teal) !important; }
.sm-menu hr { border: 0; border-top: 1px solid #e6ebe9; margin: 5px 6px; }

/* ---------- Alte Bereiche ausblenden ---------- */
body.sm-studio .creator-top, body.sm-studio .creator-instruction, body.sm-studio nav.rail, body.sm-studio .live-editor-bar, body.sm-studio .creator-skip { display: none !important; }
body.sm-studio .app { display: block !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; height: 0 !important; }

/* ---------- Vorschau-Fläche ---------- */
body.sm-studio .app > main { position: fixed !important; top: var(--sm-top) !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; background: radial-gradient(circle at 20% 0%, #f7f8f4, #e9eeea) !important; z-index: 20; transition: right .2s ease; }
body.sm-studio.sm-dock-open .app > main { right: var(--sm-dock) !important; }
body.sm-studio.sm-resizing .app > main { transition: none; }
body.sm-studio.sm-resizing iframe { pointer-events: none; }

body.sm-studio #hsCtx { display: flex; align-items: center; gap: 12px; height: 52px; flex: none; padding: 0 14px; box-sizing: border-box; background: #fffefa; border-bottom: 1px solid var(--sm-line); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
#hsCtx button { font: 600 12.5px/1 system-ui, -apple-system, "Segoe UI", sans-serif !important; margin: 0 !important; box-shadow: none !important; cursor: pointer; }
.sm-pages { flex: 0 0 auto; min-width: 60px; max-width: 45%; overflow-x: auto; scrollbar-width: none; position: relative; }
#hsCtx .editor-page-strip, #hsCtx .editor-page-strip * { position: static !important; transform: none !important; }
.sm-pages::-webkit-scrollbar { display: none; }
#hsCtx .editor-page-strip { display: flex !important; gap: 4px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; width: auto !important; min-height: 0 !important; box-shadow: none !important; }
#hsCtx .editor-page-strip button { height: 32px !important; min-height: 0 !important; padding: 0 12px !important; border-radius: 8px !important; border: 1px solid var(--sm-line) !important; background: #fff !important; color: #42545b !important; white-space: nowrap; }
#hsCtx .editor-page-strip button[aria-current=true], #hsCtx .editor-page-strip button[aria-pressed=true], #hsCtx .editor-page-strip button.active { background: var(--sm-ink) !important; color: #fff !important; border-color: var(--sm-ink) !important; }

.sm-sel { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px; font-size: 13px; color: #6a7a81; white-space: nowrap; overflow: hidden; }
.sm-sel b { color: var(--sm-ink); }
.sm-sel small { color: #8a979c; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: 12.5px; }
.sm-arrow { color: #b8c3c0; }
.sm-hint { color: #8a979c; font-style: italic; overflow: hidden; text-overflow: ellipsis; }
#hsCtx .sm-sel-edit { height: 28px !important; padding: 0 10px !important; border-radius: 999px !important; border: 1px solid #b9d0c7 !important; background: #eef5f1 !important; color: var(--sm-teal) !important; flex: none; }
body.sm-dock-open[data-sm-dock=edit] .sm-sel-edit { display: none; }

.sm-ctx-right { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
#hsCtx .devices { display: flex !important; gap: 2px !important; padding: 3px !important; border-radius: 10px !important; background: var(--sm-soft) !important; border: 1px solid var(--sm-line) !important; margin: 0 !important; box-shadow: none !important; }
#hsCtx .devices button { height: 30px !important; min-height: 0 !important; padding: 0 10px !important; border-radius: 7px !important; border: 0 !important; background: transparent !important; color: #52646a !important; display: inline-flex !important; align-items: center; gap: 5px; }
#hsCtx .devices button.active, #hsCtx .devices button[aria-pressed=true] { background: #fff !important; color: var(--sm-ink) !important; box-shadow: 0 2px 6px #18302e1a !important; }
#hsCtx .live-editor-zoom { display: flex !important; align-items: center; gap: 2px; padding: 3px !important; border-radius: 10px !important; background: var(--sm-soft) !important; border: 1px solid var(--sm-line) !important; margin: 0 !important; box-shadow: none !important; }
#hsCtx .editor-magnifier-label { display: none !important; }
#hsCtx .live-editor-zoom button { height: 30px !important; min-width: 30px; min-height: 0 !important; padding: 0 8px !important; border-radius: 7px !important; border: 0 !important; background: transparent !important; color: #42545b !important; }
#hsCtx .live-editor-zoom button:hover { background: #fff !important; }
#hsCtx #liveZoomValue { font-size: 12px !important; min-width: 44px; text-align: center; color: var(--sm-ink) !important; font-weight: 600; }
#hsCtx #liveZoomReset { display: none !important; }
.sm-tools { display: flex; gap: 4px; }
#hsCtx .sm-tools button, #hsCtx .sm-focus { display: inline-flex !important; align-items: center; gap: 6px; height: 34px !important; min-height: 0 !important; padding: 0 11px !important; border-radius: 9px !important; border: 1px solid var(--sm-line) !important; background: #fff !important; color: #34474e !important; white-space: nowrap; }
#hsCtx .sm-tools button i { font-style: normal; color: var(--sm-teal); }
#hsCtx .sm-tools button:hover, #hsCtx .sm-focus:hover { border-color: #9fbdb2 !important; color: var(--sm-ink) !important; }
#hsCtx .sm-focus { width: 34px; justify-content: center; padding: 0 !important; font-size: 15px !important; }

/* Bild-Werkzeuge nur bei gewähltem Bild */
body.sm-studio .live-image-tools { display: none !important; }
body.sm-studio.sm-img-active .live-image-tools { display: flex !important; flex: none; align-items: center; gap: 10px; height: 44px; padding: 0 14px !important; margin: 0 !important; border: 0 !important; border-bottom: 1px solid var(--sm-line) !important; box-sizing: border-box; }

/* Leinwand füllt den Rest */
body.sm-studio .app > main .canvas { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; margin: 14px auto 0 !important; display: flex !important; flex-direction: column !important; align-self: stretch; box-sizing: border-box; }
body.sm-studio .app > main .canvas iframe#frame { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; }
body.sm-studio .app > main > footer { flex: none; margin: 0 !important; padding: 5px 16px !important; }

/* ---------- Leiste rechts ---------- */
body.sm-studio.sm-dock-open[data-sm-dock=lib] .sm-dock-head { display: flex; align-items: center; justify-content: space-between; position: fixed; top: var(--sm-top); right: 0; width: var(--sm-dock); height: var(--sm-head); padding: 0 12px 0 20px; box-sizing: border-box; background: #fffefa; border-left: 1px solid var(--sm-line); border-bottom: 1px solid var(--sm-line); z-index: 46; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.sm-dock-head b { font-size: 15px; color: var(--sm-ink); }
.sm-dock-close { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--sm-line); background: #fff; color: #42545b; font-size: 18px; line-height: 1; cursor: pointer; margin: 0 !important; padding: 0 !important; min-height: 0 !important; }
.sm-dock-close:hover { border-color: #9fbdb2; color: var(--sm-ink); }

body.sm-studio #library { display: none !important; }
body.sm-studio.sm-dock-open[data-sm-dock=lib] #library { display: block !important; position: fixed !important; top: calc(var(--sm-top) + var(--sm-head)) !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: var(--sm-dock) !important; max-width: none !important; height: auto !important; max-height: none !important; overflow-y: auto !important; overflow-x: hidden !important; margin: 0 !important; padding: 18px 20px 28px !important; box-sizing: border-box !important; border: 0 !important; border-left: 1px solid var(--sm-line) !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; z-index: 45 !important; background: #fbfaf7 !important; }
body.sm-studio #library .creator-panel-intro { display: none !important; }
body.sm-studio #library { container-type: inline-size; container-name: hsdock; }
body.sm-studio #library .modern-block-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; }
@container hsdock (max-width: 520px) { body.sm-studio #library .modern-block-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
/* Rückgängig/Wiederholen gibt es schon in der Kopfleiste */
body.sm-studio #editorWorkbench .wb-history { display: none !important; }

body.sm-studio #editorWorkbench { display: none !important; }
body.sm-studio.sm-dock-open[data-sm-dock=edit] #editorWorkbench { display: flex !important; flex-direction: column; position: fixed !important; top: var(--sm-top) !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: var(--sm-dock) !important; max-width: none !important; height: auto !important; max-height: none !important; margin: 0 !important; border: 0 !important; border-left: 1px solid var(--sm-line) !important; border-radius: 0 !important; box-shadow: none !important; z-index: 45 !important; animation: none !important; background: #fbfaf7 !important; }
body.sm-studio #editorWorkbench .wb-heading { padding: 12px 14px 12px 20px !important; background: #fffefa !important; border-bottom: 1px solid var(--sm-line); }
body.sm-studio #editorWorkbench .wb-heading small { display: none; }
body.sm-studio #editorWorkbench .wb-heading h2 { font-size: 15px !important; margin: 0 !important; color: var(--sm-ink) !important; }

body.sm-studio.sm-dock-open .sm-resize { display: block; position: fixed; top: var(--sm-top); bottom: 0; right: calc(var(--sm-dock) - 5px); width: 10px; cursor: col-resize; z-index: 50; touch-action: none; }
.sm-resize::after { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; background: transparent; transition: background .15s; }
.sm-resize:hover::after, body.sm-resizing .sm-resize::after { background: var(--sm-teal); }
body.sm-resizing { cursor: col-resize !important; user-select: none !important; }

/* Vorschau testen: nur ansehen */
body.sm-preview .sm-tools, body.sm-preview .sm-sel-edit { display: none !important; }

/* ---------- Fokus-Modus ---------- */
body.sm-focus header, body.sm-focus #hsBar, body.sm-focus .sm-dock-head, body.sm-focus .sm-resize, body.sm-focus #library, body.sm-focus #editorWorkbench, body.sm-focus .sm-pages, body.sm-focus .sm-tools { display: none !important; }
body.sm-studio.sm-focus .app > main { right: 0 !important; }
body.sm-focus .sm-focus { background: var(--sm-ink) !important; color: #fff !important; border-color: var(--sm-ink) !important; }

/* ---------- Kontextleiste passt sich der Breite der Vorschau an ---------- */
body.sm-studio .app > main { container-type: inline-size; container-name: hsmain; }
#hsCtx .devices svg { width: 16px; height: 16px; flex: none; }
@container hsmain (max-width: 1260px) {
  #hsCtx .sm-tools button span, #hsCtx .devices button span { display: none; }
  #hsCtx .sm-tools button, #hsCtx .devices button { padding: 0 9px !important; }
  .sm-sel small { display: none; }
}
@container hsmain (max-width: 820px) {
  #hsCtx .live-editor-zoom { display: none !important; }
  .sm-sel .sm-crumb, .sm-sel .sm-arrow, .sm-hint { display: none; }
}
@container hsmain (max-width: 640px) {
  .sm-sel { display: none; }
  .sm-tools { gap: 2px; }
  #hsCtx .sm-tools button { width: 32px; padding: 0 !important; justify-content: center; }
  .sm-ctx-right { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; justify-content: flex-end; }
  #hsCtx .sm-focus { display: none !important; }
}

/* ---------- Kleinere Bildschirme ---------- */
@media (max-width: 1360px) {
  #hsBar #creatorSearchButton, #hsBar #creatorViewButton { display: none !important; }
}
@media (max-width: 1180px) {
  #hsBar .sm-tabs button:not(.on) span { display: none; }
  #hsBar .sm-tabs button { padding: 0 11px !important; }
  #hsBar #creatorSaveStatus { display: none !important; }
}
@media (max-width: 820px) {
  :root { --sm-sheet: 46dvh; }
  body.sm-studio.sm-dock-open #hsCtx .sm-pages { display: none; }
  body.sm-studio #hsBar { height: auto; flex-wrap: wrap; gap: 6px; padding: 8px 10px; }
  .sm-left { flex: 1 1 auto; }
  .sm-right { display: none; }
  .sm-tabs { order: 3; flex: 1 1 100%; margin: 0; overflow-x: auto; scrollbar-width: none; }
  #hsBar .sm-tabs button, #hsBar .sm-tabs .sm-more-btn { flex-direction: column; justify-content: center; gap: 3px !important; height: 46px !important; padding: 0 9px !important; min-width: 54px; }
  #hsBar .sm-tabs button span, #hsBar .sm-tabs button:not(.on) span { display: block; font-size: 10px; font-weight: 600; }
  .sm-more { position: static; }
  .sm-menu { right: 10px; left: 10px; }
  body.sm-studio #hsCtx { height: auto; flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
  .sm-sel { order: 3; flex: 1 1 100%; }
  .sm-ctx-right { flex: 1 1 auto; justify-content: flex-end; }
  #hsCtx .live-editor-zoom, .sm-focus { display: none !important; }
  body.sm-studio.sm-dock-open .app > main { right: 0 !important; bottom: var(--sm-sheet) !important; }
  body.sm-studio.sm-dock-open[data-sm-dock=lib] .sm-dock-head { top: calc(100dvh - var(--sm-sheet)); width: 100vw; border-left: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px #0b182025; }
  body.sm-studio.sm-dock-open[data-sm-dock=lib] #library { top: calc(100dvh - var(--sm-sheet) + var(--sm-head)) !important; width: 100vw !important; border-left: 0 !important; }
  body.sm-studio.sm-dock-open[data-sm-dock=edit] #editorWorkbench { top: calc(100dvh - var(--sm-sheet)) !important; width: 100vw !important; border-left: 0 !important; border-radius: 18px 18px 0 0 !important; box-shadow: 0 -10px 30px #0b182025 !important; }
  body.sm-studio.sm-dock-open .sm-resize { display: none; }
}
@media (max-width: 820px) {
  body.sm-studio.sm-dock-open[data-sm-dock=lib] .sm-dock-head, body.sm-studio.sm-dock-open[data-sm-dock=lib] #library, body.sm-studio.sm-dock-open[data-sm-dock=edit] #editorWorkbench { left: 0 !important; right: 0 !important; width: auto !important; }
}
/* Handy: Kopfleiste schlank halten (Kalkulation steht im Menü „Mehr“) */
@media (max-width: 600px) {
  body.sm-studio header .brand > span:not(.logo) { display: none !important; }
  body.sm-studio header .actions { gap: 4px !important; }
  body.sm-studio.creator-workspace header .actions > #hwcPriceChip { display: none !important; }
  body.sm-studio header #preview { font-size: 0 !important; width: 44px; padding: 0 !important; }
  body.sm-studio header #preview::before { content: "▷"; font-size: 16px; }
  body.sm-studio header .seo-chip small { display: none; }
}
@media (prefers-reduced-motion: reduce) { body.sm-studio .app > main { transition: none; } }