Filterrestriktionen Ernährungsform, Button um Filter zu löschen

css/stylesheet_global.css

@@ -609,6 +609,20 @@ label {
     gap: var(--space-16);
 }
 
+.filter-delete {
+    border: 1.5px solid var(--olive);
+    color: var(--olive);
+    background: transparent;
+
+}
+
+.filter-delete:hover {
+    border: 1.5px solid var(--olive-dark);
+    color: var(--olive-dark);
+    background: var(--olive-light);
+
+}
+
 .button-small {
     background: var(--olive);
     color: var(--butter-light);

event_detail.html

@@ -42,7 +42,8 @@
     <div class="modal-content">
         <div class="modal-header">
             <h2>Ein Platz für dich am Tisch!</h2>
-            <button type="button" class="modal-close" id="register-modal-close" aria-label="Popup schließen">&times;</button>
+            <button type="button" class="modal-close" aria-label="Popup schließen">&times;</button>
+
         </div>
         <div class="modal-body">
             <p>Schön, dass du dich dazu gesellen möchtest! Da dein:e Gastgeber:in extra für dich einkauft und mit viel Liebe kocht, ist deine Anmeldung ein festes Versprechen. Bitte sag nur zu, wenn du an dem Tag wirklich Zeit hast. So zeigst du echte Wertschätzung für die Mühe und wir lassen niemanden auf vollen Töpfen sitzen.</p>
@@ -58,7 +59,7 @@
     <div class="modal-content">
         <div class="modal-header">
             <h2>Pläne haben sich geändert?</h2>
-            <button type="button" class="modal-close" id="unregister-modal-close" aria-label="Popup schließen">&times;</button>
+            <button type="button" class="modal-close" aria-label="Popup schließen">&times;</button>
         </div>
         <div class="modal-body">
             <p>Schade, dass du nicht dabei sein kannst! Aber manchmal kommt einfach etwas dazwischen. Wenn du dich jetzt abmeldest, gibst du deinen Stuhl am Tisch für jemand anderen aus der Community frei. So hilfst du bei der Planung und ein anderer Feinschmecker freut sich über den freien Platz.</p>

event_overview.html

@@ -73,11 +73,12 @@
         <button class="category-item" type="button" data-diet="Fisch">Fisch</button>
         <button class="category-item" type="button" data-diet="Vegetarisch">Vegetarisch</button>
         <button class="category-item" type="button" data-diet="Vegan">Vegan</button>
+        <button class="category-item filter-delete" type="button" id="clear-all-filters">Alle Filter löschen</button>
         </div>
     </div>
     </details>
 
-    <details class="filter-box">
+    <details class="filter-box margin-bottom-24">
     <summary>Nach Allergenen filtern</summary>
     <div class="filter-row margin-bottom-16">
         <div class="category-group">
@@ -89,9 +90,6 @@
 
     </details>
 
-        
-    </section>
-
     <!-- Render target: event cards or empty state -->
     <section id="event-grid" class="event-list"></section>
 </main>

js/event_overview.js

@@ -167,6 +167,7 @@
                 dateFilter.value = savedDate;
             }
 
+            updateDietAvailability();
             applyFilters();
         } catch (error) {
             console.error('Fehler:', error);
@@ -631,6 +632,59 @@
         });
     }
 
