Barrierarm optimiert

components/Navbar/Navbar.module.css

@@ -53,26 +53,34 @@
   background-color: inherit;
   position: fixed;
   inset: var(--nav-h) 0 0 0;
-  overflow-x: hidden;
-  overflow-y: auto;
-  max-height: 0;
-  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  opacity: 0;
+  visibility: hidden;
   pointer-events: none;
-  transition: max-height 400ms ease;
-  /* Scrollbar ausblenden (Firefox/IE/Edge legacy) */
+  overflow-y: auto;
+  transform: translateY(-12px);
+  transition:
+    opacity 220ms ease,
+    transform 220ms ease,
+    visibility 0s linear 220ms;
   scrollbar-width: none;
   -ms-overflow-style: none;
 }
 
-/* Chrome/Safari/Opera */
 .nav-links::-webkit-scrollbar {
   display: none;
 }
 
 .nav-links.open {
-  max-height: 100vh;
+  opacity: 1;
+  visibility: visible;
   pointer-events: auto;
-  overflow-y: auto;
+  transform: translateY(0);
+  transition:
+    opacity 220ms ease,
+    transform 220ms ease,
+    visibility 0s linear 0s;
 }
 
 .nav-links li {
@@ -168,8 +176,7 @@
   }
 
   .nav {
-    padding: var(--nav-padding-tb) var(--nav-padding-lr) var(--nav-padding-tb)
-      var(--nav-padding-lr);
+    padding: var(--nav-padding-tb) var(--nav-padding-lr);
   }
 
   .nav-logo-image {
@@ -180,24 +187,30 @@
   .nav-links {
     position: static;
     inset: auto;
-    overflow: visible;
     display: flex;
-    align-items: center;
     flex-direction: row;
-    pointer-events: auto;
-    transform: none;
-    transition: none;
+    align-items: center;
+    gap: 0;
+
+    overflow: visible;
     max-height: none;
+
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+
+    transform: none;
+    clip-path: none;
+
+    background-color: transparent;
+    transition: none;
   }
 
   .nav-links > li a {
     padding: 16px 12px;
   }
 
-  .nav-links > li:first-child {
-    padding: 0;
-  }
-
+  .nav-links > li:first-child,
   .nav-links > li:last-child {
     padding: 0;
   }