@media (max-width: 800px) {
  /* Ausgangszustand */
  #intro h1, #intro h2, #intro a {
    opacity: 0;
    transform: none;
    animation: none;
  }

  /* Lazy-Einblendung (translateY + fade-in) */
  #intro h1.animate,
  #intro h2.animate {
    animation: lazyFade 0.8s ease-out forwards;
  }

  #intro h2.animate {
    animation-delay: 0.2s;
  }

  @keyframes lazyFade {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Zoom-In Effekt für Buttons */
  #intro a {
    opacity: 0;
    transform: scale(0.4);
    animation: none;
  }

  #intro a.zoom {
    animation: zoomIn 0.5s ease-out forwards;
  }

  #intro a.zoom:nth-of-type(1) {
    animation-delay: 0.4s;
  }

  #intro a.zoom:nth-of-type(2) {
    animation-delay: 0.6s;
  }

  @keyframes zoomIn {
    from {
      opacity: 0;
      transform: scale(0.4);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
}
  

@media (max-width: 800px) {
        /* Ausgangszustand */
        #design-section h2,
        #design-section h3,
        #design-section a {
          opacity: 0;
          transform: none;
          animation: none;
        }
      
        /* Typing Effekt */
        #design-section h2.typing,
        #design-section h3.typing {
          display: block;
          visibility: visible;
          overflow: hidden;
          animation: typingText 1s ease-out forwards;
        }
      
        #design-section h3.typing {
          animation-delay: 0.5s;
        }
      
        @keyframes typingText {
          0% {
            opacity: 0;
            transform: translateY(10px);
          }
          100% {
            opacity: 1;
            transform: translateY(0);
          }
        }
      
        /* Zoom-In Buttons */
        #design-section a.zoom {
          animation: zoomIn 0.5s ease-out forwards;
        }
      
        @keyframes zoomIn {
          from {
            opacity: 0;
            transform: scale(0.6);
          }
          to {
            opacity: 1;
            transform: scale(1);
          }
        }
  
  
  @media (max-width: 800px) {
        /* Ausgangszustand */
        #statement-section h2,
        #statement-section h3,
        #statement-section a {
          opacity: 0;
          transform: none;
          animation: none;
        }
      
        /* Typing Effekt */
        #statement-section h2.typing,
        #statement-section h3.typing {
          display: block;
          visibility: visible;
          overflow: hidden;
          animation: typingText 1s ease-out forwards;
        }
      
        #statement-section h3.typing {
          animation-delay: 0.5s;
        }
      
        @keyframes typingText {
          0% {
            opacity: 0;
            transform: translateY(10px);
          }
          100% {
            opacity: 1;
            transform: translateY(0);
          }
        }
      
        /* Zoom-In für Buttons */
        #statement-section a.zoom {
          animation: zoomIn 0.5s ease-out forwards;
        }
      
        @keyframes zoomIn {
          from {
            opacity: 0;
            transform: scale(0.6);
          }
          to {
            opacity: 1;
            transform: scale(1);
          }
        }
      }
      
      }