/* ============================================================
 * VPano Panorama-UI Glass Skin — V2 Layout
 * ------------------------------------------------------------
 * Visueller Anstrich nach `logo design/design_handoff_panorama_ui/
 *   VPano Panorama UI v2.html`. Wird AUSSCHLIESSLICH ueber CSS auf
 * die bestehende Legacy-DOM gelegt. KEINE DOM-/JS-/Funktions-
 * Aenderungen. Farben aus viewer-tokens.css (--vp-* / --vp-hs-*).
 *
 * Single source of truth fuer Editor (globals.css @import) und
 * Public/Export-Viewer (link rel="stylesheet").
 *
 * MUSS identisch sein mit:
 *   backend/src/templates/export-viewer/assets/panorama-ui-glass.css
 * Pruefen: `node scripts/check-viewer-tokens.mjs`
 * ============================================================ */

/* Handoff-Typografie (Onest / Manrope / JetBrains Mono) — inline @font-face mit
   ABSOLUTEM Pfad /export-viewer/fonts/, damit alte Touren (vor dem Redesign
   exportiert) die Fonts auch ohne neuen per-tour-Bundle laden koennen. */
@font-face {
    font-family: "Onest";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/onest-cyrillic-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Onest";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/onest-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("fonts/manrope-cyrillic-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url("fonts/jetbrains-mono-cyrillic-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─────────────────────────────────────────────────────────────
 * Sizing-Token `--hit` (Tap-/Hit-Target fuer TopBar+Toolbar-Buttons).
 * Default 48px (matched Fallback in `var(--hit, 48px)`).
 * Auf 4K-/5K-Desktops mit Windows-Skalierung 100% sind 48px physisch
 * winzig — hoehere Stufen ab 2400px/3200px Viewport.
 * Mobile-Capping geschieht weiterhin separat in `@media (max-width: 640px)`.
 * KEIN Theme-Token — gilt fuer alle vp-* Skins.
 * ───────────────────────────────────────────────────────────── */
:root {
    --hit: 48px;
}
@media (min-width: 2400px) {
    :root {
        --hit: 56px;
    }
}
@media (min-width: 3200px) {
    :root {
        --hit: 64px;
    }
}

/* ─────────────────────────────────────────────────────────────
 * TOP BAR — V2: oben links Logo-Pille + Scene-Pille nebeneinander
 *           oben rechts Utility-Cluster (.toprail)
 * Wir nutzen #topBar's bestehenden Flex-Container, brechen aber
 * .top-center aus seiner absolute-Positionierung aus und stellen
 * .top-right rechtsbuendig per margin-left:auto.
 * ───────────────────────────────────────────────────────────── */

#topBar {
    top: 22px !important;
    left: 24px !important;
    right: 24px !important;
    gap: 12px;
    justify-content: flex-start !important;
    align-items: center !important;
}

/* TOP-LEFT = Client-Logo (naked).
   User-Vorgabe: KEIN Pillen-Hintergrund, KEIN Glass — Logo steht frei.
   KEINE feste Höhe: die Editor-Sticker (Pencil/Eye) sitzen absolut bei
   -top-3/-right-3 und würden sonst oben über den Container abgeschnitten. */
#topBar .top-left {
    padding: 0 !important;
    gap: 13px !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    flex: 0 0 auto;
}
/* Wenn die Logo-Pille komplett leer ist (kein Kind) -> ausblenden. */
#topBar .top-left:empty {
    display: none !important;
}
/* Wenn das #projectLogo versteckt ist (no logoUrl), die ganze Pille ausblenden.
   Der .topbar-map-btn ist desktop UND mobile permanent display:none — also
   kein Grund die leere Glass-Pille stehen zu lassen. */
#topBar .top-left:has(img[style*="display: none"]),
#topBar .top-left:has(img[style*="display:none"]),
#topBar .top-left:has(img:not([src])),
#topBar .top-left:has(img[src=""]) {
    display: none !important;
}
/* Sizing-Defaults (max-/height/width) BEWUSST OHNE `!important`, damit
   `viewer.js` per Inline-Style `projectLogo.style.width = sz + "px"` +
   `maxWidth/maxHeight = "none"` aus `state.project.logoSize` gewinnt.
   Ohne logoSize bleibt der CSS-Default als Sicherheitsobergrenze aktiv. */
#projectLogo {
    max-height: 28px;
    max-width: 160px;
    height: auto;
    width: auto;
    object-fit: contain !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
/* TopBar Map-Button (mobile only — bleibt versteckt auf Desktop via legacy CSS) */
#topBar .top-left .icon-button {
    width: 38px;
    height: 38px;
    border-radius: 11px;
}

/* TOP-CENTER = Scene-Pille (Handoff: .scene).
   Im legacy ist .top-center `position: absolute; left:50%`. Wir brechen
   das auf und setzen es als statisches Flex-Item neben .top-left. */
#topBar .top-center {
    position: static !important;
    left: auto !important;
    transform: none !important;
    top: auto !important;
    max-width: none !important;
    height: var(--hit, 48px);
    padding: 0 18px 0 12px !important;
    gap: 13px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    background: var(--vp-hs-glass) !important;
    border: 1px solid var(--vp-hs-glass-line) !important;
    box-shadow: var(--vp-hs-sh) !important;
    backdrop-filter: var(--vp-hs-blur) !important;
    -webkit-backdrop-filter: var(--vp-hs-blur) !important;
    flex: 0 0 auto;
}

/* Pin-Tile als ::before auf .top-center (links in der Scene-Pille).
   Default = DARK-Theme-SVG (white stroke). Light-Theme-Override unten swappt
   die SVG-URL auf dark stroke, sodass das Pin-Icon auf hellem BG lesbar ist. */
#topBar .top-center::before {
    content: "";
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s-7-5.2-7-11a7 7 0 1 1 14 0c0 5.8-7 11-7 11z'/><circle cx='12' cy='10' r='2.4'/></svg>") center / 17px 17px no-repeat,
        rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.22);
}
/* Light-Theme: dark-stroke SVG + leicht dunklerer Tile-Tint + dunklere Border.
   Greift fuer Editor (.vp-light) UND Public-Viewer ([data-ui-theme="light"]). */
.vp-light #topBar .top-center::before,
html[data-ui-theme="light"] #topBar .top-center::before,
[data-hotspot-theme="light"] #topBar .top-center::before {
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2311151c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s-7-5.2-7-11a7 7 0 1 1 14 0c0 5.8-7 11-7 11z'/><circle cx='12' cy='10' r='2.4'/></svg>") center / 17px 17px no-repeat,
        rgba(15, 20, 28, 0.06);
    border-color: rgba(15, 20, 28, 0.14);
}

/* Scene-Meta in der Pille */
#sceneMeta {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0 !important;
    line-height: 1.12;
    min-width: 0;
    text-align: left !important;
}

/* Eyebrow „Локация" ueber dem Title via ::before auf #title */
#title::before {
    content: "Локация"; /* i18n:pv.location */
    display: block;
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--vp-hs-ink-dim);
    line-height: 1;
    margin-bottom: 2px;
    text-align: left !important;
}
#title {
    text-align: left !important;
}

/* Scene-Chip Counter (Handoff: .scene .cnt) — "03 / 12".
   viewer.js (Public) und EditorViewport (React) setzen data-scene-index +
   data-scene-total auf .top-center selbst. Der Counter rendert als
   ::after Flex-Item INNERHALB der Pille, rechts der Title-Spalte. */
#topBar .top-center #sceneMeta {
    align-items: flex-start !important;
}
#topBar .top-center[data-scene-total]:not([data-scene-total=""])::after {
    content: attr(data-scene-index) " / " attr(data-scene-total);
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: 6px;
    padding-left: 13px;
    border-left: 1px solid var(--vp-hs-glass-line-soft);
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    color: var(--vp-hs-ink-dim);
    white-space: nowrap;
    align-self: center;
}

#title {
    font-family: "Onest", "Inter", "Geist", system-ui, -apple-system, sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    line-height: 1.12 !important;
    letter-spacing: -.01em !important;
    color: var(--vp-hs-ink) !important;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

/* Szenen-Beschreibung.
   Bis 2026-08-17 stand hier `display: none !important` — das Design-Handoff
   sah keine Beschreibung vor, also wurde sie pauschal abgeschaltet. Damit war
   sie in Editor UND Player unsichtbar, obwohl der Kunde sie eingibt und der
   Text im DOM steht; `!important` + ID-Spezifitaet schlug jede spaetere Regel.
   Seit dem Aufklapp-Feature ist sie ein echtes Kundenfeature: zugeklappt
   einzeilig gekuerzt (Regeln in style.css), aufgeklappt voll mit Scroll. */
#description {
    display: none;
}

/* Aufgeklappt = sichtbar. Zugeklappt ist die Beschreibung WEG, nicht nur
   gekuerzt — sonst gaebe es bei kurzen Texten keinen sichtbaren Unterschied
   und der Umschalter wirkte kaputt.
   Hier wiederholt, weil diese Datei NACH style.css geladen wird. */
#sceneMeta.vp-desc-open #description {
    display: block;
    /* pre-wrap statt normal: der Kunde tippt Absaetze in die Textarea — mit
       `normal` verschluckt der Browser jeden Zeilenumbruch und macht daraus
       einen einzigen Block. Zugeklappt bleibt es bei nowrap/Ellipse. */
    white-space: pre-wrap;
    overflow-y: auto;
    text-overflow: clip;
    max-height: 34vh;
    text-align: left;
    line-height: 1.5;
    padding-top: 3px;
    /* Lesbarkeit: `--text-muted` war fuer einen ganzen Absatz zu schwach —
       im dunklen Thema verschwand der Text fast im Glas. `--vp-hs-ink` ist
       der Text-Ton der Pille und dreht mit dem Thema (hell: fast schwarz,
       dunkel: fast weiss); 0.82 haelt ihn ruhiger als den Titel, ohne ihn
       unlesbar zu machen. Auch etwas groesser — 10px ist fuer Fliesstext zu
       klein. */
    color: var(--vp-hs-ink) !important;
    opacity: 0.86;
    font-size: 12.5px !important;
}

/* Die Pille MUSS mitwachsen. Sie hat oben `height: var(--hit, 48px)` fest
   gesetzt — ohne diese Regel quoll der aufgeklappte Text unten aus dem
   Glas-Hintergrund heraus, stand ohne Fuellung auf dem Panorama und
   ueberlappte den Titel. Bewusst per Klasse statt `:has()`, weil der Viewer
   auch alte Safari-Versionen bedienen muss. */
#topBar .top-center.vp-desc-open-host {
    height: auto !important;
    align-items: flex-start !important;
    padding-top: 9px !important;
    padding-bottom: 11px !important;
    max-width: min(520px, calc(100vw - 220px)) !important;
}

/* Pin-Kachel und Szenen-Zaehler nach oben ziehen, sonst schwimmen sie bei
   langem Text in der vertikalen Mitte. */
#topBar .top-center.vp-desc-open-host::before,
#topBar .top-center.vp-desc-open-host::after {
    align-self: flex-start !important;
    margin-top: 2px;
}

/* Aufgeklappt wird auch der TITEL vollstaendig gezeigt: zugeklappt bleibt er
   einzeilig mit "…", offen darf er umbrechen. Sonst liest man die
   Beschreibung, waehrend der Szenenname darueber abgeschnitten bleibt. */
#sceneMeta.vp-desc-open #title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Chevron bleibt bei mehrzeiligem Titel oben neben der ersten Zeile. */
#sceneMeta.vp-desc-open .vp-title-row {
    align-items: flex-start;
}

#sceneMeta.vp-desc-open .vp-desc-toggle {
    margin-top: 2px;
}

/* Umschalter im Glas-Thema: erbt sonst eine zu blasse Farbe und geht auf dem
   dunklen Glas unter. Eigener Ton + kraeftigerer Rand. */
.vp-desc-toggle {
    color: var(--vp-hs-ink) !important;
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: var(--vp-hs-glass-line, rgba(255, 255, 255, 0.35)) !important;
}

.vp-desc-toggle:hover {
    background: rgba(255, 255, 255, 0.30) !important;
}

/* Helles Thema: heller Fuellton wuerde auf hellem Glas verschwinden. */
html[data-ui-theme="light"] .vp-desc-toggle,
.vp-light .vp-desc-toggle,
[data-hotspot-theme="light"] .vp-desc-toggle {
    background: rgba(17, 21, 28, 0.10) !important;
    border-color: rgba(17, 21, 28, 0.22) !important;
}

