Collapse advanced event search filters

app/static/css/style.css

@@ -494,14 +494,20 @@ h1, .page-title h1 {
 .comment-meta { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:.9rem; }
 .comment-meta strong { color:var(--text); }
 .comment p { margin:10px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
-.search-form select { margin:0; padding:10px 12px; color:var(--text); background:#101010; border:1px solid var(--border); border-radius:9px; font:inherit; }
+.search-form select, .advanced-filters input { margin:0; padding:10px 12px; color:var(--text); background:#101010; border:1px solid var(--border); border-radius:9px; font:inherit; }
-.clear-filters { grid-column:1 / -1; display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; color:#fca5a5; border:1px solid var(--border); border-radius:9px; background:#171212; white-space:nowrap; }
+.advanced-filters { grid-column:1 / -1; border:1px solid var(--border); border-radius:9px; background:#0d0d0d; }
+.advanced-filters summary { padding:10px 12px; color:#fca5a5; cursor:pointer; font-weight:700; }
+.advanced-filter-fields { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; padding:0 12px 12px; }
+.advanced-filter-fields label { display:grid; gap:5px; color:var(--muted); font-size:.85rem; }
+.advanced-filter-fields select { width:100%; }
+.clear-filters { grid-column:1 / -1; display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; color:#fca5a5; border:1px solid var(--border); border-radius:9px; background:#171212; white-space:nowrap; justify-self:start; }
 .clear-filters:hover { border-color:#ef4444; color:#fff; }
 .ticket-button-container, .detail-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:22px; }
 .calendar-export { display:flex; justify-content:center; margin-top:12px; }
 .ticket-button, .concert-action { display:inline-flex; padding:11px 16px; border:1px solid #b91c1c; border-radius:9px; background:#7f1d1d; color:#fff; font-weight:700; }
 .concert-action-delete { background:#450a0a; cursor:pointer; }
 @media (max-width:600px) { .detail-topbar { align-items:flex-start; } .concert-detail { padding:16px; } .comment-meta { flex-direction:column; gap:4px; } }
+@media (max-width:700px) { .advanced-filter-fields { grid-template-columns:1fr; } }
 
 @media (max-width: 600px) {
     .logo { max-width: 150px; }

app/templates/index.html

@@ -156,7 +156,7 @@
         }
 
         .search-panel { margin-bottom: 26px; padding: 16px; background: rgba(16,16,16,.92); border: 1px solid #3a3030; border-radius: 14px; }
-        .search-form { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(4, minmax(120px, 1fr)) auto; gap: 10px; }
+        .search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items:start; }
         .search-form input { margin: 0; }
         .search-results-title { margin: 24px 0 12px; font-size: 1.15rem; }
         .user-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-bottom: 24px; }
@@ -265,12 +265,17 @@
     <section class="search-panel" aria-label="Suche">
         <form class="search-form" method="get" action="{% if archive %}/events/past{% else %}/{% endif %}">
             <input type="search" name="q" value="{{ search_query }}" placeholder="Veranstaltungen, Orte oder User suchen …" aria-label="Veranstaltungen oder User suchen">
-            <input type="date" name="date_from" value="{{ filters.date_from }}" aria-label="Von Datum">
-            <input type="date" name="date_to" value="{{ filters.date_to }}" aria-label="Bis Datum">
-            <input type="search" name="venue" value="{{ filters.venue }}" placeholder="Ort / Location">
-            <input type="search" name="country" value="{{ filters.country }}" placeholder="Land">
-            <select name="category" aria-label="Kategorie"><option value="">Alle Kategorien</option><option value="concert" {% if filters.category == 'concert' %}selected{% endif %}>Konzert</option><option value="festival" {% if filters.category == 'festival' %}selected{% endif %}>Festival</option><option value="other" {% if filters.category == 'other' %}selected{% endif %}>Sonstiges</option></select>
             <button class="new-concert-button" type="submit">Suchen</button>
+            <details class="advanced-filters" {% if filters.date_from or filters.date_to or filters.venue or filters.country or filters.category %}open{% endif %}>
+                <summary>Weitere Filter{% if filters.date_from or filters.date_to or filters.venue or filters.country or filters.category %} · aktiv{% endif %}</summary>
+                <div class="advanced-filter-fields">
+                    <label>Von Datum<input type="date" name="date_from" value="{{ filters.date_from }}"></label>
+                    <label>Bis Datum<input type="date" name="date_to" value="{{ filters.date_to }}"></label>
+                    <label>Ort / Location<input type="search" name="venue" value="{{ filters.venue }}" placeholder="z. B. Düsseldorf"></label>
+                    <label>Land<input type="search" name="country" value="{{ filters.country }}" placeholder="z. B. Deutschland"></label>
+                    <label>Kategorie<select name="category"><option value="">Alle Kategorien</option><option value="concert" {% if filters.category == 'concert' %}selected{% endif %}>Konzert</option><option value="festival" {% if filters.category == 'festival' %}selected{% endif %}>Festival</option><option value="other" {% if filters.category == 'other' %}selected{% endif %}>Sonstiges</option></select></label>
+                </div>
+            </details>
             {% if filters.date_from or filters.date_to or filters.venue or filters.country or filters.category %}<a class="clear-filters" href="{% if archive %}/events/past{% else %}/{% endif %}{% if search_query %}?q={{ search_query|urlencode }}{% endif %}">Filter löschen</a>{% endif %}
         </form>
     </section>