/* sachen faden ein sobald man hinscrollt */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
.reveal.pop{transform:translateY(24px) scale(.94)}
.reveal.is-visible{opacity:1;transform:none}

/* tablets */
@media(max-width:980px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .support-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}
}

/* handy navi */
@media(max-width:860px){
  .nav-links,.nav .nav-in .nav-cta{display:none}
  .menu-btn{display:block}
  .nav.open .nav-links{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:rgba(9,9,11,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);padding:8px 28px 18px}
  .nav.open .nav-links a{padding:14px 0;border-bottom:1px solid var(--line-soft);opacity:0;animation:navDrop .38s var(--ease) forwards}
  .nav.open .nav-links a:nth-child(1){animation-delay:.04s}
  .nav.open .nav-links a:nth-child(2){animation-delay:.09s}
  .nav.open .nav-links a:nth-child(3){animation-delay:.14s}
  .nav.open .nav-links a:nth-child(4){animation-delay:.19s}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:none}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .steps-grid{grid-template-columns:1fr}
  .bg-slot{display:none}
}
@keyframes navDrop{from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:none}}
@media(max-width:560px){
  .wrap,.nav-in{padding-left:20px;padding-right:20px}
  .foot-grid{grid-template-columns:1fr}
  .hero{padding-top:110px}
}
@media(hover:none),(pointer:coarse){
  .bg-slot{display:none}
}

/* falls jemand animationen aus hat, respektieren wir das */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal,.reveal-load,.emblem{opacity:1!important;transform:none!important}
  .emblem-glow{animation:none!important}
}
.emblem-img{width:100%;height:100%;background:var(--logo) center/contain no-repeat;filter:drop-shadow(0 20px 50px rgba(255,46,58,.3))}
.emblem-sm-img{width:100%;aspect-ratio:1;background:var(--logo) center/contain no-repeat;filter:drop-shadow(0 0 28px rgba(255,46,58,.4))}
.bg-wheel-logo{position:absolute;top:50%;left:50%;width:15vmax;height:15vmax;margin:-7.5vmax 0 0 -7.5vmax;background:var(--logo) center/contain no-repeat;opacity:.4;z-index:0;pointer-events:none}
.brand-logo{width:32px;height:32px;background:var(--logo) center/contain no-repeat;flex-shrink:0;filter:drop-shadow(0 0 7px rgba(255,46,58,.4))}
.brand-name{color:var(--white)}
.brand-name i{font-style:normal;color:var(--red)}