/* MMO Product Model (3D) — Viewer-Box auf den Produktseiten.
   Ziel: exakt dieselbe Flaeche wie das bisherige Katalogbild (690x654),
   damit im Hero-Split nichts springt. */

.mmo-pmodel-wrap {
  position: relative;
  width: 100%;
  max-width: 690px;
}

/* .mmrb-model (mm-scroll-animation) setzt width:100% + inline height.
   Hier auf Seitenverhaeltnis umstellen, damit die Box mitskaliert. */
.mmo-pmodel-wrap model-viewer.mmo-pmodel {
  width: 100%;
  height: auto !important;
  aspect-ratio: var(--mmopm-ratio, 690 / 654);
  background: transparent;
  --poster-color: transparent;
  cursor: grab;
}
.mmo-pmodel-wrap model-viewer.mmo-pmodel:active { cursor: grabbing; }

/* Bedienhinweis: dezent, verschwindet sobald der Nutzer interagiert */
.mmo-pmodel__hint {
  position: absolute;
  left: 0;
  bottom: 4px;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .02em;
  color: #5B6B7E;
  opacity: .75;
  pointer-events: none;
  transition: opacity .25s ease;
}
.mmo-pmodel-wrap:hover .mmo-pmodel__hint { opacity: 0; }

/* Fallback ohne GLB (z. B. PRINCE): Beitragsbild in derselben Box */
.mmo-pmodel--img { width: 100%; max-width: 690px; }
.mmo-pmodel--img .mmo-pmodel__img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .mmo-pmodel-wrap, .mmo-pmodel--img { max-width: 100%; }
  .mmo-pmodel__hint { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .mmo-pmodel-wrap model-viewer.mmo-pmodel { --poster-color: transparent; }
}