From ffee29d57e2b16bbda584f3fa7d6a66362cbe71d Mon Sep 17 00:00:00 2001
From: oswaldsimona <simona.oswald@stud.fhgr.ch>
Date: Sat, 25 Apr 2026 17:38:51 +0200
Subject: [PATCH] Accordion Filter (ohne Styling)

---
 css/event_overview.css    | 21 ++++++++++++++-------
 css/stylesheet_global.css |  2 +-
 event_overview.html       | 38 ++++++++++++++++++++------------------
 3 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/css/event_overview.css b/css/event_overview.css
index cb7bbfe..33b8ac1 100644
--- a/css/event_overview.css
+++ b/css/event_overview.css
@@ -42,15 +42,12 @@
 
 .filter-row {
     display: flex;
-    align-items: center;
-    justify-content: space-between;
+    justify-content: flex-start;
     gap: var(--space-16);
-    margin-bottom: var(--space-2);
 }
 
 .category-group {
-    display: flex;
-    gap: var(--space-8);
+    gap: var(--space-12);
     margin-bottom: 0;
     flex-wrap: wrap;
     flex: 1;
@@ -70,7 +67,7 @@
 .meta-filter-group {
     display: flex;
     flex-wrap: nowrap;
-    gap: var(--space-16);
+    gap: var(--space-12);
     margin-bottom: 0;
 }
 
@@ -938,11 +935,21 @@
     .meta-filter-group {
         width: auto;
         flex-wrap: wrap;
-        gap: 10px;
     }
 
     .meta-filter {
         flex: 1 1 160px;
         min-width: 140px;
     }
+}
+
+.filter-section {
+  display: flex;
+  flex-direction: column;
+}
+
+
+.filter-box summary {
+  cursor: pointer;
+  margin-bottom: var(--space-8);
 }
\ No newline at end of file
diff --git a/css/stylesheet_global.css b/css/stylesheet_global.css
index 369587c..f9c6a1f 100644
--- a/css/stylesheet_global.css
+++ b/css/stylesheet_global.css
@@ -572,7 +572,7 @@ label {
     font-weight: 400;
     font-size: 1.125rem;
     line-height: 1;
-    padding: var(--space-6) var(--space-20);
+    padding: var(--space-8) var(--space-20);
     cursor: pointer;
     transition: background-color 0.2s ease, color 0.2s ease;
 }
diff --git a/event_overview.html b/event_overview.html
index c1814a7..32ecaae 100644
--- a/event_overview.html
+++ b/event_overview.html
@@ -65,27 +65,29 @@
                 </label>
             </div>
         </div>
-
-        <p class="filter-label">Ernährungsform</p>
-         <div class="filter-row">
-            <!-- Primary category filter buttons -->
-            <div class="category-group">
-                <button class="category-item" type="button" data-diet="Fleisch">Fleisch</button>
-                <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>
-            </div>
+    <details class="filter-box">
+    <summary>Nach Ernährungform filtern</summary>
+    <div class="filter-row">
+        <div class="category-group">
+        <button class="category-item" type="button" data-diet="Fleisch">Fleisch</button>
+        <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>
         </div>
+    </div>
+    </details>
 
-        <p class="filter-label">Allergene</p>
-        <div class="filter-row">
-            <!-- Allergen filter buttons -->
-            <div class="category-group">
-                <button class="category-item" type="button" data-allergie="glutenfrei">glutenfrei</button>
-                <button class="category-item" type="button" data-allergie="laktosefrei">laktosefrei</button>
-                <button class="category-item" type="button" data-allergie="ohne Nüsse">ohne Nüsse</button>
-            </div>
+    <details class="filter-box">
+    <summary>Nach Allergenen filtern</summary>
+    <div class="filter-row">
+        <div class="category-group">
+        <button class="category-item" type="button" data-allergie="glutenfrei">glutenfrei</button>
+        <button class="category-item" type="button" data-allergie="laktosefrei">laktosefrei</button>
+        <button class="category-item" type="button" data-allergie="ohne Nüsse">ohne Nüsse</button>
         </div>
+    </div>
+
+    </details>
 
         
     </section>