Client/Themes/Theme1.razor

@@ -71,16 +71,14 @@
         <UserProfile ShowRegister="@_register" />
         <Login ShowLogin="@_login" />
     </div>
-
-            <div class="app-menu-footer right-side">
-                    <ControlPanel />
-            </div>
-
-            
 </div>
 
     <!-- Rechts: ControlPanel + User + Login -->
-    
+    <div class="d-flex align-items-center gap-2 app-navbar-left">
+        <div class="d-flex align-items-center gap-2">
+            <ControlPanel/>
+        </div>
+    </div>
 </nav>
     <div class="content">
         <div class="container">

Client/wwwroot/Themes/SZUAbsolventenverein.Theme.Website/Theme.css

@@ -5,6 +5,29 @@
 body {
     
 }
+
+/* Login-Button (Mobile + Desktop) */
+.app-menu-footer .btn-login,
+.app-menu-footer .login-btn,
+.app-menu-footer button,
+.app-menu-footer a {
+    background-color: #ffffff !important;
+    border: 1px solid #ccc !important;
+    color: #555 !important;
+    padding: 6px 14px !important;
+    border-radius: 6px !important;
+    font-weight: 500 !important;
+}
+
+    /* Hover-Effekt */
+    .app-menu-footer .btn-login:hover,
+    .app-menu-footer .login-btn:hover,
+    .app-menu-footer button:hover,
+    .app-menu-footer a:hover {
+        background-color: #f2f2f2 !important;
+        border-color: #bbb !important;
+        color: #333 !important;
+    }
 .content {
     margin-top: 60px; /* ungefähr Höhe der Navbar */
 }
@@ -34,7 +57,7 @@ body {
 }
 
 .bg-primary {
-    background-color: gray !important;
+    background-color: #b1b0b0 !important;
 }
 
 .table .btn-primary {
@@ -117,7 +140,7 @@ body {
 /* Menü-Container */
 .app-menu {
     display: flex;
-    
+    background-color: #b1b0b0;
 }
 
 /* Bereich für die Seitenlinks – Basis: horizontales Flex */
@@ -166,51 +189,47 @@ body {
    DESKTOP (ab 768px)
    =========================== */
 @media (min-width: 1000px) {
-    /* setting rehct neben loggin*/
-    .right-side{
-        margin-right: 150px;
-    }
-    /* Navbar: eine Zeile, Positionierungs-Referenz für Absolut-Elemente */
+
+    /* Navbar ist Referenz für die absolute Zentrierung */
     .app-navbar {
         display: flex !important;
         flex-wrap: nowrap !important;
         align-items: center !important;
         justify-content: flex-start !important;
         position: relative !important;
+        min-height: 60px; /* optional: fixe Höhe */
     }
 
-    /* Menübereich in der Mitte */
+    /* Menü nur als Container für den Footer */
     .app-menu {
         display: flex !important;
         flex-direction: row !important;
         align-items: center !important;
-        justify-content: center !important; /* Menüpunkte in der Mitte */
-        flex: 1 1 auto !important; /* füllt Platz zwischen Logo und rechts */
+        flex: 1 1 auto !important;
         gap: 0.75rem !important;
         position: static !important;
         width: auto !important;
-        margin-right: 210px !important;
     }
 
-    /* Menüpunkte horizontal zentriert */
+    /* NAV-LINKS: exakt in der Mitte der ganzen Navbar / Seite */
     .app-menu-items {
+        position: absolute !important;
+        left: 50% !important;
+        top: 50% !important;
+        transform: translate(-50%, -50%) !important;
         display: flex !important;
         flex-direction: row !important;
-        flex-wrap: wrap !important;
-        justify-content: center !important;
-        align-items: center !important;
+        flex-wrap: nowrap !important;
         gap: 0.75rem !important;
         width: auto !important;
+        z-index: 1;
     }
 
-    /* Login/Register GANZ RECHTS in der Navbar */
+    /* Login/User bleiben im Menü, aber rechts */
     .app-menu-footer {
         display: flex !important;
-        position: absolute !important;
-        right: 1rem !important;          /* Abstand vom rechten Rand */
-        top: 50% !important;
-        transform: translateY(-50%);     /* vertikal mittig ausrichten */
         gap: 0.75rem !important;
+        margin-left: auto !important; /* schiebt Footer nach rechts */
         padding: 0 !important;
         border: none !important;
         background: none !important;
@@ -222,7 +241,6 @@ body {
     }
 }
 
-
 /* ===========================
    MOBILE (unter 768px)
    =========================== */
@@ -257,7 +275,7 @@ body {
         width: 70%;
         max-width: 280px;
         height: calc(100vh - 80px); /* Höhe an das neue top anpassen */
-        background-color: grey;
+        background-color: #b1b0b0;
         flex-direction: column;
         align-items: stretch;
         padding: 1rem;
@@ -285,10 +303,12 @@ body {
         padding-top: 0.5rem;
         border-top: 1px solid rgba(255, 255, 255, 0.25);
         display: flex;
-        justify-content: space-between;
-        align-items: center;
+        flex-direction: column; /* untereinander statt nebeneinander */
+        gap: 0.5rem; /* Abstand zwischen Host und Logout */
+        justify-content: right;
     }
 
+
     /* Sidebar öffnen/schließen über Checkbox */
     .nav-toggle:checked ~ .app-menu {
         transform: translateX(0);