/* ==========================================================================
   Animation: Scroll-Reveals (nur transform), Micro-Interactions, Header
   ========================================================================== */

/* Reveal-Elemente sind im HTML immer voll sichtbar (opacity bleibt 1) —
   nur die Position verschiebt sich. So bleibt der Inhalt auch ohne JS und
   in headless Renderern sofort sichtbar; JS fügt lediglich die Bewegung hinzu. */
.reveal{
  transform: translateY(32px);
  transition: transform 720ms var(--ease-out);
  will-change: transform;
}
.reveal.is-visible{ transform: translateY(0); }

.reveal-scale{
  transform: scale(0.94);
  transition: transform 640ms var(--ease-out);
}
.reveal-scale.is-visible{ transform: scale(1); }

.reveal-side{
  transform: translateX(-36px);
  transition: transform 720ms var(--ease-out);
}
.editorial--right .reveal-side{ transform: translateX(36px); }
.reveal-side.is-visible{ transform: translateX(0); }

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-scale, .reveal-side{
    transform: none !important;
    transition: none !important;
  }
  .hero-slider__slide{ transition: none; }
}

/* ---- Hover / Press Micro-Interactions ---- */
a, button, .btn, .service-card, .related-services__list a{
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.service-card:active{ transform: scale(0.99); }
.burger:active{ transform: scale(0.96); }

/* ---- Zahlen im Kontakt-Datenblock: sanftes Einblenden per Transform ---- */
.contact-list li{ transform: translateY(6px); opacity: 1; }

/* ---- Ladeanimation Hero beim ersten Seitenaufruf ---- */
.hero-slider__content-inner{
  transform: translateY(18px);
  transition: transform 900ms var(--ease-out);
}
.hero-slider__content-inner.is-loaded{ transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
  .hero-slider__content-inner{ transform: none; transition: none; }
}