From 9d5a76973b5a1d2226c99135169beddb8b54f982 Mon Sep 17 00:00:00 2001 From: caroschulte02-alt Date: Tue, 12 May 2026 21:56:26 +0200 Subject: [PATCH 01/17] First Implementation --- css/main.css | 182 ++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 181 insertions(+), 1 deletion(-) diff --git a/css/main.css b/css/main.css index c9f08fb..46b14bd 100644 --- a/css/main.css +++ b/css/main.css @@ -1,3 +1,183 @@ +/* ==================================== + RESET +==================================== */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* ==================================== + BODY +==================================== */ body { - background-color: coral; + font-family: Arial, Helvetica, sans-serif; + color: #1f2937; + line-height: 1.6; + + background: linear-gradient( + 135deg, + #eef2ff, + #f8fafc + ); + + min-height: 100vh; + + /* sorgt dafür, dass Footer unten bleibt */ + display: flex; + flex-direction: column; +} + +/* ==================================== + NAVIGATION +==================================== */ +nav { + display: flex; + justify-content: center; + gap: 1rem; + flex-wrap: wrap; + + padding: 1.5rem; + + background: white; + box-shadow: 0 3px 10px rgba(0,0,0,0.08); +} + +nav div a { + display: block; + text-decoration: none; + + background: #2563eb; + color: white; + + padding: 0.9rem 1.4rem; + + border-radius: 30px; + + font-weight: bold; + + transition: all 0.3s ease; +} + +nav div a:hover, +nav div a:focus { + background: #1d4ed8; + transform: translateY(-2px); + + outline: 3px solid #f59e0b; + outline-offset: 2px; +} + +/* ==================================== + MAIN +==================================== */ +main { + flex: 1; + + max-width: 900px; + margin: 3rem auto; + padding: 2rem; + + background: white; + + border-radius: 20px; + + box-shadow: 0 10px 30px rgba(0,0,0,0.08); +} + +/* ==================================== + ÜBERSCHRIFT +==================================== */ +h1 { + text-align: center; + color: #1e3a8a; + margin-bottom: 2rem; + + font-size: 2.2rem; +} + +/* ==================================== + BILD +==================================== */ +img { + display: block; + margin: 0 auto 2rem auto; + + max-width: 100%; + height: auto; + + border-radius: 15px; +} + +/* ==================================== + TEXT +==================================== */ +p { + font-size: 1.05rem; +} + +/* ==================================== + FOOTER +==================================== */ +footer { + background: #1e293b; + + padding: 1.5rem; + + display: flex; + justify-content: center; + gap: 2rem; + flex-wrap: wrap; +} + +footer a { + color: white; + text-decoration: none; +} + +footer a:hover, +footer a:focus { + text-decoration: underline; + + outline: 2px solid white; + outline-offset: 2px; +} + +/* ==================================== + RESPONSIVE TABLET +==================================== */ +@media (max-width: 768px) { + nav { + flex-direction: column; + align-items: center; + } + + main { + margin: 1rem; + padding: 1.5rem; + } + + h1 { + font-size: 1.8rem; + } +} + +/* ==================================== + RESPONSIVE HANDY +==================================== */ +@media (max-width: 480px) { + body { + font-size: 15px; + } + + nav div a { + width: 100%; + text-align: center; + } + + footer { + flex-direction: column; + text-align: center; + gap: 1rem; + } } \ No newline at end of file -- 2.47.3 From d2a4c14c884df378ed5d80ccfcc3b4ddb7a95af8 Mon Sep 17 00:00:00 2001 From: caroschulte02-alt Date: Wed, 13 May 2026 00:54:22 +0200 Subject: [PATCH 02/17] First Implementation --- css/main.css | 187 ++++++++++----------------------------------------- 1 file changed, 34 insertions(+), 153 deletions(-) diff --git a/css/main.css b/css/main.css index 46b14bd..8c38e9f 100644 --- a/css/main.css +++ b/css/main.css @@ -1,183 +1,64 @@ /* ==================================== - RESET -==================================== */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -/* ==================================== - BODY + 1. SCHRIFT & HINTERGRUND ==================================== */ body { + /* Deine gewünschte Schriftart */ font-family: Arial, Helvetica, sans-serif; + + /* Hintergrundfarbe der Seite */ + background-color: #eef2ff; + + /* Standard-Textfarbe */ color: #1f2937; + line-height: 1.6; - - background: linear-gradient( - 135deg, - #eef2ff, - #f8fafc - ); - - min-height: 100vh; - - /* sorgt dafür, dass Footer unten bleibt */ - display: flex; - flex-direction: column; + margin: 0; + padding: 20px; } /* ==================================== - NAVIGATION + 2. BUTTON STYLING (Links als Buttons) ==================================== */ -nav { - display: flex; - justify-content: center; - gap: 1rem; - flex-wrap: wrap; - - padding: 1.5rem; - - background: white; - box-shadow: 0 3px 10px rgba(0,0,0,0.08); -} - -nav div a { - display: block; +nav a { + /* Macht aus dem Link eine Box */ + display: inline-block; text-decoration: none; - background: #2563eb; - color: white; + /* Farben */ + background-color: #2563eb; + color: #ffffff; - padding: 0.9rem 1.4rem; - - border-radius: 30px; + /* Abstände & Form */ + padding: 0.8rem 1.5rem; + border-radius: 8px; + /* Schrift im Button */ font-weight: bold; + font-size: 1rem; - transition: all 0.3s ease; + /* Sanfter Übergang beim Drüberfahren */ + transition: background-color 0.3s ease; } -nav div a:hover, -nav div a:focus { - background: #1d4ed8; - transform: translateY(-2px); - - outline: 3px solid #f59e0b; - outline-offset: 2px; +/* Hover-Effekt für die Buttons */ +nav a:hover { + background-color: #1d4ed8; + cursor: pointer; } /* ==================================== - MAIN -==================================== */ -main { - flex: 1; - - max-width: 900px; - margin: 3rem auto; - padding: 2rem; - - background: white; - - border-radius: 20px; - - box-shadow: 0 10px 30px rgba(0,0,0,0.08); -} - -/* ==================================== - ÜBERSCHRIFT + 3. FARBEN FÜR ÜBERSCHRIFTEN ==================================== */ h1 { - text-align: center; color: #1e3a8a; - margin-bottom: 2rem; - - font-size: 2.2rem; + text-align: center; } /* ==================================== - BILD -==================================== */ -img { - display: block; - margin: 0 auto 2rem auto; - - max-width: 100%; - height: auto; - - border-radius: 15px; -} - -/* ==================================== - TEXT + 4. EINFACHER TEXT (p) ==================================== */ p { - font-size: 1.05rem; -} - -/* ==================================== - FOOTER -==================================== */ -footer { - background: #1e293b; - - padding: 1.5rem; - - display: flex; - justify-content: center; - gap: 2rem; - flex-wrap: wrap; -} - -footer a { - color: white; - text-decoration: none; -} - -footer a:hover, -footer a:focus { - text-decoration: underline; - - outline: 2px solid white; - outline-offset: 2px; -} - -/* ==================================== - RESPONSIVE TABLET -==================================== */ -@media (max-width: 768px) { - nav { - flex-direction: column; - align-items: center; - } - - main { - margin: 1rem; - padding: 1.5rem; - } - - h1 { - font-size: 1.8rem; - } -} - -/* ==================================== - RESPONSIVE HANDY -==================================== */ -@media (max-width: 480px) { - body { - font-size: 15px; - } - - nav div a { - width: 100%; - text-align: center; - } - - footer { - flex-direction: column; - text-align: center; - gap: 1rem; - } + color: #374151; + max-width: 800px; + margin: 1rem auto; } \ No newline at end of file -- 2.47.3 From c6e7cdf95c433625a5048d9f0127ecf872afe2ac Mon Sep 17 00:00:00 2001 From: caroschulte02-alt Date: Wed, 13 May 2026 00:56:04 +0200 Subject: [PATCH 03/17] First Implementation --- css/main.css | 107 +++++++++++++++++++++++++++++---------------------- 1 file changed, 61 insertions(+), 46 deletions(-) diff --git a/css/main.css b/css/main.css index 8c38e9f..c7421b8 100644 --- a/css/main.css +++ b/css/main.css @@ -1,64 +1,79 @@ -/* ==================================== - 1. SCHRIFT & HINTERGRUND -==================================== */ +/* 1. SCHRIFTART & HINTERGRUND */ body { - /* Deine gewünschte Schriftart */ font-family: Arial, Helvetica, sans-serif; - - /* Hintergrundfarbe der Seite */ - background-color: #eef2ff; - - /* Standard-Textfarbe */ - color: #1f2937; - - line-height: 1.6; + background-color: #f0f4f8; /* Heller, sauberer Hintergrund */ + color: #333; margin: 0; - padding: 20px; + display: flex; + flex-direction: column; + min-height: 100vh; } -/* ==================================== - 2. BUTTON STYLING (Links als Buttons) -==================================== */ +/* 2. BUTTONS (in der Nav) */ nav a { - /* Macht aus dem Link eine Box */ display: inline-block; text-decoration: none; - - /* Farben */ - background-color: #2563eb; - color: #ffffff; - - /* Abstände & Form */ - padding: 0.8rem 1.5rem; - border-radius: 8px; - - /* Schrift im Button */ + background-color: #2563eb; /* Blau */ + color: white; + padding: 10px 20px; + border-radius: 5px; font-weight: bold; - font-size: 1rem; - - /* Sanfter Übergang beim Drüberfahren */ - transition: background-color 0.3s ease; + transition: background 0.3s; } -/* Hover-Effekt für die Buttons */ nav a:hover { - background-color: #1d4ed8; - cursor: pointer; + background-color: #1d4ed8; /* Dunkleres Blau bei Hover */ } -/* ==================================== - 3. FARBEN FÜR ÜBERSCHRIFTEN -==================================== */ -h1 { - color: #1e3a8a; - text-align: center; +/* 3. RESPONSIVE NAVIGATION */ +nav { + background-color: white; + padding: 1rem; + display: flex; + justify-content: center; + gap: 15px; + border-bottom: 1px solid #ddd; } -/* ==================================== - 4. EINFACHER TEXT (p) -==================================== */ -p { - color: #374151; +@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; + } +} + +/* 4. CONTENT BEREICH (Main) */ +main { + flex: 1; + padding: 20px; max-width: 800px; - margin: 1rem auto; + margin: 0 auto; +} + +/* 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; +} + +footer a { + color: #fbbf24; /* Akzentfarbe für Links im Footer */ + text-decoration: none; +} + +@media (max-width: 480px) { + footer { + flex-direction: column; + text-align: center; + } } \ No newline at end of file -- 2.47.3 From 51093d4995ec4a9ed6bf94664879e07b432a2c45 Mon Sep 17 00:00:00 2001 From: caroschulte02-alt Date: Wed, 13 May 2026 00:59:45 +0200 Subject: [PATCH 04/17] First Implementation --- css/main.css | 98 +++++++++++++++++++++------------------------------- 1 file changed, 39 insertions(+), 59 deletions(-) diff --git a/css/main.css b/css/main.css index c7421b8..86baae0 100644 --- a/css/main.css +++ b/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; } \ No newline at end of file -- 2.47.3 From 590ff7d9160ddc649fc9af55065ea5366ae132be Mon Sep 17 00:00:00 2001 From: caroschulte02-alt Date: Wed, 13 May 2026 01:01:53 +0200 Subject: [PATCH 05/17] First Implementation --- css/main.css | 90 ++++++++++++++++++++++++++-------------------------- 1 file changed, 45 insertions(+), 45 deletions(-) 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 -- 2.47.3 From a32b59825ed6a1412296085150c850aad9030a04 Mon Sep 17 00:00:00 2001 From: caroschulte02-alt Date: Wed, 13 May 2026 01:03:48 +0200 Subject: [PATCH 06/17] First Implementation --- css/main.css | 73 ++++++++++++++++++++++++++++------------------------ 1 file changed, 40 insertions(+), 33 deletions(-) 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 -- 2.47.3 From 71fc4c8184d0808ddafb30f04c886c5748fdfd29 Mon Sep 17 00:00:00 2001 From: caroschulte02-alt Date: Wed, 13 May 2026 01:07:02 +0200 Subject: [PATCH 07/17] First Implementation --- css/main.css | 75 +++++++++++++++++++++++++--------------------------- 1 file changed, 36 insertions(+), 39 deletions(-) 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 -- 2.47.3 From cd1512eadf8ec3ad4c4e0ec36149d6d02b2b73e4 Mon Sep 17 00:00:00 2001 From: caroschulte02-alt Date: Wed, 13 May 2026 01:09:44 +0200 Subject: [PATCH 08/17] First Implementation --- css/main.css | 283 ++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 236 insertions(+), 47 deletions(-) diff --git a/css/main.css b/css/main.css index a240f4c..60ad909 100644 --- a/css/main.css +++ b/css/main.css @@ -1,63 +1,252 @@ -/* ==================================== - PUNKT 3: NAVIGATIONSELEMENTE (UPDATE LOGO) -==================================== */ +/* ========================= + Allgemeine Einstellungen +========================= */ -/* 1. Header & Footer Farbabstimmung */ -nav, footer { - background-color: #1e293b; /* Das gewünschte dunkle Navy-Blau */ - color: #ffffff; +* { + margin: 0; + padding: 0; + box-sizing: border-box; } -/* 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; +html { + font-size: 16px; + scroll-behavior: smooth; } -/* Logo-Bild vergrößern */ -nav a.logo img { - height: 50px; /* Hier die Größe steuern (vorher meist ca. 30px) */ - width: auto; +body { + font-family: Arial, Helvetica, sans-serif; + line-height: 1.6; + background-color: #f4f6f9; + color: #222; +} + +/* ========================= + Layout +========================= */ + +.container { + width: 90%; + max-width: 1200px; + margin: auto; + padding: 20px; +} + +/* ========================= + Header +========================= */ + +header { + background: #1e3a5f; + color: white; + padding: 20px 0; + text-align: center; +} + +header h1 { + font-size: 2rem; +} + +/* ========================= + Navigation +========================= */ + +nav { + background: #16324f; +} + +nav ul { + list-style: none; + display: flex; + justify-content: center; + flex-wrap: wrap; +} + +nav li { + margin: 0; +} + +nav a { 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; + padding: 15px 20px; + color: white; text-decoration: none; - background-color: #3b82f6; /* Dein blaues Design */ - color: #ffffff; - padding: 10px 18px; + transition: background 0.3s ease; +} + +nav a:hover, +nav a:focus { + background: #28527a; + outline: none; +} + +/* ========================= + Hauptbereich +========================= */ + +main { + padding: 40px 0; +} + +/* Flexbox-Layout */ + +.content { + display: flex; + gap: 20px; + align-items: stretch; + flex-wrap: wrap; +} + +.card { + flex: 1 1 300px; + background: white; + padding: 20px; + border-radius: 10px; + box-shadow: 0 3px 10px rgba(0,0,0,0.1); +} + +/* ========================= + Bilder / Medien +========================= */ + +img, +video { + max-width: 100%; + height: auto; border-radius: 8px; - font-family: sans-serif; - font-weight: 600; - font-size: 0.95rem; - margin: 0 5px; - transition: all 0.2s ease; } -nav a:not(.logo):hover { - background-color: #60a5fa; - transform: translateY(-2px); +/* ========================= + Tabellen +========================= */ + +.table-wrapper { + overflow-x: auto; } -/* 4. Spezial-Buttons (Anmelden & Registrieren) */ -nav a.login { - background-color: transparent !important; - border: 2px solid #ffffff; +table { + width: 100%; + border-collapse: collapse; + background: white; } -nav a.register { - background-color: #ffffff !important; - color: #1e293b !important; +th, +td { + padding: 12px; + border: 1px solid #ccc; + text-align: left; +} +th { + background-color: #1e3a5f; + color: white; +} + +/* ========================= + Buttons +========================= */ + +button, +.btn { + background-color: #1e3a5f; + color: white; + border: none; + padding: 12px 18px; + border-radius: 6px; + cursor: pointer; + transition: background 0.3s ease; +} + +button:hover, +.btn:hover { + background-color: #28527a; +} + +/* ========================= + Footer +========================= */ + +footer { + background: #1e3a5f; + color: white; + text-align: center; + padding: 20px; + margin-top: 40px; +} + +/* ========================= + Accessibility +========================= */ + +a:focus, +button:focus { + outline: 3px solid #ffbf47; + outline-offset: 2px; +} + +/* ========================= + Responsive Design +========================= */ + +/* Tablets */ + +@media (max-width: 992px) { + + header h1 { + font-size: 1.7rem; + } + + nav ul { + justify-content: center; + } + + .content { + flex-direction: column; + } +} + +/* Smartphones */ + +@media (max-width: 600px) { + + body { + font-size: 15px; + } + + header { + padding: 15px 10px; + } + + header h1 { + font-size: 1.4rem; + } + + nav ul { + flex-direction: column; + } + + nav a { + text-align: center; + border-top: 1px solid rgba(255,255,255,0.1); + } + + .container { + width: 95%; + } + + .card { + padding: 15px; + } +} + +/* Große Bildschirme */ + +@media (min-width: 1400px) { + + body { + font-size: 18px; + } + + .container { + max-width: 1400px; + } } \ No newline at end of file -- 2.47.3 From 45924e6cfbf27a87fd468320a143ff2863b82ffb Mon Sep 17 00:00:00 2001 From: caroschulte02-alt Date: Wed, 13 May 2026 01:12:25 +0200 Subject: [PATCH 09/17] First Implementation --- css/main.css | 358 ++++++++++++++++++++++++++++++--------------------- 1 file changed, 213 insertions(+), 145 deletions(-) diff --git a/css/main.css b/css/main.css index 60ad909..7077513 100644 --- a/css/main.css +++ b/css/main.css @@ -1,5 +1,5 @@ /* ========================= - Allgemeine Einstellungen + Modernes Responsive Design ========================= */ * { @@ -8,27 +8,29 @@ box-sizing: border-box; } -html { - font-size: 16px; - scroll-behavior: smooth; +:root { + + /* Farbpalette */ + --primary: #2563eb; + --primary-dark: #1d4ed8; + --background: #f5f7fb; + --surface: #ffffff; + --text: #1e293b; + --text-light: #64748b; + --border: #e2e8f0; + + /* Schatten */ + --shadow: 0 8px 25px rgba(0,0,0,0.08); + + /* Rundungen */ + --radius: 16px; } body { - font-family: Arial, Helvetica, sans-serif; + font-family: "Segoe UI", Arial, sans-serif; + background: var(--background); + color: var(--text); line-height: 1.6; - background-color: #f4f6f9; - color: #222; -} - -/* ========================= - Layout -========================= */ - -.container { - width: 90%; - max-width: 1200px; - margin: auto; - padding: 20px; } /* ========================= @@ -36,47 +38,110 @@ body { ========================= */ header { - background: #1e3a5f; - color: white; - padding: 20px 0; - text-align: center; + background: var(--surface); + box-shadow: 0 2px 10px rgba(0,0,0,0.05); + position: sticky; + top: 0; + z-index: 1000; } -header h1 { - font-size: 2rem; +.header-container { + max-width: 1200px; + margin: auto; + padding: 16px 24px; + + display: flex; + justify-content: space-between; + align-items: center; + gap: 20px; +} + +/* Logo */ + +.logo { + font-size: 1.5rem; + font-weight: 700; + color: var(--primary); } /* ========================= Navigation ========================= */ -nav { - background: #16324f; -} - nav ul { list-style: none; - display: flex; - justify-content: center; - flex-wrap: wrap; -} -nav li { - margin: 0; + display: flex; + align-items: center; + gap: 18px; } nav a { - display: block; - padding: 15px 20px; - color: white; text-decoration: none; - transition: background 0.3s ease; + color: var(--text); + font-weight: 500; + transition: 0.25s ease; + padding: 8px 14px; + border-radius: 10px; } nav a:hover, nav a:focus { - background: #28527a; + background: #eff6ff; + color: var(--primary); +} + +/* ========================= + Suchfeld +========================= */ + +.search-box { + display: flex; + gap: 10px; +} + +.search-box input { + padding: 10px 14px; + border: 1px solid var(--border); + border-radius: 10px; outline: none; + min-width: 220px; +} + +.search-box input:focus { + border-color: var(--primary); +} + +/* ========================= + Buttons +========================= */ + +.btn { + padding: 10px 18px; + border-radius: 10px; + text-decoration: none; + font-weight: 600; + transition: 0.25s ease; + border: none; + cursor: pointer; +} + +.btn-primary { + background: var(--primary); + color: white; +} + +.btn-primary:hover { + background: var(--primary-dark); +} + +.btn-secondary { + background: #eff6ff; + color: var(--primary); +} + +.btn-secondary:hover { + background: #dbeafe; } /* ========================= @@ -84,81 +149,69 @@ nav a:focus { ========================= */ main { - padding: 40px 0; + max-width: 1200px; + margin: 50px auto; + padding: 0 24px; } -/* Flexbox-Layout */ +/* Hero Section */ -.content { - display: flex; - gap: 20px; - align-items: stretch; - flex-wrap: wrap; +.hero { + background: linear-gradient( + 135deg, + #2563eb, + #3b82f6 + ); + + color: white; + padding: 80px 40px; + border-radius: var(--radius); + text-align: center; + box-shadow: var(--shadow); + + margin-bottom: 50px; +} + +.hero h1 { + font-size: 3rem; + margin-bottom: 20px; +} + +.hero p { + max-width: 800px; + margin: auto; + font-size: 1.1rem; +} + +/* ========================= + Karten / Inhalte +========================= */ + +.content-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 24px; } .card { - flex: 1 1 300px; - background: white; - padding: 20px; - border-radius: 10px; - box-shadow: 0 3px 10px rgba(0,0,0,0.1); + background: var(--surface); + border-radius: var(--radius); + padding: 28px; + box-shadow: var(--shadow); + transition: 0.3s ease; } -/* ========================= - Bilder / Medien -========================= */ - -img, -video { - max-width: 100%; - height: auto; - border-radius: 8px; +.card:hover { + transform: translateY(-5px); } -/* ========================= - Tabellen -========================= */ - -.table-wrapper { - overflow-x: auto; +.card h2 { + margin-bottom: 14px; + color: var(--primary); } -table { - width: 100%; - border-collapse: collapse; - background: white; -} - -th, -td { - padding: 12px; - border: 1px solid #ccc; - text-align: left; -} - -th { - background-color: #1e3a5f; - color: white; -} - -/* ========================= - Buttons -========================= */ - -button, -.btn { - background-color: #1e3a5f; - color: white; - border: none; - padding: 12px 18px; - border-radius: 6px; - cursor: pointer; - transition: background 0.3s ease; -} - -button:hover, -.btn:hover { - background-color: #28527a; +.card p { + color: var(--text-light); } /* ========================= @@ -166,11 +219,30 @@ button:hover, ========================= */ footer { - background: #1e3a5f; - color: white; - text-align: center; - padding: 20px; - margin-top: 40px; + margin-top: 80px; + background: var(--surface); + border-top: 1px solid var(--border); +} + +.footer-container { + max-width: 1200px; + margin: auto; + padding: 24px; + + display: flex; + justify-content: center; + gap: 30px; + flex-wrap: wrap; +} + +footer a { + text-decoration: none; + color: var(--text-light); + transition: 0.25s ease; +} + +footer a:hover { + color: var(--primary); } /* ========================= @@ -178,8 +250,9 @@ footer { ========================= */ a:focus, -button:focus { - outline: 3px solid #ffbf47; +button:focus, +input:focus { + outline: 3px solid #93c5fd; outline-offset: 2px; } @@ -187,66 +260,61 @@ button:focus { Responsive Design ========================= */ -/* Tablets */ +/* Tablet */ -@media (max-width: 992px) { +@media (max-width: 900px) { - header h1 { - font-size: 1.7rem; + .header-container { + flex-direction: column; + align-items: stretch; } nav ul { justify-content: center; + flex-wrap: wrap; } - .content { - flex-direction: column; + .search-box { + justify-content: center; + } + + .hero h1 { + font-size: 2.3rem; } } -/* Smartphones */ +/* Smartphone */ @media (max-width: 600px) { - body { - font-size: 15px; + .hero { + padding: 50px 25px; } - header { - padding: 15px 10px; + .hero h1 { + font-size: 2rem; } - header h1 { - font-size: 1.4rem; + .hero p { + font-size: 1rem; } nav ul { flex-direction: column; + gap: 10px; } - nav a { + .search-box { + flex-direction: column; + } + + .search-box input { + width: 100%; + min-width: unset; + } + + .btn { + width: 100%; text-align: center; - border-top: 1px solid rgba(255,255,255,0.1); - } - - .container { - width: 95%; - } - - .card { - padding: 15px; - } -} - -/* Große Bildschirme */ - -@media (min-width: 1400px) { - - body { - font-size: 18px; - } - - .container { - max-width: 1400px; } } \ No newline at end of file -- 2.47.3 From 60b6449ecd067c4aae51a4ee61b219eb37e02614 Mon Sep 17 00:00:00 2001 From: caroschulte02-alt Date: Wed, 13 May 2026 01:16:05 +0200 Subject: [PATCH 10/17] First Implementation --- css/main.css | 329 +++++++++++++++------------------------------------ 1 file changed, 95 insertions(+), 234 deletions(-) diff --git a/css/main.css b/css/main.css index 7077513..307ccac 100644 --- a/css/main.css +++ b/css/main.css @@ -1,6 +1,3 @@ -/* ========================= - Modernes Responsive Design -========================= */ * { margin: 0; @@ -8,27 +5,23 @@ box-sizing: border-box; } -:root { +/* Farben */ - /* Farbpalette */ +:root { --primary: #2563eb; --primary-dark: #1d4ed8; - --background: #f5f7fb; + --background: #f4f7fb; --surface: #ffffff; --text: #1e293b; --text-light: #64748b; - --border: #e2e8f0; - - /* Schatten */ - --shadow: 0 8px 25px rgba(0,0,0,0.08); - - /* Rundungen */ - --radius: 16px; + --border: #dbe3ec; } +/* Grundlayout */ + body { font-family: "Segoe UI", Arial, sans-serif; - background: var(--background); + background-color: var(--background); color: var(--text); line-height: 1.6; } @@ -38,180 +31,136 @@ body { ========================= */ header { - background: var(--surface); + background-color: var(--surface); + padding: 18px 40px; + border-bottom: 1px solid var(--border); box-shadow: 0 2px 10px rgba(0,0,0,0.05); - position: sticky; - top: 0; - z-index: 1000; -} - -.header-container { - max-width: 1200px; - margin: auto; - padding: 16px 24px; - - display: flex; - justify-content: space-between; - align-items: center; - gap: 20px; -} - -/* Logo */ - -.logo { - font-size: 1.5rem; - font-weight: 700; - color: var(--primary); } /* ========================= Navigation ========================= */ -nav ul { - list-style: none; - - display: flex; - align-items: center; - gap: 18px; +nav { + background-color: var(--surface); + padding: 15px 40px; + border-bottom: 1px solid var(--border); } nav a { text-decoration: none; color: var(--text); - font-weight: 500; - transition: 0.25s ease; - padding: 8px 14px; + font-weight: 600; + margin-right: 20px; + padding: 10px 16px; border-radius: 10px; + transition: 0.3s; } -nav a:hover, -nav a:focus { - background: #eff6ff; +nav a:hover { + background-color: #e8f0ff; color: var(--primary); } /* ========================= - Suchfeld + Überschriften ========================= */ -.search-box { - display: flex; - gap: 10px; +h1 { + font-size: 3rem; + margin-bottom: 20px; + color: var(--primary); } -.search-box input { - padding: 10px 14px; - border: 1px solid var(--border); - border-radius: 10px; - outline: none; - min-width: 220px; +h2 { + font-size: 1.8rem; + margin-bottom: 15px; + color: var(--primary-dark); } -.search-box input:focus { - border-color: var(--primary); +h3 { + margin-bottom: 10px; + color: var(--text); +} + +/* ========================= + Hauptinhalt +========================= */ + +main { + background-color: var(--surface); + margin: 40px; + padding: 40px; + border-radius: 18px; + box-shadow: 0 10px 30px rgba(0,0,0,0.08); +} + +/* Texte */ + +p { + margin-bottom: 18px; + color: var(--text-light); + font-size: 1.05rem; +} + +/* ========================= + Links +========================= */ + +a { + color: var(--primary); + transition: 0.3s; +} + +a:hover { + color: var(--primary-dark); } /* ========================= Buttons ========================= */ -.btn { - padding: 10px 18px; - border-radius: 10px; - text-decoration: none; - font-weight: 600; - transition: 0.25s ease; +button { + background-color: var(--primary); + color: white; border: none; + padding: 12px 22px; + border-radius: 10px; + font-size: 1rem; cursor: pointer; + transition: 0.3s; } -.btn-primary { - background: var(--primary); - color: white; -} - -.btn-primary:hover { - background: var(--primary-dark); -} - -.btn-secondary { - background: #eff6ff; - color: var(--primary); -} - -.btn-secondary:hover { - background: #dbeafe; +button:hover { + background-color: var(--primary-dark); } /* ========================= - Hauptbereich + Suchfeld ========================= */ -main { - max-width: 1200px; - margin: 50px auto; - padding: 0 24px; +input[type="text"], +input[type="search"] { + + padding: 10px 14px; + border: 1px solid var(--border); + border-radius: 10px; + font-size: 1rem; + background-color: white; } -/* Hero Section */ - -.hero { - background: linear-gradient( - 135deg, - #2563eb, - #3b82f6 - ); - - color: white; - padding: 80px 40px; - border-radius: var(--radius); - text-align: center; - box-shadow: var(--shadow); - - margin-bottom: 50px; -} - -.hero h1 { - font-size: 3rem; - margin-bottom: 20px; -} - -.hero p { - max-width: 800px; - margin: auto; - font-size: 1.1rem; +input:focus { + outline: none; + border-color: var(--primary); } /* ========================= - Karten / Inhalte + Bilder ========================= */ -.content-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); - gap: 24px; -} - -.card { - background: var(--surface); - border-radius: var(--radius); - padding: 28px; - box-shadow: var(--shadow); - transition: 0.3s ease; -} - -.card:hover { - transform: translateY(-5px); -} - -.card h2 { - margin-bottom: 14px; - color: var(--primary); -} - -.card p { - color: var(--text-light); +img { + border-radius: 14px; + box-shadow: 0 5px 20px rgba(0,0,0,0.08); } /* ========================= @@ -219,102 +168,14 @@ main { ========================= */ footer { - margin-top: 80px; - background: var(--surface); + background-color: var(--surface); border-top: 1px solid var(--border); -} - -.footer-container { - max-width: 1200px; - margin: auto; - padding: 24px; - - display: flex; - justify-content: center; - gap: 30px; - flex-wrap: wrap; + padding: 25px; + text-align: center; + margin-top: 40px; } footer a { + margin: 0 10px; text-decoration: none; - color: var(--text-light); - transition: 0.25s ease; -} - -footer a:hover { - color: var(--primary); -} - -/* ========================= - Accessibility -========================= */ - -a:focus, -button:focus, -input:focus { - outline: 3px solid #93c5fd; - outline-offset: 2px; -} - -/* ========================= - Responsive Design -========================= */ - -/* Tablet */ - -@media (max-width: 900px) { - - .header-container { - flex-direction: column; - align-items: stretch; - } - - nav ul { - justify-content: center; - flex-wrap: wrap; - } - - .search-box { - justify-content: center; - } - - .hero h1 { - font-size: 2.3rem; - } -} - -/* Smartphone */ - -@media (max-width: 600px) { - - .hero { - padding: 50px 25px; - } - - .hero h1 { - font-size: 2rem; - } - - .hero p { - font-size: 1rem; - } - - nav ul { - flex-direction: column; - gap: 10px; - } - - .search-box { - flex-direction: column; - } - - .search-box input { - width: 100%; - min-width: unset; - } - - .btn { - width: 100%; - text-align: center; - } } \ No newline at end of file -- 2.47.3 From 1a80d3576f864b2c744eaba6c94c08adf65f5401 Mon Sep 17 00:00:00 2001 From: caroschulte02-alt Date: Wed, 13 May 2026 01:19:20 +0200 Subject: [PATCH 11/17] First Implementation --- css/main.css | 285 +++++++++++++++++++++++++++++++++------------------ 1 file changed, 183 insertions(+), 102 deletions(-) diff --git a/css/main.css b/css/main.css index 307ccac..a17f566 100644 --- a/css/main.css +++ b/css/main.css @@ -5,25 +5,34 @@ box-sizing: border-box; } -/* Farben */ +/* ========================= + Farben +========================= */ :root { + --bg: #eef2f7; + --white: #ffffff; + + --nav: #1e293b; + --nav-hover: #334155; + --primary: #2563eb; - --primary-dark: #1d4ed8; - --background: #f4f7fb; - --surface: #ffffff; + --primary-hover: #1d4ed8; + --text: #1e293b; --text-light: #64748b; - --border: #dbe3ec; + + --border: #dbe4ee; } -/* Grundlayout */ +/* ========================= + Body +========================= */ body { font-family: "Segoe UI", Arial, sans-serif; - background-color: var(--background); + background-color: var(--bg); color: var(--text); - line-height: 1.6; } /* ========================= @@ -31,10 +40,32 @@ body { ========================= */ header { - background-color: var(--surface); - padding: 18px 40px; - border-bottom: 1px solid var(--border); - box-shadow: 0 2px 10px rgba(0,0,0,0.05); + + background-color: var(--nav); + + padding: 14px 40px; + + border-bottom: 1px solid rgba(255,255,255,0.08); + + box-shadow: 0 4px 14px rgba(0,0,0,0.08); +} + +/* ========================= + Logo / Bild +========================= */ + +header img { + + width: 70px; + height: 70px; + + object-fit: cover; + + border-radius: 14px; + + background-color: white; + + padding: 4px; } /* ========================= @@ -42,97 +73,36 @@ header { ========================= */ nav { - background-color: var(--surface); - padding: 15px 40px; - border-bottom: 1px solid var(--border); + + background-color: var(--nav); + + padding: 16px 40px; + + border-top: 1px solid rgba(255,255,255,0.05); } nav a { + text-decoration: none; - color: var(--text); + + color: #f1f5f9; + font-weight: 600; - margin-right: 20px; - padding: 10px 16px; + + margin-right: 18px; + + padding: 10px 18px; + border-radius: 10px; - transition: 0.3s; + + transition: 0.3s ease; } nav a:hover { - background-color: #e8f0ff; - color: var(--primary); -} -/* ========================= - Überschriften -========================= */ + background-color: var(--nav-hover); -h1 { - font-size: 3rem; - margin-bottom: 20px; - color: var(--primary); -} - -h2 { - font-size: 1.8rem; - margin-bottom: 15px; - color: var(--primary-dark); -} - -h3 { - margin-bottom: 10px; - color: var(--text); -} - -/* ========================= - Hauptinhalt -========================= */ - -main { - background-color: var(--surface); - margin: 40px; - padding: 40px; - border-radius: 18px; - box-shadow: 0 10px 30px rgba(0,0,0,0.08); -} - -/* Texte */ - -p { - margin-bottom: 18px; - color: var(--text-light); - font-size: 1.05rem; -} - -/* ========================= - Links -========================= */ - -a { - color: var(--primary); - transition: 0.3s; -} - -a:hover { - color: var(--primary-dark); -} - -/* ========================= - Buttons -========================= */ - -button { - background-color: var(--primary); color: white; - border: none; - padding: 12px 22px; - border-radius: 10px; - font-size: 1rem; - cursor: pointer; - transition: 0.3s; -} - -button:hover { - background-color: var(--primary-dark); } /* ========================= @@ -142,25 +112,120 @@ button:hover { input[type="text"], input[type="search"] { - padding: 10px 14px; + padding: 11px 16px; + + border-radius: 12px; + border: 1px solid var(--border); - border-radius: 10px; - font-size: 1rem; + background-color: white; + + font-size: 1rem; } input:focus { + outline: none; + border-color: var(--primary); } /* ========================= - Bilder + Buttons ========================= */ -img { - border-radius: 14px; - box-shadow: 0 5px 20px rgba(0,0,0,0.08); +button { + + background-color: var(--primary); + + color: white; + + border: none; + + padding: 11px 22px; + + border-radius: 12px; + + font-size: 1rem; + + font-weight: 600; + + cursor: pointer; + + transition: 0.3s ease; +} + +button:hover { + + background-color: var(--primary-hover); +} + +/* ========================= + Hauptinhalt +========================= */ + +main { + + background-color: var(--white); + + margin: 40px; + + padding: 50px; + + border-radius: 24px; + + box-shadow: 0 10px 30px rgba(0,0,0,0.06); +} + +/* ========================= + Überschriften +========================= */ + +h1 { + + color: var(--primary); + + font-size: 3.5rem; + + margin-bottom: 30px; +} + +h2 { + + color: var(--primary); + + margin-bottom: 12px; +} + +/* ========================= + Texte +========================= */ + +p { + + color: var(--text-light); + + line-height: 1.8; + + margin-bottom: 25px; + + font-size: 1.08rem; +} + +/* ========================= + Links +========================= */ + +a { + + color: var(--primary); + + transition: 0.3s ease; +} + +a:hover { + + color: var(--primary-hover); } /* ========================= @@ -168,14 +233,30 @@ img { ========================= */ footer { - background-color: var(--surface); + + margin-top: 50px; + + background-color: var(--white); + border-top: 1px solid var(--border); - padding: 25px; + + padding: 30px; + text-align: center; - margin-top: 40px; } footer a { - margin: 0 10px; + text-decoration: none; + + margin: 0 14px; + + color: var(--text-light); + + font-weight: 500; +} + +footer a:hover { + + color: var(--primary); } \ No newline at end of file -- 2.47.3 From a3fe50128253d7c7367c57548769b81a8db5385a Mon Sep 17 00:00:00 2001 From: caroschulte02-alt Date: Wed, 13 May 2026 01:26:09 +0200 Subject: [PATCH 12/17] First Implementation --- css/main.css | 97 ---------------------------------------------------- 1 file changed, 97 deletions(-) diff --git a/css/main.css b/css/main.css index a17f566..80be864 100644 --- a/css/main.css +++ b/css/main.css @@ -1,7 +1,4 @@ - * { - margin: 0; - padding: 0; box-sizing: border-box; } @@ -40,14 +37,7 @@ body { ========================= */ header { - background-color: var(--nav); - - padding: 14px 40px; - - border-bottom: 1px solid rgba(255,255,255,0.08); - - box-shadow: 0 4px 14px rgba(0,0,0,0.08); } /* ========================= @@ -55,17 +45,8 @@ header { ========================= */ header img { - - width: 70px; - height: 70px; - object-fit: cover; - - border-radius: 14px; - background-color: white; - - padding: 4px; } /* ========================= @@ -73,35 +54,18 @@ header img { ========================= */ nav { - background-color: var(--nav); - - padding: 16px 40px; - - border-top: 1px solid rgba(255,255,255,0.05); } nav a { - text-decoration: none; - color: #f1f5f9; - font-weight: 600; - - margin-right: 18px; - - padding: 10px 18px; - - border-radius: 10px; - transition: 0.3s ease; } nav a:hover { - background-color: var(--nav-hover); - color: white; } @@ -111,22 +75,12 @@ nav a:hover { input[type="text"], input[type="search"] { - - padding: 11px 16px; - - border-radius: 12px; - border: 1px solid var(--border); - background-color: white; - font-size: 1rem; } input:focus { - - outline: none; - border-color: var(--primary); } @@ -135,28 +89,16 @@ input:focus { ========================= */ button { - background-color: var(--primary); - color: white; - border: none; - - padding: 11px 22px; - - border-radius: 12px; - font-size: 1rem; - font-weight: 600; - cursor: pointer; - transition: 0.3s ease; } button:hover { - background-color: var(--primary-hover); } @@ -165,16 +107,7 @@ button:hover { ========================= */ main { - background-color: var(--white); - - margin: 40px; - - padding: 50px; - - border-radius: 24px; - - box-shadow: 0 10px 30px rgba(0,0,0,0.06); } /* ========================= @@ -182,19 +115,12 @@ main { ========================= */ h1 { - color: var(--primary); - font-size: 3.5rem; - - margin-bottom: 30px; } h2 { - color: var(--primary); - - margin-bottom: 12px; } /* ========================= @@ -202,13 +128,8 @@ h2 { ========================= */ p { - color: var(--text-light); - line-height: 1.8; - - margin-bottom: 25px; - font-size: 1.08rem; } @@ -217,14 +138,11 @@ p { ========================= */ a { - color: var(--primary); - transition: 0.3s ease; } a:hover { - color: var(--primary-hover); } @@ -233,30 +151,15 @@ a:hover { ========================= */ footer { - - margin-top: 50px; - background-color: var(--white); - - border-top: 1px solid var(--border); - - padding: 30px; - - text-align: center; } footer a { - text-decoration: none; - - margin: 0 14px; - color: var(--text-light); - font-weight: 500; } footer a:hover { - color: var(--primary); } \ No newline at end of file -- 2.47.3 From 68b6ecdfc302b9318418eb65da0281aea77f0863 Mon Sep 17 00:00:00 2001 From: caroschulte02-alt Date: Wed, 13 May 2026 01:27:55 +0200 Subject: [PATCH 13/17] First Implementation --- css/main.css | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/css/main.css b/css/main.css index 80be864..b125bd9 100644 --- a/css/main.css +++ b/css/main.css @@ -47,6 +47,7 @@ header { header img { object-fit: cover; background-color: white; + border-radius: 14px; } /* ========================= @@ -61,6 +62,7 @@ nav a { text-decoration: none; color: #f1f5f9; font-weight: 600; + border-radius: 10px; transition: 0.3s ease; } @@ -78,6 +80,7 @@ input[type="search"] { border: 1px solid var(--border); background-color: white; font-size: 1rem; + border-radius: 12px; } input:focus { @@ -95,11 +98,21 @@ button { font-size: 1rem; font-weight: 600; cursor: pointer; - transition: 0.3s ease; + + border-radius: 12px; + + transition: 0.25s ease; } +/* Hover Bewegung */ button:hover { background-color: var(--primary-hover); + transform: translateY(-2px); +} + +/* Klick-Effekt */ +button:active { + transform: translateY(0px); } /* ========================= @@ -108,6 +121,7 @@ button:hover { main { background-color: var(--white); + border-radius: 24px; } /* ========================= -- 2.47.3 From dfb5076032f76f549b5137e0b5c1a6f2af4d9c3e Mon Sep 17 00:00:00 2001 From: caroschulte02-alt Date: Wed, 13 May 2026 01:29:17 +0200 Subject: [PATCH 14/17] First Implementation --- css/main.css | 245 +++++++++++++++++++-------------------------------- 1 file changed, 92 insertions(+), 153 deletions(-) diff --git a/css/main.css b/css/main.css index b125bd9..891314a 100644 --- a/css/main.css +++ b/css/main.css @@ -1,179 +1,118 @@ * { - box-sizing: border-box; -} + :root { + --bg: #f1f5f9; /* etwas weniger „blau-stichig“, ruhiger Hintergrund */ + --white: #ffffff; -/* ========================= - Farben -========================= */ + /* Navigation: dunkler für besseren Kontrast */ + --nav: #0f172a; + --nav-hover: #1e293b; -:root { - --bg: #eef2f7; - --white: #ffffff; + /* Primary: etwas dunkler für besseren Kontrast auf Weiß */ + --primary: #1d4ed8; + --primary-hover: #1e40af; - --nav: #1e293b; - --nav-hover: #334155; + /* Text: deutlich dunkler (wichtig für Accessibility) */ + --text: #0f172a; + --text-light: #334155; - --primary: #2563eb; - --primary-hover: #1d4ed8; + /* Border: etwas stärker sichtbar */ + --border: #cbd5e1; + } - --text: #1e293b; - --text-light: #64748b; + /* ========================= + Body + ========================= */ - --border: #dbe4ee; -} + body { + font-family: "Segoe UI", Arial, sans-serif; + background-color: var(--bg); + color: var(--text); + } -/* ========================= - Body -========================= */ + /* ========================= + Header / Nav + ========================= */ -body { - font-family: "Segoe UI", Arial, sans-serif; - background-color: var(--bg); - color: var(--text); -} + header, + nav { + background-color: var(--nav); + } -/* ========================= - Header -========================= */ + /* ========================= + Links + ========================= */ -header { - background-color: var(--nav); -} + a { + color: var(--primary); + transition: 0.25s ease; + } -/* ========================= - Logo / Bild -========================= */ + a:hover { + color: var(--primary-hover); + text-decoration: underline; /* wichtig für Screenreader + Klarheit */ + } -header img { - object-fit: cover; - background-color: white; - border-radius: 14px; -} + /* ========================= + Navigation Links + ========================= */ -/* ========================= - Navigation -========================= */ + nav a { + color: #f8fafc; + border-radius: 10px; + } -nav { - background-color: var(--nav); -} + nav a:hover { + background-color: var(--nav-hover); + color: #ffffff; + } -nav a { - text-decoration: none; - color: #f1f5f9; - font-weight: 600; - border-radius: 10px; - transition: 0.3s ease; -} + /* ========================= + Buttons + ========================= */ -nav a:hover { - background-color: var(--nav-hover); - color: white; -} + button { + background-color: var(--primary); + color: white; + border-radius: 12px; + font-weight: 600; + transition: 0.25s ease; + } -/* ========================= - Suchfeld -========================= */ + /* klarer Hover-Kontrast */ -input[type="text"], -input[type="search"] { - border: 1px solid var(--border); - background-color: white; - font-size: 1rem; - border-radius: 12px; -} + button:hover { + background-color: var(--primary-hover); + transform: translateY(-2px); + } -input:focus { - border-color: var(--primary); -} + /* Tastatur-Fokus (SEHR wichtig für Accessibility) */ -/* ========================= - Buttons -========================= */ + button:focus, + nav a:focus, + input:focus { + outline: 3px solid #93c5fd; + outline-offset: 2px; + } -button { - background-color: var(--primary); - color: white; - border: none; - font-size: 1rem; - font-weight: 600; - cursor: pointer; + /* ========================= + Inputs + ========================= */ - border-radius: 12px; + input[type="text"], + input[type="search"] { + border: 1px solid var(--border); + border-radius: 12px; + background-color: white; + color: var(--text); + } - transition: 0.25s ease; -} + /* ========================= + Texte + ========================= */ -/* Hover Bewegung */ -button:hover { - background-color: var(--primary-hover); - transform: translateY(-2px); -} - -/* Klick-Effekt */ -button:active { - transform: translateY(0px); -} - -/* ========================= - Hauptinhalt -========================= */ - -main { - background-color: var(--white); - border-radius: 24px; -} - -/* ========================= - Überschriften -========================= */ - -h1 { - color: var(--primary); - font-size: 3.5rem; -} - -h2 { - color: var(--primary); -} - -/* ========================= - Texte -========================= */ - -p { - color: var(--text-light); - line-height: 1.8; - font-size: 1.08rem; -} - -/* ========================= - Links -========================= */ - -a { - color: var(--primary); - transition: 0.3s ease; -} - -a:hover { - color: var(--primary-hover); -} - -/* ========================= - Footer -========================= */ - -footer { - background-color: var(--white); -} - -footer a { - text-decoration: none; - color: var(--text-light); - font-weight: 500; -} - -footer a:hover { - color: var(--primary); + p { + color: var(--text-light); + line-height: 1.8; + font-size: 1.08rem; + } } \ No newline at end of file -- 2.47.3 From e7bc5a570923eeec7cbaf19b0552066cce35dad6 Mon Sep 17 00:00:00 2001 From: caroschulte02-alt Date: Wed, 13 May 2026 01:30:41 +0200 Subject: [PATCH 15/17] First Implementation --- css/main.css | 253 ++++++++++++++++++++++++++++++++------------------- 1 file changed, 161 insertions(+), 92 deletions(-) diff --git a/css/main.css b/css/main.css index 891314a..5d2e13c 100644 --- a/css/main.css +++ b/css/main.css @@ -1,118 +1,187 @@ * { - :root { - --bg: #f1f5f9; /* etwas weniger „blau-stichig“, ruhiger Hintergrund */ - --white: #ffffff; + box-sizing: border-box; +} - /* Navigation: dunkler für besseren Kontrast */ - --nav: #0f172a; - --nav-hover: #1e293b; +/* ========================= + Farben (HIGH CONTRAST) +========================= */ - /* Primary: etwas dunkler für besseren Kontrast auf Weiß */ - --primary: #1d4ed8; - --primary-hover: #1e40af; +:root { + --bg: #f1f5f9; + --white: #ffffff; - /* Text: deutlich dunkler (wichtig für Accessibility) */ - --text: #0f172a; - --text-light: #334155; + /* Navigation dunkler für mehr Kontrast */ + --nav: #0f172a; + --nav-hover: #1e293b; - /* Border: etwas stärker sichtbar */ - --border: #cbd5e1; - } + /* kräftigeres Blau */ + --primary: #1d4ed8; + --primary-hover: #1e40af; - /* ========================= - Body - ========================= */ + /* Text deutlich dunkler */ + --text: #0b1220; + --text-light: #1f2937; - body { - font-family: "Segoe UI", Arial, sans-serif; - background-color: var(--bg); - color: var(--text); - } + /* klarere Borders */ + --border: #cbd5e1; +} - /* ========================= - Header / Nav - ========================= */ +/* ========================= + Body +========================= */ - header, - nav { - background-color: var(--nav); - } +body { + font-family: "Segoe UI", Arial, sans-serif; + background-color: var(--bg); + color: var(--text); +} - /* ========================= - Links - ========================= */ +/* ========================= + Header +========================= */ - a { - color: var(--primary); - transition: 0.25s ease; - } +header { + background-color: var(--nav); +} - a:hover { - color: var(--primary-hover); - text-decoration: underline; /* wichtig für Screenreader + Klarheit */ - } +/* ========================= + Logo / Bild +========================= */ - /* ========================= - Navigation Links - ========================= */ +header img { + object-fit: cover; + background-color: white; + border-radius: 14px; +} - nav a { - color: #f8fafc; - border-radius: 10px; - } +/* ========================= + Navigation +========================= */ - nav a:hover { - background-color: var(--nav-hover); - color: #ffffff; - } +nav { + background-color: var(--nav); +} - /* ========================= - Buttons - ========================= */ +nav a { + text-decoration: none; + color: #f8fafc; /* heller für starken Kontrast */ + font-weight: 600; + border-radius: 10px; + transition: 0.3s ease; +} - button { - background-color: var(--primary); - color: white; - border-radius: 12px; - font-weight: 600; - transition: 0.25s ease; - } +nav a:hover { + background-color: var(--nav-hover); + color: #ffffff; +} - /* klarer Hover-Kontrast */ +/* ========================= + Suchfeld +========================= */ - button:hover { - background-color: var(--primary-hover); - transform: translateY(-2px); - } +input[type="text"], +input[type="search"] { + border: 1px solid var(--border); + background-color: white; + font-size: 1rem; + border-radius: 12px; + color: var(--text); +} - /* Tastatur-Fokus (SEHR wichtig für Accessibility) */ +input:focus { + border-color: var(--primary); + outline: 3px solid #93c5fd; +} - button:focus, - nav a:focus, - input:focus { - outline: 3px solid #93c5fd; - outline-offset: 2px; - } +/* ========================= + Buttons +========================= */ - /* ========================= - Inputs - ========================= */ +button { + background-color: var(--primary); + color: white; + border: none; + font-size: 1rem; + font-weight: 600; + cursor: pointer; - input[type="text"], - input[type="search"] { - border: 1px solid var(--border); - border-radius: 12px; - background-color: white; - color: var(--text); - } + border-radius: 12px; + transition: 0.25s ease; +} - /* ========================= - Texte - ========================= */ +/* Hover Bewegung */ +button:hover { + background-color: var(--primary-hover); + transform: translateY(-2px); +} - p { - color: var(--text-light); - line-height: 1.8; - font-size: 1.08rem; - } +/* Tastatur-Fokus (wichtig für Accessibility) */ +button:focus, +nav a:focus { + outline: 3px solid #93c5fd; + outline-offset: 2px; +} + +/* ========================= + Hauptinhalt +========================= */ + +main { + background-color: var(--white); + border-radius: 24px; +} + +/* ========================= + Überschriften +========================= */ + +h1 { + color: var(--primary); + font-size: 3.5rem; +} + +h2 { + color: var(--primary); +} + +/* ========================= + Texte +========================= */ + +p { + color: var(--text-light); + line-height: 1.8; + font-size: 1.08rem; +} + +/* ========================= + Links +========================= */ + +a { + color: var(--primary); + transition: 0.3s ease; +} + +a:hover { + color: var(--primary-hover); + text-decoration: underline; +} + +/* ========================= + Footer +========================= */ + +footer { + background-color: var(--white); +} + +footer a { + text-decoration: none; + color: var(--text-light); + font-weight: 500; +} + +footer a:hover { + color: var(--primary); } \ No newline at end of file -- 2.47.3 From f1feb4677e5c36a17185e5bb1fbe7c4b467086b5 Mon Sep 17 00:00:00 2001 From: caroschulte02-alt Date: Wed, 13 May 2026 01:31:50 +0200 Subject: [PATCH 16/17] First Implementation --- css/main.css | 290 +++++++++++++++++++++++++-------------------------- 1 file changed, 143 insertions(+), 147 deletions(-) diff --git a/css/main.css b/css/main.css index 5d2e13c..527e1e8 100644 --- a/css/main.css +++ b/css/main.css @@ -1,187 +1,183 @@ * { - box-sizing: border-box; -} + * { + box-sizing: border-box; + } -/* ========================= - Farben (HIGH CONTRAST) -========================= */ + /* ========================= + Farben + ========================= */ -:root { - --bg: #f1f5f9; - --white: #ffffff; + :root { + --bg: #eef2f7; + --white: #ffffff; - /* Navigation dunkler für mehr Kontrast */ - --nav: #0f172a; - --nav-hover: #1e293b; + --nav: #1e293b; + --nav-hover: #334155; - /* kräftigeres Blau */ - --primary: #1d4ed8; - --primary-hover: #1e40af; + --primary: #2563eb; + --primary-hover: #1d4ed8; - /* Text deutlich dunkler */ - --text: #0b1220; - --text-light: #1f2937; + --text: #1e293b; + --text-light: #64748b; - /* klarere Borders */ - --border: #cbd5e1; -} + --border: #dbe4ee; + } -/* ========================= - Body -========================= */ + /* ========================= + Body + ========================= */ -body { - font-family: "Segoe UI", Arial, sans-serif; - background-color: var(--bg); - color: var(--text); -} + body { + font-family: "Segoe UI", Arial, sans-serif; + background-color: var(--bg); + color: var(--text); + } -/* ========================= - Header -========================= */ + /* ========================= + Header + ========================= */ -header { - background-color: var(--nav); -} + header { + background-color: var(--nav); + } -/* ========================= - Logo / Bild -========================= */ + /* ========================= + Logo / Bild + ========================= */ -header img { - object-fit: cover; - background-color: white; - border-radius: 14px; -} + header img { + object-fit: cover; + background-color: white; + border-radius: 14px; + } -/* ========================= - Navigation -========================= */ + /* ========================= + Navigation + ========================= */ -nav { - background-color: var(--nav); -} + nav { + background-color: var(--nav); + } -nav a { - text-decoration: none; - color: #f8fafc; /* heller für starken Kontrast */ - font-weight: 600; - border-radius: 10px; - transition: 0.3s ease; -} + nav a { + text-decoration: none; + color: #f1f5f9; + font-weight: 600; + border-radius: 10px; + transition: 0.3s ease; + } -nav a:hover { - background-color: var(--nav-hover); - color: #ffffff; -} + nav a:hover { + background-color: var(--nav-hover); + color: white; + } -/* ========================= - Suchfeld -========================= */ + /* ========================= + Suchfeld + ========================= */ -input[type="text"], -input[type="search"] { - border: 1px solid var(--border); - background-color: white; - font-size: 1rem; - border-radius: 12px; - color: var(--text); -} + input[type="text"], + input[type="search"] { + border: 1px solid var(--border); + background-color: white; + font-size: 1rem; + border-radius: 12px; + } -input:focus { - border-color: var(--primary); - outline: 3px solid #93c5fd; -} + input:focus { + border-color: var(--primary); + } -/* ========================= - Buttons -========================= */ + /* ========================= + Buttons + ========================= */ -button { - background-color: var(--primary); - color: white; - border: none; - font-size: 1rem; - font-weight: 600; - cursor: pointer; + button { + background-color: var(--primary); + color: white; + border: none; + font-size: 1rem; + font-weight: 600; + cursor: pointer; - border-radius: 12px; - transition: 0.25s ease; -} + border-radius: 12px; -/* Hover Bewegung */ -button:hover { - background-color: var(--primary-hover); - transform: translateY(-2px); -} + transition: 0.25s ease; + } -/* Tastatur-Fokus (wichtig für Accessibility) */ -button:focus, -nav a:focus { - outline: 3px solid #93c5fd; - outline-offset: 2px; -} + /* Hover Bewegung */ -/* ========================= - Hauptinhalt -========================= */ + button:hover { + background-color: var(--primary-hover); + transform: translateY(-2px); + } -main { - background-color: var(--white); - border-radius: 24px; -} + /* Klick-Effekt */ -/* ========================= - Überschriften -========================= */ + button:active { + transform: translateY(0px); + } -h1 { - color: var(--primary); - font-size: 3.5rem; -} + /* ========================= + Hauptinhalt + ========================= */ -h2 { - color: var(--primary); -} + main { + background-color: var(--white); + border-radius: 24px; + } -/* ========================= - Texte -========================= */ + /* ========================= + Überschriften + ========================= */ -p { - color: var(--text-light); - line-height: 1.8; - font-size: 1.08rem; -} + h1 { + color: var(--primary); + font-size: 3.5rem; + } -/* ========================= - Links -========================= */ + h2 { + color: var(--primary); + } -a { - color: var(--primary); - transition: 0.3s ease; -} + /* ========================= + Texte + ========================= */ -a:hover { - color: var(--primary-hover); - text-decoration: underline; -} + p { + color: var(--text-light); + line-height: 1.8; + font-size: 1.08rem; + } -/* ========================= - Footer -========================= */ + /* ========================= + Links + ========================= */ -footer { - background-color: var(--white); -} + a { + color: var(--primary); + transition: 0.3s ease; + } -footer a { - text-decoration: none; - color: var(--text-light); - font-weight: 500; -} + a:hover { + color: var(--primary-hover); + } -footer a:hover { - color: var(--primary); + /* ========================= + Footer + ========================= */ + + footer { + background-color: var(--white); + } + + footer a { + text-decoration: none; + color: var(--text-light); + font-weight: 500; + } + + footer a:hover { + color: var(--primary); + } } \ No newline at end of file -- 2.47.3 From d440b98774a7218624a92fd3a26dd80090f8bd13 Mon Sep 17 00:00:00 2001 From: caroschulte02-alt Date: Wed, 13 May 2026 01:32:52 +0200 Subject: [PATCH 17/17] First Implementation --- css/main.css | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/css/main.css b/css/main.css index 527e1e8..63392a3 100644 --- a/css/main.css +++ b/css/main.css @@ -1,7 +1,6 @@ * { - * { - box-sizing: border-box; - } + box-sizing: border-box; +} /* ========================= Farben @@ -106,14 +105,12 @@ } /* Hover Bewegung */ - button:hover { background-color: var(--primary-hover); transform: translateY(-2px); } /* Klick-Effekt */ - button:active { transform: translateY(0px); } @@ -179,5 +176,4 @@ footer a:hover { color: var(--primary); - } -} \ No newline at end of file + } \ No newline at end of file -- 2.47.3