html[data-ui-theme="light"] .vp-desc-toggle:hover,
.vp-light .vp-desc-toggle:hover,
[data-hotspot-theme="light"] .vp-desc-toggle:hover {
    background: rgba(17, 21, 28, 0.20) !important;
}

/* Kopfzeile: `#topBar` zentriert seine Kinder vertikal (align-items: center).
   Sobald die Szenen-Pille aufklappt, rutschten Logo, Etagen-Umschalter und
   die rechte Gruppe mit nach unten, weil sie sich an der gewachsenen Pille
   ausrichteten. Solange aufgeklappt ist, bleiben alle oben stehen. */
#topBar.vp-desc-open-bar {
    align-items: flex-start !important;
}

/* EDITOR-SONDERFALL: der Title sitzt in einem inneren <button> (EDIT-Mode mit
   ScenePropertiesPopover) ODER in einem inneren <div> (PREVIEW-Mode) mit
   pillCls. Beide haben eigene Glass-Pille -> neutralisieren, damit
   .top-center die einzige sichtbare Pille bleibt. */
#topBar .top-center > button,
#topBar .top-center > div,
#topBar .top-center > div > button {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    gap: 0 !important;
    transform: none !important;
}

/* TOP-RIGHT = Utility-Cluster `.toprail` rechtsbuendig (Handoff Layout). */
#topBar .top-right {
    margin-left: auto !important;
    padding: 5px !important;
    gap: 6px !important;
    border-radius: 16px !important;
    align-items: center !important;
    background: var(--vp-hs-glass) !important;
    border: 1px solid var(--vp-hs-glass-line) !important;
    box-shadow: var(--vp-hs-sh) !important;
    backdrop-filter: var(--vp-hs-blur) !important;
    -webkit-backdrop-filter: var(--vp-hs-blur) !important;
    flex: 0 0 auto;
}
#topBar .top-right .tool-buttons {
    gap: 6px !important;
}

/* Static Export hat sceneMeta (title+desc) IN .top-right.
   Wenn vorhanden: ausblenden — gehoert in den Scene-Chip. */
#topBar .top-right #sceneMeta {
    display: none !important;
}

/* Glass-Buttons im Handoff-Stil (.gbtn) — 42x42, transparent. */
#topBar .top-right .icon-button {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--vp-hs-ink) !important;
    transition: background .18s, color .18s, transform .12s !important;
    box-shadow: none !important;
}
#topBar .top-right .icon-button:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    color: var(--vp-hs-ink) !important;
    transform: none !important;
}
#topBar .top-right .icon-button:active {
    transform: scale(.93) !important;
}
#topBar .top-right .icon-button svg {
    width: 21px !important;
    height: 21px !important;
    stroke-width: 1.7;
}

/* Info-Button war ghost-pill — auf gbtn-Stil mit Info-Icon via ::before. */
#projectInfoBtn.ghost-button {
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--vp-hs-ink) !important;
    font-size: 0 !important;
    text-indent: -9999px;
    overflow: hidden;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transition: background .18s, color .18s, transform .12s !important;
    box-shadow: none !important;
    position: relative;
}
#projectInfoBtn.ghost-button:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    color: var(--vp-hs-ink) !important;
    box-shadow: none !important;
}
#projectInfoBtn.ghost-button::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3f6fb' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 11v5'/><circle cx='12' cy='7.6' r='.7' fill='%23f3f6fb'/></svg>") center / 21px 21px no-repeat;
    pointer-events: none;
}

/* TitleOverlay (Pille wenn Strip eingeklappt) — matches Scene-Pille. */
#titleOverlay {
    top: 22px;
    padding: 8px 18px;
    border-radius: 16px;
    background: var(--vp-hs-glass);
    border: 1px solid var(--vp-hs-glass-line);
    box-shadow: var(--vp-hs-sh);
    backdrop-filter: var(--vp-hs-blur);
    -webkit-backdrop-filter: var(--vp-hs-blur);
    font-family: "Onest", var(--vp-font-family);
    font-weight: 600;
    font-size: 15px;
    color: var(--vp-hs-ink);
    letter-spacing: -.01em;
}

/* ─────────────────────────────────────────────────────────────
 * RIGHT RAIL — Handoff `.rail`
 * Vertikal mittig rechts (top:50%, translateY(-50%)) — Glass-Pille
 * mit gbtn-Buttons 48×48 (Zoom, Auto-Rotate, FS, VR, Map).
 * Im V1 sitzt der filled Tour-CTA OBEN drauf, im V2 nicht (Tour wandert in den Dock).
 * ───────────────────────────────────────────────────────────── */
#controlsToolbar {
    position: absolute !important;
    right: 24px !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    z-index: 20 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    /* Handoff `.rail`: padding:6px (Glass-Pill umschliesst Buttons mit 6px Inset). */
    padding: 6px !important;
    background: var(--vp-hs-glass) !important;
    border: 1px solid var(--vp-hs-glass-line) !important;
    box-shadow: var(--vp-hs-sh) !important;
    backdrop-filter: var(--vp-hs-blur) !important;
    -webkit-backdrop-filter: var(--vp-hs-blur) !important;
    /* 16 = Radius der oberen Gruppen-Pille (#vpTopPillGroup) — eine
       Radius-Familie fuer alle Glas-Container. */
    border-radius: 16px !important;
    width: auto !important;
    height: auto !important;
}

/* ─────────────────────────────────────────────────────────────
 * EDITOR: Cover-CTA ("Сделать обложку")
 * Eigener Button unten rechts, ohne Glass-Design.
 * Rendered nur im Editor (data-vp-editor am Root).
 * ───────────────────────────────────────────────────────────── */
[data-vp-editor="1"] .vp-cover-cta {
    position: absolute;
    right: 16px;
    bottom: 18px;
    z-index: 31;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: var(--vp-accent);
    color: #fff;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    font-family: "Onest", "Inter", "Geist", system-ui, sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: -0.01em;
    transition: filter .16s, transform .12s, box-shadow .16s;
}
[data-vp-editor="1"] .vp-cover-cta:hover {
    filter: brightness(1.05);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.33);
}
[data-vp-editor="1"] .vp-cover-cta:active {
    transform: translateY(1px) scale(0.99);
}
[data-vp-editor="1"] .vp-cover-cta:disabled {
    opacity: 0.75;
    cursor: wait;
}
[data-vp-editor="1"] .vp-cover-cta__icon {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor;
}
[data-vp-editor="1"] .vp-cover-cta__label {
    line-height: 1;
}

/* Leere Wrapper aus dem PREVIEW-Modus ausblenden — wenn EditorOverlayVisibility
   `null` zurueckgibt, ist der React-Slot leer, aber der `EditorOverlayVisibility`
   selbst rendert keinen Wrapper-Div im PREVIEW (return null). Hier rein
   defensiv: jede leere `.group/visibility`-Huelle und jeder direkte leere
   Wrapper-Div im Rail wird ausgeblendet. */
#controlsToolbar > div:empty,
#controlsToolbar > div > div:empty {
    display: none !important;
}
/* Zwischenraum-Hygiene: wenn ein direkter Child-Wrapper ueberhaupt keinen
   sichtbaren Button enthaelt (z.B. weil children durch interne Bedingungen
   weggefallen sind), nicht layoutwirksam. */
#controlsToolbar > div:not(:has(button)):not(:has(.relative)):not(:has(svg)) {
    display: none !important;
}

/* Glass-Button (Handoff `.gbtn`): 48×48, transparent, hover-bg, kein Border.
   Public-Viewer hat .icon-button direkt im #controlsToolbar.
   Editor hat <div>{EditorOverlayVisibility-Wrapper} > <button> als Grandchild. */
#controlsToolbar .icon-button:not(.vp-sticker),
#controlsToolbar > div > button:not(.vp-sticker),
#controlsToolbar > button:not(.vp-sticker) {
    width: var(--hit, 48px) !important;
    height: var(--hit, 48px) !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--vp-hs-ink) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    position: relative;
    /* 12 = Innenradius von LocToggle/Share unten — gleiche Familie. */
    border-radius: 12px !important;
    transition: background .18s, color .18s, transform .12s !important;
    box-shadow: none !important;
}
#controlsToolbar .icon-button:not(.vp-sticker):hover,
#controlsToolbar > div > button:not(.vp-sticker):hover,
#controlsToolbar > button:not(.vp-sticker):hover {
    background: rgba(255, 255, 255, .10) !important;
    color: var(--vp-hs-ink) !important;
    transform: none !important;
}
#controlsToolbar .icon-button:not(.vp-sticker):active,
#controlsToolbar > div > button:not(.vp-sticker):active,
#controlsToolbar > button:not(.vp-sticker):active {
    transform: scale(.93) !important;
}
#controlsToolbar .icon-button.is-active,
#controlsToolbar .icon-button.tour-active {
    background: rgba(255, 255, 255, .16) !important;
    color: var(--vp-hs-ink) !important;
}
/* Stroke/Style fuer alle Nicht-Sticker-SVGs in der Rail (Editor inline-SVGs
   + Public-Viewer .icon-button + Lucide-Icons im Editor). */
#controlsToolbar :where(button:not(.vp-sticker)) svg,
#controlsToolbar .vp-rail-svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7 !important;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Main-Button-SVGs (NICHT die Sticker-SVGs) IMMER 21x21 — egal wie tief
   verschachtelt im EditorOverlayVisibility-Wrapper. Inline width=/height=-
   Attribute sind im JSX entfernt; hier reicht CSS mit hoher Spezifitaet. */
#controlsToolbar :where(button:not(.vp-sticker)) > svg,
#controlsToolbar :where(button:not(.vp-sticker)) svg.vp-rail-svg,
#controlsToolbar .vp-rail-svg {
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
    min-height: 21px !important;
}

/* Editor-Sondersache: Minimap-Toggle ist in <div className="relative"> verschachtelt
   und enthaelt einen weiteren <button> als Sticker-Geschwister. Die Sticker bleiben
   absolut positioniert (oben rechts mit -top-3 -right-3) und werden nicht ueber
   den `> div > button`-Selector gefangen, weil sie tiefer liegen. */
#controlsToolbar > div > .relative > button:not(.vp-sticker) {
    width: var(--hit, 48px) !important;
    height: var(--hit, 48px) !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--vp-hs-ink) !important;
    border-radius: 12px !important;
}
#controlsToolbar > div > .relative > button:not(.vp-sticker):hover {
    background: rgba(255, 255, 255, .10) !important;
    color: var(--vp-hs-ink) !important;
}
#controlsToolbar > div > .relative > button:not(.vp-sticker) svg {
    width: 21px !important;
    height: 21px !important;
}

/* EDITOR-Stickers (Eye / EyeOff / Pencil) — innerhalb des Toolbar-Backgrounds
   bleiben, damit sie die Pille visuell nicht aufblaehen. Im Right-Rail
   ruecken wir sie ueber den Eltern-Container nach oben/rechts in den
   Toolbar-Innenbereich (positive Offsets). */
/* ─────────────────────────────────────────────────────────────
 * EDITOR-Sticker (.vp-sticker) — globale Klasse fuer alle Eye / EyeOff /
 * Pencil-Buttons im Editor. Im JSX gesetzt in:
 *   EditorOverlayVisibility, LogoSettingsButton, BusinessCardSettingsPopover,
 *   SceneListSettingsButton, AudioSettingsPopover und die Inline-Eye/Pencil
 *   in EditorViewport (Visitenkarte, Minimap, Scene-Strip).
 *
 * Erscheint ueberall identisch — Background, Border, Icon-Farbe einheitlich.
 * On/Off-State wird ueber das Icon (Eye vs EyeOff) selbst gezeigt, nicht
 * ueber Background-Variation. Tailwind-bg/text-Klassen werden ueberschrieben. */
.vp-sticker {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    flex: 0 0 18px !important;
    background: rgba(15, 18, 24, 0.78) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: 9999px !important;
    color: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35) !important;
    filter: none !important;
}
.vp-sticker:hover {
    background: rgba(20, 24, 32, 0.88) !important;
    border-color: rgba(255, 255, 255, 0.40) !important;
    color: var(--vp-hs-ink) !important;
}
.vp-sticker svg {
    width: 11px !important;
    height: 11px !important;
    color: rgba(255, 255, 255, 0.92) !important;
    opacity: 1 !important;
}

/* Position-Override pro Container, damit die Sticker an der oberen rechten
   Ecke der Buttons sitzen. */
#controlsToolbar [class~="-top-3"][class~="-right-3"],
#topBar [class~="-top-3"][class~="-right-3"] {
    top: -4px !important;
    right: -8px !important;
    z-index: 36;
}


