/* MM Scroll Animation — Sticky-Buehne + Loop + Fill */
.mmsa-hero {
  position: relative;
  min-height: var(--mmsa-h, 300vh);
  border-radius: inherit;
}
.mmsa-hero:not(.mmsa--fill):not(.mmsa--loop) {
  overflow: visible !important; /* Eltern duerfen Sticky nicht abschneiden */
}
.mmsa-hero__sticky {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mmsa-bg, transparent);
  border-radius: inherit;
}
.mmsa-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Touch-Scroll bleibt moeglich */
}

/* Loop-Modus: normaler Fluss, Aspect-Ratio gegen CLS */
.mmsa--loop {
  position: relative;
  min-height: auto;
  overflow: hidden;
  border-radius: inherit;
}
.mmsa--loop .mmsa-hero__sticky {
  position: relative;
  height: auto;
  min-height: 0;
  aspect-ratio: var(--mmsa-ratio, 16/9);
}

/* Fill-Modus: absolute Fuellung des Containers */
.mmsa--fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  min-height: 0;
  overflow: hidden;
  border-radius: inherit;
}
.mmsa--fill .mmsa-hero__sticky {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
}

/* overflow:clip Fallback fuer Sticky-Vorfahren */
@supports (overflow: clip) {
  .mmsa--fill {
    overflow: clip;
  }
}

/* ===== Sticky-Buehne aus Elementor-Containern (v2.4) =====
 * Track = Elementor-Container mit Klasse mmsa-track (+ min-height via Setting),
 * Stage = Kind-Container mit Klasse mmsa-stage. Das Canvas (mmsa--fill im
 * HTML-Widget) verankert sich an der Stage (JS: closest('.mmsa-stage')). */
.mmsa-track { overflow: visible !important; }
.mmsa-stage {
  position: sticky;
  top: 0;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
}
/* Mobile Browser: 100dvh WAECHST, sobald die Adressleiste beim ersten Scroll
   einklappt — die Buehne wird ~80px laenger, das Cover-Bild zoomt nach und
   die prozentual verankerten Overlays verrutschen (sichtbarer Reflow-Ruck).
   svh = Viewport MIT sichtbarer Leiste, konstant. Der beim Einklappen frei
   werdende Streifen unterhalb der Buehne zeigt den Track-Hintergrund (weiss
   = Karten-Look mit Rand). Track NICHT dunkel machen: hinter den runden
   Ecken der Stage liegt derselbe Track — dunkle Ecken = Karte wirkt eckig. */
@media (hover: none) and (pointer: coarse) {
  .mmsa-stage { height: 100svh; }
}
.mmsa-stage > .elementor-widget-html:not(.mm-overlay),
.mmsa-stage > .elementor-widget-html:not(.mm-overlay) .elementor-widget-container {
  position: static;
  height: 0;
}

/* ===== Scroll-Overlays (Elementor-editierbar) =====
 * Sichtbarkeit steuert mm-flipbook.js ueber die Klasse is-on.
 * Position/Typografie kommen aus Elementor bzw. den mm-ov-* Klassen. */
/* .mmsa-track-Prefix: schlaegt Elementors .elementor-widget{position:relative} */
.mmsa-track .mm-overlay.mm-overlay {
  position: absolute;
  z-index: 3;
  width: auto;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .55s ease, transform .55s ease;
  pointer-events: none;
  will-change: opacity, transform;
}
.mmsa-track .mm-overlay.mm-overlay.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* Standard-Positionen der 4 Hero-Phasen (Figma Home_hero_animation-1..4, 1440x897) */
/* max-width mit !important: Elementors Widget-Basisregel hat Spezifitaet (0,4,0)
   (.elementor.elementor .e-con > .elementor-widget{max-width:100%}) */
.mmsa-track .mm-overlay.mm-ov-p1 { left: 3.9%; top: 17%; max-width: 56% !important; }
.mmsa-track .mm-overlay.mm-ov-p1-card { left: auto; right: 3.9%; bottom: 8%; top: auto; text-align: left; }
.mmsa-track .mm-overlay.mm-ov-p2 { left: 3.9%; bottom: 7.5%; max-width: 60% !important; }
.mmsa-track .mm-overlay.mm-ov-p3 { left: auto; right: 3.9%; bottom: 7.5%; max-width: 55% !important; }
.mmsa-track .mm-overlay.mm-ov-p4 { left: 3.9%; top: 14.7%; max-width: 70% !important; }
.mmsa-track .mm-overlay.mm-ov-p4-stats { left: 3.9%; right: 3.9%; bottom: 7%; max-width: none !important; }
@media (max-width: 1024px) {
  .mmsa-track .mm-overlay.mm-ov-p1, .mmsa-track .mm-overlay.mm-ov-p2, .mmsa-track .mm-overlay.mm-ov-p3, .mmsa-track .mm-overlay.mm-ov-p4 { max-width: 86% !important; }
}
@media (max-width: 767px) {
  .mmsa-track .mm-overlay.mm-ov-p1-card { display: none; }
  .mmsa-track .mm-overlay.mm-ov-p3 { right: auto; left: 3.9%; }
}

@media (prefers-reduced-motion: reduce) {
  .mmsa-hero { min-height: 100vh; }
  .mm-overlay { transition: none; transform: none; }
}