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