/* ─────────────────────────────────────────────────────────────
 * V1 — DOCK (unified glass pill bottom-center, sceneListMode "strip")
 * ------------------------------------------------------------
 * Handoff `.dock`: EINE Glass-Pille bottom-center mit:
 *   .track   — collapsible Card-Strip (Locations)
 *   .dockbar — always visible:
 *     .pbgroup       — Tour-Btn + .pdiv + Audio-Btn
 *     .dockright     — .navs (Prev/Next) + .loctoggle (collapse)
 *
 * DOM-IDs (Editor + Public-Viewer + Static-Export):
 *   #bottomStrip.dock           (Dock-Root)
 *     #sceneList.track          (Cards)
 *     .dockbar
 *       .pbgroup
 *         #dockTourSlot         — tour-panorama.js injiziert #tourPlayBtn hier
 *         .pdiv
 *         #dockAudioSlot        — #audioPlayer wird hier reingemovet
 *       .dockright
 *         #dockNavs.navs        — #dockPrev / #dockNext
 *         #dockLocToggle.loctoggle
 *
 * Greift NUR wenn html.strip-mode aktiv ist.
 * ───────────────────────────────────────────────────────────── */

/* Reset Editor's PreviewSceneStrip-Wrapper (.relative > #stripToggle) — wird im
   V1 nicht angezeigt, da #dockLocToggle in .dockbar die Collapse-Funktion uebernimmt. */
html.strip-mode #bottomStrip > .relative,
html.strip-mode #bottomStrip > .strip-scenes-outer,
html.strip-mode #bottomStrip .dock-legacy-toggle,
html.strip-mode #bottomStrip .dock-legacy-arrow {
    display: none !important;
}

/* Dock-Root: Glass-Pille bottom-center, width min(1180px, 100%-48px), padding 8. */
html.strip-mode #bottomStrip.dock {
    position: absolute !important;
    left: 50% !important;
    bottom: 22px !important;
    transform: translateX(-50%) !important;
    z-index: 20 !important;
    width: min(1180px, calc(100% - 48px)) !important;
    max-width: none !important;
    background: var(--vp-hs-glass) !important;
    border: 1px solid var(--vp-hs-glass-line) !important;
    box-shadow: var(--vp-hs-sh) !important;
    backdrop-filter: var(--vp-hs-blur) !important;
    -webkit-backdrop-filter: var(--vp-hs-blur) !important;
    border-radius: 20px !important;
    padding: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    counter-reset: scene 0;
    font-family: "Onest", "Inter", "Geist", system-ui, -apple-system, sans-serif !important;
}
/* Breiten-Override: max 5 Karten (5 × 150 + 4 × 10 Gap + 2 × 8 Padding = ~806px).
   Mehr Szenen scrollen im .track horizontal. */
html.strip-mode #bottomStrip.dock {
    width: min(820px, calc(100% - 32px)) !important;
}

/* ENTFALLEN: die Ausweich-Regel fuer die Mini-Karte unten links.
   Sie schob die Leiste zwischen 1101 und 1439px um 160px nach rechts und
   stauchte den Karten-Track auf 480px — und zwar nur, wenn die Karte gerade
   offen war. Beim Ueberschreiten von 1439px fiel sie schlagartig weg, die
   Leiste sprang um rund 180px zurueck in die Mitte. Genau dieses Springen war
   der Grund fuer den Eindruck, die Karte sei "immer woanders".
   Seit die Karte als Panel UEBER der Leiste haengt (Abschnitt «MINI-KARTE» am
   Dateiende), teilen sich beide die Ecke nicht mehr — es gibt nichts mehr
   auszuweichen. */

/* ─── TRACK (.track / #sceneList) ───
   WICHTIG: display:flex OHNE !important — damit React's style={{display:none}}
   und vanilla-JS track.style.display = "none" funktionieren (LocToggle Collapse).

   max-height: none ueberschreibt Legacy-style.css `.strip-scenes{max-height:120px}`,
   das sonst den 2-Zeilen-Title abschneidet. */
html.strip-mode #bottomStrip .track,
html.strip-mode #bottomStrip #sceneList,
html.strip-mode #bottomStrip .strip-scenes {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 2px !important;
    margin: 0 0 4px 0 !important;
    display: flex;
    align-items: stretch !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth;
    scrollbar-width: none;
    border-radius: 0 !important;
    width: 100%;
    max-height: none !important;
    max-width: none !important;
}
html.strip-mode #bottomStrip .track::-webkit-scrollbar,
html.strip-mode #bottomStrip #sceneList::-webkit-scrollbar { display: none; }

/* ─── CARD (.card / .scene-card) — 150x88 img + cap ─── */
html.strip-mode #bottomStrip .scene-card,
html.strip-mode #bottomStrip .card {
    /* 140 statt 150: mit dem 100px-Thumb bleibt das Bild sonst zu wuchtig;
       schmaler = kleineres Bild bei gleicher Zeilenhoehe. */
    flex: 0 0 140px !important;
    width: 140px !important;
    cursor: pointer;
    border-radius: 12px !important;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--vp-hs-glass-line-soft) !important;
    background: transparent !important;
    transition: transform .16s, border-color .16s !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    counter-increment: scene;
    /* min-height exakt auf den Inhalt: 128 = 100 Thumb + einzeilige Caption
       (12 Padding + 14 Zeile) + 2 Rand — identisch zum Mobile-Wert. Der alte
       Wert (125) stammt aus der 88px-Zeit und streckte die Caption. */
    min-height: 128px !important;
}
html.strip-mode #bottomStrip .scene-card:hover,
html.strip-mode #bottomStrip .card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(255, 255, 255, .3) !important;
}
html.strip-mode #bottomStrip .scene-card .scene-thumb,
html.strip-mode #bottomStrip .scene-card > img,
html.strip-mode #bottomStrip .card .img {
    width: 100% !important;
    /* 100 = Zielwert des Users fuer BEIDE Breakpoints (2026-08-13). */
    height: 100px !important;
    background-size: cover;
    background-position: center;
    object-fit: cover;
    display: block;
    flex: 0 0 100px;
}
html.strip-mode #bottomStrip .scene-thumb-empty {
    background: rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .35);
    font-size: 10px;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
/* Caption (.scene-title / .cap): Eyebrow OBEN + Title (Manrope) UNTEN — Handoff `.cap`.

   WICHTIG: Public-Viewer laedt zusaetzlich style.css mit Legacy-Rule
   `.scene-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }`.
   Wir muessen white-space + overflow + text-overflow auf dem Parent explizit
   zuruecksetzen, sonst klemmt's via Inheritance den 2-Zeilen-Wrap im <b>. */
html.strip-mode #bottomStrip .scene-card .scene-title,
html.strip-mode #bottomStrip .card .cap {
    padding: 6px 9px !important;
    /* Seit dem Eyebrow-Entfall (2026-08-13) fuellt die Caption den Rest der
       Karte (min-height 125px, Thumb fix) und zentriert den Titel vertikal —
       sonst bleibt unter der Titelzeile ein toter transparenter Streifen. */
    flex: 1 1 auto !important;
    justify-content: center !important;
    background: rgba(8, 11, 18, .5) !important;
    color: var(--vp-hs-ink) !important;
    font-family: "Manrope", "Inter", "Geist", system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    line-height: 1.2;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}
/* Title <b> — Manrope 11px, 2-zeilig mit Line-Clamp Ellipsis am Ende.
   User-Vorgabe: Single-Line ellipsis hat zu wenig vom Titel gezeigt
   ("halb abgeschnitten"). 2 Zeilen mit -webkit-line-clamp zeigen den Titel
   besser, dann clamp-Ellipsis "..." bei Ueberlauf. */
html.strip-mode #bottomStrip .scene-card .scene-title b,
html.strip-mode #bottomStrip .card .cap b {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    color: #fff !important;
    font-family: "Manrope", "Inter", "Geist", system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: -.01em !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.25 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow-wrap: anywhere;
}
/* Eyebrow <span> / <.se> — JetBrains Mono 8.5px, UPPERCASE, dim */
html.strip-mode #bottomStrip .scene-card .scene-title .se,
html.strip-mode #bottomStrip .scene-card .scene-title > span,
html.strip-mode #bottomStrip .card .cap span {
    display: block !important;
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    font-weight: 500 !important;
    font-size: 8.5px !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, .55) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}
/* Active/Current Card */
html.strip-mode #bottomStrip .scene-card.cur,
html.strip-mode #bottomStrip .scene-card.active,
html.strip-mode #bottomStrip .card.cur {
    border-color: #fff !important;
    box-shadow: none !important;
    transform: none !important;
}
html.strip-mode #bottomStrip .scene-card.cur::after,
html.strip-mode #bottomStrip .scene-card.active::after,
html.strip-mode #bottomStrip .card.cur::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid #fff;
    border-radius: 12px;
    pointer-events: none;
}
html.strip-mode #bottomStrip .scene-card.cur .scene-title,
html.strip-mode #bottomStrip .scene-card.active .scene-title,
html.strip-mode #bottomStrip .card.cur .cap {
    background: rgba(241, 244, 249, .92) !important;
    color: #11151c !important;
}
html.strip-mode #bottomStrip .scene-card.cur .scene-title .se,
html.strip-mode #bottomStrip .scene-card.cur .scene-title > span,
html.strip-mode #bottomStrip .scene-card.active .scene-title .se,
html.strip-mode #bottomStrip .scene-card.active .scene-title > span,
html.strip-mode #bottomStrip .card.cur .cap span {
    color: rgba(17, 21, 28, .6) !important;
}
html.strip-mode #bottomStrip .scene-card.cur .scene-title b,
html.strip-mode #bottomStrip .scene-card.active .scene-title b,
html.strip-mode #bottomStrip .card.cur .cap b {
    color: #11151c !important;
}

/* ─── DOCKBAR (.dockbar) ─── */
#bottomStrip.dock .dockbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 0 2px !important;
    width: 100%;
}

/* Playback group (links): Tour + Separator + Audio */
#bottomStrip.dock .pbgroup {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 0 1 auto;
    min-width: 0;
}

/* Separator (.pdiv) — entfernt 2026-08-13 (User-Polish: ohne Text-Labels
   wirkt der Strich zwischen den zwei runden Buttons nur noch als Stoerung).
   Der Trennstrich zur Rail (vp-rail-in-dock) ist davon unabhaengig
   (border-left dort). */
#bottomStrip.dock .pdiv {
    display: none !important;
}

/* Dock-Slot wrappers (Tour + Audio) — schlanke Flex-Container fuer Slot-Content. */
#bottomStrip.dock .dock-slot {
    display: flex;
    align-items: center;
}
#bottomStrip.dock .dock-slot:empty {
    display: none;
}
/* Wenn beide Slots leer sind, .pdiv mit ausblenden. */
#bottomStrip.dock .pbgroup:not(:has(.dock-slot-tour > *)):not(:has(.dock-slot-audio > *)):not(:has(.dock-slot-rail > *)) {
    display: none;
}
#bottomStrip.dock .pbgroup:not(:has(.dock-slot-tour > *)) .pdiv,
#bottomStrip.dock .pbgroup:not(:has(.dock-slot-audio > *)) .pdiv {
    display: none;
}

/* ─── KOMPAKTE ANSICHT: Mini-Rail sitzt in der Dockbar ─────────────────
   Der Clean-Modus (tour.vpano.ru) und die beiden Minimal-Themes wollen dasselbe
   Bild. Aus der schwebenden Glas-Pille am rechten Rand wird eine flache
   Button-Reihe in der unteren Leiste — das Glas bringt die Dockbar selbst mit,
   sonst haetten wir Pille in Pille.

   Der Gate ist die Klasse `vp-rail-in-dock` bzw. das `:has(#controlsToolbar)`
   an der Leiste, NICHT `data-vp-compact` am <html>. Grund: den Umzug macht im
   Player viewer.js (moveControlsIntoDock), im Editor aber React per Portal —
   und der Editor setzt kein html-Attribut. Haengen die Regeln an der Klasse,
   gelten sie in beiden Welten, und der Kunde sieht im Editor dasselbe wie
   spaeter in der Tour. Der Gate ist trotzdem dicht: die Klasse existiert nur
   waehrend die Rail wirklich unten sitzt.
   Passt die Reihe nicht (schmales Fenster, viele Knoepfe), wandert sie zurueck
   nach rechts und keine dieser Regeln greift mehr.
   ACHTUNG: diese Datei existiert DREIFACH (frontend/src/styles/ als Master,
   frontend/public/export-viewer/ und backend/src/templates/export-viewer/assets/)
   und wird NICHT automatisch gespiegelt — von Hand gleich halten. */
