First Implementation

css/main.css

@@ -1,59 +1,59 @@
-/* Grund-Design der Navigations-Links */
+/* 1. Einheitliche Schriftart für alle Nav-Elemente */
+nav, nav a, nav input, nav button {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-size: 15px;
+}
+
+/* 2. Gemeinsame Basis für alle Buttons (Größe & Form) */
 nav a {
   display: inline-block;
   text-decoration: none;
-  font-family: Arial, sans-serif;
-  font-weight: bold;
-  font-size: 14px;
-
-  /* Innenabstände für die Button-Optik */
-  padding: 8px 16px;
-
-  /* Abgerundete Ecken */
-  border-radius: 4px;
-
-  /* Standardfarben (Blau wie im Screenshot) */
-  background-color: #2563eb;
-  color: #ffffff;
-
-  /* Sanfter Übergang für Hover-Effekte */
-  transition: background-color 0.2s ease, transform 0.1s ease;
-
-  /* Trennung zwischen den Elementen */
-  margin: 0 4px;
+  padding: 10px 20px; /* Einheitliche Höhe und Breite */
+  border-radius: 6px;  /* Modernere, leicht abgerundete Ecken */
+  font-weight: 600;
+  transition: all 0.2s ease-in-out;
+  margin: 0 5px;
 }
 
-/* Hover-Zustand (wenn man mit der Maus drüberfährt) */
-nav a:hover {
-  background-color: #1d4ed8;
-  color: #ffffff;
+/* 3. Farbschema: Dunkelblau & Akzente */
+
+/* Die normalen Inhalts-Buttons (Informatik, Mathe etc.) */
+nav a:not(.login):not(.register) {
+  background-color: #334155; /* Elegantes Schieferblau */
+  color: #f8fafc;
 }
 
-/* Fokus-Zustand (Wichtig für Tastatur-Bedienung/Accessibility) */
-nav a:focus {
-  outline: 3px solid #f59e0b; /* Orangefarbener Ring */
-  outline-offset: 2px;
+nav a:not(.login):not(.register):hover {
+  background-color: #475569;
+  transform: translateY(-1px);
 }
 
-/* Aktiv-Zustand (beim Klicken) */
-nav a:active {
-  transform: scale(0.95);
-}
-
-/* Spezial-Klasse für den "Registrieren"-Button (Rot im Screenshot) */
-nav a.register {
-  background-color: #ef4444;
-}
-
-nav a.register:hover {
-  background-color: #dc2626;
-}
-
-/* Spezial-Klasse für den "Anmelden"-Button (Orange-Rot) */
+/* Der Anmelden-Button (Dezent) */
 nav a.login {
-  background-color: #f97316;
+  background-color: transparent;
+  color: #334155;
+  border: 2px solid #334155;
+  padding: 8px 18px; /* Ausgleich für die Border-Dicke */
 }
 
 nav a.login:hover {
-  background-color: #ea580c;
+  background-color: #f1f5f9;
+}
+
+/* Der Registrieren-Button (Der Haupt-Akzent) */
+nav a.register {
+  background-color: #2563eb; /* Ein klares, modernes Blau */
+  color: white;
+  box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
+}
+
+nav a.register:hover {
+  background-color: #1d4ed8;
+  box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3);
+}
+
+/* 4. Barrierefreiheit (Fokus-Zustand) */
+nav a:focus {
+  outline: 3px solid #60a5fa;
+  outline-offset: 3px;
 }