/* ---------------------------------------------------------------
   Lunexo — 3D-Scans
   Vollbild-Seite ohne Scroll: die Buehne liegt fix hinter allem, der
   Rest schwebt als HUD darueber. Schrift und Farben kommen aus
   portfolio.css / theme.css, damit die Seite zum Rest passt.
   --------------------------------------------------------------- */

.scans-page, html.scans-page {
    height: 100%;
    overflow: hidden;           /* diese Seite scrollt bewusst nicht */
    overscroll-behavior: none;
    background: #0b0d12;
}

/* ── Buehne ─────────────────────────────────────────────────── */
.scan-stage {
    position: fixed; inset: 0; z-index: 0;
    /* Die Buehne bleibt in beiden Themes dunkel: das Canvas rendert auf
       Schwarz, ein heller Ladezustand wuerde beim Umschalten aufblitzen. */
    background: #0b0d12;
    touch-action: none;
}
.scan-canvas { position: absolute; inset: 0; }
.scan-stage canvas { display: block; width: 100%; height: 100%; }

.scan-overlay {
    position: absolute; inset: 0; z-index: 5;
    display: grid; place-content: center; gap: 14px;
    background: #0b0d12;
    transition: opacity .5s ease, visibility .5s ease;
}
.scan-overlay__bar {
    width: min(280px, 60vw); height: 3px; border-radius: 2px;
    background: hsla(0, 0%, 100%, .14); overflow: hidden;
}
.scan-overlay__bar i {
    display: block; height: 100%; width: 0;
    background: var(--first-color); transition: width .2s ease;
}
.scan-overlay__label {
    color: hsl(228, 6%, 62%);
    font-size: var(--small-font-size);
    text-align: center; font-variant-numeric: tabular-nums;
}

/* ── HUD ────────────────────────────────────────────────────── */
.scan-hud {
    position: fixed; inset: 0; z-index: 10;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: calc(var(--header-height) + 4.2rem) clamp(16px, 4vw, 48px) clamp(14px, 2vh, 24px);
    pointer-events: none;       /* die Buehne bleibt greifbar */
}

/* Verlaeufe oben und unten: sonst verschwindet weisse Schrift im hellen Scan. */
.scan-hud::before,
.scan-hud::after {
    content: ''; position: fixed; left: 0; right: 0; z-index: -1; pointer-events: none;
}
.scan-hud::before {
    top: 0; height: 42vh;
    background: linear-gradient(180deg, hsla(228, 25%, 3%, .88) 0%, hsla(228, 25%, 3%, .55) 45%, transparent 100%);
}
.scan-hud::after {
    bottom: 0; height: 40vh;
    background: linear-gradient(0deg, hsla(228, 25%, 3%, .92) 0%, hsla(228, 25%, 3%, .55) 45%, transparent 100%);
}
.scan-hud a,
.scan-hud button,
.scan-hud .scan-carousel,
.scan-hud .card { pointer-events: auto; }

/* autoBlur ist auf Scroll ausgelegt (-200px Versatz). Auf dieser Seite gibt es
   keinen Scroll, deshalb kleinerer Versatz und Ausloesung per JS beim Laden. */
.scan-hud .autoBlur { transform: translateY(-40px); }
.scan-hud .autoBlur.in-view { transform: translateY(0); }

/* Kopfzeile: gleiche Klassen wie portfolio.html, nur ohne eigenen Abstand.
   Blendet sich aus, sobald der Besucher die Szene anfasst — der Scan soll
   dann freie Bahn haben. */
.scan-hud__top {
    text-align: center;
    text-shadow: 0 2px 30px hsla(228, 30%, 2%, .85);
    transition: opacity .8s ease, transform .8s ease;
}
.scan-hud__top.is-idle { opacity: 0; transform: translateY(-14px); pointer-events: none; }
.scan-hud__top .portfolio-intro__eyebrow { margin-bottom: .7rem; }
/* Gleicher Laufverlauf wie die Karten-Titel der Startseite (.card h3). */
.scan-hud__top .portfolio-intro__title {
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    margin-bottom: .6rem;
    background: var(--cine-text-grad);
    background-size: 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: animate-gradient 2.5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .scan-hud__top .portfolio-intro__title { animation: none; }
}
.scan-hud__top .portfolio-intro__sub {
    color: hsla(0, 0%, 100%, .74);
    max-width: 46ch; margin: 0 auto;
}

/* Mittelzeile: Szenentitel links, Werkzeuge rechts */
.scan-hud__mid {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; padding-bottom: .6rem;
}
.scan-caption { display: grid; gap: .3rem; text-shadow: 0 2px 24px hsla(228, 30%, 2%, .8); }
.scan-caption__title {
    font-family: 'Kiona', sans-serif;
    font-size: clamp(1.4rem, 3vw, 2.4rem); line-height: 1.05; color: #fff;
}
.scan-caption__meta {
    font-family: 'Kiona', sans-serif;
    font-size: .7rem; letter-spacing: .25em; text-transform: uppercase;
    color: var(--first-color); opacity: .9;
}