#controlsToolbar.vp-rail-in-dock {
    position: static !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    flex-direction: row !important;
    gap: 2px !important;
    /* Trennstrich zur Audio-/Tour-Gruppe — dasselbe Bild wie .pdiv dort. */
    margin-left: 6px !important;
    padding: 0 0 0 6px !important;
    background: none !important;
    border: 0 !important;
    border-left: 1px solid var(--vp-hs-glass-line-soft) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    z-index: auto !important;
    flex: 0 0 auto !important;
}

/* In der Leiste etwas kleiner als in der schwebenden Rail (48px) — sonst passt
   die Reihe neben Tour, Audio und Locations-Umschalter nicht. */
#controlsToolbar.vp-rail-in-dock .icon-button,
#controlsToolbar.vp-rail-in-dock > button {
    width: 40px !important;
    height: 40px !important;
    border-radius: 11px !important;
}

/* Die Leiste ist je nach Szenenlisten-Modus auf 820px (strip) bzw. 720px (popup)
   genagelt — eine feste Breite, die mit der Rail darin entweder zu eng wird
   (die Rail schiebt sich ueber die Locations-Pille) oder halbleer aussieht.
   Deshalb hier inhaltsgerecht: so breit wie noetig, gedeckelt vom Fenster.
   Das ist auch der Grund, warum beide Faelle dieselbe Regel vertragen — der
   Clean-Modus traegt Tour und Audio nicht mehr, das Minimal-Theme dafuer den
   Teilen-Knopf. Der Umzug selbst passiert auf dem Desktop ab 1024px
   Fensterbreite (viewer.js), darunter bleibt die Rail rechts stehen. */
#bottomStrip.dock:has(#controlsToolbar) {
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 32px) !important;
}

/* ABER: die Breite darf nur die Bedienzeile bestimmen, nicht der Karten-Track.
   Eine Tour mit neun Szenen zieht ihn sonst ueber die halbe Seite — im Editor
   bis unter das linke Werkzeug-Panel, wo die Karten dann verschwinden. Der
   Streifen bleibt deshalb auf seiner bisherigen Breite (820px Leiste minus
   2x8px Innenabstand) und scrollt wie gehabt horizontal weiter. */
#bottomStrip.dock:has(#controlsToolbar) .track,
#bottomStrip.dock:has(#controlsToolbar) #sceneList,
#bottomStrip.dock:has(#controlsToolbar) .strip-scenes {
    max-width: 804px !important;
}

/* ENTFALLEN: die zweite Ausweich-Regel (Leiste rechtsbuendig, sobald die
   Mini-Karte offen war). Auch sie loeste einen Platzstreit, den es seit dem
   Anker an der Leiste nicht mehr gibt — und sie hat die Leiste beim Ein- und
   Ausschalten der Karte quer ueber den Bildschirm springen lassen. */

/* .pbgroup blendet sich oben selbst aus, wenn Tour- UND Audio-Slot leer sind.
   Mit der Rail darin waere das ein Verschwinden der Bedienelemente — hier also
   zurueckholen. */
#bottomStrip.dock .pbgroup:has(#controlsToolbar) {
    display: flex !important;
}

/* ─── TOUR SEGMENT (.seg.tour, im #dockTourSlot) ─── */
#bottomStrip.dock .seg,
#bottomStrip.dock #dockTourSlot > button {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    /* 40px = Hoehe von LocToggle und Share — eine Grundlinie fuer die ganze
       Leiste (Design-Durchgang 2026-08-13). Padding symmetrisch seit
       Label-Entfall: die Pille traegt nur noch den Kreis. */
    height: 40px !important;
    padding: 0 4px !important;
    border: 0 !important;
    cursor: pointer !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--vp-hs-ink) !important;
    transition: background .18s !important;
    font-family: "Onest", "Inter", "Geist", system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    letter-spacing: -.01em !important;
    box-shadow: none !important;
    width: auto !important;
}
#bottomStrip.dock .seg:hover,
#bottomStrip.dock #dockTourSlot > button:hover {
    background: rgba(255, 255, 255, .08) !important;
}
#bottomStrip.dock .seg.on {
    background: rgba(255, 255, 255, .13) !important;
}
/* Icon-Circle (.seg .ico) — 32x32 semi-transparent */
#bottomStrip.dock .seg .ico {
    /* border-box: mit content-box mass der Kreis 34px (32 + 2x1px Rand) und
       war damit groesser als der Audio-Kreis — genau der vom User bemerkte
       Durchmesser-Unterschied. */
    box-sizing: border-box !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 32px !important;
    background: rgba(255, 255, 255, .12) !important;
    border: 1px solid rgba(255, 255, 255, .20) !important;
    color: var(--vp-hs-ink) !important;
    transition: .18s !important;
}
#bottomStrip.dock .seg .ico svg {
    width: 16px !important;
    height: 16px !important;
}
/* On-State: Icon-Circle filled (white grad) mit dunklem Glyph */
#bottomStrip.dock .seg.on .ico {
    background: var(--vp-hs-fill) !important;
    border-color: transparent !important;
    color: var(--vp-hs-on-fill) !important;
}
/* Tour-Segment Glyph: filled (no stroke) */
#bottomStrip.dock .seg.tour .ico svg {
    fill: currentColor !important;
    stroke: none !important;
}
/* Play/Pause-Toggle via .on-Class (Handoff V1) */
#bottomStrip.dock .seg.tour .t-pause { display: none !important; }
#bottomStrip.dock .seg.tour.on .t-play { display: none !important; }
#bottomStrip.dock .seg.tour.on .t-pause { display: block !important; }

/* Progress-Ring um den Icon-Circle (loest .tstat-Counter ab — verhindert Layout-Shift
   beim Tour-Start). Conic-Gradient fuettert die Progress-Fuellung; radial-mask
   schneidet die innere Flaeche aus → Ring 3px aussen. Steuerung per CSS-Var
   --tour-progress (0..100), gesetzt vom tour-panorama.js updateUI(). */
#bottomStrip.dock .seg.tour .ico { position: relative; }
#bottomStrip.dock .seg.tour.on .ico::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: conic-gradient(
        from -90deg,
        #fff 0,
        #fff calc(var(--tour-progress, 0) * 1%),
        rgba(255, 255, 255, .22) 0
    );
    /* Ring-Dicke 0.6px (80% duenner als vorher 3px) — User-Vorgabe.
       Mask schneidet die innere Flaeche aus, nur ein duenner Outer-Ring bleibt. */
    -webkit-mask: radial-gradient(circle, transparent calc(50% - 0.6px), #000 calc(50% - 0.6px));
            mask: radial-gradient(circle, transparent calc(50% - 0.6px), #000 calc(50% - 0.6px));
    pointer-events: none;
    z-index: 1;
}

/* .tstat-Counter wird durch den Ring abgeloest — global ausblenden. */
#bottomStrip.dock .seg.tour .tstat { display: none !important; }
/* Label (.lbl) — entfernt 2026-08-13 (User: «cleaner, nur runde Buttons»).
   Der Text bleibt im DOM (tour-panorama.js schreibt ihn weiter), Bedeutung
   traegt title/aria-label auf dem Button. */
#bottomStrip.dock .seg .lbl {
    display: none !important;
}
/* Tour Status (.tstat) — abgeloest durch den Progress-Ring um den Play-Circle.
   Bleibt im DOM (tour-panorama.js schreibt weiterhin Werte rein), aber wird
   nicht mehr angezeigt → kein Layout-Shift beim Tour-Start. */

/* Legacy Tour-CTA Fallback: wenn tour-panorama.js noch in #controlsToolbar
   injiziert hat (alte Exporte ohne #dockTourSlot), zumindest sicher hidden lassen
   bis Dock-Slot vorhanden ist. Wir resetten die alten fixed/absolute-Hacks
   hier, weil Dock-Slot der neue Standard-Pfad ist. */
#controlsToolbar #tourPlayBtn:not(.seg),
#controlsToolbar #tourStopBtn:not(.seg) {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ─── AUDIO SEGMENT (#audioPlayer in #dockAudioSlot) ───
   Wir flachklopfen die Editor-Wrapper (`.relative` + innere flex-div) via
   display:contents, sodass audioPlayPause, audioVolume, audioMute DIREKTE
   Kinder von #audioPlayer werden. Damit funktioniert flex-order korrekt. */
#bottomStrip.dock #dockAudioSlot {
    display: flex;
    align-items: center;
}
#bottomStrip.dock #audioPlayer.audio-player {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    z-index: auto !important;
    height: 40px !important;
    width: auto !important;
    /* Symmetrisch wie die Tour-Pille — das alte 16/7-Padding stammte aus dem
       Label-Layout und liess den Knopf oval statt rund wirken. */
    padding: 0 4px !important;
    border-radius: 999px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: var(--vp-hs-ink) !important;
    font-family: "Onest", "Inter", "Geist", system-ui, sans-serif !important;
    transition: background .18s !important;
}
#bottomStrip.dock #audioPlayer.audio-player:hover {
    background: rgba(255, 255, 255, .08) !important;
}
/* Editor-Wrappers flachklopfen — audioPP, audioVolume, audioMute werden direkte Kinder. */
#bottomStrip.dock #audioPlayer.audio-player > .relative {
    display: contents !important;
}
#bottomStrip.dock #audioPlayer.audio-player > .relative > div:not(.absolute) {
    display: contents !important;
}

/* Audio Play/Pause als 32x32 Icon-Circle (.seg .ico-Look). */
#bottomStrip.dock #audioPlayer #audioPlayPause.audio-pp {
    box-sizing: border-box !important;
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .12) !important;
    border: 1px solid rgba(255, 255, 255, .20) !important;
    color: var(--vp-hs-ink) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: background .18s, border-color .18s !important;
}
#bottomStrip.dock #audioPlayer #audioPlayPause.audio-pp:hover {
    background: rgba(255, 255, 255, .18) !important;
    border-color: rgba(255, 255, 255, .30) !important;
}
/* Lucide-Glyphen (volume-x/volume-2) sind stroke-basiert — die frueheren
   fill/stroke-!important-Erzwingungen (fuer die alten gefuellten Play/Pause-
   Glyphen) sind entfernt. 16px statt 14px: der Umriss-Lautsprecher braucht
   die Flaeche, der 32px-Kreis traegt das ohne Grundlinien-Bruch. */
#bottomStrip.dock #audioPlayer #audioPlayPause.audio-pp svg {
    width: 16px !important;
    height: 16px !important;
    /* 1.7 = Strichstaerke der ganzen Oberflaeche (Rail, LocToggle). */
    stroke-width: 1.7 !important;
}

/* "Аудио"-Text-Label entfernt 2026-08-13 (User: «cleaner, nur runde
   Buttons») — Bedeutung traegt title/aria-label des Play-Buttons. */
#bottomStrip.dock #audioPlayer #audioPlayPause.audio-pp { order: 1; }
#bottomStrip.dock #audioPlayer #audioVolume.audio-vol { order: 3; }
#bottomStrip.dock #audioPlayer #audioMute.audio-mute { order: 4; }

/* Music-Icon in Editor's AmbientAudioPill ausblenden — Label "Аудио" ersetzt es. */
#bottomStrip.dock #audioPlayer.audio-player .lucide-music,
#bottomStrip.dock #audioPlayer.audio-player svg.lucide-music {
    display: none !important;
}

/* Volume-Slider — 84x4 white-Gradient, thumb 13x13 round white */
#bottomStrip.dock #audioPlayer #audioVolume.audio-vol {
    -webkit-appearance: none;
    appearance: none;
    width: 84px !important;
    height: 4px !important;
    border-radius: 999px;
    background: linear-gradient(to right, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .85) var(--vp-vol, 50%), rgba(255, 255, 255, .22) var(--vp-vol, 50%), rgba(255, 255, 255, .22) 100%);
    accent-color: #fff !important;
    cursor: pointer;
    margin: 0 12px 0 4px !important;
    outline: none;
}
#bottomStrip.dock #audioPlayer #audioVolume.audio-vol::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    border: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
    cursor: pointer;
}
#bottomStrip.dock #audioPlayer #audioVolume.audio-vol::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    border: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
    cursor: pointer;
}

