/* ============================= */
/* -------- Accessible Slider -- */
/* ============================= */

.slider {
  position: relative;
  max-width: 980px;
  margin: 30px auto;
  border: 1px solid rgba(0,0,0,0.06);
  background: #ffffff;
}

.slider-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  list-style: none;
  margin: 0;
  padding: 0;

  -webkit-overflow-scrolling: touch;
    scrollbar-width: none;         /* Firefox */
  -ms-overflow-style: none;      /* alte Edge/IE */
}
/* 1 Slide erzwingen */
.slider-track > * {
  flex: 0 0 100% !important;
}
.slider-track::-webkit-scrollbar {
  display: none;                 /* Chrome/Safari */
}

/* Einzelner Slide */
.slide {
  /* flex: 0 0 100%; */
  scroll-snap-align: start;
  padding: 16px;
}

.slide figure {
  margin: 0;
  border: 1px solid rgba(0,0,0,0.06);
  background: #e9ecef;
}

.slide img {
  width: 100%;
  height: 520px;
  object-fit: cover;   /* füllt Fläche, schneidet evtl. Rand */
}

.slide figcaption {
  padding: 10px 12px;
  font-size: 15px;
}

/* Pfeile */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;

  width: 44px;
  height: 44px;

  border: 1px solid rgba(0,0,0,0.2);
  background: rgba(255,255,255,0.92);
  color: #AF9483;
  font-size: 26px;
  line-height: 1;

  cursor: pointer;
}

.slider-btn.prev { left: 8px; }
.slider-btn.next { right: 8px; }

/* Fokus sichtbar (Accessibility!) */
.slider-btn:focus {
  outline: 3px solid #AF9483;
  outline-offset: 2px;
}

/* Desktop: 2 Slides sichtbar (optional) */
@media (min-width: 992px) {
  .slide { flex: 0 0 50%; }
}

/* Mobile Feinschliff */
@media (max-width: 768px) {
  .slide { padding: 10px; }
}