First Implementation

css/main.css

@@ -1,66 +1,63 @@
-/* 1. Gemeinsame Hintergrundfarbe für Header & Footer */
-/* Hinweis: Falls dein Footer eine andere Klasse hat, musst du diese ggf. ergänzen */
+/* ====================================
+   PUNKT 3: NAVIGATIONSELEMENTE (UPDATE LOGO)
+==================================== */
+
+/* 1. Header & Footer Farbabstimmung */
 nav, footer {
-  background-color: #1e293b; /* Modernes, dunkles Navy-Blau */
+  background-color: #1e293b; /* Das gewünschte dunkle Navy-Blau */
   color: #ffffff;
 }
 
-/* 2. Schriftart für die gesamte Navigation */
-nav {
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  padding: 15px 20px;
+/* 2. Das Logo (Spezial-Button) */
+nav a.logo {
+  display: inline-flex;
+  align-items: center;
+  background-color: transparent; /* Kein Hintergrund für das Logo */
+  padding: 5px;
+  margin-right: 20px; /* Mehr Platz zu den anderen Buttons */
+  transition: transform 0.2s ease;
 }
 
-/* 3. Button-Design (Navigationselemente) */
-nav a {
+/* Logo-Bild vergrößern */
+nav a.logo img {
+  height: 50px; /* Hier die Größe steuern (vorher meist ca. 30px) */
+  width: auto;
+  display: block;
+}
+
+nav a.logo:hover {
+  transform: scale(1.05); /* Dezentes Vergrößern beim Hover */
+  background-color: transparent; /* Verhindert, dass der Hover-Effekt der normalen Buttons greift */
+}
+
+/* 3. Die restlichen Navigations-Buttons */
+nav a:not(.logo) {
   display: inline-block;
   text-decoration: none;
-
-  /* Dein gewünschtes Blau - jetzt etwas kräftiger/moderner */
-  background-color: #3b82f6;
+  background-color: #3b82f6; /* Dein blaues Design */
   color: #ffffff;
-
-  /* Abstände & Rundungen */
   padding: 10px 18px;
   border-radius: 8px;
-
+  font-family: sans-serif;
   font-weight: 600;
   font-size: 0.95rem;
-
-  margin: 0 6px;
+  margin: 0 5px;
   transition: all 0.2s ease;
 }
 
-/* Hover-Effekt: Etwas heller glühen */
-nav a:hover {
+nav a:not(.logo):hover {
   background-color: #60a5fa;
-  transform: translateY(-2px); /* Kleiner "Lift"-Effekt */
+  transform: translateY(-2px);
 }
 
 /* 4. Spezial-Buttons (Anmelden & Registrieren) */
-/* Anmelden: Transparent mit Rahmen, um sich abzuheben */
 nav a.login {
-  background-color: transparent;
+  background-color: transparent !important;
   border: 2px solid #ffffff;
 }
 
-nav a.login:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-/* Registrieren: Ein leuchtendes Blau oder Weiß für maximalen Kontrast */
 nav a.register {
-  background-color: #ffffff;
-  color: #1e293b;
-}
+  background-color: #ffffff !important;
+  color: #1e293b !important;
 
-nav a.register:hover {
-  background-color: #f1f5f9;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-}
-
-/* 5. Barrierefreiheit */
-nav a:focus {
-  outline: 3px solid #fbbf24; /* Kontrastreicher Fokus-Ring */
-  outline-offset: 3px;
 }