/* Audio Mute-Button (kleines transparentes Glyph) */
#bottomStrip.dock #audioPlayer #audioMute.audio-mute {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--vp-hs-ink-dim) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: color .18s !important;
}
#bottomStrip.dock #audioPlayer #audioMute.audio-mute:hover {
    color: var(--vp-hs-ink) !important;
}
#bottomStrip.dock #audioPlayer #audioMute.audio-mute svg {
    width: 14px !important;
    height: 14px !important;
}

/* "Hidden"-State (viewer.js classList.add("hidden")) — Public-Viewer */
#bottomStrip.dock #audioPlayer.audio-player.hidden {
    display: none !important;
}

/* Empty-State "Без звука" Pille (Editor, kein audioUrl) — sieht wie .seg aus */
#bottomStrip.dock #audioPlayer.audio-player > .relative > button {
    height: 44px !important;
    padding: 0 16px 0 7px !important;
    border-radius: 999px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--vp-hs-ink-dim) !important;
    font-family: "Onest", "Inter", "Geist", system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
#bottomStrip.dock #audioPlayer.audio-player > .relative > button:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: var(--vp-hs-ink) !important;
}

/* Editor-Sticker (Pencil/Eye) am Audio bleiben sichtbar oben rechts.
   Wrapper "-top-3 -right-3" -> wir positionieren ihn ueber das Audio-Segment
   im Dock. */
#bottomStrip.dock #dockAudioSlot .absolute.-top-3.-right-3,
#bottomStrip.dock #dockAudioSlot [class~="-top-3"][class~="-right-3"] {
    top: -28px !important;
    right: -4px !important;
    z-index: 36;
}

/* ─── DOCKRIGHT — Navs (Prev/Next) + LocToggle ─── */
#bottomStrip.dock .dockright {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 0 auto;
}
#bottomStrip.dock .navs {
    display: flex;
    gap: 6px !important;
}
#bottomStrip.dock .navs button {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
    border: 1px solid var(--vp-hs-glass-line) !important;
    background: rgba(255, 255, 255, .04) !important;
    color: var(--vp-hs-ink) !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: .16s;
    padding: 0 !important;
}
#bottomStrip.dock .navs button:hover {
    background: rgba(255, 255, 255, .12) !important;
    color: var(--vp-hs-ink) !important;
}
#bottomStrip.dock .navs svg {
    width: 16px !important;
    height: 16px !important;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* LocToggle */
#bottomStrip.dock .loctoggle {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    height: 40px !important;
    padding: 0 14px !important;
    border: 1px solid var(--vp-hs-glass-line) !important;
    background: rgba(255, 255, 255, .04) !important;
    cursor: pointer !important;
    border-radius: 12px !important;
    color: var(--vp-hs-ink) !important;
    font-family: "Onest", "Inter", "Geist", system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: .16s !important;
    white-space: nowrap;
}
#bottomStrip.dock .loctoggle:hover {
    background: rgba(255, 255, 255, .1) !important;
}
#bottomStrip.dock .loctoggle .ti {
    width: 16px !important;
    height: 16px !important;
    fill: none;
    stroke: var(--vp-hs-ink-dim);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
#bottomStrip.dock .loctoggle .loctoggle-label {
    color: var(--vp-hs-ink);
}
#bottomStrip.dock .loctoggle .lc {
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    font-size: 11px !important;
    color: var(--vp-hs-ink-dim) !important;
    font-weight: 400 !important;
}
#bottomStrip.dock .loctoggle .lc b {
    color: var(--vp-hs-ink) !important;
    font-weight: 600 !important;
}
#bottomStrip.dock .loctoggle .chev {
    width: 16px !important;
    height: 16px !important;
    fill: none;
    stroke: var(--vp-hs-ink);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Share-Button im Dockbar (rechts neben LocToggle) — Icon-Square, matches .navs */
#bottomStrip.dock .dock-share-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    border: 1px solid var(--vp-hs-glass-line) !important;
    background: rgba(255, 255, 255, .04) !important;
    color: var(--vp-hs-ink) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: background .16s, color .16s !important;
    flex: 0 0 40px !important;
}
#bottomStrip.dock .dock-share-btn:hover {
    background: rgba(255, 255, 255, .12) !important;
}
#bottomStrip.dock .dock-share-btn svg {
    width: 16px !important;
    height: 16px !important;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ─── Editor-Sticker (.dock-edit-sticker) am Dock — Pencil + Eye fuer Strip-Sichtbarkeit. */
html.strip-mode #bottomStrip .dock-edit-sticker {
    position: absolute !important;
    top: -12px !important;
    right: 12px !important;
    z-index: 36 !important;
}

/* Im strip-mode den Popup-Selector (Кнопка) ausblenden */
html.strip-mode #sceneSelector {
    display: none !important;
}

/* Safety-Net: Legacy #sceneSelector (Floating-Button + Popup) ist im neuen
   Dock-Design IMMER ersetzt — auch bevor viewer.js die Mode-Klasse setzt
   (Race zwischen SSR-HTML und JS-Init). Bleibt nur sichtbar wenn explizit
   ein Mode-loser Fallback-Pfad das Legacy-Markup forced. */
html:not(.strip-mode):not(.popup-mode) #sceneSelector {
    display: none !important;
}

/* Safety-Net: Scenepanel (V2) ist Default-`is-open` im SSR-Markup, damit
   viewer.js sie nicht erst per JS oeffnen muss. Ohne popup-mode-Klasse
   wuerde sie sonst als Default-Block mittig auf dem Panorama erscheinen. */
html:not(.popup-mode) #scenePanel,
html:not(.popup-mode) #bottomStrip .scenepanel {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────────
 * V2 — POPUP-DOCK (sceneListMode "popup")
 *
 * Markup folgt 1:1 dem Handoff `VPano Panorama UI v2.html`:
 *   #bottomStrip.dock           (gleiche unified Glass-Pille wie V1)
 *     #scenePanel.scenepanel    — vertikales Panel ueber LocToggle
 *       .sphead                 — Header (Folder-Icon + Label + Counter)
 *       #splist.splist          — Liste mit .srow-Buttons
 *     .dockbar                  — gleiche Bottom-Bar wie V1
 *       .pbgroup                — Tour-Slot + .pdiv + Audio-Slot (unveraendert)
 *       .dockright              — NUR LocToggle (KEIN Prev/Next in V2)
 *
 * Greift NUR wenn html.popup-mode aktiv ist. Track (#sceneList) und Navs
 * (#dockNavs) werden ausgeblendet. Audio-/Tour-/LocToggle-Styles werden
 * von der strip-mode-Sektion uebernommen, indem die Selektoren hier
 * dupliziert werden (gleiche Specs, anderer Mode-Prefix).
 * ───────────────────────────────────────────────────────────────── */

/* Im popup-mode auch alle Legacy-Wrapper im Dock verstecken. */
html.popup-mode #bottomStrip > .relative,
html.popup-mode #bottomStrip > .strip-scenes-outer,
html.popup-mode #bottomStrip .dock-legacy-toggle,
html.popup-mode #bottomStrip .dock-legacy-arrow {
    display: none !important;
}

/* Dock-Pille (identisch zu strip-mode, leicht andere Width-Constraint:
   Im V2 ist der Dock thinner, weil keine Cards drin sind). */
html.popup-mode #bottomStrip.dock {
    position: absolute !important;
    left: 50% !important;
    bottom: 22px !important;
    transform: translateX(-50%) !important;
    z-index: 30 !important;
    width: min(720px, calc(100% - 48px)) !important;
    background: var(--vp-hs-glass) !important;
    backdrop-filter: var(--vp-hs-blur, saturate(1.4) blur(20px)) !important;
    -webkit-backdrop-filter: var(--vp-hs-blur, saturate(1.4) blur(20px)) !important;
    border: 1px solid var(--vp-hs-glass-line) !important;
    border-radius: 20px !important;
    box-shadow: var(--vp-hs-shadow) !important;
    padding: 12px !important;
    overflow: visible !important;
}

/* Im popup-mode IMMER Track ausblenden (auch wenn populiert). */
html.popup-mode #bottomStrip .track,
html.popup-mode #bottomStrip #sceneList,
html.popup-mode #bottomStrip .strip-scenes {
    display: none !important;
}

/* Auch dockNavs (Prev/Next) im V2 NICHT — Handoff hat NUR LocToggle rechts. */
html.popup-mode #bottomStrip .navs,
html.popup-mode #bottomStrip #dockNavs {
    display: none !important;
}

/* ─── Scenepanel (vertikales Popup ueber LocToggle) ─── */
html.popup-mode #bottomStrip .scenepanel,
html.popup-mode #bottomStrip #scenePanel {
    position: absolute !important;
    right: 12px !important;
    bottom: calc(100% + 12px) !important;
    z-index: 25 !important;
    width: 300px !important;
    max-height: 60vh !important;
    flex-direction: column !important;
    background: var(--vp-hs-glass-strong, rgba(13, 17, 28, .74)) !important;
    backdrop-filter: var(--vp-hs-blur, saturate(1.4) blur(20px)) !important;
    -webkit-backdrop-filter: var(--vp-hs-blur, saturate(1.4) blur(20px)) !important;
    border: 1px solid var(--vp-hs-glass-line) !important;
    border-radius: 18px !important;
    box-shadow: var(--vp-hs-shadow) !important;
    overflow: hidden !important;
}

/* Scenepanel-Sichtbarkeit per Class:
   .scenepanel.is-open => display:flex (gezeigt)
   .scenepanel:not(.is-open) => display:none (versteckt)
   Default: open (analog Handoff JS-Default). */
html.popup-mode #bottomStrip .scenepanel.is-open,
html.popup-mode #bottomStrip #scenePanel.is-open {
    display: flex !important;
}
html.popup-mode #bottomStrip .scenepanel:not(.is-open),
html.popup-mode #bottomStrip #scenePanel:not(.is-open) {
    display: none !important;
}

/* Header der Scenepanel (Folder-Icon + Label + Counter) */
html.popup-mode #bottomStrip .scenepanel .sphead {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 15px 18px 12px;
    font-family: "Onest", "Inter", "Geist", system-ui, sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--vp-hs-ink);
    flex: 0 0 auto;
}
html.popup-mode #bottomStrip .scenepanel .sphead svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--vp-hs-ink-dim);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}
html.popup-mode #bottomStrip .scenepanel .sphead .cnt {
    margin-left: auto;
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--vp-hs-ink-dim);
    font-weight: 400;
}
html.popup-mode #bottomStrip .scenepanel .sphead .cnt b {
    color: var(--vp-hs-ink);
    font-weight: 600;
}

/* Splist — Scroll-Container fuer .srow-Buttons */
html.popup-mode #bottomStrip .splist,
html.popup-mode #bottomStrip #splist {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0 12px 14px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .2) transparent;
    flex: 1 1 auto;
}
html.popup-mode #bottomStrip .splist::-webkit-scrollbar,
html.popup-mode #bottomStrip #splist::-webkit-scrollbar {
    width: 6px;
}
html.popup-mode #bottomStrip .splist::-webkit-scrollbar-thumb,
html.popup-mode #bottomStrip #splist::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);
    border-radius: 999px;
}

/* SRow — einzelne Szenen-Zeile */
html.popup-mode #bottomStrip .srow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    background: transparent;
    color: var(--vp-hs-ink);
    transition: background .16s, border-color .16s;
    width: 100%;
    text-align: left;
    font-family: inherit;
}
html.popup-mode #bottomStrip .srow:hover {
    background: rgba(255, 255, 255, .07);
}
html.popup-mode #bottomStrip .srow.cur {
    border-color: rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .10);
}

/* Thumbnail mit Index-Badge */
html.popup-mode #bottomStrip .srow .sthumb {
    width: 62px;
    height: 42px;
    border-radius: 8px;
    flex: 0 0 62px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, .06);
    position: relative;
    border: 1px solid var(--vp-hs-glass-line-soft, rgba(255, 255, 255, .08));
    overflow: hidden;
}
html.popup-mode #bottomStrip .srow .sthumb i {
    position: absolute;
    left: 4px;
    bottom: 4px;
    font-style: normal;
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 8px;
    color: var(--vp-hs-ink);
    background: rgba(8, 11, 18, .72);
    padding: 1px 4px;
    border-radius: 4px;
    line-height: 1;
    font-weight: 500;
}

/* Name-Block: kleines Eyebrow + Title */
html.popup-mode #bottomStrip .srow .sname {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
    flex: 1 1 auto;
}
html.popup-mode #bottomStrip .srow .sname span {
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 8px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--vp-hs-ink-dim);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html.popup-mode #bottomStrip .srow .sname b {
    font-family: "Onest", "Inter", "Geist", system-ui, sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--vp-hs-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -.01em;
}

