Anpassungen stylesheet global

.vscode/launch.json

@@ -1,15 +0,0 @@
-{
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "chrome",
-            "request": "launch",
-            "name": "Launch Chrome against localhost",
-            "url": "http://localhost:8080",
-            "webRoot": "${workspaceFolder}"
-        }
-    ]
-}

css/stylesheet_global.css

@@ -1,9 +1,7 @@
 /* Font Import */
-
 @import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;600&display=swap');
 
-
 /* Reset / Normalize */
 *,
 *::before,
@@ -15,43 +13,54 @@
 
 /* Colors + Main Font */
 :root {
+    --max-width: 1200px;
+    --padding: 1.5rem;
+
+
     --tomato: #D44B24;
     --tomato-dark: #D44B24;
     --olive: #6B6B05;
     --olive-dark: #5C5C05;
-    --olive-light: #E5E1B7;
+    --olive-light: #C8CC7A;
-    --butter: #FFFBD1;
+    --butter: #F5F1BC;
-    --butter-light: #FFFDE3;
+    --butter-light: #F7F6E6;
     --white: #ffffff;
-    --black: #221C1A;
+    --black: #22211A;
     --brown: #66340d;
+    --blue: #3489DA;
+    --blue-dark: #1D70BF;
+    --error: #FF3B30;
 
     --font-main: 'Jost', sans-serif;
-    --font-size-base: 16px;
+    --font-size-base: 1rem;
 
     /* Spacing Scale */
-    --space-1: 8px;
+    --space-1: 0.5rem;
-    --space-2: 12px;
+    --space-2: 0.75rem;
-    --space-3: 16px;
+    --space-3: 1rem;
-    --space-4: 20px;
+    --space-4: 1.25rem;
-    --space-5: 24px;
+    --space-5: 1.5rem;
-    --space-6: 32px;
+    --space-6: 2rem;
+    --space-7: 3rem;
+    --space-8: 4rem;
+
 
     /* Radius Scale */
-    --radius-pill: 999px;
+    --radius-pill: 62.4375rem;
-    --radius-md: 20px;
+    --radius-sm: 0.5rem;
-    --radius-lg: 30px;
+    --radius-md: 1.5rem;
+    --radius-lg: 1.875rem;
 
-/* Letter Spacing Scale */
+    /* Letter Spacing */
     --ls-none: 0;
-    --ls-ui: 0.03em;
+    --ls-sm: 2.5%;
-    --ls-label: 0.045em;
+    --ls-label: 0.045rem;
 }
 
 /* Base Styles */
 body {
     font-family: var(--font-main);
-    font-size: 1.125em;
+    font-size: 1.125rem;
     line-height: 1.5;
     color: var(--black);
     background-color: var(--butter);
@@ -66,96 +75,139 @@ img {
 
 h1, h2 {
     font-family: 'Bagel Fat One';
-    margin-bottom: 0.5em;
+}
+
+h1 {
+    font-size: 2em;
+    font-weight: 600;
+    line-height: 120%;
+    letter-spacing: var(--ls-sm);
+    color: var(--brown);
 }
 
 p {
     font-family: 'Jost', sans-serif;
-    margin-bottom: 1em;
+    margin-bottom: 1rem;
 }
 
 /* Layout */
+
+.main-content {
+    margin-top: var(--space-8);
+
+}
+
 .container {
     width: 90%;
-    max-width: 1200px;
+    max-width: 75rem;
     margin: 0 auto;
 }
 
 /* Top Navigation */
 .top-nav-wrap {
-    background: var(--butter);
+    position: sticky;
-    padding: 6px 12px;
+    height: 58px;
+    top: 1rem;
+    z-index: 1000;
+    background: none;
+    padding: 0 1rem;
 }
 
 .top-nav {
-    background: rgba(255, 255, 255, 0.95);
+    background: var(--white);
+    /*backdrop-filter: blur(3px) saturate(140%);
+    -webkit-backdrop-filter: blur(3px) saturate(140%);*/
+
     border-radius: var(--radius-lg);
-    box-shadow: 0 3px 12px rgba(102, 52, 13, 0.1);
+    box-shadow: 0 0.1875rem 0.75rem rgba(102, 52, 13, 0.1);
     display: flex;
     justify-content: space-between;
     align-items: center;
-    min-height: 58px;
+    min-height: 3.625rem;
-    padding: 3px 9px 3px var(--space-5);
+    padding: 0.1875rem 0.5625rem 0.1875rem var(--space-5);
     max-width: none;
     width: 100%;
     box-sizing: border-box;
-    margin: 0 auto;
 }
 
 .brand {
     display: inline-flex;
     align-items: center;
-    height: 50px;
+    height: 3.125rem;
     text-decoration: none;
 }
 
 .brand img {
     width: auto;
     height: 100%;
-    max-width: 104px;
+    max-width: 6.5rem;
     display: block;
 }
 
-.top-nav-links {
+.button-small-links {
     display: flex;
     align-items: center;
-    gap: 16px;
+    gap: var(--space-1);
-    
 }
 
-.nav-link {
+
+/* Buttons */
+.button {
+    display: inline-block;
+    padding: 0.5rem 1.25rem;
+    background-color: var(--olive);
+    border: none;
+    border-radius: var(--radius-lg);
+    font-family: 'Jost', sans-serif;
+    font-weight: 400;
+    font-size: 1.25rem;
+    color: var(--butter-light);
+    cursor: pointer;
+}
+
+.button:hover {
+    background-color: var(--olive-dark);
+}
+
+.button-small {
     color: var(--black);
-    line-height: 1.3;
+    font-size: 1.125rem;
+    font-weight: 500;
+    letter-spacing: var(--ls-sm);
+    line-height: 1;
     text-decoration: none;
+
     padding: var(--space-1) var(--space-4);
     border-radius: var(--radius-md);
-    border-width: 2px;
-    border-color: none;
-    border-radius: 20px
 }
 
-.nav-link:hover,
+.button-small:hover, .button-small:active, 
-.nav-link:focus-visible {
+.button-small:focus-visible {
     background: var(--olive-light);
     color: var(--black);
 }
 
-.login-pill {
+
+.button-login {
     background: var(--olive);
-    border-radius: var(--radius-md);
+    color: var(--butter-light);
-    color: var(--butter);
+    font-size: 1.125rem;
-    line-height: 1.3;
+    font-weight: 500;
-    padding: var(--space-1) var(--space-4);
+    letter-spacing: var(--ls-sm);
+    line-height: 1;
     text-decoration: none;
+
+    padding: var(--space-1) var(--space-4);
+    border-radius: var(--radius-md);
 }
 
 .profile-pill {
-    width: 38px;
+    width: 2.375rem;
-    height: 38px;
+    height: 2.375rem;
-    border-radius: 19px;
+    border-radius: 1.1875rem;
     background: var(--tomato);
     color: var(--butter);
-    font-size: 17px;
+    font-size: 1.0625rem;
     font-weight: 500;
     letter-spacing: var(--ls-ui);
     line-height: 1.3;
@@ -165,30 +217,6 @@ p {
     text-decoration: none;
 }
 
-/* Components */
-.button {
-    display: inline-block;
-    padding: 0.5em 1.25em;
-    background-color: var(--olive-color);
-    font-family: 'Jost', sans-serif;
-    font-size: 1em;
-    color: var(--butter-light);
-    border: none;
-    border-radius: 2em;
-    cursor: pointer;
-    
-}
-
-.button:hover {
-    background-color: var(--olive-dark);
-}
-
-/* Navigation */
-.nav {
-    display: flex;
-    gap: 1rem;
-}
-
 /* Utilities */
 .text-center {
     text-align: left;
@@ -199,7 +227,7 @@ p {
 }
 
 /* Media Queries (Responsive) */
-@media (max-width: 768px) {
+@media (max-width: 48rem) {
     .container {
         width: 95%;
     }