document.addEventListener('DOMContentLoaded', function() {

    // === FAQ TABS FUNKTIONALITÄT ===
    const tabButtons = document.querySelectorAll('.faq-tab-button');
    const tabPanes = document.querySelectorAll('.faq-tab-pane');

    tabButtons.forEach(button => {
        button.addEventListener('click', () => {
            // 1. Aktive Klassen von allen Buttons und Panes entfernen
            tabButtons.forEach(btn => btn.classList.remove('active'));
            tabPanes.forEach(pane => pane.classList.remove('active'));

            // 2. Aktive Klasse zum geklickten Button hinzufügen
            button.classList.add('active');

            // 3. Den zugehörigen Inhalt (Pane) finden und aktivieren
            const targetCategory = button.getAttribute('data-category');
            const targetPane = document.querySelector(`.faq-tab-pane[data-category="${targetCategory}"]`);
            if (targetPane) {
                targetPane.classList.add('active');
            }
        });
    });


    // === FAQ AKKORDEON FUNKTIONALITÄT (bleibt unverändert) ===
    const faqItems = document.querySelectorAll('.faq-item');

    faqItems.forEach(item => {
        const question = item.querySelector('.faq-question');
        const answer = item.querySelector('.faq-answer');

        if (question && answer) {
            question.addEventListener('click', () => {
                // 'active' Klasse zum aktuellen Item togglen
                const isActive = item.classList.toggle('active');

                // Höhe der Antwort anpassen für smooth slide
                if (isActive) {
                    answer.style.maxHeight = answer.scrollHeight + 'px';
                } else {
                    answer.style.maxHeight = null;
                }
            });
        }
    });
});