First Implementation

css/main.css

@@ -1,79 +1,59 @@
-/* 1. SCHRIFTART & HINTERGRUND */
-body {
-  font-family: Arial, Helvetica, sans-serif;
-  background-color: #f0f4f8; /* Heller, sauberer Hintergrund */
-  color: #333;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-
-/* 2. BUTTONS (in der Nav) */
+/* Grund-Design der Navigations-Links */
 nav a {
   display: inline-block;
   text-decoration: none;
-  background-color: #2563eb; /* Blau */
-  color: white;
-  padding: 10px 20px;
-  border-radius: 5px;
+  font-family: Arial, sans-serif;
   font-weight: bold;
-  transition: background 0.3s;
+  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;
 }
 
+/* Hover-Zustand (wenn man mit der Maus drüberfährt) */
 nav a:hover {
-  background-color: #1d4ed8; /* Dunkleres Blau bei Hover */
+  background-color: #1d4ed8;
+  color: #ffffff;
 }
 
-/* 3. RESPONSIVE NAVIGATION */
-nav {
-  background-color: white;
-  padding: 1rem;
-  display: flex;
-  justify-content: center;
-  gap: 15px;
-  border-bottom: 1px solid #ddd;
+/* Fokus-Zustand (Wichtig für Tastatur-Bedienung/Accessibility) */
+nav a:focus {
+  outline: 3px solid #f59e0b; /* Orangefarbener Ring */
+  outline-offset: 2px;
 }
 
-@media (max-width: 600px) {
-  nav {
-    flex-direction: column; /* Stapelt Buttons auf Handys */
-    align-items: center;
-  }
-
-  nav a {
-    width: 80%; /* Buttons werden auf Handy breiter */
-    text-align: center;
-  }
+/* Aktiv-Zustand (beim Klicken) */
+nav a:active {
+  transform: scale(0.95);
 }
 
-/* 4. CONTENT BEREICH (Main) */
-main {
-  flex: 1;
-  padding: 20px;
-  max-width: 800px;
-  margin: 0 auto;
+/* Spezial-Klasse für den "Registrieren"-Button (Rot im Screenshot) */
+nav a.register {
+  background-color: #ef4444;
 }
 
-/* 5. RESPONSIVE FOOTER */
-footer {
-  background-color: #1e293b; /* Dunkles Grau/Blau */
-  color: white;
-  padding: 20px;
-  display: flex;
-  justify-content: space-around;
-  flex-wrap: wrap;
-  gap: 10px;
+nav a.register:hover {
+  background-color: #dc2626;
 }
 
-footer a {
-  color: #fbbf24; /* Akzentfarbe für Links im Footer */
-  text-decoration: none;
+/* Spezial-Klasse für den "Anmelden"-Button (Orange-Rot) */
+nav a.login {
+  background-color: #f97316;
 }
 
-@media (max-width: 480px) {
-  footer {
-    flex-direction: column;
-    text-align: center;
-  }
+nav a.login:hover {
+  background-color: #ea580c;
 }