/* IRONHAUS – 3D-Effekte (nur Business + Premium; Basic bindet diese Datei NICHT ein).
   Reines CSS-3D + SVG. Dauer-Animationen nur transform/opacity; pausiert ausserhalb des Viewports (.fx-run)
   (Skript: ../shared/fx3d.js). Ohne JS / im fx-lite-Modus: statische, schoene Pose. */

/* ---------- Hero-Szene (Hantelscheibe / Langhantel) ---------- */
.fx-hero3d {
  position: relative; height: 150px; margin: 0 0 var(--space-4);
  perspective: 900px; pointer-events: none; user-select: none;
}
.fx-stage {
  position: absolute; left: 0; top: 50%; width: 260px; height: 260px; margin-top: -130px;
  transform-origin: 0 50%; transform: scale(.52); transform-style: preserve-3d;
}
.fx-par, .fx-spin, .fx-obj { position: absolute; inset: 0; transform-style: preserve-3d; }
.fx-par { transition: transform .9s cubic-bezier(.22, 1, .36, 1); }
.fx-spin { transform: rotateX(-9deg) rotateY(-26deg); }
.fx-obj { transform-style: preserve-3d; }
/* Weicher Kontaktschatten unter der Hantel (Licht oben links, daher leicht nach rechts versetzt); reine Gradient-Flaeche, nicht animiert */
.fx-stage::after { content: ""; position: absolute; left: 20%; top: 100%; width: 72%; height: 38px; margin-top: -4px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, .22) 55%, rgba(0, 0, 0, 0)); }
.fx-ground {
  position: absolute; left: 6%; right: 6%; bottom: -14%; height: 14%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent); transform: translateZ(-160px);
}

