Filter-Spalte auf Desktop beim Einklappen auf Icon schrumpfen lassen

Bisher blieb die Filter-Spalte auch bei geschlossenem <details>-Element
in voller Breite stehen, da nur der Inhalt (nicht die Grid-Spalte)
ausgeblendet wurde. Jetzt schrumpft die Spalte per :has()-Selektor auf
56px und zeigt nur noch ein Icon zum Wiederaufklappen.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

css/filters.css

@@ -19,6 +19,9 @@
 }
 
 .filter-panel__summary {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
   padding: var(--space-md) 0;
   font-weight: 700;
   cursor: pointer;
@@ -37,6 +40,15 @@
   content: '▾ ';
 }
 
+/* Nur im eingeklappten Desktop-Zustand als eigenständiges Icon sichtbar
+   (siehe Media-Query unten) - sonst steckt das Icon unauffällig neben dem
+   Text, ohne das Mobile-Layout zu verändern. */
+.filter-panel__summary-icon {
+  display: none;
+  font-size: 1.3rem;
+  line-height: 1;
+}
+
 .filter-panel__body {
   display: flex;
   flex-direction: column;
@@ -164,4 +176,21 @@
   .filter-panel {
     border-bottom: none;
   }
+
+  /* Eingeklappt: Spalte auf Icon-Breite schrumpfen lassen (Grid-Breite
+     siehe css/responsive.css) statt nur den Inhalt zu verstecken - sonst
+     bleibt die leere Spalte trotzdem in voller Breite stehen. */
+  .filter-panel__details:not([open]) .filter-panel__summary {
+    justify-content: center;
+    padding: var(--space-md) 0;
+  }
+
+  .filter-panel__details:not([open]) .filter-panel__summary-icon {
+    display: block;
+  }
+
+  .filter-panel__details:not([open]) .filter-panel__summary-text,
+  .filter-panel__details:not([open]) .filter-panel__summary::before {
+    display: none;
+  }
 }

css/responsive.css

@@ -14,6 +14,13 @@
        durch ein geöffnetes Menü höher ist. */
   }
 
+  /* Filter-Spalte auf Icon-Breite schrumpfen, sobald das <details>-Element
+     darin geschlossen ist (siehe css/filters.css) - sonst bleibt die Spalte
+     trotz leerem Inhalt in voller Breite stehen. */
+  .app-layout:has(.filter-panel__details:not([open])) {
+    grid-template-columns: 1fr 320px 56px;
+  }
+
   .map-panel {
     grid-area: map;
     height: 100%;
@@ -31,6 +38,7 @@
     grid-area: filter;
     height: 100%;
     overflow-y: auto;
+    overflow-x: hidden;
     border-left: 1px solid var(--color-border);
   }
 }

js/filters/filterPanel.js

@@ -316,12 +316,17 @@
       el('div', { className: 'filter-panel__actions' }, [refs.countDisplay, refs.resetBtn, refs.zoomToResultsBtn]),
     ]);
 
-    refs.details = el(
+    const summary = el(
-      'details',
+      'summary',
-      { className: 'filter-panel__details' },
+      { className: 'filter-panel__summary', attrs: { 'aria-label': 'Filter & Suche ein-/ausblenden' } },
-      [el('summary', { className: 'filter-panel__summary', text: 'Filter & Suche' }), body]
+      [
+        el('span', { className: 'filter-panel__summary-icon', attrs: { 'aria-hidden': 'true' }, text: '🔍' }),
+        el('span', { className: 'filter-panel__summary-text', text: 'Filter & Suche' }),
+      ]
     );
 
+    refs.details = el('details', { className: 'filter-panel__details' }, [summary, body]);
+
     clearChildren(rootContainer);
     rootContainer.appendChild(refs.details);
   }