From bbc7e7297e829264e2f7c8de75a124e13605bcb6 Mon Sep 17 00:00:00 2001
From: NOrtmann1 <ortmann.niklas@yahoo.de>
Date: Mon, 11 May 2026 12:43:55 +0200
Subject: [PATCH] zweite Navbarzeile ab 1210Px

---
 css/navbar.css      | 80 +++++++++++++++++----------------------------
 includes/navbar.php |  2 +-
 2 files changed, 31 insertions(+), 51 deletions(-)

diff --git a/css/navbar.css b/css/navbar.css
index dc5990a..eb10ce5 100644
--- a/css/navbar.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/includes/navbar.php b/includes/navbar.php
index 628ce71..4c14ea6 100644
--- a/includes/navbar.php
+++ b/includes/navbar.php
@@ -8,7 +8,7 @@ Globales Menü, wird via PHP später in alle Seiten eingebunden
 	    </a>
     </div>
     <!-- Mobile navbar mit Burger-Symbol -->
-    <button id="mobile-nav" class="anchor-link" aria-label="Menü öffnen">
+    <button id="mobile-nav" aria-label="Menü öffnen">
         ☰
     </button>
     <!--