Filter: Text-Button statt Pfeil-Icon + Overlay-Fenster

- Button zeigt jetzt 'Filter' statt SVG-Pfeil (↑↓)
- Filter-Leiste öffnet sich als Overlay-Fenster (Backdrop + Blur)
- Schließen per Button oder Klick auf Backdrop
- Kein localStorage-Persist mehr (Overlay schließt immer)

app.py

@@ -2633,7 +2633,7 @@ def public_frontend():
         """Baut das Login-Dropdown + Filter-Toggle für den Header."""
         h = '<div class="header-right">'
         h += '<a href="https://brettspiel-news.de" class="header-bsn-link">brettspiel-news.de</a>'
-        h += '<button id="filterToggle" class="filter-toggle-btn" aria-label="Filter einblenden"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" style="vertical-align:middle;"><polyline points="6 9 12 15 18 9"/></svg></button>'
+        h += '<button id="filterToggle" class="filter-toggle-btn" aria-label="Filter">Filter</button>'
         if u:
             name = (u.get("name") or u.get("email") or "User")[:14]
             h += '<div class="login-dropdown">'
@@ -2933,12 +2933,13 @@ def public_frontend():
   .site-header .header-right { margin-left:auto; }
   .site-header .header-right a { color:#aaa; text-decoration:none; font-size:0.8rem; transition:color 0.2s; }
   .site-header .header-right a:hover { color:#fff; }
-  .filter-toggle-btn { background:none; border:1.5px solid rgba(255,255,255,0.3); border-radius:8px; color:#fff; font-size:1rem; cursor:pointer; padding:0.3rem 0.5rem; line-height:1; transition:all 0.15s; margin-left:0.5rem; }
+  .filter-toggle-btn { background:rgba(255,255,255,0.12); border:1.5px solid rgba(255,255,255,0.25); border-radius:8px; color:#fff; font-size:0.78rem; font-weight:600; cursor:pointer; padding:0.35rem 0.7rem; line-height:1.3; transition:all 0.15s; margin-left:0.5rem; font-family:inherit; }
-  .filter-toggle-btn:hover { background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.6); }
+  .filter-toggle-btn:hover { background:rgba(255,255,255,0.22); border-color:rgba(255,255,255,0.5); }
-  .filter-toggle-btn.active { background:rgba(255,255,255,0.15); border-color:#fff; }
+  .filter-toggle-btn.active { background:rgba(255,255,255,0.25); border-color:#fff; }
-  .filter-toggle-btn .badge { position:absolute; top:-4px; right:-4px; width:8px; height:8px; background:#dc3545; border-radius:50%; border:1.5px solid #20228a; display:none; }
-  .filter-toggle-btn.has-active .badge { display:block; }
   .filter-collapsed { display:none; }
+  .filter-backdrop { position:fixed; inset:0; z-index:100000; background:rgba(0,0,0,0.3); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); display:none; }
+  .filter-backdrop.open { display:flex; align-items:flex-start; justify-content:center; padding-top:4rem; }
+  .filter-overlay { background:#fff; border-radius:16px; box-shadow:0 12px 48px rgba(0,0,0,0.22); padding:1.2rem 1.5rem; width:90vw; max-width:600px; animation:fadeDown 0.2s ease; }
 
   /* Offcanvas navigation */
   .nav-toggle { background:none; border:none; color:#fff; font-size:1.3rem; cursor:pointer; padding:0.3rem 0.4rem; line-height:1; margin-right:0.5rem; transition:opacity 0.2s; }
@@ -3216,7 +3217,12 @@ def public_frontend():
 """ + _build_login_dropdown(user) + """
 </header>
 
-<div id="filterBar" class="filter-collapsed">""" + filter_html + """</div>
+<div class="filter-backdrop" id="filterBackdrop">
+  <div class="filter-overlay" id="filterOverlay">
+""" + filter_html + """
+    <button id="filterCloseBtn" style="display:block;width:100%;margin-top:0.8rem;padding:0.5rem;background:#f0ede6;border:none;border-radius:8px;font-size:0.82rem;font-weight:600;color:#555;cursor:pointer;font-family:inherit;">✕ Schließen</button>
+  </div>
+</div>
 <main class="main-grid">
 """ + cards + """
 </main>
@@ -3228,26 +3234,24 @@ def public_frontend():
 <script>
 (function() {
   var btn = document.getElementById('filterToggle');
-  var bar = document.getElementById('filterBar');
+  var backdrop = document.getElementById('filterBackdrop');
-  if (btn && bar) {
+  var closeBtn = document.getElementById('filterCloseBtn');
-    var openSVG = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" style="vertical-align:middle;"><polyline points="18 15 12 9 6 15"/></svg>';
+  if (!btn || !backdrop) return;
-    var closedSVG = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" style="vertical-align:middle;"><polyline points="6 9 12 15 18 9"/></svg>';
 
-    // Restore saved state
+  btn.addEventListener('click', function() {
-    var saved = localStorage.getItem('filterOpen');
+    backdrop.classList.add('open');
-    if (saved === 'true') {
+    btn.classList.add('active');
-      bar.classList.remove('filter-collapsed');
+  });
-      btn.innerHTML = openSVG;
-      btn.classList.add('active');
-    }
 
-    btn.addEventListener('click', function() {
+  function closeFilter() {
-      var hidden = bar.classList.toggle('filter-collapsed');
+    backdrop.classList.remove('open');
-      btn.innerHTML = hidden ? closedSVG : openSVG;
+    btn.classList.remove('active');
-      btn.classList.toggle('active', !hidden);
-      localStorage.setItem('filterOpen', hidden ? 'false' : 'true');
-    });
   }
+
+  if (closeBtn) closeBtn.addEventListener('click', closeFilter);
+  backdrop.addEventListener('click', function(e) {
+    if (e.target === backdrop) closeFilter();
+  });
 })();
 </script>