/* =========================================================
   Mrs. Property · Terminseite Kaufbegleitung · Bewegung (Basis heben-build, B1 bis B6)
   Greift nur, wenn motion.js bzw. das Kopf-Skript html.js gesetzt hat
   UND keine reduzierte Bewegung gewuenscht ist. Ohne JS und bei
   prefers-reduced-motion steht alles sofort sichtbar an seinem Platz.
   Nur opacity und transform, damit nichts verspringt.
   ========================================================= */
@media (prefers-reduced-motion:no-preference){

  /* B1/B2: Einblenden, einmalig, Staffel ueber --d */
  .js [data-reveal]{
    opacity:0;transform:translateY(12px);
    transition:opacity var(--t-enter) var(--ease),transform var(--t-enter) var(--ease);
    transition-delay:var(--d,0ms);
  }
  .js [data-reveal].is-in{opacity:1;transform:none}

  /* B3: Bauplan-Ecken zeichnen sich entlang ihrer Schenkel */
  .js .bp:not(.is-in)::before,
  .js .bp:not(.is-in)::after{transform:scale(0)}

  /* B4: Schritt-Linie waechst von oben nach unten */
  .js .steps:not(.is-in) li::after{transform:scaleY(0)}

  /* B6: Hero beim Laden */
  .js .hero-main > *{animation:mp-rise var(--t-enter) var(--ease) both}
  .js .hero-main > :nth-child(2){animation-delay:60ms}
  .js .hero-main > :nth-child(3){animation-delay:120ms}
  .js .hero-main > :nth-child(4){animation-delay:180ms}
  .js .hero-main > :nth-child(5){animation-delay:240ms}
  .js .hero-img img{animation:mp-fade 500ms var(--ease) 120ms both}
}

@keyframes mp-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes mp-fade{from{opacity:0}to{opacity:1}}