document.addEventListener('DOMContentLoaded', function() {
    // Hole den Slider-Container
    const heroSlider = document.querySelector('.hero-slider');

    // Stelle sicher, dass der Slider auf der Seite existiert
    if (!heroSlider) {
        return;
    }

    // Konfiguration für den Slider vorbereiten
    const swiperConfig = {
        // Der Effekt ist jetzt fest auf "Überblenden" eingestellt
        effect: 'fade',
        fadeEffect: {
            crossFade: true
        },

        // Loop-Einstellung ist jetzt DYNAMISCH
        loop: sliderSettings.loop === '1',

        // Autoplay
        autoplay: {
            delay: 5000,
            disableOnInteraction: false,
        },

        pauseOnMouseEnter: true,

        // Prüfe, ob die Pfeile NICHT ausgeblendet werden sollen
        navigation: sliderSettings.hideArrows !== '1' ? {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        } : false,

        // Prüfe, ob die Paginierung NICHT ausgeblendet werden soll
        pagination: sliderSettings.hidePagination !== '1' ? {
            el: '.swiper-pagination',
            clickable: true,
        } : false,
        
        on: {
            init: function () {
                setTimeout(() => {
                    heroSlider.classList.add('swiper-initialized');
                }, 50);
            },
        },
    };

    // Initialisiere den Slider mit der konfigurierten Optionen
    new Swiper('.hero-slider', swiperConfig);
});