/* ---------------------------------------- */
/* Our Services – Slider (3 visible) */
/* ---------------------------------------- */



.services-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.services-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid #fff;
  background: transparent;
  opacity: 0.7;
  cursor: pointer;
  padding: 0;
}

.services-dot:hover {
  opacity: 1;
}

.services-dot.is-active {
  background: #fff;
  opacity: 1;
}


.services-slider {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0; /* Pfeile sitzen außerhalb/oben drüber */
}

.services-viewport {
  overflow: hidden;
  width: 100%;
}

.services-track {
  display: flex;
  will-change: transform;
  transform: translate3d(0,0,0);
}

.services-slide {
  flex: 0 0 calc(100% / 3); /* 3 nebeneinander */
  box-sizing: border-box;
}

/* Pfeile */
.services-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;

  width: 44px;               /* mind. 30px -> wir geben mehr */
  height: 44px;
  border: none;
  background-color: transparent;
  cursor: pointer;

  background-image: url("/assets/icons/forum.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.9;
}

.services-arrow:hover { opacity: 1; 
border: 5px; /* optional: Hover-Effekt, z.B. leicht dunkler */

}

.services-arrow--left  { left: -12px;  transform: translateY(-50%) rotate(-90deg); }
.services-arrow--right { right: -12px; transform: translateY(-50%) rotate(90deg); }

/* Deine Service-Card bleibt – wir deaktivieren Grid-spezifische Linienlogik */
.service-item {
  /* von dir: display flex, padding, hover etc. bleibt */
  border-top: none; /* im Slider immer 1 Reihe */
  border-left: 2px solid #811811;
}


/* Erste sichtbare Card ohne linke Linie */
.services-slide.is-first-visible .service-item {
  border-left: none;
}


/* Optional: Pfeile innerhalb statt außerhalb */
@media (max-width: 1200px) {
  .services-arrow--left  { left: 8px; }
  .services-arrow--right { right: 8px; }
}


/* Die “erste sichtbare” Card soll keine linke Linie haben (setzt JS per Klasse) */
.services-slide.is-first-visible .service-item {
  border-left: none;
}

/* (Falls du oben auch keine Linie willst, sicherstellen:) */
.service-item {
  border-top: none;
}

/* Responsive (optional): 2 / 1 visible */
@media (max-width: 900px) {
  .services-slide { flex-basis: calc(100% / 2); }
}
@media (max-width: 600px) {
  .services-slide { flex-basis: 100%; }
}


/* Standard: Linie links */
.services-slider .service-item {
  border-left: 2px solid #811811;
  border-right: none;
  border-top: none;
}

/* Erste sichtbare Karte: keine linke Linie */
.services-slider .services-slide.is-first-visible .service-item {
  border-left: none;
}

/* Letzte sichtbare Karte: keine rechte Linie */
.services-slider .services-slide.is-last-visible .service-item {
  border-right: none;
}