@import url('https://fonts.cdnfonts.com/css/helvetica-neue-9');
/* Allgemeine Einstellungen */
html {
    font-size: 16px; /* Setzt die Größe der Schriftart auf 16 Pixel */
    box-sizing: border-box; /* Setzt das Box-Modell auf border-box, um das Layout einfacher zu machen */
  }
  
  /* Schriftarten */
  body {
    padding: 0;
    font-family: sans-serif; /* Setzt eine serifenlose Schriftart für den Haupttext */
    margin: 0;
    display: flex; /* Setzt das Flex-Layout auf den Body */
    align-items: center; /* Zentriert alle Elemente vertikal */
    justify-content: center; /* Zentriert alle Elemente horizontal */
    height: 100vh; /* Setzt die Höhe des Body auf die volle Bildschirmhöhe */
    background: linear-gradient(to right, rgba(255, 183, 187, 0.8), rgba(255, 219, 167, 0.8), rgba(201, 255, 164, 0.8), rgba(163, 255, 254, 0.8), rgba(192, 174, 255, 0.8), rgba(255, 181, 226, 0.8), rgba(255, 183, 187, 0.8));
    background-size: 1500% 1500%;
    animation: gradient 30s ease infinite;
  }
  @keyframes gradient {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
  }
  .waveImg {
    position: relative; /* Neues Styling */
    display: flex;
    justify-content: center;
  }
  
  .wave {
    animation: moveTheWave 3400ms linear infinite;
    stroke-dasharray: 0 16 101 16;
  }
  
  @keyframes moveTheWave {
    0% {
      stroke-dashoffset: -3;
      transform: translate3d(0, 0, 0);
    }
  
    100% {
      stroke-dashoffset: -138;
      transform: translate3d(-90px, 0, 0);
    }
  }

  h1, h2, h3, h4, h5, h6 {
    text-transform: uppercase;
    font-family: 'Helvetica Neue', sans-serif; 
    margin: 0;
  }
  
  /* Responsives Layout */
  @media (max-width: 768px) {
    nav {
      display: block;
      text-align: center;
      margin-bottom: 1em;
    }
    
    nav ul {
      display: inline-block;
      margin: 0;
      padding: 0;
    }
    
    nav li {
      display: block;
      margin: 0;
      padding: 0;
    }
    
    .col {
      width: 100%;
      margin: 0;
      padding: 0;
    }
  }
  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  
  img {
    width: 120px;
    margin-bottom: 1.5em;
    align-items: center;
    justify-content: center;
    display: flex;
  }