First Implementation

css/main.css

@@ -1,29 +1,26 @@
+* {
   * {
     box-sizing: border-box;
   }
 
   /* =========================
-   Farben (HIGH CONTRAST)
+     Farben
   ========================= */
 
   :root {
-  --bg: #f1f5f9;
+    --bg: #eef2f7;
     --white: #ffffff;
 
-  /* Navigation dunkler für mehr Kontrast */
+    --nav: #1e293b;
-  --nav: #0f172a;
+    --nav-hover: #334155;
-  --nav-hover: #1e293b;
 
-  /* kräftigeres Blau */
+    --primary: #2563eb;
-  --primary: #1d4ed8;
+    --primary-hover: #1d4ed8;
-  --primary-hover: #1e40af;
 
-  /* Text deutlich dunkler */
+    --text: #1e293b;
-  --text: #0b1220;
+    --text-light: #64748b;
-  --text-light: #1f2937;
 
-  /* klarere Borders */
+    --border: #dbe4ee;
-  --border: #cbd5e1;
   }
 
   /* =========================
@@ -64,7 +61,7 @@ nav {
 
   nav a {
     text-decoration: none;
-  color: #f8fafc; /* heller für starken Kontrast */
+    color: #f1f5f9;
     font-weight: 600;
     border-radius: 10px;
     transition: 0.3s ease;
@@ -72,7 +69,7 @@ nav a {
 
   nav a:hover {
     background-color: var(--nav-hover);
-  color: #ffffff;
+    color: white;
   }
 
   /* =========================
@@ -85,12 +82,10 @@ input[type="search"] {
     background-color: white;
     font-size: 1rem;
     border-radius: 12px;
-  color: var(--text);
   }
 
   input:focus {
     border-color: var(--primary);
-  outline: 3px solid #93c5fd;
   }
 
   /* =========================
@@ -106,20 +101,21 @@ button {
     cursor: pointer;
 
     border-radius: 12px;
+
     transition: 0.25s ease;
   }
 
   /* Hover Bewegung */
+
   button:hover {
     background-color: var(--primary-hover);
     transform: translateY(-2px);
   }
 
-/* Tastatur-Fokus (wichtig für Accessibility) */
+  /* Klick-Effekt */
-button:focus,
+
-nav a:focus {
+  button:active {
-  outline: 3px solid #93c5fd;
+    transform: translateY(0px);
-  outline-offset: 2px;
   }
 
   /* =========================
@@ -165,7 +161,6 @@ a {
 
   a:hover {
     color: var(--primary-hover);
-  text-decoration: underline;
   }
 
   /* =========================
@@ -185,3 +180,4 @@ footer a {
   footer a:hover {
     color: var(--primary);
   }
+}