/* Im popup-mode den Floating-SceneSelector (Legacy) auch ausblenden —
   der Dock uebernimmt die Scene-Liste. */
html.popup-mode #sceneSelector {
    display: none !important;
}

/* Audio + Tour + LocToggle im V2 ueberblenden die strip-mode-Regeln nicht;
   sie greifen weiterhin via html.strip-mode-Selektoren. Wir spiegeln hier
   die wichtigsten Bottom-Bar-Regeln auch fuer popup-mode (gleiche Specs). */
html.popup-mode #bottomStrip .dockbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 0 2px !important;
}
html.popup-mode #bottomStrip .pbgroup {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 1 1 auto;
    min-width: 0;
}
html.popup-mode #bottomStrip .pdiv {
    width: 1px !important;
    height: 24px !important;
    background: var(--vp-hs-glass-line-soft, rgba(255, 255, 255, .08)) !important;
    margin: 0 3px !important;
    flex: 0 0 auto;
}
html.popup-mode #bottomStrip .dock-slot {
    display: flex;
    align-items: center;
}
html.popup-mode #bottomStrip .dock-slot:empty {
    display: none !important;
}
html.popup-mode #bottomStrip .pbgroup:not(:has(.dock-slot-tour > *)):not(:has(.dock-slot-audio > *)):not(:has(.dock-slot-rail > *)) {
    display: none !important;
}
html.popup-mode #bottomStrip .pbgroup:not(:has(.dock-slot-tour > *)) .pdiv,
html.popup-mode #bottomStrip .pbgroup:not(:has(.dock-slot-audio > *)) .pdiv {
    display: none !important;
}
html.popup-mode #bottomStrip .dockright {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 0 auto;
    position: relative; /* scenepanel haengt sich an .dock, aber dockright ist auch akzeptabel. */
}
html.popup-mode #bottomStrip .loctoggle {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    height: 40px !important;
    padding: 0 14px !important;
    border: 1px solid var(--vp-hs-glass-line) !important;
    background: rgba(255, 255, 255, .04) !important;
    cursor: pointer !important;
    border-radius: 12px !important;
    color: var(--vp-hs-ink) !important;
    font-family: "Onest", "Inter", "Geist", system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: .16s !important;
    white-space: nowrap;
}
html.popup-mode #bottomStrip .loctoggle:hover {
    background: rgba(255, 255, 255, .1) !important;
}
html.popup-mode #bottomStrip .loctoggle.on {
    background: rgba(255, 255, 255, .12) !important;
}
html.popup-mode #bottomStrip .loctoggle .ti {
    width: 16px !important;
    height: 16px !important;
    fill: none;
    stroke: var(--vp-hs-ink-dim);
    stroke-width: 1.7;
}
html.popup-mode #bottomStrip .loctoggle .loctoggle-label {
    color: var(--vp-hs-ink);
}
html.popup-mode #bottomStrip .loctoggle .lc {
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
    font-size: 11px !important;
    color: var(--vp-hs-ink-dim) !important;
    font-weight: 400 !important;
}
html.popup-mode #bottomStrip .loctoggle .lc b {
    color: var(--vp-hs-ink) !important;
    font-weight: 600 !important;
}
html.popup-mode #bottomStrip .loctoggle .chev {
    width: 16px !important;
    height: 16px !important;
    fill: none;
    stroke: var(--vp-hs-ink);
    stroke-width: 2;
}

/* Editor-Sticker (Pencil + Eye) am Dock auch im popup-mode oben rechts. */
html.popup-mode #bottomStrip .dock-edit-sticker {
    position: absolute !important;
    top: -12px !important;
    right: 12px !important;
    z-index: 36 !important;
}

/* ─────────────────────────────────────────────────────────────
 * MOBILE (≤ 640px) — 1:1 nach Handoff
 *   `logo design/design_handoff_panorama_ui/VPano Panorama UI - Mobile.html`
 *
 * Strategie (Option C — pragmatisch, CSS-only):
 *   - TopBar: .top-left/.top-center/.top-right werden auf Handoff-Maße
 *     getrimmt; der Pin (.top-center::before) wird auf Mobile entfernt
 *     (Handoff hat keinen Pin in .scene).
 *   - Right Rail: 14px Inset, Buttons 42x42, Radius 11/16 — Auto-Rotate/
 *     Gyro/VR/Map bleiben sichtbar (User-Vorgabe "Funktionen bleiben").
 *   - Bottom Dock: Cards 124x72 (Handoff-Werte), Audio-Volume-Slider
 *     versteckt (Mute reicht auf Touch), "Локации тура"-Label im
 *     LocToggle versteckt. Tour-CTA + Audio-Pille bleiben in der
 *     dockbar (kein Strip-Header-Reflow — bewusster Funktion-Erhalt).
 *   - NavArrow existiert nicht in unserem DOM — skip.
 * ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* ─── TOPBAR — Handoff `.top` (top:60px, left/right:14, gap:10) ─── */
    #topBar {
        top: 14px !important;
        left: 14px !important;
        right: 14px !important;
        gap: 10px !important;
        flex-wrap: nowrap;
        align-items: center !important;
    }

    /* Logo (naked) — keine Pille, KEINE feste Höhe (sonst Editor-Sticker
       Pencil/Eye bei -top-3 abgeschnitten). Höhe ergibt sich aus dem Bild. */
    #topBar .top-left {
        padding: 0 !important;
        gap: 10px !important;
        border-radius: 0 !important;
        flex: 0 0 auto !important;
    }
    #projectLogo {
        max-width: 80px !important;
    }
    /* Optionaler Map-Btn (mobile-only legacy) — auf 38x38 lassen, Inset in der Pille */
    #topBar .top-left .icon-button {
        width: 38px !important;
        height: 38px !important;
        border-radius: 11px !important;
    }

    /* Scene-Pille (.scene) — 46h, padding 0 14, radius 14, KEIN Pin */
    #topBar .top-center {
        height: 46px !important;
        padding: 0 14px !important;
        gap: 10px !important;
        border-radius: 14px !important;
        min-width: 0;
        flex: 1 1 auto !important;
    }
    /* Pin auf Mobile entfernen — Handoff `.scene` hat keinen Pin */
    #topBar .top-center::before {
        display: none !important;
    }
    /* Eyebrow "Локация" — Handoff 8px tracking .16em */
    #title::before {
        font-size: 8px !important;
        letter-spacing: .16em !important;
        margin-bottom: 1px !important;
    }
    /* Title — Handoff 13px Onest 600 */
    #title {
        font-size: 13px !important;
        max-width: 100%;
    }
    /* Counter im Scene-Chip — Handoff 10px */
    #topBar .top-center[data-scene-total]:not([data-scene-total=""])::after {
        font-size: 10px !important;
        margin-left: 4px !important;
        padding-left: 9px !important;
    }

    /* Top-Right Cluster — Handoff hat dort einen STANDALONE 46x46 Info-Btn
       (.ubtn). Wir behalten den Toprail-Cluster (Funktionen Info+Share+BC),
       trimmen ihn aber auf Handoff-naehere Werte:
        - 46h, padding 4 (passt fuer 38px-Buttons), radius 13. */
    #topBar .top-right {
        padding: 4px !important;
        gap: 4px !important;
        border-radius: 13px !important;
    }
    #topBar .top-right .tool-buttons {
        gap: 4px !important;
    }
    #topBar .top-right .icon-button,
    #projectInfoBtn.ghost-button {
        width: 38px !important;
        height: 38px !important;
        border-radius: 11px !important;
    }
    #topBar .top-right .icon-button svg {
        width: 19px !important;
        height: 19px !important;
    }
    #projectInfoBtn.ghost-button::before {
        background-size: 19px 19px;
    }

    /* TitleOverlay (fallback Pille) folgt Scene-Pille */
    #titleOverlay {
        top: 14px;
        padding: 6px 14px;
        font-size: 13px;
        border-radius: 14px;
    }

    /* ─── RIGHT MINI-RAIL — Handoff `.rail` ─────────────────────────
       right:14, padding:5, gap:4, radius:16
       Buttons 42x42, radius 11
       SVG 19px
       Auto-Rotate/Gyro/VR/Map bleiben sichtbar (User: keine Funktion entfernen) */
    #controlsToolbar {
        right: 14px !important;
        padding: 5px !important;
        gap: 4px !important;
        border-radius: 16px !important;
    }
    #controlsToolbar .icon-button:not(.vp-sticker),
    #controlsToolbar > div > button:not(.vp-sticker),
    #controlsToolbar > button:not(.vp-sticker) {
        width: 42px !important;
        height: 42px !important;
        border-radius: 11px !important;
    }
    #controlsToolbar .icon-button svg,
    #controlsToolbar > div > button svg,
    #controlsToolbar > button svg {
        width: 19px !important;
        height: 19px !important;
        stroke-width: 1.7 !important;
    }
    /* Falls Tour-Btn als Legacy noch in der Rail liegt (alte Exporte): klein halten */
    #controlsToolbar #tourPlayBtn,
    #controlsToolbar #tourStopBtn {
        margin-bottom: 4px;
    }
    #controlsToolbar #tourPlayBtn svg,
    #controlsToolbar #tourStopBtn svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* ─── V1 BOTTOM DOCK — Handoff `.dock` (left/right:14, bottom:22) ───
       Dock-Pille selbst nutzt `.strip`-Werte (padding 11/11/12, radius 18).
       Cards: 124x72, cap padding 6/9. Audio-Vol-Slider verbergen (Mute reicht).
       LocToggle: "Локации тура"-Label verstecken. */
    html.strip-mode #bottomStrip.dock {
        left: 14px !important;
        right: 14px !important;
        bottom: 14px !important;
        width: auto !important;
        transform: none !important;
        padding: 8px 8px 8px !important;
        border-radius: 18px !important;
        gap: 9px !important;
    }

    /* Track gap 9px (Handoff) */
    html.strip-mode #bottomStrip .track,
    html.strip-mode #bottomStrip #sceneList {
        gap: 9px !important;
        padding: 1px !important;
    }

    /* Cards 124x72 (Handoff `.card`) */
    html.strip-mode #bottomStrip .scene-card,
    html.strip-mode #bottomStrip .card {
        flex: 0 0 112px !important;
        width: 112px !important;
        border-radius: 11px !important;
        /* Genau auf den Inhalt gerechnet, damit weder eine Luecke noch ein
           Abschneiden entsteht: 128 = 100 Thumb + einzeilige Caption
           (12 Padding + 14 Zeile) + 2 Rand. Laengere Titel lassen die Karte
           weiter wachsen (Caption ist flex:1). */
        min-height: 128px !important;
    }
    html.strip-mode #bottomStrip .scene-card .scene-thumb,
    html.strip-mode #bottomStrip .scene-card > img,
    html.strip-mode #bottomStrip .card .img {
        height: 100px !important;
        flex: 0 0 100px !important;
    }
    /* Caption — padding 6/9, title 11px (Handoff `.cap b` Manrope 11), span 8px */
    html.strip-mode #bottomStrip .scene-card .scene-title,
    html.strip-mode #bottomStrip .card .cap {
        padding: 6px 9px !important;
    }
    html.strip-mode #bottomStrip .scene-card .scene-title b,
    html.strip-mode #bottomStrip .card .cap b {
        font-size: 11px !important;
    }
    html.strip-mode #bottomStrip .scene-card .scene-title .se,
    html.strip-mode #bottomStrip .scene-card .scene-title > span,
    html.strip-mode #bottomStrip .card .cap span {
        font-size: 8px !important;
        letter-spacing: .1em !important;
    }
    html.strip-mode #bottomStrip .card.cur::after {
        border-radius: 11px !important;
    }

    /* Dockbar kompakter — Tour-Seg + Audio-Seg bleiben gemeinsam in einer Reihe */
    #bottomStrip.dock .dockbar {
        gap: 8px !important;
    }
    #bottomStrip.dock .pbgroup {
        gap: 8px !important;
    }
    #bottomStrip.dock .seg,
    #bottomStrip.dock #dockTourSlot > button {
        height: 38px !important;
        padding: 0 4px !important;
        font-size: 12px !important;
    }
    #bottomStrip.dock .seg .ico {
        box-sizing: border-box !important;
        width: 30px !important;
        height: 30px !important;
        flex: 0 0 30px !important;
    }
    #bottomStrip.dock .seg .ico svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* Tour + Audio Mobile: seit 2026-08-13 OHNE Eyebrow-Labels («AUTO TOUR»/
       «АУДИО» entfernt, User: cleaner) — beide sind schlichte 38px-Pillen mit
       28px-Kreis, exakt auf einer Linie mit LocToggle (38px) und den uebrigen
       Dock-Elementen. Das Vertikal-Popup fuer Lautstaerke (.vol-open) bleibt
       unveraendert — es haengt absolut an der Pille. */
    #bottomStrip.dock #audioPlayer.audio-player {
        align-items: center !important;
        justify-content: center !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 4px !important;
        position: relative !important;
        cursor: pointer;
        box-sizing: border-box !important;
    }
    #bottomStrip.dock #audioPlayer #audioPlayPause.audio-pp {
        box-sizing: border-box !important;
        width: 30px !important;
        height: 30px !important;
        flex: 0 0 30px !important;
    }
    #bottomStrip.dock #audioPlayer #audioPlayPause.audio-pp svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* Default: Slider + Mute inline AUSBLENDEN (sie wandern in den Popup) */
    #bottomStrip.dock #audioPlayer #audioVolume.audio-vol,
    #bottomStrip.dock #audioPlayer #audioMute.audio-mute {
        display: none !important;
    }

    /* ─── Vertikal-Popup (`.audio-player.vol-open`) ───
       Glass-Tube oberhalb der Pille, enthaelt rotated Slider + Mute.
       ::after ist der Tube-Background, Slider/Mute werden absolut platziert. */
    #bottomStrip.dock #audioPlayer.audio-player.vol-open::after {
        content: "";
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        width: 56px;
        height: 220px;
        background: var(--vp-hs-glass-strong, rgba(13, 17, 28, .82));
        border: 1px solid var(--vp-hs-glass-line);
        border-radius: 18px;
        box-shadow: var(--vp-hs-shadow);
        backdrop-filter: var(--vp-hs-blur);
        -webkit-backdrop-filter: var(--vp-hs-blur);
        z-index: 30;
        pointer-events: none;
    }
    /* Slider (rotated -90deg) — vertikal, oben = laut */
    #bottomStrip.dock #audioPlayer.audio-player.vol-open #audioVolume.audio-vol {
        display: block !important;
        position: absolute !important;
        bottom: calc(100% + 50px) !important;
        left: 50% !important;
        width: 160px !important;
        height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translate(-50%, 0) rotate(-90deg) !important;
        transform-origin: center !important;
        background: transparent !important;
        z-index: 31;
        accent-color: #fff !important;
        touch-action: none;
    }
    #bottomStrip.dock #audioPlayer.audio-player.vol-open #audioVolume.audio-vol::-webkit-slider-runnable-track {
        height: 4px !important;
        border-radius: 999px !important;
        background: linear-gradient(to right, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .85) var(--vp-vol, 50%), rgba(255, 255, 255, .22) var(--vp-vol, 50%), rgba(255, 255, 255, .22) 100%) !important;
    }
    #bottomStrip.dock #audioPlayer.audio-player.vol-open #audioVolume.audio-vol::-moz-range-track {
        height: 4px !important;
        border-radius: 999px !important;
        background: linear-gradient(to right, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .85) var(--vp-vol, 50%), rgba(255, 255, 255, .22) var(--vp-vol, 50%), rgba(255, 255, 255, .22) 100%) !important;
    }
    #bottomStrip.dock #audioPlayer.audio-player.vol-open #audioVolume.audio-vol::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 22px !important;
        height: 22px !important;
        border-radius: 50% !important;
        background: #fff !important;
        border: 0 !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .55) !important;
        margin-top: -9px !important;
        cursor: pointer;
    }
    #bottomStrip.dock #audioPlayer.audio-player.vol-open #audioVolume.audio-vol::-moz-range-thumb {
        width: 22px !important;
        height: 22px !important;
        border-radius: 50% !important;
        background: #fff !important;
        border: 0 !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .55) !important;
        cursor: pointer;
    }
    /* Mute unten im Popup */
    #bottomStrip.dock #audioPlayer.audio-player.vol-open #audioMute.audio-mute {
        display: flex !important;
        position: absolute !important;
        bottom: calc(100% + 18px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 34px !important;
        height: 34px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, .08) !important;
        border: 1px solid rgba(255, 255, 255, .20) !important;
        color: var(--vp-hs-ink) !important;
        z-index: 31;
    }
    #bottomStrip.dock #audioPlayer.audio-player.vol-open #audioMute.audio-mute svg {
        width: 16px !important;
        height: 16px !important;
    }
    /* Empty-State "Без звука" Pille (Editor) — Höhe angleichen */
    #bottomStrip.dock #audioPlayer.audio-player > .relative > button {
        height: 38px !important;
        padding: 0 12px 0 5px !important;
        font-size: 12px !important;
    }
    #bottomStrip.dock #audioPlayer.audio-player > .relative > div:not(.absolute),
    #bottomStrip.dock #audioPlayer.audio-player.glass,
    #bottomStrip.dock #audioPlayer.audio-player:not(:has(> .relative)) {
        height: 38px !important;
        /* Symmetrisch wie die Tour-Pille: das alte 10/5-Padding stammte aus
           dem Label-Layout und machte den Audio-Knopf breiter als den
           Autotour-Knopf (Design-Durchgang 2026-08-13). */
        padding: 0 4px !important;
    }

    /* LocToggle — kompakter, Label verstecken (Handoff hat nur Icon+Counter) */
    #bottomStrip.dock .loctoggle .loctoggle-label {
        display: none !important;
    }
    #bottomStrip.dock .loctoggle {
        height: 38px !important;
        padding: 0 10px !important;
        gap: 6px !important;
        font-size: 12px !important;
        border-radius: 11px !important;
    }
    /* Navs (Prev/Next) — auf Mobile komplett ausblenden (Handoff-Vorgabe,
       User-Bestaetigung): nur Touch-Scroll + LocToggle. Greift in beiden Modi. */
    #bottomStrip.dock .navs,
    #bottomStrip.dock #dockNavs {
        display: none !important;
    }
    /* Dockright kompakter zusammen */
    #bottomStrip.dock .dockright {
        gap: 6px !important;
    }
    /* Share auf dieselbe Hoehe/Radius wie LocToggle (38/11) — er stand als
       einziges Element der Reihe auf 40/12 (Design-Durchgang 2026-08-13). */
    #bottomStrip.dock .dock-share-btn {
        width: 38px !important;
        height: 38px !important;
        flex: 0 0 38px !important;
        border-radius: 11px !important;
    }

    /* ─── V2 POPUP-DOCK MOBILE ───
       Dock-Pille auf 14/14/22-Inset, Scenepanel auf 86vw begrenzen,
       "Локации тура"-Label im Toggle verstecken, Audio-Vol-Slider weg
       (greift via Selektoren oben). */
    html.popup-mode #bottomStrip.dock {
        left: 14px !important;
        right: 14px !important;
        bottom: 22px !important;
        width: auto !important;
        transform: none !important;
        padding: 11px !important;
        border-radius: 18px !important;
    }
    html.popup-mode #bottomStrip .scenepanel,
    html.popup-mode #bottomStrip #scenePanel {
        width: 100% !important;
        right: 0 !important;
        max-height: 60vh !important;
    }
    html.popup-mode #bottomStrip .scenepanel .sphead {
        padding: 12px 14px 10px !important;
        font-size: 12.5px !important;
    }
    html.popup-mode #bottomStrip .splist,
    html.popup-mode #bottomStrip #splist {
        padding: 0 10px 12px !important;
    }
    html.popup-mode #bottomStrip .loctoggle .loctoggle-label {
        display: none !important;
    }
    html.popup-mode #bottomStrip .loctoggle {
        height: 38px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
        border-radius: 11px !important;
    }
}

