/* Immersiver 3D-Showroom */
.showroom-overlay {
    --garage-white: #f4f7fc;
    --garage-muted: rgba(225, 234, 249, .68);
    --garage-line: rgba(207, 224, 250, .14);
    --garage-blue: #78aaff;
    position: fixed; inset: 0; z-index: 2800; overflow: hidden;
    color: var(--garage-white); background: #0b1221;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .48s cubic-bezier(.22,1,.36,1), visibility 0s .48s;
}
.showroom-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .48s cubic-bezier(.22,1,.36,1); }
.showroom-world { position: relative; width: 100%; height: 100%; min-height: 420px; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #344967 0%, #192943 52%, #0b1221 100%); isolation: isolate; }
#showroom-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: 0; touch-action: none; }
.showroom-vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(5,12,24,.72) 0%, rgba(5,12,24,.1) 25%, transparent 48%, rgba(5,12,24,.14) 70%, rgba(5,12,24,.82) 100%), linear-gradient(90deg, rgba(5,12,24,.52), transparent 29%, transparent 71%, rgba(5,12,24,.32)); }
.showroom-topbar { position: absolute; z-index: 4; inset: 22px 26px auto; display: flex; align-items: center; gap: 24px; padding: 15px 18px; border: 1px solid rgba(225,238,255,.13); border-radius: 21px; background: rgba(13,24,43,.58); box-shadow: 0 18px 50px rgba(3,9,20,.16), inset 0 1px rgba(255,255,255,.06); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); }
.showroom-brand { min-width: 220px; display: grid; grid-template-columns: 9px auto; column-gap: 10px; align-items: center; }
.showroom-live { grid-row: span 2; width: 8px; height: 8px; border-radius: 50%; background: #82ddbd; box-shadow: 0 0 14px rgba(130,221,189,.7); animation: showroom-pulse 2.4s ease-in-out infinite; }
@keyframes showroom-pulse { 50% { box-shadow: 0 0 22px rgba(130,221,189,.95); opacity: .72; } }
.showroom-eyebrow, .showroom-kicker, .showroom-model small, .showroom-mini-stat span, .quicklinks-label { font-size: 9px; line-height: 1.3; letter-spacing: .16em; font-weight: 700; color: var(--garage-muted); }
.showroom-brand h2 { grid-column: 2; font-size: 17px; line-height: 1.2; letter-spacing: -.03em; margin-top: 4px; }
.showroom-model { display: grid; gap: 2px; padding-left: 20px; border-left: 1px solid var(--garage-line); }
.showroom-model b { font-size: 13px; }
.showroom-model > span { font-size: 11px; color: var(--garage-muted); }
.showroom-exit { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; padding: 9px 12px; color: var(--garage-white); border: 1px solid var(--garage-line); border-radius: 12px; background: rgba(255,255,255,.06); font: 600 12px var(--font); cursor: pointer; transition: background .25s, transform .25s; }
.showroom-exit:hover { background: rgba(255,255,255,.13); transform: translateY(-1px); }
.showroom-exit > span:first-child { padding: 3px 5px; border: 1px solid rgba(255,255,255,.2); border-radius: 5px; color: var(--garage-muted); font-size: 9px; }
.showroom-exit .exit-x { display: none; font-size: 19px; line-height: 12px; }
.showroom-sidecopy { position: absolute; z-index: 3; top: 37%; left: 28px; width: min(250px, 23vw); padding: 17px 18px 18px; border-left: 2px solid rgba(120,170,255,.88); border-radius: 0 16px 16px 0; background: linear-gradient(90deg, rgba(11,20,36,.72), rgba(11,20,36,.12)); pointer-events: none; }
.showroom-kicker { color: #a9c9ff; }
.showroom-sidecopy p { margin: 9px 0 18px; font-size: 14px; line-height: 1.55; color: rgba(244,247,252,.9); max-width: 26ch; }
.showroom-mini-stat { display: grid; gap: 5px; }
.showroom-mini-stat b { font-size: 12px; font-weight: 650; }
.showroom-crosshair { position: absolute; z-index: 2; left: 50%; top: 51%; width: 17px; height: 17px; margin: -8px; border: 1px solid rgba(240,247,255,.75); border-radius: 50%; pointer-events: none; opacity: .72; }
.showroom-crosshair::before, .showroom-crosshair::after { content: ""; position: absolute; left: 50%; top: 50%; background: rgba(240,247,255,.65); transform: translate(-50%,-50%); }
.showroom-crosshair::before { width: 1px; height: 25px; }
.showroom-crosshair::after { width: 25px; height: 1px; }
.showroom-prompt { position: absolute; z-index: 5; left: 50%; bottom: 126px; width: min(370px, calc(100vw - 32px)); transform: translateX(-50%) translateY(8px); display: grid; gap: 5px; padding: 15px 17px; border: 1px solid rgba(222,236,255,.17); border-radius: 17px; background: rgba(13,24,43,.75); box-shadow: 0 14px 44px rgba(0,0,0,.2); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); text-align: center; transition: opacity .3s, transform .35s cubic-bezier(.22,1,.36,1); }
.showroom-prompt b { font-size: 13px; }
.showroom-prompt > span { color: var(--garage-muted); font-size: 11px; line-height: 1.45; }
#showroom-interact { justify-self: center; display: inline-flex; align-items: center; gap: 8px; margin-top: 7px; padding: 8px 12px; border: 1px solid rgba(144,188,255,.28); border-radius: 11px; color: #f8fbff; background: rgba(82,132,219,.25); font: 600 11px var(--font); cursor: pointer; transition: background .24s, transform .24s, opacity .24s; }
#showroom-interact:hover:not(:disabled) { background: rgba(82,132,219,.45); transform: translateY(-1px); }
#showroom-interact:disabled { opacity: .52; cursor: default; }
#showroom-interact > span, .touch-action span { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid rgba(225,238,255,.28); border-radius: 6px; font-size: 10px; }
.showroom-quicklinks { position: absolute; z-index: 4; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; width: max-content; max-width: calc(100vw - 32px); padding: 7px; border: 1px solid rgba(225,238,255,.13); border-radius: 15px; background: rgba(13,24,43,.72); box-shadow: 0 14px 40px rgba(0,0,0,.22); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.quicklinks-label { padding: 0 9px; white-space: nowrap; }
.showroom-quicklinks button { display: flex; align-items: center; gap: 7px; padding: 9px 11px; border: 1px solid transparent; border-radius: 10px; color: rgba(244,247,252,.88); background: transparent; font: 550 11px var(--font); white-space: nowrap; cursor: pointer; transition: background .25s, border-color .25s, transform .25s; }
.showroom-quicklinks button:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.08); transform: translateY(-1px); }
.showroom-quicklinks button i { color: #99bdff; font-size: 9px; font-style: normal; font-variant-numeric: tabular-nums; }
.showroom-touch { display: none; }
.showroom-footer { position: absolute; z-index: 4; right: 28px; bottom: 28px; display: grid; justify-items: end; gap: 6px; pointer-events: none; }
.showroom-help, .showroom-footnote { color: rgba(231,239,251,.68); font-size: 10px; }
.showroom-help { display: flex; align-items: center; gap: 4px; }
.showroom-help kbd { min-width: 17px; padding: 3px 4px; border: 1px solid rgba(233,242,255,.19); border-radius: 5px; background: rgba(255,255,255,.05); text-align: center; font: 600 9px var(--font); }
.showroom-footnote { font-size: 9px; }
.showroom-loading { position: absolute; z-index: 8; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; background: rgba(10,19,34,.88); color: var(--garage-white); font-size: 13px; transition: opacity .5s; }
.showroom-loading.done { opacity: 0; pointer-events: none; }
.loading-orb { width: 19px; height: 19px; border: 2px solid rgba(150,190,255,.25); border-top-color: #93bcff; border-radius: 50%; animation: showroom-spin .8s linear infinite; }
@keyframes showroom-spin { to { transform: rotate(360deg); } }
.showroom-error { position: absolute; z-index: 9; top: 90px; left: 50%; transform: translateX(-50%); max-width: min(540px, calc(100vw - 24px)); padding: 12px 16px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; background: rgba(98,40,55,.88); color: #fff; font-size: 12px; text-align: center; }
.showroom-overlay :focus-visible { outline: 2px solid #a7c8ff; outline-offset: 3px; }
@media (max-width: 760px) {
    .showroom-topbar { inset: 10px 10px auto; gap: 12px; padding: 11px 12px; border-radius: 16px; }
    .showroom-brand { min-width: 0; flex: 1; column-gap: 7px; }
    .showroom-brand h2 { font-size: 14px; }
    .showroom-eyebrow { font-size: 8px; }
    .showroom-model { display: none; }
    .showroom-exit { padding: 9px; }
    .showroom-exit b, .showroom-exit > span:first-child { display: none; }
    .showroom-exit .exit-x { display: block; }
    .showroom-sidecopy { top: 24%; left: 12px; width: min(205px, 58vw); padding: 12px 13px; }
    .showroom-sidecopy p { font-size: 12px; margin: 7px 0 10px; }
    .showroom-mini-stat { display: none; }
    .showroom-prompt { bottom: 165px; padding: 12px; }
    .showroom-prompt > span { max-width: 34ch; justify-self: center; }
    .showroom-quicklinks { left: 10px; right: 10px; bottom: 10px; transform: none; width: auto; max-width: none; justify-content: space-between; gap: 2px; padding: 5px; border-radius: 13px; }
    .quicklinks-label { display: none; }
    .showroom-quicklinks button { display: grid; justify-items: center; gap: 3px; flex: 1; padding: 7px 3px; font-size: 9px; white-space: normal; text-align: center; }
    .showroom-footer { display: none; }
    .showroom-touch { position: absolute; z-index: 5; left: 13px; right: 13px; bottom: 76px; display: flex; align-items: end; justify-content: space-between; pointer-events: none; }
    .touch-dpad { display: grid; grid-template-columns: repeat(3, 42px); grid-template-rows: repeat(2, 42px); gap: 4px; pointer-events: auto; }
    .touch-dpad button { border: 1px solid rgba(225,238,255,.2); border-radius: 12px; background: rgba(13,24,43,.66); color: #fff; font-size: 18px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); touch-action: none; user-select: none; }
    .touch-dpad button:nth-child(1) { grid-column: 2; grid-row: 1; }
    .touch-dpad button:nth-child(2) { grid-column: 1; grid-row: 2; }
    .touch-dpad button:nth-child(3) { grid-column: 2; grid-row: 2; }
    .touch-dpad button:nth-child(4) { grid-column: 3; grid-row: 2; }
    .touch-dpad button:active { background: rgba(82,132,219,.55); }
    .touch-action { display: inline-flex; align-items: center; gap: 7px; padding: 9px 11px; border: 1px solid rgba(225,238,255,.2); border-radius: 12px; background: rgba(13,24,43,.7); color: white; font: 600 10px var(--font); pointer-events: auto; touch-action: none; }
    .touch-action:disabled { opacity: .55; }
}
@media (max-width: 390px) {
    .showroom-quicklinks button { font-size: 8px; }
    .touch-dpad { grid-template-columns: repeat(3, 38px); grid-template-rows: repeat(2, 38px); }
}
@media (prefers-reduced-motion: reduce) {
    .showroom-overlay, .showroom-overlay *, .showroom-overlay *::before, .showroom-overlay *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.btn-showroom { gap: 7px; color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--glass)); border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line)); }
.btn-showroom:hover { color: var(--on); background: var(--primary); }
.btn-showroom svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 640px) { .user-actions .btn-showroom { flex: 1.1; } }

/* Sichere Viewport- und Touch-Abstände für Smartphones */
.showroom-world { height: 100vh; height: 100dvh; min-height: 100vh; min-height: 100dvh; }
@media (max-width: 760px) {
    .showroom-topbar { top: calc(8px + env(safe-area-inset-top)); }
    .showroom-sidecopy { top: calc(21% + env(safe-area-inset-top)); width: min(190px, 52vw); }
    .showroom-sidecopy p { max-width: 24ch; }
    .showroom-prompt { bottom: calc(164px + env(safe-area-inset-bottom)); width: min(370px, calc(100vw - 24px)); }
    .showroom-quicklinks { bottom: calc(8px + env(safe-area-inset-bottom)); min-height: 56px; }
    .showroom-quicklinks button { min-height: 44px; line-height: 1.15; }
    .showroom-touch { bottom: calc(74px + env(safe-area-inset-bottom)); }
    .touch-dpad button { min-width: 42px; min-height: 42px; }
    .touch-action { min-height: 42px; }
}
@media (max-width: 390px) {
    .showroom-sidecopy { width: min(176px, 51vw); padding: 10px 11px; }
    .showroom-sidecopy p { font-size: 11px; line-height: 1.38; }
    .showroom-prompt { bottom: calc(170px + env(safe-area-inset-bottom)); }
    .showroom-quicklinks button { padding-inline: 2px; font-size: 9px; }
    .touch-dpad { grid-template-columns: repeat(3, 40px); grid-template-rows: repeat(2, 40px); }
}
@media (max-width: 760px) and (max-height: 700px) and (orientation: portrait) {
    .showroom-sidecopy { top: calc(17% + env(safe-area-inset-top)); }
    .showroom-sidecopy p { margin-bottom: 0; }
    .showroom-prompt { bottom: calc(157px + env(safe-area-inset-bottom)); padding: 10px; }
    .showroom-touch { bottom: calc(67px + env(safe-area-inset-bottom)); }
    .touch-dpad { grid-template-columns: repeat(3, 35px); grid-template-rows: repeat(2, 35px); }
    .touch-dpad button { min-width: 35px; min-height: 35px; }
}
@media (max-width: 760px) and (orientation: landscape) {
    .showroom-sidecopy { display: none; }
    .showroom-topbar { padding-block: 8px; }
    .showroom-prompt { left: auto; right: 10px; bottom: calc(70px + env(safe-area-inset-bottom)); width: min(310px, 38vw); transform: none; padding: 10px 12px; }
    .showroom-touch { left: 10px; right: auto; bottom: calc(10px + env(safe-area-inset-bottom)); }
    .touch-dpad { grid-template-columns: repeat(3, 36px); grid-template-rows: repeat(2, 36px); }
    .touch-dpad button { min-width: 36px; min-height: 36px; }
    .showroom-quicklinks { left: auto; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); width: min(56vw, 470px); }
    .showroom-quicklinks button { min-width: 0; font-size: 9px; }
}

