responisve navbar

css/navbar.css

@@ -94,37 +94,57 @@ CSS für den Block Navbar mit seinen Elementen nach BEM
 }
 
 /* CSS von https://responsivenavigation.net/examples/simple-toggle/ */
-/*
-.nav { width:100%; background-color: #fff; border-bottom: 1px solid #ccc; }
-ul.simple-toggle { list-style: none; padding: 0px; margin: 0px; font-weight: bold; text-align: center; }
-ul.simple-toggle li { display: inline-block; text-align: left; }
-ul.simple-toggle li a { display: block; padding: 15px 10px; text-decoration: none; color: #444; }
-ul.simple-toggle li a:hover { background-color: #ccc; }
+.anchor-link,
+#mobile-nav { display: none; }   /* Nicht im Desktop‑View */
 
-.anchor-link { display: none; text-align: right; padding: 0 1em 0; text-align: center; padding: 10px 15px; color: #fff; background-color: #0084B4; text-decoration: none; margin: 3px; float: right; }
-#mobile-nav { display:none; }
+@media (max-width: 48em) { /* ~768px */
+    /* Desktop‑Menü verstecken */
+    .nav__center { display: none; }
 
-@media (max-width:48.000em){
+    /* Hamburger‑Button sichtbar */
+    #mobile-nav,
+    .anchor-link { display: block; }
 
-    ul.simple-toggle { display: none; }
-    .anchor-link, #mobile-nav { display: block; }
-
-    ul.open {
-        background-color: #F4F4F4;
-        box-shadow: 2px 2px 3px #444444;
+    /* Mobile‑Nav‑Liste (der “off‑canvas”‑Menu) sichtbar */
+    .nav__mobile-menu {
         display: block;
-        list-style: none outside none;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        background: #333d43;
+        z-index: 999;                 /* über allem anderen */
+        max-height: 0;                /* verstecken */
+        overflow: hidden;
+        transition: max-height 0.3s ease-out;
+    }
+    .nav__mobile-menu.open {
+        max-height: 100vh;            /* 100% viewport‑height */
+        overflow-y: auto;             /* Scrollen, falls zu viele Links */
+    }
+
+    /* Mobile‑Links */
+    .nav__mobile-menu ul {
+        list-style: none;
         margin: 0;
         padding: 0;
-        position: absolute;
-        right: 5px;
-        top: 100%;
-        width: 70%;
-        z-index: 500;
     }
-    ul.open li { display: block; list-style: none; text-align: center; }
-    ul.open li a { display: block; padding: 20px 10px; border-bottom: 1px solid #ccc; text-decoration: none; }
-    ul.open li a:hover { background-color: #ccc; color: #fff; }
+    .nav__mobile-menu li {
+        border-bottom: 1px solid #444;
+    }
+    .nav__mobile-menu a {
+        display: block;
+        color: #fff;
+        padding: 1rem;
+        text-decoration: none;
+    }
 
-}
-*/
+    /* Die “Profil / Anmelden / Registrieren”‑Buttons in einer Zeile */
+    .nav__right {
+        flex: 1;
+        justify-content: flex-end;
+    }
+    .nav__left {
+        flex: 1;
+    }
+}