Datenschutz und Impressum hinzugefügt

src/styles/global.css

@@ -1 +1,57 @@
-@import "tailwindcss";
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
+
+@theme {
+    --color-header-bg: var(--color-slate-200);
+    --color-nav-text: var(--color-slate-400);
+    --color-nav-hover: var(--color-blue-400);
+    --shadow-top: 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 -2px 4px -2px rgb(0 0 0 / 0.1);
+}
+
+@layer base {
+    body {
+        @apply bg-slate-50 text-slate-700 antialiased;
+    }
+}
+
+@layer components {
+
+    /* Der Container des Headers */
+    .main-header {
+        @apply sticky top-0 z-50 w-full bg-linear-to-b from-white to-header-bg backdrop-blur-md shadow-md;
+    }
+
+    /* Innere Zentrierung */
+    .header-container {
+        @apply container mx-auto flex h-16 items-center justify-between px-6;
+    }
+
+    /* Navigations-Links */
+    .nav-list {
+        @apply flex items-center gap-8;
+    }
+
+    .nav-item {
+        @apply text-sm font-medium text-nav-text transition-colors hover:text-nav-hover;
+    }
+
+    .main-footer {
+        @apply w-full bg-linear-to-b from-white to-header-bg py-2 mt-auto shadow-top;
+    }
+
+    .footer-container {
+        @apply container mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-4;
+    }
+
+    .footer-copy {
+        @apply text-xs text-slate-400 font-medium;
+    }
+
+    .footer-links {
+        @apply flex gap-6 text-xs text-slate-500;
+    }
+
+    .footer-link-item {
+        @apply hover:text-blue-500 transition-colors;
+    }
+}