/* Äußerer Wrapper für den Slider */
.seo-carousel-wrapper {
  position: relative; /* Wichtig: Buttons werden relativ zu diesem Container positioniert */
  width: 100%;
  overflow: visible;
  --seoi-carousel-basis-desktop: calc((100% - 75px) / 4);
  --seoi-carousel-basis-tablet: calc((100% - 50px) / 3);
  --seoi-carousel-basis-small: calc((100% - 25px) / 2);
}

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

.seo-carousel ul,
.seo-carousel-track {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  margin-left: 0 !important;
  padding: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}

.seo-carousel-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 25px;
  transition: transform 0.5s ease;
}

/* Standard (Desktop): per Shortcode steuerbar, z.B. items="3" */
.seo-carousel-track .sil-item {
  flex: 0 0 var(--seoi-carousel-basis-desktop);
  width: var(--seoi-carousel-basis-desktop);
  max-width: var(--seoi-carousel-basis-desktop);
  min-width: 0;
}

/* Mittlere Bildschirme: maximal 3 Spalten */
@media (max-width: 1100px) {
  .seo-carousel-track .sil-item {
    flex: 0 0 var(--seoi-carousel-basis-tablet);
    width: var(--seoi-carousel-basis-tablet);
    max-width: var(--seoi-carousel-basis-tablet);
  }
}

/* Kleine Bildschirme: maximal 2 Spalten */
@media (max-width: 800px) {
  .seo-carousel-track .sil-item {
    flex: 0 0 var(--seoi-carousel-basis-small);
    width: var(--seoi-carousel-basis-small);
    max-width: var(--seoi-carousel-basis-small);
  }
}

/* Sehr kleine Bildschirme: 1 Spalte */
@media (max-width: 500px) {
  .seo-carousel-track .sil-item {
    flex: 0 0 100%;
    width: 100%;
    max-width: 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;
  width: 34px;
  height: 44px;
  padding: 0;
  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: 2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

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