alles andere

src/app/globals.css

@@ -1,26 +1,99 @@
 @import "tailwindcss";
 
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --bg: #ffffff;
+  --bg-dark: #0f172a;
+  /* Slate 900 - Deep Navy */
+  --surface: #f1f5f9;
+  /* Slate 100 */
+  --surface-dark: #1e293b;
+  /* Slate 800 */
+  --ink: #0f172a;
+  /* Slate 900 */
+  --ink-light: #f8fafc;
+  /* Slate 50 */
+  --muted: #64748b;
+  /* Slate 500 */
+  --brand: #b91c1c;
+  /* Red 700 - Darker Red */
+  --brand-strong: #991b1b;
+  /* Red 800 */
+  --line: #e2e8f0;
+  /* Slate 200 */
+  --line-dark: #334155;
+  /* Slate 700 */
 }
 
 @theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --color-background: var(--bg);
+  --color-foreground: var(--ink);
+  --font-sans: var(--font-body);
+  --font-display: var(--font-display);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+* {
+  box-sizing: border-box;
 }
 
 body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  background-color: var(--bg);
+  color: var(--ink);
+  font-family: var(--font-body), system-ui, sans-serif;
+  min-height: 100vh;
 }
+
+::selection {
+  background: rgba(185, 28, 28, 0.4);
+  color: #ffffff;
+}
+
+@media (prefers-color-scheme: dark) {
+  ::selection {
+    background: rgba(239, 68, 68, 0.6);
+    color: #ffffff;
+  }
+}
+
+/* Infinite Scrolling Animation */
+@keyframes scroll {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-50%);
+  }
+}
+
+.animate-scroll {
+  animation: scroll 50s linear infinite;
+  will-change: transform;
+}
+
+.animate-scroll:hover {
+  animation-play-state: paused;
+}
+
+/* Ken Burns Effect - Fancy zoom for hero carousel */
+@keyframes ken-burns {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(1.1);
+  }
+}
+
+.animate-ken-burns {
+  animation: ken-burns 5s ease-out forwards;
+}
+
+/* Respect user's motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  .animate-scroll {
+    animation: none;
+    transform: none;
+  }
+  .animate-ken-burns {
+    animation: none;
+  }
+}