First Implementation

css/main.css

@@ -5,25 +5,34 @@
   box-sizing: border-box;
 }
 
-/* Farben */
+/* =========================
+   Farben
+========================= */
 
 :root {
+  --bg: #eef2f7;
+  --white: #ffffff;
+
+  --nav: #1e293b;
+  --nav-hover: #334155;
+
   --primary: #2563eb;
-  --primary-dark: #1d4ed8;
+  --primary-hover: #1d4ed8;
-  --background: #f4f7fb;
+
-  --surface: #ffffff;
   --text: #1e293b;
   --text-light: #64748b;
-  --border: #dbe3ec;
+
+  --border: #dbe4ee;
 }
 
-/* Grundlayout */
+/* =========================
+   Body
+========================= */
 
 body {
   font-family: "Segoe UI", Arial, sans-serif;
-  background-color: var(--background);
+  background-color: var(--bg);
   color: var(--text);
-  line-height: 1.6;
 }
 
 /* =========================
@@ -31,10 +40,32 @@ body {
 ========================= */
 
 header {
-  background-color: var(--surface);
+
-  padding: 18px 40px;
+  background-color: var(--nav);
-  border-bottom: 1px solid var(--border);
+
-  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+  padding: 14px 40px;
+
+  border-bottom: 1px solid rgba(255,255,255,0.08);
+
+  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
+}
+
+/* =========================
+   Logo / Bild
+========================= */
+
+header img {
+
+  width: 70px;
+  height: 70px;
+
+  object-fit: cover;
+
+  border-radius: 14px;
+
+  background-color: white;
+
+  padding: 4px;
 }
 
 /* =========================
@@ -42,97 +73,36 @@ header {
 ========================= */
 
 nav {
-  background-color: var(--surface);
+
-  padding: 15px 40px;
+  background-color: var(--nav);
-  border-bottom: 1px solid var(--border);
+
+  padding: 16px 40px;
+
+  border-top: 1px solid rgba(255,255,255,0.05);
 }
 
 nav a {
+
   text-decoration: none;
-  color: var(--text);
+
+  color: #f1f5f9;
+
   font-weight: 600;
-  margin-right: 20px;
+
-  padding: 10px 16px;
+  margin-right: 18px;
+
+  padding: 10px 18px;
+
   border-radius: 10px;
-  transition: 0.3s;
+
+  transition: 0.3s ease;
 }
 
 nav a:hover {
-  background-color: #e8f0ff;
-  color: var(--primary);
-}
 
-/* =========================
+  background-color: var(--nav-hover);
-   Überschriften
-========================= */
 
-h1 {
-  font-size: 3rem;
-  margin-bottom: 20px;
-  color: var(--primary);
-}
-
-h2 {
-  font-size: 1.8rem;
-  margin-bottom: 15px;
-  color: var(--primary-dark);
-}
-
-h3 {
-  margin-bottom: 10px;
-  color: var(--text);
-}
-
-/* =========================
-   Hauptinhalt
-========================= */
-
-main {
-  background-color: var(--surface);
-  margin: 40px;
-  padding: 40px;
-  border-radius: 18px;
-  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
-}
-
-/* Texte */
-
-p {
-  margin-bottom: 18px;
-  color: var(--text-light);
-  font-size: 1.05rem;
-}
-
-/* =========================
-   Links
-========================= */
-
-a {
-  color: var(--primary);
-  transition: 0.3s;
-}
-
-a:hover {
-  color: var(--primary-dark);
-}
-
-/* =========================
-   Buttons
-========================= */
-
-button {
-  background-color: var(--primary);
   color: white;
-  border: none;
-  padding: 12px 22px;
-  border-radius: 10px;
-  font-size: 1rem;
-  cursor: pointer;
-  transition: 0.3s;
-}
-
-button:hover {
-  background-color: var(--primary-dark);
 }
 
 /* =========================
@@ -142,25 +112,120 @@ button:hover {
 input[type="text"],
 input[type="search"] {
 
-  padding: 10px 14px;
+  padding: 11px 16px;
+
+  border-radius: 12px;
+
   border: 1px solid var(--border);
-  border-radius: 10px;
+
-  font-size: 1rem;
   background-color: white;
+
+  font-size: 1rem;
 }
 
 input:focus {
+
   outline: none;
+
   border-color: var(--primary);
 }
 
 /* =========================
-   Bilder
+   Buttons
 ========================= */
 
-img {
+button {
-  border-radius: 14px;
+
-  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
+  background-color: var(--primary);
+
+  color: white;
+
+  border: none;
+
+  padding: 11px 22px;
+
+  border-radius: 12px;
+
+  font-size: 1rem;
+
+  font-weight: 600;
+
+  cursor: pointer;
+
+  transition: 0.3s ease;
+}
+
+button:hover {
+
+  background-color: var(--primary-hover);
+}
+
+/* =========================
+   Hauptinhalt
+========================= */
+
+main {
+
+  background-color: var(--white);
+
+  margin: 40px;
+
+  padding: 50px;
+
+  border-radius: 24px;
+
+  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
+}
+
+/* =========================
+   Überschriften
+========================= */
+
+h1 {
+
+  color: var(--primary);
+
+  font-size: 3.5rem;
+
+  margin-bottom: 30px;
+}
+
+h2 {
+
+  color: var(--primary);
+
+  margin-bottom: 12px;
+}
+
+/* =========================
+   Texte
+========================= */
+
+p {
+
+  color: var(--text-light);
+
+  line-height: 1.8;
+
+  margin-bottom: 25px;
+
+  font-size: 1.08rem;
+}
+
+/* =========================
+   Links
+========================= */
+
+a {
+
+  color: var(--primary);
+
+  transition: 0.3s ease;
+}
+
+a:hover {
+
+  color: var(--primary-hover);
 }
 
 /* =========================
@@ -168,14 +233,30 @@ img {
 ========================= */
 
 footer {
-  background-color: var(--surface);
+
+  margin-top: 50px;
+
+  background-color: var(--white);
+
   border-top: 1px solid var(--border);
-  padding: 25px;
+
+  padding: 30px;
+
   text-align: center;
-  margin-top: 40px;
 }
 
 footer a {
-  margin: 0 10px;
+
   text-decoration: none;
+
+  margin: 0 14px;
+
+  color: var(--text-light);
+
+  font-weight: 500;
+}
+
+footer a:hover {
+
+  color: var(--primary);
 }