/* 3D-Rundgang als neuer Hero auf /3d-rundgang (Lars 28.10.2026): Badge + „Fitness aus Leidenschaft“ oben, darunter das
   Modell im Glas-Rahmen; der bisherige Hero (Untertitel, Knöpfe, Stats, Foto) folgt darunter. Größe: groß genug, dass
   man das ganze Studio erkennt, aber nie die ganze Seite – man kann immer weiterscrollen. */
.hero-3d {
    max-width: 1400px;
    margin: 0 auto;
    padding: 110px 24px 0;
    display: grid;
    gap: 28px;
}

.hero-3d-kopf {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

/* Kein Rahmen, kein Kasten (Lars 28.10.: „als ob es da reingeschmolzen ist“): Viewer und Standbild sind durchsichtig,
   das Modell schwebt auf dem Seitenhintergrund. Schmaler und flacher (Lars 28.10. abends): Der Finger auf dem Modell
   bewegt nur das Modell, gescrollt wird ober- und unterhalb – dafür muss genug Seite frei bleiben. */
.hero-3d-rahmen {
    position: relative;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    height: clamp(340px, 50vh, 540px);
}

.hero-3d-rahmen .hero-3d-frame,
.hero-3d-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: transparent;
}

/* Standbild liegt über dem iframe, bis der Viewer „bereit“ meldet – kein Sprung von Bild zu Modell */
.hero-3d-poster {
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.7s ease;
}

/* !important, weil main.js jedem Bild nach dem Laden „loaded“ gibt (img.loaded { opacity: 1 !important }) */
.hero-3d.bereit .hero-3d-poster {
    opacity: 0 !important;
}

/* Ohne WebGL oder im Datensparmodus: Standbild mit Knopf statt Viewer */
.hero-3d-oeffnen {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    z-index: 2;
    display: none;
}

.hero-3d.nur-bild .hero-3d-oeffnen {
    display: inline-flex;
}

.hero-3d.nur-bild .hero-3d-frame {
    display: none;
}

/* Der bisherige Hero rückt direkt unter das Modell */
.rundgang .hero {
    padding-top: 48px;
}

@media (max-width: 1024px) {
    .hero-3d {
        padding-top: 120px;
    }

    .rundgang .hero {
        padding-top: 32px;
    }
}

@media (max-width: 768px) {
    .hero-3d {
        padding: 90px 16px 0;
        gap: 20px;
    }

    .hero-3d-rahmen {
        height: min(46vh, 380px);
    }

    .rundgang .hero {
        padding-top: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-3d-poster {
        transition: none;
    }
}