feat: add responsive mobile hamburger menu and fix horizontal overflow

index.html

@@ -16,7 +16,12 @@
       <a href="index.html" class="logo">
         🥨 <span>Waiswuaschd</span>.de
       </a>
-      <nav class="main-nav">
+      <button class="mobile-toggle" aria-label="Menü öffnen" id="mobileMenuBtn" aria-expanded="false">
+        <span class="bar"></span>
+        <span class="bar"></span>
+        <span class="bar"></span>
+      </button>
+      <nav class="main-nav" id="mainNav">
         <a href="index.html" class="active">Startseite</a>
         <a href="#features">Funktionen</a>
         <a href="#schritte">So geht's</a>
@@ -155,5 +160,26 @@
     </div>
   </footer>
 
+  <script>
+    const mobileBtn = document.getElementById('mobileMenuBtn');
+    const mainNav = document.getElementById('mainNav');
+    if (mobileBtn && mainNav) {
+      mobileBtn.addEventListener('click', () => {
+        const isOpen = mainNav.classList.toggle('open');
+        mobileBtn.classList.toggle('open', isOpen);
+        mobileBtn.setAttribute('aria-expanded', isOpen);
+        document.body.style.overflow = isOpen ? 'hidden' : '';
+      });
+      mainNav.querySelectorAll('a').forEach(link => {
+        link.addEventListener('click', () => {
+          mainNav.classList.remove('open');
+          mobileBtn.classList.remove('open');
+          mobileBtn.setAttribute('aria-expanded', 'false');
+          document.body.style.overflow = '';
+        });
+      });
+    }
+  </script>
+
 </body>
 </html>