/* MANOVA — 3D-Logo Intro: Layout */
.logo-scene{position:relative;height:220vh;
  background:radial-gradient(120% 80% at 50% 28%,#173355 0%,#0a1626 55%,#060d17 100%)}
.logo-sticky{position:sticky;top:var(--header-h,78px);height:calc(100vh - var(--header-h,78px) - var(--banner-h,0px));overflow:hidden;display:grid;place-items:center}
.logo-stage{position:absolute;inset:0;transition:opacity .3s linear}
.logo-canvas{width:100%;height:100%;display:block}

.logo-grain{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,.12),transparent 60%),
  radial-gradient(1px 1px at 70% 65%,rgba(255,255,255,.09),transparent 60%),
  radial-gradient(1px 1px at 45% 80%,rgba(255,255,255,.07),transparent 60%)}
.logo-vig{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(75% 65% at 50% 45%,transparent 45%,rgba(4,9,16,.75) 100%)}

.logo-caps{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center}
.logo-cap{position:absolute;left:0;right:0;text-align:center;padding:0 6vw;opacity:0;transition:opacity .25s linear}
.logo-cap .k{display:block;font-family:var(--ff-mono,monospace);font-size:.74rem;letter-spacing:.34em;
  text-transform:uppercase;color:#8fb4d8}
.logo-cap .big{display:block;margin-top:.5em;font-family:var(--ff-display,sans-serif);font-weight:900;
  text-transform:uppercase;letter-spacing:-.02em;line-height:1;color:#fff;
  font-size:clamp(1.8rem,5.2vw,4rem);text-shadow:none}
.logo-cap--a{bottom:14%}
.logo-cap--b{bottom:14%}
.logo-cap--c{bottom:13%}
.logo-cap--c .big{font-size:clamp(1.5rem,3.6vw,2.6rem)}

.logo-hint{position:absolute;left:50%;bottom:2%;transform:translateX(-50%);transition:opacity .3s linear;
  font-family:var(--ff-mono,monospace);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:#6d8bab;display:flex;align-items:center;gap:.8em;pointer-events:none}
.logo-hint::after{content:"";width:1px;height:26px;background:linear-gradient(#6d8bab,transparent);
  animation:logoHint 1.9s ease-in-out infinite}
@keyframes logoHint{0%,100%{opacity:.25;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

@media (max-width:760px){
  .logo-scene{height:220vh}
  .logo-cap .big{font-size:clamp(1.5rem,7.5vw,2.4rem)}
  .logo-cap .k{font-size:.62rem;letter-spacing:.26em}
}
@media (max-height:620px){
  .logo-cap--a,.logo-cap--b,.logo-cap--c{bottom:19%}
  .logo-cap .big{font-size:clamp(1.3rem,4vw,2rem)}
  .logo-hint{bottom:2.5%}
}
@media (prefers-reduced-motion:reduce){ .logo-scene{display:none} }

/* Helleres Studio für das silberne Markenzeichen. */
.logo-scene{background:radial-gradient(ellipse at 50% 34%,#244461 0%,#142c44 42%,#0a1626 82%)}
.logo-vig{background:radial-gradient(80% 75% at 50% 40%,transparent 48%,rgba(4,9,16,.42) 100%)}
.logo-grain{opacity:.25}
.logo-cap .k{color:#c1d8ec}
.logo-hint{color:#adc5dd}

.logo-cap .big{text-shadow:none}

/* Dezenter Lichtreflex auf dem Studioboden, ohne Schleier hinter der Schrift. */
.logo-stage{background:radial-gradient(ellipse 20% 2% at 50% 57%,rgba(188,219,246,.12),rgba(145,190,226,.035) 50%,transparent 100%)}

/* Auf kleinen Displays bleibt die Intro-Schrift frei. */
@media(max-width:760px){
 body.intro-active .floaters > a{display:none}
 body.intro-active .logo-hint{display:none}
}

/* Eine feste Botschaft, gemeinsamer weicher Übergang zum Seiteninhalt. */
.logo-cap--a{opacity:1}

/* No scroll-lock intro: the original studio composition follows the useful first screen. */
.logo-scene{height:auto}
.logo-sticky{position:relative;top:0;height:min(760px,90svh);min-height:460px}
.logo-stage::before{content:"";position:absolute;inset:8% 30% 42%;background:url('/assets/responsive/manova-mark-white-160.2619a640f45b.webp') center/contain no-repeat;opacity:.5}
.logo-stage:has(canvas)::before{display:none}
.logo-hint{display:none}
@media(max-width:760px){.logo-scene{height:auto}.logo-sticky{height:560px;min-height:0}.logo-cap--a{bottom:10%}}
@media(prefers-reduced-motion:reduce){.logo-scene{display:block}}

/* ===== Scroll-Hero (28.09.2026): Video scrubbt mit dem Scrollen, 3D-Logo klein oben rechts ===== */
.hero--scroll{display:block;min-height:0;height:220vh;padding:0;overflow:visible}
.hero--scroll .hero__sticky{position:sticky;top:var(--header-h,78px);height:calc(100svh - var(--header-h,78px));min-height:560px;
  overflow:hidden;display:flex;align-items:flex-end;padding:clamp(40px,8vw,90px) 0 clamp(48px,7vw,80px)}
.hero--scroll .hero__bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.hero--scroll .hero__bg video.is-ready{opacity:1}
.hero-logo{position:absolute;z-index:3;top:clamp(14px,2.4vw,30px);right:clamp(14px,3vw,44px);
  width:clamp(92px,13vw,190px);aspect-ratio:1/1;pointer-events:none}
.hero-logo .logo-stage{position:absolute;inset:0;background:none}
.hero-logo .logo-canvas{width:100%;height:100%;display:block}
.hero-logo .logo-stage::before{content:"";position:absolute;inset:14%;background:url('/assets/responsive/manova-mark-white-160.2619a640f45b.webp') center/contain no-repeat;opacity:.85}
.hero-logo .logo-stage:has(canvas)::before{display:none}
@media(max-width:760px){
  .hero--scroll{height:190vh}
  .hero--scroll .hero__sticky{min-height:0;padding:28px 0}
  .hero-logo{width:78px;top:10px;right:10px}
  .hero--scroll .eyebrow{padding-right:84px}
}
/* Kleine Fensterhöhe oder reduzierte Bewegung: normaler, nicht klebender Hero ohne Scrollstrecke. */
@media(max-height:560px){.hero--scroll{height:auto}.hero--scroll .hero__sticky{position:relative;top:0;height:auto;min-height:0}}
@media(prefers-reduced-motion:reduce){.hero--scroll{height:auto}.hero--scroll .hero__sticky{position:relative;top:0;height:auto}}
/* Im klebenden Hero muss alles in eine Bildschirmhöhe passen. */
@media(min-width:761px){
  .hero--scroll .hero__title{font-size:clamp(2.2rem,4.4vw,4.3rem);max-width:17ch}
  .hero--scroll .hero__cta{margin-top:28px}
  .hero--scroll .hero__meta{margin-top:clamp(28px,4vh,48px);padding-top:22px}
}
@media(min-width:761px) and (max-height:820px){
  .hero--scroll .hero__title{font-size:clamp(2rem,3.8vw,3.4rem)}
  .hero--scroll .hero__sticky{padding-top:28px;padding-bottom:32px}
}
/* Logo größer (Wunsch 28.09.2026, 20 Uhr). */
.hero-logo{width:clamp(150px,19vw,280px);top:clamp(10px,2vw,24px);right:clamp(10px,2.4vw,36px)}
@media(max-width:760px){.hero-logo{width:124px;top:6px;right:6px}.hero--scroll .eyebrow{padding-right:128px}}
/* Startbild als <picture> (Querformat Desktop, Hochformat Handy). */
.hero--scroll .hero__bg picture{position:absolute;inset:0;display:block}
.hero--scroll .hero__bg picture img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
/* Logo nochmals größer (28.09.2026, 20:05). */
.hero-logo{width:clamp(200px,24vw,360px)}
@media(max-width:760px){.hero-logo{width:144px;top:4px;right:4px}.hero--scroll .eyebrow{padding-right:150px}}

/* Logo mit vollständiger Spiegelung (28.09.2026, 20:40): Leinwand hochkant, Logo gleich groß,
   Spiegelbild darunter komplett sichtbar und hinter dem Text. */
.hero-logo{aspect-ratio:5/8;z-index:1}
.hero-logo .logo-stage::before{inset:4% 14% 42%}