/* Äußerer Wrapper für den Slider */
.seo-carousel-wrapper {
  position: relative; /* Wichtig: Buttons werden relativ zu diesem Container positioniert */
  width: 100%;
  overflow visible: Standard, damit die Buttons außerhalb des inneren Containers angezeigt werden */
}

.seo-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.seo-carousel ul {
  padding: 0!important;
}  

.seo-carousel-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 25px;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 0.5s ease;
}

/* Standard (Desktop): 4 Spalten */
.seo-carousel-track .sil-item {
  flex: 0 0 calc((100% - 75px) / 4);
}

/* Mittlere Bildschirme: 3 Spalten */
@media (max-width: 1100px) {
  .seo-carousel-track .sil-item {
    flex: 0 0 calc((100% - 50px) / 3);
  }
}

/* Kleine Bildschirme: 2 Spalten */
@media (max-width: 800px) {
  .seo-carousel-track .sil-item {
    flex: 0 0 calc((100% - 25px) / 2);
  }
}

/* Sehr kleine Bildschirme: 1 Spalte */
@media (max-width: 500px) {
  .seo-carousel-track .sil-item {
    flex: 0 0 100%;
  }
}

/* Positionierung der Buttons außerhalb des Sliders */
.seo-carousel-prev,
.seo-carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 1000; /* Hoher z-index, damit sie über allen anderen Elementen liegen */
  pointer-events: auto; /* Sicherstellen, dass sie klickbar sind */
  font-size: 1.5rem;
}

/* Beispielsweise 40px außerhalb */
.seo-carousel-prev {
  left: -40px;
  pointer-events: auto !important;
}

.seo-carousel-next {
  right: -40px;
  pointer-events: auto !important;
}