/**
 * slideshow.css – Funktionales Basis-Styling fuer die Slideshow-Extension.
 *
 * Nur JS-generierte Elemente (Track, Arrows, Dots, Loading, Error).
 * Template-Inhalte (hero-slide, impressionen-card etc.) werden NICHT gestylt –
 * das macht die Website-eigene style.css.
 *
 * Alle Klassen nutzen das Prefix .xeno-slideshow- um Konflikte zu vermeiden.
 * Website-Designer ueberschreibt alles per eigener CSS-Datei.
 *
 * Zwei Transition-Modi:
 *   .xeno-slideshow--slide  → Horizontales Gleiten (flex + translateX)
 *   .xeno-slideshow--fade   → Ueberblendung (opacity, nur slidesPerView: 1)
 *
 * Zusammenhaenge:
 *   - slideshow.js             → Erzeugt DOM-Elemente, setzt Klassen + Inline-Styles
 *   - class_website_parser.php → Rendert initiales HTML (Container, Loading, Track, Template)
 *   - Website style.css        → Ueberschreibt Farben, Groessen, Positionen
 */

/* ═══════════════════════════════════════════════════════════════════
   CONTAINER
   ═══════════════════════════════════════════════════════════════════ */

.xeno-slideshow {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════
   SLIDE-MODUS (translateX)
   Track ist ein Flex-Container, Slides gleiten horizontal.
   Breite und Transform werden per JS gesetzt.
   ═══════════════════════════════════════════════════════════════════ */

.xeno-slideshow--slide .xeno-slideshow-track {
  display: flex;
  will-change: transform;
}

.xeno-slideshow--slide .xeno-slideshow-slide {
  flex: 0 0 auto;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════
   FADE-MODUS (opacity)
   Slides sind uebereinander gestapelt. Nur der aktive Slide ist
   sichtbar. Der aktive Slide hat position:relative damit er die
   Track-Hoehe bestimmt, alle anderen sind position:absolute.
   ═══════════════════════════════════════════════════════════════════ */

.xeno-slideshow--fade .xeno-slideshow-track {
  position: relative;
}

.xeno-slideshow--fade .xeno-slideshow-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.xeno-slideshow--fade .xeno-slideshow-slide.active {
  opacity: 1;
  position: relative;
  pointer-events: auto;
}

/* ═══════════════════════════════════════════════════════════════════
   ARROW-NAVIGATION
   Positioniert links/rechts, vertikal zentriert im Container.
   Halbtransparenter Hintergrund, wird bei Hover sichtbarer.
   ═══════════════════════════════════════════════════════════════════ */

.xeno-slideshow-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
  opacity: 0.7;
  -webkit-tap-highlight-color: transparent;
}

.xeno-slideshow-arrow:hover {
  background: rgba(0, 0, 0, 0.6);
  opacity: 1;
}

.xeno-slideshow-arrow:disabled {
  opacity: 0.2;
  cursor: default;
}

.xeno-slideshow-arrow--prev {
  left: 12px;
}

.xeno-slideshow-arrow--next {
  right: 12px;
}

/* ═══════════════════════════════════════════════════════════════════
   DOT-NAVIGATION
   Zentrierte Reihe kleiner Kreise unter dem Slider.
   Aktiver Dot ist groesser und dunkler.
   ═══════════════════════════════════════════════════════════════════ */

.xeno-slideshow-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 16px 0 8px;
}

.xeno-slideshow-dot {
  width: 10px;
  height: 10px;
  border: none;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.xeno-slideshow-dot:hover {
  background: #999;
}

.xeno-slideshow-dot.active {
  background: #333;
  transform: scale(1.3);
}

/* ═══════════════════════════════════════════════════════════════════
   LOADING / ERROR / EMPTY
   ═══════════════════════════════════════════════════════════════════ */

.xeno-slideshow-loading {
  text-align: center;
  padding: 3rem 1rem;
  color: #888;
  font-size: 0.95rem;
}

.xeno-slideshow-loading::before {
  content: '';
  display: block;
  width: 28px;
  height: 28px;
  margin: 0 auto 0.75rem;
  border: 3px solid #e0e0e0;
  border-top-color: #666;
  border-radius: 50%;
  animation: xeno-slideshow-spin 0.7s linear infinite;
}

@keyframes xeno-slideshow-spin {
  to { transform: rotate(360deg); }
}

.xeno-slideshow-error {
  text-align: center;
  padding: 3rem 1rem;
  color: #c0392b;
  font-size: 0.95rem;
}

.xeno-slideshow-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #888;
  font-size: 0.95rem;
}

/* ═══════════════════════════════════════════════════════════════════
   KATEGORIE-BADGES (in Slide-Templates nutzbar)
   ═══════════════════════════════════════════════════════════════════ */

.xeno-slideshow-category {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.15em 0.5em;
  margin: 0.15em 0.2em;
  font-size: 0.8em;
  border-radius: 3px;
  background: #f0f0f0;
  color: #555;
}

.xeno-slideshow-category[data-icon]::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: var(--cat-icon);
  filter: brightness(0) invert(1);
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   Arrows werden auf kleinen Screens kompakter.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .xeno-slideshow-arrow {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  .xeno-slideshow-arrow--prev {
    left: 6px;
  }

  .xeno-slideshow-arrow--next {
    right: 6px;
  }

  .xeno-slideshow-dots {
    gap: 6px;
    padding: 12px 0 6px;
  }

  .xeno-slideshow-dot {
    width: 8px;
    height: 8px;
  }
}

/* Bilder innerhalb von Slides: responsive + keine Verzerrung */
.xeno-slideshow-slide img {
  max-width: 100%;
  height: auto;
  display: block;
}