function initFilter() {
    const filterSelect = document.getElementById('category-filter');
    const listContainer = document.querySelector('.s-res-list');

    if (!filterSelect || !listContainer) return;

    filterSelect.addEventListener('change', function() {
        const selectedCategory = this.value;
        const cards = listContainer.querySelectorAll('.s-res-item');

        cards.forEach(card => {
            const cardCategory = card.getAttribute('data-category') || '';

            if (selectedCategory === 'all' || cardCategory === selectedCategory) {
                card.style.display = 'flex';
            } else {
                card.style.display = 'none';
            }
        });
    });
}

// ist das DOM bereits vollständig aufgebaut?
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initFilter);
} else {
    initSorter();
}