zweite Navbarzeile ab 1210Px

css/navbar.css

@@ -93,58 +93,38 @@ CSS für den Block Navbar mit seinen Elementen nach BEM
     display: block;
 }
 
-/* CSS von https://responsivenavigation.net/examples/simple-toggle/ */
-.anchor-link,
-#mobile-nav { display: none; }   /* Nicht im Desktop‑View */
-
-@media (max-width: 48em) { /* ~768px */
-    /* Desktop‑Menü verstecken */
-    .nav__center { display: none; }
-
-    /* Hamburger‑Button sichtbar */
-    #mobile-nav,
-    .anchor-link { display: block; }
-
-    /* Mobile‑Nav‑Liste (der “off‑canvas”‑Menu) sichtbar */
-    .nav__mobile-menu {
-        display: block;
-        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 */
+/* Responsive Anpassung ab 1210px und darunter */
+@media (max-width: 1210px) {
+    .nav {
+        flex-wrap: wrap; /* zweite Nav-Zeile*/
+        padding: 0.5rem 1rem;
     }
 
-    /* Mobile‑Links */
-    .nav__mobile-menu ul {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-    }
-    .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;
+        order: 1;
+        flex: 1; /* Nimmt den Platz links ein */
     }
+
+    .nav__right {
+        order: 2;
+        flex: 1;
+        justify-content: flex-end; /* schiebt Buttons nach ganz rechts */
+    }
+
+    .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 */
+        padding: 0.5rem 0;
+        border-top: 1px solid rgba(255,255,255,0.1); /* Optionale Trennlinie */
+        margin-top: 0.5rem;
+    }
+
+    .nav__item {
+        margin: 0.25rem;
+    }
+}
+
+#mobile-nav {
+    display: none;
 }