diff --git a/css/main.css b/css/main.css index 880d180..36f7ba4 100644 --- a/css/main.css +++ b/css/main.css @@ -1,59 +1,66 @@ -/* 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; +/* 1. Gemeinsame Hintergrundfarbe für Header & Footer */ +/* Hinweis: Falls dein Footer eine andere Klasse hat, musst du diese ggf. ergänzen */ +nav, footer { + background-color: #1e293b; /* Modernes, dunkles Navy-Blau */ + color: #ffffff; } -/* 2. Gemeinsame Basis für alle Buttons (Größe & Form) */ +/* 2. Schriftart für die gesamte Navigation */ +nav { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + padding: 15px 20px; +} + +/* 3. Button-Design (Navigationselemente) */ nav a { display: inline-block; text-decoration: none; - padding: 10px 20px; /* Einheitliche Höhe und Breite */ - border-radius: 6px; /* Modernere, leicht abgerundete Ecken */ + + /* Dein gewünschtes Blau - jetzt etwas kräftiger/moderner */ + background-color: #3b82f6; + color: #ffffff; + + /* Abstände & Rundungen */ + padding: 10px 18px; + border-radius: 8px; + font-weight: 600; - transition: all 0.2s ease-in-out; - margin: 0 5px; + font-size: 0.95rem; + + margin: 0 6px; + transition: all 0.2s ease; } -/* 3. Farbschema: Dunkelblau & Akzente */ - -/* Die normalen Inhalts-Buttons (Informatik, Mathe etc.) */ -nav a:not(.login):not(.register) { - background-color: #334155; /* Elegantes Schieferblau */ - color: #f8fafc; +/* Hover-Effekt: Etwas heller glühen */ +nav a:hover { + background-color: #60a5fa; + transform: translateY(-2px); /* Kleiner "Lift"-Effekt */ } -nav a:not(.login):not(.register):hover { - background-color: #475569; - transform: translateY(-1px); -} - -/* Der Anmelden-Button (Dezent) */ +/* 4. Spezial-Buttons (Anmelden & Registrieren) */ +/* Anmelden: Transparent mit Rahmen, um sich abzuheben */ nav a.login { background-color: transparent; - color: #334155; - border: 2px solid #334155; - padding: 8px 18px; /* Ausgleich für die Border-Dicke */ + border: 2px solid #ffffff; } nav a.login:hover { - background-color: #f1f5f9; + background-color: rgba(255, 255, 255, 0.1); } -/* Der Registrieren-Button (Der Haupt-Akzent) */ +/* Registrieren: Ein leuchtendes Blau oder Weiß für maximalen Kontrast */ nav a.register { - background-color: #2563eb; /* Ein klares, modernes Blau */ - color: white; - box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2); + background-color: #ffffff; + color: #1e293b; } nav a.register:hover { - background-color: #1d4ed8; - box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3); + background-color: #f1f5f9; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } -/* 4. Barrierefreiheit (Fokus-Zustand) */ +/* 5. Barrierefreiheit */ nav a:focus { - outline: 3px solid #60a5fa; + outline: 3px solid #fbbf24; /* Kontrastreicher Fokus-Ring */ outline-offset: 3px; } \ No newline at end of file