From ad97a768247c8041679e27ce3f3f7799a216f90e Mon Sep 17 00:00:00 2001
From: Dotty Dotter <dotty@Mac.wideopen.space>
Date: Fri, 10 Apr 2026 22:29:55 +0200
Subject: [PATCH] =?UTF-8?q?Hamburger-Men=C3=BC:=20Auswertungen/Quellen/Met?=
 =?UTF-8?q?hodik/Auth=20als=20Dropdown,=20prim=C3=A4re=20Tabs=20bleiben?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/templates/index.html | 54 +++++++++++++++++++++++++++++++++++++---
 1 file changed, 50 insertions(+), 4 deletions(-)

diff --git a/app/templates/index.html b/app/templates/index.html
index ede5e0d..0f07378 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -557,6 +557,38 @@
             background: white;
             box-shadow: 0 1px 3px rgba(0,0,0,0.1);
         }
+
+        .hamburger-dropdown {
+            display: none;
+            position: absolute;
+            right: 0;
+            top: 100%;
+            background: white;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+            min-width: 180px;
+            z-index: 100;
+            padding: 0.3rem 0;
+        }
+        .hamburger-dropdown.open { display: block; }
+        .hamburger-dropdown a,
+        .hamburger-dropdown button {
+            display: block;
+            width: 100%;
+            padding: 0.5rem 1rem;
+            text-align: left;
+            text-decoration: none;
+            color: var(--color-darkgray);
+            background: none;
+            border: none;
+            cursor: pointer;
+            font-size: 0.9rem;
+        }
+        .hamburger-dropdown a:hover,
+        .hamburger-dropdown button:hover {
+            background: #f5f5f5;
+        }
         
         /* Loading */
         .loading {
@@ -701,10 +733,16 @@
             <button class="mode-btn" onclick="showMode('bookmarks')">⭐ Merkliste</button>
             <button class="mode-btn" onclick="showMode('tags')">🏷️ Tags</button>
             <button class="mode-btn" onclick="showMode('upload')">📤 Prüfen</button>
-            <a href="/auswertungen" class="mode-btn" style="text-decoration: none;">📈 Auswertungen</a>
-            <a href="/quellen" class="mode-btn" style="text-decoration: none;">📚 Quellen</a>
-            <a href="/methodik" class="mode-btn" style="text-decoration: none;">🔍 Methodik</a>
-            <button id="auth-btn" class="mode-btn" style="border:none;cursor:pointer;">🔑 Anmelden</button>
+            <div class="hamburger-wrapper" style="position:relative;display:inline-block;">
+                <button class="mode-btn" onclick="document.getElementById('hamburger-menu').classList.toggle('open')" style="font-size:1.2rem;padding:0.3rem 0.6rem;">☰</button>
+                <div id="hamburger-menu" class="hamburger-dropdown">
+                    <a href="/auswertungen">📈 Auswertungen</a>
+                    <a href="/quellen">📚 Quellen</a>
+                    <a href="/methodik">🔍 Methodik</a>
+                    <hr style="margin:0.3rem 0;border:none;border-top:1px solid #eee;">
+                    <button id="auth-btn" onclick="event.stopPropagation();">🔑 Anmelden</button>
+                </div>
+            </div>
         </div>
     </header>
     
@@ -903,6 +941,14 @@
             }
         }
 
+        // Hamburger-Menü schließen bei Klick außerhalb
+        document.addEventListener('click', (e) => {
+            const menu = document.getElementById('hamburger-menu');
+            if (menu && !e.target.closest('.hamburger-wrapper')) {
+                menu.classList.remove('open');
+            }
+        });
+
         // Partei-Normalisierung (global, für Stats + Labels)
         function normalizePartei(f) {
             const u = f.toUpperCase();