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;
+  display: flex;
-  overflow-y: auto;
+  flex-direction: column;
-  max-height: 0;
+  opacity: 0;
-  overflow: hidden;
+  visibility: hidden;
   pointer-events: none;
-  transition: max-height 400ms ease;
+  overflow-y: auto;
-  /* Scrollbar ausblenden (Firefox/IE/Edge legacy) */
+  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)
+    padding: var(--nav-padding-tb) var(--nav-padding-lr);
-      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;
+    align-items: center;
-    transform: none;
+    gap: 0;
-    transition: none;
+
+    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 {
+  .nav-links > li:first-child,
-    padding: 0;
-  }
-
   .nav-links > li:last-child {
     padding: 0;
   }

components/Navbar/NavbarSubMenu.module.css

@@ -10,20 +10,28 @@
   max-height: 0;
   opacity: 1;
   overflow: hidden;
+  visibility: hidden;
   pointer-events: none;
   transform: translateY(-4px);
   transition:
     max-height 250ms ease,
     opacity 180ms ease,
-    transform 180ms ease;
+    transform 180ms ease,
+    visibility 0s linear 300ms;
   background-color: var(--nav-bg);
 }
 
 .nav-submenu.open {
   max-height: var(--submenu-h);
   opacity: 1;
+  visibility: visible;
   pointer-events: auto;
   transform: translateY(0);
+  transition:
+    max-height 250ms ease,
+    opacity 180ms ease,
+    transform 180ms ease,
+    visibility 0s linear 0s;
 }
 
 .nav-submenu-inner {
@@ -95,11 +103,8 @@
     box-shadow: 0 4px 6px -6px rgb(0 0 0 / 30%);
     opacity: 0;
     transform: translateY(-8px);
-    transition:
-      max-height 300ms,
-      opacity 300ms,
-      transform 300ms ease;
   }
+
   .nav-submenu-list li a:focus-visible {
     outline: 2px solid var(--nav-outline-color);
     outline-offset: 2px;

styles/buttons.css

@@ -1,13 +1,13 @@
 :root {
   /* Colors */
-  --btn-bg-primary: #474747;
+  --btn-bg-primary: #267361;
-  --btn-bg-primary-hover: #3b3b3b;
+  --btn-bg-primary-hover: #267361;
   --btn-bg-primary-active: #353030;
 
   --btn-text-light: #fefcfb;
-  --btn-text-dark: #474747;
+  --btn-text-dark: #267361;
 
-  --btn-border-primary: #474747;
+  --btn-border-primary: #267361;
   --btn-border-ghost: #e9e9e9;
   --btn-border-ghost-hover: #ececec;
   --btn-border-ghost-active: #e1e1e1;
@@ -29,16 +29,16 @@
   --btn-px: 16px;
   --btn-py-lg: 16px;
   --btn-px-lg: 24px;
-  --btn-radius: 4px;
+  --btn-radius: 50px;
   --btn-gap: 8px;
   --btn-max-height: 52px;
   --btn-icon-size: 18px;
   --btn-tertiary-px: 4px;
 
   /* Typography */
-  --btn-font-family: inherit;
+  --btn-font-family: var(--font-body);
   --btn-font-size: 0.889rem;
-  --btn-font-weight: 600;
+  --btn-font-weight: var(--font-weight-bold);
   --btn-line-height: 1;
 
   /* Shadow */
@@ -240,5 +240,6 @@
 @media (min-width: 768px) {
   .btn {
     padding: var(--btn-py-lg) var(--btn-px-lg);
+    font-size: 1rem;
   }
 }

styles/tokens.css

@@ -11,7 +11,36 @@
   --space-4: 16px;
   --space-5: 20px;
   --space-6: 24px;
-  --space-7: 32px;
+  --space-7: 28px;
+  --space-8: 32px;
+  --space-9: 36px;
+  --space-10: 40px;
+  --space-11: 44px;
+  --space-12: 48px;
+  --space-13: 52px;
+  --space-14: 56px;
+  --space-15: 60px;
+  --space-16: 64px;
+  --space-17: 68px;
+  --space-18: 72px;
+  --space-19: 76px;
+  --space-20: 80px;
+  --space-21: 84px;
+  --space-22: 88px;
+  --space-23: 92px;
+  --space-24: 96px;
+  --space-25: 100px;
+  --space-26: 104px;
+  --space-27: 108px;
+  --space-28: 112px;
+  --space-29: 116px;
+  --space-30: 120px;
+  --space-31: 124px;
+  --space-32: 128px;
+  --space-33: 132px;
+  --space-34: 136px;
+  --space-35: 140px;
+  --space-36: 144px;
 
   /* Colors */
   --color-surface: #ffffff;

styles/typography.css

@@ -29,26 +29,6 @@
   --font-heading-color: #302e2e;
 }
 
-/* @media (min-width: 768px) {
-  :root {
-    --font-size-h1: 2.566rem;
-    --font-size-h2: 2.281rem;
-    --font-size-h3: 2.027rem;
-    --font-size-h4: 1.802rem;
-    --font-size-h5: 1.602rem;
-  }
-}
-*/
-/* @media (min-width: 1024px) {
-  :root {
-    --font-size-h1: 3.247rem;
-    --font-size-h2: 2.566rem;
-    --font-size-h3: 2.027rem;
-    --font-size-h4: 1.802rem;
-    --font-size-h5: 1.602rem;
-  }
-} */
-
 a {
   color: inherit;
   text-decoration: none;
@@ -69,7 +49,7 @@ small,
 .lead,
 .text-lead {
   font-size: var(--font-size-lead);
-  line-height: 1.6;
+  line-height: 1.4;
 }
 
 h1,