From dccfeddb0e6a7c079a5a00c662be4f8dfef829c1 Mon Sep 17 00:00:00 2001
From: Hermann <hp1984@mailbox.org>
Date: Tue, 28 Jul 2026 11:54:39 +0200
Subject: [PATCH] =?UTF-8?q?Desktop-Layout:=20Filter=20&=20Suche=20rechts?=
 =?UTF-8?q?=20neben=20Ausflugsziele=20statt=20dar=C3=BCber?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Schließt Issue #3 ("Übersichtlicher Gestalten"). Karte, Ausflugsziele
und Filter stehen ab 1024px jetzt in einer Zeile nebeneinander statt
Filter über der Liste. Filter & Suche bleibt über das native
<details>-Element auf-/zuklappbar, die Zwangs-Offen-Regel für Desktop
entfällt dafür.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 css/filters.css    | 22 +++-------------------
 css/responsive.css | 26 ++++++++++++++------------
 2 files changed, 17 insertions(+), 31 deletions(-)

diff --git a/css/filters.css b/css/filters.css
index 2417887..ced2713 100644
--- a/css/filters.css
+++ b/css/filters.css
@@ -1,8 +1,9 @@
 /* Filter- und Suchpanel (Phase 4). Struktur wird von
    js/filters/filterPanel.js in #filter-panel eingehängt.
 
-   Mobile: <details>/<summary> als einfaches, JS-freies Auf-/Zuklappen.
-   Desktop (>=1024px, siehe css/responsive.css): immer sichtbar/offen. */
+   <details>/<summary> übernimmt das Auf-/Zuklappen JS-frei - sowohl mobil
+   (Panel oberhalb der Liste) als auch auf Desktop (>=1024px, Panel als
+   eigene Spalte rechts neben der Ergebnisliste, siehe css/responsive.css). */
 
 .filter-panel {
   background: var(--color-surface);
@@ -162,22 +163,5 @@
 @media (min-width: 1024px) {
   .filter-panel {
     border-bottom: none;
-    overflow-y: auto;
-  }
-
-  .filter-panel__summary {
-    cursor: default;
-  }
-
-  /* Details-Inhalt unabhängig vom open-Attribut immer anzeigen, damit das
-     Panel auf Desktop nicht eingeklappt werden kann/muss (überschreibt die
-     UA-Default-Regel "details:not([open]) > *:not(summary){display:none}"). */
-  .filter-panel__body {
-    display: grid !important;
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .filter-panel__actions {
-    grid-column: 1 / -1;
   }
 }
diff --git a/css/responsive.css b/css/responsive.css
index 691e834..a82d30f 100644
--- a/css/responsive.css
+++ b/css/responsive.css
@@ -1,13 +1,14 @@
-/* Desktop-Layout ab 1024px: Karte und Liste nebeneinander (Grid). */
+/* Desktop-Layout ab 1024px: Karte, Ausflugsziele und Filter nebeneinander
+   (Grid, eine Zeile). Filter & Suche steht rechts und bleibt über das
+   native <details>-Element auf-/zuklappbar (siehe css/filters.css) - so
+   verdrängt ein geöffneter Filter nicht mehr die Ergebnisliste nach unten. */
 
 @media (min-width: 1024px) {
   .app-layout {
     display: grid;
-    grid-template-columns: 65% 35%;
-    grid-template-rows: auto 1fr;
-    grid-template-areas:
-      'map filter'
-      'map list';
+    grid-template-columns: 1fr 320px 300px;
+    grid-template-rows: 1fr;
+    grid-template-areas: 'map list filter';
     /* Höhe ergibt sich aus flex:1 auf .app-layout (siehe css/layout.css) -
        damit passt sich die Höhe automatisch an, egal ob der Header gerade
        durch ein geöffnetes Menü höher ist. */
@@ -19,16 +20,17 @@
     min-height: 0;
   }
 
-  .filter-panel {
-    grid-area: filter;
-    border-left: 1px solid var(--color-border);
-    max-height: 45vh;
-  }
-
   .list-panel {
     grid-area: list;
     height: 100%;
     overflow-y: auto;
     border-left: 1px solid var(--color-border);
   }
+
+  .filter-panel {
+    grid-area: filter;
+    height: 100%;
+    overflow-y: auto;
+    border-left: 1px solid var(--color-border);
+  }
 }