/* MBI – 3D-Massenmodell
   Farben über Variablen, damit sie an das Seiten-Theme angepasst werden können. */
.mbi-modell {
  --mbi-modell-gold: #C9A45C;
  --mbi-modell-gold-hell: #E9CE86;
  --mbi-modell-text: #f2efe8;
  --mbi-modell-gedimmt: #a8a296;
  --mbi-modell-buehne: #1b1d21;
  --mbi-modell-linie: rgba(201, 164, 92, 0.35);
  display: grid;
  gap: 1rem;
  color: var(--mbi-modell-text);
  font-family: inherit;
}
.mbi-modell__kopf { display: grid; gap: 0.35rem; }
.mbi-modell__label {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mbi-modell-gold);
}
.mbi-modell__titel {
  margin: 0;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  font-weight: 500;
  line-height: 1.15;
  text-wrap: balance;
}
.mbi-modell__buehne {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  min-height: 300px;
  background: var(--mbi-modell-buehne) center / cover no-repeat;
  border: 1px solid var(--mbi-modell-linie);
  overflow: hidden;
}
.mbi-modell__viewer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  --poster-color: transparent;
  background: transparent;
}
.mbi-modell__start {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0.9rem 1.6rem;
  font: inherit;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: #15130f;
  background: linear-gradient(135deg, var(--mbi-modell-gold), var(--mbi-modell-gold-hell));
  border: 0;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.mbi-modell__start:hover { filter: brightness(1.06); }
.mbi-modell__start:focus-visible { outline: 2px solid var(--mbi-modell-gold-hell); outline-offset: 3px; }
.mbi-modell__start:disabled { cursor: progress; opacity: 0.85; }
.mbi-modell__start[hidden] { display: none; }
.mbi-modell__status {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--mbi-modell-gold-hell);
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mbi-modell.ist-fehler .mbi-modell__status { transform: translate(-50%, calc(-50% - 2.6rem)); }
.mbi-modell.ist-geladen .mbi-modell__status,
.mbi-modell.ist-geladen .mbi-modell__start { opacity: 0; pointer-events: none; }
.mbi-modell.ist-geladen .mbi-modell__buehne { background-image: none !important; }
.mbi-modell__bedienung { color: var(--mbi-modell-gold); }
.mbi-modell__hinweis {
  margin: 0;
  font-size: 0.8rem;
  color: var(--mbi-modell-gedimmt);
}
/* Bühne über die ganze Fensterbreite, Titel und Hinweis bleiben in der Inhaltsspalte.
   Seite braucht html { overflow-x: clip; } gegen horizontales Scrollen. */
.mbi-modell--vollbreite .mbi-modell__buehne {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  aspect-ratio: auto;
  height: clamp(340px, 44vw, 680px);
}
@media (prefers-reduced-motion: reduce) {
  .mbi-modell__start, .mbi-modell__status { transition: none; }
}