Fix: Karte-Höhe via JS, events Leaflet-Pfad, Hamburger-Menü mobile Drawer

backend/static/css/layout.css

@@ -83,9 +83,55 @@
 }
 .header-back:hover { background: var(--c-surface-2); }
 
+/* Hamburger-Button (nur Mobile) */
+.header-menu-btn {
+  width:           40px;
+  height:          40px;
+  display:         flex;
+  align-items:     center;
+  justify-content: center;
+  border:          none;
+  background:      transparent;
+  font-size:       1.3rem;
+  color:           var(--c-text);
+  cursor:          pointer;
+  border-radius:   var(--radius-md);
+  flex-shrink:     0;
+  -webkit-tap-highlight-color: transparent;
+}
+.header-menu-btn:hover { background: var(--c-surface-2); }
+
+/* Backdrop für mobile Sidebar */
+.sidebar-backdrop {
+  display:    none;
+  position:   fixed;
+  inset:      0;
+  background: rgba(0,0,0,0.45);
+  z-index:    499;
+}
+.sidebar-backdrop.visible { display: block; }
+
 /* Auf Desktop keinen mobilen Header zeigen */
 @media (min-width: 768px) {
   #app-header { display: none; }
+  .header-menu-btn { display: none; }
+  .sidebar-backdrop { display: none !important; }
+}
+
+/* Mobile Sidebar als Drawer */
+@media (max-width: 767px) {
+  #sidebar {
+    display:    flex;
+    position:   fixed;
+    left:       calc(-1 * var(--nav-sidebar-width));
+    top:        0;
+    bottom:     0;
+    z-index:    500;
+    transition: left 0.28s ease;
+  }
+  #sidebar.open {
+    left: 0;
+  }
 }
 
 /* ------------------------------------------------------------