document.addEventListener('DOMContentLoaded', function () {
    const toggle = document.querySelector('.theme-toggle');
    if ( ! toggle ) return;

    const html     = document.documentElement;
    const iconMoon = toggle.querySelector('.icon-moon');
    const iconSun  = toggle.querySelector('.icon-sun');

    const defaultMode = typeof sliderSettings !== 'undefined' && sliderSettings.defaultMode
        ? sliderSettings.defaultMode
        : 'dark';

    // Gespeicherten Wert laden oder OS-Schema/Theme-Default als Fallback
    let saved = localStorage.getItem('themeMode');
    if ( ! saved ) {
        saved = ( window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches )
            ? 'light'
            : defaultMode;
    }

    function applyMode( mode ) {
        if ( mode === 'light' ) {
            html.classList.add('light-mode');
            if ( iconMoon ) iconMoon.style.display = 'none';
            if ( iconSun )  iconSun.style.display  = 'block';
        } else {
            html.classList.remove('light-mode');
            if ( iconMoon ) iconMoon.style.display = 'block';
            if ( iconSun )  iconSun.style.display  = 'none';
        }
    }

    applyMode( saved );

    // BUG-FIX: Vorher wurde html.classList.toggle() aufgerufen und danach
    // applyMode() – das hat die Klasse doppelt manipuliert. Jetzt lesen wir
    // den aktuellen Zustand aus und rufen nur applyMode() auf.
    toggle.addEventListener('click', function () {
        const isCurrentlyLight = html.classList.contains('light-mode');
        const newMode = isCurrentlyLight ? 'dark' : 'light';
        applyMode( newMode );
        localStorage.setItem('themeMode', newMode);
    });

    // Live-Reaktion auf OS-Umschalten (nur wenn keine manuelle Auswahl)
    if ( window.matchMedia ) {
        window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', function( e ) {
            if ( ! localStorage.getItem('themeMode') ) {
                applyMode( e.matches ? 'light' : 'dark' );
            }
        });
    }
});