From 3d18cc97a4ee23c1c4e8542525f25ec9f085b52e Mon Sep 17 00:00:00 2001
From: Hermes Agent <hermes@v2202605360184461552.supersrv.de>
Date: Wed, 17 Jun 2026 22:05:34 +0200
Subject: [PATCH] feat: Backdrop-Blur beim Chat-Assistenten
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- chatBackdrop div mit backdrop-filter:blur(4px) hinter dem Chat-Overlay
- Rest der Seite wird unscharf wenn Chat geöffnet ist
- Klick auf Backdrop schließt den Chat
- Öffnen/Schließen synchron mit ChatOverlay via JS
---
 app.py | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/app.py b/app.py
index f987c67..71e8145 100644
--- a/app.py
+++ b/app.py
@@ -1958,6 +1958,8 @@ def public_frontend():
     background:#fff; border-radius:18px; box-shadow:0 12px 48px rgba(0,0,0,0.22);
     display:none; flex-direction:column; overflow:hidden; }
   .chat-overlay.open { display:flex; }
+  .chat-backdrop { position:fixed; inset:0; z-index:9997; background:rgba(0,0,0,0.25); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); display:none; }
+  .chat-backdrop.open { display:block; }
   .chat-header { background:#20228a; color:#fff; padding:0.9rem 1.2rem;
     font-weight:700; font-size:0.9rem; display:flex; align-items:center; justify-content:space-between; }
   .chat-header button { background:none; border:none; color:#fff; font-size:1.3rem;
@@ -2056,6 +2058,9 @@ def public_frontend():
 <!-- ── Submit Bubble ────────────────────────────────────────── -->
 <button class="submit-bubble" id="submitBubble" title="Etwas einreichen" aria-label="Einreich-Formular öffnen">+</button>
 
+<!-- ── Chat Backdrop ──────────────────────────────────────── -->
+<div class="chat-backdrop" id="chatBackdrop"></div>
+
 <!-- ── Chat Overlay ─────────────────────────────────────────── -->
 <div class="chat-overlay" id="chatOverlay">
   <div class="chat-header">
@@ -2283,14 +2288,30 @@ def public_frontend():
   let history = [];
   let open = false;
 
+  const backdrop = document.getElementById('chatBackdrop');
+
   function toggle() {
     open = !open;
     overlay.classList.toggle('open', open);
+    if (backdrop) backdrop.classList.toggle('open', open);
     if (open) setTimeout(() => input.focus(), 100);
   }
 
   bubble.addEventListener('click', toggle);
-  closeBtn.addEventListener('click', () => { open = false; overlay.classList.remove('open'); });
+  closeBtn.addEventListener('click', () => {
+    open = false;
+    overlay.classList.remove('open');
+    if (backdrop) backdrop.classList.remove('open');
+  });
+
+  // Click backdrop to close
+  if (backdrop) {
+    backdrop.addEventListener('click', () => {
+      open = false;
+      overlay.classList.remove('open');
+      backdrop.classList.remove('open');
+    });
+  }
 
   // Wire up greeting speak button
   const greetBtn = document.getElementById('greetingSpeakBtn');