:root {
  --swiper-theme-color: var(--foreground-01);
  --swiper-pagination-bullet-size: 1rem;
  --swiper-pagination-bullet-color: var(--accent-contrast);
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bottom: 0.75rem;
  --swiper-pagination-top: auto;
  --swiper-pagination-bullet-width: 1.75rem;
  --swiper-pagination-bullet-height: 0.5rem;
  --swiper-pagination-bullet-border-radius: var(--border-radius-s);
  --swiper-navigation-sides-offset: 1rem;
  --swiper-navigation-color: var(--accent-contrast);
  --swiper-navigation-size: 1rem;
}


.swiper-pagination-bullet {
  background: var(--swiper-pagination-bullet-color);
}
.swiper-pagination-bullet.swiper-pagination-bullet-active {
  border-color: var(--swiper-theme-color);
}

.swiper-button-next, .swiper-button-prev {
  opacity: var(--swiper-pagination-bullet-inactive-opacity);
  transition: opacity 0.3s ease;
}
.swiper-button-next:hover, .swiper-button-prev:hover {
  opacity: 1;
}


.services-swiper {
  height: 500px;
  margin: unset;
  width: 100%;
  margin-top:-50px;
  cursor: grab;
}
/* create faded top */
.services-swiper::before {
  content: '';
  position: absolute;
  /* top: -25px; */
  left: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(to bottom, var(--background-05) 0%, transparent);
  z-index: 5;
  pointer-events: none;
}
.services-swiper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(to top, var(--background-05) 0%, transparent);
  z-index: 5;
  pointer-events: none;
}
.services-swiper .swiper-slide {
  height: auto !important; /* Überschreibt die Standard-Höhe */
}
.services-swiper .swiper-slide:first-of-type {
  margin-top: 50px;
}

.services-swiper .swiper-wrapper {
  align-items: flex-start; /* Stellt sicher, dass die Slides oben ausgerichtet sind */
}

.services-swiper .swiper-button-next, .services-swiper .swiper-button-prev {
  color: var(--background-05);
  background: var(--foreground-01);
  border-radius: var(--border-radius-xl);
  height: 2rem;
  width: 2rem;
  aspect-ratio: 1 / 1;
  padding: 0.5rem;
  font-weight: var(--font-weight-heading);
}
.services-swiper .swiper-button-prev {
  padding-left: 0.4rem;
}
.services-swiper .swiper-button-next {
  padding-right: 0.4rem;
}

.services-swiper .swiper-button-next.swiper-button-disabled, .services-swiper .swiper-button-prev.swiper-button-disabled {
  opacity: 0;
}
.services-swiper .swiper-button-prev {
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
  top: 0.75rem;
}
.services-swiper .swiper-button-next {
  right: 50%;
  transform: translateX(50%) rotate(90deg);
  top: unset;
  bottom: 0;
}

@media (width < 768px) {
  .services-swiper::before, .services-swiper::after, .services-swiper .swiper-button-next, .services-swiper .swiper-button-prev {
    display: none;
  }
  .services-swiper .swiper-slide:first-of-type {
    margin-top: 0;
  }
  .services-swiper {
    height: auto;
    margin-top: 0;
    pointer-events: none;
  }
}

#separator-image .swiper-button-next, #separator-image .swiper-button-prev {
  display: none;
}
#separator-image .separator-swiper .swiper-slide {
  height: auto !important; /* Überschreibt die Standard-Höhe */
}

#separator-image .separator-swiper .swiper-slide img {
  height: 100%;
  object-fit: cover;;
}