/* ═════════════════════════════════════════════════════════════
   Этажи (Stockwerke) — Umschalter oben rechts + Trenner in den Listen.
   Erscheint nur, wenn die Tour mindestens zwei belegte Etagen hat; sonst
   erzeugt storey-switcher.js gar kein DOM.

   Nutzt ausschliesslich vorhandene --vp-hs-* Tokens, damit alle vier Themes
   (hell/dunkel/glass/minimal) ohne weitere Pflege stimmen.
   ═════════════════════════════════════════════════════════════ */

#storeySwitcher {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 7px;
    border-radius: 16px;
    background: var(--vp-hs-glass);
    border: 1px solid var(--vp-hs-glass-line);
    box-shadow: var(--vp-hs-sh);
    backdrop-filter: var(--vp-hs-blur);
    -webkit-backdrop-filter: var(--vp-hs-blur);
    color: var(--vp-hs-ink);
    pointer-events: auto;
    flex: 0 0 auto;
}
#storeySwitcher[hidden] {
    display: none;
}

.vp-storey-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--vp-hs-ink-dim);
    flex: 0 0 auto;
}
.vp-storey-icon svg {
    width: 16px;
    height: 16px;
}

.vp-storey-seg,
.vp-storey-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    border: none;
    border-radius: 11px;
    background: transparent;
    color: var(--vp-hs-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}
.vp-storey-seg:hover,
.vp-storey-trigger:hover {
    background: var(--vp-hs-glass-strong);
}
.vp-storey-seg.is-active {
    background: var(--vp-hs-fill);
    color: var(--vp-hs-on-fill);
}
.vp-storey-seg:focus-visible,
.vp-storey-trigger:focus-visible {
    outline: 2px solid var(--vp-hs-fill);
    outline-offset: 2px;
}

.vp-storey-trigger-label {
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vp-storey-caret {
    font-size: 10px;
    opacity: 0.6;
}

/* Die Liste haengt an <body>, nicht in der Pille: backdrop-filter erzeugt einen
   neuen Containing-Block, in dem position:fixed relativ zur Pille laege. */
.vp-storey-list {
    position: fixed;
    z-index: 60;
    min-width: 168px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-radius: 14px;
    background: var(--vp-hs-glass-strong);
    border: 1px solid var(--vp-hs-glass-line);
    box-shadow: var(--vp-hs-sh);
    backdrop-filter: var(--vp-hs-blur);
    -webkit-backdrop-filter: var(--vp-hs-blur);
    color: var(--vp-hs-ink);
}
.vp-storey-list[hidden] {
    display: none;
}

.vp-storey-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.vp-storey-item:hover {
    background: var(--vp-hs-glass);
}
.vp-storey-item.is-active {
    background: var(--vp-hs-fill);
    color: var(--vp-hs-on-fill);
}
.vp-storey-item-short {
    flex: 0 0 auto;
    min-width: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    opacity: 0.75;
}
.vp-storey-item.is-active .vp-storey-item-short {
    opacity: 1;
}
.vp-storey-item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Etagen-Trenner in Szenenstreifen und Szenenliste. */
.scene-storey-divider {
    display: flex;
    align-items: center;
    align-self: stretch;
    padding: 0 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--vp-hs-ink-dim);
    border-left: 1px solid var(--vp-hs-glass-line);
    flex: 0 0 auto;
}
.scene-storey-divider:first-child {
    border-left: none;
    padding-left: 4px;
}

.scene-selector-storey-divider {
    padding: 8px 10px 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--vp-hs-ink-dim);
}

/* Mobil: nur Icon + Kurzlabel, Trefferflaeche bleibt 44px hoch. */
@media (max-width: 640px) {
    #storeySwitcher {
        padding: 4px 6px;
        gap: 2px;
    }
    .vp-storey-seg,
    .vp-storey-trigger {
        min-width: 40px;
        height: 40px;
        padding: 0 8px;
    }
    .vp-storey-trigger-label {
        max-width: 62px;
    }
}

/* ─── KOMPAKTE ANSICHT AUF DEM HANDY: Rail in der unteren Leiste ───────────
   Dieselbe Konsolidierung wie auf dem Desktop — eine Bedienflaeche statt
   schwebender Rail rechts plus Leiste unten. Moeglich wird das erst dadurch,
   dass Tour- und Audio-Pille in beiden kompakten Faellen (Clean-Modus und
   Minimal-Themes) wegfallen: die Leiste traegt dann nur noch die Rail und den
   Locations-Umschalter — im Minimal zusaetzlich den Teilen-Knopf.
   Ob die Reihe in EINE Zeile passt, entscheidet viewer.js durch Messen
   (reflowCleanControls). Passt sie nicht, kommt `.vp-dock-wrap` an die Dockbar
   und die Leiste wird zweizeilig — die Rail bleibt unten. Zurueck an den
   rechten Rand geht sie mobil nicht mehr: auf einem 390er-Geraet fehlen typisch
   18px, und dafuer wieder zwei Bedienflaechen zu zeigen waere genau das Bild,
   das der Kunde mit dem Theme abgewaehlt hat.
   Steht bewusst am Dateiende, NACH den Desktop-Regeln (~Z. 930-990) und der
   grossen Mobile-Query: die zwei Breiten-Regeln von dort muessen hier
   zurueckgenommen werden.
   ACHTUNG: diese Datei existiert dreifach (Master in frontend/src/styles/ +
   zwei Viewer-Kopien) und wird NICHT automatisch gespiegelt — von Hand
   gleich halten. */
