First Implementation

css/main.css

@@ -1,25 +1,22 @@
 * {
-  box-sizing: border-box;
-}
-
-/* =========================
-   Farben
-========================= */
-
   :root {
-  --bg: #eef2f7;
+    --bg: #f1f5f9; /* etwas weniger „blau-stichig“, ruhiger Hintergrund */
     --white: #ffffff;
 
-  --nav: #1e293b;
+    /* Navigation: dunkler für besseren Kontrast */
-  --nav-hover: #334155;
+    --nav: #0f172a;
+    --nav-hover: #1e293b;
 
-  --primary: #2563eb;
+    /* Primary: etwas dunkler für besseren Kontrast auf Weiß */
-  --primary-hover: #1d4ed8;
+    --primary: #1d4ed8;
+    --primary-hover: #1e40af;
 
-  --text: #1e293b;
+    /* Text: deutlich dunkler (wichtig für Accessibility) */
-  --text-light: #64748b;
+    --text: #0f172a;
+    --text-light: #334155;
 
-  --border: #dbe4ee;
+    /* Border: etwas stärker sichtbar */
+    --border: #cbd5e1;
   }
 
   /* =========================
@@ -33,58 +30,40 @@ body {
   }
 
   /* =========================
-   Header
+     Header / Nav
-========================= */
-
-header {
-  background-color: var(--nav);
-}
-
-/* =========================
-   Logo / Bild
-========================= */
-
-header img {
-  object-fit: cover;
-  background-color: white;
-  border-radius: 14px;
-}
-
-/* =========================
-   Navigation
   ========================= */
 
+  header,
   nav {
     background-color: var(--nav);
   }
 
+  /* =========================
+     Links
+  ========================= */
+
+  a {
+    color: var(--primary);
+    transition: 0.25s ease;
+  }
+
+  a:hover {
+    color: var(--primary-hover);
+    text-decoration: underline; /* wichtig für Screenreader + Klarheit */
+  }
+
+  /* =========================
+     Navigation Links
+  ========================= */
+
   nav a {
-  text-decoration: none;
+    color: #f8fafc;
-  color: #f1f5f9;
-  font-weight: 600;
     border-radius: 10px;
-  transition: 0.3s ease;
   }
 
   nav a:hover {
     background-color: var(--nav-hover);
-  color: white;
+    color: #ffffff;
-}
-
-/* =========================
-   Suchfeld
-========================= */
-
-input[type="text"],
-input[type="search"] {
-  border: 1px solid var(--border);
-  background-color: white;
-  font-size: 1rem;
-  border-radius: 12px;
-}
-
-input:focus {
-  border-color: var(--primary);
   }
 
   /* =========================
@@ -94,47 +73,37 @@ input:focus {
   button {
     background-color: var(--primary);
     color: white;
-  border: none;
-  font-size: 1rem;
-  font-weight: 600;
-  cursor: pointer;
-
     border-radius: 12px;
-
+    font-weight: 600;
     transition: 0.25s ease;
   }
 
-/* Hover Bewegung */
+  /* klarer Hover-Kontrast */
+
   button:hover {
     background-color: var(--primary-hover);
     transform: translateY(-2px);
   }
 
-/* Klick-Effekt */
+  /* Tastatur-Fokus (SEHR wichtig für Accessibility) */
-button:active {
+
-  transform: translateY(0px);
+  button:focus,
+  nav a:focus,
+  input:focus {
+    outline: 3px solid #93c5fd;
+    outline-offset: 2px;
   }
 
   /* =========================
-   Hauptinhalt
+     Inputs
   ========================= */
 
-main {
+  input[type="text"],
-  background-color: var(--white);
+  input[type="search"] {
-  border-radius: 24px;
+    border: 1px solid var(--border);
-}
+    border-radius: 12px;
-
+    background-color: white;
-/* =========================
+    color: var(--text);
-   Überschriften
-========================= */
-
-h1 {
-  color: var(--primary);
-  font-size: 3.5rem;
-}
-
-h2 {
-  color: var(--primary);
   }
 
   /* =========================
@@ -146,34 +115,4 @@ p {
     line-height: 1.8;
     font-size: 1.08rem;
   }
-
-/* =========================
-   Links
-========================= */
-
-a {
-  color: var(--primary);
-  transition: 0.3s ease;
-}
-
-a:hover {
-  color: var(--primary-hover);
-}
-
-/* =========================
-   Footer
-========================= */
-
-footer {
-  background-color: var(--white);
-}
-
-footer a {
-  text-decoration: none;
-  color: var(--text-light);
-  font-weight: 500;
-}
-
-footer a:hover {
-  color: var(--primary);
 }