@keyframes grow {
    0% {
      width: var(--prog-h);
  
    }
  
    100% {
      width: var(--passung-value);
  
    }
  }
  .l-card.is-visible .passung__fill {
    animation: grow 1s forwards;
    width: var(--prog-h);
  }
 
  .l-card.is-visible .passung__value-triangle {
    animation: changeColor 0.5s forwards 1s;
    opacity: 0;
  }
 
  .l-card.is-visible .passung__value-label {
    opacity: 0;
    animation: changeColor 0.5s forwards 1s;
  }  
  
  @keyframes changeColor {
    0% {
      opacity: 0;
    }
  
    100% {
      opacity: 1;
    }
  }
  
  @keyframes slideUpFade {
    0% {
      transform: translateY(20px);
      opacity: 0;
    }
  
    60% {
      opacity: 1;
    }
  
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes popFade {
    0% {
      transform: translateY(10px) scale(1);
      opacity: 0;
    }
  
    100% {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
  } 

  @keyframes introSlideUpFade {
    0% {
      transform: translateY(20px);
      opacity: 0;
    }
  
    50% {
      opacity: 0.9;
    }
  
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
    
  .l-hero .l-hero__heading,
  .l-hero .l-hero__txt,
  .l-hero .c-hero__btn,
  .l-hero .hero__img {
    opacity: 0;
    transform: translateY(20px);
  }
  
  .l-hero.is-visible .l-hero__heading {
    animation: slideUpFade 560ms ease-in-out forwards;
    animation-delay: 0.05s;
  }
  
  .l-hero.is-visible .l-hero__txt {
    animation: slideUpFade 560ms ease-in-out forwards;
    animation-delay: 0.12s;
  }
  
  .l-hero.is-visible .hero__img {
    animation: slideUpFade 560ms ease-in-out forwards;
    animation-delay: 0.18s;
  }
  
  .l-hero.is-visible .c-hero__btn {
    animation: popFade 420ms ease-in-out forwards;
    animation-delay: 0.24s;
  }
  
  .l-intro .c-intro__block-heading,
  .l-intro .c-intro__block-txt {
    opacity: 0;
    transform: translateY(20px);
  }
  
  .l-intro.is-visible .c-intro__block-heading,
  .l-intro.is-visible .c-intro__block-txt {
    animation: slideUpFade 560ms ease-in-out forwards
  }
  
  /* stagger per block: heading first, text slightly after (within same block) */
  .l-intro.is-visible .l-intro__block:nth-of-type(1) .c-intro__block-heading {
    animation-delay: 0.05s;
  }
  
  .l-intro.is-visible .l-intro__block:nth-of-type(1) .c-intro__block-txt {
    animation-delay: 0.05s;
  }
  
  .l-intro.is-visible .l-intro__block:nth-of-type(2) .c-intro__block-heading {
    animation-delay: 0.23s;
    
  }
  
  .l-intro.is-visible .l-intro__block:nth-of-type(2) .c-intro__block-txt {
    animation-delay: 0.23s;
  }
  
  .l-intro.is-visible .l-intro__block:nth-of-type(3) .c-intro__block-heading {
    animation-delay: 0.47s;

  }
  
  .l-intro.is-visible .l-intro__block:nth-of-type(3) .c-intro__block-txt {
    animation-delay: 0.47s;
  }
  
  .l-intro.is-visible .l-intro__block:nth-of-type(4) .c-intro__block-heading {
    animation-delay: 0.77s;
  }
  
  .l-intro.is-visible .l-intro__block:nth-of-type(4) .c-intro__block-txt {
    animation-delay: 0.77s;
  }
  

  @media (max-width: 899.8px) {
    .l-hero.is-visible .hero__img {
      animation: slideUpFade 560ms ease-in-out forwards;
      animation-delay: 0s; 
    }
  
    .l-hero.is-visible .l-hero__heading {
      animation: slideUpFade 560ms ease-in-out forwards;
      animation-delay: 0.06s; 
    }
  
    .l-hero.is-visible .l-hero__txt {
      animation: slideUpFade 560ms ease-in-out forwards;
      animation-delay: 0.13s; 
    }
  
    .l-hero.is-visible .c-hero__btn {
      animation: popFade 420ms ease-in-out forwards;
      animation-delay: 0.20s; 
    }
  }
  
 @media (prefers-reduced-motion: reduce) {
    .l-hero .l-hero__heading,
    .l-hero .l-hero__txt,
    .l-hero .hero__img,
    .l-hero .c-hero__btn,
    .l-hero .hero__img-inner-wrap::before,
    .l-intro .c-intro__block-heading,
    .l-intro .c-intro__block-txt,
    .l-intro .l-intro__block {
      animation: none !important;
      transition: none !important;
      transform: none !important;
      opacity: 1 !important;
      will-change: auto !important;
    }
 }