- fix div positioning

- add hamburger menu for responsive menus

launch.html

@@ -31,6 +31,7 @@
       .container {
         display: flex;
         flex-direction: column;
+        align-items: center;
         width: min(700px, calc(100% - 32px));
       }
 
@@ -55,21 +56,38 @@
       .logo-bar {
         display: flex;
         align-items: center;
+        flex: 0 1 auto;
+        min-width: 0;
       }
 
       .logo-bar img {
         display: block;
         height: 60px;
+        max-width: 100%;
         width: auto;
       }
 
       .nav-actions {
         display: flex;
         align-items: center;
+        flex-wrap: wrap;
+        justify-content: flex-end;
         gap: 8px;
         margin-left: auto;
       }
 
+      /* Hamburger: nur im Phone-Portrait sichtbar.
+       * "button.nav-toggle" ist spezifischer als ".button",
+       * sonst überschreibt display: inline-block diese Regel. */
+      button.nav-toggle {
+        display: none;
+      }
+
+      /* Enger als der globale 6px-Margin der Buttons */
+      .navbar .button {
+        margin: 0;
+      }
+
       .lang-menu {
         position: relative;
       }
@@ -124,7 +142,7 @@
 
       .card {
         box-sizing: border-box;
-        width: min(600px, calc(100% - 32px));
+        width: min(600px, 100%);
         padding: 32px;
         background: rgba(255, 255, 255, 0.2);
         -webkit-backdrop-filter: blur(7px);
@@ -288,8 +306,11 @@
        */
       @media (max-width: 600px) {
         body {
-          align-items: flex-start;
+          /* 130px räumen die fixe Navbar frei */
           padding-top: 130px;
+          /* min-height gilt für die Content-Box: Navbar-Freiraum
+           * abziehen, sonst sitzt die Karte unter der Mitte */
+          min-height: calc(100vh - 130px);
         }
 
         .navbar {
@@ -304,11 +325,6 @@
           height: 40px;
         }
 
-        .nav-actions {
-          flex-wrap: wrap;
-          justify-content: flex-end;
-        }
-
         button, .button {
           padding: 10px 14px;
           font-size: 15px;
@@ -319,6 +335,96 @@
         }
       }
 
+      /* Sehr schmale Telefone: noch kompakter */
+      @media (max-width: 400px) {
+        .navbar {
+          left: 2%;
+          width: 96%;
+          padding: 8px;
+          gap: 6px;
+        }
+
+        .logo-bar img {
+          height: 32px;
+        }
+
+        .nav-actions {
+          gap: 6px;
+        }
+
+        .nav-actions .button {
+          padding: 8px 12px;
+          font-size: 14px;
+        }
+      }
+
+      /*
+       * Phone-Portrait: Navbar-Aktionen hinter dem
+       * Hamburger-Button als Dropdown anzeigen.
+       */
+      @media (orientation: portrait) and (max-width: 600px) {
+        body {
+          /* Navbar ist hier einzeilig */
+          padding-top: 80px;
+          min-height: calc(100vh - 80px);
+        }
+
+        button.nav-toggle {
+          display: inline-flex;
+        }
+
+        /* ".navbar .button" setzt margin: 0 – deshalb
+         * höher spezifisch ans Ziel: Button nach rechts */
+        .navbar .nav-toggle {
+          margin-left: auto;
+        }
+
+        .nav-actions {
+          display: none;
+          position: absolute;
+          top: 100%;
+          right: 0;
+          margin: 8px 0 0;
+          padding: 8px;
+          min-width: 200px;
+          background: white;
+          border-radius: 10px;
+          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+          flex-direction: column;
+          align-items: stretch;
+        }
+
+        .nav-actions.open {
+          display: flex;
+        }
+
+        /* Alle Panel-Buttons gleich breit, Text zentriert */
+        .nav-actions .button {
+          text-align: center;
+        }
+
+        /* Sprach-Button liegt im .lang-menu-Wrapper */
+        .nav-actions .lang-menu .button {
+          display: block;
+          width: 100%;
+          box-sizing: border-box;
+        }
+
+        :root.dark .nav-actions {
+          background: #242424;
+        }
+      }
+
+      /*
+       * Sicherheit: Hamburger im Landscape grundsätzlich
+       * ausblenden, falls orientation falsch gemeldet wird.
+       */
+      @media (orientation: landscape) {
+        button.nav-toggle {
+          display: none;
+        }
+      }
+
       @keyframes spin {
         to {
           transform: rotate(360deg);
@@ -419,7 +525,12 @@
       <div id="logoBar" class="logo-bar hidden">
         <img id="logoImage" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Logo">
       </div>
-      <div class="nav-actions">
+      <button id="navToggle" class="button secondary nav-toggle" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="navActions" aria-label="Menu">
+        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M4 7h16M4 12h16M4 17h16"/>
+        </svg>
+      </button>
+      <div id="navActions" class="nav-actions">
       <a class="button secondary" href="https://www.bnvb-ingenieure.de/impressum" target="_blank" rel="noopener noreferrer" data-i18n="impressum">
         Impressum
       </a>
@@ -1246,6 +1357,22 @@
         langButton.setAttribute("aria-expanded", "false");
       }
 
+      /* ============================================================
+       * NAV MENU (Hamburger)
+       * ============================================================
+       */
+
+      function toggleNavMenu() {
+        const isOpen = navActions.classList.toggle("open");
+
+        navToggle.setAttribute("aria-expanded", isOpen ? "true" : "false");
+      }
+
+      function closeNavMenu() {
+        navActions.classList.remove("open");
+        navToggle.setAttribute("aria-expanded", "false");
+      }
+
       /* ============================================================
        * THEME
        * ============================================================
@@ -1374,6 +1501,11 @@
       const adhocLink = document.getElementById("adhocLink");
       const copyAdhocLinkButton = document.getElementById("copyAdhocLinkButton");
 
+      /* Navbar DOM elements */
+      const navbar = document.querySelector(".navbar");
+      const navToggle = document.getElementById("navToggle");
+      const navActions = document.getElementById("navActions");
+
       /* Language menu DOM elements */
       const langMenu = document.getElementById("langMenu");
       const langButton = document.getElementById("langButton");
@@ -2219,6 +2351,10 @@ END:VCALENDAR`;
           if (!langMenu.contains(event.target)) {
             closeLanguageMenu();
           }
+
+          if (!navbar.contains(event.target)) {
+            closeNavMenu();
+          }
         }
       );
 
@@ -2228,6 +2364,12 @@ END:VCALENDAR`;
         toggleTheme
       );
 
+      /* Hamburger events */
+      navToggle.addEventListener(
+        "click",
+        toggleNavMenu
+      );
+
       /*
        * Ohne gespeicherte Wahl dem System folgen.
        */