@media (max-width: 640px) {
    /* Kein Trennstrich links: ohne Tour/Audio steht die Rail als erstes in der
       Leiste, ein Strich haette nichts zu trennen. */
    #controlsToolbar.vp-rail-in-dock {
        margin-left: 0 !important;
        padding: 0 !important;
        border-left: 0 !important;
        gap: 2px !important;
    }
    /* 36px statt 40px (Desktop-Dock) bzw. 42px (schwebende Rail) — damit auch
       auf 360px-Geraeten fuenf Knoepfe neben den Umschalter passen. Die
       Trefferflaeche bleibt ueber der 36px-Grenze der Handoff-Vorgabe. */
    #controlsToolbar.vp-rail-in-dock .icon-button:not(.vp-sticker),
    #controlsToolbar.vp-rail-in-dock > button:not(.vp-sticker) {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
    }
    #controlsToolbar.vp-rail-in-dock :where(button:not(.vp-sticker)) svg {
        width: 17px !important;
        height: 17px !important;
    }
    /* Die Desktop-Regel nagelt die Leiste auf mindestens 1040px bzw. schiebt sie
       bei offener Mini-Karte nach rechts. Mobil spannt die Leiste ohnehin ueber
       die volle Breite (left/right: 14px) — beides hier zuruecknehmen. */
    #bottomStrip.dock:has(#controlsToolbar) {
        min-width: 0 !important;
    }
    /* Die dritte Ausweich-Regel (Leiste ueber die volle Breite, sobald die
       Karte offen war) ist mit dem Anker ebenfalls entfallen. */

    /* Zweizeilig, wenn die Reihe nicht neben den Umschalter passt (viewer.js
       setzt .vp-dock-wrap): oben Umschalter und Teilen, darunter die Rail —
       zentriert, damit die Zeile nicht linksbuendig ins Leere laeuft. */
    #bottomStrip.dock .dockbar.vp-dock-wrap {
        flex-wrap: wrap !important;
        justify-content: center !important;
        row-gap: 6px !important;
    }
    #bottomStrip.dock .dockbar.vp-dock-wrap .dockright {
        order: 1 !important;
    }
    #bottomStrip.dock .dockbar.vp-dock-wrap .pbgroup {
        order: 2 !important;
        flex: 1 0 100% !important;
        justify-content: center !important;
    }
}

/* ─────────────────────────────────────────────────────────────
 * MINI-KARTE («мини-карта») — ein Anker: die untere Leiste
 *
 * Die Karte ist kein Eck-Moebel mehr. Sie klappt als Panel ueber der
 * Szenenleiste auf — linksbuendig, waehrend die Standortliste
 * (`#scenePanel`, weiter oben in dieser Datei) rechtsbuendig aufklappt.
 * Beide gehoeren damit sichtbar zur Leiste, keiner von beiden schwebt frei
 * im Bild.
 *
 * Getragen wird das von `--vp-dock-h`: viewer.js (bzw. EditorViewport)
 * misst die Hoehe der Leiste und schreibt sie an <html>. Die Karte sitzt
 * immer `--vp-dock-h` + 22px (Abstand der Leiste zum Rand) + 12px (Luft)
 * ueber der Unterkante — und folgt damit automatisch jedem Zustand der
 * Leiste: Karten-Reihe (strip), schmale Popup-Leiste, zweizeiliger Umbruch
 * auf dem Handy. Kein einziger Breakpoint, kein DOM-Umzug.
 *
 * Vorher: unten links ueber 1100px, per JS in die Standortliste einsortiert
 * unter 1100px, unten rechts unter 640px — drei Orte, dazu ein Laufzeit-
 * Umzug und drei !important-Regeln, die die Leiste verschoben.
 *
 * Diese Datei existiert DREIMAL (frontend/src/styles, frontend/public/
 * export-viewer, backend/src/templates/export-viewer/assets) und wird NICHT
 * automatisch gespiegelt — Aenderungen von Hand in allen drei gleich halten.
 * ───────────────────────────────────────────────────────────── */

#minimapContainer,
.vp-map-anchor {
    position: absolute !important;
    /* 22px = `bottom` der Leiste, 12px = Luft zwischen Leiste und Karte. */
    bottom: calc(var(--vp-dock-h, 0px) + 34px) !important;
    left: var(--vp-map-left, 12px) !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    /* Ueber der Leiste im strip-Modus (z-20), unter Info-Panel (z-40). */
    z-index: 28 !important;
    border-radius: 18px !important;
    border: 1px solid var(--vp-hs-glass-line) !important;
    box-shadow: var(--vp-hs-sh) !important;
    overflow: hidden !important;
}

/* Groesse BEWUSST ohne `!important`: der Editor setzt im Bearbeiten-Modus
   eine breitere Karte per Inline-Style, und gegen `!important` kaeme er dort
   nicht an. Konkurrierende Regeln gibt es keine mehr — die alten Masse in
   style.css sind entfernt.
   Schrumpfen statt Wandern: auf schmalen Fenstern wird die Karte kleiner,
   ihr Platz bleibt derselbe. */
#minimapContainer {
    width: min(300px, calc(100vw - 28px));
    height: 240px;
    max-height: min(60vh, 320px);
}

/* Der Editor rendert Kopfzeile, Etagen-Reiter und Hinweise ueber dem Canvas —
   dort waere eine feste Hoehe ein Beschnitt. */
.vp-map-anchor {
    width: min(300px, calc(100vw - 28px));
    max-height: min(70vh, 520px);
}

/* Vergroessern ist ein zentriertes Overlay, kein wachsendes Eck-Element.
   Frueher blies `.enlarged` die Karte in der Ecke auf 560x440 auf und legte
   sich damit ueber die halbe Tour — und der Zustand ueberlebte im
   localStorage auch noch den Seitenwechsel. Geschlossen wird ueber dieselben
   zwei Knoepfe oben rechts in der Karte (Groesse zuruecknehmen / Karte zu). */
#minimapContainer.enlarged,
.vp-map-anchor.vp-map-enlarged {
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(720px, calc(100vw - 32px));
    height: min(560px, calc(100vh - 180px));
    max-height: none;
    z-index: 41 !important;
}

/* Sonderfall 1 — keine Szenenleiste (Liste aus oder nur eine Szene):
   dann gibt es nichts, woran die Karte haengen koennte. Sie ankert an ihrem
   eigenen Ausloeser, dem Karten-Knopf der rechten Rail, und oeffnet nach
   links. 96px = 24px Randabstand der Rail + 60px Rail-Breite + 12px Luft.
   Gesetzt wird `vp-no-dock` am <html> — im Viewer aus der gemessenen
   Leistenhoehe, im Editor aus dem FLAG (dort bleibt die Leiste im
   Bearbeiten-Modus als gedimmte Vorschau stehen, obwohl sie oeffentlich
   fehlt; sonst saehe der Kunde den Sonderfall nie). */
html.vp-no-dock #minimapContainer,
html.vp-no-dock .vp-map-anchor {
    left: auto !important;
    right: 96px !important;
    bottom: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

html.vp-no-dock #minimapContainer.enlarged,
html.vp-no-dock .vp-map-anchor.vp-map-enlarged {
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
}

/* Sonderfall 2 — Editor: links liegt das Szenen-Panel (14px Rand + 288px
   Breite). Es existiert in der veroeffentlichten Tour nicht, deshalb ist das
   die einzige Stelle, an der Editor und Tour bewusst auseinandergehen:
   302px Panel-Kante + 14px Luft. Ohne das laege die Karte exakt auf dem
   Panel — der Fall, den der Editor bisher hatte. */
[data-vp-editor="1"] {
    --vp-map-left: 316px;
}

/* Auf schmalen Editor-Fenstern verdeckt das Panel ohnehin fast alles;
   die Karte bleibt trotzdem an ihrem Platz statt zu springen. */
@media (max-width: 640px) {
    #minimapContainer,
    .vp-map-anchor {
        border-radius: 14px !important;
    }
}

/* ═════════════════════════════════════════════════════════════
   Skybox-Вариант-Knopf (.claude/plans/skybox-varianten.md, Phase 1c).
   Wird von viewer.js nur erzeugt, wenn die aktuelle Szene laut project.json
   eine Variante hat. Sitzt im #topBar direkt neben #storeySwitcher — gleiche
   Glass-Pille, gleiche --vp-hs-* Tokens, damit Etagen-Chips und Varianten-
   Knopf als eine Gruppe wirken (auch ohne Etagen an derselben Position).
   ═════════════════════════════════════════════════════════════ */

/* Gemeinsame Segmented-Pille: #vpTopPillGroup traegt das Glass-Chrome fuer
   Etagen-Umschalter UND Варианты-Knopf (viewer.js zieht #storeySwitcher beim
   ersten ensureVariantButton in die Gruppe). Metrik = exakt die der
   bisherigen #storeySwitcher-Pille. */
#vpTopPillGroup {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 7px;
    border-radius: 16px;
    background: var(--vp-hs-glass);
    border: 1px solid var(--vp-hs-glass-line);
    box-shadow: var(--vp-hs-sh);
    backdrop-filter: var(--vp-hs-blur);
    -webkit-backdrop-filter: var(--vp-hs-blur);
    color: var(--vp-hs-ink);
    pointer-events: auto;
    flex: 0 0 auto;
}
/* In der Gruppe verliert die Etagen-Pille ihr eigenes Chrome — sonst laege
   Glas auf Glas. Zwei IDs schlagen auch die Mobile-Padding-Regel oben. */
#vpTopPillGroup #storeySwitcher {
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    border-radius: 0;
}
/* Варианты-Segment: identische Metrik wie .vp-storey-seg (Hoehe, Radius,
   Padding, Font) — Aktiv-Zustand = gefuellte Flaeche wie der aktive
   Etagen-Chip. */
#skyboxVariantBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    border: none;
    border-radius: 11px;
    background: transparent;
    color: var(--vp-hs-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto;
    flex: 0 0 auto;
    transition: background 140ms ease, color 140ms ease;
}
#skyboxVariantBtn:hover {
    background: var(--vp-hs-glass-strong);
}
#skyboxVariantBtn.active {
    background: var(--vp-hs-fill);
    color: var(--vp-hs-on-fill);
}
#skyboxVariantBtn:focus-visible {
    outline: 2px solid var(--vp-hs-fill);
    outline-offset: 2px;
}
/* Feine Trennlinie zwischen Etagen-Segmenten und Варианты-Segment —
   dieselbe Linienfarbe wie das Pillen-Chrome. Faellt automatisch weg,
   wenn keine Etagen da sind ([hidden] bzw. kein #storeySwitcher). */
#vpTopPillGroup #storeySwitcher:not([hidden]) + #skyboxVariantBtn {
    margin-left: 3px;
    padding-left: 12px;
    border-left: 1px solid var(--vp-hs-glass-line);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
/* Freie Labels (auch laengere wie «С мебелью»): Ellipsis statt Umbruch,
   der volle Text steht in title/aria-label. */
#skyboxVariantBtn .vp-variant-label {
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
}
#skyboxVariantBtn .vp-variant-spin {
    display: none;
    width: 11px;
    height: 11px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: vpVariantSpin 0.7s linear infinite;
    flex: 0 0 auto;
}
#skyboxVariantBtn.busy .vp-variant-spin {
    display: inline-block;
}
@keyframes vpVariantSpin {
    to { transform: rotate(360deg); }
}
/* Mobil: gleiche Metrik wie .vp-storey-seg im 640er-Block (40px hoch),
   Gruppe kompakter wie die Etagen-Pille dort. */
@media (max-width: 640px) {
    #vpTopPillGroup {
        padding: 4px 6px;
        gap: 2px;
    }
    #skyboxVariantBtn {
        min-width: 40px;
        height: 40px;
        padding: 0 10px;
        font-size: 12px;
    }
    #vpTopPillGroup #storeySwitcher:not([hidden]) + #skyboxVariantBtn {
        margin-left: 2px;
        padding-left: 12px;
    }
    #skyboxVariantBtn .vp-variant-label {
        max-width: 12ch;
    }
}