.scan-tools { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.scan-tools button {
    appearance: none; cursor: pointer;
    padding: 7px 12px; border-radius: 8px;
    background: hsla(228, 12%, 6%, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid hsla(0, 0%, 100%, .14); color: #fff;
    font-family: var(--body-font); font-size: var(--smaller-font-size);
    transition: border-color .2s ease, color .2s ease;
}
.scan-tools button:hover { border-color: var(--first-color); color: var(--first-color); }

/* ── Fusszeile des HUD ──────────────────────────────────────── */
.scan-hud__bottom { display: grid; gap: .6rem; }

.scan-hint {
    justify-self: start;
    padding: 6px 11px; border-radius: 8px;
    background: hsla(228, 12%, 6%, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid hsla(0, 0%, 100%, .14);
    color: #fff; font-size: var(--smaller-font-size);
    transition: opacity .4s ease;
}
.scan-hint.is-gone { opacity: 0; }

.scan-error {
    justify-self: start; margin: 0;
    padding: .6rem .9rem; border-radius: 10px;
    border: 1px solid var(--first-color);
    background: hsla(228, 12%, 6%, .85); color: #fff;
    font-size: var(--small-font-size);
}

/* ── Karussell ──────────────────────────────────────────────── */
.scan-carousel { position: relative; }
.scan-carousel__track {
    display: flex; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    padding: 4px 0 6px; scrollbar-width: none;
}
.scan-carousel__track::-webkit-scrollbar { display: none; }

/* ── Kachel ─────────────────────────────────────────────────────
   Eine Definition, zwei Orte: Karussell auf scans.html und Teaser auf
   portfolio.html. Basis ist .card von der Startseite.
   ------------------------------------------------------------- */
.scan-tile {
    position: relative;
    display: block;                 /* .card ist flex — hier stoert das */
    min-height: 0;                  /* .card setzt 280px, hier unerwuenscht */
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid hsla(0, 0%, 100%, .14);
    background: #0b0d12;
    text-decoration: none;
    cursor: pointer;
    transition: transform .35s var(--ease-out, ease), border-color .25s ease, box-shadow .25s ease;
}
.scan-tile:hover { transform: translateY(-4px); border-color: hsla(0, 0%, 100%, .3); }

.scan-tile__video {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%; object-fit: cover;
    filter: brightness(.92) saturate(1.05);
    transition: transform .6s var(--ease-out, ease), filter .35s ease;
}
.scan-tile:hover .scan-tile__video { transform: scale(1.05); }

/* Verlauf nach unten, damit Titel und Zahlen auf jedem Frame lesbar bleiben. */
.scan-tile__scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg,
        hsla(228, 30%, 3%, .35) 0%,
        transparent 32%,
        hsla(228, 30%, 3%, .72) 78%,
        hsla(228, 30%, 3%, .93) 100%);
}

.scan-tile__badge {
    position: absolute; top: 12px; left: 14px; z-index: 3;
    font-family: 'Kiona', sans-serif;
    font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 999px;
    background: var(--first-color); color: #fff;
    opacity: 0; transition: opacity .25s ease;
}
.scan-tile[aria-current="true"] .scan-tile__badge { opacity: 1; }

.scan-tile__body {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 14px 16px 15px;
    display: grid; gap: 3px;
}
/* .card h3 bringt den animierten Verlauf der Startseite mit — hier nur kleiner. */
.scan-tile .card-title {
    margin: 0;
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    line-height: 1.1;
}
.scan-tile__meta {
    margin: 0;
    font-size: var(--smaller-font-size);
    color: hsla(0, 0%, 100%, .72);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.scan-tile[aria-current="true"] {
    border-color: var(--first-color);
    box-shadow: 0 0 0 1px var(--first-color), 0 16px 44px hsla(228, 30%, 2%, .55);
}

/* Groesse im Karussell */
.scan-carousel__track .scan-tile {
    flex: 0 0 auto;
    width: clamp(228px, 24vw, 300px);
    height: clamp(126px, 17vh, 168px);
    scroll-snap-align: start;
}

.scan-carousel__arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 3; width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    background: hsla(228, 12%, 6%, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid hsla(0, 0%, 100%, .16); color: #fff;
    font-size: 1.2rem; transition: border-color .2s ease, color .2s ease;
}
.scan-carousel__arrow:hover { border-color: var(--first-color); color: var(--first-color); }
.scan-carousel__arrow--prev { left: -6px; }
.scan-carousel__arrow--next { right: -6px; }
.scan-carousel__arrow[hidden] { display: none; }

/* Ersetzt den Footer: Kontakt und Pflichtlinks */
.scan-bar {
    display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap;
    max-width: 62%;   /* haelt Abstand zum Chat-Widget unten rechts */
    font-size: var(--smaller-font-size); color: hsla(0, 0%, 100%, .6);
}
.scan-bar a { color: hsla(0, 0%, 100%, .82); text-decoration: none; }
.scan-bar a:hover { color: var(--first-color); }
.scan-bar__cta a {
    margin-left: .5rem; padding: 5px 12px; border-radius: 999px;
    border: 1px solid var(--first-color); color: var(--first-color);
}
.scan-bar__legal { display: flex; gap: 1.1rem; }
.scan-bar__credit {
    color: hsla(0, 0%, 100%, .42);
    max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 767px) {
    /* Auf dem Handy draengt sich alles in die untere Haelfte: Titel, Werkzeuge,
       Karussell und Fusszeile. Deshalb hier enger setzen, untereinander statt
       nebeneinander, und rechts unten Platz fuer den Chat-Knopf lassen. */
    /* Unten Platz fuer die Chat-Leiste (fixed, 60px + 16px Abstand) — sonst
       verdeckt sie Impressum und Datenschutz, die sichtbar bleiben muessen. */
    .scan-hud { padding: calc(var(--header-height) + 1.5rem) 14px 84px; }
    .scan-hud::before { height: 30vh; }
    .scan-hud::after  { height: 56vh; }

    .scan-hud__top .portfolio-intro__sub { display: none; }
    .scan-hud__top .portfolio-intro__eyebrow { margin-bottom: .45rem; }
    .scan-hud__top .portfolio-intro__title { font-size: 1.5rem; margin-bottom: 0; }

    /* Szenentitel ueber die Werkzeuge statt daneben — nebeneinander wird beides
       zu schmal und die Zeilen laufen ineinander. */
    .scan-hud__mid {
        flex-direction: column; align-items: flex-start;
        justify-content: flex-end;   /* Spalte: unten ausrichten, nicht oben */
        gap: .45rem; padding-bottom: .5rem;
    }
    /* Ueber hellen Szenen (Beton, Himmel) geht weisse Schrift verloren.
       Gleiche Glas-Plakette wie Werkzeuge und Hinweis. */
    .scan-caption {
        gap: .15rem; padding: 6px 11px; border-radius: 10px;
        background: hsla(228, 12%, 6%, .58);
        -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
        border: 1px solid hsla(0, 0%, 100%, .12);
    }
    .scan-caption__title { font-size: 1.45rem; line-height: 1; }
    .scan-caption__meta { font-size: .56rem; letter-spacing: .16em; }
    .scan-tools { justify-content: flex-start; gap: 6px; }
    .scan-tools button { padding: 6px 10px; font-size: 11px; }
    .scan-tools button:nth-child(2) { display: none; }

    .scan-hint { font-size: 11px; padding: 5px 9px; }
    .scan-hud__bottom { gap: .45rem; }

    /* Auswahl als kleine Vorschau-Kacheln ohne Beschriftung: sie soll die
       Szene nicht zustellen. Welche laeuft, zeigt der Akzentrahmen. */
    .scan-carousel__track { gap: 8px; scroll-padding-inline: 14px; padding: 2px 0; }
    .scan-carousel__track .scan-tile {
        width: 96px; height: 60px; border-radius: 10px;
    }
    .scan-tile__body,
    .scan-tile__badge { display: none; }
    .scan-tile__scrim { opacity: .3; }
    .scan-tile[aria-current="true"] {
        box-shadow: 0 0 0 1px var(--first-color), 0 8px 22px hsla(228, 30%, 2%, .5);
    }
    .scan-carousel__arrow { display: none; }

    /* Fusszeile: eigene Zeilen statt einer gequetschten. Der Bildnachweis ist
       eine Lizenzauflage und bleibt sichtbar — nur kleiner und umbrechend. */
    /* Eine Spalte: CTA, Pflichtlinks und Bildnachweis untereinander. Alles
       nebeneinander passt bei 390px nicht und wurde rechts abgeschnitten. */
    .scan-bar {
        max-width: none; width: 100%;
        display: grid; grid-template-columns: 1fr; gap: .4rem;
        font-size: 11px; line-height: 1.35;
    }
    .scan-bar__cta { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
    .scan-bar__cta a { margin-left: 0; padding: 4px 10px; }
    .scan-bar__legal { gap: 1rem; justify-self: start; }
    .scan-bar__credit {
        max-width: none; white-space: normal; overflow: visible;
        font-size: 10px; color: hsla(0, 0%, 100%, .38);
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* Sehr niedrige Geraete: Karussell schrumpfen statt Fusszeile abschneiden. */
@media (max-width: 767px) and (max-height: 720px) {
    .scan-hud__top .portfolio-intro__title { font-size: 1.25rem; }
    .scan-carousel__track .scan-tile { width: 84px; height: 52px; }
    .scan-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .scan-carousel__track { scroll-behavior: auto; }
}

/* Mobiler Video-Ersatz fuer den WebGL-Splat: fuellt die Buehne wie der Canvas. */
.scan-video-fallback {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; background: #0b0d12;
}

/* ── Teaser auf portfolio.html ──────────────────────────────── */
.scan-teaser-grid {
    display: grid; gap: 20px; margin-top: 1.6rem;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.scan-teaser-grid .scan-tile { height: clamp(200px, 22vw, 260px); }

/* ── Marker in der Szene ────────────────────────────────────────
   Der Viewer legt den Layer an und positioniert die Elemente pro
   Frame; hier steht nur das Aussehen.
   ------------------------------------------------------------- */
.egs-hotspot {
    display: flex; align-items: center; gap: 9px;
    transition: opacity .25s ease;
    cursor: pointer;
    font-family: var(--body-font);
}
.egs-hotspot__dot {
    position: relative; flex: 0 0 auto;
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--first-color);
    box-shadow: 0 0 0 3px hsla(0, 0%, 100%, .22), 0 2px 10px hsla(228, 30%, 2%, .7);
}
.egs-hotspot__dot::after {
    content: ''; position: absolute; inset: -6px; border-radius: 50%;
    border: 1px solid var(--first-color); opacity: .55;
    animation: egs-ping 2.4s cubic-bezier(.2, .7, .3, 1) infinite;
}
@keyframes egs-ping {
    0%   { transform: scale(.7); opacity: .6; }
    70%  { transform: scale(1.9); opacity: 0; }
    100% { transform: scale(1.9); opacity: 0; }
}
.egs-hotspot__label {
    display: grid; gap: 1px;
    padding: 6px 11px; border-radius: 9px;
    background: hsla(228, 12%, 6%, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid hsla(0, 0%, 100%, .14);
    white-space: nowrap;
    opacity: 0; transform: translateX(-6px);
    transition: opacity .25s ease, transform .25s ease;
}
.egs-hotspot:hover .egs-hotspot__label { opacity: 1; transform: translateX(0); }
.egs-hotspot__label b {
    font-family: 'Kiona', sans-serif; font-weight: normal;
    font-size: .82rem; letter-spacing: .06em; color: #fff;
}
.egs-hotspot__label i {
    font-style: normal; font-size: var(--smaller-font-size);
    color: hsla(0, 0%, 100%, .62);
}
/* Auf Touch gibt es kein Hover — dort stehen die Beschriftungen dauerhaft. */
@media (hover: none) {
    .egs-hotspot__label { opacity: 1; transform: none; }
    .egs-hotspot__label i { display: none; }
}

/* ── Steuerkreuz (nur Touch) ────────────────────────────────── */
.egs-stick {
    border-radius: 50%;
    background: hsla(228, 12%, 6%, .38);
    border: 1px solid hsla(0, 0%, 100%, .16);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    display: none;
}
@media (hover: none) and (pointer: coarse) { .egs-stick { display: block; } }
.egs-stick__knob {
    position: absolute; left: 50%; top: 50%;
    width: 42px; height: 42px; border-radius: 50%;
    transform: translate(-50%, -50%);
    background: hsla(0, 0%, 100%, .78);
    box-shadow: 0 2px 12px hsla(228, 30%, 2%, .6);
}

/* ── Produktkarte ───────────────────────────────────────────────
   Liegt rechts ueber der Szene, im Kartenstil der Startseite.
   ------------------------------------------------------------- */
.scan-shop {
    position: absolute; right: clamp(16px, 4vw, 48px);
    top: 50%; transform: translateY(-50%);
    z-index: 12; pointer-events: auto;
    width: min(330px, 78vw);
    /* Mit offenem Formular wird die Karte hoch — deckeln und innen scrollen,
       sonst laeuft sie aus dem Bild. */
    max-height: calc(100vh - 190px);
    overflow: hidden auto; overscroll-behavior: contain;
    border-radius: 16px;
    background: hsla(228, 12%, 7%, .9);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid hsla(0, 0%, 100%, .14);
    box-shadow: 0 24px 60px hsla(228, 30%, 2%, .6);
    animation: scan-shop-in .28s ease both;
}
.scan-shop[hidden] { display: none; }
@keyframes scan-shop-in {
    from { opacity: 0; transform: translateY(-50%) translateX(18px); }
    to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}
.scan-shop__close {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
    display: grid; place-items: center;
    background: hsla(228, 12%, 6%, .7); border: 1px solid hsla(0, 0%, 100%, .16);
    color: #fff; font-size: 1rem;
}
.scan-shop__close:hover { border-color: var(--first-color); color: var(--first-color); }
.scan-shop__media { background: #101318; flex: 0 0 auto; }
.scan-shop__media img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.scan-shop__body { padding: 14px 16px 16px; display: grid; gap: 6px; }
.scan-shop__eyebrow {
    margin: 0; font-family: 'Kiona', sans-serif;
    font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
    color: var(--first-color);
}
.scan-shop__title {
    margin: 0; font-family: 'Kiona', sans-serif; font-weight: normal;
    font-size: 1.3rem; line-height: 1.1; color: #fff;
}
.scan-shop__text { margin: 2px 0 0; font-size: var(--small-font-size); color: hsla(0, 0%, 100%, .68); }
.scan-shop__price {
    margin: 6px 0 0; font-family: 'Kiona', sans-serif;
    font-size: 1rem; color: #fff;
}
.scan-shop__actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.scan-shop__btn, .scan-shop__ghost {
    font-family: var(--body-font); font-size: var(--smaller-font-size);
    padding: 8px 16px; border-radius: 999px; cursor: pointer; text-decoration: none;
}
.scan-shop__btn { background: var(--first-color); color: #fff; border: 1px solid var(--first-color); }
.scan-shop__btn:hover { background: transparent; color: var(--first-color); }
.scan-shop__ghost { background: transparent; color: hsla(0, 0%, 100%, .8); border: 1px solid hsla(0, 0%, 100%, .22); }
.scan-shop__ghost:hover { border-color: var(--first-color); color: var(--first-color); }

@media (max-width: 767px) {
    /* Ersetzt weiter unten durch das Blatt-Layout mit Lupe. */
    @keyframes scan-shop-in { from { opacity: 0; } to { opacity: 1; } }
}

/* Beispiel-Kennzeichnung und Anfrageformular in der Produktkarte */
.scan-shop__badge {
    display: inline-block; margin-right: 6px;
    padding: 2px 7px; border-radius: 999px;
    background: var(--first-color); color: #fff;
    font-size: .58rem; letter-spacing: .16em;
}
.scan-shop__sample {
    margin: 8px 0 0; font-size: var(--smaller-font-size);
    color: hsla(0, 0%, 100%, .5); line-height: 1.45;
}
.scan-form { display: grid; gap: 4px; margin-top: 12px; }
.scan-form[hidden] { display: none; }
.scan-form__label {
    font-size: var(--smaller-font-size); color: hsla(0, 0%, 100%, .6); margin-top: 4px;
}
.scan-form__input {
    font-family: var(--body-font); font-size: var(--small-font-size);
    padding: 7px 10px; border-radius: 8px;
    background: hsla(0, 0%, 100%, .06); color: #fff;
    border: 1px solid hsla(0, 0%, 100%, .16); resize: vertical;
}
.scan-form__input:focus { outline: none; border-color: var(--first-color); }
.scan-form #scan-form-send { margin-top: 10px; justify-self: start; border: 0; }
.scan-form__status { margin: 6px 0 0; font-size: var(--smaller-font-size); color: hsla(0, 0%, 100%, .7); }
.scan-form__status.is-err { color: var(--first-color); }

/* ── Produktkarte: Detailansicht und Bewegung ───────────────────
   Die Karte war eine stille Box. Jetzt: Bild als Einstieg mit
   Zoom-Hinweis, Inhalte laufen gestaffelt ein, und ein Klick aufs
   Bild oeffnet die Lupe, damit Produktdetails lesbar werden.
   ------------------------------------------------------------- */
.scan-shop__media {
    position: relative; cursor: zoom-in; overflow: hidden;
}
.scan-shop__media::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, transparent 55%, hsla(228, 30%, 3%, .55) 100%);
}
.scan-shop__media img { transition: transform .5s cubic-bezier(.22, .8, .3, 1); }
.scan-shop__media:hover img { transform: scale(1.06); }

/* Lupe-Plakette: sagt, dass das Bild anklickbar ist. */
.scan-shop__zoom {
    position: absolute; right: 8px; bottom: 8px; z-index: 2;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px; border-radius: 999px;
    background: hsla(228, 12%, 6%, .78);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid hsla(0, 0%, 100%, .18);
    color: #fff; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
    pointer-events: none;
    transition: border-color .2s ease, color .2s ease;
}
.scan-shop__media:hover .scan-shop__zoom { border-color: var(--first-color); color: var(--first-color); }

/* Inhalte gestaffelt einblenden — dieselbe Handschrift wie .autoBlur. */
@keyframes scan-shop-rise {
    from { opacity: 0; transform: translateY(10px); filter: blur(6px); }
    to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
.scan-shop__body > * { animation: scan-shop-rise .42s cubic-bezier(.22, .8, .3, 1) both; }
.scan-shop__body > *:nth-child(1) { animation-delay: .05s; }
.scan-shop__body > *:nth-child(2) { animation-delay: .10s; }
.scan-shop__body > *:nth-child(3) { animation-delay: .15s; }
.scan-shop__body > *:nth-child(4) { animation-delay: .20s; }
.scan-shop__body > *:nth-child(5) { animation-delay: .25s; }
@media (prefers-reduced-motion: reduce) {
    .scan-shop__body > * { animation: none; }
    .scan-shop__media img { transition: none; }
}

/* ── Lupe: Vollbild-Detailansicht des Produktbilds ─────────────── */
.scan-lightbox {
    position: fixed; inset: 0; z-index: 1100;
    display: grid; grid-template-rows: 1fr auto; place-items: center;
    padding: calc(env(safe-area-inset-top) + 18px) 16px 22px;
    background: hsla(228, 30%, 2%, .92);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    animation: scan-lightbox-in .26s ease both;
}
.scan-lightbox[hidden] { display: none; }
@keyframes scan-lightbox-in { from { opacity: 0; } to { opacity: 1; } }

.scan-lightbox__frame {
    position: relative; overflow: hidden; border-radius: 14px;
    max-width: min(1100px, 94vw); max-height: 78vh;
    border: 1px solid hsla(0, 0%, 100%, .14);
    box-shadow: 0 30px 80px hsla(228, 30%, 2%, .7);
    cursor: zoom-in; touch-action: none;
}
.scan-lightbox__frame.is-zoomed { cursor: zoom-out; }
.scan-lightbox__frame img {
    display: block; max-width: min(1100px, 94vw); max-height: 78vh;
    width: auto; height: auto; object-fit: contain;
    transform-origin: var(--ox, 50%) var(--oy, 50%);
    transition: transform .35s cubic-bezier(.22, .8, .3, 1);
    /* Eigene Keyframes ohne transform: scan-shop-rise haelt mit fill-mode both
       ein transform fest und ueberstimmt damit den Zoom. */
    animation: scan-lightbox-img-in .4s cubic-bezier(.22, .8, .3, 1) both;
}
@keyframes scan-lightbox-img-in {
    from { opacity: 0; filter: blur(8px); }
    to   { opacity: 1; filter: blur(0); }
}
.scan-lightbox__frame.is-zoomed img { transform: scale(2.4); transition-duration: .45s; }

.scan-lightbox__cap {
    margin: 14px 0 0; text-align: center; max-width: 60ch;
    color: hsla(0, 0%, 100%, .72); font-size: var(--small-font-size);
}
.scan-lightbox__cap strong {
    display: block; margin-bottom: 3px;
    font-family: 'Kiona', sans-serif; font-weight: normal;
    font-size: 1.05rem; color: #fff;
}
.scan-lightbox__hint {
    margin: 8px 0 0; font-size: var(--smaller-font-size);
    color: hsla(0, 0%, 100%, .42);
}
.scan-lightbox__close {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
    display: grid; place-items: center;
    background: hsla(228, 12%, 6%, .8); border: 1px solid hsla(0, 0%, 100%, .18);
    color: #fff; font-size: 1.2rem;
}
.scan-lightbox__close:hover { border-color: var(--first-color); color: var(--first-color); }

@media (max-width: 767px) {
    /* Karte als Blatt ueber dem Karussell, Bild gross genug zum Erkennen. */
    .scan-shop {
        right: 12px; left: 12px; width: auto;
        top: auto; bottom: 186px; transform: none;
        max-height: 56vh;
        grid-template-columns: 1fr; display: block;
    }
    .scan-shop__media img { aspect-ratio: 1 / 1; height: auto; }
    .scan-shop__text { display: block; }
    .scan-shop__zoom { right: 10px; bottom: 10px; }
    /* Oben Kopfzeile, unten Chat-Leiste: beidseitig Luft lassen. */
    .scan-lightbox { padding: calc(env(safe-area-inset-top) + 70px) 14px 92px; }
    .scan-lightbox__close { top: calc(env(safe-area-inset-top) + 70px); right: 14px; }
    .scan-lightbox__frame { max-height: 56vh; }
    .scan-lightbox__frame img { max-height: 56vh; }
    .scan-lightbox__frame.is-zoomed img { transform: scale(2.8); }
}
@media (prefers-reduced-motion: reduce) {
    .scan-lightbox, .scan-lightbox__frame img { animation: none; }
    .scan-lightbox__frame img { transition: none; }
}

/* ── Marker als Spiel-Tooltip ───────────────────────────────────
   Die Details stehen jetzt ueber dem Objekt in der Szene statt in
   einer Karte am Rand: Fahne oben, Stiel nach unten, Punkt am Objekt.
   ------------------------------------------------------------- */
.egs-hotspot {
    flex-direction: column-reverse;   /* Fahne oben, Punkt unten */
    align-items: center; gap: 0;
}
.egs-hotspot__label {
    position: relative;
    margin-bottom: 9px;
    max-width: min(240px, 46vw);
    white-space: normal; text-align: center;
    padding: 8px 12px 9px; border-radius: 11px;
    background: hsla(228, 14%, 7%, .82);
    border-color: hsla(0, 0%, 100%, .16);
    box-shadow: 0 10px 30px hsla(228, 30%, 2%, .55);
    opacity: 0; transform: translateY(6px) scale(.96);
    transition: opacity .22s ease, transform .22s cubic-bezier(.22, .8, .3, 1);
}
/* Stiel vom Schild zum Punkt */
.egs-hotspot__label::after {
    content: ''; position: absolute; left: 50%; bottom: -7px;
    width: 1px; height: 7px; background: hsla(0, 0%, 100%, .3);
    transform: translateX(-50%);
}
.egs-hotspot:hover .egs-hotspot__label,
.egs-hotspot.is-open .egs-hotspot__label { opacity: 1; transform: translateY(0) scale(1); }
.egs-hotspot__label b { font-size: .8rem; }
.egs-hotspot__label i { display: block; margin-top: 1px; }

/* Beschreibung und Knopf traegt scans.js nach. */
.egs-hotspot__text {
    display: block; margin-top: 5px;
    font-size: var(--smaller-font-size); line-height: 1.35;
    color: hsla(0, 0%, 100%, .74);
}
.egs-hotspot__more {
    margin-top: 7px; padding: 4px 11px; border-radius: 999px;
    background: transparent; cursor: pointer;
    border: 1px solid var(--first-color); color: var(--first-color);
    font-family: var(--body-font); font-size: var(--smaller-font-size);
}
.egs-hotspot__more:hover { background: var(--first-color); color: #fff; }

@media (hover: none) {
    /* Ohne Hover: Titel steht immer, der Rest erst nach dem Antippen. */
    .egs-hotspot__label { opacity: 1; transform: none; }
    .egs-hotspot__label i,
    .egs-hotspot__text,
    .egs-hotspot__more { display: none; }
    .egs-hotspot.is-open .egs-hotspot__label i,
    .egs-hotspot.is-open .egs-hotspot__text { display: block; }
    .egs-hotspot.is-open .egs-hotspot__more { display: inline-block; }
    .egs-hotspot.is-open { z-index: 4; }
}
@media (prefers-reduced-motion: reduce) {
    .egs-hotspot__label { transition: none; }
}

/* ── Bitte drehen: Rundgang braucht Querformat ──────────────────
   Der begehbare Modus ist im Hochformat unbrauchbar — zu wenig
   Blickfeld und das Steuerkreuz deckt die halbe Szene zu.
   ------------------------------------------------------------- */
.scan-rotate {
    position: fixed; inset: 0; z-index: 1050;
    display: grid; place-items: center; gap: 0;
    padding: 24px;
    background: hsla(228, 26%, 3%, .93);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    text-align: center;
}
.scan-rotate[hidden] { display: none; }
.scan-rotate__inner { display: grid; justify-items: center; gap: 14px; max-width: 30ch; }
.scan-rotate__icon {
    width: 62px; height: 96px; border-radius: 12px;
    border: 2px solid hsla(0, 0%, 100%, .8);
    position: relative;
    animation: scan-rotate-turn 2.6s cubic-bezier(.6, 0, .3, 1) infinite;
}
.scan-rotate__icon::before {
    content: ''; position: absolute; left: 50%; bottom: 6px;
    width: 18px; height: 2px; border-radius: 2px;
    background: hsla(0, 0%, 100%, .7); transform: translateX(-50%);
}
@keyframes scan-rotate-turn {
    0%, 22%   { transform: rotate(0deg); }
    45%, 78%  { transform: rotate(-90deg); }
    100%      { transform: rotate(-90deg); }
}
.scan-rotate__title {
    margin: 0; font-family: 'Kiona', sans-serif; font-weight: normal;
    font-size: 1.35rem; color: #fff;
}
.scan-rotate__sub { margin: 0; font-size: var(--small-font-size); color: hsla(0, 0%, 100%, .66); }
.scan-rotate__skip {
    margin-top: 4px; padding: 7px 16px; border-radius: 999px; cursor: pointer;
    background: transparent; border: 1px solid hsla(0, 0%, 100%, .24);
    color: hsla(0, 0%, 100%, .8);
    font-family: var(--body-font); font-size: var(--smaller-font-size);
}
.scan-rotate__skip:hover { border-color: var(--first-color); color: var(--first-color); }
@media (prefers-reduced-motion: reduce) { .scan-rotate__icon { animation: none; } }

/* Im Querformat bleibt fuer das HUD wenig Hoehe — enger setzen. */
@media (max-width: 950px) and (orientation: landscape) and (pointer: coarse) {
    .scan-hud { padding: calc(var(--header-height) + .4rem) 14px 12px; }
    .scan-hud__top { display: none; }
    .scan-carousel, .scan-bar__credit { display: none; }
    .scan-caption { padding: 4px 9px; }
    .scan-caption__title { font-size: 1.05rem; }
    .scan-hint { font-size: 10px; }
}

/* ── Marker in der Bildmitte oeffnen sich von selbst ────────────
   Wie im Spiel: was man anvisiert, zeigt seine Angaben — samt
   kleinem Vorschaubild. Wegsehen schliesst es wieder.
   ------------------------------------------------------------- */
.egs-hotspot__thumb {
    /* Quellen sind 560x560 — quadratisch zeigen heisst: nichts abschneiden. */
    display: none; width: 110px; height: 110px; aspect-ratio: 1 / 1;
    object-fit: cover; border-radius: 8px;
    margin: 0 auto 7px; background: #101318;
}
.egs-hotspot.is-focus .egs-hotspot__label,
.egs-hotspot.is-open  .egs-hotspot__label { opacity: 1; transform: translateY(0) scale(1); }
.egs-hotspot.is-focus .egs-hotspot__thumb,
.egs-hotspot.is-open  .egs-hotspot__thumb,
.egs-hotspot:hover    .egs-hotspot__thumb { display: block; }
.egs-hotspot.is-focus { z-index: 5; }
/* Der anvisierte Punkt tritt hervor. */
.egs-hotspot.is-focus .egs-hotspot__dot { transform: scale(1.25); }
.egs-hotspot__dot { transition: transform .2s cubic-bezier(.22, .8, .3, 1); }

@media (hover: none) {
    /* Auf Touch oeffnet der Fokus dasselbe wie ein Tipp. */
    .egs-hotspot.is-focus .egs-hotspot__label i,
    .egs-hotspot.is-focus .egs-hotspot__text { display: block; }
    .egs-hotspot.is-focus .egs-hotspot__more { display: inline-block; }
}

/* ── Szenenauswahl ausblenden, sobald man die Szene anfasst ─────
   Wer sich umsieht, will das Bild sehen und nicht die Kachelleiste.
   Der Pfeil holt sie zurueck.
   ------------------------------------------------------------- */
.scan-picker-toggle {
    justify-self: start;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px 5px 8px; border-radius: 999px; cursor: pointer;
    background: hsla(228, 12%, 6%, .72);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid hsla(0, 0%, 100%, .14); color: #fff;
    font-family: var(--body-font); font-size: var(--smaller-font-size);
    transition: border-color .2s ease, color .2s ease;
}
.scan-picker-toggle:hover { border-color: var(--first-color); color: var(--first-color); }
.scan-picker-toggle i { font-size: 1.05rem; line-height: 1; transition: transform .25s ease; }
.scan-hud__bottom.is-collapsed .scan-picker-toggle i { transform: rotate(180deg); }

.scan-carousel {
    transition: opacity .3s ease, transform .3s cubic-bezier(.22, .8, .3, 1),
                max-height .3s ease, margin .3s ease;
    transform-origin: bottom center;
}
.scan-hud__bottom.is-collapsed .scan-carousel {
    opacity: 0; transform: translateY(14px) scale(.98);
    max-height: 0; margin-bottom: -.6rem;
    pointer-events: none; overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
    .scan-carousel { transition: opacity .01s linear; }
}

/* ── Touch: nur der anvisierte Marker beschriftet ───────────────
   Alle Schilder gleichzeitig zu zeigen macht die Szene unlesbar —
   auf dem Geraet lagen sie uebereinander und ueber der Fusszeile.
   ------------------------------------------------------------- */
@media (hover: none) {
    .egs-hotspot__label { opacity: 0; }
    .egs-hotspot.is-focus .egs-hotspot__label,
    .egs-hotspot.is-open  .egs-hotspot__label { opacity: 1; }
}

/* ── Mobil: Vollbild-Ansicht ────────────────────────────────────
   Eine Szene antippen heisst: alles andere weg. Kopfzeile, Auswahl,
   Fusszeile und Chat verschwinden, bis man das X drueckt.
   ------------------------------------------------------------- */
.scan-exit {
    position: fixed; z-index: 1040;
    top: calc(env(safe-area-inset-top) + 12px);
    right: calc(env(safe-area-inset-right) + 12px);
    width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
    display: grid; place-items: center;
    background: hsla(228, 12%, 6%, .74);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid hsla(0, 0%, 100%, .2); color: #fff; font-size: 1.25rem;
}
.scan-exit[hidden] { display: none; }
.scan-exit:hover { border-color: var(--first-color); color: var(--first-color); }

body.scan-immersive .header,
body.scan-immersive .chat-search-container,
body.scan-immersive .chat-minimize-btn,
body.scan-immersive #chat-launcher,
body.scan-immersive .scan-hud__top,
body.scan-immersive .scan-carousel,
body.scan-immersive .scan-picker-toggle,
body.scan-immersive .scan-bar,
body.scan-immersive .scan-hint { display: none !important; }

body.scan-immersive .scan-hud {
    padding: calc(env(safe-area-inset-top) + 12px) 14px
             calc(env(safe-area-inset-bottom) + 12px);
}
body.scan-immersive .scan-hud::before { height: 18vh; }
body.scan-immersive .scan-hud::after  { height: 22vh; }
/* Nicht an Breiten-Abfragen haengen: im Vollbild gilt das immer. */
/* Titel und Werkzeuge nach oben: unten links sitzt auf Touch das
   Steuerkreuz, dort waere beides im Weg. */
body.scan-immersive .scan-hud__mid {
    flex-direction: column; align-items: flex-start;
    justify-content: flex-start; gap: .4rem;
}
body.scan-immersive .scan-caption {
    gap: .1rem; padding: 5px 10px; border-radius: 9px;
    background: hsla(228, 12%, 6%, .58);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid hsla(0, 0%, 100%, .12);
}
body.scan-immersive .scan-caption__title { font-size: 1.1rem; line-height: 1; }
body.scan-immersive .scan-caption__meta { font-size: .54rem; letter-spacing: .14em; }
body.scan-immersive .scan-tools { gap: 6px; justify-content: flex-start; }
body.scan-immersive .scan-tools button { padding: 5px 9px; font-size: 11px; }
/* Vollbild-Knopf ist hier ueberfluessig und liegt unter dem X. */
body.scan-immersive .scan-tools button:last-child { display: none; }
/* Die Produktkarte darf im Vollbild wieder mittig stehen. */
body.scan-immersive .scan-shop { bottom: auto; top: 50%; transform: translateY(-50%); }

/* ── Vollbild: linke Haelfte gehen, rechte umsehen ──────────────
   Der Viewer bringt nur ein festes Steuerkreuz unten links mit. Die
   Zone hier setzt es unter den Daumen, wo immer man links aufsetzt;
   rechts bleibt die Flaeche frei, dort dreht der Blick.
   ------------------------------------------------------------- */
.scan-zones { position: fixed; inset: 0; z-index: 6; display: none; pointer-events: none; }
body.scan-immersive .scan-zones { display: block; }
.scan-zone--walk {
    position: absolute; left: 0; top: 0; width: 50%; height: 100%;
    pointer-events: auto; touch-action: none;
}
/* Das Steuerkreuz folgt dem Daumen statt in der Ecke zu kleben. */
body.scan-immersive .egs-stick {
    background: hsla(228, 12%, 6%, .28);
    border-color: hsla(0, 0%, 100%, .12);
    opacity: 0; transition: opacity .18s ease;
}
body.scan-immersive .egs-stick.is-live { opacity: 1; }

/* Einblendung nach dem Drehen: welche Haelfte macht was. */
.scan-zones__hint {
    position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr;
    pointer-events: none; opacity: 0; transition: opacity .45s ease;
}
.scan-zones__hint.is-on { opacity: 1; }
.scan-zones__half {
    /* min-content + align-content, sonst zieht das Raster die drei Zeilen
       ueber die volle Hoehe auseinander. */
    display: grid; grid-auto-rows: min-content; align-content: center;
    justify-items: center; gap: 7px;
    color: #fff; text-align: center;
    background: hsla(228, 26%, 3%, .5);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.scan-zones__half + .scan-zones__half { border-left: 1px solid hsla(0, 0%, 100%, .14); }
.scan-zones__half i { font-size: 1.9rem; color: var(--first-color); }
.scan-zones__half span {
    font-family: 'Kiona', sans-serif; font-size: .78rem; letter-spacing: .18em;
    text-transform: uppercase;
}
.scan-zones__half small { font-size: var(--smaller-font-size); color: hsla(0, 0%, 100%, .6); }

/* Erste Ansicht auf dem Handy ist nur Schaufenster — angefasst wird
   erst im Vollbild. */
body.scan-lock-stage .scan-stage { pointer-events: none; }

/* ── Kein 3D moeglich: kurze Notiz statt Bedienhilfe ────────────
   Wo nichts zu steuern ist, braucht es auch keine Steuerungs-
   anleitung und keine Werkzeuge — nur den Hinweis und das Video.
   ------------------------------------------------------------- */
.scan-notice {
    justify-self: start; margin: 0;
    display: flex; align-items: flex-start; gap: 7px;
    max-width: 62ch; padding: 7px 12px; border-radius: 10px;
    background: hsla(228, 12%, 6%, .72);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid hsla(0, 0%, 100%, .14);
    color: hsla(0, 0%, 100%, .78); font-size: var(--smaller-font-size);
    line-height: 1.45;
}
.scan-notice[hidden] { display: none; }
.scan-notice i { color: var(--first-color); font-size: 1rem; line-height: 1.3; }

/* Ohne Viewer: Hinweiszeile, Werkzeuge und Dreh-Aufforderung weg. */
body.scan-video-only .scan-hint,
body.scan-video-only .scan-tools,
body.scan-video-only .scan-rotate { display: none !important; }

/* Das Video bekommt denselben Auftritt wie der Rest der Seite. */
.scan-video-fallback {
    animation: scan-video-in 1.1s cubic-bezier(.22, .8, .3, 1) both;
}
@keyframes scan-video-in {
    from { opacity: 0; filter: blur(26px); transform: scale(1.045); }
    to   { opacity: 1; filter: blur(0);    transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .scan-video-fallback { animation: none; }
}

/* ── Marker: mehr Leben ─────────────────────────────────────────
   Die Punkte kamen alle gleichzeitig und standen dann still. Jetzt
   setzen sie nacheinander auf, atmen leicht und reagieren sichtbar,
   wenn man sie anvisiert.
   ------------------------------------------------------------- */
.egs-hotspot.is-entering .egs-hotspot__dot {
    animation: egs-drop .62s cubic-bezier(.2, 1.5, .4, 1) both;
    animation-delay: var(--egs-in, 0s);
}
@keyframes egs-drop {
    0%   { transform: scale(0) translateY(-14px); opacity: 0; }
    60%  { transform: scale(1.35) translateY(0);  opacity: 1; }
    100% { transform: scale(1)    translateY(0);  opacity: 1; }
}

/* Ruhiges Atmen, damit die Punkte nicht tot wirken. */
.egs-hotspot__dot { animation: egs-breathe 3.4s ease-in-out infinite; }
@keyframes egs-breathe {
    0%, 100% { box-shadow: 0 0 0 3px hsla(0, 0%, 100%, .22), 0 2px 10px hsla(228, 30%, 2%, .7); }
    50%      { box-shadow: 0 0 0 5px hsla(0, 0%, 100%, .10), 0 2px 14px hsla(228, 30%, 2%, .8); }
}
.egs-hotspot.is-entering .egs-hotspot__dot { animation-name: egs-drop; }

/* Anvisiert: Punkt waechst, Ring zieht enger, Farbe zieht an. */
.egs-hotspot.is-focus .egs-hotspot__dot,
.egs-hotspot.is-open  .egs-hotspot__dot {
    transform: scale(1.45);
    background: var(--first-color);
    box-shadow: 0 0 0 4px hsla(var(--accent-h), var(--accent-s), var(--accent-l), .3),
                0 0 18px hsla(var(--accent-h), var(--accent-s), var(--accent-l), .55);
}
.egs-hotspot.is-focus .egs-hotspot__dot::after,
.egs-hotspot.is-open  .egs-hotspot__dot::after { animation-duration: 1.3s; }

/* Naeher = kraeftiger. --egs-dist setzt der Viewer pro Frame. */
.egs-hotspot__dot::after { animation-timing-function: cubic-bezier(.2, .7, .3, 1); }

@media (prefers-reduced-motion: reduce) {
    .egs-hotspot__dot,
    .egs-hotspot.is-entering .egs-hotspot__dot { animation: none; }
}