/* =======================================================================
   Slider/Karussell-Erweiterung ([slider]/[slide]) - eigenstaendiges
   Basis-CSS, wird unabhaengig vom aktiven Theme automatisch geladen
   (siehe Nexis\Template\ExtensionAssets). Reines CSS (scroll-snap +
   Anker-Navigation), bewusst ohne JavaScript - siehe SliderProcessor
   Klassendoku fuer die Begruendung.
   ======================================================================= */

.nx-slider { position: relative; margin: var(--nx-space-8) 0; }
.nx-slider-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: var(--nx-radius-lg);
  box-shadow: var(--nx-shadow-sm);
  /* Scrollbalken dezent, aber sichtbar genug fuer Maus-Nutzer ohne Touch. */
  scrollbar-width: thin;
}
.nx-slider-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
  min-height: 220px;
  background: var(--nx-surface-soft);
  display: flex;
  align-items: flex-end;
}
.nx-slider-slide img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; display: block; }
.nx-slider-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--nx-space-4) var(--nx-space-5);
  background: linear-gradient(transparent, rgba(0,0,0,0.55));
  color: #fff;
  font-weight: 600;
}
.nx-slider-nav { display: flex; justify-content: center; gap: var(--nx-space-2); margin-top: var(--nx-space-3); }
.nx-slider-dot {
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--nx-border, #d0d5dd);
  display: inline-block;
  text-decoration: none;
  transition: background 0.2s ease;
}
.nx-slider-dot:hover { background: var(--nx-primary); }