off canvas navbar

css/navbar.css

@@ -102,7 +102,7 @@ CSS für den Block Navbar mit seinen Elementen nach BEM
 
     .nav__left {
         order: 1;
-        flex: 1; /* Nimmt den Platz links ein */
+        flex: 1; /* nimmt den Platz ganz links ein */
     }
 
     .nav__right {
@@ -114,7 +114,7 @@ CSS für den Block Navbar mit seinen Elementen nach BEM
     .nav__center {
         order: 3;
         flex-basis: 100%; /* Erzwingt, dass dieses Element eine eigene Zeile einnimmt */
-        justify-content: center; /* Zentriert die Links in der zweiten Zeile */
+        justify-content: center; /*zentriert die Links in der zweiten Zeile */
         padding: 0.5rem 0;
         border-top: 1px solid rgba(255,255,255,0.1); /* Optionale Trennlinie */
         margin-top: 0.5rem;
@@ -127,4 +127,84 @@ CSS für den Block Navbar mit seinen Elementen nach BEM
 
 #mobile-nav {
     display: none;
+}
+
+@media (max-width: 660px) {
+    .nav {
+        flex-direction: column;
+        padding: 10px;
+    }
+
+    .nav__left {
+        order: 1;
+        width: 100%;
+        justify-content: center;
+        margin-bottom: 0.5rem;
+    }
+
+    .nav__right {
+        order: 2;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .nav__center {
+        display: none; /* Desktop aus*/
+    }
+
+    #mobile-nav {
+        display: block;
+        order: 1;
+        background: #333d43;
+        border: none;
+        color: #fff;
+        font-size: 1.5rem;
+        padding: 0.5rem 1rem;
+        border-radius: 0.2rem;
+        cursor: pointer;
+    }
+
+    .nav__search {
+        order: 2;
+        flex-grow: 1; /* restlichen Platz ausfüllen*/
+        margin: 0;
+    }
+
+    .nav__right .nav__button, .nav__right .nav__link {
+        display: none; /* restliche navbar aus */
+    }
+    /* off canvas menu */
+    .nav__mobile-menu {
+        display: flex;
+        flex-direction: column;
+        position: fixed;
+        top: 0;
+        left: -100%; /* kommt von links */
+        width: 280px;
+        height: 100vh;
+        background: #333d43;
+        z-index: 1000;
+        transition: left 0.3s ease;
+        padding: 2rem 1rem;
+        box-shadow: 2px 0 10px rgba(0,0,0,0.5);
+        overflow-y: auto;
+    }
+
+    .nav_mobile-menu.is-active {
+        left: 0;
+    }
+
+    .nav__mobile-menu a {
+        color: #fff;
+        text-decoration: none;
+        font-size: 1.2rem;
+        font-weight: 600;
+        display: block;
+        padding: 0.5rem 1rem;
+        border-bottom: 1px solid #333d43;
+    }
+
 }