.carousel {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.carousel-container {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.carousel-track {
  position: relative;
  height: 400px;
  width: 100%;
}

.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
}

.carousel-slide.active {
  opacity: 1;
  z-index: 2;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255, 255, 255, 0.7);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-btn:hover {
  background: rgba(255, 255, 255, 0.9);
}

.carousel-prev {
  left: 10px;
}

.carousel-next {
  right: 10px;
}

.carousel-dots {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.carousel-dot.active {
  background: white;
  transform: scale(1.2);
}

@media (max-width: 768px) {
  .carousel-track {
    height: 300px;
  }
  
  .carousel-btn {
    width: 30px;
    height: 30px;
  }
}

class Carousel {
  constructor(element, options = {}) {
    this.carousel = element;
    this.track = this.carousel.querySelector('.carousel-track');
    this.slides = this.carousel.querySelectorAll('.carousel-slide');
    this.dots = this.carousel.querySelectorAll('.carousel-dot');
    this.prevBtn = this.carousel.querySelector('.carousel-prev');
    this.nextBtn = this.carousel.querySelector('.carousel-next');
    
    // Optionen mit Standardwerten
    this.options = {
      autoplay: options.autoplay || true,
      interval: options.interval || 5000,
      pauseOnHover: options.pauseOnHover || true
    };
    
    this.currentIndex = 0;
    this.autoplayInterval = null;
    
    this.init();
  }
  
  init() {
    // Event-Listener hinzufügen
    this.prevBtn.addEventListener('click', () => this.prevSlide());
    this.nextBtn.addEventListener('click', () => this.nextSlide());
    
    this.dots.forEach((dot, index) => {
      dot.addEventListener('click', () => this.goToSlide(index));
    });
    
    if (this.options.pauseOnHover) {
      this.carousel.addEventListener('mouseenter', () => this.pauseAutoplay());
      this.carousel.addEventListener('mouseleave', () => this.startAutoplay());
    }
    
    // Autoplay starten, wenn aktiviert
    if (this.options.autoplay) {
      this.startAutoplay();
    }
    
    // Touch-Unterstützung hinzufügen
    this.enableTouchSwipe();
  }
  
  startAutoplay() {
    if (this.options.autoplay) {
      this.autoplayInterval = setInterval(() => {
        this.nextSlide();
      }, this.options.interval);
    }
  }
  
  pauseAutoplay() {
    if (this.autoplayInterval) {
      clearInterval(this.autoplayInterval);
    }
  }
  
  prevSlide() {
    this.goToSlide(this.currentIndex - 1 < 0 ? this.slides.length - 1 : this.currentIndex - 1);
  }
  
  nextSlide() {
    this.goToSlide(this.currentIndex + 1 >= this.slides.length ? 0 : this.currentIndex + 1);
  }
  
  goToSlide(index) {
    // Aktuelle Slide und Dot deaktivieren
    this.slides[this.currentIndex].classList.remove('active');
    if (this.dots.length) {
      this.dots[this.currentIndex].classList.remove('active');
    }
    
    // Neue Slide und Dot aktivieren
    this.currentIndex = index;
    this.slides[this.currentIndex].classList.add('active');
    if (this.dots.length) {
      this.dots[this.currentIndex].classList.add('active');
    }
    
    // Bei manueller Navigation Autoplay zurücksetzen
    this.pauseAutoplay();
    this.startAutoplay();
  }
  
  enableTouchSwipe() {
    let startX, endX;
    const minSwipeDistance = 50;
    
    this.track.addEventListener('touchstart', (e) => {
      startX = e.touches[0].clientX;
    });
    
    this.track.addEventListener('touchend', (e) => {
      endX = e.changedTouches[0].clientX;
      const distance = endX - startX;
      
      if (Math.abs(distance) >= minSwipeDistance) {
        if (distance > 0) {
          // Nach rechts wischen -> vorherige Slide
          this.prevSlide();
        } else {
          // Nach links wischen -> nächste Slide
          this.nextSlide();
        }
      }
    });
  }
}

document.addEventListener('DOMContentLoaded', function() {
  const carouselElement = document.querySelector('.carousel');
  if (carouselElement) {
    const carousel = new Carousel(carouselElement, {
      autoplay: true,
      interval: 5000,
      pauseOnHover: true
    });
  }
});