/* HM Aufstieg — Motor v2. Nur Mechanik, keine Gestaltung. Farben/Stärken über Variablen änderbar. */
:root{
  --aufstieg-weg-hell:#a9b8c9;   /* Grundweg */
  --aufstieg-weg:#D28E00;        /* freigelegter Weg */
  --aufstieg-weg-staerke:3;      /* Grundweg */
  --aufstieg-weg-staerke-aktiv:4.2;
  --aufstieg-weg-tempo:1s;
}

/* Bühne bleibt stehen — reines CSS-Sticky, kein Elementor-JS nötig. Elternelement: Flex-Zeile, align-items flex-start. */
/* Specificity muss Elementors .e-con{position:relative} schlagen */
.elementor-element.aufstieg-buehne,.aufstieg-buehne{position:sticky!important;top:var(--aufstieg-sticky-top,48px);align-self:flex-start}
/* overflow:clip am body killt sticky — nur die X-Achse klemmen, Y frei lassen */
body:has(.aufstieg-buehne){overflow-x:clip;overflow-y:visible}
@media(max-width:900px){.elementor-element.aufstieg-buehne,.aufstieg-buehne{position:relative!important;top:auto}}

/* Bühne: Bild + Weg aus [aufstieg_bild] */
.aufstieg-bild{position:relative;width:100%;aspect-ratio:var(--aufstieg-ratio,1092/1174)}
.aufstieg-bild > img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.aufstieg-bild > svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.aufstieg-bild .hma-pfad,.aufstieg-bild .hma-pfad-fill{fill:none;stroke-dasharray:9 13;stroke-linecap:round;
  animation:aufstieg-marsch var(--aufstieg-weg-tempo) linear infinite}
.aufstieg-bild .hma-pfad{stroke:var(--aufstieg-weg-hell);stroke-width:var(--aufstieg-weg-staerke);opacity:.75}
.aufstieg-bild .hma-pfad-fill{stroke:var(--aufstieg-weg);stroke-width:var(--aufstieg-weg-staerke-aktiv)}
@keyframes aufstieg-marsch{to{stroke-dashoffset:-22}}
.aufstieg-bild .hma-reveal{transition:y .8s ease,height .8s ease}

/* Blöcke auf der Bühne: nur bei aktiver Stufe sichtbar, Kinder erscheinen nacheinander */
[class*="aufstieg-block-"]{opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s}
[class*="aufstieg-block-"].on{opacity:1;visibility:visible}
[class*="aufstieg-block-"] > .elementor-element,
[class*="aufstieg-block-"] > .e-con-inner > .elementor-element{opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}
[class*="aufstieg-block-"].on > .elementor-element,
[class*="aufstieg-block-"].on > .e-con-inner > .elementor-element{opacity:1;transform:none}
[class*="aufstieg-block-"].on > .elementor-element:nth-child(1),[class*="aufstieg-block-"].on > .e-con-inner > .elementor-element:nth-child(1){transition-delay:.06s}
[class*="aufstieg-block-"].on > .elementor-element:nth-child(2),[class*="aufstieg-block-"].on > .e-con-inner > .elementor-element:nth-child(2){transition-delay:.12s}
[class*="aufstieg-block-"].on > .elementor-element:nth-child(3),[class*="aufstieg-block-"].on > .e-con-inner > .elementor-element:nth-child(3){transition-delay:.18s}
[class*="aufstieg-block-"].on > .elementor-element:nth-child(4),[class*="aufstieg-block-"].on > .e-con-inner > .elementor-element:nth-child(4){transition-delay:.24s}
[class*="aufstieg-block-"].on > .elementor-element:nth-child(5),[class*="aufstieg-block-"].on > .e-con-inner > .elementor-element:nth-child(5){transition-delay:.30s}
[class*="aufstieg-block-"].on > .elementor-element:nth-child(6),[class*="aufstieg-block-"].on > .e-con-inner > .elementor-element:nth-child(6){transition-delay:.36s}
[class*="aufstieg-block-"].on > .elementor-element:nth-child(7),[class*="aufstieg-block-"].on > .e-con-inner > .elementor-element:nth-child(7){transition-delay:.42s}
[class*="aufstieg-block-"].on > .elementor-element:nth-child(8),[class*="aufstieg-block-"].on > .e-con-inner > .elementor-element:nth-child(8){transition-delay:.48s}

/* Textblöcke: Innen-Wrapper wird bewegt, der Block selbst bleibt messbar */
.aufstieg-innen{will-change:opacity,transform}

/* Im Elementor-Editor alles sichtbar lassen */
.elementor-editor-active [class*="aufstieg-block-"],
.elementor-editor-active [class*="aufstieg-block-"] > .elementor-element,
.elementor-editor-active [class*="aufstieg-block-"] > .e-con-inner > .elementor-element{opacity:1!important;visibility:visible!important;transform:none!important}

@media(max-width:900px){
  [class*="aufstieg-block-"]{opacity:1;visibility:visible}
  [class*="aufstieg-block-"] > .elementor-element,[class*="aufstieg-block-"] > .e-con-inner > .elementor-element{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .aufstieg-bild .hma-pfad,.aufstieg-bild .hma-pfad-fill{animation:none}
  [class*="aufstieg-block-"] > .elementor-element{transition:none}
}