Revision vor Kundenübergabe: Plausibilität, SEO, A11y, OpenPanel

src/styles.css

@@ -1,16 +1,15 @@
 @import 'tailwindcss';
 @import 'tw-animate-css';
-@import "tw-animate-css";
 @import "shadcn/tailwind.css";
 @import "@fontsource-variable/nunito-sans";
 @import "@fontsource-variable/public-sans";
-@import "dev-component/devtool.css";
 
 @font-face {
   font-family: Vend Sans;
-  src: url('/public/fonts/VendSans-VariableFont_wght.woff2');
-  font-weight: normal;
+  src: url('/fonts/VendSans-VariableFont_wght.woff2') format('woff2');
+  font-weight: 100 900;
   font-style: normal;
+  font-display: swap;
 }
 
 @plugin '@tailwindcss/typography';
@@ -333,6 +332,13 @@ a {
   transform: scaleX(1);
 }
 
+.nav-link:focus-visible {
+  outline: 2px solid var(--lagoon-deep);
+  outline-offset: 4px;
+  border-radius: 6px;
+  color: var(--sea-ink);
+}
+
 .rise-in {
   animation: rise-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
 }
@@ -348,6 +354,30 @@ a {
   }
 }
 
+.hero-image-in {
+  animation: hero-image-in 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
+  animation-delay: 200ms;
+}
+
+@keyframes hero-image-in {
+  from {
+    opacity: 0;
+    transform: translateX(24px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rise-in,
+  .hero-image-in {
+    animation-duration: 0.01ms;
+    animation-delay: 0ms;
+  }
+}
+
 .site-footer {
   border-top: 1px solid var(--line);
   background: color-mix(in oklab, var(--header-bg) 84%, transparent 16%);