/* Querformat-Handys haben oft mehr als 760 CSS-Pixel Breite, aber wenig Höhe. */
@media (max-height: 520px) and (orientation: landscape) {
    .showroom-topbar { inset: calc(7px + env(safe-area-inset-top)) 12px auto; gap: 12px; padding: 8px 12px; border-radius: 15px; }
    .showroom-brand { min-width: 0; flex: 1; }
    .showroom-brand h2 { font-size: 14px; }
    .showroom-model { gap: 1px; padding-left: 12px; }
    .showroom-model b { font-size: 11px; }
    .showroom-model > span { font-size: 9px; }
    .showroom-exit { padding: 7px 9px; }
    .showroom-sidecopy, .showroom-footer { display: none; }
    .showroom-prompt { left: auto; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); width: min(320px, 38vw); transform: none; gap: 3px; padding: 9px 11px; }
    .showroom-prompt b { font-size: 12px; }
    .showroom-prompt > span { font-size: 10px; }
    #showroom-interact { margin-top: 3px; padding: 6px 10px; }
    .showroom-touch { position: absolute; z-index: 5; left: 12px; right: auto; bottom: calc(9px + env(safe-area-inset-bottom)); display: flex; align-items: end; gap: 9px; pointer-events: none; }
    .touch-dpad { grid-template-columns: repeat(3, 36px); grid-template-rows: repeat(2, 36px); gap: 3px; pointer-events: auto; }
    .touch-dpad button { min-width: 36px; min-height: 36px; }
    .touch-action { min-height: 38px; padding: 7px 9px; font-size: 9px; }
    .showroom-quicklinks { left: auto; right: 12px; bottom: calc(8px + env(safe-area-inset-bottom)); transform: none; width: min(56vw, 500px); max-width: calc(100vw - 280px); gap: 3px; padding: 5px; }
    .quicklinks-label { display: none; }
    .showroom-quicklinks button { min-width: 0; gap: 4px; padding: 7px 6px; font-size: 9px; }
}