/* ==========================================================================
   Herzlicht — Motion: Reveals, Micro-Interactions
   Beruhigend statt beeindruckend: sanftes Ein-/Ausblenden, kein Parallax-Gimmick.
   ========================================================================== */

/* Wichtig: NIE opacity:0 als Startzustand — sonst bleibt Content unsichtbar, falls JS
   nicht läuft, ein Crawler nicht scrollt, oder ein Full-Page-Screenshot vor dem
   IntersectionObserver-Callback greift. Nur die Position animiert, sichtbar ist alles
   immer. */
.reveal{
  opacity: 1;
  transform: none;
  transition: transform 700ms var(--ease-out);
}
.js-motion .reveal{
  transform: translateY(22px);
}
.js-motion .reveal.is-visible{
  transform: translateY(0);
}
.js-motion .reveal--fade{ transform: none; }

@media (prefers-reduced-motion: reduce){
  .js-motion .reveal{ transform: none; transition: none; }
}

/* Hero-Einblendung beim Laden (läuft ohne IO, sofort) */
.hero__content > *{
  animation: heroIn 900ms var(--ease-out) both;
}
.hero__content > *:nth-child(1){ animation-delay: 40ms; }
.hero__content > *:nth-child(2){ animation-delay: 110ms; }
.hero__content > *:nth-child(3){ animation-delay: 180ms; }
.hero__content > *:nth-child(4){ animation-delay: 250ms; }
.hero__content > *:nth-child(5){ animation-delay: 320ms; }
.hero__media{ animation: heroMediaIn 1000ms var(--ease-out) 160ms both; }

@keyframes heroIn{
  from{ opacity: 0; transform: translateY(16px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes heroMediaIn{
  from{ opacity: 0; transform: translateY(24px) scale(.98); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .hero__content > *, .hero__media{ animation: none; }
}

/* Micro-Interactions */
.card, .service-card, .team-card, a.footer-brand, .icon-tile{ will-change: transform; }
a, button{ -webkit-tap-highlight-color: transparent; }

.pill, .btn, .card, .service-card{ transition-property: transform, box-shadow, background, color, border-color; }

.contact-method{ transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
.contact-method:hover{ transform: translateX(4px); opacity: .92; }

.footer-col a{ transition: opacity var(--dur-fast) var(--ease-out); }

/* Zähler-Puls beim Sichtbarwerden */
.stat__value{ transition: color var(--dur-base) var(--ease-out); }

/* Skeleton fürs Bild-Lazyload (verhindert Layout-Sprung) */
img[loading="lazy"]{ background: var(--bg-soft); }