body {
  font-family: system-ui, sans-serif;
  margin: 2rem;
}

.gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  border-radius: 0.5rem;
}

@media (prefers-reduced-motion: no-preference) {
  .gallery {
    scroll-behavior: smooth;
  }
}

.slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background: #eee;
  font-size: 2rem;
}

/* Pagination-Dots ohne JS — reine Enhancement, @supports statt Fallback-CSS:
   fehlt Support, fehlen nur die Dots, die Galerie bleibt unverändert nutzbar */
@supports (scroll-marker-group: after) {
  .gallery {
    scroll-marker-group: after;
  }

  ::scroll-marker-group {
    display: flex;
    gap: 0.5rem;
    place-content: center;
    margin-top: 0.75rem;
  }

  .slide::scroll-marker {
    content: "";
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: #ccc;
  }

  .slide::scroll-marker:hover {
    background: #999;
  }

  .slide::scroll-marker:target-current {
    background: #333;
  }
}