:root{--motion-ease:cubic-bezier(.16,1,.3,1);--motion-soft:cubic-bezier(.22,.8,.3,1)}

/* Cinematischer, aber ruhiger Einstieg. */
.motion-ready .header{opacity:0;translate:0 -18px}
.motion-ready.hero-intro-ready .header{opacity:1;translate:0 0;transition:opacity .7s var(--motion-ease),translate .7s var(--motion-ease),box-shadow .35s,background .35s}
.motion-ready .hero-copy>*,.motion-ready .hero-visual{opacity:0}
.motion-ready .hero-copy>*{transform:translate3d(0,34px,0);filter:blur(6px)}
.motion-ready.hero-intro-ready .hero-copy>*{opacity:1;transform:none;filter:none;transition:opacity .85s var(--motion-ease),transform .85s var(--motion-ease),filter .85s var(--motion-ease)}
.motion-ready.hero-intro-ready .hero-copy>:nth-child(1){transition-delay:.08s}
.motion-ready.hero-intro-ready .hero-copy>:nth-child(2){transition-delay:.15s}
.motion-ready.hero-intro-ready .hero-copy>:nth-child(3){transition-delay:.23s}
.motion-ready.hero-intro-ready .hero-copy>:nth-child(4){transition-delay:.31s}
.motion-ready.hero-intro-ready .hero-copy>:nth-child(5){transition-delay:.39s}
.motion-ready .hero-visual{transform:translate3d(22px,18px,0) scale(.985)}
.motion-ready.hero-intro-ready .hero-visual{opacity:1;transform:none;transition:opacity 1s var(--motion-ease) .18s,transform 1.15s var(--motion-ease) .18s}
.motion-ready.hero-intro-ready .month-card{animation:month-card-arrive .9s var(--motion-ease) .62s both}

/* Scroll-Reveals mit Richtung, leichter Tiefenwirkung und gestaffeltem Timing. */
.motion-ready .reveal{--reveal-x:0px;--reveal-y:48px;opacity:0;filter:blur(8px);transform:translate3d(var(--reveal-x),var(--reveal-y),0) scale(.985);transition:opacity .85s var(--motion-ease),filter .85s var(--motion-ease),transform .9s var(--motion-ease);transition-delay:var(--reveal-delay,0ms);will-change:opacity,filter,transform}
.motion-ready .reveal[data-reveal=left]{--reveal-x:-48px;--reveal-y:10px}
.motion-ready .reveal[data-reveal=right]{--reveal-x:48px;--reveal-y:10px}
.motion-ready .reveal.visible{opacity:1;filter:none;transform:none;will-change:auto}
.motion-ready .service-card.reveal.visible:hover{transform:translateY(-10px)}

/* Kleine Bewegungen geben den vorhandenen Elementen mehr Leben. */
.service-card .service-symbol{transition:transform .55s var(--motion-ease)}
.service-card:hover .service-symbol{transform:translateY(-5px) rotate(-3deg) scale(1.04)}
.service-card.featured:hover .service-symbol{transform:translateY(-5px) scale(1.055)}
.steps li>span{transition:transform .45s var(--motion-ease),opacity .45s}
.steps li:hover>span{transform:translateX(6px);opacity:1}
.about-photo img{transition:transform 1.1s var(--motion-ease),filter .6s}
.about-photo:hover img{transform:scale(1.018);filter:saturate(.92)}
.motion-ready .intro-copy .flow span{opacity:0;transform:translateY(12px);transition:opacity .5s var(--motion-ease),transform .5s var(--motion-ease)}
.motion-ready .intro-copy.visible .flow span{opacity:1;transform:none}
.motion-ready .intro-copy.visible .flow span:nth-child(1){transition-delay:.2s}
.motion-ready .intro-copy.visible .flow span:nth-child(2){transition-delay:.28s}
.motion-ready .intro-copy.visible .flow span:nth-child(3){transition-delay:.36s}

.button,.nav-cta{position:relative;overflow:hidden;isolation:isolate}
.button::before,.nav-cta::before{content:'';position:absolute;inset:-2px;width:42%;background:linear-gradient(105deg,transparent,#fff7,transparent);transform:translateX(-180%) skewX(-18deg);transition:transform .75s var(--motion-ease);pointer-events:none;z-index:2}
.button:hover::before,.nav-cta:hover::before{transform:translateX(350%) skewX(-18deg)}
.action-icon svg{transition:transform .4s var(--motion-ease)}
.button:hover .action-icon svg,.nav-cta:hover .action-icon svg{transform:scale(1.06) rotate(-3deg)}

/* Die Header-Grafik bewegt sich auf großen Bildschirmen minimal mit dem Scroll. */
@media(min-width:761px) and (pointer:fine){
  .hero .photo-main{translate:0 calc(var(--hero-scroll,0px) * -1);transition:translate .14s linear}
  .hero .month-card{translate:0 var(--hero-scroll,0px);transition:translate .14s linear}
}

@keyframes month-card-arrive{from{opacity:0}to{opacity:1}}

@media(max-width:760px){
  .motion-ready .reveal[data-reveal=left],.motion-ready .reveal[data-reveal=right]{--reveal-x:0px;--reveal-y:38px}
  .motion-ready .hero-visual{transform:translate3d(0,24px,0) scale(.99)}
  .service-card:hover .service-symbol,.service-card.featured:hover .service-symbol,.about-photo:hover img{transform:none}
}

@media(prefers-reduced-motion:reduce){
  .motion-ready .header,.motion-ready .hero-copy>*,.motion-ready .hero-visual,.motion-ready .reveal,.motion-ready .intro-copy .flow span{opacity:1;translate:none;transform:none;filter:none;clip-path:none;transition:none;animation:none;will-change:auto}
  .hero .photo-main,.hero .month-card{translate:none!important}
}