Design-Optimierung: Konsistentes Token-System, professionellere Animationen, Navy+Gold Farbschema

- CSS Custom Properties konsolidiert: Neues Token-System mit Navy/Gold Logo-Farben,
  Spacing-Grid (8px), Border-Radius und Z-Index Skala
- Unprofessionelle Animationen entfernt: Glitch, Neon, Morph, Orbit, Ripple
- PulseGlow und Shimmer dezenter gemacht (Gold-Akzente)
- Typografie: Inter als Hauptschrift, Bebas Neue nur für Hero-Titel
- Section-Konsistenz: Hero/Products auf Navy (#0A1832), Footer auf Navy-Dark
- Gold-Akzente in Products (Hover-Border, Feature-Bullets, Learn-More Button)
- Footer-Links mit Gold-Hover
- Card-Hover-Effekte subtiler (translateY -4px statt -10px + scale)
- Cookie-Consent auf globale Tokens umgestellt
- Mobile: Navy-BG, Gold-Hover statt Cyan

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

cookie-consent.css

@@ -4,22 +4,22 @@
  * Angepasst an Corporate Design (Rheinmetall Style)
  */
 
-/* === CSS Variables (AegisSight Brand) === */
+/* === CSS Variables (nutzt globale Tokens) === */
 :root {
-    --consent-primary: #0f72b5;      /* AegisSight Primary Blue */
+    --consent-primary: var(--color-navy, #0A1832);
-    --consent-primary-dark: #00406e; /* Dark Blue */
+    --consent-primary-dark: var(--color-navy-dark, #060F20);
-    --consent-gray-light: #f4f4f4;
+    --consent-gray-light: var(--color-gray-100, #f4f4f4);
-    --consent-white: #FFFFFF;
+    --consent-white: var(--color-white, #FFFFFF);
-    --consent-text-dark: #333333;
+    --consent-text-dark: var(--color-gray-800, #333333);
-    --consent-text-gray: #666666;
+    --consent-text-gray: var(--color-gray-600, #666666);
-    --consent-border: #e0e0e0;
+    --consent-border: var(--color-gray-200, #e0e0e0);
     --consent-shadow: 0 2px 8px rgba(0,0,0,0.1);
     --consent-shadow-hover: 0 8px 24px rgba(0,0,0,0.15);
 }
 
 /* === Demo Page Styling (AegisSight Style) === */
 body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     margin: 0;
     padding: 0;
     line-height: 1.6;
@@ -101,7 +101,7 @@ footer nav a:hover {
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
-    border-top: 1px solid rgba(15, 114, 181, 0.2);
+    border-top: 2px solid var(--color-gold, #C8A851);
     z-index: 9999;
     transform: translateY(100%);
     transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
@@ -156,7 +156,7 @@ footer nav a:hover {
 .consent-btn {
     padding: 0.75rem 1.5rem;
     border: none;
-    border-radius: 6px;
+    border-radius: var(--radius-md, 8px);
     font-size: 1rem;
     font-weight: 600;
     cursor: pointer;
@@ -182,12 +182,12 @@ footer nav a:hover {
 }
 
 .consent-btn-secondary {
-    background: #95a5a6;
+    background: var(--color-gray-600, #666666);
     color: white;
 }
 
 .consent-btn-secondary:hover {
-    background: #7f8c8d;
+    background: var(--color-gray-800, #333333);
 }
 
 .consent-btn-outline {
@@ -208,7 +208,7 @@ footer nav a:hover {
     left: 50%;
     transform: translate(-50%, -50%) scale(0.9);
     background: white;
-    border-radius: 12px;
+    border-radius: var(--radius-lg, 16px);
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
     z-index: 10000;
     max-width: 600px;
@@ -230,7 +230,7 @@ footer nav a:hover {
     background: linear-gradient(135deg, var(--consent-primary-dark) 0%, var(--consent-primary) 100%);
     color: white;
     padding: 1.5rem;
-    border-radius: 12px 12px 0 0;
+    border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -264,8 +264,8 @@ footer nav a:hover {
 
 /* Category Cards */
 .cookie-category {
-    border: 2px solid #e0e0e0;
+    border: 2px solid var(--consent-border);
-    border-radius: 8px;
+    border-radius: var(--radius-md, 8px);
     padding: 1rem;
     margin-bottom: 1rem;
     transition: border-color 0.2s ease;
@@ -314,7 +314,7 @@ footer nav a:hover {
 }
 
 .category-toggle.active {
-    background: var(--consent-primary);
+    background: var(--color-gold, #C8A851);
 }
 
 .category-toggle.active::after {

css/about-modern.css

@@ -2,10 +2,10 @@
 
 /* About Section Background */
 .about-section {
-    background: linear-gradient(135deg, #ffffff 0%, #f8fafb 100%);
+    background: linear-gradient(135deg, var(--color-white) 0%, var(--color-gray-50) 100%);
     position: relative;
     overflow: hidden;
-    padding: 100px 0;
+    padding: var(--space-4xl) 0;
 }
 
 .about-section::before {
@@ -15,7 +15,7 @@
     right: -20%;
     width: 60%;
     height: 60%;
-    background: radial-gradient(circle, rgba(15, 114, 181, 0.05) 0%, transparent 70%);
+    background: radial-gradient(circle, rgba(10, 24, 50, 0.04) 0%, transparent 70%);
     border-radius: 50%;
     animation: float-slow 20s ease-in-out infinite;
 }
@@ -47,7 +47,7 @@
 .about-tab {
     background: transparent;
     border: none;
-    color: #666;
+    color: var(--color-gray-600);
     padding: 15px 30px;
     cursor: pointer;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
@@ -67,7 +67,7 @@
     width: 0;
     height: 0;
     border-radius: 50px;
-    background: #0A1832;
+    background: var(--color-navy);
     transform: translate(-50%, -50%);
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     z-index: -1;
@@ -79,13 +79,13 @@
 }
 
 .about-tab.active {
-    color: #ffffff;
+    color: var(--color-white);
     transform: scale(1.05);
-    box-shadow: 0 8px 20px rgba(179, 150, 69, 0.3);
+    box-shadow: 0 8px 20px rgba(10, 24, 50, 0.3);
 }
 
 .about-tab:hover:not(.active) {
-    color: #B39645;
+    color: var(--color-gold-dark);
     transform: translateY(-2px);
     background: rgba(200, 168, 81, 0.08);
 }
@@ -163,12 +163,12 @@
 }
 
 .company-card:hover {
-    transform: translateX(10px);
+    transform: translateX(6px);
-    box-shadow: 0 15px 50px rgba(15, 114, 181, 0.15);
+    box-shadow: 0 12px 32px rgba(10, 24, 50, 0.1);
 }
 
 .company-card h4 {
-    color: #0f72b5;
+    color: var(--color-navy);
     font-size: 1.4rem;
     margin-bottom: 15px;
     display: flex;
@@ -277,9 +277,9 @@
 }
 
 .value-card:hover {
-    transform: translateY(-10px) scale(1.02);
+    transform: translateY(-4px);
-    box-shadow: 0 20px 60px rgba(15, 114, 181, 0.2);
+    box-shadow: 0 12px 32px rgba(10, 24, 50, 0.12);
-    border-color: #0A1832;
+    border-color: var(--color-navy);
 }
 
 .value-icon {
@@ -356,8 +356,8 @@
 }
 
 .competency-item:hover {
-    transform: translateX(20px);
+    transform: translateX(10px);
-    box-shadow: 0 10px 40px rgba(15, 114, 181, 0.15);
+    box-shadow: 0 8px 24px rgba(10, 24, 50, 0.1);
 }
 
 .competency-number {
@@ -398,9 +398,9 @@
 }
 
 .why-card:hover {
-    transform: translateY(-5px);
+    transform: translateY(-4px);
-    box-shadow: 0 15px 40px rgba(15, 114, 181, 0.15);
+    box-shadow: 0 12px 24px rgba(10, 24, 50, 0.1);
-    border-color: rgba(15, 114, 181, 0.3);
+    border-color: rgba(10, 24, 50, 0.2);
 }
 
 .why-icon {
@@ -458,7 +458,7 @@
 .why-card h4 {
     font-size: 1.6rem;
     margin-bottom: 20px;
-    color: #0f72b5;
+    color: var(--color-navy);
     text-align: center;
     font-weight: 700;
     text-transform: uppercase;
@@ -466,7 +466,7 @@
 }
 
 .why-card p {
-    color: #666;
+    color: var(--color-gray-600);
     line-height: 1.8;
     flex-grow: 1;
     text-align: center;

css/animations-enhanced.css

@@ -15,21 +15,6 @@
     border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-/* Premium Glow Effects */
-.glow-blue {
-    box-shadow: 
-        0 0 20px rgba(15, 114, 181, 0.5),
-        0 0 40px rgba(15, 114, 181, 0.3),
-        0 0 60px rgba(15, 114, 181, 0.1);
-}
-
-.text-glow {
-    text-shadow: 
-        0 0 10px rgba(15, 114, 181, 0.8),
-        0 0 20px rgba(15, 114, 181, 0.6),
-        0 0 30px rgba(15, 114, 181, 0.4);
-}
-
 /* Smooth Fade In Animations */
 @keyframes fadeInUp {
     from {
@@ -91,23 +76,22 @@
     animation: float 6s ease-in-out infinite;
 }
 
-/* Pulse Glow Animation */
+/* Pulse Glow Animation - Dezent */
 @keyframes pulseGlow {
     0%, 100% {
         box-shadow:
-            0 0 5px rgba(15, 114, 181, 0.5),
+            0 0 5px rgba(10, 24, 50, 0.2),
-            0 0 10px rgba(15, 114, 181, 0.3);
+            0 0 10px rgba(10, 24, 50, 0.1);
     }
     50% {
         box-shadow:
-            0 0 20px rgba(15, 114, 181, 0.8),
+            0 0 10px rgba(10, 24, 50, 0.3),
-            0 0 30px rgba(15, 114, 181, 0.5),
+            0 0 20px rgba(10, 24, 50, 0.15);
-            0 0 40px rgba(15, 114, 181, 0.3);
     }
 }
 
 .pulse-glow {
-    animation: pulseGlow 2s ease-in-out infinite;
+    animation: pulseGlow 3s ease-in-out infinite;
 }
 
 /* Gradient Animation */
@@ -120,10 +104,10 @@
 .gradient-animated {
     background: linear-gradient(
         -45deg,
-        #0f72b5,
+        var(--color-navy),
-        #00406e,
+        var(--color-navy-light),
-        #0f72b5,
+        var(--color-navy),
-        #1e90ff
+        var(--color-blue)
     );
     background-size: 400% 400%;
     animation: gradientShift 15s ease infinite;
@@ -143,49 +127,14 @@
     animation: textReveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
 }
 
-/* Typewriter Effect */
+/* Card Hover Effects - Subtil */
-@keyframes typewriter {
-    from { width: 0; }
-    to { width: 100%; }
-}
-
-@keyframes blink {
-    50% { border-color: transparent; }
-}
-
-.typewriter {
-    overflow: hidden;
-    white-space: nowrap;
-    border-right: 3px solid #0f72b5;
-    animation: 
-        typewriter 3s steps(40) forwards,
-        blink 0.75s step-end infinite;
-}
-
-/* Morphing Blob Background */
-@keyframes morph {
-    0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
-    50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
-    100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
-}
-
-.blob {
-    background: linear-gradient(45deg, #0f72b5, #00406e);
-    animation: morph 8s ease-in-out infinite;
-    filter: blur(40px);
-    opacity: 0.7;
-}
-
-/* Card Hover Effects */
 .card-hover-lift {
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .card-hover-lift:hover {
-    transform: translateY(-10px) scale(1.02);
+    transform: translateY(-4px);
-    box-shadow: 
+    box-shadow: 0 12px 24px rgba(10, 24, 50, 0.12);
-        0 20px 40px rgba(0, 0, 0, 0.15),
-        0 0 20px rgba(15, 114, 181, 0.3);
 }
 
 /* Magnetic Button Effect */
@@ -229,50 +178,6 @@
     transform: translateY(0);
 }
 
-/* Glitch Effect */
-@keyframes glitch {
-    0%, 100% {
-        text-shadow: 
-            0.05em 0 0 rgba(255, 0, 0, 0.75),
-            -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
-            0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
-    }
-    14% {
-        text-shadow: 
-            0.05em 0 0 rgba(255, 0, 0, 0.75),
-            -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
-            0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
-    }
-    15% {
-        text-shadow: 
-            -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
-            0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
-            -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
-    }
-    49% {
-        text-shadow: 
-            -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
-            0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
-            -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
-    }
-    50% {
-        text-shadow: 
-            0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
-            0.05em 0 0 rgba(0, 255, 0, 0.75),
-            0 -0.05em 0 rgba(0, 0, 255, 0.75);
-    }
-    99% {
-        text-shadow: 
-            0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
-            0.05em 0 0 rgba(0, 255, 0, 0.75),
-            0 -0.05em 0 rgba(0, 0, 255, 0.75);
-    }
-}
-
-.glitch {
-    animation: glitch 1s linear infinite;
-}
-
 /* Smooth Scroll Indicator */
 @keyframes scrollDown {
     0% {
@@ -295,7 +200,7 @@
     animation: scrollDown 2s infinite;
 }
 
-/* Loading Shimmer */
+/* Loading Shimmer - Für Gold-Akzente */
 @keyframes shimmer {
     0% {
         background-position: -1000px 0;
@@ -308,64 +213,10 @@
 .shimmer {
     background: linear-gradient(
         90deg,
-        rgba(255, 255, 255, 0) 0%,
+        rgba(200, 168, 81, 0) 0%,
-        rgba(255, 255, 255, 0.3) 50%,
+        rgba(200, 168, 81, 0.2) 50%,
-        rgba(255, 255, 255, 0) 100%
+        rgba(200, 168, 81, 0) 100%
     );
     background-size: 1000px 100%;
-    animation: shimmer 2s infinite;
+    animation: shimmer 3s infinite;
-}
-
-/* Orbit Animation */
-@keyframes orbit {
-    from { transform: rotate(0deg) translateX(100px) rotate(0deg); }
-    to { transform: rotate(360deg) translateX(100px) rotate(-360deg); }
-}
-
-.orbit {
-    animation: orbit 20s linear infinite;
-}
-
-/* Perspective Tilt */
-.tilt-card {
-    transform-style: preserve-3d;
-    transition: transform 0.5s;
-}
-
-.tilt-card:hover {
-    transform: perspective(1000px) rotateX(10deg) rotateY(-10deg) scale(1.05);
-}
-
-/* Neon Glow Text */
-.neon-text {
-    color: #fff;
-    text-shadow:
-        0 0 7px #fff,
-        0 0 10px #fff,
-        0 0 21px #fff,
-        0 0 42px #0f72b5,
-        0 0 82px #0f72b5,
-        0 0 92px #0f72b5,
-        0 0 102px #0f72b5,
-        0 0 151px #0f72b5;
-}
-
-/* Water Ripple Effect */
-@keyframes ripple {
-    0% {
-        transform: scale(0);
-        opacity: 1;
-    }
-    100% {
-        transform: scale(4);
-        opacity: 0;
-    }
-}
-
-.ripple::before {
-    content: '';
-    position: absolute;
-    border: 1px solid #0f72b5;
-    border-radius: 50%;
-    animation: ripple 1s ease-out;
 }

css/fonts.css

@@ -1,4 +1,10 @@
 /* Local Font Definitions - DSGVO-compliant */
+/*
+ * Schrift-Zuordnung:
+ * - Bebas Neue: Nur für Hero-Titel "SICHERHEIT MADE IN GERMANY" (Display)
+ * - Inter: Navigation, Überschriften, Fließtext, Buttons (alles andere)
+ * - System-Fonts: Nur als Fallback
+ */
 
 @font-face {
     font-family: 'Bebas Neue';

css/main.css

@@ -1,15 +1,64 @@
-/* Global Styles - Rheinmetall Design */
+/* Global Styles - AegisSight Corporate Design */
 :root {
-    --primary-blue: #0f72b5;
+    /* Primärfarben (Logo) */
-    --dark-blue: #00406e;
+    --color-navy: #0A1832;
-    --accent-gold: #C8A851;
+    --color-gold: #C8A851;
-    --light-gray: #f4f4f4;
+    --color-gold-light: #D4B96A;
-    --white: #FFFFFF;
+    --color-gold-dark: #B39645;
-    --text-dark: #333333;
+
-    --text-gray: #666666;
+    /* Navy-Abstufungen */
-    --border-gray: #e0e0e0;
+    --color-navy-light: #132844;
+    --color-navy-dark: #060F20;
+
+    /* Blau-Akzent (abgeleitet von Navy, für Links/Buttons) */
+    --color-blue: #0f72b5;
+    --color-blue-hover: #0d62a0;
+
+    /* Neutrale Farben */
+    --color-white: #FFFFFF;
+    --color-gray-50: #F8FAFB;
+    --color-gray-100: #f4f4f4;
+    --color-gray-200: #e0e0e0;
+    --color-gray-600: #666666;
+    --color-gray-800: #333333;
+
+    /* Spacing-System (8px-Grid) */
+    --space-xs: 8px;
+    --space-sm: 16px;
+    --space-md: 24px;
+    --space-lg: 32px;
+    --space-xl: 48px;
+    --space-2xl: 64px;
+    --space-3xl: 80px;
+    --space-4xl: 96px;
+
+    /* Border-Radius-System */
+    --radius-sm: 4px;
+    --radius-md: 8px;
+    --radius-lg: 16px;
+    --radius-xl: 24px;
+    --radius-pill: 100px;
+
+    /* Z-Index-Skala */
+    --z-content: 1;
+    --z-sticky: 100;
+    --z-overlay: 1000;
+    --z-modal: 9000;
+    --z-cookie: 10000;
+
+    /* Shadows */
     --shadow: 0 2px 8px rgba(0,0,0,0.1);
     --shadow-hover: 0 8px 24px rgba(0,0,0,0.15);
+
+    /* Legacy Aliases (für Rückwärtskompatibilität) */
+    --primary-blue: var(--color-blue);
+    --dark-blue: var(--color-blue-hover);
+    --accent-gold: var(--color-gold);
+    --light-gray: var(--color-gray-100);
+    --white: var(--color-white);
+    --text-dark: var(--color-gray-800);
+    --text-gray: var(--color-gray-600);
+    --border-gray: var(--color-gray-200);
 }
 
 * {
@@ -25,9 +74,9 @@
 }
 
 body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    background-color: #0a0f1c;
+    background-color: var(--color-navy);
-    color: var(--text-dark);
+    color: var(--color-gray-800);
     line-height: 1.6;
     overflow-x: hidden;
 }
@@ -56,11 +105,11 @@ h6 { font-size: 1.1rem; }
     font-size: 2.5rem;
     text-align: center;
     margin-bottom: 1rem;
-    color: var(--primary-blue);
+    color: var(--color-navy);
 }
 
 #about .section-title {
-    color: #0A1832;
+    color: var(--color-navy);
 }
 
 .section-subtitle {
@@ -95,7 +144,7 @@ h6 { font-size: 1.1rem; }
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     box-shadow: 0 1px 0 rgba(0,0,0,0.1);
-    z-index: 1000;
+    z-index: var(--z-overlay);
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
@@ -130,7 +179,7 @@ h6 { font-size: 1.1rem; }
 }
 
 .nav-menu a {
-    color: #001f3f;
+    color: var(--color-navy);
     text-decoration: none;
     font-weight: 700;
     font-size: 1.1rem;
@@ -142,7 +191,7 @@ h6 { font-size: 1.1rem; }
 }
 
 .nav-menu a:hover {
-    color: #0A1832;
+    color: var(--color-navy);
     transform: translateY(-2px);
 }
 
@@ -153,7 +202,7 @@ h6 { font-size: 1.1rem; }
     left: 0;
     width: 0;
     height: 2px;
-    background: #0A1832;
+    background: var(--color-navy);
     transition: width 0.3s ease;
 }
 
@@ -169,10 +218,10 @@ h6 { font-size: 1.1rem; }
 
 .lang-toggle {
     background: transparent;
-    border: 1px solid var(--border-gray);
+    border: 1px solid var(--color-gray-200);
-    color: #001f3f;
+    color: var(--color-navy);
     padding: 0.5rem 1rem;
-    border-radius: 4px;
+    border-radius: var(--radius-md);
     cursor: pointer;
     transition: all 0.3s ease;
     font-size: 0.9rem;
@@ -192,7 +241,7 @@ h6 { font-size: 1.1rem; }
 .secondary-button {
     padding: 0.75rem 1.5rem;
     border: none;
-    border-radius: 4px;
+    border-radius: var(--radius-md);
     font-weight: 500;
     cursor: pointer;
     transition: all 0.3s ease;
@@ -262,7 +311,7 @@ h6 { font-size: 1.1rem; }
     justify-content: center;
     position: relative;
     padding-top: 100px;
-    background: #000000;
+    background: var(--color-navy);
     overflow: hidden;
 }
 
@@ -274,7 +323,7 @@ h6 { font-size: 1.1rem; }
     width: 100%;
     height: 100%;
     z-index: 1;
-    background: #000000;
+    background: var(--color-navy);
 }
 
 /* Hero Videos */
@@ -352,12 +401,14 @@ h6 { font-size: 1.1rem; }
 
 .main-title {
     display: block;
+    font-family: 'Bebas Neue', sans-serif;
     font-size: clamp(3rem, 8vw, 7rem);
-    color: var(--white);
+    color: var(--color-white);
-    font-weight: 700;
+    font-weight: 400;
     margin-bottom: 1rem;
     line-height: 1.1;
     text-align: left;
+    letter-spacing: 2px;
 }
 
 .hero-text {
@@ -397,8 +448,8 @@ h6 { font-size: 1.1rem; }
 
 /* About Section */
 .about-section {
-    padding: 80px 0;
+    padding: var(--space-4xl) 0;
-    background: var(--white);
+    background: var(--color-white);
 }
 
 .about-tabs {
@@ -527,9 +578,9 @@ h6 { font-size: 1.1rem; }
 }
 
 .value-card {
-    background: var(--light-gray);
+    background: var(--color-gray-100);
-    border-radius: 12px;
+    border-radius: var(--radius-lg);
-    padding: 2rem;
+    padding: var(--space-lg);
     transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
     position: relative;
     overflow: hidden;
@@ -558,9 +609,9 @@ h6 { font-size: 1.1rem; }
 }
 
 .value-card:hover {
-    transform: translateY(-8px) scale(1.02);
+    transform: translateY(-4px);
-    box-shadow: 0 15px 40px rgba(15, 114, 181, 0.2);
+    box-shadow: 0 12px 24px rgba(10, 24, 50, 0.12);
-    background: linear-gradient(135deg, var(--light-gray) 0%, rgba(15, 114, 181, 0.05) 100%);
+    background: linear-gradient(135deg, var(--color-gray-100) 0%, rgba(10, 24, 50, 0.03) 100%);
 }
 
 .value-icon {
@@ -629,10 +680,10 @@ h6 { font-size: 1.1rem; }
 }
 
 .why-card {
-    background: var(--white);
+    background: var(--color-white);
-    border: 1px solid var(--border-gray);
+    border: 1px solid var(--color-gray-200);
-    border-radius: 12px;
+    border-radius: var(--radius-lg);
-    padding: 2rem;
+    padding: var(--space-lg);
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 2px 10px rgba(0,0,0,0.05);
     position: relative;
@@ -655,10 +706,10 @@ h6 { font-size: 1.1rem; }
 }
 
 .why-card:hover {
-    transform: translateY(-8px) scale(1.02);
+    transform: translateY(-4px);
-    box-shadow: 0 15px 35px rgba(15, 114, 181, 0.15);
+    box-shadow: 0 12px 24px rgba(10, 24, 50, 0.12);
-    border-color: var(--primary-blue);
+    border-color: var(--color-navy);
-    background: linear-gradient(135deg, var(--white) 0%, rgba(15, 114, 181, 0.02) 100%);
+    background: linear-gradient(135deg, var(--color-white) 0%, rgba(10, 24, 50, 0.02) 100%);
 }
 
 .why-card:hover .why-icon {
@@ -689,8 +740,8 @@ h6 { font-size: 1.1rem; }
 
 /* Products Section */
 .products-section {
-    padding: 80px 0;
+    padding: var(--space-4xl) 0;
-    background: var(--light-gray);
+    background: var(--color-gray-100);
 }
 
 .product-showcase {
@@ -767,10 +818,10 @@ h6 { font-size: 1.1rem; }
 }
 
 .tool-card {
-    background: var(--light-gray);
+    background: var(--color-gray-100);
-    border-radius: 12px;
+    border-radius: var(--radius-lg);
-    padding: 2rem;
+    padding: var(--space-lg);
-    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     cursor: pointer;
     position: relative;
     overflow: hidden;
@@ -794,10 +845,10 @@ h6 { font-size: 1.1rem; }
 }
 
 .tool-card:hover {
-    transform: translateY(-10px) rotateX(5deg) scale(1.02);
+    transform: translateY(-4px);
-    box-shadow: 0 20px 40px rgba(15, 114, 181, 0.25);
+    box-shadow: 0 12px 24px rgba(10, 24, 50, 0.15);
-    border-color: rgba(15, 114, 181, 0.3);
+    border-color: rgba(10, 24, 50, 0.2);
-    background: linear-gradient(135deg, var(--white) 0%, var(--light-gray) 100%);
+    background: linear-gradient(135deg, var(--color-white) 0%, var(--color-gray-100) 100%);
 }
 
 .tool-card:hover .tool-icon {
@@ -894,8 +945,8 @@ h6 { font-size: 1.1rem; }
 
 /* Contact Section */
 .contact-section {
-    padding: 80px 0;
+    padding: var(--space-4xl) 0;
-    background: var(--white);
+    background: var(--color-white);
 }
 
 .contact-grid {
@@ -928,11 +979,11 @@ h6 { font-size: 1.1rem; }
 
 .form-group input,
 .form-group textarea {
-    background: var(--white);
+    background: var(--color-white);
-    border: 1px solid var(--border-gray);
+    border: 1px solid var(--color-gray-200);
-    color: var(--text-dark);
+    color: var(--color-gray-800);
     padding: 0.75rem;
-    border-radius: 4px;
+    border-radius: var(--radius-md);
     transition: all 0.3s ease;
     font-family: inherit;
 }
@@ -1113,8 +1164,8 @@ h6 { font-size: 1.1rem; }
 
 /* Legal Section */
 .legal-section {
-    padding: 80px 0;
+    padding: var(--space-4xl) 0;
-    background: var(--light-gray);
+    background: var(--color-gray-100);
 }
 
 .legal-grid {
@@ -1124,9 +1175,9 @@ h6 { font-size: 1.1rem; }
 }
 
 .legal-card {
-    background: var(--white);
+    background: var(--color-white);
-    border-radius: 8px;
+    border-radius: var(--radius-lg);
-    padding: 2rem;
+    padding: var(--space-lg);
     box-shadow: var(--shadow);
 }
 
@@ -1151,8 +1202,8 @@ h6 { font-size: 1.1rem; }
 
 /* Footer */
 .footer {
-    background: #0a0f1c;
+    background: var(--color-navy-dark);
-    color: var(--white);
+    color: var(--color-white);
     padding: 3rem 0 1rem;
 }
 
@@ -1184,7 +1235,7 @@ h6 { font-size: 1.1rem; }
 }
 
 .footer-section a:hover {
-    color: var(--white);
+    color: var(--color-gold);
 }
 
 .copyright {

css/mobile.css

@@ -77,7 +77,7 @@
         display: block;
         width: 25px;
         height: 3px;
-        background: #0a0f1c;
+        background: var(--color-navy, #0A1832);
         transition: all 0.3s ease;
     }
     
@@ -102,7 +102,7 @@
         width: 80%;
         max-width: 300px;
         height: 100vh;
-        background: rgba(26, 31, 58, 0.98);
+        background: rgba(10, 24, 50, 0.98);
         backdrop-filter: blur(10px);
         transition: right 0.3s ease;
         z-index: 1000;
@@ -129,13 +129,13 @@
     }
     
     .mobile-menu-close:hover {
-        background: rgba(0, 212, 255, 0.1);
+        background: rgba(200, 168, 81, 0.15);
     }
     
     .mobile-menu-close svg {
         width: 24px;
         height: 24px;
-        stroke: #0a0f1c;
+        stroke: var(--color-white, #fff);
         stroke-width: 2;
     }
     
@@ -163,7 +163,7 @@
     }
     
     .nav-menu-mobile a:hover {
-        color: #00D4FF;
+        color: var(--color-gold, #C8A851);
     }
     
     /* Mobile Overlay */

css/products-modern.css

@@ -1,9 +1,9 @@
 /* Modern Products Section Design */
 
 .products-section {
-    background: #001f3f;
+    background: var(--color-navy);
     position: relative;
-    padding: 120px 0;
+    padding: var(--space-4xl) 0;
     overflow: hidden;
 }
 
@@ -16,9 +16,9 @@
     right: 0;
     bottom: 0;
     background:
-        radial-gradient(circle at 20% 50%, rgba(15, 114, 181, 0.1) 0%, transparent 50%),
+        radial-gradient(circle at 20% 50%, rgba(19, 40, 68, 0.3) 0%, transparent 50%),
-        radial-gradient(circle at 80% 50%, rgba(0, 64, 110, 0.1) 0%, transparent 50%),
+        radial-gradient(circle at 80% 50%, rgba(19, 40, 68, 0.2) 0%, transparent 50%),
-        radial-gradient(circle at 50% 100%, rgba(15, 114, 181, 0.05) 0%, transparent 50%);
+        radial-gradient(circle at 50% 100%, rgba(200, 168, 81, 0.05) 0%, transparent 50%);
     animation: backgroundShift 20s ease-in-out infinite;
 }
 
@@ -41,8 +41,8 @@
 }
 
 @keyframes titleGlow {
-    0%, 100% { text-shadow: 0 0 20px rgba(15, 114, 181, 0.5); }
+    0%, 100% { text-shadow: 0 0 15px rgba(200, 168, 81, 0.3); }
-    50% { text-shadow: 0 0 40px rgba(15, 114, 181, 0.8), 0 0 60px rgba(15, 114, 181, 0.4); }
+    50% { text-shadow: 0 0 25px rgba(200, 168, 81, 0.5), 0 0 40px rgba(200, 168, 81, 0.2); }
 }
 
 .products-section .section-subtitle {
@@ -72,8 +72,8 @@
 /* Product Card */
 .product-card {
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(245, 245, 245, 0.95));
-    border: 1px solid rgba(15, 114, 181, 0.3);
+    border: 1px solid rgba(200, 168, 81, 0.3);
-    border-radius: 20px;
+    border-radius: var(--radius-lg);
     padding: 0;
     position: relative;
     overflow: visible;
@@ -105,20 +105,19 @@
 }
 
 .product-card:hover {
-    transform: translateY(-10px) scale(1.02);
+    transform: translateY(-6px);
     background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(250, 250, 250, 1));
-    border-color: rgba(15, 114, 181, 0.5);
+    border-color: var(--color-gold);
     box-shadow:
-        0 30px 60px rgba(0, 0, 0, 0.4),
+        0 20px 40px rgba(0, 0, 0, 0.3),
-        0 0 80px rgba(15, 114, 181, 0.15),
+        0 0 40px rgba(200, 168, 81, 0.1);
-        inset 0 0 20px rgba(15, 114, 181, 0.03);
 }
 
 /* Product Header */
 .product-header {
     padding: 40px 40px 30px;
-    background: linear-gradient(135deg, rgba(15, 114, 181, 0.15) 0%, transparent 50%);
+    background: linear-gradient(135deg, rgba(10, 24, 50, 0.1) 0%, transparent 50%);
-    border-bottom: 1px solid rgba(15, 114, 181, 0.25);
+    border-bottom: 1px solid rgba(200, 168, 81, 0.2);
     display: grid;
     grid-template-columns: 80px 1fr;
     align-items: center;
@@ -139,16 +138,16 @@
     position: absolute;
     width: 100%;
     height: 100%;
-    background: linear-gradient(135deg, #0A1832, #0f72b5);
+    background: linear-gradient(135deg, var(--color-navy), var(--color-gold));
-    border-radius: 20px;
+    border-radius: var(--radius-lg);
     opacity: 0.1;
     transition: all 0.5s;
 }
 
 .product-card:hover .product-icon-bg {
-    opacity: 0.3;
+    opacity: 0.25;
-    transform: rotate(10deg) scale(1.1);
+    transform: rotate(5deg) scale(1.05);
-    background: linear-gradient(135deg, #0A1832, #1e3a5f);
+    background: linear-gradient(135deg, var(--color-navy), var(--color-gold-dark));
 }
 
 .product-icon {
@@ -188,7 +187,7 @@
 }
 
 .product-card:hover .product-title {
-    color: #0f72b5;
+    color: var(--color-navy);
 }
 
 .product-tagline {
@@ -234,7 +233,7 @@
     content: '▸';
     position: absolute;
     left: 0;
-    color: #0f72b5;
+    color: var(--color-gold);
     font-size: 1.2rem;
     transition: all 0.3s;
 }
@@ -245,15 +244,15 @@
 }
 
 .product-card:hover .product-features li::before {
-    color: #1e90ff;
+    color: var(--color-gold-light);
     transform: translateX(3px);
 }
 
 /* Product Footer */
 .product-footer {
     padding: 30px 40px;
-    background: rgba(15, 114, 181, 0.08);
+    background: rgba(10, 24, 50, 0.05);
-    border-top: 1px solid rgba(15, 114, 181, 0.2);
+    border-top: 1px solid rgba(200, 168, 81, 0.2);
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -285,9 +284,9 @@
 
 /* Learn More Button */
 .product-learn-more {
-    background: #C8A851;
+    background: var(--color-gold);
-    border: 2px solid #C8A851;
+    border: 2px solid var(--color-gold);
-    color: #0a0f1c;
+    color: var(--color-navy);
     padding: 10px 25px;
     border-radius: 50px;
     cursor: pointer;
@@ -307,7 +306,7 @@
     left: 50%;
     width: 0;
     height: 0;
-    background: #0a0f1c;
+    background: var(--color-navy);
     transform: translate(-50%, -50%);
     transition: all 0.5s;
     border-radius: 50px;
@@ -319,8 +318,8 @@
 }
 
 .product-learn-more:hover {
-    color: #C8A851;
+    color: var(--color-gold);
-    border-color: #C8A851;
+    border-color: var(--color-gold);
     transform: translateY(-2px);
     box-shadow: 0 10px 30px rgba(200, 168, 81, 0.3);
 }
@@ -373,8 +372,8 @@
 .tools-grid .tool-card:hover {
     transform: translateY(-3px);
     background: rgba(0, 0, 0, 0.05);
-    border-color: rgba(15, 114, 181, 0.3);
+    border-color: rgba(200, 168, 81, 0.3);
-    box-shadow: 0 5px 15px rgba(15, 114, 181, 0.15);
+    box-shadow: 0 5px 15px rgba(10, 24, 50, 0.1);
 }
 
 .tools-grid .tool-icon {
@@ -395,7 +394,7 @@
 }
 
 .tools-grid h4 {
-    color: #1a1a1a;
+    color: var(--color-navy);
     font-size: 1.2rem;
     margin-bottom: 15px;
     font-weight: 600;
@@ -419,7 +418,7 @@
     content: '▸';
     position: absolute;
     left: 0;
-    color: #1e90ff;
+    color: var(--color-gold);
     font-weight: bold;
 }
 
@@ -451,7 +450,7 @@
 
 .particle {
     position: absolute;
-    background: rgba(15, 114, 181, 0.3);
+    background: rgba(200, 168, 81, 0.3);
     border-radius: 50%;
     pointer-events: none;
 }

css/section-transitions.css

@@ -104,7 +104,7 @@
     position: absolute;
     width: 100%;
     height: 100%;
-    background: linear-gradient(135deg, #0f72b5, #00406e);
+    background: linear-gradient(135deg, var(--color-blue), var(--color-blue-hover));
     opacity: 0.1;
     border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
     animation: morphBlob 20s ease-in-out infinite;
@@ -140,7 +140,7 @@
     position: absolute;
     width: 4px;
     height: 4px;
-    background: #0f72b5;
+    background: var(--color-blue);
     border-radius: 50%;
     opacity: 0.6;
 }
@@ -213,8 +213,8 @@
     background: linear-gradient(
         135deg,
         transparent 33.33%,
-        #0f72b5 33.33%,
+        var(--color-blue) 33.33%,
-        #0f72b5 66.66%,
+        var(--color-blue) 66.66%,
         transparent 66.66%
     );
     background-size: 30px 60px;
@@ -235,7 +235,7 @@
 .flow-line {
     position: absolute;
     height: 2px;
-    background: linear-gradient(90deg, transparent, #0f72b5, transparent);
+    background: linear-gradient(90deg, transparent, var(--color-blue), transparent);
     animation: flowLine 6s infinite;
 }
 
@@ -330,7 +330,7 @@
 /* Animated Border */
 .animated-border {
     position: relative;
-    padding: 80px 0;
+    padding: var(--space-4xl) 0;
 }
 
 .animated-border::before,
@@ -343,8 +343,8 @@
     background: linear-gradient(
         90deg,
         transparent,
-        #0f72b5 20%,
+        var(--color-blue) 20%,
-        #0f72b5 80%,
+        var(--color-blue) 80%,
         transparent
     );
 }

js/animations-enhanced.js

@@ -125,29 +125,9 @@ const EnhancedAnimations = {
         }
     },
 
-    // 3D card tilt effect
+    // Card tilt removed - zu verspielt für Behördenkontext
     initCardTilt() {
-        const cards = document.querySelectorAll('.tool-card, .value-card, .why-card');
+        // Deaktiviert - CSS hover-Effekte reichen aus
-        
-        cards.forEach(card => {
-            card.addEventListener('mousemove', (e) => {
-                const rect = card.getBoundingClientRect();
-                const x = e.clientX - rect.left;
-                const y = e.clientY - rect.top;
-                
-                const centerX = rect.width / 2;
-                const centerY = rect.height / 2;
-                
-                const rotateX = (y - centerY) / 10;
-                const rotateY = (centerX - x) / 10;
-                
-                card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.02)`;
-            });
-            
-            card.addEventListener('mouseleave', () => {
-                card.style.transform = '';
-            });
-        });
     },
 
     // Custom cursor effects - DISABLED