diff --git a/css/main.css b/css/main.css index 36f7ba4..a240f4c 100644 --- a/css/main.css +++ b/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; } \ No newline at end of file