/* ==========================================================
   animation.css – Einflug-Animationen beim Scrollen
   Elemente fliegen aus dem nicht sichtbaren Bereich an ihren
   Platz. Aktiv nur, wenn <html class="fly-on"> gesetzt ist
   (nicht bei "Bewegung reduzieren" und nicht ohne JavaScript).
   Verwendet die Eigenschaft "translate", damit vorhandene
   transform-Effekte (z. B. Hover) in css.css unberührt bleiben.
   ========================================================== */

:root{
  --fly-x:105vw;                      /* Startabstand seitlich (außerhalb des Bildschirms) */
  --fly-y:90px;                       /* Startabstand von unten */
  --fly-ease:cubic-bezier(.2,.8,.2,1);
}

/* verhindert seitliche Scrollbalken durch die ausgelagerten Elemente */
html,body{overflow-x:clip}

/* Richtungen */
.fly-l{--fx:calc(var(--fly-x) * -1)}
.fly-r{--fx:var(--fly-x)}
.fly-u{--fy:var(--fly-y)}

/* Ausgangszustand (außerhalb) */
html.fly-on .fly,
html.fly-on .cta .cta-box,
html.fly-on .faq details{
  opacity:0;
  translate:var(--fx,0) var(--fy,0);
  transition:
    opacity .7s ease var(--fd,0s),
    translate 1.15s var(--fly-ease) var(--fd,0s),
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    background-color .25s ease;
  will-change:translate,opacity;
}

/* Endzustand (an der vorhandenen Stelle) – Klasse "in" setzt das Skript */
html.fly-on .fly.in,
html.fly-on .cta.in .cta-box,
html.fly-on .faq.in details{
  opacity:1;
  translate:0 0;
  will-change:auto;
}

/* Banner-Text */
.banner-text.fly{--fd:.2s}

/* Karten: laufen von beiden Seiten aufeinander zu */
.grid4 > .fly:nth-child(1),
.grid4 > .fly:nth-child(4){--fd:0s}
.grid4 > .fly:nth-child(2),
.grid4 > .fly:nth-child(3){--fd:.14s}

/* Pakete / Betreuung / Sicherheit */
.plan.pro.fly,
.panel.fly,
.pod.fly{--fd:.15s}

/* Kontaktboxen: links, unten, rechts */
.cta .cta-box:nth-child(1){--fx:calc(var(--fly-x) * -1)}
.cta .cta-box:nth-child(2){--fy:var(--fly-y);--fd:.15s}
.cta .cta-box:nth-child(3){--fx:var(--fly-x);--fd:.3s}

/* FAQ: abwechselnd von links und rechts */
.faq details:nth-child(odd){--fx:calc(var(--fly-x) * -1)}
.faq details:nth-child(even){--fx:var(--fly-x)}
.faq details:nth-child(2){--fd:.08s}
.faq details:nth-child(3){--fd:.16s}
.faq details:nth-child(4){--fd:.24s}
.faq details:nth-child(5){--fd:.32s}
.faq details:nth-child(6){--fd:.4s}
.faq details:nth-child(7){--fd:.48s}

/* Fuß */
.foot .fly-u{--fd:.12s}
.foot .fly-r{--fd:.24s}
.foot-bottom.fly{--fd:.1s}

@media (prefers-reduced-motion:reduce){
  html.fly-on .fly,
  html.fly-on .cta .cta-box,
  html.fly-on .faq details{opacity:1;translate:none;transition:none}
}