/* ============================================================
   3D-Objekt Viewer — Content Block objekt3d/viewer
   Vollständig eigenständig: keine Abhängigkeit von Sitepackage-
   Klassen oder -Variablen. Anpassbar über die Custom Properties
   unterhalb von .obj3d (z. B. im eigenen Stylesheet überschreiben):

     .obj3d { --obj3d-accent: #cd1719; --obj3d-max-width: 100%; }
   ============================================================ */

.obj3d {
  --obj3d-accent: #3b82f6;          /* Ladebalken / Akzent */
  --obj3d-max-width: 1280px;
  --obj3d-padding: 0 32px;
  --obj3d-radius: 6px;

  max-width: var(--obj3d-max-width);
  margin: 40px auto;
  padding: var(--obj3d-padding);
}

.obj3d-head {
  margin-bottom: 18px;
}

.obj3d-stage {
  position: relative;
  background:
    radial-gradient(120% 120% at 50% 0%, #20242b 0%, #12151a 60%, #0c0e12 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--obj3d-radius);
  overflow: hidden;
}

.obj3d-viewer {
  display: block;
  width: 100%;
  height: 560px;
  background: transparent;
  --poster-color: transparent;
  --progress-bar-color: var(--obj3d-accent);
}

.obj3d--small .obj3d-viewer  { height: 420px; }
.obj3d--medium .obj3d-viewer { height: 560px; }
.obj3d--large .obj3d-viewer  { height: 720px; }

/* Bedienhinweis über der Bühne – rein dekorativ, daher aria-hidden im Template. */
.obj3d-hint {
  position: absolute;
  right: 12px;
  bottom: 10px;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
  user-select: none;
}

.obj3d-stage--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 320px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}

.obj3d-caption {
  margin-top: 14px;
  opacity: 0.85;
  font-size: 0.95rem;
}

.obj3d-caption > *:first-child { margin-top: 0; }
.obj3d-caption > *:last-child  { margin-bottom: 0; }

@media (max-width: 780px) {
  .obj3d { --obj3d-padding: 0 18px; }
  .obj3d--small .obj3d-viewer  { height: 340px; }
  .obj3d--medium .obj3d-viewer { height: 400px; }
  .obj3d--large .obj3d-viewer  { height: 460px; }
}