@media (max-width: 768px) {
  body {width: 100%; background-color: tan;
  }
  /* Kopfzeile anpassen */
  header {
    flex-direction: column;
    align-items: center;
  }

  header h1 {
    font-size: 3rem;
  }

  header img {
    height: 50px;
    padding-top: 10px;
  }

  /* Navigation anpassen */
  nav {
    flex-direction: column;
  }

  nav ul {
    flex-direction: column;
    text-align: center;
  }

  nav li {
    flex: 1;
    margin-bottom: 10px;
  }

  nav a,
  nav span {
    font-size: 1.8rem;
  }
}

@media (max-width: 480px) {
  /* Kopfzeile anpassen */
  body{width: 100%;}
  
  header {
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
  }

  header h1 {
    font-size: 2.5rem;
  }
  
  h2 {
        font-size: 1.6rem;
      }

  
video {
  max-width:100%;
  margin: 0 20 0 20;
  padding: 0.5rem;
}
  
  header img {
    height: 40px;
    padding-top: 5px;
  }

  /* Navigation anpassen */
  nav {
    flex-direction: row; /* Navigation in einer Zeile */
    justify-content: center;
    width: 100%; /* Stellt sicher, dass die Navigation die volle Breite des Viewports hat */
    overflow: hidden; /* stellt sicher, dass nichts über den Rand hinausgeht. */
    box-sizing: border-box; /* Bezieht Padding in die Breite ein */
  }

  nav ul {
    display: flex;
    flex-direction: row; /* stellt sicher, dass die Links in einer Zeile bleiben */
    justify-content: center;
    padding: 0;
    margin: 1;
    width: 100%; /* stellt sicher, dass die Liste ebenfalls die volle Breite des Containers nutzt, um Überschreitungen zu vermeiden */
    list-style-type: none; /* Entfernt Aufzählungszeichen */
    box-sizing: border-box;
  }

  nav li {
    flex: 1; /* Elemente teilen sich den verfügbaren Platz */
    margin: 0 1px; /* Reduzierter Abstand zwischen den Links */
    text-align: center; /* Zentriert den Text */
  }

  nav a,
  nav span {
    font-size: 0.9rem; /* Kleinere Schriftgröße */
    padding: 4px 5px; /* Polsterung innerhalb der Links */
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

  /* Bilder untereinander mit Fließtext */
  figure {
    flex-direction: column; /* Vertikale Anordnung für Smartphones */
  }

  .image-wrapper {
    max-width: 100%; /* max. Breite für den Bildcontainer */
    margin-bottom: 5px; /* Abstand zwischen Bild und Text */
  }

  .text-wrapper {
    flex: 1 1 auto; /* Text nimmt den restlichen Platz ein */
  }
}