/* MOREMEDIA Leistungs-Hero "Lichtobjekte" — Karte + 9c-Intro (mm-hero.js) */
.mm-hero{margin:clamp(28px,4vw,48px) 0 0;display:block}
.mm-hero-card{position:relative;overflow:hidden;border-radius:var(--r-md);aspect-ratio:16/9;background:var(--paper-warm-2)}
.mm-hero-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mm-hero-ol{position:absolute;inset:0;display:none;z-index:2;color:#fff;
 background:linear-gradient(10deg,rgba(21,20,15,.55) 0%,rgba(21,20,15,.12) 45%,rgba(21,20,15,0) 70%)}
.mm-hero-ol .in{position:absolute;left:0;right:0;bottom:0;max-width:var(--container);margin:0 auto;
 padding:0 var(--pad) clamp(40px,6vh,80px)}
.mm-hero-ol .crumb{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:#E4E0D8;margin:0 0 14px}
.mm-hero-ol .t{font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;line-height:1.06;
 font-size:clamp(2rem,4.6vw,4.1rem);max-width:16ch;margin:0;color:#fff}
.mm-hero.is-intro .mm-hero-card{position:fixed;z-index:900;border-radius:0;aspect-ratio:auto}
.mm-hero.is-intro .mm-hero-ol{display:block}
html.mm-hero-lock{overflow:hidden}
/* Waehrend die Hero-Animation den Scroll haelt, kann #mm-reveal (fixed, bottom:0) durch die
   dabei fixierten Hero-Elemente (Bild/Cap, ebenfalls position:fixed, eigene Stacking-Contexts)
   durchscheinen — dieser Zustand kann nie das echte Seitenende sein, also einfach ausblenden. */
html.mm-hero-lock #mm-reveal{display:none!important}
/* Smartphone: Bild bleibt auch in Ruheposition auf voller Hero-Breite (wie waehrend des Intros),
   schrumpft NICHT auf die schmalere, gepolsterte Textspalte — analog zu den breiteren Referenzen-Karten. */
@media(max-width:759px){
  .mm-hero{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
}
/* --pin-cap (Pin 3584): Eyebrow+Headline leben als eigenes Element VOR der Figure (kein Overlay-Div mehr).
   Ruhezustand (kein JS/reduced-motion/nach Animationsende): normaler zentrierter Block ueber dem Bild.
   Waehrend des Vollbild-Intros (html.mm-hero-pinning, von mm-hero.js gesetzt): fixiert an derselben
   Bildschirmposition wie .art{padding-top} (siehe Seiten-eigenes <style>) — das Bild schrumpft
   unabhaengig darunter; sobald es scrollt, wechselt die Textfarbe weiss->dunkel (.mm-cap-onlight). */
.art-hero-cap{text-align:center;margin:0 0 clamp(20px,3vw,32px)}
.art-hero-cap .crumb{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;
 transition:color .35s var(--ease)}
.art-hero-cap .t{font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;line-height:1.06;
 font-size:clamp(2rem,4.6vw,4.1rem);color:var(--ink);margin:0;transition:color .35s var(--ease)}
html.mm-hero-pinning .art-hero-cap{position:fixed;left:0;right:0;top:clamp(120px,16vh,230px);z-index:901;
 max-width:var(--container);margin:0 auto;padding:0 var(--pad)}
.art-hero-cap-spacer{height:0;overflow:hidden}
html.mm-hero-pinning .art-hero-cap .crumb{color:#E4E0D8}
html.mm-hero-pinning .art-hero-cap .t{color:#fff}
html.mm-hero-pinning .art-hero-cap.mm-cap-onlight .crumb{color:var(--muted)}
html.mm-hero-pinning .art-hero-cap.mm-cap-onlight .t{color:var(--ink)}
@media (prefers-reduced-motion: reduce){html.mm-hero-pinning .art-hero-cap{position:static!important;color:inherit}}
/* Header über dem Vollbild: weisses Logo/Navigation — exakt das Muster der dunklen Seiten aus theme.css */
body.mm-hero-cover #header #logo .logo-black{display:none!important}
body.mm-hero-cover #header #logo .logo-white{display:block!important}
body.mm-hero-cover #header #secondary-menu a{color:#fff!important}
body.mm-hero-cover #burger span{background:#fff!important}
body.mm-hero-cover #menu-icon .menu-label{color:#fff!important}
body.mm-hero-cover #header .burger-icon,body.mm-hero-cover #header .burger-icon::before,body.mm-hero-cover #header .burger-icon::after{background:#fff!important;border-color:#fff!important}
body.mm-hero-cover #header .language-switcher a,body.mm-hero-cover #header .lang a{color:#fff!important}
body.mm-hero-cover #menu-icon .mm-lang{color:#fff!important}
@media (prefers-reduced-motion: reduce){.mm-hero.is-intro .mm-hero-card{position:relative;z-index:auto}.mm-hero-ol{display:none!important}}

/* v3: Dock erst mit Start der Animation zeigen */
html.mm-hero-lock .mm-dock{opacity:0!important;pointer-events:none!important;}

/* Pin 3598: Scrollanzeiger (Konzept B) — nur waehrend des Vollbild-Intros sichtbar,
   verblasst sobald der Nutzer zu scrubben beginnt (mm-hero.js setzt .mm-si-fade). */
.mm-scroll-ind{position:fixed;left:50%;bottom:clamp(20px,4vh,40px);transform:translateX(-50%);
 z-index:902;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.mm-hero.is-intro .mm-scroll-ind{opacity:1}
.mm-hero.is-intro.mm-si-fade .mm-scroll-ind{opacity:0}
.mm-si-mouse{width:22px;height:34px;border:1.6px solid rgba(255,255,255,.55);border-radius:12px}
.mm-si-mouse i{display:block;width:3px;height:7px;margin:6px auto 0;background:#fff;border-radius:2px;
 animation:mmSiDot 1.8s var(--ease) infinite}
@keyframes mmSiDot{
 0%{opacity:0;transform:translateY(0)}
 30%{opacity:1}
 70%{opacity:0;transform:translateY(11px)}
 100%{opacity:0;transform:translateY(0)}
}
@media (prefers-reduced-motion: reduce){.mm-si-mouse i{animation:none;opacity:.7}}