/* ============================================================
   REFERENZEN – HORIZONTALER SLIDER
   Die Item-Breite wird per JS (slider.js) berechnet, sodass exakt
   4 Items nebeneinander passen – mit der gleichen Breite, die
   .col-lg-3 in der Leistungen-Section hätte (Container-Breite minus
   Gutter, geteilt durch 4). Das Ergebnis landet als CSS-Variable
   --slider-item-w direkt auf #sliderTrack.
============================================================ */
#referenzen { 
	position: relative;

	overflow: hidden; 
	/*display:none;*/
}

#referenzen::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--red), var(--yellow));
  z-index: 3;
}
.slider-track-wrap {
  position: relative;
  overflow: hidden;
  cursor: grab;
  user-select: none;
}
.slider-track-wrap:active { cursor: grabbing; }

.slider-track {
  display: flex;
  gap: 12px;
  will-change: transform;
}

.slider-item {
  flex: 0 0 var(--slider-item-w, 254px);
  height: 220px;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  background: #ddd;
}

@media (max-width: 576px) {
  .slider-item { height: 180px; } /* Breite kommt weiterhin von --slider-item-w (slider.js passt sie responsiv an) */
}

/* Platzhalterfarben entfernt – Bilder kommen aus img/galerie/ */

.slider-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.slider-overlay {
  position: absolute;
  inset: 0;
  background: rgba(139,31,31,0.82);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.slider-item:hover .slider-overlay { opacity: 1; }

.slider-overlay i {
  color: var(--yellow);
  font-size: 1.6rem;
  margin-bottom: 0.4rem;
}

.slider-overlay span {
  font-family: 'Michroma', sans-serif;
  font-size: 0.8rem;
  color: #fff;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 0 0.75rem;
}


/* ============================================================
   SLIDER CONTROLS
   Prev/Next sitzen mittig auf dem ersten bzw. letzten Bild,
   absolut über dem Track positioniert statt darunter.
============================================================ */
.slider-controls {
  position: relative;
}

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(calc(-50% - 110px)); /* 110px = halbe slider-item-Höhe (220/2), zentriert auf erstes/letztes Bild */
  background: var(--red);
  border: none;
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  z-index: 5;
}
.slider-btn:hover { background: var(--red-dark); }

#sliderPrev { left: 12px; }
#sliderNext { right: 12px; }

@media (max-width: 576px) {
  .slider-btn { transform: translateY(calc(-50% - 90px)); } /* 90px = halbe Mobile-Höhe (180/2) */
}

/* ============================================================
   DOTS – AKTUELL DEAKTIVIERT
   Auskommentiert, da bei 8 Bildern auf Mobile zu gequetscht.
   Reaktivieren: .slider-dots Block unten einkommentieren UND
   in slider.js den Abschnitt "Dots erstellen" + goTo()-Update
   für Dots wieder aktivieren.
   Alternative: Statt Dots ein Zähler "3 / 8" einbauen – dafür
   ein <span id="sliderCounter"></span> ins HTML setzen und in
   goTo() per: sliderCounter.textContent = (curIdx+1) + ' / ' + itemCount;
   aktualisieren. Deutlich kompakter bei vielen Bildern.
============================================================ */
/*
.slider-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 1.25rem;
}

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0,0,0,0.18);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.slider-dot.active {
  background: var(--red);
  transform: scale(1.3);
}
*/