HAT KURZ FUNKTIONIERT JETZT NICHT MEHR JETZT WILL ICH NICHT MEHR ABER MACH BALD WIEDER WEITER

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

@@ -5,44 +5,46 @@ html, body {
 }
 
 .navigation {
-    max-width: 80vw; /* oder max-width: 100%; */
+    max-width: 80vw; /* oder max-width: 100%;*/ 
     margin: 0 auto;
-    position: fixed;
+    position: fixed; 
     top: 0;
     z-index: 1000;
     background-color: #bbb;
     padding: 1rem 0;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    width: 80vw; /* Wichtig! */
-    left: 50%; /* horizontale Zentrierung mit transform */
-    transform: translateX(-50%);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
+    width: 80vw; /* Wichtig!*/
+    /*left: 50%; /* horizontale Zentrierung mit transform*/ 
+    /*transform: translateX(-50%);*/
     border: 3px solid #75767B;
     border-top: none;
     border-bottom: none;
 }
 
+
+
 body {
     padding-top: 100px; /* H<>he der fixierten Navigation kompensieren */
 }
 
-.navigation .app-logo .img-fluid {
+.app-logo .img-fluid {
     max-height: 60px;
 }
 
-.navigation .app-menu {
+.app-menu {
     display: flex;
-    gap: 1rem;
+    gap: 1rem; 
 }
 
-.navigation .nav-item a {
+.nav-item a {
     color: black;
     font-weight: normal;
     text-decoration: none;
 }
 
-    .navigation .nav-item a.active {
-        font-weight: bold;
-    }
+.nav-item a.active {
+    font-weight: bold;
+} 
 
 /* Footer */
 .footer {
@@ -57,7 +59,7 @@ body {
 
 
 .wrapper {
-    max-width: 80vw; /* max. 80% der Viewport-Breite */
+    max-width: 80vw; /* max. 80% der Viewport-Breite */ 
     margin: 0 auto; /* horizontal zentrieren */
     display: flex;
     flex-direction: column;
@@ -68,7 +70,7 @@ main.flex-fill {
     flex: 1 0 auto; /* Flex-grow 1, flex-shrink 0, flex-basis auto */
     display: flex;
     flex-direction: column;
-    min-height: 0; /* Wichtig f<>r flexbox overflow */
+    min-height: 0; /* Wichtig f<>r flexbox overflow*/
 }
 
 .content {
@@ -179,6 +181,48 @@ main.flex-fill {
         outline: none;
     }
 
-
+.hamburger {
+    width: 40px;
+    height: 28px;
+    position: relative;
+    cursor: pointer;
+}
+
+    .hamburger span {
+        position: absolute;
+        left: 0;
+        width: 100%;
+        height: 4px;
+        background: #e5e7eb;
+        border-radius: 2px;
+        transition: transform 0.25s ease, opacity 0.25s ease;
+    }
+
+        .hamburger span:nth-child(1) {
+            top: 0;
+        }
+
+        .hamburger span:nth-child(2) {
+            top: 12px;
+        }
+
+        .hamburger span:nth-child(3) {
+            bottom: 0;
+        }
+
+    /* Animation beim Klick (wird aktiv, wenn .active hinzugef<65>gt wird) */
+    .hamburger.active span:nth-child(1) {
+        transform: translateY(12px) rotate(45deg);
+    }
+
+    .hamburger.active span:nth-child(2) {
+        opacity: 0;
+    }
+
+    .hamburger.active span:nth-child(3) {
+        transform: translateY(-12px) rotate(-45deg);
+    }
+
+