/* Motor-Hero: links die Scroll-Animation, rechts der Hero-Text der Seite.
   Bis zur geschlossenen Haube steht alles, danach gleiten Auto + Text gemeinsam nach oben. */
.engine-hero { --void: #030304; height: 388vh; position: relative; background: var(--void); }
.engine-hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.engine-hero canvas { display: block; width: 100%; height: 100%; }
/* Schwebender Motor (hero.js): Kopie des Bildes darüber, die Maske lässt nur den Motor durch.
   Ellipse um die Bildmitte (34 % = FOCUS_X), Ränder zusätzlich ausgeblendet, damit beim Verschieben keine Kante entsteht. */
.engine-hero canvas.engine-hero__float {
  position: absolute; inset: 0; visibility: hidden; pointer-events: none; transform-origin: 34% 50%; will-change: transform;
  mask: radial-gradient(var(--rx, 30%) var(--ry, 60%) at 34% 50%, #000 78%, transparent),
        linear-gradient(transparent, #000 3% 97%, transparent), linear-gradient(90deg, transparent, #000 1.5% 98.5%, transparent);
  mask-composite: intersect;
}
.engine-hero__stage::after { /* Übergang in die nächste Sektion */
  content: ""; position: absolute; inset: auto 0 0; height: 16%;
  background: linear-gradient(transparent, var(--ca-ink, #1a1a18)); pointer-events: none;
}

/* Textspalte rechts */
.engine-hero__copy {
  position: absolute; z-index: 2; top: 50%; translate: 0 -46%;
  right: clamp(24px, 4.5vw, 96px); width: clamp(360px, 34vw, 580px);
}
.engine-hero__copy :is(.video-hero__title, .scrub-hero__title) { font-size: clamp(2.4rem, 3.3vw, 4.4rem); max-width: none; }
.engine-hero__copy :is(.video-hero__body, .scrub-hero__body) { font-size: clamp(1rem, 1.05vw, 1.15rem); }
.engine-hero__copy :is(.video-hero__cta, .scrub-hero__cta) { font-size: 1rem; padding: .8rem 1.25rem; }

/* Laden + Scroll-Hinweis, mittig unter dem Motor */
.engine-hero__loader, .engine-hero__hint { position: absolute; left: 34%; translate: -50% 0; z-index: 2; }
.engine-hero__loader { bottom: 12%; width: min(240px, 40vw); height: 2px; background: #ffffff14; transition: opacity .4s; }
.engine-hero__loader i { display: block; height: 100%; width: 0; background: var(--ca-lime, #65b800); }
.engine-hero__hint { bottom: 7%; color: var(--ca-muted, #9a9e96); font-size: .875rem; letter-spacing: .04em; transition: opacity .3s; }
.engine-hero__stage.is-done .engine-hero__loader,
.engine-hero__stage.is-scrolled .engine-hero__hint { opacity: 0; }

/* Einmaliges Einblenden des Textblocks, sobald das erste Bild steht */
.engine-hero__copy > * { opacity: 0; translate: 0 14px; transition: opacity .7s ease, translate .7s cubic-bezier(.2, .7, .2, 1); }
.engine-hero__stage.is-ready .engine-hero__copy > * { opacity: 1; translate: 0 0; }
.engine-hero__copy > :nth-child(2) { transition-delay: .08s; }
.engine-hero__copy > :nth-child(3) { transition-delay: .16s; }
.engine-hero__copy > :nth-child(4) { transition-delay: .24s; }
.engine-hero__copy > :nth-child(5) { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .engine-hero__copy > * { transition: none; opacity: 1; translate: none; }
}

.engine-hero__still { display: none; }

/* Hochformat / schmal: statt Scroll-Animation ein Standbild (Auto mit Scheinwerfern, siehe hero.js).
   Bild und Text stehen im normalen Seitenfluss – nichts klebt, nichts hängt an der Bildschirmhöhe. So bleibt
   alles ruhig, wenn die Adressleiste des Handys beim Scrollen einklappt. */
@media (max-width: 900px), (max-aspect-ratio: 6/5) {
  .engine-hero { height: auto; }
  .engine-hero__stage { position: relative; height: auto; padding-top: 3.5rem; } /* Platz für die Menüleiste */
  .engine-hero canvas, .engine-hero__loader { display: none; }
  /* Ausschnitt: mittlere 62,5 % der Bildbreite (= 1 / PORTRAIT_ZOOM in hero.js) – Auto samt Scheinwerfern */
  .engine-hero__still { display: block; width: 100%; height: auto; aspect-ratio: 10 / 9; object-fit: cover; object-position: 50% 50%;
    -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 82%, transparent);
            mask-image: linear-gradient(transparent, #000 12%, #000 82%, transparent); }
  .engine-hero__copy { position: relative; top: auto; bottom: auto; right: auto; left: auto; width: auto; translate: none;
    margin-top: -1.5rem; padding: 0 20px 2.5rem; }
  .engine-hero__copy :is(.video-hero__kicker, .scrub-hero__kicker) { display: none; } /* Kicker nur am Desktop */
  .engine-hero__copy :is(.video-hero__title, .scrub-hero__title) { font-size: clamp(2.1rem, 8.5vw, 3rem); max-width: 14ch; }
  .engine-hero__copy :is(.video-hero__body, .scrub-hero__body) { margin-top: .8rem; font-size: .95rem; }
  .engine-hero__copy :is(.video-hero__tags, .scrub-hero__tags) { display: none; }
  .engine-hero__copy :is(.video-hero__actions, .scrub-hero__actions) { margin-top: 1.2rem; gap: .6rem; }
  .engine-hero__copy :is(.video-hero__cta, .scrub-hero__cta) { font-size: .85rem; padding: .7rem 1rem; }
  .engine-hero__copy .scrub-hero__locations-label { margin: 1rem 0 .4rem; font-size: .7rem; }
  .engine-hero__copy .scrub-hero__locations a { padding: .45rem .8rem; font-size: .85rem; }
  .engine-hero__hint { display: none; }
  /* Handy-Animation (hero.js, mobileAnim): statt des Standbilds eine Canvas im selben Ausschnitt. Der Hero
     ist um MOBILE_PIN (260 px) länger, solange klebt die Bühne oben und die Animation läuft durch. */
  .engine-hero.is-anim::after { content: ""; display: block; height: 260px; } /* Platzhalter statt padding: sticky bewegt sich nur im Inhaltsbereich */
  .engine-hero.is-anim .engine-hero__stage { position: sticky; top: 0; }
  .engine-hero.is-anim .engine-hero__still { display: none; }
  .engine-hero.is-anim canvas.engine-hero__mobile { display: block; width: 100%; height: auto; aspect-ratio: 10 / 9;
    -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 82%, transparent);
            mask-image: linear-gradient(transparent, #000 12%, #000 82%, transparent); }
}
.engine-hero canvas.engine-hero__mobile { display: none; }

/* Bisheriger Hero (alt: .video-hero, neu: .scrub-hero) ist ersetzt */
.video-hero, .scrub-hero { display: none; }