/* ### Container der Slides ### */
.slider-container { 
  width: 80%;
  max-width: 800px;
  height: 250px;
  margin: auto;
  overflow: hidden;
  position: relative;
  border-radius: 4px;
  background: #010859;
/*  opacity: 0.75; */
  color: white;
  box-shadow: rgba(0, 0, 0, 0.15) 0px -2px 0px inset;
}

/* ### alle Slides ### */
.slider { 
  display: flex;
  width: 1300%; /* 100% * 13 slides */
  height: 100%; /* WICHTIG: Höhe muss definiert sein */
  animation: slide 90s infinite; /* 5 seconds per slide */
}

.slide {
  width: 7.69%; /* 100% / 13 slides */
  height: 100%; /* WICHTIG: Vollständige Höhe vom Parent erben */
  /* position: relative; wird nicht mehr benötigt, da der Text normal im Fluss ist */
  /* align-items: center; ist für das Elternelement gedacht */
}

.text {
  display: flex;
  justify-content: center; /* Zentriert den Text horizontal */
  align-items: center;    /* Zentriert den Text vertikal */
  /* position: absolute; entfernen, da wir Flexbox nutzen */
  width: 100%;
  height: 100%; /* Text-Container nimmt die volle Höhe des .slide-Elements ein */
  color: white;
  padding: 15px;
  box-sizing: border-box;
  text-align: center;
  font-size: 1.3em;
  overflow-wrap: break-word;
}

@keyframes slide {
  0% { transform: translateX(0%); }
  7.69% { transform: translateX(0%); }
  
  15.38% { transform: translateX(-7.69%); }
  23.07% { transform: translateX(-15.38%); }

  30.76% { transform: translateX(-23.07%); }
  38.45% { transform: translateX(-30.76%); }

  46.14% { transform: translateX(-38.45%); }
  53.83% { transform: translateX(-46.14%); }

  61.52% { transform: translateX(-53.83%); }
  69.21% { transform: translateX(-61.52%); }

  76.9% { transform: translateX(-69.21%); }
  84.59% { transform: translateX(-76.9%); }
  92.28% { transform: translateX(-84.59%); }

  100% { transform: translateX(-92.2%); } 
  /* Continue this pattern for all 13 slides */
}