/* Bilderkarussell fuer Produktseiten (30.10.2026, Lars: "statt der Liste von Bildern ein Bilderkarussell").
   Ohne JavaScript: eine waagerecht wischbare Reihe mit Einrasten. Mit js/bild-karussell.js kommen
   Zurueck/Weiter, Punkte und Pfeiltasten dazu. Kein automatisches Weiterlaufen. */
.bild-karussell { position: relative; margin-top: var(--s-4); }
.bild-karussell__spur {
  display: flex; gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  border-radius: var(--radius-lg, 16px);
}
.bild-karussell__spur::-webkit-scrollbar { display: none; }
.bild-karussell__bild { flex: 0 0 100%; margin: 0; scroll-snap-align: center; }
/* Hoehe begrenzt: quadratische Bilder (512 x 512) waeren in voller Breite hoeher als der Bildschirm */
.bild-karussell__bild img {
  width: auto; max-width: 100%; height: auto; max-height: min(70vh, 640px); margin: 0 auto;
  display: block; border-radius: var(--radius-lg, 16px);
  background: var(--c-bg-secondary); box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
.bild-karussell__bild figcaption { margin-top: var(--s-2); font-size: 0.95rem; color: var(--c-text-secondary); text-align: center; }
.bild-karussell__leiste { display: flex; align-items: center; justify-content: center; gap: var(--s-3); margin-top: var(--s-3); flex-wrap: wrap; }
.bild-karussell__knopf {
  min-width: 56px; min-height: 56px; border-radius: 50%; border: 2px solid var(--c-accent);
  background: var(--c-bg); color: var(--c-accent); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.bild-karussell__knopf:hover, .bild-karussell__knopf:focus-visible { background: var(--c-accent); color: #fff; }
.bild-karussell__knopf:disabled { opacity: .35; cursor: default; background: var(--c-bg); color: var(--c-accent); }
.bild-karussell__punkte { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.bild-karussell__punkt {
  width: 28px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.bild-karussell__punkt::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c-border, #c7cfda); }
.bild-karussell__punkt[aria-current="true"]::before { background: var(--c-accent); transform: scale(1.25); }
.bild-karussell__zaehler { font-variant-numeric: tabular-nums; color: var(--c-text-secondary); min-width: 4.5em; text-align: center; }
@media (prefers-reduced-motion: reduce) { .bild-karussell__spur { scroll-behavior: auto; } }
@media (max-width: 600px) {
  /* Schmal: Punkte weg, Zurueck – Zaehler – Weiter in einer Zeile */
  .bild-karussell__punkte { display: none; }
  .bild-karussell__leiste { flex-wrap: nowrap; }
}