Move language toggle, profile and logout into hamburger menu next to brand

css/styles.css

@@ -24,7 +24,30 @@ a:hover { text-decoration: underline; }
   align-items: center;
   padding: 24px 0;
 }
-.brand { font-size: 1.75rem; font-weight: 800; }
+.brand { font-size: 1.75rem; font-weight: 800; display: flex; align-items: center; gap: 12px; position: relative; }
+.hamburger-btn {
+  background: none; border: none; cursor: pointer; padding: 4px;
+  display: flex; align-items: center; justify-content: center;
+}
+.hamburger-btn svg { width: 24px; height: 24px; fill: var(--black); }
+.hamburger-menu {
+  position: absolute; top: 100%; right: 0;
+  background: var(--white); border: 1px solid var(--gray2);
+  border-radius: 8px; padding: 16px; min-width: 200px;
+  box-shadow: 0 4px 12px rgba(0,0,0,.1); z-index: 100;
+  display: flex; flex-direction: column; gap: 12px;
+}
+.hamburger-menu.hidden { display: none; }
+.menu-section { display: flex; flex-direction: column; gap: 8px; }
+.menu-btn {
+  padding: 8px 12px; font-size: .85rem; border-radius: 6px;
+  display: flex; align-items: center; gap: 6px;
+  background: none; border: none; cursor: pointer;
+  font-weight: 600; color: var(--black); text-align: left;
+  width: 100%;
+}
+.menu-btn:hover { background: var(--gray1); }
+.menu-btn svg { width: 16px; height: 16px; fill: currentColor; }
 .lang-select {
   display: flex; gap: 8px; background: var(--gray1);
   padding: 4px; border-radius: 8px;

index.html

@@ -14,22 +14,29 @@
 
   <header class="header">
     <div class="brand">
-      Paraguay LLC & SRL – Austausch & Community
+      <span>Paraguay LLC & SRL – Austausch & Community</span>
+      <button class="hamburger-btn" id="hamburger-btn" aria-label="Menu">
+        <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
+      </button>
+      <div class="hamburger-menu hidden" id="hamburger-menu">
+        <div class="menu-section">
           <div class="lang-select">
             <button class="lang-btn active" data-lang="de">DE</button>
             <button class="lang-btn" data-lang="en">EN</button>
           </div>
-      <div class="user-actions hidden">
+        </div>
-        <button class="btn-secondary user-btn" onclick="openProfileModal()">
+        <div class="menu-section user-actions hidden" id="menu-user-actions">
+          <button class="menu-btn user-btn" onclick="openProfileModal()">
             <svg viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
             <span class="hide-de">Dein Profil</span><span class="hide-en">Your Profile</span>
           </button>
-        <button class="btn-secondary user-btn" onclick="logout()">
+          <button class="menu-btn user-btn" onclick="logout()">
             <svg viewBox="0 0 24 24"><path d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/></svg>
             <span class="hide-de">Abmelden</span><span class="hide-en">Logout</span>
           </button>
         </div>
       </div>
+    </div>
   </header>
 
   <section class="intro" id="intro-section">

js/main.js

@@ -4,6 +4,28 @@ document.addEventListener('DOMContentLoaded', () => {
     loadUsers();
     loadWiki();
   }
+  
+  // Hamburger menu toggle
+  const hamburger = document.getElementById('hamburger-btn');
+  const menu = document.getElementById('hamburger-menu');
+  if (hamburger && menu) {
+    hamburger.addEventListener('click', (e) => {
+      e.stopPropagation();
+      menu.classList.toggle('hidden');
+    });
+    // Close menu when clicking outside
+    document.addEventListener('click', (e) => {
+      if (!menu.contains(e.target) && e.target !== hamburger && !hamburger.contains(e.target)) {
+        menu.classList.add('hidden');
+      }
+    });
+    // Close menu on Escape
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        menu.classList.add('hidden');
+      }
+    });
+  }
 });
 
 function getCookie(name) {
@@ -44,20 +66,21 @@ function checkSession() {
   const login = document.getElementById('login-panel');
   const newsletter = document.getElementById('newsletter-panel');
   const notebook = document.getElementById('notebook-panel');
+  const menuActions = document.getElementById('menu-user-actions');
   if (sessionid) {
     // User is logged in via n8n cookie
     if (intro) intro.classList.add('hidden');
     if (news) news.classList.add('hidden');
     if (login) login.classList.add('hidden');
     if (notebook) notebook.classList.remove('hidden');
-    document.querySelectorAll('.user-actions').forEach(el => el.classList.remove('hidden'));
+    if (menuActions) menuActions.classList.remove('hidden');
     if (newsletter) newsletter.classList.remove('hidden');
   } else {
     // User is not logged in
     if (notebook) notebook.classList.add('hidden');
     if (login) login.classList.remove('hidden');
     if (newsletter) newsletter.classList.remove('hidden');
-    document.querySelectorAll('.user-actions').forEach(el => el.classList.add('hidden'));
+    if (menuActions) menuActions.classList.add('hidden');
   }
 }
 
@@ -190,7 +213,8 @@ async function submitLoginData() {
       document.getElementById('profile-username').value = document.getElementById('telegram-user').value;
       document.getElementById('profile-name').value = document.getElementById('full-name').value;
       document.getElementById('profile-llc').value = document.getElementById('llc-name').value;
-      document.querySelectorAll('.user-actions').forEach(el => el.classList.remove('hidden'));
+      const menuActions = document.getElementById('menu-user-actions');
+      if (menuActions) menuActions.classList.remove('hidden');
       alert('Erfolgreich angemeldet! Willkommen!');
     } else {
       alert('Fehler bei der Anmeldung.');