+    // Verhindert widersprüchliche Ernährungsformen:
+    // Fleisch/Fisch schliessen Vegetarisch/Vegan aus.
+    // Vegan schliesst alles andere (Fleisch, Fisch, Vegetarisch) aus.
+    // Vegetarisch schliesst Fleisch/Fisch aus, aber nicht Vegan.
+    function updateDietAvailability() {
+        const dietButtons = Array.from(filterButtons).filter(btn => btn.getAttribute('data-diet') !== null);
+        const meatFishButtons = dietButtons.filter(btn => ['Fleisch', 'Fisch'].includes(btn.getAttribute('data-diet')));
+        const plantButtons = dietButtons.filter(btn => ['Vegetarisch', 'Vegan'].includes(btn.getAttribute('data-diet')));
+        const vegetarischBtn = dietButtons.find(btn => btn.getAttribute('data-diet') === 'Vegetarisch');
+        const veganBtn = dietButtons.find(btn => btn.getAttribute('data-diet') === 'Vegan');
+
+        const hasVegan = activeDiets.has('Vegan');
+        const hasVegetarisch = activeDiets.has('Vegetarisch');
+        const hasMeatOrFish = meatFishButtons.some(btn => activeDiets.has(btn.getAttribute('data-diet')));
+
+        // If Vegan is selected, disable everything else
+        if (hasVegan) {
+            meatFishButtons.forEach(btn => {
+                btn.classList.add('disabled');
+            });
+            if (vegetarischBtn) {
+                vegetarischBtn.classList.add('disabled');
+            }
+        } 
+        // If Vegetarisch is selected, disable only Fleisch/Fisch
+        else if (hasVegetarisch) {
+            meatFishButtons.forEach(btn => {
+                btn.classList.add('disabled');
+            });
+            if (veganBtn) {
+                veganBtn.classList.remove('disabled');
+            }
+        }
+        // If Fleisch/Fisch is selected, disable both Vegetarisch and Vegan
+        else if (hasMeatOrFish) {
+            if (vegetarischBtn) {
+                vegetarischBtn.classList.add('disabled');
+            }
+            if (veganBtn) {
+                veganBtn.classList.add('disabled');
+            }
+        }
+        // No conflicts, enable everything
+        else {
+            plantButtons.forEach(btn => {
+                btn.classList.remove('disabled');
+            });
+            meatFishButtons.forEach(btn => {
+                btn.classList.remove('disabled');
+            });
+        }
+    }
+
     // Category filter interactions: mutually exclusive (radio button behavior).
     filterButtons.forEach(button => {
         button.addEventListener('click', () => {
@@ -642,12 +696,34 @@
                 // Category filter: exclusive selection
                 activeCategory = categoryValue;
             } else if (dietValue !== null) {
-                // Diet filter: toggle selection
+                // Diet filter: toggle selection with conflict handling
-                if (activeDiets.has(dietValue)) {
+                const isCurrentlySelected = activeDiets.has(dietValue);
-                    activeDiets.delete(dietValue);
+
-                } else {
+                if (!isCurrentlySelected) {
+                    // Adding a diet - handle conflicts
+                    if (dietValue === 'Vegetarisch') {
+                        // Vegetarisch removes Fleisch/Fisch but not Vegan
+                        activeDiets.delete('Fleisch');
+                        activeDiets.delete('Fisch');
+                        activeDiets.add('Vegetarisch');
+                    } else if (dietValue === 'Vegan') {
+                        // Vegan removes all other options
+                        activeDiets.delete('Vegetarisch');
+                        activeDiets.delete('Fleisch');
+                        activeDiets.delete('Fisch');
+                        activeDiets.add('Vegan');
+                    } else if (dietValue === 'Fleisch' || dietValue === 'Fisch') {
+                        // Fleisch/Fisch remove Vegetarisch/Vegan
+                        activeDiets.delete('Vegetarisch');
+                        activeDiets.delete('Vegan');
                         activeDiets.add(dietValue);
                     }
+                } else {
+                    // Removing a diet
+                    activeDiets.delete(dietValue);
+                }
+
+                updateDietAvailability();
             } else if (allergieValue !== null) {
                 // Allergie filter: toggle selection
                 if (activeAllergies.has(allergieValue)) {
@@ -679,10 +755,30 @@
         }
     }
 
+    // Clear all filters button
+    const clearAllFiltersBtn = document.getElementById('clear-all-filters');
+    if (clearAllFiltersBtn) {
+        clearAllFiltersBtn.addEventListener('click', () => {
+            activeCategory = 'ALLE';
+            activeDiets.clear();
+            activeAllergies.clear();
+            
+            if (locationFilter) {
+                locationFilter.value = 'ALLE_ORTE';
+            }
+            if (dateFilter) {
+                dateFilter.value = '';
+            }
+            
+            updateDietAvailability();
+            applyFilters();
+        });
+    }
+
     // Info button modal behavior
     const infoButton = document.getElementById('info-button');
     const infoModal = document.getElementById('info-modal');
-    const modalClose = infoModal?.querySelector('.modal-close');
+    const modalClose = infoModal?.querySelector('modal-close');
 
     if (infoButton && infoModal) {
         infoButton.addEventListener('click', () => {
@@ -717,3 +813,18 @@
     // Kick off initial load/render cycle.
     fetchEvents();
 });
+
+// Modal closing helper functions
+function closeRegisterModal() {
+    const modal = document.getElementById('register-confirm-modal');
+    if (modal) {
+        modal.classList.remove('show');
+    }
+}
+
+function closeUnregisterModal() {
+    const modal = document.getElementById('unregister-confirm-modal');
+    if (modal) {
+        modal.classList.remove('show');
+    }
+}