Logout-Button in Navigation

css/event_create.css

@@ -14,12 +14,6 @@
   box-sizing: border-box;
 }
 
-.site-header {
-  background: var(--color-bg);
-  border-top: 2px solid #232323;
-  border-bottom: 1px solid var(--color-border);
-}
-
 .event-create-page {
   width: min(100% - 2rem, var(--max-width));
   margin: 0 auto;
@@ -40,7 +34,7 @@
 
 .step {
   display: none;
-  padding: var(--space-4) 0 var(--space-7);
+  padding: var(--space-4) 0 var(--space-4);
 }
 
 .submission-success {
@@ -242,7 +236,7 @@ textarea:focus {
 }
 
 .option-card--invalid {
-  border-color: var(--tomato) !important;
+  border-color: var(--error) !important;
   box-shadow: 0 0 0 2px rgba(212, 75, 36, 0.14);
 }
 
@@ -339,9 +333,10 @@ textarea:focus {
 }
 
 .error-message {
-  order: -1;  /* nach oben verschieben */
+  margin: 0;
   text-align: center; 
   width: 100%;
+
 }
 
 .progress-wrap {
@@ -393,25 +388,6 @@ textarea:focus {
   gap: var(--space-4);
 }
 
-.error-message {
-  min-height: 1.5rem;
-  margin: 0;
-  color: var(--color-error);
-  font-size: 0.95rem;
-}
-
-/*.button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.9rem 1.35rem;
-  border-radius: var(--radius-pill);
-  border: 1px solid var(--color-border);
-  background: transparent;
-  color: var(--color-text);
-  cursor: pointer;
-}*/
-
 .button--ghost:hover {
   background: rgba(0, 0, 0, 0.03);
 }

css/event_overview.css

@@ -322,7 +322,6 @@
     font-size: 13px;
     font-weight: 600;
     letter-spacing: var(--ls-la);
-    text-transform: uppercase;
 }
 
 .empty-state h3 {

css/login_signup.css

@@ -139,8 +139,6 @@ button[type="submit"]:active {
 /* --- Hints & errors --- */
 
 .error-message {
-    color: var(--error);
-    font-size: 0.8rem;
     margin-top: 5px;
     display: none;
 }

css/my_profil.css

@@ -162,7 +162,6 @@
     font-size: 0.72rem;
     font-weight: 700;
     letter-spacing: var(--ls-la);
-    text-transform: uppercase;
 }
 
 .profile-event-address {
@@ -262,7 +261,6 @@
     font-size: 0.8rem;
     font-weight: 600;
     letter-spacing: var(--ls-la);
-    text-transform: uppercase;
 }
 
 .profile-empty-state h3 {

css/stylesheet_global.css

@@ -30,6 +30,7 @@
     --blue: #3489DA;
     --blue-dark: #1D70BF;
     --error: #FF3B30;
+    --error-text: #d91200;
 
     --font-main: 'Jost', sans-serif;
     --font-size-base: 1rem;
@@ -146,7 +147,7 @@ p {
 }
 
 .error-message {
-  color: var(--error);
+  color: var(--error-text);
   font-size: 1rem;
 }
 
@@ -379,20 +380,25 @@ p {
 .button-small {
     background: var(--olive);
     color: var(--butter-light);
+    border: none;
     font-size: 1.125rem;
-    font-weight: 400;
     letter-spacing: var(--ls-sm);
+    font-family: var(--font-main);
+    font-weight: 400;
     line-height: 1;
+    border-radius: var(--radius-pill);
+    padding: 10px var(--space-3);
     text-decoration: none;
-
-    padding: var(--space-1) var(--space-4);
-    border-radius: var(--radius-md);
+    cursor: pointer;
 }
-
+§
 .button-small:hover, .button-small:active, 
 .button-small:focus-visible {
     background: var(--olive-dark);
-    color: var(--butter-light);
+}
+
+.logout-button {
+    margin-right: -1.25rem;
 }
 
 /* Auth-Links in ausgeloggter Navigation: klarer Aktiv-/Default-Zustand. */

js/event_create.js

@@ -386,9 +386,9 @@ function buildMenuItems(value) {
  */
 function mapEventTypeToCategory(value) {
   const categoryMap = {
-    Brunch: "BRUNCH",
-    Lunch: "LUNCH",
-    Dinner: "DINNER",
+    Brunch: "Brunch",
+    Lunch: "Lunch",
+    Dinner: "Dinner",
     "Kaffee + Kuchen": "COFFEE"
   };
 

js/navigation.js

@@ -25,6 +25,12 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
 
+    // Logout-Funktion
+    window.logout = function() {
+        localStorage.removeItem(CURRENT_USER_KEY);
+        window.location.href = 'index.html';
+    };
+
     // Baut die Navigation für ausgeloggte Besucher.
     function buildLoggedOutNavigation() {
         const loginIsActive = currentPage === 'login.html';
@@ -85,6 +91,13 @@ document.addEventListener('DOMContentLoaded', () => {
             >
                 Event erstellen
             </a>
+            <button
+                class="button-small logout-button"
+                onclick="logout()"
+                aria-label="Logout"
+            >
+                Logout
+            </button>
             <a
                 class="profile-pill"
                 href="my_profil.html"

my_profil.html

@@ -19,7 +19,12 @@
             <img src="assets/logo_invite.svg" alt="Invite Logo">
         </a>
         <nav class="nav-tab-links" aria-label="Hauptnavigation">
-            <a class="button-small" href="login.html" aria-label="Login">Login</a>
+            <button id="logout-button" class="button-small profile-logout" type="button">
+                Logout
+            </button>
+            <a class="button-small" href="login.html" aria-label="Login">
+                Login
+            </a>
         </nav>
     </div>
 </header>
@@ -31,7 +36,6 @@
             <h1 id="profile-headline">Mein Profil</h1>
             <p id="profile-subline" class="profile-subline">Hier findest du deine Events, deine Anmeldungen und kannst deine Profildaten verwalten.</p>
         </div>
-        <button id="logout-button" class="button-small profile-logout" type="button">Logout</button>
     </section>
 
     <section id="logged-out-state" class="profile-panel hidden" aria-live="polite">