/*
 * Slider: native horizontale Scroll-Leiste mit Einrasten (Wischen, Trackpad),
 * Maus-Ziehen, Pfeilen und Fortschritt über assets/js/slider.js.
 * Die erste Karte steht bündig mit dem Container, rechts läuft die Leiste bis
 * zum Bildschirmrand, damit die nächste Karte angeschnitten zu sehen ist.
 * Anzahl sichtbarer Karten über --slider-cards (Bruchteil = Vorschau am Rand).
 */

.ds-slider {
  /* Bootstrap-Containerbreite je Breakpoint, für die bündige Ausrichtung */
  --slider-container: 100vw;
  --slider-gutter: 16px;
  --slider-gap: 16px;
  --slider-cards: 1.3;
  --slider-edge: max(var(--slider-gutter), calc((100% - var(--slider-container)) / 2 + 0.75rem));
  position: relative;
}

@media (min-width: 576px) {
  .ds-slider { --slider-container: 540px; --slider-cards: 2.2; }
}

@media (min-width: 768px) {
  .ds-slider { --slider-container: 720px; --slider-cards: 2.3; }
}

@media (min-width: 992px) {
  .ds-slider { --slider-container: 960px; --slider-cards: 3.3; --slider-gap: 20px; }
}

@media (min-width: 1200px) {
  .ds-slider { --slider-container: 1140px; --slider-cards: 4.3; }
}

@media (min-width: 1400px) {
  .ds-slider { --slider-container: 1320px; }
}

.ds-slider-track {
  position: relative;
  display: flex;
  gap: var(--slider-gap);
  margin: 0;
  padding: 8px var(--slider-edge) 16px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--slider-edge);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.ds-slider-track::-webkit-scrollbar {
  display: none;
}

.ds-slider-track > li {
  flex: 0 0 calc((min(100vw, var(--slider-container)) - 1.5rem - var(--slider-gap) * (var(--slider-cards) - 1)) / var(--slider-cards));
  scroll-snap-align: start;
}

/* Maus-Ziehen: Greif-Cursor, beim Ziehen kein Einrasten und keine Textauswahl */
.ds-slider.is-draggable .ds-slider-track {
  cursor: grab;
}

.ds-slider.is-dragging .ds-slider-track {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.ds-slider.is-dragging .ds-slider-track a {
  pointer-events: none;
}

/* Weiche Kanten außerhalb des Containers zeigen: hier geht es weiter */
.ds-slider::before,
.ds-slider::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: var(--slider-edge);
  pointer-events: none;
  transition: opacity 0.2s;
}

.ds-slider::before {
  left: 0;
  background: linear-gradient(to right, var(--slider-fade, var(--ds-white)), transparent);
}

.ds-slider::after {
  right: 0;
  background: linear-gradient(to left, var(--slider-fade, var(--ds-white)), transparent);
}

.ds-slider.is-at-start::before,
.ds-slider.is-at-end::after {
  opacity: 0;
}

/* Steuerung: Pfeile und Fortschrittsbalken */
.ds-slider-controls {
  display: flex;
  gap: 8px;
}

.ds-slider-controls .ds-icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
  background: var(--ds-white);
  border-color: var(--ds-line);
  color: var(--ds-navy);
}

.ds-slider-progress {
  position: relative;
  height: 4px;
  margin-top: 8px;
  border-radius: 4px;
  background: var(--ds-line);
  overflow: hidden;
}

.ds-slider-progress span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 30%;
  border-radius: 4px;
  background: var(--ds-navy);
  transition: left 0.15s linear, width 0.15s linear;
}

@media (prefers-reduced-motion: reduce) {
  .ds-slider-progress span {
    transition: none;
  }
}