.sliderpart {
  width: 100%;
  height: 500px;
  overflow: hidden; /* Versteckt alles, was außerhalb des sichtbaren Bereichs liegt */
  position: relative;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.einzelneslieder {
  display: flex;
  width: 1000%; /* Breite auf 10 mal 100% setzen, da es 10 Bilder gibt (gibt nur noch 7,s aber funktioniert also bleibt es so) */
  animation: slide 40s infinite; /* Animation dauert 20 Sekunden */
}

.einzelneslieder img {
  width: 10%; /* Jedes Bild nimmt 10% der Breite des Containers ein */
  flex-shrink: 0; /* Verhindert das Schrumpfen der Bilder */
}
/*slider übergang jeweils 10% Übergang und 5% Bild anzeigen*/
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  5% {
    transform: translateX(0%);
  }
  15% {
    transform: translateX(-10%);
  }
  20% {
    transform: translateX(-10%);
  }
  30% {
    transform: translateX(-20%);
  }
  35% {
    transform: translateX(-20%);
  }
  45% {
    transform: translateX(-30%);
  }
  50% {
    transform: translateX(-30%);
  }
  60% {
    transform: translateX(-40%);
  }
  65% {
    transform: translateX(-40%);
  }
  75% {
    transform: translateX(-50%);
  }
  80% {
    transform: translateX(-50%);
  }
  90% {
    transform: translateX(-60%);
  }
  95% {
    transform: translateX(-60%);
  }
}

h1 {
  text-align: center;
  font-size: 2.7em;
}


a {
  text-decoration: none;
}
.bilderliste {
  width: 700px;
}

.scroll{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 95%;
  flex-direction: column;
  margin-top: -10vh;
  padding: 1em;
  }
  .div{
  
  height: auto;
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  
  margin: 100px 0;
  
  }


@media screen and (max-width: 900px){ 
  .sliderpart{

  height: 300px; }
}


@media screen and (max-width: 900px){

  .div {
    flex-direction: column;
  }
  .sliderpart{
    width: 100px;
  height: 500px;
  overflow-x: hidden;
    top: 50%;
  left: 0;
    overflow: hidden;
  }
  .sliderpart {
  width: 100vw;
  height: 300px;

}


p {
  width: 80%;
}
.bilderliste {
  width: 300px;

}

}




.background-svg {
  position: fixed; /* oder 'absolute', je nach Bedarf */
  top: 0;
  left: 0;
margin-top: 10em;
  width: 100%;
  height: 100%;
  z-index: -1; /* Stellt sicher, dass das SVG im Hintergrund ist */
}