/* Header der Objektseite: gepinnte 3D-Buehne mit Kamerafahrt, heller Grund.
   Scrollweg 450vh plus eine Bildschirmhoehe Buehne = 550vh. Auf Mobil und bei
   reduzierter Bewegung (.is-static) eine Bildschirmhoehe mit Standbild.
   Hinweis zur Pflege: diese Datei nie mit str.replace auf einem leeren Suchtext
   bearbeiten. Am 7.9.2026 hat genau das die Datei auf 1.5 MB Datenmuell aufgeblaeht. */
.hero3d { position: relative; height: 550vh; background: var(--bg, #fff); }
.hero3d.is-static { height: 100vh; min-height: 560px; }
.hero3d-stage { position: sticky; top: 0; height: 100vh; max-height: 100vh; overflow: hidden; }
.hero3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 1.1s var(--ease, ease); }
.hero3d.is-ready canvas { opacity: 1; }
/* Standbild: sichtbar, bis das Modell bereit ist; dauerhaft bei .is-static / .is-failed */
.hero3d-still { position: absolute; inset: 0; }
.hero3d-still img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: opacity 1.1s var(--ease, ease); }
.hero3d.is-ready .hero3d-still img { opacity: 0; }
.hero3d.is-static canvas, .hero3d.is-failed canvas { display: none; }
.hero3d.is-static .hero3d-still img, .hero3d.is-failed .hero3d-still img { opacity: 1; }
/* Text ueber der Fahrt. Heller Verlauf von der Textseite, kein dunkler Scrim. */
.hero3d-beat { position: absolute; left: clamp(20px, 6vw, 96px); right: auto; bottom: clamp(48px, 12vh, 140px);
  max-width: 34rem; opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity 0.7s var(--ease, ease), transform 0.7s var(--ease, ease); }
.hero3d-beat.align-right { left: auto; right: clamp(20px, 6vw, 96px); }
.hero3d-beat::before { content: ''; position: absolute; inset: -40px -60px -40px -60px; z-index: -1;
  background: radial-gradient(ellipse at 40% 60%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.75) 45%, rgba(255,255,255,0) 78%); }
.hero3d-beat.is-visible { opacity: 1; transform: translateY(0); }
.hero3d.is-static .hero3d-beat[data-beat="titel"] { opacity: 1; transform: none; }
.hero3d.is-static .hero3d-beat:not([data-beat="titel"]) { display: none; }
.hero3d-beat .eyebrow { margin-bottom: 10px; }
.hero3d-beat h1, .hero3d-beat h2 { margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.02em;
  font-weight: 520; line-height: 1.0; color: var(--ink); }
/* Der Titel steht immer auf einer Zeile: 14 Zeichen Montserrat 520 brauchen rund 10.5 em,
   bei 5.4vw also gut 57vw. Der Titelblock darf dafuer die volle Breite nutzen. */
.hero3d-beat h1 { font-size: clamp(1.9rem, 5.4vw, 5rem); white-space: nowrap; overflow-wrap: normal; word-break: keep-all; hyphens: manual; }
.hero3d-beat[data-beat="titel"] { max-width: none; right: clamp(20px, 6vw, 96px); }
.hero3d-beat h2 { font-size: clamp(1.7rem, 3.4vw, 3rem); font-weight: 500; line-height: 1.06; }
.hero3d-beat p { margin: 0; color: var(--ink-dim); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; max-width: 52ch; }
/* Ladeanzeige: eine Linie */
.hero3d-loader { position: absolute; left: 50%; bottom: clamp(20px, 5vh, 48px); transform: translateX(-50%);
  width: min(200px, 40vw); height: 1px; background: var(--line); overflow: hidden; transition: opacity 0.6s; }
.hero3d-loader-bar { width: 100%; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0.02); transition: transform 0.3s linear; }
.hero3d-loader.is-done, .hero3d.is-static .hero3d-loader { opacity: 0; }
/* Scroll-Hinweis, nur solange die Fahrt am Anfang steht */
.hero3d-cue { position: absolute; right: clamp(20px, 6vw, 96px); bottom: clamp(24px, 6vh, 56px);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim);
  transition: opacity 0.5s; }
.hero3d-beat[data-beat="titel"]:not(.is-visible) ~ .hero3d-cue, .hero3d.is-static .hero3d-cue { opacity: 0; }
@media (max-width: 899px) {
  .hero3d { height: 100vh; min-height: 560px; }
  .hero3d-beat { max-width: none; right: clamp(20px, 6vw, 96px); }
}