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>

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);
-    box-shadow: 0 15px 50px rgba(15, 114, 181, 0.15);
+    transform: translateX(6px);
+    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);
-    box-shadow: 0 20px 60px rgba(15, 114, 181, 0.2);
-    border-color: #0A1832;
+    transform: translateY(-4px);
+    box-shadow: 0 12px 32px rgba(10, 24, 50, 0.12);
+    border-color: var(--color-navy);
 }
 
 .value-icon {
@@ -356,8 +356,8 @@
 }
 
 .competency-item:hover {
-    transform: translateX(20px);
-    box-shadow: 0 10px 40px rgba(15, 114, 181, 0.15);
+    transform: translateX(10px);
+    box-shadow: 0 8px 24px rgba(10, 24, 50, 0.1);
 }
 
 .competency-number {
@@ -398,9 +398,9 @@
 }
 
 .why-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 15px 40px rgba(15, 114, 181, 0.15);
-    border-color: rgba(15, 114, 181, 0.3);
+    transform: translateY(-4px);
+    box-shadow: 0 12px 24px rgba(10, 24, 50, 0.1);
+    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;