/* Scheibe: Scheiben-Slices ergeben Dicke, Vorderseite traegt die Grafik */
.fx-plate { position: absolute; left: 10px; top: 10px; width: 240px; height: 240px; transform-style: preserve-3d; transform: translateZ(calc(var(--pz, 0) * 1px)); }
.fx-plate.is-sm { left: 45px; top: 45px; width: 170px; height: 170px; }
.fx-sl {
  position: absolute; inset: 0; border-radius: 50%;
  background: #1a1b1d; box-shadow: inset 0 0 0 1px #34373c;
  transform: translateZ(calc(var(--z) * 1px));
}
.fx-sl { background: linear-gradient(115deg, #3d4046, #1e1f22 45%, #121314); }
.fx-sl:nth-child(odd) { background: linear-gradient(115deg, #34373c, #1a1b1d 45%, #101112); }
.fx-face {
  position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden;
  transform: translateZ(calc(var(--z) * 1px)) rotateY(var(--ry, 0deg));
  background:
    radial-gradient(circle, #0c0c0d 0 12%, #4a4d53 12.5% 14%, transparent 14.5%),
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 46%),
    radial-gradient(circle at 72% 80%, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 55%),
    conic-gradient(from 20deg, #2c2e32, #3f434a 12%, #2a2c30 25%, #3c4046 40%, #2a2c30 55%, #3f434a 70%, #2a2c30 85%, #2c2e32);
  box-shadow: inset 0 0 0 5px #17181a, inset 0 0 0 8px #ffd400, inset 0 0 0 11px #17181a, 0 0 0 1px #0d0d0e;
}
/* Rueckseite entfaellt: die Scheibe dreht nie ueber +-90 Grad (und WebKit zeigte sie faelschlich vorn) */
.fx-face svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-face text { font-family: var(--font-display); font-style: italic; font-weight: 800; }

/* Stange (Zylinder aus Scheiben) */
.fx-bar { position: absolute; left: 117px; top: 117px; width: 26px; height: 26px; transform-style: preserve-3d; }
.fx-bp { position: absolute; left: 50%; top: 0; width: 300px; height: 26px; margin-left: -150px; background: linear-gradient(180deg, #f2f4f7, #c9cdd4 14%, #8e949d 40%, #565a61 72%, #34373b); }
.fx-bp.a { transform: rotateY(90deg); }
.fx-bp.b { transform: rotateY(90deg) rotateX(90deg); }
.fx-bar .fx-sl { background: radial-gradient(circle at 36% 32%, #d8dbe0, #8b9099 45%, #4c5057); box-shadow: none; }
.fx-bar .fx-sl:nth-child(odd) { background: radial-gradient(circle at 36% 32%, #c4c7cd, #7d828b 45%, #43464c); }
.fx-collar { position: absolute; left: 106px; top: 106px; width: 48px; height: 48px; transform-style: preserve-3d; }
.fx-collar .fx-sl { background: #ffd400; box-shadow: inset 0 0 0 2px #c9a800; }
.fx-collar .fx-sl:nth-child(odd) { background: #f0c800; }

/* Bewegung: reines CSS, laeuft auch im fx-lite-Modus (nur bei "Bewegung reduzieren" aus); pausiert nur,
   wenn der Hero ausserhalb des Viewports ist bzw. der Tab versteckt (Skript ../shared/fx3d.js). Nur transform/opacity.
   Business: dezent, KEINE Dauerrotation - die Scheibe steht in fester Pose und pendelt nur langsam (lange Periode, ease-in-out).
   Nur mit JS-Klasse .fx3d (also nicht im fx-lite-Modus) und nur bei "Bewegung erlaubt". */
@media (prefers-reduced-motion: no-preference) {
  .fx3d .fx-obj { animation: fx-rock 11s ease-in-out infinite alternate; }
  .fx3d .fx-face::after { animation: fx-glint 11s ease-in-out infinite alternate; }
  .fx3d [data-fx-scene]:not(.fx-run) .fx-obj, .fx3d [data-fx-scene]:not(.fx-run) .fx-face::after,
  .fx3d.fx-hidden .fx-obj, .fx3d.fx-hidden .fx-face::after { animation-play-state: paused; }
}
/* Reflex schwenkt mit der Neigung (Rotation einer kreisrunden Gradientflaeche: bleibt exakt in der Scheibe) */
@keyframes fx-glint { from { transform: rotate(-34deg); } to { transform: rotate(34deg); } }
@keyframes fx-rock { from { transform: rotateY(-7deg) rotateX(-3deg); } to { transform: rotateY(9deg) rotateX(3deg); } }
/* Statischer Glanz auf der Frontflaeche (Licht links oben) */
.fx-face::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: .55;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .30) 48%, rgba(255, 255, 255, .06) 56%, rgba(255, 255, 255, 0) 64%); }
.fx3d [data-fx-scene] .fx-par { transform: rotateX(calc(var(--py, 0) * -7deg)) rotateY(calc(var(--px, 0) * 12deg)); }

@media (min-width: 1000px) {
  .fx-hero3d {
    position: absolute; right: var(--space-5); top: 22%; width: min(42%, 440px); height: 440px; margin: -220px 0 0;
  }
  .fx-stage { left: 50%; margin-left: -130px; transform-origin: 50% 50%; transform: scale(.82); }
}

/* ---------- Scroll-Reveal mit leichter Perspektive ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.fx3d .reveal { transform: perspective(1100px) translateY(30px) rotateX(5deg); transform-origin: 50% 0; }
  html.fx3d .reveal.is-visible { transform: none; }
}

/* ---------- Karten: 3D-Tilt mit Tiefen-Ebenen (nur feiner Zeiger, nicht im Lite-Modus) ---------- */
html.fx3d .fx-hot {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transform-style: preserve-3d; transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}
html.fx3d .fx-hot:hover { box-shadow: 0 26px 44px -22px rgba(0,0,0,.6); }
html.fx3d .fx-hot > * { transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
html.fx3d .fx-hot:hover > .feature-icon, html.fx3d .fx-hot:hover > .price-amount { transform: translateZ(calc(var(--fz, 1) * 38px)); }
html.fx3d .fx-hot:hover > h3, html.fx3d .fx-hot:hover > .price, html.fx3d .fx-hot:hover > .coach-teaser img { transform: translateZ(calc(var(--fz, 1) * 26px)); }
html.fx3d .fx-hot:hover > .btn, html.fx3d .fx-hot:hover > .add-cart-btn, html.fx3d .fx-hot:hover > .price-features { transform: translateZ(calc(var(--fz, 1) * 16px)); }
html.fx3d .fx-hot:hover > p:not(.price) { transform: translateZ(calc(var(--fz, 1) * 12px)); }
html.fx3d .fx-hot:hover > img { transform: translateZ(calc(var(--fz, 1) * 22px)); }
html.fx3d .fx-hot:hover > figcaption { transform: translateZ(calc(var(--fz, 1) * 14px)); }
.fx-pro { --fz: 1.5; }
.price-card, .feature-card, .coach-teaser, .iw-card, .blog-card, .product-card { transform-origin: 50% 50%; }

/* ---------- Premium: Tiefen-Ebenen im Hero ---------- */
.fx-depth { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.fx-ghost {
  position: absolute; right: -2vw; bottom: -4vw; margin: 0; line-height: .8;
  font-family: var(--font-display); font-style: italic; font-weight: 800; text-transform: uppercase;
  font-size: clamp(7rem, 24vw, 22rem); letter-spacing: -.02em; color: transparent;
  -webkit-text-stroke: 2px rgba(255, 212, 0, .16); white-space: nowrap;
}
.fx-stripe { position: absolute; width: 14px; height: 140%; top: -20%; background: #ffd400; opacity: .1; transform: skewX(-22deg); }
.fx-stripe.s1 { right: 31%; } .fx-stripe.s2 { right: 24%; width: 6px; opacity: .14; } .fx-stripe.s3 { right: 9%; width: 30px; opacity: .06; }
.fx3d .fx-ghost { transform: translate3d(calc(var(--px, 0) * -26px), calc(var(--sy, 0) * -50px + var(--py, 0) * -10px), 0); }
.fx3d .fx-stripe.s1 { transform: skewX(-22deg) translate3d(calc(var(--px, 0) * 40px), 0, 0); }
.fx3d .fx-stripe.s2 { transform: skewX(-22deg) translate3d(calc(var(--px, 0) * -22px), 0, 0); }
.fx3d .fx-stripe.s3 { transform: skewX(-22deg) translate3d(calc(var(--px, 0) * 14px), 0, 0); }
.fx3d.fx-pro .hero-bg { transform: translate3d(calc(var(--px, 0) * -14px), calc(var(--sy, 0) * 60px + var(--py, 0) * -8px), 0) scale(1.1); }
.fx-ghost, .fx-stripe { transition: transform .9s cubic-bezier(.22, 1, .36, 1); }
@media (max-width: 999px) { .fx-ghost { font-size: 9rem; right: -4vw; bottom: -1rem; } .fx-stripe.s3 { display: none; } }

/* ---------- Premium: 3D-Laufband (Stats + Live-Auslastung) ---------- */
.fx-band { background: #111214; color: #fff; overflow: hidden; padding: var(--space-5) 0 var(--space-6); perspective: 900px; border-block: 3px solid #ffd400; }
.fx-band__plane { transform: rotateX(22deg) scale(1.04); transform-origin: 50% 40%; transform-style: preserve-3d; }
.fx-band__row { display: flex; width: max-content; font-family: var(--font-display); font-style: italic; font-weight: 800; text-transform: uppercase; line-height: 1.05; white-space: nowrap; }
.fx-band__row + .fx-band__row { margin-top: .15em; }
.fx-band__row span { padding-right: .6em; }
.fx-band__row.r1 { font-size: clamp(2.2rem, 7vw, 4.4rem); color: #ffd400; }
.fx-band__row.r2 { font-size: clamp(1.5rem, 4.4vw, 2.8rem); color: #e6e7ea; }
.fx-band__row i { display: inline-block; width: .3em; height: .62em; background: #ffd400; transform: skewX(-22deg); margin: 0 .55em .02em .1em; vertical-align: middle; }
.fx-band__row.r2 i { background: #8a8d94; }
.fx-band__row b { font-weight: 800; color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .fx3d .fx-band__row { animation: fx-run-l 38s linear infinite; animation-play-state: paused; }
  .fx3d .fx-band__row.r2 { animation-name: fx-run-r; animation-duration: 46s; }
  .fx3d .fx-run .fx-band__row { animation-play-state: running; }
  .fx3d.fx-hidden .fx-band__row { animation-play-state: paused; }
}
@keyframes fx-run-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes fx-run-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ---------- Premium: Coach-Flip-Karten ---------- */
.fx-flip-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(4, 1fr); margin-top: var(--space-6); }
@media (max-width: 980px) { .fx-flip-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fx-flip-grid { grid-template-columns: 1fr; } }
.fx-flip { position: relative; aspect-ratio: 4 / 5; min-height: 17rem; perspective: 1100px; color: #fff; }
@media (max-width: 560px) { .fx-flip { aspect-ratio: 1 / 1.08; height: auto; min-height: 20rem; } }
.fx-flip__inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.34, 1.18, .5, 1); }
.fx-flip.is-flipped .fx-flip__inner { transform: rotateY(180deg); }
.fx-flip__front, .fx-flip__back { position: absolute; inset: 0; backface-visibility: hidden; overflow: hidden; border-radius: var(--radius-md); }
.fx-flip__front { background: #1c1d1f; box-shadow: 0 18px 34px -22px rgba(0,0,0,.6); }
.fx-flip__front img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; aspect-ratio: auto; }
.fx-flip__front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(15,15,16,.92)); }
.fx-flip__cap { position: absolute; z-index: 1; left: var(--space-4); right: 64px; bottom: var(--space-4); display: flex; flex-direction: column; }
.fx-flip__cap strong { font-family: var(--font-display); font-style: italic; text-transform: uppercase; font-size: 1.5rem; line-height: 1.05; }
.fx-flip__cap span { color: #ffd400; font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }
.fx-flip__back {
  transform: rotateY(180deg); background: #2b2d31; border-top: 5px solid #ffd400; padding: var(--space-5) var(--space-5) 64px;
  display: flex; flex-direction: column; justify-content: flex-start; box-shadow: 0 18px 34px -22px rgba(0,0,0,.6);
}
.fx-flip__back h3 { font-size: 1.35rem; margin-bottom: var(--space-1); }
.fx-flip__back p { color: #d3d5d9; font-size: .92rem; margin-bottom: var(--space-3); }
.fx-flip__back .coach-profile-tags { margin-top: auto; }
.fx-flip__btn {
  position: absolute; z-index: 3; right: var(--space-3); bottom: var(--space-3); width: 48px; height: 48px; border-radius: 50%;
  background: #ffd400; color: #1c1d1f; border: 0; cursor: pointer; display: grid; place-items: center; transition: transform .2s ease;
}
.fx-flip__btn:hover { transform: scale(1.08); }
.fx-flip__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px #1c1d1f; }
.fx-flip__btn svg { width: 22px; height: 22px; transition: transform .5s ease; }
.fx-flip.is-flipped .fx-flip__btn svg { transform: rotate(180deg); }
/* Ohne JS: beide Seiten gestapelt statt gedreht */
html:not(.fx-ready) .fx-flip { aspect-ratio: auto; min-height: 0; }
html:not(.fx-ready) .fx-flip__inner, html:not(.fx-ready) .fx-flip__front, html:not(.fx-ready) .fx-flip__back { position: relative; inset: auto; transform: none; }
html:not(.fx-ready) .fx-flip__front { aspect-ratio: 4 / 5; }
html:not(.fx-ready) .fx-flip__btn { display: none; }
.fx-ready .fx-flip:not(.is-flipped) .fx-flip__back, .fx-ready .fx-flip.is-flipped .fx-flip__front { visibility: hidden; transition: visibility 0s .35s; }
@media (prefers-reduced-motion: reduce) { .fx-flip__inner { transition: none; } }
.fx-flip-foot { margin-top: var(--space-6); }

/* ---------- Premium: Logo klappt beim Laden einmal um, bei Hover/Fokus erneut ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.fx3d.fx-pro .brand:not(.brand-footer) { display: inline-block; transform-origin: 0 50%; transition: transform .8s cubic-bezier(.3, .8, .3, 1); animation: fx-logo 1s cubic-bezier(.3, .8, .3, 1) .4s backwards; }
  html.fx3d.fx-pro .brand:not(.brand-footer):hover, html.fx3d.fx-pro .brand:not(.brand-footer):focus-visible { transform: perspective(500px) rotateX(360deg); }
}
@keyframes fx-logo { from { transform: perspective(500px) rotateX(-90deg); } to { transform: perspective(500px) rotateX(0deg); } }

/* Reveal-Perspektive darf nie horizontal scrollen lassen */
html.fx3d main { overflow-x: clip; }


/* ==========================================================================
   Premium-Hero: Langhantel (2.5D)
   Gewaehlt: schattierte Inline-SVG in drei Tiefenebenen (links hinten / Stange / rechts vorn) statt
   Zylinder aus CSS-3D-Scheiben. Grund: saubere Rundungen, Chrom-Verlaeufe, Raendelung und Beschriftung ohne Kanten/Z-Fighting,
   nur 3 Composite-Layer + 1 Schatten, daher auf Mobile guenstig. Tiefe entsteht durch echte Parallaxe (translateZ + leichte Drehung).
   Licht: oben links. Animiert wird ausschliesslich transform/opacity.
   ========================================================================== */
.fx-hero3d.is-pro { height: auto; aspect-ratio: 900 / 380; max-width: 560px; margin: 0 0 var(--space-3); perspective: none; }
.fx-bb { position: absolute; inset: 0; perspective: 1100px; --bb-rx: 3deg; --bb-ry: -4deg; }
.bb-floor { position: absolute; inset: 0; }
.bb-floor svg, .bb-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bb-tilt, .bb-settle, .bb-float { position: absolute; inset: 0; transform-style: preserve-3d; }
.bb-tilt { transform: rotateX(var(--bb-rx)) rotateY(var(--bb-ry)); }
/* Alle Ebenen liegen in einer Ebene: so sitzt die Stange in jeder Drehphase exakt in den Scheibenlöchern.
   Die Tiefe entsteht durch die perspektivische Drehung (vordere Scheibe wächst, hintere schrumpft). */
.bb-l { filter: brightness(.86); }
/* Scheibenvorderseiten als eigene Ebenen: Breite = sin(Gierwinkel), Position = cos(Gierwinkel) (Skript); Basis = Pose bei 30 Grad */
.bb-face { position: absolute; overflow: hidden; border-radius: 50%; transform-origin: 50% 50%; will-change: transform; pointer-events: none; }
.bb-face svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.bb-face i { position: absolute; inset: 0; border-radius: 50%; will-change: transform; background: linear-gradient(105deg, rgba(255,255,255,0) 28%, rgba(255,255,255,.17) 50%, rgba(255,255,255,0) 72%); }
/* Eigene Bühne unter dem Foto-Hero: die Hantel liegt nicht über dem Foto, sondern wie ein Produktfoto auf dunklem Grund. */
.bb-stage { position: relative; overflow: hidden; padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.5rem, 6vw, 4.5rem);
  background: radial-gradient(ellipse 60% 70% at 70% 62%, #2a2c31 0%, #17181b 58%, #111214 100%); }
.bb-stage__inner { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.bb-stage__text .section-title { margin-bottom: .75rem; }
.bb-stage__lead { color: #c9cbd0; max-width: 34ch; margin: 0; }
.bb-stage .fx-hero3d.is-pro { width: 100%; max-width: 620px; margin: 0 auto; }
@media (min-width: 860px) { .bb-stage__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* Bewegung: nur mit .fx3d (nicht fx-lite), nur bei "Bewegung erlaubt". Schweben/Pendeln mit langer Periode,
   Einschwingen einmalig beim Erscheinen. Schleifen pausieren ausserhalb des Viewports (.fx-run) und bei versteckter Seite. */
@media (prefers-reduced-motion: no-preference) {
  .fx3d .bb-settle { animation: bb-settle 1.7s cubic-bezier(.2, .8, .25, 1) .15s backwards; }
  .fx3d .bb-layer, .fx3d .bb-face { animation: bb-in .9s ease-out .15s backwards; }
  .fx3d .bb-floor { animation: bb-in 1.2s ease-out .15s backwards; }
  .fx3d .bb-float { animation: bb-hover 7s ease-in-out infinite alternate; }
  /* Lite (schwache Geraete): nur einfaches CSS-Pendeln, keine Skript-Schleife */
  .fx-lite .bb-float { animation: bb-hover 7s ease-in-out infinite alternate, bb-turn 11s ease-in-out infinite alternate; }
  :is(.fx3d, .fx-lite) .bb-floor svg { animation: bb-shadow 7s ease-in-out infinite alternate; }
  .fx3d [data-fx-scene]:not(.fx-run) .bb-float,
  .fx3d [data-fx-scene]:not(.fx-run) .bb-floor svg,
  .fx3d.fx-hidden .bb-float, .fx3d.fx-hidden .bb-floor svg { animation-play-state: paused; }
}
@keyframes bb-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bb-settle { 0% { transform: translate3d(0, -26px, 0) rotateZ(-3.2deg); } 55% { transform: translate3d(0, 4px, 0) rotateZ(.9deg); } 78% { transform: translate3d(0, -1.5px, 0) rotateZ(-.3deg); } 100% { transform: none; } }
@keyframes bb-hover { from { translate: 0 4px; } to { translate: 0 -14px; } }
@keyframes bb-sway { from { rotate: z -.9deg; } to { rotate: z .9deg; } }
/* Sichtbare 3D-Drehung um die Hochachse (leicht geneigt): die Tiefenebenen (Scheiben ±46px) verschieben sich gegeneinander. Keine Dauerrotation. */
@keyframes bb-turn { from { rotate: y -10deg; } to { rotate: y 10deg; } }
@keyframes bb-shadow { from { transform: scale(1.03); opacity: 1; } to { transform: scale(.94); opacity: .72; } }

/* Interaktion: Ziehen = drehen, Tippen = Anheben (nur wenn das Skript laeuft) */
.fx-hero3d.is-pro .fx-bb[data-bb-live] { pointer-events: auto; cursor: grab; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.fx-hero3d.is-pro .fx-bb[data-bb-live]:active { cursor: grabbing; }
.bb-stage__hint { display: none; margin: 1.25rem 0 0; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: #a9acb3; }
.bb-stage__hint::before { content: ""; display: inline-block; width: 28px; height: 1px; background: #ffd400; vertical-align: middle; margin-right: .75rem; }
html.fx3d .bb-stage__hint { display: block; }