:root{--ease:cubic-bezier(.16,1,.3,1)}

@media (prefers-reduced-motion:no-preference) and (max-width:820px){
  .nav a{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .nav.is-open a{opacity:1;transform:translateY(0)}
  .nav.is-open a:nth-child(1){transition-delay:.05s}
  .nav.is-open a:nth-child(2){transition-delay:.1s}
  .nav.is-open a:nth-child(3){transition-delay:.15s}
  .nav.is-open a:nth-child(4){transition-delay:.2s}
  .nav.is-open a:nth-child(5){transition-delay:.25s}
  .nav.is-open a:nth-child(6){transition-delay:.3s}
}

@media (prefers-reduced-motion:no-preference){
  .will-reveal{opacity:0}
  /* backwards statt both: ein bleibender Endwert würde den Hover-Transform der Karten dauerhaft überschreiben */
  .will-reveal.is-visible{opacity:1;animation:kliqReveal .65s var(--ease) backwards}
  @keyframes kliqReveal{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

  .service-grid .will-reveal:nth-child(2),.offer-grid .will-reveal:nth-child(2){animation-delay:.1s}
  .service-grid .will-reveal:nth-child(3),.offer-grid .will-reveal:nth-child(3){animation-delay:.2s}
  .process li.will-reveal:nth-child(2){animation-delay:.1s}
  .process li.will-reveal:nth-child(3){animation-delay:.2s}
  .services-intro.will-reveal,.statement h2.will-reveal,.contact h2.will-reveal{animation-delay:.08s}
  .statement-copy.will-reveal,.contact-link.will-reveal{animation-delay:.16s}
  .contact-meta.will-reveal{animation-delay:.24s}
  .demo .window-wrap.will-reveal{animation-delay:.12s}
  .sub-hero h1.will-reveal{animation-delay:.08s}
  .sub-lead.will-reveal,.sub-hero .section-label.will-reveal{animation-delay:.12s}
  .sub-actions.will-reveal,.pkg-image.will-reveal{animation-delay:.2s}
  .more-grid .will-reveal:nth-child(2){animation-delay:.1s}
}

.inquiry-form label[hidden]{display:none}

.service,.offer-card{transition:transform .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease)}
.service:hover,.offer-card:hover{transform:translateY(-6px);border-color:#4a5453;box-shadow:0 24px 44px -22px #000c}
.service.geo:hover{border-color:var(--mint)}

.service-icon{transition:transform .5s var(--ease)}
.service:hover .service-icon{transform:translateY(-4px)}
.icon-globe{transition:transform .8s var(--ease)}
.service.geo:hover .icon-globe{transform:rotate(18deg)}
.icon-bars i{transition:height .4s var(--ease)}
.service:hover .icon-bars i:nth-child(1){height:22px}
.service:hover .icon-bars i:nth-child(2){height:36px}
.service:hover .icon-bars i:nth-child(3){height:29px}

.offer-card img{transition:transform .7s var(--ease)}
.offer-card:hover img{transform:scale(1.045)}

.service a b,.text-link b{transition:transform .35s var(--ease)}
.service a:hover b,.text-link:hover b{transform:translate(4px,-3px)}